pi-soly 2.5.0 → 2.5.1

package/mcp/mcp-panel.ts

@@ -1,5 +1,7 @@
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { createPanelKeys, type PanelKeybindings, type PanelKeys } from "../visual/panel-keys.ts";
+import { fuzzyScore } from "../visual/fuzzy.ts";
+import { borderTop, borderBottom, borderDivider, borderRow, borderEmpty, type BorderStyler } from "../visual/border.ts";
 import { isToolExcluded } from "./types.ts";
 import type { McpConfig, McpPanelCallbacks, McpPanelResult, ServerProvenance } from "./types.ts";
 import { resourceNameToToolName } from "./resource-tools.ts";
@@ -55,24 +57,7 @@ function rainbowProgress(filled: number, total: number): string {
   return dots.join(" ");
 }
 
-function fuzzyScore(query: string, text: string): number {
-  const lq = query.toLowerCase();
-  const lt = text.toLowerCase();
-  if (lt.includes(lq)) return 100 + (lq.length / lt.length) * 50;
-  let score = 0;
-  let qi = 0;
-  let consecutive = 0;
-  for (let i = 0; i < lt.length && qi < lq.length; i++) {
-    if (lt[i] === lq[qi]) {
-      score += 10 + consecutive;
-      consecutive += 5;
-      qi++;
-    } else {
-      consecutive = 0;
-    }
-  }
-  return qi === lq.length ? score : 0;
-}
+// fuzzyScore moved to ../visual/fuzzy.ts — imported above.
 
 function estimateTokens(tool: CachedTool): number {
   const schemaLen = JSON.stringify(tool.inputSchema ?? {}).length;
@@ -599,18 +584,15 @@ class McpPanel {
     const italic = (s: string) => `\x1b[3m${s}\x1b[23m`;
     const inverse = (s: string) => `\x1b[7m${s}\x1b[27m`;
 
-    const row = (content: string) =>
-      fg(t.border, "│") + truncateToWidth(" " + content, innerW, "…", true) + fg(t.border, "│");
-    const emptyRow = () => fg(t.border, "│") + " ".repeat(innerW) + fg(t.border, "│");
-    const divider = () => fg(t.border, "├" + "─".repeat(innerW) + "┤");
+    // Shared border styler — colors border chars via the panel theme.
+    const borderS: BorderStyler = (s: string) => fg(t.border, s);
+    const titleS: BorderStyler = (s: string) => fg(t.title, s);
+    const row = (content: string) => borderRow(content, innerW, borderS);
+    const emptyRow = () => borderEmpty(innerW, borderS);
+    const divider = () => borderDivider(innerW, borderS);
 
-    const titleText = this.authOnly ? " MCP OAuth " : " MCP Servers ";
-    const borderLen = innerW - visibleWidth(titleText);
-    const leftB = Math.floor(borderLen / 2);
-    const rightB = borderLen - leftB;
-    lines.push(fg(t.border, "╭" + "─".repeat(leftB)) + fg(t.title, titleText) + fg(t.border, "─".repeat(rightB) + "╮"));
-
-    lines.push(emptyRow());
+    const titleText = this.authOnly ? "MCP OAuth" : "MCP Servers";
+    lines.push(borderTop(titleText, innerW, borderS, titleS));
 
     const cursor = fg(t.selected, "│");
     const searchIcon = fg(t.border, "◎");
@@ -622,27 +604,21 @@ class McpPanel {
       lines.push(row(`${searchIcon}  ${fg(t.placeholder, italic("search..."))}`));
     }
 
-    lines.push(emptyRow());
     if (this.noticeLines.length > 0) {
       for (const notice of this.noticeLines) {
         lines.push(row(fg(t.hint, italic(notice))));
       }
-      lines.push(emptyRow());
     }
     lines.push(divider());
 
     if (this.servers.length === 0) {
-      lines.push(emptyRow());
       lines.push(row(fg(t.hint, italic(this.authOnly ? "No OAuth-capable MCP servers configured." : "No MCP servers configured."))));
-      lines.push(emptyRow());
     } else {
       const maxVis = McpPanel.MAX_VISIBLE;
       const total = this.visibleItems.length;
       const startIdx = Math.max(0, Math.min(this.cursorIndex - Math.floor(maxVis / 2), total - maxVis));
       const endIdx = Math.min(startIdx + maxVis, total);
 
-      lines.push(emptyRow());
-
       for (let i = startIdx; i < endIdx; i++) {
         const item = this.visibleItems[i];
         const isCursor = i === this.cursorIndex;
@@ -655,26 +631,20 @@ class McpPanel {
         }
       }
 
-      lines.push(emptyRow());
-
       if (total > maxVis) {
         const prog = Math.round(((this.cursorIndex + 1) / total) * 10);
         lines.push(row(`${rainbowProgress(prog, 10)}  ${fg(t.hint, `${this.cursorIndex + 1}/${total}`)}`));
-        lines.push(emptyRow());
       }
 
       if (this.importNotice) {
         lines.push(row(fg(t.needsAuth, italic(this.importNotice))));
-        lines.push(emptyRow());
       }
       if (this.authNotice) {
         lines.push(row(fg(t.needsAuth, italic(this.authNotice))));
-        lines.push(emptyRow());
       }
     }
 
     lines.push(divider());
-    lines.push(emptyRow());
 
     if (this.confirmingDiscard) {
       const discardBtn = this.discardSelected === 0
@@ -699,7 +669,6 @@ class McpPanel {
       }
     }
 
-    lines.push(emptyRow());
     const hints = this.authOnly
       ? [
           italic("↑↓") + " navigate",
@@ -738,8 +707,7 @@ class McpPanel {
     }
     if (curLine) lines.push(row(fg(t.hint, curLine)));
 
-    lines.push(fg(t.border, "╰" + "─".repeat(innerW) + "╯"));
-
+    lines.push(borderBottom(innerW, borderS));
     return lines;
   }
 

package/mcp/mcp-setup-panel.ts

@@ -1,5 +1,6 @@
 import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { createPanelKeys, type PanelKeybindings, type PanelKeys } from "../visual/panel-keys.ts";
+import { borderTop, borderBottom, borderDivider, borderRow, borderEmpty, type BorderStyler } from "../visual/border.ts";
 import type { ImportKind } from "./types.ts";
 import type { ConfigWritePreview, McpDiscoverySummary } from "./config.ts";
 import type { McpOnboardingState } from "./onboarding-state.ts";
@@ -345,22 +346,24 @@ export class McpSetupPanel {
   render(width: number): string[] {
     const innerW = Math.max(40, width - 2);
     const lines: string[] = [];
-    const border = fg(this.t.border, "─".repeat(innerW));
-    lines.push(`┌${border}┐`);
-    lines.push(this.padLine(fg(this.t.title, "MCP setup"), innerW));
-    lines.push(this.padLine(this.discoverySummaryLine(), innerW));
-    lines.push(this.padLine(fg(this.t.muted, this.secondarySummaryLine()), innerW));
-    lines.push(this.padLine("", innerW));
+    const borderS: BorderStyler = (s: string) => fg(this.t.border, s);
+    const row = (content: string) => borderRow(content, innerW, borderS);
+
+    lines.push(borderTop("", innerW, borderS));
+    lines.push(row(fg(this.t.title, "MCP setup")));
+    lines.push(row(this.discoverySummaryLine()));
+    lines.push(row(fg(this.t.muted, this.secondarySummaryLine())));
+    lines.push(borderEmpty(innerW, borderS));
 
     if (this.notice) {
       const tone = this.notice.tone === "success" ? this.t.success : this.notice.tone === "warning" ? this.t.warning : this.t.hint;
       for (const line of wrapText(this.notice.text, innerW - 6)) {
-        lines.push(this.padLine(fg(tone, line), innerW));
+        lines.push(row(fg(tone, line)));
       }
-      lines.push(this.padLine("", innerW));
+      lines.push(borderEmpty(innerW, borderS));
     }
 
-    lines.push(`├${border}┤`);
+    lines.push(borderDivider(innerW, borderS));
 
     if (this.screen === "imports") {
       lines.push(...this.renderImports(innerW));
@@ -370,7 +373,7 @@ export class McpSetupPanel {
       lines.push(...this.renderActions(innerW));
     }
 
-    lines.push(`└${border}┘`);
+    lines.push(borderBottom(innerW, borderS));
     return lines;
   }
 
@@ -554,12 +557,7 @@ export class McpSetupPanel {
   }
 
   private padLine(text: string, innerW: number): string {
-    const inset = 2;
-    const contentW = Math.max(0, innerW - inset * 2);
-    const fitted = truncateToWidth(text, contentW, "…", true);
-    const plainWidth = visibleWidth(fitted);
-    const padding = Math.max(0, contentW - plainWidth);
-    return `│${" ".repeat(inset)}${fitted}${" ".repeat(padding)}${" ".repeat(inset)}│`;
+    return borderRow(text, innerW, (s) => fg(this.t.border, s));
   }
 
   invalidate(): void {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-soly",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Workflow + project management for pi-coding-agent. Plans, state, MANDATORY rules, self-review, multi-question picker. One npm install, zero config. LLM drives the workflow inline via the soly_workflow tool — no external subagent plugin.",
   "type": "module",
   "main": "index.ts",

package/visual/border.ts

@@ -0,0 +1,64 @@
+// =============================================================================
+// visual/border.ts — shared rounded-border renderer for modal panels
+// =============================================================================
+//
+// All soly modal panels (ListPanel, McpPanel, McpSetupPanel) draw bordered
+// boxes. Before this module, each had its own helpers:
+//   - list-panel:  frame(), headerLine(), footerLine(), ruleLine()  (┌┐└┘)
+//   - mcp-panel:   row(), emptyRow(), divider()                     (╭╮╰╯ + raw ANSI)
+//   - mcp-setup:   padLine()                                         (┌┐└┘)
+//
+// This module unifies them under one API with rounded corners (╭╮╰╯├┤│─).
+// Each function takes a `styler` ((s: string) => string) so it works with
+// any color system — pi's Theme.fg(), mcp-panel's fg(), or identity in tests.
+//
+// All width math uses pi-tui's visibleWidth/truncateToWidth so ANSI color
+// codes inside `content` never break alignment (same approach as list-panel).
+// =============================================================================
+
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/** Colors the border characters. Identity (s => s) in tests. */
+export type BorderStyler = (s: string) => string;
+
+/** Top border with a centered title: `╭── title ──╮`. */
+export function borderTop(title: string, innerW: number, styler: BorderStyler, titleStyler?: BorderStyler): string {
+	const ts = titleStyler ?? styler;
+	const titleW = visibleWidth(title);
+	const dashTotal = Math.max(0, innerW - titleW);
+	const leftDash = Math.floor(dashTotal / 2);
+	const rightDash = dashTotal - leftDash;
+	return styler("╭" + "─".repeat(leftDash)) + ts(title) + styler("─".repeat(rightDash) + "╮");
+}
+
+/** Bottom border: `╰──...──╯`. */
+export function borderBottom(innerW: number, styler: BorderStyler): string {
+	return styler("╰" + "─".repeat(innerW) + "╯");
+}
+
+/** Mid-panel divider: `├──...──┤`. */
+export function borderDivider(innerW: number, styler: BorderStyler): string {
+	return styler("├" + "─".repeat(innerW) + "┤");
+}
+
+/** Labelled divider inside the panel: `├── label ──┤`. */
+export function borderLabelledDivider(label: string, innerW: number, styler: BorderStyler, labelStyler?: BorderStyler): string {
+	const ls = labelStyler ?? styler;
+	const head = `─ ${label} `;
+	const dashN = Math.max(0, innerW - visibleWidth(head) - 1);
+	return styler("├ ") + ls(head) + styler("─".repeat(dashN) + "┤");
+}
+
+/** Content row: `│ content │` (truncated with `…` if too wide, padded if short). */
+export function borderRow(content: string, innerW: number, styler: BorderStyler): string {
+	const truncated = visibleWidth(content) > innerW
+		? truncateToWidth(content, innerW, "…", true)
+		: content;
+	const pad = Math.max(0, innerW - visibleWidth(truncated));
+	return styler("│ ") + truncated + " ".repeat(pad) + styler(" │");
+}
+
+/** Empty row: `│          │`. */
+export function borderEmpty(innerW: number, styler: BorderStyler): string {
+	return styler("│") + " ".repeat(innerW) + styler("│");
+}

package/visual/fuzzy.ts

@@ -0,0 +1,26 @@
+// =============================================================================
+// visual/fuzzy.ts — shared subsequence fuzzy match scorer
+// =============================================================================
+//
+// Extracted from list-panel.ts (where it was duplicated in mcp-panel.ts).
+// Pure function, no deps — trivially testable.
+//
+// Scoring:
+//   - exact substring match: 100 + (queryLen / textLen) — highest
+//   - in-order subsequence:  1 — match but not contiguous
+//   - no match:              0
+// =============================================================================
+
+/** Subsequence fuzzy match: substring scores highest, then in-order chars.
+ *  Returns 0 for no match, >0 for a match. */
+export function fuzzyScore(query: string, text: string): number {
+	const q = query.toLowerCase();
+	const t = text.toLowerCase();
+	if (!q) return 1;
+	if (t.includes(q)) return 100 + q.length / t.length;
+	let qi = 0;
+	for (let i = 0; i < t.length && qi < q.length; i++) {
+		if (t[i] === q[qi]) qi++;
+	}
+	return qi === q.length ? 1 : 0;
+}

package/visual/list-panel.ts

@@ -16,6 +16,7 @@ import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@ea
 import type { Component, TUI } from "@earendil-works/pi-tui";
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { createPanelKeys, type PanelKeybindings, type PanelKeys } from "./panel-keys.ts";
+import { fuzzyScore } from "./fuzzy.ts";
 // (PanelKeybindings re-exported by re-export side below.)
 
 /** One row in the panel. `body` is shown in the preview pane when selected. */
@@ -60,15 +61,7 @@ const MAX_ROWS = 12; // list window height (render() has no viewport height)
 const PREVIEW_LINES = 4;
 
 /** Subsequence fuzzy match: substring scores highest, then in-order chars. */
-function fuzzyScore(query: string, text: string): number {
-	const q = query.toLowerCase();
-	const t = text.toLowerCase();
-	if (!q) return 1;
-	if (t.includes(q)) return 100 + q.length / t.length;
-	let qi = 0;
-	for (let i = 0; i < t.length && qi < q.length; i++) if (t[i] === q[qi]) qi++;
-	return qi === q.length ? 1 : 0;
-}
+// fuzzyScore moved to ./fuzzy.ts — imported above.
 
 /** Index into `flatRows` (mixed item + group header rows). */
 type RowIndex = number;
@@ -253,7 +246,7 @@ export class ListPanel implements Component {
 		const left = ` ${this.p.title} `;
 		const right = this.p.headerRight ? ` ${this.p.headerRight} ` : "";
 		const fillN = Math.max(1, inner + 2 - visibleWidth(left) - visibleWidth(right));
-		return dim("┌") + muted(left) + dim("─".repeat(fillN)) + muted(right) + dim("┐");
+		return dim("╭") + muted(left) + dim("─".repeat(fillN)) + muted(right) + dim("╮");
 	}
 
 	private searchLine(inner: number, dim: (s: string) => string, muted: (s: string) => string): string {
@@ -289,6 +282,6 @@ export class ListPanel implements Component {
 		const open = this.p.onSelect ? "⏎ open · " : "";
 		const hint = ` ↑↓ move · ${open}/ search${acts ? " · " + acts : ""} · esc `;
 		const fillN = Math.max(1, inner + 2 - visibleWidth(hint));
-		return dim("└") + dim(hint) + dim("─".repeat(fillN)) + dim("┘");
+		return dim("╰") + dim(hint) + dim("─".repeat(fillN)) + dim("╯");
 	}
 }