mulmoclaude 0.3.0 → 0.5.0

package/src/composables/useHealth.ts

@@ -1,38 +1,107 @@
 // Composable for the server /api/health probe.
 //
-// Owns two refs that the UI reads (gemini key availability + sandbox
-// toggle) plus the one-shot fetch that populates them on mount. On
-// fetch failure we assume Gemini is unavailable so dependent UI
+// Owns three refs that the UI reads (gemini key availability +
+// sandbox toggle + server CPU load ratio) plus a one-shot fetch
+// that populates them on mount, plus an optional periodic refresh
+// for the CPU ratio (the favicon's "overloaded" rule needs a live
+// signal, not a boot-time snapshot).
+//
+// On fetch failure we assume Gemini is unavailable so dependent UI
 // (e.g. the "generate image" plugin buttons) falls back gracefully
 // — the sandbox flag keeps its initial `true` so the lock indicator
-// doesn't momentarily flash "sandbox disabled" on a transient error.
+// doesn't momentarily flash "sandbox disabled" on a transient error,
+// and the CPU ratio goes to null so the favicon resolver skips the
+// overloaded rule rather than guessing.
 
-import { ref, type Ref } from "vue";
+import { computed, onScopeDispose, ref, type ComputedRef, type Ref } from "vue";
 import { API_ROUTES } from "../config/apiRoutes";
 import { apiGet } from "../utils/api";
 
+// Once every 15 s is enough for a sustained load spike to light the
+// favicon. Shorter would mostly flap on short-lived spikes that
+// aren't actually user-visible as lag.
+const HEALTH_REFRESH_MS = 15_000;
+
+interface CpuPayload {
+  load1?: unknown;
+  cores?: unknown;
+}
+
 interface HealthResponse {
   geminiAvailable?: unknown;
   sandboxEnabled?: unknown;
+  cpu?: CpuPayload;
 }
 
 export function useHealth(): {
   geminiAvailable: Ref<boolean>;
   sandboxEnabled: Ref<boolean>;
+  cpuLoadRatio: ComputedRef<number | null>;
   fetchHealth: () => Promise<void>;
 } {
   const geminiAvailable = ref(true);
   const sandboxEnabled = ref(true);
+  const cpuLoad1 = ref<number | null>(null);
+  const cpuCores = ref<number | null>(null);
+
+  // Separate flag so transient poll failures don't flip
+  // `geminiAvailable` back to false after a successful boot-time
+  // fetch. `geminiAvailable` / `sandboxEnabled` are config-derived
+  // and don't change at runtime — once we've observed them once,
+  // the next 15 s poll's network blip shouldn't mask them.
+  let bootFetchCompleted = false;
 
   async function fetchHealth(): Promise<void> {
     const result = await apiGet<HealthResponse>(API_ROUTES.health);
     if (!result.ok) {
-      geminiAvailable.value = false;
+      // Only the CPU figures get nulled — the favicon resolver
+      // reads null as "skip overloaded" which is the correct fail-
+      // closed behaviour. The config flags keep their last-known
+      // values, and stay at the initial defaults if we never
+      // succeeded (gemini=true → request lands, gets an auth error
+      // handled elsewhere; sandbox=true → lock indicator reads on).
+      cpuLoad1.value = null;
+      cpuCores.value = null;
+      if (!bootFetchCompleted) {
+        // On the FIRST fetch we do still flip gemini → false so
+        // the "Gemini key required" banner can show immediately
+        // without waiting for a second attempt. Subsequent poll
+        // failures don't re-enter this branch.
+        geminiAvailable.value = false;
+      }
       return;
     }
     geminiAvailable.value = !!result.data.geminiAvailable;
     sandboxEnabled.value = !!result.data.sandboxEnabled;
+    bootFetchCompleted = true;
+    const cpu = result.data.cpu;
+    if (cpu && typeof cpu.load1 === "number" && Number.isFinite(cpu.load1) && typeof cpu.cores === "number" && cpu.cores > 0) {
+      cpuLoad1.value = cpu.load1;
+      cpuCores.value = cpu.cores;
+    } else {
+      cpuLoad1.value = null;
+      cpuCores.value = null;
+    }
   }
 
-  return { geminiAvailable, sandboxEnabled, fetchHealth };
+  // Refresh the CPU figure periodically. The flag-style booleans
+  // (gemini / sandbox) don't change at runtime so re-fetching them
+  // is waste; but piggy-backing on the same endpoint keeps the
+  // server side to a single route and the client to a single poll.
+  const refreshHandle = window.setInterval(() => {
+    fetchHealth().catch(() => {
+      /* intentionally swallowed — a failed poll just stalls the
+         favicon's overloaded rule, not user-visible UI */
+    });
+  }, HEALTH_REFRESH_MS);
+  onScopeDispose(() => window.clearInterval(refreshHandle));
+
+  // Expose the normalised ratio the favicon resolver expects (load
+  // per logical core). Null when either component is missing.
+  const cpuLoadRatio = computed<number | null>(() => {
+    if (cpuLoad1.value === null || cpuCores.value === null) return null;
+    return cpuLoad1.value / cpuCores.value;
+  });
+
+  return { geminiAvailable, sandboxEnabled, cpuLoadRatio, fetchHealth };
 }

package/src/composables/useLayoutMode.ts

@@ -0,0 +1,27 @@
+// Layout preference (single vs. stack) for the /chat page, persisted
+// in localStorage. Independent of which page the user is on — pages
+// like Files/Todos/Wiki live in the router, not here.
+//
+// One-time cleanup: deletes the legacy `canvas_view_mode` key that
+// conflated layout with page navigation. The value is intentionally
+// not migrated — users land on "single" on first load after the
+// split.
+
+import { ref, type Ref } from "vue";
+import { LAYOUT_MODE_STORAGE_KEY, LEGACY_VIEW_MODE_STORAGE_KEY, parseStoredLayoutMode, type LayoutMode } from "../utils/canvas/layoutMode";
+
+export function useLayoutMode(): {
+  layoutMode: Ref<LayoutMode>;
+  setLayoutMode: (mode: LayoutMode) => void;
+} {
+  localStorage.removeItem(LEGACY_VIEW_MODE_STORAGE_KEY);
+
+  const layoutMode = ref<LayoutMode>(parseStoredLayoutMode(localStorage.getItem(LAYOUT_MODE_STORAGE_KEY)));
+
+  function setLayoutMode(mode: LayoutMode): void {
+    layoutMode.value = mode;
+    localStorage.setItem(LAYOUT_MODE_STORAGE_KEY, mode);
+  }
+
+  return { layoutMode, setLayoutMode };
+}

package/src/composables/useNewsItems.ts

@@ -0,0 +1,38 @@
+// Composable: aggregate recent news items via /api/news/items.
+// Mirrors the server-side `NewsItem` shape from
+// `server/workspace/news/reader.ts`. Re-declared here so the
+// frontend doesn't pull a server import.
+
+import { ref } from "vue";
+import { API_ROUTES } from "../config/apiRoutes";
+import { apiGet } from "../utils/api";
+
+export interface NewsItem {
+  id: string;
+  title: string;
+  url: string;
+  publishedAt: string;
+  categories: string[];
+  sourceSlug: string;
+  severity?: string;
+}
+
+export function useNewsItems() {
+  const items = ref<NewsItem[]>([]);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function load(days = 30): Promise<void> {
+    loading.value = true;
+    error.value = null;
+    const result = await apiGet<{ items: NewsItem[] }>(`${API_ROUTES.news.items}?days=${days}`);
+    loading.value = false;
+    if (!result.ok) {
+      error.value = result.error;
+      return;
+    }
+    items.value = result.data.items;
+  }
+
+  return { items, loading, error, load };
+}

package/src/composables/useNewsReadState.ts

@@ -0,0 +1,75 @@
+// Composable: own the news viewer's per-item read flags. The server
+// persists the list as `config/news-read-state.json`; the composable
+// keeps a `Set<string>` for O(1) lookup and a queue of pending writes
+// so a fast click sequence doesn't pile up overlapping PUTs.
+
+import { ref, computed } from "vue";
+import { API_ROUTES } from "../config/apiRoutes";
+import { apiGet, apiPut } from "../utils/api";
+
+export function useNewsReadState() {
+  const readIds = ref(new Set<string>());
+  const error = ref<string | null>(null);
+
+  // Single in-flight chain — successive markRead / markAllRead calls
+  // queue rather than overlap. Keeps the server's view consistent
+  // with the most recent intent.
+  let inflight: Promise<unknown> = Promise.resolve();
+
+  async function load(): Promise<void> {
+    const result = await apiGet<{ readIds: string[] }>(API_ROUTES.news.readState);
+    if (!result.ok) {
+      error.value = result.error;
+      return;
+    }
+    error.value = null;
+    readIds.value = new Set(result.data.readIds);
+  }
+
+  async function persist(): Promise<void> {
+    const snapshot = Array.from(readIds.value);
+    const task = inflight
+      .catch(() => undefined)
+      .then(async () => {
+        const result = await apiPut<{ readIds: string[] }>(API_ROUTES.news.readState, { readIds: snapshot });
+        if (!result.ok) {
+          error.value = result.error;
+          return;
+        }
+        error.value = null;
+        // Reflect the server's sanitized list so dedupe / cap come back.
+        readIds.value = new Set(result.data.readIds);
+      });
+    inflight = task;
+    return task;
+  }
+
+  function markRead(itemId: string): void {
+    if (readIds.value.has(itemId)) return;
+    readIds.value.add(itemId);
+    // Trigger reactivity — `Set` mutation isn't reactive on its own.
+    readIds.value = new Set(readIds.value);
+    void persist();
+  }
+
+  function markAllRead(allIds: readonly string[]): void {
+    let changed = false;
+    for (const itemId of allIds) {
+      if (!readIds.value.has(itemId)) {
+        readIds.value.add(itemId);
+        changed = true;
+      }
+    }
+    if (!changed) return;
+    readIds.value = new Set(readIds.value);
+    void persist();
+  }
+
+  function isRead(itemId: string): boolean {
+    return readIds.value.has(itemId);
+  }
+
+  const readCount = computed(() => readIds.value.size);
+
+  return { readIds, error, load, markRead, markAllRead, isRead, readCount };
+}

package/src/composables/useNotifications.ts

@@ -4,18 +4,27 @@
 // Uses a singleton subscription pattern: the first component that
 // calls useNotifications() subscribes to the pub-sub channel; the
 // last one to unmount unsubscribes. All consumers share the same
-// module-level state (notifications + readAt).
+// module-level state (notifications + readIds).
+//
+// Read tracking is per-id via a Set. The unread badge decreases
+// only when the user **interacts** with a notification — either
+// clicking it (markRead) or dismissing it via × (dismiss removes
+// the notification entirely, so it leaves the unread tally as a
+// side effect). Opening the panel does NOT auto-mark everything
+// read; the user has to explicitly act on each item, or hit the
+// "Mark all read" button.
 
 import { onUnmounted, ref, computed, type Ref, type ComputedRef } from "vue";
 import { PUBSUB_CHANNELS } from "../config/pubsubChannels";
 import { usePubSub } from "./usePubSub";
-import { NOTIFICATION_KINDS } from "../types/notification";
+import { NOTIFICATION_ACTION_TYPES, NOTIFICATION_KINDS, NOTIFICATION_VIEWS } from "../types/notification";
 import type { NotificationPayload } from "../types/notification";
 import { isRecord } from "../utils/types";
 
 const MAX_RECENT = 50;
 
 const VALID_KINDS = new Set<string>(Object.values(NOTIFICATION_KINDS));
+const VALID_VIEWS = new Set<string>(Object.values(NOTIFICATION_VIEWS));
 
 function isNotificationPayload(value: unknown): value is NotificationPayload {
   if (!isRecord(value)) return false;
@@ -27,14 +36,25 @@ function isNotificationPayload(value: unknown): value is NotificationPayload {
   return true;
 }
 
+// Tighter than a plain `typeof type === "string"` check — confirms
+// the discriminator is one we know AND, for `navigate`, that the
+// target carries a known view. Stops malformed payloads from
+// landing in the panel and crashing later in the click handler.
 function isValidAction(action: unknown): boolean {
   if (!isRecord(action)) return false;
-  return typeof action.type === "string";
+  if (action.type === NOTIFICATION_ACTION_TYPES.none) return true;
+  if (action.type !== NOTIFICATION_ACTION_TYPES.navigate) return false;
+  const target = action.target;
+  if (!isRecord(target)) return false;
+  return typeof target.view === "string" && VALID_VIEWS.has(target.view);
 }
 
-// Module-level state so all components share the same list.
+// Module-level state so all components share the same list and the
+// same per-id read state.
 const notifications = ref<NotificationPayload[]>([]);
-const readAt = ref<string | null>(null);
+// Set of notification ids the user has explicitly read (clicked or
+// dismissed-as-read). A Set so add/lookup are O(1) per entry.
+const readIds = ref<Set<string>>(new Set());
 
 // Singleton subscription — ref-counted across consumers.
 let subscriberCount = 0;
@@ -45,10 +65,29 @@ function ensureSubscribed(subscribe: ReturnType<typeof usePubSub>["subscribe"]):
   if (unsubscribeFn) return; // already listening
   unsubscribeFn = subscribe(PUBSUB_CHANNELS.notifications, (data) => {
     if (!isNotificationPayload(data)) return;
-    notifications.value = [data, ...notifications.value].slice(0, MAX_RECENT);
+    const next = [data, ...notifications.value].slice(0, MAX_RECENT);
+    notifications.value = next;
+    // Drop read-state entries for notifications that just rolled
+    // off the end of the bounded list — readIds is otherwise an
+    // unbounded leak across a long-lived session.
+    pruneReadIds(next);
   });
 }
 
+function pruneReadIds(currentList: readonly NotificationPayload[]): void {
+  if (readIds.value.size === 0) return;
+  const liveIds = new Set(currentList.map((notif) => notif.id));
+  const next = new Set<string>();
+  for (const readId of readIds.value) {
+    if (liveIds.has(readId)) next.add(readId);
+  }
+  // Only assign when the contents actually changed — avoids
+  // unnecessary reactive churn when nothing rolled off.
+  if (next.size !== readIds.value.size) {
+    readIds.value = next;
+  }
+}
+
 function releaseSubscription(): void {
   subscriberCount--;
   if (subscriberCount <= 0 && unsubscribeFn) {
@@ -62,6 +101,8 @@ export function useNotifications(): {
   notifications: Ref<NotificationPayload[]>;
   latest: ComputedRef<NotificationPayload | null>;
   unreadCount: ComputedRef<number>;
+  isRead: (id: string) => boolean;
+  markRead: (id: string) => void;
   markAllRead: () => void;
   dismiss: (id: string) => void;
 } {
@@ -71,20 +112,42 @@ export function useNotifications(): {
 
   const latest = computed(() => notifications.value[0] ?? null);
 
-  const unreadCount = computed(() => {
-    if (!readAt.value) return notifications.value.length;
-    return notifications.value.filter((notif) => notif.firedAt > readAt.value!).length;
-  });
+  const unreadCount = computed(() => notifications.value.filter((notif) => !readIds.value.has(notif.id)).length);
+
+  function isRead(notifId: string): boolean {
+    return readIds.value.has(notifId);
+  }
+
+  function markRead(notifId: string): void {
+    if (readIds.value.has(notifId)) return;
+    // Replace the Set so Vue's reactivity fires on consumers that
+    // depend on `readIds` via `unreadCount` / `isRead`.
+    const next = new Set(readIds.value);
+    next.add(notifId);
+    readIds.value = next;
+  }
 
   function markAllRead(): void {
-    if (notifications.value.length > 0) {
-      readAt.value = notifications.value[0].firedAt;
+    if (notifications.value.length === 0) return;
+    const next = new Set(readIds.value);
+    for (const notif of notifications.value) {
+      next.add(notif.id);
     }
+    readIds.value = next;
   }
 
   function dismiss(notifId: string): void {
     notifications.value = notifications.value.filter((notif) => notif.id !== notifId);
+    // Drop the matching readIds entry too. Without this, a long
+    // session that dismisses thousands of notifications leaks one
+    // ~36-char id per dismissal even though the user can't see
+    // them — pruneReadIds keeps the Set tied to `notifications`.
+    if (readIds.value.has(notifId)) {
+      const next = new Set(readIds.value);
+      next.delete(notifId);
+      readIds.value = next;
+    }
   }
 
-  return { notifications, latest, unreadCount, markAllRead, dismiss };
+  return { notifications, latest, unreadCount, isRead, markRead, markAllRead, dismiss };
 }

package/src/composables/usePendingCalls.ts

@@ -59,7 +59,17 @@ export function usePendingCalls(opts: UsePendingCallsOptions) {
     // unused.
     const __tickDep = displayTick.value;
     const now = Date.now();
-    return opts.toolCallHistory.value.filter((entry) => __tickDep >= 0 && isCallStillPending(entry, now));
+    // Project to a narrower shape that carries `elapsedMs` so the
+    // consumer doesn't need its own ticker for the per-tool badge —
+    // the 50ms re-evaluation here already drives the display
+    // (#731 PR2).
+    return opts.toolCallHistory.value
+      .filter((entry) => __tickDep >= 0 && isCallStillPending(entry, now))
+      .map((entry) => ({
+        toolUseId: entry.toolUseId,
+        toolName: entry.toolName,
+        elapsedMs: now - entry.timestamp,
+      }));
   });
 
   function teardown(): void {

package/src/composables/useRoles.ts

@@ -1,9 +1,9 @@
-// Composable that owns the active role list, the currently
-// selected role id, and the refresh-from-server fetch. The merge
-// rule lives in src/utils/roleMerge so it can be unit-tested
-// independently.
+// Composable that owns the active role list and its server-merge
+// fetch. The selected role is owned by SessionHeaderControls via
+// useCurrentRole — selection is a UI-local concern and lives next
+// to the dropdown that drives it.
 
-import { computed, ref, type ComputedRef, type Ref } from "vue";
+import { ref, type Ref } from "vue";
 import { API_ROUTES } from "../config/apiRoutes";
 import { ROLES, type Role } from "../config/roles";
 import { mergeRoles } from "../utils/role/merge";
@@ -11,13 +11,9 @@ import { apiGet } from "../utils/api";
 
 export function useRoles(): {
   roles: Ref<Role[]>;
-  currentRoleId: Ref<string>;
-  currentRole: ComputedRef<Role>;
   refreshRoles: () => Promise<void>;
 } {
   const roles = ref<Role[]>(ROLES);
-  const currentRoleId = ref(ROLES[0].id);
-  const currentRole = computed(() => roles.value.find((role) => role.id === currentRoleId.value) ?? roles.value[0]);
 
   async function refreshRoles(): Promise<void> {
     const result = await apiGet<Role[]>(API_ROUTES.roles.list);
@@ -30,5 +26,5 @@ export function useRoles(): {
     roles.value = mergeRoles(ROLES, result.data);
   }
 
-  return { roles, currentRoleId, currentRole, refreshRoles };
+  return { roles, refreshRoles };
 }

package/src/composables/useRunElapsed.ts

@@ -0,0 +1,80 @@
+// Tracks how long the active agent run has been going. While
+// `isRunning` is true, `elapsedMs` updates once per second so the
+// rendered string ("12s" / "1m 23s") moves visibly. When the run
+// ends, `elapsedMs` flips back to null and the timer is cleared.
+//
+// Separated from `usePendingCalls` (which ticks every 50ms for the
+// minimum-visible-duration trick) — the run-elapsed display only
+// needs second-granularity, and the consumer renders one badge per
+// run rather than one per pending row, so a tighter tick would just
+// burn re-renders.
+//
+// Why a watcher + setInterval rather than a `requestAnimationFrame`
+// driven computed: tab-throttled rAF freezes when the tab is in the
+// background, and the user expects the elapsed counter to keep
+// running across tab switches.
+
+import { computed, ref, watch, type ComputedRef, type Ref, type WatchStopHandle } from "vue";
+
+const ONE_SECOND_MS = 1000;
+
+interface UseRunElapsedOptions {
+  isRunning: ComputedRef<boolean> | Ref<boolean>;
+}
+
+export function useRunElapsed(opts: UseRunElapsedOptions): {
+  elapsedMs: ComputedRef<number | null>;
+  teardown: () => void;
+} {
+  const startedAt = ref<number | null>(null);
+  const now = ref(0);
+  let interval: ReturnType<typeof setInterval> | null = null;
+  let stopWatch: WatchStopHandle | null = null;
+
+  stopWatch = watch(
+    opts.isRunning,
+    (running) => {
+      if (running) {
+        // Guard against double-start: if the watcher fires twice with
+        // running=true (e.g. immediate + a synchronous flip), don't
+        // stack a second interval.
+        if (interval !== null) return;
+        startedAt.value = Date.now();
+        now.value = startedAt.value;
+        interval = setInterval(() => {
+          now.value = Date.now();
+        }, ONE_SECOND_MS);
+        return;
+      }
+      if (interval !== null) {
+        clearInterval(interval);
+        interval = null;
+      }
+      startedAt.value = null;
+    },
+    // immediate so a composable created while a run is already in
+    // flight (mounted mid-stream) starts ticking right away.
+    { immediate: true },
+  );
+
+  const elapsedMs = computed<number | null>(() => {
+    if (startedAt.value === null) return null;
+    return now.value - startedAt.value;
+  });
+
+  function teardown(): void {
+    // Stop the watcher first — otherwise an isRunning flip after
+    // teardown would recreate the interval (Codex iter-1 #798).
+    if (stopWatch !== null) {
+      stopWatch();
+      stopWatch = null;
+    }
+    if (interval !== null) {
+      clearInterval(interval);
+      interval = null;
+    }
+    startedAt.value = null;
+  }
+
+  return { elapsedMs, teardown };
+}

package/src/composables/useSessionDerived.ts

@@ -18,12 +18,27 @@ export function useSessionDerived(opts: { sessionMap: Map<string, ActiveSession>
 
   const currentSummary = computed(() => sessions.value.find((summary) => summary.id === currentSessionId.value));
 
-  // The server-side summary already merges pendingGenerations into
-  // `isRunning` (see server/api/routes/sessions.ts), but pub/sub events
-  // for background generations arrive faster than the next sessions
-  // refetch — fold the in-memory map in so ChatInput reflects the new
-  // state immediately.
+  // Global "is anything running" across every known session — in-memory
+  // map (which reflects pub/sub events faster than server refetch) and
+  // server-side summaries (for sessions not yet hydrated into the map).
+  // Used for consumers that must stay true across page navigation:
+  // favicon spinner and the FilesView refresh watcher (which would
+  // otherwise fire before a background run actually finishes, because
+  // leaving /chat drops activeSession to undefined).
   const isRunning = computed(() => {
+    for (const session of sessionMap.values()) {
+      if (session.isRunning) return true;
+      if (Object.keys(session.pendingGenerations).length > 0) return true;
+    }
+    return sessions.value.some((summary) => summary.isRunning);
+  });
+
+  // True only when the session on screen has a run in flight. Drives
+  // UX touchpoints that should react per-session — ChatInput disable,
+  // sendMessage guard, chat-list auto-scroll, pending-call row tick —
+  // so a background run in session B doesn't disable the composer
+  // while the user is actively chatting in session A.
+  const activeSessionRunning = computed(() => {
     const active = activeSession.value;
     const pending = active ? Object.keys(active.pendingGenerations).length > 0 : false;
     return currentSummary.value?.isRunning || active?.isRunning || pending || false;
@@ -43,6 +58,7 @@ export function useSessionDerived(opts: { sessionMap: Map<string, ActiveSession>
     sidebarResults,
     currentSummary,
     isRunning,
+    activeSessionRunning,
     statusMessage,
     toolCallHistory,
     activeSessionCount,

package/src/composables/useSessionHistory.ts

@@ -1,10 +1,10 @@
-// Composable for the session-history dropdown in the header.
+// Composable for the session-history view at `/history`.
 //
-// Owns the `sessions` list (what the server knows about) and the
-// `showHistory` open/closed flag, plus the fetch + toggle helpers.
-// The dropdown lazy-loads the list only when opened, and callers
-// can invoke `fetchSessions()` directly after an end-of-run so the
-// sidebar title cache stays fresh.
+// Owns the `sessions` list (what the server knows about) plus the
+// fetch helper. The view's open/closed state is now URL-backed (see
+// plans/done/feat-history-url-route.md) — callers watch `route.name` and
+// invoke `fetchSessions()` on route enter rather than going through
+// an in-memory toggle flag.
 //
 // Since #205, `fetchSessions()` sends the server's last-issued
 // cursor back as `?since=<cursor>` so the server can reply with
@@ -26,15 +26,12 @@ interface SessionsResponse {
 
 export function useSessionHistory(): {
   sessions: Ref<SessionSummary[]>;
-  showHistory: Ref<boolean>;
   historyError: Ref<string | null>;
   fetchSessions: () => Promise<SessionSummary[]>;
-  toggleHistory: () => Promise<void>;
 } {
   const sessions = ref<SessionSummary[]>([]);
-  const showHistory = ref(false);
   // Surfaces the most recent fetch failure. Kept alongside the (stale)
-  // sessions list rather than wiping it — a dropdown that goes blank
+  // sessions list rather than wiping it — a panel that goes blank
   // the moment the network hiccups is worse UX than one that shows
   // "⚠ using cached list" with the last-known good entries.
   const historyError = ref<string | null>(null);
@@ -66,16 +63,9 @@ export function useSessionHistory(): {
     return sessions.value;
   }
 
-  async function toggleHistory(): Promise<void> {
-    showHistory.value = !showHistory.value;
-    if (showHistory.value) await fetchSessions();
-  }
-
   return {
     sessions,
-    showHistory,
     historyError,
     fetchSessions,
-    toggleHistory,
   };
 }

package/src/composables/useSidePanelVisible.ts

@@ -0,0 +1,25 @@
+// localStorage-backed ref for the session-history side-panel flag.
+// Mirrors the shape of useLayoutMode — one source of truth per chat
+// UI preference, kept out of App.vue's already-large state surface.
+
+import { ref, type Ref } from "vue";
+import { SIDE_PANEL_VISIBLE_STORAGE_KEY, parseStoredSidePanelVisible, serializeSidePanelVisible } from "../utils/canvas/sidePanelVisible";
+
+export function useSidePanelVisible(): {
+  sidePanelVisible: Ref<boolean>;
+  setSidePanelVisible: (value: boolean) => void;
+  toggleSidePanelVisible: () => void;
+} {
+  const sidePanelVisible = ref<boolean>(parseStoredSidePanelVisible(localStorage.getItem(SIDE_PANEL_VISIBLE_STORAGE_KEY)));
+
+  function setSidePanelVisible(value: boolean): void {
+    sidePanelVisible.value = value;
+    localStorage.setItem(SIDE_PANEL_VISIBLE_STORAGE_KEY, serializeSidePanelVisible(value));
+  }
+
+  function toggleSidePanelVisible(): void {
+    setSidePanelVisible(!sidePanelVisible.value);
+  }
+
+  return { sidePanelVisible, setSidePanelVisible, toggleSidePanelVisible };
+}