@opengeni/react 0.12.0 → 0.15.0

package/src/timeline/turn-summary.tsx

@@ -36,11 +36,26 @@ export type TurnSummaryProps = {
   durationMs?: number | undefined;
   /** Start expanded. */
   defaultOpen?: boolean | undefined;
+  /**
+   * 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
+   * parent's rail (chevron + glyph + facets), so expanding a turn reveals a thread
+   * of nodes, never a stack of boxes-in-boxes. The top-level fold stays a chip.
+   */
+  bare?: boolean | undefined;
   /** The rendered activity rail revealed on expand. */
   children: React.ReactNode;
 };
 
-export function TurnSummary({ items, outcome, failureText, durationMs, defaultOpen, children }: TurnSummaryProps) {
+export function TurnSummary({
+  items,
+  outcome,
+  failureText,
+  durationMs,
+  defaultOpen,
+  bare,
+  children,
+}: TurnSummaryProps) {
   // An explicit `defaultOpen` always wins; otherwise an ancestor may seed it
   // (screenshot instrumentation); otherwise the turn starts folded.
   const forcedDefaultOpen = useForcedDefaultOpen();
@@ -49,34 +64,46 @@ export function TurnSummary({ items, outcome, failureText, durationMs, defaultOp
   const facets = summarizeTurn(items, durationMs);
 
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen} className={enter ? "animate-og-enter" : undefined}>
+    <Collapsible.Root
+      open={open}
+      onOpenChange={setOpen}
+      className={enter && !bare ? "animate-og-enter" : undefined}
+    >
       <Collapsible.Trigger
         className={cn(
-          "group flex w-full items-center gap-2.5 rounded-og-md border px-3 py-2 text-left text-og-base transition-colors",
-          // A folded turn is a touch target on coarse pointers: grow the row so
-          // it clears the 40px minimum without disturbing the calm desktop rhythm.
+          // Both the top-level turn fold and a nested cluster fold render as a
+          // FLAT rail row — 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 the 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 40px minimum without disturbing the calm desktop rhythm.
           "pointer-coarse:py-2.5",
-          // Only a failed turn earns the one filled/tinted card in the timeline;
-          // complete and cancelled stay flat and calm.
+          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"
-            ? "border-og-status-failed/30 bg-og-status-failed/[0.06] hover:border-og-status-failed/50"
-            : "border-og-border bg-og-surface-1/50 hover:border-og-border-strong",
+            ? "hover:bg-og-status-failed/[0.06] hover:text-og-fg"
+            : "hover:bg-og-surface-1 hover:text-og-fg",
         )}
       >
         {/* Disclosure grammar matches the rows: chevron leads (far left), then the
             outcome glyph, then the facets — one expand affordance side everywhere. */}
         <ChevronRightIcon className="size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-150 group-data-[state=open]:rotate-90" />
-        {/* Only the exceptional outcomes earn a filled tinted circle. A clean
-            (complete) run draws a bare muted check — zero colored fills, so the
-            eye is pulled only to a turn that needs attention. */}
+        {/* The outcome glyph carries the state by hue alone — no filled circle, no
+            card. A clean (complete) run draws a bare muted check; a failed one a
+            red triangle; a cancelled one a muted slash; a still-running cluster a
+            quiet pulse dot in the glyph's place so alignment holds. */}
         <span
           className={cn(
-            "inline-flex size-5 shrink-0 items-center justify-center rounded-full",
-            outcome === "failed"
-              ? "bg-og-status-failed/15 text-og-status-failed"
-              : outcome === "cancelled"
-                ? "bg-og-fg-subtle/15 text-og-fg-subtle"
-                : "text-og-fg-subtle",
+            "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" ? (
@@ -84,17 +111,19 @@ export function TurnSummary({ items, outcome, failureText, durationMs, defaultOp
           ) : outcome === "cancelled" ? (
             <CircleSlashIcon className="size-3" />
           ) : outcome === "complete" ? (
-            <CheckIcon className="size-3.5" />
+            <CheckIcon className={bare ? "size-3" : "size-3.5"} />
           ) : (
             <span className="size-1.5 animate-og-pulse rounded-full bg-og-fg-subtle" />
           )}
         </span>
-        <span className="min-w-0 flex-1 truncate text-og-fg-muted">
+        <span className={cn("min-w-0 flex-1 truncate", bare ? "text-og-sm" : "text-og-fg-muted")}>
           {facets}
           {outcome === "failed" && failureText ? (
             <span className="text-og-status-failed"> · {failureText}</span>
           ) : null}
-          {outcome === "cancelled" ? <span className="text-og-fg-subtle"> · interrupted</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
@@ -113,7 +142,9 @@ export function TurnSummary({ items, outcome, failureText, durationMs, defaultOp
         </span>
       </Collapsible.Trigger>
       <Collapsible.Content className="overflow-hidden data-[state=closed]:animate-og-collapse data-[state=open]:animate-og-expand">
-        <div className="pt-2">{children}</div>
+        {/* 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>
     </Collapsible.Root>
   );
@@ -124,7 +155,19 @@ function summarizeTurn(items: ActivityItem[], durationMs?: number): string {
   let files = 0;
   let commands = 0;
   let screenshots = 0;
+  let memoriesSaved = 0;
+  let memoriesUpdated = 0;
   for (const item of items) {
+    if (item.kind === "memory") {
+      // A memory write is a first-class facet — the "wrote 1 memory" signal the
+      // fold should make prominent — counted saved vs updated separately.
+      if (item.variant === "corrected") {
+        memoriesUpdated += 1;
+      } else {
+        memoriesSaved += 1;
+      }
+      continue;
+    }
     if (item.kind !== "tool-call") {
       continue;
     }
@@ -133,7 +176,11 @@ function summarizeTurn(items: ActivityItem[], durationMs?: number): string {
       files += applyPatchOps(item.raw).length;
     } else if (item.name === "exec_command") {
       commands += 1;
-    } else if (rawTypeOf(item) === "computer_call" || item.name === "computer_call" || item.name === "computer_screenshot") {
+    } else if (
+      rawTypeOf(item) === "computer_call" ||
+      item.name === "computer_call" ||
+      item.name === "computer_screenshot"
+    ) {
       if (screenshotDataUrl(item.output) !== null) {
         screenshots += 1;
       }
@@ -149,6 +196,12 @@ function summarizeTurn(items: ActivityItem[], durationMs?: number): string {
   if (screenshots) {
     parts.push(`${screenshots} ${screenshots === 1 ? "screenshot" : "screenshots"}`);
   }
+  if (memoriesSaved) {
+    parts.push(`${memoriesSaved} ${memoriesSaved === 1 ? "memory" : "memories"} saved`);
+  }
+  if (memoriesUpdated) {
+    parts.push(`${memoriesUpdated} ${memoriesUpdated === 1 ? "memory" : "memories"} updated`);
+  }
   const duration = formatDurationFacet(durationMs);
   if (duration) {
     parts.push(duration);

package/src/timeline/types.ts

@@ -13,8 +13,6 @@ export type UserMessageItem = {
   kind: "user-message";
   id: string;
   text: string;
-  /** Queued for a future turn whose start has not appeared in the event log. */
-  pending?: boolean;
   /** Resources attached to this message (file uploads, repositories). */
   resources: ResourceRef[];
   /** Tools requested for the turn this message starts. */
@@ -71,20 +69,29 @@ export type WorkerItem = {
   id: string;
   turnId: string | null;
   callId: string | null;
-  action: "spawn" | "message" | "interrupt";
+  action: "spawn" | "message";
   /** The worker's initial message / the message sent to it, when parseable. */
   prompt: string | null;
   /** The target/spawned worker session id, when parseable from args/output. */
   workerSessionId: string | null;
-  /**
-   * For an `interrupt` action, whether it stops the target (default) or steers
-   * it (cancel the current turn, keep the goal). Absent on spawn/message.
-   */
-  mode?: "stop" | "steer";
   status: "running" | "complete" | "failed" | "cancelled";
   occurredAt: string;
 };
 
+export type WorkerCompletionItem = {
+  kind: "worker-completion";
+  id: string;
+  turnId: string | null;
+  occurredAt: string;
+  childSessionId: string;
+  childStatus: string;
+  goalStatus: string | null;
+  goalText: string | null;
+  evidence: string | null;
+  pausedReason: string | null;
+  text: string;
+};
+
 export type SandboxItem = {
   kind: "sandbox";
   id: string;
@@ -92,10 +99,47 @@ export type SandboxItem = {
   name: string;
   command: string | null;
   output: string;
+  origin?: "created" | "restored" | "resumed" | null;
   status: "running" | "complete" | "failed" | "cancelled";
   occurredAt: string;
 };
 
+/**
+ * A first-party workspace-memory write the agent made mid-turn — a `memory.saved`
+ * (it committed a new preference / fact / procedure / decision / history) or a
+ * `memory.corrected` (it updated or archived an existing one). A settled save is
+ * ordinary progress, not an exceptional state, so it renders as a calm NEUTRAL
+ * step on the rail (never accent/color). When the host app supplies an
+ * `onMemoryClick` handler the row also deep-links to the record in its memory
+ * pane; without one it is non-interactive rich content.
+ */
+export type MemoryItem = {
+  kind: "memory";
+  id: string;
+  turnId: string | null;
+  variant: "saved" | "corrected";
+  /** The memory's kind enum (`"preference" | "semantic" | …`); mapped to a human label at render. */
+  memoryKind: string;
+  /** The memory text, ellipsized to ≤120 chars server-side. For a supersede this is the OLD text. */
+  preview: string;
+  /** The save collapsed into an existing memory (no new row was written). Saved variant only. */
+  deduped?: boolean;
+  /** The NEW text when a correction superseded the memory with a replacement; absent = updated-in-place or archived. */
+  replacementPreview?: string;
+  /**
+   * What a `memory.corrected` did: `"superseded"` (replaced by a new record, see
+   * `replacementPreview`), `"updated"` (edited in place — the record lives on), or
+   * `"archived"` (retired). Distinguishes updated-in-place from archived when there
+   * is no replacement. Corrected variant only; read defensively (may be absent).
+   */
+  action?: string;
+  /** The saved / corrected memory's id — the deep-link target for a save. */
+  memoryId: string;
+  /** The replacement memory's id when a correction produced one — the LIVE record the deep-link targets. */
+  replacementMemoryId?: string;
+  occurredAt: string;
+};
+
 export type SessionStatusItem = {
   kind: "session-status";
   id: string;
@@ -106,7 +150,7 @@ export type SessionStatusItem = {
 export type GoalItem = {
   kind: "goal";
   id: string;
-  action: "set" | "updated" | "completed" | "paused" | "resumed" | "continuation";
+  action: "set" | "updated" | "completed" | "paused" | "resumed" | "cleared" | "continuation";
   text: string | null;
   occurredAt: string;
 };
@@ -116,10 +160,41 @@ export type NoticeItem = {
   id: string;
   tone: "waiting" | "cancelled" | "failed";
   text: string;
+  /** Optional evidence kept inspectable without overwhelming the main rail. */
+  details?: { label: string; value: unknown };
   action?: { label: string; url: string };
   occurredAt: string;
 };
 
+/**
+ * A tool call hit a connection whose credential lapsed — the broker asked the
+ * user to reconnect the provider before the turn can continue. Carries the
+ * structured `tool.auth_needed` payload so the renderer can draw a clean inline
+ * reconnect affordance (provider logo + one human line + a Reconnect button)
+ * and the app can start the right recovery flow (OAuth reconnect for the
+ * surviving connection, or credential re-entry for an api-key one). The `reason`
+ * shapes the human copy but is never shown raw.
+ */
+export type AuthNeededItem = {
+  kind: "auth-needed";
+  id: string;
+  turnId: string | null;
+  /** The connection's registrable domain, e.g. "linear.app". */
+  providerDomain: string;
+  /** The lapsed connection to reconnect, when the row survived. */
+  connectionId: string | null;
+  reason: "missing_connection" | "expired" | "insufficient_scope" | "refresh_failed" | null;
+  /** Scopes the provider now needs; may inform the copy, never shown as a raw label. */
+  scopes: string[];
+  /** The OAuth `resource` (RFC 8707) the reconnect should target, when supplied. */
+  resource: string | null;
+  /** The tool whose call triggered the reauth, for context. */
+  toolName: string | null;
+  /** A pre-minted authorization URL, when the broker already produced one. */
+  authorizationUrl: string | null;
+  occurredAt: string;
+};
+
 export type TurnOutcome = "complete" | "failed" | "cancelled";
 
 export type TurnEndItem = {
@@ -137,18 +212,27 @@ export type TimelineItem =
   | ReasoningItem
   | ToolCallItem
   | WorkerItem
+  | WorkerCompletionItem
   | SandboxItem
   | SessionStatusItem
   | GoalItem
   | NoticeItem
+  | AuthNeededItem
+  | MemoryItem
   | TurnEndItem;
 
-/** Activity items cluster between chat messages (reasoning, tools, workers, sandbox). */
-export type ActivityItem = ReasoningItem | ToolCallItem | WorkerItem | SandboxItem;
+/** Activity items cluster between chat messages (reasoning, tools, workers, sandbox, memory). */
+export type ActivityItem = ReasoningItem | ToolCallItem | WorkerItem | SandboxItem | MemoryItem;
 
 export type TimelineGroup =
   | { kind: "item"; item: TimelineItem }
-  | { kind: "activity"; id: string; items: ActivityItem[]; outcome?: TurnOutcome; failureText?: string }
+  | {
+      kind: "activity";
+      id: string;
+      items: ActivityItem[];
+      outcome?: TurnOutcome;
+      failureText?: string;
+    }
   | {
       kind: "turn";
       id: string;

package/styles/index.css

@@ -165,6 +165,28 @@
   }
 }
 
+/* Metric-history line draw-in. The chart path carries `pathLength={1}`, so the
+   dash math is resolution-independent: one full-length dash whose offset animates
+   from 1 (hidden) to 0 (drawn). Degrades to a solid line if animations are off. */
+@keyframes og-mh-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+.og-mh-draw {
+  stroke-dasharray: 1;
+  animation: og-mh-draw 900ms var(--og-ease-out) forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .og-mh-draw {
+    animation: none;
+    stroke-dasharray: none;
+  }
+}
+
 /* Shimmer helper: gradient text the keyframe scrolls through. */
 .og-shimmer-text {
   background: linear-gradient(

package/styles/tokens.css

@@ -45,7 +45,7 @@
   --og-color-border-strong: oklch(0.42 0.016 260);
   --og-color-fg: oklch(0.955 0.005 260);
   --og-color-fg-muted: oklch(0.73 0.012 260);
-  --og-color-fg-subtle: oklch(0.56 0.013 260);
+  --og-color-fg-subtle: oklch(0.62 0.013 260);
 
   /* Accent — one brand hue, used sparingly ----------------------------------- */
   --og-color-accent: oklch(0.72 0.15 255);
@@ -92,7 +92,7 @@
   --og-color-border-strong: oklch(0.8 0.01 260);
   --og-color-fg: oklch(0.21 0.015 260);
   --og-color-fg-muted: oklch(0.46 0.014 260);
-  --og-color-fg-subtle: oklch(0.6 0.012 260);
+  --og-color-fg-subtle: oklch(0.5 0.012 260);
 
   --og-color-accent: oklch(0.55 0.18 255);
   --og-color-accent-strong: oklch(0.48 0.19 255);