@opengeni/react 1.0.1 → 2.2.0-canary.0

package/src/timeline/screenshot-lightbox.tsx

@@ -1,4 +1,4 @@
-import { XIcon } from "lucide-react";
+import { DownloadIcon, XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
 import { Dialog } from "radix-ui";
@@ -19,7 +19,13 @@ import { usePortalTokenStyle } from "../lib/use-portal-token-style";
    -------------------------------------------------------------------------- */
 
 type LightboxController = {
-  open: (src: string, caption?: string, source?: HTMLElement | null, label?: string) => void;
+  open: (
+    src: string,
+    caption?: string,
+    source?: HTMLElement | null,
+    label?: string,
+    downloadFilename?: string,
+  ) => void;
 };
 
 const LightboxContext = createContext<LightboxController | null>(null);
@@ -63,14 +69,26 @@ function LightboxRoot({ children }: { children: ReactNode }) {
     src: string;
     caption?: string;
     label: string;
+    downloadFilename?: string;
   } | null>(null);
   const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
   const portalStyle = usePortalTokenStyle(tokenSource);
 
   const open = useCallback(
-    (src: string, caption?: string, source?: HTMLElement | null, label = "Screenshot") => {
+    (
+      src: string,
+      caption?: string,
+      source?: HTMLElement | null,
+      label = "Screenshot",
+      downloadFilename?: string,
+    ) => {
       setTokenSource(source ?? null);
-      setState(caption ? { src, caption, label } : { src, label });
+      setState({
+        src,
+        label,
+        ...(caption ? { caption } : {}),
+        ...(downloadFilename ? { downloadFilename } : {}),
+      });
     },
     [],
   );
@@ -141,16 +159,32 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                         alt={state.caption ?? state.label}
                         className="min-h-0 max-h-[82vh] w-auto max-w-full rounded-og-md border border-white/10 object-contain shadow-og-lg"
                       />
-                      <Dialog.Close
-                        className={cn(
-                          "absolute -right-3 -top-3 inline-flex size-9 items-center justify-center rounded-full",
-                          "border border-white/15 bg-black/60 text-white/70 backdrop-blur",
-                          "transition-colors hover:border-white/30 hover:text-white",
-                        )}
-                        aria-label="Close"
-                      >
-                        <XIcon className="size-4" />
-                      </Dialog.Close>
+                      <div className="absolute -right-3 -top-3 flex items-center gap-2">
+                        {state.downloadFilename ? (
+                          <a
+                            href={state.src}
+                            download={state.downloadFilename}
+                            className={cn(
+                              "inline-flex size-9 items-center justify-center rounded-full",
+                              "border border-white/15 bg-black/60 text-white/70 backdrop-blur",
+                              "transition-colors hover:border-white/30 hover:text-white",
+                            )}
+                            aria-label={`Download ${state.downloadFilename}`}
+                          >
+                            <DownloadIcon className="size-4" />
+                          </a>
+                        ) : null}
+                        <Dialog.Close
+                          className={cn(
+                            "inline-flex size-9 items-center justify-center rounded-full",
+                            "border border-white/15 bg-black/60 text-white/70 backdrop-blur",
+                            "transition-colors hover:border-white/30 hover:text-white",
+                          )}
+                          aria-label="Close"
+                        >
+                          <XIcon className="size-4" />
+                        </Dialog.Close>
+                      </div>
                     </div>
                     {state.caption ? (
                       <figcaption className="max-w-2xl text-center font-og-mono text-og-xs text-white/55">

package/src/timeline/shared.tsx

@@ -509,12 +509,14 @@ export function Thumbnail({
   alt = "screenshot",
   expandLabel = "Expand screenshot",
   lightboxLabel = "Screenshot",
+  downloadFilename,
 }: {
   src: string;
   caption?: string | undefined;
   alt?: string;
   expandLabel?: string | undefined;
   lightboxLabel?: string | undefined;
+  downloadFilename?: string | undefined;
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
@@ -542,7 +544,7 @@ export function Thumbnail({
       type="button"
       onClick={(event) => {
         event.stopPropagation();
-        lightbox.open(src, caption, event.currentTarget, lightboxLabel);
+        lightbox.open(src, caption, event.currentTarget, lightboxLabel, downloadFilename);
       }}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -573,12 +575,14 @@ export function ScreenshotFigure({
   alt = "screenshot",
   expandLabel = "Expand screenshot",
   lightboxLabel = "Screenshot",
+  downloadFilename,
 }: {
   src: string;
   caption?: string | undefined;
   alt?: string;
   expandLabel?: string | undefined;
   lightboxLabel?: string | undefined;
+  downloadFilename?: string | undefined;
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
@@ -602,7 +606,9 @@ export function ScreenshotFigure({
       ) : lightbox ? (
         <button
           type="button"
-          onClick={(event) => lightbox.open(src, caption, event.currentTarget, lightboxLabel)}
+          onClick={(event) =>
+            lightbox.open(src, caption, event.currentTarget, lightboxLabel, downloadFilename)
+          }
           className={surface}
           aria-label={expandLabel}
         >

package/src/timeline/tool-renderers.tsx

@@ -1,10 +1,15 @@
-import type { GitFileDiff, RetainedArtifactReference } from "@opengeni/sdk";
+import {
+  parseSandboxFileArtifactReceipt,
+  type GitFileDiff,
+  type RetainedArtifactReference,
+} from "@opengeni/sdk";
 import {
   BoxIcon,
   BrainCircuitIcon,
   CalendarClockIcon,
   CameraIcon,
   CameraOffIcon,
+  DownloadIcon,
   FileDiffIcon,
   FileSearchIcon,
   FolderGitIcon,
@@ -30,7 +35,7 @@ import {
   WrenchIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
-import { stringifyPayload, tryParseJson } from "../lib/format";
+import { formatBytes, stringifyPayload, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
 import {
   applyPatchOpsFromToolItem,
@@ -874,6 +879,7 @@ function RetainedSessionImageDisclosure({
   cancelled: boolean;
 }) {
   const state = useRetainedImageObjectUrl(artifact, load);
+  const downloadFilename = retainedImageFilename(artifact);
 
   return (
     <ActivityDisclosure
@@ -899,6 +905,7 @@ function RetainedSessionImageDisclosure({
             alt={caption}
             expandLabel={`Expand ${noun}`}
             lightboxLabel={lightboxLabel}
+            downloadFilename={downloadFilename}
           />
         ) : state.kind === "loading" ? (
           <MediaSkeleton />
@@ -914,6 +921,7 @@ function RetainedSessionImageDisclosure({
           alt={caption}
           expandLabel={`Expand ${noun}`}
           lightboxLabel={lightboxLabel}
+          downloadFilename={downloadFilename}
         />
       ) : state.kind === "loading" ? (
         <BodyNote>Loading the retained {noun}…</BodyNote>
@@ -1001,6 +1009,82 @@ function GeneratedVideoRenderer({ item }: ToolRendererProps) {
     </ActivityDisclosure>
   );
 }
+function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRendererProps) {
+  const { text: output, isError } = unwrapMcpOutput(item.output);
+  const receipt = parseSandboxFileArtifactReceipt(output);
+  const [downloadState, setDownloadState] = useState<"idle" | "loading" | "error">("idle");
+  if (item.status === "running") {
+    return (
+      <ActivityDisclosure
+        icon={<DownloadIcon className={ICON_SIZE} />}
+        iconTone="running"
+        title="Publishing file"
+        running
+        preview={<RunningPreview>retaining workspace bytes…</RunningPreview>}
+      />
+    );
+  }
+  if (!receipt || isError || item.status === "failed") {
+    return <GenericRenderer item={item} />;
+  }
+
+  const download = async () => {
+    if (!loadRetainedArtifact) {
+      setDownloadState("error");
+      return;
+    }
+    setDownloadState("loading");
+    let objectUrl: string | null = null;
+    try {
+      const source = await loadRetainedArtifact(receipt.artifact, new AbortController().signal);
+      if (!source) throw new Error("artifact unavailable");
+      const url =
+        source instanceof Uint8Array
+          ? (objectUrl = URL.createObjectURL(
+              new Blob([source as unknown as BlobPart], {
+                type: receipt.artifact.contentType,
+              }),
+            ))
+          : source.url;
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = receipt.filename;
+      anchor.rel = "noopener";
+      anchor.click();
+      setDownloadState("idle");
+    } catch {
+      setDownloadState("error");
+    } finally {
+      const urlToRevoke = objectUrl;
+      if (urlToRevoke) setTimeout(() => URL.revokeObjectURL(urlToRevoke), 0);
+    }
+  };
+
+  return (
+    <ActivityDisclosure
+      icon={<DownloadIcon className={ICON_SIZE} />}
+      iconTone="accent"
+      title={`Published ${receipt.filename}`}
+      defaultOpen
+      preview={formatBytes(receipt.artifact.originalBytes)}
+    >
+      <button
+        type="button"
+        onClick={() => void download()}
+        disabled={downloadState === "loading"}
+        className="inline-flex items-center gap-1.5 rounded-og-sm border border-og-border px-2.5 py-1.5 text-og-sm font-medium text-og-fg transition-colors hover:border-og-border-strong hover:bg-og-surface-2 disabled:cursor-wait disabled:opacity-60"
+      >
+        <DownloadIcon className="size-3.5" />
+        {downloadState === "loading"
+          ? "Preparing…"
+          : downloadState === "error"
+            ? "Retry download"
+            : "Download"}
+      </button>
+    </ActivityDisclosure>
+  );
+}
+
 function GeneratedImageDisclosure({
   receipt,
   load,
@@ -1073,6 +1157,16 @@ function GeneratedImageDisclosure({
   );
 }
 
+function retainedImageFilename(artifact: RetainedArtifactReference): string {
+  const extension =
+    artifact.contentType === "image/jpeg"
+      ? "jpg"
+      : artifact.contentType === "image/webp"
+        ? "webp"
+        : "png";
+  return `${artifact.kind}-${artifact.artifactId}.${extension}`;
+}
+
 /* ---- web_search ------------------------------------------------------------ */
 
 type WebSearchResult = { title: string; domain: string; snippet: string };
@@ -2103,7 +2197,8 @@ function goalToolPreview(name: string, args: unknown): string | null {
     leaf !== "goal_set" &&
     leaf !== "goal_update" &&
     leaf !== "goal_complete" &&
-    leaf !== "goal_pause"
+    leaf !== "goal_pause" &&
+    leaf !== "goal_wait"
   ) {
     return null;
   }
@@ -2118,9 +2213,11 @@ function goalToolPreview(name: string, args: unknown): string | null {
         ? record.evidence
         : typeof record.rationale === "string"
           ? record.rationale
-          : typeof record.progressNote === "string"
-            ? record.progressNote
-            : null;
+          : typeof record.reason === "string"
+            ? record.reason
+            : typeof record.progressNote === "string"
+              ? record.progressNote
+              : null;
   return text ? truncatePreview(text, 90) : null;
 }
 
@@ -2210,6 +2307,7 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "name", name: "generate_video", render: GeneratedVideoRenderer },
   { match: "name", name: "tool_search", render: ToolSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
+  { match: "name", name: "sandbox_file_publish", render: SandboxFilePublishRenderer },
   { match: "name", name: "environment_set_variable", render: SecretSetRenderer },
   { match: "name", name: "variable_set_set_variable", render: SecretSetRenderer },
   { match: "name", name: "search_documents", render: DocsSearchRenderer },

package/src/timeline/turn-summary.tsx

@@ -547,7 +547,12 @@ function createTurnSummaryContext(
     if (item.kind === "reasoning") {
       return !item.streaming;
     }
-    if (item.kind === "tool-call" || item.kind === "worker" || item.kind === "sandbox") {
+    if (
+      item.kind === "tool-call" ||
+      item.kind === "worker" ||
+      item.kind === "sandbox" ||
+      item.kind === "startup-phase"
+    ) {
       return item.status !== "running";
     }
     return true;

package/src/timeline/types.ts

@@ -1,4 +1,6 @@
 import type {
+  HumanInputQuestion,
+  HumanInputResponse,
   MediaGenerationResult,
   ResourceRef,
   SessionStatus,
@@ -27,6 +29,13 @@ export type TimelineAnnotationSourceDescriptor = Omit<
 export type UserMessageItem = {
   kind: "user-message";
   id: string;
+  /**
+   * Renderer-only identity shared by a locally acknowledged message and the
+   * durable event that replaces it. The canonical event id remains `id`; this
+   * key only prevents the optimistic-to-durable handoff from remounting and
+   * replaying the row entrance animation.
+   */
+  reconciliationKey?: string | undefined;
   text: string;
   annotations?: TimelineAnnotation[] | undefined;
   annotationSource?: TimelineAnnotationSourceDescriptor | undefined;
@@ -51,6 +60,29 @@ export type UserMessageItem = {
     | undefined;
 };
 
+export type HumanInputAnswerSummary = {
+  questionId: string;
+  label: string;
+  prompt: string;
+  values: string[];
+};
+
+/**
+ * One resolved structured question in the conversation. The live pending form
+ * is rendered at the timeline tip by the host; after settlement this item keeps
+ * both the agent's question and the human's answer visible as chat history.
+ */
+export type HumanInputItem = {
+  kind: "human-input";
+  id: string;
+  turnId: string | null;
+  requestId: string;
+  questions: HumanInputQuestion[];
+  response: HumanInputResponse;
+  answers: HumanInputAnswerSummary[];
+  occurredAt: string;
+};
+
 export type AgentMessageItem = {
   kind: "agent-message";
   id: string;
@@ -159,6 +191,31 @@ export type SandboxItem = {
   occurredAt: string;
 };
 
+export type StartupPhase =
+  | "queue"
+  | "sandbox"
+  | "rig"
+  | "repository"
+  | "files"
+  | "tools"
+  | "model_preparation"
+  | "provider_first_byte";
+
+/** A compact user-visible critical-path span reconstructed from durable events. */
+export type StartupPhaseItem = {
+  kind: "startup-phase";
+  id: string;
+  turnId: string | null;
+  phase: StartupPhase;
+  status: "running" | "complete" | "failed" | "cancelled";
+  startedAt: string;
+  completedAt: string | null;
+  durationMs: number | null;
+  /** Sandbox origin and rig marker outcomes refine the settled label only. */
+  outcome: "created" | "restored" | "resumed" | "skipped" | null;
+  occurredAt: string;
+};
+
 /**
  * A first-party workspace-memory write the agent made mid-turn — a `memory.saved`
  * (it committed a new preference / fact / procedure / decision / history) or a
@@ -265,7 +322,15 @@ export type SessionStatusItem = {
 export type GoalItem = {
   kind: "goal";
   id: string;
-  action: "set" | "updated" | "completed" | "paused" | "resumed" | "cleared" | "continuation";
+  action:
+    | "set"
+    | "updated"
+    | "completed"
+    | "paused"
+    | "resumed"
+    | "cleared"
+    | "held"
+    | "continuation";
   text: string | null;
   occurredAt: string;
 };
@@ -307,7 +372,12 @@ export type MachineInputMember = {
     | "agent_message"
     | "agent_steer_instruction"
     | "child_terminal_result"
-    | "media_generation_result";
+    | "media_generation_result"
+    | "child_requires_action"
+    | "child_requires_action_resolved"
+    | "child_paused"
+    | "child_waiting_capacity"
+    | "child_progress";
   classification: "success" | "failure" | "action_required" | "info";
   sourceId: string;
   summary: string;
@@ -375,12 +445,14 @@ export type TurnEndItem = {
 
 export type TimelineItem =
   | UserMessageItem
+  | HumanInputItem
   | AgentMessageItem
   | ReasoningItem
   | ToolCallItem
   | WorkerItem
   | WorkerCompletionItem
   | SandboxItem
+  | StartupPhaseItem
   | SessionStatusItem
   | GoalItem
   | NoticeItem
@@ -397,6 +469,7 @@ export type ActivityItem =
   | ToolCallItem
   | WorkerItem
   | SandboxItem
+  | StartupPhaseItem
   | MemoryItem
   | FleetDecisionItem;
 

package/src/types/machines.ts

@@ -23,6 +23,11 @@ import type {
   MachinesResponse,
   MachineState,
   MachineView,
+  MachineRuntime,
+  MachineRuntimeCapabilities,
+  MachineOperationPolicy,
+  MachineUpdateState,
+  MachineUpdateStatus,
   MetricSample,
 } from "@opengeni/sdk";
 
@@ -32,6 +37,11 @@ export type {
   MachinesResponse,
   MachineState,
   MachineView,
+  MachineRuntime,
+  MachineRuntimeCapabilities,
+  MachineOperationPolicy,
+  MachineUpdateState,
+  MachineUpdateStatus,
   MetricSample,
 };