pi-pretty-tui 0.2.9 → 0.3.1

package/extensions/nested-tools.ts

@@ -53,11 +53,24 @@ const compactArgs = (value: string): string => {
 export class NestedTools {
   private calls = new Map<string, NestedCall>();
   private incomplete = new Set<string>();
+  private renderCache = new Map<string, {
+    width: number; theme: any; palette: string; args: any; result: any;
+    expanded: boolean; partial: boolean; label: string; rootDetails: boolean;
+    projection: { lines: string[]; actions: Map<number, string> };
+  }>();
+  private countCache = new Map<string, number>();
+  private invalidateRender(rootId?: string) {
+    if (rootId) this.renderCache.delete(rootId);
+    else this.renderCache.clear();
+    this.countCache.clear();
+  }
+
   // Local overrides can close one disclosure even after global expansion.
   private expanded = new Map<string, boolean>();
-  clearExpansion() { this.expanded.clear(); }
+  clearExpansion() { this.expanded.clear(); this.invalidateRender(); }
   clear() { this.calls.clear(); this.incomplete.clear(); this.clearExpansion(); }
   toggle(key: string, globallyExpanded = false) {
+    this.invalidateRender(this.calls.has(key) ? this.root(key) : key.replace(/:(?:script|output)$/, ""));
     this.expanded.set(key, !(this.expanded.get(key) ?? globallyExpanded));
   }
   private isExpanded(key: string, globallyExpanded: boolean): boolean {
@@ -74,15 +87,21 @@ export class NestedTools {
     return [...this.calls.values()].filter((call) => call.parentId === parentId);
   }
   count(rootId: string): number {
-    return [...this.calls.values()].filter((call) => this.root(call.id) === rootId).length;
+    const cached = this.countCache.get(rootId);
+    if (cached !== undefined) return cached;
+    const count = [...this.calls.values()].filter((call) => this.root(call.id) === rootId).length;
+    this.countCache.set(rootId, count);
+    return count;
   }
   start(event: any) {
     if (!event.parentToolCallId || this.calls.has(event.toolCallId)) return;
     const rootId = this.root(event.parentToolCallId);
+    this.invalidateRender(rootId);
     if (this.count(rootId) >= NESTED_LIMITS.calls) { this.incomplete.add(rootId); return; }
     const args = argsText(event.args);
     const argsTruncated = args.length >= NESTED_LIMITS.args;
     if (argsTruncated) this.incomplete.add(rootId);
+    this.countCache.clear();
     this.calls.set(event.toolCallId, {
       id: event.toolCallId, parentId: event.parentToolCallId, name: bounded(String(event.toolName ?? "tool"), 256),
       args, argsTruncated, status: "running", startedAt: Date.now(),
@@ -91,6 +110,7 @@ export class NestedTools {
   update(event: any, finished = false) {
     const call = this.calls.get(event.toolCallId);
     if (!call) return;
+    this.invalidateRender(this.root(call.id));
     const text = resultText(finished ? event.result : event.partialResult);
     const rootId = this.root(call.id);
     const otherSize = [...this.calls.values()].filter((other) => other.id !== call.id && this.root(other.id) === rootId)
@@ -105,6 +125,7 @@ export class NestedTools {
     }
   }
   finish(rootId: string): boolean {
+    this.invalidateRender(rootId);
     let changed = false;
     for (const call of this.calls.values()) {
       if (this.root(call.id) === rootId && call.status === "running") {
@@ -124,6 +145,7 @@ export class NestedTools {
       records = records.calls;
     }
     if (!Array.isArray(records)) return;
+    this.invalidateRender(rootId);
     for (const record of records) {
       if (typeof record?.id !== "string" || typeof record?.name !== "string" || record.id.endsWith("/?")) continue;
       const existing = this.calls.get(record.id);
@@ -137,6 +159,7 @@ export class NestedTools {
       const slash = record.id.lastIndexOf("/");
       const candidate = record.id.slice(0, slash);
       const parentId = this.calls.has(candidate) ? candidate : rootId;
+      this.countCache.clear();
       this.calls.set(record.id, {
         id: record.id, parentId, name: bounded(record.name, 256),
         args: typeof record.args === "string" ? recordedArgs(record.args) : record.argumentsBytes !== undefined ? "[Arguments omitted by Pi]" : argsText(record.arguments),
@@ -172,6 +195,7 @@ export class NestedTools {
   }
   restore(data: any) {
     if (data?.version !== 1 || typeof data.rootId !== "string" || !Array.isArray(data.calls)) return;
+    this.invalidateRender(data.rootId);
     // Snapshot entries originate locally; still validate and bound every field.
     let budget = NESTED_LIMITS.total;
     for (const call of data.calls.slice(0, NESTED_LIMITS.calls)) {
@@ -186,13 +210,24 @@ export class NestedTools {
     }
     if (data.incomplete) this.incomplete.add(data.rootId);
   }
-  render(owner: any, width: number, theme: any): { lines: string[]; actions: Map<number, string> } {
+  render(owner: any, width: number, theme: any, options: { rootDetails?: boolean } = {}): { lines: string[]; actions: Map<number, string> } {
     const rootId = owner.toolCallId;
+    // Timer ticks and scrolling do not change tool content. Reuse wrapped
+    // detail rows and hit regions until data, layout, expansion or colors change.
+    const palette = ["dim", "muted", "text", "success", "error", "warning", "mdLink", "toolOutput"]
+      .map((role) => theme.fg(role, "x")).join("|") + theme.bold("x");
+    const expanded = Boolean(owner.expanded);
+    const partial = Boolean(owner.isPartial);
+    const rootDetails = options.rootDetails !== false;
+    const label = owner.toolDefinition?.label ?? owner.toolName;
+    const cached = this.renderCache.get(rootId);
+    if (cached && cached.width === width && cached.theme === theme && cached.palette === palette &&
+      cached.args === owner.args && cached.result === owner.result && cached.expanded === expanded &&
+      cached.partial === partial && cached.label === label && cached.rootDetails === rootDetails) return cached.projection;
     const actions = new Map<number, string>();
     const count = this.count(rootId);
     const failed = [...this.calls.values()].filter((call) => this.root(call.id) === rootId && call.status === "error").length;
     const color = owner.result?.isError ? "error" : owner.result && !owner.isPartial ? "success" : "dim";
-    const label = owner.toolDefinition?.label ?? owner.toolName;
     const lines = [theme.fg(color, "● ") + theme.fg("text", theme.bold(label)) +
       theme.fg("muted", `(${count} nested ${count === 1 ? "call" : "calls"}${failed ? ` · ${failed} failed` : ""})`)];
     const detail = (text: string, prefix: string, action?: string) => {
@@ -210,7 +245,13 @@ export class NestedTools {
       }
       if (safeText(text).length > NESTED_LIMITS.output) push(theme.fg("dim", prefix + "[Preview truncated]"));
     };
-    const items = this.children(rootId);
+    const childLists = new Map<string, NestedCall[]>();
+    for (const call of this.calls.values()) {
+      const siblings = childLists.get(call.parentId) ?? [];
+      siblings.push(call);
+      childLists.set(call.parentId, siblings);
+    }
+    const items = childLists.get(rootId) ?? [];
     const visit = (call: NestedCall, indent: string, last: boolean, depth: number) => {
       const prefix = indent + (last ? "└─ " : "├─ ");
       const continuation = indent + (last ? "   " : "│  ");
@@ -218,7 +259,7 @@ export class NestedTools {
       const callColor = call.status === "ok" ? "success" : call.status === "error" ? "error" : call.status === "running" ? "dim" : "muted";
       actions.set(lines.length, call.id);
       const duration = call.durationMs === undefined ? "" : ` · ${call.durationMs < 1000 ? `${Math.round(call.durationMs)}ms` : `${(call.durationMs / 1000).toFixed(1)}s`}`;
-      const descendants = this.children(call.id);
+      const descendants = childLists.get(call.id) ?? [];
       lines.push(theme.fg("dim", prefix) + theme.fg(callColor, icon + " ") + theme.fg("text", theme.bold(call.name)) + theme.fg("muted", `(${compactArgs(call.args)})${duration}`));
       const expanded = this.isExpanded(call.id, Boolean(owner.expanded));
       const first = call.output?.split("\n").find((line) => line.trim());
@@ -235,17 +276,22 @@ export class NestedTools {
       else if (descendants.length) detail("[Deeper calls omitted]", continuation);
     };
     const code = typeof owner.args?.code === "string" ? owner.args.code : undefined;
-    if (code) {
+    if (code && options.rootDetails !== false) {
       const key = `${rootId}:script`;
       actions.set(lines.length, key); lines.push(theme.fg("dim", "  ├─ ") + theme.fg("mdLink", "[Script]"));
       if (this.isExpanded(key, Boolean(owner.expanded))) detail(code, "  │  ", key);
     }
-    items.forEach((call) => visit(call, "  ", false, 0));
-    const key = `${rootId}:output`;
-    actions.set(lines.length, key);
-    lines.push(theme.fg("dim", "  └─ ") + theme.fg("mdLink", code ? "[Script output]" : "[Output]"));
-    if (this.isExpanded(key, Boolean(owner.expanded))) detail(resultText(owner.result) || (owner.isPartial || !owner.result ? "Running…" : "No text output"), "     ", key);
+    items.forEach((call, index) => visit(call, "  ", options.rootDetails === false && index === items.length - 1, 0));
+    if (options.rootDetails !== false) {
+      const key = `${rootId}:output`;
+      actions.set(lines.length, key);
+      lines.push(theme.fg("dim", "  └─ ") + theme.fg("mdLink", code ? "[Script output]" : "[Output]"));
+      if (this.isExpanded(key, Boolean(owner.expanded))) detail(resultText(owner.result) || (owner.isPartial || !owner.result ? "Running…" : "No text output"), "     ", key);
+    }
     if (this.incomplete.has(rootId)) lines.push(theme.fg("warning", "  [Nested call record is incomplete or truncated]"));
-    return { lines: lines.map((line) => truncateToWidth(line, Math.max(1, width), "…")), actions };
+    const projection = { lines: lines.map((line) => truncateToWidth(line, Math.max(1, width), "…")), actions };
+    this.renderCache.set(rootId, { width, theme, palette, args: owner.args, result: owner.result,
+      expanded, partial, label, rootDetails, projection });
+    return projection;
   }
 }

package/extensions/selection-ranges.ts

@@ -0,0 +1,245 @@
+import { randomBytes } from "node:crypto";
+import { ProcessTerminal, TuiAltScreen, sliceByColumn, stripTerminalSequences, visibleWidth } from "@earendil-works/pi-tui";
+
+type Span = [number, number];
+// Session-local APC annotations travel through opaque Container wrappers as
+// zero-width text. They are removed before any terminal write or clipboard use.
+const prefix = `\x1b_ppt-select-${randomBytes(6).toString("hex")}:`;
+const suffix = "\x1b\\";
+const marker = new RegExp(prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "([0-9,;]*)\x1b\\\\", "g");
+let enabled = false;
+export const selectionMetadataActive = () => enabled;
+export const removeSelectionMetadata = (text: string): string => text.includes(prefix) ? text.replace(marker, "") : text;
+const subtract = (spans: Span[], start: number, end: number): Span[] => spans.flatMap(([a, b]) => {
+  if (end <= a || start >= b) return [[a, b] as Span];
+  const rest: Span[] = [];
+  if (a < start) rest.push([a, start]);
+  if (end < b) rest.push([end, b]);
+  return rest;
+});
+
+type Annotation = { width: number; excluded: Span[] };
+const decoded = new Map<string, Annotation>();
+const encoded = new Map<string, string>();
+function annotation(payload: string): Annotation | undefined {
+  const cached = decoded.get(payload);
+  if (cached) return cached;
+  const fields = payload.split(";");
+  const width = Number(fields.shift());
+  if (!Number.isSafeInteger(width) || width < 0) return undefined;
+  const excluded: Span[] = [];
+  let cursor = 0;
+  for (const field of fields) {
+    if (!field) continue;
+    const values = field.split(",").map(Number);
+    if (values.length !== 2) return undefined;
+    const [a, b] = values;
+    if (!Number.isSafeInteger(a) || !Number.isSafeInteger(b) || a < cursor || b < a || b > width) return undefined;
+    if (cursor < a) excluded.push([cursor, a]);
+    cursor = b;
+  }
+  if (cursor < width) excluded.push([cursor, width]);
+  const result = { width, excluded };
+  if (decoded.size >= 1024) decoded.delete(decoded.keys().next().value!);
+  decoded.set(payload, result);
+  return result;
+}
+
+/** Mark only known plugin decoration. Inner annotations are composed, never
+ * inferred from glyphs, so actual box art and code strings remain untouched. */
+export function selectableRow(line: string, width: number, keep: Span[]): string {
+  if (!enabled || line.includes("\x1b_G") || line.includes("\x1b]1337;File=")) return line;
+  const payload = width + (keep.length ? ";" + keep.map(([a, b]) => a + "," + b).join(";") : "");
+  let tag = encoded.get(payload);
+  if (!tag) {
+    tag = prefix + payload + suffix;
+    if (encoded.size >= 1024) encoded.delete(encoded.keys().next().value!);
+    encoded.set(payload, tag);
+  }
+  return tag + line;
+}
+
+function scrollBox(root: any, owner: any): any {
+  if (!root) return undefined;
+  if (root.scrollView === owner) return root;
+  for (const child of root.children ?? []) {
+    const found = scrollBox(child, owner);
+    if (found) return found;
+  }
+}
+
+function viewportRows(root: any, first: number, last: number, offsetX = 0, offsetY = 0, offscreen = false): Map<number, Array<{ line: string; x: number; left: number; right: number }>> {
+  const result = new Map<number, Array<{ line: string; x: number; left: number; right: number }>>();
+  const visit = (box: any) => {
+    if (!box?.rect || !box.clip) return;
+    const vertical = offscreen ? box.rect : box.clip;
+    if (vertical.y + offsetY > last || vertical.y + vertical.height + offsetY <= first) return;
+    if (box.children?.length) { for (const child of box.children) visit(child); return; }
+    if (!box.lines) return;
+    const start = Math.max(first - offsetY, box.rect.y, vertical.y);
+    const end = Math.min(last + 1 - offsetY, box.rect.y + box.rect.height, vertical.y + vertical.height);
+    for (let row = start; row < end; row++) {
+      const line = box.lines[row - box.rect.y + (box.lineOffset ?? 0)];
+      if (line === undefined) continue;
+      const records = result.get(row + offsetY) ?? [];
+      records.push({ line, x: box.rect.x + offsetX, left: Math.max(box.rect.x, box.clip.x) + offsetX,
+        right: Math.min(box.rect.x + box.rect.width, box.clip.x + box.clip.width) + offsetX });
+      result.set(row + offsetY, records);
+    }
+  };
+  visit(root);
+  return result;
+}
+
+type Surface = { row: number; col: number; width: number; height: number; lines?: string[] };
+
+/** Capture rows during the native compositor's single render, not by rendering
+ * a component again at copy time. Restore the exact previous own descriptor. */
+function captureRender(target: any, name: string, receive: (rows: string[]) => void): () => void {
+  const method = target?.[name];
+  if (typeof method !== "function") return () => {};
+  const own = Object.getOwnPropertyDescriptor(target, name);
+  const capture = function (this: any, ...args: any[]) {
+    const result = method.apply(this, args);
+    if (Array.isArray(result)) receive(result);
+    return result;
+  };
+  Object.defineProperty(target, name, { configurable: true, writable: true, value: capture });
+  return () => {
+    if (target[name] !== capture) return;
+    if (own) Object.defineProperty(target, name, own);
+    else delete target[name];
+  };
+}
+
+function excludedColumns(line: string): Span[] {
+  if (!line.includes(prefix)) return [];
+  const excluded: Span[] = [];
+  for (const match of line.matchAll(marker)) {
+    const tag = annotation(match[1]);
+    if (!tag) continue;
+    // A start annotation survives native right-edge clipping. Prefixes are
+    // normally only outer annotations and padding, so this stays inexpensive.
+    const origin = visibleWidth(line.slice(0, match.index));
+    for (const [a, b] of tag.excluded) excluded.push([origin + a, origin + b]);
+  }
+  return excluded;
+}
+
+export function installSelectionCopy(): () => void {
+  const screen = TuiAltScreen.prototype as any;
+  const terminal = ProcessTerminal.prototype as any;
+  const key = Symbol.for("pretty-tui.selection-ranges");
+  if (screen[key]) return () => {};
+  const originalCopy = screen.getActiveSelectionText;
+  const originalWrite = terminal.write;
+  const originalOverlays = screen.compositeOverlays;
+  const originalFlashes = screen.compositeFlashes;
+  if (typeof originalCopy !== "function" || typeof originalWrite !== "function" ||
+    typeof originalOverlays !== "function" || typeof originalFlashes !== "function") return () => {};
+  const overlays = new WeakMap<object, Surface[]>();
+  const flashes = new WeakMap<object, Surface[]>();
+  const compositeOverlays = function (this: any, lines: string[], width: number, height: number) {
+    if (!this.overlayStack?.length) {
+      overlays.delete(this);
+      return originalOverlays.call(this, lines, width, height);
+    }
+    const captured: string[][] = [];
+    const restore = captureRender(this, "resolveFakeCursors", rows => captured.push(rows));
+    let result: string[];
+    try { result = originalOverlays.call(this, lines, width, height); }
+    finally { restore(); }
+    overlays.set(this, (this.renderedOverlayLayouts ?? []).map((box: Surface, i: number) => ({
+      row: box.row, col: box.col, width: box.width, height: box.height, lines: captured[i],
+    })));
+    return result;
+  };
+  const compositeFlashes = function (this: any, lines: string[], width: number, height: number) {
+    if (Array.isArray(this.flashes?.entries) && this.flashes.entries.length === 0) {
+      flashes.delete(this);
+      return originalFlashes.call(this, lines, width, height);
+    }
+    let captured: string[] = [];
+    const restore = captureRender(this.flashes, "render", rows => { captured = rows; });
+    let result: string[];
+    try { result = originalFlashes.call(this, lines, width, height); }
+    finally { restore(); }
+    flashes.set(this, captured.slice(-height).map((line, row) => ({
+      row, col: width - visibleWidth(line), width: visibleWidth(line), height: 1, lines: [line],
+    })));
+    return result;
+  };
+  const copy = function (this: any): string | undefined {
+    const selection = this.getSelectionBounds();
+    if (!selection) return undefined;
+    const inScroll = Boolean(selection.start.scrollView);
+    const scroll = inScroll ? scrollBox(this.currentLayout?.root, selection.start.scrollView) : undefined;
+    const lines: string[] | undefined = inScroll ? scroll?.scrollContentLines : this.previousScreen;
+    if (!lines) return originalCopy.call(this);
+    const viewport = inScroll
+      ? viewportRows(scroll?.children?.[0], selection.start.row, selection.end.row,
+        -scroll.rect.x, selection.start.scrollView.scrollTop - scroll.rect.y, true)
+      : viewportRows(this.currentLayout?.root, selection.start.row, selection.end.row);
+    const surfaces: Surface[] = [];
+    if (!inScroll) {
+      const jump = this.scrollToEndIndicatorRect;
+      if (jump) surfaces.push({ row: jump.row, col: jump.column, width: jump.width, height: 1 });
+      surfaces.push(...overlays.get(this) ?? [], ...flashes.get(this) ?? []);
+    }
+    const copied: string[] = [];
+    for (let row = selection.start.row; row <= selection.end.row; row++) {
+      const line = lines[row] ?? "";
+      const columns = this.getSelectionColumns(line, row, selection);
+      // Composited/sliced metadata may no longer describe the full fragment.
+      // Prefer current raw leaves whenever layout information is available.
+      let excluded = this.currentLayout ? [] as Span[] : excludedColumns(line);
+      let annotated = line.includes(prefix);
+      const paint = (source: string | undefined, x: number, left: number, right: number) => {
+        if (right <= left) return;
+        // A later surface replaces lower decoration, including when the later
+        // surface is ordinary text with no private annotation at all.
+        excluded = subtract(excluded, left, right);
+        if (!source?.includes(prefix)) return;
+        annotated = true;
+        for (const [a, b] of excludedColumns(source)) {
+          const start = Math.max(left, x + a), end = Math.min(right, x + b);
+          if (end > start) excluded.push([start, end]);
+        }
+      };
+      for (const record of viewport?.get(row) ?? []) paint(record.line, record.x, record.left, record.right);
+      for (const surface of surfaces) {
+        if (row < surface.row || row >= surface.row + surface.height) continue;
+        paint(surface.lines?.[row - surface.row], surface.col,
+          Math.max(0, surface.col), Math.min(visibleWidth(line), surface.col + surface.width));
+      }
+      let spans: Span[] = columns.end > columns.start ? [[columns.start, columns.end]] : [];
+      for (const [a, b] of excluded) spans = subtract(spans, a, b);
+      if (annotated && !spans.length) continue;
+      copied.push(spans.map(([a, b]) => stripTerminalSequences(sliceByColumn(line, a, Math.max(0, b - a), true))).join("").trimEnd());
+    }
+    const result = copied.join("\n");
+    return result.length ? result : undefined;
+  };
+  const write = function (this: any, data: string) { return originalWrite.call(this, removeSelectionMetadata(data)); };
+  const methods = [
+    [screen, "getActiveSelectionText", originalCopy, copy],
+    [screen, "compositeOverlays", originalOverlays, compositeOverlays],
+    [screen, "compositeFlashes", originalFlashes, compositeFlashes],
+    [terminal, "write", originalWrite, write],
+  ] as const;
+  const originalOwn = methods.map(([target, name]) => Object.getOwnPropertyDescriptor(target, name));
+  screen[key] = { methods };
+  for (const [target, name, , patched] of methods) target[name] = patched;
+  enabled = true;
+  return () => {
+    enabled = false;
+    decoded.clear();
+    encoded.clear();
+    methods.forEach(([target, name, , patched], i) => {
+      if (target[name] !== patched) return;
+      if (originalOwn[i]) Object.defineProperty(target, name, originalOwn[i]!);
+      else delete target[name];
+    });
+    if (screen[key]?.methods === methods) delete screen[key];
+  };
+}

package/extensions/shell-highlight.ts

@@ -0,0 +1,36 @@
+import { highlightCode } from "@earendil-works/pi-coding-agent";
+import { stripTerminalSequences } from "@earendil-works/pi-tui";
+
+/** Shell highlighting only changes ANSI styling, never the command text. */
+export function highlightShellCommand(command: string, theme: any, state: any): string {
+  const palette = ["syntaxComment", "syntaxKeyword", "syntaxFunction", "syntaxVariable", "syntaxString",
+    "syntaxNumber", "syntaxType", "syntaxOperator", "syntaxPunctuation"]
+    .map((role) => theme.fg(role, "x")).join("|");
+  const cached = state.prettyShellHighlight;
+  if (cached?.command === command && cached.palette === palette) return cached.text;
+  const highlighted = highlightCode(command, "bash").join("\n");
+  const text = stripTerminalSequences(highlighted) === command ? highlighted : command;
+  state.prettyShellHighlight = { command, palette, text };
+  return text;
+}
+
+/** Style Pi's native shell Text through its component contract, not instanceof:
+ * bundled/global/local Pi runtimes can carry distinct Text constructors. */
+export function highlightNativeShellCall(owner: any, theme: any): void {
+  if (owner.toolName !== "bash") return;
+  const command = owner.args?.command;
+  const component = owner.callRendererComponent;
+  if (typeof command !== "string" || !command || typeof component?.text !== "string" ||
+    typeof component?.setText !== "function") return;
+  const state = owner.rendererState ??= {};
+  const previous = state.prettyShellCall;
+  const original = previous?.component === component && previous.command === command &&
+    previous.styled === component.text ? previous.original : component.text;
+  const promptStart = original.indexOf("$ " + command);
+  if (promptStart < 0) return;
+  const start = promptStart + 2;
+  const highlighted = highlightShellCommand(command, theme, state);
+  const text = original.slice(0, start) + highlighted + original.slice(start + command.length);
+  state.prettyShellCall = { component, command, original, styled: text };
+  if (text !== component.text) component.setText(text);
+}

package/extensions/thought-presentation.ts

@@ -0,0 +1,38 @@
+import { Markdown, truncateToWidth } from "@earendil-works/pi-tui";
+
+/** Thought content is independent of activity grouping and mode defaults. */
+export class ThoughtPresentation {
+  private cache = new WeakMap<object, {
+    text: string; theme: any; palette: string; markdownTheme: any; component: Markdown;
+    width?: number; lines?: string[];
+  }>();
+
+  header(label: string, width: number, theme: any): string {
+    return truncateToWidth(
+      theme.fg("mdLink", "● ") + theme.fg("text", theme.bold(label)),
+      Math.max(1, width), "…",
+    );
+  }
+
+  details(owner: any, text: string, theme: any, contentWidth: number): string[] {
+    const palette = ["dim", "muted", "mdHeading", "mdCode", "mdCodeBlock", "mdLink"]
+      .map((role) => theme.fg(role, "x")).join("|");
+    let detail = this.cache.get(owner);
+    if (!detail || detail.text !== text || detail.theme !== theme || detail.palette !== palette || detail.markdownTheme !== owner.markdownTheme) {
+      detail = {
+        text, theme, palette, markdownTheme: owner.markdownTheme,
+        component: new Markdown(text, 0, 0, owner.markdownTheme, {
+          color: (line: string) => theme.fg("muted", line), italic: true,
+        }),
+      };
+      this.cache.set(owner, detail);
+    }
+    if (detail.width === contentWidth && detail.lines) return detail.lines;
+    const lines = detail.component.render(Math.max(1, contentWidth));
+    detail.width = contentWidth;
+    detail.lines = lines.map((line, index) =>
+      theme.fg("dim", index === lines.length - 1 ? "  └ " : "  │ ") + line,
+    );
+    return detail.lines;
+  }
+}