drexler 0.2.14 → 0.2.15

package/src/ui/CommandPalette.tsx

@@ -29,6 +29,8 @@ const COMMAND_HINTS: Record<string, string> = {
   "/save": "/save deal-notes.md",
   "/save-last": "/save-last last-response.md",
   "/copy-last": "copy latest response",
+  "/setup": "show config + key source",
+  "/update": "bun update -g drexler --latest",
 };
 
 const ARGUMENT_TITLES: Record<string, { title: string; hint: string }> = {

package/src/ui/DealDeskHeader.tsx

@@ -6,13 +6,8 @@ import { useTheme } from "./ThemeContext.tsx";
 export type DealDeskHeaderStatus = "idle" | "streaming" | "error";
 
 export interface DealDeskHeaderProps {
-  model: string;
   mood: string;
   messageCount: number;
-  themeName?: string;
-  approximateTokens?: number;
-  latencyMs?: number | null;
-  fallbackModel?: string | null;
   status?: DealDeskHeaderStatus;
   compact?: boolean;
   notice?: string;

package/src/ui/DeathScreen.tsx

@@ -0,0 +1,110 @@
+import { Box, Text } from "ink";
+import { useTheme } from "./ThemeContext.tsx";
+
+// Five distinct death variants
+const VARIANTS = [
+  {
+    headline: "STAKEHOLDERS IN SHAMBLES",
+    lines: [
+      "The board convenes in emergency session.",
+      "Markets react with characteristic cruelty.",
+      "Analyst consensus revised to: AVOID.",
+    ],
+  },
+  {
+    headline: "PIPELINE: BONE DRY. BOARD: DEVASTATED.",
+    lines: [
+      "Emergency restructuring announced immediately.",
+      "Remaining staff issued terse memo: 'hang tight.'",
+      "The deal room is very, very quiet.",
+    ],
+  },
+  {
+    headline: "ANALYSTS REVISE TARGET PRICE TO ZERO",
+    lines: [
+      "Short sellers: vindicated, quietly smug.",
+      "Drexler could not be reached for comment.",
+      "His last email had a typo. The irony.",
+    ],
+  },
+  {
+    headline: "SEC OPENS INQUIRY INTO CIRCUMSTANCES",
+    lines: [
+      "CNBC coverage: 47 minutes, then nothing.",
+      "Drexler's legacy: a half-finished term sheet.",
+      "The coffee mug on his desk: still warm.",
+    ],
+  },
+  {
+    headline: "EMERGENCY CALL SCHEDULED FOR 7AM MONDAY",
+    lines: [
+      "Consensus: it could have been prevented.",
+      "The plant on his desk is already wilting.",
+      "Recruiters texted his LinkedIn at 4am.",
+    ],
+  },
+] as const;
+
+const REASON_MSGS: Record<string, string> = {
+  hunger:    "Cause: severe caloric deficiency. The pipeline, unreplenished, consumed itself.",
+  happiness: "Cause: total morale collapse. The board's confidence evaporated entirely.",
+  energy:    "Cause: complete energy depletion. Drexler's systems ceased. Standups continued.",
+};
+
+// Stock chart — backslash must be escaped in TS string literals
+const CHART: string[] = [
+  "  100 ┤\\",
+  "      │  \\",
+  "      │   \\",
+  "   50 ┤    \\",
+  "      │     \\",
+  "      │      \\________________________________",
+  "    0 ┴───────────────────────────────────────",
+  "       Q1   Q2   Q3   Q4   Q5   now  →",
+];
+
+const INNER_W = 44;
+
+function banner(text: string): string {
+  const pad = Math.max(0, INNER_W - text.length);
+  const lp = Math.floor(pad / 2);
+  const rp = pad - lp;
+  return "║" + " ".repeat(lp) + text + " ".repeat(rp) + "║";
+}
+
+const TOP = "╔" + "═".repeat(INNER_W) + "╗";
+const BOT = "╚" + "═".repeat(INNER_W) + "╝";
+
+interface Props {
+  reason?: string;
+  variant?: number;
+}
+
+export function DeathScreen({ reason = "energy", variant = 0 }: Props) {
+  const t = useTheme();
+  const v = VARIANTS[variant % VARIANTS.length] ?? VARIANTS[0];
+  const reasonMsg = REASON_MSGS[reason] ?? REASON_MSGS.energy;
+
+  return (
+    <Box flexDirection="column" paddingX={2} paddingY={1}>
+      <Text color={t.error} bold>{TOP}</Text>
+      <Text color={t.error} bold>{banner("D R E X L E R   H A S   D I E D")}</Text>
+      <Text color={t.error} bold>{BOT}</Text>
+      <Text> </Text>
+      <Text color={t.warning} bold>  {v.headline}</Text>
+      {v.lines.map((line, i) => (
+        <Text key={i} color={t.dim}>  {line}</Text>
+      ))}
+      <Text> </Text>
+      <Text color={t.primaryDim}>  {reasonMsg}</Text>
+      <Text> </Text>
+      <Text color={t.primaryDim}>  DRXL Share Price:</Text>
+      {CHART.map((line, i) => (
+        <Text key={i} color={i < 6 ? t.error : t.dim}>  {line}</Text>
+      ))}
+      <Text> </Text>
+      <Text color={t.dim}>  Stats reset to 50% on next launch.</Text>
+      <Text color={t.dim}>  Exiting in 5 seconds...</Text>
+    </Box>
+  );
+}

package/src/ui/MarkdownBody.tsx

@@ -23,9 +23,20 @@ type Block =
 const BULLET_RE = /^(\s*)([*+\-]|\d+\.)\s+(.*)$/;
 const HEADING_RE = /^(#{1,6})\s+(.*)$/;
 const HR_RE = /^\s*([-*_])\1\1[-*_\s]*$/;
-const FENCE_RE = /^\s*```(.*)$/;
+const FENCE_RE = /^\s*(`{3,}|~{3,})(.*)$/;
 const QUOTE_RE = /^\s*>\s?(.*)$/;
 
+function isFenceClose(line: string, marker: string): boolean {
+  const fenceChar = marker[0];
+  if (!fenceChar) return false;
+  const trimmed = line.trim();
+  if (trimmed.length < marker.length) return false;
+  for (const char of trimmed) {
+    if (char !== fenceChar) return false;
+  }
+  return true;
+}
+
 export function tokenizeInline(input: string): InlineToken[] {
   const tokens: InlineToken[] = [];
   let buf = "";
@@ -87,7 +98,19 @@ export function tokenizeInline(input: string): InlineToken[] {
     if (ch === "[") {
       const closeBracket = input.indexOf("]", i + 1);
       if (closeBracket !== -1 && input[closeBracket + 1] === "(") {
-        const closeParen = input.indexOf(")", closeBracket + 2);
+        let depth = 1;
+        let closeParen = -1;
+        for (let k = closeBracket + 2; k < input.length; k++) {
+          const c = input[k];
+          if (c === "(") depth += 1;
+          else if (c === ")") {
+            depth -= 1;
+            if (depth === 0) {
+              closeParen = k;
+              break;
+            }
+          }
+        }
         if (closeParen !== -1) {
           flushBuf();
           const text = input.slice(i + 1, closeBracket);
@@ -115,14 +138,15 @@ export function parseBlocks(input: string): Block[] {
     const line = lines[i]!;
     const fence = FENCE_RE.exec(line);
     if (fence) {
-      const lang = fence[1]?.trim() || undefined;
+      const marker = fence[1]!;
+      const lang = fence[2]?.trim() || undefined;
       const codeLines: string[] = [];
       i += 1;
-      while (i < lines.length && !FENCE_RE.test(lines[i]!)) {
+      while (i < lines.length && !isFenceClose(lines[i]!, marker)) {
         codeLines.push(lines[i]!);
         i += 1;
       }
-      i += 1;
+      if (i < lines.length) i += 1;
       blocks.push({ kind: "code", lang, lines: codeLines });
       continue;
     }

package/src/ui/MascotIntro.tsx

@@ -136,6 +136,119 @@ const SPLIT_DIVIDER_ROWS: number[] = Array.from(
 );
 const BOOT_BAR_WIDTH = MASCOT_WIDTH - 1;
 
+// Width breakpoints (terminal columns).
+const TINY_BREAKPOINT = 21;
+const NARROW_BREAKPOINT = 24;
+const COMPACT_BREAKPOINT = 72;
+const WIDE_BREAKPOINT = 112;
+
+// Inner-panel sizing floors / glue.
+const MIN_DASHBOARD_WIDTH = 28;
+const MIN_INNER_WIDTH = 24;
+const MIN_COPY_WIDTH = 18;
+const MIN_RIGHT_COLUMN_WIDTH = 20;
+const MIN_MOOD_PANEL_WIDTH = 18;
+const MAX_MOOD_PANEL_WIDTH = 44;
+const RIGHT_COLUMN_INSET = 1;
+const RIGHT_COLUMN_PAD_RIGHT = 1;
+const LEFT_PANEL_MIN_COPY = 24;
+
+export type MascotLayoutMode = "tiny" | "compact" | "stacked" | "split";
+
+export interface MascotPanelBox {
+  width: number;
+  inset: number;
+}
+
+export interface MascotLayout {
+  mode: MascotLayoutMode;
+  available: number;
+  innerWidth: number;
+  leftPanel: MascotPanelBox;
+  rightColumn: MascotPanelBox;
+  rightChildWidth: number;
+  copy: MascotPanelBox;
+  mood: MascotPanelBox;
+  tips: MascotPanelBox;
+  dealDesk: MascotPanelBox;
+}
+
+export function computeMascotLayout(width: number): MascotLayout {
+  const safeWidth = Math.max(1, Math.floor(width));
+  if (safeWidth < TINY_BREAKPOINT) {
+    const w = safeWidth;
+    return {
+      mode: "tiny",
+      available: w,
+      innerWidth: w,
+      leftPanel: { width: w, inset: 0 },
+      rightColumn: { width: 0, inset: 0 },
+      rightChildWidth: 0,
+      copy: { width: w, inset: 0 },
+      mood: { width: w, inset: 0 },
+      tips: { width: w, inset: 0 },
+      dealDesk: { width: w, inset: 0 },
+    };
+  }
+  if (safeWidth < COMPACT_BREAKPOINT) {
+    const w = Math.max(1, safeWidth - 1);
+    return {
+      mode: "compact",
+      available: w,
+      innerWidth: w,
+      leftPanel: { width: w, inset: 1 },
+      rightColumn: { width: 0, inset: 0 },
+      rightChildWidth: 0,
+      copy: { width: w, inset: 0 },
+      mood: { width: w, inset: 0 },
+      tips: { width: w, inset: 0 },
+      dealDesk: { width: w, inset: 0 },
+    };
+  }
+  const available = Math.max(MIN_DASHBOARD_WIDTH, safeWidth);
+  const innerWidth = Math.max(MIN_INNER_WIDTH, available - FRAME_CHROME_WIDTH);
+  if (safeWidth < WIDE_BREAKPOINT) {
+    return {
+      mode: "stacked",
+      available,
+      innerWidth,
+      leftPanel: { width: innerWidth, inset: 0 },
+      rightColumn: { width: 0, inset: 0 },
+      rightChildWidth: innerWidth,
+      copy: { width: innerWidth, inset: 0 },
+      mood: { width: innerWidth, inset: 0 },
+      tips: { width: innerWidth, inset: 0 },
+      dealDesk: { width: innerWidth, inset: 0 },
+    };
+  }
+  const leftPanelWidth = Math.max(
+    MASCOT_WIDTH + GUTTER_WIDTH + LEFT_PANEL_MIN_COPY,
+    Math.floor((innerWidth - SPLIT_DIVIDER_WIDTH) / 2),
+  );
+  const rightColumnWidth = Math.max(
+    MIN_RIGHT_COLUMN_WIDTH,
+    innerWidth - leftPanelWidth - SPLIT_DIVIDER_WIDTH,
+  );
+  const rightInner = Math.max(1, rightColumnWidth - RIGHT_COLUMN_PAD_RIGHT);
+  const rightChildWidth = Math.max(1, rightInner - RIGHT_COLUMN_INSET);
+  const copyWidth = Math.max(
+    MIN_COPY_WIDTH,
+    leftPanelWidth - MASCOT_WIDTH - GUTTER_WIDTH - 1,
+  );
+  return {
+    mode: "split",
+    available,
+    innerWidth,
+    leftPanel: { width: leftPanelWidth, inset: 0 },
+    rightColumn: { width: rightColumnWidth, inset: 0 },
+    rightChildWidth,
+    copy: { width: copyWidth, inset: 0 },
+    mood: { width: copyWidth, inset: 0 },
+    tips: { width: rightChildWidth, inset: RIGHT_COLUMN_INSET },
+    dealDesk: { width: rightChildWidth, inset: RIGHT_COLUMN_INSET },
+  };
+}
+
 interface IntroProps {
   greeting: string;
 }
@@ -219,11 +332,13 @@ function fixedDisplayRows(
 type IntroColorPhase = "early" | "middle" | "late";
 
 function introTotalFrames(width: number): number {
-  return width < 72 ? COMPACT_INTRO_NOTES.length : INTRO_FRAMES.length;
+  return width < COMPACT_BREAKPOINT
+    ? COMPACT_INTRO_NOTES.length
+    : INTRO_FRAMES.length;
 }
 
 function introFrameDelayMs(frameIdx: number, width: number): number {
-  if (width < 72) return COMPACT_INTRO_DELAY_MS;
+  if (width < COMPACT_BREAKPOINT) return COMPACT_INTRO_DELAY_MS;
   return (
     INTRO_FRAMES[frameIdx] ?? INTRO_FRAMES[INTRO_FRAMES.length - 1]!
   ).delayMs;
@@ -247,7 +362,7 @@ export function introPhaseColor(
 }
 
 function introSnapshot(frameIdx: number, width: number) {
-  const compact = width < 72;
+  const compact = width < COMPACT_BREAKPOINT;
   const total = introTotalFrames(width);
   const boundedFrameIdx = Math.min(frameIdx, total - 1);
   const state =
@@ -545,7 +660,7 @@ function MoodReadout({
     .toString()
     .padStart(3, " ")}%`;
 
-  if (width < 24) {
+  if (width < NARROW_BREAKPOINT) {
     const tinyText =
       boundedProgress >= 1
         ? `${normalizedMood} / ${posture.badge}`
@@ -563,7 +678,7 @@ function MoodReadout({
     );
   }
 
-  const panelWidth = Math.max(18, Math.min(44, width));
+  const panelWidth = Math.max(MIN_MOOD_PANEL_WIDTH, Math.min(MAX_MOOD_PANEL_WIDTH, width));
   const innerWidth = Math.max(1, panelWidth - 4);
   const title = "Mood";
   const isSettled = boundedProgress >= 1;
@@ -678,42 +793,15 @@ export function MascotDashboard({
 }: MascotDashboardProps) {
   const t = useTheme();
   const resolvedBarColor = barColor ?? t.primaryLight;
-  const tinyTerminal = width < 21;
-  const compact = width < 72;
-  const sideBySide = width >= 112;
-  const available = compact ? Math.max(1, width - 1) : Math.max(28, width);
-  const innerWidth = compact
-    ? available
-    : Math.max(24, available - FRAME_CHROME_WIDTH);
-  const leftPanelWidth = compact
-    ? available
-    : sideBySide
-    ? Math.max(
-        MASCOT_WIDTH + GUTTER_WIDTH + 24,
-        Math.floor((innerWidth - SPLIT_DIVIDER_WIDTH) / 2),
-      )
-    : innerWidth;
-  const rightColumnWidth = sideBySide
-    ? Math.max(20, innerWidth - leftPanelWidth - SPLIT_DIVIDER_WIDTH)
-    : innerWidth;
-  const rightInnerWidth = sideBySide
-    ? Math.max(1, rightColumnWidth - 1)
-    : rightColumnWidth;
-  const tipsWidth = sideBySide
-    ? rightInnerWidth
-    : innerWidth;
-  const copyWidth = compact
-    ? available
-    : sideBySide
-    ? Math.max(18, leftPanelWidth - MASCOT_WIDTH - GUTTER_WIDTH - 1)
-    : innerWidth;
+  const layout = computeMascotLayout(width);
+  const sideBySide = layout.mode === "split";
   const wideGreetingRows = sideBySide
-    ? fixedDisplayRows(greeting, copyWidth, 2)
+    ? fixedDisplayRows(greeting, layout.copy.width, 2)
     : [];
 
-  if (tinyTerminal) {
+  if (layout.mode === "tiny") {
     return (
-      <Box width={available} flexDirection="column">
+      <Box width={layout.available} flexDirection="column">
         <Text color={resolvedBarColor}>{mascotStatus}</Text>
         <Text bold color={t.primaryLight}>
           Drexler™
@@ -724,17 +812,23 @@ export function MascotDashboard({
             mood={mood}
             progress={bootProgress}
             progressColor={resolvedBarColor}
-            width={available}
+            width={layout.mood.width}
           />
         </Box>
-        {dealDesk ? <Box marginTop={1}>{dealDesk(Math.max(1, available))}</Box> : null}
+        {dealDesk ? (
+          <Box marginTop={1}>{dealDesk(layout.dealDesk.width)}</Box>
+        ) : null}
       </Box>
     );
   }
 
-  if (compact) {
+  if (layout.mode === "compact") {
     return (
-      <Box marginLeft={1} width={available} flexDirection="column">
+      <Box
+        marginLeft={layout.leftPanel.inset}
+        width={layout.available}
+        flexDirection="column"
+      >
         <Text color={resolvedBarColor}>{bar}</Text>
         <Text color={resolvedBarColor}>{mascotStatus}</Text>
         <Text bold color={t.primaryLight}>
@@ -746,25 +840,30 @@ export function MascotDashboard({
             mood={mood}
             progress={bootProgress}
             progressColor={resolvedBarColor}
-            width={available}
+            width={layout.mood.width}
           />
         </Box>
-        {dealDesk ? <Box marginTop={1}>{dealDesk(Math.max(1, available))}</Box> : null}
+        {dealDesk ? (
+          <Box marginTop={1}>{dealDesk(layout.dealDesk.width)}</Box>
+        ) : null}
       </Box>
     );
   }
 
   return (
-    <Box width={available}>
+    <Box width={layout.available}>
       <Box
-        width={available}
+        width={layout.available}
         borderStyle="round"
         borderColor={t.primary}
         paddingX={1}
         flexDirection={sideBySide ? "row" : "column"}
         alignItems={sideBySide ? "flex-start" : "center"}
       >
-        <Box flexDirection={sideBySide ? "row" : "column"} width={leftPanelWidth}>
+        <Box
+          flexDirection={sideBySide ? "row" : "column"}
+          width={layout.leftPanel.width}
+        >
           <Box
             width={MASCOT_WIDTH}
             flexShrink={0}
@@ -778,7 +877,7 @@ export function MascotDashboard({
           <Box
             flexDirection="column"
             justifyContent="center"
-            width={copyWidth}
+            width={layout.copy.width}
             marginTop={sideBySide ? 1 : 0}
           >
             <Text bold color={t.primaryLight}>
@@ -799,7 +898,7 @@ export function MascotDashboard({
               mood={mood}
               progress={bootProgress}
               progressColor={resolvedBarColor}
-              width={copyWidth}
+              width={layout.mood.width}
             />
           </Box>
         </Box>
@@ -814,23 +913,25 @@ export function MascotDashboard({
             </Box>
             <Box
               flexDirection="column"
-              width={rightColumnWidth}
-              paddingRight={1}
+              width={layout.rightColumn.width}
+              paddingRight={RIGHT_COLUMN_PAD_RIGHT}
             >
-              <Box marginLeft={1}>
-                <TipsPanel width={Math.max(1, rightInnerWidth - 1)} />
+              <Box marginLeft={layout.tips.inset}>
+                <TipsPanel width={layout.tips.width} />
               </Box>
               {dealDesk ? (
-                <Box marginLeft={1}>
-                  {dealDesk(Math.max(1, rightInnerWidth - 1))}
+                <Box marginLeft={layout.dealDesk.inset}>
+                  {dealDesk(layout.dealDesk.width)}
                 </Box>
               ) : null}
             </Box>
           </>
         ) : (
-          <Box marginTop={1} width={tipsWidth} flexDirection="column">
-            <TipsPanel width={tipsWidth} />
-            {dealDesk ? <Box marginTop={1}>{dealDesk(tipsWidth)}</Box> : null}
+          <Box marginTop={1} width={layout.tips.width} flexDirection="column">
+            <TipsPanel width={layout.tips.width} />
+            {dealDesk ? (
+              <Box marginTop={1}>{dealDesk(layout.dealDesk.width)}</Box>
+            ) : null}
           </Box>
         )}
       </Box>

package/src/ui/Message.tsx

@@ -1,6 +1,5 @@
 import { Box, Text } from "ink";
-import { memo, useMemo } from "react";
-import { renderMarkdown } from "../renderer.ts";
+import { memo } from "react";
 import {
   firstDisplayLine,
   normalizeAssistantDisplayContent,
@@ -10,109 +9,7 @@ import { fitDisplayText } from "./graphemes.ts";
 import { MarkdownBody } from "./MarkdownBody.tsx";
 import { useTheme } from "./ThemeContext.tsx";
 
-interface MessageItem {
-  role: "user" | "assistant" | "system";
-  content: string;
-}
-
-const SEPARATOR_WIDTH = 44;
-
-const ROLE_LABELS: Record<MessageItem["role"], string> = {
-  user: "YOU",
-  assistant: "DREXLER",
-  system: "SYSTEM",
-};
-
-function Separator() {
-  const t = useTheme();
-  return (
-    <Box paddingX={1} marginBottom={1} flexShrink={1}>
-      <Text color={t.primaryDim} wrap="truncate">
-        {"─".repeat(SEPARATOR_WIDTH)}
-      </Text>
-    </Box>
-  );
-}
-
-function MessageInner({ role, content }: MessageItem) {
-  const t = useTheme();
-  const displayContent =
-    role === "assistant"
-      ? normalizeAssistantMarkdownRenderContent(content)
-      : content;
-  const assistantLines = useMemo(
-    () =>
-      role === "assistant"
-        ? renderMarkdown(displayContent).trimEnd().split("\n")
-        : [],
-    [displayContent, role],
-  );
-
-  if (role === "user") {
-    return (
-      <>
-        <Box paddingX={1} marginBottom={1} flexDirection="column">
-          <Box>
-            <Text color={t.primaryLight} bold>
-              {ROLE_LABELS.user}
-            </Text>
-            <Text color={t.primaryDim}> ─ </Text>
-            <Text color={t.dim}>incoming memo</Text>
-          </Box>
-          <Box paddingLeft={1}>
-            <Text color={t.primary}>› </Text>
-            <Text color={t.text} wrap="wrap">
-              {content}
-            </Text>
-          </Box>
-        </Box>
-      </>
-    );
-  }
-  if (role === "system") {
-    return (
-      <Box paddingX={1} marginBottom={1} flexDirection="column">
-        <Box>
-          <Text color={t.warning} bold>
-            {ROLE_LABELS.system}
-          </Text>
-          <Text color={t.primaryDim}> ─ </Text>
-          <Text color={t.dim}>notice</Text>
-        </Box>
-        <Box paddingLeft={1}>
-          <Text color={t.dim} italic wrap="wrap">
-            {content}
-          </Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  return (
-    <>
-      <Box flexDirection="column" marginBottom={1} paddingX={1}>
-        <Box>
-          <Text color={t.primaryLight} bold>
-            {ROLE_LABELS.assistant}
-          </Text>
-          <Text color={t.primaryDim}> ─ </Text>
-          <Text color={t.dim}>response ledger</Text>
-        </Box>
-        {assistantLines.map((ln, i) => (
-          <Box key={i} paddingLeft={1}>
-            <Text color={i === 0 ? t.primary : t.primaryDim}>│ </Text>
-            <Text color={t.text} wrap="wrap">
-              {ln}
-            </Text>
-          </Box>
-        ))}
-      </Box>
-      <Separator />
-    </>
-  );
-}
-
-export const Message = memo(MessageInner);
+const ROLE_LABELS = { assistant: "DREXLER" } as const;
 
 interface StreamingProps {
   content: string;