drexler 0.2.13 → 0.2.15

package/src/ui/TranscriptViewport.tsx

@@ -1,5 +1,11 @@
 import { Box, Text } from "ink";
 import { Children, memo, useMemo, type ReactNode } from "react";
+import {
+  assistantDisplayLines,
+  firstDisplayLine,
+  normalizeAssistantDisplayContent,
+  type AssistantDisplayLine,
+} from "./displayContent.ts";
 import { displayWidth, fitDisplayText, splitGraphemes } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
@@ -21,13 +27,29 @@ export interface TranscriptViewportProps {
 
 interface TranscriptEntry {
   key: string;
-  node: ReactNode;
+  node:
+    | ReactNode
+    | ((clipTo?: { readonly start: number; readonly rows: number }) => ReactNode);
   estimatedRows: number;
 }
 
+interface VisibleEntry {
+  entry: TranscriptEntry;
+  clipStart?: number;
+  clipRows?: number;
+}
+
 const DEFAULT_MAX_ROWS = 18;
 const DEFAULT_COLS = 80;
 const MIN_COLS = 1;
+const HEADER_FOOTER_ROWS = 2;
+const TRUNCATION_HINT_ROWS = 1;
+const MIN_TRUNCATED_BODY_ROWS = 1;
+
+function truncationHint(dropped: number, direction: "earlier" | "newer"): string {
+  const keyHint = direction === "earlier" ? "PageUp scrollback" : "PageDown newer";
+  return `... ${dropped} line${dropped === 1 ? "" : "s"} ${direction} — ${keyHint} to read`;
+}
 
 const ROLE_LABELS: Record<TranscriptViewportItem["role"], string> = {
   user: "YOU",
@@ -41,6 +63,105 @@ const ROLE_MARKERS: Record<TranscriptViewportItem["role"], string> = {
   system: "!",
 };
 
+const BODY_SUFFIX = " │";
+const CONTINUATION_PREFIX = "│   ";
+const CODE_GUTTER = "┃ ";
+const DRACULA_CODE = {
+  text: "#f8f8f2",
+  keyword: "#ff79c6",
+  function: "#50fa7b",
+  string: "#f1fa8c",
+  number: "#bd93f9",
+  comment: "#6272a4",
+  operator: "#8be9fd",
+  gutter: "#6272a4",
+};
+
+interface WrappedTranscriptLine {
+  kind: AssistantDisplayLine["kind"];
+  text: string;
+  language?: string;
+}
+
+interface CodeToken {
+  kind:
+    | "plain"
+    | "keyword"
+    | "function"
+    | "string"
+    | "number"
+    | "comment"
+    | "operator";
+  text: string;
+}
+
+const CODE_KEYWORDS = new Set([
+  "and",
+  "as",
+  "async",
+  "await",
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "def",
+  "default",
+  "do",
+  "elif",
+  "else",
+  "except",
+  "export",
+  "extends",
+  "false",
+  "finally",
+  "for",
+  "from",
+  "function",
+  "if",
+  "import",
+  "in",
+  "interface",
+  "let",
+  "new",
+  "none",
+  "not",
+  "null",
+  "or",
+  "pass",
+  "return",
+  "switch",
+  "throw",
+  "true",
+  "try",
+  "type",
+  "var",
+  "while",
+  "with",
+  "yield",
+]);
+
+const CODE_OPERATOR_RE = /^[()[\]{}.,:;+\-*/%=<>!&|^~?]+/u;
+const CODE_NUMBER_RE = /^\b(?:0x[\da-f]+|\d+(?:\.\d+)?)\b/iu;
+const CODE_IDENTIFIER_RE = /^[A-Za-z_$][\w$]*/u;
+
+function bodyPrefixForRole(role: TranscriptViewportItem["role"]): string {
+  if (role === "user") return "│ › ";
+  if (role === "assistant") return "│ ◆ ";
+  return CONTINUATION_PREFIX;
+}
+
+function transcriptContentWidth(
+  role: TranscriptViewportItem["role"],
+  cols: number,
+): number {
+  return Math.max(
+    1,
+    cols - displayWidth(bodyPrefixForRole(role)) - displayWidth(BODY_SUFFIX),
+  );
+}
+
 function wrapDisplayLine(input: string, maxWidth: number): string[] {
   const width = Math.max(1, maxWidth);
   if (input.length === 0) return [""];
@@ -91,10 +212,114 @@ function wrapDisplayLine(input: string, maxWidth: number): string[] {
   return rows.filter((row, index) => row.length > 0 || index === 0);
 }
 
-function wrappedContentRows(content: string, width: number): string[] {
-  return content
-    .split("\n")
-    .flatMap((line) => wrapDisplayLine(line, width));
+function displayContentForItem(item: TranscriptViewportItem): string {
+  if (item.role !== "assistant") return item.content;
+  return normalizeAssistantDisplayContent(item.content);
+}
+
+function displayLinesForItem(item: TranscriptViewportItem): AssistantDisplayLine[] {
+  const lines =
+    item.role === "assistant"
+      ? assistantDisplayLines(item.content)
+      : item.content.split("\n").map((text) => ({ kind: "text" as const, text }));
+  let start = 0;
+  let end = lines.length;
+  while (start < end && lines[start]?.text.trim().length === 0) start += 1;
+  while (end > start && lines[end - 1]?.text.trim().length === 0) end -= 1;
+  return lines.slice(start, end);
+}
+
+function wrappedTranscriptLines(
+  item: TranscriptViewportItem,
+  contentWidth: number,
+): WrappedTranscriptLine[] {
+  return displayLinesForItem(item).flatMap((line) => {
+    const width =
+      line.kind === "code"
+        ? Math.max(1, contentWidth - displayWidth(CODE_GUTTER))
+        : contentWidth;
+    return wrapDisplayLine(line.text, width).map((text) => ({
+      kind: line.kind,
+      text,
+      language: line.language,
+    }));
+  });
+}
+
+function tokenizeCodeLine(line: string): CodeToken[] {
+  const tokens: CodeToken[] = [];
+  let rest = line;
+
+  while (rest.length > 0) {
+    const comment =
+      rest.startsWith("#") || rest.startsWith("//") ? rest : undefined;
+    if (comment !== undefined) {
+      tokens.push({ kind: "comment", text: comment });
+      break;
+    }
+
+    const stringQuote = rest[0];
+    if (stringQuote === "\"" || stringQuote === "'" || stringQuote === "`") {
+      let end = 1;
+      let escaped = false;
+      while (end < rest.length) {
+        const char = rest[end];
+        if (escaped) {
+          escaped = false;
+        } else if (char === "\\") {
+          escaped = true;
+        } else if (char === stringQuote) {
+          end += 1;
+          break;
+        }
+        end += 1;
+      }
+      tokens.push({ kind: "string", text: rest.slice(0, end) });
+      rest = rest.slice(end);
+      continue;
+    }
+
+    const number = CODE_NUMBER_RE.exec(rest)?.[0];
+    if (number) {
+      tokens.push({ kind: "number", text: number });
+      rest = rest.slice(number.length);
+      continue;
+    }
+
+    const identifier = CODE_IDENTIFIER_RE.exec(rest)?.[0];
+    if (identifier) {
+      const after = rest.slice(identifier.length);
+      const kind =
+        CODE_KEYWORDS.has(identifier.toLowerCase())
+          ? "keyword"
+          : /^\s*\(/u.test(after)
+            ? "function"
+            : "plain";
+      tokens.push({ kind, text: identifier });
+      rest = rest.slice(identifier.length);
+      continue;
+    }
+
+    const operator = CODE_OPERATOR_RE.exec(rest)?.[0];
+    if (operator) {
+      tokens.push({ kind: "operator", text: operator });
+      rest = rest.slice(operator.length);
+      continue;
+    }
+
+    tokens.push({ kind: "plain", text: rest[0]! });
+    rest = rest.slice(1);
+  }
+
+  return tokens;
+}
+
+export function estimateTranscriptRows(
+  items: readonly TranscriptViewportItem[],
+  compact: boolean,
+  cols: number,
+): number {
+  return items.reduce((sum, item) => sum + itemRows(item, compact, cols), 0);
 }
 
 function itemRows(
@@ -103,13 +328,8 @@ function itemRows(
   cols: number,
 ): number {
   if (compact) return 1;
-  const bodyPrefix = "│ › ";
-  const bodySuffix = " │";
-  const contentWidth = Math.max(
-    1,
-    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
-  );
-  return 2 + wrappedContentRows(item.content, contentWidth).length;
+  const contentWidth = transcriptContentWidth(item.role, cols);
+  return 2 + wrappedTranscriptLines(item, contentWidth).length;
 }
 
 function roleAccentColor(
@@ -137,20 +357,51 @@ function DefaultTranscriptItem({
   item,
   compact,
   cols,
+  clipStart = 0,
+  maxRows,
 }: {
   item: TranscriptViewportItem;
   compact: boolean;
   cols: number;
+  clipStart?: number;
+  maxRows?: number;
 }) {
   const t = useTheme();
   const label = ROLE_LABELS[item.role];
   const accent = roleAccentColor(item.role, t);
+  const renderCodeLine = (line: string) =>
+    tokenizeCodeLine(line).map((token, tokenIndex) => {
+      const color =
+        token.kind === "keyword"
+          ? DRACULA_CODE.keyword
+          : token.kind === "function"
+            ? DRACULA_CODE.function
+            : token.kind === "string"
+              ? DRACULA_CODE.string
+              : token.kind === "number" || token.kind === "operator"
+                ? token.kind === "number"
+                  ? DRACULA_CODE.number
+                  : DRACULA_CODE.operator
+                : token.kind === "comment"
+                  ? DRACULA_CODE.comment
+                  : DRACULA_CODE.text;
+      return (
+        <Text
+          key={tokenIndex}
+          color={color}
+          bold={token.kind === "keyword" || token.kind === "function"}
+          italic={token.kind === "comment"}
+        >
+          {token.text}
+        </Text>
+      );
+    });
 
-  if (compact) {
+  if (compact || (maxRows !== undefined && maxRows < HEADER_FOOTER_ROWS + 1)) {
     const marker = item.role === "assistant" ? "◆" : ROLE_MARKERS[item.role];
     const prefix = `${label} ${marker} `;
     const budget = Math.max(1, cols - displayWidth(prefix));
-    const firstLine = item.content.split("\n")[0] ?? "";
+    const firstLine = firstDisplayLine(displayContentForItem(item));
     return (
       <Box width={cols} flexShrink={1}>
         <Text color={accent} bold>
@@ -168,13 +419,49 @@ function DefaultTranscriptItem({
   const headerPrefix = `╭─ ${label} `;
   const headerRuleWidth = Math.max(0, cols - displayWidth(headerPrefix) - 1);
   const footerWidth = Math.max(0, cols - 2);
-  const bodyPrefix = item.role === "user" ? "│ › " : "│   ";
-  const continuationPrefix = "│   ";
-  const bodySuffix = " │";
-  const contentWidth = Math.max(
-    1,
-    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
-  );
+  const bodyPrefix = bodyPrefixForRole(item.role);
+  const contentWidth = transcriptContentWidth(item.role, cols);
+  const allDisplayLines = wrappedTranscriptLines(item, contentWidth);
+  let displayLines: WrappedTranscriptLine[] = allDisplayLines;
+  if (maxRows !== undefined) {
+    const bodyBudget = Math.max(
+      MIN_TRUNCATED_BODY_ROWS,
+      maxRows - HEADER_FOOTER_ROWS,
+    );
+    const bodyStart = Math.max(0, Math.min(allDisplayLines.length, clipStart - 1));
+    const before = bodyStart;
+    const afterAvailable = Math.max(0, allDisplayLines.length - bodyStart);
+    const needsTopHint = before > 0;
+    const needsBottomHint = afterAvailable > bodyBudget;
+    const hintRows =
+      (needsTopHint ? TRUNCATION_HINT_ROWS : 0) +
+      (needsBottomHint ? TRUNCATION_HINT_ROWS : 0);
+    const keep = Math.max(0, bodyBudget - hintRows);
+    const bodyEnd = Math.min(allDisplayLines.length, bodyStart + keep);
+    if (needsTopHint || bodyEnd < allDisplayLines.length) {
+      const droppedBefore = before;
+      const droppedAfter = allDisplayLines.length - bodyEnd;
+      displayLines = [
+        ...(droppedBefore > 0
+          ? [
+              {
+                kind: "text" as const,
+                text: truncationHint(droppedBefore, "earlier"),
+              },
+            ]
+          : []),
+        ...allDisplayLines.slice(bodyStart, bodyEnd),
+        ...(droppedAfter > 0
+          ? [
+              {
+                kind: "text" as const,
+                text: truncationHint(droppedAfter, "newer"),
+              },
+            ]
+          : []),
+      ];
+    }
+  }
 
   return (
     <Box flexDirection="column" width={cols} flexShrink={1}>
@@ -184,18 +471,39 @@ function DefaultTranscriptItem({
           cols,
         )}
       </Text>
-      {wrappedContentRows(item.content, contentWidth).map((line, index) => (
+      {displayLines.map((line, index) => (
         <Box key={index} width={cols} flexShrink={1}>
           <Text color={accent} bold={item.role === "user"}>
-            {index === 0 ? bodyPrefix : continuationPrefix}
+            {index === 0 ? bodyPrefix : CONTINUATION_PREFIX}
           </Text>
-          <Text color={roleBodyColor(item.role, t)}>
-            {fitDisplayText(line, contentWidth)}
+          {line.kind === "code" ? (
+            <Text color={DRACULA_CODE.gutter}>{CODE_GUTTER}</Text>
+          ) : null}
+          <Text
+            color={
+              line.kind === "code"
+                ? DRACULA_CODE.text
+                : roleBodyColor(item.role, t)
+            }
+          >
+            {line.kind === "code"
+              ? renderCodeLine(
+                  fitDisplayText(
+                    line.text,
+                    Math.max(1, contentWidth - displayWidth(CODE_GUTTER)),
+                  ),
+                )
+              : fitDisplayText(line.text, contentWidth)}
           </Text>
           <Text color={accent} bold={item.role === "user"}>
             {`${" ".repeat(
-              Math.max(0, contentWidth - displayWidth(line)),
-            )}${bodySuffix}`}
+              Math.max(
+                0,
+                contentWidth -
+                  displayWidth(line.text) -
+                  (line.kind === "code" ? displayWidth(CODE_GUTTER) : 0),
+              ),
+            )}${BODY_SUFFIX}`}
           </Text>
         </Box>
       ))}
@@ -227,11 +535,17 @@ function itemsToEntries({
 }): TranscriptEntry[] {
   return items.map((item, index) => ({
     key: String(item.id ?? index),
-    node: renderItem ? (
-      renderItem(item, index)
-    ) : (
-      <DefaultTranscriptItem item={item} compact={compact} cols={cols} />
-    ),
+    node: renderItem
+      ? renderItem(item, index)
+      : (clipTo?: { readonly start: number; readonly rows: number }) => (
+          <DefaultTranscriptItem
+            item={item}
+            compact={compact}
+            cols={cols}
+            clipStart={clipTo?.start}
+            maxRows={clipTo?.rows}
+          />
+        ),
     estimatedRows: itemRows(item, compact, cols),
   }));
 }
@@ -241,71 +555,134 @@ function selectWindow(
   maxRows: number,
   scrollOffset: number,
 ): {
-  visible: TranscriptEntry[];
+  visible: VisibleEntry[];
   hiddenBefore: number;
   hiddenAfter: number;
+  hiddenRowsBefore: number;
+  hiddenRowsAfter: number;
 } {
   if (entries.length === 0) {
-    return { visible: [], hiddenBefore: 0, hiddenAfter: 0 };
+    return {
+      visible: [],
+      hiddenBefore: 0,
+      hiddenAfter: 0,
+      hiddenRowsBefore: 0,
+      hiddenRowsAfter: 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);
+  const rowCounts = entries.map((entry) => Math.max(1, entry.estimatedRows));
+  const totalRows = rowCounts.reduce((sum, rows) => sum + rows, 0);
+  const maxOffset = Math.max(0, totalRows - 1);
+  const safeOffset = Math.max(0, Math.min(Math.floor(scrollOffset), maxOffset));
+  const endRow = Math.max(1, totalRows - safeOffset);
+  let indicatorRows = 0;
+  let startRow = Math.max(0, endRow - safeRows);
 
   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 hiddenBeforeRows = startRow;
+    const hiddenAfterRows = Math.max(0, totalRows - endRow);
+    const nextIndicatorRows = Math.min(
+      safeRows - 1,
+      (hiddenBeforeRows > 0 ? 1 : 0) + (hiddenAfterRows > 0 ? 1 : 0),
+    );
+    if (nextIndicatorRows === indicatorRows) break;
+    indicatorRows = nextIndicatorRows;
+    startRow = Math.max(0, endRow - Math.max(1, safeRows - indicatorRows));
+  }
 
-    const nextReserveTop = start > 0 ? 1 : 0;
-    if (nextReserveTop === reserveTop) break;
-    reserveTop = nextReserveTop;
+  const buildVisible = (fromRow: number, toRow: number): VisibleEntry[] => {
+    const next: VisibleEntry[] = [];
+    let rowCursor = 0;
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i]!;
+      const rows = rowCounts[i]!;
+      const entryStart = rowCursor;
+      const entryEnd = rowCursor + rows;
+      rowCursor = entryEnd;
+      const overlapStart = Math.max(fromRow, entryStart);
+      const overlapEnd = Math.min(toRow, entryEnd);
+      if (overlapStart >= overlapEnd) continue;
+      next.push({
+        entry,
+        clipStart: overlapStart - entryStart,
+        clipRows: overlapEnd - overlapStart,
+      });
+    }
+    return next;
+  };
+
+  let visible = buildVisible(startRow, endRow);
+  if (
+    indicatorRows > 0 &&
+    visible.some(
+      ({ entry, clipRows }) =>
+        entry.estimatedRows >= HEADER_FOOTER_ROWS + MIN_TRUNCATED_BODY_ROWS &&
+        (clipRows ?? entry.estimatedRows) <
+          HEADER_FOOTER_ROWS + MIN_TRUNCATED_BODY_ROWS,
+    )
+  ) {
+    indicatorRows = 0;
+    startRow = Math.max(0, endRow - safeRows);
+    visible = buildVisible(startRow, endRow);
   }
 
-  const visible = entries.slice(start, end);
-  const visibleRows = visible.reduce(
-    (sum, entry) => sum + Math.max(1, entry.estimatedRows),
-    0,
-  );
-  let hiddenBefore = start;
-  let hiddenAfter = entries.length - end;
-  if (visibleRows + (hiddenBefore > 0 ? 1 : 0) + (hiddenAfter > 0 ? 1 : 0) > safeRows) {
-    if (hiddenBefore > 0) hiddenBefore = 0;
-    if (visibleRows + (hiddenAfter > 0 ? 1 : 0) > safeRows) hiddenAfter = 0;
+  let hiddenBefore = 0;
+  let hiddenAfter = 0;
+  let cursor = 0;
+  for (let i = 0; i < entries.length; i++) {
+    const rows = rowCounts[i]!;
+    const entryStart = cursor;
+    const entryEnd = cursor + rows;
+    cursor = entryEnd;
+    if (entryEnd <= startRow) hiddenBefore += 1;
+    else if (entryStart < startRow && entryEnd > startRow) hiddenBefore += 1;
+    if (entryStart >= endRow) hiddenAfter += 1;
+    else if (entryStart < endRow && entryEnd > endRow) hiddenAfter += 1;
+  }
+  let hiddenRowsBefore = startRow;
+  let hiddenRowsAfter = Math.max(0, totalRows - endRow);
+  const showTopIndicator = indicatorRows > 0 && hiddenRowsBefore > 0;
+  const showBottomIndicator =
+    indicatorRows > (showTopIndicator ? 1 : 0) && hiddenRowsAfter > 0;
+  if (!showTopIndicator) {
+    hiddenBefore = 0;
+    hiddenRowsBefore = 0;
+  }
+  if (!showBottomIndicator) {
+    hiddenAfter = 0;
+    hiddenRowsAfter = 0;
   }
 
-  return { visible, hiddenBefore, hiddenAfter };
+  return {
+    visible,
+    hiddenBefore,
+    hiddenAfter,
+    hiddenRowsBefore,
+    hiddenRowsAfter,
+  };
 }
 
 function ScrollIndicator({
   direction,
   count,
+  rows,
   compact,
   cols,
 }: {
   direction: "earlier" | "newer";
   count: number;
+  rows: number;
   compact: boolean;
   cols: number;
 }) {
   const t = useTheme();
   const arrow = direction === "earlier" ? "↑" : "↓";
+  const keyHint = direction === "earlier" ? "PageUp scrollback" : "PageDown newer";
   const label = compact
-    ? `${arrow} ${count} ${direction}`
-    : `${arrow} ${count} ${direction} transcript item${count === 1 ? "" : "s"} hidden`;
+    ? `${arrow} ${rows} ${direction}`
+    : `${arrow} ${rows} line${rows === 1 ? "" : "s"} ${direction} (${count} item${count === 1 ? "" : "s"} hidden) — ${keyHint}`;
 
   return (
     <Box width={cols} flexShrink={1}>
@@ -333,7 +710,13 @@ function TranscriptViewportInner({
         : childrenToEntries(children),
     [children, compact, items, renderItem, width],
   );
-  const { visible, hiddenBefore, hiddenAfter } = useMemo(
+  const {
+    visible,
+    hiddenBefore,
+    hiddenAfter,
+    hiddenRowsBefore,
+    hiddenRowsAfter,
+  } = useMemo(
     () => selectWindow(entries, maxRows, scrollOffset),
     [entries, maxRows, scrollOffset],
   );
@@ -344,19 +727,27 @@ function TranscriptViewportInner({
         <ScrollIndicator
           direction="earlier"
           count={hiddenBefore}
+          rows={hiddenRowsBefore}
           compact={compact}
           cols={width}
         />
       ) : null}
-      {visible.map((entry) => (
+      {visible.map(({ entry, clipStart, clipRows }) => (
         <Box key={entry.key} flexDirection="column" width={width} flexShrink={1}>
-          {entry.node}
+          {typeof entry.node === "function"
+            ? entry.node(
+                clipRows === undefined
+                  ? undefined
+                  : { start: clipStart ?? 0, rows: clipRows },
+              )
+            : entry.node}
         </Box>
       ))}
       {hiddenAfter > 0 ? (
         <ScrollIndicator
           direction="newer"
           count={hiddenAfter}
+          rows={hiddenRowsAfter}
           compact={compact}
           cols={width}
         />