@arcote.tech/arc-chat 0.7.9 → 0.7.11

package/src/react/chat-component.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useEffect, type ComponentType, createElement, type ReactNode } from "react";
-import type { ChatStreamEvent, ArcToolAny } from "@arcote.tech/arc-ai";
+import type { AssistantContentBlock, ChatStreamEvent, ArcToolAny } from "@arcote.tech/arc-ai";
 import type {
   ChatInputTextareaSlotProps,
   ChatLabels,
@@ -55,6 +55,11 @@ type TimelineItem =
       /** Legacy compat — true gdy status !== complete. Renderowane przez stary ChatToolLog. */
       calling: boolean;
       error?: string;
+    }
+  | {
+      type: "interrupted";
+      id: string;
+      messageId: string;
     };
 
 export function createChatComponent(
@@ -77,13 +82,9 @@ export function createChatComponent(
     const chatLabels = useChatLabels();
     const [timeline, setTimeline] = useState<TimelineItem[]>([]);
     const [isStreaming, setIsStreaming] = useState(false);
-    const sessionIdRef = useRef<string | null>(null);
-    const currentAssistantIdRef = useRef<string | null>(null);
-    const resumedSessionRef = useRef<string | null>(null);
-    /** Last seq applied per session — dedup dla replay buffer + double subscribe. */
-    const lastSeqBySessionRef = useRef<Map<string, number>>(new Map());
-    /** afterSeq dla SSE resume — read once z partialLastSeq w DB rebuild. */
-    const resumeAfterSeqRef = useRef<number>(0);
+    /** Set messageIds dla których SSE zwrócił 410 (server restart mid-stream).
+     *  Renderowane jako TimelineItem "interrupted" z retry button. */
+    const [interruptedIds, setInterruptedIds] = useState<Set<string>>(() => new Set());
 
     const queries = scope.useQuery();
     const mutations = scope.useMutation();
@@ -106,19 +107,35 @@ export function createChatComponent(
         historyData
           ?.map(
             (m: any) =>
-              `${m._id}:${m.isGenerating ? 1 : 0}:${m.blocks ? "f" : "e"}:${m.content?.length ?? 0}:${m.partialLastSeq ?? 0}`,
+              `${m._id}:${m.isGenerating ? 1 : 0}:${m.blocks ? "f" : "e"}:${m.content?.length ?? 0}`,
           )
           .join("|") ?? "",
       [historyData],
     );
 
+    /** ID assistant rowa, którego currently otwarty stream subskrybujemy.
+     *  Wyciąga się z DB historii — jest max jeden taki w danej chwili
+     *  (listener sekwencyjny). Null gdy nie ma czego streamować. */
+    const activeGeneratingMessageId = useMemo<string | null>(() => {
+      if (!historyData) return null;
+      for (const msg of historyData) {
+        if (
+          msg.role === "assistant" &&
+          msg.isGenerating &&
+          !interruptedIds.has(msg._id)
+        ) {
+          return msg._id;
+        }
+      }
+      return null;
+    }, [historyData, interruptedIds]);
+
     // ─── Restore timeline from DB history ───────────────────────
     // Podczas streamingu SSE jest źródłem prawdy dla aktualnie generowanej
-    // wiadomości — rebuild byłby kolizją. Snapshoty do `partialBlocks` służą
-    // wyłącznie do hydratacji po reload (gdy `isStreaming` jest jeszcze
-    // `false` na mount). Po `done` SSE klient ustawia `isStreaming=false` i
-    // ten useEffect refireuje (dep `isStreaming`) — zaaplikuje final blocks
-    // z `assistantTurnCompleted`.
+    // wiadomości — rebuild byłby kolizją. Po `done` klient ustawia
+    // `isStreaming=false` i ten useEffect refireuje — zaaplikuje final
+    // blocks z `assistantTurnCompleted` projection (jedyny moment gdy treść
+    // assistant'a ląduje w DB).
     useEffect(() => {
       if (isStreaming) return;
       if (!historyData || historyLen === 0) return;
@@ -133,7 +150,6 @@ export function createChatComponent(
       }
 
       const items: TimelineItem[] = [];
-      let hasActiveGeneration = false;
 
       for (const msg of historyData) {
         // System messages are developer-injected priming prompts. They go
@@ -152,19 +168,8 @@ export function createChatComponent(
         }
 
         if (msg.role === "assistant") {
-          // Helper — renderuje block array jako TimelineItem-y do `items`.
-          // Tool block id = block.id (toolCallId) — JEDEN klucz wszędzie,
-          // bez `${msg._id}_b${idx}` mismatchu z SSE path'a (tc_${id}).
           const renderBlocks = (
-            blocks: Array<
-              | { type: "text"; text: string }
-              | {
-                  type: "tool_call";
-                  id: string;
-                  name: string;
-                  arguments: Record<string, unknown>;
-                }
-            >,
+            blocks: AssistantContentBlock[],
             options: { isStreaming?: boolean } = {},
           ) => {
             let textCount = 0;
@@ -183,11 +188,8 @@ export function createChatComponent(
               } else {
                 const result = resultMap.get(block.id);
                 const hasResult = resultIds.has(block.id);
-                // Brak result w DB = tool wciąż w toku:
-                //   - server tool podczas exec → "executing"
-                //   - interactive tool czekający na user response → "pending"
-                //   (z perspektywy klienta różnica jest tylko semantyczna,
-                //   `calling: true` w obu przypadkach utrzymuje loader/input override)
+                // Brak result w DB = tool wciąż w toku (server: executing,
+                // interactive: pending). `calling: true` w obu utrzymuje loader/input override.
                 const status: ToolStatus = result?.isError
                   ? "error"
                   : hasResult
@@ -197,7 +199,7 @@ export function createChatComponent(
                       : "pending";
                 items.push({
                   type: "tool",
-                  id: block.id, // = toolCallId
+                  id: block.id,
                   toolCallId: block.id,
                   toolName: block.name,
                   params: block.arguments,
@@ -210,23 +212,21 @@ export function createChatComponent(
             }
           };
 
-          // Open turn (in progress). The row exists with `isGenerating: true`.
-          // SQLite zwraca booleany jako 0/1 — używamy truthy check zamiast
-          // `=== true` żeby zaakceptować zarówno true jak i 1.
+          // Open turn (in progress). The row exists w DB z `isGenerating: true`
+          // ale BEZ `blocks` — final treść ląduje w DB dopiero po
+          // `assistantTurnCompleted`. Live wartość jest in-memory w stream-registry
+          // i zostanie pobrana przez SSE `init` event.
           if (msg.isGenerating) {
-            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
-            hasActiveGeneration = true;
-            currentAssistantIdRef.current = msg._id;
-            resumeAfterSeqRef.current = msg.partialLastSeq ?? 0;
-            const partial =
-              (tryParseJson(msg.partialBlocks ?? "") as Array<any>) ?? [];
-            if (partial.length > 0) {
-              renderBlocks(partial, { isStreaming: true });
+            if (interruptedIds.has(msg._id)) {
+              items.push({
+                type: "interrupted",
+                id: `${msg._id}_interrupted`,
+                messageId: msg._id,
+              });
             } else {
-              // brak partial — pusty streaming bubble jako placeholder
               items.push({
                 type: "message",
-                id: msg._id,
+                id: `${msg._id}_t0`,
                 role: "assistant",
                 content: "",
                 isStreaming: true,
@@ -237,82 +237,83 @@ export function createChatComponent(
 
           // Closed turn — render z final blocks.
           const blocks =
-            (tryParseJson(msg.blocks ?? "") as Array<any>) ?? [];
+            (tryParseJson(msg.blocks ?? "") as AssistantContentBlock[]) ?? [];
           renderBlocks(blocks);
         }
       }
 
       setTimeline(items);
-      if (!isStreaming && hasActiveGeneration) {
-        setIsStreaming(true);
-      }
-      // Dep TYLKO `historySig` — bez `isStreaming`. Gdyby `isStreaming` było
-      // w deps: po `done` SSE flips isStreaming=false → useEffect refires →
+      // Dep TYLKO `historySig` + `interruptedIds`. Bez `isStreaming` — gdyby
+      // było w deps: po `done` SSE flips isStreaming=false → useEffect refires →
       // może zobaczyć STAREJ `isGenerating:1` row (DB jeszcze nie zaprojektowała
       // assistantTurnCompleted) → reset do streaming mode → caret nigdy nie znika.
-      // Rebuild fires tylko gdy faktycznie zmienia się stan w DB.
-    }, [historySig]);
-
-    // ─── SSE stream consumer ────────────────────────────────────
-    // Reusable: handles fetch + read loop + processEvent dispatch.
-    // Caller is responsible for setting isStreaming/sessionIdRef before
-    // and clearing them after (different lifecycle in send vs respond vs resume).
-    const consumeStream = useCallback(
-      async (sessionId: string, afterSeq = 0): Promise<void> => {
-        const query = afterSeq > 0 ? `?afterSeq=${afterSeq}` : "";
-        const streamUrl = `/route/chat/${chatName}/stream/${sessionId}${query}`;
-        const response = await fetch(streamUrl, {
-          credentials: "include",
-          headers: { Accept: "text/event-stream" },
-        });
-        if (!response.ok) throw new Error(`Stream failed: ${response.status}`);
-
-        const reader = response.body!.getReader();
-        const decoder = new TextDecoder();
-        let partialLine = "";
-
-        while (true) {
-          const { value, done } = await reader.read();
-          if (done) break;
-          const text = partialLine + decoder.decode(value, { stream: true });
-          const lines = text.split("\n");
-          partialLine = lines.pop() ?? "";
-          for (const line of lines) {
-            if (line.startsWith("data: ")) {
-              try {
-                const event = JSON.parse(line.slice(6)) as ChatStreamEvent;
-                await processEventRef.current?.(event);
-                // Yield między eventami w tym samym TCP chunku — gdy server
-                // wypycha kilka eventów naraz (np. replay buffer), bez tego
-                // wszystkie setTimeline batchują się w jeden render.
-                await new Promise<void>((r) => setTimeout(r, 0));
-              } catch {}
-            }
-          }
-        }
-        if (partialLine.startsWith("data: ")) {
-          try {
-            const event = JSON.parse(partialLine.slice(6)) as ChatStreamEvent;
-            await processEventRef.current?.(event);
-          } catch {}
-        }
-      },
-      [],
-    );
+    }, [historySig, interruptedIds]);
 
     // ─── SSE event processing ───────────────────────────────────
-    const processEventRef = useRef<((event: ChatStreamEvent) => Promise<void>) | null>(null);
+    const processEventRef = useRef<((event: ChatStreamEvent) => void) | null>(null);
     const processEvent = useCallback(
-      async (event: ChatStreamEvent) => {
-        // Seq dedup — replay buffer może wysłać te same eventy ponownie po
-        // reconnect. Klient odrzuca seq <= lastSeq.
-        if (event.seq != null && event.sessionId) {
-          const lastSeq = lastSeqBySessionRef.current.get(event.sessionId) ?? 0;
-          if (event.seq <= lastSeq) return;
-          lastSeqBySessionRef.current.set(event.sessionId, event.seq);
-        }
-
+      (event: ChatStreamEvent) => {
         switch (event.type) {
+          case "init": {
+            // Pierwszy event po `subscribe(messageId)`. Niesie snapshot
+            // in-memory `currentBlocks` — może być pusty (świeży stream) albo
+            // wypełniony (graceful reconnect mid-stream). Hydratuje bubble
+            // assistant'a.
+            if (!event.messageId) break;
+            const messageId = event.messageId;
+            const blocks = event.currentBlocks ?? [];
+            setTimeline((prev) => {
+              // Wytnij placeholdery i istniejące bubble assistantów dla tego
+              // messageId (z timeline rebuild) — zastąpimy świeżą wersją.
+              const cleaned = prev.filter(
+                (it) =>
+                  !(
+                    it.type === "message" &&
+                    typeof it.id === "string" &&
+                    it.id.startsWith(`${messageId}_t`)
+                  ) &&
+                  !(it.type === "tool" && blocks.some((b) => b.type === "tool_call" && b.id === it.id)),
+              );
+              let textCount = 0;
+              const newItems: TimelineItem[] = [];
+              for (const block of blocks) {
+                if (block.type === "text") {
+                  newItems.push({
+                    type: "message",
+                    id: `${messageId}_t${textCount}`,
+                    role: "assistant",
+                    content: block.text,
+                    isStreaming: true,
+                  });
+                  textCount++;
+                } else {
+                  newItems.push({
+                    type: "tool",
+                    id: block.id,
+                    toolCallId: block.id,
+                    toolName: block.name,
+                    params: block.arguments,
+                    status: "executing",
+                    calling: true,
+                  });
+                }
+              }
+              // Jeśli init przyniósł 0 text blocks → wciąż dodaj pusty
+              // streaming placeholder, żeby text_delta miał gdzie dolepić.
+              if (!newItems.some((it) => it.type === "message" && it.role === "assistant")) {
+                newItems.push({
+                  type: "message",
+                  id: `${messageId}_t0`,
+                  role: "assistant",
+                  content: "",
+                  isStreaming: true,
+                });
+              }
+              return [...cleaned, ...newItems];
+            });
+            break;
+          }
+
           case "text_delta":
             if (!event.textDelta) break;
             setTimeline((prev) => {
@@ -333,7 +334,6 @@ export function createChatComponent(
               const newId = event.messageId
                 ? `${event.messageId}_streaming_${prev.length}`
                 : `assistant_${Date.now()}`;
-              currentAssistantIdRef.current = newId;
               return [
                 ...prev,
                 {
@@ -349,13 +349,8 @@ export function createChatComponent(
 
           case "tool_call_pending":
             // AI właśnie zaczyna tool call. Dla SERVER tools pokazujemy loader
-            // "Przygotowuje: {name}…" od razu — ViewComponent dostaje `params: {}`
-            // ale to OK bo server tool nie używa params do init'a UI.
-            //
-            // Dla INTERACTIVE tools NIE pushujemy do timeline tutaj — ich
-            // ViewComponent (np. AskQuestionsView) używa `params.questions`
-            // od mount-time do registerInputOverride, więc musi dostać pełne
-            // args. Czekamy na `interactive_tool_request` które niesie pełne args.
+            // "Przygotowuje: {name}…" od razu. Dla INTERACTIVE tools czekamy
+            // na `interactive_tool_request` z pełnymi args.
             if (event.toolCallId) {
               const toolDef = event.toolCallName
                 ? toolsMap.get(event.toolCallName)
@@ -381,20 +376,17 @@ export function createChatComponent(
                 });
                 return next;
               });
-              currentAssistantIdRef.current = null;
             }
             break;
 
           case "tool_call_arguments_delta":
-            // Args lecą znak po znaku — UI zwykle nie potrzebuje tej granularności.
-            // Pomijamy update'y żeby nie re-renderować bez powodu.
+            // Args lecą znak po znaku — UI nie potrzebuje tej granularności.
             break;
 
           case "tool_call_arguments_complete":
             // Pełne args dostępne. Trzy przypadki:
-            //   1. Server tool już jest w timeline (od tool_call_pending) → update params/status.
-            //   2. Interactive tool jeszcze nie jest w timeline (skipnięty w pending) → ADD tutaj
-            //      żeby zachować kolejność emisji przez AI (np. [tool, text]).
+            //   1. Server tool już jest w timeline (od tool_call_pending) → update.
+            //   2. Interactive tool jeszcze nie jest w timeline → ADD tutaj.
             //   3. Tool już dodany przez interactive_tool_request → no-op.
             if (event.toolCallId) {
               setTimeline((prev) => {
@@ -415,8 +407,6 @@ export function createChatComponent(
                       : item,
                   );
                 }
-                // Brak w timeline → interactive tool, dodaj teraz w odpowiednim
-                // miejscu (po finalizacji ewentualnej trwającej streaming bubble).
                 const next = prev.map((item) =>
                   item.type === "message" && item.isStreaming
                     ? { ...item, isStreaming: false }
@@ -433,7 +423,6 @@ export function createChatComponent(
                 });
                 return next;
               });
-              currentAssistantIdRef.current = null;
             }
             break;
 
@@ -471,9 +460,6 @@ export function createChatComponent(
                 for (const tc of event.toolCalls!) {
                   const existing = byId.get(tc.id);
                   if (existing) {
-                    // Tool już istnieje (dodany przez tool_call_arguments_complete).
-                    // Upewnij się że toolName + params są aktualne — fallback
-                    // gdyby serwer wcześniej wysłał je puste.
                     const idx = next.findIndex(
                       (it) => it.type === "tool" && (it as any).id === tc.id,
                     );
@@ -498,11 +484,13 @@ export function createChatComponent(
                 }
                 return next;
               });
-              currentAssistantIdRef.current = null;
             }
             break;
 
           case "done":
+            // Stream zakończył turn. setIsStreaming(false) odpali timeline
+            // rebuild z DB — final blocks z `assistantTurnCompleted` projection
+            // zastąpią streaming bubble.
             setTimeline((prev) =>
               prev.map((item) =>
                 item.type === "message" && item.isStreaming
@@ -511,7 +499,6 @@ export function createChatComponent(
               ),
             );
             setIsStreaming(false);
-            currentAssistantIdRef.current = null;
             break;
 
           case "error":
@@ -544,80 +531,102 @@ export function createChatComponent(
               ];
             });
             setIsStreaming(false);
-            currentAssistantIdRef.current = null;
             break;
         }
       },
       [chatLabels],
     );
-
-    // Keep ref in sync so consumeStream (stable callback) can call latest version
     processEventRef.current = processEvent;
 
-    // ─── Resume/auto-open SSE dla isGenerating rowsów ────────────
-    // Każdy `isGenerating: true` row z `sessionId` w DB triggers SSE subscribe.
-    // Obejmuje: (a) reload mid-stream, (b) welcome-message-style auto-trigger
-    // gdzie onEnter listener tworzy assistant turn bez user message.
-    // `consumeStream` z `afterSeq` (zhydratowane z `partialLastSeq`) sprawia
-    // że replay buffer skipuje już zaaplikowane chunki.
+    // ─── Auto-subscribe SSE per active assistant messageId ──────
+    // Driven przez DB history: za każdym razem gdy w DB pojawia się
+    // assistant row z `isGenerating=true`, otwieramy do niego SSE.
+    // Wszystkie scenariusze (send, respond, retry, page reload mid-stream)
+    // przechodzą przez ten sam mechanizm — handleSend/respond/retry tylko
+    // wywołują mutację, ten effect załapie nowy generating row z DB query
+    // update.
     useEffect(() => {
-      if (!scopeId) return;
-      const sid = sessionIdRef.current;
-      if (!sid) return;
-      if (resumedSessionRef.current === sid) return;
-      resumedSessionRef.current = sid;
-      const afterSeq = resumeAfterSeqRef.current;
-      // Inicjalizujemy lastSeq dla tej sesji od `afterSeq` żeby uniknąć
-      // ponownej aplikacji już-zhydratowanych chunków (gdyby replay pominął).
-      lastSeqBySessionRef.current.set(sid, afterSeq);
+      if (!activeGeneratingMessageId) return;
+      const messageId = activeGeneratingMessageId;
+      const ctrl = new AbortController();
+      let cancelled = false;
       setIsStreaming(true);
+
       (async () => {
         try {
-          await consumeStream(sid, afterSeq);
-        } catch {
-          // Stream może już skończony / GC'd
-        } finally {
+          const res = await fetch(
+            `/route/chat/${chatName}/stream/${messageId}`,
+            {
+              credentials: "include",
+              signal: ctrl.signal,
+              headers: { Accept: "text/event-stream" },
+            },
+          );
+          if (res.status === 410) {
+            // Stream nie istnieje — proces zrestartował się mid-stream
+            // (in-memory state utracony). Mark messageId jako interrupted,
+            // klient pokaże retry UI.
+            setInterruptedIds((prev) => new Set(prev).add(messageId));
+            setIsStreaming(false);
+            return;
+          }
+          if (!res.ok) throw new Error(`Stream failed: ${res.status}`);
+
+          const reader = res.body!.getReader();
+          const decoder = new TextDecoder();
+          let buf = "";
+          while (!cancelled) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buf += decoder.decode(value, { stream: true });
+            const lines = buf.split("\n");
+            buf = lines.pop() ?? "";
+            for (const line of lines) {
+              if (!line.startsWith("data: ")) continue;
+              try {
+                const event = JSON.parse(line.slice(6)) as ChatStreamEvent;
+                processEventRef.current?.(event);
+                // Yield between events in the same TCP chunk — bez tego
+                // React batchuje setTimeline w jeden render, streaming
+                // niewidoczny.
+                await new Promise<void>((r) => setTimeout(r, 0));
+              } catch {}
+            }
+          }
+        } catch (err) {
+          if ((err as any)?.name === "AbortError") return;
+          // Network glitch / SSE hang — treat as interrupted.
+          setInterruptedIds((prev) => new Set(prev).add(messageId));
           setIsStreaming(false);
-          sessionIdRef.current = null;
-          currentAssistantIdRef.current = null;
         }
       })();
-    }, [historySig, scopeId, consumeStream]);
+
+      return () => {
+        cancelled = true;
+        ctrl.abort();
+      };
+    }, [activeGeneratingMessageId]);
 
     // ─── Send message ───────────────────────────────────────────
     const handleSend = useCallback(
       async (content: string, options: SendMessageOptions) => {
         if (isStreaming || !scopeId) return;
-
         setIsStreaming(true);
-
         const userMsgId = `user_${Date.now()}`;
         setTimeline((prev) => [
           ...prev,
           { type: "message", id: userMsgId, role: "user", content },
         ]);
-
         try {
-          const sendResult = await messageMutations.sendMessage({
+          await messageMutations.sendMessage({
             scopeId,
             content,
             model: options.model,
           });
-
-          const { sessionId } = sendResult as { sessionId: string; messageId: string };
-          sessionIdRef.current = sessionId;
-          // Zapobiega dwukrotnemu konsumpowaniu SSE — resume effect zobaczy
-          // że ten sessionId już jest "resumed" i pominie.
-          resumedSessionRef.current = sessionId;
-          currentAssistantIdRef.current = null;
-
-          try {
-            await consumeStream(sessionId, 0);
-          } finally {
-            setIsStreaming(false);
-            sessionIdRef.current = null;
-            currentAssistantIdRef.current = null;
-          }
+          // Reszta dzieje się przez auto-subscribe effect powyżej: mutacja
+          // emit'uje `assistantTurnStarted` → DB query pushuje fresh assistant
+          // row do klienta → `activeGeneratingMessageId` ustawia się → effect
+          // otwiera SSE.
         } catch (err) {
           const errorMsg = err instanceof Error ? err.message : chatLabels.errorLabel;
           setTimeline((prev) => [
@@ -625,11 +634,33 @@ export function createChatComponent(
             { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `${chatLabels.errorLabel}: ${errorMsg}` },
           ]);
           setIsStreaming(false);
-          sessionIdRef.current = null;
-          currentAssistantIdRef.current = null;
         }
       },
-      [isStreaming, scopeId, messageMutations, processEvent, chatLabels],
+      [isStreaming, scopeId, messageMutations, chatLabels],
+    );
+
+    // ─── Retry interrupted generation ───────────────────────────
+    const handleRetry = useCallback(
+      async (messageId: string) => {
+        if (!scopeId) return;
+        try {
+          await messageMutations.retryGeneration({ messageId });
+          // Mutacja usuwa interrupted row + tworzy fresh assistant row →
+          // auto-subscribe effect załapie nowy generating row.
+          setInterruptedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(messageId);
+            return next;
+          });
+        } catch (err) {
+          const errorMsg = err instanceof Error ? err.message : chatLabels.errorLabel;
+          setTimeline((prev) => [
+            ...prev,
+            { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `${chatLabels.errorLabel}: ${errorMsg}` },
+          ]);
+        }
+      },
+      [scopeId, messageMutations, chatLabels],
     );
 
     // ─── Build messages for Chat DS (only user/assistant) ───────
@@ -666,8 +697,6 @@ export function createChatComponent(
       // Interactive tool
       const respond = async (result: unknown) => {
         if (!scopeId) return;
-
-        // Update timeline immediately
         setTimeline((prev) =>
           prev.map((t) =>
             t.type === "tool" && t.toolCallId === item.toolCallId
@@ -675,25 +704,15 @@ export function createChatComponent(
               : t,
           ),
         );
-
-        // Send response — returns new sessionId for SSE
-        const respondResult = await messageMutations.respondToTool({
-          scopeId,
-          toolCallId: item.toolCallId,
-          toolName: item.toolName,
-          result: JSON.stringify(result),
-        });
-
-        const { sessionId: newSessionId } = respondResult as { sessionId: string };
-        if (!newSessionId) return;
-
-        sessionIdRef.current = newSessionId;
-        resumedSessionRef.current = newSessionId; // skip auto-resume
-        setIsStreaming(true);
-        currentAssistantIdRef.current = null;
-
         try {
-          await consumeStream(newSessionId, 0);
+          await messageMutations.respondToTool({
+            scopeId,
+            toolCallId: item.toolCallId,
+            toolName: item.toolName,
+            result: JSON.stringify(result),
+          });
+          // Auto-subscribe effect załapie nowy assistant row (utworzony
+          // atomowo przez mutację respondToTool razem z userResponded event).
         } catch (err) {
           setTimeline((prev) => [
             ...prev,
@@ -704,10 +723,6 @@ export function createChatComponent(
               content: `${chatLabels.errorLabel}: ${err instanceof Error ? err.message : chatLabels.errorLabel}`,
             },
           ]);
-        } finally {
-          setIsStreaming(false);
-          sessionIdRef.current = null;
-          currentAssistantIdRef.current = null;
         }
       };
 
@@ -740,6 +755,26 @@ export function createChatComponent(
         timelineElements.push(
           createElement("div", { key: item.id }, renderToolItem(item)),
         );
+      } else if (item.type === "interrupted") {
+        timelineElements.push(
+          createElement(
+            "div",
+            {
+              key: item.id,
+              className: "flex items-center gap-2 text-sm text-muted-foreground",
+            },
+            createElement("span", null, chatLabels.interruptedLabel),
+            createElement(
+              "button",
+              {
+                type: "button",
+                className: "underline cursor-pointer",
+                onClick: () => handleRetry(item.messageId),
+              },
+              chatLabels.retryLabel,
+            ),
+          ),
+        );
       }
     }
 
@@ -748,6 +783,8 @@ export function createChatComponent(
       (item) => item.type === "tool" && item.calling && !toolsMap.get(item.toolName)?.isServerTool,
     );
 
+    void chatMessages;
+
     return createElement(
       ChatInputProvider,
       null,