@arcote.tech/arc-chat 0.7.20 → 0.7.22

package/src/react/chat-component.tsx

@@ -1,40 +1,51 @@
-import { useState, useCallback, useMemo, useRef, useEffect, type ComponentType, createElement, type ReactNode } from "react";
-import type { AssistantContentBlock, ChatStreamEvent, ArcToolAny } from "@arcote.tech/arc-ai";
+import {
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  type ComponentType,
+  createElement,
+  type ReactNode,
+} from "react";
+import type { ArcToolAny } from "@arcote.tech/arc-ai";
 import type {
   ChatInputTextareaSlotProps,
   ChatLabels,
-  ChatMessageData,
   SendMessageOptions,
 } from "@arcote.tech/arc-ds";
-import { Chat, ChatMessage, ChatInputProvider, ChatLabelsProvider, ChatToolLog, useChatLabels } from "@arcote.tech/arc-ds";
+import {
+  Chat,
+  ChatMessage,
+  ChatInputProvider,
+  ChatLabelsProvider,
+  ChatToolLog,
+  useChatLabels,
+} from "@arcote.tech/arc-ds";
 import { VoiceTextarea } from "@arcote.tech/arc-ai-voice";
-
-// ─── Debug / instrumentation ─────────────────────────────────────────────
-// Production-only chat hang: SSE `isStreaming` and DB `isGenerating` can
-// desync (separate channels, prod latency). We log when the reconcile
-// watchdog has to force-close a turn the DB already finished. Kept dependency-
-// free (no OTel import — this fragment is src-only and bundles into any app):
-// the host app can pipe these to its telemetry via `globalThis.__arcChatOnStuck`.
-function reportReconcileStuck(attrs: Record<string, unknown>): void {
-  // eslint-disable-next-line no-console
-  console.warn("[arc-chat][reconcile_stuck]", attrs);
-  try {
-    (globalThis as any).__arcChatOnStuck?.(attrs);
-  } catch {
-    /* reporter must never break the chat */
-  }
-}
-
-/** Verbose per-message timing, gated behind `globalThis.__ARC_CHAT_DEBUG`.
- *  Used to see the SSE-vs-DB channel skew (who arrives first, delta-t). */
-function chatDebug(...args: unknown[]): void {
-  if ((globalThis as any).__ARC_CHAT_DEBUG) {
-    const ts =
-      typeof performance !== "undefined" ? performance.now().toFixed(0) : "";
-    // eslint-disable-next-line no-console
-    console.debug(`[arc-chat +${ts}ms]`, ...args);
-  }
-}
+import {
+  deriveTimeline,
+  isPendingSendSettled,
+  type PendingSend,
+  type TimelineItem,
+} from "./derive-timeline";
+import { useAssistantOverlays } from "./use-assistant-overlays";
+
+// ─── Architektura ────────────────────────────────────────────────
+//
+// Timeline jest CZYSTĄ FUNKCJĄ (deriveTimeline) dwóch źródeł:
+//   - DB przez liveQuery `getByScope` — źródło prawdy o strukturze
+//     (wiadomości, finalne blocks, isGenerating/interrupted/error,
+//     tool_results),
+//   - overlayów SSE (useAssistantOverlays) — ulotny in-progress stan
+//     generujących rzędów, budowany shared reducerem.
+// Plus lokalny optimistic state (pendingSends / pendingToolResults /
+// localErrors).
+//
+// NIE pisz do timeline'u imperatywnie. Każdy "merge" dwóch kanałów przez
+// mutowalny stan + flagę trybu kończył się tu produkcyjnymi race'ami
+// (watchdogi, backstopy, nonce — patrz git log). Derywacja liczy się
+// zawsze od najnowszego stanu obu źródeł, więc kolejność dostarczenia
+// (SSE `done` vs flip `isGenerating` w DB) jest bez znaczenia.
 
 interface ChatComponentConfig {
   chatName: string;
@@ -67,28 +78,6 @@ interface ChatComponentConfig {
   footer?: ReactNode;
 }
 
-type ToolStatus = "pending" | "executing" | "complete" | "error";
-
-type TimelineItem =
-  | { type: "message"; id: string; role: "user" | "assistant"; content: string; isStreaming?: boolean }
-  | {
-      type: "tool";
-      id: string; // = toolCallId, stabilne pomiędzy SSE i DB rebuild
-      toolCallId: string;
-      toolName: string;
-      params: Record<string, unknown>;
-      result?: unknown;
-      status: ToolStatus;
-      /** Legacy compat — true gdy status !== complete. Renderowane przez stary ChatToolLog. */
-      calling: boolean;
-      error?: string;
-    }
-  | {
-      type: "interrupted";
-      id: string;
-      messageId: string;
-    };
-
 export function createChatComponent(
   config: ChatComponentConfig,
 ): ComponentType<{ scope: any; identifyBy: string }> {
@@ -104,36 +93,29 @@ export function createChatComponent(
     footer,
   } = config;
   const toolsMap = new Map(tools.map((t) => [t.name, t]));
-
-  function ChatComponentInner({ scope, identifyBy }: { scope: any; identifyBy: string }) {
+  const isServerTool = (toolName: string) =>
+    toolsMap.get(toolName)?.isServerTool === true;
+
+  function ChatComponentInner({
+    scope,
+    identifyBy,
+  }: {
+    scope: any;
+    identifyBy: string;
+  }) {
     const chatLabels = useChatLabels();
-    const [timeline, setTimeline] = useState<TimelineItem[]>([]);
-    const [isStreaming, setIsStreaming] = useState(false);
-    /** 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());
-    /** Bumped by the reconcile watchdog to FORCE a timeline rebuild even when
-     *  `historySig` already changed (during streaming) and won't change again.
-     *  See the watchdog effect below. */
-    const [reconcileNonce, setReconcileNonce] = useState(0);
-    /** Bumped by the visibility / heartbeat handlers to force the SSE useEffect
-     *  to re-fire (abort the dead reader and re-fetch with the same
-     *  `messageId`). Backend's `FINALIZE_GRACE_MS` (5 s) + `init` snapshot
-     *  recovers the in-progress state; 410 → existing retry/interrupted path. */
-    const [streamReopenNonce, setStreamReopenNonce] = useState(0);
-    /** AbortController of the currently-open SSE stream, exposed via ref so the
-     *  watchdog can tear it down when the DB says the turn is already done. */
-    const sseCtrlRef = useRef<AbortController | null>(null);
-    /** Last SSE event type seen (for stuck telemetry — was `done` ever sent?). */
-    const lastSseEventRef = useRef<string | null>(null);
-    /** Timestamp (performance.now()) of the last SSE byte received — set on
-     *  every `reader.read()` resolve (data + keepalive ping). Drives the
-     *  client-side heartbeat watchdog: if nothing arrived for >2× the server
-     *  keepalive interval, treat the socket as dead and reconnect. */
-    const lastSseByteAtRef = useRef<number | null>(null);
-    /** When the (isStreaming=true ∧ DB-idle) divergence first appeared — for
-     *  the debounce window and the `waitedMs` stuck attribute. */
-    const stuckSinceRef = useRef<number | null>(null);
+
+    // ─── Lokalny optimistic state ─────────────────────────────────
+    const [pendingSends, setPendingSends] = useState<PendingSend[]>([]);
+    const [pendingToolResults, setPendingToolResults] = useState<
+      Map<string, unknown>
+    >(() => new Map());
+    const [localErrors, setLocalErrors] = useState<
+      Array<{ id: string; content: string }>
+    >([]);
+    /** Wymusza re-derywację co interwał gdy busy — klauzule busy mają
+     *  staleness cutoff, który musi móc wygasnąć bez zmiany danych. */
+    const [busyTick, setBusyTick] = useState(0);
 
     const queries = scope.useQuery();
     const mutations = scope.useMutation();
@@ -141,740 +123,95 @@ export function createChatComponent(
     const messageMutations = mutations[messageElementName];
 
     const scopeId = identifyBy;
-    const historyResult = scopeId && messageQueries?.getByScope
-      ? messageQueries.getByScope({ scopeId })
-      : [undefined, false];
+    const historyResult =
+      scopeId && messageQueries?.getByScope
+        ? messageQueries.getByScope({ scopeId })
+        : [undefined, false];
     const historyData = historyResult?.[0];
-    const historyLen = historyData?.length ?? 0;
 
-    // Stable signature of all messages — `[id]:[isGenerating]:[hasBlocks]:[contentLen]`.
-    // Changes on insert AND on partial update (e.g. ctx.modify flipping
-    // isGenerating to false), so the timeline-rebuild effect refires for
-    // both cases. `historyLen` alone misses updates that don't change count.
-    const historySig = useMemo(
+    // ─── Overlaye SSE per generujący row ──────────────────────────
+    const generatingIds = useMemo<string[]>(
       () =>
-        historyData
-          ?.map(
+        (historyData ?? [])
+          .filter(
             (m: any) =>
-              `${m._id}:${m.isGenerating ? 1 : 0}:${m.blocks ? "f" : "e"}:${m.content?.length ?? 0}`,
+              m.role === "assistant" && m.isGenerating && !m.interrupted,
           )
-          .join("|") ?? "",
+          .map((m: any) => m._id as string),
       [historyData],
     );
+    const overlays = useAssistantOverlays(chatName, generatingIds);
 
-    /** 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]);
+    // ─── Derywacja ────────────────────────────────────────────────
+    const derived = useMemo(
+      () =>
+        deriveTimeline({
+          history: historyData,
+          overlays,
+          pendingSends,
+          pendingToolResults,
+          isServerTool,
+          now: Date.now(),
+        }),
+      [historyData, overlays, pendingSends, pendingToolResults, busyTick],
+    );
 
-    // ─── Restore timeline from DB history ───────────────────────
-    // Podczas streamingu SSE jest źródłem prawdy dla aktualnie generowanej
-    // 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;
-
-      const resultIds = new Set<string>();
-      const resultMap = new Map<string, { content: string; isError?: boolean }>();
-      for (const msg of historyData) {
-        if (msg.role === "tool_result" && msg.toolCallId) {
-          resultIds.add(msg.toolCallId);
-          resultMap.set(msg.toolCallId, { content: msg.content, isError: msg.isError });
-        }
-      }
-
-      const items: TimelineItem[] = [];
-
-      for (const msg of historyData) {
-        // System messages are developer-injected priming prompts. They go
-        // to the LLM via buildHistory() but must not appear in the user's
-        // chat timeline.
-        if (msg.role === "system") continue;
-
-        if (msg.role === "user") {
-          items.push({
-            type: "message",
-            id: msg._id,
-            role: "user",
-            content: msg.content ?? "",
-          });
-          continue;
-        }
-
-        if (msg.role === "assistant") {
-          const renderBlocks = (
-            blocks: AssistantContentBlock[],
-            options: { isStreaming?: boolean } = {},
-          ) => {
-            let textCount = 0;
-            for (const block of blocks) {
-              if (block.type === "text") {
-                if (block.text) {
-                  items.push({
-                    type: "message",
-                    id: `${msg._id}_t${textCount}`,
-                    role: "assistant",
-                    content: block.text,
-                    isStreaming: options.isStreaming,
-                  });
-                }
-                textCount++;
-              } else {
-                const result = resultMap.get(block.id);
-                const hasResult = resultIds.has(block.id);
-                // 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
-                    ? "complete"
-                    : options.isStreaming
-                      ? "executing"
-                      : "pending";
-                items.push({
-                  type: "tool",
-                  id: block.id,
-                  toolCallId: block.id,
-                  toolName: block.name,
-                  params: block.arguments,
-                  result: result ? tryParseJson(result.content) : undefined,
-                  status,
-                  calling: !hasResult,
-                  error: result?.isError ? result.content : undefined,
-                });
-              }
-            }
-          };
-
-          // 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 (interruptedIds.has(msg._id)) {
-              items.push({
-                type: "interrupted",
-                id: `${msg._id}_interrupted`,
-                messageId: msg._id,
-              });
-            } else {
-              items.push({
-                type: "message",
-                id: `${msg._id}_t0`,
-                role: "assistant",
-                content: "",
-                isStreaming: true,
-              });
-            }
-            continue;
-          }
-
-          // Closed turn — render z final blocks.
-          const blocks =
-            (tryParseJson(msg.blocks ?? "") as AssistantContentBlock[]) ?? [];
-          renderBlocks(blocks);
-        }
-      }
-
-      setTimeline(items);
-      // Deps: `historySig` + `interruptedIds` + `reconcileNonce`. Wciąż BEZ
-      // `isStreaming` — gdyby było w deps: po `done` SSE flips isStreaming=false →
-      // refire → może zobaczyć STARĄ `isGenerating:1` (DB jeszcze nie
-      // zaprojektowała assistantTurnCompleted) → reset do streaming → caret nie
-      // znika. `reconcileNonce` (bumpowany przez watchdog) wymusza rebuild w
-      // odwrotnym race (query-update wyprzedził SSE `done` → historySig zmienił
-      // się PODCZAS isStreaming=true → rebuild pominięty guardem i bez nonce
-      // nigdy nie nadrobiony → produkcyjny hang).
-    }, [historySig, interruptedIds, reconcileNonce]);
+      if (!derived.busy) return;
+      const id = setInterval(() => setBusyTick((t) => t + 1), 10_000);
+      return () => clearInterval(id);
+    }, [derived.busy]);
 
-    // Verbose DB-side timing (gated) — paired with the SSE-event logs above,
-    // this shows the channel skew: who arrives first, and how far apart.
+    // ─── GC optimistic state potwierdzonego przez liveQuery ───────
     useEffect(() => {
-      chatDebug("db update", {
-        count: historyLen,
-        activeGenerating: activeGeneratingMessageId,
+      setPendingSends((prev) => {
+        const next = prev.filter((p) => !isPendingSendSettled(historyData, p));
+        return next.length === prev.length ? prev : next;
       });
-    }, [historySig, historyLen, activeGeneratingMessageId]);
-
-    // ─── Reconcile watchdog — DB is the arbiter of "is a turn running" ──
-    // Production hang: SSE `done` and the DB `assistantTurnCompleted` projection
-    // travel on separate channels (SSE vs WS query sync). When the query-update
-    // (`isGenerating→false`) wins the race while `isStreaming` is still true — or
-    // when `done` is lost entirely (410 exhaustion / server restart) — the
-    // rebuild guard skips and never retries, so the chat sticks in a streaming
-    // state until a page refresh.
-    //
-    // DB truth: `activeGeneratingMessageId === null` ⇒ no turn is generating. If
-    // we still believe we're streaming after a short debounce, force-close the
-    // turn: abort the (dead) SSE, drop `isStreaming`, and bump `reconcileNonce`
-    // so the rebuild runs with the final DB blocks. The debounce avoids
-    // flicker in the brief between-turns window (old turn done, next not started
-    // yet). No false fires during a real stream — the DB then holds
-    // `isGenerating:1`, so `activeGeneratingMessageId` is non-null.
-    useEffect(() => {
-      if (!(isStreaming && activeGeneratingMessageId === null)) {
-        stuckSinceRef.current = null;
-        return;
-      }
-      if (stuckSinceRef.current === null) stuckSinceRef.current = Date.now();
-      const since = stuckSinceRef.current;
-      const RECONCILE_DEBOUNCE_MS = 200;
-      const timer = setTimeout(() => {
-        const lastByteAt = lastSseByteAtRef.current;
-        reportReconcileStuck({
-          scopeId,
-          chatName,
-          lastSseEvent: lastSseEventRef.current,
-          waitedMs: Date.now() - since,
-          visibilityState:
-            typeof document !== "undefined" ? document.visibilityState : null,
-          hidden: typeof document !== "undefined" ? document.hidden : null,
-          msSinceLastSseByte:
-            lastByteAt !== null && typeof performance !== "undefined"
-              ? Math.round(performance.now() - lastByteAt)
-              : null,
-        });
-        sseCtrlRef.current?.abort();
-        sseCtrlRef.current = null;
-        stuckSinceRef.current = null;
-        setIsStreaming(false);
-        setReconcileNonce((n) => n + 1);
-      }, RECONCILE_DEBOUNCE_MS);
-      return () => clearTimeout(timer);
-    }, [isStreaming, activeGeneratingMessageId, scopeId]);
-
-    // ─── Backstop: merge interactive-tool answers regardless of isStreaming ──
-    // Answering an interactive tool (askQuestions) creates a `tool_result` row
-    // AND starts a new assistant turn — so `isStreaming` flips back to true and
-    // the global rebuild guard freezes the whole timeline. Without this, the
-    // answered question stays in input-view ("Odpowiedz na pytania" + the
-    // questions) instead of the answer-view, until that next turn ends — and on
-    // prod its SSE `done` is often lost (the turn finalizes after the DB
-    // projection that nulls `activeGeneratingMessageId` aborts the stream), so
-    // it never catches up. This flips any `calling` tool block to answer-view
-    // the moment its `tool_result` lands in the DB, bypassing the guard.
-    useEffect(() => {
-      if (!historyData) return;
-      const resultMap = new Map<string, { content: string; isError?: boolean }>();
-      for (const msg of historyData) {
-        if (msg.role === "tool_result" && msg.toolCallId) {
-          resultMap.set(msg.toolCallId, {
-            content: msg.content,
-            isError: msg.isError,
-          });
-        }
-      }
-      if (resultMap.size === 0) return;
-      setTimeline((prev) => {
+      setPendingToolResults((prev) => {
+        if (prev.size === 0) return prev;
         let changed = false;
-        const next = prev.map((t) => {
-          if (t.type !== "tool" || !t.calling) return t;
-          const r = resultMap.get(t.toolCallId);
-          if (!r) return t;
-          changed = true;
-          return {
-            ...t,
-            calling: false,
-            status: (r.isError ? "error" : "complete") as ToolStatus,
-            result: tryParseJson(r.content),
-            error: r.isError ? r.content : undefined,
-          };
-        });
+        const next = new Map(prev);
+        for (const msg of historyData ?? []) {
+          if (
+            msg.role === "tool_result" &&
+            msg.toolCallId &&
+            next.has(msg.toolCallId)
+          ) {
+            next.delete(msg.toolCallId);
+            changed = true;
+          }
+        }
         return changed ? next : prev;
       });
-    }, [historySig]);
-
-    // ─── SSE event processing ───────────────────────────────────
-    const processEventRef = useRef<((event: ChatStreamEvent) => void) | null>(null);
-    const processEvent = useCallback(
-      (event: ChatStreamEvent) => {
-        lastSseEventRef.current = event.type;
-        chatDebug("sse event", event.type);
-        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) => {
-              const last = prev[prev.length - 1];
-              const willAppend = !!(
-                last &&
-                last.type === "message" &&
-                last.role === "assistant" &&
-                last.isStreaming
-              );
-              if (willAppend) {
-                return prev.map((item, i) =>
-                  i === prev.length - 1 && item.type === "message"
-                    ? { ...item, content: item.content + event.textDelta }
-                    : item,
-                );
-              }
-              const newId = event.messageId
-                ? `${event.messageId}_streaming_${prev.length}`
-                : `assistant_${Date.now()}`;
-              return [
-                ...prev,
-                {
-                  type: "message",
-                  id: newId,
-                  role: "assistant",
-                  content: event.textDelta!,
-                  isStreaming: true,
-                },
-              ];
-            });
-            break;
-
-          case "tool_call_pending":
-            // AI właśnie zaczyna tool call. Dla SERVER tools pokazujemy loader
-            // "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)
-                : undefined;
-              if (toolDef && !toolDef.isServerTool) break;
-              setTimeline((prev) => {
-                if (prev.some((it) => it.type === "tool" && it.id === event.toolCallId)) {
-                  return prev;
-                }
-                const next = prev.map((item) =>
-                  item.type === "message" && item.isStreaming
-                    ? { ...item, isStreaming: false }
-                    : item,
-                );
-                next.push({
-                  type: "tool",
-                  id: event.toolCallId!,
-                  toolCallId: event.toolCallId!,
-                  toolName: event.toolCallName ?? "",
-                  params: {},
-                  status: "pending",
-                  calling: true,
-                });
-                return next;
-              });
-            }
-            break;
-
-          case "tool_call_arguments_delta":
-            // 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.
-            //   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) => {
-                const existing = prev.find(
-                  (it): it is Extract<TimelineItem, { type: "tool" }> =>
-                    it.type === "tool" && it.toolCallId === event.toolCallId,
-                );
-                if (existing) {
-                  return prev.map((item) =>
-                    item.type === "tool" && item.toolCallId === event.toolCallId
-                      ? {
-                          ...item,
-                          params: event.arguments ?? item.params,
-                          status: "executing",
-                          calling: true,
-                          toolName: event.toolCallName ?? item.toolName,
-                        }
-                      : item,
-                  );
-                }
-                const next = prev.map((item) =>
-                  item.type === "message" && item.isStreaming
-                    ? { ...item, isStreaming: false }
-                    : item,
-                );
-                next.push({
-                  type: "tool",
-                  id: event.toolCallId!,
-                  toolCallId: event.toolCallId!,
-                  toolName: event.toolCallName ?? "",
-                  params: event.arguments ?? {},
-                  status: "pending",
-                  calling: true,
-                });
-                return next;
-              });
-            }
-            break;
-
-          case "tool_call_executed":
-            if (event.toolResult) {
-              setTimeline((prev) =>
-                prev.map((item) =>
-                  item.type === "tool" && item.toolCallId === event.toolResult!.toolCallId
-                    ? {
-                        ...item,
-                        result: tryParseJson(event.toolResult!.content),
-                        status: event.toolResult!.isError ? "error" : "complete",
-                        calling: false,
-                        error: event.toolResult!.isError ? event.toolResult!.content : undefined,
-                      }
-                    : item,
-                ),
-              );
-            }
-            break;
-
-          case "interactive_tool_request":
-            if (event.toolCalls) {
-              setTimeline((prev) => {
-                const byId = new Map(
-                  prev
-                    .filter((it) => it.type === "tool")
-                    .map((it) => [(it as any).id, it]),
-                );
-                const next = prev.map((item) =>
-                  item.type === "message" && item.isStreaming
-                    ? { ...item, isStreaming: false }
-                    : item,
-                );
-                for (const tc of event.toolCalls!) {
-                  const existing = byId.get(tc.id);
-                  if (existing) {
-                    const idx = next.findIndex(
-                      (it) => it.type === "tool" && (it as any).id === tc.id,
-                    );
-                    if (idx >= 0) {
-                      next[idx] = {
-                        ...(next[idx] as any),
-                        toolName: tc.name || (next[idx] as any).toolName,
-                        params: tc.arguments ?? (next[idx] as any).params,
-                      };
-                    }
-                    continue;
-                  }
-                  next.push({
-                    type: "tool",
-                    id: tc.id,
-                    toolCallId: tc.id,
-                    toolName: tc.name,
-                    params: tc.arguments ?? {},
-                    status: "pending",
-                    calling: true,
-                  });
-                }
-                return next;
-              });
-            }
-            break;
+    }, [historyData]);
 
-          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
-                  ? { ...item, isStreaming: false }
-                  : item,
-              ),
-            );
-            setIsStreaming(false);
-            break;
-
-          case "error":
-            setTimeline((prev) => {
-              const last = prev[prev.length - 1];
-              if (
-                last &&
-                last.type === "message" &&
-                last.role === "assistant" &&
-                last.isStreaming
-              ) {
-                return prev.map((item, i) =>
-                  i === prev.length - 1 && item.type === "message"
-                    ? {
-                        ...item,
-                        content: item.content || event.error || chatLabels.errorLabel,
-                        isStreaming: false,
-                      }
-                    : item,
-                );
-              }
-              return [
-                ...prev,
-                {
-                  type: "message",
-                  id: `error_${Date.now()}`,
-                  role: "assistant",
-                  content: event.error || chatLabels.errorLabel,
-                },
-              ];
-            });
-            setIsStreaming(false);
-            break;
-        }
+    const pushLocalError = useCallback(
+      (err: unknown) => {
+        const msg = err instanceof Error ? err.message : chatLabels.errorLabel;
+        setLocalErrors((prev) => [
+          ...prev,
+          {
+            id: `error_${Date.now()}_${prev.length}`,
+            content: `${chatLabels.errorLabel}: ${msg}`,
+          },
+        ]);
       },
       [chatLabels],
     );
-    processEventRef.current = processEvent;
-
-    // ─── 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 (!activeGeneratingMessageId) return;
-      const messageId = activeGeneratingMessageId;
-      const ctrl = new AbortController();
-      sseCtrlRef.current = ctrl;
-      lastSseEventRef.current = null;
-      let cancelled = false;
-      setIsStreaming(true);
-      chatDebug("sse open", { messageId });
-
-      (async () => {
-        try {
-          // 410 = brak in-memory streamu dla messageId. Serwer tworzy stream
-          // synchronicznie ze startem turnu (listener przed 1. awaitem), więc
-          // race "GET przed startStream" jest zamknięty — ale zostaje krótki
-          // residualny race i okno restartu serwera. Ponów kilka razy z
-          // backoffem zanim uznasz turn za przerwany: startStream / grace
-          // window zwykle dogania w tym czasie.
-          let res: Response | null = null;
-          const MAX_410_RETRIES = 4;
-          const RETRY_DELAY_MS = 300;
-          for (let attempt = 0; ; attempt++) {
-            res = await fetch(`/route/chat/${chatName}/stream/${messageId}`, {
-              credentials: "include",
-              signal: ctrl.signal,
-              headers: { Accept: "text/event-stream" },
-            });
-            if (res.status !== 410) break;
-            if (attempt >= MAX_410_RETRIES) {
-              // Naprawdę nieosiągalny (restart mid-stream / poza grace window).
-              setInterruptedIds((prev) => new Set(prev).add(messageId));
-              setIsStreaming(false);
-              return;
-            }
-            await new Promise<void>((r) => setTimeout(r, RETRY_DELAY_MS));
-            if (cancelled) return;
-          }
-          if (!res.ok) throw new Error(`Stream failed: ${res.status}`);
-
-          const reader = res.body!.getReader();
-          const decoder = new TextDecoder();
-          let buf = "";
-          lastSseByteAtRef.current =
-            typeof performance !== "undefined" ? performance.now() : 0;
-          while (!cancelled) {
-            const { value, done } = await reader.read();
-            if (done) break;
-            // Heartbeat tick — kept on every read (even keepalive ` : ping`
-            // bytes that don't produce events). Drives the watchdog effect
-            // below: if this stops ticking for >2× the server keepalive, we
-            // assume the socket is dead and reopen.
-            lastSseByteAtRef.current =
-              typeof performance !== "undefined" ? performance.now() : 0;
-            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 między eventami żeby React nie batchował setTimeline
-                // w jeden render (streaming niewidoczny). Używamy
-                // queueMicrotask, NIE setTimeout(0): w karcie w tle Chrome
-                // throttluje timeouts do ≥1 s, więc setTimeout(0) zamienia
-                // pętlę w 1-event/s freeze i po powrocie buf jest zalany.
-                // Microtaski nie są throttlowane → pętla domyka turn nawet
-                // w tle, a w foreground React i tak renderuje co microtask.
-                await new Promise<void>((r) => queueMicrotask(r));
-              } 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);
-        }
-      })();
-
-      return () => {
-        cancelled = true;
-        ctrl.abort();
-        if (sseCtrlRef.current === ctrl) sseCtrlRef.current = null;
-        lastSseByteAtRef.current = null;
-      };
-      // `streamReopenNonce`: tab-return / heartbeat-timeout forces re-fetch
-      // even though `activeGeneratingMessageId` didn't change. Backend's
-      // FINALIZE_GRACE_MS (5 s) + `init` snapshot recover state seamlessly.
-    }, [activeGeneratingMessageId, streamReopenNonce]);
-
-    // ─── Visibility recovery — tab return forces SSE reconnect ──────────
-    // Chrome/Safari freeze background tabs aggressively: setTimeout is clamped
-    // to ≥1 s, `reader.read()` can hang silently when the OS suspends the
-    // socket, and reactive-query WS updates may be missed. The net effect is
-    // a "zombie" turn after returning to the tab — caret stuck, `done` event
-    // dropped, missing tokens. We do not try to detect each failure mode;
-    // instead, every return-to-visible while we believe we're streaming
-    // tears down the (possibly dead) SSE and bumps `streamReopenNonce` so
-    // the SSE effect re-fires with the same messageId. The backend's
-    // FINALIZE_GRACE_MS window + `init` snapshot make this idempotent —
-    // worst case we get an immediate `done` and a clean teardown.
-    useEffect(() => {
-      if (typeof document === "undefined") return;
-      const onVisibility = () => {
-        if (document.visibilityState !== "visible") return;
-        if (!isStreaming) return;
-        chatDebug("visibility reconnect", {
-          activeGeneratingMessageId,
-        });
-        sseCtrlRef.current?.abort();
-        sseCtrlRef.current = null;
-        setStreamReopenNonce((n) => n + 1);
-      };
-      document.addEventListener("visibilitychange", onVisibility);
-      return () =>
-        document.removeEventListener("visibilitychange", onVisibility);
-    }, [isStreaming, activeGeneratingMessageId]);
-
-    // ─── BFCache restore (back/forward navigation) — force full reset ───
-    // `pageshow` with `persisted=true` fires when the doc is restored from
-    // BFCache. JS was paused, every socket is dead, and refs/state lie about
-    // current reality. Treat it like a fresh mount: abort, bump nonces,
-    // let the rebuild + SSE reopen run from scratch.
-    useEffect(() => {
-      if (typeof window === "undefined") return;
-      const onPageShow = (e: PageTransitionEvent) => {
-        if (!e.persisted) return;
-        chatDebug("bfcache restore");
-        sseCtrlRef.current?.abort();
-        sseCtrlRef.current = null;
-        setReconcileNonce((n) => n + 1);
-        if (isStreaming) setStreamReopenNonce((n) => n + 1);
-      };
-      window.addEventListener("pageshow", onPageShow);
-      return () => window.removeEventListener("pageshow", onPageShow);
-    }, [isStreaming]);
-
-    // ─── Heartbeat watchdog — silent dead socket detector ───────────────
-    // Server sends a `: ping\n\n` keepalive every 5 s. If `reader.read()`
-    // doesn't resolve for >12 s, the socket is almost certainly dead
-    // (network glitch, server restart without a 410, or just the OS
-    // gracefully tearing down a long-idle connection). Reconnect — same
-    // path as the visibility handler. `setInterval` is clamped in
-    // background tabs, but the visibility handler already covers that
-    // case; this guards "tab active, socket silently dead".
-    useEffect(() => {
-      if (!isStreaming) return;
-      if (typeof performance === "undefined") return;
-      const HEARTBEAT_TIMEOUT_MS = 12_000; // 2× server KEEPALIVE_INTERVAL_MS + slack
-      const id = setInterval(() => {
-        const last = lastSseByteAtRef.current;
-        if (last === null) return;
-        const elapsed = performance.now() - last;
-        if (elapsed < HEARTBEAT_TIMEOUT_MS) return;
-        if (typeof document !== "undefined" && document.hidden) return;
-        chatDebug("heartbeat timeout — reconnect", {
-          msSinceLastByte: Math.round(elapsed),
-        });
-        sseCtrlRef.current?.abort();
-        sseCtrlRef.current = null;
-        setStreamReopenNonce((n) => n + 1);
-      }, 3_000);
-      return () => clearInterval(id);
-    }, [isStreaming]);
 
-    // ─── Send message ───────────────────────────────────────────
+    // ─── Send message ─────────────────────────────────────────────
     const handleSend = useCallback(
       async (content: string, options: SendMessageOptions) => {
-        if (isStreaming || !scopeId) return;
-        setIsStreaming(true);
-        const userMsgId = `user_${Date.now()}`;
-        setTimeline((prev) => [
+        if (!scopeId) return;
+        if (derived.busy || derived.hasWaitingInteractive) return;
+        const localId = `pending_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+        setPendingSends((prev) => [
           ...prev,
-          { type: "message", id: userMsgId, role: "user", content },
+          { localId, content, sentAt: Date.now() },
         ]);
         try {
-          await messageMutations.sendMessage({
+          const res = await messageMutations.sendMessage({
             scopeId,
             content,
             model: options.model,
@@ -882,66 +219,54 @@ export function createChatComponent(
               ? { attachmentsJson: JSON.stringify(options.attachments) }
               : {}),
           });
-          // 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.
+          const dbId = (res as any)?.messageId;
+          if (dbId) {
+            setPendingSends((prev) =>
+              prev.map((p) => (p.localId === localId ? { ...p, dbId } : p)),
+            );
+          }
+          // Reszta dzieje się sama: mutacja emituje `assistantTurnStarted` →
+          // liveQuery pushuje generujący row → useAssistantOverlays otwiera
+          // SSE → deriveTimeline renderuje overlay.
         } 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}` },
-          ]);
-          setIsStreaming(false);
+          setPendingSends((prev) => prev.filter((p) => p.localId !== localId));
+          pushLocalError(err);
         }
       },
-      [isStreaming, scopeId, messageMutations, chatLabels],
+      [scopeId, messageMutations, pushLocalError, derived.busy, derived.hasWaitingInteractive],
     );
 
-    // ─── Retry interrupted generation ───────────────────────────
+    // ─── 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;
-          });
+          // Mutacja usuwa interrupted row + tworzy fresh generujący row —
+          // liveQuery i overlay hook przejmują dalej.
         } 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}` },
-          ]);
+          pushLocalError(err);
         }
       },
-      [scopeId, messageMutations, chatLabels],
+      [scopeId, messageMutations, pushLocalError],
     );
 
-    // ─── Build messages for Chat DS (only user/assistant) ───────
-    const chatMessages: ChatMessageData[] = timeline
-      .filter((item): item is TimelineItem & { type: "message" } => item.type === "message")
-      .map((item) => ({
-        id: item.id,
-        role: item.role,
-        content: item.content,
-        isStreaming: item.isStreaming,
-      }));
-
-    // ─── Render tool view ───────────────────────────────────────
+    // ─── Render tool view ─────────────────────────────────────────
     const renderToolItem = (item: TimelineItem & { type: "tool" }) => {
       const tool = toolsMap.get(item.toolName);
       const ViewComponent = tool?.viewComponent;
 
       if (!ViewComponent) {
-        return createElement(ChatToolLog, {
-          calling: item.calling,
-          label: item.toolName,
-        }, item.calling ? chatLabels.toolCallingLabel : item.error ?? chatLabels.toolDoneLabel);
+        return createElement(
+          ChatToolLog,
+          {
+            calling: item.calling,
+            label: item.toolName,
+          },
+          item.calling
+            ? chatLabels.toolCallingLabel
+            : (item.error ?? chatLabels.toolDoneLabel),
+        );
       }
 
       if (tool.isServerTool) {
@@ -953,15 +278,13 @@ export function createChatComponent(
         });
       }
 
-      // Interactive tool
+      // Interactive tool — odpowiedź idzie przez optimistic
+      // pendingToolResults (answer-view od razu), mutacja respondToTool
+      // tworzy tool_result row + nowy turn.
       const respond = async (result: unknown) => {
         if (!scopeId) return;
-        setTimeline((prev) =>
-          prev.map((t) =>
-            t.type === "tool" && t.toolCallId === item.toolCallId
-              ? { ...t, calling: false, result }
-              : t,
-          ),
+        setPendingToolResults((prev) =>
+          new Map(prev).set(item.toolCallId, result),
         );
         try {
           await messageMutations.respondToTool({
@@ -970,18 +293,13 @@ export function createChatComponent(
             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,
-            {
-              type: "message",
-              id: `error_${Date.now()}`,
-              role: "assistant",
-              content: `${chatLabels.errorLabel}: ${err instanceof Error ? err.message : chatLabels.errorLabel}`,
-            },
-          ]);
+          setPendingToolResults((prev) => {
+            const next = new Map(prev);
+            next.delete(item.toolCallId);
+            return next;
+          });
+          pushLocalError(err);
         }
       };
 
@@ -993,21 +311,19 @@ export function createChatComponent(
       });
     };
 
-    // ─── Render full timeline ───────────────────────────────────
-    // Streaming message renders last (after tools) for correct visual order
-    const sortedTimeline = [...timeline].sort((a, b) => {
-      const aStreaming = a.type === "message" && a.isStreaming ? 1 : 0;
-      const bStreaming = b.type === "message" && b.isStreaming ? 1 : 0;
-      return aStreaming - bStreaming;
-    });
-
+    // ─── Render timeline ──────────────────────────────────────────
     const timelineElements: ReactNode[] = [];
-    for (const item of sortedTimeline) {
+    for (const item of derived.items) {
       if (item.type === "message") {
         timelineElements.push(
           createElement(ChatMessage, {
             key: item.id,
-            message: { id: item.id, role: item.role, content: item.content, isStreaming: item.isStreaming },
+            message: {
+              id: item.id,
+              role: item.role,
+              content: item.content,
+              isStreaming: item.isStreaming,
+            },
           }),
         );
       } else if (item.type === "tool") {
@@ -1020,7 +336,8 @@ export function createChatComponent(
             "div",
             {
               key: item.id,
-              className: "flex items-center gap-2 text-sm text-muted-foreground",
+              className:
+                "flex items-center gap-2 text-sm text-muted-foreground",
             },
             createElement("span", null, chatLabels.interruptedLabel),
             createElement(
@@ -1036,13 +353,14 @@ export function createChatComponent(
         );
       }
     }
-
-    // Check if any interactive tool is waiting for response
-    const hasWaitingInteractive = timeline.some(
-      (item) => item.type === "tool" && item.calling && !toolsMap.get(item.toolName)?.isServerTool,
-    );
-
-    void chatMessages;
+    for (const err of localErrors) {
+      timelineElements.push(
+        createElement(ChatMessage, {
+          key: err.id,
+          message: { id: err.id, role: "assistant", content: err.content },
+        }),
+      );
+    }
 
     return createElement(
       ChatInputProvider,
@@ -1076,24 +394,16 @@ export function createChatComponent(
                 placeholder,
                 rows,
               })),
-          disabled: isStreaming || hasWaitingInteractive,
+          disabled: derived.busy || derived.hasWaitingInteractive,
         }),
       ),
     );
   }
 
   return function ChatComponent(props: { scope: any; identifyBy: string }) {
-    return createElement(
-      ChatLabelsProvider,
-      { labels, children: createElement(ChatComponentInner, props) },
-    );
+    return createElement(ChatLabelsProvider, {
+      labels,
+      children: createElement(ChatComponentInner, props),
+    });
   };
 }
-
-function tryParseJson(str: string): unknown {
-  try {
-    return JSON.parse(str);
-  } catch {
-    return str;
-  }
-}