FN-058: add Medieval appearance theme

Add a bundled pixel-font Medieval theme with parchment and wood visual styling across dashboard and desktop surfaces.

- Add Medieval theme tokens, swatches, first-paint persistence, and selector integration.\n- Bundle Press Start 2P typography with responsive modal styling and documentation.\n- Add theme behavior tests, screenshots, and a published-package changeset.\n\nFiles changed:\n .changeset/fn-058-medieval-theme.md                |   7 ++\n docs/dashboard-guide.md                            |   5 +-\n docs/settings-reference.md                         |   2 +-\n packages/core/src/types/ui/execution-and-ui.ts     |   5 ++\n .../dashboard/app/__tests__/medieval-theme.test.ts |  71 +++++++++++++++++\n .../dashboard/app/components/ThemeSelector.css     |  15 +++\n .../components/__tests__/ThemeDropdown.test.tsx    |   2 +-\n .../components/__tests__/ThemeSelector.test.tsx    |  14 ++--\n .../__tests__/CommandCenterControls.test.tsx       |  10 ++-\n packages/dashboard/app/components/themeOptions.ts  |   1 +\n .../dashboard/app/hooks/__tests__/useTheme.test.ts |  28 +++++++\n packages/dashboard/app/index.html                  |   4 +-\n packages/dashboard/app/main.tsx                    |   1 +\n packages/dashboard/app/public/theme-data.css       |  86 +++++++++++++++++++++\n packages/dashboard/app/styles.css                  |  24 ++++++\n packages/dashboard/package.json                    |   1 +\n packages/desktop/src/renderer/index.html           |   3 +-\n pnpm-lock.yaml                                     |   8 ++\n screenshots/fn-058-medieval-theme-desktop.png      | Bin 0 -> 19898 bytes\n screenshots/fn-058-medieval-theme-mobile.png       | Bin 0 -> 14996 bytes\n 20 files changed, 269 insertions(+), 18 deletions(-)

Fusion-Task-Id: FN-058

Fusion-Task-Lineage: b7ce1b83-59ba-4516-8073-c1e8c46bb181

Co-authored-by: Fusion <noreply@runfusion.ai>

.changeset/fn-058-medieval-theme.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": minor
+---
+
+summary: Add a Medieval dashboard theme with parchment surfaces and wood-framed modals.
+category: feature
+dev: Bundles the local Press Start 2P pixel font without a CDN request.

docs/dashboard-guide.md

@@ -2248,11 +2248,12 @@ Tokens in the table are stable. Renaming or removing one requires a deprecation
 <!-- FNXC:DashboardTheming 2026-07-31-21:28: Sage is a built-in persisted muted olive palette with soft green-gray surfaces and readable dark and light counterparts; keep this inventory and its count synchronized with COLOR_THEMES. -->
 <!-- FNXC:MidnightTheme 2026-08-03-02:05: Midnight is selectable and persists from the shared Settings and Command Center list across web and Electron startup; its deep-navy/violet dark palette has a cool pale light counterpart. -->
 <!-- FNXC:DashboardTheming 2026-08-18-05:45: Velvet is a persisted plum/burgundy palette with rose-gold dark-mode accents and a warm blush-white light counterpart; keep its inventory entry and count synchronized with COLOR_THEMES. -->
+<!-- FNXC:DashboardTheming 2026-08-19-20:07: Medieval is a persisted palette with restrained parchment surfaces, wood-framed generic modals, and a locally bundled pixel display face; keep this operator inventory synchronized with COLOR_THEMES. -->
 <!-- FNXC:DashboardTheming 2026-07-21-12:20: FN-8471 keeps the Settings current-theme row and Command Center compact trigger on one filterable shared list so operators can discover any rendered theme name without changing the persisted selection until they choose an option. -->
 
-Dark/light modes via `data-theme`; fresh installs default to System mode so the resolved theme follows `prefers-color-scheme` until the user explicitly chooses Light, Dark, or System. 89 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including Cobalt (saturated blue), Clay (warm terracotta), Moss (muted forest green), Aurora (navy/teal/violet dark surfaces with a misty blue-white light counterpart), Calm (low-stimulation slate/sage dark surfaces with a misty blue-white light counterpart), Dawn (indigo/plum dark surfaces with muted amber accents and a dawn-white light counterpart), Sage (soft green-gray surfaces with a muted olive accent and readable dark/light ramps), Midnight (deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart), Velvet (deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart), Factory Dark (graphite/steel dark surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart), and Factory Light (bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart), the Shadcn zinc-neutral theme with an orange default highlight/accent, Shadcn Custom (the same base with sanitized per-token color-picker overrides), and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono and Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; Shadcn Mono retains its selected id), Shadcn Black (pure black and white), Shadcn Gray (fully neutral zinc-gray accent), and Shadcn Gray Blue (blue-gray slate neutral surfaces with a muted slate-blue accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. Glass Silver preserves the Glass theme's frosted translucent surfaces and transparent modal overlay behavior while using silver and graphite accents instead of purple/pink.
+Dark/light modes via `data-theme`; fresh installs default to System mode so the resolved theme follows `prefers-color-scheme` until the user explicitly chooses Light, Dark, or System. 90 color themes via `data-color-theme` (lazy-loaded from `app/public/theme-data.css`), including Cobalt (saturated blue), Clay (warm terracotta), Moss (muted forest green), Aurora (navy/teal/violet dark surfaces with a misty blue-white light counterpart), Calm (low-stimulation slate/sage dark surfaces with a misty blue-white light counterpart), Dawn (indigo/plum dark surfaces with muted amber accents and a dawn-white light counterpart), Sage (soft green-gray surfaces with a muted olive accent and readable dark/light ramps), Midnight (deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart), Velvet (deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart), Medieval (restrained parchment surfaces, wood-framed generic modals, and local Press Start 2P pixel typography), Factory Dark (graphite/steel dark surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart), and Factory Light (bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart), the Shadcn zinc-neutral theme with an orange default highlight/accent, Shadcn Custom (the same base with sanitized per-token color-picker overrides), and its color family: Shadcn Blue/Green/Red/Purple/Pink/Orange/Yellow, Shadcn Mono and Shadcn Mono Red/Blue/Green/Purple/Pink/Orange/Yellow (grayscale surfaces with color-specific accents; Shadcn Mono retains its selected id), Shadcn Black (pure black and white), Shadcn Gray (fully neutral zinc-gray accent), and Shadcn Gray Blue (blue-gray slate neutral surfaces with a muted slate-blue accent). Air is the minimal, borderless, paper-like preset with near-monochrome tokens and CSS-only chrome flattening. Glass Silver preserves the Glass theme's frosted translucent surfaces and transparent modal overlay behavior while using silver and graphite accents instead of purple/pink.
 
-Choose color themes from **Settings → Appearance** or from the Command Center **Overview** theme card. Settings merges its selector into the current-theme row, which opens the full color-theme list; Command Center keeps the compact `ThemeDropdown` trigger. Both use the same filterable list: type a visible theme name to narrow the displayed labels and color-chip swatches, then select an option to change the theme. Filtering alone never changes the chosen theme. The selected color theme, including Midnight and Velvet, persists in browser storage and is validated before React hydrates on both web and Electron startup. The left sidebar active-item highlight and resize accent use the active theme's `--accent`, so they follow the selected Shadcn accent instead of staying fixed blue.
+Choose color themes from **Settings → Appearance** or from the Command Center **Overview** theme card. Settings merges its selector into the current-theme row, which opens the full color-theme list; Command Center keeps the compact `ThemeDropdown` trigger. Both use the same filterable list: type a visible theme name to narrow the displayed labels and color-chip swatches, then select an option to change the theme. Filtering alone never changes the chosen theme. The selected color theme, including Midnight, Velvet, and Medieval, persists in browser storage and is validated before React hydrates on both web and Electron startup. The left sidebar active-item highlight and resize accent use the active theme's `--accent`, so they follow the selected Shadcn accent instead of staying fixed blue.
 
 - **Base tokens** (`--bg`, `--surface`, etc.) — redefine in `:root`, `[data-theme="light"]`, and every theme block.
 - **Semantic tokens** (`--autopilot-pulse`, `--event-error-text`, `--badge-mission-*`, `--fab-*`) — `:root` + `[data-theme="light"]` only; no per-color-theme overrides.

docs/settings-reference.md

@@ -75,7 +75,7 @@ Defaults from `DEFAULT_GLOBAL_SETTINGS`; key scope from `GLOBAL_SETTINGS_KEYS`.
 |---|---|---:|---|
 | <a id="anthropicauthpreference"></a>`anthropicAuthPreference` | `"api-key" \| "subscription"` | `"api-key"` | Which Anthropic credential wins when BOTH a raw API key and a Claude subscription OAuth login are configured. `"api-key"` keeps the historical precedence; `"subscription"` moves the raw key below the OAuth steps so a stale or revoked saved key cannot shadow a working subscription (the `401 invalid x-api-key` failure mode). Global, because credentials live in the global `~/.fusion/agent/auth.json`. Never removes a source — with one credential configured, resolution reaches it under either value. Surfaced in Settings → Authentication, where the two Anthropic cards show which credential is in use; the control appears only when both are connected. |
 | `themeMode` | `"dark" \| "light" \| "system"` | `"system"` | Dashboard theme mode. Fresh installs follow the operating system light/dark preference until the user chooses Light, Dark, or System. |
-| `colorTheme` | `ColorTheme` | `"shadcn-ember"` | Dashboard color theme preset. Aurora is a built-in navy/teal/violet palette with a misty light counterpart; Calm is a low-stimulation slate/sage palette with a misty light counterpart; Dawn uses indigo/plum dark surfaces, amber accents, and dawn-white light surfaces; Midnight uses deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart; Velvet uses deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart; Factory Dark uses graphite/steel surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart; Factory Light uses bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart. Use `"shadcn-custom"` to show the separate custom shadcn color picker in Settings → Appearance and the Command Center theme card. |
+| `colorTheme` | `ColorTheme` | `"shadcn-ember"` | Dashboard color theme preset. Medieval adds restrained aged-parchment surfaces, a wood-framed generic modal treatment, and the locally bundled Press Start 2P pixel font with no CDN/runtime font request. Aurora is a built-in navy/teal/violet palette with a misty light counterpart; Calm is a low-stimulation slate/sage palette with a misty light counterpart; Dawn uses indigo/plum dark surfaces, amber accents, and dawn-white light surfaces; Midnight uses deep-navy surfaces with restrained violet/indigo accents and a cool pale light counterpart; Velvet uses deep plum/burgundy dark surfaces with rose-gold accents and a warm blush-white light counterpart; Factory Dark uses graphite/steel surfaces, cool gunmetal borders, and restrained safety-orange accents with a concrete-gray light counterpart; Factory Light uses bright concrete/warm-white surfaces, steel-gray borders, a darkened safety-orange accent, and a warm-graphite dark counterpart. Use `"shadcn-custom"` to show the separate custom shadcn color picker in Settings → Appearance and the Command Center theme card. |
 | `shadcnCustomColors` | `Record<string, string>` | `undefined` | Optional shadcn design-token override map for `"shadcn-custom"` only. Keys are CSS token names such as `--accent`, `--bg`, `--surface`, `--card`, `--border`, `--text`, `--text-muted`, workflow status tokens, and `--color-success`/`--color-warning`/`--color-error`; values must be sanitized `#RGB` or `#RRGGBB` hex colors. Missing or invalid entries fall back to the `shadcn-custom` base defaults and are not applied to other themes. |
 | `language` | `"en" \| "zh-CN" \| "zh-TW" \| "fr" \| "es" \| "ko" \| "pt-BR"` | `undefined` | UI language for the dashboard and TUI. When unset, the dashboard detects from localStorage → browser language and the CLI from `--lang` flag → environment locale, falling back to `en`. Validated at the store write boundary (`validateLocale`); invalid values are dropped. Reset to auto-detect via the dashboard's "Auto" language option or `fn settings set language auto` (clears the persisted key). |
 | `dashboardFontScalePct` | `number` | `100` | Dashboard font scale percentage used by Appearance settings. Valid range: `85` to `125`; applied pre-hydration via document root font-size so board typography (column headers/counts, task cards, and quick-entry text) scales with the setting from first paint. |

packages/core/src/types/ui/execution-and-ui.ts

@@ -109,6 +109,11 @@ export const COLOR_THEMES = [
   "brutalist",
   "neon-city",
   "parchment",
+  /*
+  FNXC:DashboardTheming 2026-08-19-19:23:
+  Medieval is a persisted selectable theme. Keep this ID and order synchronized with selector metadata and both web/Electron first-paint validators so a saved medieval preference survives startup before React hydration.
+  */
+  "medieval",
   "terminal",
   "glass",
   // FNXC:DashboardTheming 2026-07-01-00:00: Glass Silver is the silver/gray frosted sibling of Glass; keep this id in lockstep with dashboard/desktop validators and selector metadata so persisted explicit choices survive startup.

packages/dashboard/app/__tests__/medieval-theme.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { COLOR_THEMES as CORE_COLOR_THEMES } from "@fusion/core";
+import { COLOR_THEMES as DASHBOARD_COLOR_THEMES } from "../components/themeOptions";
+import { readAppFile } from "../test/cssFixture";
+
+/*
+FNXC:DashboardTheming 2026-08-19-19:23:
+Medieval must remain one persisted theme across core, selectors, and web/Electron first paint. Its visual contract is intentionally limited to parchment tokens and generic modal paint so the existing modal interaction and mobile layout remain unchanged.
+*/
+describe("Medieval color theme", () => {
+  const themeData = readAppFile("public/theme-data.css");
+  const themeSelector = readAppFile("components/ThemeSelector.css");
+  const styles = readAppFile("styles.css");
+  const dashboardIndexHtml = readAppFile("index.html");
+  const desktopIndexHtml = readAppFile("../../desktop/src/renderer/index.html");
+
+  it("keeps persisted, selector, and first-paint registries in exact order", () => {
+    const coreIds = [...CORE_COLOR_THEMES];
+    const dashboardIds = DASHBOARD_COLOR_THEMES.map((theme) => theme.value);
+    const dashboardValidThemes = extractValidThemes(dashboardIndexHtml);
+    const desktopValidThemes = extractValidThemes(desktopIndexHtml);
+
+    expect(CORE_COLOR_THEMES.filter((theme) => theme === "medieval")).toHaveLength(1);
+    expect(DASHBOARD_COLOR_THEMES).toContainEqual({ value: "medieval", label: "Medieval", className: "theme-swatch-medieval" });
+    expect(dashboardIds).toEqual(coreIds);
+    expect(dashboardValidThemes).toEqual(coreIds);
+    expect(desktopValidThemes).toEqual(coreIds);
+  });
+
+  it("defines readable parchment tokens and a bundled pixel display face in both modes", () => {
+    for (const selector of ['[data-color-theme="medieval"]', '[data-color-theme="medieval"][data-theme="light"]']) {
+      const block = extractSelectorBlock(themeData, selector);
+      for (const token of ["--bg:", "--surface:", "--card:", "--surface-hover:", "--border:", "--text:", "--color-success:", "--color-warning:", "--color-error:", "--color-info:", "--cta-bg:", "--cta-text:", "--accent:", "--focus-ring:", "--shadow-glow:", "--font-primary:"]) expect(block).toContain(token);
+      expect(block).toContain('"Press Start 2P", ui-monospace, monospace');
+    }
+    expect(themeData).toContain('[data-color-theme="medieval"] body');
+    expect(readAppFile("main.tsx")).toContain('@fontsource/press-start-2p/400.css');
+  });
+
+  it("uses mode-specific swatches and generic modal paint without changing modal behavior", () => {
+    for (const block of [extractSelectorBlock(themeData, ":root"), extractSelectorBlock(themeData, '[data-theme="light"]'), extractSelectorBlock(themeSelector, ".theme-swatch-medieval"), extractSelectorBlock(themeSelector, '[data-theme="light"] .theme-swatch-medieval')]) {
+      for (const sample of [1, 2, 3, 4]) expect(block).toContain(`medieval-swatch-sample-${sample}`);
+    }
+    const medievalModal = extractSelectorBlock(styles, '[data-color-theme="medieval"] .modal');
+    expect(medievalModal).toContain("border-color:");
+    expect(medievalModal).toContain("box-shadow:");
+    expect(medievalModal).toContain("background-image:");
+    expect(medievalModal).not.toMatch(/(?:position|width|max-height|z-index|resize|touch-action)\s*:/);
+    expect(styles).toContain('[data-color-theme="medieval"] .modal:not(.confirm-dialog)');
+    expect(styles).toContain('Mobile\'s generic modal reset removes all borders');
+  });
+});
+
+function extractValidThemes(html: string): string[] {
+  const match = html.match(/var validThemes = \[([\s\S]*?)\];/);
+  if (!match) throw new Error("Could not find pre-hydration validThemes array");
+  return [...match[1].matchAll(/["']([^"']+)["']/g)].map((themeMatch) => themeMatch[1]);
+}
+
+function extractSelectorBlock(css: string, selector: string): string {
+  const startIdx = css.indexOf(`${selector} {`);
+  if (startIdx === -1) throw new Error(`Could not find selector block: ${selector}`);
+  const openBraceIdx = css.indexOf("{", startIdx);
+  let depth = 1;
+  for (let index = openBraceIdx + 1; index < css.length; index++) {
+    if (css[index] === "{") depth++;
+    if (css[index] === "}") depth--;
+    if (depth === 0) return css.slice(startIdx, index + 1);
+  }
+  throw new Error(`Could not find closing brace for selector block: ${selector}`);
+}

packages/dashboard/app/components/ThemeSelector.css

@@ -681,6 +681,13 @@
   --swatch-sample-4: #be6e3c;
 }
 
+.theme-swatch-medieval {
+  --swatch-sample-1: var(--medieval-swatch-sample-1);
+  --swatch-sample-2: var(--medieval-swatch-sample-2);
+  --swatch-sample-3: var(--medieval-swatch-sample-3);
+  --swatch-sample-4: var(--medieval-swatch-sample-4);
+}
+
 .theme-swatch-terminal {
   --swatch-sample-1: #0a0a0a;
   --swatch-sample-2: #0f120d;
@@ -1368,3 +1375,11 @@
     grid-template-columns: 1fr;
   }
 }
+
+
+[data-theme="light"] .theme-swatch-medieval {
+  --swatch-sample-1: var(--medieval-swatch-sample-1);
+  --swatch-sample-2: var(--medieval-swatch-sample-2);
+  --swatch-sample-3: var(--medieval-swatch-sample-3);
+  --swatch-sample-4: var(--medieval-swatch-sample-4);
+}

packages/dashboard/app/components/__tests__/ThemeDropdown.test.tsx

@@ -6,7 +6,7 @@ import { ThemeDropdown } from "../ThemeDropdown";
 import { readAppFile } from "../../test/cssFixture";
 
 // FNXC:Theme 2026-07-16-14:30: FN-8146 pins the historical Settings-grid set, including restored shadcn-mono, so a removal from COLOR_THEMES cannot make the all-themes checks pass circularly.
-const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
+const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'medieval', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
 
 function renderedThemeIds(listbox: HTMLElement) {
   return within(listbox).getAllByRole("option").map((option) => {

packages/dashboard/app/components/__tests__/ThemeSelector.test.tsx

@@ -5,7 +5,7 @@ import { ThemeSelector } from "../ThemeSelector";
 
 // FNXC:Theme 2026-07-16-14:30: FN-8146 pins the historical Settings-grid set, including restored shadcn-mono, so a removal from COLOR_THEMES cannot make the all-themes checks pass circularly.
 // FNXC:Theme 2026-08-16-05:07: FN-8730 (5931e10345) added the Midnight preset; the census gains "midnight" between sage and factory-dark to match COLOR_THEMES order.
-const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
+const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'medieval', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
 
 function renderedThemeIds(listbox: HTMLElement) {
   return within(listbox).getAllByRole("option").map((option) => {
@@ -59,7 +59,7 @@ describe("ThemeSelector", () => {
     expect(onShadcnCustomColorsChange).toHaveBeenCalledWith({});
   });
 
-  it("opens shared swatched options and selects a color theme", () => {
+  it("opens shared swatched options and selects Medieval from the Settings current-row host", () => {
     const { onColorThemeChange } = renderSelector("forest");
     const trigger = screen.getByRole("button", { name: /current theme dark \/ forest/i });
 
@@ -67,12 +67,12 @@ describe("ThemeSelector", () => {
 
     const listbox = screen.getByRole("listbox", { name: "Color theme" });
     expect(renderedThemeIds(listbox)).toEqual(EXPECTED_THEME_IDS);
-    fireEvent.change(screen.getByRole("searchbox", { name: /filter color themes/i }), { target: { value: "ocean" } });
-    const oceanOption = within(listbox).getByRole("option", { name: "Ocean" });
-    expect(oceanOption.querySelector(".theme-swatch-ocean")).toBeTruthy();
-    fireEvent.click(oceanOption);
+    fireEvent.change(screen.getByRole("searchbox", { name: /filter color themes/i }), { target: { value: "medieval" } });
+    const medievalOption = within(listbox).getByRole("option", { name: "Medieval" });
+    expect(medievalOption.querySelector(".theme-swatch-medieval")).toBeTruthy();
+    fireEvent.keyDown(medievalOption, { key: "Enter" });
 
-    expect(onColorThemeChange).toHaveBeenCalledWith("ocean");
+    expect(onColorThemeChange).toHaveBeenCalledWith("medieval");
     expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
   });
 

packages/dashboard/app/components/command-center/__tests__/CommandCenterControls.test.tsx

@@ -77,7 +77,7 @@ function cssRule(css: string, selector: string) {
 
 // FNXC:Theme 2026-07-16-14:30: FN-8146 pins the historical Settings-grid set, including restored shadcn-mono, so a removal from COLOR_THEMES cannot make the all-themes checks pass circularly.
 // FNXC:Theme 2026-08-16-05:07: FN-8730 (5931e10345) added the Midnight preset; the census gains "midnight" between sage and factory-dark to match COLOR_THEMES order.
-const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
+const EXPECTED_THEME_IDS = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'medieval', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'] as const;
 
 function renderedThemeIds(listbox: HTMLElement) {
   return within(listbox).getAllByRole("option").map((option) => {
@@ -116,10 +116,12 @@ describe("CommandCenterControls concurrency markers", () => {
     fireEvent.click(trigger);
     const listbox = screen.getByRole("listbox", { name: "Color theme" });
     expect(renderedThemeIds(listbox)).toEqual(EXPECTED_THEME_IDS);
-    fireEvent.change(screen.getByRole("searchbox", { name: /filter color themes/i }), { target: { value: "dawn" } });
-    fireEvent.click(screen.getByRole("option", { name: "Dawn" }));
+    fireEvent.change(screen.getByRole("searchbox", { name: /filter color themes/i }), { target: { value: "medieval" } });
+    const medievalOption = screen.getByRole("option", { name: "Medieval" });
+    expect(medievalOption.querySelector(".theme-swatch-medieval")).toBeTruthy();
+    fireEvent.click(medievalOption);
 
-    expect(onColorThemeChange).toHaveBeenCalledWith("dawn");
+    expect(onColorThemeChange).toHaveBeenCalledWith("medieval");
     expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
   });
 

packages/dashboard/app/components/themeOptions.ts

@@ -50,6 +50,7 @@ export const COLOR_THEMES: { value: ColorTheme; label: string; className: string
   { value: "brutalist", label: "Brutalist", className: "theme-swatch-brutalist" },
   { value: "neon-city", label: "Neon City", className: "theme-swatch-neon-city" },
   { value: "parchment", label: "Parchment", className: "theme-swatch-parchment" },
+  { value: "medieval", label: "Medieval", className: "theme-swatch-medieval" },
   { value: "terminal", label: "Terminal", className: "theme-swatch-terminal" },
   { value: "glass", label: "Glass", className: "theme-swatch-glass" },
   { value: "glass-silver", label: "Glass Silver", className: "theme-swatch-glass-silver" },

packages/dashboard/app/hooks/__tests__/useTheme.test.ts

@@ -210,6 +210,18 @@ describe("useTheme", () => {
     expect(document.documentElement.getAttribute("data-color-theme")).toBe("dawn");
   });
 
+  it("hydrates, caches, and applies Medieval from backend settings", async () => {
+    mockFetchGlobalSettings.mockResolvedValue({ colorTheme: "medieval" });
+
+    const { result } = renderHook(() => useTheme());
+
+    await waitFor(() => {
+      expect(result.current.colorTheme).toBe("medieval");
+    });
+    expect(localStorageMock[COLOR_THEME_STORAGE_KEY]).toBe("medieval");
+    expect(document.documentElement.getAttribute("data-color-theme")).toBe("medieval");
+  });
+
   it("hydrates dashboard font scale from backend on mount", async () => {
     mockFetchGlobalSettings.mockResolvedValue({ dashboardFontScalePct: 110 });
 
@@ -826,6 +838,22 @@ describe("useTheme", () => {
     expect(document.documentElement.getAttribute("data-color-theme")).toBe("shadcn-mono");
   });
 
+  it("preserves explicit Medieval color theme from localStorage and writes it through", () => {
+    localStorageMock[COLOR_THEME_STORAGE_KEY] = "medieval";
+
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current.colorTheme).toBe("medieval");
+    expect(document.documentElement.getAttribute("data-color-theme")).toBe("medieval");
+
+    act(() => {
+      result.current.setColorTheme("medieval");
+    });
+
+    expect(localStorageMock[COLOR_THEME_STORAGE_KEY]).toBe("medieval");
+    expect(mockUpdateGlobalSettings).toHaveBeenCalledWith({ colorTheme: "medieval" });
+  });
+
   it("preserves explicit Glass and Glass Silver color themes from localStorage", () => {
     localStorageMock[COLOR_THEME_STORAGE_KEY] = "glass-silver";
 

packages/dashboard/app/index.html

@@ -164,10 +164,10 @@
             mode = 'system';
           }
           var colorTheme = localStorage.getItem('kb-dashboard-color-theme') || 'shadcn-ember';
-          var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'];
+          var validThemes = ['default', 'ocean', 'forest', 'sunset', 'zen', 'berry', 'high-contrast', 'industrial', 'monochrome', 'slate', 'ash', 'air', 'graphite', 'silver', 'solarized', 'factory', 'factory-mono', 'ayu', 'one-dark', 'nord', 'dracula', 'gruvbox', 'tokyo-night', 'catppuccin-mocha', 'github-dark', 'everforest', 'rose-pine', 'kanagawa', 'night-owl', 'palenight', 'monokai-pro', 'slime', 'brutalist', 'neon-city', 'parchment', 'medieval', 'terminal', 'glass', 'glass-silver', 'horizon', 'vitesse', 'outrun', 'snazzy', 'porple', 'espresso', 'mars', 'poimandres', 'ember', 'rust', 'copper', 'foundry', 'carbon', 'sandstone', 'lagoon', 'frost', 'lavender', 'neon-bloom', 'sepia', 'cobalt', 'clay', 'moss', 'aurora', 'calm', 'dawn', 'sage', 'midnight', 'velvet', 'factory-dark', 'factory-light', 'shadcn', 'shadcn-ember', 'shadcn-custom', 'shadcn-blue', 'shadcn-green', 'shadcn-red', 'shadcn-purple', 'shadcn-pink', 'shadcn-orange', 'shadcn-yellow', 'shadcn-mono', 'shadcn-mono-red', 'shadcn-mono-blue', 'shadcn-mono-green', 'shadcn-mono-purple', 'shadcn-mono-pink', 'shadcn-mono-orange', 'shadcn-mono-yellow', 'shadcn-black', 'shadcn-gray', 'shadcn-gray-blue'];
           // FNXC:DashboardTheming 2026-06-30-00:00: Unset startup theme is Shadcn Ember; explicit stored legacy ids such as "default" and "ocean" remain valid and must not be migrated.
           // FNXC:DashboardTheming 2026-07-16-14:30: FN-8146 restores Shadcn Mono as a distinct persisted choice, so bootstrap must retain its stored id instead of remapping it to Mono Red.
-          // FNXC:MidnightTheme 2026-08-03-02:05: Web first paint must accept persisted Midnight before React hydrates; invalid or unset values still fall back to Shadcn Ember.
+          // FNXC:DashboardTheming 2026-08-19-19:23: Web first paint must accept persisted Medieval before React hydrates; invalid or unset values still fall back to Shadcn Ember.
           if (!validThemes.includes(colorTheme)) {
             colorTheme = 'shadcn-ember';
           }

packages/dashboard/app/main.tsx

@@ -9,6 +9,7 @@ import { installSwUpdate } from "./swUpdate";
 import { bootstrapShellHostContext } from "./shell-host";
 import { registerBundledPluginViews } from "./plugins/registerBundledPluginViews";
 import { i18nReady } from "./i18n";
+import "@fontsource/press-start-2p/400.css";
 import "./styles.css";
 
 // Install the bearer-token fetch wrapper before React mounts so every API

packages/dashboard/app/public/theme-data.css

@@ -34,6 +34,10 @@
   --velvet-swatch-sample-2: #2b1d24;
   --velvet-swatch-sample-3: #c99a89;
   --velvet-swatch-sample-4: #b66b7d;
+  --medieval-swatch-sample-1: #21170f;
+  --medieval-swatch-sample-2: #392417;
+  --medieval-swatch-sample-3: #d5ad67;
+  --medieval-swatch-sample-4: #8db08b;
   --factory-dark-swatch-sample-1: #0d0f10;
   --factory-dark-swatch-sample-2: #1a1d1f;
   --factory-dark-swatch-sample-3: #e89532;
@@ -69,6 +73,10 @@
   --velvet-swatch-sample-2: #f0e2e0;
   --velvet-swatch-sample-3: #8a4a55;
   --velvet-swatch-sample-4: #a9636f;
+  --medieval-swatch-sample-1: #f4ead2;
+  --medieval-swatch-sample-2: #e1ceb0;
+  --medieval-swatch-sample-3: #765125;
+  --medieval-swatch-sample-4: #446b48;
   --factory-dark-swatch-sample-1: #eceef0;
   --factory-dark-swatch-sample-2: #d9dde0;
   --factory-dark-swatch-sample-3: #a95612;
@@ -7445,6 +7453,84 @@ FNXC:DashboardTheming 2026-07-20-00:00:
 Aurora gives operators navy/teal/violet dark surfaces and misty light surfaces. Literal palette values stay in these canonical tokens, while globally defined swatch variables keep the unselected option accurate in either mode.
 */
 /*
+FNXC:DashboardTheming 2026-08-19-19:42:
+Medieval keeps the dashboard clean and legible while applying a restrained aged-parchment canvas, wood-framed generic modals, and the bundled pixel display face. Press Start 2P remains primary, while explicit system fallbacks render any unsupported localized glyph rather than showing tofu; terminal typography stays on --font-mono and no runtime font request is made.
+*/
+[data-color-theme="medieval"] {
+  --bg: #21170f;
+  --surface: #302116;
+  --card: #3b2a1c;
+  --card-hover: #4a3523;
+  --surface-hover: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
+  --border: #795735;
+  --text: #fff1ce;
+  --text-muted: #ddc79e;
+  --text-dim: #aa926c;
+  --todo: #d5ad67;
+  --in-progress: #79afaa;
+  --in-progress-rgb: 121, 175, 170;
+  --in-review: #c79ad4;
+  --triage: #e5ba6a;
+  --done: #8db08b;
+  --color-success: #9dca8c;
+  --color-warning: #e5ba6a;
+  --color-error: #ef8e75;
+  --color-info: #82b9c4;
+  --cta-bg: #80512c;
+  --cta-border: #d5ad67;
+  --cta-text: #fff8e5;
+  --cta-bg-hover: #9a6637;
+  --cta-border-hover: #ecd093;
+  --cta-glow: 0 0 var(--space-md) color-mix(in srgb, var(--cta-border) 30%, transparent);
+  --accent: #d5ad67;
+  --accent-text: #21170f;
+  --logo-accent: var(--accent);
+  --shadow-glow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 28%, transparent);
+  --focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 24%, transparent);
+  --focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 36%, transparent);
+  --font-primary: "Press Start 2P", ui-monospace, monospace;
+}
+
+[data-color-theme="medieval"][data-theme="light"] {
+  --bg: #f4ead2;
+  --surface: #ead9b8;
+  --card: #fff8e5;
+  --card-hover: #f0dfc0;
+  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--text) 8%);
+  --border: #a77b4a;
+  --text: #302116;
+  --text-muted: #674e31;
+  --text-dim: #896f4d;
+  --todo: #8a612b;
+  --in-progress: #2e7473;
+  --in-progress-rgb: 46, 116, 115;
+  --in-review: #704c87;
+  --triage: #8a612b;
+  --done: #446b48;
+  --color-success: #3d7544;
+  --color-warning: #8a612b;
+  --color-error: #a94335;
+  --color-info: #2f6f89;
+  --cta-bg: #765125;
+  --cta-border: #61401e;
+  --cta-text: #fff8e5;
+  --cta-bg-hover: #5f3e1c;
+  --cta-border-hover: #4b3015;
+  --cta-glow: 0 0 var(--space-md) color-mix(in srgb, var(--cta-border) 24%, transparent);
+  --accent: #765125;
+  --accent-text: #fff8e5;
+  --logo-accent: var(--accent);
+  --shadow-glow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) 20%, transparent);
+  --focus-ring: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 18%, transparent);
+  --focus-ring-strong: 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--accent) 28%, transparent);
+  --font-primary: "Press Start 2P", ui-monospace, monospace;
+}
+
+[data-color-theme="medieval"] body {
+  background-color: var(--bg);
+  background-image: linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 0 0), repeating-linear-gradient(0deg, transparent 0, transparent var(--space-2xl), color-mix(in srgb, var(--border) 12%, transparent) calc(var(--space-2xl) + var(--btn-border-width)));
+}
+/*
 FNXC:MidnightTheme 2026-08-03-02:05:
 Midnight gives operators deep-navy surfaces with restrained violet/indigo accents in dark mode and a cool pale counterpart in light mode. These complete token blocks preserve distinct semantic statuses, AA-readable text and CTA pairs, and globally resolvable swatch previews for unselected selector options.
 */

packages/dashboard/app/styles.css

@@ -1313,6 +1313,16 @@ Modal and dock pop-out surfaces should not darken or blur the app behind them. K
   display: flex;
 }
 
+/*
+FNXC:DashboardTheming 2026-08-19-19:27:
+Medieval modal chrome uses only paint properties on the shared generic surface, preserving modal sizing, dismissal, focus, touch, and mobile behavior while providing the requested restrained wood frame.
+*/
+[data-color-theme="medieval"] .modal {
+  border-color: color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
+  box-shadow: inset 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--card) 70%, var(--border) 30%), var(--shadow-lg);
+  background-image: linear-gradient(90deg, color-mix(in srgb, var(--border) 16%, transparent), transparent var(--space-2xl), color-mix(in srgb, var(--border) 12%, transparent));
+}
+
 .modal {
   position: relative;
   background: var(--surface);
@@ -3791,6 +3801,20 @@ Toast text must contrast its status background across every dashboard theme and
     display: none;
   }
 
+  /*
+  FNXC:DashboardTheming 2026-08-19-19:52:
+  Mobile's generic modal reset removes all borders, which would erase Medieval's shared wood frame at the
+  actual narrow viewport. Restore only tokenized border paint here; sizing, touch, dismissal, and the
+  fullscreen mobile modal contract remain owned by the generic rule above.
+  */
+  [data-color-theme="medieval"] .modal:not(.confirm-dialog),
+  [data-color-theme="medieval"] .modal-lg,
+  [data-color-theme="medieval"] .modal-md,
+  [data-color-theme="medieval"] .gm-modal {
+    border: var(--btn-border-width) solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
+    box-shadow: inset 0 0 0 var(--btn-border-width) color-mix(in srgb, var(--card) 70%, var(--border) 30%), var(--shadow-lg);
+  }
+
   /* Settings modal: use the section picker as the only mobile navigation */
   .settings-layout {
     flex-direction: column;

packages/dashboard/package.json

@@ -106,6 +106,7 @@
     "@codemirror/view": "^6.36.4",
     "@earendil-works/pi-ai": "0.84.1",
     "@earendil-works/pi-coding-agent": "0.84.1",
+    "@fontsource/press-start-2p": "^5.3.0",
     "@fusion-plugin-examples/claude-runtime": "workspace:*",
     "@fusion-plugin-examples/cli-printing-press": "workspace:*",
     "@fusion-plugin-examples/compound-engineering": "workspace:*",

packages/desktop/src/renderer/index.html

@@ -50,6 +50,7 @@
             "brutalist",
             "neon-city",
             "parchment",
+            "medieval",
             "terminal",
             "glass",
             "glass-silver",
@@ -107,7 +108,7 @@
           ];
 
           // FNXC:DashboardTheming 2026-06-30-00:00: Desktop pre-hydration mirrors the full core theme union before falling back to Shadcn Ember, so every explicit legacy id stays valid on native startup.
-          // FNXC:MidnightTheme 2026-08-03-02:05: Electron first paint must accept persisted Midnight before React hydrates; invalid or unset values still fall back to Shadcn Ember.
+          // FNXC:DashboardTheming 2026-08-19-19:23: Electron first paint must accept persisted Medieval before React hydrates; invalid or unset values still fall back to Shadcn Ember.
           if (!validThemes.includes(colorTheme)) {
             colorTheme = "shadcn-ember";
           }

pnpm-lock.yaml

@@ -275,6 +275,9 @@ importers:
       '@earendil-works/pi-coding-agent':
         specifier: 0.84.1
         version: 0.84.1(@modelcontextprotocol/sdk@1.28.0(zod@3.25.76))(ws@8.21.1)(zod@3.25.76)
+      '@fontsource/press-start-2p':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@fusion-plugin-examples/claude-runtime':
         specifier: workspace:*
         version: link:../../plugins/fusion-plugin-claude-runtime
@@ -2346,6 +2349,9 @@ packages:
       '@noble/hashes':
         optional: true
 
+  '@fontsource/press-start-2p@5.3.0':
+    resolution: {integrity: sha512-gxWFxdeDglPhEYSwEeooomcaFK8kSQYLQwVxfnOJeYRj2sPEHXjpVtFgEaYfqzOjuAJGrIcJOipu2KY5YkbyuQ==}
+
   '@google/genai@1.52.0':
     resolution: {integrity: sha512-gwSvbpiN/17O9TbsqSsE/OzZcpv5Fo4RQjdngGgogtuB9RsyJ8ZHhX5KjHj1bp5N9snN2eK8LDGXSaWW2hof8Q==}
     engines: {node: '>=20.0.0'}
@@ -9530,6 +9536,8 @@ snapshots:
     optionalDependencies:
       '@noble/hashes': 2.3.0
 
+  '@fontsource/press-start-2p@5.3.0': {}
+
   '@google/genai@1.52.0':
     dependencies:
       google-auth-library: 10.9.0