@opengeni/react 3.7.0-canary.5 → 3.7.0-canary.7

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

@@ -1,7 +1,7 @@
 import type { ClientModel, ReasoningEffort } from "@opengeni/sdk";
 import { CheckIcon, SearchIcon, ZapIcon } from "lucide-react";
 import { useRef, useState, type RefObject, type CSSProperties } from "react";
-import { Popover } from "radix-ui";
+import { Popover, RadioGroup } from "radix-ui";
 import { cn } from "../lib/cn";
 import {
   coerceReasoningEffortForModel,
@@ -34,12 +34,7 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
       `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${payerSummaryForModel(row.catalog)}`.toLowerCase();
     return words.every((word) => text.includes(word));
   });
-  const groups = groupPickerRowsByBillingClass(filtered)
-    .map((group) => ({
-      ...group,
-      rows: group.rows.filter((row) => words.length > 0 || row.id !== selected?.id),
-    }))
-    .filter((group) => group.rows.length > 0);
+  const groups = groupPickerRowsByBillingClass(filtered);
   const choose = (row: ClientPickerModelRow) => {
     if (!row.selectable || props.disabled) return;
     if (row.id !== props.model) props.onModelChange(row.id);
@@ -58,14 +53,23 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
     <PickerNavRow
       key={row.id}
       label={row.label}
-      hint={`${props.messages?.billingHints?.[row.billingClass] ?? payerSummaryForModel(row.catalog)}${row.unavailableReason ? ` · ${row.unavailableReason}` : ""}`}
+      hint={row.unavailableReason ?? undefined}
       disabled={props.disabled || !row.selectable}
-      title={row.unavailableReason ?? undefined}
+      title={[row.label, row.unavailableReason].filter(Boolean).join(" · ")}
       active={row.id === props.model}
       showChevron={false}
       trailing={
-        row.id === props.model ? (
-          <CheckIcon className="size-3.5" aria-label={messages.selected} />
+        row.catalog.cost === "free" || row.id === props.model ? (
+          <span className="flex items-center gap-2">
+            {row.catalog.cost === "free" ? (
+              <span className="rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-control text-og-fg-muted">
+                {messages.free}
+              </span>
+            ) : null}
+            {row.id === props.model ? (
+              <CheckIcon className="size-3.5" aria-label={messages.selected} />
+            ) : null}
+          </span>
         ) : null
       }
       testId={`model-picker-choice-${row.id}`}
@@ -99,25 +103,27 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
         buttons[next]?.focus();
       }}
     >
-      <div className="flex items-center gap-2 border-b border-og-border px-2 py-2">
-        <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
-        <input
-          aria-label={messages.searchLabel}
-          placeholder={messages.searchPlaceholder}
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
-            if (event.key === "ArrowDown") {
-              event.preventDefault();
-              event.currentTarget
-                .closest('[data-testid="model-picker-menu"]')
-                ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
-                ?.focus();
-            }
-          }}
-          className="h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
-        />
+      <div className="border-b border-og-border py-1">
+        <label className="og-model-policy-search flex items-center gap-2 rounded-og-sm px-2 py-1 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-og-accent/40">
+          <SearchIcon className="size-4 shrink-0 text-og-fg-subtle" aria-hidden />
+          <input
+            aria-label={messages.searchLabel}
+            placeholder={messages.searchPlaceholder}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== "Escape" && event.key !== "Tab") event.stopPropagation();
+              if (event.key === "ArrowDown") {
+                event.preventDefault();
+                event.currentTarget
+                  .closest('[data-testid="model-picker-menu"]')
+                  ?.querySelector<HTMLButtonElement>("button:not(:disabled)")
+                  ?.focus();
+              }
+            }}
+            className="og-model-policy-search-input h-8 min-w-0 flex-1 bg-transparent text-og-menu text-og-fg outline-hidden placeholder:text-og-fg-subtle"
+          />
+        </label>
       </div>
       {props.error ? (
         <p className="px-2 py-2 text-og-control text-og-status-failed" role="alert">
@@ -132,20 +138,17 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
           <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.loading}</p>
         ) : (
           <>
-            {selected && words.length === 0 ? (
-              <div className="border-b border-og-border/60 pb-1 mb-1">
-                <p className="px-2.5 py-1.5 text-og-control text-og-fg-subtle">
-                  {messages.currentModel}
-                </p>
-                {modelRow(selected)}
-              </div>
-            ) : null}
             {groups.map((group) => (
               <section key={group.billingClass} aria-label={group.label} className="py-1">
                 <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-medium text-og-fg-subtle">
                   <BillingClassMark billingClass={group.billingClass} aria-label="" />
                   {group.label}
                 </div>
+                {group.billingClass !== "opengeni_credits" ? (
+                  <p className="px-2.5 pb-2 text-og-control text-og-fg-subtle">
+                    {messages.billingHints[group.billingClass]}
+                  </p>
+                ) : null}
                 {group.rows.map(modelRow)}
               </section>
             ))}
@@ -157,9 +160,16 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
           </>
         )}
       </div>
-      {selected ? (
-        <div className="border-t border-og-border px-2 py-2">
-          {selected.catalog.capabilities?.inputModalities.includes("image") === false ? (
+      {selected &&
+      ((props.hasImageAttachments &&
+        selected.catalog.capabilities?.inputModalities.includes("image") === false) ||
+        (effortOptionsForModel(selected.catalog).length > 1 &&
+          selected.catalog.capabilities?.reasoning.runnable !== false) ||
+        (props.allowLatencyMode !== false &&
+          runnableLatencyModesForModel(selected.catalog).includes("fast"))) ? (
+        <div className="border-t border-og-border px-2.5 py-2.5">
+          {props.hasImageAttachments &&
+          selected.catalog.capabilities?.inputModalities.includes("image") === false ? (
             <p className="pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
               {messages.unsupportedAttachments}
             </p>
@@ -177,42 +187,53 @@ function ModelThinkingControls(props: ModelPolicyPickerProps) {
   const efforts = effortOptionsForModel(selected.catalog);
   const messages = { ...defaultModelPolicyPickerMessages, ...props.messages };
   const supportsFast = runnableLatencyModesForModel(selected.catalog).includes("fast");
+  const showThinking =
+    efforts.length > 1 && selected.catalog.capabilities?.reasoning.runnable !== false;
+  const showFast = supportsFast && props.allowLatencyMode !== false;
+  if (!showThinking && !showFast) return null;
   return (
-    <div
-      className="flex items-center gap-2 text-og-control text-og-fg-muted"
-      data-testid="model-picker-reasoning"
-    >
-      <label className="flex min-h-9 items-center gap-2">
-        {messages.thinking}
-        <select
+    <div className="space-y-2 text-og-control" data-testid="model-picker-reasoning">
+      <div className="flex min-h-7 items-center justify-between gap-3">
+        {showThinking ? <span className="text-og-fg-subtle">{messages.thinking}</span> : <span />}
+        {showFast ? (
+          <button
+            type="button"
+            data-testid="model-picker-fast"
+            disabled={props.disabled || !selected.selectable}
+            aria-pressed={props.latencyMode === "fast"}
+            title={messages.fast + " · " + messages.fastRateHint}
+            onClick={() =>
+              props.onLatencyModeChange(props.latencyMode === "fast" ? "standard" : "fast")
+            }
+            className="flex min-h-8 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-og-sm px-2 text-og-fg-muted hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50"
+          >
+            <ZapIcon className={cn("size-3.5", props.latencyMode === "fast" && "fill-current")} />
+            {messages.fast}
+            <span className="text-og-fg-subtle">{messages.fastRateHint}</span>
+          </button>
+        ) : null}
+      </div>
+      {showThinking ? (
+        <RadioGroup.Root
           aria-label={messages.thinkingEffort}
           value={coerceReasoningEffortForModel(selected.catalog, props.effort)}
-          disabled={props.disabled || !selected.selectable || efforts.length < 2}
-          onChange={(event) => props.onEffortChange(event.target.value as ReasoningEffort)}
-          className="rounded-og-sm bg-og-surface-2 px-2 py-1.5 text-og-fg outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50"
+          disabled={props.disabled || !selected.selectable}
+          onValueChange={(value) => props.onEffortChange(value as ReasoningEffort)}
+          orientation="horizontal"
+          className="flex flex-wrap gap-0.5 rounded-og-md bg-og-surface-2 p-0.5"
         >
           {efforts.map((effort) => (
-            <option key={effort} value={effort}>
-              {labelReasoningEffort(effort)}
-            </option>
+            <RadioGroup.Item
+              key={effort}
+              value={effort}
+              aria-label={labelReasoningEffort(effort)}
+              title={labelReasoningEffort(effort)}
+              className="min-h-8 min-w-10 flex-1 cursor-pointer whitespace-nowrap rounded-og-sm px-1.5 text-og-control text-og-fg-muted outline-hidden transition-colors hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 data-[state=checked]:bg-og-surface-1 data-[state=checked]:text-og-fg data-[state=checked]:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {effort === "xhigh" ? "X-high" : labelReasoningEffort(effort)}
+            </RadioGroup.Item>
           ))}
-        </select>
-      </label>
-      {supportsFast && props.allowLatencyMode !== false ? (
-        <button
-          type="button"
-          data-testid="model-picker-fast"
-          disabled={props.disabled || !selected.selectable}
-          aria-pressed={props.latencyMode === "fast"}
-          title={`${messages.fast} · ${messages.fastRateHint}`}
-          onClick={() =>
-            props.onLatencyModeChange(props.latencyMode === "fast" ? "standard" : "fast")
-          }
-          className="ml-auto flex min-h-9 items-center gap-1.5 rounded-og-sm px-2 hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50"
-        >
-          <ZapIcon className={cn("size-3.5", props.latencyMode === "fast" && "fill-current")} />
-          {messages.fast} <span className="text-og-fg-subtle">{messages.fastRateHint}</span>
-        </button>
+        </RadioGroup.Root>
       ) : null}
     </div>
   );

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

@@ -21,6 +21,7 @@ import {
 import { cn } from "../lib/cn";
 import { usePortalTokenSource, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
+  effortOptionsForModel,
   findPickerRow,
   labelReasoningEffort,
   projectClientModelRows,
@@ -51,6 +52,7 @@ export type ModelPolicyPickerMessages = {
   unsupportedAttachments?: string;
   thinkingEffort?: string;
   selected?: string;
+  free?: string;
 
   billingHints: Record<PickerBillingClass, string>;
 };
@@ -67,13 +69,13 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
   searchPlaceholder: "Search models or providers…",
   currentModel: "Current model",
   noMatches: "No matching models. Try a model or provider name.",
-  unsupportedAttachments:
-    "Unsupported attachments stay in the session but are hidden from this model.",
+  unsupportedAttachments: "This model cannot view the attached images.",
   thinkingEffort: "Thinking effort",
   selected: "Selected",
+  free: "Free",
 
   billingHints: {
-    opengeni_credits: "Will use credits",
+    opengeni_credits: "Provided by OpenGeni",
     external: "Provider terms and limits apply",
     codex_subscription: "ChatGPT / Codex plan",
     supergrok_subscription: "SuperGrok / xAI plan",
@@ -85,6 +87,8 @@ export const defaultModelPolicyPickerMessages: ModelPolicyPickerMessages = {
 export type ModelPolicyPickerProps = {
   /** Lightweight deployment models. Catalog rows take precedence when supplied. */
   models?: ClientModel[] | undefined;
+  /** Warn only when the draft actually contains images this model cannot view. */
+  hasImageAttachments?: boolean | undefined;
   /** Catalog-backed rows with availability and billing-class truth. */
   rows?: PickerModelRow[] | undefined;
   model: string;
@@ -119,17 +123,10 @@ export type ModelPolicyPickerProps = {
 
 const SLIDE_EASE = [0.22, 1, 0.36, 1] as const;
 
+// Solid facets keep the brand legible at the picker’s 14px icon size.
 function OpenGeniMark(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      viewBox="0 0 140 133"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.2}
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
+    <svg viewBox="0 0 140 133" fill="currentColor" aria-hidden="true" {...props}>
       <g transform="translate(-17.5,-20.999893188476562) scale(1.75)">
         <g transform="translate(0,-952.36218)">
           <path d="m 60.7828,964.36215 27.1809,0.8834 -27.1809,25.9958 z m -1.9745,1.4513 0,26.7845 -25.2681,0 c 8.6166,-8.7334 16.8796,-17.8103 25.2681,-26.7845 z m 27.7053,3.628 3.4864,1.1989 -12.5877,7.4768 z m -68.1835,2.9656 5.5226,0 12.8654,14.0705 -5.9854,6.1204 -12.4026,0 c 9e-4,-6.7347 0,-13.4597 0,-20.1909 z m -1.9746,1.2304 0,5.8364 -6.3555,0 z m 3.363,20.9796 38.627,0 -10.7675,29.43465 z m 39.0898,4.54286 0,41.20229 -12.5878,-6.8775 c 4.1972,-11.443 8.3886,-22.879 12.5878,-34.32479 z" />
@@ -249,6 +246,7 @@ export function PickerNavRow(props: {
   showChevron?: boolean | undefined;
   disabled?: boolean | undefined;
   title?: string | undefined;
+  description?: string | undefined;
   active?: boolean | undefined;
   testId?: string | undefined;
   onClick: () => void;
@@ -258,6 +256,7 @@ export function PickerNavRow(props: {
       type="button"
       disabled={props.disabled}
       title={props.title}
+      aria-description={props.description}
       onClick={props.onClick}
       data-testid={props.testId}
       className={cn(
@@ -387,12 +386,16 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
         <span className="og-model-policy-label-short min-w-0 truncate font-medium text-og-fg sm:hidden @max-[20rem]/model-controls:block">
           {selected?.shortLabel ?? selected?.label ?? props.model}
         </span>
-        <span
-          className="og-model-policy-effort min-w-0 shrink-[9999] truncate"
-          title={labelReasoningEffort(props.effort)}
-        >
-          {labelReasoningEffort(props.effort)}
-        </span>
+        {selected &&
+        effortOptionsForModel(selected.catalog).length > 1 &&
+        selected.catalog.capabilities?.reasoning.runnable !== false ? (
+          <span
+            className="og-model-policy-effort min-w-0 shrink-[9999] truncate"
+            title={labelReasoningEffort(props.effort)}
+          >
+            {labelReasoningEffort(props.effort)}
+          </span>
+        ) : null}
         {props.latencyMode === "fast" ? (
           <ZapIcon
             className="size-3.5 shrink-0 fill-current stroke-current text-og-fg"

package/src/components/sandbox-files.tsx

@@ -57,6 +57,8 @@ export type SandboxFilesProps = {
   workspaceWaking?: boolean | undefined;
   /** Whether live reads are currently authoritative. */
   liveWorkspaceReady?: boolean | undefined;
+  /** Failed live negotiation; never present a failure as an ongoing wake. */
+  workspaceError?: Error | null | undefined;
   /** Deliberately wake the machine to read content absent from the capture. */
   onWakeWorkspace?: (() => void) | undefined;
   themeType?: "dark" | "light" | undefined;
@@ -87,6 +89,7 @@ export function SandboxFiles({
   workspaceResting = false,
   workspaceWaking = false,
   liveWorkspaceReady = true,
+  workspaceError = null,
   onWakeWorkspace,
   themeType,
   className,
@@ -254,10 +257,22 @@ export function SandboxFiles({
   const captureFileUnavailable =
     fileView.error instanceof CapturedFileUnavailableError ? fileView.error : null;
   const waitingForSelectedFile =
+    !workspaceError &&
     liveRequestedPath === viewPath &&
     (!liveWorkspaceReady || files.loading) &&
     captureFileUnavailable !== null;
 
+  if (workspaceError && !liveWorkspaceReady && files.source !== "capture") {
+    return (
+      <Notice className={className} title="Could not open live workspace" announce="alert">
+        <p>{workspaceError.message}</p>
+        {onWakeWorkspace ? (
+          <WakeButton onClick={onWakeWorkspace}>Retry live workspace</WakeButton>
+        ) : null}
+      </Notice>
+    );
+  }
+
   if (workspaceResting || workspaceWaking) {
     return (
       <div className={cn("h-full", className)} data-opengeni-workspace-resting>
@@ -415,6 +430,15 @@ export function SandboxFiles({
                   {...(onEditIntent ? { onEditIntent } : {})}
                   className="h-full"
                 />
+              ) : workspaceError &&
+                (liveRequestedPath === viewPath || requestedPath === viewPath) &&
+                !liveWorkspaceReady ? (
+                <Notice title="Could not open live file" announce="alert">
+                  <p>{workspaceError.message}</p>
+                  {onWakeWorkspace ? (
+                    <WakeButton onClick={onWakeWorkspace}>Retry live file</WakeButton>
+                  ) : null}
+                </Notice>
               ) : waitingForSelectedFile ? (
                 <Notice
                   icon={
@@ -455,6 +479,12 @@ export function SandboxFiles({
                 </Notice>
               ) : fileView.loading ? (
                 <Notice announce="status">Loading {viewPath}…</Notice>
+              ) : fileView.imageUrl ? (
+                <RasterFilePreview
+                  key={fileView.imageUrl}
+                  src={fileView.imageUrl}
+                  path={viewPath}
+                />
               ) : fileView.isBinary ? (
                 <Notice>
                   {viewPath} is a binary file ({fileView.sizeBytes ?? 0} bytes).
@@ -497,18 +527,27 @@ export function SandboxFiles({
               )
             ) : // Nothing selected — the tree shows the whole workspace; pick a file.
             requestedPath && !requestedPathReady ? (
-              <Notice
-                icon={
-                  <LoaderCircleIcon
-                    className="size-5 animate-spin motion-reduce:animate-none"
-                    aria-hidden
-                  />
-                }
-                title="Waking sandbox"
-                announce="status"
-              >
-                Opening {requestedPath} when the live workspace is ready…
-              </Notice>
+              workspaceError ? (
+                <Notice title="Could not open live file" announce="alert">
+                  <p>{workspaceError.message}</p>
+                  {onWakeWorkspace ? (
+                    <WakeButton onClick={onWakeWorkspace}>Retry live file</WakeButton>
+                  ) : null}
+                </Notice>
+              ) : (
+                <Notice
+                  icon={
+                    <LoaderCircleIcon
+                      className="size-5 animate-spin motion-reduce:animate-none"
+                      aria-hidden
+                    />
+                  }
+                  title="Waking sandbox"
+                  announce="status"
+                >
+                  Opening {requestedPath} when the live workspace is ready…
+                </Notice>
+              )
             ) : (
               <Notice icon={<FileCode2Icon className="size-5" aria-hidden />} title="Choose a file">
                 Select a file in the tree to preview it.
@@ -628,8 +667,10 @@ function GitHeader({ git, loading }: { git: SandboxFilesGitSummary; loading: boo
       </span>
       {(git.ahead > 0 || git.behind > 0) && (
         <span className="flex shrink-0 items-center gap-1.5 text-og-xs text-og-fg-subtle">
-          {git.ahead > 0 && <span>↑{git.ahead}</span>}
-          {git.behind > 0 && <span>↓{git.behind}</span>}
+          {/* Small arrow glyphs can make axe's pixel overlap heuristic inconclusive.
+              Keep both counters in the same computed-contrast audit as the dirty count. */}
+          {git.ahead > 0 && <span data-contrast-audited>↑{git.ahead}</span>}
+          {git.behind > 0 && <span data-contrast-audited>↓{git.behind}</span>}
         </span>
       )}
       {dirty && (
@@ -677,6 +718,7 @@ function Segmented({
 
 type FileViewState = {
   content: string | null;
+  imageUrl?: string | null;
   isBinary: boolean;
   /** The backend truncated the read (size cap hit) — content is a PREFIX only.
    *  Editing+saving such a file would write the prefix back and corrupt it, so
@@ -749,6 +791,8 @@ function useFileView(
             : res.content;
         setState({
           content,
+          imageUrl:
+            !res.truncated && res.encoding === "base64" ? rasterImageUrl(path, res.content) : null,
           isBinary: res.isBinary,
           truncated: res.truncated,
           sizeBytes: res.sizeBytes,
@@ -780,6 +824,38 @@ function useFileView(
   return state;
 }
 
+/** Only raster formats belong in this preview; never interpret SVG/HTML as a document. */
+function rasterImageUrl(path: string, content: string): string | null {
+  const extension = path.split(".").pop()?.toLowerCase();
+  const mime =
+    extension === "png"
+      ? "image/png"
+      : extension === "jpg" || extension === "jpeg"
+        ? "image/jpeg"
+        : extension === "gif"
+          ? "image/gif"
+          : extension === "webp"
+            ? "image/webp"
+            : null;
+  return mime ? `data:${mime};base64,${content}` : null;
+}
+
+function RasterFilePreview({ src, path }: { src: string; path: string }) {
+  const [failed, setFailed] = useState(false);
+  return failed ? (
+    <Notice title="Image preview unavailable" announce="alert">
+      Could not decode {path} as an image.
+    </Notice>
+  ) : (
+    <img
+      src={src}
+      alt={path}
+      onError={() => setFailed(true)}
+      className="max-w-full object-contain"
+    />
+  );
+}
+
 /** Decode a base64 payload to a UTF-8 string (browser `atob` + TextDecoder). */
 function decodeBase64Utf8(b64: string): string {
   try {

package/src/components/sandbox-workspace.tsx

@@ -781,7 +781,20 @@ export function useSandboxWorkspaceTabs(
             }
             workspaceWaking={!liveWorkspaceExpected && !captureAvailable && workspaceWaking}
             liveWorkspaceReady={liveWorkspaceExpected}
-            onWakeWorkspace={() => requestWarmIntent("warmFiles")}
+            workspaceError={
+              caps.error ??
+              (caps.viewerCapReached
+                ? new Error(
+                    "The live workspace viewer limit has been reached. Close another viewer and retry.",
+                  )
+                : filesWarmRequested && caps.state === "on-demand" && !fileSystemOn
+                  ? new Error("This machine does not currently expose a live file system.")
+                  : null)
+            }
+            onWakeWorkspace={() => {
+              if (filesWarmRequested) caps.renegotiate();
+              else requestWarmIntent("warmFiles");
+            }}
             {...(requestedFilePath
               ? {
                   requestedPath: requestedFilePath,
@@ -943,6 +956,8 @@ export function useSandboxWorkspaceTabs(
     caps.state,
     caps.error,
     caps.viewerCapReached,
+    caps.renegotiate,
+    filesWarmRequested,
     requestWarmIntent,
     createLinkedComputer,
   ]);

package/src/hooks/use-session-events.ts

@@ -30,6 +30,8 @@ export type UseSessionEventsResult = {
   timeline: TimelineItem[];
   /** Latest session status observed in the event log, if any. */
   sessionStatus: SessionStatus | null;
+  /** Sequence of the retained status projection, including events evicted from the window. */
+  sessionStatusSequence?: number;
   connectionState: SessionEventsConnectionState;
   /** Highest sequence seen so far (0 before the first event). */
   lastSequence: number;
@@ -875,6 +877,7 @@ export function useSessionEvents(
     events: visibleEvents,
     timeline,
     sessionStatus: identityMatches ? sessionStatusProjection : null,
+    sessionStatusSequence: identityMatches ? sessionStatusRef.current.sequence : 0,
     connectionState: identityMatches ? connectionState : "idle",
     lastSequence: identityMatches ? lastSequenceRef.current : after,
     windowBytes: identityMatches ? eventWindow.bytes : 2,

package/src/hooks/use-session.ts

@@ -39,7 +39,13 @@ export function isTitleEvent(event: Pick<SessionEvent, "type">): boolean {
 }
 
 function isSessionDetailEvent(event: Pick<SessionEvent, "type">): boolean {
-  return isTitleEvent(event) || event.type.startsWith("session.command.");
+  return (
+    isTitleEvent(event) ||
+    event.type.startsWith("session.command.") ||
+    event.type.startsWith("session.wait.") ||
+    event.type === "session.status.changed" ||
+    event.type === "system.update.pending"
+  );
 }
 
 /** Fetch one session (with optional polling), live-patching its title on `session.title_set`. */
@@ -115,12 +121,13 @@ export function useSession(
         sharedEvents?.some(
           (item) =>
             item.sessionId === sessionId &&
-            item.type.startsWith("session.command.") &&
+            !isTitleEvent(item) &&
+            isSessionDetailEvent(item) &&
             item.sequence > (base?.lastSequence ?? -1),
         )
       ) {
         void refresh();
-      } else if (event.type.startsWith("session.command.")) {
+      } else if (!isTitleEvent(event)) {
         if (!base || event.sequence > base.lastSequence) void refresh();
         return;
       }

package/src/index.ts

@@ -500,6 +500,7 @@ export {
   labelLatencyMode,
   labelReasoningEffort,
   payerSummaryForModel,
+  modelUsesCredits,
   projectClientModelRows,
   projectPickerRows,
   runnableLatencyModesForModel,

package/src/model-policy.ts

@@ -116,6 +116,12 @@ export function labelReasoningEffort(effort: ReasoningEffort): string {
   return effort.slice(0, 1).toUpperCase() + effort.slice(1);
 }
 
+/** Payment prompts must use cost policy, never the presentation group. */
+export function modelUsesCredits(model: ClientModel | undefined): boolean {
+  if (model?.cost !== undefined) return model.cost === "credits";
+  return model?.billing?.metering === "opengeni_credits";
+}
+
 export function payerSummaryForModel(model: ClientModel): string {
   if (model.cost === "free") {
     return "Free in this deployment";
@@ -131,6 +137,9 @@ export function payerSummaryForModel(model: ClientModel): string {
   if (model.cost === "workspace") {
     return workspaceProviderPayerSummary(model);
   }
+  if (model.cost === "organization") {
+    return organizationProviderPayerSummary(model);
+  }
 
   // Older client-config payloads do not carry `cost`; preserve their existing
   // settlement-derived label until every deployment has rolled forward.
@@ -149,14 +158,19 @@ export function payerSummaryForModel(model: ClientModel): string {
   if (billing.upstreamPayer === "workspace") {
     return workspaceProviderPayerSummary(model);
   }
-  return "External provider · no OpenGeni credits";
+  if (billing.upstreamPayer === "organization") {
+    return organizationProviderPayerSummary(model);
+  }
+  return billing.upstreamPayer === "deployment"
+    ? "OpenGeni · no model credits"
+    : "External provider · no OpenGeni credits";
 }
 
 export function advancedSourceSummary(model: ClientModel): string | null {
   const source = model.credentialSource;
   if (!source) {
     return model.billing?.metering === "external" && model.billing.upstreamPayer === "deployment"
-      ? "Deployment route · no authentication"
+      ? "Deployment-provided connection"
       : null;
   }
   if (source.kind === "connected_subscription") {
@@ -191,6 +205,16 @@ function workspaceProviderPayerSummary(model: ClientModel): string {
   return "Billed to the workspace provider account";
 }
 
+function organizationProviderPayerSummary(model: ClientModel): string {
+  if (model.provider === "organization-openrouter") {
+    return "Billed to the organization OpenRouter account";
+  }
+  if (model.provider === "organization-gateway") {
+    return "Billed to the organization Vercel account";
+  }
+  return "Billed to the organization provider account";
+}
+
 export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {
   return models
     .filter((catalog) => {