@hienlh/ppm 0.23.11 → 0.23.12

package/src/web/components/android/use-android-session.ts

@@ -0,0 +1,277 @@
+/**
+ * The viewer's half of `/ws/android`: mint a nonce, connect, decode, keep the lease alive.
+ *
+ * Four things here are load-bearing and each one looks optional until it is missing:
+ *
+ *  - **The nonce is minted per connection attempt, and it is single use.** A reconnect mints a
+ *    new one; reusing the old one is rejected by design, so the retry path must go through the
+ *    route again rather than caching it.
+ *  - **The heartbeat is what holds the controller lease.** Stop sending for 15 seconds and the
+ *    server hands control to someone else — which is the intended behaviour for a closed laptop
+ *    lid, and a bug if the timer is tied to a render.
+ *  - **The decoder is reconfigured from the server's `codec` message, never from a guess.** The
+ *    encoder sets no profile or level, so the string is encoder-default and only knowable from
+ *    the real SPS. A rung switch and a rotation both produce a new one.
+ *  - **Deltas before a keyframe are dropped.** A `VideoDecoder` cannot start on one, and neither
+ *    can a freshly recreated one after an error — `shouldDecodeAccessUnit` is the shared rule.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api } from "@/lib/api-client";
+import { useH264CanvasDecoder, shouldDecodeAccessUnit } from "@/components/remote-desktop/use-h264-canvas-decoder";
+import { resolveAndroidWsUrl } from "./android-ws-url";
+import {
+  ANDROID_PROTOCOL_VERSION, decodeVideoFrame,
+  type AndroidClientMessage, type AndroidGeometry, type AndroidLogEntry, type AndroidQuality,
+  type AndroidServerMessage,
+} from "../../../shared/android-protocol";
+
+const HEARTBEAT_MS = 5_000;
+/** Long enough that a phone switching cell tower does not lose the picture, short enough that a
+ *  dead socket is noticed. Backed off so a server that is down is not hammered. */
+const RECONNECT_DELAYS_MS = [500, 1_000, 2_000, 4_000, 8_000];
+
+export type AndroidConnectionState = "connecting" | "live" | "reconnecting" | "failed";
+
+export interface UseAndroidSessionOptions {
+  deviceId: string;
+  quality: AndroidQuality;
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+  /** Paused sessions stop receiving frames; the emulator and the lease stay up. */
+  paused?: boolean;
+}
+
+export interface AndroidSession {
+  state: AndroidConnectionState;
+  errorMessage: string | null;
+  geometry: AndroidGeometry | null;
+  controller: boolean;
+  controllerReason: string | null;
+  encoder: string | null;
+  /** Null until the first keyframe has been decoded — the viewer shows a spinner until then. */
+  hasPicture: boolean;
+  send: (message: AndroidClientMessage) => void;
+  takeControl: () => void;
+  reconnect: () => void;
+  /**
+   * Turn the device's log feed on or off.
+   *
+   * The server stops the gRPC stream when the last watcher leaves (plan gate: "logs hidden
+   * ngừng subscription"), so this is not a client-side filter — asking for it off really does
+   * stop the work on the host.
+   */
+  setLogcat: (on: boolean) => void;
+  /**
+   * Listen for log batches. Deliberately a subscription rather than state: a chatty device
+   * produces hundreds of entries a second, and putting them in this hook's state would
+   * re-render the canvas's parent at that rate.
+   */
+  onLog: (listener: (entries: AndroidLogEntry[]) => void) => () => void;
+}
+
+export function useAndroidSession(opts: UseAndroidSessionOptions): AndroidSession {
+  const { deviceId, quality, canvasRef, paused = false } = opts;
+
+  const [state, setState] = useState<AndroidConnectionState>("connecting");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [geometry, setGeometry] = useState<AndroidGeometry | null>(null);
+  const [controller, setController] = useState(false);
+  const [controllerReason, setControllerReason] = useState<string | null>(null);
+  const [encoder, setEncoder] = useState<string | null>(null);
+  const [hasPicture, setHasPicture] = useState(false);
+
+  const decoder = useH264CanvasDecoder(canvasRef);
+  const socketRef = useRef<WebSocket | null>(null);
+  const attemptRef = useRef(0);
+  // Bumped by every connection attempt, and only the newest may act. The socket a manual
+  // reconnect replaced still fires `onclose` after its handshake, and a nonce request can still
+  // be out when the viewer closes: left to run, either one would clear the live socket's ref,
+  // schedule a retry nobody asked for, or open a socket nothing will ever close.
+  const generationRef = useRef(0);
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const configuredCodecRef = useRef<string | null>(null);
+  // Read inside the socket's handlers, which are created once per connection — a state read
+  // there would be the value from the render that created them.
+  const qualityRef = useRef(quality);
+  qualityRef.current = quality;
+  const hasPictureRef = useRef(false);
+  const logListenersRef = useRef(new Set<(entries: AndroidLogEntry[]) => void>());
+  // Survives a reconnect: the subscription is per socket on the server, so a dropped connection
+  // silently ends it and the panel would show a log that stopped without saying why.
+  const logcatWantedRef = useRef(false);
+
+  const send = useCallback((message: AndroidClientMessage) => {
+    const socket = socketRef.current;
+    if (socket?.readyState === WebSocket.OPEN) socket.send(JSON.stringify(message));
+  }, []);
+
+  const takeControl = useCallback(() => send({ type: "take-control" }), [send]);
+
+  const handleServerMessage = useCallback((message: AndroidServerMessage) => {
+    switch (message.type) {
+      case "ready":
+        attemptRef.current = 0;
+        setState("live");
+        setErrorMessage(null);
+        setGeometry(message.geometry);
+        setController(message.controller);
+        setControllerReason(null);
+        setEncoder(message.encoder);
+        if (message.codec) {
+          configuredCodecRef.current = message.codec;
+          void decoder.configure(message.codec);
+        }
+        if (logcatWantedRef.current) send({ type: "logcat", subscribe: true });
+        return;
+      case "log":
+        for (const listener of logListenersRef.current) listener(message.entries);
+        return;
+      case "codec":
+        if (message.codec === configuredCodecRef.current) return;
+        configuredCodecRef.current = message.codec;
+        void decoder.configure(message.codec);
+        return;
+      case "geometry":
+        setGeometry(message.geometry);
+        // The decoder is holding parameters for a size that no longer exists; the server's
+        // `codec` message for the new bitstream is what reconfigures it.
+        decoder.reset();
+        setHasPicture(false);
+        return;
+      case "controller":
+        setController(message.controller);
+        setControllerReason(message.reason ?? null);
+        return;
+      case "error":
+        setErrorMessage(message.message);
+        return;
+      default:
+        return;
+    }
+  }, [decoder, send]);
+
+  /** Silence the current attempt: its callbacks stop acting, its socket and retry are dropped. */
+  const retire = useCallback(() => {
+    generationRef.current += 1;
+    if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+    reconnectTimerRef.current = null;
+    socketRef.current?.close();
+    socketRef.current = null;
+  }, []);
+
+  const connect = useCallback(async () => {
+    retire();
+    const generation = generationRef.current;
+    const current = () => generationRef.current === generation;
+    setErrorMessage(null);
+
+    let nonce: string;
+    try {
+      // Single use and short-lived: a reconnect must mint a fresh one, never replay this.
+      const res = await api.post<{ nonce: string }>(`/api/android/devices/${encodeURIComponent(deviceId)}/sessions`, {});
+      nonce = res.nonce;
+    } catch (e) {
+      if (!current()) return;
+      setErrorMessage((e as Error).message);
+      setState("failed");
+      return;
+    }
+    if (!current()) return;
+
+    const socket = new WebSocket(resolveAndroidWsUrl(window.location, import.meta.env.DEV));
+    socket.binaryType = "arraybuffer";
+    socketRef.current = socket;
+
+    socket.onopen = () => {
+      socket.send(JSON.stringify({ type: "auth", nonce, quality: qualityRef.current } satisfies AndroidClientMessage));
+    };
+
+    socket.onmessage = (event) => {
+      // A replaced socket can still deliver what was queued before its close: its `ready` would
+      // mark the viewer live, and its frames would feed the decoder, while the new one connects.
+      if (!current()) return;
+      if (typeof event.data === "string") {
+        try { handleServerMessage(JSON.parse(event.data) as AndroidServerMessage); } catch { /* not ours */ }
+        return;
+      }
+      const frame = decodeVideoFrame(event.data as ArrayBuffer);
+      // A frame that fails to decode here was truncated or coalesced in transit; feeding its
+      // bytes to the decoder anyway is how a stream turns to garbage rather than erroring.
+      if (!frame || frame.header.version !== ANDROID_PROTOCOL_VERSION) return;
+      if (!shouldDecodeAccessUnit(hasPictureRef.current, frame.header.keyframe)) return;
+      hasPictureRef.current = true;
+      setHasPicture(true);
+      decoder.decodeAccessUnit(frame.payload, frame.header.keyframe);
+    };
+
+    socket.onclose = () => {
+      if (!current()) return;
+      socketRef.current = null;
+      const delay = RECONNECT_DELAYS_MS[Math.min(attemptRef.current, RECONNECT_DELAYS_MS.length - 1)]!;
+      attemptRef.current += 1;
+      setState(attemptRef.current > RECONNECT_DELAYS_MS.length ? "failed" : "reconnecting");
+      hasPictureRef.current = false;
+      setHasPicture(false);
+      decoder.reset();
+      configuredCodecRef.current = null;
+      reconnectTimerRef.current = setTimeout(() => { void connect(); }, delay);
+    };
+
+    socket.onerror = () => { /* onclose does the work; this only stops an unhandled event */ };
+  }, [deviceId, decoder, handleServerMessage, retire]);
+
+  useEffect(() => {
+    void connect();
+    return () => {
+      retire();
+      decoder.reset();
+    };
+    // `connect` is stable per deviceId; re-running on every decoder identity change would
+    // reconnect the socket for no reason.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deviceId]);
+
+  // The heartbeat is the lease. A tab that stops sending loses control after 15s but keeps
+  // watching, so this runs regardless of whether this client currently holds it.
+  useEffect(() => {
+    const timer = setInterval(() => send({ type: "heartbeat" }), HEARTBEAT_MS);
+    return () => clearInterval(timer);
+  }, [send]);
+
+  useEffect(() => { send({ type: "visibility", visible: !paused }); }, [paused, send]);
+
+  useEffect(() => {
+    if (state === "live") send({ type: "quality", quality });
+  }, [quality, state, send]);
+
+  const setLogcat = useCallback((on: boolean) => {
+    logcatWantedRef.current = on;
+    send({ type: "logcat", subscribe: on });
+  }, [send]);
+
+  const onLog = useCallback((listener: (entries: AndroidLogEntry[]) => void) => {
+    const set = logListenersRef.current;
+    set.add(listener);
+    return () => { set.delete(listener); };
+  }, []);
+
+  const reconnect = useCallback(() => {
+    attemptRef.current = 0;
+    setState("connecting");
+    void connect();
+  }, [connect]);
+
+  return {
+    state,
+    errorMessage: errorMessage ?? decoder.errorMessage,
+    geometry,
+    controller,
+    controllerReason,
+    encoder,
+    hasPicture,
+    send,
+    takeControl,
+    reconnect,
+    setLogcat,
+    onLog,
+  };
+}

package/src/web/components/android/use-android-touch.ts

@@ -0,0 +1,123 @@
+/**
+ * Pointer events on the canvas -> `sendTouch` messages.
+ *
+ * Five things that are not optional:
+ *
+ *  - **`touch-action: none`** on the canvas, or the browser eats the gesture as a scroll or a
+ *    pinch and the guest sees a fraction of it. Set in the viewer's class list, not here.
+ *  - **Pointer capture**, so a drag that leaves the canvas keeps reporting. Without it a swipe
+ *    off the edge simply stops, and the finger is never released.
+ *  - **Every active contact is sent on every update.** The emulator tracks slots by identifier
+ *    and a message describing only the finger that moved would be read as the others lifting.
+ *  - **A release is pressure 0, and it must be sent.** The proto is explicit: "Make sure to
+ *    deliver a pressure of 0 for the given identifier when the touch event is completed,
+ *    otherwise the touch identifier will not be unregistered". The 120-second expiry is not a
+ *    substitute.
+ *  - **`pointercancel` is handled exactly like `pointerup`.** The browser fires it instead of
+ *    `pointerup` once it decides a gesture belongs to something else, and then delivers nothing
+ *    further for that pointer — the same class of bug as the long-press trap in CLAUDE.md, only
+ *    here it leaves a finger pressed on the guest forever.
+ */
+import { useCallback, useEffect, useRef } from "react";
+import { pointerToDevice } from "./android-coords";
+import type { AndroidClientMessage, AndroidGeometry, AndroidTouchPoint } from "../../../shared/android-protocol";
+
+/** What the emulator reports for a finger that is down. Any non-zero value means "touching". */
+const PRESSURE_DOWN = 1;
+const MAX_SLOTS = 10;
+
+export interface UseAndroidTouchOptions {
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+  geometry: AndroidGeometry | null;
+  enabled: boolean;
+  send: (message: AndroidClientMessage) => void;
+}
+
+export interface AndroidTouchHandlers {
+  onPointerDown: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+  onPointerMove: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+  onPointerUp: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+  onPointerCancel: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+}
+
+export function useAndroidTouch(opts: UseAndroidTouchOptions): AndroidTouchHandlers {
+  const { canvasRef, geometry, enabled, send } = opts;
+
+  /** Browser pointerId -> the emulator slot it owns, plus its last position. */
+  const contacts = useRef(new Map<number, { slot: number; x: number; y: number }>());
+
+  const geometryRef = useRef(geometry);
+  geometryRef.current = geometry;
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+
+  const publish = useCallback((releasing?: { slot: number; x: number; y: number }) => {
+    const g = geometryRef.current;
+    if (!g) return;
+    const touches: AndroidTouchPoint[] = [...contacts.current.values()].map((c) => ({
+      x: c.x, y: c.y, id: c.slot, pressure: PRESSURE_DOWN,
+    }));
+    if (releasing) touches.push({ x: releasing.x, y: releasing.y, id: releasing.slot, pressure: 0 });
+    if (touches.length === 0) return;
+    send({ type: "touch", geometryGeneration: g.generation, touches });
+  }, [send]);
+
+  const locate = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    const g = geometryRef.current;
+    if (!canvas || !g) return null;
+    const rect = canvas.getBoundingClientRect();
+    return pointerToDevice(rect, g, e.clientX - rect.left, e.clientY - rect.top);
+  }, [canvasRef]);
+
+  const onPointerDown = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
+    if (!enabledRef.current) return;
+    const point = locate(e);
+    if (!point) return;              // a letterbox bar belongs to no pixel of the guest
+    if (contacts.current.size >= MAX_SLOTS) return;
+    const used = new Set([...contacts.current.values()].map((c) => c.slot));
+    let slot = 0;
+    while (used.has(slot)) slot++;
+    contacts.current.set(e.pointerId, { slot, x: point.x, y: point.y });
+    // Capture, so a drag that leaves the canvas keeps reporting and can still be released.
+    try { e.currentTarget.setPointerCapture(e.pointerId); } catch { /* not capturable */ }
+    publish();
+  }, [locate, publish]);
+
+  const onPointerMove = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
+    const contact = contacts.current.get(e.pointerId);
+    if (!contact || !enabledRef.current) return;
+    const point = locate(e);
+    // Outside the picture the finger keeps its last position rather than jumping or lifting: a
+    // swipe that overshoots the edge is still one continuous gesture to the guest.
+    if (point) { contact.x = point.x; contact.y = point.y; }
+    publish();
+  }, [locate, publish]);
+
+  const release = useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
+    const contact = contacts.current.get(e.pointerId);
+    if (!contact) return;
+    contacts.current.delete(e.pointerId);
+    try { e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+    publish(contact);
+  }, [publish]);
+
+  // A tab hidden or a window blurred mid-drag delivers no further pointer events at all, so the
+  // only way the guest ever sees those fingers lift is for the server to clear every slot.
+  useEffect(() => {
+    const reset = () => {
+      if (contacts.current.size === 0) return;
+      contacts.current.clear();
+      send({ type: "input-reset" });
+    };
+    window.addEventListener("blur", reset);
+    document.addEventListener("visibilitychange", reset);
+    return () => {
+      window.removeEventListener("blur", reset);
+      document.removeEventListener("visibilitychange", reset);
+      reset();
+    };
+  }, [send]);
+
+  return { onPointerDown, onPointerMove, onPointerUp: release, onPointerCancel: release };
+}

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

@@ -6,12 +6,15 @@ import { selectInlineImages } from "@/lib/image-resize-limits";
 import { splitAttachmentMarkers } from "@/lib/attachment-marker-split";
 import type { ChatAttemptEvent } from "@/lib/chat-attempt-lifecycle";
 import { useChat } from "@/hooks/use-chat";
+import { useChatPrewarm } from "@/hooks/use-chat-prewarm";
 import { useUsage } from "@/hooks/use-usage";
 import { useDesignSessionRedirect } from "@/hooks/use-design-session-redirect";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useNotificationStore } from "@/stores/notification-store";
+import { useFileStore } from "@/stores/file-store";
+import { useRemoteFileSearch } from "@/hooks/use-remote-file-search";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { useChatAccountClaim } from "@/hooks/use-chat-account-claim";
 import { startPrepare, getPrepare, isPrepared, forgetPrepare } from "@/lib/new-chat-prepare-client";
@@ -399,6 +402,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     setEffort,
     thinking,
     setThinking,
+    turnSettings,
     sendMessage,
     respondToApproval,
     cancelStreaming,
@@ -413,6 +417,19 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     killBackgroundShell,
   } = useChat(sessionId, providerId, projectName, handleSessionMigrated, observeAttempt);
 
+  // `model`/`effort`/`thinking` are what change when a pick does; the picks sent are read
+  // through `turnSettings`, which leaves out whatever the user has not chosen.
+  const firstMessagePicks = useMemo(() => turnSettings(), [turnSettings, model, effort, thinking]);
+  const touchPrewarm = useChatPrewarm({
+    // Not while the provider is still being resolved: the process would start for a guess.
+    enabled: !sessionId && !designSlug && tourTabActive && !!projectName && !preparation.pending,
+    projectName,
+    providerId,
+    permissionMode,
+    accountId: claimMatchesProvider ? pickedAccountId : undefined,
+    picks: firstMessagePicks,
+  });
+
   useEffect(() => {
     if (!tabId || !tourTabActive || draftLoading || isStreaming) return;
     const announce = () => window.dispatchEvent(new CustomEvent("ppm:onboarding-evidence", {
@@ -1006,8 +1023,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const handleContentChange = useCallback(
     (content: string, attachments?: DraftAttachment[]) => {
       saveDraft(content, attachments);
+      touchPrewarm();
     },
-    [saveDraft],
+    [saveDraft, touchPrewarm],
   );
 
   /** Stable callback for slash items loaded — prevents MessageInput memo break */
@@ -1057,6 +1075,14 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   }, []);
 
   // --- File picker handlers ---
+  // An open @-picker keeps the file index current, like the palette — see `openIndexReader`.
+  useEffect(() => {
+    if (showFilePicker && projectName) return useFileStore.getState().openIndexReader(projectName);
+  }, [showFilePicker, projectName]);
+  // A project too long to send is searched on the server as the @-query changes.
+  const indexRemote = useFileStore((s) => s.indexRemote);
+  const remoteFileItems = useRemoteFileSearch(projectName, fileFilter, { enabled: showFilePicker && indexRemote, kind: "all" });
+
   const handleFileStateChange = useCallback((visible: boolean, filter: string) => {
     setShowFilePicker(visible);
     setFileFilter(filter);
@@ -1247,7 +1273,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           projectName={projectName}
         />
         <FilePicker
-          items={fileItems}
+          items={indexRemote ? remoteFileItems : fileItems}
           filter={fileFilter}
           onSelect={handleFileSelect}
           onClose={handleFileClose}

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

@@ -470,7 +470,7 @@ export const MessageInput = memo(function MessageInput({
         void files.loadIndex(projectName);
         return;
       }
-      const nodes: FileNode[] = files.indexProjectName === projectName ? files.fileIndex : [];
+      const nodes: FileNode[] = files.indexProject === projectName ? files.fileIndex : [];
       fileItemsRef.current = nodes;
       onFileItemsLoaded?.(nodes);
     };
@@ -826,10 +826,8 @@ export const MessageInput = memo(function MessageInput({
       if (hasAt) {
         const atMatch = textBefore.match(/@(\S*)$/);
         if (atMatch) {
-          const files = useFileStore.getState();
-          if (projectName && (files.indexProjectName !== projectName || files.indexStatus === "idle" || files.indexStatus === "error")) {
-            void files.loadIndex(projectName);
-          }
+          // The index is refreshed only when something opens to read it — see `indexStale`.
+          if (!filePickerOpenRef.current && projectName) useFileStore.getState().ensureIndex(projectName);
           onFileStateChange?.(true, atMatch[1] ?? "");
           filePickerOpenRef.current = true;
           if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }

package/src/web/components/editor/compare-picker.tsx

@@ -3,6 +3,7 @@ import { Columns2, FileCode, X } from "@/lib/icons";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useTabStore } from "@/stores/tab-store";
 import { useFileStore } from "@/stores/file-store";
+import { useRemoteFileSearch } from "@/hooks/use-remote-file-search";
 import { useProjectStore } from "@/stores/project-store";
 import { useCompareStore, type CompareSelection } from "@/stores/compare-store";
 import { openCompareTab } from "@/lib/open-compare-tab";
@@ -64,6 +65,15 @@ export function ComparePicker({ open: openProp, onOpenChange, initialA }: Compar
   const tabs = useTabStore((s) => s.tabs);
   const fileIndex = useFileStore((s) => s.fileIndex);
   const activeProject = useProjectStore((s) => s.activeProject);
+  // A project too long to send is searched on the server, and ranked below like the list itself.
+  const indexRemote = useFileStore((s) => s.indexRemote);
+  const remoteFiles = useRemoteFileSearch(activeProject?.name, query, { enabled: open && indexRemote });
+
+  // The index is refreshed only when something opens to read it — see `indexStale` — and kept
+  // current while that stays open.
+  useEffect(() => {
+    if (open && activeProject) return useFileStore.getState().openIndexReader(activeProject.name);
+  }, [open, activeProject]);
 
   useEffect(() => {
     if (!open) return;
@@ -88,7 +98,7 @@ export function ComparePicker({ open: openProp, onOpenChange, initialA }: Compar
         dirtyContent: t.metadata!.unsavedContent as string | undefined,
       }));
     const seenPaths = new Set(tabCands.map((c) => c.path));
-    const fileCands: Candidate[] = fileIndex
+    const fileCands: Candidate[] = (indexRemote ? remoteFiles : fileIndex)
       .filter((f) => f.type === "file" && !seenPaths.has(f.path))
       .map((f) => ({
         id: `file:${f.path}`,
@@ -97,7 +107,7 @@ export function ComparePicker({ open: openProp, onOpenChange, initialA }: Compar
         source: "file",
       }));
     return [...tabCands, ...fileCands];
-  }, [tabs, fileIndex]);
+  }, [tabs, fileIndex, indexRemote, remoteFiles]);
 
   const filtered = useMemo<Candidate[]>(() => {
     if (!query.trim()) return candidates.slice(0, MAX_RESULTS);

package/src/web/components/explorer/file-tree.tsx

@@ -358,8 +358,9 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     savePersistedExpanded(activeProject.name, useFileStore.getState().expandedPaths);
   }, [expandedPaths, activeProject?.name]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Index invalidation is app-wide so it also works with this drawer closed.
-  // The mounted tree only refreshes the affected folder.
+  // Handle WS file:changed → invalidate folder. The index is only marked stale, and app-wide
+  // (useGlobalEvents, useFileIndexInvalidation) so that also works with this drawer closed;
+  // refetching it here was a 22 MB download per change on a large project.
   useEffect(() => {
     if (!activeProject) return;
     const projectName = activeProject.name;
@@ -389,7 +390,8 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
 
   // Symmetric with the fsChanged(...) calls this file emits after its own mutations: an
   // explorer window mutating a directory inside this project must invalidate the matching
-  // tree node too.
+  // tree node too. It is also what marks the index stale after the tree's own renames, creates
+  // and moves.
   useEffect(() => {
     if (!activeProject) return;
     const projectName = activeProject.name;
@@ -398,6 +400,7 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       const relative = relativeProjectPath(root, absoluteDir);
       if (relative == null) return; // outside this project — not the tree's concern
       const store = useFileStore.getState();
+      store.markIndexStale(projectName);
       store.invalidateFolder(projectName, relative);
     });
   }, [activeProject]);
@@ -529,8 +532,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       const newPath = parentPath ? `${parentPath}/${value}` : value;
       await api.post(`${projectUrl(projectName)}/files/rename`, { oldPath: node.path, newPath });
       clearInlineAction();
-      store.invalidateIndex();
-      store.loadIndex(projectName);
       store.invalidateFolder(projectName, parentPath);
       fsChanged(absoluteProjectPath(activeProject!.path, parentPath));
     } else {
@@ -538,8 +539,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       const fullPath = row.targetPath ? `${row.targetPath}/${value}` : value;
       await api.post(`${projectUrl(projectName)}/files/create`, { path: fullPath, type });
       clearInlineAction();
-      store.invalidateIndex();
-      store.loadIndex(projectName);
       store.invalidateFolder(projectName, row.targetPath);
       fsChanged(absoluteProjectPath(activeProject!.path, row.targetPath));
     }

package/src/web/components/explorer/use-tree-row-dnd.ts

@@ -178,8 +178,6 @@ export function useTreeRowDnd(options: TreeRowDndOptions): TreeRowDnd {
     api.post(`${projectUrl(projectName)}/files/move`, { source: sourcePath, destination })
       .then(() => {
         const store = useFileStore.getState();
-        store.invalidateIndex();
-        store.loadIndex(projectName);
         store.invalidateFolder(projectName, sourceParent);
         store.invalidateFolder(projectName, dropTargetDir);
         // An explorer window showing either folder must refresh too.

package/src/web/components/floating-window/window-content-registry.ts

@@ -7,7 +7,7 @@
  * icon/virtualisation deps) never lands in the initial bundle.
  */
 
-import { lazy, type ComponentType, type LazyExoticComponent } from "react";
+import { lazyWithPreload, type PreloadableComponent } from "@/lib/lazy-with-preload";
 import type { WindowKind } from "./window-store-types";
 
 export interface WindowContentProps {
@@ -17,13 +17,13 @@ export interface WindowContentProps {
   payload?: Record<string, unknown>;
 }
 
-export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentType<WindowContentProps>>> = {
-  explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
-  "agent-session": lazy(() => import("@/components/chat/agent-session-window-content")),
-  "system-monitor": lazy(() => import("@/components/system/system-monitor-window-content")),
-  "tab-host": lazy(() => import("./tab-host-window-content")),
-  "remote-desktop": lazy(() => import("@/components/remote-desktop/remote-desktop-window-content")),
-  settings: lazy(() => import("@/components/settings/settings-window-content")),
+export const WINDOW_CONTENT: Record<WindowKind, PreloadableComponent<WindowContentProps>> = {
+  explorer: lazyWithPreload(() => import("@/components/os-explorer/explorer-window-content")),
+  "agent-session": lazyWithPreload(() => import("@/components/chat/agent-session-window-content")),
+  "system-monitor": lazyWithPreload(() => import("@/components/system/system-monitor-window-content")),
+  "tab-host": lazyWithPreload(() => import("./tab-host-window-content")),
+  "remote-desktop": lazyWithPreload(() => import("@/components/remote-desktop/remote-desktop-window-content")),
+  settings: lazyWithPreload(() => import("@/components/settings/settings-window-content")),
 };
 
 /** Titlebar text for a window. Falls back to the kind's generic name. */