@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/data/ai/ThreadPicker.cjs

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+const Icon = require("../Icon.cjs");
+const UiAdd = require("../../icons/components/UiAdd.cjs");
+const UiComment = require("../../icons/components/UiComment.cjs");
+const UiTrash = require("../../icons/components/UiTrash.cjs");
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+function ThreadPicker({
+  threadId,
+  onSelect,
+  onNew,
+  api = "/api/chat/threads",
+  source,
+  query,
+  className = ""
+}) {
+  const [threads, setThreads] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const listUrl = query ? `${api}?${query}` : api;
+  const fetchThreads = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      if (source) {
+        setThreads(await source.load());
+      } else {
+        const res = await fetch(listUrl);
+        if (res.ok) setThreads(await res.json());
+      }
+    } catch (err) {
+      console.warn("clicky-ui: failed to load threads", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [source, listUrl]);
+  react.useEffect(() => {
+    void fetchThreads();
+  }, [fetchThreads]);
+  const handleDelete = react.useCallback(
+    async (id, e) => {
+      var _a;
+      e.stopPropagation();
+      try {
+        if (source) {
+          await ((_a = source.remove) == null ? void 0 : _a.call(source, id));
+        } else {
+          await fetch(`${api}/${id}`, { method: "DELETE" });
+        }
+        setThreads((prev) => prev.filter((t) => t.id !== id));
+        if (id === threadId) onNew();
+      } catch (err) {
+        console.warn("clicky-ui: failed to delete thread", err);
+      }
+    },
+    [source, api, threadId, onNew]
+  );
+  const current = threads.find((t) => t.id === threadId);
+  const label = (current == null ? void 0 : current.title) || "New Chat";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "left",
+      className,
+      onOpenChange: (open) => {
+        if (open) void fetchThreads();
+      },
+      menuClassName: "min-w-[220px] max-w-[320px] max-h-72 overflow-y-auto",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex max-w-[200px] items-center gap-1 truncate rounded px-2 py-1 text-sm font-medium hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiComment.UiComment, className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "size-3 shrink-0 opacity-50" })
+          ]
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent",
+            onClick: () => {
+              onNew();
+              closeMenu();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "size-3" }),
+              " New Chat"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-border" }),
+        loading && threads.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 text-xs text-muted-foreground", children: "Loading…" }),
+        threads.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 text-xs text-muted-foreground", children: "No previous conversations" }),
+        threads.map((t) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: utils.cn(
+              "group/thread flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent",
+              t.id === threadId && "font-semibold"
+            ),
+            onClick: () => {
+              onSelect(t.id);
+              closeMenu();
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(t.id);
+                closeMenu();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiComment.UiComment, className: "size-3 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: t.title || "Untitled" }),
+              t.totalCostUsd != null && t.totalCostUsd > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: [
+                "$",
+                t.totalCostUsd.toFixed(2)
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Delete conversation",
+                  className: "shrink-0 rounded p-0.5 text-muted-foreground opacity-0 hover:text-destructive group-hover/thread:opacity-100",
+                  onClick: (e) => void handleDelete(t.id, e),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "size-3" })
+                }
+              )
+            ]
+          },
+          t.id
+        ))
+      ] })
+    }
+  );
+}
+exports.ThreadPicker = ThreadPicker;
+//# sourceMappingURL=ThreadPicker.cjs.map

package/dist/data/ai/ThreadPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPicker.cjs","sources":["../../../src/data/ai/ThreadPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { UiComment, UiAdd, UiTrash, UiChevronDown } from \"../../icons\";\n\n/** One conversation as returned by the threads endpoint. Only `id` is required;\n *  `title`/cost are rendered when present so the picker works against minimal\n *  backends (e.g. clicky's in-memory ThreadStore, which has no cost). */\nexport interface ThreadSummary {\n  id: string;\n  title?: string | null;\n  totalCostUsd?: number | null;\n  updatedAt?: string;\n}\n\n/** An injectable thread data source, for apps that load conversations through\n *  their own client (e.g. react-query) rather than a plain `${api}` fetch — and\n *  for backend-free stories/demos. When supplied it replaces the `api` calls. */\nexport interface ThreadSource {\n  /** Returns the conversation list (re-invoked whenever the menu opens). */\n  load: () => Promise<ThreadSummary[]>;\n  /** Deletes a conversation. Omit to hide the delete affordance's effect. */\n  remove?: (id: string) => Promise<void>;\n}\n\nexport type ThreadPickerProps = {\n  /** Currently selected thread, or null for an unsaved/new conversation. */\n  threadId: string | null;\n  onSelect: (threadId: string) => void;\n  onNew: () => void;\n  /** Base endpoint for thread CRUD. GET lists, `${api}/${id}` DELETE removes.\n   *  Defaults to clicky's \"/api/chat/threads\". Ignored when `source` is set. */\n  api?: string;\n  /** Inject the thread list/delete directly instead of fetching `api`. */\n  source?: ThreadSource;\n  /** Optional query string appended to the list request (e.g. a scope id). */\n  query?: string;\n  className?: string;\n};\n\n/** A dropdown to switch between, create, and delete conversation threads. The\n *  list is (re)fetched whenever the menu opens, so newly-persisted threads\n *  appear without a manual refresh. */\nexport function ThreadPicker({\n  threadId,\n  onSelect,\n  onNew,\n  api = \"/api/chat/threads\",\n  source,\n  query,\n  className = \"\",\n}: ThreadPickerProps) {\n  const [threads, setThreads] = useState<ThreadSummary[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const listUrl = query ? `${api}?${query}` : api;\n\n  const fetchThreads = useCallback(async () => {\n    setLoading(true);\n    try {\n      if (source) {\n        setThreads(await source.load());\n      } else {\n        const res = await fetch(listUrl);\n        if (res.ok) setThreads(await res.json());\n      }\n    } catch (err) {\n      console.warn(\"clicky-ui: failed to load threads\", err);\n    } finally {\n      setLoading(false);\n    }\n  }, [source, listUrl]);\n\n  useEffect(() => {\n    void fetchThreads();\n  }, [fetchThreads]);\n\n  const handleDelete = useCallback(\n    async (id: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      try {\n        if (source) {\n          await source.remove?.(id);\n        } else {\n          await fetch(`${api}/${id}`, { method: \"DELETE\" });\n        }\n        setThreads((prev) => prev.filter((t) => t.id !== id));\n        if (id === threadId) onNew();\n      } catch (err) {\n        console.warn(\"clicky-ui: failed to delete thread\", err);\n      }\n    },\n    [source, api, threadId, onNew],\n  );\n\n  const current = threads.find((t) => t.id === threadId);\n  const label = current?.title || \"New Chat\";\n\n  return (\n    <DropdownMenu\n      align=\"left\"\n      className={className}\n      onOpenChange={(open) => {\n        if (open) void fetchThreads();\n      }}\n      menuClassName=\"min-w-[220px] max-w-[320px] max-h-72 overflow-y-auto\"\n      trigger={\n        <button\n          type=\"button\"\n          className=\"flex max-w-[200px] items-center gap-1 truncate rounded px-2 py-1 text-sm font-medium hover:bg-muted\"\n        >\n          <Icon icon={UiComment} className=\"size-3.5 shrink-0\" />\n          <span className=\"truncate\">{label}</span>\n          <Icon icon={UiChevronDown} className=\"size-3 shrink-0 opacity-50\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"py-1\">\n          <button\n            type=\"button\"\n            className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent\"\n            onClick={() => {\n              onNew();\n              closeMenu();\n            }}\n          >\n            <Icon icon={UiAdd} className=\"size-3\" /> New Chat\n          </button>\n          <div className=\"my-1 border-t border-border\" />\n          {loading && threads.length === 0 && (\n            <div className=\"px-3 py-1.5 text-xs text-muted-foreground\">Loading…</div>\n          )}\n          {threads.length === 0 && !loading && (\n            <div className=\"px-3 py-1.5 text-xs text-muted-foreground\">No previous conversations</div>\n          )}\n          {threads.map((t) => (\n            <div\n              key={t.id}\n              role=\"button\"\n              tabIndex={0}\n              className={cn(\n                \"group/thread flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent\",\n                t.id === threadId && \"font-semibold\",\n              )}\n              onClick={() => {\n                onSelect(t.id);\n                closeMenu();\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onSelect(t.id);\n                  closeMenu();\n                }\n              }}\n            >\n              <Icon icon={UiComment} className=\"size-3 shrink-0\" />\n              <span className=\"flex-1 truncate\">{t.title || \"Untitled\"}</span>\n              {t.totalCostUsd != null && t.totalCostUsd > 0 && (\n                <span className=\"shrink-0 text-[10px] text-muted-foreground\">\n                  ${t.totalCostUsd.toFixed(2)}\n                </span>\n              )}\n              <button\n                type=\"button\"\n                aria-label=\"Delete conversation\"\n                className=\"shrink-0 rounded p-0.5 text-muted-foreground opacity-0 hover:text-destructive group-hover/thread:opacity-100\"\n                onClick={(e) => void handleDelete(t.id, e)}\n              >\n                <Icon icon={UiTrash} className=\"size-3\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":["useState","useCallback","useEffect","jsx","DropdownMenu","jsxs","Icon","UiComment","UiChevronDown","UiAdd","cn","UiTrash"],"mappings":"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"}

package/dist/data/ai/ThreadPicker.d.ts

@@ -0,0 +1,37 @@
+/** One conversation as returned by the threads endpoint. Only `id` is required;
+ *  `title`/cost are rendered when present so the picker works against minimal
+ *  backends (e.g. clicky's in-memory ThreadStore, which has no cost). */
+export interface ThreadSummary {
+    id: string;
+    title?: string | null;
+    totalCostUsd?: number | null;
+    updatedAt?: string;
+}
+/** An injectable thread data source, for apps that load conversations through
+ *  their own client (e.g. react-query) rather than a plain `${api}` fetch — and
+ *  for backend-free stories/demos. When supplied it replaces the `api` calls. */
+export interface ThreadSource {
+    /** Returns the conversation list (re-invoked whenever the menu opens). */
+    load: () => Promise<ThreadSummary[]>;
+    /** Deletes a conversation. Omit to hide the delete affordance's effect. */
+    remove?: (id: string) => Promise<void>;
+}
+export type ThreadPickerProps = {
+    /** Currently selected thread, or null for an unsaved/new conversation. */
+    threadId: string | null;
+    onSelect: (threadId: string) => void;
+    onNew: () => void;
+    /** Base endpoint for thread CRUD. GET lists, `${api}/${id}` DELETE removes.
+     *  Defaults to clicky's "/api/chat/threads". Ignored when `source` is set. */
+    api?: string;
+    /** Inject the thread list/delete directly instead of fetching `api`. */
+    source?: ThreadSource;
+    /** Optional query string appended to the list request (e.g. a scope id). */
+    query?: string;
+    className?: string;
+};
+/** A dropdown to switch between, create, and delete conversation threads. The
+ *  list is (re)fetched whenever the menu opens, so newly-persisted threads
+ *  appear without a manual refresh. */
+export declare function ThreadPicker({ threadId, onSelect, onNew, api, source, query, className, }: ThreadPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThreadPicker.d.ts.map

package/dist/data/ai/ThreadPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPicker.d.ts","sourceRoot":"","sources":["../../../src/data/ai/ThreadPicker.tsx"],"names":[],"mappings":"AAMA;;yEAEyE;AACzE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;iFAEiF;AACjF,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,IAAI,EAAE,MAAM,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;IACrC,2EAA2E;IAC3E,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;kFAC8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;uCAEuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAyB,EACzB,MAAM,EACN,KAAK,EACL,SAAc,GACf,EAAE,iBAAiB,2CA+HnB"}

package/dist/data/ai/ThreadPicker.js

@@ -0,0 +1,148 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../lib/utils.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { Icon } from "../Icon.js";
+import { UiAdd } from "../../icons/components/UiAdd.js";
+import { UiComment } from "../../icons/components/UiComment.js";
+import { UiTrash } from "../../icons/components/UiTrash.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+function ThreadPicker({
+  threadId,
+  onSelect,
+  onNew,
+  api = "/api/chat/threads",
+  source,
+  query,
+  className = ""
+}) {
+  const [threads, setThreads] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const listUrl = query ? `${api}?${query}` : api;
+  const fetchThreads = useCallback(async () => {
+    setLoading(true);
+    try {
+      if (source) {
+        setThreads(await source.load());
+      } else {
+        const res = await fetch(listUrl);
+        if (res.ok) setThreads(await res.json());
+      }
+    } catch (err) {
+      console.warn("clicky-ui: failed to load threads", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [source, listUrl]);
+  useEffect(() => {
+    void fetchThreads();
+  }, [fetchThreads]);
+  const handleDelete = useCallback(
+    async (id, e) => {
+      var _a;
+      e.stopPropagation();
+      try {
+        if (source) {
+          await ((_a = source.remove) == null ? void 0 : _a.call(source, id));
+        } else {
+          await fetch(`${api}/${id}`, { method: "DELETE" });
+        }
+        setThreads((prev) => prev.filter((t) => t.id !== id));
+        if (id === threadId) onNew();
+      } catch (err) {
+        console.warn("clicky-ui: failed to delete thread", err);
+      }
+    },
+    [source, api, threadId, onNew]
+  );
+  const current = threads.find((t) => t.id === threadId);
+  const label = (current == null ? void 0 : current.title) || "New Chat";
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "left",
+      className,
+      onOpenChange: (open) => {
+        if (open) void fetchThreads();
+      },
+      menuClassName: "min-w-[220px] max-w-[320px] max-h-72 overflow-y-auto",
+      trigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex max-w-[200px] items-center gap-1 truncate rounded px-2 py-1 text-sm font-medium hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx(Icon, { icon: UiComment, className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown, className: "size-3 shrink-0 opacity-50" })
+          ]
+        }
+      ),
+      children: (closeMenu) => /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent",
+            onClick: () => {
+              onNew();
+              closeMenu();
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "size-3" }),
+              " New Chat"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+        loading && threads.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs text-muted-foreground", children: "Loading…" }),
+        threads.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-xs text-muted-foreground", children: "No previous conversations" }),
+        threads.map((t) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: cn(
+              "group/thread flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent",
+              t.id === threadId && "font-semibold"
+            ),
+            onClick: () => {
+              onSelect(t.id);
+              closeMenu();
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(t.id);
+                closeMenu();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiComment, className: "size-3 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: t.title || "Untitled" }),
+              t.totalCostUsd != null && t.totalCostUsd > 0 && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: [
+                "$",
+                t.totalCostUsd.toFixed(2)
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Delete conversation",
+                  className: "shrink-0 rounded p-0.5 text-muted-foreground opacity-0 hover:text-destructive group-hover/thread:opacity-100",
+                  onClick: (e) => void handleDelete(t.id, e),
+                  children: /* @__PURE__ */ jsx(Icon, { icon: UiTrash, className: "size-3" })
+                }
+              )
+            ]
+          },
+          t.id
+        ))
+      ] })
+    }
+  );
+}
+export {
+  ThreadPicker
+};
+//# sourceMappingURL=ThreadPicker.js.map

package/dist/data/ai/ThreadPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadPicker.js","sources":["../../../src/data/ai/ThreadPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { UiComment, UiAdd, UiTrash, UiChevronDown } from \"../../icons\";\n\n/** One conversation as returned by the threads endpoint. Only `id` is required;\n *  `title`/cost are rendered when present so the picker works against minimal\n *  backends (e.g. clicky's in-memory ThreadStore, which has no cost). */\nexport interface ThreadSummary {\n  id: string;\n  title?: string | null;\n  totalCostUsd?: number | null;\n  updatedAt?: string;\n}\n\n/** An injectable thread data source, for apps that load conversations through\n *  their own client (e.g. react-query) rather than a plain `${api}` fetch — and\n *  for backend-free stories/demos. When supplied it replaces the `api` calls. */\nexport interface ThreadSource {\n  /** Returns the conversation list (re-invoked whenever the menu opens). */\n  load: () => Promise<ThreadSummary[]>;\n  /** Deletes a conversation. Omit to hide the delete affordance's effect. */\n  remove?: (id: string) => Promise<void>;\n}\n\nexport type ThreadPickerProps = {\n  /** Currently selected thread, or null for an unsaved/new conversation. */\n  threadId: string | null;\n  onSelect: (threadId: string) => void;\n  onNew: () => void;\n  /** Base endpoint for thread CRUD. GET lists, `${api}/${id}` DELETE removes.\n   *  Defaults to clicky's \"/api/chat/threads\". Ignored when `source` is set. */\n  api?: string;\n  /** Inject the thread list/delete directly instead of fetching `api`. */\n  source?: ThreadSource;\n  /** Optional query string appended to the list request (e.g. a scope id). */\n  query?: string;\n  className?: string;\n};\n\n/** A dropdown to switch between, create, and delete conversation threads. The\n *  list is (re)fetched whenever the menu opens, so newly-persisted threads\n *  appear without a manual refresh. */\nexport function ThreadPicker({\n  threadId,\n  onSelect,\n  onNew,\n  api = \"/api/chat/threads\",\n  source,\n  query,\n  className = \"\",\n}: ThreadPickerProps) {\n  const [threads, setThreads] = useState<ThreadSummary[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const listUrl = query ? `${api}?${query}` : api;\n\n  const fetchThreads = useCallback(async () => {\n    setLoading(true);\n    try {\n      if (source) {\n        setThreads(await source.load());\n      } else {\n        const res = await fetch(listUrl);\n        if (res.ok) setThreads(await res.json());\n      }\n    } catch (err) {\n      console.warn(\"clicky-ui: failed to load threads\", err);\n    } finally {\n      setLoading(false);\n    }\n  }, [source, listUrl]);\n\n  useEffect(() => {\n    void fetchThreads();\n  }, [fetchThreads]);\n\n  const handleDelete = useCallback(\n    async (id: string, e: React.MouseEvent) => {\n      e.stopPropagation();\n      try {\n        if (source) {\n          await source.remove?.(id);\n        } else {\n          await fetch(`${api}/${id}`, { method: \"DELETE\" });\n        }\n        setThreads((prev) => prev.filter((t) => t.id !== id));\n        if (id === threadId) onNew();\n      } catch (err) {\n        console.warn(\"clicky-ui: failed to delete thread\", err);\n      }\n    },\n    [source, api, threadId, onNew],\n  );\n\n  const current = threads.find((t) => t.id === threadId);\n  const label = current?.title || \"New Chat\";\n\n  return (\n    <DropdownMenu\n      align=\"left\"\n      className={className}\n      onOpenChange={(open) => {\n        if (open) void fetchThreads();\n      }}\n      menuClassName=\"min-w-[220px] max-w-[320px] max-h-72 overflow-y-auto\"\n      trigger={\n        <button\n          type=\"button\"\n          className=\"flex max-w-[200px] items-center gap-1 truncate rounded px-2 py-1 text-sm font-medium hover:bg-muted\"\n        >\n          <Icon icon={UiComment} className=\"size-3.5 shrink-0\" />\n          <span className=\"truncate\">{label}</span>\n          <Icon icon={UiChevronDown} className=\"size-3 shrink-0 opacity-50\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"py-1\">\n          <button\n            type=\"button\"\n            className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent\"\n            onClick={() => {\n              onNew();\n              closeMenu();\n            }}\n          >\n            <Icon icon={UiAdd} className=\"size-3\" /> New Chat\n          </button>\n          <div className=\"my-1 border-t border-border\" />\n          {loading && threads.length === 0 && (\n            <div className=\"px-3 py-1.5 text-xs text-muted-foreground\">Loading…</div>\n          )}\n          {threads.length === 0 && !loading && (\n            <div className=\"px-3 py-1.5 text-xs text-muted-foreground\">No previous conversations</div>\n          )}\n          {threads.map((t) => (\n            <div\n              key={t.id}\n              role=\"button\"\n              tabIndex={0}\n              className={cn(\n                \"group/thread flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent\",\n                t.id === threadId && \"font-semibold\",\n              )}\n              onClick={() => {\n                onSelect(t.id);\n                closeMenu();\n              }}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onSelect(t.id);\n                  closeMenu();\n                }\n              }}\n            >\n              <Icon icon={UiComment} className=\"size-3 shrink-0\" />\n              <span className=\"flex-1 truncate\">{t.title || \"Untitled\"}</span>\n              {t.totalCostUsd != null && t.totalCostUsd > 0 && (\n                <span className=\"shrink-0 text-[10px] text-muted-foreground\">\n                  ${t.totalCostUsd.toFixed(2)}\n                </span>\n              )}\n              <button\n                type=\"button\"\n                aria-label=\"Delete conversation\"\n                className=\"shrink-0 rounded p-0.5 text-muted-foreground opacity-0 hover:text-destructive group-hover/thread:opacity-100\"\n                onClick={(e) => void handleDelete(t.id, e)}\n              >\n                <Icon icon={UiTrash} className=\"size-3\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/ToolPreferences.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+const button = require("../../components/button.cjs");
+const Icon = require("../Icon.cjs");
+const UiSliders = require("../../icons/components/UiSliders.cjs");
+const MODE_CYCLE = ["enabled", "ask", "disabled"];
+const MODE_LABEL = { enabled: "Auto", ask: "Ask", disabled: "Off" };
+function ToolRow({
+  meta,
+  mode,
+  onToggle
+}) {
+  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",
+      onClick: () => onToggle(meta.name),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("text-xs", mode === "disabled" && "text-muted-foreground line-through"), children: meta.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            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"
+            ),
+            children: MODE_LABEL[mode]
+          }
+        )
+      ]
+    }
+  );
+}
+function ToolPreferences({ tools, value, onChange, className = "" }) {
+  const groups = react.useMemo(() => {
+    var _a;
+    const g = {};
+    for (const meta of tools) (g[_a = meta.group ?? "Tools"] ?? (g[_a] = [])).push(meta);
+    return g;
+  }, [tools]);
+  const handleToggle = (name) => {
+    const current = value[name] ?? "enabled";
+    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(current) + 1) % MODE_CYCLE.length];
+    onChange({ ...value, [name]: next });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      className,
+      menuClassName: "w-64 max-h-[400px] overflow-y-auto p-3",
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", title: "Tool preferences", "data-testid": "tool-preferences-btn", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSliders.UiSliders, className: "size-4" }) }),
+      children: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-semibold", children: "Tool Preferences" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] text-muted-foreground", children: "Click to cycle: Auto → Ask → Off" }),
+        Object.entries(groups).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((meta) => /* @__PURE__ */ jsxRuntime.jsx(
+            ToolRow,
+            {
+              meta,
+              mode: value[meta.name] ?? "enabled",
+              onToggle: handleToggle
+            },
+            meta.name
+          ))
+        ] }, group))
+      ] })
+    }
+  );
+}
+exports.ToolPreferences = ToolPreferences;
+//# sourceMappingURL=ToolPreferences.cjs.map

package/dist/data/ai/ToolPreferences.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPreferences.cjs","sources":["../../../src/data/ai/ToolPreferences.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport { UiSliders } from \"../../icons\";\nimport type { ToolMeta } from \"../chat/types\";\n\nexport type { ToolMeta };\n\n/** How a tool may be invoked: run automatically, pause for approval, or be\n *  hidden from the model entirely. */\nexport type ToolMode = \"enabled\" | \"ask\" | \"disabled\";\n\nconst MODE_CYCLE: ToolMode[] = [\"enabled\", \"ask\", \"disabled\"];\nconst MODE_LABEL: Record<ToolMode, string> = { enabled: \"Auto\", ask: \"Ask\", disabled: \"Off\" };\n\nexport type ToolPreferencesProps = {\n  /** The tools to list. Replaces ai-financials' global registry — callers pass\n   *  whatever their backend exposes. */\n  tools: ToolMeta[];\n  /** Current per-tool mode. Missing entries default to \"enabled\". */\n  value: Record<string, ToolMode>;\n  onChange: (prefs: Record<string, ToolMode>) => void;\n  className?: string;\n};\n\nfunction ToolRow({\n  meta,\n  mode,\n  onToggle,\n}: {\n  meta: ToolMeta;\n  mode: ToolMode;\n  onToggle: (name: string) => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-full items-center justify-between rounded px-2 py-1 text-left hover:bg-accent\"\n      onClick={() => onToggle(meta.name)}\n    >\n      <span className={cn(\"text-xs\", mode === \"disabled\" && \"text-muted-foreground line-through\")}>\n        {meta.label}\n      </span>\n      <span\n        className={cn(\n          \"rounded px-1.5 py-0.5 text-[10px] font-medium\",\n          mode === \"enabled\" &&\n            \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300\",\n          mode === \"ask\" && \"bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300\",\n          mode === \"disabled\" && \"bg-muted text-muted-foreground\",\n        )}\n      >\n        {MODE_LABEL[mode]}\n      </span>\n    </button>\n  );\n}\n\n/** A popover that cycles each tool through Auto → Ask → Off. The resulting\n *  `Record<name, ToolMode>` is meant to be forwarded to the backend (e.g. via\n *  `<Chat body={{ toolPreferences }}>`). */\nexport function ToolPreferences({ tools, value, onChange, className = \"\" }: ToolPreferencesProps) {\n  const groups = useMemo(() => {\n    const g: Record<string, ToolMeta[]> = {};\n    for (const meta of tools) (g[meta.group ?? \"Tools\"] ??= []).push(meta);\n    return g;\n  }, [tools]);\n\n  const handleToggle = (name: string) => {\n    const current = value[name] ?? \"enabled\";\n    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(current) + 1) % MODE_CYCLE.length]!;\n    onChange({ ...value, [name]: next });\n  };\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 max-h-[400px] overflow-y-auto p-3\"\n      trigger={\n        <Button variant=\"ghost\" size=\"icon\" title=\"Tool preferences\" data-testid=\"tool-preferences-btn\">\n          <Icon icon={UiSliders} className=\"size-4\" />\n        </Button>\n      }\n    >\n      {() => (\n        <div>\n          <div className=\"mb-2 text-xs font-semibold\">Tool Preferences</div>\n          <p className=\"mb-2 text-[10px] text-muted-foreground\">Click to cycle: Auto → Ask → Off</p>\n          {Object.entries(groups).map(([group, metas]) => (\n            <div key={group} className=\"mb-2\">\n              <div className=\"mb-0.5 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground\">\n                {group}\n              </div>\n              {metas.map((meta) => (\n                <ToolRow\n                  key={meta.name}\n                  meta={meta}\n                  mode={value[meta.name] ?? \"enabled\"}\n                  onToggle={handleToggle}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":["jsxs","jsx","cn","useMemo","DropdownMenu","Button","Icon","UiSliders"],"mappings":";;;;;;;;;AAcA,MAAM,aAAyB,CAAC,WAAW,OAAO,UAAU;AAC5D,MAAM,aAAuC,EAAE,SAAS,QAAQ,KAAK,OAAO,UAAU,MAAA;AAYtF,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS,MAAM,SAAS,KAAK,IAAI;AAAA,MAEjC,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWC,MAAAA,GAAG,WAAW,SAAS,cAAc,oCAAoC,GACvF,UAAA,KAAK,MAAA,CACR;AAAA,QACAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA,SAAS,aACP;AAAA,cACF,SAAS,SAAS;AAAA,cAClB,SAAS,cAAc;AAAA,YAAA;AAAA,YAGxB,qBAAW,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGN;AAKO,SAAS,gBAAgB,EAAE,OAAO,OAAO,UAAU,YAAY,MAA4B;AAChG,QAAM,SAASC,MAAAA,QAAQ,MAAM;;AAC3B,UAAM,IAAgC,CAAA;AACtC,eAAW,QAAQ,MAAO,EAAC,OAAE,KAAK,SAAS,aAAhB,QAA6B,KAAI,KAAK,IAAI;AACrE,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAe,CAAC,SAAiB;AACrC,UAAM,UAAU,MAAM,IAAI,KAAK;AAC/B,UAAM,OAAO,YAAY,WAAW,QAAQ,OAAO,IAAI,KAAK,WAAW,MAAM;AAC7E,aAAS,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM;AAAA,EACrC;AAEA,SACEF,2BAAAA;AAAAA,IAACG,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,eAAc;AAAA,MACd,SACEH,2BAAAA,IAACI,OAAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,OAAM,oBAAmB,eAAY,wBACvE,UAAAJ,+BAACK,KAAAA,MAAA,EAAK,MAAMC,UAAAA,WAAW,WAAU,UAAS,GAC5C;AAAA,MAGD,UAAA,sCACE,OAAA,EACC,UAAA;AAAA,QAAAN,2BAAAA,IAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,oBAAgB;AAAA,QAC5DA,2BAAAA,IAAC,KAAA,EAAE,WAAU,0CAAyC,UAAA,oCAAgC;AAAA,QACrF,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MACxCD,2BAAAA,KAAC,OAAA,EAAgB,WAAU,QACzB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,wFACZ,UAAA,OACH;AAAA,UACC,MAAM,IAAI,CAAC,SACVA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,MAAM,MAAM,KAAK,IAAI,KAAK;AAAA,cAC1B,UAAU;AAAA,YAAA;AAAA,YAHL,KAAK;AAAA,UAAA,CAKb;AAAA,QAAA,EAAA,GAXO,KAYV,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/data/ai/ToolPreferences.d.ts

@@ -0,0 +1,19 @@
+import { ToolMeta } from '../chat/types';
+export type { ToolMeta };
+/** How a tool may be invoked: run automatically, pause for approval, or be
+ *  hidden from the model entirely. */
+export type ToolMode = "enabled" | "ask" | "disabled";
+export type ToolPreferencesProps = {
+    /** The tools to list. Replaces ai-financials' global registry — callers pass
+     *  whatever their backend exposes. */
+    tools: ToolMeta[];
+    /** Current per-tool mode. Missing entries default to "enabled". */
+    value: Record<string, ToolMode>;
+    onChange: (prefs: Record<string, ToolMode>) => void;
+    className?: string;
+};
+/** A popover that cycles each tool through Auto → Ask → Off. The resulting
+ *  `Record<name, ToolMode>` is meant to be forwarded to the backend (e.g. via
+ *  `<Chat body={{ toolPreferences }}>`). */
+export declare function ToolPreferences({ tools, value, onChange, className }: ToolPreferencesProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolPreferences.d.ts.map

package/dist/data/ai/ToolPreferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPreferences.d.ts","sourceRoot":"","sources":["../../../src/data/ai/ToolPreferences.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB;sCACsC;AACtC,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;AAKtD,MAAM,MAAM,oBAAoB,GAAG;IACjC;0CACsC;IACtC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmCF;;4CAE4C;AAC5C,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,oBAAoB,2CA+C/F"}

package/dist/data/ai/ToolPreferences.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../lib/utils.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+import { Button } from "../../components/button.js";
+import { Icon } from "../Icon.js";
+import { UiSliders } from "../../icons/components/UiSliders.js";
+const MODE_CYCLE = ["enabled", "ask", "disabled"];
+const MODE_LABEL = { enabled: "Auto", ask: "Ask", disabled: "Off" };
+function ToolRow({
+  meta,
+  mode,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex w-full items-center justify-between rounded px-2 py-1 text-left hover:bg-accent",
+      onClick: () => onToggle(meta.name),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-xs", mode === "disabled" && "text-muted-foreground line-through"), children: meta.label }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: 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"
+            ),
+            children: MODE_LABEL[mode]
+          }
+        )
+      ]
+    }
+  );
+}
+function ToolPreferences({ tools, value, onChange, className = "" }) {
+  const groups = useMemo(() => {
+    var _a;
+    const g = {};
+    for (const meta of tools) (g[_a = meta.group ?? "Tools"] ?? (g[_a] = [])).push(meta);
+    return g;
+  }, [tools]);
+  const handleToggle = (name) => {
+    const current = value[name] ?? "enabled";
+    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(current) + 1) % MODE_CYCLE.length];
+    onChange({ ...value, [name]: next });
+  };
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "right",
+      className,
+      menuClassName: "w-64 max-h-[400px] overflow-y-auto p-3",
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", title: "Tool preferences", "data-testid": "tool-preferences-btn", children: /* @__PURE__ */ jsx(Icon, { icon: UiSliders, className: "size-4" }) }),
+      children: () => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold", children: "Tool Preferences" }),
+        /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-muted-foreground", children: "Click to cycle: Auto → Ask → Off" }),
+        Object.entries(groups).map(([group, metas]) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-0.5 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
+          metas.map((meta) => /* @__PURE__ */ jsx(
+            ToolRow,
+            {
+              meta,
+              mode: value[meta.name] ?? "enabled",
+              onToggle: handleToggle
+            },
+            meta.name
+          ))
+        ] }, group))
+      ] })
+    }
+  );
+}
+export {
+  ToolPreferences
+};
+//# sourceMappingURL=ToolPreferences.js.map

package/dist/data/ai/ToolPreferences.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPreferences.js","sources":["../../../src/data/ai/ToolPreferences.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport { UiSliders } from \"../../icons\";\nimport type { ToolMeta } from \"../chat/types\";\n\nexport type { ToolMeta };\n\n/** How a tool may be invoked: run automatically, pause for approval, or be\n *  hidden from the model entirely. */\nexport type ToolMode = \"enabled\" | \"ask\" | \"disabled\";\n\nconst MODE_CYCLE: ToolMode[] = [\"enabled\", \"ask\", \"disabled\"];\nconst MODE_LABEL: Record<ToolMode, string> = { enabled: \"Auto\", ask: \"Ask\", disabled: \"Off\" };\n\nexport type ToolPreferencesProps = {\n  /** The tools to list. Replaces ai-financials' global registry — callers pass\n   *  whatever their backend exposes. */\n  tools: ToolMeta[];\n  /** Current per-tool mode. Missing entries default to \"enabled\". */\n  value: Record<string, ToolMode>;\n  onChange: (prefs: Record<string, ToolMode>) => void;\n  className?: string;\n};\n\nfunction ToolRow({\n  meta,\n  mode,\n  onToggle,\n}: {\n  meta: ToolMeta;\n  mode: ToolMode;\n  onToggle: (name: string) => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-full items-center justify-between rounded px-2 py-1 text-left hover:bg-accent\"\n      onClick={() => onToggle(meta.name)}\n    >\n      <span className={cn(\"text-xs\", mode === \"disabled\" && \"text-muted-foreground line-through\")}>\n        {meta.label}\n      </span>\n      <span\n        className={cn(\n          \"rounded px-1.5 py-0.5 text-[10px] font-medium\",\n          mode === \"enabled\" &&\n            \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300\",\n          mode === \"ask\" && \"bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300\",\n          mode === \"disabled\" && \"bg-muted text-muted-foreground\",\n        )}\n      >\n        {MODE_LABEL[mode]}\n      </span>\n    </button>\n  );\n}\n\n/** A popover that cycles each tool through Auto → Ask → Off. The resulting\n *  `Record<name, ToolMode>` is meant to be forwarded to the backend (e.g. via\n *  `<Chat body={{ toolPreferences }}>`). */\nexport function ToolPreferences({ tools, value, onChange, className = \"\" }: ToolPreferencesProps) {\n  const groups = useMemo(() => {\n    const g: Record<string, ToolMeta[]> = {};\n    for (const meta of tools) (g[meta.group ?? \"Tools\"] ??= []).push(meta);\n    return g;\n  }, [tools]);\n\n  const handleToggle = (name: string) => {\n    const current = value[name] ?? \"enabled\";\n    const next = MODE_CYCLE[(MODE_CYCLE.indexOf(current) + 1) % MODE_CYCLE.length]!;\n    onChange({ ...value, [name]: next });\n  };\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 max-h-[400px] overflow-y-auto p-3\"\n      trigger={\n        <Button variant=\"ghost\" size=\"icon\" title=\"Tool preferences\" data-testid=\"tool-preferences-btn\">\n          <Icon icon={UiSliders} className=\"size-4\" />\n        </Button>\n      }\n    >\n      {() => (\n        <div>\n          <div className=\"mb-2 text-xs font-semibold\">Tool Preferences</div>\n          <p className=\"mb-2 text-[10px] text-muted-foreground\">Click to cycle: Auto → Ask → Off</p>\n          {Object.entries(groups).map(([group, metas]) => (\n            <div key={group} className=\"mb-2\">\n              <div className=\"mb-0.5 px-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground\">\n                {group}\n              </div>\n              {metas.map((meta) => (\n                <ToolRow\n                  key={meta.name}\n                  meta={meta}\n                  mode={value[meta.name] ?? \"enabled\"}\n                  onToggle={handleToggle}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,aAAyB,CAAC,WAAW,OAAO,UAAU;AAC5D,MAAM,aAAuC,EAAE,SAAS,QAAQ,KAAK,OAAO,UAAU,MAAA;AAYtF,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS,MAAM,SAAS,KAAK,IAAI;AAAA,MAEjC,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,WAAW,SAAS,cAAc,oCAAoC,GACvF,UAAA,KAAK,MAAA,CACR;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SAAS,aACP;AAAA,cACF,SAAS,SAAS;AAAA,cAClB,SAAS,cAAc;AAAA,YAAA;AAAA,YAGxB,qBAAW,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EAAA;AAGN;AAKO,SAAS,gBAAgB,EAAE,OAAO,OAAO,UAAU,YAAY,MAA4B;AAChG,QAAM,SAAS,QAAQ,MAAM;;AAC3B,UAAM,IAAgC,CAAA;AACtC,eAAW,QAAQ,MAAO,EAAC,OAAE,KAAK,SAAS,aAAhB,QAA6B,KAAI,KAAK,IAAI;AACrE,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAe,CAAC,SAAiB;AACrC,UAAM,UAAU,MAAM,IAAI,KAAK;AAC/B,UAAM,OAAO,YAAY,WAAW,QAAQ,OAAO,IAAI,KAAK,WAAW,MAAM;AAC7E,aAAS,EAAE,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,eAAc;AAAA,MACd,SACE,oBAAC,QAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,OAAM,oBAAmB,eAAY,wBACvE,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,UAAS,GAC5C;AAAA,MAGD,UAAA,2BACE,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,oBAAgB;AAAA,QAC5D,oBAAC,KAAA,EAAE,WAAU,0CAAyC,UAAA,oCAAgC;AAAA,QACrF,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,MACxC,qBAAC,OAAA,EAAgB,WAAU,QACzB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,wFACZ,UAAA,OACH;AAAA,UACC,MAAM,IAAI,CAAC,SACV;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,MAAM,MAAM,KAAK,IAAI,KAAK;AAAA,cAC1B,UAAU;AAAA,YAAA;AAAA,YAHL,KAAK;AAAA,UAAA,CAKb;AAAA,QAAA,EAAA,GAXO,KAYV,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}