@opengeni/react 3.3.2 → 3.4.0

package/src/model-policy.ts

@@ -1,11 +1,12 @@
+import {
+  compareModelPickerOrder,
+  modelPickerBillingClassFor,
+  type ModelPickerBillingClass,
+} from "@opengeni/sdk/model-picker-order";
+import { modelDisplayName } from "@opengeni/sdk/model-display";
 import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@opengeni/sdk";
 
-export type PickerBillingClass =
-  | "opengeni_credits"
-  | "external"
-  | "codex_subscription"
-  | "supergrok_subscription"
-  | "byok";
+export type PickerBillingClass = ModelPickerBillingClass;
 
 export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
   id: string;
@@ -16,6 +17,7 @@ export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogM
   billingClassLabel: string;
   selectable: boolean;
   unavailableReason: string | null;
+  fundingHint?: string | undefined;
   provider: string;
   providerLabel: string;
   catalog: TCatalog;
@@ -23,20 +25,23 @@ export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogM
 
 export type LatencyModeId = "standard" | "priority" | "fast";
 
-const BILLING_CLASS_ORDER: PickerBillingClass[] = [
-  "opengeni_credits",
-  "external",
-  "codex_subscription",
-  "supergrok_subscription",
-  "byok",
-];
-
 const BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {
-  opengeni_credits: "OpenGeni",
+  opengeni_credits: "Models",
   external: "External",
   codex_subscription: "Codex",
   supergrok_subscription: "SuperGrok",
-  byok: "Your Gateway",
+  claude_subscription: "Claude subscription",
+  // Who connected the key (organization or workspace) is a settings fact, not
+  // a model choice: both scopes share one label and one picker group.
+  byok: "API keys",
+  organization_byok: "API keys",
+};
+
+/** Models settings keeps naming who connected the key. */
+const SCOPED_BILLING_CLASS_LABELS: Record<PickerBillingClass, string> = {
+  ...BILLING_CLASS_LABELS,
+  byok: "Workspace providers",
+  organization_byok: "Organization providers",
 };
 
 const AVAILABILITY_REASON_LABELS: Record<string, string> = {
@@ -47,42 +52,41 @@ const AVAILABILITY_REASON_LABELS: Record<string, string> = {
   provider_unhealthy: "Provider unavailable",
   policy_blocked: "Blocked by workspace policy",
   unsupported: "Unsupported",
+  credits_disabled: "Opengeni credits off",
 };
 
 export function billingClassForModel(model: ClientModel): PickerBillingClass {
-  if (model.billing?.metering === "external" && model.billing.upstreamPayer === "deployment") {
-    return "external";
-  }
-  if (model.source === "supergrok") {
-    return "supergrok_subscription";
+  if (
+    model.provider === "organization-gateway" ||
+    model.provider === "organization-openrouter" ||
+    model.provider === "organization-opper"
+  ) {
+    return "organization_byok";
   }
-  if (model.source === "codex") {
-    return "codex_subscription";
-  }
-  if (model.source === "workspace_gateway") {
+  if (
+    model.provider?.startsWith("workspace-openai-") ||
+    model.provider?.startsWith("workspace-azure-openai-")
+  )
     return "byok";
-  }
-  if (model.credentialSource?.kind === "connected_subscription") {
-    return model.credentialSource.provider === "xai"
-      ? "supergrok_subscription"
-      : "codex_subscription";
-  }
-  if (model.credentialSource?.kind === "workspace_connection") {
+  if (
+    model.provider === "workspace-gateway" ||
+    model.provider === "workspace-openrouter" ||
+    model.provider === "workspace-opper"
+  ) {
     return "byok";
   }
-  if (model.billing?.upstreamPayer === "connected_subscription") {
-    return "codex_subscription";
-  }
-  if (model.billing?.upstreamPayer === "workspace") {
-    return "byok";
-  }
-  return "opengeni_credits";
+  return modelPickerBillingClassFor(model);
 }
 
 export function billingClassLabel(billingClass: PickerBillingClass): string {
   return BILLING_CLASS_LABELS[billingClass];
 }
 
+/** The group label that names the connection scope, for Models settings only. */
+export function scopedBillingClassLabel(billingClass: PickerBillingClass): string {
+  return SCOPED_BILLING_CLASS_LABELS[billingClass];
+}
+
 export function availabilityReasonLabel(
   reason: WorkspaceModelCatalogModel["availability"]["reason"],
 ): string | null {
@@ -121,6 +125,30 @@ export function coerceReasoningEffortForModel(
   return defaultEffortForModel(model);
 }
 
+/** Whether the composer offers (and therefore labels) a reasoning-effort choice. */
+export function modelOffersEffortChoice(model: ClientModel): boolean {
+  return (
+    effortOptionsForModel(model).length > 1 && model.capabilities?.reasoning.runnable !== false
+  );
+}
+
+/**
+ * The composer model pill at phone width: the catalog's compact name (falling
+ * back to the display name) and the effort label when effort is a choice.
+ */
+export function compactModelPill(
+  models: readonly ClientModel[],
+  modelId: string,
+  effort: ReasoningEffort | null | undefined,
+): { name: string; effort: string | null } {
+  const row = findPickerRow(projectClientModelRows([...models]), modelId);
+  return {
+    name: row?.shortLabel ?? row?.label ?? modelDisplayName(modelId),
+    effort:
+      row && effort && modelOffersEffortChoice(row.catalog) ? labelReasoningEffort(effort) : null,
+  };
+}
+
 export function runnableLatencyModesForModel(model: ClientModel): LatencyModeId[] {
   const modes = model.capabilities?.latencyModes ?? [];
   return modes.filter((mode) => mode.runnable).map((mode) => mode.id);
@@ -143,39 +171,87 @@ 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";
+  }
+  if (model.cost === "credits") {
+    return "Opengeni credits";
+  }
+  if (model.cost === "subscription") {
+    return model.credentialSource?.kind === "connected_subscription" &&
+      model.credentialSource.provider === "claude"
+      ? "Claude subscription · external billing"
+      : model.source === "supergrok"
+        ? "SuperGrok subscription · external billing"
+        : "Codex subscription · external billing";
+  }
+  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.
   const billing = model.billing;
   if (!billing) {
     return "Route unknown";
   }
   if (billing.metering === "opengeni_credits") {
-    return "OpenGeni credits · automatic managed route";
+    return "Opengeni credits · automatic managed route";
   }
   if (billing.upstreamPayer === "connected_subscription") {
-    return model.source === "supergrok"
-      ? "SuperGrok subscription · external billing"
-      : "Codex subscription · external billing";
+    return model.credentialSource?.kind === "connected_subscription" &&
+      model.credentialSource.provider === "claude"
+      ? "Claude subscription · external billing"
+      : model.source === "supergrok"
+        ? "SuperGrok subscription · external billing"
+        : "Codex subscription · external billing";
   }
   if (billing.upstreamPayer === "workspace") {
-    return "Billed to your AI Gateway";
+    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") {
-    return source.provider === "xai"
-      ? "Connected SuperGrok subscription"
-      : "Connected Codex subscription";
+    return source.provider === "claude"
+      ? "Connected Claude subscription"
+      : source.provider === "xai"
+        ? "Connected SuperGrok subscription"
+        : "Connected Codex subscription";
   }
   if (source.kind === "workspace_connection") {
-    return "Workspace AI Gateway";
+    if (model.provider === "workspace-openrouter") {
+      return "Workspace OpenRouter connection";
+    }
+    if (model.provider === "workspace-opper") {
+      return "Workspace Opper connection";
+    }
+    if (model.provider === "workspace-gateway" || model.source === "workspace_gateway") {
+      return "Workspace Vercel AI Gateway";
+    }
+    return "Workspace provider connection";
   }
   if (source.kind === "deployment") {
     return source.mechanism === "azure_ad_bearer"
@@ -185,21 +261,98 @@ export function advancedSourceSummary(model: ClientModel): string | null {
   return null;
 }
 
+function workspaceProviderPayerSummary(model: ClientModel): string {
+  if (model.provider === "workspace-anthropic")
+    return "Billed to the workspace Anthropic API account";
+  if (model.provider === "workspace-claude-subscription")
+    return "Uses the workspace Claude subscription · no Opengeni credits";
+  if (model.provider === "workspace-openrouter") {
+    return "Billed to the workspace OpenRouter account";
+  }
+  if (model.provider === "workspace-opper") {
+    return "Billed to the workspace Opper account";
+  }
+  if (model.provider === "workspace-gateway" || model.source === "workspace_gateway") {
+    return "Billed to the workspace Vercel account";
+  }
+  return "Billed to the workspace provider account";
+}
+
+function organizationProviderPayerSummary(model: ClientModel): string {
+  if (model.provider === "organization-anthropic")
+    return "Billed to the organization Anthropic API account";
+  if (model.provider === "organization-claude-subscription")
+    return "Uses the connected Claude subscription · no Opengeni credits";
+  if (model.provider === "organization-openrouter") {
+    return "Billed to the organization OpenRouter account";
+  }
+  if (model.provider === "organization-opper") {
+    return "Billed to the organization Opper account";
+  }
+  if (model.provider === "organization-gateway") {
+    return "Billed to the organization Vercel account";
+  }
+  return "Billed to the organization provider account";
+}
+
+/**
+ * The curated compact label, else a derived one for narrow triggers: the name
+ * without trailing access and release-stage qualifiers ("Muse Spark 1.3
+ * Contributor Free" → "Muse Spark 1.3"), which the picker's groups and
+ * descriptions already carry. Claude names are already family-free
+ * ("Opus 5.5") in the shared display name.
+ */
+function compactLabel(catalog: ClientModel): { shortLabel?: string } {
+  if (catalog.shortLabel) return { shortLabel: catalog.shortLabel };
+  const name = modelDisplayName(catalog);
+  const trimmed = withoutTrailingQualifiers(name);
+  return trimmed !== name ? { shortLabel: trimmed } : {};
+}
+
+const TRAILING_QUALIFIERS = new Set([
+  "free",
+  "contributor",
+  "preview",
+  "beta",
+  "experimental",
+  "exp",
+  "latest",
+]);
+
+/** Drops trailing qualifier words ("Free", "Preview", "(free)") while a name remains. */
+function withoutTrailingQualifiers(name: string): string {
+  const words = name.trim().split(/\s+/u);
+  while (words.length > 1) {
+    const last = words
+      .at(-1)!
+      .replace(/^[([]|[)\]]$/gu, "")
+      .toLowerCase();
+    if (!TRAILING_QUALIFIERS.has(last)) break;
+    words.pop();
+  }
+  return words.join(" ");
+}
+
 export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerModelRow[] {
   return models
-    .filter((catalog) => {
-      const billingClass = billingClassForModel(catalog);
-      return billingClass === "opengeni_credits" || catalog.credentialReadiness.status === "ready";
-    })
+    .filter((catalog) => catalog.credentialReadiness.status === "ready")
     .map((catalog) => {
       const billingClass = billingClassForModel(catalog);
       return {
         id: catalog.id,
-        label: catalog.label,
-        ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),
+        label: modelDisplayName(catalog),
+        ...compactLabel(catalog),
         billingClass,
         billingClassLabel: billingClassLabel(billingClass),
         selectable: catalog.availability.selectable,
+        fundingHint:
+          catalog.creditFunding === "promotional"
+            ? "Free credits"
+            : catalog.creditFunding === "general"
+              ? "Uses credits"
+              : catalog.creditFunding === "unavailable"
+                ? "Needs credits"
+                : undefined,
         unavailableReason: catalog.availability.selectable
           ? null
           : availabilityReasonLabel(catalog.availability.reason),
@@ -216,8 +369,8 @@ export function projectClientModelRows(models: ClientModel[]): PickerModelRow<Cl
     const billingClass = billingClassForModel(catalog);
     return {
       id: catalog.id,
-      label: catalog.label,
-      ...(catalog.shortLabel ? { shortLabel: catalog.shortLabel } : {}),
+      label: modelDisplayName(catalog),
+      ...compactLabel(catalog),
       billingClass,
       billingClassLabel: billingClassLabel(billingClass),
       selectable: true,
@@ -232,18 +385,7 @@ export function projectClientModelRows(models: ClientModel[]): PickerModelRow<Cl
 export function sortPickerRows<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
 ): PickerModelRow<TCatalog>[] {
-  return [...rows].sort((left, right) => {
-    const classDelta =
-      BILLING_CLASS_ORDER.indexOf(left.billingClass) -
-      BILLING_CLASS_ORDER.indexOf(right.billingClass);
-    if (classDelta !== 0) {
-      return classDelta;
-    }
-    if (left.selectable !== right.selectable) {
-      return left.selectable ? -1 : 1;
-    }
-    return left.label.localeCompare(right.label);
-  });
+  return [...rows].sort(compareModelPickerOrder);
 }
 
 export function findPickerRow<TCatalog extends ClientModel>(
@@ -253,11 +395,62 @@ export function findPickerRow<TCatalog extends ClientModel>(
   return rows.find((row) => row.id === modelId) ?? null;
 }
 
+export type GroupPickerRowsOptions = {
+  codexOnly?: boolean;
+  /**
+   * Default true: organization- and workspace-connected keys share one group
+   * and identical copies show once. Models settings passes false.
+   */
+  collapseScopes?: boolean | undefined;
+  /** Kept visible when it has an identical twin (see below). */
+  selectedId?: string | undefined;
+};
+
+/**
+ * Organization- and workspace-connected API keys are one choice for the person
+ * picking a model, so they share one group.
+ */
+function displayGroupFor(billingClass: PickerBillingClass): PickerBillingClass {
+  return billingClass === "organization_byok" ? "byok" : billingClass;
+}
+
+/**
+ * The same model through the same provider kind, whichever scope connected it:
+ * `organization-anthropic/claude-opus-5-5` and `workspace-anthropic/claude-opus-5-5`
+ * share a key, while OpenRouter and the Anthropic API never do (different
+ * accounts and bills).
+ */
+function scopeFreeIdentity(row: PickerModelRow<ClientModel>): string | null {
+  const provider = row.provider.replace(/^(?:organization|workspace)-/, "");
+  if (provider === row.provider) return null;
+  const upstream =
+    row.catalog.deployment?.upstreamModelId ??
+    (row.id.startsWith(`${row.provider}/`) ? row.id.slice(row.provider.length + 1) : row.id);
+  return `${provider}\u0000${upstream}`;
+}
+
+/**
+ * Two rows that are the same model through the same provider kind, connected
+ * by the organization and by the workspace, are one choice: show one. Keep the
+ * current selection, else a selectable row, else the first in picker order.
+ */
+function prefersTwin<TCatalog extends ClientModel>(
+  candidate: PickerModelRow<TCatalog>,
+  current: PickerModelRow<TCatalog>,
+  selectedId: string | undefined,
+): boolean {
+  if (selectedId !== undefined && current.id === selectedId) return false;
+  if (selectedId !== undefined && candidate.id === selectedId) return true;
+  return candidate.selectable && !current.selectable;
+}
+
 export function groupPickerRowsByBillingClass(
   rows: PickerModelRow[],
+  options?: GroupPickerRowsOptions,
 ): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }>;
 export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
+  options?: GroupPickerRowsOptions,
 ): Array<{
   billingClass: PickerBillingClass;
   label: string;
@@ -265,6 +458,7 @@ export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
 }>;
 export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
+  options?: GroupPickerRowsOptions,
 ): Array<{
   billingClass: PickerBillingClass;
   label: string;
@@ -277,16 +471,47 @@ export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
     rows: PickerModelRow<TCatalog>[];
   }> = [];
   for (const row of sorted) {
-    const existing = groups.find((group) => group.billingClass === row.billingClass);
+    const collapse = options?.collapseScopes !== false;
+    const billingClass = collapse ? displayGroupFor(row.billingClass) : row.billingClass;
+    const existing = groups.find((group) => group.billingClass === billingClass);
     if (existing) {
-      existing.rows.push(row);
+      const identity = collapse ? scopeFreeIdentity(row) : null;
+      const twin =
+        identity === null
+          ? -1
+          : existing.rows.findIndex((candidate) => scopeFreeIdentity(candidate) === identity);
+      if (twin < 0) {
+        existing.rows.push(row);
+      } else if (prefersTwin(row, existing.rows[twin]!, options?.selectedId)) {
+        existing.rows[twin] = row;
+      }
       continue;
     }
     groups.push({
-      billingClass: row.billingClass,
-      label: row.billingClassLabel,
+      billingClass,
+      label:
+        billingClass === row.billingClass ? row.billingClassLabel : billingClassLabel(billingClass),
       rows: [row],
     });
   }
+  const codexIndex = groups.findIndex((group) => group.billingClass === "codex_subscription");
+  const codex = groups[codexIndex];
+  const selectableOpenGeni = groups
+    .find((group) => group.billingClass === "opengeni_credits")
+    ?.rows.filter((row) => row.selectable);
+  // Presentation only: never change the catalog/default model ordering or selection.
+  const onlyFreeOpenGeni =
+    selectableOpenGeni !== undefined &&
+    selectableOpenGeni.length > 0 &&
+    selectableOpenGeni.every((row) => row.catalog.cost === "free");
+  if (
+    codex &&
+    codex.rows.some((row) => row.selectable) &&
+    (options?.codexOnly || onlyFreeOpenGeni)
+  ) {
+    groups.splice(codexIndex, 1);
+    groups.unshift(codex);
+  }
   return groups;
 }
+export { modelDisplayName, modelVendor } from "@opengeni/sdk/model-display";

package/src/native-previews.ts

@@ -0,0 +1,100 @@
+/**
+ * DOM-free building blocks for showing agent previews outside a browser page
+ * (React Native web views): the same documents and loading surface the web
+ * chat uses, as strings and pure functions.
+ */
+import { PREVIEW_LOADING_COLORS } from "./preview-loading-paint";
+
+export { inlineHtmlDocument } from "./components/artifacts/inline-html-document";
+export {
+  loadSiteSnapshot,
+  type SiteDisplayContent,
+  type SiteSnapshotReadClient,
+} from "./site-snapshot";
+export { paintPreviewLoading, PREVIEW_LOADING_COLORS } from "./preview-loading-paint";
+
+/** Fence languages the assistant uses for interactive previews. */
+export type InteractivePreviewKind = "html" | "site";
+
+export function interactivePreviewKind(language: string): InteractivePreviewKind | null {
+  return language === "opengeni-html" ? "html" : language === "opengeni-site" ? "site" : null;
+}
+
+/** A Site fence body: `{"siteId": "…", "versionId"?: "…"}`; null when malformed. */
+export function parseSiteFence(content: string): { siteId: string; versionId?: string } | null {
+  try {
+    const value = JSON.parse(content) as { siteId?: unknown; versionId?: unknown };
+    const uuid = /^[0-9a-f-]{36}$/i;
+    if (!value || typeof value.siteId !== "string" || !uuid.test(value.siteId)) return null;
+    if (value.versionId === undefined) return { siteId: value.siteId };
+    return typeof value.versionId === "string" && uuid.test(value.versionId)
+      ? { siteId: value.siteId, versionId: value.versionId }
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Script source of `paintPreviewLoading` (kept in lockstep by a test), for
+ * documents that run outside this bundle. Release React Native builds compile
+ * functions to bytecode, so `Function.prototype.toString` cannot be used.
+ */
+export const PREVIEW_LOADING_PAINT_SCRIPT = `function paintPreviewLoading(context,width,height,time,ink,glowColor){
+context.clearRect(0,0,width,height);
+const cx=width*(0.5+0.13*Math.sin(time*0.21));
+const cy=height*(0.5+0.12*Math.cos(time*0.27));
+const glow=context.createRadialGradient(cx,cy,0,cx,cy,Math.max(width,height)*0.65);
+glow.addColorStop(0,glowColor);glow.addColorStop(1,"transparent");
+context.globalAlpha=0.09;context.fillStyle=glow;context.fillRect(0,0,width,height);
+const rows=Math.ceil(height/18)+7;const cols=Math.ceil(width/18)+7;
+const points=Array.from({length:rows},(_row,r)=>Array.from({length:cols},(_col,c)=>{
+const x=(c-3)*18;const y=(r-3)*18;const dist=Math.hypot((x-cx)*0.8,y-cy);
+const wave=Math.sin(dist*0.032-time*0.95);
+return {x:x+((x-cx)/Math.max(dist,1))*wave*4,y:y+((y-cy)/Math.max(dist,1))*wave*4,l:Math.pow((wave+1)/2,5)};}));
+context.strokeStyle=ink;context.fillStyle=ink;context.lineWidth=0.65;
+points.forEach((row,r)=>row.forEach((p,c)=>{
+context.globalAlpha=0.035+p.l*0.055;context.beginPath();
+if(c+1<cols){context.moveTo(p.x,p.y);context.lineTo(row[c+1].x,row[c+1].y);}
+if(r+1<rows){context.moveTo(p.x,p.y);context.lineTo(points[r+1][c].x,points[r+1][c].y);}
+context.stroke();
+context.globalAlpha=0.15+p.l*0.55;context.beginPath();
+context.arc(p.x,p.y,0.85+p.l*0.65,0,Math.PI*2);context.fill();}));
+context.globalAlpha=1;}`;
+
+const escapeHtml = (value: string) =>
+  value.replace(
+    /[&<>"']/g,
+    (char) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[char] ?? char,
+  );
+
+/**
+ * A standalone page for the web's "Preparing preview…" surface: the animated
+ * ripple filling the page with a steady label, for a web view while the
+ * assistant is still writing the preview. Never contains the unfinished fence.
+ */
+export function previewLoadingDocument(options: {
+  scheme: "light" | "dark";
+  label?: string;
+  labelColor?: string;
+  reducedMotion?: boolean;
+}): string {
+  const colors = PREVIEW_LOADING_COLORS[options.scheme];
+  const label = escapeHtml(options.label ?? "Preparing preview…");
+  const labelColor = options.labelColor ?? (options.scheme === "dark" ? "#a1a1a1" : "#6b6b6b");
+  return `<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><style>
+html,body{margin:0;height:100%;overflow:hidden;background:${colors.background};-webkit-user-select:none;user-select:none}
+canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
+span{position:fixed;left:16px;bottom:14px;color:${labelColor};font:400 12px/16px -apple-system,system-ui,sans-serif}
+</style></head><body><canvas aria-hidden="true"></canvas><span role="status">${label}</span><script>
+${PREVIEW_LOADING_PAINT_SCRIPT}
+(()=>{const canvas=document.querySelector("canvas");const context=canvas.getContext("2d");if(!context)return;
+const still=${options.reducedMotion === true};let time=2;let last;
+const draw=()=>{const w=canvas.clientWidth,h=canvas.clientHeight;if(!w||!h)return;const d=Math.min(window.devicePixelRatio||1,2);
+if(canvas.width!==Math.round(w*d)||canvas.height!==Math.round(h*d)){canvas.width=Math.round(w*d);canvas.height=Math.round(h*d);}
+context.setTransform(d,0,0,d,0,0);paintPreviewLoading(context,w,h,time,${JSON.stringify(colors.ink)},${JSON.stringify(colors.glow)});};
+const tick=(stamp)=>{if(!document.hidden){if(last!==undefined)time+=Math.min((stamp-last)/1000,0.05);last=stamp;draw();}else last=undefined;requestAnimationFrame(tick);};
+window.addEventListener("resize",draw);draw();if(!still)requestAnimationFrame(tick);})();
+</script></body></html>`;
+}

package/src/new-session-draft.ts

@@ -0,0 +1,22 @@
+/**
+ * The new-session composer's server-authoritative draft (text, model, options,
+ * project, attachments), shared by the web app and native apps so a draft
+ * started on one device continues on another.
+ */
+export {
+  isNewSessionDraftConflict,
+  useNewSessionDraft,
+  type AcknowledgeConsumedNewSessionDraftResult,
+  type FlushedNewSessionDraft,
+  type NewSessionDraftEditable,
+  type UseNewSessionDraftOptions,
+  type UseNewSessionDraftResult,
+} from "./hooks/use-new-session-draft";
+export {
+  isTransientServiceFailure,
+  OPENGENI_UPDATING_NOTICE,
+  retryTransient,
+  TRANSIENT_RECONNECT_INTERVAL_MS,
+  TRANSIENT_RETRY_DELAYS_MS,
+  type RetryTransientOptions,
+} from "./lib/transient-retry";