@flanksource/clicky-ui 0.3.26 → 0.3.28

package/dist/data/ai/ToolSchemaBrowser.js

@@ -1,68 +1,52 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
-import { ListMenu, ListMenuSection, ListMenuHeader, ListMenuItem } from "../../components/ListMenu.js";
-import { cn } from "../../lib/utils.js";
+import { useListMenuSelection } from "../../components/use-list-menu-selection.js";
 import { SplitPane } from "../../layout/SplitPane.js";
-import { Tabs } from "../../layout/Tabs.js";
-import { CodeBlock } from "../CodeBlock.js";
-import { Icon } from "../Icon.js";
-import { SchemaViewer } from "../SchemaViewer.js";
-import { UiCode2 } from "../../icons/components/UiCode2.js";
-import { UiSearch } from "../../icons/components/UiSearch.js";
-import { UiListDashes } from "../../icons/components/UiListDashes.js";
-import { UiLayers } from "../../icons/components/UiLayers.js";
-import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
-import { UiChevronRight } from "../../icons/components/UiChevronRight.js";
-import { UiWrench } from "../../icons/components/UiWrench.js";
-const NO_GROUP = "Tools";
-const NO_PARENT = "General";
-const EMPTY_SCHEMA = { type: "object", properties: {} };
+import { cn } from "../../lib/utils.js";
+import { ToolSchemaBrowserDetail } from "./ToolSchemaBrowser.detail.js";
+import { EMPTY_TOOL_HINT_FILTERS, filterToolSchemaBrowserTools, buildToolSchemaSections } from "./ToolSchemaBrowser.model.js";
+import { ToolSchemaBrowserSidebar } from "./ToolSchemaBrowser.sidebar.js";
 function ToolSchemaBrowser({
   tools,
+  value,
+  onRule,
   className
 }) {
   var _a;
   const [query, setQuery] = useState("");
   const [view, setView] = useState("group");
   const [tab, setTab] = useState("schema");
+  const [filters, setFilters] = useState(
+    EMPTY_TOOL_HINT_FILTERS
+  );
   const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
   const [selected, setSelected] = useState(
     ((_a = tools[0]) == null ? void 0 : _a.name) ?? null
   );
-  const searching = query.trim().length > 0;
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return tools;
-    return tools.filter(
-      (tool) => [
-        tool.name,
-        tool.label,
-        tool.title,
-        tool.description,
-        tool.group,
-        tool.parent,
-        tool.entity,
-        tool.icon,
-        tool.defaultPermission,
-        tool.source,
-        tool.server,
-        ...annotationSearchText(tool.annotations),
-        ...tool.hints ?? []
-      ].filter(Boolean).some((value) => String(value).toLowerCase().includes(q))
-    );
-  }, [query, tools]);
-  const active = tools.find((tool) => tool.name === selected) ?? filtered[0] ?? tools[0];
+  const selection = useListMenuSelection({
+    keys: tools.map((tool) => tool.name)
+  });
+  const filtered = useMemo(
+    () => filterToolSchemaBrowserTools(tools, query, filters),
+    [filters, query, tools]
+  );
+  const searching = query.trim().length > 0 || Object.values(filters).some((value2) => value2 !== "any");
+  const active = filtered.find((tool) => tool.name === selected) ?? filtered[0] ?? tools[0];
   const sections = useMemo(
-    () => buildSections(filtered, view),
+    () => buildToolSchemaSections(filtered, view),
     [filtered, view]
   );
-  const toggle = (key) => setCollapsed((prev) => {
-    const next = new Set(prev);
+  const toggle = (key) => setCollapsed((previous) => {
+    const next = new Set(previous);
     if (next.has(key)) next.delete(key);
     else next.add(key);
     return next;
   });
   const isOpen = (key) => searching || !collapsed.has(key);
+  const updateFilter = (key, value2) => setFilters((current) => ({
+    ...current,
+    [key]: value2
+  }));
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -80,467 +64,37 @@ function ToolSchemaBrowser({
           leftClass: "flex min-h-0 flex-col overflow-hidden",
           rightClass: "min-h-0 overflow-y-auto",
           left: /* @__PURE__ */ jsx(
-            ToolSidebar,
+            ToolSchemaBrowserSidebar,
             {
               query,
               view,
+              filters,
               sections,
               active,
               filteredCount: filtered.length,
               isOpen,
+              value,
+              onRule,
               onQueryChange: setQuery,
               onViewChange: setView,
+              onFilterChange: updateFilter,
+              onClearFilters: () => setFilters({ ...EMPTY_TOOL_HINT_FILTERS }),
               onToggle: toggle,
-              onSelect: setSelected
+              onSelect: setSelected,
+              ...onRule ? { selection } : {}
             }
           ),
-          right: active ? /* @__PURE__ */ jsx(ToolDetail, { tool: active, tab, onTabChange: setTab }) : /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No tools" })
-        }
-      )
-    }
-  );
-}
-function ToolSidebar({
-  query,
-  view,
-  sections,
-  active,
-  filteredCount,
-  isOpen,
-  onQueryChange,
-  onViewChange,
-  onToggle,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("label", { className: "flex h-9 shrink-0 items-center gap-2 border-b border-border px-2 text-xs", children: [
-      /* @__PURE__ */ jsx(Icon, { icon: UiSearch, className: "size-3.5 text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          value: query,
-          onChange: (event) => onQueryChange(event.target.value),
-          placeholder: "Search tools",
-          className: "min-w-0 flex-1 bg-transparent outline-none"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1", children: [
-      /* @__PURE__ */ jsx(
-        ViewToggleButton,
-        {
-          active: view === "group",
-          icon: UiListDashes,
-          label: "Group",
-          onClick: () => onViewChange("group")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ViewToggleButton,
-        {
-          active: view === "tree",
-          icon: UiLayers,
-          label: "Tree",
-          onClick: () => onViewChange("tree")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(ListMenu, { className: "min-h-0 flex-1 overflow-y-auto divide-y-0", children: [
-      sections.map((section) => {
-        const sectionKey = `p:${section.label}`;
-        const sectionOpen = isOpen(sectionKey);
-        return /* @__PURE__ */ jsxs(ListMenuSection, { children: [
-          /* @__PURE__ */ jsx(ListMenuHeader, { className: "px-0 py-0", children: /* @__PURE__ */ jsxs(
-            "button",
+          right: active ? /* @__PURE__ */ jsx(
+            ToolSchemaBrowserDetail,
             {
-              type: "button",
-              onClick: () => onToggle(sectionKey),
-              className: "flex w-full items-center gap-1 px-2 py-1 text-left text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:bg-muted",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: sectionOpen ? UiChevronDown : UiChevronRight,
-                    className: "size-3 shrink-0"
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: section.label }),
-                /* @__PURE__ */ jsx("span", { className: "tabular-nums text-muted-foreground/70", children: section.count })
-              ]
+              tool: active,
+              tab,
+              onTabChange: setTab
             }
-          ) }),
-          sectionOpen && section.children.map((child) => {
-            const childKey = `s:${section.label}///${child.label}`;
-            const childOpen = isOpen(childKey);
-            return /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onToggle(childKey),
-                  className: "flex w-full items-center gap-1 border-b border-border bg-background px-2 py-1 pl-3 text-left text-[11px] font-medium text-foreground/80 hover:bg-accent/50",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        icon: childOpen ? UiChevronDown : UiChevronRight,
-                        className: "size-3 shrink-0 text-muted-foreground"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: child.label }),
-                    /* @__PURE__ */ jsx("span", { className: "tabular-nums text-[10px] text-muted-foreground/70", children: child.tools.length })
-                  ]
-                }
-              ),
-              childOpen && child.tools.map((tool) => /* @__PURE__ */ jsx(
-                ToolSidebarRow,
-                {
-                  tool,
-                  active: (active == null ? void 0 : active.name) === tool.name,
-                  onSelect: () => onSelect(tool.name)
-                },
-                tool.name
-              ))
-            ] }, childKey);
-          })
-        ] }, sectionKey);
-      }),
-      filteredCount === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No matching tools" })
-    ] })
-  ] });
-}
-function ToolSidebarRow({
-  tool,
-  active,
-  onSelect
-}) {
-  return /* @__PURE__ */ jsx(
-    ListMenuItem,
-    {
-      active,
-      role: "button",
-      tabIndex: 0,
-      "aria-selected": active,
-      className: "px-2 py-2 pl-6",
-      onClick: onSelect,
-      onKeyDown: (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          onSelect();
+          ) : /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No tools" })
         }
-      },
-      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1rem_minmax(0,1fr)] gap-2", children: [
-        tool.icon ? /* @__PURE__ */ jsx(
-          Icon,
-          {
-            name: tool.icon,
-            className: "mt-0.5 size-3.5 text-muted-foreground"
-          }
-        ) : /* @__PURE__ */ jsx(
-          Icon,
-          {
-            icon: UiWrench,
-            className: "mt-0.5 size-3.5 text-muted-foreground"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs font-medium", children: tool.label || tool.name })
-      ] })
-    }
-  );
-}
-function ToolDetail({
-  tool,
-  tab,
-  onTabChange
-}) {
-  const strict = effectiveToolStrictness(tool);
-  const runtimePreview = useMemo(() => buildRuntimeToolPreview(tool), [tool]);
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-          tool.icon ? /* @__PURE__ */ jsx(Icon, { name: tool.icon, className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Icon, { icon: UiCode2, className: "size-4 text-muted-foreground" }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 truncate text-sm font-medium", children: [
-            tool.parent ? `${tool.parent} ` : "",
-            tool.label || tool.name
-          ] }),
-          /* @__PURE__ */ jsx(StrictnessBadge, { strict })
-        ] }),
-        tool.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: tool.description })
-      ] }),
-      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs", children: [
-        /* @__PURE__ */ jsx(DetailRow, { label: "Tool ID", value: tool.name, mono: true }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Default", value: tool.defaultPermission }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Strictness", value: strict ? "Strict" : "Loose" }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Icon", value: tool.icon, mono: true }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Source", value: tool.source }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Group", value: tool.group }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Parent", value: tool.parent }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Server", value: tool.server }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Method", value: tool.method }),
-        /* @__PURE__ */ jsx(DetailRow, { label: "Path", value: tool.path, mono: true })
-      ] }),
-      /* @__PURE__ */ jsx(HintChips, { annotations: tool.annotations }),
-      /* @__PURE__ */ jsx(ToolAnnotationsPanel, { annotations: tool.annotations }),
-      tool.hints && tool.hints.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-muted/20 p-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Hints" }),
-        /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-xs text-muted-foreground", children: tool.hints.map((hint) => /* @__PURE__ */ jsx("li", { children: hint }, hint)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Tabs,
-      {
-        value: tab,
-        onChange: (next) => onTabChange(next),
-        tabs: [
-          { id: "schema", label: "Schema" },
-          { id: "json", label: "JSON" }
-        ]
-      }
-    ),
-    tab === "schema" ? /* @__PURE__ */ jsxs("div", { role: "tabpanel", className: "space-y-3", children: [
-      /* @__PURE__ */ jsx(
-        SchemaViewer,
-        {
-          schema: tool.inputSchema ?? EMPTY_SCHEMA,
-          defaultOpenDepth: 2,
-          showControls: false
-        }
-      ),
-      tool.outputSchema && /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold", children: "Output" }),
-        /* @__PURE__ */ jsx(
-          SchemaViewer,
-          {
-            schema: tool.outputSchema,
-            defaultOpenDepth: 1,
-            showControls: false
-          }
-        )
-      ] })
-    ] }) : /* @__PURE__ */ jsx("div", { role: "tabpanel", children: /* @__PURE__ */ jsx(
-      CodeBlock,
-      {
-        language: "json",
-        source: JSON.stringify(runtimePreview, null, 2),
-        jsonDefaultOpenDepth: 2,
-        copyable: true
-      }
-    ) })
-  ] });
-}
-function ViewToggleButton({
-  active,
-  icon,
-  label,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-pressed": active,
-      className: cn(
-        "flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium",
-        active ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { icon, className: "size-3.5" }),
-        label
-      ]
-    }
-  );
-}
-function StrictnessBadge({ strict }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn(
-        "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium",
-        strict ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : "bg-amber-500/10 text-amber-700 dark:text-amber-300"
-      ),
-      title: strict ? "Strict input schema" : "Loose input schema",
-      children: strict ? "Strict" : "Loose"
-    }
-  );
-}
-function HintChips({
-  annotations,
-  compact = false
-}) {
-  const chips = wellKnownHintChips(annotations);
-  if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex flex-wrap gap-1",
-        compact ? "text-[9px]" : "text-[10px]"
-      ),
-      children: chips.map((chip) => /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn("rounded px-1.5 py-0.5 font-medium", chip.className),
-          children: chip.label
-        },
-        chip.key
-      ))
-    }
-  );
-}
-function ToolAnnotationsPanel({
-  annotations
-}) {
-  const entries = annotationEntries(annotations);
-  if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded border border-border bg-muted/20 p-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Annotations" }),
-    /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsx(
-      DetailRow,
-      {
-        label: key,
-        value: formatAnnotationValue(value),
-        mono: typeof value !== "boolean"
-      },
-      key
-    )) })
-  ] });
-}
-function DetailRow({
-  label,
-  value,
-  mono = false
-}) {
-  if (value === void 0 || value === null || value === "") return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("dd", { className: cn("min-w-0 break-all", mono && "font-mono"), children: String(value) })
-  ] });
-}
-function buildSections(tools, view) {
-  const outerOf = (tool) => view === "group" ? tool.group || NO_GROUP : tool.parent || NO_PARENT;
-  const innerOf = (tool) => view === "group" ? tool.parent || NO_PARENT : tool.group || NO_GROUP;
-  const outer = /* @__PURE__ */ new Map();
-  for (const tool of tools) {
-    const o = outerOf(tool);
-    const i = innerOf(tool);
-    const inner = outer.get(o) ?? /* @__PURE__ */ new Map();
-    (inner.get(i) ?? inner.set(i, []).get(i)).push(tool);
-    outer.set(o, inner);
-  }
-  return [...outer.entries()].map(([label, inner]) => {
-    const children = [...inner.entries()].map(([childLabel, childTools]) => ({
-      label: childLabel,
-      tools: [...childTools].sort(
-        (a, b) => (a.label || a.name).localeCompare(b.label || b.name)
       )
-    })).sort((a, b) => a.label.localeCompare(b.label));
-    return {
-      label,
-      count: children.reduce((sum, child) => sum + child.tools.length, 0),
-      children
-    };
-  }).sort((a, b) => a.label.localeCompare(b.label));
-}
-function effectiveToolStrictness(tool) {
-  var _a;
-  if (tool.strict !== void 0) return tool.strict;
-  return ((_a = tool.inputSchema) == null ? void 0 : _a.additionalProperties) === false;
-}
-function buildRuntimeToolPreview(tool) {
-  var _a;
-  return compactObject({
-    name: tool.name,
-    description: tool.description ?? ((_a = tool.annotations) == null ? void 0 : _a.title) ?? tool.title ?? tool.label,
-    inputSchema: tool.inputSchema ?? EMPTY_SCHEMA,
-    outputSchema: tool.outputSchema,
-    strict: effectiveToolStrictness(tool),
-    annotations: tool.annotations,
-    metadata: compactObject({
-      label: tool.label,
-      title: tool.title,
-      icon: tool.icon,
-      group: tool.group,
-      parent: tool.parent,
-      entity: tool.entity,
-      defaultPermission: tool.defaultPermission,
-      source: tool.source,
-      server: tool.server,
-      method: tool.method,
-      path: tool.path,
-      operationName: tool.operationName,
-      preferenceKey: tool.preferenceKey
-    })
-  });
-}
-function compactObject(record) {
-  return Object.fromEntries(
-    Object.entries(record).filter(([, value]) => {
-      if (value === void 0 || value === null) return false;
-      if (typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0) {
-        return false;
-      }
-      return true;
-    })
-  );
-}
-function annotationSearchText(annotations) {
-  if (!annotations) return [];
-  return Object.entries(annotations).flatMap(([key, value]) => [key, primitiveAnnotationText(value)]).filter((value) => Boolean(value));
-}
-function primitiveAnnotationText(value) {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return void 0;
-}
-function annotationEntries(annotations) {
-  if (!annotations) return [];
-  const order = [
-    "title",
-    "readOnlyHint",
-    "destructiveHint",
-    "idempotentHint",
-    "openWorldHint"
-  ];
-  const seen = new Set(order);
-  const known = order.filter((key) => annotations[key] !== void 0).map((key) => [key, annotations[key]]);
-  const rest = Object.entries(annotations).filter(([key]) => !seen.has(key));
-  return [...known, ...rest];
-}
-function formatAnnotationValue(value) {
-  if (typeof value === "boolean") return value ? "true" : "false";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
-    return String(value);
-  }
-  return JSON.stringify(value);
-}
-function wellKnownHintChips(annotations) {
-  if (!annotations) return [];
-  return [
-    annotations.readOnlyHint ? {
-      key: "readOnlyHint",
-      label: "Read only",
-      className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
-    } : null,
-    annotations.destructiveHint ? {
-      key: "destructiveHint",
-      label: "Destructive",
-      className: "bg-rose-500/10 text-rose-700 dark:text-rose-300"
-    } : null,
-    annotations.idempotentHint ? {
-      key: "idempotentHint",
-      label: "Idempotent",
-      className: "bg-sky-500/10 text-sky-700 dark:text-sky-300"
-    } : null,
-    annotations.openWorldHint ? {
-      key: "openWorldHint",
-      label: "Open world",
-      className: "bg-violet-500/10 text-violet-700 dark:text-violet-300"
-    } : null
-  ].filter(
-    (chip) => chip !== null
+    }
   );
 }
 export {