@hienlh/ppm 0.23.7 → 0.23.8

package/src/web/components/chat/session-list-panel.tsx

@@ -8,11 +8,14 @@ import { SessionContextMenu } from "./session-context-menu";
 import { ProviderBadge } from "./provider-selector";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
-import { compareSessionsByActivity, type SessionInfo, type ProjectTag } from "../../../types/chat";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore, EMPTY_SESSIONS, commitOptimistic } from "@/stores/session-list-store";
+import { useProjectRef } from "@/stores/session-list-sync-triggers";
+import { SessionListSyncIndicator } from "./session-list-sync-indicator";
+import type { SessionInfo, ProjectTag } from "../../../types/chat";
 
 const MAX_RECENT_SESSIONS = 5;
 const FETCH_SESSIONS_LIMIT = 20;
-const recentSessionsCache = new Map<string, SessionInfo[]>();
 
 interface SessionListPanelProps {
   projectName: string | undefined;
@@ -25,72 +28,66 @@ export function SessionListPanel({ projectName, onSelectSession, className }: Se
 }
 
 function ProjectSessionListPanel({ projectName, onSelectSession, className }: SessionListPanelProps) {
-  const [sessions, setSessions] = useState<SessionInfo[]>(() => projectName ? recentSessionsCache.get(projectName) ?? [] : []);
-  const [ready, setReady] = useState(false);
+  const project = useProjectRef(projectName);
+  const id = project ? projectCacheId(project) : null;
+
+  // Cached rows render on the first frame; the store syncs in the background
+  // (deduplicated with every other reader of this project).
+  useEffect(() => {
+    if (project) void useSessionListStore.getState().ensure(project);
+  }, [project]);
+  const storeSessions = useSessionListStore((s) => (id ? s.byProject[id]?.sessions : undefined) ?? EMPTY_SESSIONS);
+
+  const [searchResults, setSearchResults] = useState<SessionInfo[] | null>(null);
   const requestRef = useRef(0);
   const [showAll, setShowAll] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const debouncedSearch = useDebouncedValue(searchQuery, 300);
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
-  const { projectTags, tagCounts, loadTags } = useProjectTags(ready ? projectName : undefined);
+  const { projectTags, tagCounts, loadTags } = useProjectTags(projectName);
 
+  // Server-side title search runs on its own request — the shared store only
+  // ever holds the unfiltered first page.
   useEffect(() => {
-    const timer = setTimeout(() => setReady(true), 500);
-    return () => { clearTimeout(timer); ++requestRef.current; };
-  }, []);
-
-  const loadSessions = useCallback(async (query?: string) => {
-    if (!projectName) return;
+    if (!projectName || !debouncedSearch) { setSearchResults(null); return; }
     const request = ++requestRef.current;
-    try {
-      const params = new URLSearchParams({ limit: String(FETCH_SESSIONS_LIMIT) });
-      if (query) params.set("q", query);
-      const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?${params}`);
-      if (request !== requestRef.current) return;
-      const next = data.sessions.slice(0, FETCH_SESSIONS_LIMIT);
-      if (!query) recentSessionsCache.set(projectName, next);
-      setSessions(next);
-    } catch {
-      // silently ignore
-    }
-  }, [projectName]);
-
-  // One delayed initial read, then server-side search. Keep cached rows visible.
-  useEffect(() => {
-    if (!ready) return;
-    loadSessions(debouncedSearch || undefined);
+    (async () => {
+      try {
+        const params = new URLSearchParams({ limit: String(FETCH_SESSIONS_LIMIT), q: debouncedSearch });
+        const data = await api.get<{ sessions: SessionInfo[]; hasMore: boolean }>(`${projectUrl(projectName)}/chat/sessions?${params}`);
+        if (request !== requestRef.current) return;
+        setSearchResults(data.sessions.slice(0, FETCH_SESSIONS_LIMIT));
+      } catch {
+        // silently ignore
+      }
+    })();
     return () => { ++requestRef.current; };
-  }, [ready, debouncedSearch, loadSessions]);
+  }, [projectName, debouncedSearch]);
+
+  const sessions = searchResults ?? storeSessions.slice(0, FETCH_SESSIONS_LIMIT);
 
   const togglePin = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
     e.stopPropagation();
-    if (!projectName) return;
-    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
-    try {
-      if (session.pinned) {
-        await api.del(url);
-      } else {
-        await api.put(url);
-      }
-      const cached = recentSessionsCache.get(projectName);
-      if (cached) recentSessionsCache.set(projectName, cached.map((s) => s.id === session.id ? { ...s, pinned: !session.pinned } : s).sort(compareSessionsByActivity));
-      setSessions((prev) => {
-        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort(compareSessionsByActivity);
-      });
-    } catch {
-      // silently ignore
-    }
-  }, [projectName]);
+    if (!project) return;
+    const url = `${projectUrl(project.name)}/chat/sessions/${session.id}/pin`;
+    const nextPinned = !session.pinned;
+    const pinIn = (pinned: boolean) => setSearchResults((prev) =>
+      prev ? prev.map((s) => s.id === session.id ? { ...s, pinned } : s) : prev);
+    // Optimistic; a refused change re-syncs the store (`commitOptimistic`) and puts the
+    // search page's row back as it was.
+    useSessionListStore.getState().setPinned(project, session.id, nextPinned);
+    pinIn(nextPinned);
+    const ok = await commitOptimistic(project, () => (nextPinned ? api.put(url) : api.del(url)));
+    if (!ok) pinIn(!nextPinned);
+  }, [project]);
 
   const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
-    const cached = projectName ? recentSessionsCache.get(projectName) : undefined;
-    if (cached && projectName) recentSessionsCache.set(projectName, cached.map((s) => s.id === sid ? { ...s, tag } : s));
-    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
+    if (project) useSessionListStore.getState().setSessionTag(project, sid, tag);
+    setSearchResults((prev) => prev ? prev.map((s) => s.id === sid ? { ...s, tag } : s) : prev);
     loadTags();
-  }, [loadTags, projectName]);
+  }, [loadTags, project]);
 
-  // Tag filter is client-side; search is now server-side via ?q=
+  // Tag filter is client-side; search is server-side via ?q=
   const filtered = selectedTagId !== null
     ? sessions.filter((s) => s.tag?.id === selectedTagId)
     : sessions;
@@ -136,7 +133,10 @@ function ProjectSessionListPanel({ projectName, onSelectSession, className }: Se
 
       {recentSessions.length > 0 && (
         <div className="flex flex-col gap-2 w-full mt-4">
-          <p className="text-xs text-text-subtle text-center">Recent chats</p>
+          <p className="text-xs text-text-subtle text-center">
+            Recent chats
+            {project && <SessionListSyncIndicator project={project} className="ml-1.5" />}
+          </p>
           <div className="w-full rounded-md border border-border bg-surface overflow-hidden">
             {recentSessions.map((s) => (
               <SessionRow key={s.id} session={s} projectName={projectName} projectTags={projectTags} onSelect={onSelectSession} onTogglePin={togglePin} onTagChanged={handleTagChanged} />

package/src/web/components/chat/session-list-sync-indicator.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { RefreshCw } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { projectCacheId, type ProjectCacheRef } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore } from "@/stores/session-list-store";
+
+/** Once shown, stays up for at least this long — a sync that finishes almost
+ * instantly must not blink the icon on and off. */
+const MIN_VISIBLE_MS = 300;
+/** How long the offline note stays up after a failed sync, before it goes
+ * back to hidden on its own — never a blocking error. */
+const ERROR_VISIBLE_MS = 4000;
+
+interface SessionListSyncIndicatorProps {
+  project: ProjectCacheRef;
+  className?: string;
+}
+
+/**
+ * Read-only "Syncing…" while the shared session store refreshes in the
+ * background, so users know a cached list is being refreshed — never an
+ * action, so it carries no tap target and sits outside the thumb zone
+ * (design-guidelines §2, §9).
+ */
+export function SessionListSyncIndicator({ project, className }: SessionListSyncIndicatorProps) {
+  const id = projectCacheId(project);
+  const isSyncing = useSessionListStore((s) => s.byProject[id]?.isSyncing ?? false);
+  const lastSyncError = useSessionListStore((s) => s.byProject[id]?.lastSyncError ?? null);
+
+  const [visible, setVisible] = useState(false);
+  const shownAt = useRef<number | null>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (isSyncing) {
+      if (hideTimer.current) { clearTimeout(hideTimer.current); hideTimer.current = null; }
+      shownAt.current = Date.now();
+      setVisible(true);
+      return;
+    }
+    if (!visible) return;
+    const elapsed = shownAt.current ? Date.now() - shownAt.current : MIN_VISIBLE_MS;
+    const remaining = Math.max(0, MIN_VISIBLE_MS - elapsed);
+    hideTimer.current = setTimeout(() => { setVisible(false); shownAt.current = null; }, remaining);
+    return () => { if (hideTimer.current) clearTimeout(hideTimer.current); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSyncing]);
+
+  const [showError, setShowError] = useState(false);
+  const lastShownError = useRef<string | null>(null);
+  useEffect(() => {
+    if (!lastSyncError) { lastShownError.current = null; return; }
+    if (lastSyncError === lastShownError.current) return;
+    lastShownError.current = lastSyncError;
+    setShowError(true);
+    const t = setTimeout(() => setShowError(false), ERROR_VISIBLE_MS);
+    return () => clearTimeout(t);
+  }, [lastSyncError]);
+
+  if (!visible && !showError) return null;
+
+  return (
+    <span role="status" aria-live="polite" className={cn("inline-flex items-center gap-1 text-xs text-text-dim", className)}>
+      {visible ? (
+        <>
+          <RefreshCw className="size-3 animate-spin motion-reduce:animate-none" aria-hidden="true" />
+          Syncing…
+        </>
+      ) : (
+        "Offline — showing saved list"
+      )}
+    </span>
+  );
+}

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,6 +1,10 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
 import { Sparkles, Terminal, Zap, Bot, RefreshCw, Clock } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { clearSlashItemsCache } from "@/lib/slash-items-cache";
+import { idbDelete } from "@/lib/browser-cache/idb-keyval-cache";
+import { projectCacheId, slash as slashKey } from "@/lib/browser-cache/cache-keys";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 import { searchFuzzy } from "../../../shared/fuzzy-search";
 
 export interface SlashItem {
@@ -136,6 +140,10 @@ export function SlashCommandPicker({
     api.del(`${projectUrl(projectName)}/chat/slash-items/cache`)
       .then(() => {
         // Trigger re-fetch by dispatching custom event (MessageInput listens on projectName)
+        clearSlashItemsCache(projectName);
+        // The default provider's IndexedDB entry (what a project hydrates on the next
+        // load) would otherwise keep serving the stale list until its TTL admits a fetch.
+        void idbDelete(slashKey(projectCacheId(projectRefForName(projectName)), "claude"));
         window.dispatchEvent(new CustomEvent("ppm:slash-items-refresh"));
       })
       .finally(() => setRefreshing(false));

package/src/web/components/chat/tag-filter-chips.tsx

@@ -1,26 +1,27 @@
-import { useState, useEffect, useCallback } from "react";
-import { api, projectUrl } from "@/lib/api-client";
+import { useCallback, useEffect } from "react";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore } from "@/stores/session-list-store";
+import { useProjectRef } from "@/stores/session-list-sync-triggers";
 import type { ProjectTag } from "../../../types/chat";
 
-/** Fetch project tags + counts; returns state for filter chips */
+/** Project tags + counts from the shared session-list store — every reader
+ * (welcome panel, tab bar, mobile nav) shares the one synced copy instead of
+ * fetching its own. */
 export function useProjectTags(projectName: string | undefined) {
-  const [projectTags, setProjectTags] = useState<ProjectTag[]>([]);
-  const [tagCounts, setTagCounts] = useState<Record<number, number>>({});
+  const project = useProjectRef(projectName);
+  const id = project ? projectCacheId(project) : null;
 
-  const loadTags = useCallback(async () => {
-    if (!projectName) return;
-    try {
-      const data = await api.get<{ tags: ProjectTag[]; counts: Record<number, number> }>(
-        `${projectUrl(projectName)}/tags`,
-      );
-      setProjectTags(data.tags);
-      setTagCounts(data.counts);
-    } catch { /* silent */ }
-  }, [projectName]);
+  useEffect(() => {
+    if (project) void useSessionListStore.getState().ensure(project);
+  }, [project]);
 
-  useEffect(() => { loadTags(); }, [loadTags]);
+  const tagsState = useSessionListStore((s) => (id ? s.byProject[id]?.tags : null) ?? null);
 
-  return { projectTags, tagCounts, loadTags };
+  const loadTags = useCallback(() => {
+    if (project) void useSessionListStore.getState().refreshTags(project);
+  }, [project]);
+
+  return { projectTags: tagsState?.tags ?? [], tagCounts: tagsState?.counts ?? {}, loadTags };
 }
 
 /** Horizontal chip bar for filtering sessions by tag */

package/src/web/components/layout/mobile-nav.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 import {
   Terminal, Menu, X, Layers, Plus,
   Copy, Download, Pencil, Trash2, Columns2, Circle, Tag, Check, XSquare, ChevronsRight, ChevronUp,
@@ -21,6 +21,8 @@ import { useNotificationStore } from "@/stores/notification-store";
 import { downloadFile } from "@/lib/file-download";
 import { FileActions } from "@/components/explorer/file-actions";
 import { api, projectUrl } from "@/lib/api-client";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore, EMPTY_SESSIONS, commitOptimistic } from "@/stores/session-list-store";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { useVisualViewport } from "@/hooks/use-visual-viewport";
 import { useIsMobile } from "@/hooks/use-is-mobile";
@@ -91,7 +93,6 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const activeTabId = (activeGridPanelId ? panels[activeGridPanelId]?.activeTabId : null) ?? null;
   const notifications = useNotificationStore((s) => s.notifications);
   const compareSelection = useCompareStore((s) => s.selection);
-  const [sessionTagMap, setSessionTagMap] = useState<Record<string, { id: number; name: string; color: string }>>({});
 
   const [menuTabId, setMenuTabId] = useState<string | null>(null);
   const [tabSheetOpen, setTabSheetOpen] = useState(false);
@@ -222,32 +223,23 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const { projectTags, loadTags } = useProjectTags(activeProject?.name);
   const assignTagToSession = useCallback(async (sessionId: string, tagId: number | null) => {
     if (!activeProject?.name) return;
-    try {
-      if (tagId !== null) {
-        await api.patch(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`, { tagId });
-        const tag = projectTags.find((t) => t.id === tagId);
-        if (tag) setSessionTagMap((prev) => ({ ...prev, [sessionId]: { id: tag.id, name: tag.name, color: tag.color } }));
-      } else {
-        await api.del(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`);
-        setSessionTagMap((prev) => { const n = { ...prev }; delete n[sessionId]; return n; });
-      }
-      loadTags();
-    } catch { /* silent */ }
+    const ref = { name: activeProject.name, path: activeProject.path };
+    const tag = tagId !== null ? projectTags.find((t) => t.id === tagId) : undefined;
+    if (tagId !== null && !tag) { setMenuTabId(null); return; }
+    // Optimistic; a refused change re-syncs the store (`commitOptimistic`).
+    useSessionListStore.getState().setSessionTag(ref, sessionId, tag ? { id: tag.id, name: tag.name, color: tag.color } : null);
     setMenuTabId(null);
-  }, [activeProject?.name, projectTags, loadTags]);
-
-  // Session tag map — same fetch pattern as desktop tab-bar so mobile tabs can show tag bar
-  const chatSessionIds = tabs.map(tabSessionId).filter((id): id is string => !!id);
-  useEffect(() => {
-    if (!activeProject?.name || chatSessionIds.length === 0) return;
-    api.get<{ sessions: { id: string; tag?: { id: number; name: string; color: string } | null }[] }>(
-      `${projectUrl(activeProject.name)}/chat/sessions?limit=50`,
-    ).then((data) => {
-      const map: Record<string, { id: number; name: string; color: string }> = {};
-      for (const s of data.sessions) { if (s.tag) map[s.id] = s.tag; }
-      setSessionTagMap(map);
-    }).catch(() => {});
-  }, [activeProject?.name, chatSessionIds.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+    const url = `${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`;
+    await commitOptimistic(ref, () => (tagId !== null ? api.patch(url, { tagId }) : api.del(url)));
+    loadTags();
+  }, [activeProject, projectTags, loadTags]);
+
+  // Session→tag map derived from the shared store — same source the desktop
+  // tab bar, sidebar and welcome screen read, so no separate fetch here.
+  const sessionListId = activeProject ? projectCacheId(activeProject) : null;
+  const storeSessions = useSessionListStore((s) => (sessionListId ? s.byProject[sessionListId]?.sessions : undefined) ?? EMPTY_SESSIONS);
+  const sessionTagMap: Record<string, { id: number; name: string; color: string }> = {};
+  for (const s of storeSessions) { if (s.tag) sessionTagMap[s.id] = s.tag; }
   const ordered = resolveOrder(projects, customOrder ?? null);
   const allNames = ordered.map((p) => p.name);
   const activeIdx = ordered.findIndex((p) => p.name === activeProject?.name);

package/src/web/components/layout/tab-bar.tsx

@@ -29,6 +29,8 @@ import { useTouchTabDrag, wasTouchDragRecent } from "@/hooks/use-touch-tab-drag"
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { api, projectUrl } from "@/lib/api-client";
 import { useProjectTags } from "@/components/chat/tag-filter-chips";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore, EMPTY_SESSIONS, commitOptimistic } from "@/stores/session-list-store";
 import {
   ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,
   ContextMenuItem, ContextMenuSeparator,
@@ -81,35 +83,25 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
     useTouchTabDrag(effectivePanelId);
 
   const { projectTags, loadTags } = useProjectTags(activeProject?.name);
-  const [sessionTagMap, setSessionTagMap] = useState<Record<string, { id: number; name: string; color: string }>>({});
-
-  // Fetch session tags for open chat tabs
-  const chatSessionIds = tabs.map(tabSessionId).filter((id): id is string => !!id);
-  useEffect(() => {
-    if (!activeProject?.name || chatSessionIds.length === 0) return;
-    api.get<{ sessions: { id: string; tag?: { id: number; name: string; color: string } | null }[] }>(
-      `${projectUrl(activeProject.name)}/chat/sessions?limit=50`,
-    ).then((data) => {
-      const map: Record<string, { id: number; name: string; color: string }> = {};
-      for (const s of data.sessions) { if (s.tag) map[s.id] = s.tag; }
-      setSessionTagMap(map);
-    }).catch(() => {});
-  }, [activeProject?.name, chatSessionIds.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Session→tag map is derived straight from the shared store — the same
+  // sessions the sidebar and welcome screen already synced, so opening chat
+  // tabs no longer costs the tab bar its own `/chat/sessions` request.
+  const sessionListId = activeProject ? projectCacheId(activeProject) : null;
+  const storeSessions = useSessionListStore((s) => (sessionListId ? s.byProject[sessionListId]?.sessions : undefined) ?? EMPTY_SESSIONS);
+  const sessionTagMap: Record<string, { id: number; name: string; color: string }> = {};
+  for (const s of storeSessions) { if (s.tag) sessionTagMap[s.id] = s.tag; }
 
   const assignTagToSession = useCallback(async (sessionId: string, tagId: number | null) => {
     if (!activeProject?.name) return;
-    try {
-      if (tagId !== null) {
-        await api.patch(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`, { tagId });
-        const tag = projectTags.find((t) => t.id === tagId);
-        if (tag) setSessionTagMap((prev) => ({ ...prev, [sessionId]: { id: tag.id, name: tag.name, color: tag.color } }));
-      } else {
-        await api.del(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`);
-        setSessionTagMap((prev) => { const n = { ...prev }; delete n[sessionId]; return n; });
-      }
-      loadTags();
-    } catch { /* silent */ }
-  }, [activeProject?.name, projectTags, loadTags]);
+    const ref = { name: activeProject.name, path: activeProject.path };
+    const tag = tagId !== null ? projectTags.find((t) => t.id === tagId) : undefined;
+    if (tagId !== null && !tag) return;
+    // Optimistic; a refused change re-syncs the store (`commitOptimistic`).
+    useSessionListStore.getState().setSessionTag(ref, sessionId, tag ? { id: tag.id, name: tag.name, color: tag.color } : null);
+    const url = `${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`;
+    await commitOptimistic(ref, () => (tagId !== null ? api.patch(url, { tagId }) : api.del(url)));
+    loadTags();
+  }, [activeProject, projectTags, loadTags]);
 
   const notifications = useNotificationStore((s) => s.notifications);
   const streamingSessions = useStreamingStore((s) => s.sessions);

package/src/web/components/settings/tag-settings-section.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect, useCallback } from "react";
 import { Plus, Trash2, Pencil, Check, X, RotateCcw } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { useSessionListStore, commitOptimistic } from "@/stores/session-list-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 import type { ProjectTag } from "../../../types/chat";
 
 interface TagSettingsSectionProps {
@@ -32,6 +34,13 @@ export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSe
 
   useEffect(() => { loadTags(); }, [loadTags]);
 
+  // The shared session-list store keeps its own copy of the project's tags
+  // (read by the sidebar, welcome screen, tab bar and mobile nav), so every
+  // CRUD action here re-syncs it in addition to this panel's own `loadTags`.
+  const refreshStoreTags = useCallback(() => {
+    void useSessionListStore.getState().refreshTags(projectRefForName(projectName));
+  }, [projectName]);
+
   const handleCreate = async () => {
     if (!newName.trim()) return;
     try {
@@ -39,6 +48,7 @@ export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSe
       setNewName("");
       setShowAdd(false);
       loadTags();
+      refreshStoreTags();
       onTagsChanged?.();
     } catch { /* silent */ }
   };
@@ -48,17 +58,21 @@ export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSe
       await api.patch(`${baseUrl}/${id}`, { name: editName.trim() || undefined, color: editColor || undefined });
       setEditingId(null);
       loadTags();
+      refreshStoreTags();
       onTagsChanged?.();
     } catch { /* silent */ }
   };
 
   const handleDelete = async (id: number, name: string) => {
     if (!window.confirm(`Delete tag "${name}"? Sessions with this tag will become untagged.`)) return;
-    try {
-      await api.del(`${baseUrl}/${id}`);
-      loadTags();
-      onTagsChanged?.();
-    } catch { /* silent */ }
+    const ref = projectRefForName(projectName);
+    // Optimistic: the rows lose the tag's chip now. A refused delete re-syncs the store
+    // (`commitOptimistic`), and the tag list below is re-read either way.
+    useSessionListStore.getState().onTagDeleted(ref, id);
+    await commitOptimistic(ref, () => api.del(`${baseUrl}/${id}`));
+    loadTags();
+    refreshStoreTags();
+    onTagsChanged?.();
   };
 
   const handleSetDefault = async (tagId: number) => {
@@ -66,6 +80,7 @@ export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSe
     try {
       await api.patch(`${baseUrl}/default-tag`, { tagId: newId });
       setDefaultTagId(newId);
+      refreshStoreTags();
     } catch { /* silent */ }
   };
 
@@ -73,6 +88,7 @@ export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSe
     try {
       await api.post(`${baseUrl}/reset`, {});
       loadTags();
+      refreshStoreTags();
       onTagsChanged?.();
     } catch { /* silent */ }
   };

package/src/web/hooks/use-chat-account-claim.ts

@@ -1,7 +1,22 @@
 import { useCallback, useEffect, useRef } from "react";
 import { pickAccountForTab, type PickedAccount } from "@/lib/api-settings";
-import { usePanelStore } from "@/stores/panel-store";
-import { patchTabMetadata } from "@/lib/patch-tab-metadata";
+import { getPrepare, prepareFoundNoAccount } from "@/lib/new-chat-prepare-client";
+import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
+
+/**
+ * Writes a claimed account into a tab's metadata, unless something else already claims
+ * it for this provider, the tab already has a session, or the tab's provider moved on.
+ * Pure and side-effect-scoped to the store (not a hook), so `/chat/prepare`'s own fan-out
+ * can apply the pick it made server-side the same way a client-driven claim would.
+ */
+export function applyAccountClaim(tabId: string, provider: string, picked: PickedAccount | null): PickedAccount | null {
+  const current = currentTabMetadata(tabId);
+  if (picked && current && !current.sessionId && (!current.pickedAccountId || current.pickedAccountProvider !== provider)
+    && (current.providerPending || current.providerId === provider)) {
+    patchTabMetadata(tabId, { pickedAccountId: picked.id, pickedAccountLabel: picked.label, pickedAccountProvider: provider });
+  }
+  return picked;
+}
 
 /** One claim per tab/provider, shared by background preparation and an early send. */
 export function useChatAccountClaim(tabId: string | undefined, providerId: string, enabled: boolean) {
@@ -10,24 +25,33 @@ export function useChatAccountClaim(tabId: string | undefined, providerId: strin
   useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
   const claim = useCallback((provider: string): Promise<PickedAccount | null> => {
     if (!tabId) return Promise.resolve(null);
-    const metadata = usePanelStore.getState().getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
+    const metadata = currentTabMetadata(tabId);
     if (metadata?.pickedAccountProvider === provider && typeof metadata.pickedAccountId === "string") {
       return Promise.resolve({ id: metadata.pickedAccountId, label: typeof metadata.pickedAccountLabel === "string" ? metadata.pickedAccountLabel : null });
     }
-    const applyClaim = (picked: PickedAccount | null) => {
-      const current = usePanelStore.getState().getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId)?.metadata;
-      if (picked && mounted.current && current && !current.sessionId && (!current.pickedAccountId || current.pickedAccountProvider !== provider)
-        && (current.providerPending || current.providerId === provider)) {
-        patchTabMetadata(tabId, { pickedAccountId: picked.id, pickedAccountLabel: picked.label, pickedAccountProvider: provider });
-      }
-      return picked;
-    };
+    // Prepare already asked the server for this provider and heard "nothing usable". That
+    // answer stands for the tab; only a pick that timed out is worth asking for again.
+    if (prepareFoundNoAccount(tabId, provider)) return Promise.resolve(null);
+    const applyClaim = (picked: PickedAccount | null) => (mounted.current ? applyAccountClaim(tabId, provider, picked) : picked);
     const existing = claims.current.get(provider);
     if (existing) return existing.then(applyClaim);
-    const promise = pickAccountForTab(provider, AbortSignal.timeout(30_000)).then(applyClaim).catch((error) => {
-      if (claims.current.get(provider) === promise) claims.current.delete(provider);
-      throw error;
-    });
+    // A prepare already in flight for this tab may pick this very account server-side —
+    // join it first, so a fast send does not double-pick against the same round-robin.
+    const prepare = getPrepare(tabId);
+    const promise = (prepare ? prepare.catch(() => null) : Promise.resolve(null))
+      .then((): Promise<PickedAccount | null> | PickedAccount | null => {
+        const now = currentTabMetadata(tabId);
+        if (now?.pickedAccountProvider === provider && typeof now.pickedAccountId === "string") {
+          return { id: now.pickedAccountId, label: typeof now.pickedAccountLabel === "string" ? now.pickedAccountLabel : null };
+        }
+        if (prepareFoundNoAccount(tabId, provider)) return null;
+        return pickAccountForTab(provider, AbortSignal.timeout(30_000));
+      })
+      .then(applyClaim)
+      .catch((error) => {
+        if (claims.current.get(provider) === promise) claims.current.delete(provider);
+        throw error;
+      });
     claims.current.set(provider, promise);
     return promise;
   }, [tabId]);

package/src/web/hooks/use-chat.ts

@@ -14,6 +14,8 @@ import type { PromptCacheState } from "../../shared/prompt-cache-idle";
 import { prefixTokens } from "../../shared/turn-usage";
 import type { ChatWsServerMessage, SessionPhase, BackgroundShell, VersionGroup } from "../../types/api";
 import { useBackgroundOutputStore } from "../stores/background-output-store";
+import { useSessionListStore } from "@/stores/session-list-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 
 interface ApprovalRequest {
   requestId: string;
@@ -1262,9 +1264,18 @@ export function useChat(
           });
           historyLoadedAtRef.current = Date.now();
         })
-        .catch(() => {
+        .catch((err) => {
           if (!cancelled && historyReconciledRef.current === historyReconciled) {
             setMessages((prev) => prev.filter((m) => !staleIds.has(m.id)));
+            // Another device deleted this session between opening the tab and
+            // this fetch resolving — drop the now-stale row from every shared
+            // history list instead of leaving it clickable to a 404. Only a real
+            // 404 counts: a message that merely says "not found" ("Provider …
+            // not found") is some other failure, and must not drop a live row.
+            // (Read by shape, not `instanceof ApiError`: the status is all that matters.)
+            if ((err as { status?: unknown } | null)?.status === 404 && projectName) {
+              useSessionListStore.getState().removeSession(projectRefForName(projectName), sessionId);
+            }
           }
         })
         .finally(() => {