drexler 0.2.21 → 0.2.23

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.2.23
+
+- Redesigned the office pet scene from the ground up against ANSI/TUI art best practices: focal hierarchy, rule-of-thirds composition, single border vocabulary, four-stop brightness ladder, density-gradient backgrounds.
+- One dominant boardroom window now frames an animated city skyline made from half-block silhouettes (`▆▇█`) with lit-window flicker (`█▒` / `█░`) on a per-tower rotating phase.
+- Sky band carries one sun/moon glyph and a slowly drifting cloud. Window top frame shows an in-fiction clock (advances one minute every 5 frames). Window bottom frame restates the activity line plus a single DL% readout — no chrome echo.
+- Mascot is centered with only two desk props: `▭ DREX` nameplate (cursor blinks while working, switches to `▭ zzz` while sleeping) and the steaming `╭c~╮` mug.
+- Single horizon rule replaces the bordered desk strip + floor dots. Steam wisp lives on the horizon row.
+- Activity accents (`z z Z`, `* *`, `$ $`, `~ ~`, `[$]`) live in the empty cells flanking the mascot.
+- Multiple subtle animation channels (skyline flicker, cloud drift, clock, brow/eye/lock, cursor blink, steam wisp, memo rotation) cap at ~3 fps so the scene reads alive without feeling jittery.
+
 ## 0.2.16
 
 - Added an interactive pet system: feed, play, work, praise, rest, vibe, name, and profile commands; persistent stats with offline decay; intern→analyst→associate→VP→MD rank ladder driven by lifetime deal accumulation; 90-second cooldowns per action with in-character rejection copy.

package/package.json

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

package/src/commands.ts

@@ -1,6 +1,6 @@
 import { spawnSync } from "node:child_process";
 import { existsSync, writeFileSync } from "node:fs";
-import { resolve as pathResolve } from "node:path";
+import { isAbsolute, resolve as pathResolve, sep as pathSep } from "node:path";
 import {
   getConfigPath,
   getDrexlerVersion,
@@ -499,9 +499,24 @@ function resolveWriteTarget(
     ctx.print(error(`Invalid path: ${pathArg} (no '..' segments allowed).`));
     return null;
   }
+  const cwd = process.cwd();
   const target = pathArg
-    ? pathResolve(pathArg)
-    : pathResolve(`${defaultPrefix}-${Date.now()}${requiredExt}`);
+    ? pathResolve(cwd, pathArg)
+    : pathResolve(cwd, `${defaultPrefix}-${Date.now()}${requiredExt}`);
+  // Sandbox relative paths to cwd. Absolute paths are user-explicit
+  // (e.g. `/save /tmp/notes.md`) and trusted — drexler runs with the
+  // user's own permissions, so they can write anywhere they could write
+  // from the shell. Defense in depth catches relative paths that, after
+  // resolution, would land outside cwd via a sneaky construction.
+  if (pathArg && !isAbsolute(pathArg)) {
+    const cwdPrefix = cwd.endsWith(pathSep) ? cwd : cwd + pathSep;
+    if (target !== cwd && !target.startsWith(cwdPrefix)) {
+      ctx.print(
+        error(`Invalid path: ${pathArg} (resolves outside current directory).`),
+      );
+      return null;
+    }
+  }
   if (!target.toLowerCase().endsWith(requiredExt)) {
     ctx.print(error(`Target must end in ${requiredExt}: ${target}`));
     return null;

package/src/config.ts

@@ -151,28 +151,49 @@ async function validatePersonaFile(
   return resolved;
 }
 
-export async function loadConfigFile(): Promise<Partial<Config>> {
-  const cp = configPath();
-  const lp = legacyConfigPath();
-  const path = existsSync(cp) ? cp : existsSync(lp) ? lp : null;
-  if (!path) return {};
+async function readConfigPath(
+  path: string,
+): Promise<{ raw: string; missing: false } | { raw: null; missing: true } | { raw: null; missing: false; error: NodeJS.ErrnoException }> {
   try {
-    const raw = await readFile(path, "utf-8");
-    const parsed: unknown = JSON.parse(raw);
-    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return { raw: await readFile(path, "utf-8"), missing: false };
+  } catch (err) {
+    const code = (err as NodeJS.ErrnoException).code;
+    if (code === "ENOENT") return { raw: null, missing: true };
+    return { raw: null, missing: false, error: err as NodeJS.ErrnoException };
+  }
+}
+
+export async function loadConfigFile(): Promise<Partial<Config>> {
+  // Try canonical XDG path first, then legacy ~/.drexlerrc. Reading
+  // unconditionally (instead of gating on existsSync) means EACCES
+  // surfaces a warning rather than silently masquerading as "no file".
+  for (const path of [configPath(), legacyConfigPath()]) {
+    const result = await readConfigPath(path);
+    if (result.missing) continue;
+    if (result.raw === null) {
       console.warn(
-        `Drexler config at ${path} is not a JSON object; ignoring (defaults applied).`,
+        `Drexler config at ${path} could not be read (${result.error.code ?? result.error.message}); ignoring (defaults applied).`,
+      );
+      return {};
+    }
+    try {
+      const parsed: unknown = JSON.parse(result.raw);
+      if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+        console.warn(
+          `Drexler config at ${path} is not a JSON object; ignoring (defaults applied).`,
+        );
+        return {};
+      }
+      return parsed as Partial<Config>;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.warn(
+        `Drexler config at ${path} could not be parsed (${msg}); ignoring (defaults applied).`,
       );
       return {};
     }
-    return parsed as Partial<Config>;
-  } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err);
-    console.warn(
-      `Drexler config at ${path} could not be read (${msg}); ignoring (defaults applied).`,
-    );
-    return {};
   }
+  return {};
 }
 
 export async function saveConfig(partial: Partial<Config>): Promise<void> {

package/src/llm.ts

@@ -11,6 +11,32 @@ const STOP_SEQUENCES = [
 ];
 const RETRY_DELAY_MS = 250;
 
+function abortableDelay(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new Error("aborted before retry"));
+      return;
+    }
+    const timer = setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+    const onAbort = () => {
+      clearTimeout(timer);
+      reject(new Error("aborted before retry"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+function debugWarn(label: string, detail: string): void {
+  if (process.env.DREXLER_DEBUG && process.env.DREXLER_DEBUG !== "0") {
+    try {
+      process.stderr.write(`[drexler ${label}] ${detail}\n`);
+    } catch {}
+  }
+}
+
 export type FetchFn = (
   url: string | URL | Request,
   init?: RequestInit,
@@ -112,7 +138,18 @@ async function attempt(
     try {
       await res.text();
     } catch {}
-    await new Promise((r) => setTimeout(r, RETRY_DELAY_MS));
+    // Retry delay must be abortable — if the user hits Esc during the
+    // wait, we should bail immediately instead of firing the second
+    // request only to cancel it once issued.
+    try {
+      await abortableDelay(RETRY_DELAY_MS, opts.signal);
+    } catch (err) {
+      return {
+        status: "http_error",
+        content: "",
+        error: err instanceof Error ? err.message : String(err),
+      };
+    }
     return attempt(model, opts, fetchFn, true);
   }
 
@@ -189,8 +226,12 @@ export async function parseSSEStream(
         acc += tok;
         onToken(tok);
       }
-    } catch {
-      // tolerate malformed chunk
+    } catch (err) {
+      // Tolerate malformed chunks — OpenRouter occasionally emits
+      // partial JSON during slow connections. Visible only when
+      // DREXLER_DEBUG is set so production stays quiet.
+      const msg = err instanceof Error ? err.message : String(err);
+      debugWarn("sse parse", `${msg}: ${data.slice(0, 80)}`);
     }
   };
 

package/src/pet/petState.ts

@@ -33,10 +33,16 @@ export interface PetStats {
 
 const MAX_NAME_LEN = 16;
 const NAME_SANITIZE_RE = /[^\p{L}\p{N} ._'-]/gu;
+// Strip ALL Unicode format/control marks (bidi overrides, ZWJ/ZWNJ,
+// BOM, word joiner, mathematical invisibles) before character-class
+// filtering — otherwise a name like "Max" can render as "xaM" via an
+// embedded U+202E RIGHT-TO-LEFT OVERRIDE that survives NFKC.
+const NAME_BIDI_STRIP_RE = /\p{Cf}/gu;
 
 export function sanitizePetName(input: string): string {
   const cleaned = input
     .normalize("NFKC")
+    .replace(NAME_BIDI_STRIP_RE, "")
     .replace(NAME_SANITIZE_RE, "")
     .replace(/\s+/g, " ")
     .trim();
@@ -76,6 +82,10 @@ export function actionCooldown(
     return { ok: true, remainingMs: 0 };
   }
   const elapsed = now - last;
+  // Clock skew backwards (timestamp set in the future) shouldn't lock
+  // the user out for the cooldown window — treat as no cooldown and
+  // let the next stampAction overwrite the stale future value.
+  if (elapsed < 0) return { ok: true, remainingMs: 0 };
   if (elapsed >= PET_COOLDOWN_MS) return { ok: true, remainingMs: 0 };
   return { ok: false, remainingMs: PET_COOLDOWN_MS - elapsed };
 }

package/src/repl.ts

@@ -69,13 +69,18 @@ export function buildMessagesWithReminder(conv: Conversation): Message[] {
 }
 
 // Confusable letters that look like Latin "I" — fold to ASCII before regex
-// so detection isn't bypassed by Cyrillic І, Turkish İ, fullwidth Ｉ, etc.
-const I_CONFUSABLES_RE = /[ІіİıＩℐⅠ]/g;
+// so detection isn't bypassed by Cyrillic І, Turkish İ, fullwidth Ｉ,
+// Greek Iota Ι/ι, script ℐ, Roman numeral Ⅰ.
+const I_CONFUSABLES_RE = /[ІіİıＩℐⅠΙι]/g;
 
 export function detectPersonaDrift(content: string): boolean {
   const noCode = content
     .replace(/```[\s\S]*?```/g, "")
-    .replace(/`[^`]*`/g, "");
+    .replace(/`[^`]*`/g, "")
+    // Strip LaTeX-style inline math $...$ and display math $$...$$ so
+    // `$I = mc^2$` doesn't trip drift detection.
+    .replace(/\$\$[\s\S]*?\$\$/g, "")
+    .replace(/\$[^\$\n]*\$/g, "");
   const folded = noCode.normalize("NFKC").replace(I_CONFUSABLES_RE, "I");
   return /\bI\b|\bI'm\b|\bI'll\b|\bI've\b|\bI'd\b/.test(folded);
 }

package/src/ui/CommandPalette.tsx

@@ -10,7 +10,7 @@ interface Props {
   width?: number;
 }
 
-const COMMAND_HINTS: Record<string, string> = {
+export const COMMAND_HINTS: Record<string, string> = {
   "/help": "open directive list",
   "/clear": "reset transcript",
   "/exit": "close session",
@@ -31,6 +31,15 @@ const COMMAND_HINTS: Record<string, string> = {
   "/copy-last": "copy latest response",
   "/setup": "show config + key source",
   "/update": "bun update -g drexler --latest",
+  "/pet": "open pet deal desk",
+  "/feed": "feed Drexler a deal memo",
+  "/play": "corporate synergy game",
+  "/work": "grind the deal pipeline",
+  "/praise": "affirm Drexler's contributions",
+  "/rest": "strategic nap",
+  "/vibe": "let Drexler pick the move",
+  "/name": "/name Bartholomew",
+  "/profile": "print personnel file",
 };
 
 const ARGUMENT_TITLES: Record<string, { title: string; hint: string }> = {

package/src/ui/PetPanel.tsx

@@ -19,16 +19,30 @@ export type Environment = "office" | "home" | "outdoors";
 const PANEL_BORDER_COLUMNS = 2;
 const PANEL_PADDING_COLUMNS = 2;
 const SCENE_ROWS = 18;
-const R_WALL = 0;
-const R_WINDOW_TOP = 1;
-const R_WINDOW_BOTTOM = 4;
-const R_ACTIVITY = 5;
-const R_MASCOT_START = 6;
-const R_DESK_SURFACE = R_MASCOT_START + BRIEFCASE_FINAL.length;
-const R_DESK_FRONT = R_DESK_SURFACE + 1;
-const R_DESK_DRAWERS = R_DESK_FRONT + 1;
-const R_DESK_BOTTOM = R_DESK_DRAWERS + 1;
-const R_FLOOR = R_DESK_BOTTOM + 1;
+// Row map for the redesigned office scene.
+// 0     title bar  (DREXLER OFFICE · stat readout)
+// 1     window top border
+// 2     sky band (sun/moon, drifting cloud)
+// 3     skyscraper rooflines
+// 4     skyscraper upper-window grid
+// 5     skyscraper lower-window grid
+// 6     window bottom border (date / time stamp)
+// 7     breathing row (negative space anchor)
+// 8-14  mascot (BRIEFCASE_FINAL is 7 rows)
+// 15    desk horizon + " DESK " label
+// 16    desktop props (nameplate, steaming mug)
+// 17    memo / status line
+const R_TITLE = 0;
+const R_WIN_TOP = 1;
+const R_WIN_SKY = 2;
+const R_WIN_TOPS = 3;
+const R_WIN_MID = 4;
+const R_WIN_BASE = 5;
+const R_WIN_BOTTOM = 6;
+const R_MASCOT_START = 8;
+const R_DESK_LINE = R_MASCOT_START + BRIEFCASE_FINAL.length;
+const R_DESK_PROPS = R_DESK_LINE + 1;
+const R_MEMO = R_DESK_PROPS + 1;
 
 export const PET_SCENE_WIDTH = 52;
 
@@ -39,14 +53,6 @@ function place(base: string, text: string, x: number): string {
   return base.slice(0, x) + fit + base.slice(end);
 }
 
-function placeSprite(rows: string[], row: number, x: number, sprite: readonly string[]): void {
-  for (let i = 0; i < sprite.length; i++) {
-    const targetRow = row + i;
-    if (targetRow < 0 || targetRow >= rows.length) continue;
-    rows[targetRow] = place(rows[targetRow] ?? "", sprite[i] ?? "", x);
-  }
-}
-
 function blankRow(width: number): string {
   return " ".repeat(width);
 }
@@ -57,13 +63,6 @@ function padDisplayText(input: string, width: number): string {
   return `${fitted}${" ".repeat(Math.max(0, safeWidth - displayWidth(fitted)))}`;
 }
 
-function centerPadDisplayText(input: string, width: number): string {
-  const safeWidth = Math.max(1, width);
-  const fitted = fitDisplayText(input, safeWidth);
-  const left = Math.max(0, Math.floor((safeWidth - displayWidth(fitted)) / 2));
-  return `${" ".repeat(left)}${fitted}${" ".repeat(Math.max(0, safeWidth - left - displayWidth(fitted)))}`;
-}
-
 function overlayFitted(row: string, text: string, x: number, width: number): string {
   return place(row, padDisplayText(text, width), x);
 }
@@ -74,50 +73,103 @@ function centerText(row: string, text: string): string {
   return place(row, safeText, x);
 }
 
-function sceneBoxTop(title: string, width: number): string {
-  const safeWidth = Math.max(4, width);
-  const label = ` ${fitDisplayText(title, Math.max(1, safeWidth - 4))} `;
-  const ruleWidth = Math.max(0, safeWidth - 2 - displayWidth(label));
-  return `╭${label}${"─".repeat(ruleWidth)}╮`;
+function cupForEnergy(energy: number): string {
+  if (energy > 60) return "c~";
+  if (energy > 30) return "c-";
+  return "c_";
 }
 
-function sceneBoxBody(text: string, width: number): string {
-  const safeWidth = Math.max(4, width);
-  return `│${padDisplayText(text, safeWidth - 2)}│`;
+// Skyscraper recipe. Each entry is one tower placed left-to-right with
+// roof / upper-windows / lower-windows rows of equal width. The window
+// pattern repeats every `period` columns. `period` and `lit` step the
+// flicker over time so the lit windows rotate without ever changing the
+// tower silhouette.
+interface SkyscraperRecipe {
+  width: number;
+  gap: number;
+  // Roofline glyphs. We pad with the building's edge fill below.
+  roof: (width: number) => string;
+  upper: (width: number, frame: number, period: number) => string;
+  lower: (width: number, frame: number, period: number) => string;
+  period: number;
+}
+
+function repeatPattern(width: number, period: number, picker: (i: number) => string): string {
+  let out = "";
+  for (let i = 0; i < width; i++) out += picker(i % period);
+  return out;
+}
+
+function skyscraperTops(width: number): string {
+  // ▆▇ produces a fuller roof; flat parapets at the ends keep silhouettes square.
+  if (width <= 2) return "▇".repeat(width);
+  if (width <= 4) return "▆" + "▇".repeat(width - 2) + "▆";
+  return "▆▇" + "▇".repeat(width - 4) + "▇▆";
+}
+
+function skyscraperUpper(width: number, frame: number, period: number): string {
+  // Two-glyph alternation █▒ with a slow flicker swap that lights one
+  // window per tower every 4 frames. ░ reads as "lit" against ▒ "dim".
+  const lit = Math.floor(frame / 3) % period;
+  return repeatPattern(width, period, (col) => {
+    const base = col % 2 === 0 ? "█" : "▒";
+    if (col === lit) return col % 2 === 0 ? "█" : "░";
+    return base;
+  });
 }
 
-function sceneBoxBottom(width: number): string {
-  const safeWidth = Math.max(4, width);
-  return `╰${"─".repeat(safeWidth - 2)}╯`;
+function skyscraperLower(width: number, frame: number, period: number): string {
+  // Offset flicker phase from the upper grid so the two rows feel
+  // independent without ever looking chaotic.
+  const lit = (Math.floor(frame / 3) + 1) % period;
+  return repeatPattern(width, period, (col) => {
+    const base = col % 2 === 0 ? "█" : "▒";
+    if (col === lit) return col % 2 === 0 ? "█" : "░";
+    return base;
+  });
 }
 
-function placeBoxLines(
-  rows: string[],
-  row: number,
-  x: number,
-  width: number,
-  title: string,
-  body: readonly string[],
-): void {
-  rows[row] = place(rows[row] ?? "", sceneBoxTop(title, width), x);
-  for (let i = 0; i < body.length; i++) {
-    rows[row + i + 1] = place(
-      rows[row + i + 1] ?? "",
-      sceneBoxBody(body[i] ?? "", width),
-      x,
-    );
+const SKYLINE_RECIPE: ReadonlyArray<SkyscraperRecipe> = [
+  { width: 4, gap: 2, period: 4, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 6, gap: 2, period: 4, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 3, gap: 2, period: 3, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 7, gap: 2, period: 6, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 4, gap: 2, period: 4, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 5, gap: 3, period: 4, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+  { width: 3, gap: 2, period: 3, roof: skyscraperTops, upper: skyscraperUpper, lower: skyscraperLower },
+];
+
+function buildSkylineRows(width: number, frame: number): {
+  tops: string;
+  upper: string;
+  lower: string;
+} {
+  // Compose left-to-right until we run out of room. Pad with spaces so
+  // the silhouette doesn't extend past the inner canvas width.
+  let tops = "";
+  let upper = "";
+  let lower = "";
+  let cursor = 0;
+  for (const tower of SKYLINE_RECIPE) {
+    if (cursor + tower.width > width) break;
+    tops += tower.roof(tower.width);
+    upper += tower.upper(tower.width, frame, tower.period);
+    lower += tower.lower(tower.width, frame, tower.period);
+    cursor += tower.width;
+    const gap = Math.min(tower.gap, Math.max(0, width - cursor));
+    if (gap > 0) {
+      tops += " ".repeat(gap);
+      upper += " ".repeat(gap);
+      lower += " ".repeat(gap);
+      cursor += gap;
+    }
   }
-  rows[row + body.length + 1] = place(
-    rows[row + body.length + 1] ?? "",
-    sceneBoxBottom(width),
-    x,
-  );
-}
-
-function cupForEnergy(energy: number): string {
-  if (energy > 60) return "c~";
-  if (energy > 30) return "c-";
-  return "c_";
+  const remainder = Math.max(0, width - cursor);
+  return {
+    tops: tops + " ".repeat(remainder),
+    upper: upper + " ".repeat(remainder),
+    lower: lower + " ".repeat(remainder),
+  };
 }
 
 function progressTicker(frame: number): string {
@@ -214,134 +266,124 @@ function mascotStateForActivity(activity: PetActivity, frame: number): MascotSta
   }
 }
 
-function drawOfficeBackground(rows: string[], width: number, frame: number, stats: PetStats): void {
-  const wallLabel = "DREXLER OFFICE";
-  const dealPct = `${Math.round(stats.deals).toString().padStart(3)}%`;
-  rows[R_WALL] = centerText("─".repeat(width), wallLabel);
-  rows[R_WALL] = place(
-    rows[R_WALL],
-    fitDisplayText(`pipe ${dealPct}`, Math.max(1, width - 2)),
-    Math.max(0, width - displayWidth(`pipe ${dealPct}`) - 1),
-  );
-
-  const compact = width < 62;
-  const windowWidth = compact
-    ? 18
-    : Math.min(30, Math.max(20, Math.floor(width * 0.32)));
-  const boardWidth = compact
-    ? Math.min(26, Math.max(20, width - windowWidth - 5))
-    : Math.min(36, Math.max(26, Math.floor(width * 0.36)));
-  const boardX = Math.max(windowWidth + 3, width - boardWidth - 2);
-  const windowRight = 1 + windowWidth;
-  const gapWidth = boardX - windowRight;
-  const cloud = frame % 6 < 3 ? "(~~)" : " (~~)";
-  const sun = frame % 12 < 6 ? "\\o/" : "-o-";
-  const city = frame % 10 < 5 ? "▂▄▆ city" : "▃▅▇ city";
-  const tape = frame % 8 < 4 ? "▁▃▅▇" : "▂▄▆█";
-  const cursor = frame % 4 < 2 ? ">" : "*";
-
-  placeBoxLines(rows, R_WINDOW_TOP, 1, windowWidth, "Window", [
-    `╔╤╤╗ ${sun} ${cloud}`,
-    `║▥▥║ ${city}`,
-  ]);
-  placeBoxLines(
-    rows,
-    R_WINDOW_TOP,
-    boardX,
-    Math.min(boardWidth, width - boardX),
-    "Deal Board",
-    [
-      `DL ${dealPct}  FEE ${Math.round(stats.happiness).toString().padStart(3)}%`,
-      `PIPE ${tape} $ ${cursor}`,
-    ],
+function drawTitleBar(rows: string[], width: number, stats: PetStats): void {
+  // Single-line title bar: "─ DREXLER OFFICE ─ … ─ deals 38% ─" with
+  // padded glyphs around each segment so the eye reads them as labels
+  // on a rule, not a rule running through text. The right-aligned
+  // readout names the most-pressing stat. Avoids the previous chrome
+  // echo where the same percentage appeared in both the title and the
+  // desk strip.
+  const label = " DREXLER OFFICE ";
+  const worst = pickWorstStat(stats);
+  const readout = ` ${worst.key} ${Math.round(worst.value)}% `;
+  rows[R_TITLE] = centerText("─".repeat(width), label);
+  rows[R_TITLE] = place(
+    rows[R_TITLE],
+    fitDisplayText(readout, Math.max(1, width - 2)),
+    Math.max(0, width - displayWidth(readout) - 1),
   );
+}
 
-  if (gapWidth >= 7) {
-    const clockX = windowRight + Math.floor((gapWidth - 5) / 2);
-    const hour = frame % 8 < 4 ? "09" : "10";
-    placeSprite(rows, R_WINDOW_TOP, clockX, [
-      "╭──╮",
-      `│${hour}│`,
-      "╰──╯",
-    ]);
-  }
+function clockFromFrame(frame: number): string {
+  // Slow ambient clock — advances roughly one minute every 5 frames.
+  const startHour = 9; // boardroom opens at 9 AM corporate time.
+  const totalMinutes = startHour * 60 + Math.floor(frame / 5);
+  const hour = Math.floor(totalMinutes / 60) % 24;
+  const minute = totalMinutes % 60;
+  return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+}
 
-  rows[R_ACTIVITY] = centerText(
-    "─".repeat(width),
-    buildActivityLine("idle", frame),
+function drawBoardroomWindow(
+  rows: string[],
+  width: number,
+  frame: number,
+  stats: PetStats,
+  activity: PetActivity,
+): void {
+  // Outer rounded window frame spans nearly the full panel width. The
+  // city skyline lives entirely inside the frame; nothing else competes
+  // with it for upper-half attention.
+  const winX = 1;
+  const winWidth = Math.max(20, width - 2);
+  const innerWidth = Math.max(8, winWidth - 2);
+
+  // Top frame carries a quiet label so the eye knows what it's looking at.
+  const topLabel = ` Skyline · ${clockFromFrame(frame)} `;
+  const topRuleWidth = Math.max(0, innerWidth - displayWidth(topLabel));
+  rows[R_WIN_TOP] = place(
+    rows[R_WIN_TOP],
+    `╭${topLabel}${"─".repeat(topRuleWidth)}╮`,
+    winX,
   );
-}
 
-function drawOfficeFurniture(rows: string[], width: number, frame: number): void {
-  const lampX = 1;
-  const cabinetX = Math.max(1, width - 8);
-  const shade = frame % 8 < 4 ? "╭░░░░╮" : "╭▒▒▒▒╮";
-  const plantTop = frame % 6 < 3 ? " ╲│╱ " : " ╱│╲ ";
-
-  placeSprite(rows, R_MASCOT_START, lampX, [
-    `  ${shade} `,
-    " ╱▒▒▒▒╲",
-    " ╰─┬──╯",
-    "   │   ",
-    " ╭─┴─╮ ",
-    " │IN │ ",
-    " ╰───╯ ",
-  ]);
-
-  placeSprite(rows, R_MASCOT_START, cabinetX, [
-    plantTop,
-    " ╲│╱ ",
-    " ╰┬╯ ",
-    "╭FILE╮",
-    "│▤▤▤│",
-    "├────┤",
-    "│▤▤▤│",
-  ]);
+  // Sky row: sun/moon left, drifting cloud right, otherwise empty so
+  // the skyline has clean air to breathe.
+  const sunGlyph = frame % 24 < 12 ? "☼" : "☾";
+  const cloudOffset = (Math.floor(frame / 2) % (innerWidth - 6)) + 2;
+  let sky = " ".repeat(innerWidth);
+  sky = place(sky, sunGlyph, 1);
+  sky = place(sky, "(~~)", cloudOffset);
+  rows[R_WIN_SKY] = place(rows[R_WIN_SKY], `│${sky}│`, winX);
+
+  // Skyscrapers. Centered horizontally inside the inner canvas so the
+  // skyline reads as one continuous silhouette.
+  const skylineWidth = Math.max(8, innerWidth - 4);
+  const { tops, upper, lower } = buildSkylineRows(skylineWidth, frame);
+  const padLeft = Math.max(0, Math.floor((innerWidth - skylineWidth) / 2));
+  const padRight = Math.max(0, innerWidth - padLeft - skylineWidth);
+  const wrapSkylineRow = (row: string): string =>
+    `│${" ".repeat(padLeft)}${row}${" ".repeat(padRight)}│`;
+  rows[R_WIN_TOPS] = place(rows[R_WIN_TOPS], wrapSkylineRow(tops), winX);
+  rows[R_WIN_MID] = place(rows[R_WIN_MID], wrapSkylineRow(upper), winX);
+  rows[R_WIN_BASE] = place(rows[R_WIN_BASE], wrapSkylineRow(lower), winX);
+
+  // Bottom frame restates the current activity for at-a-glance status.
+  const bottomLabel = ` ${buildActivityLine(activity, frame)} · DL ${Math.round(stats.deals).toString().padStart(3)}% `;
+  const fittedBottom = fitDisplayText(bottomLabel, Math.max(1, innerWidth - 2));
+  const bottomRuleWidth = Math.max(0, innerWidth - displayWidth(fittedBottom));
+  rows[R_WIN_BOTTOM] = place(
+    rows[R_WIN_BOTTOM],
+    `╰${fittedBottom}${"─".repeat(bottomRuleWidth)}╯`,
+    winX,
+  );
 }
 
 function drawActivityAccents(
   rows: string[],
   width: number,
   activity: PetActivity,
-  frame: number,
+  _frame: number,
   mascotX: number,
 ): void {
-  rows[R_ACTIVITY] = centerText(
-    "─".repeat(width),
-    buildActivityLine(activity, frame),
-  );
-
+  // Accents are now small, single-glyph flourishes positioned in the
+  // empty cells immediately flanking the mascot. No competing props,
+  // so accents always have clean space to land on.
   const mascotRight = mascotX + MASCOT_WIDTH;
-  const leftAccentX = Math.max(1, mascotX - 3);
-  const fileX = Math.max(1, width - 8);
-  const rightAccentX = Math.min(fileX - 6, mascotRight + 2);
+  const leftAccentX = Math.max(1, mascotX - 4);
+  const rightAccentX = Math.min(width - 2, mascotRight + 2);
 
   switch (activity) {
     case "eating":
-      rows[R_MASCOT_START + 5] = place(
-        rows[R_MASCOT_START + 5],
-        "╭$╮",
-        Math.max(1, Math.min(fileX - 5, rightAccentX + 1)),
-      );
+      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "[$]", rightAccentX);
       break;
     case "playing":
       rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "*", leftAccentX);
-      rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "*", Math.min(fileX - 2, rightAccentX + 6));
+      rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "*", rightAccentX);
       break;
     case "working":
       rows[R_MASCOT_START + 1] = place(rows[R_MASCOT_START + 1], "$", leftAccentX);
-      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "$", Math.min(fileX - 2, rightAccentX + 6));
+      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "$", rightAccentX);
       break;
     case "sleeping":
       rows[R_MASCOT_START] = place(rows[R_MASCOT_START], "z z Z", rightAccentX);
       break;
     case "praised":
       rows[R_MASCOT_START + 1] = place(rows[R_MASCOT_START + 1], "* *", leftAccentX);
-      rows[R_MASCOT_START + 1] = place(rows[R_MASCOT_START + 1], "* *", Math.min(fileX - 4, rightAccentX + 4));
+      rows[R_MASCOT_START + 1] = place(rows[R_MASCOT_START + 1], "* *", rightAccentX);
       break;
     case "vibing":
       rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "~ ~", leftAccentX);
-      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "~ ~", Math.min(fileX - 4, rightAccentX + 4));
+      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "~ ~", rightAccentX);
       break;
     default:
       break;
@@ -361,82 +403,55 @@ function drawMascot(rows: string[], width: number, activity: PetActivity, frame:
   return mascotX;
 }
 
-function drawDesktopObjects(
+function drawDeskHorizon(rows: string[], width: number): void {
+  // One quiet horizon line anchors the mascot in the room. The
+  // " DESK " label sits at the rule's center and identifies the
+  // working surface without needing a bordered strip below.
+  const label = " DREXLER DEAL DESK ";
+  const fitted = fitDisplayText(label, Math.max(1, width - 4));
+  const labelWidth = displayWidth(fitted);
+  const leftRule = Math.max(2, Math.floor((width - labelWidth) / 2));
+  const rightRule = Math.max(2, width - leftRule - labelWidth);
+  rows[R_DESK_LINE] = `${"─".repeat(leftRule)}${fitted}${"─".repeat(rightRule)}`;
+}
+
+function drawDeskProps(
   rows: string[],
   width: number,
   activity: PetActivity,
   frame: number,
   stats: PetStats,
 ): void {
+  // Two props only: the mascot nameplate on the left and a coffee mug
+  // on the right. Both sit on the desk-props row so they share a
+  // baseline with the mascot above and never float.
   const mascotX = Math.max(0, Math.floor((width - MASCOT_WIDTH) / 2));
   const mascotRight = mascotX + MASCOT_WIDTH;
-  const cabinetX = Math.max(1, width - 8);
-  const laptopX = Math.max(8, mascotX - 9);
-  const papersX = Math.min(cabinetX - 10, mascotRight + 2);
-  const mugX = Math.min(cabinetX - 5, mascotRight + 6);
-  const cursor = frame % 2 === 0 ? "_" : " ";
-  const screen =
-    activity === "working"
-      ? `$>${cursor}DL`
-      : activity === "sleeping"
-        ? "zzz..."
-        : "DREX";
-  const steam = stats.energy > 30
-    ? frame % 4 < 2 ? " ((" : "  ))"
-    : "    ";
-  const paperFace = frame % 6 < 3 ? "▱▱▱" : "▰▱▱";
-
-  placeSprite(rows, R_MASCOT_START + 4, laptopX, [
-    "╭──────╮",
-    `│${padDisplayText(screen, 6)}│`,
-    "╰─┬──┬─╯",
-  ]);
-
-  if (papersX > mascotRight) {
-    rows[R_MASCOT_START + 6] = place(rows[R_MASCOT_START + 6], paperFace, papersX);
-  }
-
+  const nameplateX = Math.max(2, mascotX - 12);
+  const mugX = Math.min(width - 6, mascotRight + 4);
+  const cursorAt = activity === "working" && frame % 2 === 0 ? "_" : " ";
+  const namePlate = activity === "sleeping" ? "▭ zzz " : `▭ DREX${cursorAt}`;
+  rows[R_DESK_PROPS] = place(rows[R_DESK_PROPS], namePlate, nameplateX);
   if (mugX > mascotRight + 1) {
-    rows[R_MASCOT_START + 4] = place(rows[R_MASCOT_START + 4], steam, mugX + 1);
-    rows[R_MASCOT_START + 5] = place(rows[R_MASCOT_START + 5], "╭─╮", mugX);
-    rows[R_MASCOT_START + 6] = place(rows[R_MASCOT_START + 6], `╰${cupForEnergy(stats.energy)}╯`, mugX);
+    // Steam wisp lives on the desk horizon row, just above the mug.
+    // Letting it tick frame-by-frame gives the room one quiet ambient
+    // beat without competing with the skyline flicker.
+    const steam = stats.energy > 30
+      ? frame % 4 < 2 ? " ((" : "  ))"
+      : "";
+    if (steam) {
+      rows[R_DESK_LINE] = place(rows[R_DESK_LINE], steam, mugX + 1);
+    }
+    rows[R_DESK_PROPS] = place(rows[R_DESK_PROPS], `╭${cupForEnergy(stats.energy)}╮`, mugX);
   }
 }
 
-function drawDesk(rows: string[], width: number, stats: PetStats): void {
-  const deskX = width > PET_SCENE_WIDTH ? 2 : 1;
-  const deskWidth = Math.max(4, width - deskX * 2);
-  const deskInner = Math.max(1, deskWidth - 2);
-  const surface = `▱▱▱    [${cupForEnergy(stats.energy)}]    ▬▬▬▬▬    COV OK`;
-  const front = `[IN] ║ DREXLER DEAL DESK ║ PIPE ${Math.round(stats.deals)}% ║ [OUT]`;
-  const drawers = width < 68
-    ? "╭────╮   ╭────╮   ╭────╮"
-    : "╭────╮   ╭────╮        ╭────╮   ╭────╮";
-
-  rows[R_DESK_SURFACE] = place(
-    rows[R_DESK_SURFACE],
-    `╭${padDisplayText(surface, deskInner)}╮`,
-    deskX,
-  );
-  rows[R_DESK_FRONT] = place(
-    rows[R_DESK_FRONT],
-    `│${padDisplayText(front, deskInner)}│`,
-    deskX,
-  );
-  rows[R_DESK_DRAWERS] = place(
-    rows[R_DESK_DRAWERS],
-    `│${centerPadDisplayText(drawers, deskInner)}│`,
-    deskX,
-  );
-  rows[R_DESK_BOTTOM] = place(
-    rows[R_DESK_BOTTOM],
-    `╰${"─".repeat(Math.max(0, deskInner))}╯`,
-    deskX,
-  );
-  rows[R_FLOOR] = centerText(
-    rows[R_FLOOR],
-    fitDisplayText("░░░░░░░ deal-room carpet shadow ░░░░░░░", width),
-  );
+function drawMemo(rows: string[], width: number, stats: PetStats, frame: number): void {
+  // Memo row carries the rotating status message. Centered, dim — the
+  // closing punctuation of the scene rather than a competing chrome
+  // strip with its own border.
+  const memo = `· ${getStatusMsg(stats, frame)} ·`;
+  rows[R_MEMO] = centerText(" ".repeat(width), fitDisplayText(memo, width));
 }
 
 function buildScene(
@@ -448,16 +463,22 @@ function buildScene(
   const sceneWidth = Math.max(PET_SCENE_WIDTH, Math.floor(width));
   const rows: string[] = Array.from({ length: SCENE_ROWS }, () => blankRow(sceneWidth));
 
-  drawOfficeBackground(rows, sceneWidth, frame, stats);
-  drawOfficeFurniture(rows, sceneWidth, frame);
+  drawTitleBar(rows, sceneWidth, stats);
+  drawBoardroomWindow(rows, sceneWidth, frame, stats, activity);
   const mascotX = drawMascot(rows, sceneWidth, activity, frame);
-  drawDesktopObjects(rows, sceneWidth, activity, frame, stats);
-  drawDesk(rows, sceneWidth, stats);
+  drawDeskHorizon(rows, sceneWidth);
+  drawDeskProps(rows, sceneWidth, activity, frame, stats);
+  drawMemo(rows, sceneWidth, stats, frame);
   drawActivityAccents(rows, sceneWidth, activity, frame, mascotX);
   return rows.map((row) => overlayFitted(blankRow(sceneWidth), row, 0, sceneWidth));
 }
 
 // ─── row colors ───────────────────────────────────────────────────────────────
+// Four-stop brightness ladder so the eye finds a hierarchy:
+//   dim          → chrome (title rule, memo)
+//   primaryDim   → window frame, desk horizon, skyline silhouettes
+//   primary      → desk props, mascot body
+//   primaryLight → mascot eyes + activity accents
 function rowColor(i: number, activity: PetActivity, frame: number, t: Theme): string {
   if (i >= R_MASCOT_START && i < R_MASCOT_START + BRIEFCASE_FINAL.length) {
     if (activity === "sleeping") return t.dim;
@@ -467,23 +488,20 @@ function rowColor(i: number, activity: PetActivity, frame: number, t: Theme): st
     if (activity === "working" && frame % 32 >= 26) return t.error;
     return t.primary;
   }
-  if (i === R_ACTIVITY) {
+  if (i === R_TITLE) return t.dim;
+  if (i === R_WIN_SKY) return t.dim;
+  if (i === R_WIN_TOPS || i === R_WIN_MID || i === R_WIN_BASE) return t.primaryDim;
+  if (i === R_WIN_TOP || i === R_WIN_BOTTOM) return t.primaryDim;
+  if (i === R_DESK_LINE) return t.primaryDim;
+  if (i === R_DESK_PROPS) return t.primary;
+  if (i === R_MEMO) {
     if (activity === "working" && frame % 32 >= 26) return t.error;
     if (activity === "sleeping")  return t.dim;
     if (activity === "praised")   return t.warning;
     if (activity === "eating")    return t.warning;
     if (activity === "playing")   return t.primaryLight;
-    return t.primaryLight;
+    return t.dim;
   }
-  if (
-    i === R_DESK_SURFACE ||
-    i === R_DESK_FRONT ||
-    i === R_DESK_DRAWERS ||
-    i === R_DESK_BOTTOM ||
-    i === R_FLOOR
-  ) return t.primaryDim;
-  if (i === R_WALL) return t.dim;
-  if (i >= R_WINDOW_TOP && i <= R_WINDOW_BOTTOM) return t.primaryDim;
   return t.primaryDim;
 }