@opengeni/react 0.12.0 → 0.15.0

package/src/provider.tsx

@@ -1,16 +1,44 @@
-import { createContext, useContext, useMemo, type ReactNode } from "react";
+import {
+  OpenGeniApiContractMismatchError,
+  OPENGENI_API_CONTRACT_REVISION,
+  type StreamConnectionState,
+  type WorkspaceControlEvent,
+} from "@opengeni/sdk";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import type { SessionClientLike } from "./client";
 
 export type OpenGeniContextValue = {
   client: SessionClientLike;
   workspaceId: string;
+  workspaceControlEvent: WorkspaceControlEvent | null;
+  workspaceControlConnectionState: StreamConnectionState | "idle" | "error";
+  registerSessionReconciler: (
+    sessionId: string,
+    key: string,
+    reconcile: () => Promise<void>,
+  ) => () => void;
+  reconcileSession: (sessionId: string) => Promise<void>;
 };
 
 const OpenGeniContext = createContext<OpenGeniContextValue | null>(null);
+const NOOP_REGISTER_RECONCILER: OpenGeniContextValue["registerSessionReconciler"] = () => () =>
+  undefined;
+const NOOP_RECONCILE_SESSION: OpenGeniContextValue["reconcileSession"] = async () => undefined;
+const CONTRACT_RELOAD_STORAGE_PREFIX = "opengeni.reloadForApiContract:";
 
 export type OpenGeniProviderProps = {
   client: SessionClientLike;
   workspaceId: string;
+  onWorkspaceControlEvent?: ((event: WorkspaceControlEvent) => void) | undefined;
   children?: ReactNode;
 };
 
@@ -18,9 +46,161 @@ export type OpenGeniProviderProps = {
  * Supplies the OpenGeni client + workspace to all hooks below it. Hooks also
  * accept `{ client, workspaceId }` overrides per call for multi-workspace UIs.
  */
-export function OpenGeniProvider({ client, workspaceId, children }: OpenGeniProviderProps) {
-  const value = useMemo(() => ({ client, workspaceId }), [client, workspaceId]);
-  return <OpenGeniContext.Provider value={value}>{children}</OpenGeniContext.Provider>;
+export function OpenGeniProvider({
+  client,
+  workspaceId,
+  onWorkspaceControlEvent,
+  children,
+}: OpenGeniProviderProps) {
+  const [workspaceControlEvent, setWorkspaceControlEvent] = useState<WorkspaceControlEvent | null>(
+    null,
+  );
+  const [workspaceControlConnectionState, setWorkspaceControlConnectionState] = useState<
+    StreamConnectionState | "idle" | "error"
+  >("idle");
+  const [contractMismatch, setContractMismatch] = useState<OpenGeniApiContractMismatchError | null>(
+    null,
+  );
+  const callbackRef = useRef(onWorkspaceControlEvent);
+  const reconcilersRef = useRef(new Map<string, Map<string, () => Promise<void>>>());
+  callbackRef.current = onWorkspaceControlEvent;
+
+  const verifyApiContract = useCallback(async (): Promise<void> => {
+    try {
+      const config = await client.getClientConfig();
+      if (config.apiContractRevision !== OPENGENI_API_CONTRACT_REVISION) {
+        throw new OpenGeniApiContractMismatchError(
+          OPENGENI_API_CONTRACT_REVISION,
+          String(config.apiContractRevision || "(missing)"),
+        );
+      }
+    } catch (error) {
+      if (error instanceof OpenGeniApiContractMismatchError) {
+        setContractMismatch(error);
+        reloadForContractMismatchOnce(error);
+      }
+      throw error;
+    }
+  }, [client]);
+
+  const registerSessionReconciler = useMemo(
+    () =>
+      (sessionId: string, key: string, reconcile: () => Promise<void>): (() => void) => {
+        const sessionReconcilers = reconcilersRef.current.get(sessionId) ?? new Map();
+        sessionReconcilers.set(key, reconcile);
+        reconcilersRef.current.set(sessionId, sessionReconcilers);
+        return () => {
+          const current = reconcilersRef.current.get(sessionId);
+          current?.delete(key);
+          if (current?.size === 0) reconcilersRef.current.delete(sessionId);
+        };
+      },
+    [],
+  );
+  const reconcileSession = useMemo(
+    () =>
+      async (sessionId: string): Promise<void> => {
+        // This read also crosses the exact API-contract handshake before stale
+        // state can be presented as live after a deployment.
+        await verifyApiContract();
+        const callbacks = [...(reconcilersRef.current.get(sessionId)?.values() ?? [])];
+        await Promise.all(callbacks.map((reconcile) => reconcile()));
+      },
+    [verifyApiContract],
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+    setWorkspaceControlEvent(null);
+    setWorkspaceControlConnectionState("connecting");
+    void (async () => {
+      try {
+        await verifyApiContract();
+        const workspace = await client.getWorkspace(workspaceId);
+        const stream = client.streamWorkspaceControlEvents(workspaceId, {
+          after: workspace.inferenceControl.revision,
+          signal: controller.signal,
+          onStateChange: setWorkspaceControlConnectionState,
+        });
+        for await (const event of stream) {
+          if (controller.signal.aborted) return;
+          setWorkspaceControlEvent((current) =>
+            !current || event.sequence > current.sequence ? event : current,
+          );
+          callbackRef.current?.(event);
+        }
+      } catch (error) {
+        if (error instanceof OpenGeniApiContractMismatchError) {
+          setContractMismatch(error);
+          reloadForContractMismatchOnce(error);
+        }
+        if (!controller.signal.aborted) setWorkspaceControlConnectionState("error");
+      }
+    })();
+    return () => controller.abort();
+  }, [client, verifyApiContract, workspaceId]);
+
+  const value = useMemo(
+    () => ({
+      client,
+      workspaceId,
+      workspaceControlEvent,
+      workspaceControlConnectionState,
+      registerSessionReconciler,
+      reconcileSession,
+    }),
+    [
+      client,
+      workspaceId,
+      workspaceControlEvent,
+      workspaceControlConnectionState,
+      registerSessionReconciler,
+      reconcileSession,
+    ],
+  );
+  return (
+    <OpenGeniContext.Provider value={value}>
+      {children}
+      {contractMismatch ? <ApiContractMismatchScreen mismatch={contractMismatch} /> : null}
+    </OpenGeniContext.Provider>
+  );
+}
+
+function ApiContractMismatchScreen({ mismatch }: { mismatch: OpenGeniApiContractMismatchError }) {
+  return (
+    <div
+      className="og-root fixed inset-0 z-[2147483647] grid place-items-center bg-og-bg/95 p-6 backdrop-blur-sm"
+      role="alert"
+      aria-live="assertive"
+      data-opengeni-api-contract-mismatch
+    >
+      <div className="w-full max-w-md rounded-xl border border-og-border bg-og-surface p-6 shadow-2xl">
+        <p className="text-sm font-semibold text-og-fg">OpenGeni updated</p>
+        <p className="mt-2 text-sm leading-6 text-og-muted">
+          This tab cannot safely continue with the new server version. Reload it before sending or
+          controlling work.
+        </p>
+        <p className="mt-3 font-mono text-xs text-og-subtle">
+          Client {mismatch.expected} · API {mismatch.actual}
+        </p>
+        <button
+          type="button"
+          className="mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-sm font-medium text-og-bg"
+          onClick={() => window.location.reload()}
+        >
+          Reload now
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function reloadForContractMismatchOnce(mismatch: OpenGeniApiContractMismatchError): void {
+  if (typeof window === "undefined" || typeof sessionStorage === "undefined") return;
+  const key = `${CONTRACT_RELOAD_STORAGE_PREFIX}${mismatch.actual}`;
+  if (sessionStorage.getItem(key) === OPENGENI_API_CONTRACT_REVISION) return;
+  sessionStorage.setItem(key, OPENGENI_API_CONTRACT_REVISION);
+  window.setTimeout(() => window.location.reload(), 150);
 }
 
 export type ClientOverride = {
@@ -38,14 +218,23 @@ export function useOpenGeni(override: ClientOverride = {}): OpenGeniContextValue
       "@opengeni/react: no OpenGeni client/workspace available. Wrap the tree in <OpenGeniProvider> or pass { client, workspaceId } to the hook.",
     );
   }
-  return { client, workspaceId };
+  return {
+    client,
+    workspaceId,
+    workspaceControlEvent: context?.workspaceControlEvent ?? null,
+    workspaceControlConnectionState: context?.workspaceControlConnectionState ?? "idle",
+    registerSessionReconciler: context?.registerSessionReconciler ?? NOOP_REGISTER_RECONCILER,
+    reconcileSession: context?.reconcileSession ?? NOOP_RECONCILE_SESSION,
+  };
 }
 
 /**
  * Resolve the client only — for hooks that are not workspace-scoped
  * (`useWorkspaces`, `useBillingUsage`).
  */
-export function useOpenGeniClient(override: Pick<ClientOverride, "client"> = {}): SessionClientLike {
+export function useOpenGeniClient(
+  override: Pick<ClientOverride, "client"> = {},
+): SessionClientLike {
   const context = useContext(OpenGeniContext);
   const client = override.client ?? context?.client;
   if (!client) {

package/src/timeline/activity-rail.tsx

@@ -1,12 +1,18 @@
-import { BotIcon, BrainIcon, SquareTerminalIcon } from "lucide-react";
+import {
+  ArrowRightIcon,
+  BotIcon,
+  BrainCircuitIcon,
+  BrainIcon,
+  SquareTerminalIcon,
+} from "lucide-react";
 import { cn } from "../lib/cn";
 import { truncate } from "../lib/format";
 import { defaultToolRegistry } from "./tool-renderers";
 import { useEntranceAnimation } from "./entrance";
 import type { ToolRegistry } from "./registry";
-import { PayloadBlock, ActivityDisclosure } from "./shared";
+import { BodyNote, PayloadBlock, ActivityDisclosure } from "./shared";
 import { toolDisplayName } from "./projection";
-import type { ActivityItem, ReasoningItem, SandboxItem, WorkerItem } from "./types";
+import type { ActivityItem, MemoryItem, ReasoningItem, SandboxItem, WorkerItem } from "./types";
 
 /* ----------------------------------------------------------------------------
    Activity rail
@@ -25,6 +31,12 @@ export type ActivityRailProps = {
   toolRegistry?: ToolRegistry | undefined;
   /** Drill into a spawned worker session. */
   onOpenSession?: ((sessionId: string) => void) | undefined;
+  /**
+   * Deep-link a memory row to its record in the host's memory pane. Opt-in: the
+   * library draws no "View in memory" affordance without a handler (the memory
+   * row is then non-interactive rich content). See {@link MessageTimelineProps}.
+   */
+  onMemoryClick?: ((memoryId: string) => void) | undefined;
   /** Drop the left rule + indent (used inside a folded turn summary). */
   bare?: boolean | undefined;
   className?: string | undefined;
@@ -42,7 +54,14 @@ function familyOf(item: ActivityItem): string {
   return item.kind;
 }
 
-export function ActivityRail({ items, toolRegistry = defaultToolRegistry, onOpenSession, bare, className }: ActivityRailProps) {
+export function ActivityRail({
+  items,
+  toolRegistry = defaultToolRegistry,
+  onOpenSession,
+  onMemoryClick,
+  bare,
+  className,
+}: ActivityRailProps) {
   const enter = useEntranceAnimation();
   return (
     <div
@@ -58,7 +77,7 @@ export function ActivityRail({ items, toolRegistry = defaultToolRegistry, onOpen
     >
       {items.map((item, index) => {
         const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
-        const row = renderActivity(item, toolRegistry, onOpenSession);
+        const row = renderActivity(item, toolRegistry, onOpenSession, onMemoryClick);
         return (
           <div key={item.id} className={cn(newFamily && "mt-3")}>
             {row}
@@ -78,6 +97,7 @@ function renderActivity(
   item: ActivityItem,
   toolRegistry: ToolRegistry,
   onOpenSession: ((sessionId: string) => void) | undefined,
+  onMemoryClick: ((memoryId: string) => void) | undefined,
 ) {
   switch (item.kind) {
     case "reasoning":
@@ -90,6 +110,8 @@ function renderActivity(
       return <WorkerRow item={item} onOpenSession={onOpenSession} />;
     case "sandbox":
       return <SandboxRow item={item} />;
+    case "memory":
+      return <MemoryRow item={item} onMemoryClick={onMemoryClick} />;
     default:
       return assertNever(item);
   }
@@ -117,12 +139,131 @@ function ReasoningRow({ item }: { item: ReasoningItem }) {
   );
 }
 
+/**
+ * Human labels for the memory kinds, translated at the SDK boundary so a raw
+ * enum slug never renders as UI. Kept local to the library (the app has its own
+ * `KIND_LABEL`); an unknown kind simply omits the chip rather than showing a slug.
+ */
+const MEMORY_KIND_LABEL: Record<string, string> = {
+  preference: "Preference",
+  semantic: "Fact",
+  procedural: "Procedure",
+  decision: "Decision",
+  episodic: "History",
+};
+
+/**
+ * A memory write the agent made mid-turn. A calm, NEUTRAL step (a successful save
+ * is ordinary progress, never an exceptional state, so no accent/color): a brain-
+ * circuit glyph, "Saved to memory" / "Updated memory", a human kind chip, and the
+ * memory text. Expanding reveals the full text; a supersede shows the old text
+ * struck through above the new one. When the host opts in with `onMemoryClick`,
+ * a quiet "View in memory" affordance deep-links to the LIVE record.
+ */
+function MemoryRow({
+  item,
+  onMemoryClick,
+}: {
+  item: MemoryItem;
+  onMemoryClick?: ((memoryId: string) => void) | undefined;
+}) {
+  const corrected = item.variant === "corrected";
+  const kindLabel = MEMORY_KIND_LABEL[item.memoryKind];
+  // A supersede carries both the old text (`preview`) and the new (`replacementPreview`);
+  // an in-place update / archive carries only `preview`.
+  const superseded = corrected && Boolean(item.replacementPreview);
+  // Link to the LIVE record: a supersede's replacement when present, else the memory itself.
+  const targetId = corrected ? (item.replacementMemoryId ?? item.memoryId) : item.memoryId;
+  const deepLink = Boolean(onMemoryClick);
+  return (
+    <ActivityDisclosure
+      icon={<BrainCircuitIcon className="size-3.5" />}
+      iconTone="muted"
+      title={
+        <span className="inline-flex min-w-0 items-center gap-2">
+          <span className="shrink-0">{corrected ? "Updated memory" : "Saved to memory"}</span>
+          {kindLabel ? (
+            <span className="shrink-0 rounded-og-xs bg-og-surface-2 px-1.5 py-px text-og-xs font-normal leading-tight text-og-fg-subtle">
+              {kindLabel}
+            </span>
+          ) : null}
+        </span>
+      }
+      preview={superseded ? item.replacementPreview : item.preview}
+    >
+      {superseded ? (
+        // The correction as a before → after: the old memory struck through and
+        // dimmed, the new text in the ordinary body weight below it.
+        <div className="flex flex-col gap-1.5">
+          <p className="whitespace-pre-wrap text-og-sm leading-6 text-og-fg-subtle line-through">
+            {item.preview}
+          </p>
+          <p className="whitespace-pre-wrap text-og-base leading-6 text-og-fg-muted">
+            {item.replacementPreview}
+          </p>
+        </div>
+      ) : corrected && item.action === "updated" ? (
+        // Edited in place, no replacement record: the memory is still live, so
+        // show its current text — NOT the archived treatment.
+        <>
+          <p className="whitespace-pre-wrap text-og-base leading-6 text-og-fg-muted">
+            {item.preview}
+          </p>
+          <BodyNote tone="muted">Updated in place.</BodyNote>
+        </>
+      ) : corrected ? (
+        // A correction with no replacement (and not an in-place update) archived the record.
+        <BodyNote tone="muted">Archived.</BodyNote>
+      ) : (
+        <p className="whitespace-pre-wrap text-og-base leading-6 text-og-fg-muted">
+          {item.preview}
+        </p>
+      )}
+      {item.deduped ? <BodyNote tone="muted">Merged into an existing memory.</BodyNote> : null}
+      {deepLink ? (
+        <button
+          type="button"
+          onClick={() => onMemoryClick?.(targetId)}
+          className={cn(
+            "group/memlink -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-left text-og-sm text-og-fg-subtle",
+            "outline-none transition-colors duration-150 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent",
+          )}
+        >
+          View in memory
+          <ArrowRightIcon className="size-3.5 transition-transform duration-150 group-hover/memlink:translate-x-0.5" />
+        </button>
+      ) : null}
+    </ActivityDisclosure>
+  );
+}
+
+/**
+ * A human title for a sandbox operation row. Named platform operations (the lazy
+ * `sandbox.provision` first-establish that now runs mid-turn) read as calm,
+ * status-aware English instead of a raw op id — the box coming up should look
+ * like "Starting sandbox", never an unexplained long-running command. Unnamed /
+ * unknown ops fall back to the generic id-to-words {@link toolDisplayName}.
+ */
+function sandboxRowTitle(item: SandboxItem): string {
+  if (item.name === "sandbox.provision") {
+    if (item.status === "failed") return "Sandbox didn’t start";
+    if (item.status === "running") return "Starting sandbox";
+    if (item.origin === "resumed") return "Sandbox reattached";
+    if (item.origin === "restored") return "Sandbox restored";
+    if (item.origin === "created") return "Sandbox created";
+    return "Sandbox ready";
+  }
+  return toolDisplayName(item.name);
+}
+
 function SandboxRow({ item }: { item: SandboxItem }) {
   return (
     <ActivityDisclosure
       icon={<SquareTerminalIcon className="size-3.5" />}
-      iconTone={item.status === "failed" ? "failed" : item.status === "running" ? "running" : "muted"}
-      title={toolDisplayName(item.name)}
+      iconTone={
+        item.status === "failed" ? "failed" : item.status === "running" ? "running" : "muted"
+      }
+      title={sandboxRowTitle(item)}
       running={item.status === "running"}
       failed={item.status === "failed"}
       cancelled={item.status === "cancelled"}
@@ -135,7 +276,13 @@ function SandboxRow({ item }: { item: SandboxItem }) {
 }
 
 /** Spawned/messaged worker sessions get a first-class card, not a tool row. */
-function WorkerRow({ item, onOpenSession }: { item: WorkerItem; onOpenSession?: ((sessionId: string) => void) | undefined }) {
+function WorkerRow({
+  item,
+  onOpenSession,
+}: {
+  item: WorkerItem;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+}) {
   const running = item.status === "running";
   const failed = item.status === "failed";
   const cancelled = item.status === "cancelled";
@@ -148,47 +295,49 @@ function WorkerRow({ item, onOpenSession }: { item: WorkerItem; onOpenSession?:
           : cancelled
             ? "Worker interrupted"
             : "Worker spawned"
-      : item.action === "interrupt"
-        ? (() => {
-            const verb = item.mode === "steer" ? "Steering" : "Stopping";
-            const done = item.mode === "steer" ? "Worker steered" : "Worker stopped";
-            return running ? `${verb} worker` : failed ? "Worker interrupt failed" : cancelled ? "Worker interrupted" : done;
-          })()
-        : running
-          ? "Messaging worker"
-          : failed
-            ? "Worker message failed"
-            : cancelled
-              ? "Worker interrupted"
-              : "Worker messaged";
-  return (
-    <div
-      className={cn(
-        "my-0.5 flex items-start gap-3 rounded-og-md border bg-og-surface-1 p-3",
-        failed ? "border-og-status-failed/40" : "border-og-border",
-      )}
-    >
-      <span
-        className={cn(
-          "mt-0.5 inline-flex size-7 shrink-0 items-center justify-center",
-          failed ? "text-og-status-failed" : "text-og-accent",
-        )}
-      >
-        <BotIcon className="size-4" />
+      : running
+        ? "Messaging worker"
+        : failed
+          ? "Worker message failed"
+          : cancelled
+            ? "Worker interrupted"
+            : "Worker messaged";
+  // A worker is a first-class actor but still a STEP on the rail — a borderless
+  // row (no card), aligned to its sibling tool rows: the chevron column is an
+  // empty spacer (a worker doesn't expand), then the bot glyph, then the title
+  // with a quiet prompt beneath, and one right-gutter affordance.
+  //
+  // Once the worker's session id is known, the WHOLE row is a clean, clickable
+  // deep-link into that child session (a trailing arrow brightens on hover) —
+  // the spawn moment itself is the affordance, not a small side button. A
+  // still-in-flight spawn (no id yet) or a failed/cancelled worker is inert, so
+  // there is never a dead click target. The gutter mirrors the worker-completion
+  // card's calm language: red chip on failure, "interrupted" on cancel.
+  const sessionId = item.workerSessionId;
+  const deepLink = Boolean(sessionId) && Boolean(onOpenSession) && !failed && !cancelled;
+  const inner = (
+    <>
+      <span className="size-3.5 shrink-0" aria-hidden />
+      <span className={cn("mt-px shrink-0", failed ? "text-og-status-failed" : "text-og-accent")}>
+        <BotIcon className="size-3.5" />
       </span>
       <div className="min-w-0 flex-1">
         {/* In-flight state is carried ONLY by the shimmering title (no detached
             pulse badge), matching every other running row in the rail. */}
-        <span className={cn("text-og-base font-medium", running ? "og-shimmer-text" : failed ? "text-og-status-failed" : "text-og-fg")}>
+        <span
+          className={cn(
+            "text-og-base font-medium",
+            running ? "og-shimmer-text" : failed ? "text-og-status-failed" : "text-og-fg",
+          )}
+        >
           {title}
         </span>
-        {item.prompt ? <p className="mt-0.5 truncate text-og-sm text-og-fg-muted">{truncate(item.prompt, 140)}</p> : null}
-        {item.workerSessionId ? (
-          <p className="mt-1 font-og-mono text-og-xs text-og-fg-subtle">{item.workerSessionId.slice(0, 8)}</p>
+        {item.prompt ? (
+          <p className="mt-0.5 truncate text-og-sm text-og-fg-muted">
+            {truncate(item.prompt, 140)}
+          </p>
         ) : null}
       </div>
-      {/* Right gutter: failed gets a red chip; cancelled gets a calm "interrupted"
-          chip (no dot, no red); a live complete worker shows an "Open session" button. */}
       {failed ? (
         <span className="inline-flex shrink-0 self-center items-center gap-1.5 font-og-mono text-og-xs leading-none text-og-status-failed">
           <span className="size-1.5 rounded-full bg-og-status-failed" />
@@ -198,19 +347,29 @@ function WorkerRow({ item, onOpenSession }: { item: WorkerItem; onOpenSession?:
         <span className="og-cancelled-chip shrink-0 self-center font-og-mono text-og-xs leading-none text-og-fg-subtle">
           interrupted
         </span>
-      ) : item.workerSessionId && onOpenSession ? (
-        <button
-          type="button"
-          onClick={() => item.workerSessionId && onOpenSession(item.workerSessionId)}
-          className={cn(
-            "shrink-0 self-center rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
-            "outline-none transition-colors duration-150 hover:border-og-border-strong hover:text-og-fg",
-            "focus-visible:ring-2 focus-visible:ring-og-accent",
-          )}
-        >
-          Open session
-        </button>
+      ) : deepLink ? (
+        <ArrowRightIcon
+          aria-hidden
+          className="mt-0.5 size-3.5 shrink-0 text-og-fg-subtle transition-[transform,color] duration-150 group-hover/worker:translate-x-0.5 group-hover/worker:text-og-fg"
+        />
       ) : null}
-    </div>
+    </>
   );
+
+  if (deepLink && sessionId && onOpenSession) {
+    return (
+      <button
+        type="button"
+        onClick={() => onOpenSession(sessionId)}
+        className={cn(
+          "group/worker -mx-1.5 flex w-full items-start gap-2 rounded-og-sm px-1.5 py-1.5 text-left",
+          "outline-none transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
+          "pointer-coarse:py-2.5",
+        )}
+      >
+        {inner}
+      </button>
+    );
+  }
+  return <div className="flex items-start gap-2 px-1.5 py-1.5">{inner}</div>;
 }

package/src/timeline/disclosure-context.tsx

@@ -21,8 +21,18 @@ const DisclosureDefaultsContext = createContext<boolean | undefined>(undefined);
  * Seed the initial open state of every timeline collapsible below this node.
  * Intended for screenshot/test instrumentation only; absent by default.
  */
-export function DisclosureDefaultsProvider({ defaultOpen, children }: { defaultOpen: boolean; children: ReactNode }) {
-  return <DisclosureDefaultsContext.Provider value={defaultOpen}>{children}</DisclosureDefaultsContext.Provider>;
+export function DisclosureDefaultsProvider({
+  defaultOpen,
+  children,
+}: {
+  defaultOpen: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <DisclosureDefaultsContext.Provider value={defaultOpen}>
+      {children}
+    </DisclosureDefaultsContext.Provider>
+  );
 }
 
 /**

package/src/timeline/index.ts

@@ -16,13 +16,22 @@
    -------------------------------------------------------------------------- */
 
 // projection
-export { buildTimeline, creditExhaustedFromEvents, extractSessionRef, groupTimeline, sessionStatusFromEvents, toolDisplayName } from "./projection";
+export {
+  buildTimeline,
+  creditExhaustedFromEvents,
+  extractSessionRef,
+  groupTimeline,
+  sessionStatusFromEvents,
+  toolDisplayName,
+} from "./projection";
 
 // item types
 export type {
   ActivityItem,
   AgentMessageItem,
+  AuthNeededItem,
   GoalItem,
+  MemoryItem,
   NoticeItem,
   ReasoningItem,
   SandboxItem,
@@ -32,6 +41,7 @@ export type {
   TurnEndItem,
   ToolCallItem,
   UserMessageItem,
+  WorkerCompletionItem,
   WorkerItem,
 } from "./types";
 
@@ -53,7 +63,16 @@ export { ActivityRail } from "./activity-rail";
 export type { ActivityRailProps } from "./activity-rail";
 
 // shared primitives (extension authors compose these)
-export { ActivityDisclosure, BodyNote, MediaEmpty, MediaSkeleton, PayloadBlock, ScreenshotFigure, TermBlock, Thumbnail } from "./shared";
+export {
+  ActivityDisclosure,
+  BodyNote,
+  MediaEmpty,
+  MediaSkeleton,
+  PayloadBlock,
+  ScreenshotFigure,
+  TermBlock,
+  Thumbnail,
+} from "./shared";
 export type { ActivityDisclosureProps, DisclosureChip } from "./shared";
 
 // screenshot lightbox