drexler 0.2.19 → 0.2.21

package/package.json

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

package/src/ui/App.tsx

@@ -910,6 +910,21 @@ export function App({
         return;
       }
       if (isSlash(line)) {
+        // Bare /theme, /model, /startup, /retry, /export — repopulate the
+        // input with "<cmd> " so the palette catches the argument chooser
+        // and the user picks via ↑↓ + Enter. Avoids the "print current
+        // value and dead-end" feeling of dispatching the base command.
+        const lower = line.toLowerCase();
+        if (isArgumentParentCommand(lower)) {
+          const filled = `${lower} `;
+          updateDraft({ value: filled, cursor: graphemeLength(filled) });
+          setPaletteIdx(0);
+          addItem(
+            "system",
+            `Pick a ${lower.slice(1)} option below — ↑↓ to choose, Enter to apply, Esc to cancel.`,
+          );
+          return;
+        }
         await handleSlashWithMutation(line);
         return;
       }
@@ -918,7 +933,14 @@ export function App({
       setMsgCount(conversation.length);
       await runLLM();
     },
-    [addItem, conversation, handleSlashWithMutation, runLLM],
+    [
+      addItem,
+      conversation,
+      handleSlashWithMutation,
+      runLLM,
+      setPaletteIdx,
+      updateDraft,
+    ],
   );
 
   const reportSubmitError = useCallback(

package/src/ui/MascotIntro.tsx

@@ -171,7 +171,7 @@ const RIGHT_COLUMN_PAD_RIGHT = 1;
 const LEFT_PANEL_MIN_COPY = 24;
 const PET_STATS_MIN_WIDTH = 24;
 const PET_STATS_MAX_WIDTH = 58;
-const PET_SPLIT_DIVIDER_HEIGHT = 15;
+const PET_SPLIT_DIVIDER_HEIGHT = 19;
 const PET_SPLIT_DIVIDER_ROWS: number[] = Array.from(
   { length: PET_SPLIT_DIVIDER_HEIGHT },
   (_, i) => i,

package/src/ui/PetPanel.tsx

@@ -18,14 +18,17 @@ export type Environment = "office" | "home" | "outdoors";
 
 const PANEL_BORDER_COLUMNS = 2;
 const PANEL_PADDING_COLUMNS = 2;
-const SCENE_ROWS = 14;
+const SCENE_ROWS = 18;
 const R_WALL = 0;
 const R_WINDOW_TOP = 1;
-const R_WINDOW_BOTTOM = 3;
-const R_ACTIVITY = 4;
-const R_MASCOT_START = 5;
+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;
 
 export const PET_SCENE_WIDTH = 52;
 
@@ -36,6 +39,14 @@ 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);
 }
@@ -46,6 +57,13 @@ 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);
 }
@@ -73,23 +91,33 @@ function sceneBoxBottom(width: number): string {
   return `╰${"─".repeat(safeWidth - 2)}╯`;
 }
 
-function placeSceneBox(
+function placeBoxLines(
   rows: string[],
   row: number,
   x: number,
   width: number,
   title: string,
-  body: string,
+  body: readonly string[],
 ): void {
   rows[row] = place(rows[row] ?? "", sceneBoxTop(title, width), x);
-  rows[row + 1] = place(rows[row + 1] ?? "", sceneBoxBody(body, width), x);
-  rows[row + 2] = place(rows[row + 2] ?? "", sceneBoxBottom(width), x);
+  for (let i = 0; i < body.length; i++) {
+    rows[row + i + 1] = place(
+      rows[row + i + 1] ?? "",
+      sceneBoxBody(body[i] ?? "", width),
+      x,
+    );
+  }
+  rows[row + body.length + 1] = place(
+    rows[row + body.length + 1] ?? "",
+    sceneBoxBottom(width),
+    x,
+  );
 }
 
 function cupForEnergy(energy: number): string {
-  if (energy > 60) return "coffee [c~]";
-  if (energy > 30) return "coffee [c-]";
-  return "coffee [c_]";
+  if (energy > 60) return "c~";
+  if (energy > 30) return "c-";
+  return "c_";
 }
 
 function progressTicker(frame: number): string {
@@ -196,27 +224,81 @@ function drawOfficeBackground(rows: string[], width: number, frame: number, stat
     Math.max(0, width - displayWidth(`pipe ${dealPct}`) - 1),
   );
 
-  const windowWidth = Math.min(22, Math.max(16, Math.floor(width * 0.36)));
-  const boardWidth = Math.min(28, Math.max(20, width - windowWidth - 6));
-  const boardX = Math.max(windowWidth + 4, width - boardWidth - 2);
-  const marketPulse = frame % 10 < 5 ? "market tape  + + +" : "market tape  +  +";
-
-  placeSceneBox(rows, R_WINDOW_TOP, 1, windowWidth, "Market Window", marketPulse);
-  placeSceneBox(
+  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}  fees:${Math.round(stats.happiness)}%`,
+    [
+      `DL ${dealPct}  FEE ${Math.round(stats.happiness).toString().padStart(3)}%`,
+      `PIPE ${tape} $ ${cursor}`,
+    ],
   );
 
+  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}│`,
+      "╰──╯",
+    ]);
+  }
+
   rows[R_ACTIVITY] = centerText(
     "─".repeat(width),
     buildActivityLine("idle", frame),
   );
 }
 
+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╮",
+    "│▤▤▤│",
+    "├────┤",
+    "│▤▤▤│",
+  ]);
+}
+
 function drawActivityAccents(
   rows: string[],
   width: number,
@@ -230,35 +312,38 @@ function drawActivityAccents(
   );
 
   const mascotRight = mascotX + MASCOT_WIDTH;
-  const leftAccentX = Math.max(1, mascotX - 10);
-  const rightAccentX = Math.min(width - 10, mascotRight + 2);
+  const leftAccentX = Math.max(1, mascotX - 3);
+  const fileX = Math.max(1, width - 8);
+  const rightAccentX = Math.min(fileX - 6, mascotRight + 2);
 
   switch (activity) {
     case "eating":
-      rows[R_DESK_SURFACE] = place(rows[R_DESK_SURFACE], "[$ memo]", rightAccentX);
+      rows[R_MASCOT_START + 5] = place(
+        rows[R_MASCOT_START + 5],
+        "╭$╮",
+        Math.max(1, Math.min(fileX - 5, rightAccentX + 1)),
+      );
       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], "*", rightAccentX + 6);
+      rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "*", Math.min(fileX - 2, rightAccentX + 6));
       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], "$", rightAccentX + 6);
+      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "$", Math.min(fileX - 2, rightAccentX + 6));
       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], "* *", rightAccentX + 4);
+      rows[R_MASCOT_START + 1] = place(rows[R_MASCOT_START + 1], "* *", Math.min(fileX - 4, rightAccentX + 4));
       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], "~ ~", rightAccentX + 4);
+      rows[R_MASCOT_START + 3] = place(rows[R_MASCOT_START + 3], "~ ~", Math.min(fileX - 4, rightAccentX + 4));
       break;
     default:
-      rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "[IN]", 2);
-      rows[R_MASCOT_START + 2] = place(rows[R_MASCOT_START + 2], "[OUT]", Math.max(2, width - 8));
       break;
   }
 }
@@ -276,12 +361,57 @@ function drawMascot(rows: string[], width: number, activity: PetActivity, frame:
   return mascotX;
 }
 
+function drawDesktopObjects(
+  rows: string[],
+  width: number,
+  activity: PetActivity,
+  frame: number,
+  stats: PetStats,
+): void {
+  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);
+  }
+
+  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);
+  }
+}
+
 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 = `laptop [▣]  papers [///]  ${cupForEnergy(stats.energy)}`;
-  const front = `DESK  pipeline ${Math.round(stats.deals)}%  covenants OK`;
+  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],
@@ -290,9 +420,23 @@ function drawDesk(rows: string[], width: number, stats: PetStats): void {
   );
   rows[R_DESK_FRONT] = place(
     rows[R_DESK_FRONT],
-    `╰${padDisplayText(front, deskInner)}╯`,
+    `│${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 buildScene(
@@ -305,8 +449,10 @@ function buildScene(
   const rows: string[] = Array.from({ length: SCENE_ROWS }, () => blankRow(sceneWidth));
 
   drawOfficeBackground(rows, sceneWidth, frame, stats);
-  drawDesk(rows, sceneWidth, stats);
+  drawOfficeFurniture(rows, sceneWidth, frame);
   const mascotX = drawMascot(rows, sceneWidth, activity, frame);
+  drawDesktopObjects(rows, sceneWidth, activity, frame, stats);
+  drawDesk(rows, sceneWidth, stats);
   drawActivityAccents(rows, sceneWidth, activity, frame, mascotX);
   return rows.map((row) => overlayFitted(blankRow(sceneWidth), row, 0, sceneWidth));
 }
@@ -329,7 +475,13 @@ function rowColor(i: number, activity: PetActivity, frame: number, t: Theme): st
     if (activity === "playing")   return t.primaryLight;
     return t.primaryLight;
   }
-  if (i === R_DESK_SURFACE || i === R_DESK_FRONT) return t.primaryDim;
+  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;