mywhy-ui 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -2,12 +2,34 @@
 
 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 eventemitter3 = require('eventemitter3');
+var WebSocket = require('isomorphic-ws');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React9__default = /*#__PURE__*/_interopDefault(React9);
+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",
@@ -2138,6 +2160,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 eventemitter3.EventEmitter();
+    __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), []);
@@ -2182,6 +3202,7 @@ exports.MultiSelect = MultiSelect;
 exports.NumberInput = NumberInput;
 exports.Pagination = Pagination;
 exports.Progress = Progress;
+exports.ROS2Diagnostics = ROS2Diagnostics;
 exports.Rating = Rating;
 exports.Select = Select;
 exports.Sidebar = Sidebar;