drexler 0.1.1 → 0.2.0

package/src/ui/CommandPalette.tsx

@@ -1,36 +1,130 @@
 import { Box, Text } from "ink";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import type { SlashCommand } from "../commands.ts";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 interface Props {
   items: ReadonlyArray<SlashCommand>;
   selectedIdx: number;
+  width?: number;
 }
 
-export function CommandPalette({ items, selectedIdx }: Props) {
+const COMMAND_HINTS: Record<string, string> = {
+  "/help": "open directive list",
+  "/clear": "reset transcript",
+  "/exit": "close session",
+  "/synergy": "morale event",
+  "/model": "/model 26b",
+  "/theme": "/theme midnight",
+  "/startup": "/startup fast",
+  "/history": "show ledger stats",
+  "/regenerate": "retry last answer",
+  "/retry": "/retry terse",
+  "/expand": "print latest response",
+  "/quote": "quote latest response",
+  "/search": "/search covenant",
+  "/export": "/export html board-memo.html",
+  "/save": "/save deal-notes.md",
+  "/save-last": "/save-last last-response.md",
+  "/copy-last": "copy latest response",
+};
+
+function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
   const t = useTheme();
+  const safeWidth = Math.max(1, Math.floor(width));
+  const tiny = safeWidth < 26;
   const maxNameW = useMemo(
     () => items.reduce((m, i) => Math.max(m, i.name.length), 0),
     [items],
   );
   if (items.length === 0) return null;
+
+  if (tiny) {
+    return (
+      <Box flexDirection="column" width={safeWidth} flexShrink={1}>
+        {items.map((item, idx) => {
+          const sel = idx === selectedIdx;
+          const line = `${sel ? "› " : "  "}${item.name}`;
+          return (
+            <Text
+              key={item.name}
+              color={sel ? t.primaryLight : t.primaryDim}
+              bold={sel}
+              wrap="truncate"
+            >
+              {fitDisplayText(line, safeWidth)}
+            </Text>
+          );
+        })}
+      </Box>
+    );
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 4);
+  const descBudget = Math.max(8, Math.floor(innerWidth * 0.36));
+  const hintBudget = Math.max(
+    0,
+    innerWidth - 4 - maxNameW - descBudget - 4,
+  );
+
   return (
-    <Box flexDirection="column" paddingX={1} marginBottom={1}>
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={t.primaryDim}
+      paddingX={1}
+      marginBottom={1}
+      width={safeWidth}
+      flexShrink={1}
+    >
+      <Box marginBottom={1}>
+        <Text color={t.primaryLight} bold>
+          DIRECTIVES
+        </Text>
+        <Text color={t.primaryDim}> ─ </Text>
+        <Text color={t.dim} wrap="truncate">
+          {fitDisplayText("tab/↑↓ select, enter execute", Math.max(1, innerWidth - 13))}
+        </Text>
+      </Box>
       {items.map((item, idx) => {
         const sel = idx === selectedIdx;
+        const hint = COMMAND_HINTS[item.name] ?? item.description;
+        const name = item.name.padEnd(maxNameW + 1);
+        const desc = fitDisplayText(item.description, descBudget);
+        const clippedHint =
+          hintBudget > 0 ? fitDisplayText(hint, hintBudget) : "";
+        const rowWidth =
+          2 +
+          displayWidth(name) +
+          1 +
+          displayWidth(desc) +
+          (clippedHint ? 2 + displayWidth(clippedHint) : 0);
         return (
-          <Box key={item.name}>
-            <Text color={sel ? t.primaryLight : t.primary} bold={sel}>
-              {sel ? "❯ " : "  "}
+          <Box key={item.name} width={Math.min(innerWidth, rowWidth)} flexShrink={1}>
+            <Text color={sel ? t.primaryLight : t.primaryDim} bold={sel}>
+              {sel ? "› " : "  "}
             </Text>
             <Text color={sel ? t.primaryLight : t.primary} bold={sel}>
-              {item.name.padEnd(maxNameW + 2)}
+              {name}
             </Text>
-            <Text color={t.dim}>{item.description}</Text>
+            <Text color={t.primaryDim}> </Text>
+            <Text color={sel ? t.text : t.dim} wrap="truncate">
+              {desc}
+            </Text>
+            {clippedHint ? (
+              <>
+                <Text color={t.primaryDim}>  </Text>
+                <Text color={sel ? t.primaryLight : t.primaryDim} wrap="truncate">
+                  {clippedHint}
+                </Text>
+              </>
+            ) : null}
           </Box>
         );
       })}
     </Box>
   );
 }
+
+export const CommandPalette = memo(CommandPaletteInner);

package/src/ui/DealDeskHeader.tsx

@@ -0,0 +1,219 @@
+import { Box, Text } from "ink";
+import { memo, useMemo } from "react";
+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;
+  maxWidth?: number;
+}
+
+const DEFAULT_WIDTH = 80;
+const MIN_WIDTH = 1;
+const FRAMED_MIN_WIDTH = 24;
+
+const STATUS_LABEL: Record<DealDeskHeaderStatus, string> = {
+  idle: "READY",
+  streaming: "LIVE",
+  error: "ERROR",
+};
+
+function visibleLength(input: string): number {
+  return Array.from(input).length;
+}
+
+function clampText(input: string, max: number): string {
+  if (max <= 0) return "";
+  if (visibleLength(input) <= max) return input;
+  if (max === 1) return "…";
+  return `${Array.from(input).slice(0, max - 1).join("")}…`;
+}
+
+function padToWidth(input: string, width: number): string {
+  const len = visibleLength(input);
+  if (len >= width) return input;
+  return `${input}${" ".repeat(width - len)}`;
+}
+
+function shellLine(left: string, right: string, width: number): string {
+  const available = Math.max(0, width - visibleLength(left) - visibleLength(right));
+  return `${left}${"─".repeat(available)}${right}`;
+}
+
+function bodyLine(content: string, width: number): string {
+  const innerWidth = Math.max(0, width - 4);
+  return `│ ${padToWidth(clampText(content, innerWidth), innerWidth)} │`;
+}
+
+function countLabel(messageCount: number, compact: boolean): string {
+  if (compact) return `${messageCount} msg${messageCount === 1 ? "" : "s"}`;
+  return `${messageCount} message${messageCount === 1 ? "" : "s"}`;
+}
+
+function latencyLabel(latencyMs: number | null | undefined): string | null {
+  if (typeof latencyMs !== "number") return null;
+  if (latencyMs < 1000) return `${Math.max(0, Math.round(latencyMs))}ms`;
+  return `${(latencyMs / 1000).toFixed(1)}s`;
+}
+
+function tinyLine({
+  model,
+  messageCount,
+  status,
+  width,
+}: {
+  model: string;
+  messageCount: number;
+  status: DealDeskHeaderStatus;
+  width: number;
+}): string {
+  return clampText(
+    `${STATUS_LABEL[status]} ${countLabel(messageCount, true)} ${model}`,
+    width,
+  );
+}
+
+function buildHeaderLines({
+  model,
+  mood,
+  messageCount,
+  themeName,
+  approximateTokens,
+  latencyMs,
+  fallbackModel,
+  status,
+  compact,
+  notice,
+  width,
+}: {
+  model: string;
+  mood: string;
+  messageCount: number;
+  themeName?: string;
+  approximateTokens?: number;
+  latencyMs?: number | null;
+  fallbackModel?: string | null;
+  status: DealDeskHeaderStatus;
+  compact: boolean;
+  notice?: string;
+  width: number;
+}): string[] {
+  const statusLabel = STATUS_LABEL[status];
+  const latency = latencyLabel(latencyMs);
+  const top = compact
+    ? shellLine("┌ Drexler ", "┐", width)
+    : shellLine("┌ Drexler Deal Desk ", "┐", width);
+
+  const summary = compact
+    ? `● ${statusLabel}  ${model}  ${countLabel(messageCount, true)}${
+        latency ? `  ${latency}` : ""
+      }`
+    : `● ${statusLabel}  │  ${countLabel(
+        messageCount,
+        false,
+      )}  │  ~${approximateTokens ?? 0} tok  │  ${latency ?? "no run yet"}`;
+  const detail = `model ${model}  │  mood ${mood}  │  theme ${
+    themeName ?? "apollo"
+  }${fallbackModel ? `  │  fallback ${fallbackModel}` : ""}`;
+  const lines = [top, bodyLine(summary, width)];
+
+  if (!compact) {
+    lines.push(bodyLine(detail, width));
+  }
+
+  if (!compact && notice && notice.trim().length > 0) {
+    lines.push(bodyLine(`notice ${notice.trim()}`, width));
+  }
+
+  lines.push(shellLine("└", "┘", width));
+  return lines;
+}
+
+function DealDeskHeaderInner({
+  model,
+  mood,
+  messageCount,
+  themeName,
+  approximateTokens,
+  latencyMs,
+  fallbackModel,
+  status = "idle",
+  compact = false,
+  notice,
+  maxWidth = DEFAULT_WIDTH,
+}: DealDeskHeaderProps) {
+  const t = useTheme();
+  const width = Math.max(MIN_WIDTH, Math.floor(maxWidth));
+  const statusColor: Record<DealDeskHeaderStatus, string> = useMemo(
+    () => ({
+      idle: t.primaryLight,
+      streaming: t.warning,
+      error: t.error,
+    }),
+    [t.error, t.primaryLight, t.warning],
+  );
+  const lines = useMemo(
+    () =>
+      buildHeaderLines({
+        model,
+        mood,
+        messageCount,
+        themeName,
+        approximateTokens,
+        latencyMs,
+        fallbackModel,
+        status,
+        compact,
+        notice,
+        width,
+      }),
+    [
+      approximateTokens,
+      compact,
+      fallbackModel,
+      latencyMs,
+      messageCount,
+      model,
+      mood,
+      notice,
+      status,
+      themeName,
+      width,
+    ],
+  );
+
+  if (width < FRAMED_MIN_WIDTH) {
+    return (
+      <Box width={width} marginBottom={1}>
+        <Text color={statusColor[status]} wrap="truncate">
+          {tinyLine({ model, messageCount, status, width })}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={width} marginBottom={1}>
+      <Text color={t.primaryDim}>{lines[0]}</Text>
+      <Text color={statusColor[status]}>{lines[1]}</Text>
+      {lines.slice(2, -1).map((line, index) => (
+        <Text key={index} color={index === 0 ? t.primaryLight : t.dim}>
+          {line}
+        </Text>
+      ))}
+      <Text color={t.primaryDim}>{lines[lines.length - 1]}</Text>
+    </Box>
+  );
+}
+
+export const DealDeskHeader = memo(DealDeskHeaderInner);

package/src/ui/InputBox.tsx

@@ -1,4 +1,6 @@
 import { Box, Text } from "ink";
+import { memo } from "react";
+import { clampCursor, displayWidth, splitGraphemes } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 interface Props {
@@ -8,32 +10,135 @@ interface Props {
   width: number;
 }
 
-export function InputBox({ value, cursor, disabled, width }: Props) {
+const PROMPT_WIDTH = 2;
+const BOX_CHROME_WIDTH = 4;
+const FRAMED_MIN_WIDTH = 8;
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.max(min, Math.min(n, max));
+}
+
+function fitWindow(
+  chars: string[],
+  cursor: number,
+  maxWidth: number,
+): { start: number; end: number; leftOverflow: boolean; rightOverflow: boolean } {
+  let markerReserve = 0;
+  let result = { start: cursor, end: cursor, leftOverflow: false, rightOverflow: false };
+
+  for (let pass = 0; pass < 3; pass++) {
+    const available = Math.max(1, maxWidth - markerReserve);
+    let start = cursor;
+    let end = cursor < chars.length ? cursor + 1 : cursor;
+    let used = cursor < chars.length ? displayWidth(chars[cursor] ?? "") : 1;
+
+    while (start > 0) {
+      const nextWidth = displayWidth(chars[start - 1] ?? "");
+      if (used + nextWidth > available) break;
+      start -= 1;
+      used += nextWidth;
+    }
+
+    while (end < chars.length) {
+      const nextWidth = displayWidth(chars[end] ?? "");
+      if (used + nextWidth > available) break;
+      end += 1;
+      used += nextWidth;
+    }
+
+    const leftOverflow = start > 0;
+    const rightOverflow = end < chars.length;
+    const nextReserve = (leftOverflow ? 1 : 0) + (rightOverflow ? 1 : 0);
+    result = { start, end, leftOverflow, rightOverflow };
+    if (nextReserve === markerReserve) break;
+    markerReserve = nextReserve;
+  }
+
+  return result;
+}
+
+function fitPlainText(chars: string[], cursor: number, maxWidth: number): string {
+  const available = Math.max(1, maxWidth);
+  const window = fitWindow(chars, cursor, available);
+  const visible = chars.slice(window.start, window.end);
+  const visibleCursor = clamp(cursor - window.start, 0, visible.length);
+  const parts = [
+    window.leftOverflow ? "…" : "",
+    ...visible.slice(0, visibleCursor),
+    visible[visibleCursor] && displayWidth(visible[visibleCursor]!) <= available
+      ? visible[visibleCursor]!
+      : " ",
+    ...visible.slice(visibleCursor + 1),
+    window.rightOverflow ? "…" : "",
+  ];
+  let out = "";
+  for (const part of parts) {
+    if (!part) continue;
+    if (displayWidth(out + part) > available) break;
+    out += part;
+  }
+  return out || " ";
+}
+
+function InputBoxInner({ value, cursor, disabled, width }: Props) {
   const t = useTheme();
-  // Grapheme-aware splitting so emoji / multi-byte chars don't render as
-  // broken surrogate pairs when the cursor lands mid-codepoint.
-  const chars = Array.from(value);
-  const safeCursor = Math.max(0, Math.min(cursor, chars.length));
-  const before = chars.slice(0, safeCursor).join("");
-  const at = chars[safeCursor] ?? " ";
-  const after = chars.slice(safeCursor + 1).join("");
+  const chars = splitGraphemes(value);
+  const safeCursor = clampCursor(value, cursor);
+  const boxWidth = Math.max(1, width);
+  const inputBudget = Math.max(1, boxWidth - BOX_CHROME_WIDTH - PROMPT_WIDTH);
+  const disabledText = "(Drexler thinking... ESC to cancel)";
+  const window = fitWindow(chars, safeCursor, inputBudget);
+  const visible = chars.slice(window.start, window.end);
+  const visibleCursor = clamp(safeCursor - window.start, 0, visible.length);
+  const before = visible.slice(0, visibleCursor).join("");
+  const at = visible[visibleCursor] ?? " ";
+  const after = visible.slice(visibleCursor + 1).join("");
+
+  if (boxWidth < FRAMED_MIN_WIDTH) {
+    const plainBudget = Math.max(1, boxWidth - PROMPT_WIDTH);
+    const plain = disabled
+      ? disabledText.slice(0, plainBudget)
+      : fitPlainText(chars, safeCursor, plainBudget);
+    return (
+      <Box width={boxWidth} flexShrink={1}>
+        <Text color={t.primaryLight} bold wrap="truncate">
+          ❯{" "}
+        </Text>
+        <Text color={disabled ? t.dim : t.text} wrap="truncate">
+          {plain}
+        </Text>
+      </Box>
+    );
+  }
 
   return (
-    <Box borderStyle="round" borderColor={t.primary} paddingX={1} width={width}>
+    <Box
+      borderStyle="round"
+      borderColor={disabled ? t.primaryDim : t.primary}
+      paddingX={1}
+      width={boxWidth}
+      flexShrink={1}
+    >
       <Text color={t.primaryLight} bold>
         ❯{" "}
       </Text>
       {disabled ? (
-        <Text color={t.dim}>(Drexler thinking… ESC to cancel)</Text>
+        <Text color={t.dim} wrap="truncate">
+          {disabledText}
+        </Text>
       ) : (
         <>
+          {window.leftOverflow ? <Text color={t.primaryDim}>…</Text> : null}
           <Text color={t.text}>{before}</Text>
           <Text inverse color={t.text}>
             {at}
           </Text>
           <Text color={t.text}>{after}</Text>
+          {window.rightOverflow ? <Text color={t.primaryDim}>…</Text> : null}
         </>
       )}
     </Box>
   );
 }
+
+export const InputBox = memo(InputBoxInner);

package/src/ui/Message.tsx

@@ -1,6 +1,7 @@
 import { Box, Text } from "ink";
 import { memo, useMemo } from "react";
 import { renderMarkdown } from "../renderer.ts";
+import { fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 interface MessageItem {
@@ -8,48 +9,91 @@ interface MessageItem {
   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}>
-      <Text color={t.primaryDim}>{"─".repeat(40)}</Text>
+    <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 assistantLines = useMemo(
+    () =>
+      role === "assistant"
+        ? renderMarkdown(content).trimEnd().split("\n")
+        : [],
+    [content, role],
+  );
+
   if (role === "user") {
     return (
       <>
-        <Box paddingX={1} marginBottom={1}>
-          <Text color={t.dim}>❯ </Text>
-          <Text color={t.text}>{content}</Text>
+        <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}>
-        <Text color={t.dim} italic>
-          {content}
-        </Text>
+      <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>
     );
   }
-  // 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 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>
@@ -62,17 +106,43 @@ export const Message = memo(MessageInner);
 
 interface StreamingProps {
   content: string;
+  width?: number;
 }
 
-function StreamingMessageInner({ content }: StreamingProps) {
+function StreamingMessageInner({ content, width = 80 }: StreamingProps) {
   const t = useTheme();
   const lines = useMemo(() => content.split("\n"), [content]);
+  const safeWidth = Math.max(1, Math.floor(width));
+  const contentWidth = Math.max(1, safeWidth - 3);
+
+  if (safeWidth < 18) {
+    const compactLine = fitDisplayText(content.replace(/\s+/g, " "), safeWidth);
+    return (
+      <Box width={safeWidth} flexShrink={1}>
+        <Text color={t.primaryLight} wrap="truncate">
+          {compactLine}
+        </Text>
+      </Box>
+    );
+  }
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" paddingX={1} width={safeWidth} flexShrink={1}>
+      <Box>
+        <Text color={t.primaryLight} bold>
+          {ROLE_LABELS.assistant}
+        </Text>
+        <Text color={t.primaryDim}> ─ </Text>
+        <Text color={t.dim}>drafting live</Text>
+      </Box>
       {lines.map((ln, i) => (
-        <Box key={i}>
-          <Text color={t.primary}>│ </Text>
-          <Text color={t.text}>{ln}</Text>
+        <Box key={i} paddingLeft={1}>
+          <Text color={i === lines.length - 1 ? t.primaryLight : t.primary}>
+            │{" "}
+          </Text>
+          <Text color={t.text} wrap="truncate">
+            {fitDisplayText(ln, contentWidth)}
+          </Text>
         </Box>
       ))}
     </Box>