@tangle-network/sandbox-ui 0.28.0 → 0.30.0

package/dist/{chunk-I3IVCGND.js → chunk-AUFV7766.js}

@@ -813,10 +813,69 @@ function RuntimePane({
 }
 
 // src/workspace/session-sidebar.tsx
-import { useCallback, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useImperativeHandle, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import { ArrowLeft, FolderTree, MessageSquareText, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
 import { useNavbarSessions } from "@tangle-network/ui/stores";
+
+// src/workspace/session-optimistic.ts
+import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+var SESSION_CREATED_EVENT = "sandbox-thread-created";
+function dispatchSessionCreated(detail, eventName = SESSION_CREATED_EVENT) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(eventName, { detail }));
+}
+function toItem(detail) {
+  return { updatedAt: /* @__PURE__ */ new Date(), ...detail };
+}
+function useOptimisticSessionItems(items, options = {}) {
+  const { listenForCreate = true, eventName = SESSION_CREATED_EVENT } = options;
+  const [optimisticItems, setOptimisticItems] = useState3(items);
+  useEffect3(() => {
+    setOptimisticItems(items);
+  }, [items]);
+  const add = useCallback((detail) => {
+    const next = toItem(detail);
+    setOptimisticItems((prev) => [next, ...prev.filter((item) => item.id !== next.id)]);
+  }, []);
+  const update = useCallback((id, patch) => {
+    setOptimisticItems(
+      (prev) => prev.map((item) => item.id === id ? { ...item, ...patch } : item)
+    );
+  }, []);
+  const remove = useCallback((id) => {
+    setOptimisticItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const reset = useCallback(() => setOptimisticItems(items), [items]);
+  const addRef = useRef3(add);
+  addRef.current = add;
+  useEffect3(() => {
+    if (!listenForCreate || typeof window === "undefined") return;
+    function onCreated(event) {
+      const detail = event.detail;
+      if (!detail?.id || !detail.title) return;
+      addRef.current(detail);
+    }
+    window.addEventListener(eventName, onCreated);
+    return () => window.removeEventListener(eventName, onCreated);
+  }, [listenForCreate, eventName]);
+  return {
+    items: optimisticItems,
+    controller: { add, update, remove, reset }
+  };
+}
+
+// src/workspace/session-sidebar.tsx
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var NO_CONTROLLER = {
+  add: () => {
+  },
+  update: () => {
+  },
+  remove: () => {
+  },
+  reset: () => {
+  }
+};
 function statusDot(status) {
   switch (status) {
     case "running":
@@ -888,24 +947,24 @@ function navigateToHref(href) {
   window.location.assign(href);
 }
 function useResizable(defaultWidth, min, max, onChange) {
-  const [width, setWidth] = useState3(defaultWidth);
-  const dragging = useRef3(false);
-  const startX = useRef3(0);
-  const startW = useRef3(0);
-  const onPointerDown = useCallback((e) => {
+  const [width, setWidth] = useState4(defaultWidth);
+  const dragging = useRef4(false);
+  const startX = useRef4(0);
+  const startW = useRef4(0);
+  const onPointerDown = useCallback2((e) => {
     dragging.current = true;
     startX.current = e.clientX;
     startW.current = width;
     e.currentTarget.setPointerCapture(e.pointerId);
   }, [width]);
-  const onPointerMove = useCallback((e) => {
+  const onPointerMove = useCallback2((e) => {
     if (!dragging.current) return;
     const delta = e.clientX - startX.current;
     const next = Math.min(max, Math.max(min, startW.current + delta));
     setWidth(next);
     onChange?.(next);
   }, [min, max, onChange]);
-  const onPointerUp = useCallback(() => {
+  const onPointerUp = useCallback2(() => {
     dragging.current = false;
   }, []);
   return { width, onPointerDown, onPointerMove, onPointerUp };
@@ -933,18 +992,32 @@ function SessionSidebar({
   minWidth = 200,
   maxWidth = 400,
   onWidthChange,
-  renderItemActions
+  renderItemActions,
+  optimistic = false,
+  optimisticRef
 }) {
-  const [query, setQuery] = useState3("");
-  const [activeFilterId, setActiveFilterId] = useState3(defaultFilterId ?? filters[0]?.id ?? "all");
+  const [query, setQuery] = useState4("");
+  const [activeFilterId, setActiveFilterId] = useState4(defaultFilterId ?? filters[0]?.id ?? "all");
+  const optimisticOptions = typeof optimistic === "object" ? optimistic : void 0;
+  const optimisticState = useOptimisticSessionItems(
+    items,
+    optimistic === false ? { listenForCreate: false } : optimisticOptions
+  );
+  const optimisticEnabled = optimistic !== false;
+  const effectiveItems = optimisticEnabled ? optimisticState.items : items;
+  useImperativeHandle(
+    optimisticRef,
+    () => optimisticEnabled ? optimisticState.controller : NO_CONTROLLER,
+    [optimisticEnabled, optimisticState.controller]
+  );
   const activeSessions = useNavbarSessions(projectId);
   const sessionsById = useMemo3(
     () => new Map(activeSessions.map((session) => [session.sessionId, session])),
     [activeSessions]
   );
   const orderedItems = useMemo3(
-    () => sortItems(items, sessionsById),
-    [items, sessionsById]
+    () => sortItems(effectiveItems, sessionsById),
+    [effectiveItems, sessionsById]
   );
   const visibleItems = useMemo3(() => {
     const normalizedQuery = query.trim().toLowerCase();
@@ -998,7 +1071,7 @@ function SessionSidebar({
           ] })
         ] }) }),
         (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "shrink-0 border-b border-border px-3 py-2.5", children: [
-          enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+          enableSearch && effectiveItems.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
             /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
             /* @__PURE__ */ jsx7(
               "input",
@@ -1136,6 +1209,20 @@ function SessionSidebar({
   );
 }
 
+// src/workspace/shell-revalidation.ts
+function createShellShouldRevalidate(options = {}) {
+  const appPathPrefix = options.appPathPrefix ?? "/app";
+  return function shouldRevalidate(args) {
+    const { currentUrl, nextUrl, formMethod, defaultShouldRevalidate } = args;
+    if (formMethod && formMethod !== "GET") return true;
+    if (currentUrl.pathname !== nextUrl.pathname && currentUrl.pathname.startsWith(appPathPrefix) && nextUrl.pathname.startsWith(appPathPrefix)) {
+      return false;
+    }
+    return defaultShouldRevalidate;
+  };
+}
+var shellShouldRevalidate = createShellShouldRevalidate();
+
 // src/workspace/session-activity-monitor.tsx
 import { Activity, AlertCircle as AlertCircle2, LoaderCircle, MessageSquareText as MessageSquareText2 } from "lucide-react";
 import {
@@ -1238,7 +1325,7 @@ function SessionActivityMonitor({
 }
 
 // src/workspace/sandbox-workbench.tsx
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
 import {
   Bot,
   Boxes,
@@ -1438,10 +1525,10 @@ function SandboxWorkbench({
   emptyArtifactState,
   className
 }) {
-  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState4(
+  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState5(
     activeArtifactId ?? artifacts[0]?.id
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (activeArtifactId !== void 0) return;
     setUncontrolledArtifactId((current) => {
       if (artifacts.length === 0) return void 0;
@@ -1593,7 +1680,7 @@ function AgentWorkbench(props) {
 }
 
 // src/workspace/audit-results.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { CheckCircle as CheckCircle2, XCircle, ChevronRight, Shield } from "lucide-react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function AuditResults({ forms, crossFormChecks = [], overallScore, className }) {
@@ -1624,7 +1711,7 @@ function AuditResults({ forms, crossFormChecks = [], overallScore, className })
   ] });
 }
 function FormAuditCard({ form }) {
-  const [expanded, setExpanded] = useState5(form.failed > 0);
+  const [expanded, setExpanded] = useState6(form.failed > 0);
   const allPassed = form.failed === 0 && form.found;
   return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
     /* @__PURE__ */ jsxs10(
@@ -1762,7 +1849,7 @@ function TaskBoard({
 }
 
 // src/workspace/calendar-view.tsx
-import { useState as useState6, useMemo as useMemo6 } from "react";
+import { useState as useState7, useMemo as useMemo6 } from "react";
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function toDateKey(d) {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -1806,11 +1893,11 @@ function CalendarView({
 }) {
   const today = /* @__PURE__ */ new Date();
   const todayKey = toDateKey(today);
-  const [internalMonth, setInternalMonth] = useState6({
+  const [internalMonth, setInternalMonth] = useState7({
     year: today.getFullYear(),
     month: today.getMonth()
   });
-  const [internalSelectedDay, setInternalSelectedDay] = useState6(
+  const [internalSelectedDay, setInternalSelectedDay] = useState7(
     todayKey
   );
   const viewYear = controlledYear ?? internalMonth.year;
@@ -1983,7 +2070,7 @@ function CalendarView({
 }
 
 // src/workspace/approval-queue.tsx
-import { useState as useState7, useMemo as useMemo7 } from "react";
+import { useState as useState8, useMemo as useMemo7 } from "react";
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function ApprovalQueue({
   items,
@@ -1998,9 +2085,9 @@ function ApprovalQueue({
   emptyState,
   showResolved: controlledShowResolved
 }) {
-  const [rejectingId, setRejectingId] = useState7(null);
-  const [rejectReason, setRejectReason] = useState7("");
-  const [showResolved, setShowResolved] = useState7(controlledShowResolved ?? false);
+  const [rejectingId, setRejectingId] = useState8(null);
+  const [rejectReason, setRejectReason] = useState8("");
+  const [showResolved, setShowResolved] = useState8(controlledShowResolved ?? false);
   const pending = useMemo7(
     () => items.filter((a) => a.status === "pending"),
     [items]
@@ -2209,7 +2296,12 @@ export {
   StatusBar,
   TerminalPanel,
   RuntimePane,
+  SESSION_CREATED_EVENT,
+  dispatchSessionCreated,
+  useOptimisticSessionItems,
   SessionSidebar,
+  createShellShouldRevalidate,
+  shellShouldRevalidate,
   SessionActivityMonitor,
   SandboxWorkbench,
   AgentWorkbench,

package/dist/{chunk-F2M5MN7K.js → chunk-YPBFIETY.js}

@@ -24,11 +24,11 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 var PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
 var SIDEBAR_MODE_KEY = "sandbox-sidebar-mode";
-var SIDEBAR_RAIL_WIDTH = 64;
-var SIDEBAR_PANEL_WIDTH = 260;
+var SIDEBAR_RAIL_WIDTH = 56;
+var SIDEBAR_PANEL_WIDTH = 268;
 var SIDEBAR_TOTAL_WIDTH = SIDEBAR_RAIL_WIDTH + SIDEBAR_PANEL_WIDTH;
 var SIDEBAR_MOBILE_WIDTH = 256;
-var SIDEBAR_RAIL_LABELED_WIDTH = 224;
+var SIDEBAR_RAIL_LABELED_WIDTH = 248;
 var SidebarContext = React.createContext(null);
 function readStorage(key, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -168,8 +168,8 @@ function RailThemeToggle({ className }) {
       "aria-label": "Toggle theme",
       title: isDark ? "Switch to light mode" : "Switch to dark mode",
       className: cn(
-        "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
-        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         className
       ),
@@ -222,9 +222,9 @@ function RailSeparator({ className }) {
 }
 function RailButton({ icon: Icon, label, isActive, badge, onClick, className, showLabel, asChild, children }) {
   const classes = cn(
-    "group relative flex shrink-0 items-center justify-center rounded-xl transition-all duration-200",
-    showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
-    "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+    "group relative flex shrink-0 items-center justify-center rounded-md transition-all duration-200",
+    showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
+    "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     "active:scale-95",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]",
@@ -232,8 +232,8 @@ function RailButton({ icon: Icon, label, isActive, badge, onClick, className, sh
     className
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(Icon, { className: "h-5 w-5 shrink-0" }),
-    showLabel && /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx2(Icon, { className: "h-[17px] w-[17px] shrink-0" }),
+    showLabel && /* @__PURE__ */ jsx2("span", { className: "text-[13.5px] font-medium", children: label }),
     badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-[var(--md3-on-primary)] px-1 shadow-sm", children: badge > 99 ? "99+" : badge })
   ] });
   if (asChild && React2.isValidElement(children)) {
@@ -273,9 +273,9 @@ function RailFlyout({
     };
   }, [open]);
   const triggerClasses = cn(
-    "group relative flex shrink-0 items-center rounded-xl transition-all duration-200",
-    showLabel ? "w-full justify-start px-3 h-11 gap-3" : "w-11 h-11 justify-center",
-    "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
+    "group relative flex shrink-0 items-center rounded-md transition-all duration-200",
+    showLabel ? "w-full justify-start px-2.5 h-9 gap-2.5" : "w-9 h-9 justify-center",
+    "hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
     "active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     isActive || open ? "bg-[var(--accent-surface-strong)] text-[var(--accent-text)]" : "text-muted-foreground",
     className
@@ -317,7 +317,7 @@ function RailFlyout({
           if (el.closest("a,button")) setOpen(false);
         },
         className: cn(
-          "absolute top-0 z-50 min-w-[12rem] rounded-xl border border-border bg-card p-1.5 shadow-lg",
+          "absolute top-0 z-50 min-w-[12rem] rounded-md border border-border bg-popover p-1.5 shadow-dropdown",
           showLabel ? "left-full ml-2" : "left-full ml-2"
         ),
         children: [
@@ -356,10 +356,10 @@ function SidebarPanel({ children, className }) {
     {
       className: cn(
         "transition-[opacity] duration-150 h-full overflow-hidden border-l border-border bg-card",
-        panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
+        panelOpen ? "w-[268px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
-      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[260px]", children })
+      children: /* @__PURE__ */ jsx2("div", { className: "flex flex-col h-full w-[268px]", children })
     }
   );
 }

package/dist/dashboard.d.ts

@@ -140,9 +140,9 @@ interface ProfileAvatarProps {
 }
 declare function ProfileAvatar({ user, isLoading, onLogout, onSettingsClick, settingsHref, children, className, showDetails, LinkComponent, }: ProfileAvatarProps): react_jsx_runtime.JSX.Element;
 
-/** Width constants (px) matching blueprint-agent layout */
-declare const SIDEBAR_RAIL_WIDTH = 64;
-declare const SIDEBAR_PANEL_WIDTH = 260;
+/** Width constants (px) — Tangle Quiet density (ChatGPT-minimal) */
+declare const SIDEBAR_RAIL_WIDTH = 56;
+declare const SIDEBAR_PANEL_WIDTH = 268;
 declare const SIDEBAR_TOTAL_WIDTH: number;
 /**
  * Width of the mobile drawer when the rail is rendered with labels

package/dist/dashboard.js

@@ -48,7 +48,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-F2M5MN7K.js";
+} from "./chunk-YPBFIETY.js";
 import {
   BillingDashboard,
   InfoPanel,