@checkstack/script-packages-frontend 0.3.13 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @checkstack/script-packages-frontend
 
+## 0.4.0
+
+### Minor Changes
+
+- 8cad340: Make data-dense tables mobile-friendly and align status colors with semantic tokens.
+
+  - Migrated the remaining data-dense tables to the `ResponsiveTable` + `MobileCardList` dual-layout: catalog (Systems/Groups/Environments), incident config, maintenance config + system history, announcement management, notification delivery attempts, plugin manager (installed plugins + events), satellite list, automation list, healthcheck runs, OAuth applications, and the queue runtime panel. On viewports below `sm` these now render stacked cards surfacing the high-priority fields instead of an overflowing table. Genuinely narrow or runtime-diagnostic panels (cache runtime, healthcheck history, anomaly mute list) were intentionally left as plain tables.
+  - Swapped hardcoded semantic status colors for design tokens (`text-warning`, `text-success`, `text-destructive`, `text-muted-foreground`) in GitOps provenance status, healthcheck editor warnings, dependency canvas node status, automation run-step status, queue runtime tone map, and script-packages settings. Chart-series literals, syntax/terminal palettes, and intentional brand accents (tips lightbulb, SLO streak flame ramp) were left untouched.
+  - Extracted pure display/validation logic into sibling `.logic.ts` modules (SLO display + editor, maintenance editor + config summary, dependency display, incident sort + validation, gitops kind-registry YAML) so it can be unit-tested in isolation. These extractions are behavior-preserving.
+
+- 8cad340: Standardize number/byte/relative-time formatting and unify loading/empty/error
+  states across the queue, cache, script-packages, and pluginmanager admin
+  surfaces.
+
+  Byte sizes now route through the shared `formatBytes` helper from
+  `@checkstack/ui` with a single binary (KiB/MiB/GiB) convention, so cache,
+  script-packages, and pluginmanager no longer disagree on units. Number counts
+  use the shared `formatNumber`, and the queue runtime panel's job "ago" times use
+  the shared `formatRelativeTime` (date-fns) instead of hand-rolled math.
+
+  The queue runtime panel's job listing now renders failed loads via the shared
+  `QueryErrorState` (with a Retry button) and empty listings via the shared
+  `EmptyState`, replacing bare inline text. Error-bearing toasts on plugin
+  install/uninstall now use the canonical `toastError`/`toastSuccess` helpers.
+
+  These are presentation-only changes; the underlying values and the labels /
+  column headers / empty-state copy that the panels render are unchanged.
+
+- 8cad340: Improve sidebar navigation and information architecture:
+
+  - Split the overloaded "Configuration" group into focused sections: "Settings"
+    (Auth Settings, Teams, Secrets, Notification Settings), "Platform" (Plugins,
+    GitOps, Integrations, Infrastructure), and "Developer" (Script Packages,
+    Script Sandbox).
+  - Unify nav active-state on a single shared `isNavRouteActive` helper so the
+    sidebar rail and the shared `NavItem` both prefix-match section roots
+    (child/detail routes now highlight the parent entry consistently).
+  - Mark the external Docs entry with an external-link icon so it is clear which
+    entries leave the app.
+  - Add an "Expand all" affordance to recover from a fully-collapsed sidebar.
+  - Flatten single-entry groups (e.g. Automation) into top-level items, skipping
+    the redundant group header.
+  - Add an in-drawer search entry to the mobile navigation (opens the Cmd+K
+    palette) and auto-expand the group containing the active route when the
+    drawer opens.
+
+### Patch Changes
+
+- 8cad340: Design-system rework: a premium, consistent UI language across the platform.
+
+  Foundation (`@checkstack/ui` + the shared Tailwind preset):
+
+  - A token system wired into the shared preset so it generates app-wide: a
+    surface elevation ramp (`surface` / `surface-2` / `surface-inset`), the
+    aurora gradient stops, a colorblind-safe `status` triad, and `grid-line`.
+  - A density model (`comfortable` / `compact`) via `--d-*` vars + `DensityProvider`
+    / `useDensity`, with a user-menu density toggle, plus the polished
+    skeleton / empty / error state set.
+  - Honest, token-driven chart primitives (`TimeSeriesChart`, `Sparkline`,
+    `RadialGauge` / aurora hero, `RequestWaterfall`, `UptimeRibbon`).
+  - A signature aurora moment per page: `PageHeader` paints its icon strokes with
+    the aurora gradient and adds a hairline; `Card` gains soft layered depth.
+
+  Shell + surfaces:
+
+  - The app shell adopts the elevation ramp (header `surface-2`, sidebar
+    `surface`, content on the ambient base).
+  - The system-health dashboard, health-check latency / single-run views, and the
+    SLO dashboard are reskinned onto the primitives (aurora confidence gauge,
+    honest p50/p95 latency, request waterfall, number-led status cards).
+
+  App-wide adoption + premium rework:
+
+  - Every plugin frontend adopts the tokens, status triad, density, and elevation.
+  - The highest-impact surfaces in each plugin are then redesigned to a premium
+    bar: real depth, number-led hierarchy, multi-encoded status (pill + dot +
+    accent stripe), and refined list/table density. Several plugins extract pure
+    tone/label/format logic into unit-tested modules.
+
+  Alerts:
+
+  - Every alert/callout is unified onto a single premium `Alert` (depth surface +
+    status-accent stripe + toned icon chip, variant-driven).
+
+  BREAKING CHANGE: the duplicate `InfoBanner` component (and its sub-components)
+  is removed; use `Alert` instead - it is a drop-in replacement with the same
+  variants and composable parts.
+
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+- Updated dependencies [8cad340]
+  - @checkstack/ui@1.17.0
+  - @checkstack/common@0.17.0
+  - @checkstack/frontend-api@0.11.1
+  - @checkstack/sdk@0.112.1
+  - @checkstack/script-packages-common@0.3.5
+  - @checkstack/signal-frontend@0.2.6
+
 ## 0.3.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/script-packages-frontend",
-  "version": "0.3.13",
+  "version": "0.4.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,12 +22,12 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@checkstack/common": "0.16.0",
-    "@checkstack/frontend-api": "0.11.0",
-    "@checkstack/sdk": "0.109.1",
-    "@checkstack/script-packages-common": "0.3.4",
-    "@checkstack/signal-frontend": "0.2.5",
-    "@checkstack/ui": "1.16.2",
+    "@checkstack/common": "0.17.0",
+    "@checkstack/frontend-api": "0.11.1",
+    "@checkstack/sdk": "0.112.1",
+    "@checkstack/script-packages-common": "0.3.5",
+    "@checkstack/signal-frontend": "0.2.6",
+    "@checkstack/ui": "1.17.0",
     "lucide-react": "^1.17.0",
     "react": "19.2.7",
     "react-router-dom": "^7.16.0"
@@ -36,6 +36,6 @@
     "@types/react": "^19.0.0",
     "typescript": "^5.7.2",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.6.2"
+    "@checkstack/scripts": "0.6.3"
   }
 }

package/src/components/PackageVersionCombobox.tsx

@@ -149,7 +149,7 @@ export const PackageVersionCombobox: React.FC<PackageVersionComboboxProps> = ({
                   {tags.map((tag) => (
                     <span
                       key={tag}
-                      className="flex shrink-0 items-center gap-0.5 rounded bg-muted px-1 text-[10px] text-muted-foreground"
+                      className="flex shrink-0 items-center gap-0.5 rounded bg-surface-inset px-1 text-[10px] text-muted-foreground"
                     >
                       <Tag className="h-2.5 w-2.5" />
                       {tag}

package/src/components/StatusPill.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "@checkstack/ui";
+import { toneStyles, type StatusTone } from "../pages/status-display";
+
+/**
+ * A colorblind-safe status pill from the design-system triad: a leading dot
+ * plus a text label so status is multi-encoded, never hue-alone.
+ */
+export const StatusPill: React.FC<{ tone: StatusTone; label: string }> = ({
+  tone,
+  label,
+}) => {
+  const style = toneStyles[tone];
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+        style.pill,
+      )}
+    >
+      <span className={cn("size-1.5 rounded-full", style.dot)} aria-hidden />
+      {label}
+    </span>
+  );
+};

package/src/components/SummaryPanel.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { cn } from "@checkstack/ui";
+import { toneStyles, type StatusTone } from "../pages/status-display";
+
+/**
+ * A premium number-led summary panel: the slo-card depth treatment (gradient
+ * surface, layered shadow, soft border, density tokens) with a left accent
+ * stripe driven by the status triad. Leads with a single hero figure, then a
+ * caption, then a right-aligned cluster (status pill + action) and optional
+ * metadata / footer rows.
+ *
+ * Visual only - it owns no domain logic; callers pass already-formatted text.
+ */
+export interface SummaryPanelProps {
+  /** Status triad tone driving the left accent stripe. */
+  tone: StatusTone;
+  /** Optional leading glyph next to the title. */
+  icon?: React.ReactNode;
+  /** Section title, e.g. "Install state". */
+  title: string;
+  /** The single most important figure, rendered as the hero. */
+  hero: React.ReactNode;
+  /** Small caption beneath the hero, e.g. "installed size". */
+  caption: string;
+  /** Recolors the hero figure (e.g. status-warn when over a threshold). */
+  heroToneClass?: string;
+  /** Top-right cluster: status pill, action button, etc. */
+  trailing?: React.ReactNode;
+  /** Secondary metadata row (e.g. per-severity pills, last-run badge). */
+  meta?: React.ReactNode;
+  /** Footer content (explanatory copy, threshold notes, lists). */
+  children?: React.ReactNode;
+}
+
+export const SummaryPanel: React.FC<SummaryPanelProps> = ({
+  tone,
+  icon,
+  title,
+  hero,
+  caption,
+  heroToneClass,
+  trailing,
+  meta,
+  children,
+}) => {
+  const accent = toneStyles[tone].accent;
+  return (
+    <div className="group relative overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface p-[var(--d-pad)] shadow-[0_1px_2px_hsl(var(--foreground)/0.04),0_10px_30px_-14px_hsl(var(--foreground)/0.12)] transition-all duration-200 hover:border-border">
+      {/* Status accent stripe: status by position + hue, not color alone. */}
+      <span
+        className={cn("absolute inset-y-0 left-0 w-1", accent)}
+        aria-hidden
+      />
+
+      <div className="flex items-start justify-between gap-3 pl-2">
+        <h3 className="flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground">
+          {icon}
+          {title}
+        </h3>
+        {trailing && (
+          <div className="flex shrink-0 items-center gap-2">{trailing}</div>
+        )}
+      </div>
+
+      <div className="mt-4 pl-2">
+        <p
+          className={cn(
+            "text-3xl font-bold leading-none tabular-nums",
+            heroToneClass ?? "text-foreground",
+          )}
+        >
+          {hero}
+        </p>
+        <p className="mt-1 text-xs text-muted-foreground">{caption}</p>
+      </div>
+
+      {meta && (
+        <div className="mt-3 flex flex-wrap items-center gap-2 pl-2">{meta}</div>
+      )}
+
+      {children && <div className="mt-3 pl-2">{children}</div>}
+    </div>
+  );
+};

package/src/components/SurfaceList.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { cn } from "@checkstack/ui";
+
+/**
+ * A premium elevated list surface: one rounded gradient container with a soft
+ * border and low-contrast dividers, so a set of rows reads as a single
+ * cohesive surface rather than bare divider lines. Rows are supplied as
+ * children and should use `SurfaceListRow` for consistent hover + density.
+ */
+export const SurfaceList: React.FC<{
+  className?: string;
+  children: React.ReactNode;
+}> = ({ className, children }) => (
+  <ul
+    className={cn(
+      "divide-y divide-border/60 overflow-hidden rounded-[var(--d-card-r)] border border-border/70 bg-gradient-to-b from-surface-2 to-surface",
+      className,
+    )}
+  >
+    {children}
+  </ul>
+);
+
+/**
+ * A single row inside a `SurfaceList`: density-token padding, a refined hover
+ * affordance, and a comfortable leading/trailing rhythm.
+ */
+export const SurfaceListRow: React.FC<{
+  className?: string;
+  children: React.ReactNode;
+}> = ({ className, children }) => (
+  <li
+    className={cn(
+      "flex items-center justify-between gap-3 px-[var(--d-pad)] py-2.5 transition-colors hover:bg-surface-inset",
+      className,
+    )}
+  >
+    {children}
+  </li>
+);

package/src/index.tsx

@@ -34,7 +34,7 @@ export default createFrontendPlugin({
       title: "Script packages",
       accessRule: scriptPackagesAccess.manage,
       nav: {
-        group: "Configuration",
+        group: "Developer",
         icon: Package,
         label: "Script Packages",
       },
@@ -48,7 +48,7 @@ export default createFrontendPlugin({
       title: "Script sandbox",
       accessRule: scriptSandboxAccess.manage,
       nav: {
-        group: "Configuration",
+        group: "Developer",
         icon: ShieldCheck,
         label: "Script Sandbox",
       },

package/src/pages/ScriptPackagesSettingsPage.tsx

@@ -20,7 +20,6 @@ import {
   scriptPackagesAccess,
   PackageVersionSchema,
   SCRIPT_PACKAGES_AUDIT_COMPLETED_SIGNAL,
-  type AuditSeverity,
 } from "@checkstack/script-packages-common";
 import { PackageNameCombobox } from "../components/PackageNameCombobox";
 import { PackageVersionCombobox } from "../components/PackageVersionCombobox";
@@ -28,6 +27,9 @@ import {
   applyLatestDistTag,
   versionFromHit,
 } from "../components/version-autofill";
+import { StatusPill } from "../components/StatusPill";
+import { SummaryPanel } from "../components/SummaryPanel";
+import { SurfaceList, SurfaceListRow } from "../components/SurfaceList";
 import {
   PageLayout,
   Card,
@@ -57,27 +59,22 @@ import {
   usePerformance,
   useInitOnceForKey,
   cn,
+  formatBytes,
 } from "@checkstack/ui";
 import { extractErrorMessage } from "@checkstack/common";
-
-function mb(bytes: number): string {
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
+import {
+  auditPostureTone,
+  installStatusTone,
+  satelliteStatusTone,
+  severityTone,
+  toneStyles,
+} from "./status-display";
 
 /** MB (UI unit) → bytes (the size-cap schema unit). */
 function mbToBytes(value: number): number {
   return Math.round(value * 1024 * 1024);
 }
 
-/** Badge variant for an advisory severity. */
-function severityVariant(
-  severity: AuditSeverity,
-): "destructive" | "secondary" {
-  return severity === "critical" || severity === "high"
-    ? "destructive"
-    : "secondary";
-}
-
 const SettingsContent: React.FC = () => {
   const client = usePluginClient(ScriptPackagesApi);
   const accessApi = useApi(accessApiRef);
@@ -319,6 +316,10 @@ const SettingsContent: React.FC = () => {
   const audit = auditQuery.data;
   const auditAdvisories = audit?.advisories ?? [];
   const auditState = audit?.state;
+  const auditTone = auditPostureTone({
+    total: auditAdvisories.length,
+    counts: auditState?.counts,
+  });
   const availableBackends = backendsQuery.data?.backends ?? [];
   const migrating = storage?.migrationStatus === "migrating";
   const migrationTargets = availableBackends.filter(
@@ -336,56 +337,73 @@ const SettingsContent: React.FC = () => {
       )}
 
       {/* Install state */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-base">Install state</CardTitle>
-          <Button
-            type="button"
-            size="sm"
-            onClick={handleInstall}
-            disabled={installMutation.isPending || installState?.status === "installing"}
-          >
-            <Download className="h-4 w-4" />
-            {installState?.status === "installing" ? "Installing…" : "Install now"}
-          </Button>
-        </CardHeader>
-        <CardContent className="space-y-2 text-sm">
-          <div className="flex items-center gap-2">
-            <span className="text-muted-foreground">Status:</span>
-            <Badge variant={installState?.status === "error" ? "destructive" : "secondary"}>
-              {installState?.status ?? "unknown"}
-            </Badge>
-            {installState?.totalSizeBytes !== undefined && (
-              <Badge variant={overWarn ? "destructive" : "secondary"}>
-                {mb(installState.totalSizeBytes)}
-              </Badge>
+      <SummaryPanel
+        tone={installStatusTone(installState?.status)}
+        title="Install state"
+        hero={
+          installState?.totalSizeBytes === undefined
+            ? "—"
+            : formatBytes(installState.totalSizeBytes)
+        }
+        heroToneClass={overWarn ? "text-status-warn" : undefined}
+        caption="installed size"
+        trailing={
+          <>
+            <StatusPill
+              tone={installStatusTone(installState?.status)}
+              label={installState?.status ?? "unknown"}
+            />
+            <Button
+              type="button"
+              size="sm"
+              onClick={handleInstall}
+              disabled={
+                installMutation.isPending ||
+                installState?.status === "installing"
+              }
+            >
+              <Download className="h-4 w-4" />
+              {installState?.status === "installing"
+                ? "Installing…"
+                : "Install now"}
+            </Button>
+          </>
+        }
+      >
+        {(installState?.errorMessage || (overWarn && sizeCap)) && (
+          <div className="space-y-1">
+            {installState?.errorMessage && (
+              <p className="text-xs text-status-down">
+                {installState.errorMessage}
+              </p>
+            )}
+            {overWarn && sizeCap && (
+              <p className="text-xs text-muted-foreground">
+                Resolved size exceeds the {formatBytes(sizeCap.warnBytes)}{" "}
+                warning threshold.
+              </p>
             )}
           </div>
-          {installState?.errorMessage && (
-            <p className="text-destructive text-xs">{installState.errorMessage}</p>
-          )}
-          {overWarn && sizeCap && (
-            <p className="text-xs text-amber-600">
-              Resolved size exceeds the {mb(sizeCap.warnBytes)} warning threshold.
-            </p>
-          )}
-        </CardContent>
-      </Card>
+        )}
+      </SummaryPanel>
 
       {/* Vulnerability audit */}
-      <Card>
-        <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-base flex items-center gap-2">
-            {auditAdvisories.length > 0 ? (
-              <ShieldAlert className="h-4 w-4 text-destructive" />
-            ) : (
-              <ShieldCheck className="h-4 w-4 text-emerald-600" />
-            )}
-            Vulnerability audit
-            {auditAdvisories.length > 0 && (
-              <Badge variant="destructive">{auditAdvisories.length}</Badge>
-            )}
-          </CardTitle>
+      <SummaryPanel
+        tone={auditTone}
+        icon={
+          auditAdvisories.length > 0 ? (
+            <ShieldAlert className="h-4 w-4 text-status-down" />
+          ) : (
+            <ShieldCheck className="h-4 w-4 text-status-ok" />
+          )
+        }
+        title="Vulnerability audit"
+        hero={String(auditAdvisories.length)}
+        heroToneClass={
+          auditAdvisories.length === 0 ? toneStyles.ok.text : undefined
+        }
+        caption={auditAdvisories.length === 0 ? "clean" : "open advisories"}
+        trailing={
           <Button
             type="button"
             size="sm"
@@ -401,15 +419,10 @@ const SettingsContent: React.FC = () => {
             />
             {auditMutation.isPending ? "Auditing…" : "Audit now"}
           </Button>
-        </CardHeader>
-        <CardContent className="space-y-3 text-sm">
-          <p className="text-xs text-muted-foreground">
-            Runs <code>bun audit</code> against the installed package tree once
-            a day and notifies managers when a new vulnerability appears.
-            Findings below cover every severity.
-          </p>
-          <div className="flex flex-wrap items-center gap-2">
-            <span className="text-muted-foreground">Last run:</span>
+        }
+        meta={
+          <>
+            <span className="text-xs text-muted-foreground">Last run:</span>
             <Badge variant="secondary">
               {auditState?.lastRunAt
                 ? new Date(auditState.lastRunAt).toLocaleString()
@@ -418,30 +431,39 @@ const SettingsContent: React.FC = () => {
             {auditState && auditState.total > 0 && (
               <>
                 {auditState.counts.critical > 0 && (
-                  <Badge variant="destructive">
-                    {auditState.counts.critical} critical
-                  </Badge>
+                  <StatusPill
+                    tone="down"
+                    label={`${auditState.counts.critical} critical`}
+                  />
                 )}
                 {auditState.counts.high > 0 && (
-                  <Badge variant="destructive">
-                    {auditState.counts.high} high
-                  </Badge>
+                  <StatusPill
+                    tone="down"
+                    label={`${auditState.counts.high} high`}
+                  />
                 )}
                 {auditState.counts.moderate > 0 && (
-                  <Badge variant="secondary">
-                    {auditState.counts.moderate} moderate
-                  </Badge>
+                  <StatusPill
+                    tone="warn"
+                    label={`${auditState.counts.moderate} moderate`}
+                  />
                 )}
                 {auditState.counts.low > 0 && (
-                  <Badge variant="secondary">
-                    {auditState.counts.low} low
-                  </Badge>
+                  <Badge variant="secondary">{auditState.counts.low} low</Badge>
                 )}
               </>
             )}
-          </div>
+          </>
+        }
+      >
+        <div className="space-y-3 text-sm">
+          <p className="text-xs text-muted-foreground">
+            Runs <code>bun audit</code> against the installed package tree once a
+            day and notifies managers when a new vulnerability appears. Findings
+            below cover every severity.
+          </p>
           {auditState?.errorMessage && (
-            <p className="text-destructive text-xs">
+            <p className="text-xs text-status-down">
               Last audit failed: {auditState.errorMessage}
             </p>
           )}
@@ -450,20 +472,17 @@ const SettingsContent: React.FC = () => {
               No known vulnerabilities in the installed tree.
             </p>
           ) : (
-            <ul className="divide-y divide-border rounded-md border border-border">
+            <SurfaceList>
               {auditAdvisories.map((a) => (
-                <li
-                  key={`${a.packageName} ${a.advisoryId}`}
-                  className="flex items-center justify-between gap-3 px-3 py-2"
-                >
-                  <span className="flex flex-col gap-0.5 min-w-0">
-                    <span className="font-mono text-sm truncate">
+                <SurfaceListRow key={`${a.packageName} ${a.advisoryId}`}>
+                  <span className="flex min-w-0 flex-col gap-0.5">
+                    <span className="truncate font-mono text-sm">
                       {a.packageName}{" "}
                       <span className="text-muted-foreground">
                         {a.vulnerableVersions}
                       </span>
                     </span>
-                    <span className="text-xs text-muted-foreground truncate">
+                    <span className="truncate text-xs text-muted-foreground">
                       {a.url ? (
                         <a
                           href={a.url}
@@ -474,19 +493,20 @@ const SettingsContent: React.FC = () => {
                           {a.title || a.advisoryId}
                         </a>
                       ) : (
-                        (a.title || a.advisoryId)
+                        a.title || a.advisoryId
                       )}
                     </span>
                   </span>
-                  <Badge variant={severityVariant(a.severity)}>
-                    {a.severity}
-                  </Badge>
-                </li>
+                  <StatusPill
+                    tone={severityTone(a.severity)}
+                    label={a.severity}
+                  />
+                </SurfaceListRow>
               ))}
-            </ul>
+            </SurfaceList>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </SummaryPanel>
 
       {/* Allowlist */}
       <Card>
@@ -557,17 +577,14 @@ const SettingsContent: React.FC = () => {
               No packages yet. Add pinned, lightweight pure-JS packages.
             </p>
           ) : (
-            <ul className="divide-y divide-border rounded-md border border-border">
+            <SurfaceList>
               {packages.map((pkg) => (
-                <li
-                  key={pkg.name}
-                  className="flex items-center justify-between gap-3 px-3 py-2"
-                >
-                  <span className="flex items-center gap-2 font-mono text-sm">
-                    <Package className="h-3.5 w-3.5 text-muted-foreground" />
+                <SurfaceListRow key={pkg.name}>
+                  <span className="flex min-w-0 items-center gap-2 truncate font-mono text-sm">
+                    <Package className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                     {pkg.name}@{pkg.version}
                   </span>
-                  <div className="flex items-center gap-3">
+                  <div className="flex shrink-0 items-center gap-2">
                     <Toggle
                       checked={pkg.enabled}
                       onCheckedChange={(enabled) =>
@@ -584,9 +601,9 @@ const SettingsContent: React.FC = () => {
                       <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>
-                </li>
+                </SurfaceListRow>
               ))}
-            </ul>
+            </SurfaceList>
           )}
         </CardContent>
       </Card>
@@ -737,12 +754,12 @@ const SettingsContent: React.FC = () => {
 
                 {storage?.migrationStatus === "error" &&
                   storage.migrationError && (
-                    <p className="text-xs text-destructive">
+                    <p className="text-xs text-status-down">
                       Migration failed: {storage.migrationError}
                     </p>
                   )}
                 {storage?.migrationStatus === "completed" && (
-                  <p className="text-xs text-emerald-600">
+                  <p className="text-xs text-status-ok">
                     Migration complete. Active backend is now{" "}
                     {storage.activeBackend}.
                   </p>
@@ -864,14 +881,15 @@ const SettingsContent: React.FC = () => {
                   </Badge>
                   {blobGc && blobGc.lastRunAt && (
                     <Badge variant="secondary">
-                      {blobGc.lastDeleted} blob(s), {mb(blobGc.lastBytesReclaimed)}{" "}
-                      reclaimed
+                      {blobGc.lastDeleted} blob(s),{" "}
+                      {formatBytes(blobGc.lastBytesReclaimed)} reclaimed
                     </Badge>
                   )}
                 </div>
                 {blobGc && blobGc.totalBytesReclaimed > 0 && (
                   <div className="text-xs text-muted-foreground">
-                    Total reclaimed to date: {mb(blobGc.totalBytesReclaimed)}
+                    Total reclaimed to date:{" "}
+                    {formatBytes(blobGc.totalBytesReclaimed)}
                   </div>
                 )}
                 <Button
@@ -893,23 +911,19 @@ const SettingsContent: React.FC = () => {
                   Satellite sync
                 </AccordionTrigger>
                 <AccordionContent>
-                  <ul className="divide-y divide-border rounded-md border border-border">
+                  <SurfaceList>
                     {satellites.map((s) => (
-                      <li
-                        key={s.satelliteId}
-                        className="flex items-center justify-between px-3 py-2 text-sm"
-                      >
-                        <span className="font-mono">{s.satelliteId}</span>
-                        <Badge
-                          variant={
-                            s.status === "error" ? "destructive" : "secondary"
-                          }
-                        >
-                          {s.status}
-                        </Badge>
-                      </li>
+                      <SurfaceListRow key={s.satelliteId}>
+                        <span className="truncate font-mono text-sm">
+                          {s.satelliteId}
+                        </span>
+                        <StatusPill
+                          tone={satelliteStatusTone(s.status)}
+                          label={s.status}
+                        />
+                      </SurfaceListRow>
                     ))}
-                  </ul>
+                  </SurfaceList>
                 </AccordionContent>
               </AccordionItem>
             )}

package/src/pages/status-display.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "bun:test";
+import {
+  auditPostureTone,
+  installStatusTone,
+  satelliteStatusTone,
+  severityTone,
+} from "./status-display";
+
+describe("installStatusTone", () => {
+  it("maps known install statuses to triad tones", () => {
+    expect(installStatusTone("ready")).toBe("ok");
+    expect(installStatusTone("installing")).toBe("warn");
+    expect(installStatusTone("error")).toBe("down");
+    expect(installStatusTone("idle")).toBe("unknown");
+  });
+
+  it("falls back to unknown for undefined or unrecognized values", () => {
+    expect(installStatusTone(undefined)).toBe("unknown");
+    expect(installStatusTone("bogus")).toBe("unknown");
+  });
+});
+
+describe("satelliteStatusTone", () => {
+  it("maps known satellite sync statuses to triad tones", () => {
+    expect(satelliteStatusTone("ready")).toBe("ok");
+    expect(satelliteStatusTone("syncing")).toBe("warn");
+    expect(satelliteStatusTone("pending")).toBe("warn");
+    expect(satelliteStatusTone("error")).toBe("down");
+  });
+
+  it("falls back to unknown for unrecognized values", () => {
+    expect(satelliteStatusTone("bogus")).toBe("unknown");
+  });
+});
+
+describe("severityTone", () => {
+  it("maps advisory severities to triad tones", () => {
+    expect(severityTone("critical")).toBe("down");
+    expect(severityTone("high")).toBe("down");
+    expect(severityTone("moderate")).toBe("warn");
+    expect(severityTone("low")).toBe("ok");
+  });
+});
+
+describe("auditPostureTone", () => {
+  it("is ok when there are no open advisories", () => {
+    expect(auditPostureTone({ total: 0 })).toBe("ok");
+    expect(
+      auditPostureTone({
+        total: 0,
+        counts: { critical: 0, high: 0, moderate: 0, low: 0 },
+      }),
+    ).toBe("ok");
+  });
+
+  it("is down when any critical or high advisory is present", () => {
+    expect(
+      auditPostureTone({
+        total: 1,
+        counts: { critical: 1, high: 0, moderate: 0, low: 0 },
+      }),
+    ).toBe("down");
+    expect(
+      auditPostureTone({
+        total: 2,
+        counts: { critical: 0, high: 2, moderate: 0, low: 0 },
+      }),
+    ).toBe("down");
+  });
+
+  it("is warn when only moderate or low advisories remain", () => {
+    expect(
+      auditPostureTone({
+        total: 3,
+        counts: { critical: 0, high: 0, moderate: 1, low: 2 },
+      }),
+    ).toBe("warn");
+    expect(
+      auditPostureTone({
+        total: 1,
+        counts: { critical: 0, high: 0, moderate: 0, low: 1 },
+      }),
+    ).toBe("warn");
+  });
+
+  it("falls back to down when advisories exist without a breakdown", () => {
+    expect(auditPostureTone({ total: 5 })).toBe("down");
+  });
+});

package/src/pages/status-display.ts

@@ -0,0 +1,114 @@
+import type { AuditSeverity } from "@checkstack/script-packages-common";
+
+/**
+ * Colorblind-safe status tones from the shared design-system triad. Maps the
+ * plugin's domain status values (install state, satellite sync, advisory
+ * severity) onto `ok` / `warn` / `down` / `unknown` so every status readout is
+ * multi-encoded (hue + dot + label), never color-alone.
+ */
+export type StatusTone = "ok" | "warn" | "down" | "unknown";
+
+/**
+ * Per-tone class sets for a status pill, its leading dot, a card's left accent
+ * stripe, and the foreground color for a number-led hero figure.
+ */
+export interface ToneStyle {
+  pill: string;
+  dot: string;
+  accent: string;
+  text: string;
+}
+
+/**
+ * Full literal class strings (not interpolated) so Tailwind's JIT keeps them.
+ */
+export const toneStyles: Record<StatusTone, ToneStyle> = {
+  ok: {
+    pill: "bg-status-ok/10 text-status-ok",
+    dot: "bg-status-ok",
+    accent: "bg-status-ok",
+    text: "text-status-ok",
+  },
+  warn: {
+    pill: "bg-status-warn/10 text-status-warn",
+    dot: "bg-status-warn",
+    accent: "bg-status-warn",
+    text: "text-status-warn",
+  },
+  down: {
+    pill: "bg-status-down/10 text-status-down",
+    dot: "bg-status-down",
+    accent: "bg-status-down",
+    text: "text-status-down",
+  },
+  unknown: {
+    pill: "bg-status-unknown/10 text-status-unknown",
+    dot: "bg-status-unknown",
+    accent: "bg-status-unknown",
+    text: "text-status-unknown",
+  },
+};
+
+/** Install-state status values mapped to a triad tone. */
+const INSTALL_STATUS_TONES: Record<string, StatusTone> = {
+  ready: "ok",
+  installing: "warn",
+  error: "down",
+  idle: "unknown",
+};
+
+/** Tone for an install-state status value (the backend's `status` string). */
+export function installStatusTone(status: string | undefined): StatusTone {
+  return (status && INSTALL_STATUS_TONES[status]) || "unknown";
+}
+
+/** Satellite sync status values mapped to a triad tone. */
+const SATELLITE_STATUS_TONES: Record<string, StatusTone> = {
+  ready: "ok",
+  syncing: "warn",
+  pending: "warn",
+  error: "down",
+};
+
+/** Tone for a satellite sync status value. */
+export function satelliteStatusTone(status: string): StatusTone {
+  return SATELLITE_STATUS_TONES[status] || "unknown";
+}
+
+/** Advisory severity values mapped to a triad tone. */
+const SEVERITY_TONES: Record<AuditSeverity, StatusTone> = {
+  critical: "down",
+  high: "down",
+  moderate: "warn",
+  low: "ok",
+};
+
+/** Tone for an advisory severity. */
+export function severityTone(severity: AuditSeverity): StatusTone {
+  return SEVERITY_TONES[severity];
+}
+
+/** Per-severity advisory counts used to derive overall audit posture. */
+export interface AuditCounts {
+  critical: number;
+  high: number;
+  moderate: number;
+  low: number;
+}
+
+/**
+ * Overall vulnerability-audit posture as a triad tone:
+ * `ok` when there are no open advisories, `down` when any critical/high
+ * advisory is present, and `warn` when only moderate/low advisories remain.
+ */
+export function auditPostureTone(params: {
+  total: number;
+  counts?: AuditCounts;
+}): StatusTone {
+  const { total, counts } = params;
+  if (total <= 0) return "ok";
+  if (counts && (counts.critical > 0 || counts.high > 0)) return "down";
+  if (counts && (counts.moderate > 0 || counts.low > 0)) return "warn";
+  // Advisories exist but we have no per-severity breakdown - treat as down.
+  return "down";
+}