pi-one-ui 0.7.0 → 0.7.1

package/extensions/layouts/overlay/settings-panel.ts

@@ -0,0 +1,359 @@
+import {
+  getSettingsListTheme,
+  type Theme,
+} from "@earendil-works/pi-coding-agent";
+import {
+  type Component,
+  matchesKey,
+  type SettingItem,
+  SettingsList,
+  type TUI,
+  truncateToWidth,
+} from "@earendil-works/pi-tui";
+import {
+  DIFF_INDICATOR_MODES,
+  DIFF_VIEW_MODES,
+} from "../../app/config/renderer.ts";
+import type { SettingsSnapshot } from "../../app/settings/controller.ts";
+import { PRESET_VALUES } from "../../app/settings/presets.ts";
+import {
+  renderEditorSettingsPreview,
+  renderUserMessageSettingsPreview,
+} from "./settings-previews.ts";
+
+const SECTIONS = [
+  { id: "header", label: "Header" },
+  { id: "context", label: "Context" },
+  { id: "workingLine", label: "WorkingLine" },
+  { id: "editor", label: "Editor" },
+  { id: "footer", label: "Footer" },
+  { id: "features", label: "Features" },
+  { id: "presets", label: "Presets" },
+] as const;
+type SectionId = (typeof SECTIONS)[number]["id"];
+const onOff = (value: boolean) => (value ? "on" : "off");
+const item = (
+  id: string,
+  label: string,
+  description: string,
+  currentValue: string,
+  values: readonly string[],
+): SettingItem => ({
+  id,
+  label,
+  description,
+  currentValue,
+  values: [...values],
+});
+const toggle = (
+  id: string,
+  label: string,
+  description: string,
+  enabled: boolean,
+) => item(id, label, description, onOff(enabled), ["on", "off"]);
+
+function itemsFor(
+  section: SectionId,
+  snapshot: SettingsSnapshot,
+): SettingItem[] {
+  const { components } = snapshot.shell;
+  const config = snapshot.renderer;
+  switch (section) {
+    case "header":
+      return [
+        toggle(
+          "showStartupHeader",
+          "Startup header",
+          "Show the custom startup header on new sessions.",
+          config.showStartupHeader,
+        ),
+      ];
+    case "editor":
+      return [
+        item(
+          "editorStyle",
+          "Editor",
+          "on applies the Minimalist decoration; off restores Pi's native editor.",
+          components.editor.style,
+          ["on", "off"],
+        ),
+        item(
+          "editorBorderColorMode",
+          "Border color",
+          "static keeps one border color; adaptive shifts the border with the effort level.",
+          components.editor.borderColorMode,
+          ["static", "adaptive"],
+        ),
+      ];
+    case "workingLine":
+      return [
+        toggle(
+          "workingLineEnabled",
+          "Working line",
+          "Enable the sole owner of Pi's working row.",
+          components.workingLine.enabled,
+        ),
+        item(
+          "workingLineSpinner",
+          "Working spinner",
+          "Select the working line animation preset.",
+          components.workingLine.spinner,
+          ["braille", "star-bloom", "pinwheel", "claude-inspired", "pulse"],
+        ),
+      ];
+    case "footer":
+      return [
+        item(
+          "footerStyle",
+          "Footer",
+          "Choose Starship, native, or hidden footer rendering.",
+          components.footer.style,
+          ["starship", "native", "hidden"],
+        ),
+      ];
+    case "context":
+      return [
+        toggle(
+          "userMessagesEnabled",
+          "User messages",
+          "Enable custom rendering for previous user messages.",
+          components.userMessages.enabled,
+        ),
+        item(
+          "userMessagesStyle",
+          "Message style",
+          "Choose the previous user message treatment.",
+          components.userMessages.style,
+          ["framed", "framed-copy-friendly", "compact", "labeled"],
+        ),
+        item(
+          "contextMode",
+          "Tool style",
+          "on = rich cards, compact = one summary per assistant message, off = native.",
+          config.mode,
+          ["on", "compact", "off"],
+        ),
+        item(
+          "diffViewMode",
+          "Diff layout",
+          "Choose automatic, side-by-side, or unified diff layout.",
+          config.diffViewMode,
+          DIFF_VIEW_MODES,
+        ),
+        item(
+          "diffIndicatorMode",
+          "Diff indicator",
+          "Choose bars, classic +/- gutters, or no indicator.",
+          config.diffIndicatorMode,
+          DIFF_INDICATOR_MODES,
+        ),
+        toggle(
+          "diffWordWrap",
+          "Diff word wrap",
+          "Wrap long diff lines to the available terminal width.",
+          config.diffWordWrap,
+        ),
+        item(
+          "thinkingPreviewLines",
+          "Thinking preview",
+          "Number of thinking body lines shown before expansion.",
+          String(config.previewLines),
+          ["0", "1", "3", "5", "10"],
+        ),
+        toggle(
+          "dimThinkingText",
+          "Dim thinking text",
+          "Use the dim theme color for thinking body text.",
+          config.dimThinkingText,
+        ),
+      ];
+    case "features":
+      return [
+        toggle(
+          "enableSessionReference",
+          "Session reference",
+          "Enable @ session search and context injection.",
+          config.enableSessionReference,
+        ),
+        toggle(
+          "enableSubagentAutocomplete",
+          "Subagent autocomplete",
+          "Enable @ subagent completion and delegation hints.",
+          config.enableSubagentAutocomplete,
+        ),
+        toggle(
+          "enableContextCommand",
+          "Context command",
+          "Keep the /context inspection command enabled.",
+          config.enableContextCommand,
+        ),
+        toggle(
+          "enableAgentSummary",
+          "Agent summary",
+          "Show per-turn tool statistics after an agent turn.",
+          config.enableAgentSummary,
+        ),
+        toggle(
+          "enableAliases",
+          "Command aliases",
+          "Register /clear and /exit aliases.",
+          config.enableAliases,
+        ),
+        toggle(
+          "enableEffortCommand",
+          "Effort command",
+          "Register the /effort thinking-level command.",
+          config.enableEffortCommand,
+        ),
+      ];
+    case "presets":
+      return PRESET_VALUES.map((preset) =>
+        item(
+          `preset:${preset}`,
+          preset,
+          preset === "native"
+            ? "Disable custom Editor, Footer, WorkingLine and Context rendering."
+            : preset === "compact"
+              ? "Enable Editor, Footer, WorkingLine and compact Context rendering."
+              : "Enable Editor, Footer, WorkingLine and rich Context rendering.",
+          "apply",
+          ["apply"],
+        ),
+      );
+  }
+}
+
+const descriptions: Record<SectionId, string> = {
+  header: "Header owns startup branding and startup guidance.",
+  context: "Context owns messages, tool cards, diffs, thinking, and summaries.",
+  workingLine: "WorkingLine is the sole owner of Pi's unkeyed working row.",
+  editor: "Editor owns the input editor factory and its styles.",
+  footer: "Footer owns footer rendering and project status segments.",
+  features: "Feature switches are saved immediately and applied after /reload.",
+  presets:
+    "Presets change component settings while preserving detailed options.",
+};
+
+function renderPanelFrame(
+  theme: Theme,
+  width: number,
+  rows: string[],
+): string[] {
+  const safeWidth = Math.max(1, width);
+  const border = (text: string) => theme.fg("border", text);
+  if (safeWidth === 1) {
+    return [border("│"), ...rows.map(() => border("│")), border("│")];
+  }
+  const inner = safeWidth - 2;
+  const content = rows.map(
+    (row) =>
+      `${border("│")}${truncateToWidth(row, inner, "", true)}${border("│")}`,
+  );
+  return [
+    border(`╭${"─".repeat(inner)}╮`),
+    ...content,
+    border(`╰${"─".repeat(inner)}╯`),
+  ];
+}
+
+export type SettingsPanelOptions = {
+  readonly snapshot: () => SettingsSnapshot;
+  readonly change: (id: string, value: string) => void;
+  readonly onError: (error: unknown) => void;
+};
+
+/** 面板负责显示和交互，配置提交与焦点协作由 app 提供。 */
+export function createSettingsPanel(
+  tui: Pick<TUI, "requestRender">,
+  theme: Theme,
+  done: () => void,
+  options: SettingsPanelOptions,
+): Component {
+  let activeIndex = 0;
+  let list: SettingsList;
+  const createList = (): void => {
+    list = new SettingsList(
+      itemsFor(SECTIONS[activeIndex].id, options.snapshot()),
+      10,
+      getSettingsListTheme(),
+      (id, value) => {
+        try {
+          options.change(id, value);
+          list.updateValue(id, value);
+        } catch (error) {
+          options.onError(error);
+          createList();
+          list.selectItem(id);
+        } finally {
+          tui.requestRender();
+        }
+      },
+      done,
+    );
+  };
+  createList();
+  const switchSection = (delta: number): void => {
+    activeIndex = (activeIndex + delta + SECTIONS.length) % SECTIONS.length;
+    createList();
+    tui.requestRender();
+  };
+  return {
+    render(width) {
+      const inner = Math.max(0, width - 2);
+      const section = SECTIONS[activeIndex].id;
+      const tabs = SECTIONS.map((entry, index) =>
+        index === activeIndex
+          ? theme.fg("text", theme.bold(entry.label))
+          : theme.fg("dim", entry.label),
+      ).join(theme.fg("dim", " / "));
+      const config = options.snapshot().shell;
+      const previewWidth = Math.max(20, Math.min(72, inner - 2));
+      const preview =
+        section === "editor"
+          ? [
+              "",
+              theme.fg("muted", "  Editor preview"),
+              ...renderEditorSettingsPreview(config, theme, previewWidth).map(
+                (line) => `  ${line}`,
+              ),
+            ]
+          : section === "context"
+            ? [
+                "",
+                theme.fg("muted", "  User message preview"),
+                ...renderUserMessageSettingsPreview(
+                  config,
+                  theme,
+                  previewWidth,
+                ).map((line) => `  ${line}`),
+              ]
+            : [];
+      return renderPanelFrame(theme, width, [
+        truncateToWidth(tabs, inner),
+        theme.fg("dim", "─".repeat(inner)),
+        theme.fg("muted", `  ${descriptions[section]}`),
+        "",
+        ...list.render(inner),
+        ...preview,
+        "",
+        truncateToWidth(
+          theme.fg(
+            "dim",
+            "  Tab/Shift+Tab switch sections · Enter/Space change · Esc close",
+          ),
+          inner,
+        ),
+      ]);
+    },
+    invalidate: () => list.invalidate(),
+    handleInput(data) {
+      if (data === "\x1b[Z" || matchesKey(data, "shift+tab")) {
+        switchSection(-1);
+      } else if (matchesKey(data, "tab")) {
+        switchSection(1);
+      } else {
+        list.handleInput(data);
+      }
+    },
+  };
+}

package/extensions/{app/commands → layouts/overlay}/settings-previews.ts

@@ -1,10 +1,10 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { renderUserMessageStyle } from "../../layouts/context/message/user-message-styles.ts";
-import { sanitizeEditorMetadataText } from "../../layouts/editor/editor-metadata-format.ts";
-import { renderMinimalistFrame } from "../../layouts/editor/minimalist-editor.ts";
+import type { PolishedTuiConfig } from "../../app/config/shell.ts";
 import { safeThemeFg } from "../../shared/style.ts";
-import type { PolishedTuiConfig } from "../config/shell.ts";
+import { renderUserMessageStyle } from "../context/message/user-message-styles.ts";
+import { sanitizeEditorMetadataText } from "../editor/editor-metadata-format.ts";
+import { renderMinimalistFrame } from "../editor/minimalist-editor.ts";
 
 export const SETTINGS_PREVIEW_MAX_WIDTH = 72;
 export const SETTINGS_PREVIEW_MAX_ROWS = 10;

package/extensions/layouts/working-line/controller.ts

@@ -3,10 +3,7 @@ import type {
   ExtensionContext,
   Theme,
 } from "@earendil-works/pi-coding-agent";
-import type {
-  PolishedTuiConfig,
-  WorkingLineComponentPatch,
-} from "../../app/config/shell.ts";
+import type { PolishedTuiConfig } from "../../app/config/shell.ts";
 import type { SessionLifecycle } from "../../app/runtime/session-lifecycle.ts";
 import {
   InteractionMetricsTracker,
@@ -29,9 +26,6 @@ export type WorkingLineMessageEnd = Parameters<
 export type WorkingLineLayoutContext = {
   readonly pi: ExtensionAPI;
   readonly getConfig: () => PolishedTuiConfig;
-  readonly saveComponent: (
-    patch: WorkingLineComponentPatch,
-  ) => PolishedTuiConfig;
   readonly getTheme: () => Theme;
   readonly sessionLifecycle: SessionLifecycle;
   readonly refresh: () => void;
@@ -223,28 +217,8 @@ export class WorkingLineLayoutController {
     }
   }
 
-  /**
-   * Applies a WorkingLine configuration patch and reconciles the host row.
-   *
-   * @param patch WorkingLine configuration changes to persist.
-   * @param ctx Active Pi extension context.
-   * @returns Whether the host working row accepted the change.
-   */
-  setComponent(
-    patch: WorkingLineComponentPatch,
-    ctx: ExtensionContext,
-  ): { applied: boolean; reason?: string } {
-    this.context.saveComponent(patch);
-    return this.workingLine.reconcile(ctx);
-  }
-
-  /**
-   * Reconciles WorkingLine configuration without changing persisted settings.
-   *
-   * @param ctx Active Pi extension context.
-   * @returns Whether the host working row accepted the change.
-   */
-  reconcile(ctx: ExtensionContext) {
+  /** 应用 app 已提交的 WorkingLine 配置，并返回组件应用结果。 */
+  applyConfig(ctx: ExtensionContext): { applied: boolean; reason?: string } {
     return this.workingLine.reconcile(ctx);
   }
 

package/extensions/layouts/working-line/working-line.ts

@@ -1,4 +1,3 @@
-import { stripVTControlCharacters } from "node:util";
 import { visibleWidth } from "@earendil-works/pi-tui";
 import type {
   ColorSpec,
@@ -7,6 +6,7 @@ import type {
   WorkingLineTextAnimation,
   ZentuiConfig,
 } from "../../app/config/shell.ts";
+import { PI_WORKING_LINE_MESSAGES } from "../../app/config/working-line-messages.ts";
 import { formatCount } from "../../shared/format.ts";
 import {
   isSafeSgrStylePrefix,
@@ -14,30 +14,39 @@ import {
   renderThemeStyleOrFallback,
   type ThemeLike,
 } from "../../shared/style.ts";
-import { PI_WORKING_LINE_MESSAGES } from "./working-line-messages.ts";
+import {
+  normalizeWorkingLineMessage,
+  normalizeWorkingLineMessages,
+  segmentGraphemes,
+  truncateGraphemes,
+} from "../../shared/working-line-text.ts";
 import { WORKING_LINE_SPINNERS } from "./working-line-spinners.ts";
 
+export {
+  MAX_WORKING_LINE_ENTRIES_EXAMINED,
+  MAX_WORKING_LINE_MESSAGE_CELLS,
+  MAX_WORKING_LINE_MESSAGES,
+  MAX_WORKING_LINE_NORMALIZED_CODE_UNITS,
+  MAX_WORKING_LINE_RAW_CODE_UNITS,
+  normalizeWorkingLineMessage,
+  normalizeWorkingLineMessages,
+} from "../../shared/working-line-text.ts";
+
 export { WORKING_LINE_SPINNERS } from "./working-line-spinners.ts";
 
 export const BUILT_IN_WORKING_LINE_MESSAGES = PI_WORKING_LINE_MESSAGES;
 export const WORKING_LINE_FALLBACK_MESSAGE = "Working…";
 
-export const MAX_WORKING_LINE_MESSAGES = 48;
 /** Complete Loader row, including its two margins and Pi's indicator separator. */
 export const MAX_WORKING_LINE_ROW_CELLS = 80;
 /** Indicator payload budget inside the complete Loader row. */
 export const MAX_WORKING_LINE_FRAME_CELLS = MAX_WORKING_LINE_ROW_CELLS - 3;
-export const MAX_WORKING_LINE_MESSAGE_CELLS = 43;
 export const MAX_WORKING_LINE_TOOL_CELLS = 18;
 export const MAX_WORKING_LINE_FRAMES = 1024;
 export const MAX_WORKING_LINE_FRAME_CODE_UNITS = 512 * 1024;
-export const MAX_WORKING_LINE_RAW_CODE_UNITS = 4096;
-/** Keeps combining-rich visible text bounded before it is copied into every animation frame. */
-export const MAX_WORKING_LINE_NORMALIZED_CODE_UNITS = 256;
 /** Three modifiers plus one color are sufficient for each Working-line tier. */
 export const MAX_WORKING_LINE_STYLE_TOKENS = 4;
 export const MAX_WORKING_LINE_STYLE_CODE_UNITS = 48;
-export const MAX_WORKING_LINE_ENTRIES_EXAMINED = 256;
 
 const WORKING_LINE_FALLBACKS: Record<"low" | "mid" | "high", ColorSpec> = {
   low: "dim",
@@ -141,112 +150,6 @@ export class AgentDurationClock {
   }
 }
 
-function segmentGraphemes(value: string): Iterable<string> {
-  try {
-    const Segmenter = Intl.Segmenter;
-    if (typeof Segmenter === "function") {
-      const segments = new Segmenter(undefined, {
-        granularity: "grapheme",
-      }).segment(value);
-      return {
-        *[Symbol.iterator]() {
-          for (const part of segments) yield part.segment;
-        },
-      };
-    }
-  } catch {
-    // Without Intl.Segmenter, treat the complete value as one conservative grapheme.
-  }
-  return [value];
-}
-
-function truncateGraphemes(
-  value: string,
-  maximumCells: number,
-  maximumCodeUnits = Number.POSITIVE_INFINITY,
-): string {
-  let width = 0;
-  let codeUnits = 0;
-  const output: string[] = [];
-  for (const grapheme of segmentGraphemes(value)) {
-    if (width >= maximumCells) break;
-    const nextWidth = visibleWidth(grapheme);
-    if (width + nextWidth > maximumCells) break;
-    if (codeUnits + grapheme.length > maximumCodeUnits) break;
-    output.push(grapheme);
-    width += nextWidth;
-    codeUnits += grapheme.length;
-  }
-  while (output.length > 0 && /^\s+$/u.test(output.at(-1) ?? "")) output.pop();
-  return output.join("");
-}
-
-function boundRawWorkingLineInput(value: string): string {
-  if (value.length <= MAX_WORKING_LINE_RAW_CODE_UNITS) return value;
-  const prefix = value.slice(0, MAX_WORKING_LINE_RAW_CODE_UNITS);
-  const graphemes = [...segmentGraphemes(prefix)];
-  // The last segmented item may be only the prefix of a grapheme that crosses the raw bound.
-  graphemes.pop();
-  return graphemes.join("");
-}
-
-function trimGraphemeWhitespace(value: string): string {
-  const graphemes = [...segmentGraphemes(value)];
-  while (graphemes.length > 0 && /^\s+$/u.test(graphemes[0] ?? ""))
-    graphemes.shift();
-  while (graphemes.length > 0 && /^\s+$/u.test(graphemes.at(-1) ?? ""))
-    graphemes.pop();
-  return graphemes.join("");
-}
-
-function stripC1TerminalSequences(value: string): string {
-  return value
-    .replaceAll(
-      /[\u0090\u0098\u009d\u009e\u009f][\s\S]*?(?:\u0007|\u009c|\x1b\\|$)/g,
-      "",
-    )
-    .replaceAll(/\u009b[0-?]*[ -/]*[@-~]/g, "");
-}
-
-/** Normalize untrusted user-authored text before it can reach Pi's working row. */
-export function normalizeWorkingLineMessage(value: unknown): string {
-  if (typeof value !== "string") return "";
-  const bounded = boundRawWorkingLineInput(value);
-  const withoutTerminalSequences = stripVTControlCharacters(
-    stripC1TerminalSequences(bounded),
-  );
-  const withoutControls = withoutTerminalSequences
-    .replaceAll(/[\u0000-\u001f\u007f-\u009f]/g, " ")
-    .replaceAll(
-      /[\u034f\u061c\u200b\u200e\u200f\u202a-\u202e\u2060\u2066-\u206f]/g,
-      "",
-    );
-  const normalized = trimGraphemeWhitespace(
-    withoutControls.normalize("NFC").replaceAll(/\s+/gu, " "),
-  );
-  const truncated = truncateGraphemes(
-    normalized,
-    MAX_WORKING_LINE_MESSAGE_CELLS,
-    MAX_WORKING_LINE_NORMALIZED_CODE_UNITS,
-  );
-  return visibleWidth(truncated) > 0 ? truncated : "";
-}
-
-export function normalizeWorkingLineMessages(values: unknown): string[] {
-  if (!Array.isArray(values)) return [];
-  const output: string[] = [];
-  const seen = new Set<string>();
-  const examined = Math.min(values.length, MAX_WORKING_LINE_ENTRIES_EXAMINED);
-  for (let index = 0; index < examined; index += 1) {
-    const normalized = normalizeWorkingLineMessage(values[index]);
-    if (!normalized || seen.has(normalized)) continue;
-    seen.add(normalized);
-    output.push(normalized);
-    if (output.length === MAX_WORKING_LINE_MESSAGES) break;
-  }
-  return output;
-}
-
 export function effectiveWorkingLineMessages(
   config: WorkingLineComponentConfig,
 ): string[] {