@marimo-team/islands 0.23.11-dev27 → 0.23.11-dev28

package/dist/{chat-ui-Bf2NICxi.js → chat-ui-m1SnDPdw.js}

@@ -72,6 +72,17 @@ var Ban = createLucideIcon("ban", [["path", {
 }], ["path", {
   d: "m9 11 3 3L22 4",
   key: "1pflzl"
+}]]), CircleSlash = createLucideIcon("circle-slash", [["circle", {
+  cx: "12",
+  cy: "12",
+  r: "10",
+  key: "1mglay"
+}], ["line", {
+  x1: "9",
+  x2: "15",
+  y1: "15",
+  y2: "9",
+  key: "1dfufj"
 }]]), Paperclip = createLucideIcon("paperclip", [["path", {
   d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551",
   key: "1miecu"
@@ -6796,27 +6807,35 @@ var import_compiler_runtime$3 = require_compiler_runtime(), STATUS_LABEL = {
   "approval-responded": "Awaiting result",
   "output-available": "Done",
   "output-denied": "Denied"
-}, StatusIcon = (e18) => {
-  let m = (0, import_compiler_runtime$3.c)(4), { state: h } = e18;
+}, PENDING_STATES = /* @__PURE__ */ new Set([
+  "input-streaming",
+  "input-available",
+  "approval-responded"
+]), StatusIcon = (e18) => {
+  let m = (0, import_compiler_runtime$3.c)(5), { state: h, interrupted: g } = e18;
+  if (g) {
+    let e19;
+    return m[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleSlash, { className: "h-3 w-3 text-muted-foreground" }), m[0] = e19) : e19 = m[0], e19;
+  }
   switch (h) {
     case "input-streaming":
     case "input-available":
     case "approval-responded": {
       let e19;
-      return m[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }), m[0] = e19) : e19 = m[0], e19;
+      return m[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "h-3 w-3 animate-spin" }), m[1] = e19) : e19 = m[1], e19;
     }
     case "output-available": {
       let e19;
-      return m[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheckBig, { className: "h-3 w-3 text-(--grass-11)" }), m[1] = e19) : e19 = m[1], e19;
+      return m[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheckBig, { className: "h-3 w-3 text-(--grass-11)" }), m[2] = e19) : e19 = m[2], e19;
     }
     case "output-denied": {
       let e19;
-      return m[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ban, { className: "h-3 w-3 text-muted-foreground" }), m[2] = e19) : e19 = m[2], e19;
+      return m[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ban, { className: "h-3 w-3 text-muted-foreground" }), m[3] = e19) : e19 = m[3], e19;
     }
     default: {
       logNever(h);
       let e19;
-      return m[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrench, { className: "h-3 w-3" }), m[3] = e19) : e19 = m[3], e19;
+      return m[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wrench, { className: "h-3 w-3" }), m[4] = e19) : e19 = m[4], e19;
     }
   }
 };
@@ -6835,36 +6854,41 @@ function getTriggerToneClass(e18) {
   }
 }
 const ToolHistoryRow = (e18) => {
-  let m = (0, import_compiler_runtime$3.c)(29), { toolName: h, state: g, input: v, result: y, approval: b, index: x, className: S } = e18, w = `tool-${x === void 0 ? 0 : x}`, T;
-  m[0] === S ? T = m[1] : (T = cn("w-full", S), m[0] = S, m[1] = T);
-  let E;
-  m[2] === g ? E = m[3] : (E = cn("h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline", getTriggerToneClass(g)), m[2] = g, m[3] = E);
-  let D;
-  m[4] === g ? D = m[5] : (D = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { state: g }), m[4] = g, m[5] = D);
-  let O = STATUS_LABEL[g], k;
-  m[6] === h ? k = m[7] : (k = formatToolName(h), m[6] = h, m[7] = k);
-  let A;
-  m[8] === k ? A = m[9] : (A = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
-    className: "font-mono text-xs",
-    children: k
-  }), m[8] = k, m[9] = A);
+  let m = (0, import_compiler_runtime$3.c)(34), { toolName: h, state: g, input: v, result: y, approval: b, index: x, className: S, isActive: w } = e18, T = x === void 0 ? 0 : x, E = w === void 0 ? true : w, D;
+  m[0] !== E || m[1] !== g ? (D = !E && PENDING_STATES.has(g), m[0] = E, m[1] = g, m[2] = D) : D = m[2];
+  let O = D, k = `tool-${T}`, A;
+  m[3] === S ? A = m[4] : (A = cn("w-full", S), m[3] = S, m[4] = A);
   let j;
-  m[10] !== D || m[11] !== O || m[12] !== A ? (j = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+  m[5] !== O || m[6] !== g ? (j = cn("h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline", O ? "text-muted-foreground" : getTriggerToneClass(g)), m[5] = O, m[6] = g, m[7] = j) : j = m[7];
+  let M;
+  m[8] !== O || m[9] !== g ? (M = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, {
+    state: g,
+    interrupted: O
+  }), m[8] = O, m[9] = g, m[10] = M) : M = m[10];
+  let N = O ? "Interrupted" : STATUS_LABEL[g], P;
+  m[11] === h ? P = m[12] : (P = formatToolName(h), m[11] = h, m[12] = P);
+  let F;
+  m[13] === P ? F = m[14] : (F = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+    className: "font-mono text-xs",
+    children: P
+  }), m[13] = P, m[14] = F);
+  let I;
+  m[15] !== F || m[16] !== M || m[17] !== N ? (I = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
     className: "flex items-center gap-1",
     children: [
-      D,
-      O,
+      M,
+      N,
       ":",
-      A
+      F
     ]
-  }), m[10] = D, m[11] = O, m[12] = A, m[13] = j) : j = m[13];
-  let M;
-  m[14] !== E || m[15] !== j ? (M = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionTrigger, {
-    className: E,
-    children: j
-  }), m[14] = E, m[15] = j, m[16] = M) : M = m[16];
-  let N;
-  m[17] !== b || m[18] !== v || m[19] !== y || m[20] !== g ? (N = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContent, {
+  }), m[15] = F, m[16] = M, m[17] = N, m[18] = I) : I = m[18];
+  let z;
+  m[19] !== I || m[20] !== j ? (z = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionTrigger, {
+    className: j,
+    children: I
+  }), m[19] = I, m[20] = j, m[21] = z) : z = m[21];
+  let B;
+  m[22] !== b || m[23] !== v || m[24] !== y || m[25] !== g ? (B = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContent, {
     className: "py-2 px-2",
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HistoryContent, {
       state: g,
@@ -6872,20 +6896,20 @@ const ToolHistoryRow = (e18) => {
       result: y,
       approval: b
     })
-  }), m[17] = b, m[18] = v, m[19] = y, m[20] = g, m[21] = N) : N = m[21];
-  let P;
-  m[22] !== M || m[23] !== N ? (P = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AccordionItem, {
+  }), m[22] = b, m[23] = v, m[24] = y, m[25] = g, m[26] = B) : B = m[26];
+  let V;
+  m[27] !== z || m[28] !== B ? (V = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AccordionItem, {
     value: "tool-call",
     className: "border-0",
-    children: [M, N]
-  }), m[22] = M, m[23] = N, m[24] = P) : P = m[24];
-  let F;
-  return m[25] !== P || m[26] !== w || m[27] !== T ? (F = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accordion, {
+    children: [z, B]
+  }), m[27] = z, m[28] = B, m[29] = V) : V = m[29];
+  let H;
+  return m[30] !== V || m[31] !== k || m[32] !== A ? (H = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Accordion, {
     type: "single",
     collapsible: true,
-    className: T,
-    children: P
-  }, w), m[25] = P, m[26] = w, m[27] = T, m[28] = F) : F = m[28], F;
+    className: A,
+    children: V
+  }, k), m[30] = V, m[31] = k, m[32] = A, m[33] = H) : H = m[33], H;
 };
 var HistoryContent = (e18) => {
   let m = (0, import_compiler_runtime$3.c)(16), { state: h, input: g, result: _, approval: v } = e18;
@@ -6926,7 +6950,7 @@ var HistoryContent = (e18) => {
   }
 }, import_compiler_runtime$2 = require_compiler_runtime();
 const ToolCallView = (e18) => {
-  let m = (0, import_compiler_runtime$2.c)(25), { toolName: h, state: g, result: _, errorText: v, input: y, approval: b, onApprove: x, index: S, className: C, isLive: w } = e18, T = w === void 0 ? true : w;
+  let m = (0, import_compiler_runtime$2.c)(27), { toolName: h, state: g, result: _, errorText: v, input: y, approval: b, onApprove: x, index: S, className: C, isLive: w, isActive: T } = e18, E = w === void 0 ? true : w, D = T === void 0 ? true : T;
   switch (g) {
     case "approval-requested": {
       if (b != null && x != null) {
@@ -6940,23 +6964,24 @@ const ToolCallView = (e18) => {
         }), m[0] = b, m[1] = C, m[2] = y, m[3] = x, m[4] = h, m[5] = e20) : e20 = m[5], e20;
       }
       let e19;
-      return m[6] !== C || m[7] !== S || m[8] !== y || m[9] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolHistoryRow, {
+      return m[6] !== C || m[7] !== S || m[8] !== y || m[9] !== D || m[10] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolHistoryRow, {
         toolName: h,
         state: "input-available",
         input: y,
         index: S,
-        className: C
-      }), m[6] = C, m[7] = S, m[8] = y, m[9] = h, m[10] = e19) : e19 = m[10], e19;
+        className: C,
+        isActive: D
+      }), m[6] = C, m[7] = S, m[8] = y, m[9] = D, m[10] = h, m[11] = e19) : e19 = m[11], e19;
     }
     case "output-error": {
       let e19;
-      return m[11] !== C || m[12] !== v || m[13] !== y || m[14] !== T || m[15] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolErrorCard, {
+      return m[12] !== C || m[13] !== v || m[14] !== y || m[15] !== E || m[16] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolErrorCard, {
         toolName: h,
         input: y,
         errorText: v,
-        isLive: T,
+        isLive: E,
         className: C
-      }), m[11] = C, m[12] = v, m[13] = y, m[14] = T, m[15] = h, m[16] = e19) : e19 = m[16], e19;
+      }), m[12] = C, m[13] = v, m[14] = y, m[15] = E, m[16] = h, m[17] = e19) : e19 = m[17], e19;
     }
     case "input-streaming":
     case "input-available":
@@ -6964,74 +6989,77 @@ const ToolCallView = (e18) => {
     case "output-available":
     case "output-denied": {
       let e19;
-      return m[17] !== b || m[18] !== C || m[19] !== S || m[20] !== y || m[21] !== _ || m[22] !== g || m[23] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolHistoryRow, {
+      return m[18] !== b || m[19] !== C || m[20] !== S || m[21] !== y || m[22] !== D || m[23] !== _ || m[24] !== g || m[25] !== h ? (e19 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolHistoryRow, {
         toolName: h,
         state: g,
         input: y,
         result: _,
         approval: b,
         index: S,
-        className: C
-      }), m[17] = b, m[18] = C, m[19] = S, m[20] = y, m[21] = _, m[22] = g, m[23] = h, m[24] = e19) : e19 = m[24], e19;
+        className: C,
+        isActive: D
+      }), m[18] = b, m[19] = C, m[20] = S, m[21] = y, m[22] = D, m[23] = _, m[24] = g, m[25] = h, m[26] = e19) : e19 = m[26], e19;
     }
     default:
       return logNever(g), null;
   }
-}, renderUIMessage = ({ message: e18, isStreamingReasoning: m, isLast: g, addToolApprovalResponse: _ }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: e18.parts.map((e19, m2) => v(e19, m2)) });
-  function v(v2, y) {
-    if (isToolPart(v2)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallView, {
-      index: y,
-      toolName: v2.type,
-      result: v2.output,
-      errorText: v2.state === "output-error" ? v2.errorText : void 0,
+}, renderUIMessage = ({ message: e18, isStreamingReasoning: m, isLast: g, isActive: _, addToolApprovalResponse: v }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: e18.parts.map((e19, m2) => y(e19, m2)) });
+  function y(y2, b) {
+    if (isToolPart(y2)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallView, {
+      index: b,
+      toolName: y2.type,
+      result: y2.output,
+      errorText: y2.state === "output-error" ? y2.errorText : void 0,
       className: "my-2",
-      state: v2.state,
-      input: v2.input,
-      approval: v2.approval,
-      onApprove: _,
-      isLive: g
-    }, y);
-    if (isDataPart(v2)) return Logger.debug("Found data part", v2), null;
-    switch (v2.type) {
+      state: y2.state,
+      input: y2.input,
+      approval: y2.approval,
+      onApprove: v,
+      isLive: g,
+      isActive: _
+    }, b);
+    if (isDataPart(y2)) return Logger.debug("Found data part", y2), null;
+    switch (y2.type) {
       case "text":
-        return v2.text.includes("<marimo-") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderHTML({ html: v2.text }) }, y) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownRenderer, { content: v2.text }, y);
+        return y2.text.includes("<marimo-") ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: renderHTML({ html: y2.text }) }, b) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownRenderer, { content: y2.text }, b);
       case "reasoning":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningAccordion, {
-          reasoning: v2.text,
-          index: y,
-          isStreaming: m && g && y === (e18.parts.length || 0) - 1
-        }, y);
+          reasoning: y2.text,
+          index: b,
+          isStreaming: m && g && b === (e18.parts.length || 0) - 1
+        }, b);
       case "file":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentRenderer, { attachment: v2 }, y);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AttachmentRenderer, { attachment: y2 }, b);
       case "dynamic-tool":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolCallView, {
-          toolName: v2.toolName,
-          result: v2.output,
-          errorText: v2.state === "output-error" ? v2.errorText : void 0,
-          state: v2.state,
-          input: v2.input,
-          approval: v2.approval,
-          onApprove: _,
-          isLive: g
-        }, y);
+          toolName: y2.toolName,
+          result: y2.output,
+          errorText: y2.state === "output-error" ? y2.errorText : void 0,
+          state: y2.state,
+          input: y2.input,
+          approval: y2.approval,
+          onApprove: v,
+          isLive: g,
+          isActive: _
+        }, b);
       case "source-document":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SourceChip, {
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileText, { className: "h-3 w-3 shrink-0" }),
-          title: v2.title,
-          subtitle: v2.filename
-        }, y);
+          title: y2.title,
+          subtitle: y2.filename
+        }, b);
       case "source-url":
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SourceChip, {
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExternalLink, { className: "h-3 w-3 shrink-0" }),
-          title: v2.title ?? v2.url,
-          subtitle: v2.title ? v2.url : void 0,
-          href: v2.url
-        }, y);
+          title: y2.title ?? y2.url,
+          subtitle: y2.title ? y2.url : void 0,
+          href: y2.url
+        }, b);
       case "step-start":
         return null;
       default:
-        return logNever(v2), null;
+        return logNever(y2), null;
     }
   }
 };
@@ -7735,6 +7763,7 @@ const Chatbot = (e18) => {
                   message: e19,
                   isStreamingReasoning: B === "streaming",
                   isLast: g2,
+                  isActive: K,
                   addToolApprovalResponse: g2 ? G : void 0
                 })
               }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/dist/{code-visibility-B_yzWRMv.js → code-visibility-BkNk8VeO.js}

@@ -35996,7 +35996,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.11-dev27");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.11-dev28");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as reducer, B as safeExtractSetUIElementMessageBuffers, Bn as CircleA
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-Dk6PV_d3.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-f8-xgaui.js";
-import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-B_yzWRMv.js";
+import { $ as contextAwarePanelOpen, $t as $fae977aafc393c5c$export$6b862160d295c8e, A as prettifyRowCount, At as SELECT_COLUMN_ID, B as DatePicker, Bt as TabsContent, C as downloadSizeLimitAtom, Ct as DelayMount, D as ErrorState, Dt as loadTableAndRawData, E as EmptyState, Et as getPageIndexForRow, F as ContextMenuSeparator, Ft as Maps, G as CommandEmpty, Gt as ChartLoadingState, H as Combobox, Ht as TabsTrigger, I as ContextMenuTrigger, It as dateToLocalISODate, J as CommandList, Jt as RenderTextWithLinks, K as CommandInput, Kt as LazyVegaEmbed, L as useInternalStateWithSync, Lt as dateToLocalISODateTime, M as ContextMenu, Mt as toFieldTypes, N as ContextMenuContent, Nt as getMimeValues, O as LoadingState, Ot as loadTableData, P as ContextMenuItem, Pt as isNullishFilter, Q as PANEL_TYPES, Qt as $fae977aafc393c5c$export$588937bcd60ade55, R as useSelectList, Rt as dateToLocalISOTime, S as Filenames, St as ColumnChartSpecModel, T as ColumnPreviewContainer, Tt as usePrevious$1, U as ComboboxItem, Ut as ChartErrorState, V as DateRangePicker, Vt as TabsList, W as Command, Wt as ChartInfoState, X as smartMatch, Xt as HtmlOutput, Y as CommandSeparator, Yt as Kbd, Z as ContextAwarePanelItem, Zt as EmotionCacheProvider, _ as ADD_PRINTING_CLASS, _t as NAMELESS_COLUMN_PREFIX, an as Ellipsis, at as Toggle, b as downloadHTMLAsImage, bt as renderCellValue, c as Slide, cn as ChevronsUpDown, d as RadioGroupItem, dn as ChevronsDownUp, dt as Table, en as TextWrap, et as contextAwarePanelOwner, f as JsonOutput, fn as ChevronLeft, ft as TableBody, g as InstallPackageButton, gt as TableRow, h as DataTable, ht as TableHeader, it as slotsController, j as getColumnCountForDisplay, jt as TOO_MANY_ROWS, k as prettifyRowColumnCount, kt as INDEX_COLUMN_NAME, l as Switch, ln as ChevronsRight, lt as Fill, m as OutputRenderer, mt as TableHead, n as marimoVersionAtom, nn as Funnel, nt as isCellAwareAtom, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as Download, p as OutputArea, pn as ArrowDownWideNarrow, pt as TableCell, q as CommandItem, qt as useOverflowDetection, r as showCodeInRunModeAtom, rn as EyeOff, rt as SlotNames, sn as Code, t as useNotebookCodeAvailable, tn as GripHorizontal, tt as contextAwarePanelType, u as RadioGroup, un as ChevronsLeft, ut as Provider$1, v as downloadBlob, vt as generateColumns, w as ColumnName, wt as useIntersectionObserver, x as Progress, xt as ColumnChartContext, y as downloadByURL, yt as inferFieldTypes, z as CompactChipRow, zt as Tabs, __tla as __tla_2 } from "./code-visibility-BkNk8VeO.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-B3NOEiY5.js";
 import { t as Check } from "./check-BCaJeT-J.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-J57tzLr3.js";
@@ -8558,7 +8558,7 @@ let __tla = Promise.all([
       };
     }
   };
-  var LazyChatbot = import_react.lazy(() => import("./chat-ui-Bf2NICxi.js").then((e) => ({
+  var LazyChatbot = import_react.lazy(() => import("./chat-ui-m1SnDPdw.js").then((e) => ({
     default: e.Chatbot
   }))), messageSchema = array(object({
     id: string(),
@@ -36190,7 +36190,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-fxfTFY2x.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-C8gBbSKY.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a3;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [

package/dist/{reveal-component-fxfTFY2x.js → reveal-component-C8gBbSKY.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-BJbLjZyG.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-B_yzWRMv.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-BkNk8VeO.js";
 import { X as useDebouncedCallback } from "./input-Cn-SZdXY.js";
 import "./toDate-B4-pUFYh.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.11-dev27",
+  "version": "0.23.11-dev28",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/chat-display.tsx

@@ -20,11 +20,14 @@ export const renderUIMessage = ({
   message,
   isStreamingReasoning,
   isLast,
+  isActive,
   addToolApprovalResponse,
 }: {
   message: UIMessage;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  /** Whether the chat is currently streaming/submitting a response. */
+  isActive: boolean;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }) => {
   return (
@@ -49,6 +52,7 @@ export const renderUIMessage = ({
           approval={part.approval}
           onApprove={addToolApprovalResponse}
           isLive={isLast}
+          isActive={isActive}
         />
       );
     }
@@ -102,6 +106,7 @@ export const renderUIMessage = ({
             approval={part.approval}
             onApprove={addToolApprovalResponse}
             isLive={isLast}
+            isActive={isActive}
           />
         );
       case "source-document":

package/src/components/chat/chat-panel.tsx

@@ -143,6 +143,7 @@ interface ChatMessageProps {
   onEdit: (index: number, newValue: string) => void;
   isStreamingReasoning: boolean;
   isLast: boolean;
+  isActive: boolean;
   addToolApprovalResponse?: ChatAddToolApproveResponseFunction;
 }
 
@@ -153,6 +154,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
     onEdit,
     isStreamingReasoning,
     isLast,
+    isActive,
     addToolApprovalResponse,
   }) => {
     const renderUserMessage = (message: UIMessage) => {
@@ -205,6 +207,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
             message,
             isStreamingReasoning,
             isLast,
+            isActive,
             addToolApprovalResponse,
           })}
         </div>
@@ -780,6 +783,7 @@ const ChatPanelBody = () => {
             onEdit={handleMessageEdit}
             isStreamingReasoning={isStreamingReasoning}
             isLast={idx === messages.length - 1}
+            isActive={isLoading}
             addToolApprovalResponse={addToolApprovalResponse}
           />
         ))}

package/src/components/chat/tool-call/tool-call-view.tsx

@@ -24,6 +24,7 @@ interface ToolCallViewProps {
    * (the user has moved on).
    */
   isLive?: boolean;
+  isActive?: boolean;
 }
 
 export const ToolCallView: React.FC<ToolCallViewProps> = ({
@@ -37,6 +38,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
   index,
   className,
   isLive = true,
+  isActive = true,
 }) => {
   switch (state) {
     case "approval-requested":
@@ -61,6 +63,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
           input={input}
           index={index}
           className={className}
+          isActive={isActive}
         />
       );
 
@@ -89,6 +92,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
           approval={approval}
           index={index}
           className={className}
+          isActive={isActive}
         />
       );
 

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { BanIcon, CheckCircleIcon, Loader2, WrenchIcon } from "lucide-react";
+import {
+  BanIcon,
+  CheckCircleIcon,
+  CircleSlashIcon,
+  Loader2,
+  WrenchIcon,
+} from "lucide-react";
 import React from "react";
 import {
   Accordion,
@@ -29,7 +35,19 @@ const STATUS_LABEL: Record<HistoryState, string> = {
   "output-denied": "Denied",
 };
 
-const StatusIcon: React.FC<{ state: HistoryState }> = ({ state }) => {
+const PENDING_STATES = new Set<HistoryState>([
+  "input-streaming",
+  "input-available",
+  "approval-responded",
+]);
+
+const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
+  state,
+  interrupted,
+}) => {
+  if (interrupted) {
+    return <CircleSlashIcon className="h-3 w-3 text-muted-foreground" />;
+  }
   switch (state) {
     case "input-streaming":
     case "input-available":
@@ -69,6 +87,7 @@ interface ToolHistoryRowProps {
   approval?: ToolApproval;
   index?: number;
   className?: string;
+  isActive?: boolean;
 }
 
 export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
@@ -79,7 +98,9 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
   approval,
   index = 0,
   className,
+  isActive = true,
 }) => {
+  const interrupted = !isActive && PENDING_STATES.has(state);
   return (
     <Accordion
       key={`tool-${index}`}
@@ -91,12 +112,12 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
         <AccordionTrigger
           className={cn(
             "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
-            getTriggerToneClass(state),
+            interrupted ? "text-muted-foreground" : getTriggerToneClass(state),
           )}
         >
           <span className="flex items-center gap-1">
-            <StatusIcon state={state} />
-            {STATUS_LABEL[state]}:
+            <StatusIcon state={state} interrupted={interrupted} />
+            {interrupted ? "Interrupted" : STATUS_LABEL[state]}:
             <code className="font-mono text-xs">
               {formatToolName(toolName)}
             </code>

package/src/plugins/impl/chat/chat-ui.tsx

@@ -445,6 +445,7 @@ export const Chatbot: React.FC<Props> = (props) => {
                   message,
                   isStreamingReasoning: status === "streaming",
                   isLast,
+                  isActive: isLoading,
                   addToolApprovalResponse: isLast
                     ? addToolApprovalResponse
                     : undefined,