@saadnvd1/agent-os 0.3.544 → 0.3.546

package/app/page.tsx

@@ -46,6 +46,7 @@ import type { TerminalHandle } from "@/components/Terminal";
 import { getProvider } from "@/lib/providers";
 import { CLAUDE_STATUS_SETTINGS_FLAG } from "@/lib/program-status/claude-flag";
 import { DesktopView } from "@/components/views/DesktopView";
+import { focusComposerInGesture } from "@/components/Chat/composer/autofocus";
 import { MobileView } from "@/components/views/MobileView";
 import { getPendingPrompt, clearPendingPrompt } from "@/stores/initialPrompt";
 import { useDraftKeys } from "@/hooks/useDraftKeys";
@@ -533,6 +534,20 @@ function HomeContent() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  // Picking a session with a tap, ⌘K or the keyboard: the composer is focused
+  // inside the gesture, which iOS requires. Other ways in (URL, notification,
+  // a session just created) use attachToSession's later focus.
+  const selectSession = useCallback(
+    (session: Session) => {
+      focusComposerInGesture(
+        document.querySelector(`[data-pane-id="${focusedPaneId}"]`),
+        session
+      );
+      void attachToSession(session);
+    },
+    [attachToSession, focusedPaneId]
+  );
+
   // Session selection handler
   const handleSelectSession = useCallback(
     (sessionId: string) => {
@@ -661,7 +676,7 @@ function HomeContent() {
 
   useAppCommands({
     sessions,
-    onSelectSession: attachToSession,
+    onSelectSession: selectSession,
     onSearchCode: () => setShowQuickSwitcher(true),
   });
   useMoveCommands(activeSession);
@@ -683,6 +698,7 @@ function HomeContent() {
     setShowQuickSwitcher,
     notificationSettings,
     attachToSession,
+    selectSession,
     openSessionInNewTab,
     handleNewSessionInProject,
     handleOpenTerminal,

package/components/Chat/composer/ComposerBody.tsx

@@ -30,6 +30,7 @@ import { useImageDrop } from "./useImageDrop";
 import type { MenuKey } from "./keys";
 import { useComposerEditor, type ComposerHandlers } from "./useComposerEditor";
 import { useFocusOnShow } from "./autofocus";
+import { usePhoneLayout } from "./layout";
 
 // Handled here rather than sent: picking it opens the model picker.
 const MODEL_COMMAND: ChatCommand = {
@@ -108,6 +109,7 @@ export function ComposerBody({
   const [modelOpen, setModelOpen] = useState(false);
   const handlers = useRef<ComposerHandlers | null>(null);
   const coarse = useCoarsePointer();
+  const phone = usePhoneLayout();
   const [historyIndex, setHistoryIndex] = useState(-1);
   // The editor shows it only while it's empty, as its placeholder.
   const { editor, text, setText, caret, plain, setPlain } = useComposerEditor({
@@ -138,7 +140,7 @@ export function ComposerBody({
     setImages(saved?.images ?? []);
     setFiles(saved?.files ?? []);
   }, [draftKey, editor, setText]);
-  useFocusOnShow(editor, focusKey, coarse, disabled);
+  useFocusOnShow(editor, focusKey, phone, disabled);
 
   const prefilled = useRef<number | null>(null);
   const inserted = useRef<number | null>(null);

package/components/Chat/composer/autofocus.test.ts

@@ -3,7 +3,13 @@ import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { Editor } from "@tiptap/react";
-import { DIALOG_WAIT_MS, focusVerdict, useFocusOnShow } from "./autofocus";
+import {
+  DIALOG_WAIT_MS,
+  focusComposerInGesture,
+  focusVerdict,
+  useFocusOnShow,
+} from "./autofocus";
+import { isPhoneLayout } from "./layout";
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -35,6 +41,131 @@ beforeEach(() => {
   document.getSelection()?.removeAllRanges();
 });
 
+function stubMedia(matches: Record<string, boolean>) {
+  window.matchMedia = ((q: string) => ({
+    matches: matches[q] ?? false,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  })) as never;
+}
+
+afterEach(() => {
+  delete (window as { matchMedia?: unknown }).matchMedia;
+  document.querySelectorAll("[data-composer-proxy]").forEach((e) => e.remove());
+});
+
+describe("focusComposerInGesture", () => {
+  const chat = { view: "chat" };
+  let paneA: HTMLElement;
+  let paneB: HTMLElement;
+  let hostEl: HTMLElement;
+  const panelOf = (pane: HTMLElement) =>
+    pane.querySelector("[data-composer-scope]")!;
+
+  // Two panes, each with a chat panel and composer. jsdom has no layout, so
+  // a hidden tab is a panel marked data-hidden that reports no client rects.
+  beforeEach(() => {
+    hostEl = document.createElement("div");
+    hostEl.innerHTML = ["a", "b"]
+      .map(
+        (id) =>
+          `<div data-pane-id="${id}"><div data-composer-scope tabindex="-1"><div class="chat-composer"><div id="ed-${id}" contenteditable="true"></div></div></div></div>`
+      )
+      .join("");
+    document.body.append(hostEl);
+    paneA = hostEl.querySelector('[data-pane-id="a"]')!;
+    paneB = hostEl.querySelector('[data-pane-id="b"]')!;
+    vi.spyOn(HTMLElement.prototype, "getClientRects").mockImplementation(
+      function (this: HTMLElement) {
+        return this.closest("[data-hidden]") ? ([] as never) : ([{}] as never);
+      } as never
+    );
+    // The page's own composer is gone: only the panes have one.
+    editorDom.parentElement!.remove();
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+    hostEl.remove();
+  });
+
+  it("focuses the composer in the target pane, not another pane's", () => {
+    stubMedia({ "(pointer: coarse)": true });
+    sidebarRow.focus();
+    focusComposerInGesture(paneB, chat);
+    expect(document.activeElement?.id).toBe("ed-b");
+    sidebarRow.focus();
+    focusComposerInGesture(paneA, chat);
+    expect(document.activeElement?.id).toBe("ed-a");
+  });
+
+  it("skips a hidden tab's composer and falls back to the proxy", () => {
+    stubMedia({});
+    panelOf(paneB).setAttribute("data-hidden", "");
+    sidebarRow.focus();
+    focusComposerInGesture(paneB, chat);
+    expect(document.activeElement?.hasAttribute("data-composer-proxy")).toBe(
+      true
+    );
+    expect(document.activeElement?.id).not.toBe("ed-b");
+  });
+
+  it("never for a terminal session", () => {
+    stubMedia({});
+    sidebarRow.focus();
+    focusComposerInGesture(paneB, { view: "terminal" });
+    expect(document.activeElement).toBe(sidebarRow);
+    expect(document.querySelector("[data-composer-proxy]")).toBeNull();
+  });
+
+  it("does nothing in the phone layout", () => {
+    stubMedia({ "(max-width: 767px)": true });
+    sidebarRow.focus();
+    focusComposerInGesture(paneB, chat);
+    expect(document.activeElement).toBe(sidebarRow);
+    expect(document.querySelector("[data-composer-proxy]")).toBeNull();
+  });
+
+  it("leaves someone typing elsewhere, or working in the panel, alone", () => {
+    stubMedia({});
+    search.focus();
+    focusComposerInGesture(paneB, chat);
+    expect(document.activeElement).toBe(search);
+    // Focus inside a panel with no composer showing keeps the proxy away too.
+    const inPanel = document.createElement("button");
+    panelOf(paneB).append(inPanel);
+    panelOf(paneB).querySelector(".chat-composer")!.remove();
+    inPanel.focus();
+    focusComposerInGesture(paneB, chat);
+    expect(document.activeElement).toBe(inPanel);
+    expect(document.querySelector("[data-composer-proxy]")).toBeNull();
+  });
+
+  it("the hook hands the proxy's focus to the editor and drops the proxy", async () => {
+    stubMedia({});
+    panelOf(paneB).setAttribute("data-hidden", "");
+    sidebarRow.focus();
+    focusComposerInGesture(paneB, chat);
+    const proxy = document.querySelector("[data-composer-proxy]")!;
+    const dom = hostEl.querySelector<HTMLElement>("#ed-a")!;
+    const editor = {
+      view: { dom },
+      commands: { focus: () => dom.focus() },
+      isEditable: true,
+      on: () => {},
+      off: () => {},
+    } as never;
+    function Probe() {
+      useFocusOnShow(editor, "a", false);
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    await act(() => root.render(createElement(Probe)));
+    expect(document.activeElement).toBe(dom);
+    expect(proxy.isConnected).toBe(false);
+    await act(() => root.unmount());
+  });
+});
+
 describe("focusVerdict", () => {
   it("takes the caret from nothing, a sidebar row, or itself", () => {
     (document.activeElement as HTMLElement | null)?.blur();
@@ -45,11 +176,17 @@ describe("focusVerdict", () => {
     expect(focusVerdict(editorDom, false)).toBe("take");
   });
 
-  it("never on a touch screen, where it raises the keyboard", () => {
+  it("never in the phone layout, where it raises the keyboard", () => {
     sidebarRow.focus();
     expect(focusVerdict(editorDom, true)).toBe("leave");
   });
 
+  it("does in the desktop layout on a coarse pointer (iPad)", () => {
+    stubMedia({ "(pointer: coarse)": true, "(max-width: 767px)": false });
+    sidebarRow.focus();
+    expect(focusVerdict(editorDom, isPhoneLayout())).toBe("take");
+  });
+
   it("leaves someone typing in another field (search, rename) alone", () => {
     search.focus();
     expect(focusVerdict(editorDom, false)).toBe("leave");

package/components/Chat/composer/autofocus.ts

@@ -1,12 +1,19 @@
 import { useEffect, useRef } from "react";
 import type { Editor } from "@tiptap/react";
+import { isPhoneLayout } from "./layout";
 
 // Whether a composer just shown (a session or draft opened) may take the
-// caret, so its conversation can be typed into straight away. Not on a touch
-// screen, where it would raise the keyboard over the conversation, and never
-// from someone busy elsewhere: typing in another field, selecting text, or
-// already working inside this panel. With a dialog or menu open it waits:
-// one that opened the session (⌘K) is about to close and hand focus back.
+// caret, so its conversation can be typed into straight away. Not in the phone
+// layout (MobileView), where it would raise the keyboard over the
+// conversation, and never from someone busy elsewhere: typing in another
+// field, selecting text, or already working inside this panel. With a dialog
+// or menu open it waits: one that opened the session (⌘K) is about to close
+// and hand focus back.
+//
+// The rule follows the layout, not `pointer: coarse`: an iPad shows the
+// desktop layout with a coarse pointer (often with a keyboard attached), and
+// is meant to type straight away. A raised on-screen keyboard there is
+// accepted. Width is what picks the layout, so touch laptops are covered too.
 
 // Something open on top that keeps the focus it has.
 const OPEN_ON_TOP = [
@@ -23,29 +30,86 @@ const EDITABLE =
 
 export type FocusVerdict = "take" | "wait" | "leave";
 
+// A hidden field focused inside a tap, to be handed to the editor once it
+// mounts (see focusComposerInGesture).
+const PROXY = "[data-composer-proxy]";
+
 export function focusVerdict(
   editor: HTMLElement,
-  coarse: boolean
+  phone: boolean
+): FocusVerdict {
+  if (phone) return "leave";
+  return verdictFor(editor.ownerDocument, editor);
+}
+
+function verdictFor(
+  doc: Document,
+  editor: HTMLElement | null,
+  panel: Element | null = editor?.closest("[data-composer-scope]") ?? null
 ): FocusVerdict {
-  if (coarse) return "leave";
-  const doc = editor.ownerDocument;
   if (doc.querySelector(OPEN_ON_TOP)) return "wait";
   const selection = doc.getSelection();
   if (
     selection &&
     !selection.isCollapsed &&
-    !editor.contains(selection.anchorNode)
+    !editor?.contains(selection.anchorNode)
   )
     return "leave";
   const active = doc.activeElement;
-  if (!active || active === doc.body || editor.contains(active)) return "take";
+  if (!active || active === doc.body || editor?.contains(active)) return "take";
   // Still in a dialog on its way out (⌘K's search box as it closes).
   if (active.closest(DIALOG)) return "wait";
+  if (active.closest(PROXY)) return "take";
   if (active.closest(EDITABLE)) return "leave";
   // The panel it belongs to (a chat, a draft): focus already inside it stays
   // where the user put it.
-  const scope = editor.closest("[data-composer-scope]");
-  return scope && scope !== active && scope.contains(active) ? "leave" : "take";
+  return panel && panel !== active && panel.contains(active) ? "leave" : "take";
+}
+
+const PANEL = "[data-composer-scope]";
+const COMPOSER = '.chat-composer [contenteditable="true"]';
+const PROXY_MS = 3000;
+
+// Hidden tabs are display:none, and every tab of every pane stays mounted.
+const visible = (el: Element) => el.getClientRects().length > 0;
+
+// iOS WebKit only honours focus() inside the tap or key press that asked for
+// it, and a session's composer is focused later (after it reconnects). So the
+// handler that selects a chat session from a real gesture (a sidebar tap, ⌘K,
+// the keyboard switch) calls this, synchronously: it focuses the composer
+// showing in `pane` (the one the session opens into) if there is one, else a
+// hidden field that useFocusOnShow hands over to the editor when it mounts
+// (focus moving on from a focused element is allowed). Never for a terminal
+// session, whose keystrokes the hidden field would take. Other browsers don't
+// need it; the late focus works there.
+export function focusComposerInGesture(
+  pane: Element | null,
+  session: { view?: string },
+  doc: Document = document
+) {
+  if (session.view !== "chat" || isPhoneLayout()) return;
+  const panel =
+    [...(pane?.querySelectorAll(PANEL) ?? [])].find(visible) ?? null;
+  const editor =
+    [...(panel?.querySelectorAll<HTMLElement>(COMPOSER) ?? [])].find(visible) ??
+    null;
+  if (verdictFor(doc, editor, panel) !== "take") return;
+  if (editor) {
+    editor.focus({ preventScroll: true });
+    return;
+  }
+  if (doc.querySelector(PROXY)) return;
+  const proxy = doc.createElement("textarea");
+  proxy.setAttribute("data-composer-proxy", "");
+  proxy.setAttribute("aria-hidden", "true");
+  proxy.tabIndex = -1;
+  // 16px: iOS zooms into smaller fields. Offscreen, not display:none, which
+  // can't take focus.
+  proxy.style.cssText =
+    "position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;font-size:16px";
+  doc.body.append(proxy);
+  proxy.focus({ preventScroll: true });
+  setTimeout(() => proxy.remove(), PROXY_MS);
 }
 
 // How long a session opened from a dialog waits for it to close.
@@ -58,7 +122,7 @@ export const DIALOG_WAIT_MS = 1500;
 export function useFocusOnShow(
   editor: Editor | null,
   key: string | null | undefined,
-  coarse: boolean,
+  phone: boolean,
   disabled = false
 ) {
   const shown = useRef<string | null>(null);
@@ -95,6 +159,7 @@ export function useFocusOnShow(
     const take = (at: "end" | null) => {
       pending.current = null;
       editor.commands.focus(at, { scrollIntoView: false });
+      doc.querySelectorAll(PROXY).forEach((el) => el.remove());
       holding.current = true;
     };
     if (pending.current === null) {
@@ -105,7 +170,7 @@ export function useFocusOnShow(
     let timer: ReturnType<typeof setTimeout> | undefined;
     // `settled`: no dialog was seen closing just now.
     const decide = (settled: boolean) => {
-      const verdict = focusVerdict(editor.view.dom, coarse);
+      const verdict = focusVerdict(editor.view.dom, phone);
       if (verdict === "take" && settled) return take("end");
       // A dialog just closed and hands focus back on a timer of its own:
       // decide after that.
@@ -116,5 +181,5 @@ export function useFocusOnShow(
     };
     decide(true);
     return () => clearTimeout(timer);
-  }, [editor, key, coarse, disabled]);
+  }, [editor, key, phone, disabled]);
 }

package/components/Chat/composer/layout.ts

@@ -0,0 +1,20 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+// The phone layout (MobileView) is the one under 768px, as in useViewport.
+const QUERY = "(max-width: 767px)";
+
+export function isPhoneLayout(): boolean {
+  return window.matchMedia(QUERY).matches;
+}
+
+function subscribe(listener: () => void) {
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", listener);
+  return () => mq.removeEventListener("change", listener);
+}
+
+export function usePhoneLayout(): boolean {
+  return useSyncExternalStore(subscribe, isPhoneLayout, () => false);
+}

package/components/Pane/index.tsx

@@ -415,6 +415,7 @@ export const Pane = memo(function Pane({
           "bg-card rounded-xl shadow-(--elevation) ring-1 transition-shadow duration-200",
         !isMobile && (isFocused ? "ring-primary/40" : "ring-foreground/[0.07]")
       )}
+      data-pane-id={paneId}
       onClick={handleFocus}
     >
       {/* Tab Bar - Mobile vs Desktop */}

package/components/views/DesktopView.tsx

@@ -18,6 +18,7 @@ export function DesktopView({
   setShowQuickSwitcher,
   notificationSettings,
   attachToSession,
+  selectSession,
   openSessionInNewTab,
   handleNewSessionInProject,
   handleOpenTerminal,
@@ -38,7 +39,7 @@ export function DesktopView({
         sessionStatuses={sessionStatuses}
         onSelect={(id) => {
           const session = sessions.find((s) => s.id === id);
-          if (session) attachToSession(session);
+          if (session) selectSession(session);
         }}
         onOpenInTab={(id) => {
           const session = sessions.find((s) => s.id === id);
@@ -82,7 +83,7 @@ export function DesktopView({
         activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
         onSelectSession={(sessionId) => {
           const session = sessions.find((s) => s.id === sessionId);
-          if (session) attachToSession(session);
+          if (session) selectSession(session);
         }}
         onSelectFile={(file, line) => {
           // Convert relative path to absolute by prepending working directory

package/components/views/types.ts

@@ -43,6 +43,7 @@ export interface ViewProps {
 
   // Handlers
   attachToSession: (session: Session) => void;
+  selectSession: (session: Session) => void;
   openSessionInNewTab: (session: Session) => void;
   handleNewSessionInProject: (projectId: string) => void;
   handleOpenTerminal: (projectId: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.544",
+  "version": "0.3.546",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"