ai: redesign /ai surface as Mission Console

Replaces the conventional chat aesthetic on /ai with a brutalist-mono
operator deck. The page now reads as a flight recorder — turn numbers
in the gutter, hairline rules, sodium-amber phosphor primary on
deep-ink ground, vim-style modeline at the foot.

Type system is the design's load-bearing element:
- JetBrains Mono for everything system-y (operator lines, signatures,
  modeline, session ids, tool calls)
- Newsreader serif for the agent's prose only — the synthesis voice
  literally lifts off the page in a different family from the machine
  voice. Operator and agent are typographically inseparable from their
  speaker.

Layout changes:
- Sticky session header with a giant base36 session id ("3K9P · A4C2")
  and a metadata strip showing agent, model, turn count, status. The
  status pill flips colour: AMBER on stream, ROSE on awaiting confirm,
  MINT on ready, MUTED on mock.
- Empty state is no longer the apologetic "How can I help you today?".
  It's "ATLAS. standing by." in oversize mono with the agent name in
  italic serif amber, a hairline divider, and a single one-liner
  instruction prefixed with ›. Lines stagger in via animation-delay.
- Operator turns: monospace, 14px, sodium-amber › prompt, no bubble.
  Hangs from a left gutter with T01/T02… turn number + UTC timestamp.
- Agent turns: serif, 17px/1.55, with a tiny mono signature underneath
  ("atlas» 03:14:08Z · recv"). Cyan accent column instead of amber.
- Composer: terminal frame (square, 1px border, focus ring is amber
  glow). Internal ›_ prompt mark in front of the textarea, mono input.
- Bottom modeline: utc clock + turn count + estimated tokens on the
  left, keyboard hints on the right. Streaming flips the right side
  to a pulsing phosphor bar + STREAM label.

Atmosphere details:
- 2px scanline overlay (very faint, 1.2% opacity)
- Corner phosphor blooms (amber top-right, cyan bottom-left)
- Inline SVG turbulence grain (3.5% opacity) over the whole theme
- Cursor blink animation on the prompt mark
- Consolas-tier ligatures on the mono via JetBrains Mono ss01/calt

All theming scoped via [data-theme="console"] — picks up automatically
because /ai's AppShell now passes theme="console". Other routes are
untouched. Tool-call cards from @crema/agent-ui inherit the palette
via overridden CSS variables (--card, --border, --primary, etc) plus
a [data-slot="tool-call-card"] override for the frame.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/themes/console.css

@@ -0,0 +1,355 @@
+/* ============================================================================
+ * Theme: console
+ *
+ * Mission-control operator surface for the /ai route. Phosphor-amber on a
+ * deep-ink ground; everything system-y is monospace, the agent's prose
+ * lifts into a literary serif. The whole thing is intentionally sparse and
+ * dense at once — vertical rules, hairline borders, turn numbers in the
+ * gutter, a vim-style modeline at the foot of the page.
+ *
+ * Scoped to [data-theme="console"]. Do not import unscoped — would clash
+ * with skyrise / vibespace tokens.
+ * ============================================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap");
+
+[data-theme="console"] {
+  /* ── Palette ─────────────────────────────────────────────────────────── */
+  --console-ink: oklch(0.13 0.02 240);              /* page ground */
+  --console-deck: oklch(0.16 0.02 240);             /* primary surface */
+  --console-deck-2: oklch(0.20 0.02 240);           /* raised surface */
+  --console-rule: oklch(0.30 0.04 240);             /* hairline */
+  --console-rule-soft: oklch(0.22 0.02 240);
+  --console-text: oklch(0.93 0.01 80);              /* warm off-white */
+  --console-text-2: oklch(0.78 0.02 80);
+  --console-muted: oklch(0.55 0.02 80);
+  --console-muted-2: oklch(0.42 0.02 80);
+
+  --console-amber: oklch(0.81 0.16 65);             /* phosphor — operator */
+  --console-amber-deep: oklch(0.65 0.16 55);
+  --console-cyan: oklch(0.78 0.12 205);             /* cool — agent */
+  --console-cyan-deep: oklch(0.55 0.10 205);
+  --console-rose: oklch(0.66 0.21 12);              /* destructive */
+  --console-mint: oklch(0.78 0.14 155);             /* ok / success */
+
+  /* ── Typography ──────────────────────────────────────────────────────── */
+  --console-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --console-font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
+
+  /* Override theme tokens consumed by AppShell + lib components, so even
+   * pieces we don't restyle inherit the console palette. */
+  --background: var(--console-ink);
+  --foreground: var(--console-text);
+  --card: var(--console-deck);
+  --card-foreground: var(--console-text);
+  --popover: var(--console-deck-2);
+  --popover-foreground: var(--console-text);
+  --primary: var(--console-amber);
+  --primary-foreground: var(--console-ink);
+  --secondary: var(--console-deck-2);
+  --secondary-foreground: var(--console-text);
+  --muted: var(--console-deck-2);
+  --muted-foreground: var(--console-muted);
+  --accent: var(--console-deck-2);
+  --accent-foreground: var(--console-text);
+  --destructive: var(--console-rose);
+  --destructive-foreground: var(--console-text);
+  --border: var(--console-rule-soft);
+  --input: var(--console-rule);
+  --ring: var(--console-amber);
+
+  --font-sans: var(--console-font-mono);
+  --font-heading: var(--console-font-mono);
+  --font-ai-prose: var(--console-font-serif);
+
+  color-scheme: dark;
+}
+
+/* ── Page atmosphere ───────────────────────────────────────────────────── */
+[data-theme="console"] {
+  background:
+    /* faint scanline */
+    repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0) 2px,
+      rgba(255, 255, 255, 0.012) 2px,
+      rgba(255, 255, 255, 0.012) 3px
+    ),
+    /* corner phosphor bloom */
+    radial-gradient(
+      1200px 800px at 100% 0%,
+      oklch(0.81 0.16 65 / 0.05),
+      transparent 60%
+    ),
+    radial-gradient(
+      900px 700px at 0% 100%,
+      oklch(0.55 0.10 205 / 0.04),
+      transparent 60%
+    ),
+    var(--console-ink);
+}
+
+/* Grain — single SVG turbulence, low opacity. Doesn't ship as an asset. */
+[data-theme="console"]::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.035;
+  z-index: 1;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+  mix-blend-mode: overlay;
+}
+
+/* ── Console primitives ────────────────────────────────────────────────── */
+
+[data-theme="console"] .console-mono {
+  font-family: var(--console-font-mono);
+  font-feature-settings: "ss01", "ss02", "calt", "cv01";
+}
+[data-theme="console"] .console-serif {
+  font-family: var(--console-font-serif);
+  font-feature-settings: "ss01", "kern";
+}
+
+/* Turn-number gutter label */
+[data-theme="console"] .console-turn-num {
+  font-family: var(--console-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--console-muted-2);
+}
+
+/* Hairline rule */
+[data-theme="console"] .console-rule {
+  border-color: var(--console-rule-soft);
+}
+
+/* Operator badge — sodium amber */
+[data-theme="console"] .console-pill-amber {
+  background: oklch(0.81 0.16 65 / 0.10);
+  color: var(--console-amber);
+  border: 1px solid oklch(0.81 0.16 65 / 0.30);
+}
+[data-theme="console"] .console-pill-cyan {
+  background: oklch(0.78 0.12 205 / 0.10);
+  color: var(--console-cyan);
+  border: 1px solid oklch(0.78 0.12 205 / 0.30);
+}
+[data-theme="console"] .console-pill-mint {
+  background: oklch(0.78 0.14 155 / 0.10);
+  color: var(--console-mint);
+  border: 1px solid oklch(0.78 0.14 155 / 0.30);
+}
+[data-theme="console"] .console-pill-rose {
+  background: oklch(0.66 0.21 12 / 0.12);
+  color: var(--console-rose);
+  border: 1px solid oklch(0.66 0.21 12 / 0.30);
+}
+
+/* Vertical rule that runs the length of the transcript */
+[data-theme="console"] .console-spine {
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    var(--console-rule) 8%,
+    var(--console-rule) 92%,
+    transparent 100%
+  );
+}
+
+/* Composer prompt cursor */
+@keyframes consoleBlink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+[data-theme="console"] .console-cursor {
+  display: inline-block;
+  width: 0.5ch;
+  height: 1.1em;
+  background: var(--console-amber);
+  vertical-align: text-bottom;
+  margin-left: 1px;
+  animation: consoleBlink 1.05s step-end infinite;
+}
+
+/* Empty-state oversize text — letter-spacing tracking is the whole point */
+[data-theme="console"] .console-empty-headline {
+  font-family: var(--console-font-mono);
+  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 0.95;
+  color: var(--console-text);
+}
+
+[data-theme="console"] .console-empty-headline em {
+  font-family: var(--console-font-serif);
+  font-style: italic;
+  font-weight: 500;
+  color: var(--console-amber);
+  letter-spacing: -0.01em;
+}
+
+/* Stagger the empty-state lines on first paint. */
+@keyframes consoleEmptyIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+[data-theme="console"] .console-empty-line {
+  opacity: 0;
+  animation: consoleEmptyIn 600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+[data-theme="console"] .console-empty-line:nth-child(1) { animation-delay: 0ms; }
+[data-theme="console"] .console-empty-line:nth-child(2) { animation-delay: 90ms; }
+[data-theme="console"] .console-empty-line:nth-child(3) { animation-delay: 180ms; }
+[data-theme="console"] .console-empty-line:nth-child(4) { animation-delay: 280ms; }
+
+/* Modeline (status bar at the foot) */
+[data-theme="console"] .console-modeline {
+  font-family: var(--console-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--console-muted);
+  border-top: 1px solid var(--console-rule-soft);
+  background: linear-gradient(to bottom, transparent, oklch(0.13 0.02 240 / 0.6));
+}
+[data-theme="console"] .console-modeline-key {
+  color: var(--console-muted-2);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-right: 0.4ch;
+}
+[data-theme="console"] .console-modeline-val {
+  color: var(--console-text-2);
+}
+
+/* Operator-row — monospace, tight, with an accent column */
+[data-theme="console"] .console-op-line {
+  font-family: var(--console-font-mono);
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--console-text);
+}
+[data-theme="console"] .console-op-prompt {
+  color: var(--console-amber);
+  font-weight: 600;
+  user-select: none;
+}
+
+/* Agent prose — set in serif, larger leading */
+[data-theme="console"] .console-agent-prose {
+  font-family: var(--console-font-serif);
+  font-size: 17px;
+  line-height: 1.55;
+  color: var(--console-text);
+  font-weight: 400;
+  letter-spacing: -0.005em;
+}
+[data-theme="console"] .console-agent-prose em {
+  color: var(--console-cyan);
+  font-style: italic;
+}
+[data-theme="console"] .console-agent-prose code {
+  font-family: var(--console-font-mono);
+  font-size: 0.86em;
+  background: var(--console-deck-2);
+  border: 1px solid var(--console-rule-soft);
+  border-radius: 2px;
+  padding: 0.05em 0.4em;
+  color: var(--console-amber);
+}
+[data-theme="console"] .console-agent-prose strong {
+  font-weight: 600;
+  color: var(--console-text);
+}
+
+/* Signature line under each agent turn */
+[data-theme="console"] .console-sig {
+  font-family: var(--console-font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  color: var(--console-muted);
+  text-transform: uppercase;
+}
+[data-theme="console"] .console-sig-name {
+  color: var(--console-cyan);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+/* Streaming activity indicator — a single phosphor block that pulses */
+@keyframes consolePulse {
+  0%, 100% { opacity: 0.35; transform: scaleX(0.6); }
+  50%      { opacity: 1;    transform: scaleX(1); }
+}
+[data-theme="console"] .console-streaming-bar {
+  display: inline-block;
+  width: 18px;
+  height: 8px;
+  background: var(--console-amber);
+  vertical-align: middle;
+  transform-origin: left center;
+  animation: consolePulse 1.4s ease-in-out infinite;
+}
+
+/* Composer chrome */
+[data-theme="console"] .console-composer {
+  background: var(--console-deck);
+  border: 1px solid var(--console-rule);
+  border-radius: 2px;
+  position: relative;
+}
+[data-theme="console"] .console-composer:focus-within {
+  border-color: var(--console-amber);
+  box-shadow: 0 0 0 1px oklch(0.81 0.16 65 / 0.30);
+}
+[data-theme="console"] .console-composer textarea {
+  font-family: var(--console-font-mono) !important;
+  font-size: 14px !important;
+  line-height: 1.55 !important;
+  color: var(--console-text) !important;
+}
+[data-theme="console"] .console-composer textarea::placeholder {
+  color: var(--console-muted-2);
+}
+
+/* Header strip — session card */
+[data-theme="console"] .console-header {
+  border-bottom: 1px solid var(--console-rule-soft);
+  background: linear-gradient(to bottom, oklch(0.16 0.02 240 / 0.6), transparent);
+}
+[data-theme="console"] .console-session-id {
+  font-family: var(--console-font-mono);
+  font-size: clamp(1.5rem, 3vw, 2.25rem);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--console-text);
+}
+[data-theme="console"] .console-session-id span {
+  color: var(--console-amber);
+}
+[data-theme="console"] .console-meta-key {
+  font-family: var(--console-font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--console-muted-2);
+}
+[data-theme="console"] .console-meta-val {
+  font-family: var(--console-font-mono);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--console-text);
+  letter-spacing: 0.02em;
+}
+
+/* Tool-call wrapper — keep lib's internals, restyle the frame */
+[data-theme="console"] [data-slot="tool-call-card"] {
+  background: var(--console-deck) !important;
+  border: 1px solid var(--console-rule) !important;
+  border-radius: 2px !important;
+  font-family: var(--console-font-mono) !important;
+}