@backmatter/studio 0.0.14 → 0.0.16

package/src/chat/ChatProvider.tsx

@@ -24,6 +24,7 @@ import {
   createThread,
   fetchAiModels,
   fetchThread,
+  fetchThreads,
   keepAllChanges,
   keepChange,
   notifyHeadChanged,
@@ -48,6 +49,7 @@ import {
   addMention as addMentionTo,
   addPointer as addPointerTo,
   buildChatContext,
+  codeSessionChatContext,
   removeMention as removeMentionFrom,
   removePointer as removePointerFrom,
   type ChatPointer,
@@ -55,6 +57,7 @@ import {
 } from "./chat-context";
 import {
   changeIdsInMessage,
+  checkoutWriteReloads,
   isWriteTool,
   changesInToolOutput,
   detailForTreePatch,
@@ -62,6 +65,7 @@ import {
   type TreeStatusPatch,
 } from "./chat-helpers";
 import {
+  allowsPanelAction,
   initialPanelState,
   panelReducer,
   type PanelAction,
@@ -84,7 +88,8 @@ export type ChatUIValue = {
   model: string | null;
   setModel: (id: string) => void;
   threadId: string | null;
-  openThread: (threadId: string) => void;
+  /** Refuses a thread that belongs to a different surface (editor vs a code session). */
+  openThread: (thread: { id: string; codeSessionId?: string | null }) => void;
   newThread: () => void;
   mentions: DocRef[];
   addMention: (ref: DocRef) => void;
@@ -105,6 +110,13 @@ export type ChatUIValue = {
   /** Bumped whenever a thread is created/renamed/deleted so history can refetch. */
   threadsVersion: number;
   bumpThreads: () => void;
+  /** Set when this provider is scoped to a code session checkout. */
+  codeSessionId: string | null;
+  /** Preview route included in chat context, or null when dismissed. */
+  route: string | null;
+  /** The document that route resolves to, when a model claims it. */
+  viewed: DocRef | null;
+  dismissRoute: () => void;
 };
 
 const ChatUIContext = createContext<ChatUIValue | null>(null);
@@ -155,6 +167,14 @@ export function useChatSession(): ChatSessionValue {
 
 const modelStorageKey = (ws: string) => `backmatter-chat-model:${ws}`;
 
+function newestThread(threads: readonly { id: string; updatedAt: string }[]): string | null {
+  let best: { id: string; updatedAt: string } | null = null;
+  for (const thread of threads) {
+    if (!best || thread.updatedAt > best.updatedAt) best = thread;
+  }
+  return best?.id ?? null;
+}
+
 /** Apply tool statuses locally so the top bar moves before the next git poll. */
 function publishTreePatches(workspaceId: string, patches: TreeStatusPatch[]) {
   let published = false;
@@ -163,7 +183,7 @@ function publishTreePatches(workspaceId: string, patches: TreeStatusPatch[]) {
     // A published file stays on screen; head-changed reloads it once. A file
     // that disappeared still needs the open editor to drop it.
     if (patch.absent || patch.status !== "clean") {
-      notifyDocChanged({ locale: patch.locale, type: patch.type, slug: patch.slug });
+      notifyDocChanged({ type: patch.type, slug: patch.slug });
     }
     if (patch.status === "clean") published = true;
   }
@@ -175,26 +195,48 @@ function publishTreePatches(workspaceId: string, patches: TreeStatusPatch[]) {
 
 function refFromInput(input: unknown): DocRef | null {
   const ref = (input as { docRef?: Partial<DocRef> } | undefined)?.docRef;
-  if (!ref || !ref.locale || !ref.type || !ref.slug) return null;
-  return { locale: ref.locale, type: ref.type, slug: ref.slug };
+  if (!ref || !ref.type || !ref.slug) return null;
+  return { type: ref.type, slug: ref.slug };
 }
 
 export function ChatProvider({
   workspaceId,
   startOpen = false,
   pointer = false,
+  codeSessionId = null,
+  route = null,
+  viewed = null,
+  onRouteDismiss,
+  onCheckoutWrite,
+  onTurnSettled,
   children,
 }: {
   workspaceId: string;
   startOpen?: boolean;
   /** Dev bar chat can point at elements on the host page. */
   pointer?: boolean;
+  codeSessionId?: string | null;
+  route?: string | null;
+  /** Document for `route`, resolved by the caller. The agent still receives the URL. */
+  viewed?: DocRef | null;
+  onRouteDismiss?: (route: string) => void;
+  /** A file tool finished in the checkout. The preview does not hot-reload on its own. */
+  onCheckoutWrite?: () => void;
+  /** The reply finished, so a code session can read the edit set the turn just saved. */
+  onTurnSettled?: () => void;
   children: React.ReactNode;
 }) {
   const [panel, dispatch] = useReducer(
     panelReducer,
     startOpen ? { ...initialPanelState, mode: "open" as const } : initialPanelState,
   );
+  const dispatchPanel = useCallback(
+    (action: PanelAction) => {
+      if (!allowsPanelAction(action, Boolean(codeSessionId))) return;
+      dispatch(action);
+    },
+    [codeSessionId],
+  );
   const [aiAvailable, setAiAvailable] = useState<boolean | null>(null);
   const [models, setModels] = useState<AiModelInfo[]>([]);
   const [tier, setTier] = useState<AiTier>("ask");
@@ -206,8 +248,10 @@ export function ChatProvider({
   const [pointers, setPointers] = useState<ChatPointer[]>([]);
   const [previewPointer, setPreviewPointer] = useState(false);
   const [pointerHighlight, setPointerHighlight] = useState<"local" | "channel">("local");
-  const [includeFocus, setIncludeFocus] = useState(true);
+  const [includeFocus, setIncludeFocus] = useState(!codeSessionId);
   const [threadsVersion, setThreadsVersion] = useState(0);
+  // Bumped when the person picks a chat, so a late session list cannot replace it.
+  const restore = useRef(0);
   const { focus } = useEditorFocus();
 
   // Models + availability.
@@ -234,15 +278,30 @@ export function ChatProvider({
     };
   }, [workspaceId]);
 
-  // Reset per-workspace session state.
+  // Reset per-workspace session state. A code session reopens its newest chat.
   useEffect(() => {
     setThreadId(null);
     setFreshThread(false);
     setPendingText(null);
     setMentions([]);
     setPointers([]);
-    setIncludeFocus(true);
-  }, [workspaceId]);
+    setIncludeFocus(!codeSessionId);
+    if (!codeSessionId) return;
+    const token = ++restore.current;
+    fetchThreads(workspaceId, codeSessionId)
+      .then((res) => {
+        if (restore.current !== token) return;
+        const latest = newestThread(res.threads);
+        if (!latest) return;
+        setThreadId(latest);
+      })
+      .catch(() => {
+        // A missed list leaves the blank chat. Sending still starts one.
+      });
+    return () => {
+      restore.current += 1;
+    };
+  }, [workspaceId, codeSessionId]);
 
   const setModel = useCallback(
     (id: string) => {
@@ -252,14 +311,20 @@ export function ChatProvider({
     [workspaceId],
   );
 
-  const openThread = useCallback((id: string) => {
-    setThreadId(id);
-    setFreshThread(false);
-    setPendingText(null);
-    dispatch({ type: "showChat" });
-  }, []);
+  const openThread = useCallback(
+    (thread: { id: string; codeSessionId?: string | null }) => {
+      if ((thread.codeSessionId ?? null) !== (codeSessionId ?? null)) return;
+      restore.current += 1;
+      setThreadId(thread.id);
+      setFreshThread(false);
+      setPendingText(null);
+      dispatch({ type: "showChat" });
+    },
+    [codeSessionId],
+  );
 
   const newThread = useCallback(() => {
+    restore.current += 1;
     setThreadId(null);
     setFreshThread(false);
     setPendingText(null);
@@ -275,8 +340,8 @@ export function ChatProvider({
     setMentions((prev) => removeMentionFrom(prev, ref));
   }, []);
   const addPointer = useCallback((next: ChatPointer) => {
-    setPointers((prev) => addPointerTo(prev, next));
-  }, []);
+    setPointers((prev) => addPointerTo(prev, next, codeSessionId ? "replace" : "append"));
+  }, [codeSessionId]);
   const removePointer = useCallback((next: ChatPointer) => {
     setPointers((prev) => removePointerFrom(prev, next));
   }, []);
@@ -289,28 +354,40 @@ export function ChatProvider({
     selection: null,
     mentions: [],
     pointers: [],
+    route: null,
   }));
-  contextRef.current = () => buildChatContext({ focus, includeFocus, mentions, pointers });
+  contextRef.current = () =>
+    codeSessionId
+      ? codeSessionChatContext({ pointers, route })
+      : buildChatContext({ focus, includeFocus, mentions, pointers });
   const modelRef = useRef<string | null>(model);
   modelRef.current = model;
 
   // Creating a thread lazily on first send.
   const startThread = useCallback(
     async (text: string) => {
-      const res = await createThread(workspaceId);
+      restore.current += 1;
+      const res = await createThread(
+        workspaceId,
+        codeSessionId ? { codeSessionId } : undefined,
+      );
       setPendingText(text);
       setFreshThread(true);
       setThreadId(res.thread.id);
       bumpThreads();
     },
-    [workspaceId, bumpThreads],
+    [workspaceId, bumpThreads, codeSessionId],
   );
 
+  const dismissRoute = useCallback(() => {
+    if (route && onRouteDismiss) onRouteDismiss(route);
+  }, [route, onRouteDismiss]);
+
   const ui = useMemo<ChatUIValue>(
     () => ({
       workspaceId,
       panel,
-      dispatch,
+      dispatch: dispatchPanel,
       aiAvailable,
       models,
       tier,
@@ -335,10 +412,15 @@ export function ChatProvider({
       focus,
       threadsVersion,
       bumpThreads,
+      codeSessionId,
+      route,
+      viewed,
+      dismissRoute,
     }),
     [
       workspaceId,
       panel,
+      dispatchPanel,
       aiAvailable,
       models,
       tier,
@@ -361,6 +443,10 @@ export function ChatProvider({
       focus,
       threadsVersion,
       bumpThreads,
+      codeSessionId,
+      route,
+      viewed,
+      dismissRoute,
     ],
   );
 
@@ -380,13 +466,15 @@ export function ChatProvider({
           getContext={() => contextRef.current()}
           getModel={() => modelRef.current}
           onThreadTouched={bumpThreads}
+          onCheckoutWrite={onCheckoutWrite}
+          onTurnSettled={onTurnSettled}
         >
           {scoped}
         </ChatSession>
       ) : (
         <EmptySession onFirstSend={startThread}>{scoped}</EmptySession>
       ),
-    [threadId, workspaceId, freshThread, pendingText, bumpThreads, startThread],
+    [threadId, workspaceId, freshThread, pendingText, bumpThreads, startThread, onCheckoutWrite, onTurnSettled],
   );
 
   return (
@@ -461,6 +549,8 @@ type SessionProps = {
   getContext: () => ChatRequestContext;
   getModel: () => string | null;
   onThreadTouched: () => void;
+  onCheckoutWrite?: () => void;
+  onTurnSettled?: () => void;
   children: React.ReactNode;
 };
 
@@ -539,6 +629,8 @@ function LiveSession({
   getContext,
   getModel,
   onThreadTouched,
+  onCheckoutWrite,
+  onTurnSettled,
   children,
 }: SessionProps & {
   thread: ChatThread | null;
@@ -574,7 +666,10 @@ function LiveSession({
     id: threadId,
     messages: initialMessages,
     transport,
-    onFinish: () => onThreadTouched(),
+    onFinish: () => {
+      onThreadTouched();
+      onTurnSettled?.();
+    },
   });
 
   const { messages, status, sendMessage } = chat;
@@ -632,6 +727,7 @@ function LiveSession({
         if (streaming && write && ref) editingKey = docKey(ref);
         if (part.state === "output-available" && !seen.has(part.toolCallId)) {
           seen.add(part.toolCallId);
+          if (checkoutWriteReloads(name, part.output)) onCheckoutWrite?.();
           const patches = treeStatusPatches(part.output);
           if (patches.length > 0) publishTreePatches(workspaceId, patches);
           const found = write ? changesInToolOutput(part.output) : [];
@@ -650,14 +746,14 @@ function LiveSession({
       }
     }
     setAiEditingDocKey(streaming ? editingKey : null);
-  }, [messages, status, setAiEditingDocKey, workspaceId]);
+  }, [messages, status, setAiEditingDocKey, workspaceId, onCheckoutWrite]);
 
   useEffect(() => () => setAiEditingDocKey(null), [setAiEditingDocKey]);
 
   const applyChangeResult = useCallback((change: ChatChangeSummary, notify: boolean) => {
     setChanges((prev) => ({ ...prev, [change.id]: { ...prev[change.id], ...change } }));
     if (notify) {
-      notifyDocChanged({ locale: change.locale, type: change.type, slug: change.slug });
+      notifyDocChanged({ type: change.type, slug: change.slug });
       notifyTreeChanged();
     }
   }, []);

package/src/chat/Composer.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/chat/Composer.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { docKey, type DocRef } from "../chrome/EditorFocusContext";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
@@ -26,6 +26,27 @@ function isMentionKey(key: string): key is MentionKey {
 
 export { POINTER_ARM_EVENT } from "./pointer-arm";
 
+/** The page open in the code session preview. Same row as the editor's open document. */
+export function RouteChip({
+  route,
+  doc,
+  onDismiss,
+}: {
+  route: string;
+  doc?: { type: string; slug: string } | null;
+  onDismiss: () => void;
+}) {
+  return (
+    <ContextRow
+      icon={<FileIcon size={13} />}
+      {...(doc ? { type: doc.type, slug: doc.slug } : { label: route })}
+      meta="in preview"
+      removeLabel="Remove the page from context"
+      onRemove={onDismiss}
+    />
+  );
+}
+
 function postPointer(on: boolean) {
   if (typeof window === "undefined") return;
   window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on } }));
@@ -46,12 +67,21 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const busy = session.status === "streaming" || session.status === "submitted";
   const canSend = text.trim().length > 0 && !busy && ui.aiAvailable === true;
 
-  // Auto-grow.
-  useEffect(() => {
+  // Auto-grow. Measuring must not leave a 1px swing: that resizes the thread
+  // on every key, and the thread then tries to scroll to the bottom.
+  useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
+    const previous = el.offsetHeight;
+    el.style.overflowY = "hidden";
     el.style.height = "0px";
-    el.style.height = `${Math.min(el.scrollHeight, 180)}px`;
+    const next = Math.min(el.scrollHeight, 180);
+    if (previous > 0 && Math.abs(next - previous) <= 1) {
+      el.style.height = `${previous}px`;
+      return;
+    }
+    el.style.height = `${next}px`;
+    if (next >= 180) el.style.overflowY = "auto";
   }, [text]);
 
   useEffect(() => {
@@ -138,10 +168,12 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
     setMention(null);
   }
 
-  const focusChip = ui.focus && ui.includeFocus ? ui.focus.docRef : null;
+  const sessionChat = Boolean(ui.codeSessionId);
+  const focusChip = !sessionChat && ui.focus && ui.includeFocus ? ui.focus.docRef : null;
+  const pageChip = sessionChat && ui.route ? ui.route : null;
   const selectionActive =
     ui.focus?.selection && ui.focus.selection.end > ui.focus.selection.start;
-  const hasContext = Boolean(focusChip || ui.mentions.length > 0);
+  const hasContext = Boolean(focusChip || pageChip || ui.mentions.length > 0);
 
   return (
     <div {...stylex.props(styles.wrap)}>
@@ -168,6 +200,13 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
                 onRemove={() => ui.setIncludeFocus(false)}
               />
             ) : null}
+            {pageChip ? (
+              <RouteChip
+                route={pageChip}
+                doc={ui.viewed}
+                onDismiss={() => ui.dismissRoute()}
+              />
+            ) : null}
             {ui.mentions.map((m) => (
               <ContextRow
                 key={docKey(m)}
@@ -232,6 +271,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
           {...stylex.props(styles.textarea)}
         />
         <div {...stylex.props(styles.footer)}>
+          {!sessionChat ? (
           <Tooltip label="Mention a document (@)">
             <button
               type="button"
@@ -257,6 +297,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               <AtIcon />
             </button>
           </Tooltip>
+          ) : null}
           <span {...stylex.props(styles.spacer)} />
           {ui.pointer ? (
             <Tooltip label={pointing ? "Stop pointing" : "Point at an element on the page"}>
@@ -276,7 +317,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
               </button>
             </Tooltip>
           ) : null}
-          {ui.focus ? (
+          {!sessionChat && ui.focus ? (
             <Tooltip
               label={
                 ui.includeFocus

package/src/chat/DocListCard.tsx

@@ -14,7 +14,6 @@ import { ChevronDownIcon, FileIcon } from "./icons";
 const hover = "@media (hover: hover)";
 
 export type DocCardItem = {
-  locale: string;
   type: string;
   slug: string;
   title?: string | null;
@@ -57,7 +56,6 @@ export function DocListCard({
 
   const groups = groupByType(items);
   const multiType = groups.length > 1;
-  const multiLocale = new Set(items.map((d) => d.locale)).size > 1;
   const hidden = expanded ? 0 : Math.max(0, items.length - COLLAPSED_ROWS);
   const truncated = total !== undefined && total > items.length ? total - items.length : 0;
 
@@ -78,10 +76,9 @@ export function DocListCard({
             ) : null}
             {shown.map((doc) => (
               <DocRow
-                key={`${doc.locale}/${doc.type}/${doc.slug}`}
+                key={`${doc.type}/${doc.slug}`}
                 doc={doc}
                 workspaceId={workspaceId}
-                showLocale={multiLocale}
               />
             ))}
           </div>
@@ -109,22 +106,12 @@ export function DocListCard({
 function DocRow({
   doc,
   workspaceId,
-  showLocale,
 }: {
   doc: DocCardItem;
   workspaceId: string;
-  showLocale: boolean;
 }) {
   const nav = useWorkspaceNav();
-  const to = nav
-    ? contentDocPath(
-        nav.workspaceSlug,
-        doc.type,
-        doc.slug,
-        doc.locale,
-        nav.defaultLocale,
-      )
-    : "#";
+  const to = nav ? contentDocPath(nav.workspaceSlug, doc.type, doc.slug) : "#";
   const title = doc.title?.trim() || doc.slug;
   const status = docCardBadge(doc);
   const secondary = doc.path ?? `${doc.type}/${doc.slug}`;
@@ -136,7 +123,6 @@ function DocRow({
           <FileIcon size={13} />
         </span>
         <span {...stylex.props(styles.title)}>{title}</span>
-        {showLocale ? <span {...stylex.props(styles.locale)}>{doc.locale}</span> : null}
         {status ? (
           <span
             {...stylex.props(

package/src/chat/MentionPopover.tsx

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState, type RefObject } from "react";
 import { Popover } from "@base-ui/react/popover";
 import * as stylex from "@stylexjs/stylex";
 import { fetchDocs } from "../api";
-import type { DocRef } from "../chrome/EditorFocusContext";
+import { docKey, type DocRef } from "../chrome/EditorFocusContext";
 import { colors, type } from "../styles/tokens.stylex";
 import { cx, popup, popupClassName } from "../ui/popup";
 import { FileIcon } from "./icons";
@@ -52,9 +52,9 @@ export function MentionPopover({
   }, [workspaceId]);
 
   const items = useMemo(() => {
-    const excluded = new Set(exclude.map((r) => `${r.locale}/${r.type}/${r.slug}`));
+    const excluded = new Set(exclude.map((r) => docKey(r)));
     return filterDocs(
-      docs.filter((d) => !excluded.has(`${d.locale}/${d.type}/${d.slug}`)),
+      docs.filter((d) => !excluded.has(docKey(d))),
       query,
     );
   }, [docs, query, exclude]);
@@ -69,7 +69,7 @@ export function MentionPopover({
       else if (key === "ArrowUp") setActive((i) => Math.max(i - 1, 0));
       else if (key === "Enter" || key === "Tab") {
         const item = items[active];
-        if (item) onSelect({ locale: item.locale, type: item.type, slug: item.slug });
+        if (item) onSelect({ type: item.type, slug: item.slug });
         else onClose();
       } else if (key === "Escape") onClose();
     };
@@ -79,7 +79,7 @@ export function MentionPopover({
   }, [items, active, onSelect, onClose, keyHandlerRef]);
 
   const activeId = items[active]
-    ? `mention-${items[active].locale}-${items[active].type}-${items[active].slug}`
+    ? `mention-${items[active].type}-${items[active].slug}`
     : undefined;
 
   return (
@@ -113,13 +113,13 @@ export function MentionPopover({
             ) : (
               items.map((item, i) => (
                 <div
-                  key={`${item.locale}/${item.type}/${item.slug}`}
-                  id={`mention-${item.locale}-${item.type}-${item.slug}`}
+                  key={docKey(item)}
+                  id={`mention-${item.type}-${item.slug}`}
                   role="option"
                   aria-selected={i === active}
                   onMouseEnter={() => setActive(i)}
                   onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => onSelect({ locale: item.locale, type: item.type, slug: item.slug })}
+                  onClick={() => onSelect({ type: item.type, slug: item.slug })}
                   {...stylex.props(popup.item, styles.item, i === active && popup.itemHighlighted)}
                 >
                   <FileIcon size={12} />
@@ -127,7 +127,6 @@ export function MentionPopover({
                     {item.type}/{item.slug}
                   </span>
                   <span {...stylex.props(popup.itemMeta)}>
-                    {item.locale}
                     {item.status === "added"
                       ? " · new"
                       : item.status !== "clean"

package/src/chat/PointerChip.tsx

@@ -11,20 +11,24 @@ import { CloseIcon, PointerIcon } from "./icons";
 const hover = "@media (hover: hover)";
 
 export function pointerKey(pointer: ChatPointer): string {
-  return `${pointer.locale}/${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.quote}`;
+  return `${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.component ?? ""}/${pointer.file ?? ""}:${pointer.line ?? ""}/${pointer.quote}`;
 }
 
 function pointerLabel(pointer: ChatPointer): string {
   const quote = pointer.quote.replace(/\s+/g, " ").trim();
   const short = quote.length > 42 ? `${quote.slice(0, 41)}…` : quote;
-  if (pointer.blockType && short) return `${pointer.blockType} · “${short}”`;
-  if (pointer.blockType) return pointer.blockType;
-  return short ? `“${short}”` : "element";
+  const kind = pointer.blockType || pointer.component;
+  const file = pointer.file
+    ? `${pointer.file}${pointer.line ? `:${pointer.line}` : ""}`
+    : "";
+  const parts = [kind && short ? `${kind} · “${short}”` : kind || (short ? `“${short}”` : "element")];
+  if (file) parts.push(file);
+  return parts.join(" · ");
 }
 
 function pointerChipLabel(pointer: ChatPointer): string {
   const quote = pointer.quote.replace(/\s+/g, " ").trim();
-  const raw = quote || pointer.blockType || `${pointer.type}/${pointer.slug}`;
+  const raw = quote || pointer.component || pointer.blockType || `${pointer.type}/${pointer.slug}`;
   return raw.length > 32 ? `${raw.slice(0, 31)}…` : raw;
 }
 

package/src/chat/ThreadHistory.tsx

@@ -21,7 +21,7 @@ export function ThreadHistory() {
 
   useEffect(() => {
     let cancelled = false;
-    fetchThreads(ui.workspaceId)
+    fetchThreads(ui.workspaceId, ui.codeSessionId ?? undefined)
       .then((res) => {
         if (!cancelled) setThreads(res.threads);
       })
@@ -31,7 +31,7 @@ export function ThreadHistory() {
     return () => {
       cancelled = true;
     };
-  }, [ui.workspaceId, ui.threadsVersion]);
+  }, [ui.workspaceId, ui.codeSessionId, ui.threadsVersion]);
 
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -110,7 +110,7 @@ export function ThreadHistory() {
                 >
                   <button
                     type="button"
-                    onClick={() => ui.openThread(t.id)}
+                    onClick={() => ui.openThread(t)}
                     {...stylex.props(styles.rowBtn)}
                   >
                     <span {...stylex.props(styles.title)}>{t.title || "New chat"}</span>