@opengeni/react 0.11.0 → 0.13.0

package/src/components/workspace-dock.tsx

@@ -1,4 +1,13 @@
-import { type ReactNode, useCallback, useEffect, useLayoutEffect, useState } from "react";
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   ChevronsLeftRightIcon,
   Maximize2Icon,
@@ -6,13 +15,7 @@ import {
   PanelRightCloseIcon,
   XIcon,
 } from "lucide-react";
-import {
-  Group,
-  Panel,
-  Separator,
-  useDefaultLayout,
-  usePanelRef,
-} from "react-resizable-panels";
+import { Group, Panel, Separator, useDefaultLayout, usePanelRef } from "react-resizable-panels";
 import { cn } from "../lib/cn";
 
 export type WorkspaceTab = {
@@ -34,6 +37,13 @@ export type WorkspaceDockProps = {
   /** Controlled collapsed state for hosts that expose their own dock toggle. */
   collapsed?: boolean | undefined;
   onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+  /** A status accessory pinned to the right of the tab strip, left of the
+   *  maximize/collapse controls (e.g. the machine-state chip). Renders in both
+   *  the docked header and the full-screen overlay header. */
+  headerAccessory?: ReactNode | undefined;
+  /** Optional host navigation shown at the start of the phone overlay header.
+   *  It is intentionally absent from desktop dock chrome. */
+  mobileLeadingControl?: ReactNode | undefined;
   /** Persisted layout id (localStorage key) for react-resizable-panels. */
   autoSaveId?: string | undefined;
   /** Default dock width as a percent of the session area. */
@@ -94,6 +104,8 @@ export function WorkspaceDock({
   onActiveTabChange,
   collapsed: collapsedProp,
   onCollapsedChange,
+  headerAccessory,
+  mobileLeadingControl,
   autoSaveId = "og.session.dock",
   defaultSize = 34,
   minSize = 22,
@@ -120,9 +132,11 @@ export function WorkspaceDock({
     id: autoSaveId,
   } as Parameters<typeof useDefaultLayout>[0]);
 
-  const current = activeTab ?? internalTab;
-  const tabIds = tabs.map((tab) => tab.id).join("\u0000");
+  const requestedTab = activeTab ?? internalTab;
+  const tabIds = tabs.map((tab) => tab.id);
   const firstTabId = tabs[0]?.id ?? "";
+  const requestedTabIsValid = tabIds.includes(requestedTab);
+  const current = requestedTabIsValid ? requestedTab : firstTabId;
   const setTab = useCallback(
     (id: string) => {
       setInternalTab(id);
@@ -152,12 +166,12 @@ export function WorkspaceDock({
 
   // Keep the active tab valid if the available tabs change.
   useEffect(() => {
-    if (firstTabId && !tabs.some((t) => t.id === current)) {
+    if (firstTabId && !requestedTabIsValid) {
       setTab(firstTabId);
     }
     // Depend on tab identity, not the tab content objects. Session live events
     // rebuild tab JSX frequently; only id changes can invalidate the active tab.
-  }, [tabIds, firstTabId, current, setTab]);
+  }, [firstTabId, requestedTabIsValid, setTab]);
 
   const collapse = useCallback(() => {
     dockPanelRef.current?.collapse();
@@ -203,6 +217,8 @@ export function WorkspaceDock({
               tabs={tabs}
               current={current}
               onTab={setTab}
+              leading={mobileLeadingControl}
+              accessory={headerAccessory}
               controls={
                 <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
                   <XIcon className="size-4" />
@@ -220,6 +236,7 @@ export function WorkspaceDock({
       tabs={tabs}
       current={current}
       onTab={setTab}
+      accessory={headerAccessory}
       controls={
         <>
           <ChromeButton
@@ -227,7 +244,11 @@ export function WorkspaceDock({
             title={maximized ? "Restore (Esc)" : "Maximize"}
             label={maximized ? "Restore dock" : "Maximize dock"}
           >
-            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
+            {maximized ? (
+              <Minimize2Icon className="size-3.5" />
+            ) : (
+              <Maximize2Icon className="size-3.5" />
+            )}
           </ChromeButton>
           {hostControlled ? null : (
             <ChromeButton onClick={collapse} title="Collapse" label="Collapse dock">
@@ -299,11 +320,7 @@ export function WorkspaceDock({
       )}
 
       {/* Maximize overlay: full-workspace surface above everything. */}
-      {maximized && (
-        <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">
-          {dockChrome}
-        </div>
-      )}
+      {maximized && <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">{dockChrome}</div>}
     </div>
   );
 }
@@ -326,7 +343,7 @@ function ChromeButton({
       onClick={onClick}
       title={title}
       aria-label={label}
-      className="inline-flex items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:size-10"
+      className="inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg max-[1023px]:size-11 pointer-coarse:size-11"
     >
       {children}
     </button>
@@ -337,34 +354,73 @@ function DockChrome({
   tabs,
   current,
   onTab,
+  leading,
+  accessory,
   controls,
 }: {
   tabs: WorkspaceTab[];
   current: string;
   onTab: (id: string) => void;
+  /** Host navigation at the start of mobile overlay chrome. */
+  leading?: ReactNode | undefined;
+  /** A status accessory (machine chip) between the tab strip and the controls. */
+  accessory?: ReactNode | undefined;
   /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
   controls: ReactNode;
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
+  const activeIndex = tabs.findIndex((tab) => tab.id === active?.id);
+  const tabsetId = useId();
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const panelId = `${tabsetId}-panel`;
+
+  const activateTab = (index: number) => {
+    const tab = tabs[index];
+    if (!tab) return;
+    onTab(tab.id);
+    tabRefs.current[index]?.focus();
+  };
+
+  const onTabKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {
+    if (tabs.length === 0) return;
+    let nextIndex: number | null = null;
+    if (event.key === "ArrowRight") nextIndex = (index + 1) % tabs.length;
+    else if (event.key === "ArrowLeft") nextIndex = (index - 1 + tabs.length) % tabs.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = tabs.length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    activateTab(nextIndex);
+  };
+
   return (
     <>
       <div className="flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1">
+        {leading ? <div className="flex shrink-0 items-center">{leading}</div> : null}
         {/* The tab list scrolls horizontally when it can't fit — it must never
             grow into or overlap the chrome controls (they stay shrink-0). The
             scrollbar is hidden to keep the strip calm. */}
         <div
           className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           role="tablist"
+          aria-orientation="horizontal"
         >
-          {tabs.map((tab) => (
+          {tabs.map((tab, index) => (
             <button
               key={tab.id}
+              ref={(node) => {
+                tabRefs.current[index] = node;
+              }}
+              id={`${tabsetId}-tab-${index}`}
               type="button"
               role="tab"
               aria-selected={tab.id === current}
+              aria-controls={panelId}
+              tabIndex={tab.id === current ? 0 : -1}
               onClick={() => onTab(tab.id)}
+              onKeyDown={(event) => onTabKeyDown(event, index)}
               className={cn(
-                "flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors pointer-coarse:min-h-10",
+                "flex min-h-7 shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
                 tab.id === current
                   ? "bg-og-accent-soft text-og-fg"
                   : "text-og-fg-subtle hover:text-og-fg",
@@ -375,9 +431,16 @@ function DockChrome({
             </button>
           ))}
         </div>
+        {accessory ? <div className="flex shrink-0 items-center">{accessory}</div> : null}
         <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle">{controls}</div>
       </div>
-      <div className="min-h-0 min-w-0 flex-1 overflow-hidden" role="tabpanel">
+      <div
+        id={panelId}
+        aria-label={activeIndex < 0 ? "Workspace" : undefined}
+        aria-labelledby={activeIndex >= 0 ? `${tabsetId}-tab-${activeIndex}` : undefined}
+        className="min-h-0 min-w-0 flex-1 overflow-hidden"
+        role="tabpanel"
+      >
         {active?.content}
       </div>
     </>

package/src/hooks/internal.ts

@@ -13,7 +13,10 @@ export type AsyncListState<T> = {
  * Shared fetch + optional polling loop for the list/read hooks. Stale
  * responses (superseded by a newer load or an unmount) are dropped.
  */
-export function usePolledValue<T>(load: () => Promise<T>, options: { pollIntervalMs?: number | undefined; enabled?: boolean | undefined } = {}): AsyncListState<T> {
+export function usePolledValue<T>(
+  load: () => Promise<T>,
+  options: { pollIntervalMs?: number | undefined; enabled?: boolean | undefined } = {},
+): AsyncListState<T> {
   const enabled = options.enabled ?? true;
   const pollIntervalMs = options.pollIntervalMs;
   const [data, setData] = useState<T | null>(null);
@@ -95,7 +98,7 @@ export function useMutationRunner(): MutationState & {
       mounted.current = false;
     };
   }, []);
-  const run = useCallback(async <T,>(operation: () => Promise<T>): Promise<T | null> => {
+  const run = useCallback(async <T>(operation: () => Promise<T>): Promise<T | null> => {
     inFlight.current += 1;
     if (mounted.current) {
       setMutating(true);

package/src/hooks/use-available-models.ts

@@ -25,10 +25,15 @@ export type UseAvailableModelsResult = {
  * provider-grouped `models` plus the `defaultModel` the picker should preselect.
  * Deployment-scoped, so it only needs the client (no workspace).
  */
-export function useAvailableModels(options: UseAvailableModelsOptions = {}): UseAvailableModelsResult {
+export function useAvailableModels(
+  options: UseAvailableModelsOptions = {},
+): UseAvailableModelsResult {
   const client = useOpenGeniClient(options);
   const load = useCallback(async () => await client.getClientConfig(), [client]);
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  const state = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
   return {
     models: state.data?.models ?? [],
     defaultModel: state.data?.defaultModel ?? null,

package/src/hooks/use-billing-usage.ts

@@ -40,7 +40,10 @@ export function useBillingUsage(options: UseBillingUsageOptions = {}): UseBillin
       }),
     [client, accountId, workspaceId],
   );
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  const state = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
   return {
     balance: state.data?.balance ?? null,
     usage: state.data?.usage ?? [],

package/src/hooks/use-codex-accounts.ts

@@ -1,7 +1,17 @@
 import { useCallback, useState } from "react";
-import type { CodexAccount, CodexAccountsResponse, CodexRotationSettings, SessionEvent } from "@opengeni/sdk";
+import type {
+  CodexAccount,
+  CodexAccountsResponse,
+  CodexRotationSettings,
+  SessionEvent,
+} from "@opengeni/sdk";
 import { useOpenGeni, type ClientOverride } from "../provider";
-import { useMutationRunner, usePolledValue, useSessionEventTrigger, type SessionEventFeedOptions } from "./internal";
+import {
+  useMutationRunner,
+  usePolledValue,
+  useSessionEventTrigger,
+  type SessionEventFeedOptions,
+} from "./internal";
 
 /** Events that change which Codex account a session runs on (or just ran). */
 export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean {
@@ -17,19 +27,27 @@ export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean
  */
 export type CodexAccountsClientLike = {
   listCodexAccounts: (workspaceId: string) => Promise<CodexAccountsResponse>;
-  getSession?: (workspaceId: string, sessionId: string) => Promise<{ codexPinnedCredentialId?: string | null; codexLastCredentialId?: string | null }>;
-  pinSessionCodexAccount?: (workspaceId: string, sessionId: string, target: string) => Promise<{ pinned: string }>;
+  getSession?: (
+    workspaceId: string,
+    sessionId: string,
+  ) => Promise<{ codexPinnedCredentialId?: string | null; codexLastCredentialId?: string | null }>;
+  pinSessionCodexAccount?: (
+    workspaceId: string,
+    sessionId: string,
+    target: string,
+  ) => Promise<{ pinned: string }>;
   /** Optional (absent ⇒ the card hides live refresh): batched live /wham/usage refresh. */
   refreshCodexUsage?: (workspaceId: string) => Promise<{ usage: Record<string, unknown> }>;
 };
 
-export type UseCodexAccountsOptions = ClientOverride & SessionEventFeedOptions & {
-  pollIntervalMs?: number | undefined;
-  /** Scope to a session so the hook resolves the pin + the effective account. */
-  sessionId?: string | undefined;
-  /** Override the client with one implementing `CodexAccountsClientLike`. */
-  codexClient?: CodexAccountsClientLike | undefined;
-};
+export type UseCodexAccountsOptions = ClientOverride &
+  SessionEventFeedOptions & {
+    pollIntervalMs?: number | undefined;
+    /** Scope to a session so the hook resolves the pin + the effective account. */
+    sessionId?: string | undefined;
+    /** Override the client with one implementing `CodexAccountsClientLike`. */
+    codexClient?: CodexAccountsClientLike | undefined;
+  };
 
 export type UseCodexAccountsResult = {
   accounts: CodexAccount[];
@@ -60,7 +78,11 @@ export type UseCodexAccountsResult = {
   mutationError: Error | null;
 };
 
-const EMPTY_SETTINGS: CodexRotationSettings = { rotationEnabled: false, rotationStrategy: "most_remaining", activeCredentialId: null };
+const EMPTY_SETTINGS: CodexRotationSettings = {
+  rotationEnabled: false,
+  rotationStrategy: "most_remaining",
+  activeCredentialId: null,
+};
 
 type CodexAccountsState = {
   accounts: CodexAccount[];
@@ -87,15 +109,16 @@ const EMPTY_STATE: CodexAccountsState = {
  */
 export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCodexAccountsResult {
   const { client, workspaceId } = useOpenGeni(options);
-  const codexClient = (options.codexClient ?? (client as unknown as CodexAccountsClientLike));
+  const codexClient = options.codexClient ?? (client as unknown as CodexAccountsClientLike);
   const sessionId = options.sessionId;
   const sharedEvents = options.events;
 
   const load = useCallback(async (): Promise<CodexAccountsState> => {
     const accountsP = codexClient.listCodexAccounts(workspaceId);
-    const sessionP = sessionId && codexClient.getSession
-      ? codexClient.getSession(workspaceId, sessionId).catch(() => null)
-      : Promise.resolve(null);
+    const sessionP =
+      sessionId && codexClient.getSession
+        ? codexClient.getSession(workspaceId, sessionId).catch(() => null)
+        : Promise.resolve(null);
     const [acc, session] = await Promise.all([accountsP, sessionP]);
     return {
       accounts: acc.accounts,
@@ -106,9 +129,16 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     };
   }, [codexClient, workspaceId, sessionId]);
 
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
-  const mutation = useMutationRunner();
-  const usageMutation = useMutationRunner();
+  const {
+    data: loadedData,
+    loading,
+    refresh,
+  } = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
+  const { run: runMutation, mutating: pinning, mutationError } = useMutationRunner();
+  const { run: runUsageMutation, mutating: refreshingUsage } = useMutationRunner();
   const [pinningTarget, setPinningTarget] = useState<string | null>(null);
 
   // Live flip: a manual switch (P1) or a failover (P3) emits codex.account.switched;
@@ -118,8 +148,11 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     workspaceId,
     sessionId,
     isCodexAccountEvent,
-    () => void state.refresh(),
-    { enabled: options.enabled ?? true, ...(sharedEvents !== undefined ? { events: sharedEvents } : {}) },
+    () => void refresh(),
+    {
+      enabled: options.enabled ?? true,
+      ...(sharedEvents !== undefined ? { events: sharedEvents } : {}),
+    },
   );
 
   const pin = useCallback(
@@ -128,36 +161,33 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
         return false;
       }
       setPinningTarget(target);
-      const result = await mutation.run(async () => {
+      const result = await runMutation(async () => {
         await codexClient.pinSessionCodexAccount!(workspaceId, sessionId, target);
         return true;
       });
       setPinningTarget(null);
-      if (result) await state.refresh();
+      if (result) await refresh();
       return result === true;
     },
-    [codexClient, workspaceId, sessionId, mutation.run, state.refresh],
+    [codexClient, workspaceId, sessionId, runMutation, refresh],
   );
 
   // Live usage refresh: hit the batched provider read, then re-read cached
   // metadata so the fresh windows land on `accounts`. The provider read writes the
   // cache columns server-side; state.refresh() pulls them back.
-  const refreshUsage = useCallback(
-    async (): Promise<boolean> => {
-      if (!codexClient.refreshCodexUsage) {
-        return false;
-      }
-      const result = await usageMutation.run(async () => {
-        await codexClient.refreshCodexUsage!(workspaceId);
-        return true;
-      });
-      if (result) await state.refresh();
-      return result === true;
-    },
-    [codexClient, workspaceId, usageMutation.run, state.refresh],
-  );
+  const refreshUsage = useCallback(async (): Promise<boolean> => {
+    if (!codexClient.refreshCodexUsage) {
+      return false;
+    }
+    const result = await runUsageMutation(async () => {
+      await codexClient.refreshCodexUsage!(workspaceId);
+      return true;
+    });
+    if (result) await refresh();
+    return result === true;
+  }, [codexClient, workspaceId, runUsageMutation, refresh]);
 
-  const data = state.data ?? EMPTY_STATE;
+  const data = loadedData ?? EMPTY_STATE;
   const effectiveAccountId = data.pinnedAccountId ?? data.activeAccountId;
 
   return {
@@ -167,13 +197,13 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     effectiveAccountId,
     lastAccountId: data.lastAccountId,
     settings: data.settings,
-    loading: state.loading,
-    refresh: state.refresh,
+    loading,
+    refresh,
     refreshUsage,
-    refreshingUsage: usageMutation.mutating,
+    refreshingUsage,
     pin,
-    pinning: mutation.mutating,
+    pinning,
     pinningTarget,
-    mutationError: mutation.mutationError,
+    mutationError,
   };
 }

package/src/hooks/use-composer.ts

@@ -5,9 +5,8 @@ import { useOpenGeni, type ClientOverride } from "../provider";
 export type ComposerSendExtras = Omit<SendMessageInput, "text" | "clientEventId">;
 
 /**
- * Compose-time delivery choice. `queue` (the default) stacks the message
- * behind the running turn — visible, editable, reorderable until claimed.
- * `steer` interrupts the running turn and injects the message now.
+ * Enter appends a prompt; Cmd/Ctrl+Enter steers it to the head and supersedes
+ * the current inference.
  */
 export type ComposerMode = "queue" | "steer";
 
@@ -20,46 +19,42 @@ export type UseComposerOptions = ClientOverride & {
    * surrounding UI state (attachment pickers, model selectors, ...).
    */
   sendExtras?: ComposerSendExtras | (() => ComposerSendExtras) | undefined;
-  /** Initial delivery mode. Defaults to `"queue"`. */
-  defaultMode?: ComposerMode | undefined;
 };
 
 export type ComposerState = {
   value: string;
   setValue: (value: string) => void;
-  /** Send the draft (or an explicit text) using the current mode. */
-  send: (text?: string) => Promise<boolean>;
+  /** Send the draft (or explicit text). Queue is the default; steer is explicit. */
+  send: (text?: string, mode?: ComposerMode) => Promise<boolean>;
   sending: boolean;
   canSend: boolean;
-  /** Queue (default) vs steer — the compose-time delivery choice. */
-  mode: ComposerMode;
-  setMode: (mode: ComposerMode) => void;
-  /** Ask the agent to stop the current turn. */
-  interrupt: (reason?: string) => Promise<void>;
-  interrupting: boolean;
+  /** Pause the session without deleting its prompt queue. */
+  pause: (reason?: string) => Promise<void>;
+  pausing: boolean;
+  resume: (reason?: string) => Promise<void>;
+  resuming: boolean;
   error: Error | null;
   clearError: () => void;
 };
 
 /**
- * Draft + send + interrupt state for the chat composer — the only
+ * Draft + send + Pause/Resume state for the chat composer — the only
  * human-to-agent input surface. The draft survives a failed send (nothing is
  * more hostile than losing a typed message); each send carries a generated
  * `clientEventId` so retries stay idempotent server-side.
  */
-export function useComposer(sessionId: string | null | undefined, options: UseComposerOptions = {}): ComposerState {
+export function useComposer(
+  sessionId: string | null | undefined,
+  options: UseComposerOptions = {},
+): ComposerState {
   const { client, workspaceId } = useOpenGeni(options);
-  const defaultMode = options.defaultMode ?? "queue";
   const [value, setValue] = useState("");
-  const [mode, setMode] = useState<ComposerMode>(defaultMode);
   const [sending, setSending] = useState(false);
-  const [interrupting, setInterrupting] = useState(false);
+  const [pausing, setPausing] = useState(false);
+  const [resuming, setResuming] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const pendingClientEventId = useRef<string | null>(null);
   const onSent = options.onSent;
-  // Read at send time so an in-flight send uses the mode chosen at submit.
-  const modeRef = useRef(mode);
-  modeRef.current = mode;
   // Read through a ref so a new extras closure (created every render by
   // callers passing inline functions) does not invalidate `send`.
   const sendExtrasRef = useRef(options.sendExtras);
@@ -75,12 +70,11 @@ export function useComposer(sessionId: string | null | undefined, options: UseCo
       pendingClientEventId.current = null;
       setValue("");
       setError(null);
-      setMode(defaultMode);
     }
-  }, [targetKey, defaultMode]);
+  }, [targetKey]);
 
   const send = useCallback(
-    async (explicit?: string): Promise<boolean> => {
+    async (explicit?: string, delivery: ComposerMode = "queue"): Promise<boolean> => {
       const draftAtSend = value;
       const text = (explicit ?? draftAtSend).trim();
       // Resolve the extras once: a file-only message (empty text + ≥1 ready
@@ -101,7 +95,7 @@ export function useComposer(sessionId: string | null | undefined, options: UseCo
         // carries a minimal default so the attachments still get delivered.
         const sendText = text || FILE_ONLY_MESSAGE_TEXT;
         const input = composeSendInput(sendText, pendingClientEventId.current, extras);
-        if (modeRef.current === "steer") {
+        if (delivery === "steer") {
           await client.steerMessage(workspaceId, sessionId, input);
         } else {
           await client.sendMessage(workspaceId, sessionId, input);
@@ -131,22 +125,38 @@ export function useComposer(sessionId: string | null | undefined, options: UseCo
   // on its `attachments.uploading` flag so a message never departs mid-upload.
   const hasReadyResources = (resolveSendExtras(sendExtrasRef.current).resources?.length ?? 0) > 0;
 
-  const interrupt = useCallback(
+  const pause = useCallback(
     async (reason?: string): Promise<void> => {
-      if (!sessionId || interrupting) {
+      if (!sessionId || pausing) {
         return;
       }
-      setInterrupting(true);
+      setPausing(true);
       setError(null);
       try {
-        await client.interrupt(workspaceId, sessionId, reason !== undefined ? { reason } : {});
+        await client.pauseSession(workspaceId, sessionId, reason !== undefined ? { reason } : {});
       } catch (cause) {
         setError(cause instanceof Error ? cause : new Error(String(cause)));
       } finally {
-        setInterrupting(false);
+        setPausing(false);
       }
     },
-    [client, workspaceId, sessionId, interrupting],
+    [client, workspaceId, sessionId, pausing],
+  );
+
+  const resume = useCallback(
+    async (reason?: string): Promise<void> => {
+      if (!sessionId || resuming) return;
+      setResuming(true);
+      setError(null);
+      try {
+        await client.resumeSession(workspaceId, sessionId, reason !== undefined ? { reason } : {});
+      } catch (cause) {
+        setError(cause instanceof Error ? cause : new Error(String(cause)));
+      } finally {
+        setResuming(false);
+      }
+    },
+    [client, workspaceId, sessionId, resuming],
   );
 
   const updateValue = useCallback((next: string) => {
@@ -160,10 +170,10 @@ export function useComposer(sessionId: string | null | undefined, options: UseCo
     send,
     sending,
     canSend: Boolean(sessionId) && !sending && (value.trim().length > 0 || hasReadyResources),
-    mode,
-    setMode,
-    interrupt,
-    interrupting,
+    pause,
+    pausing,
+    resume,
+    resuming,
     error,
     clearError: useCallback(() => setError(null), []),
   };
@@ -197,13 +207,24 @@ export function composeSendInput(
 }
 
 /** Submit on plain Enter; Shift+Enter inserts a newline. Exported for tests. */
-export function shouldSubmitOnKey(event: { key: string; shiftKey: boolean; nativeEvent?: { isComposing?: boolean } }): boolean {
+export function shouldSubmitOnKey(event: {
+  key: string;
+  shiftKey: boolean;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  nativeEvent?: { isComposing?: boolean };
+}): boolean {
   if (event.key !== "Enter" || event.shiftKey) {
     return false;
   }
   return event.nativeEvent?.isComposing !== true;
 }
 
+/** Cmd/Ctrl+Enter steers; ordinary Enter appends to the queue. */
+export function composerModeForKey(event: { metaKey?: boolean; ctrlKey?: boolean }): ComposerMode {
+  return event.metaKey || event.ctrlKey ? "steer" : "queue";
+}
+
 function generateClientEventId(): string {
   const cryptoApi = globalThis.crypto;
   if (cryptoApi && "randomUUID" in cryptoApi) {