@tangle-network/sandbox-ui 0.42.0 → 0.44.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.d.ts

@@ -38,6 +38,9 @@ interface ReasoningEventData {
 interface ToolCallEventData {
     callId: string;
     name: string;
+    /** The parsed arguments the agent invoked the tool with. Lets a renderer show
+     *  exactly what was called. Omitted by servers predating the field. */
+    args?: Record<string, unknown>;
 }
 interface ToolResultEventData {
     callId: string;
@@ -84,6 +87,9 @@ interface UsageEventData {
     completionTokens: number | null;
     costUsd: number | null;
     balanceUsd: number | null;
+    /** Wall-clock duration of the turn in milliseconds, when the server measures
+     *  it. Drives the renderer's tokens/sec figure. Omitted by older servers. */
+    durationMs?: number | null;
     /** True when a completed turn was replayed from storage (no charge). */
     replayed?: boolean;
 }
@@ -151,11 +157,12 @@ interface ChatMessage {
     id: string;
     role: ChatRole;
     text: string;
-    /** Present only on `tool` messages — the activity's tool name, state, and (once
-     *  finished) its outcome. */
+    /** Present only on `tool` messages — the activity's tool name, the arguments it
+     *  was called with, its state, and (once finished) its outcome. */
     tool?: {
         name: string;
         status: ToolActivityStatus;
+        args?: Record<string, unknown>;
         outcome?: ToolOutcome;
     };
 }
@@ -176,6 +183,13 @@ interface PendingProposal {
 interface UsageInfo {
     costUsd: number | null;
     balanceUsd: number | null;
+    /** Token counts + wall-clock duration for the settled turn, when the server
+     *  reports them — drive per-message tokens/sec + cost in a renderer. Optional
+     *  so a consumer constructing this on the prior `{ costUsd, balanceUsd,
+     *  replayed }` shape stays valid; a renderer treats a missing value as null. */
+    promptTokens?: number | null;
+    completionTokens?: number | null;
+    durationMs?: number | null;
     replayed: boolean;
 }
 /**
@@ -202,6 +216,10 @@ interface AssistantTranscriptView {
      *  (drives a "thinking" affordance). */
     isThinking: boolean;
     pendingProposals: PendingProposal[];
+    /** Cost/tokens/duration for the most recently settled turn, or null before any
+     *  turn settles. Optional so a host predating the field stays a valid consumer;
+     *  a renderer treats a missing value the same as null. */
+    usage?: UsageInfo | null;
     /** The panel's bound proposal card for a pending proposal — render it where the
      *  confirm/cancel UI should appear. */
     renderProposal: (proposal: PendingProposal) => ReactNode;
@@ -303,6 +321,13 @@ interface AssistantClient {
     fetchThreadHistory(threadId: string, signal?: AbortSignal): Promise<ThreadHistoryResult>;
     streamChat(req: ChatRequest, onEvent: (event: AssistantStreamEvent) => void, signal: AbortSignal): Promise<void>;
     confirmProposal(proposalId: string): Promise<ConfirmResult>;
+    /** Delete a thread and its server-side turns/proposals. Resolves `{ ok }`; a
+     *  404 (already gone) is treated as success so a double-delete is harmless.
+     *  Optional so a host with no delete endpoint stays a valid client — the panel
+     *  hides the delete affordance when it's absent (see `useAssistantThreads`). */
+    deleteThread?(threadId: string): Promise<{
+        ok: boolean;
+    }>;
 }
 /**
  * Build an assistant client bound to one host's transport. The returned methods
@@ -450,6 +475,15 @@ interface AssistantThreads {
     /** Load (or reload) the thread list. Must be called to populate `threads` —
      *  the hook never fetches on mount (the panel calls this when history opens). */
     refresh: () => void;
+    /** Delete a thread. Optimistically drops it from the list (within the current
+     *  owner scope); on failure the list is reloaded to restore the true state. A
+     *  no-op resolving `{ ok: false }` when the client has no `deleteThread`. */
+    remove: (threadId: string) => Promise<{
+        ok: boolean;
+    }>;
+    /** Whether the configured client supports deletion — drives whether a host
+     *  shows the delete affordance. */
+    canRemove: boolean;
 }
 declare function useAssistantThreads(userId: string | null): AssistantThreads;
 

package/dist/assistant.js

@@ -1,3 +1,6 @@
+import {
+  ProviderIcon
+} from "./chunk-H7GMPMPB.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";
@@ -443,6 +446,18 @@ function createAssistantClient(config) {
         ok: false,
         error: body?.error?.message ?? "The action could not be completed"
       };
+    },
+    async deleteThread(threadId) {
+      try {
+        const res = await fetch(url(`/threads/${encodeURIComponent(threadId)}`), {
+          method: "DELETE",
+          headers: authHeaders(),
+          credentials
+        });
+        return { ok: res.ok || res.status === 404 };
+      } catch {
+        return { ok: false };
+      }
     }
   };
 }
@@ -845,7 +860,11 @@ function applyStreamEvent(state, event) {
         id: chipId,
         role: "tool",
         text: "",
-        tool: { name: event.data.name, status: "running" }
+        tool: {
+          name: event.data.name,
+          status: "running",
+          args: event.data.args
+        }
       };
       return {
         ...state,
@@ -865,7 +884,14 @@ function applyStreamEvent(state, event) {
             (m) => m.id === chipId ? {
               ...m,
               text: errText,
-              tool: { name: event.data.name, status, outcome }
+              // Preserve the args the matching tool_call recorded — the
+              // result event doesn't carry them.
+              tool: {
+                name: event.data.name,
+                status,
+                args: m.tool?.args,
+                outcome
+              }
             } : m
           )
         };
@@ -893,6 +919,9 @@ function applyStreamEvent(state, event) {
         usage: {
           costUsd: event.data.costUsd,
           balanceUsd: event.data.balanceUsd,
+          promptTokens: event.data.promptTokens,
+          completionTokens: event.data.completionTokens,
+          durationMs: event.data.durationMs ?? null,
           replayed: event.data.replayed ?? false
         }
       };
@@ -1406,6 +1435,7 @@ function useAssistantThreads(userId) {
   const clientRef = useRef2(client);
   clientRef.current = client;
   const abortRef = useRef2(null);
+  const pendingDeletesRef = useRef2(/* @__PURE__ */ new Set());
   const [state, setState] = useState2(() => ({
     threads: [],
     loading: false,
@@ -1440,7 +1470,11 @@ function useAssistantThreads(userId) {
       if (!isCurrent()) return;
       setState((s) => ({
         // null = transient failure: keep the prior list, just drop the spinner.
-        threads: result ?? s.threads,
+        // Drop any in-flight/finished deletions so a stale fetch can't resurrect
+        // a row we already removed.
+        threads: (result ?? s.threads).filter(
+          (t) => !pendingDeletesRef.current.has(t.id)
+        ),
         loading: false,
         loaded: true,
         ownerUserId: requestedUserId,
@@ -1452,13 +1486,45 @@ function useAssistantThreads(userId) {
       }
     });
   }, []);
-  useEffect3(() => () => abortRef.current?.abort(), [userId, client]);
+  const remove = useCallback2(
+    async (threadId) => {
+      const requestedClient = clientRef.current;
+      const requestedUserId = userRef.current;
+      if (!requestedClient.deleteThread) return { ok: false };
+      pendingDeletesRef.current.add(threadId);
+      setState(
+        (s) => s.ownerClient === requestedClient && s.ownerUserId === requestedUserId ? { ...s, threads: s.threads.filter((t) => t.id !== threadId) } : s
+      );
+      let res;
+      try {
+        res = await requestedClient.deleteThread(threadId);
+      } catch {
+        res = { ok: false };
+      }
+      if (!res.ok) {
+        pendingDeletesRef.current.delete(threadId);
+        if (userRef.current === requestedUserId && clientRef.current === requestedClient) {
+          refresh();
+        }
+      }
+      return res;
+    },
+    [refresh]
+  );
+  useEffect3(() => {
+    return () => abortRef.current?.abort();
+  }, [userId, client]);
+  useEffect3(() => {
+    return () => pendingDeletesRef.current.clear();
+  }, []);
   const stale = state.ownerUserId !== userId || state.ownerClient !== client;
   return {
     threads: stale ? [] : state.threads,
     loading: stale ? false : state.loading,
     loaded: stale ? false : state.loaded,
-    refresh
+    refresh,
+    remove,
+    canRemove: typeof client.deleteThread === "function"
   };
 }
 
@@ -1466,13 +1532,13 @@ function useAssistantThreads(userId) {
 import { MessageSquare } from "lucide-react";
 import {
   useEffect as useEffect5,
-  useRef as useRef5
+  useRef as useRef6
 } from "react";
 
 // src/assistant/AssistantPanel.tsx
-import { AgentTimeline, ChatInput } from "@tangle-network/ui/chat";
-import { History, Minus, Plus, RotateCcw, X } from "lucide-react";
-import { useState as useState5 } from "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
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1607,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" }),
@@ -1674,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",
@@ -1841,10 +1924,15 @@ function AssistantPanel({
   const font = useFontScale();
   const [historyOpen, setHistoryOpen] = useState5(false);
   const { state } = chat;
+  const chatRef = useRef4(chat);
+  chatRef.current = chat;
   const effectiveBalance = state.usage?.balanceUsd ?? balanceUsd;
   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,
     {
@@ -1864,20 +1952,42 @@ function AssistantPanel({
       return next;
     });
   };
+  const deleteThread = async (threadId) => {
+    const pre = chatRef.current.state;
+    if (pre.threadId === threadId && pre.status !== "idle") return;
+    if (!window.confirm("Delete this conversation? This can't be undone.")) {
+      return;
+    }
+    const res = await threads.remove(threadId);
+    const live = chatRef.current.state;
+    if (res.ok && live.threadId === threadId && live.status === "idle") {
+      chatRef.current.reset();
+    }
+  };
   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",
@@ -1919,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(
@@ -1958,18 +2069,35 @@ function AssistantPanel({
         }
       )
     ] }),
-    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          chat.switchThread(t.id);
-          setHistoryOpen(false);
-        },
-        className: "block w-full truncate px-4 py-2 text-left text-foreground text-xs hover:bg-muted/50",
-        children: t.title ?? "Untitled conversation"
-      }
-    ) }, t.id)) }) }),
+    historyOpen && /* @__PURE__ */ jsx4("div", { className: "max-h-48 overflow-y-auto border-border border-b", children: threads.threads.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-4 py-3 text-muted-foreground text-xs", children: threads.loaded ? "No past conversations." : "Loading\u2026" }) : /* @__PURE__ */ jsx4("ul", { children: threads.threads.map((t) => {
+      const busyActive = state.threadId === t.id && state.status !== "idle";
+      return /* @__PURE__ */ jsxs2("li", { className: "group flex items-center hover:bg-muted/50", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              chat.switchThread(t.id);
+              setHistoryOpen(false);
+            },
+            className: "min-w-0 flex-1 truncate px-4 py-2 text-left text-foreground text-xs",
+            children: t.title ?? "Untitled conversation"
+          }
+        ),
+        threads.canRemove && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => void deleteThread(t.id),
+            disabled: busyActive,
+            "aria-label": "Delete conversation",
+            title: busyActive ? "Can't delete while this conversation is active" : "Delete conversation",
+            className: "shrink-0 p-2 text-muted-foreground opacity-0 transition hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30",
+            children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, t.id);
+    }) }) }),
     /* @__PURE__ */ jsx4(
       "div",
       {
@@ -1986,6 +2114,7 @@ function AssistantPanel({
           isStreaming: streaming,
           isThinking,
           pendingProposals: state.pendingProposals,
+          usage: state.usage,
           renderProposal
         }) : /* @__PURE__ */ jsx4(
           AgentTimeline,
@@ -2038,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
+        }
+      )
+    ] })
   ] });
 }
 
@@ -2092,7 +2224,7 @@ function useAssistantLauncher() {
 }
 
 // src/assistant/ResizeHandle.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function ResizeHandle({
   width,
@@ -2101,7 +2233,7 @@ function ResizeHandle({
   onCommit,
   onNudge
 }) {
-  const dragRef = useRef4(null);
+  const dragRef = useRef5(null);
   const onPointerDown = (e) => {
     if (e.button !== 0) return;
     e.preventDefault();
@@ -2190,10 +2322,10 @@ function AssistantDock({
   const chat = useAssistantChat(userId, { onWorkflowMutation });
   const isDesktop = useIsDesktop();
   const { width, maxWidth, setWidth, previewWidth, nudgeWidth } = usePanelWidth();
-  const launcherRef = useRef5(null);
-  const dialogRef = useRef5(null);
-  const returnFocusRef = useRef5(null);
-  const wasOpenRef = useRef5(false);
+  const launcherRef = useRef6(null);
+  const dialogRef = useRef6(null);
+  const returnFocusRef = useRef6(null);
+  const wasOpenRef = useRef6(false);
   useEffect5(() => {
     if (!open) return;
     const onKeyDown = (e) => {

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);
   }

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);
   }

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.42.0",
+  "version": "0.44.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",