fix: auto-scroll, project switching, and activity indicators

statico · claude · statico · commit a94de0770ab6 · 2026-03-13T20:14:17.000Z
- Fix auto-scroll: ScrollArea ref was on wrapper not viewport, so chat
  never scrolled to show new messages/thinking indicators. Use bottom
  anchor div with scrollIntoView instead.
- Fix project switching: reset chat state (messages, loading, activity)
  when projectId changes, abort in-flight requests, and guard against
  stale responses overwriting current project data.
- Fix activity indicator: always show during loading (default to
  "Thinking..."), set initial activity to "Thinking..." on send.
- Fix readonly input: reset isLoading in loadHistory catch block so
  textarea doesn't stay disabled after failed history loads.
- Add structured logging throughout: [useChat:*], [claude-stream:*],
  [chat-api:*] for debugging streaming and project switch issues.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/app/api/projects/[id]/chat/route.ts b/src/app/api/projects/[id]/chat/route.ts
@@ -12,12 +12,17 @@ import { startClaude, isSessionActive, subscribe, StreamEvent } from "@/lib/clau
 
 export const dynamic = "force-dynamic";
 
+function log(prefix: string, ...args: unknown[]) {
+  console.log(`[chat-api:${prefix}]`, ...args);
+}
+
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> }
 ) {
   const { id } = await params;
   const reconnect = request.nextUrl.searchParams.get("reconnect");
+  log("GET", `id=${id} reconnect=${reconnect}`);
 
   // Check for active session and stream events
   if (reconnect === "1") {
@@ -73,6 +78,7 @@ export async function POST(
 
   const body = await request.json();
   const userMessage = body.message as string;
+  log("POST", `id=${id} message="${userMessage?.slice(0, 80)}"`);
 
   if (!userMessage?.trim()) {
     return NextResponse.json({ error: "Message required" }, { status: 400 });
diff --git a/src/components/chat/chat-panel.tsx b/src/components/chat/chat-panel.tsx
@@ -32,13 +32,11 @@ export function ChatPanel({
   onUndo,
   onShowPreview,
 }: ChatPanelProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    // Auto-scroll to bottom on new messages
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
+    // Auto-scroll to bottom on new messages or activity changes
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, activity]);
 
   return (
@@ -56,7 +54,7 @@ export function ChatPanel({
           </Button>
         </div>
       )}
-      <ScrollArea className="min-h-0 flex-1 p-4" ref={scrollRef}>
+      <ScrollArea className="min-h-0 flex-1 p-4">
         <div className="mx-auto max-w-2xl space-y-4">
           {messages.length === 0 && (
             <div className="flex flex-col items-center justify-center py-20 text-center">
@@ -71,7 +69,8 @@ export function ChatPanel({
           {messages.map((msg, i) => (
             <MessageBubble key={i} message={msg} />
           ))}
-          {isLoading && activity && <ActivityIndicator activity={activity} />}
+          {isLoading && <ActivityIndicator activity={activity || "Thinking..."} />}
+          <div ref={bottomRef} />
         </div>
       </ScrollArea>
       <div className="border-t p-4">
diff --git a/src/hooks/use-chat.ts b/src/hooks/use-chat.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 
 export interface ChatMessage {
   role: "user" | "assistant";
@@ -19,19 +19,39 @@ interface UseChatOptions {
   onFileChange?: (fileName: string) => void;
 }
 
+function log(prefix: string, ...args: unknown[]) {
+  console.log(`[useChat:${prefix}]`, ...args);
+}
+
 export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [activity, setActivity] = useState<string>("");
   const abortRef = useRef<AbortController | null>(null);
+  const projectIdRef = useRef(projectId);
+
+  // Reset state when projectId changes to prevent showing stale data
+  useEffect(() => {
+    if (projectIdRef.current !== projectId) {
+      log("reset", `project changed: ${projectIdRef.current} -> ${projectId}`);
+      projectIdRef.current = projectId;
+      abortRef.current?.abort();
+      abortRef.current = null;
+      setMessages([]);
+      setIsLoading(false);
+      setActivity("");
+    }
+  }, [projectId]);
 
   const processSSEStream = useCallback(
-    async (reader: ReadableStreamDefaultReader<Uint8Array>) => {
+    async (reader: ReadableStreamDefaultReader<Uint8Array>, forProjectId: string) => {
       const decoder = new TextDecoder();
       let buffer = "";
       let assistantText = "";
       let gotTitle = false;
 
+      log("stream", `starting SSE processing for project=${forProjectId}`);
+
       // Add placeholder assistant message
       setMessages((prev) => [
         ...prev,
@@ -40,7 +60,17 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
 
       while (true) {
         const { done, value } = await reader.read();
-        if (done) break;
+        if (done) {
+          log("stream", "reader done");
+          break;
+        }
+
+        // Guard against stale project
+        if (projectIdRef.current !== forProjectId) {
+          log("stream", `stale stream for ${forProjectId}, current is ${projectIdRef.current} — dropping`);
+          reader.cancel();
+          return;
+        }
 
         buffer += decoder.decode(value as BufferSource, { stream: true });
         const lines = buffer.split("\n");
@@ -50,6 +80,7 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
           if (line.startsWith("data: ")) {
             try {
               const event = JSON.parse(line.slice(6));
+              log("event", event.type, event.type === "text" ? `(${(event.content as string).length} chars)` : event.content || "");
 
               switch (event.type) {
                 case "text": {
@@ -77,13 +108,16 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
                   onTitle?.(event.content);
                   break;
                 case "activity":
+                  log("activity", event.content);
                   setActivity(event.content);
                   break;
                 case "file-change":
+                  log("file-change", event.content, event.detail);
                   onFileChange?.(event.content);
                   setActivity(`Updated ${event.content}`);
                   break;
                 case "error":
+                  log("error", event.content);
                   assistantText += `\n\nError: ${event.content}`;
                   setMessages((prev) => {
                     const updated = [...prev];
@@ -95,10 +129,11 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
                   });
                   break;
                 case "done":
+                  log("done", `total text length: ${assistantText.length}`);
                   break;
               }
-            } catch {
-              // ignore parse errors
+            } catch (e) {
+              log("parse-error", line.slice(0, 200), e);
             }
           }
         }
@@ -108,51 +143,72 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
   );
 
   const loadHistory = useCallback(async () => {
+    const loadForId = projectId;
+    log("loadHistory", `starting for project=${loadForId}`);
+
     try {
       // First check for active session to reconnect to
-      const reconnectRes = await fetch(`/api/projects/${projectId}/chat?reconnect=1`);
+      const reconnectRes = await fetch(`/api/projects/${loadForId}/chat?reconnect=1`);
+
+      if (projectIdRef.current !== loadForId) {
+        log("loadHistory", `stale after reconnect check — aborting`);
+        return;
+      }
 
       if (reconnectRes.headers.get("Content-Type")?.includes("text/event-stream")) {
+        log("loadHistory", "active session found, reconnecting...");
         // Active session found — load saved history first, then stream remaining
-        const historyRes = await fetch(`/api/projects/${projectId}/chat`);
-        if (historyRes.ok) {
+        const historyRes = await fetch(`/api/projects/${loadForId}/chat`);
+        if (historyRes.ok && projectIdRef.current === loadForId) {
           const data = await historyRes.json();
+          log("loadHistory", `loaded ${data.length} history messages before reconnect`);
           setMessages(data);
         }
 
         setIsLoading(true);
         setActivity("Reconnecting...");
 
         const reader = reconnectRes.body!.getReader();
-        await processSSEStream(reader);
+        await processSSEStream(reader, loadForId);
+
+        if (projectIdRef.current !== loadForId) return;
 
         setIsLoading(false);
         setActivity("");
 
         // Reload history to get the final saved state
-        const finalRes = await fetch(`/api/projects/${projectId}/chat`);
-        if (finalRes.ok) {
+        const finalRes = await fetch(`/api/projects/${loadForId}/chat`);
+        if (finalRes.ok && projectIdRef.current === loadForId) {
           const data = await finalRes.json();
+          log("loadHistory", `reloaded ${data.length} messages after reconnect`);
           setMessages(data);
         }
         return;
       }
 
       // No active session — just load history normally
-      const res = await fetch(`/api/projects/${projectId}/chat`);
-      if (res.ok) {
+      const res = await fetch(`/api/projects/${loadForId}/chat`);
+      if (res.ok && projectIdRef.current === loadForId) {
         const data = await res.json();
+        log("loadHistory", `loaded ${data.length} history messages`);
         setMessages(data);
+      } else if (projectIdRef.current !== loadForId) {
+        log("loadHistory", `stale after history fetch — dropping`);
       }
-    } catch {
-      // ignore
+    } catch (e) {
+      log("loadHistory", "error:", e);
+      setIsLoading(false);
+      setActivity("");
     }
   }, [projectId, processSSEStream]);
 
   const sendMessage = useCallback(
     async (content: string) => {
       if (!content.trim() || isLoading) return;
 
+      const sendForId = projectId;
+      log("send", `message to project=${sendForId}: "${content.slice(0, 50)}..."`);
+
       const userMsg: ChatMessage = {
         role: "user",
         content,
@@ -161,11 +217,11 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
 
       setMessages((prev) => [...prev, userMsg]);
       setIsLoading(true);
-      setActivity("");
+      setActivity("Thinking...");
 
       try {
         abortRef.current = new AbortController();
-        const res = await fetch(`/api/projects/${projectId}/chat`, {
+        const res = await fetch(`/api/projects/${sendForId}/chat`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ message: content }),
@@ -176,10 +232,12 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
           throw new Error(`HTTP ${res.status}`);
         }
 
+        log("send", `POST response ok, reading stream...`);
         const reader = res.body!.getReader();
-        await processSSEStream(reader);
+        await processSSEStream(reader, sendForId);
       } catch (err) {
         if ((err as Error).name !== "AbortError") {
+          log("send", "error:", err);
           setMessages((prev) => {
             const updated = [...prev];
             const last = updated[updated.length - 1];
@@ -202,6 +260,7 @@ export function useChat({ projectId, onTitle, onFileChange }: UseChatOptions) {
   );
 
   const stop = useCallback(() => {
+    log("stop", "aborting");
     abortRef.current?.abort();
   }, []);
 
diff --git a/src/lib/claude-stream.ts b/src/lib/claude-stream.ts
@@ -2,6 +2,10 @@ import { spawn, ChildProcess } from "child_process";
 import path from "path";
 import { SYSTEM_PROMPT } from "./constants";
 
+function log(prefix: string, ...args: unknown[]) {
+  console.log(`[claude-stream:${prefix}]`, ...args);
+}
+
 export interface StreamEvent {
   type: "text" | "activity" | "file-change" | "title" | "done" | "error";
   content: string;
@@ -114,6 +118,7 @@ export function startClaude(
   let seenTitle = false;
 
   function emit(event: StreamEvent) {
+    log("emit", `[${projectId}] ${event.type}: ${event.content?.slice(0, 100)}`);
     session.eventBuffer.push(event);
     for (const sub of session.subscribers) {
       sub(event);
@@ -127,10 +132,12 @@ export function startClaude(
     try {
       data = JSON.parse(line);
     } catch {
+      log("parse", `[${projectId}] failed to parse: ${line.slice(0, 200)}`);
       return;
     }
 
     const type = data.type as string;
+    log("json", `[${projectId}] type=${type}`);
 
     if (type === "assistant") {
       const message = data.message as Record<string, unknown> | undefined;
@@ -205,12 +212,16 @@ export function startClaude(
 
   claudeProcess.stderr!.on("data", (chunk: Buffer) => {
     const text = chunk.toString();
+    log("stderr", `[${projectId}] ${text.slice(0, 500)}`);
     if (text.includes("Error") || text.includes("error")) {
       emit({ type: "error", content: text.trim() });
     }
   });
 
+  log("start", `[${projectId}] Claude process started, pid=${claudeProcess.pid}`);
+
   claudeProcess.on("close", (code) => {
+    log("close", `[${projectId}] Claude process exited code=${code}`);
     if (buffer.trim()) {
       processJsonLine(buffer);
     }
