@opengeni/react 0.3.0 → 0.4.0

package/src/timeline/turn-summary.tsx

@@ -0,0 +1,125 @@
+import { CheckIcon, ChevronRightIcon, CircleSlashIcon, TriangleAlertIcon } from "lucide-react";
+import { useState } from "react";
+import { Collapsible } from "radix-ui";
+import { cn } from "../lib/cn";
+import { useForcedDefaultOpen } from "./disclosure-context";
+import { applyPatchOps, isApplyPatch } from "./parsers";
+import { rawTypeOf } from "./registry";
+import type { ActivityItem } from "./types";
+
+/* ----------------------------------------------------------------------------
+   Turn summary
+
+   A completed (or failed/cancelled) turn's activity folds behind one quiet
+   summary chip: "N steps · M files · K commands · 1 screenshot". The chip is the
+   default surface; expanding it reveals the full activity rail (the caller's
+   rendered rows). A live turn never folds — render its rows directly.
+
+   This keeps the timeline calm: a finished turn is a single line until the
+   reader chooses to look inside it.
+   -------------------------------------------------------------------------- */
+
+export type TurnOutcome = "complete" | "failed" | "cancelled";
+
+export type TurnSummaryProps = {
+  /** The activity items in the turn (used only to compute the facet counts). */
+  items: ActivityItem[];
+  outcome: TurnOutcome;
+  /** A short failure reason shown inline on a failed chip (never hidden). */
+  failureText?: string | undefined;
+  /** Start expanded. */
+  defaultOpen?: boolean | undefined;
+  /** The rendered activity rail revealed on expand. */
+  children: React.ReactNode;
+};
+
+export function TurnSummary({ items, outcome, failureText, defaultOpen, children }: TurnSummaryProps) {
+  // An explicit `defaultOpen` always wins; otherwise an ancestor may seed it
+  // (screenshot instrumentation); otherwise the turn starts folded.
+  const forcedDefaultOpen = useForcedDefaultOpen();
+  const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
+  const facets = summarizeTurn(items);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen} className="animate-og-enter">
+      <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",
+          // Only a failed turn earns the one filled/tinted card in the timeline;
+          // complete and cancelled stay flat and calm.
+          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",
+        )}
+      >
+        {/* 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. */}
+        <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",
+          )}
+        >
+          {outcome === "failed" ? (
+            <TriangleAlertIcon className="size-3" />
+          ) : outcome === "cancelled" ? (
+            <CircleSlashIcon className="size-3" />
+          ) : (
+            <CheckIcon className="size-3.5" />
+          )}
+        </span>
+        <span className="min-w-0 flex-1 truncate 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}
+        </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>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
+
+/** Compose the facet summary line ("14 steps · 3 files · 2 commands · 1 screenshot · 4m"). */
+function summarizeTurn(items: ActivityItem[]): string {
+  let files = 0;
+  let commands = 0;
+  let screenshots = 0;
+  for (const item of items) {
+    if (item.kind !== "tool-call") {
+      continue;
+    }
+    // `item` is narrowed to ToolCallItem by the guard above — no cast needed.
+    if (isApplyPatch(item)) {
+      files += applyPatchOps(item.raw).length;
+    } else if (item.name === "exec_command") {
+      commands += 1;
+    } else if (rawTypeOf(item) === "computer_call" || item.name === "computer_call") {
+      if (typeof item.output === "string" && item.output.startsWith("data:image")) {
+        screenshots += 1;
+      }
+    }
+  }
+  const parts = [`${items.length} ${items.length === 1 ? "step" : "steps"}`];
+  if (files) {
+    parts.push(`${files} ${files === 1 ? "file" : "files"} edited`);
+  }
+  if (commands) {
+    parts.push(`${commands} ${commands === 1 ? "command" : "commands"}`);
+  }
+  if (screenshots) {
+    parts.push(`${screenshots} ${screenshots === 1 ? "screenshot" : "screenshots"}`);
+  }
+  return parts.join(" · ");
+}

package/src/timeline/types.ts

@@ -0,0 +1,131 @@
+import type { ResourceRef, SessionStatus, ToolRef } from "@opengeni/sdk";
+
+/* ----------------------------------------------------------------------------
+   Timeline item types
+
+   The projected, renderable shapes that `buildTimeline` folds a session's raw
+   event log into. These are the data contract the renderer registry and every
+   row component consume — the SINGLE SOURCE OF TRUTH used by both the live app
+   and the component demo.
+   -------------------------------------------------------------------------- */
+
+export type UserMessageItem = {
+  kind: "user-message";
+  id: string;
+  text: string;
+  /** Resources attached to this message (file uploads, repositories). */
+  resources: ResourceRef[];
+  /** Tools requested for the turn this message starts. */
+  tools: ToolRef[];
+  occurredAt: string;
+};
+
+export type AgentMessageItem = {
+  kind: "agent-message";
+  id: string;
+  turnId: string | null;
+  text: string;
+  /** Still receiving deltas (no completed/turn-end seen yet). */
+  streaming: boolean;
+  occurredAt: string;
+};
+
+export type ReasoningItem = {
+  kind: "reasoning";
+  id: string;
+  turnId: string | null;
+  text: string;
+  streaming: boolean;
+  occurredAt: string;
+};
+
+export type ToolCallItem = {
+  kind: "tool-call";
+  id: string;
+  turnId: string | null;
+  callId: string | null;
+  name: string;
+  arguments: unknown;
+  output: unknown;
+  /**
+   * The provider-native tool item (`agent.toolCall.created.payload.raw`). Carries
+   * `type` (e.g. `apply_patch_call`, `computer_call`, `hosted_tool_call`) and the
+   * tool-specific fields the per-tool renderers read (`operation`, `action`,
+   * `providerData`, …). `undefined` for first-party MCP tools, which carry their
+   * payload in `arguments`/`output` instead.
+   */
+  raw: unknown;
+  status: "running" | "complete" | "failed" | "cancelled";
+  occurredAt: string;
+};
+
+/**
+ * An orchestration call against another session — the manager spawning or
+ * messaging a worker. Rendered as a first-class "worker" row, not a generic
+ * tool call.
+ */
+export type WorkerItem = {
+  kind: "worker";
+  id: string;
+  turnId: string | null;
+  callId: string | null;
+  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;
+  status: "running" | "complete" | "failed" | "cancelled";
+  occurredAt: string;
+};
+
+export type SandboxItem = {
+  kind: "sandbox";
+  id: string;
+  turnId: string | null;
+  name: string;
+  command: string | null;
+  output: string;
+  status: "running" | "complete" | "failed" | "cancelled";
+  occurredAt: string;
+};
+
+export type SessionStatusItem = {
+  kind: "session-status";
+  id: string;
+  status: SessionStatus;
+  occurredAt: string;
+};
+
+export type GoalItem = {
+  kind: "goal";
+  id: string;
+  action: "set" | "updated" | "completed" | "paused" | "resumed" | "continuation";
+  text: string | null;
+  occurredAt: string;
+};
+
+export type NoticeItem = {
+  kind: "notice";
+  id: string;
+  tone: "waiting" | "cancelled" | "failed";
+  text: string;
+  occurredAt: string;
+};
+
+export type TimelineItem =
+  | UserMessageItem
+  | AgentMessageItem
+  | ReasoningItem
+  | ToolCallItem
+  | WorkerItem
+  | SandboxItem
+  | SessionStatusItem
+  | GoalItem
+  | NoticeItem;
+
+/** Activity items cluster between chat messages (reasoning, tools, workers, sandbox). */
+export type ActivityItem = ReasoningItem | ToolCallItem | WorkerItem | SandboxItem;
+
+export type TimelineGroup =
+  | { kind: "item"; item: TimelineItem }
+  | { kind: "activity"; id: string; items: ActivityItem[] };

package/src/types/external.d.ts

@@ -0,0 +1,7 @@
+// Ambient declarations for optional, untyped peer dependencies that are only
+// ever reached via a lazy dynamic import inside a client-side effect. The
+// concrete shape is narrowed at the call site with an explicit cast, so a bare
+// module declaration is enough to keep `tsc` happy without pulling DOM-only
+// libs into the type graph.
+
+declare module "@novnc/novnc";

package/styles/index.css

@@ -20,6 +20,18 @@
   --font-og-sans: var(--og-font-sans);
   --font-og-mono: var(--og-font-mono);
 
+  /* Type ramp — a real 4-step scale (no half-pixel hand-tuning). Every
+     timeline string maps to one of these via `text-og-{xs,sm,base,md}`;
+     mono reuses the same steps. */
+  --text-og-xs: 11px;
+  --text-og-xs--line-height: 1.45;
+  --text-og-sm: 12px;
+  --text-og-sm--line-height: 1.5;
+  --text-og-base: 13px;
+  --text-og-base--line-height: 1.55;
+  --text-og-md: 15px;
+  --text-og-md--line-height: 1.6;
+
   --color-og-bg: var(--og-color-bg);
   --color-og-surface-1: var(--og-color-surface-1);
   --color-og-surface-2: var(--og-color-surface-2);
@@ -63,6 +75,44 @@
   --animate-og-blink: og-blink 1s steps(2, start) infinite;
   --animate-og-shimmer: og-shimmer 2.2s linear infinite;
   --animate-og-spin: og-spin 0.9s linear infinite;
+  --animate-og-expand: og-expand var(--og-duration-fast) var(--og-ease-in-out);
+  --animate-og-collapse: og-collapse var(--og-duration-fast) var(--og-ease-in-out);
+}
+
+/* Radix Collapsible disclosure: height auto-animates via the content var. Used
+   by the timeline tool rows so an expand glides open instead of snapping.
+
+   Height carries the motion; opacity is a SUBTLE fade that resolves slightly
+   ahead of the height so the body never pops in at full size, but also never
+   flickers half-transparent mid-glide. The ease is a symmetric ease-in-out
+   (no overshoot), so open and close feel like the same short, calm motion with
+   no double-bounce. */
+@keyframes og-expand {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  60% {
+    opacity: 1;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes og-collapse {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  40% {
+    opacity: 0;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
 }
 
 /* Entry: messages and timeline rows slide in just enough to feel placed. */
@@ -155,3 +205,25 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* ----------------------------------------------------------------------------
+   xterm.js hardening (SandboxTerminal)
+
+   xterm 6's DOM renderer measures glyph widths by stamping a scratch element
+   (`.xterm-width-cache-measure-container`) full of repeated characters
+   (`]]]]bbbb yyyy…`). The shipped xterm.css hides the older
+   `.xterm-char-measure-element` but NOT this newer container, so on first paint
+   it leaks a row of garbage glyphs across the top of the terminal. Clip every
+   xterm measurement scratch element off-screen so the transcript is the only
+   thing visible.
+   -------------------------------------------------------------------------- */
+.xterm .xterm-width-cache-measure-container,
+.xterm-width-cache-measure-container,
+.xterm .xterm-char-measure-element {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  z-index: -1 !important;
+}