@stigmer/react 3.12.2 → 3.12.4

package/src/manifest/EditResourceYamlDialog.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
+import { lazy, Suspense, useCallback, useEffect } from "react";
 import type { Message } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import { getUserMessage, type AppliedManifest } from "@stigmer/sdk";
 import { toast } from "../feedback/toast.js";
 import { RedactedSecretsNotice } from "./RedactedSecretsNotice.js";
@@ -67,34 +68,14 @@ export function EditResourceYamlDialog({
   resource,
   onApplied,
 }: EditResourceYamlDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const edit = useEditResourceYaml({ resource });
   const { reset } = edit;
 
-  // Sync dialog open state with the native <dialog> element.
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
   // Discard stale edits from a previous session when the dialog opens.
   useEffect(() => {
     if (open) reset();
   }, [open, reset]);
 
-  const handleCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
   const handleApply = useCallback(async () => {
     try {
       const result = await edit.apply();
@@ -111,15 +92,7 @@ export function EditResourceYamlDialog({
     edit.validation.status === "valid" && edit.isDirty && !edit.isApplying;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleCancel}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-3xl stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
+    <DialogShell open={open} onOpenChange={onOpenChange} width="3xl" aria-label="Edit YAML">
       <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
         {/* Header */}
         <div className="stg:flex stg:flex-col stg:gap-1">
@@ -233,7 +206,7 @@ export function EditResourceYamlDialog({
           </div>
         </div>
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/mcp-server/McpServerConnectDialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { DialogShell } from "../internal/DialogShell.js";
 import type { EnvVarInput } from "@stigmer/sdk";
 import { useMcpServer } from "./useMcpServer.js";
 import { useMcpServerCredentials } from "./useMcpServerCredentials.js";
@@ -88,29 +89,11 @@ export function McpServerConnectDialog({
   onOpenDetails,
   className,
 }: McpServerConnectDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
   const resolvedOrg = activeOrg || org;
 
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  const handleDialogClose = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent<HTMLDialogElement>) => {
-      if (e.target === dialogRef.current) {
-        onClose();
-      }
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) onClose();
     },
     [onClose],
   );
@@ -118,15 +101,18 @@ export function McpServerConnectDialog({
   if (!open) return null;
 
   return (
-    <dialog
-      ref={dialogRef}
-      onClose={handleDialogClose}
-      onClick={handleBackdropClick}
+    <DialogShell
+      open
+      onOpenChange={handleOpenChange}
+      width="md"
+      dismissOnBackdrop
+      // Card surface + visible overflow are deliberate: the connect form
+      // hosts popovers that extend past the dialog bounds.
       className={cn(
-        "stg:m-auto stg:max-h-[85vh] stg:w-full stg:max-w-md stg:overflow-visible stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-0 stg:text-foreground stg:shadow-lg",
-        "stg:backdrop:bg-backdrop",
+        "stg:max-h-[85vh] stg:overflow-visible stg:bg-card stg:text-foreground",
         className,
       )}
+      aria-label={`Connect ${slug}`}
     >
       <div
         className="stg:flex stg:max-h-[85vh] stg:flex-col stg:overflow-y-auto stg:p-6"
@@ -141,7 +127,7 @@ export function McpServerConnectDialog({
           onOpenDetails={onOpenDetails}
         />
       </div>
-    </dialog>
+    </DialogShell>
   );
 }
 

package/src/mcp-server/McpServerDetailView.tsx

@@ -36,6 +36,7 @@ import { OAuthAppForm } from "./OAuthAppForm.js";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { ErrorMessage } from "../error/ErrorMessage.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { DialogShell } from "../internal/DialogShell.js";
 import { EnvVarForm } from "../environment/EnvVarForm.js";
 import type { EnvVarFormVariable } from "../environment/EnvVarForm.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
@@ -282,7 +283,6 @@ export function McpServerDetailView({
   const [showCredentialForm, setShowCredentialForm] = useState(defaultShowCredentialForm);
   const [showByoaForm, setShowByoaForm] = useState(false);
   const [capabilityTab, setCapabilityTab] = useState<CapabilityTab>(defaultCapabilityTab);
-  const byoaDialogRef = useRef<HTMLDialogElement>(null);
 
   const onResourceLoadRef = useRef(onResourceLoad);
   onResourceLoadRef.current = onResourceLoad;
@@ -388,20 +388,9 @@ export function McpServerDetailView({
     }
   }, [mcpServer, disconnectOAuth, credentials, refetch, activeOrg, org]);
 
-  // BYOA dialog lifecycle — native <dialog> toggle
-  useEffect(() => {
-    const dialog = byoaDialogRef.current;
-    if (!dialog) return;
-    if (showByoaForm && !dialog.open) {
-      dialog.showModal();
-    } else if (!showByoaForm && dialog.open) {
-      dialog.close();
-    }
-  }, [showByoaForm]);
-
-  const handleByoaDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
+  const handleByoaOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen) return;
       setShowByoaForm(false);
       orgOAuthApp.clearErrors();
     },
@@ -706,14 +695,13 @@ export function McpServerDetailView({
         )}
       </Section>
 
-      {/* BYOA dialog — native <dialog> for zero-dependency modal behavior */}
-      <dialog
-        ref={byoaDialogRef}
-        onCancel={handleByoaDialogCancel}
-        className={cn(
-          "stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-background stg:p-6 stg:shadow-lg",
-          "stg:backdrop:bg-backdrop",
-        )}
+      {/* BYOA dialog */}
+      <DialogShell
+        open={showByoaForm}
+        onOpenChange={handleByoaOpenChange}
+        width="md"
+        className="stg:p-6"
+        aria-label="Use your own OAuth app"
       >
         <h3 className="stg:mb-4 stg:text-base stg:font-semibold stg:text-foreground">
           Use your own OAuth app
@@ -729,7 +717,7 @@ export function McpServerDetailView({
           isSubmitting={orgOAuthApp.isSetting}
           error={orgOAuthApp.setError}
         />
-      </dialog>
+      </DialogShell>
 
       <Section title="Capabilities" scrollTarget="mcp-capabilities">
         <Tabs

package/src/mcp-server/steps/IdentityTransportStep.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useId } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../../internal/element-resets.js";
 import { generateSlug } from "../../internal/slug.js";
 import type { McpServerWizardData, KeyValueEntry } from "./types.js";
 
@@ -179,7 +180,7 @@ export function IdentityTransportStep({
           />
         </div>
 
-        <fieldset className="stg:space-y-1.5">
+        <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-1.5")}>
           <legend className="stg:text-sm stg:font-medium stg:text-foreground">
             Visibility
           </legend>
@@ -204,7 +205,7 @@ export function IdentityTransportStep({
 
       {/* data-scroll-target: guided tours/demos scroll the transport config
           (the step's decision point) into view within the wizard's scroll area. */}
-      <fieldset className="stg:space-y-3" data-scroll-target="mcp-transport">
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-3")} data-scroll-target="mcp-transport">
         <legend className="stg:text-sm stg:font-medium stg:text-foreground">
           Transport <span className="stg:text-destructive">*</span>
         </legend>

package/src/platform-client/CreatePlatformClientForm.tsx

@@ -2,6 +2,7 @@
 
 import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import type { PlatformClientCreateResponse } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/io_pb";
@@ -167,7 +168,7 @@ export function CreatePlatformClientForm({
       />
 
       {/* Expiry */}
-      <fieldset className="stg:space-y-2" disabled={isCreating}>
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2")} disabled={isCreating}>
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Expiry
         </legend>
@@ -202,7 +203,7 @@ export function CreatePlatformClientForm({
       </fieldset>
 
       {/* JIT provisioning */}
-      <fieldset className="stg:space-y-2.5" disabled={isCreating}>
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2.5")} disabled={isCreating}>
         <hr className="stg:border-border-muted" />
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           JIT provisioning
@@ -263,7 +264,7 @@ export function CreatePlatformClientForm({
       </fieldset>
 
       {/* Allowed origins */}
-      <fieldset className="stg:space-y-2" disabled={isCreating}>
+      <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2")} disabled={isCreating}>
         <hr className="stg:border-border-muted" />
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Allowed origins

package/src/platform-client/PlatformClientDetailPanel.tsx

@@ -2,6 +2,7 @@
 
 import { type FormEvent, type KeyboardEvent, useCallback, useId, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { getUserMessage } from "@stigmer/sdk";
 import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
 import { timestampDate, type Timestamp } from "@bufbuild/protobuf/wkt";
@@ -302,7 +303,7 @@ export function PlatformClientDetailPanel({
           </div>
 
           {/* Expiry */}
-          <fieldset className="stg:space-y-2" disabled={isUpdating}>
+          <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2")} disabled={isUpdating}>
             <legend className="stg:text-xs stg:font-medium stg:text-foreground">
               Expiry
             </legend>
@@ -337,7 +338,7 @@ export function PlatformClientDetailPanel({
           </fieldset>
 
           {/* JIT provisioning */}
-          <fieldset className="stg:space-y-2.5" disabled={isUpdating}>
+          <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2.5")} disabled={isUpdating}>
             <hr className="stg:border-border-muted" />
             <legend className="stg:text-xs stg:font-medium stg:text-foreground">
               JIT provisioning
@@ -393,7 +394,7 @@ export function PlatformClientDetailPanel({
           </fieldset>
 
           {/* Allowed origins */}
-          <fieldset className="stg:space-y-2" disabled={isUpdating}>
+          <fieldset className={cn(UNSTYLED_FIELDSET, "stg:space-y-2")} disabled={isUpdating}>
             <hr className="stg:border-border-muted" />
             <legend className="stg:text-xs stg:font-medium stg:text-foreground">
               Allowed origins

package/src/pricing-governance/BaselineEditor.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useState, type FormEvent } from "react";
+import { UNSTYLED_FIELDSET } from "../internal/element-resets.js";
 import { create } from "@bufbuild/protobuf";
 import { getUserMessage } from "@stigmer/sdk";
 import {
@@ -546,7 +547,7 @@ export function BaselineEditor({
         Featured (appears in the curated default picker list)
       </label>
 
-      <fieldset className="stg:space-y-2">
+      <fieldset className={`${UNSTYLED_FIELDSET} stg:space-y-2`}>
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">
           Rates ($ per million tokens)
         </legend>
@@ -565,7 +566,7 @@ export function BaselineEditor({
         </div>
       </fieldset>
 
-      <fieldset className="stg:space-y-2">
+      <fieldset className={`${UNSTYLED_FIELDSET} stg:space-y-2`}>
         <legend className="stg:text-xs stg:font-medium stg:text-foreground">Pricing variants</legend>
         {form.variants.map((variant, index) => (
           <div key={index} className="stg:space-y-2 stg:rounded-md stg:border stg:border-border-muted stg:px-2.5 stg:py-2">

package/src/pricing-governance/PricingGovernanceConsole.tsx

@@ -11,6 +11,7 @@ import { RetireConfirm } from "./RetireConfirm.js";
 import { ModelGovernanceDetail } from "./ModelGovernanceDetail.js";
 import { OperatorAccessNotice } from "./OperatorAccessNotice.js";
 import { GovernanceBadge, PendingOverrideCard, RateCell } from "./governance-primitives.js";
+import { UNSTYLED_LIST } from "../internal/element-resets.js";
 import { INPUT_CLASSES } from "../internal/form-primitives.js";
 import { TruncatedText } from "../internal/truncated-text.js";
 import { ZERO } from "./pricing-format.js";
@@ -328,7 +329,7 @@ function ModelsTab({
               : "The catalog is empty — has the baseline seed migration run?"}
           </p>
         ) : (
-          <ul role="list" aria-label="Models" className="stg:m-0 stg:list-none stg:p-0">
+          <ul role="list" aria-label="Models" className={UNSTYLED_LIST}>
             {view.models.map((row) => (
               <ModelRow key={row.key} row={row} onOpen={() => view.openDetail(row.key)} />
             ))}

package/src/provider-standing/ProviderStandingAccessNotice.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/**
+ * The access-denied state for the provider-standing operator surface.
+ * Server-side authorization (`can_view_provider_standing` on
+ * `platform:stigmer`) is the real gate — this is the honest, designed
+ * face of that denial for anyone who navigates to the operator route
+ * without the permission, instead of a raw RPC error string.
+ */
+export function ProviderStandingAccessNotice({
+  className,
+}: {
+  readonly className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center",
+        className,
+      )}
+      role="status"
+    >
+      <p className="stg:text-xs stg:font-semibold stg:text-foreground">
+        Platform operator access required
+      </p>
+      <p className="stg:mx-auto stg:mt-1 stg:max-w-md stg:text-xs stg:text-muted-foreground">
+        Provider standing reports the health of the platform&apos;s own LLM
+        provider accounts, which is Stigmer-internal. It needs the platform
+        operator role — organization roles do not grant it. If you believe
+        you should have access, contact a platform operator.
+      </p>
+    </div>
+  );
+}

package/src/provider-standing/ProviderStandingConsole.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+import { getUserMessage, isPermissionDenied } from "@stigmer/sdk";
+import type { Timestamp } from "@bufbuild/protobuf/wkt";
+import type { ProviderStandingEntry } from "@stigmer/protos/ai/stigmer/platform/providerstanding/v1/io_pb";
+import { Button } from "../button/index.js";
+import { ProviderStandingAccessNotice } from "./ProviderStandingAccessNotice.js";
+import { useProviderStanding } from "./useProviderStanding.js";
+
+/** Props for {@link ProviderStandingConsole}. */
+export interface ProviderStandingConsoleProps {
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+// BigInt literals (0n) require an ES2020 target, which not every consuming
+// app's tsconfig guarantees — the constructor form is target-agnostic (the
+// cursor-account-format precedent).
+const ZERO = BigInt(0);
+
+/**
+ * A probe verdict older than this is flagged stale — the probe-silence
+ * alert's UI twin: the probe runs hourly and the alert fires at 3h (the
+ * 60m interval plus generous grace), so the console goes amber on the
+ * same clock operators are paged on.
+ */
+const STALE_AFTER_MS = 3 * 60 * 60 * 1000;
+
+/**
+ * Display metadata for the probe's closed status vocabulary (the
+ * lowercase labels StandingStatus persists). An unknown future label
+ * degrades to a muted badge showing the raw label — the wire contract is
+ * a string precisely so consoles never fail to decode a new status.
+ */
+const STATUS_DISPLAY: Record<string, { label: string; tone: "ok" | "warn" | "muted" }> = {
+  healthy: { label: "Healthy", tone: "ok" },
+  platform_billing: { label: "Billing rejected", tone: "warn" },
+  platform_auth: { label: "Auth rejected", tone: "warn" },
+  unclassified_error: { label: "Erroring", tone: "warn" },
+  unreachable: { label: "Unreachable", tone: "warn" },
+  not_configured: { label: "Not configured", tone: "muted" },
+};
+
+/**
+ * The platform-operator console page for provider standing: one card per
+ * platform LLM provider account with the latest canary-probe verdict —
+ * status, round-trip latency, upstream HTTP status, a bounded error
+ * summary, and when the probe last ran (flagged when stale).
+ *
+ * Read-only by design: the detection core (hourly probe, standing store,
+ * degraded/silence alerts) lives server-side; this surface only makes it
+ * visible where operators already look. Requires
+ * `can_view_provider_standing` on `platform:stigmer` — non-operators see
+ * the designed access notice.
+ *
+ * @example
+ * ```tsx
+ * <ProviderStandingConsole />
+ * ```
+ */
+export function ProviderStandingConsole({ className }: ProviderStandingConsoleProps) {
+  const { standing, isLoading, isRefetching, error, refetch } = useProviderStanding();
+
+  if (isLoading) {
+    return (
+      <div className={cn("stg:space-y-2", className)} aria-busy="true">
+        <div className="stg:h-4 stg:w-40 stg:animate-pulse stg:rounded stg:bg-muted-subtle" />
+        {Array.from({ length: 2 }, (_, i) => (
+          <div key={i} className="stg:h-16 stg:animate-pulse stg:rounded-lg stg:bg-muted-subtle" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    // A non-operator landing here is expected (the route is reachable by
+    // URL) — show the designed access notice, not a raw RPC error.
+    if (isPermissionDenied(error)) {
+      return <ProviderStandingAccessNotice className={className} />;
+    }
+    return (
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
+        {getUserMessage(error)}
+      </p>
+    );
+  }
+
+  const providers = standing?.providers ?? [];
+
+  return (
+    <div className={cn("stg:space-y-3", className)}>
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <p className="stg:text-xs stg:text-muted-foreground">
+          Latest canary verdict per platform provider account, probed hourly.
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={refetch}
+          disabled={isRefetching}
+        >
+          {isRefetching ? "Refreshing…" : "Refresh"}
+        </Button>
+      </div>
+
+      {providers.length === 0 ? (
+        <p className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-6 stg:text-center stg:text-xs stg:text-muted-foreground">
+          No probe verdicts recorded yet — the standing probe has not
+          completed a pass since this deployment came up.
+        </p>
+      ) : (
+        <ul className="stg:m-0 stg:grid stg:list-none stg:gap-2 stg:p-0 sm:stg:grid-cols-2">
+          {providers.map((entry) => (
+            <StandingCard key={entry.provider} entry={entry} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function StandingCard({ entry }: { readonly entry: ProviderStandingEntry }) {
+  const display = STATUS_DISPLAY[entry.status] ?? {
+    label: entry.status || "unknown",
+    tone: "muted" as const,
+  };
+  const stale = isStale(entry.checkedAt);
+
+  return (
+    <li className="stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-3">
+      <div className="stg:flex stg:items-center stg:justify-between stg:gap-2">
+        <span className="stg:text-sm stg:font-semibold stg:capitalize stg:text-foreground">
+          {entry.provider}
+        </span>
+        <StatusBadge tone={display.tone} label={display.label} />
+      </div>
+
+      <dl className="stg:mt-2 stg:flex stg:flex-wrap stg:gap-x-4 stg:gap-y-1 stg:text-xs stg:text-muted-foreground">
+        {entry.latencyMs > ZERO && (
+          <div className="stg:flex stg:gap-1">
+            <dt>Latency</dt>
+            <dd className="stg:m-0 stg:text-foreground">{`${entry.latencyMs}ms`}</dd>
+          </div>
+        )}
+        {entry.httpStatus > 0 && (
+          <div className="stg:flex stg:gap-1">
+            <dt>HTTP</dt>
+            <dd className="stg:m-0 stg:text-foreground">{entry.httpStatus}</dd>
+          </div>
+        )}
+        <div className="stg:flex stg:gap-1">
+          <dt>Probed</dt>
+          <dd
+            className={cn(
+              "stg:m-0",
+              stale ? "stg:font-medium stg:text-destructive" : "stg:text-foreground",
+            )}
+          >
+            {formatProbeTime(entry.checkedAt)}
+            {stale ? " — stale" : ""}
+          </dd>
+        </div>
+      </dl>
+
+      {entry.errorSummary && (
+        <p className="stg:mt-2 stg:break-words stg:rounded stg:bg-muted-subtle stg:px-2 stg:py-1 stg:text-[11px] stg:text-muted-foreground">
+          {entry.errorSummary}
+        </p>
+      )}
+    </li>
+  );
+}
+
+/**
+ * Small tonal status badge — the cursor-accounts StateBadge shape, local
+ * to this module (the two operator surfaces evolve independently).
+ */
+function StatusBadge({
+  tone,
+  label,
+}: {
+  readonly tone: "ok" | "warn" | "muted";
+  readonly label: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "stg:inline-block stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium",
+        tone === "ok" && "stg:bg-accent stg:text-primary",
+        tone === "warn" && "stg:bg-muted-subtle stg:text-destructive",
+        tone === "muted" && "stg:bg-muted-subtle stg:text-muted-foreground",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function isStale(ts: Timestamp | undefined): boolean {
+  if (!ts || ts.seconds === ZERO) return true;
+  return Date.now() - Number(ts.seconds) * 1000 > STALE_AFTER_MS;
+}
+
+/** Proto Timestamp to a compact local date-time (e.g. "Jul 22, 14:05"). */
+function formatProbeTime(ts: Timestamp | undefined): string {
+  if (!ts || ts.seconds === ZERO) {
+    return "never";
+  }
+  return new Date(Number(ts.seconds) * 1000).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}