drexler 0.2.16 → 0.2.17

package/README.md

@@ -89,9 +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.
 
-After startup, the pet UI adapts to the terminal instead of disappearing. Wide terminals show the animated **Drexler Pet Desk** as a right-side panel. Medium terminals show a compact pet panel below the Deal Desk. Tiny terminals show a one-line pet ticker so pet status remains visible without crushing the chat.
+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.
 
@@ -136,6 +136,7 @@ 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                 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drexler",
-  "version": "0.2.16",
+  "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,6 +57,7 @@ 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

package/src/ui/App.tsx

@@ -31,8 +31,6 @@ import {
   CompactPetPanel,
   COMPACT_PET_PANEL_MIN_WIDTH,
   COMPACT_PET_PANEL_ROWS,
-  PetPanel,
-  PET_PANEL_WIDTH,
   TINY_PET_PANEL_ROWS,
   type Environment,
 } from "./PetPanel.tsx";
@@ -93,10 +91,6 @@ import {
 import { getActiveTheme } from "./themes.ts";
 
 const TRANSCRIPT_CHROME_ROWS = 12;
-const PET_PANEL_MIN_MAIN_COLUMNS = 75;
-const PET_PANEL_GAP_COLUMNS = 1;
-const PET_PANEL_MIN_COLUMNS =
-  PET_PANEL_WIDTH + PET_PANEL_GAP_COLUMNS + PET_PANEL_MIN_MAIN_COLUMNS;
 
 export function transcriptRowsForTerminalRows(rows: number): number {
   return Math.max(1, Math.min(24, rows - TRANSCRIPT_CHROME_ROWS));
@@ -198,6 +192,7 @@ interface AppProps {
   fetchFn?: FetchFn;
   greeting?: string;
   showIntroChrome?: boolean;
+  introInitiallyDone?: boolean;
 }
 
 export function App({
@@ -207,6 +202,7 @@ export function App({
   fetchFn,
   greeting,
   showIntroChrome = false,
+  introInitiallyDone = false,
 }: AppProps) {
   const { exit } = useApp();
   const { stdout } = useStdout();
@@ -228,36 +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 [introDone, setIntroDone] = useState(false);
-  const integratedIntro =
-    showIntroChrome &&
-    typeof greeting === "string" &&
-    rows >= 32 &&
-    !introDone;
-  const showPetSidePanel = cols >= PET_PANEL_MIN_COLUMNS && !integratedIntro;
-  const showCompactPetPanel = !showPetSidePanel && !integratedIntro;
-  const compactPetRowBudget = showCompactPetPanel
+  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 petPanelReservedWidth = showPetSidePanel
-    ? PET_PANEL_WIDTH + PET_PANEL_GAP_COLUMNS
-    : 0;
-  const contentWidth = showPetSidePanel
-    ? 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 - compactPetRowBudget,
+        transcriptRowsForTerminalRows(rows) -
+          dashboardRowBudget -
+          fallbackPetRowBudget,
       ),
-    [compactPetRowBudget, introRowBudget, rows],
+    [dashboardRowBudget, fallbackPetRowBudget, rows],
   );
 
   const [items, setItems] = useState<ChatItem[]>([]);
@@ -315,7 +313,7 @@ export function App({
   }, []);
   const intro = useIntroAnimation(
     chromeWidth,
-    integratedIntro,
+    introActive,
     handleIntroComplete,
   );
 
@@ -391,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);
@@ -687,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" ||
@@ -861,11 +895,11 @@ export function App({
       config,
       activeTheme,
       model,
-      petStats,
       PET_MESSAGES,
       removeLastAssistantItem,
       runLLM,
       runSynergyEvent,
+      setDashboardPetMode,
       triggerExit,
       triggerPetActivity,
       updatePetStats,
@@ -1129,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);
@@ -1148,24 +1182,26 @@ 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>
-        ) : (
-          dealDeskHeader
-        )}
-        {showCompactPetPanel && (
+        ) : showFallbackPetPanel ? (
           <Box marginBottom={1}>
             <CompactPetPanel
               stats={petStats}
@@ -1175,18 +1211,10 @@ export function App({
               width={chromeWidth}
             />
           </Box>
+        ) : (
+          dealDeskHeader
         )}
         <Box flexDirection="row" alignItems="flex-start">
-          {showPetSidePanel && (
-            <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,12 +1,10 @@
 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;
@@ -14,9 +12,8 @@ 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 DIVIDER_LINE = "─".repeat(CONTENT);
 
 const R_SKY   = 0;
 const R_BGA   = 1;
@@ -25,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> = {
@@ -42,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) =>
@@ -430,40 +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;
 }
 
-interface CompactPetPanelProps extends PetPanelProps {
+interface CompactPetPanelProps extends PetSceneProps {
   width: number;
 }
 
-function PetPanelView({ stats, activity, env = "office", isPaused = false }: PetPanelProps) {
-  const t = useTheme();
+function usePetFrame({
+  activity,
+  env,
+  isPaused,
+  dead,
+}: {
+  activity: PetActivity;
+  env: Environment;
+  isPaused: boolean;
+  dead: boolean;
+}) {
   const [frame, setFrame] = useState(0);
 
   useEffect(() => {
@@ -474,79 +461,43 @@ function PetPanelView({ stats, activity, env = "office", isPaused = false }: Pet
     // 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 || stats.dead === true) return;
+    if (isPaused || dead) return;
     const id = setInterval(() => {
       setFrame((f) => f + 1);
     }, 800);
     return () => clearInterval(id);
-  }, [isPaused, stats.dead]);
+  }, [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],
-  );
-  const title = fitDisplayText(`DREXLER PET 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))
-    : "";
 
   return (
-    <Box
-      flexDirection="column"
-      width={PET_PANEL_WIDTH}
-      flexShrink={0}
-      borderStyle="round"
-      borderColor={t.primaryDim}
-    >
-      <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}>{DIVIDER_LINE}</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>
-
-      <Box paddingX={1}>
-        <Text color={t.primaryDim}>{DIVIDER_LINE}</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>
+    <Box flexDirection="column" width={PET_SCENE_WIDTH}>
+      {scene.map((row, i) => (
+        <Text key={i} color={rowColor(i, activity, frame, t)}>{row}</Text>
+      ))}
     </Box>
   );
 }
 
-export const PetPanel = memo(PetPanelView);
-
 function pct(value: number): string {
   return `${Math.round(value)}%`;
 }
@@ -580,7 +531,7 @@ interface WorstStat {
   value: number;
 }
 
-export function pickWorstStat(stats: PetStats): WorstStat {
+function pickWorstStat(stats: PetStats): WorstStat {
   const entries: WorstStat[] = [
     { key: "hunger", value: stats.hunger },
     { key: "happiness", value: stats.happiness },