@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/branch-review/branch-review-tab.tsx

@@ -28,7 +28,9 @@ import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { GitRepoBar, GitRepoChoice, GitNoRepo } from "@/components/git/git-repo-picker";
 import { FileIcon } from "@/lib/file-icons";
 import { buildTree, compactTree } from "@/lib/git-file-tree";
-import { StartEllipsis, TreeRow } from "./branch-review-tree-row";
+import { TreeRow } from "./branch-review-tree-row";
+import { StartEllipsis } from "@/components/ui/start-ellipsis";
+import { BranchSelect } from "@/components/git/branch-select";
 import {
   Check, ChevronDown, ChevronRight, FileText, Loader2, RefreshCw, ListChecks, ArrowRight,
 } from "@/lib/icons";
@@ -246,30 +248,28 @@ export function BranchReviewTab({ metadata }: BranchReviewTabProps) {
       )}
 
       {/*
-        Native selects rather than the shadcn one: a repository can have
-        hundreds of branches, and the OS picker is both scrollable and a far
-        better touch target than a rendered popover on a phone.
+        A searchable picker rather than a native `<select>`: the list is the
+        whole problem here — hundreds of branches, all sharing a prefix — and a
+        native picker cannot be filtered. See `branch-select.tsx`.
       */}
       <div className="flex items-center gap-2 px-2 py-1.5 border-b border-border shrink-0 flex-wrap">
-        <select
+        <BranchSelect
           value={base}
-          onChange={(e) => setBase(e.target.value)}
-          aria-label="Base branch"
-          data-testid="branch-review-base"
-          className="h-7 max-w-[38%] rounded-md border border-border bg-panel px-2 text-xs min-w-0"
-        >
-          {branches.map((b) => <option key={b.name} value={b.name}>{b.name}</option>)}
-        </select>
+          branches={branches}
+          onChange={setBase}
+          label="Base branch"
+          testId="branch-review-base"
+          className="max-w-[38%]"
+        />
         <ArrowRight className="size-3.5 text-text-3 shrink-0" />
-        <select
+        <BranchSelect
           value={head}
-          onChange={(e) => setHead(e.target.value)}
-          aria-label="Branch to review"
-          data-testid="branch-review-head"
-          className="h-7 max-w-[38%] rounded-md border border-border bg-panel px-2 text-xs min-w-0"
-        >
-          {branches.map((b) => <option key={b.name} value={b.name}>{b.name}</option>)}
-        </select>
+          branches={branches}
+          onChange={setHead}
+          label="Branch to review"
+          testId="branch-review-head"
+          className="max-w-[38%]"
+        />
 
         <div className="ml-auto flex items-center gap-2">
           <span className="text-xs text-text-2 tabular-nums" data-testid="branch-review-progress">

package/src/web/components/branch-review/branch-review-tree-row.tsx

@@ -18,6 +18,7 @@ import { Check, ChevronDown, ChevronRight } from "@/lib/icons";
 import { FileIcon } from "@/lib/file-icons";
 import { isReviewed, type ReviewState } from "@/lib/branch-review-state";
 import type { TreeNode } from "@/lib/git-file-tree";
+import { StartEllipsis } from "@/components/ui/start-ellipsis";
 import type { BranchDiffFile } from "../../../types/git";
 
 export const STATUS_COLORS: Record<BranchDiffFile["status"], string> = {
@@ -32,19 +33,6 @@ export const STATUS_COLORS: Record<BranchDiffFile["status"], string> = {
 /** Indent per nesting level, matching the Source Control tree. */
 export const TREE_INDENT = 14;
 
-/**
- * Ellipsize from the start, so the end of a path — the part that differs —
- * survives. Same trick as the Source Control panel: a right-to-left box cuts at
- * its left edge, and `<bdi>` keeps the name itself reading left to right.
- */
-export function StartEllipsis({ children }: { children: string }) {
-  return (
-    <span dir="rtl" className="truncate text-left min-w-0 flex-1">
-      <bdi>{children}</bdi>
-    </span>
-  );
-}
-
 export interface TreeRowProps {
   node: TreeNode;
   depth: number;

package/src/web/components/chat/chat-tab.tsx

@@ -301,6 +301,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     pendingApproval,
     contextWindowPct,
     compactStatus,
+    promptCache,
     mcpNeedsAuth,
     statusMessage,
     sessionTitle,
@@ -1027,6 +1028,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         connectingElapsed={connectingElapsed}
         statusMessage={statusMessage}
         compactStatus={compactStatus}
+        promptCache={promptCache}
         projectName={projectName}
         onFork={!isStreaming ? handleFork : undefined}
         onEdit={!isStreaming ? handleEdit : undefined}
@@ -1158,6 +1160,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             onEffortChange={setEffort}
             thinking={thinking}
             onThinkingChange={setThinking}
+            promptCache={promptCache}
           />
         )}
       </div>

package/src/web/components/chat/compaction-divider.tsx

@@ -0,0 +1,48 @@
+import { Layers } from "@/lib/icons";
+import type { CompactionInfo } from "../../../types/chat";
+import { fmtTokens } from "../../../shared/turn-usage";
+
+/**
+ * The rule above a compact summary, saying what that compaction did.
+ *
+ * Compaction is the largest thing that happens to a chat and the only one with no
+ * visible cause: most of the history stops being sent, the next turn's prefix
+ * collapses, and all the transcript shows for it is a long summary message that
+ * reads like something the assistant chose to write. Naming it — and how much it
+ * dropped — is what makes the rest of the conversation legible.
+ *
+ * Deliberately not interactive. Loading the messages it replaced is already the job
+ * of the scroll-to-top expansion right above it, and a second control for the same
+ * thing would be two affordances competing over one gesture.
+ */
+export function CompactionDivider({ compaction }: { compaction: CompactionInfo }) {
+  const { trigger, preTokens, postTokens, savedTokens, durationMs } = compaction;
+
+  const detail = [
+    trigger === "manual" ? "Ran with /compact" : "Ran automatically on a full context window",
+    `${fmtTokens(preTokens)} → ${fmtTokens(postTokens)} tokens`,
+    ...(durationMs != null ? [`took ${formatDuration(durationMs)}`] : []),
+  ].join(" · ");
+
+  return (
+    <div className="flex items-center gap-2 pt-2 text-[11px] text-text-subtle" title={detail}>
+      <div className="h-px flex-1 bg-border" />
+      <span className="flex shrink-0 items-center gap-1.5">
+        <Layers className="size-3.5" />
+        {/* `tabular-nums` so the figure does not jitter when a re-read changes it. */}
+        <span className="tabular-nums">
+          Compacted session · saved {fmtTokens(savedTokens)} tokens
+        </span>
+      </span>
+      <div className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+/** Coarse on purpose: this is a footnote, and a compaction is never sub-second. */
+function formatDuration(ms: number): string {
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}m ${seconds % 60}s`;
+}

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";
@@ -20,6 +22,8 @@ import type { SlashItem } from "./slash-command-picker";
 import { fetchSlashItems, clearSlashItemsCache } 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
@@ -691,7 +713,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 +735,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 +962,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 +996,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 +1026,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 +1062,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 +1098,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 +1127,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/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/editor/code-editor.tsx

@@ -860,6 +860,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
               onToggle={setLspEnabled}
               status={lsp.status}
               diagnostics={lsp.diagnostics}
+              onInstall={lsp.install}
             />
           )}
           <EditorLanguagePicker value={effectiveLanguage} onChange={handleLanguageChange} />

package/src/web/components/editor/editor-language-service.tsx

@@ -23,6 +23,14 @@ import { useTabStore } from "@/stores/tab-store";
 export interface EditorLspState {
   status: LspDocumentStatus | null;
   diagnostics: LspDiagnostic[];
+  /**
+   * Install the server this file has none of.
+   *
+   * Handed up rather than called from the toolbar directly: the indicator lives on the
+   * editor's static path, and one runtime import of the LSP client there would merge this
+   * whole chunk back into the editor's — see `editor-lsp-lazy-boundary.test.ts`.
+   */
+  install?: (serverId: string) => Promise<void>;
 }
 
 const NO_LSP_STATE: EditorLspState = { status: null, diagnostics: [] };
@@ -39,7 +47,7 @@ interface EditorLanguageServiceProps {
 export function EditorLanguageService({
   editor, monaco, projectName, filePath, onState,
 }: EditorLanguageServiceProps) {
-  const { status, diagnostics } = useLsp({ editor, monaco, projectName, filePath, enabled: true });
+  const { status, diagnostics, install } = useLsp({ editor, monaco, projectName, filePath, enabled: true });
 
   // F12. Monaco's own binding would swap another file's model into this
   // editor, leaving the tab titled and dirty-tracked as the old file. Disposed
@@ -64,8 +72,8 @@ export function EditorLanguageService({
   onStateRef.current = onState;
 
   useEffect(() => {
-    onStateRef.current({ status, diagnostics });
-  }, [status, diagnostics]);
+    onStateRef.current({ status, diagnostics, install });
+  }, [status, diagnostics, install]);
 
   // The editor keeps drawing whatever it was last told, so a language service
   // that is going away has to retract its own status.