@adecore/agents-react 0.32.0 → 0.33.1

package/dist/chat/ui/rows/WorkflowRow.js

@@ -1,20 +1,62 @@
 import { c as _c } from "react/compiler-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Bot, ListTree, TriangleAlert, Square } from 'lucide-react';
+import { Bot, ChevronRight, Square, TriangleAlert, Workflow, X } from 'lucide-react';
 import { workflowAgentRef } from '@adecore/agent-contracts';
-import { workflowAgentTime, workflowPhases } from '../../logic/workflow.js';
+import { formatElapsedShort } from '@adecore/ui/format';
+import { Icon, IconButton, useTickingText } from '@adecore/ui';
+import { AgentIcon } from '../../../agents/AgentIcon.js';
+import { workflowAgentPreview, workflowAgentTime, workflowCounts, workflowDescription, workflowPhases } from '../../logic/workflow.js';
+import { hasToolBody } from '../../logic/tools.js';
 import { useSubagentSupport } from '../../subagent-support.js';
 import { ROW_GUTTER } from '../icons.js';
-import { RunningFor, ToggleLine, WorkLiveRow, WorkRow } from './WorkRows.js';
+import { ToolBody } from './WorkRows.js';
 import { useChatScope } from '../../../scope.js';
-import { Icon, IconButton } from '@adecore/ui';
+import { useChats } from '../../../state/chats.js';
 import { useChatActions } from '../../actions.js';
 import { useChatHost } from '../../../host.js';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DOT = {
+  running: 'bg-status-running',
+  waiting: 'bg-text-faint',
+  stopped: 'bg-text-faint',
+  done: 'bg-status-idle',
+  failed: 'bg-status-error'
+};
+const TIME = 'shrink-0 text-xs text-text-faint tabular-nums';
+function Elapsed(t0) {
+  const $ = _c(4);
+  const {
+    startedAt
+  } = t0;
+  let t1;
+  if ($[0] !== startedAt) {
+    t1 = () => formatElapsedShort(Date.now() - startedAt);
+    $[0] = startedAt;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const ref = useTickingText(t1);
+  let t2;
+  if ($[2] !== ref) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      className: TIME
+    });
+    $[2] = ref;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+}
 function AgentLine(t0) {
-  const $ = _c(18);
+  const $ = _c(49);
   const {
     view,
+    provider,
     onOpen
   } = t0;
   const {
@@ -30,142 +72,353 @@ function AgentLine(t0) {
     t1 = $[1];
   }
   const time = t1;
-  const running = state === "running";
-  const agentId = agent.agentId;
   let t2;
-  if ($[2] !== agent.label || $[3] !== agentId || $[4] !== onOpen) {
-    t2 = onOpen !== undefined && agentId !== null ? () => onOpen({
+  if ($[2] !== view) {
+    t2 = workflowAgentPreview(view);
+    $[2] = view;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const preview = t2;
+  const agentId = agent.agentId;
+  let t3;
+  if ($[4] !== agent.label || $[5] !== agentId || $[6] !== onOpen) {
+    t3 = onOpen !== undefined && agentId !== null ? () => onOpen({
       toolUseId: workflowAgentRef(agentId),
       description: agent.label
-    }) : _temp;
-    $[2] = agent.label;
-    $[3] = agentId;
-    $[4] = onOpen;
-    $[5] = t2;
+    }) : undefined;
+    $[4] = agent.label;
+    $[5] = agentId;
+    $[6] = onOpen;
+    $[7] = t3;
   } else {
-    t2 = $[5];
+    t3 = $[7];
   }
-  const open = t2;
-  let t3;
-  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = /*#__PURE__*/_jsx(Icon, {
+  const open = t3;
+  const t4 = open === undefined;
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = clsx(ROW_GUTTER, "relative text-text");
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== provider) {
+    t6 = provider === undefined ? /*#__PURE__*/_jsx(Icon, {
       icon: Bot,
-      size: 12
+      size: 14
+    }) : /*#__PURE__*/_jsx(AgentIcon, {
+      kind: provider,
+      size: 14
     });
-    $[6] = t3;
+    $[9] = provider;
+    $[10] = t6;
   } else {
-    t3 = $[6];
+    t6 = $[10];
   }
-  const t4 = running ? agent.lastTool ?? undefined : undefined;
-  const t5 = state === "failed";
-  let t6;
-  if ($[7] !== agent.startedAt || $[8] !== running || $[9] !== time) {
-    t6 = running && agent.startedAt !== null ? /*#__PURE__*/_jsx(RunningFor, {
+  const t7 = DOT[state];
+  let t8;
+  if ($[11] !== t7) {
+    t8 = clsx("absolute -right-0.75 bottom-0 size-2 rounded-full ring-2 ring-surface", t7);
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== t8) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      className: t8
+    });
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== t6 || $[16] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      className: t5,
+      children: [t6, t9]
+    });
+    $[15] = t6;
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  const t11 = state === "failed" ? "text-status-error" : "text-text";
+  let t12;
+  if ($[18] !== t11) {
+    t12 = clsx("truncate text-xs font-medium", t11);
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== agent.label || $[21] !== t12) {
+    t13 = /*#__PURE__*/_jsx("span", {
+      "data-find-field": "summary",
+      className: t12,
+      children: agent.label
+    });
+    $[20] = agent.label;
+    $[21] = t12;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== preview.text || $[24] !== preview.tool) {
+    t14 = (preview.tool !== null || preview.text !== null) && /*#__PURE__*/_jsxs("span", {
+      className: "truncate text-2xs text-text-muted",
+      children: [preview.tool !== null && /*#__PURE__*/_jsx("span", {
+        className: "font-mono text-code",
+        children: preview.tool
+      }), preview.tool !== null && preview.text !== null && " \xB7 ", preview.text]
+    });
+    $[23] = preview.text;
+    $[24] = preview.tool;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  let t15;
+  if ($[26] !== t13 || $[27] !== t14) {
+    t15 = /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-col",
+      children: [t13, t14]
+    });
+    $[26] = t13;
+    $[27] = t14;
+    $[28] = t15;
+  } else {
+    t15 = $[28];
+  }
+  let t16;
+  if ($[29] !== agent.startedAt || $[30] !== state || $[31] !== time) {
+    t16 = state === "running" && agent.startedAt !== null ? /*#__PURE__*/_jsx(Elapsed, {
       startedAt: agent.startedAt
-    }) : /*#__PURE__*/_jsx("span", {
-      className: "shrink-0 text-xs text-text-faint tabular-nums",
+    }) : time !== null && /*#__PURE__*/_jsx("span", {
+      className: TIME,
       children: time
     });
-    $[7] = agent.startedAt;
-    $[8] = running;
-    $[9] = time;
-    $[10] = t6;
+    $[29] = agent.startedAt;
+    $[30] = state;
+    $[31] = time;
+    $[32] = t16;
   } else {
-    t6 = $[10];
+    t16 = $[32];
   }
-  let t7;
-  if ($[11] !== agent.label || $[12] !== open || $[13] !== running || $[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
-    t7 = /*#__PURE__*/_jsx(ToggleLine, {
-      icon: t3,
-      label: agent.label,
-      detail: t4,
-      open: false,
-      onToggle: open,
-      failed: t5,
-      live: running,
-      trailing: t6
+  let t17;
+  if ($[33] !== state) {
+    t17 = state === "failed" && /*#__PURE__*/_jsx(Icon, {
+      icon: X,
+      size: 12,
+      className: "shrink-0 text-status-error"
+    });
+    $[33] = state;
+    $[34] = t17;
+  } else {
+    t17 = $[34];
+  }
+  const t18 = open === undefined && "invisible";
+  let t19;
+  if ($[35] !== t18) {
+    t19 = clsx("shrink-0 text-text-faint", t18);
+    $[35] = t18;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== t19) {
+    t20 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 12,
+      className: t19
+    });
+    $[37] = t19;
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+  let t21;
+  if ($[39] !== t16 || $[40] !== t17 || $[41] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("span", {
+      className: "flex h-5 shrink-0 items-center gap-2",
+      children: [t16, t17, t20]
     });
-    $[11] = agent.label;
-    $[12] = open;
-    $[13] = running;
-    $[14] = t4;
-    $[15] = t5;
-    $[16] = t6;
-    $[17] = t7;
+    $[39] = t16;
+    $[40] = t17;
+    $[41] = t20;
+    $[42] = t21;
   } else {
-    t7 = $[17];
+    t21 = $[42];
   }
-  return t7;
+  let t22;
+  if ($[43] !== open || $[44] !== t10 || $[45] !== t15 || $[46] !== t21 || $[47] !== t4) {
+    t22 = /*#__PURE__*/_jsxs("button", {
+      className: "-mx-1 mb-0.5 flex w-[calc(100%+8px)] items-start gap-2 rounded-md px-1 py-1 text-left enabled:hover:bg-surface-hover",
+      disabled: t4,
+      onClick: open,
+      children: [t10, t15, t21]
+    });
+    $[43] = open;
+    $[44] = t10;
+    $[45] = t15;
+    $[46] = t21;
+    $[47] = t4;
+    $[48] = t22;
+  } else {
+    t22 = $[48];
+  }
+  return t22;
 }
-function _temp() {}
 function PhaseBlock(t0) {
-  const $ = _c(11);
+  const $ = _c(17);
   const {
     phase,
+    provider,
     onOpen
   } = t0;
   const {
     t
   } = useTranslation("agent-chat");
   let t1;
-  if ($[0] !== phase.agents.length || $[1] !== phase.title || $[2] !== t) {
-    t1 = phase.title !== null && /*#__PURE__*/_jsxs("div", {
-      className: "mb-0.5 flex h-7 min-w-0 items-center gap-2 text-xs text-text-muted",
+  if ($[0] !== phase.agents) {
+    t1 = phase.agents.filter(_temp);
+    $[0] = phase.agents;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const settled = t1.length;
+  let t2;
+  if ($[2] !== phase.agents.length || $[3] !== phase.title || $[4] !== settled || $[5] !== t) {
+    t2 = phase.title !== null && /*#__PURE__*/_jsxs("div", {
+      className: "flex h-7 min-w-0 items-center gap-2 text-xs",
       children: [/*#__PURE__*/_jsx("span", {
-        className: ROW_GUTTER,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: ListTree,
-          size: 12
-        })
-      }), /*#__PURE__*/_jsx("span", {
-        className: "min-w-0 truncate",
+        className: "min-w-0 truncate font-medium text-text",
         children: phase.title
       }), /*#__PURE__*/_jsx("span", {
-        className: "grow"
-      }), phase.agents.length === 0 && /*#__PURE__*/_jsx("span", {
-        className: "shrink-0 text-text-faint",
-        children: t("rows.workflow.notStarted")
+        className: "shrink-0 text-text-faint tabular-nums",
+        children: phase.agents.length === 0 ? t("rows.workflow.notStarted") : `${settled}/${phase.agents.length}`
       })]
     });
-    $[0] = phase.agents.length;
-    $[1] = phase.title;
-    $[2] = t;
-    $[3] = t1;
+    $[2] = phase.agents.length;
+    $[3] = phase.title;
+    $[4] = settled;
+    $[5] = t;
+    $[6] = t2;
   } else {
-    t1 = $[3];
+    t2 = $[6];
   }
-  let t2;
-  if ($[4] !== onOpen || $[5] !== phase.agents || $[6] !== phase.title) {
-    t2 = phase.agents.length > 0 && /*#__PURE__*/_jsx("div", {
-      className: phase.title === null ? undefined : "ml-6",
-      children: phase.agents.map(view => /*#__PURE__*/_jsx(AgentLine, {
-        view: view,
+  let t3;
+  if ($[7] !== onOpen || $[8] !== phase.agents || $[9] !== provider) {
+    let t4;
+    if ($[11] !== onOpen || $[12] !== provider) {
+      t4 = view_0 => /*#__PURE__*/_jsx(AgentLine, {
+        view: view_0,
+        provider: provider,
         onOpen: onOpen
-      }, view.agent.index))
+      }, view_0.agent.index);
+      $[11] = onOpen;
+      $[12] = provider;
+      $[13] = t4;
+    } else {
+      t4 = $[13];
+    }
+    t3 = phase.agents.map(t4);
+    $[7] = onOpen;
+    $[8] = phase.agents;
+    $[9] = provider;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[14] !== t2 || $[15] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "mt-3",
+      children: [t2, t3]
     });
-    $[4] = onOpen;
-    $[5] = phase.agents;
-    $[6] = phase.title;
-    $[7] = t2;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
   } else {
-    t2 = $[7];
+    t4 = $[16];
   }
-  let t3;
-  if ($[8] !== t1 || $[9] !== t2) {
-    t3 = /*#__PURE__*/_jsxs("div", {
-      children: [t1, t2]
+  return t4;
+}
+function _temp(view) {
+  return view.state === "done" || view.state === "failed";
+}
+function Counts(t0) {
+  const $ = _c(9);
+  const {
+    counts
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let t1;
+  if ($[0] !== counts.done || $[1] !== counts.failed || $[2] !== counts.running || $[3] !== counts.total || $[4] !== t) {
+    const parts = [{
+      key: "working",
+      count: counts.running,
+      tone: "text-status-running"
+    }, {
+      key: "finished",
+      count: counts.done,
+      tone: "text-status-idle"
+    }, {
+      key: "failedCount",
+      count: counts.failed,
+      tone: "text-status-error"
+    }].filter(_temp2);
+    let t2;
+    if ($[6] !== counts.total || $[7] !== t) {
+      t2 = t("rows.workflow.agents", {
+        count: counts.total
+      });
+      $[6] = counts.total;
+      $[7] = t;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    t1 = /*#__PURE__*/_jsxs("span", {
+      className: "shrink-0 truncate text-xs text-text-faint tabular-nums",
+      children: [t2, parts.map(part_0 => /*#__PURE__*/_jsxs("span", {
+        children: [" \xB7 ", /*#__PURE__*/_jsx("span", {
+          className: part_0.tone,
+          children: t(`rows.workflow.${part_0.key}`, {
+            count: part_0.count
+          })
+        })]
+      }, part_0.key))]
     });
-    $[8] = t1;
-    $[9] = t2;
-    $[10] = t3;
+    $[0] = counts.done;
+    $[1] = counts.failed;
+    $[2] = counts.running;
+    $[3] = counts.total;
+    $[4] = t;
+    $[5] = t1;
   } else {
-    t3 = $[10];
+    t1 = $[5];
   }
-  return t3;
+  return t1;
 }
 // Keep background progress visible after the launcher turn ends.
+function _temp2(part) {
+  return part.count > 0;
+}
 export function WorkflowRow(t0) {
-  const $ = _c(30);
+  const $ = _c(78);
   const {
     tool,
     workflow,
@@ -177,8 +430,10 @@ export function WorkflowRow(t0) {
     t
   } = useTranslation("agent-chat");
   const {
-    id
+    id,
+    keyOf
   } = useChatScope();
+  const [open, setOpen] = useState(false);
   let t1;
   if ($[0] !== id) {
     t1 = s => s.unsupported[id] === true;
@@ -188,13 +443,42 @@ export function WorkflowRow(t0) {
     t1 = $[1];
   }
   const refused = useSubagentSupport(t1);
+  let t2;
+  if ($[2] !== chatId || $[3] !== keyOf) {
+    t2 = s_0 => chatId === undefined ? undefined : s_0.statusByKey[keyOf(chatId)]?.info?.provider;
+    $[2] = chatId;
+    $[3] = keyOf;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const provider = useChats(t2);
   const running = tool.state === "running";
   const phases = workflowPhases(workflow, running);
+  const counts = workflowCounts(phases);
+  let t3;
+  if ($[5] !== tool.input) {
+    t3 = workflowDescription(tool.input);
+    $[5] = tool.input;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const description = t3;
+  let t4;
+  if ($[7] !== tool) {
+    t4 = hasToolBody(tool);
+    $[7] = tool;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const opens = t4;
   const onOpen = refused ? undefined : onOpenAgent;
   const actions = useChatActions();
-  let t2;
-  if ($[2] !== actions || $[3] !== chatId || $[4] !== host || $[5] !== t || $[6] !== workflow) {
-    t2 = () => {
+  let t5;
+  if ($[9] !== actions || $[10] !== chatId || $[11] !== host || $[12] !== t || $[13] !== workflow.taskId) {
+    t5 = () => {
       if (chatId && workflow.taskId) {
         actions.stopTask(chatId, workflow.taskId).catch(error => {
           host.notify({
@@ -205,71 +489,220 @@ export function WorkflowRow(t0) {
         });
       }
     };
-    $[2] = actions;
-    $[3] = chatId;
-    $[4] = host;
-    $[5] = t;
-    $[6] = workflow;
-    $[7] = t2;
+    $[9] = actions;
+    $[10] = chatId;
+    $[11] = host;
+    $[12] = t;
+    $[13] = workflow.taskId;
+    $[14] = t5;
   } else {
-    t2 = $[7];
+    t5 = $[14];
   }
-  const stop = t2;
-  let t3;
-  if ($[8] !== chatId || $[9] !== running || $[10] !== tool || $[11] !== workflow) {
-    t3 = /*#__PURE__*/_jsx("div", {
+  const stop = t5;
+  const failed = tool.state === "error";
+  const t6 = running && "text-accent";
+  let t7;
+  if ($[15] !== t6) {
+    t7 = clsx(ROW_GUTTER, t6);
+    $[15] = t6;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = /*#__PURE__*/_jsx(Icon, {
+      icon: Workflow,
+      size: 12
+    });
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== t7) {
+    t9 = /*#__PURE__*/_jsx("span", {
+      className: t7,
+      children: t8
+    });
+    $[18] = t7;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  const t10 = running && "chat-live-text";
+  let t11;
+  if ($[20] !== t10) {
+    t11 = clsx("shrink-0", t10);
+    $[20] = t10;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  const t12 = `rows.workflow.${running ? "running" : failed ? "failed" : "done"}`;
+  let t13;
+  if ($[22] !== t || $[23] !== t12) {
+    t13 = t(t12);
+    $[22] = t;
+    $[23] = t12;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== t11 || $[26] !== t13) {
+    t14 = /*#__PURE__*/_jsx("span", {
+      className: t11,
+      children: t13
+    });
+    $[25] = t11;
+    $[26] = t13;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  let t15;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /*#__PURE__*/_jsx("span", {
+      className: "grow"
+    });
+    $[28] = t15;
+  } else {
+    t15 = $[28];
+  }
+  const t16 = counts.total > 0 && /*#__PURE__*/_jsx(Counts, {
+    counts: counts
+  });
+  let t17;
+  if ($[29] !== open || $[30] !== opens) {
+    t17 = opens && /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 12,
+      className: clsx("shrink-0 text-text-faint transition-transform", open && "rotate-90")
+    });
+    $[29] = open;
+    $[30] = opens;
+    $[31] = t17;
+  } else {
+    t17 = $[31];
+  }
+  let t18;
+  if ($[32] !== t14 || $[33] !== t16 || $[34] !== t17 || $[35] !== t9) {
+    t18 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t9, t14, t15, t16, t17]
+    });
+    $[32] = t14;
+    $[33] = t16;
+    $[34] = t17;
+    $[35] = t9;
+    $[36] = t18;
+  } else {
+    t18 = $[36];
+  }
+  const header = t18;
+  const t19 = failed ? "text-status-error" : "text-text-muted";
+  const t20 = opens && "hover:bg-surface-hover";
+  let t21;
+  if ($[37] !== t19 || $[38] !== t20) {
+    t21 = clsx("-mx-1 flex h-7 w-[calc(100%+8px)] min-w-0 items-center gap-2 rounded-md px-1 text-left text-xs", t19, t20);
+    $[37] = t19;
+    $[38] = t20;
+    $[39] = t21;
+  } else {
+    t21 = $[39];
+  }
+  const headerClasses = t21;
+  const t22 = tool.id;
+  const t23 = "mb-1";
+  let t24;
+  if ($[40] !== header || $[41] !== headerClasses || $[42] !== opens) {
+    t24 = /*#__PURE__*/_jsx("div", {
       className: "min-w-0 grow",
-      children: running ? /*#__PURE__*/_jsx(WorkLiveRow, {
-        chatId: chatId ?? "",
-        tool: tool
-      }) : /*#__PURE__*/_jsx(WorkRow, {
-        chatId: chatId,
-        tool: tool,
-        detail: workflow.name ?? undefined
+      children: opens ? /*#__PURE__*/_jsx("button", {
+        className: headerClasses,
+        onClick: () => setOpen(_temp3),
+        children: header
+      }) : /*#__PURE__*/_jsx("div", {
+        className: headerClasses,
+        children: header
       })
     });
-    $[8] = chatId;
-    $[9] = running;
-    $[10] = tool;
-    $[11] = workflow;
-    $[12] = t3;
+    $[40] = header;
+    $[41] = headerClasses;
+    $[42] = opens;
+    $[43] = t24;
   } else {
-    t3 = $[12];
+    t24 = $[43];
   }
-  let t4;
-  if ($[13] !== chatId || $[14] !== running || $[15] !== stop || $[16] !== t || $[17] !== workflow) {
-    t4 = running && chatId && workflow.taskId && /*#__PURE__*/_jsx(IconButton, {
+  let t25;
+  if ($[44] !== chatId || $[45] !== running || $[46] !== stop || $[47] !== t || $[48] !== workflow.taskId) {
+    t25 = running && chatId && workflow.taskId && /*#__PURE__*/_jsx(IconButton, {
       icon: Square,
       size: "xs",
       label: t("activity.stop"),
       onClick: stop
     });
-    $[13] = chatId;
-    $[14] = running;
-    $[15] = stop;
-    $[16] = t;
-    $[17] = workflow;
-    $[18] = t4;
+    $[44] = chatId;
+    $[45] = running;
+    $[46] = stop;
+    $[47] = t;
+    $[48] = workflow.taskId;
+    $[49] = t25;
   } else {
-    t4 = $[18];
+    t25 = $[49];
   }
-  let t5;
-  if ($[19] !== t3 || $[20] !== t4) {
-    t5 = /*#__PURE__*/_jsxs("div", {
+  let t26;
+  if ($[50] !== t24 || $[51] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
       className: "flex items-center gap-1",
-      children: [t3, t4]
+      children: [t24, t25]
     });
-    $[19] = t3;
-    $[20] = t4;
-    $[21] = t5;
+    $[50] = t24;
+    $[51] = t25;
+    $[52] = t26;
   } else {
-    t5 = $[21];
+    t26 = $[52];
   }
-  let t6;
-  if ($[22] !== running || $[23] !== t || $[24] !== workflow) {
-    t6 = running && workflow.stalledAt !== undefined && /*#__PURE__*/_jsxs("p", {
+  let t27;
+  if ($[53] !== open || $[54] !== opens || $[55] !== tool) {
+    t27 = open && opens && /*#__PURE__*/_jsx(ToolBody, {
+      tool: tool
+    });
+    $[53] = open;
+    $[54] = opens;
+    $[55] = tool;
+    $[56] = t27;
+  } else {
+    t27 = $[56];
+  }
+  const t28 = "mt-1.5 ml-6";
+  let t29;
+  if ($[57] !== workflow.name) {
+    t29 = workflow.name !== null && /*#__PURE__*/_jsx("div", {
+      className: "truncate text-sm font-medium text-text",
+      children: workflow.name
+    });
+    $[57] = workflow.name;
+    $[58] = t29;
+  } else {
+    t29 = $[58];
+  }
+  let t30;
+  if ($[59] !== description) {
+    t30 = description !== null && /*#__PURE__*/_jsx("p", {
+      className: "mt-0.5 line-clamp-2 text-xs text-text-muted",
+      children: description
+    });
+    $[59] = description;
+    $[60] = t30;
+  } else {
+    t30 = $[60];
+  }
+  let t31;
+  if ($[61] !== running || $[62] !== t || $[63] !== workflow.stalledAt) {
+    t31 = running && workflow.stalledAt !== undefined && /*#__PURE__*/_jsxs("p", {
       role: "status",
-      className: "ml-6 mb-1 flex items-start gap-1.5 text-xs text-text-muted",
+      className: "mt-1 flex items-start gap-1.5 text-xs text-text-muted",
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: TriangleAlert,
         size: 12,
@@ -278,31 +711,58 @@ export function WorkflowRow(t0) {
         children: t("rows.workflow.stalled")
       })]
     });
-    $[22] = running;
-    $[23] = t;
-    $[24] = workflow;
-    $[25] = t6;
+    $[61] = running;
+    $[62] = t;
+    $[63] = workflow.stalledAt;
+    $[64] = t31;
   } else {
-    t6 = $[25];
+    t31 = $[64];
   }
-  const t7 = phases.length > 0 && /*#__PURE__*/_jsx("div", {
-    className: "ml-6",
-    children: phases.map(phase => /*#__PURE__*/_jsx(PhaseBlock, {
+  let t32;
+  if ($[65] !== onOpen || $[66] !== provider) {
+    t32 = phase => /*#__PURE__*/_jsx(PhaseBlock, {
       phase: phase,
+      provider: provider,
       onOpen: onOpen
-    }, phase.key))
-  });
-  let t8;
-  if ($[26] !== t5 || $[27] !== t6 || $[28] !== t7) {
-    t8 = /*#__PURE__*/_jsxs("div", {
-      children: [t5, t6, t7]
+    }, phase.key);
+    $[65] = onOpen;
+    $[66] = provider;
+    $[67] = t32;
+  } else {
+    t32 = $[67];
+  }
+  const t33 = phases.map(t32);
+  let t34;
+  if ($[68] !== t29 || $[69] !== t30 || $[70] !== t31 || $[71] !== t33) {
+    t34 = /*#__PURE__*/_jsxs("div", {
+      className: t28,
+      children: [t29, t30, t31, t33]
     });
-    $[26] = t5;
-    $[27] = t6;
-    $[28] = t7;
-    $[29] = t8;
+    $[68] = t29;
+    $[69] = t30;
+    $[70] = t31;
+    $[71] = t33;
+    $[72] = t34;
   } else {
-    t8 = $[29];
+    t34 = $[72];
   }
-  return t8;
+  let t35;
+  if ($[73] !== t26 || $[74] !== t27 || $[75] !== t34 || $[76] !== tool.id) {
+    t35 = /*#__PURE__*/_jsxs("div", {
+      "data-find-item": t22,
+      className: t23,
+      children: [t26, t27, t34]
+    });
+    $[73] = t26;
+    $[74] = t27;
+    $[75] = t34;
+    $[76] = tool.id;
+    $[77] = t35;
+  } else {
+    t35 = $[77];
+  }
+  return t35;
+}
+function _temp3(value) {
+  return !value;
 }