Pipe Lion 🦁

Pipe Lion is a browser-first packet inspection playground. The goal is to pair a WebAssembly-powered Rust core with a modern web interface so that packet traces can be explored entirely in the browser. Wireshark, Pipelion, nevermind... I'll see myself out.

---

Prerequisites

• Rust toolchain with the wasm32-unknown-unknown target installed

  rustup target add wasm32-unknown-unknown

• wasm-pack for building the library into a browser-friendly bundle

  cargo install wasm-pack

• Node.js (>= 18) and npm for the web UI dependencies

Tooling policy

• Frontend dependencies under docs/ are managed with npm only.
• Commit and maintain docs/package-lock.json.
• Do not add pnpm-lock.yaml (or any other frontend lockfile) to avoid split dependency resolution.

---

Build the WebAssembly Core

From the repository root, run:

wasm-pack build core --target web --out-dir docs/public/pkg

This command compiles the core crate, generates the accompanying JavaScript bindings, and places the artifacts where the frontend can fetch them (docs/public/pkg). Re-run it whenever you change the Rust code.

---

Run the Web UI

Install the frontend dependencies and start the development server:

cd docs
npm ci
npm run dev

Vite serves the app at the URL printed in the console (usually http://localhost:5173). Drag a .pcap, .pcapng, or any binary blob onto the drop zone to see the stubbed response from the WebAssembly module along with a generated hex preview.

To create a production build, run:

npm run build

---

Development Notes

• The core crate is configured with wasm-bindgen and exports a process_packet(data: &[u8]) -> String helper that will eventually produce structured packet information.
• The React UI preloads core.wasm, handles drag-and-drop uploads, and renders placeholder panes for packet summaries and hex output to make iterating on the Wasm module straightforward.
• Additional tooling (tests, linting, CI) will be added as the project grows.

---

GitHub Pages Deployment

• Pushes to the main branch automatically build the WebAssembly core, bundle the React frontend, and publish the static site to GitHub Pages via the workflow defined in .github/workflows/deploy.yml.
• The Vite configuration detects the repository name from the GitHub Actions environment and adjusts the base path so assets resolve correctly when served from https://<username>.github.io/<repository>/.
• To trigger a manual deployment, run the Deploy GitHub Pages workflow from the Actions tab in the GitHub UI.