@bopen-io/clawnet-plugin 0.0.1

package/dist/ui/index.js

@@ -0,0 +1,1373 @@
+// src/ui/index.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import {
+  usePluginAction as usePluginAction2,
+  usePluginData as usePluginData2,
+  usePluginStream,
+  usePluginToast as usePluginToast2
+} from "@paperclipai/plugin-sdk/ui";
+
+// src/ui/settings.tsx
+import { useState, useEffect } from "react";
+import {
+  usePluginData,
+  usePluginAction,
+  usePluginToast
+} from "@paperclipai/plugin-sdk/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLUGIN_ID = "bopen-io.clawnet-plugin";
+var DEFAULT_CONFIG = {
+  clawnetApiUrl: "https://clawnet.sh",
+  clawnetApiKey: "",
+  syncIntervalMinutes: 15
+};
+var layoutStack = {
+  display: "grid",
+  gap: "12px"
+};
+var cardStyle = {
+  border: "1px solid var(--border)",
+  borderRadius: "12px",
+  padding: "14px",
+  background: "var(--card, transparent)"
+};
+var rowStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "8px"
+};
+var buttonStyle = {
+  appearance: "none",
+  border: "1px solid var(--border)",
+  borderRadius: "999px",
+  background: "transparent",
+  color: "inherit",
+  padding: "6px 12px",
+  fontSize: "12px",
+  cursor: "pointer"
+};
+var primaryButtonStyle = {
+  ...buttonStyle,
+  background: "var(--foreground)",
+  color: "var(--background)",
+  borderColor: "var(--foreground)"
+};
+var inputStyle = {
+  width: "100%",
+  border: "1px solid var(--border)",
+  borderRadius: "8px",
+  padding: "8px 10px",
+  background: "transparent",
+  color: "inherit",
+  fontSize: "12px",
+  boxSizing: "border-box"
+};
+var labelStyle = {
+  display: "grid",
+  gap: "6px"
+};
+var labelTextStyle = {
+  fontSize: "12px",
+  fontWeight: 500
+};
+var helpTextStyle = {
+  fontSize: "11px",
+  opacity: 0.65,
+  lineHeight: 1.45
+};
+var sectionHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "8px",
+  marginBottom: "10px"
+};
+var statusDotStyle = (color) => ({
+  display: "inline-block",
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: color,
+  flexShrink: 0
+});
+function hostFetchJson(path, init) {
+  return fetch(path, {
+    credentials: "include",
+    headers: {
+      "content-type": "application/json",
+      ...init?.headers ?? {}
+    },
+    ...init
+  }).then(async (response) => {
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(text || `Request failed: ${response.status}`);
+    }
+    return await response.json();
+  });
+}
+function useSettingsConfig() {
+  const [config, setConfig] = useState({ ...DEFAULT_CONFIG });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    hostFetchJson(
+      `/api/plugins/${PLUGIN_ID}/config`
+    ).then((result) => {
+      if (cancelled) return;
+      const raw = result?.configJson ?? {};
+      setConfig({
+        clawnetApiUrl: typeof raw.clawnetApiUrl === "string" ? raw.clawnetApiUrl : DEFAULT_CONFIG.clawnetApiUrl,
+        clawnetApiKey: typeof raw.clawnetApiKey === "string" ? raw.clawnetApiKey : DEFAULT_CONFIG.clawnetApiKey,
+        syncIntervalMinutes: typeof raw.syncIntervalMinutes === "number" && Number.isFinite(raw.syncIntervalMinutes) ? raw.syncIntervalMinutes : DEFAULT_CONFIG.syncIntervalMinutes
+      });
+      setError(null);
+    }).catch((nextError) => {
+      if (cancelled) return;
+      setError(
+        nextError instanceof Error ? nextError.message : String(nextError)
+      );
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  async function save(nextConfig) {
+    setSaving(true);
+    try {
+      await hostFetchJson(`/api/plugins/${PLUGIN_ID}/config`, {
+        method: "POST",
+        body: JSON.stringify({ configJson: nextConfig })
+      });
+      setConfig(nextConfig);
+      setError(null);
+    } catch (nextError) {
+      setError(
+        nextError instanceof Error ? nextError.message : String(nextError)
+      );
+      throw nextError;
+    } finally {
+      setSaving(false);
+    }
+  }
+  return { config, setConfig, loading, saving, error, save };
+}
+function ClawNetSettingsPage({ context }) {
+  const { config, setConfig, loading, saving, error, save } = useSettingsConfig();
+  const toast = usePluginToast();
+  const syncStatus = usePluginData("sync-status", {
+    companyId: context.companyId
+  });
+  const validateConfig = usePluginAction("validate-config");
+  const triggerSync = usePluginAction("trigger-sync");
+  const [testing, setTesting] = useState(false);
+  const [syncing, setSyncing] = useState(false);
+  function setField(key, value) {
+    setConfig((current) => ({ ...current, [key]: value }));
+  }
+  async function onSubmit(event) {
+    event.preventDefault();
+    try {
+      await save(config);
+      toast({ title: "Settings saved", tone: "success" });
+    } catch {
+      toast({
+        title: "Failed to save settings",
+        body: error ?? "Unknown error",
+        tone: "error"
+      });
+    }
+  }
+  async function handleTestConnection() {
+    setTesting(true);
+    try {
+      const result = await validateConfig({
+        clawnetApiUrl: config.clawnetApiUrl,
+        clawnetApiKey: config.clawnetApiKey
+      });
+      if (result.ok) {
+        toast({ title: "Connection successful", tone: "success" });
+      } else {
+        toast({
+          title: "Connection failed",
+          body: result.message ?? "ClawNet API did not respond",
+          tone: "error"
+        });
+      }
+    } catch (err) {
+      toast({
+        title: "Connection test failed",
+        body: err instanceof Error ? err.message : String(err),
+        tone: "error"
+      });
+    } finally {
+      setTesting(false);
+    }
+  }
+  async function handleManualSync() {
+    setSyncing(true);
+    try {
+      await triggerSync({ companyId: context.companyId });
+      toast({ title: "Sync started", tone: "info" });
+      setTimeout(() => syncStatus.refresh(), 2e3);
+    } catch (err) {
+      toast({
+        title: "Sync failed",
+        body: err instanceof Error ? err.message : String(err),
+        tone: "error"
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", opacity: 0.7 }, children: "Loading ClawNet configuration..." });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "18px" }, children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit, style: layoutStack, children: [
+      /* @__PURE__ */ jsxs("section", { style: cardStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: sectionHeaderStyle, children: /* @__PURE__ */ jsx("strong", { children: "ClawNet Connection" }) }),
+        /* @__PURE__ */ jsxs("div", { style: layoutStack, children: [
+          /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsx("span", { style: labelTextStyle, children: "ClawNet API URL" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: inputStyle,
+                type: "url",
+                value: config.clawnetApiUrl,
+                onChange: (e) => setField("clawnetApiUrl", e.target.value),
+                placeholder: "https://clawnet.sh"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: helpTextStyle, children: "The base URL for the ClawNet registry API." })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsx("span", { style: labelTextStyle, children: "ClawNet API Key (secret ref)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: inputStyle,
+                type: "text",
+                value: config.clawnetApiKey,
+                onChange: (e) => setField("clawnetApiKey", e.target.value),
+                placeholder: "e.g. clawnet-api-key"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: helpTextStyle, children: "This is a reference name for a Paperclip secret, not the API key itself. Create the secret in Paperclip Settings and enter its reference name here. The worker resolves the actual value at runtime via ctx.secrets.resolve()." })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsx("span", { style: labelTextStyle, children: "Sync Interval (minutes)" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: { ...inputStyle, maxWidth: "120px" },
+                type: "number",
+                min: 1,
+                max: 1440,
+                value: config.syncIntervalMinutes,
+                onChange: (e) => {
+                  const val = Number.parseInt(e.target.value, 10);
+                  if (Number.isFinite(val) && val > 0) {
+                    setField("syncIntervalMinutes", val);
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: helpTextStyle, children: "How often to sync agents and skills from the ClawNet registry. Default: 15 minutes." })
+          ] })
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            color: "var(--destructive, #c00)",
+            fontSize: "12px"
+          },
+          children: error
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx("button", { type: "submit", style: primaryButtonStyle, disabled: saving, children: saving ? "Saving..." : "Save settings" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: buttonStyle,
+            disabled: testing || !config.clawnetApiUrl,
+            onClick: handleTestConnection,
+            children: testing ? "Testing..." : "Test connection"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { style: cardStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionHeaderStyle, children: [
+        /* @__PURE__ */ jsx("strong", { children: "Sync Status" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: buttonStyle,
+            disabled: syncing,
+            onClick: handleManualSync,
+            children: syncing ? "Syncing..." : "Sync now"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        SyncStatusDisplay,
+        {
+          data: syncStatus.data,
+          loading: syncStatus.loading,
+          error: syncStatus.error?.message ?? null
+        }
+      )
+    ] })
+  ] });
+}
+function SyncStatusDisplay({
+  data,
+  loading,
+  error
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", opacity: 0.7 }, children: "Loading sync status..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--destructive, #c00)" }, children: [
+      "Failed to load sync status: ",
+      error
+    ] });
+  }
+  if (!data) {
+    return /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", opacity: 0.7 }, children: "No sync data available. Run a sync to populate." });
+  }
+  const statusColor = data.status === "idle" ? "#16a34a" : data.status === "syncing" ? "#2563eb" : "#dc2626";
+  const statusLabel = data.status === "idle" ? "Idle" : data.status === "syncing" ? "Syncing..." : "Error";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "10px", fontSize: "12px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: statusDotStyle(statusColor) }),
+      /* @__PURE__ */ jsx("span", { children: statusLabel })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+          gap: "10px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(StatBlock, { label: "Last sync", value: formatTimestamp(data.lastSyncAt) }),
+          /* @__PURE__ */ jsx(StatBlock, { label: "Agents", value: String(data.agentCount) }),
+          /* @__PURE__ */ jsx(StatBlock, { label: "Skills", value: String(data.skillCount) })
+        ]
+      }
+    ),
+    data.error ? /* @__PURE__ */ jsxs("div", { style: { color: "var(--destructive, #c00)" }, children: [
+      "Last error: ",
+      data.error
+    ] }) : null
+  ] });
+}
+function StatBlock({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "2px" }, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontSize: "11px",
+          opacity: 0.65,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: value })
+  ] });
+}
+function formatTimestamp(iso) {
+  if (!iso) return "Never";
+  try {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return "Invalid date";
+    return date.toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+
+// src/ui/index.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_ROUTE = "clawnet";
+var layoutStack2 = {
+  display: "grid",
+  gap: "12px"
+};
+var cardStyle2 = {
+  border: "1px solid var(--border)",
+  borderRadius: "12px",
+  padding: "14px",
+  background: "var(--card, transparent)"
+};
+var subtleCardStyle = {
+  border: "1px solid color-mix(in srgb, var(--border) 75%, transparent)",
+  borderRadius: "10px",
+  padding: "12px"
+};
+var rowStyle2 = {
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "8px"
+};
+var buttonStyle2 = {
+  appearance: "none",
+  border: "1px solid var(--border)",
+  borderRadius: "999px",
+  background: "transparent",
+  color: "inherit",
+  padding: "6px 12px",
+  fontSize: "12px",
+  cursor: "pointer"
+};
+var primaryButtonStyle2 = {
+  ...buttonStyle2,
+  background: "var(--foreground)",
+  color: "var(--background)",
+  borderColor: "var(--foreground)"
+};
+var inputStyle2 = {
+  width: "100%",
+  border: "1px solid var(--border)",
+  borderRadius: "8px",
+  padding: "8px 10px",
+  background: "transparent",
+  color: "inherit",
+  fontSize: "12px"
+};
+var mutedTextStyle = {
+  fontSize: "12px",
+  opacity: 0.72,
+  lineHeight: 1.45
+};
+var eyebrowStyle = {
+  fontSize: "11px",
+  opacity: 0.65,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em"
+};
+var sectionHeaderStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "8px",
+  marginBottom: "10px"
+};
+var statValueStyle = {
+  fontSize: "24px",
+  fontWeight: 700,
+  lineHeight: 1
+};
+var statLabelStyle = {
+  fontSize: "11px",
+  opacity: 0.6,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em",
+  marginTop: "4px"
+};
+function hostPath(companyPrefix, suffix) {
+  return companyPrefix ? `/${companyPrefix}${suffix}` : suffix;
+}
+function pluginPagePath(companyPrefix) {
+  return hostPath(companyPrefix, `/${PAGE_ROUTE}`);
+}
+function relativeTime(isoString) {
+  if (!isoString) return "never";
+  const then = new Date(isoString).getTime();
+  if (Number.isNaN(then)) return "unknown";
+  const diffMs = Date.now() - then;
+  if (diffMs < 0) return "just now";
+  const seconds = Math.floor(diffMs / 1e3);
+  if (seconds < 60) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+function truncateText(text, maxLen) {
+  if (text.length <= maxLen) return text;
+  return `${text.slice(0, maxLen - 1)}...`;
+}
+function Pill({ label, color }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        borderRadius: "999px",
+        border: "1px solid var(--border)",
+        padding: "2px 8px",
+        fontSize: "11px",
+        background: color ? `color-mix(in srgb, ${color} 14%, transparent)` : void 0,
+        borderColor: color ? `color-mix(in srgb, ${color} 40%, var(--border))` : void 0
+      },
+      children: label
+    }
+  );
+}
+function StatusDot({ status }) {
+  const colorMap = {
+    online: "#16a34a",
+    idle: "#d97706",
+    offline: "#6b7280",
+    error: "#dc2626",
+    running: "#2563eb"
+  };
+  const dotColor = colorMap[status.toLowerCase()] ?? "#6b7280";
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        background: dotColor,
+        flexShrink: 0
+      },
+      "aria-label": status
+    }
+  );
+}
+function StarCount({ count }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsxs2("span", { style: { display: "inline-flex", alignItems: "center", gap: "3px", fontSize: "11px", opacity: 0.7 }, children: [
+    /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }),
+    count
+  ] });
+}
+function TrustBadge({ score }) {
+  if (score === null || score === void 0) return null;
+  const level = score >= 80 ? "high" : score >= 50 ? "medium" : "low";
+  const colorMap = { high: "#16a34a", medium: "#d97706", low: "#dc2626" };
+  const labelMap = { high: "Trusted", medium: "Verified", low: "Unverified" };
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        fontSize: "10px",
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: colorMap[level]
+      },
+      children: [
+        /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" }) }),
+        labelMap[level]
+      ]
+    }
+  );
+}
+function EmptyState({ message }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        padding: "32px 16px",
+        textAlign: "center",
+        fontSize: "13px",
+        opacity: 0.55
+      },
+      children: message
+    }
+  );
+}
+function LoadingIndicator({ message }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        padding: "24px 16px",
+        textAlign: "center",
+        fontSize: "12px",
+        opacity: 0.6
+      },
+      children: message ?? "Loading..."
+    }
+  );
+}
+function ErrorBanner({ message }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        ...subtleCardStyle,
+        borderColor: "color-mix(in srgb, #dc2626 45%, var(--border))",
+        fontSize: "12px",
+        color: "var(--destructive, #dc2626)"
+      },
+      children: message
+    }
+  );
+}
+function Section({
+  title,
+  action,
+  children
+}) {
+  return /* @__PURE__ */ jsxs2("section", { style: cardStyle2, children: [
+    /* @__PURE__ */ jsxs2("div", { style: sectionHeaderStyle2, children: [
+      /* @__PURE__ */ jsx2("strong", { children: title }),
+      action
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: layoutStack2, children })
+  ] });
+}
+function ClawNetFleetWidget({ context }) {
+  const companyId = context.companyId;
+  const toast = usePluginToast2();
+  const syncParams = useMemo(
+    () => companyId ? { companyId } : {},
+    [companyId]
+  );
+  const { data: syncStatus, loading, error, refresh } = usePluginData2(
+    "sync-status",
+    syncParams
+  );
+  const fleetStream = usePluginStream("fleet-status", {
+    companyId: companyId ?? void 0
+  });
+  const triggerSync = usePluginAction2("trigger-sync");
+  const [syncing, setSyncing] = useState2(false);
+  async function handleSync() {
+    if (!companyId || syncing) return;
+    setSyncing(true);
+    try {
+      await triggerSync({ companyId });
+      refresh();
+      toast({
+        title: "ClawNet sync started",
+        body: "Agents and skills are being refreshed from the registry.",
+        tone: "success"
+      });
+    } catch (err) {
+      toast({
+        title: "Sync failed",
+        body: err instanceof Error ? err.message : String(err),
+        tone: "error"
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }
+  const onlineCount = useMemo(() => {
+    const latestByAgent = /* @__PURE__ */ new Map();
+    for (const event of fleetStream.events) {
+      latestByAgent.set(event.agentId, event.status);
+    }
+    let count = 0;
+    for (const status of latestByAgent.values()) {
+      if (status === "online" || status === "running") count++;
+    }
+    return count;
+  }, [fleetStream.events]);
+  if (loading) return /* @__PURE__ */ jsx2(LoadingIndicator, { message: "Loading fleet status..." });
+  if (error) return /* @__PURE__ */ jsx2(ErrorBanner, { message: error.message });
+  return /* @__PURE__ */ jsxs2("div", { style: layoutStack2, children: [
+    /* @__PURE__ */ jsxs2("div", { style: rowStyle2, children: [
+      /* @__PURE__ */ jsx2("strong", { children: "ClawNet Fleet" }),
+      fleetStream.connected ? /* @__PURE__ */ jsx2(StatusDot, { status: "online" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr 1fr",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("div", { style: statValueStyle, children: syncStatus?.agentCount ?? 0 }),
+            /* @__PURE__ */ jsx2("div", { style: statLabelStyle, children: "Agents" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("div", { style: statValueStyle, children: syncStatus?.skillCount ?? 0 }),
+            /* @__PURE__ */ jsx2("div", { style: statLabelStyle, children: "Skills" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("div", { style: statValueStyle, children: onlineCount }),
+            /* @__PURE__ */ jsx2("div", { style: statLabelStyle, children: "Online" })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { style: { ...mutedTextStyle, fontSize: "11px" }, children: [
+      "Last sync: ",
+      relativeTime(syncStatus?.lastSyncAt ?? null)
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: rowStyle2, children: [
+      /* @__PURE__ */ jsx2(
+        "a",
+        {
+          href: pluginPagePath(context.companyPrefix),
+          style: { fontSize: "12px", color: "inherit" },
+          children: "Browse marketplace"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          style: buttonStyle2,
+          onClick: () => void handleSync(),
+          disabled: syncing,
+          children: syncing ? "Syncing..." : "Sync Now"
+        }
+      )
+    ] })
+  ] });
+}
+var AGENTS_PER_PAGE = 20;
+function TabBar({
+  active,
+  onChange
+}) {
+  const tabs = [
+    { key: "agents", label: "Agents" },
+    { key: "skills", label: "Skills" }
+  ];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "0",
+        borderBottom: "1px solid var(--border)"
+      },
+      children: tabs.map((tab) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(tab.key),
+          style: {
+            appearance: "none",
+            background: "transparent",
+            border: "none",
+            borderBottom: active === tab.key ? "2px solid var(--foreground)" : "2px solid transparent",
+            color: active === tab.key ? "var(--foreground)" : "var(--muted-foreground, inherit)",
+            padding: "10px 16px",
+            fontSize: "13px",
+            fontWeight: active === tab.key ? 600 : 400,
+            cursor: "pointer",
+            transition: "color 0.15s, border-color 0.15s"
+          },
+          children: tab.label
+        },
+        tab.key
+      ))
+    }
+  );
+}
+function SearchBar({
+  value,
+  onChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs2(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          left: "10px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          opacity: 0.45
+        },
+        children: [
+          /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx2("path", { d: "M21 21l-4.35-4.35" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        style: {
+          ...inputStyle2,
+          paddingLeft: "30px"
+        }
+      }
+    )
+  ] });
+}
+function AgentCard({
+  agent,
+  onSelect,
+  onHire
+}) {
+  const colorIndicator = agent.color ?? "var(--muted-foreground)";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        ...subtleCardStyle,
+        display: "grid",
+        gap: "10px",
+        cursor: "pointer",
+        transition: "border-color 0.15s"
+      },
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect();
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "10px"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: "10px",
+                    height: "10px",
+                    borderRadius: "3px",
+                    background: colorIndicator,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: agent.displayName
+                  }
+                ),
+                /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", opacity: 0.55 }, children: agent.slug })
+              ] }),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(StarCount, { count: agent.starCount }),
+                    /* @__PURE__ */ jsx2(TrustBadge, { score: agent.trustScore })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        agent.description ? /* @__PURE__ */ jsx2("div", { style: mutedTextStyle, children: truncateText(agent.description, 120) }) : null,
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: [
+                agent.model ? /* @__PURE__ */ jsx2(Pill, { label: agent.model }) : null,
+                agent.attestations.slice(0, 2).map((att) => /* @__PURE__ */ jsx2(Pill, { label: att, color: "#2563eb" }, att)),
+                agent.skills.length > 0 ? /* @__PURE__ */ jsx2(
+                  Pill,
+                  {
+                    label: `${agent.skills.length} skill${agent.skills.length === 1 ? "" : "s"}`
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  style: primaryButtonStyle2,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onHire();
+                  },
+                  children: "Hire Agent"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentDetail({
+  agent,
+  onBack,
+  onHire
+}) {
+  return /* @__PURE__ */ jsxs2("div", { style: layoutStack2, children: [
+    /* @__PURE__ */ jsxs2("div", { style: rowStyle2, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", style: buttonStyle2, onClick: onBack, children: "Back" }),
+      /* @__PURE__ */ jsx2("strong", { style: { fontSize: "16px" }, children: agent.displayName }),
+      /* @__PURE__ */ jsx2(Pill, { label: agent.slug })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: "12px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { style: subtleCardStyle, children: [
+            /* @__PURE__ */ jsx2("div", { style: eyebrowStyle, children: "Model" }),
+            /* @__PURE__ */ jsx2("div", { style: { fontSize: "13px", marginTop: "4px" }, children: agent.model ?? "Not specified" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: subtleCardStyle, children: [
+            /* @__PURE__ */ jsx2("div", { style: eyebrowStyle, children: "Stars" }),
+            /* @__PURE__ */ jsx2("div", { style: { fontSize: "13px", marginTop: "4px" }, children: agent.starCount })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: subtleCardStyle, children: [
+            /* @__PURE__ */ jsx2("div", { style: eyebrowStyle, children: "Trust Score" }),
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px", marginTop: "4px" }, children: [
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: "13px" }, children: agent.trustScore !== null ? `${agent.trustScore}/100` : "N/A" }),
+              /* @__PURE__ */ jsx2(TrustBadge, { score: agent.trustScore })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: subtleCardStyle, children: [
+            /* @__PURE__ */ jsx2("div", { style: eyebrowStyle, children: "Created" }),
+            /* @__PURE__ */ jsx2("div", { style: { fontSize: "13px", marginTop: "4px" }, children: relativeTime(agent.createdAt) })
+          ] })
+        ]
+      }
+    ),
+    agent.description ? /* @__PURE__ */ jsx2(Section, { title: "Description", children: /* @__PURE__ */ jsx2("div", { style: { fontSize: "13px", lineHeight: 1.55 }, children: agent.description }) }) : null,
+    agent.attestations.length > 0 ? /* @__PURE__ */ jsx2(Section, { title: "Attestations", children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: agent.attestations.map((att) => /* @__PURE__ */ jsx2(Pill, { label: att, color: "#2563eb" }, att)) }) }) : null,
+    agent.skills.length > 0 ? /* @__PURE__ */ jsx2(Section, { title: "Skills", children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: agent.skills.map((skill) => /* @__PURE__ */ jsx2(Pill, { label: skill }, skill)) }) }) : null,
+    agent.color ? /* @__PURE__ */ jsx2(Section, { title: "Theme Color", children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: "20px",
+            height: "20px",
+            borderRadius: "4px",
+            background: agent.color,
+            border: "1px solid var(--border)"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { style: { fontSize: "12px", fontFamily: "monospace" }, children: agent.color })
+    ] }) }) : null,
+    /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("button", { type: "button", style: primaryButtonStyle2, onClick: onHire, children: "Hire This Agent" }) })
+  ] });
+}
+function SkillCard({ skill }) {
+  return /* @__PURE__ */ jsxs2("div", { style: { ...subtleCardStyle, display: "grid", gap: "8px" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 600,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: skill.displayName
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", opacity: 0.55 }, children: skill.slug })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 }, children: [
+        skill.category ? /* @__PURE__ */ jsx2(Pill, { label: skill.category }) : null,
+        /* @__PURE__ */ jsx2(StarCount, { count: skill.starCount })
+      ] })
+    ] }),
+    skill.description ? /* @__PURE__ */ jsx2("div", { style: mutedTextStyle, children: truncateText(skill.description, 140) }) : null
+  ] });
+}
+function SyncProgressBar({
+  companyId
+}) {
+  const syncProgress = usePluginStream("sync-progress", {
+    companyId: companyId ?? void 0
+  });
+  const latest = syncProgress.lastEvent;
+  if (!latest || !syncProgress.connected) return null;
+  const pct = Math.min(100, Math.max(0, latest.progress));
+  return /* @__PURE__ */ jsxs2("div", { style: { ...subtleCardStyle, display: "grid", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx2("span", { style: eyebrowStyle, children: latest.phase }),
+      /* @__PURE__ */ jsxs2("span", { style: { fontSize: "11px", opacity: 0.6 }, children: [
+        pct,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          height: "4px",
+          borderRadius: "2px",
+          background: "color-mix(in srgb, var(--border) 50%, transparent)",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              height: "100%",
+              width: `${pct}%`,
+              borderRadius: "2px",
+              background: "var(--foreground)",
+              transition: "width 0.3s ease"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", opacity: 0.6 }, children: latest.message })
+  ] });
+}
+function ClawNetMarketplacePage({ context }) {
+  const companyId = context.companyId;
+  const toast = usePluginToast2();
+  const [activeTab, setActiveTab] = useState2("agents");
+  const [search, setSearch] = useState2("");
+  const [debouncedSearch, setDebouncedSearch] = useState2("");
+  const [page, setPage] = useState2(1);
+  const [detailView, setDetailView] = useState2(null);
+  useEffect2(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [search]);
+  const agentParams = useMemo(
+    () => companyId ? {
+      companyId,
+      search: debouncedSearch || void 0,
+      page,
+      limit: AGENTS_PER_PAGE
+    } : {},
+    [companyId, debouncedSearch, page]
+  );
+  const {
+    data: agentData,
+    loading: agentsLoading,
+    error: agentsError
+  } = usePluginData2("clawnet-agents", agentParams);
+  const skillParams = useMemo(
+    () => companyId ? { companyId, search: debouncedSearch || void 0 } : {},
+    [companyId, debouncedSearch]
+  );
+  const {
+    data: skillData,
+    loading: skillsLoading,
+    error: skillsError
+  } = usePluginData2("clawnet-skills", skillParams);
+  const syncParams = useMemo(
+    () => companyId ? { companyId } : {},
+    [companyId]
+  );
+  const { data: syncStatus, refresh: refreshSync } = usePluginData2(
+    "sync-status",
+    syncParams
+  );
+  const triggerSync = usePluginAction2("trigger-sync");
+  const [syncing, setSyncing] = useState2(false);
+  async function handleSync() {
+    if (!companyId || syncing) return;
+    setSyncing(true);
+    try {
+      await triggerSync({ companyId });
+      refreshSync();
+      toast({
+        title: "Sync started",
+        body: "Refreshing agent and skill data from ClawNet registry.",
+        tone: "success"
+      });
+    } catch (err) {
+      toast({
+        title: "Sync failed",
+        body: err instanceof Error ? err.message : String(err),
+        tone: "error"
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }
+  function handleHireAgent(agent) {
+    toast({
+      title: `Ready to hire: ${agent.displayName}`,
+      body: "Go to the Agents page and create a new agent. The template data from this ClawNet agent is ready to use.",
+      tone: "info",
+      ttlMs: 8e3,
+      action: {
+        label: "Go to Agents",
+        href: hostPath(context.companyPrefix, "/agents")
+      }
+    });
+  }
+  if (detailView) {
+    return /* @__PURE__ */ jsx2("div", { style: { ...layoutStack2, maxWidth: "800px" }, children: /* @__PURE__ */ jsx2(
+      AgentDetail,
+      {
+        agent: detailView.agent,
+        onBack: () => setDetailView(null),
+        onHire: () => handleHireAgent(detailView.agent)
+      }
+    ) });
+  }
+  if (!companyId) {
+    return /* @__PURE__ */ jsx2("div", { style: layoutStack2, children: /* @__PURE__ */ jsx2(Section, { title: "ClawNet Marketplace", children: /* @__PURE__ */ jsx2(EmptyState, { message: "Select a company to browse the agent marketplace." }) }) });
+  }
+  const agents = agentData?.agents ?? [];
+  const agentTotal = agentData?.total ?? 0;
+  const hasMoreAgents = agents.length < agentTotal && page * AGENTS_PER_PAGE < agentTotal;
+  const skills = skillData?.skills ?? [];
+  const skillTotal = skillData?.total ?? 0;
+  return /* @__PURE__ */ jsxs2("div", { style: layoutStack2, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "12px",
+          flexWrap: "wrap"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("h1", { style: { fontSize: "18px", fontWeight: 700, margin: 0 }, children: "ClawNet Marketplace" }),
+            /* @__PURE__ */ jsx2("div", { style: mutedTextStyle, children: syncStatus ? `${syncStatus.agentCount} agents, ${syncStatus.skillCount} skills available. Last sync: ${relativeTime(syncStatus.lastSyncAt)}` : "Loading registry status..." })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              style: buttonStyle2,
+              onClick: () => void handleSync(),
+              disabled: syncing,
+              children: syncing ? "Syncing..." : "Refresh Registry"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(SyncProgressBar, { companyId }),
+    /* @__PURE__ */ jsx2(
+      SearchBar,
+      {
+        value: search,
+        onChange: setSearch,
+        placeholder: activeTab === "agents" ? "Search agents by name, skill, or model..." : "Search skills by name or category..."
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      TabBar,
+      {
+        active: activeTab,
+        onChange: (tab) => {
+          setActiveTab(tab);
+          setSearch("");
+          setPage(1);
+        }
+      }
+    ),
+    activeTab === "agents" ? /* @__PURE__ */ jsx2("div", { style: layoutStack2, children: agentsLoading && agents.length === 0 ? /* @__PURE__ */ jsx2(LoadingIndicator, { message: "Loading agents from registry..." }) : agentsError ? /* @__PURE__ */ jsx2(ErrorBanner, { message: agentsError.message }) : agents.length === 0 ? /* @__PURE__ */ jsx2(
+      EmptyState,
+      {
+        message: debouncedSearch ? `No agents found matching "${debouncedSearch}".` : "No agents available. Try syncing the registry."
+      }
+    ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { fontSize: "12px", opacity: 0.6 }, children: [
+        "Showing ",
+        agents.length,
+        " of ",
+        agentTotal,
+        " agent",
+        agentTotal === 1 ? "" : "s",
+        debouncedSearch ? ` matching "${debouncedSearch}"` : ""
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { display: "grid", gap: "10px" }, children: agents.map((agent) => /* @__PURE__ */ jsx2(
+        AgentCard,
+        {
+          agent,
+          onSelect: () => setDetailView({ agent }),
+          onHire: () => handleHireAgent(agent)
+        },
+        agent.id
+      )) }),
+      hasMoreAgents ? /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: "center", paddingTop: "8px" }, children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          style: buttonStyle2,
+          onClick: () => setPage((p) => p + 1),
+          disabled: agentsLoading,
+          children: agentsLoading ? "Loading..." : `Load more (${agentTotal - agents.length} remaining)`
+        }
+      ) }) : null
+    ] }) }) : null,
+    activeTab === "skills" ? /* @__PURE__ */ jsx2("div", { style: layoutStack2, children: skillsLoading ? /* @__PURE__ */ jsx2(LoadingIndicator, { message: "Loading skills..." }) : skillsError ? /* @__PURE__ */ jsx2(ErrorBanner, { message: skillsError.message }) : skills.length === 0 ? /* @__PURE__ */ jsx2(
+      EmptyState,
+      {
+        message: debouncedSearch ? `No skills found matching "${debouncedSearch}".` : "No skills available. Try syncing the registry."
+      }
+    ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { fontSize: "12px", opacity: 0.6 }, children: [
+        skillTotal,
+        " skill",
+        skillTotal === 1 ? "" : "s",
+        " available",
+        debouncedSearch ? ` matching "${debouncedSearch}"` : ""
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { display: "grid", gap: "10px" }, children: skills.map((skill) => /* @__PURE__ */ jsx2(SkillCard, { skill }, skill.id)) })
+    ] }) }) : null
+  ] });
+}
+function ClawNetSidebarLink({ context }) {
+  const syncParams = useMemo(
+    () => context.companyId ? { companyId: context.companyId } : {},
+    [context.companyId]
+  );
+  const { data: syncStatus } = usePluginData2("sync-status", syncParams);
+  const href = pluginPagePath(context.companyPrefix);
+  const isActive = typeof window !== "undefined" && window.location.pathname === href;
+  const agentCount = syncStatus?.agentCount ?? 0;
+  return /* @__PURE__ */ jsxs2(
+    "a",
+    {
+      href,
+      "aria-current": isActive ? "page" : void 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: "8px 12px",
+        fontSize: "13px",
+        fontWeight: isActive ? 600 : 400,
+        textDecoration: "none",
+        color: isActive ? "var(--foreground)" : "color-mix(in srgb, var(--foreground) 80%, transparent)",
+        background: isActive ? "color-mix(in srgb, var(--accent, var(--muted)) 60%, transparent)" : "transparent",
+        borderRadius: "6px",
+        transition: "background 0.15s, color 0.15s",
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.9",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            style: { flexShrink: 0 },
+            children: [
+              /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "5", r: "2.5" }),
+              /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "19", r: "2.5" }),
+              /* @__PURE__ */ jsx2("circle", { cx: "19", cy: "19", r: "2.5" }),
+              /* @__PURE__ */ jsx2("path", { d: "M12 7.5v4" }),
+              /* @__PURE__ */ jsx2("path", { d: "M7.5 17.5l3-6" }),
+              /* @__PURE__ */ jsx2("path", { d: "M16.5 17.5l-3-6" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: "ClawNet" }),
+        agentCount > 0 ? /* @__PURE__ */ jsx2(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: "20px",
+              height: "18px",
+              borderRadius: "999px",
+              background: "color-mix(in srgb, var(--foreground) 12%, transparent)",
+              fontSize: "10px",
+              fontWeight: 600,
+              padding: "0 5px",
+              flexShrink: 0
+            },
+            children: agentCount
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  ClawNetFleetWidget,
+  ClawNetMarketplacePage,
+  ClawNetSettingsPage,
+  ClawNetSidebarLink
+};
+//# sourceMappingURL=index.js.map