agenticCode/ac-ui

ac-ui — AgenticCode Web UI

React/TypeScript web UI for browsing and navigating the AgenticCode code-graph (roadmap item 51).

• M0 — project picker, module explorer (virtualized, filter + search), ingest-status badges, refresh.

• M1 · Navigation — tabbed module view: Overview (from /context), Source (CodeMirror 6 with a custom Natural highlighting mode + built-in Java; Ctrl/⌘-click an identifier to look it up by name), Calls (caller/callee panels), Call-tree (lazy, expand-on-demand). URL-driven tabs + ?line= deep-links; a STALE_SOURCE banner offers a refresh when the file changed since ingest.

• M2 · Call-graph visualisation — a lazy-loaded Graph tab: interactive ego-graph (Sigma v3 / graphology, WebGL) seeded on the current module, ForceAtlas2 layout, expand-on-demand, direction/depth/limit controls, and resolved/unresolved/dispatch/inheritance styling with a legend.

• M3 · Migration dossier — a lazy Dossier tab (per-module "porting profile"): payload (I/O contract), data structures (expand → fields), DB-access matrix (READ/WRITE badges), SQL statements, and the dynamic-CALLNAT dispatch table. Line numbers deep-link into the Source tab.

Data-flow & impact (M4) comes later.

Stack

• Vite + React 18 + TypeScript
• Tailwind CSS v4 (via @tailwindcss/vite)
• React Router (URL-driven, shareable deep-links: /p/:project/m/:name)
• TanStack Query for data fetching/caching over a generated OpenAPI client (openapi-typescript + openapi-fetch) — no hand-maintained API types.

Prerequisites

The AgenticCode server must be running on http://localhost:8787 (./manage-ac.sh deploy from the repo root). The Vite dev server proxies /api and /q to it.

Develop

npm install
npm run dev        # http://localhost:5173

Regenerate the API client

The typed client (src/api/schema.ts) is committed so the app builds without the server. Regenerate it whenever the REST API changes (needs the server up):

npm run gen:api    # openapi-typescript http://localhost:8787/q/openapi -> src/api/schema.ts

Build

npm run build      # tsc --noEmit && vite build  -> dist/
npm run preview    # serve the production build

Notes / constraints

• Node ids are unstable across re-ingest — the UI keys on name + sourceFile, never on node id.
• Ingest status is "true at query time" (a warming query can re-ingest and clear staleness); after a refresh we invalidate + refetch rather than optimistically flipping badges.
• Not wired into the Maven build. Deploy model: a standalone nginx container (ac-ui service in docker-compose.yml) built from ac-ui/Dockerfile (npm build runs inside Docker — no local Node needed). nginx serves the SPA at http://localhost:5174 and reverse-proxies /api + /q to ac-code-server (single browser origin → no CORS). Brought up by ./manage-ac.sh deploy; rebuild just the UI with ./manage-ac.sh ui.