pi-input-history 1.0.1 → 1.1.0

package/README.md

@@ -33,17 +33,20 @@ On session start, your last 100 prompts across all sessions are loaded into the
 
 1. Press the search shortcut (default **Ctrl+R**) to open the search overlay.
 2. Type to fuzzy-filter history (subsequence matching, space-separated multi-token).
-3. Matched characters are highlighted with your theme's accent color.
-4. Navigate and accept:
+3. Matched characters are highlighted with your theme's accent color, using **minimal-span** matching so the highlight stays on the closest contiguous group (e.g. `in` highlights `in` in `input`, not `pi`'s `i` + `input`'s `n`).
+4. The preview viewport shows the matched record; long lines are **soft-wrapped** (never truncated) and the viewport grows with content up to your terminal's height, then scrolls.
+5. The first matched line is marked with `▸`; the viewport is separated from the input line by a dim divider.
+6. Navigate and accept:
 
 | Key | Action |
 | --- | --- |
 | search shortcut / `↑` | Cycle to older match |
 | newer shortcut / `↓` | Cycle to newer match |
+| `ctrl+k` / `ctrl+j` | Scroll the preview viewport (when it exceeds the terminal height) |
 | `Enter` | Accept match into editor |
 | `Esc` / `Ctrl+G` | Cancel |
 
-Defaults: search = `ctrl+r`, newer = `ctrl+s`.
+Defaults: search = `ctrl+r`, newer = `ctrl+s`, scroll up = `ctrl+k`, scroll down = `ctrl+j`.
 
 ## Configuration
 
@@ -52,7 +55,9 @@ Optional config at `~/.pi/agent/pi-input-history.json`:
 ```json
 {
   "searchShortcut": "ctrl+r",
-  "newerShortcut": "ctrl+s"
+  "newerShortcut": "ctrl+s",
+  "scrollUpShortcut": "ctrl+k",
+  "scrollDownShortcut": "ctrl+j"
 }
 ```
 
@@ -60,6 +65,8 @@ Optional config at `~/.pi/agent/pi-input-history.json`:
 | --- | --- | --- |
 | `searchShortcut` | `ctrl+r` | Open reverse search; press again in the overlay to cycle older |
 | `newerShortcut` | `ctrl+s` | In the overlay, cycle to a newer match |
+| `scrollUpShortcut` | `ctrl+k` | In the overlay, scroll the preview viewport up |
+| `scrollDownShortcut` | `ctrl+j` | In the overlay, scroll the preview viewport down |
 
 Omit the file or any field to keep the default. After editing, run `/reload` in pi.
 
@@ -81,7 +88,11 @@ Or change `searchShortcut` in `pi-input-history.json` to another chord.
 
 - **Cross-session persistence** — history survives across sessions automatically.
 - **Fuzzy subsequence matching** — type partial characters in order, multi-token support with spaces.
-- **Character-level highlighting** — matched positions shown with accent color underline.
+- **Minimal-span highlighting** — matched characters form the closest contiguous group, so `in` highlights `input`, not scattered chars.
+- **Soft-wrapped preview** — long lines wrap to multiple lines instead of being truncated with `...`.
+- **Adaptive viewport height** — the preview grows with content up to the terminal height, then scrolls.
+- **Scrollable viewport** — `ctrl+k` / `ctrl+j` to browse the whole record.
+- **Match markers** — the first matched line is marked with `▸`, separated by a dim divider.
 - **Deduplication** — no duplicate entries across sessions.
 - **Current session awareness** — merges live branch history with cached cross-session history.
 - **Configurable shortcuts** — override via `pi-input-history.json`.

package/index.ts

@@ -28,6 +28,7 @@ import {
   Key,
   matchesKey,
   truncateToWidth,
+  visibleWidth,
   type Component,
   type Focusable,
   type KeyId,
@@ -37,10 +38,16 @@ import {
 const MAX_MESSAGES = 100;
 const DEFAULT_SEARCH_SHORTCUT: KeyId = "ctrl+r";
 const DEFAULT_NEWER_SHORTCUT: KeyId = "ctrl+s";
+const DEFAULT_SCROLL_UP_SHORTCUT: KeyId = "ctrl+k";
+const DEFAULT_SCROLL_DOWN_SHORTCUT: KeyId = "ctrl+j";
+/** Visible preview lines in the reverse-search viewport. */
+const PREVIEW_LINES = 3;
 
 type Config = {
   searchShortcut: KeyId;
   newerShortcut: KeyId;
+  scrollUpShortcut: KeyId;
+  scrollDownShortcut: KeyId;
 };
 
 function normalizeKey(value: unknown, fallback: KeyId): KeyId {
@@ -56,17 +63,23 @@ function loadConfig(): Config {
       return {
         searchShortcut: DEFAULT_SEARCH_SHORTCUT,
         newerShortcut: DEFAULT_NEWER_SHORTCUT,
+        scrollUpShortcut: DEFAULT_SCROLL_UP_SHORTCUT,
+        scrollDownShortcut: DEFAULT_SCROLL_DOWN_SHORTCUT,
       };
     }
     const raw = JSON.parse(readFileSync(path, "utf-8")) as Record<string, unknown>;
     return {
       searchShortcut: normalizeKey(raw.searchShortcut, DEFAULT_SEARCH_SHORTCUT),
       newerShortcut: normalizeKey(raw.newerShortcut, DEFAULT_NEWER_SHORTCUT),
+      scrollUpShortcut: normalizeKey(raw.scrollUpShortcut, DEFAULT_SCROLL_UP_SHORTCUT),
+      scrollDownShortcut: normalizeKey(raw.scrollDownShortcut, DEFAULT_SCROLL_DOWN_SHORTCUT),
     };
   } catch {
     return {
       searchShortcut: DEFAULT_SEARCH_SHORTCUT,
       newerShortcut: DEFAULT_NEWER_SHORTCUT,
+      scrollUpShortcut: DEFAULT_SCROLL_UP_SHORTCUT,
+      scrollDownShortcut: DEFAULT_SCROLL_DOWN_SHORTCUT,
     };
   }
 }
@@ -139,50 +152,205 @@ function fuzzyMatch(item: string, query: string): boolean {
   return tokens.every((t) => subsequence(lower, t));
 }
 
-function toSingleLinePreview(text: string): string {
-  return text.replace(/\s+/g, " ").trim();
+/** Find the indices matching `token` as a subsequence with the smallest spread. */
+function bestSubsequenceSpan(text: string, token: string): number[] {
+  const positions: number[][] = [];
+  for (const ch of token) {
+    const idxs: number[] = [];
+    for (let i = 0; i < text.length; i++) if (text[i] === ch) idxs.push(i);
+    positions.push(idxs);
+  }
+  if (positions.some((arr) => arr.length === 0)) return [];
+
+  const lowerBound = (arr: number[], min: number): number => {
+    let lo = 0;
+    let hi = arr.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (arr[mid]! < min) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo;
+  };
+
+  let bestSpan = Infinity;
+  let bestIdx: number[] = [];
+  for (const c0 of positions[0]!) {
+    const cur = [c0];
+    let prev = c0;
+    let ok = true;
+    for (let t = 1; t < token.length; t++) {
+      const arr = positions[t]!;
+      const p = lowerBound(arr, prev + 1);
+      if (p >= arr.length) {
+        ok = false;
+        break;
+      }
+      const nxt = arr[p]!;
+      cur.push(nxt);
+      prev = nxt;
+    }
+    if (!ok) continue;
+    const span = cur[cur.length - 1]! - c0;
+    if (span < bestSpan) {
+      bestSpan = span;
+      bestIdx = cur;
+    }
+  }
+  return bestIdx;
 }
 
-/** Highlight matched characters (subsequence) with underline + accent color. */
-function highlightMatch(text: string, query: string, theme: any, maxWidth: number): string {
-  const truncated = truncateToWidth(text, maxWidth);
-  const plain = truncated.replace(/\x1b\[[0-9;]*m/g, "");
-
-  if (!query) return theme.fg("text", plain);
-
-  const lower = plain.toLowerCase();
+/** Collect character indices (in `text`) matched by each query token (smallest-spread subsequence). */
+function collectMatchPositions(text: string, query: string): Set<number> {
+  const positions = new Set<number>();
+  if (!query) return positions;
+  const lower = text.toLowerCase();
   const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
-  const matchPositions = new Set<number>();
-
   for (const token of tokens) {
-    let hi = 0;
-    for (let ni = 0; ni < token.length; ni++) {
-      const idx = lower.indexOf(token[ni], hi);
-      if (idx !== -1) {
-        matchPositions.add(idx);
-        hi = idx + 1;
-      }
-    }
+    const best = bestSubsequenceSpan(lower, token);
+    for (const idx of best) positions.add(idx);
   }
+  return positions;
+}
 
+/** Underline + accent-highlight matched characters; plain text for the rest. */
+function highlightSegments(text: string, positions: Set<number>, theme: any): string {
   let result = "";
   let i = 0;
-  while (i < plain.length) {
-    if (matchPositions.has(i)) {
+  while (i < text.length) {
+    if (positions.has(i)) {
       let j = i;
-      while (j < plain.length && matchPositions.has(j)) j++;
-      result += `\x1b[4m${theme.fg("accent", plain.slice(i, j))}\x1b[24m`;
+      while (j < text.length && positions.has(j)) j++;
+      result += `\x1b[4m${theme.fg("accent", text.slice(i, j))}\x1b[24m`;
       i = j;
     } else {
       let j = i;
-      while (j < plain.length && !matchPositions.has(j)) j++;
-      result += theme.fg("text", plain.slice(i, j));
+      while (j < text.length && !positions.has(j)) j++;
+      result += theme.fg("text", text.slice(i, j));
       i = j;
     }
   }
   return result;
 }
 
+const GRAPHEME_SEGMENTER =
+  typeof Intl !== "undefined" && typeof (Intl as any).Segmenter === "function"
+    ? new (Intl as any).Segmenter(undefined, { granularity: "grapheme" })
+    : null;
+
+type WrappedLine = { text: string; start: number; end: number };
+
+/** Soft-wrap `text` to `maxWidth` columns; `\n` forces a hard break; content is never truncated. */
+function wrapText(text: string, maxWidth: number): WrappedLine[] {
+  if (maxWidth <= 0) return [{ text: "", start: 0, end: 0 }];
+  const lines: WrappedLine[] = [];
+  let cur = "";
+  let curW = 0;
+  let curStart = 0;
+  const push = (wLine: WrappedLine) => lines.push(wLine);
+  if (GRAPHEME_SEGMENTER) {
+    for (const { segment, index } of GRAPHEME_SEGMENTER.segment(text)) {
+      if (segment === "\n") {
+        push({ text: cur, start: curStart, end: index });
+        cur = "";
+        curW = 0;
+        curStart = index + 1;
+        continue;
+      }
+      const w = visibleWidth(segment);
+      if (curW + w > maxWidth && curW > 0) {
+        push({ text: cur, start: curStart, end: index });
+        cur = segment;
+        curW = w;
+        curStart = index;
+      } else {
+        cur += segment;
+        curW += w;
+      }
+    }
+  } else {
+    for (let idx = 0; idx < text.length; ) {
+      const cp = text.codePointAt(idx)!;
+      const ch = String.fromCodePoint(cp);
+      if (ch === "\n") {
+        push({ text: cur, start: curStart, end: idx });
+        cur = "";
+        curW = 0;
+        curStart = idx + 1;
+        idx += 1;
+        continue;
+      }
+      const w = visibleWidth(ch);
+      if (curW + w > maxWidth && curW > 0) {
+        push({ text: cur, start: curStart, end: idx });
+        cur = ch;
+        curW = w;
+        curStart = idx;
+      } else {
+        cur += ch;
+        curW += w;
+      }
+      idx += ch.length;
+    }
+  }
+  if (curW > 0 || text.length === 0) {
+    push({ text: cur, start: curStart, end: text.length });
+  } else if (text.endsWith("\n") && lines.length > 0) {
+    push({ text: "", start: text.length, end: text.length });
+  }
+  return lines;
+}
+
+/** Highlight the matched positions within one wrapped line. */
+function renderWrappedLine(line: WrappedLine, matchPositions: Set<number>, theme: any): string {
+  const local = new Set<number>();
+  for (const p of matchPositions) {
+    if (p >= line.start && p < line.end) local.add(p - line.start);
+  }
+  return local.size === 0 ? theme.fg("text", line.text) : highlightSegments(line.text, local, theme);
+}
+
+/** Render the viewport over wrapped lines; mark the first matched line with `▸`. */
+function renderWrappedLines(
+  lines: WrappedLine[],
+  scroll: number,
+  viewportLines: number,
+  markIndex: number,
+  matchPositions: Set<number>,
+  theme: any,
+): string[] {
+  const out: string[] = [];
+  for (let k = 0; k < viewportLines; k++) {
+    const ln = lines[scroll + k];
+    const text = ln ? renderWrappedLine(ln, matchPositions, theme) : "";
+    const arrow = ln && scroll + k === markIndex ? "▸ " : "";
+    out.push(arrow + text);
+  }
+  return out;
+}
+
+/** Wrap a (CRLF-normalized) record, locate the first matched line, and collect match positions. */
+function buildWrappedMatch(
+  record: string,
+  query: string,
+  maxWidth: number,
+): { lines: WrappedLine[]; anchor: number; positions: Set<number> } {
+  const normalized = record.replace(/\r\n/g, "\n");
+  const lines = wrapText(normalized, maxWidth);
+  const positions = collectMatchPositions(normalized, query);
+  let anchor = 0;
+  if (positions.size > 0) {
+    const first = Math.min(...positions);
+    for (let i = 0; i < lines.length; i++) {
+      if (first >= lines[i]!.start && first < lines[i]!.end) {
+        anchor = i;
+        break;
+      }
+    }
+  }
+  return { lines, anchor, positions };
+}
+
 class ReverseSearchComponent implements Component, Focusable {
   private _focused = false;
   private readonly input = new Input();
@@ -190,6 +358,8 @@ class ReverseSearchComponent implements Component, Focusable {
   private query = "";
   private matchIndices: number[] = [];
   private matchPointer = 0;
+  private previewScroll = 0;
+  private previewAutoLocate = true;
 
   constructor(
     private readonly tui: TUI,
@@ -227,6 +397,7 @@ class ReverseSearchComponent implements Component, Focusable {
     if (this.matchPointer >= this.matchIndices.length) {
       this.matchPointer = Math.max(0, this.matchIndices.length - 1);
     }
+    this.previewAutoLocate = true;
   }
 
   private getCurrentMatch(): string | undefined {
@@ -238,11 +409,13 @@ class ReverseSearchComponent implements Component, Focusable {
   private cycleOlder(): void {
     if (this.matchIndices.length === 0) return;
     this.matchPointer = (this.matchPointer + 1) % this.matchIndices.length;
+    this.previewAutoLocate = true;
   }
 
   private cycleNewer(): void {
     if (this.matchIndices.length === 0) return;
     this.matchPointer = (this.matchPointer - 1 + this.matchIndices.length) % this.matchIndices.length;
+    this.previewAutoLocate = true;
   }
 
   handleInput(data: string): void {
@@ -263,6 +436,20 @@ class ReverseSearchComponent implements Component, Focusable {
       return;
     }
 
+    if (matchesKey(data, this.config.scrollUpShortcut)) {
+      this.previewAutoLocate = false;
+      this.previewScroll = Math.max(0, this.previewScroll - 1);
+      this.tui.requestRender();
+      return;
+    }
+
+    if (matchesKey(data, this.config.scrollDownShortcut)) {
+      this.previewAutoLocate = false;
+      this.previewScroll += 1;
+      this.tui.requestRender();
+      return;
+    }
+
     const before = this.input.getValue();
     this.input.handleInput(data);
     const after = this.input.getValue();
@@ -287,27 +474,39 @@ class ReverseSearchComponent implements Component, Focusable {
       ? ` [${this.matchPointer + 1}/${this.matchIndices.length}]`
       : " [0/0]";
 
-    const matchPreview = currentMatch
-      ? highlightMatch(toSingleLinePreview(currentMatch), this.query, t, availableWidth)
-      : t.fg("warning", "no match");
-
     const counter = t.fg("dim", counterText);
 
-    const header =
-      t.fg("accent", prefix) +
-      matchPreview +
-      counter;
+    const lines: string[] = [];
+    if (currentMatch) {
+      lines.push(t.fg("accent", prefix) + counter);
+      const sep = t.fg("dim", "─".repeat(Math.max(1, width)));
+      lines.push(sep);
+      const { lines: wl, anchor, positions } = buildWrappedMatch(currentMatch, this.query, availableWidth);
+      const terminalRows = this.tui.terminal.rows;
+      const maxVp = Math.max(PREVIEW_LINES, terminalRows - 6);
+      const viewportLines = Math.max(PREVIEW_LINES, Math.min(wl.length, maxVp));
+      const maxScroll = Math.max(0, wl.length - viewportLines);
+      const scroll = this.previewAutoLocate
+        ? Math.min(maxScroll, Math.max(0, anchor - Math.floor(viewportLines / 2)))
+        : Math.min(maxScroll, Math.max(0, this.previewScroll));
+      this.previewScroll = scroll;
+      lines.push(...renderWrappedLines(wl, scroll, viewportLines, anchor, positions, t));
+      lines.push(sep);
+    } else {
+      lines.push(t.fg("accent", prefix) + t.fg("warning", "no match") + counter);
+    }
 
     const inputLine = truncateToWidth(this.input.render(width)[0] ?? "", width);
     const help = truncateToWidth(
       t.fg(
         "dim",
-        `${this.config.searchShortcut}/↑ older • ${this.config.newerShortcut}/↓ newer • enter accept • esc cancel`,
+        `${this.config.searchShortcut}/↑ older • ${this.config.newerShortcut}/↓ newer • ${this.config.scrollUpShortcut}/${this.config.scrollDownShortcut} scroll • enter accept • esc cancel`,
       ),
       width,
     );
 
-    return [truncateToWidth(header, width), inputLine, help];
+    lines.push(inputLine, help);
+    return lines.map((l) => truncateToWidth(l, width));
   }
 
   invalidate(): void {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-input-history",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Cross-session prompt history and fuzzy reverse search for pi.",
   "keywords": [
     "pi",