@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

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/components/sandbox-workspace.tsx

@@ -119,19 +119,6 @@ function sourceDrivenDefaultTab(
   return null;
 }
 
-function captureDegradedMessage(reason: string): string {
-  switch (reason) {
-    case "repository_discovery_timed_out":
-      return "Workspace capture is incomplete because repository discovery timed out. Live files remain authoritative.";
-    case "repository_discovery_result_limit_exceeded":
-      return "Workspace capture is incomplete because the repository limit was exceeded. Live files remain authoritative.";
-    case "repository_read_unavailable":
-      return "Workspace capture is incomplete because repository changes could not be read. Live files remain authoritative.";
-    default:
-      return "Workspace capture is incomplete because repository discovery failed. Live files remain authoritative.";
-  }
-}
-
 function WorkbenchSurfaceLoading({ name }: { name: "Browser" | "Desktop" }) {
   return (
     <CenteredState
@@ -555,23 +542,6 @@ export function useSandboxWorkspaceTabs(
     if (advertised.length > 0) return advertised;
     return captureState.capture?.repos.map((repo) => repo.root) ?? [];
   }, [capabilities?.Git.repos, captureState.capture]);
-  const notifiedCaptureDegradedReason = useRef<{
-    sessionId: string;
-    reason: string | null;
-  }>({
-    sessionId,
-    reason: null,
-  });
-  if (notifiedCaptureDegradedReason.current.sessionId !== sessionId) {
-    notifiedCaptureDegradedReason.current = { sessionId, reason: null };
-  }
-  useEffect(() => {
-    const reason = captureState.degradedReason;
-    if (!reason || notifiedCaptureDegradedReason.current.reason === reason) return;
-    notifiedCaptureDegradedReason.current = { sessionId, reason };
-    onNotify?.({ kind: "error", message: captureDegradedMessage(reason) });
-  }, [sessionId, captureState.degradedReason, onNotify]);
-
   const files = useSandboxFiles(sessionId, {
     events,
     // No passive Channel-A reads while cold, even after a conclusive capture
@@ -743,6 +713,7 @@ export function useSandboxWorkspaceTabs(
             comparison={changesComparison}
             onComparisonChange={setChangesComparison}
             captureAvailable={captureAvailable}
+            captureDegraded={captureState.degradedReason !== null}
             captureRevision={captureState.revision}
             capturePending={capturePending}
             liveWorkspaceExpected={liveWorkspaceExpected}
@@ -928,6 +899,7 @@ export function useSandboxWorkspaceTabs(
     browserEnabled,
     desktopEnabled,
     captureAvailable,
+    captureState.degradedReason,
     dirtyCount,
     warmTerminal,
     requestedFilePath,
@@ -1354,6 +1326,7 @@ function ChangesTabContent({
   git,
   comparison,
   captureAvailable,
+  captureDegraded,
   captureRevision,
   capturePending,
   liveWorkspaceExpected,
@@ -1367,6 +1340,7 @@ function ChangesTabContent({
   git: UseSandboxGitResult;
   comparison: SandboxGitComparison;
   captureAvailable: boolean;
+  captureDegraded: boolean;
   captureRevision: number | null;
   capturePending: boolean;
   liveWorkspaceExpected: boolean;
@@ -1460,6 +1434,8 @@ function ChangesTabContent({
   }
 
   if (!liveWorkspaceExpected && (comparison !== "working" || !captureAvailable)) {
+    // Staged changes are live-only; a failed saved preview is not their blocker.
+    const previewUnavailable = captureDegraded && !captureAvailable && comparison !== "staged";
     return (
       <CenteredState
         icon={
@@ -1468,22 +1444,30 @@ function ChangesTabContent({
               className="size-5 animate-spin motion-reduce:animate-none"
               aria-hidden
             />
+          ) : previewUnavailable ? (
+            <TriangleAlertIcon className="size-5" aria-hidden />
           ) : (
             <CpuIcon className="size-5" aria-hidden />
           )
         }
       >
         <p className="text-og-sm font-medium text-og-fg">
-          {workspaceWaking ? "Waking workspace" : "Workspace is resting"}
+          {workspaceWaking
+            ? "Waking workspace"
+            : previewUnavailable
+              ? "Saved changes preview is unavailable"
+              : "Workspace is resting"}
         </p>
         <p className="text-og-sm leading-5 text-og-fg-subtle">
           {workspaceWaking
             ? "Connecting to the live working tree…"
-            : comparison === "branch"
-              ? "Wake the sandbox to compare this branch with the remote default branch."
-              : comparison === "staged"
-                ? "Wake the sandbox to inspect staged changes."
-                : "No captured revision is available yet. Wake the sandbox to inspect uncommitted changes."}
+            : previewUnavailable
+              ? "Open the live workspace to view current changes."
+              : comparison === "branch"
+                ? "Wake the sandbox to compare this branch with the remote default branch."
+                : comparison === "staged"
+                  ? "Wake the sandbox to inspect staged changes."
+                  : "No captured revision is available yet. Wake the sandbox to inspect uncommitted changes."}
         </p>
         {!workspaceWaking ? (
           <DockActionButton onClick={onWake}>

package/src/components/session-capability-frame.tsx

@@ -0,0 +1,163 @@
+import { CheckIcon, ShieldCheckIcon, XIcon } from "lucide-react";
+import { Dialog } from "radix-ui";
+import { useRef, useState, type ReactNode, type RefObject } from "react";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+
+export type SessionCapabilityFrameProps = {
+  name: string;
+  subtitle: string;
+  logo: string | null;
+  typeLabel: string;
+  description: string;
+  skill: boolean;
+  expanded: boolean;
+  complete: boolean;
+  actionLabel: string;
+  note: string;
+  onOpen(): void;
+  onClose(): void;
+  busy?: boolean;
+  opener?: RefObject<HTMLButtonElement | null>;
+  cardRef?: RefObject<HTMLElement | null>;
+  children?: ReactNode;
+  /** A catalogue row can own the opener while reusing the same details dialog. */
+  dialogOnly?: boolean;
+};
+
+function Mark({ src, name }: { src: string | null; name: string }) {
+  const [failed, setFailed] = useState<string | null>(null);
+  return (
+    <span className="og-session-capability-logo" aria-hidden>
+      {src && failed !== src ? (
+        <img src={src} alt="" loading="lazy" decoding="async" onError={() => setFailed(src)} />
+      ) : (
+        name.trim().slice(0, 2).toUpperCase()
+      )}
+    </span>
+  );
+}
+
+/** The same conversation card in the console and embedded clients. Setup
+ * content owns the provider flow; this frame owns identity and protected focus. */
+export function SessionCapabilityFrame({
+  name,
+  subtitle,
+  logo,
+  typeLabel,
+  description,
+  skill,
+  expanded,
+  complete,
+  actionLabel,
+  note,
+  onOpen,
+  onClose,
+  busy = false,
+  opener,
+  cardRef,
+  children,
+  dialogOnly = false,
+}: SessionCapabilityFrameProps) {
+  const localOpener = useRef<HTMLButtonElement>(null);
+  const localCard = useRef<HTMLElement>(null);
+  const buttonRef = opener ?? localOpener;
+  const sectionRef = cardRef ?? localCard;
+  const portalStyle = usePortalTokenStyle(sectionRef.current);
+  const identity = (
+    <>
+      <Mark src={logo} name={name} />
+      <div className="og-session-capability-identity">
+        <h3>{name}</h3>
+        <span>{subtitle}</span>
+      </div>
+      <span className="og-session-capability-type">{typeLabel}</span>
+    </>
+  );
+  return (
+    <div className="og-session-capability">
+      <section
+        hidden={dialogOnly}
+        style={dialogOnly ? { display: "none" } : undefined}
+        ref={sectionRef}
+        tabIndex={-1}
+        aria-label={`${name} setup`}
+        data-state={complete ? "complete" : expanded ? "setup" : "suggested"}
+        className="og-session-capability-shell"
+      >
+        <div className="og-session-capability-header">
+          {identity}
+          {complete ? <CheckIcon size={16} aria-hidden /> : null}
+        </div>
+        {complete ? (
+          <p role="status" className="og-session-capability-copy">
+            {skill ? "Installed · Workspace" : "Connected · Available in this conversation"}
+          </p>
+        ) : (
+          <>
+            <p className="og-session-capability-copy">{description}</p>
+            <div className="og-session-capability-actions">
+              <span>
+                <ShieldCheckIcon size={13} aria-hidden />
+                {skill ? "Guidance only · no account access" : "You choose what to authorize"}
+              </span>
+              <button
+                ref={buttonRef}
+                type="button"
+                onClick={onOpen}
+                aria-haspopup="dialog"
+                aria-expanded={expanded}
+              >
+                {actionLabel}
+              </button>
+            </div>
+          </>
+        )}
+      </section>
+      {!complete && !dialogOnly ? <p className="og-session-capability-note">{note}</p> : null}
+      <Dialog.Root
+        open={expanded && !complete}
+        onOpenChange={(open) => {
+          if (!open && !busy) onClose();
+        }}
+      >
+        <Dialog.Portal>
+          <Dialog.Overlay className="og-root og-session-capability-overlay" style={portalStyle} />
+          <Dialog.Content
+            className="og-root og-session-capability-dialog"
+            style={portalStyle}
+            onEscapeKeyDown={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onInteractOutside={(event) => {
+              if (busy) event.preventDefault();
+            }}
+            onCloseAutoFocus={(event) => {
+              event.preventDefault();
+              const target = buttonRef.current?.isConnected
+                ? buttonRef.current
+                : sectionRef.current;
+              if (target?.isConnected) target.focus();
+            }}
+          >
+            <div className="og-session-capability-dialog-header">
+              <Mark src={logo} name={name} />
+              <div>
+                <Dialog.Title>{name}</Dialog.Title>
+                <Dialog.Description>
+                  {typeLabel}
+                  {subtitle ? ` · ${subtitle}` : ""}
+                </Dialog.Description>
+              </div>
+              {!busy ? (
+                <Dialog.Close aria-label="Close connection setup">
+                  <XIcon size={18} />
+                </Dialog.Close>
+              ) : null}
+            </div>
+            <div className="og-session-capability-dialog-body">{children}</div>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </div>
+  );
+}