@opengeni/react 3.7.0-canary.0 → 3.7.0-canary.2

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,12 +29,25 @@
  * 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 +60,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";
@@ -61,7 +77,13 @@ import { formatClockTime } from "../lib/format";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 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 +94,18 @@ export type SessionChromeAgentsSignal = {
 };
 
 export type SessionChromeProps = {
+  compact?: boolean;
+  /** Authoritative execution status; omitted by older embedding hosts. */
+  sessionStatus?: SessionStatus | undefined;
   queue: UseTurnQueueResult;
   /** Needed for queue edit → composer checkout. Omit with `readOnly`. */
   composer?: ComposerState | 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 +113,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,6 +127,7 @@ type GoalPillState =
   | "pursuing"
   | "waiting"
   | "scheduled"
+  | "session_failed"
   | "blocked"
   | "held"
   | "paused"
@@ -111,8 +142,9 @@ type QueuedTurnPresentation = {
 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",
@@ -167,15 +199,18 @@ 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") {
     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 === "held" && continuation?.reason === "held_for_input") {
     const reason = continuation.holdReason?.trim();
@@ -203,6 +238,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>)
@@ -213,9 +324,11 @@ 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"
@@ -228,6 +341,7 @@ export function sessionChromeGoalPillState(
   // next evaluation at `nextAttemptAt`) is an ordinary scheduled state.
   if (continuation.state === "scheduled") return "scheduled";
   if (continuation.state === "blocked") {
+    if (continuation.reason === "human_turn_running") 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"
@@ -288,6 +402,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 +427,26 @@ function toneClass(tone: SessionChromeSignalTone, selected: boolean): string {
 }
 
 export function SessionChrome({
+  compact = false,
+  sessionStatus,
   queue,
   composer,
   goal,
   agentsPanel,
+  commandsPanel,
+  commandsCount = 0,
   agentsSignal,
   onDismissIncoming,
+  onOpenSession,
   readOnly = false,
   className,
   active: activeControlled,
   defaultActive = null,
   onActiveChange,
 }: SessionChromeProps) {
+  const [activityRequested, setActivityOpen] = useState(
+    Boolean(compact && defaultActive && ["incoming", "agents", "commands"].includes(defaultActive)),
+  );
   const reactId = useId();
   const panelId = `og-session-chrome-panel-${reactId}`;
   const reduceMotion = useReducedMotion();
@@ -327,24 +455,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 +476,51 @@ 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 goalState = record ? sessionChromeGoalPillState(record.status, record.continuation) : null;
+  const [activeUncontrolled, setActiveUncontrolled] = useState<SessionChromeSignalId | null>(() =>
+    sessionChromeInitialActive({
+      defaultActive,
+      authoritativeQueuedCount: initialAuthoritativeQueuedCount,
+    }),
+  );
+  const active = activeControlled !== undefined ? activeControlled : activeUncontrolled;
+  const activityOpen =
+    activityRequested ||
+    Boolean(compact && 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;
@@ -437,6 +592,7 @@ export function SessionChrome({
       const waiting =
         goalState === "waiting" ||
         goalState === "blocked" ||
+        goalState === "session_failed" ||
         goalState === "held" ||
         goalState === "paused";
       const explanation = sessionChromeGoalPillExplanation(goalState, record);
@@ -450,16 +606,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 +619,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 +646,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 +658,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 +704,13 @@ 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 (
+      compact &&
+      !signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id))
+    )
+      setActivityOpen(false);
+  }, [compact, signals]);
   useEffect(() => {
     if (active && !signalIds.split(",").includes(active)) {
       if (activeControlled === undefined) setActiveUncontrolled(null);
@@ -535,7 +733,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();
@@ -572,7 +773,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}
@@ -645,6 +850,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>}
@@ -666,15 +873,21 @@ 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: compact
+              ? "transparent"
+              : open
+                ? "var(--_og-session-chrome-surface-open)"
+                : "var(--_og-session-chrome-surface)",
+            borderColor: compact
+              ? "transparent"
+              : open
+                ? "var(--_og-session-chrome-border-open)"
+                : "var(--_og-session-chrome-border)",
+            boxShadow: compact
+              ? "none"
+              : open
+                ? "var(--og-session-chrome-shadow-open)"
+                : "var(--og-session-chrome-shadow)",
             transitionDuration: "var(--og-session-chrome-duration)",
             transitionTimingFunction: "var(--_og-session-chrome-ease)",
           }}
@@ -690,9 +903,9 @@ export function SessionChrome({
           >
             <div
               ref={railRef}
-              className="relative flex flex-wrap items-center"
+              className={cn("relative flex items-center", compact ? "flex-nowrap" : "flex-wrap")}
               style={{
-                gap: "var(--og-session-chrome-chip-gap)",
+                gap: compact ? "10px" : "var(--og-session-chrome-chip-gap)",
               }}
             >
               <motion.div
@@ -712,71 +925,193 @@ 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) => !compact || !["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",
+                        compact && "bg-og-surface-2/60 px-0.5",
+                        compact && selected && "bg-og-surface-3",
+                      )}
+                    >
+                      <button
+                        type="button"
+                        ref={(node) => {
+                          chipRefs.current[signal.id] = node;
+                        }}
+                        aria-expanded={selected}
+                        aria-controls={panelId}
+                        aria-label={
+                          compact && 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 ?? (compact ? signal.label : undefined)}
+                        onClick={() => {
+                          if (compact) 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",
+                            compact ? "min-w-0 truncate" : "shrink-0",
+                          )}
+                        >
+                          {compact && signal.id === "goal" ? "Goal · " : null}
+                          {compact && signal.id === "goal"
+                            ? goalState === "pursuing"
+                              ? "Running"
+                              : signal.label
+                            : compact && signal.id === "queue"
+                              ? `${queuedTurns.length + optimisticQueued.length} queued`
+                              : signal.label}
                         </span>
-                      </>
-                    ) : null}
-                    {selected ? (
-                      <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" />
-                      </span>
-                    ) : null}
-                  </button>
-                );
-              })}
+                        {signal.detail && !compact ? (
+                          <>
+                            <span aria-hidden className="shrink-0 text-og-fg-subtle/60">
+                              ·
+                            </span>
+                            <span className="min-w-0 max-w-[8.5rem] truncate text-og-fg sm:max-w-[12rem]">
+                              {signal.detail}
+                            </span>
+                          </>
+                        ) : null}
+                        {selected && !compact ? (
+                          <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" />
+                          </span>
+                        ) : null}
+                      </button>
+                      {signal.id === "goal" && goal && record && !readOnly ? (
+                        <div className={cn("flex shrink-0 items-center pr-1", compact && "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={cn("flex shrink-0 items-center pr-1", compact && "pl-0.5")}>
+                          <IconAction
+                            label="Steer first queued message"
+                            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>
+                  );
+                })}
+              {compact &&
+              signals.some((signal) => ["incoming", "agents", "commands"].includes(signal.id)) ? (
+                <button
+                  type="button"
+                  aria-label="Session activity"
+                  title={activityOpen ? "Close activity" : "Inbox, agents and commands"}
+                  aria-controls={panelId}
+                  aria-expanded={activityOpen}
+                  onClick={() => {
+                    setActivityOpen(!activityOpen);
+                    setActive(
+                      activityOpen
+                        ? null
+                        : (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>
+                  {incoming.length > 0 ? (
+                    <span className="size-1.5 rounded-full bg-og-accent" />
+                  ) : null}
+                </button>
+              ) : null}
               {stopping ? (
                 <span
                   role="status"
@@ -794,6 +1129,47 @@ export function SessionChrome({
             </div>
           </div>
 
+          <AnimatePresence initial={false}>
+            {compact && 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. {goal.mutationError.message}
+            </p>
+          ) : null}
           <div
             id={panelId}
             data-og-session-chrome-panel-shell=""
@@ -811,7 +1187,14 @@ 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",
+                  compact
+                    ? activityOpen
+                      ? "rounded-b-og-lg bg-og-surface-2/50"
+                      : "mt-1 rounded-og-lg bg-og-surface-2/50"
+                    : "border-t border-og-border/50",
+                )}
                 style={{
                   maxHeight: "var(--og-session-chrome-panel-max-height)",
                   paddingInline: "var(--og-session-chrome-panel-pad-x)",
@@ -819,7 +1202,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 +1225,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 +1247,59 @@ 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>
+            {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>
   );
 }
 
@@ -1017,6 +1422,7 @@ function QueuePanel({
                   {onSteer ? (
                     <IconAction
                       label={`Steer queued prompt ${index + 1}`}
+                      text="Steer"
                       tip={QUEUE_STEER_TIP}
                       disabled={settling || pending !== null}
                       onClick={() => onSteer(turn.id)}
@@ -1024,7 +1430,7 @@ function QueuePanel({
                       {pending === "steer" ? (
                         <Loader2Icon className="size-3 animate-og-spin" />
                       ) : (
-                        <ZapIcon className="size-3" />
+                        <CornerDownRightIcon className="size-3" />
                       )}
                     </IconAction>
                   ) : null}
@@ -1206,7 +1612,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>
@@ -1288,6 +1694,7 @@ const QUEUE_EDIT_TIP = "Edit in composer";
 const QUEUE_DELETE_TIP = "Delete this queued prompt";
 
 function IconAction({
+  text,
   label,
   tip,
   onClick,
@@ -1296,6 +1703,7 @@ function IconAction({
   children,
 }: {
   label: string;
+  text?: string;
   tip: ReactNode;
   onClick: () => void;
   disabled?: boolean;
@@ -1311,13 +1719,16 @@ function IconAction({
           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>