@agent-native/core 0.7.82 → 0.8.0

package/dist/client/{tools/EmbeddedTool.js → extensions/EmbeddedExtension.js}

@@ -5,17 +5,17 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router";
 import { IconDots, IconExternalLink, IconLayoutSidebarRightCollapse, IconTrash, } from "@tabler/icons-react";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
-import { isAllowedToolPath, sanitizeToolRequestOptions, checkBridgePolicy, } from "./iframe-bridge.js";
+import { isAllowedExtensionPath, sanitizeExtensionRequestOptions, checkBridgePolicy, } from "./iframe-bridge.js";
 /**
- * Renders a tool inline as a small auto-sized iframe — for use inside an
- * `<ExtensionSlot>`. Different from `<ToolViewer>` (which is full-page with a
+ * Renders a extension inline as a small auto-sized iframe — for use inside an
+ * `<ExtensionSlot>`. Different from `<ExtensionViewer>` (which is full-page with a
  * toolbar): no header, sized to content, receives a `slotContext`.
  */
-export function EmbeddedTool({ toolId, slotId, context, className, initialHeight = 80, }) {
+export function EmbeddedExtension({ extensionId, slotId, context, className, initialHeight = 80, }) {
     const iframeRef = useRef(null);
     const [height, setHeight] = useState(initialHeight);
     const [isDark, setIsDark] = useState(false);
-    // (audit H4) Mirror ToolViewer's role-aware gating; deny-by-default until
+    // (audit H4) Mirror ExtensionViewer's role-aware gating; deny-by-default until
     // the iframe's render binding announcement arrives.
     const bridgeContextRef = useRef({
         role: "viewer",
@@ -32,19 +32,19 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
         });
         return () => observer.disconnect();
     }, []);
-    const { data: tool } = useQuery({
-        queryKey: ["tool", toolId],
+    const { data: extension } = useQuery({
+        queryKey: ["extension", extensionId],
         queryFn: async () => {
-            const res = await fetch(agentNativePath(`/_agent-native/tools/${toolId}`));
+            const res = await fetch(agentNativePath(`/_agent-native/extensions/${extensionId}`));
             if (!res.ok)
-                throw new Error("Failed to fetch tool");
+                throw new Error("Failed to fetch extension");
             return res.json();
         },
     });
     const iframeSrc = useMemo(() => {
-        const v = encodeURIComponent(tool?.updatedAt ?? "");
-        return agentNativePath(`/_agent-native/tools/${toolId}/render?slot=${encodeURIComponent(slotId)}&dark=${isDark}&v=${v}`);
-    }, [toolId, slotId, isDark, tool?.updatedAt]);
+        const v = encodeURIComponent(extension?.updatedAt ?? "");
+        return agentNativePath(`/_agent-native/extensions/${extensionId}/render?slot=${encodeURIComponent(slotId)}&dark=${isDark}&v=${v}`);
+    }, [extensionId, slotId, isDark, extension?.updatedAt]);
     // Forward slot context whenever it changes. The iframe's own load handler
     // posts the initial value once it's ready; this effect handles updates.
     const contextJson = JSON.stringify(context ?? {});
@@ -54,7 +54,7 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
             return;
         win.postMessage({ type: "agent-native-slot-context", context: context ?? {} }, "*");
     }, [contextJson]);
-    // Bridge tool requests + height reports.
+    // Bridge extension requests + height reports.
     useEffect(() => {
         const handleMessage = async (event) => {
             if (event.source !== iframeRef.current?.contentWindow)
@@ -62,7 +62,7 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
             const message = event.data;
             if (!message || typeof message !== "object")
                 return;
-            if (message.type === "agent-native-tool-binding") {
+            if (message.type === "agent-native-extension-binding") {
                 const binding = message.binding ?? {};
                 const role = binding.role === "owner" ||
                     binding.role === "admin" ||
@@ -76,27 +76,27 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
                 };
                 return;
             }
-            if (message.type === "agent-native-tool-resize") {
+            if (message.type === "agent-native-extension-resize") {
                 const h = Number(message.height);
                 if (Number.isFinite(h) && h > 0) {
                     setHeight(Math.ceil(h));
                 }
                 return;
             }
-            if (message.type !== "agent-native-tool-request")
+            if (message.type !== "agent-native-extension-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 }, "*");
+                iframeRef.current?.contentWindow?.postMessage({ type: "agent-native-extension-response", requestId, ...payload }, "*");
             };
-            if (!requestId || !isAllowedToolPath(path, toolId)) {
-                respond({ error: "Tool request path is not allowed" });
+            if (!requestId || !isAllowedExtensionPath(path, extensionId)) {
+                respond({ error: "Extension request path is not allowed" });
                 return;
             }
             try {
-                const options = sanitizeToolRequestOptions(message.options);
-                // (audit H4) Role-aware gating: viewer-shared tools can read but not
+                const options = sanitizeExtensionRequestOptions(message.options);
+                // (audit H4) Role-aware gating: viewer-shared extensions can read but not
                 // write. The bridge policy is decided here in the parent before the
                 // request leaves; the server enforces a second layer.
                 const policy = checkBridgePolicy(path, options.method ?? "GET", bridgeContextRef.current);
@@ -111,11 +111,11 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
                     });
                     return;
                 }
-                // (audit H5) Same tool-bridge tagging as <ToolViewer>. action-routes
+                // (audit H5) Same extension-bridge tagging as <ExtensionViewer>. action-routes
                 // uses these headers to enforce per-action `toolCallable` opt-in.
                 const finalHeaders = new Headers(options.headers ?? undefined);
-                finalHeaders.set("X-Agent-Native-Tool-Bridge", "1");
-                finalHeaders.set("X-Agent-Native-Tool-Id", toolId);
+                finalHeaders.set("X-Agent-Native-Extension-Bridge", "1");
+                finalHeaders.set("X-Agent-Native-Extension-Id", extensionId);
                 const res = await fetch(agentNativePath(path), {
                     ...options,
                     headers: finalHeaders,
@@ -141,20 +141,20 @@ export function EmbeddedTool({ toolId, slotId, context, className, initialHeight
                 });
             }
             catch (err) {
-                respond({ error: err?.message ?? "Tool host request failed" });
+                respond({ error: err?.message ?? "Extension host request failed" });
             }
         };
         window.addEventListener("message", handleMessage);
         return () => window.removeEventListener("message", handleMessage);
-    }, [toolId]);
-    if (!tool) {
+    }, [extensionId]);
+    if (!extension) {
         return (_jsx("div", { className: className, style: { height: initialHeight }, "aria-busy": "true" }));
     }
-    return (_jsxs("div", { className: `relative group/embedded-tool ${className ?? ""}`, children: [_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: tool.name, sandbox: "allow-scripts allow-forms", style: { width: "100%", border: 0, height, display: "block" }, onLoad: () => {
+    return (_jsxs("div", { className: `relative group/embedded-extension ${className ?? ""}`, children: [_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: extension.name, sandbox: "allow-scripts allow-forms", style: { width: "100%", border: 0, height, display: "block" }, onLoad: () => {
                     iframeRef.current?.contentWindow?.postMessage({ type: "agent-native-slot-context", context: context ?? {} }, "*");
-                } }, `${toolId}-${tool.updatedAt ?? ""}`), _jsx(EmbeddedToolMenu, { toolId: toolId, slotId: slotId, toolName: tool.name })] }));
+                } }, `${extensionId}-${extension.updatedAt ?? ""}`), _jsx(EmbeddedToolMenu, { extensionId: extensionId, slotId: slotId, toolName: extension.name })] }));
 }
-function EmbeddedToolMenu({ toolId, slotId, toolName, }) {
+function EmbeddedToolMenu({ extensionId, slotId, toolName, }) {
     const [open, setOpen] = useState(false);
     const [confirmingDelete, setConfirmingDelete] = useState(false);
     const queryClient = useQueryClient();
@@ -165,35 +165,35 @@ function EmbeddedToolMenu({ toolId, slotId, toolName, }) {
     };
     const removeFromSlot = async () => {
         closeMenu();
-        queryClient.setQueryData(["slot-installs", slotId], (old) => (old ?? []).filter((i) => i.toolId !== toolId));
+        queryClient.setQueryData(["slot-installs", slotId], (old) => (old ?? []).filter((i) => i.extensionId !== extensionId));
         try {
-            await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(toolId)}`), { method: "DELETE" });
+            await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(extensionId)}`), { method: "DELETE" });
         }
         finally {
             queryClient.invalidateQueries({ queryKey: ["slot-installs", slotId] });
         }
     };
-    const deleteTool = async () => {
+    const deleteExtension = async () => {
         closeMenu();
-        queryClient.setQueryData(["slot-installs", slotId], (old) => (old ?? []).filter((i) => i.toolId !== toolId));
+        queryClient.setQueryData(["slot-installs", slotId], (old) => (old ?? []).filter((i) => i.extensionId !== extensionId));
         try {
-            await fetch(agentNativePath(`/_agent-native/tools/${toolId}`), {
+            await fetch(agentNativePath(`/_agent-native/extensions/${extensionId}`), {
                 method: "DELETE",
             });
         }
         finally {
             queryClient.invalidateQueries({ queryKey: ["slot-installs", slotId] });
-            queryClient.invalidateQueries({ queryKey: ["tool", toolId] });
-            queryClient.invalidateQueries({ queryKey: ["tools"] });
+            queryClient.invalidateQueries({ queryKey: ["extension", extensionId] });
+            queryClient.invalidateQueries({ queryKey: ["extensions"] });
         }
     };
     return (_jsxs(Popover, { open: open, onOpenChange: (o) => {
             setOpen(o);
             if (!o)
                 setConfirmingDelete(false);
-        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "absolute top-1 right-1 flex h-6 w-6 items-center justify-center rounded-md bg-background/60 text-muted-foreground/60 opacity-0 hover:bg-accent hover:text-foreground hover:opacity-100 group-hover/embedded-tool:opacity-100 cursor-pointer transition-opacity", title: `${toolName} options`, "aria-label": `${toolName} options`, children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }) }), _jsx(PopoverContent, { align: "end", sideOffset: 4, className: "w-56 p-1", children: !confirmingDelete ? (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => {
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "absolute top-1 right-1 flex h-6 w-6 items-center justify-center rounded-md bg-background/60 text-muted-foreground/60 opacity-0 hover:bg-accent hover:text-foreground hover:opacity-100 group-hover/embedded-extension:opacity-100 cursor-pointer transition-opacity", title: `${toolName} options`, "aria-label": `${toolName} options`, children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }) }), _jsx(PopoverContent, { align: "end", sideOffset: 4, className: "w-56 p-1", children: !confirmingDelete ? (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => {
                                 closeMenu();
-                                navigate(`/tools/${toolId}`);
-                            }, className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left", children: [_jsx(IconExternalLink, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Open full view" })] }), _jsxs("button", { type: "button", onClick: removeFromSlot, className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left", children: [_jsx(IconLayoutSidebarRightCollapse, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Remove from this widget area" })] }), _jsx("div", { className: "my-1 h-px bg-border/40" }), _jsxs("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "flex 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-2", 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" })] })] })) })] }));
+                                navigate(`/extensions/${extensionId}`);
+                            }, className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left", children: [_jsx(IconExternalLink, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Open full view" })] }), _jsxs("button", { type: "button", onClick: removeFromSlot, className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left", children: [_jsx(IconLayoutSidebarRightCollapse, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Remove from this widget area" })] }), _jsx("div", { className: "my-1 h-px bg-border/40" }), _jsxs("button", { type: "button", onClick: () => setConfirmingDelete(true), className: "flex 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 extension\u2026" })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2 p-2", children: [_jsxs("p", { className: "text-[12px]", children: ["Delete ", _jsx("span", { className: "font-medium", children: toolName }), "? This removes the extension 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: deleteExtension, className: "rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer", children: "Delete" })] })] })) })] }));
 }
-//# sourceMappingURL=EmbeddedTool.js.map
+//# sourceMappingURL=EmbeddedExtension.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedExtension.js","sourceRoot":"","sources":["../../../src/client/extensions/EmbeddedExtension.tsx"],"names":[],"mappings":"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","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { useNavigate } from \"react-router\";\nimport {\n  IconDots,\n  IconExternalLink,\n  IconLayoutSidebarRightCollapse,\n  IconTrash,\n} from \"@tabler/icons-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../components/ui/popover.js\";\nimport {\n  isAllowedExtensionPath,\n  sanitizeExtensionRequestOptions,\n  checkBridgePolicy,\n  type ExtensionBridgeRole,\n} from \"./iframe-bridge.js\";\n\ninterface Extension {\n  id: string;\n  name: string;\n  description?: string;\n  content?: string;\n  updatedAt?: string;\n}\n\nexport interface EmbeddedExtensionProps {\n  extensionId: string;\n  /** Slot identifier passed via the iframe URL so the extension runtime knows it's\n   * embedded and enables auto-resize. */\n  slotId: string;\n  /** Object pushed into the extension as `window.slotContext`. Re-posted whenever\n   * the host re-renders with a new context. */\n  context?: Record<string, unknown> | null;\n  /** Optional className applied to the iframe container. */\n  className?: string;\n  /** Initial iframe height before content reports a real height. */\n  initialHeight?: number;\n}\n\n/**\n * Renders a extension inline as a small auto-sized iframe — for use inside an\n * `<ExtensionSlot>`. Different from `<ExtensionViewer>` (which is full-page with a\n * toolbar): no header, sized to content, receives a `slotContext`.\n */\nexport function EmbeddedExtension({\n  extensionId,\n  slotId,\n  context,\n  className,\n  initialHeight = 80,\n}: EmbeddedExtensionProps) {\n  const iframeRef = useRef<HTMLIFrameElement | null>(null);\n  const [height, setHeight] = useState<number>(initialHeight);\n  const [isDark, setIsDark] = useState(false);\n  // (audit H4) Mirror ExtensionViewer's role-aware gating; deny-by-default until\n  // the iframe's render binding announcement arrives.\n  const bridgeContextRef = useRef<{\n    role: ExtensionBridgeRole;\n    isAuthor: boolean;\n  }>({\n    role: \"viewer\",\n    isAuthor: false,\n  });\n\n  useEffect(() => {\n    setIsDark(document.documentElement.classList.contains(\"dark\"));\n    const observer = new MutationObserver(() => {\n      setIsDark(document.documentElement.classList.contains(\"dark\"));\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  const { data: extension } = useQuery<Extension>({\n    queryKey: [\"extension\", extensionId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(`/_agent-native/extensions/${extensionId}`),\n      );\n      if (!res.ok) throw new Error(\"Failed to fetch extension\");\n      return res.json();\n    },\n  });\n\n  const iframeSrc = useMemo(() => {\n    const v = encodeURIComponent(extension?.updatedAt ?? \"\");\n    return agentNativePath(\n      `/_agent-native/extensions/${extensionId}/render?slot=${encodeURIComponent(slotId)}&dark=${isDark}&v=${v}`,\n    );\n  }, [extensionId, slotId, isDark, extension?.updatedAt]);\n\n  // Forward slot context whenever it changes. The iframe's own load handler\n  // posts the initial value once it's ready; this effect handles updates.\n  const contextJson = JSON.stringify(context ?? {});\n  useEffect(() => {\n    const win = iframeRef.current?.contentWindow;\n    if (!win) return;\n    win.postMessage(\n      { type: \"agent-native-slot-context\", context: context ?? {} },\n      \"*\",\n    );\n  }, [contextJson]);\n\n  // Bridge extension requests + height reports.\n  useEffect(() => {\n    const handleMessage = async (event: MessageEvent) => {\n      if (event.source !== iframeRef.current?.contentWindow) return;\n      const message = event.data;\n      if (!message || typeof message !== \"object\") return;\n\n      if (message.type === \"agent-native-extension-binding\") {\n        const binding = (message as any).binding ?? {};\n        const role: ExtensionBridgeRole =\n          binding.role === \"owner\" ||\n          binding.role === \"admin\" ||\n          binding.role === \"editor\" ||\n          binding.role === \"viewer\"\n            ? binding.role\n            : \"viewer\";\n        bridgeContextRef.current = {\n          role,\n          isAuthor: !!binding.isAuthor,\n        };\n        return;\n      }\n\n      if (message.type === \"agent-native-extension-resize\") {\n        const h = Number(message.height);\n        if (Number.isFinite(h) && h > 0) {\n          setHeight(Math.ceil(h));\n        }\n        return;\n      }\n\n      if (message.type !== \"agent-native-extension-request\") return;\n\n      const requestId = String(message.requestId ?? \"\");\n      const path = String(message.path ?? \"\");\n      const respond = (payload: Record<string, unknown>) => {\n        iframeRef.current?.contentWindow?.postMessage(\n          { type: \"agent-native-extension-response\", requestId, ...payload },\n          \"*\",\n        );\n      };\n\n      if (!requestId || !isAllowedExtensionPath(path, extensionId)) {\n        respond({ error: \"Extension request path is not allowed\" });\n        return;\n      }\n\n      try {\n        const options = sanitizeExtensionRequestOptions(message.options);\n        // (audit H4) Role-aware gating: viewer-shared extensions can read but not\n        // write. The bridge policy is decided here in the parent before the\n        // request leaves; the server enforces a second layer.\n        const policy = checkBridgePolicy(\n          path,\n          options.method ?? \"GET\",\n          bridgeContextRef.current,\n        );\n        if (!policy.ok) {\n          respond({\n            response: {\n              ok: false,\n              status: 403,\n              statusText: \"Forbidden\",\n              body: { error: policy.error },\n            },\n          });\n          return;\n        }\n        // (audit H5) Same extension-bridge tagging as <ExtensionViewer>. action-routes\n        // uses these headers to enforce per-action `toolCallable` opt-in.\n        const finalHeaders = new Headers(options.headers ?? undefined);\n        finalHeaders.set(\"X-Agent-Native-Extension-Bridge\", \"1\");\n        finalHeaders.set(\"X-Agent-Native-Extension-Id\", extensionId);\n        const res = await fetch(agentNativePath(path), {\n          ...options,\n          headers: finalHeaders,\n          credentials: \"same-origin\",\n        });\n        const text = await res.text();\n        let body: unknown = text;\n        if (text) {\n          try {\n            body = JSON.parse(text);\n          } catch {\n            body = text;\n          }\n        }\n        respond({\n          response: {\n            ok: res.ok,\n            status: res.status,\n            statusText: res.statusText,\n            body,\n          },\n        });\n      } catch (err: any) {\n        respond({ error: err?.message ?? \"Extension host request failed\" });\n      }\n    };\n\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [extensionId]);\n\n  if (!extension) {\n    return (\n      <div\n        className={className}\n        style={{ height: initialHeight }}\n        aria-busy=\"true\"\n      />\n    );\n  }\n\n  return (\n    <div className={`relative group/embedded-extension ${className ?? \"\"}`}>\n      <iframe\n        ref={iframeRef}\n        key={`${extensionId}-${extension.updatedAt ?? \"\"}`}\n        src={iframeSrc}\n        title={extension.name}\n        sandbox=\"allow-scripts allow-forms\"\n        style={{ width: \"100%\", border: 0, height, display: \"block\" }}\n        onLoad={() => {\n          iframeRef.current?.contentWindow?.postMessage(\n            { type: \"agent-native-slot-context\", context: context ?? {} },\n            \"*\",\n          );\n        }}\n      />\n      <EmbeddedToolMenu\n        extensionId={extensionId}\n        slotId={slotId}\n        toolName={extension.name}\n      />\n    </div>\n  );\n}\n\nfunction EmbeddedToolMenu({\n  extensionId,\n  slotId,\n  toolName,\n}: {\n  extensionId: string;\n  slotId: string;\n  toolName: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const [confirmingDelete, setConfirmingDelete] = useState(false);\n  const queryClient = useQueryClient();\n  const navigate = useNavigate();\n\n  const closeMenu = () => {\n    setOpen(false);\n    setConfirmingDelete(false);\n  };\n\n  const removeFromSlot = async () => {\n    closeMenu();\n    queryClient.setQueryData<any[]>([\"slot-installs\", slotId], (old) =>\n      (old ?? []).filter((i) => i.extensionId !== extensionId),\n    );\n    try {\n      await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(extensionId)}`,\n        ),\n        { method: \"DELETE\" },\n      );\n    } finally {\n      queryClient.invalidateQueries({ queryKey: [\"slot-installs\", slotId] });\n    }\n  };\n\n  const deleteExtension = async () => {\n    closeMenu();\n    queryClient.setQueryData<any[]>([\"slot-installs\", slotId], (old) =>\n      (old ?? []).filter((i) => i.extensionId !== extensionId),\n    );\n    try {\n      await fetch(agentNativePath(`/_agent-native/extensions/${extensionId}`), {\n        method: \"DELETE\",\n      });\n    } finally {\n      queryClient.invalidateQueries({ queryKey: [\"slot-installs\", slotId] });\n      queryClient.invalidateQueries({ queryKey: [\"extension\", extensionId] });\n      queryClient.invalidateQueries({ queryKey: [\"extensions\"] });\n    }\n  };\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(o) => {\n        setOpen(o);\n        if (!o) setConfirmingDelete(false);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"absolute top-1 right-1 flex h-6 w-6 items-center justify-center rounded-md bg-background/60 text-muted-foreground/60 opacity-0 hover:bg-accent hover:text-foreground hover:opacity-100 group-hover/embedded-extension:opacity-100 cursor-pointer transition-opacity\"\n          title={`${toolName} options`}\n          aria-label={`${toolName} options`}\n        >\n          <IconDots className=\"h-3.5 w-3.5\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" sideOffset={4} className=\"w-56 p-1\">\n        {!confirmingDelete ? (\n          <div className=\"flex flex-col\">\n            <button\n              type=\"button\"\n              onClick={() => {\n                closeMenu();\n                navigate(`/extensions/${extensionId}`);\n              }}\n              className=\"flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left\"\n            >\n              <IconExternalLink className=\"h-3.5 w-3.5\" />\n              <span>Open full view</span>\n            </button>\n            <button\n              type=\"button\"\n              onClick={removeFromSlot}\n              className=\"flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left\"\n            >\n              <IconLayoutSidebarRightCollapse className=\"h-3.5 w-3.5\" />\n              <span>Remove from this widget area</span>\n            </button>\n            <div className=\"my-1 h-px bg-border/40\" />\n            <button\n              type=\"button\"\n              onClick={() => setConfirmingDelete(true)}\n              className=\"flex 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 extension…</span>\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-2 p-2\">\n            <p className=\"text-[12px]\">\n              Delete <span className=\"font-medium\">{toolName}</span>? This\n              removes the extension everywhere, for everyone it's shared 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={deleteExtension}\n                className=\"rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer\"\n              >\n                Delete\n              </button>\n            </div>\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionEditor.d.ts","sourceRoot":"","sources":["../../../src/client/extensions/ExtensionEditor.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,EAAE,oBAAoB,2CAoUpE"}

package/dist/client/extensions/ExtensionEditor.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 ExtensionEditor({ extensionId }) {
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const isEdit = !!extensionId;
+    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: ["extension-slots", extensionId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/slots/extension/${extensionId}`));
+            if (!res.ok)
+                return [];
+            return res.json();
+        },
+        enabled: isEdit && menuOpen,
+    });
+    const { data: existingTool } = useQuery({
+        queryKey: ["extension", extensionId],
+        queryFn: async () => {
+            const res = await fetch(agentNativePath(`/_agent-native/extensions/${extensionId}`));
+            if (!res.ok)
+                throw new Error("Failed to fetch extension");
+            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/extensions/${extensionId}`), {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body,
+                });
+                if (!res.ok)
+                    throw new Error("Update failed");
+                queryClient.invalidateQueries({ queryKey: ["extension", extensionId] });
+                queryClient.invalidateQueries({ queryKey: ["extensions"] });
+                navigate(`/extensions/${extensionId}`);
+            }
+            else {
+                const res = await fetch(agentNativePath("/_agent-native/extensions"), {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body,
+                });
+                if (!res.ok)
+                    throw new Error("Create failed");
+                const created = await res.json();
+                queryClient.invalidateQueries({ queryKey: ["extensions"] });
+                navigate(`/extensions/${created.id}`);
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleDelete = async () => {
+        if (!extensionId)
+            return;
+        setDeleting(true);
+        try {
+            const prev = queryClient.getQueryData(["extensions"]);
+            queryClient.setQueryData(["extensions"], (old) => (old ?? []).filter((t) => t.id !== extensionId));
+            const res = await fetch(agentNativePath(`/_agent-native/extensions/${extensionId}`), {
+                method: "DELETE",
+            });
+            if (!res.ok) {
+                if (prev)
+                    queryClient.setQueryData(["extensions"], prev);
+                throw new Error("Delete failed");
+            }
+            queryClient.invalidateQueries({ queryKey: ["extensions"] });
+            slots.forEach((s) => queryClient.invalidateQueries({
+                queryKey: ["slot-installs", s.slotId],
+            }));
+            navigate("/extensions");
+        }
+        finally {
+            setDeleting(false);
+            setConfirmingDelete(false);
+            setMenuOpen(false);
+        }
+    };
+    const handleRemoveFromSlot = async (slotId) => {
+        if (!extensionId)
+            return;
+        try {
+            await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(extensionId)}`), { 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 ? `/extensions/${extensionId}` : "/extensions", 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 Extension" : "New Extension" })] }), _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 extension 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 extension\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 extension 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 Extension", 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 extension 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: "Extension preview" })) : (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Preview will appear here" })) })] })] }));
+}
+//# sourceMappingURL=ExtensionEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionEditor.js","sourceRoot":"","sources":["../../../src/client/extensions/ExtensionEditor.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  extensionId: string;\n  slotId: string;\n}\n\ninterface Extension {\n  id: string;\n  name: string;\n  description?: string;\n  content?: string;\n}\n\nexport interface ExtensionEditorProps {\n  extensionId?: string;\n}\n\nexport function ExtensionEditor({ extensionId }: ExtensionEditorProps) {\n  const navigate = useNavigate();\n  const queryClient = useQueryClient();\n  const isEdit = !!extensionId;\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: [\"extension-slots\", extensionId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(`/_agent-native/slots/extension/${extensionId}`),\n      );\n      if (!res.ok) return [];\n      return res.json();\n    },\n    enabled: isEdit && menuOpen,\n  });\n\n  const { data: existingTool } = useQuery<Extension>({\n    queryKey: [\"extension\", extensionId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(`/_agent-native/extensions/${extensionId}`),\n      );\n      if (!res.ok) throw new Error(\"Failed to fetch extension\");\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/extensions/${extensionId}`),\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: [\"extension\", extensionId] });\n        queryClient.invalidateQueries({ queryKey: [\"extensions\"] });\n        navigate(`/extensions/${extensionId}`);\n      } else {\n        const res = await fetch(agentNativePath(\"/_agent-native/extensions\"), {\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: [\"extensions\"] });\n        navigate(`/extensions/${created.id}`);\n      }\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const handleDelete = async () => {\n    if (!extensionId) return;\n    setDeleting(true);\n    try {\n      const prev = queryClient.getQueryData<Extension[]>([\"extensions\"]);\n      queryClient.setQueryData<Extension[]>([\"extensions\"], (old) =>\n        (old ?? []).filter((t) => t.id !== extensionId),\n      );\n\n      const res = await fetch(\n        agentNativePath(`/_agent-native/extensions/${extensionId}`),\n        {\n          method: \"DELETE\",\n        },\n      );\n      if (!res.ok) {\n        if (prev) queryClient.setQueryData([\"extensions\"], prev);\n        throw new Error(\"Delete failed\");\n      }\n\n      queryClient.invalidateQueries({ queryKey: [\"extensions\"] });\n      slots.forEach((s) =>\n        queryClient.invalidateQueries({\n          queryKey: [\"slot-installs\", s.slotId],\n        }),\n      );\n      navigate(\"/extensions\");\n    } finally {\n      setDeleting(false);\n      setConfirmingDelete(false);\n      setMenuOpen(false);\n    }\n  };\n\n  const handleRemoveFromSlot = async (slotId: string) => {\n    if (!extensionId) return;\n    try {\n      await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(slotId)}/install/${encodeURIComponent(extensionId)}`,\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 ? `/extensions/${extensionId}` : \"/extensions\"}\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 Extension\" : \"New Extension\"}\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 extension can render in {slots.length} widget\n                          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 extension…</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 extension 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 Extension\"\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 extension 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=\"Extension 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/{tools → extensions}/ExtensionSlot.d.ts

@@ -1,17 +1,17 @@
 export interface ExtensionSlotProps {
     /** Stable slot identifier — convention: `<app>.<area>.<position>`. */
     id: string;
-    /** Object pushed to each embedded tool as `slotContext`. */
+    /** Object pushed to each embedded extension as `slotContext`. */
     context?: Record<string, unknown> | null;
     /** Show a small "+" affordance when the slot has no installs. Default: false. */
     showEmptyAffordance?: boolean;
     /** Optional className applied to the wrapper. */
     className?: string;
-    /** Optional className applied to each EmbeddedTool. */
+    /** Optional className applied to each EmbeddedExtension. */
     toolClassName?: string;
 }
 /**
- * A named UI slot that user-installed tools can render into. Apps drop this
+ * A named UI slot that user-installed extensions can render into. Apps drop this
  * component wherever they want to allow extensions; the framework handles
  * fetching, sandboxing, context delivery, and lifecycle.
  *

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionSlot.d.ts","sourceRoot":"","sources":["../../../src/client/extensions/ExtensionSlot.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,kBAAkB;IACjC,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IACzC,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,mBAAmB,EACnB,SAAS,EACT,aAAa,GACd,EAAE,kBAAkB,2CAwCpB"}

package/dist/client/{tools → extensions}/ExtensionSlot.js

@@ -5,9 +5,9 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { IconPlus } from "@tabler/icons-react";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { sendToAgentChat } from "../agent-chat.js";
-import { EmbeddedTool } from "./EmbeddedTool.js";
+import { EmbeddedExtension } from "./EmbeddedExtension.js";
 /**
- * A named UI slot that user-installed tools can render into. Apps drop this
+ * A named UI slot that user-installed extensions can render into. Apps drop this
  * component wherever they want to allow extensions; the framework handles
  * fetching, sandboxing, context delivery, and lifecycle.
  *
@@ -37,7 +37,7 @@ export function ExtensionSlot({ id, context, showEmptyAffordance, className, too
             return null;
         return (_jsx("div", { className: className, children: _jsx(SlotEmptyAffordance, { slotId: id }) }));
     }
-    return (_jsx("div", { className: className, children: installs.map((install) => (_jsx(EmbeddedTool, { toolId: install.toolId, slotId: id, context: context, className: toolClassName }, install.installId))) }));
+    return (_jsx("div", { className: className, children: installs.map((install) => (_jsx(EmbeddedExtension, { extensionId: install.extensionId, slotId: id, context: context, className: toolClassName }, install.installId))) }));
 }
 function SlotEmptyAffordance({ slotId }) {
     const [open, setOpen] = useState(false);
@@ -52,22 +52,22 @@ function SlotEmptyAffordance({ slotId }) {
         enabled: open,
     });
     const queryClient = useQueryClient();
-    const install = async (toolId) => {
+    const install = async (extensionId) => {
         queryClient.setQueryData(["slot-installs", slotId], (old) => {
-            const tool = available.find((t) => t.toolId === toolId);
-            if (!tool || !old)
+            const extension = available.find((t) => t.extensionId === extensionId);
+            if (!extension || !old)
                 return old;
             return [
                 ...old,
                 {
-                    installId: `optimistic-${toolId}`,
-                    toolId,
-                    name: tool.name,
-                    description: tool.description,
-                    icon: tool.icon,
+                    installId: `optimistic-${extensionId}`,
+                    extensionId,
+                    name: extension.name,
+                    description: extension.description,
+                    icon: extension.icon,
                     updatedAt: new Date().toISOString(),
                     position: old.length,
-                    config: tool.config,
+                    config: extension.config,
                 },
             ];
         });
@@ -76,7 +76,7 @@ function SlotEmptyAffordance({ slotId }) {
             await fetch(agentNativePath(`/_agent-native/slots/${encodeURIComponent(slotId)}/install`), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ toolId }),
+                body: JSON.stringify({ extensionId }),
             });
         }
         finally {
@@ -91,6 +91,6 @@ function SlotEmptyAffordance({ slotId }) {
             openSidebar: true,
         });
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-4 py-2 text-[11px] text-muted-foreground/60 hover:text-muted-foreground cursor-pointer", title: "Add a widget", children: [_jsx("div", { className: "h-5 w-5 rounded-md border border-dashed border-border/40 flex items-center justify-center shrink-0", children: _jsx(IconPlus, { className: "h-3 w-3" }) }), _jsx("span", { children: "Add widget" })] }) }), _jsxs(PopoverContent, { side: "left", align: "end", sideOffset: 8, className: "w-72 p-0 overflow-hidden", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border/40", children: [_jsx("p", { className: "text-[12px] font-medium", children: "Add widget here" }), _jsx("p", { className: "text-[11px] text-muted-foreground/70", children: slotId })] }), _jsxs("div", { className: "max-h-72 overflow-y-auto py-1", children: [isLoading && (_jsx("div", { className: "px-3 py-3 text-[12px] text-muted-foreground/60", children: "Loading\u2026" })), !isLoading && available.length === 0 && (_jsx("div", { className: "px-3 py-3 text-[12px] text-muted-foreground/60", children: "No widgets available for this slot yet." })), available.map((tool) => (_jsx("button", { type: "button", onClick: () => install(tool.toolId), className: "flex w-full items-start gap-2 px-3 py-2 text-left hover:bg-accent cursor-pointer", children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-[12px] font-medium truncate", children: tool.name }), tool.description && (_jsx("p", { className: "text-[11px] text-muted-foreground/70 truncate", children: tool.description }))] }) }, tool.toolId)))] }), _jsx("div", { className: "border-t border-border/40 p-1", children: _jsxs("button", { type: "button", onClick: requestNew, className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-[12px] text-muted-foreground hover:bg-accent hover:text-foreground cursor-pointer", children: [_jsx(IconPlus, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Build a new widget" })] }) })] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-4 py-2 text-[11px] text-muted-foreground/60 hover:text-muted-foreground cursor-pointer", title: "Add a widget", children: [_jsx("div", { className: "h-5 w-5 rounded-md border border-dashed border-border/40 flex items-center justify-center shrink-0", children: _jsx(IconPlus, { className: "h-3 w-3" }) }), _jsx("span", { children: "Add widget" })] }) }), _jsxs(PopoverContent, { side: "left", align: "end", sideOffset: 8, className: "w-72 p-0 overflow-hidden", children: [_jsxs("div", { className: "px-3 py-2 border-b border-border/40", children: [_jsx("p", { className: "text-[12px] font-medium", children: "Add widget here" }), _jsx("p", { className: "text-[11px] text-muted-foreground/70", children: slotId })] }), _jsxs("div", { className: "max-h-72 overflow-y-auto py-1", children: [isLoading && (_jsx("div", { className: "px-3 py-3 text-[12px] text-muted-foreground/60", children: "Loading\u2026" })), !isLoading && available.length === 0 && (_jsx("div", { className: "px-3 py-3 text-[12px] text-muted-foreground/60", children: "No widgets available for this slot yet." })), available.map((extension) => (_jsx("button", { type: "button", onClick: () => install(extension.extensionId), className: "flex w-full items-start gap-2 px-3 py-2 text-left hover:bg-accent cursor-pointer", children: _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-[12px] font-medium truncate", children: extension.name }), extension.description && (_jsx("p", { className: "text-[11px] text-muted-foreground/70 truncate", children: extension.description }))] }) }, extension.extensionId)))] }), _jsx("div", { className: "border-t border-border/40 p-1", children: _jsxs("button", { type: "button", onClick: requestNew, className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-[12px] text-muted-foreground hover:bg-accent hover:text-foreground cursor-pointer", children: [_jsx(IconPlus, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Build a new widget" })] }) })] })] }));
 }
 //# sourceMappingURL=ExtensionSlot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionSlot.js","sourceRoot":"","sources":["../../../src/client/extensions/ExtensionSlot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EACL,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAkC3D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,EAAE,EACF,OAAO,EACP,mBAAmB,EACnB,SAAS,EACT,aAAa,GACM;IACnB,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAgB;QACjE,QAAQ,EAAE,CAAC,eAAe,EAAE,EAAE,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,eAAe,CACb,wBAAwB,kBAAkB,CAAC,EAAE,CAAC,WAAW,CAC1D,CACF,CAAC;YACF,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,OAAO,EAAE,CAAC;YACvB,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,IAAI,CAAC,mBAAmB;YAAE,OAAO,IAAI,CAAC;QACtC,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACvB,KAAC,mBAAmB,IAAC,MAAM,EAAE,EAAE,GAAI,GAC/B,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,YACtB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACzB,KAAC,iBAAiB,IAEhB,WAAW,EAAE,OAAO,CAAC,WAAW,EAChC,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,aAAa,IAJnB,OAAO,CAAC,SAAS,CAKtB,CACH,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,EAAE,MAAM,EAAsB;IACzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAkB;QACpE,QAAQ,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;QACpC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,eAAe,CACb,wBAAwB,kBAAkB,CAAC,MAAM,CAAC,YAAY,CAC/D,CACF,CAAC;YACF,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,OAAO,EAAE,CAAC;YACvB,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;QACD,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,EAAE,WAAmB,EAAE,EAAE;QAC5C,WAAW,CAAC,YAAY,CACtB,CAAC,eAAe,EAAE,MAAM,CAAC,EACzB,CAAC,GAAG,EAAE,EAAE;YACN,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,KAAK,WAAW,CAAC,CAAC;YACvE,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG;gBAAE,OAAO,GAAG,CAAC;YACnC,OAAO;gBACL,GAAG,GAAG;gBACN;oBACE,SAAS,EAAE,cAAc,WAAW,EAAE;oBACtC,WAAW;oBACX,IAAI,EAAE,SAAS,CAAC,IAAI;oBACpB,WAAW,EAAE,SAAS,CAAC,WAAW;oBAClC,IAAI,EAAE,SAAS,CAAC,IAAI;oBACpB,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;oBACnC,QAAQ,EAAE,GAAG,CAAC,MAAM;oBACpB,MAAM,EAAE,SAAS,CAAC,MAAM;iBACzB;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QACF,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,IAAI,CAAC;YACH,MAAM,KAAK,CACT,eAAe,CACb,wBAAwB,kBAAkB,CAAC,MAAM,CAAC,UAAU,CAC7D,EACD;gBACE,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,EAAE,cAAc,EAAE,kBAAkB,EAAE;gBAC/C,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,CAAC;aACtC,CACF,CAAC;QACJ,CAAC;gBAAS,CAAC;YACT,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;QACzE,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC;YACd,OAAO,EAAE,0CAA0C,MAAM,0CAA0C;YACnG,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,KAAC,cAAc,IAAC,OAAO,kBACrB,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0HAA0H,EACpI,KAAK,EAAC,cAAc,aAEpB,cAAK,SAAS,EAAC,oGAAoG,YACjH,KAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,GAAG,GAC5B,EACN,wCAAuB,IAChB,GACM,EACjB,MAAC,cAAc,IACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,KAAK,EACX,UAAU,EAAE,CAAC,EACb,SAAS,EAAC,0BAA0B,aAEpC,eAAK,SAAS,EAAC,qCAAqC,aAClD,YAAG,SAAS,EAAC,yBAAyB,gCAAoB,EAC1D,YAAG,SAAS,EAAC,sCAAsC,YAAE,MAAM,GAAK,IAC5D,EACN,eAAK,SAAS,EAAC,+BAA+B,aAC3C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,gDAAgD,8BAEzD,CACP,EACA,CAAC,SAAS,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,CACvC,cAAK,SAAS,EAAC,gDAAgD,wDAEzD,CACP,EACA,SAAS,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC5B,iBAEE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAC7C,SAAS,EAAC,kFAAkF,YAE5F,eAAK,SAAS,EAAC,gBAAgB,aAC7B,YAAG,SAAS,EAAC,kCAAkC,YAC5C,SAAS,CAAC,IAAI,GACb,EACH,SAAS,CAAC,WAAW,IAAI,CACxB,YAAG,SAAS,EAAC,+CAA+C,YACzD,SAAS,CAAC,WAAW,GACpB,CACL,IACG,IAdD,SAAS,CAAC,WAAW,CAenB,CACV,CAAC,IACE,EACN,cAAK,SAAS,EAAC,+BAA+B,YAC5C,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,4IAA4I,aAEtJ,KAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,GAAG,EACpC,gDAA+B,IACxB,GACL,IACS,IACT,CACX,CAAC;AACJ,CAAC","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport { useState } from \"react\";\nimport { useQuery, useQueryClient } from \"@tanstack/react-query\";\nimport { IconPlus } from \"@tabler/icons-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../components/ui/popover.js\";\nimport { sendToAgentChat } from \"../agent-chat.js\";\nimport { EmbeddedExtension } from \"./EmbeddedExtension.js\";\n\ninterface SlotInstall {\n  installId: string;\n  extensionId: string;\n  name: string;\n  description: string;\n  icon: string | null;\n  updatedAt: string;\n  position: number;\n  config: string | null;\n}\n\ninterface AvailableTool {\n  extensionId: string;\n  name: string;\n  description: string;\n  icon: string | null;\n  config: string | null;\n}\n\nexport interface ExtensionSlotProps {\n  /** Stable slot identifier — convention: `<app>.<area>.<position>`. */\n  id: string;\n  /** Object pushed to each embedded extension as `slotContext`. */\n  context?: Record<string, unknown> | null;\n  /** Show a small \"+\" affordance when the slot has no installs. Default: false. */\n  showEmptyAffordance?: boolean;\n  /** Optional className applied to the wrapper. */\n  className?: string;\n  /** Optional className applied to each EmbeddedExtension. */\n  toolClassName?: string;\n}\n\n/**\n * A named UI slot that user-installed extensions can render into. Apps drop this\n * component wherever they want to allow extensions; the framework handles\n * fetching, sandboxing, context delivery, and lifecycle.\n *\n * Example:\n *\n *   <ExtensionSlot\n *     id=\"mail.contact-sidebar.bottom\"\n *     context={{ contactEmail }}\n *     showEmptyAffordance\n *   />\n */\nexport function ExtensionSlot({\n  id,\n  context,\n  showEmptyAffordance,\n  className,\n  toolClassName,\n}: ExtensionSlotProps) {\n  const { data: installs = [], isLoading } = useQuery<SlotInstall[]>({\n    queryKey: [\"slot-installs\", id],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(id)}/installs`,\n        ),\n      );\n      if (!res.ok) return [];\n      return res.json();\n    },\n  });\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (installs.length === 0) {\n    if (!showEmptyAffordance) return null;\n    return (\n      <div className={className}>\n        <SlotEmptyAffordance slotId={id} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={className}>\n      {installs.map((install) => (\n        <EmbeddedExtension\n          key={install.installId}\n          extensionId={install.extensionId}\n          slotId={id}\n          context={context}\n          className={toolClassName}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction SlotEmptyAffordance({ slotId }: { slotId: string }) {\n  const [open, setOpen] = useState(false);\n  const { data: available = [], isLoading } = useQuery<AvailableTool[]>({\n    queryKey: [\"slot-available\", slotId],\n    queryFn: async () => {\n      const res = await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(slotId)}/available`,\n        ),\n      );\n      if (!res.ok) return [];\n      return res.json();\n    },\n    enabled: open,\n  });\n  const queryClient = useQueryClient();\n\n  const install = async (extensionId: string) => {\n    queryClient.setQueryData<SlotInstall[]>(\n      [\"slot-installs\", slotId],\n      (old) => {\n        const extension = available.find((t) => t.extensionId === extensionId);\n        if (!extension || !old) return old;\n        return [\n          ...old,\n          {\n            installId: `optimistic-${extensionId}`,\n            extensionId,\n            name: extension.name,\n            description: extension.description,\n            icon: extension.icon,\n            updatedAt: new Date().toISOString(),\n            position: old.length,\n            config: extension.config,\n          },\n        ];\n      },\n    );\n    setOpen(false);\n    try {\n      await fetch(\n        agentNativePath(\n          `/_agent-native/slots/${encodeURIComponent(slotId)}/install`,\n        ),\n        {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({ extensionId }),\n        },\n      );\n    } finally {\n      queryClient.invalidateQueries({ queryKey: [\"slot-installs\", slotId] });\n    }\n  };\n\n  const requestNew = () => {\n    setOpen(false);\n    sendToAgentChat({\n      message: `Create a new widget that fits in slot \"${slotId}\". I'll describe what it should do next.`,\n      submit: false,\n      openSidebar: true,\n    });\n  };\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"flex w-full items-center gap-2 px-4 py-2 text-[11px] text-muted-foreground/60 hover:text-muted-foreground cursor-pointer\"\n          title=\"Add a widget\"\n        >\n          <div className=\"h-5 w-5 rounded-md border border-dashed border-border/40 flex items-center justify-center shrink-0\">\n            <IconPlus className=\"h-3 w-3\" />\n          </div>\n          <span>Add widget</span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"left\"\n        align=\"end\"\n        sideOffset={8}\n        className=\"w-72 p-0 overflow-hidden\"\n      >\n        <div className=\"px-3 py-2 border-b border-border/40\">\n          <p className=\"text-[12px] font-medium\">Add widget here</p>\n          <p className=\"text-[11px] text-muted-foreground/70\">{slotId}</p>\n        </div>\n        <div className=\"max-h-72 overflow-y-auto py-1\">\n          {isLoading && (\n            <div className=\"px-3 py-3 text-[12px] text-muted-foreground/60\">\n              Loading…\n            </div>\n          )}\n          {!isLoading && available.length === 0 && (\n            <div className=\"px-3 py-3 text-[12px] text-muted-foreground/60\">\n              No widgets available for this slot yet.\n            </div>\n          )}\n          {available.map((extension) => (\n            <button\n              key={extension.extensionId}\n              type=\"button\"\n              onClick={() => install(extension.extensionId)}\n              className=\"flex w-full items-start gap-2 px-3 py-2 text-left hover:bg-accent cursor-pointer\"\n            >\n              <div className=\"flex-1 min-w-0\">\n                <p className=\"text-[12px] font-medium truncate\">\n                  {extension.name}\n                </p>\n                {extension.description && (\n                  <p className=\"text-[11px] text-muted-foreground/70 truncate\">\n                    {extension.description}\n                  </p>\n                )}\n              </div>\n            </button>\n          ))}\n        </div>\n        <div className=\"border-t border-border/40 p-1\">\n          <button\n            type=\"button\"\n            onClick={requestNew}\n            className=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-[12px] text-muted-foreground hover:bg-accent hover:text-foreground cursor-pointer\"\n          >\n            <IconPlus className=\"h-3.5 w-3.5\" />\n            <span>Build a new widget</span>\n          </button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}

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

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