@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/components/session-chrome.tsx

@@ -1,3 +1,4 @@
+import { ChildSessionLink } from "./child-session-link";
 /**
  * SessionChrome — compact merged session signals above the composer.
  *
@@ -28,15 +29,30 @@
  * Inbox has no product dismiss API; pass `onDismissIncoming` when the host
  * wants a visible action (dev harness may use a local dummy).
  *
- * Segment switches keep the panel shell mounted and crossfade content while
- * animating measured height — no `mode="wait"` unmount flash.
+ * 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,
   BotIcon,
+  CheckIcon,
   InboxIcon,
   ListOrderedIcon,
   Loader2Icon,
@@ -44,29 +60,33 @@ import {
   PencilIcon,
   PlayIcon,
   Trash2Icon,
+  TerminalIcon,
   TriangleAlertIcon,
   XIcon,
-  ZapIcon,
+  CornerDownRightIcon,
+  TargetIcon,
 } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import {
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 
-import type { ComposerState } from "../hooks/use-composer";
+import type { ComposerOptimisticMessage, ComposerState } from "../hooks/use-composer";
 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 { 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";
 
@@ -77,12 +97,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;
   /**
@@ -90,6 +122,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. */
@@ -100,7 +134,9 @@ export type SessionChromeProps = {
 
 type GoalPillState =
   | "pursuing"
+  | "waiting"
   | "scheduled"
+  | "session_failed"
   | "blocked"
   | "held"
   | "paused"
@@ -114,14 +150,90 @@ type QueuedTurnPresentation = {
 
 const GOAL_LABEL: Record<GoalPillState, string> = {
   pursuing: "Pursuing",
-  scheduled: "Scheduled",
+  waiting: "Waiting",
+  scheduled: "Waiting",
   blocked: "Blocked",
+  session_failed: "Blocked by session failure",
   held: "Held",
   paused: "Paused",
   invariant_broken: "Needs attention",
   completed: "Done",
 };
 
+/**
+ * Short pill suffix per `pausedReason`. `max_auto_continuations` is pacing
+ * (new input resumes it); `limits` is budget/admission; `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",
+  user_pause: "manually",
+  api: "manually",
+  agent: "agent",
+};
+
+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.",
+  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.",
+  agent: "Paused by the agent: it is waiting on a human decision before continuing.",
+};
+
+type GoalPillRecord = Pick<SessionGoal, "status" | "pausedReason"> & {
+  continuation?: SessionGoal["continuation"] | null | undefined;
+};
+
+/** Pill label, with the pause reason spelled out: "Paused · cap" / "Paused · manually". */
+export function sessionChromeGoalPillLabel(
+  state: GoalPillState,
+  record: GoalPillRecord | null | undefined,
+): string {
+  if (state !== "paused") return GOAL_LABEL[state];
+  const suffix = record?.pausedReason ? GOAL_PAUSED_REASON_SUFFIX[record.pausedReason] : undefined;
+  return suffix ? `Paused · ${suffix}` : "Paused";
+}
+
+/**
+ * One human sentence explaining WHY the goal is not pursuing right now: 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(
+  state: GoalPillState,
+  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") {
+    return record?.pausedReason
+      ? (GOAL_PAUSED_REASON_EXPLANATION[record.pausedReason] ?? null)
+      : null;
+  }
+  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}. 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;
@@ -138,6 +250,82 @@ function isSteeringTurn(turn: SessionTurn): boolean {
   return turn.metadata.delivery === "steer";
 }
 
+function isAuthoritativeQueuedTurn(
+  turn: SessionTurn,
+  mutationFor: UseTurnQueueResult["mutationFor"],
+): boolean {
+  return !isSteeringTurn(turn) && mutationFor(turn.id) !== "steer";
+}
+
+export function countAuthoritativeQueuedTurns(
+  turns: readonly SessionTurn[],
+  mutationFor: UseTurnQueueResult["mutationFor"],
+): number {
+  return turns.filter((turn) => isAuthoritativeQueuedTurn(turn, mutationFor)).length;
+}
+
+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
+    )
+  );
+}
+
+export function countOptimisticQueuedMessages(
+  messages: readonly ComposerOptimisticMessage[] | undefined,
+  queuedTurnIds: ReadonlySet<string>,
+  snapshot: UseTurnQueueResult["snapshot"],
+): number {
+  return (messages ?? []).filter((message) =>
+    isOptimisticQueuedMessage(message, queuedTurnIds, snapshot),
+  ).length;
+}
+
+/**
+ * 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
+  );
+}
+
 function objectValue(value: unknown): Record<string, unknown> | null {
   return value !== null && typeof value === "object" && !Array.isArray(value)
     ? (value as Record<string, unknown>)
@@ -148,20 +336,34 @@ function objectValue(value: unknown): Record<string, unknown> | null {
 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"
       ? "pursuing"
       : continuation.reason === "human_turn_running"
-        ? "blocked"
+        ? "waiting"
         : "invariant_broken";
   }
+  // `backoff_pending` (idle pacing between consecutive no-input continuations,
+  // next evaluation at `nextAttemptAt`) is an ordinary scheduled state.
   if (continuation.state === "scheduled") return "scheduled";
   if (continuation.state === "blocked") {
-    return continuation.reason === "workstream_paused" ? "held" : "blocked";
+    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"
+      : "blocked";
   }
   return "invariant_broken";
 }
@@ -199,6 +401,16 @@ function pendingKindLabel(kind: SessionPendingInputPreview["kind"]): string {
   switch (kind) {
     case "child_terminal_result":
       return "Child result";
+    case "child_requires_action":
+      return "Child needs input";
+    case "child_requires_action_resolved":
+      return "Child unblocked";
+    case "child_paused":
+      return "Child paused";
+    case "child_waiting_capacity":
+      return "Child waiting";
+    case "child_progress":
+      return "Child progress";
     case "agent_steer_instruction":
       return "Steer";
     case "scheduled_occurrence":
@@ -207,6 +419,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";
   }
@@ -226,52 +444,47 @@ 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();
   const record = goal?.goal ?? null;
   const incoming = queue.pendingInputs;
   const turns = queue.queue;
-  const composerSteering = composer?.steering ?? null;
-  const { steering, queuedTurns } = useMemo(() => {
-    const pendingQueueSteer =
-      turns.find((turn) => queue.pendingByTurn[turn.id] === "steer") ?? null;
-    const durableQueueSteer =
-      !pendingQueueSteer && turns[0] && isSteeringTurn(turns[0]) ? turns[0] : null;
-    const currentSteering =
-      composerSteering?.phase === "submitting"
-        ? composerSteering
-        : pendingQueueSteer
-          ? {
-              phase: "submitting" as const,
-              text: queuedTurnPresentation(pendingQueueSteer).text,
-              turnId: pendingQueueSteer.id,
-            }
-          : durableQueueSteer
-            ? {
-                phase: "accepted" as const,
-                text: queuedTurnPresentation(durableQueueSteer).text,
-                turnId: durableQueueSteer.id,
-              }
-            : composerSteering;
-    const currentTurnId = currentSteering?.turnId ?? null;
-    return {
-      steering: currentSteering,
-      queuedTurns: currentTurnId ? turns.filter((turn) => turn.id !== currentTurnId) : turns,
-    };
-  }, [composerSteering, queue.pendingByTurn, turns]);
+  const queueMutationFor = queue.mutationFor;
+  const queuedTurns = useMemo(
+    () => 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) =>
+        isOptimisticQueuedMessage(message, queuedTurnIds, queue.snapshot),
+      ),
+    [composer?.optimisticMessages, queue.snapshot, queuedTurnIds],
+  );
   const stoppingKind =
     composer?.stoppingAttempt ??
     (queue.stoppingPreviousAttempt
@@ -282,22 +495,91 @@ export function SessionChrome({
   const stopping = stoppingKind !== null;
   const canMutateQueue = !readOnly && composer !== undefined;
 
-  const liveGoal =
-    record?.status === "active" &&
-    record.continuation?.state === "running" &&
-    record.continuation.reason === "goal_turn_running";
-  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 goalState = record ? sessionChromeGoalPillState(record.status, record.continuation) : null;
+  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 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;
       label: string;
       detail?: string | undefined;
+      /** Hover explanation (why paused / held / when the next check is). */
+      title?: string | undefined;
       tone: SessionChromeSignalTone;
       icon: ReactNode;
     }> = [];
@@ -315,44 +597,43 @@ export function SessionChrome({
         icon: <InboxIcon className="size-3" />,
       });
     }
-    if (steering || stopping) {
-      rows.push({
-        id: "steering",
-        label: stopping
-          ? stoppingKind === "current"
-            ? "Stopping current work…"
-            : "Stopping previous work…"
-          : "Changing direction…",
-        ...(steering?.text ? { detail: steering.text } : {}),
-        tone: stopping ? "waiting" : "accent",
-        icon:
-          steering?.phase === "submitting" || stopping ? (
-            <Loader2Icon className="size-3 animate-og-spin" />
-          ) : (
-            <ZapIcon className="size-3" />
-          ),
-      });
-    }
-    if (queuedTurns.length > 0) {
+    const queuedCount = queuedTurns.length + optimisticQueued.length;
+    const queueProblem = queue.mutationError ?? queue.error;
+    if (queuedCount > 0 || queueProblem) {
       const presentations = queuedTurns.map(queuedTurnPresentation);
       const first = presentations[0];
-      const allVoiceRequests = presentations.every(({ kind }) => kind === "realtime_voice");
+      const allVoiceRequests =
+        optimisticQueued.length === 0 &&
+        presentations.length > 0 &&
+        presentations.every(({ kind }) => kind === "realtime_voice");
       const onlyVoiceHandoff =
-        presentations.length === 1 && first?.kind === "realtime_voice_handoff";
+        optimisticQueued.length === 0 &&
+        presentations.length === 1 &&
+        first?.kind === "realtime_voice_handoff";
       const voiceOnly = allVoiceRequests || onlyVoiceHandoff;
-      const detail = first?.text;
+      const detail = queueProblem
+        ? queue.mutationError
+          ? "Action not confirmed"
+          : "Queue unavailable"
+        : (first?.text ?? optimisticQueued[0]?.text);
       rows.push({
         id: "queue",
-        label: allVoiceRequests
-          ? queuedTurns.length === 1
-            ? "Voice request queued"
-            : `${queuedTurns.length} voice requests queued`
-          : onlyVoiceHandoff
-            ? "Voice handoff queued"
-            : `${queuedTurns.length} queued prompt${queuedTurns.length === 1 ? "" : "s"}`,
+        label: queueProblem
+          ? queuedCount > 0
+            ? `${queuedCount} queued · needs attention`
+            : "Queue needs attention"
+          : allVoiceRequests
+            ? queuedCount === 1
+              ? "Voice request queued"
+              : `${queuedCount} voice requests queued`
+            : onlyVoiceHandoff
+              ? "Voice handoff queued"
+              : `${queuedCount} queued prompt${queuedCount === 1 ? "" : "s"}`,
         ...(detail ? { detail } : {}),
-        tone: "neutral",
-        icon: voiceOnly ? (
+        tone: queueProblem ? "waiting" : "neutral",
+        icon: queueProblem ? (
+          <TriangleAlertIcon className="size-3" />
+        ) : voiceOnly ? (
           <AudioLinesIcon className="size-3" />
         ) : (
           <ListOrderedIcon className="size-3" />
@@ -360,24 +641,24 @@ export function SessionChrome({
       });
     }
     if (record && goalState) {
-      const waiting = goalState === "blocked" || goalState === "held" || goalState === "paused";
+      const waiting =
+        goalState === "waiting" ||
+        goalState === "blocked" ||
+        goalState === "session_failed" ||
+        goalState === "held" ||
+        goalState === "paused";
+      const explanation = sessionChromeGoalPillExplanation(goalState, record);
       rows.push({
         id: "goal",
-        label: GOAL_LABEL[goalState],
+        label: sessionChromeGoalPillLabel(goalState, record),
         detail: elapsed ? `${elapsed} · ${record.text}` : record.text,
+        ...(explanation ? { title: explanation } : {}),
         tone: waiting
           ? "waiting"
           : goalState === "pursuing" || goalState === "scheduled"
             ? "accent"
             : "neutral",
-        icon:
-          goalState === "blocked" || goalState === "invariant_broken" ? (
-            <TriangleAlertIcon className="size-3" />
-          ) : goalState === "paused" || goalState === "held" ? (
-            <PauseIcon className="size-3" />
-          ) : (
-            <ZapIcon className="size-3" />
-          ),
+        icon: <TargetIcon className="size-3" />,
       });
     }
     if (agentsSignal && agentsSignal.count > 0) {
@@ -390,36 +671,95 @@ 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,
     incoming,
+    optimisticQueued,
+    queue.error,
+    queue.mutationError,
     queuedTurns,
     record,
-    steering,
-    stopping,
-    stoppingKind,
   ]);
 
-  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);
+  useEffect(() => {
+    const previous = new Set(previousOptimisticQueueKeys.current.split(",").filter(Boolean));
+    const arrived = optimisticQueued.some((message) => !previous.has(message.clientEventId));
+    previousOptimisticQueueKeys.current = optimisticQueueKeys;
+    if (!arrived) return;
+    // Queue admission must not move the conversation or open a drawer beneath
+    // the pointer. A stable, paint-only receipt on the queue chip communicates
+    // destination without participating in layout.
+    setQueueArrivalNonce((current) => current + 1);
+    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>>>({});
   const railRef = useRef<HTMLDivElement | null>(null);
-  const panelBodyRef = useRef<HTMLDivElement | null>(null);
   const [pill, setPill] = useState({ left: 0, top: 0, width: 0, height: 0, opacity: 0 });
-  const [panelHeight, setPanelHeight] = useState(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);
@@ -442,7 +782,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();
@@ -471,28 +814,7 @@ export function SessionChrome({
 
   const open = active !== null;
 
-  useLayoutEffect(() => {
-    if (!open) {
-      setPanelHeight(0);
-      return;
-    }
-    const node = panelBodyRef.current;
-    if (!node) return;
-    setPanelHeight(node.offsetHeight);
-  }, [open, active, incoming, queuedTurns, record, goalState, agentsPanel, agentsSignal, steering]);
-
-  useEffect(() => {
-    if (!open) return;
-    const node = panelBodyRef.current;
-    if (!node || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => {
-      setPanelHeight(node.offsetHeight);
-    });
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [open, active]);
-
-  if (signals.length === 0) return null;
+  if (signals.length === 0 && !stopping) return null;
 
   const shellDuration = reduceMotion ? 0 : 0.22;
   const crossfadeDuration = reduceMotion ? 0 : 0.18;
@@ -500,16 +822,22 @@ export function SessionChrome({
 
   const panelBody =
     active === "incoming" ? (
-      <IncomingPanel inputs={incoming} onDismiss={onDismissIncoming} />
-    ) : active === "steering" && (steering || stopping) ? (
-      <SteeringPanel
-        phase={stopping ? "stopping" : (steering?.phase ?? "accepted")}
-        stoppingKind={stoppingKind}
-        text={steering?.text}
+      <IncomingPanel
+        inputs={incoming}
+        onDismiss={onDismissIncoming}
+        onOpenSession={onOpenSession}
       />
     ) : active === "queue" ? (
       <QueuePanel
         turns={queuedTurns}
+        optimistic={optimisticQueued}
+        loadError={queue.error}
+        mutationError={queue.mutationError}
+        onRefresh={queue.refresh}
+        onClearMutationError={queue.clearMutationError}
+        onRetryOptimistic={composer?.retryOptimisticMessage}
+        onRestoreOptimistic={composer?.restoreOptimisticMessage}
+        onRemoveOptimistic={composer?.removeOptimisticMessage}
         readOnly={!canMutateQueue}
         mutationFor={queue.mutationFor}
         replaceDraftFor={replaceDraftFor}
@@ -519,10 +847,16 @@ export function SessionChrome({
             ? () => {
                 const turnId = replaceDraftFor;
                 setReplaceDraftFor(null);
-                void queue.editTurn(turnId, {
-                  expectedDraftRevision: composer.draftRevision,
-                  replaceDraft: true,
-                });
+                void (async () => {
+                  const checkedOut = await queue.editTurn(turnId, {
+                    expectedDraftRevision: composer.draftRevision,
+                    replaceDraft: true,
+                  });
+                  if (checkedOut) {
+                    composer.applyDraft(checkedOut);
+                    onComposerFocus?.();
+                  }
+                })();
               }
             : undefined
         }
@@ -533,10 +867,16 @@ export function SessionChrome({
                   composer,
                   () => setReplaceDraftFor(turn.id),
                   () => {
-                    void queue.editTurn(turn.id, {
-                      expectedDraftRevision: composer.draftRevision,
-                      replaceDraft: false,
-                    });
+                    void (async () => {
+                      const checkedOut = await queue.editTurn(turn.id, {
+                        expectedDraftRevision: composer.draftRevision,
+                        replaceDraft: false,
+                      });
+                      if (checkedOut) {
+                        composer.applyDraft(checkedOut);
+                        onComposerFocus?.();
+                      }
+                    })();
                   },
                 );
               }
@@ -566,6 +906,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>}
@@ -577,6 +919,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"}
       >
@@ -587,15 +930,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)",
           }}
@@ -611,9 +948,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
@@ -633,108 +970,307 @@ 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}
-                    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)",
-                    }}
-                  >
-                    <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", "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 ? (
+                      </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 && queuedTurns[0] ? (
+                        <div className="flex shrink-0 items-center pr-1 pl-0.5">
+                          <IconAction
+                            label="Steer first queued message"
+                            analyticsAction="steer"
+                            text="Steer"
+                            tip={QUEUE_STEER_TIP}
+                            disabled={
+                              queue.mutating || Boolean(queue.mutationFor(queuedTurns[0].id))
+                            }
+                            onClick={() => void queue.steerTurn(queuedTurns[0]!.id)}
+                          >
+                            <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"
+                  aria-live="polite"
+                  className="inline-flex min-h-[var(--og-session-chrome-chip-min-height)] items-center gap-1.5 px-1.5 text-og-xs text-og-fg-muted"
+                  data-testid="session-chrome-stopping"
+                >
+                  <Loader2Icon
+                    aria-hidden="true"
+                    className="size-3 animate-og-spin motion-reduce:animate-none"
+                  />
+                  {stoppingKind === "current" ? "Current work stopping" : "Previous work stopping"}
+                </span>
+              ) : null}
             </div>
           </div>
 
-          <motion.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=""
-            initial={false}
-            animate={{
-              height: open ? panelHeight : 0,
+            aria-hidden={!open}
+            inert={!open ? true : undefined}
+            className="grid overflow-hidden motion-reduce:transition-none"
+            style={{
+              gridTemplateRows: open ? "1fr" : "0fr",
               opacity: open ? 1 : 0,
+              pointerEvents: open ? "auto" : "none",
+              transitionProperty: "grid-template-rows, opacity",
+              transitionDuration: "var(--og-session-chrome-duration)",
+              transitionTimingFunction: "var(--_og-session-chrome-ease)",
             }}
-            transition={{ duration: shellDuration, ease }}
-            className="overflow-hidden"
           >
-            <div
-              ref={panelBodyRef}
-              className="relative overflow-y-auto overscroll-contain border-t border-og-border/50"
-              style={{
-                maxHeight: "var(--og-session-chrome-panel-max-height)",
-                paddingInline: "var(--og-session-chrome-panel-pad-x)",
-                paddingBlock: "var(--og-session-chrome-panel-pad-y)",
-              }}
-            >
-              <AnimatePresence initial={false}>
-                {active && panelBody ? (
+            <div className="min-h-0 overflow-hidden">
+              <div
+                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)",
+                  paddingBlock: "var(--og-session-chrome-panel-pad-y)",
+                }}
+              >
+                <AnimatePresence initial={false}>
+                  {active && active !== "commands" && panelBody ? (
+                    <motion.div
+                      key={active}
+                      data-og-session-chrome-panel-frame={active}
+                      initial={reduceMotion ? false : { opacity: 0 }}
+                      animate={{ opacity: 1, position: "relative" }}
+                      exit={
+                        reduceMotion
+                          ? { opacity: 1, position: "relative" }
+                          : {
+                              opacity: 0,
+                              position: "absolute",
+                              top: 0,
+                              left: 0,
+                              right: 0,
+                            }
+                      }
+                      transition={{ duration: crossfadeDuration, ease }}
+                    >
+                      {panelBody}
+                    </motion.div>
+                  ) : null}
+                </AnimatePresence>
+                {active === "commands" ? (
                   <motion.div
-                    key={active}
-                    data-og-session-chrome-panel-frame={active}
+                    key="commands"
                     initial={reduceMotion ? false : { opacity: 0 }}
-                    animate={{ opacity: 1, position: "relative" }}
-                    exit={
-                      reduceMotion
-                        ? { opacity: 1, position: "relative" }
-                        : {
-                            opacity: 0,
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                          }
-                    }
+                    animate={{ opacity: 1 }}
                     transition={{ duration: crossfadeDuration, ease }}
                   >
                     {panelBody}
                   </motion.div>
                 ) : null}
-              </AnimatePresence>
+              </div>
             </div>
-          </motion.div>
+          </div>
         </div>
       </div>
     </TooltipProvider>
@@ -744,93 +1280,72 @@ export function SessionChrome({
 function IncomingPanel({
   inputs,
   onDismiss,
+  onOpenSession,
 }: {
   inputs: SessionPendingInputPreview[];
   onDismiss?: ((inputId: string) => void) | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
   return (
-    <ul
-      className="flex flex-col gap-0.5"
-      aria-label="Incoming updates"
-      data-og-session-chrome-panel="incoming"
-    >
-      {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",
-            )}
+    <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) => (
+          <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)]"
           >
-            {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>
+            <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>
-          ) : null}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function SteeringPanel({
-  phase,
-  stoppingKind,
-  text,
-}: {
-  phase: "submitting" | "accepted" | "stopping";
-  stoppingKind?: "current" | "previous" | null | undefined;
-  text?: string | undefined;
-}) {
-  return (
-    <div
-      className="flex items-start gap-2 rounded-og-sm px-1.5 py-1"
-      role="status"
-      aria-live="polite"
-      data-og-session-chrome-panel="steering"
-    >
-      <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-og-accent-soft text-og-accent">
-        {phase === "submitting" || phase === "stopping" ? (
-          <Loader2Icon className="size-3 animate-og-spin" aria-hidden="true" />
-        ) : (
-          <ZapIcon className="size-3" aria-hidden="true" />
-        )}
-      </span>
-      <div className="min-w-0">
-        {text ? (
-          <p className="truncate text-og-xs font-medium leading-4 text-og-fg">{text}</p>
-        ) : null}
-        <p className={cn(text && "mt-0.5", "text-[10px] leading-4 text-og-fg-muted")}>
-          {phase === "submitting"
-            ? "Sending your latest direction…"
-            : phase === "stopping"
-              ? stoppingKind === "previous"
-                ? "Direction saved. Waiting for the previous command to stop safely."
-                : "Waiting for the current command to stop safely."
-              : "Direction accepted. The agent will continue from it."}
-        </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 ${pendingKindLabel(input.kind)}`}
+                  tip="Dismiss"
+                  onClick={() => onDismiss(input.id)}
+                  danger
+                >
+                  <Trash2Icon className="size-3" />
+                </IconAction>
+              </div>
+            ) : null}
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
 
 function QueuePanel({
   turns,
+  optimistic,
+  loadError,
+  mutationError,
+  onRefresh,
+  onClearMutationError,
+  onRetryOptimistic,
+  onRestoreOptimistic,
+  onRemoveOptimistic,
   readOnly,
   mutationFor,
   replaceDraftFor,
@@ -842,6 +1357,14 @@ function QueuePanel({
   onMove,
 }: {
   turns: SessionTurn[];
+  optimistic: ComposerOptimisticMessage[];
+  loadError: Error | null;
+  mutationError: Error | null;
+  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"];
   replaceDraftFor?: string | null | undefined;
@@ -852,6 +1375,28 @@ function QueuePanel({
   onRemove?: ((turnId: string) => void) | undefined;
   onMove?: ((turnId: string, beforeTurnId: string | null) => void) | undefined;
 }) {
+  const reduceMotion = useReducedMotion();
+  const turnIdsKey = turns.map((turn) => turn.id).join(",");
+  const [interactiveTurnIds, setInteractiveTurnIds] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+  useEffect(() => {
+    const visibleTurnIds = new Set(turnIdsKey ? turnIdsKey.split(",") : []);
+    setInteractiveTurnIds((current) => {
+      const retained = new Set([...current].filter((turnId) => visibleTurnIds.has(turnId)));
+      return retained.size === current.size ? current : retained;
+    });
+    if (visibleTurnIds.size === 0) return;
+    // An optimistic queue row and its authoritative replacement have different
+    // React identities. Do not expose an actionable control during that short
+    // handoff: a pointer can otherwise press the outgoing DOM node and release
+    // over its replacement, producing a completed-looking click with no event.
+    const timer = setTimeout(
+      () => setInteractiveTurnIds((current) => new Set([...current, ...visibleTurnIds])),
+      reduceMotion ? 0 : 240,
+    );
+    return () => clearTimeout(timer);
+  }, [reduceMotion, turnIdsKey]);
   return (
     <ol
       className="flex flex-col gap-0.5"
@@ -862,6 +1407,7 @@ function QueuePanel({
         const presentation = queuedTurnPresentation(turn);
         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 showActions = !readOnly && (onEdit || onSteer || onRemove || onMove);
@@ -870,6 +1416,7 @@ function QueuePanel({
           <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">
@@ -883,9 +1430,10 @@ 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 ? (
@@ -893,7 +1441,7 @@ function QueuePanel({
                       <IconAction
                         label={`Move queued prompt ${index + 1} up`}
                         tip="Move up"
-                        disabled={pending !== null || index === 0}
+                        disabled={settling || pending !== null || index === 0}
                         onClick={() => onMove(turn.id, beforeUp)}
                       >
                         <ArrowUpIcon className="size-3" />
@@ -901,7 +1449,7 @@ function QueuePanel({
                       <IconAction
                         label={`Move queued prompt ${index + 1} down`}
                         tip="Move down"
-                        disabled={pending !== null || index >= turns.length - 1}
+                        disabled={settling || pending !== null || index >= turns.length - 1}
                         onClick={() => onMove(turn.id, beforeDown)}
                       >
                         <ArrowDownIcon className="size-3" />
@@ -911,14 +1459,16 @@ function QueuePanel({
                   {onSteer ? (
                     <IconAction
                       label={`Steer queued prompt ${index + 1}`}
+                      analyticsAction="steer"
+                      text="Steer"
                       tip={QUEUE_STEER_TIP}
-                      disabled={pending !== null}
+                      disabled={settling || pending !== null}
                       onClick={() => onSteer(turn.id)}
                     >
                       {pending === "steer" ? (
                         <Loader2Icon className="size-3 animate-og-spin" />
                       ) : (
-                        <ZapIcon className="size-3" />
+                        <CornerDownRightIcon className="size-3" />
                       )}
                     </IconAction>
                   ) : null}
@@ -926,7 +1476,7 @@ function QueuePanel({
                     <IconAction
                       label={`Edit queued prompt ${index + 1}`}
                       tip={QUEUE_EDIT_TIP}
-                      disabled={pending !== null}
+                      disabled={settling || pending !== null}
                       onClick={() => onEdit(turn)}
                     >
                       {pending === "edit" ? (
@@ -940,7 +1490,7 @@ function QueuePanel({
                     <IconAction
                       label={`Remove queued prompt ${index + 1}`}
                       tip={QUEUE_DELETE_TIP}
-                      disabled={pending !== null}
+                      disabled={settling || pending !== null}
                       onClick={() => onRemove(turn.id)}
                       danger
                     >
@@ -971,7 +1521,7 @@ function QueuePanel({
                   </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
@@ -982,10 +1532,140 @@ function QueuePanel({
           </li>
         );
       })}
+      <AnimatePresence initial={false}>
+        {optimistic.map((message, index) => (
+          <motion.li
+            key={message.clientEventId}
+            aria-live="polite"
+            data-optimistic-queue-message={message.clientEventId}
+            initial={reduceMotion ? false : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: reduceMotion ? 0 : 0.12, ease: [0.22, 1, 0.36, 1] }}
+            className={cn(
+              "flex min-h-6 items-center gap-1.5 rounded-og-sm px-1.5 py-1",
+              message.state === "failed" ? "bg-og-danger/8 text-og-danger" : "bg-og-accent-soft/45",
+            )}
+          >
+            <span className="shrink-0 font-og-mono text-[10px] leading-4 text-og-fg-subtle">
+              {turns.length + index + 1}
+            </span>
+            <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"
+                ? 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]">
+                {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"
+                    onClick={() => onRetryOptimistic(message.clientEventId)}
+                  >
+                    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"
+                    aria-label="Dismiss unconfirmed queued prompt"
+                    className="rounded-og-sm p-1 text-og-fg-muted hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:min-h-11 pointer-coarse:min-w-11"
+                    onClick={() => onRemoveOptimistic(message.clientEventId)}
+                  >
+                    <XIcon className="size-3" />
+                  </button>
+                ) : null}
+              </div>
+            ) : message.state === "sending" ? (
+              <Loader2Icon
+                aria-hidden="true"
+                className="size-3 shrink-0 animate-og-spin text-og-accent motion-reduce:animate-none"
+              />
+            ) : (
+              <CheckIcon aria-hidden="true" className="size-3 shrink-0 text-og-accent" />
+            )}
+          </motion.li>
+        ))}
+      </AnimatePresence>
+      {loadError ? (
+        <li
+          role="alert"
+          className="flex items-center gap-1.5 rounded-og-sm bg-og-danger/8 px-1.5 py-1 text-og-xs text-og-danger"
+        >
+          <TriangleAlertIcon className="size-3 shrink-0" />
+          <span className="min-w-0 flex-1">Queue unavailable.</span>
+          <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={() => void onRefresh()}
+          >
+            Retry
+          </button>
+        </li>
+      ) : null}
+      {mutationError ? (
+        <li
+          role="alert"
+          className="flex items-center gap-1.5 rounded-og-sm bg-og-danger/8 px-1.5 py-1 text-og-xs text-og-danger"
+        >
+          <TriangleAlertIcon className="size-3 shrink-0" />
+          <span className="min-w-0 flex-1">Not confirmed. Check the queue before retrying.</span>
+          <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={onClearMutationError}
+          >
+            Dismiss
+          </button>
+        </li>
+      ) : null}
     </ol>
   );
 }
 
+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,
@@ -997,17 +1677,19 @@ 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");
+  const explanation = sessionChromeGoalPillExplanation(state, record);
 
   return (
     <div className="space-y-1.5" data-og-session-chrome-panel="goal">
       <div className="flex flex-wrap items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-og-fg-subtle">
-        <span>{GOAL_LABEL[state]}</span>
+        <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>
@@ -1018,15 +1700,23 @@ function GoalPanel({
           <span className="font-medium text-og-fg">Done when</span> {record.successCriteria}
         </p>
       ) : null}
+      {explanation ? (
+        <p
+          data-og-session-chrome-goal-explanation
+          className="text-og-xs leading-4 text-og-fg-muted"
+        >
+          {explanation}
+        </p>
+      ) : 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">
         <div className="flex flex-wrap gap-1 text-[10px] text-og-fg-muted">
           <span className="rounded bg-og-surface-3/70 px-1 py-px">
-            {record.autoContinuations} auto-continues
+            {record.autoContinuations} consecutive unattended continues
           </span>
           <span className="rounded bg-og-surface-3/70 px-1 py-px">
             {record.noProgressStreak} stalled
@@ -1081,7 +1771,9 @@ const QUEUE_EDIT_TIP = "Edit in composer";
 const QUEUE_DELETE_TIP = "Delete this queued prompt";
 
 function IconAction({
+  text,
   label,
+  analyticsAction,
   tip,
   onClick,
   disabled,
@@ -1089,6 +1781,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;
@@ -1101,16 +1796,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>