From 0a21303f739bb8ffc1adb4350084bee893e58fa6 Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:31:02 -0800
Subject: [PATCH 1/7] Add the CHARACTER tab seams to the dock terminal

The CHARACTER key and a fourth tab open an empty personnel file. Adds the
char_ action dispatch, the character section procs and vars, the data
contract in types.ts, Swatch/Cycler/Panel grid primitives, and stub files
for the backend, preview and editors.
---
 tgstation.dme                                 |   3 +
 .../interfaces/LobbyTerminal/Bezel.tsx        |  25 ++-
 .../interfaces/LobbyTerminal/BodyEditor.tsx   |  15 ++
 .../interfaces/LobbyTerminal/CharPreview.tsx  |  27 +++
 .../interfaces/LobbyTerminal/CharacterTab.tsx |  49 +++++
 .../interfaces/LobbyTerminal/ColorEntry.tsx   |  40 +++++
 .../interfaces/LobbyTerminal/Header.tsx       |   1 +
 .../interfaces/LobbyTerminal/KitEditor.tsx    |  15 ++
 .../interfaces/LobbyTerminal/RolesEditor.tsx  |  15 ++
 .../interfaces/LobbyTerminal/TraitsEditor.tsx |  15 ++
 .../interfaces/LobbyTerminal/index.tsx        |  37 ++--
 .../interfaces/LobbyTerminal/term.tsx         | 124 +++++++++++++
 .../interfaces/LobbyTerminal/types.ts         | 167 +++++++++++++++++-
 .../LobbyTerminal/usePrefsCatalog.ts          |  48 +++++
 .../modules/lobby_terminal/_lobby_terminal.dm |  57 +++++-
 .../modules/lobby_terminal/lobby_bezel.dm     |   8 +-
 .../modules/lobby_terminal/lobby_character.dm |  14 ++
 .../lobby_terminal/lobby_character_prefs.dm   |   8 +
 .../lobby_terminal/lobby_character_preview.dm |   8 +
 voidcrew/modules/lobby_terminal/lobby_tgui.dm |   6 +
 voidcrew/modules/unit_tests/_unit_tests.dm    |   1 +
 .../modules/unit_tests/lobby_character.dm     |   7 +
 22 files changed, 664 insertions(+), 26 deletions(-)
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
 create mode 100644 tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
 create mode 100644 voidcrew/modules/lobby_terminal/lobby_character.dm
 create mode 100644 voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
 create mode 100644 voidcrew/modules/lobby_terminal/lobby_character_preview.dm
 create mode 100644 voidcrew/modules/unit_tests/lobby_character.dm

diff --git a/tgstation.dme b/tgstation.dme
index f64dbcd5cad..173ae1bc2cc 100644
--- a/tgstation.dme
+++ b/tgstation.dme
@@ -7245,6 +7245,9 @@
 #include "voidcrew\modules\lobby_terminal\_lobby_terminal.dm"
 #include "voidcrew\modules\lobby_terminal\lobby_assets.dm"
 #include "voidcrew\modules\lobby_terminal\lobby_bezel.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character_prefs.dm"
+#include "voidcrew\modules\lobby_terminal\lobby_character_preview.dm"
 #include "voidcrew\modules\lobby_terminal\lobby_crews.dm"
 #include "voidcrew\modules\lobby_terminal\lobby_housing.dm"
 #include "voidcrew\modules\lobby_terminal\lobby_tgui.dm"
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Bezel.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Bezel.tsx
index e531afb55ce..abab0d2143b 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Bezel.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Bezel.tsx
@@ -27,14 +27,16 @@ const KEY_LABEL: Record<KeyId, string> = {
 function Key(props: {
   id: KeyId;
   disabled?: boolean;
+  /** Glows while its screen is open (CHARACTER). */
+  lit?: boolean;
   title: string;
   onClick: () => void;
 }) {
-  const { id, disabled, title, onClick } = props;
+  const { id, disabled, lit, title, onClick } = props;
   return (
     <button
       type="button"
-      className={`lt-key lt-key--${id}${disabled ? ' is-disabled' : ''}`}
+      className={`lt-key lt-key--${id}${disabled ? ' is-disabled' : ''}${lit ? ' is-lit' : ''}`}
       disabled={disabled}
       title={title}
       onClick={disabled ? undefined : onClick}
@@ -86,8 +88,15 @@ function SmallButton(props: {
   );
 }
 
-export function Bezel(props: { s: number; children: ReactNode }) {
-  const { s, children } = props;
+export function Bezel(props: {
+  s: number;
+  children: ReactNode;
+  /** The CHARACTER tab is open: the key glows. */
+  characterLit?: boolean;
+  /** The CHARACTER key: switches to the CHARACTER tab. */
+  onCharacter: () => void;
+}) {
+  const { s, children, characterLit, onCharacter } = props;
   const { data, act } = useBackend<LobbyData>();
   const art = !!data.bezel;
   const preRound = data.phase === 'loading' || data.phase === 'pregame';
@@ -136,8 +145,9 @@ export function Bezel(props: { s: number; children: ReactNode }) {
             <Key
               id="character"
               disabled={!data.prefs_ready}
+              lit={characterLit}
               title="Character"
-              onClick={() => act('character')}
+              onClick={onCharacter}
             />
             {data.localhost_admin && preRound ? (
               <Key
@@ -201,6 +211,11 @@ const LEGEND_CSS = `
   line-height: calc(var(--s) * 13px); text-align: center; letter-spacing: calc(var(--s) * 1px); }
 .lt-key--start:hover .lt-key-legend { color: #ffc41f; }
 .lt-key-legend { pointer-events: none; }
+.lt-key.is-lit { position: relative; }
+.lt-key.is-lit::after { content: ''; position: absolute; pointer-events: none;
+  left: calc(var(--s) * 9px); top: calc(var(--s) * 5px); width: calc(var(--s) * 77px); height: calc(var(--s) * 15px);
+  background: rgba(126,255,191,.16); mix-blend-mode: screen;
+  box-shadow: 0 0 calc(var(--s) * 6px) rgba(126,255,191,.55), inset 0 0 calc(var(--s) * 3px) rgba(126,255,191,.5); }
 `;
 
 export const BEZEL_EXTRA_CSS = LEGEND_CSS;
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
new file mode 100644
index 00000000000..2c23af6c0d9
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
@@ -0,0 +1,15 @@
+/**
+ * BODY (CHARACTER-PLAN 2.3/2.4): data-driven rows from CharData.prefs in BODY_KEYS order, char_set, the species confirm line, ColorEntry for free colours.
+ * Owner: C3. Stub from the C0 seam; the props are fixed.
+ */
+import { Put } from './term';
+import type { CellBox } from './types';
+
+export function BodyEditor(props: CellBox) {
+  const { x, y } = props;
+  return (
+    <Put x={x + 1} y={y + 1} cls="faint">
+      {'BODY'}
+    </Put>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
new file mode 100644
index 00000000000..c3e536178df
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
@@ -0,0 +1,27 @@
+/**
+ * The character preview (CHARACTER-PLAN 2.5 / 3): a viewscreen over cells (x, y, w, h)
+ * showing the server's render of the dressed mannequin facing dir. Keeps a client cache of
+ * char_preview pushes (key -> dir -> png) and sends char_turn only for a facing it doesn't
+ * have for the current look. The turn keys and dress label around it belong to CharacterTab.
+ * Owner: C2. Stub from the C0 seam; the props are fixed.
+ */
+import { useGrid } from './term';
+import type { CellBox, CharDir } from './types';
+
+export function CharPreview(props: CellBox & { dir: CharDir }) {
+  const { x, y, w, h } = props;
+  const { cw, ch } = useGrid();
+  return (
+    <div
+      className="lt-vscreen"
+      style={{
+        left: Math.round(x * cw),
+        top: Math.round(y * ch),
+        width: Math.round(w * cw),
+        height: Math.round(h * ch),
+      }}
+    >
+      <div className="lt-vscan" />
+    </div>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
new file mode 100644
index 00000000000..48b3255d386
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
@@ -0,0 +1,49 @@
+/**
+ * CHARACTER tab, layout A "personnel file" (CHARACTER-PLAN 2.2): FILES, the preview, the
+ * PERSONNEL FILE cells and the crumbs; one editor sub-screen at a time.
+ * Owner: C3. Stub from the C0 seam: sends char_open and draws the empty frame.
+ */
+import { useEffect, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+
+import { BodyEditor } from './BodyEditor';
+import { KitEditor } from './KitEditor';
+import { RolesEditor } from './RolesEditor';
+import { TraitsEditor } from './TraitsEditor';
+import { Frame, TOP, useGrid } from './term';
+import type { CellBox, CharSection, LobbyData } from './types';
+
+/** home: bumped when CHARACTER is pressed while already open; go back to the file view. */
+export function CharacterTab(props: { home: number }) {
+  const { home } = props;
+  const { act } = useBackend<LobbyData>();
+  const { cols, rows } = useGrid();
+  const [section, setSection] = useState<CharSection | null>(null);
+
+  useEffect(() => {
+    act('char_open');
+  }, []);
+  useEffect(() => {
+    setSection(null);
+  }, [home]);
+
+  const h = rows - 1 - TOP;
+  const box: CellBox = { x: 0, y: TOP + 1, w: cols, h: h - 1 };
+  let editor;
+  if (section === 'body') {
+    editor = <BodyEditor {...box} />;
+  } else if (section === 'roles') {
+    editor = <RolesEditor {...box} />;
+  } else if (section === 'traits') {
+    editor = <TraitsEditor {...box} />;
+  } else if (section === 'kit') {
+    editor = <KitEditor {...box} />;
+  }
+
+  return (
+    <>
+      <Frame x={0} y={TOP} w={cols} h={h} title="PERSONNEL FILE" />
+      {editor}
+    </>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
new file mode 100644
index 00000000000..266d082c20d
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
@@ -0,0 +1,40 @@
+/**
+ * Free colour entry for BODY and KIT (CHARACTER-PLAN 2.9). The row reads
+ * `LABEL  [##] #RRGGBB`; clicking the chip or the hex opens the H/S/V panel. Only SET sends.
+ * Owner: C3. The props are the contract C4's KitEditor builds against; keep them.
+ */
+import { Put, Swatch } from './term';
+
+export type ColorEntryProps = {
+  /** Column and row of the label. */
+  x: number;
+  y: number;
+  /** Cells the row may use. */
+  w: number;
+  label: string;
+  /** Current colour, "#rrggbb". */
+  value: string;
+  /** Colours offered in the recent row (already on this file, plus the viewer's last ones). */
+  recent: string[];
+  /** Show [ PICKER ] (BYOND's native dialog). BODY colours only. */
+  native?: boolean;
+  /** SET pressed with a valid colour. */
+  onSet: (hex: string) => void;
+  /** [ PICKER ] pressed. */
+  onPicker?: () => void;
+};
+
+export function ColorEntry(props: ColorEntryProps) {
+  const { x, y, label, value } = props;
+  return (
+    <>
+      <Put x={x} y={y} cls="dim">
+        {label}
+      </Put>
+      <Swatch x={x + label.length + 1} y={y} hex={value} />
+      <Put x={x + label.length + 4} y={y}>
+        {value.toUpperCase()}
+      </Put>
+    </>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Header.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Header.tsx
index 1eca673b51b..0717d778061 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Header.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/Header.tsx
@@ -8,6 +8,7 @@ const TABS: [TabId, string][] = [
   ['crews', 'CREWS'],
   ['shipyard', 'SHIPYARD'],
   ['housing', 'HOUSING'],
+  ['character', 'CHARACTER'],
 ];
 
 const two = (n: number) => String(Math.floor(n)).padStart(2, '0');
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
new file mode 100644
index 00000000000..53b81d1c0fa
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
@@ -0,0 +1,15 @@
+/**
+ * KIT (CHARACTER-PLAN 2.8): loadout categories and items, char_kit, GAGS colours through ColorEntry (char_kit_color), char_kit_skin, char_kit_name.
+ * Owner: C4. Stub from the C0 seam; the props are fixed.
+ */
+import { Put } from './term';
+import type { CellBox } from './types';
+
+export function KitEditor(props: CellBox) {
+  const { x, y } = props;
+  return (
+    <Put x={x + 1} y={y + 1} cls="faint">
+      {'KIT'}
+    </Put>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
new file mode 100644
index 00000000000..bb282b81a00
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
@@ -0,0 +1,15 @@
+/**
+ * ROLES (CHARACTER-PLAN 2.6): nine category rows, NEVER/LOW/MED/HIGH, char_role.
+ * Owner: C4. Stub from the C0 seam; the props are fixed.
+ */
+import { Put } from './term';
+import type { CellBox } from './types';
+
+export function RolesEditor(props: CellBox) {
+  const { x, y } = props;
+  return (
+    <Put x={x + 1} y={y + 1} cls="faint">
+      {'ROLES'}
+    </Put>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
new file mode 100644
index 00000000000..35b9631598d
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
@@ -0,0 +1,15 @@
+/**
+ * TRAITS (CHARACTER-PLAN 2.7): filtered quirk list, description, TAKEN box with POINTS, char_quirk and quirk options through char_set.
+ * Owner: C4. Stub from the C0 seam; the props are fixed.
+ */
+import { Put } from './term';
+import type { CellBox } from './types';
+
+export function TraitsEditor(props: CellBox) {
+  const { x, y } = props;
+  return (
+    <Put x={x + 1} y={y + 1} cls="faint">
+      {'TRAITS'}
+    </Put>
+  );
+}
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/index.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/index.tsx
index 1a77e4462c6..72ba580238e 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/index.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/index.tsx
@@ -13,6 +13,7 @@ import { resolveAsset } from 'tgui/assets';
 import { useBackend } from 'tgui/backend';
 
 import { BEZEL_EXTRA_CSS, Bezel } from './Bezel';
+import { CharacterTab } from './CharacterTab';
 import { CrewsTab } from './CrewsTab';
 import { Header } from './Header';
 import { HousingTab } from './HousingTab';
@@ -133,6 +134,8 @@ export function LobbyTerminal() {
   const [tab, setTab] = useState<TabId>('crews');
   /** Bumped when SHIPYARD is pressed while already on it. */
   const [yardHome, setYardHome] = useState(0);
+  /** Bumped when CHARACTER (tab or bezel key) is pressed while already on it: back to the file view. */
+  const [charHome, setCharHome] = useState(0);
   const request = data.tab_request;
   useEffect(() => {
     if (request) {
@@ -159,6 +162,19 @@ export function LobbyTerminal() {
 
   const notice = data.notice;
   const confirmed = !!notice && notice.kind === 'ok';
+
+  const switchTab = (next: TabId) => {
+    if (next === tab && next === 'shipyard') {
+      setYardHome(yardHome + 1);
+    }
+    if (next === tab && next === 'character') {
+      setCharHome(charHome + 1);
+    }
+    setTab(next);
+    if (confirmed) {
+      act('dismiss');
+    }
+  };
   const { s } = layout;
   const scan = Math.max(2, Math.round(s));
 
@@ -169,6 +185,8 @@ export function LobbyTerminal() {
     body = <CrewsTab />;
   } else if (tab === 'shipyard') {
     body = <YardTab home={yardHome} />;
+  } else if (tab === 'character') {
+    body = <CharacterTab home={charHome} />;
   } else {
     body = <HousingTab />;
   }
@@ -184,7 +202,11 @@ export function LobbyTerminal() {
       }}
     >
       <style>{TERM_CSS + BEZEL_EXTRA_CSS}</style>
-      <Bezel s={s}>
+      <Bezel
+        s={s}
+        characterLit={tab === 'character' && !confirmed}
+        onCharacter={() => switchTab('character')}
+      >
         <div className="lt-crt">
           <div
             className="lt-tui"
@@ -198,18 +220,7 @@ export function LobbyTerminal() {
             }}
           >
             <GridContext.Provider value={grid}>
-              <Header
-                tab={tab}
-                setTab={(next) => {
-                  if (next === tab && next === 'shipyard') {
-                    setYardHome(yardHome + 1);
-                  }
-                  setTab(next);
-                  if (confirmed) {
-                    act('dismiss');
-                  }
-                }}
-              />
+              <Header tab={tab} setTab={switchTab} />
               {body}
               <NoticeLine />
             </GridContext.Provider>
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/term.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/term.tsx
index 754a4d9788d..e835e3d7efa 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/term.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/term.tsx
@@ -311,6 +311,130 @@ export function Hit(props: {
   );
 }
 
+/**
+ * A colour chip filling w cells (default 2) of row y, as the mockup's swatch(). sel draws
+ * it with a lit border. hex must be a CSS colour; the server sanitises every stored colour.
+ */
+export function Swatch(props: {
+  x: number;
+  y: number;
+  hex: string;
+  sel?: boolean;
+  /** Width in cells. */
+  w?: number;
+  onClick?: () => void;
+}) {
+  const { x, y, hex, sel, w = 2, onClick } = props;
+  const { cw, ch, s } = useGrid();
+  const bw = sel ? Math.max(2, Math.round(s)) : Math.max(1, Math.round(s) - 1);
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        boxSizing: 'content-box',
+        left: x * cw + 1,
+        top: y * ch + ch * 0.12,
+        width: Math.max(0, w * cw - 4 - 2 * bw),
+        height: Math.max(0, ch * 0.76 - 2 * bw),
+        background: hex,
+        border: `${bw}px solid ${sel ? 'var(--lt-ph)' : 'var(--lt-faint)'}`,
+        boxShadow: sel
+          ? '0 0 6px rgba(126,255,191,.7), inset 0 0 0 1px #07130d'
+          : 'inset 0 0 0 1px #07130d',
+        cursor: onClick ? 'pointer' : undefined,
+        zIndex: 4,
+      }}
+      onClick={
+        onClick
+          ? (e) => {
+              e.stopPropagation();
+              onClick();
+            }
+          : undefined
+      }
+    />
+  );
+}
+
+/**
+ * `< VALUE >` stepper, as the mockup's cyc(): `<` at x, the value in w cells from x + 2,
+ * `>` at x + 3 + w. The whole control is w + 4 cells wide. onValue makes the value itself
+ * clickable (long lists open a picker there).
+ */
+export function Cycler(props: {
+  x: number;
+  y: number;
+  /** Cells for the value. */
+  w: number;
+  value: string;
+  onPrev: () => void;
+  onNext: () => void;
+  onValue?: () => void;
+  disabled?: boolean;
+}) {
+  const { x, y, w, value, onPrev, onNext, onValue, disabled } = props;
+  const text = pad(value.toUpperCase(), w);
+  if (disabled) {
+    return (
+      <Put x={x} y={y} cls="faint">
+        {`< ${text} >`}
+      </Put>
+    );
+  }
+  return (
+    <>
+      <Put x={x} y={y} cls="dim" hoverCls="inv" onClick={onPrev}>
+        {'<'}
+      </Put>
+      <Put
+        x={x + 2}
+        y={y}
+        hoverCls={onValue ? 'inv' : undefined}
+        onClick={onValue}
+      >
+        {text}
+      </Put>
+      <Put x={x + 3 + w} y={y} cls="dim" hoverCls="inv" onClick={onNext}>
+        {'>'}
+      </Put>
+    </>
+  );
+}
+
+/**
+ * A framed overlay: paints the terminal background over cells (x, y, w, h), draws a Frame
+ * and puts its children above everything under it. Children use the same grid coordinates
+ * as everything else. Clicks on the panel never reach what is beneath it.
+ */
+export function Panel(props: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  title?: string;
+  children?: ReactNode;
+}) {
+  const { x, y, w, h, title, children } = props;
+  const { cw, ch } = useGrid();
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 8 }}>
+      <div
+        style={{
+          position: 'absolute',
+          left: x * cw,
+          top: y * ch,
+          width: w * cw,
+          height: h * ch,
+          background: 'var(--lt-bg)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <Frame x={x} y={y} w={w} h={h} title={title} />
+      {children}
+    </div>
+  );
+}
+
 /** Pads or cuts to n characters; a cut ends in '.'. */
 export function pad(str: string | number, n: number): string {
   const s = String(str);
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
index caffe82edf5..81c62c964a1 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
@@ -24,7 +24,7 @@ export type Notice = {
   at: number;
 };
 
-export type TabId = 'crews' | 'shipyard' | 'housing';
+export type TabId = 'crews' | 'shipyard' | 'housing' | 'character';
 
 /** bezel.json from the art package (all numbers are 1x pixels). Null: placeholder bezel. */
 export type BezelSpec = {
@@ -226,6 +226,140 @@ export type HousingData = {
   outposts?: Outpost[];
 };
 
+// ---------------------------------------------------------------------------
+// CHARACTER (CHARACTER-PLAN 2.1). Owners: C1 (DM), C2 (preview), C3 (file + BODY),
+// C4 (ROLES / TRAITS / KIT).
+//
+// The big catalog (choices, display names, quirk_info, loadout_tabs, species) is tg's own
+// preferences.json, read through usePrefsCatalog() as ServerData. The keys below are only
+// the per-player state.
+// ---------------------------------------------------------------------------
+
+/** Ship role level: 1 LOW, 2 MED, 3 HIGH (JP_*). Absent from CharData.roles = NEVER. */
+export type RoleLevel = 1 | 2 | 3;
+
+/** BYOND dirs the preview renders: NORTH 1, SOUTH 2, EAST 4, WEST 8. */
+export type CharDir = 1 | 2 | 4 | 8;
+
+/** One packed loadout item (tg's loadout_list entry, INFO_* keys). */
+export type CharKitItem = {
+  /** GAGS colours, "#rrggbb" joined, one per colour slot. */
+  greyscale?: string;
+  /** Custom name; the server escapes it and caps it at KIT_NAME_MAX. */
+  name?: string;
+  /** Reskin option key. */
+  reskin?: string;
+};
+
+/** A species change waiting on CHANGE / CANCEL because taken quirks don't fit it. */
+export type CharConfirm = {
+  kind: 'species';
+  /** The species id asked for. */
+  value: string;
+  /** Names of the quirks it would drop. */
+  quirks: string[];
+};
+
+/** The char block. Pushed as a one-off update on char_open, after each edit and on slot change. */
+export type CharData = {
+  /** char_rev at the time of the push. */
+  rev: number;
+  /** 1-based. */
+  slot: number;
+  /** Saved names, null for an empty slot. Length = max_save_slots (3, or 8 for BYOND members). */
+  slots: (string | null)[];
+  /**
+   * savefile_key -> compile_ui_data() for every accessible PREFERENCE_CHARACTER preference.
+   * A key that is absent is not shown (the server's accessibility rules pick the rows).
+   */
+  prefs: Record<string, any>;
+  /** Taken quirks, sanitize_css_class_name keys as tg sends. */
+  quirks: string[];
+  /** Quirks the current species can't take. */
+  quirks_blocked: string[];
+  /**
+   * ship_category_preferences: category -> level. Absent = NEVER. At most one category is
+   * HIGH: the server demotes the old HIGH to MED when another is set HIGH (Q3).
+   */
+  roles: Record<string, RoleLevel>;
+  /** Packed loadout: item typepath -> details. */
+  kit: Record<string, CharKitItem>;
+  /** Job category the preview wears. */
+  dress: string;
+  confirm: CharConfirm | null;
+};
+
+export type CharStatic = {
+  /** [category, examples] in GLOB.job_categories order; examples from the roundstart job pool. */
+  roles: [category: string, examples: string][];
+  /** Recolourable loadout item path -> number of GAGS colour slots. */
+  kit_colors: Record<string, number>;
+};
+
+/** One rendered facing of the preview. png is base64 PNG data, no data: prefix. */
+export type CharPreview = { key: string; dir: CharDir; png: string } | null;
+
+export type CharacterData = {
+  /** Sent every tick; tells the client whether its last push is stale. */
+  char_rev?: number;
+  /** One-off pushes: these keep their last pushed value between pushes. */
+  char?: CharData;
+  char_static?: CharStatic;
+  char_preview?: CharPreview;
+};
+
+/**
+ * BODY rows, top to bottom. A row shows only when its savefile key is in CharData.prefs.
+ * Species feature keys not listed here still show, as generic rows after the species ones.
+ * underwear, undershirt, socks and hair_gradient(+_color) are the owner's extra rows (Q1).
+ */
+export const BODY_KEYS = [
+  'real_name',
+  'age',
+  'species',
+  'body_type',
+  'gender',
+  'background',
+  'skin_tone',
+  'hairstyle_name',
+  'hair_color',
+  'hair_gradient',
+  'hair_gradient_color',
+  'facial_style_name',
+  'facial_hair_color',
+  'feature_mcolor',
+  'feature_ethcolor',
+  'eye_color',
+  'voice_pack',
+  'backpack',
+  'jumpsuit_style',
+  'underwear',
+  'undershirt',
+  'socks',
+] as const;
+
+/** Colour keys that get the native picker ([ PICKER ], char_color_pick). Kit colours never do (Q4). */
+export const NATIVE_COLOR_KEYS = [
+  'hair_color',
+  'hair_gradient_color',
+  'facial_hair_color',
+  'feature_mcolor',
+  'eye_color',
+] as const;
+
+/** MAX_NAME_LEN (code/__DEFINES/say.dm): character names and kit item names. */
+export const NAME_MAX = 42;
+export const KIT_NAME_MAX = NAME_MAX;
+/** AGE_MIN / AGE_MAX (code/__DEFINES/mobs.dm). */
+export const AGE_MIN = 18;
+export const AGE_MAX = 85;
+
+/** The PERSONNEL FILE sections, each an editor sub-screen. Null in CharacterTab = the file view. */
+export type CharSection = 'body' | 'roles' | 'traits' | 'kit';
+
+/** A block of cells (x, y = top-left column and row; w, h = columns and rows) handed to an editor. */
+export type CellBox = { x: number; y: number; w: number; h: number };
+
 // ---------------------------------------------------------------------------
 
 export type LobbyData = ShellData &
@@ -233,11 +367,12 @@ export type LobbyData = ShellData &
   CrewsData &
   YardData &
   YardStatic &
-  HousingData;
+  HousingData &
+  CharacterData;
 
 /**
  * Every action and its params. Shell actions are handled in lobby_bezel.dm; prefixed ones
- * go to their section (crew_* P2, yard_* P3, home_* P5).
+ * go to their section (crew_* P2, yard_* P3, home_* P5, char_* C1/C2).
  */
 export type LobbyActions = {
   join: Record<string, never>;
@@ -276,4 +411,30 @@ export type LobbyActions = {
   yard_load: { slot: number; leave_crew: 0 | 1 };
   home_move_in: { outpost: string; code?: string };
   home_request: { outpost: string };
+  /** Sends char, char_static and preferences.json; queues the preview. */
+  char_open: Record<string, never>;
+  /** Saves, then switches to that slot (1-based). There is no delete (Q5). */
+  char_slot: { slot: number };
+  /** One PREFERENCE_CHARACTER preference. confirm is only set by the server's own re-run. */
+  char_set: { key: string; value: unknown; confirm?: 0 | 1 };
+  char_random_name: Record<string, never>;
+  /** BYOND's native colour dialog for a BODY colour key (NATIVE_COLOR_KEYS). */
+  char_color_pick: { key: string };
+  char_voice_play: Record<string, never>;
+  /** level 0 = NEVER. Setting 3 (HIGH) demotes any other HIGH to MED (Q3). */
+  char_role: { category: string; level: 0 | RoleLevel };
+  char_quirk: { quirk: string; on: 0 | 1 };
+  /** path: loadout item typepath. */
+  char_kit: { path: string; on: 0 | 1 };
+  /** slot: 0-based GAGS colour slot; color "#rrggbb". */
+  char_kit_color: { path: string; slot: number; color: string };
+  /** Renaming is on (Q2). An empty name clears it. */
+  char_kit_name: { path: string; name: string };
+  char_kit_skin: { path: string; skin: string };
+  /** Preview only: which category's uniform the mannequin wears. */
+  char_dress: { category: string };
+  /** Asks for that facing when it isn't cached for the current look. */
+  char_turn: { dir: CharDir };
+  /** Answers CharData.confirm. */
+  char_confirm: { ok: 0 | 1 };
 };
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
new file mode 100644
index 00000000000..5e767209a8a
--- /dev/null
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
@@ -0,0 +1,48 @@
+/**
+ * tg's preferences.json catalog (choices, display names, quirk_info, loadout_tabs, species)
+ * for the CHARACTER tab. The server sends the asset on char_open; it is fetched once per
+ * window and shared by every editor. Owner: C3.
+ */
+import { useEffect, useState } from 'react';
+import { resolveAsset } from 'tgui/assets';
+import type { ServerData } from 'tgui/interfaces/PreferencesMenu/types';
+import { fetchRetry } from 'tgui-core/http';
+
+let cached: ServerData | null = null;
+let pending: Promise<ServerData | null> | null = null;
+
+function load(): Promise<ServerData | null> {
+  if (!pending) {
+    pending = fetchRetry(resolveAsset('preferences.json'))
+      .then((response) => response.json())
+      .then((data: ServerData) => {
+        cached = data;
+        return data;
+      })
+      .catch(() => {
+        pending = null;
+        return null;
+      });
+  }
+  return pending;
+}
+
+/** The catalog, or null until it has arrived. */
+export function usePrefsCatalog(): ServerData | null {
+  const [catalog, setCatalog] = useState<ServerData | null>(cached);
+  useEffect(() => {
+    if (catalog) {
+      return;
+    }
+    let live = true;
+    load().then((data) => {
+      if (live && data) {
+        setCatalog(data);
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+  return catalog;
+}
diff --git a/voidcrew/modules/lobby_terminal/_lobby_terminal.dm b/voidcrew/modules/lobby_terminal/_lobby_terminal.dm
index d66ededdd4a..c451c5884ae 100644
--- a/voidcrew/modules/lobby_terminal/_lobby_terminal.dm
+++ b/voidcrew/modules/lobby_terminal/_lobby_terminal.dm
@@ -14,8 +14,9 @@
  *
  * Sections: the shell (this file, lobby_tgui.dm, lobby_bezel.dm) declares every section
  * proc below. Section owners override them in their own file without the `proc/` keyword:
- * lobby_crews.dm (crew_* actions), lobby_yard.dm (yard_* actions) and lobby_housing.dm
- * (home_* actions). Those files sort after this one, so their overrides win.
+ * lobby_crews.dm (crew_* actions), lobby_yard.dm (yard_* actions), lobby_housing.dm
+ * (home_* actions) and lobby_character*.dm (char_* actions). Those files sort after this
+ * one, so their overrides win.
  */
 
 /// How long to wait for the browser to report itself visible before offering a reload link.
@@ -57,6 +58,18 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 	/// The skin.dmf BROWSER control the terminal renders into.
 	var/control_id = "lobby_browser"
 
+	// CHARACTER section (lobby_character*.dm). Declared here so every owner shares them.
+	/// Job category the preview wears (preview only, never saved). Null: the top role.
+	var/char_dress
+	/// Bumped on every character edit and slot switch, so the client and async work can spot stale state.
+	var/char_rev = 0
+	/// TRUE once char_open has sent the catalog and the first push to this window.
+	var/char_open = FALSE
+	/// A native colour pick is waiting on input(): list("key", "slot", "rev"), or null.
+	var/list/char_pending_pick
+	/// Preview renders: appearance key -> list("[dir]" = base64 png). Owned by lobby_character_preview.dm.
+	var/list/char_preview_cache
+
 /datum/lobby_terminal/New(client/owner)
 	. = ..()
 	src.owner = owner
@@ -65,6 +78,7 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 	RegisterSignal(owner, COMSIG_CLIENT_MOB_LOGIN, PROC_REF(on_mob_login))
 
 /datum/lobby_terminal/Destroy()
+	char_save()
 	if(owner)
 		UnregisterSignal(owner, COMSIG_CLIENT_MOB_LOGIN)
 		if(owner.lobby_terminal == src)
@@ -91,6 +105,8 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 		// A fresh page has none of the yard's previews or URL mappings yet.
 		yard_mappings_sent = FALSE
 		yard_previews_sent = list()
+		// Nor the character catalog or its first push.
+		char_open = FALSE
 	set_classic_lobby(FALSE)
 	refresh_polls(user)
 	ui_interact(user)
@@ -108,6 +124,7 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 
 /// Takes the terminal off the map and closes its UI. The classic HUD (or the game) shows again.
 /datum/lobby_terminal/proc/hide()
+	char_save()
 	visible = FALSE
 	if(load_timer)
 		deltimer(load_timer)
@@ -190,7 +207,7 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 	if(ui && !QDELETED(ui))
 		SStgui.update_uis(src)
 
-/// Asks the client to switch tabs ("crews", "shipyard", "housing").
+/// Asks the client to switch tabs ("crews", "shipyard", "housing", "character").
 /datum/lobby_terminal/proc/goto_tab(tab)
 	tab_request = tab
 	tab_request_serial++
@@ -332,6 +349,40 @@ GLOBAL_LIST_EMPTY(lobby_join_locks)
 /datum/lobby_terminal/proc/housing_act(action, list/params, mob/user)
 	return FALSE
 
+/// CHARACTER (lobby_character.dm): data.char_rev only. The char block goes out as one-off pushes (char_push).
+/datum/lobby_terminal/proc/char_data(mob/user)
+	return null
+
+/**
+ * CHARACTER actions (lobby_character.dm): char_open, char_slot, char_set, char_random_name,
+ * char_color_pick, char_voice_play, char_role, char_quirk, char_kit, char_kit_color,
+ * char_kit_name, char_kit_skin, char_dress, char_turn, char_confirm. The shell has already
+ * checked that the player's prefs exist and the preference assets are built.
+ */
+/datum/lobby_terminal/proc/char_act(action, list/params, mob/user)
+	return FALSE
+
+/// CHARACTER: tg's character window changed a preference; push the terminal's copy soon (coalesced).
+/datum/lobby_terminal/proc/char_changed()
+	return
+
+/// CHARACTER: sends the full char block (and char_static on the first open) as a one-off update.
+/datum/lobby_terminal/proc/char_push(mob/user)
+	return
+
+/// CHARACTER preview (lobby_character_preview.dm): queue a render of the current look facing dir.
+/datum/lobby_terminal/proc/char_preview_request(dir)
+	return
+
+/// CHARACTER preview: hash of everything that changes the look, the cache key for renders.
+/datum/lobby_terminal/proc/char_appearance_key()
+	return null
+
+/// CHARACTER: writes the character slot and the savefile. Also runs from hide() (inside a signal handler) and Destroy(), so it must not sleep and must be safe with no client or prefs.
+/datum/lobby_terminal/proc/char_save()
+	SHOULD_NOT_SLEEP(TRUE)
+	return
+
 /// Saved ships hook (feature/ship-saving overrides it): list of save cards (null entries for empty slots), or null to hide the box.
 /datum/lobby_terminal/proc/saved_ships_data()
 	return null
diff --git a/voidcrew/modules/lobby_terminal/lobby_bezel.dm b/voidcrew/modules/lobby_terminal/lobby_bezel.dm
index 8f20b3b887a..7cb821b95cd 100644
--- a/voidcrew/modules/lobby_terminal/lobby_bezel.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_bezel.dm
@@ -93,13 +93,17 @@
 				return FALSE
 			INVOKE_ASYNC(user, TYPE_PROC_REF(/mob/dead/new_player, make_me_an_observer))
 			return FALSE
-		if("character", "settings")
+		if("character")
+			// The CHARACTER key opens the terminal's own CHARACTER tab (lobby_character.dm).
+			goto_tab("character")
+			return FALSE
+		if("settings")
 			var/datum/preferences/preferences = user.client?.prefs
 			if(!preferences)
 				return FALSE
 			if(!(SSearly_assets.initialized == INITIALIZATION_INNEW_REGULAR || SSatoms.initialized == INITIALIZATION_INNEW_REGULAR))
 				return FALSE
-			preferences.current_window = action == "character" ? PREFERENCE_TAB_CHARACTER_PREFERENCES : PREFERENCE_TAB_GAME_PREFERENCES
+			preferences.current_window = PREFERENCE_TAB_GAME_PREFERENCES
 			preferences.update_static_data(user)
 			preferences.ui_interact(user)
 			return FALSE
diff --git a/voidcrew/modules/lobby_terminal/lobby_character.dm b/voidcrew/modules/lobby_terminal/lobby_character.dm
new file mode 100644
index 00000000000..48ccb44938d
--- /dev/null
+++ b/voidcrew/modules/lobby_terminal/lobby_character.dm
@@ -0,0 +1,14 @@
+/**
+ * # Dock terminal: CHARACTER section (package C1)
+ *
+ * A thin adapter over /datum/preferences for the terminal's CHARACTER tab. Overrides the
+ * seams declared in _lobby_terminal.dm without the `proc/` keyword: char_data(), char_act(),
+ * char_changed(), char_push(), char_save().
+ *
+ * Owns: every char_* action except the preview's, the char/char_static pushes, saving,
+ * sync with tg's character window, the species confirm flow, the native colour pick and the
+ * shared roundstart job pool GLOB (C2 reads it for the preview's outfits).
+ *
+ * Preference adapters (is_accessible override, lobby_char_writes, ui_act sync) live in
+ * lobby_character_prefs.dm; the preview in lobby_character_preview.dm.
+ */
diff --git a/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm b/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
new file mode 100644
index 00000000000..a56b3206310
--- /dev/null
+++ b/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
@@ -0,0 +1,8 @@
+/**
+ * # Dock terminal: CHARACTER preference adapters (package C1)
+ *
+ * Owns /datum/preferences/var/lobby_char_writes, the flag-gated /datum/preference/is_accessible()
+ * override that lets the terminal write character prefs whatever tg's window last showed,
+ * the /datum/preferences/ui_act() override that tells the terminal when tg's window changed
+ * something, lobby_compile_char() and the null-safe slot switch.
+ */
diff --git a/voidcrew/modules/lobby_terminal/lobby_character_preview.dm b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
new file mode 100644
index 00000000000..58e9f7234a2
--- /dev/null
+++ b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
@@ -0,0 +1,8 @@
+/**
+ * # Dock terminal: CHARACTER preview (package C2)
+ *
+ * Server-rendered PNGs of the dressed mannequin, one facing at a time, cached by appearance
+ * key and pushed as one-off char_preview updates. Overrides char_preview_request() and
+ * char_appearance_key() from _lobby_terminal.dm, and owns char_preview_cache, the render
+ * queue and its time budget, and the dress table built from the roundstart job pool.
+ */
diff --git a/voidcrew/modules/lobby_terminal/lobby_tgui.dm b/voidcrew/modules/lobby_terminal/lobby_tgui.dm
index f41718c57c9..d1c8040d1b1 100644
--- a/voidcrew/modules/lobby_terminal/lobby_tgui.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_tgui.dm
@@ -90,6 +90,7 @@ GLOBAL_DATUM_INIT(lobby_terminal_state, /datum/ui_state/lobby_terminal, new)
 	merge_section(data, crews_data(user))
 	merge_section(data, yard_data(user))
 	merge_section(data, housing_data(user))
+	merge_section(data, char_data(user))
 	return data
 
 /// Copies a section's keys into the payload. Sections may return null.
@@ -113,4 +114,9 @@ GLOBAL_DATUM_INIT(lobby_terminal_state, /datum/ui_state/lobby_terminal, new)
 		return yard_act(action, params, user)
 	if(prefix == "home_")
 		return housing_act(action, params, user)
+	if(prefix == "char_")
+		// Same guard as tg's character window: no prefs edits before the preference assets exist.
+		if(!user.client?.prefs || SSearly_assets.initialized != INITIALIZATION_INNEW_REGULAR)
+			return FALSE
+		return char_act(action, params, user)
 	return shell_act(action, params, user)
diff --git a/voidcrew/modules/unit_tests/_unit_tests.dm b/voidcrew/modules/unit_tests/_unit_tests.dm
index 163f7f98824..ae4a737528c 100644
--- a/voidcrew/modules/unit_tests/_unit_tests.dm
+++ b/voidcrew/modules/unit_tests/_unit_tests.dm
@@ -10,6 +10,7 @@
 #include "glass_floor_baseturfs.dm"
 #include "hyperspace_jetpack.dm"
 #include "late_initialization_reentry.dm"
+#include "lobby_character.dm"
 #include "lobby_terminal_bill.dm"
 #include "map_parser_attributes.dm"
 #include "mod_night_vision.dm"
diff --git a/voidcrew/modules/unit_tests/lobby_character.dm b/voidcrew/modules/unit_tests/lobby_character.dm
new file mode 100644
index 00000000000..7562a79a530
--- /dev/null
+++ b/voidcrew/modules/unit_tests/lobby_character.dm
@@ -0,0 +1,7 @@
+/**
+ * Dock terminal CHARACTER section (voidcrew/modules/lobby_terminal/lobby_character*.dm).
+ * Written by package C1: crafted char_* acts for quirk budget and caps, species-blocked
+ * quirks, bad loadout paths and colours, names with markup, out-of-range slots, game-pref
+ * and deny-listed keys in char_set, the species confirm, and writes while tg's window is
+ * on the game tab.
+ */

From 1e6ce44470a074af07584442ccd8db487d4be869 Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:49:56 -0800
Subject: [PATCH 2/7] Dock terminal CHARACTER backend: char actions, pushes,
 saving and tg window sync

Adds the char_* adapter over /datum/preferences: preference writes through
update_preference, quirks, roles (one HIGH), loadout picks, colours, names and
skins through tg's middleware, a terminal species-change confirm, the native
colour dialog for body colours, debounced saving, two-way sync with tg's
character window, and a flag-gated is_accessible override so terminal edits
work while tg's window was last on game settings. Unit test covers the
crafted-act abuse cases.
---
 .../modules/lobby_terminal/lobby_character.dm | 571 ++++++++++++++++++
 .../lobby_terminal/lobby_character_prefs.dm   |  92 +++
 .../modules/unit_tests/lobby_character.dm     | 243 ++++++++
 3 files changed, 906 insertions(+)

diff --git a/voidcrew/modules/lobby_terminal/lobby_character.dm b/voidcrew/modules/lobby_terminal/lobby_character.dm
index 48ccb44938d..f222dc24f68 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character.dm
@@ -11,4 +11,575 @@
  *
  * Preference adapters (is_accessible override, lobby_char_writes, ui_act sync) live in
  * lobby_character_prefs.dm; the preview in lobby_character_preview.dm.
+ *
+ * Every value goes through tg's own validation (update_preference(), the quirk and loadout
+ * middleware); this file only checks the shape of what the client sent and replaces tg's popups.
  */
+
+/// Most char_* actions one terminal takes in a second; the rest are dropped.
+#define LOBBY_CHAR_ACTS_PER_SECOND 20
+/// Edits are written to disk this long after the last one (and on slot switch, hide and Destroy).
+#define LOBBY_CHAR_SAVE_DELAY (5 SECONDS)
+/// A native colour dialog left open longer than this no longer blocks a new one.
+#define LOBBY_CHAR_PICK_TIMEOUT (2 MINUTES)
+
+/// Every job a roundstart ship can spawn with (job datums), built once. Read through lobby_char_job_pool().
+GLOBAL_LIST_EMPTY(lobby_char_job_pool)
+/// char_static, built once per round by lobby_char_static().
+GLOBAL_LIST_EMPTY(lobby_char_static)
+
+/datum/lobby_terminal
+	/// Edits not yet written to disk.
+	var/char_dirty = FALSE
+	/// char_static goes out with the next push (once per page, on char_open).
+	var/char_static_due = FALSE
+	/// Species change waiting on char_confirm: list("value", "quirks", "slot"), or null. Any other edit clears it.
+	var/list/char_confirm_state
+	/// The facing the client last asked for (char_turn), so edits re-render the side on screen.
+	var/char_facing = SOUTH
+	/// Action spam guard: start of the current one-second window and the actions taken in it.
+	var/char_act_window = 0
+	var/char_act_count = 0
+
+/// Builds (once) and returns the roundstart job pool as a flat list of job datums.
+/proc/lobby_char_job_pool()
+	if(!length(GLOB.lobby_char_job_pool))
+		var/list/pool = build_roundstart_job_pool()
+		for(var/datum/job/job as anything in pool)
+			GLOB.lobby_char_job_pool += job
+	return GLOB.lobby_char_job_pool
+
+/// The small per-round catalog the terminal adds to preferences.json: role examples and kit colour slot counts.
+/proc/lobby_char_static()
+	if(length(GLOB.lobby_char_static))
+		return GLOB.lobby_char_static
+	var/list/roles = list()
+	for(var/category in GLOB.job_categories)
+		var/list/slots_by_title = list()
+		for(var/datum/job/job as anything in lobby_char_job_pool())
+			if(job.job_category != category || !job.title)
+				continue
+			slots_by_title[job.title] += 1
+		sortTim(slots_by_title, GLOBAL_PROC_REF(cmp_numeric_dsc), associative = TRUE)
+		var/list/examples = list()
+		for(var/title in slots_by_title)
+			examples += title
+			if(length(examples) >= 3)
+				break
+		roles += list(list(category, jointext(examples, ", ")))
+	var/list/kit_colors = list()
+	for(var/path in GLOB.all_loadout_datums)
+		var/datum/loadout_item/item = GLOB.all_loadout_datums[path]
+		var/count = lobby_char_kit_color_count(item)
+		if(count)
+			kit_colors["[item.item_path]"] = count
+	GLOB.lobby_char_static = list("roles" = roles, "kit_colors" = kit_colors)
+	return GLOB.lobby_char_static
+
+/// Number of GAGS colour slots a recolourable loadout item has, or 0.
+/proc/lobby_char_kit_color_count(datum/loadout_item/item)
+	if(!istype(item) || !item.can_be_greyscale)
+		return 0
+	var/obj/item/item_path = item.item_path
+	var/config_path = initial(item_path.greyscale_config)
+	if(!config_path)
+		return 0
+	var/datum/greyscale_config/config = SSgreyscale.configurations["[config_path]"]
+	return config?.expected_colors || 0
+
+/// "#rgb", "rrggbb" or "#rrggbb" to "#rrggbb" (lower case), or null when it isn't a colour.
+/proc/lobby_char_clean_hex(value)
+	if(!istext(value))
+		return null
+	var/static/regex/hex6 = regex(@"^#?([0-9a-fA-F]{6})$")
+	var/static/regex/hex3 = regex(@"^#?([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$")
+	if(hex6.Find(value))
+		return lowertext("#[hex6.group[1]]")
+	if(hex3.Find(value))
+		return lowertext("#[hex3.group[1]][hex3.group[1]][hex3.group[2]][hex3.group[2]][hex3.group[3]][hex3.group[3]]")
+	return null
+
+/// Whole number out of a JSON param (number or numeric text), or null.
+/proc/lobby_char_int(value)
+	if(istext(value))
+		value = text2num(value)
+	if(!isnum(value) || value != round(value))
+		return null
+	return value
+
+/// The prefs this terminal edits. A proc so the unit test can hand in a mock client's prefs.
+/datum/lobby_terminal/proc/char_get_prefs(mob/user)
+	return user?.client?.prefs
+
+/datum/lobby_terminal/char_data(mob/user)
+	return list("char_rev" = char_rev)
+
+/datum/lobby_terminal/char_act(action, list/params, mob/user)
+	var/datum/preferences/prefs = char_get_prefs(user)
+	if(!prefs)
+		return FALSE
+	prefs.lobby_char_writes = 0 // in case a runtime left it set
+	if(world.time >= char_act_window + 1 SECONDS)
+		char_act_window = world.time
+		char_act_count = 0
+	if(++char_act_count > LOBBY_CHAR_ACTS_PER_SECOND)
+		return FALSE
+	if(!islist(params))
+		params = list()
+
+	switch(action)
+		if("char_open")
+			return char_open_tab(user, prefs)
+		if("char_slot")
+			return char_switch_slot(user, prefs, lobby_char_int(params["slot"]))
+		if("char_set")
+			// params["confirm"] is ignored: only char_confirm can apply a species change that drops quirks.
+			return char_set_pref(user, prefs, params["key"], params["value"])
+		if("char_random_name")
+			var/datum/preference/name/real_name/name_pref = GLOB.preference_entries[/datum/preference/name/real_name]
+			return char_apply(user, prefs, name_pref, name_pref.create_random_value(prefs))
+		if("char_color_pick")
+			return char_start_color_pick(user, prefs, params["key"])
+		if("char_voice_play")
+			var/datum/preference_middleware/bark/bark = locate() in prefs.middleware
+			if(bark)
+				INVOKE_ASYNC(bark, TYPE_PROC_REF(/datum/preference_middleware/bark, play_bark), list(), user)
+			return TRUE
+		if("char_role")
+			return char_set_role(user, prefs, params["category"], lobby_char_int(params["level"]))
+		if("char_quirk")
+			return char_set_quirk(user, prefs, params["quirk"], !!lobby_char_int(params["on"]))
+		if("char_kit")
+			return char_set_kit(user, prefs, params["path"], !!lobby_char_int(params["on"]))
+		if("char_kit_color")
+			return char_set_kit_color(user, prefs, params["path"], lobby_char_int(params["slot"]), params["color"])
+		if("char_kit_name")
+			return char_set_kit_name(user, prefs, params["path"], params["name"])
+		if("char_kit_skin")
+			return char_set_kit_skin(user, prefs, params["path"], params["skin"])
+		if("char_dress")
+			return char_set_dress(user, prefs, params["category"])
+		if("char_turn")
+			var/dir = lobby_char_int(params["dir"])
+			if(!(dir in GLOB.cardinals))
+				return FALSE
+			char_facing = dir
+			char_preview_request(dir)
+			return TRUE
+		if("char_confirm")
+			return char_answer_confirm(user, prefs, !!lobby_char_int(params["ok"]))
+	return FALSE
+
+/// Bookkeeping after any change to the character: rev, save timer, pushes to both windows, the preview.
+/datum/lobby_terminal/proc/char_edited(mob/user, datum/preferences/prefs)
+	char_rev++
+	char_dirty = TRUE
+	char_confirm_state = null
+	addtimer(CALLBACK(src, PROC_REF(char_save)), LOBBY_CHAR_SAVE_DELAY, TIMER_UNIQUE | TIMER_OVERRIDE)
+	char_push(user)
+	char_preview_request(char_facing)
+	if(user && SStgui.get_open_ui(user, prefs))
+		addtimer(CALLBACK(src, PROC_REF(char_sync_tg_window)), 0.5 SECONDS, TIMER_UNIQUE)
+
+/// Resends tg's character window after terminal edits (its autoupdate is off).
+/datum/lobby_terminal/proc/char_sync_tg_window()
+	var/mob/user = owner?.mob
+	var/datum/preferences/prefs = owner?.prefs
+	if(!user || !prefs)
+		return
+	prefs.update_static_data(user)
+
+/// One preference value through tg's update_preference(), then the middleware's post hooks.
+/datum/lobby_terminal/proc/char_apply(mob/user, datum/preferences/prefs, datum/preference/preference, value)
+	if(!prefs.lobby_update_preference(preference, value))
+		return FALSE
+	if(istype(preference, /datum/preference/name))
+		prefs.tainted_character_profiles = TRUE
+	for(var/datum/preference_middleware/preference_middleware as anything in prefs.middleware)
+		preference_middleware.post_set_preference(user, preference.savefile_key, value)
+	char_edited(user, prefs)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_open_tab(mob/user, datum/preferences/prefs)
+	if(ui && !QDELETED(ui) && ui.window)
+		if(ui.send_asset(get_asset_datum(/datum/asset/json/preferences)))
+			owner?.browse_queue_flush()
+		if(QDELETED(src) || !ui || QDELETED(ui))
+			return FALSE
+	char_open = TRUE
+	char_static_due = TRUE
+	char_push(user)
+	char_preview_request(char_facing)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_switch_slot(mob/user, datum/preferences/prefs, slot)
+	if(isnull(slot) || char_pending_pick)
+		return FALSE
+	if(slot == prefs.default_slot)
+		return FALSE
+	if(!prefs.lobby_switch_to_slot(slot, user))
+		return FALSE
+	char_edited(user, prefs)
+	char_save()
+	return TRUE
+
+/datum/lobby_terminal/proc/char_set_pref(mob/user, datum/preferences/prefs, key, value)
+	if(!istext(key))
+		return FALSE
+	var/datum/preference/preference = GLOB.preference_entries_by_key[key]
+	if(!prefs.lobby_char_key_allowed(preference))
+		return FALSE
+	if(istype(preference, /datum/preference/color))
+		value = lobby_char_clean_hex(value)
+		if(!value)
+			return FALSE
+	if(istype(preference, /datum/preference/choiced/species))
+		var/list/dropped = char_quirks_dropped_by(prefs, value)
+		if(length(dropped))
+			char_confirm_state = list("value" = value, "quirks" = dropped, "slot" = prefs.default_slot)
+			char_rev++
+			char_push(user)
+			return TRUE
+	return char_apply(user, prefs, preference, value)
+
+/// Names of the taken quirks the species with that id can't keep.
+/datum/lobby_terminal/proc/char_quirks_dropped_by(datum/preferences/prefs, species_id)
+	var/list/dropped = list()
+	if(!istext(species_id))
+		return dropped
+	var/species_type = GLOB.species_list[species_id]
+	if(!species_type || !GLOB.species_prototypes[species_type])
+		return dropped
+	for(var/quirk_name in prefs.all_quirks)
+		var/datum/quirk/prototype = SSquirks.quirk_prototypes[SSquirks.quirks[quirk_name]]
+		if(prototype && !prototype.is_species_appropriate(species_type))
+			dropped += quirk_name
+	return dropped
+
+/datum/lobby_terminal/proc/char_answer_confirm(mob/user, datum/preferences/prefs, ok)
+	var/list/state = char_confirm_state
+	if(!state)
+		return FALSE
+	char_confirm_state = null
+	if(!ok || state["slot"] != prefs.default_slot)
+		char_rev++
+		char_push(user)
+		return TRUE
+	// post_set_preference -> validate_quirks() drops what no longer fits, as in tg.
+	if(!char_apply(user, prefs, GLOB.preference_entries[/datum/preference/choiced/species], state["value"]))
+		char_rev++
+		char_push(user)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_start_color_pick(mob/user, datum/preferences/prefs, key)
+	var/static/list/native_keys = list("hair_color", "hair_gradient_color", "facial_hair_color", "feature_mcolor", "eye_color")
+	if(!istext(key) || !(key in native_keys))
+		return FALSE
+	var/datum/preference/color/preference = GLOB.preference_entries_by_key[key]
+	if(!istype(preference) || !prefs.lobby_char_key_allowed(preference))
+		return FALSE
+	prefs.lobby_char_writes = 1
+	var/accessible = preference.is_accessible(prefs)
+	prefs.lobby_char_writes = 0
+	if(!accessible)
+		return FALSE
+	if(char_pending_pick && world.time < char_pending_pick["at"] + LOBBY_CHAR_PICK_TIMEOUT)
+		return FALSE
+	char_pending_pick = list("key" = key, "slot" = prefs.default_slot, "rev" = char_rev, "at" = world.time)
+	INVOKE_ASYNC(src, PROC_REF(char_wait_color_pick), user, prefs, preference, char_pending_pick)
+	return TRUE
+
+/// The native colour dialog (tg's own free picker). Sleeps on input(); everything is re-checked after.
+/datum/lobby_terminal/proc/char_wait_color_pick(mob/user, datum/preferences/prefs, datum/preference/color/preference, list/pick)
+	var/new_color = input(user, "Select new color", null, prefs.read_preference(preference.type) || COLOR_WHITE) as color|null
+	if(QDELETED(src))
+		return
+	if(char_pending_pick == pick)
+		char_pending_pick = null
+	if(!new_color || QDELETED(user) || char_get_prefs(user) != prefs)
+		return
+	if(prefs.default_slot != pick["slot"] || char_rev != pick["rev"])
+		return
+	new_color = lobby_char_clean_hex(new_color)
+	if(!new_color)
+		return
+	char_apply(user, prefs, preference, new_color)
+
+/datum/lobby_terminal/proc/char_set_role(mob/user, datum/preferences/prefs, category, level)
+	if(!istext(category) || !(category in GLOB.job_categories))
+		return FALSE
+	if(level != 0 && level != JP_LOW && level != JP_MEDIUM && level != JP_HIGH)
+		return FALSE
+	var/new_level = level || null
+	if(prefs.ship_category_preferences[category] == new_level)
+		return FALSE
+	if(new_level == JP_HIGH)
+		// One HIGH role: the old one drops to MED.
+		for(var/other in prefs.ship_category_preferences)
+			if(other != category && prefs.ship_category_preferences[other] == JP_HIGH)
+				prefs.ship_category_preferences[other] = JP_MEDIUM
+	if(!prefs.set_ship_category_preference(category, new_level))
+		return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/// A quirk's name from either its name or its quirk_info key (sanitize_css_class_name), or null.
+/datum/lobby_terminal/proc/char_quirk_name(quirk)
+	if(!istext(quirk))
+		return null
+	var/list/all = SSquirks.get_quirks()
+	if(all[quirk])
+		return quirk
+	for(var/quirk_name in all)
+		if(sanitize_css_class_name(quirk_name) == quirk)
+			return quirk_name
+	return null
+
+/datum/lobby_terminal/proc/char_set_quirk(mob/user, datum/preferences/prefs, quirk, on)
+	var/quirk_name = char_quirk_name(quirk)
+	if(!quirk_name)
+		return FALSE
+	var/datum/preference_middleware/quirks/manager = locate() in prefs.middleware
+	if(!manager)
+		return FALSE
+	if(on)
+		if(quirk_name in prefs.all_quirks)
+			return FALSE
+		var/datum/quirk/prototype = SSquirks.quirk_prototypes[SSquirks.quirks[quirk_name]]
+		if(!prototype?.is_species_appropriate(prefs.read_preference(/datum/preference/choiced/species)))
+			return FALSE
+		// give_quirk runs SSquirks.filter_invalid_quirks(): points, positive cap, blacklist pairs, mood.
+		manager.give_quirk(list("quirk" = quirk_name), user)
+		if(!(quirk_name in prefs.all_quirks))
+			char_push(user) // snap the client back
+			return FALSE
+	else
+		if(!(quirk_name in prefs.all_quirks))
+			return FALSE
+		// remove_quirk refuses a removal that would leave an invalid set (tg's rule).
+		manager.remove_quirk(list("quirk" = quirk_name), user)
+		if(quirk_name in prefs.all_quirks)
+			char_push(user)
+			return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/// The loadout item datum for a typepath string, or null. Only GLOB.all_loadout_datums items exist here.
+/datum/lobby_terminal/proc/char_kit_item(path)
+	if(!istext(path))
+		return null
+	var/item_path = text2path(path)
+	if(!ispath(item_path, /obj/item))
+		return null
+	var/datum/loadout_item/item = GLOB.all_loadout_datums[item_path]
+	return istype(item) ? item : null
+
+/// A copy of the loadout list with its own copy of that item's details, or null when the item isn't packed.
+/datum/lobby_terminal/proc/char_kit_copy(datum/preferences/prefs, datum/loadout_item/item)
+	var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+	if(!islist(loadout) || !(item.item_path in loadout))
+		return null
+	loadout = loadout.Copy()
+	var/list/details = loadout[item.item_path]
+	loadout[item.item_path] = islist(details) ? details.Copy() : list()
+	return loadout
+
+/datum/lobby_terminal/proc/char_kit_has(datum/preferences/prefs, datum/loadout_item/item)
+	var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+	return islist(loadout) && (item.item_path in loadout)
+
+/datum/lobby_terminal/proc/char_set_kit(mob/user, datum/preferences/prefs, path, on)
+	var/datum/loadout_item/item = char_kit_item(path)
+	if(!item)
+		return FALSE
+	var/datum/preference_middleware/loadout/manager = locate() in prefs.middleware
+	if(!manager || char_kit_has(prefs, item) == on)
+		return FALSE
+	prefs.lobby_char_writes = 1
+	if(on)
+		manager.select_item(item) // the category's duplicate rule may drop an older pick
+	else
+		manager.deselect_item(item)
+	prefs.lobby_char_writes = 0
+	if(char_kit_has(prefs, item) != on)
+		char_push(user)
+		return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_set_kit_color(mob/user, datum/preferences/prefs, path, slot, color)
+	var/datum/loadout_item/item = char_kit_item(path)
+	var/count = lobby_char_kit_color_count(item)
+	if(!count || isnull(slot) || slot < 0 || slot >= count)
+		return FALSE
+	color = lobby_char_clean_hex(color)
+	if(!color)
+		return FALSE
+	var/list/loadout = char_kit_copy(prefs, item)
+	if(!loadout)
+		return FALSE
+	var/list/details = loadout[item.item_path]
+	var/obj/item/item_path = item.item_path
+	var/list/colors = SSgreyscale.ParseColorString(details[INFO_GREYSCALE] || initial(item_path.greyscale_colors) || "")
+	if(length(colors) != count)
+		colors = SSgreyscale.ParseColorString(initial(item_path.greyscale_colors) || "")
+	colors.len = count
+	for(var/i in 1 to count)
+		colors[i] = lobby_char_clean_hex(colors[i]) || COLOR_WHITE
+	colors[slot + 1] = color
+	details[INFO_GREYSCALE] = colors.Join("")
+	if(!prefs.lobby_update_preference(GLOB.preference_entries[/datum/preference/loadout], loadout))
+		return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_set_kit_name(mob/user, datum/preferences/prefs, path, name)
+	var/datum/loadout_item/item = char_kit_item(path)
+	if(!item?.can_be_named || !istext(name))
+		return FALSE
+	var/list/loadout = char_kit_copy(prefs, item)
+	if(!loadout)
+		return FALSE
+	var/list/details = loadout[item.item_path]
+	name = trim(name)
+	if(name == "")
+		details -= INFO_NAMED
+	else
+		// Same limits as tg's popup (tgui_input_text, MAX_NAME_LEN), stored HTML-encoded as it does.
+		if(length_char(name) > MAX_NAME_LEN || !reject_bad_text(name, MAX_NAME_LEN))
+			return FALSE
+		details[INFO_NAMED] = html_encode(name)
+	if(!prefs.lobby_update_preference(GLOB.preference_entries[/datum/preference/loadout], loadout))
+		return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_set_kit_skin(mob/user, datum/preferences/prefs, path, skin)
+	var/datum/loadout_item/item = char_kit_item(path)
+	if(!item?.can_be_reskinned || !istext(skin) || !item.cached_reskin_options?[skin])
+		return FALSE
+	var/datum/preference_middleware/loadout/manager = locate() in prefs.middleware
+	if(!manager || !char_kit_has(prefs, item))
+		return FALSE
+	prefs.lobby_char_writes = 1
+	item.handle_loadout_action(manager, user, "set_skin", list("skin" = skin))
+	prefs.lobby_char_writes = 0
+	var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+	var/list/details = loadout?[item.item_path]
+	if(!islist(details) || details[INFO_RESKIN] != skin)
+		return FALSE
+	char_edited(user, prefs)
+	return TRUE
+
+/datum/lobby_terminal/proc/char_set_dress(mob/user, datum/preferences/prefs, category)
+	if(!category)
+		category = null
+	else if(!istext(category) || !(category in GLOB.job_categories) || category == JOB_CAT_SILICON)
+		return FALSE
+	if(char_dress == category)
+		return FALSE
+	char_dress = category
+	char_rev++
+	char_push(user)
+	char_preview_request(char_facing)
+	return TRUE
+
+/// The category the preview wears: the chosen one, else the HIGH role, else the highest set, else Assistant.
+/datum/lobby_terminal/proc/char_resolved_dress(datum/preferences/prefs)
+	if(char_dress)
+		return char_dress
+	var/best
+	var/best_level = 0
+	for(var/category in GLOB.job_categories)
+		var/level = prefs?.ship_category_preferences[category]
+		if(level > best_level)
+			best = category
+			best_level = level
+	if(!best || best == JOB_CAT_SILICON)
+		return JOB_CAT_ASSISTANT
+	return best
+
+/// The char block (CharData in types.ts).
+/datum/lobby_terminal/proc/char_build(datum/preferences/prefs, mob/user)
+	SHOULD_NOT_SLEEP(TRUE)
+	var/list/quirks = list()
+	for(var/quirk_name in prefs.all_quirks)
+		quirks += sanitize_css_class_name(quirk_name)
+	var/list/quirks_blocked = list()
+	var/species_type = prefs.read_preference(/datum/preference/choiced/species)
+	for(var/quirk_type in SSquirks.quirk_prototypes)
+		var/datum/quirk/prototype = SSquirks.quirk_prototypes[quirk_type]
+		if(!prototype.is_species_appropriate(species_type))
+			quirks_blocked += sanitize_css_class_name(prototype.name)
+	var/list/kit = list()
+	var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+	for(var/item_path in loadout)
+		var/list/details = loadout[item_path]
+		var/list/entry = list()
+		if(islist(details))
+			if(details[INFO_GREYSCALE])
+				entry["greyscale"] = details[INFO_GREYSCALE]
+			if(details[INFO_NAMED])
+				entry["name"] = details[INFO_NAMED]
+			if(details[INFO_RESKIN])
+				entry["reskin"] = details[INFO_RESKIN]
+		kit["[item_path]"] = entry
+	var/list/confirm
+	if(char_confirm_state)
+		confirm = list("kind" = "species", "value" = char_confirm_state["value"], "quirks" = char_confirm_state["quirks"])
+	return list(
+		"rev" = char_rev,
+		"slot" = prefs.default_slot,
+		"slots" = prefs.create_character_profiles(),
+		"prefs" = prefs.lobby_compile_char(user),
+		"quirks" = quirks,
+		"quirks_blocked" = quirks_blocked,
+		"roles" = prefs.ship_category_preferences.Copy(),
+		"kit" = kit,
+		"dress" = char_resolved_dress(prefs),
+		"confirm" = confirm,
+	)
+
+/datum/lobby_terminal/char_push(mob/user)
+	if(!char_open || !ui || QDELETED(ui))
+		return
+	if(!user)
+		user = owner?.mob
+	var/datum/preferences/prefs = char_get_prefs(user)
+	if(!prefs)
+		return
+	var/list/payload = list("char_rev" = char_rev, "char" = char_build(prefs, user))
+	if(char_static_due)
+		char_static_due = FALSE
+		payload["char_static"] = lobby_char_static()
+		var/static/sizes_logged = FALSE
+		if(!sizes_logged)
+			sizes_logged = TRUE
+			log_world("Lobby terminal CHARACTER: char block [length(json_encode(payload["char"]))] B, char_static [length(json_encode(payload["char_static"]))] B.")
+	ui.send_update(payload)
+
+/datum/lobby_terminal/char_changed()
+	if(!char_open)
+		return
+	char_rev++
+	char_confirm_state = null
+	addtimer(CALLBACK(src, PROC_REF(char_changed_push)), 0.2 SECONDS, TIMER_UNIQUE)
+
+/datum/lobby_terminal/proc/char_changed_push()
+	char_push()
+	char_preview_request(char_facing)
+
+/datum/lobby_terminal/char_save()
+	SHOULD_NOT_SLEEP(TRUE)
+	if(!char_dirty)
+		return
+	var/datum/preferences/prefs = owner?.prefs
+	if(!prefs?.savefile)
+		return
+	char_dirty = FALSE
+	prefs.save_character()
+	prefs.save_preferences()
+
+#undef LOBBY_CHAR_ACTS_PER_SECOND
+#undef LOBBY_CHAR_SAVE_DELAY
+#undef LOBBY_CHAR_PICK_TIMEOUT
diff --git a/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm b/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
index a56b3206310..80c4c4ab736 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character_prefs.dm
@@ -6,3 +6,95 @@
  * the /datum/preferences/ui_act() override that tells the terminal when tg's window changed
  * something, lobby_compile_char() and the null-safe slot switch.
  */
+
+/datum/preferences
+	/// Set (1) only while the dock terminal reads or writes character preferences. While set,
+	/// is_accessible() judges character prefs as if tg's window were on the character tab, so a
+	/// player whose tg window was last on game settings can still edit their character from the
+	/// terminal. Cleared after every use and at the top of every char_act().
+	var/lobby_char_writes = 0
+
+/**
+ * The current_window trap. tg hides every character preference while its window is on the game
+ * tab, which would make every terminal edit (and tg's own loadout middleware) silently fail.
+ * The swap is invisible to anything else: is_accessible() is SHOULD_NOT_SLEEP, so nothing can run
+ * between setting and restoring current_window. Without the flag this is tg's proc unchanged.
+ */
+/datum/preference/is_accessible(datum/preferences/preferences)
+	if(preferences?.lobby_char_writes && savefile_identifier == PREFERENCE_CHARACTER && preferences.current_window != PREFERENCE_TAB_CHARACTER_PREFERENCES)
+		var/real_window = preferences.current_window
+		preferences.current_window = PREFERENCE_TAB_CHARACTER_PREFERENCES
+		. = ..()
+		preferences.current_window = real_window
+		return .
+	return ..()
+
+/// tg's window changed something: the terminal re-reads it (coalesced in char_changed()).
+/datum/preferences/ui_act(action, list/params, datum/tgui/ui, datum/ui_state/state)
+	. = ..()
+	if(.)
+		parent?.lobby_terminal?.char_changed()
+
+/// update_preference() with the terminal flag held, so the current_window trap can't refuse it.
+/datum/preferences/proc/lobby_update_preference(datum/preference/preference, value)
+	lobby_char_writes = 1
+	. = update_preference(preference, value)
+	lobby_char_writes = 0
+
+/// TRUE when that preference is one the terminal shows and may write.
+/datum/preferences/proc/lobby_char_key_allowed(datum/preference/preference)
+	SHOULD_NOT_SLEEP(TRUE)
+	if(!istype(preference) || preference.savefile_identifier != PREFERENCE_CHARACTER)
+		return FALSE
+	if(istype(preference, /datum/preference/loadout))
+		return FALSE // char_kit*
+	if(istype(preference, /datum/preference/name) && !istype(preference, /datum/preference/name/real_name))
+		return FALSE // AI, cyborg, clown, mime, religion and alias names: no tg alt-names here
+	var/static/list/denied = list(
+		"random_body",
+		"random_name",
+		"random_hardcore",
+		"persistent_scars",
+		"uplink_loc",
+		"prefered_security_department",
+		"operative_species",
+		"preferred_ai_core_display",
+		"preferred_ai_emote_display",
+		"preferred_ai_hologram_display",
+		"silicon_gender",
+	)
+	return !(preference.savefile_key in denied)
+
+/**
+ * Every accessible, allowed PREFERENCE_CHARACTER preference as savefile_key -> compile_ui_data().
+ * A flat copy of compile_character_preferences() with no middleware extras.
+ */
+/datum/preferences/proc/lobby_compile_char(mob/user)
+	SHOULD_NOT_SLEEP(TRUE)
+	var/list/out = list()
+	lobby_char_writes = 1
+	for(var/datum/preference/preference as anything in get_preferences_in_priority_order())
+		if(!lobby_char_key_allowed(preference))
+			continue
+		if(!preference.is_accessible(src))
+			continue
+		out[preference.savefile_key] = preference.compile_ui_data(user, read_preference(preference.type))
+	lobby_char_writes = 0
+	return out
+
+/**
+ * switch_to_slot() without its unguarded character_preview_view.update_body() (tg's preview only
+ * exists while tg's window is open). Saves the current slot first. FALSE for a slot out of range.
+ */
+/datum/preferences/proc/lobby_switch_to_slot(new_slot, mob/user)
+	if(!isnum(new_slot) || new_slot != round(new_slot) || new_slot < 1 || new_slot > max_save_slots)
+		return FALSE
+	save_character()
+	if(!load_character(new_slot))
+		randomise_appearance_prefs()
+		save_character()
+	tainted_character_profiles = TRUE
+	for(var/datum/preference_middleware/preference_middleware as anything in middleware)
+		preference_middleware.on_new_character(user)
+	character_preview_view?.update_body()
+	return TRUE
diff --git a/voidcrew/modules/unit_tests/lobby_character.dm b/voidcrew/modules/unit_tests/lobby_character.dm
index 7562a79a530..c278b58daa3 100644
--- a/voidcrew/modules/unit_tests/lobby_character.dm
+++ b/voidcrew/modules/unit_tests/lobby_character.dm
@@ -5,3 +5,246 @@
  * and deny-listed keys in char_set, the species confirm, and writes while tg's window is
  * on the game tab.
  */
+
+/// A terminal with no client or tgui window, editing a mock client's prefs.
+/datum/lobby_terminal/lobby_char_test
+	var/datum/preferences/test_prefs
+
+/datum/lobby_terminal/lobby_char_test/New(datum/preferences/prefs)
+	test_prefs = prefs // no ..(): no client, no window
+
+/datum/lobby_terminal/lobby_char_test/char_get_prefs(mob/user)
+	return test_prefs
+
+/datum/lobby_terminal/lobby_char_test/char_preview_request(dir)
+	return // keep the renderer out of this test
+
+/datum/lobby_terminal/lobby_char_test/proc/act(action, list/params)
+	char_act_count = 0
+	return char_act(action, params || list(), null)
+
+/datum/unit_test/lobby_character
+
+/datum/unit_test/lobby_character/Run()
+	var/datum/client_interface/mock = new
+	var/datum/preferences/prefs = new(mock)
+	mock.prefs = prefs
+	var/datum/lobby_terminal/lobby_char_test/term = new(prefs)
+	prefs.all_quirks = list()
+	TEST_ASSERT(term.act("char_set", list("key" = "species", "value" = SPECIES_HUMAN)) || prefs.read_preference(/datum/preference/choiced/species) == /datum/species/human, "could not start as a human")
+
+	// is_accessible: tg's rule without the flag, both windows; the flag never opens game prefs.
+	var/datum/preference/age_pref = GLOB.preference_entries[/datum/preference/numeric/age]
+	var/datum/preference/fancy_pref = GLOB.preference_entries_by_key["tgui_fancy"]
+	prefs.current_window = PREFERENCE_TAB_CHARACTER_PREFERENCES
+	TEST_ASSERT(age_pref.is_accessible(prefs), "age not accessible on the character tab")
+	TEST_ASSERT(!fancy_pref.is_accessible(prefs), "a game pref is accessible on the character tab")
+	prefs.current_window = PREFERENCE_TAB_GAME_PREFERENCES
+	TEST_ASSERT(!age_pref.is_accessible(prefs), "tg's window rule changed: age accessible on the game tab without the flag")
+	TEST_ASSERT(fancy_pref.is_accessible(prefs), "a game pref is not accessible on the game tab")
+	prefs.lobby_char_writes = 1
+	TEST_ASSERT(age_pref.is_accessible(prefs), "the flag does not open character prefs on the game tab")
+	TEST_ASSERT(fancy_pref.is_accessible(prefs), "the flag closed a game pref on the game tab")
+	TEST_ASSERT_EQUAL(prefs.current_window, PREFERENCE_TAB_GAME_PREFERENCES, "is_accessible did not restore current_window")
+	prefs.current_window = PREFERENCE_TAB_CHARACTER_PREFERENCES
+	TEST_ASSERT(!fancy_pref.is_accessible(prefs), "the flag opened a game pref on the character tab")
+	prefs.lobby_char_writes = 0
+
+	// The current_window trap: a terminal write while tg's window is on the game tab succeeds.
+	prefs.current_window = PREFERENCE_TAB_GAME_PREFERENCES
+	TEST_ASSERT(term.act("char_set", list("key" = "age", "value" = 31)), "age write refused while tg's window is on the game tab")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/numeric/age), 31, "age not written")
+	TEST_ASSERT_EQUAL(prefs.current_window, PREFERENCE_TAB_GAME_PREFERENCES, "current_window changed by a terminal write")
+	TEST_ASSERT_EQUAL(prefs.lobby_char_writes, 0, "lobby_char_writes left set")
+	TEST_ASSERT(length(prefs.lobby_compile_char(null)), "lobby_compile_char empty while tg's window is on the game tab")
+	prefs.current_window = PREFERENCE_TAB_CHARACTER_PREFERENCES
+
+	// Keys the terminal must refuse.
+	TEST_ASSERT(!term.act("char_set", list("key" = "tgui_fancy", "value" = 0)), "game pref written through char_set")
+	TEST_ASSERT(!term.act("char_set", list("key" = "random_name", "value" = "Always")), "deny-listed key written")
+	TEST_ASSERT(!term.act("char_set", list("key" = "ai_name", "value" = "HAL")), "alt-name written")
+	TEST_ASSERT(!term.act("char_set", list("key" = "loadout_list", "value" = list("/obj/item/gun/energy/pulse" = list()))), "loadout written through char_set")
+	TEST_ASSERT(!term.act("char_set", list("key" = "no_such_key", "value" = 1)), "unknown key accepted")
+	TEST_ASSERT(!term.act("char_set", list("key" = list("age"), "value" = 40)), "list key accepted")
+	TEST_ASSERT(!("ai_name" in prefs.lobby_compile_char(null)), "alt-name sent to the client")
+
+	// Names: markup and length never survive.
+	term.act("char_set", list("key" = "real_name", "value" = "<b>Mara</b> <script>Voss"))
+	var/name = prefs.read_preference(/datum/preference/name/real_name)
+	TEST_ASSERT(!findtext(name, "<") && !findtext(name, ">"), "markup kept in a name: [name]")
+	term.act("char_set", list("key" = "real_name", "value" = "Mara [repeat_string(300, "a")]"))
+	name = prefs.read_preference(/datum/preference/name/real_name)
+	TEST_ASSERT(length_char(name) <= MAX_NAME_LEN, "name over MAX_NAME_LEN")
+
+	// Colours.
+	TEST_ASSERT(!term.act("char_set", list("key" = "eye_color", "value" = "nothex")), "bad hex accepted")
+	TEST_ASSERT(!term.act("char_set", list("key" = "eye_color", "value" = "#12ab3")), "5-digit hex accepted")
+	TEST_ASSERT(term.act("char_set", list("key" = "eye_color", "value" = "#1A2B3C")), "good hex refused")
+	TEST_ASSERT_EQUAL(lowertext(prefs.read_preference(/datum/preference/color/eye_color)), "#1a2b3c", "eye colour not written")
+	TEST_ASSERT(!term.act("char_color_pick", list("key" = "underwear_color")), "native picker opened for a non-BODY colour")
+
+	// Slots.
+	var/start_slot = prefs.default_slot
+	TEST_ASSERT(!term.act("char_slot", list("slot" = 0)), "slot 0 accepted")
+	TEST_ASSERT(!term.act("char_slot", list("slot" = 99)), "slot 99 accepted")
+	TEST_ASSERT(!term.act("char_slot", list("slot" = 1.5)), "slot 1.5 accepted")
+	TEST_ASSERT(!term.act("char_slot", list("slot" = "abc")), "slot abc accepted")
+	TEST_ASSERT_EQUAL(prefs.default_slot, start_slot, "bad slot changed the slot")
+	var/other_slot = start_slot == 1 ? 2 : 1
+	TEST_ASSERT(term.act("char_slot", list("slot" = other_slot)), "valid slot refused")
+	TEST_ASSERT_EQUAL(prefs.default_slot, other_slot, "slot not switched")
+	TEST_ASSERT(term.act("char_slot", list("slot" = start_slot)), "switching back refused")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/numeric/age), 31, "slot switch lost the age")
+	prefs.all_quirks = list()
+	term.act("char_set", list("key" = "species", "value" = SPECIES_HUMAN))
+
+	// Roles: one HIGH. (Category names as text: the unit tests are included before JOB_CAT_* is defined.)
+	TEST_ASSERT(!term.act("char_role", list("category" = "Nope", "level" = 3)), "unknown category accepted")
+	TEST_ASSERT(!term.act("char_role", list("category" = "Cargo", "level" = 7)), "level 7 accepted")
+	TEST_ASSERT(term.act("char_role", list("category" = "Engineering", "level" = 3)), "HIGH refused")
+	TEST_ASSERT(term.act("char_role", list("category" = "Cargo", "level" = 3)), "second HIGH refused")
+	TEST_ASSERT_EQUAL(prefs.ship_category_preferences["Engineering"], JP_MEDIUM, "old HIGH not demoted to MED")
+	TEST_ASSERT_EQUAL(prefs.ship_category_preferences["Cargo"], JP_HIGH, "new HIGH not set")
+	TEST_ASSERT(term.act("char_role", list("category" = "Cargo", "level" = 0)), "NEVER refused")
+	TEST_ASSERT(isnull(prefs.ship_category_preferences["Cargo"]), "NEVER kept the role")
+
+	check_quirks(term, prefs)
+	check_species_confirm(term, prefs)
+	check_kit(term, prefs)
+
+	// Action spam: the 21st act in one second is dropped.
+	term.char_act_count = 0
+	term.char_act_window = world.time
+	for(var/i in 1 to 20)
+		term.char_act("char_turn", list("dir" = SOUTH), null)
+	TEST_ASSERT(!term.char_act("char_turn", list("dir" = SOUTH), null), "action spam not limited")
+	TEST_ASSERT(!term.act("char_turn", list("dir" = 3)), "diagonal facing accepted")
+	TEST_ASSERT(!term.act("char_no_such_action"), "unknown action accepted")
+
+	qdel(term)
+
+/// Points and the positive cap: the client can't push past either.
+/datum/unit_test/lobby_character/proc/check_quirks(datum/lobby_terminal/lobby_char_test/term, datum/preferences/prefs)
+	prefs.all_quirks = list()
+	var/list/all = SSquirks.get_quirks()
+	var/points_enabled = !CONFIG_GET(flag/disable_quirk_points)
+	var/max_positive = CONFIG_GET(number/max_positive_quirks)
+	TEST_ASSERT(!term.act("char_quirk", list("quirk" = "No Such Quirk", "on" = 1)), "unknown quirk accepted")
+
+	if(points_enabled)
+		for(var/quirk_name in all)
+			if(SSquirks.quirk_points[quirk_name] > 0)
+				TEST_ASSERT(!term.act("char_quirk", list("quirk" = quirk_name, "on" = 1)), "positive quirk [quirk_name] taken with no points")
+				TEST_ASSERT(!length(prefs.all_quirks), "quirk list changed by a refused quirk")
+				break
+
+	// Fund with negatives, then take every positive the server allows (by quirk_info key).
+	for(var/quirk_name in all)
+		if(SSquirks.quirk_points[quirk_name] < 0)
+			term.act("char_quirk", list("quirk" = sanitize_css_class_name(quirk_name), "on" = 1))
+	for(var/quirk_name in all)
+		if(SSquirks.quirk_points[quirk_name] > 0)
+			term.act("char_quirk", list("quirk" = sanitize_css_class_name(quirk_name), "on" = 1))
+	TEST_ASSERT(SSquirks.filter_invalid_quirks(prefs.all_quirks) == prefs.all_quirks, "terminal built an invalid quirk set: [jointext(prefs.all_quirks, ", ")]")
+	if(max_positive >= 0)
+		TEST_ASSERT(prefs.GetPositiveQuirkCount() <= max_positive, "over the positive quirk cap")
+	if(points_enabled)
+		TEST_ASSERT(prefs.GetQuirkBalance() >= 0, "quirk points negative")
+	prefs.all_quirks = list()
+
+/// A species that blocks a quirk: can't take it there, and switching to it asks first.
+/datum/unit_test/lobby_character/proc/check_species_confirm(datum/lobby_terminal/lobby_char_test/term, datum/preferences/prefs)
+	var/datum/preference/choiced/species/species_pref = GLOB.preference_entries[/datum/preference/choiced/species]
+	var/blocking_id
+	var/blocked_quirk
+	for(var/datum/species/species_type as anything in species_pref.get_choices())
+		if(species_type == /datum/species/human)
+			continue
+		var/species_id = initial(species_type.id)
+		for(var/quirk_name in SSquirks.get_quirks())
+			if(SSquirks.quirk_points[quirk_name] > 0)
+				continue
+			var/datum/quirk/prototype = SSquirks.quirk_prototypes[SSquirks.quirks[quirk_name]]
+			if(!prototype || prototype.is_species_appropriate(species_type) || !prototype.is_species_appropriate(/datum/species/human))
+				continue
+			blocking_id = species_id
+			blocked_quirk = quirk_name
+			break
+		if(blocking_id)
+			break
+	if(!blocking_id)
+		TEST_NOTICE(src, "No selectable species blocks a free quirk; species confirm not exercised.")
+		return
+
+	prefs.all_quirks = list()
+	TEST_ASSERT(term.act("char_set", list("key" = "species", "value" = blocking_id)), "species [blocking_id] refused")
+	TEST_ASSERT(!term.act("char_quirk", list("quirk" = blocked_quirk, "on" = 1)), "species-blocked quirk [blocked_quirk] taken")
+	TEST_ASSERT(term.act("char_set", list("key" = "species", "value" = SPECIES_HUMAN)), "back to human refused")
+	TEST_ASSERT(term.act("char_quirk", list("quirk" = blocked_quirk, "on" = 1)), "[blocked_quirk] refused for a human")
+
+	// Without confirm (and a client-sent confirm=1 changes nothing): asks, doesn't change.
+	TEST_ASSERT(term.act("char_set", list("key" = "species", "value" = blocking_id, "confirm" = 1)), "species change not handled")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/choiced/species), /datum/species/human, "species changed without confirm")
+	TEST_ASSERT(term.char_confirm_state, "no confirm asked")
+	TEST_ASSERT(blocked_quirk in term.char_confirm_state["quirks"], "confirm does not name [blocked_quirk]")
+	// Cancel.
+	TEST_ASSERT(term.act("char_confirm", list("ok" = 0)), "cancel not handled")
+	TEST_ASSERT(isnull(term.char_confirm_state), "cancel kept the confirm")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/choiced/species), /datum/species/human, "cancel changed the species")
+	// Another edit clears a pending confirm.
+	term.act("char_set", list("key" = "species", "value" = blocking_id))
+	term.act("char_set", list("key" = "age", "value" = 32))
+	TEST_ASSERT(!term.act("char_confirm", list("ok" = 1)), "stale confirm applied")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/choiced/species), /datum/species/human, "stale confirm changed the species")
+	// Change.
+	term.act("char_set", list("key" = "species", "value" = blocking_id))
+	TEST_ASSERT(term.act("char_confirm", list("ok" = 1)), "change not handled")
+	TEST_ASSERT_EQUAL(prefs.read_preference(/datum/preference/choiced/species), GLOB.species_list[blocking_id], "confirmed species not set")
+	TEST_ASSERT(!(blocked_quirk in prefs.all_quirks), "blocked quirk kept after the change")
+
+	prefs.all_quirks = list()
+	term.act("char_set", list("key" = "species", "value" = SPECIES_HUMAN))
+
+/// Loadout: only real loadout items, colour slots in range, names escaped and capped.
+/datum/unit_test/lobby_character/proc/check_kit(datum/lobby_terminal/lobby_char_test/term, datum/preferences/prefs)
+	TEST_ASSERT(!term.act("char_kit", list("path" = "/obj/item/gun/energy/pulse", "on" = 1)), "non-loadout item packed")
+	TEST_ASSERT(!term.act("char_kit", list("path" = "/datum/loadout_item", "on" = 1)), "datum path packed")
+	TEST_ASSERT(!term.act("char_kit", list("path" = "nonsense", "on" = 1)), "nonsense path packed")
+	TEST_ASSERT(!length(prefs.read_preference(/datum/preference/loadout)), "a refused item reached the loadout")
+
+	var/datum/loadout_item/grey_item
+	var/datum/loadout_item/named_item
+	for(var/path in GLOB.all_loadout_datums)
+		var/datum/loadout_item/item = GLOB.all_loadout_datums[path]
+		if(!grey_item && lobby_char_kit_color_count(item))
+			grey_item = item
+		if(!named_item && item.can_be_named)
+			named_item = item
+
+	if(grey_item)
+		var/path = "[grey_item.item_path]"
+		var/count = lobby_char_kit_color_count(grey_item)
+		TEST_ASSERT(term.act("char_kit", list("path" = path, "on" = 1)), "loadout item [path] refused")
+		TEST_ASSERT(!term.act("char_kit_color", list("path" = path, "slot" = count, "color" = "#123456")), "colour slot past the end accepted")
+		TEST_ASSERT(!term.act("char_kit_color", list("path" = path, "slot" = -1, "color" = "#123456")), "negative colour slot accepted")
+		TEST_ASSERT(!term.act("char_kit_color", list("path" = path, "slot" = 0, "color" = "red;")), "bad kit colour accepted")
+		TEST_ASSERT(term.act("char_kit_color", list("path" = path, "slot" = 0, "color" = "#123456")), "good kit colour refused")
+		var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+		var/list/colors = SSgreyscale.ParseColorString(loadout[grey_item.item_path][INFO_GREYSCALE])
+		TEST_ASSERT_EQUAL(length(colors), count, "wrong number of kit colours")
+		TEST_ASSERT_EQUAL(colors[1], "#123456", "kit colour not written")
+		TEST_ASSERT(term.act("char_kit", list("path" = path, "on" = 0)), "unpacking refused")
+		TEST_ASSERT(!term.act("char_kit_color", list("path" = path, "slot" = 0, "color" = "#123456")), "colour set on an unpacked item")
+
+	if(named_item)
+		var/path = "[named_item.item_path]"
+		TEST_ASSERT(term.act("char_kit", list("path" = path, "on" = 1)), "nameable item [path] refused")
+		TEST_ASSERT(!term.act("char_kit_name", list("path" = path, "name" = "<script>x</script>")), "markup kit name accepted")
+		TEST_ASSERT(!term.act("char_kit_name", list("path" = path, "name" = repeat_string(MAX_NAME_LEN + 1, "a"))), "kit name over the cap accepted")
+		TEST_ASSERT(term.act("char_kit_name", list("path" = path, "name" = "Lucky & Co")), "plain kit name refused")
+		var/list/loadout = prefs.read_preference(/datum/preference/loadout)
+		TEST_ASSERT_EQUAL(loadout[named_item.item_path][INFO_NAMED], "Lucky &amp; Co", "kit name not stored escaped")
+		TEST_ASSERT(term.act("char_kit_name", list("path" = path, "name" = "")), "clearing the kit name refused")
+		loadout = prefs.read_preference(/datum/preference/loadout)
+		TEST_ASSERT(isnull(loadout[named_item.item_path][INFO_NAMED]), "kit name not cleared")
+		term.act("char_kit", list("path" = path, "on" = 0))

From 2773d877e8eea720e47abd285e70dbe1692a7ca6 Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:54:20 -0800
Subject: [PATCH 3/7] Build the CHARACTER file view, BODY editor and colour
 entry

FILES list with the preview's turn keys and dress label, the PERSONNEL FILE cells, crumbs and section routing. BODY rows follow the server's prefs keys, flow into two columns or pages on short screens, and long lists open a paged picker. Colour entry has hex, H/S/V bars, recent colours and the native picker.
---
 .../interfaces/LobbyTerminal/BodyEditor.tsx   | 693 +++++++++++++++++-
 .../interfaces/LobbyTerminal/CharacterTab.tsx | 554 +++++++++++++-
 .../interfaces/LobbyTerminal/ColorEntry.tsx   | 360 ++++++++-
 .../LobbyTerminal/usePrefsCatalog.ts          | 103 +++
 4 files changed, 1675 insertions(+), 35 deletions(-)

diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
index 2c23af6c0d9..501e67b0012 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
@@ -1,15 +1,694 @@
 /**
  * BODY (CHARACTER-PLAN 2.3/2.4): data-driven rows from CharData.prefs in BODY_KEYS order, char_set, the species confirm line, ColorEntry for free colours.
- * Owner: C3. Stub from the C0 seam; the props are fixed.
+ * Owner: C3. The props are fixed.
+ *
+ * A row shows only when the server sent its key (its accessibility rules pick the rows);
+ * species feature keys are also checked against the species' enabled_features in the
+ * catalog. Rows flow down one column, into a second when the box is too short, and onto
+ * pages when even that is not enough. Choice lists longer than PICK_OVER open a paged list
+ * when their value is clicked.
  */
-import { Put } from './term';
-import type { CellBox } from './types';
+import { type ReactNode, useEffect, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+
+import { ColorEntry, parseHex } from './ColorEntry';
+import { Btn, Cycler, Field, Panel, Put, pad, Swatch, wrap } from './term';
+import {
+  AGE_MAX,
+  AGE_MIN,
+  BODY_KEYS,
+  type CellBox,
+  type LobbyData,
+  NAME_MAX,
+  NATIVE_COLOR_KEYS,
+} from './types';
+import {
+  choicesOf,
+  namedHex,
+  nameOf,
+  stepChoice,
+  usePrefsCatalog,
+} from './usePrefsCatalog';
+
+const LABELS: Record<string, string> = {
+  real_name: 'NAME',
+  age: 'AGE',
+  species: 'SPECIES',
+  body_type: 'BODY',
+  gender: 'PRONOUNS',
+  background: 'BACKGROUND',
+  skin_tone: 'SKIN',
+  hairstyle_name: 'HAIR',
+  hair_color: 'HAIR',
+  hair_gradient: 'GRADIENT',
+  hair_gradient_color: 'GRADIENT',
+  facial_style_name: 'FACIAL HAIR',
+  facial_hair_color: 'FACIAL HAIR',
+  feature_mcolor: 'SCALES',
+  feature_ethcolor: 'GLOW',
+  eye_color: 'EYES',
+  voice_pack: 'VOICE',
+  backpack: 'BAG',
+  jumpsuit_style: 'UNIFORM',
+  underwear: 'UNDERWEAR',
+  undershirt: 'UNDERSHIRT',
+  socks: 'SOCKS',
+  feature_human_ears: 'EARS',
+  feature_human_tail: 'TAIL',
+  feature_lizard_snout: 'SNOUT',
+  feature_lizard_horns: 'HORNS',
+  feature_lizard_frills: 'FRILLS',
+  feature_lizard_spines: 'SPINES',
+  feature_lizard_body_markings: 'MARKINGS',
+  feature_lizard_legs: 'LEGS',
+  feature_lizard_tail: 'TAIL',
+  feature_moth_wings: 'WINGS',
+  feature_moth_antennae: 'ANTENNAE',
+  feature_moth_markings: 'MARKINGS',
+};
+
+/** Species feature rows, in this order after SCALES; unknown ones follow, by key. */
+const FEATURE_ORDER = [
+  'feature_human_ears',
+  'feature_human_tail',
+  'feature_lizard_snout',
+  'feature_lizard_horns',
+  'feature_lizard_frills',
+  'feature_lizard_spines',
+  'feature_lizard_body_markings',
+  'feature_lizard_legs',
+  'feature_lizard_tail',
+  'feature_moth_wings',
+  'feature_moth_antennae',
+  'feature_moth_markings',
+];
+
+/** Colours drawn on their style's row. */
+const PAIRED: Record<string, string> = {
+  hairstyle_name: 'hair_color',
+  hair_gradient: 'hair_gradient_color',
+  facial_style_name: 'facial_hair_color',
+  underwear: 'underwear_color',
+};
+
+/** Named lists that show a swatch per choice. */
+const PALETTES = new Set(['skin_tone', 'feature_ethcolor']);
+
+/** Lists longer than this open the paged list when the value is clicked. */
+const PICK_OVER = 12;
+/** Label column width. */
+const LW = 12;
+
+const labelOf = (key: string) =>
+  LABELS[key] ||
+  key
+    .replace(/^feature_/, '')
+    .replace(/_/g, ' ')
+    .toUpperCase();
+
+type Row = {
+  key: string;
+  h: number;
+  draw: (L: number, V: number, y: number, end: number) => ReactNode;
+};
 
 export function BodyEditor(props: CellBox) {
-  const { x, y } = props;
+  const { x, y, w, h } = props;
+  const { act, data } = useBackend<LobbyData>();
+  const cat = usePrefsCatalog();
+  const char = data.char;
+  const prefs = char?.prefs || {};
+  const [name, setName] = useState(String(prefs.real_name ?? ''));
+  const [page, setPage] = useState(0);
+  const [picker, setPicker] = useState<string | null>(null);
+
+  useEffect(() => {
+    setName(String(prefs.real_name ?? ''));
+  }, [prefs.real_name, char?.slot]);
+
+  if (!char) {
+    return null;
+  }
+
+  const set = (key: string, value: unknown) => act('char_set', { key, value });
+  const commitName = () => {
+    const next = name.trim();
+    if (next && next !== prefs.real_name) {
+      set('real_name', next);
+    } else {
+      setName(String(prefs.real_name ?? ''));
+    }
+  };
+
+  const species = String(prefs.species ?? '');
+  const enabled = cat?.species?.[species]?.enabled_features;
+  const shown = (k: string) =>
+    k in prefs &&
+    (!k.startsWith('feature_') ||
+      !Array.isArray(enabled) ||
+      enabled.includes(k));
+  const isColour = (k: string) =>
+    !choicesOf(cat, k) && !!parseHex(String(prefs[k] ?? ''));
+
+  // Every colour on this file, offered in the colour panel's recent row.
+  const fileColours = [
+    ...Object.values(prefs),
+    ...Object.values(char.kit || {}).flatMap((it) =>
+      String(it.greyscale || '').split('#'),
+    ),
+  ]
+    .map((c) => parseHex(String(c)))
+    .filter((c): c is string => !!c);
+
+  const colour = (key: string, cx: number, cy: number, end: number) => (
+    <ColorEntry
+      key={`${key}-c`}
+      x={cx}
+      y={cy}
+      w={end - cx}
+      label=""
+      value={String(prefs[key] ?? '')}
+      recent={fileColours}
+      native={(NATIVE_COLOR_KEYS as readonly string[]).includes(key)}
+      onSet={(hex) => set(key, hex)}
+      onPicker={() => act('char_color_pick', { key })}
+    />
+  );
+
+  /** Cycler width for a row whose controls start at V and must end by end. */
+  const widthFor = (V: number, end: number, extra: number) =>
+    Math.max(6, Math.min(20, end - V - 4 - extra));
+
+  const choiceRow = (key: string): Row => {
+    const list = choicesOf(cat, key);
+    const value = prefs[key];
+    const pair = PAIRED[key] && shown(PAIRED[key]) ? PAIRED[key] : null;
+    const palette = PALETTES.has(key) && list ? sortPalette(key, list) : null;
+    let shownValue = nameOf(cat, key, value);
+    if (key === 'voice_pack') {
+      // "Group: Name" in the list; the row shows the name.
+      shownValue = shownValue.split(': ').pop() || shownValue;
+    }
+    let prev = () => list && set(key, stepChoice(list, value, -1));
+    let next = () => list && set(key, stepChoice(list, value, 1));
+    if (key === 'body_type') {
+      const fem =
+        value === 'female' || (value !== 'male' && prefs.gender === 'female');
+      shownValue = fem ? 'Feminine' : 'Masculine';
+      prev = () => set(key, fem ? 'male' : 'female');
+      next = prev;
+    }
+    const long = !!list && list.length > PICK_OVER;
+    return {
+      key,
+      // A palette that can't sit beside the cycler gets more rows (heightOf).
+      h: 1,
+      draw: (L, V, ry, end) => {
+        let VW = widthFor(V, end, pair ? 11 : key === 'voice_pack' ? 9 : 0);
+        if (pair && VW < 12) {
+          VW = widthFor(V, end, 3);
+        }
+        const after = V + VW + 5;
+        const out: ReactNode[] = [
+          <Put key={`${key}-l`} x={L} y={ry} cls="dim">
+            {labelOf(key)}
+          </Put>,
+          <Cycler
+            key={`${key}-v`}
+            x={V}
+            y={ry}
+            w={VW}
+            value={shownValue}
+            disabled={!list && key !== 'body_type'}
+            onPrev={prev}
+            onNext={next}
+            onValue={long ? () => setPicker(key) : undefined}
+          />,
+        ];
+        if (pair) {
+          out.push(colour(pair, after, ry, end));
+        }
+        if (key === 'voice_pack' && after + 8 <= end) {
+          out.push(
+            <Btn
+              key="play"
+              x={after}
+              y={ry}
+              label="PLAY"
+              onClick={() => act('char_voice_play')}
+            />,
+          );
+        }
+        if (palette) {
+          out.push(...paletteChips(key, palette, after, ry, end, V));
+        }
+        return out;
+      },
+    };
+  };
+
+  /** Skin tones light to dark; other palettes in the server's order. */
+  const sortPalette = (key: string, list: string[]) => {
+    if (key !== 'skin_tone') {
+      return list;
+    }
+    const luma = (c: string) => {
+      const n = parseInt((namedHex(cat, key, c) || '#000000').slice(1), 16);
+      return 0.3 * (n >> 16) + 0.59 * ((n >> 8) & 255) + 0.11 * (n & 255);
+    };
+    return [...list].sort((a, b) => luma(b) - luma(a));
+  };
+
+  /** Swatches for a named-colour list: beside the cycler when they fit, else one more row. */
+  const paletteChips = (
+    key: string,
+    list: string[],
+    after: number,
+    ry: number,
+    end: number,
+    V: number,
+  ) => {
+    const beside = after + list.length * 2 <= end;
+    const per = Math.max(1, Math.floor((end - V) / 2));
+    return list.map((c, i) => {
+      const hex = namedHex(cat, key, c) || '#000000';
+      const sx = beside ? after + i * 2 : V + (i % per) * 2;
+      const sy = beside ? ry : ry + 1 + Math.floor(i / per);
+      return (
+        <Swatch
+          key={`${key}-${c}`}
+          x={sx}
+          y={sy}
+          hex={hex}
+          sel={c === prefs[key]}
+          onClick={() => set(key, c)}
+        />
+      );
+    });
+  };
+
+  const colourRow = (key: string): Row => ({
+    key,
+    h: 1,
+    draw: (L, V, ry, end) => [
+      <Put key={`${key}-l`} x={L} y={ry} cls="dim">
+        {labelOf(key)}
+      </Put>,
+      colour(key, V, ry, end),
+    ],
+  });
+
+  // ---- the rows, top to bottom
+  const extraFeatures = Object.keys(prefs)
+    .filter(
+      (k) =>
+        k.startsWith('feature_') &&
+        !(BODY_KEYS as readonly string[]).includes(k),
+    )
+    .sort((a, b) => {
+      const ia = FEATURE_ORDER.indexOf(a);
+      const ib = FEATURE_ORDER.indexOf(b);
+      if (ia < 0 && ib < 0) {
+        return a < b ? -1 : 1;
+      }
+      return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib);
+    });
+  const order: string[] = [];
+  for (const k of BODY_KEYS) {
+    if (k === 'real_name') {
+      continue;
+    }
+    if (k === 'voice_pack' && species === 'plasmaman') {
+      order.push('@suit');
+    }
+    order.push(k);
+    if (k === 'feature_mcolor') {
+      order.push(...extraFeatures);
+    }
+  }
+  const pairedShown = new Set(
+    Object.entries(PAIRED)
+      .filter(([style]) => shown(style))
+      .map(([, c]) => c),
+  );
+
+  const rows: Row[] = [];
+  for (const k of order) {
+    if (k === '@suit') {
+      rows.push({
+        key: k,
+        h: 1,
+        draw: (L, V, ry) => [
+          <Put key="suit-l" x={L} y={ry} cls="dim">
+            {'SUIT'}
+          </Put>,
+          <Put key="suit-v" x={V + 2} y={ry} cls="dim">
+            {'ENVIROSUIT'}
+          </Put>,
+        ],
+      });
+      continue;
+    }
+    if (!shown(k) || pairedShown.has(k)) {
+      continue;
+    }
+    if (k === 'age') {
+      const age = Number(prefs.age) || AGE_MIN;
+      rows.push({
+        key: k,
+        h: 1,
+        draw: (L, V, ry) => [
+          <Put key="age-l" x={L} y={ry} cls="dim">
+            {'AGE'}
+          </Put>,
+          <Cycler
+            key="age-v"
+            x={V}
+            y={ry}
+            w={String(age).length}
+            value={String(age)}
+            onPrev={() => age > AGE_MIN && set('age', age - 1)}
+            onNext={() => age < AGE_MAX && set('age', age + 1)}
+          />,
+        ],
+      });
+      continue;
+    }
+    const row = isColour(k) ? colourRow(k) : choiceRow(k);
+    rows.push(row);
+    if (k === 'species' && char.confirm) {
+      rows.push(confirmRow());
+    }
+  }
+
+  function confirmRow(): Row {
+    const c = char!.confirm!;
+    const text = `${nameOf(cat, 'species', c.value)} can't keep: ${c.quirks.join(', ')}`;
+    return {
+      key: '@confirm',
+      h: 0, // set when laid out (depends on the column width)
+      draw: (L, _V, ry, end) => {
+        const lines = wrap(text.toUpperCase(), Math.max(10, end - L));
+        return [
+          ...lines.map((l, i) => (
+            <Put key={`cf${i}`} x={L} y={ry + i} cls="amb">
+              {l}
+            </Put>
+          )),
+          <Btn
+            key="cf-ok"
+            x={L}
+            y={ry + lines.length}
+            label="CHANGE"
+            amber
+            onClick={() => act('char_confirm', { ok: 1 })}
+          />,
+          <Btn
+            key="cf-no"
+            x={L + 12}
+            y={ry + lines.length}
+            label="CANCEL"
+            onClick={() => act('char_confirm', { ok: 0 })}
+          />,
+        ];
+      },
+    };
+  }
+
+  // ---- layout: one column, two, or pages
+  const nameY = y + 1;
+  const flowTop = nameY + (h >= 20 ? 2 : 1);
+  const last = y + h - 2;
+  const L0 = x + 3;
+
+  const heightOf = (r: Row, colEnd: number, L: number, V: number) => {
+    if (r.key === '@confirm') {
+      return (
+        wrap(
+          `${nameOf(cat, 'species', char.confirm?.value)} can't keep: ${char.confirm?.quirks.join(', ')}`,
+          Math.max(10, colEnd - L),
+        ).length + 1
+      );
+    }
+    if (PALETTES.has(r.key)) {
+      const list = choicesOf(cat, r.key);
+      if (list) {
+        const VW = widthFor(V, colEnd, 0);
+        const after = V + VW + 5;
+        if (after + list.length * 2 > colEnd) {
+          const per = Math.max(1, Math.floor((colEnd - V) / 2));
+          return 1 + Math.ceil(list.length / per);
+        }
+      }
+    }
+    return r.h;
+  };
+
+  type Placed = { row: Row; L: number; V: number; y: number; end: number };
+  const layout = (ncol: number, cap: number): Placed[][] => {
+    const colW = Math.floor((w - 2) / ncol);
+    const pages: Placed[][] = [[]];
+    let col = 0;
+    let yy = flowTop;
+    for (const r of rows) {
+      const L = L0 + col * colW;
+      const end = x + (col + 1) * colW - 1;
+      const rh = heightOf(r, end, L, L + LW);
+      if (yy + rh - 1 > flowTop + cap - 1 && yy > flowTop) {
+        col++;
+        yy = flowTop;
+        if (col >= ncol) {
+          col = 0;
+          pages.push([]);
+        }
+      }
+      const L2 = L0 + col * colW;
+      const end2 = x + (col + 1) * colW - 1;
+      pages[pages.length - 1].push({
+        row: r,
+        L: L2,
+        V: L2 + LW,
+        y: yy,
+        end: end2,
+      });
+      yy += rh;
+    }
+    return pages;
+  };
+  const cap = last - flowTop + 1;
+  let pages = layout(1, cap);
+  if (pages.length > 1 && w >= 64) {
+    pages = layout(2, cap);
+  }
+  if (pages.length > 1) {
+    pages = layout(w >= 64 ? 2 : 1, cap - 1);
+  }
+  const pg = Math.min(page, pages.length - 1);
+
+  // ---- NAME, across the top
+  const V0 = L0 + LW;
+  const fw = Math.max(8, Math.min(24, x + w - V0 - 16));
+  const nameRow = (
+    <div onBlur={commitName}>
+      <Put x={L0} y={nameY} cls="dim">
+        {'NAME'}
+      </Put>
+      <Field
+        x={V0}
+        y={nameY}
+        w={fw}
+        value={name}
+        max={NAME_MAX}
+        onChange={setName}
+        onEnter={commitName}
+      />
+      <Btn
+        x={V0 + fw + 3}
+        y={nameY}
+        label="RANDOM"
+        onClick={() => act('char_random_name')}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      {nameRow}
+      {pages[pg].map((p) => (
+        <span key={p.row.key}>{p.row.draw(p.L, p.V, p.y, p.end)}</span>
+      ))}
+      {pages.length > 1 && (
+        <Pager
+          x={x + w - 3}
+          y={last}
+          page={pg}
+          pages={pages.length}
+          onPage={setPage}
+        />
+      )}
+      {!!picker && (
+        <ListPicker
+          box={props}
+          title={labelOf(picker)}
+          list={choicesOf(cat, picker) || []}
+          value={String(prefs[picker] ?? '')}
+          nameOf={(v) => nameOf(cat, picker, v)}
+          onPick={(v) => {
+            setPicker(null);
+            if (v !== prefs[picker]) {
+              set(picker, v);
+            }
+          }}
+          onClose={() => setPicker(null)}
+        />
+      )}
+    </>
+  );
+}
+
+/** ` < ` n/m ` > `, ending just before column x. */
+function Pager(props: {
+  x: number;
+  y: number;
+  page: number;
+  pages: number;
+  onPage: (p: number) => void;
+}) {
+  const { x, y, page, pages, onPage } = props;
+  const label = `${page + 1}/${pages}`;
+  const px = x - 8 - label.length;
+  return (
+    <>
+      {page > 0 ? (
+        <Put x={px} y={y} cls="inv" onClick={() => onPage(page - 1)}>
+          {' < '}
+        </Put>
+      ) : (
+        <Put x={px} y={y} cls="faint">
+          {' < '}
+        </Put>
+      )}
+      <Put x={px + 4} y={y} cls="dim">
+        {label}
+      </Put>
+      {page < pages - 1 ? (
+        <Put
+          x={px + 5 + label.length}
+          y={y}
+          cls="inv"
+          onClick={() => onPage(page + 1)}
+        >
+          {' > '}
+        </Put>
+      ) : (
+        <Put x={px + 5 + label.length} y={y} cls="faint">
+          {' > '}
+        </Put>
+      )}
+    </>
+  );
+}
+
+/**
+ * The long-list picker (hairstyles and the like): a panel over the editor with a FIND field,
+ * the choices in columns, paged, the current one lit. Click picks; Escape or CANCEL closes.
+ */
+function ListPicker(props: {
+  box: CellBox;
+  title: string;
+  list: string[];
+  value: string;
+  nameOf: (v: string) => string;
+  onPick: (v: string) => void;
+  onClose: () => void;
+}) {
+  const { box, title, list, value, nameOf: show, onPick, onClose } = props;
+  const px = box.x + 2;
+  const py = box.y;
+  const pw = Math.max(20, box.w - 4);
+  const ph = Math.max(8, box.h - 1);
+  const colW = Math.min(28, pw - 6);
+  const ncol = Math.max(1, Math.floor((pw - 4) / (colW + 2)));
+  const listTop = py + 4;
+  const listRows = Math.max(1, py + ph - 3 - listTop);
+  const per = listRows * ncol;
+
+  const [find, setFind] = useState('');
+  const [page, setPage] = useState(() =>
+    Math.max(0, Math.floor(list.indexOf(value) / per)),
+  );
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const needle = find.trim().toLowerCase();
+  const shown = needle
+    ? list.filter((v) => show(v).toLowerCase().includes(needle))
+    : list;
+  const pages = Math.max(1, Math.ceil(shown.length / per));
+  const pg = Math.min(page, pages - 1);
+  const slice = shown.slice(pg * per, (pg + 1) * per);
+
   return (
-    <Put x={x + 1} y={y + 1} cls="faint">
-      {'BODY'}
-    </Put>
+    <Panel x={px} y={py} w={pw} h={ph} title={title}>
+      <Put x={px + 3} y={py + 2} cls="dim">
+        {'FIND'}
+      </Put>
+      <Field
+        x={px + 8}
+        y={py + 2}
+        w={Math.min(24, pw - 12)}
+        value={find}
+        max={32}
+        onChange={(v) => {
+          setFind(v);
+          setPage(0);
+        }}
+        onEnter={() => slice.length === 1 && onPick(slice[0])}
+      />
+      {slice.map((v, i) => {
+        const cx = px + 3 + Math.floor(i / listRows) * (colW + 2);
+        const cy = listTop + (i % listRows);
+        const cur = v === value;
+        return (
+          <Put
+            key={v}
+            x={cx}
+            y={cy}
+            cls={cur ? 'inv' : ''}
+            hoverCls="inv"
+            onClick={() => onPick(v)}
+          >
+            {pad(show(v).toUpperCase(), colW)}
+          </Put>
+        );
+      })}
+      {!slice.length && (
+        <Put x={px + 3} y={listTop} cls="faint">
+          {'NO MATCH'}
+        </Put>
+      )}
+      <Pager
+        x={px + pw - 14}
+        y={py + ph - 2}
+        page={pg}
+        pages={pages}
+        onPage={setPage}
+      />
+      <Btn
+        x={px + pw - 2}
+        y={py + ph - 2}
+        label="CANCEL"
+        right
+        onClick={onClose}
+      />
+    </Panel>
   );
 }
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
index 48b3255d386..7fecfb11dd4 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharacterTab.tsx
@@ -1,24 +1,98 @@
 /**
  * CHARACTER tab, layout A "personnel file" (CHARACTER-PLAN 2.2): FILES, the preview, the
  * PERSONNEL FILE cells and the crumbs; one editor sub-screen at a time.
- * Owner: C3. Stub from the C0 seam: sends char_open and draws the empty frame.
+ * Owner: C3.
+ *
+ * Editors get the inside of the frame CharacterTab draws for them: CellBox (x, y = frame top
+ * + 1, w = frame width, h = frame height - 1), as the mockup's editors do. BODY, ROLES and KIT
+ * keep the preview on the left; TRAITS and every narrow screen use the full width.
  */
-import { useEffect, useState } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 import { useBackend } from 'tgui/backend';
 
 import { BodyEditor } from './BodyEditor';
+import { CharPreview } from './CharPreview';
+import { parseHex } from './ColorEntry';
 import { KitEditor } from './KitEditor';
 import { RolesEditor } from './RolesEditor';
 import { TraitsEditor } from './TraitsEditor';
-import { Frame, TOP, useGrid } from './term';
-import type { CellBox, CharSection, LobbyData } from './types';
+import {
+  Frame,
+  Hit,
+  Put,
+  pad,
+  RPut,
+  Rule,
+  Swatch,
+  TOP,
+  useGrid,
+  wrap,
+} from './term';
+import type {
+  CellBox,
+  CharData,
+  CharDir,
+  CharSection,
+  CharStatic,
+  LobbyData,
+} from './types';
+import {
+  kitName,
+  namedHex,
+  nameOf,
+  quirkOf,
+  usePrefsCatalog,
+} from './usePrefsCatalog';
+
+const SECTIONS: [CharSection, string][] = [
+  ['body', 'BODY'],
+  ['roles', 'ROLES'],
+  ['traits', 'TRAITS'],
+  ['kit', 'KIT'],
+];
+const PRIO = ['NEVER', 'LOW', 'MED', 'HIGH'];
+/** Facings in clockwise order: S, W, N, E. */
+const TURN: CharDir[] = [2, 8, 1, 4];
+
+/** A `[ LABEL ]` key, dim at rest, lit on hover (the mockup's key()). */
+function Key(props: {
+  x: number;
+  y: number;
+  label: string;
+  cls?: string;
+  bg?: boolean;
+  onClick: () => void;
+}) {
+  const { x, y, label, cls = 'dim', bg, onClick } = props;
+  return (
+    <Put x={x} y={y} cls={cls} hoverCls="inv" bg={bg} onClick={onClick}>
+      {label}
+    </Put>
+  );
+}
+
+/** The category with the highest level (first in role order on a tie), or null. */
+function topRole(char: CharData, stat?: CharStatic) {
+  let best: string | null = null;
+  let lvl = 0;
+  const order = stat?.roles.map((r) => r[0]) || Object.keys(char.roles);
+  for (const cat of order) {
+    const v = char.roles[cat] || 0;
+    if (v > lvl) {
+      lvl = v;
+      best = cat;
+    }
+  }
+  return best;
+}
 
-/** home: bumped when CHARACTER is pressed while already open; go back to the file view. */
 export function CharacterTab(props: { home: number }) {
   const { home } = props;
-  const { act } = useBackend<LobbyData>();
-  const { cols, rows } = useGrid();
+  const { act, data } = useBackend<LobbyData>();
+  const { cols, rows, narrow } = useGrid();
+  const cat = usePrefsCatalog();
   const [section, setSection] = useState<CharSection | null>(null);
+  const [dir, setDir] = useState<CharDir>(2);
 
   useEffect(() => {
     act('char_open');
@@ -27,23 +101,465 @@ export function CharacterTab(props: { home: number }) {
     setSection(null);
   }, [home]);
 
+  const char = data.char;
+  const stat = data.char_static;
   const h = rows - 1 - TOP;
-  const box: CellBox = { x: 0, y: TOP + 1, w: cols, h: h - 1 };
-  let editor;
-  if (section === 'body') {
-    editor = <BodyEditor {...box} />;
-  } else if (section === 'roles') {
-    editor = <RolesEditor {...box} />;
-  } else if (section === 'traits') {
-    editor = <TraitsEditor {...box} />;
-  } else if (section === 'kit') {
-    editor = <KitEditor {...box} />;
+  const name = String(char?.prefs.real_name ?? '');
+  const NAME = name.toUpperCase();
+
+  // ---- the preview with its turn keys and dress label
+  const preview = (x: number, y: number, w: number, ph: number) => {
+    const ky = Math.ceil(y + ph) + 1;
+    const turn = (by: number) => {
+      const i = TURN.indexOf(dir);
+      setDir(TURN[(i + by + TURN.length) % TURN.length]);
+    };
+    const out: ReactNode[] = [
+      <CharPreview key="pv" x={x} y={y} w={w} h={ph} dir={dir} />,
+      <Key key="tl" x={x} y={ky} label="[ < ]" onClick={() => turn(-1)} />,
+      <Key
+        key="tr"
+        x={x + w - 5}
+        y={ky}
+        label="[ > ]"
+        onClick={() => turn(1)}
+      />,
+    ];
+    if (char?.dress) {
+      const dress = char.dress.toUpperCase();
+      const off = char.dress !== (topRole(char, stat) ?? char.dress);
+      const cats = (stat?.roles.map((r) => r[0]) || []).filter(
+        (c) => c !== 'Silicon',
+      );
+      // Past the last category the preview goes back to automatic (the top role).
+      const at = cats.indexOf(char.dress);
+      const next = !cats.length
+        ? null
+        : at === cats.length - 1
+          ? ''
+          : cats[at + 1];
+      const lab = pad(dress, Math.max(1, w - 12)).trimEnd();
+      out.push(
+        <Put
+          key="dress"
+          x={x + Math.floor((w - lab.length) / 2)}
+          y={ky}
+          cls={off ? 'amb' : ''}
+          hoverCls={next !== null ? 'inv' : undefined}
+          onClick={
+            next !== null
+              ? () => act('char_dress', { category: next })
+              : undefined
+          }
+        >
+          {lab}
+        </Put>,
+      );
+    }
+    return out;
+  };
+
+  // ---- crumbs and [ BACK ] on the tab row
+  const crumbs = (label: string) => {
+    const seg: [string, (() => void) | null][] = [
+      ['CHARACTER', () => setSection(null)],
+      [NAME || 'FILE', () => setSection(null)],
+      [label, null],
+    ];
+    const room = cols - 1 - 42 - 12;
+    const width = () => seg.map((s) => s[0]).join(' / ').length;
+    while (seg.length > 1 && width() > room) {
+      seg.shift();
+    }
+    const fits = width() <= room;
+    let x = cols - 1 - (fits ? width() : 0);
+    const out: ReactNode[] = [
+      <Key
+        key="back"
+        x={x - 12}
+        y={2}
+        label="[ BACK ]"
+        onClick={() => setSection(null)}
+      />,
+    ];
+    if (fits) {
+      seg.forEach(([lab, go], i) => {
+        const last = i === seg.length - 1;
+        out.push(
+          <Put
+            key={`c${i}`}
+            x={x}
+            y={2}
+            cls={last ? '' : 'dim'}
+            hoverCls={go && !last ? '' : undefined}
+            onClick={go && !last ? go : undefined}
+          >
+            {lab}
+          </Put>,
+        );
+        x += lab.length;
+        if (!last) {
+          out.push(
+            <Put key={`s${i}`} x={x} y={2} cls="faint">
+              {' / '}
+            </Put>,
+          );
+          x += 3;
+        }
+      });
+    }
+    return out;
+  };
+
+  // ---- a section open
+  if (section && char) {
+    const label = SECTIONS.find((s) => s[0] === section)![1];
+    const full = section === 'traits' || narrow;
+    const pw = full ? 0 : Math.min(40, Math.floor(cols * 0.3));
+    const ex = full ? 0 : pw + 1;
+    const ew = cols - ex;
+    const box: CellBox = { x: ex, y: TOP + 1, w: ew, h: h - 1 };
+    let editor: ReactNode = null;
+    if (section === 'body') {
+      editor = <BodyEditor {...box} />;
+    } else if (section === 'roles') {
+      editor = <RolesEditor {...box} />;
+    } else if (section === 'traits') {
+      editor = <TraitsEditor {...box} />;
+    } else {
+      editor = <KitEditor {...box} />;
+    }
+    return (
+      <>
+        {crumbs(label)}
+        {!full && (
+          <Frame x={0} y={TOP} w={pw} h={h} title={pad(NAME, pw - 6).trimEnd()}>
+            {preview(2, TOP + 1.5, pw - 4, h - 5.5)}
+          </Frame>
+        )}
+        <Frame x={ex} y={TOP} w={ew} h={h} title={label} />
+        {editor}
+      </>
+    );
   }
 
+  // ---- the file
+  const slots = char?.slots || [];
+  const pw = Math.min(40, Math.floor(cols * 0.3));
+  const files = (
+    <Frame x={0} y={TOP} w={pw} h={h} title="FILES">
+      {slots.map((s, i) => {
+        const cur = i + 1 === char?.slot;
+        const shown = cur ? name : s;
+        const yy = TOP + 1 + i;
+        return (
+          <span key={i}>
+            {!!cur && (
+              <Put x={1} y={yy} cls="inv">
+                {' '.repeat(pw - 2)}
+              </Put>
+            )}
+            <Put x={2} y={yy} cls={cur ? 'inv' : 'dim'}>
+              {String(i + 1)}
+            </Put>
+            <Put x={4} y={yy} cls={cur ? 'inv' : shown ? '' : 'faint'}>
+              {pad(shown ? shown.toUpperCase() : '-- EMPTY --', pw - 6)}
+            </Put>
+            {!cur && (
+              <Hit
+                x={1}
+                y={yy}
+                w={pw - 2}
+                h={1}
+                onClick={() => act('char_slot', { slot: i + 1 })}
+              />
+            )}
+          </span>
+        );
+      })}
+    </Frame>
+  );
+  const n = Math.max(3, slots.length);
+  const py = TOP + 2 + n;
+  const ph = h - 6.5 - n;
+
+  const x = pw + 1;
+  const w = cols - x;
+  const gx = x + 2;
+  const gw = Math.floor((w - 5) / 2);
+  const gy = TOP + 4;
+  const gh = Math.floor((h - 5) / 2);
+  const compact = gh < 6;
+  // Tall cells leave a blank row under the title, as the mockup does.
+  const inset = gh >= 9 ? 2 : 1;
+
+  const body = char ? identity(char) : null;
+  const cell = (
+    i: number,
+    title: string,
+    sec: CharSection,
+    fill: (cx: number, cy: number, cw: number, rh: number) => ReactNode,
+  ) => {
+    const cx = gx + (i % 2) * (gw + 1);
+    const cy = gy + Math.floor(i / 2) * gh;
+    return (
+      <span key={sec}>
+        <Frame x={cx} y={cy} w={gw} h={gh} title={title} dim />
+        <Key
+          x={cx + gw - 11}
+          y={cy}
+          label="[ EDIT ]"
+          cls=""
+          bg
+          onClick={() => setSection(sec)}
+        />
+        {fill(cx + 3, cy + inset, gw - 6, gh - 1 - inset)}
+      </span>
+    );
+  };
+
+  function identity(c: CharData) {
+    const p = c.prefs;
+    const voice = nameOf(cat, 'voice_pack', p.voice_pack);
+    const lines: [string, string][] = [
+      ['SPECIES', nameOf(cat, 'species', p.species)],
+      ['AGE', String(p.age ?? '')],
+      ['PRONOUNS', nameOf(cat, 'gender', p.gender)],
+      ['VOICE', voice.includes(': ') ? voice.split(': ').pop()! : voice],
+    ];
+    const chips: [string, string][] = [];
+    const add = (lab: string, hex: string | null) => {
+      if (hex) {
+        chips.push([lab, hex]);
+      }
+    };
+    if ('skin_tone' in p) {
+      add('SKIN', namedHex(cat, 'skin_tone', p.skin_tone));
+    }
+    if ('hairstyle_name' in p && 'hair_color' in p) {
+      add('HAIR', parseHex(p.hair_color));
+    }
+    if ('feature_mcolor' in p) {
+      add('SCALES', parseHex(p.feature_mcolor));
+    }
+    if ('feature_ethcolor' in p) {
+      add('GLOW', namedHex(cat, 'feature_ethcolor', p.feature_ethcolor));
+    }
+    if ('eye_color' in p) {
+      add('EYES', parseHex(p.eye_color));
+    }
+    return { lines, chips };
+  }
+
+  const bodyCell = (cx: number, cy: number, cw: number, rh: number) => {
+    if (!body) {
+      return null;
+    }
+    const out: ReactNode[] = [];
+    body.lines.slice(0, Math.max(0, rh - 1)).forEach(([k, v], i) => {
+      out.push(
+        <Put key={`k${i}`} x={cx} y={cy + i} cls="dim">
+          {k}
+        </Put>,
+        <Put key={`v${i}`} x={cx + 11} y={cy + i}>
+          {pad(v, cw - 11)}
+        </Put>,
+      );
+    });
+    let sx = cx;
+    const sy = cy + Math.min(body.lines.length, Math.max(0, rh - 1));
+    for (const [k, hex] of body.chips) {
+      if (sx + k.length + 3 > cx + cw) {
+        break;
+      }
+      out.push(
+        <Put key={`ck${k}`} x={sx} y={sy} cls="dim">
+          {k}
+        </Put>,
+        <Swatch key={`cs${k}`} x={sx + k.length + 1} y={sy} hex={hex} />,
+      );
+      sx += k.length + 5;
+    }
+    return out;
+  };
+
+  const rolesCell = (cx: number, cy: number, cw: number, rh: number) => {
+    if (!char) {
+      return null;
+    }
+    const order = stat?.roles.map((r) => r[0]) || Object.keys(char.roles);
+    const out: ReactNode[] = [];
+    let yy = cy;
+    for (let lvl = 3; lvl >= 1 && yy < cy + rh; lvl--) {
+      const names = order.filter((r) => char.roles[r] === lvl);
+      if (!names.length) {
+        continue;
+      }
+      out.push(
+        <Put key={`p${lvl}`} x={cx} y={yy} cls={lvl === 3 ? 'amb' : 'dim'}>
+          {PRIO[lvl]}
+        </Put>,
+      );
+      for (const l of wrap(names.join(', '), cw - 7).slice(0, cy + rh - yy)) {
+        out.push(
+          <Put key={`r${yy}`} x={cx + 6} y={yy} cls={lvl === 3 ? 'amb' : ''}>
+            {l}
+          </Put>,
+        );
+        yy++;
+      }
+    }
+    if (yy === cy) {
+      out.push(
+        <Put key="any" x={cx} y={cy} cls="dim">
+          {'ANY BERTH'}
+        </Put>,
+      );
+    }
+    return out;
+  };
+
+  const points = () =>
+    -(char?.quirks || []).reduce(
+      (sum, q) => sum + (quirkOf(cat, q)?.value || 0),
+      0,
+    );
+
+  const traitsCell = (cx: number, cy: number, cw: number, rh: number) => {
+    if (!char) {
+      return null;
+    }
+    const pts = points();
+    const out: ReactNode[] = char.quirks
+      .slice(0, Math.max(0, rh - 2))
+      .map((q, i) => {
+        const info = quirkOf(cat, q);
+        const v = info?.value || 0;
+        return (
+          <span key={q}>
+            <Put x={cx} y={cy + i}>
+              {pad(info?.name || q, cw - 5)}
+            </Put>
+            <RPut x={cx + cw} y={cy + i} cls={v > 0 ? 'amb' : 'dim'}>
+              {String(v)}
+            </RPut>
+          </span>
+        );
+      });
+    if (!char.quirks.length) {
+      out.push(
+        <Put key="none" x={cx} y={cy} cls="faint">
+          {'NONE'}
+        </Put>,
+      );
+    }
+    if (cat?.quirks?.points_enabled !== false) {
+      out.push(
+        <Put key="pl" x={cx} y={cy + rh - 1} cls="dim">
+          {'POINTS'}
+        </Put>,
+        <RPut key="pv" x={cx + cw} y={cy + rh - 1} cls={pts ? 'amb' : ''}>
+          {String(pts)}
+        </RPut>,
+      );
+    }
+    return out;
+  };
+
+  const kitCell = (cx: number, cy: number, cw: number, rh: number) => {
+    const items = Object.keys(char?.kit || {});
+    if (!items.length) {
+      return (
+        <Put x={cx} y={cy} cls="faint">
+          {'NOTHING PACKED'}
+        </Put>
+      );
+    }
+    return items.slice(0, rh).map((p, i) => (
+      <Put key={p} x={cx} y={cy + i}>
+        {pad(kitName(cat, p), cw)}
+      </Put>
+    ));
+  };
+
+  /** One line per section when the cells don't fit (short screens). */
+  const compactList = () => {
+    if (!char) {
+      return null;
+    }
+    const top = topRole(char, stat);
+    const lines: [CharSection, string, string][] = [
+      [
+        'body',
+        'BODY',
+        body
+          ? body.lines
+              .slice(0, 3)
+              .map((l) => l[1])
+              .join(', ')
+          : '',
+      ],
+      ['roles', 'ROLES', top ? `${top}` : 'Any berth'],
+      [
+        'traits',
+        'TRAITS',
+        char.quirks.map((q) => quirkOf(cat, q)?.name || q).join(', ') || 'None',
+      ],
+      [
+        'kit',
+        'KIT',
+        Object.keys(char.kit)
+          .map((p) => kitName(cat, p))
+          .join(', ') || 'Nothing packed',
+      ],
+    ];
+    const step = h - 4 >= 8 ? 2 : 1;
+    return lines.map(([sec, lab, sum], i) => {
+      const yy = TOP + 3 + i * step;
+      return (
+        <span key={sec}>
+          <Put x={x + 3} y={yy} cls="dim">
+            {lab}
+          </Put>
+          <Put x={x + 11} y={yy}>
+            {pad(sum, Math.max(1, w - 25))}
+          </Put>
+          <Key
+            x={x + w - 11}
+            y={yy}
+            label="[ EDIT ]"
+            cls=""
+            onClick={() => setSection(sec)}
+          />
+        </span>
+      );
+    });
+  };
+
   return (
     <>
-      <Frame x={0} y={TOP} w={cols} h={h} title="PERSONNEL FILE" />
-      {editor}
+      {files}
+      <Rule x={1} y={py - 1} w={pw - 2} />
+      {ph >= 3 && preview(2, py, pw - 4, ph)}
+      <Frame x={x} y={TOP} w={w} h={h} title="PERSONNEL FILE" />
+      {!!char && (
+        <>
+          <Put x={x + 3} y={TOP + (compact ? 1 : 2)}>
+            {pad(NAME, Math.max(1, w - 20))}
+          </Put>
+          <RPut x={x + w - 3} y={TOP + (compact ? 1 : 2)} cls="dim">
+            {`FILE ${char.slot} OF ${char.slots.length}`}
+          </RPut>
+          {compact
+            ? compactList()
+            : [
+                cell(0, 'BODY', 'body', bodyCell),
+                cell(1, 'ROLES', 'roles', rolesCell),
+                cell(2, 'TRAITS', 'traits', traitsCell),
+                cell(3, 'KIT', 'kit', kitCell),
+              ]}
+        </>
+      )}
     </>
   );
 }
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
index 266d082c20d..a01439b2d7e 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ColorEntry.tsx
@@ -2,8 +2,19 @@
  * Free colour entry for BODY and KIT (CHARACTER-PLAN 2.9). The row reads
  * `LABEL  [##] #RRGGBB`; clicking the chip or the hex opens the H/S/V panel. Only SET sends.
  * Owner: C3. The props are the contract C4's KitEditor builds against; keep them.
+ *
+ * An empty label draws just the chip and hex (for a colour that sits after a cycler on the
+ * same row, as HAIR does); the panel is then titled COLOUR. The panel places itself under the
+ * row and stays on the screen. Dragging on a bar only changes local state: nothing is sent
+ * until SET, so the server never renders a colour that was dragged past.
  */
-import { Put, Swatch } from './term';
+import {
+  type PointerEvent as ReactPointerEvent,
+  useEffect,
+  useState,
+} from 'react';
+
+import { Btn, Field, lpad, Panel, Put, Swatch, TOP, useGrid } from './term';
 
 export type ColorEntryProps = {
   /** Column and row of the label. */
@@ -24,17 +35,348 @@ export type ColorEntryProps = {
   onPicker?: () => void;
 };
 
+// ---------------------------------------------------------------------------
+// Colour maths
+
+type HSV = { h: number; s: number; v: number };
+
+/** "#rrggbb", "rrggbb", "#rgb" or "rgb" to "#rrggbb" (lower case), else null. */
+export function parseHex(text: string): string | null {
+  let t = String(text ?? '')
+    .trim()
+    .toLowerCase();
+  if (t.startsWith('#')) {
+    t = t.slice(1);
+  }
+  if (/^[0-9a-f]{3}$/.test(t)) {
+    t = t
+      .split('')
+      .map((c) => c + c)
+      .join('');
+  }
+  return /^[0-9a-f]{6}$/.test(t) ? `#${t}` : null;
+}
+
+function hexToHsv(hex: string): HSV {
+  const n = parseInt(hex.slice(1), 16);
+  const r = ((n >> 16) & 255) / 255;
+  const g = ((n >> 8) & 255) / 255;
+  const b = (n & 255) / 255;
+  const max = Math.max(r, g, b);
+  const d = max - Math.min(r, g, b);
+  let h = 0;
+  if (d) {
+    if (max === r) {
+      h = ((g - b) / d) % 6;
+    } else if (max === g) {
+      h = (b - r) / d + 2;
+    } else {
+      h = (r - g) / d + 4;
+    }
+    h *= 60;
+    if (h < 0) {
+      h += 360;
+    }
+  }
+  return { h, s: max ? d / max : 0, v: max };
+}
+
+function hsvToHex({ h, s, v }: HSV): string {
+  const f = (k: number) => {
+    const t = (k + h / 60) % 6;
+    return v - v * s * Math.max(0, Math.min(t, 4 - t, 1));
+  };
+  const c = (x: number) =>
+    Math.round(x * 255)
+      .toString(16)
+      .padStart(2, '0');
+  return `#${c(f(5))}${c(f(3))}${c(f(1))}`;
+}
+
+// ---------------------------------------------------------------------------
+// The viewer's last colours (per viewer, browser storage; the panel works without it)
+
+const STORE = 'lt-recent-colours';
+const KEEP = 8;
+
+function readStored(): string[] {
+  try {
+    const raw = JSON.parse(window.localStorage.getItem(STORE) || '[]');
+    return Array.isArray(raw)
+      ? raw.map((c) => parseHex(String(c))).filter((c): c is string => !!c)
+      : [];
+  } catch {
+    return [];
+  }
+}
+
+function remember(hex: string) {
+  try {
+    const next = [hex, ...readStored().filter((c) => c !== hex)].slice(0, KEEP);
+    window.localStorage.setItem(STORE, JSON.stringify(next));
+  } catch {
+    // Storage blocked: the row just shows the file's colours.
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+const PANEL_W = 44;
+const PANEL_H = 11;
+const BAR = 24;
+const CHANNELS: ['h' | 's' | 'v', string, number][] = [
+  ['h', 'H', 360],
+  ['s', 'S', 100],
+  ['v', 'V', 100],
+];
+
+/** The CSS gradient a bar shows: its channel swept with the other two held. */
+function barGradient(ch: 'h' | 's' | 'v', hsv: HSV): string {
+  const stops: string[] = [];
+  for (let i = 0; i <= 12; i++) {
+    const t = i / 12;
+    const at =
+      ch === 'h'
+        ? { ...hsv, h: t * 359.9 }
+        : ch === 's'
+          ? { ...hsv, s: t }
+          : { ...hsv, v: t };
+    stops.push(hsvToHex(at));
+  }
+  return `linear-gradient(to right, ${stops.join(', ')})`;
+}
+
+/** One H/S/V bar: BAR cells, click or drag to set. */
+function Bar(props: {
+  x: number;
+  y: number;
+  ch: 'h' | 's' | 'v';
+  hsv: HSV;
+  onChange: (t: number) => void;
+}) {
+  const { x, y, ch, hsv, onChange } = props;
+  const { cw, ch: rh } = useGrid();
+  const t = ch === 'h' ? hsv.h / 360 : ch === 's' ? hsv.s : hsv.v;
+  const at = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    onChange(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
+  };
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        boxSizing: 'border-box',
+        left: x * cw,
+        top: y * rh + rh * 0.18,
+        width: BAR * cw,
+        height: rh * 0.64,
+        background: barGradient(ch, hsv),
+        border: '1px solid var(--lt-faint)',
+        boxShadow: 'inset 0 0 0 1px #07130d',
+        cursor: 'pointer',
+        zIndex: 9,
+        touchAction: 'none',
+      }}
+      onPointerDown={(e) => {
+        e.stopPropagation();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        at(e);
+      }}
+      onPointerMove={(e) => {
+        if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+          at(e);
+        }
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          left: `calc(${(t * 100).toFixed(2)}% - 2px)`,
+          top: -3,
+          bottom: -3,
+          width: 3,
+          background: 'var(--lt-ph)',
+          boxShadow: '0 0 0 1px #07130d, 0 0 6px rgba(126,255,191,.8)',
+        }}
+      />
+    </div>
+  );
+}
+
 export function ColorEntry(props: ColorEntryProps) {
-  const { x, y, label, value } = props;
+  const { x, y, w, label, value, recent, native, onSet, onPicker } = props;
+  const { cols, rows } = useGrid();
+  const [open, setOpen] = useState(false);
+  const [hsv, setHsv] = useState<HSV>(() =>
+    hexToHsv(parseHex(value) || '#000000'),
+  );
+  const [text, setText] = useState(String(value ?? ''));
+
+  const current = parseHex(value) || '#000000';
+  const typed = parseHex(text);
+
+  const show = (hex: string) => {
+    setHsv(hexToHsv(hex));
+    setText(hex.toUpperCase());
+  };
+  const openPanel = () => {
+    show(current);
+    setOpen(true);
+  };
+  const set = (hex: string | null) => {
+    if (!hex) {
+      return;
+    }
+    remember(hex);
+    setOpen(false);
+    if (hex !== current) {
+      onSet(hex);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open]);
+
+  const lx = label ? x + label.length + 1 : x;
+  const row = (
+    <>
+      {!!label && (
+        <Put x={x} y={y} cls="dim">
+          {label}
+        </Put>
+      )}
+      <Swatch x={lx} y={y} hex={current} sel={open} onClick={openPanel} />
+      {lx - x + 10 <= w && (
+        <Put x={lx + 3} y={y} hoverCls="inv" onClick={openPanel}>
+          {current.toUpperCase()}
+        </Put>
+      )}
+    </>
+  );
+  if (!open) {
+    return row;
+  }
+
+  // Under the row, kept on the screen.
+  const px = Math.max(0, Math.min(x, cols - PANEL_W - 1));
+  const py =
+    y + 1 + PANEL_H <= rows - 1
+      ? y + 1
+      : Math.max(TOP, Math.min(y - PANEL_H, rows - 1 - PANEL_H));
+  const draft = typed || hsvToHex(hsv);
+  const chips = [...recent.map((c) => parseHex(c)), ...readStored()]
+    .filter((c, i, all): c is string => !!c && all.indexOf(c) === i)
+    .slice(0, Math.floor((PANEL_W - 6) / 2));
+
   return (
     <>
-      <Put x={x} y={y} cls="dim">
-        {label}
-      </Put>
-      <Swatch x={x + label.length + 1} y={y} hex={value} />
-      <Put x={x + label.length + 4} y={y}>
-        {value.toUpperCase()}
-      </Put>
+      {row}
+      <Panel
+        x={px}
+        y={py}
+        w={PANEL_W}
+        h={PANEL_H}
+        title={label ? `${label} COLOUR` : 'COLOUR'}
+      >
+        <Swatch x={px + 3} y={py + 2} hex={draft} w={5} />
+        <Field
+          x={px + 10}
+          y={py + 2}
+          w={8}
+          value={text}
+          max={7}
+          onChange={(v) => {
+            setText(v);
+            const hex = parseHex(v);
+            if (hex) {
+              setHsv(hexToHsv(hex));
+            }
+          }}
+          onEnter={() => set(typed)}
+        />
+        {!typed && (
+          <>
+            <Put x={px + 10} y={py + 2} cls="red" bg>
+              {'['}
+            </Put>
+            <Put x={px + 19} y={py + 2} cls="red" bg>
+              {']'}
+            </Put>
+          </>
+        )}
+        {CHANNELS.map(([ch, name, scale], i) => {
+          const shown = ch === 'h' ? hsv.h : hsv[ch] * 100;
+          return (
+            <span key={ch}>
+              <Put x={px + 3} y={py + 4 + i} cls="dim">
+                {name}
+              </Put>
+              <Bar
+                x={px + 6}
+                y={py + 4 + i}
+                ch={ch}
+                hsv={hsv}
+                onChange={(t) => {
+                  const next = { ...hsv, [ch]: ch === 'h' ? t * 359.9 : t };
+                  setHsv(next);
+                  setText(hsvToHex(next).toUpperCase());
+                }}
+              />
+              <Put x={px + 6 + BAR + 2} y={py + 4 + i}>
+                {lpad(Math.round(Math.min(shown, scale)), 3)}
+              </Put>
+            </span>
+          );
+        })}
+        {chips.map((c, i) => (
+          <Swatch
+            key={c}
+            x={px + 3 + i * 2}
+            y={py + 7.5}
+            hex={c}
+            sel={c === draft}
+            onClick={() => show(c)}
+          />
+        ))}
+        {!!native && !!onPicker && (
+          <Btn
+            x={px + 3}
+            y={py + 9}
+            label="PICKER"
+            onClick={() => {
+              setOpen(false);
+              onPicker();
+            }}
+          />
+        )}
+        <Btn
+          x={px + PANEL_W - 10}
+          y={py + 9}
+          label="CANCEL"
+          right
+          onClick={() => setOpen(false)}
+        />
+        <Btn
+          x={px + PANEL_W - 2}
+          y={py + 9}
+          label="SET"
+          right
+          lit
+          disabled={!typed}
+          onClick={() => set(typed)}
+        />
+      </Panel>
     </>
   );
 }
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
index 5e767209a8a..73f287edf69 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
@@ -46,3 +46,106 @@ export function usePrefsCatalog(): ServerData | null {
   }, []);
   return catalog;
 }
+
+// ---------------------------------------------------------------------------
+// Reading the catalog. Shared by the file view and the BODY editor.
+
+type Choiced = {
+  choices?: string[];
+  display_names?: Record<string, string>;
+  to_hex?: Record<string, { value: string }>;
+};
+
+/** A preference's constant data (choices, display names), or null. */
+function entry(cat: ServerData | null, key: string): Choiced | null {
+  const e = cat?.[key];
+  return e && typeof e === 'object' ? (e as Choiced) : null;
+}
+
+/** The values a choiced preference takes, in the server's order; null when unknown. */
+export function choicesOf(
+  cat: ServerData | null,
+  key: string,
+): string[] | null {
+  if (key === 'species' && cat?.species) {
+    const listed = entry(cat, key)?.choices;
+    return listed?.length ? listed : Object.keys(cat.species);
+  }
+  const list = entry(cat, key)?.choices;
+  return Array.isArray(list) && list.length ? list : null;
+}
+
+/** What the player reads for a value. */
+export function nameOf(cat: ServerData | null, key: string, value: unknown) {
+  const v = String(value ?? '');
+  if (key === 'species') {
+    return cat?.species?.[v]?.name || v;
+  }
+  if (key === 'gender') {
+    return PRONOUNS[v] || v;
+  }
+  return entry(cat, key)?.display_names?.[v] || v;
+}
+
+/** The next or previous choice, wrapping. */
+export function stepChoice(list: string[], value: unknown, by: number) {
+  const i = list.indexOf(String(value));
+  const n = list.length;
+  return list[(((i < 0 ? 0 : i + by) % n) + n) % n];
+}
+
+/** gender values (MALE, FEMALE, PLURAL, NEUTER) as pronouns. */
+export const PRONOUNS: Record<string, string> = {
+  male: 'He/Him',
+  female: 'She/Her',
+  plural: 'They/Them',
+  neuter: 'It/Its',
+};
+
+/** GLOB.color_list_ethereal (code/_globalvars/lists/flavor_misc.dm); the catalog sends icons only. */
+export const ETHEREAL_HEX: Record<string, string> = {
+  Blue: '#3399ff',
+  'Bright Yellow': '#ffff99',
+  'Burnt Orange': '#cc4400',
+  'Cyan Blue': '#00ffff',
+  'Dark Blue': '#6666ff',
+  'Dark Fuschia': '#cc0066',
+  'Dark Green': '#37835b',
+  'Dark Red': '#9c3030',
+  'Dull Yellow': '#fbdf56',
+  'Faint Blue': '#b3d9ff',
+  'Faint Green': '#ddff99',
+  'Faint Red': '#ffb3b3',
+  Green: '#97ee63',
+  Orange: '#ffa64d',
+  Pink: '#ff99cc',
+  Purple: '#ee82ee',
+  Red: '#ff4d4d',
+  'Seafoam Green': '#00fa9a',
+  White: '#f2f2f2',
+};
+
+/** The colour a named-colour preference shows (skin_tone, feature_ethcolor), or null. */
+export function namedHex(cat: ServerData | null, key: string, value: unknown) {
+  const v = String(value ?? '');
+  if (key === 'feature_ethcolor') {
+    return ETHEREAL_HEX[v] || null;
+  }
+  return entry(cat, key)?.to_hex?.[v]?.value || null;
+}
+
+/** Loadout item name by typepath. */
+export function kitName(cat: ServerData | null, path: string) {
+  for (const tab of cat?.loadout?.loadout_tabs || []) {
+    const item = tab.contents.find((it) => it.path === path);
+    if (item) {
+      return item.name;
+    }
+  }
+  return path.split('/').pop() || path;
+}
+
+/** quirk_info entry for a taken quirk key. */
+export function quirkOf(cat: ServerData | null, key: string) {
+  return cat?.quirks?.quirk_info?.[key] || null;
+}

From 4387bad3e97e4d293339f4b87c311288fdc2eb37 Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:54:21 -0800
Subject: [PATCH 4/7] Build the ROLES, TRAITS and KIT editors for the CHARACTER
 tab

---
 .../interfaces/LobbyTerminal/KitEditor.tsx    | 569 ++++++++++++++++-
 .../interfaces/LobbyTerminal/RolesEditor.tsx  | 162 ++++-
 .../interfaces/LobbyTerminal/TraitsEditor.tsx | 589 +++++++++++++++++-
 3 files changed, 1297 insertions(+), 23 deletions(-)

diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
index 53b81d1c0fa..fe4b10fc659 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/KitEditor.tsx
@@ -1,15 +1,568 @@
 /**
- * KIT (CHARACTER-PLAN 2.8): loadout categories and items, char_kit, GAGS colours through ColorEntry (char_kit_color), char_kit_skin, char_kit_name.
- * Owner: C4. Stub from the C0 seam; the props are fixed.
+ * KIT (CHARACTER-PLAN 2.8): tg's loadout categories and items, char_kit. A packed item
+ * shows its options under it: one ColorEntry per GAGS colour slot (char_kit_color), a
+ * STYLE cycler for reskins (char_kit_skin) and a NAME field where tg allows renaming
+ * (char_kit_name). Nothing here has a price. Owner: C4.
+ *
+ * Box: x and w are the editor frame's outer columns, y the row under its top line,
+ * y + h - 1 its bottom line.
  */
-import { Put } from './term';
-import type { CellBox } from './types';
+import { useEffect, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+import type {
+  LoadoutCategory,
+  LoadoutItem,
+} from 'tgui/interfaces/PreferencesMenu/CharacterPreferences/loadout/base';
+
+import { ColorEntry } from './ColorEntry';
+import { fileColors } from './TraitsEditor';
+import {
+  Btn,
+  Cycler,
+  Field,
+  Frame,
+  Hit,
+  Put,
+  pad,
+  Swatch,
+  useGrid,
+} from './term';
+import {
+  type CellBox,
+  type CharKitItem,
+  KIT_NAME_MAX,
+  type LobbyData,
+} from './types';
+import { usePrefsCatalog } from './usePrefsCatalog';
+
+type Kit = Record<string, CharKitItem>;
+
+/** Category column width. */
+const CAT_W = 13;
+/** PACKED box width on wide screens. */
+const PACK_W = 30;
+/** Label column of the option rows under a packed item. */
+const OPT_W = 9;
+/** Names the server takes for a kit item (empty clears). */
+const NAME_OK = /^[\x20-\x7e]*$/;
+const NAME_BAD = /[<>/\\]/;
+/** The category whose items stay at two (tg: /datum/loadout_category/pocket). */
+const TWO_ALLOWED = 'Other';
+
+/** The colours of a packed item, one per slot, "#rrggbb". */
+function slotColors(item: CharKitItem | undefined, slots: number): string[] {
+  const found = (item?.greyscale || '').match(/#[0-9a-f]{6}/gi) || [];
+  const out: string[] = [];
+  for (let i = 0; i < slots; i++) {
+    out.push((found[i] || '#ffffff').toLowerCase());
+  }
+  return out;
+}
+
+/** The server stores names html-escaped; show them as typed. */
+function unescapeName(text: string): string {
+  return text
+    .replace(/&#(\d+);/g, (_, n) => String.fromCharCode(Number(n)))
+    .replace(/&#x([0-9a-f]+);/gi, (_, n) =>
+      String.fromCharCode(parseInt(n, 16)),
+    )
+    .replace(/&quot;/g, '"')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+}
+
+/** One drawn line of the item list. */
+type Line =
+  | { kind: 'group'; text: string }
+  | { kind: 'item'; item: LoadoutItem }
+  | { kind: 'color'; item: LoadoutItem; slot: number; slots: number }
+  | { kind: 'skin'; item: LoadoutItem }
+  | { kind: 'name'; item: LoadoutItem }
+  | { kind: 'gap' };
 
 export function KitEditor(props: CellBox) {
-  const { x, y } = props;
+  const { x, y, w, h } = props;
+  const { act, data } = useBackend<LobbyData>();
+  const { narrow } = useGrid();
+  const catalog = usePrefsCatalog();
+  const char = data.char;
+  const kitColors = data.char_static?.kit_colors || {};
+  const [cat, setCat] = useState(0);
+  const [page, setPage] = useState(1);
+  // Local copy after a click, dropped on the next push (a refused edit pushes too).
+  const [local, setLocal] = useState<Kit | null>(null);
+  useEffect(() => setLocal(null), [char]);
+
+  if (!char || !catalog) {
+    return null;
+  }
+  const tabs: LoadoutCategory[] = catalog.loadout?.loadout_tabs || [];
+  if (!tabs.length) {
+    return null;
+  }
+  const kit: Kit = local || char.kit || {};
+  const ci = Math.min(cat, tabs.length - 1);
+  const tab = tabs[ci];
+  const tabOf = (path: string) =>
+    tabs.findIndex((t) => t.contents.some((it) => it.path === path));
+
+  const toggle = (item: LoadoutItem) => {
+    const on = !(item.path in kit);
+    const next: Kit = { ...kit };
+    if (on) {
+      // Show tg's duplicate rule at once: one per category, two in Other (oldest goes).
+      const same = Object.keys(next).filter(
+        (p) => tab.contents.some((it) => it.path === p) && p !== item.path,
+      );
+      const limit = tab.name === TWO_ALLOWED ? 2 : 1;
+      while (same.length >= limit) {
+        delete next[same.shift() as string];
+      }
+      next[item.path] = {};
+    } else {
+      delete next[item.path];
+    }
+    setLocal(next);
+    act('char_kit', { path: item.path, on: on ? 1 : 0 });
+  };
+
+  const wide = !narrow && w >= 70;
+  const packW = wide ? PACK_W : 0;
+  const ix = x + CAT_W + 3;
+  const iw = w - CAT_W - 5 - packW;
+  const top = y + 1;
+  const bottom = y + h - 3;
+  const catStep = h - 2 >= tabs.length * 2 ? 2 : 1;
+
+  // ---- the item lines of this category ----
+  const multiGroup =
+    new Set(tab.contents.map((it) => it.group || tab.name)).size > 1;
+  // Items grouped as tg's menu groups them, groups in order of first appearance.
+  const groupOrder: string[] = [];
+  for (const it of tab.contents) {
+    const g = it.group || tab.name;
+    if (!groupOrder.includes(g)) {
+      groupOrder.push(g);
+    }
+  }
+  const items = [...tab.contents].sort(
+    (a, b) =>
+      groupOrder.indexOf(a.group || tab.name) -
+      groupOrder.indexOf(b.group || tab.name),
+  );
+  const blocksOf: Line[][] = [];
+  let group: string | null = null;
+  for (const item of items) {
+    const block: Line[] = [];
+    const g = item.group || tab.name;
+    if (multiGroup && g !== group) {
+      block.push({ kind: 'group', text: g });
+    }
+    group = g;
+    block.push({ kind: 'item', item });
+    if (item.path in kit) {
+      const slots = kitColors[item.path] || 0;
+      for (let s = 0; s < slots; s++) {
+        block.push({ kind: 'color', item, slot: s, slots });
+      }
+      if (item.reskins?.length) {
+        block.push({ kind: 'skin', item });
+      }
+      if (item.buttons?.some((b) => b.act_key === 'set_name')) {
+        block.push({ kind: 'name', item });
+      }
+    }
+    blocksOf.push(block);
+  }
+  // Double spacing when the whole category fits that way, as the mockup.
+  const room = bottom - top + 1;
+  const total = blocksOf.reduce((n, b) => n + b.length, 0);
+  const spaced = total + blocksOf.length - 1 <= room;
+  // Pages hold whole items.
+  const pages: Line[][] = [[]];
+  for (const block of blocksOf) {
+    const cur = pages[pages.length - 1];
+    const need = block.length + (spaced && cur.length ? 1 : 0);
+    if (cur.length && cur.length + need > room - 1) {
+      // A page that opens mid-group repeats the group's name.
+      const g = block[0].kind === 'item' && block[0].item.group;
+      const head: Line[] =
+        multiGroup && block[0].kind !== 'group'
+          ? [{ kind: 'group', text: g || tab.name }]
+          : [];
+      pages.push([...head, ...block]);
+    } else {
+      if (spaced && cur.length) {
+        cur.push({ kind: 'gap' });
+      }
+      cur.push(...block);
+    }
+  }
+  const pg = Math.min(pages.length, page);
+  const lines = pages[pg - 1];
+  const recent = fileColors(
+    char.prefs,
+    Object.keys(kit).flatMap((p) => slotColors(kit[p], kitColors[p] || 0)),
+  );
+
+  return (
+    <>
+      {tabs.map((t, i) => {
+        const n = Object.keys(kit).filter((p) =>
+          t.contents.some((it) => it.path === p),
+        ).length;
+        return (
+          <CatRow
+            key={t.name}
+            x={x}
+            y={top + i * catStep}
+            name={t.name}
+            count={n}
+            cur={i === ci}
+            onClick={() => {
+              setCat(i);
+              setPage(1);
+            }}
+          />
+        );
+      })}
+      {lines.map((line, i) => {
+        const ly = top + i;
+        if (line.kind === 'gap') {
+          return null;
+        }
+        if (line.kind === 'group') {
+          return (
+            <Put key={`g${i}`} x={ix} y={ly} cls="faint">
+              {pad(line.text.toUpperCase(), iw)}
+            </Put>
+          );
+        }
+        const item = line.item;
+        if (line.kind === 'item') {
+          return (
+            <ItemRow
+              key={item.path}
+              x={ix}
+              y={ly}
+              w={iw}
+              name={item.name}
+              on={item.path in kit}
+              onClick={() => toggle(item)}
+            />
+          );
+        }
+        if (line.kind === 'color') {
+          const cols = slotColors(kit[item.path], line.slots);
+          return (
+            <ColorEntry
+              key={`${item.path}c${line.slot}`}
+              x={ix + 4}
+              y={ly}
+              w={iw - 4}
+              label={pad(
+                line.slots > 1 ? `COLOUR ${line.slot + 1}` : 'COLOUR',
+                OPT_W,
+              )}
+              value={cols[line.slot]}
+              recent={recent}
+              onSet={(color) =>
+                act('char_kit_color', {
+                  path: item.path,
+                  slot: line.slot,
+                  color,
+                })
+              }
+            />
+          );
+        }
+        if (line.kind === 'skin') {
+          return (
+            <SkinRow
+              key={`${item.path}s`}
+              x={ix + 4}
+              y={ly}
+              w={iw - 4}
+              item={item}
+              current={kit[item.path]?.reskin}
+              onSkin={(skin) => act('char_kit_skin', { path: item.path, skin })}
+            />
+          );
+        }
+        return (
+          <NameRow
+            key={`${item.path}n`}
+            x={ix + 4}
+            y={ly}
+            w={iw - 4}
+            current={unescapeName(kit[item.path]?.name || '')}
+            onName={(name) => act('char_kit_name', { path: item.path, name })}
+          />
+        );
+      })}
+      {pages.length > 1 && (
+        <KitPager
+          x={ix + iw - 11}
+          y={bottom}
+          page={pg}
+          pages={pages.length}
+          onPage={setPage}
+        />
+      )}
+      {!!wide && (
+        <Packed
+          x={x + w - packW - 2}
+          y={y}
+          w={packW}
+          h={h - 2}
+          tabs={tabs}
+          kit={kit}
+          kitColors={kitColors}
+          onJump={(path) => {
+            const t = tabOf(path);
+            if (t >= 0) {
+              setCat(t);
+              setPage(1);
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+function CatRow(props: {
+  x: number;
+  y: number;
+  name: string;
+  count: number;
+  cur: boolean;
+  onClick: () => void;
+}) {
+  const { x, y, name, count, cur, onClick } = props;
+  return (
+    <>
+      {!!cur && (
+        <Put x={x + 1} y={y} cls="inv">
+          {' '.repeat(CAT_W)}
+        </Put>
+      )}
+      <Put x={x + 2} y={y} cls={cur ? 'inv' : 'dim'}>
+        {pad(name.toUpperCase(), CAT_W - 3)}
+      </Put>
+      {count > 0 && (
+        <Put x={x + CAT_W - 1} y={y} cls={cur ? 'inv' : 'amb'}>
+          {String(count)}
+        </Put>
+      )}
+      <Hit x={x + 1} y={y} w={CAT_W} h={1} onClick={onClick} />
+    </>
+  );
+}
+
+function ItemRow(props: {
+  x: number;
+  y: number;
+  w: number;
+  name: string;
+  on: boolean;
+  onClick: () => void;
+}) {
+  const { x, y, w, name, on, onClick } = props;
+  const [hover, setHover] = useState(false);
+  const label = pad(name, Math.max(4, w - 4));
+  return (
+    <>
+      <Put x={x} y={y} cls={hover ? 'inv' : on ? 'amb' : 'dim'}>
+        {on ? '[*]' : '[ ]'}
+      </Put>
+      <Put x={x + 4} y={y} cls={on ? '' : 'dim'}>
+        {label}
+      </Put>
+      <Hit
+        x={x}
+        y={y}
+        w={Math.min(w, label.trimEnd().length + 4)}
+        h={1}
+        onClick={onClick}
+        onHover={setHover}
+      />
+    </>
+  );
+}
+
+function SkinRow(props: {
+  x: number;
+  y: number;
+  w: number;
+  item: LoadoutItem;
+  current?: string;
+  onSkin: (skin: string) => void;
+}) {
+  const { x, y, w, item, current, onSkin } = props;
+  const skins = item.reskins || [];
+  let i = skins.findIndex((s) => s.name === current);
+  if (i < 0) {
+    i = Math.max(
+      0,
+      skins.findIndex((s) => s.skin_icon_state === item.icon_state),
+    );
+  }
+  const step = (d: number) =>
+    onSkin(skins[(i + d + skins.length) % skins.length].name);
+  return (
+    <>
+      <Put x={x} y={y} cls="dim">
+        {'STYLE'}
+      </Put>
+      <Cycler
+        x={x + OPT_W + 1}
+        y={y}
+        w={Math.max(6, Math.min(22, w - OPT_W - 5))}
+        value={skins[i]?.name || ''}
+        onPrev={() => step(-1)}
+        onNext={() => step(1)}
+      />
+    </>
+  );
+}
+
+function NameRow(props: {
+  x: number;
+  y: number;
+  w: number;
+  current: string;
+  onName: (name: string) => void;
+}) {
+  const { x, y, w, current, onName } = props;
+  const [text, setText] = useState(current);
+  useEffect(() => setText(current), [current]);
+  const dirty = text.trim() !== current;
+  // The field takes the row; SET (9 cells) takes its end while there is an edit.
+  const fw = Math.max(8, Math.min(KIT_NAME_MAX, w - 7 - (dirty ? 9 : 0)));
+  // The server refuses markup characters, slashes and anything outside printable ASCII.
+  const ok =
+    text.trim().length <= KIT_NAME_MAX &&
+    NAME_OK.test(text) &&
+    !NAME_BAD.test(text);
+  const send = () => {
+    if (ok) {
+      onName(text.trim());
+    }
+  };
+  return (
+    <>
+      <Put x={x} y={y} cls="dim">
+        {'NAME'}
+      </Put>
+      <Field
+        x={x + 5}
+        y={y}
+        w={fw}
+        value={text}
+        max={KIT_NAME_MAX}
+        onChange={setText}
+        onEnter={send}
+      />
+      {!!dirty && (
+        <Btn x={x + fw + 8} y={y} label="SET" disabled={!ok} onClick={send} />
+      )}
+    </>
+  );
+}
+
+function KitPager(props: {
+  x: number;
+  y: number;
+  page: number;
+  pages: number;
+  onPage: (page: number) => void;
+}) {
+  const { x, y, page, pages, onPage } = props;
+  return (
+    <>
+      {page > 1 ? (
+        <Put x={x} y={y} cls="inv" onClick={() => onPage(page - 1)}>
+          {' < '}
+        </Put>
+      ) : (
+        <Put x={x} y={y} cls="faint">
+          {' < '}
+        </Put>
+      )}
+      <Put x={x + 4} y={y} cls="dim">
+        {`${page}/${pages}`}
+      </Put>
+      {page < pages ? (
+        <Put x={x + 8} y={y} cls="inv" onClick={() => onPage(page + 1)}>
+          {' > '}
+        </Put>
+      ) : (
+        <Put x={x + 8} y={y} cls="faint">
+          {' > '}
+        </Put>
+      )}
+    </>
+  );
+}
+
+function Packed(props: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tabs: LoadoutCategory[];
+  kit: Kit;
+  kitColors: Record<string, number>;
+  onJump: (path: string) => void;
+}) {
+  const { x, y, w, h, tabs, kit, kitColors, onJump } = props;
+  const names: Record<string, string> = {};
+  for (const t of tabs) {
+    for (const it of t.contents) {
+      names[it.path] = it.name;
+    }
+  }
+  const packed = Object.keys(kit).filter((p) => !!names[p]);
+  const max = Math.max(0, h - 3);
+  return (
+    <>
+      <Frame x={x} y={y} w={w} h={h} title="PACKED" dim />
+      {packed.slice(0, max).map((path, i) => {
+        const slots = kitColors[path] || 0;
+        const own = kit[path]?.name;
+        return (
+          <Packline
+            key={path}
+            x={x + 3}
+            y={y + 2 + i}
+            w={w - 8}
+            name={own ? unescapeName(own) : names[path]}
+            color={slots ? slotColors(kit[path], slots)[0] : null}
+            onClick={() => onJump(path)}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function Packline(props: {
+  x: number;
+  y: number;
+  w: number;
+  name: string;
+  color: string | null;
+  onClick: () => void;
+}) {
+  const { x, y, w, name, color, onClick } = props;
   return (
-    <Put x={x + 1} y={y + 1} cls="faint">
-      {'KIT'}
-    </Put>
+    <>
+      <Put x={x} y={y} hoverCls="inv" onClick={onClick}>
+        {pad(name, w)}
+      </Put>
+      {!!color && <Swatch x={x + w + 0} y={y} hex={color} />}
+    </>
   );
 }
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
index bb282b81a00..995131f3d8f 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/RolesEditor.tsx
@@ -1,15 +1,161 @@
 /**
- * ROLES (CHARACTER-PLAN 2.6): nine category rows, NEVER/LOW/MED/HIGH, char_role.
- * Owner: C4. Stub from the C0 seam; the props are fixed.
+ * ROLES (CHARACTER-PLAN 2.6): one row per ship role category, NEVER/LOW/MED/HIGH, char_role.
+ * Owner: C4.
+ *
+ * The box is the editor's frame as CharacterTab draws it: x and w are the frame's outer
+ * columns, y is the row under the frame's top line, y + h - 1 the frame's bottom line.
+ * Only one category may be HIGH; the server demotes the old HIGH to MED (Q3). A click
+ * shows that at once and the next push overwrites it.
  */
-import { Put } from './term';
-import type { CellBox } from './types';
+import { Fragment, useEffect, useState } from 'react';
+import { useBackend } from 'tgui/backend';
 
-export function RolesEditor(props: CellBox) {
+import { Blocks, Hit, Put, pad, useGrid } from './term';
+import type { CellBox, LobbyData, RoleLevel } from './types';
+
+const LEVELS = ['NEVER', 'LOW', 'MED', 'HIGH'] as const;
+/** Cells per level column. */
+const COL = 7;
+
+type Levels = Record<string, RoleLevel>;
+
+/** An empty level cell: a faint outline the size of the lit block. */
+function Slot(props: { x: number; y: number }) {
   const { x, y } = props;
+  const { cw, ch, s } = useGrid();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        boxSizing: 'border-box',
+        left: x * cw,
+        top: y * ch + ch * 0.2,
+        width: 2 * cw - 2,
+        height: ch * 0.6,
+        border: `${Math.max(1, Math.round(s) - 1)}px solid var(--lt-faint)`,
+      }}
+    />
+  );
+}
+
+export function RolesEditor(props: CellBox) {
+  const { x, y, w, h } = props;
+  const { act, data } = useBackend<LobbyData>();
+  const char = data.char;
+  const roles = data.char_static?.roles || [];
+  // Local copy after a click, dropped on the next push (a refused edit pushes too).
+  const [local, setLocal] = useState<Levels | null>(null);
+  useEffect(() => setLocal(null), [char]);
+  if (!char) {
+    return null;
+  }
+  const levels: Levels = local || char.roles || {};
+
+  const set = (category: string, level: 0 | RoleLevel) => {
+    const next: Levels = {};
+    for (const [cat, lv] of Object.entries(levels)) {
+      next[cat] = level === 3 && lv === 3 ? 2 : lv;
+    }
+    if (level) {
+      next[category] = level;
+    } else {
+      delete next[category];
+    }
+    setLocal(next);
+    act('char_role', { category, level });
+  };
+
+  const L = x + 3;
+  const cols = x + w - 3 - 4 * COL;
+  const nameW = 13;
+  const exW = cols - L - nameW - 3;
+  const hy = y + 1;
+  // Double spacing when the rows fit, as the mockup.
+  const step = h - 3 >= roles.length * 2 ? 2 : 1;
+  const first = hy + 1 + (step === 2 ? 1 : 0);
+
+  return (
+    <>
+      {LEVELS.map((label, i) => (
+        <Put
+          key={label}
+          x={cols + i * COL + Math.floor((6 - label.length) / 2)}
+          y={hy}
+          cls="dim"
+        >
+          {label}
+        </Put>
+      ))}
+      {roles.map(([category, examples], ri) => (
+        <RoleRow
+          key={category}
+          x={L}
+          y={first + ri * step}
+          cols={cols}
+          nameW={nameW}
+          exW={exW}
+          category={category}
+          examples={examples}
+          level={levels[category] || 0}
+          onSet={(lv) => set(category, lv)}
+        />
+      ))}
+    </>
+  );
+}
+
+function RoleRow(props: {
+  x: number;
+  y: number;
+  cols: number;
+  nameW: number;
+  exW: number;
+  category: string;
+  examples: string;
+  level: 0 | RoleLevel;
+  onSet: (level: 0 | RoleLevel) => void;
+}) {
+  const { x, y, cols, nameW, exW, category, examples, level, onSet } = props;
   return (
-    <Put x={x + 1} y={y + 1} cls="faint">
-      {'ROLES'}
-    </Put>
+    <>
+      <Put x={x} y={y} cls={level ? '' : 'dim'}>
+        {pad(category.toUpperCase(), nameW)}
+      </Put>
+      {exW >= 12 && !!examples && (
+        <Put x={x + nameW + 1} y={y} cls="faint">
+          {pad(examples, exW)}
+        </Put>
+      )}
+      {LEVELS.map((label, i) => {
+        const cx = cols + i * COL + 2;
+        const on = i === level;
+        return (
+          <Fragment key={label}>
+            {on ? (
+              <Blocks
+                x={cx}
+                y={y}
+                n={2}
+                cls={i === 3 ? 'ablk' : i === 0 ? 'faint' : ''}
+                frac={0.6}
+              />
+            ) : (
+              <Slot x={cx} y={y} />
+            )}
+            <Hit
+              x={cx - 1}
+              y={y}
+              w={4}
+              h={1}
+              onClick={() => {
+                if (!on) {
+                  onSet(i as 0 | RoleLevel);
+                }
+              }}
+            />
+          </Fragment>
+        );
+      })}
+    </>
   );
 }
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
index 35b9631598d..4105189ac7c 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
@@ -1,15 +1,590 @@
 /**
- * TRAITS (CHARACTER-PLAN 2.7): filtered quirk list, description, TAKEN box with POINTS, char_quirk and quirk options through char_set.
- * Owner: C4. Stub from the C0 seam; the props are fixed.
+ * TRAITS (CHARACTER-PLAN 2.7): GOOD/BAD/OTHER quirk list with values, the hovered or selected
+ * quirk's first sentence, the TAKEN box with POINTS and the positive count, char_quirk.
+ * Options of a taken quirk (customization_options) show under its description as ordinary
+ * char_set rows. Owner: C4.
+ *
+ * Box: x and w are the editor frame's outer columns, y the row under its top line,
+ * y + h - 1 its bottom line. Points and caps are worked out here for display only, with
+ * tg's own rules (QuirksPage.tsx); the server decides.
  */
-import { Put } from './term';
-import type { CellBox } from './types';
+import { type ReactNode, useState } from 'react';
+import { useBackend } from 'tgui/backend';
+import type { Quirk } from 'tgui/interfaces/PreferencesMenu/types';
+
+import { ColorEntry } from './ColorEntry';
+import {
+  Cycler,
+  Frame,
+  Hit,
+  lpad,
+  Put,
+  pad,
+  RPut,
+  Rule,
+  useGrid,
+  wrap,
+} from './term';
+import type { CellBox, LobbyData } from './types';
+import { usePrefsCatalog } from './usePrefsCatalog';
+
+type Filter = 'good' | 'bad' | 'other';
+const FILTERS: [Filter, string][] = [
+  ['good', 'GOOD'],
+  ['bad', 'BAD'],
+  ['other', 'OTHER'],
+];
+
+const HEX = /^#?[0-9a-f]{6}$/i;
+
+/** The first sentence of a description. */
+export function firstSentence(text: string): string {
+  const flat = (text || '').replace(/\s+/g, ' ').trim();
+  const m = flat.match(/^(.+?[.!?])(\s|$)/);
+  return m ? m[1] : flat;
+}
+
+/** A savefile key as a row label: "prosthetic_organ" -> "PROSTHETIC ORGAN". */
+function keyLabel(key: string): string {
+  return key.replace(/_/g, ' ').toUpperCase();
+}
+
+/** Every "#rrggbb" already on the file, for the colour entry's recent row. */
+export function fileColors(
+  prefs: Record<string, any>,
+  extra: string[] = [],
+): string[] {
+  const out: string[] = [];
+  const add = (v: unknown) => {
+    if (typeof v !== 'string' || !HEX.test(v)) {
+      return;
+    }
+    const hex = (v[0] === '#' ? v : `#${v}`).toLowerCase();
+    if (!out.includes(hex)) {
+      out.push(hex);
+    }
+  };
+  extra.forEach(add);
+  Object.values(prefs || {}).forEach(add);
+  return out.slice(0, 8);
+}
 
 export function TraitsEditor(props: CellBox) {
-  const { x, y } = props;
+  const { x, y, w, h } = props;
+  const { act, data } = useBackend<LobbyData>();
+  const { narrow } = useGrid();
+  const catalog = usePrefsCatalog();
+  const char = data.char;
+  const [filter, setFilter] = useState<Filter>('good');
+  const [page, setPage] = useState(1);
+  const [sel, setSel] = useState<string | null>(null);
+  const [hover, setHover] = useState<string | null>(null);
+
+  if (!char || !catalog) {
+    return null;
+  }
+  const {
+    quirk_info: info,
+    max_positive_quirks: maxGood,
+    quirk_blacklist: blacklist,
+    points_enabled: pointsOn,
+  } = catalog.quirks;
+
+  const taken = (char.quirks || []).filter((k) => !!info[k]);
+  let balance = 0;
+  let good = 0;
+  for (const k of taken) {
+    balance += info[k].value;
+    if (info[k].value > 0) {
+      good++;
+    }
+  }
+  const points = -balance;
+  const takenNames = taken.map((k) => info[k].name);
+  const blocked = char.quirks_blocked || [];
+
+  const canAdd = (k: string) => {
+    const q = info[k];
+    if (blocked.includes(k) || blocked.includes(q.name)) {
+      return false;
+    }
+    if (q.value > 0) {
+      if (maxGood !== -1 && good >= maxGood) {
+        return false;
+      }
+      if (pointsOn && balance + q.value > 0) {
+        return false;
+      }
+    }
+    for (const group of blacklist || []) {
+      if (!group.includes(q.name)) {
+        continue;
+      }
+      if (group.some((n) => n !== q.name && takenNames.includes(n))) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const canRemove = (k: string) => !(pointsOn && balance - info[k].value > 0);
+
+  const toggle = (k: string) => {
+    const on = !taken.includes(k);
+    if (on ? !canAdd(k) : !canRemove(k)) {
+      return;
+    }
+    act('char_quirk', { quirk: k, on: on ? 1 : 0 });
+  };
+
+  const split = !narrow && w >= 80;
+  const takenW = split ? Math.floor(w * 0.42) : w;
+  const ax = x;
+  const aw = split ? w - takenW : w;
+
+  // ---- TAKEN ----
+  const tx = split ? x + aw : x;
+  const TW = split ? takenW - 2 : w;
+  const takenRows: ReactNode[] = [];
+  let ty = y + (split ? 2 : 1);
+  takenRows.push(
+    <TakenHead
+      key="head"
+      x={tx}
+      y={ty}
+      w={TW}
+      points={pointsOn ? points : null}
+      good={good}
+      maxGood={maxGood}
+    />,
+  );
+  ty += 2;
+  const takenMax = split
+    ? y + h - 4 - ty
+    : Math.max(2, Math.min(taken.length, Math.floor((h - 12) / 2)));
+  const shownTaken = taken.slice(0, Math.max(0, takenMax));
+  for (const k of shownTaken) {
+    const q = info[k];
+    const can = canRemove(k);
+    takenRows.push(
+      <TakenRow
+        key={k}
+        x={tx}
+        y={ty}
+        w={TW}
+        quirk={q}
+        sel={k === sel}
+        canRemove={can}
+        onSelect={() => setSel(k)}
+        onRemove={() => toggle(k)}
+      />,
+    );
+    ty++;
+  }
+  if (taken.length > shownTaken.length) {
+    takenRows.push(
+      <Put key="more" x={tx + 3} y={ty} cls="faint">
+        {`+${taken.length - shownTaken.length}`}
+      </Put>,
+    );
+    ty++;
+  }
+
+  // ---- list ----
+  let yy = split ? y + 1 : ty + 1;
+  const ruleY = yy - 0.5;
+  if (!split) {
+    yy += 1;
+  }
+  const filterY = yy;
+  yy += 2;
+
+  // The quirk whose words show at the bottom: the hovered row, else the selected one.
+  const shown = hover && info[hover] ? hover : sel && info[sel] ? sel : null;
+  const options =
+    sel && taken.includes(sel) && shown === sel
+      ? (info[sel].customization_options || []).filter(
+          (key) => key in (char.prefs || {}),
+        )
+      : [];
+  const descLines = shown
+    ? wrap(firstSentence(info[shown].description), aw - 6).slice(
+        0,
+        options.length ? 1 : 2,
+      )
+    : [];
+  const descH = 3 + options.length;
+
+  const list = Object.keys(info).filter((k) => {
+    const v = info[k].value;
+    return filter === 'good' ? v > 0 : filter === 'bad' ? v < 0 : v === 0;
+  });
+  list.sort((a, b) => {
+    const va = Math.abs(info[a].value);
+    const vb = Math.abs(info[b].value);
+    if (va !== vb) {
+      return vb - va;
+    }
+    return info[a].name < info[b].name ? -1 : 1;
+  });
+  const room = Math.max(3, Math.floor(y + h - 2 - descH - yy));
+  const pages = Math.max(1, Math.ceil(list.length / room));
+  const pg = Math.min(pages, page);
+  const rows = list.slice((pg - 1) * room, pg * room);
+  const py = y + h - 2 - descH;
+  const descY = y + h - 1 - descH;
+  const recent = fileColors(char.prefs);
+
+  return (
+    <>
+      {!!split && <Frame x={tx} y={y} w={TW} h={h - 2} title="TAKEN" dim />}
+      {takenRows}
+      {!split && <Rule x={x + 1} y={ruleY} w={w - 2} />}
+      <FilterKeys
+        x={ax + 3}
+        y={filterY}
+        filter={filter}
+        onFilter={(f) => {
+          setFilter(f);
+          setPage(1);
+          setHover(null);
+        }}
+      />
+      {rows.map((k, i) => {
+        const isTaken = taken.includes(k);
+        return (
+          <QuirkRow
+            key={k}
+            x={ax}
+            y={yy + i}
+            w={aw}
+            quirk={info[k]}
+            taken={isTaken}
+            cant={!isTaken && !canAdd(k)}
+            locked={isTaken && !canRemove(k)}
+            sel={k === sel}
+            onClick={() => {
+              setSel(k);
+              toggle(k);
+            }}
+            onHover={(over) => setHover(over ? k : null)}
+          />
+        );
+      })}
+      {pages > 1 && (
+        <Pager
+          x={ax + aw - 15}
+          y={py}
+          page={pg}
+          pages={pages}
+          onPage={(p) => {
+            setPage(p);
+            setHover(null);
+          }}
+        />
+      )}
+      {descLines.map((line, i) => (
+        <Put key={`d${i}`} x={ax + 3} y={descY + i} cls="dim">
+          {line}
+        </Put>
+      ))}
+      {options.map((key, i) => (
+        <QuirkOption
+          key={key}
+          x={ax + 3}
+          y={descY + descLines.length + i}
+          w={aw - 6}
+          prefKey={key}
+          value={char.prefs[key]}
+          serverData={catalog[key] as any}
+          recent={recent}
+          onSet={(value) => act('char_set', { key, value })}
+        />
+      ))}
+    </>
+  );
+}
+
+function TakenHead(props: {
+  x: number;
+  y: number;
+  w: number;
+  points: number | null;
+  good: number;
+  maxGood: number;
+}) {
+  const { x, y, w, points, good, maxGood } = props;
+  const capped = maxGood !== -1 && good >= maxGood;
+  return (
+    <>
+      {points !== null && (
+        <>
+          <Put x={x + 3} y={y} cls="dim">
+            {'POINTS'}
+          </Put>
+          <Put
+            x={x + 10}
+            y={y}
+            cls={points < 0 ? 'red' : points > 0 ? 'amb' : ''}
+          >
+            {lpad(points, 3)}
+          </Put>
+        </>
+      )}
+      {maxGood !== 0 && (
+        <RPut x={x + w - 3} y={y} cls={capped ? 'amb' : 'dim'}>
+          {maxGood === -1 ? `GOOD ${good}` : `GOOD ${good}/${maxGood}`}
+        </RPut>
+      )}
+    </>
+  );
+}
+
+function TakenRow(props: {
+  x: number;
+  y: number;
+  w: number;
+  quirk: Quirk;
+  sel: boolean;
+  canRemove: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+}) {
+  const { x, y, w, quirk, sel, canRemove, onSelect, onRemove } = props;
+  const v = quirk.value;
+  return (
+    <>
+      <Put
+        x={x + 3}
+        y={y}
+        cls={sel ? 'inv' : ''}
+        hoverCls="inv"
+        onClick={onSelect}
+      >
+        {pad(quirk.name, w - 13)}
+      </Put>
+      <Put x={x + w - 9} y={y} cls={v > 0 ? 'amb' : v < 0 ? 'dim' : 'faint'}>
+        {lpad(v, 3)}
+      </Put>
+      {canRemove ? (
+        <Put x={x + w - 5} y={y} cls="dim" hoverCls="inv" onClick={onRemove}>
+          {'[X]'}
+        </Put>
+      ) : (
+        <Put x={x + w - 5} y={y} cls="faint">
+          {'[X]'}
+        </Put>
+      )}
+    </>
+  );
+}
+
+function FilterKeys(props: {
+  x: number;
+  y: number;
+  filter: Filter;
+  onFilter: (f: Filter) => void;
+}) {
+  const { x, y, filter, onFilter } = props;
+  let fx = x;
+  return (
+    <>
+      {FILTERS.map(([key, label]) => {
+        const at = fx;
+        fx += label.length + 4;
+        return (
+          <Put
+            key={key}
+            x={at}
+            y={y}
+            cls={key === filter ? 'inv' : 'dim'}
+            hoverCls="inv"
+            onClick={() => onFilter(key)}
+          >
+            {` ${label} `}
+          </Put>
+        );
+      })}
+    </>
+  );
+}
+
+function QuirkRow(props: {
+  x: number;
+  y: number;
+  w: number;
+  quirk: Quirk;
+  taken: boolean;
+  /** Can't be taken now: dim, and a click only selects it. */
+  cant: boolean;
+  /** Taken but can't be dropped now. */
+  locked: boolean;
+  sel: boolean;
+  onClick: () => void;
+  onHover: (over: boolean) => void;
+}) {
+  const { x, y, w, quirk, taken, cant, sel, onClick, onHover } = props;
+  const v = quirk.value;
+  const nameCls = sel ? 'inv' : taken ? 'amb' : cant ? 'faint' : '';
+  const valCls = sel ? 'inv' : cant ? 'faint' : v > 0 ? 'amb' : 'dim';
   return (
-    <Put x={x + 1} y={y + 1} cls="faint">
-      {'TRAITS'}
+    <>
+      {!!sel && (
+        <Put x={x + 1} y={y} cls="inv">
+          {' '.repeat(Math.max(0, w - 2))}
+        </Put>
+      )}
+      <Put x={x + 1} y={y} cls={sel ? 'inv' : 'amb'}>
+        {taken ? '*' : ' '}
+      </Put>
+      <Put x={x + 3} y={y} cls={nameCls}>
+        {pad(quirk.name, w - 10)}
+      </Put>
+      <RPut x={x + w - 3} y={y} cls={valCls}>
+        {String(v)}
+      </RPut>
+      <Hit
+        x={x + 1}
+        y={y}
+        w={w - 2}
+        h={1}
+        onClick={onClick}
+        onHover={onHover}
+      />
+    </>
+  );
+}
+
+function Pager(props: {
+  x: number;
+  y: number;
+  page: number;
+  pages: number;
+  onPage: (page: number) => void;
+}) {
+  const { x, y, page, pages, onPage } = props;
+  return (
+    <>
+      {page > 1 ? (
+        <Put x={x} y={y} cls="inv" onClick={() => onPage(page - 1)}>
+          {' < '}
+        </Put>
+      ) : (
+        <Put x={x} y={y} cls="faint">
+          {' < '}
+        </Put>
+      )}
+      <Put x={x + 4} y={y} cls="dim">
+        {`${page}/${pages}`}
+      </Put>
+      {page < pages ? (
+        <Put x={x + 8} y={y} cls="inv" onClick={() => onPage(page + 1)}>
+          {' > '}
+        </Put>
+      ) : (
+        <Put x={x + 8} y={y} cls="faint">
+          {' > '}
+        </Put>
+      )}
+    </>
+  );
+}
+
+type OptionServerData = {
+  choices?: string[];
+  display_names?: Record<string, string>;
+  minimum?: number;
+  maximum?: number;
+  step?: number;
+} | null;
+
+/** One quirk option row: a choice cycler, a number stepper, a yes/no, or a colour. */
+function QuirkOption(props: {
+  x: number;
+  y: number;
+  w: number;
+  prefKey: string;
+  value: any;
+  serverData: OptionServerData;
+  recent: string[];
+  onSet: (value: unknown) => void;
+}) {
+  const { x, y, w, prefKey, value, serverData, recent, onSet } = props;
+  const label = keyLabel(prefKey);
+  const lw = 18;
+  const cw = Math.max(8, Math.min(24, w - lw - 4));
+  const labelRow = (
+    <Put x={x} y={y} cls="dim">
+      {pad(label, lw - 1)}
     </Put>
   );
+  if (serverData?.choices?.length) {
+    const choices = serverData.choices;
+    const i = Math.max(0, choices.indexOf(value));
+    const name = (v: string) => serverData.display_names?.[v] || v;
+    const step = (d: number) =>
+      onSet(choices[(i + d + choices.length) % choices.length]);
+    return (
+      <>
+        {labelRow}
+        <Cycler
+          x={x + lw}
+          y={y}
+          w={cw}
+          value={name(choices[i])}
+          onPrev={() => step(-1)}
+          onNext={() => step(1)}
+        />
+      </>
+    );
+  }
+  if (typeof serverData?.minimum === 'number') {
+    const lo = serverData.minimum;
+    const hi = serverData.maximum ?? lo;
+    const st = serverData.step || 1;
+    const n = Number(value) || 0;
+    return (
+      <>
+        {labelRow}
+        <Cycler
+          x={x + lw}
+          y={y}
+          w={6}
+          value={String(n)}
+          onPrev={() => onSet(Math.max(lo, n - st))}
+          onNext={() => onSet(Math.min(hi, n + st))}
+        />
+      </>
+    );
+  }
+  if (typeof value === 'string' && HEX.test(value)) {
+    const hex = value[0] === '#' ? value : `#${value}`;
+    return (
+      <ColorEntry
+        x={x}
+        y={y}
+        w={w}
+        label={pad(label, lw - 1)}
+        value={hex}
+        recent={recent}
+        onSet={(c) => onSet(c)}
+      />
+    );
+  }
+  if (typeof value === 'number') {
+    const flip = () => onSet(value ? 0 : 1);
+    return (
+      <>
+        {labelRow}
+        <Cycler
+          x={x + lw}
+          y={y}
+          w={4}
+          value={value ? 'YES' : 'NO'}
+          onPrev={flip}
+          onNext={flip}
+        />
+      </>
+    );
+  }
+  return null;
 }

From 2d66d736256f79736c836995795cdc4f5599a62a Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:56:41 -0800
Subject: [PATCH 5/7] Render the dock terminal's character preview on the
 server, one facing at a time

---
 .../interfaces/LobbyTerminal/CharPreview.tsx  | 120 ++++-
 .../lobby_terminal/html/char_floor.png        | Bin 0 -> 222 bytes
 .../modules/lobby_terminal/lobby_assets.dm    |   2 +-
 .../lobby_terminal/lobby_character_preview.dm | 445 ++++++++++++++++++
 4 files changed, 554 insertions(+), 13 deletions(-)
 create mode 100644 voidcrew/modules/lobby_terminal/html/char_floor.png

diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
index c3e536178df..8acfa064f8f 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
@@ -1,26 +1,122 @@
 /**
  * The character preview (CHARACTER-PLAN 2.5 / 3): a viewscreen over cells (x, y, w, h)
- * showing the server's render of the dressed mannequin facing dir. Keeps a client cache of
- * char_preview pushes (key -> dir -> png) and sends char_turn only for a facing it doesn't
- * have for the current look. The turn keys and dress label around it belong to CharacterTab.
- * Owner: C2. Stub from the C0 seam; the props are fixed.
+ * showing the server's render of the dressed mannequin facing dir, on the dark floor tile.
+ * Keeps a client cache of char_preview pushes (key -> dir -> png, last 6 looks) and sends
+ * char_turn only for a facing it doesn't have for the current look. Keeps the last image on
+ * screen while a new one is on its way. The turn keys and dress label around it belong to
+ * CharacterTab. Owner: C2.
  */
+import { type CSSProperties, useEffect, useRef, useState } from 'react';
+import { resolveAsset } from 'tgui/assets';
+import { useBackend } from 'tgui/backend';
+
 import { useGrid } from './term';
-import type { CellBox, CharDir } from './types';
+import type { CellBox, CharDir, LobbyData } from './types';
+
+/** Looks kept client side, as many as the server keeps. */
+const LOOKS = 6;
+/** Mannequin tile, in sprite pixels. */
+const TILE = 32;
+/** An unanswered char_turn may be sent again after this long (ms). */
+const ASK_AGAIN = 3000;
+
+type Look = Partial<Record<CharDir, string>>;
 
 export function CharPreview(props: CellBox & { dir: CharDir }) {
-  const { x, y, w, h } = props;
+  const { x, y, w, h, dir } = props;
   const { cw, ch } = useGrid();
+  const { data, act } = useBackend<LobbyData>();
+  const pushed = data.char_preview;
+
+  // key -> look, oldest first.
+  const cache = useRef(new Map<string, Look>());
+  // "key:dir" -> when char_turn asked for it.
+  const asked = useRef(new Map<string, number>());
+  const [current, setCurrent] = useState<string | null>(null);
+  const [shown, setShown] = useState<string | null>(null);
+  const [size, setSize] = useState<[number, number]>([TILE, TILE]);
+
+  // Every push goes into the cache; its key becomes the current look.
+  useEffect(() => {
+    if (!pushed?.png) {
+      return;
+    }
+    const looks = cache.current;
+    const look = looks.get(pushed.key) || {};
+    look[pushed.dir] = pushed.png;
+    looks.delete(pushed.key);
+    looks.set(pushed.key, look);
+    while (looks.size > LOOKS) {
+      looks.delete(looks.keys().next().value as string);
+    }
+    asked.current.delete(`${pushed.key}:${pushed.dir}`);
+    setCurrent(pushed.key);
+  }, [pushed?.key, pushed?.dir, pushed?.png]);
+
+  // Show the facing if this look has it; otherwise ask once and keep the last image.
+  const png = current ? cache.current.get(current)?.[dir] : undefined;
+  useEffect(() => {
+    if (png) {
+      setShown(png);
+      return;
+    }
+    const ask = `${current || ''}:${dir}`;
+    const at = asked.current.get(ask);
+    if (at === undefined || Date.now() - at > ASK_AGAIN) {
+      asked.current.set(ask, Date.now());
+      act('char_turn', { dir });
+    }
+  }, [current, dir, png]);
+
+  const sx = Math.round(x * cw);
+  const sy = Math.round(y * ch);
+  const sw = Math.round(w * cw);
+  const sh = Math.round(h * ch);
+
+  // Largest whole scale that leaves a margin round the tile, as the mockup draws it.
+  const k = Math.max(1, Math.floor(Math.min(sw * 0.82, sh * 0.86) / TILE));
+  const t = TILE * k;
+  const ox = Math.round((sw - t) / 2);
+  const oy = Math.round((sh - t) / 2) + Math.round(t * 0.08);
+  const [iw, ih] = size;
+
+  const floor: CSSProperties = {
+    position: 'absolute',
+    inset: 0,
+    opacity: 0.38,
+    backgroundImage: `url(${resolveAsset('char_floor.png')})`,
+    backgroundSize: `${t}px ${t}px`,
+    backgroundPosition: `${ox}px ${oy}px`,
+    imageRendering: 'pixelated',
+  };
+
   return (
     <div
       className="lt-vscreen"
-      style={{
-        left: Math.round(x * cw),
-        top: Math.round(y * ch),
-        width: Math.round(w * cw),
-        height: Math.round(h * ch),
-      }}
+      style={{ left: sx, top: sy, width: sw, height: sh }}
     >
+      <div style={floor} />
+      {!!shown && (
+        <img
+          src={`data:image/png;base64,${shown}`}
+          onLoad={(e) =>
+            setSize([
+              e.currentTarget.naturalWidth,
+              e.currentTarget.naturalHeight,
+            ])
+          }
+          style={{
+            position: 'absolute',
+            // A render bigger than one tile stays centred on it, feet on the tile.
+            left: ox - Math.round(((iw - TILE) * k) / 2),
+            top: oy - (ih - TILE) * k,
+            width: iw * k,
+            height: ih * k,
+            imageRendering: 'pixelated',
+            zIndex: 1,
+          }}
+        />
+      )}
       <div className="lt-vscan" />
     </div>
   );
diff --git a/voidcrew/modules/lobby_terminal/html/char_floor.png b/voidcrew/modules/lobby_terminal/html/char_floor.png
new file mode 100644
index 0000000000000000000000000000000000000000..470abc17275a130aec830c147d0a595ec64431ae
GIT binary patch
literal 222
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJrJgR1Ar*7pPBr9WRupjE-#j%l
z$;xm-H_N6*nKO&uI`vIDdP!>=8)tRHTuq%aIg7i8`S<@&TYBX{O5D8}a^)U1Nw*pH
ze4p^E<=_OihA;z(OAHsd`r;bjs<&*2K4ZCf3e(E`WzSa^hUNa=qx>;<t?1vv2z%{E
zrd>5n4A1>AwH>$I9{p$i3-NzNVn5Z6ML%8>HQik0AHVzw+vNw=%y0%en8DN4&t;uc
GLK6T0a$HOR

literal 0
HcmV?d00001

diff --git a/voidcrew/modules/lobby_terminal/lobby_assets.dm b/voidcrew/modules/lobby_terminal/lobby_assets.dm
index 64fb6338b0a..2f59a1735f2 100644
--- a/voidcrew/modules/lobby_terminal/lobby_assets.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_assets.dm
@@ -12,7 +12,7 @@
 	assets = list()
 	if(fexists("interface/fonts/VCR_OSD_Mono.ttf"))
 		assets["VCR_OSD_Mono.ttf"] = "interface/fonts/VCR_OSD_Mono.ttf"
-	var/list/art = list("frame_9slice.png", "strip_top.png", "deck.png", "grille.png", "tray.png", "lamp_ready.png", "lamp_notready.png", "lamp_off.png")
+	var/list/art = list("frame_9slice.png", "strip_top.png", "deck.png", "grille.png", "tray.png", "lamp_ready.png", "lamp_notready.png", "lamp_off.png", "char_floor.png")
 	for(var/key in list("join", "ready", "notready", "observe", "character"))
 		for(var/key_state in list("idle", "hover", "pressed", "disabled"))
 			art += "key_[key]_[key_state].png"
diff --git a/voidcrew/modules/lobby_terminal/lobby_character_preview.dm b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
index 58e9f7234a2..6b8d6580ab1 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
@@ -5,4 +5,449 @@
  * key and pushed as one-off char_preview updates. Overrides char_preview_request() and
  * char_appearance_key() from _lobby_terminal.dm, and owns char_preview_cache, the render
  * queue and its time budget, and the dress table built from the roundstart job pool.
+ *
+ * Flow: char_preview_request(dir) pushes a cached facing at once, or queues one render of
+ * the facing on screen. After LOBBY_CHAR_IDLE_FILL with no new request, the other three
+ * facings are queued at low priority, so turning is instant afterwards. Every finished
+ * facing of the current look is pushed; the client keeps them and turns locally.
+ *
+ * DoS guard: one global queue with one entry per terminal (a new request replaces the old
+ * one, so spam collapses to the latest look), one worker rendering one facing per pass,
+ * at most LOBBY_CHAR_TERMINAL_RENDERS renders a second per terminal and a global budget of
+ * LOBBY_CHAR_BUDGET_MS of render time per second. Renders read only the terminal owner's
+ * own prefs; no action names another player.
+ *
+ * Render: the dummy is dressed and flattened into a /datum/universal_icon tree
+ * (get_flat_uni_icon), then rust-g iconforge composites it off the main thread and the PNG
+ * is read back as base64 and deleted. Measured: about 30 ms of main thread a facing, against
+ * about 65 ms for getFlatIcon(), with the same pixels.
+ *
+ * Memory: nothing goes into the RSC and nothing is registered with SSassets. Each terminal keeps the last LOBBY_CHAR_CACHE_LOOKS looks, four
+ * facings each (about 1-2 KB a facing).
+ *
+ * Compile with -DLOBBY_CHAR_PREVIEW_DEBUG for the timing log and the headless benchmark.
+ */
+
+/// Human dummy slot the preview renders on. Only the worker uses it, so it is never busy.
+#define LOBBY_CHAR_DUMMY "lobby_char"
+/// Looks (appearance keys) cached per terminal, four facings each.
+#define LOBBY_CHAR_CACHE_LOOKS 6
+/// Idle time before the other three facings are rendered.
+#define LOBBY_CHAR_IDLE_FILL (1.5 SECONDS)
+/// Renders a second one terminal may cause.
+#define LOBBY_CHAR_TERMINAL_RENDERS 2
+/// Render time (ms) the worker may spend in any one second, over every terminal.
+#define LOBBY_CHAR_BUDGET_MS 80
+/// A worker that hasn't finished a pass for this long is taken as dead and replaced.
+#define LOBBY_CHAR_WORKER_STALE (10 SECONDS)
+/// Where rust-g writes each render before it is read back as base64 and deleted.
+#define LOBBY_CHAR_FORGE_DIR "data/lobby_char/"
+
+/// Terminals waiting on renders: terminal -> list of dirs, the first rendered first.
+GLOBAL_LIST_EMPTY(lobby_char_render_queue)
+/// Render time spent recently: list(list(world.time, ms), ...), oldest first.
+GLOBAL_LIST_EMPTY(lobby_char_render_spend)
+/// world.time of the worker's last pass; 0 when no worker runs.
+GLOBAL_VAR_INIT(lobby_char_worker_beat, 0)
+/// TRUE while a render holds the dummy. Still TRUE at the next render means the last one runtimed.
+GLOBAL_VAR_INIT(lobby_char_rendering, FALSE)
+/// Job category -> the /datum/job whose outfit the preview wears. Built once per round.
+GLOBAL_LIST(lobby_char_dress_jobs)
+/// Serial for render file names, so two renders never share a file.
+GLOBAL_VAR_INIT(lobby_char_forge_serial, 0)
+
+/datum/lobby_terminal
+	/// Facing the client last asked for.
+	var/char_preview_dir = SOUTH
+	/// TRUE while the queued facing is the one on screen, so it goes before other terminals' idle fills.
+	var/char_preview_urgent = FALSE
+	/// world.time of this terminal's renders in the last second.
+	var/list/char_preview_renders
+	/// Timer for the idle fill of the other facings.
+	var/char_preview_idle_timer
+
+/datum/lobby_terminal/Destroy()
+	GLOB.lobby_char_render_queue -= src
+	if(char_preview_idle_timer)
+		deltimer(char_preview_idle_timer)
+		char_preview_idle_timer = null
+	char_preview_cache = null
+	return ..()
+
+/// dir null means the facing asked for last (callers that only know the look changed).
+/datum/lobby_terminal/char_preview_request(dir)
+	if(isnull(dir))
+		dir = char_preview_dir
+	dir = text2num("[dir]")
+	if(!(dir in GLOB.cardinals))
+		return FALSE
+	char_preview_dir = dir
+	var/key = char_appearance_key()
+	if(!key)
+		return FALSE
+	var/list/look = char_preview_cache?[key]
+	var/png = look?["[dir]"]
+	if(png)
+		char_preview_touch(key)
+		char_preview_send(key, dir, png)
+	else
+		// Replaces any older request from this terminal, idle fill included.
+		GLOB.lobby_char_render_queue -= src
+		GLOB.lobby_char_render_queue[src] = list(dir)
+		char_preview_urgent = TRUE
+		lobby_char_worker_start()
+	char_preview_idle_timer = addtimer(CALLBACK(src, PROC_REF(char_preview_fill)), LOBBY_CHAR_IDLE_FILL, TIMER_UNIQUE|TIMER_OVERRIDE|TIMER_STOPPABLE)
+	return TRUE
+
+/datum/lobby_terminal/char_appearance_key()
+	var/datum/preferences/prefs = owner?.prefs
+	if(!prefs)
+		return null
+	var/static/list/skip_keys = list("age", "background", "pda_ringtone", "pda_theme", "uplink_loc")
+	var/static/list/skip_prefixes = list("random_", "tts_", "bark_", "voice_")
+	var/list/look = list()
+	for(var/preference_type in GLOB.preference_entries)
+		var/datum/preference/preference = GLOB.preference_entries[preference_type]
+		if(preference.savefile_identifier != PREFERENCE_CHARACTER || istype(preference, /datum/preference/name))
+			continue
+		var/savefile_key = preference.savefile_key
+		if(savefile_key in skip_keys)
+			continue
+		var/skipped = FALSE
+		for(var/prefix in skip_prefixes)
+			if(findtext(savefile_key, prefix) == 1)
+				skipped = TRUE
+				break
+		if(skipped)
+			continue
+		look[savefile_key] = prefs.read_preference(preference_type)
+	var/list/quirks = list()
+	for(var/quirk_name in prefs.all_quirks)
+		var/datum/quirk/quirk_type = SSquirks.quirks[quirk_name]
+		if(quirk_type && (initial(quirk_type.quirk_flags) & QUIRK_CHANGES_APPEARANCE))
+			quirks += quirk_name
+	look["#quirks"] = quirks
+	look["#dress"] = char_preview_category()
+	return md5(json_encode(look))
+
+/// The job category the mannequin wears (C1's resolver); Silicon wears Assistant.
+/datum/lobby_terminal/proc/char_preview_category()
+	var/category = char_resolved_dress(owner?.prefs)
+	if(!(category in GLOB.job_categories) || category == JOB_CAT_SILICON)
+		category = JOB_CAT_ASSISTANT
+	return category
+
+/// Queues the facings this look hasn't got yet, behind any facing already waiting.
+/datum/lobby_terminal/proc/char_preview_fill()
+	char_preview_idle_timer = null
+	if(!ui || QDELETED(ui))
+		return
+	var/key = char_appearance_key()
+	if(!key)
+		return
+	var/list/look = char_preview_cache?[key]
+	var/list/wanted = GLOB.lobby_char_render_queue[src] || list()
+	for(var/dir in GLOB.cardinals)
+		if(!look?["[dir]"] && !(dir in wanted))
+			wanted += dir
+	if(!length(wanted))
+		return
+	GLOB.lobby_char_render_queue[src] = wanted
+	lobby_char_worker_start()
+
+/// Moves a look to the newest end of the LRU.
+/datum/lobby_terminal/proc/char_preview_touch(key)
+	var/list/look = char_preview_cache?[key]
+	if(!look)
+		return
+	char_preview_cache -= key
+	char_preview_cache[key] = look
+
+/// Stores one facing, dropping the oldest looks past LOBBY_CHAR_CACHE_LOOKS.
+/datum/lobby_terminal/proc/char_preview_store(key, dir, png)
+	LAZYINITLIST(char_preview_cache)
+	var/list/look = char_preview_cache[key] || list()
+	look["[dir]"] = png
+	char_preview_cache -= key
+	char_preview_cache[key] = look
+	while(length(char_preview_cache) > LOBBY_CHAR_CACHE_LOOKS)
+		char_preview_cache.Cut(1, 2)
+
+/datum/lobby_terminal/proc/char_preview_send(key, dir, png)
+	if(!ui || QDELETED(ui))
+		return
+	ui.send_update(list("char_preview" = list("key" = key, "dir" = dir, "png" = png)))
+
+/// TRUE when this terminal has render quota left this second.
+/datum/lobby_terminal/proc/char_preview_quota()
+	var/cutoff = world.time - 1 SECONDS
+	while(length(char_preview_renders) && char_preview_renders[1] <= cutoff)
+		char_preview_renders.Cut(1, 2)
+	return length(char_preview_renders) < LOBBY_CHAR_TERMINAL_RENDERS
+
+/// Renders one facing of the current look, caches it and pushes it if the look is still current.
+/datum/lobby_terminal/proc/char_preview_render_one(dir)
+	var/key = char_appearance_key()
+	if(!key)
+		return
+	var/list/look = char_preview_cache?[key]
+	if(look?["[dir]"])
+		if(dir == char_preview_dir)
+			char_preview_send(key, dir, look["[dir]"])
+		return
+	LAZYADD(char_preview_renders, world.time)
+	var/list/timing = list()
+	var/png = lobby_char_render(owner.prefs, char_preview_category(), dir, owner, timing)
+	// Main-thread time only; the wait on rust-g is a sleep and costs the server nothing.
+	var/cost = timing["setup"] + timing["flat"] + timing["queue"] + timing["b64"]
+	GLOB.lobby_char_render_spend += list(list(world.time, cost))
+#ifdef LOBBY_CHAR_PREVIEW_DEBUG
+	log_world("LOBBY_CHAR_RENDER [owner?.ckey] dir=[dir] cost=[cost]ms setup=[timing["setup"]] flat=[timing["flat"]] queue=[timing["queue"]] wait=[timing["wait_ticks"]]t b64=[timing["b64"]] bytes=[length(png)]")
+#endif
+	if(!png || QDELETED(src))
+		return
+	char_preview_store(key, dir, png)
+	// The look can change while the dummy is waited on; an old look is cached, never pushed.
+	if(char_appearance_key() == key)
+		char_preview_send(key, dir, png)
+
+/// Render time (ms) spent in the last second, pruning older entries.
+/proc/lobby_char_render_spent()
+	var/cutoff = world.time - 1 SECONDS
+	var/list/spend = GLOB.lobby_char_render_spend
+	while(length(spend))
+		var/list/oldest = spend[1]
+		if(oldest[1] > cutoff)
+			break
+		spend.Cut(1, 2)
+	. = 0
+	for(var/list/entry as anything in spend)
+		. += entry[2]
+
+/// Starts the render worker unless a live one is already running.
+/proc/lobby_char_worker_start()
+	if(GLOB.lobby_char_worker_beat && world.time - GLOB.lobby_char_worker_beat < LOBBY_CHAR_WORKER_STALE)
+		return
+	GLOB.lobby_char_worker_beat = world.time
+	INVOKE_ASYNC(GLOBAL_PROC, GLOBAL_PROC_REF(lobby_char_worker))
+
+/// Renders one queued facing per pass until the queue is empty, inside the budgets.
+/proc/lobby_char_worker()
+	var/list/queue = GLOB.lobby_char_render_queue
+	while(length(queue))
+		GLOB.lobby_char_worker_beat = world.time
+		if(SSatoms.initialized != INITIALIZATION_INNEW_REGULAR || lobby_char_render_spent() >= LOBBY_CHAR_BUDGET_MS)
+			sleep(1)
+			continue
+		// The facing on screen goes first; then round-robin over idle fills.
+		var/datum/lobby_terminal/next
+		for(var/urgent_pass in list(TRUE, FALSE))
+			for(var/datum/lobby_terminal/terminal as anything in queue.Copy())
+				if(QDELETED(terminal) || !terminal.owner?.prefs || !terminal.ui || QDELETED(terminal.ui))
+					queue -= terminal
+					continue
+				if(urgent_pass && !terminal.char_preview_urgent)
+					continue
+				if(terminal.char_preview_quota())
+					next = terminal
+					break
+			if(next)
+				break
+		if(!next)
+			sleep(1)
+			continue
+		var/list/dirs = queue[next]
+		var/dir = dirs[1]
+		dirs.Cut(1, 2)
+		next.char_preview_urgent = FALSE
+		queue -= next
+		if(length(dirs))
+			queue[next] = dirs // to the back of the line
+		next.char_preview_render_one(dir)
+		stoplag()
+	GLOB.lobby_char_worker_beat = 0
+
+/// The job whose outfit a category wears: its most common outfit in the roundstart job pool (C1's lobby_char_job_pool()).
+/proc/lobby_char_dress_job(category)
+	if(isnull(GLOB.lobby_char_dress_jobs))
+		var/list/slots_by_outfit = list() // category -> outfit -> slots
+		var/list/job_by_outfit = list() // "[category]|[outfit]" -> job
+		for(var/datum/job/job as anything in lobby_char_job_pool())
+			var/job_category = job.job_category
+			if(job.ship_role != "crew" || !job_category || job_category == JOB_CAT_SILICON || !ispath(job.outfit, /datum/outfit))
+				continue
+			var/list/by_outfit = slots_by_outfit[job_category]
+			if(!by_outfit)
+				by_outfit = list()
+				slots_by_outfit[job_category] = by_outfit
+			by_outfit[job.outfit] += 1
+			if(!job_by_outfit["[job_category]|[job.outfit]"])
+				job_by_outfit["[job_category]|[job.outfit]"] = job
+		var/list/dress = list()
+		for(var/job_category in slots_by_outfit)
+			var/list/by_outfit = slots_by_outfit[job_category]
+			var/best_outfit
+			for(var/outfit in by_outfit)
+				if(!best_outfit || by_outfit[outfit] > by_outfit[best_outfit])
+					best_outfit = outfit
+			dress[job_category] = job_by_outfit["[job_category]|[best_outfit]"]
+		GLOB.lobby_char_dress_jobs = dress
+	return GLOB.lobby_char_dress_jobs[category] || GLOB.lobby_char_dress_jobs[JOB_CAT_ASSISTANT] || SSjob.get_job_type(/datum/job/unassigned)
+
+/**
+ * Renders prefs' character dressed for category, facing dir, as base64 PNG.
+ * Same steps as render_new_preview_appearance(), but with the job picked by ship role
+ * category (Voidcrew never sets job_preferences). timing, if given, gets setup/flat/b64 ms.
  */
+/proc/lobby_char_render(datum/preferences/prefs, category, dir, client/player, list/timing)
+	if(!prefs)
+		return null
+	var/start = TICK_USAGE_REAL
+	var/mob/living/carbon/human/dummy/mannequin = lobby_char_dress(prefs, category, player)
+	if(timing)
+		timing["setup"] = TICK_USAGE_TO_MS(start)
+	start = TICK_USAGE_REAL
+	var/datum/universal_icon/flat = get_flat_uni_icon(mannequin, dir)
+	if(timing)
+		timing["flat"] = TICK_USAGE_TO_MS(start)
+	unset_busy_human_dummy(LOBBY_CHAR_DUMMY)
+	GLOB.lobby_char_rendering = FALSE
+	// rust-g composites off the main thread; the worker only waits on it.
+	start = TICK_USAGE_REAL
+	if(!fexists(LOBBY_CHAR_FORGE_DIR)) // rust-g won't make the folder
+		text2file("", "[LOBBY_CHAR_FORGE_DIR].keep")
+	var/sheet = "lobby_char_[++GLOB.lobby_char_forge_serial % 16]"
+	var/entries = json_encode(list("c" = flat.to_list()))
+	var/job_id = rustg_iconforge_generate_async(LOBBY_CHAR_FORGE_DIR, sheet, entries, FALSE, FALSE, TRUE)
+	if(timing)
+		timing["queue"] = TICK_USAGE_TO_MS(start)
+	var/waited_from = world.time
+	var/data_out
+	UNTIL((data_out = rustg_iconforge_check(job_id)) != RUSTG_JOB_NO_RESULTS_YET)
+	if(timing)
+		timing["wait_ticks"] = (world.time - waited_from) / world.tick_lag
+	start = TICK_USAGE_REAL
+	if(!findtext(data_out, "{", 1, 2))
+		stack_trace("Lobby character preview render failed: [data_out]")
+		return null
+	var/list/data = json_decode(data_out)
+	var/list/sizes = data["sizes"]
+	if(!length(sizes))
+		stack_trace("Lobby character preview render made no image: [data["error"]]")
+		return null
+	var/png_path = "[LOBBY_CHAR_FORGE_DIR][sheet]_[sizes[1]].png"
+	. = rustg_hash_file(RUSTG_HASH_BASE64, png_path)
+	fdel(png_path)
+	if(!length(.))
+		stack_trace("Lobby character preview render not read back: [data["error"]]")
+		return null
+	if(timing)
+		timing["b64"] = TICK_USAGE_TO_MS(start)
+
+/// Puts the shared dummy in prefs' character, dressed for category. Returns it busy; the caller releases it.
+/proc/lobby_char_dress(datum/preferences/prefs, category, client/player)
+	if(GLOB.lobby_char_rendering) // the last render runtimed while holding the dummy
+		unset_busy_human_dummy(LOBBY_CHAR_DUMMY)
+	var/datum/job/job = lobby_char_dress_job(category)
+	var/mob/living/carbon/human/dummy/mannequin = generate_or_wait_for_human_dummy(LOBBY_CHAR_DUMMY)
+	GLOB.lobby_char_rendering = TRUE
+	prefs.apply_prefs_to(mannequin, TRUE)
+	if(job)
+		mannequin.job = job.title
+		mannequin.dress_up_as_job(job, visual_only = TRUE, player_client = player, consistent = TRUE)
+	if(SSquirks?.initialized)
+		mannequin.cleanse_quirk_datums()
+		for(var/quirk_name in prefs.all_quirks)
+			var/datum/quirk/quirk_type = SSquirks.quirks[quirk_name]
+			if(quirk_type && (initial(quirk_type.quirk_flags) & QUIRK_CHANGES_APPEARANCE))
+				mannequin.add_quirk(quirk_type, player, announce = FALSE)
+	return mannequin
+
+#ifdef LOBBY_CHAR_PREVIEW_DEBUG
+/// The plain DM way (getFlatIcon), kept for the benchmark's comparison only.
+/proc/lobby_char_render_flat(datum/preferences/prefs, category, dir, client/player, list/timing)
+	var/start = TICK_USAGE_REAL
+	var/mob/living/carbon/human/dummy/mannequin = lobby_char_dress(prefs, category, player)
+	timing["setup"] = TICK_USAGE_TO_MS(start)
+	start = TICK_USAGE_REAL
+	var/icon/flat = getFlatIcon(mannequin, dir, no_anim = TRUE)
+	timing["flat"] = TICK_USAGE_TO_MS(start)
+	unset_busy_human_dummy(LOBBY_CHAR_DUMMY)
+	GLOB.lobby_char_rendering = FALSE
+	start = TICK_USAGE_REAL
+	. = icon2base64(flat)
+	timing["b64"] = TICK_USAGE_TO_MS(start)
+
+/datum/controller/subsystem/ticker/Initialize()
+	. = ..()
+	Master.sleep_offline_after_initializations = FALSE
+	delay_end = TRUE
+	INVOKE_ASYNC(GLOBAL_PROC, GLOBAL_PROC_REF(lobby_char_bench))
+
+/// Headless benchmark: renders species x outfits x facings both ways, logs the cost per stage, writes the PNGs as base64 lines, then soaks.
+/proc/lobby_char_bench()
+	UNTIL(SSticker.current_state >= GAME_STATE_PREGAME)
+	SSticker.SetTimeLeft(-1)
+	sleep(5 SECONDS)
+	var/out = "data/lobby_c2_bench/"
+	fdel(out)
+	var/datum/client_interface/mock = new
+	var/datum/preferences/prefs = new(mock)
+	mock.prefs = prefs
+	var/datum/preference/species_pref = GLOB.preference_entries[/datum/preference/choiced/species]
+	var/list/species = list(SPECIES_HUMAN, SPECIES_LIZARD, SPECIES_MOTH, SPECIES_FELINE, SPECIES_PLASMAMAN, SPECIES_ETHEREAL)
+	var/list/categories = list(JOB_CAT_ENGINEERING, JOB_CAT_SECURITY, JOB_CAT_MEDICAL, JOB_CAT_ASSISTANT, JOB_CAT_COMMAND, JOB_CAT_CARGO)
+	for(var/category in categories)
+		var/datum/job/job = lobby_char_dress_job(category)
+		text2file("DRESS [category] = [job?.title] [job?.outfit]", "[out]timing.txt")
+	for(var/way in list("forge", "flat"))
+		var/list/totals = list()
+		var/count = 0
+		for(var/species_id in species)
+			prefs.write_preference(species_pref, species_id)
+			var/first = TRUE
+			for(var/category in categories)
+				for(var/dir in GLOB.cardinals)
+					var/list/timing = list()
+					var/png = way == "forge" ? lobby_char_render(prefs, category, dir, mock, timing) : lobby_char_render_flat(prefs, category, dir, mock, timing)
+					var/line = ""
+					var/cost = 0
+					for(var/stage in timing)
+						line += " [stage]=[timing[stage]]"
+						if(stage != "wait_ticks")
+							cost += timing[stage]
+					text2file("RENDER [way] [species_id] [category] dir=[dir] cost=[cost][line] bytes=[length(png)][first ? " COLD" : ""]", "[out]timing.txt")
+					text2file("[way]_[species_id]_[category]_[dir]|[png]", "[out]pngs.txt")
+					if(!first)
+						timing["cost"] = cost
+						for(var/stage in timing)
+							totals[stage] += timing[stage]
+						count++
+					first = FALSE
+					stoplag()
+		var/mean = "WARM MEAN [way] over [count]:"
+		for(var/stage in totals)
+			mean += " [stage]=[totals[stage] / count]"
+		text2file(mean, "[out]timing.txt")
+	text2file("SOAK READY [world.timeofday]", "[out]timing.txt")
+	sleep(30 SECONDS)
+	text2file("SOAK START [world.timeofday]", "[out]timing.txt")
+	var/soak_ms = 0
+	for(var/i in 1 to 500)
+		prefs.write_preference(species_pref, species[(i % length(species)) + 1])
+		var/list/timing = list()
+		lobby_char_render(prefs, categories[(i % length(categories)) + 1], GLOB.cardinals[(i % 4) + 1], mock, timing)
+		soak_ms += timing["setup"] + timing["flat"] + timing["queue"] + timing["b64"]
+		stoplag()
+	text2file("SOAK END [world.timeofday] mean=[soak_ms / 500]", "[out]timing.txt")
+	sleep(30 SECONDS)
+	text2file("BENCH DONE", "[out]timing.txt")
+#endif
+
+#undef LOBBY_CHAR_DUMMY
+#undef LOBBY_CHAR_CACHE_LOOKS
+#undef LOBBY_CHAR_IDLE_FILL
+#undef LOBBY_CHAR_TERMINAL_RENDERS
+#undef LOBBY_CHAR_BUDGET_MS
+#undef LOBBY_CHAR_WORKER_STALE
+#undef LOBBY_CHAR_FORGE_DIR

From a578821e7e74efacd886e12bb108a25e38e1c070 Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 15:03:00 -0800
Subject: [PATCH 6/7] Add bark pitch and speed rows, default the traits
 selection, tell the server cached preview facings, drop the preview benchmark

---
 .../interfaces/LobbyTerminal/BodyEditor.tsx   | 42 +++++++++
 .../interfaces/LobbyTerminal/CharPreview.tsx  | 30 +++++++
 .../interfaces/LobbyTerminal/TraitsEditor.tsx | 22 ++---
 .../interfaces/LobbyTerminal/types.ts         |  3 +
 .../modules/lobby_terminal/lobby_character.dm |  8 ++
 .../lobby_terminal/lobby_character_preview.dm | 85 -------------------
 6 files changed, 95 insertions(+), 95 deletions(-)

diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
index 501e67b0012..3f7741aab32 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/BodyEditor.tsx
@@ -48,6 +48,8 @@ const LABELS: Record<string, string> = {
   feature_ethcolor: 'GLOW',
   eye_color: 'EYES',
   voice_pack: 'VOICE',
+  bark_speech_pitch: 'PITCH',
+  bark_speech_speed: 'SPEED',
   backpack: 'BAG',
   jumpsuit_style: 'UNIFORM',
   underwear: 'UNDERWEAR',
@@ -94,6 +96,12 @@ const PAIRED: Record<string, string> = {
 /** Named lists that show a swatch per choice. */
 const PALETTES = new Set(['skin_tone', 'feature_ethcolor']);
 
+/** Numeric rows and the amount one click moves them. */
+const NUMERIC_STEPS: Record<string, number> = {
+  bark_speech_pitch: 0.1,
+  bark_speech_speed: 0.5,
+};
+
 /** Lists longer than this open the paged list when the value is clicked. */
 const PICK_OVER = 12;
 /** Label column width. */
@@ -287,6 +295,36 @@ export function BodyEditor(props: CellBox) {
     });
   };
 
+  /** A numeric preference (bark pitch, speed): steps within the catalog's range. */
+  const numberRow = (key: string): Row => {
+    const spec = (cat?.[key] || {}) as { minimum?: number; maximum?: number };
+    const step = NUMERIC_STEPS[key];
+    const lo = spec.minimum ?? 0;
+    const hi = spec.maximum ?? lo + step * 20;
+    const value = Number(prefs[key]) || lo;
+    const to = (v: number) =>
+      set(key, Math.round(Math.min(hi, Math.max(lo, v)) * 100) / 100);
+    const text = value.toFixed(1);
+    return {
+      key,
+      h: 1,
+      draw: (L, V, ry) => [
+        <Put key={`${key}-l`} x={L} y={ry} cls="dim">
+          {labelOf(key)}
+        </Put>,
+        <Cycler
+          key={`${key}-v`}
+          x={V}
+          y={ry}
+          w={text.length}
+          value={text}
+          onPrev={() => value > lo && to(value - step)}
+          onNext={() => value < hi && to(value + step)}
+        />,
+      ],
+    };
+  };
+
   const colourRow = (key: string): Row => ({
     key,
     h: 1,
@@ -374,6 +412,10 @@ export function BodyEditor(props: CellBox) {
       });
       continue;
     }
+    if (k in NUMERIC_STEPS) {
+      rows.push(numberRow(k));
+      continue;
+    }
     const row = isColour(k) ? colourRow(k) : choiceRow(k);
     rows.push(row);
     if (k === 'species' && char.confirm) {
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
index 8acfa064f8f..99945fa1bdd 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/CharPreview.tsx
@@ -19,6 +19,8 @@ const LOOKS = 6;
 const TILE = 32;
 /** An unanswered char_turn may be sent again after this long (ms). */
 const ASK_AGAIN = 3000;
+/** char_face (a turn to a cached facing) goes out at most this often (ms). */
+const FACE_EVERY = 400;
 
 type Look = Partial<Record<CharDir, string>>;
 
@@ -32,6 +34,20 @@ export function CharPreview(props: CellBox & { dir: CharDir }) {
   const cache = useRef(new Map<string, Look>());
   // "key:dir" -> when char_turn asked for it.
   const asked = useRef(new Map<string, number>());
+  // The facing the server last heard about (char_turn or char_face), and the one on screen.
+  const told = useRef<{ sent: CharDir; want: CharDir; timer: number | null }>({
+    sent: 2,
+    want: 2,
+    timer: null,
+  });
+  useEffect(
+    () => () => {
+      if (told.current.timer !== null) {
+        window.clearTimeout(told.current.timer);
+      }
+    },
+    [],
+  );
   const [current, setCurrent] = useState<string | null>(null);
   const [shown, setShown] = useState<string | null>(null);
   const [size, setSize] = useState<[number, number]>([TILE, TILE]);
@@ -58,8 +74,22 @@ export function CharPreview(props: CellBox & { dir: CharDir }) {
   useEffect(() => {
     if (png) {
       setShown(png);
+      // A cached facing: only tell the server which side is on screen, at most every FACE_EVERY ms.
+      const t = told.current;
+      t.want = dir;
+      if (t.timer === null) {
+        t.timer = window.setTimeout(() => {
+          t.timer = null;
+          if (t.want !== t.sent) {
+            t.sent = t.want;
+            act('char_face', { dir: t.want });
+          }
+        }, FACE_EVERY);
+      }
       return;
     }
+    told.current.sent = dir;
+    told.current.want = dir;
     const ask = `${current || ''}:${dir}`;
     const at = asked.current.get(ask);
     if (at === undefined || Date.now() - at > ASK_AGAIN) {
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
index 4105189ac7c..df7f6102c10 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/TraitsEditor.tsx
@@ -198,20 +198,12 @@ export function TraitsEditor(props: CellBox) {
   const filterY = yy;
   yy += 2;
 
-  // The quirk whose words show at the bottom: the hovered row, else the selected one.
-  const shown = hover && info[hover] ? hover : sel && info[sel] ? sel : null;
   const options =
-    sel && taken.includes(sel) && shown === sel
+    sel && info[sel] && taken.includes(sel) && (!hover || hover === sel)
       ? (info[sel].customization_options || []).filter(
           (key) => key in (char.prefs || {}),
         )
       : [];
-  const descLines = shown
-    ? wrap(firstSentence(info[shown].description), aw - 6).slice(
-        0,
-        options.length ? 1 : 2,
-      )
-    : [];
   const descH = 3 + options.length;
 
   const list = Object.keys(info).filter((k) => {
@@ -230,6 +222,16 @@ export function TraitsEditor(props: CellBox) {
   const pages = Math.max(1, Math.ceil(list.length / room));
   const pg = Math.min(pages, page);
   const rows = list.slice((pg - 1) * room, pg * room);
+  // The selected row, else the first one on the page, so the description is never blank.
+  const current = sel && info[sel] ? sel : rows[0] || null;
+  // The quirk whose words show at the bottom: the hovered row, else the current one.
+  const shown = hover && info[hover] ? hover : current;
+  const descLines = shown
+    ? wrap(firstSentence(info[shown].description), aw - 6).slice(
+        0,
+        options.length ? 1 : 2,
+      )
+    : [];
   const py = y + h - 2 - descH;
   const descY = y + h - 1 - descH;
   const recent = fileColors(char.prefs);
@@ -261,7 +263,7 @@ export function TraitsEditor(props: CellBox) {
             taken={isTaken}
             cant={!isTaken && !canAdd(k)}
             locked={isTaken && !canRemove(k)}
-            sel={k === sel}
+            sel={k === current}
             onClick={() => {
               setSel(k);
               toggle(k);
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
index 81c62c964a1..50e2f5ab3f8 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/types.ts
@@ -331,6 +331,8 @@ export const BODY_KEYS = [
   'feature_ethcolor',
   'eye_color',
   'voice_pack',
+  'bark_speech_pitch',
+  'bark_speech_speed',
   'backpack',
   'jumpsuit_style',
   'underwear',
@@ -435,6 +437,7 @@ export type LobbyActions = {
   char_dress: { category: string };
   /** Asks for that facing when it isn't cached for the current look. */
   char_turn: { dir: CharDir };
+  char_face: { dir: CharDir };
   /** Answers CharData.confirm. */
   char_confirm: { ok: 0 | 1 };
 };
diff --git a/voidcrew/modules/lobby_terminal/lobby_character.dm b/voidcrew/modules/lobby_terminal/lobby_character.dm
index f222dc24f68..3bd95642c62 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character.dm
@@ -166,6 +166,14 @@ GLOBAL_LIST_EMPTY(lobby_char_static)
 			char_facing = dir
 			char_preview_request(dir)
 			return TRUE
+		if("char_face")
+			// The client turned to a facing it already had: remember it so the next edit renders that side first. No render.
+			var/dir = lobby_char_int(params["dir"])
+			if(!(dir in GLOB.cardinals))
+				return FALSE
+			char_facing = dir
+			char_preview_dir = dir
+			return FALSE
 		if("char_confirm")
 			return char_answer_confirm(user, prefs, !!lobby_char_int(params["ok"]))
 	return FALSE
diff --git a/voidcrew/modules/lobby_terminal/lobby_character_preview.dm b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
index 6b8d6580ab1..a1f634f9d5a 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character_preview.dm
@@ -24,8 +24,6 @@
  *
  * Memory: nothing goes into the RSC and nothing is registered with SSassets. Each terminal keeps the last LOBBY_CHAR_CACHE_LOOKS looks, four
  * facings each (about 1-2 KB a facing).
- *
- * Compile with -DLOBBY_CHAR_PREVIEW_DEBUG for the timing log and the headless benchmark.
  */
 
 /// Human dummy slot the preview renders on. Only the worker uses it, so it is never busy.
@@ -201,9 +199,6 @@ GLOBAL_VAR_INIT(lobby_char_forge_serial, 0)
 	// Main-thread time only; the wait on rust-g is a sleep and costs the server nothing.
 	var/cost = timing["setup"] + timing["flat"] + timing["queue"] + timing["b64"]
 	GLOB.lobby_char_render_spend += list(list(world.time, cost))
-#ifdef LOBBY_CHAR_PREVIEW_DEBUG
-	log_world("LOBBY_CHAR_RENDER [owner?.ckey] dir=[dir] cost=[cost]ms setup=[timing["setup"]] flat=[timing["flat"]] queue=[timing["queue"]] wait=[timing["wait_ticks"]]t b64=[timing["b64"]] bytes=[length(png)]")
-#endif
 	if(!png || QDELETED(src))
 		return
 	char_preview_store(key, dir, png)
@@ -363,86 +358,6 @@ GLOBAL_VAR_INIT(lobby_char_forge_serial, 0)
 				mannequin.add_quirk(quirk_type, player, announce = FALSE)
 	return mannequin
 
-#ifdef LOBBY_CHAR_PREVIEW_DEBUG
-/// The plain DM way (getFlatIcon), kept for the benchmark's comparison only.
-/proc/lobby_char_render_flat(datum/preferences/prefs, category, dir, client/player, list/timing)
-	var/start = TICK_USAGE_REAL
-	var/mob/living/carbon/human/dummy/mannequin = lobby_char_dress(prefs, category, player)
-	timing["setup"] = TICK_USAGE_TO_MS(start)
-	start = TICK_USAGE_REAL
-	var/icon/flat = getFlatIcon(mannequin, dir, no_anim = TRUE)
-	timing["flat"] = TICK_USAGE_TO_MS(start)
-	unset_busy_human_dummy(LOBBY_CHAR_DUMMY)
-	GLOB.lobby_char_rendering = FALSE
-	start = TICK_USAGE_REAL
-	. = icon2base64(flat)
-	timing["b64"] = TICK_USAGE_TO_MS(start)
-
-/datum/controller/subsystem/ticker/Initialize()
-	. = ..()
-	Master.sleep_offline_after_initializations = FALSE
-	delay_end = TRUE
-	INVOKE_ASYNC(GLOBAL_PROC, GLOBAL_PROC_REF(lobby_char_bench))
-
-/// Headless benchmark: renders species x outfits x facings both ways, logs the cost per stage, writes the PNGs as base64 lines, then soaks.
-/proc/lobby_char_bench()
-	UNTIL(SSticker.current_state >= GAME_STATE_PREGAME)
-	SSticker.SetTimeLeft(-1)
-	sleep(5 SECONDS)
-	var/out = "data/lobby_c2_bench/"
-	fdel(out)
-	var/datum/client_interface/mock = new
-	var/datum/preferences/prefs = new(mock)
-	mock.prefs = prefs
-	var/datum/preference/species_pref = GLOB.preference_entries[/datum/preference/choiced/species]
-	var/list/species = list(SPECIES_HUMAN, SPECIES_LIZARD, SPECIES_MOTH, SPECIES_FELINE, SPECIES_PLASMAMAN, SPECIES_ETHEREAL)
-	var/list/categories = list(JOB_CAT_ENGINEERING, JOB_CAT_SECURITY, JOB_CAT_MEDICAL, JOB_CAT_ASSISTANT, JOB_CAT_COMMAND, JOB_CAT_CARGO)
-	for(var/category in categories)
-		var/datum/job/job = lobby_char_dress_job(category)
-		text2file("DRESS [category] = [job?.title] [job?.outfit]", "[out]timing.txt")
-	for(var/way in list("forge", "flat"))
-		var/list/totals = list()
-		var/count = 0
-		for(var/species_id in species)
-			prefs.write_preference(species_pref, species_id)
-			var/first = TRUE
-			for(var/category in categories)
-				for(var/dir in GLOB.cardinals)
-					var/list/timing = list()
-					var/png = way == "forge" ? lobby_char_render(prefs, category, dir, mock, timing) : lobby_char_render_flat(prefs, category, dir, mock, timing)
-					var/line = ""
-					var/cost = 0
-					for(var/stage in timing)
-						line += " [stage]=[timing[stage]]"
-						if(stage != "wait_ticks")
-							cost += timing[stage]
-					text2file("RENDER [way] [species_id] [category] dir=[dir] cost=[cost][line] bytes=[length(png)][first ? " COLD" : ""]", "[out]timing.txt")
-					text2file("[way]_[species_id]_[category]_[dir]|[png]", "[out]pngs.txt")
-					if(!first)
-						timing["cost"] = cost
-						for(var/stage in timing)
-							totals[stage] += timing[stage]
-						count++
-					first = FALSE
-					stoplag()
-		var/mean = "WARM MEAN [way] over [count]:"
-		for(var/stage in totals)
-			mean += " [stage]=[totals[stage] / count]"
-		text2file(mean, "[out]timing.txt")
-	text2file("SOAK READY [world.timeofday]", "[out]timing.txt")
-	sleep(30 SECONDS)
-	text2file("SOAK START [world.timeofday]", "[out]timing.txt")
-	var/soak_ms = 0
-	for(var/i in 1 to 500)
-		prefs.write_preference(species_pref, species[(i % length(species)) + 1])
-		var/list/timing = list()
-		lobby_char_render(prefs, categories[(i % length(categories)) + 1], GLOB.cardinals[(i % 4) + 1], mock, timing)
-		soak_ms += timing["setup"] + timing["flat"] + timing["queue"] + timing["b64"]
-		stoplag()
-	text2file("SOAK END [world.timeofday] mean=[soak_ms / 500]", "[out]timing.txt")
-	sleep(30 SECONDS)
-	text2file("BENCH DONE", "[out]timing.txt")
-#endif
 
 #undef LOBBY_CHAR_DUMMY
 #undef LOBBY_CHAR_CACHE_LOOKS

From 3631dbfca9ba64e99866d9f0b70c2c4c96f314dd Mon Sep 17 00:00:00 2001
From: Jackriip <97582790+Jackriip@users.noreply.github.com>
Date: Tue, 10 Nov 2026 15:28:37 -0800
Subject: [PATCH 7/7] Retry the preferences catalog until char_open has sent
 it, show untouched kit colours, give the test's mock client a veteran check

---
 .../interfaces/LobbyTerminal/HullRecord.tsx   |  3 +-
 .../interfaces/LobbyTerminal/ShipPic.tsx      |  7 +---
 .../LobbyTerminal/usePrefsCatalog.ts          | 41 ++++++++++++++-----
 .../modules/lobby_terminal/lobby_character.dm |  9 +++-
 .../modules/unit_tests/lobby_character.dm     |  4 ++
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/HullRecord.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/HullRecord.tsx
index df3a3bbe033..17e7e541430 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/HullRecord.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/HullRecord.tsx
@@ -101,8 +101,7 @@ export function HullRecord(props: {
       onClick={() =>
         ctx.set({
           // A hull with no finishes and no rooms has nothing to fit: straight to the bill.
-          screen:
-            hull.finishes.length || hull.slots.length ? 'fit' : 'bill',
+          screen: hull.finishes.length || hull.slots.length ? 'fit' : 'bill',
           finish: null,
           picks: {},
           step: 0,
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ShipPic.tsx b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ShipPic.tsx
index a460fcd0cad..7169b0d3564 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ShipPic.tsx
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/ShipPic.tsx
@@ -7,12 +7,7 @@
  * draw pixelated; anything smaller is a smooth downscale at a whole number of px per tile,
  * so tiles never land between pixels.
  */
-import {
-  type CSSProperties,
-  type ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import { type CSSProperties, type ReactNode, useEffect, useState } from 'react';
 import { resolveAsset } from 'tgui/assets';
 
 /**
diff --git a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
index 73f287edf69..f0c7342d391 100644
--- a/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
+++ b/tgui/packages/voidcrew_tgui/interfaces/LobbyTerminal/usePrefsCatalog.ts
@@ -11,18 +11,39 @@ import { fetchRetry } from 'tgui-core/http';
 let cached: ServerData | null = null;
 let pending: Promise<ServerData | null> | null = null;
 
+/** Tries this many times, a second and a half apart: the asset can arrive after the first fetch (char_open sends it). */
+const TRIES = 20;
+const RETRY_MS = 1500;
+
+function attempt(left: number): Promise<ServerData | null> {
+  return fetchRetry(resolveAsset('preferences.json'))
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`preferences.json: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((data: ServerData) => {
+      cached = data;
+      return data;
+    })
+    .catch(() =>
+      left > 1
+        ? new Promise<ServerData | null>((resolve) =>
+            setTimeout(() => resolve(attempt(left - 1)), RETRY_MS),
+          )
+        : null,
+    );
+}
+
 function load(): Promise<ServerData | null> {
   if (!pending) {
-    pending = fetchRetry(resolveAsset('preferences.json'))
-      .then((response) => response.json())
-      .then((data: ServerData) => {
-        cached = data;
-        return data;
-      })
-      .catch(() => {
-        pending = null;
-        return null;
-      });
+    pending = attempt(TRIES).then((data) => {
+      if (!data) {
+        pending = null; // the next mount tries again
+      }
+      return data;
+    });
   }
   return pending;
 }
diff --git a/voidcrew/modules/lobby_terminal/lobby_character.dm b/voidcrew/modules/lobby_terminal/lobby_character.dm
index 3bd95642c62..2b8ea996c62 100644
--- a/voidcrew/modules/lobby_terminal/lobby_character.dm
+++ b/voidcrew/modules/lobby_terminal/lobby_character.dm
@@ -524,9 +524,14 @@ GLOBAL_LIST_EMPTY(lobby_char_static)
 	for(var/item_path in loadout)
 		var/list/details = loadout[item_path]
 		var/list/entry = list()
+		if(islist(details) && details[INFO_GREYSCALE])
+			entry["greyscale"] = details[INFO_GREYSCALE]
+		else if(ispath(item_path, /obj/item))
+			// The item's own colours, so the swatches show what an untouched slot really is.
+			var/obj/item/kit_item = item_path
+			if(initial(kit_item.greyscale_colors))
+				entry["greyscale"] = initial(kit_item.greyscale_colors)
 		if(islist(details))
-			if(details[INFO_GREYSCALE])
-				entry["greyscale"] = details[INFO_GREYSCALE]
 			if(details[INFO_NAMED])
 				entry["name"] = details[INFO_NAMED]
 			if(details[INFO_RESKIN])
diff --git a/voidcrew/modules/unit_tests/lobby_character.dm b/voidcrew/modules/unit_tests/lobby_character.dm
index c278b58daa3..657c1d768de 100644
--- a/voidcrew/modules/unit_tests/lobby_character.dm
+++ b/voidcrew/modules/unit_tests/lobby_character.dm
@@ -6,6 +6,10 @@
  * on the game tab.
  */
 
+/// The mock client has no playtime: the veteran cloak preference asks for it while the char block is built.
+/datum/client_interface/proc/is_veteran()
+	return FALSE
+
 /// A terminal with no client or tgui window, editing a mock client's prefs.
 /datum/lobby_terminal/lobby_char_test
 	var/datum/preferences/test_prefs