@opengeni/react 1.0.1 → 1.0.2-canary.37191796234001

package/src/timeline/registry.ts

@@ -13,7 +13,7 @@ import type { ToolCallItem } from "./types";
    Resolution order (most → least specific):
      1. exact match on `raw.type`        (e.g. "apply_patch_call", "computer_call")
      2. exact match on the tool `name`   (e.g. "exec_command", "web_search_call")
-     3. leaf match after MCP `__` prefix (e.g. opengeni__environment_set_variable)
+     3. allowed leaf match after MCP `__` prefix (e.g. opengeni__environment_set_variable)
      4. the registry's generic fallback
 
    A consumer extends the defaults without forking by passing overrides to
@@ -48,7 +48,13 @@ export type ToolRenderer = ComponentType<ToolRendererProps>;
 /** A registry entry: which key it matches and the component that renders it. */
 export type ToolRegistryEntry =
   | { match: "rawType"; type: string; render: ToolRenderer }
-  | { match: "name"; name: string; render: ToolRenderer };
+  | {
+      match: "name";
+      name: string;
+      render: ToolRenderer;
+      /** Disable untrusted `<server>__${name}` leaf matching for identity-sensitive renderers. */
+      matchPrefixedLeaf?: boolean | undefined;
+    };
 
 export type ToolRegistry = {
   /** Resolve the renderer for a call (never null — falls back to generic). */
@@ -92,6 +98,7 @@ export function createToolRegistry(
 
   const byRawType = new Map<string, ToolRenderer>();
   const byName = new Map<string, ToolRenderer>();
+  const byPrefixedLeaf = new Map<string, ToolRenderer>();
   for (const entry of entries) {
     if (entry.match === "rawType") {
       if (!byRawType.has(entry.type)) {
@@ -100,6 +107,11 @@ export function createToolRegistry(
     } else if (!byName.has(entry.name)) {
       byName.set(entry.name, entry.render);
     }
+    if (entry.match === "name" && entry.matchPrefixedLeaf !== false) {
+      if (!byPrefixedLeaf.has(entry.name)) {
+        byPrefixedLeaf.set(entry.name, entry.render);
+      }
+    }
   }
 
   const resolve = (item: ToolCallItem): ToolRenderer => {
@@ -116,7 +128,7 @@ export function createToolRegistry(
     }
     const leaf = mcpToolLeaf(item.name);
     if (leaf !== item.name) {
-      const byLeaf = byName.get(leaf);
+      const byLeaf = byPrefixedLeaf.get(leaf);
       if (byLeaf) {
         return byLeaf;
       }

package/src/timeline/retained-image.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { RetainedArtifactReference } from "@opengeni/sdk";
+import type { ToolRendererProps } from "./registry";
+type RetainedImageState =
+  | { kind: "loading" }
+  | { kind: "ready"; url: string }
+  | { kind: "unavailable"; label: string }
+  | { kind: "error"; message: string };
+
+export { isRetainedImageContentType } from "./presented-image";
+
+export function useRetainedImageObjectUrl(
+  artifact: RetainedArtifactReference,
+  load: ToolRendererProps["loadRetainedArtifact"],
+): RetainedImageState & { retry: () => void } {
+  const [state, setState] = useState<RetainedImageState>({ kind: "loading" });
+  const [retrievalAttempt, setRetrievalAttempt] = useState(0);
+  // Retry only the immutable retained artifact; never issue a new capture or
+  // rewrite the tool receipt/model history to repair a human preview.
+  const retry = useCallback(() => setRetrievalAttempt((attempt) => attempt + 1), []);
+  // Function outputs are commonly serialized JSON. Parsing them creates a new
+  // object on every render, so depend on the immutable wire value rather than
+  // object identity; otherwise the loader can refetch after its own setState.
+  const artifactValue = retainedArtifactValue(artifact);
+  const stableArtifactRef = useRef({ value: artifactValue, artifact });
+  if (stableArtifactRef.current.value !== artifactValue) {
+    stableArtifactRef.current = { value: artifactValue, artifact };
+  }
+  const stableArtifact = stableArtifactRef.current.artifact;
+  useEffect(() => {
+    if (!load) {
+      setState({ kind: "unavailable", label: "retrieval is not configured" });
+      return;
+    }
+    const controller = new AbortController();
+    let objectUrl: string | null = null;
+    setState({ kind: "loading" });
+    void load(stableArtifact, controller.signal)
+      .then((source) => {
+        if (controller.signal.aborted) return;
+        if (!source) {
+          setState({ kind: "unavailable", label: "bytes are unavailable" });
+          return;
+        }
+        if (!(source instanceof Uint8Array)) {
+          if (!source.url.trim()) {
+            setState({ kind: "unavailable", label: "URL is unavailable" });
+            return;
+          }
+          setState({ kind: "ready", url: source.url });
+          return;
+        }
+        objectUrl = URL.createObjectURL(
+          new Blob([source as unknown as BlobPart], { type: stableArtifact.contentType }),
+        );
+        setState({ kind: "ready", url: objectUrl });
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return;
+        const status =
+          error && typeof error === "object" && "status" in error
+            ? Number((error as { status?: unknown }).status)
+            : null;
+        setState(
+          status === 404
+            ? { kind: "unavailable", label: "deleted" }
+            : status === 410
+              ? { kind: "unavailable", label: "expired or unavailable" }
+              : { kind: "error", message: "retrieval failed" },
+        );
+      });
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [stableArtifact, load, retrievalAttempt]);
+  return { ...state, retry };
+}
+
+function retainedArtifactValue(artifact: RetainedArtifactReference): string {
+  return [
+    artifact.artifactId,
+    artifact.kind,
+    artifact.contentType,
+    artifact.originalBytes,
+    artifact.sha256,
+    artifact.retainedAt,
+    artifact.dimensions?.width ?? "",
+    artifact.dimensions?.height ?? "",
+    artifact.retention.policy,
+    artifact.retention.expiresAt ?? "",
+    artifact.retrieval.method,
+    artifact.retrieval.path,
+    artifact.retrieval.acceptRanges,
+    artifact.retrieval.maxRangeBytes,
+  ].join("\0");
+}

package/src/timeline/rolling-activity.tsx

@@ -0,0 +1,92 @@
+import { renderActivity } from "./activity-rail";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { WrenchIcon } from "lucide-react";
+import { Suspense, useEffect, useState } from "react";
+import { CompactActivityContext } from "./shared";
+import { defaultToolRegistry } from "./tool-renderers";
+import type { ToolRegistry } from "./registry";
+import { toolDisplayName } from "./tool-display-name";
+import type { ActivityItem } from "./types";
+
+/** One stable viewport; updates replace its content without moving the conversation. */
+export function RollingActivity({
+  items,
+  toolRegistry = defaultToolRegistry,
+  previousItem,
+  showCount = true,
+}: {
+  items: ActivityItem[];
+  /** The standalone item visible immediately before this reel mounted. */
+  previousItem?: ActivityItem | undefined;
+  toolRegistry?: ToolRegistry;
+  /** Show "+N earlier"; off when an enclosing status line already counts steps. */
+  showCount?: boolean;
+}) {
+  const reduced = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  // Progress notes have their own line in the status row; the reel shows steps.
+  const work = items.filter(
+    (item) => item.kind !== "startup-phase" && item.kind !== "agent-message",
+  );
+  const active = work.filter((item) =>
+    item.kind === "reasoning" ? item.streaming : "status" in item && item.status === "running",
+  );
+  // Advance with the event order; finishing a parallel tool must not replay an older one.
+  const item =
+    !mounted && previousItem && previousItem.kind !== "agent-message" ? previousItem : work.at(-1);
+  if (!item) return null;
+  const earlierCount = Math.max(
+    0,
+    work.findIndex((entry) => entry.id === item.id),
+  );
+  const fallback = (
+    <span className="og-rolling-label">
+      <WrenchIcon className="size-3.5" />
+      <span>
+        {item.kind === "tool-call" ? toolDisplayName(item.name, item.display) : "Working"}
+      </span>
+    </span>
+  );
+  return (
+    <span
+      className="og-rolling-status"
+      data-running={active.some((entry) => entry.id === item.id) ? "true" : undefined}
+    >
+      <span className="sr-only">
+        {item.kind === "tool-call"
+          ? toolDisplayName(item.name, item.display)
+          : item.kind === "reasoning"
+            ? "Thinking"
+            : "Working"}
+      </span>
+      <span className="og-rolling-window" aria-hidden="true">
+        <AnimatePresence initial={false} mode="sync">
+          <motion.span
+            key={item.id}
+            className="og-rolling-face"
+            initial={{
+              opacity: 0,
+              y: reduced ? 0 : 24,
+            }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{
+              opacity: 0,
+              y: reduced ? 0 : -24,
+            }}
+            transition={{ duration: reduced ? 0 : 0.4, ease: [0.22, 1, 0.36, 1] }}
+          >
+            <CompactActivityContext.Provider value={true}>
+              <Suspense fallback={fallback}>
+                {renderActivity(item, toolRegistry, undefined, undefined, undefined, undefined)}
+              </Suspense>
+            </CompactActivityContext.Provider>
+          </motion.span>
+        </AnimatePresence>
+      </span>
+      {showCount && earlierCount > 0 ? (
+        <span className="og-rolling-count">{`+${earlierCount} earlier`}</span>
+      ) : null}
+    </span>
+  );
+}

package/src/timeline/screenshot-lightbox.tsx

@@ -1,6 +1,14 @@
-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 {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
 import { Dialog } from "radix-ui";
 import { cn } from "../lib/cn";
 import { usePortalTokenStyle } from "../lib/use-portal-token-style";
@@ -19,7 +27,20 @@ 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,
+    controlLabels?: LightboxControlLabels,
+    releaseSource?: () => void,
+  ) => void;
+};
+
+export type LightboxControlLabels = {
+  download?: string | undefined;
+  close?: string | undefined;
 };
 
 const LightboxContext = createContext<LightboxController | null>(null);
@@ -40,6 +61,23 @@ export function useLightboxOptional(): LightboxController | null {
 
 const NOOP: LightboxController = { open: () => {} };
 
+/** @internal Owns one optional retained lightbox source and releases it exactly once. */
+export function createLightboxSourceOwner() {
+  let releaseCurrent: (() => void) | null = null;
+  return {
+    replace(release?: (() => void) | undefined) {
+      const previous = releaseCurrent;
+      releaseCurrent = release ?? null;
+      previous?.();
+    },
+    release() {
+      const release = releaseCurrent;
+      releaseCurrent = null;
+      release?.();
+    },
+  };
+}
+
 /**
  * The app-level screenshot lightbox. Render once near the timeline; renderers
  * call `useLightbox().open(src)`.
@@ -63,22 +101,47 @@ function LightboxRoot({ children }: { children: ReactNode }) {
     src: string;
     caption?: string;
     label: string;
+    downloadFilename?: string;
+    controlLabels?: LightboxControlLabels;
   } | null>(null);
   const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
+  const sourceOwner = useMemo(() => createLightboxSourceOwner(), []);
   const portalStyle = usePortalTokenStyle(tokenSource);
 
+  const releaseCurrentSource = useCallback(() => {
+    sourceOwner.release();
+  }, [sourceOwner]);
+
+  useEffect(() => releaseCurrentSource, [releaseCurrentSource]);
+
   const open = useCallback(
-    (src: string, caption?: string, source?: HTMLElement | null, label = "Screenshot") => {
+    (
+      src: string,
+      caption?: string,
+      source?: HTMLElement | null,
+      label = "Screenshot",
+      downloadFilename?: string,
+      controlLabels?: LightboxControlLabels,
+      releaseSource?: () => void,
+    ) => {
+      sourceOwner.replace(releaseSource);
       setTokenSource(source ?? null);
-      setState(caption ? { src, caption, label } : { src, label });
+      setState({
+        src,
+        label,
+        ...(caption ? { caption } : {}),
+        ...(downloadFilename ? { downloadFilename } : {}),
+        ...(controlLabels ? { controlLabels } : {}),
+      });
     },
-    [],
+    [sourceOwner],
   );
 
   const close = useCallback(() => {
+    releaseCurrentSource();
     setState(null);
     setTokenSource(null);
-  }, []);
+  }, [releaseCurrentSource]);
 
   const controller = useMemo<LightboxController>(() => ({ open }), [open]);
 
@@ -141,16 +204,11 @@ 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>
+                      <ScreenshotLightboxControls
+                        src={state.src}
+                        downloadFilename={state.downloadFilename}
+                        controlLabels={state.controlLabels}
+                      />
                     </div>
                     {state.caption ? (
                       <figcaption className="max-w-2xl text-center font-og-mono text-og-xs text-white/55">
@@ -171,3 +229,43 @@ function LightboxRoot({ children }: { children: ReactNode }) {
     </LightboxContext.Provider>
   );
 }
+
+/** @internal Exact controls rendered by an open screenshot lightbox. */
+export function ScreenshotLightboxControls({
+  src,
+  downloadFilename,
+  controlLabels,
+}: {
+  src: string;
+  downloadFilename?: string | undefined;
+  controlLabels?: LightboxControlLabels | undefined;
+}) {
+  return (
+    <div className="absolute -right-3 -top-3 flex items-center gap-2">
+      {downloadFilename ? (
+        <a
+          href={src}
+          download={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={controlLabels?.download ?? `Download ${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={controlLabels?.close ?? "Close"}
+      >
+        <XIcon className="size-4" />
+      </Dialog.Close>
+    </div>
+  );
+}

package/src/timeline/shared.tsx

@@ -1,5 +1,6 @@
 import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
-import { createContext, useContext, useState, type ReactNode } from "react";
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import { useTimelineSearchReveal } from "../components/timeline-search";
 import { cn } from "../lib/cn";
 import { stringifyPayload } from "../lib/format";
 import { useForcedDefaultOpen } from "./disclosure-context";
@@ -55,6 +56,8 @@ export function ToolCallTruncationProvider({
 }
 
 export type ActivityDisclosureProps = {
+  /** Override the rolling preview; null keeps rapidly streaming details out of the header. */
+  compactPreview?: ReactNode;
   icon: ReactNode;
   /** Icon tint. Defaults to the muted foreground; renderers pass accent/failed. */
   iconTone?: "accent" | "failed" | "running" | "muted" | undefined;
@@ -116,6 +119,8 @@ const ICON_TONE: Record<NonNullable<ActivityDisclosureProps["iconTone"]>, string
  * inline media, and at most one right-gutter settle chip. Compact by default;
  * the body mounts only when expanded.
  */
+export const CompactActivityContext = createContext(false);
+
 export function ActivityDisclosure({
   icon,
   iconTone: iconToneProp = "muted",
@@ -123,6 +128,7 @@ export function ActivityDisclosure({
   titleMono,
   running,
   preview,
+  compactPreview,
   media,
   chip: chipProp,
   failed,
@@ -149,7 +155,26 @@ export function ActivityDisclosure({
   // absent in normal app usage, where the row starts collapsed.
   const forcedDefaultOpen = useForcedDefaultOpen();
   const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
+  const searchReveal = useTimelineSearchReveal();
+  useEffect(() => {
+    if (searchReveal) setOpen(true);
+  }, [searchReveal]);
   const truncation = useContext(ToolCallTruncationContext);
+  const compact = useContext(CompactActivityContext);
+  if (compact)
+    return (
+      <span className="og-rolling-label">
+        <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
+        <span className="og-command-reel">
+          <span className="og-reel-title">{title}</span>
+          {(compactPreview === undefined ? preview : compactPreview) ? (
+            <span className="og-reel-preview text-og-fg-subtle">
+              {compactPreview === undefined ? preview : compactPreview}
+            </span>
+          ) : null}
+        </span>
+      </span>
+    );
   const hasBody = expandable && (children != null || truncation != null);
 
   // The preview is detail-on-demand: it is suppressed once the row is open so a
@@ -189,20 +214,21 @@ export function ActivityDisclosure({
         <span className="size-3.5 shrink-0" />
       )}
       <span className={cn("shrink-0", ICON_TONE[iconTone])}>{icon}</span>
-      <span
-        className={cn(
-          "min-w-0 shrink truncate text-og-base font-medium",
-          titleMono && "font-og-mono text-og-sm font-normal",
-          running && "og-shimmer-text",
+      <span className={cn("og-command-reel", running && "og-command-reel-running")}>
+        <span
+          className={cn(
+            "min-w-0 shrink truncate text-og-base font-medium",
+            titleMono && "font-og-mono text-og-sm font-normal",
+          )}
+        >
+          {title}
+        </span>
+        {previewVisible && !media ? (
+          <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
+        ) : (
+          <span className="flex-1" />
         )}
-      >
-        {title}
       </span>
-      {previewVisible && !media ? (
-        <span className="min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle">{preview}</span>
-      ) : (
-        <span className="flex-1" />
-      )}
       {/* The right gutter carries at most ONE signal: the media thumbnail, else a
           terse settle chip (hidden once expanded — the body owns the detail). */}
       {media && !open ? (
@@ -509,12 +535,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 +570,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 +601,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 +632,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/startup-preference.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from "react";
+
+const KEY = "opengeni:startup-details:v1";
+const EVENT = "opengeni:startup-details-changed";
+let fallback = false;
+function snapshot() {
+  try {
+    return window.localStorage.getItem(KEY) === "true";
+  } catch {
+    return fallback;
+  }
+}
+function subscribe(listener: () => void) {
+  window.addEventListener(EVENT, listener);
+  window.addEventListener("storage", listener);
+  return () => {
+    window.removeEventListener(EVENT, listener);
+    window.removeEventListener("storage", listener);
+  };
+}
+export function setStartupDetails(value: boolean) {
+  fallback = value;
+  try {
+    window.localStorage.setItem(KEY, String(value));
+  } catch {
+    /* Private storage is optional. */
+  }
+  window.dispatchEvent(new Event(EVENT));
+}
+/** Presentation preference only. Startup evidence is always retained. */
+export function useStartupDetails() {
+  return useSyncExternalStore(subscribe, snapshot, () => false);
+}