@hienlh/ppm 0.23.10 → 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", {
@@ -493,6 +510,26 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
 
   // Pending fork message — show in input for user to edit, not auto-send
   const [forkDraft, setForkDraft] = useState<string | undefined>(metadata?.pendingMessage as string | undefined);
+
+  // "Build in new chat" hands a design screenshot over as a data URL on the tab's own
+  // metadata (never a live event: there is no mounted composer yet for a brand new tab). It
+  // is fed through `externalFiles`, the same drop path a screenshot dragged in by hand would
+  // take, so the upload, thumbnail and inline-image handling are exactly the drop code path's
+  // rather than a second copy of it. Cleared right away: attaching it needs no session.
+  useEffect(() => {
+    const dataUrl = metadata?.pendingAttachmentDataUrl as string | undefined;
+    if (!dataUrl || !tabId) return;
+    patchTabMetadata(tabId, { pendingAttachmentDataUrl: undefined, pendingAttachmentName: undefined });
+    const name = (metadata?.pendingAttachmentName as string | undefined) || "screenshot.jpg";
+    fetch(dataUrl)
+      .then((r) => r.blob())
+      .then((blob) => {
+        setExternalFiles([new File([blob], name, { type: blob.type || "image/jpeg" })]);
+        setTimeout(() => setExternalFiles(null), 100);
+      })
+      .catch(() => { /* best effort: the draft still opens, just without the screenshot attached */ });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   // True from the moment an edit is submitted until the forked session starts
   // responding. Drives a "working" indicator so the ~10s fork + codex connect
   // doesn't leave the user staring at a frozen screen. (No optimistic message
@@ -867,7 +904,10 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           setProviderId(selectedProvider);
           setPermissionMode(selectedPermission);
           if (tabId) patchTabMetadata(tabId, { permissionMode: selectedPermission });
-          const picked = await ensureAccountClaim(selectedProvider);
+          // The claim is advisory, and so is the server's use of it: a pick that fails
+          // starts the session on whichever account the server chooses, rather than
+          // refusing the first message.
+          const picked = await ensureAccountClaim(selectedProvider).catch(() => null);
           if (attempt !== firstSendAttempt.current) return;
           const latest = metadataRef.current;
           const accountId = latest?.pickedAccountProvider === selectedProvider
@@ -983,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 */
@@ -1034,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);
@@ -1224,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

@@ -20,6 +20,7 @@ import { ProviderSelector } from "./provider-selector";
 import { ModelThinkingSelector } from "./model-thinking-selector";
 import type { SlashItem } from "./slash-command-picker";
 import { fetchSlashItems, getCachedSlashItems, subscribeSlashItems, SLASH_ITEMS_TTL_MS } from "@/lib/slash-items-cache";
+import { replaceSlashQuery, slashQueryBefore, stripSlashQuery } from "@/lib/slash-trigger";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
 import { PromptCacheChip } from "./prompt-cache-chip";
@@ -469,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);
     };
@@ -495,13 +496,11 @@ export const MessageInput = memo(function MessageInput({
     const cursorPos = el.selectionStart;
     const textBefore = text.slice(0, cursorPos);
     const textAfter = text.slice(cursorPos);
-    // Strip the /query trigger before the cursor, preserving leading whitespace.
-    const stripTrigger = (match: string) => (match.startsWith("/") ? "" : match[0]!);
 
     // Agents render as a removable chip (not inline text) so the composed
     // "Use the X agent to …" prompt is only assembled at send time.
     if (slashSelected.type === "agent") {
-      const stripped = textBefore.replace(/(?:^|\s)\/\S*$/, stripTrigger);
+      const stripped = stripSlashQuery(textBefore);
       setAgentTag(slashSelected.name);
       writeTextareas(stripped + textAfter);
       onSlashStateChange?.(false, "");
@@ -515,10 +514,7 @@ export const MessageInput = memo(function MessageInput({
     // The item's own sigil is used, not a hardcoded `/`: a codex skill is invoked
     // as `$imagegen`, so the composer must show the text that will actually be
     // sent rather than leaving the server to silently rewrite it.
-    const replaced = textBefore.replace(/(?:^|\s)\/\S*$/, (match) => {
-      const prefix = stripTrigger(match);
-      return `${prefix}${slashSelected.invokeSigil ?? "/"}${slashSelected.name} `;
-    });
+    const replaced = replaceSlashQuery(textBefore, `${slashSelected.invokeSigil ?? "/"}${slashSelected.name}`);
     writeTextareas(replaced + textAfter);
     onSlashStateChange?.(false, "");
     slashPickerOpenRef.current = false;
@@ -816,10 +812,9 @@ export const MessageInput = memo(function MessageInput({
 
       // Check for slash anywhere in text (after whitespace or at start)
       if (hasSlash) {
-        const slashMatch = textBefore.match(/(?:^|\s)\/(\S*)$/);
-        if (slashMatch) {
+        const filter = slashQueryBefore(textBefore);
+        if (filter !== null) {
           if (!slashPickerOpenRef.current) loadSlashItems();
-          const filter = slashMatch[1] ?? "";
           onSlashStateChange?.(true, filter);
           slashPickerOpenRef.current = true;
           if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
@@ -831,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; }