@opengeni/react 6.1.0-canary.3 → 6.1.0-canary.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "6.1.0-canary.3",
+  "version": "6.1.0-canary.4",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -133,8 +133,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "^0.2.0-canary.14",
-    "@opengeni/sdk": "^6.1.0-canary.3",
+    "@opengeni/connect": "^0.2.0-canary.15",
+    "@opengeni/sdk": "^6.1.0-canary.4",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/components/markdown.tsx

@@ -26,6 +26,7 @@ import { tableElementToTsv } from "../lib/clipboard";
 import { prefersReducedMotion } from "../lib/motion";
 import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
 import { CopyButton } from "./copy-button";
+import { PreviewLoading } from "./preview-loading";
 import type { observeMarkdownTableLayout } from "./markdown-table-layout";
 import { softenStreamingMarkdown } from "./soften-streaming-markdown";
 import { createStreamReveal, rehypeStreamReveal, type StreamReveal } from "./stream-reveal";
@@ -434,13 +435,17 @@ function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"
     if (!complete) {
       return (
         <div role="status" aria-live="polite" aria-busy={streaming === true} className="my-3">
-          <ActivityDisclosure
-            icon={<PanelsTopLeftIcon aria-hidden className="size-3.5" />}
-            title={streaming ? "Preparing preview…" : "Preview incomplete"}
-            running={streaming === true}
-            expandable={false}
-            preview={streaming ? undefined : "Generation stopped before the preview was ready."}
-          />
+          {streaming ? (
+            <PreviewLoading />
+          ) : (
+            <ActivityDisclosure
+              icon={<PanelsTopLeftIcon aria-hidden className="size-3.5" />}
+              title="Preview incomplete"
+              running={false}
+              expandable={false}
+              preview="Generation stopped before the preview was ready."
+            />
+          )}
         </div>
       );
     }

package/src/components/preview-loading.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef } from "react";
+
+/** Private loading surface: never receives or executes the unfinished fence. */
+export function PreviewLoading() {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    let ctx: CanvasRenderingContext2D | null;
+    try {
+      ctx = canvas.getContext("2d");
+    } catch {
+      return; // The CSS grid and status remain when canvas is unavailable.
+    }
+    if (!ctx) return;
+    const context = ctx;
+    const motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    let frame: number | undefined;
+    let time = 2;
+    let last: number | undefined;
+    let disposed = false;
+    // Without visibility observation, keep a static surface rather than doing
+    // unbounded work for previews that may be outside the viewport.
+    let visible = false;
+    const canAnimate = () => !disposed && visible && !document.hidden && motion?.matches === false;
+
+    function draw() {
+      const w = canvas!.clientWidth;
+      const h = canvas!.clientHeight;
+      if (!w || !h || document.hidden || disposed) 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);
+      }
+      const style = getComputedStyle(canvas!);
+      const ink = style.getPropertyValue("--_og-preview-ink").trim() || "#bca3ef";
+      const glowColor = style.getPropertyValue("--_og-preview-glow").trim() || "#8f6ccc";
+      context.setTransform(d, 0, 0, d, 0, 0);
+      context.clearRect(0, 0, w, h);
+      const cx = w * (0.5 + 0.13 * Math.sin(time * 0.21));
+      const cy = h * (0.5 + 0.12 * Math.cos(time * 0.27));
+      const glow = context.createRadialGradient(cx, cy, 0, cx, cy, Math.max(w, h) * 0.65);
+      glow.addColorStop(0, glowColor);
+      glow.addColorStop(1, "transparent");
+      context.globalAlpha = 0.09;
+      context.fillStyle = glow;
+      context.fillRect(0, 0, w, h);
+      const rows = Math.ceil(h / 18) + 7;
+      const cols = Math.ceil(w / 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;
+      canvas!.dataset.painted = "true";
+    }
+
+    function stop() {
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
+      frame = undefined;
+      last = undefined;
+    }
+    function tick(stamp: number) {
+      frame = undefined;
+      if (!canAnimate()) return;
+      if (last !== undefined) time += Math.min((stamp - last) / 1000, 0.05);
+      last = stamp;
+      draw();
+      frame = window.requestAnimationFrame(tick);
+    }
+    function refresh() {
+      stop();
+      if (disposed || document.hidden || (!visible && intersection)) return;
+      draw();
+      if (canAnimate() && typeof window.requestAnimationFrame === "function") {
+        frame = window.requestAnimationFrame(tick);
+      }
+    }
+    const intersection =
+      typeof IntersectionObserver === "function"
+        ? new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting === true;
+            refresh();
+          })
+        : undefined;
+    intersection?.observe(canvas);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(refresh) : undefined;
+    resize?.observe(canvas);
+    // Observe only ancestors, not the document subtree. This also updates the
+    // static reduced-motion canvas when a host changes its local theme.
+    const theme =
+      typeof MutationObserver === "function" ? new MutationObserver(refresh) : undefined;
+    for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      theme?.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-og-theme"],
+      });
+    }
+    motion?.addEventListener?.("change", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    window.addEventListener("resize", refresh);
+    // Old hosts get one still frame; observed surfaces wait until onscreen.
+    if (!intersection) draw();
+    return () => {
+      disposed = true;
+      stop();
+      intersection?.disconnect();
+      resize?.disconnect();
+      theme?.disconnect();
+      motion?.removeEventListener?.("change", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+      window.removeEventListener("resize", refresh);
+    };
+  }, []);
+
+  return (
+    <div className="og-preview-loading">
+      <canvas ref={ref} aria-hidden="true" />
+      <span className="og-preview-loading-label">Preparing preview…</span>
+    </div>
+  );
+}

package/src/connect-setup.tsx

@@ -35,6 +35,8 @@ export type ConnectSetupProps = {
   controller: ConnectController;
   /** Called synchronously in the click handler so a host can open a popup. */
   onAuthorize: (attempt: ConnectAttempt) => void | Promise<unknown>;
+  /** Called synchronously on Continue; hosts can reserve a popup before advancing. */
+  onSelectAccount?: (accountId: string) => void | Promise<unknown>;
   /** Host pagination must retain selections across pages and submit the final set. */
   onBrowseResources?: (attempt: ConnectAttempt) => void | Promise<unknown>;
   className?: string;
@@ -61,11 +63,13 @@ function ScopedSetup({
   controller,
   onAuthorize,
   onBrowseResources,
+  onSelectAccount,
   className,
   authorizeLabel = "Authorize connection",
 }: ConnectSetupProps) {
   const view = useConnect(controller);
   const [localError, setLocalError] = useState(false);
+  const [navigating, setNavigating] = useState(false);
   const invoke = (operation: () => unknown | Promise<unknown>) => {
     setLocalError(false);
     try {
@@ -91,7 +95,7 @@ function ScopedSetup({
     event.preventDefault();
     const form = event.currentTarget;
     const data = new FormData(form);
-    if (view.busy) return;
+    if (view.busy || navigating) return;
     const key = crypto.randomUUID();
     if (action.type === "credentials") {
       const values = Object.fromEntries(
@@ -105,7 +109,15 @@ function ScopedSetup({
       if (
         action.accounts.some((account) => account.id === accountId && account.status !== "disabled")
       )
-        invoke(() => view.advance({ type: "account", accountId }, key));
+        invoke(async () => {
+          if (!onSelectAccount) return view.advance({ type: "account", accountId }, key);
+          setNavigating(true);
+          try {
+            await onSelectAccount(accountId);
+          } finally {
+            setNavigating(false);
+          }
+        });
     } else if (action.type === "select_resources") {
       if (action.cursor) return;
       const resourceIds = data.getAll("resource").map(String);
@@ -129,7 +141,7 @@ function ScopedSetup({
     <section
       className={["og-connect-setup", className].filter(Boolean).join(" ")}
       aria-label="Connection setup"
-      aria-busy={view.busy}
+      aria-busy={view.busy || navigating}
     >
       <div className="og-connect-setup-summary">
         <p className="og-connect-setup-scope">
@@ -154,7 +166,7 @@ function ScopedSetup({
       )}
       {!terminal && (
         <form key={`${attempt.id}:${attempt.revision}`} onSubmit={submit} autoComplete="off">
-          <fieldset disabled={view.busy}>
+          <fieldset disabled={view.busy || navigating}>
             {["credentials", "select_account", "select_resources", "preview"].includes(
               action.type,
             ) ? (
@@ -261,7 +273,7 @@ function ScopedSetup({
                 className="og-connect-setup-primary"
                 onClick={() => invoke(() => onAuthorize(structuredClone(attempt)))}
               >
-                {authorizeLabel}
+                {navigating ? "Waiting for authorization…" : authorizeLabel}
               </button>
             )}
             {action.type === "wait" && (

package/src/hooks/use-composer.ts

@@ -1478,6 +1478,9 @@ export function useComposer(
               ...(wireInput.connectionAuthorities
                 ? { connectionAuthorities: wireInput.connectionAuthorities }
                 : {}),
+              ...(wireInput.selectedHostMcpDelegations
+                ? { selectedHostMcpDelegations: wireInput.selectedHostMcpDelegations }
+                : {}),
               ...(wireInput.personalResourceAttachment
                 ? { personalResourceAttachment: wireInput.personalResourceAttachment }
                 : {}),
@@ -1754,6 +1757,9 @@ export function useComposer(
             ...(input.connectionAuthorities
               ? { connectionAuthorities: input.connectionAuthorities }
               : {}),
+            ...(input.selectedHostMcpDelegations
+              ? { selectedHostMcpDelegations: input.selectedHostMcpDelegations }
+              : {}),
             ...(input.personalResourceAttachment
               ? { personalResourceAttachment: input.personalResourceAttachment }
               : {}),

package/src/realtime/realtime-control.tsx

@@ -1105,16 +1105,14 @@ export function RealtimeVoiceModelPanel(props: {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col" data-testid="realtime-voice-model-panel">
-      <div className="flex shrink-0 items-start gap-1 px-2 pt-1 pb-1.5">
+      <div className="flex min-h-10 shrink-0 items-center gap-2 border-b border-og-border px-2 pb-2">
         {props.leading}
-        <div className="min-w-0">
-          <div className="text-og-menu font-medium text-og-fg">Voice model</div>
-          <p className="mt-0.5 text-og-control text-og-fg-subtle">
-            Used when you start a voice conversation.
-          </p>
-        </div>
+        <div className="min-w-0 flex-1 text-og-menu font-medium text-og-fg">Voice model</div>
       </div>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-1.5 pb-1.5">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2">
+        <p className="mb-3 text-og-control text-og-fg-muted">
+          Used when you start a voice conversation.
+        </p>
         <RealtimeModelPickerMenu
           models={props.models}
           selectedModel={props.selectedModel}

package/styles/compiled.css

@@ -608,6 +608,54 @@
   --_og-session-chrome-ease: var(--og-session-chrome-ease, var(--og-ease-out));
   --_og-session-chrome-row-hover: var(--og-session-chrome-row-hover, var(--og-color-surface-3));
 }
+:where(.og-root).og-preview-loading,:where(.og-root) .og-preview-loading {
+  --_og-preview-ink: #bca3ef;
+  --_og-preview-glow: #8f6ccc;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #17161d;
+  container: og-preview / inline-size;
+}
+:where(.og-root):is([data-og-theme="light"], .og-light) .og-preview-loading, :is([data-og-theme="light"], .og-light) :where(.og-root) .og-preview-loading,:where(.og-root) :is([data-og-theme="light"], .og-light) .og-preview-loading {
+  --_og-preview-ink: #76629c;
+  --_og-preview-glow: #ba8ee0;
+  background: #faf9fd;
+}
+:where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+  display: block;
+  width: 100%;
+  height: 320px;
+  background-image: radial-gradient(circle, var(--_og-preview-ink) 1px, transparent 1px);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-image: radial-gradient(circle, color-mix(in srgb, var(--_og-preview-ink) 30%, transparent) 1px, transparent 1px);
+  }
+  background-size: 18px 18px;
+}
+:where(.og-root).og-preview-loading canvas[data-painted="true"],:where(.og-root) .og-preview-loading canvas[data-painted="true"] {
+  background-image: none;
+}
+:where(.og-root).og-preview-loading-label,:where(.og-root) .og-preview-loading-label {
+  position: absolute;
+  left: 16px;
+  bottom: 14px;
+  color: var(--og-color-fg-muted);
+  font-family: var(--og-font-sans);
+  font-size: var(--og-font-size-xs);
+  line-height: var(--og-line-height-xs);
+  font-weight: 400;
+}
+@container og-preview (max-width: 500px) {
+  :where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+    height: 260px;
+  }
+}
+@media (max-width: 500px) {
+  :where(.og-root).og-preview-loading canvas,:where(.og-root) .og-preview-loading canvas {
+    height: 260px;
+  }
+}
 .og-root :where([hidden]:not([hidden="until-found"])) {
     display: none !important;
   }

package/styles/index.css

@@ -17,6 +17,51 @@
 @import "./tokens.css";
 @import "./effective-tokens.css";
 
+/* Full-surface preview preparation. Private palette preserves the accepted
+   ripple study; the steady label uses the host's typography and text tokens. */
+.og-preview-loading {
+  --_og-preview-ink: #bca3ef;
+  --_og-preview-glow: #8f6ccc;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #17161d;
+  container: og-preview / inline-size;
+}
+.og-root:is([data-og-theme="light"], .og-light) .og-preview-loading,
+:is([data-og-theme="light"], .og-light) .og-root .og-preview-loading,
+.og-root :is([data-og-theme="light"], .og-light) .og-preview-loading {
+  --_og-preview-ink: #76629c;
+  --_og-preview-glow: #ba8ee0;
+  background: #faf9fd;
+}
+.og-preview-loading canvas {
+  display: block;
+  width: 100%;
+  height: 320px;
+  /* Non-canvas / pre-effect fallback, removed only after a successful paint. */
+  background-image: radial-gradient(circle, color-mix(in srgb, var(--_og-preview-ink) 30%, transparent) 1px, transparent 1px);
+  background-size: 18px 18px;
+}
+.og-preview-loading canvas[data-painted="true"] { background-image: none; }
+.og-preview-loading-label {
+  position: absolute;
+  left: 16px;
+  bottom: 14px;
+  color: var(--og-color-fg-muted);
+  font-family: var(--og-font-sans);
+  font-size: var(--og-font-size-xs);
+  line-height: var(--og-line-height-xs);
+  font-weight: 400;
+}
+@container og-preview (max-width: 500px) {
+  .og-preview-loading canvas { height: 260px; }
+}
+@media (max-width: 500px) {
+  .og-preview-loading canvas { height: 260px; }
+}
+
 /* Standalone embeds do not necessarily load Tailwind Preflight. Keep the
    control reset inside SDK roots, before utilities, without resetting the host.
    :where keeps controls at the same specificity as component utilities. */