@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/A2AAgentDetailPage.js

@@ -0,0 +1,589 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as t } from "../utils/formatters.js";
+import { PageLayout as n } from "../components/PageLayout.js";
+import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
+import { Button as c } from "../components/Button.js";
+import { Badge as l, StatusBadge as u } from "../components/Badge.js";
+import { isNative as d, nativeImpact as f, nativeNotify as p } from "../../utils/nativeBridge.js";
+import { EmptyState as m } from "../components/EmptyState.js";
+import { FormField as h, Input as g, Textarea as _ } from "../components/Input.js";
+import { readAgentCard as v, readEntitlements as ee, useA2AAgent as te, useDeleteA2AAgent as ne, useRegisterA2AAgent as y, useUpdateA2AAgent as b, validateAgentCard as x } from "../hooks/useA2A.js";
+import { useEffect as S, useMemo as C, useState as w } from "react";
+import { PagePurpose as T } from "@burdenoff/fe-libs/ui";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useParams as re } from "react-router";
+import { ArrowLeft as ie, Edit as ae, ExternalLink as k, Globe as A, Key as oe, Share2 as se, Shield as j, Trash2 as M, Zap as N } from "lucide-react";
+import { toast as P } from "sonner";
+//#region src/botlit/pages/A2AAgentDetailPage.tsx
+var F = [
+	"UNVERIFIED",
+	"VERIFIED_PUBLISHER",
+	"INTERNAL"
+], I = {
+	name: "",
+	description: "",
+	wellKnownUrl: "",
+	trustLevel: "UNVERIFIED",
+	agentCardJson: JSON.stringify({
+		name: "",
+		description: "",
+		url: "",
+		version: "1.0.0",
+		capabilities: {
+			streaming: !1,
+			pushNotifications: !1,
+			stateTransitionHistory: !1
+		},
+		authentication: { schemes: ["bearer"] },
+		defaultInputModes: ["text"],
+		defaultOutputModes: ["text"],
+		skills: []
+	}, null, 2)
+};
+function L(e) {
+	return F.includes(e) ? e : "UNVERIFIED";
+}
+function R(e) {
+	return {
+		name: e.name,
+		description: e.description ?? "",
+		wellKnownUrl: e.wellKnownUrl ?? "",
+		trustLevel: L(e.trustLevel),
+		agentCardJson: JSON.stringify(e.agentCard ?? {}, null, 2)
+	};
+}
+function z(e) {
+	try {
+		let t = JSON.parse(e);
+		return typeof t == "object" && t && !Array.isArray(t) ? t : void 0;
+	} catch {
+		return;
+	}
+}
+var B = ({ isNew: F = !1 }) => {
+	let { agentId: B } = re(), { navigateTo: V } = e(), { data: H, loading: U } = te(F ? void 0 : B), [W, G] = y(), [ce, le] = b(), [ue, de] = ne(), [K, q] = w(F), [J, Y] = w(!1), [X, Z] = w(I);
+	S(() => {
+		H && !F && Z(R(H));
+	}, [H, F]);
+	let Q = C(() => v(K ? z(X.agentCardJson) : H?.agentCard ?? void 0), [
+		K,
+		X.agentCardJson,
+		H
+	]), $ = C(() => ee(H?.entitlements), [H?.entitlements]);
+	if (U && !F) return /* @__PURE__ */ D(n, {
+		title: "Loading...",
+		children: /* @__PURE__ */ D("div", { className: "h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" })
+	});
+	if (!H && !F) return /* @__PURE__ */ D(n, {
+		title: "A2A Agent Not Found",
+		children: /* @__PURE__ */ D(m, {
+			illustration: "empty-people",
+			title: "A2A Agent Not Found",
+			description: "The A2A agent doesn't exist.",
+			action: /* @__PURE__ */ D(c, {
+				onClick: () => V("a2a"),
+				children: "Back to A2A Registry"
+			})
+		})
+	});
+	let fe = (e) => {
+		switch (e) {
+			case "INTERNAL": return "success";
+			case "VERIFIED_PUBLISHER": return "default";
+			default: return "secondary";
+		}
+	}, pe = async () => {
+		if (!X.name.trim()) {
+			P.error("Name is required");
+			return;
+		}
+		let e = z(X.agentCardJson);
+		if (!e) {
+			P.error("Agent card must be a valid JSON object");
+			return;
+		}
+		let t = x(e);
+		if (!t.valid) {
+			P.error(t.errors[0]);
+			return;
+		}
+		if (F) {
+			try {
+				let t = await W({
+					name: X.name.trim(),
+					description: X.description.trim() || null,
+					wellKnownUrl: X.wellKnownUrl.trim() || null,
+					trustLevel: X.trustLevel,
+					agentCard: e
+				});
+				P.success(`Registered "${t.name}"`), V(`a2a/${t.id}`);
+			} catch (e) {
+				P.error(e instanceof Error ? e.message : "Failed to register A2A agent");
+			}
+			return;
+		}
+		if (B) try {
+			await ce({
+				agentId: B,
+				input: {
+					name: X.name.trim(),
+					description: X.description.trim() || null,
+					wellKnownUrl: X.wellKnownUrl.trim() || null,
+					trustLevel: X.trustLevel,
+					agentCard: e
+				}
+			}), P.success("A2A agent updated"), q(!1);
+		} catch (e) {
+			P.error(e instanceof Error ? e.message : "Failed to update A2A agent");
+		}
+	}, me = async () => {
+		if (B) try {
+			await ue(B), d() && p("success"), P.success("A2A agent removed"), V("a2a");
+		} catch (e) {
+			d() && p("error"), P.error(e instanceof Error ? e.message : "Failed to remove A2A agent");
+		}
+	};
+	return /* @__PURE__ */ D(n, {
+		title: /* @__PURE__ */ O("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ D(c, {
+					variant: "ghost",
+					size: "icon",
+					onClick: () => V("a2a"),
+					children: /* @__PURE__ */ D(ie, { size: 20 })
+				}),
+				/* @__PURE__ */ D(se, {
+					size: 24,
+					className: "text-primary"
+				}),
+				/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ D("span", { children: F ? "Register A2A Agent" : H?.name }),
+						!F && H && /* @__PURE__ */ D(u, { status: H.status }),
+						!F && H && /* @__PURE__ */ D(l, {
+							variant: fe(L(H.trustLevel)),
+							children: H.trustLevel.replace("_", " ")
+						})
+					]
+				}), !F && H?.description && /* @__PURE__ */ D("p", {
+					className: "text-sm font-normal text-text-secondary",
+					children: H.description
+				})] })
+			]
+		}),
+		actions: /* @__PURE__ */ D("div", {
+			className: "flex gap-2",
+			children: K ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(c, {
+				variant: "outline",
+				onClick: () => F ? V("a2a") : q(!1),
+				children: "Cancel"
+			}), /* @__PURE__ */ D(c, {
+				onClick: pe,
+				isLoading: G.loading || le.loading,
+				children: F ? "Register Agent" : "Save Changes"
+			})] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(c, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ D(ae, { size: 16 }),
+				onClick: () => {
+					H && Z(R(H)), q(!0);
+				},
+				children: "Edit"
+			}), J ? /* @__PURE__ */ O("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ D(c, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => Y(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ D(c, {
+					variant: "destructive",
+					size: "sm",
+					onClick: () => {
+						f("medium"), me();
+					},
+					isLoading: de.loading,
+					children: "Confirm"
+				})]
+			}) : /* @__PURE__ */ D(c, {
+				variant: "destructive",
+				leftIcon: /* @__PURE__ */ D(M, { size: 16 }),
+				onClick: () => Y(!0),
+				children: "Remove"
+			})] })
+		}),
+		children: /* @__PURE__ */ O("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ D(T, {
+					icon: /* @__PURE__ */ D(A, { size: 18 }),
+					children: "This is one external agent registered in your A2A network. Inspect its public agent card — the skills it advertises, its provider and trust level — and decide how your own agents may delegate work to it. Keeping this entry accurate is what lets Botlit safely hand off tasks to agents outside your workspace."
+				}),
+				K && /* @__PURE__ */ O(r, { children: [/* @__PURE__ */ D(o, { children: /* @__PURE__ */ D(s, { children: "Basic Information" }) }), /* @__PURE__ */ O(i, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ D(h, {
+							label: "Name",
+							required: !0,
+							children: /* @__PURE__ */ D(g, {
+								value: X.name,
+								onChange: (e) => Z({
+									...X,
+									name: e.target.value
+								}),
+								placeholder: "e.g., External Weather Agent"
+							})
+						}),
+						/* @__PURE__ */ D(h, {
+							label: "Description",
+							children: /* @__PURE__ */ D(_, {
+								value: X.description,
+								onChange: (e) => Z({
+									...X,
+									description: e.target.value
+								}),
+								placeholder: "Describe what this A2A agent does...",
+								rows: 3
+							})
+						}),
+						/* @__PURE__ */ D(h, {
+							label: "Well-Known URL",
+							description: "URL to fetch agent.json",
+							children: /* @__PURE__ */ D(g, {
+								value: X.wellKnownUrl,
+								onChange: (e) => Z({
+									...X,
+									wellKnownUrl: e.target.value
+								}),
+								placeholder: "https://example.com/.well-known/agent.json"
+							})
+						}),
+						/* @__PURE__ */ D(h, {
+							label: "Trust Level",
+							children: /* @__PURE__ */ O("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: X.trustLevel,
+								onChange: (e) => Z({
+									...X,
+									trustLevel: L(e.target.value)
+								}),
+								children: [
+									/* @__PURE__ */ D("option", {
+										value: "UNVERIFIED",
+										children: "Unverified"
+									}),
+									/* @__PURE__ */ D("option", {
+										value: "VERIFIED_PUBLISHER",
+										children: "Verified Publisher"
+									}),
+									/* @__PURE__ */ D("option", {
+										value: "INTERNAL",
+										children: "Internal"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ D(h, {
+							label: "Agent Card (JSON)",
+							required: !0,
+							description: "Paste the agent's /.well-known/agent.json document",
+							children: /* @__PURE__ */ D(_, {
+								value: X.agentCardJson,
+								onChange: (e) => Z({
+									...X,
+									agentCardJson: e.target.value
+								}),
+								rows: 12,
+								className: "font-mono text-xs"
+							})
+						}),
+						!z(X.agentCardJson) && /* @__PURE__ */ D("p", {
+							className: "text-sm text-status-error-text",
+							children: "Agent card must be a valid JSON object."
+						})
+					]
+				})] }),
+				/* @__PURE__ */ O(r, {
+					treatment: "glass",
+					glow: !0,
+					children: [/* @__PURE__ */ O(o, { children: [/* @__PURE__ */ O(s, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ D(A, { size: 18 }), "Agent Card"]
+					}), /* @__PURE__ */ D(a, { children: "Public agent metadata per A2A spec" })] }), /* @__PURE__ */ O(i, {
+						className: "space-y-4",
+						children: [!F && H?.wellKnownUrl && /* @__PURE__ */ O("div", {
+							className: "flex items-center gap-2 p-3 bg-bg-sunken rounded-lg",
+							children: [/* @__PURE__ */ D(A, {
+								size: 16,
+								className: "text-text-secondary"
+							}), /* @__PURE__ */ O("a", {
+								href: H.wellKnownUrl,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "text-sm text-primary hover:underline flex items-center gap-1",
+								children: [H.wellKnownUrl, /* @__PURE__ */ D(k, { size: 12 })]
+							})]
+						}), /* @__PURE__ */ O("div", {
+							className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+							children: [
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm text-text-secondary",
+									children: "Agent URL"
+								}), /* @__PURE__ */ D("p", {
+									className: "font-medium font-mono text-sm",
+									children: Q.url || "—"
+								})] }),
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm text-text-secondary",
+									children: "Version"
+								}), /* @__PURE__ */ D(l, {
+									variant: "outline",
+									children: Q.version || "—"
+								})] }),
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm text-text-secondary",
+									children: "Provider"
+								}), /* @__PURE__ */ D("p", {
+									className: "font-medium",
+									children: Q.providerOrganization || "—"
+								})] }),
+								/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm text-text-secondary",
+									children: "Documentation"
+								}), Q.documentationUrl ? /* @__PURE__ */ O("a", {
+									href: Q.documentationUrl,
+									target: "_blank",
+									rel: "noopener noreferrer",
+									className: "text-primary hover:underline flex items-center gap-1",
+									children: ["View Docs ", /* @__PURE__ */ D(k, { size: 12 })]
+								}) : /* @__PURE__ */ D("p", {
+									className: "text-text-secondary",
+									children: "—"
+								})] })
+							]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ O(r, { children: [/* @__PURE__ */ D(o, { children: /* @__PURE__ */ O(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ D(N, { size: 18 }), "Capabilities"]
+				}) }), /* @__PURE__ */ O(i, { children: [/* @__PURE__ */ D("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 gap-4",
+					children: [
+						{
+							key: "streaming",
+							label: "Streaming",
+							value: Q.capabilities.streaming
+						},
+						{
+							key: "pushNotifications",
+							label: "Push Notifications",
+							value: Q.capabilities.pushNotifications
+						},
+						{
+							key: "stateTransitionHistory",
+							label: "State History",
+							value: Q.capabilities.stateTransitionHistory
+						}
+					].map((e) => /* @__PURE__ */ O("div", {
+						className: `p-3 rounded-lg border ${e.value ? "border-green-500 bg-green-500/10" : "border-border-subtle bg-bg-sunken"}`,
+						children: [/* @__PURE__ */ D("p", {
+							className: "font-medium",
+							children: e.label
+						}), /* @__PURE__ */ D(l, {
+							variant: e.value ? "success" : "secondary",
+							children: e.value ? "Supported" : "Not Supported"
+						})]
+					}, e.key))
+				}), /* @__PURE__ */ O("div", {
+					className: "mt-4 grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+						className: "text-sm text-text-secondary mb-2",
+						children: "Input Modes"
+					}), /* @__PURE__ */ D("div", {
+						className: "flex flex-wrap gap-2",
+						children: Q.defaultInputModes.length > 0 ? Q.defaultInputModes.map((e) => /* @__PURE__ */ D(l, {
+							variant: "outline",
+							children: e
+						}, e)) : /* @__PURE__ */ D("span", {
+							className: "text-text-secondary",
+							children: "None"
+						})
+					})] }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+						className: "text-sm text-text-secondary mb-2",
+						children: "Output Modes"
+					}), /* @__PURE__ */ D("div", {
+						className: "flex flex-wrap gap-2",
+						children: Q.defaultOutputModes.length > 0 ? Q.defaultOutputModes.map((e) => /* @__PURE__ */ D(l, {
+							variant: "outline",
+							children: e
+						}, e)) : /* @__PURE__ */ D("span", {
+							className: "text-text-secondary",
+							children: "None"
+						})
+					})] })]
+				})] })] }),
+				/* @__PURE__ */ O(r, { children: [/* @__PURE__ */ D(o, { children: /* @__PURE__ */ O(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ D(oe, { size: 18 }), "Authentication"]
+				}) }), /* @__PURE__ */ D(i, { children: /* @__PURE__ */ O("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ D("p", {
+						className: "text-sm text-text-secondary",
+						children: "Supported Schemes"
+					}), /* @__PURE__ */ D("div", {
+						className: "flex flex-wrap gap-2",
+						children: Q.authenticationSchemes.length > 0 ? Q.authenticationSchemes.map((e) => /* @__PURE__ */ D(l, {
+							variant: "outline",
+							children: e
+						}, e)) : /* @__PURE__ */ D("span", {
+							className: "text-text-secondary",
+							children: "None specified"
+						})
+					})]
+				}) })] }),
+				/* @__PURE__ */ O(r, { children: [/* @__PURE__ */ O(o, { children: [/* @__PURE__ */ O(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ D(N, { size: 18 }), "Skills"]
+				}), /* @__PURE__ */ D(a, { children: "Capabilities exposed by this agent" })] }), /* @__PURE__ */ D(i, { children: Q.skills.length > 0 ? /* @__PURE__ */ D("div", {
+					className: "space-y-3",
+					children: Q.skills.map((e) => /* @__PURE__ */ O("div", {
+						className: "p-4 border border-border-subtle rounded-lg",
+						children: [
+							/* @__PURE__ */ O("div", {
+								className: "flex items-start justify-between",
+								children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h4", {
+									className: "font-medium",
+									children: e.name
+								}), /* @__PURE__ */ D("p", {
+									className: "text-sm text-text-secondary",
+									children: e.description
+								})] }), /* @__PURE__ */ D(l, {
+									variant: "outline",
+									children: e.id
+								})]
+							}),
+							e.tags.length > 0 && /* @__PURE__ */ D("div", {
+								className: "mt-2 flex flex-wrap gap-1",
+								children: e.tags.map((e) => /* @__PURE__ */ D(l, {
+									variant: "secondary",
+									className: "text-xs",
+									children: e
+								}, e))
+							}),
+							e.examples.length > 0 && /* @__PURE__ */ O("div", {
+								className: "mt-2",
+								children: [/* @__PURE__ */ D("p", {
+									className: "text-xs text-text-secondary",
+									children: "Examples:"
+								}), /* @__PURE__ */ D("ul", {
+									className: "text-sm text-text-secondary list-disc list-inside",
+									children: e.examples.map((e, t) => /* @__PURE__ */ D("li", { children: e }, t))
+								})]
+							})
+						]
+					}, e.id))
+				}) : /* @__PURE__ */ D("p", {
+					className: "text-text-secondary",
+					children: "No skills defined"
+				}) })] }),
+				/* @__PURE__ */ O(r, { children: [/* @__PURE__ */ O(o, { children: [/* @__PURE__ */ O(s, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ D(j, { size: 18 }), "Entitlements"]
+				}), /* @__PURE__ */ D(a, { children: "Which apps/agents can invoke this A2A agent" })] }), /* @__PURE__ */ D(i, { children: $.length > 0 ? /* @__PURE__ */ D("div", {
+					className: "space-y-3",
+					children: $.map((e) => /* @__PURE__ */ O("div", {
+						className: "p-4 border border-border-subtle rounded-lg",
+						children: [/* @__PURE__ */ O("div", {
+							className: "flex items-center justify-between mb-2",
+							children: [/* @__PURE__ */ O("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ D(l, {
+									variant: "outline",
+									className: "capitalize",
+									children: e.sourceType
+								}), /* @__PURE__ */ D("span", {
+									className: "font-mono text-sm",
+									children: e.sourceId
+								})]
+							}), e.maxHops && /* @__PURE__ */ O("span", {
+								className: "text-sm text-text-secondary",
+								children: ["Max Hops: ", e.maxHops]
+							})]
+						}), /* @__PURE__ */ O("div", {
+							className: "grid grid-cols-2 gap-4 text-sm",
+							children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+								className: "text-text-secondary",
+								children: "Allowed Skills"
+							}), e.allowedSkills.length > 0 ? /* @__PURE__ */ D("div", {
+								className: "flex flex-wrap gap-1 mt-1",
+								children: e.allowedSkills.map((e) => /* @__PURE__ */ D(l, {
+									variant: "success",
+									className: "text-xs",
+									children: e
+								}, e))
+							}) : /* @__PURE__ */ D("span", {
+								className: "text-text-secondary",
+								children: "All"
+							})] }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+								className: "text-text-secondary",
+								children: "Disallowed Skills"
+							}), e.disallowedSkills.length > 0 ? /* @__PURE__ */ D("div", {
+								className: "flex flex-wrap gap-1 mt-1",
+								children: e.disallowedSkills.map((e) => /* @__PURE__ */ D(l, {
+									variant: "destructive",
+									className: "text-xs",
+									children: e
+								}, e))
+							}) : /* @__PURE__ */ D("span", {
+								className: "text-text-secondary",
+								children: "None"
+							})] })]
+						})]
+					}, e.id))
+				}) : /* @__PURE__ */ D("p", {
+					className: "text-text-secondary",
+					children: "No entitlements configured"
+				}) })] }),
+				!F && H && /* @__PURE__ */ O(r, { children: [/* @__PURE__ */ D(o, { children: /* @__PURE__ */ D(s, { children: "Metadata" }) }), /* @__PURE__ */ D(i, { children: /* @__PURE__ */ O("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4 text-sm",
+					children: [
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+							className: "text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ D("p", {
+							className: "font-medium",
+							children: t(H.createdAt)
+						})] }),
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+							className: "text-text-secondary",
+							children: "Updated"
+						}), /* @__PURE__ */ D("p", {
+							className: "font-medium",
+							children: t(H.updatedAt)
+						})] }),
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+							className: "text-text-secondary",
+							children: "Revision"
+						}), /* @__PURE__ */ D("p", {
+							className: "font-medium",
+							children: H.revision
+						})] }),
+						/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+							className: "text-text-secondary",
+							children: "Visibility"
+						}), /* @__PURE__ */ D(l, {
+							variant: "outline",
+							children: H.visibility
+						})] })
+					]
+				}) })] })
+			]
+		})
+	});
+};
+//#endregion
+export { B as A2AAgentDetailPage };
+
+//# sourceMappingURL=A2AAgentDetailPage.js.map