@opengeni/react 5.2.0-canary.1 → 6.0.0-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "5.2.0-canary.1",
+  "version": "6.0.0-canary.0",
   "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": {
@@ -133,8 +133,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "^0.2.0-canary.8",
-    "@opengeni/sdk": "^5.1.0-canary.2",
+    "@opengeni/connect": "^0.2.0-canary.9",
+    "@opengeni/sdk": "^6.0.0-canary.0",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/artifacts.ts

@@ -1,5 +1,5 @@
 export { inlineHtmlDocument } from "./components/artifacts/inline-html-document";
-export { useRetainedImageObjectUrl } from "./timeline/retained-image";
+export { isRetainedImageContentType, useRetainedImageObjectUrl } from "./timeline/retained-image";
 /** Public artifact surfaces. Import from `@opengeni/react/artifacts`. */
 export {
   ArtifactSurface,

package/src/components/message-timeline.tsx

@@ -2,6 +2,10 @@ import { RollingActivity } from "../timeline/rolling-activity";
 import { GenieLoadingOptionsContext, type GenieLoadingOptions } from "../timeline/genie-loading";
 import { ChildSessionLink } from "./child-session-link";
 import { useStartupDetails } from "../timeline/startup-preference";
+import { parseSandboxFileArtifactReceipt } from "@opengeni/sdk";
+import { unwrapMcpOutput } from "../timeline/parsers";
+import { isRetainedImageContentType } from "../timeline/retained-image";
+import { mcpToolLeaf } from "../timeline/tool-display-name";
 import type {
   DraftTimelineAnnotation,
   MediaGenerationResult,
@@ -2537,9 +2541,15 @@ const TimelineGroupView = memo(function TimelineGroupView({
   // Settled (or live-fold) activity clusters get a chip. Inside an expanded
   // turn that is the second layer — quiet nested chips under the outer turn
   // summary when contiguous activity naturally clusters (≥2 only).
+  const containsPresentedImage = timelineGroupContainsPresentedImage(group);
+  const hasRememberedImageFold =
+    group.kind === "activity" && containsPresentedImage && foldMemory?.has(group.id);
+  // Primary images stay visible through live narration and the turn wrap.
+  // Manual collapse still belongs to TurnSummary's existing fold memory.
   const activityShouldFold =
-    group.kind === "activity" && !!(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
-  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
+    group.kind === "activity" &&
+    !containsPresentedImage &&
+    !!(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
   // Latch live→folded so a top-level shell that was already mounted open can
   // start the settle beat without remounting bare rail → wrapper.
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
@@ -2548,7 +2558,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
     group.kind === "turn" &&
     (group.outcome === "failed" ||
       timelineGroupContainsAuthNeeded(group) ||
-      containsGeneratedImage);
+      containsPresentedImage);
   // activity-* → turn-* remount: carry resting state so settleFold does not
   // re-open a chip the reader already watched collapse.
   if (group.kind === "turn" && foldMemory && !insideTurn) {
@@ -2589,6 +2599,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
       if (
         turnSummary?.rolling &&
         !startupDetails &&
+        !hasRememberedImageFold &&
         group.items.filter((item) => item.kind !== "startup-phase").length === 1
       ) {
         return (
@@ -2620,8 +2631,12 @@ const TimelineGroupView = memo(function TimelineGroupView({
           !startupDetails &&
           visibleActivity.length === 1 &&
           visibleActivity[0]?.kind === "reasoning";
+        // Untouched images stay primary output, but a reader-owned image fold
+        // must keep its shell across a multi-cluster wrap. A bare rail would
+        // bypass the remembered choice; retaining either state also lets the
+        // reader reopen and close the same chip after settlement.
         const useNestedChip =
-          nestClusterChips && activityShouldFold && !containsGeneratedImage && !singleThought;
+          nestClusterChips && (activityShouldFold || hasRememberedImageFold) && !singleThought;
         if (!useNestedChip) {
           return (
             <ActivityRail
@@ -2663,16 +2678,24 @@ const TimelineGroupView = memo(function TimelineGroupView({
       // flips settleFold (collapse) instead of remounting bare rail → wrapper.
       return (
         <TurnSummary
+          // Apply the primary-output default when a rolling activity first
+          // produces an image; the stable foldKey still preserves user choices.
+          key={containsPresentedImage ? "primary-image" : "activity"}
           items={group.items}
           outcome={group.outcome}
           failureText={group.failureText}
           defaultOpen={
-            group.outcome === "failed" || (!turnSummary?.rolling && !activityShouldFold)
+            group.outcome === "failed" ||
+            containsPresentedImage ||
+            (!turnSummary?.rolling && !activityShouldFold)
               ? true
               : undefined
           }
           liveHeader={
-            turnSummary?.rolling && !group.outcome && !foldLiveCluster ? (
+            turnSummary?.rolling &&
+            !containsPresentedImage &&
+            !group.outcome &&
+            !foldLiveCluster ? (
               <RollingActivity
                 items={group.items}
                 toolRegistry={toolRegistry}
@@ -2862,17 +2885,24 @@ function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
   }
 }
 
-/** Generated images are primary user-visible output, not incidental activity. */
-function timelineGroupContainsGeneratedImage(group: TimelineGroup): boolean {
+/** Deliberately published images are primary output, not incidental screenshots. */
+function timelineGroupContainsPresentedImage(group: TimelineGroup): boolean {
   switch (group.kind) {
     case "item":
       return false;
     case "activity":
-      return group.items.some(
-        (item) => item.kind === "tool-call" && item.name === "generate_image",
-      );
+      return group.items.some((item) => {
+        if (item.kind !== "tool-call") return false;
+        const name = mcpToolLeaf(item.name);
+        if (name === "generate_image" || name === "image_generation_call") return true;
+        if (item.status !== "complete" || name !== "sandbox_file_publish") return false;
+        const output = unwrapMcpOutput(item.output);
+        if (output.isError) return false;
+        const receipt = parseSandboxFileArtifactReceipt(output.text);
+        return receipt !== null && isRetainedImageContentType(receipt.artifact.contentType);
+      });
     case "turn":
-      return group.groups.some(timelineGroupContainsGeneratedImage);
+      return group.groups.some(timelineGroupContainsPresentedImage);
   }
 }
 

package/src/connection-catalog.tsx

@@ -26,22 +26,11 @@ export type ConnectionCatalogProps = {
   emptyMessage?: string;
 };
 
-function ConnectionDetailsAction({
-  option,
-  name = option.name,
-}: {
-  option: ConnectionCatalogOption;
-  name?: string;
-}) {
+function ConnectionDetailsIndicator() {
   return (
-    <button
-      type="button"
-      className="og-connection-details-action"
-      aria-label={`View ${name} details`}
-      onClick={option.onOpen}
-    >
-      <span aria-hidden>{option.connected ? "›" : "+"}</span>
-    </button>
+    <span aria-hidden className="og-connection-group-chevron">
+      ›
+    </span>
   );
 }
 
@@ -54,10 +43,9 @@ export function ConnectionOptionRow({ option }: { option: ConnectionCatalogOptio
           <span>{option.description}</span>
         </span>
         <span className="og-connection-catalog-status">{option.status}</span>
+        {!option.action ? <ConnectionDetailsIndicator /> : null}
       </button>
-      <span className="og-connection-option-action">
-        {option.action ?? <ConnectionDetailsAction option={option} />}
-      </span>
+      {option.action ? <span className="og-connection-option-action">{option.action}</span> : null}
     </div>
   );
 }
@@ -91,10 +79,9 @@ export function ConnectionServiceRow({ service }: { service: ConnectionCatalogSe
         onClick={service.options[0]!.onOpen}
       >
         {identity}
+        {!service.options[0]?.action ? <ConnectionDetailsIndicator /> : null}
       </button>
-      {service.options[0]?.action ?? (
-        <ConnectionDetailsAction option={service.options[0]!} name={service.name} />
-      )}
+      {service.options[0]?.action}
     </div>
   ) : (
     <details className="og-connection-catalog-service">

package/src/timeline/retained-image.ts

@@ -7,6 +7,18 @@ type RetainedImageState =
   | { kind: "unavailable"; label: string }
   | { kind: "error"; message: string };
 
+/** Shared browser preview allowlist; other published files remain downloads. */
+export function isRetainedImageContentType(contentType: string): boolean {
+  return [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+    "image/avif",
+    "image/svg+xml",
+  ].includes(contentType);
+}
+
 export function useRetainedImageObjectUrl(
   artifact: RetainedArtifactReference,
   load: ToolRendererProps["loadRetainedArtifact"],

package/src/timeline/tool-renderers.tsx

@@ -1,5 +1,5 @@
 import { KnowledgeReceiptRow } from "./knowledge-receipt";
-import { useRetainedImageObjectUrl } from "./retained-image";
+import { isRetainedImageContentType, useRetainedImageObjectUrl } from "./retained-image";
 import {
   parseSandboxFileArtifactReceipt,
   type GitFileDiff,
@@ -783,9 +783,12 @@ function RetainedSessionImageDisclosure({
   batched,
   failed,
   cancelled,
+  filename,
+  defaultOpen,
+  children,
 }: {
   artifact: RetainedArtifactReference;
-  load: ToolRendererProps["loadRetainedScreenshot"];
+  load: ToolRendererProps["loadRetainedArtifact"];
   title: string;
   caption: string;
   noun: "image" | "screenshot";
@@ -794,15 +797,19 @@ function RetainedSessionImageDisclosure({
   batched: string | null;
   failed: boolean;
   cancelled: boolean;
+  filename?: string;
+  defaultOpen?: boolean;
+  children?: ReactNode;
 }) {
   const state = useRetainedImageObjectUrl(artifact, load);
-  const downloadFilename = retainedImageFilename(artifact);
+  const downloadFilename = filename ?? retainedImageFilename(artifact);
 
   return (
     <ActivityDisclosure
       icon={icon}
       iconTone={failed ? "failed" : state.kind === "ready" ? "accent" : "muted"}
       title={title}
+      defaultOpen={defaultOpen}
       failed={failed}
       cancelled={cancelled}
       preview={
@@ -852,6 +859,7 @@ function RetainedSessionImageDisclosure({
         </BodyNote>
       )}
       {batched ? <BodyNote>batched: {batched}</BodyNote> : null}
+      {children}
     </ActivityDisclosure>
   );
 }
@@ -945,6 +953,22 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
     return <GenericRenderer item={item} />;
   }
 
+  // The closed SDK receipt has already checked the workspace-qualified route.
+  const workspaceId = /^\/v1\/workspaces\/([0-9a-f-]+)\/artifacts\//.exec(
+    receipt.artifact.retrieval.path,
+  )?.[1];
+  const openLink = workspaceId ? (
+    <a
+      href={`/workspaces/${workspaceId}/artifacts/files/${receipt.artifact.artifactId}`}
+      aria-label={`Open ${receipt.filename} in Artifacts`}
+      className="inline-flex min-h-7 items-center rounded-og-sm px-2 text-og-sm font-medium text-og-accent-strong hover:bg-og-surface-2 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent pointer-coarse:min-h-10"
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      Open in Artifacts
+    </a>
+  ) : null;
+
   const download = async () => {
     if (!loadRetainedArtifact) {
       setDownloadState("error");
@@ -977,6 +1001,44 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
     }
   };
 
+  const downloadButton = (
+    <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>
+  );
+
+  if (isRetainedImageContentType(receipt.artifact.contentType)) {
+    return (
+      <RetainedSessionImageDisclosure
+        artifact={receipt.artifact}
+        load={loadRetainedArtifact}
+        title={`Published ${receipt.filename}`}
+        caption={receipt.filename}
+        noun="image"
+        icon={<ImageIcon className={ICON_SIZE} />}
+        lightboxLabel="Image"
+        batched={null}
+        failed={false}
+        cancelled={false}
+        filename={receipt.filename}
+        defaultOpen
+      >
+        {downloadButton}
+        {openLink}
+      </RetainedSessionImageDisclosure>
+    );
+  }
+
   return (
     <ActivityDisclosure
       icon={<DownloadIcon className={ICON_SIZE} />}
@@ -985,19 +1047,8 @@ function SandboxFilePublishRenderer({ item, loadRetainedArtifact }: ToolRenderer
       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>
+      {downloadButton}
+      {openLink}
     </ActivityDisclosure>
   );
 }

package/dist/chunk-2TKI3WEG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/timeline/retained-image.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { RetainedArtifactReference } from \"@opengeni/sdk\";\nimport type { ToolRendererProps } from \"./registry\";\ntype RetainedImageState =\n  | { kind: \"loading\" }\n  | { kind: \"ready\"; url: string }\n  | { kind: \"unavailable\"; label: string }\n  | { kind: \"error\"; message: string };\n\nexport function useRetainedImageObjectUrl(\n  artifact: RetainedArtifactReference,\n  load: ToolRendererProps[\"loadRetainedArtifact\"],\n): RetainedImageState {\n  const [state, setState] = useState<RetainedImageState>({ kind: \"loading\" });\n  // Function outputs are commonly serialized JSON. Parsing them creates a new\n  // object on every render, so depend on the immutable wire value rather than\n  // object identity; otherwise the loader can refetch after its own setState.\n  const artifactValue = retainedArtifactValue(artifact);\n  const stableArtifactRef = useRef({ value: artifactValue, artifact });\n  if (stableArtifactRef.current.value !== artifactValue) {\n    stableArtifactRef.current = { value: artifactValue, artifact };\n  }\n  const stableArtifact = stableArtifactRef.current.artifact;\n  useEffect(() => {\n    if (!load) {\n      setState({ kind: \"unavailable\", label: \"retrieval is not configured\" });\n      return;\n    }\n    const controller = new AbortController();\n    let objectUrl: string | null = null;\n    setState({ kind: \"loading\" });\n    void load(stableArtifact, controller.signal)\n      .then((source) => {\n        if (controller.signal.aborted) return;\n        if (!source) {\n          setState({ kind: \"unavailable\", label: \"bytes are unavailable\" });\n          return;\n        }\n        if (!(source instanceof Uint8Array)) {\n          if (!source.url.trim()) {\n            setState({ kind: \"unavailable\", label: \"URL is unavailable\" });\n            return;\n          }\n          setState({ kind: \"ready\", url: source.url });\n          return;\n        }\n        objectUrl = URL.createObjectURL(\n          new Blob([source as unknown as BlobPart], { type: stableArtifact.contentType }),\n        );\n        setState({ kind: \"ready\", url: objectUrl });\n      })\n      .catch((error: unknown) => {\n        if (controller.signal.aborted) return;\n        const status =\n          error && typeof error === \"object\" && \"status\" in error\n            ? Number((error as { status?: unknown }).status)\n            : null;\n        setState(\n          status === 404\n            ? { kind: \"unavailable\", label: \"deleted\" }\n            : status === 410\n              ? { kind: \"unavailable\", label: \"expired or unavailable\" }\n              : { kind: \"error\", message: \"retrieval failed\" },\n        );\n      });\n    return () => {\n      controller.abort();\n      if (objectUrl) URL.revokeObjectURL(objectUrl);\n    };\n  }, [stableArtifact, load]);\n  return state;\n}\n\nfunction retainedArtifactValue(artifact: RetainedArtifactReference): string {\n  return [\n    artifact.artifactId,\n    artifact.kind,\n    artifact.contentType,\n    artifact.originalBytes,\n    artifact.sha256,\n    artifact.retainedAt,\n    artifact.dimensions?.width ?? \"\",\n    artifact.dimensions?.height ?? \"\",\n    artifact.retention.policy,\n    artifact.retention.expiresAt ?? \"\",\n    artifact.retrieval.method,\n    artifact.retrieval.path,\n    artifact.retrieval.acceptRanges,\n    artifact.retrieval.maxRangeBytes,\n  ].join(\"\\0\");\n}\n"],"mappings":";AAAA,SAAS,WAAW,QAAQ,gBAAgB;AASrC,SAAS,0BACd,UACA,MACoB;AACpB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,EAAE,MAAM,UAAU,CAAC;AAI1E,QAAM,gBAAgB,sBAAsB,QAAQ;AACpD,QAAM,oBAAoB,OAAO,EAAE,OAAO,eAAe,SAAS,CAAC;AACnE,MAAI,kBAAkB,QAAQ,UAAU,eAAe;AACrD,sBAAkB,UAAU,EAAE,OAAO,eAAe,SAAS;AAAA,EAC/D;AACA,QAAM,iBAAiB,kBAAkB,QAAQ;AACjD,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,eAAS,EAAE,MAAM,eAAe,OAAO,8BAA8B,CAAC;AACtE;AAAA,IACF;AACA,UAAM,aAAa,IAAI,gBAAgB;AACvC,QAAI,YAA2B;AAC/B,aAAS,EAAE,MAAM,UAAU,CAAC;AAC5B,SAAK,KAAK,gBAAgB,WAAW,MAAM,EACxC,KAAK,CAAC,WAAW;AAChB,UAAI,WAAW,OAAO,QAAS;AAC/B,UAAI,CAAC,QAAQ;AACX,iBAAS,EAAE,MAAM,eAAe,OAAO,wBAAwB,CAAC;AAChE;AAAA,MACF;AACA,UAAI,EAAE,kBAAkB,aAAa;AACnC,YAAI,CAAC,OAAO,IAAI,KAAK,GAAG;AACtB,mBAAS,EAAE,MAAM,eAAe,OAAO,qBAAqB,CAAC;AAC7D;AAAA,QACF;AACA,iBAAS,EAAE,MAAM,SAAS,KAAK,OAAO,IAAI,CAAC;AAC3C;AAAA,MACF;AACA,kBAAY,IAAI;AAAA,QACd,IAAI,KAAK,CAAC,MAA6B,GAAG,EAAE,MAAM,eAAe,YAAY,CAAC;AAAA,MAChF;AACA,eAAS,EAAE,MAAM,SAAS,KAAK,UAAU,CAAC;AAAA,IAC5C,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,UAAI,WAAW,OAAO,QAAS;AAC/B,YAAM,SACJ,SAAS,OAAO,UAAU,YAAY,YAAY,QAC9C,OAAQ,MAA+B,MAAM,IAC7C;AACN;AAAA,QACE,WAAW,MACP,EAAE,MAAM,eAAe,OAAO,UAAU,IACxC,WAAW,MACT,EAAE,MAAM,eAAe,OAAO,yBAAyB,IACvD,EAAE,MAAM,SAAS,SAAS,mBAAmB;AAAA,MACrD;AAAA,IACF,CAAC;AACH,WAAO,MAAM;AACX,iBAAW,MAAM;AACjB,UAAI,UAAW,KAAI,gBAAgB,SAAS;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,gBAAgB,IAAI,CAAC;AACzB,SAAO;AACT;AAEA,SAAS,sBAAsB,UAA6C;AAC1E,SAAO;AAAA,IACL,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS,YAAY,SAAS;AAAA,IAC9B,SAAS,YAAY,UAAU;AAAA,IAC/B,SAAS,UAAU;AAAA,IACnB,SAAS,UAAU,aAAa;AAAA,IAChC,SAAS,UAAU;AAAA,IACnB,SAAS,UAAU;AAAA,IACnB,SAAS,UAAU;AAAA,IACnB,SAAS,UAAU;AAAA,EACrB,EAAE,KAAK,IAAI;AACb;","names":[]}