pi-magi-theme 0.1.4 → 0.2.1

package/README.md

@@ -1,12 +1,12 @@
 # pi-magi-theme
 
-A three-mind council theme + extension for [pi](https://pi.dev): a detailed Tree of Life in the header, the three MAGI in a fixed side panel, live llama-swap telemetry, and `/magi`, a council of three models that votes on your engineering questions and reviews your pending changes.
+A three-mind council theme + extension for [pi](https://pi.dev): a MAGI SYSTEM header, the three MAGI as their control screen in a fixed side panel, live llama-swap telemetry, and `/magi`, a council of three models that votes on your engineering questions and reviews your pending changes.
 
-All artwork is original. The symbolism (the three Magi, the Tree of Life, the golem, the seven seals) is public domain.
+Fan-art theme inspired by Neon Genesis Evangelion: the MAGI and their screen belong to their creators, all rights reserved to khara, Inc. This project is not affiliated with them. The rest of the symbolism (the Tree of Life, the golem, the seven seals) is public domain.
 
-![pi with the MAGI theme: Tree of Life header, side panel with the MAGI triangle and llama-swap telemetry](https://raw.githubusercontent.com/b-iurea/pi-magi-theme/main/docs/screenshot.png)
+![pi with the MAGI theme: MAGI SYSTEM header, MECHA SELECT model picker, side panel with the MAGI screen and llama-swap telemetry](https://raw.githubusercontent.com/b-iurea/pi-magi-theme/main/docs/screenshot.png)
 
-![The MAGI deliberating while the model thinks](https://raw.githubusercontent.com/b-iurea/pi-magi-theme/main/docs/deliberation.png)
+![The angel attack: red spreads through the MAGI while the model loads into VRAM](https://raw.githubusercontent.com/b-iurea/pi-magi-theme/main/docs/angel-attack.png)
 
 ## Install
 
@@ -39,6 +39,7 @@ Clone the repo and point pi at it instead (edits in the repo are live on the nex
 | `/magi <question>` | the council answers a question (recent conversation as context) |
 | `/magi review [focus]` | the council reviews your pending changes (`git diff HEAD` plus untracked file names) before you commit |
 | `/magi config` | pick a model for each MAGI |
+| `/magi mecha` | MECHA SELECT: pick the llama-swap model to activate, each shown as a mecha head lit by its real state |
 | `/magi-ui compact` | toggle the compact side panel (basic info and animations only); remembered across sessions |
 | `/magi-ui status` | llama-swap report from its last 100 requests: speed, tokens, cache hits, MTP draft acceptance, durations, errors per model |
 | `/magi-ui config` | set the electricity price per kWh and the currency (EUR or USD) for the COST row |
@@ -54,7 +55,10 @@ Every symbol stands for something real the agent is doing.
 | light descending Tiferet → Malkuth | manifestation | the model is **streaming the answer** (with live tok/s) | footer |
 | light ascending Malkuth → Keter | ascent | the model is **being loaded into VRAM** | footer |
 | Malkuth at rest | the kingdom | **idle**, with the last run duration | footer |
-| MELCHIOR · BALTHASAR · CASPAR flickering | the three Magi at work | what the agent **is doing** (thinking, responding, loading, compacting); below them, the **last real `/magi` verdict** | panel |
+| MELCHIOR · BALTHASAR · CASPAR flickering | the three Magi at work | what the agent **is doing** (thinking, responding, compacting); below them, the **last real `/magi` verdict** | panel |
+| red spreading through BALTHASAR, MELCHIOR, CASPAR | an angel hacking the MAGI | the model is **being loaded into VRAM**, at the pace of its last load; CASPAR's last corner blinks once everything else has fallen | panel |
+| blue taking the MAGI back from that corner | the attack repelled | the model is **loaded** | panel |
+| MECHA-I · II · III · LEGION | units waiting for a pilot | the **llama-swap models**: dormant, waking while loading, eyes lit in VRAM | MECHA SELECT |
 | the golem, EMET ("truth") | a clay servant that acts | a **tool is running**, with the file or command it works on | panel + footer |
 | the golem, MET ("death") | the aleph is erased | a **tool failed** | panel + footer |
 | SYNC | the golem's obedience | **tool success rate** | panel + footer |
@@ -99,19 +103,24 @@ Each nature is a lens, not a specialty, so the council answers any question, not
 ```json
 {
   "MELCHIOR": { "model": "llama-swap/Qwen3.8 27B Q4_K_M - Thinking", "thinking": "low" },
-  "ui": { "compact": false, "kwhPrice": 0.30, "currency": "EUR" }
+  "ui": { "compact": false, "kwhPrice": 0.30, "currency": "EUR" },
+  "loads": { "qwen3.8-27b": 41200 }
 }
 ```
 
 - per MAGI: `model` (unset = current session model) and optional `thinking` level;
 - `ui.compact`: start with the compact side panel;
-- `ui.kwhPrice` and `ui.currency` (`EUR` or `USD`): the COST row multiplies the GPU energy used in the session by this price.
+- `ui.kwhPrice` and `ui.currency` (`EUR` or `USD`): the COST row multiplies the GPU energy used in the session by this price;
+- `loads`: written by the theme, how long each llama-swap model took to load last time (paces the angel attack; 60s when unknown).
 
 ## llama-swap
 
 When the session model uses the `llama-swap` provider, the side panel:
 
-- loads the model into VRAM on startup and on model change (`GET /upstream/<model>/health`), with a MAGI boot animation;
+- loads nothing at startup: a new session opens MECHA SELECT, a resumed one shows whether its model is already in VRAM;
+- loads the model into VRAM when you pick it, change it with `/model` or type (`GET /upstream/<model>/health`), with the angel attack animation;
+- prewarms a new session: pi's real system prompt and tools are processed as soon as the model is ready, so the first answer doesn't wait for them;
+- follows the context live in the seven seals while the model works (`/upstream/<model>/slots`);
 - notices when llama-swap unloads the model (`/running`), shows it asleep and reloads it as soon as you type;
 - shows VRAM, GPU load/temperature/power, RAM and the GPU energy used in the session from `/metrics` (every 3s while working, every 30s when idle);
 - shows server-measured tok/s, prompt tok/s and KV cache hits of the last request (`/api/metrics/activity?limit=1`).

package/extensions/magi/index.ts

@@ -2,7 +2,8 @@
  * MAGI — a three-mind council chrome for pi
  *
  * One public-domain mythology, every symbol bound to a real function:
- *  - the TREE OF LIFE shows where the agent is: the upper triad while it thinks, the light descending
+ *  - the panel draws the three MAGI as the panels of their control screen
+ *  - the sephirot of the Tree of Life show where the agent is: the upper triad while it thinks, the light descending
  *    to Malkuth while it answers, ascending while the model is loaded into VRAM, at rest in Malkuth when idle
  *  - the three MAGI (MELCHIOR / BALTHASAR / CASPAR) flicker while the agent works, showing what it is doing,
  *    and form the /magi council: three real models voting (on a question, or on the pending git diff)
@@ -10,10 +11,15 @@
  *    a failing tool erases the aleph and EMET becomes MET ("death"). SYNC is the tool success rate
  *  - CHESED (mercy) and GEBURAH (severity) count successful and failed tools
  *  - the SEVEN SEALS measure the context window; the sixth warns before compaction, the seventh opens when it runs
+ *  - MECHA SELECT: a new llama-swap session loads nothing until you pick the unit (model) to activate;
+ *    each model gets a MECHA head, lit when it is already in VRAM, waking while it loads;
+ *    /magi mecha reopens it
+ *  - while a model loads an angel attacks the MAGI: red spreads through BALTHASAR, MELCHIOR and CASPAR at the pace of
+ *    the model's last load, a corner of CASPAR holds out blinking; once loaded, blue takes the MAGI back from that corner
  *  - llama-swap telemetry: VRAM, GPU load/temp/power, energy used, RAM, server-side tok/s, prompt tok/s, cache hits
  *  - /magi config → assign a model to each MAGI; /magi-ui compact|status → smaller panel, llama-swap report
  *
- * Artwork is original; the symbolism is public domain.
+ * Fan art: the MAGI and their screen come from Neon Genesis Evangelion, all rights reserved to khara, Inc.
  * Use with the theme ../../themes/magi.json
  */
 
@@ -39,9 +45,30 @@ const MAGI_WORD = [
 	"╚═╝     ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚═╝",
 ];
 
-/** Tree of Life canvas, in terminal cells; drawn with braille dots (2×4 sub-pixels per cell). */
-const TREE_W = 30;
-const TREE_H = 20;
+/** The seven-eyed seal, 26×11 cells of braille, traced from the original emblem. */
+const SEELE_LOGO = [
+	" ⠹⡍⠉⠉⠉⠉⠉⠉⠉⠉⠉⢹⠉⠉⠉⠉⠉⠉⠉⣉⡉⠉⢩⠇",
+	"⣠⠖⠛⢩⠋⠉⢯⠙⠲⢤⡀ ⢸  ⢠⣴⠚⠉⡝⠉⠙⡍⠙⢲⣤",
+	" ⠙⠒⠾⡷⠴⠿⠖⠚⠁  ⢸   ⠈⠙⠒⠻⠶⣾⠗⠚⠉",
+	" ⢀⣠⣤⣼⢦⣤⣤⣀   ⢸   ⢀⣀⡤⢤⠴⢧⠤⣄⣀",
+	"⠺⢭⣀⣸⡁ ⣽⣀⣨⠽⠂ ⢸  ⠐⠫⢤⣀⣯⡀⣠⣇⣀⡬⠓",
+	"   ⠉⠉⠉⠙⣇    ⢸     ⡼⠉⠉⠉⠉",
+	"⣠⠖⠚⢩⠏⠉⢯⠙⠓⢦⡀ ⢸  ⢀⡴⠚⠋⡽⠉⠙⡍⠓⠲⣄",
+	" ⠙⠒⠾⠷⠴⠿⠖⠚⢧  ⢸  ⢀⡼⠛⠒⠿⠦⠾⠗⠚⠉",
+	"         ⠈⢧ ⢸ ⢀⡞ ⣀⣤⢤⡤⣤⣤⣄⡀",
+	"          ⠈⢧⢸⢀⡞⠐⠯⣅⣀⣯ ⢈⣇⣀⡭⠗",
+	"            ⢻⡟    ⠈⠉⠉⠉⠉",
+];
+const SEELE_WIDTH = 26;
+
+const SYSTEM_WORD = [
+	"███████╗██╗   ██╗███████╗████████╗███████╗███╗   ███╗",
+	"██╔════╝╚██╗ ██╔╝██╔════╝╚══██╔══╝██╔════╝████╗ ████║",
+	"███████╗ ╚████╔╝ ███████╗   ██║   █████╗  ██╔████╔██║",
+	"╚════██║  ╚██╔╝  ╚════██║   ██║   ██╔══╝  ██║╚██╔╝██║",
+	"███████║   ██║   ███████║   ██║   ███████╗██║ ╚═╝ ██║",
+	"╚══════╝   ╚═╝   ╚══════╝   ╚═╝   ╚══════╝╚═╝     ╚═╝",
+];
 
 /** Sephirot in the order of the "lightning flash" (Keter → Malkuth), positioned in sub-pixels. */
 const SEPHIROT = [
@@ -57,82 +84,6 @@ const SEPHIROT = [
 	{ name: "MALKUTH", meaning: "the kingdom", x: 30, y: 75 },
 ] as const;
 
-/** Da'at, the hidden sephirah: drawn dashed, not part of the flash. */
-const DAAT = { x: 30, y: 28 };
-
-/** The 22 paths, as pairs of SEPHIROT indices. */
-const TREE_PATHS: readonly [number, number][] = [
-	[0, 1], [0, 2], [0, 5], [1, 2], [1, 5], [1, 3], [2, 5], [2, 4], [3, 4], [3, 5], [3, 6],
-	[4, 5], [4, 7], [5, 6], [5, 8], [5, 7], [6, 7], [6, 8], [6, 9], [7, 8], [7, 9], [8, 9],
-];
-
-const BRAILLE_BITS = [
-	[0x01, 0x08],
-	[0x02, 0x10],
-	[0x04, 0x20],
-	[0x40, 0x80],
-]; // [row][col] → dot bit
-
-/** Rasterizes the Tree of Life into braille: paths (muted), Da'at (dim, dashed), sephirot (accent rings). */
-function renderTreeOfLife(th: Theme): string[] {
-	const W = TREE_W * 2;
-	const H = TREE_H * 4;
-	const PATH = 1;
-	const DAAT_PX = 2;
-	const NODE = 3;
-	const px = new Uint8Array(W * H);
-	const set = (x: number, y: number, v: number) => {
-		const rx = Math.round(x);
-		const ry = Math.round(y);
-		if (rx >= 0 && ry >= 0 && rx < W && ry < H) px[ry * W + rx] = v;
-	};
-	for (const [a, b] of TREE_PATHS) {
-		const p = SEPHIROT[a]!;
-		const q = SEPHIROT[b]!;
-		const n = Math.ceil(Math.max(Math.abs(q.x - p.x), Math.abs(q.y - p.y)));
-		for (let i = 0; i <= n; i++) set(p.x + ((q.x - p.x) * i) / n, p.y + ((q.y - p.y) * i) / n, PATH);
-	}
-	// ring of radius r, cleared inside and with a small gap around it so paths stop short of the circle;
-	// dashed rings keep every other 30° arc
-	const ring = (c: { x: number; y: number }, r: number, v: number, dashed: boolean) => {
-		for (let y = -r - 2; y <= r + 2; y++) {
-			for (let x = -r - 2; x <= r + 2; x++) {
-				const d = Math.hypot(x, y);
-				if (d > r + 1.5) continue;
-				const onRing = d > r - 0.7 && d <= r + 0.5;
-				const arc = Math.floor((Math.atan2(y, x) + Math.PI) / (Math.PI / 6)) % 2 === 0;
-				set(c.x + x, c.y + y, onRing && (!dashed || arc) ? v : 0);
-			}
-		}
-	};
-	ring(DAAT, 3, DAAT_PX, true);
-	for (const s of SEPHIROT) {
-		ring(s, 3.5, NODE, false);
-		set(s.x, s.y, NODE);
-	}
-
-	const lines: string[] = [];
-	for (let row = 0; row < TREE_H; row++) {
-		let line = "";
-		for (let col = 0; col < TREE_W; col++) {
-			let bits = 0;
-			let top = 0;
-			for (let dy = 0; dy < 4; dy++) {
-				for (let dx = 0; dx < 2; dx++) {
-					const v = px[(row * 4 + dy) * W + col * 2 + dx]!;
-					if (!v) continue;
-					bits |= BRAILLE_BITS[dy]![dx]!;
-					top = Math.max(top, v);
-				}
-			}
-			const ch = bits ? String.fromCharCode(0x2800 + bits) : " ";
-			line += bits ? th.fg(top === NODE ? "accent" : top === DAAT_PX ? "dim" : "muted", ch) : ch;
-		}
-		lines.push(line);
-	}
-	return lines;
-}
-
 type NodeLight = "off" | "on" | "hot";
 
 /** The ten sephirot as a tiny path: ●━●━◉─○ … (hot = where the light is now). */
@@ -178,6 +129,167 @@ const GOLEM_FALLEN = [
 	"     ▀▀▀▀  ▀▀▀▀     ",
 ];
 
+/* ── MECHA units: the heads of the model picker, one unit per model llama-swap runs ── */
+
+type MechaUnit = "I" | "II" | "III" | "LEGION";
+type MechaState = "dormant" | "waking" | "active";
+type Rgb = readonly [number, number, number];
+
+/**
+ * Heads of 13×7 cells. mask: e = eyes (the light), a = accent, anything else = armor.
+ * jaw: rows that replace the art from row `at` while the unit wakes (the jaw lock breaks).
+ * Colors are the units' own, outside the theme palette on purpose.
+ */
+const MECHA: Record<MechaUnit, { name: string; armor: Rgb; accent: Rgb; eyes: Rgb; art: string[]; mask: string[]; jaw: { at: number; rows: string[] } }> = {
+	"I": {
+		name: "MECHA-I",
+		armor: [124, 82, 196],
+		accent: [132, 222, 84],
+		eyes: [170, 255, 120],
+		art: [
+			"      ▲      ",
+			"     ███     ",
+			"   ▄█████▄   ",
+			"  ██▀▀█▀▀██  ",
+			"  █ ◣   ◢ █  ",
+			"  ▀█▄▄█▄▄█▀  ",
+			"    ▀▄▄▄▀    ",
+		],
+		mask: [
+			"             ",
+			"             ",
+			"             ",
+			"    aa aa    ",
+			"    e   e    ",
+			"             ",
+			"    aaaaa    ",
+		],
+		jaw: { at: 5, rows: ["  ▀█▀▀▀▀▀█▀  ", "   █▄▀▄▀▄█   "] },
+	},
+	"II": {
+		name: "MECHA-II",
+		armor: [236, 140, 44],
+		accent: [90, 160, 255],
+		eyes: [120, 200, 255],
+		art: [
+			"    ▄▄▄▄▄    ",
+			"  ▄█▀▀▀▀▀█▄  ",
+			" ▐█  ▄▄▄  █▌ ",
+			" ▐█  ███  █▌ ",
+			"  ▀█▄▄▄▄▄█▀  ",
+			"    ▀███▀    ",
+			"             ",
+		],
+		mask: [
+			"    aaaaa    ",
+			"             ",
+			"     eee     ",
+			"     eee     ",
+			"             ",
+			"             ",
+			"             ",
+		],
+		jaw: { at: 5, rows: ["    ▀▄▀▄▀    "] },
+	},
+	"III": {
+		name: "MECHA-III",
+		armor: [214, 40, 44],
+		accent: [245, 160, 40],
+		eyes: [120, 255, 160],
+		art: [
+			" ◥▄       ▄◤ ",
+			"  ██▄▄▄▄▄██  ",
+			"  █ ●   ● █  ",
+			"  █  ● ●  █  ",
+			"  ▀██▄▄▄██▀  ",
+			"    ▀███▀    ",
+			"             ",
+		],
+		mask: [
+			" aa       aa ",
+			"             ",
+			"    e   e    ",
+			"     e e     ",
+			"             ",
+			"             ",
+			"             ",
+		],
+		jaw: { at: 4, rows: ["  ▀█▀▄▀▄▀█▀  ", "   ▀▄▀▄▀▄▀   "] },
+	},
+	LEGION: {
+		name: "LEGION",
+		armor: [228, 228, 232],
+		accent: [205, 40, 64],
+		eyes: [255, 90, 110],
+		art: [
+			"     ▄▄▄     ",
+			"   ▄█████▄   ",
+			"  ▐███████▌  ",
+			"  ▐█▀▄▀▄▀█▌  ",
+			"   ▀▄▀▄▀▄▀   ",
+			"             ",
+			"             ",
+		],
+		mask: [
+			"             ",
+			"             ",
+			"             ",
+			"    eeeee    ",
+			"   eeeeeee   ",
+			"             ",
+			"             ",
+		],
+		jaw: { at: 3, rows: ["  ▐█▄▀▄▀▄█▌  ", "   ▄▀▄▀▄▀▄   "] },
+	},
+};
+
+const rgb = ([r, g, b]: Rgb, s: string) => `\x1b[38;2;${r};${g};${b}m${s}\x1b[39m`;
+const shade = (c: Rgb, k: number): Rgb => [Math.round(c[0] * k), Math.round(c[1] * k), Math.round(c[2] * k)];
+
+/** One MECHA head: dormant (dark, eyes off), waking (eyes flicker, the jaw lock breaks), active (armor lit, eyes pulse). */
+function renderMechaHead(unit: MechaUnit, state: MechaState, frame: number): string[] {
+	const u = MECHA[unit];
+	const jawOpen = state === "waking" && frame % 8 < 4;
+	const eyesOn = state === "active" || (state === "waking" && flicker(frame, 7));
+	const armor = state === "dormant" ? shade(u.armor, 0.3) : state === "waking" ? shade(u.armor, 0.7) : u.armor;
+	const accent = state === "dormant" ? shade(u.accent, 0.3) : u.accent;
+	const eyes = eyesOn ? shade(u.eyes, state === "active" ? 0.75 + 0.25 * Math.sin(frame / 3) : 1) : shade(u.eyes, 0.18);
+	return u.art.map((row, r) => {
+		const jaw = jawOpen ? u.jaw.rows[r - u.jaw.at] : undefined;
+		const art = jaw ?? row;
+		let out = "";
+		for (let c = 0; c < art.length; c++) {
+			const ch = art[c]!;
+			const m = u.mask[r]![c];
+			out += ch === " " ? " " : rgb(m === "e" ? eyes : m === "a" ? accent : armor, ch);
+		}
+		return out;
+	});
+}
+
+/** MECHA-I goes to the default model, II and III to the next real models, the rest is the LEGION. */
+function assignMechaUnits(realIds: string[], defaultRealId: string): Map<string, MechaUnit> {
+	const order = [...new Set(realIds.includes(defaultRealId) ? [defaultRealId, ...realIds] : realIds)];
+	const units: MechaUnit[] = ["I", "II", "III"];
+	return new Map(order.map((id, i) => [id, units[i] ?? "LEGION"]));
+}
+
+/**
+ * The unit of every llama-swap model, stable across /model switches: MECHA-I is settings.json's defaultModel.
+ * ponytail: reads only the global settings, a project .pi/settings.json override is ignored.
+ */
+function mechaUnitsOf(ctx: ExtensionContext, aliases: Map<string, string>): Map<string, MechaUnit> {
+	let def = ctx.model?.id ?? "";
+	try {
+		def = JSON.parse(readFileSync(join(homedir(), ".pi", "agent", "settings.json"), "utf8")).defaultModel || def;
+	} catch {
+		// no settings: the session model leads
+	}
+	const realOf = (id: string) => aliases.get(id) ?? id;
+	const ids = ctx.modelRegistry.getAvailable().filter((m) => m.provider === "llama-swap").map((m) => realOf(m.id));
+	return assignMechaUnits(ids, realOf(def));
+}
+
 const MAGI_UNITS = ["MELCHIOR", "BALTHASAR", "CASPAR"] as const;
 type MagiUnit = (typeof MAGI_UNITS)[number];
 
@@ -262,6 +374,7 @@ function animating(now = Date.now()): boolean {
 		state.phase !== "idle" ||
 		swap.state === "checking" ||
 		swap.state === "loading" ||
+		(swap.state === "ready" && now - swap.since < ONLINE_MS) ||
 		state.compacting ||
 		now - state.rebornAt < REBIRTH_MS ||
 		now - state.lastFailAt < FAIL_FLASH_MS
@@ -389,75 +502,193 @@ interface UnitView {
 
 const MAGI_DIAGRAM_WIDTH = 32;
 
+/* ── MAGI screen: pixel art drawn with half blocks, two pixels per cell (one above the other) ── */
+
 /**
- * The three MAGI wired in a triangle: BALTHASAR on top, CASPAR bottom-left, MELCHIOR bottom-right,
- * joined through the central hub. Always exactly 32 cells wide.
+ * The three MAGI as the panels of their control screen, 32×20 pixels: B = BALTHASAR, C = CASPAR, M = MELCHIOR
+ * (CASPAR and MELCHIOR are mirror images), o = the wires joining them.
  */
-function magiDiagram(th: Theme, top: UnitView, left: UnitView, right: UnitView, link: ThemeColor, hub: string): string[] {
-	const center = (s: string) => {
-		const w = visibleWidth(s);
-		const l = Math.max(0, Math.floor((10 - w) / 2));
-		return " ".repeat(l) + s + " ".repeat(Math.max(0, 10 - w - l));
+const MAGI_SCREEN = [
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"..........BBBBBBBBBBBB..........",
+	"...........BBBBBBBBBB...........",
+	"...........oBBBBBBBBo...........",
+	"CCCCCCCC..oo.BBBBBB.oo..MMMMMMMM",
+	"CCCCCCCCCoo..........ooMMMMMMMMM",
+	"CCCCCCCCCC............MMMMMMMMMM",
+	"CCCCCCCCCCC..........MMMMMMMMMMM",
+	"CCCCCCCCCCCC........MMMMMMMMMMMM",
+	"CCCCCCCCCCCCC......MMMMMMMMMMMMM",
+	"CCCCCCCCCCCCC......MMMMMMMMMMMMM",
+	"CCCCCCCCCCCCCooooooMMMMMMMMMMMMM",
+	"CCCCCCCCCCCCC......MMMMMMMMMMMMM",
+	"CCCCCCCCCCCCC......MMMMMMMMMMMMM",
+];
+
+interface ScreenLabel {
+	row: number;
+	center: number;
+	text: string;
+	fg: string; // SGR foreground escape
+}
+
+const SCREEN_TEAL = "\x1b[38;2;64;180;220m";
+const SCREEN_TEAL_DARK = "\x1b[38;2;22;62;78m";
+const SCREEN_INK = "\x1b[38;2;10;10;10m";
+const SGR_RESET = "\x1b[0m";
+const toBg = (fg: string) => fg.replace("[38;", "[48;");
+
+/** Paints each pixel of a rows×2 by cols grid, then writes the labels in bold over whatever is under them. */
+function renderScreen(rows: number, cols: number, at: (y: number, x: number) => string | undefined, labels: readonly ScreenLabel[]): string[] {
+	const cells = Array.from({ length: rows }, (_, r) =>
+		Array.from({ length: cols }, (_, c) => {
+			const top = at(r * 2, c);
+			const bot = at(r * 2 + 1, c);
+			if (!top && !bot) return " ";
+			if (top === bot) return top + "█" + SGR_RESET;
+			if (top && bot) return top + toBg(bot) + "▀" + SGR_RESET;
+			return top ? top + "▀" + SGR_RESET : bot + "▄" + SGR_RESET;
+		}),
+	);
+	for (const l of labels) {
+		const chars = [...l.text];
+		const start = Math.round(l.center - chars.length / 2);
+		chars.forEach((ch, i) => {
+			const c = start + i;
+			const row = cells[l.row];
+			if (!row || c < 0 || c >= row.length) return;
+			const under = at(l.row * 2, c);
+			row[c] = (under ? toBg(under) : "") + l.fg + "\x1b[1m" + ch + SGR_RESET;
+		});
+	}
+	return cells.map((r) => r.join(""));
+}
+
+/* ── the angel attack: red spreads through the MAGI while a model loads, blue takes them back when it is ready ── */
+
+const SCREEN_RED = "\x1b[38;2;206;36;24m";
+/** CASPAR's bottom-left corner: the red never gets there; once everything else has fallen it blinks until the model is loaded. */
+const SAFE_PIXELS = new Set(["18,0", "18,1", "19,0", "19,1"]);
+const LOAD_DEFAULT_MS = 60_000;
+const RECOVER_MS = 1_600;
+const ONLINE_MS = 3_000;
+
+/** Blocky noise (2×2 pixel blocks), stable across renders: makes the front ragged like a corrupted screen. */
+const blockNoise = (y: number, x: number) => {
+	const h = Math.sin(Math.floor(y / 2) * 127.1 + Math.floor(x / 2) * 311.7) * 43758.5453;
+	return h - Math.floor(h);
+};
+
+/** Pixel → 0..1 order in which it falls: BALTHASAR, then MELCHIOR, then CASPAR, each from where the previous one touches it. */
+const INFECTION_ORDER: ReadonlyMap<string, number> = (() => {
+	const entry: Record<string, { unit: number; y: number; x: number }> = {
+		B: { unit: 0, y: 0, x: 10 },
+		M: { unit: 1, y: 10, x: 22 },
+		C: { unit: 2, y: 10, x: 9 },
 	};
-	const edge = (u: UnitView, s: string) => th.fg(u.lit ? u.tone : "dim", s);
-	const name = (u: UnitView) => (u.lit ? th.bold(th.fg(u.tone, center(u.name))) : th.fg("muted", center(u.name)));
-	const stat = (u: UnitView) => th.fg(u.lit ? u.tone : "dim", center(u.status));
-	const L = (s: string) => th.fg(link, s);
-	const sp = (n: number) => " ".repeat(n);
+	const byUnit = new Map<string, { key: string; d: number }[]>();
+	MAGI_SCREEN.forEach((row, y) =>
+		[...row].forEach((ch, x) => {
+			const e = entry[ch];
+			if (!e || SAFE_PIXELS.has(`${y},${x}`)) return;
+			const list = byUnit.get(ch) ?? [];
+			list.push({ key: `${y},${x}`, d: Math.hypot(y - e.y, x - e.x) + blockNoise(y, x) * 7 });
+			byUnit.set(ch, list);
+		}),
+	);
+	const order = new Map<string, number>();
+	for (const [ch, list] of byUnit) {
+		list.sort((a, b) => a.d - b.d);
+		list.forEach((p, i) => order.set(p.key, (entry[ch]!.unit + i / list.length) / 3));
+	}
+	return order;
+})();
+
+/** Pixel → 0..1 order in which blue takes it back, spreading from the safe corner. */
+const RECOVERY_ORDER: ReadonlyMap<string, number> = (() => {
+	const list: { key: string; d: number }[] = [];
+	MAGI_SCREEN.forEach((row, y) =>
+		[...row].forEach((ch, x) => {
+			if ("BCM".includes(ch)) list.push({ key: `${y},${x}`, d: Math.hypot(y - 19, x) + blockNoise(y, x) * 7 });
+		}),
+	);
+	list.sort((a, b) => a.d - b.d);
+	return new Map(list.map((p, i) => [p.key, i / list.length]));
+})();
+
+/** How far the attack went (0..1) and how far the recovery is (0..1); blink toggles the safe corner. */
+interface Virus {
+	infected: number;
+	recovered: number;
+	blink: boolean;
+}
 
-	return [
-		sp(10) + edge(top, "┌──────────┐") + sp(10),
-		sp(6) + L("╭───") + edge(top, "┤") + name(top) + edge(top, "├") + L("───╮") + sp(6),
-		sp(6) + L("│") + sp(3) + edge(top, "│") + stat(top) + edge(top, "│") + sp(3) + L("│") + sp(6),
-		sp(6) + L("│") + sp(3) + edge(top, "└──────────┘") + sp(3) + L("│") + sp(6),
-		" " + edge(left, "┌────") + L("┴") + edge(left, "─────┐") + sp(6) + edge(right, "┌─────") + L("┴") + edge(right, "────┐") + " ",
-		" " + edge(left, "│") + name(left) + edge(left, "│") + L(hub) + edge(right, "│") + name(right) + edge(right, "│") + " ",
-		" " + edge(left, "│") + stat(left) + edge(left, "│") + sp(6) + edge(right, "│") + stat(right) + edge(right, "│") + " ",
-		" " + edge(left, "└──────────┘") + sp(6) + edge(right, "└──────────┘") + " ",
+/**
+ * The MAGI screen with each unit's name and status: a lit unit is filled (blue, or its state's color),
+ * a dark one is dimmed; the wires and the hub stay orange. 32×10 cells.
+ */
+function magiDiagram(th: Theme, top: UnitView, left: UnitView, right: UnitView, hub: string, virus?: Virus): string[] {
+	const fill = (u: UnitView) => (!u.lit ? SCREEN_TEAL_DARK : u.tone === "accent" ? SCREEN_TEAL : th.getFgAnsi(u.tone));
+	const ink = (u: UnitView) => (u.lit ? SCREEN_INK : th.getFgAnsi("muted"));
+	const wire = th.getFgAnsi("accent");
+	const unit = (u: UnitView, row: number, name: number, status: number): ScreenLabel[] => [
+		{ row, center: name, text: u.name, fg: ink(u) },
+		{ row: row + 1, center: status, text: u.status, fg: ink(u) },
 	];
+	const paint: Record<string, string> = { B: fill(top), C: fill(left), M: fill(right), o: wire };
+	const at = (y: number, x: number) => {
+		const ch = MAGI_SCREEN[y]![x]!;
+		if (virus && ch !== "o" && ch !== ".") {
+			const key = `${y},${x}`;
+			// the last stronghold: it blinks only once everything else has fallen, until the recovery starts
+			if (SAFE_PIXELS.has(key)) return virus.infected >= 1 && virus.recovered <= 0 && virus.blink ? SCREEN_TEAL_DARK : SCREEN_TEAL;
+			if ((INFECTION_ORDER.get(key) ?? 1) < virus.infected && (RECOVERY_ORDER.get(key) ?? 0) >= virus.recovered) return SCREEN_RED;
+		}
+		return paint[ch];
+	};
+	return renderScreen(
+		10,
+		MAGI_DIAGRAM_WIDTH,
+		at,
+		[...unit(top, 2, 16, 16), ...unit(left, 7, 6, 6), ...unit(right, 7, 26, 26), { row: 7, center: 16, text: hub, fg: wire }],
+	);
 }
 
 /* ─────────────────────────────────────────────────────────── header ── */
 
 /** Static header: it scrolls away with the conversation, so nothing here animates. */
 function buildHeader(theme: Theme) {
-	const tree = renderTreeOfLife(theme);
-
 	return {
 		render(width: number): string[] {
 			const orange = (s: string) => theme.fg("accent", s);
-			const dim = (s: string) => theme.fg("dim", s);
-			const muted = (s: string) => theme.fg("muted", s);
-			const triad = MAGI_UNITS.map((u) => theme.fg("success", u)).join(dim(" · "));
-			const subtitle = "KETER → MALKUTH · 10 SEPHIROT · 22 PATHS";
-			const lore = "THE MAGI JUDGE · THE GOLEM ACTS · THE SEALS KEEP TIME";
-
-			// Narrow layout: a single identification line.
-			if (width < 44) {
-				return ["", orange(theme.bold("◆ MAGI")) + dim(" // ") + triad, ""].map((l) => truncateToWidth(l, width));
-			}
-
-			// Medium layout: tree on top, wordmark below.
-			if (width < 70) {
-				const lines = ["", ...tree, ""];
-				for (const l of MAGI_WORD) lines.push(orange(l));
-				lines.push(dim("├─ ") + triad + dim(" ─┤"), muted(subtitle), dim(lore), "");
-				return lines.map((l) => truncateToWidth(l, width));
-			}
-
-			// Wide layout: tree left, wordmark right (rows chosen to center the text block on the tree).
-			const [wordAt, triadAt] = [5, 12];
-			const lines = [""];
-			for (let i = 0; i < tree.length; i++) {
-				let right = "";
-				if (i >= wordAt && i < wordAt + MAGI_WORD.length) right = orange(MAGI_WORD[i - wordAt]!);
-				else if (i === triadAt) right = dim("├─ ") + triad + dim(" ─┤");
-				else if (i === triadAt + 1) right = muted(subtitle);
-				else if (i === triadAt + 2) right = dim(lore);
-				lines.push(truncateToWidth(tree[i]! + "    " + right, width));
+			const note = theme.fg("dim", "fan-art theme inspired by Neon Genesis Evangelion · all rights reserved to khara, Inc.");
+			const oneLine = MAGI_WORD.map((l, i) => l + "    " + SYSTEM_WORD[i]);
+			const stacked = [...MAGI_WORD, "", ...SYSTEM_WORD];
+			const word = width >= SEELE_WIDTH + 4 + oneLine[0]!.length ? oneLine : stacked;
+
+			let lines: string[];
+			if (width >= SEELE_WIDTH + 4 + word[0]!.length) {
+				// the seal on the left of the wordmark, both centered on the taller one
+				const h = Math.max(SEELE_LOGO.length, word.length);
+				const sealAt = Math.floor((h - SEELE_LOGO.length) / 2);
+				const wordAt = Math.floor((h - word.length) / 2);
+				lines = Array.from({ length: h }, (_, i) => {
+					const seal = (SEELE_LOGO[i - sealAt] ?? "").padEnd(SEELE_WIDTH);
+					const w = word[i - wordAt];
+					return theme.fg("text", seal) + (w ? "    " + orange(w) : "");
+				});
+			} else if (width >= SYSTEM_WORD[0]!.length) {
+				lines = stacked.map(orange);
+			} else {
+				lines = [orange(theme.bold("◆ MAGI SYSTEM"))];
 			}
-			lines.push("");
-			return lines;
+			return ["", ...lines, note, ""].map((l) => truncateToWidth(l, width));
 		},
 		invalidate() {},
 	};
@@ -485,6 +716,8 @@ const swap = {
 	state: "off" as SwapState,
 	since: 0, // when the current state started
 	loadMs: 0, // how long the last real load took
+	expectedLoadMs: LOAD_DEFAULT_MS, // how long this model took to load last time
+	infection: 0, // how far the red went when the model became ready (0 = it was already in VRAM)
 	error: "",
 	gpus: [] as GpuStat[],
 	ramUsed: 0,
@@ -583,15 +816,70 @@ async function refreshSwapActivity(): Promise<void> {
 	}
 }
 
+/** Context filled right now in llama-server's busy slot: prompt tokens placed so far plus the ones generated. */
+const live = { tokens: 0, at: 0 };
+const LIVE_POLL_MS = 500;
+const LIVE_STALE_MS = 2_000;
+
 /**
- * Makes sure the session model is in VRAM. Any request under /upstream/<model>/ makes llama-swap
- * load the model if needed, and it only answers once the model is ready.
+ * Reads the busy slot of the session model (llama-server /slots): n_prompt_tokens grows batch by batch
+ * while the prompt is processed, then token by token while the model thinks and answers.
+ * ponytail: with several slots it takes the fullest busy one, assuming it is this session's request.
  */
-async function preloadModel(ctx: ExtensionContext, model: Model<any> | undefined = ctx.model): Promise<void> {
+async function refreshLiveContext(): Promise<void> {
+	if (!swap.base || swap.state !== "ready") return;
+	try {
+		const slots = (await (await swapGet(`/upstream/${encodeURIComponent(swap.realId)}/slots`, 1_500)).json()) as any[];
+		const busy = slots.filter((s) => s.is_processing && s.n_prompt_tokens > 0);
+		if (!busy.length) return;
+		live.tokens = Math.max(...busy.map((s) => s.n_prompt_tokens));
+		live.at = Date.now();
+	} catch {
+		// the pi estimate stays
+	}
+}
+
+/** Context usage for the seals: live from the slot while the model works, pi's estimate otherwise. */
+function contextUsage(): { tokens: number | null; contextWindow: number; percent: number; live: boolean } | undefined {
+	const usage = liveCtx?.getContextUsage?.();
+	if (!usage) return undefined;
+	if (state.phase !== "idle" && usage.contextWindow && Date.now() - live.at < LIVE_STALE_MS) {
+		return { tokens: live.tokens, contextWindow: usage.contextWindow, percent: Math.min(100, (live.tokens / usage.contextWindow) * 100), live: true };
+	}
+	return { tokens: usage.tokens, contextWindow: usage.contextWindow, percent: usage.percent ?? 0, live: false };
+}
+
+/** id → the model llama-swap actually runs for it: an alias (e.g. "… - Instruct") runs another model. */
+async function swapAliases(): Promise<Map<string, string>> {
+	const aliases = new Map<string, string>();
+	try {
+		const { data } = (await (await swapGet("/v1/models")).json()) as { data?: any[] };
+		for (const m of data ?? []) {
+			const ls = m.meta?.llamaswap;
+			aliases.set(m.id, ls?.type === "alias" && ls.modelID ? ls.modelID : m.id);
+		}
+	} catch {
+		// ids stay as they are
+	}
+	return aliases;
+}
+
+/** Models llama-swap keeps in memory: real id → "ready" | "starting" | … (empty when the server is unreachable). */
+async function swapRunning(): Promise<Map<string, string>> {
+	try {
+		const { running } = (await (await swapGet("/running")).json()) as { running?: { model: string; state: string }[] };
+		return new Map((running ?? []).map((r) => [r.model, r.state]));
+	} catch {
+		return new Map();
+	}
+}
+
+/** Points the llama-swap monitor at the server behind `model`, without loading anything; false when llama-swap doesn't serve it. */
+async function connectSwap(ctx: ExtensionContext, model: Model<any> | undefined): Promise<boolean> {
 	if (!model || model.provider !== "llama-swap" || !model.baseUrl) {
 		swap.base = "";
 		setSwapState("off");
-		return;
+		return false;
 	}
 	const id = model.id;
 	swap.modelId = id;
@@ -605,14 +893,27 @@ async function preloadModel(ctx: ExtensionContext, model: Model<any> | undefined
 	};
 	void refreshSwapMetrics();
 	void refreshSwapActivity();
-	// an alias (e.g. "… - Instruct") runs another model: /running lists that one
-	try {
-		const { data } = (await (await swapGet("/v1/models")).json()) as { data?: any[] };
-		const entry = data?.find((m) => m.id === id);
-		if (entry?.meta?.llamaswap?.type === "alias" && entry.meta.llamaswap.modelID) swap.realId = entry.meta.llamaswap.modelID;
-	} catch {
-		// keep the id itself
-	}
+	const aliases = await swapAliases();
+	if (swap.modelId !== id) return true;
+	swap.realId = aliases.get(id) ?? id;
+	return true;
+}
+
+/** Shows whether the session model is already in VRAM or asleep, without loading it: typing wakes it. */
+async function probeModel(ctx: ExtensionContext, model: Model<any> | undefined = ctx.model): Promise<void> {
+	if (!(await connectSwap(ctx, model))) return;
+	const state = (await swapRunning()).get(swap.realId);
+	if (swap.modelId === model!.id) setSwapState(state === "ready" ? "ready" : "asleep");
+}
+
+/**
+ * Makes sure the session model is in VRAM. Any request under /upstream/<model>/ makes llama-swap
+ * load the model if needed, and it only answers once the model is ready.
+ */
+async function preloadModel(ctx: ExtensionContext, model: Model<any> | undefined = ctx.model): Promise<void> {
+	if (!(await connectSwap(ctx, model))) return;
+	const id = model!.id;
+	swap.expectedLoadMs = loadMagiConfig().loads?.[swap.realId] ?? LOAD_DEFAULT_MS;
 
 	// no answer within 400ms → the model isn't in VRAM and is being loaded
 	const slow = setTimeout(() => {
@@ -623,8 +924,15 @@ async function preloadModel(ctx: ExtensionContext, model: Model<any> | undefined
 		const res = await swapGet(`/upstream/${encodeURIComponent(id)}/health`, 15 * 60_000);
 		if (swap.modelId !== id) return; // the model changed meanwhile
 		if (!res.ok) throw new Error(`HTTP ${res.status}`);
-		if (swap.state === "loading") swap.loadMs = Date.now() - started;
+		const loaded = swap.state === "loading";
+		if (loaded) {
+			swap.loadMs = Date.now() - started;
+			swap.infection = Math.min(1, swap.loadMs / swap.expectedLoadMs);
+			const cfg = loadMagiConfig();
+			saveMagiConfig({ ...cfg, loads: { ...cfg.loads, [swap.realId]: swap.loadMs } });
+		} else swap.infection = 0;
 		setSwapState("ready");
+		if (!ctx.sessionManager.getBranch().some((e) => e.type === "message")) void prewarmPrefix(ctx.cwd);
 	} catch (err) {
 		if (swap.modelId === id) setSwapState("error", err instanceof Error ? err.message : String(err));
 	} finally {
@@ -633,6 +941,77 @@ async function preloadModel(ctx: ExtensionContext, model: Model<any> | undefined
 	}
 }
 
+/* ── prefix prewarm: a new session's system prompt and tools are processed before its first message ── */
+
+/**
+ * ~/.pi/agent/magi-prefix.json: "<project dir>\n<model id>" → the request body every new session shares
+ * (the system message, tools and request options of pi's last real request), so the prewarmed text is identical.
+ */
+const PREFIX_STORE_PATH = join(homedir(), ".pi", "agent", "magi-prefix.json");
+
+const prewarm = { state: "" as "" | "running" | "done", tokens: 0, ms: 0, abort: undefined as AbortController | undefined };
+let prefixMemo = "";
+
+function loadPrefixStore(): Record<string, any> {
+	try {
+		return JSON.parse(readFileSync(PREFIX_STORE_PATH, "utf8"));
+	} catch {
+		return {};
+	}
+}
+
+/** Keeps the shared part of pi's real llama-swap request; written only when it changes (new tools, another thinking level…). */
+function rememberPrefix(cwd: string, payload: any): void {
+	if (!swap.base || payload?.model !== swap.modelId || payload.messages?.[0]?.role !== "system") return;
+	const { stream, stream_options, max_tokens, max_completion_tokens, messages, ...options } = payload;
+	const body = { ...options, messages: [messages[0]] };
+	const json = JSON.stringify(body);
+	if (json === prefixMemo) return;
+	prefixMemo = json;
+	const store = loadPrefixStore();
+	store[`${cwd}\n${payload.model}`] = body;
+	writeFileSync(PREFIX_STORE_PATH, JSON.stringify(store));
+}
+
+/**
+ * Processes the stored prefix so llama-server checkpoints the state exactly where a new session's prompt diverges:
+ * the first message then costs its own tokens (seconds) instead of the whole system prompt and tools (~80s cold).
+ * ponytail: cuts at the ChatML user marker (Qwen and most llama.cpp templates); other templates are skipped.
+ */
+async function prewarmPrefix(cwd: string): Promise<void> {
+	const body = loadPrefixStore()[`${cwd}\n${swap.modelId}`];
+	if (!body || prewarm.state === "running") return;
+	const abort = new AbortController();
+	prewarm.abort = abort;
+	prewarm.state = "running";
+	const started = Date.now();
+	const post = async (path: string, json: unknown): Promise<any> =>
+		(
+			await fetch(`${swap.base}/upstream/${encodeURIComponent(swap.realId)}${path}`, {
+				method: "POST",
+				headers: { ...swap.headers, "Content-Type": "application/json" },
+				body: JSON.stringify(json),
+				signal: abort.signal,
+			})
+		).json();
+	try {
+		// the template renders only with a user turn: the prefix ends where that turn starts
+		const { prompt } = await post("/apply-template", { ...body, messages: [...body.messages, { role: "user", content: "." }] });
+		const cut = typeof prompt === "string" ? prompt.indexOf("<|im_start|>user") : -1;
+		if (cut <= 0) {
+			prewarm.state = "";
+			return;
+		}
+		const { timings } = await post("/completion", { prompt: prompt.slice(0, cut), n_predict: 1, cache_prompt: true });
+		prewarm.tokens = (timings?.prompt_n ?? 0) + (timings?.cache_n ?? 0);
+		prewarm.ms = Date.now() - started;
+		prewarm.state = "done";
+	} catch {
+		// aborted by the first message, or the server went away
+		prewarm.state = "";
+	}
+}
+
 /* ── /magi-ui status: a report built from the last requests llama-swap recorded ── */
 
 interface ActivityRow {
@@ -809,40 +1188,44 @@ class MagiPanel implements Component {
 		} else {
 			let word: string;
 			let tone: ThemeColor;
-			let link: ThemeColor = "dim";
 			let hub = "─MAGI─";
 			let lit = (i: number) => flicker(f, i);
+			let virus: Virus | undefined;
 			const breathing = ["─MAGI─", "━MAGI━"][f % 2]!;
 
 			if (state.compacting) {
 				title = `COMPACTING · ${state.compactBy || "context"} · ${secs(state.compactSince)}`;
-				[word, tone, link, hub, titleTone] = ["COMPACTING", "warning", "warning", ["─SEAL─", "━SEAL━"][f % 2]!, "warning"];
+				[word, tone, hub, titleTone] = ["COMPACTING", "warning", ["─SEAL─", "━SEAL━"][f % 2]!, "warning"];
 			} else if (now - state.rebornAt < REBIRTH_MS) {
 				title = "SEVENTH SEAL OPENED";
-				[word, tone, link, hub, titleTone] = ["REBORN", "success", "success", "═MAGI═", "success"];
+				[word, tone, hub, titleTone] = ["REBORN", "success", "═MAGI═", "success"];
 				lit = () => true;
 			} else if (idle && (swap.state === "checking" || swap.state === "loading")) {
 				title = swap.state === "loading" ? `LOADING MODEL · ${secs(swap.since)}` : "CHECKING MODEL";
-				[word, tone, link, hub, titleTone] = ["LOADING", "warning", "warning", breathing, "warning"];
+				[word, tone, hub, titleTone] = ["LOADING", "accent", breathing, "warning"];
+				lit = () => true;
+				if (swap.state === "loading")
+					virus = { infected: Math.min(1, (now - swap.since) / swap.expectedLoadMs), recovered: 0, blink: f % 4 < 2 };
 			} else if (idle && swap.state === "error") {
 				title = "MAGI OFFLINE";
-				[word, tone, link, hub, titleTone] = ["OFFLINE", "error", "error", "─ ╳ ──", "error"];
+				[word, tone, hub, titleTone] = ["OFFLINE", "error", "─ ╳ ──", "error"];
 				lit = () => f % 16 < 8;
 			} else if (idle && swap.state === "asleep") {
 				title = "MODEL ASLEEP · type to wake";
 				[word, tone, titleTone] = ["ASLEEP", "muted", "muted"];
 				lit = () => false;
-			} else if (idle && swap.state === "ready" && now - swap.since < 3000) {
+			} else if (idle && swap.state === "ready" && now - swap.since < ONLINE_MS) {
 				title = swap.loadMs ? `MAGI ONLINE · ${fmtMs(swap.loadMs)}` : "MAGI ONLINE";
-				[word, tone, link, hub, titleTone] = ["ONLINE", "success", "success", "═MAGI═", "success"];
+				[word, tone, hub, titleTone] = ["ONLINE", "accent", "═MAGI═", "success"];
 				lit = () => true;
+				virus = { infected: swap.infection, recovered: (now - swap.since) / RECOVER_MS, blink: f % 4 < 2 };
 			} else if (state.phase === "thinking") {
 				title = `THINKING · ${secs(state.phaseSince)}`;
-				[word, tone, link, hub] = ["THINKING", "accent", "accent", breathing];
+				[word, tone, hub] = ["THINKING", "accent", breathing];
 			} else if (state.phase === "responding") {
 				const tps = liveTps();
 				title = `RESPONDING${tps ? ` · ${tps.toFixed(1)} tok/s` : ""}`;
-				[word, tone, link, hub, titleTone] = ["RESPONDING", "success", "success", breathing, "success"];
+				[word, tone, hub, titleTone] = ["RESPONDING", "success", breathing, "success"];
 			} else {
 				title = "STANDBY";
 				[word, tone, titleTone] = ["STANDBY", "muted", "muted"];
@@ -850,7 +1233,7 @@ class MagiPanel implements Component {
 			}
 
 			const units = MAGI_UNITS.map((name, i) => ({ name, status: word, tone, lit: lit(i) }));
-			body = magiDiagram(th, units[1]!, units[2]!, units[0]!, link, hub);
+			body = magiDiagram(th, units[1]!, units[2]!, units[0]!, hub, virus);
 			const c = state.lastCouncil;
 			status = c
 				? `${pulse} ${th.fg("dim", "COUNCIL ")}${th.fg(voteTone(c.verdict), `${c.verdict ?? "NO QUORUM"} ${c.tally}/3`)}`
@@ -911,9 +1294,10 @@ class MagiPanel implements Component {
 		);
 
 		// SEALS: the context window, one seal per seventh
-		const usage = liveCtx?.getContextUsage?.();
+		const usage = contextUsage();
 		const percent = usage?.percent ?? 0;
-		out.push(this.frameLine(` ${th.fg("dim", "SEALS".padEnd(9))}${renderSeals(th, percent)} ${th.fg(usageTone(percent), `${percent.toFixed(0)}%`)}`, inner));
+		const liveMark = usage?.live ? th.fg("accent", " ▲ live") : "";
+		out.push(this.frameLine(` ${th.fg("dim", "SEALS".padEnd(9))}${renderSeals(th, percent)} ${th.fg(usageTone(percent), `${percent.toFixed(0)}%`)}${liveMark}`, inner));
 		if (!compact && usage?.contextWindow) {
 			out.push(this.field("CONTEXT", `${usage.tokens == null ? "?" : fmtTokens(usage.tokens)} / ${fmtTokens(usage.contextWindow)}`, inner, "muted"));
 		}
@@ -968,7 +1352,13 @@ class MagiPanel implements Component {
 						? th.fg("error", "OFFLINE")
 						: th.fg("warning", swap.state === "loading" ? `LOADING ${secsSince(swap.since)}s` : "CHECKING");
 		const load = swap.state === "ready" && swap.loadMs ? th.fg("dim", ` load ${fmtMs(swap.loadMs)}`) : "";
-		out.push(this.frameLine(` ${th.fg("dim", "STATUS".padEnd(9))}${st}${load}`, inner));
+		const warm =
+			prewarm.state === "running"
+				? th.fg("warning", " · PREWARM")
+				: prewarm.state === "done"
+					? th.fg("dim", ` · ${fmtTokens(prewarm.tokens)} warm`)
+					: "";
+		out.push(this.frameLine(` ${th.fg("dim", "STATUS".padEnd(9))}${st}${load}${warm}`, inner));
 		if (compact) return [...out, this.costRow(inner)];
 		if (swap.state === "error") out.push(this.frameLine(" " + th.fg("error", swap.error), inner));
 		const gib = (n: number) => n / 2 ** 30;
@@ -1094,7 +1484,10 @@ interface MagiUnitConfig {
 	model?: string;
 	thinking?: string;
 }
-type MagiConfig = Partial<Record<MagiUnit, MagiUnitConfig>> & { ui?: { compact?: boolean; kwhPrice?: number; currency?: Currency } };
+type MagiConfig = Partial<Record<MagiUnit, MagiUnitConfig>> & {
+	ui?: { compact?: boolean; kwhPrice?: number; currency?: Currency };
+	loads?: Record<string, number>; // real model id → ms its last load took
+};
 
 const MAGI_CONFIG_PATH = join(homedir(), ".pi", "agent", "magi.json");
 
@@ -1280,10 +1673,9 @@ function buildDeliberationView(
 				return { name, status: o.vote === "CONDITIONAL" ? "COND." : o.vote, tone: voteTone(o.vote), lit: true };
 			});
 			const { verdict, tally } = tallyVerdict(opinions.map((o) => o?.vote ?? null));
-			const link: ThemeColor = done ? voteTone(verdict) : "accent";
 			const hub = done ? "◆MAGI◆" : ["─MAGI─", "━MAGI━"][tick % 2]!;
 			const left = " ".repeat(Math.max(0, Math.floor((inner - MAGI_DIAGRAM_WIDTH) / 2)));
-			for (const l of magiDiagram(theme, units[1]!, units[2]!, units[0]!, link, hub)) out.push(row(left + l));
+			for (const l of magiDiagram(theme, units[1]!, units[2]!, units[0]!, hub)) out.push(row(left + l));
 
 			out.push(row(""));
 			for (let i = 0; i < MAGI.length; i++) {
@@ -1336,6 +1728,73 @@ function buildReportView(theme: Theme, lines: string[], close: () => void) {
 	};
 }
 
+interface MechaEntry {
+	model: Model<any>;
+	unit: MechaUnit;
+	state: MechaState;
+}
+
+/** MECHA SELECT: the model picker of a new session. The highlighted unit's head is animated by its real state in llama-swap. */
+function buildMechaPicker(tui: TUI, theme: Theme, entries: MechaEntry[], start: number, close: (picked: MechaEntry | undefined) => void) {
+	let frame = 0;
+	let index = start;
+	const timer = setInterval(() => {
+		frame++;
+		tui.requestRender();
+	}, 125);
+	const nameWidth = Math.max(...entries.map((e) => visibleWidth(e.model.id)));
+
+	return {
+		render(width: number): string[] {
+			const dim = (s: string) => theme.fg("dim", s);
+			const inner = Math.max(40, Math.min(width - 2, 96));
+			const row = (s: string) => {
+				const t = truncateToWidth(s, inner);
+				return theme.fg("accent", "║") + t + " ".repeat(Math.max(0, inner - visibleWidth(t))) + theme.fg("accent", "║");
+			};
+			const sel = entries[index]!;
+			const head = renderMechaHead(sel.unit, sel.state, frame);
+			const list = entries.map((e, i) => {
+				const u = MECHA[e.unit];
+				const mark = i === index ? theme.fg("accent", "▸ ") : "  ";
+				const unit = rgb(e.state === "dormant" ? shade(u.armor, 0.6) : u.armor, u.name.padEnd(10));
+				const name = i === index ? theme.bold(theme.fg("text", e.model.id)) : theme.fg("muted", e.model.id);
+				const status =
+					e.state === "active" ? theme.fg("success", "● IN VRAM") : e.state === "waking" ? theme.fg("warning", "◌ WAKING") : dim("○ dormant");
+				return mark + unit + name + " ".repeat(nameWidth - visibleWidth(e.model.id) + 2) + status;
+			});
+			const u = MECHA[sel.unit];
+			const sync =
+				sel.state === "active"
+					? theme.fg("success", `${u.name} · SYNC READY · no wait`)
+					: sel.state === "waking"
+						? theme.fg("warning", `${u.name} · LIFT OFF`)
+						: theme.fg("muted", `${u.name} · DORMANT · it will be loaded into VRAM`);
+
+			const out = [
+				theme.fg("accent", "╔" + "═".repeat(inner) + "╗"),
+				row(theme.bold(theme.fg("accent", " MECHA SELECT")) + dim(" :: choose the unit to activate")),
+				theme.fg("accent", "╟" + "─".repeat(inner) + "╢"),
+			];
+			for (let r = 0; r < Math.max(head.length, list.length); r++) out.push(row(` ${head[r] ?? " ".repeat(13)}  ${list[r] ?? ""}`));
+			out.push(theme.fg("accent", "╟" + "─".repeat(inner) + "╢"), row(" " + sync), theme.fg("accent", "╚" + "═".repeat(inner) + "╝"));
+			out.push(dim(" ↑↓ select · enter: activate · esc: keep the current model, it loads when you type"));
+			return out.map((l) => truncateToWidth(l, width));
+		},
+		handleInput(data: string) {
+			if (matchesKey(data, "up")) index = (index + entries.length - 1) % entries.length;
+			else if (matchesKey(data, "down")) index = (index + 1) % entries.length;
+			else if (matchesKey(data, "enter")) close(entries[index]);
+			else if (matchesKey(data, "escape")) close(undefined);
+			tui.requestRender();
+		},
+		invalidate() {},
+		dispose() {
+			clearInterval(timer);
+		},
+	};
+}
+
 async function configureMagi(ctx: ExtensionContext): Promise<void> {
 	const cfg = loadMagiConfig();
 	const pool = ctx.scopedModels.length ? ctx.scopedModels.map((s) => s.model) : ctx.modelRegistry.getAvailable();
@@ -1442,7 +1901,7 @@ function footerLeft(th: Theme, now = Date.now()): string {
 			dim(` · loading model into VRAM ${secsSince(swap.since, now)}s`)
 		);
 	}
-	const percent = liveCtx?.getContextUsage?.()?.percent ?? 0;
+	const percent = contextUsage()?.percent ?? 0;
 	if (percent >= SIXTH_SEAL_PERCENT) {
 		const cmd = state.hasSmartCompact ? "/smart-compact" : "/compact";
 		return (
@@ -1613,10 +2072,47 @@ export default function (pi: ExtensionAPI) {
 	let unsubscribeInput: (() => void) | undefined;
 	let lastPoll = 0;
 	let titleTimer: ReturnType<typeof setInterval> | undefined;
+	let liveTimer: ReturnType<typeof setInterval> | undefined;
 	/** Tools currently executing, by call id: the golem shows one of them, and leaves when none is left. */
 	const runningTools = new Map<string, { name: string; target: string }>();
 
-	pi.on("session_start", async (_event, ctx) => {
+	/** The picker has the keyboard: keys pressed there must not wake the default model. */
+	let pickerOpen = false;
+
+	/** MECHA SELECT on a new llama-swap session: nothing goes into VRAM until a unit is chosen. */
+	const pickModel = async (ctx: ExtensionContext) => {
+		const current = ctx.model!;
+		const models = ctx.modelRegistry.getAvailable().filter((m) => m.provider === "llama-swap");
+		if (models.length < 2) return;
+		pickerOpen = true;
+		try {
+			const [aliases, running] = await Promise.all([swapAliases(), swapRunning()]);
+			const realOf = (m: Model<any>) => aliases.get(m.id) ?? m.id;
+			const units = mechaUnitsOf(ctx, aliases);
+			const rank: MechaUnit[] = ["I", "II", "III", "LEGION"];
+			const entries: MechaEntry[] = models
+				.map((model) => {
+					const st = running.get(realOf(model));
+					const mechaState: MechaState = st === "ready" ? "active" : st === "starting" ? "waking" : "dormant";
+					return { model, unit: units.get(realOf(model))!, state: mechaState };
+				})
+				.sort((a, b) => rank.indexOf(a.unit) - rank.indexOf(b.unit));
+			// the session's model if it is in VRAM, else any unit already in VRAM (no wait), else the session's model
+			const own = entries.findIndex((e) => e.model.id === current.id);
+			let start = entries[own]?.state === "active" ? own : entries.findIndex((e) => e.state === "active");
+			if (start < 0) start = Math.max(0, own);
+
+			const picked = await ctx.ui.custom<MechaEntry | undefined>((tui, theme, _keys, done) => buildMechaPicker(tui, theme, entries, start, done));
+			if (!picked) return;
+			// same model: pi emits no model_select, so load it here
+			if (picked.model.id === current.id) return void preloadModel(ctx, picked.model);
+			if (!(await pi.setModel(picked.model))) ctx.ui.notify(`${picked.model.id}: no credentials for llama-swap`, "error");
+		} finally {
+			pickerOpen = false;
+		}
+	};
+
+	pi.on("session_start", async (event, ctx) => {
 		liveCtx = ctx;
 		recountSession(ctx);
 		state.hasSmartCompact = pi.getCommands().some((c) => c.name.replace(/^\//, "") === "smart-compact");
@@ -1626,8 +2122,9 @@ export default function (pi: ExtensionAPI) {
 		ui.currency = cfg.ui?.currency === "USD" ? "USD" : "EUR";
 		if (ctx.mode !== "tui") return;
 		applyChrome(ctx);
-		// load the model into VRAM now (animated in the panel and footer)
-		void preloadModel(ctx);
+		// nothing is loaded at startup: a new session picks its MECHA unit, a resumed one shows whether its model is in VRAM
+		const fresh = event.reason === "new" || (event.reason === "startup" && !ctx.sessionManager.getBranch().some((e) => e.type === "message"));
+		void probeModel(ctx).then(() => (fresh && chrome && swap.base ? pickModel(ctx) : undefined));
 		// GPU stats every 3s while something happens, every 30s when idle
 		metricsTimer ??= setInterval(() => {
 			const now = Date.now();
@@ -1638,13 +2135,18 @@ export default function (pi: ExtensionAPI) {
 				.then(repaint);
 		}, BUSY_POLL_MS);
 		metricsTimer.unref?.();
+		// the seals follow the context live while the model works
+		liveTimer ??= setInterval(() => {
+			if (state.phase !== "idle") void refreshLiveContext().then(repaint);
+		}, LIVE_POLL_MS);
+		liveTimer.unref?.();
 		// back at the keyboard: clear the ✓ from the title, wake a model llama-swap unloaded
 		unsubscribeInput ??= ctx.ui.onTerminalInput(() => {
 			if (titleDone) {
 				titleDone = false;
 				ctx.ui.setTitle(windowTitle(ctx.cwd));
 			}
-			if (swap.state === "asleep" && liveCtx) void preloadModel(liveCtx);
+			if (swap.state === "asleep" && liveCtx && !pickerOpen) void preloadModel(liveCtx);
 			return undefined;
 		});
 		// ponytail: re-applies the title every 2s because pi overwrites it without telling extensions
@@ -1660,18 +2162,25 @@ export default function (pi: ExtensionAPI) {
 		repaint();
 	});
 
+	pi.on("before_provider_request", (event, ctx) => {
+		rememberPrefix(ctx.cwd, event.payload);
+	});
+
 	pi.on("model_select", async (event, ctx) => {
 		liveCtx = ctx;
 		if (ctx.mode === "tui") void preloadModel(ctx, event.model);
 	});
 
 	pi.on("session_shutdown", async () => {
+		prewarm.abort?.abort();
 		clearInterval(metricsTimer);
 		metricsTimer = undefined;
 		unsubscribeInput?.();
 		unsubscribeInput = undefined;
 		clearInterval(titleTimer);
 		titleTimer = undefined;
+		clearInterval(liveTimer);
+		liveTimer = undefined;
 		hidePanel();
 	});
 
@@ -1681,6 +2190,7 @@ export default function (pi: ExtensionAPI) {
 
 	pi.on("turn_start", async (_event, ctx) => {
 		liveCtx = ctx;
+		prewarm.abort?.abort();
 		state.turns++;
 		setPhase("thinking");
 		if (ctx.mode === "tui" && chrome) ctx.ui.setWorkingMessage("the MAGI deliberate…");
@@ -1855,10 +2365,15 @@ export default function (pi: ExtensionAPI) {
 	}
 
 	pi.registerCommand("magi", {
-		description: "Ask the three MAGI (pragmatist, guardian, visionary); /magi review [focus] judges the git diff; /magi config assigns models",
+		description: "Ask the three MAGI (pragmatist, guardian, visionary); /magi review [focus] judges the git diff; /magi config assigns models; /magi mecha picks the model",
 		handler: async (args, ctx) => {
 			const arg = args.trim();
 			if (arg === "config") return configureMagi(ctx);
+			if (arg === "mecha") {
+				if (ctx.mode !== "tui" || !swap.base) return ctx.ui.notify("MECHA SELECT needs the TUI and a llama-swap model", "error");
+				liveCtx = ctx;
+				return pickModel(ctx);
+			}
 
 			if (arg === "review" || arg.startsWith("review ")) {
 				const focus = arg.slice("review".length).trim();

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "pi-magi-theme",
-  "version": "0.1.4",
-  "description": "MAGI theme + extension for pi: Tree of Life header, three-model /magi council, golem tool animations, seven-seal context gauge, llama-swap telemetry",
+  "version": "0.2.1",
+  "description": "MAGI SYSTEM theme + extension for pi (Evangelion fan art): MAGI control screen panel, three-model /magi council, MECHA SELECT model picker, angel-attack loading, seven-seal context gauge, llama-swap telemetry",
   "keywords": [
     "pi-package",
     "pi-extension",
     "pi-theme",
     "pi",
     "magi",
-    "tree-of-life",
+    "evangelion",
     "llama-swap"
   ],
   "author": "b-iurea",