batch4: chats-in-sessions, force-send, /compact, right-rail file browser

Session 1:N Chat data model with backfill. Workspace switches to client-side
multi-tab pane management. Right-rail file browser with float-over viewer and
click-drag line selection replaces FileBrowserPane. Adds /compact streaming
summarizer (respects compact markers in context builder), force-send (cancels
in-flight, persists partial as 'cancelled', awaits cancellation completion via
deferred Promise + 5s timeout), message queue, stop generation, chat
auto-rename, session archive/unarchive with Closed Sessions section on repo
landing page. CHECK constraints on sessions.status, messages.role,
messages.status with KEEP IN SYNC comments tying to MESSAGE_ROLES /
MESSAGE_STATUSES const arrays. Deletes dead pane routes/hook and the
api.panes.* client block.

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

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

@@ -1,19 +1,30 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronDown, Square, X } from 'lucide-react';
 import { toast } from 'sonner';
 import { api } from '@/api/client';
 import { useSessionStream } from '@/hooks/useSessionStream';
 import { MessageList } from '@/components/MessageList';
 import { ChatInput } from '@/components/ChatInput';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 
 interface Props {
   sessionId: string;
+  chatId: string;
+  projectId: string;
+  sessionChats?: import('@/api/types').Chat[];
 }
 
-export function ChatPane({ sessionId }: Props) {
+export function ChatPane({ sessionId, chatId, projectId, sessionChats }: Props) {
   const stream = useSessionStream(sessionId);
   const lastErrorRef = useRef<string | null>(null);
+  const [queue, setQueue] = useState<string[]>([]);
+  const processingRef = useRef(false);
 
-  // Surface stream errors via toast — matches Session.tsx behavior.
   useEffect(() => {
     if (stream.error && stream.error !== lastErrorRef.current) {
       lastErrorRef.current = stream.error;
@@ -24,16 +35,130 @@ export function ChatPane({ sessionId }: Props) {
     }
   }, [stream.error]);
 
-  async function handleSend(content: string) {
-    await api.messages.send(sessionId, content);
+  const chatMessages = stream.messages.filter((m) => m.chat_id === chatId);
+  const streaming = chatMessages.some((m) => m.status === 'streaming');
+
+  // Auto-send next queued message when streaming completes
+  useEffect(() => {
+    if (streaming || queue.length === 0 || processingRef.current) return;
+    processingRef.current = true;
+    const next = queue[0]!;
+    setQueue((prev) => prev.slice(1));
+    api.messages.send(chatId, next)
+      .catch((err) => toast.error(err instanceof Error ? err.message : 'queue send failed'))
+      .finally(() => { processingRef.current = false; });
+  }, [streaming, queue, chatId]);
+
+  const handleSend = useCallback(async (content: string) => {
+    const trimmed = content.trim();
+    if (!trimmed) return;
+    if (trimmed === '/compact') {
+      try {
+        await api.chats.compact(chatId);
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'compact failed');
+      }
+      return;
+    }
+    if (streaming) {
+      setQueue((prev) => [...prev, trimmed]);
+      return;
+    }
+    await api.messages.send(chatId, trimmed);
+  }, [chatId, streaming]);
+
+  async function handleStop() {
+    try {
+      await api.chats.stop(chatId);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'stop failed');
+    }
   }
 
-  const streaming = stream.messages.some((m) => m.status === 'streaming');
+  const handleForceSend = useCallback(async (content: string) => {
+    const trimmed = content.trim();
+    if (!trimmed) return;
+    try {
+      await api.chats.forceSend(chatId, trimmed);
+      setQueue([]);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'force send failed');
+    }
+  }, [chatId]);
+
+  function removeQueued(idx: number) {
+    setQueue((prev) => prev.filter((_, i) => i !== idx));
+  }
+
+  async function forceSendQueued(idx: number) {
+    const msg = queue[idx];
+    if (!msg) return;
+    setQueue((prev) => prev.filter((_, i) => i !== idx));
+    try {
+      await api.chats.forceSend(chatId, msg);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'force send failed');
+    }
+  }
 
   return (
     <div className="flex flex-col h-full min-h-0">
-      <MessageList messages={stream.messages} sessionId={sessionId} />
-      <ChatInput disabled={streaming} onSend={handleSend} />
+      <MessageList messages={chatMessages} sessionChats={sessionChats} />
+
+      {/* Queued messages */}
+      {queue.length > 0 && (
+        <div className="px-4 py-1 border-t space-y-1">
+          {queue.map((msg, i) => (
+            <div key={i} className="flex items-center gap-2 text-xs text-muted-foreground bg-muted/30 rounded px-2 py-1">
+              <span className="font-medium shrink-0">Queued:</span>
+              <span className="truncate flex-1">{msg}</span>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    className="p-0.5 hover:bg-muted rounded shrink-0"
+                    aria-label="Queued message options"
+                  >
+                    <ChevronDown size={12} />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onSelect={() => { /* default: queued, nothing to do */ }}>
+                    Send when done
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onSelect={() => void forceSendQueued(i)}>
+                    Force send now
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <button
+                type="button"
+                onClick={() => removeQueued(i)}
+                className="p-0.5 hover:bg-muted rounded shrink-0"
+                aria-label="Cancel queued message"
+              >
+                <X size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Stop button when streaming */}
+      {streaming && (
+        <div className="flex justify-center py-1 border-t">
+          <button
+            type="button"
+            onClick={() => void handleStop()}
+            className="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border hover:bg-muted text-muted-foreground hover:text-foreground"
+          >
+            <Square size={10} className="fill-current" />
+            Stop generating
+          </button>
+        </div>
+      )}
+
+      <ChatInput disabled={false} projectId={projectId} onSend={handleSend} onForceSend={streaming ? handleForceSend : undefined} />
     </div>
   );
 }