@hienlh/ppm 0.17.36 → 0.17.38

package/src/web/components/terminal/terminal-mobile-toolbar.tsx

@@ -0,0 +1,107 @@
+/**
+ * Touch key row for the terminal: clipboard actions plus the keys a soft
+ * keyboard does not offer (Tab, Esc, Ctrl, arrows, ^C).
+ *
+ * The row scrolls horizontally — 44px targets for eleven controls cannot fit a
+ * phone's width — so it carries an edge fade to advertise that there is more
+ * past the right edge. Without it the last keys look absent rather than
+ * off-screen.
+ */
+import { Copy, ClipboardPaste, MessageSquare, Link, TextSelect } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface MobileKey {
+  label: string;
+  value: string | null;
+}
+
+export const MOBILE_KEYS: readonly MobileKey[] = [
+  { label: "Tab", value: "\t" },
+  { label: "Esc", value: "\x1b" },
+  { label: "Ctrl", value: null },
+  { label: "↑", value: "\x1b[A" },
+  { label: "↓", value: "\x1b[B" },
+  { label: "←", value: "\x1b[D" },
+  { label: "→", value: "\x1b[C" },
+  { label: "^C", value: "\x03" },
+];
+
+const BUTTON_BASE =
+  "flex items-center justify-center shrink-0 min-w-11 min-h-11 rounded text-xs " +
+  "bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground " +
+  "transition-colors select-none";
+
+interface TerminalMobileToolbarProps {
+  ctrlMode: boolean;
+  onToggleCtrl: () => void;
+  selectMode: boolean;
+  onToggleSelect: () => void;
+  onKey: (value: string) => void;
+  onCopy: () => void;
+  onPaste: () => void;
+  onSendToChat: () => void;
+  onOpenLinks: () => void;
+}
+
+export function TerminalMobileToolbar({
+  ctrlMode,
+  onToggleCtrl,
+  selectMode,
+  onToggleSelect,
+  onKey,
+  onCopy,
+  onPaste,
+  onSendToChat,
+  onOpenLinks,
+}: TerminalMobileToolbarProps) {
+  return (
+    <div className="relative shrink-0 bg-surface border-t border-border">
+      <div className="flex items-center gap-1 px-2 py-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <button
+          onClick={onToggleSelect}
+          aria-label="Select text"
+          aria-pressed={selectMode}
+          className={cn(BUTTON_BASE, selectMode && "bg-primary text-primary-foreground")}
+        >
+          <TextSelect size={16} />
+        </button>
+        <button onClick={onCopy} aria-label="Copy" className={BUTTON_BASE}>
+          <Copy size={16} />
+        </button>
+        <button onClick={onPaste} aria-label="Paste" className={BUTTON_BASE}>
+          <ClipboardPaste size={16} />
+        </button>
+        <button onClick={onOpenLinks} aria-label="Links" className={BUTTON_BASE}>
+          <Link size={16} />
+        </button>
+        <button onClick={onSendToChat} aria-label="Send to Chat" className={BUTTON_BASE}>
+          <MessageSquare size={16} />
+        </button>
+
+        <div className="w-px h-6 shrink-0 bg-border mx-0.5" />
+
+        {MOBILE_KEYS.map((key) => (
+          <button
+            key={key.label}
+            onClick={() => (key.value === null ? onToggleCtrl() : onKey(key.value))}
+            className={cn(
+              BUTTON_BASE,
+              "font-mono",
+              key.value === null && ctrlMode && "bg-primary text-primary-foreground",
+            )}
+          >
+            {key.label}
+          </button>
+        ))}
+
+        {/* Trailing spacer so the last key clears the fade instead of hiding under it. */}
+        <div className="w-6 shrink-0" aria-hidden />
+      </div>
+
+      <div
+        className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-surface to-transparent"
+        aria-hidden
+      />
+    </div>
+  );
+}

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

@@ -1,51 +1,32 @@
 import { useRef, useEffect, useState, useCallback, memo } from "react";
 import { useTerminal } from "@/hooks/use-terminal";
+import { useTerminalTouchSelection } from "@/hooks/use-terminal-touch-selection";
 import { cn } from "@/lib/utils";
 import { copyToClipboard } from "@/lib/clipboard";
-import { Copy, ClipboardPaste, RotateCcw, MessageSquare } from "lucide-react";
+import { RotateCcw, MessageSquare } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { toast } from "sonner";
 
 import { usePanelStore } from "@/stores/panel-store";
+import { TerminalMobileToolbar } from "./terminal-mobile-toolbar";
+import { TerminalLinksSheet } from "./terminal-links-sheet";
 
 interface TerminalTabProps {
   metadata?: Record<string, unknown>;
   tabId?: string;
 }
 
-const MOBILE_KEYS = [
-  { label: "Tab", value: "\t" },
-  { label: "Esc", value: "\x1b" },
-  { label: "Ctrl", value: null, isModifier: true },
-  { label: "\u2191", value: "\x1b[A" },
-  { label: "\u2193", value: "\x1b[B" },
-  { label: "\u2190", value: "\x1b[D" },
-  { label: "\u2192", value: "\x1b[C" },
-  { label: "^C", value: "\x03" },
-] as const;
-
 export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: TerminalTabProps) {
   const sessionId = (metadata?.sessionId as string) ?? "new";
   const projectName = metadata?.projectName as string | undefined;
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, restart } = useTerminal({ sessionId, projectName, containerRef, tabId });
+  const { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, getBufferUrls, restart } = useTerminal({ sessionId, projectName, containerRef, tabId });
   const [ctrlMode, setCtrlMode] = useState(false);
-  const [viewportHeight, setViewportHeight] = useState<number | null>(null);
-
-  // Adjust height when mobile keyboard opens
-  useEffect(() => {
-    const vv = window.visualViewport;
-    if (!vv) return;
-
-    function handleResize() {
-      if (!vv) return;
-      setViewportHeight(vv.height);
-    }
+  const [selectMode, setSelectMode] = useState(false);
+  const [linksOpen, setLinksOpen] = useState(false);
 
-    vv.addEventListener("resize", handleResize);
-    return () => vv.removeEventListener("resize", handleResize);
-  }, []);
+  useTerminalTouchSelection(containerRef, selectMode);
 
   const focusTerminal = useCallback(() => {
     const termElement = containerRef.current?.querySelector(
@@ -54,18 +35,19 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     termElement?.focus();
   }, []);
 
-  // On touch devices xterm swallows the synthesized `click`, so an onClick
-  // handler never fires and the soft keyboard never opens. Bind `touchend` in
-  // the capture phase (runs before xterm's own handlers) and focus the hidden
-  // textarea there — this happens inside a real user gesture, so mobile
-  // browsers reliably raise the on-screen keyboard.
+  // Raising the soft keyboard needs focus() to run inside a gesture the browser
+  // recognises, and xterm's own mousedown handling does not reliably qualify.
+  // Capture-phase `touchend` runs before xterm's handlers and is unambiguously a
+  // gesture, so the keyboard opens even when the click path is unreliable.
+  // Skipped in select mode: a drag there is a selection gesture, and raising the
+  // keyboard would both shrink the viewport mid-drag and clear the selection.
   useEffect(() => {
     const container = containerRef.current;
-    if (!container) return;
+    if (!container || selectMode) return;
     const onTouchEnd = () => focusTerminal();
     container.addEventListener("touchend", onTouchEnd, { capture: true });
     return () => container.removeEventListener("touchend", onTouchEnd, { capture: true });
-  }, [focusTerminal]);
+  }, [focusTerminal, selectMode]);
 
   const sendKey = useCallback(
     (value: string) => {
@@ -86,12 +68,22 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
     [ctrlMode, sendData, focusTerminal],
   );
 
+  // xterm starts a selection from mousedown and has no touch equivalent, so on a
+  // phone getSelection() is always empty. Falling back to the last command's
+  // output keeps the button useful instead of silently doing nothing.
   const handleCopy = useCallback(async () => {
     const selection = getSelection();
-    if (selection) {
-      await copyToClipboard(selection);
+    const text = selection || getLastCommandOutput();
+    if (!text.trim()) {
+      toast("Nothing to copy", { duration: 1500 });
+      return;
     }
-  }, [getSelection]);
+    const ok = await copyToClipboard(text);
+    toast[ok ? "success" : "error"](
+      ok ? (selection ? "Selection copied" : "Last output copied") : "Could not copy",
+      { duration: 1500 },
+    );
+  }, [getSelection, getLastCommandOutput]);
 
   const handlePaste = useCallback(async () => {
     try {
@@ -101,7 +93,10 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
         focusTerminal();
       }
     } catch {
-      // Clipboard permission denied
+      // readText() needs a secure context and an explicit permission grant, and
+      // Safari rejects it outright when the tap is not treated as a gesture.
+      // Say so — a silent catch reads as a dead button.
+      toast.error("Clipboard blocked — paste with the keyboard instead", { duration: 2500 });
     }
   }, [sendData, focusTerminal]);
 
@@ -136,10 +131,7 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
   const isMobile = typeof window !== "undefined" && "ontouchstart" in window;
 
   return (
-    <div
-      className="flex flex-col h-full"
-      style={viewportHeight ? { maxHeight: `${viewportHeight}px` } : undefined}
-    >
+    <div className="flex flex-col h-full min-h-0">
       {/* Status bar */}
       <div className="flex items-center gap-2 px-3 py-1 bg-surface border-b border-border text-xs">
         <span
@@ -180,52 +172,31 @@ export const TerminalTab = memo(function TerminalTab({ metadata, tabId }: Termin
       {/* Terminal container. onClick focuses xterm's hidden textarea — on mobile
           the soft keyboard only opens when focus() runs inside a recognized tap
           gesture, which xterm's internal mousedown handling doesn't reliably do. */}
-      <div ref={containerRef} onClick={focusTerminal} className="flex-1 min-h-0 bg-background p-1" />
+      <div
+        ref={containerRef}
+        onClick={selectMode ? undefined : focusTerminal}
+        className={cn("flex-1 min-h-0 bg-background p-1", selectMode && "touch-none")}
+      />
 
-      {/* Mobile toolbar */}
       {isMobile && (
-        <div className="flex items-center gap-1 px-2 py-1.5 bg-surface border-t border-border overflow-x-auto">
-          <button
-            onClick={handleCopy}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-          >
-            <Copy size={14} />
-          </button>
-          <button
-            onClick={handlePaste}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-          >
-            <ClipboardPaste size={14} />
-          </button>
-          <button
-            onClick={handleSendToChat}
-            className="px-2 py-1.5 rounded text-xs min-w-[36px] min-h-[32px] bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground transition-colors select-none"
-            aria-label="Send to Chat"
-          >
-            <MessageSquare size={14} />
-          </button>
-          <div className="w-px h-5 bg-border mx-0.5" />
-          {MOBILE_KEYS.map((key) => (
-            <button
-              key={key.label}
-              onClick={() => {
-                if (key.label === "Ctrl") {
-                  setCtrlMode(!ctrlMode);
-                } else if (key.value) {
-                  sendKey(key.value);
-                }
-              }}
-              className={cn(
-                "px-3 py-1.5 rounded text-xs font-mono min-w-[36px] min-h-[32px]",
-                "bg-surface-elevated text-text-primary active:bg-primary active:text-primary-foreground",
-                "transition-colors select-none",
-                key.label === "Ctrl" && ctrlMode && "bg-primary text-primary-foreground",
-              )}
-            >
-              {key.label}
-            </button>
-          ))}
-        </div>
+        <>
+          <TerminalMobileToolbar
+            ctrlMode={ctrlMode}
+            onToggleCtrl={() => setCtrlMode(!ctrlMode)}
+            selectMode={selectMode}
+            onToggleSelect={() => setSelectMode(!selectMode)}
+            onKey={sendKey}
+            onCopy={() => void handleCopy()}
+            onPaste={() => void handlePaste()}
+            onSendToChat={handleSendToChat}
+            onOpenLinks={() => setLinksOpen(true)}
+          />
+          <TerminalLinksSheet
+            open={linksOpen}
+            onClose={() => setLinksOpen(false)}
+            urls={linksOpen ? getBufferUrls() : []}
+          />
+        </>
       )}
     </div>
   );

package/src/web/components/ui/mobile-bottom-sheet.tsx

@@ -78,17 +78,34 @@ export function BottomSheet({ open, onClose, children, className, zIndex = 50 }:
         onClick={(e) => e.stopPropagation()}
         {...swipeHandlers}
       >
-        {/* Drag handle */}
-        <div className="flex justify-center pt-3 pb-1">
+        {/* Drag handle. shrink-0 so a flex-column sheet gives it its own height
+            instead of letting `h-full`/`flex-1` content overflow past it. */}
+        <div className="flex justify-center pt-3 pb-1 shrink-0">
           <div className="w-10 h-1 rounded-full bg-border" />
         </div>
         {children}
       </div>
     </div>,
-    document.body,
+    sheetPortalTarget(),
   );
 }
 
+/**
+ * Portal target for every sheet: the React root, never `document.body`.
+ *
+ * TabPool reparents live tab DOM into panel slots with `appendChild`, and on
+ * mobile the dock's slot lives inside a sheet. A body-level portal would put
+ * that node outside the root container React binds its delegated listeners to,
+ * so React resolves the node's root container (`#root`) against the container
+ * the event fired on (`body`), finds no match, and drops the event — every
+ * button inside a dock tab goes dead while native listeners still fire.
+ * `#root` carries no styles, so keeping the portal inside it leaves stacking
+ * order untouched.
+ */
+function sheetPortalTarget(): HTMLElement {
+  return document.getElementById("root") ?? document.body;
+}
+
 /* ------------------------------------------------------------------ */
 /*  Context-menu-specific helpers (used by adaptive-context-menu)       */
 /* ------------------------------------------------------------------ */

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

@@ -11,6 +11,13 @@ interface DraftState {
   attachments: DraftAttachment[];
 }
 
+/**
+ * How long the chat composer may stay hidden waiting for a draft. The composer
+ * is gated on `draftLoading`, so a slow or stalled load must not leave the user
+ * with no way to type.
+ */
+const GATE_RELEASE_MS = 3_000;
+
 interface DraftResult {
   content: string;
   attachments: string; // JSON string
@@ -34,6 +41,11 @@ export function useDraft(projectName: string, sessionId: string | null) {
     }
     let cancelled = false;
     setLoading(true);
+    // Releasing the gate only reveals the composer; a draft arriving afterwards
+    // is still applied, and MessageInput refuses to overwrite typed text.
+    const releaseTimer = setTimeout(() => {
+      if (!cancelled) setLoading(false);
+    }, GATE_RELEASE_MS);
     api
       .get<DraftResult | null>(
         `${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(effectiveId)}`,
@@ -49,8 +61,11 @@ export function useDraft(projectName: string, sessionId: string | null) {
         }
       })
       .catch(() => { if (!cancelled) setDraft(null); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-    return () => { cancelled = true; };
+      .finally(() => {
+        clearTimeout(releaseTimer);
+        if (!cancelled) setLoading(false);
+      });
+    return () => { cancelled = true; clearTimeout(releaseTimer); };
   }, [projectName, effectiveId]);
 
   // Debounced save (1s)

package/src/web/hooks/use-terminal-touch-selection.ts

@@ -0,0 +1,87 @@
+/**
+ * Drag-to-select for xterm on touch devices.
+ *
+ * xterm has no touch selection at all: `SelectionService` is driven by a
+ * `mousedown` on the `.xterm` element followed by `mousemove`/`mouseup` on the
+ * owning document, and nothing translates touch into those. This hook feeds it
+ * synthetic mouse events from a one-finger drag, so selection, its highlight and
+ * `term.getSelection()` all behave exactly as they do with a mouse.
+ *
+ * Only active while the caller has select mode switched on — the same gesture
+ * otherwise scrolls the viewport, and silently stealing it would strand the user
+ * with no way to scroll back.
+ */
+import { useEffect, type RefObject } from "react";
+
+function mouseEventFrom(type: string, touch: Touch, buttons: number): MouseEvent {
+  return new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX: touch.clientX,
+    clientY: touch.clientY,
+    screenX: touch.screenX,
+    screenY: touch.screenY,
+    button: 0,
+    buttons,
+    // Click count. xterm branches on it to pick single/word/line selection and
+    // ignores the event entirely at the default of 0, so a drag would start no
+    // selection at all without this.
+    detail: 1,
+  });
+}
+
+export function useTerminalTouchSelection(
+  containerRef: RefObject<HTMLDivElement | null>,
+  enabled: boolean,
+) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) return;
+
+    // `.xterm` is where SelectionService listens for mousedown; dispatching on
+    // the screen element would work too but this keeps the target explicit.
+    const xterm = container.querySelector(".xterm");
+    if (!xterm) return;
+
+    // Capture phase so these run before xterm's own document-level touch
+    // gesture handler, and stopPropagation keeps that handler from scrolling
+    // the viewport out from under the drag.
+    const onTouchStart = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch || e.touches.length > 1) return;
+      e.preventDefault();
+      e.stopPropagation();
+      xterm.dispatchEvent(mouseEventFrom("mousedown", touch, 1));
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      if (!touch) return;
+      e.preventDefault();
+      e.stopPropagation();
+      document.dispatchEvent(mouseEventFrom("mousemove", touch, 1));
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      const touch = e.changedTouches[0];
+      if (!touch) return;
+      e.preventDefault();
+      e.stopPropagation();
+      document.dispatchEvent(mouseEventFrom("mouseup", touch, 0));
+    };
+
+    const opts = { capture: true, passive: false } as const;
+    container.addEventListener("touchstart", onTouchStart, opts);
+    container.addEventListener("touchmove", onTouchMove, opts);
+    container.addEventListener("touchend", onTouchEnd, opts);
+    container.addEventListener("touchcancel", onTouchEnd, opts);
+
+    return () => {
+      container.removeEventListener("touchstart", onTouchStart, opts);
+      container.removeEventListener("touchmove", onTouchMove, opts);
+      container.removeEventListener("touchend", onTouchEnd, opts);
+      container.removeEventListener("touchcancel", onTouchEnd, opts);
+    };
+  }, [containerRef, enabled]);
+}

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

@@ -34,9 +34,17 @@ interface UseTerminalReturn {
   getSelection: () => string;
   /** Read buffer from last command start to current cursor (for "Send to Chat"). */
   getLastCommandOutput: () => string;
+  /** URLs present in the scrollback, most recent first. */
+  getBufferUrls: () => string[];
   restart: () => void;
 }
 
+/** Trailing punctuation that ends a sentence rather than the URL itself. */
+const URL_TRAILING_PUNCT = /[).,;:'"\]}>]+$/;
+const URL_PATTERN = /\bhttps?:\/\/[^\s<>"'`]+/g;
+/** Cap the scan so a 50k-line scrollback never blocks the tap that triggered it. */
+const URL_SCAN_MAX_ROWS = 5000;
+
 const RESIZE_PREFIX = "\x01RESIZE:";
 const PING_MSG = "\x01PING";
 const PONG_MSG = "\x01PONG";
@@ -101,6 +109,50 @@ export function useTerminal(
     return lines.join("\n");
   }, []);
 
+  /**
+   * Collect URLs from the scrollback.
+   *
+   * xterm's link addon activates a link from a mouse hover followed by mouseup,
+   * neither of which a touch device produces, so on mobile this list is the only
+   * way to reach a URL the shell printed (an `aws sso login` code, for example).
+   * Wrapped lines are joined first — a URL long enough to matter is usually the
+   * one that got split across rows.
+   */
+  const getBufferUrls = useCallback(() => {
+    const term = termRef.current;
+    if (!term) return [];
+    const buf = term.buffer.active;
+    const endRow = buf.baseY + buf.cursorY;
+    const startRow = Math.max(0, endRow - URL_SCAN_MAX_ROWS);
+
+    const logical: string[] = [];
+    let current = "";
+    for (let i = startRow; i <= endRow; i++) {
+      const line = buf.getLine(i);
+      if (!line) continue;
+      current += line.translateToString(true);
+      // isWrapped marks a row as the continuation of the previous one, so the
+      // break is a display artefact and must not split the URL.
+      const next = buf.getLine(i + 1);
+      if (next?.isWrapped) continue;
+      logical.push(current);
+      current = "";
+    }
+    if (current) logical.push(current);
+
+    const seen = new Set<string>();
+    const urls: string[] = [];
+    for (const text of logical) {
+      for (const match of text.match(URL_PATTERN) ?? []) {
+        const url = match.replace(URL_TRAILING_PUNCT, "");
+        if (!url || seen.has(url)) continue;
+        seen.add(url);
+        urls.push(url);
+      }
+    }
+    return urls.reverse();
+  }, []);
+
   const sendResize = useCallback(() => {
     const term = termRef.current;
     const ws = wsRef.current;
@@ -344,5 +396,5 @@ export function useTerminal(
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  return { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, restart };
+  return { connected, reconnecting, exited, sendData, getSelection, getLastCommandOutput, getBufferUrls, restart };
 }

package/src/web/lib/api-client.ts

@@ -16,11 +16,30 @@ function warnOnAuditFailure(res: Response): void {
 /** GETs currently awaiting a response, keyed by absolute URL. See ApiClient.get. */
 const pendingGets = new Map<string, Promise<unknown>>();
 
-class ApiClient {
+/**
+ * How long a GET may wait for response headers. Browsers do not time a stalled
+ * fetch out on their own, and a request that never settles keeps its
+ * `pendingGets` slot forever — every later caller of that URL then inherits the
+ * stall, and UI gated on the response stays hidden until a page reload.
+ *
+ * The clock stops once headers arrive, so transcripts, file reads and other
+ * large bodies may still take as long as the connection needs. Generous enough
+ * for endpoints that spawn a CLI or hit a registry before answering.
+ */
+const RESPONSE_TIMEOUT_MS = 30_000;
+
+/** `reason` is only guaranteed on newer engines; never propagate `undefined`. */
+function abortReason(signal: AbortSignal): unknown {
+  return signal.reason ?? new DOMException("Aborted", "AbortError");
+}
+
+export class ApiClient {
   private baseUrl: string;
+  private responseTimeoutMs: number;
 
-  constructor(baseUrl = "") {
+  constructor(baseUrl = "", responseTimeoutMs = RESPONSE_TIMEOUT_MS) {
     this.baseUrl = baseUrl;
+    this.responseTimeoutMs = responseTimeoutMs;
   }
 
   private getToken(): string | null {
@@ -61,11 +80,35 @@ class ApiClient {
   }
 
   private async rawGet<T>(path: string, signal?: AbortSignal): Promise<T> {
-    const res = await fetch(`${this.baseUrl}${path}`, {
-      headers: this.headers(),
-      signal,
-    });
-    return this.handleResponse<T>(res);
+    if (signal?.aborted) throw abortReason(signal);
+
+    const controller = new AbortController();
+    const timer = setTimeout(
+      () =>
+        controller.abort(
+          new DOMException(
+            `No response after ${this.responseTimeoutMs}ms: ${path}`,
+            "TimeoutError",
+          ),
+        ),
+      this.responseTimeoutMs,
+    );
+    const forwardAbort = () => controller.abort(abortReason(signal!));
+    signal?.addEventListener("abort", forwardAbort, { once: true });
+
+    try {
+      const res = await fetch(`${this.baseUrl}${path}`, {
+        headers: this.headers(),
+        signal: controller.signal,
+      });
+      // Headers are in, so the connection answered — stop the clock before
+      // reading the body, which may legitimately be large and slow.
+      clearTimeout(timer);
+      return await this.handleResponse<T>(res);
+    } finally {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", forwardAbort);
+    }
   }
 
   async post<T>(path: string, body?: unknown): Promise<T> {

package/dist/web/assets/api-client-DNTkryX1.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import{r as e,t}from"./api-client-DhXpjLdi.js";export{t as api,e as projectUrl};

package/dist/web/assets/api-settings-Bp5HXQCW.js

@@ -1 +0,0 @@
-import"./vendor-markdown-CKTlmXbz.js";import"./vendor-ui-DMRGWRuc.js";import"./api-client-DhXpjLdi.js";import{v as e}from"./api-settings-BUYvGBdi.js";export{e as updateDeviceName};