Chat UI v2 — streaming, keepalives, and tool legibility
vocion-v0.3.0 ships ChatShell — a server-sent-events chat surface with 15s keepalives, thinking summaries, and inline tool calls. Here's how to use it and what's behind it.
vocion-v0.3.0 swaps the dashboard's /chat over to ChatShell: a server-sent-events surface designed for long-running agent runs that don't sit comfortably inside a 30-second request window. If you've been running anything that does retrieval, tool use, or multi-step reasoning, this is the change you'll feel first.
What's new
- SSE streaming with 15-second keepalives — agent runs stay open through reverse proxies and CDNs that would otherwise sever an idle HTTP connection
- Thinking summaries — the model's intermediate reasoning is collapsed into a
Thinking…chip you can expand, not pasted into the message body - Inline tool calls — each tool invocation renders with its name, arguments, and result instead of leaking into the assistant's text
- Source citations — retrieval-backed answers show which documents fed the response
- Inline feedback — thumbs up / down + a note, written straight to the audit timeline
Why we built it
Two problems with the old chat surface, both surfaced by the deepagents + Langfuse work in the prior release:
- Long runs died silently. A 2-minute retrieval + draft would stall against the Vercel edge proxy at 30s. Users saw a frozen UI; the run kept going on the backend and the result was lost.
- Tool calls were invisible. When the agent invoked
search_emailsoradd_learning, those calls flowed into the same text stream as the assistant's prose. You couldn't tell the model from its tools, which made debugging painful and reviewing harder.
ChatShell separates the concerns: streaming envelope (durable), reasoning surface (collapsed), tool calls (structured), citations (structured), feedback (audited).
How to use it
The chat lives at /dashboard/chat. After you sign in to either local instance (http://localhost:3000 for the umbrella dashboard, http://localhost:3001 for the support-reply demo), it's the first thing the dashboard sidebar links to.
A concrete walkthrough — drafting a reply to a support ticket on the demo instance:
1. Open http://localhost:3001/sign-in
(Banner autofills demo@example.com / demo123)
2. Click "Sign in" → lands in /dashboard
3. Sidebar → Chat → type:
"Draft a reply to this ticket: 'Order #42 hasn't shipped, ETA?'"
4. Watch the run unfold:
- "Thinking…" chip (expand to see the plan)
- Tool call: summarize_ticket (Haiku, ~400ms)
- Tool call: draft_reply (Sonnet, requires approval)
- Streamed reply text
- Sources panel: which playbook / learnings fed the draft
5. Hit thumbs-up or thumbs-down → leaves a note → committed to the audit trail
If you're wiring a custom agent into the same shell, point your stream handler at /rpc/agent/stream and emit the SSE event types defined in packages/core/src/features/dashboard/chat/. The shell auto-renders thinking chips for event: thinking, tool cards for event: tool_call, source cards for event: source, and the assistant body for event: text.
What's next
- Phase 3 (invite flow UI) lets teams sign up and invite collaborators to a project
- Phase 1.5 retires the
org_id→project_idshim that was carried over from the Clerk era - Translations — chat UI strings are still English-only; fr coming via Crowdin
Links
- GitHub release: https://github.com/vocion/vocion-core/releases/tag/vocion-v0.3.0
- Dashboard surface:
/dashboard/chat(any signed-in user) - Code:
packages/core/src/features/dashboard/chat/(ChatShell + event renderers) - Observability:
/dashboard/observabilityto see the Langfuse trace of any run