@flanksource/clicky-ui 0.3.49 → 0.3.50

package/dist/connections/connectionActionTypes.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const string = require("../lib/string.cjs");
+async function postConnection({
+  apiBase,
+  action,
+  value
+}) {
+  const res = await fetch(`${string.stripTrailingSlashes(apiBase)}/connection/${action}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(value)
+  });
+  if (!res.ok) throw new Error(await res.text() || `${res.status} ${res.statusText}`);
+  return res.json();
+}
+function formatDuration(elapsedMs) {
+  if (elapsedMs < 1) return "<1 ms";
+  if (elapsedMs < 1e3) return `${Math.round(elapsedMs)} ms`;
+  return `${(elapsedMs / 1e3).toFixed(elapsedMs < 1e4 ? 1 : 0)} s`;
+}
+exports.formatDuration = formatDuration;
+exports.postConnection = postConnection;
+//# sourceMappingURL=connectionActionTypes.cjs.map

package/dist/connections/connectionActionTypes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActionTypes.cjs","sources":["../../src/connections/connectionActionTypes.ts"],"sourcesContent":["import { stripTrailingSlashes } from \"../lib/string\";\n\n// Shared types and pure helpers for the connection form \"Test\"/\"Resolve\"\n// actions. Kept in a non-component module so the sibling component files can\n// each export exactly one component (react/only-export-components).\n\nexport type ResolvedConnection = {\n  type?: string;\n  namespace?: string;\n  url?: string;\n  username?: string;\n  password?: string;\n  certificate?: string;\n  properties?: Record<string, string>;\n};\n\nexport type TestResult = { ok: boolean; message: string; url?: string };\n\nexport type ConnectionAction = \"test\" | \"resolve\";\n\nexport type ActionOutcome =\n  | { action: \"test\"; elapsedMs: number; result: TestResult }\n  | { action: \"resolve\"; elapsedMs: number; resolved: ResolvedConnection }\n  | { action: ConnectionAction; elapsedMs: number; error: string };\n\n/** POSTs an unsaved connection draft to `{apiBase}/connection/{test|resolve}`. */\nexport async function postConnection({\n  apiBase,\n  action,\n  value,\n}: {\n  apiBase: string;\n  action: ConnectionAction;\n  value: unknown;\n}): Promise<unknown> {\n  const res = await fetch(`${stripTrailingSlashes(apiBase)}/connection/${action}`, {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify(value),\n  });\n  if (!res.ok) throw new Error((await res.text()) || `${res.status} ${res.statusText}`);\n  return res.json();\n}\n\nexport function formatDuration(elapsedMs: number): string {\n  if (elapsedMs < 1) return \"<1 ms\";\n  if (elapsedMs < 1_000) return `${Math.round(elapsedMs)} ms`;\n  return `${(elapsedMs / 1_000).toFixed(elapsedMs < 10_000 ? 1 : 0)} s`;\n}\n"],"names":["stripTrailingSlashes"],"mappings":";;;AA0BA,eAAsB,eAAe;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIqB;AACnB,QAAM,MAAM,MAAM,MAAM,GAAGA,OAAAA,qBAAqB,OAAO,CAAC,eAAe,MAAM,IAAI;AAAA,IAC/E,QAAQ;AAAA,IACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,IAC3B,MAAM,KAAK,UAAU,KAAK;AAAA,EAAA,CAC3B;AACD,MAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAO,MAAM,IAAI,KAAA,KAAW,GAAG,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AACpF,SAAO,IAAI,KAAA;AACb;AAEO,SAAS,eAAe,WAA2B;AACxD,MAAI,YAAY,EAAG,QAAO;AAC1B,MAAI,YAAY,IAAO,QAAO,GAAG,KAAK,MAAM,SAAS,CAAC;AACtD,SAAO,IAAI,YAAY,KAAO,QAAQ,YAAY,MAAS,IAAI,CAAC,CAAC;AACnE;;;"}

package/dist/connections/connectionActionTypes.d.ts

@@ -0,0 +1,36 @@
+export type ResolvedConnection = {
+    type?: string;
+    namespace?: string;
+    url?: string;
+    username?: string;
+    password?: string;
+    certificate?: string;
+    properties?: Record<string, string>;
+};
+export type TestResult = {
+    ok: boolean;
+    message: string;
+    url?: string;
+};
+export type ConnectionAction = "test" | "resolve";
+export type ActionOutcome = {
+    action: "test";
+    elapsedMs: number;
+    result: TestResult;
+} | {
+    action: "resolve";
+    elapsedMs: number;
+    resolved: ResolvedConnection;
+} | {
+    action: ConnectionAction;
+    elapsedMs: number;
+    error: string;
+};
+/** POSTs an unsaved connection draft to `{apiBase}/connection/{test|resolve}`. */
+export declare function postConnection({ apiBase, action, value, }: {
+    apiBase: string;
+    action: ConnectionAction;
+    value: unknown;
+}): Promise<unknown>;
+export declare function formatDuration(elapsedMs: number): string;
+//# sourceMappingURL=connectionActionTypes.d.ts.map

package/dist/connections/connectionActionTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActionTypes.d.ts","sourceRoot":"","sources":["../../src/connections/connectionActionTypes.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,aAAa,GACrB;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,GACzD;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,kBAAkB,CAAA;CAAE,GACtE;IAAE,MAAM,EAAE,gBAAgB,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,kFAAkF;AAClF,wBAAsB,cAAc,CAAC,EACnC,OAAO,EACP,MAAM,EACN,KAAK,GACN,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,OAAO,CAAC;CAChB,GAAG,OAAO,CAAC,OAAO,CAAC,CAQnB;AAED,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIxD"}

package/dist/connections/connectionActionTypes.js

@@ -0,0 +1,24 @@
+import { stripTrailingSlashes } from "../lib/string.js";
+async function postConnection({
+  apiBase,
+  action,
+  value
+}) {
+  const res = await fetch(`${stripTrailingSlashes(apiBase)}/connection/${action}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(value)
+  });
+  if (!res.ok) throw new Error(await res.text() || `${res.status} ${res.statusText}`);
+  return res.json();
+}
+function formatDuration(elapsedMs) {
+  if (elapsedMs < 1) return "<1 ms";
+  if (elapsedMs < 1e3) return `${Math.round(elapsedMs)} ms`;
+  return `${(elapsedMs / 1e3).toFixed(elapsedMs < 1e4 ? 1 : 0)} s`;
+}
+export {
+  formatDuration,
+  postConnection
+};
+//# sourceMappingURL=connectionActionTypes.js.map

package/dist/connections/connectionActionTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActionTypes.js","sources":["../../src/connections/connectionActionTypes.ts"],"sourcesContent":["import { stripTrailingSlashes } from \"../lib/string\";\n\n// Shared types and pure helpers for the connection form \"Test\"/\"Resolve\"\n// actions. Kept in a non-component module so the sibling component files can\n// each export exactly one component (react/only-export-components).\n\nexport type ResolvedConnection = {\n  type?: string;\n  namespace?: string;\n  url?: string;\n  username?: string;\n  password?: string;\n  certificate?: string;\n  properties?: Record<string, string>;\n};\n\nexport type TestResult = { ok: boolean; message: string; url?: string };\n\nexport type ConnectionAction = \"test\" | \"resolve\";\n\nexport type ActionOutcome =\n  | { action: \"test\"; elapsedMs: number; result: TestResult }\n  | { action: \"resolve\"; elapsedMs: number; resolved: ResolvedConnection }\n  | { action: ConnectionAction; elapsedMs: number; error: string };\n\n/** POSTs an unsaved connection draft to `{apiBase}/connection/{test|resolve}`. */\nexport async function postConnection({\n  apiBase,\n  action,\n  value,\n}: {\n  apiBase: string;\n  action: ConnectionAction;\n  value: unknown;\n}): Promise<unknown> {\n  const res = await fetch(`${stripTrailingSlashes(apiBase)}/connection/${action}`, {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify(value),\n  });\n  if (!res.ok) throw new Error((await res.text()) || `${res.status} ${res.statusText}`);\n  return res.json();\n}\n\nexport function formatDuration(elapsedMs: number): string {\n  if (elapsedMs < 1) return \"<1 ms\";\n  if (elapsedMs < 1_000) return `${Math.round(elapsedMs)} ms`;\n  return `${(elapsedMs / 1_000).toFixed(elapsedMs < 10_000 ? 1 : 0)} s`;\n}\n"],"names":[],"mappings":";AA0BA,eAAsB,eAAe;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIqB;AACnB,QAAM,MAAM,MAAM,MAAM,GAAG,qBAAqB,OAAO,CAAC,eAAe,MAAM,IAAI;AAAA,IAC/E,QAAQ;AAAA,IACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,IAC3B,MAAM,KAAK,UAAU,KAAK;AAAA,EAAA,CAC3B;AACD,MAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAO,MAAM,IAAI,KAAA,KAAW,GAAG,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AACpF,SAAO,IAAI,KAAA;AACb;AAEO,SAAS,eAAe,WAA2B;AACxD,MAAI,YAAY,EAAG,QAAO;AAC1B,MAAI,YAAY,IAAO,QAAO,GAAG,KAAK,MAAM,SAAS,CAAC;AACtD,SAAO,IAAI,YAAY,KAAO,QAAQ,YAAY,MAAS,IAAI,CAAC,CAAC;AACnE;"}

package/dist/connections/connectionActions.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const connectionTestButton = require("./connectionTestButton.cjs");
+function createConnectionFormActions({
+  apiBase
+}) {
+  return ({ value, action, canSubmit }) => action.path.includes("/connection") ? /* @__PURE__ */ jsxRuntime.jsx(connectionTestButton.ConnectionTestButton, { apiBase, value, canSubmit }) : null;
+}
+exports.createConnectionFormActions = createConnectionFormActions;
+//# sourceMappingURL=connectionActions.cjs.map

package/dist/connections/connectionActions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActions.cjs","sources":["../../src/connections/connectionActions.tsx"],"sourcesContent":["import type { FormActionsRenderer } from \"../rpc/SchemaActionForm\";\nimport { ConnectionTestButton } from \"./connectionTestButton\";\n\n/**\n * Builds the form-footer renderer that adds a \"Test\" split-button (with a\n * \"Resolve values\" dropdown option) to the connection create/edit form. Test\n * probes the resolved URL's reachability; Resolve hydrates the draft (expanding\n * secret:// and svc:// / ip:// / proxy:// / host:// workload URLs) and shows the\n * resolved values with secrets masked. Both POST the live form value to\n * `{apiBase}/connection/{test|resolve}`, so they work before the connection is\n * saved. Forms of other entities get no extra actions, so the renderer can be\n * handed to an EntityExplorerApp that hosts every entity.\n */\nexport function createConnectionFormActions({\n  apiBase,\n}: {\n  apiBase: string;\n}): FormActionsRenderer {\n  return ({ value, action, canSubmit }) =>\n    action.path.includes(\"/connection\") ? (\n      <ConnectionTestButton apiBase={apiBase} value={value} canSubmit={canSubmit} />\n    ) : null;\n}\n"],"names":["jsx","ConnectionTestButton"],"mappings":";;;;AAaO,SAAS,4BAA4B;AAAA,EAC1C;AACF,GAEwB;AACtB,SAAO,CAAC,EAAE,OAAO,QAAQ,UAAA,MACvB,OAAO,KAAK,SAAS,aAAa,IAChCA,2BAAAA,IAACC,qBAAAA,sBAAA,EAAqB,SAAkB,OAAc,WAAsB,IAC1E;AACR;;"}

package/dist/connections/connectionActions.d.ts

@@ -0,0 +1,15 @@
+import { FormActionsRenderer } from '../rpc/SchemaActionForm.js';
+/**
+ * Builds the form-footer renderer that adds a "Test" split-button (with a
+ * "Resolve values" dropdown option) to the connection create/edit form. Test
+ * probes the resolved URL's reachability; Resolve hydrates the draft (expanding
+ * secret:// and svc:// / ip:// / proxy:// / host:// workload URLs) and shows the
+ * resolved values with secrets masked. Both POST the live form value to
+ * `{apiBase}/connection/{test|resolve}`, so they work before the connection is
+ * saved. Forms of other entities get no extra actions, so the renderer can be
+ * handed to an EntityExplorerApp that hosts every entity.
+ */
+export declare function createConnectionFormActions({ apiBase, }: {
+    apiBase: string;
+}): FormActionsRenderer;
+//# sourceMappingURL=connectionActions.d.ts.map

package/dist/connections/connectionActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActions.d.ts","sourceRoot":"","sources":["../../src/connections/connectionActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAGnE;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,mBAAmB,CAKtB"}

package/dist/connections/connectionActions.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { ConnectionTestButton } from "./connectionTestButton.js";
+function createConnectionFormActions({
+  apiBase
+}) {
+  return ({ value, action, canSubmit }) => action.path.includes("/connection") ? /* @__PURE__ */ jsx(ConnectionTestButton, { apiBase, value, canSubmit }) : null;
+}
+export {
+  createConnectionFormActions
+};
+//# sourceMappingURL=connectionActions.js.map

package/dist/connections/connectionActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionActions.js","sources":["../../src/connections/connectionActions.tsx"],"sourcesContent":["import type { FormActionsRenderer } from \"../rpc/SchemaActionForm\";\nimport { ConnectionTestButton } from \"./connectionTestButton\";\n\n/**\n * Builds the form-footer renderer that adds a \"Test\" split-button (with a\n * \"Resolve values\" dropdown option) to the connection create/edit form. Test\n * probes the resolved URL's reachability; Resolve hydrates the draft (expanding\n * secret:// and svc:// / ip:// / proxy:// / host:// workload URLs) and shows the\n * resolved values with secrets masked. Both POST the live form value to\n * `{apiBase}/connection/{test|resolve}`, so they work before the connection is\n * saved. Forms of other entities get no extra actions, so the renderer can be\n * handed to an EntityExplorerApp that hosts every entity.\n */\nexport function createConnectionFormActions({\n  apiBase,\n}: {\n  apiBase: string;\n}): FormActionsRenderer {\n  return ({ value, action, canSubmit }) =>\n    action.path.includes(\"/connection\") ? (\n      <ConnectionTestButton apiBase={apiBase} value={value} canSubmit={canSubmit} />\n    ) : null;\n}\n"],"names":[],"mappings":";;AAaO,SAAS,4BAA4B;AAAA,EAC1C;AACF,GAEwB;AACtB,SAAO,CAAC,EAAE,OAAO,QAAQ,UAAA,MACvB,OAAO,KAAK,SAAS,aAAa,IAChC,oBAAC,sBAAA,EAAqB,SAAkB,OAAc,WAAsB,IAC1E;AACR;"}

package/dist/connections/connectionDashboard.cjs

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactQuery = require("@tanstack/react-query");
+const react = require("react");
+const button = require("../components/button.cjs");
+const utils = require("../lib/utils.cjs");
+const connectionDashboardModel = require("./connectionDashboardModel.cjs");
+const connectionDashboardRow = require("./connectionDashboardRow.cjs");
+const connectionHealth = require("./connectionHealth.cjs");
+function ConnectionDashboardSurface({
+  apiBase,
+  requestUrl,
+  renderConnectionLink
+}) {
+  const dashboardUrl = connectionDashboardModel.connectionDashboardUrl({
+    apiBase,
+    ...requestUrl ? { requestUrl } : {}
+  });
+  const dashboard = reactQuery.useQuery({
+    queryKey: [connectionDashboardModel.CONNECTION_DASHBOARD_QUERY_KEY, dashboardUrl],
+    queryFn: async () => {
+      const response = await fetch(dashboardUrl, {
+        headers: { Accept: "application/json" }
+      });
+      if (!response.ok) {
+        const message = (await response.text()).trim();
+        throw new Error(message || `Connection dashboard failed: ${response.status}`);
+      }
+      const payload = await response.json();
+      if (!Array.isArray(payload.connections)) {
+        throw new Error("Connection dashboard response is missing connections");
+      }
+      return payload.connections;
+    },
+    staleTime: 1e4,
+    retry: 0
+  });
+  const { health, pending, error, seed, check } = connectionHealth.useConnectionHealth(apiBase);
+  const connections = dashboard.data;
+  react.useEffect(() => {
+    if (connections) seed(connections);
+  }, [connections, seed]);
+  if (dashboard.isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-card p-6 text-sm text-muted-foreground", children: "Loading connections…" });
+  }
+  if (dashboard.isError) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: dashboard.error instanceof Error ? dashboard.error.message : "Unable to load connections" }),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", onClick: () => void dashboard.refetch(), children: "Retry" })
+    ] });
+  }
+  if (!connections) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive", children: "Connection dashboard returned no data." });
+  }
+  if (connections.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground", children: "No connections match the current filters." });
+  }
+  const checked = connections.filter(
+    (connection) => {
+      var _a;
+      return health[connection.id] && ((_a = health[connection.id]) == null ? void 0 : _a.state) !== "unknown";
+    }
+  ).length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", onClick: () => void dashboard.refetch(), children: "Refresh" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: pending.size > 0,
+          onClick: () => check(
+            connections.map((connection) => connection.id),
+            { force: checked === connections.length }
+          ),
+          children: pending.size > 0 ? "Checking…" : "Check all health"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        checked,
+        "/",
+        connections.length,
+        " checked"
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-destructive", title: error.message, children: error.message }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConnectionDashboardLanes,
+      {
+        connections,
+        health,
+        pending,
+        onCheck: check,
+        renderConnectionLink
+      }
+    )
+  ] });
+}
+function ConnectionDashboardLanes({
+  connections,
+  health = {},
+  pending = /* @__PURE__ */ new Set(),
+  onCheck = () => {
+  },
+  renderConnectionLink
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    connectionDashboardModel.groupConnectionDashboardLanes(connections).map((lane) => {
+      const summary = connectionHealth.summarizeLaneHealth(lane.connections, health);
+      const unnamespaced = lane.namespace === "";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "section",
+        {
+          className: utils.cn(
+            "overflow-hidden rounded-lg border",
+            unnamespaced ? "border-dashed border-border" : "border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border bg-muted/40 px-3 py-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: utils.cn(
+                    "text-sm font-semibold",
+                    unnamespaced && "italic text-muted-foreground"
+                  ),
+                  children: unnamespaced ? "No namespace" : lane.namespace
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground", children: lane.connections.length }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-6 px-2 text-[11px]",
+                  onClick: () => onCheck(
+                    lane.connections.map((connection) => connection.id),
+                    { force: summary.checked === lane.connections.length }
+                  ),
+                  children: "Check"
+                }
+              ),
+              summary.failing > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[11px] text-rose-700 ring-1 ring-inset ring-rose-300/60 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-400/25", children: [
+                summary.failing,
+                " failing"
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+                summary.checked,
+                "/",
+                lane.connections.length,
+                " checked"
+              ] }),
+              summary.unused > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+                summary.unused,
+                " unused"
+              ] }) : null,
+              unnamespaced ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "`namespace` is optional on the model, so these are unplaceable rather than global." }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border", children: lane.connections.map((connection) => /* @__PURE__ */ jsxRuntime.jsx(
+              connectionDashboardRow.ConnectionDashboardRow,
+              {
+                connection,
+                health: health[connection.id],
+                pending: pending.has(connection.id),
+                onCheck,
+                renderConnectionLink
+              },
+              connection.id
+            )) })
+          ]
+        },
+        lane.namespace || "__none__"
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(connectionDashboardRow.ConnectionHealthLegend, {})
+  ] });
+}
+exports.ConnectionDashboardLanes = ConnectionDashboardLanes;
+exports.ConnectionDashboardSurface = ConnectionDashboardSurface;
+//# sourceMappingURL=connectionDashboard.cjs.map

package/dist/connections/connectionDashboard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionDashboard.cjs","sources":["../../src/connections/connectionDashboard.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { useEffect } from \"react\";\nimport { Button } from \"../components/button\";\nimport { cn } from \"../lib/utils\";\nimport {\n  CONNECTION_DASHBOARD_QUERY_KEY,\n  connectionDashboardUrl,\n  groupConnectionDashboardLanes,\n  type ConnectionDashboardItem,\n  type ConnectionDashboardResponse,\n  type ConnectionLinkRenderer,\n} from \"./connectionDashboardModel\";\nimport {\n  ConnectionDashboardRow,\n  ConnectionHealthLegend,\n} from \"./connectionDashboardRow\";\nimport {\n  summarizeLaneHealth,\n  useConnectionHealth,\n  type ConnectionHealthMap,\n} from \"./connectionHealth\";\n\nexport type ConnectionDashboardSurfaceProps = {\n  /** Where the commons-db connections service is mounted, e.g. `/api/v1`. */\n  apiBase: string;\n  /** A list request whose connection type filters the dashboard carries over. */\n  requestUrl?: string;\n  renderConnectionLink: ConnectionLinkRenderer;\n};\n\n/**\n * ConnectionDashboardSurface lists the connection fleet from the database only.\n * Health checks dial real backends, so they are opt-in: nothing is probed until\n * the operator clicks a row's dot, a lane's Check button, or Check all.\n */\nexport function ConnectionDashboardSurface({\n  apiBase,\n  requestUrl,\n  renderConnectionLink,\n}: ConnectionDashboardSurfaceProps) {\n  const dashboardUrl = connectionDashboardUrl({\n    apiBase,\n    ...(requestUrl ? { requestUrl } : {}),\n  });\n  const dashboard = useQuery({\n    queryKey: [CONNECTION_DASHBOARD_QUERY_KEY, dashboardUrl],\n    queryFn: async () => {\n      const response = await fetch(dashboardUrl, {\n        headers: { Accept: \"application/json\" },\n      });\n      if (!response.ok) {\n        const message = (await response.text()).trim();\n        throw new Error(message || `Connection dashboard failed: ${response.status}`);\n      }\n      const payload = (await response.json()) as Partial<ConnectionDashboardResponse>;\n      if (!Array.isArray(payload.connections)) {\n        throw new Error(\"Connection dashboard response is missing connections\");\n      }\n      return payload.connections;\n    },\n    staleTime: 10_000,\n    retry: 0,\n  });\n\n  const { health, pending, error, seed, check } = useConnectionHealth(apiBase);\n  const connections = dashboard.data;\n  useEffect(() => {\n    if (connections) seed(connections);\n  }, [connections, seed]);\n\n  if (dashboard.isLoading) {\n    return (\n      <div className=\"rounded-lg border bg-card p-6 text-sm text-muted-foreground\">\n        Loading connections…\n      </div>\n    );\n  }\n  if (dashboard.isError) {\n    return (\n      <div className=\"flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive\">\n        <span>\n          {dashboard.error instanceof Error\n            ? dashboard.error.message\n            : \"Unable to load connections\"}\n        </span>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => void dashboard.refetch()}>\n          Retry\n        </Button>\n      </div>\n    );\n  }\n  if (!connections) {\n    return (\n      <div className=\"rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive\">\n        Connection dashboard returned no data.\n      </div>\n    );\n  }\n  if (connections.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground\">\n        No connections match the current filters.\n      </div>\n    );\n  }\n\n  const checked = connections.filter(\n    (connection) => health[connection.id] && health[connection.id]?.state !== \"unknown\",\n  ).length;\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => void dashboard.refetch()}>\n          Refresh\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={pending.size > 0}\n          onClick={() =>\n            check(\n              connections.map((connection) => connection.id),\n              { force: checked === connections.length },\n            )\n          }\n        >\n          {pending.size > 0 ? \"Checking…\" : \"Check all health\"}\n        </Button>\n        <span className=\"text-xs text-muted-foreground\">\n          {checked}/{connections.length} checked\n        </span>\n        {error ? (\n          <span className=\"text-xs text-destructive\" title={error.message}>\n            {error.message}\n          </span>\n        ) : null}\n      </div>\n      <ConnectionDashboardLanes\n        connections={connections}\n        health={health}\n        pending={pending}\n        onCheck={check}\n        renderConnectionLink={renderConnectionLink}\n      />\n    </div>\n  );\n}\n\nexport function ConnectionDashboardLanes({\n  connections,\n  health = {},\n  pending = new Set<string>(),\n  onCheck = () => {},\n  renderConnectionLink,\n}: {\n  connections: ConnectionDashboardItem[];\n  health?: ConnectionHealthMap;\n  pending?: Set<string>;\n  onCheck?: (ids: string[], options?: { force?: boolean }) => void;\n  renderConnectionLink: ConnectionLinkRenderer;\n}) {\n  return (\n    <div className=\"space-y-4\">\n      {groupConnectionDashboardLanes(connections).map((lane) => {\n        const summary = summarizeLaneHealth(lane.connections, health);\n        const unnamespaced = lane.namespace === \"\";\n        return (\n          <section\n            key={lane.namespace || \"__none__\"}\n            className={cn(\n              \"overflow-hidden rounded-lg border\",\n              unnamespaced ? \"border-dashed border-border\" : \"border-border\",\n            )}\n          >\n            <header className=\"flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border bg-muted/40 px-3 py-2\">\n              <h2\n                className={cn(\n                  \"text-sm font-semibold\",\n                  unnamespaced && \"italic text-muted-foreground\",\n                )}\n              >\n                {unnamespaced ? \"No namespace\" : lane.namespace}\n              </h2>\n              <span className=\"rounded bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground\">\n                {lane.connections.length}\n              </span>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2 text-[11px]\"\n                onClick={() =>\n                  onCheck(\n                    lane.connections.map((connection) => connection.id),\n                    { force: summary.checked === lane.connections.length },\n                  )\n                }\n              >\n                Check\n              </Button>\n              {summary.failing > 0 ? (\n                <span className=\"inline-flex items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[11px] text-rose-700 ring-1 ring-inset ring-rose-300/60 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-400/25\">\n                  {summary.failing} failing\n                </span>\n              ) : null}\n              <span className=\"text-[11px] text-muted-foreground\">\n                {summary.checked}/{lane.connections.length} checked\n              </span>\n              {summary.unused > 0 ? (\n                <span className=\"text-[11px] text-muted-foreground\">{summary.unused} unused</span>\n              ) : null}\n              {unnamespaced ? (\n                <span className=\"text-xs text-muted-foreground\">\n                  `namespace` is optional on the model, so these are unplaceable rather than global.\n                </span>\n              ) : null}\n            </header>\n            <div className=\"divide-y divide-border\">\n              {lane.connections.map((connection) => (\n                <ConnectionDashboardRow\n                  key={connection.id}\n                  connection={connection}\n                  health={health[connection.id]}\n                  pending={pending.has(connection.id)}\n                  onCheck={onCheck}\n                  renderConnectionLink={renderConnectionLink}\n                />\n              ))}\n            </div>\n          </section>\n        );\n      })}\n      <ConnectionHealthLegend />\n    </div>\n  );\n}\n"],"names":["connectionDashboardUrl","useQuery","CONNECTION_DASHBOARD_QUERY_KEY","useConnectionHealth","useEffect","jsx","jsxs","Button","groupConnectionDashboardLanes","summarizeLaneHealth","cn","ConnectionDashboardRow","ConnectionHealthLegend"],"mappings":"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"}

package/dist/connections/connectionDashboard.d.ts

@@ -0,0 +1,25 @@
+import { ConnectionDashboardItem, ConnectionLinkRenderer } from './connectionDashboardModel.js';
+import { ConnectionHealthMap } from './connectionHealth.js';
+export type ConnectionDashboardSurfaceProps = {
+    /** Where the commons-db connections service is mounted, e.g. `/api/v1`. */
+    apiBase: string;
+    /** A list request whose connection type filters the dashboard carries over. */
+    requestUrl?: string;
+    renderConnectionLink: ConnectionLinkRenderer;
+};
+/**
+ * ConnectionDashboardSurface lists the connection fleet from the database only.
+ * Health checks dial real backends, so they are opt-in: nothing is probed until
+ * the operator clicks a row's dot, a lane's Check button, or Check all.
+ */
+export declare function ConnectionDashboardSurface({ apiBase, requestUrl, renderConnectionLink, }: ConnectionDashboardSurfaceProps): import("react").JSX.Element;
+export declare function ConnectionDashboardLanes({ connections, health, pending, onCheck, renderConnectionLink, }: {
+    connections: ConnectionDashboardItem[];
+    health?: ConnectionHealthMap;
+    pending?: Set<string>;
+    onCheck?: (ids: string[], options?: {
+        force?: boolean;
+    }) => void;
+    renderConnectionLink: ConnectionLinkRenderer;
+}): import("react").JSX.Element;
+//# sourceMappingURL=connectionDashboard.d.ts.map

package/dist/connections/connectionDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionDashboard.d.ts","sourceRoot":"","sources":["../../src/connections/connectionDashboard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,uBAAuB,EAE5B,KAAK,sBAAsB,EAC5B,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,+BAA+B,GAAG;IAC5C,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB,EAAE,sBAAsB,CAAC;CAC9C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,OAAO,EACP,UAAU,EACV,oBAAoB,GACrB,EAAE,+BAA+B,+BA4GjC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,WAAW,EACX,MAAW,EACX,OAA2B,EAC3B,OAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,WAAW,EAAE,uBAAuB,EAAE,CAAC;IACvC,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,oBAAoB,EAAE,sBAAsB,CAAC;CAC9C,+BA2EA"}

package/dist/connections/connectionDashboard.js

@@ -0,0 +1,185 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { Button } from "../components/button.js";
+import { cn } from "../lib/utils.js";
+import { groupConnectionDashboardLanes, connectionDashboardUrl, CONNECTION_DASHBOARD_QUERY_KEY } from "./connectionDashboardModel.js";
+import { ConnectionDashboardRow, ConnectionHealthLegend } from "./connectionDashboardRow.js";
+import { summarizeLaneHealth, useConnectionHealth } from "./connectionHealth.js";
+function ConnectionDashboardSurface({
+  apiBase,
+  requestUrl,
+  renderConnectionLink
+}) {
+  const dashboardUrl = connectionDashboardUrl({
+    apiBase,
+    ...requestUrl ? { requestUrl } : {}
+  });
+  const dashboard = useQuery({
+    queryKey: [CONNECTION_DASHBOARD_QUERY_KEY, dashboardUrl],
+    queryFn: async () => {
+      const response = await fetch(dashboardUrl, {
+        headers: { Accept: "application/json" }
+      });
+      if (!response.ok) {
+        const message = (await response.text()).trim();
+        throw new Error(message || `Connection dashboard failed: ${response.status}`);
+      }
+      const payload = await response.json();
+      if (!Array.isArray(payload.connections)) {
+        throw new Error("Connection dashboard response is missing connections");
+      }
+      return payload.connections;
+    },
+    staleTime: 1e4,
+    retry: 0
+  });
+  const { health, pending, error, seed, check } = useConnectionHealth(apiBase);
+  const connections = dashboard.data;
+  useEffect(() => {
+    if (connections) seed(connections);
+  }, [connections, seed]);
+  if (dashboard.isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-sm text-muted-foreground", children: "Loading connections…" });
+  }
+  if (dashboard.isError) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsx("span", { children: dashboard.error instanceof Error ? dashboard.error.message : "Unable to load connections" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void dashboard.refetch(), children: "Retry" })
+    ] });
+  }
+  if (!connections) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive", children: "Connection dashboard returned no data." });
+  }
+  if (connections.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground", children: "No connections match the current filters." });
+  }
+  const checked = connections.filter(
+    (connection) => {
+      var _a;
+      return health[connection.id] && ((_a = health[connection.id]) == null ? void 0 : _a.state) !== "unknown";
+    }
+  ).length;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void dashboard.refetch(), children: "Refresh" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: pending.size > 0,
+          onClick: () => check(
+            connections.map((connection) => connection.id),
+            { force: checked === connections.length }
+          ),
+          children: pending.size > 0 ? "Checking…" : "Check all health"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        checked,
+        "/",
+        connections.length,
+        " checked"
+      ] }),
+      error ? /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", title: error.message, children: error.message }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConnectionDashboardLanes,
+      {
+        connections,
+        health,
+        pending,
+        onCheck: check,
+        renderConnectionLink
+      }
+    )
+  ] });
+}
+function ConnectionDashboardLanes({
+  connections,
+  health = {},
+  pending = /* @__PURE__ */ new Set(),
+  onCheck = () => {
+  },
+  renderConnectionLink
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    groupConnectionDashboardLanes(connections).map((lane) => {
+      const summary = summarizeLaneHealth(lane.connections, health);
+      const unnamespaced = lane.namespace === "";
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: cn(
+            "overflow-hidden rounded-lg border",
+            unnamespaced ? "border-dashed border-border" : "border-border"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border bg-muted/40 px-3 py-2", children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-sm font-semibold",
+                    unnamespaced && "italic text-muted-foreground"
+                  ),
+                  children: unnamespaced ? "No namespace" : lane.namespace
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground", children: lane.connections.length }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-6 px-2 text-[11px]",
+                  onClick: () => onCheck(
+                    lane.connections.map((connection) => connection.id),
+                    { force: summary.checked === lane.connections.length }
+                  ),
+                  children: "Check"
+                }
+              ),
+              summary.failing > 0 ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[11px] text-rose-700 ring-1 ring-inset ring-rose-300/60 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-400/25", children: [
+                summary.failing,
+                " failing"
+              ] }) : null,
+              /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+                summary.checked,
+                "/",
+                lane.connections.length,
+                " checked"
+              ] }),
+              summary.unused > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+                summary.unused,
+                " unused"
+              ] }) : null,
+              unnamespaced ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "`namespace` is optional on the model, so these are unplaceable rather than global." }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: lane.connections.map((connection) => /* @__PURE__ */ jsx(
+              ConnectionDashboardRow,
+              {
+                connection,
+                health: health[connection.id],
+                pending: pending.has(connection.id),
+                onCheck,
+                renderConnectionLink
+              },
+              connection.id
+            )) })
+          ]
+        },
+        lane.namespace || "__none__"
+      );
+    }),
+    /* @__PURE__ */ jsx(ConnectionHealthLegend, {})
+  ] });
+}
+export {
+  ConnectionDashboardLanes,
+  ConnectionDashboardSurface
+};
+//# sourceMappingURL=connectionDashboard.js.map

package/dist/connections/connectionDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connectionDashboard.js","sources":["../../src/connections/connectionDashboard.tsx"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { useEffect } from \"react\";\nimport { Button } from \"../components/button\";\nimport { cn } from \"../lib/utils\";\nimport {\n  CONNECTION_DASHBOARD_QUERY_KEY,\n  connectionDashboardUrl,\n  groupConnectionDashboardLanes,\n  type ConnectionDashboardItem,\n  type ConnectionDashboardResponse,\n  type ConnectionLinkRenderer,\n} from \"./connectionDashboardModel\";\nimport {\n  ConnectionDashboardRow,\n  ConnectionHealthLegend,\n} from \"./connectionDashboardRow\";\nimport {\n  summarizeLaneHealth,\n  useConnectionHealth,\n  type ConnectionHealthMap,\n} from \"./connectionHealth\";\n\nexport type ConnectionDashboardSurfaceProps = {\n  /** Where the commons-db connections service is mounted, e.g. `/api/v1`. */\n  apiBase: string;\n  /** A list request whose connection type filters the dashboard carries over. */\n  requestUrl?: string;\n  renderConnectionLink: ConnectionLinkRenderer;\n};\n\n/**\n * ConnectionDashboardSurface lists the connection fleet from the database only.\n * Health checks dial real backends, so they are opt-in: nothing is probed until\n * the operator clicks a row's dot, a lane's Check button, or Check all.\n */\nexport function ConnectionDashboardSurface({\n  apiBase,\n  requestUrl,\n  renderConnectionLink,\n}: ConnectionDashboardSurfaceProps) {\n  const dashboardUrl = connectionDashboardUrl({\n    apiBase,\n    ...(requestUrl ? { requestUrl } : {}),\n  });\n  const dashboard = useQuery({\n    queryKey: [CONNECTION_DASHBOARD_QUERY_KEY, dashboardUrl],\n    queryFn: async () => {\n      const response = await fetch(dashboardUrl, {\n        headers: { Accept: \"application/json\" },\n      });\n      if (!response.ok) {\n        const message = (await response.text()).trim();\n        throw new Error(message || `Connection dashboard failed: ${response.status}`);\n      }\n      const payload = (await response.json()) as Partial<ConnectionDashboardResponse>;\n      if (!Array.isArray(payload.connections)) {\n        throw new Error(\"Connection dashboard response is missing connections\");\n      }\n      return payload.connections;\n    },\n    staleTime: 10_000,\n    retry: 0,\n  });\n\n  const { health, pending, error, seed, check } = useConnectionHealth(apiBase);\n  const connections = dashboard.data;\n  useEffect(() => {\n    if (connections) seed(connections);\n  }, [connections, seed]);\n\n  if (dashboard.isLoading) {\n    return (\n      <div className=\"rounded-lg border bg-card p-6 text-sm text-muted-foreground\">\n        Loading connections…\n      </div>\n    );\n  }\n  if (dashboard.isError) {\n    return (\n      <div className=\"flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive\">\n        <span>\n          {dashboard.error instanceof Error\n            ? dashboard.error.message\n            : \"Unable to load connections\"}\n        </span>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => void dashboard.refetch()}>\n          Retry\n        </Button>\n      </div>\n    );\n  }\n  if (!connections) {\n    return (\n      <div className=\"rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm text-destructive\">\n        Connection dashboard returned no data.\n      </div>\n    );\n  }\n  if (connections.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground\">\n        No connections match the current filters.\n      </div>\n    );\n  }\n\n  const checked = connections.filter(\n    (connection) => health[connection.id] && health[connection.id]?.state !== \"unknown\",\n  ).length;\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={() => void dashboard.refetch()}>\n          Refresh\n        </Button>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={pending.size > 0}\n          onClick={() =>\n            check(\n              connections.map((connection) => connection.id),\n              { force: checked === connections.length },\n            )\n          }\n        >\n          {pending.size > 0 ? \"Checking…\" : \"Check all health\"}\n        </Button>\n        <span className=\"text-xs text-muted-foreground\">\n          {checked}/{connections.length} checked\n        </span>\n        {error ? (\n          <span className=\"text-xs text-destructive\" title={error.message}>\n            {error.message}\n          </span>\n        ) : null}\n      </div>\n      <ConnectionDashboardLanes\n        connections={connections}\n        health={health}\n        pending={pending}\n        onCheck={check}\n        renderConnectionLink={renderConnectionLink}\n      />\n    </div>\n  );\n}\n\nexport function ConnectionDashboardLanes({\n  connections,\n  health = {},\n  pending = new Set<string>(),\n  onCheck = () => {},\n  renderConnectionLink,\n}: {\n  connections: ConnectionDashboardItem[];\n  health?: ConnectionHealthMap;\n  pending?: Set<string>;\n  onCheck?: (ids: string[], options?: { force?: boolean }) => void;\n  renderConnectionLink: ConnectionLinkRenderer;\n}) {\n  return (\n    <div className=\"space-y-4\">\n      {groupConnectionDashboardLanes(connections).map((lane) => {\n        const summary = summarizeLaneHealth(lane.connections, health);\n        const unnamespaced = lane.namespace === \"\";\n        return (\n          <section\n            key={lane.namespace || \"__none__\"}\n            className={cn(\n              \"overflow-hidden rounded-lg border\",\n              unnamespaced ? \"border-dashed border-border\" : \"border-border\",\n            )}\n          >\n            <header className=\"flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border bg-muted/40 px-3 py-2\">\n              <h2\n                className={cn(\n                  \"text-sm font-semibold\",\n                  unnamespaced && \"italic text-muted-foreground\",\n                )}\n              >\n                {unnamespaced ? \"No namespace\" : lane.namespace}\n              </h2>\n              <span className=\"rounded bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground\">\n                {lane.connections.length}\n              </span>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2 text-[11px]\"\n                onClick={() =>\n                  onCheck(\n                    lane.connections.map((connection) => connection.id),\n                    { force: summary.checked === lane.connections.length },\n                  )\n                }\n              >\n                Check\n              </Button>\n              {summary.failing > 0 ? (\n                <span className=\"inline-flex items-center gap-1 rounded bg-rose-100 px-1.5 py-0.5 text-[11px] text-rose-700 ring-1 ring-inset ring-rose-300/60 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-400/25\">\n                  {summary.failing} failing\n                </span>\n              ) : null}\n              <span className=\"text-[11px] text-muted-foreground\">\n                {summary.checked}/{lane.connections.length} checked\n              </span>\n              {summary.unused > 0 ? (\n                <span className=\"text-[11px] text-muted-foreground\">{summary.unused} unused</span>\n              ) : null}\n              {unnamespaced ? (\n                <span className=\"text-xs text-muted-foreground\">\n                  `namespace` is optional on the model, so these are unplaceable rather than global.\n                </span>\n              ) : null}\n            </header>\n            <div className=\"divide-y divide-border\">\n              {lane.connections.map((connection) => (\n                <ConnectionDashboardRow\n                  key={connection.id}\n                  connection={connection}\n                  health={health[connection.id]}\n                  pending={pending.has(connection.id)}\n                  onCheck={onCheck}\n                  renderConnectionLink={renderConnectionLink}\n                />\n              ))}\n            </div>\n          </section>\n        );\n      })}\n      <ConnectionHealthLegend />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}