v2.0.0: BooCoder frontend — chat pane + diff pane + session picker

Integrates BooCoder as a 'coder' workspace pane within the existing
BooChat SPA at code.indifferentketchup.com. Renamed the placeholder
'agent' pane kind to 'coder' across all types, menus, hooks, and
mobile switcher (Icon: Code instead of Bot).

CoderPane.tsx: split layout with chat area (messages via WS to
boocoder:9502, input bar posting to /api/coder/sessions/:id/messages)
and diff panel (pending changes with Approve/Reject per change plus
Approve All/Reject All). Reuses MarkdownRenderer for message content.

Proxy: Vite dev config adds /api/coder → boocoder:9502 (ordered above
/api per CLAUDE.md proxy-ordering rule). Production: Fastify route in
apps/server/src/index.ts proxies /api/coder/* to http://boocoder:3000
via fetch() pass-through. WS connects directly to :9502 (same
Tailscale network, no proxy needed for WebSocket upgrade).

WorkspacePaneKind mirror updated in both apps/web and apps/server
types. useWorkspacePanes gains coderPane() factory (replaces the old
agent toast stub). Workspace.tsx switch renders CoderPane for
pane.kind === 'coder'.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/server/src/index.ts

@@ -212,6 +212,37 @@ async function main() {
   });
   registerWebSocket(app, sql, broker);
 
+  // v2.0.0: reverse proxy /api/coder/* to the boocoder container. Keeps the
+  // SPA's HTTP requests going through a single origin (avoids CORS). WS for
+  // the coder pane connects directly to boocoder:9502 from the browser (same
+  // Tailscale network — no CORS issue for WebSocket upgrade requests).
+  const BOOCODER_ORIGIN = process.env.BOOCODER_URL ?? 'http://boocoder:3000';
+  app.all('/api/coder/*', async (req, reply) => {
+    const targetPath = req.url.replace('/api/coder', '/api');
+    const targetUrl = `${BOOCODER_ORIGIN}${targetPath}`;
+    const headers: Record<string, string> = {};
+    if (req.headers['content-type']) headers['content-type'] = req.headers['content-type'] as string;
+    if (req.headers['authorization']) headers['authorization'] = req.headers['authorization'] as string;
+
+    try {
+      const res = await fetch(targetUrl, {
+        method: req.method as string,
+        headers,
+        body: req.method !== 'GET' && req.method !== 'HEAD' ? JSON.stringify(req.body) : undefined,
+      });
+      reply.code(res.status);
+      for (const [key, value] of res.headers) {
+        if (key === 'transfer-encoding') continue;
+        reply.header(key, value);
+      }
+      const body = await res.text();
+      return reply.send(body);
+    } catch (err) {
+      app.log.error({ err, targetUrl }, 'coder proxy error');
+      reply.code(502).send({ error: 'boocoder backend unavailable' });
+    }
+  });
+
   const webDist = process.env.WEB_DIST_PATH ?? resolve(process.cwd(), '../web/dist');
   if (existsSync(webDist)) {
     await app.register(fastifyStatic, {

apps/server/src/types/api.ts

@@ -56,7 +56,7 @@ export interface Session {
 export type WorkspacePaneKind =
   | 'chat'
   | 'terminal'
-  | 'agent'
+  | 'coder'
   | 'empty'
   | 'settings'
   | 'markdown_artifact'

apps/web/src/api/types.ts

@@ -326,7 +326,7 @@ export interface AskUserAnswerSet {
 export type WorkspacePaneKind =
   | 'chat'
   | 'terminal'
-  | 'agent'
+  | 'coder'
   | 'empty'
   | 'settings'
   | 'markdown_artifact'

apps/web/src/components/ChatTabBar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Bot, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
+import { Code, History, MessageSquare, Plus, Terminal, X } from 'lucide-react';
 import type { Chat, WorkspacePane } from '@/api/types';
 import { StatusDot } from '@/components/StatusDot';
 import {
@@ -26,7 +26,7 @@ interface Props {
   onCloseOthers: (chatId: string) => void;
   onCloseToRight: (chatId: string) => void;
   onCloseAll: () => void;
-  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
+  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
   onShowHistory: () => void;
   onRename: (chatId: string, name: string) => Promise<void>;
   onRemovePane?: () => void;
@@ -188,8 +188,8 @@ export function ChatTabBar({
             <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
               <Terminal size={14} /> New terminal
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onAddPane('agent')}>
+            <DropdownMenuItem onSelect={() => onAddPane('coder')}>
-              <Bot size={14} /> New agent
+              <Code size={14} /> New coder
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

apps/web/src/components/MobileTabSwitcher.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import {
-  Bot,
+  Code,
   ChevronDown,
   Edit2,
   MessageSquare,
@@ -43,7 +43,7 @@ const SWIPE_VISUAL_CAP = 120;
 
 function paneIcon(kind: WorkspacePane['kind']) {
   if (kind === 'terminal') return <Terminal size={14} />;
-  if (kind === 'agent') return <Bot size={14} />;
+  if (kind === 'coder') return <Code size={14} />;
   if (kind === 'settings') return <SettingsIcon size={14} />;
   return <MessageSquare size={14} />;
 }
@@ -64,7 +64,7 @@ function paneLabel(pane: WorkspacePane, chats: Chat[]): string {
   }
   if (pane.kind === 'chat') return 'Chat';
   if (pane.kind === 'terminal') return 'Terminal';
-  if (pane.kind === 'agent') return 'Agent';
+  if (pane.kind === 'coder') return 'Coder';
   if (pane.kind === 'settings') return 'Settings';
   return 'Empty';
 }

apps/web/src/components/NewPaneMenu.tsx

@@ -1,4 +1,4 @@
-import { Bot, MessageSquare, Plus, Terminal } from 'lucide-react';
+import { Code, MessageSquare, Plus, Terminal } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -7,14 +7,13 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 interface Props {
-  onAddPane: (kind: 'chat' | 'terminal' | 'agent') => void;
+  onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
   disabled?: boolean;
 }
 
 // v1.8 row-2 right cluster: mirrors the desktop Workspace.tsx Split dropdown.
-// Terminal and Agent items pass through to addSplitPane which already shows
+// Terminal + Coder items pass through to addSplitPane which creates panes
-// "coming soon" toasts; rendering them here matches the Batch 3 workspace
+// of the appropriate kind.
-// model so the UI is forward-compatible with BooTerm/BooCoder.
 export function NewPaneMenu({ onAddPane, disabled }: Props) {
   return (
     <DropdownMenu>
@@ -35,8 +34,8 @@ export function NewPaneMenu({ onAddPane, disabled }: Props) {
         <DropdownMenuItem onSelect={() => onAddPane('terminal')}>
           <Terminal size={14} /> New terminal
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => onAddPane('agent')}>
+        <DropdownMenuItem onSelect={() => onAddPane('coder')}>
-          <Bot size={14} /> New agent
+          <Code size={14} /> New coder
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

apps/web/src/components/Workspace.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { PanelRight, MessageSquare, Terminal, Bot, Clipboard, Plus, X } from 'lucide-react';
+import { PanelRight, MessageSquare, Terminal, Code, Clipboard, Plus, X } from 'lucide-react';
 import type { Chat, Project, Session, WorkspacePane } from '@/api/types';
 import { MAX_PANES, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
 import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
@@ -8,6 +8,7 @@ import { terminalsRegistry } from '@/lib/events';
 import { ChatPane } from '@/components/panes/ChatPane';
 import { SettingsPane } from '@/components/panes/SettingsPane';
 import { TerminalPane } from '@/components/panes/TerminalPane';
+import { CoderPane } from '@/components/panes/CoderPane';
 import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
 import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
 import { ChatTabBar } from '@/components/ChatTabBar';
@@ -160,8 +161,8 @@ export function Workspace({
               <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
                 <Terminal size={14} /> Terminal
               </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
+              <DropdownMenuItem onSelect={() => addSplitPane('coder')}>
-                <Bot size={14} /> Agent
+                <Code size={14} /> Coder
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -264,8 +265,8 @@ export function Workspace({
                       <DropdownMenuItem onSelect={() => addSplitPane('terminal')}>
                         <Terminal size={14} /> New terminal
                       </DropdownMenuItem>
-                      <DropdownMenuItem onSelect={() => addSplitPane('agent')}>
+                      <DropdownMenuItem onSelect={() => addSplitPane('coder')}>
-                        <Bot size={14} /> New agent
+                        <Code size={14} /> New coder
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
@@ -321,6 +322,8 @@ export function Workspace({
                   label={terminalLabels.get(pane.id) ?? 'Terminal'}
                   active={idx === activePaneIdx}
                 />
+              ) : pane.kind === 'coder' ? (
+                <CoderPane sessionId={sessionId} />
               ) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
                 <MarkdownArtifactPane
                   chatId={pane.markdown_artifact_state.chat_id}

apps/web/src/components/panes/CoderPane.tsx

@@ -0,0 +1,432 @@
+// v2.0.0: BooCoder pane — renders the BooCoder chat + diff interface inside
+// BooChat's multi-pane workspace.
+//
+// Architecture:
+// - REST calls go through /api/coder/* which BooChat's server proxies to
+//   the boocoder container at http://boocoder:3000/api/*
+// - WS connects directly to the boocoder container at :9502 (same Tailscale
+//   network, no CORS for WebSocket). In dev, the Vite proxy handles it.
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Code, Send, Check, X, RefreshCw } from 'lucide-react';
+import { MarkdownRenderer } from '@/components/MarkdownRenderer';
+import { cn } from '@/lib/utils';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface CoderMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  status?: 'streaming' | 'complete' | 'failed';
+  tool_calls?: Array<{
+    id: string;
+    function: { name: string; arguments: string };
+  }>;
+  tool_results?: {
+    tool_call_id: string;
+    content: string;
+  };
+}
+
+interface PendingChange {
+  id: string;
+  file_path: string;
+  operation: 'create' | 'modify' | 'delete';
+  diff?: string;
+  new_content?: string;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+interface Props {
+  sessionId: string;
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+function useCoderMessages(sessionId: string) {
+  const [messages, setMessages] = useState<CoderMessage[]>([]);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    // Fetch existing messages on mount
+    fetch(`/api/coder/sessions/${sessionId}/messages`)
+      .then((res) => res.ok ? res.json() : [])
+      .then((data: CoderMessage[]) => setMessages(data))
+      .catch(() => {/* noop — coder backend may not be running */});
+  }, [sessionId]);
+
+  useEffect(() => {
+    // WS connects to the coder backend. In production, this goes through the
+    // same host (BooChat serves the SPA and proxies). In dev, Vite proxy
+    // handles /api/coder/ws/* -> boocoder:9502.
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${proto}//${window.location.host}/api/coder/ws/sessions/${sessionId}`;
+    const ws = new WebSocket(wsUrl);
+    wsRef.current = ws;
+
+    ws.onopen = () => setConnected(true);
+    ws.onclose = () => setConnected(false);
+
+    ws.onmessage = (ev) => {
+      try {
+        const frame = JSON.parse(ev.data as string);
+        if (frame.type === 'message_started') {
+          setMessages((prev) => [
+            ...prev,
+            { id: frame.message_id, role: frame.role ?? 'assistant', content: '', status: 'streaming' },
+          ]);
+        } else if (frame.type === 'delta') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id
+                ? { ...m, content: m.content + (frame.content ?? '') }
+                : m
+            )
+          );
+        } else if (frame.type === 'message_complete') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id ? { ...m, status: 'complete' } : m
+            )
+          );
+        } else if (frame.type === 'tool_call') {
+          setMessages((prev) =>
+            prev.map((m) =>
+              m.id === frame.message_id
+                ? {
+                    ...m,
+                    tool_calls: [
+                      ...(m.tool_calls ?? []),
+                      { id: frame.tool_call_id, function: { name: frame.name, arguments: frame.arguments ?? '' } },
+                    ],
+                  }
+                : m
+            )
+          );
+        }
+      } catch {
+        // ignore unparseable frames
+      }
+    };
+
+    return () => {
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [sessionId]);
+
+  return { messages, setMessages, connected };
+}
+
+function usePendingChanges(sessionId: string) {
+  const [changes, setChanges] = useState<PendingChange[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    fetch(`/api/coder/sessions/${sessionId}/pending`)
+      .then((res) => res.ok ? res.json() : [])
+      .then((data: PendingChange[]) => setChanges(data))
+      .catch(() => {/* noop */})
+      .finally(() => setLoading(false));
+  }, [sessionId]);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const approve = useCallback(async (changeId: string) => {
+    const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/approve`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'approved' } : c));
+    }
+  }, [sessionId]);
+
+  const reject = useCallback(async (changeId: string) => {
+    const res = await fetch(`/api/coder/sessions/${sessionId}/pending/${changeId}/reject`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      setChanges((prev) => prev.map((c) => c.id === changeId ? { ...c, status: 'rejected' } : c));
+    }
+  }, [sessionId]);
+
+  return { changes, loading, refresh, approve, reject };
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function CoderMessageBubble({ message }: { message: CoderMessage }) {
+  const isUser = message.role === 'user';
+  return (
+    <div className={cn('flex flex-col gap-1 px-3 py-2', isUser ? 'items-end' : 'items-start')}>
+      <div
+        className={cn(
+          'rounded-lg px-3 py-2 max-w-[85%] text-sm',
+          isUser
+            ? 'bg-primary text-primary-foreground'
+            : 'bg-muted text-foreground'
+        )}
+      >
+        {isUser ? (
+          <p className="whitespace-pre-wrap">{message.content}</p>
+        ) : (
+          <div className="prose prose-sm dark:prose-invert max-w-none">
+            <MarkdownRenderer content={message.content} />
+          </div>
+        )}
+        {message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mt-2 border-t border-border/50 pt-2 space-y-1">
+            {message.tool_calls.map((tc) => (
+              <div key={tc.id} className="text-xs font-mono text-muted-foreground">
+                <span className="text-primary/70">{tc.function.name}</span>
+                {tc.function.arguments && (
+                  <span className="ml-1 opacity-60">
+                    ({tc.function.arguments.slice(0, 80)}
+                    {tc.function.arguments.length > 80 ? '...' : ''})
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+        {message.status === 'streaming' && (
+          <span className="inline-block w-2 h-4 bg-current opacity-60 animate-pulse ml-0.5" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DiffPanel({
+  changes,
+  loading,
+  onRefresh,
+  onApprove,
+  onReject,
+}: {
+  changes: PendingChange[];
+  loading: boolean;
+  onRefresh: () => void;
+  onApprove: (id: string) => void;
+  onReject: (id: string) => void;
+}) {
+  const pending = changes.filter((c) => c.status === 'pending');
+
+  return (
+    <div className="flex flex-col h-full border-t border-border">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/30">
+        <span className="text-xs font-medium text-muted-foreground">
+          Pending Changes {pending.length > 0 && `(${pending.length})`}
+        </span>
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={loading}
+          className="inline-flex items-center justify-center size-6 rounded hover:bg-muted text-muted-foreground"
+          aria-label="Refresh pending changes"
+        >
+          <RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {pending.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+            No pending changes
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {pending.map((change) => (
+              <div key={change.id} className="px-3 py-2">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-xs font-mono text-foreground truncate flex-1 mr-2">
+                    <span className={cn(
+                      'inline-block w-1.5 h-1.5 rounded-full mr-1.5',
+                      change.operation === 'create' && 'bg-green-500',
+                      change.operation === 'modify' && 'bg-yellow-500',
+                      change.operation === 'delete' && 'bg-red-500',
+                    )} />
+                    {change.file_path}
+                  </span>
+                  <div className="flex items-center gap-1 shrink-0">
+                    <button
+                      type="button"
+                      onClick={() => onApprove(change.id)}
+                      className="inline-flex items-center justify-center size-6 rounded bg-green-500/10 hover:bg-green-500/20 text-green-600 dark:text-green-400"
+                      aria-label="Approve change"
+                      title="Approve"
+                    >
+                      <Check size={12} />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => onReject(change.id)}
+                      className="inline-flex items-center justify-center size-6 rounded bg-red-500/10 hover:bg-red-500/20 text-red-600 dark:text-red-400"
+                      aria-label="Reject change"
+                      title="Reject"
+                    >
+                      <X size={12} />
+                    </button>
+                  </div>
+                </div>
+                {change.diff && (
+                  <pre className="text-[11px] font-mono bg-muted/50 rounded p-2 overflow-x-auto max-h-32 whitespace-pre">
+                    {change.diff}
+                  </pre>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function CoderPane({ sessionId }: Props) {
+  const { messages, setMessages, connected } = useCoderMessages(sessionId);
+  const { changes, loading, refresh, approve, reject } = usePendingChanges(sessionId);
+  const [input, setInput] = useState('');
+  const [sending, setSending] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // Refresh pending changes when a message_complete arrives
+  useEffect(() => {
+    const lastMsg = messages[messages.length - 1];
+    if (lastMsg?.role === 'assistant' && lastMsg.status === 'complete') {
+      refresh();
+    }
+  }, [messages, refresh]);
+
+  const handleSend = useCallback(async () => {
+    const text = input.trim();
+    if (!text || sending) return;
+
+    setInput('');
+    setSending(true);
+
+    // Optimistic user message
+    const tempId = `temp-${Date.now()}`;
+    setMessages((prev) => [...prev, { id: tempId, role: 'user', content: text, status: 'complete' }]);
+
+    try {
+      const res = await fetch(`/api/coder/sessions/${sessionId}/messages`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ content: text }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        // Replace temp message with real one if server returned it
+        if (data.user_message_id) {
+          setMessages((prev) =>
+            prev.map((m) => m.id === tempId ? { ...m, id: data.user_message_id } : m)
+          );
+        }
+      }
+    } catch {
+      // The WS will bring the real messages; optimistic is good enough
+    } finally {
+      setSending(false);
+    }
+  }, [input, sending, sessionId, setMessages]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend]
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-background">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/30 shrink-0">
+        <Code size={14} className="text-muted-foreground" />
+        <span className="text-xs font-medium text-muted-foreground">BooCoder</span>
+        <span
+          className={cn(
+            'inline-block w-1.5 h-1.5 rounded-full ml-auto',
+            connected ? 'bg-green-500' : 'bg-red-500'
+          )}
+          title={connected ? 'Connected' : 'Disconnected'}
+        />
+      </div>
+
+      {/* Chat area */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-sm text-muted-foreground gap-2">
+            <Code size={32} className="opacity-40" />
+            <p>Send a message to start coding</p>
+          </div>
+        ) : (
+          <div className="py-2">
+            {messages.map((msg) => (
+              <CoderMessageBubble key={msg.id} message={msg} />
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Diff panel — only shows when there are pending changes */}
+      {changes.filter((c) => c.status === 'pending').length > 0 && (
+        <div className="h-48 shrink-0">
+          <DiffPanel
+            changes={changes}
+            loading={loading}
+            onRefresh={refresh}
+            onApprove={approve}
+            onReject={reject}
+          />
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="shrink-0 border-t border-border p-2">
+        <div className="flex items-end gap-2">
+          <textarea
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask BooCoder to write code..."
+            rows={1}
+            className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring max-h-32 min-h-[36px] max-md:min-h-[44px]"
+          />
+          <button
+            type="button"
+            onClick={() => void handleSend()}
+            disabled={!input.trim() || sending}
+            className="inline-flex items-center justify-center size-9 max-md:min-h-[44px] max-md:min-w-[44px] rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+            aria-label="Send message"
+          >
+            <Send size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/hooks/useWorkspacePanes.ts

@@ -40,6 +40,13 @@ function terminalPane(id: string = generateId()): WorkspacePane {
   return { id, kind: 'terminal', chatIds: [], activeChatIdx: -1 };
 }
 
+// v2.0.0: coder pane — renders the BooCoder interface (chat + diff panel).
+// Like terminal panes, carries no chats — the CoderPane component manages
+// its own session/messages via the /api/coder proxy.
+function coderPane(id: string = generateId()): WorkspacePane {
+  return { id, kind: 'coder', chatIds: [], activeChatIdx: -1 };
+}
+
 // v1.9: settings pane factory. No chats, no state beyond identity — the
 // SettingsPane component renders Session/Project sections from the
 // surrounding session/project.
@@ -109,10 +116,10 @@ export interface UseWorkspacePanesResult {
   closeAllTabs: (paneIdx: number) => void;
   showLandingPage: (paneIdx: number) => void;
   // v1.10.3: returns the new pane's id (or null if the operation was a no-op:
-  // 'agent' kind is a toast stub, or max panes reached). Callers can use the
+  // max panes reached). Callers can use the
   // id to update mobile URL state so the URL-sync effect doesn't fight the
   // freshly-set activePaneIdx.
-  addSplitPane: (kind: 'chat' | 'terminal' | 'agent') => string | null;
+  addSplitPane: (kind: 'chat' | 'terminal' | 'coder') => string | null;
   // Open-on-first-click, close-on-second-click. Singleton — settings panes
   // don't count toward MAX_PANES. Closing the only remaining pane (edge case)
   // falls back to an empty pane to preserve the "always one pane" invariant.
@@ -388,11 +395,7 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
     });
   }, []);
 
-  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'agent'): string | null => {
+  const addSplitPane = useCallback((kind: 'chat' | 'terminal' | 'coder'): string | null => {
-    if (kind === 'agent') {
-      toast('Agent panes coming in BooCoder');
-      return null;
-    }
     // Generate the id outside the updater so we can return it deterministically.
     // setPanes's updater can be invoked twice in strict mode; using a fixed id
     // ensures both invocations agree and the returned id matches what landed.
@@ -404,7 +407,10 @@ export function useWorkspacePanes(sessionId: string): UseWorkspacePanesResult {
         toast.error(`Maximum ${MAX_PANES} panes`);
         return prev;
       }
-      const newPane = kind === 'terminal' ? terminalPane(newPaneId) : emptyPane(newPaneId);
+      const newPane =
+        kind === 'terminal' ? terminalPane(newPaneId) :
+        kind === 'coder' ? coderPane(newPaneId) :
+        emptyPane(newPaneId);
       const next = [...prev, newPane];
       setActivePaneIdx(next.length - 1);
       success = true;

apps/web/src/pages/Session.tsx

@@ -178,7 +178,7 @@ function SessionInner({ sessionId }: { sessionId: string }) {
   // the new pane's id to the URL atomically so the effect's next pass sees a
   // matching id and is a no-op. Desktop has no URL pane state — fall through.
   const addPaneAndSwitch = useCallback(
-    (kind: 'chat' | 'terminal' | 'agent') => {
+    (kind: 'chat' | 'terminal' | 'coder') => {
       const newPaneId = addSplitPane(kind);
       if (newPaneId === null) return;
       if (isMobile) {

apps/web/vite.config.ts

@@ -30,6 +30,17 @@ export default defineConfig({
           'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
         },
       },
+      // BooCoder: proxy /api/coder/* to the coder container. Must be listed
+      // before /api so the more-specific prefix matches first.
+      '/api/coder': {
+        target: process.env.BOOCODER_DEV_URL ?? 'http://127.0.0.1:9502',
+        changeOrigin: true,
+        ws: true,
+        rewrite: (path: string) => path.replace(/^\/api\/coder/, '/api'),
+        headers: {
+          'Remote-User': process.env.DEV_REMOTE_USER ?? 'sam',
+        },
+      },
       '/api': {
         target: 'http://127.0.0.1:3000',
         changeOrigin: true,