@tangle-network/sandbox-ui 0.12.0 → 0.14.0

package/dist/terminal.js

@@ -1,6 +1,6 @@
 import {
   usePtySession
-} from "./chunk-ESVYBDGA.js";
+} from "./chunk-AG7QDC2Q.js";
 
 // src/terminal/terminal-view.tsx
 import "@xterm/xterm/css/xterm.css";
@@ -48,8 +48,19 @@ function TerminalView({
   const containerRef = useRef(null);
   const termRef = useRef(null);
   const fitAddonRef = useRef(null);
+  const pendingWritesRef = useRef([]);
+  const writeRafRef = useRef(null);
   const onData = useCallback((data) => {
-    termRef.current?.write(data);
+    if (!data) return;
+    pendingWritesRef.current.push(data);
+    if (writeRafRef.current !== null) return;
+    writeRafRef.current = requestAnimationFrame(() => {
+      writeRafRef.current = null;
+      const chunks = pendingWritesRef.current;
+      if (chunks.length === 0) return;
+      pendingWritesRef.current = [];
+      termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
+    });
   }, []);
   const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
     apiUrl,
@@ -74,6 +85,25 @@ function TerminalView({
     term.loadAddon(fitAddon);
     term.loadAddon(webLinksAddon);
     term.open(containerRef.current);
+    let webglAddon = null;
+    let webglCancelled = false;
+    void (async () => {
+      try {
+        const mod = await import("@xterm/addon-webgl");
+        if (webglCancelled) return;
+        try {
+          const addon = new mod.WebglAddon();
+          addon.onContextLoss(() => {
+            webglAddon?.dispose();
+            webglAddon = null;
+          });
+          webglAddon = addon;
+          term.loadAddon(addon);
+        } catch {
+        }
+      } catch {
+      }
+    })();
     requestAnimationFrame(() => {
       fitAddon.fit();
     });
@@ -102,7 +132,14 @@ function TerminalView({
     });
     ro.observe(containerRef.current);
     return () => {
+      webglCancelled = true;
       ro.disconnect();
+      if (writeRafRef.current !== null) {
+        cancelAnimationFrame(writeRafRef.current);
+        writeRafRef.current = null;
+      }
+      pendingWritesRef.current = [];
+      webglAddon?.dispose();
       term.dispose();
       termRef.current = null;
       fitAddonRef.current = null;

package/dist/{use-sandbox-metrics-B64diPqN.d.ts → use-sandbox-metrics-DWc0k9Xm.d.ts}

@@ -46,7 +46,7 @@ interface UsePtySessionOptions {
     onData: (data: string) => void;
 }
 interface UsePtySessionReturn {
-    /** Whether the SSE stream is connected and receiving data. */
+    /** Whether the underlying transport is connected and receiving data. */
     isConnected: boolean;
     /** Connection or API error, if any. */
     error: string | null;
@@ -60,11 +60,23 @@ interface UsePtySessionReturn {
 /**
  * Manages a PTY session against the sidecar terminal API.
  *
- * Protocol:
- * - POST /terminals              → create session → { data: { sessionId } }
- * - GET  /terminals/{id}/stream  → SSE output (raw PTY with ANSI codes)
- * - POST /terminals/{id}/input   → send input     { data: "..." }
- * - DELETE /terminals/{id}       → close session
+ * Transport:
+ *   1. POST /terminals creates the session.
+ *   2. The hook tries WebSocket: GET /terminals/:id/ws (Upgrade).
+ *      - Server → client: TEXT frames carrying raw PTY output.
+ *      - Client → server: BINARY frames carrying stdin (UTF-8); TEXT
+ *        frames carrying JSON control messages (`{"type":"resize",...}`).
+ *   3. If the WS does not reach OPEN within WS_OPEN_TIMEOUT_MS, or it
+ *      errors before opening, the hook falls back to SSE+POST:
+ *      - GET /terminals/:id/stream (SSE for output)
+ *      - POST /terminals/:id/input (one batched POST at a time)
+ *      - PATCH /terminals/:id (resize)
+ *   4. DELETE /terminals/:id closes the session (both transports).
+ *
+ * The WS path eliminates the per-keystroke HTTP round-trip that
+ * dominates typing latency through edge proxies; the HTTP+SSE path is
+ * preserved as a fallback so the hook keeps working against
+ * deployments that have not yet shipped the WS endpoint.
  */
 declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -105,6 +105,7 @@
     "test:watch": "vitest"
   },
   "peerDependencies": {
+    "@tangle-network/brand": "^0.2.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
@@ -118,6 +119,9 @@
     "@xterm/addon-web-links": {
       "optional": true
     },
+    "@xterm/addon-webgl": {
+      "optional": true
+    },
     "@tanstack/react-query": {
       "optional": true
     },
@@ -189,6 +193,7 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
+    "@tangle-network/brand": "^0.2.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -204,9 +209,11 @@
     "@types/turndown": "^5.0.6",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "jsdom": "^29.0.2",
     "postcss": "^8.5.8",
+    "postcss-import": "^16.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.6.18",