@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/data/ai/ToolPreferences.cjs

@@ -4,39 +4,121 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
-const HoverCard = require("../../overlay/HoverCard.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 ToolSchemaBrowser = require("./ToolSchemaBrowser.cjs");
+const types = require("../chat/types.cjs");
 const UiSliders = require("../../icons/components/UiSliders.cjs");
-const UiInfo = require("../../icons/components/UiInfo.cjs");
-const MODE_CYCLE = ["enabled", "ask", "disabled"];
+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 = {
-  enabled: "Auto",
+  on: "On",
+  auto: "Auto",
   ask: "Ask",
-  disabled: "Off"
+  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 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
+  onToggle,
+  indented = false
 }) {
-  var _a;
-  const title = entry.tools.length > 1 ? `${entry.tools.length} tools` : (_a = entry.tools[0]) == null ? void 0 : _a.description;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
-      className: "flex w-full items-center justify-between rounded px-2 py-1 text-left hover:bg-accent",
-      title,
-      onClick: () => onToggle(entry.key, mode),
+      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(
-              "text-xs",
-              mode === "disabled" && "text-muted-foreground line-through"
+              "min-w-0 truncate text-xs",
+              mode === "off" && "text-muted-foreground line-through"
             ),
             children: entry.label
           }
@@ -46,121 +128,175 @@ function ToolRow({
     }
   );
 }
-function AdvancedToolRow({
-  tool,
+function ToolParentHeader({
+  parent,
+  count,
+  collapsed,
   mode,
-  onToggle
+  onCollapseToggle,
+  onModeToggle
 }) {
-  var _a;
-  const description = ((_a = tool.description) == null ? void 0 : _a.trim()) || "No description";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      className: "grid h-9 w-full grid-cols-[minmax(0,1fr)_4rem] items-center gap-3 border-b border-border px-2 text-left hover:bg-accent",
-      title: description,
-      onClick: () => onToggle(tool.name, mode),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: utils.cn(
-                "min-w-0 truncate font-mono text-xs",
-                mode === "disabled" && "text-muted-foreground line-through"
-              ),
-              children: tool.name
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            HoverCard.HoverCard,
-            {
-              placement: "top",
-              delay: 120,
-              trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "aria-label": `Description for ${tool.name}`,
-                  className: "inline-flex shrink-0 text-muted-foreground",
-                  title: description,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiInfo.UiInfo, className: "size-3.5" })
-                }
-              ),
-              cardClassName: "max-w-xs whitespace-normal",
-              children: description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "justify-self-end", children: /* @__PURE__ */ jsxRuntime.jsx(ModeBadge, { mode }) })
-      ]
-    }
-  );
+  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 ModeBadge({ mode }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
+function ToolSubGroupBlock({
+  subGroup,
+  value,
+  open,
+  onToggle,
+  onToggleEntry,
+  onCycleEntries
+}) {
+  const hasParent = subGroup.parent !== NO_PARENT;
+  const rows = subGroup.entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+    ToolRow,
     {
-      className: utils.cn(
-        "rounded px-1.5 py-0.5 text-[10px] font-medium",
-        mode === "enabled" && "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
-        mode === "ask" && "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
-        mode === "disabled" && "bg-muted text-muted-foreground"
+      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))
+        }
       ),
-      children: MODE_LABEL[mode]
-    }
-  );
+      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 = [],
+  model,
+  onModelChange,
+  reasoningEfforts = ["low", "medium", "high"],
+  reasoningEffort = "",
+  onReasoningEffortChange,
+  permissionMode = "default",
+  onPermissionModeChange,
+  temperature,
+  onTemperatureChange,
+  budget,
+  onBudgetChange,
+  usage,
+  toolsLoading = false,
+  toolsError = null,
   className = ""
 }) {
   const [advancedOpen, setAdvancedOpen] = react.useState(false);
-  const groups = react.useMemo(() => {
-    const maps = {};
-    for (const meta of tools) {
-      const group = toolGroup(meta);
-      const key = toolPreferenceKey(meta);
-      const map = maps[group] ?? (maps[group] = /* @__PURE__ */ new Map());
-      let entry = map.get(key);
-      if (!entry) {
-        entry = {
-          key,
-          label: key === meta.name ? meta.label : key,
-          group,
-          tools: [],
-          defaultMode: toolDefaultMode(meta)
-        };
-        map.set(key, entry);
-      }
-      entry.tools.push(meta);
-      entry.defaultMode = mostRestrictiveMode(
-        entry.defaultMode,
-        toolDefaultMode(meta)
-      );
-    }
-    const g = {};
-    for (const [group, map] of Object.entries(maps)) {
-      g[group] = [...map.values()].sort((a, b) => a.label.localeCompare(b.label));
-    }
-    return g;
-  }, [tools]);
-  const advancedGroups = react.useMemo(
-    () => groupedToolMetas(tools),
-    [tools]
-  );
-  const handleToggle = (name, current) => {
-    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(current) + 1) % MODE_CYCLE.length];
-    onChange({ ...value, [name]: next });
-  };
+  const [advancedTab, setAdvancedTab] = react.useState("config");
+  const groups = react.useMemo(() => groupedToolEntries(tools), [tools]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownMenu.DropdownMenu,
       {
         align: "right",
         className,
-        menuClassName: "w-64 max-h-[400px] overflow-y-auto p-3",
+        menuClassName: "w-72 max-h-[70vh] overflow-y-auto p-1",
         trigger: /* @__PURE__ */ jsxRuntime.jsx(
           button.Button,
           {
@@ -172,22 +308,16 @@ function ToolPreferences({
           }
         ),
         children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold", children: "Tool Preferences" }),
-          Object.entries(groups).sort(([a], [b]) => a.localeCompare(b)).map(([group, metas]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
-            metas.map((entry) => {
-              const mode = value[entry.key] ?? entry.defaultMode;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                ToolRow,
-                {
-                  entry,
-                  mode,
-                  onToggle: handleToggle
-                },
-                entry.key
-              );
-            })
-          ] }, group)),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 px-1 text-xs font-semibold", children: "Tool Preferences" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CompactToolList,
+            {
+              groups,
+              value,
+              onChange,
+              emptyLabel: "No tools available"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 border-t border-border pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -208,66 +338,476 @@ function ToolPreferences({
       {
         open: advancedOpen,
         onClose: () => setAdvancedOpen(false),
-        title: "Advanced Tool Preferences",
+        title: "Advanced Chat Settings",
         size: "xl",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded border border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_4rem] gap-3 border-b border-border bg-muted/40 px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Name" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right", children: "Mode" })
+        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
+              )
+            ),
+            /* @__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 })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: advancedGroups.length > 0 ? advancedGroups.map(([group, groupTools]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-[1] border-b border-border bg-muted/60 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
-            groupTools.map((tool) => {
-              const mode = toolMode(tool, value);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                AdvancedToolRow,
+          advancedTab === "config" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ToolConfigPanel,
+            {
+              models,
+              model,
+              onModelChange,
+              reasoningEfforts,
+              reasoningEffort,
+              onReasoningEffortChange,
+              permissionMode,
+              onPermissionModeChange,
+              temperature,
+              onTemperatureChange,
+              budget,
+              onBudgetChange,
+              usage
+            }
+          ) : advancedTab === "permissions" ? /* @__PURE__ */ jsxRuntime.jsx(
+            AdvancedPermissionsPanel,
+            {
+              groups,
+              value,
+              onChange
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(ToolSchemaBrowser.ToolSchemaBrowser, { tools, className: "min-h-0 flex-1" })
+        ] })
+      }
+    )
+  ] });
+}
+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",
                 {
-                  tool,
-                  mode,
-                  onToggle: handleToggle
+                  value: option.value,
+                  title: option.description,
+                  children: option.label
                 },
-                tool.name
-              );
-            })
-          ] }, group)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-6 text-center text-xs text-muted-foreground", children: "No tools" }) })
+                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 toolGroup(meta) {
-  return meta.group ?? "Tools";
+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,
+    {
+      groups,
+      value,
+      onChange,
+      emptyLabel: "No tools"
+    }
+  ) });
 }
-function groupedToolMetas(tools) {
-  var _a;
+function groupedToolEntries(tools) {
   const groups = {};
   for (const tool of tools) {
-    (groups[_a = toolGroup(tool)] ?? (groups[_a] = [])).push(tool);
+    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);
   }
-  return Object.entries(groups).map(([group, groupTools]) => [
+  const subGroups = Object.entries(byParent).map(([parent, subEntries]) => ({
+    parent,
+    entries: [...subEntries].sort((a, b) => a.label.localeCompare(b.label))
+  })).sort(compareSubGroups);
+  return {
     group,
-    [...groupTools].sort((a, b) => a.name.localeCompare(b.name))
-  ]).sort(([a], [b]) => a.localeCompare(b));
+    entries: [...entries].sort((a, b) => a.label.localeCompare(b.label)),
+    subGroups
+  };
 }
-function toolPreferenceKey(meta) {
-  return meta.preferenceKey ?? meta.name;
+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 toolDefaultMode(meta) {
-  return meta.defaultMode ?? "enabled";
+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 toolMode(meta, value) {
-  const own = value[meta.name];
-  if (own) return own;
-  const key = toolPreferenceKey(meta);
-  if (key !== meta.name) {
-    const grouped = value[key];
-    if (grouped) return grouped;
+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;
   }
-  return toolDefaultMode(meta);
+}
+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) {
-  const rank = { enabled: 0, ask: 1, disabled: 2 };
-  return rank[a] >= rank[b] ? 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.ToolPreferences = ToolPreferences;
 //# sourceMappingURL=ToolPreferences.cjs.map