@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/components/session-chrome.tsx

@@ -1,3 +1,4 @@
+import { ChildSessionLink } from "./child-session-link";
 /**
  * SessionChrome — compact merged session signals above the composer.
  *
@@ -25,15 +26,30 @@
  *
  * Inbox and queue stay separate segments. Queue hover actions wire to
  * `UseTurnQueueResult` (`editTurn` / `steerTurn` / `moveTurn` / `removeTurn`).
+ * The collapsed queue chip previews the latest queued message beside its Steer
+ * action; open queue rows keep Steer visible and reveal the rest on hover.
  * Inbox has no product dismiss API; pass `onDismissIncoming` when the host
  * wants a visible action (dev harness may use a local dummy).
  *
+ * Queue opens by default when chrome is idle and at least one authoritative
+ * prompt is queued. Closing the queue dismisses that session's offer until
+ * occupancy drains; a different session on the same chrome instance may
+ * offer again. An in-flight optimistic Send never opens the drawer —
+ * admission stays a paint-only receipt on the chip so layout does not jump
+ * under the pointer.
+ *
  * Segment switches keep the panel shell mounted and crossfade content. The
  * shell uses one CSS grid-track transition for deliberate open/close actions;
  * live queue reconciliation never feeds measurements back into layout.
  */
-import type { SessionGoal, SessionPendingInputPreview, SessionTurn } from "@opengeni/sdk";
+import type {
+  SessionGoal,
+  SessionPendingInputPreview,
+  SessionStatus,
+  SessionTurn,
+} from "@opengeni/sdk";
 import {
+  ActivityIcon,
   AudioLinesIcon,
   ArrowDownIcon,
   ArrowUpIcon,
@@ -46,9 +62,11 @@ import {
   PencilIcon,
   PlayIcon,
   Trash2Icon,
+  TerminalIcon,
   TriangleAlertIcon,
   XIcon,
-  ZapIcon,
+  CornerDownRightIcon,
+  TargetIcon,
 } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
@@ -57,11 +75,27 @@ import type { ComposerOptimisticMessage, ComposerState } from "../hooks/use-comp
 import type { UseGoalResult } from "../hooks/use-goal";
 import type { UseTurnQueueResult } from "../hooks/use-turn-queue";
 import { cn } from "../lib/cn";
+import { useErrorMessage } from "../lib/error-message";
 import { formatClockTime } from "../lib/format";
+import {
+  countAuthoritativeQueuedTurns,
+  isAuthoritativeQueuedTurn,
+  QUEUE_REPLACE_DRAFT_COPY,
+  queuedTurnPresentation,
+  queueNeighborAnchors,
+} from "../queue-presentation-model";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
+import { QUEUE_ITEM_CONTENT_UNAVAILABLE, queueItemContent } from "./queue-item-content";
+import { TimelineAnnotationsChip, type TimelineAnnotationLike } from "./timeline-annotations";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
 
-export type SessionChromeSignalId = "incoming" | "steering" | "queue" | "goal" | "agents";
+export type SessionChromeSignalId =
+  | "incoming"
+  | "steering"
+  | "queue"
+  | "goal"
+  | "agents"
+  | "commands";
 
 export type SessionChromeSignalTone = "neutral" | "accent" | "waiting" | "running";
 
@@ -72,12 +106,24 @@ export type SessionChromeAgentsSignal = {
 };
 
 export type SessionChromeProps = {
+  /** Authoritative execution status; omitted by older embedding hosts. */
+  sessionStatus?: SessionStatus | undefined;
   queue: UseTurnQueueResult;
+  /** Open and focus an existing queued prompt without changing its delivery. */
+  queueFocusTarget?: { turnId: string; requestId: number } | undefined;
   /** Needed for queue edit → composer checkout. Omit with `readOnly`. */
   composer?: ComposerState | undefined;
+  /** Focus the composer after a successful queue checkout has applied its draft.
+   * Connect to the composer controller's `focusInput`, or a custom input ref.
+   * Never called for failed checkout or while replacement awaits confirmation.
+   */
+  onComposerFocus?: (() => void) | undefined;
   goal?: UseGoalResult | null | undefined;
   /** Expanded agents body (host supplies tree / list). */
   agentsPanel?: ReactNode;
+  /** Active commands only. The host mounts the body only when opened. */
+  commandsPanel?: ReactNode;
+  commandsCount?: number | undefined;
   /** Chip summary; when `count > 0` the agents segment appears. */
   agentsSignal?: SessionChromeAgentsSignal | undefined;
   /**
@@ -85,6 +131,8 @@ export type SessionChromeProps = {
    * (and the gallery) may still pass a handler so the action is visible.
    */
   onDismissIncoming?: ((inputId: string) => void) | undefined;
+  /** Open a typed child update's source through the host's normal authorized route. */
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   readOnly?: boolean | undefined;
   className?: string | undefined;
   /** Controlled active segment; omit for uncontrolled. */
@@ -97,22 +145,19 @@ type GoalPillState =
   | "pursuing"
   | "waiting"
   | "scheduled"
+  | "session_failed"
   | "blocked"
   | "held"
   | "paused"
   | "invariant_broken"
   | "completed";
 
-type QueuedTurnPresentation = {
-  kind: "prompt" | "realtime_voice" | "realtime_voice_handoff";
-  text: string;
-};
-
 const GOAL_LABEL: Record<GoalPillState, string> = {
   pursuing: "Pursuing",
   waiting: "Waiting",
-  scheduled: "Scheduled",
+  scheduled: "Waiting",
   blocked: "Blocked",
+  session_failed: "Blocked by session failure",
   held: "Held",
   paused: "Paused",
   invariant_broken: "Needs attention",
@@ -121,13 +166,21 @@ const GOAL_LABEL: Record<GoalPillState, string> = {
 
 /**
  * Short pill suffix per `pausedReason`. `max_auto_continuations` is pacing
- * (new input resumes it); `limits` is budget/admission; `user_pause`/`api` is
+ * (new input resumes it); `limits` is an unspecified legacy admission gate; `user_pause`/`api` is
  * the human's own override; `agent` is the model declaring it is blocked on a
  * human decision. Unknown or legacy reasons keep the bare "Paused".
  */
 const GOAL_PAUSED_REASON_SUFFIX: Record<string, string> = {
   max_auto_continuations: "cap",
-  limits: "budget",
+  limits: "limits",
+  model_unavailable: "model",
+  model_policy: "policy",
+  credits: "credits",
+  budget: "budget",
+  usage_limit: "usage limit",
+  usage_policy: "limits",
+  allowance: "allowance",
+  session_usage_limit: "usage limit",
   user_pause: "manually",
   api: "manually",
   agent: "agent",
@@ -136,7 +189,16 @@ const GOAL_PAUSED_REASON_SUFFIX: Record<string, string> = {
 const GOAL_PAUSED_REASON_EXPLANATION: Record<string, string> = {
   max_auto_continuations:
     "Paused at the automatic continuation cap. New input (a child result, an agent message, or your prompt) resumes it; you can also resume it here.",
-  limits: "Paused because budget or usage limits block another run. Resume once limits allow.",
+  limits: "Paused by an admission limit. Resume when the blocker is resolved.",
+  model_unavailable:
+    "The selected model is unavailable. Choose an available model before resuming.",
+  model_policy: "The selected model is blocked by policy. Choose an allowed model before resuming.",
+  credits: "Insufficient Opengeni credits. Add credits before resuming.",
+  budget: "Monthly model spending limit reached. Resume when the spending limit allows.",
+  usage_limit: "Monthly agent run limit reached. Resume when the run limit allows.",
+  usage_policy: "The application's usage policy blocks another run. Resume when it allows.",
+  allowance: "Opengeni usage allowance exhausted. Resume when your allowance is available.",
+  session_usage_limit: "Paused at the task's usage limit. Raise or remove the limit, then resume.",
   user_pause:
     "Paused manually by a person or an API call. Resume to let the goal continue on its own.",
   api: "Paused manually by a person or an API call. Resume to let the goal continue on its own.",
@@ -144,6 +206,7 @@ const GOAL_PAUSED_REASON_EXPLANATION: Record<string, string> = {
 };
 
 type GoalPillRecord = Pick<SessionGoal, "status" | "pausedReason"> & {
+  rationale?: SessionGoal["rationale"];
   continuation?: SessionGoal["continuation"] | null | undefined;
 };
 
@@ -159,7 +222,7 @@ export function sessionChromeGoalPillLabel(
 
 /**
  * One human sentence explaining WHY the goal is not pursuing right now: the
- * pause reason, the agent's own `goal_wait` hold (reason + deadline), or the
+ * pause reason, the agent's own `wait_for_input` hold (reason + deadline), or the
  * next idle-backoff check time. Null when the state needs no explanation.
  */
 export function sessionChromeGoalPillExplanation(
@@ -167,55 +230,107 @@ export function sessionChromeGoalPillExplanation(
   record: GoalPillRecord | null | undefined,
 ): string | null {
   const continuation = record?.continuation ?? null;
+  if (state === "session_failed") {
+    return "Resolve the session failure, then use Continue or send a message to continue this active goal.";
+  }
   if (state === "paused") {
+    const rationale = record?.rationale?.trim();
+    if (rationale) return rationale;
     return record?.pausedReason
       ? (GOAL_PAUSED_REASON_EXPLANATION[record.pausedReason] ?? null)
       : null;
   }
-  if (state === "scheduled" && continuation?.reason === "backoff_pending") {
-    return continuation.nextAttemptAt
-      ? `Next goal check at ${formatClockTime(continuation.nextAttemptAt)}.`
-      : "Next goal check is scheduled.";
+  if (state === "scheduled") {
+    return continuation?.nextAttemptAt
+      ? `Continues at ${formatClockTime(continuation.nextAttemptAt)}.`
+      : "Waiting to continue automatically.";
+  }
+  if (state === "waiting" && continuation?.reason === "system_work_pending") {
+    return "Waiting for other session work to finish before the goal continues automatically.";
   }
   if (state === "held" && continuation?.reason === "held_for_input") {
     const reason = continuation.holdReason?.trim();
     const until = continuation.nextAttemptAt
       ? ` until ${formatClockTime(continuation.nextAttemptAt)}`
       : "";
-    return `Waiting for input${reason ? `: ${reason}` : ""}${until}. A child result, an agent message, or your prompt wakes it sooner.`;
+    return `Waiting for input${reason ? `: ${reason}` : ""}${until}. Relevant session input—including a child result, background-command result, agent message, schedule, or your prompt—wakes it sooner.`;
   }
   return null;
 }
 
-function queuedTurnPresentation(turn: SessionTurn): QueuedTurnPresentation {
-  const realtimeDelegation = objectValue(turn.metadata.realtimeDelegation);
-  const inputTranscript = realtimeDelegation?.inputTranscript;
-  if (typeof inputTranscript === "string" && inputTranscript.trim()) {
-    return { kind: "realtime_voice", text: inputTranscript.trim() };
-  }
-  if (objectValue(turn.metadata.realtimeTailFlush)) {
-    return { kind: "realtime_voice_handoff", text: "Remaining voice context" };
-  }
-  return { kind: "prompt", text: turn.prompt };
+export { countAuthoritativeQueuedTurns };
+
+function isOptimisticQueuedMessage(
+  message: ComposerOptimisticMessage,
+  queuedTurnIds: ReadonlySet<string>,
+  snapshot: UseTurnQueueResult["snapshot"],
+): boolean {
+  return (
+    message.delivery === "send" &&
+    message.destination === "queue" &&
+    (!message.turnId || !queuedTurnIds.has(message.turnId)) &&
+    !(
+      message.turnId &&
+      message.appliedQueueVersion !== null &&
+      message.appliedQueueVersion !== undefined &&
+      snapshot &&
+      snapshot.version >= message.appliedQueueVersion
+    )
+  );
 }
 
-function isSteeringTurn(turn: SessionTurn): boolean {
-  return turn.metadata.delivery === "steer";
+export function countOptimisticQueuedMessages(
+  messages: readonly ComposerOptimisticMessage[] | undefined,
+  queuedTurnIds: ReadonlySet<string>,
+  snapshot: UseTurnQueueResult["snapshot"],
+): number {
+  return (messages ?? []).filter((message) =>
+    isOptimisticQueuedMessage(message, queuedTurnIds, snapshot),
+  ).length;
 }
 
-function objectValue(value: unknown): Record<string, unknown> | null {
-  return value !== null && typeof value === "object" && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : null;
+/**
+ * First uncontrolled segment. An existing authoritative queue opens itself
+ * when the host did not pick another default; optimistic-only occupancy
+ * stays collapsed so a live Send does not shove a drawer under the pointer.
+ */
+export function sessionChromeInitialActive(input: {
+  defaultActive: SessionChromeSignalId | null;
+  authoritativeQueuedCount: number;
+}): SessionChromeSignalId | null {
+  if (input.defaultActive != null) return input.defaultActive;
+  return input.authoritativeQueuedCount >= 1 ? "queue" : null;
+}
+
+/**
+ * Whether idle chrome should offer the queue panel. A dismissed session
+ * stays collapsed until occupancy drains. Controlled hosts own this.
+ */
+export function sessionChromeShouldOfferQueue(input: {
+  controlled: boolean;
+  active: SessionChromeSignalId | null;
+  activityOpen: boolean;
+  authoritativeQueuedCount: number;
+  suppressed: boolean;
+}): boolean {
+  return (
+    !input.controlled &&
+    input.active === null &&
+    !input.activityOpen &&
+    input.authoritativeQueuedCount >= 1 &&
+    !input.suppressed
+  );
 }
 
 /** Select pill state from the goal's authoritative continuation projection. */
 export function sessionChromeGoalPillState(
   goalStatus: "active" | "paused" | "completed",
   continuation: SessionGoal["continuation"] | null | undefined,
+  sessionStatus?: SessionStatus,
 ): GoalPillState {
   if (goalStatus === "completed") return "completed";
   if (goalStatus === "paused") return "paused";
+  if (sessionStatus === "failed") return "session_failed";
   if (!continuation) return "invariant_broken";
   if (continuation.state === "running") {
     return continuation.reason === "goal_turn_running"
@@ -228,7 +343,13 @@ export function sessionChromeGoalPillState(
   // next evaluation at `nextAttemptAt`) is an ordinary scheduled state.
   if (continuation.state === "scheduled") return "scheduled";
   if (continuation.state === "blocked") {
-    // `held_for_input` is the agent's own goal_wait hold (waiting for child
+    if (
+      continuation.reason === "human_turn_running" ||
+      continuation.reason === "system_work_pending"
+    ) {
+      return "waiting";
+    }
+    // `held_for_input` is the agent's own wait_for_input hold (waiting for child
     // results / external input until a deadline); it shares the Held pill.
     return continuation.reason === "workstream_paused" || continuation.reason === "held_for_input"
       ? "held"
@@ -288,6 +409,12 @@ function pendingKindLabel(kind: SessionPendingInputPreview["kind"]): string {
       return "Goal wake";
     case "agent_message":
       return "Update";
+    case "background_command_result":
+      return "Command result";
+    case "session_wait_timeout":
+      return "Wait ended";
+    case "media_generation_result":
+      return "Video result";
     default:
       return "Incoming";
   }
@@ -307,18 +434,28 @@ function toneClass(tone: SessionChromeSignalTone, selected: boolean): string {
 }
 
 export function SessionChrome({
+  sessionStatus,
   queue,
+  queueFocusTarget,
   composer,
+  onComposerFocus,
   goal,
   agentsPanel,
+  commandsPanel,
+  commandsCount = 0,
   agentsSignal,
   onDismissIncoming,
+  onOpenSession,
   readOnly = false,
   className,
   active: activeControlled,
   defaultActive = null,
   onActiveChange,
 }: SessionChromeProps) {
+  const formatError = useErrorMessage();
+  const [activityRequested, setActivityOpen] = useState(
+    Boolean(defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
+  );
   const reactId = useId();
   const panelId = `og-session-chrome-panel-${reactId}`;
   const reduceMotion = useReducedMotion();
@@ -327,24 +464,14 @@ export function SessionChrome({
   const turns = queue.queue;
   const queueMutationFor = queue.mutationFor;
   const queuedTurns = useMemo(
-    () => turns.filter((turn) => !isSteeringTurn(turn) && queueMutationFor(turn.id) !== "steer"),
+    () => turns.filter((turn) => isAuthoritativeQueuedTurn(turn, queueMutationFor)),
     [queueMutationFor, turns],
   );
   const queuedTurnIds = useMemo(() => new Set(queuedTurns.map((turn) => turn.id)), [queuedTurns]);
   const optimisticQueued = useMemo(
     () =>
-      (composer?.optimisticMessages ?? []).filter(
-        (message) =>
-          message.delivery === "send" &&
-          message.destination === "queue" &&
-          (!message.turnId || !queuedTurnIds.has(message.turnId)) &&
-          !(
-            message.turnId &&
-            message.appliedQueueVersion !== null &&
-            message.appliedQueueVersion !== undefined &&
-            queue.snapshot &&
-            queue.snapshot.version >= message.appliedQueueVersion
-          ),
+      (composer?.optimisticMessages ?? []).filter((message) =>
+        isOptimisticQueuedMessage(message, queuedTurnIds, queue.snapshot),
       ),
     [composer?.optimisticMessages, queue.snapshot, queuedTurnIds],
   );
@@ -358,14 +485,84 @@ export function SessionChrome({
   const stopping = stoppingKind !== null;
   const canMutateQueue = !readOnly && composer !== undefined;
 
-  const liveGoal = record?.status === "active";
-  const elapsed = useLiveElapsed(
-    record?.createdAt,
-    Boolean(liveGoal),
-    !liveGoal ? record?.updatedAt : null,
+  const elapsed = useLiveElapsed(record?.createdAt, Boolean(record));
+  const goalState = record
+    ? sessionChromeGoalPillState(record.status, record.continuation, sessionStatus)
+    : null;
+
+  const initialAuthoritativeQueuedCount = countAuthoritativeQueuedTurns(
+    queue.queue,
+    queue.mutationFor,
+  );
+  const [activeUncontrolled, setActiveUncontrolled] = useState<SessionChromeSignalId | null>(() =>
+    sessionChromeInitialActive({
+      defaultActive,
+      authoritativeQueuedCount: initialAuthoritativeQueuedCount,
+    }),
+  );
+  const active = activeControlled !== undefined ? activeControlled : activeUncontrolled;
+  const rootRef = useRef<HTMLDivElement>(null);
+  const openedQueueTargetRef = useRef<string | null>(null);
+  const focusedQueueTargetRef = useRef<string | null>(null);
+  const queueTargetKey = queueFocusTarget
+    ? `${queueFocusTarget.turnId}:${queueFocusTarget.requestId}`
+    : null;
+  useEffect(() => {
+    if (!queueTargetKey || openedQueueTargetRef.current === queueTargetKey) return;
+    openedQueueTargetRef.current = queueTargetKey;
+    if (activeControlled === undefined) setActiveUncontrolled("queue");
+    onActiveChange?.("queue");
+  }, [queueTargetKey, activeControlled, onActiveChange]);
+  useEffect(() => {
+    if (!queueFocusTarget || active !== "queue" || focusedQueueTargetRef.current === queueTargetKey)
+      return;
+    const root = rootRef.current;
+    if (!root) return;
+    const focus = () => {
+      const row = Array.from(root.querySelectorAll<HTMLElement>("[data-queue-turn-id]")).find(
+        (element) => element.dataset.queueTurnId === queueFocusTarget.turnId,
+      );
+      if (!row) return false;
+      focusedQueueTargetRef.current = queueTargetKey;
+      row.focus({ preventScroll: true });
+      row.scrollIntoView?.({ block: "nearest" });
+      return true;
+    };
+    if (focus()) return;
+    const observer = new MutationObserver(() => {
+      if (focus()) observer.disconnect();
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [queueFocusTarget, queueTargetKey, active, queuedTurns]);
+  const activityOpen =
+    activityRequested || Boolean(active && ["incoming", "agents", "commands"].includes(active));
+  const activityVisibleRef = useRef(activityOpen);
+  activityVisibleRef.current = activityOpen;
+  // Two independent suppressions, both occupancy-scoped:
+  // - admission: a live Send while idle must not open a drawer under the pointer
+  // - dismiss: closing the queue remembers that session until occupancy drains
+  const queueOfferAdmissionSuppressedRef = useRef(
+    defaultActive == null &&
+      initialAuthoritativeQueuedCount === 0 &&
+      countOptimisticQueuedMessages(composer?.optimisticMessages, queuedTurnIds, queue.snapshot) >
+        0,
   );
-  const goalState = record ? sessionChromeGoalPillState(record.status, record.continuation) : null;
+  const queueOfferDismissedSessionIdsRef = useRef<Set<string>>(new Set());
+  const occupancySessionId = queuedTurns[0]?.sessionId ?? null;
+  const setActive = (next: SessionChromeSignalId | null) => {
+    if (active === "queue" && next === null) {
+      if (occupancySessionId) {
+        queueOfferDismissedSessionIdsRef.current.add(occupancySessionId);
+      } else {
+        queueOfferAdmissionSuppressedRef.current = true;
+      }
+    }
+    if (activeControlled === undefined) setActiveUncontrolled(next);
+    onActiveChange?.(next);
+  };
 
+  const hasCommandsPanel = commandsPanel != null;
   const signals = useMemo(() => {
     const rows: Array<{
       id: SessionChromeSignalId;
@@ -437,6 +634,7 @@ export function SessionChrome({
       const waiting =
         goalState === "waiting" ||
         goalState === "blocked" ||
+        goalState === "session_failed" ||
         goalState === "held" ||
         goalState === "paused";
       const explanation = sessionChromeGoalPillExplanation(goalState, record);
@@ -450,16 +648,7 @@ export function SessionChrome({
           : goalState === "pursuing" || goalState === "scheduled"
             ? "accent"
             : "neutral",
-        icon:
-          goalState === "blocked" || goalState === "invariant_broken" ? (
-            <TriangleAlertIcon className="size-3" />
-          ) : goalState === "waiting" ? (
-            <Loader2Icon className="size-3 animate-og-spin" />
-          ) : goalState === "paused" || goalState === "held" ? (
-            <PauseIcon className="size-3" />
-          ) : (
-            <ZapIcon className="size-3" />
-          ),
+        icon: <TargetIcon className="size-3" />,
       });
     }
     if (agentsSignal && agentsSignal.count > 0) {
@@ -472,8 +661,22 @@ export function SessionChrome({
         icon: <BotIcon className="size-3" />,
       });
     }
+    if (commandsCount > 0 || (active === "commands" && hasCommandsPanel)) {
+      rows.push({
+        id: "commands",
+        label:
+          commandsCount > 0
+            ? `${commandsCount} command${commandsCount === 1 ? "" : "s"}`
+            : "Commands",
+        tone: commandsCount > 0 ? "running" : "neutral",
+        icon: <TerminalIcon className="size-3" />,
+      });
+    }
     return rows;
   }, [
+    commandsCount,
+    hasCommandsPanel,
+    active,
     agentsSignal,
     elapsed,
     goalState,
@@ -485,14 +688,6 @@ export function SessionChrome({
     record,
   ]);
 
-  const [activeUncontrolled, setActiveUncontrolled] = useState<SessionChromeSignalId | null>(
-    defaultActive,
-  );
-  const active = activeControlled !== undefined ? activeControlled : activeUncontrolled;
-  const setActive = (next: SessionChromeSignalId | null) => {
-    if (activeControlled === undefined) setActiveUncontrolled(next);
-    onActiveChange?.(next);
-  };
   const optimisticQueueKeys = optimisticQueued.map((message) => message.clientEventId).join(",");
   const previousOptimisticQueueKeys = useRef(optimisticQueueKeys);
   const [queueArrivalNonce, setQueueArrivalNonce] = useState(0);
@@ -505,7 +700,45 @@ export function SessionChrome({
     // the pointer. A stable, paint-only receipt on the queue chip communicates
     // destination without participating in layout.
     setQueueArrivalNonce((current) => current + 1);
-  }, [optimisticQueueKeys, optimisticQueued]);
+    if (activeControlled === undefined && active === null) {
+      queueOfferAdmissionSuppressedRef.current = true;
+    }
+  }, [active, activeControlled, optimisticQueueKeys, optimisticQueued]);
+  const queueOccupied = queuedTurns.length > 0 || optimisticQueued.length > 0;
+  useEffect(() => {
+    if (queueOccupied) return;
+    // A later wave may offer again. A prior session's dismiss must not stick
+    // after this instance has actually gone empty.
+    queueOfferAdmissionSuppressedRef.current = false;
+    queueOfferDismissedSessionIdsRef.current.clear();
+  }, [queueOccupied]);
+  const queueOfferSuppressed =
+    queueOfferAdmissionSuppressedRef.current ||
+    (occupancySessionId != null &&
+      queueOfferDismissedSessionIdsRef.current.has(occupancySessionId));
+  useEffect(() => {
+    if (
+      !sessionChromeShouldOfferQueue({
+        controlled: activeControlled !== undefined,
+        active,
+        activityOpen,
+        authoritativeQueuedCount: queuedTurns.length,
+        suppressed: queueOfferSuppressed,
+      })
+    ) {
+      return;
+    }
+    if (activeControlled === undefined) setActiveUncontrolled("queue");
+    onActiveChange?.("queue");
+  }, [
+    active,
+    activeControlled,
+    activityOpen,
+    occupancySessionId,
+    onActiveChange,
+    queueOfferSuppressed,
+    queuedTurns.length,
+  ]);
   const [replaceDraftFor, setReplaceDraftFor] = useState<string | null>(null);
 
   const chipRefs = useRef<Partial<Record<SessionChromeSignalId, HTMLButtonElement | null>>>({});
@@ -513,6 +746,10 @@ export function SessionChrome({
   const [pill, setPill] = useState({ left: 0, top: 0, width: 0, height: 0, opacity: 0 });
 
   const signalIds = signals.map((signal) => signal.id).join(",");
+  useEffect(() => {
+    if (!signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)))
+      setActivityOpen(false);
+  }, [signals]);
   useEffect(() => {
     if (active && !signalIds.split(",").includes(active)) {
       if (activeControlled === undefined) setActiveUncontrolled(null);
@@ -535,7 +772,10 @@ export function SessionChrome({
         return;
       }
       const chip = chipRefs.current[active];
-      if (!chip) return;
+      if (!chip) {
+        setPill((prev) => ({ ...prev, opacity: 0 }));
+        return;
+      }
       // Measure against the chip's own box so a wrapped multi-row rail never
       // stretches the highlight into a tall stripe across every signal.
       const railBox = rail.getBoundingClientRect();
@@ -563,6 +803,22 @@ export function SessionChrome({
   }, [active, signals]);
 
   const open = active !== null;
+  // Collapsed queue chip shows the latest queued message so a Send that lands
+  // in the queue is visible without opening the list; Steer acts on that
+  // message once the server has confirmed it.
+  const latestOptimisticQueued = optimisticQueued[optimisticQueued.length - 1];
+  const latestQueuedTurn = queuedTurns[queuedTurns.length - 1];
+  const queuePeek: { text: string | null; turnId: string | null } | null =
+    queue.error || queue.mutationError
+      ? null
+      : latestOptimisticQueued
+        ? { text: latestOptimisticQueued.text.trim() || null, turnId: null }
+        : latestQueuedTurn
+          ? {
+              text: queuedTurnPresentation(latestQueuedTurn).text.trim() || null,
+              turnId: latestQueuedTurn.id,
+            }
+          : null;
 
   if (signals.length === 0 && !stopping) return null;
 
@@ -572,7 +828,11 @@ export function SessionChrome({
 
   const panelBody =
     active === "incoming" ? (
-      <IncomingPanel inputs={incoming} onDismiss={onDismissIncoming} />
+      <IncomingPanel
+        inputs={incoming}
+        onDismiss={onDismissIncoming}
+        onOpenSession={onOpenSession}
+      />
     ) : active === "queue" ? (
       <QueuePanel
         turns={queuedTurns}
@@ -582,6 +842,7 @@ export function SessionChrome({
         onRefresh={queue.refresh}
         onClearMutationError={queue.clearMutationError}
         onRetryOptimistic={composer?.retryOptimisticMessage}
+        onRestoreOptimistic={composer?.restoreOptimisticMessage}
         onRemoveOptimistic={composer?.removeOptimisticMessage}
         readOnly={!canMutateQueue}
         mutationFor={queue.mutationFor}
@@ -597,7 +858,10 @@ export function SessionChrome({
                     expectedDraftRevision: composer.draftRevision,
                     replaceDraft: true,
                   });
-                  if (checkedOut) composer.applyDraft(checkedOut);
+                  if (checkedOut) {
+                    composer.applyDraft(checkedOut);
+                    onComposerFocus?.();
+                  }
                 })();
               }
             : undefined
@@ -614,7 +878,10 @@ export function SessionChrome({
                         expectedDraftRevision: composer.draftRevision,
                         replaceDraft: false,
                       });
-                      if (checkedOut) composer.applyDraft(checkedOut);
+                      if (checkedOut) {
+                        composer.applyDraft(checkedOut);
+                        onComposerFocus?.();
+                      }
                     })();
                   },
                 );
@@ -645,6 +912,8 @@ export function SessionChrome({
       />
     ) : active === "goal" && record && goalState && goal ? (
       <GoalPanel goal={goal} state={goalState} elapsed={elapsed} readOnly={readOnly} />
+    ) : active === "commands" ? (
+      <div data-og-session-chrome-panel="commands">{commandsPanel}</div>
     ) : active === "agents" ? (
       <div data-og-session-chrome-panel="agents">
         {agentsPanel ?? <p className="text-og-xs text-og-fg-muted">No agent details.</p>}
@@ -656,6 +925,7 @@ export function SessionChrome({
       <div
         className={cn("og-session-chrome og-root w-full", className)}
         data-testid="session-chrome"
+        ref={rootRef}
         data-og-session-chrome=""
         data-og-session-chrome-open={open ? "true" : "false"}
       >
@@ -666,15 +936,9 @@ export function SessionChrome({
           )}
           style={{
             borderRadius: "var(--_og-session-chrome-radius)",
-            background: open
-              ? "var(--_og-session-chrome-surface-open)"
-              : "var(--_og-session-chrome-surface)",
-            borderColor: open
-              ? "var(--_og-session-chrome-border-open)"
-              : "var(--_og-session-chrome-border)",
-            boxShadow: open
-              ? "var(--og-session-chrome-shadow-open)"
-              : "var(--og-session-chrome-shadow)",
+            background: "transparent",
+            borderColor: "transparent",
+            boxShadow: "none",
             transitionDuration: "var(--og-session-chrome-duration)",
             transitionTimingFunction: "var(--_og-session-chrome-ease)",
           }}
@@ -690,9 +954,9 @@ export function SessionChrome({
           >
             <div
               ref={railRef}
-              className="relative flex flex-wrap items-center"
+              className="relative flex flex-nowrap items-center"
               style={{
-                gap: "var(--og-session-chrome-chip-gap)",
+                gap: "10px",
               }}
             >
               <motion.div
@@ -712,71 +976,213 @@ export function SessionChrome({
                 }}
                 transition={{ duration: shellDuration, ease }}
               />
-              {signals.map((signal) => {
-                const selected = active === signal.id;
-                return (
-                  <button
-                    key={signal.id}
-                    type="button"
-                    ref={(node) => {
-                      chipRefs.current[signal.id] = node;
-                    }}
-                    aria-expanded={selected}
-                    aria-controls={panelId}
-                    aria-label={selected ? `Close ${signal.label}` : undefined}
-                    data-testid={`session-chrome-${signal.id}`}
-                    data-og-session-chrome-signal={signal.id}
-                    title={signal.title}
-                    onClick={() => setActive(selected ? null : signal.id)}
-                    className={cn(
-                      "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-hidden",
-                      // Coarse pointers keep a 44px target (session-pins acceptance).
-                      "pointer-coarse:min-h-11",
-                      "transition-colors duration-150 motion-reduce:transition-none",
-                      "hover:text-og-fg focus-visible:bg-og-surface-3/50",
-                      selected ? "text-og-fg" : "text-og-fg-muted",
-                    )}
-                    style={{
-                      paddingInline: "var(--og-session-chrome-chip-pad-x)",
-                    }}
-                  >
-                    {signal.id === "queue" && queueArrivalNonce > 0 && !reduceMotion ? (
-                      <motion.span
-                        key={queueArrivalNonce}
-                        aria-hidden="true"
-                        data-testid="session-chrome-queue-arrival"
-                        className="pointer-events-none absolute inset-0 rounded-og-md bg-og-accent-soft"
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: [0, 0.38, 0] }}
-                        transition={{ duration: 0.72, times: [0, 0.18, 1], ease }}
-                      />
-                    ) : null}
-                    <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
-                      {signal.icon}
-                    </span>
-                    <span className="shrink-0 font-medium text-og-fg">{signal.label}</span>
-                    {signal.detail ? (
-                      <>
-                        <span aria-hidden className="shrink-0 text-og-fg-subtle/60">
-                          ·
+              {signals
+                .filter((signal) => !["incoming", "agents", "commands"].includes(signal.id))
+                .map((signal) => {
+                  const selected = active === signal.id;
+                  return (
+                    <div
+                      key={signal.id}
+                      role="group"
+                      aria-label={
+                        signal.id === "queue"
+                          ? "Queued messages and actions"
+                          : signal.id === "goal"
+                            ? "Goal and actions"
+                            : signal.label
+                      }
+                      className={cn(
+                        "group/signal relative z-[1] inline-flex min-w-0 max-w-full items-center rounded-og-md",
+                        "bg-og-surface-2/60 px-0.5",
+                        selected && "bg-og-surface-3",
+                      )}
+                    >
+                      <button
+                        type="button"
+                        ref={(node) => {
+                          chipRefs.current[signal.id] = node;
+                        }}
+                        aria-expanded={selected}
+                        aria-controls={panelId}
+                        aria-label={
+                          signal.id === "goal"
+                            ? `Goal · ${goalState === "pursuing" ? "Running" : signal.label}`
+                            : selected
+                              ? `Close ${signal.label}`
+                              : undefined
+                        }
+                        data-testid={`session-chrome-${signal.id}`}
+                        data-og-session-chrome-signal={signal.id}
+                        title={signal.title ?? signal.label}
+                        onClick={() => {
+                          setActivityOpen(false);
+                          setActive(selected ? null : signal.id);
+                        }}
+                        className={cn(
+                          "group relative z-[1] inline-flex min-w-0 min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-hidden",
+                          // Coarse pointers keep a 44px target (session-pins acceptance).
+                          "pointer-coarse:min-h-11",
+                          "transition-colors duration-150 motion-reduce:transition-none",
+                          "hover:text-og-fg focus-visible:bg-og-surface-3/50",
+                          selected ? "text-og-fg" : "text-og-fg-muted",
+                        )}
+                        style={{
+                          paddingInline: "var(--og-session-chrome-chip-pad-x)",
+                        }}
+                      >
+                        {signal.id === "queue" && queueArrivalNonce > 0 && !reduceMotion ? (
+                          <motion.span
+                            key={queueArrivalNonce}
+                            aria-hidden="true"
+                            data-testid="session-chrome-queue-arrival"
+                            className="pointer-events-none absolute inset-0 rounded-og-md bg-og-accent-soft"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: [0, 0.38, 0] }}
+                            transition={{ duration: 0.72, times: [0, 0.18, 1], ease }}
+                          />
+                        ) : null}
+                        <span className={cn("shrink-0", toneClass(signal.tone, selected))}>
+                          {signal.icon}
                         </span>
-                        <span className="min-w-0 max-w-[8.5rem] truncate text-og-fg sm:max-w-[12rem]">
-                          {signal.detail}
+                        <span
+                          className={cn(
+                            "font-medium text-og-fg",
+                            signal.id === "queue" && queuePeek?.text && !selected
+                              ? "shrink-0"
+                              : "min-w-0 truncate",
+                          )}
+                        >
+                          {signal.id === "goal" ? "Goal · " : null}
+                          {signal.id === "goal"
+                            ? goalState === "pursuing"
+                              ? "Running"
+                              : signal.label
+                            : signal.id === "queue"
+                              ? queue.error || queue.mutationError
+                                ? signal.label
+                                : `${queuedTurns.length + optimisticQueued.length} queued`
+                              : signal.label}
                         </span>
-                      </>
-                    ) : null}
-                    {selected ? (
+                        {signal.id === "queue" && queuePeek?.text && !selected ? (
+                          <AnimatePresence initial={false} mode="popLayout">
+                            <motion.span
+                              key={queuePeek.text}
+                              data-testid="session-chrome-queue-peek"
+                              className="min-w-0 max-w-[min(24rem,60vw)] truncate text-og-fg-muted"
+                              initial={reduceMotion ? false : { opacity: 0, y: 3 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              exit={{ opacity: 0, transition: { duration: crossfadeDuration } }}
+                              transition={{ duration: crossfadeDuration, ease }}
+                            >
+                              {queuePeek.text}
+                            </motion.span>
+                          </AnimatePresence>
+                        ) : null}
+                      </button>
+                      {signal.id === "goal" && goal && record && !readOnly ? (
+                        <div className="flex shrink-0 items-center pr-1 pl-0.5">
+                          {record.status === "active" || record.status === "paused" ? (
+                            <IconAction
+                              label={record.status === "paused" ? "Resume goal" : "Pause goal"}
+                              tip={record.status === "paused" ? "Resume goal" : "Pause goal"}
+                              disabled={goal.updating}
+                              onClick={() =>
+                                void (record.status === "paused"
+                                  ? goal.resume()
+                                  : goal.pause("Paused from session chrome"))
+                              }
+                            >
+                              {goal.updating ? (
+                                <Loader2Icon className="size-3 animate-og-spin" />
+                              ) : record.status === "paused" ? (
+                                <PlayIcon className="size-3" />
+                              ) : (
+                                <PauseIcon className="size-3" />
+                              )}
+                            </IconAction>
+                          ) : null}
+                          <IconAction
+                            label="Clear goal"
+                            tip="Clear goal"
+                            danger
+                            disabled={goal.updating}
+                            onClick={() => void goal.deleteGoal()}
+                          >
+                            <Trash2Icon className="size-3" />
+                          </IconAction>
+                        </div>
+                      ) : signal.id === "queue" && canMutateQueue && queuePeek && !selected ? (
+                        <div className="flex shrink-0 items-center pr-1 pl-0.5">
+                          <IconAction
+                            label="Steer latest queued message"
+                            analyticsAction="steer"
+                            text="Steer"
+                            tip={QUEUE_STEER_TIP}
+                            disabled={
+                              !queuePeek.turnId ||
+                              queue.mutating ||
+                              Boolean(queue.mutationFor(queuePeek.turnId))
+                            }
+                            onClick={() => {
+                              if (queuePeek.turnId) void queue.steerTurn(queuePeek.turnId);
+                            }}
+                          >
+                            {queuePeek.turnId && queue.mutationFor(queuePeek.turnId) === "steer" ? (
+                              <Loader2Icon className="size-3 animate-og-spin" />
+                            ) : (
+                              <CornerDownRightIcon className="size-3" />
+                            )}
+                          </IconAction>
+                        </div>
+                      ) : null}
+                    </div>
+                  );
+                })}
+              {signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)) ? (
+                <button
+                  type="button"
+                  aria-label="Session activity"
+                  aria-describedby={commandsCount > 0 ? `${panelId}-commands-count` : undefined}
+                  title={activityOpen ? "Close activity" : "Inbox, agents and commands"}
+                  aria-controls={panelId}
+                  aria-expanded={activityOpen}
+                  onClick={() => {
+                    setActivityOpen(!activityOpen);
+                    setActive(
+                      activityOpen
+                        ? null
+                        : commandsCount > 0 && hasCommandsPanel
+                          ? "commands"
+                          : (signals.find((signal) =>
+                              ["incoming", "agents", "commands"].includes(signal.id),
+                            )?.id ?? null),
+                    );
+                  }}
+                  className={cn(
+                    "ml-auto inline-flex min-h-8 shrink-0 items-center justify-center gap-1.5 rounded-og-md px-2 text-og-xs transition-colors outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+                    activityOpen
+                      ? "bg-og-surface-3 text-og-fg"
+                      : "text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg",
+                  )}
+                >
+                  <ActivityIcon className="size-3.5" />
+                  <span className="sr-only">Activity</span>
+                  {commandsCount > 0 ? (
+                    <>
                       <span
-                        data-testid="session-chrome-close"
-                        className="ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-og-sm text-og-fg-subtle transition-colors group-hover:text-og-fg pointer-coarse:size-5"
-                        aria-hidden
-                      >
-                        <XIcon className="size-3" />
+                        aria-hidden="true"
+                        className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-fg-muted motion-reduce:animate-none"
+                      />
+                      <span id={`${panelId}-commands-count`}>
+                        {commandsCount} command{commandsCount === 1 ? "" : "s"}
                       </span>
-                    ) : null}
-                  </button>
-                );
-              })}
+                    </>
+                  ) : null}
+                  {incoming.length > 0 ? (
+                    <span className="size-1.5 rounded-full bg-og-accent" />
+                  ) : null}
+                </button>
+              ) : null}
               {stopping ? (
                 <span
                   role="status"
@@ -794,6 +1200,47 @@ export function SessionChrome({
             </div>
           </div>
 
+          <AnimatePresence initial={false}>
+            {activityOpen ? (
+              <motion.div
+                key="activity-tabs"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: shellDuration, ease }}
+                style={{ overflow: "hidden" }}
+              >
+                <div className="mt-1 flex items-center gap-1 rounded-t-og-lg bg-og-surface-2/50 px-2 py-1">
+                  {signals
+                    .filter((signal) => ["incoming", "agents", "commands"].includes(signal.id))
+                    .map((signal) => (
+                      <button
+                        key={signal.id}
+                        type="button"
+                        aria-expanded={active === signal.id}
+                        onClick={() => {
+                          if (activityVisibleRef.current) setActive(signal.id);
+                        }}
+                        className={cn(
+                          "inline-flex min-h-9 items-center gap-1.5 rounded-og-md px-2 text-og-xs pointer-coarse:min-h-11",
+                          active === signal.id
+                            ? "bg-og-surface-3 text-og-fg"
+                            : "text-og-fg-muted hover:text-og-fg",
+                        )}
+                      >
+                        {signal.icon}
+                        {signal.id === "incoming" ? `${incoming.length} incoming` : signal.label}
+                      </button>
+                    ))}
+                </div>
+              </motion.div>
+            ) : null}
+          </AnimatePresence>
+          {goal?.mutationError ? (
+            <p role="alert" className="px-3 pb-2 text-og-xs text-og-danger">
+              Goal action not confirmed. {formatError(goal.mutationError)}
+            </p>
+          ) : null}
           <div
             id={panelId}
             data-og-session-chrome-panel-shell=""
@@ -811,7 +1258,12 @@ export function SessionChrome({
           >
             <div className="min-h-0 overflow-hidden">
               <div
-                className="relative overflow-y-auto overscroll-contain border-t border-og-border/50"
+                className={cn(
+                  "relative overflow-y-auto overscroll-contain",
+                  activityOpen
+                    ? "rounded-b-og-lg bg-og-surface-2/50"
+                    : "mt-1 rounded-og-lg bg-og-surface-2/50",
+                )}
                 style={{
                   maxHeight: "var(--og-session-chrome-panel-max-height)",
                   paddingInline: "var(--og-session-chrome-panel-pad-x)",
@@ -819,7 +1271,7 @@ export function SessionChrome({
                 }}
               >
                 <AnimatePresence initial={false}>
-                  {active && panelBody ? (
+                  {active && active !== "commands" && panelBody ? (
                     <motion.div
                       key={active}
                       data-og-session-chrome-panel-frame={active}
@@ -842,6 +1294,16 @@ export function SessionChrome({
                     </motion.div>
                   ) : null}
                 </AnimatePresence>
+                {active === "commands" ? (
+                  <motion.div
+                    key="commands"
+                    initial={reduceMotion ? false : { opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: crossfadeDuration, ease }}
+                  >
+                    {panelBody}
+                  </motion.div>
+                ) : null}
               </div>
             </div>
           </div>
@@ -854,47 +1316,123 @@ export function SessionChrome({
 function IncomingPanel({
   inputs,
   onDismiss,
+  onOpenSession,
 }: {
   inputs: SessionPendingInputPreview[];
   onDismiss?: ((inputId: string) => void) | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
+  // When a sandbox is shut down or lost, every command on it reports at once.
+  // One row reads better than dozens of identical ones; each result still
+  // reaches the agent. Ordinary results keep their own rows.
+  const lostWithSandbox = inputs.filter(isLostWithSandboxResult);
+  const grouped = new Set(
+    lostWithSandbox.length >= 2 ? lostWithSandbox.map((input) => input.id) : [],
+  );
+  const firstGrouped = lostWithSandbox.length >= 2 ? lostWithSandbox[0]!.id : null;
   return (
-    <ul
-      className="flex flex-col gap-0.5"
-      aria-label="Incoming updates"
-      data-og-session-chrome-panel="incoming"
+    <div>
+      <p className="mb-2 text-og-xs text-og-fg-subtle">Waiting to be included in an agent turn.</p>
+      <ul
+        className="flex flex-col gap-0.5"
+        aria-label="Incoming updates"
+        data-og-session-chrome-panel="incoming"
+      >
+        {inputs.map((input) =>
+          grouped.has(input.id) ? (
+            input.id === firstGrouped ? (
+              <CommandResultsRow key={input.id} inputs={lostWithSandbox} onDismiss={onDismiss} />
+            ) : null
+          ) : (
+            <li
+              key={input.id}
+              className="group flex items-start gap-1.5 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]"
+            >
+              <span
+                className={cn(
+                  "mt-px shrink-0 rounded px-1 py-px text-[10px] font-medium leading-4",
+                  input.classification === "action_required" || input.classification === "failure"
+                    ? "bg-og-status-waiting/12 text-og-status-waiting"
+                    : "bg-og-surface-3/80 text-og-fg-muted",
+                )}
+              >
+                {pendingKindLabel(input.kind)}
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="break-words text-og-xs leading-4 text-og-fg">{input.summary}</p>
+                <ChildSessionLink
+                  kind={input.kind}
+                  sourceId={input.sourceId}
+                  onOpenSession={onOpenSession}
+                />
+              </div>
+              {onDismiss ? (
+                <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
+                  <IconAction
+                    label={`Dismiss incoming ${pendingKindLabel(input.kind)}`}
+                    tip="Dismiss"
+                    onClick={() => onDismiss(input.id)}
+                    danger
+                  >
+                    <Trash2Icon className="size-3" />
+                  </IconAction>
+                </div>
+              ) : null}
+            </li>
+          ),
+        )}
+      </ul>
+    </div>
+  );
+}
+
+/** Matches the worker's notice for a command whose sandbox is gone. */
+function isLostWithSandboxResult(input: SessionPendingInputPreview): boolean {
+  return (
+    input.kind === "background_command_result" &&
+    input.summary.includes("is no longer running because its sandbox was shut down or lost")
+  );
+}
+
+function commandResultsSummary(inputs: SessionPendingInputPreview[]): string {
+  return `${inputs.length} background commands are no longer running because their sandbox was shut down or lost. Whether they finished is unknown.`;
+}
+
+function CommandResultsRow({
+  inputs,
+  onDismiss,
+}: {
+  inputs: SessionPendingInputPreview[];
+  onDismiss?: ((inputId: string) => void) | undefined;
+}) {
+  return (
+    <li
+      className="group flex items-start gap-1.5 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]"
+      data-og-session-chrome-command-results={inputs.length}
     >
-      {inputs.map((input) => (
-        <li
-          key={input.id}
-          className="group flex items-start gap-1.5 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]"
-        >
-          <span
-            className={cn(
-              "mt-px shrink-0 rounded px-1 py-px text-[10px] font-medium leading-4",
-              input.classification === "action_required" || input.classification === "failure"
-                ? "bg-og-status-waiting/12 text-og-status-waiting"
-                : "bg-og-surface-3/80 text-og-fg-muted",
-            )}
+      <span className="mt-px shrink-0 rounded bg-og-status-waiting/12 px-1 py-px text-[10px] font-medium leading-4 text-og-status-waiting">
+        Command results
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="break-words text-og-xs leading-4 text-og-fg">
+          {commandResultsSummary(inputs)}
+        </p>
+      </div>
+      {onDismiss ? (
+        <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
+          <IconAction
+            label="Dismiss incoming command results"
+            tip="Dismiss all"
+            onClick={() => {
+              for (const input of inputs) onDismiss(input.id);
+            }}
+            danger
           >
-            {pendingKindLabel(input.kind)}
-          </span>
-          <p className="min-w-0 flex-1 text-og-xs leading-4 text-og-fg">{input.summary}</p>
-          {onDismiss ? (
-            <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
-              <IconAction
-                label={`Dismiss incoming ${pendingKindLabel(input.kind)}`}
-                tip="Dismiss"
-                onClick={() => onDismiss(input.id)}
-                danger
-              >
-                <Trash2Icon className="size-3" />
-              </IconAction>
-            </div>
-          ) : null}
-        </li>
-      ))}
-    </ul>
+            <Trash2Icon className="size-3" />
+          </IconAction>
+        </div>
+      ) : null}
+    </li>
   );
 }
 
@@ -906,6 +1444,7 @@ function QueuePanel({
   onRefresh,
   onClearMutationError,
   onRetryOptimistic,
+  onRestoreOptimistic,
   onRemoveOptimistic,
   readOnly,
   mutationFor,
@@ -924,6 +1463,7 @@ function QueuePanel({
   onRefresh: () => Promise<void>;
   onClearMutationError: () => void;
   onRetryOptimistic?: ((clientEventId: string) => void) | undefined;
+  onRestoreOptimistic?: ((clientEventId: string) => void) | undefined;
   onRemoveOptimistic?: ((clientEventId: string) => void) | undefined;
   readOnly: boolean;
   mutationFor: UseTurnQueueResult["mutationFor"];
@@ -968,14 +1508,14 @@ function QueuePanel({
         const voice = presentation.kind !== "prompt";
         const pending = mutationFor(turn.id);
         const settling = !interactiveTurnIds.has(turn.id);
-        const beforeUp = index > 0 ? (turns[index - 1]?.id ?? null) : null;
-        const beforeDown = index < turns.length - 1 ? (turns[index + 2]?.id ?? null) : null;
+        const { beforeUp, beforeDown } = queueNeighborAnchors(turns, index);
         const showActions = !readOnly && (onEdit || onSteer || onRemove || onMove);
         const confirmingReplace = replaceDraftFor === turn.id;
         return (
           <li
             key={turn.id}
             data-queue-turn-id={turn.id}
+            tabIndex={-1}
             className="group flex flex-col gap-1 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]"
           >
             <div className="flex items-start gap-1.5">
@@ -989,34 +1529,69 @@ function QueuePanel({
                   {index + 1}
                 </span>
               )}
-              <p className="min-w-0 flex-1 truncate text-og-xs leading-4 text-og-fg">
-                {presentation.text}
-              </p>
+              <CompactQueueItemContent
+                text={presentation.text}
+                annotations={turn.annotations ?? []}
+              />
               {showActions ? (
-                <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
-                  {onMove && turns.length > 1 ? (
-                    <>
+                <div className="flex shrink-0 items-center gap-0.5">
+                  {/* Reorder, edit and delete stay on hover; Steer is always visible. */}
+                  <div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 max-sm:opacity-100">
+                    {onMove && turns.length > 1 ? (
+                      <>
+                        <IconAction
+                          label={`Move queued prompt ${index + 1} up`}
+                          tip="Move up"
+                          disabled={settling || pending !== null || index === 0}
+                          onClick={() => onMove(turn.id, beforeUp)}
+                        >
+                          <ArrowUpIcon className="size-3" />
+                        </IconAction>
+                        <IconAction
+                          label={`Move queued prompt ${index + 1} down`}
+                          tip="Move down"
+                          disabled={settling || pending !== null || index >= turns.length - 1}
+                          onClick={() => onMove(turn.id, beforeDown)}
+                        >
+                          <ArrowDownIcon className="size-3" />
+                        </IconAction>
+                      </>
+                    ) : null}
+                    {onEdit ? (
                       <IconAction
-                        label={`Move queued prompt ${index + 1} up`}
-                        tip="Move up"
-                        disabled={settling || pending !== null || index === 0}
-                        onClick={() => onMove(turn.id, beforeUp)}
+                        label={`Edit queued prompt ${index + 1}`}
+                        tip={QUEUE_EDIT_TIP}
+                        disabled={settling || pending !== null}
+                        onClick={() => onEdit(turn)}
                       >
-                        <ArrowUpIcon className="size-3" />
+                        {pending === "edit" ? (
+                          <Loader2Icon className="size-3 animate-og-spin" />
+                        ) : (
+                          <PencilIcon className="size-3" />
+                        )}
                       </IconAction>
+                    ) : null}
+                    {onRemove ? (
                       <IconAction
-                        label={`Move queued prompt ${index + 1} down`}
-                        tip="Move down"
-                        disabled={settling || pending !== null || index >= turns.length - 1}
-                        onClick={() => onMove(turn.id, beforeDown)}
+                        label={`Remove queued prompt ${index + 1}`}
+                        tip={QUEUE_DELETE_TIP}
+                        disabled={settling || pending !== null}
+                        onClick={() => onRemove(turn.id)}
+                        danger
                       >
-                        <ArrowDownIcon className="size-3" />
+                        {pending === "delete" ? (
+                          <Loader2Icon className="size-3 animate-og-spin" />
+                        ) : (
+                          <Trash2Icon className="size-3" />
+                        )}
                       </IconAction>
-                    </>
-                  ) : null}
+                    ) : null}
+                  </div>
                   {onSteer ? (
                     <IconAction
                       label={`Steer queued prompt ${index + 1}`}
+                      analyticsAction="steer"
+                      text="Steer"
                       tip={QUEUE_STEER_TIP}
                       disabled={settling || pending !== null}
                       onClick={() => onSteer(turn.id)}
@@ -1024,36 +1599,7 @@ function QueuePanel({
                       {pending === "steer" ? (
                         <Loader2Icon className="size-3 animate-og-spin" />
                       ) : (
-                        <ZapIcon className="size-3" />
-                      )}
-                    </IconAction>
-                  ) : null}
-                  {onEdit ? (
-                    <IconAction
-                      label={`Edit queued prompt ${index + 1}`}
-                      tip={QUEUE_EDIT_TIP}
-                      disabled={settling || pending !== null}
-                      onClick={() => onEdit(turn)}
-                    >
-                      {pending === "edit" ? (
-                        <Loader2Icon className="size-3 animate-og-spin" />
-                      ) : (
-                        <PencilIcon className="size-3" />
-                      )}
-                    </IconAction>
-                  ) : null}
-                  {onRemove ? (
-                    <IconAction
-                      label={`Remove queued prompt ${index + 1}`}
-                      tip={QUEUE_DELETE_TIP}
-                      disabled={settling || pending !== null}
-                      onClick={() => onRemove(turn.id)}
-                      danger
-                    >
-                      {pending === "delete" ? (
-                        <Loader2Icon className="size-3 animate-og-spin" />
-                      ) : (
-                        <Trash2Icon className="size-3" />
+                        <CornerDownRightIcon className="size-3" />
                       )}
                     </IconAction>
                   ) : null}
@@ -1062,25 +1608,22 @@ function QueuePanel({
             </div>
             {confirmingReplace ? (
               <div className="rounded-og-sm border border-og-status-waiting/30 bg-og-status-waiting/10 p-2 text-og-xs text-og-fg">
-                <p>Your composer already has a draft. Replace it with this queued prompt?</p>
-                <p className="mt-0.5 text-og-fg-muted">
-                  The current draft will be permanently discarded; this queued prompt is preserved
-                  until you confirm.
-                </p>
+                <p>{QUEUE_REPLACE_DRAFT_COPY.title}</p>
+                <p className="mt-0.5 text-og-fg-muted">{QUEUE_REPLACE_DRAFT_COPY.detail}</p>
                 <div className="mt-2 flex justify-end gap-1.5">
                   <button
                     type="button"
                     className="rounded-og-sm px-2 py-1 font-medium hover:bg-og-surface-3/70 focus-visible:ring-2 focus-visible:ring-og-accent/40"
                     onClick={onCancelReplace}
                   >
-                    Keep current draft
+                    {QUEUE_REPLACE_DRAFT_COPY.keep}
                   </button>
                   <button
                     type="button"
-                    className="rounded-og-sm bg-og-accent px-2 py-1 font-medium text-og-accent-fg hover:opacity-90 focus-visible:ring-2 focus-visible:ring-og-accent/40"
+                    className="rounded-og-sm border border-og-primary-border bg-og-primary text-og-primary-fg px-2 py-1 font-medium hover:bg-og-primary-hover focus-visible:ring-2 focus-visible:ring-og-accent/40"
                     onClick={onConfirmReplace}
                   >
-                    Replace and edit
+                    {QUEUE_REPLACE_DRAFT_COPY.replace}
                   </button>
                 </div>
               </div>
@@ -1105,19 +1648,24 @@ function QueuePanel({
             <span className="shrink-0 font-og-mono text-[10px] leading-4 text-og-fg-subtle">
               {turns.length + index + 1}
             </span>
-            <p className="min-w-0 flex-1 truncate text-og-xs leading-4 text-og-fg">
-              {message.text}
-            </p>
+            <div className="min-w-0 flex-1">
+              <CompactQueueItemContent text={message.text} annotations={message.annotations} />
+              {message.state === "failed" && message.error ? (
+                <p className="break-words text-og-xs">{message.error}</p>
+              ) : null}
+            </div>
             <span className="sr-only">
               {message.state === "failed"
-                ? "Not confirmed"
+                ? message.outcomeUnknown
+                  ? "Not confirmed"
+                  : "Message not sent"
                 : message.state === "sending"
                   ? "Placing in queue"
                   : "Queued"}
             </span>
             {message.state === "failed" ? (
               <div className="flex shrink-0 items-center gap-1 text-[10px]">
-                {onRetryOptimistic ? (
+                {message.retryable !== false && onRetryOptimistic ? (
                   <button
                     type="button"
                     className="rounded-og-sm px-1.5 py-1 font-medium hover:bg-og-surface-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11"
@@ -1126,6 +1674,15 @@ function QueuePanel({
                     Retry
                   </button>
                 ) : null}
+                {message.retryable === false && onRestoreOptimistic ? (
+                  <button
+                    type="button"
+                    className="rounded-og-sm px-1.5 py-1 font-medium hover:bg-og-surface-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11"
+                    onClick={() => onRestoreOptimistic(message.clientEventId)}
+                  >
+                    Edit message
+                  </button>
+                ) : null}
                 {onRemoveOptimistic ? (
                   <button
                     type="button"
@@ -1184,6 +1741,30 @@ function QueuePanel({
   );
 }
 
+function CompactQueueItemContent({
+  text,
+  annotations,
+}: {
+  text: string;
+  annotations: readonly TimelineAnnotationLike[];
+}) {
+  const content = queueItemContent(text, annotations.length);
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-1.5">
+      {content === "text" ? (
+        <p className="min-w-0 flex-1 truncate text-og-xs leading-4 text-og-fg">{text}</p>
+      ) : content === "unavailable" ? (
+        <p className="min-w-0 flex-1 truncate text-og-xs leading-4 text-og-fg-muted italic">
+          {QUEUE_ITEM_CONTENT_UNAVAILABLE}
+        </p>
+      ) : null}
+      {annotations.length > 0 ? (
+        <TimelineAnnotationsChip annotations={annotations} className="shrink-0" compact />
+      ) : null}
+    </div>
+  );
+}
+
 function GoalPanel({
   goal,
   state,
@@ -1195,6 +1776,7 @@ function GoalPanel({
   elapsed: string | null;
   readOnly: boolean;
 }) {
+  const formatError = useErrorMessage();
   const record = goal.goal;
   if (!record) return null;
   const canToggle = !readOnly && (record.status === "active" || record.status === "paused");
@@ -1206,7 +1788,7 @@ function GoalPanel({
         <span>{sessionChromeGoalPillLabel(state, record)}</span>
         {elapsed ? (
           <span className="tabular-nums normal-case tracking-normal text-og-fg-muted">
-            · {elapsed}
+            · Created {elapsed} ago
           </span>
         ) : null}
         <span className="normal-case tracking-normal text-og-fg-muted">· v{record.version}</span>
@@ -1227,7 +1809,7 @@ function GoalPanel({
       ) : null}
       {record.continuation?.lastError ? (
         <p className="rounded-og-sm bg-og-status-waiting/10 px-1.5 py-1 text-og-xs leading-4 text-og-status-waiting">
-          {record.continuation.lastError}
+          {formatError(record.continuation.lastError)}
         </p>
       ) : null}
       <div className="flex flex-wrap items-center justify-between gap-1.5 pt-0.5">
@@ -1288,7 +1870,9 @@ const QUEUE_EDIT_TIP = "Edit in composer";
 const QUEUE_DELETE_TIP = "Delete this queued prompt";
 
 function IconAction({
+  text,
   label,
+  analyticsAction,
   tip,
   onClick,
   disabled,
@@ -1296,6 +1880,9 @@ function IconAction({
   children,
 }: {
   label: string;
+  /** Stable, content-free control label a host's product analytics may read. */
+  analyticsAction?: "steer";
+  text?: string;
   tip: ReactNode;
   onClick: () => void;
   disabled?: boolean;
@@ -1308,16 +1895,20 @@ function IconAction({
         <button
           type="button"
           aria-label={label}
+          data-analytics-action={analyticsAction}
           disabled={disabled}
           onClick={onClick}
           className={cn(
-            "inline-flex size-6 items-center justify-center rounded-og-sm text-og-fg-subtle outline-hidden transition-colors",
+            "inline-flex size-6 items-center justify-center rounded-og-sm outline-hidden transition-colors",
             "hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40",
             "disabled:pointer-events-none disabled:opacity-40 pointer-coarse:size-9",
+            text ? "text-og-fg" : "text-og-fg-subtle",
+            text && "w-auto gap-1 px-1.5 text-og-xs pointer-coarse:w-auto",
             danger && "hover:text-og-danger",
           )}
         >
           {children}
+          {text}
         </button>
       </TooltipTrigger>
       <TooltipContent side="top">{tip}</TooltipContent>