@opengeni/react 0.48.0 → 0.57.0

package/src/components/machine-input-display.ts

@@ -6,6 +6,7 @@ export const MACHINE_INPUT_META: Record<MachineInputMember["kind"], string> = {
   agent_message: "Agent update",
   agent_steer_instruction: "Agent direction",
   child_terminal_result: "Agent finished",
+  media_generation_result: "Video update",
 };
 
 /**
@@ -32,6 +33,8 @@ export function machineInputBatchLabel(members: readonly MachineInputMember[]):
         return n === 1 ? "Agent update" : `${n} agent updates`;
       case "agent_steer_instruction":
         return n === 1 ? "Agent direction" : `${n} agent directions`;
+      case "media_generation_result":
+        return n === 1 ? "Video ready" : `${n} video updates`;
     }
   }
   const parts = [...counts.entries()].map(([kind, count]) => {

package/src/components/machines/machine-detail.tsx

@@ -95,7 +95,7 @@ export function MachineDetail({
               data-remove-machine
               aria-label={`Remove machine ${machine.name}`}
               onClick={() => onRemove(machine)}
-              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
+              className="inline-flex min-h-9 items-center gap-1.5 rounded-og-sm border border-og-status-failed/40 px-2.5 py-1 font-medium text-og-xs text-og-status-failed transition-colors hover:bg-og-status-failed/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-status-failed/50 pointer-coarse:min-h-11"
             >
               <Trash2Icon className="size-3.5" aria-hidden />
               <span className="hidden sm:inline">Remove machine</span>

package/src/components/message-timeline.tsx

@@ -1,4 +1,9 @@
-import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
+import type {
+  DraftTimelineAnnotation,
+  MediaGenerationResult,
+  SessionEvent,
+  SessionStatus,
+} from "@opengeni/sdk";
 import {
   ArrowDownIcon,
   ArrowRightIcon,
@@ -23,6 +28,8 @@ import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
   Component,
+  Suspense,
+  lazy,
   memo,
   useCallback,
   useEffect,
@@ -68,7 +75,10 @@ import {
   type NoticeItem,
   type TimelineGroup,
   type TimelineItem,
+  type TimelineAnnotationSourceDescriptor,
+  type RetainedArtifactLoader,
   type RetainedScreenshotLoader,
+  type VideoArtifactPlaybackLoader,
   type ToolRegistry,
   type TurnSummaryOptions,
   type UserMessageItem,
@@ -81,6 +91,7 @@ import {
   useTurnSettleOpen,
 } from "../timeline";
 import { CopyHoverFrame } from "./copy-button";
+import { GeneratedVideoPlayer } from "./generated-video-player";
 import {
   MACHINE_INPUT_META,
   cleanMachineInputSummary,
@@ -92,8 +103,11 @@ import { SESSION_STATUS_META, StatusDot } from "./session-status";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
 import { SeenActivityIdsProvider } from "../timeline/seen-activity-ids";
+import { TimelineAnnotationsChip } from "./timeline-annotations";
 import { TooltipProvider } from "./tooltip";
 
+const TimelineAnnotationSelection = lazy(() => import("./timeline-annotation-selection"));
+
 export type MessageTimelineProps = {
   /** Raw session events (projected internally) … */
   events?: SessionEvent[] | undefined;
@@ -146,6 +160,10 @@ export type MessageTimelineProps = {
   toolRegistry?: ToolRegistry | undefined;
   /** Resolve opaque retained screenshot receipts through the authenticated host SDK. */
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  /** Resolve permanent generated-image receipts through the authenticated host SDK. */
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
+  /** Mint short-lived native playback sources for retained generated videos. */
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
   /**
    * Display name of the session's active compute target (Connected Machine or
    * cloud sandbox). When set, exec_command collapsed previews prefix `on {label}`.
@@ -155,6 +173,8 @@ export type MessageTimelineProps = {
   turnSummary?: TurnSummaryOptions | undefined;
   /** Follow new events when pinned to the bottom. Defaults to true. */
   autoFollow?: boolean | undefined;
+  /** Capture a same-row text selection into the host's canonical composer draft. */
+  onAnnotate?: ((annotation: DraftTimelineAnnotation) => void) | undefined;
   /** Older durable history exists above the current window (see useSessionEvents). */
   hasOlder?: boolean | undefined;
   /** An older window is being fetched; shows the quiet top shimmer. */
@@ -292,9 +312,12 @@ export function MessageTimeline({
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
   loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   computeLabel = null,
   turnSummary,
   autoFollow = true,
+  onAnnotate,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -316,6 +339,20 @@ export function MessageTimeline({
     return projected.filter((item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item));
   }, [items, events, shouldRenderAuthNeeded]);
   const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const annotationSources = useMemo(() => {
+    const sources = new Map<string, TimelineAnnotationSourceDescriptor>();
+    for (const item of resolvedItems) {
+      if (
+        (item.kind === "user-message" ||
+          item.kind === "agent-message" ||
+          item.kind === "tool-call") &&
+        item.annotationSource
+      ) {
+        sources.set(item.annotationSource.eventId, item.annotationSource);
+      }
+    }
+    return sources;
+  }, [resolvedItems]);
   const groups = useStableTimelineGroupKeys(allGroups);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const topSentinelRef = useRef<HTMLDivElement | null>(null);
@@ -1282,6 +1319,15 @@ export function MessageTimeline({
             <EntranceAnimationProvider value={!bulkRender}>
               <TooltipProvider delayDuration={400}>
                 <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
+                  {onAnnotate ? (
+                    <Suspense fallback={null}>
+                      <TimelineAnnotationSelection
+                        rootRef={scrollRef}
+                        sources={annotationSources}
+                        onAnnotate={onAnnotate}
+                      />
+                    </Suspense>
+                  ) : null}
                   {/* Pinned: anchoring off so the tip-follow camera owns the motion.
           Unpinned: native scroll anchoring holds the reader's place. */}
                   <div
@@ -1346,6 +1392,8 @@ export function MessageTimeline({
                                 resolveProviderLogo,
                                 toolRegistry,
                                 loadRetainedScreenshot,
+                                loadRetainedArtifact,
+                                loadVideoArtifactPlayback,
                                 turnSummary,
                               ]}
                             >
@@ -1359,6 +1407,8 @@ export function MessageTimeline({
                                   resolveProviderLogo={resolveProviderLogo}
                                   toolRegistry={toolRegistry}
                                   loadRetainedScreenshot={loadRetainedScreenshot}
+                                  loadRetainedArtifact={loadRetainedArtifact}
+                                  loadVideoArtifactPlayback={loadVideoArtifactPlayback}
                                   turnSummary={turnSummary}
                                   foldLiveCluster={isAgentProgress(next)}
                                   trailingAgentText={trailingAgentTextAfterTurn(group, next)}
@@ -1703,6 +1753,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
   resolveProviderLogo,
   toolRegistry,
   loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   turnSummary,
   insideTurn = false,
   nestClusterChips = false,
@@ -1720,6 +1772,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   toolRegistry: ToolRegistry;
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
   turnSummary?: TurnSummaryOptions | undefined;
   /** 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
@@ -1754,13 +1808,16 @@ const TimelineGroupView = memo(function TimelineGroupView({
   const activityShouldFold =
     group.kind === "activity" &&
     Boolean(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
+  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
   // Latch live→folded so a top-level shell that was already mounted open can
   // start the settle beat without remounting bare rail → wrapper.
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
   const turnDefaultOpen =
     !insideTurn &&
     group.kind === "turn" &&
-    (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group));
+    (group.outcome === "failed" ||
+      timelineGroupContainsAuthNeeded(group) ||
+      containsGeneratedImage);
   // activity-* → turn-* remount: carry resting state so settleFold does not
   // re-open a chip the reader already watched collapse.
   if (group.kind === "turn" && foldMemory && !insideTurn) {
@@ -1785,7 +1842,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
         // settled closed pre-wrap was showing as a CHIP, so mounting it closed
         // is both the stable height and the honest state — force-opening it
         // was the "already-collapsed cluster auto-expands at the end" reopen.
-        const useNestedChip = nestClusterChips && activityShouldFold;
+        const useNestedChip = nestClusterChips && activityShouldFold && !containsGeneratedImage;
         if (!useNestedChip) {
           return (
             <ActivityRail
@@ -1794,6 +1851,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
               loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
               bare
             />
           );
@@ -1816,6 +1874,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
               loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
               bare
             />
           </TurnSummary>
@@ -1842,6 +1901,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
                 onMemoryClick={onMemoryClick}
                 toolRegistry={toolRegistry}
                 loadRetainedScreenshot={loadRetainedScreenshot}
+                loadRetainedArtifact={loadRetainedArtifact}
                 bare
               />
             </TurnRailFrame>
@@ -1869,6 +1929,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
               resolveProviderLogo,
               toolRegistry,
               loadRetainedScreenshot,
+              loadRetainedArtifact,
+              loadVideoArtifactPlayback,
               turnSummary,
             ]}
           >
@@ -1881,6 +1943,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
               resolveProviderLogo={resolveProviderLogo}
               toolRegistry={toolRegistry}
               loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
+              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
               turnSummary={turnSummary}
               insideTurn
               nestClusterChips={nestClusters}
@@ -1922,6 +1986,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
           onReconnect={onReconnect}
           resolveProviderLogo={resolveProviderLogo}
           onOpenSession={onOpenSession}
+          loadVideoArtifactPlayback={loadVideoArtifactPlayback}
         />
       );
   }
@@ -1985,6 +2050,20 @@ function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
   }
 }
 
+/** Generated images are primary user-visible output, not incidental activity. */
+function timelineGroupContainsGeneratedImage(group: TimelineGroup): boolean {
+  switch (group.kind) {
+    case "item":
+      return false;
+    case "activity":
+      return group.items.some(
+        (item) => item.kind === "tool-call" && item.name === "generate_image",
+      );
+    case "turn":
+      return group.groups.some(timelineGroupContainsGeneratedImage);
+  }
+}
+
 function timelineGroupItemIds(group: TimelineGroup): string[] {
   switch (group.kind) {
     case "item":
@@ -2156,6 +2235,7 @@ export function TimelineRow({
   onReconnect,
   resolveProviderLogo,
   onOpenSession,
+  loadVideoArtifactPlayback,
 }: {
   item: TimelineItem;
   renderMessageText?:
@@ -2164,6 +2244,7 @@ export function TimelineRow({
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   switch (item.kind) {
     case "user-message":
@@ -2177,7 +2258,9 @@ export function TimelineRow({
     case "goal":
       return <GoalRow item={item} />;
     case "machine-input-batch":
-      return <MachineInputBatchRow item={item} />;
+      return (
+        <MachineInputBatchRow item={item} loadVideoArtifactPlayback={loadVideoArtifactPlayback} />
+      );
     case "notice":
       return <NoticeRow item={item} />;
     case "context-compaction":
@@ -2297,25 +2380,71 @@ function UserMessageRow({
     | undefined;
 }) {
   const enter = useEntranceAnimation();
+  const deliveryLabel =
+    item.delivery?.state === "sending"
+      ? "Sending…"
+      : item.delivery?.state === "queued"
+        ? "Queued"
+        : item.delivery?.state === "failed"
+          ? "Not sent"
+          : null;
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
         <CopyHoverFrame
-          copyText={item.text}
+          copyText={
+            item.text ||
+            (item.annotations ?? [])
+              .map((annotation) => `${annotation.quote}\n${annotation.note}`)
+              .join("\n\n")
+          }
           label="Copy message"
           className="w-fit max-w-full min-w-0"
           trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
         >
           <div className="w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg">
-            {renderMessageText ? (
-              renderMessageText(item.text, item)
-            ) : (
-              <UserMessageBody messageId={item.id} text={item.text}>
-                <Markdown>{item.text}</Markdown>
-              </UserMessageBody>
-            )}
+            {item.text ? (
+              <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+                {renderMessageText ? (
+                  renderMessageText(item.text, item)
+                ) : (
+                  <UserMessageBody messageId={item.id} text={item.text}>
+                    <Markdown>{item.text}</Markdown>
+                  </UserMessageBody>
+                )}
+              </div>
+            ) : null}
+            {(item.annotations?.length ?? 0) > 0 ? (
+              <TimelineAnnotationsChip
+                annotations={item.annotations ?? []}
+                className={item.text ? "mt-2" : undefined}
+              />
+            ) : null}
           </div>
         </CopyHoverFrame>
+        {deliveryLabel ? (
+          <div className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-fg-subtle">
+            <span title={item.delivery?.error}>{deliveryLabel}</span>
+            {item.delivery?.state === "failed" && item.delivery.onRetry ? (
+              <button
+                type="button"
+                className="font-medium text-og-fg underline decoration-og-border underline-offset-2 hover:text-og-fg-strong"
+                onClick={item.delivery.onRetry}
+              >
+                Retry
+              </button>
+            ) : null}
+            {item.delivery?.state === "failed" && item.delivery.onRemove ? (
+              <button
+                type="button"
+                className="font-medium text-og-fg-subtle underline decoration-og-border underline-offset-2 hover:text-og-fg"
+                onClick={item.delivery.onRemove}
+              >
+                Remove
+              </button>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -2341,15 +2470,17 @@ function AgentMessageRow({
   // While streaming, copy is still useful (current text) but keep chrome calm —
   // stamp only after the message finishes (occurredAt tracks completion).
   return (
-    <CopyHoverFrame
-      copyText={item.text}
-      label="Copy message"
-      align="start"
-      className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}
-      trailing={item.streaming ? null : <MessageFooterTime occurredAt={item.occurredAt} />}
-    >
-      {body}
-    </CopyHoverFrame>
+    <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+      <CopyHoverFrame
+        copyText={item.text}
+        label="Copy message"
+        align="start"
+        className={cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg")}
+        trailing={item.streaming ? null : <MessageFooterTime occurredAt={item.occurredAt} />}
+      >
+        {body}
+      </CopyHoverFrame>
+    </div>
   );
 }
 
@@ -2599,10 +2730,24 @@ function GoalRow({ item }: { item: GoalItem }) {
   );
 }
 
-function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
+function MachineInputBatchRow({
+  item,
+  loadVideoArtifactPlayback,
+}: {
+  item: MachineInputBatchItem;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+}) {
   const enter = useEntranceAnimation();
   const label = machineInputBatchLabel(item.members);
   const single = item.members.length === 1 ? item.members[0]! : null;
+  if (single?.kind === "media_generation_result" && single.result) {
+    return (
+      <VideoGenerationResultRow
+        result={single.result}
+        loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+      />
+    );
+  }
   const singleSummary = single ? cleanMachineInputSummary(single.summary) : "";
   const showCollapsedSummary =
     single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
@@ -2626,7 +2771,11 @@ function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
         </summary>
         <div className="mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2">
           {item.members.map((member) => (
-            <MachineInputRow key={member.id} member={member} />
+            <MachineInputRow
+              key={member.id}
+              member={member}
+              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+            />
           ))}
         </div>
       </details>
@@ -2639,7 +2788,22 @@ function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
   );
 }
 
-function MachineInputRow({ member }: { member: MachineInputBatchItem["members"][number] }) {
+function MachineInputRow({
+  member,
+  loadVideoArtifactPlayback,
+}: {
+  member: MachineInputBatchItem["members"][number];
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+}) {
+  if (member.kind === "media_generation_result" && member.result) {
+    return (
+      <VideoGenerationResultRow
+        result={member.result}
+        loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+        compact
+      />
+    );
+  }
   const source = readableMachineInputSource(member.sourceId);
   const summary = cleanMachineInputSummary(member.summary);
   return (
@@ -2660,6 +2824,72 @@ function MachineInputRow({ member }: { member: MachineInputBatchItem["members"][
   );
 }
 
+function VideoGenerationResultRow({
+  result,
+  loadVideoArtifactPlayback,
+  compact = false,
+}: {
+  result: MediaGenerationResult;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+  compact?: boolean | undefined;
+}) {
+  const enter = useEntranceAnimation();
+  if (result.status !== "ready") {
+    return (
+      <div
+        className={cn(
+          enter && "animate-og-enter",
+          "mx-auto w-full max-w-lg rounded-og-md border border-og-status-failed/30 bg-og-status-failed/5 px-3.5 py-3",
+        )}
+      >
+        <div className="flex items-center gap-2 text-og-sm font-medium text-og-status-failed">
+          <XCircleIcon aria-hidden className="size-4" />
+          Video generation failed
+        </div>
+        <p className="mt-1 text-og-sm leading-5 text-og-fg-muted">{result.boundedPublicReason}</p>
+      </div>
+    );
+  }
+  const { receipt } = result;
+  const facts = receipt.video;
+  return (
+    <section
+      aria-label="Generated video"
+      className={cn(
+        enter && "animate-og-enter",
+        "mx-auto w-full max-w-2xl overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 shadow-sm",
+        compact && "max-w-lg",
+      )}
+    >
+      {loadVideoArtifactPlayback ? (
+        <GeneratedVideoPlayer
+          receipt={receipt}
+          loadPlaybackSource={loadVideoArtifactPlayback}
+          className="rounded-none border-0 shadow-none"
+        />
+      ) : (
+        <div className="flex aspect-video items-center justify-center bg-og-surface-2 text-og-fg-subtle">
+          <PlayIcon aria-hidden className="size-6" />
+        </div>
+      )}
+      <div className="flex items-center justify-between gap-4 px-3.5 py-2.5">
+        <div className="min-w-0">
+          <p className="text-og-sm font-medium text-og-fg">Generated video</p>
+          <p className="truncate text-og-xs text-og-fg-subtle">
+            {facts.width}×{facts.height} · {formatVideoDuration(facts.durationSeconds)}
+            {facts.hasAudio ? " · Audio" : ""}
+          </p>
+        </div>
+        <CheckCircle2Icon aria-label="Ready" className="size-4 shrink-0 text-og-status-success" />
+      </div>
+    </section>
+  );
+}
+
+function formatVideoDuration(seconds: number): string {
+  return `${Math.round(seconds * 10) / 10}s`;
+}
+
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
   const tone =
@@ -2725,14 +2955,32 @@ function AuthNeededRow({
   const enter = useEntranceAnimation();
   const [busy, setBusy] = useState(false);
   const [failed, setFailed] = useState(false);
+  const recommendation = item.capability ?? null;
   const provider =
-    item.serverId === "codex_apps" ? "Codex Apps" : providerLabel(item.providerDomain);
+    recommendation?.name ??
+    (item.serverId === "codex_apps" ? "Codex Apps" : providerLabel(item.providerDomain));
   const unavailable =
     item.reason === "personal_authority_unavailable" ||
     item.reason === "unsupported_auth" ||
     item.reason === "resource_scope_unavailable";
   const missing = item.reason === "missing_connection";
-  const actionLabel = missing ? "Connect" : "Reconnect";
+  const actionLabel = recommendation
+    ? recommendation.action === "connect"
+      ? "Connect"
+      : "Review"
+    : missing
+      ? "Connect"
+      : "Reconnect";
+  const title = recommendation
+    ? recommendation.action === "connect"
+      ? `Connect ${provider}`
+      : recommendation.action === "add_credentials"
+        ? `Set up ${provider}`
+        : `Enable ${provider}`
+    : unavailable
+      ? `${provider} tools unavailable`
+      : `${actionLabel} ${provider}`;
+  const reasonLine = recommendation?.rationale ?? authReasonLine(item.reason);
 
   const start = async () => {
     if (!onReconnect || busy) {
@@ -2761,10 +3009,18 @@ function AuthNeededRow({
             label={provider}
           />
           <div className="min-w-0">
-            <p className="truncate text-og-md font-medium text-og-fg">
-              {unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}`}
-            </p>
-            <p className="truncate text-og-sm text-og-fg-subtle">{authReasonLine(item.reason)}</p>
+            <p className="truncate text-og-md font-medium text-og-fg">{title}</p>
+            <p className="line-clamp-2 text-og-sm text-og-fg-subtle">{reasonLine}</p>
+            {recommendation ? (
+              <p className="mt-1 truncate text-og-xs text-og-fg-muted">
+                Provider: {item.providerDomain}
+              </p>
+            ) : null}
+            {recommendation && recommendation.requiredVariables.length > 0 ? (
+              <p className="mt-1 truncate text-og-xs text-og-fg-muted">
+                Needs variables: {recommendation.requiredVariables.join(", ")}
+              </p>
+            ) : null}
           </div>
         </div>
         {!unavailable && onReconnect ? (
@@ -2797,8 +3053,9 @@ function AuthNeededRow({
       </div>
       {!unavailable ? (
         <p className="px-1 text-og-xs text-og-fg-subtle">
-          This tool call wasn't replayed. After {missing ? "connecting" : "reconnecting"}, send a
-          new message to try again.
+          {recommendation
+            ? "No access has been granted. Review and confirm the provider before continuing."
+            : `This tool call wasn't replayed. After ${missing ? "connecting" : "reconnecting"}, send a new message to try again.`}
         </p>
       ) : null}
       {failed ? (

package/src/components/model-policy-picker.tsx

@@ -65,6 +65,7 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
   billingHints: {
     opengeni_credits: "Will use credits",
     codex_subscription: "ChatGPT / Codex plan",
+    supergrok_subscription: "SuperGrok / xAI plan",
     byok: "Billed to your AI Gateway",
   },
 };
@@ -132,6 +133,17 @@ function ChatGptMark(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+function XaiMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 466.04 516.93" fill="currentColor" aria-hidden="true" {...props}>
+      <polygon points="0.12 182.71 234.14 516.92 338.15 516.92 104.13 182.71 0.12 182.71" />
+      <polygon points="0 516.92 104.08 516.92 156.08 442.67 104.04 368.34 0 516.92" />
+      <polygon points="466.04 0 361.96 0 182.1 256.86 234.15 331.18 466.04 0" />
+      <polygon points="380.78 516.92 466.04 516.92 466.04 37.16 380.78 158.92 380.78 516.92" />
+    </svg>
+  );
+}
+
 export function BillingClassMark(props: {
   billingClass: PickerBillingClass;
   className?: string | undefined;
@@ -140,6 +152,7 @@ export function BillingClassMark(props: {
   const labels: Record<PickerBillingClass, string> = {
     opengeni_credits: "OpenGeni",
     codex_subscription: "Codex",
+    supergrok_subscription: "SuperGrok",
     byok: "Bring your own key",
   };
   const label = props["aria-label"] ?? labels[props.billingClass];
@@ -162,6 +175,8 @@ export function BillingClassMark(props: {
         <OpenGeniMark className={mark} />
       ) : props.billingClass === "codex_subscription" ? (
         <ChatGptMark className={mark} />
+      ) : props.billingClass === "supergrok_subscription" ? (
+        <XaiMark className={mark} />
       ) : (
         <KeyRoundIcon className={mark} aria-hidden />
       )}