drexler 0.2.15 → 0.2.17

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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.
+- Adaptive pet UI: full animated panel on wide terminals (cols ≥ 112), bordered compact panel on medium terminals (≥ 48), one-line ticker surfacing the worst stat on tiny terminals.
+- Compact panel routes stats through the existing satirical level ladder (peak/good/ok/low/critical) instead of bare percentages so it matches the Deal Desk surface.
+- Pet save is now atomic (temp file + rename); dead-pet command guard prevents stat mutation during the death exit timer; frame interval pauses when the pet has died.
+- Hardened launch flow: validate CLI flags and config before the first-run API key prompt with reason-specific errors. Fatal handlers moved off the interactive path so Ink's signal-exit can restore the terminal cleanly.
+- Markdown link parser now balances parentheses, so URLs like `https://en.wikipedia.org/wiki/Foo_(bar)` parse correctly.
+- New informational commands: `/setup` prints config + API key source without leaking the key; `/update` prints upgrade instructions and refuses to run installs.
+- Transcript viewport enforces a hard row budget — oversized cards clip with an explicit `... N lines truncated — PageUp scrollback to read` hint; indicators report row counts in addition to item counts; scrollback keys work while a response is streaming.
+- Command palette Enter on bare argument-parent commands (`/theme`, `/model`, `/startup`, `/retry`, `/export`) now reopens the chooser instead of executing the base form; history navigation preserves the unsent draft.
+- Performance: collapsed duplicate width memos, hoisted divider/carpet constants, memoized StatBar, tightened the pet panel frame loop.
+
 ## 0.2.14
 
 - Added a startup Mood panel with a stable boot gauge, percentage-only loading row, and rotating mood-specific posture/detail copy.

package/README.md

@@ -89,7 +89,9 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 
 ### 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.
+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**. After startup, that dashboard remains the primary top chrome. Short terminals automatically suppress oversized startup chrome so the chat stays usable.
+
+Type `/pet` to toggle pet mode for the current session. Pet mode keeps the top dashboard frame and swaps the normal mascot/tips/deal desk layout for a Drexler scene plus pet stats. `/pet on` and `/pet off` set it explicitly. Pet stats still decay and pet commands still work when the pet dashboard is hidden.
 
 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.
 
@@ -134,6 +136,15 @@ Keyboard notes:
 | `/clear`       | shred conversation history (system prompt pinned) |
 | `/exit`        | meeting adjourned                                |
 | `/synergy`     | run a rotating animated morale event             |
+| `/pet [on\|off]` | toggle pet dashboard mode for this session     |
+| `/feed`        | feed Drexler a deal memo                         |
+| `/play`        | corporate synergy game with Drexler              |
+| `/work`        | Drexler grinds the deal pipeline                 |
+| `/praise`      | affirm Drexler's contributions                   |
+| `/rest`        | strategic nap                                    |
+| `/vibe`        | let Drexler choose his own adventure             |
+| `/name [name]` | view or assign Drexler's pet name                |
+| `/profile`     | print Drexler's personnel file                   |
 | `/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 |

package/package.json

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

package/src/commands.ts

@@ -47,6 +47,7 @@ const HELP_TEXT = `New memo to staff! Drexler permit following directives:
   /clear         - shred all documents (reset history)
   /exit          - meeting adjourned
   /synergy       - SYNERGY!
+  /pet [on|off]  - toggle pet dashboard mode
   /feed          - feed Drexler a deal memo
   /play          - corporate synergy game with Drexler
   /work          - Drexler grinds the deal pipeline
@@ -86,6 +87,7 @@ export const COMMAND_PALETTE: ReadonlyArray<SlashCommand> = [
   { name: "/clear", description: "Reset conversation", group: "directives" },
   { name: "/exit", description: "Adjourn meeting", group: "directives" },
   { name: "/synergy", description: "SYNERGY!", group: "directives" },
+  { name: "/pet", description: "Toggle pet dashboard mode", group: "directives" },
   { name: "/feed", description: "Feed Drexler a deal memo", group: "directives" },
   { name: "/play", description: "Play with Drexler", group: "directives" },
   { name: "/work", description: "Drexler grinds deals", group: "directives" },
@@ -369,6 +371,7 @@ export function dispatch(input: string, ctx: CommandContext): CommandAction {
       );
       return { type: "continue" };
 
+    case "pet":
     case "feed":
     case "play":
     case "work":

package/src/index.ts

@@ -57,12 +57,15 @@ Slash commands inside REPL:
   /clear         reset conversation
   /exit          exit
   /synergy       SYNERGY!
+  /pet [on|off]  toggle pet dashboard mode
   /feed          feed Drexler a deal memo
   /play          corporate synergy game (flexing included)
   /work          Drexler grinds the pipeline
   /rest          strategic nap (restores energy)
   /praise        affirm Drexler's contributions
   /vibe          let Drexler choose his own adventure
+  /name [name]   view or assign Drexler's pet name
+  /profile       print Drexler's personnel file
   /model [id]    show or switch model
   /theme [name]  show or switch theme; append save to persist
   /startup [mode] persist startup mode: fast, no-intro, normal

package/src/ui/App.tsx

@@ -28,9 +28,10 @@ import {
 } from "../pet/petState.ts";
 import { DeathScreen } from "./DeathScreen.tsx";
 import {
-  PetPanel,
-  PET_PANEL_ROWS,
-  PET_PANEL_WIDTH,
+  CompactPetPanel,
+  COMPACT_PET_PANEL_MIN_WIDTH,
+  COMPACT_PET_PANEL_ROWS,
+  TINY_PET_PANEL_ROWS,
   type Environment,
 } from "./PetPanel.tsx";
 import {
@@ -90,11 +91,6 @@ import {
 import { getActiveTheme } from "./themes.ts";
 
 const TRANSCRIPT_CHROME_ROWS = 12;
-const PET_PANEL_MIN_MAIN_COLUMNS = 91;
-const PET_PANEL_GAP_COLUMNS = 1;
-const PET_PANEL_MIN_COLUMNS =
-  PET_PANEL_WIDTH + PET_PANEL_GAP_COLUMNS + PET_PANEL_MIN_MAIN_COLUMNS;
-const PET_PANEL_MIN_ROWS = TRANSCRIPT_CHROME_ROWS + PET_PANEL_ROWS;
 
 export function transcriptRowsForTerminalRows(rows: number): number {
   return Math.max(1, Math.min(24, rows - TRANSCRIPT_CHROME_ROWS));
@@ -196,6 +192,7 @@ interface AppProps {
   fetchFn?: FetchFn;
   greeting?: string;
   showIntroChrome?: boolean;
+  introInitiallyDone?: boolean;
 }
 
 export function App({
@@ -205,6 +202,7 @@ export function App({
   fetchFn,
   greeting,
   showIntroChrome = false,
+  introInitiallyDone = false,
 }: AppProps) {
   const { exit } = useApp();
   const { stdout } = useStdout();
@@ -226,27 +224,38 @@ export function App({
   const mode = useMemo(() => pickLayout(cols), [cols]);
   const chromeWidth = useMemo(() => Math.max(1, cols), [cols]);
   const isCompact = mode === "very-narrow";
-  const integratedIntro =
-    showIntroChrome && typeof greeting === "string" && rows >= 32;
-  const showPetPanel =
-    cols >= PET_PANEL_MIN_COLUMNS && rows >= PET_PANEL_MIN_ROWS && !integratedIntro;
-  const petPanelReservedWidth = showPetPanel
-    ? PET_PANEL_WIDTH + PET_PANEL_GAP_COLUMNS
+  const [introDone, setIntroDone] = useState(introInitiallyDone);
+  const dashboardAllowed = showIntroChrome && typeof greeting === "string";
+  const showFullDashboard = dashboardAllowed && rows >= 32;
+  const introActive = showFullDashboard && !introDone;
+  const [petMode, setPetMode] = useState(false);
+  const petModeRef = useRef(false);
+  const showFallbackPetPanel = petMode && !showFullDashboard;
+  const fallbackPetRowBudget = showFallbackPetPanel
+    ? cols >= COMPACT_PET_PANEL_MIN_WIDTH
+      ? COMPACT_PET_PANEL_ROWS
+      : TINY_PET_PANEL_ROWS
     : 0;
-  const contentWidth = showPetPanel
-    ? Math.max(1, cols - petPanelReservedWidth)
-    : chromeWidth;
+  const contentWidth = chromeWidth;
   const contentInputWidth = Math.max(1, contentWidth);
   const contentStatusWidth = Math.max(1, contentInputWidth - 2);
-  const introRowBudget =
-    integratedIntro ? (chromeWidth >= 112 ? 14 : chromeWidth >= 72 ? 26 : 6) : 0;
+  const dashboardRowBudget =
+    showFullDashboard
+      ? chromeWidth >= 112
+        ? 14
+        : chromeWidth >= 72
+          ? 26
+          : 6
+      : 0;
   const maxTranscriptRows = useMemo(
     () =>
       Math.max(
         1,
-        transcriptRowsForTerminalRows(rows) - introRowBudget,
+        transcriptRowsForTerminalRows(rows) -
+          dashboardRowBudget -
+          fallbackPetRowBudget,
       ),
-    [introRowBudget, rows],
+    [dashboardRowBudget, fallbackPetRowBudget, rows],
   );
 
   const [items, setItems] = useState<ChatItem[]>([]);
@@ -299,7 +308,14 @@ 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 handleIntroComplete = useCallback(() => {
+    setIntroDone(true);
+  }, []);
+  const intro = useIntroAnimation(
+    chromeWidth,
+    introActive,
+    handleIntroComplete,
+  );
 
   const [petStats, setPetStats] = useState<PetStats>(() => loadPetState());
   const [petActivity, setPetActivity] = useState<PetActivity>("idle");
@@ -373,6 +389,10 @@ export function App({
     },
     [],
   );
+  const setDashboardPetMode = useCallback((next: boolean) => {
+    petModeRef.current = next;
+    setPetMode(next);
+  }, []);
   const updatePetStats = useCallback((updater: (stats: PetStats) => PetStats) => {
     setPetStats((stats) => {
       const next = updater(stats);
@@ -405,11 +425,6 @@ export function App({
 
   // Real-time stat decay matches the offline per-hour decay rate.
   useEffect(() => {
-    if (!showPetPanel) {
-      return () => {
-        savePetState(petStatsRef.current);
-      };
-    }
     petDecayTimerRef.current = setInterval(() => {
       updatePetStats(applyMinuteDecay);
     }, 60_000);
@@ -424,11 +439,11 @@ export function App({
       }
       savePetState(petStatsRef.current);
     };
-  }, [showPetPanel, updatePetStats]);
+  }, [updatePetStats]);
 
   // Death detection
   useEffect(() => {
-    if (!showPetPanel || isDead || !isPetDead(petStats)) return;
+    if (isDead || !isPetDead(petStats)) return;
     const reason =
       petStats.hunger <= 0 ? "hunger" :
       petStats.happiness <= 0 ? "happiness" : "energy";
@@ -439,7 +454,7 @@ export function App({
     petStatsRef.current = deadStats;
     savePetState(deadStats);
     exitTimerRef.current = setTimeout(() => exit(), 5000);
-  }, [petStats, showPetPanel, isDead, exit]);
+  }, [petStats, isDead, exit]);
 
   const paletteItems = useMemo(() => filterPaletteByPrefix(input), [input]);
   const paletteOpen = paletteItems.length > 0;
@@ -674,6 +689,38 @@ export function App({
         runSynergyEvent();
         return;
       }
+      if (slashCommand === "/pet") {
+        const arg = lower.slice("/pet".length).trim();
+        if (arg === "") {
+          const next = !petModeRef.current;
+          setDashboardPetMode(next);
+          addItem(
+            "system",
+            next
+              ? "Pet dashboard enabled. Deal desk converted to habitat."
+              : "Pet dashboard disabled. Deal desk restored.",
+          );
+          return;
+        }
+        if (arg === "on" || arg === "off") {
+          const next = arg === "on";
+          const changed = petModeRef.current !== next;
+          setDashboardPetMode(next);
+          addItem(
+            "system",
+            changed
+              ? next
+                ? "Pet dashboard enabled. Deal desk converted to habitat."
+                : "Pet dashboard disabled. Deal desk restored."
+              : next
+                ? "Pet dashboard already enabled."
+                : "Pet dashboard already disabled.",
+          );
+          return;
+        }
+        addItem("system", "Usage: /pet, /pet on, or /pet off.");
+        return;
+      }
       const isPetCommand =
         slashCommand === "/feed" ||
         slashCommand === "/play" ||
@@ -848,11 +895,11 @@ export function App({
       config,
       activeTheme,
       model,
-      petStats,
       PET_MESSAGES,
       removeLastAssistantItem,
       runLLM,
       runSynergyEvent,
+      setDashboardPetMode,
       triggerExit,
       triggerPetActivity,
       updatePetStats,
@@ -1116,9 +1163,9 @@ export function App({
       messageCount={msgCount}
       status={headerStatus}
       compact={isCompact}
-      notice={!integratedIntro ? deskNotice ?? undefined : undefined}
+      notice={!introActive ? deskNotice ?? undefined : undefined}
       maxWidth={Math.max(1, width)}
-      marginBottom={integratedIntro ? 0 : 1}
+      marginBottom={introActive ? 0 : 1}
     />
   );
   const dealDeskHeader = renderDealDeskHeader(chromeWidth);
@@ -1135,34 +1182,39 @@ export function App({
   return (
     <ThemeProvider value={activeTheme}>
       <Box flexDirection="column">
-        {integratedIntro ? (
+        {showFullDashboard && typeof greeting === "string" ? (
           <Box marginBottom={1}>
             <MascotDashboard
               greeting={greeting}
               width={chromeWidth}
               mood={mood}
-              bootProgress={intro.progress}
-              state={intro.state}
-              bar={intro.bar}
-              barColor={introBarColor}
-              mascotStatus={intro.status}
+              mode={petMode && !introActive ? "pet" : "normal"}
+              petStats={petStats}
+              petActivity={petActivity}
+              petEnv={petEnv}
+              petPaused={isBusy}
+              bootProgress={introActive ? intro.progress : 1}
+              state={introActive ? intro.state : undefined}
+              bar={introActive ? intro.bar : undefined}
+              barColor={introActive ? introBarColor : undefined}
+              mascotStatus={introActive ? intro.status : undefined}
               dealDesk={renderDealDeskHeader}
             />
           </Box>
+        ) : showFallbackPetPanel ? (
+          <Box marginBottom={1}>
+            <CompactPetPanel
+              stats={petStats}
+              activity={petActivity}
+              env={petEnv}
+              isPaused={isBusy}
+              width={chromeWidth}
+            />
+          </Box>
         ) : (
           dealDeskHeader
         )}
         <Box flexDirection="row" alignItems="flex-start">
-          {showPetPanel && (
-            <Box marginRight={PET_PANEL_GAP_COLUMNS}>
-              <PetPanel
-                stats={petStats}
-                activity={petActivity}
-                env={petEnv}
-                isPaused={isBusy}
-              />
-            </Box>
-          )}
           <Box flexDirection="column" flexGrow={1}>
             <TranscriptViewport
               items={items}

package/src/ui/MascotIntro.tsx

@@ -1,5 +1,14 @@
 import { Box, Text, useApp, useInput, useStdout } from "ink";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  formatTenure,
+  getPetMood,
+  getPetRank,
+  petTenureMs,
+  rankLabel,
+  type PetActivity,
+  type PetStats,
+} from "../pet/petState.ts";
 import { STARTUP_TIPS } from "../startupTips.ts";
 import {
   MascotFrame,
@@ -7,6 +16,14 @@ import {
   type MascotState,
 } from "./MascotFrame.tsx";
 import { displayWidth, fitDisplayText } from "./graphemes.ts";
+import {
+  COMPACT_PET_PANEL_MIN_WIDTH,
+  CompactPetPanel,
+  getPetStatusMessage,
+  PetScene,
+  PET_SCENE_WIDTH,
+  type Environment,
+} from "./PetPanel.tsx";
 import { useTheme } from "./ThemeContext.tsx";
 
 interface IntroFrame extends MascotState {
@@ -152,6 +169,13 @@ const MAX_MOOD_PANEL_WIDTH = 44;
 const RIGHT_COLUMN_INSET = 1;
 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 = 12;
+const PET_SPLIT_DIVIDER_ROWS: number[] = Array.from(
+  { length: PET_SPLIT_DIVIDER_HEIGHT },
+  (_, i) => i,
+);
 
 export type MascotLayoutMode = "tiny" | "compact" | "stacked" | "split";
 
@@ -257,6 +281,11 @@ interface MascotDashboardProps {
   greeting: string;
   width: number;
   mood?: string;
+  mode?: "normal" | "pet";
+  petStats?: PetStats;
+  petActivity?: PetActivity;
+  petEnv?: Environment;
+  petPaused?: boolean;
   bootProgress?: number;
   state?: MascotState;
   bar?: string;
@@ -780,10 +809,357 @@ function MoodReadout({
   );
 }
 
+function padDisplayText(input: string, width: number): string {
+  const safeWidth = Math.max(1, width);
+  const fitted = fitDisplayText(input, safeWidth);
+  return `${fitted}${" ".repeat(Math.max(0, safeWidth - displayWidth(fitted)))}`;
+}
+
+function PetSceneReadout({
+  stats,
+  activity,
+  env,
+  isPaused,
+  width,
+}: {
+  stats: PetStats;
+  activity: PetActivity;
+  env: Environment;
+  isPaused: boolean;
+  width: number;
+}) {
+  const t = useTheme();
+  const safeWidth = Math.max(1, Math.floor(width));
+
+  if (safeWidth < PET_SCENE_WIDTH) {
+    return (
+      <CompactPetPanel
+        stats={stats}
+        activity={activity}
+        env={env}
+        isPaused={isPaused}
+        width={safeWidth}
+      />
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={safeWidth} alignItems="center">
+      <Text bold color={t.primaryLight}>
+        {fitDisplayText(`Drexler Pet Desk [${env}]`, safeWidth)}
+      </Text>
+      <PetScene
+        stats={stats}
+        activity={activity}
+        env={env}
+        isPaused={isPaused}
+      />
+    </Box>
+  );
+}
+
+function PetStatsBodyLine({
+  text,
+  width,
+  color,
+}: {
+  text: string;
+  width: number;
+  color: string;
+}) {
+  const t = useTheme();
+  const innerWidth = Math.max(1, width - 4);
+  const content = padDisplayText(text, innerWidth);
+  return (
+    <Text>
+      <Text color={t.primary}>│ </Text>
+      <Text color={color}>{content}</Text>
+      <Text color={t.primary}> │</Text>
+    </Text>
+  );
+}
+
+function PetDashboardStatBar({
+  label,
+  value,
+  width,
+}: {
+  label: string;
+  value: number;
+  width: number;
+}) {
+  const t = useTheme();
+  const innerWidth = Math.max(1, width - 4);
+  const pct = `${Math.round(value).toString().padStart(3)}%`;
+  const labelText = padDisplayText(label, Math.min(7, innerWidth));
+  const prefixWidth = displayWidth(labelText);
+  const barWidth = Math.max(
+    1,
+    innerWidth - prefixWidth - displayWidth(pct) - 2,
+  );
+  const bounded = Math.max(0, Math.min(100, value));
+  const filled = Math.max(
+    0,
+    Math.min(barWidth, Math.round((bounded / 100) * barWidth)),
+  );
+  const empty = Math.max(0, barWidth - filled);
+  const bar = `${"█".repeat(filled)}${"░".repeat(empty)}`;
+  const used = prefixWidth + 1 + displayWidth(bar) + 1 + displayWidth(pct);
+  const isLow = value < 25;
+  const barColor = isLow
+    ? t.warning
+    : label === "deals"
+      ? t.primaryDim
+      : t.primaryLight;
+
+  if (innerWidth < 14) {
+    return (
+      <PetStatsBodyLine
+        text={`${label} ${pct}`}
+        width={width}
+        color={isLow ? t.warning : t.text}
+      />
+    );
+  }
+
+  return (
+    <Text>
+      <Text color={t.primary}>│ </Text>
+      <Text color={t.dim}>{labelText} </Text>
+      <Text color={barColor}>{bar}</Text>
+      <Text color={isLow ? t.warning : t.dim}> {pct}</Text>
+      <Text color={t.primary}>
+        {" ".repeat(Math.max(0, innerWidth - used))} │
+      </Text>
+    </Text>
+  );
+}
+
+function PetStatsReadout({
+  stats,
+  activity,
+  env,
+  width,
+}: {
+  stats: PetStats;
+  activity: PetActivity;
+  env: Environment;
+  width: number;
+}) {
+  const t = useTheme();
+  const panelWidth = Math.max(
+    1,
+    Math.min(PET_STATS_MAX_WIDTH, Math.floor(width)),
+  );
+  const innerWidth = Math.max(1, panelWidth - 4);
+  const mood = getPetMood(stats);
+  const rank = rankLabel(getPetRank(stats));
+  const name = stats.name ?? "Drexler";
+  const activityLabel = activity === "idle" ? "idle" : activity;
+  const title = "Pet Stats";
+  const topPrefix = "╭─ ";
+  const topSuffix = " ";
+  const topRule = "─".repeat(
+    Math.max(
+      0,
+      panelWidth -
+        displayWidth(topPrefix) -
+        displayWidth(title) -
+        displayWidth(topSuffix) -
+        displayWidth("╮"),
+    ),
+  );
+  const memo = `memo ${getPetStatusMessage(stats, 0)}`;
+
+  if (panelWidth < PET_STATS_MIN_WIDTH) {
+    return (
+      <Box flexDirection="column" width={panelWidth}>
+        <Text bold color={t.primaryLight}>
+          {fitDisplayText("Pet Stats", panelWidth)}
+        </Text>
+        <Text color={t.text}>
+          {fitDisplayText(`${name} / ${rank}`, panelWidth)}
+        </Text>
+        <Text color={t.dim}>
+          {fitDisplayText(`${mood} / ${activityLabel}`, panelWidth)}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={panelWidth}>
+      <Text color={t.primary}>
+        {topPrefix}
+        <Text bold color={t.primaryLight}>{title}</Text>
+        {topSuffix}
+        {topRule}
+        ╮
+      </Text>
+      <PetStatsBodyLine
+        text={`name ${name}`}
+        width={panelWidth}
+        color={t.text}
+      />
+      <PetStatsBodyLine
+        text={`rank ${rank} · mood ${mood}`}
+        width={panelWidth}
+        color={t.primaryLight}
+      />
+      <PetStatsBodyLine
+        text={`activity ${activityLabel} · env ${env}`}
+        width={panelWidth}
+        color={t.dim}
+      />
+      <PetStatsBodyLine
+        text={`tenure ${formatTenure(petTenureMs(stats))}`}
+        width={panelWidth}
+        color={t.dim}
+      />
+      <PetStatsBodyLine
+        text={"─".repeat(innerWidth)}
+        width={panelWidth}
+        color={t.primaryDim}
+      />
+      <PetDashboardStatBar
+        label="happy"
+        value={stats.happiness}
+        width={panelWidth}
+      />
+      <PetDashboardStatBar
+        label="hunger"
+        value={stats.hunger}
+        width={panelWidth}
+      />
+      <PetDashboardStatBar
+        label="energy"
+        value={stats.energy}
+        width={panelWidth}
+      />
+      <PetDashboardStatBar
+        label="deals"
+        value={stats.deals}
+        width={panelWidth}
+      />
+      <PetStatsBodyLine
+        text={memo}
+        width={panelWidth}
+        color={t.dim}
+      />
+      <Text color={t.primary}>{titledPanelBottom(panelWidth)}</Text>
+    </Box>
+  );
+}
+
+function PetDashboard({
+  layout,
+  stats,
+  activity,
+  env,
+  isPaused,
+}: {
+  layout: MascotLayout;
+  stats: PetStats;
+  activity: PetActivity;
+  env: Environment;
+  isPaused: boolean;
+}) {
+  const t = useTheme();
+  const sideBySide = layout.mode === "split";
+
+  if (layout.mode === "tiny" || layout.mode === "compact") {
+    return (
+      <Box
+        marginLeft={layout.leftPanel.inset}
+        width={layout.available}
+        flexDirection="column"
+      >
+        <CompactPetPanel
+          stats={stats}
+          activity={activity}
+          env={env}
+          isPaused={isPaused}
+          width={Math.max(1, layout.available)}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box width={layout.available}>
+      <Box
+        width={layout.available}
+        borderStyle="round"
+        borderColor={t.primary}
+        paddingX={1}
+        flexDirection={sideBySide ? "row" : "column"}
+        alignItems={sideBySide ? "flex-start" : "center"}
+      >
+        <Box
+          flexDirection="column"
+          width={layout.leftPanel.width}
+          alignItems="center"
+        >
+          <PetSceneReadout
+            stats={stats}
+            activity={activity}
+            env={env}
+            isPaused={isPaused}
+            width={layout.leftPanel.width}
+          />
+        </Box>
+        {sideBySide ? (
+          <>
+            <Box
+              flexDirection="column"
+              width={SPLIT_DIVIDER_WIDTH}
+              flexShrink={0}
+            >
+              {PET_SPLIT_DIVIDER_ROWS.map((idx) => (
+                <Text key={idx} color={t.primaryDim}>
+                  {" │ "}
+                </Text>
+              ))}
+            </Box>
+            <Box
+              flexDirection="column"
+              width={layout.rightColumn.width}
+              paddingRight={RIGHT_COLUMN_PAD_RIGHT}
+            >
+              <Box marginLeft={layout.dealDesk.inset}>
+                <PetStatsReadout
+                  stats={stats}
+                  activity={activity}
+                  env={env}
+                  width={Math.min(PET_STATS_MAX_WIDTH, layout.dealDesk.width)}
+                />
+              </Box>
+            </Box>
+          </>
+        ) : (
+          <Box marginTop={1} width={layout.tips.width} alignItems="center">
+            <PetStatsReadout
+              stats={stats}
+              activity={activity}
+              env={env}
+              width={Math.max(COMPACT_PET_PANEL_MIN_WIDTH, layout.tips.width)}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 export function MascotDashboard({
   greeting,
   width,
   mood,
+  mode = "normal",
+  petStats,
+  petActivity = "idle",
+  petEnv = "office",
+  petPaused = false,
   bootProgress = 1,
   state = INTRO_FRAMES[INTRO_FRAMES.length - 1]!,
   bar = introBootBar(INTRO_FRAMES.length - 1, INTRO_FRAMES.length),
@@ -799,6 +1175,18 @@ export function MascotDashboard({
     ? fixedDisplayRows(greeting, layout.copy.width, 2)
     : [];
 
+  if (mode === "pet" && petStats) {
+    return (
+      <PetDashboard
+        layout={layout}
+        stats={petStats}
+        activity={petActivity}
+        env={petEnv}
+        isPaused={petPaused}
+      />
+    );
+  }
+
   if (layout.mode === "tiny") {
     return (
       <Box width={layout.available} flexDirection="column">

package/src/ui/PetPanel.tsx

@@ -1,17 +1,18 @@
 import { Box, Text } from "ink";
 import { memo, useEffect, useMemo, useState } from "react";
 import { getPetMood, type PetActivity, type PetStats } from "../pet/petState.ts";
-import { displayWidth, fitDisplayText } from "./graphemes.ts";
+import { fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 import { type Theme } from "./themes.ts";
 
-export const PET_PANEL_WIDTH = 36;
-export const PET_PANEL_ROWS = 22;
+export const COMPACT_PET_PANEL_ROWS = 5;
+export const TINY_PET_PANEL_ROWS = 1;
+export const COMPACT_PET_PANEL_MIN_WIDTH = 48;
 export type Environment = "office" | "home" | "outdoors";
 
 const PANEL_BORDER_COLUMNS = 2;
 const PANEL_PADDING_COLUMNS = 2;
-const CONTENT = PET_PANEL_WIDTH - PANEL_BORDER_COLUMNS - PANEL_PADDING_COLUMNS;
+const CONTENT = 32;
 const SPRITE_W = 8;
 
 const R_SKY   = 0;
@@ -21,6 +22,7 @@ const R_DECO  = 3;
 const R_SP0   = 4;  // sprite occupies rows 4–9
 const R_FLOOR = 10;
 const SCENE_ROWS = 11;
+export const PET_SCENE_WIDTH = CONTENT;
 
 // Fixed sprite X — no left/right walking
 const SPRITE_X: Record<PetActivity, number> = {
@@ -38,10 +40,6 @@ function place(base: string, text: string, x: number): string {
   const fit = text.slice(0, end - x);
   return base.slice(0, x) + fit + base.slice(end);
 }
-function pad(s: string, n: number): string {
-  const fitted = fitDisplayText(s, n);
-  return fitted + " ".repeat(Math.max(0, n - displayWidth(fitted)));
-}
 
 // Hoisted constant: floor pattern for home doesn't depend on frame.
 const HOME_CARPET = Array.from({ length: CONTENT }, (_, i) =>
@@ -426,36 +424,33 @@ function getStatusMsg(stats: PetStats, frame: number): string {
   return msgs[Math.floor(frame / 10) % msgs.length] ?? "Operational.";
 }
 
-// ─── stat bar ─────────────────────────────────────────────────────────────────
-function StatBarInner({
-  label, value, barColor, labelColor, warnColor,
-}: {
-  label: string; value: number; barColor: string; labelColor: string; warnColor: string;
-}) {
-  const filled = Math.round((value / 100) * 14);
-  const bar = "█".repeat(filled) + "░".repeat(14 - filled);
-  const pct = String(Math.round(value)).padStart(3);
-  const isLow = value < 25;
-  return (
-    <Text>
-      <Text color={labelColor}>{pad(label, 6)}</Text>
-      <Text color={isLow ? warnColor : barColor}>{bar}</Text>
-      <Text color={isLow ? warnColor : labelColor}> {pct}%</Text>
-    </Text>
-  );
+export function getPetStatusMessage(stats: PetStats, frame = 0): string {
+  return getStatusMsg(stats, frame);
 }
-const StatBar = memo(StatBarInner);
 
 // ─── component ────────────────────────────────────────────────────────────────
-interface PetPanelProps {
+interface PetSceneProps {
   stats: PetStats;
   activity: PetActivity;
   env?: Environment;
   isPaused?: boolean;
 }
 
-function PetPanelView({ stats, activity, env = "office", isPaused = false }: PetPanelProps) {
-  const t = useTheme();
+interface CompactPetPanelProps extends PetSceneProps {
+  width: number;
+}
+
+function usePetFrame({
+  activity,
+  env,
+  isPaused,
+  dead,
+}: {
+  activity: PetActivity;
+  env: Environment;
+  isPaused: boolean;
+  dead: boolean;
+}) {
   const [frame, setFrame] = useState(0);
 
   useEffect(() => {
@@ -463,75 +458,167 @@ function PetPanelView({ stats, activity, env = "office", isPaused = false }: Pet
   }, [activity, env]);
 
   useEffect(() => {
-    if (isPaused) return;
+    // Skip frame ticks when paused or when the pet has died — DeathScreen
+    // takes over the UI, no point burning a setInterval that mutates state
+    // nothing will read.
+    if (isPaused || dead) return;
     const id = setInterval(() => {
       setFrame((f) => f + 1);
     }, 800);
     return () => clearInterval(id);
-  }, [isPaused]);
+  }, [dead, isPaused]);
+
+  return frame;
+}
 
+export function PetScene({
+  stats,
+  activity,
+  env = "office",
+  isPaused = false,
+}: PetSceneProps) {
+  const t = useTheme();
+  const frame = usePetFrame({
+    activity,
+    env,
+    isPaused,
+    dead: stats.dead === true,
+  });
   const scene = useMemo(
     () => buildScene(activity, frame, stats, env),
     [activity, frame, stats, env],
   );
-  const mood = useMemo(() => getPetMood(stats), [stats]);
-  const status = useMemo(
-    () => pad(`memo ${getStatusMsg(stats, frame)}`, CONTENT),
-    [stats, frame],
+
+  return (
+    <Box flexDirection="column" width={PET_SCENE_WIDTH}>
+      {scene.map((row, i) => (
+        <Text key={i} color={rowColor(i, activity, frame, t)}>{row}</Text>
+      ))}
+    </Box>
+  );
+}
+
+function pct(value: number): string {
+  return `${Math.round(value)}%`;
+}
+
+const STAT_LEVEL_LABEL: Record<MsgLevel, string> = {
+  critical: "critical",
+  low: "low",
+  ok: "ok",
+  good: "good",
+  great: "peak",
+};
+
+interface CompactStatProfile {
+  hunger: MsgLevel;
+  happiness: MsgLevel;
+  energy: MsgLevel;
+  deals: MsgLevel;
+}
+
+function compactStatProfile(stats: PetStats): CompactStatProfile {
+  return {
+    hunger: statLevel(stats.hunger),
+    happiness: statLevel(stats.happiness),
+    energy: statLevel(stats.energy),
+    deals: statLevel(stats.deals),
+  };
+}
+
+interface WorstStat {
+  key: "hunger" | "happiness" | "energy" | "deals";
+  value: number;
+}
+
+function pickWorstStat(stats: PetStats): WorstStat {
+  const entries: WorstStat[] = [
+    { key: "hunger", value: stats.hunger },
+    { key: "happiness", value: stats.happiness },
+    { key: "energy", value: stats.energy },
+    { key: "deals", value: stats.deals },
+  ];
+  return entries.reduce((best, cur) =>
+    cur.value < best.value ? cur : best,
   );
-  const title = fitDisplayText(`DREXLER DEAL DESK [${env}]`, CONTENT);
-  const activityLabel = activity !== "idle" ? ` / ${activity}` : "";
-  const moodLabel = `mood ${mood}`;
-  const fittedMood = activityLabel
-    ? fitDisplayText(moodLabel, Math.max(1, CONTENT - displayWidth(activityLabel)))
-    : fitDisplayText(moodLabel, CONTENT);
-  const fittedActivity = activityLabel && displayWidth(fittedMood) < CONTENT
-    ? fitDisplayText(activityLabel, CONTENT - displayWidth(fittedMood))
-    : "";
+}
+
+function CompactPetPanelView({
+  stats,
+  activity,
+  env = "office",
+  isPaused = false,
+  width,
+}: CompactPetPanelProps) {
+  const t = useTheme();
+  const safeWidth = Math.max(1, width);
+
+  // Rotate the memo every 10s so the compact panel doesn't feel static.
+  // Paused panels lock to a single message (no decay-tick to refresh anyway).
+  const [tick, setTick] = useState(() => Math.floor(Date.now() / 10_000));
+  useEffect(() => {
+    if (isPaused) return;
+    const id = setInterval(() => {
+      setTick(Math.floor(Date.now() / 10_000));
+    }, 10_000);
+    return () => clearInterval(id);
+  }, [isPaused]);
+
+  const mood = getPetMood(stats);
+  const profile = compactStatProfile(stats);
+  const activityCopy = activity === "idle" ? env : `${env} / ${activity}`;
+  const title = "Drexler Pet Desk";
+  const statLine = [
+    `happy ${STAT_LEVEL_LABEL[profile.happiness]}`,
+    `hungr ${STAT_LEVEL_LABEL[profile.hunger]}`,
+    `enrgy ${STAT_LEVEL_LABEL[profile.energy]}`,
+    `deals ${STAT_LEVEL_LABEL[profile.deals]}`,
+  ].join("  ·  ");
+  const statusLine = `memo ${getStatusMsg(stats, tick)}`;
+
+  if (safeWidth < COMPACT_PET_PANEL_MIN_WIDTH) {
+    // Worst stat drives the ticker so an idle eye still catches a failing
+    // metric instead of a fixed happy/energy readout.
+    const worst = pickWorstStat(stats);
+    const worstLevel = statLevel(worst.value);
+    const accent = worstLevel === "critical" || worstLevel === "low"
+      ? t.warning
+      : t.primary;
+    return (
+      <Box width={safeWidth} flexShrink={1}>
+        <Text color={accent}>
+          {fitDisplayText(
+            `pet ${mood} · ${worst.key} ${pct(worst.value)} (${worstLevel})`,
+            safeWidth,
+          )}
+        </Text>
+      </Box>
+    );
+  }
+
+  const innerWidth = Math.max(1, safeWidth - PANEL_BORDER_COLUMNS - PANEL_PADDING_COLUMNS);
+  const header = `${title} [${activityCopy}]`;
 
   return (
     <Box
       flexDirection="column"
-      width={PET_PANEL_WIDTH}
-      flexShrink={0}
+      width={safeWidth}
+      flexShrink={1}
       borderStyle="round"
       borderColor={t.primaryDim}
+      paddingX={1}
     >
-      <Box paddingX={1} justifyContent="center">
-        <Text color={t.primary} bold>{title}</Text>
-      </Box>
-
-      <Box flexDirection="column" paddingX={1}>
-        {scene.map((row, i) => (
-          <Text key={i} color={rowColor(i, activity, frame, t)}>{row}</Text>
-        ))}
-      </Box>
-
-      <Box paddingX={1}>
-        <Text color={t.primaryDim}>{"─".repeat(CONTENT)}</Text>
-      </Box>
-
-      <Box flexDirection="column" paddingX={1}>
-        <StatBar label="happy" value={stats.happiness} barColor={t.primary}      labelColor={t.dim} warnColor={t.error} />
-        <StatBar label="hungr" value={stats.hunger}    barColor={t.primaryLight} labelColor={t.dim} warnColor={t.warning} />
-        <StatBar label="enrgy" value={stats.energy}    barColor={t.primaryLight} labelColor={t.dim} warnColor={t.warning} />
-        <StatBar label="deals" value={stats.deals}     barColor={t.primaryDim}   labelColor={t.dim} warnColor={t.warning} />
+      <Box>
+        <Text color={t.primary} bold>{fitDisplayText(header, innerWidth)}</Text>
       </Box>
-
-      <Box paddingX={1}>
-        <Text color={t.primaryDim}>{"─".repeat(CONTENT)}</Text>
+      <Box>
+        <Text color={t.text}>{fitDisplayText(statLine, innerWidth)}</Text>
       </Box>
-
-      <Box paddingX={1}>
-        <Text color={t.dim}>{status}</Text>
-      </Box>
-
-      <Box paddingX={1}>
-        <Text color={t.dim}>{fittedMood}</Text>
-        {fittedActivity && <Text color={t.primaryDim}>{fittedActivity}</Text>}
+      <Box>
+        <Text color={t.dim}>{fitDisplayText(`${mood} · ${statusLine}`, innerWidth)}</Text>
       </Box>
     </Box>
   );
 }
 
-export const PetPanel = memo(PetPanelView);
+export const CompactPetPanel = memo(CompactPetPanelView);