drexler 0.2.14 → 0.2.15

package/src/ui/TranscriptViewport.tsx

@@ -27,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",
@@ -202,8 +218,15 @@ function displayContentForItem(item: TranscriptViewportItem): string {
 }
 
 function displayLinesForItem(item: TranscriptViewportItem): AssistantDisplayLine[] {
-  if (item.role === "assistant") return assistantDisplayLines(item.content);
-  return item.content.split("\n").map((text) => ({ kind: "text", text }));
+  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(
@@ -291,6 +314,14 @@ function tokenizeCodeLine(line: string): CodeToken[] {
   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(
   item: TranscriptViewportItem,
   compact: boolean,
@@ -326,10 +357,14 @@ 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];
@@ -362,7 +397,7 @@ function DefaultTranscriptItem({
       );
     });
 
-  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));
@@ -386,7 +421,47 @@ function DefaultTranscriptItem({
   const footerWidth = Math.max(0, cols - 2);
   const bodyPrefix = bodyPrefixForRole(item.role);
   const contentWidth = transcriptContentWidth(item.role, cols);
-  const displayLines = wrappedTranscriptLines(item, contentWidth);
+  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}>
@@ -460,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),
   }));
 }
@@ -474,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}>
@@ -566,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],
   );
@@ -577,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}
         />

package/src/ui/displayContent.ts

@@ -76,15 +76,17 @@ export function normalizeAssistantMarkdownRenderContent(content: string): string
   const output: string[] = [];
   let fenceChar = "";
   let fenceLength = 0;
+  let fenceMarker = "";
   let markdownFence = false;
 
   for (const rawLine of lines) {
     const line = rawLine.replace(/\t/gu, TAB_DISPLAY);
     if (fenceChar.length > 0) {
       if (isFenceClose(line, fenceChar, fenceLength)) {
-        if (!markdownFence) output.push("```");
+        if (!markdownFence) output.push(fenceMarker);
         fenceChar = "";
         fenceLength = 0;
+        fenceMarker = "";
         markdownFence = false;
       } else {
         output.push(line);
@@ -98,8 +100,9 @@ export function normalizeAssistantMarkdownRenderContent(content: string): string
       const info = openingFence[2] ?? "";
       fenceChar = marker[0]!;
       fenceLength = marker.length;
+      fenceMarker = marker;
       markdownFence = isMarkdownFence(info);
-      if (!markdownFence) output.push("```");
+      if (!markdownFence) output.push(marker);
       continue;
     }