diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46cbcb1b..5890e280 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -71,6 +71,16 @@ 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 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
   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..43e46a7a 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,19 @@ 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)}
+                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
new file mode 100644
index 00000000..bfdefd9f
--- /dev/null
+++ b/frontend/src/components/BuilderScreen.tsx
@@ -0,0 +1,402 @@
+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, 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
+// 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;
+  /** 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" };
+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>
+);
+
+/** 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<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);
+
+  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));
+  };
+
+  // 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 (
+    <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: 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>
+        <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>
+      </nav>
+
+      {/* 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,
+        }}>
+          <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 }}>
+          {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 === '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>
+            </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..07b85458
--- /dev/null
+++ b/frontend/src/components/__tests__/BuilderScreen.test.tsx
@@ -0,0 +1,261 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor, within, fireEvent, act } 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' };
+
+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 };
+
+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' && 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);
+  }
+  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 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());
+
+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(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();
+    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 && !['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(screen.getByTestId('builder-system')).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(screen.getByTestId('builder-system')).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(screen.getByTestId('builder-system')).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').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.');
+    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, onManageSystems, onOpenSystem } = open();
+    await ready();
+    await userEvent.click(screen.getByLabelText('Exit the builder and go back to the map'));
+    expect(onExit).toHaveBeenCalledTimes(1);
+    expect(onManageSystems).not.toHaveBeenCalled();
+    expect(onOpenSystem).not.toHaveBeenCalled();
+  });
+});
+
+describe('MY SYSTEMS', () => {
+  const openList = async (over = {}) => {
+    const props = open(over);
+    await ready();
+    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();
+    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();