drexler 0.2.13 → 0.2.15

package/src/ui/App.tsx

@@ -1,8 +1,42 @@
 import { Box, Text, useApp, useInput, useStdout } from "ink";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  accrueLifetimeDeals,
+  actionCooldown,
+  applyFeed,
+  applyMinuteDecay,
+  applyName,
+  applyPlay,
+  applyPraise,
+  applyRest,
+  applyVibe,
+  applyWork,
+  formatCooldownRemaining,
+  formatTenure,
+  getPetMood,
+  getPetRank,
+  isPetDead,
+  loadPetState,
+  petTenureMs,
+  rankLabel,
+  sanitizePetName,
+  savePetState,
+  stampAction,
+  type PetActionKey,
+  type PetActivity,
+  type PetStats,
+} from "../pet/petState.ts";
+import { DeathScreen } from "./DeathScreen.tsx";
+import {
+  PetPanel,
+  PET_PANEL_ROWS,
+  PET_PANEL_WIDTH,
+  type Environment,
+} from "./PetPanel.tsx";
 import {
   dispatch,
   filterPaletteByPrefix,
+  isArgumentParentCommand,
   isSlash,
   type CommandAction,
 } from "../commands.ts";
@@ -23,7 +57,6 @@ import {
   WITTICISMS,
 } from "../sayings.ts";
 import { type Config } from "../types.ts";
-import { THEME_NAMES } from "../types.ts";
 import { CommandPalette } from "./CommandPalette.tsx";
 import { DealDeskHeader } from "./DealDeskHeader.tsx";
 import {
@@ -34,7 +67,11 @@ import {
   insertAtCursor,
 } from "./graphemes.ts";
 import { InputBox } from "./InputBox.tsx";
-import { MascotDashboard } from "./MascotIntro.tsx";
+import {
+  introPhaseColor,
+  MascotDashboard,
+  useIntroAnimation,
+} from "./MascotIntro.tsx";
 import { StreamingMessage } from "./Message.tsx";
 import { Spinner } from "./Spinner.tsx";
 import { StatusBar } from "./StatusBar.tsx";
@@ -46,10 +83,18 @@ import {
   type SynergyEventDefinition,
 } from "./SynergyEvent.tsx";
 import { ThemeProvider } from "./ThemeContext.tsx";
-import { TranscriptViewport } from "./TranscriptViewport.tsx";
-import { getActiveTheme, THEMES } from "./themes.ts";
+import {
+  estimateTranscriptRows,
+  TranscriptViewport,
+} from "./TranscriptViewport.tsx";
+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));
@@ -58,15 +103,22 @@ export function transcriptRowsForTerminalRows(rows: number): number {
 export function nextTranscriptScrollOffset({
   current,
   itemCount,
+  totalRows,
+  visibleRows,
   direction,
   step = 3,
 }: {
   current: number;
-  itemCount: number;
+  itemCount?: number;
+  totalRows?: number;
+  visibleRows?: number;
   direction: "older" | "newer";
   step?: number;
 }): number {
-  const maxOffset = Math.max(0, itemCount - 1);
+  const maxOffset =
+    totalRows !== undefined
+      ? Math.max(0, totalRows - Math.max(1, visibleRows ?? 1))
+      : Math.max(0, (itemCount ?? 0) - 1);
   if (direction === "older") {
     return Math.min(maxOffset, current + step);
   }
@@ -79,6 +131,46 @@ export function shouldRemoveVisibleAssistantForAction(
   return action.type === "regenerate" && action.removedAssistant;
 }
 
+export interface HistoryNavState {
+  historyIdx: number | null;
+  draft: { value: string; cursor: number };
+  historyDraft: { value: string; cursor: number } | null;
+}
+
+export function historyNavStep(
+  state: HistoryNavState,
+  history: readonly string[],
+  direction: "up" | "down",
+): HistoryNavState {
+  if (direction === "up") {
+    if (history.length === 0) return state;
+    const snapshot =
+      state.historyIdx === null ? { ...state.draft } : state.historyDraft;
+    const idx =
+      state.historyIdx === null
+        ? history.length - 1
+        : Math.max(0, state.historyIdx - 1);
+    const entry = history[idx] ?? "";
+    return {
+      historyIdx: idx,
+      draft: { value: entry, cursor: graphemeLength(entry) },
+      historyDraft: snapshot,
+    };
+  }
+  if (state.historyIdx === null) return state;
+  const next = state.historyIdx + 1;
+  if (next >= history.length) {
+    const restored = state.historyDraft ?? { value: "", cursor: 0 };
+    return { historyIdx: null, draft: restored, historyDraft: null };
+  }
+  const entry = history[next] ?? "";
+  return {
+    historyIdx: next,
+    draft: { value: entry, cursor: graphemeLength(entry) },
+    historyDraft: state.historyDraft,
+  };
+}
+
 function pick<T>(arr: readonly T[]): T {
   if (arr.length === 0) {
     throw new Error("pick called on empty array");
@@ -132,12 +224,20 @@ export function App({
     };
   }, [stdout]);
   const mode = useMemo(() => pickLayout(cols), [cols]);
-  const inputWidth = useMemo(() => Math.max(1, cols), [cols]);
   const chromeWidth = useMemo(() => Math.max(1, cols), [cols]);
-  const statusBarWidth = inputWidth;
   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
+    : 0;
+  const contentWidth = showPetPanel
+    ? Math.max(1, cols - petPanelReservedWidth)
+    : 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 maxTranscriptRows = useMemo(
@@ -193,17 +293,153 @@ export function App({
   const [witticism, setWitticism] = useState<string>(pick(WITTICISMS));
   const [model, setModel] = useState<string>(config.model);
   const [msgCount, setMsgCount] = useState<number>(0);
-  const [tokenCount, setTokenCount] = useState<number>(
-    conversation.approximateTokens(),
-  );
-  const [lastLatencyMs, setLastLatencyMs] = useState<number | null>(null);
-  const [fallbackModel, setFallbackModel] = useState<string | null>(null);
   const [deskStatus, setDeskStatus] = useState<"idle" | "error">("idle");
   const [deskNotice, setDeskNotice] = useState<string | null>(null);
   const [history, setHistory] = useState<string[]>([]);
   const [historyIdx, setHistoryIdx] = useState<number | null>(null);
   const [paletteIdx, setPaletteIdx] = useState(0);
   const [scrollOffset, setScrollOffset] = useState(0);
+  const intro = useIntroAnimation(chromeWidth, integratedIntro);
+
+  const [petStats, setPetStats] = useState<PetStats>(() => loadPetState());
+  const [petActivity, setPetActivity] = useState<PetActivity>("idle");
+  const [isDead, setIsDead] = useState(false);
+  const [deathReason, setDeathReason] = useState("energy");
+  const [deathVariant, setDeathVariant] = useState(0);
+  const petStatsRef = useRef<PetStats>(petStats);
+  const petActivityTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const petDecayTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const petEnv = useMemo((): Environment => {
+    const h = new Date().getHours();
+    if (h >= 9 && h < 18) return "office";
+    if (h >= 6 && h < 23) return "home";
+    return "outdoors";
+  }, []);
+
+  const PET_MESSAGES = useMemo(() => ({
+    feed: [
+      "Drexler receives deal memo. Hunger: satisfied. Pipeline: expanding.",
+      "Drexler consumes quarterly report. Fortifying.",
+      "Deal deck delivered. Drexler is replenished.",
+      "Nutrition acquired via term sheet. Excellent.",
+      "Drexler ingests synergy bundle. Caloric intake: maximized.",
+      "Pipeline refueled. Drexler gives brief nod of approval.",
+    ],
+    play: [
+      "Drexler engages in corporate synergy games. Morale: elevated.",
+      "Drexler attempts leisure. Unfamiliar but effective.",
+      "Golf simulation initiated. Handicap: nonexistent.",
+      "Corporate retreat protocols engaged. Team building: successful.",
+      "Drexler plays. Competitors watch nervously.",
+      "Recreational time allocated. ROI: unclear but positive.",
+    ],
+    work: [
+      "Drexler retreats to deal desk. Pipeline throughput: increasing.",
+      "Grind mode initiated. Coffee consumed preemptively.",
+      "Drexler is doing the work. Others take note.",
+      "Deal origination in progress. Board is watching.",
+      "Drexler enters flow state. Productivity: exceptional.",
+      "All-nighter commenced. Regrets: minimal.",
+    ],
+    praise: [
+      "Drexler acknowledges commendation. Briefly.",
+      "Praise received. Filed under: expected.",
+      "Drexler nods. One singular nod.",
+      "Affirmation noted. Drexler remains unmoved. Mostly.",
+      "Kind words processed. Ego: appropriately inflated.",
+      "Drexler accepts compliment with characteristic restraint.",
+    ],
+    rest: [
+      "Drexler retires briefly. Strategic recharge in progress.",
+      "Under-desk nap initiated. Do not disturb.",
+      "Drexler powers down. Temporarily.",
+      "Rest mode engaged. Energy recovery: imminent.",
+      "Strategic downtime commenced. Drexler will return stronger.",
+      "Drexler sleeps. Dreams of closed deals.",
+    ],
+  }), []);
+
+  const triggerPetActivity = useCallback(
+    (activity: PetActivity, durationMs: number) => {
+      if (petActivityTimerRef.current !== null) {
+        clearTimeout(petActivityTimerRef.current);
+      }
+      setPetActivity(activity);
+      petActivityTimerRef.current = setTimeout(() => {
+        setPetActivity("idle");
+        petActivityTimerRef.current = null;
+      }, durationMs);
+    },
+    [],
+  );
+  const updatePetStats = useCallback((updater: (stats: PetStats) => PetStats) => {
+    setPetStats((stats) => {
+      const next = updater(stats);
+      petStatsRef.current = next;
+      savePetState(next);
+      return next;
+    });
+  }, []);
+  const applyPetAction = useCallback(
+    (action: PetActionKey, mutator: (stats: PetStats) => PetStats) => {
+      const before = getPetRank(petStatsRef.current);
+      updatePetStats((s) => {
+        const next = stampAction(mutator(s), action);
+        return accrueLifetimeDeals(next, action);
+      });
+      const after = getPetRank(petStatsRef.current);
+      if (after !== before) {
+        addItem(
+          "system",
+          `PROMOTION MEMO: Drexler ranked up to ${rankLabel(after)}. Reward: more meetings.`,
+        );
+      }
+    },
+    [updatePetStats, addItem],
+  );
+
+  useEffect(() => {
+    petStatsRef.current = petStats;
+  }, [petStats]);
+
+  // 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);
+    return () => {
+      if (petDecayTimerRef.current !== null) {
+        clearInterval(petDecayTimerRef.current);
+        petDecayTimerRef.current = null;
+      }
+      if (petActivityTimerRef.current !== null) {
+        clearTimeout(petActivityTimerRef.current);
+        petActivityTimerRef.current = null;
+      }
+      savePetState(petStatsRef.current);
+    };
+  }, [showPetPanel, updatePetStats]);
+
+  // Death detection
+  useEffect(() => {
+    if (!showPetPanel || isDead || !isPetDead(petStats)) return;
+    const reason =
+      petStats.hunger <= 0 ? "hunger" :
+      petStats.happiness <= 0 ? "happiness" : "energy";
+    setDeathReason(reason);
+    setDeathVariant(Math.floor(Math.random() * 5));
+    setIsDead(true);
+    const deadStats = { ...petStats, dead: true };
+    petStatsRef.current = deadStats;
+    savePetState(deadStats);
+    exitTimerRef.current = setTimeout(() => exit(), 5000);
+  }, [petStats, showPetPanel, isDead, exit]);
 
   const paletteItems = useMemo(() => filterPaletteByPrefix(input), [input]);
   const paletteOpen = paletteItems.length > 0;
@@ -215,23 +451,17 @@ export function App({
     setScrollOffset(0);
   }, [items.length]);
 
-  useEffect(() => {
-    setTokenCount(conversation.approximateTokens());
-  }, [conversation, msgCount]);
-
-  const themeName = useMemo(() => {
-    const active = getActiveTheme();
-    return (
-      THEME_NAMES.find((name) => THEMES[name] === active) ??
-      config.theme ??
-      "apollo"
-    );
-  }, [activeTheme, config.theme]);
-
+  const visibleTranscriptRows = synergyEvent
+    ? Math.max(1, maxTranscriptRows - synergyEventRows(contentWidth, isCompact))
+    : maxTranscriptRows;
+  const estimatedTranscriptRows = useMemo(
+    () => estimateTranscriptRows(items, isCompact, contentWidth),
+    [items, isCompact, contentWidth],
+  );
   const scrollHint = useMemo(() => {
-    if (items.length <= maxTranscriptRows) return undefined;
+    if (estimatedTranscriptRows <= visibleTranscriptRows) return undefined;
     return scrollOffset > 0 ? "PageDown newer" : "PageUp scrollback";
-  }, [items.length, maxTranscriptRows, scrollOffset]);
+  }, [estimatedTranscriptRows, visibleTranscriptRows, scrollOffset]);
 
   // throttle streaming updates so React doesn't re-render every token
   const streamBufRef = useRef("");
@@ -244,6 +474,7 @@ export function App({
   const exitingRef = useRef(false);
   const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const synergyTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const historyDraftRef = useRef<{ value: string; cursor: number } | null>(null);
   const flushStream = useCallback(() => {
     if (!mountedRef.current) return;
     setStreaming(streamBufRef.current);
@@ -255,6 +486,7 @@ export function App({
       if (exitingRef.current) return;
       exitingRef.current = true;
       abortRef.current?.abort();
+      savePetState(petStatsRef.current);
       if (streamTimerRef.current !== null) {
         clearTimeout(streamTimerRef.current);
         streamTimerRef.current = null;
@@ -328,12 +560,10 @@ export function App({
     if (requestInFlightRef.current) return;
     requestInFlightRef.current = true;
     setRequestInFlight(true);
-    const startedAt = Date.now();
     try {
       setThinking(pick(THINKING_LINES));
       setDeskStatus("idle");
       setDeskNotice(null);
-      setFallbackModel(null);
       streamBufRef.current = "";
       setStreaming(null);
       let firstToken = true;
@@ -384,7 +614,6 @@ export function App({
       }
       setThinking(null);
       setStreaming(null);
-      setLastLatencyMs(Date.now() - startedAt);
       if (cancelledRef.current) {
         cancelledRef.current = false;
         if (result?.content) {
@@ -400,7 +629,6 @@ export function App({
         if (result.fellBack) {
           addItem("system", `(fell back to ${result.modelUsed})`);
           notices.push(`fallback ${result.modelUsed}`);
-          setFallbackModel(result.modelUsed);
         }
         if (detectPersonaDrift(result.content)) {
           addItem("system", `(persona drift detected — model used 'I')`);
@@ -420,7 +648,6 @@ export function App({
         setDeskNotice(result?.error ?? "stream error");
       }
       setMsgCount(conversation.length);
-      setTokenCount(conversation.approximateTokens());
       setWitticism(pick(WITTICISMS));
     } finally {
       requestInFlightRef.current = false;
@@ -439,6 +666,134 @@ export function App({
 
   const handleSlashWithMutation = useCallback(
     async (line: string): Promise<void> => {
+      const lower = line.toLowerCase().trim();
+      const [slashCommand = lower] = lower.split(/\s+/, 1);
+
+      // Pet commands — handled before dispatch so they don't hit the unknown-command path
+      if (lower === "/synergy") {
+        runSynergyEvent();
+        return;
+      }
+      const isPetCommand =
+        slashCommand === "/feed" ||
+        slashCommand === "/play" ||
+        slashCommand === "/work" ||
+        slashCommand === "/praise" ||
+        slashCommand === "/rest" ||
+        slashCommand === "/vibe";
+      if (isPetCommand && isDead) {
+        addItem("system", "Drexler is in HR. Restructuring paperwork pending — try again after revival.");
+        return;
+      }
+      const cooldownAction: PetActionKey | null =
+        slashCommand === "/feed" ? "feed"
+        : slashCommand === "/play" ? "play"
+        : slashCommand === "/work" ? "work"
+        : slashCommand === "/praise" ? "praise"
+        : slashCommand === "/rest" ? "rest"
+        : slashCommand === "/vibe" ? "vibe"
+        : null;
+      if (cooldownAction !== null) {
+        const cd = actionCooldown(petStatsRef.current, cooldownAction);
+        if (!cd.ok) {
+          addItem(
+            "system",
+            `Drexler ${cooldownAction === "feed" ? "just ate" : cooldownAction === "play" ? "just played" : cooldownAction === "work" ? "just worked" : cooldownAction === "praise" ? "just got praised" : cooldownAction === "rest" ? "just rested" : "just vibed"}. Wait ${formatCooldownRemaining(cd.remainingMs)} before the next attempt. Drexler resents micromanagement.`,
+          );
+          return;
+        }
+      }
+      if (slashCommand === "/feed") {
+        applyPetAction("feed", applyFeed);
+        triggerPetActivity("eating", 3500);
+        addItem("system", pick(PET_MESSAGES.feed));
+        return;
+      }
+      if (slashCommand === "/play") {
+        applyPetAction("play", applyPlay);
+        triggerPetActivity("playing", 4000);
+        addItem("system", pick(PET_MESSAGES.play));
+        return;
+      }
+      if (slashCommand === "/work") {
+        applyPetAction("work", applyWork);
+        triggerPetActivity("working", 5000);
+        addItem("system", pick(PET_MESSAGES.work));
+        return;
+      }
+      if (slashCommand === "/praise") {
+        applyPetAction("praise", applyPraise);
+        triggerPetActivity("praised", 3000);
+        addItem("system", pick(PET_MESSAGES.praise));
+        return;
+      }
+      if (slashCommand === "/rest") {
+        applyPetAction("rest", applyRest);
+        triggerPetActivity("sleeping", 5000);
+        addItem("system", pick(PET_MESSAGES.rest));
+        return;
+      }
+      if (slashCommand === "/vibe") {
+        const result = applyVibe(petStatsRef.current);
+        applyPetAction("vibe", () => result.stats);
+        triggerPetActivity("vibing", 3500);
+        addItem("system", result.message);
+        return;
+      }
+      if (slashCommand === "/name") {
+        const arg = line.slice("/name".length).trim();
+        if (arg.length === 0) {
+          const current = petStatsRef.current.name;
+          addItem(
+            "system",
+            current
+              ? `Drexler's pet name on file: "${current}". /name <new> to reassign.`
+              : "No pet name on file. /name <name> to issue corporate identity.",
+          );
+          return;
+        }
+        const cleaned = sanitizePetName(arg);
+        if (cleaned.length === 0) {
+          addItem(
+            "system",
+            "Drexler refuses unprintable identity. Pick letters, numbers, spaces, dots, or apostrophes (≤16 chars).",
+          );
+          return;
+        }
+        updatePetStats((s) => applyName(s, cleaned));
+        addItem("system", `Pet renamed: "${cleaned}". Memo distributed to all departments.`);
+        return;
+      }
+      if (slashCommand === "/profile") {
+        const s = petStatsRef.current;
+        const tenure = formatTenure(petTenureMs(s));
+        const mood = getPetMood(s);
+        const stats = [
+          ["hunger", s.hunger],
+          ["happiness", s.happiness],
+          ["energy", s.energy],
+          ["deals", s.deals],
+        ] as const;
+        const dominant = stats.reduce(
+          (best, cur) => (cur[1] > best[1] ? cur : best),
+        );
+        const rank = getPetRank(s);
+        const lines = [
+          "Drexler personnel file:",
+          `  name      : ${s.name ?? "(unnamed associate)"}`,
+          `  rank      : ${rankLabel(rank)}`,
+          `  tenure    : ${tenure}`,
+          `  mood      : ${mood}`,
+          `  hunger    : ${Math.round(s.hunger)}%`,
+          `  happiness : ${Math.round(s.happiness)}%`,
+          `  energy    : ${Math.round(s.energy)}%`,
+          `  deals     : ${Math.round(s.deals)}%`,
+          `  standout  : ${dominant[0]} (${Math.round(dominant[1])}%)`,
+        ];
+        addItem("system", lines.join("\n"));
+        return;
+      }
+
       let captured = "";
       const mutableConfig: Config = { ...config, model };
       const action = dispatch(line, {
@@ -448,15 +803,8 @@ export function App({
           captured += (captured ? "\n" : "") + s;
         },
       });
-      const lower = line.toLowerCase().trim();
-      if (lower === "/synergy") {
-        runSynergyEvent();
-        return;
-      }
       if (lower === "/clear" || lower.startsWith("/clear ")) {
         setItems([]);
-        setLastLatencyMs(null);
-        setFallbackModel(null);
       }
       if (mutableConfig.model !== model) {
         setModel(mutableConfig.model);
@@ -493,7 +841,6 @@ export function App({
         await runLLM(action.instruction);
       }
       setMsgCount(conversation.length);
-      setTokenCount(conversation.approximateTokens());
     },
     [
       addItem,
@@ -501,10 +848,14 @@ export function App({
       config,
       activeTheme,
       model,
+      petStats,
+      PET_MESSAGES,
       removeLastAssistantItem,
       runLLM,
       runSynergyEvent,
       triggerExit,
+      triggerPetActivity,
+      updatePetStats,
     ],
   );
 
@@ -523,13 +874,46 @@ export function App({
       addItem("user", line);
       conversation.push("user", line);
       setMsgCount(conversation.length);
-      setTokenCount(conversation.approximateTokens());
       await runLLM();
     },
     [addItem, conversation, handleSlashWithMutation, runLLM],
   );
 
+  const reportSubmitError = useCallback(
+    (err: unknown) => {
+      const msg = err instanceof Error ? err.message : String(err);
+      addItem("system", `${STREAM_ERROR} [${msg}]`);
+      setDeskStatus("error");
+      setDeskNotice("submit failed");
+    },
+    [addItem],
+  );
+
   useInput((char, key) => {
+    // Scroll keys are always live — they only mutate scrollOffset and never
+    // commit input, so we let the user review history during streaming.
+    if (key.pageUp) {
+      setScrollOffset((offset) =>
+        nextTranscriptScrollOffset({
+          current: offset,
+          totalRows: estimatedTranscriptRows,
+          visibleRows: visibleTranscriptRows,
+          direction: "older",
+        }),
+      );
+      return;
+    }
+    if (key.pageDown) {
+      setScrollOffset((offset) =>
+        nextTranscriptScrollOffset({
+          current: offset,
+          totalRows: estimatedTranscriptRows,
+          visibleRows: visibleTranscriptRows,
+          direction: "newer",
+        }),
+      );
+      return;
+    }
     const busy =
       requestInFlightRef.current ||
       synergyActiveRef.current ||
@@ -560,32 +944,25 @@ export function App({
       }
       return;
     }
-    if (key.pageUp) {
-      setScrollOffset((offset) =>
-        nextTranscriptScrollOffset({
-          current: offset,
-          itemCount: items.length,
-          direction: "older",
-        }),
-      );
-      return;
-    }
-    if (key.pageDown) {
-      setScrollOffset((offset) =>
-        nextTranscriptScrollOffset({
-          current: offset,
-          itemCount: items.length,
-          direction: "newer",
-        }),
-      );
-      return;
-    }
     if (paletteOpen && key.return) {
       const sel = paletteItems[paletteIdx];
       if (sel) {
+        // Bare /theme, /model, etc. — open the chooser, do not execute.
+        if (isArgumentParentCommand(sel.name)) {
+          const filled = sel.name + " ";
+          updateDraft({
+            value: filled,
+            cursor: graphemeLength(filled),
+          });
+          setPaletteIdx(0);
+          return;
+        }
         updateDraft({ value: "", cursor: 0 });
         setHistoryIdx(null);
-        void onSubmit(sel.name);
+        historyDraftRef.current = null;
+        onSubmit(sel.name).catch((err) => {
+          reportSubmitError(err);
+        });
       }
       return;
     }
@@ -593,6 +970,7 @@ export function App({
       const submitted = draftRef.current.value;
       updateDraft({ value: "", cursor: 0 });
       setHistoryIdx(null);
+      historyDraftRef.current = null;
       const trimmedSubmit = submitted.trim();
       if (trimmedSubmit.length > 0) {
         setHistory((prev) => {
@@ -600,7 +978,9 @@ export function App({
           return next.length > 50 ? next.slice(-50) : next;
         });
       }
-      void onSubmit(submitted);
+      onSubmit(submitted).catch((err) => {
+        reportSubmitError(err);
+      });
       return;
     }
     if (key.ctrl && char === "c") {
@@ -644,10 +1024,18 @@ export function App({
         return;
       }
       if (history.length === 0) return;
-      const idx = historyIdx === null ? history.length - 1 : Math.max(0, historyIdx - 1);
-      const entry = history[idx] ?? "";
-      setHistoryIdx(idx);
-      updateDraft({ value: entry, cursor: graphemeLength(entry) });
+      const next = historyNavStep(
+        {
+          historyIdx,
+          draft: draftRef.current,
+          historyDraft: historyDraftRef.current,
+        },
+        history,
+        "up",
+      );
+      historyDraftRef.current = next.historyDraft;
+      setHistoryIdx(next.historyIdx);
+      updateDraft(next.draft);
       return;
     }
     if (key.downArrow) {
@@ -656,15 +1044,18 @@ export function App({
         return;
       }
       if (historyIdx === null) return;
-      const next = historyIdx + 1;
-      if (next >= history.length) {
-        setHistoryIdx(null);
-        updateDraft({ value: "", cursor: 0 });
-      } else {
-        const entry = history[next] ?? "";
-        setHistoryIdx(next);
-        updateDraft({ value: entry, cursor: graphemeLength(entry) });
-      }
+      const next = historyNavStep(
+        {
+          historyIdx,
+          draft: draftRef.current,
+          historyDraft: historyDraftRef.current,
+        },
+        history,
+        "down",
+      );
+      historyDraftRef.current = next.historyDraft;
+      setHistoryIdx(next.historyIdx);
+      updateDraft(next.draft);
       return;
     }
     if (key.ctrl && char === "a") {
@@ -721,24 +1112,25 @@ export function App({
   const headerStatus = isBusy ? "streaming" : deskStatus;
   const renderDealDeskHeader = (width: number) => (
     <DealDeskHeader
-      model={model}
       mood={mood}
       messageCount={msgCount}
-      themeName={themeName}
-      approximateTokens={tokenCount}
-      latencyMs={lastLatencyMs}
-      fallbackModel={fallbackModel}
       status={headerStatus}
       compact={isCompact}
       notice={!integratedIntro ? deskNotice ?? undefined : undefined}
-      maxWidth={integratedIntro ? Math.min(72, Math.max(1, width)) : width}
+      maxWidth={Math.max(1, width)}
       marginBottom={integratedIntro ? 0 : 1}
     />
   );
   const dealDeskHeader = renderDealDeskHeader(chromeWidth);
-  const visibleTranscriptRows = synergyEvent
-    ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
-    : maxTranscriptRows;
+  const introBarColor = introPhaseColor(intro.colorPhase, t);
+
+  if (isDead) {
+    return (
+      <ThemeProvider value={activeTheme}>
+        <DeathScreen reason={deathReason} variant={deathVariant} />
+      </ThemeProvider>
+    );
+  }
 
   return (
     <ThemeProvider value={activeTheme}>
@@ -748,79 +1140,98 @@ export function App({
             <MascotDashboard
               greeting={greeting}
               width={chromeWidth}
+              mood={mood}
+              bootProgress={intro.progress}
+              state={intro.state}
+              bar={intro.bar}
+              barColor={introBarColor}
+              mascotStatus={intro.status}
               dealDesk={renderDealDeskHeader}
             />
           </Box>
         ) : (
           dealDeskHeader
         )}
-        <TranscriptViewport
-          items={items}
-          maxRows={visibleTranscriptRows}
-          cols={chromeWidth}
-          compact={isCompact}
-          scrollOffset={scrollOffset}
-        />
-
-        <Box flexDirection="column">
-          {streaming !== null && (
-            <Box marginBottom={1}>
-              <StreamingMessage content={streaming} width={chromeWidth} />
+        <Box flexDirection="row" alignItems="flex-start">
+          {showPetPanel && (
+            <Box marginRight={PET_PANEL_GAP_COLUMNS}>
+              <PetPanel
+                stats={petStats}
+                activity={petActivity}
+                env={petEnv}
+                isPaused={isBusy}
+              />
             </Box>
           )}
-          {thinking !== null && streaming === null && (
-            <Box marginBottom={1}>
-              <Spinner label={thinking} width={chromeWidth} />
-            </Box>
-          )}
-          {synergyEvent !== null && (
-            <SynergyEvent
-              event={synergyEvent.event}
-              frame={synergyEvent.frame}
-              width={chromeWidth}
+          <Box flexDirection="column" flexGrow={1}>
+            <TranscriptViewport
+              items={items}
+              maxRows={visibleTranscriptRows}
+              cols={contentWidth}
               compact={isCompact}
+              scrollOffset={scrollOffset}
             />
-          )}
-          {exitMsg !== null ? (
-            <Box paddingX={1} marginBottom={1}>
-              <Text color={t.primaryLight} bold>
-                {exitMsg}
-              </Text>
-            </Box>
-          ) : (
-            <>
-              {paletteOpen && (
-                <CommandPalette
-                  items={paletteItems}
-                  selectedIdx={paletteIdx}
-                  width={chromeWidth}
-                />
+            <Box flexDirection="column">
+              {streaming !== null && (
+                <Box marginBottom={1}>
+                  <StreamingMessage content={streaming} width={contentWidth} />
+                </Box>
               )}
-              <Box flexDirection="column">
-                <InputBox
-                  value={input}
-                  cursor={cursor}
-                  disabled={isBusy}
-                  disabledLabel={
-                    synergyEvent !== null
-                      ? "(Synergy event running... boardroom locked)"
-                      : undefined
-                  }
-                  width={inputWidth}
-                />
-              </Box>
-              <Box>
-                <StatusBar
-                  messageCount={msgCount}
-                  witticism={witticism}
-                  maxWidth={statusBarWidth}
-                  status={isBusy ? "streaming" : deskStatus}
+              {thinking !== null && streaming === null && (
+                <Box paddingX={1} marginBottom={1}>
+                  <Spinner label={thinking} width={contentWidth} />
+                </Box>
+              )}
+              {synergyEvent !== null && (
+                <SynergyEvent
+                  event={synergyEvent.event}
+                  frame={synergyEvent.frame}
+                  width={contentWidth}
                   compact={isCompact}
-                  scrollHint={scrollHint}
                 />
-              </Box>
-            </>
-          )}
+              )}
+              {exitMsg !== null ? (
+                <Box paddingX={1} marginBottom={1}>
+                  <Text color={t.primaryLight} bold>
+                    {exitMsg}
+                  </Text>
+                </Box>
+              ) : (
+                <>
+                  {paletteOpen && (
+                    <CommandPalette
+                      items={paletteItems}
+                      selectedIdx={paletteIdx}
+                      width={contentWidth}
+                    />
+                  )}
+                  <Box flexDirection="column">
+                    <InputBox
+                      value={input}
+                      cursor={cursor}
+                      disabled={isBusy}
+                      disabledLabel={
+                        synergyEvent !== null
+                          ? "(Synergy event running... boardroom locked)"
+                          : undefined
+                      }
+                      width={contentInputWidth}
+                    />
+                  </Box>
+                  <Box paddingLeft={2}>
+                    <StatusBar
+                      messageCount={msgCount}
+                      witticism={witticism}
+                      maxWidth={contentStatusWidth}
+                      status={isBusy ? "streaming" : deskStatus}
+                      compact={isCompact}
+                      scrollHint={scrollHint}
+                    />
+                  </Box>
+                </>
+              )}
+            </Box>
+          </Box>
         </Box>
       </Box>
     </ThemeProvider>