Skip to content

feat: Session Phase 2 — interactive agent chat + split pane#109

Merged
jonwiggins merged 1 commit intomainfrom
optio/task-c646b7df-6366-46fe-9269-53bb3cdc44b3
Mar 26, 2026
Merged

feat: Session Phase 2 — interactive agent chat + split pane#109
jonwiggins merged 1 commit intomainfrom
optio/task-c646b7df-6366-46fe-9269-53bb3cdc44b3

Conversation

@jonwiggins
Copy link
Owner

@jonwiggins jonwiggins commented Mar 26, 2026

Summary

Adds an interactive Claude Code chat pane alongside the existing web terminal in sessions (Phase 2 of #80, following #93).

  • Split pane layout: Resizable agent chat (left) + terminal (right) with collapsible panes and localStorage-persisted layout preference
  • Agent chat WebSocket (WS /ws/sessions/:id/chat): Execs claude one-shot prompts in the pod worktree, streams structured JSON events (text, tool_use, tool_result, thinking, system, error), supports interrupt
  • Streaming chat UI: Markdown rendering, collapsible tool call visibility (files, bash, search), thinking blocks, error display
  • Live cost tracking: Cumulative cost extracted from agent result events, displayed in session header, persisted to session record
  • Model selector: Dropdown in session header to pick model (haiku/sonnet/opus), sourced from repo config
  • Terminal-to-agent integration: Architecture for "send to agent" — pushing terminal output into chat input
  • PR badges: Compact inline PR status badges with CI/review indicators below the terminal pane

Files Changed

File Change
apps/api/src/ws/session-chat.ts New — Session chat WebSocket handler
apps/api/src/server.ts Register session chat WS route
apps/api/src/routes/sessions.ts Extend GET /sessions/:id with model config
apps/web/src/components/session-chat.tsx New — Agent chat UI component
apps/web/src/components/split-pane.tsx New — Resizable split pane layout
apps/web/src/app/sessions/[id]/page.tsx Rewrite with split pane, cost, model selector
packages/shared/src/types/session.ts Add chat WebSocket message types

Test plan

  • Typecheck passes (pnpm turbo typecheck)
  • Tests pass (pnpm turbo test — 216 tests)
  • Formatting passes (pnpm format:check)
  • Session detail page renders split pane with chat (left) and terminal (right)
  • Drag handle resizes panes; layout persists on refresh
  • Collapse buttons hide/show each pane
  • Sending a message in chat triggers agent prompt and streams response
  • Tool use events are collapsible with input details
  • Interrupt button cancels in-progress agent work
  • Cost updates in real-time in the session header
  • Model selector changes the model for subsequent prompts
  • PR badges appear when PRs are detected from terminal

Closes #105

🤖 Generated with Claude Code

@jonwiggins jonwiggins force-pushed the optio/task-c646b7df-6366-46fe-9269-53bb3cdc44b3 branch from 2382072 to 85c0872 Compare March 26, 2026 04:34
Add an interactive Claude Code chat pane alongside the existing web terminal
in sessions. The agent chat (left) and terminal (right) operate on the same
worktree in a resizable split pane layout.

Backend:
- New WebSocket handler at WS /ws/sessions/:id/chat that execs claude
  one-shot prompts in the pod worktree and streams structured JSON events
- Auth env vars (API key, OAuth token, max-subscription) resolved and
  injected into the claude process
- Cost tracking: cumulative cost extracted from agent result events and
  persisted to the session record in real time
- Extended GET /api/sessions/:id to return model config from repo settings

Frontend:
- SessionChat component: streaming chat UI with markdown, tool use
  visibility (collapsible file/bash/search tool calls), thinking blocks,
  interrupt button, and error display
- SplitPane component: resizable drag handle, collapsible panes with
  expand/collapse buttons, layout persisted to localStorage
- Updated session detail page with split pane layout, live cost counter
  in header, model selector dropdown, and compact inline PR badges
- "Send to agent" integration: parent page can register a handler to
  push terminal output into the chat input

Shared types:
- SessionChatClientMessage, SessionChatServerMessage, SessionChatEvent,
  SessionChatStatus types added to @optio/shared

Closes #105

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@jonwiggins jonwiggins force-pushed the optio/task-c646b7df-6366-46fe-9269-53bb3cdc44b3 branch from 5729067 to 6c005df Compare March 26, 2026 04:38
@jonwiggins jonwiggins merged commit 1660a95 into main Mar 26, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Session Phase 2 — interactive agent chat + split pane

1 participant