@opengeni/react 3.3.2 → 3.4.0

package/src/timeline/activity-rail.tsx

@@ -1,5 +1,29 @@
-import { ArrowRightIcon, BotIcon, BrainCircuitIcon } from "lucide-react";
-import { lazy, Suspense, useLayoutEffect, useRef } from "react";
+import { KnowledgeReceiptRow } from "./knowledge-receipt";
+import { workerRowTitleParts } from "./platform-activity-presentation";
+import { AgentRow, AgentRowSection } from "./agent-row";
+import { useAgentIdentity } from "./agent-identity";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { GenieLoading } from "./genie-loading";
+import { StartupDispatchDetails } from "./startup-dispatch-details";
+import { useStartupDetails } from "./startup-preference";
+import {
+  ArrowRightIcon,
+  BotIcon,
+  BrainCircuitIcon,
+  MessageSquareTextIcon,
+  SendIcon,
+} from "lucide-react";
+import {
+  Component,
+  createContext,
+  lazy,
+  Suspense,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 import { Markdown } from "../components/markdown";
 import { cn } from "../lib/cn";
@@ -10,7 +34,7 @@ import type { RetainedArtifactLoader, RetainedScreenshotLoader, ToolRegistry } f
 import { useSeenActivityIds } from "./seen-activity-ids";
 import { BodyNote, PayloadBlock, ActivityDisclosure, ToolCallTruncationProvider } from "./shared";
 import { toolDisplayName } from "./tool-display-name";
-import type { ActivityItem, MemoryItem, WorkerItem } from "./types";
+import type { ActivityItem, AgentMessageItem, MemoryItem, WorkerItem } from "./types";
 
 const LazyFleetDecisionRow = lazy(() => import("./fleet-decision-row"));
 const LazyPlatformActivityRow = lazy(() => import("./platform-activity-row"));
@@ -28,6 +52,8 @@ const LazyPlatformActivityRow = lazy(() => import("./platform-activity-row"));
 
 export type ActivityRailProps = {
   items: ActivityItem[];
+  /** The owning turn remains active between individual phase receipts. */
+  startupActive?: boolean;
   /** Renderer registry for tool calls. Defaults to {@link defaultToolRegistry}. */
   toolRegistry?: ToolRegistry | undefined;
   /** Drill into a spawned worker session. */
@@ -60,6 +86,7 @@ function familyOf(item: ActivityItem): string {
 
 export function ActivityRail({
   items,
+  startupActive,
   toolRegistry = defaultToolRegistry,
   onOpenSession,
   onMemoryClick,
@@ -68,6 +95,39 @@ export function ActivityRail({
   bare,
   className,
 }: ActivityRailProps) {
+  const debug = useStartupDetails();
+  const reducedMotion = useReducedMotion();
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const phases = items.filter((item) => item.kind === "startup-phase");
+  const dispatch = phases.find((item) => item.dispatchWait !== undefined);
+  // Empty reasoning envelopes can arrive before any visible model output.
+  const hasWork = items.some(
+    (item) =>
+      item.kind !== "startup-phase" && (item.kind !== "reasoning" || item.text.trim().length > 0),
+  );
+  const interrupted = phases.some(
+    (item) => item.status === "failed" || item.status === "cancelled",
+  );
+  const providerResponded = phases.some(
+    (item) => item.phase === "provider_first_byte" && item.status === "complete",
+  );
+  const responsePending = phases.some((item) => item.phase === "provider_first_byte");
+  const loading =
+    !hasWork &&
+    !interrupted &&
+    (startupActive ?? (!providerResponded && phases.some((item) => item.status === "running")));
+  const visibleItems =
+    debug || detailsOpen
+      ? items
+      : items.filter((item) =>
+          item.kind === "startup-phase"
+            ? item.status === "failed" || item.status === "cancelled"
+            : item.kind !== "reasoning" || item.text.trim().length > 0,
+        );
+  const startedAt = phases.reduce((first, item) => {
+    const start = item.loadingStartedAt ?? item.startedAt;
+    return start < first ? start : first;
+  }, phases[0]?.startedAt ?? "");
   const enterMounted = useEntranceAnimation();
   // Live gate: rails born during bulk capture enter=false forever; with a
   // seen-id map we still want later live appends to fade (ids gate remounts).
@@ -102,7 +162,7 @@ export function ActivityRail({
         // Rows sit TIGHT by default (gap-0.5) so a same-family run reads as one
         // calm cluster; a family change opens real breathing room (mt-3) below,
         // so a long rail reads as a few clusters, not a metronome of rows.
-        "flex flex-col gap-0.5",
+        "relative flex flex-col gap-0.5",
         !bare && "border-l-2 border-og-border pl-3 sm:pl-4",
         // Whole-rail enter: standalone rails only (no seen-id map). Inside
         // MessageTimeline, unknown ids take per-row enter — remounts stay quiet.
@@ -110,8 +170,51 @@ export function ActivityRail({
         className,
       )}
     >
-      {items.map((item, index) => {
-        const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]!);
+      <AnimatePresence initial={false}>
+        {loading && !debug ? (
+          <motion.div
+            key="startup"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{
+              opacity: 0,
+              height: 0,
+              pointerEvents: "none",
+            }}
+            transition={{
+              height: { duration: reducedMotion ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] },
+              opacity: { duration: reducedMotion ? 0 : 0.16 },
+            }}
+            style={{ overflow: "hidden" }}
+          >
+            <GenieLoading
+              startedAt={startedAt}
+              notice={
+                dispatch?.dispatchWait?.lastError
+                  ? "Unable to start yet. Your messages are saved."
+                  : undefined
+              }
+              phase={responsePending ? "waiting" : "preparing"}
+              detailsOpen={detailsOpen}
+              onShowDetails={() => setDetailsOpen((open) => !open)}
+            />
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+      {detailsOpen && !debug && !loading ? (
+        <button
+          type="button"
+          className="og-genie-details self-start"
+          onClick={() => setDetailsOpen(false)}
+        >
+          Hide startup details
+        </button>
+      ) : null}
+      {dispatch && (detailsOpen || debug) ? (
+        <StartupDispatchDetails wait={dispatch.dispatchWait ?? null} />
+      ) : null}
+      {visibleItems.map((item, index) => {
+        const newFamily = index > 0 && familyOf(item) !== familyOf(visibleItems[index - 1]!);
         const row = renderActivity(
           item,
           toolRegistry,
@@ -138,12 +241,48 @@ export function ActivityRail({
   );
 }
 
+/**
+ * Host message renderer for progress notes inside a rail, so notes keep the
+ * host's links and formatting. Without one, notes render the library Markdown.
+ */
+export const ActivityNoteTextContext = createContext<
+  ((text: string, item: AgentMessageItem) => ReactNode) | null
+>(null);
+
+/**
+ * Assistant commentary folded into the rail: the agent's own words about the
+ * work, quieter than an answer and aligned with the step titles.
+ */
+function ActivityNoteRow({ item }: { item: AgentMessageItem }) {
+  const renderText = useContext(ActivityNoteTextContext);
+  if (!item.text.trim()) return null;
+  return (
+    <div className="flex items-start gap-2 px-1.5 py-1.5" data-og-activity-note="">
+      <span className="size-3.5 shrink-0" aria-hidden />
+      <MessageSquareTextIcon aria-hidden className="mt-1 size-3.5 shrink-0 text-og-fg-subtle" />
+      <div
+        className="min-w-0 flex-1 text-og-sm text-og-fg-muted"
+        data-og-search-item={item.id}
+        data-og-annotation-source-key={item.annotationSource?.eventId}
+      >
+        {renderText ? (
+          renderText(item.text, item)
+        ) : (
+          <Markdown softLineBreaks streaming={item.streaming}>
+            {item.text}
+          </Markdown>
+        )}
+      </div>
+    </div>
+  );
+}
+
 /** A never-reachable guard: adding an `ActivityItem` kind is now a compile error. */
 function assertNever(item: never): never {
   throw new Error(`ActivityRail: unhandled activity item ${JSON.stringify(item)}`);
 }
 
-function renderActivity(
+export function renderActivity(
   item: ActivityItem,
   toolRegistry: ToolRegistry,
   onOpenSession: ((sessionId: string) => void) | undefined,
@@ -164,7 +303,6 @@ function renderActivity(
             t={toolDisplayName}
             b={BotIcon}
             m={Markdown}
-            r={truncate}
             j={rowJsx}
             s={rowJsxs}
           />
@@ -173,19 +311,33 @@ function renderActivity(
     case "tool-call": {
       const Renderer = toolRegistry.resolve(item);
       return (
-        <ToolCallTruncationProvider value={item.truncation ?? null}>
-          <Renderer
-            item={item}
-            loadRetainedScreenshot={loadRetainedScreenshot}
-            loadRetainedArtifact={loadRetainedArtifact}
-          />
-        </ToolCallTruncationProvider>
+        <ToolRowBoundary name={toolDisplayName(item.name)} resetKeys={[item.status, Renderer]}>
+          <ToolCallTruncationProvider value={item.truncation ?? null}>
+            <Renderer
+              item={item}
+              loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
+            />
+          </ToolCallTruncationProvider>
+        </ToolRowBoundary>
       );
     }
     case "worker":
       return <WorkerRow item={item} onOpenSession={onOpenSession} />;
+    case "knowledge":
+      return (
+        <KnowledgeReceiptRow
+          outcome={item.outcome}
+          entryId={item.entryId}
+          fileId={item.fileId}
+          title={item.filename}
+          source={Boolean(item.fileId)}
+        />
+      );
     case "memory":
       return <MemoryRow item={item} onMemoryClick={onMemoryClick} />;
+    case "agent-message":
+      return <ActivityNoteRow item={item} />;
     case "fleet-decision":
       return (
         <Suspense fallback={null}>
@@ -301,7 +453,13 @@ function MemoryRow({
   );
 }
 
-/** Spawned/messaged worker sessions get a first-class card, not a tool row. */
+/**
+ * Spawning or messaging another agent: a named rail step. The title names the
+ * agent, one line previews the brief or message, expanding shows it in full,
+ * and the trailing arrow opens the agent's session once its id is known. A
+ * failed or interrupted call keeps its quiet chip; an interrupted one, or a
+ * spawn that never produced a session, offers no link.
+ */
 function WorkerRow({
   item,
   onOpenSession,
@@ -309,99 +467,82 @@ function WorkerRow({
   item: WorkerItem;
   onOpenSession?: ((sessionId: string) => void) | undefined;
 }) {
+  const identity = useAgentIdentity();
   const running = item.status === "running";
   const failed = item.status === "failed";
   const cancelled = item.status === "cancelled";
-  const title =
-    item.action === "spawn"
-      ? running
-        ? "Spawning worker"
-        : failed
-          ? "Worker spawn failed"
-          : cancelled
-            ? "Worker interrupted"
-            : "Worker spawned"
-      : 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",
-          )}
-        >
-          {title}
-        </span>
-        {item.prompt ? (
-          <p className="mt-0.5 truncate text-og-sm text-og-fg-muted">
-            {truncate(item.prompt, 140)}
-          </p>
-        ) : null}
-        {failed && item.failure ? (
-          <div className="mt-1 min-w-0 text-og-sm text-og-status-failed">
-            <p className="font-og-mono text-og-xs">{item.failure.code}</p>
-            <p className="mt-0.5 break-words">{item.failure.message}</p>
-          </div>
-        ) : null}
-      </div>
-      {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" />
-          failed
-        </span>
-      ) : cancelled ? (
-        <span className="og-cancelled-chip shrink-0 self-center font-og-mono text-og-xs leading-none text-og-fg-subtle">
-          interrupted
-        </span>
-      ) : 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}
-    </>
+  const name = identity.titleFor(sessionId) ?? (item.action === "spawn" ? item.title : null);
+  const title = workerRowTitleParts(item, name);
+  const prompt = item.prompt?.trim() ? item.prompt.trim() : null;
+  const failure = failed ? item.failure : null;
+  const hasBody = Boolean(prompt) || Boolean(failure);
+  return (
+    <AgentRow
+      icon={item.action === "spawn" ? <BotIcon /> : <SendIcon />}
+      title={title}
+      preview={
+        failure ? failure.message : prompt ? truncate(prompt.replace(/\s+/g, " "), 240) : null
+      }
+      sessionId={cancelled ? null : sessionId}
+      onOpenSession={onOpenSession ?? identity.onOpenSession}
+      running={running}
+      failed={failed}
+      cancelled={cancelled}
+    >
+      {hasBody ? (
+        <>
+          {prompt ? (
+            <AgentRowSection label={item.action === "spawn" ? "Brief" : "Message"}>
+              {prompt}
+            </AgentRowSection>
+          ) : null}
+          {failure ? (
+            <AgentRowSection label={failure.code} muted>
+              {failure.message}
+            </AgentRowSection>
+          ) : null}
+        </>
+      ) : undefined}
+    </AgentRow>
   );
+}
+
+/**
+ * One tool row that fails to render shows a one-line note in its place, so the
+ * rest of the work group (and the live preview) keeps reading normally.
+ */
+class ToolRowBoundary extends Component<
+  { name: string; resetKeys: readonly unknown[]; children: ReactNode },
+  { failed: boolean; resetKeys: readonly unknown[] }
+> {
+  state = { failed: false, resetKeys: this.props.resetKeys };
+
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true };
+  }
 
-  if (deepLink && sessionId && onOpenSession) {
+  /** A new status or renderer for the row gets a fresh attempt. */
+  static getDerivedStateFromProps(
+    props: { resetKeys: readonly unknown[] },
+    state: { failed: boolean; resetKeys: readonly unknown[] },
+  ): { failed: boolean; resetKeys: readonly unknown[] } | null {
+    const same =
+      props.resetKeys.length === state.resetKeys.length &&
+      props.resetKeys.every((key, index) => Object.is(key, state.resetKeys[index]));
+    return same ? null : { failed: false, resetKeys: props.resetKeys };
+  }
+
+  render(): ReactNode {
+    if (!this.state.failed) return this.props.children;
     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-hidden transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
-          "pointer-coarse:min-h-11 pointer-coarse:py-2.5",
-        )}
+      <div
+        data-testid="tool-row-render-error"
+        role="status"
+        className="px-1.5 py-1.5 text-og-menu text-og-fg-subtle"
       >
-        {inner}
-      </button>
+        {this.props.name} · couldn't be displayed
+      </div>
     );
   }
-  return <div className="flex items-start gap-2 px-1.5 py-1.5">{inner}</div>;
 }

package/src/timeline/agent-identity.tsx

@@ -0,0 +1,84 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { TimelineItem } from "./types";
+
+/**
+ * Host lookup from a session id to its current display title. Return null or
+ * undefined when the session is unknown; the timeline then falls back to the
+ * title given at spawn time, then to generic copy.
+ */
+export type ResolveSessionTitle = (sessionId: string) => string | null | undefined;
+
+type AgentIdentity = {
+  /** The best known display title for an agent session, or null. */
+  titleFor: (sessionId: string | null | undefined) => string | null;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+};
+
+const SESSION_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const AGENT_TITLE_MAX_LENGTH = 80;
+
+/** Typed routing coordinates only: a session reference is always a UUID. */
+export function isSessionId(value: string | null | undefined): value is string {
+  return typeof value === "string" && SESSION_ID.test(value);
+}
+
+/** One bounded display line, or null for an empty or non-string title. */
+export function displayAgentTitle(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const title = value.replace(/\s+/g, " ").trim();
+  if (!title) return null;
+  return title.length > AGENT_TITLE_MAX_LENGTH
+    ? `${title.slice(0, AGENT_TITLE_MAX_LENGTH - 1).trimEnd()}…`
+    : title;
+}
+
+const AgentIdentityContext = createContext<AgentIdentity>({ titleFor: () => null });
+
+export function useAgentIdentity(): AgentIdentity {
+  return useContext(AgentIdentityContext);
+}
+
+/**
+ * Names the agents a timeline talks to. The host resolver wins (it follows
+ * renames); otherwise the title the manager passed when spawning that session
+ * in this same timeline is used.
+ */
+export function AgentIdentityProvider({
+  items,
+  resolveSessionTitle,
+  onOpenSession,
+  children,
+}: {
+  items: readonly TimelineItem[];
+  resolveSessionTitle?: ResolveSessionTitle | undefined;
+  onOpenSession?: ((sessionId: string) => void) | undefined;
+  children: ReactNode;
+}) {
+  // Streaming replaces the item array on every delta; key the index by its
+  // content so the context (and every agent row) only changes with a title.
+  const spawnTitleKey = JSON.stringify(
+    items.flatMap((item) =>
+      item.kind === "worker" &&
+      item.action === "spawn" &&
+      isSessionId(item.workerSessionId) &&
+      item.title
+        ? [[item.workerSessionId.toLowerCase(), item.title]]
+        : [],
+    ),
+  );
+  const value = useMemo<AgentIdentity>(() => {
+    const spawnTitles = new Map<string, string>(JSON.parse(spawnTitleKey) as [string, string][]);
+    return {
+      titleFor: (sessionId) => {
+        if (!isSessionId(sessionId)) return null;
+        return (
+          displayAgentTitle(resolveSessionTitle?.(sessionId)) ??
+          displayAgentTitle(spawnTitles.get(sessionId.toLowerCase())) ??
+          null
+        );
+      },
+      onOpenSession,
+    };
+  }, [spawnTitleKey, resolveSessionTitle, onOpenSession]);
+  return <AgentIdentityContext.Provider value={value}>{children}</AgentIdentityContext.Provider>;
+}