@hienlh/ppm 0.23.5 → 0.23.7

package/src/web/components/system/use-process-signal.ts

@@ -0,0 +1,87 @@
+/**
+ * Sending one signal to a process — Mission Center's "Send Signal" submenu.
+ *
+ * Separate from `useProcessKill` because the two mean different things: a kill
+ * escalates TERM to KILL, while asking for SIGSTOP must send SIGSTOP and nothing
+ * else. The server enforces the SAME guard for both, so a process the kill button
+ * refuses cannot be suspended either.
+ */
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { getAuthToken } from "@/lib/api-client";
+import type {
+  ProcessInfo, ProcessSignal, SignalProcessRequest, SignalProcessResult,
+} from "../../../types/system-metrics";
+
+/** Human wording for the menu, in the order Mission Center lists them. */
+export const SIGNAL_LABELS: Record<ProcessSignal, string> = {
+  STOP: "Suspend (SIGSTOP)",
+  CONT: "Continue (SIGCONT)",
+  TERM: "Terminate (SIGTERM)",
+  KILL: "Kill (SIGKILL)",
+  HUP: "Hang up (SIGHUP)",
+  INT: "Interrupt (SIGINT)",
+  USR1: "User signal 1",
+  USR2: "User signal 2",
+};
+
+/** The two that cannot be caught or ignored, so the UI can warn before sending. */
+export const UNCATCHABLE_SIGNALS: readonly ProcessSignal[] = ["KILL", "STOP"];
+
+/** `api.post` has no way to add the `X-PPM-Request` header the route requires,
+ *  so this mirrors `killProcess` exactly — one Error on any failure. */
+export async function signalProcess(request: SignalProcessRequest): Promise<SignalProcessResult> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-PPM-Request": "1",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch("/api/system/resources/signal", {
+    method: "POST",
+    headers,
+    body: JSON.stringify(request),
+  });
+  let json: { ok: boolean; data?: SignalProcessResult; error?: string };
+  try {
+    json = await res.json();
+  } catch {
+    throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
+  }
+  if (json.ok === false) throw new Error(json.error ?? `HTTP ${res.status}`);
+  return json.data as SignalProcessResult;
+}
+
+export function buildSignalRequest(
+  proc: ProcessInfo,
+  signal: ProcessSignal,
+  tree: boolean,
+): SignalProcessRequest {
+  // `startedAt` is the identity guard: a recycled pid is a 409, never a signal
+  // delivered to whatever took the number over.
+  return { pid: proc.pid, startedAt: proc.startedAt, signal, tree };
+}
+
+export function useProcessSignal() {
+  const [pending, setPending] = useState<number | null>(null);
+
+  const send = useCallback(async (proc: ProcessInfo, signal: ProcessSignal, tree = false) => {
+    setPending(proc.pid);
+    try {
+      const result = await signalProcess(buildSignalRequest(proc, signal, tree));
+      const count = result.signalled.length;
+      toast.success(
+        count > 1
+          ? `Sent SIG${signal} to ${proc.name} and ${count - 1} child processes`
+          : `Sent SIG${signal} to ${proc.name} (${proc.pid})`,
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : `Could not signal ${proc.name}`);
+    } finally {
+      setPending(null);
+    }
+  }, []);
+
+  return { send, pending };
+}

package/src/web/components/tunnels/public-tunnel-switch.tsx

@@ -0,0 +1,82 @@
+/**
+ * Master on/off switch for PPM's own public tunnel.
+ *
+ * The switch only writes config — the supervisor owns the cloudflared process
+ * and picks the change up as a `retunnel` — so "switched on" and "actually
+ * reachable" are a few seconds apart. The row reports both rather than
+ * pretending the toggle is instant, and polls on the same 10s cadence as the
+ * tunnel list below it.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { Globe, Loader2 } from "@/lib/icons";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "sonner";
+import { publicTunnelApi, type PublicTunnelStatus } from "@/lib/api-tunnels";
+
+export function PublicTunnelSwitch() {
+  const [status, setStatus] = useState<PublicTunnelStatus | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const refresh = useCallback(async () => {
+    try {
+      setStatus(await publicTunnelApi.status());
+    } catch {
+      // Keep the last known state — a failed poll is not a state change.
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    const interval = setInterval(refresh, 10_000);
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  // Nothing to toggle until the first read lands; rendering a default-on switch
+  // first would flicker to off on every load of a machine that has it off.
+  if (!status) return null;
+
+  // Absent on a server that predates the switch, where the tunnel was
+  // unconditional — so absent reads as on, never off.
+  const enabled = status.enabled ?? true;
+  const starting = enabled && !status.active;
+
+  async function toggle(next: boolean) {
+    setPending(true);
+    setStatus((s) => (s ? { ...s, enabled: next } : s));
+    try {
+      await publicTunnelApi.setEnabled(next);
+      await refresh();
+    } catch (e) {
+      setStatus((s) => (s ? { ...s, enabled: !next } : s));
+      toast.error(e instanceof Error ? e.message : "Could not change the tunnel setting");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3 p-3 border-b border-border bg-surface">
+      <Globe className="size-4 shrink-0 text-text-secondary" />
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-text-primary">Public tunnel</div>
+        <p className="text-xs text-text-secondary leading-relaxed truncate">
+          {!enabled
+            ? "Off — PPM stays reachable on this network only"
+            : starting
+              ? "Starting…"
+              : status.url ?? "On — waiting for a public URL"}
+        </p>
+      </div>
+      {(pending || starting) && <Loader2 className="size-4 shrink-0 animate-spin text-text-subtle" />}
+      {/* The control is 20x36; the pseudo-element takes its hit area to 44x60
+          so it is tappable on a phone without changing the row's layout. */}
+      <Switch
+        checked={enabled}
+        onCheckedChange={toggle}
+        disabled={pending}
+        aria-label="Public tunnel"
+        className="relative shrink-0 before:absolute before:-inset-3 before:content-['']"
+      />
+    </div>
+  );
+}

package/src/web/components/tunnels/tunnel-manager-tab.tsx

@@ -4,6 +4,7 @@ import { tunnelsApi, type TunnelEntry } from "@/lib/api-tunnels";
 import { copyToClipboard } from "@/lib/clipboard";
 import { toast } from "sonner";
 import { NamedTunnelSection } from "@/components/tunnels/named-tunnel/named-tunnel-section";
+import { PublicTunnelSwitch } from "@/components/tunnels/public-tunnel-switch";
 
 /** Badge label + style per tunnel source. */
 const SOURCE_META: Record<TunnelEntry["source"], { label: string; cls: string }> = {
@@ -92,6 +93,9 @@ export function TunnelManagerTab() {
 
   return (
     <div className="flex flex-col h-full w-full bg-background">
+      {/* Master switch first: everything below it is moot while the tunnel is off */}
+      <PublicTunnelSwitch />
+
       {/* Named tunnel status + setup entry point, above the quick-forward form */}
       <NamedTunnelSection />
 

package/src/web/components/ui/dialog.tsx

@@ -68,7 +68,20 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background text-foreground p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // `grid-cols-[minmax(0,1fr)]` rather than the implicit `auto` column: an
+          // auto track's base size is its items' MIN-CONTENT contribution, so one
+          // unbreakable string anywhere inside — a systemd unit name, a log line,
+          // a path — widens the column past the dialog and every child with it,
+          // drawing outside the panel. `overflow-wrap: break-word` does not help,
+          // because by specification it does not affect min-content size.
+          "fixed top-[50%] left-[50%] z-50 grid grid-cols-[minmax(0,1fr)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background text-foreground p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // The close button is absolutely positioned over the top-right corner,
+          // which is the header's first line — so a title long enough to reach it
+          // renders underneath it. Reserve the corner, but only when the button is
+          // actually there.
+          // A descendant selector, not a child one: several dialogs put the header
+          // inside a flex/scroll wrapper.
+          showCloseButton && "[&_[data-slot=dialog-header]]:pr-8",
           className
         )}
         {...props}

package/src/web/components/ui/search-select.tsx

@@ -0,0 +1,279 @@
+/**
+ * A select whose list can be searched: a trigger showing the current choice,
+ * and a panel with a filter box over the options.
+ *
+ * It exists because the lists it serves are the case a native `<select>` or a
+ * plain menu handles worst — dozens to hundreds of names that agree for most of
+ * their length (`fix/NX-1234-…` branches, `nxsys-backend-nx5833` checkouts), where
+ * the only way to the one you want is reading past the ones you do not. The shape
+ * is the checkout quick pick's, and it shares that picker's keyboard arithmetic
+ * (`moveSelection`) and its selection tint.
+ *
+ * A Radix popover rather than a panel positioned by hand, because the surfaces
+ * that mount it are `overflow-hidden`: a dropdown anchored inside one is clipped at
+ * its bottom edge, which shows as a list a few rows tall with no scrollbar and no
+ * sign that anything was cut. The portal escapes that, and collision detection
+ * keeps it on screen when the panel is docked low in the window. Below `md` it is
+ * a bottom sheet instead, per the mobile rules.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type ElementType } from "react";
+import { Popover } from "radix-ui";
+import { Check, ChevronDown, Search } from "@/lib/icons";
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { usePortalContainer } from "@/components/ui/portal-container-context";
+import { StartEllipsis } from "@/components/ui/start-ellipsis";
+import { firstSelectable, moveSelection } from "@/lib/git-ref-picker";
+import { rowIndexOf, searchRows, type SearchSelectItem } from "@/lib/search-select-rows";
+
+export interface SearchSelectProps {
+  value: string;
+  items: SearchSelectItem[];
+  onChange: (value: string) => void;
+  /** Names the control for screen readers, and titles the sheet on mobile. */
+  label: string;
+  /** The filter box's placeholder — "Search branches". */
+  searchPlaceholder: string;
+  /** What an empty result says — "No matching branches". */
+  emptyText: string;
+  /** Leading icon on the trigger, if the surroundings do not already carry one. */
+  icon?: ElementType;
+  /** Trigger text while `value` names none of the items. */
+  placeholder?: string;
+  testId?: string;
+  /** Width and look, from the caller — the trigger shares a row with everything else. */
+  className?: string;
+  /**
+   * Set this inside a Radix dialog, and only there.
+   *
+   * A modal dialog traps focus, and the popover is portalled outside it: the
+   * dialog's focus scope sees focus land on an element it does not contain and
+   * pulls it straight back, so the filter box cannot be typed in at all. A
+   * modal popover has a trapped scope of its own, which pushes onto Radix's
+   * scope stack and pauses the dialog's — the one arrangement where both
+   * behave. It costs a scroll lock and `aria-hidden` on everything behind,
+   * which is why it is not the default out in a panel.
+   */
+  modal?: boolean;
+}
+
+export function SearchSelect({
+  value, items, onChange, label, searchPlaceholder, emptyText, icon: Icon, placeholder,
+  testId, className, modal,
+}: SearchSelectProps) {
+  const isMobile = useIsMobile();
+  const portalContainer = usePortalContainer();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const rows = useMemo(() => searchRows(items, query), [items, query]);
+  const current = items.find((i) => i.value === value);
+
+  /*
+   * Highlight the choice already in force when it survives the filter, and the
+   * first match otherwise. Opening on row zero instead would put Enter on an
+   * option nobody asked for, and on a list this long it hides where you
+   * currently are behind several screens of scrolling.
+   */
+  useEffect(() => {
+    const at = rowIndexOf(rows, value);
+    setSelected(at >= 0 ? at : firstSelectable(rows));
+  }, [rows, value]);
+
+  // A filter is a question about this opening, not a setting.
+  useEffect(() => { if (!open) setQuery(""); }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    listRef.current?.querySelector<HTMLElement>('[data-active="true"]')?.scrollIntoView?.({ block: "nearest" });
+  }, [open, selected]);
+
+  const pick = useCallback((next: string) => {
+    onChange(next);
+    setOpen(false);
+  }, [onChange]);
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelected((i) => moveSelection(rows, i, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelected((i) => moveSelection(rows, i, -1));
+        break;
+      case "Enter": {
+        e.preventDefault();
+        const row = rows[selected];
+        if (row?.kind === "item") pick(row.item.value);
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        setOpen(false);
+        break;
+    }
+  }
+
+  const body = (
+    <>
+      <div className="flex items-center gap-2 border-b border-border px-2.5 py-2 shrink-0">
+        <Search className="size-4 shrink-0 text-text-subtle" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={searchPlaceholder}
+          aria-label={`Search ${label.toLowerCase()}`}
+          className="min-w-0 flex-1 bg-transparent text-sm text-text-primary outline-none placeholder:text-text-subtle"
+        />
+      </div>
+      <div
+        ref={listRef}
+        role="listbox"
+        aria-label={label}
+        className="min-h-0 flex-1 overflow-y-auto py-1"
+        data-testid={testId && `${testId}-list`}
+      >
+        {rows.length === 0 ? (
+          <p className="px-3 py-4 text-center text-sm text-text-subtle">{emptyText}</p>
+        ) : (
+          rows.map((row, i) =>
+            row.kind === "separator" ? (
+              <div
+                key={`sep-${row.label}`}
+                className="border-t border-border-soft px-3 pt-2 pb-1 text-[10px] uppercase tracking-wide text-text-3 first:border-t-0 first:pt-1"
+              >
+                {row.label}
+              </div>
+            ) : (
+              <OptionRow
+                key={row.item.value}
+                item={row.item}
+                active={i === selected}
+                picked={row.item.value === value}
+                mobile={isMobile}
+                onPick={() => pick(row.item.value)}
+                onHover={() => setSelected(i)}
+              />
+            ),
+          )
+        )}
+      </div>
+    </>
+  );
+
+  const trigger = (
+    <button
+      type="button"
+      aria-expanded={open}
+      // A panel with a filter box in it, not a bare list — and `combobox` would
+      // be a promise this button cannot keep, since the text input it would
+      // have to own does not exist until the panel is open. Radix says the same
+      // thing on the desktop trigger; this is for the sheet, which has no Radix
+      // under it.
+      aria-haspopup="dialog"
+      aria-label={label}
+      title={current?.title ?? current?.label ?? value}
+      data-testid={testId}
+      onClick={isMobile ? () => setOpen(true) : undefined}
+      // h-10 under a finger: the rows this sits in are compact by design on a
+      // desktop, but the trigger is the one thing in them anyone taps.
+      className={cn(
+        "flex h-10 items-center gap-1 rounded-md border border-border bg-panel px-2 text-xs text-text-primary min-w-0 md:h-7",
+        className,
+      )}
+    >
+      {Icon && <Icon className="size-3.5 shrink-0 text-text-3" />}
+      <StartEllipsis>{current?.label ?? (value || placeholder || "")}</StartEllipsis>
+      <ChevronDown className="size-3.5 shrink-0 text-text-3" />
+    </button>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        {/*
+          No autofocus here, deliberately: the keyboard would cover most of the
+          sheet before the list has been seen once, and the filter box is one
+          tap away at the top of it.
+        */}
+        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid flex max-h-[80dvh] flex-col">
+          <div className="shrink-0 px-3 pb-1 text-xs font-medium text-text-2">{label}</div>
+          <div className="flex min-h-0 flex-1 flex-col" onKeyDown={handleKeyDown}>{body}</div>
+        </BottomSheet>
+      </>
+    );
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen} modal={modal}>
+      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+      <Popover.Portal container={portalContainer}>
+        <Popover.Content
+          align="start"
+          sideOffset={4}
+          collisionPadding={8}
+          onKeyDown={handleKeyDown}
+          // Radix focuses the first focusable child, which is already the filter
+          // box; saying so explicitly keeps it true if a control is ever added
+          // above it.
+          onOpenAutoFocus={(e) => { e.preventDefault(); inputRef.current?.focus(); }}
+          // `popover-solid`, or the glass themes render the list over whatever
+          // is behind the panel.
+          className="popover-solid z-50 flex w-[min(26rem,calc(100vw-1.5rem))] flex-col overflow-hidden rounded-md border border-border text-popover-foreground shadow-lg max-h-[min(20rem,var(--radix-popover-content-available-height))]"
+        >
+          {body}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+/**
+ * One option.
+ *
+ * The active tint is `primary/15` rather than shadcn's `accent`, for the reason
+ * spelled out in `branch-picker.tsx`: `accent` is a hover *surface* in this app
+ * and composites to a contrast ratio of about 1.01 over the panel it sits on,
+ * i.e. a keyboard selection nobody can see.
+ */
+function OptionRow({ item, active, picked, mobile, onPick, onHover }: {
+  item: SearchSelectItem;
+  active: boolean;
+  picked: boolean;
+  mobile: boolean;
+  onPick: () => void;
+  onHover: () => void;
+}) {
+  const Icon = item.icon;
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={picked}
+      data-active={active || undefined}
+      data-value={item.value}
+      title={item.title}
+      onClick={onPick}
+      onMouseEnter={onHover}
+      className={cn(
+        "flex w-full items-center gap-2 px-3 text-left text-sm",
+        mobile ? "min-h-11 py-2" : "py-1",
+        active ? "bg-primary/15 text-text-primary" : "text-text-2",
+      )}
+    >
+      {Icon && <Icon className="size-3.5 shrink-0 text-text-3" />}
+      <StartEllipsis>{item.label}</StartEllipsis>
+      {item.hint && <span className="shrink-0 text-[10px] text-text-3">{item.hint}</span>}
+      {picked && <Check className="size-3.5 shrink-0 text-primary" />}
+    </button>
+  );
+}

package/src/web/components/ui/start-ellipsis.tsx

@@ -0,0 +1,18 @@
+/**
+ * Ellipsize from the start, so the end of a string — the part that differs —
+ * survives.
+ *
+ * A right-to-left box cuts at its left edge, and `<bdi>` keeps the name itself
+ * reading left to right; the isolate is load-bearing rather than tidy, because
+ * outside one a leading `.` takes the paragraph's direction and `.gitignore`
+ * renders as `gitignore.`. Used for file paths, where the filename is the
+ * distinguishing part, and for branch names, where a repository's branches all
+ * begin `fix/NX-`.
+ */
+export function StartEllipsis({ children }: { children: string }) {
+  return (
+    <span dir="rtl" className="truncate text-left min-w-0 flex-1">
+      <bdi>{children}</bdi>
+    </span>
+  );
+}

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

@@ -10,6 +10,8 @@ import { playNotificationSound } from "@/lib/notification-sounds";
 import { toast } from "sonner";
 import type { ChatMessage, ChatEvent } from "../../types/chat";
 import type { BackgroundAgentStatus } from "../../shared/background-agent-status";
+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";
 
@@ -66,6 +68,8 @@ interface UseChatReturn {
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
   compactStatus: "compacting" | null;
+  /** Prompt-cache clock for this session; drives the idle re-cache notice. */
+  promptCache: PromptCacheState | null;
   /** MCP servers this session's subprocess reported as needing a sign-in. */
   mcpNeedsAuth: string[];
   statusMessage: string | null;
@@ -153,6 +157,7 @@ export function useChat(
   const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
   const [contextWindowPct, setContextWindowPct] = useState<number | null>(null);
   const [compactStatus, setCompactStatus] = useState<"compacting" | null>(null);
+  const [promptCache, setPromptCache] = useState<PromptCacheState | null>(null);
   /** MCP servers this session's subprocess reported as needing a sign-in. */
   const [mcpNeedsAuth, setMcpNeedsAuth] = useState<string[]>([]);
   const [backgroundShells, setBackgroundShells] = useState<BackgroundShell[]>([]);
@@ -791,6 +796,25 @@ export function useChat(
           }
           return prev;
         });
+        // This turn just rewrote the cache, so the idle clock restarts here. Done locally
+        // rather than waiting for the next `session_state`: a tab left open for hours may
+        // never reconnect, and that is exactly the case the notice exists for.
+        if (doneUsage) {
+          setPromptCache((prev) => prev && {
+            ...prev,
+            lastTurnEndedAt: Date.now(),
+            billedPrefixTokens: prefixTokens(doneUsage),
+            // Left at its previous value when this turn measured none, rather than cleared:
+            // a context does not shrink, so the older figure is still the better answer.
+            ...(doneUsage.contextTokens != null && { contextTokens: doneUsage.contextTokens }),
+            // Same reason: a turn that only read the cache reports no window, and the one
+            // already in hand is still the window this session's cache lives in.
+            ...(doneUsage.cacheTtlMs != null && { ttlMs: doneUsage.cacheTtlMs }),
+            // Unconditional, unlike the two above: `undefined` here is the turn reporting
+            // that it re-cached after a compaction, which has to clear the flag.
+            compactedAt: doneUsage.compactedAt,
+          });
+        }
         streamingContentRef.current = "";
         streamingEventsRef.current = [];
         streamingAccountRef.current = null;
@@ -985,6 +1009,9 @@ export function useChat(
       // Sync compact indicator from authoritative server state (covers reconnect).
       // state.compactStatus is "compacting" | null — treat undefined as null for back-compat.
       setCompactStatus(state.compactStatus === "compacting" ? "compacting" : null);
+      // The server is the only holder of when the cache was last written and how big the
+      // replayed prefix was — neither is in the transcript, so a reload has to be told.
+      setPromptCache((state.promptCache as PromptCacheState | undefined) ?? null);
       setMcpNeedsAuth(Array.isArray(state.mcpNeedsAuth) ? state.mcpNeedsAuth : []);
       // If idle, refetch history (completed turns) and hide overlay.
       // Skip when nothing could have changed: the phase was already idle locally
@@ -1558,6 +1585,7 @@ export function useChat(
     pendingApproval,
     contextWindowPct,
     compactStatus,
+    promptCache,
     mcpNeedsAuth,
     statusMessage,
     sessionTitle,

package/src/web/hooks/use-global-keybindings.ts

@@ -3,7 +3,8 @@ import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useProjectStore } from "@/stores/project-store";
 import { usePanelStore } from "@/stores/panel-store";
-import { useKeybindingsStore, parseCombo, eventMatchesCombo } from "@/stores/keybindings-store";
+import { useKeybindingsStore, parseCombo, eventMatchesCombo, matchesDockBacktick } from "@/stores/keybindings-store";
+import { isMobileDevice } from "@/hooks/use-is-mobile";
 import { useExtensionStore } from "@/stores/extension-store";
 import { useCompareStore } from "@/stores/compare-store";
 import { openSettings } from "@/components/settings/open-settings";
@@ -89,9 +90,10 @@ export function useGlobalKeybindings() {
         const { matchesEvent: m } = useKeybindingsStore.getState();
         // Mod+S — always prevent browser save dialog
         if (m(e, "save-prevent")) { e.preventDefault(); }
-        // toggle-dock (Mod+') fires even when the terminal textarea is focused (VSCode parity).
-        // It's a modifier combo, so it can't produce a plain quote in the shell.
-        if (m(e, "toggle-dock")) {
+        // toggle-dock (Mod+', and VS Code's Ctrl+` on desktop) fires even when the
+        // terminal textarea is focused (VSCode parity). Both are modifier combos, so
+        // neither can produce a plain quote or backtick in the shell.
+        if (m(e, "toggle-dock") || matchesDockBacktick(e, isMobileDevice())) {
           e.preventDefault();
           usePanelStore.getState().toggleDock();
         }
@@ -126,7 +128,7 @@ export function useGlobalKeybindings() {
       }
 
       // Toggle terminal dock
-      if (match(e, "toggle-dock")) {
+      if (match(e, "toggle-dock") || matchesDockBacktick(e, isMobileDevice())) {
         e.preventDefault();
         usePanelStore.getState().toggleDock();
         return;

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

@@ -12,11 +12,13 @@
  * skips, the bridge asks for the whole document back rather than applying a
  * delta to a copy that is already wrong.
  */
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type * as MonacoType from "monaco-editor";
+import { api, projectUrl } from "@/lib/api-client";
 import {
   acquireLspConnection,
   releaseLspConnection,
+  retryUnavailableLspDocuments,
   type LspConnection,
   type LspDocumentStatus,
 } from "@/lib/lsp/lsp-client";
@@ -40,6 +42,8 @@ export interface LspState {
   status: LspDocumentStatus | null;
   /** Diagnostics for this file, for a Problems view to list. */
   diagnostics: LspDiagnostic[];
+  /** Install the missing server on the host, then take the open files off "not installed". */
+  install: (serverId: string) => Promise<void>;
 }
 
 export interface LspDiagnostic {
@@ -166,7 +170,24 @@ export function useLsp({ editor, monaco, projectName, filePath, enabled }: UseLs
     };
   }, [active, editor, monaco, projectName, filePath]);
 
-  return { status, diagnostics };
+  /**
+   * The Install button's half in the browser.
+   *
+   * The retry runs even when the request failed, and deliberately: a long install behind a
+   * proxy can time out the fetch while `bun add` finishes anyway, and asking again is how the
+   * editor finds out. A real failure costs one extra round trip and the status comes straight
+   * back to "not installed", with the error the host gave for it.
+   */
+  const install = useCallback(async (serverId: string) => {
+    if (!projectName) return;
+    try {
+      await api.post(`${projectUrl(projectName)}/lsp/install`, { serverId });
+    } finally {
+      retryUnavailableLspDocuments();
+    }
+  }, [projectName]);
+
+  return { status, diagnostics, install };
 }
 
 /** Tell the server a save happened, so servers that only analyse on save catch up. */