mywhy-ui 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -2,12 +2,35 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React9 = require('react');
+var lucideReact = require('lucide-react');
+var rosmsg = require('@foxglove/rosmsg');
+var rosmsg2Serialization = require('@foxglove/rosmsg2-serialization');
+var wsProtocol = require('@foxglove/ws-protocol');
+var EventEmitter = require('eventemitter3');
+var WebSocket = require('isomorphic-ws');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React9__default = /*#__PURE__*/_interopDefault(React9);
+var EventEmitter__default = /*#__PURE__*/_interopDefault(EventEmitter);
+var WebSocket__default = /*#__PURE__*/_interopDefault(WebSocket);
 
-// src/components/Spinner/Spinner.tsx
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
 var sizeClasses = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -545,7 +568,7 @@ function MultiSelect({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  const sizeClasses11 = {
+  const sizeClasses13 = {
     sm: "h-7 px-2 text-sm",
     md: "h-8 px-3 text-base",
     lg: "h-9 px-4 text-base"
@@ -563,7 +586,7 @@ function MultiSelect({
             "focus-within:ring-2 focus-within:ring-brand focus-within:ring-offset-1",
             disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
             error ? "border-danger-border" : "border-outline",
-            sizeClasses11[size]
+            sizeClasses13[size]
           ].join(" "),
           onClick: () => !disabled && setIsOpen(!isOpen),
           children: [
@@ -1613,6 +1636,412 @@ function Sidebar({
     }
   );
 }
+function Table({
+  columns,
+  data,
+  striped = true,
+  hoverable = true,
+  compact = false,
+  className = "",
+  emptyMessage = "No data"
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-ink-faint text-sm", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-x-auto border border-outline rounded-lg ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface-gray border-b border-outline", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        style: { width: col.width },
+        className: `
+                  ${compact ? "px-3 py-2" : "px-4 py-3"}
+                  text-left text-xs font-semibold text-ink-faint uppercase tracking-wide
+                  ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                `,
+        children: col.label
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        className: `
+                border-b border-outline last:border-b-0
+                ${striped && rowIdx % 2 === 1 ? "bg-surface-gray/50" : ""}
+                ${hoverable ? "hover:bg-surface-overlay transition-colors" : ""}
+              `,
+        children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            style: { width: col.width },
+            className: `
+                    ${compact ? "px-3 py-2" : "px-4 py-3"}
+                    text-sm text-ink
+                    ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                  `,
+            children: col.render ? col.render(row[col.key], row) : row[col.key]
+          },
+          `${rowIdx}-${col.key}`
+        ))
+      },
+      rowIdx
+    )) })
+  ] }) });
+}
+var ChevronLeftIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) });
+var ChevronRightIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) });
+function Pagination({
+  current,
+  total,
+  onChange,
+  size = "md",
+  showInfo = true,
+  maxVisible = 5,
+  className = ""
+}) {
+  const sizeClass = size === "sm" ? "text-xs px-2 py-1" : "text-sm px-3 py-2";
+  const getPages = () => {
+    const pages2 = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+    let start = Math.max(1, current - halfVisible);
+    let end = Math.min(total, current + halfVisible);
+    if (start === 1) {
+      end = Math.min(total, maxVisible);
+    } else if (end === total) {
+      start = Math.max(1, total - maxVisible + 1);
+    }
+    if (start > 1) pages2.push(1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < total - 1) pages2.push("...");
+    if (end < total) pages2.push(total);
+    return pages2;
+  };
+  const pages = getPages();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    showInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-ink-faint", children: [
+      "Page ",
+      current,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.max(1, current - 1)),
+        disabled: current === 1,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Previous page",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: pages.map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-ink-faint", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onChange(page),
+          className: `
+                flex items-center justify-center rounded border
+                transition-colors ${sizeClass}
+                ${current === page ? "bg-brand text-white border-brand" : "border-outline hover:bg-surface-overlay"}
+              `,
+          children: page
+        },
+        page
+      )
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.min(total, current + 1)),
+        disabled: current === total,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Next page",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    )
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col items-center justify-center py-12 px-4 ${className}`, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl mb-4", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-ink mb-2", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ink-faint mb-6 text-center max-w-sm", children: description }),
+    action && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: action.onClick,
+        className: "px-4 py-2 bg-brand text-white rounded-md hover:bg-brand-600 transition-colors text-sm font-medium",
+        children: action.label
+      }
+    )
+  ] });
+}
+var ChevronUpIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" }) });
+var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) });
+var sizeClasses10 = {
+  sm: "text-xs px-2 py-1 h-8",
+  md: "text-sm px-3 py-2 h-10",
+  lg: "text-base px-4 py-2.5 h-12"
+};
+function NumberInput({
+  value,
+  onChange,
+  step = 1,
+  min,
+  max,
+  size = "md",
+  disabled = false,
+  placeholder,
+  className = ""
+}) {
+  const [isEditing, setIsEditing] = React9.useState(false);
+  const handleIncrement = () => {
+    const newValue = value + step;
+    if (max === void 0 || newValue <= max) {
+      onChange(newValue);
+    }
+  };
+  const handleDecrement = () => {
+    const newValue = value - step;
+    if (min === void 0 || newValue >= min) {
+      onChange(newValue);
+    }
+  };
+  const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isNaN(newValue)) {
+      let val = newValue;
+      if (min !== void 0 && val < min) val = min;
+      if (max !== void 0 && val > max) val = max;
+      onChange(val);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative inline-flex items-center border border-outline rounded-md bg-surface ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        value,
+        onChange: handleInputChange,
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        disabled,
+        placeholder,
+        step,
+        min,
+        max,
+        className: `
+          flex-1 bg-transparent outline-none text-ink disabled:text-ink-faint disabled:cursor-not-allowed
+          ${sizeClasses10[size]}
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-l border-outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleIncrement,
+          disabled: disabled || max !== void 0 && value >= max,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors",
+          title: "Increment",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleDecrement,
+          disabled: disabled || min !== void 0 && value <= min,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors border-t border-outline",
+          title: "Decrement",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      )
+    ] })
+  ] });
+}
+var CopyIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })
+] });
+var CheckIcon = ({ size, className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+function CodeBlock({
+  code,
+  language = "text",
+  copyable = true,
+  numbered = false,
+  maxHeight = "max-h-96",
+  className = ""
+}) {
+  const [copied, setCopied] = React9.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative bg-ink rounded-lg overflow-hidden border border-outline ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between bg-surface-gray px-4 py-2 border-b border-outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ink-faint font-mono uppercase", children: language }),
+      copyable && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "p-1 rounded hover:bg-surface-overlay transition-colors text-ink-faint hover:text-ink",
+          title: "Copy to clipboard",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "currentColor" }, className: "text-status-online", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }) }) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-auto ${maxHeight}`, children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 text-sm font-mono text-sky-100", children: numbered ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-faint select-none", children: String(i + 1).padStart(3, " ") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: line })
+    ] }, i)) }) : code }) })
+  ] });
+}
+var statusColors = {
+  completed: {
+    dot: "bg-status-online border-status-online",
+    line: "bg-status-online",
+    text: "text-status-online"
+  },
+  pending: {
+    dot: "bg-ink-light border-ink-light",
+    line: "bg-ink-faint",
+    text: "text-ink-faint"
+  },
+  error: {
+    dot: "bg-danger-icon border-danger-icon",
+    line: "bg-danger-icon",
+    text: "text-danger-text"
+  },
+  "in-progress": {
+    dot: "bg-brand border-brand",
+    line: "bg-brand",
+    text: "text-brand"
+  }
+};
+function Timeline({
+  items,
+  orientation = "vertical",
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: items.map((item, index) => {
+      const colors = statusColors[item.status];
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `
+                    w-4 h-4 rounded-full border-2 flex-shrink-0
+                    flex items-center justify-center bg-white
+                    ${colors.dot}
+                  `,
+              children: item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-2xs", children: item.icon })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-0.5 h-12 ${colors.line}` })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-semibold text-sm ${colors.text}`, children: item.label }),
+            item.timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit"
+            }) })
+          ] }),
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ink-faint mt-1", children: item.description })
+        ] })
+      ] }, item.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex gap-4 overflow-x-auto pb-2 ${className}`, children: items.map((item, index) => {
+    const colors = statusColors[item.status];
+    index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center flex-shrink-0 gap-2 min-w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-0.5 w-6 ${statusColors[items[index - 1].status].line}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+                  w-5 h-5 rounded-full border-2 flex items-center justify-center bg-white
+                  ${colors.dot}
+                `,
+            children: item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-2xs", children: item.icon })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs font-semibold ${colors.text}`, children: item.label }),
+        item.timestamp && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ] })
+    ] }, item.id);
+  }) });
+}
+var sizeClasses11 = {
+  xs: "text-xs px-1.5 py-0.5 min-w-5 h-5",
+  sm: "text-xs px-2 py-1 min-w-6 h-6",
+  md: "text-sm px-2.5 py-1.5 min-w-8 h-8"
+};
+var themeClasses5 = {
+  gray: "bg-surface-gray border-outline text-ink",
+  dark: "bg-ink text-white border-ink-faint",
+  brand: "bg-brand border-brand text-white"
+};
+function Kbd({
+  keys,
+  size = "sm",
+  theme = "gray",
+  className = ""
+}) {
+  const keyArray = Array.isArray(keys) ? keys : [keys];
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        className: `
+              inline-flex items-center justify-center rounded font-mono font-medium
+              border border-b-2 shadow-sm
+              ${sizeClasses11[size]}
+              ${themeClasses5[theme]}
+            `,
+        children: key
+      }
+    ),
+    i < keyArray.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-faint text-xs", children: "+" })
+  ] }, key)) });
+}
 var statusConfig = {
   online: {
     label: "Online",
@@ -1687,7 +2116,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses10 = {
+var sizeClasses12 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -1706,7 +2135,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses10[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       StatusBadge,
       {
@@ -1732,6 +2161,1004 @@ function ConnectionIcon({ connected, size = "md", className = "" }) {
     }
   );
 }
+var collectLeafNodes = (entries) => entries.flatMap(
+  (entry) => entry.children.length === 0 ? [entry] : collectLeafNodes(entry.children)
+);
+var DiagnosticsTable = ({
+  diagnostics,
+  setSelectedRawName,
+  variant
+}) => {
+  const levelFilter = (level) => variant === "error" ? level >= 2 : level === 1;
+  const filteredDiagnostics = collectLeafNodes(diagnostics).filter((d) => levelFilter(d.severity_level));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Alert,
+      {
+        theme: variant === "error" ? "danger" : "warning",
+        title: variant === "error" ? "Errors" : "Warnings"
+      }
+    ),
+    filteredDiagnostics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto border border-gray-200 rounded", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 text-left font-semibold text-gray-700", children: "Name" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 text-left font-semibold text-gray-700", children: "Message" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: filteredDiagnostics.map((diag, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "tr",
+        {
+          className: "border-b border-gray-200 hover:bg-blue-50 cursor-pointer transition-colors",
+          onClick: () => setSelectedRawName(diag.rawName),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+              diag.icon,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: diag.name || "N/A" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: diag.path || "N/A" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2 text-gray-700", children: diag.message || "N/A" })
+          ]
+        },
+        index
+      )) })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-12 h-12 text-green-500" }),
+        title: variant === "error" ? "No Errors" : "No Warnings",
+        description: "All diagnostics are healthy"
+      }
+    )
+  ] });
+};
+var DiagnosticsTreeTable = ({
+  diagnostics,
+  bridgeConnected,
+  selectedRawName,
+  setSelectedRawName
+}) => {
+  const renderTree = (entries, depth = 0) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-start gap-2 p-2 hover:bg-gray-100 rounded cursor-pointer transition-colors",
+          style: { paddingLeft: `${depth * 1.5}rem` },
+          onClick: () => setSelectedRawName(entry.rawName),
+          children: [
+            entry.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 mt-0.5", children: entry.icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 truncate", children: entry.name }),
+              entry.message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 truncate", children: entry.message })
+            ] })
+          ]
+        }
+      ),
+      entry.children.length > 0 && renderTree(entry.children, depth + 1)
+    ] }, entry.rawName)) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Diagnostics Tree" }),
+    diagnostics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: renderTree(diagnostics) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 text-center py-8", children: "No diagnostics available" })
+  ] }) });
+};
+var _client, _connecting, _messageReaders, _messageWriters, _channelsById, _channelsByName, _servicesById, _servicesByName, _publisherIdsWithCount, _subscriptionIdsWithCount, _callId, _paramId, _Impl_instances, getChannel_fn, getService_fn, getMessageReader_fn, getMessageWriter_fn;
+var Impl = class {
+  constructor(url) {
+    __privateAdd(this, _Impl_instances);
+    this.emitter = new EventEmitter__default.default();
+    __privateAdd(this, _client);
+    __privateAdd(this, _connecting);
+    // Message Readers / Writers
+    __privateAdd(this, _messageReaders, /* @__PURE__ */ new Map());
+    __privateAdd(this, _messageWriters, /* @__PURE__ */ new Map());
+    // Channels
+    __privateAdd(this, _channelsById, /* @__PURE__ */ new Map());
+    __privateAdd(this, _channelsByName, /* @__PURE__ */ new Map());
+    // Services
+    __privateAdd(this, _servicesById, /* @__PURE__ */ new Map());
+    __privateAdd(this, _servicesByName, /* @__PURE__ */ new Map());
+    __privateAdd(this, _publisherIdsWithCount, /* @__PURE__ */ new Map());
+    __privateAdd(this, _subscriptionIdsWithCount, /* @__PURE__ */ new Map());
+    __privateAdd(this, _callId, 0);
+    __privateAdd(this, _paramId, 0);
+    __privateSet(this, _client, new wsProtocol.FoxgloveClient({
+      // TODO: "foxglove.sdk.v1" was added here manually because Foxglove switched the foxglove-bridge
+      // package for Jazzy from ros-foxglove-bridge repo (v0.8.5) which used "foxglove.websocket.v1"
+      // to their new foxglove-sdk version (v3.2.x) which uses "foxglove.sdk.v1" around September 2025,
+      // but the @foxglove/ws-protocol npm package has not yet been updated to include this new
+      // subprotocol. Once that package is updated, or a new alternative is released, "foxglove.sdk.v1"
+      // may be removed from here and adjusted accordingly. As far as I can tell, it seems that
+      // the underlying protocols are compatible for our use case, and is effectively only a name change.
+      ws: new WebSocket__default.default(url, ["foxglove.sdk.v1", wsProtocol.FoxgloveClient.SUPPORTED_SUBPROTOCOL])
+    }));
+    const open = new Promise((resolve) => {
+      __privateGet(this, _client).on("open", resolve);
+    });
+    __privateGet(this, _client).on("close", (event) => {
+      this.emitter.emit("close", event);
+    });
+    __privateGet(this, _client).on("error", (error) => {
+      this.emitter.emit("error", error ?? new Error("WebSocket error"));
+    });
+    __privateGet(this, _client).on("advertise", (channels) => {
+      for (const channel of channels) {
+        __privateGet(this, _channelsById).set(channel.id, channel);
+        __privateGet(this, _channelsByName).set(channel.topic, channel);
+      }
+    });
+    __privateGet(this, _client).on("unadvertise", (channelIds) => {
+      for (const channelId of channelIds) {
+        const channel = __privateGet(this, _channelsById).get(channelId);
+        if (channel) {
+          __privateGet(this, _channelsById).delete(channel.id);
+          __privateGet(this, _channelsByName).delete(channel.topic);
+        }
+      }
+    });
+    __privateGet(this, _client).on("advertiseServices", (services) => {
+      for (const service of services) {
+        __privateGet(this, _servicesById).set(service.id, service);
+        __privateGet(this, _servicesByName).set(service.name, service);
+      }
+    });
+    __privateGet(this, _client).on("unadvertiseServices", (serviceIds) => {
+      for (const serviceId of serviceIds) {
+        const service = __privateGet(this, _servicesById).get(serviceId);
+        if (service) {
+          __privateGet(this, _servicesById).delete(service.id);
+          __privateGet(this, _servicesByName).delete(service.name);
+        }
+      }
+    });
+    __privateSet(this, _connecting, new Promise((resolve) => {
+      Promise.all([open]).then(() => {
+        this.emitter.emit("connection");
+        resolve();
+      });
+    }));
+  }
+  close() {
+    __privateGet(this, _client).close();
+  }
+  getTopics() {
+    return {
+      topics: [...__privateGet(this, _channelsByName).keys()],
+      types: [...__privateGet(this, _channelsByName).values()].map((x) => x.schemaName)
+    };
+  }
+  async getServices() {
+    await __privateGet(this, _connecting);
+    return new Promise((resolve) => {
+      const listener = (event) => {
+        __privateGet(this, _client).off("connectionGraphUpdate", listener);
+        __privateGet(this, _client).unsubscribeConnectionGraph();
+        resolve(event.advertisedServices.map((service) => service.name));
+      };
+      __privateGet(this, _client).on("connectionGraphUpdate", listener);
+      __privateGet(this, _client).subscribeConnectionGraph();
+    });
+  }
+  getTopicType(topic) {
+    return __privateGet(this, _channelsByName).get(topic)?.schemaName;
+  }
+  getServiceType(service) {
+    return __privateGet(this, _servicesByName).get(service)?.type;
+  }
+  async createPublisher(name, messageType) {
+    await __privateGet(this, _connecting);
+    const channel = __privateMethod(this, _Impl_instances, getChannel_fn).call(this, name);
+    const publisherId = (() => {
+      const idWithCount = __privateGet(this, _publisherIdsWithCount).get(name);
+      if (idWithCount) {
+        idWithCount.count++;
+        return idWithCount.id;
+      }
+      const publisherId2 = __privateGet(this, _client).advertise({
+        topic: name,
+        encoding: "cdr",
+        schemaName: messageType
+      });
+      __privateGet(this, _publisherIdsWithCount).set(name, { id: publisherId2, count: 1 });
+      return publisherId2;
+    })();
+    const writer = __privateMethod(this, _Impl_instances, getMessageWriter_fn).call(this, await channel);
+    return {
+      publish: (message) => {
+        __privateGet(this, _client).sendMessage(publisherId, writer.writeMessage(message));
+      },
+      unadvertise: () => {
+        const idWithCount = __privateGet(this, _publisherIdsWithCount).get(name);
+        if (idWithCount) {
+          idWithCount.count--;
+          if (idWithCount.count === 0) {
+            __privateGet(this, _publisherIdsWithCount).delete(name);
+            __privateGet(this, _client).unadvertise(publisherId);
+          }
+        }
+      }
+    };
+  }
+  async createSubscription(name, callback) {
+    await __privateGet(this, _connecting);
+    const channel = await __privateMethod(this, _Impl_instances, getChannel_fn).call(this, name);
+    const subscriptionId = (() => {
+      const idWithCount = __privateGet(this, _subscriptionIdsWithCount).get(name);
+      if (idWithCount) {
+        idWithCount.count++;
+        return idWithCount.id;
+      }
+      const subscriptionId2 = __privateGet(this, _client).subscribe(channel.id);
+      __privateGet(this, _subscriptionIdsWithCount).set(name, {
+        id: subscriptionId2,
+        count: 1
+      });
+      return subscriptionId2;
+    })();
+    const reader = __privateMethod(this, _Impl_instances, getMessageReader_fn).call(this, channel);
+    const listener = (event) => {
+      if (event.subscriptionId === subscriptionId) {
+        callback(reader.readMessage(event.data));
+      }
+    };
+    __privateGet(this, _client).on("message", listener);
+    return {
+      unsubscribe: () => {
+        __privateGet(this, _client).off("message", listener);
+        const idWithCount = __privateGet(this, _subscriptionIdsWithCount).get(name);
+        if (idWithCount) {
+          idWithCount.count--;
+          if (idWithCount.count === 0) {
+            __privateGet(this, _subscriptionIdsWithCount).delete(name);
+            __privateGet(this, _client).unsubscribe(subscriptionId);
+          }
+        }
+      }
+    };
+  }
+  async sendServiceRequest(name, request) {
+    await __privateGet(this, _connecting);
+    const service = await __privateMethod(this, _Impl_instances, getService_fn).call(this, name);
+    const writer = __privateMethod(this, _Impl_instances, getMessageWriter_fn).call(this, service);
+    const reader = __privateMethod(this, _Impl_instances, getMessageReader_fn).call(this, service);
+    const callId = __privateWrapper(this, _callId)._++;
+    return new Promise((resolve) => {
+      const listener = (event) => {
+        if (event.serviceId === service.id && event.callId === callId) {
+          __privateGet(this, _client).off("serviceCallResponse", listener);
+          resolve(reader.readMessage(event.data));
+        }
+      };
+      __privateGet(this, _client).on("serviceCallResponse", listener);
+      __privateGet(this, _client).sendServiceCallRequest({
+        serviceId: service.id,
+        callId,
+        encoding: "cdr",
+        data: new DataView(writer.writeMessage(request).buffer)
+      });
+    });
+  }
+  async getParameter(name) {
+    await __privateGet(this, _connecting);
+    const paramId = (__privateWrapper(this, _paramId)._++).toString();
+    return new Promise((resolve) => {
+      const listener = (event) => {
+        if (event.parameters[0]?.name === name && event.id === paramId) {
+          __privateGet(this, _client).off("parameterValues", listener);
+          resolve(event.parameters[0].value);
+        }
+      };
+      __privateGet(this, _client).on("parameterValues", listener);
+      __privateGet(this, _client).getParameters([name], paramId);
+    });
+  }
+  async setParameter(name, value) {
+    await __privateGet(this, _connecting);
+    const paramId = (__privateWrapper(this, _paramId)._++).toString();
+    return new Promise((resolve) => {
+      const listener = (event) => {
+        if (event.parameters[0]?.name === name && event.id === paramId) {
+          __privateGet(this, _client).off("parameterValues", listener);
+          resolve(event.parameters[0]);
+        }
+      };
+      __privateGet(this, _client).on("parameterValues", listener);
+      __privateGet(this, _client).setParameters([{ name, value }], paramId);
+    });
+  }
+};
+_client = new WeakMap();
+_connecting = new WeakMap();
+_messageReaders = new WeakMap();
+_messageWriters = new WeakMap();
+_channelsById = new WeakMap();
+_channelsByName = new WeakMap();
+_servicesById = new WeakMap();
+_servicesByName = new WeakMap();
+_publisherIdsWithCount = new WeakMap();
+_subscriptionIdsWithCount = new WeakMap();
+_callId = new WeakMap();
+_paramId = new WeakMap();
+_Impl_instances = new WeakSet();
+getChannel_fn = async function(name) {
+  await __privateGet(this, _connecting);
+  return __privateGet(this, _channelsByName).get(name) ?? await new Promise((resolve) => {
+    const listener = (channels) => {
+      const channel = channels.find((channel2) => channel2.topic === name);
+      if (channel) {
+        __privateGet(this, _client).off("advertise", listener);
+        resolve(channel);
+      }
+    };
+    __privateGet(this, _client).on("advertise", listener);
+  });
+};
+getService_fn = async function(name) {
+  await __privateGet(this, _connecting);
+  return __privateGet(this, _servicesByName).get(name) ?? await new Promise((resolve) => {
+    const listener = (services) => {
+      const service = services.find((channel) => channel.name === name);
+      if (service) {
+        __privateGet(this, _client).off("advertiseServices", listener);
+        resolve(service);
+      }
+    };
+    __privateGet(this, _client).on("advertiseServices", listener);
+  });
+};
+getMessageReader_fn = function(channelOrService) {
+  const name = "schemaName" in channelOrService ? channelOrService.schemaName : channelOrService.type;
+  const schemaEncoding = "schemaEncoding" in channelOrService ? channelOrService.schemaEncoding : void 0;
+  const schema = "schema" in channelOrService ? channelOrService.schema : channelOrService.responseSchema;
+  return __privateGet(this, _messageReaders).get(name) ?? (() => {
+    const reader = new rosmsg2Serialization.MessageReader(
+      schemaEncoding === "ros2idl" ? rosmsg.parseRos2idl(schema) : rosmsg.parse(schema, { ros2: true })
+    );
+    __privateGet(this, _messageReaders).set(name, reader);
+    return reader;
+  })();
+};
+getMessageWriter_fn = function(channelOrService) {
+  const name = "schemaName" in channelOrService ? channelOrService.schemaName : channelOrService.type;
+  const schemaEncoding = "schemaEncoding" in channelOrService ? channelOrService.schemaEncoding : void 0;
+  const schema = "schema" in channelOrService ? channelOrService.schema : channelOrService.requestSchema;
+  return __privateGet(this, _messageWriters).get(name) ?? (() => {
+    const writer = new rosmsg2Serialization.MessageWriter(
+      schemaEncoding === "ros2idl" ? rosmsg.parseRos2idl(schema) : rosmsg.parse(schema, { ros2: true })
+    );
+    __privateGet(this, _messageWriters).set(name, writer);
+    return writer;
+  })();
+};
+
+// src/components/ROS2Diagnostics/roslib/Ros.ts
+var _rosImpl;
+var Ros = class {
+  constructor(options) {
+    this.options = options;
+    __privateAdd(this, _rosImpl);
+    if (options.url) {
+      this.connect(options.url);
+    }
+  }
+  /** @internal */
+  get rosImpl() {
+    return __privateGet(this, _rosImpl);
+  }
+  on(event, fn) {
+    this.rosImpl?.emitter.on(event, fn);
+    return this;
+  }
+  off(event, fn) {
+    this.rosImpl?.emitter.off(event, fn);
+    return this;
+  }
+  connect(url) {
+    __privateSet(this, _rosImpl, new Impl(url));
+  }
+  close() {
+    this.rosImpl?.close();
+    __privateSet(this, _rosImpl, void 0);
+  }
+  getTopics(callback, failedCallback) {
+    const topics = this.rosImpl?.getTopics();
+    if (topics) {
+      callback(topics);
+    } else if (failedCallback) {
+      failedCallback("Error: getTopics");
+    }
+  }
+  getServices(callback, failedCallback) {
+    this.rosImpl?.getServices().then(callback).catch(failedCallback);
+  }
+  getTopicType(topic, callback, failedCallback) {
+    const topicType = this.rosImpl?.getTopicType(topic);
+    if (topicType) {
+      callback(topicType);
+    } else if (failedCallback) {
+      failedCallback("Error: getTopicType");
+    }
+  }
+  getServiceType(service, callback, failedCallback) {
+    const serviceType = this.rosImpl?.getServiceType(service);
+    if (serviceType) {
+      callback(serviceType);
+    } else if (failedCallback) {
+      failedCallback("Error: getServiceType");
+    }
+  }
+};
+_rosImpl = new WeakMap();
+
+// src/components/ROS2Diagnostics/roslib/Topic.ts
+var _ros, _name, _messageType, _publisher, _subscriptions;
+var Topic = class {
+  constructor(options) {
+    this.options = options;
+    __privateAdd(this, _ros);
+    __privateAdd(this, _name);
+    __privateAdd(this, _messageType);
+    __privateAdd(this, _publisher);
+    __privateAdd(this, _subscriptions, /* @__PURE__ */ new Map());
+    __privateSet(this, _ros, options.ros);
+    __privateSet(this, _name, options.name);
+    __privateSet(this, _messageType, options.messageType);
+  }
+  get name() {
+    return __privateGet(this, _name);
+  }
+  get messageType() {
+    return __privateGet(this, _messageType);
+  }
+  publish(message) {
+    if (!__privateGet(this, _publisher)) {
+      this.advertise();
+    }
+    __privateGet(this, _publisher)?.then((publisher) => {
+      publisher.publish(message);
+    });
+  }
+  subscribe(callback) {
+    __privateGet(this, _ros).rosImpl?.createSubscription(this.name, callback).then((subscription) => {
+      __privateGet(this, _subscriptions).set(callback, subscription);
+    });
+  }
+  unsubscribe(callback) {
+    if (callback) {
+      __privateGet(this, _subscriptions).get(callback)?.unsubscribe();
+      __privateGet(this, _subscriptions).delete(callback);
+    } else {
+      for (const subscription of __privateGet(this, _subscriptions).values()) {
+        subscription.unsubscribe();
+      }
+      __privateGet(this, _subscriptions).clear();
+    }
+  }
+  advertise() {
+    __privateSet(this, _publisher, __privateGet(this, _ros).rosImpl?.createPublisher(
+      this.name,
+      this.messageType
+    ));
+  }
+  unadvertise() {
+    __privateGet(this, _publisher)?.then((publisher) => {
+      publisher.unadvertise();
+      __privateSet(this, _publisher, void 0);
+    });
+  }
+};
+_ros = new WeakMap();
+_name = new WeakMap();
+_messageType = new WeakMap();
+_publisher = new WeakMap();
+_subscriptions = new WeakMap();
+var calculateOverallLevel = (diagnostics) => {
+  let maxLevel = 0;
+  const checkEntry = (entry) => {
+    if (entry.severity_level > maxLevel) {
+      maxLevel = entry.severity_level;
+    }
+    entry.children.forEach(checkEntry);
+  };
+  diagnostics.forEach(checkEntry);
+  return maxLevel;
+};
+var buildDiagnosticsTree = (diagnostics) => {
+  const root = [];
+  diagnostics.forEach(({ name, message, level, hardware_id, values }) => {
+    const parts = name.split("/");
+    let currentLevel = root;
+    parts.forEach((part, index) => {
+      if (!part) return;
+      let existingEntry = currentLevel.find((entry) => entry.name === part);
+      if (!existingEntry) {
+        const [baseName, suffix] = part.split(":");
+        const path = parts.slice(0, index + 1).join("/").split(":")[0];
+        existingEntry = {
+          name: index === parts.length - 1 && suffix ? suffix : baseName,
+          path,
+          rawName: path,
+          message: "",
+          severity_level: -1,
+          hardware_id: null,
+          values: null,
+          children: [],
+          icon: null
+          // Initialize icon as null
+        };
+        currentLevel.push(existingEntry);
+      }
+      if (index === parts.length - 1) {
+        existingEntry.message = message || "";
+        existingEntry.severity_level = level ?? -1;
+        existingEntry.hardware_id = hardware_id || null;
+        existingEntry.rawName = name;
+        existingEntry.values = Array.isArray(values) ? values.reduce((acc, { key, value }) => {
+          acc[key] = value;
+          return acc;
+        }, {}) : values && typeof values === "object" ? Object.fromEntries(
+          Object.entries(values).map(([key, value]) => [key, value])
+        ) : {};
+        existingEntry.icon = level === 3 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "w-4 h-4 text-blue-500" }) : level === 2 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 text-red-500" }) : level === 1 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-4 h-4 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4 text-green-500" });
+      }
+      currentLevel = existingEntry.children;
+    });
+  });
+  return root;
+};
+var RosConnectionManager = ({
+  namespace,
+  url,
+  onDiagnosticsUpdate,
+  onConnectionStatusChange,
+  onClearHistory
+}) => {
+  const staleTimeoutId = React9.useRef(0);
+  const retryTimeoutId = React9.useRef(0);
+  React9.useEffect(() => {
+    if (!url) {
+      console.warn("WebSocket URL is not set correctly. Skipping WebSocket configuration.");
+      return;
+    }
+    console.log(`Creating new connection to ${url} for namespace ${namespace}`);
+    const ros = new Ros({ url });
+    const diagnosticsTopic = new Topic({
+      ros,
+      name: `${namespace}/diagnostics_agg`,
+      messageType: "diagnostic_msgs/DiagnosticArray"
+    });
+    const retryDelay = 3e3;
+    const timeoutDuration = 5e3;
+    let retryConnection = true;
+    const connectToWebSocket = () => {
+      clearTimeout(staleTimeoutId.current);
+      clearTimeout(retryTimeoutId.current);
+      ros.connect(url);
+      ros.on("connection", () => {
+        onClearHistory();
+        console.log("Connected to Foxglove bridge at " + url);
+        onConnectionStatusChange(true);
+        diagnosticsTopic.subscribe((message) => {
+          clearTimeout(staleTimeoutId.current);
+          if (Array.isArray(message.status)) {
+            const diagnosticsTree = buildDiagnosticsTree(
+              message.status.map(({ name, message: msg, level, hardware_id, values }) => ({
+                name,
+                message: msg,
+                level: level !== void 0 ? level : -1,
+                hardware_id,
+                values
+              }))
+            );
+            const overallLevel = calculateOverallLevel(diagnosticsTree);
+            let timestamp = Date.now();
+            if (message.header && message.header.stamp) {
+              const sec = message.header.stamp.sec || 0;
+              const nanosec = message.header.stamp.nanosec || 0;
+              timestamp = sec * 1e3 + Math.round(nanosec / 1e6);
+            } else {
+              console.log("No header.stamp found in message, using current time");
+            }
+            const diagStatus = {
+              timestamp,
+              level: overallLevel,
+              diagnostics: diagnosticsTree
+            };
+            onDiagnosticsUpdate(diagStatus);
+          } else {
+            console.warn("Unexpected diagnostics data format:", message);
+          }
+          staleTimeoutId.current = setTimeout(() => {
+            console.warn("No diagnostics message received for 5 seconds. Clearing stale diagnostics.");
+            onClearHistory();
+          }, timeoutDuration);
+        });
+        console.log(`Subscribed to topic: ${diagnosticsTopic.name}`);
+      });
+      ros.on("error", (error) => {
+        console.error("Error connecting to Foxglove bridge:", error);
+        ros.close();
+      });
+      ros.on("close", () => {
+        onConnectionStatusChange(false);
+        console.log("Connection to Foxglove bridge closed");
+        onClearHistory();
+        clearTimeout(staleTimeoutId.current);
+        clearTimeout(retryTimeoutId.current);
+        if (retryConnection) {
+          console.log("Retrying WebSocket connection...");
+          retryTimeoutId.current = setTimeout(connectToWebSocket, retryDelay);
+        }
+      });
+    };
+    connectToWebSocket();
+    return () => {
+      console.log(`Cleaning up connection for namespace ${namespace}`);
+      diagnosticsTopic.unsubscribe();
+      retryConnection = false;
+      clearTimeout(staleTimeoutId.current);
+      clearTimeout(retryTimeoutId.current);
+      ros.close();
+    };
+  }, [namespace, url, onDiagnosticsUpdate, onConnectionStatusChange, onClearHistory]);
+  return null;
+};
+
+// src/components/ROS2Diagnostics/utils/namespaceUtils.ts
+var sanitizeNamespace = (namespace) => {
+  let sanitizedNamespace = namespace.replace(/[^a-zA-Z0-9_/]/g, "").replace(/_+/g, "_").replace(/\/+/g, "/").replace(/^\d+/, "").replace(/\/\d+/g, "/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "");
+  if (sanitizedNamespace) {
+    sanitizedNamespace = "/" + sanitizedNamespace;
+  }
+  return sanitizedNamespace;
+};
+var sameNamespace = (ns1, ns2) => {
+  if (ns1.replace(/^\/|\/$/g, "") !== ns2.replace(/^\/|\/$/g, "")) {
+    return false;
+  }
+  return true;
+};
+
+// src/components/ROS2Diagnostics/hooks/useNamespace.ts
+var NAMESPACE_STORAGE_KEY = "ros2_diag_namespace";
+var useNamespace = (initialNamespace = "/robot") => {
+  const [namespace, setNamespace] = React9.useState("");
+  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React9.useState(null);
+  const [manualEntryRequired, setManualEntryRequired] = React9.useState(false);
+  const setManualNamespace = React9.useCallback((ns) => {
+    const ns_temp = sanitizeNamespace(ns);
+    setNamespace(ns_temp);
+    localStorage.setItem(NAMESPACE_STORAGE_KEY, ns_temp);
+  }, []);
+  React9.useEffect(() => {
+    const savedNamespace = localStorage.getItem(NAMESPACE_STORAGE_KEY);
+    if (savedNamespace) {
+      console.log("Using namespace from storage:", savedNamespace);
+      setNamespace(savedNamespace);
+      return;
+    }
+    if (initialNamespace) {
+      const sanitized = sanitizeNamespace(initialNamespace);
+      if (!sameNamespace(initialNamespace, sanitized)) {
+        const message = `Invalid namespace: "${initialNamespace}", using: "${sanitized}"`;
+        console.warn(message);
+        setInvalidNamespaceMessage(message);
+      } else {
+        setInvalidNamespaceMessage(null);
+      }
+      setNamespace(sanitized);
+    } else {
+      setManualEntryRequired(true);
+    }
+  }, [initialNamespace]);
+  return { namespace, setManualNamespace, invalidNamespaceMessage, manualEntryRequired };
+};
+var useWebSocketUrl = (customUrl) => {
+  const [url, setUrl] = React9.useState(customUrl || null);
+  React9.useEffect(() => {
+    if (customUrl) {
+      setUrl(customUrl);
+      return;
+    }
+    try {
+      const host = window.location.hostname;
+      if (host) {
+        setUrl(`ws://${host}:8765`);
+      } else {
+        console.warn("Unable to determine the host IP address.");
+        setUrl(`ws://localhost:8765`);
+      }
+    } catch (error) {
+      console.error("Failed to determine WebSocket URL:", error);
+      setUrl(`ws://localhost:8765`);
+    }
+  }, [customUrl]);
+  return url;
+};
+var DiagnosticsCapture = ({ namespace }) => {
+  const downloadDiagnostics = () => {
+    console.log("Capture diagnostics for namespace:", namespace);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      variant: "subtle",
+      size: "sm",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "w-4 h-4" }),
+      onClick: downloadDiagnostics,
+      children: "Export Diagnostics"
+    }
+  ) });
+};
+var ManualNamespace = ({
+  setManualNamespace,
+  namespace
+}) => {
+  const [value, setValue] = React9.useState(namespace);
+  const [unsaved, setUnsaved] = React9.useState(false);
+  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React9.useState("");
+  const [isError, setIsError] = React9.useState(false);
+  React9.useEffect(() => {
+    const isSame = sameNamespace(namespace, sanitizeNamespace(value));
+    setUnsaved(!isSame);
+  }, [namespace, value]);
+  React9.useEffect(() => {
+    const sanitizedValue = sanitizeNamespace(value);
+    const isSame = sameNamespace(value, sanitizedValue);
+    setIsError(!isSame);
+    setInvalidNamespaceMessage(!isSame ? `Invalid namespace. Legal namespace would be: ${sanitizedValue}` : "");
+  }, [namespace, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "bg-blue-50 border-l-4 border-blue-500", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Namespace Configuration" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormControl,
+        {
+          label: "ROS 2 Namespace",
+          error: isError ? invalidNamespaceMessage : void 0,
+          description: "Enter the namespace for the diagnostics_agg topic",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              value,
+              type: "text",
+              placeholder: "/robot",
+              onChange: (e) => setValue(e.target.value),
+              "aria-label": "Manual Namespace Entry",
+              className: isError ? "border-red-500" : ""
+            }
+          )
+        }
+      ),
+      isError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 mt-3 text-red-700 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 mt-0.5 flex-shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: invalidNamespaceMessage })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          disabled: !unsaved,
+          onClick: () => {
+            const ns = sanitizeNamespace(value);
+            setManualNamespace(ns);
+            setValue(ns);
+          },
+          variant: "solid",
+          theme: "brand",
+          children: unsaved ? "Apply" : "Applied"
+        }
+      ) })
+    ] })
+  ] }) });
+};
+var HISTORY_SIZE = 50;
+var HistorySelection = ({
+  diagHistory,
+  setDiagStatusDisplay,
+  isPaused,
+  setIsPaused
+}) => {
+  const [negIndex, setNegIndex] = React9.useState(-1);
+  React9.useEffect(() => {
+    if (!isPaused) {
+      setNegIndex(-1);
+      if (diagHistory.length > 0) {
+        setDiagStatusDisplay(diagHistory[diagHistory.length - 1]);
+      } else {
+        setDiagStatusDisplay(null);
+      }
+    }
+  }, [diagHistory, setDiagStatusDisplay, isPaused]);
+  const getStatusColor = (level) => {
+    if (level >= 2) return "bg-red-500";
+    if (level === 1) return "bg-yellow-500";
+    return "bg-green-500";
+  };
+  const isSelected = (index) => diagHistory.length + negIndex === index;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Timeline:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex gap-1 overflow-x-auto", children: [
+        Array.from({ length: Math.max(0, HISTORY_SIZE - diagHistory.length) }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-2 h-2 rounded-full bg-gray-300 flex-shrink-0"
+          },
+          `blank-${index}`
+        )),
+        diagHistory.map((diagStatus, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setDiagStatusDisplay(diagStatus);
+              setIsPaused(true);
+              setNegIndex(index - diagHistory.length);
+            },
+            className: `w-2 h-2 rounded-full flex-shrink-0 transition-all ${isSelected(index) ? "w-4 h-4 ring-2 ring-blue-500" : getStatusColor(diagStatus.level)}`,
+            title: new Date(diagStatus.timestamp).toLocaleTimeString(),
+            "aria-label": `Diagnostics snapshot ${index + 1} at ${new Date(diagStatus.timestamp).toLocaleTimeString()}`
+          },
+          `history-${index}`
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs text-gray-600 px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Oldest: ",
+        diagHistory.length > 0 ? new Date(diagHistory[0].timestamp).toLocaleTimeString() : "N/A"
+      ] }),
+      isPaused && diagHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-blue-600", children: [
+        "Selected: ",
+        new Date(diagHistory[diagHistory.length + negIndex].timestamp).toLocaleTimeString()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Latest: ",
+        diagHistory.length > 0 ? new Date(diagHistory[diagHistory.length - 1].timestamp).toLocaleTimeString() : "N/A"
+      ] })
+    ] })
+  ] });
+};
+var HISTORY_SIZE2 = 30;
+var useDiagHistory = (isPaused) => {
+  const [diagHistory, setDiagHistory] = React9.useState([]);
+  const isPausedRef = React9.useRef(isPaused);
+  React9.useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+  const clearDiagHistory = React9.useCallback(() => {
+    setDiagHistory([]);
+  }, []);
+  const updateDiagHistory = React9.useCallback((diagStatusLatest) => {
+    if (!isPausedRef.current && diagStatusLatest && diagStatusLatest.diagnostics.length > 0) {
+      setDiagHistory((prevItems) => {
+        const updatedItems = [...prevItems, diagStatusLatest];
+        if (updatedItems.length > HISTORY_SIZE2) {
+          return updatedItems.slice(-HISTORY_SIZE2);
+        }
+        return updatedItems;
+      });
+    }
+  }, [isPausedRef]);
+  return { diagHistory, updateDiagHistory, clearDiagHistory };
+};
+var ROS2Diagnostics = ({
+  foxgloveUrl,
+  namespace: initialNamespace = "/robot",
+  onDiagnosticUpdate
+}) => {
+  const {
+    namespace,
+    setManualNamespace,
+    invalidNamespaceMessage,
+    manualEntryRequired
+  } = useNamespace(initialNamespace);
+  const wsUrl = useWebSocketUrl(foxgloveUrl);
+  const [diagStatusDisplay, setDiagStatusDisplay] = React9.useState(null);
+  const [bridgeConnected, setBridgeConnected] = React9.useState(false);
+  const [selectedRawName, setSelectedRawName] = React9.useState(null);
+  const [isPaused, setIsPaused] = React9.useState(false);
+  const {
+    diagHistory,
+    updateDiagHistory,
+    clearDiagHistory
+  } = useDiagHistory(isPaused);
+  const diagnostics = diagStatusDisplay?.diagnostics || [];
+  const handleDiagnosticsUpdate = (diagStatus) => {
+    setDiagStatusDisplay(diagStatus);
+    updateDiagHistory(diagStatus);
+    onDiagnosticUpdate?.(diagStatus);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full gap-4 p-4 bg-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "ROS 2 Diagnostics" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: isPaused ? "solid" : "subtle",
+          theme: "brand",
+          size: "sm",
+          onClick: () => {
+            if (isPaused) clearDiagHistory();
+            setIsPaused(!isPaused);
+          },
+          icon: isPaused ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-4 h-4" }),
+          children: isPaused ? "Resume" : "Pause"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HistorySelection,
+      {
+        diagHistory,
+        setDiagStatusDisplay,
+        isPaused,
+        setIsPaused
+      }
+    ),
+    invalidNamespaceMessage && /* @__PURE__ */ jsxRuntime.jsx(Alert, { theme: "danger", title: invalidNamespaceMessage }),
+    manualEntryRequired && /* @__PURE__ */ jsxRuntime.jsx(
+      ManualNamespace,
+      {
+        setManualNamespace,
+        namespace
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DiagnosticsCapture, { namespace }),
+    !invalidNamespaceMessage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        RosConnectionManager,
+        {
+          namespace,
+          url: wsUrl,
+          onDiagnosticsUpdate: handleDiagnosticsUpdate,
+          onConnectionStatusChange: setBridgeConnected,
+          onClearHistory: clearDiagHistory
+        }
+      ),
+      !bridgeConnected && /* @__PURE__ */ jsxRuntime.jsxs(
+        Alert,
+        {
+          theme: "warning",
+          title: "Waiting for connection...",
+          children: [
+            "Attempting to connect to Foxglove bridge at ",
+            wsUrl
+          ]
+        }
+      ),
+      diagnostics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        DiagnosticsTable,
+        {
+          diagnostics,
+          setSelectedRawName,
+          variant: "error"
+        }
+      ),
+      diagnostics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        DiagnosticsTable,
+        {
+          diagnostics,
+          setSelectedRawName,
+          variant: "warning"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DiagnosticsTreeTable,
+        {
+          diagnostics,
+          bridgeConnected,
+          selectedRawName,
+          setSelectedRawName
+        }
+      ),
+      diagnostics.length === 0 && bridgeConnected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-gray-500", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2", children: "Waiting for diagnostic data..." })
+      ] })
+    ] })
+  ] });
+};
 function useDisclosure(initial = false) {
   const [isOpen, setIsOpen] = React9.useState(initial);
   const open = React9.useCallback(() => setIsOpen(true), []);
@@ -1760,17 +3187,23 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.CodeBlock = CodeBlock;
 exports.ConnectionIcon = ConnectionIcon;
 exports.ConnectionIndicator = ConnectionIndicator;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Dropdown = Dropdown;
+exports.EmptyState = EmptyState;
 exports.FileUploader = FileUploader;
 exports.FormControl = FormControl;
 exports.Input = Input;
+exports.Kbd = Kbd;
 exports.Link = Link;
 exports.MultiSelect = MultiSelect;
+exports.NumberInput = NumberInput;
+exports.Pagination = Pagination;
 exports.Progress = Progress;
+exports.ROS2Diagnostics = ROS2Diagnostics;
 exports.Rating = Rating;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
@@ -1778,9 +3211,11 @@ exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.StatusBadge = StatusBadge;
 exports.Switch = Switch;
+exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.TimePicker = TimePicker;
+exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;