drexler 0.2.13 → 0.2.14

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.14
+
+- Added a startup Mood panel with a stable boot gauge, percentage-only loading row, and rotating mood-specific posture/detail copy.
+- Anchored the wide startup dashboard so wrapped greeting copy no longer pushes the Mood and Deal Desk boxes down or adds stray rows.
+- Reworked the embedded Deal Desk into satirical mood-shaped product chrome instead of model/context telemetry.
+- Improved Drexler transcript rendering with complete bordered cards, a diamond response marker, cleaned markdown/code fence display, and Dracula-inspired code syntax colors.
+- Updated documentation to match current startup chrome, command palette behavior, keyboard controls, source setup, and layout invariants.
+
 ## 0.2.13
 
 - Hardened startup panel layout across narrow, standard, and wide terminals.

package/README.md

@@ -4,7 +4,7 @@
 [![license](https://img.shields.io/npm/l/drexler.svg)](./LICENSE)
 [![bun](https://img.shields.io/badge/runtime-bun%20%E2%89%A5%201.1-black)](https://bun.sh)
 
-CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken third-person and treats every conversation like a hostile takeover. Built with Bun + TypeScript. Talks to OpenRouter's Gemma 4 31B model (paid).
+CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken third-person and treats every conversation like a hostile takeover. Built with Bun + TypeScript, Ink, and OpenRouter-compatible Gemma models.
 
 > "Drexler usually charge consulting fee for this. Today, pro bono. You welcome."
 
@@ -13,7 +13,7 @@ CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken
 ## Quickstart
 
 ```bash
-bun add -g drexler
+bun install -g drexler@latest
 drexler
 ```
 
@@ -39,7 +39,7 @@ Verify: `bun --version` → should print `1.1.0` or higher.
 ### 2. Install Drexler globally
 
 ```bash
-bun add -g drexler
+bun install -g drexler@latest
 ```
 
 This installs the `drexler` command into `~/.bun/bin/drexler`. Make sure `~/.bun/bin` is on your `$PATH` (Bun's installer does this automatically; if not, add `export PATH="$HOME/.bun/bin:$PATH"` to your shell rc).
@@ -65,9 +65,11 @@ Paste the key, hit return. Drexler saves it to `~/.config/drexler/config.json` (
 ## Update
 
 ```bash
-bun update -g drexler
+bun install -g drexler@latest
 ```
 
+Global installs replace the existing `drexler` package in Bun's global install location; they do not keep stacking duplicate app copies.
+
 ## Uninstall
 
 ```bash
@@ -79,6 +81,33 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 
 ## Usage
 
+### Interactive UI
+
+Drexler runs as an Ink terminal UI when both stdin and stdout are TTYs. The normal launch shows one integrated startup panel with the mascot, tips, a **Mood** readout, and the **Drexler Deal Desk**. Short terminals automatically suppress oversized startup chrome so the chat stays usable.
+
+The startup panel is designed to stay stable while it boots: the mascot loading bar and Mood gauge animate without changing width, greeting copy is held in a fixed slot, and the Mood and Deal Desk boxes stay aligned when the greeting wraps. After boot, Mood resolves into a rotating Drexler-flavored posture with a short satirical subtext line.
+
+The Deal Desk is intentionally not a frontier-model telemetry panel. It shows mood-shaped corporate nonsense like boardroom status, memo count, mandate, risk, fees, and counsel posture. Values rotate by mood and session so repeated moods still feel alive.
+
+Conversation turns render as bordered cards aligned to the chat input width. User and Drexler responses use separate accents, wrapped text, and fixed-width borders so long responses stay inside the terminal instead of clipping at the right edge. Drexler responses use a diamond body marker. Markdown/code fence labels are cleaned up for display, and code blocks render with Dracula-inspired terminal syntax colors.
+
+Typing `/` opens the directive palette. Use `Tab`, `Enter`, or `↑`/`↓` to select. Commands with fixed arguments open smoother option choosers:
+
+- `/theme` previews all themes with descriptions.
+- `/startup` offers `fast`, `no-intro`, and `normal`.
+- `/retry` offers `terse` and `brutal`.
+- `/export` offers `md`, `txt`, `json`, and `html`.
+- `/model` offers `31b` and `26b`.
+
+`/synergy` runs a rotating animated corporate event in the live UI, then returns control to the chat when the animation completes.
+
+Keyboard notes:
+
+- `Tab`, `Enter`, and `↑`/`↓` operate the directive palette.
+- `PageUp`/`PageDown` scroll transcript history when it exceeds the visible viewport.
+- `Esc` cancels an in-flight model response without quitting.
+- `Ctrl+C` exits gracefully with an in-character farewell.
+
 ### Flags
 
 | flag                              | what                                                              |
@@ -93,12 +122,12 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 
 ### Slash commands (inside the REPL)
 
-| cmd            | what it do                                       |
+| cmd            | what it does                                     |
 | -------------- | ------------------------------------------------ |
 | `/help`        | list directives                                  |
 | `/clear`       | shred conversation history (system prompt pinned) |
 | `/exit`        | meeting adjourned                                |
-| `/synergy`     | SYNERGY!                                         |
+| `/synergy`     | run a rotating animated morale event             |
 | `/model`       | show current model, or `/model 26b` to switch   |
 | `/theme`       | show/switch theme; append `save` to persist, e.g. `/theme midnight save` |
 | `/startup fast\|no-intro\|normal` | persist startup behavior for future launches |
@@ -114,8 +143,6 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 | `/save-last [path]` | save Drexler's last response only          |
 | `/copy-last`   | copy Drexler's latest response to the clipboard  |
 
-`Ctrl+C` exits gracefully with an in-character farewell.
-
 ---
 
 ## Configuration
@@ -126,6 +153,8 @@ Drexler reads config in this priority (later wins):
 2. Environment variables
 3. CLI flags
 
+If the current config file does not exist, Drexler also checks the legacy `~/.drexlerrc` path.
+
 ### Environment variables
 
 | var                  | purpose                                              |
@@ -159,13 +188,26 @@ Default `maxHistory`: 50 messages.
 Available launch/config themes: `apollo`, `amber`, `mono`, `terminal`, `dealroom`, `midnight`, `paper`, and `plasma`.
 `NO_COLOR` always forces `mono`.
 
+Theme notes:
+
+| theme      | character                                  |
+| ---------- | ------------------------------------------ |
+| `apollo`   | signature Drexler green, the default        |
+| `amber`    | warm amber deal glow                        |
+| `mono`     | plain high-contrast ANSI colors             |
+| `terminal` | classic green/cyan terminal                 |
+| `dealroom` | restrained teal boardroom palette           |
+| `midnight` | cool blue late-session desk                 |
+| `paper`    | clean document-style contrast               |
+| `plasma`   | high-energy magenta trading-floor accent    |
+
 ---
 
 ## Models
 
 | alias  | id                                  | notes                          |
 | ------ | ----------------------------------- | ------------------------------ |
-| `31b`  | `google/gemma-4-31b-it`             | primary (paid)                 |
+| `31b`  | `google/gemma-4-31b-it`             | primary default                |
 | `26b`  | `google/gemma-4-26b-a4b-it`         | fallback, auto-retry on 429    |
 
 Pass `--model vendor/name:tag` for any other OpenRouter-compatible model.
@@ -178,7 +220,7 @@ Pass `--model vendor/name:tag` for any other OpenRouter-compatible model.
 git clone https://github.com/showOS/Drexler.git
 cd Drexler
 bun install
-cp .env.example .env       # then edit, paste key into OPENROUTER_API_KEY=
+export OPENROUTER_API_KEY=sk-or-v1-your-key
 bun run start
 ```
 
@@ -192,11 +234,12 @@ bun run typecheck
 ### Releasing a new version
 
 ```bash
-npm version <patch|minor>  # bumps package.json, commits, tags
-git push --follow-tags     # CI publishes to npm automatically
+bun run prepublishOnly
+npm version <patch|minor>  # bumps package.json, commits, and tags
+git push origin main --follow-tags
 ```
 
-The `.github/workflows/publish.yml` workflow runs typecheck + tests + `npm publish --provenance` on every `v*` tag push.
+The `.github/workflows/publish.yml` workflow runs install, tag/package version verification, typecheck, tests, and `npm publish --provenance` on every `v*` tag push.
 
 ---
 
@@ -210,6 +253,8 @@ The `.github/workflows/publish.yml` workflow runs typecheck + tests + `npm publi
 | Garbled box-drawing characters                             | Use a UTF-8 terminal with a Nerd Font (e.g. iTerm2, Alacritty, WezTerm)                   |
 | Want to switch themes mid-session                          | Use `/theme midnight`, `/theme dealroom`, `/theme amber`, or any listed theme inside the REPL |
 | Want a faster launch                                       | Use `drexler --fast` or set `"fast": true` in config                                     |
+| Startup panel looks cramped                                | Enlarge the terminal, or use `/startup no-intro` or `/startup fast`                      |
+| Slash command options are not visible                      | Type `/`, `/theme`, `/startup`, `/retry`, `/export`, or `/model`; exact fixed-argument commands open their chooser automatically |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drexler",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "CLI chat with Drexler, a corporate-executive AI persona built on OpenRouter Gemma 4 31B.",
   "license": "MIT",
   "author": "showOS",

package/src/index.ts

@@ -133,7 +133,7 @@ async function main(): Promise<void> {
     }
 
     console.log("");
-    console.log("  " + infoLine() + "  ·  mood: " + mood);
+    console.log("  " + infoLine());
     console.log("");
 
     const { waitUntilExit } = render(

package/src/ui/App.tsx

@@ -34,7 +34,11 @@ import {
   insertAtCursor,
 } from "./graphemes.ts";
 import { InputBox } from "./InputBox.tsx";
-import { MascotDashboard } from "./MascotIntro.tsx";
+import {
+  introPhaseColor,
+  MascotDashboard,
+  useIntroAnimation,
+} from "./MascotIntro.tsx";
 import { StreamingMessage } from "./Message.tsx";
 import { Spinner } from "./Spinner.tsx";
 import { StatusBar } from "./StatusBar.tsx";
@@ -204,6 +208,7 @@ export function App({
   const [historyIdx, setHistoryIdx] = useState<number | null>(null);
   const [paletteIdx, setPaletteIdx] = useState(0);
   const [scrollOffset, setScrollOffset] = useState(0);
+  const intro = useIntroAnimation(chromeWidth, integratedIntro);
 
   const paletteItems = useMemo(() => filterPaletteByPrefix(input), [input]);
   const paletteOpen = paletteItems.length > 0;
@@ -731,7 +736,7 @@ export function App({
       status={headerStatus}
       compact={isCompact}
       notice={!integratedIntro ? deskNotice ?? undefined : undefined}
-      maxWidth={integratedIntro ? Math.min(72, Math.max(1, width)) : width}
+      maxWidth={Math.max(1, width)}
       marginBottom={integratedIntro ? 0 : 1}
     />
   );
@@ -739,6 +744,7 @@ export function App({
   const visibleTranscriptRows = synergyEvent
     ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
     : maxTranscriptRows;
+  const introBarColor = introPhaseColor(intro.colorPhase, t);
 
   return (
     <ThemeProvider value={activeTheme}>
@@ -748,6 +754,12 @@ export function App({
             <MascotDashboard
               greeting={greeting}
               width={chromeWidth}
+              mood={mood}
+              bootProgress={intro.progress}
+              state={intro.state}
+              bar={intro.bar}
+              barColor={introBarColor}
+              mascotStatus={intro.status}
               dealDesk={renderDealDeskHeader}
             />
           </Box>
@@ -809,11 +821,11 @@ export function App({
                   width={inputWidth}
                 />
               </Box>
-              <Box>
+              <Box paddingLeft={2}>
                 <StatusBar
                   messageCount={msgCount}
                   witticism={witticism}
-                  maxWidth={statusBarWidth}
+                  maxWidth={Math.max(1, statusBarWidth - 2)}
                   status={isBusy ? "streaming" : deskStatus}
                   compact={isCompact}
                   scrollHint={scrollHint}

package/src/ui/DealDeskHeader.tsx

@@ -24,10 +24,81 @@ const DEFAULT_WIDTH = 80;
 const MIN_WIDTH = 1;
 const FRAMED_MIN_WIDTH = 24;
 
-const STATUS_LABEL: Record<DealDeskHeaderStatus, string> = {
-  idle: "READY",
-  streaming: "LIVE",
-  error: "ERROR",
+const BOARDROOM_STATUS: Record<DealDeskHeaderStatus, string> = {
+  idle: "BOARDROOM OPEN",
+  streaming: "MEMO LIVE",
+  error: "COUNSEL PANIC",
+};
+
+type DealDeskPoolKey =
+  | "fees"
+  | "mandate"
+  | "risk"
+  | "counsel"
+  | "morale"
+  | "synergy";
+
+const DEFAULT_POOL: Record<DealDeskPoolKey, readonly string[]> = {
+  fees: ["accruing", "sacred", "non-refundable", "already billed"],
+  mandate: ["self-awarded", "board-adjacent", "strategic-ish", "lightly authorized"],
+  risk: ["theatrical", "outsourced", "priced in", "someone else's"],
+  counsel: ["circling", "evasive", "comfortable", "redlining lunch"],
+  morale: ["impaired", "marked down", "technically solvent", "under review"],
+  synergy: ["alleged", "unverifiable", "already billed", "pending lawsuit"],
+};
+
+const MOOD_POOLS: Record<
+  string,
+  Partial<Record<DealDeskPoolKey, readonly string[]>>
+> = {
+  angry: {
+    fees: ["weaponized", "escalating", "aggressively earned", "non-refundable"],
+    mandate: ["hostile", "loudly implied", "board-threatening", "self-ratified"],
+    risk: ["acceptable", "transferred", "career-limiting", "somebody else's"],
+    counsel: ["circling", "sweating", "denying knowledge", "overruled"],
+    morale: ["terminated", "impaired", "written off", "reassigned"],
+    synergy: ["forced", "mandatory", "hostile", "already billed"],
+  },
+  exhausted: {
+    fees: ["still accruing", "quietly sacred", "tired but billable", "unquestioned"],
+    mandate: ["unclear", "half-approved", "forgotten", "pending coffee"],
+    risk: ["deferred", "sleepy", "filed tomorrow", "emotionally hedged"],
+    counsel: ["unavailable", "out of office", "blinking slowly", "circling"],
+    morale: ["written off", "napping", "below guidance", "technically awake"],
+    synergy: ["alleged", "too tired to verify", "softly promised", "unfunded"],
+  },
+  paranoid: {
+    fees: ["traced", "escrowed twice", "suspiciously round", "under seal"],
+    mandate: ["encrypted", "deniable", "need-to-know", "redacted"],
+    risk: ["everywhere", "listening", "unhedged", "wearing a wire"],
+    counsel: ["whispering", "triple-checking", "using burner phones", "redacting"],
+    morale: ["surveilled", "compartmentalized", "need-to-know", "encrypted"],
+    synergy: ["classified", "denied", "redacted", "not in minutes"],
+  },
+  generous: {
+    fees: ["shared emotionally", "still ours", "politely accruing", "gift-wrapped"],
+    mandate: ["benevolent", "magnanimous", "soft hostile", "board-blessed"],
+    risk: ["forgiven", "socialized", "gently transferred", "nicely hedged"],
+    counsel: ["agreeable", "smiling carefully", "comfortable", "charitable"],
+    morale: ["briefly up", "subsidized", "pleasantly marked", "gifted options"],
+    synergy: ["donated", "mutual-ish", "kindly alleged", "complimentary"],
+  },
+  ruthless: {
+    fees: ["sacred", "extractive", "fully captured", "compounding"],
+    mandate: ["hostile", "absolute", "self-awarded", "non-appealable"],
+    risk: ["outsourced", "priced in", "assigned to interns", "deleted"],
+    counsel: ["overpaid", "comfortable", "aggressively calm", "circling"],
+    morale: ["impaired", "irrelevant", "restructured", "sold separately"],
+    synergy: ["mandatory", "already billed", "non-consensual", "accretive"],
+  },
+  victorious: {
+    fees: ["captured", "celebrated", "fully earned", "ringing bell"],
+    mandate: ["ratified", "triumphant", "board-crowned", "unopposed"],
+    risk: ["conquered", "renamed upside", "priced in", "defeated"],
+    counsel: ["applauding", "comfortable", "drafting trophies", "filing confetti"],
+    morale: ["temporarily high", "marked up", "wearing medals", "overstated"],
+    synergy: ["declared", "victorious", "already billed", "banner-ready"],
+  },
 };
 
 function clampText(input: string, max: number): string {
@@ -51,98 +122,194 @@ function bodyLine(content: string, width: number): string {
   return `│ ${padToWidth(clampText(content, innerWidth), innerWidth)} │`;
 }
 
-function countLabel(messageCount: number, compact: boolean): string {
-  if (compact) return `${messageCount} msg${messageCount === 1 ? "" : "s"}`;
-  return `${messageCount} message${messageCount === 1 ? "" : "s"}`;
-}
-
-function latencyLabel(latencyMs: number | null | undefined): string | null {
-  if (typeof latencyMs !== "number") return null;
-  if (latencyMs < 1000) return `${Math.max(0, Math.round(latencyMs))}ms`;
-  return `${(latencyMs / 1000).toFixed(1)}s`;
+function memoLabel(messageCount: number): string {
+  const noun = "memo";
+  return `${messageCount} ${noun}${messageCount === 1 ? "" : "s"}`;
 }
 
 function tinyLine({
-  model,
   messageCount,
   status,
   width,
 }: {
-  model: string;
   messageCount: number;
   status: DealDeskHeaderStatus;
   width: number;
 }): string {
   return clampText(
-    `${STATUS_LABEL[status]} ${countLabel(messageCount, true)} ${model}`,
+    `${BOARDROOM_STATUS[status]} ${memoLabel(messageCount)}`,
     width,
   );
 }
 
+function pickFromMoodPool({
+  key,
+  mood,
+  salt,
+}: {
+  key: DealDeskPoolKey;
+  mood: string;
+  salt: number;
+}): string {
+  const pool = MOOD_POOLS[mood.toLowerCase()]?.[key] ?? DEFAULT_POOL[key];
+  return pool[Math.abs(salt) % pool.length] ?? DEFAULT_POOL[key][0];
+}
+
+function hashDealDesk(input: string): number {
+  let hash = 2166136261;
+  for (let idx = 0; idx < input.length; idx++) {
+    hash ^= input.charCodeAt(idx);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function formatCells(cells: string[], width: number): string {
+  const separator = "  │  ";
+  const available = Math.max(
+    1,
+    width - displayWidth(separator) * Math.max(0, cells.length - 1),
+  );
+  const base = Math.max(1, Math.floor(available / cells.length));
+  const remainder = Math.max(0, available - base * cells.length);
+  return cells
+    .map((cell, idx) => {
+      const cellWidth = base + (idx < remainder ? 1 : 0);
+      return padToWidth(clampText(cell, cellWidth), cellWidth);
+    })
+    .join(separator);
+}
+
 function buildHeaderLines({
-  model,
   mood,
   messageCount,
-  themeName,
-  approximateTokens,
-  latencyMs,
-  fallbackModel,
   status,
   compact,
   notice,
   width,
+  seed,
 }: {
-  model: string;
   mood: string;
   messageCount: number;
-  themeName?: string;
-  approximateTokens?: number;
-  latencyMs?: number | null;
-  fallbackModel?: string | null;
   status: DealDeskHeaderStatus;
   compact: boolean;
   notice?: string;
   width: number;
+  seed: number;
 }): string[] {
-  const statusLabel = STATUS_LABEL[status];
-  const latency = latencyLabel(latencyMs);
-  const top = compact
-    ? shellLine("┌ Drexler ", "┐", width)
-    : shellLine("┌ Drexler Deal Desk ", "┐", width);
-
+  const innerWidth = Math.max(1, width - 4);
+  const baseHash = hashDealDesk(`${mood}:${messageCount}:${status}:${seed}`);
+  const pick = (key: DealDeskPoolKey, offset: number) =>
+    pickFromMoodPool({ key, mood, salt: baseHash + offset * 7919 });
+  const statusLabel = BOARDROOM_STATUS[status];
   const summary = compact
-    ? `● ${statusLabel}  ${model}  ${countLabel(messageCount, true)}${
-        latency ? `  ${latency}` : ""
-      }`
-    : `● ${statusLabel}  │  ${countLabel(
-        messageCount,
-        false,
-      )}  │  ~${approximateTokens ?? 0} tok  │  ${latency ?? "no run yet"}`;
-  const detail = `model ${model}  │  mood ${mood}  │  theme ${
-    themeName ?? "apollo"
-  }${fallbackModel ? `  │  fallback ${fallbackModel}` : ""}`;
-  const lines = [top, bodyLine(summary, width)];
-
-  if (!compact) {
-    lines.push(bodyLine(detail, width));
-  }
+    ? formatCells(
+        [`● ${statusLabel}`, `mood ${mood}`, `fees ${pick("fees", 1)}`],
+        innerWidth,
+      )
+    : formatCells(
+        [
+          `● ${statusLabel}`,
+          memoLabel(messageCount),
+          `fees ${pick("fees", 1)}`,
+        ],
+        innerWidth,
+      );
+  const readout = compact
+    ? formatCells(
+        [`risk ${pick("risk", 2)}`, `counsel ${pick("counsel", 3)}`],
+        innerWidth,
+      )
+    : formatCells(
+        [
+          `mandate ${pick("mandate", 4)}`,
+          `risk ${pick("risk", 5)}`,
+          `counsel ${pick("counsel", 6)}`,
+        ],
+        innerWidth,
+      );
+  const lines = [bodyLine(summary, width), bodyLine(readout, width)];
 
   if (!compact && notice && notice.trim().length > 0) {
-    lines.push(bodyLine(`notice ${notice.trim()}`, width));
+    const memo = formatCells(
+        [
+          `memo ${notice.trim()}`,
+          `morale ${pick("morale", 7)}`,
+          `synergy ${pick("synergy", 8)}`,
+        ],
+      innerWidth,
+    );
+    lines.push(bodyLine(memo, width));
   }
 
-  lines.push(shellLine("└", "┘", width));
+  lines.push(shellLine("╰", "╯", width));
   return lines;
 }
 
+function titleLabel(compact: boolean): string {
+  return compact ? "Drexler" : "Drexler Deal Desk";
+}
+
+function FramedTitleText({
+  compact,
+  borderColor,
+  titleColor,
+  width,
+}: {
+  compact: boolean;
+  borderColor: string;
+  titleColor: string;
+  width: number;
+}) {
+  const title = titleLabel(compact);
+  const prefix = "╭─ ";
+  const titleSuffix = " ";
+  const suffix = "╮";
+  const ruleWidth = Math.max(
+    0,
+    width -
+      displayWidth(prefix) -
+      displayWidth(title) -
+      displayWidth(titleSuffix) -
+      displayWidth(suffix),
+  );
+  return (
+    <Text>
+      <Text color={borderColor}>{prefix}</Text>
+      <Text bold color={titleColor}>
+        {title}
+      </Text>
+      <Text color={borderColor}>
+        {titleSuffix}
+        {"─".repeat(ruleWidth)}
+        {suffix}
+      </Text>
+    </Text>
+  );
+}
+
+function FramedBodyText({
+  line,
+  borderColor,
+  contentColor,
+}: {
+  line: string;
+  borderColor: string;
+  contentColor: string;
+}) {
+  const content = line.length >= 4 ? line.slice(2, -2) : line;
+  return (
+    <Text>
+      <Text color={borderColor}>│ </Text>
+      <Text color={contentColor}>{content}</Text>
+      <Text color={borderColor}> │</Text>
+    </Text>
+  );
+}
+
 function DealDeskHeaderInner({
-  model,
   mood,
   messageCount,
-  themeName,
-  approximateTokens,
-  latencyMs,
-  fallbackModel,
   status = "idle",
   compact = false,
   notice,
@@ -151,6 +318,7 @@ function DealDeskHeaderInner({
 }: DealDeskHeaderProps) {
   const t = useTheme();
   const width = Math.max(MIN_WIDTH, Math.floor(maxWidth));
+  const randomSeed = useMemo(() => Math.floor(Math.random() * 1_000_000_000), []);
   const statusColor: Record<DealDeskHeaderStatus, string> = useMemo(
     () => ({
       idle: t.primaryLight,
@@ -159,32 +327,25 @@ function DealDeskHeaderInner({
     }),
     [t.error, t.primaryLight, t.warning],
   );
+  const summaryColor = status === "idle" ? t.text : statusColor[status];
   const lines = useMemo(
     () =>
       buildHeaderLines({
-        model,
         mood,
         messageCount,
-        themeName,
-        approximateTokens,
-        latencyMs,
-        fallbackModel,
         status,
         compact,
         notice,
         width,
+        seed: randomSeed,
       }),
     [
-      approximateTokens,
       compact,
-      fallbackModel,
-      latencyMs,
       messageCount,
-      model,
       mood,
       notice,
+      randomSeed,
       status,
-      themeName,
       width,
     ],
   );
@@ -193,7 +354,7 @@ function DealDeskHeaderInner({
     return (
       <Box width={width} marginBottom={marginBottom}>
         <Text color={statusColor[status]} wrap="truncate">
-          {tinyLine({ model, messageCount, status, width })}
+          {tinyLine({ messageCount, status, width })}
         </Text>
       </Box>
     );
@@ -201,14 +362,26 @@ function DealDeskHeaderInner({
 
   return (
     <Box flexDirection="column" width={width} marginBottom={marginBottom}>
-      <Text color={t.primaryDim}>{lines[0]}</Text>
-      <Text color={statusColor[status]}>{lines[1]}</Text>
-      {lines.slice(2, -1).map((line, index) => (
-        <Text key={index} color={index === 0 ? t.primaryLight : t.dim}>
-          {line}
-        </Text>
+      <FramedTitleText
+        compact={compact}
+        borderColor={t.primary}
+        titleColor={t.primaryLight}
+        width={width}
+      />
+      <FramedBodyText
+        line={lines[0] ?? ""}
+        borderColor={t.primary}
+        contentColor={summaryColor}
+      />
+      {lines.slice(1, -1).map((line, index) => (
+        <FramedBodyText
+          key={index}
+          line={line}
+          borderColor={t.primary}
+          contentColor={index === 0 ? t.text : t.dim}
+        />
       ))}
-      <Text color={t.primaryDim}>{lines[lines.length - 1]}</Text>
+      <Text color={t.primary}>{lines[lines.length - 1]}</Text>
     </Box>
   );
 }