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

Phase 3 of v2.0. React + Vite SPA at apps/coder/web/ served by
the coder Fastify server via @fastify/static with SPA fallback.

Chat pane: message list via WS streaming (useSessionStream hook),
input bar, POST /api/sessions/:id/messages on submit, markdown
rendering via react-markdown + remark-gfm, inline tool-call display.

Diff pane: fetches GET /api/sessions/:id/pending, shows pending
changes with file path + operation badge (create/edit/delete),
before/after diff for edits, Approve/Reject per change and
Approve All/Reject All buttons.

Layout: fixed two-pane split (chat 60%, diff 40%). Dark theme
(bg-zinc-900). Desktop-first for v2.0.0.

Session picker (Home page): lists projects and sessions from the
shared DB. No CRUD — use BooChat's UI for that.

Dockerfile updated: builds web app in builder stage, copies dist
to runtime. index.ts registers fastifyStatic + SPA fallback route.

Tailwind v4, React 18, TypeScript strict. ~20 new files, ~370KB
built output. Functional developer tool UI, not polished consumer
product — Phase 7 (v2.0.3) handles polish.

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

apps/coder/web/src/components/MessageBubble.tsx

@@ -0,0 +1,115 @@
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { Message } from '@/api/types';
+import { Wrench, AlertCircle, Loader2 } from 'lucide-react';
+
+interface Props {
+  message: Message;
+}
+
+export function MessageBubble({ message }: Props) {
+  if (message.role === 'tool') {
+    return <ToolResultBubble message={message} />;
+  }
+
+  const isUser = message.role === 'user';
+  const isStreaming = message.status === 'streaming';
+  const isFailed = message.status === 'failed';
+
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
+      <div
+        className={`max-w-[85%] rounded-lg px-4 py-2.5 ${
+          isUser
+            ? 'bg-blue-600 text-white'
+            : 'bg-zinc-800 text-zinc-100 border border-zinc-700'
+        }`}
+      >
+        {isFailed && (
+          <div className="flex items-center gap-1.5 text-red-400 text-xs mb-1">
+            <AlertCircle size={12} />
+            <span>Failed</span>
+          </div>
+        )}
+
+        {message.tool_calls && message.tool_calls.length > 0 && (
+          <div className="mb-2 space-y-1">
+            {message.tool_calls.map((tc) => (
+              <div
+                key={tc.id}
+                className="flex items-center gap-1.5 text-xs text-zinc-400 bg-zinc-900/50 rounded px-2 py-1"
+              >
+                <Wrench size={11} />
+                <span className="font-mono">{tc.name}</span>
+                <span className="text-zinc-500 truncate max-w-[200px]">
+                  {truncateArgs(tc.arguments)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {message.content.trim() && (
+          <div className="prose prose-invert prose-sm max-w-none [&_pre]:bg-zinc-900 [&_pre]:p-3 [&_pre]:rounded [&_pre]:overflow-x-auto [&_code]:text-zinc-300 [&_p]:my-1.5">
+            <Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>
+          </div>
+        )}
+
+        {isStreaming && !message.content.trim() && (
+          <div className="flex items-center gap-1.5 text-zinc-400">
+            <Loader2 size={14} className="animate-spin" />
+            <span className="text-xs">Thinking...</span>
+          </div>
+        )}
+
+        {isStreaming && message.content.trim() && (
+          <span className="inline-block w-1.5 h-4 bg-zinc-400 animate-pulse ml-0.5 align-middle" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ToolResultBubble({ message }: Props) {
+  const result = message.tool_results;
+  if (!result) return null;
+
+  const isError = result.error;
+  const output = result.output || '';
+  const displayOutput =
+    output.length > 300 ? output.slice(0, 300) + '...' : output;
+
+  return (
+    <div className="flex justify-start mb-2 ml-6">
+      <div
+        className={`max-w-[80%] rounded px-3 py-2 text-xs font-mono border ${
+          isError
+            ? 'bg-red-950/30 border-red-800/50 text-red-300'
+            : 'bg-zinc-800/50 border-zinc-700/50 text-zinc-400'
+        }`}
+      >
+        {result.truncated && (
+          <span className="text-yellow-500 text-[10px] block mb-1">
+            [truncated]
+          </span>
+        )}
+        <pre className="whitespace-pre-wrap break-all">{displayOutput}</pre>
+      </div>
+    </div>
+  );
+}
+
+function truncateArgs(args: string): string {
+  if (!args) return '';
+  try {
+    const parsed = JSON.parse(args);
+    const keys = Object.keys(parsed);
+    if (keys.length === 0) return '';
+    const first = keys[0]!;
+    const val = String(parsed[first]);
+    const display = val.length > 40 ? val.slice(0, 40) + '...' : val;
+    return `${first}: ${display}`;
+  } catch {
+    return args.length > 50 ? args.slice(0, 50) + '...' : args;
+  }
+}