@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/data/chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport type { ChatModel, Suggestion } from \"./types\";\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, stop } =\n    useChat<UIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages } : {}),\n    });\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const toolbar = models.length > 0 || showEffort ? (\n    <div className=\"flex items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chat.js","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/chat/ContextUsage.cjs

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+function formatTokens(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return String(n);
+}
+function tone(pct) {
+  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
+}
+function barTone(pct) {
+  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
+}
+function ContextUsage({
+  usedTokens,
+  maxTokens,
+  messageCount,
+  modelLabel,
+  modelIcon: Glyph,
+  cost,
+  className = ""
+}) {
+  const pct = maxTokens > 0 ? Math.min(100, Math.round(usedTokens / maxTokens * 100)) : 0;
+  const radius = 8;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - pct / 100 * circumference;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      className,
+      menuClassName: "w-64 p-3",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          title: "Context usage",
+          className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          children: [
+            Glyph && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", className: utils.cn("shrink-0", tone(pct)), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: "10",
+                  cy: "10",
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round",
+                  transform: "rotate(-90 10 10)"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("text", { x: "10", y: "10", textAnchor: "middle", dominantBaseline: "central", fontSize: "6", fill: "currentColor", fontWeight: "600", children: pct })
+            ] })
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5 text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold", children: "Context Usage" }),
+        modelLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          Glyph && /* @__PURE__ */ jsxRuntime.jsx(Glyph, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: modelLabel })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tokens" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              formatTokens(usedTokens),
+              " / ",
+              formatTokens(maxTokens)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) })
+        ] }),
+        messageCount != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Messages" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageCount })
+        ] }),
+        cost != null && cost > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Est. cost" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "$",
+            cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+exports.ContextUsage = ContextUsage;
+//# sourceMappingURL=ContextUsage.cjs.map

package/dist/data/chat/ContextUsage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextUsage.cjs","sources":["../../../src/data/chat/ContextUsage.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\n\nexport type ContextUsageProps = {\n  usedTokens: number;\n  maxTokens: number;\n  messageCount?: number;\n  modelLabel?: string;\n  /** Optional model glyph rendered beside the label. */\n  modelIcon?: ComponentType<{ className?: string }>;\n  cost?: number;\n  className?: string;\n};\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;\n  return String(n);\n}\n\nfunction tone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\n/** A compact token/cost gauge: a circular percentage indicator that opens a\n *  popover with the model, token usage and estimated cost. Display-only — the\n *  caller feeds the numbers (clicky's backend does not yet emit token usage, so\n *  wiring real values is a follow-on). */\nexport function ContextUsage({\n  usedTokens,\n  maxTokens,\n  messageCount,\n  modelLabel,\n  modelIcon: Glyph,\n  cost,\n  className = \"\",\n}: ContextUsageProps) {\n  const pct = maxTokens > 0 ? Math.min(100, Math.round((usedTokens / maxTokens) * 100)) : 0;\n  const radius = 8;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (pct / 100) * circumference;\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 p-3\"\n      trigger={\n        <button\n          type=\"button\"\n          title=\"Context usage\"\n          className=\"flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\"\n        >\n          {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", tone(pct))}>\n            <circle cx=\"10\" cy=\"10\" r={radius} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n            <circle\n              cx=\"10\"\n              cy=\"10\"\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n              transform=\"rotate(-90 10 10)\"\n            />\n            <text x=\"10\" y=\"10\" textAnchor=\"middle\" dominantBaseline=\"central\" fontSize=\"6\" fill=\"currentColor\" fontWeight=\"600\">\n              {pct}\n            </text>\n          </svg>\n        </button>\n      }\n    >\n      {() => (\n        <div className=\"space-y-2.5 text-xs\">\n          <div className=\"text-xs font-semibold\">Context Usage</div>\n          {modelLabel && (\n            <div className=\"flex items-center gap-2\">\n              {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n              <span className=\"font-medium\">{modelLabel}</span>\n            </div>\n          )}\n          <div>\n            <div className=\"mb-1 flex justify-between\">\n              <span className=\"text-muted-foreground\">Tokens</span>\n              <span>\n                {formatTokens(usedTokens)} / {formatTokens(maxTokens)}\n              </span>\n            </div>\n            <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n              <div className={cn(\"h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n            </div>\n          </div>\n          {messageCount != null && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Messages</span>\n              <span>{messageCount}</span>\n            </div>\n          )}\n          {cost != null && cost > 0 && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Est. cost</span>\n              <span>${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn"],"mappings":"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"}

package/dist/data/chat/ContextUsage.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+export type ContextUsageProps = {
+    usedTokens: number;
+    maxTokens: number;
+    messageCount?: number;
+    modelLabel?: string;
+    /** Optional model glyph rendered beside the label. */
+    modelIcon?: ComponentType<{
+        className?: string;
+    }>;
+    cost?: number;
+    className?: string;
+};
+/** A compact token/cost gauge: a circular percentage indicator that opens a
+ *  popover with the model, token usage and estimated cost. Display-only — the
+ *  caller feeds the numbers (clicky's backend does not yet emit token usage, so
+ *  wiring real values is a follow-on). */
+export declare function ContextUsage({ usedTokens, maxTokens, messageCount, modelLabel, modelIcon: Glyph, cost, className, }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextUsage.d.ts.map

package/dist/data/chat/ContextUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextUsage.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ContextUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;0CAG0C;AAC1C,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EAAE,KAAK,EAChB,IAAI,EACJ,SAAc,GACf,EAAE,iBAAiB,2CA2EnB"}

package/dist/data/chat/ContextUsage.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { DropdownMenu } from "../../overlay/DropdownMenu.js";
+function formatTokens(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+  return String(n);
+}
+function tone(pct) {
+  return pct > 80 ? "text-red-500" : pct > 50 ? "text-amber-500" : "text-emerald-500";
+}
+function barTone(pct) {
+  return pct > 80 ? "bg-red-500" : pct > 50 ? "bg-amber-500" : "bg-emerald-500";
+}
+function ContextUsage({
+  usedTokens,
+  maxTokens,
+  messageCount,
+  modelLabel,
+  modelIcon: Glyph,
+  cost,
+  className = ""
+}) {
+  const pct = maxTokens > 0 ? Math.min(100, Math.round(usedTokens / maxTokens * 100)) : 0;
+  const radius = 8;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - pct / 100 * circumference;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "right",
+      className,
+      menuClassName: "w-64 p-3",
+      trigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          title: "Context usage",
+          className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          children: [
+            Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", className: cn("shrink-0", tone(pct)), children: [
+              /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: radius, fill: "none", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.15" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "10",
+                  cy: "10",
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round",
+                  transform: "rotate(-90 10 10)"
+                }
+              ),
+              /* @__PURE__ */ jsx("text", { x: "10", y: "10", textAnchor: "middle", dominantBaseline: "central", fontSize: "6", fill: "currentColor", fontWeight: "600", children: pct })
+            ] })
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxs("div", { className: "space-y-2.5 text-xs", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: "Context Usage" }),
+        modelLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          Glyph && /* @__PURE__ */ jsx(Glyph, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: modelLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-1 flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Tokens" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              formatTokens(usedTokens),
+              " / ",
+              formatTokens(maxTokens)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx("div", { className: cn("h-full rounded-full transition-all", barTone(pct)), style: { width: `${pct}%` } }) })
+        ] }),
+        messageCount != null && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Messages" }),
+          /* @__PURE__ */ jsx("span", { children: messageCount })
+        ] }),
+        cost != null && cost > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Est. cost" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "$",
+            cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  ContextUsage
+};
+//# sourceMappingURL=ContextUsage.js.map

package/dist/data/chat/ContextUsage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextUsage.js","sources":["../../../src/data/chat/ContextUsage.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\n\nexport type ContextUsageProps = {\n  usedTokens: number;\n  maxTokens: number;\n  messageCount?: number;\n  modelLabel?: string;\n  /** Optional model glyph rendered beside the label. */\n  modelIcon?: ComponentType<{ className?: string }>;\n  cost?: number;\n  className?: string;\n};\n\nfunction formatTokens(n: number): string {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;\n  return String(n);\n}\n\nfunction tone(pct: number): string {\n  return pct > 80 ? \"text-red-500\" : pct > 50 ? \"text-amber-500\" : \"text-emerald-500\";\n}\n\nfunction barTone(pct: number): string {\n  return pct > 80 ? \"bg-red-500\" : pct > 50 ? \"bg-amber-500\" : \"bg-emerald-500\";\n}\n\n/** A compact token/cost gauge: a circular percentage indicator that opens a\n *  popover with the model, token usage and estimated cost. Display-only — the\n *  caller feeds the numbers (clicky's backend does not yet emit token usage, so\n *  wiring real values is a follow-on). */\nexport function ContextUsage({\n  usedTokens,\n  maxTokens,\n  messageCount,\n  modelLabel,\n  modelIcon: Glyph,\n  cost,\n  className = \"\",\n}: ContextUsageProps) {\n  const pct = maxTokens > 0 ? Math.min(100, Math.round((usedTokens / maxTokens) * 100)) : 0;\n  const radius = 8;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (pct / 100) * circumference;\n\n  return (\n    <DropdownMenu\n      align=\"right\"\n      className={className}\n      menuClassName=\"w-64 p-3\"\n      trigger={\n        <button\n          type=\"button\"\n          title=\"Context usage\"\n          className=\"flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\"\n        >\n          {Glyph && <Glyph className=\"size-3.5 shrink-0\" />}\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" className={cn(\"shrink-0\", tone(pct))}>\n            <circle cx=\"10\" cy=\"10\" r={radius} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.15\" />\n            <circle\n              cx=\"10\"\n              cy=\"10\"\n              r={radius}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n              transform=\"rotate(-90 10 10)\"\n            />\n            <text x=\"10\" y=\"10\" textAnchor=\"middle\" dominantBaseline=\"central\" fontSize=\"6\" fill=\"currentColor\" fontWeight=\"600\">\n              {pct}\n            </text>\n          </svg>\n        </button>\n      }\n    >\n      {() => (\n        <div className=\"space-y-2.5 text-xs\">\n          <div className=\"text-xs font-semibold\">Context Usage</div>\n          {modelLabel && (\n            <div className=\"flex items-center gap-2\">\n              {Glyph && <Glyph className=\"size-4 shrink-0\" />}\n              <span className=\"font-medium\">{modelLabel}</span>\n            </div>\n          )}\n          <div>\n            <div className=\"mb-1 flex justify-between\">\n              <span className=\"text-muted-foreground\">Tokens</span>\n              <span>\n                {formatTokens(usedTokens)} / {formatTokens(maxTokens)}\n              </span>\n            </div>\n            <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n              <div className={cn(\"h-full rounded-full transition-all\", barTone(pct))} style={{ width: `${pct}%` }} />\n            </div>\n          </div>\n          {messageCount != null && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Messages</span>\n              <span>{messageCount}</span>\n            </div>\n          )}\n          {cost != null && cost > 0 && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">Est. cost</span>\n              <span>${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}</span>\n            </div>\n          )}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/chat/ModelSelector.cjs

@@ -1,33 +1,47 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const select = require("../../components/select.cjs");
+const Combobox = require("../../components/Combobox.cjs");
 const utils = require("../../lib/utils.cjs");
+const providerIcons = require("./provider-icons.cjs");
 function ModelSelector({ models, value, onChange, className }) {
   if (models.length === 0) return null;
+  const selected = models.find((m) => m.id === value);
+  const SelectedGlyph = providerIcons.providerIcon(selected == null ? void 0 : selected.provider);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    select.Select,
+    Combobox.Combobox,
     {
-      "aria-label": "Model",
+      ariaLabel: "Model",
       value: value ?? "",
-      onChange: (e) => onChange(e.target.value),
-      className: utils.cn("h-8 text-xs", className),
-      options: models.map((m) => ({
-        value: m.id,
-        label: m.reasoning ? `${m.label} ·🧠` : m.label,
-        disabled: m.configured === false
-      }))
+      onChange,
+      allowCustomValue: false,
+      required: true,
+      size: "sm",
+      className: utils.cn("w-48", className),
+      ...SelectedGlyph ? { prefix: /* @__PURE__ */ jsxRuntime.jsx(SelectedGlyph, { className: "size-4" }) } : {},
+      options: models.map((m) => {
+        const Icon = providerIcons.providerIcon(m.provider);
+        return {
+          value: m.id,
+          label: m.reasoning ? `${m.label} ·🧠` : m.label,
+          ...Icon ? { icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) } : {},
+          disabled: m.configured === false
+        };
+      })
     }
   );
 }
 function EffortSelector({ efforts, value, onChange, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    select.Select,
+    Combobox.Combobox,
     {
-      "aria-label": "Reasoning effort",
+      ariaLabel: "Reasoning effort",
       value: value ?? "",
-      onChange: (e) => onChange(e.target.value),
-      className: utils.cn("h-8 w-auto text-xs", className),
+      onChange,
+      allowCustomValue: false,
+      required: true,
+      size: "sm",
+      className: utils.cn("w-36", className),
       options: [
         { value: "", label: "No reasoning" },
         ...efforts.map((e) => {

package/dist/data/chat/ModelSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.cjs","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Select } from \"../../components/select\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A model picker driven by the backend model menu. Models whose provider is\n *  not configured are disabled rather than hidden, so the menu communicates\n *  what would be available with the right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  return (\n    <Select\n      aria-label=\"Model\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 text-xs\", className)}\n      options={models.map((m) => ({\n        value: m.id,\n        label: m.reasoning ? `${m.label} ·🧠` : m.label,\n        disabled: m.configured === false,\n      }))}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Select\n      aria-label=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 w-auto text-xs\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":["jsx","Select","cn"],"mappings":";;;;;AAeO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAWC,MAAAA,GAAG,eAAe,SAAS;AAAA,MACtC,SAAS,OAAO,IAAI,CAAC,OAAO;AAAA,QAC1B,OAAO,EAAE;AAAA,QACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,QAC1C,UAAU,EAAE,eAAe;AAAA,MAAA,EAC3B;AAAA,IAAA;AAAA,EAAA;AAGR;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACEF,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAWC,MAAAA,GAAG,sBAAsB,SAAS;AAAA,MAC7C,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;;;"}
+{"version":3,"file":"ModelSelector.cjs","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Combobox } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.reasoning ? `${m.label} ·🧠` : m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-36\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":["providerIcon","jsx","Combobox","cn"],"mappings":";;;;;;AAiBO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,WAAW,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AAClD,QAAM,gBAAgBA,cAAAA,aAAa,qCAAU,QAAQ;AACrD,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAI,gBAAgB,EAAE,QAAQF,+BAAC,iBAAc,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,MACxE,SAAS,OAAO,IAAI,CAAC,MAAM;AACzB,cAAM,OAAOD,cAAAA,aAAa,EAAE,QAAQ;AACpC,eAAO;AAAA,UACL,OAAO,EAAE;AAAA,UACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,UAC1C,GAAI,OAAO,EAAE,MAAMC,+BAAC,QAAK,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,UACnD,UAAU,EAAE,eAAe;AAAA,QAAA;AAAA,MAE/B,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,QAAQ,SAAS;AAAA,MAC/B,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;;;"}

package/dist/data/chat/ModelSelector.d.ts

@@ -6,9 +6,10 @@ export type ModelSelectorProps = {
     onChange: (id: string) => void;
     className?: string;
 };
-/** A model picker driven by the backend model menu. Models whose provider is
- *  not configured are disabled rather than hidden, so the menu communicates
- *  what would be available with the right API key. */
+/** A searchable model picker driven by the backend model menu, showing each
+ *  provider's brand icon. Models whose provider is not configured are disabled
+ *  rather than hidden, so the menu communicates what would be available with the
+ *  right API key. */
 export declare function ModelSelector({ models, value, onChange, className }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export type EffortSelectorProps = {
     efforts: string[];
@@ -17,6 +18,6 @@ export type EffortSelectorProps = {
     className?: string;
 };
 /** Reasoning-effort picker, shown only for reasoning-capable models. The empty
- *  value means "no extended thinking". */
+ *  value means "no extended thinking". Strict: only the listed options commit. */
 export declare function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModelSelector.d.ts.map

package/dist/data/chat/ModelSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ModelSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;sDAEsD;AACtD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,kDAevF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;0CAC0C;AAC1C,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAa1F"}
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ModelSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;qBAGqB;AACrB,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,kDAyBvF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;kFACkF;AAClF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAgB1F"}

package/dist/data/chat/ModelSelector.js

@@ -1,31 +1,45 @@
 import { jsx } from "react/jsx-runtime";
-import { Select } from "../../components/select.js";
+import { Combobox } from "../../components/Combobox.js";
 import { cn } from "../../lib/utils.js";
+import { providerIcon } from "./provider-icons.js";
 function ModelSelector({ models, value, onChange, className }) {
   if (models.length === 0) return null;
+  const selected = models.find((m) => m.id === value);
+  const SelectedGlyph = providerIcon(selected == null ? void 0 : selected.provider);
   return /* @__PURE__ */ jsx(
-    Select,
+    Combobox,
     {
-      "aria-label": "Model",
+      ariaLabel: "Model",
       value: value ?? "",
-      onChange: (e) => onChange(e.target.value),
-      className: cn("h-8 text-xs", className),
-      options: models.map((m) => ({
-        value: m.id,
-        label: m.reasoning ? `${m.label} ·🧠` : m.label,
-        disabled: m.configured === false
-      }))
+      onChange,
+      allowCustomValue: false,
+      required: true,
+      size: "sm",
+      className: cn("w-48", className),
+      ...SelectedGlyph ? { prefix: /* @__PURE__ */ jsx(SelectedGlyph, { className: "size-4" }) } : {},
+      options: models.map((m) => {
+        const Icon = providerIcon(m.provider);
+        return {
+          value: m.id,
+          label: m.reasoning ? `${m.label} ·🧠` : m.label,
+          ...Icon ? { icon: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) } : {},
+          disabled: m.configured === false
+        };
+      })
     }
   );
 }
 function EffortSelector({ efforts, value, onChange, className }) {
   return /* @__PURE__ */ jsx(
-    Select,
+    Combobox,
     {
-      "aria-label": "Reasoning effort",
+      ariaLabel: "Reasoning effort",
       value: value ?? "",
-      onChange: (e) => onChange(e.target.value),
-      className: cn("h-8 w-auto text-xs", className),
+      onChange,
+      allowCustomValue: false,
+      required: true,
+      size: "sm",
+      className: cn("w-36", className),
       options: [
         { value: "", label: "No reasoning" },
         ...efforts.map((e) => {

package/dist/data/chat/ModelSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelSelector.js","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Select } from \"../../components/select\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A model picker driven by the backend model menu. Models whose provider is\n *  not configured are disabled rather than hidden, so the menu communicates\n *  what would be available with the right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  return (\n    <Select\n      aria-label=\"Model\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 text-xs\", className)}\n      options={models.map((m) => ({\n        value: m.id,\n        label: m.reasoning ? `${m.label} ·🧠` : m.label,\n        disabled: m.configured === false,\n      }))}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Select\n      aria-label=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 w-auto text-xs\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC,SAAS,OAAO,IAAI,CAAC,OAAO;AAAA,QAC1B,OAAO,EAAE;AAAA,QACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,QAC1C,UAAU,EAAE,eAAe;AAAA,MAAA,EAC3B;AAAA,IAAA;AAAA,EAAA;AAGR;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC7C,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ModelSelector.js","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Combobox } from \"../../components/Combobox\";\nimport { cn } from \"../../lib/utils\";\nimport { providerIcon } from \"./provider-icons\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A searchable model picker driven by the backend model menu, showing each\n *  provider's brand icon. Models whose provider is not configured are disabled\n *  rather than hidden, so the menu communicates what would be available with the\n *  right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  const selected = models.find((m) => m.id === value);\n  const SelectedGlyph = providerIcon(selected?.provider);\n  return (\n    <Combobox\n      ariaLabel=\"Model\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-48\", className)}\n      {...(SelectedGlyph ? { prefix: <SelectedGlyph className=\"size-4\" /> } : {})}\n      options={models.map((m) => {\n        const Icon = providerIcon(m.provider);\n        return {\n          value: m.id,\n          label: m.reasoning ? `${m.label} ·🧠` : m.label,\n          ...(Icon ? { icon: <Icon className=\"size-4\" /> } : {}),\n          disabled: m.configured === false,\n        };\n      })}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". Strict: only the listed options commit. */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Combobox\n      ariaLabel=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={onChange}\n      allowCustomValue={false}\n      required\n      size=\"sm\"\n      className={cn(\"w-36\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,QAAM,WAAW,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AAClD,QAAM,gBAAgB,aAAa,qCAAU,QAAQ;AACrD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAI,gBAAgB,EAAE,QAAQ,oBAAC,iBAAc,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,MACxE,SAAS,OAAO,IAAI,CAAC,MAAM;AACzB,cAAM,OAAO,aAAa,EAAE,QAAQ;AACpC,eAAO;AAAA,UACL,OAAO,EAAE;AAAA,UACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,UAC1C,GAAI,OAAO,EAAE,MAAM,oBAAC,QAAK,WAAU,UAAS,EAAA,IAAO,CAAA;AAAA,UACnD,UAAU,EAAE,eAAe;AAAA,QAAA;AAAA,MAE/B,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA,kBAAkB;AAAA,MAClB,UAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC/B,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;"}

package/dist/data/chat/clickyOperationsToTools.cjs

@@ -14,12 +14,32 @@ function operationToTool(operation) {
   if (!operation.operationId) {
     return null;
   }
+  const meta = operation["x-clicky"];
+  const description = operation.description ?? operation.summary;
   return {
     name: operation.operationId,
-    description: operation.description ?? operation.summary,
+    label: toolLabel(operation),
+    ...(meta == null ? void 0 : meta.surface) ? { group: meta.surface } : {},
+    ...description ? { description } : {},
     inputSchema: buildInputSchema(operation)
   };
 }
+function toolLabel(operation) {
+  var _a, _b;
+  const meta = operation["x-clicky"];
+  const short = ((_a = meta == null ? void 0 : meta.actionName) == null ? void 0 : _a.trim()) || ((_b = meta == null ? void 0 : meta.verb) == null ? void 0 : _b.trim());
+  if (short && short !== "action") {
+    return short.charAt(0).toUpperCase() + short.slice(1);
+  }
+  if (operation.summary) {
+    return operation.summary;
+  }
+  return humanize(operation.operationId ?? "");
+}
+function humanize(operationId) {
+  const spaced = operationId.replace(/[_-]+/g, " ").replace(/([a-z\d])([A-Z])/g, "$1 $2");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
 function buildInputSchema(operation) {
   const properties = {};
   const required = [];

package/dist/data/chat/clickyOperationsToTools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"clickyOperationsToTools.cjs","sources":["../../../src/data/chat/clickyOperationsToTools.ts"],"sourcesContent":["import type {\n  OpenAPIOperation,\n  OpenAPIParameter,\n  OpenAPISchema,\n  ResolvedOperation,\n} from \"../../rpc/types\";\nimport type { ChatToolInputSchema, ChatToolMeta, JSONSchemaProperty } from \"./types\";\n\n/** Converts a clicky RPC operation catalog into AI-tool metadata for display\n *  and request scoping. Execution stays in the Go backend; this maps an\n *  operation's `operationId` → tool name, `summary`/`description` → description,\n *  and `parameters` + `requestBody` → a JSON-Schema input. Operations without an\n *  `operationId` are skipped (a tool needs a stable name). */\nexport function clickyOperationsToTools(operations: ResolvedOperation[]): ChatToolMeta[] {\n  const tools: ChatToolMeta[] = [];\n  for (const resolved of operations) {\n    const tool = operationToTool(resolved.operation);\n    if (tool) {\n      tools.push(tool);\n    }\n  }\n  return tools;\n}\n\nexport function operationToTool(operation: OpenAPIOperation): ChatToolMeta | null {\n  if (!operation.operationId) {\n    return null;\n  }\n  return {\n    name: operation.operationId,\n    description: operation.description ?? operation.summary,\n    inputSchema: buildInputSchema(operation),\n  };\n}\n\nfunction buildInputSchema(operation: OpenAPIOperation): ChatToolInputSchema {\n  const properties: Record<string, JSONSchemaProperty> = {};\n  const required: string[] = [];\n\n  for (const param of operation.parameters ?? []) {\n    properties[param.name] = parameterToProperty(param);\n    if (param.required) {\n      required.push(param.name);\n    }\n  }\n\n  const body = requestBodySchema(operation);\n  if (body?.properties) {\n    for (const [name, schema] of Object.entries(body.properties)) {\n      properties[name] = schemaToProperty(schema);\n    }\n  }\n\n  return { type: \"object\", properties, required };\n}\n\nfunction parameterToProperty(param: OpenAPIParameter): JSONSchemaProperty {\n  const prop = schemaToProperty(param.schema);\n  if (param.description && !prop.description) {\n    prop.description = param.description;\n  }\n  return prop;\n}\n\nfunction schemaToProperty(schema: OpenAPISchema | undefined): JSONSchemaProperty {\n  if (!schema) {\n    return { type: \"string\" };\n  }\n  const prop: JSONSchemaProperty = { type: schema.type ?? \"string\" };\n  if (schema.description !== undefined) {\n    prop.description = schema.description;\n  }\n  if (schema.enum !== undefined) {\n    prop.enum = schema.enum;\n  }\n  if (schema.default !== undefined) {\n    prop.default = schema.default;\n  }\n  return prop;\n}\n\nfunction requestBodySchema(operation: OpenAPIOperation): OpenAPISchema | undefined {\n  const content = operation.requestBody?.content;\n  if (!content) {\n    return undefined;\n  }\n  return content[\"application/json\"]?.schema ?? Object.values(content)[0]?.schema;\n}\n"],"names":[],"mappings":";;AAaO,SAAS,wBAAwB,YAAiD;AACvF,QAAM,QAAwB,CAAA;AAC9B,aAAW,YAAY,YAAY;AACjC,UAAM,OAAO,gBAAgB,SAAS,SAAS;AAC/C,QAAI,MAAM;AACR,YAAM,KAAK,IAAI;AAAA,IACjB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,gBAAgB,WAAkD;AAChF,MAAI,CAAC,UAAU,aAAa;AAC1B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,UAAU;AAAA,IAChB,aAAa,UAAU,eAAe,UAAU;AAAA,IAChD,aAAa,iBAAiB,SAAS;AAAA,EAAA;AAE3C;AAEA,SAAS,iBAAiB,WAAkD;AAC1E,QAAM,aAAiD,CAAA;AACvD,QAAM,WAAqB,CAAA;AAE3B,aAAW,SAAS,UAAU,cAAc,CAAA,GAAI;AAC9C,eAAW,MAAM,IAAI,IAAI,oBAAoB,KAAK;AAClD,QAAI,MAAM,UAAU;AAClB,eAAS,KAAK,MAAM,IAAI;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,OAAO,kBAAkB,SAAS;AACxC,MAAI,6BAAM,YAAY;AACpB,eAAW,CAAC,MAAM,MAAM,KAAK,OAAO,QAAQ,KAAK,UAAU,GAAG;AAC5D,iBAAW,IAAI,IAAI,iBAAiB,MAAM;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,UAAU,YAAY,SAAA;AACvC;AAEA,SAAS,oBAAoB,OAA6C;AACxE,QAAM,OAAO,iBAAiB,MAAM,MAAM;AAC1C,MAAI,MAAM,eAAe,CAAC,KAAK,aAAa;AAC1C,SAAK,cAAc,MAAM;AAAA,EAC3B;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,QAAuD;AAC/E,MAAI,CAAC,QAAQ;AACX,WAAO,EAAE,MAAM,SAAA;AAAA,EACjB;AACA,QAAM,OAA2B,EAAE,MAAM,OAAO,QAAQ,SAAA;AACxD,MAAI,OAAO,gBAAgB,QAAW;AACpC,SAAK,cAAc,OAAO;AAAA,EAC5B;AACA,MAAI,OAAO,SAAS,QAAW;AAC7B,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,MAAI,OAAO,YAAY,QAAW;AAChC,SAAK,UAAU,OAAO;AAAA,EACxB;AACA,SAAO;AACT;AAEA,SAAS,kBAAkB,WAAwD;;AACjF,QAAM,WAAU,eAAU,gBAAV,mBAAuB;AACvC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AACA,WAAO,aAAQ,kBAAkB,MAA1B,mBAA6B,aAAU,YAAO,OAAO,OAAO,EAAE,CAAC,MAAxB,mBAA2B;AAC3E;;;"}
+{"version":3,"file":"clickyOperationsToTools.cjs","sources":["../../../src/data/chat/clickyOperationsToTools.ts"],"sourcesContent":["import type {\n  OpenAPIOperation,\n  OpenAPIParameter,\n  OpenAPISchema,\n  ResolvedOperation,\n} from \"../../rpc/types\";\nimport type { ChatToolInputSchema, JSONSchemaProperty, ToolMeta } from \"./types\";\n\n/** Converts a clicky RPC operation catalog into AI-tool metadata for display\n *  and request scoping. Execution stays in the Go backend; this maps an\n *  operation's `operationId` → tool name, a short `x-clicky` verb/action →\n *  label, the `x-clicky` surface → group, `summary`/`description` → description,\n *  and `parameters` + `requestBody` → a JSON-Schema input. Operations without an\n *  `operationId` are skipped (a tool needs a stable name). */\nexport function clickyOperationsToTools(operations: ResolvedOperation[]): ToolMeta[] {\n  const tools: ToolMeta[] = [];\n  for (const resolved of operations) {\n    const tool = operationToTool(resolved.operation);\n    if (tool) {\n      tools.push(tool);\n    }\n  }\n  return tools;\n}\n\nexport function operationToTool(operation: OpenAPIOperation): ToolMeta | null {\n  if (!operation.operationId) {\n    return null;\n  }\n  const meta = operation[\"x-clicky\"];\n  const description = operation.description ?? operation.summary;\n  return {\n    name: operation.operationId,\n    label: toolLabel(operation),\n    ...(meta?.surface ? { group: meta.surface } : {}),\n    ...(description ? { description } : {}),\n    inputSchema: buildInputSchema(operation),\n  };\n}\n\n/** A concise popover label: the clicky action/verb (capitalized) when present,\n *  else the operation summary, else a humanized operationId. Mirrors the intent\n *  of rpc/clickyMetadata.ts `surfaceActionLabel`. */\nfunction toolLabel(operation: OpenAPIOperation): string {\n  const meta = operation[\"x-clicky\"];\n  const short = meta?.actionName?.trim() || meta?.verb?.trim();\n  if (short && short !== \"action\") {\n    return short.charAt(0).toUpperCase() + short.slice(1);\n  }\n  if (operation.summary) {\n    return operation.summary;\n  }\n  return humanize(operation.operationId ?? \"\");\n}\n\nfunction humanize(operationId: string): string {\n  const spaced = operationId.replace(/[_-]+/g, \" \").replace(/([a-z\\d])([A-Z])/g, \"$1 $2\");\n  return spaced.charAt(0).toUpperCase() + spaced.slice(1);\n}\n\nfunction buildInputSchema(operation: OpenAPIOperation): ChatToolInputSchema {\n  const properties: Record<string, JSONSchemaProperty> = {};\n  const required: string[] = [];\n\n  for (const param of operation.parameters ?? []) {\n    properties[param.name] = parameterToProperty(param);\n    if (param.required) {\n      required.push(param.name);\n    }\n  }\n\n  const body = requestBodySchema(operation);\n  if (body?.properties) {\n    for (const [name, schema] of Object.entries(body.properties)) {\n      properties[name] = schemaToProperty(schema);\n    }\n  }\n\n  return { type: \"object\", properties, required };\n}\n\nfunction parameterToProperty(param: OpenAPIParameter): JSONSchemaProperty {\n  const prop = schemaToProperty(param.schema);\n  if (param.description && !prop.description) {\n    prop.description = param.description;\n  }\n  return prop;\n}\n\nfunction schemaToProperty(schema: OpenAPISchema | undefined): JSONSchemaProperty {\n  if (!schema) {\n    return { type: \"string\" };\n  }\n  const prop: JSONSchemaProperty = { type: schema.type ?? \"string\" };\n  if (schema.description !== undefined) {\n    prop.description = schema.description;\n  }\n  if (schema.enum !== undefined) {\n    prop.enum = schema.enum;\n  }\n  if (schema.default !== undefined) {\n    prop.default = schema.default;\n  }\n  return prop;\n}\n\nfunction requestBodySchema(operation: OpenAPIOperation): OpenAPISchema | undefined {\n  const content = operation.requestBody?.content;\n  if (!content) {\n    return undefined;\n  }\n  return content[\"application/json\"]?.schema ?? Object.values(content)[0]?.schema;\n}\n"],"names":[],"mappings":";;AAcO,SAAS,wBAAwB,YAA6C;AACnF,QAAM,QAAoB,CAAA;AAC1B,aAAW,YAAY,YAAY;AACjC,UAAM,OAAO,gBAAgB,SAAS,SAAS;AAC/C,QAAI,MAAM;AACR,YAAM,KAAK,IAAI;AAAA,IACjB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,gBAAgB,WAA8C;AAC5E,MAAI,CAAC,UAAU,aAAa;AAC1B,WAAO;AAAA,EACT;AACA,QAAM,OAAO,UAAU,UAAU;AACjC,QAAM,cAAc,UAAU,eAAe,UAAU;AACvD,SAAO;AAAA,IACL,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU,SAAS;AAAA,IAC1B,IAAI,6BAAM,WAAU,EAAE,OAAO,KAAK,QAAA,IAAY,CAAA;AAAA,IAC9C,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,IACpC,aAAa,iBAAiB,SAAS;AAAA,EAAA;AAE3C;AAKA,SAAS,UAAU,WAAqC;;AACtD,QAAM,OAAO,UAAU,UAAU;AACjC,QAAM,UAAQ,kCAAM,eAAN,mBAAkB,aAAU,kCAAM,SAAN,mBAAY;AACtD,MAAI,SAAS,UAAU,UAAU;AAC/B,WAAO,MAAM,OAAO,CAAC,EAAE,gBAAgB,MAAM,MAAM,CAAC;AAAA,EACtD;AACA,MAAI,UAAU,SAAS;AACrB,WAAO,UAAU;AAAA,EACnB;AACA,SAAO,SAAS,UAAU,eAAe,EAAE;AAC7C;AAEA,SAAS,SAAS,aAA6B;AAC7C,QAAM,SAAS,YAAY,QAAQ,UAAU,GAAG,EAAE,QAAQ,qBAAqB,OAAO;AACtF,SAAO,OAAO,OAAO,CAAC,EAAE,gBAAgB,OAAO,MAAM,CAAC;AACxD;AAEA,SAAS,iBAAiB,WAAkD;AAC1E,QAAM,aAAiD,CAAA;AACvD,QAAM,WAAqB,CAAA;AAE3B,aAAW,SAAS,UAAU,cAAc,CAAA,GAAI;AAC9C,eAAW,MAAM,IAAI,IAAI,oBAAoB,KAAK;AAClD,QAAI,MAAM,UAAU;AAClB,eAAS,KAAK,MAAM,IAAI;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,OAAO,kBAAkB,SAAS;AACxC,MAAI,6BAAM,YAAY;AACpB,eAAW,CAAC,MAAM,MAAM,KAAK,OAAO,QAAQ,KAAK,UAAU,GAAG;AAC5D,iBAAW,IAAI,IAAI,iBAAiB,MAAM;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,UAAU,YAAY,SAAA;AACvC;AAEA,SAAS,oBAAoB,OAA6C;AACxE,QAAM,OAAO,iBAAiB,MAAM,MAAM;AAC1C,MAAI,MAAM,eAAe,CAAC,KAAK,aAAa;AAC1C,SAAK,cAAc,MAAM;AAAA,EAC3B;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,QAAuD;AAC/E,MAAI,CAAC,QAAQ;AACX,WAAO,EAAE,MAAM,SAAA;AAAA,EACjB;AACA,QAAM,OAA2B,EAAE,MAAM,OAAO,QAAQ,SAAA;AACxD,MAAI,OAAO,gBAAgB,QAAW;AACpC,SAAK,cAAc,OAAO;AAAA,EAC5B;AACA,MAAI,OAAO,SAAS,QAAW;AAC7B,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,MAAI,OAAO,YAAY,QAAW;AAChC,SAAK,UAAU,OAAO;AAAA,EACxB;AACA,SAAO;AACT;AAEA,SAAS,kBAAkB,WAAwD;;AACjF,QAAM,WAAU,eAAU,gBAAV,mBAAuB;AACvC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AACA,WAAO,aAAQ,kBAAkB,MAA1B,mBAA6B,aAAU,YAAO,OAAO,OAAO,EAAE,CAAC,MAAxB,mBAA2B;AAC3E;;;"}

package/dist/data/chat/clickyOperationsToTools.d.ts

@@ -1,10 +1,11 @@
 import { OpenAPIOperation, ResolvedOperation } from '../../rpc/types';
-import { ChatToolMeta } from './types';
+import { ToolMeta } from './types';
 /** Converts a clicky RPC operation catalog into AI-tool metadata for display
  *  and request scoping. Execution stays in the Go backend; this maps an
- *  operation's `operationId` → tool name, `summary`/`description` → description,
+ *  operation's `operationId` → tool name, a short `x-clicky` verb/action →
+ *  label, the `x-clicky` surface → group, `summary`/`description` → description,
  *  and `parameters` + `requestBody` → a JSON-Schema input. Operations without an
  *  `operationId` are skipped (a tool needs a stable name). */
-export declare function clickyOperationsToTools(operations: ResolvedOperation[]): ChatToolMeta[];
-export declare function operationToTool(operation: OpenAPIOperation): ChatToolMeta | null;
+export declare function clickyOperationsToTools(operations: ResolvedOperation[]): ToolMeta[];
+export declare function operationToTool(operation: OpenAPIOperation): ToolMeta | null;
 //# sourceMappingURL=clickyOperationsToTools.d.ts.map

package/dist/data/chat/clickyOperationsToTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clickyOperationsToTools.d.ts","sourceRoot":"","sources":["../../../src/data/chat/clickyOperationsToTools.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAGhB,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAuB,YAAY,EAAsB,MAAM,SAAS,CAAC;AAErF;;;;8DAI8D;AAC9D,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,iBAAiB,EAAE,GAAG,YAAY,EAAE,CASvF;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAShF"}
+{"version":3,"file":"clickyOperationsToTools.d.ts","sourceRoot":"","sources":["../../../src/data/chat/clickyOperationsToTools.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAGhB,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAA2C,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEjF;;;;;8DAK8D;AAC9D,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,CASnF;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,gBAAgB,GAAG,QAAQ,GAAG,IAAI,CAa5E"}