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/app.css

@@ -3,6 +3,10 @@
 /* Active theme — must be first so its @import url() font directives resolve
  * to the top of the output. Themes are self-contained: tokens + fonts. */
 @import "../../lib-theme-skyrise/theme.css";   /* CREMA:THEME */
+
+/* Per-route alt theme — applied via [data-theme="console"] on AppShell. */
+@import "./themes/console.css";
+
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";

app/routes/ai.tsx

@@ -316,7 +316,7 @@ export default function AIRoute() {
   const availableModels = status.kind === "live" ? status.models : ["mock"]
 
   return (
-    <AppShell title="AI">
+    <AppShell title="AI" theme="console">
       <LLMProvider adapter={adapter} model={activeModel}>
         <ChatSurface
           models={availableModels}
@@ -471,6 +471,29 @@ function ChatSurface({
     () => !!loadAISnapshot(),
   )
 
+  // Session label — stable for the duration of the page load. Encoded in
+  // base36 from the mount timestamp; just a unique-feeling moniker for
+  // the operator's eye, not anything semantic.
+  const [sessionLabel] = useState(() =>
+    typeof window === "undefined"
+      ? "0000-0000"
+      : `${Math.floor(Date.now() / 1000).toString(36).slice(-4).toUpperCase()}-${Math.random()
+          .toString(36)
+          .slice(2, 6)
+          .toUpperCase()}`,
+  )
+
+  // Live clock for the modeline / signatures, ticking every second.
+  const [now, setNow] = useState(() => new Date())
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 1000)
+    return () => clearInterval(id)
+  }, [])
+  const clockLabel = now
+    .toISOString()
+    .slice(11, 19) /* HH:MM:SS in UTC */
+    + "Z"
+
   const hasAssistantReply = messages.some((m) => m.role === "assistant")
 
   const buildTranscript = useCallback(() => {
@@ -638,20 +661,82 @@ function ChatSurface({
 
   const isEmpty = messages.length === 0
 
+  // Token estimate for the modeline. Cheap heuristic, adequate for
+  // operator-glance display.
+  const estTokensTotal = messages.reduce(
+    (n, m) => n + Math.ceil((m.content?.length ?? 0) / 4),
+    0,
+  )
+  const userTurns = messages.filter((m) => m.role === "user").length
+
   return (
     <div className="relative -mb-6 flex h-full min-h-0 flex-col">
-      {/* Greeting — only when empty, fades out as composer slides down */}
+      {/* Session header — flight-recorder strip. Hidden in the empty state
+       * because the empty state already shows session metadata. */}
+      {!isEmpty && (
+        <div className="console-header sticky top-0 z-10 px-4 py-3 sm:px-6">
+          <div className="mx-auto flex w-full max-w-3xl items-end justify-between gap-6">
+            <div className="flex flex-col gap-0.5">
+              <span className="console-meta-key">session</span>
+              <span className="console-session-id">
+                {sessionLabel.split("-")[0]}
+                <span>·</span>
+                {sessionLabel.split("-")[1]}
+              </span>
+            </div>
+            <div className="flex flex-wrap items-end justify-end gap-x-6 gap-y-1.5">
+              <SessionMeta label="agent" value={(activeAgent?.name ?? "Atlas").toLowerCase()} />
+              <SessionMeta label="model" value={truncateModel(model)} />
+              <SessionMeta label="turns" value={userTurns.toString().padStart(2, "0")} />
+              <SessionMeta
+                label="status"
+                value={
+                  isStreaming
+                    ? "STREAMING"
+                    : pendingConfirm
+                      ? "AWAIT-CONFIRM"
+                      : isMock
+                        ? "MOCK"
+                        : "READY"
+                }
+                tone={
+                  isStreaming
+                    ? "amber"
+                    : pendingConfirm
+                      ? "rose"
+                      : isMock
+                        ? "muted"
+                        : "mint"
+                }
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Empty state — flight-recorder card with staggered reveal */}
       <div
         aria-hidden={!isEmpty}
-        className="pointer-events-none absolute inset-x-0 top-[28%] -translate-y-1/2 px-6 text-center transition-opacity duration-300"
+        className="pointer-events-none absolute inset-x-0 top-[14%] px-8 transition-opacity duration-300"
         style={{ opacity: isEmpty ? 1 : 0 }}
       >
-        <h1
+        <div className="mx-auto flex max-w-3xl flex-col gap-6">
-          className="text-4xl font-semibold tracking-tight text-foreground"
+          <div className="console-empty-line console-mono flex items-center justify-between text-[10.5px] tracking-[0.18em] uppercase text-[var(--console-muted)]">
-          style={{ fontFamily: "var(--font-heading)" }}
+            <span>arcadia // operator console</span>
-        >
+            <span>session {sessionLabel}</span>
-          How can I help you today?
+          </div>
+          <div className="console-empty-line h-px bg-[var(--console-rule-soft)]" />
+          <h1 className="console-empty-line console-empty-headline">
+            ATLAS<span className="text-[var(--console-amber)]">.</span>
+            <br />
+            <em>standing&nbsp;by</em>
           </h1>
+          <p className="console-empty-line console-mono max-w-[58ch] text-[13.5px] leading-[1.7] text-[var(--console-text-2)]">
+            <span className="text-[var(--console-amber)]">›</span>{" "}
+            Issue an instruction. Read tools run automatically. Writes pause for
+            confirmation. Tab&nbsp;⇥ for command palette.
+          </p>
+        </div>
       </div>
 
       {/* Messages — rendered when there are any. In empty state a flex-grow
@@ -679,6 +764,9 @@ function ChatSurface({
                     role={m.role as "user" | "assistant"}
                     content={m.content}
                     toolCalls={m.toolCalls}
+                    turnNum={i + 1}
+                    agentName={activeAgent?.name ?? "Atlas"}
+                    timestamp={clockLabel}
                   />
                   {calls.length > 0 && (
                     <div className="self-start flex w-full max-w-[80ch] flex-col gap-2">
@@ -785,6 +873,47 @@ function ChatSurface({
           )}
         </div>
       </div>
+
+      {/* Modeline — vim-style status strip. Pinned above the AppShell's own
+       * footer/padding so it always reads in the operator's bottom band. */}
+      <div className="console-modeline px-4 py-1.5 sm:px-6">
+        <div className="mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-x-6 gap-y-0.5 tabular-nums">
+          <div className="flex items-center gap-4">
+            <span>
+              <span className="console-modeline-key">utc</span>
+              <span className="console-modeline-val">{clockLabel}</span>
+            </span>
+            <span>
+              <span className="console-modeline-key">turn</span>
+              <span className="console-modeline-val">
+                {userTurns.toString().padStart(2, "0")}
+              </span>
+            </span>
+            <span>
+              <span className="console-modeline-key">tok</span>
+              <span className="console-modeline-val">~{estTokensTotal.toLocaleString()}</span>
+            </span>
+          </div>
+          <div className="flex items-center gap-4">
+            {isStreaming ? (
+              <span className="flex items-center gap-2">
+                <span className="console-streaming-bar" />
+                <span className="console-modeline-val text-[var(--console-amber)]">
+                  STREAM
+                </span>
+              </span>
+            ) : (
+              <span>
+                <span className="console-modeline-key">enter</span>
+                <span className="console-modeline-val">send</span>
+                <span className="ml-3 console-modeline-key">⇧</span>
+                <span className="console-modeline-key ml-1">enter</span>
+                <span className="console-modeline-val">newline</span>
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
@@ -856,37 +985,105 @@ function buildAgentToolCall(
   }
 }
 
+function SessionMeta({
+  label,
+  value,
+  tone = "default",
+}: {
+  label: string
+  value: string
+  tone?: "default" | "amber" | "rose" | "mint" | "muted"
+}) {
+  const toneColor = {
+    default: "var(--console-text)",
+    amber: "var(--console-amber)",
+    rose: "var(--console-rose)",
+    mint: "var(--console-mint)",
+    muted: "var(--console-muted)",
+  }[tone]
+  return (
+    <div className="flex flex-col gap-0.5 text-right">
+      <span className="console-meta-key">{label}</span>
+      <span className="console-meta-val tabular-nums" style={{ color: toneColor }}>
+        {value}
+      </span>
+    </div>
+  )
+}
+
+function truncateModel(m: string): string {
+  if (!m) return "—"
+  if (m.length <= 22) return m
+  return m.slice(0, 10) + "…" + m.slice(-9)
+}
+
 function MessageRow({
   role,
   content,
   toolCalls,
+  turnNum,
+  agentName,
+  timestamp,
 }: {
   role: "user" | "assistant"
   content: string
   toolCalls?: ToolCall[]
+  turnNum?: number
+  agentName?: string
+  timestamp?: string
 }) {
+  // Operator turn — monospace, sodium-amber prompt, no bubble. The whole
+  // row hangs from a left gutter showing the turn number.
   if (role === "user") {
     return (
-      <div className="self-end">
+      <div className="grid grid-cols-[3.5rem_1fr] gap-x-3 self-stretch">
-        <div
+        <div className="flex flex-col items-end pt-[3px]">
-          className="max-w-[80ch] rounded-3xl px-5 py-3 shadow-sm"
+          <span className="console-turn-num">
-          style={{
+            T{(turnNum ?? 0).toString().padStart(2, "0")}
-            background: "oklch(0.55 0.22 295)",
+          </span>
-            color: "oklch(1 0 0)",
+          {timestamp ? (
-          }}
+            <span className="console-mono mt-0.5 text-[9.5px] tracking-[0.1em] text-[var(--console-muted-2)]">
-        >
+              {timestamp}
-          <div className="whitespace-pre-wrap leading-relaxed">{content}</div>
+            </span>
+          ) : null}
+        </div>
+        <div className="border-l border-[var(--console-rule-soft)] pl-4">
+          <div className="console-op-line whitespace-pre-wrap">
+            <span className="console-op-prompt">›&nbsp;</span>
+            {content}
+          </div>
         </div>
       </div>
     )
   }
-  // Assistant messages with only tool_calls and no prose render nothing here —
+
-  // the ToolCallCards beneath them carry the visual weight.
+  // Assistant turn — set in serif, with a tiny mono signature beneath. If
+  // there's no prose (just tool calls), suppress the row entirely.
   if (!content.trim()) return null
   return (
-    <div className="self-start max-w-[80ch]">
+    <div className="grid grid-cols-[3.5rem_1fr] gap-x-3 self-stretch">
+      <div className="flex flex-col items-end pt-[2px]">
+        <span className="console-turn-num text-[var(--console-cyan)]">
+          T{(turnNum ?? 0).toString().padStart(2, "0")}
+        </span>
+        <span className="console-mono mt-0.5 text-[9.5px] tracking-[0.1em] text-[var(--console-muted-2)]">
+          {agentName?.slice(0, 6).toLowerCase() ?? "atlas"}
+        </span>
+      </div>
+      <div className="border-l border-[var(--console-cyan-deep)]/40 pl-4">
+        <div className="console-agent-prose">
           <MessageBody content={content} toolCalls={toolCalls} />
         </div>
+        <div className="console-sig mt-2 flex items-center gap-2">
+          <span className="console-sig-name">
+            {agentName?.toLowerCase() ?? "atlas"}»
+          </span>
+          {timestamp ? <span>{timestamp}</span> : null}
+          <span className="text-[var(--console-muted-2)]">·</span>
+          <span>recv</span>
+        </div>
+      </div>
+    </div>
   )
 }
 
@@ -965,15 +1162,15 @@ function Composer({
   }
 
   return (
-    <div
+    <div className="console-composer">
-      className="rounded-3xl border shadow-sm transition-shadow focus-within:shadow-md"
+      <div className="flex flex-col gap-3 px-4 pt-3 pb-3">
-      style={{
+        <div className="flex items-start gap-2">
-        background: "var(--card)",
+          <span
-        borderColor: "var(--border)",
+            aria-hidden
-        backdropFilter: "blur(32px) saturate(180%)",
+            className="console-mono select-none pt-[2px] text-[14px] font-semibold leading-[1.55] text-[var(--console-amber)]"
-      }}
           >
-      <div className="flex flex-col gap-3 px-5 pt-4 pb-3">
+            ›_
+          </span>
           <textarea
             ref={taRef}
             value={value}
@@ -982,9 +1179,9 @@ function Composer({
             placeholder={placeholder}
             rows={2}
             data-action="ai-composer-input"
-          className="min-h-[3.5rem] w-full resize-none bg-transparent text-base leading-relaxed outline-none placeholder:text-muted-foreground"
+            className="min-h-[3.5rem] w-full resize-none bg-transparent outline-none"
-          style={{ fontFamily: "var(--font-sans)" }}
           />
+        </div>
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-1">
             <button

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;
+}