@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

package/src/timeline/turn-summary.tsx

@@ -1,9 +1,10 @@
-import { ChevronRightIcon, CircleSlashIcon, TriangleAlertIcon } from "lucide-react";
+import { ChevronRightIcon, CircleSlashIcon, ShrinkIcon, TriangleAlertIcon } from "lucide-react";
 import {
   Component,
   createContext,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -14,15 +15,18 @@ import { CopyButton } from "../components/copy-button";
 import { cn } from "../lib/cn";
 import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
 import { useForcedDefaultOpen } from "./disclosure-context";
+import { useTimelineSearchReveal } from "../components/timeline-search";
 import { useEntranceAnimation } from "./entrance";
 import { useFoldMemory, type FoldRestingState } from "./fold-memory";
 import {
   applyPatchOpsFromToolItem,
   isApplyPatch,
   mediaPreviewFact,
+  retainedScreenshotMetadata,
   screenshotDataUrl,
 } from "./parsers";
 import { rawTypeOf } from "./registry";
+import { mcpToolLeaf } from "./tool-display-name";
 import type { ActivityItem, ToolCallItem, TurnOutcome } from "./types";
 export type { TurnOutcome } from "./types";
 
@@ -115,16 +119,40 @@ type ReplaceTurnSummaryFacets = Readonly<{
 export type TurnSummaryFacetConfiguration = ModifyTurnSummaryFacets | ReplaceTurnSummaryFacets;
 
 export type TurnSummaryOptions = Readonly<{
+  /**
+   * Readable per-turn presentation. Assistant progress stays fully formatted;
+   * each turn has its own Working / Worked row and rolling latest step.
+   * Ordinary tip-follow and manual scrolling are unchanged.
+   */
+  rolling?: boolean;
   facets?: TurnSummaryFacetConfiguration;
 }>;
 
+/**
+ * Exchange status shown in place of the plain facet line. `working` and
+ * `waiting` run a live clock from `since`; `worked` shows the settled span.
+ */
+export type TurnSummaryStatus = Readonly<{
+  kind: "working" | "waiting" | "worked";
+  /** Replaces the default "Working" / "Waiting" wording. */
+  label?: string | undefined;
+  /** Live clock start for `working` and `waiting`. */
+  since?: string | undefined;
+  /** Settled span for `worked`. */
+  durationMs?: number | undefined;
+  /** Live step preview under the row while it is collapsed. */
+  preview?: ReactNode;
+}>;
+
 export type TurnSummaryProps = {
+  /** Reports the disclosure's actual open state on mount and on every change. */
+  onOpenStateChange?: ((open: boolean) => void) | undefined;
   /** The activity items in the turn (used only to compute the facet counts). */
   items: ActivityItem[];
   /**
    * The settled verdict — or absent for a completed CLUSTER of a still-running
-   * turn, which folds neutrally: no verdict glyph (the turn has none yet), a
-   * quiet pulse dot in its place so alignment and the running feel both hold.
+   * turn, which folds neutrally. Only unfinished activity inside this summary
+   * animates; the parent turn may still be composing a response elsewhere.
    */
   outcome?: TurnOutcome | undefined;
   /** A short failure reason shown inline on a failed chip (never hidden). */
@@ -133,6 +161,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
@@ -170,6 +199,11 @@ export type TurnSummaryProps = {
   copyText?: string | undefined;
   /** Adjacent compaction landmark count for the secondary chip facet. */
   contextCompactionCount?: number | undefined;
+  /**
+   * Exchange status line (compact progress presentation). Replaces the state
+   * marker and the duration facet; a settled `worked` row reads as a separator.
+   */
+  status?: TurnSummaryStatus | undefined;
   /** The rendered activity rail revealed on expand. */
   children: ReactNode;
 };
@@ -187,17 +221,21 @@ export function TurnSummary({
   failureText,
   durationMs,
   defaultOpen,
+  liveHeader,
   bare,
   facets: facetConfiguration,
   settleFold,
   foldKey,
   copyText,
   contextCompactionCount,
+  status,
+  onOpenStateChange,
   children,
 }: TurnSummaryProps) {
   // An explicit `defaultOpen` always wins; otherwise an ancestor may seed it
   // (screenshot instrumentation); otherwise the turn starts folded.
   const forcedDefaultOpen = useForcedDefaultOpen();
+  const searchReveal = useTimelineSearchReveal();
   const foldMemory = useFoldMemory();
   // A remembered resting state outranks author defaults: a fold that already
   // finished its settle collapse (or that the reader closed) mounts closed
@@ -213,6 +251,19 @@ export function TurnSummary({
   const initialSettle = Boolean(settleFold) && !restingOpen && remembered === undefined;
   const [settling, setSettling] = useState(initialSettle);
   const [open, setOpen] = useState(initialSettle ? true : restingOpen);
+  const reportOpen = useRef(onOpenStateChange);
+  reportOpen.current = onOpenStateChange;
+  // Before paint: a listener may need to start motion in the same frame.
+  useLayoutEffect(() => {
+    reportOpen.current?.(open);
+  }, [open]);
+  const readerOwnsOpen = useRef(remembered !== undefined);
+  useEffect(() => {
+    // Readable work can produce primary media or fail after mounting. Reveal
+    // that output without remounting existing tool controls, while preserving
+    // every explicit reader-owned open/closed choice.
+    if (status && defaultOpen && remembered === undefined && !readerOwnsOpen.current) setOpen(true);
+  }, [status, defaultOpen, remembered]);
   // While true, a close uses the slow settle collapse. Cleared after that
   // auto-collapse finishes (or on first user interaction) so later manual
   // closes are the fast disclose pair.
@@ -311,7 +362,20 @@ export function TurnSummary({
     }
     // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [settleFold]);
+  useEffect(() => {
+    if (!searchReveal) return;
+    clearSettleTimers();
+    settleArmedRef.current = false;
+    setSettling(false);
+    setSettlePhase(false);
+    setNestSuppressLatch(false);
+    setOpen(true);
+    rememberResting("open");
+    // Search is an explicit, persistent reader action, not a new fold default.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchReveal]);
   const onOpenChange = (next: boolean) => {
+    readerOwnsOpen.current = true;
     // The reader took over — cancel the pending auto-collapse for good.
     // Clear settle CSS phase immediately (fast collapse) but keep nest latch
     // through the disclose window so nested chips stay force-open mid-close
@@ -364,9 +428,25 @@ export function TurnSummary({
     () => resolveTurnSummaryFacets(facetConfiguration),
     [facetConfiguration],
   );
+  const statusKind = status?.kind;
   const facets = useMemo(
     () =>
       facetDefinitions.flatMap((facet) => {
+        // The status line owns elapsed time; a live line keeps only the step
+        // count (plus host facets) so it stays one short line.
+        if (
+          statusKind &&
+          (facet.id === "duration" ||
+            (facet === BUILT_IN_TURN_SUMMARY_FACETS[0] &&
+              context.items.every(
+                (item) => item.kind === "startup-phase" || item.kind === "agent-message",
+              )) ||
+            (statusKind !== "worked" &&
+              facet.id !== "steps" &&
+              BUILT_IN_TURN_SUMMARY_FACET_IDS.includes(facet.id as BuiltInTurnSummaryFacetId)))
+        ) {
+          return [];
+        }
         try {
           const result = facet.summarize(context);
           return result && hasFacetContent(result.content) ? [{ facet, result }] : [];
@@ -376,7 +456,7 @@ export function TurnSummary({
           return [];
         }
       }),
-    [context, facetDefinitions],
+    [context, facetDefinitions, statusKind],
   );
 
   // Live open shell: keep the chip in-flow (so settle never inserts layout)
@@ -389,6 +469,8 @@ export function TurnSummary({
   // Nested chips stay force-open for this window (stable height).
   const settleChrome = settling || settlePhase || nestSuppressLatch;
 
+  const statusLine = status ? turnSummaryStatusLine(status) : null;
+
   // Copy only on the collapsed chip — when open, per-message copy is enough
   // and a second control on the summary row felt crowded / off.
   const copyable = Boolean(
@@ -399,6 +481,7 @@ export function TurnSummary({
     <TurnSettleChromeContext.Provider value={settleChrome}>
       <div className={cn(copyable && "group/copy relative")}>
         <Collapsible.Root
+          data-og-work-section={bare ? undefined : ""}
           open={open}
           onOpenChange={onOpenChange}
           // History-only entrance. Never toggle this on after mount — see
@@ -406,7 +489,12 @@ export function TurnSummary({
           className={allowEnterAnimation && !liveShell ? "animate-og-enter" : undefined}
         >
           <Collapsible.Trigger
+            data-og-work-header={bare ? "nested" : "outer"}
             className={cn(
+              // The section, not the viewport, bounds this sticky row. Content
+              // is a sibling: its disclosure overflow never traps the header.
+              // Nested rail folds must never stack additional sticky headers.
+              !bare && open && "sticky top-[var(--og-work-header-top,0px)] z-10 bg-og-bg",
               settling && "animate-og-settle-chip",
               // Top-level turn fold and (when used) nested cluster folds render as
               // FLAT rail rows — chevron + glyph + facets on the page background, no
@@ -428,6 +516,8 @@ export function TurnSummary({
                 ? "hover:bg-og-status-failed/[0.06] hover:text-og-fg"
                 : "hover:bg-og-surface-1 hover:text-og-fg",
               liveShell && "text-og-fg-subtle",
+              // Phones hide the hint, so keep the copy control clear of the separator.
+              status && copyable && "max-sm:pr-10",
             )}
           >
             {/* Disclosure grammar matches the rows: chevron leads (far left), then any
@@ -443,7 +533,9 @@ 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 : (
+            {status ||
+            outcome === "complete" ||
+            (!outcome && (liveHeader || context.settled)) ? null : (
               <span
                 className={cn(
                   "inline-flex shrink-0 items-center justify-center",
@@ -461,23 +553,30 @@ export function TurnSummary({
               </span>
             )}
             <span
-              className={cn("min-w-0 flex-1 truncate", bare ? "text-og-sm" : "text-og-fg-muted")}
+              className={cn(
+                "min-w-0 truncate",
+                status?.kind === "worked" ? "shrink" : "flex-1",
+                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}
+              {statusLine}
+              {liveHeader && !open && !status
+                ? liveHeader
+                : facets.map(({ facet, result }, index) => (
+                    <FacetRenderBoundary key={facet.id}>
+                      <>
+                        {index > 0 || statusLine ? " · " : 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}
@@ -485,24 +584,28 @@ export function TurnSummary({
                 <span className="text-og-fg-subtle"> · interrupted</span>
               ) : null}
             </span>
-            {/* The disclosure hint. Calm at rest on fine pointers (revealed on hover
-            and keyboard focus), but always present on coarse pointers where there
-            is no hover to lean on — so the fold never reads as a static status
-            line. Purely visual: the trigger's aria-expanded already conveys state
-            to assistive tech, so the hint is hidden from the accessible name. */}
-            <span
-              aria-hidden
-              className={cn(
-                "ml-auto shrink-0 pl-2 text-og-xs text-og-fg-subtle transition-opacity duration-150",
-                // Leave a sliver so a collapsed-chip copy icon can sit outside.
-                copyable ? "pr-8" : null,
-                "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100",
-                "pointer-coarse:opacity-100",
-              )}
-            >
-              {open ? "hide steps" : "show steps"}
-            </span>
+            {/* A settled exchange reads as a separator above its answer. */}
+            {status?.kind === "worked" ? (
+              <span aria-hidden className="ml-1 h-px min-w-0 flex-1 bg-og-border" />
+            ) : null}
+            {status && status.kind !== "worked" && (contextCompactionCount ?? 0) > 0 ? (
+              <ShrinkIcon
+                className="size-3.5 shrink-0"
+                aria-label="Context compacted; expand for details"
+              />
+            ) : null}
           </Collapsible.Trigger>
+          {status && !open && status.preview ? (
+            // Readable progress under the status line; the line above stays
+            // the one disclosure control, so a click here is a mouse shortcut.
+            <div
+              data-og-exchange-preview=""
+              className="flex min-w-0 cursor-pointer flex-col gap-0.5 pb-1 pl-6"
+              onClick={() => onOpenChange(true)}
+            >
+              {status.preview ? <div className="min-w-0">{status.preview}</div> : null}
+            </div>
+          ) : null}
           <Collapsible.Content
             {...(nestSuppressLatch ? { forceMount: true as const } : {})}
             data-og-fold-content=""
@@ -532,6 +635,58 @@ export function TurnSummary({
   );
 }
 
+/**
+ * "Working · 2m 14s", "Waiting for 2 agents · 3m 5s", or "Worked for 4m 10s";
+ * null when a settled span is too short to state.
+ */
+function turnSummaryStatusLine(status: TurnSummaryStatus): ReactNode {
+  if (status.kind === "worked") {
+    return status.durationMs !== undefined &&
+      Number.isFinite(status.durationMs) &&
+      status.durationMs >= 1000 ? (
+      <span data-og-exchange-status="worked">
+        {status.label ?? "Worked for"} {formatElapsed(status.durationMs)}
+      </span>
+    ) : null;
+  }
+  const label = status.label ?? (status.kind === "working" ? "Working" : "Waiting");
+  return (
+    <span data-og-exchange-status={status.kind}>
+      <span className={status.kind === "working" ? "og-shimmer-text" : undefined}>{label}</span>
+      {status.since ? <LiveElapsed since={status.since} /> : null}
+    </span>
+  );
+}
+
+/** A second-resolution clock; unmounts with the live row. */
+function LiveElapsed({ since }: { since: string }) {
+  const startedAt = Date.parse(since);
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+  if (!Number.isFinite(startedAt)) return null;
+  return (
+    <span className="tabular-nums">{` · ${formatElapsed(Math.max(0, now - startedAt))}`}</span>
+  );
+}
+
+/** Elapsed wall time with seconds below an hour: "14s", "2m 14s", "1h 05m". */
+export function formatElapsed(durationMs: number): string {
+  const totalSeconds = Math.max(0, Math.floor(durationMs / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}s`;
+  }
+  const totalMinutes = Math.floor(totalSeconds / 60);
+  if (totalMinutes < 60) {
+    const seconds = totalSeconds % 60;
+    return seconds ? `${totalMinutes}m ${seconds}s` : `${totalMinutes}m`;
+  }
+  const hours = Math.floor(totalMinutes / 60);
+  return `${hours}h ${String(totalMinutes % 60).padStart(2, "0")}m`;
+}
+
 function createTurnSummaryContext(
   items: ActivityItem[],
   outcome: TurnOutcome | undefined,
@@ -544,10 +699,15 @@ function createTurnSummaryContext(
     itemSnapshot.filter((item): item is ToolCallItem => item.kind === "tool-call"),
   );
   const settled = itemSnapshot.every((item) => {
-    if (item.kind === "reasoning") {
+    if (item.kind === "reasoning" || item.kind === "agent-message") {
       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;
@@ -566,9 +726,17 @@ function createTurnSummaryContext(
 const BUILT_IN_TURN_SUMMARY_FACETS: readonly TurnSummaryFacet[] = Object.freeze([
   {
     id: "steps",
-    summarize: ({ items }) => ({
-      content: `${items.length} ${items.length === 1 ? "step" : "steps"}`,
-    }),
+    summarize: ({ items }) => {
+      // Progress notes narrate steps; they are not steps themselves.
+      const count = items.filter(
+        (item) => item.kind !== "startup-phase" && item.kind !== "agent-message",
+      ).length;
+      return count
+        ? { content: `${count} ${count === 1 ? "step" : "steps"}` }
+        : items.some((item) => item.kind === "startup-phase")
+          ? { content: "Preparation" }
+          : null;
+    },
   },
   {
     id: "files",
@@ -596,11 +764,17 @@ const BUILT_IN_TURN_SUMMARY_FACETS: readonly TurnSummaryFacet[] = Object.freeze(
     summarize: ({ toolCalls }) => {
       let screenshots = 0;
       for (const item of toolCalls) {
+        const leaf = mcpToolLeaf(item.name);
         if (
           (rawTypeOf(item) === "computer_call" ||
             item.name === "computer_call" ||
-            item.name === "computer_screenshot") &&
-          (screenshotDataUrl(item.output) !== null || mediaPreviewFact(item.output) !== null)
+            item.name === "computer_screenshot" ||
+            leaf === "browser_screenshot" ||
+            leaf === "browser_observe" ||
+            leaf === "browser_act") &&
+          (retainedScreenshotMetadata(item.output) !== null ||
+            screenshotDataUrl(item.output) !== null ||
+            mediaPreviewFact(item.output) !== null)
         ) {
           screenshots += 1;
         }