@tangle-network/agent-app 0.45.36 → 0.45.38

package/dist/assistant/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { ToolDetailRenderers, ComposerFile, ChatUiMessage } from '../web-react/index.js';
+import '@tangle-network/ui/types';
 import '../contract-OxG_jVMx.js';
 import '@tangle-network/agent-interface';
 import '../plans/index.js';

package/dist/assistant/index.js

@@ -1,7 +1,7 @@
 import {
   ChatComposer,
   ChatMessages
-} from "../chunk-H3LYJIAQ.js";
+} from "../chunk-HNVAASAO.js";
 import "../chunk-FBVLEGEG.js";
 import "../chunk-5MZXWPFN.js";
 import "../chunk-GEYACSFW.js";

package/dist/{chunk-H3LYJIAQ.js → chunk-HNVAASAO.js}

@@ -9,7 +9,9 @@ import {
   ChevronDown,
   OVERLAY_SHADOW,
   POPOVER_OPTION_FOCUS,
-  usePending
+  PopoverSurface,
+  usePending,
+  usePopover
 } from "./chunk-3AXSERRK.js";
 import {
   UNTITLED_SESSION_LABEL,
@@ -39,6 +41,7 @@ import {
 
 // src/web-react/index.tsx
 import { useEffect as useEffect11, useMemo as useMemo7, useRef as useRef10, useState as useState14, memo } from "react";
+import { InlineToolItem } from "@tangle-network/ui/run";
 
 // src/web-react/smooth-text.ts
 import { useEffect, useRef, useState } from "react";
@@ -3119,6 +3122,7 @@ function SeatPaywall({
 import {
   useCallback as useCallback8,
   useEffect as useEffect9,
+  useId as useId2,
   useMemo as useMemo5,
   useRef as useRef8,
   useState as useState12
@@ -3801,6 +3805,8 @@ function SessionRow({
   onSelectedChange
 }) {
   const [menuOpen, setMenuOpen] = useState12(false);
+  const panelId = useId2();
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(menuOpen, setMenuOpen);
   const extras = extraActions?.(session) ?? [];
   const hasMenu = Boolean(onRename) || Boolean(onDelete) || extras.length > 0;
   const showUnread = Boolean(session.unread) && !responding;
@@ -3828,60 +3834,72 @@ function SessionRow({
       )
     ] }),
     /* @__PURE__ */ jsx11("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: timestamp }),
-    hasMenu && /* @__PURE__ */ jsxs9("div", { className: "relative shrink-0", children: [
+    hasMenu && /* @__PURE__ */ jsxs9("div", { ref: containerRef, className: "relative shrink-0", children: [
       /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
+          ...triggerProps,
           "aria-label": "Session actions",
-          "aria-expanded": menuOpen,
+          "aria-controls": menuOpen ? panelId : void 0,
           onClick: () => setMenuOpen((open) => !open),
           className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:opacity-100 sm:opacity-0 sm:group-hover:opacity-100 aria-expanded:opacity-100",
           children: /* @__PURE__ */ jsx11("span", { "aria-hidden": true, className: "text-base leading-none", children: "\u22EF" })
         }
       ),
-      menuOpen && /* @__PURE__ */ jsxs9(Fragment5, { children: [
-        /* @__PURE__ */ jsx11("div", { className: "fixed inset-0 z-20", onClick: () => setMenuOpen(false), "aria-hidden": true }),
-        /* @__PURE__ */ jsxs9("div", { className: `absolute right-0 z-30 mt-1 w-36 overflow-hidden rounded-md border border-border bg-popover py-1 ${OVERLAY_SHADOW}`, children: [
-          onRename && /* @__PURE__ */ jsx11(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setMenuOpen(false);
-                onRename(session);
-              },
-              className: "block w-full px-3 py-1.5 text-left text-xs text-foreground transition hover:bg-accent",
-              children: renameLabel
-            }
-          ),
-          extras.map((action) => /* @__PURE__ */ jsx11(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setMenuOpen(false);
-                action.onSelect();
-              },
-              className: `block w-full px-3 py-1.5 text-left text-xs transition ${action.destructive ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent"}`,
-              children: action.label
-            },
-            action.id
-          )),
-          onDelete && /* @__PURE__ */ jsx11(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setMenuOpen(false);
-                onDelete(session);
+      /* @__PURE__ */ jsxs9(
+        PopoverSurface,
+        {
+          open: menuOpen,
+          id: panelId,
+          role: "menu",
+          triggerRef,
+          panelRef,
+          className: `w-36 overflow-hidden rounded-md border border-border bg-popover py-1 ${OVERLAY_SHADOW}`,
+          children: [
+            onRename && /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                onClick: () => {
+                  setMenuOpen(false);
+                  onRename(session);
+                },
+                className: "block w-full px-3 py-1.5 text-left text-xs text-foreground transition hover:bg-accent",
+                children: renameLabel
+              }
+            ),
+            extras.map((action) => /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                onClick: () => {
+                  setMenuOpen(false);
+                  action.onSelect();
+                },
+                className: `block w-full px-3 py-1.5 text-left text-xs transition ${action.destructive ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent"}`,
+                children: action.label
               },
-              className: "block w-full px-3 py-1.5 text-left text-xs text-destructive transition hover:bg-destructive/10",
-              children: deleteLabel
-            }
-          )
-        ] })
-      ] })
+              action.id
+            )),
+            onDelete && /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                onClick: () => {
+                  setMenuOpen(false);
+                  onDelete(session);
+                },
+                className: "block w-full px-3 py-1.5 text-left text-xs text-destructive transition hover:bg-destructive/10",
+                children: deleteLabel
+              }
+            )
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -3892,7 +3910,7 @@ import {
   isValidElement,
   useCallback as useCallback9,
   useEffect as useEffect10,
-  useId as useId2,
+  useId as useId3,
   useMemo as useMemo6,
   useRef as useRef9,
   useState as useState13
@@ -4279,7 +4297,7 @@ function RecordGrid({
   loadingRowCount = 3,
   className
 }) {
-  const fieldPrefix = useId2();
+  const fieldPrefix = useId3();
   const [overlay, setOverlay] = useState13(EMPTY_RECORD_GRID_OVERLAY);
   const [editing, setEditingState] = useState13(null);
   const [cellErrors, setCellErrors] = useState13({});
@@ -4882,13 +4900,20 @@ function CellEditor({ column, rowLabel, text, invalid, describedBy, onText, onCo
 }
 function SourceMarker({ panelId, columnHeader, rowLabel, source, open, onToggle }) {
   const basis = source.basis ?? "asserted";
-  return /* @__PURE__ */ jsxs10("span", { className: "relative inline-flex", children: [
+  const setOpen = useCallback9(
+    (next) => {
+      if (!next) onToggle();
+    },
+    [onToggle]
+  );
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  return /* @__PURE__ */ jsxs10("span", { ref: containerRef, className: "relative inline-flex", children: [
     /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
+        ...triggerProps,
         "aria-label": `Source for ${columnHeader}, ${rowLabel}`,
-        "aria-expanded": open,
         "aria-controls": open ? panelId : void 0,
         title: BASIS_TITLES[basis],
         onClick: (event) => {
@@ -4911,12 +4936,15 @@ function SourceMarker({ panelId, columnHeader, rowLabel, source, open, onToggle
         )
       }
     ),
-    open && /* @__PURE__ */ jsxs10(
-      "span",
+    /* @__PURE__ */ jsxs10(
+      PopoverSurface,
       {
+        open,
         id: panelId,
         role: "note",
-        className: `absolute left-0 top-5 z-10 w-64 rounded-lg border border-border bg-popover p-3 text-left ${OVERLAY_SHADOW}`,
+        triggerRef,
+        panelRef,
+        className: `w-64 rounded-lg border border-border bg-popover p-3 text-left ${OVERLAY_SHADOW}`,
         children: [
           source.quote && /* @__PURE__ */ jsxs10("span", { className: "block border-l-2 border-primary/50 pl-2 text-xs italic leading-snug text-foreground", children: [
             "\u201C",
@@ -5227,6 +5255,23 @@ function ToolGlyph({ name, className }) {
 function toolOutcomeOf(call) {
   return call.result;
 }
+function toolCallFailed(call) {
+  return call.status === "error" || toolOutcomeOf(call)?.ok === false;
+}
+function chatToolCallPart(call) {
+  const failed = toolCallFailed(call);
+  return {
+    type: "tool",
+    id: call.id,
+    tool: call.name === "sandbox_run_command" ? "bash" : call.name,
+    state: {
+      status: call.status === "running" ? "running" : failed ? "error" : "completed",
+      input: call.args,
+      output: call.result,
+      error: failed ? toolOutcomeOf(call)?.message ?? "Tool failed" : void 0
+    }
+  };
+}
 function blockKindOf(call) {
   if (call.name === "submit_proposal") return "proposal";
   if (call.name === "schedule_followup") return "followup";
@@ -5390,13 +5435,20 @@ function ProposalCard({
 function FollowupCard({ call }) {
   const a = call.args ?? {};
   const when = typeof a.when === "string" ? a.when : typeof a.at === "string" ? a.at : typeof a.schedule === "string" ? a.schedule : null;
-  return /* @__PURE__ */ jsxs11("div", { className: "w-fit min-w-[260px] max-w-full rounded-lg border border-border/60 border-l-2 border-l-primary/60 bg-secondary px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx13(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-primary/80" }),
-      /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate font-medium text-foreground", children: friendlyToolTitle(call) })
-    ] }),
-    when && /* @__PURE__ */ jsx13("p", { className: "mt-0.5 pl-[22px] text-[12px] text-muted-foreground", children: when })
-  ] });
+  return /* @__PURE__ */ jsx13("div", { className: "flex items-start gap-2", children: /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)]", children: /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2.5 px-3 py-2", children: [
+    /* @__PURE__ */ jsx13("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-border bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx13(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5" }) }),
+    /* @__PURE__ */ jsx13("span", { className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground", children: friendlyToolTitle(call) }),
+    when && /* @__PURE__ */ jsx13("span", { className: "hidden min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground sm:inline", children: when })
+  ] }) }) });
+}
+function toolRowTitle(call) {
+  if (call.name === "sandbox_run_command") return "Ran command";
+  return friendlyToolTitle(call);
+}
+function toolRowDescription(call) {
+  if (call.name !== "sandbox_run_command") return void 0;
+  const command = call.args?.command;
+  return typeof command === "string" && command ? command : void 0;
 }
 function ToolCallCard({
   call,
@@ -5405,11 +5457,9 @@ function ToolCallCard({
   onOpenRun,
   renderers
 }) {
-  const [expanded, setExpanded] = useState14(false);
   const pending = call.status === "done" ? pendingApprovalOf(call) : null;
   const kind = blockKindOf(call);
-  const failed = call.status === "error" || toolOutcomeOf(call)?.ok === false;
-  const custom = renderers?.[call.name]?.(call, message);
+  const failed = toolCallFailed(call);
   if (pending) {
     return /* @__PURE__ */ jsx13(
       ProposalCard,
@@ -5425,64 +5475,23 @@ function ToolCallCard({
   if (kind === "followup" && !failed) {
     return /* @__PURE__ */ jsx13(FollowupCard, { call });
   }
-  const isCommand = kind === "command";
-  return /* @__PURE__ */ jsxs11(
-    "div",
+  const custom = renderers?.[call.name]?.(call, message);
+  return /* @__PURE__ */ jsx13(
+    InlineToolItem,
     {
-      className: `w-fit min-w-[280px] max-w-full rounded-lg border text-xs transition ${failed ? "border-destructive/40 bg-destructive/5" : "border-border/60 bg-secondary"}`,
-      children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center gap-2 px-3 py-2", children: [
-          /* @__PURE__ */ jsxs11(
-            "button",
-            {
-              type: "button",
-              onClick: () => setExpanded((v) => !v),
-              "aria-expanded": expanded,
-              className: "flex min-w-0 flex-1 items-center gap-2 rounded text-left",
-              children: [
-                /* @__PURE__ */ jsx13(
-                  "span",
-                  {
-                    className: `h-2 w-2 shrink-0 rounded-full ${call.status === "running" ? "animate-pulse bg-warning" : failed ? "bg-destructive" : "bg-success"}`
-                  }
-                ),
-                /* @__PURE__ */ jsx13(ToolGlyph, { name: call.name, className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsx13(
-                  "span",
-                  {
-                    className: `min-w-0 flex-1 truncate ${isCommand ? "font-mono text-[12px] tracking-tight text-foreground/90" : "font-medium"}`,
-                    children: friendlyToolTitle(call)
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx13("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: call.status === "running" ? "running\u2026" : failed ? "failed" : "done" }),
-          /* @__PURE__ */ jsx13(
-            "button",
-            {
-              type: "button",
-              onClick: () => setExpanded((v) => !v),
-              "aria-label": expanded ? "Collapse details" : "Expand details",
-              "aria-expanded": expanded,
-              className: "shrink-0 rounded p-0.5",
-              children: /* @__PURE__ */ jsx13(ChevronDown, { className: `h-3 w-3 text-muted-foreground transition-transform ${expanded ? "rotate-180" : ""}` })
-            }
-          )
-        ] }),
-        expanded && /* @__PURE__ */ jsxs11("div", { className: "border-t border-border/40 px-3 py-2.5", children: [
-          custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx13(ShellDetail, { call }) : /* @__PURE__ */ jsx13(DefaultToolDetail, { call })),
-          onOpenRun && call.name.startsWith("sandbox_") && /* @__PURE__ */ jsx13(
-            "button",
-            {
-              type: "button",
-              onClick: () => onOpenRun(call, message),
-              className: "mt-2 rounded border border-border bg-card px-2 py-1 text-[11px] font-medium transition hover:bg-accent",
-              children: "Open full transcript \u2192"
-            }
-          )
-        ] })
-      ]
+      part: chatToolCallPart(call),
+      title: toolRowTitle(call),
+      description: toolRowDescription(call),
+      renderToolDetail: () => custom ?? (call.name === "sandbox_run_command" ? /* @__PURE__ */ jsx13(ShellDetail, { call }) : /* @__PURE__ */ jsx13(DefaultToolDetail, { call })),
+      actions: onOpenRun && call.name.startsWith("sandbox_") ? /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          onClick: () => onOpenRun(call, message),
+          className: "rounded border border-border bg-card px-2 py-1 text-[11px] font-medium transition hover:bg-accent",
+          children: "Open full transcript \u2192"
+        }
+      ) : void 0
     }
   );
 }
@@ -5512,7 +5521,7 @@ function SegmentText({
 }
 var COLLAPSE_TOOL_RUN_AT = 3;
 function isImportantTool(call) {
-  return call.status === "error" || call.status === "running" || toolOutcomeOf(call)?.ok === false || pendingApprovalOf(call) !== null;
+  return call.status === "running" || toolCallFailed(call) || pendingApprovalOf(call) !== null;
 }
 function SegmentedBody({
   segments,
@@ -5566,20 +5575,17 @@ function SegmentedBody({
           messageClassName
         },
         `text-${g.index}`
-      ) : !streaming && g.calls.length >= COLLAPSE_TOOL_RUN_AT && !g.calls.some(isImportantTool) ? /* @__PURE__ */ jsxs11(
-        "details",
-        {
-          className: "rounded-lg border-l-2 border-border/70 bg-secondary px-3 py-2",
-          children: [
-            /* @__PURE__ */ jsxs11("summary", { className: "cursor-pointer select-none text-xs font-medium text-muted-foreground", children: [
-              "Worked through ",
-              g.calls.length,
-              " steps"
-            ] }),
-            /* @__PURE__ */ jsx13("div", { className: "mt-2 flex flex-col gap-2", children: g.calls.map(renderToolCard) })
-          ]
-        },
-        `tools-${g.index}`
+      ) : !streaming && g.calls.length >= COLLAPSE_TOOL_RUN_AT && !g.calls.some(isImportantTool) ? (
+        // The fold is a quiet disclosure line, not a filled box — the
+        // canonical rows inside it carry the row chrome.
+        /* @__PURE__ */ jsxs11("details", { children: [
+          /* @__PURE__ */ jsxs11("summary", { className: "cursor-pointer select-none rounded-md px-1 py-0.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: [
+            "Worked through ",
+            g.calls.length,
+            " steps"
+          ] }),
+          /* @__PURE__ */ jsx13("div", { className: "mt-1.5 flex flex-col gap-1.5", children: g.calls.map(renderToolCard) })
+        ] }, `tools-${g.index}`)
       ) : /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-2", children: g.calls.map(renderToolCard) }, `tools-${g.index}`)
     ),
     leftoverToolCalls.map(renderToolCard),
@@ -5980,7 +5986,8 @@ export {
   RunDrillIn,
   pendingApprovalOf,
   ChatEmptyState,
+  chatToolCallPart,
   useThinkingSeconds,
   ChatMessages
 };
-//# sourceMappingURL=chunk-H3LYJIAQ.js.map
+//# sourceMappingURL=chunk-HNVAASAO.js.map