feat(security): reflow the node Security page for mobile (#1372)

* feat(security): reflow the node Security page for mobile Below the md breakpoint the Security page now reads as a phone surface instead of a squeezed desktop, with no change to the desktop layout. - Masthead stat cluster moves into a full-width 3-cell strip (critical / high / last scan) below the tab strip, since the masthead hides its inline cluster on a phone. - The eight-section tab strip becomes a horizontally scrollable mono row with an edge mask-fade and a cyan underline on the active tab; every section stays reachable by scroll. - The six totals render as a 3x2 hairline-divided grid instead of the 640px-wide rail that forced a horizontal scroll. - The Images tab becomes a filterable, scrollable list (severity dot, truncated ref, freshness, critical/high count tags) with a chip row, in place of the desktop table. - A freshness footer band states scan recency and scanner version. All mobile treatment is gated by useIsMobile() or max-md: utilities, so the desktop view is byte-identical. Charts are reused full-width. * feat(security): make the mobile Security page a bespoke masthead-led screen On a phone the Security page now drops the global top bar and leads with its masthead (the notifications + more-menu cluster moves into the masthead's right slot), matching Home and Fleet so the mobile shell is continuous across pages. The view is reclassified bespoke and rendered through the masthead-led path; the desktop layout is unchanged. The mobile "more" menu now lists every destination instead of omitting the bottom-tab views, so the same menu opens the same set on every screen rather than changing contents from page to page.
2026-07-28 04:38:59 +00:00 · 2026-06-14 21:28:13 -04:00
parent a5109e7916
commit 0066887cee
12 changed files with 712 additions and 96 deletions
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import { Button } from './ui/button';
 import { Plus, Loader2, ChevronLeft } from 'lucide-react';
 import { UserProfileDropdown } from './UserProfileDropdown';
@@ -52,6 +52,11 @@ import { deriveMobileSurface, type MobileView } from './EditorLayout/mobile-surf
 import { BESPOKE_MOBILE_VIEWS } from './EditorLayout/mobile-treatments';
 import type { SectionId } from './settings/types';

+// The Security page is heavy (charts, scan sheets) and already code-split on the
+// desktop content path, so the bespoke phone screen reuses the same lazy chunk
+// rather than pulling SecurityView into the main shell bundle.
+const SecurityView = lazy(() => import('./SecurityView').then(m => ({ default: m.SecurityView })));
+
 export default function EditorLayout() {
  const { isAdmin, can } = useAuth();
  const { status: trivy } = useTrivyStatus();
@@ -760,6 +765,22 @@ export default function EditorLayout() {
            return <MobileSchedules headerActions={mobileMastheadActions} />;
          case 'settings':
            return <MobileSettings headerActions={mobileMastheadActions} />;
+          case 'security':
+            return (
+              <Suspense
+                fallback={(
+                  <div className="flex h-full items-center justify-center">
+                    <Loader2 className="h-5 w-5 animate-spin text-stat-subtitle" strokeWidth={1.5} />
+                  </div>
+                )}
+              >
+                <SecurityView
+                  activeTab={securityTab}
+                  onTabChange={setSecurityTab}
+                  headerActions={mobileMastheadActions}
+                />
+              </Suspense>
+            );
          default:
            return workspaceEl;
        }
@@ -13,8 +13,8 @@ describe('mobile treatments', () => {
    }
  });

-  it('treats the Security view as responsive (reflowed, not bespoke or desktop-only)', () => {
-    expect(MOBILE_TREATMENTS.security).toBe('responsive');
+  it('treats the Security view as a bespoke masthead-led phone screen', () => {
+    expect(MOBILE_TREATMENTS.security).toBe('bespoke');
  });

  it('keeps BESPOKE_MOBILE_VIEWS in lockstep with the bespoke treatments', () => {
@@ -27,10 +27,12 @@ describe('mobile treatments', () => {

  it('pins the set of bespoke phone screens (update deliberately when adding one)', () => {
    // A change here means a top-level view gained or lost a bespoke phone screen.
-    // Updating this list should go hand in hand with adding the screen under
-    // components/mobile/ and wiring its case in EditorLayout's renderMobileBespoke.
+    // Updating this list should go hand in hand with wiring the screen's case in
+    // EditorLayout's renderMobileBespoke (a dedicated component under
+    // components/mobile/, or a masthead-led mobile branch of the desktop view as
+    // Security does).
    expect([...BESPOKE_MOBILE_VIEWS].sort()).toEqual(
-      ['dashboard', 'fleet', 'scheduled-ops', 'settings'],
+      ['dashboard', 'fleet', 'scheduled-ops', 'security', 'settings'],
    );
  });
 });
@@ -22,7 +22,7 @@ export const MOBILE_TREATMENTS: Record<ActiveView, MobileTreatment> = {
  settings: 'bespoke',
  editor: 'detail',
  resources: 'responsive',
-  security: 'responsive',
+  security: 'bespoke',
  templates: 'responsive',
  'global-observability': 'responsive',
  'auto-updates': 'responsive',
@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Home, Radar, Boxes, ShieldCheck } from 'lucide-react';
+import { MobileMoreMenu } from './MobileMoreMenu';
+import type { NavItem } from './EditorLayout/hooks/useViewNavigationState';
+
+// Includes a bottom-tab primary (dashboard) and secondary destinations; the
+// menu must list every one so navigation is identical on every screen.
+const navItems: NavItem[] = [
+  { value: 'dashboard', label: 'Home', icon: Home },
+  { value: 'fleet', label: 'Fleet', icon: Radar },
+  { value: 'resources', label: 'Resources', icon: Boxes },
+  { value: 'security', label: 'Security', icon: ShieldCheck },
+];
+
+function open(over: Partial<React.ComponentProps<typeof MobileMoreMenu>> = {}) {
+  const props: React.ComponentProps<typeof MobileMoreMenu> = {
+    navItems,
+    activeView: 'security',
+    onNavigate: vi.fn(),
+    ...over,
+  };
+  render(<MobileMoreMenu {...props} />);
+  // The destination list lives inside a Sheet that is closed until the trigger
+  // is clicked, so open it before querying the nav buttons.
+  fireEvent.click(screen.getByRole('button', { name: 'More destinations' }));
+  return props;
+}
+
+describe('MobileMoreMenu', () => {
+  it('lists every nav item, including the bottom-tab primaries', () => {
+    open();
+    for (const item of navItems) {
+      expect(screen.getByRole('button', { name: item.label })).toBeInTheDocument();
+    }
+  });
+
+  it('navigates to the chosen destination on click', () => {
+    const { onNavigate } = open();
+    fireEvent.click(screen.getByRole('button', { name: 'Resources' }));
+    expect(onNavigate).toHaveBeenCalledWith('resources');
+  });
+
+  it('marks the active destination', () => {
+    open({ activeView: 'security' });
+    expect(screen.getByRole('button', { name: 'Security' }).className).toContain('bg-glass-highlight');
+    expect(screen.getByRole('button', { name: 'Resources' }).className).not.toContain('font-medium');
+  });
+});
@@ -5,11 +5,6 @@ import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
 import { cn } from '@/lib/utils';
 import type { NavItem, ActiveView } from './EditorLayout/hooks/useViewNavigationState';

-// Destinations the bottom tab bar already exposes; the "more" menu omits these
-// so it lists only the secondary destinations (auto-updates, app store,
-// observability, etc.). Kept in sync with MobileTabBar's tab set.
-const TAB_BAR_VIEWS = new Set<string>(['dashboard', 'fleet', 'scheduled-ops', 'settings']);
-
 interface MobileMoreMenuProps {
  /** The already-gated nav items (admin / remote / paid filtering applied). */
  navItems: NavItem[];
@@ -22,12 +17,12 @@ interface MobileMoreMenuProps {
 /**
 * The "more destinations" affordance for the mobile content screens. On a phone
 * the global TopBar is dropped and each screen's masthead leads, so this hosts
- * every secondary destination the bottom tab bar does not (auto-updates, app
- * store, observability, etc.) plus the theme and account controls.
+ * the full destination list plus the theme and account controls. It lists every
+ * gated nav item (the bottom tab bar's primaries included) so the same menu
+ * opens the same set on every screen, rather than changing contents per page.
 */
 export function MobileMoreMenu({ navItems, activeView, onNavigate, footer }: MobileMoreMenuProps) {
  const [open, setOpen] = useState(false);
-  const secondaryItems = navItems.filter(item => !TAB_BAR_VIEWS.has(item.value));

  return (
    <Sheet open={open} onOpenChange={setOpen}>
@@ -46,7 +41,7 @@ export function MobileMoreMenu({ navItems, activeView, onNavigate, footer }: Mob
          <p className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon">Navigate</p>
        </div>
        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-2">
-          {secondaryItems.map(({ value, label, icon: Icon }) => (
+          {navItems.map(({ value, label, icon: Icon }) => (
            <button
              key={value}
              type="button"
@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, type ReactNode } from 'react';
 import {
  LayoutDashboard, Boxes, FileWarning, KeyRound, BookCheck, EyeOff, History as HistoryIcon, Wrench, Info,
 } from 'lucide-react';
 import { Tabs, TabsContent, TabsList, TabsTrigger, TabsHighlight, TabsHighlightItem } from '@/components/ui/tabs';
-import { PageMasthead } from '@/components/ui/PageMasthead';
+import { PageMasthead, type MastheadTone } from '@/components/ui/PageMasthead';
 import { CapabilityGate } from '@/components/CapabilityGate';
 import { deriveMasthead } from './security/securityMasthead';
 import { springs } from '@/lib/motion';
@@ -13,6 +13,9 @@ import { useLicense } from '@/context/LicenseContext';
 import { useAuth } from '@/context/AuthContext';
 import { useNodes } from '@/context/NodeContext';
 import { useImageScan } from '@/hooks/useImageScan';
+import { useIsMobile } from '@/hooks/use-is-mobile';
+import { Masthead, type Tone } from './mobile/mobile-ui';
+import { SecurityMobileTabs, type SecurityMobileTab } from './security/SecurityMobile';
 import type { SecurityTab } from '@/lib/events';
 import type { SecurityOverview, ScanSummary, ScanDetailTab, SecurityRiskTrendPoint, FleetRole } from '@/types/security';
 import { VulnerabilityScanSheet } from './VulnerabilityScanSheet';
@@ -41,12 +44,27 @@ function isScanSummaryMap(v: unknown): v is Record<string, ScanSummary> {
 interface SecurityViewProps {
  activeTab: SecurityTab;
  onTabChange: (tab: SecurityTab) => void;
+  /** Notifications + more-menu cluster for the mobile masthead right slot.
+   *  Passed only on the bespoke phone surface; absent on desktop. */
+  headerActions?: ReactNode;
 }

-export function SecurityView({ activeTab, onTabChange }: SecurityViewProps) {
+// Maps the masthead tone (shared with the desktop PageMasthead) onto the mobile
+// masthead's dot tone, state-word color, and whether the dot pulses. Idle reads
+// as an amber caution (the mobile dot has no neutral grey).
+type StateWordClass = 'text-destructive' | 'text-warning' | 'text-stat-value' | 'text-stat-title';
+const MOBILE_MASTHEAD_TONE: Record<MastheadTone, { dot: Tone; word: StateWordClass; pulse: boolean }> = {
+  error: { dot: 'destructive', word: 'text-destructive', pulse: true },
+  warn: { dot: 'warning', word: 'text-warning', pulse: true },
+  live: { dot: 'brand', word: 'text-stat-value', pulse: false },
+  idle: { dot: 'warning', word: 'text-stat-title', pulse: false },
+};
+
+export function SecurityView({ activeTab, onTabChange, headerActions }: SecurityViewProps) {
  const { isPaid } = useLicense();
  const { isAdmin } = useAuth();
  const { activeNode } = useNodes();
+  const isMobile = useIsMobile();
  const isRemote = activeNode?.type === 'remote';

  const [overview, setOverview] = useState<SecurityOverview | null>(null);
@@ -171,58 +189,27 @@ export function SecurityView({ activeTab, onTabChange }: SecurityViewProps) {
  const { state, tone } = deriveMasthead(overview, overviewLoadError !== null);
  const pulsing = tone === 'live' && !!overview?.scanner.available;

-  return (
-    <div className="h-full overflow-auto p-6">
-      <PageMasthead
-        kicker="SECURITY"
-        state={state}
-        tone={tone}
-        pulsing={pulsing}
-        size="hero"
-        className="rounded-lg mb-4"
-        subtitle={overview
-          ? `${overview.scannedImages} ${overview.scannedImages === 1 ? 'image' : 'images'} scanned · scanner ${overview.scanner.available ? 'ready' : 'not installed'}`
-          : undefined}
-        metadata={overview ? [
-          { label: 'CRITICAL', value: String(overview.critical), tone: overview.critical > 0 ? 'error' : 'value' },
-          { label: 'HIGH', value: String(overview.high), tone: overview.high > 0 ? 'warn' : 'value' },
-          { label: 'LAST SCAN', value: overview.lastSuccessfulScanAt ? formatTimeAgo(overview.lastSuccessfulScanAt) : 'never', tone: 'subtitle' },
-        ] : undefined}
-      />
+  // The mobile tab strip mirrors the desktop tab IA, including the paid-only
+  // Policies tab when licensed, so every section stays reachable by scroll.
+  const mobileTabs: SecurityMobileTab[] = [
+    { value: 'overview', label: 'Overview' },
+    { value: 'images', label: 'Images' },
+    { value: 'compose', label: 'Compose risks' },
+    { value: 'secrets', label: 'Secrets' },
+    ...(isPaid ? [{ value: 'policies', label: 'Policies' } as const] : []),
+    { value: 'suppressions', label: 'Suppressions' },
+    { value: 'history', label: 'History' },
+    { value: 'scanner', label: 'Scanner setup' },
+  ];

-      <Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SecurityTab)}>
-        <TabsList className="mb-4 max-md:w-full max-md:overflow-x-auto max-md:[scrollbar-width:none]">
-          <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
-            <TabsHighlightItem value="overview">
-              <TabsTrigger value="overview"><LayoutDashboard className="w-4 h-4 mr-1.5" />Overview</TabsTrigger>
-            </TabsHighlightItem>
-            <TabsHighlightItem value="images">
-              <TabsTrigger value="images"><Boxes className="w-4 h-4 mr-1.5" />Images</TabsTrigger>
-            </TabsHighlightItem>
-            <TabsHighlightItem value="compose">
-              <TabsTrigger value="compose"><FileWarning className="w-4 h-4 mr-1.5" />Compose risks</TabsTrigger>
-            </TabsHighlightItem>
-            <TabsHighlightItem value="secrets">
-              <TabsTrigger value="secrets"><KeyRound className="w-4 h-4 mr-1.5" />Secrets</TabsTrigger>
-            </TabsHighlightItem>
-            <span aria-hidden className="self-center mx-1 h-4 w-px bg-border" />
-            {isPaid && (
-              <TabsHighlightItem value="policies">
-                <TabsTrigger value="policies"><BookCheck className="w-4 h-4 mr-1.5" />Policies</TabsTrigger>
-              </TabsHighlightItem>
-            )}
-            <TabsHighlightItem value="suppressions">
-              <TabsTrigger value="suppressions"><EyeOff className="w-4 h-4 mr-1.5" />Suppressions</TabsTrigger>
-            </TabsHighlightItem>
-            <TabsHighlightItem value="history">
-              <TabsTrigger value="history"><HistoryIcon className="w-4 h-4 mr-1.5" />History</TabsTrigger>
-            </TabsHighlightItem>
-            <TabsHighlightItem value="scanner">
-              <TabsTrigger value="scanner"><Wrench className="w-4 h-4 mr-1.5" />Scanner setup</TabsTrigger>
-            </TabsHighlightItem>
-          </TabsHighlight>
-        </TabsList>
+  const subtitle = overview
+    ? `${overview.scannedImages} ${overview.scannedImages === 1 ? 'image' : 'images'} scanned · scanner ${overview.scanner.available ? 'ready' : 'not installed'}`
+    : undefined;

+  // The tab panels are identical on desktop and mobile; only the masthead and
+  // the tab strip differ, so the panels are shared between both layouts.
+  const tabPanels = (
+    <>
        <TabsContent value="overview">
          <OverviewTab
            overview={overview}
@@ -297,17 +284,101 @@ export function SecurityView({ activeTab, onTabChange }: SecurityViewProps) {
        <TabsContent value="scanner">
          <ScannerSetupTab />
        </TabsContent>
+    </>
+  );
+
+  const scanSheet = (
+    <VulnerabilityScanSheet
+      scanId={inspectScanId}
+      initialTab={inspectInitialTab}
+      onClose={() => setInspectScanId(null)}
+      canGenerateSbom={isAdmin}
+      canExportSarif={isPaid && isAdmin}
+      canCompare
+      canManageSuppressions={isAdmin}
+    />
+  );
+
+  // Mobile: a bespoke masthead-led screen (no TopBar). The masthead leads with
+  // the notifications + more-menu cluster in its right slot, the tab strip is a
+  // horizontal scroller, and the active panel scrolls below.
+  if (isMobile) {
+    const mobileTone = MOBILE_MASTHEAD_TONE[tone];
+    return (
+      <div className="flex h-full min-h-0 flex-col">
+        <Masthead
+          kicker="security"
+          state={state}
+          stateTone={mobileTone.dot}
+          stateClassName={mobileTone.word}
+          live={mobileTone.pulse}
+          meta={subtitle}
+          right={headerActions}
+        />
+        <SecurityMobileTabs tabs={mobileTabs} active={activeTab} onSelect={onTabChange} />
+        <div className="flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden p-4">
+          <Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SecurityTab)}>
+            {tabPanels}
+          </Tabs>
+        </div>
+        {scanSheet}
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto p-6">
+      <PageMasthead
+        kicker="SECURITY"
+        state={state}
+        tone={tone}
+        pulsing={pulsing}
+        size="hero"
+        className="rounded-lg mb-4"
+        subtitle={subtitle}
+        metadata={overview ? [
+          { label: 'CRITICAL', value: String(overview.critical), tone: overview.critical > 0 ? 'error' : 'value' },
+          { label: 'HIGH', value: String(overview.high), tone: overview.high > 0 ? 'warn' : 'value' },
+          { label: 'LAST SCAN', value: overview.lastSuccessfulScanAt ? formatTimeAgo(overview.lastSuccessfulScanAt) : 'never', tone: 'subtitle' },
+        ] : undefined}
+      />
+
+      <Tabs value={activeTab} onValueChange={(v) => onTabChange(v as SecurityTab)}>
+        <TabsList className="mb-4">
+          <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+            <TabsHighlightItem value="overview">
+              <TabsTrigger value="overview"><LayoutDashboard className="w-4 h-4 mr-1.5" />Overview</TabsTrigger>
+            </TabsHighlightItem>
+            <TabsHighlightItem value="images">
+              <TabsTrigger value="images"><Boxes className="w-4 h-4 mr-1.5" />Images</TabsTrigger>
+            </TabsHighlightItem>
+            <TabsHighlightItem value="compose">
+              <TabsTrigger value="compose"><FileWarning className="w-4 h-4 mr-1.5" />Compose risks</TabsTrigger>
+            </TabsHighlightItem>
+            <TabsHighlightItem value="secrets">
+              <TabsTrigger value="secrets"><KeyRound className="w-4 h-4 mr-1.5" />Secrets</TabsTrigger>
+            </TabsHighlightItem>
+            <span aria-hidden className="self-center mx-1 h-4 w-px bg-border" />
+            {isPaid && (
+              <TabsHighlightItem value="policies">
+                <TabsTrigger value="policies"><BookCheck className="w-4 h-4 mr-1.5" />Policies</TabsTrigger>
+              </TabsHighlightItem>
+            )}
+            <TabsHighlightItem value="suppressions">
+              <TabsTrigger value="suppressions"><EyeOff className="w-4 h-4 mr-1.5" />Suppressions</TabsTrigger>
+            </TabsHighlightItem>
+            <TabsHighlightItem value="history">
+              <TabsTrigger value="history"><HistoryIcon className="w-4 h-4 mr-1.5" />History</TabsTrigger>
+            </TabsHighlightItem>
+            <TabsHighlightItem value="scanner">
+              <TabsTrigger value="scanner"><Wrench className="w-4 h-4 mr-1.5" />Scanner setup</TabsTrigger>
+            </TabsHighlightItem>
+          </TabsHighlight>
+        </TabsList>
+        {tabPanels}
      </Tabs>

-      <VulnerabilityScanSheet
-        scanId={inspectScanId}
-        initialTab={inspectInitialTab}
-        onClose={() => setInspectScanId(null)}
-        canGenerateSbom={isAdmin}
-        canExportSarif={isPaid && isAdmin}
-        canCompare
-        canManageSuppressions={isAdmin}
-      />
+      {scanSheet}
    </div>
  );
 }
@@ -8,11 +8,23 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { SeverityBadge } from '@/components/ui/SeverityBadge';
-import { getSeverityKey, type SeverityKey } from '@/lib/severityStyles';
+import { getSeverityKey, type SeverityKey, type ImageFilterValue } from '@/lib/severityStyles';
 import { formatTimeAgo } from '@/lib/relativeTime';
 import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-is-mobile';
+import { ImageScanRow, ImageFilterChips, type ImageFilterChip } from './SecurityMobile';
 import type { ScanSummary, ScanDetailTab, ScannerKind } from '@/types/security';

+// Mobile severity chips. 'FIXABLE' is a phone-only pseudo-filter (the desktop
+// Combobox never emits it), so the shared filter logic treats it specially.
+const MOBILE_FILTER_CHIPS: ImageFilterChip[] = [
+  { value: 'all', label: 'All' },
+  { value: 'CRITICAL', label: 'Critical' },
+  { value: 'HIGH', label: 'High' },
+  { value: 'FIXABLE', label: 'Fixable' },
+  { value: 'CLEAN', label: 'Clean' },
+];
+
 const PAGE_SIZE = 12;

 type SortKey = 'image_ref' | 'scanned_at' | 'severity' | 'findings';
@@ -67,8 +79,9 @@ interface ImagesTabProps {

 /** Latest-scan index for real images (stack/config scans live in Compose risks). */
 export function ImagesTab({ summaries, loading, error, onInspect, canScan, scanningRef, onScan }: ImagesTabProps) {
+  const isMobile = useIsMobile();
  const [search, setSearch] = useState('');
-  const [severity, setSeverity] = useState('all');
+  const [severity, setSeverity] = useState<ImageFilterValue>('all');
  const [sortKey, setSortKey] = useState<SortKey>('scanned_at');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
  const [page, setPage] = useState(0);
@@ -78,7 +91,11 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
    return Object.values(summaries)
      .filter((s) => !s.image_ref.startsWith('stack:'))
      .filter((s) => (term ? s.image_ref.toLowerCase().includes(term) : true))
-      .filter((s) => (severity === 'all' ? true : getSeverityKey(s) === severity));
+      .filter((s) => {
+        if (severity === 'all') return true;
+        if (severity === 'FIXABLE') return s.fixable > 0;
+        return getSeverityKey(s) === severity;
+      });
  }, [summaries, search, severity]);

  const sorted = useMemo(() => {
@@ -136,6 +153,37 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann

  return (
    <div className="space-y-4">
+      {isMobile ? (
+        <>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
+            <Input
+              placeholder="Filter images…"
+              value={search}
+              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
+              className="pl-8"
+            />
+          </div>
+          <ImageFilterChips
+            chips={MOBILE_FILTER_CHIPS}
+            active={severity}
+            onSelect={(v) => { setSeverity(v); setPage(0); }}
+          />
+          <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden">
+            <div className="px-4">
+              {pageItems.map((s) => (
+                <ImageScanRow key={s.image_ref} summary={s} onInspect={onInspect} />
+              ))}
+            </div>
+            {pageItems.length === 0 && (
+              <div className="py-12 text-center text-sm text-muted-foreground">
+                No images match your search or filter.
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <>
      <div className="flex items-center gap-2 flex-wrap">
        <div className="relative flex-1 min-w-[200px] max-w-sm">
          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
@@ -149,7 +197,7 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
        <Combobox
          options={FILTER_OPTIONS}
          value={severity}
-          onValueChange={(v) => { setSeverity(v || 'all'); setPage(0); }}
+          onValueChange={(v) => { setSeverity((v || 'all') as ImageFilterValue); setPage(0); }}
          className="w-[180px]"
        />
      </div>
@@ -233,6 +281,8 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
          )}
        </ScrollArea>
      </div>
+        </>
+      )}

      {sorted.length > PAGE_SIZE && (
        <div className="flex items-center justify-end gap-1">
@@ -3,6 +3,8 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { SignalRail, type SignalTile } from '@/components/ui/SignalRail';
 import { cn } from '@/lib/utils';
 import { formatTimeAgo } from '@/lib/relativeTime';
+import { useIsMobile } from '@/hooks/use-is-mobile';
+import { SecuritySevStrip, SecurityTotalsGrid, SecurityFooterBand } from './SecurityMobile';
 import type { SecurityOverview, ScanSummary, SecurityRiskTrendPoint } from '@/types/security';
 import type { SecurityTab } from '@/lib/events';
 import {
@@ -55,6 +57,8 @@ function ChartCard({ title, className, children }: { title: string; className?:
 }

 export function OverviewTab({ overview, loadError, summaries, trend, onNavigate, onInspect, canScan, onScanComplete, isPaid }: OverviewTabProps) {
+  const isMobile = useIsMobile();
+
  if (loadError === 'unsupported') {
    return (
      <div className="flex flex-col items-center justify-center py-20 text-center">
@@ -106,16 +110,23 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
  return (
    <div className="space-y-6">
      {canScan && (
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-sm text-stat-subtitle">
-            {overview.scannedImages === 0
-              ? 'No images scanned on this node yet.'
-              : `${overview.scannedImages} image${overview.scannedImages === 1 ? '' : 's'} scanned.`}
-          </p>
-          <ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} />
-        </div>
+        isMobile ? (
+          <ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} fullWidth />
+        ) : (
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm text-stat-subtitle">
+              {overview.scannedImages === 0
+                ? 'No images scanned on this node yet.'
+                : `${overview.scannedImages} image${overview.scannedImages === 1 ? '' : 's'} scanned.`}
+            </p>
+            <ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} />
+          </div>
+        )
      )}

+      {/* The masthead hides its stat cluster on a phone; restate it here. */}
+      {isMobile && <SecuritySevStrip overview={overview} />}
+
      {/* Charts lead the dashboard. */}
      <div className="grid gap-4 lg:grid-cols-3">
        <ChartCard title="Risk trend · 30 days · critical + high" className="lg:col-span-2">
@@ -136,11 +147,15 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
      </div>

      {/* Supporting counts + posture, secondary to the charts above. */}
-      <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden max-md:overflow-x-auto">
-        <div className="min-w-[640px]">
-          <SignalRail tiles={tiles} className="border-b-0" />
+      {isMobile ? (
+        <SecurityTotalsGrid overview={overview} />
+      ) : (
+        <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden">
+          <div className="min-w-[640px]">
+            <SignalRail tiles={tiles} className="border-b-0" />
+          </div>
        </div>
-      </div>
+      )}

      <div className="grid gap-4 md:grid-cols-2">
        <div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4">
@@ -182,6 +197,8 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
          </p>
        </div>
      </div>
+
+      {isMobile && <SecurityFooterBand overview={overview} />}
    </div>
  );
 }
@@ -13,6 +13,8 @@ interface ScanNodeLauncherProps {
  canScan: boolean;
  /** Fired after a scan finishes so the caller can refresh the overview. */
  onComplete?: () => void;
+  /** Stretch the trigger to fill its row (the mobile Overview lead action). */
+  fullWidth?: boolean;
 }

 const TYPES = [
@@ -29,7 +31,7 @@ type TypeKey = (typeof TYPES)[number]['key'];
 * captured once so the request and the progress stream stay bound to it even if
 * the active node changes mid-scan.
 */
-export function ScanNodeLauncher({ canScan, onComplete }: ScanNodeLauncherProps) {
+export function ScanNodeLauncher({ canScan, onComplete, fullWidth = false }: ScanNodeLauncherProps) {
  const { runWithLog } = useDeployFeedback();
  const { activeNode } = useNodes();
  const [open, setOpen] = useState(false);
@@ -79,7 +81,7 @@ export function ScanNodeLauncher({ canScan, onComplete }: ScanNodeLauncherProps)
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
-        <Button size="sm" disabled={running}>
+        <Button size="sm" disabled={running} className={fullWidth ? 'w-full' : undefined}>
          {running
            ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" strokeWidth={1.5} />
            : <ShieldCheck className="w-4 h-4 mr-1.5" strokeWidth={1.5} />}
@@ -0,0 +1,216 @@
+// Mobile (<md) reflow pieces for the node-scoped Security page. These render
+// only on the phone branch (gated by useIsMobile() in the parent components)
+// and never affect the desktop layout. Tokens only, no new colors or fonts;
+// they translate the approved prototype onto the existing design tokens.
+import type { ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Kicker } from '@/components/mobile/mobile-ui';
+import { getSeverityKey, SEVERITY_DOT_CLASSES, type ImageFilterValue } from '@/lib/severityStyles';
+import { formatTimeAgo } from '@/lib/relativeTime';
+import type { SecurityTab } from '@/lib/events';
+import type { ScanSummary, SecurityOverview, ScanDetailTab } from '@/types/security';
+
+export interface SecurityMobileTab {
+  value: SecurityTab;
+  label: string;
+}
+
+/** Horizontal mono tab scroller with a cyan underline on the active tab and an
+ *  edge mask-fade so the overflow reads as scrollable. Keeps all tabs reachable
+ *  by scroll, matching the desktop tab IA. */
+export function SecurityMobileTabs({ tabs, active, onSelect }: {
+  tabs: SecurityMobileTab[];
+  active: SecurityTab;
+  onSelect: (tab: SecurityTab) => void;
+}) {
+  return (
+    <div
+      role="tablist"
+      aria-label="Security sections"
+      className="flex shrink-0 overflow-x-auto border-b border-hairline [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      style={{
+        maskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
+        WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
+      }}
+    >
+      {tabs.map((tab) => {
+        const on = tab.value === active;
+        return (
+          <button
+            key={tab.value}
+            type="button"
+            role="tab"
+            aria-selected={on}
+            onClick={() => onSelect(tab.value)}
+            className={cn(
+              'min-h-11 shrink-0 whitespace-nowrap px-3 py-[13px] font-mono text-[12px] tracking-[0.04em] transition-colors',
+              on ? 'text-brand shadow-[inset_0_-2px_0_0_var(--brand)]' : 'text-stat-subtitle',
+            )}
+          >
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function StripCell({ kicker, value, valueClass, last }: {
+  kicker: string;
+  value: string;
+  valueClass: string;
+  last?: boolean;
+}) {
+  return (
+    <div className={cn('min-w-0 flex-1 px-[13px] py-3', !last && 'border-r border-hairline')}>
+      <Kicker>{kicker}</Kicker>
+      <div className={cn('mt-[3px] truncate font-mono text-[26px] leading-none tabular-nums tracking-[-0.02em]', valueClass)}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+/** CRITICAL / HIGH / LAST SCAN strip that the desktop masthead carries inline;
+ *  on mobile the masthead hides its stat cluster and this sits below the tabs. */
+export function SecuritySevStrip({ overview }: { overview: SecurityOverview }) {
+  return (
+    <div className="flex overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
+      <StripCell kicker="critical" value={String(overview.critical)} valueClass={overview.critical > 0 ? 'text-destructive' : 'text-stat-value'} />
+      <StripCell kicker="high" value={String(overview.high)} valueClass={overview.high > 0 ? 'text-warning' : 'text-stat-value'} />
+      <StripCell
+        kicker="last scan"
+        value={overview.lastSuccessfulScanAt ? formatTimeAgo(overview.lastSuccessfulScanAt) : 'never'}
+        valueClass="text-stat-value"
+        last
+      />
+    </div>
+  );
+}
+
+/** The six desktop totals as a 3-col x 2-row hairline-divided card (replaces the
+ *  min-w-[640px] SignalRail, which forces a horizontal scroll on a phone). */
+export function SecurityTotalsGrid({ overview }: { overview: SecurityOverview }) {
+  const cells: Array<{ kicker: string; value: number; valueClass: string }> = [
+    { kicker: 'scanned', value: overview.scannedImages, valueClass: 'text-stat-value' },
+    { kicker: 'fixable', value: overview.fixable, valueClass: overview.fixable > 0 ? 'text-warning' : 'text-stat-value' },
+    { kicker: 'secrets', value: overview.secrets, valueClass: overview.secrets > 0 ? 'text-destructive' : 'text-stat-value' },
+    { kicker: 'misconfigs', value: overview.misconfigs, valueClass: overview.misconfigs > 0 ? 'text-warning' : 'text-stat-value' },
+    { kicker: 'stale', value: overview.staleScans, valueClass: overview.staleScans > 0 ? 'text-warning' : 'text-stat-value' },
+    { kicker: 'failed', value: overview.failedScans, valueClass: overview.failedScans > 0 ? 'text-destructive' : 'text-stat-value' },
+  ];
+  return (
+    <div className="grid grid-cols-3 overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
+      {cells.map((cell, i) => (
+        <div
+          key={cell.kicker}
+          className={cn('px-[13px] py-3', i % 3 !== 0 && 'border-l border-hairline', i >= 3 && 'border-t border-hairline')}
+        >
+          <Kicker>{cell.kicker}</Kicker>
+          <div className={cn('mt-[3px] font-mono text-[21px] leading-none tabular-nums tracking-[-0.01em]', cell.valueClass)}>
+            {cell.value}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Footer freshness band (§9.11): context, not chrome. States the truthful scan
+ *  freshness and scanner version for the active node. */
+export function SecurityFooterBand({ overview }: { overview: SecurityOverview }) {
+  const parts: string[] = [
+    overview.lastSuccessfulScanAt ? `last scan ${formatTimeAgo(overview.lastSuccessfulScanAt)}` : 'no successful scan yet',
+  ];
+  if (overview.scanner.available) {
+    parts.push(`${overview.scanner.source}${overview.scanner.version ? ` v${overview.scanner.version}` : ''}`);
+  } else {
+    parts.push('scanner not installed');
+  }
+  return (
+    <div className="-mx-4 mt-2 border-t border-hairline bg-band px-4 py-[9px]">
+      <Kicker className="text-stat-subtitle">{parts.join(' · ')}</Kicker>
+    </div>
+  );
+}
+
+const COUNT_TAG_TONE = {
+  destructive: 'border-destructive/30 bg-destructive/[0.14] text-destructive',
+  warning: 'border-warning/30 bg-warning/[0.14] text-warning',
+  success: 'border-success/30 bg-success/[0.14] text-success',
+} as const;
+
+function CountTag({ tone, children }: { tone: keyof typeof COUNT_TAG_TONE; children: ReactNode }) {
+  return (
+    <span className={cn('whitespace-nowrap rounded-[5px] border px-[7px] py-[2px] font-mono text-[10px] uppercase tracking-[0.08em]', COUNT_TAG_TONE[tone])}>
+      {children}
+    </span>
+  );
+}
+
+/** One image row in the mobile Images list: severity dot, truncated mono ref over
+ *  a freshness meta line, trailing C/H count tags (or CLEAN), and a chevron. */
+export function ImageScanRow({ summary, onInspect }: {
+  summary: ScanSummary;
+  onInspect: (scanId: number, initialTab?: ScanDetailTab) => void;
+}) {
+  // Use the shared classifier so the count tags agree with the leading dot: a
+  // medium/low-only image is not "clean", it is its highest severity.
+  const severityKey = getSeverityKey(summary);
+  const clean = severityKey === 'CLEAN';
+  return (
+    <button
+      type="button"
+      onClick={() => onInspect(summary.scan_id, 'vulns')}
+      className="flex min-h-11 w-full items-center gap-[11px] border-b border-hairline py-[11px] text-left last:border-b-0"
+    >
+      <span className={cn('h-[7px] w-[7px] shrink-0 rounded-full', SEVERITY_DOT_CLASSES[severityKey])} aria-hidden />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate font-mono text-[13px] text-stat-value">{summary.image_ref}</span>
+        <span className="mt-px block font-mono text-[10px] text-stat-icon">scanned {formatTimeAgo(summary.scanned_at)}</span>
+      </span>
+      <span className="flex shrink-0 items-center gap-1">
+        {summary.critical > 0 && <CountTag tone="destructive">{summary.critical}C</CountTag>}
+        {summary.high > 0 && <CountTag tone="warning">{summary.high}H</CountTag>}
+        {clean && <CountTag tone="success">clean</CountTag>}
+      </span>
+      <ChevronRight className="h-3 w-3 shrink-0 text-stat-icon" strokeWidth={1.5} aria-hidden />
+    </button>
+  );
+}
+
+export interface ImageFilterChip {
+  value: ImageFilterValue;
+  label: string;
+}
+
+/** Horizontal severity filter chips for the mobile Images list. */
+export function ImageFilterChips({ chips, active, onSelect }: {
+  chips: ImageFilterChip[];
+  active: ImageFilterValue;
+  onSelect: (value: ImageFilterValue) => void;
+}) {
+  return (
+    <div className="flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+      {chips.map((chip) => {
+        const on = chip.value === active;
+        return (
+          <button
+            key={chip.value}
+            type="button"
+            onClick={() => onSelect(chip.value)}
+            className={cn(
+              'min-h-11 shrink-0 whitespace-nowrap rounded-[7px] border px-[11px] font-mono text-[11px] tracking-[0.04em] transition-colors',
+              on
+                ? 'border-brand bg-brand text-brand-foreground'
+                : 'border-card-border bg-card text-stat-subtitle',
+            )}
+          >
+            {chip.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
@@ -0,0 +1,189 @@
+/**
+ * Mobile (<md) Security reflow pieces: the horizontal tab scroller and the
+ * image-list row, plus the ImagesTab mobile list/chip rendering. These render
+ * only on the phone branch; useIsMobile() is driven via a mocked matchMedia.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SecurityMobileTabs, ImageScanRow, SecuritySevStrip, type SecurityMobileTab } from '../SecurityMobile';
+import { ImagesTab } from '../ImagesTab';
+import type { ScanSummary, SecurityOverview } from '@/types/security';
+
+function overview(o: Partial<SecurityOverview> = {}): SecurityOverview {
+  return {
+    scannedImages: 0,
+    critical: 0,
+    high: 0,
+    fixable: 0,
+    secrets: 0,
+    misconfigs: 0,
+    staleScans: 0,
+    failedScans: 0,
+    lastSuccessfulScanAt: null,
+    scanner: { available: false, source: 'managed', version: null, autoUpdate: false },
+    deployEnforcement: { eligibleBlockPolicies: 0, honorSuppressionsOnDeploy: false },
+    ...o,
+  };
+}
+
+function summary(o: Partial<ScanSummary> & { image_ref: string; scan_id: number }): ScanSummary {
+  return {
+    highest_severity: null,
+    scanned_at: 1_700_000_000_000,
+    total: 0,
+    critical: 0,
+    high: 0,
+    medium: 0,
+    low: 0,
+    unknown: 0,
+    fixable: 0,
+    secret_count: 0,
+    misconfig_count: 0,
+    ...o,
+  };
+}
+
+function asMap(...list: ScanSummary[]): Record<string, ScanSummary> {
+  return Object.fromEntries(list.map((s) => [s.image_ref, s]));
+}
+
+function installMatchMedia(matches: boolean) {
+  window.matchMedia = vi.fn().mockReturnValue({
+    matches,
+    media: '',
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }) as unknown as typeof window.matchMedia;
+}
+
+const TABS: SecurityMobileTab[] = [
+  { value: 'overview', label: 'Overview' },
+  { value: 'images', label: 'Images' },
+  { value: 'scanner', label: 'Scanner setup' },
+];
+
+describe('SecurityMobileTabs', () => {
+  it('renders every tab and marks the active one selected', () => {
+    render(<SecurityMobileTabs tabs={TABS} active="images" onSelect={vi.fn()} />);
+    expect(screen.getAllByRole('tab')).toHaveLength(3);
+    expect(screen.getByRole('tab', { name: 'Images' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('gives the active tab the cyan underline and brand ink', () => {
+    render(<SecurityMobileTabs tabs={TABS} active="images" onSelect={vi.fn()} />);
+    const active = screen.getByRole('tab', { name: 'Images' });
+    expect(active.className).toContain('text-brand');
+    expect(active.className).toContain('shadow-[inset_0_-2px_0_0_var(--brand)]');
+  });
+
+  it('calls onSelect with the tab value on click', async () => {
+    const onSelect = vi.fn();
+    render(<SecurityMobileTabs tabs={TABS} active="overview" onSelect={onSelect} />);
+    await userEvent.click(screen.getByRole('tab', { name: 'Scanner setup' }));
+    expect(onSelect).toHaveBeenCalledWith('scanner');
+  });
+});
+
+describe('ImageScanRow', () => {
+  it('shows critical and high count tags', () => {
+    render(<ImageScanRow summary={summary({ image_ref: 'nginx:1', scan_id: 1, critical: 5, high: 2 })} onInspect={vi.fn()} />);
+    expect(screen.getByText('nginx:1')).toBeInTheDocument();
+    expect(screen.getByText('5C')).toBeInTheDocument();
+    expect(screen.getByText('2H')).toBeInTheDocument();
+  });
+
+  it('shows a clean tag when there are no findings', () => {
+    render(<ImageScanRow summary={summary({ image_ref: 'caddy:2', scan_id: 2 })} onInspect={vi.fn()} />);
+    expect(screen.getByText('clean')).toBeInTheDocument();
+  });
+
+  it('does not call a medium/low-only image clean', () => {
+    // A medium-only image has no critical/high/secret/misconfig findings but is
+    // not clean; the dot and tags must follow getSeverityKey, not an all-zero check.
+    render(<ImageScanRow summary={summary({ image_ref: 'pg:16', scan_id: 3, highest_severity: 'MEDIUM', total: 4, medium: 4 })} onInspect={vi.fn()} />);
+    expect(screen.queryByText('clean')).not.toBeInTheDocument();
+  });
+
+  it('opens the scan on the vulns tab when tapped', async () => {
+    const onInspect = vi.fn();
+    render(<ImageScanRow summary={summary({ image_ref: 'redis:7', scan_id: 9 })} onInspect={onInspect} />);
+    await userEvent.click(screen.getByText('redis:7'));
+    expect(onInspect).toHaveBeenCalledWith(9, 'vulns');
+  });
+});
+
+describe('SecuritySevStrip', () => {
+  it('tints critical and high by severity when nonzero', () => {
+    render(<SecuritySevStrip overview={overview({ critical: 2, high: 4 })} />);
+    expect(screen.getByText('2').className).toContain('text-destructive');
+    expect(screen.getByText('4').className).toContain('text-warning');
+  });
+
+  it('keeps zero counts at the neutral value tone', () => {
+    render(<SecuritySevStrip overview={overview({ critical: 0, high: 0 })} />);
+    // Two cells read 0 (critical, high); both stay neutral, neither tinted.
+    for (const cell of screen.getAllByText('0')) {
+      expect(cell.className).toContain('text-stat-value');
+      expect(cell.className).not.toContain('text-destructive');
+    }
+  });
+
+  it('reads "never" when the node has no successful scan', () => {
+    render(<SecuritySevStrip overview={overview({ lastSuccessfulScanAt: null })} />);
+    expect(screen.getByText('never')).toBeInTheDocument();
+  });
+});
+
+describe('ImagesTab (mobile)', () => {
+  const original = window.matchMedia;
+  afterEach(() => { window.matchMedia = original; vi.clearAllMocks(); });
+
+  const base = {
+    loading: false,
+    error: false,
+    onInspect: vi.fn(),
+    canScan: false,
+    scanningRef: null as string | null,
+    onScan: vi.fn(),
+  };
+
+  it('renders the severity chips and a row list below the breakpoint', () => {
+    installMatchMedia(true);
+    render(
+      <ImagesTab
+        {...base}
+        summaries={asMap(
+          summary({ image_ref: 'nginx:1', scan_id: 1, highest_severity: 'CRITICAL', total: 5, critical: 5 }),
+          summary({ image_ref: 'stack:web', scan_id: 2, misconfig_count: 3 }),
+        )}
+      />,
+    );
+    // Chips are present and the stack scan is excluded, like the desktop table.
+    expect(screen.getByRole('button', { name: 'Fixable' })).toBeInTheDocument();
+    expect(screen.getByText('nginx:1')).toBeInTheDocument();
+    expect(screen.getByText('5C')).toBeInTheDocument();
+    expect(screen.queryByText('stack:web')).not.toBeInTheDocument();
+  });
+
+  it('filters the list to fixable images via the chip', async () => {
+    installMatchMedia(true);
+    render(
+      <ImagesTab
+        {...base}
+        summaries={asMap(
+          summary({ image_ref: 'fix:1', scan_id: 1, highest_severity: 'HIGH', high: 2, fixable: 2 }),
+          summary({ image_ref: 'nofix:1', scan_id: 2, highest_severity: 'HIGH', high: 1, fixable: 0 }),
+        )}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Fixable' }));
+    expect(screen.getByText('fix:1')).toBeInTheDocument();
+    expect(screen.queryByText('nofix:1')).not.toBeInTheDocument();
+  });
+});
@@ -2,6 +2,10 @@ import type { ScanSummary, VulnSeverity } from '@/types/security';

 export type SeverityKey = VulnSeverity | 'CLEAN' | 'FINDINGS';

+/** Image-list filter value: any severity key, the "all" sentinel, or the
+ *  phone-only FIXABLE pseudo-filter (images with at least one fixable finding). */
+export type ImageFilterValue = 'all' | SeverityKey | 'FIXABLE';
+
 /**
 * The display "key" for a scan summary: its highest vulnerability severity, or
 * `FINDINGS` when the scan has only secrets/misconfigurations (stored