@flanksource/clicky-ui 0.3.16 → 0.3.18

package/dist/data/ai/ToolPreferences.cjs

@@ -2,280 +2,40 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const button = require("../../components/button.cjs");
 const utils = require("../../lib/utils.cjs");
 const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
 const Modal = require("../../overlay/Modal.cjs");
-const button = require("../../components/button.cjs");
 const Icon = require("../Icon.cjs");
-const ModelSelector = require("../chat/ModelSelector.cjs");
 const effortIcons = require("../chat/effort-icons.cjs");
+const AdvancedChatConfig = require("./AdvancedChatConfig.cjs");
+const AdvancedCostsPanel = require("./AdvancedCostsPanel.cjs");
 const ToolSchemaBrowser = require("./ToolSchemaBrowser.cjs");
-const types = require("../chat/types.cjs");
+const ToolPreferencesList = require("./ToolPreferencesList.cjs");
+const ToolPreferences_model = require("./ToolPreferences.model.cjs");
 const UiSliders = require("../../icons/components/UiSliders.cjs");
-const UiShield = require("../../icons/components/UiShield.cjs");
 const UiCode2 = require("../../icons/components/UiCode2.cjs");
-const UiChevronRight = require("../../icons/components/UiChevronRight.cjs");
-const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
-const MODE_CYCLE = ["auto", "ask", "off", "on"];
-const MODE_LABEL = {
-  on: "On",
-  auto: "Auto",
-  ask: "Ask",
-  off: "Off"
-};
-const MODE_DESCRIPTION = {
-  on: "Always allow this tool to run automatically.",
-  auto: "Use the backend's default permission policy.",
-  ask: "Ask before running this tool.",
-  off: "Hide this tool from the model."
-};
-const BADGE_LABEL = { ...MODE_LABEL, mixed: "Mixed" };
-const BADGE_DESCRIPTION = {
-  ...MODE_DESCRIPTION,
-  mixed: "Members have different permissions."
+const UiShield = require("../../icons/components/UiShield.cjs");
+const UiCoins = require("../../icons/components/UiCoins.cjs");
+const ADVANCED_TABS = ["config", "costs", "permissions", "browser"];
+const ADVANCED_TAB_ICONS = {
+  config: UiSliders.UiSliders,
+  costs: UiCoins.UiCoins,
+  permissions: UiShield.UiShield,
+  browser: UiCode2.UiCode2
 };
-const NO_PARENT = "\0no-parent";
-function ModeBadge({ mode }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: utils.cn(
-        "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium",
-        mode === "on" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
-        mode === "auto" && "bg-sky-500/10 text-sky-600 dark:text-sky-400",
-        mode === "ask" && "bg-amber-500/10 text-amber-600 dark:text-amber-500",
-        mode === "off" && "text-muted-foreground",
-        mode === "mixed" && "bg-muted text-muted-foreground ring-1 ring-inset ring-border"
-      ),
-      title: BADGE_DESCRIPTION[mode],
-      children: BADGE_LABEL[mode]
-    }
-  );
-}
-function ToolGroupHeader({
-  group,
-  count,
-  collapsed,
-  mode,
-  onCollapseToggle,
-  onModeToggle
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-1 px-1 py-0.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group}`,
-        title: `${collapsed ? "Expand" : "Collapse"} ${group}`,
-        className: "inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground",
-        onClick: onCollapseToggle,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Icon.Icon,
-          {
-            icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
-            className: "size-3.5"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Toggle ${group} group`,
-        title: `Cycle all ${count} ${count === 1 ? "tool" : "tools"} in ${group}`,
-        className: "flex min-w-0 items-center gap-1.5 rounded px-1 py-0.5 text-left hover:bg-background/70",
-        onClick: onModeToggle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-background px-1 text-[10px] text-muted-foreground", children: count })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ModeBadge, { mode }) })
-        ]
-      }
-    )
-  ] });
-}
-function ToolRow({
-  entry,
-  mode,
-  onToggle,
-  indented = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      className: utils.cn(
-        "flex w-full items-center justify-between gap-2 rounded px-1.5 py-0.5 text-left hover:bg-accent",
-        indented && "pl-7"
-      ),
-      title: entry.tool.name,
-      onClick: () => onToggle(entry, mode),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: utils.cn(
-              "min-w-0 truncate text-xs",
-              mode === "off" && "text-muted-foreground line-through"
-            ),
-            children: entry.label
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ModeBadge, { mode })
-      ]
-    }
-  );
-}
-function ToolParentHeader({
-  parent,
-  count,
-  collapsed,
-  mode,
-  onCollapseToggle,
-  onModeToggle
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-1 py-0.5 pl-4 pr-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `${collapsed ? "Expand" : "Collapse"} ${parent}`,
-        title: `${collapsed ? "Expand" : "Collapse"} ${parent}`,
-        className: "inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground",
-        onClick: onCollapseToggle,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Icon.Icon,
-          {
-            icon: collapsed ? UiChevronRight.UiChevronRight : UiChevronDown.UiChevronDown,
-            className: "size-3.5"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Toggle ${parent} tools`,
-        title: `Cycle all ${count} ${count === 1 ? "tool" : "tools"} in ${parent}`,
-        className: "flex min-w-0 items-center gap-1.5 rounded px-1 py-0.5 text-left hover:bg-background/70",
-        onClick: onModeToggle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[11px] font-medium text-foreground/70", children: parent }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded bg-background px-1 text-[10px] text-muted-foreground", children: count })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(ModeBadge, { mode }) })
-        ]
-      }
-    )
-  ] });
-}
-function ToolSubGroupBlock({
-  subGroup,
-  value,
-  open,
-  onToggle,
-  onToggleEntry,
-  onCycleEntries
-}) {
-  const hasParent = subGroup.parent !== NO_PARENT;
-  const rows = subGroup.entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
-    ToolRow,
-    {
-      entry,
-      mode: entryMode(entry, value),
-      onToggle: onToggleEntry,
-      indented: hasParent
-    },
-    entry.key
-  ));
-  if (!hasParent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rows });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ToolParentHeader,
-      {
-        parent: subGroup.parent,
-        count: subGroup.entries.length,
-        collapsed: !open,
-        mode: commonMode(subGroup.entries, value),
-        onCollapseToggle: onToggle,
-        onModeToggle: () => onCycleEntries(subGroup.entries, groupToolMode(subGroup.entries, value))
-      }
-    ),
-    open && rows
-  ] });
-}
-function CompactToolList({
-  groups,
-  value,
-  onChange,
-  emptyLabel = "No tools available"
-}) {
-  const [expanded, setExpanded] = react.useState(() => /* @__PURE__ */ new Set());
-  if (groups.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground", children: emptyLabel });
-  }
-  const isOpen = (key) => expanded.has(key);
-  const toggle = (key) => setExpanded((current) => {
-    const next = new Set(current);
-    if (next.has(key)) next.delete(key);
-    else next.add(key);
-    return next;
-  });
-  const handleToggle = (entry, current) => onChange({ ...value, [entry.key]: nextMode(current) });
-  const cycleEntries = (entries, current) => {
-    const next = nextMode(current);
-    const updated = { ...value };
-    for (const entry of entries) updated[entry.key] = next;
-    onChange(updated);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: groups.map((group) => {
-    const groupOpen = isOpen(group.group);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ToolGroupHeader,
-        {
-          group: group.group,
-          count: group.entries.length,
-          collapsed: !groupOpen,
-          mode: commonMode(group.entries, value),
-          onCollapseToggle: () => toggle(group.group),
-          onModeToggle: () => cycleEntries(group.entries, groupToolMode(group.entries, value))
-        }
-      ),
-      groupOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5 p-0.5", children: group.subGroups.map((subGroup) => {
-        const parentKey = `${group.group}///${subGroup.parent}`;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          ToolSubGroupBlock,
-          {
-            subGroup,
-            value,
-            open: isOpen(parentKey),
-            onToggle: () => toggle(parentKey),
-            onToggleEntry: handleToggle,
-            onCycleEntries: cycleEntries
-          },
-          subGroup.parent
-        );
-      }) })
-    ] }, group.group);
-  }) });
-}
 function ToolPreferences({
   tools,
   value,
   onChange,
   models = [],
+  runtime,
+  onRuntimeChange,
   model,
   onModelChange,
+  runtimeFamilies,
   reasoningEfforts = effortIcons.DEFAULT_REASONING_EFFORTS,
-  reasoningEffort = "",
+  reasoningEffort,
   onReasoningEffortChange,
   permissionMode = "default",
   onPermissionModeChange,
@@ -284,13 +44,32 @@ function ToolPreferences({
   budget,
   onBudgetChange,
   usage,
+  costsApi,
+  threadId,
   toolsLoading = false,
   toolsError = null,
+  catalogLoading = false,
+  catalogError = null,
+  onCatalogRetry,
   className = ""
 }) {
   const [advancedOpen, setAdvancedOpen] = react.useState(false);
   const [advancedTab, setAdvancedTab] = react.useState("config");
-  const groups = react.useMemo(() => groupedToolEntries(tools), [tools]);
+  const groups = react.useMemo(() => ToolPreferences_model.groupedToolEntries(tools), [tools]);
+  const resolvedRuntime = runtime ?? {
+    ...model ? { model } : {},
+    ...reasoningEffort ? { effort: reasoningEffort } : {},
+    ...temperature !== void 0 ? { temperature } : {}
+  };
+  const handleRuntimeChange = (next) => {
+    onRuntimeChange == null ? void 0 : onRuntimeChange(next);
+    if ((next.id ?? next.model ?? "") !== (model ?? "")) {
+      onModelChange == null ? void 0 : onModelChange(next.id ?? next.model ?? "");
+    }
+    if ((next.effort ?? "") !== (reasoningEffort ?? "")) {
+      onReasoningEffortChange == null ? void 0 : onReasoningEffortChange(next.effort ?? "");
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenu.DropdownMenu,
@@ -311,7 +90,7 @@ function ToolPreferences({
         children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 px-1 text-xs font-semibold", children: "Tool Preferences" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            CompactToolList,
+            ToolPreferencesList.CompactToolList,
             {
               groups,
               value,
@@ -343,52 +122,46 @@ function ToolPreferences({
         size: "xl",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[70vh] min-h-0 flex-col gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 rounded border border-border bg-muted/30 p-1", children: [
-            ["config", "permissions", "browser"].map(
-              (tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: utils.cn(
-                    "inline-flex h-8 items-center gap-1.5 rounded px-3 text-xs font-medium capitalize",
-                    advancedTab === tab ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/60"
-                  ),
-                  onClick: () => setAdvancedTab(tab),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon.Icon,
-                      {
-                        icon: tab === "config" ? UiSliders.UiSliders : tab === "permissions" ? UiShield.UiShield : UiCode2.UiCode2,
-                        className: "size-3.5"
-                      }
-                    ),
-                    tab
-                  ]
-                },
-                tab
-              )
-            ),
+            ADVANCED_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: utils.cn(
+                  "inline-flex h-8 items-center gap-1.5 rounded px-3 text-xs font-medium capitalize",
+                  advancedTab === tab ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/60"
+                ),
+                onClick: () => setAdvancedTab(tab),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: ADVANCED_TAB_ICONS[tab], className: "size-3.5" }),
+                  tab
+                ]
+              },
+              tab
+            )),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
             toolsLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pr-2 text-[11px] text-muted-foreground", children: "Loading tools" }),
             toolsError && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pr-2 text-[11px] text-destructive", children: toolsError })
           ] }),
           advancedTab === "config" ? /* @__PURE__ */ jsxRuntime.jsx(
-            ToolConfigPanel,
+            AdvancedChatConfig.AdvancedChatConfig,
             {
               models,
-              model,
-              onModelChange,
+              runtime: resolvedRuntime,
+              onRuntimeChange: handleRuntimeChange,
+              runtimeFamilies,
               reasoningEfforts,
-              reasoningEffort,
-              onReasoningEffortChange,
               permissionMode,
               onPermissionModeChange,
               temperature,
               onTemperatureChange,
               budget,
               onBudgetChange,
-              usage
+              usage,
+              catalogLoading,
+              catalogError,
+              onCatalogRetry
             }
-          ) : advancedTab === "permissions" ? /* @__PURE__ */ jsxRuntime.jsx(
+          ) : advancedTab === "costs" ? /* @__PURE__ */ jsxRuntime.jsx(AdvancedCostsPanel.AdvancedCostsPanel, { costsApi, threadId }) : advancedTab === "permissions" ? /* @__PURE__ */ jsxRuntime.jsx(
             AdvancedPermissionsPanel,
             {
               groups,
@@ -401,275 +174,13 @@ function ToolPreferences({
     )
   ] });
 }
-function CompactToolPreferencesList({
-  tools,
-  value,
-  onChange,
-  title = "Tools preferences",
-  emptyLabel = "No tools available",
-  className
-}) {
-  const groups = react.useMemo(
-    () => groupedToolEntriesWithPreferences(tools, value),
-    [tools, value]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("space-y-2", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      CompactToolList,
-      {
-        groups,
-        value,
-        onChange,
-        emptyLabel
-      }
-    )
-  ] });
-}
-function ToolConfigPanel({
-  models,
-  model,
-  onModelChange,
-  reasoningEfforts,
-  reasoningEffort,
-  onReasoningEffortChange,
-  permissionMode,
-  onPermissionModeChange,
-  temperature,
-  onTemperatureChange,
-  budget,
-  onBudgetChange,
-  usage
-}) {
-  const updateBudget = (key, raw) => {
-    const next = { ...budget };
-    const parsed = parseOptionalNumber(raw, key === "maxTokens");
-    if (parsed === void 0) {
-      delete next[key];
-    } else {
-      next[key] = parsed;
-    }
-    onBudgetChange == null ? void 0 : onBudgetChange(next);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)] gap-4 overflow-y-auto", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Model" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ModelSelector.ModelSelector,
-            {
-              models,
-              value: model,
-              onChange: (next) => onModelChange == null ? void 0 : onModelChange(next),
-              className: "w-64"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ModelSelector.EffortSelector,
-            {
-              efforts: reasoningEfforts,
-              value: reasoningEffort,
-              onChange: (next) => onReasoningEffortChange == null ? void 0 : onReasoningEffortChange(next),
-              className: "w-44"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "grid max-w-md grid-cols-[9rem_minmax(0,1fr)] items-center gap-3 text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Permission mode" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
-            {
-              "aria-label": "Permission mode",
-              value: permissionMode,
-              onChange: (event) => onPermissionModeChange == null ? void 0 : onPermissionModeChange(
-                event.target.value
-              ),
-              className: "h-8 rounded border border-border bg-background px-2 text-xs",
-              children: types.CLAUDE_PERMISSION_MODE_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-                "option",
-                {
-                  value: option.value,
-                  title: option.description,
-                  children: option.label
-                },
-                option.value
-              ))
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Generation" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "grid grid-cols-[8rem_minmax(0,1fr)_4rem] items-center gap-3 text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Temperature" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "range",
-              min: 0,
-              max: 2,
-              step: 0.1,
-              value: temperature ?? 0,
-              onChange: (event) => onTemperatureChange == null ? void 0 : onTemperatureChange(Number(event.target.value))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "number",
-              min: 0,
-              max: 2,
-              step: 0.1,
-              value: temperature ?? "",
-              onChange: (event) => onTemperatureChange == null ? void 0 : onTemperatureChange(parseOptionalNumber(event.target.value)),
-              className: "h-8 rounded border border-border bg-background px-2 text-xs"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Budget" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1 text-xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Max cost" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "number",
-                min: 0,
-                step: 0.01,
-                value: (budget == null ? void 0 : budget.cost) ?? "",
-                onChange: (event) => updateBudget("cost", event.target.value),
-                className: "h-8 w-full rounded border border-border bg-background px-2 text-xs"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "space-y-1 text-xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Max tokens" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "number",
-                min: 0,
-                step: 1,
-                value: (budget == null ? void 0 : budget.maxTokens) ?? "",
-                onChange: (event) => updateBudget("maxTokens", event.target.value),
-                className: "h-8 w-full rounded border border-border bg-background px-2 text-xs"
-              }
-            )
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(UsageCostPanel, { usage })
-  ] });
-}
-function UsageCostPanel({
-  usage
-}) {
-  const tokens = usage == null ? void 0 : usage.usage;
-  const costs = usage == null ? void 0 : usage.costBreakdown;
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "space-y-3 border-l border-border pl-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Usage" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded border border-border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Context",
-          value: `${formatNumber(usage == null ? void 0 : usage.usedTokens)} / ${formatNumber(usage == null ? void 0 : usage.maxTokens)}`
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Input tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.inputTokens)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Output tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.outputTokens)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Reasoning tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.reasoningTokens)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Cache read tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.cacheReadTokens)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Cache write tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.cacheWriteTokens)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Total tokens",
-          value: formatNumber(tokens == null ? void 0 : tokens.totalTokens)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Cost" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded border border-border", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(MetricRow, { label: "Input", value: formatUSD(costs == null ? void 0 : costs.inputUsd) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MetricRow, { label: "Output", value: formatUSD(costs == null ? void 0 : costs.outputUsd) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MetricRow, { label: "Reasoning", value: formatUSD(costs == null ? void 0 : costs.reasoningUsd) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MetricRow, { label: "Cache read", value: formatUSD(costs == null ? void 0 : costs.cacheReadUsd) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Cache write",
-          value: formatUSD(costs == null ? void 0 : costs.cacheWriteUsd)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MetricRow,
-        {
-          label: "Thread total",
-          value: formatUSD((usage == null ? void 0 : usage.cost) ?? (costs == null ? void 0 : costs.totalUsd)),
-          strong: true
-        }
-      )
-    ] })
-  ] });
-}
-function MetricRow({
-  label,
-  value,
-  strong = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-border px-2 py-1.5 text-xs last:border-b-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: utils.cn("font-mono", strong && "font-semibold text-foreground"),
-        children: value
-      }
-    )
-  ] });
-}
 function AdvancedPermissionsPanel({
   groups,
   value,
   onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto rounded border border-border p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-    CompactToolList,
+    ToolPreferencesList.CompactToolList,
     {
       groups,
       value,
@@ -678,137 +189,6 @@ function AdvancedPermissionsPanel({
     }
   ) });
 }
-function groupedToolEntries(tools) {
-  const groups = {};
-  for (const tool of tools) {
-    const group = toolGroup(tool);
-    const entry = {
-      key: tool.name,
-      label: tool.label || tool.name,
-      group,
-      tool,
-      defaultPermission: toolDefaultPermission(tool)
-    };
-    (groups[group] ?? (groups[group] = [])).push(entry);
-  }
-  return Object.entries(groups).map(([group, entries]) => buildToolGroup(group, entries)).sort((a, b) => a.group.localeCompare(b.group));
-}
-function buildToolGroup(group, entries) {
-  var _a;
-  const byParent = {};
-  for (const entry of entries) {
-    const parent = ((_a = entry.tool.parent) == null ? void 0 : _a.trim()) || NO_PARENT;
-    (byParent[parent] ?? (byParent[parent] = [])).push(entry);
-  }
-  const subGroups = Object.entries(byParent).map(([parent, subEntries]) => ({
-    parent,
-    entries: [...subEntries].sort((a, b) => a.label.localeCompare(b.label))
-  })).sort(compareSubGroups);
-  return {
-    group,
-    entries: [...entries].sort((a, b) => a.label.localeCompare(b.label)),
-    subGroups
-  };
-}
-function compareSubGroups(a, b) {
-  if (a.parent === NO_PARENT) return b.parent === NO_PARENT ? 0 : -1;
-  if (b.parent === NO_PARENT) return 1;
-  return a.parent.localeCompare(b.parent);
-}
-function groupedToolEntriesWithPreferences(tools, value) {
-  const groups = groupedToolEntries(tools);
-  const known = new Set(tools.map((tool) => tool.name));
-  const customEntries = Object.entries(value).flatMap(([name, mode]) => {
-    const normalizedMode = normalizeToolMode(mode);
-    if (known.has(name) || !normalizedMode) return [];
-    return [
-      {
-        key: name,
-        label: name,
-        group: "Custom",
-        tool: {
-          name,
-          label: name,
-          group: "Custom",
-          defaultPermission: normalizedMode
-        },
-        defaultPermission: normalizedMode
-      }
-    ];
-  });
-  if (customEntries.length === 0) return groups;
-  return [...groups, buildToolGroup("Custom", customEntries)];
-}
-function normalizeToolMode(value) {
-  switch (value.trim().toLowerCase()) {
-    case "on":
-    case "enabled":
-      return "on";
-    case "auto":
-      return "auto";
-    case "ask":
-      return "ask";
-    case "off":
-    case "disabled":
-      return "off";
-    default:
-      return void 0;
-  }
-}
-function toolGroup(meta) {
-  return meta.group ?? "Tools";
-}
-function toolDefaultPermission(meta) {
-  return meta.defaultPermission ?? "auto";
-}
-function entryMode(entry, value) {
-  return normalizeToolMode(value[entry.key] ?? "") ?? entry.defaultPermission;
-}
-function groupToolMode(entries, value) {
-  return entries.reduce(
-    (mode, entry) => mostRestrictiveMode(mode, entryMode(entry, value)),
-    "on"
-  );
-}
-function commonMode(entries, value) {
-  const first = entries[0];
-  if (!first) return "mixed";
-  const firstMode = entryMode(first, value);
-  return entries.every((entry) => entryMode(entry, value) === firstMode) ? firstMode : "mixed";
-}
-function nextMode(mode) {
-  const current = MODE_CYCLE.indexOf(mode);
-  return MODE_CYCLE[((current >= 0 ? current : 0) + 1) % MODE_CYCLE.length];
-}
-function mostRestrictiveMode(a, b) {
-  return modeRank(a) >= modeRank(b) ? a : b;
-}
-function modeRank(mode) {
-  switch (mode) {
-    case "on":
-      return 0;
-    case "auto":
-      return 1;
-    case "ask":
-      return 2;
-    case "off":
-      return 3;
-  }
-}
-function parseOptionalNumber(raw, integer = false) {
-  if (raw.trim() === "") return void 0;
-  const value = Number(raw);
-  if (!Number.isFinite(value)) return void 0;
-  return integer ? Math.max(0, Math.trunc(value)) : value;
-}
-function formatNumber(value) {
-  if (value == null || !Number.isFinite(value)) return "-";
-  return new Intl.NumberFormat().format(value);
-}
-function formatUSD(value) {
-  if (value == null || !Number.isFinite(value)) return "-";
-  return `$${value.toFixed(value >= 1 ? 4 : 6)}`;
-}
-exports.CompactToolPreferencesList = CompactToolPreferencesList;
+exports.CompactToolPreferencesList = ToolPreferencesList.CompactToolPreferencesList;
 exports.ToolPreferences = ToolPreferences;
 //# sourceMappingURL=ToolPreferences.cjs.map