Web UI

Web UI

The UI is a single dockable workspace: every surface is a panel you can move, close, pop out to an OS window, or recall from the command palette (Ctrl+Shift+P). The layout persists in localStorage.

The server serves the built frontend from frontend/dist, so a single serve command is the whole deployment. The StatusFooter shows the frontend and server versions and timestamps — a mismatch there means a stale build.

Panels

Panel	What it is for
Chat	the conversation; streams tool calls, plans, diffs and approvals live. Clickable path:line citations open the file at those lines (in fresh answers and replayed history). Approval cards, ask_user forms and interactive artifacts render inline. Stop interrupts the run
Explorer	the workdir file tree
Editor	code editor for workdir files; highlights lines revealed by citations or the agent's reveal_code; diff toggle; manual saves warn before clobbering agent edits
Diff	working tree vs HEAD, per-file diffs, symbol-level change summary, impact graph. This is what Review changes → opens
Graph	with a file open: call graph, test evidence ("trust" — which tests reference it, property tests, mutation kill rate), and a control-flow graph flagging dead blocks. Without one: architecture map, structure outline, and a repo Q&A box answered with file+line citations
Planning	roadmap items, tickets, decisions, PRDs and tech designs — the same store the agent writes. See Planning
Artifacts	live interactive artifacts: choice cards, editable spec blocks, decision records, rendered HTML, and screen designs/wireframes
Notes	session notes, plus standing project notes the agent reads on every run
Renders	images in the workdir, newest first; *-before.*/*-after.* and *-dark.*/*-light.* pair into side-by-side comparisons
Terminal	run a shell command in the workdir without leaving the page
Output	per-run event log with a run selector, a narrated "tour of this run", and a draft-design-doc button
Waterfall	timeline of a run's tool calls and gates — the fastest answer to "where did the time go" or "is it stalled"
Trace	the raw event trace, plus checkpoints with a rewind button per snapshot
Cost	requests, input/output tokens and cost, by model, by request, and by function
Memory	durable memory entries and banked solutions, with scope and origin; add and delete
MCP	configured MCP servers with per-session enable/disable
Config	model lineup and provider keys, with Verify keys; a UI over config.toml
Standards	the directives editor, the skills editor, and the review checklist
Processes	running and exited processes the agent spawned: pid, status, exit code, background flag, command line

The run lifecycle on screen

1. Plan — non-trivial work arrives as a plan for you to approve, with steps tracked as they complete.
2. Gates — approval cards appear before shell commands, pushes, installs and destructive operations: Approve once, Approve pattern, or Deny.
3. Questions — ask_user forms appear inline; answer and the run continues.
4. Terminal — RUN_FINISHED, RUN_ERROR or RUN_CANCELLED, with a report and the gate output as evidence.
5. Inspect — Diff, Waterfall, Trace, Output, Cost.

Composer controls (per run)

Control	Effect
model slot	run this task on main, subagent, or another configured model
attach image	image input, if a vision model is configured
suggest	agent edits become revertable proposals instead of direct writes
checklist…	run a distilled review checklist as a dedicated run
fix until green	after the task, loop on test failures and feed them back (max 3 rounds)
yolo	auto-approve every gated action for this session — deliberately red when active
🔔	desktop notifications for run finish / waiting

Stop, restart, reconnect

• Stop terminates the worker; the run records as interrupted.
• Config changes need no restart; CodingDude's own code changes need uv run codingdude restart.
• If the browser disconnects mid-run, reconnecting resumes the live run; a run that finished while you were away replays from history.

Accessibility and layout notes

Panels are dockable, so the layout is yours: two panes for a review session (Chat + Diff), one pane for a headless-style watch (Output + Waterfall). The command palette is the fastest way to a panel you have closed, and every panel works without a session selected by showing a placeholder rather than an error.