Studio: Fix empty chat threads on navigation and stabilize new chat flow

studio/frontend/src/features/chat/chat-page.tsx

@@ -225,6 +225,7 @@ const LoraCompareContent = memo(function LoraCompareContent({
                 modelType="base"
                 pairId={pairId}
                 initialThreadId={baseThreadId}
+                syncActiveThreadId={false}
               >
                 <RegisterCompareHandle name="base" />
                 <Thread hideComposer={true} hideWelcome={true} />
@@ -242,6 +243,7 @@ const LoraCompareContent = memo(function LoraCompareContent({
                 modelType="lora"
                 pairId={pairId}
                 initialThreadId={loraThreadId}
+                syncActiveThreadId={false}
               >
                 <RegisterCompareHandle name="lora" />
                 <Thread hideComposer={true} hideWelcome={true} />
@@ -343,6 +345,7 @@ const GeneralCompareContent = memo(function GeneralCompareContent({
                 modelType="model1"
                 pairId={pairId}
                 initialThreadId={model1ThreadId}
+                syncActiveThreadId={false}
               >
                 <RegisterCompareHandle name="model1" />
                 <Thread hideComposer={true} hideWelcome={true} />
@@ -376,6 +379,7 @@ const GeneralCompareContent = memo(function GeneralCompareContent({
                 modelType="model2"
                 pairId={pairId}
                 initialThreadId={model2ThreadId}
+                syncActiveThreadId={false}
               >
                 <RegisterCompareHandle name="model2" />
                 <Thread hideComposer={true} hideWelcome={true} />
@@ -479,11 +483,19 @@ function TopBarActions({
   );
 }
 
+function getInitialSingleChatView(): ChatView {
+  const id = useChatRuntimeStore.getState().activeThreadId;
+  if (typeof id === "string" && id.length > 0 && !id.startsWith("__LOCALID_")) {
+    return { mode: "single", threadId: id };
+  }
+  return { mode: "single" };
+}
+
 export function ChatPage(): ReactElement {
-  const [view, setView] = useState<ChatView>({
-    mode: "single",
-    newThreadNonce: crypto.randomUUID(),
-  });
+  // Do not set newThreadNonce here: each /chat mount would run ThreadNewChatSwitch
+  // and create spurious threads when navigating (e.g. Recipes / Export). New Chat
+  // explicitly sets a nonce in handleNewThread.
+  const [view, setView] = useState<ChatView>(getInitialSingleChatView);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
   const [modelSelectorLocked, setModelSelectorLocked] = useState(false);
@@ -587,9 +599,31 @@ export function ChatPage(): ReactElement {
     void ejectModel();
   }, [ejectModel]);
   const handleNewThread = useCallback(() => {
-    useChatRuntimeStore.getState().setActiveThreadId(null);
-    setView({ mode: "single", newThreadNonce: crypto.randomUUID() });
-  }, []);
+    void (async () => {
+      if (view.mode === "single") {
+        const currentThreadId = view.threadId ?? activeThreadId;
+        if (!currentThreadId) {
+          useChatRuntimeStore.getState().setActiveThreadId(null);
+          setView({ mode: "single", newThreadNonce: crypto.randomUUID() });
+          return;
+        }
+        try {
+          const messageCount = await db.messages
+            .where("threadId")
+            .equals(currentThreadId)
+            .limit(1)
+            .count();
+          if (messageCount === 0) {
+            return;
+          }
+        } catch {
+          // allow explicit new chat if Dexie fails
+        }
+      }
+      useChatRuntimeStore.getState().setActiveThreadId(null);
+      setView({ mode: "single", newThreadNonce: crypto.randomUUID() });
+    })();
+  }, [activeThreadId, view]);
   const handleNewCompare = useCallback(() => {
     setView({ mode: "compare", pairId: crypto.randomUUID() });
     // Clear activeThreadId so compare panes do not inherit the single-chat

studio/frontend/src/features/chat/runtime-provider.tsx

@@ -658,7 +658,11 @@ function useRuntimeHook(): ReturnType<typeof useLocalRuntime> {
 
 function ThreadAutoSwitch({
   threadId,
-}: { threadId: string }): ReactElement | null {
+  syncActiveThreadId = true,
+}: {
+  threadId: string;
+  syncActiveThreadId?: boolean;
+}): ReactElement | null {
   const aui = useAui();
   const isLoading = useAuiState(({ threads }) => threads.isLoading);
   const mainThreadId = useAuiState(({ threads }) => threads.mainThreadId);
@@ -669,6 +673,13 @@ function ThreadAutoSwitch({
     }
   }, [aui, isLoading, mainThreadId, threadId]);
 
+  useEffect(() => {
+    if (!syncActiveThreadId || isLoading || mainThreadId !== threadId) {
+      return;
+    }
+    useChatRuntimeStore.getState().setActiveThreadId(threadId);
+  }, [isLoading, mainThreadId, syncActiveThreadId, threadId]);
+
   return null;
 }
 
@@ -683,29 +694,13 @@ function ThreadNewChatSwitch({
       return;
     }
 
-    let cancelled = false;
     // Clear immediately so the adapter never picks up a stale thread ID
-    // from a previous chat while we initialize the new one.
+    // from a previous chat. Do not call initialize() here — that persisted an
+    // empty "New Chat" row on every New Chat click. Persistence runs on first
+    // real message append (history.append → threadListItem.initialize).
     useChatRuntimeStore.getState().setActiveThreadId(null);
 
-    void (async () => {
-      try {
-        aui.threads().switchToNewThread();
-        const { remoteId } = await aui.threadListItem().initialize();
-        if (!cancelled) {
-          useChatRuntimeStore.getState().setActiveThreadId(remoteId);
-        }
-      } catch (error) {
-        if (!cancelled) {
-          useChatRuntimeStore.getState().setActiveThreadId(null);
-        }
-        console.error("Failed to initialize new chat thread", error);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
+    void aui.threads().switchToNewThread();
   }, [aui, isLoading, nonce]);
 
   return null;
@@ -733,12 +728,14 @@ export function ChatRuntimeProvider({
   pairId,
   initialThreadId,
   newThreadNonce,
+  syncActiveThreadId = true,
 }: {
   children: ReactNode;
   modelType?: ModelType;
   pairId?: string;
   initialThreadId?: string;
   newThreadNonce?: string;
+  syncActiveThreadId?: boolean;
 }): ReactElement {
   const runtime = useRemoteThreadListRuntime({
     runtimeHook: useRuntimeHook,
@@ -754,8 +751,15 @@ export function ChatRuntimeProvider({
 
   return (
     <AssistantRuntimeProvider runtime={runtime} aui={aui}>
-      <ActiveThreadSync enabled={modelType === "base" && !pairId && !newThreadNonce} />
-      {initialThreadId && <ThreadAutoSwitch threadId={initialThreadId} />}
+      <ActiveThreadSync
+        enabled={modelType === "base" && !pairId && !newThreadNonce && !initialThreadId}
+      />
+      {initialThreadId && (
+        <ThreadAutoSwitch
+          threadId={initialThreadId}
+          syncActiveThreadId={syncActiveThreadId}
+        />
+      )}
       {!initialThreadId && newThreadNonce && (
         <ThreadNewChatSwitch nonce={newThreadNonce} />
       )}

studio/frontend/src/features/chat/thread-sidebar.tsx

@@ -77,7 +77,10 @@ export function ThreadSidebar({
   showCompare: boolean;
 }) {
   const allThreads = useLiveQuery(
-    () => db.threads.orderBy("createdAt").reverse().toArray(),
+    async () => {
+      const rows = await db.threads.orderBy("createdAt").reverse().toArray();
+      return rows.filter((t) => !t.archived);
+    },
     [],
   );
   const items = groupThreads(allThreads ?? []);