@hienlh/ppm 0.23.6 → 0.23.8

package/src/web/components/chat/idle-cache-notice.tsx

@@ -0,0 +1,67 @@
+import { Clock } from "@/lib/icons";
+import { useMinuteClock } from "@/hooks/use-minute-clock";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
+import { idleCacheNotice, formatIdleDuration, formatContextTokens } from "../../../shared/prompt-cache-idle";
+
+/**
+ * How long the session has been idle, when that has stopped being free.
+ *
+ * Sits above the composer rather than in the transcript: it describes what the *next*
+ * message will cost, not anything that has happened, and the transcript is a record of
+ * what did. It disappears on its own the moment a turn starts, because by then the
+ * decision it exists to inform has been made.
+ *
+ * Says one of two things. A compaction replaced the conversation, so the cache holds a prefix
+ * that will never be sent again — that is reported without a token figure, because the
+ * summary it produced has not been through an API call yet and nothing has measured it.
+ * Otherwise the cache simply lapsed, and the transcript still standing is what gets re-sent.
+ *
+ * Names a token figure only when one was measured. `modelUsage` cannot supply it — the SDK
+ * accumulates it across the session and across subagents, which is what once printed "1.0M
+ * tokens" against a window of the same size — so the number comes from the turn's last
+ * top-level assistant message instead (`TurnUsage.contextTokens`). Turns recorded before PPM
+ * measured that carry none, and the sentence has to stand without it.
+ *
+ * Owns its outer padding so that "no notice" costs no layout: the caller renders this
+ * unconditionally, and a wrapper with padding around nothing is a gap above the composer
+ * that appears for no reason.
+ */
+export function IdleCacheNotice({ promptCache }: { promptCache: PromptCacheState | null }) {
+  const notice = idleCacheNotice(promptCache, useMinuteClock());
+  if (!notice) return null;
+
+  return (
+    // Same `px-4 pt-4 pb-4` as the approval/thinking block below, so the notice keeps the
+    // composer's breathing room instead of sitting on top of it.
+    <div className="px-4 pt-4 pb-4 select-none">
+      {/* `w-fit` rather than a full-width row: this is one sentence, and a thin bordered
+          box stretched across an ultrawide reads as a broken layout. It still falls back
+          to the available width — and wraps — on a phone. */}
+      <div className="flex w-fit items-start gap-2 rounded-md border border-border bg-surface px-2.5 py-2 text-[11px] text-text-secondary">
+        <Clock className="mt-px size-3.5 shrink-0 text-text-subtle" />
+        {notice.reason === "compacted" ? (
+          <span>
+            The conversation was compacted{" "}
+            <span className="tabular-nums">{formatIdleDuration(notice.idleMs)}</span> ago, so the
+            prompt cache no longer covers it and your next message will re-cache it.
+          </span>
+        ) : (
+          <span>
+            Idle <span className="tabular-nums">{formatIdleDuration(notice.idleMs)}</span>. The
+            prompt cache has likely expired, so your next message re-sends{" "}
+            {notice.contextTokens != null ? (
+              <>
+                about{" "}
+                <span className="tabular-nums">{formatContextTokens(notice.contextTokens)}</span>{" "}
+                tokens
+              </>
+            ) : (
+              "the whole transcript"
+            )}{" "}
+            at full price.
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/chat/message-input.tsx

@@ -3,6 +3,8 @@ import { useProjectStore } from "@/stores/project-store";
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
+import { useWhisperVoiceInput } from "@/hooks/use-whisper-voice-input";
+import { useSettingsStore } from "@/stores/settings-store";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { downscaleImage } from "@/lib/image-resize";
 import { INLINE_IMAGE_LIMITS } from "@/lib/image-resize-limits";
@@ -17,9 +19,11 @@ import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
 import { ProviderSelector } from "./provider-selector";
 import { ModelThinkingSelector } from "./model-thinking-selector";
 import type { SlashItem } from "./slash-command-picker";
-import { fetchSlashItems, clearSlashItemsCache } from "@/lib/slash-items-cache";
+import { fetchSlashItems, getCachedSlashItems, subscribeSlashItems, SLASH_ITEMS_TTL_MS } from "@/lib/slash-items-cache";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
+import { PromptCacheChip } from "./prompt-cache-chip";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
 
 /**
  * Base64 payload for an image file, or undefined when it cannot be read.
@@ -136,6 +140,8 @@ interface MessageInputProps {
   thinking?: boolean;
   /** Thinking toggle handler */
   onThinkingChange?: (enabled: boolean) => void;
+  /** This session's prompt-cache clock, for the countdown chip */
+  promptCache?: PromptCacheState | null;
 }
 
 export const MessageInput = memo(function MessageInput({
@@ -172,6 +178,7 @@ export const MessageInput = memo(function MessageInput({
   onEffortChange,
   thinking,
   onThinkingChange,
+  promptCache,
   configurationPending = false,
 }: MessageInputProps) {
   // Uncontrolled textarea: value lives in DOM + ref, not React state.
@@ -248,8 +255,16 @@ export const MessageInput = memo(function MessageInput({
     [getUserHistory, writeTextareas, getVisibleTextarea],
   );
 
-  // Voice input (Web Speech API)
-  const voice = useVoiceInput();
+  // Voice input. Two engines behind the same button: the browser's own
+  // recogniser (text appears as you speak, but Chrome/Edge/Safari only) and
+  // Whisper running on the PPM host (any browser, answers once at the end).
+  // Settings picks, per device; an engine the device cannot do falls back.
+  const voiceEngine = useSettingsStore((s) => s.voiceEngine);
+  const browserVoice = useVoiceInput();
+  const whisperVoice = useWhisperVoiceInput();
+  const useWhisper = voiceEngine === "whisper" && whisperVoice.supported;
+  const voice = useWhisper ? whisperVoice : browserVoice;
+  const isTranscribing = useWhisper && whisperVoice.isTranscribing;
   // Store pre-voice text so voice appends to existing input
   const preVoiceTextRef = useRef("");
   const voiceResultCb = useCallback((text: string) => {
@@ -268,13 +283,20 @@ export const MessageInput = memo(function MessageInput({
     }
   }, [writeTextareas, getVisibleTextarea]);
   const handleVoiceToggle = useCallback(() => {
+    // The shortcut reaches this while Whisper is still working on the last
+    // recording, where the button is already disabled.
+    if (isTranscribing) return;
     if (voice.isListening) {
       voice.stop();
     } else {
       preVoiceTextRef.current = valueRef.current.trim();
       voice.start(voiceResultCb);
     }
-  }, [voice.isListening, voice.start, voice.stop, voiceResultCb]);
+  }, [voice.isListening, voice.start, voice.stop, voiceResultCb, isTranscribing]);
+
+  const micLabel = isTranscribing
+    ? "Transcribing"
+    : voice.isListening ? "Stop voice input" : "Start voice input";
 
   // Listen for global keyboard shortcut (Cmd+Shift+V) to toggle voice.
   // Guarded so that only the focused panel's chat reacts — every chat tab stays
@@ -383,36 +405,47 @@ export const MessageInput = memo(function MessageInput({
     return () => clearTimeout(timer);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Cache per project/provider/session, with a TTL for externally installed skills.
+  // Reuse provider skills immediately and refresh project overrides in the background.
+  const slashLoadRef = useRef(0);
   const loadSlashItems = useCallback(() => {
+    const request = ++slashLoadRef.current;
     if (configurationPending) return;
     if (!projectName) {
       slashItemsRef.current = [];
       onSlashItemsLoaded?.([], []);
       return;
     }
+    const cached = getCachedSlashItems(projectName, providerId);
+    slashItemsRef.current = cached?.items ?? [];
+    onSlashItemsLoaded?.(cached?.items ?? [], cached?.recentNames ?? []);
     fetchSlashItems(projectName, providerId, sessionId)
       .then((data) => {
+        if (request !== slashLoadRef.current) return;
         slashItemsRef.current = data.items;
         onSlashItemsLoaded?.(data.items, data.recentNames);
       })
-      .catch(() => {
-        slashItemsRef.current = [];
-        onSlashItemsLoaded?.([], []);
-      });
+      .catch(() => { /* Keep usable skills when a refresh fails. */ });
   }, [projectName, providerId, sessionId, onSlashItemsLoaded, configurationPending]);
 
   useEffect(() => {
-    if (!configurationPending && slashPickerOpenRef.current) loadSlashItems();
-  }, [configurationPending, loadSlashItems]);
+    loadSlashItems();
+    const unsubscribe = subscribeSlashItems(() => {
+      if (!projectName) return;
+      const cached = getCachedSlashItems(projectName, providerId);
+      if (cached && !configurationPending) {
+        slashItemsRef.current = cached.items;
+        onSlashItemsLoaded?.(cached.items, cached.recentNames);
+      }
+    });
+    const timer = setInterval(loadSlashItems, SLASH_ITEMS_TTL_MS);
+    return () => { ++slashLoadRef.current; unsubscribe(); clearInterval(timer); };
+  }, [loadSlashItems, projectName, providerId, onSlashItemsLoaded, configurationPending]);
 
-  // Load on the first slash interaction below. Opening a transcript should
-  // not enumerate skills (or start a provider CLI) before the user needs them.
+  // Warm the catalog on mount so the first slash interaction need not wait.
 
   // Refresh button invalidated the server cache — drop ours too, then refetch.
   useEffect(() => {
     const handler = () => {
-      clearSlashItemsCache(projectName);
       loadSlashItems();
     };
     window.addEventListener("ppm:slash-items-refresh", handler);
@@ -691,7 +724,13 @@ export const MessageInput = memo(function MessageInput({
     slashPickerOpenRef.current = false;
     onFileStateChange?.(false, "");
     filePickerOpenRef.current = false;
-    if (voice.isListening) voice.stop();
+    // Sending closes the mic. Whisper's recording is dropped rather than
+    // transcribed: its text would arrive seconds later, into the box the
+    // message just left.
+    if (voice.isListening) {
+      if (useWhisper) whisperVoice.cancel();
+      else voice.stop();
+    }
     onSend(content, readyAttachments, isStreaming ? priority : undefined);
     writeTextareas("");
     // Revoke preview URLs
@@ -707,7 +746,8 @@ export const MessageInput = memo(function MessageInput({
       if (textareaRef.current) textareaRef.current.style.height = "auto";
       if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
     }
-  }, [attachments, agentTag, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority, writeTextareas]);
+  }, [attachments, agentTag, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority, writeTextareas,
+      voice.isListening, voice.stop, whisperVoice.cancel, useWhisper]);
 
   const handleSend = useCallback(() => {
     if (disabled) return;
@@ -933,7 +973,7 @@ export const MessageInput = memo(function MessageInput({
         {/* Attachment chips (inside container, aligned with input) */}
         <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: mode chip + provider selector row */}
-        <div className="flex items-center gap-1 px-2 pt-2 md:hidden relative">
+        <div className="flex flex-wrap items-center gap-1 px-2 pt-2 md:hidden relative">
           {!configurationPending && <>
           <ModeChip
             mode={permissionMode ?? "bypassPermissions"}
@@ -967,6 +1007,7 @@ export const MessageInput = memo(function MessageInput({
             />
           )}
           {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
+          <PromptCacheChip promptCache={promptCache ?? null} />
         </div>
         {/* Mobile: single row — attach + textarea + mic + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
@@ -996,15 +1037,17 @@ export const MessageInput = memo(function MessageInput({
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
-              disabled={disabled}
+              disabled={disabled || isTranscribing}
               className={`flex items-center justify-center size-8 shrink-0 rounded-[10px] transition-colors disabled:opacity-50 ${
                 voice.isListening
                   ? "bg-error text-white animate-pulse"
                   : "text-text-3 hover:text-text-primary"
               }`}
-              aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+              aria-label={micLabel}
             >
-              {voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
+              {isTranscribing
+                ? <Loader2 className="size-4 animate-spin" />
+                : voice.isListening ? <MicOff className="size-4" /> : <Mic className="size-4" />}
             </button>
           )}
           {showCancel ? (
@@ -1030,7 +1073,7 @@ export const MessageInput = memo(function MessageInput({
         {/* Desktop: chips row (permission + model) then a single input row
             (paperclip | textarea | mic | send) — design PPMWorkspace composer. */}
         <div className="hidden md:block">
-          <div className="flex items-center gap-1.5 px-2.5 pt-2.5">
+          <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
             {/* Mode indicator chip */}
             {!configurationPending && <div className="relative">
               <ModeChip
@@ -1066,6 +1109,7 @@ export const MessageInput = memo(function MessageInput({
               />
             )}
             {isStreaming && <PriorityToggle value={priority} onChange={setPriority} />}
+            <PromptCacheChip promptCache={promptCache ?? null} />
           </div>
           <div className="flex items-end gap-2 px-2.5 py-2">
             <button
@@ -1094,15 +1138,17 @@ export const MessageInput = memo(function MessageInput({
               <button
                 type="button"
                 onClick={(e) => { e.stopPropagation(); handleVoiceToggle(); }}
-                disabled={disabled}
+                disabled={disabled || isTranscribing}
                 className={`flex items-center justify-center size-[34px] shrink-0 rounded-[10px] transition-colors disabled:opacity-50 ${
                   voice.isListening
                     ? "bg-error text-white animate-pulse"
                     : "text-text-3 hover:text-text-primary hover:bg-surface-elevated"
                 }`}
-                aria-label={voice.isListening ? "Stop voice input" : "Start voice input"}
+                aria-label={micLabel}
               >
-                {voice.isListening ? <MicOff className="size-[17px]" /> : <Mic className="size-[17px]" />}
+                {isTranscribing
+                  ? <Loader2 className="size-[17px] animate-spin" />
+                  : voice.isListening ? <MicOff className="size-[17px]" /> : <Mic className="size-[17px]" />}
               </button>
             )}
             {showCancel ? (

package/src/web/components/chat/message-list.tsx

@@ -18,6 +18,9 @@ import { extractJsonlPath } from "./pre-compact-button";
 import { MarkdownContent } from "./message-markdown";
 import { UserBubble } from "./message-user-bubble";
 import { InterleavedEvents, ThinkingIndicator } from "./message-events";
+import { CompactionDivider } from "./compaction-divider";
+import { IdleCacheNotice } from "./idle-cache-notice";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
 import { RenderErrorBoundary } from "@/components/shared/markdown-error-boundary";
 
 import {
@@ -50,6 +53,8 @@ interface MessageListProps {
   connectingElapsed?: number;
   statusMessage?: string | null;
   compactStatus?: "compacting" | null;
+  /** Prompt-cache clock for the idle re-cache notice; null when PPM cannot measure it. */
+  promptCache?: PromptCacheState | null;
   projectName?: string;
   /** Called when user clicks Fork/Rewind — opens new forked chat tab */
   onFork?: (userMessage: string, messageId?: string) => void;
@@ -127,6 +132,7 @@ export function MessageList({
   connectingElapsed,
   statusMessage,
   compactStatus,
+  promptCache,
   projectName,
   onFork,
   onEdit,
@@ -454,6 +460,10 @@ export function MessageList({
                 data-msg-index={globalIdx}
                 className="px-4 pt-4 select-none"
               >
+                {/* Above the summary rather than beside it: the rule is what marks
+                    where the conversation was cut, and the summary is the first
+                    message on the new side of it. */}
+                {msg.compaction && <CompactionDivider compaction={msg.compaction} />}
                 <RenderErrorBoundary fallbackContent={msg.content}>
                   <MessageBubble
                     message={msg}
@@ -479,6 +489,11 @@ export function MessageList({
               </div>
             );
           })}
+          {/* Idle only: once a turn starts the cache question is already answered, and the
+              thinking indicator below owns that space. */}
+          {!isStreaming && !pendingApproval && (
+            <IdleCacheNotice promptCache={promptCache ?? null} />
+          )}
           {hasTrailing && (
             <div className="px-4 pt-4 pb-4 space-y-4 select-none">
               {pendingApproval && (

package/src/web/components/chat/new-chat-provider-gate.tsx

@@ -1,8 +1,12 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import type { AISettings } from "@/lib/api-settings";
 import { chatPreparationGeneration, clearChatPreparationCache, getChatPreparationSettings, getChatProviders, type ChatProviderInfo } from "@/lib/chat-preparation-cache";
 import { resolveNewChatProvider } from "@/lib/new-chat-provider";
+import { readChatPreparationSettings, readChatProviders } from "@/lib/chat-preference-local-cache";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { getPrepare } from "@/lib/new-chat-prepare-client";
 import { usePanelStore } from "@/stores/panel-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 
 interface PreparedChat { providerId: string; permissionMode?: string }
 interface NewChatPreparation {
@@ -43,9 +47,12 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     if (!current.providerPending && typeof current.providerId === "string") {
       return { providerId: current.providerId, permissionMode: current.permissionMode as string | undefined };
     }
-    const result = { providerId, permissionMode: (current.permissionMode as string | undefined)
-      ?? settings.providers[providerId]?.permission_mode ?? "bypassPermissions" };
-    const next = { ...current, ...result, providerPending: undefined, focusedProviderOnOpen: undefined };
+    const carried = current.permissionMode as string | undefined;
+    const result = { providerId, permissionMode: carried ?? settings.providers[providerId]?.permission_mode ?? "bypassPermissions" };
+    // A mode taken from settings here is a default the tab's prepare may still refresh;
+    // one the tab already carried keeps whatever source it came with.
+    const next = { ...current, ...result, providerPending: undefined, focusedProviderOnOpen: undefined,
+      ...(carried ? {} : { permissionModeSource: "cache" }) };
     latest.current = next;
     usePanelStore.getState().updateTab(tabId, { metadata: next });
     return result;
@@ -63,17 +70,28 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     setUnavailable(null);
     const projectName = current.projectName as string | undefined;
     const generation = chatPreparationGeneration();
-    const request = Promise.all([
+    const focusedProvider = current.focusedProviderOnOpen as string | undefined;
+    const legacyFetch = () => Promise.all([
       getChatPreparationSettings(projectName),
       projectName ? getChatProviders(projectName) : Promise.resolve(null),
-    ]).then(([settings, providers]) => {
+    ]).then(([settings, providers]) => ({ settings, providers, providerId: resolveNewChatProvider(settings, focusedProvider) }));
+    // The tab's own mount already started `/chat/prepare` (see chat-tab.tsx) — join it
+    // instead of the settings + providers pair this gate used to fetch itself. A failed
+    // prepare request (not merely an unavailable provider, handled below) falls back to
+    // that original pair rather than leaving the tab stuck.
+    const tabPrepare = getPrepare(tabId);
+    const settled = tabPrepare
+      ? tabPrepare.then((prepared) => ({
+          settings: prepared.settings, providers: prepared.providers, providerId: prepared.resolvedProviderId,
+        })).catch(legacyFetch)
+      : legacyFetch();
+    const request = settled.then(({ settings, providers, providerId }) => {
       if (!active.current) throw new Error("Chat was closed.");
       if (generation !== chatPreparationGeneration()) throw new Error("Chat settings changed. Please retry.");
       const now = currentMetadata();
       if (!now.providerPending && typeof now.providerId === "string") {
         return { providerId: now.providerId, permissionMode: now.permissionMode as string | undefined };
       }
-      const providerId = resolveNewChatProvider(settings, current.focusedProviderOnOpen as string | undefined);
       if (providers && !providers.some((provider) => provider.id === providerId)) {
         setUnavailable({ provider: providerId, settings, alternatives: providers });
         throw new Error(`${providerId} is not available. Choose a provider for this chat.`);
@@ -85,10 +103,30 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     }).finally(() => { if (inFlight.current === request) inFlight.current = null; });
     inFlight.current = request;
     return request;
-  }, [currentMetadata, selectProvider]);
+  }, [currentMetadata, selectProvider, tabId]);
 
   useEffect(() => { active.current = true; return () => { active.current = false; }; }, []);
   useEffect(() => { if (pending) void prepare().catch(() => {}); }, [pending, prepare]);
+
+  // A tab restored from a reload never passes through `panel-store.openTab`'s warm
+  // resolution, so it can still be `providerPending` even with a warm local cache. This
+  // resolves synchronously before paint, so the first frame is never "Preparing chat…"
+  // for a cache that already has the answer — `prepare()` above still runs, but its
+  // `selectProvider` call becomes a no-op once metadata is already resolved.
+  useLayoutEffect(() => {
+    const current = currentMetadata();
+    if (!current.providerPending) return;
+    const projectName = current.projectName as string | undefined;
+    if (!projectName) return;
+    const settings = readChatPreparationSettings();
+    if (!settings) return;
+    const cachedProviders = readChatProviders(projectCacheId(projectRefForName(projectName)));
+    const resolvedProviderId = resolveNewChatProvider(settings, current.focusedProviderOnOpen as string | undefined);
+    if (!cachedProviders?.some((provider) => provider.id === resolvedProviderId)) return;
+    selectProvider(resolvedProviderId, settings);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const retry = () => { clearChatPreparationCache(); void prepare().catch(() => {}); };
 
   return <PreparationContext.Provider value={{ pending, providerId: metadata.providerId as string | undefined,

package/src/web/components/chat/prompt-cache-chip.tsx

@@ -0,0 +1,74 @@
+import { Clock } from "@/lib/icons";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMinuteClock } from "@/hooks/use-minute-clock";
+import type { PromptCacheState } from "../../../shared/prompt-cache-idle";
+import {
+  promptCacheStatus,
+  formatCacheCountdown,
+  formatIdleDuration,
+  formatContextTokens,
+} from "../../../shared/prompt-cache-idle";
+
+/**
+ * How long this session's prompt cache has left, in the composer's chip row.
+ *
+ * The banner above the composer only appears once the cache is already gone, which answers
+ * "why was that turn expensive" after the fact. This is the same fact while it can still be
+ * acted on — a countdown says the next message is cheap *now*, and going red says it is not.
+ *
+ * Reads as a chip rather than a control because there is nothing to click: the cache's clock
+ * is not a setting. Renders nothing at all when PPM has not measured the session, so a chat
+ * with no completed turn shows a row unchanged from before.
+ *
+ * The hover text is the only part that is hover-only, and deliberately so: everything it
+ * says is already on screen as the chip's own number and, once expired, as the banner. So
+ * touch loses a sentence of phrasing rather than a fact — which is why this needs no tap
+ * affordance and stays out of the composer's tab order.
+ */
+export function PromptCacheChip({ promptCache }: { promptCache: PromptCacheState | null }) {
+  const status = promptCacheStatus(promptCache, useMinuteClock());
+  if (status.kind === "unknown") return null;
+
+  const cold = status.kind === "cold";
+  const label = status.kind === "cold"
+    ? formatIdleDuration(status.idleMs)
+    : formatCacheCountdown(status.remainingMs);
+
+  let detail: string;
+  if (status.kind !== "cold") {
+    detail = `Prompt cache warm, about ${label.replace(/m$/, " min")} left.`;
+  } else if (status.reason === "compacted") {
+    // No token figure here on purpose: what the next message re-caches is the summary the
+    // compaction just produced, and no API call has reported its size yet.
+    detail = `Prompt cache does not cover the compacted conversation. Compacted ${label} ago, so your next message will re-cache it.`;
+  } else {
+    detail = `Prompt cache expired ${label} ago. Your next message re-sends ${
+      status.contextTokens != null
+        ? `about ${formatContextTokens(status.contextTokens)} tokens`
+        : "the whole transcript"
+    } at full price.`;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          // Same shape as `ModeChip` and `PriorityToggle` beside it; only the colour carries
+          // the state, and only once the cache is gone — a countdown still running is not news.
+          className={`inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] border transition-colors ${
+            cold
+              ? "text-error border-error/40 bg-error/10"
+              : "text-text-2 bg-panel-2 border-border-soft"
+          }`}
+        >
+          <Clock className="size-3" />
+          {/* `tabular-nums` so a minute ticking over does not shift the chips beside it. */}
+          <span className="tabular-nums">{label}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-[240px] text-xs">
+        {detail}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/web/components/chat/session-context-menu.tsx

@@ -7,6 +7,8 @@ import {
 } from "@/components/ui/context-menu";
 import { api, projectUrl } from "@/lib/api-client";
 import { useNotificationStore } from "@/stores/notification-store";
+import { commitOptimistic } from "@/stores/session-list-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 import type { SessionInfo, ProjectTag } from "../../../types/chat";
 
 interface SessionContextMenuProps {
@@ -26,18 +28,19 @@ export function SessionContextMenu({
 }: SessionContextMenuProps) {
   const markUnread = useNotificationStore((s) => s.markUnread);
   const isUnread = useNotificationStore((s) => s.notifications.has(session.id));
+  // Optimistic: the row shows the new tag before the request goes out. A refused change
+  // puts the previous tag back in the lists this menu was opened from, and
+  // `commitOptimistic` re-syncs the shared store from the server.
   const assignTag = useCallback(async (tagId: number | null) => {
-    try {
-      if (tagId) {
-        await api.patch(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`, { tagId });
-        const tag = projectTags.find((t) => t.id === tagId);
-        if (tag) onTagChanged(session.id, { id: tag.id, name: tag.name, color: tag.color });
-      } else {
-        await api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`);
-        onTagChanged(session.id, null);
-      }
-    } catch { /* silent */ }
-  }, [session.id, projectName, projectTags, onTagChanged]);
+    const found = tagId ? projectTags.find((t) => t.id === tagId) : undefined;
+    if (tagId && !found) return;
+    const previous = session.tag ?? null;
+    onTagChanged(session.id, found ? { id: found.id, name: found.name, color: found.color } : null);
+    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/tag`;
+    const ok = await commitOptimistic(projectRefForName(projectName),
+      () => (tagId ? api.patch(url, { tagId }) : api.del(url)));
+    if (!ok) onTagChanged(session.id, previous);
+  }, [session.id, session.tag, projectName, projectTags, onTagChanged]);
 
   return (
     <ContextMenu>

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

@@ -10,6 +10,8 @@ import { ProviderBadge } from "./provider-selector";
 import { SearchSnippet } from "./search-snippet";
 import { useSessionHistory } from "@/hooks/use-session-history";
 import { useChatSearch } from "@/hooks/use-chat-search";
+import { SessionListSyncIndicator } from "./session-list-sync-indicator";
+import { useProjectRef } from "@/stores/session-list-sync-triggers";
 import type { SessionInfo, ChatSearchResult } from "../../../types/chat";
 
 /** Sidebar search-results list (unified title + content matches with snippets). */
@@ -74,6 +76,7 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
   });
   const notifications = useNotificationStore((s) => s.notifications);
 
+  const project = useProjectRef(projectName);
   const isSidebar = variant === "sidebar";
   // Content-aware unified search is a sidebar affordance; the bar keeps its
   // lightweight title-only filter.
@@ -96,7 +99,11 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
   return (
     <div className={cn(isSidebar ? "flex flex-col h-full min-h-0" : "border-t border-border/30 bg-surface", className)}>
       {/* Header (sidebar only — the bar variant already sits under its own toolbar) */}
-      {isSidebar && <SidebarHeader icon={BotMessageSquare} title="Chat History" />}
+      {isSidebar && (
+        <SidebarHeader icon={BotMessageSquare} title="Chat History">
+          {project && <SessionListSyncIndicator project={project} />}
+        </SidebarHeader>
+      )}
 
       {/* Search + bulk delete + refresh */}
       <div className="flex items-center gap-1 px-2 py-2 shrink-0">