Git WARP Web Inspector

Interactive browser-based graph viewer for git-warp. Connects to a live git warp serve instance over WebSocket to render, inspect, and mutate graph state in real time.

Features

• ELK graph layout — Automatic layered layout via elkjs with pan, zoom, and viewport culling
• Real-time diffs — Live graph updates pushed from the server as patches land
• Time travel — Seek slider to view historical graph states at any tick ceiling
• Node inspector — View properties and connected edges for any selected node
• Mutations — Add/remove nodes and edges directly from the browser

Prerequisites

• git-warp v14+ installed (npm i -g @git-stunts/git-warp)
• Node.js >= 22.0.0
• pnpm

Quick Start

# Terminal 1: start the server in your git-warp repo
cd your-repo
git warp serve --port 3000

# Terminal 2: start the inspector dev server
cd git-warp-web-inspector
pnpm install
pnpm dev

Open http://localhost:5173. The inspector auto-derives the WebSocket URL from the page location. To connect to a different server, use ?server=ws://host:port.

Single-command mode (pre-built SPA)

pnpm build
cd your-repo && git warp serve --port 3000 --static path/to/git-warp-web-inspector/dist

Then open http://localhost:3000.

Development

pnpm install        # Install dependencies
pnpm dev            # Vite dev server with HMR
pnpm build          # Production build
pnpm preview        # Preview production build
pnpm lint           # ESLint
pnpm format         # Prettier
pnpm test           # Vitest

Architecture

The inspector is a thin Vue 3 + Pinia app with zero runtime dependency on git-warp. All communication happens over the v1 WebSocket protocol:

Browser (Vue + WarpSocket) <-- WebSocket --> git warp serve (git-warp + Git repo)

Key modules

Module	Purpose
src/net/WarpSocket.js	WebSocket client — protocol envelope, request correlation, push dispatch
src/stores/graphStore.js	Pinia store — connection lifecycle, graph state, mutations, time travel
src/components/GraphCanvas.vue	SVG renderer with ELK layout, pan/zoom, viewport culling
src/layout/elkAdapter.js	Converts graph data to ELK JSON input
src/layout/elkLayout.js	Lazy-loads elkjs and runs layout with fallback

License

Apache License 2.0 — see LICENSE.