@acarmisc/backstage-plugin-ai-agents 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,1000 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types.ts
+function annotation(entity, key) {
+  return entity.metadata.annotations?.[`${AI_AGENT_ANNOTATION_PREFIX}/${key}`];
+}
+function parseFloatSafe(value) {
+  if (!value) return void 0;
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : void 0;
+}
+function parseCapabilities(raw) {
+  if (!raw) return [];
+  return raw.split(/[,\n]/).map((s) => s.trim()).filter(Boolean).map((token) => {
+    const [label, catRaw] = token.split(":").map((s) => s.trim());
+    const category = catRaw ? catRaw : void 0;
+    return {
+      label,
+      category: category && VALID_CATEGORIES.has(category) ? category : void 0
+    };
+  });
+}
+function entityRef(entity) {
+  const ns = entity.metadata.namespace ?? "default";
+  return `${entity.kind.toLowerCase()}:${ns}/${entity.metadata.name}`;
+}
+function purpose(entity) {
+  const explicit = annotation(entity, "purpose");
+  return (explicit ?? entity.metadata.description ?? "").trim();
+}
+function entityToAgent(entity, status) {
+  if (entity.spec?.type !== AI_AGENT_TYPE) return void 0;
+  const links = (entity.metadata.links ?? []).map((l) => ({
+    url: l.url,
+    title: l.title ?? l.url,
+    icon: l.icon
+  }));
+  return {
+    entityRef: entityRef(entity),
+    name: entity.metadata.name,
+    title: entity.metadata.title,
+    description: entity.metadata.description,
+    avatarUrl: annotation(entity, "avatar"),
+    owner: entity.spec?.owner,
+    system: entity.spec?.system,
+    lifecycle: entity.spec?.lifecycle,
+    version: annotation(entity, "version"),
+    purpose: purpose(entity),
+    runtime: {
+      runtime: annotation(entity, "runtime") ?? "custom",
+      runtimeHandle: annotation(entity, "runtime-handle"),
+      endpoint: annotation(entity, "endpoint"),
+      healthUrl: annotation(entity, "health")
+    },
+    billing: {
+      model: annotation(entity, "billing-model") ?? "free",
+      unitCost: parseFloatSafe(annotation(entity, "cost-per-1k")),
+      budget: parseFloatSafe(annotation(entity, "budget"))
+    },
+    capabilities: parseCapabilities(annotation(entity, "capabilities")),
+    tags: entity.metadata.tags ?? [],
+    links,
+    status,
+    rawEntity: entity
+  };
+}
+var AI_AGENT_TYPE, AI_AGENT_ANNOTATION_PREFIX, VALID_CATEGORIES;
+var init_types = __esm({
+  "src/types.ts"() {
+    "use strict";
+    AI_AGENT_TYPE = "ai-agent";
+    AI_AGENT_ANNOTATION_PREFIX = "ai-agent.acarmisc.org";
+    VALID_CATEGORIES = /* @__PURE__ */ new Set([
+      "reasoning",
+      "retrieval",
+      "tools",
+      "vision",
+      "voice",
+      "data",
+      "safety"
+    ]);
+  }
+});
+
+// src/api.ts
+var import_core_plugin_api, aiAgentsApiRef, AiAgentsApi;
+var init_api = __esm({
+  "src/api.ts"() {
+    "use strict";
+    import_core_plugin_api = require("@backstage/core-plugin-api");
+    init_types();
+    aiAgentsApiRef = (0, import_core_plugin_api.createApiRef)({
+      id: "plugin.ai-agents.api"
+    });
+    AiAgentsApi = class {
+      constructor(opts, basePath = "/api/ai-agents") {
+        this.opts = opts;
+        this.basePath = basePath;
+      }
+      async listAgents() {
+        const result = await this.opts.catalogApi.getEntities({
+          filter: { kind: "Component", "spec.type": AI_AGENT_TYPE }
+        });
+        return result.items.map((e) => entityToAgent(e)).filter((a) => a !== void 0);
+      }
+      async getAgent(entityRef2) {
+        const entity = await this.opts.catalogApi.getEntityByRef(entityRef2);
+        return entity ? entityToAgent(entity) : void 0;
+      }
+      async getStatuses(entityRefs) {
+        if (!entityRefs.length) return {};
+        try {
+          const res = await this.opts.fetchApi.fetch(
+            `${this.basePath}/statuses?refs=${encodeURIComponent(entityRefs.join(","))}`
+          );
+          if (!res.ok) return {};
+          return await res.json();
+        } catch {
+          return {};
+        }
+      }
+    };
+  }
+});
+
+// src/hooks/useAgents.ts
+function applyFilters(agents, filters) {
+  const search = filters.search.trim().toLowerCase();
+  return agents.filter((a) => {
+    if (search) {
+      const haystack = [a.name, a.title, a.description, a.purpose].filter(Boolean).join(" ").toLowerCase();
+      if (!haystack.includes(search)) return false;
+    }
+    if (filters.runtime.length && !filters.runtime.includes(a.runtime.runtime)) {
+      return false;
+    }
+    if (filters.capability.length) {
+      const caps = a.capabilities.map((c) => c.label);
+      if (!filters.capability.every((c) => caps.includes(c))) return false;
+    }
+    if (filters.lifecycle.length && !filters.lifecycle.includes(a.lifecycle ?? "")) {
+      return false;
+    }
+    if (filters.owner.length && !filters.owner.includes(a.owner ?? "")) {
+      return false;
+    }
+    return true;
+  });
+}
+function useAgents() {
+  const api = (0, import_core_plugin_api2.useApi)(aiAgentsApiRef);
+  const {
+    value: agents,
+    loading,
+    error,
+    retry
+  } = (0, import_react_use.useAsyncRetry)(() => api.listAgents(), [api]);
+  const [filters, setFilters] = (0, import_react.useState)(initialFilters);
+  const filtered = (0, import_react.useMemo)(
+    () => applyFilters(agents ?? [], filters),
+    [agents, filters]
+  );
+  const update = (0, import_react.useCallback)(
+    (patch) => setFilters((prev) => ({ ...prev, ...patch })),
+    []
+  );
+  const reset = (0, import_react.useCallback)(() => setFilters(initialFilters), []);
+  return {
+    agents: filtered,
+    allAgents: agents ?? [],
+    loading,
+    error,
+    retry,
+    filters,
+    update,
+    reset
+  };
+}
+var import_react, import_core_plugin_api2, import_react_use, initialFilters;
+var init_useAgents = __esm({
+  "src/hooks/useAgents.ts"() {
+    "use strict";
+    import_react = require("react");
+    import_core_plugin_api2 = require("@backstage/core-plugin-api");
+    import_react_use = require("react-use");
+    init_api();
+    initialFilters = {
+      search: "",
+      runtime: [],
+      capability: [],
+      lifecycle: [],
+      owner: []
+    };
+  }
+});
+
+// src/components/AgentFilters.tsx
+var import_react2, import_material, import_Search, import_Clear, SELECT_PROPS, AgentFiltersBar;
+var init_AgentFilters = __esm({
+  "src/components/AgentFilters.tsx"() {
+    "use strict";
+    import_react2 = __toESM(require("react"));
+    import_material = require("@mui/material");
+    import_Search = __toESM(require("@mui/icons-material/Search"));
+    import_Clear = __toESM(require("@mui/icons-material/Clear"));
+    SELECT_PROPS = {
+      SelectProps: { multiple: true, renderValue: (v) => v.join(", ") || "All" }
+    };
+    AgentFiltersBar = ({
+      agents,
+      filters,
+      onChange,
+      onReset
+    }) => {
+      const runtimes = Array.from(new Set(agents.map((a) => a.runtime.runtime))).sort();
+      const capabilities = Array.from(
+        new Set(agents.flatMap((a) => a.capabilities.map((c) => c.label)))
+      ).sort();
+      const lifecycles = Array.from(new Set(agents.map((a) => a.lifecycle).filter(Boolean)));
+      const owners = Array.from(new Set(agents.map((a) => a.owner).filter(Boolean)));
+      const hasFilters = filters.search || filters.runtime.length || filters.capability.length || filters.lifecycle.length || filters.owner.length;
+      return /* @__PURE__ */ import_react2.default.createElement(import_material.Paper, { sx: { p: 1.5, mb: 2, display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center" } }, /* @__PURE__ */ import_react2.default.createElement(
+        import_material.TextField,
+        {
+          size: "small",
+          placeholder: "Search agents\u2026",
+          value: filters.search,
+          onChange: (e) => onChange({ search: e.target.value }),
+          sx: { minWidth: 220, flexGrow: 1 },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ import_react2.default.createElement(import_material.InputAdornment, { position: "start" }, /* @__PURE__ */ import_react2.default.createElement(import_Search.default, { fontSize: "small" })),
+            endAdornment: filters.search ? /* @__PURE__ */ import_react2.default.createElement(import_material.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_material.IconButton, { size: "small", onClick: () => onChange({ search: "" }) }, /* @__PURE__ */ import_react2.default.createElement(import_Clear.default, { fontSize: "small" }))) : void 0
+          }
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material.TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Runtime",
+          value: filters.runtime,
+          onChange: (e) => onChange({ runtime: e.target.value }),
+          sx: { minWidth: 140 },
+          ...SELECT_PROPS
+        },
+        runtimes.map((r) => /* @__PURE__ */ import_react2.default.createElement(import_material.MenuItem, { key: r, value: r }, r))
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material.TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Capability",
+          value: filters.capability,
+          onChange: (e) => onChange({ capability: e.target.value }),
+          sx: { minWidth: 150 },
+          ...SELECT_PROPS
+        },
+        capabilities.map((c) => /* @__PURE__ */ import_react2.default.createElement(import_material.MenuItem, { key: c, value: c }, c))
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material.TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Lifecycle",
+          value: filters.lifecycle,
+          onChange: (e) => onChange({ lifecycle: e.target.value }),
+          sx: { minWidth: 130 },
+          ...SELECT_PROPS
+        },
+        lifecycles.map((l) => /* @__PURE__ */ import_react2.default.createElement(import_material.MenuItem, { key: l, value: l }, l))
+      ), /* @__PURE__ */ import_react2.default.createElement(
+        import_material.TextField,
+        {
+          select: true,
+          size: "small",
+          label: "Owner",
+          value: filters.owner,
+          onChange: (e) => onChange({ owner: e.target.value }),
+          sx: { minWidth: 140 },
+          ...SELECT_PROPS
+        },
+        owners.map((o) => /* @__PURE__ */ import_react2.default.createElement(import_material.MenuItem, { key: o, value: o }, o))
+      ), hasFilters && /* @__PURE__ */ import_react2.default.createElement(import_material.Tooltip, { title: "Clear filters" }, /* @__PURE__ */ import_react2.default.createElement(import_material.IconButton, { size: "small", onClick: onReset }, /* @__PURE__ */ import_react2.default.createElement(import_Clear.default, { fontSize: "small" }))), /* @__PURE__ */ import_react2.default.createElement(import_material.Box, { sx: { ml: "auto", alignSelf: "center" } }, /* @__PURE__ */ import_react2.default.createElement("strong", null, agents.length), " agent", agents.length !== 1 ? "s" : ""));
+    };
+  }
+});
+
+// src/components/AgentAvatar.tsx
+function initialsOf(name) {
+  const parts = name.replace(/[-_]+/g, " ").trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function colorFor(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = hash * 31 + name.charCodeAt(i) | 0;
+  return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+var import_react3, import_material2, PALETTE, AgentAvatar;
+var init_AgentAvatar = __esm({
+  "src/components/AgentAvatar.tsx"() {
+    "use strict";
+    import_react3 = __toESM(require("react"));
+    import_material2 = require("@mui/material");
+    PALETTE = [
+      "#1976d2",
+      "#388e3c",
+      "#f57c00",
+      "#7b1fa2",
+      "#c62828",
+      "#0097a7",
+      "#5d4037",
+      "#455a64"
+    ];
+    AgentAvatar = ({
+      name,
+      avatarUrl,
+      size = 44
+    }) => {
+      const [broken, setBroken] = (0, import_react3.useState)(false);
+      const showImage = avatarUrl && !broken;
+      return /* @__PURE__ */ import_react3.default.createElement(
+        import_material2.Box,
+        {
+          sx: {
+            width: size,
+            height: size,
+            flexShrink: 0,
+            borderRadius: "50%",
+            overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            bgcolor: showImage ? "transparent" : colorFor(name),
+            color: "common.white",
+            fontSize: size * 0.36,
+            fontWeight: 700
+          }
+        },
+        showImage ? /* @__PURE__ */ import_react3.default.createElement(
+          "img",
+          {
+            src: avatarUrl,
+            alt: name,
+            width: size,
+            height: size,
+            onError: () => setBroken(true),
+            style: { objectFit: "cover", borderRadius: "50%" }
+          }
+        ) : initialsOf(name)
+      );
+    };
+  }
+});
+
+// src/components/AgentStatusBadge.tsx
+var import_react4, import_material3, STATE_COLOR, AgentStatusBadge;
+var init_AgentStatusBadge = __esm({
+  "src/components/AgentStatusBadge.tsx"() {
+    "use strict";
+    import_react4 = __toESM(require("react"));
+    import_material3 = require("@mui/material");
+    STATE_COLOR = {
+      healthy: "success.main",
+      degraded: "warning.main",
+      down: "error.main",
+      unknown: "text.disabled"
+    };
+    AgentStatusBadge = ({ status }) => {
+      const state = status?.state ?? "unknown";
+      const color = STATE_COLOR[state];
+      const ring = state === "unknown" ? `1px dashed ${color}` : "none";
+      const title = status ? [
+        `Status: ${state}`,
+        status.lastChecked ? `Last checked: ${new Date(status.lastChecked).toLocaleString()}` : null,
+        status.latencyMs != null ? `Latency: ${status.latencyMs}ms` : null,
+        status.message ? status.message : null
+      ].filter(Boolean).join(" \xB7 ") : "Status: unknown";
+      return /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title, arrow: true }, /* @__PURE__ */ import_react4.default.createElement(
+        import_material3.Box,
+        {
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.75,
+            cursor: "help"
+          }
+        },
+        /* @__PURE__ */ import_react4.default.createElement(
+          import_material3.Box,
+          {
+            component: "span",
+            sx: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              bgcolor: color,
+              border: ring,
+              flexShrink: 0
+            }
+          }
+        ),
+        status?.latencyMs != null && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary" }, status.latencyMs, "ms")
+      ));
+    };
+  }
+});
+
+// src/components/AgentCapabilities.tsx
+var import_react5, import_material4, CATEGORY_COLOR, MAX_VISIBLE, AgentCapabilities;
+var init_AgentCapabilities = __esm({
+  "src/components/AgentCapabilities.tsx"() {
+    "use strict";
+    import_react5 = __toESM(require("react"));
+    import_material4 = require("@mui/material");
+    CATEGORY_COLOR = {
+      reasoning: "primary",
+      retrieval: "info",
+      tools: "secondary",
+      vision: "success",
+      voice: "warning",
+      data: "default",
+      safety: "error"
+    };
+    MAX_VISIBLE = 5;
+    AgentCapabilities = ({
+      capabilities,
+      max = MAX_VISIBLE,
+      size = "small"
+    }) => {
+      const [anchor, setAnchor] = (0, import_react5.useState)(null);
+      if (!capabilities.length) return null;
+      const visible = capabilities.slice(0, max);
+      const overflow = capabilities.length - visible.length;
+      return /* @__PURE__ */ import_react5.default.createElement(import_material4.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, visible.map((c, i) => /* @__PURE__ */ import_react5.default.createElement(
+        import_material4.Chip,
+        {
+          key: `${c.label}-${i}`,
+          label: c.label,
+          size,
+          color: c.category ? CATEGORY_COLOR[c.category] : "default",
+          variant: c.category ? "filled" : "outlined"
+        }
+      )), overflow > 0 && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+        import_material4.Chip,
+        {
+          label: `+${overflow}`,
+          size,
+          clickable: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            setAnchor(e.currentTarget);
+          }
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_material4.Popover,
+        {
+          open: Boolean(anchor),
+          anchorEl: anchor,
+          onClose: () => setAnchor(null),
+          anchorOrigin: { vertical: "bottom", horizontal: "left" }
+        },
+        /* @__PURE__ */ import_react5.default.createElement(import_material4.Box, { sx: { p: 1, maxWidth: 280, display: "flex", flexWrap: "wrap", gap: 0.5 } }, capabilities.map((c, i) => /* @__PURE__ */ import_react5.default.createElement(
+          import_material4.Chip,
+          {
+            key: `${c.label}-${i}`,
+            label: c.label,
+            size: "small",
+            color: c.category ? CATEGORY_COLOR[c.category] : "default",
+            variant: c.category ? "filled" : "outlined"
+          }
+        )))
+      )));
+    };
+  }
+});
+
+// src/components/RuntimeBadge.tsx
+var import_react6, import_material5, import_Memory, import_CloudQueue, import_Functions, import_Extension, RUNTIME_META, RuntimeBadge;
+var init_RuntimeBadge = __esm({
+  "src/components/RuntimeBadge.tsx"() {
+    "use strict";
+    import_react6 = __toESM(require("react"));
+    import_material5 = require("@mui/material");
+    import_Memory = __toESM(require("@mui/icons-material/Memory"));
+    import_CloudQueue = __toESM(require("@mui/icons-material/CloudQueue"));
+    import_Functions = __toESM(require("@mui/icons-material/Functions"));
+    import_Extension = __toESM(require("@mui/icons-material/Extension"));
+    RUNTIME_META = {
+      "bedrock-agentcore": { label: "Bedrock AgentCore", icon: /* @__PURE__ */ import_react6.default.createElement(import_CloudQueue.default, { fontSize: "small" }) },
+      litellm: { label: "LiteLLM", icon: /* @__PURE__ */ import_react6.default.createElement(import_Memory.default, { fontSize: "small" }) },
+      lambda: { label: "AWS Lambda", icon: /* @__PURE__ */ import_react6.default.createElement(import_Functions.default, { fontSize: "small" }) },
+      custom: { label: "Custom", icon: /* @__PURE__ */ import_react6.default.createElement(import_Extension.default, { fontSize: "small" }) }
+    };
+    RuntimeBadge = ({
+      runtime,
+      size = "small",
+      onClick
+    }) => {
+      const meta = RUNTIME_META[runtime] ?? {
+        label: String(runtime),
+        icon: /* @__PURE__ */ import_react6.default.createElement(import_Extension.default, { fontSize: "small" })
+      };
+      return /* @__PURE__ */ import_react6.default.createElement(
+        import_material5.Chip,
+        {
+          size,
+          variant: "outlined",
+          label: /* @__PURE__ */ import_react6.default.createElement(import_material5.Box, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 } }, meta.icon, meta.label),
+          onClick: onClick ? () => onClick(runtime) : void 0,
+          clickable: Boolean(onClick)
+        }
+      );
+    };
+  }
+});
+
+// src/components/BillingBadge.tsx
+var import_react7, import_material6, BILLING_COLOR, BillingBadge;
+var init_BillingBadge = __esm({
+  "src/components/BillingBadge.tsx"() {
+    "use strict";
+    import_react7 = __toESM(require("react"));
+    import_material6 = require("@mui/material");
+    BILLING_COLOR = {
+      "per-invocation": "primary",
+      "per-token": "secondary",
+      subscription: "success",
+      free: "default"
+    };
+    BillingBadge = ({ billing }) => {
+      const color = BILLING_COLOR[billing.model] ?? "default";
+      const unitLabel = billing.model === "per-token" ? "per 1M tokens" : billing.model === "per-invocation" ? "per 1k calls" : null;
+      return /* @__PURE__ */ import_react7.default.createElement(import_material6.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.25 } }, /* @__PURE__ */ import_react7.default.createElement(import_material6.Chip, { size: "small", color, label: billing.model, variant: "outlined" }), billing.unitCost != null && unitLabel && /* @__PURE__ */ import_react7.default.createElement(import_material6.Typography, { variant: "caption", color: "text.secondary" }, "~$", billing.unitCost, " ", unitLabel), billing.budget != null && /* @__PURE__ */ import_react7.default.createElement(import_material6.Typography, { variant: "caption", color: "text.secondary" }, "budget: $", billing.budget));
+    };
+  }
+});
+
+// src/components/AgentCard.tsx
+var import_react8, import_material7, import_Dashboard, import_Description, import_Article, import_BugReport, LIFECYCLE_COLOR, LINK_ICON, AgentCard;
+var init_AgentCard = __esm({
+  "src/components/AgentCard.tsx"() {
+    "use strict";
+    import_react8 = __toESM(require("react"));
+    import_material7 = require("@mui/material");
+    import_Dashboard = __toESM(require("@mui/icons-material/Dashboard"));
+    import_Description = __toESM(require("@mui/icons-material/Description"));
+    import_Article = __toESM(require("@mui/icons-material/Article"));
+    import_BugReport = __toESM(require("@mui/icons-material/BugReport"));
+    init_AgentAvatar();
+    init_AgentStatusBadge();
+    init_AgentCapabilities();
+    init_RuntimeBadge();
+    init_BillingBadge();
+    LIFECYCLE_COLOR = {
+      production: "success",
+      experimental: "warning",
+      deprecated: "error"
+    };
+    LINK_ICON = {
+      dashboard: /* @__PURE__ */ import_react8.default.createElement(import_Dashboard.default, { fontSize: "small" }),
+      docs: /* @__PURE__ */ import_react8.default.createElement(import_Description.default, { fontSize: "small" }),
+      playbook: /* @__PURE__ */ import_react8.default.createElement(import_Article.default, { fontSize: "small" }),
+      issues: /* @__PURE__ */ import_react8.default.createElement(import_BugReport.default, { fontSize: "small" })
+    };
+    AgentCard = ({
+      agent,
+      onClick,
+      onRuntimeClick
+    }) => {
+      const title = agent.title ?? agent.name;
+      const lifecycleColor = agent.lifecycle ? LIFECYCLE_COLOR[agent.lifecycle] ?? "default" : "default";
+      return /* @__PURE__ */ import_react8.default.createElement(
+        import_material7.Card,
+        {
+          variant: "outlined",
+          sx: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            transition: (theme) => `box-shadow ${theme.transitions.duration.short}ms`,
+            "&:hover": { boxShadow: 6 }
+          }
+        },
+        /* @__PURE__ */ import_react8.default.createElement(
+          import_material7.CardActionArea,
+          {
+            onClick: () => onClick?.(agent),
+            sx: { flexGrow: 1, p: 2, alignItems: "stretch", display: "flex" }
+          },
+          /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { display: "flex", flexDirection: "column", width: "100%" } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, mb: 1 } }, /* @__PURE__ */ import_react8.default.createElement(AgentAvatar, { name: agent.name, avatarUrl: agent.avatarUrl }), /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "subtitle1", fontWeight: 700, noWrap: true, title }, title), /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "caption", color: "text.secondary", noWrap: true }, agent.name)), /* @__PURE__ */ import_react8.default.createElement(AgentStatusBadge, { status: agent.status })), /* @__PURE__ */ import_react8.default.createElement(
+            import_material7.Typography,
+            {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                minHeight: "2.6em",
+                mb: 1.5
+              }
+            },
+            agent.purpose || "No description provided."
+          ), /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { mb: 1 } }, /* @__PURE__ */ import_react8.default.createElement(
+            RuntimeBadge,
+            {
+              runtime: agent.runtime.runtime,
+              onClick: onRuntimeClick
+            }
+          )), agent.capabilities.length > 0 && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { mb: 1.5 } }, /* @__PURE__ */ import_react8.default.createElement(AgentCapabilities, { capabilities: agent.capabilities })), /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { mb: 1.5 } }, /* @__PURE__ */ import_react8.default.createElement(BillingBadge, { billing: agent.billing })), /* @__PURE__ */ import_react8.default.createElement(
+            import_material7.Box,
+            {
+              sx: {
+                mt: "auto",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                flexWrap: "wrap"
+              }
+            },
+            agent.owner && /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "caption", color: "text.secondary" }, agent.owner),
+            agent.lifecycle && /* @__PURE__ */ import_react8.default.createElement(
+              import_material7.Chip,
+              {
+                size: "small",
+                color: lifecycleColor,
+                label: agent.lifecycle,
+                variant: "outlined",
+                sx: { height: 20, "& .MuiChip-label": { px: 0.75, fontSize: "0.7rem" } }
+              }
+            ),
+            agent.version && /* @__PURE__ */ import_react8.default.createElement(import_material7.Typography, { variant: "caption", color: "text.secondary" }, "v", agent.version)
+          ), agent.links.length > 0 && /* @__PURE__ */ import_react8.default.createElement(import_material7.Box, { sx: { display: "flex", gap: 1.5, mt: 1.5, pt: 1, borderTop: "1px solid", borderColor: "divider" } }, agent.links.slice(0, 4).map((l, i) => /* @__PURE__ */ import_react8.default.createElement(import_material7.Tooltip, { key: i, title: l.title }, /* @__PURE__ */ import_react8.default.createElement(
+            import_material7.Link,
+            {
+              href: l.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => e.stopPropagation(),
+              sx: { display: "inline-flex", color: "text.secondary" }
+            },
+            LINK_ICON[l.icon ?? ""] ?? /* @__PURE__ */ import_react8.default.createElement(import_Description.default, { fontSize: "small" })
+          )))))
+        )
+      );
+    };
+  }
+});
+
+// src/components/AgentsGrid.tsx
+var import_react9, import_Box, AgentsGrid;
+var init_AgentsGrid = __esm({
+  "src/components/AgentsGrid.tsx"() {
+    "use strict";
+    import_react9 = __toESM(require("react"));
+    import_Box = __toESM(require("@mui/material/Box"));
+    init_AgentCard();
+    AgentsGrid = ({
+      agents,
+      onAgentClick,
+      onRuntimeClick
+    }) => {
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_Box.default,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+            gap: 2
+          }
+        },
+        agents.map((a) => /* @__PURE__ */ import_react9.default.createElement(
+          AgentCard,
+          {
+            key: a.entityRef,
+            agent: a,
+            onClick: onAgentClick,
+            onRuntimeClick
+          }
+        ))
+      );
+    };
+  }
+});
+
+// src/components/AgentDetailDrawer.tsx
+var import_react10, import_material8, import_Close, import_OpenInNew, import_Refresh, import_Dashboard2, import_Description2, import_Article2, import_BugReport2, import_ContentCopy, LINK_ICON2, Row, AgentDetailDrawer;
+var init_AgentDetailDrawer = __esm({
+  "src/components/AgentDetailDrawer.tsx"() {
+    "use strict";
+    import_react10 = __toESM(require("react"));
+    import_material8 = require("@mui/material");
+    import_Close = __toESM(require("@mui/icons-material/Close"));
+    import_OpenInNew = __toESM(require("@mui/icons-material/OpenInNew"));
+    import_Refresh = __toESM(require("@mui/icons-material/Refresh"));
+    import_Dashboard2 = __toESM(require("@mui/icons-material/Dashboard"));
+    import_Description2 = __toESM(require("@mui/icons-material/Description"));
+    import_Article2 = __toESM(require("@mui/icons-material/Article"));
+    import_BugReport2 = __toESM(require("@mui/icons-material/BugReport"));
+    import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
+    init_AgentAvatar();
+    init_AgentStatusBadge();
+    init_AgentCapabilities();
+    init_RuntimeBadge();
+    init_BillingBadge();
+    LINK_ICON2 = {
+      dashboard: /* @__PURE__ */ import_react10.default.createElement(import_Dashboard2.default, { fontSize: "small" }),
+      docs: /* @__PURE__ */ import_react10.default.createElement(import_Description2.default, { fontSize: "small" }),
+      playbook: /* @__PURE__ */ import_react10.default.createElement(import_Article2.default, { fontSize: "small" }),
+      issues: /* @__PURE__ */ import_react10.default.createElement(import_BugReport2.default, { fontSize: "small" })
+    };
+    Row = ({
+      label,
+      children
+    }) => /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { display: "flex", gap: 1, mb: 1 } }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 110 } }, label), /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { flexGrow: 1 } }, children));
+    AgentDetailDrawer = ({
+      agent,
+      open,
+      onClose,
+      onRefreshStatus
+    }) => {
+      if (!agent) return null;
+      const title = agent.title ?? agent.name;
+      const copyRef = () => {
+        navigator.clipboard?.writeText(agent.entityRef).catch(() => {
+        });
+      };
+      return /* @__PURE__ */ import_react10.default.createElement(
+        import_material8.Drawer,
+        {
+          anchor: "right",
+          open,
+          onClose,
+          sx: { "& .MuiDrawer-paper": { width: { xs: "100%", sm: 480 } } }
+        },
+        /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { p: 2, display: "flex", alignItems: "flex-start", gap: 1.5 } }, /* @__PURE__ */ import_react10.default.createElement(AgentAvatar, { name: agent.name, avatarUrl: agent.avatarUrl, size: 56 }), /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "h6" }, title), /* @__PURE__ */ import_react10.default.createElement(
+          import_material8.Typography,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 0.5,
+              cursor: "pointer"
+            },
+            onClick: copyRef
+          },
+          agent.entityRef,
+          /* @__PURE__ */ import_react10.default.createElement(import_ContentCopy.default, { sx: { fontSize: 12 } })
+        )), /* @__PURE__ */ import_react10.default.createElement(import_material8.IconButton, { size: "small", onClick: onClose }, /* @__PURE__ */ import_react10.default.createElement(import_Close.default, { fontSize: "small" }))),
+        /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { px: 2, pb: 2, display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ import_react10.default.createElement(AgentStatusBadge, { status: agent.status }), onRefreshStatus && /* @__PURE__ */ import_react10.default.createElement(
+          import_material8.IconButton,
+          {
+            size: "small",
+            title: "Refresh status",
+            onClick: () => onRefreshStatus(agent.entityRef)
+          },
+          /* @__PURE__ */ import_react10.default.createElement(import_Refresh.default, { fontSize: "small" })
+        )),
+        /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { px: 2, pb: 3 } }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "body2", sx: { mb: 2 } }, agent.purpose || agent.description || "No description provided."), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Runtime" }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Stack, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ import_react10.default.createElement(RuntimeBadge, { runtime: agent.runtime.runtime }), agent.runtime.endpoint && /* @__PURE__ */ import_react10.default.createElement(
+          import_material8.Link,
+          {
+            href: agent.runtime.endpoint,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }
+          },
+          "endpoint ",
+          /* @__PURE__ */ import_react10.default.createElement(import_OpenInNew.default, { sx: { fontSize: 12 } })
+        )), agent.runtime.runtimeHandle && /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "caption", display: "block", color: "text.secondary", sx: { mt: 0.5, wordBreak: "break-all" } }, agent.runtime.runtimeHandle)), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Capabilities" }, agent.capabilities.length ? /* @__PURE__ */ import_react10.default.createElement(AgentCapabilities, { capabilities: agent.capabilities, max: 20 }) : /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary" }, "\u2014")), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Billing" }, /* @__PURE__ */ import_react10.default.createElement(BillingBadge, { billing: agent.billing })), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Owner" }, agent.owner ?? "\u2014"), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "System" }, agent.system ?? "\u2014"), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Lifecycle" }, agent.lifecycle ?? "\u2014"), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Version" }, agent.version ?? "\u2014"), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Tags" }, agent.tags.length ? /* @__PURE__ */ import_react10.default.createElement(import_material8.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, agent.tags.map((t) => /* @__PURE__ */ import_react10.default.createElement(import_material8.Chip, { key: t, size: "small", label: t, variant: "outlined" }))) : /* @__PURE__ */ import_react10.default.createElement(import_material8.Typography, { variant: "body2", color: "text.secondary" }, "\u2014")), agent.links.length > 0 && /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Links" }, /* @__PURE__ */ import_react10.default.createElement(import_material8.List, { dense: true, disablePadding: true }, agent.links.map((l, i) => /* @__PURE__ */ import_react10.default.createElement(
+          import_material8.ListItem,
+          {
+            key: i,
+            component: "a",
+            href: l.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: { color: "text.primary", borderRadius: 1, "&:hover": { bgcolor: "action.hover" } }
+          },
+          /* @__PURE__ */ import_react10.default.createElement(import_material8.ListItemIcon, { sx: { minWidth: 28 } }, LINK_ICON2[l.icon ?? ""] ?? /* @__PURE__ */ import_react10.default.createElement(import_Description2.default, { fontSize: "small" })),
+          /* @__PURE__ */ import_react10.default.createElement(
+            import_material8.ListItemText,
+            {
+              primary: l.title,
+              secondary: l.url,
+              secondaryTypographyProps: { sx: { fontSize: "0.7rem" }, noWrap: true }
+            }
+          )
+        )))), /* @__PURE__ */ import_react10.default.createElement(Row, { label: "Catalog" }, /* @__PURE__ */ import_react10.default.createElement(import_material8.Link, { href: `/catalog/${agent.entityRef.replace(":", "/")}` }, "Open in catalog ", /* @__PURE__ */ import_react10.default.createElement(import_OpenInNew.default, { sx: { fontSize: 12, verticalAlign: "middle" } }))))
+      );
+    };
+  }
+});
+
+// src/components/AgentsPage.tsx
+var AgentsPage_exports = {};
+__export(AgentsPage_exports, {
+  AgentsPage: () => AgentsPage
+});
+var import_react11, import_material9, import_core_components, import_core_plugin_api3, POLL_INTERVAL_MS, AgentsPage;
+var init_AgentsPage = __esm({
+  "src/components/AgentsPage.tsx"() {
+    "use strict";
+    import_react11 = __toESM(require("react"));
+    import_material9 = require("@mui/material");
+    import_core_components = require("@backstage/core-components");
+    import_core_plugin_api3 = require("@backstage/core-plugin-api");
+    init_api();
+    init_useAgents();
+    init_AgentFilters();
+    init_AgentsGrid();
+    init_AgentDetailDrawer();
+    POLL_INTERVAL_MS = 3e4;
+    AgentsPage = () => {
+      const api = (0, import_core_plugin_api3.useApi)(aiAgentsApiRef);
+      const { agents, allAgents, loading, error, retry, filters, update, reset } = useAgents();
+      const [selected, setSelected] = (0, import_react11.useState)(null);
+      const [drawerOpen, setDrawerOpen] = (0, import_react11.useState)(false);
+      const [statuses, setStatuses] = (0, import_react11.useState)({});
+      const refs = allAgents.map((a) => a.entityRef);
+      (0, import_react11.useEffect)(() => {
+        let cancelled = false;
+        if (!refs.length) return;
+        api.getStatuses(refs).then((result) => {
+          if (!cancelled) setStatuses(result);
+        });
+        return () => {
+          cancelled = true;
+        };
+      }, [api, refs.join(",")]);
+      (0, import_react11.useEffect)(() => {
+        if (!refs.length) return;
+        const id = setInterval(async () => {
+          const result = await api.getStatuses(refs);
+          setStatuses((prev) => ({ ...prev, ...result }));
+        }, POLL_INTERVAL_MS);
+        return () => clearInterval(id);
+      }, [api, refs.length]);
+      const agentsWithStatus = agents.map((a) => ({
+        ...a,
+        status: statuses[a.entityRef] ?? a.status
+      }));
+      const handleCardClick = (0, import_react11.useCallback)((agent) => {
+        setSelected(agent);
+        setDrawerOpen(true);
+      }, []);
+      const handleRuntimeClick = (0, import_react11.useCallback)(
+        (runtime) => {
+          if (!filters.runtime.includes(runtime)) {
+            update({ runtime: [...filters.runtime, runtime] });
+          }
+        },
+        [filters.runtime, update]
+      );
+      const handleRefreshStatus = (0, import_react11.useCallback)(
+        async (entityRef2) => {
+          const result = await api.getStatuses([entityRef2]);
+          setStatuses((prev) => ({ ...prev, ...result }));
+          setSelected(
+            (prev) => prev && prev.entityRef === entityRef2 ? { ...prev, status: result[entityRef2] ?? prev.status } : prev
+          );
+        },
+        [api]
+      );
+      if (loading && !allAgents.length) {
+        return /* @__PURE__ */ import_react11.default.createElement(import_material9.Box, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "40vh" }, /* @__PURE__ */ import_react11.default.createElement(import_material9.CircularProgress, null));
+      }
+      if (error) {
+        return /* @__PURE__ */ import_react11.default.createElement(
+          import_core_components.EmptyState,
+          {
+            title: "Failed to load AI agents",
+            description: error.message,
+            missing: "content"
+          }
+        );
+      }
+      return /* @__PURE__ */ import_react11.default.createElement(import_material9.Box, { sx: { p: 3 } }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Box, { sx: { mb: 2 } }, /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "h4" }, "AI Agents"), /* @__PURE__ */ import_react11.default.createElement(import_material9.Typography, { variant: "body2", color: "text.secondary" }, "AI agents registered in the catalog as ", /* @__PURE__ */ import_react11.default.createElement("code", null, "Component"), " entities with ", /* @__PURE__ */ import_react11.default.createElement("code", null, "spec.type: ai-agent"), ".")), /* @__PURE__ */ import_react11.default.createElement(
+        AgentFiltersBar,
+        {
+          agents: allAgents,
+          filters,
+          onChange: update,
+          onReset: reset
+        }
+      ), agentsWithStatus.length === 0 ? /* @__PURE__ */ import_react11.default.createElement(
+        import_core_components.EmptyState,
+        {
+          title: "No AI agents registered",
+          description: "Add a Component with spec.type: ai-agent to the catalog, or adjust your filters.",
+          missing: "content",
+          action: /* @__PURE__ */ import_react11.default.createElement("button", { onClick: () => retry() }, "Retry")
+        }
+      ) : /* @__PURE__ */ import_react11.default.createElement(
+        AgentsGrid,
+        {
+          agents: agentsWithStatus,
+          onAgentClick: handleCardClick,
+          onRuntimeClick: handleRuntimeClick
+        }
+      ), /* @__PURE__ */ import_react11.default.createElement(
+        AgentDetailDrawer,
+        {
+          agent: selected,
+          open: drawerOpen,
+          onClose: () => setDrawerOpen(false),
+          onRefreshStatus: handleRefreshStatus
+        }
+      ));
+    };
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AI_AGENT_ANNOTATION_PREFIX: () => AI_AGENT_ANNOTATION_PREFIX,
+  AI_AGENT_TYPE: () => AI_AGENT_TYPE,
+  AgentCard: () => AgentCard,
+  AgentsPage: () => AgentsPage,
+  AiAgentsApi: () => AiAgentsApi,
+  aiAgentsApiRef: () => aiAgentsApiRef,
+  aiAgentsPlugin: () => aiAgentsPlugin,
+  entityToAgent: () => entityToAgent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.tsx
+var import_react12 = __toESM(require("react"));
+var import_icons_material = require("@mui/icons-material");
+var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
+var import_plugin_catalog_react = require("@backstage/plugin-catalog-react");
+init_api();
+var aiAgentsApi = import_frontend_plugin_api.ApiBlueprint.make({
+  params: (defineParams) => defineParams({
+    api: aiAgentsApiRef,
+    deps: { fetchApi: import_frontend_plugin_api.fetchApiRef, catalogApi: import_plugin_catalog_react.catalogApiRef },
+    factory: ({ fetchApi, catalogApi }) => new AiAgentsApi({ fetchApi, catalogApi })
+  })
+});
+var aiAgentsPage = import_frontend_plugin_api.PageBlueprint.make({
+  params: {
+    path: "/ai-agents",
+    title: "AI Agents",
+    icon: /* @__PURE__ */ import_react12.default.createElement(import_icons_material.SmartToy, null),
+    loader: async () => {
+      const { AgentsPage: AgentsPage2 } = await Promise.resolve().then(() => (init_AgentsPage(), AgentsPage_exports));
+      return /* @__PURE__ */ import_react12.default.createElement(AgentsPage2, null);
+    }
+  }
+});
+var aiAgentsPlugin = (0, import_frontend_plugin_api.createFrontendPlugin)({
+  pluginId: "ai-agents",
+  extensions: [aiAgentsApi, aiAgentsPage]
+});
+
+// src/index.ts
+init_AgentsPage();
+init_AgentCard();
+init_api();
+init_types();
+//# sourceMappingURL=index.cjs.js.map