@circuitwall/jarela 2.3.0 → 2.5.0

package/app/api/v1/threads/[thread_id]/route.ts

@@ -7,6 +7,7 @@
  */
 
 import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
 import {
   deleteThread,
   getMessagesAfter,
@@ -23,6 +24,7 @@ import { parseStoredTopics } from "@/lib/agents/conversation-summary";
 import { getThreadActivity } from "@/lib/agents/thread-activity";
 import { getCheckpointer } from "@/lib/agents/checkpointer";
 import { errorMessage } from "@/lib/utils/error";
+import { errorResponse, noStoreJson } from "@/lib/api/responses";
 
 type Params = { params: Promise<{ thread_id: string }> };
 
@@ -41,6 +43,9 @@ export async function GET(req: NextRequest, { params }: Params) {
   if (!thread) return NextResponse.json({ error: "Thread not found" }, { status: 404 });
 
   const url = new URL(req.url);
+  const view = z.enum(["messages", "metadata"]).default("messages")
+    .safeParse(url.searchParams.get("view") ?? undefined);
+  if (!view.success) return errorResponse("Invalid thread view", 400);
   const limit = Math.max(1, Math.min(200, Number(url.searchParams.get("limit")) || DEFAULT_PAGE));
   // Cursors are the message `seq` (SQLite rowid) — a monotonic order key,
   // not a timestamp — so pagination can't skip/duplicate rows on a
@@ -48,28 +53,6 @@ export async function GET(req: NextRequest, { params }: Params) {
   const before = parseSeqParam(url.searchParams.get("before"));
   const after  = parseSeqParam(url.searchParams.get("after"));
 
-  // `after` is a forward-fetch shortcut: caller (typically ChatView's
-  // run-completion handler) already has the recent messages and just wants
-  // the freshly-persisted ones. has_more is fixed to false because the
-  // forward window is not paginated — caller already has everything older.
-  let messages: MessageRow[];
-  let has_more: boolean;
-  if (after !== undefined) {
-    messages = getMessagesAfter(thread_id, after, limit);
-    has_more = false;
-  } else {
-    const page = getMessagesPage(thread_id, limit, before);
-    messages = page.messages;
-    has_more = page.has_more;
-  }
-
-  // Attach per-assistant-turn usage so the chat UI can render a context
-  // utilisation bar without an extra round-trip per message. User turns
-  // and legacy assistant rows (pre-message_usage table) simply omit the
-  // field.
-  const assistantIds = messages.filter((m) => m.role === "assistant").map((m) => m.msg_id);
-  const usageById = getMessageUsageByIds(assistantIds);
-
   // Resolve the agent's effective context-window size once for the whole
   // thread. The bar scales against this cap so the visual matches the
   // budget the agent applies at run time.
@@ -82,7 +65,7 @@ export async function GET(req: NextRequest, { params }: Params) {
     DEFAULT_CONTEXT_WINDOW_TOKENS,
   );
 
-  return NextResponse.json({
+  const metadata = {
     ...thread,
     warm_summary_topics: parseStoredTopics(thread.warm_summary_topics),
     warm_channel_summaries: currentChannelSummaries(thread_id, thread.hot_since_seq),
@@ -91,6 +74,26 @@ export async function GET(req: NextRequest, { params }: Params) {
     pending_hot_since_seq: pendingCompactionBoundarySeq(thread_id),
     manual_compaction_pending: isManualCompactionRunning(thread_id),
     activity: getThreadActivity(thread_id),
+  };
+  if (view.data === "metadata") return noStoreJson(metadata);
+
+  // `after` is a forward-fetch shortcut: caller already has the recent
+  // messages and just wants the freshly persisted ones.
+  let messages: MessageRow[];
+  let has_more: boolean;
+  if (after !== undefined) {
+    messages = getMessagesAfter(thread_id, after, limit);
+    has_more = false;
+  } else {
+    const page = getMessagesPage(thread_id, limit, before);
+    messages = page.messages;
+    has_more = page.has_more;
+  }
+  const assistantIds = messages.filter((m) => m.role === "assistant").map((m) => m.msg_id);
+  const usageById = getMessageUsageByIds(assistantIds);
+
+  return noStoreJson({
+    ...metadata,
     // No server-side filtering: clients receive every message with its
     // `category` tag and apply the chat-panel filter toolbar on the
     // render side. Keeping the raw transcript over the wire means audit

package/app/api/v1/threads/[thread_id]/run/route.ts

@@ -189,7 +189,6 @@ export async function POST(req: NextRequest, { params }: Params) {
           _pinned_model_config_name: pinnedModelConfigName,
           _onCompacting: () => broadcast(active, { type: "status", data: { phase: "compacting", label: "Compacting earlier messages…" } }),
           _user_message_persisted: true,
-          _message_count_before_user: admittedTurn.messageCountBefore,
           _idle_ms_before_user: admittedTurn.idleMsBefore,
         });
         prepDurationMs = Date.now() - prepStartedAt;

package/app/globals.css

@@ -115,6 +115,23 @@
   }
 }
 
+html[data-accent-color="blue"] {
+  --color-accent: #2563eb;
+  --color-accent-hover: #1d4ed8;
+}
+html[data-accent-color="teal"] {
+  --color-accent: #0f766e;
+  --color-accent-hover: #115e59;
+}
+html[data-accent-color="violet"] {
+  --color-accent: #6d28d9;
+  --color-accent-hover: #5b21b6;
+}
+html[data-accent-color="rose"] {
+  --color-accent: #be123c;
+  --color-accent-hover: #9f1239;
+}
+
 /* Tailwind v4 changed the default border colour from gray-200 to
  * currentColor. Restore the v3 behaviour so existing `border` shorthand
  * (without an explicit colour) keeps rendering as the themed divider. */
@@ -195,31 +212,27 @@ body {
  *                      pronounced top sheen.                             *
  * ---------------------------------------------------------------------- */
 .glass {
-  background-color: rgba(24, 24, 27, 0.32);
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.07) 0%,
-    transparent 65%
-  );
+  background-color: rgba(24, 24, 27, 0.38);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 68%);
   -webkit-backdrop-filter: blur(24px) saturate(2);
   backdrop-filter: blur(24px) saturate(2);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
-    inset 0 -1px 0 0 rgba(255, 255, 255, 0.04),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.06),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
 }
 .glass-elevated {
-  background-color: rgba(24, 24, 27, 0.42);
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.09) 0%,
-    transparent 60%
-  );
+  background-color: rgba(24, 24, 27, 0.5);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
   -webkit-backdrop-filter: blur(32px) saturate(2.1);
   backdrop-filter: blur(32px) saturate(2.1);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
     0 24px 60px -12px rgba(0, 0, 0, 0.5);
 }
 .glass-bubble {
@@ -253,15 +266,19 @@ body {
  * inner edge flips to a hairline of slate so the glass reads as raised
  * rather than dissolved into the page. */
 [data-theme="light"] .glass {
-  background-color: rgba(255, 255, 255, 0.55);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
+  background-color: rgba(255, 255, 255, 0.48);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 65%);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
-    inset 0 0 0 1px rgba(15, 23, 42, 0.07);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.98),
+    inset 0 0 0 1px rgba(15, 23, 42, 0.09);
 }
 [data-theme="light"] .glass-elevated {
-  background-color: rgba(255, 255, 255, 0.65);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
+  background-color: rgba(255, 255, 255, 0.58);
+  background-image:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.22) 34%, transparent 68%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, transparent 60%);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
     inset 0 0 0 1px rgba(15, 23, 42, 0.07),
@@ -276,15 +293,19 @@ body {
 }
 @media (prefers-color-scheme: light) {
   [data-theme="system"] .glass {
-    background-color: rgba(255, 255, 255, 0.55);
-    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 65%);
+    background-color: rgba(255, 255, 255, 0.48);
+    background-image:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.18) 34%, transparent 68%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 65%);
     box-shadow:
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
-      inset 0 0 0 1px rgba(15, 23, 42, 0.07);
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.98),
+      inset 0 0 0 1px rgba(15, 23, 42, 0.09);
   }
   [data-theme="system"] .glass-elevated {
-    background-color: rgba(255, 255, 255, 0.65);
-    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 60%);
+    background-color: rgba(255, 255, 255, 0.58);
+    background-image:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.22) 34%, transparent 68%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, transparent 60%);
     box-shadow:
       inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
       inset 0 0 0 1px rgba(15, 23, 42, 0.07),
@@ -310,6 +331,75 @@ body {
   }
 }
 
+[data-surface-style="calm"] body {
+  background-image: none;
+}
+[data-surface-style="calm"] .dashboard-atmosphere {
+  display: none;
+}
+[data-surface-style="calm"] .glass,
+[data-surface-style="calm"] .glass-elevated {
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+  backdrop-filter: blur(14px) saturate(1.2);
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 65%);
+}
+[data-surface-style="calm"] .glass-bubble,
+[data-surface-style="calm"] .glass-bubble-accent {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background-image: none;
+}
+[data-surface-style="calm"] .glass,
+[data-surface-style="calm"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 78%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
+}
+[data-surface-style="calm"] .glass-elevated {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent),
+    0 12px 32px -16px rgba(0, 0, 0, 0.35);
+}
+[data-surface-style="calm"] .glass-bubble {
+  background-color: var(--color-surface-3);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 50%, transparent);
+}
+[data-surface-style="calm"] .glass-bubble-accent {
+  background-color: color-mix(in srgb, var(--color-accent) 82%, var(--color-surface-2));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent);
+}
+
+[data-surface-style="liquid"] .glass,
+[data-surface-style="liquid"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 30%, transparent);
+  background-image:
+    radial-gradient(ellipse 120% 150% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 54%),
+    linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.035) 24%, transparent 50%, color-mix(in srgb, var(--color-accent) 8%, transparent) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 68%);
+  -webkit-backdrop-filter: blur(22px) saturate(1.65) contrast(1.06);
+  backdrop-filter: blur(22px) saturate(1.65) contrast(1.06);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.48),
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.08),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
+    0 8px 24px -18px rgba(0, 0, 0, 0.45);
+}
+[data-surface-style="liquid"] .glass-elevated {
+  background-color: color-mix(in srgb, var(--color-surface-2) 38%, transparent);
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.56),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
+    0 24px 60px -12px rgba(0, 0, 0, 0.42),
+    0 0 30px -22px color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+@supports not (backdrop-filter: blur(1px)) {
+  [data-surface-style="liquid"] .glass,
+  [data-surface-style="liquid"] .glass-elevated {
+    background-color: var(--color-surface-2);
+    background-image: none;
+    box-shadow: inset 0 0 0 1px var(--color-border);
+  }
+}
+
 /* Disable the blue tap flash on iOS / Android; we use explicit :active styles. */
 * { -webkit-tap-highlight-color: transparent; }
 

package/app/layout.tsx

@@ -90,6 +90,18 @@ const themeBootstrap = `(() => {
     var t = localStorage.getItem("jarela-theme");
     if (t !== "light" && t !== "dark" && t !== "system") t = "system";
     document.documentElement.setAttribute("data-theme", t);
+    var accent = localStorage.getItem("jarela-accent-color");
+    if (["blue", "teal", "violet", "rose"].includes(accent)) {
+      document.documentElement.setAttribute("data-accent-color", accent);
+    } else {
+      document.documentElement.removeAttribute("data-accent-color");
+    }
+    var surface = localStorage.getItem("jarela-surface-style");
+    if (surface === "calm" || surface === "ambient" || surface === "liquid") {
+      document.documentElement.setAttribute("data-surface-style", surface);
+    } else {
+      document.documentElement.removeAttribute("data-surface-style");
+    }
     // Collapse any media-scoped theme-color metas Next emits to a single tag
     // so the PWA window chrome matches the user's explicit choice (not just
     // prefers-color-scheme). ThemeContext keeps this in sync on change.

package/components/agents/AgentsPanel.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { Bot, Plus, Trash2 } from "lucide-react";
 import type { AgentConfig, AgentConfigIn } from "@/api/types";
 import { api } from "@/api/client";
 import { useAgents } from "@/hooks/useAgents";
 import { useModels } from "@/hooks/useModels";
 import { useDeepLinkScroll } from "@/hooks/useDeepLinkScroll";
-import { Button } from "@/components/ui/Button";
+import { HeaderAction, PanelHeader } from "@/components/ui/PanelHeader";
 import { AgentEditor } from "./AgentEditor";
 import { useAppContext } from "@/contexts/AppContext";
 
@@ -100,17 +100,9 @@ export function AgentsPanel() {
   return (
     <div className="flex flex-col h-full min-h-0">
       <>
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 pt-3 pb-2 shrink-0">
-        <span className="text-[11px] text-fg-faint font-medium uppercase tracking-wide">Agents</span>
-        <Button
-          onClick={() => setEditing("new")}
-          size="sm"
-          icon={<Plus size={11} />}
-        >
-          New
-        </Button>
-      </div>
+      <PanelHeader icon={<Bot size={14} />} title="Agents">
+        <HeaderAction onClick={() => setEditing("new")} icon={<Plus size={14} />} label="New" />
+      </PanelHeader>
 
       {/* List */}
       <div ref={containerRef} className="flex-1 overflow-y-auto px-2 pb-2">

package/components/chat/ChatView.tsx

@@ -17,6 +17,7 @@ import { useChatErrorReporting } from "./useChatErrorReporting";
 import { useChatQueue, type ChatQueueApi } from "./useChatQueue";
 import { useThreadCrossDeviceSync } from "./useThreadCrossDeviceSync";
 import { useThreadData } from "./useThreadData";
+import { useThreadMetadataPolling } from "./useThreadMetadataPolling";
 import { useThreadActivity } from "./useThreadActivity";
 import { useUserProfileAndAgent } from "./useUserProfileAndAgent";
 import { composerPlaceholder, finalizeRunFromServer } from "./chat-run-utils";
@@ -109,21 +110,11 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
   const currentThreadIdRef = useRef(threadId);
   currentThreadIdRef.current = threadId;
 
-  // Auto compaction starts server-side during a run; poll so the banner shows live.
-  useEffect(() => {
-    if (!threadId || !sse.streaming) return;
-    let cancelled = false;
-    const timer = window.setInterval(() => {
-      void api.threads.get(threadId, { limit: 1 }).then((d) => {
-        if (!cancelled) applyThreadMeta(thread.metaApplier, d);
-      }).catch(() => { /* best-effort */ });
-    }, 2000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId, sse.streaming]);
+  useThreadMetadataPolling(
+    threadId,
+    sse.streaming || thread.warmSummaryPending || thread.compactionPending || thread.manualCompactionPending,
+    thread.metaApplier,
+  );
 
   useThreadCrossDeviceSync({
     threadId,
@@ -262,9 +253,9 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
         thread.metaApplier.setWarmSummaryTopics?.(parseWarmSummaryTopics(result.warm_summary_topics));
         // The compact response carries only the chat recap; channel recaps
         // (bridge, watcher, scheduled task) come with the thread metadata.
-        void api.threads.get(compactedThreadId, { limit: 1 })
+        void api.threads.metadata(compactedThreadId)
           .then((d) => { if (stillCurrent()) applyThreadMeta(thread.metaApplier, d); })
-          .catch(() => { /* best-effort */ });
+          .catch((err) => console.error("compaction metadata refresh failed", err));
       }
       notifyCompaction(result);
     } catch (err) {
@@ -296,7 +287,7 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
   });
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full min-h-0 w-full min-w-0 flex-col">
       <MessageList
         threadId={threadId}
         messages={thread.messages}

package/components/chat/InputBar.tsx

@@ -366,7 +366,7 @@ export function InputBar({ attachments, onAttachmentsChange, onSubmit, onQueue,
         )}
 
         <textarea
-          className="flex-1 resize-none bg-surface-3/60 text-fg text-sm rounded-xl px-3 py-2 border border-border/60 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent/40 placeholder:text-fg-faint max-h-[84px] min-h-[44px] transition-colors"
+          className="flex-1 min-w-0 resize-none bg-surface-3/60 text-fg text-sm rounded-xl px-3 py-2 border border-border/60 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent/40 placeholder:text-fg-faint max-h-[84px] min-h-[44px] transition-colors"
           ref={textareaRef}
           placeholder={placeholder ?? "Message…"}
           rows={1}

package/components/chat/MessageBubble.tsx

@@ -849,6 +849,18 @@ function BridgeMessageCard({ ctx, activity }: {
           {activity.occurrence_count > 1 ? ` · ${activity.occurrence_count} checks` : ""}
         </span>
       ) : null}
+      {ctx.chatLink ? (
+        <a
+          href={ctx.chatLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-white/15 hover:bg-white/25 text-[9.5px] shrink-0"
+          title={`Open this chat (${ctx.chatLink})`}
+        >
+          <ExternalLink size={9} />
+          open chat
+        </a>
+      ) : null}
     </>
   );
   const sections: Array<{ label: string; content: ReactNode; defaultOpen?: boolean; hint?: string }> = [
@@ -2028,7 +2040,7 @@ export const MessageBubble = memo(function MessageBubble({ message, attachedActi
         )}
       </div>
 
-      <div className={`flex flex-col min-w-0 ${containsImageAttachment ? "max-w-[calc(100%-2.25rem)] sm:max-w-[92%] md:max-w-[86%]" : "max-w-[88%] sm:max-w-[75%]"} ${isUser ? "items-end" : "items-start"}`}>
+      <div className={`flex flex-col min-w-0 ${!isUser ? "flex-1 items-start" : containsImageAttachment ? "max-w-[calc(100%-2.25rem)] sm:max-w-[92%] md:max-w-[86%] items-end" : "max-w-[calc(100%-2.25rem)] sm:max-w-[75%] items-end"}`}>
         {(timeLabel || messageId) && (
           <div className={`flex items-center gap-1 mb-0.5 px-1 opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100 transition-opacity ${isUser ? "flex-row-reverse" : ""}`}>
             {timeLabel && (

package/components/chat/MessageList.test.tsx

@@ -4,14 +4,16 @@ import { render, screen, fireEvent, within, waitFor } from "@testing-library/rea
 import { MessageList } from "./MessageList";
 import type { Message } from "@/api/types";
 
+const renderCounts = vi.hoisted(() => new Map<string, number>());
 vi.mock("./MessageBubble", () => ({
   MessageBubble: ({ message, attachedActivity, showAvatar }: {
-    message: Pick<Message, "content">;
+    message: Pick<Message, "id" | "content">;
     attachedActivity?: { source_kind: string };
     showAvatar?: boolean;
-  }) => (
-    <div data-activity-kind={attachedActivity?.source_kind} data-show-avatar={String(showAvatar)}>{message.content}</div>
-  ),
+  }) => {
+    renderCounts.set(message.id, (renderCounts.get(message.id) ?? 0) + 1);
+    return <div data-activity-kind={attachedActivity?.source_kind} data-show-avatar={String(showAvatar)}>{message.content}</div>;
+  },
 }));
 
 vi.mock("./ToolList", () => ({
@@ -65,6 +67,45 @@ function installPointerCapture(button: HTMLButtonElement) {
 }
 
 describe("MessageList conversation focus", () => {
+  it("does not re-render historical rows as streaming tokens or thinking arrive", () => {
+    renderCounts.clear();
+    const messages = [
+      mkMessage("history1", "user", "earlier prompt", "2026-10-18T08:00:00.000Z"),
+      mkMessage("history2", "assistant", "earlier answer", "2026-10-18T08:00:01.000Z"),
+    ];
+    const { rerender } = render(
+      <MessageList messages={messages} streaming streamingContent="A" thinkingContent="thinking" />,
+    );
+    const firstCounts = messages.map((m) => renderCounts.get(m.id));
+    rerender(<MessageList messages={messages} streaming streamingContent="A longer reply" thinkingContent="more thinking" />);
+    expect(messages.map((m) => renderCounts.get(m.id))).toEqual(firstCounts);
+    expect(screen.getByText("A longer reply")).toBeTruthy();
+  });
+
+  it("updates history when a persisted message changes", () => {
+    const messages = [mkMessage("history3", "assistant", "before edit", "2026-10-18T08:00:00.000Z")];
+    const { rerender } = render(<MessageList messages={messages} />);
+    rerender(<MessageList messages={[{ ...messages[0], content: "after edit" }]} />);
+    expect(screen.getByText("after edit")).toBeTruthy();
+    expect(screen.queryByText("before edit")).toBeNull();
+  });
+
+  it("preserves historical message nodes when the context boundary moves", () => {
+    const messages = [
+      mkMessage("history4", "user", "first message", "2026-10-18T08:00:00.000Z"),
+      mkMessage("history5", "assistant", "second message", "2026-10-18T08:00:01.000Z"),
+    ];
+    const { container, rerender } = render(<MessageList messages={messages} hotSinceSeq={4} />);
+    const first = container.querySelector('[data-message-id="history4"]');
+    const second = container.querySelector('[data-message-id="history5"]');
+    rerender(<MessageList messages={messages} hotSinceSeq={5} />);
+    expect(container.querySelector('[data-message-id="history4"]')).toBe(first);
+    expect(container.querySelector('[data-message-id="history5"]')).toBe(second);
+    const boundary = container.querySelector("[data-focus-boundary='1']");
+    expect(first!.compareDocumentPosition(boundary!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(boundary!.compareDocumentPosition(second!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it.each([
     ["bridge", "bridge-1:chat-1", "user", "bridge", { bridge_conversation: { key: "bridge-1:chat-1" } }],
     ["scheduled_task", "task-1", "assistant", "scheduled_task", undefined],