@tangle-network/sandbox-ui 0.3.12 → 0.3.13

package/README.md

@@ -222,6 +222,12 @@ For that, compose directly from:
 
 Retheming is absolutely supported, but the documentation was thinner than it should be. The token layer is strong; the higher-level surfaces are themeable, but more opinionated. For a radically different product look, prefer keeping the token contract and wrapping the higher-level workbench/chat surfaces rather than fighting every internal class.
 
+## Docs
+
+| Guide | Description |
+|-------|-------------|
+| [Sidebar](./docs/sidebar.md) | Composable Rail + Panel sidebar system (architecture, components, full API) |
+
 ## Subpath Exports
 
 | Subpath | Description |
@@ -232,7 +238,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 | `/workspace` | SandboxWorkbench, WorkspaceLayout, DirectoryPane, RuntimePane, StatusBar |
 | `/openui` | OpenUIArtifactRenderer and schema types for structured artifact rendering |
 | `/files` | FileTree, FilePreview, FileTabs, FileArtifactPane |
-| `/dashboard` | DashboardLayout, BillingDashboard, UsageChart, ProfileSelector |
+| `/dashboard` | [Sidebar](./docs/sidebar.md), DashboardLayout, BillingDashboard, UsageChart, ProfileSelector |
 | `/editor` | TipTap collaborative editor (requires optional peers) |
 | `/terminal` | xterm.js terminal view (requires optional peers) |
 | `/markdown` | Markdown renderer with GFM, code blocks, copy button |

package/dist/auth.js

@@ -3,9 +3,8 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-PCTEG6HR.js";
-import "./chunk-B26TQ7SA.js";
-import "./chunk-MCGKDCOR.js";
+} from "./chunk-OHMO7NUX.js";
+import "./chunk-IW2JZCOC.js";
 import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/{chunk-QMKWQF6F.js → chunk-DJEZKF5A.js}

@@ -18,7 +18,7 @@ import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-IAIJUFM6.js";
+} from "./chunk-HYLTXGOI.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";
@@ -712,6 +712,7 @@ function RuntimePane({
   subtitle = "Session state, execution output, and inspection surfaces",
   statusBanner,
   statusBar,
+  content,
   terminal,
   audit,
   inspector,
@@ -733,7 +734,7 @@ function RuntimePane({
         ] }),
         statusBanner && /* @__PURE__ */ jsx6(StatusBanner, { ...statusBanner }),
         statusBar && /* @__PURE__ */ jsx6(StatusBar, { ...statusBar }),
-        /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
+        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
           /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: terminal ? /* @__PURE__ */ jsx6(
             TerminalPanel,
             {

package/dist/chunk-DLCFZDGX.js

@@ -0,0 +1,182 @@
+// src/hooks/use-pty-session.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+function usePtySession({ apiUrl, token, onData }) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const sessionIdRef = useRef(null);
+  const abortRef = useRef(null);
+  const retryTimerRef = useRef(void 0);
+  const retryCountRef = useRef(0);
+  const mountedRef = useRef(true);
+  const onDataRef = useRef(onData);
+  onDataRef.current = onData;
+  const connectStreamRef = useRef(null);
+  const abortStream = useCallback(() => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = void 0;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+  }, []);
+  const cleanup = useCallback(() => {
+    abortStream();
+    if (sessionIdRef.current) {
+      const sid = sessionIdRef.current;
+      sessionIdRef.current = null;
+      fetch(`${apiUrl}/terminals/${sid}`, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` },
+        credentials: "include"
+      }).catch(() => {
+      });
+    }
+    setIsConnected(false);
+  }, [apiUrl, token, abortStream]);
+  const connectStream = useCallback(async (sessionId) => {
+    abortStream();
+    setError(null);
+    try {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const streamRes = await fetch(`${apiUrl}/terminals/${sessionId}/stream`, {
+        headers: { Authorization: `Bearer ${token}` },
+        credentials: "include",
+        signal: controller.signal
+      });
+      if (!streamRes.ok || !streamRes.body) {
+        const err = new Error(`SSE stream failed: ${streamRes.status}`);
+        err.httpStatus = streamRes.status;
+        throw err;
+      }
+      if (mountedRef.current) {
+        setIsConnected(true);
+        setError(null);
+        retryCountRef.current = 0;
+      }
+      const reader = streamRes.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const frames = buffer.split("\n\n");
+        buffer = frames.pop() ?? "";
+        for (const frame of frames) {
+          if (!frame.trim()) continue;
+          for (const line of frame.split("\n")) {
+            if (line.startsWith("data:")) {
+              const raw = line.slice(5).trim();
+              if (!raw) continue;
+              try {
+                const event = JSON.parse(raw);
+                if (event.type === "data.stdout" || event.type === "data.stderr") {
+                  const text = event.properties?.text ?? "";
+                  if (text && mountedRef.current) {
+                    onDataRef.current(text);
+                  }
+                }
+              } catch {
+                if (mountedRef.current) {
+                  onDataRef.current(raw);
+                }
+              }
+            }
+          }
+        }
+      }
+      if (mountedRef.current) {
+        setIsConnected(false);
+        retryTimerRef.current = setTimeout(() => {
+          if (mountedRef.current && sessionIdRef.current) {
+            connectStreamRef.current?.(sessionIdRef.current);
+          }
+        }, 1e3);
+      }
+    } catch (err) {
+      if (err.name === "AbortError") return;
+      if (mountedRef.current) {
+        const message = err instanceof Error ? err.message : "Stream connection failed";
+        setError(message);
+        setIsConnected(false);
+        const httpStatus = err.httpStatus;
+        const is4xx = httpStatus !== void 0 && httpStatus >= 400 && httpStatus < 500;
+        const MAX_RETRIES = 8;
+        if (!is4xx && retryCountRef.current < MAX_RETRIES) {
+          const delay = Math.min(3e3 * Math.pow(2, retryCountRef.current), 3e4);
+          retryCountRef.current++;
+          retryTimerRef.current = setTimeout(() => {
+            if (mountedRef.current && sessionIdRef.current) {
+              connectStreamRef.current?.(sessionIdRef.current);
+            }
+          }, delay);
+        }
+      }
+    }
+  }, [apiUrl, token, abortStream]);
+  connectStreamRef.current = connectStream;
+  const connect = useCallback(async () => {
+    cleanup();
+    retryCountRef.current = 0;
+    setError(null);
+    try {
+      const res = await fetch(`${apiUrl}/terminals`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include"
+      });
+      if (!res.ok) {
+        throw new Error(`Failed to create terminal: ${res.status}`);
+      }
+      const body = await res.json();
+      const sessionId = body.data?.sessionId ?? body.sessionId;
+      if (!sessionId) throw new Error("No sessionId in response");
+      if (!mountedRef.current) return;
+      sessionIdRef.current = sessionId;
+      await connectStream(sessionId);
+    } catch (err) {
+      if (err.name === "AbortError") return;
+      if (mountedRef.current) {
+        const message = err instanceof Error ? err.message : "Terminal connection failed";
+        setError(message);
+        setIsConnected(false);
+      }
+    }
+  }, [apiUrl, token, cleanup, connectStream]);
+  const sendCommand = useCallback(async (command) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      credentials: "include",
+      body: JSON.stringify({ data: command })
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || `Input failed: ${res.status}`);
+    }
+  }, [apiUrl, token]);
+  useEffect(() => {
+    mountedRef.current = true;
+    connect();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [connect, cleanup]);
+  return { isConnected, error, sendCommand, reconnect: connect };
+}
+
+export {
+  usePtySession
+};

package/dist/{chunk-FOQTE67I.js → chunk-FJLS7PNT.js}

@@ -1040,7 +1040,7 @@ function mapApiMessage(msg) {
 async function fetchJson(url, token, init) {
   const headers = { Authorization: `Bearer ${token}` };
   if (init?.body) headers["Content-Type"] = "application/json";
-  const res = await fetch(url, { ...init, headers: { ...headers, ...init?.headers } });
+  const res = await fetch(url, { ...init, headers: { ...headers, ...init?.headers }, credentials: "include" });
   if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
   return res.json();
 }
@@ -1057,6 +1057,7 @@ function useSessionStream({
   const [connected, setConnected] = useState5(false);
   const abortRef = useRef5(null);
   const streamingMsgIdRef = useRef5(null);
+  const handleSSEEventRef = useRef5(null);
   const refetch = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl) return;
     try {
@@ -1087,7 +1088,8 @@ function useSessionStream({
       const url = `${apiUrl}/session/events?sessionId=${encodeURIComponent(sessionId)}`;
       const res = await fetch(url, {
         headers: { Authorization: `Bearer ${token}` },
-        signal: controller.signal
+        signal: controller.signal,
+        credentials: "include"
       });
       if (!res.ok) throw new Error(`SSE connection failed: ${res.status}`);
       setConnected(true);
@@ -1120,7 +1122,7 @@ function useSessionStream({
           } catch {
             continue;
           }
-          handleSSEEvent(eventType, parsed);
+          handleSSEEventRef.current?.(eventType, parsed);
         }
       }
     } catch (err) {
@@ -1133,7 +1135,9 @@ function useSessionStream({
       }
     }
   }, [apiUrl, token, sessionId, enabled]);
-  const handleSSEEvent = useCallback4((type, props) => {
+  const handleSSEEvent = useCallback4((type, raw) => {
+    const envelope = raw?.properties;
+    const props = envelope?.info ?? envelope?.part ?? envelope ?? raw;
     if (type === "message.updated") {
       const id = props.id ?? props.messageId ?? "";
       const role = props.role ?? "assistant";
@@ -1219,6 +1223,7 @@ function useSessionStream({
       refetch();
     }
   }, [refetch]);
+  handleSSEEventRef.current = handleSSEEvent;
   const send = useCallback4(async (text) => {
     if (!token || !sessionId || !apiUrl) return;
     try {