@pi-archimedes/ui 2.10.4 → 2.11.1

package/src/startup/sections.ts

@@ -1,22 +1,24 @@
-import { clampLine, stripAnsi } from "@pi-archimedes/core/text";
-import { gray, rgb, extractRgb, lerp } from "@pi-archimedes/core/color";
+import { rgb, extractRgb, lerp } from "@pi-archimedes/core/color";
 import { TRUECOLOR } from "./logo.js";
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { visibleWidth } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 
 // ── Types ──────────────────────────────────────────────────────
-
-export const SECTION_KEYS = ["Models", "Context", "Prompts", "Skills", "Extensions", "Themes"] as const;
-export type SectionKey = (typeof SECTION_KEYS)[number];
-type RenderSectionKey = SectionKey | "Version";
+//
+// One of these is a block the splash renders: a bracketed label and the items
+// under it. pi 1.x owns its own startup listing, so nothing here detects or
+// parses pi's sections any more (that was the scrape Task 8 removed) — the
+// caller builds these from `ctx.scopedModels` plus the version row, and this
+// module lays them out *in pi's own shape*, because the listing it sits above
+// is pi's: see `formatColumns` for the recipe.
 
 export interface ParsedSection {
-  name: SectionKey;
+  name: string;
   items: string[];
 }
 
 interface RenderSection {
-  name: RenderSectionKey;
+  name: string;
   items: string[];
 }
 
@@ -27,280 +29,125 @@ export const STAGGER_FRAMES = 0;
 export const BASE_FADE_DELAY = 3;
 export const MAX_STAGGER = BASE_FADE_DELAY + 5 * STAGGER_FRAMES;
 
-// ── Section detection & parsing ────────────────────────────────
-
-export function detectSection(plain: string): SectionKey | undefined {
-  for (const key of SECTION_KEYS) {
-    if (plain.includes(`[${key}]`)) return key;
-  }
-  return undefined;
-}
-
-export function parseSectionText(plain: string): ParsedSection | undefined {
-  const sectionName = detectSection(plain);
-  if (!sectionName) return undefined;
-
-  const names = extractItemsFromSection(plain, sectionName);
-  const items = deduplicateItems(names);
-  return { name: sectionName, items };
-}
-
-/**
- * Extract item names from a section's plain text.
- * Tracks source prefixes (npm:/git:) for Extensions/Skills sections.
- */
-function extractItemsFromSection(plain: string, sectionName: SectionKey): string[] {
-  const names: string[] = [];
-  const lines = plain.split("\n");
-  let currentSource = "";
-  let sourceIndent = 0;
-  const showSource = sectionName === "Extensions" || sectionName === "Skills";
-
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (shouldSkipLine(trimmed, currentSource)) continue;
-
-    const indent = line.length - line.trimStart().length;
-
-    // Track package source headers (e.g. "git:github.com/...", "npm:@foo/bar")
-    if (/^(git:|npm:)\S+\//.test(trimmed)) {
-      currentSource = trimmed.startsWith("git:") ? "git:" : "npm:";
-      sourceIndent = indent;
-      const name = extractName(trimmed, sectionName);
-      if (name && showSource) names.push(name);
-      continue;
-    }
-
-    // Reset source prefix when indent returns to source level or shallower
-    if (currentSource && indent <= sourceIndent) {
-      currentSource = "";
-      sourceIndent = 0;
-    }
+/** pi's compact body indent: `theme.fg("dim", `  ${labels.join(", ")}`)`. */
+const BODY_INDENT = "  ";
 
-    const itemNames = extractNames(trimmed, sectionName);
-    for (const n of itemNames) {
-      names.push(showSource && currentSource ? currentSource + n : n);
-    }
-  }
-  return names;
-}
+// ── Section formatter ──────────────────────────────────────────
 
 /**
- * Extract item name(s) from a line.
+ * Lay the sections out the way pi lays its own startup listing out, because
+ * pi's listing is drawn immediately below ours (its `loadedResourcesContainer`
+ * is the container after the header's) and any difference in shape reads as a
+ * second document. pi's recipe, from `showLoadedResources()` in 1.2.0
+ * (`interactive-mode.js:1335-1347`):
  *
- * Collapsed section bodies are a single comma-joined line ("a, b, c") —
- * split it so each name is its own item and the listing can wrap, instead
- * of one clamped line ending in "...". Expanded bodies are per-item path
- * lines; names never contain ", ", so splitting is safe.
- */
-function extractNames(line: string, sectionName: SectionKey): string[] {
-  const parts = line.includes(", ")
-    ? line.split(", ").map(p => p.trim()).filter(Boolean)
-    : [line];
-  const out: string[] = [];
-  for (const part of parts) {
-    const name = extractName(part, sectionName);
-    if (name) out.push(name);
-  }
-  return out;
-}
-
-/** Check if a line should be skipped during section parsing. */
-function shouldSkipLine(trimmed: string, currentSource: string): boolean {
-  if (!trimmed) return true;
-  if (trimmed.startsWith("[")) return true;
-  if (/^(user|project|path)$/.test(trimmed)) return true;
-  if (/^(index\.(ts|js)|src|dist|out|build|lib|bin)$/i.test(trimmed)) return true;
-  // Skip resolved file paths only under source headers
-  if (currentSource) {
-    if (/\/(src|dist|out|build|lib|bin)\//.test(trimmed)) return true;
-    if (/\.(ts|js)$/.test(trimmed) && trimmed.includes("/") && !/SKILL\.(ts|js)$/i.test(trimmed)) return true;
-  }
-  return false;
-}
-
-/**
- * Deduplicate items by bare name (without prefix).
- * Prefers prefixed versions (npm:/git:) over bare names.
+ * ```ts
+ * const sectionHeader = (name, color = "mdHeading") => theme.fg(color, `[${name}]`);
+ * const formatCompactList = (items) => theme.fg("dim", `  ${labels.join(", ")}`);
+ * new ExpandableText(() => `${sectionHeader(name)}\n${collapsedBody()}`, …, 0, 0)
+ * container.addChild(section); container.addChild(new Spacer(1));
+ * ```
+ *
+ * So: the bracketed name in `mdHeading` on its own row, the values `dim` on the
+ * row under it at a two-space indent, both at column 1, one blank row between
+ * sections. Two deliberate differences, both of which pi cannot show and we
+ * must:
+ *
+ * - no trailing blank row. pi puts a `Spacer(1)` above *and* below the header
+ *   container (`:764-766`) and opens the listing with another, so the gap below
+ *   the header is already pi's to draw; a blank row here would double it.
+ * - long value lists are broken across rows. pi writes one long row and lets
+ *   its own expander deal with it; our header is a plain component, and a row
+ *   wider than the frame is a row the terminal wraps under us.
  */
-function deduplicateItems(names: string[]): string[] {
-  const seen = new Map<string, string>();
-  for (const n of names) {
-    if (/^(index|dist|src|out|lib|bin)$/i.test(n)) continue;
-    const bare = n.replace(/^(npm:|git:)/, "");
-    if (!seen.has(bare) || n.includes(":")) seen.set(bare, n);
-  }
-  return [...seen.values()];
-}
-
-export function parseModelScope(plain: string): ParsedSection | undefined {
-  const m = plain.match(/Model scope:\s*(.+)/i);
-  if (!m) return undefined;
-  const raw = m[1]!.replace(/\s*\(Ctrl\+\w[\w\s]*\)/gi, "");
-  const items = raw.split(",").map(s => s.trim()).filter(Boolean);
-  return items.length > 0 ? { name: "Models", items } : undefined;
-}
-
-// ── Name extraction helpers ────────────────────────────────────
-
-function detectOrigin(path: string): { prefix: string; clean: string } {
-  if (/^npm:/.test(path)) return { prefix: "npm:", clean: path.slice(4) };
-  if (/^git:/.test(path)) return { prefix: "git:", clean: path.slice(4) };
-  if (/^https?:\/\//.test(path)) return { prefix: "git:", clean: path };
-  return { prefix: "", clean: path };
-}
-
-function cleanName(name: string): string {
-  return name.replace(/\.(ts|js|json|md|git)$/i, "");
-}
-
-type Extractor = (clean: string, prefix: string) => string;
-
-const defaultExtract: Extractor = (clean, prefix) =>
-  prefix + cleanName(clean.split("/").pop() ?? clean);
-
-const sectionExtractors: Record<SectionKey, Extractor> = {
-  Models: defaultExtract,
-  Themes: defaultExtract,
-  Prompts: (clean) => {
-    const base = clean.split("/").pop() ?? clean;
-    return cleanName(base) || clean;
-  },
-  Context: (clean) => clean.split("/").pop() ?? clean,
-  Skills: (clean, prefix) => {
-    if (!clean.includes("/")) return defaultExtract(clean, prefix);
-    const parts = clean.split("/");
-    const file = parts.pop() ?? "";
-    if (/^SKILL\.(md|ts|js)$/i.test(file)) {
-      return prefix + cleanName(parts.pop() ?? file);
-    }
-    return prefix + cleanName(file);
-  },
-  Extensions: (clean, prefix) => {
-    const stripped = clean.replace(/^https?:\/\/[^/]+\//, "");
-    const parts = stripped.split("/").filter(p => {
-      const lower = p.toLowerCase();
-      return p && !/^(index\.(ts|js)|src|dist|out|build|lib|bin)$/.test(lower);
-    });
-    if (parts.length > 0) return prefix + cleanName(parts.pop()!);
-    return prefix + cleanName(clean);
-  },
-};
-
-export function extractName(path: string, section: SectionKey): string {
-  const trimmed = path.trim();
-  const { prefix, clean } = detectOrigin(trimmed);
-  return sectionExtractors[section](clean, prefix);
-}
-
-// ── Column formatter ───────────────────────────────────────────
-
-function pad(s: string, w: number): string {
-  const vw = visibleWidth(s);
-  return vw >= w ? s : s + " ".repeat(w - vw);
-}
-
 export function formatColumns(sections: RenderSection[], theme: Theme, maxW: number, ref: { frame: number; revealed: boolean; revealedAt: number; scaffoldAt: number; settled: boolean }): string[] {
   if (sections.length === 0) return [];
 
-  const dim = (t: string) => theme.fg("dim", t);
-  const muted = (t: string) => theme.fg("muted", t);
-
-  const headerW = Math.max(...sections.map(s => s.name.length + 2)) + 2;
+  // Colour comes from the theme's tokens, never from an escape we compose
+  // ourselves (ADR 0029) — the same two tokens pi's section rows use.
+  const heading = (t: string) => theme.fg("mdHeading", t);
+  const body = (t: string) => theme.fg("dim", t);
 
   const itemAge = ref.revealed ? ref.frame - ref.revealedAt : 0;
   const labelAge = ref.revealed ? ref.frame - ref.scaffoldAt : 0;
 
-  // RGB endpoints for fade ramps (truecolor only)
+  // RGB endpoints for fade ramps (truecolor only): each row ramps to the colour
+  // pi paints it with at rest.
   const fadeStartRgb: [number, number, number] = [20, 20, 20];
-  let dimRgb: [number, number, number] | undefined;
-  let mutedRgb: [number, number, number] | undefined;
+  let headingRgb: [number, number, number] | undefined;
+  let bodyRgb: [number, number, number] | undefined;
   const labelRamping = TRUECOLOR && ref.revealed && labelAge < RAMP_FRAMES + MAX_STAGGER;
   const itemRamping = TRUECOLOR && ref.revealed && itemAge < RAMP_FRAMES + MAX_STAGGER;
   if (labelRamping || itemRamping) {
-    dimRgb = extractRgb(theme.fg("dim", " "));
-    mutedRgb = extractRgb(theme.fg("muted", " "));
+    headingRgb = extractRgb(theme.fg("mdHeading", " "));
+    bodyRgb = extractRgb(theme.fg("dim", " "));
   }
 
   const lines: string[] = [];
+  let firstSection = true;
 
   for (let si = 0; si < sections.length; si++) {
     const sec = sections[si]!;
     if (sec.items.length === 0) continue;
 
-    const availableW = maxW - headerW - 1;
+    // The blank row between sections, which is pi's `Spacer(1)`.
+    if (!firstSection) lines.push("");
+    firstSection = false;
 
-    // Label fade: near-invisible → dim (static dim when not revealed)
+    // Label fade: near-invisible → the heading colour (static when not revealed)
     const secLabelAge = Math.max(0, labelAge - BASE_FADE_DELAY - si * STAGGER_FRAMES);
     const wrapLabel = ref.revealed
-      ? buildItemWrapper(secLabelAge, true, fadeStartRgb, dimRgb, dim)
-      : dim;
-    const header = wrapLabel(`[${sec.name}]`);
-    const paddedHeader = header + " ".repeat(Math.max(0, headerW - sec.name.length - 2));
+      ? buildItemWrapper(secLabelAge, true, fadeStartRgb, headingRgb, heading)
+      : heading;
+    lines.push(truncateToWidth(wrapLabel(`[${sec.name}]`), maxW));
 
-    // Item fade: near-invisible → muted
+    // Item fade: near-invisible → the body colour
     const secItemAge = Math.max(0, itemAge - BASE_FADE_DELAY - si * STAGGER_FRAMES);
-    const wrapItems = buildItemWrapper(secItemAge, ref.revealed, fadeStartRgb, mutedRgb, muted);
-
-    // Style prefix (npm:/git:) dimmer than the name
-    const styleItem = (raw: string): string => {
-      const prefixMatch = raw.match(/^(npm:|git:)/);
-      if (prefixMatch) {
-        const pfx = prefixMatch[1]!;
-        const name = raw.slice(pfx.length);
-        return wrapLabel(pfx) + wrapItems(name);
-      }
-      return wrapItems(raw);
-    };
-
-    let currentLine = "";
-    let currentStyled = "";
-    let firstLine = true;
-
+    const wrapItems = buildItemWrapper(secItemAge, ref.revealed, fadeStartRgb, bodyRgb, body);
+
+    // pi's compact body is one `dim` row of `, `-joined labels at a two-space
+    // indent — one colour over the whole row, the indent inside it (there is no
+    // token fainter than `dim` to set a prefix behind, and pi does not try).
+    // The row is broken across rows only when it will not fit the frame, which
+    // pi's own expander handles and a plain component does not.
+    const bodyW = Math.max(1, maxW - BODY_INDENT.length);
+    let rawRun = "";
     for (const item of sec.items) {
-      const itemW = visibleWidth(item);
-      const currentW = visibleWidth(currentLine);
-
-      if (currentLine && currentW + 2 + itemW > availableW) {
-        const rawLine = firstLine ? `${paddedHeader} ${currentStyled}` : " ".repeat(headerW + 1) + currentStyled;
-        lines.push(clampLine(rawLine, maxW));
-        currentLine = item;
-        currentStyled = styleItem(item);
-        firstLine = false;
+      const candidate = rawRun ? `${rawRun}, ${item}` : item;
+      if (rawRun && visibleWidth(candidate) > bodyW) {
+        lines.push(truncateToWidth(wrapItems(BODY_INDENT + rawRun), maxW));
+        rawRun = item;
       } else {
-        currentLine = currentLine ? currentLine + "  " + item : item;
-        currentStyled = currentStyled ? currentStyled + "  " + styleItem(item) : styleItem(item);
+        rawRun = candidate;
       }
     }
-    if (currentLine) {
-      const rawLine = firstLine ? `${paddedHeader} ${currentStyled}` : " ".repeat(headerW + 1) + currentStyled;
-      lines.push(clampLine(rawLine, maxW));
-    }
-
-    if (sec.name === "Version") {
-      lines.push("");
-    }
+    if (rawRun) lines.push(truncateToWidth(wrapItems(BODY_INDENT + rawRun), maxW));
   }
 
   return lines;
 }
 
+/**
+ * The wrapper a row is drawn with: the ramped truecolor mix while the reveal is
+ * running, `atRest` once it is over (or where the terminal has no truecolor to
+ * ramp through).
+ */
 export function buildItemWrapper(
   sectionAge: number,
   revealed: boolean,
   startRgb: [number, number, number] | undefined,
-  mutedRgb: [number, number, number] | undefined,
-  muted: (t: string) => string,
+  atRestRgb: [number, number, number] | undefined,
+  atRest: (t: string) => string,
 ): (text: string) => string {
   if (!revealed) return (text) => text; // placeholders already styled
 
-  // No truecolor or ramp done → static muted
-  if (!startRgb || !mutedRgb || sectionAge >= RAMP_FRAMES) return muted;
+  // No truecolor or ramp done → the theme's own colour for the row
+  if (!startRgb || !atRestRgb || sectionAge >= RAMP_FRAMES) return atRest;
 
   const t = Math.min(1, sectionAge / RAMP_FRAMES);
   const eased = 1 - (1 - t) * (1 - t);
-  const r = lerp(startRgb[0], mutedRgb[0], eased);
-  const g = lerp(startRgb[1], mutedRgb[1], eased);
-  const b = lerp(startRgb[2], mutedRgb[2], eased);
+  const r = lerp(startRgb[0], atRestRgb[0], eased);
+  const g = lerp(startRgb[1], atRestRgb[1], eased);
+  const b = lerp(startRgb[2], atRestRgb[2], eased);
   return (text) => rgb(r, g, b, text);
 }