drexler 0.1.0

package/src/ui/MascotFrame.tsx

@@ -0,0 +1,70 @@
+import { Box, Text } from "ink";
+import { memo } from "react";
+import { useTheme } from "./ThemeContext.tsx";
+
+export const MASCOT_WIDTH = 17;
+
+export const BRIEFCASE_FINAL = [
+  "      ╔════╗     ",
+  " ╔════╩════╩════╗",
+  " ║  \\__    __/  ║",
+  " ║   ◆      ◆   ║",
+  " ║    ╔════╗    ║",
+  " ║    ║ $$ ║    ║",
+  " ╚════╩════╩════╝",
+] as const;
+
+export const BROW_LINES = {
+  hidden: " ║              ║",
+  raised: " ║  \\_      _/  ║",
+  focused: " ║   \\__  __/   ║",
+  flat: " ║  ──      ──  ║",
+  normal: BRIEFCASE_FINAL[2],
+} as const;
+
+export interface MascotState {
+  walls: "dim" | "on";
+  brows: keyof typeof BROW_LINES;
+  eyes: "hidden" | "open" | "closed";
+  showLock: boolean;
+  dollars: "hidden" | "on" | "dim";
+}
+
+export function renderMascotLines(p: MascotState): string[] {
+  const lines: string[] = [...BRIEFCASE_FINAL];
+  lines[2] = BROW_LINES[p.brows];
+  lines[3] =
+    p.eyes === "open"
+      ? BRIEFCASE_FINAL[3]
+      : p.eyes === "closed"
+      ? " ║   ─      ─   ║"
+      : " ║              ║";
+
+  if (!p.showLock) {
+    lines[4] = " ║              ║";
+    lines[5] = " ║              ║";
+  } else if (p.dollars === "dim") {
+    lines[5] = " ║    ║ ░░ ║    ║";
+  } else if (p.dollars === "hidden") {
+    lines[5] = " ║    ║    ║    ║";
+  }
+  return lines;
+}
+
+function MascotFrameView(p: MascotState) {
+  const t = useTheme();
+  const wallColor = p.walls === "dim" ? t.primaryDim : t.primary;
+  const lines = renderMascotLines(p);
+
+  return (
+    <Box flexDirection="column" width={MASCOT_WIDTH} flexShrink={0}>
+      {lines.map((line, idx) => (
+        <Text key={idx} color={wallColor}>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+export const MascotFrame = memo(MascotFrameView);

package/src/ui/MascotIntro.tsx

@@ -0,0 +1,338 @@
+import { Box, Text, useApp, useInput, useStdout } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { STARTUP_TIPS } from "../startupTips.ts";
+import {
+  MascotFrame,
+  MASCOT_WIDTH,
+  type MascotState,
+} from "./MascotFrame.tsx";
+import { useTheme } from "./ThemeContext.tsx";
+
+interface IntroFrame extends MascotState {
+  delayMs: number;
+  note: IntroBootNote;
+}
+
+export const INTRO_STATUS_PREFIX = " ◆ ";
+export const INTRO_BOOT_NOTES = [
+  "Briefcase boot",
+  "Deal tape live",
+  "Covenants OK",
+  "Risk marked",
+  "Capital set",
+  "Fees captured",
+  "Board notified",
+  "Final audit",
+  "Bid armed",
+  "Drexler online",
+] as const;
+
+type IntroBootNote = (typeof INTRO_BOOT_NOTES)[number];
+
+const FRAMES: IntroFrame[] = [
+  {
+    walls: "dim",
+    brows: "hidden",
+    eyes: "hidden",
+    showLock: true,
+    dollars: "hidden",
+    delayMs: 520,
+    note: INTRO_BOOT_NOTES[0],
+  },
+  {
+    walls: "on",
+    brows: "raised",
+    eyes: "hidden",
+    showLock: true,
+    dollars: "hidden",
+    delayMs: 520,
+    note: INTRO_BOOT_NOTES[1],
+  },
+  {
+    walls: "on",
+    brows: "raised",
+    eyes: "open",
+    showLock: true,
+    dollars: "hidden",
+    delayMs: 560,
+    note: INTRO_BOOT_NOTES[2],
+  },
+  {
+    walls: "on",
+    brows: "flat",
+    eyes: "closed",
+    showLock: true,
+    dollars: "dim",
+    delayMs: 420,
+    note: INTRO_BOOT_NOTES[3],
+  },
+  {
+    walls: "on",
+    brows: "focused",
+    eyes: "open",
+    showLock: true,
+    dollars: "dim",
+    delayMs: 520,
+    note: INTRO_BOOT_NOTES[4],
+  },
+  {
+    walls: "on",
+    brows: "normal",
+    eyes: "open",
+    showLock: true,
+    dollars: "on",
+    delayMs: 620,
+    note: INTRO_BOOT_NOTES[5],
+  },
+  {
+    walls: "on",
+    brows: "flat",
+    eyes: "closed",
+    showLock: true,
+    dollars: "on",
+    delayMs: 360,
+    note: INTRO_BOOT_NOTES[6],
+  },
+  {
+    walls: "on",
+    brows: "focused",
+    eyes: "open",
+    showLock: true,
+    dollars: "dim",
+    delayMs: 440,
+    note: INTRO_BOOT_NOTES[7],
+  },
+  {
+    walls: "on",
+    brows: "raised",
+    eyes: "open",
+    showLock: true,
+    dollars: "on",
+    delayMs: 520,
+    note: INTRO_BOOT_NOTES[8],
+  },
+  {
+    walls: "on",
+    brows: "normal",
+    eyes: "open",
+    showLock: true,
+    dollars: "on",
+    delayMs: 1200,
+    note: INTRO_BOOT_NOTES[9],
+  },
+];
+
+const COMPACT_NOTES = ["Booting", "Scanning", "Online"];
+const COMPACT_DELAY_MS = 850;
+const SETTLE_HOLD_MS = 1200;
+const FRAME_CHROME_WIDTH = 4;
+const GUTTER_WIDTH = 4;
+const SPLIT_DIVIDER_WIDTH = 3;
+const BOOT_BAR_WIDTH = MASCOT_WIDTH - 1;
+const SPLIT_DIVIDER_HEIGHT = 9;
+const SPLIT_DIVIDER_ROWS: number[] = Array.from(
+  { length: SPLIT_DIVIDER_HEIGHT },
+  (_, i) => i,
+);
+
+interface IntroProps {
+  greeting: string;
+}
+
+function bootBar(frameIdx: number, total: number): string {
+  const active = Math.max(
+    1,
+    Math.ceil(((frameIdx + 1) / total) * BOOT_BAR_WIDTH),
+  );
+  return " " + "▰".repeat(active) + "▱".repeat(BOOT_BAR_WIDTH - active);
+}
+
+function TipsPanel({ width }: { width: number }) {
+  const t = useTheme();
+  const textWidth = Math.max(1, width);
+  return (
+    <Box flexDirection="column" width={textWidth}>
+      <Text bold color={t.primaryLight}>
+        Tips for getting started
+      </Text>
+      <Box flexDirection="column" paddingLeft={2}>
+        {STARTUP_TIPS.map((tip, idx) => (
+          <Text key={tip} color={t.dim}>
+            <Text color={t.primary}>{idx + 1}. </Text>
+            {tip}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export function MascotIntro({ greeting }: IntroProps) {
+  const t = useTheme();
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [cols, setCols] = useState(stdout?.columns ?? 80);
+  const [frameIdx, setFrameIdx] = useState(0);
+
+  useEffect(() => {
+    if (!stdout) return;
+    const handler = () => setCols(stdout.columns ?? 80);
+    stdout.on("resize", handler);
+    return () => {
+      stdout.off("resize", handler);
+    };
+  }, [stdout]);
+
+  useInput((_input, key) => {
+    if (key.escape || key.return || (key.ctrl && _input === "c")) exit();
+  });
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const compact = cols < 72;
+    const total = compact ? COMPACT_NOTES.length : FRAMES.length;
+    if (frameIdx >= total - 1) {
+      const handle = setTimeout(() => {
+        if (mountedRef.current) exit();
+      }, SETTLE_HOLD_MS);
+      return () => clearTimeout(handle);
+    }
+    const delay = compact
+      ? COMPACT_DELAY_MS
+      : (FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!).delayMs;
+    const handle = setTimeout(() => {
+      if (mountedRef.current) setFrameIdx((i) => i + 1);
+    }, delay);
+    return () => clearTimeout(handle);
+  }, [cols, frameIdx, exit]);
+
+  const state = FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!;
+  // Below 21 cols, mascot (17) + gutter (4) overflow — render text-only.
+  const tinyTerminal = cols < 21;
+  const compact = cols < 72;
+  const sideBySide = cols >= 112;
+  const available = compact
+    ? Math.max(1, cols - 1)
+    : Math.max(28, cols);
+  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 tipsWidth = sideBySide
+    ? Math.max(20, innerWidth - leftPanelWidth - SPLIT_DIVIDER_WIDTH)
+    : innerWidth;
+  const copyWidth = compact
+    ? available
+    : sideBySide
+    ? Math.max(18, leftPanelWidth - MASCOT_WIDTH - GUTTER_WIDTH)
+    : innerWidth;
+  const bar = bootBar(
+    Math.min(frameIdx, compact ? COMPACT_NOTES.length - 1 : FRAMES.length - 1),
+    compact ? COMPACT_NOTES.length : FRAMES.length,
+  );
+  const barColor =
+    frameIdx < (compact ? COMPACT_NOTES.length : FRAMES.length) / 3
+      ? t.error
+      : frameIdx < ((compact ? COMPACT_NOTES.length : FRAMES.length) * 2) / 3
+      ? t.warning
+      : t.primaryLight;
+  const note = compact
+    ? COMPACT_NOTES[Math.min(frameIdx, COMPACT_NOTES.length - 1)]!
+    : state.note;
+  const mascotStatus = `${INTRO_STATUS_PREFIX}${note}`;
+
+  if (tinyTerminal) {
+    return (
+      <Box width={available} flexDirection="column">
+        <Text color={barColor}>{mascotStatus}</Text>
+        <Text bold color={t.primaryLight}>
+          Drexler™
+        </Text>
+        <Text color={t.primaryLight}>{greeting}</Text>
+      </Box>
+    );
+  }
+
+  if (compact) {
+    return (
+      <Box marginLeft={1} width={available} flexDirection="column">
+        <Text color={barColor}>{bar}</Text>
+        <Text color={barColor}>{mascotStatus}</Text>
+        <Text bold color={t.primaryLight}>
+          Drexler International™
+        </Text>
+        <Text color={t.primaryLight}>{greeting}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box width={available}>
+      <Box
+        width={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
+            width={MASCOT_WIDTH}
+            flexShrink={0}
+            flexDirection="column"
+            marginRight={sideBySide ? GUTTER_WIDTH : 0}
+          >
+            <MascotFrame {...state} />
+            <Text color={barColor}>{bar}</Text>
+            <Text color={barColor}>{mascotStatus}</Text>
+          </Box>
+          <Box
+            flexDirection="column"
+            justifyContent="center"
+            width={copyWidth}
+            marginTop={sideBySide ? 1 : 0}
+          >
+            <Text bold color={t.primaryLight}>
+              Drexler International™
+            </Text>
+            <Box height={1} />
+            <Text color={t.primaryLight}>{greeting}</Text>
+            <Box height={1} />
+          </Box>
+        </Box>
+        {sideBySide ? (
+          <>
+            <Box flexDirection="column" width={SPLIT_DIVIDER_WIDTH}>
+              {SPLIT_DIVIDER_ROWS.map((idx) => (
+                <Text key={idx} color={t.primaryDim}>
+                  {" │ "}
+                </Text>
+              ))}
+            </Box>
+            <Box width={tipsWidth}>
+              <TipsPanel width={tipsWidth} />
+            </Box>
+          </>
+        ) : (
+          <Box marginTop={1} width={tipsWidth}>
+            <TipsPanel width={tipsWidth} />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/Message.tsx

@@ -0,0 +1,82 @@
+import { Box, Text } from "ink";
+import { memo, useMemo } from "react";
+import { renderMarkdown } from "../renderer.ts";
+import { useTheme } from "./ThemeContext.tsx";
+
+interface MessageItem {
+  role: "user" | "assistant" | "system";
+  content: string;
+}
+
+function Separator() {
+  const t = useTheme();
+  return (
+    <Box paddingX={1} marginBottom={1}>
+      <Text color={t.primaryDim}>{"─".repeat(40)}</Text>
+    </Box>
+  );
+}
+
+function MessageInner({ role, content }: MessageItem) {
+  const t = useTheme();
+  if (role === "user") {
+    return (
+      <>
+        <Box paddingX={1} marginBottom={1}>
+          <Text color={t.dim}>❯ </Text>
+          <Text color={t.text}>{content}</Text>
+        </Box>
+      </>
+    );
+  }
+  if (role === "system") {
+    return (
+      <Box paddingX={1} marginBottom={1}>
+        <Text color={t.dim} italic>
+          {content}
+        </Text>
+      </Box>
+    );
+  }
+  // assistant: left accent bar + markdown rendering, separator below
+  const lines = useMemo(
+    () => renderMarkdown(content).trimEnd().split("\n"),
+    [content],
+  );
+  return (
+    <>
+      <Box flexDirection="column" marginBottom={1}>
+        {lines.map((ln, i) => (
+          <Box key={i}>
+            <Text color={t.primary}>│ </Text>
+            <Text>{ln}</Text>
+          </Box>
+        ))}
+      </Box>
+      <Separator />
+    </>
+  );
+}
+
+export const Message = memo(MessageInner);
+
+interface StreamingProps {
+  content: string;
+}
+
+function StreamingMessageInner({ content }: StreamingProps) {
+  const t = useTheme();
+  const lines = useMemo(() => content.split("\n"), [content]);
+  return (
+    <Box flexDirection="column">
+      {lines.map((ln, i) => (
+        <Box key={i}>
+          <Text color={t.primary}>│ </Text>
+          <Text color={t.text}>{ln}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export const StreamingMessage = memo(StreamingMessageInner);

package/src/ui/Spinner.tsx

@@ -0,0 +1,39 @@
+import { Box, Text } from "ink";
+import { useEffect, useState } from "react";
+import { useTheme } from "./ThemeContext.tsx";
+
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+interface Props {
+  label: string;
+}
+
+export function Spinner({ label }: Props) {
+  const t = useTheme();
+  const [i, setI] = useState(0);
+  const [elapsedMs, setElapsedMs] = useState(0);
+
+  useEffect(() => {
+    const start = Date.now();
+    const tick = setInterval(() => {
+      setI((x) => (x + 1) % FRAMES.length);
+      setElapsedMs(Date.now() - start);
+    }, 80);
+    return () => clearInterval(tick);
+  }, []);
+
+  const seconds = Math.floor(elapsedMs / 1000);
+
+  return (
+    <Box>
+      <Text color={t.primary}>{FRAMES[i]} </Text>
+      <Text color={t.dim}>{label}…</Text>
+      {seconds > 0 ? (
+        <>
+          <Text color={t.primaryDim}>{"  "}</Text>
+          <Text color={t.dim}>{seconds}s</Text>
+        </>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/StatusBar.tsx

@@ -0,0 +1,61 @@
+import { Box, Text } from "ink";
+import { useTheme } from "./ThemeContext.tsx";
+
+export type StatusDot = "idle" | "streaming" | "error";
+
+interface Props {
+  messageCount: number;
+  witticism: string;
+  maxWidth?: number;
+  status?: StatusDot;
+  compact?: boolean;
+}
+
+const MAX_WITTICISM_LEN = 60;
+
+function clampText(input: string, max: number): string {
+  if (input.length <= max) return input;
+  if (max <= 0) return "";
+  if (max === 1) return "…";
+  return input.slice(0, max - 1) + "…";
+}
+
+export function StatusBar({
+  messageCount,
+  witticism,
+  maxWidth,
+  status = "idle",
+  compact = false,
+}: Props) {
+  const t = useTheme();
+  const dotColor: Record<StatusDot, string> = {
+    idle: t.primaryLight,
+    streaming: t.warning,
+    error: t.error,
+  };
+  const countLabel = `${messageCount} message${messageCount === 1 ? "" : "s"}`;
+  const quoteWidth =
+    typeof maxWidth === "number"
+      ? Math.max(0, maxWidth - "● ".length - countLabel.length - "  │  ".length - 2)
+      : MAX_WITTICISM_LEN;
+  const safe = clampText(witticism, Math.min(MAX_WITTICISM_LEN, quoteWidth));
+  const box = compact ? (
+    <Box>
+      <Text color={dotColor[status]}>● </Text>
+      <Text color={t.dim}>{countLabel}</Text>
+    </Box>
+  ) : (
+    <Box>
+      <Text color={dotColor[status]}>● </Text>
+      <Text color={t.dim}>{countLabel}</Text>
+      <Text color={t.primaryDim}>{"  │  "}</Text>
+      <Text color={t.dim} italic>
+        "{safe}"
+      </Text>
+    </Box>
+  );
+  if (typeof maxWidth === "number") {
+    return <Box width={maxWidth}>{box}</Box>;
+  }
+  return box;
+}

package/src/ui/ThemeContext.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { getActiveTheme, type Theme } from "./themes.ts";
+
+const ThemeCtx = createContext<Theme>(getActiveTheme());
+export function ThemeProvider({ value, children }: { value: Theme; children: ReactNode }) {
+  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;
+}
+export function useTheme(): Theme {
+  return useContext(ThemeCtx);
+}

package/src/ui/themes.ts

@@ -0,0 +1,88 @@
+import chalk from "chalk";
+
+export interface Theme {
+  primary: string;       // e.g. "#007e54" or "green"
+  primaryLight: string;
+  primaryDim: string;
+  text: string;
+  dim: string;
+  error: string;
+  warning: string;
+  ansi: boolean;         // true = use named ANSI colors, false = hex
+}
+
+export type ThemeName = "apollo" | "amber" | "mono";
+
+export const THEMES: Record<ThemeName, Theme> = {
+  apollo: {
+    primary: "#007e54", primaryLight: "#00a86b", primaryDim: "#005c3a",
+    text: "#e0e0e0", dim: "#6b7280",
+    error: "#ef4444", warning: "#eab308",
+    ansi: false,
+  },
+  amber: {
+    primary: "#d97706", primaryLight: "#f59e0b", primaryDim: "#92400e",
+    text: "#e0e0e0", dim: "#6b7280",
+    error: "#ef4444", warning: "#eab308",
+    ansi: false,
+  },
+  mono: {
+    primary: "white", primaryLight: "white", primaryDim: "gray",
+    text: "white", dim: "gray",
+    error: "red", warning: "yellow",
+    ansi: true,
+  },
+};
+
+let active: Theme = THEMES.apollo;
+
+export function setActiveTheme(name: ThemeName): void {
+  active = THEMES[name];
+}
+export function getActiveTheme(): Theme {
+  return active;
+}
+
+export function selectTheme(opts: {
+  flag?: string; env?: string; configValue?: string;
+}): ThemeName {
+  if (process.env.NO_COLOR && process.env.NO_COLOR.length > 0) return "mono";
+  const candidate = opts.flag ?? opts.env ?? opts.configValue ?? "apollo";
+  if (candidate === "apollo" || candidate === "amber" || candidate === "mono") {
+    return candidate;
+  }
+  console.error(`Unknown theme "${candidate}", falling back to apollo.`);
+  return "apollo";
+}
+
+function ansiNamedColor(name: string): typeof chalk.white {
+  switch (name) {
+    case "black": return chalk.black;
+    case "red": return chalk.red;
+    case "green": return chalk.green;
+    case "yellow": return chalk.yellow;
+    case "blue": return chalk.blue;
+    case "magenta": return chalk.magenta;
+    case "cyan": return chalk.cyan;
+    case "white": return chalk.white;
+    case "gray":
+    case "grey":
+      return chalk.gray;
+    default:
+      return chalk.white;
+  }
+}
+
+export function buildChalkColors(theme: Theme) {
+  const wrap = (color: string) =>
+    theme.ansi ? ansiNamedColor(color) : chalk.hex(color);
+  return {
+    apollo: wrap(theme.primary),
+    apolloLight: wrap(theme.primaryLight),
+    apolloDim: wrap(theme.primaryDim),
+    text: wrap(theme.text),
+    dim: wrap(theme.dim),
+    error: wrap(theme.error),
+    warning: wrap(theme.warning),
+  };
+}