@neuronection/assistant-ui 0.62.0 → 0.63.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @neuronection/assistant-ui
 
+## 0.63.0
+
+### Minor Changes
+
+- [#93](https://github.com/neuronection/assistant-ui/pull/93) [`6bd960c`](https://github.com/neuronection/assistant-ui/commit/6bd960c41b1254137c300a6018f8a1dbeeb4932b) Thanks [@constLiakos](https://github.com/constLiakos)! - `ProviderCard`: new optional `subtitle` — a muted, truncated line under
+  the name for discrete always-on context (the endpoint URL), full text on
+  its tooltip. Ruling update from the career pilot: the base URL reads
+  better as quiet always-on info than as hover-only.
+
 ## 0.62.0
 
 ### Minor Changes

package/dist/{chunk-7LT2HC54.js → chunk-X4O7VIGL.js}

@@ -11,6 +11,7 @@ var ProviderCard = React.forwardRef(
     name,
     logoPreset,
     nameTitle,
+    subtitle,
     badges,
     status = "idle",
     connectionLabel,
@@ -55,6 +56,7 @@ var ProviderCard = React.forwardRef(
                 badge.key
               ))
             ] }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-[var(--as-muted-fg)]", title: subtitle, children: subtitle }) : null,
             /* @__PURE__ */ jsx(
               ConnectionTestRow,
               {
@@ -88,5 +90,5 @@ var ProviderCard = React.forwardRef(
 );
 
 export { ProviderCard };
-//# sourceMappingURL=chunk-7LT2HC54.js.map
-//# sourceMappingURL=chunk-7LT2HC54.js.map
+//# sourceMappingURL=chunk-X4O7VIGL.js.map
+//# sourceMappingURL=chunk-X4O7VIGL.js.map

package/dist/chunk-X4O7VIGL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/provider-card/ProviderCard.tsx"],"names":["ProviderCard"],"mappings":";;;;;;;;AAiEO,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAChC,SAASA,aAAAA,CACP;AAAA,IACE,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,eAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,eAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,UACT,kIAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,yDAAA,EACX,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,UAAA,IAAc,EAAA,EAAI,WAAU,UAAA,EAAW,CAAA;AAAA,kCAC5D,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAW,KAAA,EAAO,WAC/B,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,cAAA,CACE,MAAA,IAAU,EAAC,EAAG,GAAA,CAAI,CAAC,KAAA,qBACnB,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAA,CAAM,KAAA;AAAA,kBACb,eAAa,KAAA,CAAM,MAAA;AAAA,kBACnB,SAAA,EAAW,EAAA;AAAA,oBACT,+FAAA;AAAA,oBACA,MAAM,MAAA,IAAU;AAAA,mBAClB;AAAA,kBAEC,QAAA,EAAA,KAAA,CAAM;AAAA,iBAAA;AAAA,gBARF,KAAA,CAAM;AAAA,eAUd;AAAA,aAAA,EACH,CAAA;AAAA,YACC,QAAA,uBACE,GAAA,EAAA,EAAE,SAAA,EAAU,qDAAoD,KAAA,EAAO,QAAA,EACrE,oBACH,CAAA,GACE,IAAA;AAAA,4BACJ,GAAA;AAAA,cAAC,iBAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,QAAA;AAAA,gBACR,SAAA,EAAU,QAAA;AAAA,gBACV,KAAA,EAAO,eAAA;AAAA,gBACP,MAAA;AAAA,gBACA,SAAA;AAAA,gBACA,YAAA;AAAA,gBACA,SAAA;AAAA,gBACA,YAAA;AAAA,gBACA,IAAA;AAAA,gBACA,OAAA;AAAA,gBACA;AAAA;AAAA;AACF,WAAA,EACF,CAAA;AAAA,UACC,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA,mBAC3B,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAO,YAAA,IAAgB,IAAA;AAAA,cACvB,KAAA,EAAM,KAAA;AAAA,cACN,yBAAS,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC,CAAA;AAAA,cAC1D,KAAA,EAAO;AAAA;AAAA,WACT,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"chunk-X4O7VIGL.js","sourcesContent":["import * as React from 'react'\nimport { EllipsisVertical } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport {\n  ActionMenu,\n  type ActionMenuItem,\n} from '../menu/Menu'\nimport {\n  ConnectionTestRow,\n  type ConnectionTestStatus,\n} from '../connection-test-row/ConnectionTestRow'\nimport { ProviderLogo } from '../provider-logo/ProviderLogo'\n\nexport interface ProviderCardBadge {\n  /** Stable badge id (also the React key). */\n  key: string\n  label: string\n  /** Tooltip on the badge (e.g. the country's name behind its flag). */\n  title?: string\n  /** Danger tone (the \"inactive\" marker). */\n  danger?: boolean\n  /** Apps target badges in tests (`data-testid`). */\n  testId?: string\n}\n\n/** Same shape as the overflow menu's items — management actions\n * (\"Set up automatically\", \"Edit\", \"Delete\"), not the inline test. */\nexport type ProviderCardAction = ActionMenuItem\n\nexport interface ProviderCardProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string\n  /** Preset key for the provider mark — unknown keys fall back to the\n   * monogram. */\n  logoPreset?: string\n  /** Tooltip on the name (the card keeps this line status-forward). */\n  nameTitle?: string\n  /** Muted, truncated second line under the name — discrete always-on\n   * context (e.g. the endpoint URL); the full text rides its tooltip. */\n  subtitle?: string\n  badges?: ProviderCardBadge[]\n  status?: ConnectionTestStatus\n  /** Accessible label for the connection row. */\n  connectionLabel?: string\n  okLabel?: string\n  failLabel?: string\n  /** Text for the never-tested state (\"Not tested\") — shown when the\n   * connection has never been tested. */\n  idleLabel?: string\n  latencyLabel?: string\n  latencyMs?: number | null\n  errorMessage?: string | null\n  /** Context after the status — model count. */\n  meta?: React.ReactNode\n  actions?: ProviderCardAction[]\n  /** Accessible label for the actions menu. */\n  actionsLabel?: string\n}\n\n/** One provider summary card: mark + name + identity badges, a muted\n * subtitle for discrete always-on context (the endpoint URL), the\n * connection result as the status line (display only — the test action\n * lives in the `⋯` overflow menu alongside the other management\n * actions). Presentational and controlled: data in via props, events\n * out. */\nexport const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(\n  function ProviderCard(\n    {\n      name,\n      logoPreset,\n      nameTitle,\n      subtitle,\n      badges,\n      status = 'idle',\n      connectionLabel,\n      okLabel,\n      failLabel,\n      idleLabel,\n      latencyLabel,\n      latencyMs,\n      errorMessage,\n      meta,\n      actions,\n      actionsLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        data-as=\"provider-card\"\n        className={cn(\n          'flex items-start justify-between gap-2 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface)] p-4',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"flex items-center gap-2 font-medium text-[var(--as-fg)]\">\n            <ProviderLogo preset={logoPreset ?? ''} className=\"shrink-0\" />\n            <span className=\"truncate\" title={nameTitle}>\n              {name}\n            </span>\n            {(badges ?? []).map((badge) => (\n              <span\n                key={badge.key}\n                title={badge.title}\n                data-testid={badge.testId}\n                className={cn(\n                  'shrink-0 rounded bg-[var(--as-secondary)] px-1.5 py-0.5 text-xs text-[var(--as-secondary-fg)]',\n                  badge.danger && 'bg-transparent text-[var(--as-danger)]',\n                )}\n              >\n                {badge.label}\n              </span>\n            ))}\n          </p>\n          {subtitle ? (\n            <p className=\"mt-0.5 truncate text-xs text-[var(--as-muted-fg)]\" title={subtitle}>\n              {subtitle}\n            </p>\n          ) : null}\n          <ConnectionTestRow\n            variant=\"inline\"\n            className=\"mt-1.5\"\n            label={connectionLabel}\n            status={status}\n            latencyMs={latencyMs}\n            latencyLabel={latencyLabel}\n            idleLabel={idleLabel}\n            errorMessage={errorMessage}\n            meta={meta}\n            okLabel={okLabel}\n            failLabel={failLabel}\n          />\n        </div>\n        {actions && actions.length > 0 ? (\n          <ActionMenu\n            label={actionsLabel ?? name}\n            align=\"end\"\n            trigger={<EllipsisVertical className=\"size-4\" aria-hidden />}\n            items={actions}\n          />\n        ) : null}\n      </div>\n    )\n  },\n)\n"]}

package/dist/index.d.ts

@@ -466,7 +466,7 @@ interface FlowTelemetryStripProps {
 declare const FlowTelemetryStrip: React.ForwardRefExoticComponent<FlowTelemetryStripProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "warning" | "success" | "danger" | "secondary" | "outline" | "ai" | null | undefined;
+    variant?: "ai" | "default" | "warning" | "success" | "danger" | "secondary" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
 }
@@ -1019,9 +1019,11 @@ interface ProviderCardProps extends Omit<React.ComponentProps<'div'>, 'children'
     /** Preset key for the provider mark — unknown keys fall back to the
      * monogram. */
     logoPreset?: string;
-    /** Tooltip on the name — the connection string's only at-a-glance home
-     * (config detail lives in Edit; the card stays status-forward). */
+    /** Tooltip on the name (the card keeps this line status-forward). */
     nameTitle?: string;
+    /** Muted, truncated second line under the name — discrete always-on
+     * context (e.g. the endpoint URL); the full text rides its tooltip. */
+    subtitle?: string;
     badges?: ProviderCardBadge[];
     status?: ConnectionTestStatus;
     /** Accessible label for the connection row. */
@@ -1040,11 +1042,12 @@ interface ProviderCardProps extends Omit<React.ComponentProps<'div'>, 'children'
     /** Accessible label for the actions menu. */
     actionsLabel?: string;
 }
-/** One provider summary card: mark + name + identity badges, the
- * connection result as the card's second line (status display only —
- * the test action lives in the `⋯` overflow menu alongside the other
- * management actions), and config detail (base URL) as a name tooltip.
- * Presentational and controlled: data in via props, events out. */
+/** One provider summary card: mark + name + identity badges, a muted
+ * subtitle for discrete always-on context (the endpoint URL), the
+ * connection result as the status line (display only — the test action
+ * lives in the `⋯` overflow menu alongside the other management
+ * actions). Presentational and controlled: data in via props, events
+ * out. */
 declare const ProviderCard: React.ForwardRefExoticComponent<Omit<ProviderCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 interface SettingsNavItem {

package/dist/index.js

@@ -18,7 +18,7 @@ export { Skeleton, SkeletonText } from './chunk-4OJXAFGA.js';
 export { HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger } from './chunk-PNYJ5VX2.js';
 export { SetupSteps } from './chunk-K54EWKQC.js';
 export { SetupAssignments } from './chunk-MVJCUNCD.js';
-export { ProviderCard } from './chunk-7LT2HC54.js';
+export { ProviderCard } from './chunk-X4O7VIGL.js';
 export { RangeBar } from './chunk-3UDWLHLD.js';
 export { ScaleSlider, scaleColorForValue } from './chunk-NLHODVBI.js';
 export { ProfileSwitcher } from './chunk-6ANLDUGL.js';

package/dist/provider-card.d.ts

@@ -32,9 +32,11 @@ interface ProviderCardProps extends Omit<React.ComponentProps<'div'>, 'children'
     /** Preset key for the provider mark — unknown keys fall back to the
      * monogram. */
     logoPreset?: string;
-    /** Tooltip on the name — the connection string's only at-a-glance home
-     * (config detail lives in Edit; the card stays status-forward). */
+    /** Tooltip on the name (the card keeps this line status-forward). */
     nameTitle?: string;
+    /** Muted, truncated second line under the name — discrete always-on
+     * context (e.g. the endpoint URL); the full text rides its tooltip. */
+    subtitle?: string;
     badges?: ProviderCardBadge[];
     status?: ConnectionTestStatus;
     /** Accessible label for the connection row. */
@@ -53,11 +55,12 @@ interface ProviderCardProps extends Omit<React.ComponentProps<'div'>, 'children'
     /** Accessible label for the actions menu. */
     actionsLabel?: string;
 }
-/** One provider summary card: mark + name + identity badges, the
- * connection result as the card's second line (status display only —
- * the test action lives in the `⋯` overflow menu alongside the other
- * management actions), and config detail (base URL) as a name tooltip.
- * Presentational and controlled: data in via props, events out. */
+/** One provider summary card: mark + name + identity badges, a muted
+ * subtitle for discrete always-on context (the endpoint URL), the
+ * connection result as the status line (display only — the test action
+ * lives in the `⋯` overflow menu alongside the other management
+ * actions). Presentational and controlled: data in via props, events
+ * out. */
 declare const ProviderCard: React.ForwardRefExoticComponent<Omit<ProviderCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { ProviderCard, type ProviderCardAction, type ProviderCardBadge, type ProviderCardProps };

package/dist/provider-card.js

@@ -1,3 +1,3 @@
-export { ProviderCard } from './chunk-7LT2HC54.js';
+export { ProviderCard } from './chunk-X4O7VIGL.js';
 //# sourceMappingURL=provider-card.js.map
 //# sourceMappingURL=provider-card.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuronection/assistant-ui",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "description": "Shared React component library for the Assistant family (career-, study-, health-, desktop-assistant). Family look by default, app-flavored via CSS-variable tokens.",
   "type": "module",
   "license": "Apache-2.0",

package/dist/chunk-7LT2HC54.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/provider-card/ProviderCard.tsx"],"names":["ProviderCard"],"mappings":";;;;;;;;AA8DO,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAChC,SAASA,aAAAA,CACP;AAAA,IACE,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,eAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,eAAA;AAAA,QACR,SAAA,EAAW,EAAA;AAAA,UACT,kIAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,GAAA,EAAA,EAAE,WAAU,yDAAA,EACX,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,UAAA,IAAc,EAAA,EAAI,WAAU,UAAA,EAAW,CAAA;AAAA,kCAC5D,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAW,KAAA,EAAO,WAC/B,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,cAAA,CACE,MAAA,IAAU,EAAC,EAAG,GAAA,CAAI,CAAC,KAAA,qBACnB,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAA,CAAM,KAAA;AAAA,kBACb,eAAa,KAAA,CAAM,MAAA;AAAA,kBACnB,SAAA,EAAW,EAAA;AAAA,oBACT,+FAAA;AAAA,oBACA,MAAM,MAAA,IAAU;AAAA,mBAClB;AAAA,kBAEC,QAAA,EAAA,KAAA,CAAM;AAAA,iBAAA;AAAA,gBARF,KAAA,CAAM;AAAA,eAUd;AAAA,aAAA,EACH,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,iBAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,QAAA;AAAA,gBACR,SAAA,EAAU,QAAA;AAAA,gBACV,KAAA,EAAO,eAAA;AAAA,gBACP,MAAA;AAAA,gBACA,SAAA;AAAA,gBACA,YAAA;AAAA,gBACA,SAAA;AAAA,gBACA,YAAA;AAAA,gBACA,IAAA;AAAA,gBACA,OAAA;AAAA,gBACA;AAAA;AAAA;AACF,WAAA,EACF,CAAA;AAAA,UACC,OAAA,IAAW,OAAA,CAAQ,MAAA,GAAS,CAAA,mBAC3B,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAO,YAAA,IAAgB,IAAA;AAAA,cACvB,KAAA,EAAM,KAAA;AAAA,cACN,yBAAS,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,QAAA,EAAS,eAAW,IAAA,EAAC,CAAA;AAAA,cAC1D,KAAA,EAAO;AAAA;AAAA,WACT,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"chunk-7LT2HC54.js","sourcesContent":["import * as React from 'react'\nimport { EllipsisVertical } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport {\n  ActionMenu,\n  type ActionMenuItem,\n} from '../menu/Menu'\nimport {\n  ConnectionTestRow,\n  type ConnectionTestStatus,\n} from '../connection-test-row/ConnectionTestRow'\nimport { ProviderLogo } from '../provider-logo/ProviderLogo'\n\nexport interface ProviderCardBadge {\n  /** Stable badge id (also the React key). */\n  key: string\n  label: string\n  /** Tooltip on the badge (e.g. the country's name behind its flag). */\n  title?: string\n  /** Danger tone (the \"inactive\" marker). */\n  danger?: boolean\n  /** Apps target badges in tests (`data-testid`). */\n  testId?: string\n}\n\n/** Same shape as the overflow menu's items — management actions\n * (\"Set up automatically\", \"Edit\", \"Delete\"), not the inline test. */\nexport type ProviderCardAction = ActionMenuItem\n\nexport interface ProviderCardProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  name: string\n  /** Preset key for the provider mark — unknown keys fall back to the\n   * monogram. */\n  logoPreset?: string\n  /** Tooltip on the name — the connection string's only at-a-glance home\n   * (config detail lives in Edit; the card stays status-forward). */\n  nameTitle?: string\n  badges?: ProviderCardBadge[]\n  status?: ConnectionTestStatus\n  /** Accessible label for the connection row. */\n  connectionLabel?: string\n  okLabel?: string\n  failLabel?: string\n  /** Text for the never-tested state (\"Not tested\") — shown when the\n   * connection has never been tested. */\n  idleLabel?: string\n  latencyLabel?: string\n  latencyMs?: number | null\n  errorMessage?: string | null\n  /** Context after the status — model count. */\n  meta?: React.ReactNode\n  actions?: ProviderCardAction[]\n  /** Accessible label for the actions menu. */\n  actionsLabel?: string\n}\n\n/** One provider summary card: mark + name + identity badges, the\n * connection result as the card's second line (status display only —\n * the test action lives in the `⋯` overflow menu alongside the other\n * management actions), and config detail (base URL) as a name tooltip.\n * Presentational and controlled: data in via props, events out. */\nexport const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(\n  function ProviderCard(\n    {\n      name,\n      logoPreset,\n      nameTitle,\n      badges,\n      status = 'idle',\n      connectionLabel,\n      okLabel,\n      failLabel,\n      idleLabel,\n      latencyLabel,\n      latencyMs,\n      errorMessage,\n      meta,\n      actions,\n      actionsLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <div\n        ref={ref}\n        data-as=\"provider-card\"\n        className={cn(\n          'flex items-start justify-between gap-2 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface)] p-4',\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"flex items-center gap-2 font-medium text-[var(--as-fg)]\">\n            <ProviderLogo preset={logoPreset ?? ''} className=\"shrink-0\" />\n            <span className=\"truncate\" title={nameTitle}>\n              {name}\n            </span>\n            {(badges ?? []).map((badge) => (\n              <span\n                key={badge.key}\n                title={badge.title}\n                data-testid={badge.testId}\n                className={cn(\n                  'shrink-0 rounded bg-[var(--as-secondary)] px-1.5 py-0.5 text-xs text-[var(--as-secondary-fg)]',\n                  badge.danger && 'bg-transparent text-[var(--as-danger)]',\n                )}\n              >\n                {badge.label}\n              </span>\n            ))}\n          </p>\n          <ConnectionTestRow\n            variant=\"inline\"\n            className=\"mt-1.5\"\n            label={connectionLabel}\n            status={status}\n            latencyMs={latencyMs}\n            latencyLabel={latencyLabel}\n            idleLabel={idleLabel}\n            errorMessage={errorMessage}\n            meta={meta}\n            okLabel={okLabel}\n            failLabel={failLabel}\n          />\n        </div>\n        {actions && actions.length > 0 ? (\n          <ActionMenu\n            label={actionsLabel ?? name}\n            align=\"end\"\n            trigger={<EllipsisVertical className=\"size-4\" aria-hidden />}\n            items={actions}\n          />\n        ) : null}\n      </div>\n    )\n  },\n)\n"]}