@acarmisc/backstage-plugin-ai-agents 0.1.0

package/dist/index.esm.js

@@ -0,0 +1,999 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 });
+};
+
+// 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
+import { createApiRef } from "@backstage/core-plugin-api";
+var aiAgentsApiRef, AiAgentsApi;
+var init_api = __esm({
+  "src/api.ts"() {
+    "use strict";
+    init_types();
+    aiAgentsApiRef = 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
+import { useCallback, useMemo, useState } from "react";
+import { useApi } from "@backstage/core-plugin-api";
+import { useAsyncRetry } from "react-use";
+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 = useApi(aiAgentsApiRef);
+  const {
+    value: agents,
+    loading,
+    error,
+    retry
+  } = useAsyncRetry(() => api.listAgents(), [api]);
+  const [filters, setFilters] = useState(initialFilters);
+  const filtered = useMemo(
+    () => applyFilters(agents ?? [], filters),
+    [agents, filters]
+  );
+  const update = useCallback(
+    (patch) => setFilters((prev) => ({ ...prev, ...patch })),
+    []
+  );
+  const reset = useCallback(() => setFilters(initialFilters), []);
+  return {
+    agents: filtered,
+    allAgents: agents ?? [],
+    loading,
+    error,
+    retry,
+    filters,
+    update,
+    reset
+  };
+}
+var initialFilters;
+var init_useAgents = __esm({
+  "src/hooks/useAgents.ts"() {
+    "use strict";
+    init_api();
+    initialFilters = {
+      search: "",
+      runtime: [],
+      capability: [],
+      lifecycle: [],
+      owner: []
+    };
+  }
+});
+
+// src/components/AgentFilters.tsx
+import React from "react";
+import {
+  Box,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Paper,
+  TextField,
+  Tooltip
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
+var SELECT_PROPS, AgentFiltersBar;
+var init_AgentFilters = __esm({
+  "src/components/AgentFilters.tsx"() {
+    "use strict";
+    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__ */ React.createElement(Paper, { sx: { p: 1.5, mb: 2, display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React.createElement(SearchIcon, { fontSize: "small" })),
+            endAdornment: filters.search ? /* @__PURE__ */ React.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => onChange({ search: "" }) }, /* @__PURE__ */ React.createElement(ClearIcon, { fontSize: "small" }))) : void 0
+          }
+        }
+      ), /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(MenuItem, { key: r, value: r }, r))
+      ), /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(MenuItem, { key: c, value: c }, c))
+      ), /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(MenuItem, { key: l, value: l }, l))
+      ), /* @__PURE__ */ React.createElement(
+        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__ */ React.createElement(MenuItem, { key: o, value: o }, o))
+      ), hasFilters && /* @__PURE__ */ React.createElement(Tooltip, { title: "Clear filters" }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: onReset }, /* @__PURE__ */ React.createElement(ClearIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(Box, { sx: { ml: "auto", alignSelf: "center" } }, /* @__PURE__ */ React.createElement("strong", null, agents.length), " agent", agents.length !== 1 ? "s" : ""));
+    };
+  }
+});
+
+// src/components/AgentAvatar.tsx
+import React2, { useState as useState2 } from "react";
+import { Box as Box2 } from "@mui/material";
+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 PALETTE, AgentAvatar;
+var init_AgentAvatar = __esm({
+  "src/components/AgentAvatar.tsx"() {
+    "use strict";
+    PALETTE = [
+      "#1976d2",
+      "#388e3c",
+      "#f57c00",
+      "#7b1fa2",
+      "#c62828",
+      "#0097a7",
+      "#5d4037",
+      "#455a64"
+    ];
+    AgentAvatar = ({
+      name,
+      avatarUrl,
+      size = 44
+    }) => {
+      const [broken, setBroken] = useState2(false);
+      const showImage = avatarUrl && !broken;
+      return /* @__PURE__ */ React2.createElement(
+        Box2,
+        {
+          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__ */ React2.createElement(
+          "img",
+          {
+            src: avatarUrl,
+            alt: name,
+            width: size,
+            height: size,
+            onError: () => setBroken(true),
+            style: { objectFit: "cover", borderRadius: "50%" }
+          }
+        ) : initialsOf(name)
+      );
+    };
+  }
+});
+
+// src/components/AgentStatusBadge.tsx
+import React3 from "react";
+import { Box as Box3, Tooltip as Tooltip2, Typography } from "@mui/material";
+var STATE_COLOR, AgentStatusBadge;
+var init_AgentStatusBadge = __esm({
+  "src/components/AgentStatusBadge.tsx"() {
+    "use strict";
+    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__ */ React3.createElement(Tooltip2, { title, arrow: true }, /* @__PURE__ */ React3.createElement(
+        Box3,
+        {
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.75,
+            cursor: "help"
+          }
+        },
+        /* @__PURE__ */ React3.createElement(
+          Box3,
+          {
+            component: "span",
+            sx: {
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              bgcolor: color,
+              border: ring,
+              flexShrink: 0
+            }
+          }
+        ),
+        status?.latencyMs != null && /* @__PURE__ */ React3.createElement(Typography, { variant: "caption", color: "text.secondary" }, status.latencyMs, "ms")
+      ));
+    };
+  }
+});
+
+// src/components/AgentCapabilities.tsx
+import React4, { useState as useState3 } from "react";
+import { Chip, Box as Box4, Popover } from "@mui/material";
+var CATEGORY_COLOR, MAX_VISIBLE, AgentCapabilities;
+var init_AgentCapabilities = __esm({
+  "src/components/AgentCapabilities.tsx"() {
+    "use strict";
+    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] = useState3(null);
+      if (!capabilities.length) return null;
+      const visible = capabilities.slice(0, max);
+      const overflow = capabilities.length - visible.length;
+      return /* @__PURE__ */ React4.createElement(Box4, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, visible.map((c, i) => /* @__PURE__ */ React4.createElement(
+        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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+        Chip,
+        {
+          label: `+${overflow}`,
+          size,
+          clickable: true,
+          onClick: (e) => {
+            e.stopPropagation();
+            setAnchor(e.currentTarget);
+          }
+        }
+      ), /* @__PURE__ */ React4.createElement(
+        Popover,
+        {
+          open: Boolean(anchor),
+          anchorEl: anchor,
+          onClose: () => setAnchor(null),
+          anchorOrigin: { vertical: "bottom", horizontal: "left" }
+        },
+        /* @__PURE__ */ React4.createElement(Box4, { sx: { p: 1, maxWidth: 280, display: "flex", flexWrap: "wrap", gap: 0.5 } }, capabilities.map((c, i) => /* @__PURE__ */ React4.createElement(
+          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
+import React5 from "react";
+import { Chip as Chip2, Box as Box5 } from "@mui/material";
+import MemoryIcon from "@mui/icons-material/Memory";
+import CloudQueueIcon from "@mui/icons-material/CloudQueue";
+import FunctionsIcon from "@mui/icons-material/Functions";
+import ExtensionIcon from "@mui/icons-material/Extension";
+var RUNTIME_META, RuntimeBadge;
+var init_RuntimeBadge = __esm({
+  "src/components/RuntimeBadge.tsx"() {
+    "use strict";
+    RUNTIME_META = {
+      "bedrock-agentcore": { label: "Bedrock AgentCore", icon: /* @__PURE__ */ React5.createElement(CloudQueueIcon, { fontSize: "small" }) },
+      litellm: { label: "LiteLLM", icon: /* @__PURE__ */ React5.createElement(MemoryIcon, { fontSize: "small" }) },
+      lambda: { label: "AWS Lambda", icon: /* @__PURE__ */ React5.createElement(FunctionsIcon, { fontSize: "small" }) },
+      custom: { label: "Custom", icon: /* @__PURE__ */ React5.createElement(ExtensionIcon, { fontSize: "small" }) }
+    };
+    RuntimeBadge = ({
+      runtime,
+      size = "small",
+      onClick
+    }) => {
+      const meta = RUNTIME_META[runtime] ?? {
+        label: String(runtime),
+        icon: /* @__PURE__ */ React5.createElement(ExtensionIcon, { fontSize: "small" })
+      };
+      return /* @__PURE__ */ React5.createElement(
+        Chip2,
+        {
+          size,
+          variant: "outlined",
+          label: /* @__PURE__ */ React5.createElement(Box5, { 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
+import React6 from "react";
+import { Chip as Chip3, Box as Box6, Typography as Typography2 } from "@mui/material";
+var BILLING_COLOR, BillingBadge;
+var init_BillingBadge = __esm({
+  "src/components/BillingBadge.tsx"() {
+    "use strict";
+    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__ */ React6.createElement(Box6, { sx: { display: "flex", flexDirection: "column", gap: 0.25 } }, /* @__PURE__ */ React6.createElement(Chip3, { size: "small", color, label: billing.model, variant: "outlined" }), billing.unitCost != null && unitLabel && /* @__PURE__ */ React6.createElement(Typography2, { variant: "caption", color: "text.secondary" }, "~$", billing.unitCost, " ", unitLabel), billing.budget != null && /* @__PURE__ */ React6.createElement(Typography2, { variant: "caption", color: "text.secondary" }, "budget: $", billing.budget));
+    };
+  }
+});
+
+// src/components/AgentCard.tsx
+import React7 from "react";
+import { Box as Box7, Card, CardActionArea, Chip as Chip4, Link, Tooltip as Tooltip3, Typography as Typography3 } from "@mui/material";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import DescriptionIcon from "@mui/icons-material/Description";
+import ArticleIcon from "@mui/icons-material/Article";
+import BugReportIcon from "@mui/icons-material/BugReport";
+var LIFECYCLE_COLOR, LINK_ICON, AgentCard;
+var init_AgentCard = __esm({
+  "src/components/AgentCard.tsx"() {
+    "use strict";
+    init_AgentAvatar();
+    init_AgentStatusBadge();
+    init_AgentCapabilities();
+    init_RuntimeBadge();
+    init_BillingBadge();
+    LIFECYCLE_COLOR = {
+      production: "success",
+      experimental: "warning",
+      deprecated: "error"
+    };
+    LINK_ICON = {
+      dashboard: /* @__PURE__ */ React7.createElement(DashboardIcon, { fontSize: "small" }),
+      docs: /* @__PURE__ */ React7.createElement(DescriptionIcon, { fontSize: "small" }),
+      playbook: /* @__PURE__ */ React7.createElement(ArticleIcon, { fontSize: "small" }),
+      issues: /* @__PURE__ */ React7.createElement(BugReportIcon, { fontSize: "small" })
+    };
+    AgentCard = ({
+      agent,
+      onClick,
+      onRuntimeClick
+    }) => {
+      const title = agent.title ?? agent.name;
+      const lifecycleColor = agent.lifecycle ? LIFECYCLE_COLOR[agent.lifecycle] ?? "default" : "default";
+      return /* @__PURE__ */ React7.createElement(
+        Card,
+        {
+          variant: "outlined",
+          sx: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            transition: (theme) => `box-shadow ${theme.transitions.duration.short}ms`,
+            "&:hover": { boxShadow: 6 }
+          }
+        },
+        /* @__PURE__ */ React7.createElement(
+          CardActionArea,
+          {
+            onClick: () => onClick?.(agent),
+            sx: { flexGrow: 1, p: 2, alignItems: "stretch", display: "flex" }
+          },
+          /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", flexDirection: "column", width: "100%" } }, /* @__PURE__ */ React7.createElement(Box7, { sx: { display: "flex", alignItems: "center", gap: 1.5, mb: 1 } }, /* @__PURE__ */ React7.createElement(AgentAvatar, { name: agent.name, avatarUrl: agent.avatarUrl }), /* @__PURE__ */ React7.createElement(Box7, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React7.createElement(Typography3, { variant: "subtitle1", fontWeight: 700, noWrap: true, title }, title), /* @__PURE__ */ React7.createElement(Typography3, { variant: "caption", color: "text.secondary", noWrap: true }, agent.name)), /* @__PURE__ */ React7.createElement(AgentStatusBadge, { status: agent.status })), /* @__PURE__ */ React7.createElement(
+            Typography3,
+            {
+              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__ */ React7.createElement(Box7, { sx: { mb: 1 } }, /* @__PURE__ */ React7.createElement(
+            RuntimeBadge,
+            {
+              runtime: agent.runtime.runtime,
+              onClick: onRuntimeClick
+            }
+          )), agent.capabilities.length > 0 && /* @__PURE__ */ React7.createElement(Box7, { sx: { mb: 1.5 } }, /* @__PURE__ */ React7.createElement(AgentCapabilities, { capabilities: agent.capabilities })), /* @__PURE__ */ React7.createElement(Box7, { sx: { mb: 1.5 } }, /* @__PURE__ */ React7.createElement(BillingBadge, { billing: agent.billing })), /* @__PURE__ */ React7.createElement(
+            Box7,
+            {
+              sx: {
+                mt: "auto",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                flexWrap: "wrap"
+              }
+            },
+            agent.owner && /* @__PURE__ */ React7.createElement(Typography3, { variant: "caption", color: "text.secondary" }, agent.owner),
+            agent.lifecycle && /* @__PURE__ */ React7.createElement(
+              Chip4,
+              {
+                size: "small",
+                color: lifecycleColor,
+                label: agent.lifecycle,
+                variant: "outlined",
+                sx: { height: 20, "& .MuiChip-label": { px: 0.75, fontSize: "0.7rem" } }
+              }
+            ),
+            agent.version && /* @__PURE__ */ React7.createElement(Typography3, { variant: "caption", color: "text.secondary" }, "v", agent.version)
+          ), agent.links.length > 0 && /* @__PURE__ */ React7.createElement(Box7, { 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__ */ React7.createElement(Tooltip3, { key: i, title: l.title }, /* @__PURE__ */ React7.createElement(
+            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__ */ React7.createElement(DescriptionIcon, { fontSize: "small" })
+          )))))
+        )
+      );
+    };
+  }
+});
+
+// src/components/AgentsGrid.tsx
+import React8 from "react";
+import Box8 from "@mui/material/Box";
+var AgentsGrid;
+var init_AgentsGrid = __esm({
+  "src/components/AgentsGrid.tsx"() {
+    "use strict";
+    init_AgentCard();
+    AgentsGrid = ({
+      agents,
+      onAgentClick,
+      onRuntimeClick
+    }) => {
+      return /* @__PURE__ */ React8.createElement(
+        Box8,
+        {
+          sx: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+            gap: 2
+          }
+        },
+        agents.map((a) => /* @__PURE__ */ React8.createElement(
+          AgentCard,
+          {
+            key: a.entityRef,
+            agent: a,
+            onClick: onAgentClick,
+            onRuntimeClick
+          }
+        ))
+      );
+    };
+  }
+});
+
+// src/components/AgentDetailDrawer.tsx
+import React9 from "react";
+import {
+  Box as Box9,
+  Chip as Chip5,
+  Drawer,
+  IconButton as IconButton2,
+  Link as Link2,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Stack,
+  Typography as Typography4
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import DashboardIcon2 from "@mui/icons-material/Dashboard";
+import DescriptionIcon2 from "@mui/icons-material/Description";
+import ArticleIcon2 from "@mui/icons-material/Article";
+import BugReportIcon2 from "@mui/icons-material/BugReport";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+var LINK_ICON2, Row, AgentDetailDrawer;
+var init_AgentDetailDrawer = __esm({
+  "src/components/AgentDetailDrawer.tsx"() {
+    "use strict";
+    init_AgentAvatar();
+    init_AgentStatusBadge();
+    init_AgentCapabilities();
+    init_RuntimeBadge();
+    init_BillingBadge();
+    LINK_ICON2 = {
+      dashboard: /* @__PURE__ */ React9.createElement(DashboardIcon2, { fontSize: "small" }),
+      docs: /* @__PURE__ */ React9.createElement(DescriptionIcon2, { fontSize: "small" }),
+      playbook: /* @__PURE__ */ React9.createElement(ArticleIcon2, { fontSize: "small" }),
+      issues: /* @__PURE__ */ React9.createElement(BugReportIcon2, { fontSize: "small" })
+    };
+    Row = ({
+      label,
+      children
+    }) => /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", gap: 1, mb: 1 } }, /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2", color: "text.secondary", sx: { minWidth: 110 } }, label), /* @__PURE__ */ React9.createElement(Box9, { 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__ */ React9.createElement(
+        Drawer,
+        {
+          anchor: "right",
+          open,
+          onClose,
+          sx: { "& .MuiDrawer-paper": { width: { xs: "100%", sm: 480 } } }
+        },
+        /* @__PURE__ */ React9.createElement(Box9, { sx: { p: 2, display: "flex", alignItems: "flex-start", gap: 1.5 } }, /* @__PURE__ */ React9.createElement(AgentAvatar, { name: agent.name, avatarUrl: agent.avatarUrl, size: 56 }), /* @__PURE__ */ React9.createElement(Box9, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React9.createElement(Typography4, { variant: "h6" }, title), /* @__PURE__ */ React9.createElement(
+          Typography4,
+          {
+            variant: "caption",
+            color: "text.secondary",
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 0.5,
+              cursor: "pointer"
+            },
+            onClick: copyRef
+          },
+          agent.entityRef,
+          /* @__PURE__ */ React9.createElement(ContentCopyIcon, { sx: { fontSize: 12 } })
+        )), /* @__PURE__ */ React9.createElement(IconButton2, { size: "small", onClick: onClose }, /* @__PURE__ */ React9.createElement(CloseIcon, { fontSize: "small" }))),
+        /* @__PURE__ */ React9.createElement(Box9, { sx: { px: 2, pb: 2, display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React9.createElement(AgentStatusBadge, { status: agent.status }), onRefreshStatus && /* @__PURE__ */ React9.createElement(
+          IconButton2,
+          {
+            size: "small",
+            title: "Refresh status",
+            onClick: () => onRefreshStatus(agent.entityRef)
+          },
+          /* @__PURE__ */ React9.createElement(RefreshIcon, { fontSize: "small" })
+        )),
+        /* @__PURE__ */ React9.createElement(Box9, { sx: { px: 2, pb: 3 } }, /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2", sx: { mb: 2 } }, agent.purpose || agent.description || "No description provided."), /* @__PURE__ */ React9.createElement(Row, { label: "Runtime" }, /* @__PURE__ */ React9.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(RuntimeBadge, { runtime: agent.runtime.runtime }), agent.runtime.endpoint && /* @__PURE__ */ React9.createElement(
+          Link2,
+          {
+            href: agent.runtime.endpoint,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }
+          },
+          "endpoint ",
+          /* @__PURE__ */ React9.createElement(OpenInNewIcon, { sx: { fontSize: 12 } })
+        )), agent.runtime.runtimeHandle && /* @__PURE__ */ React9.createElement(Typography4, { variant: "caption", display: "block", color: "text.secondary", sx: { mt: 0.5, wordBreak: "break-all" } }, agent.runtime.runtimeHandle)), /* @__PURE__ */ React9.createElement(Row, { label: "Capabilities" }, agent.capabilities.length ? /* @__PURE__ */ React9.createElement(AgentCapabilities, { capabilities: agent.capabilities, max: 20 }) : /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2", color: "text.secondary" }, "\u2014")), /* @__PURE__ */ React9.createElement(Row, { label: "Billing" }, /* @__PURE__ */ React9.createElement(BillingBadge, { billing: agent.billing })), /* @__PURE__ */ React9.createElement(Row, { label: "Owner" }, agent.owner ?? "\u2014"), /* @__PURE__ */ React9.createElement(Row, { label: "System" }, agent.system ?? "\u2014"), /* @__PURE__ */ React9.createElement(Row, { label: "Lifecycle" }, agent.lifecycle ?? "\u2014"), /* @__PURE__ */ React9.createElement(Row, { label: "Version" }, agent.version ?? "\u2014"), /* @__PURE__ */ React9.createElement(Row, { label: "Tags" }, agent.tags.length ? /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 } }, agent.tags.map((t) => /* @__PURE__ */ React9.createElement(Chip5, { key: t, size: "small", label: t, variant: "outlined" }))) : /* @__PURE__ */ React9.createElement(Typography4, { variant: "body2", color: "text.secondary" }, "\u2014")), agent.links.length > 0 && /* @__PURE__ */ React9.createElement(Row, { label: "Links" }, /* @__PURE__ */ React9.createElement(List, { dense: true, disablePadding: true }, agent.links.map((l, i) => /* @__PURE__ */ React9.createElement(
+          ListItem,
+          {
+            key: i,
+            component: "a",
+            href: l.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: { color: "text.primary", borderRadius: 1, "&:hover": { bgcolor: "action.hover" } }
+          },
+          /* @__PURE__ */ React9.createElement(ListItemIcon, { sx: { minWidth: 28 } }, LINK_ICON2[l.icon ?? ""] ?? /* @__PURE__ */ React9.createElement(DescriptionIcon2, { fontSize: "small" })),
+          /* @__PURE__ */ React9.createElement(
+            ListItemText,
+            {
+              primary: l.title,
+              secondary: l.url,
+              secondaryTypographyProps: { sx: { fontSize: "0.7rem" }, noWrap: true }
+            }
+          )
+        )))), /* @__PURE__ */ React9.createElement(Row, { label: "Catalog" }, /* @__PURE__ */ React9.createElement(Link2, { href: `/catalog/${agent.entityRef.replace(":", "/")}` }, "Open in catalog ", /* @__PURE__ */ React9.createElement(OpenInNewIcon, { sx: { fontSize: 12, verticalAlign: "middle" } }))))
+      );
+    };
+  }
+});
+
+// src/components/AgentsPage.tsx
+var AgentsPage_exports = {};
+__export(AgentsPage_exports, {
+  AgentsPage: () => AgentsPage
+});
+import React10, { useCallback as useCallback2, useEffect, useState as useState4 } from "react";
+import { Box as Box10, CircularProgress, Typography as Typography5 } from "@mui/material";
+import { EmptyState } from "@backstage/core-components";
+import { useApi as useApi2 } from "@backstage/core-plugin-api";
+var POLL_INTERVAL_MS, AgentsPage;
+var init_AgentsPage = __esm({
+  "src/components/AgentsPage.tsx"() {
+    "use strict";
+    init_api();
+    init_useAgents();
+    init_AgentFilters();
+    init_AgentsGrid();
+    init_AgentDetailDrawer();
+    POLL_INTERVAL_MS = 3e4;
+    AgentsPage = () => {
+      const api = useApi2(aiAgentsApiRef);
+      const { agents, allAgents, loading, error, retry, filters, update, reset } = useAgents();
+      const [selected, setSelected] = useState4(null);
+      const [drawerOpen, setDrawerOpen] = useState4(false);
+      const [statuses, setStatuses] = useState4({});
+      const refs = allAgents.map((a) => a.entityRef);
+      useEffect(() => {
+        let cancelled = false;
+        if (!refs.length) return;
+        api.getStatuses(refs).then((result) => {
+          if (!cancelled) setStatuses(result);
+        });
+        return () => {
+          cancelled = true;
+        };
+      }, [api, refs.join(",")]);
+      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 = useCallback2((agent) => {
+        setSelected(agent);
+        setDrawerOpen(true);
+      }, []);
+      const handleRuntimeClick = useCallback2(
+        (runtime) => {
+          if (!filters.runtime.includes(runtime)) {
+            update({ runtime: [...filters.runtime, runtime] });
+          }
+        },
+        [filters.runtime, update]
+      );
+      const handleRefreshStatus = useCallback2(
+        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__ */ React10.createElement(Box10, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "40vh" }, /* @__PURE__ */ React10.createElement(CircularProgress, null));
+      }
+      if (error) {
+        return /* @__PURE__ */ React10.createElement(
+          EmptyState,
+          {
+            title: "Failed to load AI agents",
+            description: error.message,
+            missing: "content"
+          }
+        );
+      }
+      return /* @__PURE__ */ React10.createElement(Box10, { sx: { p: 3 } }, /* @__PURE__ */ React10.createElement(Box10, { sx: { mb: 2 } }, /* @__PURE__ */ React10.createElement(Typography5, { variant: "h4" }, "AI Agents"), /* @__PURE__ */ React10.createElement(Typography5, { variant: "body2", color: "text.secondary" }, "AI agents registered in the catalog as ", /* @__PURE__ */ React10.createElement("code", null, "Component"), " entities with ", /* @__PURE__ */ React10.createElement("code", null, "spec.type: ai-agent"), ".")), /* @__PURE__ */ React10.createElement(
+        AgentFiltersBar,
+        {
+          agents: allAgents,
+          filters,
+          onChange: update,
+          onReset: reset
+        }
+      ), agentsWithStatus.length === 0 ? /* @__PURE__ */ React10.createElement(
+        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__ */ React10.createElement("button", { onClick: () => retry() }, "Retry")
+        }
+      ) : /* @__PURE__ */ React10.createElement(
+        AgentsGrid,
+        {
+          agents: agentsWithStatus,
+          onAgentClick: handleCardClick,
+          onRuntimeClick: handleRuntimeClick
+        }
+      ), /* @__PURE__ */ React10.createElement(
+        AgentDetailDrawer,
+        {
+          agent: selected,
+          open: drawerOpen,
+          onClose: () => setDrawerOpen(false),
+          onRefreshStatus: handleRefreshStatus
+        }
+      ));
+    };
+  }
+});
+
+// src/plugin.tsx
+init_api();
+import React11 from "react";
+import { SmartToy as AgentIcon } from "@mui/icons-material";
+import {
+  ApiBlueprint,
+  PageBlueprint,
+  createFrontendPlugin,
+  fetchApiRef
+} from "@backstage/frontend-plugin-api";
+import { catalogApiRef } from "@backstage/plugin-catalog-react";
+var aiAgentsApi = ApiBlueprint.make({
+  params: (defineParams) => defineParams({
+    api: aiAgentsApiRef,
+    deps: { fetchApi: fetchApiRef, catalogApi: catalogApiRef },
+    factory: ({ fetchApi, catalogApi }) => new AiAgentsApi({ fetchApi, catalogApi })
+  })
+});
+var aiAgentsPage = PageBlueprint.make({
+  params: {
+    path: "/ai-agents",
+    title: "AI Agents",
+    icon: /* @__PURE__ */ React11.createElement(AgentIcon, null),
+    loader: async () => {
+      const { AgentsPage: AgentsPage2 } = await Promise.resolve().then(() => (init_AgentsPage(), AgentsPage_exports));
+      return /* @__PURE__ */ React11.createElement(AgentsPage2, null);
+    }
+  }
+});
+var aiAgentsPlugin = createFrontendPlugin({
+  pluginId: "ai-agents",
+  extensions: [aiAgentsApi, aiAgentsPage]
+});
+
+// src/index.ts
+init_AgentsPage();
+init_AgentCard();
+init_api();
+init_types();
+export {
+  AI_AGENT_ANNOTATION_PREFIX,
+  AI_AGENT_TYPE,
+  AgentCard,
+  AgentsPage,
+  AiAgentsApi,
+  aiAgentsApiRef,
+  aiAgentsPlugin,
+  entityToAgent
+};
+//# sourceMappingURL=index.esm.js.map