@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/components/remark-soft-line-breaks.ts

@@ -0,0 +1,166 @@
+/**
+ * remark: render a single newline inside prose as a line break.
+ *
+ * CommonMark folds a lone line ending inside a paragraph into a space, so an
+ * agent writing `1\n2\n3` shows "1 2 3". Chat surfaces (ChatGPT, GitHub
+ * comments) keep the line, which is what message authors expect. This plugin
+ * turns every line ending inside an mdast `text` node into a `break` node — the
+ * same result as `remark-breaks` — while leaving code (`code` / `inlineCode`
+ * carry `value`, not `text` children), raw HTML, and block structure (lists,
+ * tables, blockquotes, headings, blank-line paragraphs) untouched.
+ *
+ * Unlike `remark-breaks` (built on `mdast-util-find-and-replace`, which drops
+ * positions on the split nodes), every split text node keeps a source position.
+ * Streaming tip ink (`rehypeStreamReveal`) keys fade-in on those offsets, so a
+ * positionless line would render without ink and snap in at the stream tail.
+ *
+ * Structural local types keep the module dependency-free, like
+ * `stream-reveal.ts`; the renderer casts once at the plugin seam.
+ */
+
+type MdPoint = {
+  line?: number | undefined;
+  column?: number | undefined;
+  offset?: number | undefined;
+};
+
+type MdPosition = { start?: MdPoint | undefined; end?: MdPoint | undefined };
+
+type MdNode = {
+  type: string;
+  value?: string | undefined;
+  position?: MdPosition | undefined;
+  children?: MdNode[] | undefined;
+};
+
+type ExactPoint = { line: number; column: number; offset: number };
+
+const LINE_ENDING = /\r\n|\r|\n/g;
+const HAS_LINE_ENDING = /[\r\n]/;
+/** Line-start syntax the parser strips from text values: indentation and blockquote markers. */
+const LINE_PREFIX = /[\t >]*/y;
+
+export function remarkSoftLineBreaks() {
+  return (tree: MdNode, file?: { value?: unknown } | undefined) => {
+    walk(tree, typeof file?.value === "string" ? file.value : undefined);
+  };
+}
+
+function walk(node: MdNode, source: string | undefined): void {
+  if (!node.children) {
+    return;
+  }
+  let next: MdNode[] | null = null;
+  for (let index = 0; index < node.children.length; index += 1) {
+    const child = node.children[index]!;
+    if (
+      child.type === "text" &&
+      typeof child.value === "string" &&
+      HAS_LINE_ENDING.test(child.value)
+    ) {
+      next ??= node.children.slice(0, index);
+      next.push(...splitText(child, child.value, source));
+      continue;
+    }
+    walk(child, source);
+    next?.push(child);
+  }
+  if (next !== null) {
+    node.children = next;
+  }
+}
+
+function splitText(node: MdNode, value: string, source: string | undefined): MdNode[] {
+  const segments: { value: string; index: number }[] = [];
+  let cursor = 0;
+  for (const match of value.matchAll(LINE_ENDING)) {
+    segments.push({ value: value.slice(cursor, match.index), index: cursor });
+    cursor = match.index + match[0].length;
+  }
+  segments.push({ value: value.slice(cursor), index: cursor });
+
+  const starts = segmentStarts(node, segments, source);
+  const nodeEnd = exactPoint(node.position?.end);
+  const out: MdNode[] = [];
+  segments.forEach((segment, k) => {
+    const start = starts?.[k];
+    const isLast = k === segments.length - 1;
+    const end =
+      start === undefined
+        ? undefined
+        : isLast && nodeEnd !== undefined
+          ? nodeEnd
+          : {
+              line: start.line,
+              column: start.column + segment.value.length,
+              offset: start.offset + segment.value.length,
+            };
+    if (segment.value.length > 0) {
+      out.push({
+        type: "text",
+        value: segment.value,
+        ...(start !== undefined && end !== undefined ? { position: { start, end } } : {}),
+      });
+    }
+    if (!isLast) {
+      const nextStart = starts?.[k + 1];
+      out.push({
+        type: "break",
+        ...(end !== undefined && nextStart !== undefined
+          ? { position: { start: end, end: nextStart } }
+          : {}),
+      });
+    }
+  });
+  return out;
+}
+
+/**
+ * Source start of each line segment. Text values drop each continuation line's
+ * indentation / `>` prefix, so offsets are re-anchored on the real source line
+ * when the node's source slice has the same number of line endings; otherwise
+ * (e.g. a newline produced by a character reference) fall back to the value
+ * index, the same approximation tip ink already makes within one text node.
+ */
+function segmentStarts(
+  node: MdNode,
+  segments: readonly { index: number }[],
+  source: string | undefined,
+): ExactPoint[] | undefined {
+  const start = exactPoint(node.position?.start);
+  if (start === undefined) {
+    return undefined;
+  }
+  const endOffset = node.position?.end?.offset;
+  const lineStarts: number[] = [];
+  if (source !== undefined && endOffset !== undefined && endOffset >= start.offset) {
+    for (const match of source.slice(start.offset, endOffset).matchAll(LINE_ENDING)) {
+      lineStarts.push(start.offset + match.index + match[0].length);
+    }
+  }
+  const anchoredSource = lineStarts.length === segments.length - 1 ? source : undefined;
+  return segments.map((segment, k) => {
+    if (k === 0) {
+      return start;
+    }
+    if (anchoredSource !== undefined) {
+      const lineStart = lineStarts[k - 1]!;
+      LINE_PREFIX.lastIndex = lineStart;
+      const prefix = LINE_PREFIX.exec(anchoredSource)?.[0].length ?? 0;
+      return { line: start.line + k, column: prefix + 1, offset: lineStart + prefix };
+    }
+    return { line: start.line + k, column: 1, offset: start.offset + segment.index };
+  });
+}
+
+function exactPoint(point: MdPoint | undefined): ExactPoint | undefined {
+  if (
+    point === undefined ||
+    typeof point.line !== "number" ||
+    typeof point.column !== "number" ||
+    typeof point.offset !== "number"
+  ) {
+    return undefined;
+  }
+  return { line: point.line, column: point.column, offset: point.offset };
+}

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.
@@ -526,7 +565,7 @@ function WakeButton({ children, onClick }: { children: ReactNode; onClick: () =>
     <button
       type="button"
       onClick={onClick}
-      className="mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md bg-og-accent-deep px-3 py-2 text-og-sm font-medium text-og-accent-fg shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg"
+      className="mt-1 inline-flex min-h-11 items-center justify-center rounded-og-md border border-og-primary-border bg-og-primary text-og-primary-fg px-3 py-2 text-og-sm font-medium transition-colors hover:bg-og-primary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-2 focus-visible:ring-offset-og-bg"
     >
       {children}
     </button>
@@ -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-terminal.tsx

@@ -1,5 +1,12 @@
 import type { TerminalCapability } from "@opengeni/sdk";
-import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { cn } from "../lib/cn";
 import { type TerminalStreamStatus, useTerminalStream } from "../hooks/use-terminal-stream";
 import type { UseSandboxTerminalResult } from "../hooks/use-sandbox-terminal";
@@ -7,6 +14,7 @@ import { resolveTerminalFont, xtermThemeFromTokens } from "../lib/xterm-theme";
 import { sandboxAcceptsLiveIo } from "../lib/sandbox-liveness";
 import { terminalCanAcquirePty } from "../lib/terminal-capability";
 import { attachRenderer, type RendererLoaders, type RendererTier } from "../lib/xterm-renderer";
+import { sandboxTerminalPeers } from "../lib/workbench-peers";
 
 /**
  * A COMPLETE xterm `ITheme` (subset by intent, but every field xterm colors a
@@ -114,6 +122,19 @@ type XtermLike = {
   };
 };
 type FitAddonLike = { fit: () => void };
+type TerminalPeerBundle = {
+  Terminal: new (options: Record<string, unknown>) => XtermLike;
+  FitAddon: new () => FitAddonLike;
+  WebLinksAddon: new (handler: (event: MouseEvent, uri: string) => void) => unknown;
+  loadWebgl?:
+    | (() => Promise<{
+        WebglAddon: new () => {
+          dispose: () => void;
+          onContextLoss?: (callback: () => void) => void;
+        };
+      }>)
+    | undefined;
+};
 
 export type TerminalSurfaceState =
   | "loading"
@@ -237,6 +258,12 @@ export function SandboxTerminal({
   const wroteFirehoseRef = useRef(false);
   const bootActiveRef = useRef(false);
   const [ready, setReady] = useState(false);
+  const [loadError, setLoadError] = useState<Error | null>(null);
+  const peerRevision = useSyncExternalStore(
+    sandboxTerminalPeers.subscribe,
+    sandboxTerminalPeers.revision,
+    sandboxTerminalPeers.revision,
+  );
   const [inputReady, setInputReady] = useState(false);
   const [activated, setActivated] = useState(false);
 
@@ -249,6 +276,8 @@ export function SandboxTerminal({
     write: ptyWrite,
     resize: resizePty,
     connected: ptyConnected,
+    inputReadiness,
+    useLegacyInput,
   } = useTerminalStream({
     // Connect only after xterm exists. This makes the renderer the sole output
     // owner from the first websocket frame and removes an otherwise unbounded
@@ -260,6 +289,8 @@ export function SandboxTerminal({
             url: ptyDescriptor ? terminalCapability!.url : null,
             token: ptyDescriptor ? terminalCapability!.token : null,
             expiresAt: ptyDescriptor ? terminalCapability!.expiresAt : null,
+            ptyCapable: terminalCapability!.ptyCapable,
+            reason: terminalCapability!.reason,
           }
         : null,
     onOutput: (data) => {
@@ -271,7 +302,8 @@ export function SandboxTerminal({
   // A pty-ws capability exclusively owns the screen even while connecting or
   // after a visible connection failure; never silently switch one terminal UI
   // between two PTYs. Input is enabled during the handshake because the stream
-  // hook buffers it strictly and flushes only after ttyd auth succeeds.
+  // hook buffers it strictly until negotiated readiness. Old servers are
+  // explicitly legacy: their transport-open state is not shell readiness.
   const ptyMode = ptyDescriptor;
   // Keep xterm stdin live for an attachable descriptor even before its URL has
   // arrived. Focus/click triggers the grant; any immediately following input is
@@ -287,7 +319,7 @@ export function SandboxTerminal({
   if (readOnly) terminalModeLabel = "read-only";
   else if (!ptyAttachable) terminalModeLabel = acceptsInput ? null : "output only";
   else if (ptyStatus === "error") terminalModeLabel = "connection error";
-  else if (acceptsInput) terminalModeLabel = null;
+  else if (acceptsInput) terminalModeLabel = inputReadiness === "legacy" ? "legacy input" : null;
   else terminalModeLabel = activated ? "connecting" : "connect on input";
 
   // Boot-in-terminal: after the user engages a not-yet-warm box, show styled
@@ -353,12 +385,10 @@ export function SandboxTerminal({
 
     ensureXtermBaseCss();
 
+    setLoadError(null);
     void (async () => {
-      const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
-        import("@xterm/xterm"),
-        import("@xterm/addon-fit"),
-        import("@xterm/addon-web-links"),
-      ]);
+      const { Terminal, FitAddon, WebLinksAddon, loadWebgl } =
+        (await sandboxTerminalPeers.load()) as TerminalPeerBundle;
       if (disposed) return;
       await waitForSize(el);
       if (disposed) return;
@@ -397,13 +427,17 @@ export function SandboxTerminal({
       const failSet = forcedRendererFailures();
       const loaders: RendererLoaders = {
         webgl: async (onLoss) => {
+          if (disposed) throw new Error("Terminal was disposed");
           if (failSet.has("webgl")) throw new Error("forced webgl failure");
-          const { WebglAddon } = await import("@xterm/addon-webgl");
+          if (!loadWebgl) throw new Error("WebGL terminal renderer is not enabled");
+          const { WebglAddon } = await loadWebgl();
+          if (disposed) throw new Error("Terminal was disposed");
           const addon = new WebglAddon() as unknown as {
             dispose: () => void;
             onContextLoss?: (cb: () => void) => void;
           };
           addon.onContextLoss?.(() => {
+            if (disposed) return;
             try {
               addon.dispose();
             } catch {
@@ -416,6 +450,7 @@ export function SandboxTerminal({
         },
       };
       await attachRenderer("webgl", loaders, (tier) => {
+        if (disposed) return;
         rendererRef.current = tier;
         el.setAttribute("data-og-term-renderer", tier);
       });
@@ -448,7 +483,9 @@ export function SandboxTerminal({
         }
         setReady(true);
       });
-    })();
+    })().catch((cause: unknown) => {
+      if (!disposed) setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+    });
 
     return () => {
       disposed = true;
@@ -461,9 +498,9 @@ export function SandboxTerminal({
       bootActiveRef.current = false;
       setReady(false);
     };
-    // Mount ONCE — see the effects below for the runtime option syncs.
+    // Mount once per peer registration; runtime options sync without a remount.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [peerRevision]);
 
   // Sync stdin/cursor at runtime (NOT a remount) when interactivity flips, so the
   // projection→PTY handoff keeps the single Terminal instance + its scrollback.
@@ -594,6 +631,11 @@ export function SandboxTerminal({
               <span
                 className="rounded-og-sm bg-og-surface-2 px-1.5 py-0.5 text-og-xs uppercase tracking-wide"
                 role="status"
+                title={
+                  inputReadiness === "legacy"
+                    ? "Shell readiness is not guaranteed. Wait for startup before typing."
+                    : undefined
+                }
               >
                 {terminalModeLabel}
               </span>
@@ -612,6 +654,29 @@ export function SandboxTerminal({
           </span>
         </div>
       )}
+      {ptyAttachable && !readOnly && !showHeader && inputReadiness === "legacy" && (
+        <p role="status" className="shrink-0 px-3 py-1 text-og-xs text-og-fg-subtle">
+          Legacy input — wait for shell startup before typing.
+        </p>
+      )}
+      {ptyAttachable && !readOnly && inputReadiness === "waiting" && (
+        <div className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-og-border px-3 py-2 text-og-xs text-og-fg-subtle">
+          <span role="status">
+            Waiting for shell readiness. Manual input clears buffered typing.
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              useLegacyInput();
+              termRef.current?.focus();
+            }}
+            title="Use for startup prompts or shells without readiness support. Early input is not guaranteed."
+            className="shrink-0 rounded-og-sm px-2 py-1 text-og-fg hover:bg-og-surface-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-og-accent pointer-coarse:min-h-11"
+          >
+            Use manual input
+          </button>
+        </div>
+      )}
       {/* `onPointerDownCapture`/`onFocusCapture` fire on the FIRST user engagement
           with the terminal surface (capture so they win even though xterm's own
           listeners stop propagation). The host warms the box for pty-ws here. The
@@ -621,7 +686,12 @@ export function SandboxTerminal({
         onPointerDownCapture={handleActivate}
         onFocusCapture={handleActivate}
       >
-        {!ready && (placeholder ?? <TerminalPlaceholder />)}
+        {!ready &&
+          (loadError ? (
+            <p role="alert">{loadError.message}</p>
+          ) : (
+            (placeholder ?? <TerminalPlaceholder />)
+          ))}
         {/* Kept `visibility:hidden` until the first successful fit so the first
             VISIBLE frame is already correctly sized (no 80×24 flash — E4). */}
         <div
@@ -633,6 +703,7 @@ export function SandboxTerminal({
           data-opengeni-terminal-interactive={surfaceState === "interactive" ? "true" : "false"}
           data-opengeni-terminal-state={surfaceState}
           data-opengeni-terminal-status={ptyAttachable ? ptyStatus : "firehose"}
+          data-opengeni-terminal-input-readiness={ptyAttachable ? inputReadiness : "firehose"}
         />
       </div>
     </div>