[yyyyaaa]

Adds a Coding Agent workspace template (@constructive/coding-agent) for running several coding sessions at once, plus the shared kit changes it needs.

Template

• Layouts: sessions sit in a tab strip or a project sidebar, and each one is the same component in both.
• Session view: a transcript built from the AI kit, and a composer with a model picker, attachments and a follow-up queue.
• Side panel: diff review with line comments, file tabs, a browser tab and a file tree.
• Terminal dock: a shell along the bottom of the session.
• Background sessions: every open session stays mounted. A tab shows its live status and marks itself when the agent needs an answer, fails or finishes.
• Sub-agents: sub-agents, orchestrator/worker runs, messages between agents, handoffs, phases and a shared task board appear in the transcript. Agents and Tasks tabs list them, and you can open or steer any agent.
• Worktrees: changes are kept per worktree. A toolbar chip in the review shows each worktree's pull request and only its failing or running checks.
• Conversation rail: a rail on the transcript's edge previews each turn and jumps to it. Long threads render in chunks, and diffs draw as they scroll into view.

Harness model

A session either plays a demo script or shows a real harness's event log. Both are folded by one pure reducer, and controls reach the host as actions.

flowchart LR
  S[script] --> E[HarnessEvent log]
  H[host events / createHarnessStore] --> E
  E -->|reduceHarness| V[HarnessView]
  V --> UI[transcript, panels, rail, tabs]
  UI -->|onAction: send, stop-run, permission, answer, rerun-checks…| HOST[host runtime]
  HOST --> H

Loading

const store = createHarnessStore();
harness.subscribe(sessionId, (event) => store.push(event));

<CodingAgent
  data={{ ...data, sessions: data.sessions.map((s) => ({ ...s, store })) }}
  onAction={harness.control}
/>;

Kit changes

• ModelSelector: compact 30px rows and a ring-shadow surface. The side card is no longer clipped by the popover.
• Shared helpers:
  • popoverSurfaceClass
  • CommandList density="compact"
  • iconButtonClass
  • useElementSize / useScrollbarInset
  • unscaledRect, which FluidHighlight uses so it measures correctly while a popup scales in
• AI components: status icon sizing, wrapping, alignment and dir="auto" fixes in Tool, PlanTracker, ApprovalCard, AskCard and Message. ChatContainer now merges a caller's ref with its own.
• Agent status: agents-builder gets rail and ring status indicators, and a shared statusSignal.
• Theme: the fine-pointer scrollbar styles move into @layer base, so scrollbar-hide and similar utilities win again for mouse users.

Docs

• New page: /blocks/coding-agent has a live preview with an example picker for the tabs layout, the sidebar layout and sub-agents.
• Harness guide: a "Driving sessions from your harness" section with a store-based example.
• File split: lib/application-blocks is split into one module per template.

Stories

Templates/CodingAgent: Tabs, Sidebar, With terminal, Multi-agent, Multi-agent (sidebar), and Long thread (stress test). The break-ui stories add worst-case data.

🤖 Generated with Claude Code

https://claude.ai/code/session_012nboNEcwNWwE4SXw9jxVAv

[tenki-reviewer]

Review complete. 🟡 1 medium

💬 Inline comments (1)

• 🟡 Stopping the root run leaves its approval pending and resolvable — use-harness.ts:276

🧹 Nitpicks (7) — 🟢 7 low

• 🟢 Add missing tooltip to coding-agent registryDependencies (registry.json:3825) — The new coding-agent registry entry omits tooltip from its registryDependencies (packages/ui/registry.json:3825), but its file turn-rail.tsx imports Tooltip, TooltipTrigger, TooltipContent, and TooltipProvider from ../tooltip (packages/ui/src/components/coding-agent/turn-rail.tsx:9).
• 🟢 Move the RUN_TIMING doc comment off runProgress (use-agent-run.ts:40) — The doc comment for RUN_TIMING ("Beat lengths for the scripted run, in milliseconds") was left above the newly inserted runProgress function in packages/ui/src/components/agents-builder/use-agent-run.ts:40, so it attaches to the wrong declaration and RUN_TIMING (line 48) is left undocumented.
• 🟢 Send to a paused run discards its queued script (use-harness.ts:331) — Sending a message to a paused run silently discards the rest of its script.
• 🟢 Widening closes panel the user opened while narrow (use-panel-tabs.ts:95) — The narrow action snapshots open once when the panel first closes for narrowness, and restores that snapshot verbatim once there is room again (packages/ui/src/components/coding-agent/use-panel-tabs.ts:104-105).
• 🟢 Reset stale peek level in LevelMenu on model change (model-selector.tsx:190) — LevelMenu keeps its peek hover state across model switches because ModelDetails is rendered without a key for detailModel (packages/ui/src/components/ai/model-selector.tsx:625-632), so the same LevelMenu instance persists while model changes.
• 🟢 Rate limit queries a column the demo schema never defines (demo-invitations.ts:155) — The turn-two rate limiter shown in the demo filters on invitations.createdAt (packages/ui/src/components/coding-agent/demo-invitations.ts:155), but the invitations table defined in SCHEMA_WITH_INVITES (demo-invitations.ts:78-93) has no createdAt column — the only createdAt belongs to teams — and no later schema edit adds one.
• 🟢 Reveal handle can't jump to the task turn (session-timeline.tsx:402) — The reveal handle in SessionTimeline (packages/ui/src/components/coding-agent/session-timeline.tsx:402-406) looks the id up only among run.items; the task row is not a timeline item — it is a synthetic Message with data-item-id={TASK_TURN_ID} rendered only when renderFrom === 0 (session-timeline.tsx:457-459).

---

The change introduces two new registry application blocks — a full coding-agent workspace (harness store, session/timeline/composer UI, panels, demo scripts) and an agents-builder playback surface — plus supporting updates to the AI chat components, base UI primitives, workspace-kit helpers, and motion utilities. The docs app's monolithic application-blocks.ts is split into per-block manifest modules with updated navigation, routes, and preview pages, and the registry manifests, smoke-install case, package exports, and skill docs are updated to match.

Files	Change
packages/ui/src/components/coding-agent/*	New coding-agent block: harness store/hooks, session surfaces, panels, composer, shortcuts, and demo fixtures
packages/ui/src/components/agents-builder/*	New agents-builder block: run panel, status ring, playback engine, and run hook
packages/ui/src/components/ai/*, packages/ui/src/components/{button,collapsible,command,dropdown-menu,popover,tabs}.tsx	Refactors and additions to chat/tool/message components and base primitives, incl. fluid-highlight
packages/ui/src/components/workspace-kit/*, packages/ui/src/lib/motion/*, packages/ui/src/{theme.ts,styles/globals.css,package.json,registry.json}	Kit primitives, element-size hook, keyframes, and registry/package manifest updates
apps/blocks/src/lib/application-blocks*, application-doc-navigation.ts, showcase components, coding-agent pages, globals.css	Manifest modularization, docs navigation, showcase canvas/preview, and Tailwind @source wiring for the new trees
apps/registry/scripts/smoke-install.ts, apps/registry/REGISTRY.md, .agents/skills/constructive-blocks/*, AGENTS.md	Smoke-install case, registry docs, and skill documentation updates
packages/ui/src/stories/*, packages/ui/test/*	Stories for the new blocks and hydration/coding-agent tests

_{Reviewed commit: 25997fd}

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​pierre/​trees@​1.0.0-beta.6
	@​pierre/​diffs@​1.5.2

View full report

[tenki-reviewer]

This PR adds the coding-agent and agents-builder application blocks with their harness/playback state machinery, refactors the AI chat components, splits the application-block manifests into modules, and wires the new docs routes — overall solid, with only minor harness state-lifecycle and registry-manifest issues.

Key findings

• 🟡 Stopping the root run leaves its approval pending and resolvable — use-harness.ts:276

[tenki-reviewer]

🟡 bug · medium

Stopping the root run leaves its approval pending and resolvable

When the root run is stopped while held at an approval, stopRun sets its status to idle (packages/ui/src/components/coding-agent/use-harness.ts:276), but reduceHarness only strips pending requests on cancelled/done/failed (packages/ui/src/components/coding-agent/harness.ts:444) — idle is excluded. The request therefore stays in view.pending, so RequestDock keeps rendering the approval card for a run that is at rest, while the tab reports idle. Worse, resolving the ghost card still emits: control() builds the host action from view.pending without checking the run's status (packages/ui/src/components/coding-agent/use-harness.ts:529-533), so a permission action with the stale requestId is sent to the host for a run that no longer exists, even though the local reducer correctly no-ops it.

📋 Prompt for AI Agents

In packages/ui/src/components/coding-agent/use-harness.ts, in stopRun (lines 260-278), before setStatus(state, runId, isRoot ? 'idle' : 'cancelled') at line 276, drop any pending request owned by runId: for each entry in state.view.pending with entry.runId === runId, emit { kind: 'request.resolved', runId, requestId: entry.request.id } (or filter the pending list directly) so the approval dock clears. Also update the ended check in packages/ui/src/components/coding-agent/harness.ts line 444 to treat a transition to 'idle' for a run that had a pending human request as ended, so host-driven flows behave the same. This prevents resolving an approval for a run that has already been stopped.