@agent-native/core 0.14.8 → 0.15.1

package/dist/client/extensions/ToolEditor.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { agentNativePath } from "../api-path.js";
+import { useState, useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Link, useNavigate } from "react-router";
+import { IconArrowLeft, IconDeviceFloppy, IconDots, IconTrash, IconX, } from "@tabler/icons-react";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
+import { cn } from "../utils.js";
+export function ToolEditor({ toolId }) {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const isEdit = !!toolId;
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [content, setContent] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const { data: slots = [] } = useQuery({
+        queryKey: ["tool-slots", toolId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/slots/tool/${toolId}`));
+            if (!res.ok)
+                return [];
+            return res.json();
+        },
+        enabled: isEdit && menuOpen,
+    });
+    const { data: existingTool } = useQuery({
+        queryKey: ["tool", toolId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/tools/${toolId}`));
+            if (!res.ok)
+                throw new Error("Failed to fetch tool");
+            return res.json();
+        },
+        enabled: isEdit,
+    });
+    useEffect(() => {
+        if (existingTool) {
+            setName(existingTool.name ?? "");
+            setDescription(existingTool.description ?? "");
+            setContent(existingTool.content ?? "");
+        }
+    }, [existingTool]);
+    const handleSave = async () => {
+        if (!name.trim())
+            return;
+        setSaving(true);
+        try {
+            const body = JSON.stringify({
+                name: name.trim(),
+                description: description.trim() || undefined,
+                content,
+            });
+            if (isEdit) {
+                const res = await fetch(agentNativePath(`/_agent-native/tools/${toolId}`), {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body,
+                });
+                if (!res.ok)
+                    throw new Error("Update failed");
+                queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
+                queryClient.invalidateQueries({ queryKey: ["tools"] });
+                navigate(`/tools/${toolId}`);
+            }
+            else {
+                const res = await fetch(agentNativePath("/_agent-native/tools"), {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body,
+                });
+                if (!res.ok)
+                    throw new Error("Create failed");
+                const created = await res.json();
+                queryClient.invalidateQueries({ queryKey: ["tools"] });
+                navigate(`/tools/${created.id}`);
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleDelete = async () => {
+        if (!toolId)
+            return;
+        setDeleting(true);
+        try {
+            const prev = queryClient.getQueryData(["tools"]);
+            queryClient.setQueryData(["tools"], (old) => (old ?? []).filter((t) => t.id !== toolId));
+            const res = await fetch(agentNativePath(`/_agent-native/tools/${toolId}`), {
+                method: "DELETE",
+            });
+            if (!res.ok) {
+                if (prev)
+                    queryClient.setQueryData(["tools"], prev);
+                throw new Error("Delete failed");
+            }
+            queryClient.invalidateQueries({ queryKey: ["tools"] });
+            slots.forEach((s) => queryClient.invalidateQueries({
+                queryKey: ["slot-installs", s.slotId],
+            }));
+            navigate("/tools");
+        }
+        finally {
+            setDeleting(false);
+            setConfirmingDelete(false);
+            setMenuOpen(false);
+        }
+    };
+    const handleRemoveFromSlot = async (slotId) => {
+        if (!toolId)
+            return;
+        try {
+            await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(toolId)}`), { method: "DELETE" });
+        }
+        finally {
+            queryClient.invalidateQueries({ queryKey: ["slot-installs", slotId] });
+        }
+    };
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("header", { className: "flex items-center justify-between border-b px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Link, { to: isEdit ? `/tools/${toolId}` : "/tools", className: "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground", "aria-label": "Back", children: _jsx(IconArrowLeft, { className: "h-4 w-4" }) }), _jsx("h1", { className: "text-sm font-semibold", children: isEdit ? "Edit Tool" : "New Tool" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleSave, disabled: saving || !name.trim(), className: cn("inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90", (saving || !name.trim()) && "opacity-60"), children: [_jsx(IconDeviceFloppy, { className: "h-3.5 w-3.5" }), saving ? "Saving..." : isEdit ? "Save" : "Create"] }), isEdit && (_jsxs(Popover, { open: menuOpen, onOpenChange: (o) => {
+                                    setMenuOpen(o);
+                                    if (!o)
+                                        setConfirmingDelete(false);
+                                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground", title: "More options", "aria-label": "More options", children: _jsx(IconDots, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { align: "end", sideOffset: 4, className: "w-72 p-0", children: !confirmingDelete ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "px-3 py-2 border-b border-border/40", children: [_jsx("p", { className: "text-[12px] font-medium", children: "Appears in" }), slots.length === 0 ? (_jsx("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: "Not installed in any widget areas. Ask the agent to add it somewhere." })) : (_jsxs("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: ["This tool can render in ", slots.length, " widget area", slots.length === 1 ? "" : "s", "."] }))] }), slots.length > 0 && (_jsx("div", { className: "max-h-48 overflow-y-auto py-1", children: slots.map((s) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-[12px]", children: [_jsx("span", { className: "flex-1 truncate font-mono text-[11px] text-muted-foreground", children: s.slotId }), _jsx("button", { type: "button", onClick: () => handleRemoveFromSlot(s.slotId), className: "rounded p-1 text-muted-foreground/60 hover:bg-accent hover:text-foreground cursor-pointer", title: "Remove from this widget area (for me)", "aria-label": "Remove from this widget area", children: _jsx(IconX, { className: "h-3.5 w-3.5" }) })] }, s.id))) })), _jsx("div", { className: "border-t border-border/40 p-1", children: _jsxs("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] text-destructive hover:bg-destructive/10 cursor-pointer text-left", children: [_jsx(IconTrash, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Delete tool\u2026" })] }) })] })) : (_jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsxs("p", { className: "text-[12px]", children: ["Delete ", _jsx("span", { className: "font-medium", children: name }), "? This removes the tool everywhere, for everyone it's shared with."] }), _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => setConfirmingDelete(false), className: "rounded-md px-2 py-1 text-[12px] hover:bg-accent cursor-pointer", children: "Cancel" }), _jsx("button", { type: "button", onClick: handleDelete, disabled: deleting, className: cn("rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer", deleting && "opacity-60"), children: deleting ? "Deleting…" : "Delete" })] })] })) })] }))] })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex w-1/2 flex-col gap-4 overflow-auto border-r p-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-foreground", children: "Name" }), _jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "My Tool", className: "h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-foreground", children: "Description" }), _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), placeholder: "What does this tool do?", rows: 2, className: "w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" })] }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsx("label", { className: "mb-1.5 block text-sm font-medium text-foreground", children: "Content" }), _jsx("textarea", { value: content, onChange: (e) => setContent(e.target.value), placeholder: "<html>...</html>", className: "flex-1 resize-none rounded-md border border-input bg-background p-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background", spellCheck: false })] })] }), _jsx("div", { className: "w-1/2", children: content ? (_jsx("iframe", { srcDoc: content, className: "h-full w-full border-0", sandbox: "allow-scripts allow-forms", title: "Tool preview" })) : (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Preview will appear here" })) })] })] }));
+}
+//# sourceMappingURL=ToolEditor.js.map

package/dist/client/extensions/ToolEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolEditor.js","sourceRoot":"","sources":["../../../src/client/extensions/ToolEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport { useState, useEffect } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { Link, useNavigate } from \"react-router\";\nimport {\n  IconArrowLeft,\n  IconDeviceFloppy,\n  IconDots,\n  IconTrash,\n  IconX,\n} from \"@tabler/icons-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../components/ui/popover.js\";\nimport { cn } from \"../utils.js\";\n\ninterface SlotDeclaration {\n  id: string;\n  toolId: string;\n  slotId: string;\n}\n\ninterface Tool {\n  id: string;\n  name: string;\n  description?: string;\n  content?: string;\n}\n\nexport interface ToolEditorProps {\n  toolId?: string;\n}\n\nexport function ToolEditor({ toolId }: ToolEditorProps) {\n  const navigate = useNavigate();\n  const queryClient = useQueryClient();\n  const isEdit = !!toolId;\n\n  const [name, setName] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [content, setContent] = useState(\"\");\n  const [saving, setSaving] = useState(false);\n  const [deleting, setDeleting] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [confirmingDelete, setConfirmingDelete] = useState(false);\n\n  const { data: slots = [] } = useQuery<SlotDeclaration[]>({\n    queryKey: [\"tool-slots\", toolId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(`/_agent-native/slots/tool/${toolId}`),\n      );\n      if (!res.ok) return [];\n      return res.json();\n    },\n    enabled: isEdit && menuOpen,\n  });\n\n  const { data: existingTool } = useQuery<Tool>({\n    queryKey: [\"tool\", toolId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(`/_agent-native/tools/${toolId}`),\n      );\n      if (!res.ok) throw new Error(\"Failed to fetch tool\");\n      return res.json();\n    },\n    enabled: isEdit,\n  });\n\n  useEffect(() => {\n    if (existingTool) {\n      setName(existingTool.name ?? \"\");\n      setDescription(existingTool.description ?? \"\");\n      setContent(existingTool.content ?? \"\");\n    }\n  }, [existingTool]);\n\n  const handleSave = async () => {\n    if (!name.trim()) return;\n    setSaving(true);\n    try {\n      const body = JSON.stringify({\n        name: name.trim(),\n        description: description.trim() || undefined,\n        content,\n      });\n\n      if (isEdit) {\n        const res = await fetch(\n          agentNativePath(`/_agent-native/tools/${toolId}`),\n          {\n            method: \"PUT\",\n            headers: { \"Content-Type\": \"application/json\" },\n            body,\n          },\n        );\n        if (!res.ok) throw new Error(\"Update failed\");\n        queryClient.invalidateQueries({ queryKey: [\"tool\", toolId] });\n        queryClient.invalidateQueries({ queryKey: [\"tools\"] });\n        navigate(`/tools/${toolId}`);\n      } else {\n        const res = await fetch(agentNativePath(\"/_agent-native/tools\"), {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body,\n        });\n        if (!res.ok) throw new Error(\"Create failed\");\n        const created = await res.json();\n        queryClient.invalidateQueries({ queryKey: [\"tools\"] });\n        navigate(`/tools/${created.id}`);\n      }\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const handleDelete = async () => {\n    if (!toolId) return;\n    setDeleting(true);\n    try {\n      const prev = queryClient.getQueryData<Tool[]>([\"tools\"]);\n      queryClient.setQueryData<Tool[]>([\"tools\"], (old) =>\n        (old ?? []).filter((t) => t.id !== toolId),\n      );\n\n      const res = await fetch(\n        agentNativePath(`/_agent-native/tools/${toolId}`),\n        {\n          method: \"DELETE\",\n        },\n      );\n      if (!res.ok) {\n        if (prev) queryClient.setQueryData([\"tools\"], prev);\n        throw new Error(\"Delete failed\");\n      }\n\n      queryClient.invalidateQueries({ queryKey: [\"tools\"] });\n      slots.forEach((s) =>\n        queryClient.invalidateQueries({\n          queryKey: [\"slot-installs\", s.slotId],\n        }),\n      );\n      navigate(\"/tools\");\n    } finally {\n      setDeleting(false);\n      setConfirmingDelete(false);\n      setMenuOpen(false);\n    }\n  };\n\n  const handleRemoveFromSlot = async (slotId: string) => {\n    if (!toolId) return;\n    try {\n      await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(toolId)}`,\n        ),\n        { method: \"DELETE\" },\n      );\n    } finally {\n      queryClient.invalidateQueries({ queryKey: [\"slot-installs\", slotId] });\n    }\n  };\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <header className=\"flex items-center justify-between border-b px-4 py-3\">\n        <div className=\"flex items-center gap-3\">\n          <Link\n            to={isEdit ? `/tools/${toolId}` : \"/tools\"}\n            className=\"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n            aria-label=\"Back\"\n          >\n            <IconArrowLeft className=\"h-4 w-4\" />\n          </Link>\n          <h1 className=\"text-sm font-semibold\">\n            {isEdit ? \"Edit Tool\" : \"New Tool\"}\n          </h1>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={handleSave}\n            disabled={saving || !name.trim()}\n            className={cn(\n              \"inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90\",\n              (saving || !name.trim()) && \"opacity-60\",\n            )}\n          >\n            <IconDeviceFloppy className=\"h-3.5 w-3.5\" />\n            {saving ? \"Saving...\" : isEdit ? \"Save\" : \"Create\"}\n          </button>\n          {isEdit && (\n            <Popover\n              open={menuOpen}\n              onOpenChange={(o) => {\n                setMenuOpen(o);\n                if (!o) setConfirmingDelete(false);\n              }}\n            >\n              <PopoverTrigger asChild>\n                <button\n                  type=\"button\"\n                  className=\"inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n                  title=\"More options\"\n                  aria-label=\"More options\"\n                >\n                  <IconDots className=\"h-4 w-4\" />\n                </button>\n              </PopoverTrigger>\n              <PopoverContent align=\"end\" sideOffset={4} className=\"w-72 p-0\">\n                {!confirmingDelete ? (\n                  <>\n                    <div className=\"px-3 py-2 border-b border-border/40\">\n                      <p className=\"text-[12px] font-medium\">Appears in</p>\n                      {slots.length === 0 ? (\n                        <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">\n                          Not installed in any widget areas. Ask the agent to\n                          add it somewhere.\n                        </p>\n                      ) : (\n                        <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">\n                          This tool can render in {slots.length} widget area\n                          {slots.length === 1 ? \"\" : \"s\"}.\n                        </p>\n                      )}\n                    </div>\n                    {slots.length > 0 && (\n                      <div className=\"max-h-48 overflow-y-auto py-1\">\n                        {slots.map((s) => (\n                          <div\n                            key={s.id}\n                            className=\"flex items-center gap-2 px-3 py-1.5 text-[12px]\"\n                          >\n                            <span className=\"flex-1 truncate font-mono text-[11px] text-muted-foreground\">\n                              {s.slotId}\n                            </span>\n                            <button\n                              type=\"button\"\n                              onClick={() => handleRemoveFromSlot(s.slotId)}\n                              className=\"rounded p-1 text-muted-foreground/60 hover:bg-accent hover:text-foreground cursor-pointer\"\n                              title=\"Remove from this widget area (for me)\"\n                              aria-label=\"Remove from this widget area\"\n                            >\n                              <IconX className=\"h-3.5 w-3.5\" />\n                            </button>\n                          </div>\n                        ))}\n                      </div>\n                    )}\n                    <div className=\"border-t border-border/40 p-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setConfirmingDelete(true)}\n                        className=\"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] text-destructive hover:bg-destructive/10 cursor-pointer text-left\"\n                      >\n                        <IconTrash className=\"h-3.5 w-3.5\" />\n                        <span>Delete tool…</span>\n                      </button>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"flex flex-col gap-2 p-3\">\n                    <p className=\"text-[12px]\">\n                      Delete <span className=\"font-medium\">{name}</span>? This\n                      removes the tool everywhere, for everyone it's shared\n                      with.\n                    </p>\n                    <div className=\"flex justify-end gap-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => setConfirmingDelete(false)}\n                        className=\"rounded-md px-2 py-1 text-[12px] hover:bg-accent cursor-pointer\"\n                      >\n                        Cancel\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={handleDelete}\n                        disabled={deleting}\n                        className={cn(\n                          \"rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer\",\n                          deleting && \"opacity-60\",\n                        )}\n                      >\n                        {deleting ? \"Deleting…\" : \"Delete\"}\n                      </button>\n                    </div>\n                  </div>\n                )}\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </header>\n\n      <div className=\"flex flex-1 overflow-hidden\">\n        <div className=\"flex w-1/2 flex-col gap-4 overflow-auto border-r p-4\">\n          <div>\n            <label className=\"mb-1.5 block text-sm font-medium text-foreground\">\n              Name\n            </label>\n            <input\n              type=\"text\"\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              placeholder=\"My Tool\"\n              className=\"h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background\"\n            />\n          </div>\n\n          <div>\n            <label className=\"mb-1.5 block text-sm font-medium text-foreground\">\n              Description\n            </label>\n            <textarea\n              value={description}\n              onChange={(e) => setDescription(e.target.value)}\n              placeholder=\"What does this tool do?\"\n              rows={2}\n              className=\"w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background\"\n            />\n          </div>\n\n          <div className=\"flex flex-1 flex-col\">\n            <label className=\"mb-1.5 block text-sm font-medium text-foreground\">\n              Content\n            </label>\n            <textarea\n              value={content}\n              onChange={(e) => setContent(e.target.value)}\n              placeholder=\"<html>...</html>\"\n              className=\"flex-1 resize-none rounded-md border border-input bg-background p-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background\"\n              spellCheck={false}\n            />\n          </div>\n        </div>\n\n        <div className=\"w-1/2\">\n          {content ? (\n            <iframe\n              srcDoc={content}\n              className=\"h-full w-full border-0\"\n              sandbox=\"allow-scripts allow-forms\"\n              title=\"Tool preview\"\n            />\n          ) : (\n            <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n              Preview will appear here\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/client/extensions/ToolViewer.d.ts

@@ -0,0 +1,5 @@
+export interface ToolViewerProps {
+    toolId: string;
+}
+export declare function ToolViewer({ toolId }: ToolViewerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolViewer.d.ts.map

package/dist/client/extensions/ToolViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolViewer.d.ts","sourceRoot":"","sources":["../../../src/client/extensions/ToolViewer.tsx"],"names":[],"mappings":"AA8EA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AA4DD,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,2CA8YrD"}

package/dist/client/extensions/ToolViewer.js

@@ -0,0 +1,400 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { agentNativePath } from "../api-path.js";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { IconDots, IconLoader2, IconPencil, IconRefresh, IconTrash, IconX, } from "@tabler/icons-react";
+import { ShareButton } from "../sharing/ShareButton.js";
+import { AgentToggleButton } from "../AgentPanel.js";
+import { NotificationsBell } from "../notifications/NotificationsBell.js";
+import { sendToAgentChat } from "../agent-chat.js";
+import { PromptComposer } from "../composer/PromptComposer.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
+import { isAllowedToolPath, sanitizeToolRequestOptions, checkBridgePolicy, } from "./iframe-bridge.js";
+const THEME_CSS_VARS = [
+    "--background",
+    "--foreground",
+    "--card",
+    "--card-foreground",
+    "--popover",
+    "--popover-foreground",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--muted",
+    "--muted-foreground",
+    "--accent",
+    "--accent-foreground",
+    "--destructive",
+    "--destructive-foreground",
+    "--border",
+    "--input",
+    "--ring",
+    "--radius",
+    "--sidebar-background",
+    "--sidebar-foreground",
+    "--sidebar-primary",
+    "--sidebar-primary-foreground",
+    "--sidebar-accent",
+    "--sidebar-accent-foreground",
+    "--sidebar-border",
+    "--sidebar-ring",
+];
+function getParentThemeVars() {
+    const computed = getComputedStyle(document.documentElement);
+    const vars = {};
+    for (const name of THEME_CSS_VARS) {
+        const val = computed.getPropertyValue(name).trim();
+        if (val)
+            vars[name] = val;
+    }
+    return vars;
+}
+function EditToolPopover({ tool }) {
+    const [open, setOpen] = useState(false);
+    // Radix's outside-click detection runs in the parent document, so a click
+    // inside the tool iframe (or any other iframe) never fires it. The browser
+    // does shift focus to the iframe though, which blurs the parent window — we
+    // hook that to close the popover so it behaves like a normal click-outside.
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleBlur = () => {
+            // Defer until after the focus actually lands so document.activeElement
+            // reflects the iframe (or whatever the user clicked on).
+            setTimeout(() => {
+                if (document.activeElement?.tagName === "IFRAME")
+                    setOpen(false);
+            }, 0);
+        };
+        window.addEventListener("blur", handleBlur);
+        return () => window.removeEventListener("blur", handleBlur);
+    }, [open]);
+    const handleSubmit = (text) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        sendToAgentChat({
+            message: trimmed,
+            context: `The user is viewing tool "${tool.name}" (id: ${tool.id}) and wants to edit it.`,
+            submit: true,
+            openSidebar: true,
+        });
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer", title: "Edit", children: _jsx(IconPencil, { className: "h-4 w-4" }) }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, className: "w-[420px] p-3", children: [_jsx("p", { className: "px-1 pb-2 text-sm font-semibold text-foreground", children: "Edit tool" }), _jsx(PromptComposer, { autoFocus: true, placeholder: "What would you like to change?", draftScope: `tools:edit:${tool.id}`, onSubmit: handleSubmit })] })] }));
+}
+export function ToolViewer({ toolId }) {
+    const [isDark, setIsDark] = useState(false);
+    const [iframeReady, setIframeReady] = useState(false);
+    const iframeRef = useRef(null);
+    const toolRef = useRef(null);
+    const [isRenaming, setIsRenaming] = useState(false);
+    const [renameValue, setRenameValue] = useState("");
+    const [refreshKey, setRefreshKey] = useState(0);
+    const renameInputRef = useRef(null);
+    const queryClient = useQueryClient();
+    // (audit H4) Role plumbed through from the iframe's render binding. Until
+    // the iframe announces its role we deny non-trivial helper calls — that
+    // way a malicious tool body that races the announcement can't briefly
+    // operate at higher privilege than the viewer's actual role.
+    const bridgeContextRef = useRef({
+        role: "viewer",
+        isAuthor: false,
+    });
+    useEffect(() => {
+        setIsDark(document.documentElement.classList.contains("dark"));
+        const observer = new MutationObserver(() => {
+            setIsDark(document.documentElement.classList.contains("dark"));
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    const sendThemeToIframe = () => {
+        const win = iframeRef.current?.contentWindow;
+        if (!win)
+            return;
+        win.postMessage({
+            type: "agent-native-theme-update",
+            isDark: document.documentElement.classList.contains("dark"),
+            vars: getParentThemeVars(),
+        }, "*");
+    };
+    useEffect(() => {
+        if (!iframeReady)
+            return;
+        sendThemeToIframe();
+    }, [isDark, iframeReady]);
+    useEffect(() => {
+        const handleMessage = async (event) => {
+            if (event.source !== iframeRef.current?.contentWindow)
+                return;
+            const message = event.data;
+            if (!message)
+                return;
+            if (message.type === "agent-native-tool-binding") {
+                // (audit H4) The iframe announced its render binding. Trust the role
+                // value because the iframe's binding is generated server-side in
+                // tools/routes.ts (resolveAccess), not by user-authored content.
+                const binding = message.binding ?? {};
+                const role = binding.role === "owner" ||
+                    binding.role === "admin" ||
+                    binding.role === "editor" ||
+                    binding.role === "viewer"
+                    ? binding.role
+                    : "viewer";
+                bridgeContextRef.current = {
+                    role,
+                    isAuthor: !!binding.isAuthor,
+                };
+                return;
+            }
+            if (message.type === "agent-native-tool-consent-granted" ||
+                message.type === "agent-native-tool-consent-cancelled") {
+                // (audit C1) The consent stub fired; force a reload of the iframe so
+                // the next render returns the tool body (granted) or stays on the
+                // stub (cancelled — viewer can also navigate away).
+                if (message.type === "agent-native-tool-consent-granted") {
+                    // Invalidate the cached tool record — author may have edited
+                    // since the cache was warmed.
+                    queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
+                    setRefreshKey((k) => k + 1);
+                }
+                return;
+            }
+            if (message.type === "agent-native-tool-keydown") {
+                document.dispatchEvent(new KeyboardEvent("keydown", {
+                    key: message.key,
+                    code: message.code,
+                    metaKey: !!message.metaKey,
+                    ctrlKey: !!message.ctrlKey,
+                    shiftKey: !!message.shiftKey,
+                    altKey: !!message.altKey,
+                    bubbles: true,
+                    cancelable: true,
+                }));
+                return;
+            }
+            if (message.type === "agent-native-tool-error-fix") {
+                const t = toolRef.current;
+                if (!t)
+                    return;
+                const errors = message.errors || [];
+                const errorDetails = message.errorDetails || [];
+                const consoleLogs = message.consoleLogs || [];
+                const networkLogs = message.networkLogs || [];
+                const detailedTrace = errorDetails
+                    .map((e) => (e.stack ? `${e.message}\n${e.stack}` : e.message))
+                    .join("\n\n");
+                const contextParts = [
+                    `The user is viewing tool "${t.name}" (id: ${t.id}) and there are runtime errors that need fixing.`,
+                    `\nFull error details:\n${detailedTrace}`,
+                ];
+                if (consoleLogs.length > 0) {
+                    const consoleStr = consoleLogs
+                        .map((l) => `[${l.level}] ${l.message}`)
+                        .join("\n");
+                    contextParts.push(`\nRecent console output:\n${consoleStr}`);
+                }
+                if (networkLogs.length > 0) {
+                    const netStr = networkLogs
+                        .map((l) => `${l.method} ${l.path} → ${l.ok ? l.status : "FAILED: " + (l.error || l.status)}`)
+                        .join("\n");
+                    contextParts.push(`\nRecent network requests:\n${netStr}`);
+                }
+                sendToAgentChat({
+                    message: `Fix runtime errors in this tool:\n${errors.join("\n")}`,
+                    context: contextParts.join("\n"),
+                    submit: true,
+                    openSidebar: true,
+                });
+                return;
+            }
+            if (message.type !== "agent-native-tool-request")
+                return;
+            const requestId = String(message.requestId ?? "");
+            const path = String(message.path ?? "");
+            const respond = (payload) => {
+                iframeRef.current?.contentWindow?.postMessage({
+                    type: "agent-native-tool-response",
+                    requestId,
+                    ...payload,
+                }, "*");
+            };
+            if (!requestId || !isAllowedToolPath(path, toolId)) {
+                respond({ error: "Tool request path is not allowed" });
+                return;
+            }
+            try {
+                const options = sanitizeToolRequestOptions(message.options);
+                // (audit H4) Role-aware policy gate: viewer-shared tools can read
+                // but not write. Decided here in the parent before the request
+                // leaves; the server enforces a second layer.
+                const policy = checkBridgePolicy(path, options.method ?? "GET", bridgeContextRef.current);
+                if (!policy.ok) {
+                    respond({
+                        response: {
+                            ok: false,
+                            status: 403,
+                            statusText: "Forbidden",
+                            body: { error: policy.error },
+                        },
+                    });
+                    return;
+                }
+                // (audit H5) Tag every outbound bridge request with the
+                // X-Agent-Native-Tool-Bridge sentinel so the action-routes layer can
+                // enforce per-action `toolCallable` opt-in. The header is added by
+                // the parent — it is NOT taken from the iframe-supplied options
+                // (which were filtered by sanitizeToolRequestOptions).
+                const finalHeaders = new Headers(options.headers ?? undefined);
+                finalHeaders.set("X-Agent-Native-Tool-Bridge", "1");
+                finalHeaders.set("X-Agent-Native-Tool-Id", toolId);
+                const res = await fetch(agentNativePath(path), {
+                    ...options,
+                    headers: finalHeaders,
+                    credentials: "same-origin",
+                });
+                const text = await res.text();
+                let body = text;
+                if (text) {
+                    try {
+                        body = JSON.parse(text);
+                    }
+                    catch {
+                        body = text;
+                    }
+                }
+                respond({
+                    response: {
+                        ok: res.ok,
+                        status: res.status,
+                        statusText: res.statusText,
+                        body,
+                    },
+                });
+            }
+            catch (err) {
+                respond({ error: err?.message ?? "Tool host request failed" });
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [toolId, queryClient]);
+    const { data: tool, isLoading } = useQuery({
+        queryKey: ["tool", toolId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/tools/${toolId}`));
+            if (!res.ok)
+                throw new Error("Failed to fetch tool");
+            return res.json();
+        },
+    });
+    toolRef.current = tool ?? null;
+    const iframeSrc = useMemo(() => agentNativePath(`/_agent-native/tools/${toolId}/render?dark=${document.documentElement.classList.contains("dark")}&v=${encodeURIComponent(tool?.updatedAt ?? "")}&r=${refreshKey}`), [toolId, tool?.updatedAt, refreshKey]);
+    useEffect(() => {
+        setIframeReady(false);
+        // Reset role to deny-by-default on every reload — the new render's
+        // binding announcement re-establishes the role before any helper call.
+        bridgeContextRef.current = { role: "viewer", isAuthor: false };
+    }, [toolId, tool?.updatedAt, refreshKey]);
+    const startRename = useCallback(() => {
+        if (!tool)
+            return;
+        setRenameValue(tool.name);
+        setIsRenaming(true);
+        requestAnimationFrame(() => renameInputRef.current?.select());
+    }, [tool]);
+    const submitRename = useCallback(async () => {
+        const trimmed = renameValue.trim();
+        if (!trimmed || !tool || trimmed === tool.name) {
+            setIsRenaming(false);
+            return;
+        }
+        queryClient.setQueryData(["tool", toolId], (old) => old ? { ...old, name: trimmed } : old);
+        queryClient.setQueryData(["tools"], (old) => (old ?? []).map((t) => (t.id === toolId ? { ...t, name: trimmed } : t)));
+        setIsRenaming(false);
+        try {
+            await fetch(agentNativePath(`/_agent-native/tools/${toolId}`), {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ name: trimmed }),
+            });
+            queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
+            queryClient.invalidateQueries({ queryKey: ["tools"] });
+        }
+        catch {
+            queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
+            queryClient.invalidateQueries({ queryKey: ["tools"] });
+        }
+    }, [renameValue, tool, toolId, queryClient]);
+    if (isLoading) {
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex h-12 items-center gap-2 px-3 border-b shrink-0", children: [_jsx("div", { className: "h-3.5 w-3.5 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-3.5 w-24 rounded bg-muted animate-pulse" })] }), _jsx("div", { className: "flex-1 bg-muted/20 animate-pulse" })] }));
+    }
+    if (!tool) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Tool not found" }));
+    }
+    return (_jsxs("div", { className: "flex h-full w-full flex-col", children: [_jsxs("div", { className: "flex h-12 items-center justify-between border-b px-3 shrink-0", children: [_jsx("div", { className: "group/name flex items-center gap-1", children: isRenaming ? (_jsx("input", { ref: renameInputRef, value: renameValue, onChange: (e) => setRenameValue(e.target.value), onBlur: submitRename, onKeyDown: (e) => {
+                                if (e.key === "Enter")
+                                    submitRename();
+                                if (e.key === "Escape")
+                                    setIsRenaming(false);
+                            }, className: "text-sm font-medium bg-transparent border-b border-primary outline-none py-0 px-0" })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm font-medium", children: tool.name }), _jsx("button", { type: "button", onClick: startRename, className: "cursor-pointer rounded p-0.5 text-muted-foreground/40 opacity-0 group-hover/name:opacity-100 hover:text-foreground", title: "Rename", children: _jsx(IconPencil, { className: "h-3 w-3" }) })] })) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => setRefreshKey((k) => k + 1), className: "inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer", title: "Refresh", children: _jsx(IconRefresh, { className: "h-4 w-4" }) }), _jsx(EditToolPopover, { tool: tool }), _jsx(ShareButton, { resourceType: "tool", resourceId: toolId, resourceTitle: tool.name }), _jsx(ToolMoreMenu, { toolId: toolId, toolName: tool.name }), _jsx(NotificationsBell, {}), _jsx(AgentToggleButton, { className: "h-8 w-8 rounded-md hover:bg-accent" })] })] }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [!iframeReady && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background z-10", children: _jsx(IconLoader2, { className: "size-5 animate-spin text-muted-foreground", role: "status", "aria-label": "Loading" }) })), _jsx("iframe", { ref: iframeRef, src: iframeSrc, className: "h-full w-full border-0", sandbox: "allow-scripts allow-forms", title: tool.name, onLoad: () => {
+                            sendThemeToIframe();
+                            setTimeout(() => setIframeReady(true), 150);
+                        } }, `${tool.updatedAt}-${refreshKey}`)] })] }));
+}
+function ToolMoreMenu({ toolId, toolName, }) {
+    const [open, setOpen] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const queryClient = useQueryClient();
+    const navigate = useNavigate();
+    const { data: slots = [] } = useQuery({
+        queryKey: ["tool-slots", toolId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/slots/tool/${toolId}`));
+            if (!res.ok)
+                return [];
+            return res.json();
+        },
+        enabled: open,
+    });
+    const closeMenu = () => {
+        setOpen(false);
+        setConfirmingDelete(false);
+    };
+    const removeFromSlot = async (slotId) => {
+        try {
+            await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(toolId)}`), { method: "DELETE" });
+        }
+        finally {
+            queryClient.invalidateQueries({ queryKey: ["slot-installs", slotId] });
+        }
+    };
+    const deleteTool = async () => {
+        closeMenu();
+        try {
+            await fetch(agentNativePath(`/_agent-native/tools/${toolId}`), {
+                method: "DELETE",
+            });
+        }
+        finally {
+            queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
+            queryClient.invalidateQueries({ queryKey: ["tools"] });
+            slots.forEach((s) => queryClient.invalidateQueries({
+                queryKey: ["slot-installs", s.slotId],
+            }));
+            navigate("/tools");
+        }
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (o) => {
+            setOpen(o);
+            if (!o)
+                setConfirmingDelete(false);
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer", title: "More options", "aria-label": "More options", children: _jsx(IconDots, { className: "h-4 w-4" }) }) }), _jsx(PopoverContent, { align: "end", sideOffset: 4, className: "w-72 p-0", children: !confirmingDelete ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "px-3 py-2 border-b border-border/40", children: [_jsx("p", { className: "text-[12px] font-medium", children: "Appears in" }), slots.length === 0 ? (_jsx("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: "Not installed in any widget areas. Ask the agent to add it somewhere." })) : (_jsxs("p", { className: "text-[11px] text-muted-foreground/70 mt-0.5", children: ["This tool can render in ", slots.length, " widget area", slots.length === 1 ? "" : "s", "."] }))] }), slots.length > 0 && (_jsx("div", { className: "max-h-48 overflow-y-auto py-1", children: slots.map((s) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-[12px]", children: [_jsx("span", { className: "flex-1 truncate font-mono text-[11px] text-muted-foreground", children: s.slotId }), _jsx("button", { type: "button", onClick: () => removeFromSlot(s.slotId), className: "rounded p-1 text-muted-foreground/60 hover:bg-accent hover:text-foreground cursor-pointer", title: "Remove from this widget area (for me)", "aria-label": "Remove from this widget area", children: _jsx(IconX, { className: "h-3.5 w-3.5" }) })] }, s.id))) })), _jsx("div", { className: "border-t border-border/40 p-1", children: _jsxs("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] text-destructive hover:bg-destructive/10 cursor-pointer text-left", children: [_jsx(IconTrash, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Delete tool\u2026" })] }) })] })) : (_jsxs("div", { className: "flex flex-col gap-2 p-3", children: [_jsxs("p", { className: "text-[12px]", children: ["Delete ", _jsx("span", { className: "font-medium", children: toolName }), "? This removes the tool everywhere, for everyone it's shared with."] }), _jsxs("div", { className: "flex justify-end gap-1", children: [_jsx("button", { type: "button", onClick: () => setConfirmingDelete(false), className: "rounded-md px-2 py-1 text-[12px] hover:bg-accent cursor-pointer", children: "Cancel" }), _jsx("button", { type: "button", onClick: deleteTool, className: "rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer", children: "Delete" })] })] })) })] }));
+}
+//# sourceMappingURL=ToolViewer.js.map