@tangle-network/sandbox-ui 0.43.0 → 0.45.0

package/dist/{WorkflowGraph-5QO6WCY2.js → WorkflowGraph-7YYGIBNV.js}

@@ -1,3 +1,6 @@
+import {
+  ProviderIcon
+} from "./chunk-H7GMPMPB.js";
 import {
   buildWorkflowGraph
 } from "./chunk-SUC6ZJZW.js";
@@ -75,7 +78,18 @@ function WorkflowNode({ data }) {
             children: d.subtitle
           }
         ),
-        d.provider && /* @__PURE__ */ jsx("span", { className: "mt-1.5 inline-block rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: providerLabel(d.provider) }),
+        d.provider && /* @__PURE__ */ jsxs("span", { className: "mt-1.5 inline-flex items-center gap-1 rounded bg-background-tertiary px-1.5 py-0.5 text-[10px] text-text-muted", children: [
+          /* @__PURE__ */ jsx(
+            ProviderIcon,
+            {
+              id: d.provider,
+              displayName: providerLabel(d.provider),
+              size: 12,
+              className: "rounded-[2px]"
+            }
+          ),
+          providerLabel(d.provider)
+        ] }),
         /* @__PURE__ */ jsx(
           Handle,
           {

package/dist/assistant.js

@@ -1,3 +1,6 @@
+import {
+  ProviderIcon
+} from "./chunk-H7GMPMPB.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
@@ -1533,8 +1536,8 @@ import {
 } from "react";
 
 // src/assistant/AssistantPanel.tsx
-import { AgentTimeline, ChatInput } from "@tangle-network/ui/chat";
-import { History, Minus, Plus, RotateCcw, Trash2, X } from "lucide-react";
+import { AgentTimeline, ChatInput, ThinkingIndicator } from "@tangle-network/ui/chat";
+import { History, MessageSquarePlus, Minus, Plus, Trash2, X } from "lucide-react";
 import { useRef as useRef4, useState as useState5 } from "react";
 
 // src/assistant/build-timeline.tsx
@@ -1670,7 +1673,7 @@ function ProposalCard({
           )
         ] })
       ] }),
-      showGraph && tab === "graph" ? /* @__PURE__ */ jsx3("div", { className: "mt-1 h-48 overflow-hidden rounded border border-border", children: renderGraph?.(view.preview.content) }) : /* @__PURE__ */ jsx3("pre", { className: "mt-1 max-h-48 overflow-auto rounded border border-border bg-muted/50 p-2 text-xs", children: /* @__PURE__ */ jsx3("code", { children: view.preview.content }) })
+      showGraph && tab === "graph" ? /* @__PURE__ */ jsx3("div", { className: "mt-1 h-64 overflow-hidden rounded border border-border", children: renderGraph?.(view.preview.content) }) : /* @__PURE__ */ jsx3("pre", { className: "mt-1 max-h-48 overflow-auto rounded border border-border bg-muted/50 p-2 text-xs", children: /* @__PURE__ */ jsx3("code", { children: view.preview.content }) })
     ] }),
     proposal.requirements && proposal.requirements.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded border border-border p-2", children: [
       /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: "Integrations" }),
@@ -1737,16 +1740,33 @@ function RequirementRow({
   const canConnect = !req.connected && req.connectUrl !== null;
   const target = req.connectUrl ?? "/app/integrations";
   return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2 text-xs", children: [
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx3(
-        "span",
+        ProviderIcon,
         {
-          "aria-hidden": "true",
-          className: `h-2 w-2 rounded-full ${req.connected ? "bg-primary" : "border border-muted-foreground"}`
+          id: req.provider,
+          displayName: label,
+          size: 16,
+          className: "rounded"
         }
       ),
-      /* @__PURE__ */ jsx3("span", { className: "text-foreground", children: kindLabel }),
-      /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground", children: statusText })
+      /* @__PURE__ */ jsx3("span", { className: "truncate text-foreground", children: kindLabel }),
+      /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `h-1.5 w-1.5 rounded-full ${req.connected ? "bg-primary" : "border border-muted-foreground"}`
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: req.connected ? "text-primary" : "text-muted-foreground",
+            children: statusText
+          }
+        )
+      ] })
     ] }),
     canConnect && /* @__PURE__ */ jsxs(
       "button",
@@ -1910,6 +1930,9 @@ function AssistantPanel({
   const errorView = state.error ? presentError(state.error.code, state.error.message) : null;
   const low = isLowBalance(effectiveBalance) && !errorView;
   const streaming = state.status === "streaming";
+  const firstUserText = state.messages.find((m) => m.role === "user")?.text.trim();
+  const titleChars = firstUserText ? Array.from(firstUserText) : [];
+  const conversationTitle = firstUserText ? titleChars.length > 60 ? `${titleChars.slice(0, 60).join("")}\u2026` : firstUserText : null;
   const renderProposal = (proposal) => /* @__PURE__ */ jsx4(
     ProposalCard,
     {
@@ -1942,19 +1965,29 @@ function AssistantPanel({
     }
   };
   return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col bg-background", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-border border-b px-4 py-3", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
-        /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
-        /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 border-border border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground text-sm", children: "Assistant" }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              "aria-label": "Your credit balance",
+              className: "text-muted-foreground text-xs",
+              children: formatMoney(effectiveBalance)
+            }
+          )
+        ] }),
+        conversationTitle && /* @__PURE__ */ jsx4(
           "span",
           {
-            "aria-label": "Your credit balance",
-            className: "text-muted-foreground text-xs",
-            children: formatMoney(effectiveBalance)
+            className: "truncate text-muted-foreground text-xs",
+            title: conversationTitle,
+            children: conversationTitle
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1", children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-center", role: "group", "aria-label": "Text size", children: [
           /* @__PURE__ */ jsx4(
             "button",
@@ -1996,8 +2029,9 @@ function AssistantPanel({
             type: "button",
             onClick: chat.reset,
             "aria-label": "New chat",
+            title: "New chat",
             className: "rounded p-1 text-muted-foreground hover:text-foreground",
-            children: /* @__PURE__ */ jsx4(RotateCcw, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx4(MessageSquarePlus, { className: "h-4 w-4" })
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -2133,19 +2167,22 @@ function AssistantPanel({
         ]
       }
     ),
-    /* @__PURE__ */ jsx4("div", { className: "border-border border-t p-2", children: /* @__PURE__ */ jsx4(
-      ChatInput,
-      {
-        onSend: (message) => chat.send(message),
-        onCancel: chat.stop,
-        isStreaming: streaming,
-        disabled: chat.restoring || state.status === "awaiting_confirm",
-        placeholder: "Message the assistant\u2026",
-        inputLabel: null,
-        idleStatus: null,
-        streamingStatus: null
-      }
-    ) })
+    /* @__PURE__ */ jsxs2("div", { className: "border-border border-t p-2", children: [
+      streaming && /* @__PURE__ */ jsx4("div", { className: "px-2 pb-1.5", "aria-label": "Assistant is working", children: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }),
+      /* @__PURE__ */ jsx4(
+        ChatInput,
+        {
+          onSend: (message) => chat.send(message),
+          onCancel: chat.stop,
+          isStreaming: streaming,
+          disabled: chat.restoring || state.status === "awaiting_confirm",
+          placeholder: "Message the assistant\u2026",
+          inputLabel: null,
+          idleStatus: null,
+          streamingStatus: null
+        }
+      )
+    ] })
   ] });
 }
 

package/dist/chunk-H7GMPMPB.js

@@ -0,0 +1,191 @@
+// src/integrations/provider-logo.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+function normalizeProviderId(id) {
+  return id.toLowerCase().replace(/[_\s]+/g, "-").replace(/-(business|oauth|api|app|mail|sms|pack|connector|v\d+)$/g, "");
+}
+var PROVIDER_LOGO_SLUGS = {
+  gmail: "gmail",
+  googlemail: "gmail",
+  google: "google",
+  "google-drive": "googledrive",
+  "google-calendar": "googlecalendar",
+  "google-sheets": "googlesheets",
+  "google-docs": "googledocs",
+  "google-meet": "googlemeet",
+  "google-forms": "googleforms",
+  "google-ads": "googleads",
+  "google-analytics": "googleanalytics",
+  outlook: "microsoftoutlook",
+  "outlook-mail": "microsoftoutlook",
+  "microsoft-outlook": "microsoftoutlook",
+  "microsoft-calendar": "microsoftoutlook",
+  "microsoft-teams": "microsoftteams",
+  teams: "microsoftteams",
+  "microsoft-excel": "microsoftexcel",
+  excel: "microsoftexcel",
+  onedrive: "microsoftonedrive",
+  sharepoint: "microsoftsharepoint",
+  twitter: "x",
+  x: "x",
+  meta: "meta",
+  "stripe-pack": "stripe",
+  "twilio-sms": "twilio",
+  webhook: "webhooks",
+  webhooks: "webhooks",
+  hubspot: "hubspot",
+  salesforce: "salesforce",
+  pipedrive: "pipedrive",
+  zoho: "zoho",
+  quickbooks: "quickbooks",
+  intercom: "intercom",
+  zendesk: "zendesk",
+  freshdesk: "freshdesk",
+  monday: "mondaydotcom",
+  "monday-com": "mondaydotcom",
+  clickup: "clickup",
+  basecamp: "basecamp",
+  todoist: "todoist",
+  calendly: "calendly",
+  typeform: "typeform",
+  surveymonkey: "surveymonkey",
+  klaviyo: "klaviyo",
+  sendinblue: "brevo",
+  brevo: "brevo",
+  "constant-contact": "constantcontact",
+  "active-campaign": "activecampaign",
+  activecampaign: "activecampaign",
+  "google-chat": "googlechat",
+  whatsapp: "whatsapp",
+  telegram: "telegram",
+  bigquery: "googlebigquery",
+  snowflake: "snowflake",
+  postgres: "postgresql",
+  postgresql: "postgresql",
+  mysql: "mysql",
+  mongodb: "mongodb",
+  redis: "redis",
+  supabase: "supabase",
+  firebase: "firebase",
+  "aws-s3": "amazons3",
+  s3: "amazons3",
+  woocommerce: "woocommerce",
+  bigcommerce: "bigcommerce",
+  squarespace: "squarespace",
+  wix: "wix",
+  webflow: "webflow",
+  wordpress: "wordpress",
+  contentful: "contentful",
+  sanity: "sanity",
+  figma: "figma",
+  miro: "miro",
+  confluence: "confluence",
+  bitbucket: "bitbucket",
+  pagerduty: "pagerduty",
+  datadog: "datadog",
+  sentry: "sentry",
+  segment: "segment",
+  amplitude: "amplitude",
+  mixpanel: "mixpanel",
+  posthog: "posthog",
+  facebook: "facebook",
+  instagram: "instagram",
+  tiktok: "tiktok",
+  youtube: "youtube",
+  reddit: "reddit",
+  pinterest: "pinterest",
+  buffer: "buffer",
+  hootsuite: "hootsuite"
+};
+function providerLogoCandidates(opts) {
+  const out = [];
+  if (opts.iconUrl) out.push(opts.iconUrl);
+  const raw = opts.id.toLowerCase();
+  const norm = normalizeProviderId(raw);
+  const slugs = /* @__PURE__ */ new Set();
+  const curated = PROVIDER_LOGO_SLUGS[raw] ?? PROVIDER_LOGO_SLUGS[norm];
+  if (curated) slugs.add(curated);
+  slugs.add(norm.replace(/-/g, ""));
+  slugs.add(raw.replace(/[-_\s]/g, ""));
+  for (const slug of slugs) {
+    if (slug) out.push(`https://cdn.simpleicons.org/${slug}`);
+  }
+  return out;
+}
+function monogramColor(seed) {
+  const palette = [
+    "#6366f1",
+    "#8b5cf6",
+    "#ec4899",
+    "#f43f5e",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#14b8a6",
+    "#0ea5e9",
+    "#3b82f6"
+  ];
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return palette[hash % palette.length];
+}
+function ProviderIcon({
+  id,
+  iconUrl,
+  displayName,
+  size = 24,
+  className
+}) {
+  const candidates = React.useMemo(
+    () => providerLogoCandidates({ id, iconUrl }),
+    [id, iconUrl]
+  );
+  const [index, setIndex] = React.useState(0);
+  const candidateKey = `${id} ${iconUrl ?? ""}`;
+  const [seenKey, setSeenKey] = React.useState(candidateKey);
+  if (candidateKey !== seenKey) {
+    setSeenKey(candidateKey);
+    setIndex(0);
+  }
+  const label = (displayName ?? id).trim();
+  const initial = label.charAt(0).toUpperCase() || "?";
+  const src = candidates[index];
+  if (!src) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `flex shrink-0 items-center justify-center font-semibold text-white ${className ?? ""}`,
+        style: {
+          width: size,
+          height: size,
+          backgroundColor: monogramColor(id),
+          fontSize: Math.round(size * 0.42)
+        },
+        "aria-hidden": true,
+        children: initial
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: "",
+      width: size,
+      height: size,
+      loading: "lazy",
+      className: `shrink-0 object-contain ${className ?? ""}`,
+      style: { width: size, height: size },
+      onError: () => setIndex((i) => i + 1)
+    }
+  );
+}
+
+export {
+  normalizeProviderId,
+  providerLogoCandidates,
+  monogramColor,
+  ProviderIcon
+};

package/dist/globals.css

@@ -692,6 +692,9 @@
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-\[3px\] {
     height: 3px;
   }
@@ -2378,6 +2381,9 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
+  .pb-1\.5 {
+    padding-bottom: calc(var(--spacing) * 1.5);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -4163,7 +4169,9 @@
   }
 }
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -4406,7 +4414,9 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"] {
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   --md3-surface: #f8f9fb;
   --md3-surface-dim: #d9dae0;
   --md3-surface-bright: #f8f9fb;

package/dist/integrations.js

@@ -1,3 +1,9 @@
+import {
+  monogramColor,
+  normalizeProviderId,
+  providerLogoCandidates
+} from "./chunk-H7GMPMPB.js";
+
 // src/integrations/integrations-panel.tsx
 import * as React from "react";
 import { Card, CardContent, EmptyState } from "@tangle-network/ui/primitives";
@@ -42,141 +48,17 @@ var DEFAULT_FEATURED_IDS = [
 function defaultConnectorOf(provider) {
   return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
-function normalizeProviderId(id) {
-  return id.toLowerCase().replace(/[_\s]+/g, "-").replace(/-(business|oauth|api|app|mail|sms|pack|connector|v\d+)$/g, "");
-}
-var PROVIDER_LOGO_SLUGS = {
-  gmail: "gmail",
-  googlemail: "gmail",
-  google: "google",
-  "google-drive": "googledrive",
-  "google-calendar": "googlecalendar",
-  "google-sheets": "googlesheets",
-  "google-docs": "googledocs",
-  "google-meet": "googlemeet",
-  "google-forms": "googleforms",
-  "google-ads": "googleads",
-  "google-analytics": "googleanalytics",
-  outlook: "microsoftoutlook",
-  "outlook-mail": "microsoftoutlook",
-  "microsoft-outlook": "microsoftoutlook",
-  "microsoft-calendar": "microsoftoutlook",
-  "microsoft-teams": "microsoftteams",
-  teams: "microsoftteams",
-  "microsoft-excel": "microsoftexcel",
-  excel: "microsoftexcel",
-  onedrive: "microsoftonedrive",
-  sharepoint: "microsoftsharepoint",
-  twitter: "x",
-  x: "x",
-  meta: "meta",
-  "stripe-pack": "stripe",
-  "twilio-sms": "twilio",
-  webhook: "webhooks",
-  webhooks: "webhooks",
-  hubspot: "hubspot",
-  salesforce: "salesforce",
-  pipedrive: "pipedrive",
-  zoho: "zoho",
-  quickbooks: "quickbooks",
-  intercom: "intercom",
-  zendesk: "zendesk",
-  freshdesk: "freshdesk",
-  monday: "mondaydotcom",
-  "monday-com": "mondaydotcom",
-  clickup: "clickup",
-  basecamp: "basecamp",
-  todoist: "todoist",
-  calendly: "calendly",
-  typeform: "typeform",
-  surveymonkey: "surveymonkey",
-  klaviyo: "klaviyo",
-  sendinblue: "brevo",
-  brevo: "brevo",
-  "constant-contact": "constantcontact",
-  "active-campaign": "activecampaign",
-  activecampaign: "activecampaign",
-  "google-chat": "googlechat",
-  whatsapp: "whatsapp",
-  telegram: "telegram",
-  bigquery: "googlebigquery",
-  snowflake: "snowflake",
-  postgres: "postgresql",
-  postgresql: "postgresql",
-  mysql: "mysql",
-  mongodb: "mongodb",
-  redis: "redis",
-  supabase: "supabase",
-  firebase: "firebase",
-  "aws-s3": "amazons3",
-  s3: "amazons3",
-  woocommerce: "woocommerce",
-  bigcommerce: "bigcommerce",
-  squarespace: "squarespace",
-  wix: "wix",
-  webflow: "webflow",
-  wordpress: "wordpress",
-  contentful: "contentful",
-  sanity: "sanity",
-  figma: "figma",
-  miro: "miro",
-  confluence: "confluence",
-  bitbucket: "bitbucket",
-  pagerduty: "pagerduty",
-  datadog: "datadog",
-  sentry: "sentry",
-  segment: "segment",
-  amplitude: "amplitude",
-  mixpanel: "mixpanel",
-  posthog: "posthog",
-  facebook: "facebook",
-  instagram: "instagram",
-  tiktok: "tiktok",
-  youtube: "youtube",
-  reddit: "reddit",
-  pinterest: "pinterest",
-  buffer: "buffer",
-  hootsuite: "hootsuite"
-};
-function logoCandidates(provider) {
-  const out = [];
-  if (provider.iconUrl) out.push(provider.iconUrl);
-  const raw = provider.providerId.toLowerCase();
-  const norm = normalizeProviderId(raw);
-  const slugs = /* @__PURE__ */ new Set();
-  const curated = PROVIDER_LOGO_SLUGS[raw] ?? PROVIDER_LOGO_SLUGS[norm];
-  if (curated) slugs.add(curated);
-  slugs.add(norm.replace(/-/g, ""));
-  slugs.add(raw.replace(/[-_\s]/g, ""));
-  for (const slug of slugs) {
-    if (slug) out.push(`https://cdn.simpleicons.org/${slug}`);
-  }
-  return out;
-}
-function monogramColor(seed) {
-  const palette = [
-    "#6366f1",
-    "#8b5cf6",
-    "#ec4899",
-    "#f43f5e",
-    "#f97316",
-    "#eab308",
-    "#22c55e",
-    "#14b8a6",
-    "#0ea5e9",
-    "#3b82f6"
-  ];
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
-  }
-  return palette[hash % palette.length];
-}
 function ProviderLogo({
   provider,
   size = 56
 }) {
-  const candidates = React.useMemo(() => logoCandidates(provider), [provider]);
+  const candidates = React.useMemo(
+    () => providerLogoCandidates({
+      id: provider.providerId,
+      iconUrl: provider.iconUrl
+    }),
+    [provider]
+  );
   const [index, setIndex] = React.useState(0);
   const label = (provider.displayName ?? provider.providerId).trim();
   const initial = label.charAt(0).toUpperCase() || "?";

package/dist/styles.css

@@ -692,6 +692,9 @@
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-\[3px\] {
     height: 3px;
   }
@@ -2378,6 +2381,9 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
+  .pb-1\.5 {
+    padding-bottom: calc(var(--spacing) * 1.5);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -4163,7 +4169,9 @@
   }
 }
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -4406,7 +4414,9 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"] {
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   --md3-surface: #f8f9fb;
   --md3-surface-dim: #d9dae0;
   --md3-surface-bright: #f8f9fb;

package/dist/tokens.css

@@ -2,8 +2,13 @@
 /* Brand: warm purple palette, #5B4ED4 primary */
 
 /* MD3 surface hierarchy */
+/* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
+ * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
+ * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -304,7 +309,13 @@
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
-[data-sandbox-theme="vault"] {
+/* Light theme — reachable via the named `vault` theme or the standard
+ * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
+ * class selectors, and this one is later in source order, so when an element
+ * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   /* Light theme — clean professional, warm purple accents */
 
   /* MD3 surface hierarchy */

package/dist/workflows.js

@@ -4,11 +4,32 @@ import {
 import "./chunk-7JLB7UZ3.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
-import { Component, lazy, Suspense } from "react";
+import {
+  Component,
+  lazy,
+  Suspense,
+  useMemo,
+  useState
+} from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var WorkflowGraphImpl = lazy(
-  () => import("./WorkflowGraph-5QO6WCY2.js").then((m) => ({ default: m.WorkflowGraph }))
-);
+function retryImport(factory, retries = 2, delayMs = 350) {
+  return factory().catch((err) => {
+    if (retries <= 0) throw err;
+    return new Promise((resolve, reject) => {
+      setTimeout(
+        () => retryImport(factory, retries - 1, delayMs).then(resolve, reject),
+        delayMs
+      );
+    });
+  });
+}
+function lazyWorkflowGraph() {
+  return lazy(
+    () => retryImport(
+      () => import("./WorkflowGraph-7YYGIBNV.js").then((m) => ({ default: m.WorkflowGraph }))
+    )
+  );
+}
 var GraphErrorBoundary = class extends Component {
   state = { hasError: false };
   static getDerivedStateFromError() {
@@ -18,27 +39,45 @@ var GraphErrorBoundary = class extends Component {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 };
-function GraphFallback({ yaml, className }) {
+function GraphFallback({
+  yaml,
+  className,
+  onRetry
+}) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `overflow-auto rounded-lg border border-border bg-background p-2 ${className ?? ""}`,
       children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-1 text-text-muted text-xs", children: "Couldn't render the graph \u2014 showing the definition." }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-text-muted text-xs", children: "Couldn't render the graph \u2014 showing the definition." }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              className: "shrink-0 rounded border border-border px-1.5 py-0.5 text-text-muted text-xs transition hover:text-text",
+              children: "Retry"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx("pre", { className: "text-text text-xs", children: /* @__PURE__ */ jsx("code", { children: yaml }) })
       ]
     }
   );
 }
 function WorkflowGraph(props) {
+  const [attempt, setAttempt] = useState(0);
+  const Impl = useMemo(() => lazyWorkflowGraph(), [attempt]);
   return (
-    // Key the boundary by the workflow so a different/edited definition remounts
-    // it and re-attempts the graph — a transient chunk/render failure on one
-    // workflow doesn't permanently pin the YAML fallback for the next.
+    // Key the boundary by the workflow AND the attempt so a different/edited
+    // definition or a manual retry remounts it and re-attempts the graph — a
+    // transient chunk/render failure on one workflow doesn't permanently pin the
+    // YAML fallback.
     /* @__PURE__ */ jsx(
       GraphErrorBoundary,
       {
-        fallback: /* @__PURE__ */ jsx(GraphFallback, { ...props }),
+        fallback: /* @__PURE__ */ jsx(GraphFallback, { ...props, onRetry: () => setAttempt((a) => a + 1) }),
         children: /* @__PURE__ */ jsx(
           Suspense,
           {
@@ -49,11 +88,11 @@ function WorkflowGraph(props) {
                 children: "Loading graph\u2026"
               }
             ),
-            children: /* @__PURE__ */ jsx(WorkflowGraphImpl, { ...props })
+            children: /* @__PURE__ */ jsx(Impl, { ...props })
           }
         )
       },
-      props.yaml
+      `${props.yaml}::${attempt}`
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -122,7 +122,7 @@
     "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -176,7 +176,7 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.1.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",