drexler 0.1.1 → 0.2.0

package/src/ui/SetupPrompt.tsx

@@ -0,0 +1,85 @@
+import { Box, Text, render, useApp, useInput } from "ink";
+import React, { useState } from "react";
+import { isValidApiKey } from "../config.ts";
+
+interface SetupPromptProps {
+  onDone: (value: string | null) => void;
+}
+
+function SetupPrompt({ onDone }: SetupPromptProps) {
+  const { exit } = useApp();
+  const [key, setKey] = useState("");
+  const [notice, setNotice] = useState<string | null>(null);
+
+  useInput((input, keypress) => {
+    if (keypress.ctrl && input === "c") {
+      onDone(null);
+      exit();
+      return;
+    }
+    if (keypress.return) {
+      const trimmed = key.trim();
+      if (!isValidApiKey(trimmed)) {
+        setNotice("Enter a valid OpenRouter API key before continuing.");
+        return;
+      }
+      onDone(trimmed);
+      exit();
+      return;
+    }
+    if (keypress.escape) {
+      onDone(null);
+      exit();
+      return;
+    }
+    if (keypress.backspace || keypress.delete) {
+      setKey((prev) => prev.slice(0, -1));
+      setNotice(null);
+      return;
+    }
+    if (!keypress.ctrl && !keypress.meta && input) {
+      const filtered = input.replace(/[\x00-\x1f]/g, "");
+      if (filtered.length > 0) {
+        setKey((prev) => prev + filtered);
+        setNotice(null);
+      }
+    }
+  });
+
+  const masked = key.length > 0 ? "•".repeat(Math.min(key.length, 48)) : "";
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="green" paddingX={1}>
+      <Text color="green" bold>
+        Drexler first-run setup
+      </Text>
+      <Text color="gray">OpenRouter key required. Get one at https://openrouter.ai/keys</Text>
+      <Box marginTop={1}>
+        <Text color="green" bold>
+          API key
+        </Text>
+        <Text color="gray"> │ </Text>
+        <Text>{masked}</Text>
+        <Text inverse>{key.length === 0 ? " " : ""}</Text>
+      </Box>
+      <Text color="gray">Enter saves securely. Esc cancels. Ctrl+C exits.</Text>
+      {notice ? <Text color="yellow">{notice}</Text> : null}
+    </Box>
+  );
+}
+
+export async function promptForApiKeyWithInk(): Promise<string | null> {
+  let resolvePrompt!: (value: string | null) => void;
+  const done = new Promise<string | null>((resolve) => {
+    resolvePrompt = resolve;
+  });
+  const instance = render(
+    React.createElement(SetupPrompt, {
+      onDone: (value) => resolvePrompt(value),
+    }),
+    { exitOnCtrlC: false },
+  );
+  const value = await done;
+  instance.unmount();
+  return value;
+}

package/src/ui/Spinner.tsx

@@ -1,14 +1,23 @@
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
+import { fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const STAGES = [
+  "pricing risk",
+  "checking covenants",
+  "marking comps",
+  "drafting memo",
+  "tightening language",
+];
 
 interface Props {
   label: string;
+  width?: number;
 }
 
-export function Spinner({ label }: Props) {
+export function Spinner({ label, width = 80 }: Props) {
   const t = useTheme();
   const [i, setI] = useState(0);
   const [elapsedMs, setElapsedMs] = useState(0);
@@ -23,14 +32,44 @@ export function Spinner({ label }: Props) {
   }, []);
 
   const seconds = Math.floor(elapsedMs / 1000);
+  const stage = STAGES[Math.floor(elapsedMs / 1600) % STAGES.length]!;
+  const safeWidth = Math.max(1, Math.floor(width));
+  const elapsedLabel = seconds > 0 ? ` · ${seconds}s` : "";
+  const detail = `${label} · ${stage}${elapsedLabel}`;
+
+  if (safeWidth < 24) {
+    return (
+      <Box width={safeWidth} flexShrink={1}>
+        <Text color={t.primaryLight} wrap="truncate">
+          {fitDisplayText(`${FRAMES[i]} ${detail}`, safeWidth)}
+        </Text>
+      </Box>
+    );
+  }
+
+  const labelBudget = Math.max(1, safeWidth - 22);
+  const showStage = safeWidth >= 42;
 
   return (
-    <Box>
-      <Text color={t.primary}>{FRAMES[i]} </Text>
-      <Text color={t.dim}>{label}…</Text>
-      {seconds > 0 ? (
+    <Box
+      borderStyle="round"
+      borderColor={t.primaryDim}
+      paddingX={1}
+      width={safeWidth}
+      flexShrink={1}
+    >
+      <Text color={t.primaryLight}>{FRAMES[i]} </Text>
+      <Text color={t.primaryLight} bold>
+        WORKING
+      </Text>
+      <Text color={t.primaryDim}> ─ </Text>
+      <Text color={t.text} wrap="truncate">
+        {fitDisplayText(label, labelBudget)}
+      </Text>
+      {showStage ? <Text color={t.dim}> · {stage}</Text> : null}
+      {seconds > 0 && safeWidth >= 34 ? (
         <>
-          <Text color={t.primaryDim}>{"  "}</Text>
+          <Text color={t.primaryDim}> · </Text>
           <Text color={t.dim}>{seconds}s</Text>
         </>
       ) : null}

package/src/ui/StatusBar.tsx

@@ -1,4 +1,6 @@
 import { Box, Text } from "ink";
+import { memo, useMemo } from "react";
+import { fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 export type StatusDot = "idle" | "streaming" | "error";
@@ -9,6 +11,7 @@ interface Props {
   maxWidth?: number;
   status?: StatusDot;
   compact?: boolean;
+  scrollHint?: string;
 }
 
 const MAX_WITTICISM_LEN = 60;
@@ -20,34 +23,61 @@ function clampText(input: string, max: number): string {
   return input.slice(0, max - 1) + "…";
 }
 
-export function StatusBar({
+function StatusBarInner({
   messageCount,
   witticism,
   maxWidth,
   status = "idle",
   compact = false,
+  scrollHint,
 }: Props) {
   const t = useTheme();
-  const dotColor: Record<StatusDot, string> = {
-    idle: t.primaryLight,
-    streaming: t.warning,
-    error: t.error,
-  };
+  const dotColor = useMemo<Record<StatusDot, string>>(
+    () => ({
+      idle: t.primaryLight,
+      streaming: t.warning,
+      error: t.error,
+    }),
+    [t.primaryLight, t.warning, t.error],
+  );
   const countLabel = `${messageCount} message${messageCount === 1 ? "" : "s"}`;
+  const hintLabel = scrollHint ? `  │  ${scrollHint}` : "";
   const quoteWidth =
     typeof maxWidth === "number"
-      ? Math.max(0, maxWidth - "● ".length - countLabel.length - "  │  ".length - 2)
+      ? Math.max(
+          0,
+          maxWidth -
+            "● ".length -
+            countLabel.length -
+            hintLabel.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>
+      {scrollHint ? (
+        <>
+          <Text color={t.primaryDim}>{"  │  "}</Text>
+          <Text color={t.primaryLight}>
+            {fitDisplayText(scrollHint, Math.max(1, maxWidth ?? 24))}
+          </Text>
+        </>
+      ) : null}
     </Box>
   ) : (
     <Box>
       <Text color={dotColor[status]}>● </Text>
       <Text color={t.dim}>{countLabel}</Text>
+      {scrollHint ? (
+        <>
+          <Text color={t.primaryDim}>{"  │  "}</Text>
+          <Text color={t.primaryLight}>{scrollHint}</Text>
+        </>
+      ) : null}
       <Text color={t.primaryDim}>{"  │  "}</Text>
       <Text color={t.dim} italic>
         "{safe}"
@@ -59,3 +89,5 @@ export function StatusBar({
   }
   return box;
 }
+
+export const StatusBar = memo(StatusBarInner);

package/src/ui/TranscriptViewport.tsx

@@ -0,0 +1,255 @@
+import { Box, Text } from "ink";
+import { Children, memo, useMemo, type ReactNode } from "react";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
+import { useTheme } from "./ThemeContext.tsx";
+
+export interface TranscriptViewportItem {
+  id?: string | number;
+  role: "user" | "assistant" | "system";
+  content: string;
+}
+
+export interface TranscriptViewportProps {
+  items?: readonly TranscriptViewportItem[];
+  children?: ReactNode;
+  renderItem?: (item: TranscriptViewportItem, index: number) => ReactNode;
+  maxRows?: number;
+  cols?: number;
+  compact?: boolean;
+  scrollOffset?: number;
+}
+
+interface TranscriptEntry {
+  key: string;
+  node: ReactNode;
+  estimatedRows: number;
+}
+
+const DEFAULT_MAX_ROWS = 18;
+const DEFAULT_COLS = 80;
+const MIN_COLS = 1;
+
+const ROLE_LABELS: Record<TranscriptViewportItem["role"], string> = {
+  user: "YOU",
+  assistant: "DREXLER",
+  system: "SYSTEM",
+};
+
+function lineCount(input: string): number {
+  if (input.length === 0) return 1;
+  return input.split("\n").length;
+}
+
+function itemRows(item: TranscriptViewportItem, compact: boolean): number {
+  if (compact) return 1;
+  return 1 + lineCount(item.content);
+}
+
+function roleColor(
+  role: TranscriptViewportItem["role"],
+  theme: ReturnType<typeof useTheme>,
+): string {
+  if (role === "system") return theme.warning;
+  return theme.primaryLight;
+}
+
+function DefaultTranscriptItem({
+  item,
+  compact,
+  cols,
+}: {
+  item: TranscriptViewportItem;
+  compact: boolean;
+  cols: number;
+}) {
+  const t = useTheme();
+  const label = ROLE_LABELS[item.role];
+
+  if (compact) {
+    const prefix = `${label} │ `;
+    const budget = Math.max(1, cols - displayWidth(prefix));
+    const firstLine = item.content.split("\n")[0] ?? "";
+    return (
+      <Box width={cols} flexShrink={1}>
+        <Text color={roleColor(item.role, t)} bold>
+          {fitDisplayText(prefix, cols)}
+        </Text>
+        {displayWidth(prefix) < cols ? (
+          <Text color={item.role === "system" ? t.dim : t.text} wrap="truncate">
+            {fitDisplayText(firstLine, budget)}
+          </Text>
+        ) : null}
+      </Box>
+    );
+  }
+
+  const contentWidth = Math.max(1, cols - 2);
+  return (
+    <Box flexDirection="column" width={cols} flexShrink={1}>
+      <Text color={roleColor(item.role, t)} bold wrap="truncate">
+        {fitDisplayText(label, cols)}
+      </Text>
+      {item.content.split("\n").map((line, index) => (
+        <Box key={index} paddingLeft={1} width={cols} flexShrink={1}>
+          <Text color={t.primaryDim}>│ </Text>
+          <Text color={item.role === "system" ? t.dim : t.text} wrap="truncate">
+            {fitDisplayText(line, contentWidth)}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function childrenToEntries(children: ReactNode): TranscriptEntry[] {
+  return Children.toArray(children).map((child, index) => ({
+    key: `child-${index}`,
+    node: child,
+    estimatedRows: 1,
+  }));
+}
+
+function itemsToEntries({
+  items,
+  renderItem,
+  compact,
+  cols,
+}: {
+  items: readonly TranscriptViewportItem[];
+  renderItem?: (item: TranscriptViewportItem, index: number) => ReactNode;
+  compact: boolean;
+  cols: number;
+}): TranscriptEntry[] {
+  return items.map((item, index) => ({
+    key: String(item.id ?? index),
+    node: renderItem ? (
+      renderItem(item, index)
+    ) : (
+      <DefaultTranscriptItem item={item} compact={compact} cols={cols} />
+    ),
+    estimatedRows: itemRows(item, compact),
+  }));
+}
+
+function selectWindow(
+  entries: TranscriptEntry[],
+  maxRows: number,
+  scrollOffset: number,
+): {
+  visible: TranscriptEntry[];
+  hiddenBefore: number;
+  hiddenAfter: number;
+} {
+  if (entries.length === 0) {
+    return { visible: [], hiddenBefore: 0, hiddenAfter: 0 };
+  }
+
+  const safeRows = Math.max(1, Math.floor(maxRows));
+  const safeOffset = Math.max(0, Math.min(Math.floor(scrollOffset), entries.length - 1));
+  const end = entries.length - safeOffset;
+  let reserveTop = 0;
+  const reserveBottom = safeOffset > 0 ? 1 : 0;
+  let start = Math.max(0, end - 1);
+
+  for (let pass = 0; pass < 3; pass++) {
+    const budget = Math.max(1, safeRows - reserveTop - reserveBottom);
+    let used = 0;
+    start = end;
+
+    while (start > 0) {
+      const entry = entries[start - 1]!;
+      const rows = Math.max(1, entry.estimatedRows);
+      if (used > 0 && used + rows > budget) break;
+      start -= 1;
+      used += rows;
+      if (used >= budget) break;
+    }
+
+    const nextReserveTop = start > 0 ? 1 : 0;
+    if (nextReserveTop === reserveTop) break;
+    reserveTop = nextReserveTop;
+  }
+
+  return {
+    visible: entries.slice(start, end),
+    hiddenBefore: start,
+    hiddenAfter: entries.length - end,
+  };
+}
+
+function ScrollIndicator({
+  direction,
+  count,
+  compact,
+  cols,
+}: {
+  direction: "earlier" | "newer";
+  count: number;
+  compact: boolean;
+  cols: number;
+}) {
+  const t = useTheme();
+  const arrow = direction === "earlier" ? "↑" : "↓";
+  const label = compact
+    ? `${arrow} ${count} ${direction}`
+    : `${arrow} ${count} ${direction} transcript item${count === 1 ? "" : "s"} hidden`;
+
+  return (
+    <Box width={cols} flexShrink={1}>
+      <Text color={t.primaryDim} wrap="truncate">
+        {fitDisplayText(label, cols)}
+      </Text>
+    </Box>
+  );
+}
+
+function TranscriptViewportInner({
+  items,
+  children,
+  renderItem,
+  maxRows = DEFAULT_MAX_ROWS,
+  cols = DEFAULT_COLS,
+  compact = false,
+  scrollOffset = 0,
+}: TranscriptViewportProps) {
+  const width = Math.max(MIN_COLS, Math.floor(cols));
+  const entries = useMemo(
+    () =>
+      items
+        ? itemsToEntries({ items, renderItem, compact, cols: width })
+        : childrenToEntries(children),
+    [children, compact, items, renderItem, width],
+  );
+  const { visible, hiddenBefore, hiddenAfter } = useMemo(
+    () => selectWindow(entries, maxRows, scrollOffset),
+    [entries, maxRows, scrollOffset],
+  );
+
+  return (
+    <Box flexDirection="column" width={width} flexShrink={1}>
+      {hiddenBefore > 0 ? (
+        <ScrollIndicator
+          direction="earlier"
+          count={hiddenBefore}
+          compact={compact}
+          cols={width}
+        />
+      ) : null}
+      {visible.map((entry) => (
+        <Box key={entry.key} flexDirection="column" width={width} flexShrink={1}>
+          {entry.node}
+        </Box>
+      ))}
+      {hiddenAfter > 0 ? (
+        <ScrollIndicator
+          direction="newer"
+          count={hiddenAfter}
+          compact={compact}
+          cols={width}
+        />
+      ) : null}
+    </Box>
+  );
+}
+
+export const TranscriptViewport = memo(TranscriptViewportInner);

package/src/ui/graphemes.ts

@@ -0,0 +1,119 @@
+let segmenter: Intl.Segmenter | null = null;
+
+function getSegmenter(): Intl.Segmenter | null {
+  if (typeof Intl.Segmenter !== "function") return null;
+  segmenter ??= new Intl.Segmenter(undefined, { granularity: "grapheme" });
+  return segmenter;
+}
+
+export function splitGraphemes(input: string): string[] {
+  const active = getSegmenter();
+  if (!active) return Array.from(input);
+  return Array.from(active.segment(input), (part) => part.segment);
+}
+
+export function graphemeLength(input: string): number {
+  return splitGraphemes(input).length;
+}
+
+function isWideCodePoint(codePoint: number): boolean {
+  return (
+    codePoint >= 0x1100 &&
+    (codePoint <= 0x115f ||
+      codePoint === 0x2329 ||
+      codePoint === 0x232a ||
+      (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f) ||
+      (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+      (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+      (codePoint >= 0xfe10 && codePoint <= 0xfe19) ||
+      (codePoint >= 0xfe30 && codePoint <= 0xfe6f) ||
+      (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+      (codePoint >= 0xffe0 && codePoint <= 0xffe6))
+  );
+}
+
+function graphemeWidth(input: string): number {
+  if (input.length === 0) return 0;
+  if (/^\p{Mark}+$/u.test(input)) return 0;
+  if (/\p{Extended_Pictographic}/u.test(input)) return 2;
+  let width = 0;
+  for (const char of input) {
+    const codePoint = char.codePointAt(0) ?? 0;
+    if (codePoint === 0 || codePoint < 32 || (codePoint >= 0x7f && codePoint < 0xa0)) {
+      continue;
+    }
+    if (/\p{Mark}/u.test(char)) continue;
+    width += isWideCodePoint(codePoint) ? 2 : 1;
+  }
+  return width;
+}
+
+export function displayWidth(input: string): number {
+  return splitGraphemes(input).reduce(
+    (sum, grapheme) => sum + graphemeWidth(grapheme),
+    0,
+  );
+}
+
+export function fitDisplayText(input: string, maxWidth: number): string {
+  if (maxWidth <= 0) return "";
+  if (displayWidth(input) <= maxWidth) return input;
+  if (maxWidth === 1) return "…";
+
+  let out = "";
+  for (const part of splitGraphemes(input)) {
+    if (displayWidth(`${out}${part}…`) > maxWidth) break;
+    out += part;
+  }
+  return `${out}…`;
+}
+
+export function clampCursor(input: string, cursor: number): number {
+  return Math.max(0, Math.min(cursor, graphemeLength(input)));
+}
+
+export function insertAtCursor(
+  input: string,
+  cursor: number,
+  inserted: string,
+): { value: string; cursor: number } {
+  const chars = splitGraphemes(input);
+  const safeCursor = Math.max(0, Math.min(cursor, chars.length));
+  const next = [
+    ...chars.slice(0, safeCursor),
+    inserted,
+    ...chars.slice(safeCursor),
+  ].join("");
+  return {
+    value: next,
+    cursor: safeCursor + graphemeLength(inserted),
+  };
+}
+
+export function deleteBeforeCursor(
+  input: string,
+  cursor: number,
+): { value: string; cursor: number } {
+  const chars = splitGraphemes(input);
+  const safeCursor = Math.max(0, Math.min(cursor, chars.length));
+  if (safeCursor === 0) return { value: input, cursor: 0 };
+  chars.splice(safeCursor - 1, 1);
+  return {
+    value: chars.join(""),
+    cursor: safeCursor - 1,
+  };
+}
+
+export function deleteAtCursor(
+  input: string,
+  cursor: number,
+): { value: string; cursor: number } {
+  const chars = splitGraphemes(input);
+  const safeCursor = Math.max(0, Math.min(cursor, chars.length));
+  if (safeCursor >= chars.length) return { value: input, cursor: safeCursor };
+  chars.splice(safeCursor, 1);
+  return {
+    value: chars.join(""),
+    cursor: safeCursor,
+  };
+}

package/src/ui/themes.ts

@@ -1,4 +1,5 @@
 import chalk from "chalk";
+import { THEME_NAMES, type ThemeName } from "../types.ts";
 
 export interface Theme {
   primary: string;       // e.g. "#007e54" or "green"
@@ -11,8 +12,6 @@ export interface Theme {
   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",
@@ -32,6 +31,36 @@ export const THEMES: Record<ThemeName, Theme> = {
     error: "red", warning: "yellow",
     ansi: true,
   },
+  terminal: {
+    primary: "green", primaryLight: "cyan", primaryDim: "gray",
+    text: "white", dim: "gray",
+    error: "red", warning: "yellow",
+    ansi: true,
+  },
+  dealroom: {
+    primary: "#0f766e", primaryLight: "#14b8a6", primaryDim: "#115e59",
+    text: "#f3f4f6", dim: "#94a3b8",
+    error: "#f43f5e", warning: "#f59e0b",
+    ansi: false,
+  },
+  midnight: {
+    primary: "#38bdf8", primaryLight: "#7dd3fc", primaryDim: "#0369a1",
+    text: "#e5e7eb", dim: "#64748b",
+    error: "#fb7185", warning: "#facc15",
+    ansi: false,
+  },
+  paper: {
+    primary: "#1d4ed8", primaryLight: "#2563eb", primaryDim: "#1e3a8a",
+    text: "#f8fafc", dim: "#94a3b8",
+    error: "#b91c1c", warning: "#b45309",
+    ansi: false,
+  },
+  plasma: {
+    primary: "#db2777", primaryLight: "#f472b6", primaryDim: "#7e22ce",
+    text: "#f8fafc", dim: "#94a3b8",
+    error: "#f43f5e", warning: "#f59e0b",
+    ansi: false,
+  },
 };
 
 let active: Theme = THEMES.apollo;
@@ -43,12 +72,16 @@ export function getActiveTheme(): Theme {
   return active;
 }
 
+export function isThemeName(value: string | undefined): value is ThemeName {
+  return THEME_NAMES.includes(value as ThemeName);
+}
+
 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") {
+  if (isThemeName(candidate)) {
     return candidate;
   }
   console.error(`Unknown theme "${candidate}", falling back to apollo.`);