feat(ui): rewrite the web interface on Vite, and give conversations a first-class API

[Charlesthebird]

Summary

Rebuilds the web interface on Vite + React 19 — React Router, SWR, antd 6, Emotion. It is a static bundle behind nginx with no server process; settings come from window.environmentVariables, rewritten by the container on every start, so one image serves every deployment.

The application API is reached over gRPC-Web: grpcserver.WebHandler wraps the existing *grpc.Server, and the HTTP server routes gRPC-Web requests to it ahead of its middleware chain.

Note

Reading the diff. 616 of the 696 files are ui/, which is the rewrite's tree — read it as a new app, not as a diff. The other 80 are three things:

• helm/ — the UI pod stops running a Next.js server and becomes nginx serving a static bundle, so nginx.conf, supervisord.conf, ui-deployment.yaml and the UI values change together with their tests.
• go/ and proto/ — the gRPC-Web seam (grpcserver/grpcweb.go, httpserver/server.go, app.go) and the five AgentInstance changes below, plus generated proto and sqlc output.
• CLAUDE.md and .nvmrc — the repo guide's UI section, and the pinned Node version.

Testing this PR

One command builds a Kind cluster and installs this checkout on it — controller, UI and agent runtime all built from the working tree, over the chart's published images. It ends holding a port-forward, so the last thing it prints is a working URL.

./ui/dev-scripts/setup-cluster.sh     # ~25 min, mostly image builds

http://localhost:8080

Tip

The script also leaves one agent on the cluster — an assistant template on a kagent harness — so Agents has something in it and you can send a message straight away, without creating anything first.

Warning

make create-kind-cluster && make helm-install does not work, and fails silently five different ways — including that the chart installs published images, so none of your changes are on the cluster while everything looks healthy. ui/dev-scripts/README.md covers each one, and the dev-server loop for iterating.

UI Extensions

The app declares vendor extension points anyone can use to add to it or restyle it, all in one configuration object:

Point	Contributes
navItems	Sidebar entries, positioned by order
navOverrides	Hide, rename, re-order or redirect the app's own entries
routes	Whole pages, merged into the router
routeHandles	Shell data attached to the app's own routes
slots	Components at named points inside existing pages
formFields	Extra fields on existing forms
tableColumns	Extra columns on existing tables
api	Operation and endpoint overrides, payload transforms
providers	App-level React providers
theme	Colour, radius and font tokens
shell	Whole shell regions replaced outright
branding	Name and mark wherever the shell states its identity
providerIcons	Provider icons for the model-config form
agentLinks	Agent destinations

Installing one is two edits: build a VendorExtensionConfig, then point src/vendorExtensions/activeConfig.ts at it. Overriding theme tokens restyles the app's own components, not just the extension's.

Note

📖 ui/docs/vendor-extensions.md — every extension point and what it receives. Worth reading before reviewing the vendorExtensions/ tree.

Substrate

The pages follow the CRDs. An Agent is derived, not a resource — a Harness × AgentTemplate pair read from AgentTemplate.status.harnesses[], so there is no "New agent" button. The landing page explains the four concepts over three tabs; an agent's page lists its conversations, and a conversation is an AgentInstance.

Five additive server-side changes, none affecting an existing caller:

Change	Note
AgentInstance gains a name	End to end. A column, so a rename writes only the column.
ListAgentInstances takes a query	Narrows to one agent, resolved through prepared_revision.
A2A gateway reads in any state	A suspended conversation still opens.
A share resolves to its owner	The token widens what the reader's account may read.
app.go defaults the A2A gateway	Used when no extension supplies one; an extension's handler still wins.

Test Coverage

cd ui && yarn typecheck && yarn lint && yarn test && yarn test:pw
cd go && go test ./...
make proto-generate && make -C go sqlc-generate   # then confirm `git status` is clean

376 unit tests. The browser suite runs in Chromium and Firefox, plus a Chromium pass with the example extension installed.

Follow Ups

• The browser suite runs against the dev server, not the built image and a real controller. The UI Playwright E2E workflow that did that is removed here, along with the harness it drove (playwright/scripts/setup.sh, playwright/mocks/server.mjs); restoring it is follow-up work. yarn test:pw:live covers a few journeys against a real cluster in the meantime.
• Storybook and the Chromatic workflow are removed, since the rewrite ships no stories.
• ui/playwright/DEFERRED.md lists the rest, and the surface each spec waits on. Nothing is committed as a skipped test.

Note

go test ./... fails one pre-existing test on macOS — TestFetchSourceReusesExistingMaterialization, /var vs /private/var, in a package this change does not touch.

Upgrade Notes

Caution

Breaking. The chart no longer sets NEXT_PUBLIC_BACKEND_URL, BACKEND_INTERNAL_URL or BACKEND_GRPC_URL, and drops ui.backendInternalUrl, ui.backendGrpcUrl and ui.volumes.nextjsCache.

The oauth2-proxy skip-auth-regex now names /assets/ and env-config.js instead of the Next.js paths, which no longer exist.

Also included, unrelated to the rewrite: helm/tools/grafana-mcp now passes -allowed-hosts. The server rejects any Host header it was not told about, so one reached over the cluster network answered the MCP handshake with Forbidden — the RemoteMCPServer sat Accepted=False and every agent using it failed to build its tool set. Found while testing the tools pages; happy to split it out if preferred.

---

🤖 written by Claude

[Charlesthebird]

kagent-ui-crud.mp4

---

🤖 written by Claude

[Charlesthebird]

kagent-ui-agent-chat.mp4

---

🤖 written by Claude