@opengeni/react 0.9.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -41,11 +41,12 @@
     "typecheck": "tsc --noEmit",
     "build": "tsup",
     "demo": "vite dev demo --port 3100",
-    "demo:build": "vite build demo"
+    "demo:build": "vite build demo",
+    "prepublishOnly": "bash ../../scripts/prepublish-guard"
   },
   "dependencies": {
     "@bufbuild/protobuf": "^2.2.0",
-    "@opengeni/sdk": "^0.9.0",
+    "@opengeni/sdk": "^0.11.0",
     "clsx": "^2.1.1",
     "lucide-react": "^1.8.0",
     "motion": "^12.0.0",
@@ -108,33 +109,5 @@
     "@xterm/xterm": {
       "optional": true
     }
-  },
-  "devDependencies": {
-    "@codemirror/lang-css": "^6.3.1",
-    "@opengeni/agent-proto": "workspace:*",
-    "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/lang-python": "^6.2.1",
-    "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
-    "@happy-dom/global-registrator": "^20.10.2",
-    "@novnc/novnc": "^1.7.0",
-    "@pierre/diffs": "^1.2.11",
-    "@tailwindcss/vite": "^4.2.4",
-    "@uiw/react-codemirror": "^4.25.10",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/addon-web-links": "^0.12.0",
-    "@xterm/xterm": "^6.0.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwindcss": "^4.2.4",
-    "tsup": "^8.5.0",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.9"
   }
 }

package/src/components/message-timeline.tsx

@@ -279,13 +279,14 @@ export function MessageTimeline({
               <span className="og-shimmer-text font-medium">Loading earlier activity…</span>
             </div>
           ) : null}
-          {groups.map((group) => (
+          {groups.map((group, index) => (
             <TimelineGroupView
               key={timelineGroupKey(group)}
               group={group}
               renderMessageText={renderMessageText}
               onOpenSession={onOpenSession}
               toolRegistry={toolRegistry}
+              foldLiveCluster={isAgentProgress(groups[index + 1])}
             />
           ))}
           {working ? (
@@ -350,11 +351,16 @@ function TimelineGroupView({
   onOpenSession,
   toolRegistry,
   insideTurn = false,
+  foldLiveCluster = false,
 }: {
   group: TimelineGroup;
   renderMessageText?: ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
   toolRegistry: ToolRegistry;
+  /** A completed cluster of a still-RUNNING turn (not the live tail) folds
+      behind a neutral chip — the one place activity without an outcome still
+      folds, bounding the DOM of days-long autonomous turns. */
+  foldLiveCluster?: boolean;
   /** Rendering inside an expanded turn group: the outer chip already owns the
       failure surface, so nested chips stay tinted but quiet (no repeated
       failure text, no auto-open) — one loud error, N calm sub-expands. */
@@ -362,7 +368,7 @@ function TimelineGroupView({
 }) {
   switch (group.kind) {
     case "activity":
-      return group.outcome ? (
+      return group.outcome || (foldLiveCluster && clusterIsSettled(group)) ? (
         <TurnSummary
           items={group.items}
           outcome={group.outcome}
@@ -417,6 +423,30 @@ function timelineGroupKey(group: TimelineGroup): string {
   }
 }
 
+/** The agent has moved PAST a cluster only when what follows is more agent
+    progress — new activity, a settled turn, or narration. A waiting notice
+    (approval pause), a pending queued message, a goal pill, or nothing at all
+    do NOT advance the story, and folding on them would hide exactly the work
+    the reader needs in view. */
+function isAgentProgress(next: TimelineGroup | undefined): boolean {
+  if (!next) {
+    return false;
+  }
+  return next.kind === "activity" || next.kind === "turn" || (next.kind === "item" && next.item.kind === "agent-message");
+}
+
+/** No item still running or streaming — the only state safe to fold live.
+    Position alone is a broken proxy: a pending queued message (or any trailing
+    item) can sit after the ACTIVE cluster, which must never fold mid-work. */
+function clusterIsSettled(group: Extract<TimelineGroup, { kind: "activity" }>): boolean {
+  return group.items.every((item) => {
+    if (item.kind === "reasoning") {
+      return !item.streaming;
+    }
+    return item.status !== "running";
+  });
+}
+
 function flattenActivityItems(groups: TimelineGroup[]): ActivityItem[] {
   const items: ActivityItem[] = [];
   for (const group of groups) {
@@ -596,7 +626,17 @@ function NoticeRow({ item }: { item: NoticeItem }) {
   return (
     <div className={cn(enter && "animate-og-enter", "flex items-start gap-2.5 rounded-og-md border px-3.5 py-2.5 text-sm", tone)} role="status">
       <TriangleAlertIcon className={cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60")} />
-      <span className="min-w-0 whitespace-pre-wrap break-words">{item.text}</span>
+      <span className="min-w-0 flex-1 whitespace-pre-wrap break-words">{item.text}</span>
+      {item.action ? (
+        <a
+          className="shrink-0 rounded-og-sm border border-current/25 px-2 py-1 text-xs font-medium hover:bg-current/10"
+          href={item.action.url}
+          rel="noreferrer"
+          target="_blank"
+        >
+          {item.action.label}
+        </a>
+      ) : null}
     </div>
   );
 }

package/src/timeline/projection.ts

@@ -262,7 +262,10 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       }
 
       case "sandbox.command.output.delta": {
-        const text = typeof payload.text === "string" ? payload.text : typeof payload.output === "string" ? payload.output : "";
+        // `chunk` is the canonical wire field; text/output are legacy shapes.
+        const text = typeof payload.chunk === "string"
+          ? payload.chunk
+          : typeof payload.text === "string" ? payload.text : typeof payload.output === "string" ? payload.output : "";
         if (!text) {
           break;
         }
@@ -310,6 +313,20 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         break;
       }
 
+      case "tool.auth_needed": {
+        closeStreamingTail();
+        const authorizationUrl = typeof payload.authorizationUrl === "string" ? payload.authorizationUrl : null;
+        items.push({
+          kind: "notice",
+          id: event.id,
+          tone: "waiting",
+          text: authNeededNoticeText(payload),
+          ...(authorizationUrl ? { action: { label: "Connect", url: authorizationUrl } } : {}),
+          occurredAt: event.occurredAt,
+        });
+        break;
+      }
+
       case "turn.completed": {
         finalizeOpen(turnId);
         items.push(turnEndItem(event, "complete", null));
@@ -812,6 +829,22 @@ function goalText(payload: Record<string, unknown>): string | null {
   return null;
 }
 
+function authNeededNoticeText(payload: Record<string, unknown>): string {
+  const provider =
+    typeof payload.providerDomain === "string" && payload.providerDomain.trim().length > 0 ? payload.providerDomain.trim() : "This service";
+  const scopes = Array.isArray(payload.scopes)
+    ? payload.scopes.filter((scope): scope is string => typeof scope === "string" && scope.trim().length > 0)
+    : [];
+
+  if (payload.reason === "insufficient_scope") {
+    return scopes.length > 0 ? `${provider} needs additional access (${scopes.join(", ")}).` : `${provider} needs additional access.`;
+  }
+  if (payload.reason === "expired" || payload.reason === "refresh_failed") {
+    return `${provider} needs to be reconnected.`;
+  }
+  return `${provider} needs a connection.`;
+}
+
 function reasoningText(payload: unknown): string {
   const record = asRecord(payload);
   if (typeof record.text === "string") {

package/src/timeline/turn-summary.tsx

@@ -24,7 +24,12 @@ export type { TurnOutcome } from "./types";
 export type TurnSummaryProps = {
   /** The activity items in the turn (used only to compute the facet counts). */
   items: ActivityItem[];
-  outcome: TurnOutcome;
+  /**
+   * 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.
+   */
+  outcome?: TurnOutcome | undefined;
   /** A short failure reason shown inline on a failed chip (never hidden). */
   failureText?: string | undefined;
   /** Elapsed turn duration; shown as a trailing facet when at least 1s. */
@@ -78,8 +83,10 @@ export function TurnSummary({ items, outcome, failureText, durationMs, defaultOp
             <TriangleAlertIcon className="size-3" />
           ) : outcome === "cancelled" ? (
             <CircleSlashIcon className="size-3" />
-          ) : (
+          ) : outcome === "complete" ? (
             <CheckIcon className="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">

package/src/timeline/types.ts

@@ -116,6 +116,7 @@ export type NoticeItem = {
   id: string;
   tone: "waiting" | "cancelled" | "failed";
   text: string;
+  action?: { label: string; url: string };
   occurredAt: string;
 };