@opengeni/react 3.7.0-canary.1 → 3.7.0-canary.3

package/dist/components/child-session-link.d.ts

@@ -0,0 +1,5 @@
+import type { MachineInputMember } from "../timeline/types.js";
+/** Source IDs are routing coordinates only for typed child updates, never parsed from prose. */
+export declare function ChildSessionLink({ kind, sourceId, onOpenSession, }: Pick<MachineInputMember, "kind" | "sourceId"> & {
+    onOpenSession?: ((sessionId: string) => void) | undefined;
+}): import("react").JSX.Element | null;

package/dist/components/session-chrome.d.ts

@@ -39,7 +39,7 @@
  * shell uses one CSS grid-track transition for deliberate open/close actions;
  * live queue reconciliation never feeds measurements back into layout.
  */
-import type { SessionGoal, SessionTurn } from "@opengeni/sdk";
+import type { SessionGoal, SessionStatus, SessionTurn } from "@opengeni/sdk";
 import { type ReactNode } from "react";
 import type { ComposerOptimisticMessage, ComposerState } from "../hooks/use-composer.js";
 import type { UseGoalResult } from "../hooks/use-goal.js";
@@ -53,6 +53,8 @@ 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;
@@ -69,6 +71,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. */
@@ -76,7 +80,7 @@ export type SessionChromeProps = {
     defaultActive?: SessionChromeSignalId | null | undefined;
     onActiveChange?: ((next: SessionChromeSignalId | null) => void) | undefined;
 };
-type GoalPillState = "pursuing" | "waiting" | "scheduled" | "blocked" | "held" | "paused" | "invariant_broken" | "completed";
+type GoalPillState = "pursuing" | "waiting" | "scheduled" | "session_failed" | "blocked" | "held" | "paused" | "invariant_broken" | "completed";
 type GoalPillRecord = Pick<SessionGoal, "status" | "pausedReason"> & {
     continuation?: SessionGoal["continuation"] | null | undefined;
 };
@@ -111,6 +115,6 @@ export declare function sessionChromeShouldOfferQueue(input: {
     suppressed: boolean;
 }): boolean;
 /** Select pill state from the goal's authoritative continuation projection. */
-export declare function sessionChromeGoalPillState(goalStatus: "active" | "paused" | "completed", continuation: SessionGoal["continuation"] | null | undefined): GoalPillState;
-export declare function SessionChrome({ compact, queue, composer, goal, agentsPanel, commandsPanel, commandsCount, agentsSignal, onDismissIncoming, readOnly, className, active: activeControlled, defaultActive, onActiveChange, }: SessionChromeProps): import("react").JSX.Element | null;
+export declare function sessionChromeGoalPillState(goalStatus: "active" | "paused" | "completed", continuation: SessionGoal["continuation"] | null | undefined, sessionStatus?: SessionStatus): GoalPillState;
+export declare function SessionChrome({ compact, sessionStatus, queue, composer, goal, agentsPanel, commandsPanel, commandsCount, agentsSignal, onDismissIncoming, onOpenSession, readOnly, className, active: activeControlled, defaultActive, onActiveChange, }: SessionChromeProps): import("react").JSX.Element | null;
 export {};

package/dist/composer.js

@@ -37,7 +37,7 @@ import {
   useChatComposer,
   useChatComposerController,
   useVoiceInput
-} from "./chunk-INGB2N5R.js";
+} from "./chunk-3IY6UZI6.js";
 import {
   BillingClassMark,
   ModelPolicyPicker,

package/dist/index.js

@@ -105,7 +105,7 @@ import {
   useWorkspaceModelCatalog,
   userMessageLikelyNeedsDisclosure,
   v4aToGitFileDiff
-} from "./chunk-5IXTJTK3.js";
+} from "./chunk-2ZICNIGZ.js";
 import "./chunk-W3OUAH6M.js";
 import {
   OpenGeniProvider
@@ -153,7 +153,7 @@ import {
   useSlashCommands,
   useTranscription,
   useVoiceInput
-} from "./chunk-INGB2N5R.js";
+} from "./chunk-3IY6UZI6.js";
 import {
   BillingClassMark,
   ModelPolicyPicker,

package/dist/session-ui.js

@@ -13,11 +13,11 @@ import {
   sessionChromeGoalPillLabel,
   sessionChromeGoalPillState,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-5IXTJTK3.js";
+} from "./chunk-2ZICNIGZ.js";
 import "./chunk-W3OUAH6M.js";
 import "./chunk-PAJU5KKL.js";
 import "./chunk-JVYQRRC4.js";
-import "./chunk-INGB2N5R.js";
+import "./chunk-3IY6UZI6.js";
 import "./chunk-4JFUT22W.js";
 import "./chunk-VZTQ73XT.js";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "3.7.0-canary.1",
+  "version": "3.7.0-canary.3",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -120,7 +120,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/sdk": "^3.7.0-canary.1",
+    "@opengeni/sdk": "^3.7.0-canary.3",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/child-session-link.tsx

@@ -0,0 +1,27 @@
+import type { MachineInputMember } from "../timeline/types";
+
+/** Source IDs are routing coordinates only for typed child updates, never parsed from prose. */
+export function ChildSessionLink({
+  kind,
+  sourceId,
+  onOpenSession,
+}: Pick<MachineInputMember, "kind" | "sourceId"> & {
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+}) {
+  if (
+    !onOpenSession ||
+    !kind.startsWith("child_") ||
+    !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(sourceId)
+  ) {
+    return null;
+  }
+  return (
+    <button
+      type="button"
+      onClick={() => onOpenSession(sourceId)}
+      className="mt-1 rounded-og-sm text-og-xs font-medium text-og-accent underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent"
+    >
+      View session
+    </button>
+  );
+}

package/src/components/composer.tsx

@@ -281,7 +281,7 @@ function measureComposerContentHeight(textarea: HTMLTextAreaElement): number {
     mirror.tabIndex = -1;
     mirror.rows = 1;
     mirror.style.cssText =
-      "position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
+      "position:fixed;top:0;left:-100000px;visibility:hidden;pointer-events:none;height:auto;min-height:0;max-height:none;overflow:hidden;z-index:-1;";
     composerHeightMirror = mirror;
   }
 

package/src/components/machine-input-display.ts

@@ -7,7 +7,7 @@ export const MACHINE_INPUT_META: Record<MachineInputMember["kind"], string> = {
   session_wait_timeout: "Wait ended",
   agent_message: "Agent update",
   agent_steer_instruction: "Agent direction",
-  child_terminal_result: "Agent finished",
+  child_terminal_result: "Agent result received",
   media_generation_result: "Video update",
   child_requires_action: "Agent needs input",
   child_requires_action_resolved: "Agent unblocked",
@@ -35,7 +35,7 @@ export function machineInputBatchLabel(members: readonly MachineInputMember[]):
       case "session_wait_timeout":
         return n === 1 ? "Wait ended" : `${n} waits ended`;
       case "child_terminal_result":
-        return n === 1 ? "Agent finished" : `${n} agents finished`;
+        return n === 1 ? "Agent result received" : `${n} agent results received`;
       case "goal_continuation":
         return n === 1 ? "Goal continued" : `${n} goal continuations`;
       case "scheduled_occurrence":

package/src/components/message-timeline.tsx

@@ -1,3 +1,4 @@
+import { ChildSessionLink } from "./child-session-link";
 import type {
   DraftTimelineAnnotation,
   MediaGenerationResult,
@@ -2847,7 +2848,11 @@ export function TimelineRow({
       return <GoalRow item={item} />;
     case "machine-input-batch":
       return (
-        <MachineInputBatchRow item={item} loadVideoArtifactPlayback={loadVideoArtifactPlayback} />
+        <MachineInputBatchRow
+          item={item}
+          onOpenSession={onOpenSession}
+          loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+        />
       );
     case "notice":
       return <NoticeRow item={item} />;
@@ -3460,9 +3465,11 @@ function GoalRow({ item }: { item: GoalItem }) {
 
 function MachineInputBatchRow({
   item,
+  onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   item: MachineInputBatchItem;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   const enter = useEntranceAnimation();
@@ -3509,6 +3516,7 @@ function MachineInputBatchRow({
             <MachineInputRow
               key={member.id}
               member={member}
+              onOpenSession={onOpenSession}
               loadVideoArtifactPlayback={loadVideoArtifactPlayback}
             />
           ))}
@@ -3525,9 +3533,11 @@ function MachineInputBatchRow({
 
 function MachineInputRow({
   member,
+  onOpenSession,
   loadVideoArtifactPlayback,
 }: {
   member: MachineInputBatchItem["members"][number];
+  onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   if (member.kind === "media_generation_result" && member.result) {
@@ -3554,6 +3564,11 @@ function MachineInputRow({
             {truncate(summary, 320)}
           </p>
         ) : null}
+        <ChildSessionLink
+          kind={member.kind}
+          sourceId={member.sourceId}
+          onOpenSession={onOpenSession}
+        />
       </div>
     </div>
   );
@@ -3662,7 +3677,7 @@ function NoticeRow({ item }: { item: NoticeItem }) {
         {item.details ? (
           <details className="mt-2 text-og-control">
             <summary className="cursor-pointer font-medium">{item.details.label}</summary>
-            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-black/5 p-2 font-mono dark:bg-white/5">
+            <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-og-fg/5 p-2 font-mono">
               {JSON.stringify(item.details.value, null, 2)}
             </pre>
           </details>

package/src/components/session-chrome.tsx

@@ -1,3 +1,4 @@
+import { ChildSessionLink } from "./child-session-link";
 /**
  * SessionChrome — compact merged session signals above the composer.
  *
@@ -39,7 +40,12 @@
  * 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,
@@ -89,6 +95,8 @@ 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;
@@ -105,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. */
@@ -117,6 +127,7 @@ type GoalPillState =
   | "pursuing"
   | "waiting"
   | "scheduled"
+  | "session_failed"
   | "blocked"
   | "held"
   | "paused"
@@ -133,6 +144,7 @@ const GOAL_LABEL: Record<GoalPillState, string> = {
   waiting: "Waiting",
   scheduled: "Waiting",
   blocked: "Blocked",
+  session_failed: "Blocked by session failure",
   held: "Held",
   paused: "Paused",
   invariant_broken: "Needs attention",
@@ -187,6 +199,9 @@ 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)
@@ -309,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"
@@ -411,6 +428,7 @@ function toneClass(tone: SessionChromeSignalTone, selected: boolean): string {
 
 export function SessionChrome({
   compact = false,
+  sessionStatus,
   queue,
   composer,
   goal,
@@ -419,6 +437,7 @@ export function SessionChrome({
   commandsCount = 0,
   agentsSignal,
   onDismissIncoming,
+  onOpenSession,
   readOnly = false,
   className,
   active: activeControlled,
@@ -458,7 +477,9 @@ export function SessionChrome({
   const canMutateQueue = !readOnly && composer !== undefined;
 
   const elapsed = useLiveElapsed(record?.createdAt, Boolean(record));
-  const goalState = record ? sessionChromeGoalPillState(record.status, record.continuation) : null;
+  const goalState = record
+    ? sessionChromeGoalPillState(record.status, record.continuation, sessionStatus)
+    : null;
 
   const initialAuthoritativeQueuedCount = countAuthoritativeQueuedTurns(
     queue.queue,
@@ -571,6 +592,7 @@ export function SessionChrome({
       const waiting =
         goalState === "waiting" ||
         goalState === "blocked" ||
+        goalState === "session_failed" ||
         goalState === "held" ||
         goalState === "paused";
       const explanation = sessionChromeGoalPillExplanation(goalState, record);
@@ -751,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}
@@ -1221,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>
   );
 }
 

package/styles/compiled.css

@@ -2307,12 +2307,6 @@
 :where(.og-root).bg-black,:where(.og-root) .bg-black {
     background-color: var(--color-black);
   }
-:where(.og-root).bg-black\/5,:where(.og-root) .bg-black\/5 {
-    background-color: color-mix(in srgb, #000 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-    }
-  }
 :where(.og-root).bg-black\/45,:where(.og-root) .bg-black\/45 {
     background-color: color-mix(in srgb, #000 45%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2430,6 +2424,12 @@
 :where(.og-root).bg-og-fg-subtle,:where(.og-root) .bg-og-fg-subtle {
     background-color: var(--og-color-fg-subtle);
   }
+:where(.og-root).bg-og-fg\/5,:where(.og-root) .bg-og-fg\/5 {
+    background-color: var(--og-color-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--og-color-fg) 5%, transparent);
+    }
+  }
 :where(.og-root).bg-og-status-cancelled,:where(.og-root) .bg-og-status-cancelled {
     background-color: var(--og-color-status-cancelled);
   }
@@ -3257,6 +3257,9 @@
 :where(.og-root).underline-offset-2,:where(.og-root) .underline-offset-2 {
     text-underline-offset: 2px;
   }
+:where(.og-root).underline-offset-4,:where(.og-root) .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
 :where(.og-root).accent-og-accent,:where(.og-root) .accent-og-accent {
     accent-color: var(--og-color-accent);
   }
@@ -4523,6 +4526,22 @@
       }
     }
   }
+:where(.og-root).focus-visible\:outline-2,:where(.og-root) .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+:where(.og-root).focus-visible\:outline-offset-2,:where(.og-root) .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+:where(.og-root).focus-visible\:outline-og-accent,:where(.og-root) .focus-visible\:outline-og-accent {
+    &:focus-visible {
+      outline-color: var(--og-color-accent);
+    }
+  }
 :where(.og-root).focus-visible\:ring-inset,:where(.og-root) .focus-visible\:ring-inset {
     &:focus-visible {
       --tw-ring-inset: inset;
@@ -5077,14 +5096,6 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-:where(.og-root).dark\:bg-white\/5,:where(.og-root) .dark\:bg-white\/5 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, #fff 5%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-  }
 :where(.og-root).dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20,:where(.og-root) .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20 {
     @media (prefers-color-scheme: dark) {
       &[data-variant="destructive"] {