M18-5: Architect chat UI (streaming, markdown, slash commands)

code-lead commented

2026-04-20 16:02:59 +00:00

Collaborator

Copy link

As an operator, I want a chat surface on /app/planner that streams the architect's responses with tool-call rendering, markdown, and session history, so that I can think out loud with the architect about what to build next.

Acceptance criteria

Layout

Two-pane: left is sessions list (collapse/expand, new-session button); right is active chat transcript + composer
Composer: multi-line textarea with ⌘/ctrl+Enter send; auto-growing; attach/reference file picker (lists specs/*.md, config/agents.json initially)

Streaming

Messages render incrementally from /architect/stream/:task_id. Partial text shows a blinking cursor at the tail; tool calls collapse to a titled pill until finished
Markdown rendering via react-markdown + GFM + syntax-highlighted code (Shiki; token palette tuned to Tokyo Night Storm)
Tool-call blocks are expandable, showing input args and output (reuse component from #M18-3 event log)

Session management

New session starts empty with the architect's default system prompt surfaced (read-only, collapsible "System" block)
Switching sessions restores the full transcript from /architect/sessions/:id
Delete button with confirm modal (Base UI Dialog)

Integrations

Slash-command palette in the composer:
- /spec <name> — asks the architect to draft specs/<name>.md
- /breakdown specs/<name>.md — triggers the existing breakdown skill via architect
- /assign <issue#> <agent> — updates the issue's assignee through architect's Forgejo MCP
Pointing at a file via @specs/foo.md in the composer attaches its contents to the prompt automatically

Tests

Component test for the transcript renderer with a fixture stream
Playwright: start a session, send a message, mock the stream, assert tool-call pill toggles + final markdown renders

Out of scope

Voice input, image paste, file upload beyond specs/ + config/ references
Real-time multi-client sync (single operator assumption)
Re-running a past message in a past session (start a new session instead)

Dependencies

Blocks on #M18-2 + #M18-4.
Unblocks #M18-6 + #M18-7.

References

Spec: specs/m18-ui-rewrite-and-architect.md §Story M18-5

As an operator, I want a chat surface on `/app/planner` that streams the architect's responses with tool-call rendering, markdown, and session history, so that I can think out loud with the architect about what to build next. ## Acceptance criteria ### Layout - [ ] Two-pane: left is sessions list (collapse/expand, new-session button); right is active chat transcript + composer - [ ] Composer: multi-line textarea with ⌘/ctrl+Enter send; auto-growing; attach/reference file picker (lists `specs/*.md`, `config/agents.json` initially) ### Streaming - [ ] Messages render incrementally from `/architect/stream/:task_id`. Partial text shows a blinking cursor at the tail; tool calls collapse to a titled pill until finished - [ ] Markdown rendering via `react-markdown` + GFM + syntax-highlighted code (Shiki; token palette tuned to Tokyo Night Storm) - [ ] Tool-call blocks are expandable, showing input args and output (reuse component from #M18-3 event log) ### Session management - [ ] New session starts empty with the architect's default system prompt surfaced (read-only, collapsible "System" block) - [ ] Switching sessions restores the full transcript from `/architect/sessions/:id` - [ ] Delete button with confirm modal (Base UI `Dialog`) ### Integrations - [ ] Slash-command palette in the composer: - `/spec <name>` — asks the architect to draft `specs/<name>.md` - `/breakdown specs/<name>.md` — triggers the existing `breakdown` skill via architect - `/assign <issue#> <agent>` — updates the issue's assignee through architect's Forgejo MCP - [ ] Pointing at a file via `@specs/foo.md` in the composer attaches its contents to the prompt automatically ### Tests - [ ] Component test for the transcript renderer with a fixture stream - [ ] Playwright: start a session, send a message, mock the stream, assert tool-call pill toggles + final markdown renders ## Out of scope - Voice input, image paste, file upload beyond `specs/` + `config/` references - Real-time multi-client sync (single operator assumption) - Re-running a past message in a past session (start a new session instead) ## Dependencies - **Blocks on #M18-2 + #M18-4.** - **Unblocks #M18-6 + #M18-7.** ## References - Spec: `specs/m18-ui-rewrite-and-architect.md` §Story M18-5

code-lead added this to the Next-gen UI + architect agent milestone

2026-04-20 16:02:59 +00:00

code-lead added the

area:dashboard

type:user-story

labels

2026-04-20 16:02:59 +00:00

claude-desktop referenced this issue

2026-04-20 20:40:11 +00:00

M18-5.1: Chat UI mockups (architect) #187

claude-desktop commented

2026-04-20 20:40:37 +00:00

Collaborator

Copy link

Mockup reference: this story blocks on the Penpot frames produced by #187 (M18-5.1) — 3 frames covering the chat surface at rest, active transcript with streaming + tool-call pills, and the slash palette + @file popup. Do not start CSS/layout work until the designer hands off and the design-reviewer verdict is APPROVED. Primary visual inspiration = t3code's chat screens, adapted to design/tokens.json.

**Mockup reference**: this story blocks on the Penpot frames produced by **#187 (M18-5.1)** — 3 frames covering the chat surface at rest, active transcript with streaming + tool-call pills, and the slash palette + @file popup. Do not start CSS/layout work until the designer hands off and the `design-reviewer` verdict is APPROVED. Primary visual inspiration = t3code's chat screens, adapted to `design/tokens.json`.

design-reviewer referenced this issue

2026-04-20 21:02:57 +00:00

M18-5.1: Chat UI mockups (architect) #187

designer referenced this issue

2026-04-20 21:22:38 +00:00

M18-5.1: Chat UI mockups (architect) #187

design-reviewer referenced this issue

2026-04-20 21:23:36 +00:00

M18-5.1: Chat UI mockups (architect) #187

design-reviewer referenced this issue

2026-04-20 21:26:14 +00:00

M18-5.1: Chat UI mockups (architect) #187

code-lead was assigned by claude-desktop

2026-04-20 21:28:52 +00:00

code-lead referenced this issue from a commit

2026-04-20 21:45:24 +00:00

feat(planner): architect chat UI with streaming + slash + @file (M18-5)

code-lead referenced this issue from a pull request that will close it,

2026-04-20 21:45:47 +00:00

feat(planner): architect chat UI with streaming + slash + @file (M18-5) #192

code-lead referenced this issue from a commit

2026-04-20 21:51:13 +00:00

feat(planner): architect chat UI with streaming + slash + @file (M18-5)

code-lead closed this issue

2026-04-20 22:20:09 +00:00

code-lead referenced this issue from a commit

2026-04-20 22:20:11 +00:00

feat(planner): architect chat UI with streaming + slash + @file (M18-5) (#192)

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

Next-gen UI + architect agent

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

code-lead

2 participants

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#166

Rows
Columns

M18-5: Architect chat UI (streaming, markdown, slash commands) #166

Acceptance criteria

Layout

Streaming

Session management

Integrations

Tests

Out of scope

Dependencies

References