@opengeni/react 1.0.1 → 2.3.0-canary.0

package/src/realtime/realtime-control.tsx

@@ -6,6 +6,7 @@ import {
   type SessionRealtimeController,
   type SessionRealtimeControllerSnapshot,
   type CreateSessionRealtimeControllerOptions,
+  type SessionRealtimeLifecycleProjection,
   type SessionRealtimeModel,
   type WorkspaceRealtimeModelCatalogItem,
 } from "@opengeni/sdk/realtime";
@@ -280,7 +281,7 @@ export function useSessionRealtime(options: {
   const eventsReadyRef = useRef(options.eventsReady);
   lifecycleRef.current = lifecycle;
   eventsReadyRef.current = options.eventsReady;
-  const lifecycleActive = lifecycle?.state === "active";
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
 
   useEffect(() => {
     let disposed = false;
@@ -401,6 +402,14 @@ export function useSessionRealtime(options: {
   };
 }
 
+function sessionRealtimeLifecycleIsActive(
+  lifecycle: SessionRealtimeLifecycleProjection | null,
+): boolean {
+  if (lifecycle?.state !== "active") return false;
+  const leaseExpiresAt = Date.parse(lifecycle.leaseExpiresAt);
+  return !Number.isFinite(leaseExpiresAt) || leaseExpiresAt > Date.now();
+}
+
 export function SessionRealtimeControl(props: {
   client?: RealtimeControllerClient | undefined;
   workspaceId?: string | undefined;
@@ -423,15 +432,18 @@ export function SessionRealtimeControl(props: {
    * `none` never attaches a model menu to the bar button.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
+  /** Explicitly expose low-level controller diagnostics; disabled by default. */
+  showDiagnostics?: boolean | undefined;
   /** Deterministic browser-test/demo seam. Production hosts should use the SDK default. */
   controllerFactory?: SessionRealtimeControllerFactory | undefined;
 }) {
   const lifecycle = useMemo(() => projectSessionRealtimeLifecycle(props.events), [props.events]);
+  const lifecycleActive = sessionRealtimeLifecycleIsActive(lifecycle);
   const selection = useRealtimeModelSelection({
     client: props.client,
     workspaceId: props.workspaceId,
     codexConnected: props.codexConnected,
-    activeModel: lifecycle?.state === "active" ? lifecycle.model : null,
+    activeModel: lifecycleActive && lifecycle?.state === "active" ? lifecycle.model : null,
   });
   const selectedModel = selection.selectedModel;
   const realtime = useSessionRealtime({
@@ -455,7 +467,7 @@ export function SessionRealtimeControl(props: {
 
   useEffect(() => {
     const pending = autostartModelRef.current;
-    if (!pending || autostartStartedRef.current || lifecycle?.state === "active") return;
+    if (!pending || autostartStartedRef.current || lifecycleActive) return;
     const available = models.some((model) => model.id === pending && model.available);
     if (!available) return;
     if (selectedRealtimeModel.id !== pending) {
@@ -474,7 +486,7 @@ export function SessionRealtimeControl(props: {
       });
   }, [
     canStart,
-    lifecycle?.state,
+    lifecycleActive,
     models,
     props.sessionId,
     props.workspaceId,
@@ -492,6 +504,7 @@ export function SessionRealtimeControl(props: {
       modelAvailable={selectedModel.available}
       menuSide="top"
       modelMenu={props.modelMenu ?? "split"}
+      showDiagnostics={props.showDiagnostics}
       audioRef={realtime.audioRef}
       selectedModel={selectedModel}
       models={selection.models}
@@ -609,7 +622,7 @@ const IDLE_REALTIME_SNAPSHOT: SessionRealtimeControllerSnapshot = {
   error: null,
 };
 
-export function NewSessionRealtimeControl(props: {
+type NewSessionRealtimeControlProps = {
   client?: RealtimeControllerClient | undefined;
   workspaceId?: string | undefined;
   codexConnected: boolean;
@@ -627,20 +640,43 @@ export function NewSessionRealtimeControl(props: {
    * `none` never attaches a model menu to the bar button.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
-}) {
-  const internalSelection = useRealtimeModelSelection({
+};
+
+type NewSessionRealtimeSelection = {
+  models: readonly RealtimeModelOption[];
+  selectedModel: RealtimeModelOption;
+  selectModel: (modelId: string) => void;
+};
+
+export function NewSessionRealtimeControl(props: NewSessionRealtimeControlProps) {
+  if (props.models && props.selectedModel && props.onSelectModel) {
+    return (
+      <NewSessionRealtimeControlView
+        {...props}
+        selection={{
+          models: props.models,
+          selectedModel: props.selectedModel,
+          selectModel: props.onSelectModel,
+        }}
+      />
+    );
+  }
+  return <NewSessionRealtimeControlWithInternalSelection {...props} />;
+}
+
+function NewSessionRealtimeControlWithInternalSelection(props: NewSessionRealtimeControlProps) {
+  const selection = useRealtimeModelSelection({
     client: props.client,
     workspaceId: props.workspaceId,
     codexConnected: props.codexConnected,
   });
-  const selection =
-    props.models && props.selectedModel && props.onSelectModel
-      ? {
-          models: props.models,
-          selectedModel: props.selectedModel,
-          selectModel: props.onSelectModel,
-        }
-      : internalSelection;
+  return <NewSessionRealtimeControlView {...props} selection={selection} />;
+}
+
+function NewSessionRealtimeControlView(
+  props: NewSessionRealtimeControlProps & { selection: NewSessionRealtimeSelection },
+) {
+  const selection = props.selection;
   const audioRef = useRef<HTMLAudioElement>(null);
   const [starting, setStarting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -709,7 +745,7 @@ export function RealtimeVoiceControl(props: {
    * `none` = start button only.
    */
   modelMenu?: "split" | "split-desktop" | "none" | undefined;
-  showDiagnostics?: boolean;
+  showDiagnostics?: boolean | undefined;
   /** Extra classes on the in-bar mute cluster (e.g. `max-sm:hidden` when mutes live in “+”). */
   muteControlsClassName?: string | undefined;
   audioRef: RefObject<HTMLAudioElement | null>;
@@ -763,7 +799,7 @@ export function RealtimeVoiceControl(props: {
       : modeOwned
         ? props.onStop
         : props.onStart;
-  const diagnosticsVisible = props.showDiagnostics ?? import.meta.env.DEV;
+  const diagnosticsVisible = props.showDiagnostics ?? false;
   const modelMenu = props.modelMenu ?? "split";
   const showAttachedModelMenu = modelMenu === "split" || modelMenu === "split-desktop";
   const desktopOnlyModelMenu = modelMenu === "split-desktop";

package/src/session-context.ts

@@ -316,6 +316,7 @@ export function useEmbeddedSession(
       "streamEvents",
       "getComposerDraft",
       "saveComposerDraft",
+      "submitComposerDraft",
       "sendMessage",
       "steerMessage",
       "getQueue",

package/src/session-ui.ts

@@ -24,7 +24,12 @@ export type {
 } from "./timeline/turn-summary";
 export { QueueSurface } from "./components/queue-surface";
 export type { QueueSurfaceProps } from "./components/queue-surface";
-export { SessionChrome, sessionChromeGoalPillState } from "./components/session-chrome";
+export {
+  SessionChrome,
+  sessionChromeGoalPillExplanation,
+  sessionChromeGoalPillLabel,
+  sessionChromeGoalPillState,
+} from "./components/session-chrome";
 export type {
   SessionChromeAgentsSignal,
   SessionChromeProps,

package/src/session.ts

@@ -38,7 +38,13 @@ export {
   shouldSubmitOnKey,
   FILE_ONLY_MESSAGE_TEXT,
 } from "./hooks/use-composer";
-export type { ComposerSendExtras, ComposerState, UseComposerOptions } from "./hooks/use-composer";
+export type {
+  ComposerControllerState,
+  ComposerPolicy,
+  ComposerSendExtras,
+  ComposerState,
+  UseComposerOptions,
+} from "./hooks/use-composer";
 export { useFileAttachments } from "./hooks/use-file-attachments";
 export type {
   FileAttachment,
@@ -96,6 +102,8 @@ export type {
   AgentMessageItem,
   AuthNeededItem,
   GoalItem,
+  HumanInputAnswerSummary,
+  HumanInputItem,
   MachineInputBatchItem,
   MachineInputMember,
   MemoryItem,

package/src/timeline/activity-rail.tsx

@@ -1,10 +1,4 @@
-import {
-  ArrowRightIcon,
-  BotIcon,
-  BrainCircuitIcon,
-  BrainIcon,
-  SquareTerminalIcon,
-} from "lucide-react";
+import { ArrowRightIcon, BotIcon, BrainCircuitIcon } from "lucide-react";
 import { lazy, Suspense, useLayoutEffect, useRef } from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 import { Markdown } from "../components/markdown";
@@ -16,9 +10,10 @@ import type { RetainedArtifactLoader, RetainedScreenshotLoader, ToolRegistry } f
 import { useSeenActivityIds } from "./seen-activity-ids";
 import { BodyNote, PayloadBlock, ActivityDisclosure, ToolCallTruncationProvider } from "./shared";
 import { toolDisplayName } from "./tool-display-name";
-import type { ActivityItem, MemoryItem, ReasoningItem, SandboxItem, WorkerItem } from "./types";
+import type { ActivityItem, MemoryItem, WorkerItem } from "./types";
 
 const LazyFleetDecisionRow = lazy(() => import("./fleet-decision-row"));
+const LazyPlatformActivityRow = lazy(() => import("./platform-activity-row"));
 
 /* ----------------------------------------------------------------------------
    Activity rail
@@ -157,7 +152,23 @@ function renderActivity(
 ) {
   switch (item.kind) {
     case "reasoning":
-      return <ReasoningRow item={item} />;
+    case "sandbox":
+    case "startup-phase":
+      return (
+        <Suspense fallback={null}>
+          <LazyPlatformActivityRow
+            item={item}
+            d={ActivityDisclosure}
+            p={PayloadBlock}
+            t={toolDisplayName}
+            b={BotIcon}
+            m={Markdown}
+            r={truncate}
+            j={rowJsx}
+            s={rowJsxs}
+          />
+        </Suspense>
+      );
     case "tool-call": {
       const Renderer = toolRegistry.resolve(item);
       return (
@@ -172,8 +183,6 @@ function renderActivity(
     }
     case "worker":
       return <WorkerRow item={item} onOpenSession={onOpenSession} />;
-    case "sandbox":
-      return <SandboxRow item={item} />;
     case "memory":
       return <MemoryRow item={item} onMemoryClick={onMemoryClick} />;
     case "fleet-decision":
@@ -193,32 +202,6 @@ function renderActivity(
   }
 }
 
-function ReasoningRow({ item }: { item: ReasoningItem }) {
-  // Reasoning recedes: a dimmer, lighter-weight title so action rows lead and
-  // thought rows sit a half-step back in the hierarchy. Body uses the same
-  // GFM markdown path as agent messages — Codex reasoning often carries
-  // headings/lists/bold that were previously shown as raw plaintext.
-  return (
-    <ActivityDisclosure
-      icon={<BrainIcon className="size-3.5" />}
-      iconTone="muted"
-      title={
-        item.streaming ? (
-          "Thinking"
-        ) : (
-          <span className="font-normal italic text-og-fg-subtle">Thought</span>
-        )
-      }
-      running={item.streaming}
-      preview={truncate(item.text, 110)}
-    >
-      <div className="text-og-base leading-6 text-og-fg-muted [&_strong]:text-og-fg-muted">
-        <Markdown streaming={item.streaming}>{item.text}</Markdown>
-      </div>
-    </ActivityDisclosure>
-  );
-}
-
 /**
  * Human labels for the memory kinds, translated at the SDK boundary so a raw
  * enum slug never renders as UI. Kept local to the library (the app has its own
@@ -317,44 +300,6 @@ function MemoryRow({
   );
 }
 
-/**
- * A human title for a sandbox operation row. Named platform operations (the lazy
- * `sandbox.provision` first-establish that now runs mid-turn) read as calm,
- * status-aware English instead of a raw op id — the box coming up should look
- * like "Starting sandbox", never an unexplained long-running command. Unnamed /
- * unknown ops fall back to the generic id-to-words {@link toolDisplayName}.
- */
-function sandboxRowTitle(item: SandboxItem): string {
-  if (item.name === "sandbox.provision") {
-    if (item.status === "failed") return "Sandbox didn’t start";
-    if (item.status === "running") return "Starting sandbox";
-    if (item.origin === "resumed") return "Sandbox reattached";
-    if (item.origin === "restored") return "Sandbox restored";
-    if (item.origin === "created") return "Sandbox created";
-    return "Sandbox ready";
-  }
-  return toolDisplayName(item.name);
-}
-
-function SandboxRow({ item }: { item: SandboxItem }) {
-  return (
-    <ActivityDisclosure
-      icon={<SquareTerminalIcon className="size-3.5" />}
-      iconTone={
-        item.status === "failed" ? "failed" : item.status === "running" ? "running" : "muted"
-      }
-      title={sandboxRowTitle(item)}
-      running={item.status === "running"}
-      failed={item.status === "failed"}
-      cancelled={item.status === "cancelled"}
-      preview={item.command ?? undefined}
-    >
-      {item.command ? <PayloadBlock label="Command" value={item.command} /> : null}
-      {item.output ? <PayloadBlock label="Output" value={item.output} /> : null}
-    </ActivityDisclosure>
-  );
-}
-
 /** Spawned/messaged worker sessions get a first-class card, not a tool row. */
 function WorkerRow({
   item,

package/src/timeline/index.ts

@@ -36,12 +36,16 @@ export type {
   FleetDecisionItem,
   FleetDecisionScoreItem,
   GoalItem,
+  HumanInputAnswerSummary,
+  HumanInputItem,
   MachineInputBatchItem,
   MachineInputMember,
   MemoryItem,
   NoticeItem,
   ReasoningItem,
   SandboxItem,
+  StartupPhase,
+  StartupPhaseItem,
   SessionStatusItem,
   TimelineGroup,
   TimelineItem,

package/src/timeline/platform-activity-row.tsx

@@ -0,0 +1,201 @@
+import type { ReasoningItem, SandboxItem, StartupPhaseItem } from "./types";
+
+type RowJsx = typeof import("react/jsx-runtime").jsx;
+type RowJsxs = typeof import("react/jsx-runtime").jsxs;
+
+export default function PlatformActivityRow({
+  item,
+  d: ActivityDisclosure,
+  p: PayloadBlock,
+  t: displayName,
+  b: BotIcon,
+  m: Markdown,
+  r: truncate,
+  j,
+  s,
+}: {
+  item: ReasoningItem | SandboxItem | StartupPhaseItem;
+  d: typeof import("./shared").ActivityDisclosure;
+  p: typeof import("./shared").PayloadBlock;
+  t: (name: string) => string;
+  b: typeof import("lucide-react").BotIcon;
+  m: typeof import("../components/markdown").Markdown;
+  r: typeof import("../lib/format").truncate;
+  j: RowJsx;
+  s: RowJsxs;
+}) {
+  if (item.kind === "reasoning") {
+    return j(ActivityDisclosure, {
+      icon: brainIcon(j, s),
+      iconTone: "muted",
+      title: item.streaming
+        ? "Thinking"
+        : j("span", {
+            className: "font-normal italic text-og-fg-subtle",
+            children: "Thought",
+          }),
+      running: item.streaming,
+      preview: truncate(item.text, 110),
+      children: j("div", {
+        className: "text-og-base leading-6 text-og-fg-muted [&_strong]:text-og-fg-muted",
+        children: j(Markdown, { streaming: item.streaming, children: item.text }),
+      }),
+    });
+  }
+  if (item.kind === "sandbox") {
+    return s(ActivityDisclosure, {
+      icon: terminalIcon(j, s),
+      iconTone:
+        item.status === "failed" ? "failed" : item.status === "running" ? "running" : "muted",
+      title: sandboxRowTitle(item, displayName),
+      running: item.status === "running",
+      failed: item.status === "failed",
+      cancelled: item.status === "cancelled",
+      preview: item.command ?? undefined,
+      children: [
+        item.command ? j(PayloadBlock, { label: "Command", value: item.command }, "command") : null,
+        item.output ? j(PayloadBlock, { label: "Output", value: item.output }, "output") : null,
+      ],
+    });
+  }
+
+  const failed = item.status === "failed";
+  const running = item.status === "running";
+  const duration = startupDuration(item.durationMs);
+  return j(ActivityDisclosure, {
+    icon: j(BotIcon, { className: "size-3.5" }),
+    iconTone: failed ? "failed" : running ? "running" : "muted",
+    title: startupPhaseTitle(item.phase, item.status, item.outcome),
+    preview:
+      item.phase === "model_preparation"
+        ? "Includes overlapping sandbox, rig, repository, and runtime setup shown below."
+        : undefined,
+    running,
+    failed,
+    cancelled: item.status === "cancelled",
+    chip: duration ? { tone: failed ? "bad" : "muted", text: duration } : undefined,
+    expandable: false,
+  });
+}
+
+function brainIcon(j: RowJsx, s: RowJsxs) {
+  return lucideIcon(j, s, "brain", [
+    j("path", { d: "M 12 18V5" }, "spine"),
+    j("path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" }, "center"),
+    j("path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" }, "top"),
+    j("path", { d: "M17.997 5.125a4 4 0 0 1 2.526 5.77" }, "upper-right"),
+    j("path", { d: "M18 18a4 4 0 0 0 2-7.464" }, "right"),
+    j("path", { d: "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" }, "base"),
+    j("path", { d: "M6 18a4 4 0 0 1-2-7.464" }, "left"),
+    j("path", { d: "M6.003 5.125a4 4 0 0 0-2.526 5.77" }, "upper-left"),
+  ]);
+}
+
+function terminalIcon(j: RowJsx, s: RowJsxs) {
+  return lucideIcon(j, s, "square-terminal", [
+    j("path", { d: "m7 11 2-2-2-2" }, "prompt"),
+    j("path", { d: "M11 13h4" }, "cursor"),
+    j("rect", { width: 18, height: 18, x: 3, y: 3, rx: 2, ry: 2 }, "frame"),
+  ]);
+}
+
+function lucideIcon(j: RowJsx, s: RowJsxs, name: string, children: ReturnType<RowJsx>[]) {
+  return s("svg", {
+    "aria-hidden": "true",
+    className: `lucide lucide-${name} size-3.5`,
+    fill: "none",
+    height: 24,
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    viewBox: "0 0 24 24",
+    width: 24,
+    children,
+  });
+}
+
+function sandboxRowTitle(item: SandboxItem, displayName: (name: string) => string): string {
+  if (item.name === "sandbox.provision") {
+    return startupPhaseTitle(
+      "sandbox",
+      item.status === "cancelled" ? "complete" : item.status,
+      item.origin ?? null,
+    );
+  }
+  return displayName(item.name);
+}
+
+function startupPhaseTitle(
+  phase: StartupPhaseItem["phase"],
+  status: StartupPhaseItem["status"],
+  outcome: StartupPhaseItem["outcome"],
+): string {
+  if (status === "complete" && phase === "sandbox" && outcome && outcome !== "skipped") {
+    return `Sandbox ${outcome === "resumed" ? "reattached" : outcome}`;
+  }
+  if (status === "complete" && phase === "rig" && outcome === "skipped") {
+    return "Rig already ready";
+  }
+  const statusIndex =
+    status === "running" ? 0 : status === "failed" ? 1 : status === "cancelled" ? 2 : 3;
+  return STARTUP_PHASE_TITLES[phase][statusIndex];
+}
+
+const STARTUP_PHASE_TITLES: Record<
+  StartupPhaseItem["phase"],
+  readonly [string, string, string, string]
+> = {
+  queue: [
+    "Waiting for a worker",
+    "Worker startup failed",
+    "Worker wait interrupted",
+    "Worker started",
+  ],
+  sandbox: [
+    "Starting sandbox",
+    "Sandbox didn’t start",
+    "Sandbox startup interrupted",
+    "Sandbox ready",
+  ],
+  rig: ["Setting up rig", "Rig setup failed", "Rig setup interrupted", "Rig ready"],
+  repository: [
+    "Preparing repository",
+    "Repository preparation failed",
+    "Repository preparation interrupted",
+    "Repository ready",
+  ],
+  files: [
+    "Preparing files",
+    "File preparation failed",
+    "File preparation interrupted",
+    "Files ready",
+  ],
+  tools: [
+    "Connecting tools",
+    "Tool connection failed",
+    "Tool connection interrupted",
+    "Tools ready",
+  ],
+  model_preparation: [
+    "Preparing runtime and model request",
+    "Runtime/model preparation failed",
+    "Runtime/model preparation interrupted",
+    "Model request dispatched",
+  ],
+  provider_first_byte: [
+    "Waiting for model",
+    "Model didn’t respond",
+    "Model wait interrupted",
+    "Model started responding",
+  ],
+};
+
+function startupDuration(durationMs: number | null): string | null {
+  if (durationMs === null || !Number.isFinite(durationMs) || durationMs < 0) return null;
+  if (durationMs < 1_000) return `${Math.round(durationMs)}ms`;
+  if (durationMs < 60_000) return `${(durationMs / 1_000).toFixed(1)}s`;
+  const minutes = Math.floor(durationMs / 60_000);
+  const seconds = Math.round((durationMs % 60_000) / 1_000);
+  return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+}