@tangle-network/sandbox-ui 0.14.0 → 0.15.1

package/dist/chunk-AZ3AWMTM.js

@@ -0,0 +1,8 @@
+// src/openui/index.ts
+import {
+  OpenUIArtifactRenderer
+} from "@tangle-network/ui/openui";
+
+export {
+  OpenUIArtifactRenderer
+};

package/dist/chunk-CMY7W45U.js

@@ -0,0 +1,380 @@
+// src/hooks/use-session-stream.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function mapApiMessage(msg, counterRef) {
+  const created = msg.info.timestamp ? new Date(msg.info.timestamp).getTime() : Date.now();
+  const message = {
+    id: msg.info.id,
+    role: msg.info.role,
+    time: { created },
+    _insertionIndex: counterRef.current++
+  };
+  const parts = (msg.parts ?? []).map((p, i) => {
+    if (p.type === "tool" && p.tool) {
+      return {
+        type: "tool",
+        id: p.id ?? `${msg.info.id}-tool-${i}`,
+        tool: p.tool,
+        state: {
+          status: p.state?.status ?? "completed",
+          input: p.state?.input,
+          output: p.state?.output,
+          error: p.state?.error,
+          metadata: p.state?.metadata,
+          time: p.time
+        }
+      };
+    }
+    if (p.type === "reasoning") {
+      return {
+        type: "reasoning",
+        text: p.text ?? "",
+        time: p.time
+      };
+    }
+    return { type: "text", text: p.text ?? "" };
+  });
+  return { message, parts };
+}
+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 }, credentials: "include" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+  return res.json();
+}
+function useSessionStream({
+  apiUrl,
+  token,
+  sessionId,
+  enabled = true
+}) {
+  const [messages, setMessages] = useState([]);
+  const [partMap, setPartMap] = useState({});
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState(null);
+  const [connected, setConnected] = useState(false);
+  const abortRef = useRef(null);
+  const reconnectTimerRef = useRef(null);
+  const streamingMsgIdRef = useRef(null);
+  const insertionCounterRef = useRef(0);
+  const handleSSEEventRef = useRef(null);
+  const refetch = useCallback(async () => {
+    if (!token || !sessionId || !apiUrl) return;
+    try {
+      const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/messages?limit=200`;
+      const data = await fetchJson(url, token);
+      const apiMessages = Array.isArray(data) ? data : data.messages ?? [];
+      const newMessages = [];
+      const newPartMap = {};
+      for (const apiMsg of apiMessages) {
+        const { message, parts } = mapApiMessage(apiMsg, insertionCounterRef);
+        newMessages.push(message);
+        newPartMap[message.id] = parts;
+      }
+      setMessages(newMessages);
+      setPartMap(newPartMap);
+      streamingMsgIdRef.current = null;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to fetch messages";
+      setError(msg);
+    }
+  }, [apiUrl, token, sessionId]);
+  const connectSSE = useCallback(async () => {
+    if (!token || !sessionId || !apiUrl || !enabled) return;
+    if (reconnectTimerRef.current) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    try {
+      const url = `${apiUrl}/session/events?sessionId=${encodeURIComponent(sessionId)}`;
+      const res = await fetch(url, {
+        headers: { Authorization: `Bearer ${token}` },
+        signal: controller.signal,
+        credentials: "include"
+      });
+      if (!res.ok) throw new Error(`SSE connection failed: ${res.status}`);
+      setConnected(true);
+      setError(null);
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error("No response body");
+      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;
+          let eventType = "message";
+          const dataLines = [];
+          for (const line of frame.split("\n")) {
+            if (line.startsWith("event:")) {
+              eventType = line.slice(6).trim();
+            } else if (line.startsWith("data:")) {
+              dataLines.push(line.slice(5).trim());
+            }
+          }
+          if (dataLines.length === 0) continue;
+          let parsed;
+          try {
+            parsed = JSON.parse(dataLines.join("\n"));
+          } catch {
+            continue;
+          }
+          handleSSEEventRef.current?.(eventType, parsed);
+        }
+      }
+    } catch (err) {
+      if (err.name === "AbortError") return;
+      const msg = err instanceof Error ? err.message : "SSE connection error";
+      setError(msg);
+      setConnected(false);
+      if (!controller.signal.aborted) {
+        reconnectTimerRef.current = setTimeout(() => connectSSE(), 3e3);
+      }
+    }
+  }, [apiUrl, token, sessionId, enabled]);
+  const handleSSEEvent = useCallback((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";
+      if (!id) return;
+      setMessages((prev) => {
+        const exists = prev.some((m) => m.id === id);
+        if (exists) return prev;
+        return [
+          ...prev,
+          {
+            id,
+            role,
+            time: { created: Date.now() },
+            _insertionIndex: insertionCounterRef.current++
+          }
+        ];
+      });
+      if (role === "assistant") {
+        streamingMsgIdRef.current = id;
+        setIsStreaming(true);
+      }
+    } else if (type === "message.part.updated") {
+      const msgId = streamingMsgIdRef.current;
+      if (!msgId) return;
+      const partType = props.type ?? "text";
+      setIsStreaming(true);
+      setPartMap((prev) => {
+        const existing = prev[msgId] ?? [];
+        const updated = [...existing];
+        if (partType === "text") {
+          const text = props.text ?? props.content ?? "";
+          const idx = updated.findIndex((p) => p.type === "text");
+          const textPart = { type: "text", text };
+          if (idx >= 0) {
+            updated[idx] = textPart;
+          } else {
+            updated.push(textPart);
+          }
+        } else if (partType === "tool") {
+          const toolId = props.id ?? props.toolId ?? `tool-${Date.now()}`;
+          const toolName = props.tool ?? props.name ?? "unknown";
+          const state = props.state ?? { status: "running" };
+          const toolPart = {
+            type: "tool",
+            id: toolId,
+            tool: toolName,
+            state: {
+              status: state.status ?? "running",
+              input: state.input,
+              output: state.output,
+              error: state.error,
+              metadata: state.metadata,
+              time: state.time
+            }
+          };
+          const idx = updated.findIndex((p) => p.type === "tool" && p.id === toolId);
+          if (idx >= 0) {
+            updated[idx] = toolPart;
+          } else {
+            updated.push(toolPart);
+          }
+        } else if (partType === "reasoning") {
+          const text = props.text ?? "";
+          const idx = updated.findIndex((p) => p.type === "reasoning");
+          const reasoningPart = { type: "reasoning", text };
+          if (idx >= 0) {
+            updated[idx] = reasoningPart;
+          } else {
+            updated.push(reasoningPart);
+          }
+        }
+        return { ...prev, [msgId]: updated };
+      });
+    } else if (type === "session.idle") {
+      setIsStreaming(false);
+      streamingMsgIdRef.current = null;
+      refetch();
+    } else if (type === "session.error") {
+      setIsStreaming(false);
+      streamingMsgIdRef.current = null;
+      const errorMsg = props.error ?? props.message ?? "Agent error";
+      setError(errorMsg);
+      refetch();
+    }
+  }, [refetch]);
+  handleSSEEventRef.current = handleSSEEvent;
+  const send = useCallback(async (text) => {
+    if (!token || !sessionId || !apiUrl) return;
+    try {
+      const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/messages`;
+      await fetchJson(url, token, {
+        method: "POST",
+        body: JSON.stringify({ parts: [{ type: "text", text }] })
+      });
+      setIsStreaming(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to send message";
+      setError(msg);
+    }
+  }, [apiUrl, token, sessionId]);
+  const abort = useCallback(async () => {
+    if (!token || !sessionId || !apiUrl) return;
+    try {
+      const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}/abort`;
+      await fetchJson(url, token, { method: "POST" });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to abort";
+      setError(msg);
+    }
+  }, [apiUrl, token, sessionId]);
+  useEffect(() => {
+    if (!enabled || !token || !sessionId) return;
+    refetch();
+    connectSSE();
+    return () => {
+      abortRef.current?.abort();
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+      setConnected(false);
+    };
+  }, [enabled, token, sessionId, refetch, connectSSE]);
+  return { messages, partMap, isStreaming, send, abort, refetch, error, connected };
+}
+
+// src/hooks/use-sidecar-auth.ts
+import { useState as useState2, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+function storageKey(resourceId, apiUrl) {
+  return `sidecar_session_${resourceId}__${apiUrl}`;
+}
+function loadSession(resourceId, apiUrl) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = localStorage.getItem(storageKey(resourceId, apiUrl));
+    if (!raw) return null;
+    const data = JSON.parse(raw);
+    if (data.expiresAt * 1e3 - Date.now() < 6e4) {
+      localStorage.removeItem(storageKey(resourceId, apiUrl));
+      return null;
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+function saveSession(resourceId, apiUrl, token, expiresAt) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(storageKey(resourceId, apiUrl), JSON.stringify({ token, expiresAt }));
+  } catch {
+  }
+}
+function clearSession(resourceId, apiUrl) {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(storageKey(resourceId, apiUrl));
+}
+function useSidecarAuth({ resourceId, apiUrl, signMessage }) {
+  const cached = loadSession(resourceId, apiUrl);
+  const [token, setToken] = useState2(cached?.token ?? null);
+  const [expiresAt, setExpiresAt] = useState2(cached?.expiresAt ?? 0);
+  const [isAuthenticating, setIsAuthenticating] = useState2(false);
+  const [error, setError] = useState2(null);
+  const refreshTimerRef = useRef2(void 0);
+  const clearCachedToken = useCallback2(() => {
+    setToken(null);
+    setExpiresAt(0);
+    clearSession(resourceId, apiUrl);
+  }, [resourceId, apiUrl]);
+  const authenticate = useCallback2(async () => {
+    if (!apiUrl) return null;
+    setIsAuthenticating(true);
+    setError(null);
+    try {
+      const challengeRes = await fetch(`${apiUrl}/api/auth/challenge`, {
+        method: "POST"
+      });
+      if (!challengeRes.ok) {
+        throw new Error(`Challenge failed: ${challengeRes.status}`);
+      }
+      const { nonce, message } = await challengeRes.json();
+      const signature = await signMessage(message);
+      const sessionRes = await fetch(`${apiUrl}/api/auth/session`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nonce, signature })
+      });
+      if (!sessionRes.ok) {
+        const text = await sessionRes.text();
+        throw new Error(text || `Session exchange failed: ${sessionRes.status}`);
+      }
+      const { token: newToken, expires_at } = await sessionRes.json();
+      setToken(newToken);
+      setExpiresAt(expires_at);
+      saveSession(resourceId, apiUrl, newToken, expires_at);
+      return newToken;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Authentication failed");
+      clearCachedToken();
+      return null;
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }, [resourceId, apiUrl, signMessage, clearCachedToken]);
+  useEffect2(() => {
+    if (refreshTimerRef.current) {
+      clearTimeout(refreshTimerRef.current);
+    }
+    if (!token || !expiresAt) return;
+    const msUntilRefresh = (expiresAt - 300) * 1e3 - Date.now();
+    if (msUntilRefresh <= 0) {
+      clearCachedToken();
+      return;
+    }
+    refreshTimerRef.current = setTimeout(() => {
+      authenticate().catch(() => {
+        clearCachedToken();
+      });
+    }, msUntilRefresh);
+    return () => {
+      if (refreshTimerRef.current) {
+        clearTimeout(refreshTimerRef.current);
+      }
+    };
+  }, [token, expiresAt, authenticate, clearCachedToken]);
+  return {
+    token,
+    isAuthenticated: token !== null,
+    isAuthenticating,
+    authenticate,
+    clearCachedToken,
+    error
+  };
+}
+
+export {
+  useSessionStream,
+  useSidecarAuth
+};

package/dist/{chunk-QMU2PWOU.js → chunk-DNZ4DTNA.js}

@@ -1,22 +1,18 @@
 import {
-  Progress
-} from "./chunk-66EZOYZR.js";
+  cn
+} from "./chunk-EI44GEQ5.js";
+
+// src/dashboard/billing-dashboard.tsx
+import { Button } from "@tangle-network/ui/primitives";
+import { Badge } from "@tangle-network/ui/primitives";
 import {
-  Badge,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "./chunk-ZMNSRDMH.js";
-import {
-  Button
-} from "./chunk-MKTSMWVD.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/dashboard/billing-dashboard.tsx
+} from "@tangle-network/ui/primitives";
+import { Progress } from "@tangle-network/ui/primitives";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var variantColors = {
   sandbox: {
@@ -367,6 +363,7 @@ function PricingPage({
 
 // src/dashboard/usage-chart.tsx
 import * as React from "react";
+import { Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, CardTitle as CardTitle2 } from "@tangle-network/ui/primitives";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var colors = {
   bar: "bg-[image:var(--accent-gradient-strong)]",
@@ -390,15 +387,15 @@ function UsageChart({ data, title, unit, className }) {
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const total = data.reduce((sum, d) => sum + d.value, 0);
   const [hoveredIndex, setHoveredIndex] = React.useState(null);
-  return /* @__PURE__ */ jsxs3(Card, { className, children: [
-    /* @__PURE__ */ jsxs3(CardHeader, { className: "flex flex-row items-center justify-between pb-2", children: [
-      /* @__PURE__ */ jsx3(CardTitle, { className: "font-medium text-base", children: title }),
+  return /* @__PURE__ */ jsxs3(Card2, { className, children: [
+    /* @__PURE__ */ jsxs3(CardHeader2, { className: "flex flex-row items-center justify-between pb-2", children: [
+      /* @__PURE__ */ jsx3(CardTitle2, { className: "font-medium text-base", children: title }),
       /* @__PURE__ */ jsxs3("div", { className: "text-right", children: [
         /* @__PURE__ */ jsx3("span", { className: cn("font-bold text-2xl", colors.text), children: formatValue(total) }),
         /* @__PURE__ */ jsx3("span", { className: "ml-1 text-muted-foreground text-sm", children: unit })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3(CardContent, { children: [
+    /* @__PURE__ */ jsxs3(CardContent2, { children: [
       /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs3("div", { className: "absolute top-0 left-0 flex h-48 flex-col justify-between text-muted-foreground text-xs", children: [
           /* @__PURE__ */ jsx3("span", { children: formatValue(maxValue) }),
@@ -485,9 +482,66 @@ function UsageChart({ data, title, unit, className }) {
   ] });
 }
 
+// src/dashboard/template-card.tsx
+import { ArrowRight } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function TemplateCard({ template, onUseTemplate, className }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col justify-between rounded-2xl border border-border bg-card p-6 transition-all hover:border-primary/30 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-muted border border-border", children: template.icon ?? /* @__PURE__ */ jsx4("span", { className: "text-lg font-bold text-primary", children: template.name.charAt(0).toUpperCase() }) }),
+          /* @__PURE__ */ jsx4("h3", { className: "mb-1 text-base font-bold text-foreground", children: template.name }),
+          /* @__PURE__ */ jsx4("p", { className: "text-sm text-muted-foreground leading-relaxed line-clamp-2", children: template.description }),
+          template.tags && template.tags.length > 0 && /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-wrap gap-1.5", children: template.tags.map((tag, i) => /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+              children: tag
+            },
+            `${tag}-${i}`
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            onClick: () => onUseTemplate(template.id),
+            className: "mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-primary/10 border border-primary/20 px-4 py-2.5 text-sm font-bold text-primary transition-colors hover:bg-primary hover:text-primary-foreground active:scale-[0.98]",
+            children: [
+              "Use Template",
+              /* @__PURE__ */ jsx4(ArrowRight, { className: "h-4 w-4 transition-transform group-hover:translate-x-0.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/dashboard/info-panel.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function InfoPanel({ label, title, description, className }) {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("rounded-lg bg-[var(--brand-strong)] p-5 text-[var(--brand-strong-text)] relative overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative z-10", children: [
+      /* @__PURE__ */ jsx5("p", { className: "text-[10px] font-bold uppercase tracking-widest text-[var(--brand-strong-text-dim)]", children: label }),
+      /* @__PURE__ */ jsx5("h3", { className: "mt-1 text-lg font-bold", children: title }),
+      /* @__PURE__ */ jsx5("p", { className: "mt-1 text-sm text-[var(--brand-strong-text-muted)]", children: description })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: "absolute right-0 top-0 h-full w-1/3 bg-white/5 -skew-x-12 translate-x-12 pointer-events-none" })
+  ] });
+}
+
 export {
   BillingDashboard,
   formatPrice,
   PricingPage,
-  UsageChart
+  UsageChart,
+  TemplateCard,
+  InfoPanel
 };

package/dist/chunk-EI44GEQ5.js

@@ -0,0 +1,6 @@
+// src/lib/utils.ts
+import { cn } from "@tangle-network/ui/utils";
+
+export {
+  cn
+};

package/dist/{chunk-5OQ27N57.js → chunk-GPT7VKK6.js}

@@ -1,36 +1,6 @@
-import {
-  useActiveSessions,
-  useNavbarSessions,
-  useProjectActivity,
-  useTotalRunningSessions
-} from "./chunk-OEX7NZE3.js";
-import {
-  EmptyState,
-  Input
-} from "./chunk-MA7YKRUP.js";
-import {
-  ChatContainer
-} from "./chunk-XLG757B6.js";
-import {
-  OpenUIArtifactRenderer
-} from "./chunk-ZNCEM5CD.js";
-import {
-  FileArtifactPane,
-  FileTree,
-  filterFileTree
-} from "./chunk-QDH5GEGY.js";
-import {
-  ArtifactPane
-} from "./chunk-HB5Y37YU.js";
-import {
-  Markdown
-} from "./chunk-T7HMZEVO.js";
-import {
-  Badge
-} from "./chunk-ZMNSRDMH.js";
 import {
   cn
-} from "./chunk-RQHJBTEU.js";
+} from "./chunk-EI44GEQ5.js";
 
 // src/workspace/workspace-layout.tsx
 import {
@@ -487,9 +457,19 @@ function WorkspaceLayout({
   );
 }
 
+// src/workspace/index.ts
+import { ArtifactPane as ArtifactPane3 } from "@tangle-network/ui/primitives";
+
 // src/workspace/directory-pane.tsx
 import { useMemo as useMemo2, useState as useState2 } from "react";
 import { RefreshCw, Search, Upload } from "lucide-react";
+import { ArtifactPane } from "@tangle-network/ui/primitives";
+import {
+  FileTree,
+  filterFileTree
+} from "@tangle-network/ui/files";
+import { EmptyState } from "@tangle-network/ui/primitives";
+import { Input } from "@tangle-network/ui/primitives";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function countNodes(node) {
   if (node.type === "file") {
@@ -612,6 +592,9 @@ function DirectoryPane({
   );
 }
 
+// src/workspace/runtime-pane.tsx
+import { Binary, ShieldCheck, TerminalSquare } from "lucide-react";
+
 // src/workspace/status-banner.tsx
 import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -773,7 +756,6 @@ function TerminalPanel({
 }
 
 // src/workspace/runtime-pane.tsx
-import { Binary, ShieldCheck, TerminalSquare } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function RuntimePane({
   title = "Runtime",
@@ -833,6 +815,7 @@ function RuntimePane({
 // src/workspace/session-sidebar.tsx
 import { useCallback, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { ArrowLeft, FolderTree, MessageSquareText, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
+import { useNavbarSessions } from "@tangle-network/ui/stores";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function statusDot(status) {
   switch (status) {
@@ -1155,6 +1138,11 @@ function SessionSidebar({
 
 // src/workspace/session-activity-monitor.tsx
 import { Activity, AlertCircle as AlertCircle2, LoaderCircle, MessageSquareText as MessageSquareText2 } from "lucide-react";
+import {
+  useActiveSessions,
+  useProjectActivity,
+  useTotalRunningSessions
+} from "@tangle-network/ui/stores";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function SessionStatusDot({ session }) {
   if (session.status === "error") {
@@ -1260,6 +1248,13 @@ import {
   LayoutPanelTop,
   X as X4
 } from "lucide-react";
+import { Badge } from "@tangle-network/ui/primitives";
+import { EmptyState as EmptyState2 } from "@tangle-network/ui/primitives";
+import { Markdown } from "@tangle-network/ui/markdown";
+import { ChatContainer } from "@tangle-network/ui/chat";
+import { FileArtifactPane } from "@tangle-network/ui/files";
+import { OpenUIArtifactRenderer } from "@tangle-network/ui/openui";
+import { ArtifactPane as ArtifactPane2 } from "@tangle-network/ui/primitives";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function getArtifactTabIcon(kind) {
   switch (kind) {
@@ -1348,7 +1343,7 @@ function renderArtifact(artifact) {
       );
     case "markdown":
       return /* @__PURE__ */ jsx9(
-        ArtifactPane,
+        ArtifactPane2,
         {
           eyebrow: artifact.eyebrow ?? "Document",
           title: artifact.title,
@@ -1362,7 +1357,7 @@ function renderArtifact(artifact) {
       );
     case "openui":
       return /* @__PURE__ */ jsx9(
-        ArtifactPane,
+        ArtifactPane2,
         {
           eyebrow: artifact.eyebrow ?? "Structured Artifact",
           title: artifact.title,
@@ -1376,7 +1371,7 @@ function renderArtifact(artifact) {
       );
     case "custom":
       return /* @__PURE__ */ jsx9(
-        ArtifactPane,
+        ArtifactPane2,
         {
           eyebrow: artifact.eyebrow ?? "Artifact",
           title: artifact.title,
@@ -1480,7 +1475,7 @@ function SandboxWorkbench({
     ] })
   ] });
   const center = /* @__PURE__ */ jsx9(
-    ArtifactPane,
+    ArtifactPane2,
     {
       eyebrow: session.eyebrow ?? "Agent Session",
       title: session.title ?? "Execution timeline",
@@ -1510,7 +1505,7 @@ function SandboxWorkbench({
       }
     ),
     /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-background", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
-      EmptyState,
+      EmptyState2,
       {
         icon: /* @__PURE__ */ jsx9(Boxes, { className: "h-8 w-8" }),
         title: "No artifact selected",
@@ -2200,5 +2195,6 @@ export {
   AuditResults,
   TaskBoard,
   CalendarView,
-  ApprovalQueue
+  ApprovalQueue,
+  ArtifactPane3 as ArtifactPane
 };