@opengeni/react 3.8.0-canary.0 → 4.0.1-canary.0

package/src/timeline/projection.ts

@@ -135,6 +135,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
   const ordered = orderTimelineEvents(events, prescan);
   const pendingWaitOutcomeByTurn = new Map<string | null, PendingWaitOutcome>();
   const latestAgentResponseByTurn = new Map<string | null, TrackedAgentResponse>();
+  const identifiedMessages = new Map<string, AgentMessageItem>();
   const humanInputRequests = humanInputRequestsById(events);
   const humanInputToolCallIds = new Set(
     [...humanInputRequests.values()]
@@ -157,6 +158,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
     mode = 0,
     explicitStartedAt?: string,
     explicitId?: string,
+    blockedReason?: StartupPhaseItem["blockedReason"],
   ): void => {
     const key = `${startupTurnId}:${phase}`;
     const priorState = startupPhases.get(key);
@@ -183,6 +185,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           ? elapsedDurationMs(open.startedAt, startupEvent.occurredAt)
           : Math.max(0, duration);
       open.outcome = outcome ?? open.outcome;
+      open.blockedReason = blockedReason;
       return;
     }
     const running = status === "running";
@@ -201,6 +204,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         completedAt: running ? null : startupEvent.occurredAt,
         durationMs,
         outcome,
+        blockedReason,
         occurredAt: startedAt,
       } satisfies Partial<StartupPhaseItem>);
       startupPhases.set(key, [prior, startupAttemptId, startupRecoveryRevision]);
@@ -216,6 +220,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       completedAt: running ? null : startupEvent.occurredAt,
       durationMs,
       outcome,
+      blockedReason,
       occurredAt: startedAt,
     };
     items.push(item);
@@ -408,8 +413,43 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         if (!text) {
           break;
         }
+        const messageId = stringValue(payload.messageId);
+        const messageKey = messageId ? JSON.stringify([turnId, messageId]) : null;
+        const identified = messageKey ? identifiedMessages.get(messageKey) : undefined;
+        if (identified) {
+          if (identified.annotationSource?.eventType !== "agent.message.completed") {
+            identified.text += text;
+            rememberAgentResponse(turnId, identified, false);
+          }
+          break;
+        }
         const open = last();
-        if (open?.kind === "agent-message" && open.streaming && open.turnId === turnId) {
+        if (!messageKey && open?.kind === "tool-call" && open.status === "running") {
+          const previous = latestAgentResponseByTurn.get(turnId);
+          const previousIndex = previous ? items.indexOf(previous.item) : -1;
+          if (
+            previous &&
+            !previous.completed &&
+            previousIndex >= 0 &&
+            items
+              .slice(previousIndex + 1)
+              .every(
+                (item) =>
+                  item.kind === "tool-call" && item.turnId === turnId && item.status === "running",
+              )
+          ) {
+            // Legacy deltas have no provider message identity. Tool creation
+            // alone is not a text boundary; completed output still is.
+            previous.item.text += text;
+            break;
+          }
+        }
+        if (
+          !messageKey &&
+          open?.kind === "agent-message" &&
+          open.streaming &&
+          open.turnId === turnId
+        ) {
           open.text += text;
           rememberAgentResponse(turnId, open, false);
           break;
@@ -424,18 +464,21 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           occurredAt: event.occurredAt,
         };
         items.push(item);
+        if (messageKey) identifiedMessages.set(messageKey, item);
         rememberAgentResponse(turnId, item, false);
         break;
       }
 
       case "agent.message.completed": {
         const text = stringValue(payload.text);
+        const messageId = stringValue(payload.messageId);
+        const messageKey = messageId ? JSON.stringify([turnId, messageId]) : null;
         const phase = assistantMessagePhase(payload.phase);
         // Reconcile the most recent same-turn agent message — even when
         // activity (tool calls, reasoning) landed after its deltas — so the
         // completed text never duplicates the streamed one.
-        let openIndex = -1;
-        for (let index = items.length - 1; index >= 0; index -= 1) {
+        let openIndex = messageKey ? items.indexOf(identifiedMessages.get(messageKey)!) : -1;
+        for (let index = messageKey ? -1 : items.length - 1; index >= 0; index -= 1) {
           const candidate = items[index];
           if (candidate?.kind === "agent-message" && candidate.turnId === turnId) {
             openIndex = index;
@@ -447,10 +490,15 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           candidate?.kind === "agent-message" ? candidate : undefined;
         if (
           open &&
-          (open.streaming || !open.text || text === open.text || text.startsWith(open.text))
+          (messageKey ||
+            open.streaming ||
+            !open.text ||
+            text === open.text ||
+            text.startsWith(open.text))
         ) {
-          // The completed text is authoritative when it extends what streamed.
-          if (!open.text || (text && text.startsWith(open.text))) {
+          // Identity makes the final text authoritative even if it corrects the
+          // draft; legacy receipts still require an extension match.
+          if (!open.text || (text && (messageKey || text.startsWith(open.text)))) {
             open.text = text || open.text;
           }
           open.streaming = false;
@@ -502,6 +550,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
             },
           };
           items.push(item);
+          if (messageKey) identifiedMessages.set(messageKey, item);
           rememberAgentResponse(turnId, item, true);
         }
         break;
@@ -693,7 +742,18 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
         const startupPhase = startupPhaseForSandboxOperation(name);
         if (startupPhase) {
           closeStreamingTail();
-          settleStartupPhase(startupPhase, status, numberOrNull(payload.durationMs), origin);
+          settleStartupPhase(
+            startupPhase,
+            status,
+            numberOrNull(payload.durationMs),
+            origin,
+            0,
+            undefined,
+            undefined,
+            status === "cancelled" && payload.failureCode === "rotation_in_progress"
+              ? "rotation_in_progress"
+              : undefined,
+          );
           break;
         }
         // Routine per-turn platform plumbing that runs before EVERY turn to
@@ -1039,11 +1099,17 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           }
         }
         finalizeOpen(turnId, "complete", event.occurredAt);
-        items.push(turnEndItem(event, "complete", null));
+        const completedTurn = turnEndItem(event, "complete", null);
+        items.push(completedTurn);
         const hasCompletedFinalResponse =
           latestAgentResponse?.completed === true &&
           latestAgentResponse.item.phase !== "commentary" &&
           Boolean(visibleTrackedResponse);
+        if (!hasAuthoritativeFinalOutput && pendingWaitOutcome) {
+          // Preserve existing prose, including delta-only streams, when a
+          // trailing wait yields without a terminal output receipt.
+          completedTurn.preserveWaitResponse = true;
+        }
         if (!hasAuthoritativeFinalOutput && !hasCompletedFinalResponse && pendingWaitOutcome) {
           items.push({
             kind: "notice",
@@ -1808,7 +1874,31 @@ function foldSettledTurn(groups: TimelineGroup[], turnEnd: TurnEndItem): void {
     return;
   }
 
-  const finalMessage = extractFinalAgentMessage(collected, turnEnd);
+  // Resolve only inside this turn's collected suffix. A user/machine-input
+  // boundary or an interleaved foreign turn must never donate its answer.
+  const waitMessages = turnEnd.preserveWaitResponse
+    ? collected.filter(
+        (group): group is Extract<TimelineGroup, { kind: "item" }> =>
+          group.kind === "item" &&
+          group.item.kind === "agent-message" &&
+          !group.item.streaming &&
+          group.item.text.trim().length > 0 &&
+          belongsToTurn(group.item, turnEnd.turnId),
+      )
+    : [];
+  // A completed answer outranks later commentary. Otherwise use the latest
+  // visible existing prose, ignoring whitespace and opaque-only stream tails.
+  const waitResponse =
+    waitMessages
+      .slice()
+      .reverse()
+      .find(
+        (group) =>
+          group.item.kind === "agent-message" &&
+          group.item.phase !== "commentary" &&
+          group.item.annotationSource?.eventType === "agent.message.completed",
+      ) ?? waitMessages.at(-1);
+  const finalMessage = waitResponse ?? extractFinalAgentMessage(collected, turnEnd);
   const fallbackMessage =
     finalMessage || hasOrdinaryFinalAgentMessage(collected, turnEnd)
       ? null

package/src/timeline/types.ts

@@ -215,6 +215,7 @@ export type StartupPhaseItem = {
   durationMs: number | null;
   /** Sandbox origin and rig marker outcomes refine the settled label only. */
   outcome: "created" | "restored" | "resumed" | "skipped" | null;
+  blockedReason?: "rotation_in_progress" | undefined;
   occurredAt: string;
 };
 
@@ -451,6 +452,8 @@ export type TurnOutcome = "complete" | "failed" | "cancelled";
 
 export type TurnEndItem = {
   kind: "turn-end";
+  /** Keep an existing answer visible when a recorded input wait ends without final output. */
+  preserveWaitResponse?: true;
   id: string;
   turnId: string | null;
   outcome: TurnOutcome;

package/styles/compiled.css

@@ -469,6 +469,7 @@
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
+    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --blur-sm: 8px;
     --blur-md: 12px;
@@ -1004,6 +1005,9 @@
 :where(.og-root).z-\[1\],:where(.og-root) .z-\[1\] {
     z-index: 1;
   }
+:where(.og-root).z-\[35\],:where(.og-root) .z-\[35\] {
+    z-index: 35;
+  }
 :where(.og-root).z-\[75\],:where(.og-root) .z-\[75\] {
     z-index: 75;
   }
@@ -1139,6 +1143,9 @@
 :where(.og-root).mr-2,:where(.og-root) .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+:where(.og-root).mb-0\.5,:where(.og-root) .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
 :where(.og-root).mb-1,:where(.og-root) .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1199,6 +1206,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+:where(.og-root).line-clamp-4,:where(.og-root) .line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
 :where(.og-root).block,:where(.og-root) .block {
     display: block;
   }
@@ -1361,9 +1374,6 @@
 :where(.og-root).max-h-20,:where(.og-root) .max-h-20 {
     max-height: calc(var(--spacing) * 20);
   }
-:where(.og-root).max-h-28,:where(.og-root) .max-h-28 {
-    max-height: calc(var(--spacing) * 28);
-  }
 :where(.og-root).max-h-40,:where(.og-root) .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
@@ -1403,12 +1413,12 @@
 :where(.og-root).max-h-\[min\(28rem\,50dvh\)\],:where(.og-root) .max-h-\[min\(28rem\,50dvh\)\] {
     max-height: min(28rem, 50dvh);
   }
+:where(.og-root).max-h-\[min\(28rem\,55vh\)\],:where(.og-root) .max-h-\[min\(28rem\,55vh\)\] {
+    max-height: min(28rem, 55vh);
+  }
 :where(.og-root).max-h-\[min\(30rem\,60dvh\)\],:where(.og-root) .max-h-\[min\(30rem\,60dvh\)\] {
     max-height: min(30rem, 60dvh);
   }
-:where(.og-root).max-h-\[min\(32rem\,70vh\)\],:where(.og-root) .max-h-\[min\(32rem\,70vh\)\] {
-    max-height: min(32rem, 70vh);
-  }
 :where(.og-root).max-h-\[min\(32rem\,var\(--radix-popover-content-available-height\)\)\],:where(.og-root) .max-h-\[min\(32rem\,var\(--radix-popover-content-available-height\)\)\] {
     max-height: min(32rem, var(--radix-popover-content-available-height));
   }
@@ -1589,6 +1599,9 @@
 :where(.og-root).max-w-\[calc\(100vw-16px\)\],:where(.og-root) .max-w-\[calc\(100vw-16px\)\] {
     max-width: calc(100vw - 16px);
   }
+:where(.og-root).max-w-\[min\(18rem\,calc\(100vw-1\.5rem\)\)\],:where(.og-root) .max-w-\[min\(18rem\,calc\(100vw-1\.5rem\)\)\] {
+    max-width: min(18rem, calc(100vw - 1.5rem));
+  }
 :where(.og-root).max-w-full,:where(.og-root) .max-w-full {
     max-width: 100%;
   }
@@ -1607,6 +1620,9 @@
 :where(.og-root).min-w-0,:where(.og-root) .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+:where(.og-root).min-w-4,:where(.og-root) .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
 :where(.og-root).min-w-10,:where(.og-root) .min-w-10 {
     min-width: calc(var(--spacing) * 10);
   }
@@ -1669,6 +1685,10 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+:where(.og-root).-translate-y-\[110\%\],:where(.og-root) .-translate-y-\[110\%\] {
+    --tw-translate-y: calc(110% * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
 :where(.og-root).-translate-y-full,:where(.og-root) .-translate-y-full {
     --tw-translate-y: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1993,6 +2013,9 @@
 :where(.og-root).rounded,:where(.og-root) .rounded {
     border-radius: 0.25rem;
   }
+:where(.og-root).rounded-2xl,:where(.og-root) .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
 :where(.og-root).rounded-\[2px\],:where(.og-root) .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -2367,6 +2390,12 @@
       background-color: color-mix(in oklab, var(--_og-color-accent-soft) 45%, transparent);
     }
   }
+:where(.og-root).bg-og-accent-soft\/50,:where(.og-root) .bg-og-accent-soft\/50 {
+    background-color: var(--_og-color-accent-soft);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--_og-color-accent-soft) 50%, transparent);
+    }
+  }
 :where(.og-root).bg-og-accent\/10,:where(.og-root) .bg-og-accent\/10 {
     background-color: var(--og-color-accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2379,6 +2408,12 @@
       background-color: color-mix(in oklab, var(--og-color-accent) 15%, transparent);
     }
   }
+:where(.og-root).bg-og-accent\/55,:where(.og-root) .bg-og-accent\/55 {
+    background-color: var(--og-color-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--og-color-accent) 55%, transparent);
+    }
+  }
 :where(.og-root).bg-og-bg,:where(.og-root) .bg-og-bg {
     background-color: var(--og-color-bg);
   }
@@ -2921,6 +2956,9 @@
 :where(.og-root).pl-2,:where(.og-root) .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
+:where(.og-root).pl-2\.5,:where(.og-root) .pl-2\.5 {
+    padding-left: calc(var(--spacing) * 2.5);
+  }
 :where(.og-root).pl-3,:where(.og-root) .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -3368,6 +3406,12 @@
 :where(.og-root).ring-og-accent,:where(.og-root) .ring-og-accent {
     --tw-ring-color: var(--og-color-accent);
   }
+:where(.og-root).ring-og-accent-fg\/35,:where(.og-root) .ring-og-accent-fg\/35 {
+    --tw-ring-color: var(--og-color-accent-fg);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--og-color-accent-fg) 35%, transparent);
+    }
+  }
 :where(.og-root).ring-og-accent\/45,:where(.og-root) .ring-og-accent\/45 {
     --tw-ring-color: var(--og-color-accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3807,6 +3851,12 @@
       position: absolute;
     }
   }
+:where(.og-root).after\:-inset-2,:where(.og-root) .after\:-inset-2 {
+    &::after {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * -2);
+    }
+  }
 :where(.og-root).after\:inset-x-0,:where(.og-root) .after\:inset-x-0 {
     &::after {
       content: var(--tw-content);
@@ -3912,6 +3962,12 @@
       background-color: var(--_og-color-accent-soft);
     }
   }
+:where(.og-root).after\:content-\[\'\'\],:where(.og-root) .after\:content-\[\'\'\] {
+    &::after {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
 :where(.og-root).first\:mt-0,:where(.og-root) .first\:mt-0 {
     &:first-child {
       margin-top: calc(var(--spacing) * 0);
@@ -4006,6 +4062,16 @@
       }
     }
   }
+:where(.og-root).hover\:border-og-accent\/40,:where(.og-root) .hover\:border-og-accent\/40 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--og-color-accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--og-color-accent) 40%, transparent);
+        }
+      }
+    }
+  }
 :where(.og-root).hover\:border-og-border,:where(.og-root) .hover\:border-og-border {
     &:hover {
       @media (hover: hover) {
@@ -4397,23 +4463,12 @@
       opacity: 100%;
     }
   }
-:where(.og-root).focus\:ring-1,:where(.og-root) .focus\:ring-1 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
 :where(.og-root).focus\:ring-2,:where(.og-root) .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-:where(.og-root).focus\:ring-og-accent,:where(.og-root) .focus\:ring-og-accent {
-    &:focus {
-      --tw-ring-color: var(--og-color-accent);
-    }
-  }
 :where(.og-root).focus\:ring-og-accent-soft,:where(.og-root) .focus\:ring-og-accent-soft {
     &:focus {
       --tw-ring-color: var(--_og-color-accent-soft);
@@ -4468,6 +4523,12 @@
       opacity: 100%;
     }
   }
+:where(.og-root).focus-visible\:ring-0,:where(.og-root) .focus-visible\:ring-0 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
 :where(.og-root).focus-visible\:ring-2,:where(.og-root) .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -5080,11 +5141,6 @@
       padding-inline: calc(var(--spacing) * 3);
     }
   }
-:where(.og-root).sm\:px-4,:where(.og-root) .sm\:px-4 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
-  }
 :where(.og-root).sm\:px-6,:where(.og-root) .sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -5259,6 +5315,14 @@
       opacity: 100%;
     }
   }
+:where(.og-root).pointer-coarse\:after\:-inset-2\.5,:where(.og-root) .pointer-coarse\:after\:-inset-2\.5 {
+    @media (pointer: coarse) {
+      &::after {
+        content: var(--tw-content);
+        inset: calc(var(--spacing) * -2.5);
+      }
+    }
+  }
 :where(.og-root).\[\&_strong\]\:text-og-fg-muted,:where(.og-root) .\[\&_strong\]\:text-og-fg-muted {
     & strong {
       color: var(--og-color-fg-muted);

package/dist/chat.d.ts

@@ -1,37 +0,0 @@
-import { type ReactNode } from "react";
-/**
- * Chat component that talks only to the host's `createChatHandler` endpoint:
- * it restores the conversation with `GET` on mount, POSTs `{ message }`
- * (native format), renders the streamed reply, shows a card for a pending
- * approval or human-input request, and answers it through
- * `${handlerUrl}/respond`. No provider or OpenGeni credentials in the browser.
- */
-export type OpenGeniChatMessage = {
-    id: string;
-    role: "user" | "assistant";
-    text: string;
-    streaming: boolean;
-    /** Tool names the agent used while producing this reply. */
-    tools: string[];
-};
-export type OpenGeniChatProps = {
-    /** The host endpoint served by `createChatHandler`. */
-    handlerUrl: string;
-    /** Sent as the `x-opengeni-conversation` header so the host's `resolve` can pick it up. */
-    conversation?: string | undefined;
-    /**
-     * Host authentication headers, resolved on each host render. Changed values
-     * reset the chat. Re-render the host when a callback's credentials change.
-     */
-    headers?: Record<string, string> | (() => Record<string, string>) | undefined;
-    /**
-     * Stable authenticated user/tenant identity. Change this on sign-in, sign-out
-     * or tenant switches when authentication uses cookies or otherwise changes
-     * without changing the headers. This resets local state; it is not sent.
-     */
-    authKey?: string | undefined;
-    placeholder?: string | undefined;
-    className?: string | undefined;
-    renderMessage?: ((message: OpenGeniChatMessage) => ReactNode) | undefined;
-};
-export declare function OpenGeniChat(props: OpenGeniChatProps): import("react").JSX.Element;