@industry-theme/agent-driven-ui-panels 0.1.0

package/dist/panels.bundle.js

@@ -0,0 +1,1634 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { forwardRef, createElement, createContext, useState, useEffect, useContext, useRef, useCallback } from "react";
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$b = [
+  [
+    "path",
+    {
+      d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      key: "169zse"
+    }
+  ]
+];
+const Activity = createLucideIcon("activity", __iconNode$b);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$a);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$9);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$8 = [
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M17 20v2", key: "1rnc9c" }],
+  ["path", { d: "M17 2v2", key: "11trls" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M2 17h2", key: "7oei6x" }],
+  ["path", { d: "M2 7h2", key: "asdhe0" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["path", { d: "M20 17h2", key: "1fpfkl" }],
+  ["path", { d: "M20 7h2", key: "1o8tra" }],
+  ["path", { d: "M7 20v2", key: "4gnj0m" }],
+  ["path", { d: "M7 2v2", key: "1i4yhu" }],
+  ["rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", key: "1vbyd7" }],
+  ["rect", { x: "8", y: "8", width: "8", height: "8", rx: "1", key: "z9xiuo" }]
+];
+const Cpu = createLucideIcon("cpu", __iconNode$8);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$7 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+const FileText = createLucideIcon("file-text", __iconNode$7);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z",
+      key: "sc7q7i"
+    }
+  ]
+];
+const Funnel = createLucideIcon("funnel", __iconNode$6);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [
+  ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
+  ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
+];
+const Pause = createLucideIcon("pause", __iconNode$5);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  [
+    "path",
+    {
+      d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
+      key: "10ikf1"
+    }
+  ]
+];
+const Play = createLucideIcon("play", __iconNode$4);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  [
+    "path",
+    {
+      d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z",
+      key: "vktsd0"
+    }
+  ],
+  ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
+];
+const Tag = createLucideIcon("tag", __iconNode$3);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["path", { d: "M10 11v6", key: "nco0om" }],
+  ["path", { d: "M14 11v6", key: "outv1u" }],
+  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
+];
+const Trash2 = createLucideIcon("trash-2", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+      key: "1ngwbx"
+    }
+  ]
+];
+const Wrench = createLucideIcon("wrench", __iconNode$1);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+var terminalTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: {
+    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8
+  },
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    "none",
+    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+  colors: {
+    text: "#e4e4e4",
+    background: "rgba(10, 10, 10, 0.85)",
+    primary: "#66b3ff",
+    secondary: "#80c4ff",
+    accent: "#66ff99",
+    highlight: "rgba(102, 179, 255, 0.15)",
+    muted: "rgba(26, 26, 26, 0.8)",
+    success: "#66ff99",
+    warning: "#ffcc66",
+    error: "#ff6666",
+    info: "#66b3ff",
+    border: "rgba(255, 255, 255, 0.1)",
+    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+    backgroundLight: "rgba(255, 255, 255, 0.05)",
+    backgroundHover: "rgba(102, 179, 255, 0.08)",
+    surface: "rgba(15, 15, 15, 0.95)",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    textMuted: "rgba(255, 255, 255, 0.4)",
+    highlightBg: "rgba(255, 235, 59, 0.25)",
+    highlightBorder: "rgba(255, 235, 59, 0.5)"
+  },
+  modes: {
+    light: {
+      text: "#1a1a1a",
+      background: "rgba(255, 255, 255, 0.9)",
+      primary: "#0066cc",
+      secondary: "#0052a3",
+      accent: "#00cc88",
+      highlight: "rgba(0, 102, 204, 0.08)",
+      muted: "rgba(245, 245, 245, 0.8)",
+      success: "#00cc88",
+      warning: "#ffaa00",
+      error: "#ff3333",
+      info: "#0066cc",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+      backgroundLight: "rgba(0, 0, 0, 0.02)",
+      backgroundHover: "rgba(0, 102, 204, 0.04)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "rgba(0, 0, 0, 0.6)",
+      textTertiary: "rgba(0, 0, 0, 0.4)",
+      textMuted: "rgba(0, 0, 0, 0.3)",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      bg: "primary",
+      borderWidth: 0,
+      "&:hover": {
+        bg: "secondary"
+      }
+    },
+    secondary: {
+      color: "primary",
+      bg: "transparent",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "primary",
+      "&:hover": {
+        bg: "highlight"
+      }
+    },
+    ghost: {
+      color: "text",
+      bg: "transparent",
+      "&:hover": {
+        bg: "backgroundHover"
+      }
+    }
+  },
+  text: {
+    heading: {
+      fontFamily: "heading",
+      fontWeight: "heading",
+      lineHeight: "heading"
+    },
+    body: {
+      fontFamily: "body",
+      fontWeight: "body",
+      lineHeight: "body"
+    },
+    caption: {
+      fontSize: 1,
+      color: "textSecondary"
+    }
+  },
+  cards: {
+    primary: {
+      bg: "surface",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    },
+    secondary: {
+      bg: "backgroundSecondary",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    }
+  }
+};
+function getMode(theme2, mode) {
+  if (!mode || !theme2.modes || !theme2.modes[mode]) {
+    return theme2.colors;
+  }
+  return {
+    ...theme2.colors,
+    ...theme2.modes[mode]
+  };
+}
+var ThemeContext;
+var getThemeContext = () => {
+  if (typeof window !== "undefined") {
+    const globalWindow = window;
+    if (!globalWindow.__principlemd_theme_context__) {
+      globalWindow.__principlemd_theme_context__ = createContext(void 0);
+    }
+    return globalWindow.__principlemd_theme_context__;
+  } else {
+    if (!ThemeContext) {
+      ThemeContext = createContext(void 0);
+    }
+    return ThemeContext;
+  }
+};
+var ThemeContextSingleton = getThemeContext();
+var useTheme = () => {
+  const context = useContext(ThemeContextSingleton);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({
+  children,
+  theme: customTheme = theme,
+  initialMode
+}) => {
+  const [mode, setMode] = useState(initialMode);
+  const activeTheme = React2.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem("principlemd-theme-mode", mode);
+    } else {
+      localStorage.removeItem("principlemd-theme-mode");
+    }
+  }, [mode]);
+  const value = {
+    theme: activeTheme,
+    mode,
+    setMode
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var theme = terminalTheme;
+const EventBusPanelContent = ({
+  events,
+  maxEvents = 200
+}) => {
+  const [capturedEvents, setCapturedEvents] = useState([]);
+  const [isPaused, setIsPaused] = useState(false);
+  const [filterType, setFilterType] = useState("");
+  const [filterSource, setFilterSource] = useState("");
+  const [showFilters, setShowFilters] = useState(false);
+  const eventIdRef = useRef(0);
+  const listRef = useRef(null);
+  const containerRef = useRef(null);
+  const isPausedRef = useRef(isPaused);
+  const [isNarrow, setIsNarrow] = useState(false);
+  const { theme: theme2 } = useTheme();
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      var _a;
+      const width = ((_a = entries[0]) == null ? void 0 : _a.contentRect.width) || 0;
+      setIsNarrow(width < 400);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+  useEffect(() => {
+    const extendedEvents = events;
+    if (!(extendedEvents == null ? void 0 : extendedEvents.onAll)) return;
+    const unsubscribe = extendedEvents.onAll((event) => {
+      if (isPausedRef.current) return;
+      const id = ++eventIdRef.current;
+      setCapturedEvents((prev) => {
+        const newEvents = [...prev, { id, event, expanded: false }];
+        if (newEvents.length > maxEvents) {
+          return newEvents.slice(-maxEvents);
+        }
+        return newEvents;
+      });
+    });
+    return unsubscribe;
+  }, [events, maxEvents]);
+  useEffect(() => {
+    if (!isPaused && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [capturedEvents, isPaused]);
+  const toggleExpanded = useCallback((id) => {
+    setCapturedEvents(
+      (prev) => prev.map((e) => e.id === id ? { ...e, expanded: !e.expanded } : e)
+    );
+  }, []);
+  const clearEvents = useCallback(() => {
+    setCapturedEvents([]);
+  }, []);
+  const clearFilters = useCallback(() => {
+    setFilterType("");
+    setFilterSource("");
+  }, []);
+  const hasActiveFilters = filterType || filterSource;
+  const filteredEvents = capturedEvents.filter((e) => {
+    if (filterType && !e.event.type.toLowerCase().includes(filterType.toLowerCase())) {
+      return false;
+    }
+    if (filterSource && !e.event.source.toLowerCase().includes(filterSource.toLowerCase())) {
+      return false;
+    }
+    return true;
+  });
+  const uniqueTypes = [...new Set(capturedEvents.map((e) => e.event.type))];
+  const uniqueSources = [...new Set(capturedEvents.map((e) => e.event.source))];
+  const getEventTypeColor = (type) => {
+    if (type.startsWith("panel:")) return theme2.colors.primary;
+    if (type.startsWith("file:")) return theme2.colors.success;
+    if (type.startsWith("repository:")) return theme2.colors.info;
+    if (type.startsWith("gemini:") || type.startsWith("ai:")) return theme2.colors.warning;
+    if (type.includes("error")) return theme2.colors.error;
+    return theme2.colors.textSecondary;
+  };
+  const formatTimestamp = (ts) => {
+    const date = new Date(ts);
+    const time = date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+    const ms = String(date.getMilliseconds()).padStart(3, "0");
+    return isNarrow ? `${time.slice(3)}` : `${time}.${ms}`;
+  };
+  const formatPayload = (payload) => {
+    try {
+      return JSON.stringify(payload, null, 2);
+    } catch {
+      return String(payload);
+    }
+  };
+  const buttonStyle = {
+    padding: isNarrow ? "6px 8px" : "6px 12px",
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    border: `1px solid ${theme2.colors.border}`,
+    borderRadius: theme2.radii[1],
+    background: theme2.colors.surface,
+    color: theme2.colors.text,
+    cursor: "pointer",
+    fontSize: theme2.fontSizes[1],
+    whiteSpace: "nowrap"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: theme2.fonts.body,
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "8px 12px" : "12px 16px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              flexShrink: 0,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx(Activity, { size: isNarrow ? 16 : 20, color: theme2.colors.primary, style: { flexShrink: 0 } }),
+              !isNarrow && /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: theme2.fontSizes[3],
+                    fontWeight: theme2.fontWeights.semibold,
+                    whiteSpace: "nowrap"
+                  },
+                  children: "Event Bus"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textMuted,
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    filteredEvents.length,
+                    !isNarrow && ` / ${capturedEvents.length}`
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "6px 8px" : "8px 16px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              flexShrink: 0,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setIsPaused(!isPaused),
+                  style: {
+                    ...buttonStyle,
+                    border: `1px solid ${isPaused ? theme2.colors.warning : theme2.colors.border}`,
+                    background: isPaused ? theme2.colors.warning : theme2.colors.surface,
+                    color: isPaused ? theme2.colors.background : theme2.colors.text
+                  },
+                  title: isPaused ? "Resume" : "Pause",
+                  children: [
+                    isPaused ? /* @__PURE__ */ jsx(Play, { size: 14 }) : /* @__PURE__ */ jsx(Pause, { size: 14 }),
+                    !isNarrow && (isPaused ? "Resume" : "Pause")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: clearEvents,
+                  style: buttonStyle,
+                  title: "Clear events",
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                    !isNarrow && "Clear"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: "8px" } }),
+              isNarrow ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setShowFilters(!showFilters),
+                  style: {
+                    ...buttonStyle,
+                    border: `1px solid ${hasActiveFilters ? theme2.colors.primary : theme2.colors.border}`,
+                    background: hasActiveFilters ? `${theme2.colors.primary}20` : theme2.colors.surface
+                  },
+                  title: "Toggle filters",
+                  children: [
+                    /* @__PURE__ */ jsx(Funnel, { size: 14, color: hasActiveFilters ? theme2.colors.primary : theme2.colors.textMuted }),
+                    hasActiveFilters && /* @__PURE__ */ jsx("span", { style: {
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      background: theme2.colors.primary
+                    } })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx(Funnel, { size: 14, color: theme2.colors.textMuted }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "Type...",
+                    value: filterType,
+                    onChange: (e) => setFilterType(e.target.value),
+                    list: "event-types",
+                    style: {
+                      padding: "4px 8px",
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[1],
+                      background: theme2.colors.surface,
+                      color: theme2.colors.text,
+                      fontSize: theme2.fontSizes[1],
+                      width: "100px",
+                      minWidth: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("datalist", { id: "event-types", children: uniqueTypes.map((type) => /* @__PURE__ */ jsx("option", { value: type }, type)) }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "Source...",
+                    value: filterSource,
+                    onChange: (e) => setFilterSource(e.target.value),
+                    list: "event-sources",
+                    style: {
+                      padding: "4px 8px",
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: theme2.radii[1],
+                      background: theme2.colors.surface,
+                      color: theme2.colors.text,
+                      fontSize: theme2.fontSizes[1],
+                      width: "100px",
+                      minWidth: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("datalist", { id: "event-sources", children: uniqueSources.map((source) => /* @__PURE__ */ jsx("option", { value: source }, source)) }),
+                hasActiveFilters && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: clearFilters,
+                    style: {
+                      ...buttonStyle,
+                      padding: "4px 6px"
+                    },
+                    title: "Clear filters",
+                    children: /* @__PURE__ */ jsx(X, { size: 12 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isNarrow && showFilters && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: "6px",
+              background: theme2.colors.backgroundSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Filter by type...",
+                  value: filterType,
+                  onChange: (e) => setFilterType(e.target.value),
+                  list: "event-types-narrow",
+                  style: {
+                    padding: "6px 8px",
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: theme2.colors.surface,
+                    color: theme2.colors.text,
+                    fontSize: theme2.fontSizes[1],
+                    width: "100%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("datalist", { id: "event-types-narrow", children: uniqueTypes.map((type) => /* @__PURE__ */ jsx("option", { value: type }, type)) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Filter by source...",
+                  value: filterSource,
+                  onChange: (e) => setFilterSource(e.target.value),
+                  list: "event-sources-narrow",
+                  style: {
+                    padding: "6px 8px",
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: theme2.radii[1],
+                    background: theme2.colors.surface,
+                    color: theme2.colors.text,
+                    fontSize: theme2.fontSizes[1],
+                    width: "100%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("datalist", { id: "event-sources-narrow", children: uniqueSources.map((source) => /* @__PURE__ */ jsx("option", { value: source }, source)) }),
+              hasActiveFilters && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: clearFilters,
+                  style: {
+                    ...buttonStyle,
+                    justifyContent: "center",
+                    width: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(X, { size: 12 }),
+                    "Clear Filters"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden",
+              padding: isNarrow ? "4px" : "8px",
+              fontFamily: theme2.fonts.monospace,
+              fontSize: theme2.fontSizes[1]
+            },
+            children: filteredEvents.length === 0 ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "24px 12px",
+                  textAlign: "center",
+                  color: theme2.colors.textMuted
+                },
+                children: capturedEvents.length === 0 ? "Waiting for events..." : "No events match your filter"
+              }
+            ) : filteredEvents.map((captured) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  marginBottom: "4px",
+                  borderRadius: theme2.radii[1],
+                  border: `1px solid ${theme2.colors.border}`,
+                  background: theme2.colors.surface,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      onClick: () => toggleExpanded(captured.id),
+                      style: {
+                        padding: isNarrow ? "6px 8px" : "8px 12px",
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: "6px",
+                        cursor: "pointer",
+                        userSelect: "none",
+                        flexWrap: isNarrow ? "wrap" : "nowrap"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 }, children: [
+                          captured.expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme2.colors.textMuted }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme2.colors.textMuted }),
+                          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted, fontSize: theme2.fontSizes[0] }, children: formatTimestamp(captured.event.timestamp) })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { style: {
+                          flex: 1,
+                          minWidth: 0,
+                          display: "flex",
+                          flexDirection: isNarrow ? "column" : "row",
+                          alignItems: isNarrow ? "flex-start" : "center",
+                          gap: isNarrow ? "2px" : "6px"
+                        }, children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                color: getEventTypeColor(captured.event.type),
+                                fontWeight: theme2.fontWeights.medium,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                maxWidth: "100%"
+                              },
+                              title: captured.event.type,
+                              children: captured.event.type
+                            }
+                          ),
+                          !isNarrow && /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted }, children: "from" }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                color: theme2.colors.info,
+                                fontSize: isNarrow ? theme2.fontSizes[0] : theme2.fontSizes[1],
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              title: captured.event.source,
+                              children: isNarrow ? `← ${captured.event.source}` : captured.event.source
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  captured.expanded && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: isNarrow ? "6px 8px" : "8px 12px",
+                        borderTop: `1px solid ${theme2.colors.border}`,
+                        background: theme2.colors.background,
+                        overflow: "auto",
+                        maxHeight: "200px"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "pre",
+                        {
+                          style: {
+                            margin: 0,
+                            whiteSpace: "pre-wrap",
+                            wordBreak: "break-word",
+                            color: theme2.colors.textSecondary,
+                            fontSize: theme2.fontSizes[0]
+                          },
+                          children: formatPayload(captured.event.payload)
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              captured.id
+            ))
+          }
+        ),
+        isPaused && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "6px 12px" : "8px 16px",
+              borderTop: `1px solid ${theme2.colors.warning}`,
+              background: `${theme2.colors.warning}20`,
+              color: theme2.colors.warning,
+              fontSize: theme2.fontSizes[1],
+              textAlign: "center",
+              flexShrink: 0
+            },
+            children: [
+              "⏸ ",
+              isNarrow ? "Paused" : "Event capture paused"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const EventBusPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(EventBusPanelContent, { ...props }) });
+};
+const CapabilityBadge = ({
+  name,
+  enabled,
+  compact
+}) => {
+  const { theme: theme2 } = useTheme();
+  if (!enabled) return null;
+  const formatName = (n) => n.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        padding: compact ? "1px 6px" : "2px 8px",
+        fontSize: theme2.fontSizes[0],
+        borderRadius: theme2.radii[1],
+        background: `${theme2.colors.primary}20`,
+        color: theme2.colors.primary,
+        border: `1px solid ${theme2.colors.primary}40`,
+        whiteSpace: "nowrap"
+      },
+      children: formatName(name)
+    }
+  );
+};
+const SchemaView = ({
+  schema,
+  label
+}) => {
+  const { theme: theme2 } = useTheme();
+  if (!schema || Object.keys(schema).length === 0) {
+    return /* @__PURE__ */ jsxs("div", { style: { color: theme2.colors.textMuted, fontStyle: "italic", fontSize: theme2.fontSizes[0] }, children: [
+      "No ",
+      label.toLowerCase(),
+      " schema defined"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textMuted,
+          marginBottom: "4px",
+          textTransform: "uppercase",
+          letterSpacing: "0.5px"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        style: {
+          margin: 0,
+          padding: "6px 8px",
+          background: theme2.colors.background,
+          borderRadius: theme2.radii[1],
+          border: `1px solid ${theme2.colors.border}`,
+          fontSize: theme2.fontSizes[0],
+          fontFamily: theme2.fonts.monospace,
+          color: theme2.colors.textSecondary,
+          overflow: "auto",
+          maxHeight: "150px",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word"
+        },
+        children: JSON.stringify(schema, null, 2)
+      }
+    )
+  ] });
+};
+const ToolItem = ({
+  tool,
+  index,
+  isNarrow
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: theme2.radii[1],
+        border: `1px solid ${theme2.colors.border}`,
+        background: theme2.colors.surface,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: () => setExpanded(!expanded),
+            style: {
+              padding: isNarrow ? "8px 10px" : "12px",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "6px",
+              cursor: "pointer",
+              userSelect: "none"
+            },
+            children: [
+              expanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme2.colors.textMuted, style: { marginTop: "2px", flexShrink: 0 } }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme2.colors.textMuted, style: { marginTop: "2px", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  flexWrap: "wrap"
+                }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: theme2.fonts.monospace,
+                        fontWeight: theme2.fontWeights.medium,
+                        color: theme2.colors.text,
+                        fontSize: isNarrow ? theme2.fontSizes[1] : theme2.fontSizes[2],
+                        wordBreak: "break-word"
+                      },
+                      children: tool.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textMuted,
+                        background: theme2.colors.backgroundSecondary,
+                        padding: "1px 5px",
+                        borderRadius: theme2.radii[0],
+                        flexShrink: 0
+                      },
+                      children: [
+                        "#",
+                        index + 1
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: isNarrow ? theme2.fontSizes[0] : theme2.fontSizes[1],
+                      color: theme2.colors.textSecondary,
+                      marginTop: "4px",
+                      lineHeight: 1.4
+                    },
+                    children: tool.description
+                  }
+                ),
+                tool.tags && tool.tags.length > 0 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "4px",
+                      marginTop: "6px",
+                      flexWrap: "wrap"
+                    },
+                    children: [
+                      tool.tags.slice(0, isNarrow ? 3 : void 0).map((tag) => /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "2px",
+                            padding: "1px 5px",
+                            fontSize: theme2.fontSizes[0],
+                            background: theme2.colors.backgroundSecondary,
+                            color: theme2.colors.textMuted,
+                            borderRadius: theme2.radii[0]
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Tag, { size: 8 }),
+                            tag
+                          ]
+                        },
+                        tag
+                      )),
+                      isNarrow && tool.tags.length > 3 && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            fontSize: theme2.fontSizes[0],
+                            color: theme2.colors.textMuted
+                          },
+                          children: [
+                            "+",
+                            tool.tags.length - 3
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "8px 10px" : "12px",
+              borderTop: `1px solid ${theme2.colors.border}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: "10px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                SchemaView,
+                {
+                  schema: tool.inputs,
+                  label: "Input Schema"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SchemaView,
+                {
+                  schema: tool.outputs,
+                  label: "Output Schema"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const AgentToolsPanelContent = ({
+  agentConfig
+}) => {
+  const { theme: theme2 } = useTheme();
+  const containerRef = useRef(null);
+  const [isNarrow, setIsNarrow] = useState(false);
+  const [activeTab, setActiveTab] = useState("prompt");
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver((entries) => {
+      var _a;
+      const width = ((_a = entries[0]) == null ? void 0 : _a.contentRect.width) || 0;
+      setIsNarrow(width < 350);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+  const config = agentConfig || {
+    id: "no-agent",
+    name: "No Agent Loaded",
+    description: "Connect an agent to view its tools and configuration.",
+    tools: []
+  };
+  const tools = config.tools || [];
+  const capabilities = config.capabilities || {};
+  const enabledCapabilities = Object.entries(capabilities).filter(
+    ([, enabled]) => enabled
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: theme2.fonts.body,
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "12px" : "16px",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: isNarrow ? "8px" : "12px"
+              }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: isNarrow ? "32px" : "40px",
+                      height: isNarrow ? "32px" : "40px",
+                      borderRadius: theme2.radii[2],
+                      background: theme2.colors.primary,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: isNarrow ? "16px" : "20px",
+                      flexShrink: 0,
+                      color: theme2.colors.background
+                    },
+                    children: config.icon || /* @__PURE__ */ jsx(Cpu, { size: isNarrow ? 16 : 20, color: theme2.colors.background })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: isNarrow ? theme2.fontSizes[3] : theme2.fontSizes[4],
+                        fontWeight: theme2.fontWeights.semibold,
+                        wordBreak: "break-word"
+                      },
+                      children: config.name
+                    }
+                  ),
+                  config.version && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textMuted
+                      },
+                      children: [
+                        "v",
+                        config.version
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    margin: "8px 0 0 0",
+                    fontSize: isNarrow ? theme2.fontSizes[1] : theme2.fontSizes[2],
+                    color: theme2.colors.textSecondary,
+                    lineHeight: 1.4
+                  },
+                  children: config.description
+                }
+              ),
+              enabledCapabilities.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "4px",
+                    marginTop: "10px",
+                    flexWrap: "wrap"
+                  },
+                  children: enabledCapabilities.map(([name, enabled]) => /* @__PURE__ */ jsx(CapabilityBadge, { name, enabled: !!enabled, compact: isNarrow }, name))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab("prompt"),
+                  style: {
+                    flex: 1,
+                    padding: isNarrow ? "8px 12px" : "10px 16px",
+                    background: "transparent",
+                    border: "none",
+                    borderBottom: activeTab === "prompt" ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                    color: activeTab === "prompt" ? theme2.colors.text : theme2.colors.textMuted,
+                    fontSize: isNarrow ? theme2.fontSizes[1] : theme2.fontSizes[2],
+                    fontWeight: theme2.fontWeights.medium,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontFamily: theme2.fonts.body
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(FileText, { size: 14 }),
+                    "Prompt"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab("tools"),
+                  style: {
+                    flex: 1,
+                    padding: isNarrow ? "8px 12px" : "10px 16px",
+                    background: "transparent",
+                    border: "none",
+                    borderBottom: activeTab === "tools" ? `2px solid ${theme2.colors.primary}` : "2px solid transparent",
+                    color: activeTab === "tools" ? theme2.colors.text : theme2.colors.textMuted,
+                    fontSize: isNarrow ? theme2.fontSizes[1] : theme2.fontSizes[2],
+                    fontWeight: theme2.fontWeights.medium,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    fontFamily: theme2.fonts.body
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Wrench, { size: 14 }),
+                    "Tools",
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textMuted,
+                          background: theme2.colors.backgroundSecondary,
+                          padding: "1px 5px",
+                          borderRadius: theme2.radii[0]
+                        },
+                        children: tools.length
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden"
+            },
+            children: [
+              activeTab === "prompt" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    padding: isNarrow ? "12px" : "16px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "12px"
+                  },
+                  children: [
+                    config.instructions ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[1],
+                          color: theme2.colors.textSecondary,
+                          lineHeight: 1.6,
+                          whiteSpace: "pre-wrap",
+                          fontFamily: theme2.fonts.body
+                        },
+                        children: config.instructions
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          padding: "20px 12px",
+                          textAlign: "center",
+                          color: theme2.colors.textMuted,
+                          fontSize: theme2.fontSizes[1]
+                        },
+                        children: "No system prompt defined"
+                      }
+                    ),
+                    config.systemPromptRef && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: isNarrow ? "8px 12px" : "10px 16px",
+                          background: theme2.colors.surface,
+                          borderRadius: theme2.radii[1],
+                          border: `1px solid ${theme2.colors.border}`,
+                          fontSize: theme2.fontSizes[1]
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: theme2.fontSizes[0],
+                                color: theme2.colors.textMuted,
+                                marginBottom: "4px",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.5px"
+                              },
+                              children: "Source"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontFamily: theme2.fonts.monospace,
+                                color: theme2.colors.text,
+                                wordBreak: "break-all"
+                              },
+                              children: config.systemPromptRef.uri
+                            }
+                          ),
+                          config.systemPromptRef.label && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "4px",
+                                color: theme2.colors.textMuted
+                              },
+                              children: config.systemPromptRef.label
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              activeTab === "tools" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: isNarrow ? "8px" : "12px 16px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "6px"
+                  },
+                  children: tools.length === 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "20px 12px",
+                        textAlign: "center",
+                        color: theme2.colors.textMuted,
+                        fontSize: theme2.fontSizes[1]
+                      },
+                      children: "No tools defined"
+                    }
+                  ) : tools.map((tool, index) => /* @__PURE__ */ jsx(ToolItem, { tool, index, isNarrow }, tool.name))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: isNarrow ? "6px 12px" : "8px 16px",
+              borderTop: `1px solid ${theme2.colors.border}`,
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textMuted,
+              fontFamily: theme2.fonts.monospace,
+              flexShrink: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            title: config.id,
+            children: config.id
+          }
+        )
+      ]
+    }
+  );
+};
+const AgentToolsPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AgentToolsPanelContent, { ...props }) });
+};
+const panels = [
+  {
+    metadata: {
+      id: "industry-theme.event-bus-panel",
+      name: "Event Bus",
+      icon: "radio",
+      version: "0.1.0",
+      author: "Industry Theme",
+      description: "Real-time event bus monitor showing all events flowing through the panel system",
+      slices: [],
+      tools: []
+    },
+    component: EventBusPanel
+  },
+  {
+    metadata: {
+      id: "industry-theme.agent-tools-panel",
+      name: "Agent Tools",
+      icon: "wrench",
+      version: "0.1.0",
+      author: "Industry Theme",
+      description: "Displays agent configuration, capabilities, and available tools with their schemas",
+      slices: [],
+      tools: []
+    },
+    component: AgentToolsPanel
+  }
+];
+const onPackageLoad = async () => {
+  console.log("Agent Driven UI Panels loaded");
+};
+const onPackageUnload = async () => {
+  console.log("Agent Driven UI Panels unloading");
+};
+export {
+  AgentToolsPanel,
+  EventBusPanel,
+  onPackageLoad,
+  onPackageUnload,
+  panels
+};
+//# sourceMappingURL=panels.bundle.js.map