@opengeni/react 5.0.5-canary.3 → 5.2.0-canary.0

package/src/timeline/rolling-activity.tsx

@@ -0,0 +1,83 @@
+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,
+}: {
+  items: ActivityItem[];
+  /** The standalone item visible immediately before this reel mounted. */
+  previousItem?: ActivityItem | undefined;
+  toolRegistry?: ToolRegistry;
+}) {
+  const reduced = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const work = items.filter((item) => item.kind !== "startup-phase");
+  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 : 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) : "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.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>
+      {earlierCount > 0 ? (
+        <span className="og-rolling-count">{`+${earlierCount} earlier`}</span>
+      ) : null}
+    </span>
+  );
+}

package/src/timeline/shared.tsx

@@ -55,6 +55,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 +118,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 +127,7 @@ export function ActivityDisclosure({
   titleMono,
   running,
   preview,
+  compactPreview,
   media,
   chip: chipProp,
   failed,
@@ -150,6 +155,21 @@ export function ActivityDisclosure({
   const forcedDefaultOpen = useForcedDefaultOpen();
   const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
   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 +209,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 ? (

package/src/timeline/tool-renderers.tsx

@@ -1,3 +1,4 @@
+import { useRetainedImageObjectUrl } from "./retained-image";
 import {
   parseSandboxFileArtifactReceipt,
   type GitFileDiff,
@@ -34,7 +35,7 @@ import {
   VideoIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useContext, useState, type ReactNode } from "react";
 import { formatBytes, stringifyPayload, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
 import {
@@ -71,6 +72,7 @@ import {
   TermBlock,
   Thumbnail,
   ActivityDisclosure,
+  CompactActivityContext,
   type DisclosureChip,
 } from "./shared";
 import { RawPatch, ToolDiff } from "./tool-diff";
@@ -96,9 +98,12 @@ const ICON_SIZE = "size-3.5";
  * left-to-right.
  */
 function RunningPreview({ children }: { children: ReactNode }) {
+  const compact = useContext(CompactActivityContext);
   return (
     <span className="inline-flex items-center gap-1.5">
-      <span className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" />
+      {!compact && (
+        <span className="size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" />
+      )}
       <span className="min-w-0 truncate">{children}</span>
     </span>
   );
@@ -766,95 +771,6 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
   );
 }
 
-type RetainedImageState =
-  | { kind: "loading" }
-  | { kind: "ready"; url: string }
-  | { kind: "unavailable"; label: string }
-  | { kind: "error"; message: string };
-
-function useRetainedImageObjectUrl(
-  artifact: RetainedArtifactReference,
-  load: ToolRendererProps["loadRetainedArtifact"],
-): RetainedImageState {
-  const [state, setState] = useState<RetainedImageState>({ kind: "loading" });
-  // 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]);
-  return state;
-}
-
-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");
-}
-
 function RetainedSessionImageDisclosure({
   artifact,
   load,

package/src/timeline/turn-summary.tsx

@@ -115,6 +115,8 @@ type ReplaceTurnSummaryFacets = Readonly<{
 export type TurnSummaryFacetConfiguration = ModifyTurnSummaryFacets | ReplaceTurnSummaryFacets;
 
 export type TurnSummaryOptions = Readonly<{
+  /** Experimental compact live activity reel. */
+  rolling?: boolean;
   facets?: TurnSummaryFacetConfiguration;
 }>;
 
@@ -133,6 +135,7 @@ export type TurnSummaryProps = {
   durationMs?: number | undefined;
   /** Start expanded. */
   defaultOpen?: boolean | undefined;
+  liveHeader?: ReactNode;
   /**
    * A nested fold — a cluster or sub-turn INSIDE an already-expanded turn. It
    * drops the bordered/filled chip and renders as a plain disclosure node on the
@@ -187,6 +190,7 @@ export function TurnSummary({
   failureText,
   durationMs,
   defaultOpen,
+  liveHeader,
   bare,
   facets: facetConfiguration,
   settleFold,
@@ -443,7 +447,7 @@ export function TurnSummary({
             />
             {/* Completion is the quiet default and needs no repeated glyph. Failed,
             cancelled, and still-running folds retain a visible state marker. */}
-            {outcome === "complete" ? null : (
+            {outcome === "complete" || (liveHeader && !outcome) ? null : (
               <span
                 className={cn(
                   "inline-flex shrink-0 items-center justify-center",
@@ -463,21 +467,23 @@ export function TurnSummary({
             <span
               className={cn("min-w-0 flex-1 truncate", bare ? "text-og-sm" : "text-og-fg-muted")}
             >
-              {facets.map(({ facet, result }, index) => (
-                <FacetRenderBoundary key={facet.id}>
-                  <>
-                    {index > 0 ? " · " : null}
-                    <span aria-label={result.ariaLabel} title={result.title}>
-                      {result.icon ? (
-                        <span aria-hidden className="mr-1 inline-flex align-[-0.125em]">
-                          {result.icon}
+              {liveHeader && !open
+                ? liveHeader
+                : facets.map(({ facet, result }, index) => (
+                    <FacetRenderBoundary key={facet.id}>
+                      <>
+                        {index > 0 ? " · " : null}
+                        <span aria-label={result.ariaLabel} title={result.title}>
+                          {result.icon ? (
+                            <span aria-hidden className="mr-1 inline-flex align-[-0.125em]">
+                              {result.icon}
+                            </span>
+                          ) : null}
+                          {result.content}
                         </span>
-                      ) : null}
-                      {result.content}
-                    </span>
-                  </>
-                </FacetRenderBoundary>
-              ))}
+                      </>
+                    </FacetRenderBoundary>
+                  ))}
               {outcome === "failed" && failureText ? (
                 <span className="text-og-status-failed"> · {failureText}</span>
               ) : null}

package/styles/compiled.css

@@ -443,6 +443,8 @@
 }
 /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 :where(.og-root) {
+    --font-sans: var(--og-font-sans);
+    --font-mono: var(--og-font-mono);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -469,7 +471,11 @@
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
+    --radius-sm: var(--og-radius-sm);
+    --radius-md: var(--og-radius-md);
+    --radius-lg: var(--og-radius-lg);
     --radius-2xl: 1rem;
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --blur-sm: 8px;
     --blur-md: 12px;
@@ -911,6 +917,110 @@
     animation: none;
   }
 }
+:where(.og-root).og-rolling-status,:where(.og-root) .og-rolling-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  width: 100%;
+}
+:where(.og-root).og-rolling-window,:where(.og-root) .og-rolling-window {
+  position: relative;
+  display: block;
+  flex: 1;
+  min-width: 0;
+  height: 24px;
+  overflow: hidden;
+}
+:where(.og-root).og-rolling-face,:where(.og-root) .og-rolling-face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+}
+:where(.og-root).og-rolling-label,:where(.og-root) .og-rolling-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  font-size: 13px;
+  font-weight: 450;
+  line-height: 20px;
+  color: var(--og-color-fg-muted);
+}
+:where(.og-root).og-rolling-label > svg,:where(.og-root) .og-rolling-label > svg {
+  flex-shrink: 0;
+}
+:where(.og-root).og-rolling-count,:where(.og-root) .og-rolling-count {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--og-color-fg-subtle);
+  font-variant-numeric: tabular-nums;
+}
+:where(.og-root).og-command-reel,:where(.og-root) .og-command-reel {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  transform-origin: 50% 50%;
+}
+:where(.og-root).og-reasoning-preview,:where(.og-root) .og-reasoning-preview,:where(.og-root) .og-reasoning-preview :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre),:where(.og-root)  .og-reasoning-preview :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+:where(.og-root).og-reasoning-preview br,:where(.og-root) .og-reasoning-preview br {
+  display: none;
+}
+:where(.og-root).og-reasoning-preview :is(p,li,h1,h2,h3,h4)::after,:where(.og-root) .og-reasoning-preview :is(p,li,h1,h2,h3,h4)::after {
+  content: " ";
+}
+:where(.og-root).og-reel-title,:where(.og-root) .og-reel-title {
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 75%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where(.og-root).og-reel-title:only-child,:where(.og-root) .og-reel-title:only-child {
+  max-width: 100%;
+}
+:where(.og-root).og-reel-preview,:where(.og-root) .og-reel-preview {
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where(.og-root).og-command-reel-running,:where(.og-root) .og-command-reel-running,:where(.og-root) .og-rolling-status[data-running="true"] .og-command-reel,:where(.og-root)  .og-rolling-status[data-running="true"] .og-command-reel {
+  background-image: linear-gradient(90deg, light-dark(#898c94,#686b76) 42%, light-dark(#f0f1f4,#fff) 50%, light-dark(#898c94,#686b76) 58%);
+  background-size: 300% 100%;
+  background-position: 100% 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: og-activity-sweep 3.6s linear infinite;
+}
+@keyframes og-activity-sweep {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+@media (prefers-reduced-motion:reduce), (forced-colors:active) {
+  :where(.og-root).og-command-reel-running,:where(.og-root) .og-command-reel-running,:where(.og-root) .og-rolling-status[data-running="true"] .og-command-reel,:where(.og-root)  .og-rolling-status[data-running="true"] .og-command-reel {
+    animation: none;
+    background: none;
+    -webkit-text-fill-color: currentColor;
+  }
+}
 :where(.og-root).pointer-events-auto,:where(.og-root) .pointer-events-auto {
     pointer-events: auto;
   }
@@ -1717,6 +1827,9 @@
 :where(.og-root).flex-\[1_1_5rem\],:where(.og-root) .flex-\[1_1_5rem\] {
     flex: 1 1 5rem;
   }
+:where(.og-root).flex-shrink,:where(.og-root) .flex-shrink {
+    flex-shrink: 1;
+  }
 :where(.og-root).shrink,:where(.og-root) .shrink {
     flex-shrink: 1;
   }
@@ -3207,6 +3320,9 @@
 :where(.og-root).text-balance,:where(.og-root) .text-balance {
     text-wrap: balance;
   }
+:where(.og-root).text-nowrap,:where(.og-root) .text-nowrap {
+    text-wrap: nowrap;
+  }
 :where(.og-root).\[overflow-wrap\:anywhere\],:where(.og-root) .\[overflow-wrap\:anywhere\] {
     overflow-wrap: anywhere;
   }
@@ -3231,6 +3347,9 @@
 :where(.og-root).whitespace-pre-wrap,:where(.og-root) .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+:where(.og-root).text-destructive,:where(.og-root) .text-destructive {
+    color: var(--og-color-danger);
+  }
 :where(.og-root).text-fg,:where(.og-root) .text-fg {
     color: var(--og-color-fg);
   }
@@ -3240,6 +3359,9 @@
 :where(.og-root).text-fg-subtle,:where(.og-root) .text-fg-subtle {
     color: var(--og-color-fg-subtle);
   }
+:where(.og-root).text-muted,:where(.og-root) .text-muted {
+    color: var(--color-surface-2);
+  }
 :where(.og-root).text-og-accent,:where(.og-root) .text-og-accent {
     color: var(--og-color-accent);
   }

package/styles/index.css

@@ -594,3 +594,52 @@
 @media (prefers-reduced-motion: reduce) {
   .og-genie-phrase { animation: none; }
 }
+
+/* A single softly lit reel: motion stays inside the header's fixed footprint. */
+.og-rolling-status { display:flex; align-items:center; gap:12px; min-width:0; width:100%; }
+.og-rolling-window { position:relative; display:block; flex:1; min-width:0; height:24px; overflow:hidden;  }
+.og-rolling-face { position:absolute; inset:0; display:flex; align-items:center;  }
+.og-rolling-label { display:flex; align-items:center; gap:8px; min-width:0; width:100%; font-size:13px; font-weight:450; line-height:20px; color:var(--og-color-fg-muted); }
+.og-rolling-label > svg { flex-shrink:0; }
+.og-rolling-count { flex-shrink:0; font-size:11px; color:var(--og-color-fg-subtle); font-variant-numeric:tabular-nums; }
+
+/* The complete text line rolls as one surface, without moving its layout box. */
+.og-command-reel { display:flex; flex:1; align-items:center; gap:8px; min-width:0; transform-origin:50% 50%; }
+/* Render reasoning Markdown as one clipped preview; full formatting lives inside. */
+.og-reasoning-preview,
+.og-reasoning-preview :is(div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+.og-reasoning-preview br { display: none; }
+.og-reasoning-preview :is(p,li,h1,h2,h3,h4)::after { content: " "; }
+
+/* Details consume leftover width; they never push the activity name away. */
+.og-reel-title { flex:0 0 auto; min-width:0; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.og-reel-title:only-child { max-width:100%; }
+.og-reel-preview { flex:1 1 0%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+
+/* Focused beam: one shared light source clipped to the entire text row. */
+.og-command-reel-running,
+.og-rolling-status[data-running="true"] .og-command-reel {
+  background-image:linear-gradient(90deg, light-dark(#898c94,#686b76) 42%, light-dark(#f0f1f4,#fff) 50%, light-dark(#898c94,#686b76) 58%);
+  background-size:300% 100%;
+  background-position:100% 0;
+  background-clip:text;
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  animation:og-activity-sweep 3.6s linear infinite;
+}
+@keyframes og-activity-sweep {
+  from { background-position:100% 0; }
+  to { background-position:0% 0; }
+}
+@media (prefers-reduced-motion:reduce), (forced-colors:active) {
+ .og-command-reel-running,
+ .og-rolling-status[data-running="true"] .og-command-reel {
+   animation:none; background:none; -webkit-text-fill-color:currentColor;
+ }
+}