@agent-native/core 0.15.13 → 0.16.0

package/dist/client/resources/BuiltinCapabilityDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiltinCapabilityDetail.js","sourceRoot":"","sources":["../../../src/client/resources/BuiltinCapabilityDetail.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport {\n  IconAlertTriangle,\n  IconBrowser,\n  IconCheck,\n  IconDeviceDesktop,\n  IconLoader2,\n  IconPlugConnected,\n} from \"@tabler/icons-react\";\nimport { cn } from \"../utils.js\";\nimport type { McpServerScope } from \"./use-mcp-servers.js\";\nimport {\n  useToggleBuiltinCapability,\n  type BuiltinCapability,\n  type BuiltinCapabilityStatus,\n} from \"./use-builtin-capabilities.js\";\n\ninterface BuiltinCapabilityDetailProps {\n  capability: BuiltinCapability;\n  scope: McpServerScope;\n  canEditOrg: boolean;\n}\n\nexport function BuiltinCapabilityDetail({\n  capability,\n  scope,\n  canEditOrg,\n}: BuiltinCapabilityDetailProps) {\n  const toggle = useToggleBuiltinCapability();\n  const enabled = capability.enabled[scope];\n  const status = capability.status[scope];\n  const canToggle =\n    capability.available &&\n    (scope === \"user\" || canEditOrg) &&\n    !toggle.isPending;\n  const isBrowser = capability.exclusiveGroup === \"browser\";\n\n  const onToggle = () => {\n    if (!canToggle) return;\n    toggle.mutate({ id: capability.id, scope, enabled: !enabled });\n  };\n\n  return (\n    <div className=\"flex h-full flex-col overflow-y-auto\">\n      <div className=\"px-4 py-4\">\n        <div className=\"mb-3 flex items-center gap-2\">\n          {isBrowser ? (\n            <IconBrowser className=\"h-4 w-4 text-muted-foreground\" />\n          ) : (\n            <IconDeviceDesktop className=\"h-4 w-4 text-muted-foreground\" />\n          )}\n          <h2 className=\"min-w-0 flex-1 truncate text-[14px] font-medium text-foreground\">\n            {capability.name}\n          </h2>\n          <StatusBadge enabled={enabled} status={status} />\n        </div>\n\n        <p className=\"mb-4 text-[12px] leading-relaxed text-muted-foreground\">\n          {capability.description}\n        </p>\n\n        <div className=\"mb-4 rounded-md border border-border bg-muted/30 p-3\">\n          <div className=\"flex items-center justify-between gap-3\">\n            <div className=\"min-w-0\">\n              <div className=\"text-[12px] font-medium text-foreground\">\n                {scope === \"user\" ? \"Personal\" : \"Organization\"} access\n              </div>\n              <p className=\"mt-0.5 text-[11px] leading-relaxed text-muted-foreground\">\n                {scope === \"user\"\n                  ? \"Available only to your agent sessions.\"\n                  : \"Available to agents in the active organization.\"}\n              </p>\n            </div>\n            <button\n              type=\"button\"\n              role=\"switch\"\n              aria-checked={enabled}\n              disabled={!canToggle}\n              onClick={onToggle}\n              className={cn(\n                \"relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors\",\n                enabled ? \"bg-primary\" : \"bg-muted-foreground/25\",\n                !canToggle && \"cursor-not-allowed opacity-60\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"block h-4 w-4 rounded-full bg-background shadow-sm transition-transform\",\n                  enabled ? \"translate-x-4\" : \"translate-x-0.5\",\n                )}\n              />\n            </button>\n          </div>\n\n          {toggle.isPending && (\n            <div className=\"mt-2 inline-flex items-center gap-1 text-[11px] text-muted-foreground\">\n              <IconLoader2 className=\"h-3 w-3 animate-spin\" />\n              Updating tools…\n            </div>\n          )}\n          {toggle.error && (\n            <div className=\"mt-2 text-[11px] text-red-600 dark:text-red-400\">\n              {toggle.error instanceof Error\n                ? toggle.error.message\n                : \"Could not update this capability.\"}\n            </div>\n          )}\n        </div>\n\n        <dl className=\"space-y-3\">\n          <Field label=\"Command\">\n            <code className=\"rounded bg-muted px-1.5 py-0.5 text-[11px] text-foreground break-all\">\n              {capability.command} {capability.args.join(\" \")}\n            </code>\n          </Field>\n\n          {capability.notes && (\n            <Field label=\"Requirements\">\n              <p className=\"text-[12px] leading-relaxed text-muted-foreground\">\n                {capability.notes}\n              </p>\n            </Field>\n          )}\n\n          {!capability.available && (\n            <Field label=\"Availability\">\n              <p className=\"text-[12px] leading-relaxed text-red-600 dark:text-red-400\">\n                {capability.unavailableReason ?? \"Not available on this host.\"}\n              </p>\n            </Field>\n          )}\n\n          <Field label=\"Tools\">\n            <ToolsSummary enabled={enabled} status={status} />\n          </Field>\n        </dl>\n\n        {capability.id === \"computer-use\" && (\n          <p className=\"mt-6 rounded-md border border-border bg-muted/40 p-2.5 text-[11px] leading-relaxed text-muted-foreground\">\n            macOS may ask for Screen Recording and Accessibility permission\n            before the tools can control local apps. The agent should still ask\n            before taking sensitive desktop actions.\n          </p>\n        )}\n\n        {capability.id === \"browser-chrome-devtools\" && (\n          <p className=\"mt-6 rounded-md border border-border bg-muted/40 p-2.5 text-[11px] leading-relaxed text-muted-foreground\">\n            Chrome DevTools attaches to your live Chrome profile when remote\n            debugging is available, so it can verify pages that rely on your\n            existing login.\n          </p>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction Field({\n  label,\n  children,\n}: {\n  label: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div>\n      <dt className=\"mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70\">\n        {label}\n      </dt>\n      <dd>{children}</dd>\n    </div>\n  );\n}\n\nfunction StatusBadge({\n  enabled,\n  status,\n}: {\n  enabled: boolean;\n  status?: BuiltinCapabilityStatus;\n}) {\n  if (!enabled) {\n    return (\n      <span className=\"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n        Off\n      </span>\n    );\n  }\n  if (status?.state === \"connected\") {\n    return (\n      <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n        <IconCheck className=\"h-2.5 w-2.5\" />\n        Connected\n      </span>\n    );\n  }\n  if (status?.state === \"error\") {\n    return (\n      <span\n        className=\"inline-flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-[10px] font-medium text-red-600 dark:text-red-400\"\n        title={status.error}\n      >\n        <IconAlertTriangle className=\"h-2.5 w-2.5\" />\n        Error\n      </span>\n    );\n  }\n  return (\n    <span className=\"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n      <IconPlugConnected className=\"h-2.5 w-2.5\" />\n      Ready\n    </span>\n  );\n}\n\nfunction ToolsSummary({\n  enabled,\n  status,\n}: {\n  enabled: boolean;\n  status?: BuiltinCapabilityStatus;\n}) {\n  if (!enabled) {\n    return (\n      <span className=\"text-[12px] text-muted-foreground\">\n        Disabled. Toggle it on to expose MCP tools to the agent.\n      </span>\n    );\n  }\n  if (status?.state === \"connected\") {\n    return (\n      <span className=\"text-[12px] text-foreground\">\n        {status.toolCount} tool{status.toolCount === 1 ? \"\" : \"s\"} exposed\n      </span>\n    );\n  }\n  if (status?.state === \"error\") {\n    return (\n      <span className=\"text-[12px] text-red-600 dark:text-red-400\">\n        {status.error}\n      </span>\n    );\n  }\n  return (\n    <span className=\"text-[12px] text-muted-foreground\">\n      Enabled. Tools will appear after the MCP manager connects.\n    </span>\n  );\n}\n"]}

package/dist/client/resources/ResourceEditor.d.ts

@@ -9,6 +9,8 @@ export interface ResourceEditorProps {
     onSaveStatusChange?: (status: "idle" | "saving" | "saved") => void;
     /** When true, the editor's internal toolbar row is hidden */
     hideToolbar?: boolean;
+    /** When true, content can be viewed and selected but not modified */
+    readOnly?: boolean;
 }
-export declare function ResourceEditor({ resource, onSave, view: controlledView, onViewChange, onSaveStatusChange, hideToolbar, }: ResourceEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceEditor({ resource, onSave, view: controlledView, onViewChange, onSaveStatusChange, hideToolbar, readOnly, }: ResourceEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ResourceEditor.d.ts.map

package/dist/client/resources/ResourceEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceEditor.d.ts","sourceRoot":"","sources":["../../../src/client/resources/ResourceEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAiBnD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IACnE,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkiCD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,kBAAkB,EAClB,WAAW,GACZ,EAAE,mBAAmB,2CAuLrB"}
+{"version":3,"file":"ResourceEditor.d.ts","sourceRoot":"","sources":["../../../src/client/resources/ResourceEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAiBnD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,GAAG,MAAM,KAAK,IAAI,CAAC;IAC9C,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IACnE,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAskCD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,QAAQ,GACT,EAAE,mBAAmB,2CAgMrB"}

package/dist/client/resources/ResourceEditor.js

@@ -36,9 +36,11 @@ const FM_INPUT_STYLE = {
     width: "100%",
     padding: 0,
 };
-function FrontmatterBar({ resourcePath, frontmatter, onChange, }) {
+function FrontmatterBar({ resourcePath, frontmatter, onChange, readOnly, }) {
     const getField = (key) => getFrontmatterValue(frontmatter, key) ?? "";
     const updateField = (key, value) => {
+        if (readOnly)
+            return;
         const exists = frontmatter.fields.some((f) => f.key === key);
         const newFields = exists
             ? frontmatter.fields.map((f) => (f.key === key ? { ...f, value } : f))
@@ -66,7 +68,7 @@ function FrontmatterBar({ resourcePath, frontmatter, onChange, }) {
             fontSize: 12,
             lineHeight: 1.5,
             color: "hsl(var(--muted-foreground))",
-        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx("input", { value: name, onChange: (e) => updateField("name", e.target.value), placeholder: isCustomAgent ? "Agent name" : "Skill name", style: {
+        }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx("input", { value: name, onChange: (e) => updateField("name", e.target.value), readOnly: readOnly, placeholder: isCustomAgent ? "Agent name" : "Skill name", style: {
                             ...FM_INPUT_STYLE,
                             fontWeight: 600,
                             color: "hsl(var(--foreground))",
@@ -92,14 +94,14 @@ function FrontmatterBar({ resourcePath, frontmatter, onChange, }) {
                                 ? "none"
                                 : "1px dashed hsl(var(--border))",
                             fontWeight: 500,
-                        }, children: [_jsx("input", { type: "checkbox", checked: isUserInvocable, onChange: (e) => updateField("user-invocable", e.target.checked ? "true" : "false"), style: { display: "none" } }), "/", name || "command"] })) : null, isCustomAgent ? (_jsxs("select", { value: model, onChange: (e) => updateField("model", e.target.value), style: {
+                        }, children: [_jsx("input", { type: "checkbox", checked: isUserInvocable, disabled: readOnly, onChange: (e) => updateField("user-invocable", e.target.checked ? "true" : "false"), style: { display: "none" } }), "/", name || "command"] })) : null, isCustomAgent ? (_jsxs("select", { value: model, disabled: readOnly, onChange: (e) => updateField("model", e.target.value), style: {
                             borderRadius: 4,
                             border: "1px solid hsl(var(--border))",
                             background: "hsl(var(--background))",
                             color: "hsl(var(--foreground))",
                             fontSize: 11,
                             padding: "2px 6px",
-                        }, children: [_jsx("option", { value: "inherit", children: "Default model" }), _jsx("option", { value: "claude-sonnet-4-6", children: "Claude Sonnet 4.6" }), _jsx("option", { value: "claude-haiku-4-5-20251001", children: "Claude Haiku 4.5" })] })) : null] }), _jsx("input", { value: description, onChange: (e) => updateField("description", e.target.value), placeholder: isCustomAgent
+                        }, children: [_jsx("option", { value: "inherit", children: "Default model" }), _jsx("option", { value: "claude-sonnet-4-6", children: "Claude Sonnet 4.6" }), _jsx("option", { value: "claude-haiku-4-5-20251001", children: "Claude Haiku 4.5" })] })) : null] }), _jsx("input", { value: description, readOnly: readOnly, onChange: (e) => updateField("description", e.target.value), placeholder: isCustomAgent
                     ? "Description — what this agent should handle"
                     : "Description — what this skill does", style: {
                     ...FM_INPUT_STYLE,
@@ -115,7 +117,7 @@ function FrontmatterBar({ resourcePath, frontmatter, onChange, }) {
                             fontSize: 10,
                             color: "hsl(var(--muted-foreground))",
                             minWidth: 28,
-                        }, children: "Tools" }), _jsxs("select", { value: tools, onChange: (e) => updateField("tools", e.target.value), style: {
+                        }, children: "Tools" }), _jsxs("select", { value: tools, disabled: readOnly, onChange: (e) => updateField("tools", e.target.value), style: {
                             borderRadius: 4,
                             border: "1px solid hsl(var(--border))",
                             background: "hsl(var(--background))",
@@ -487,7 +489,7 @@ const shStyles = `
 .sh-num { color: #fca5a5; }
 .sh-lit { color: #c4b5fd; }
 `;
-function SyntaxHighlightEditor({ value, onChange, language: _language, }) {
+function SyntaxHighlightEditor({ value, onChange, language: _language, readOnly, }) {
     const textareaRef = useRef(null);
     const preRef = useRef(null);
     const highlighted = useMemo(() => highlightJson(value), [value]);
@@ -518,7 +520,10 @@ function SyntaxHighlightEditor({ value, onChange, language: _language, }) {
                             pointerEvents: "none",
                             color: "hsl(var(--muted-foreground))",
                             background: "transparent",
-                        }, dangerouslySetInnerHTML: { __html: highlighted + "\n" } }), _jsx("textarea", { ref: textareaRef, value: value, onChange: (e) => onChange(e.target.value), onScroll: syncScroll, spellCheck: false, style: {
+                        }, dangerouslySetInnerHTML: { __html: highlighted + "\n" } }), _jsx("textarea", { ref: textareaRef, value: value, onChange: (e) => {
+                            if (!readOnly)
+                                onChange(e.target.value);
+                        }, onScroll: syncScroll, readOnly: readOnly, spellCheck: false, style: {
                             ...sharedStyle,
                             position: "absolute",
                             inset: 0,
@@ -533,7 +538,7 @@ function SyntaxHighlightEditor({ value, onChange, language: _language, }) {
                             WebkitTextFillColor: "transparent",
                         } })] })] }));
 }
-function VisualMarkdownEditor({ content, onChange, resourcePath, }) {
+function VisualMarkdownEditor({ content, onChange, resourcePath, readOnly, }) {
     const isSettingContent = useRef(false);
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
@@ -575,12 +580,15 @@ function VisualMarkdownEditor({ content, onChange, resourcePath, }) {
             }),
         ],
         content: parsed?.body ?? content,
+        editable: !readOnly,
         editorProps: {
             attributes: {
                 class: "re-prose",
             },
         },
         onUpdate: ({ editor }) => {
+            if (readOnly)
+                return;
             if (isSettingContent.current)
                 return;
             try {
@@ -595,6 +603,11 @@ function VisualMarkdownEditor({ content, onChange, resourcePath, }) {
             }
         },
     });
+    useEffect(() => {
+        if (!editor || editor.isDestroyed)
+            return;
+        editor.setEditable(!readOnly);
+    }, [editor, readOnly]);
     useEffect(() => {
         if (!editor || editor.isDestroyed)
             return;
@@ -622,7 +635,13 @@ function VisualMarkdownEditor({ content, onChange, resourcePath, }) {
             editor.chain().focus("end").run();
         }
     };
-    return (_jsxs("div", { className: "re-editor-wrapper re-editor-clickable", onClick: handleWrapperClick, style: { position: "relative", minHeight: "100%", cursor: "text" }, children: [parsed && (_jsx(FrontmatterBar, { resourcePath: resourcePath, frontmatter: parsed, onChange: (updated) => {
+    return (_jsxs("div", { className: "re-editor-wrapper re-editor-clickable", onClick: handleWrapperClick, style: {
+            position: "relative",
+            minHeight: "100%",
+            cursor: readOnly ? "default" : "text",
+        }, children: [parsed && (_jsx(FrontmatterBar, { resourcePath: resourcePath, frontmatter: parsed, readOnly: readOnly, onChange: (updated) => {
+                    if (readOnly)
+                        return;
                     frontmatterRef.current = updated;
                     // Get current body and combine with updated frontmatter
                     try {
@@ -632,7 +651,7 @@ function VisualMarkdownEditor({ content, onChange, resourcePath, }) {
                     catch {
                         // fallback
                     }
-                } })), _jsx(InlineBubbleToolbar, { editor: editor }), _jsx(SlashMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }));
+                } })), !readOnly && _jsx(InlineBubbleToolbar, { editor: editor }), !readOnly && _jsx(SlashMenu, { editor: editor }), _jsx(EditorContent, { editor: editor })] }));
 }
 function parseRemoteAgentContent(content, path) {
     const fallbackId = getRemoteAgentIdFromPath(path);
@@ -665,7 +684,7 @@ function serializeRemoteAgent(value) {
         color: value.color,
     }, null, 2) + "\n");
 }
-function RemoteAgentFormEditor({ resource, onChange, }) {
+function RemoteAgentFormEditor({ resource, onChange, readOnly, }) {
     const [value, setValue] = useState(() => parseRemoteAgentContent(resource.content, resource.path));
     const prevIdRef = useRef(resource.id);
     useEffect(() => {
@@ -675,15 +694,17 @@ function RemoteAgentFormEditor({ resource, onChange, }) {
         }
     }, [resource.id, resource.content, resource.path]);
     const update = (patch) => {
+        if (readOnly)
+            return;
         const next = { ...value, ...patch };
         setValue(next);
         onChange(serializeRemoteAgent(next));
     };
     const inputClass = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent";
     const labelClass = "block text-[11px] font-medium text-muted-foreground mb-1";
-    return (_jsx("div", { className: "flex flex-1 min-h-0 flex-col overflow-y-auto p-4", children: _jsxs("div", { className: "max-w-md space-y-3", children: [_jsx("p", { className: "text-[11px] text-muted-foreground/70 leading-snug", children: "Connected remote agent over the A2A protocol. @-mention it in chat to delegate tasks." }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Name" }), _jsx("input", { className: inputClass, value: value.name, onChange: (e) => update({ name: e.target.value }), placeholder: "Analytics" })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "URL" }), _jsx("input", { className: inputClass, value: value.url, onChange: (e) => update({ url: e.target.value }), placeholder: "https://analytics.example.com" }), _jsxs("p", { className: "mt-1 text-[10px] text-muted-foreground/50", children: ["A2A endpoint. The agent card is served at", " ", _jsx("code", { children: "/.well-known/agent-card.json" }), "."] })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Description" }), _jsx("textarea", { className: cn(inputClass, "resize-y"), rows: 3, value: value.description, onChange: (e) => update({ description: e.target.value }), placeholder: "What this agent is good at \u2014 helps the main agent decide when to delegate." })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: value.color, onChange: (e) => update({ color: e.target.value }), className: "h-8 w-10 cursor-pointer rounded border border-border bg-transparent" }), _jsx("input", { className: cn(inputClass, "flex-1"), value: value.color, onChange: (e) => update({ color: e.target.value }), placeholder: "#6B7280" })] })] })] }) }));
+    return (_jsx("div", { className: "flex flex-1 min-h-0 flex-col overflow-y-auto p-4", children: _jsxs("div", { className: "max-w-md space-y-3", children: [_jsx("p", { className: "text-[11px] text-muted-foreground/70 leading-snug", children: "Connected remote agent over the A2A protocol. @-mention it in chat to delegate tasks." }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Name" }), _jsx("input", { className: inputClass, value: value.name, readOnly: readOnly, onChange: (e) => update({ name: e.target.value }), placeholder: "Analytics" })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "URL" }), _jsx("input", { className: inputClass, value: value.url, readOnly: readOnly, onChange: (e) => update({ url: e.target.value }), placeholder: "https://analytics.example.com" }), _jsxs("p", { className: "mt-1 text-[10px] text-muted-foreground/50", children: ["A2A endpoint. The agent card is served at", " ", _jsx("code", { children: "/.well-known/agent-card.json" }), "."] })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Description" }), _jsx("textarea", { className: cn(inputClass, "resize-y"), rows: 3, value: value.description, readOnly: readOnly, onChange: (e) => update({ description: e.target.value }), placeholder: "What this agent is good at \u2014 helps the main agent decide when to delegate." })] }), _jsxs("div", { children: [_jsx("label", { className: labelClass, children: "Color" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: value.color, disabled: readOnly, onChange: (e) => update({ color: e.target.value }), className: "h-8 w-10 cursor-pointer rounded border border-border bg-transparent" }), _jsx("input", { className: cn(inputClass, "flex-1"), value: value.color, readOnly: readOnly, onChange: (e) => update({ color: e.target.value }), placeholder: "#6B7280" })] })] })] }) }));
 }
-export function ResourceEditor({ resource, onSave, view: controlledView, onViewChange, onSaveStatusChange, hideToolbar, }) {
+export function ResourceEditor({ resource, onSave, view: controlledView, onViewChange, onSaveStatusChange, hideToolbar, readOnly, }) {
     const [content, setContent] = useState(resource.content);
     const [internalView, setInternalView] = useState(getViewPref);
     const view = controlledView ?? internalView;
@@ -700,6 +721,8 @@ export function ResourceEditor({ resource, onSave, view: controlledView, onViewC
         }
     }, [resource.id, resource.content, onSaveStatusChange]);
     const handleChange = useCallback((newContent) => {
+        if (readOnly)
+            return;
         setContent(newContent);
         setSaveStatus("idle");
         onSaveStatusChange?.("idle");
@@ -714,7 +737,7 @@ export function ResourceEditor({ resource, onSave, view: controlledView, onViewC
                 onSaveStatusChange?.("saved");
             }, 300);
         }, 1000);
-    }, [onSave, onSaveStatusChange]);
+    }, [onSave, onSaveStatusChange, readOnly]);
     const switchView = useCallback((v) => {
         setInternalView(v);
         setViewPref(v);
@@ -732,7 +755,7 @@ export function ResourceEditor({ resource, onSave, view: controlledView, onViewC
     const isRemoteAgent = isRemoteAgentPath(resource.path);
     // Remote-agent manifest → form editor
     if (isRemoteAgent) {
-        return (_jsx("div", { className: "flex h-full flex-col", children: _jsx(RemoteAgentFormEditor, { resource: resource, onChange: handleChange }) }));
+        return (_jsx("div", { className: "flex h-full flex-col", children: _jsx(RemoteAgentFormEditor, { resource: resource, onChange: handleChange, readOnly: readOnly }) }));
     }
     // Image preview
     if (isImage) {
@@ -748,14 +771,14 @@ export function ResourceEditor({ resource, onSave, view: controlledView, onViewC
                                 ? "Saving..."
                                 : saveStatus === "saved"
                                     ? "Saved"
-                                    : "" })] })), view === "visual" ? (_jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-3", children: _jsx(VisualMarkdownEditor, { content: content, onChange: handleChange, resourcePath: resource.path }) }, resource.id + "-visual")) : (_jsx("textarea", { value: content, onChange: (e) => handleChange(e.target.value), className: "flex-1 min-h-0 resize-none bg-transparent p-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50", style: {
+                                    : "" })] })), view === "visual" ? (_jsx("div", { className: "flex-1 min-h-0 overflow-y-auto p-3", children: _jsx(VisualMarkdownEditor, { content: content, onChange: handleChange, resourcePath: resource.path, readOnly: readOnly }) }, resource.id + "-visual")) : (_jsx("textarea", { value: content, onChange: (e) => handleChange(e.target.value), readOnly: readOnly, className: "flex-1 min-h-0 resize-none bg-transparent p-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50", style: {
                         fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
                         lineHeight: 1.6,
                     }, spellCheck: false }))] }));
     }
     // Non-markdown text files
     const isJson = resource.mimeType === "application/json" || resource.path.endsWith(".json");
-    return (_jsx("div", { className: "flex h-full flex-col", children: isJson ? (_jsx(SyntaxHighlightEditor, { value: content, onChange: handleChange, language: "json" })) : (_jsx("textarea", { value: content, onChange: (e) => handleChange(e.target.value), className: "flex-1 min-h-0 resize-none bg-transparent p-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50", style: {
+    return (_jsx("div", { className: "flex h-full flex-col", children: isJson ? (_jsx(SyntaxHighlightEditor, { value: content, onChange: handleChange, language: "json", readOnly: readOnly })) : (_jsx("textarea", { value: content, onChange: (e) => handleChange(e.target.value), readOnly: readOnly, className: "flex-1 min-h-0 resize-none bg-transparent p-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50", style: {
                 fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
                 lineHeight: 1.6,
             }, spellCheck: false })) }));