@opengeni/react 0.9.1 → 0.12.0

package/dist/machines.js

@@ -13,7 +13,7 @@ import {
   SharedMachineDisclosure,
   connectionStatusForState,
   useMachines
-} from "./chunk-5C7RGAWA.js";
+} from "./chunk-5TIXRCSI.js";
 export {
   CONNECTION_STATUS_META,
   ConnectionDot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "0.9.1",
+  "version": "0.12.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/index.ts

@@ -91,6 +91,7 @@ export type { PendingApproval } from "./approvals";
 // Timeline projection
 export {
   buildTimeline,
+  creditExhaustedFromEvents,
   extractSessionRef,
   groupTimeline,
   sessionStatusFromEvents,
@@ -242,4 +243,4 @@ export { xtermThemeFromTokens } from "./lib/xterm-theme";
 
 // Utilities
 export { cn } from "./lib/cn";
-export { formatBytes, formatRelativeTime, humanizeFailureReason, stringifyPayload, truncate, tryParseJson } from "./lib/format";
+export { CREDIT_EXHAUSTION_MESSAGE, formatBytes, formatRelativeTime, humanizeFailureReason, isCreditExhaustion, stringifyPayload, truncate, tryParseJson } from "./lib/format";

package/src/lib/format.ts

@@ -83,19 +83,57 @@ export function tryParseJson(text: string): unknown {
   }
 }
 
+/**
+ * The canonical credit-death sentence. Credit exhaustion is the one failure a
+ * user can fix themselves — the copy must say what happened (empty balance),
+ * what to do (add credits), and what is safe (nothing was lost). Crucially it
+ * must NOT say "send a message to revive": a revive turn burns credits the
+ * workspace no longer has.
+ */
+export const CREDIT_EXHAUSTION_MESSAGE =
+  "Out of OpenGeni credits — this workspace's balance is empty. Add credits to continue; the conversation is preserved.";
+
+/**
+ * Does this failure/completion payload (or raw error string) mean the
+ * workspace ran out of OpenGeni credits? Matches the engine's
+ * "insufficient OpenGeni credits" text (case-insensitive, substring — it
+ * arrives both bare and wrapped in "Activity task failed: …") and the
+ * budget-exhausted segment limit the engine stamps on a turn it ended early.
+ */
+export function isCreditExhaustion(
+  input: { error?: string | null; detail?: string | null; segmentLimit?: string | null } | string,
+): boolean {
+  if (typeof input === "string") {
+    return input.toLowerCase().includes("insufficient opengeni credits");
+  }
+  if (input.segmentLimit === "budget_exhausted") {
+    return true;
+  }
+  for (const text of [input.error, input.detail]) {
+    if (typeof text === "string" && text.toLowerCase().includes("insufficient opengeni credits")) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Humanize engine/provider failure text before it reaches the timeline or a
  * failure banner. Raw provider errors leak the wrong audience's instructions —
  * "Incorrect API key … find your API key at platform.openai.com" tells a
  * managed-deployment USER to fix credentials only an OPERATOR controls (and is
- * flatly wrong for Azure or subscription-backed engines). Auth and quota
- * failures collapse to one neutral, honest sentence; every other reason passes
- * through untouched. Raw payloads stay available in the debug surfaces.
+ * flatly wrong for Azure or subscription-backed engines). Auth, quota, and
+ * credit-exhaustion failures collapse to one neutral, honest sentence; every
+ * other reason passes through untouched. Raw payloads stay available in the
+ * debug surfaces.
  */
 export function humanizeFailureReason(reason: string | null): string | null {
   if (!reason) {
     return reason;
   }
+  if (isCreditExhaustion(reason)) {
+    return CREDIT_EXHAUSTION_MESSAGE;
+  }
   const normalized = reason.toLowerCase();
   const authFailure =
     normalized.includes("incorrect api key") ||

package/src/timeline/index.ts

@@ -16,7 +16,7 @@
    -------------------------------------------------------------------------- */
 
 // projection
-export { buildTimeline, extractSessionRef, groupTimeline, sessionStatusFromEvents, toolDisplayName } from "./projection";
+export { buildTimeline, creditExhaustedFromEvents, extractSessionRef, groupTimeline, sessionStatusFromEvents, toolDisplayName } from "./projection";
 
 // item types
 export type {

package/src/timeline/projection.ts

@@ -1,5 +1,5 @@
 import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
-import { humanizeFailureReason, tryParseJson } from "../lib/format";
+import { CREDIT_EXHAUSTION_MESSAGE, humanizeFailureReason, isCreditExhaustion, tryParseJson } from "../lib/format";
 import type {
   AgentMessageItem,
   ActivityItem,
@@ -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,7 +313,39 @@ 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": {
+        // Credit exhaustion arrives as a NOMINALLY completed turn (`detail:
+        // "insufficient OpenGeni credits"`, `segmentLimit: "budget_exhausted"`)
+        // — the engine ended the segment early, it did not finish the work.
+        // Rendering it as a clean "complete" turn is a lie that leaves the
+        // session looking healthy while every future turn silently dies, so it
+        // projects exactly like a failed turn plus an explicit notice.
+        if (isCreditExhaustionPayload(payload)) {
+          finalizeOpen(turnId);
+          items.push(turnEndItem(event, "failed", CREDIT_EXHAUSTION_MESSAGE));
+          items.push({
+            kind: "notice",
+            id: event.id,
+            tone: "failed",
+            text: CREDIT_EXHAUSTION_MESSAGE,
+            occurredAt: event.occurredAt,
+          });
+          break;
+        }
         finalizeOpen(turnId);
         items.push(turnEndItem(event, "complete", null));
         break;
@@ -318,7 +353,10 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
 
       case "turn.failed": {
         const hadActivity = hasTurnActivity(items, turnId);
-        const failureText = failureMessage(payload);
+        // Credit death can hide behind fields `failureMessage` doesn't read
+        // (detail/segmentLimit), so classify the whole payload before falling
+        // back to the generic error/message extraction.
+        const failureText = isCreditExhaustionPayload(payload) ? CREDIT_EXHAUSTION_MESSAGE : failureMessage(payload);
         // The TURN failed — the in-flight items did not. Chip doctrine: red is
         // spent once, on the turn-level outcome. Items caught mid-flight read
         // as calm "interrupted" (same as turn.cancelled); an item that itself
@@ -383,6 +421,33 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
   return items;
 }
 
+/** The turn-end payload shape, as `isCreditExhaustion` wants it. */
+function isCreditExhaustionPayload(payload: Record<string, unknown>): boolean {
+  return isCreditExhaustion({
+    error: typeof payload.error === "string" ? payload.error : null,
+    detail: typeof payload.detail === "string" ? payload.detail : null,
+    segmentLimit: typeof payload.segmentLimit === "string" ? payload.segmentLimit : null,
+  });
+}
+
+/**
+ * Whether the session's most recent turn ended in credit exhaustion — the
+ * terminal credit state apps key their "add credits" affordances on. Derived
+ * from the LAST turn-end event (completed/failed/cancelled): a later turn that
+ * settles any other way (someone topped up and kept working) clears it.
+ */
+export function creditExhaustedFromEvents(events: SessionEvent[]): boolean {
+  const ordered = [...events].sort((a, b) => a.sequence - b.sequence);
+  for (let index = ordered.length - 1; index >= 0; index -= 1) {
+    const event = ordered[index];
+    if (event?.type !== "turn.completed" && event?.type !== "turn.failed" && event?.type !== "turn.cancelled") {
+      continue;
+    }
+    return isCreditExhaustionPayload(asRecord(event.payload));
+  }
+  return false;
+}
+
 /** The latest session status carried in the event log, if any. */
 export function sessionStatusFromEvents(events: SessionEvent[]): SessionStatus | null {
   for (let index = events.length - 1; index >= 0; index -= 1) {
@@ -812,6 +877,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;
 };