From 3fbb2634343f2407edb4fba675da81e5231cada7 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Tue, 6 Oct 2026 13:01:24 -0500
Subject: [PATCH 1/2] feat(system-builder): the builder screen (4a2b)

components/BuilderScreen.tsx takes over the window (fixed, above the map and panels, below
the windows): a sidebar with the system's name and badges, MY SYSTEMS, the pages from
BUILDER_PAGES (each titled with what it is for), SAVE / PUBLISH and EXIT TO MAP with the
design's flipped exit icon; a bar naming the open page; a status line with the problem
count, the last action and the draft's save state. Autosave (builderSession) is wired for
the pages to come; leaving saves first and shows EXIT.EXE (STAY / EXIT WITHOUT SAVING / TRY
AGAIN) only when that fails; the tab asks before closing while anything is unsaved.
PUBLISH saves, opens PROBLEMS with the reason while there are any, else publishes and says
whether the game now runs it.

SYSTEMS.EXE gains OPEN IN BUILDER, and CREATE opens the new system there on SETUP. App
holds which system the builder is open on; MY SYSTEMS returns to SYSTEMS.EXE.

Pages are placeholders until 4a3 (SETUP) and 4b1 (WORDS, FEATURES); PROBLEMS is real.
---
 CHANGELOG.md                                  |   8 +
 frontend/src/App.tsx                          |  16 ++
 frontend/src/components/BuilderScreen.tsx     | 266 ++++++++++++++++++
 frontend/src/components/SystemsWindow.tsx     |  13 +-
 .../__tests__/BuilderScreen.test.tsx          | 180 ++++++++++++
 .../__tests__/SystemsWindow.test.tsx          |  25 ++
 6 files changed, 506 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/BuilderScreen.tsx
 create mode 100644 frontend/src/components/__tests__/BuilderScreen.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46cbcb1b..c9999115 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -71,6 +71,14 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Under the hood
 
+- **The system builder opens.** OPEN IN BUILDER in SYSTEMS.EXE, or CREATE for a new system, opens
+  the builder over the whole window. Its sidebar names the system and its version, lists its pages
+  (SETUP, WORDS, FEATURES, STATS & RULES, CHARACTER SHEET, NPCS, TRY IT, PROBLEMS), each saying
+  what it is for, and holds SAVE, PUBLISH, MY SYSTEMS and EXIT TO MAP. PROBLEMS lists what stops
+  a system from being published, and PUBLISH opens it instead of publishing while there are any.
+  A status line along the bottom says when the draft was last saved. The other pages say what they
+  will hold; they come in the next updates.
+
 - **How the builder will save.** Changes are saved by themselves about five seconds after you
   stop editing, and always when you leave; SAVE saves at once and PUBLISH makes the system what
   the game runs. Leaving the builder only warns you when a save failed. An edit made while a save
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bb7749dd..91772ad2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -62,6 +62,8 @@ import { useEnemyVehicles } from './hooks/useEnemyVehicles';
 import { hasVehicles } from './sheets/vehicleSystems';
 import { NpcLibrary } from './components/NpcLibrary';
 import { SystemsWindow } from './components/SystemsWindow';
+import { BuilderScreen } from './components/BuilderScreen';
+import type { BuilderPage } from './sheets/builderSession';
 import { NpcSheetWindow } from './components/NpcSheetWindow';
 import { TvPortrait } from './components/TvPortrait';
 import { headshotsForShape } from './headshots';
@@ -300,6 +302,8 @@ function App() {
   const [isNpcLibraryOpen, setIsNpcLibraryOpen] = useState(false);
   const [npcLibraryPos, setNpcLibraryPos] = useState(() => ({ x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 200 }));
   const [isSystemsOpen, setIsSystemsOpen] = useState(false);
+  /** The system the builder is open on, taking over the window (4a2b), and the page it opened at. */
+  const [builder, setBuilder] = useState<{ id: string; page: BuilderPage } | null>(null);
   const [systemsPos, setSystemsPos] = useState(() => ({ x: window.innerWidth / 2 - 310, y: window.innerHeight / 2 - 260 }));
   const [openNpcSheet, setOpenNpcSheet] = useState<{ id: number; npc_label: string; token_shape?: string; locationId?: number } | null>(null);
   // NPC sheet linked to the currently selected token (admin) - drives
@@ -2330,6 +2334,18 @@ function App() {
                 pos={systemsPos}
                 setPos={setSystemsPos}
                 onClose={() => setIsSystemsOpen(false)}
+                onOpenBuilder={(id, page) => { setIsSystemsOpen(false); setBuilder({ id, page }); }}
+              />
+            )}
+            {builder && token && isPrimaryAdmin && (
+              <BuilderScreen
+                key={builder.id}
+                token={token}
+                systemId={builder.id}
+                startPage={builder.page}
+                running={gameSystem}
+                onExit={() => setBuilder(null)}
+                onMySystems={() => { setBuilder(null); setIsSystemsOpen(true); }}
               />
             )}
             {openPlayerSheetUser && token && (
diff --git a/frontend/src/components/BuilderScreen.tsx b/frontend/src/components/BuilderScreen.tsx
new file mode 100644
index 00000000..e4c05ae7
--- /dev/null
+++ b/frontend/src/components/BuilderScreen.tsx
@@ -0,0 +1,266 @@
+import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { systemsApi, type Definition, type SystemCopies } from '../sheets/systemsApi';
+import {
+  createAutosave, saveStatus, exitWarning, leaveNeedsAsking, publishBlocked, publishedMessage,
+  BUILDER_PAGES, type Autosave, type BuilderPage,
+} from '../sheets/builderSession';
+import { SYSTEMS_CHANGED_EVENT } from '../sheets/systemsLibrary';
+
+// The system builder (4a2b): it takes over the whole window, with no map. A sidebar down the left
+// holds the system's name, its pages, SAVE and PUBLISH, and EXIT TO MAP; the open page fills the
+// rest, under a bar naming it and over a status line. Design: docs/mockups/builder-design
+// (Main, Exit), approved 2026-09-29, with the saving the user chose on 2026-10-06 (two layers:
+// autosave writes the draft, SAVE saves now, PUBLISH goes live; leaving warns only when saving
+// failed). What it says is sheets/builderSession.ts.
+//
+// The pages themselves come in later pieces (SETUP 4a3, WORDS and FEATURES 4b1...); until then
+// each says what it will hold. PROBLEMS already lists the draft's real problems.
+
+interface Props {
+  token: string;
+  systemId: string;
+  /** The page it opens on: SETUP for a system just made. */
+  startPage?: BuilderPage;
+  /** The system the game runs, so PUBLISH can say whether the game now runs the new version. */
+  running: string | null;
+  /** Back to the map. */
+  onExit: () => void;
+  /** Back to SYSTEMS.EXE. */
+  onMySystems: () => void;
+  fetcher?: typeof fetch;
+}
+
+/** Above the map and its panels, below the windows (DraggableWindow starts at 2000). */
+const Z = 1900;
+const mono: React.CSSProperties = { fontFamily: "'Courier New', Courier, monospace" };
+const sideBtn = (active = false): React.CSSProperties => ({
+  ...mono, minHeight: 32, padding: '4px 12px', textAlign: 'left', cursor: 'pointer', letterSpacing: 1, fontSize: 12,
+  background: active ? 'var(--green)' : 'transparent', color: active ? 'var(--black)' : 'var(--green)',
+  border: `1px solid ${active ? 'var(--green)' : 'color-mix(in srgb, var(--green) 45%, transparent)'}`, fontWeight: active ? 700 : 400,
+});
+const toneColor = { quiet: 'var(--text)', warn: 'var(--warning)', bad: 'var(--danger)' } as const;
+
+/** The exit icon from the design: a door with an arrow, flipped to point back to the map. */
+const ExitIcon = () => (
+  <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden style={{ flexShrink: 0 }}>
+    <g transform="translate(24 0) scale(-1 1)">
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
+        d="M19.285 12h-8.012m5.237 3.636L20 12l-3.49-3.636M13.455 7V4H4v16h9.455v-3" />
+    </g>
+  </svg>
+);
+
+export function BuilderScreen({ token, systemId, startPage = 'setup', running, onExit, onMySystems, fetcher }: Props) {
+  const api = useMemo(() => systemsApi(token, fetcher), [token, fetcher]);
+  const [system, setSystem] = useState<SystemCopies | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [page, setPage] = useState<BuilderPage>(startPage);
+  const [status, setStatus] = useState<{ text: string; bad?: boolean } | null>(null);
+  const [exitError, setExitError] = useState<{ error: string; then: () => void } | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [, redraw] = useReducer((n: number) => n + 1, 0);
+  const autosave = useRef<Autosave<Definition> | null>(null);
+
+  const load = useCallback(async () => {
+    const r = await api.get(systemId);
+    if (!r.ok) { setLoadError(r.error); return null; }
+    setSystem(r.value);
+    return r.value;
+  }, [api, systemId]);
+
+  useEffect(() => {
+    let live = true;
+    load().then((sys) => {
+      if (!live || !sys) return;
+      autosave.current = createAutosave<Definition>({
+        save: async (definition) => {
+          const r = await api.saveDraft(systemId, definition);
+          return r.ok ? { ok: true, problems: r.value.problems } : { ok: false, error: r.error };
+        },
+        onChange: redraw,
+        initialProblems: sys.problems,
+      });
+      redraw();
+    });
+    return () => { live = false; autosave.current?.dispose(); };
+  }, [api, load, systemId]);
+
+  // Closing or reloading the tab asks first while anything is unsaved.
+  useEffect(() => {
+    const ask = (e: BeforeUnloadEvent) => {
+      if (autosave.current && leaveNeedsAsking(autosave.current.state)) { e.preventDefault(); e.returnValue = ''; }
+    };
+    window.addEventListener('beforeunload', ask);
+    return () => window.removeEventListener('beforeunload', ask);
+  }, []);
+
+  const state = autosave.current?.state ?? null;
+  const problems = autosave.current?.problems ?? system?.problems ?? [];
+  const name = system?.draft?.name || system?.name || '';
+
+  /** Save, then leave; if saving fails, say so and let the GM choose. */
+  const leave = async (then: () => void) => {
+    if (!autosave.current || await autosave.current.flush()) { then(); return; }
+    const s = autosave.current.state;
+    setExitError({ error: s.kind === 'failed' ? s.error : 'Could not reach the server.', then });
+  };
+
+  const save = async () => {
+    if (!autosave.current || busy) return;
+    setBusy(true);
+    await autosave.current.flush();
+    setBusy(false);
+    setStatus(null);
+  };
+
+  const publish = async () => {
+    if (!autosave.current || busy) return;
+    setBusy(true);
+    const saved = await autosave.current.flush();
+    if (!saved) { setBusy(false); return; }
+    const blocked = publishBlocked(autosave.current.problems);
+    if (blocked) { setBusy(false); setPage('problems'); setStatus({ text: blocked, bad: true }); return; }
+    const r = await api.publish(systemId);
+    setBusy(false);
+    if (!r.ok) {
+      if (r.problems) setPage('problems');
+      setStatus({ text: r.error, bad: true });
+      return;
+    }
+    setStatus({ text: publishedMessage(r.value.version, running === systemId) });
+    await load();
+    window.dispatchEvent(new Event(SYSTEMS_CHANGED_EVENT));
+  };
+
+  const current = BUILDER_PAGES.find((p) => p.id === page)!;
+  const saveLine = state ? saveStatus(state) : null;
+
+  return (
+    <div
+      role="main"
+      aria-label="System builder"
+      data-testid="builder-screen"
+      style={{ position: 'fixed', inset: 0, zIndex: Z, display: 'flex', background: 'var(--black)', color: 'var(--text)', ...mono }}
+    >
+      {/* The sidebar */}
+      <nav aria-label="Builder" style={{
+        width: 232, flexShrink: 0, boxSizing: 'border-box', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 6,
+        background: 'var(--black)', borderRight: '1px solid var(--green)', boxShadow: '0 0 12px color-mix(in srgb, var(--green) 35%, transparent)',
+        overflowY: 'auto',
+      }}>
+        <div style={{ fontSize: 10, letterSpacing: 2, opacity: 0.7 }}>SYSTEM_BUILDER.EXE</div>
+        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--green)', letterSpacing: 1, lineHeight: '19px', overflowWrap: 'anywhere' }}>
+          {name.toUpperCase() || '…'}
+        </div>
+        {system && (
+          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 8, fontSize: 10, letterSpacing: 1 }}>
+            {system.published
+              ? <span style={{ padding: '1px 5px', border: '1px solid color-mix(in srgb, var(--green) 50%, transparent)' }}>PUBLISHED v{system.version}</span>
+              : <span style={{ padding: '1px 5px', border: '1px solid var(--warning)', color: 'var(--warning)' }}>NEVER PUBLISHED</span>}
+            {problems.length > 0 && (
+              <span style={{ padding: '1px 5px', border: '1px solid var(--danger)', color: 'var(--danger)' }}>
+                {problems.length} PROBLEM{problems.length === 1 ? '' : 'S'}
+              </span>
+            )}
+          </div>
+        )}
+        <button type="button" style={sideBtn()} onClick={() => leave(onMySystems)}>MY SYSTEMS</button>
+        <div style={{ marginTop: 10, fontSize: 10, letterSpacing: 2, opacity: 0.6 }}>PAGES</div>
+        {BUILDER_PAGES.map((p) => (
+          <button
+            key={p.id}
+            type="button"
+            aria-current={p.id === page ? 'page' : undefined}
+            title={p.what}
+            onClick={() => { setPage(p.id); setStatus(null); }}
+            style={{ ...sideBtn(p.id === page), display: 'flex', justifyContent: 'space-between', gap: 8 }}
+          >
+            <span>{p.label}</span>
+            {p.id === 'problems' && <span style={{ opacity: 0.8 }}>{problems.length}</span>}
+          </button>
+        ))}
+        <span style={{ flexGrow: 1, minHeight: 12 }} />
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 6 }}>
+          <button type="button" disabled={!autosave.current || busy} onClick={save}
+            style={{ ...sideBtn(), textAlign: 'center', borderColor: 'var(--green)' }}>SAVE</button>
+          <button type="button" disabled={!autosave.current || busy} onClick={publish}
+            title={publishBlocked(problems) ?? 'Make this the version the game runs'}
+            style={{ ...sideBtn(), textAlign: 'center', borderColor: 'var(--cyan)', color: 'var(--cyan)' }}>PUBLISH</button>
+        </div>
+        <button type="button" aria-label="Exit the builder and go back to the map" onClick={() => leave(onExit)}
+          style={{ ...sideBtn(), minHeight: 40, display: 'flex', alignItems: 'center', gap: 10, letterSpacing: 2, borderColor: 'var(--green)' }}>
+          <ExitIcon /><span>EXIT TO MAP</span>
+        </button>
+      </nav>
+
+      {/* The open page */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+        <header style={{
+          height: 48, flexShrink: 0, boxSizing: 'border-box', padding: '0 16px', display: 'flex', alignItems: 'center', gap: 12,
+          borderBottom: '1px solid var(--green)', boxShadow: '0 0 10px color-mix(in srgb, var(--green) 30%, transparent)', fontSize: 12,
+        }}>
+          <h1 style={{ margin: 0, color: 'var(--green)', fontSize: 14, letterSpacing: 1 }}>{current.label}</h1>
+          <span style={{ opacity: 0.6 }}>{current.what}</span>
+        </header>
+
+        <section aria-label={current.label} className="cyber-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: 24, fontSize: 13, lineHeight: 1.5 }}>
+          {loadError && <p role="alert" style={{ color: 'var(--danger)' }}>{loadError}</p>}
+          {!system && !loadError && <p style={{ opacity: 0.7 }}>LOADING…</p>}
+          {system && page === 'problems' && (problems.length === 0
+            ? <p style={{ color: 'var(--green)' }}>No problems. It can be published.</p>
+            : (
+              <ul style={{ margin: 0, paddingLeft: '1.2em', color: 'var(--warning)', display: 'flex', flexDirection: 'column', gap: 4 }}>
+                {problems.map((p, i) => <li key={i}><b>{p.where}</b>: {p.message}</li>)}
+              </ul>
+            ))}
+          {system && page !== 'problems' && (
+            <div style={{ maxWidth: '60ch', border: '1px dashed color-mix(in srgb, var(--green) 45%, transparent)', padding: '16px 18px' }}>
+              <p style={{ margin: '0 0 6px', color: 'var(--green)', letterSpacing: 1 }}>{current.label}</p>
+              <p style={{ margin: 0, opacity: 0.8 }}>{current.what} This page arrives in a coming update.</p>
+            </div>
+          )}
+        </section>
+
+        <footer style={{
+          height: 28, flexShrink: 0, boxSizing: 'border-box', padding: '0 16px', display: 'flex', alignItems: 'center', gap: 20,
+          borderTop: '1px solid color-mix(in srgb, var(--green) 50%, transparent)', fontSize: 11,
+        }}>
+          <span style={{ color: problems.length ? 'var(--warning)' : 'var(--green)' }}>PROBLEMS: {problems.length}</span>
+          <span role="status" style={{ color: status?.bad ? 'var(--danger)' : 'var(--cyan)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {status?.text ?? ''}
+          </span>
+          <span style={{ flexGrow: 1 }} />
+          {saveLine && <span data-testid="save-status" style={{ color: toneColor[saveLine.tone] }}>{saveLine.text}</span>}
+        </footer>
+      </div>
+
+      {exitError && (() => {
+        const w = exitWarning(name, exitError.error);
+        return (
+          <div style={{ position: 'absolute', inset: 0, background: 'color-mix(in srgb, var(--black) 80%, transparent)', display: 'grid', placeItems: 'center' }}>
+            <div role="dialog" aria-labelledby="builder-exit-title" style={{
+              width: 480, maxWidth: '92vw', boxSizing: 'border-box', background: 'var(--black)', border: '1px solid var(--green)',
+              boxShadow: '0 0 24px color-mix(in srgb, var(--green) 45%, transparent)',
+            }}>
+              <div style={{ height: 30, padding: '0 12px', display: 'flex', alignItems: 'center', background: 'var(--green)', color: 'var(--black)' }}>
+                <b id="builder-exit-title" style={{ fontSize: 12, letterSpacing: 1 }}>{w.title}</b>
+              </div>
+              <div style={{ padding: '20px 20px 18px', display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13, lineHeight: '19px' }}>
+                <div>{w.text}</div>
+                <div style={{ opacity: 0.8 }}>{w.hint}</div>
+                <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
+                  <button type="button" style={{ ...sideBtn(), height: 34 }} onClick={() => setExitError(null)}>STAY</button>
+                  <span style={{ flexGrow: 1 }} />
+                  <button type="button" style={{ ...sideBtn(), height: 34, borderColor: 'var(--danger)', color: 'var(--danger)' }}
+                    onClick={() => { const then = exitError.then; setExitError(null); then(); }}>EXIT WITHOUT SAVING</button>
+                  <button type="button" style={{ ...sideBtn(true), height: 34 }}
+                    onClick={() => { const then = exitError.then; setExitError(null); leave(then); }}>TRY AGAIN</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })()}
+    </div>
+  );
+}
diff --git a/frontend/src/components/SystemsWindow.tsx b/frontend/src/components/SystemsWindow.tsx
index b739a029..852030bf 100644
--- a/frontend/src/components/SystemsWindow.tsx
+++ b/frontend/src/components/SystemsWindow.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TerminalWindow, useFolder, type TerminalFolder } from './TerminalWindow';
+import type { BuilderPage } from '../sheets/builderSession';
 import { systemsApi } from '../sheets/systemsApi';
 import {
   badgesFor, versionLabel, versionFact, originFact, changedFact, deleteBlocked, exportBlocked,
@@ -37,6 +38,8 @@ interface Props {
   pos: { x: number; y: number };
   setPos: (p: { x: number; y: number }) => void;
   onClose: () => void;
+  /** Opens the builder on a system, at a page: OPEN IN BUILDER, and CREATE (on SETUP). */
+  onOpenBuilder?: (id: string, page: BuilderPage) => void;
   fetcher?: typeof fetch;
 }
 
@@ -262,7 +265,7 @@ function InstallPanel({ api, onInstalled }: { api: Api; onInstalled: (id: string
   );
 }
 
-export function SystemsWindow({ token, running, pos, setPos, onClose, fetcher }: Props) {
+export function SystemsWindow({ token, running, pos, setPos, onClose, onOpenBuilder, fetcher }: Props) {
   const api = useMemo(() => systemsApi(token, fetcher), [token, fetcher]);
   const [folder, setFolder] = useFolder(FOLDERS, null);
   const [systems, setSystems] = useState<LibrarySystem[] | null>(null);
@@ -374,9 +377,10 @@ export function SystemsWindow({ token, running, pos, setPos, onClose, fetcher }:
     setConfirmDelete(false);
   };
 
-  /** Made in NEW: shown picked in SYSTEMS. The builder opens it from here once it exists (4a2). */
+  /** Made in NEW: the builder opens it on SETUP (decided 2026-10-03); without one, it is shown picked. */
   const made = async (id: string, name: string) => {
     await changed(id);
+    if (onOpenBuilder) { onOpenBuilder(id, 'setup'); return; }
     setFolder('systems');
     setStatus({ text: createdMessage(name) });
   };
@@ -456,6 +460,11 @@ export function SystemsWindow({ token, running, pos, setPos, onClose, fetcher }:
       )}
 
       <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+        {onOpenBuilder && (
+          <button type="button" className="utility-btn active" style={btn} disabled={busy} onClick={() => onOpenBuilder(system.id, 'setup')}>
+            OPEN IN BUILDER
+          </button>
+        )}
         <button
           type="button" className="utility-btn" style={btn} disabled={!!renaming || busy}
           onClick={() => { setRenaming({ text: system.name, error: null }); setConfirmDelete(false); setStatus(null); }}
diff --git a/frontend/src/components/__tests__/BuilderScreen.test.tsx b/frontend/src/components/__tests__/BuilderScreen.test.tsx
new file mode 100644
index 00000000..8bf44d8e
--- /dev/null
+++ b/frontend/src/components/__tests__/BuilderScreen.test.tsx
@@ -0,0 +1,180 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { BuilderScreen } from '../BuilderScreen';
+import { SYSTEMS_CHANGED_EVENT } from '../../sheets/systemsLibrary';
+import type { SystemCopies } from '../../sheets/systemsApi';
+
+/**
+ * The builder screen (4a2b): it takes over the window, with its own sidebar of pages, SAVE,
+ * PUBLISH and EXIT TO MAP. Design approved 2026-09-29; saving decided 2026-10-06 (two layers,
+ * leaving warns only when saving failed). The pages arrive in later pieces; PROBLEMS is real now.
+ */
+
+const HEARTH = 'sys_aaaaaaaaaaaaaaaa';
+const PROBLEM = { where: 'derived armor', message: 'Depends on itself: armor → armor' };
+
+let served: SystemCopies;
+let calls: { url: string; method: string }[];
+let publishAnswer: { status: number; body: unknown };
+
+const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+  const url = String(input);
+  const method = init?.method ?? 'GET';
+  calls.push({ url, method });
+  const json = (status: number, body: unknown) => ({ ok: status < 300, status, json: async () => body }) as unknown as Response;
+  if (url === `/api/systems/${HEARTH}` && method === 'GET') return json(200, served);
+  if (url === `/api/systems/${HEARTH}/publish`) {
+    if (publishAnswer.status === 200) served = { ...served, version: served.version + 1 };
+    return json(publishAnswer.status, publishAnswer.body);
+  }
+  return json(404, { error: 'No such route' });
+});
+
+beforeEach(() => {
+  calls = [];
+  served = {
+    id: HEARTH, name: 'Hearth', version: 3, updatedAt: '2026-10-06 14:10:00', publishedAt: '2026-10-05 20:00:00',
+    draft: { format: 1, name: 'Hearth' }, published: { format: 1, name: 'Hearth' }, problems: [],
+  };
+  publishAnswer = { status: 200, body: { version: 4 } };
+});
+afterEach(() => cleanup());
+
+const open = (over: Partial<React.ComponentProps<typeof BuilderScreen>> = {}) => {
+  const onExit = vi.fn();
+  const onMySystems = vi.fn();
+  render(<BuilderScreen token="gm" systemId={HEARTH} running={null} onExit={onExit} onMySystems={onMySystems} fetcher={fakeServer as typeof fetch} {...over} />);
+  return { onExit, onMySystems };
+};
+const sidebar = () => screen.getByRole('navigation', { name: 'Builder' });
+const ready = () => waitFor(() => expect(screen.getByTestId('save-status')).toBeTruthy());
+
+describe('the builder', () => {
+  it('takes over the window, naming the system, on the page it was opened at', async () => {
+    open({ startPage: 'setup' });
+    await ready();
+    expect(screen.getByTestId('builder-screen').style.position).toBe('fixed');
+    expect(within(sidebar()).getByText('HEARTH')).toBeTruthy();
+    expect(within(sidebar()).getByText('PUBLISHED v3')).toBeTruthy();
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('SETUP');
+    expect(within(sidebar()).getByText('SETUP').closest('button')!.getAttribute('aria-current')).toBe('page');
+    expect(screen.getByText(/This page arrives in a coming update\./)).toBeTruthy();
+    expect(screen.getByTestId('save-status').textContent).toMatch(/^DRAFT · SAVED \d\d:\d\d$/);
+  });
+
+  it('lists every page, each saying what it is for, and opens the one picked', async () => {
+    open();
+    await ready();
+    const pages = within(sidebar()).getAllByRole('button').filter((b) => b.title && b.textContent !== 'PUBLISH');
+    expect(pages.map((b) => b.textContent)).toEqual(['SETUP', 'WORDS', 'FEATURES', 'STATS & RULES', 'CHARACTER SHEET', 'NPCS', 'TRY IT', 'PROBLEMS0']);
+    expect(pages[1].title).toBe('What the game calls things: HP, credits, skills.');
+    await userEvent.click(pages[1]);
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('WORDS');
+    expect(pages[1].getAttribute('aria-current')).toBe('page');
+  });
+
+  it('a never-published draft says so', async () => {
+    served = { ...served, version: 0, published: null };
+    open();
+    await ready();
+    expect(within(sidebar()).getByText('NEVER PUBLISHED')).toBeTruthy();
+  });
+
+  it('says when the system can\'t be read', async () => {
+    open({ fetcher: (async () => ({ ok: false, status: 404, json: async () => ({ error: 'No such system' }) })) as never });
+    expect((await screen.findByRole('alert')).textContent).toBe('No such system');
+  });
+});
+
+describe('PROBLEMS', () => {
+  it('lists the draft\'s problems, counted in the sidebar and the status line', async () => {
+    served = { ...served, problems: [PROBLEM, { where: 'name', message: 'Required' }] };
+    open({ startPage: 'problems' });
+    await ready();
+    expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['derived armor: Depends on itself: armor → armor', 'name: Required']);
+    expect(within(sidebar()).getByText('2 PROBLEMS')).toBeTruthy();
+    expect(screen.getByText('PROBLEMS: 2')).toBeTruthy();
+  });
+
+  it('says when there are none', async () => {
+    open({ startPage: 'problems' });
+    await ready();
+    expect(screen.getByText('No problems. It can be published.')).toBeTruthy();
+  });
+});
+
+describe('PUBLISH', () => {
+  it('publishes, says the game runs it now when it does, and tells the picker', async () => {
+    const told = vi.fn();
+    window.addEventListener(SYSTEMS_CHANGED_EVENT, told);
+    open({ running: HEARTH });
+    await ready();
+    await userEvent.click(screen.getByText('PUBLISH'));
+    expect(await screen.findByText('Published v4. The game runs it from now on.')).toBeTruthy();
+    expect(calls.filter((c) => c.method === 'POST').map((c) => c.url)).toEqual([`/api/systems/${HEARTH}/publish`]);
+    await waitFor(() => expect(within(sidebar()).getByText('PUBLISHED v4')).toBeTruthy());
+    expect(told).toHaveBeenCalledTimes(1);
+    window.removeEventListener(SYSTEMS_CHANGED_EVENT, told);
+  });
+
+  it('says it is ready to pick when the game runs another system', async () => {
+    open({ running: 'cities_without_number' });
+    await ready();
+    await userEvent.click(screen.getByText('PUBLISH'));
+    expect(await screen.findByText('Published v4. It\'s ready to pick in the game-system picker.')).toBeTruthy();
+  });
+
+  it('with problems, opens PROBLEMS and says why, sending nothing', async () => {
+    served = { ...served, problems: [PROBLEM] };
+    open({ startPage: 'words' });
+    await ready();
+    expect(screen.getByText('PUBLISH').title).toBe('Fix this problem before publishing.');
+    await userEvent.click(screen.getByText('PUBLISH'));
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('PROBLEMS');
+    expect(screen.getByRole('status').textContent).toBe('Fix this problem before publishing.');
+    expect(calls.some((c) => c.method === 'POST')).toBe(false);
+  });
+
+  it('shows the server\'s refusal, opening PROBLEMS when it lists some', async () => {
+    publishAnswer = { status: 409, body: { error: 'Fix these before publishing', problems: [PROBLEM] } };
+    open();
+    await ready();
+    await userEvent.click(screen.getByText('PUBLISH'));
+    expect(await screen.findByText('Fix these before publishing')).toBeTruthy();
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('PROBLEMS');
+    publishAnswer = { status: 500, body: { error: 'Could not reach the systems store' } };
+    await userEvent.click(within(sidebar()).getByText('WORDS'));
+    await userEvent.click(screen.getByText('PUBLISH'));
+    expect(await screen.findByText('Could not reach the systems store')).toBeTruthy();
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('WORDS');
+  });
+});
+
+describe('leaving', () => {
+  it('EXIT TO MAP goes straight back when nothing is unsaved', async () => {
+    const { onExit, onMySystems } = open();
+    await ready();
+    await userEvent.click(screen.getByLabelText('Exit the builder and go back to the map'));
+    expect(onExit).toHaveBeenCalledTimes(1);
+    expect(onMySystems).not.toHaveBeenCalled();
+  });
+
+  it('MY SYSTEMS goes back to SYSTEMS.EXE', async () => {
+    const { onExit, onMySystems } = open();
+    await ready();
+    await userEvent.click(screen.getByText('MY SYSTEMS'));
+    expect(onMySystems).toHaveBeenCalledTimes(1);
+    expect(onExit).not.toHaveBeenCalled();
+  });
+
+  it('closing the browser tab doesn\'t ask while everything is saved', async () => {
+    open();
+    await ready();
+    const e = new Event('beforeunload', { cancelable: true });
+    window.dispatchEvent(e);
+    expect(e.defaultPrevented).toBe(false);
+  });
+});
diff --git a/frontend/src/components/__tests__/SystemsWindow.test.tsx b/frontend/src/components/__tests__/SystemsWindow.test.tsx
index 392db7ac..d2a0b311 100644
--- a/frontend/src/components/__tests__/SystemsWindow.test.tsx
+++ b/frontend/src/components/__tests__/SystemsWindow.test.tsx
@@ -261,6 +261,31 @@ const folder = async (name: 'SYSTEMS' | 'NEW' | 'INSTALL') => {
   await userEvent.click(screen.getByRole('tab', { name }));
 };
 
+describe('the builder', () => {
+  it('OPEN IN BUILDER opens the picked system there', async () => {
+    const onOpenBuilder = vi.fn();
+    render(<SystemsWindow token="gm" running={null} pos={{ x: 0, y: 0 }} setPos={vi.fn()} onClose={vi.fn()} onOpenBuilder={onOpenBuilder} fetcher={fakeServer as typeof fetch} />);
+    await waitFor(() => expect(listed()).toHaveLength(3));
+    await userEvent.click(entry('Neon Exchange'));
+    await userEvent.click(screen.getByText('OPEN IN BUILDER'));
+    expect(onOpenBuilder).toHaveBeenCalledWith(NEON, 'setup');
+  });
+
+  it('CREATE opens the new system there, on SETUP', async () => {
+    const onOpenBuilder = vi.fn();
+    render(<SystemsWindow token="gm" running={null} pos={{ x: 0, y: 0 }} setPos={vi.fn()} onClose={vi.fn()} onOpenBuilder={onOpenBuilder} fetcher={fakeServer as typeof fetch} />);
+    await folder('NEW');
+    await userEvent.type(screen.getByLabelText('NAME'), 'Tidewater{Enter}');
+    await waitFor(() => expect(onOpenBuilder).toHaveBeenCalledWith(COPY, 'setup'));
+  });
+
+  it('has no OPEN IN BUILDER without a builder to open', async () => {
+    open();
+    await waitFor(() => expect(listed()).toHaveLength(3));
+    expect(screen.queryByText('OPEN IN BUILDER')).toBeNull();
+  });
+});
+
 describe('NEW', () => {
   it('makes a draft from a name, then shows it picked in SYSTEMS', async () => {
     const told = vi.fn();

From 2004c5cc4850bbda1617a177e39afbd0db0c7215 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Tue, 6 Oct 2026 13:23:22 -0500
Subject: [PATCH 2/2] feat(system-builder): the builder's sidebar as the map's
 icon rail; MY SYSTEMS inside it (4a2b)

The sidebar is the map's .icon-rail with .rail-btn buttons and placeholder icons, widening over the page to show the names on hover or keyboard focus (asked by the user, 2026-10-06): EXIT TO MAP where the power button sits, MY SYSTEMS and the pages in the middle, SAVE and PUBLISH at the foot; PROBLEMS carries a count. The system's name, version and problem badge move to the page's top bar.

MY SYSTEMS is now a page of the builder (the user asked, same day): every system with its badges, the open one marked; picking another saves and opens it here (onOpenSystem). Renaming, copying, sharing and installing stay in SYSTEMS.EXE, one button away (onManageSystems).
---
 CHANGELOG.md                                  |  14 +-
 frontend/src/App.tsx                          |   3 +-
 frontend/src/components/BuilderScreen.tsx     | 252 ++++++++++++++----
 .../__tests__/BuilderScreen.test.tsx          | 117 ++++++--
 4 files changed, 303 insertions(+), 83 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9999115..5890e280 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,12 +72,14 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Under the hood
 
 - **The system builder opens.** OPEN IN BUILDER in SYSTEMS.EXE, or CREATE for a new system, opens
-  the builder over the whole window. Its sidebar names the system and its version, lists its pages
-  (SETUP, WORDS, FEATURES, STATS & RULES, CHARACTER SHEET, NPCS, TRY IT, PROBLEMS), each saying
-  what it is for, and holds SAVE, PUBLISH, MY SYSTEMS and EXIT TO MAP. PROBLEMS lists what stops
-  a system from being published, and PUBLISH opens it instead of publishing while there are any.
-  A status line along the bottom says when the draft was last saved. The other pages say what they
-  will hold; they come in the next updates.
+  the builder over the whole window. Its sidebar is an icon rail like the map's, which widens to
+  show the names when you point at it: EXIT TO MAP where the power button sits, MY SYSTEMS, the
+  pages (SETUP, WORDS, FEATURES, STATS & RULES, CHARACTER SHEET, NPCS, TRY IT, PROBLEMS), each
+  saying what it is for, and SAVE and PUBLISH at the foot. MY SYSTEMS lists every system with its
+  badges, and picking one opens it in the builder. PROBLEMS lists what stops a system from being
+  published, and PUBLISH opens it instead of publishing while there are any. The bar along the top
+  names the system and its version; a status line along the bottom says when the draft was last
+  saved. The other pages say what they will hold; they come in the next updates.
 
 - **How the builder will save.** Changes are saved by themselves about five seconds after you
   stop editing, and always when you leave; SAVE saves at once and PUBLISH makes the system what
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 91772ad2..43e46a7a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2345,7 +2345,8 @@ function App() {
                 startPage={builder.page}
                 running={gameSystem}
                 onExit={() => setBuilder(null)}
-                onMySystems={() => { setBuilder(null); setIsSystemsOpen(true); }}
+                onOpenSystem={(id) => setBuilder({ id, page: 'setup' })}
+                onManageSystems={() => { setBuilder(null); setIsSystemsOpen(true); }}
               />
             )}
             {openPlayerSheetUser && token && (
diff --git a/frontend/src/components/BuilderScreen.tsx b/frontend/src/components/BuilderScreen.tsx
index e4c05ae7..bfdefd9f 100644
--- a/frontend/src/components/BuilderScreen.tsx
+++ b/frontend/src/components/BuilderScreen.tsx
@@ -4,7 +4,7 @@ import {
   createAutosave, saveStatus, exitWarning, leaveNeedsAsking, publishBlocked, publishedMessage,
   BUILDER_PAGES, type Autosave, type BuilderPage,
 } from '../sheets/builderSession';
-import { SYSTEMS_CHANGED_EVENT } from '../sheets/systemsLibrary';
+import { SYSTEMS_CHANGED_EVENT, badgesFor, versionLabel, type Badge, type LibrarySystem } from '../sheets/systemsLibrary';
 
 // The system builder (4a2b): it takes over the whole window, with no map. A sidebar down the left
 // holds the system's name, its pages, SAVE and PUBLISH, and EXIT TO MAP; the open page fills the
@@ -25,11 +25,20 @@ interface Props {
   running: string | null;
   /** Back to the map. */
   onExit: () => void;
-  /** Back to SYSTEMS.EXE. */
-  onMySystems: () => void;
+  /** Another system, opened here in its place (MY SYSTEMS). */
+  onOpenSystem: (id: string) => void;
+  /** Back to SYSTEMS.EXE on the map, to rename, copy, share or install. */
+  onManageSystems: () => void;
   fetcher?: typeof fetch;
 }
 
+/**
+ * MY SYSTEMS is the builder's own list of systems, not a way out of it: picking one opens it here
+ * (the user asked, 2026-10-06, after it first went back to SYSTEMS.EXE on the map).
+ */
+const MY_SYSTEMS = { id: 'systems' as const, label: 'MY SYSTEMS', what: 'Every system you have made or installed. Pick one to work on it.' };
+type Page = BuilderPage | 'systems';
+
 /** Above the map and its panels, below the windows (DraggableWindow starts at 2000). */
 const Z = 1900;
 const mono: React.CSSProperties = { fontFamily: "'Courier New', Courier, monospace" };
@@ -50,14 +59,85 @@ const ExitIcon = () => (
   </svg>
 );
 
-export function BuilderScreen({ token, systemId, startPage = 'setup', running, onExit, onMySystems, fetcher }: Props) {
+/** How wide the rail grows to show the names. */
+const RAIL_OPEN = 220;
+
+const BADGE_BORDER: Record<Badge['tone'], string> = {
+  run: 'var(--cyan)', plain: 'var(--dark-green)', warn: 'var(--warning)', bad: 'var(--danger)',
+};
+
+const badge = (border: string, color?: string): React.CSSProperties => ({
+  fontSize: 10, letterSpacing: 1, padding: '1px 5px', border: `1px solid ${border}`, ...(color ? { color } : {}),
+});
+
+/** A placeholder icon: stand-ins until the builder's own are drawn. */
+const icon = (...paths: string[]) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+    {paths.map((d) => <path key={d} d={d} />)}
+  </svg>
+);
+const Icons: Record<BuilderPage | 'builder' | 'systems' | 'save' | 'publish', React.ReactNode> = {
+  builder: icon('M3 3h7v7H3z', 'M14 3h7v7h-7z', 'M3 14h7v7H3z', 'M14 14h7v7h-7z'),
+  systems: icon('M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'),
+  setup: icon('M4 21v-7', 'M4 10V3', 'M12 21v-9', 'M12 8V3', 'M20 21v-5', 'M20 12V3', 'M1 14h6', 'M9 8h6', 'M17 16h6'),
+  words: icon('M4 7V4h16v3', 'M9 20h6', 'M12 4v16'),
+  features: icon('M8 5h8a7 7 0 0 1 0 14H8A7 7 0 0 1 8 5z', 'M16 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'),
+  rules: icon('M18 7V4H6l6 8-6 8h12v-3'),
+  sheet: icon('M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8', 'M10 9H8'),
+  npcs: icon('M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2', 'M9 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8z', 'M23 21v-2a4 4 0 0 0-3-3.87', 'M16 3.13a4 4 0 0 1 0 7.75'),
+  try: icon('M5 3l14 9-14 9z'),
+  problems: icon('M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z', 'M12 9v4', 'M12 17h.01'),
+  save: icon('M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z', 'M17 21v-8H7v8', 'M7 3v5h8'),
+  publish: icon('M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'),
+};
+
+/**
+ * One button on the rail, the map's .rail-btn: its icon centered in the narrow rail, its name
+ * beside it, seen once the rail is wide.
+ */
+function RailButton({ icon: glyph, label, onClick, title, active, disabled, count, big, aria }: {
+  icon: React.ReactNode; label: string; onClick: () => void; title?: string; active?: boolean;
+  disabled?: boolean; count?: number; big?: boolean; aria?: string;
+}) {
+  return (
+    <button
+      type="button"
+      className={`rail-btn ${active ? 'active' : ''}`}
+      aria-label={aria ?? label}
+      aria-current={active ? 'page' : undefined}
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      style={{
+        width: 'auto', flexShrink: 0, position: 'relative', justifyContent: 'flex-start', gap: 10, padding: 0,
+        margin: '0 calc((var(--rail-width) - var(--rail-btn-size)) / 2)', overflow: 'hidden', whiteSpace: 'nowrap',
+        ...(big ? { height: 'calc(var(--rail-btn-size) + 6px)' } : {}),
+      }}
+    >
+      <span className={big ? 'system-icon-svg' : undefined} style={{ width: 'var(--rail-btn-size)', flexShrink: 0, display: 'grid', placeItems: 'center' }}>
+        {glyph}
+      </span>
+      <span style={{ fontFamily: 'monospace', fontSize: 11, letterSpacing: 1, paddingRight: 10 }}>{label}</span>
+      {count !== undefined && (
+        <span aria-hidden style={{
+          position: 'absolute', top: 2, left: 'calc(var(--rail-btn-size) - 16px)', minWidth: 14, padding: '0 3px', boxSizing: 'border-box',
+          fontSize: 9, lineHeight: '14px', borderRadius: 7, background: 'var(--danger)', color: 'var(--black)', textAlign: 'center',
+        }}>{count}</span>
+      )}
+    </button>
+  );
+}
+
+export function BuilderScreen({ token, systemId, startPage = 'setup', running, onExit, onOpenSystem, onManageSystems, fetcher }: Props) {
   const api = useMemo(() => systemsApi(token, fetcher), [token, fetcher]);
   const [system, setSystem] = useState<SystemCopies | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
-  const [page, setPage] = useState<BuilderPage>(startPage);
+  const [page, setPage] = useState<Page>(startPage);
+  const [library, setLibrary] = useState<{ systems: LibrarySystem[] | null; error: string | null }>({ systems: null, error: null });
   const [status, setStatus] = useState<{ text: string; bad?: boolean } | null>(null);
   const [exitError, setExitError] = useState<{ error: string; then: () => void } | null>(null);
   const [busy, setBusy] = useState(false);
+  const [railOpen, setRailOpen] = useState(false);
   const [, redraw] = useReducer((n: number) => n + 1, 0);
   const autosave = useRef<Autosave<Definition> | null>(null);
 
@@ -132,7 +212,15 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
     window.dispatchEvent(new Event(SYSTEMS_CHANGED_EVENT));
   };
 
-  const current = BUILDER_PAGES.find((p) => p.id === page)!;
+  // MY SYSTEMS reads the list each time it opens, so it shows what was published or renamed since.
+  useEffect(() => {
+    if (page !== 'systems') return;
+    let live = true;
+    api.list().then((r) => { if (live) setLibrary(r.ok ? { systems: r.value, error: null } : { systems: null, error: r.error }); });
+    return () => { live = false; };
+  }, [api, page]);
+
+  const current = page === 'systems' ? MY_SYSTEMS : BUILDER_PAGES.find((p) => p.id === page)!;
   const saveLine = state ? saveStatus(state) : null;
 
   return (
@@ -142,65 +230,68 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
       data-testid="builder-screen"
       style={{ position: 'fixed', inset: 0, zIndex: Z, display: 'flex', background: 'var(--black)', color: 'var(--text)', ...mono }}
     >
-      {/* The sidebar */}
-      <nav aria-label="Builder" style={{
-        width: 232, flexShrink: 0, boxSizing: 'border-box', padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 6,
-        background: 'var(--black)', borderRight: '1px solid var(--green)', boxShadow: '0 0 12px color-mix(in srgb, var(--green) 35%, transparent)',
-        overflowY: 'auto',
-      }}>
-        <div style={{ fontSize: 10, letterSpacing: 2, opacity: 0.7 }}>SYSTEM_BUILDER.EXE</div>
-        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--green)', letterSpacing: 1, lineHeight: '19px', overflowWrap: 'anywhere' }}>
-          {name.toUpperCase() || '…'}
+      {/* The sidebar: the map's icon rail (App.css .icon-rail, .rail-*), widening over the page
+          to show each name while the pointer or keyboard focus is in it. */}
+      <nav
+        aria-label="Builder"
+        data-expanded={railOpen}
+        className="icon-rail"
+        onMouseEnter={() => setRailOpen(true)}
+        onMouseLeave={() => setRailOpen(false)}
+        onFocus={() => setRailOpen(true)}
+        onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setRailOpen(false); }}
+        style={{
+          position: 'absolute', left: 0, top: 0, bottom: 0, zIndex: 1, overflowX: 'hidden', overflowY: 'auto',
+          width: railOpen ? RAIL_OPEN : undefined, transition: 'width 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        <div className="rail-top" style={{ alignItems: 'stretch' }}>
+          <RailButton icon={Icons.builder} label="SYSTEM_BUILDER" big onClick={() => setPage('setup')} />
         </div>
-        {system && (
-          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 8, fontSize: 10, letterSpacing: 1 }}>
-            {system.published
-              ? <span style={{ padding: '1px 5px', border: '1px solid color-mix(in srgb, var(--green) 50%, transparent)' }}>PUBLISHED v{system.version}</span>
-              : <span style={{ padding: '1px 5px', border: '1px solid var(--warning)', color: 'var(--warning)' }}>NEVER PUBLISHED</span>}
-            {problems.length > 0 && (
-              <span style={{ padding: '1px 5px', border: '1px solid var(--danger)', color: 'var(--danger)' }}>
-                {problems.length} PROBLEM{problems.length === 1 ? '' : 'S'}
-              </span>
-            )}
-          </div>
-        )}
-        <button type="button" style={sideBtn()} onClick={() => leave(onMySystems)}>MY SYSTEMS</button>
-        <div style={{ marginTop: 10, fontSize: 10, letterSpacing: 2, opacity: 0.6 }}>PAGES</div>
-        {BUILDER_PAGES.map((p) => (
-          <button
-            key={p.id}
-            type="button"
-            aria-current={p.id === page ? 'page' : undefined}
-            title={p.what}
-            onClick={() => { setPage(p.id); setStatus(null); }}
-            style={{ ...sideBtn(p.id === page), display: 'flex', justifyContent: 'space-between', gap: 8 }}
-          >
-            <span>{p.label}</span>
-            {p.id === 'problems' && <span style={{ opacity: 0.8 }}>{problems.length}</span>}
-          </button>
-        ))}
-        <span style={{ flexGrow: 1, minHeight: 12 }} />
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 6 }}>
-          <button type="button" disabled={!autosave.current || busy} onClick={save}
-            style={{ ...sideBtn(), textAlign: 'center', borderColor: 'var(--green)' }}>SAVE</button>
-          <button type="button" disabled={!autosave.current || busy} onClick={publish}
-            title={publishBlocked(problems) ?? 'Make this the version the game runs'}
-            style={{ ...sideBtn(), textAlign: 'center', borderColor: 'var(--cyan)', color: 'var(--cyan)' }}>PUBLISH</button>
+        <div style={{ padding: '10px 0' }}>
+          <RailButton icon={<ExitIcon />} label="EXIT TO MAP" aria="Exit the builder and go back to the map" onClick={() => leave(onExit)} />
+        </div>
+        <div className="rail-center" style={{ alignItems: 'stretch' }}>
+          <RailButton icon={Icons.systems} label="MY SYSTEMS" title={MY_SYSTEMS.what} active={page === 'systems'}
+            onClick={() => { setPage('systems'); setStatus(null); }} />
+          {BUILDER_PAGES.map((p) => (
+            <RailButton
+              key={p.id}
+              icon={Icons[p.id]}
+              label={p.label}
+              title={p.what}
+              active={p.id === page}
+              count={p.id === 'problems' && problems.length > 0 ? problems.length : undefined}
+              onClick={() => { setPage(p.id); setStatus(null); }}
+            />
+          ))}
+        </div>
+        <div style={{ padding: '10px 0', display: 'flex', flexDirection: 'column', gap: 4, borderTop: '1px solid var(--dark-green)' }}>
+          <RailButton icon={Icons.save} label="SAVE" disabled={!autosave.current || busy} onClick={save} />
+          <RailButton icon={Icons.publish} label="PUBLISH" disabled={!autosave.current || busy} onClick={publish}
+            title={publishBlocked(problems) ?? 'Make this the version the game runs'} />
         </div>
-        <button type="button" aria-label="Exit the builder and go back to the map" onClick={() => leave(onExit)}
-          style={{ ...sideBtn(), minHeight: 40, display: 'flex', alignItems: 'center', gap: 10, letterSpacing: 2, borderColor: 'var(--green)' }}>
-          <ExitIcon /><span>EXIT TO MAP</span>
-        </button>
       </nav>
 
-      {/* The open page */}
-      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+      {/* The open page, beside the rail at its narrow width: the wide rail lies over it. */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', marginLeft: 'var(--rail-width)' }}>
         <header style={{
           height: 48, flexShrink: 0, boxSizing: 'border-box', padding: '0 16px', display: 'flex', alignItems: 'center', gap: 12,
           borderBottom: '1px solid var(--green)', boxShadow: '0 0 10px color-mix(in srgb, var(--green) 30%, transparent)', fontSize: 12,
+          minWidth: 0,
         }}>
-          <h1 style={{ margin: 0, color: 'var(--green)', fontSize: 14, letterSpacing: 1 }}>{current.label}</h1>
-          <span style={{ opacity: 0.6 }}>{current.what}</span>
+          <span data-testid="builder-system" style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+            <b style={{ color: 'var(--green)', letterSpacing: 1 }}>{name.toUpperCase() || '…'}</b>
+            {system && (system.published
+              ? <span style={badge('color-mix(in srgb, var(--green) 50%, transparent)')}>PUBLISHED v{system.version}</span>
+              : <span style={badge('var(--warning)', 'var(--warning)')}>NEVER PUBLISHED</span>)}
+            {problems.length > 0 && (
+              <span style={badge('var(--danger)', 'var(--danger)')}>{problems.length} PROBLEM{problems.length === 1 ? '' : 'S'}</span>
+            )}
+          </span>
+          <span aria-hidden style={{ opacity: 0.4 }}>/</span>
+          <h1 style={{ margin: 0, color: 'var(--green)', fontSize: 14, letterSpacing: 1, flexShrink: 0 }}>{current.label}</h1>
+          <span style={{ opacity: 0.6, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{current.what}</span>
         </header>
 
         <section aria-label={current.label} className="cyber-scroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: 24, fontSize: 13, lineHeight: 1.5 }}>
@@ -213,7 +304,52 @@ export function BuilderScreen({ token, systemId, startPage = 'setup', running, o
                 {problems.map((p, i) => <li key={i}><b>{p.where}</b>: {p.message}</li>)}
               </ul>
             ))}
-          {system && page !== 'problems' && (
+          {system && page === 'systems' && (
+            <div style={{ maxWidth: '70ch', display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {library.error && <p role="alert" style={{ margin: 0, color: 'var(--danger)' }}>{library.error}</p>}
+              {!library.systems && !library.error && <p style={{ margin: 0, opacity: 0.7 }}>LOADING…</p>}
+              {library.systems && (
+                <div role="group" aria-label="Your systems" style={{ display: 'flex', flexDirection: 'column', border: '1px solid var(--dark-green)' }}>
+                  {library.systems.map((s) => {
+                    const here = s.id === systemId;
+                    return (
+                      <button
+                        key={s.id}
+                        type="button"
+                        aria-current={here ? 'true' : undefined}
+                        disabled={here || busy}
+                        title={here ? 'Open now' : `Save this one and open ${s.name}`}
+                        onClick={() => leave(() => onOpenSystem(s.id))}
+                        style={{
+                          ...mono, display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: '4px 12px', padding: '9px 12px',
+                          border: 0, borderBottom: '1px solid var(--dark-green)', textAlign: 'left', fontSize: 12, color: 'var(--green)',
+                          cursor: here ? 'default' : 'pointer',
+                          background: here ? 'color-mix(in srgb, var(--green) 14%, transparent)' : 'none',
+                          boxShadow: here ? 'inset 3px 0 0 var(--green)' : 'none',
+                        }}
+                      >
+                        <span style={{ fontWeight: 700, letterSpacing: 1, overflowWrap: 'anywhere' }}>{s.name.toUpperCase()}</span>
+                        <span style={{ opacity: 0.7 }}>{here ? 'OPEN NOW' : versionLabel(s)}</span>
+                        <span style={{ gridColumn: '1 / -1', display: 'flex', gap: 5, flexWrap: 'wrap' }}>
+                          {badgesFor(s, running).map((b) => (
+                            <span key={b.text} style={badge(BADGE_BORDER[b.tone], b.tone === 'plain' ? undefined : BADGE_BORDER[b.tone])}>{b.text}</span>
+                          ))}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+              <p style={{ margin: 0, opacity: 0.75, fontSize: 12 }}>
+                To rename, copy, share or install a system, use SYSTEMS.EXE on the map.
+              </p>
+              <div>
+                <button type="button" className="utility-btn" style={{ ...mono, fontSize: 11, letterSpacing: 1, padding: '5px 10px' }}
+                  onClick={() => leave(onManageSystems)}>OPEN SYSTEMS.EXE</button>
+              </div>
+            </div>
+          )}
+          {system && page !== 'problems' && page !== 'systems' && (
             <div style={{ maxWidth: '60ch', border: '1px dashed color-mix(in srgb, var(--green) 45%, transparent)', padding: '16px 18px' }}>
               <p style={{ margin: '0 0 6px', color: 'var(--green)', letterSpacing: 1 }}>{current.label}</p>
               <p style={{ margin: 0, opacity: 0.8 }}>{current.what} This page arrives in a coming update.</p>
diff --git a/frontend/src/components/__tests__/BuilderScreen.test.tsx b/frontend/src/components/__tests__/BuilderScreen.test.tsx
index 8bf44d8e..07b85458 100644
--- a/frontend/src/components/__tests__/BuilderScreen.test.tsx
+++ b/frontend/src/components/__tests__/BuilderScreen.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, cleanup, waitFor, within } from '@testing-library/react';
+import { render, screen, cleanup, waitFor, within, fireEvent, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { BuilderScreen } from '../BuilderScreen';
@@ -16,6 +16,13 @@ import type { SystemCopies } from '../../sheets/systemsApi';
 const HEARTH = 'sys_aaaaaaaaaaaaaaaa';
 const PROBLEM = { where: 'derived armor', message: 'Depends on itself: armor → armor' };
 
+const EMBER = 'sys_bbbbbbbbbbbbbbbb';
+const row = (id: string, name: string, over = {}) => ({
+  id, name, version: 2, updatedAt: '2026-10-06 14:10:00', publishedAt: null, published: true,
+  unpublishedChanges: false, installed: false, problemCount: 0, ...over,
+});
+const LIBRARY = [row(HEARTH, 'Hearth', { version: 3 }), row(EMBER, 'Ember', { installed: true, problemCount: 1 })];
+
 let served: SystemCopies;
 let calls: { url: string; method: string }[];
 let publishAnswer: { status: number; body: unknown };
@@ -26,6 +33,7 @@ const fakeServer = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) =>
   calls.push({ url, method });
   const json = (status: number, body: unknown) => ({ ok: status < 300, status, json: async () => body }) as unknown as Response;
   if (url === `/api/systems/${HEARTH}` && method === 'GET') return json(200, served);
+  if (url === '/api/systems' && method === 'GET') return json(200, LIBRARY);
   if (url === `/api/systems/${HEARTH}/publish`) {
     if (publishAnswer.status === 200) served = { ...served, version: served.version + 1 };
     return json(publishAnswer.status, publishAnswer.body);
@@ -45,9 +53,11 @@ afterEach(() => cleanup());
 
 const open = (over: Partial<React.ComponentProps<typeof BuilderScreen>> = {}) => {
   const onExit = vi.fn();
-  const onMySystems = vi.fn();
-  render(<BuilderScreen token="gm" systemId={HEARTH} running={null} onExit={onExit} onMySystems={onMySystems} fetcher={fakeServer as typeof fetch} {...over} />);
-  return { onExit, onMySystems };
+  const onOpenSystem = vi.fn();
+  const onManageSystems = vi.fn();
+  render(<BuilderScreen token="gm" systemId={HEARTH} running={null} onExit={onExit} onOpenSystem={onOpenSystem}
+    onManageSystems={onManageSystems} fetcher={fakeServer as typeof fetch} {...over} />);
+  return { onExit, onOpenSystem, onManageSystems };
 };
 const sidebar = () => screen.getByRole('navigation', { name: 'Builder' });
 const ready = () => waitFor(() => expect(screen.getByTestId('save-status')).toBeTruthy());
@@ -57,8 +67,8 @@ describe('the builder', () => {
     open({ startPage: 'setup' });
     await ready();
     expect(screen.getByTestId('builder-screen').style.position).toBe('fixed');
-    expect(within(sidebar()).getByText('HEARTH')).toBeTruthy();
-    expect(within(sidebar()).getByText('PUBLISHED v3')).toBeTruthy();
+    expect(within(screen.getByTestId('builder-system')).getByText('HEARTH')).toBeTruthy();
+    expect(within(screen.getByTestId('builder-system')).getByText('PUBLISHED v3')).toBeTruthy();
     expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('SETUP');
     expect(within(sidebar()).getByText('SETUP').closest('button')!.getAttribute('aria-current')).toBe('page');
     expect(screen.getByText(/This page arrives in a coming update\./)).toBeTruthy();
@@ -68,19 +78,49 @@ describe('the builder', () => {
   it('lists every page, each saying what it is for, and opens the one picked', async () => {
     open();
     await ready();
-    const pages = within(sidebar()).getAllByRole('button').filter((b) => b.title && b.textContent !== 'PUBLISH');
-    expect(pages.map((b) => b.textContent)).toEqual(['SETUP', 'WORDS', 'FEATURES', 'STATS & RULES', 'CHARACTER SHEET', 'NPCS', 'TRY IT', 'PROBLEMS0']);
+    const pages = within(sidebar()).getAllByRole('button').filter((b) => b.title && !['PUBLISH', 'MY SYSTEMS'].includes(b.textContent!));
+    expect(pages.map((b) => b.textContent)).toEqual(['SETUP', 'WORDS', 'FEATURES', 'STATS & RULES', 'CHARACTER SHEET', 'NPCS', 'TRY IT', 'PROBLEMS']);
     expect(pages[1].title).toBe('What the game calls things: HP, credits, skills.');
     await userEvent.click(pages[1]);
     expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('WORDS');
     expect(pages[1].getAttribute('aria-current')).toBe('page');
+    // The list of systems is fetched for MY SYSTEMS alone.
+    expect(calls.some((c) => c.url === '/api/systems')).toBe(false);
+  });
+
+  it('keeps the map\'s icon rail narrow, widening to show the names on hover or keyboard focus', async () => {
+    open();
+    await ready();
+    const rail = sidebar();
+    expect(rail.className).toBe('icon-rail');
+    expect(rail.getAttribute('data-expanded')).toBe('false');
+    fireEvent.mouseEnter(rail);
+    expect(rail.getAttribute('data-expanded')).toBe('true');
+    expect(rail.style.width).toBe('220px');
+    fireEvent.mouseLeave(rail);
+    expect(rail.getAttribute('data-expanded')).toBe('false');
+    expect(rail.style.width).toBe('');
+    // Tabbing in opens it; moving between its buttons keeps it open; tabbing out closes it.
+    act(() => within(rail).getByLabelText('MY SYSTEMS').focus());
+    expect(rail.getAttribute('data-expanded')).toBe('true');
+    act(() => within(rail).getByLabelText('SETUP').focus());
+    expect(rail.getAttribute('data-expanded')).toBe('true');
+    act(() => within(rail).getByLabelText('SETUP').blur());
+    expect(rail.getAttribute('data-expanded')).toBe('false');
+  });
+
+  it('marks PROBLEMS on the rail with how many there are', async () => {
+    served = { ...served, problems: [PROBLEM] };
+    open();
+    await ready();
+    expect(within(sidebar()).getByLabelText('PROBLEMS').textContent).toBe('PROBLEMS1');
   });
 
   it('a never-published draft says so', async () => {
     served = { ...served, version: 0, published: null };
     open();
     await ready();
-    expect(within(sidebar()).getByText('NEVER PUBLISHED')).toBeTruthy();
+    expect(within(screen.getByTestId('builder-system')).getByText('NEVER PUBLISHED')).toBeTruthy();
   });
 
   it('says when the system can\'t be read', async () => {
@@ -95,7 +135,7 @@ describe('PROBLEMS', () => {
     open({ startPage: 'problems' });
     await ready();
     expect(screen.getAllByRole('listitem').map((li) => li.textContent)).toEqual(['derived armor: Depends on itself: armor → armor', 'name: Required']);
-    expect(within(sidebar()).getByText('2 PROBLEMS')).toBeTruthy();
+    expect(within(screen.getByTestId('builder-system')).getByText('2 PROBLEMS')).toBeTruthy();
     expect(screen.getByText('PROBLEMS: 2')).toBeTruthy();
   });
 
@@ -115,7 +155,7 @@ describe('PUBLISH', () => {
     await userEvent.click(screen.getByText('PUBLISH'));
     expect(await screen.findByText('Published v4. The game runs it from now on.')).toBeTruthy();
     expect(calls.filter((c) => c.method === 'POST').map((c) => c.url)).toEqual([`/api/systems/${HEARTH}/publish`]);
-    await waitFor(() => expect(within(sidebar()).getByText('PUBLISHED v4')).toBeTruthy());
+    await waitFor(() => expect(within(screen.getByTestId('builder-system')).getByText('PUBLISHED v4')).toBeTruthy());
     expect(told).toHaveBeenCalledTimes(1);
     window.removeEventListener(SYSTEMS_CHANGED_EVENT, told);
   });
@@ -131,7 +171,7 @@ describe('PUBLISH', () => {
     served = { ...served, problems: [PROBLEM] };
     open({ startPage: 'words' });
     await ready();
-    expect(screen.getByText('PUBLISH').title).toBe('Fix this problem before publishing.');
+    expect(screen.getByText('PUBLISH').closest('button')!.title).toBe('Fix this problem before publishing.');
     await userEvent.click(screen.getByText('PUBLISH'));
     expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('PROBLEMS');
     expect(screen.getByRole('status').textContent).toBe('Fix this problem before publishing.');
@@ -155,21 +195,62 @@ describe('PUBLISH', () => {
 
 describe('leaving', () => {
   it('EXIT TO MAP goes straight back when nothing is unsaved', async () => {
-    const { onExit, onMySystems } = open();
+    const { onExit, onManageSystems, onOpenSystem } = open();
     await ready();
     await userEvent.click(screen.getByLabelText('Exit the builder and go back to the map'));
     expect(onExit).toHaveBeenCalledTimes(1);
-    expect(onMySystems).not.toHaveBeenCalled();
+    expect(onManageSystems).not.toHaveBeenCalled();
+    expect(onOpenSystem).not.toHaveBeenCalled();
   });
+});
 
-  it('MY SYSTEMS goes back to SYSTEMS.EXE', async () => {
-    const { onExit, onMySystems } = open();
+describe('MY SYSTEMS', () => {
+  const openList = async (over = {}) => {
+    const props = open(over);
     await ready();
-    await userEvent.click(screen.getByText('MY SYSTEMS'));
-    expect(onMySystems).toHaveBeenCalledTimes(1);
+    await userEvent.click(within(sidebar()).getByLabelText('MY SYSTEMS'));
+    await waitFor(() => expect(screen.getByRole('group', { name: 'Your systems' })).toBeTruthy());
+    return props;
+  };
+  const entries = () => within(screen.getByRole('group', { name: 'Your systems' })).getAllByRole('button') as HTMLButtonElement[];
+
+  it('is a page of the builder, listing every system with its badges, this one marked', async () => {
+    const { onExit, onManageSystems } = await openList({ running: HEARTH });
+    expect(screen.getByRole('heading', { level: 1 }).textContent).toBe('MY SYSTEMS');
+    expect(within(sidebar()).getByLabelText('MY SYSTEMS').getAttribute('aria-current')).toBe('page');
+    expect(entries().map((b) => b.textContent)).toEqual([
+      'HEARTHOPEN NOWRUNNINGPUBLISHED v3',
+      'EMBERv2PUBLISHED v21 PROBLEMINSTALLED',
+    ]);
+    expect(entries()[0].disabled).toBe(true);
+    expect(onExit).not.toHaveBeenCalled();
+    expect(onManageSystems).not.toHaveBeenCalled();
+  });
+
+  it('opens another system here, saving first', async () => {
+    const { onOpenSystem, onExit } = await openList();
+    await userEvent.click(entries()[1]);
+    expect(onOpenSystem).toHaveBeenCalledWith(EMBER);
     expect(onExit).not.toHaveBeenCalled();
   });
 
+  it('sends renaming, copying, sharing and installing to SYSTEMS.EXE', async () => {
+    const { onManageSystems, onOpenSystem } = await openList();
+    await userEvent.click(screen.getByText('OPEN SYSTEMS.EXE'));
+    expect(onManageSystems).toHaveBeenCalledTimes(1);
+    expect(onOpenSystem).not.toHaveBeenCalled();
+  });
+
+  it('says when the list can\'t be read', async () => {
+    const down = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => (String(input) === '/api/systems'
+      ? { ok: false, status: 500, json: async () => ({ error: 'Could not reach the systems store' }) } as unknown as Response
+      : fakeServer(input, init)));
+    open({ fetcher: down as typeof fetch });
+    await ready();
+    await userEvent.click(within(sidebar()).getByLabelText('MY SYSTEMS'));
+    expect((await screen.findByRole('alert')).textContent).toBe('Could not reach the systems store');
+  });
+
   it('closing the browser tab doesn\'t ask while everything is saved', async () => {
     open();
     await ready();