@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

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,
@@ -13,17 +14,32 @@ import { Collapsible } from "radix-ui";
 import { CopyButton } from "../components/copy-button";
 import { cn } from "../lib/cn";
 import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
+import { presentTurnFailureText } from "./compaction-copy";
 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,
-  screenshotDataUrl,
-} from "./parsers";
-import { rawTypeOf } from "./registry";
-import type { ActivityItem, ToolCallItem, TurnOutcome } from "./types";
+  BUILT_IN_TURN_SUMMARY_FACET_IDS,
+  createTurnSummaryContext,
+  formatElapsed,
+  resolveTurnSummaryFacets,
+  selectTurnSummaryFacets,
+  type TurnSummaryFacetConfiguration,
+  type TurnSummaryStatus,
+} from "./turn-summary-model";
+import type { ActivityItem, TurnOutcome } from "./types";
+
+export { BUILT_IN_TURN_SUMMARY_FACET_IDS, formatElapsed };
+export type {
+  BuiltInTurnSummaryFacetId,
+  TurnSummaryContext,
+  TurnSummaryFacet,
+  TurnSummaryFacetConfiguration,
+  TurnSummaryFacetResult,
+  TurnSummaryOptions,
+  TurnSummaryStatus,
+} from "./turn-summary-model";
 export type { TurnOutcome } from "./types";
 
 /* ----------------------------------------------------------------------------
@@ -51,80 +67,15 @@ export function useTurnSettleOpen(): boolean {
   return useContext(TurnSettleChromeContext);
 }
 
-export const BUILT_IN_TURN_SUMMARY_FACET_IDS = [
-  "steps",
-  "files",
-  "commands",
-  "screenshots",
-  "memories",
-  "compacted",
-  "duration",
-] as const;
-
-export type BuiltInTurnSummaryFacetId = (typeof BUILT_IN_TURN_SUMMARY_FACET_IDS)[number];
-
-export type TurnSummaryContext = Readonly<{
-  /** Every normalized activity item folded into this summary. */
-  items: readonly ActivityItem[];
-  /** Tool calls from `items`, retained in timeline order for convenient aggregation. */
-  toolCalls: readonly ToolCallItem[];
-  /** The settled turn verdict, or absent for a neutral/incomplete cluster. */
-  outcome: TurnOutcome | undefined;
-  /** The bounded failure reason rendered by the enclosing summary, when present. */
-  failureText: string | undefined;
-  /** Total turn duration when the enclosing group has both valid timestamps. */
-  durationMs: number | undefined;
-  /** False when any projected activity is still running or streaming. */
-  settled: boolean;
-  /**
-   * Adjacent compaction landmarks next to this fold. Landmark remains the
-   * primary UI; this is a secondary chip signal only.
-   */
-  contextCompactionCount: number;
-}>;
-
-export type TurnSummaryFacetResult = Readonly<{
-  icon?: ReactNode;
-  content: ReactNode;
-  ariaLabel?: string;
-  title?: string;
-}>;
-
-export type TurnSummaryFacet = Readonly<{
-  /** Stable identity used for removal and deterministic de-duplication. */
-  id: string;
-  /** Return null when this facet has nothing useful to show. */
-  summarize(context: TurnSummaryContext): TurnSummaryFacetResult | null;
-}>;
-
-type ModifyTurnSummaryFacets = Readonly<{
-  /** Appended after the remaining built-ins, in supplied order. */
-  add?: readonly TurnSummaryFacet[];
-  /** Built-ins to omit before custom facets are appended. */
-  remove?: readonly BuiltInTurnSummaryFacetId[];
-  replace?: never;
-}>;
-
-type ReplaceTurnSummaryFacets = Readonly<{
-  /** The complete ordered facet list. Mutually exclusive with add/remove. */
-  replace: readonly TurnSummaryFacet[];
-  add?: never;
-  remove?: never;
-}>;
-
-export type TurnSummaryFacetConfiguration = ModifyTurnSummaryFacets | ReplaceTurnSummaryFacets;
-
-export type TurnSummaryOptions = Readonly<{
-  facets?: TurnSummaryFacetConfiguration;
-}>;
-
 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 +84,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 +122,16 @@ 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;
+  /**
+   * False when the fold has nothing to reveal: the row renders without a
+   * chevron and is not a disclosure control. Defaults to true.
+   */
+  expandable?: boolean | undefined;
   /** The rendered activity rail revealed on expand. */
   children: ReactNode;
 };
@@ -187,17 +149,22 @@ export function TurnSummary({
   failureText,
   durationMs,
   defaultOpen,
+  liveHeader,
   bare,
   facets: facetConfiguration,
   settleFold,
   foldKey,
   copyText,
   contextCompactionCount,
+  status,
+  expandable = true,
+  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
@@ -212,7 +179,22 @@ export function TurnSummary({
         : (defaultOpen ?? forcedDefaultOpen ?? false);
   const initialSettle = Boolean(settleFold) && !restingOpen && remembered === undefined;
   const [settling, setSettling] = useState(initialSettle);
-  const [open, setOpen] = useState(initialSettle ? true : restingOpen);
+  const [openState, setOpen] = useState(initialSettle ? true : restingOpen);
+  // A fold with nothing to reveal never reads as open.
+  const open = expandable && openState;
+  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 +293,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,20 +359,13 @@ export function TurnSummary({
     () => resolveTurnSummaryFacets(facetConfiguration),
     [facetConfiguration],
   );
+  const statusKind = status?.kind;
   const facets = useMemo(
-    () =>
-      facetDefinitions.flatMap((facet) => {
-        try {
-          const result = facet.summarize(context);
-          return result && hasFacetContent(result.content) ? [{ facet, result }] : [];
-        } catch {
-          // A host extension is presentation-only. It must never take down the
-          // durable timeline or hide the remaining built-in evidence.
-          return [];
-        }
-      }),
-    [context, facetDefinitions],
+    () => selectTurnSummaryFacets(facetDefinitions, context, statusKind),
+    [context, facetDefinitions, statusKind],
   );
+  // The chip names the failure; recorded technical text stays a hover title.
+  const failure = outcome === "failed" ? presentTurnFailureText(failureText) : null;
 
   // Live open shell: keep the chip in-flow (so settle never inserts layout)
   // and quieter until there is an outcome or a settle beat — but still
@@ -389,136 +377,191 @@ 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(
     copyText && copyText.trim().length > 0 && !bare && !liveShell && !open && !settlePhase,
   );
 
+  const headerClassName = 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 && expandable && "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
+    // border, no fill. Only a hover tint hints the row is expandable, so a
+    // collapsed turn never reads as a boxed card. The top-level row is a
+    // touch larger (base text, size-5 glyph, wider gap) so it still reads
+    // as a turn landmark above any nested cluster rows it groups.
+    "group flex w-full items-center rounded-og-sm text-left transition-colors",
+    // A folded turn is a touch target on coarse pointers: grow the row so it
+    // clears the 44px minimum without disturbing the calm desktop rhythm.
+    expandable && "pointer-coarse:min-h-11 pointer-coarse:py-2.5",
+    bare
+      ? "gap-2 px-1.5 py-1.5 text-og-sm text-og-fg-muted"
+      : "-mx-2 gap-2.5 px-2 py-1.5 text-og-base text-og-fg-muted",
+    // A failed fold keeps its red accent (glyph + inline reason below) and a
+    // faint red hover wash so attention still lands there; every other
+    // outcome gets the neutral surface hover. A row with nothing to reveal
+    // is not a control and gets no hover.
+    !expandable
+      ? undefined
+      : outcome === "failed"
+        ? "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",
+  );
+  const headerContent = (
+    <>
+      {/* Disclosure grammar matches the rows: chevron leads (far left), then any
+      exceptional or active state, then the facets — one expand affordance
+      side everywhere. A row with nothing to reveal keeps the chevron's space
+      so its text stays aligned with neighbouring rows. */}
+      {expandable ? (
+        <ChevronRightIcon
+          className={cn(
+            "size-3.5 shrink-0 text-og-fg-subtle transition-transform ease-og-in-out group-data-[state=open]:rotate-90",
+            settlePhase
+              ? "duration-[var(--_og-duration-disclose-settle)]"
+              : "duration-[var(--_og-duration-disclose)]",
+          )}
+        />
+      ) : (
+        <span aria-hidden className="size-3.5 shrink-0" />
+      )}
+      {/* Completion is the quiet default and needs no repeated glyph. Failed,
+      cancelled, and still-running folds retain a visible state marker. */}
+      {status || outcome === "complete" || (!outcome && (liveHeader || context.settled)) ? null : (
+        <span
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center",
+            bare ? "size-3.5" : "size-5",
+            outcome === "failed" ? "text-og-status-failed" : "text-og-fg-subtle",
+          )}
+        >
+          {outcome === "failed" ? (
+            <TriangleAlertIcon className="size-3" />
+          ) : outcome === "cancelled" ? (
+            <CircleSlashIcon className="size-3" />
+          ) : (
+            <span className="size-1.5 animate-og-pulse rounded-full bg-og-fg-subtle" />
+          )}
+        </span>
+      )}
+      <span
+        className={cn(
+          "min-w-0 truncate",
+          status?.kind === "worked" ? "shrink" : "flex-1",
+          bare ? "text-og-sm" : "text-og-fg-muted",
+        )}
+      >
+        {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>
+                </>
+              </FacetRenderBoundary>
+            ))}
+        {failure ? (
+          <span className="text-og-status-failed" title={failure.detail}>
+            {" "}
+            · {failure.summary}
+          </span>
+        ) : null}
+        {outcome === "cancelled" ? <span className="text-og-fg-subtle"> · interrupted</span> : null}
+      </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}
+    </>
+  );
+
   return (
     <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
           // allowEnterAnimation. Settle uses animate-og-settle-chip on the trigger.
           className={allowEnterAnimation && !liveShell ? "animate-og-enter" : undefined}
         >
-          <Collapsible.Trigger
-            className={cn(
-              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
-              // border, no fill. Only a hover tint hints the row is expandable, so a
-              // collapsed turn never reads as a boxed card. The top-level row is a
-              // touch larger (base text, size-5 glyph, wider gap) so it still reads
-              // as a turn landmark above any nested cluster rows it groups.
-              "group flex w-full items-center rounded-og-sm text-left transition-colors",
-              // A folded turn is a touch target on coarse pointers: grow the row so it
-              // clears the 44px minimum without disturbing the calm desktop rhythm.
-              "pointer-coarse:min-h-11 pointer-coarse:py-2.5",
-              bare
-                ? "gap-2 px-1.5 py-1.5 text-og-sm text-og-fg-muted"
-                : "-mx-2 gap-2.5 px-2 py-1.5 text-og-base text-og-fg-muted",
-              // A failed fold keeps its red accent (glyph + inline reason below) and a
-              // faint red hover wash so attention still lands there; every other
-              // outcome gets the neutral surface hover.
-              outcome === "failed"
-                ? "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",
-            )}
-          >
-            {/* Disclosure grammar matches the rows: chevron leads (far left), then any
-            exceptional or active state, then the facets — one expand affordance
-            side everywhere. */}
-            <ChevronRightIcon
+          {expandable ? (
+            <Collapsible.Trigger
+              data-og-work-header={bare ? "nested" : "outer"}
+              className={headerClassName}
+            >
+              {headerContent}
+            </Collapsible.Trigger>
+          ) : (
+            // Nothing to reveal: a plain status row, not a disclosure control.
+            <div data-og-work-header={bare ? "nested" : "outer"} className={headerClassName}>
+              {headerContent}
+            </div>
+          )}
+          {status?.guidance ? (
+            // Guidance the reader needs stays visible in both fold states.
+            <div data-og-exchange-guidance="" className="min-w-0 pb-1 pl-6">
+              {status.guidance}
+            </div>
+          ) : null}
+          {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={cn(
-                "size-3.5 shrink-0 text-og-fg-subtle transition-transform ease-og-in-out group-data-[state=open]:rotate-90",
-                settlePhase
-                  ? "duration-[var(--_og-duration-disclose-settle)]"
-                  : "duration-[var(--_og-duration-disclose)]",
+                "flex min-w-0 flex-col gap-0.5 pb-1 pl-6",
+                expandable && "cursor-pointer",
               )}
-            />
-            {/* Completion is the quiet default and needs no repeated glyph. Failed,
-            cancelled, and still-running folds retain a visible state marker. */}
-            {outcome === "complete" ? null : (
-              <span
-                className={cn(
-                  "inline-flex shrink-0 items-center justify-center",
-                  bare ? "size-3.5" : "size-5",
-                  outcome === "failed" ? "text-og-status-failed" : "text-og-fg-subtle",
-                )}
-              >
-                {outcome === "failed" ? (
-                  <TriangleAlertIcon className="size-3" />
-                ) : outcome === "cancelled" ? (
-                  <CircleSlashIcon className="size-3" />
-                ) : (
-                  <span className="size-1.5 animate-og-pulse rounded-full bg-og-fg-subtle" />
-                )}
-              </span>
-            )}
-            <span
-              className={cn("min-w-0 flex-1 truncate", bare ? "text-og-sm" : "text-og-fg-muted")}
+              onClick={expandable ? () => onOpenChange(true) : undefined}
             >
-              {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>
-                  </>
-                </FacetRenderBoundary>
-              ))}
-              {outcome === "failed" && failureText ? (
-                <span className="text-og-status-failed"> · {failureText}</span>
-              ) : null}
-              {outcome === "cancelled" ? (
-                <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
+              {status.preview ? <div className="min-w-0">{status.preview}</div> : null}
+            </div>
+          ) : null}
+          {expandable ? (
+            <Collapsible.Content
+              {...(nestSuppressLatch ? { forceMount: true as const } : {})}
+              data-og-fold-content=""
               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",
+                "overflow-hidden",
+                expandReady && "data-[state=open]:animate-og-expand",
+                // Auto-close: slow settle. Manual close (settlePhase cleared): fast.
+                settlePhase
+                  ? "data-[state=closed]:animate-og-settle-collapse"
+                  : "data-[state=closed]:animate-og-collapse",
               )}
             >
-              {open ? "hide steps" : "show steps"}
-            </span>
-          </Collapsible.Trigger>
-          <Collapsible.Content
-            {...(nestSuppressLatch ? { forceMount: true as const } : {})}
-            data-og-fold-content=""
-            className={cn(
-              "overflow-hidden",
-              expandReady && "data-[state=open]:animate-og-expand",
-              // Auto-close: slow settle. Manual close (settlePhase cleared): fast.
-              settlePhase
-                ? "data-[state=closed]:animate-og-settle-collapse"
-                : "data-[state=closed]:animate-og-collapse",
-            )}
-          >
-            {/* A nested node indents its revealed rows under the glyph (thread nesting
+              {/* A nested node indents its revealed rows under the glyph (thread nesting
             off the parent rail); the top-level turn body owns its own rail. */}
-            <div className={bare ? "pt-1 pl-5" : "pt-2"}>{children}</div>
-          </Collapsible.Content>
+              <div className={bare ? "pt-1 pl-5" : "pt-2"}>{children}</div>
+            </Collapsible.Content>
+          ) : null}
         </Collapsible.Root>
         {copyable ? (
           <div className="pointer-events-none absolute top-1.5 right-0 z-10">
@@ -532,160 +575,41 @@ export function TurnSummary({
   );
 }
 
-function createTurnSummaryContext(
-  items: ActivityItem[],
-  outcome: TurnOutcome | undefined,
-  failureText: string | undefined,
-  durationMs: number | undefined,
-  contextCompactionCount: number,
-): TurnSummaryContext {
-  const itemSnapshot = Object.freeze([...items]);
-  const toolCalls = Object.freeze(
-    itemSnapshot.filter((item): item is ToolCallItem => item.kind === "tool-call"),
+/**
+ * "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>
   );
-  const settled = itemSnapshot.every((item) => {
-    if (item.kind === "reasoning") {
-      return !item.streaming;
-    }
-    if (
-      item.kind === "tool-call" ||
-      item.kind === "worker" ||
-      item.kind === "sandbox" ||
-      item.kind === "startup-phase"
-    ) {
-      return item.status !== "running";
-    }
-    return true;
-  });
-  return Object.freeze({
-    items: itemSnapshot,
-    toolCalls,
-    outcome,
-    failureText,
-    durationMs,
-    settled,
-    contextCompactionCount: Math.max(0, Math.floor(contextCompactionCount)),
-  });
-}
-
-const BUILT_IN_TURN_SUMMARY_FACETS: readonly TurnSummaryFacet[] = Object.freeze([
-  {
-    id: "steps",
-    summarize: ({ items }) => ({
-      content: `${items.length} ${items.length === 1 ? "step" : "steps"}`,
-    }),
-  },
-  {
-    id: "files",
-    summarize: ({ toolCalls }) => {
-      let files = 0;
-      for (const item of toolCalls) {
-        if (isApplyPatch(item)) {
-          files += applyPatchOpsFromToolItem(item).length;
-        }
-      }
-      return files ? { content: `${files} ${files === 1 ? "file" : "files"} edited` } : null;
-    },
-  },
-  {
-    id: "commands",
-    summarize: ({ toolCalls }) => {
-      const commands = toolCalls.filter((item) => item.name === "exec_command").length;
-      return commands
-        ? { content: `${commands} ${commands === 1 ? "command" : "commands"}` }
-        : null;
-    },
-  },
-  {
-    id: "screenshots",
-    summarize: ({ toolCalls }) => {
-      let screenshots = 0;
-      for (const item of toolCalls) {
-        if (
-          (rawTypeOf(item) === "computer_call" ||
-            item.name === "computer_call" ||
-            item.name === "computer_screenshot") &&
-          (screenshotDataUrl(item.output) !== null || mediaPreviewFact(item.output) !== null)
-        ) {
-          screenshots += 1;
-        }
-      }
-      return screenshots
-        ? {
-            content: `${screenshots} ${screenshots === 1 ? "screenshot" : "screenshots"}`,
-          }
-        : null;
-    },
-  },
-  {
-    id: "memories",
-    summarize: ({ items }) => {
-      let saved = 0;
-      let updated = 0;
-      for (const item of items) {
-        if (item.kind !== "memory") {
-          continue;
-        }
-        if (item.variant === "corrected") {
-          updated += 1;
-        } else {
-          saved += 1;
-        }
-      }
-      const parts: string[] = [];
-      if (saved) {
-        parts.push(`${saved} ${saved === 1 ? "memory" : "memories"} saved`);
-      }
-      if (updated) {
-        parts.push(`${updated} ${updated === 1 ? "memory" : "memories"} updated`);
-      }
-      return parts.length > 0 ? { content: parts.join(" · ") } : null;
-    },
-  },
-  {
-    id: "compacted",
-    summarize: ({ contextCompactionCount }) =>
-      contextCompactionCount > 0
-        ? {
-            content:
-              contextCompactionCount === 1 ? "compacted" : `${contextCompactionCount} compacts`,
-            ariaLabel:
-              contextCompactionCount === 1
-                ? "Conversation history compacted"
-                : `${contextCompactionCount} conversation history compactions`,
-          }
-        : null,
-  },
-  {
-    id: "duration",
-    summarize: ({ durationMs }) => {
-      const duration = formatDurationFacet(durationMs);
-      return duration ? { content: duration } : null;
-    },
-  },
-]);
-
-function resolveTurnSummaryFacets(
-  configuration: TurnSummaryFacetConfiguration | undefined,
-): readonly TurnSummaryFacet[] {
-  const requested: readonly TurnSummaryFacet[] = configuration?.replace ?? [
-    ...BUILT_IN_TURN_SUMMARY_FACETS.filter(
-      (facet) => !configuration?.remove?.includes(facet.id as BuiltInTurnSummaryFacetId),
-    ),
-    ...(configuration?.add ?? []),
-  ];
-  const seen = new Set<string>();
-  return requested.filter((facet) => {
-    if (!facet.id || seen.has(facet.id)) {
-      return false;
-    }
-    seen.add(facet.id);
-    return true;
-  });
 }
 
-function hasFacetContent(content: ReactNode): boolean {
-  return content !== null && content !== undefined && content !== false && content !== "";
+/** 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>
+  );
 }
 
 class FacetRenderBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
@@ -699,20 +623,3 @@ class FacetRenderBoundary extends Component<{ children: ReactNode }, { failed: b
     return this.state.failed ? null : this.props.children;
   }
 }
-
-function formatDurationFacet(durationMs: number | undefined): string | null {
-  if (durationMs === undefined || !Number.isFinite(durationMs) || durationMs < 1000) {
-    return null;
-  }
-  const totalSeconds = Math.floor(durationMs / 1000);
-  if (totalSeconds < 60) {
-    return `${totalSeconds}s`;
-  }
-  const totalMinutes = Math.floor(totalSeconds / 60);
-  if (totalMinutes < 60) {
-    return `${totalMinutes}m`;
-  }
-  const hours = Math.floor(totalMinutes / 60);
-  const minutes = totalMinutes % 60;
-  return `${hours}h ${String(minutes).padStart(2, "0")}m`;
-}