feat: add infrastructure flow and official iconography

tests/browser/accessibility-axe.spec.ts

@@ -61,11 +61,11 @@ async function enterState(
       page.getByRole("button", { name: "Mute sound" }),
     ).toBeVisible();
   } else if (state === "static") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await page.getByLabel("Quality control").selectOption("static");
-    await expect(
-      page.getByRole("button", { name: "Enable motion" }),
-    ).toBeVisible();
+    await expect(page.getByRole("status")).toContainText("Motion: static");
   } else if (state === "reduced-motion") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await expect(page.getByRole("status")).toContainText(
       "reduced motion requested",
     );

tests/browser/no-javascript.spec.ts

@@ -130,7 +130,6 @@ const expectedVisibleTextSegments = (
     ...section('infrastructure', [
       content.infrastructure.title,
       content.infrastructure.summary,
-      ...content.infrastructure.bands.map((band) => band.title),
       content.infrastructure.title,
       ...content.infrastructure.bands.map(
         (band) => `${band.title}: ${band.summary}`,

tests/browser/responsive-layout.spec.ts

@@ -158,6 +158,35 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
   await capture(page, testInfo, 'information-layer-mobile.png');
 });
 
+test('turns the infrastructure route from a horizontal trust flow into a readable mobile stack', async ({ page }, testInfo) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await loadInformationLayer(page);
+
+  const desktop = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { id: node.getAttribute('data-infrastructure-node'), left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(desktop.slice(0, 4).every((node) => Math.abs(node.top - desktop[0]!.top) <= 1)).toBe(true);
+  expect(desktop[4]!.top).toBeGreaterThanOrEqual(desktop[3]!.bottom);
+  expect(desktop.slice(0, 4).every((node, index, nodes) => index === 0 || node.left > nodes[index - 1]!.left)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-desktop.png');
+
+  await page.setViewportSize({ width: 320, height: 800 });
+  await loadInformationLayer(page);
+  const mobile = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(mobile.every((node) => Math.abs(node.left - mobile[0]!.left) <= 1)).toBe(true);
+  expect(mobile.every((node) => node.width >= 200)).toBe(true);
+  expect(mobile.every((node, index, nodes) => index === 0 || node.top > nodes[index - 1]!.bottom)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-mobile.png');
+});
+
 test('keeps the compact HUD in one safe lower row without covering the road corridor', async ({ page }) => {
   for (const viewport of [
     { width: 320, height: 800 },

tests/unit/brand-icons.test.ts

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BrandIcon from '@/components/BrandIcon.vue';
+import content from '@/../content/public/portfolio-content.json';
+import { brandIconFor, brandIconLabels } from '@/icons/brand-icons';
+
+const toolkitLabels = content.toolkit.flatMap((group) => group.technologies.map((technology) => technology.name));
+const socialLabels = content.contact.social.map((link) => link.service);
+
+describe('official brand icon registry', () => {
+  it('resolves every toolkit technology in validated portfolio content', () => {
+    for (const label of toolkitLabels) {
+      const icon = brandIconFor(label);
+      expect(icon.title).toBeTruthy();
+      expect(icon.hex).toMatch(/^[0-9A-F]{6}$/u);
+      expect(icon.path.length).toBeGreaterThan(20);
+      expect(icon.source).toMatch(/^https:\/\//u);
+      expect(icon.license).toBeTruthy();
+    }
+  });
+
+  it('resolves every configured social service mark', () => {
+    for (const label of socialLabels) {
+      expect(brandIconFor(label)).toMatchObject({ title: label });
+    }
+  });
+
+  it('keeps the registry closed over all content-facing labels', () => {
+    expect(brandIconLabels).toEqual([
+      'Linux', 'Docker', 'Nginx', 'Proxmox / KVM', 'Git', 'Python', 'Vue.js',
+      'JavaScript', 'C# / .NET', 'Flutter / Dart', 'PostgreSQL / SQL',
+      'Headless WordPress', 'Java', 'GitHub', 'GitLab', 'LinkedIn',
+    ]);
+    expect(() => brandIconFor('Unlisted technology')).toThrow(/No official brand icon/u);
+  });
+
+  it('renders a decorative, non-focusable SVG while leaving the visible label to its caller', () => {
+    const wrapper = mount(BrandIcon, { props: { label: 'Linux' } });
+    const svg = wrapper.get('svg');
+
+    expect(svg.attributes('aria-hidden')).toBe('true');
+    expect(svg.attributes('focusable')).toBe('false');
+    expect(svg.attributes('data-brand-icon')).toBe('Linux');
+    expect(svg.get('path').attributes('d')).toBe(brandIconFor('Linux').path);
+    expect(wrapper.text()).toBe('');
+  });
+});

tests/unit/components.test.ts

@@ -13,6 +13,8 @@ const infrastructure: InfrastructureCaseStudy = {
   bands: [
     { id: 'ingress-tls', title: 'Ingress and TLS', summary: 'Managed encrypted ingress.' },
     { id: 'identity-access', title: 'Identity and access', summary: 'Protected service access.' },
+    { id: 'service-lifecycle', title: 'Service lifecycle', summary: 'Managed container lifecycle.' },
+    { id: 'operations', title: 'Operations', summary: 'Routine maintenance and investigation.' },
   ],
 };
 
@@ -40,16 +42,29 @@ const publicProject: PublicProject = {
 describe('semantic section components', () => {
   it('gives the infrastructure graphic an accessible name, description, caption, and visible text equivalent', () => {
     const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
-    const svg = wrapper.get('svg');
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
 
-    expect(svg.attributes('role')).toBe('img');
-    expect(svg.attributes('aria-labelledby')).toContain('safe-infrastructure-diagram-title');
-    expect(svg.attributes('aria-describedby')).toContain('safe-infrastructure-diagram-description');
+    expect(flow.attributes('role')).toBe('img');
+    expect(flow.attributes('aria-labelledby')).toBe('safe-infrastructure-diagram-title');
+    expect(flow.attributes('aria-describedby')).toBe('safe-infrastructure-diagram-description');
     expect(wrapper.get('figcaption').text()).toContain('Secure self-hosted platform and lifecycle');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Ingress and TLS');
     expect(wrapper.get('[data-testid="infrastructure-text-equivalent"]').text()).toContain('Identity and access');
   });
 
+  it('renders the real infrastructure route with explicit trust boundaries and operational support', () => {
+    const wrapper = mount(InfrastructureDiagram, { props: { infrastructure } });
+    const flow = wrapper.get('[data-testid="infrastructure-flow"]');
+
+    expect(flow.findAll('[data-infrastructure-node]').map((node) => node.attributes('data-infrastructure-node'))).toEqual([
+      'visitor', 'nginx-tls', 'authentication', 'containerized-services', 'operations',
+    ]);
+    expect(flow.findAll('[data-trust-boundary]').map((boundary) => boundary.text())).toEqual([
+      'Public edge', 'Access boundary', 'Service boundary',
+    ]);
+    expect(flow.text()).toContain('fail2ban guard');
+  });
+
   it('does not turn private project content into a link container', () => {
     const wrapper = mount(ProjectCaseStudy, { props: { project: privateProject, priority: 'primary' } });