@mrclrchtr/supi-settings 4.6.0 → 4.8.0

package/{node_modules/@mrclrchtr/supi-core/src/settings → src/ui}/scoped-settings-list.ts

@@ -1,42 +1,35 @@
-// Scoped settings list component for SuPi settings overlay.
-//
-// Replaces pi-tui's generic SettingsList with a source-aware list that
-// renders source badges, dispatches Enter / Space / action-menu semantics,
-// and delegates custom-field submenus.
+// Source-aware settings list with scope actions and custom submenus.
 
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { Input, Key, matchesKey, truncateToWidth } from "@earendil-works/pi-tui";
+import {
+  Input,
+  Key,
+  matchesKey,
+  truncateToWidth,
+  visibleWidth,
+  wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+import type { SettingsAction, SettingsModule, SettingsScope } from "@mrclrchtr/supi-core/settings";
 import type { ThemeAccessor } from "./settings-action-menu.ts";
 import {
   buildActionMenu,
   createActionMenuComponent,
   getConcreteChoices,
 } from "./settings-action-menu.ts";
-import type { SettingsScope, SettingsSection } from "./settings-registry.ts";
-import type { ScopedFieldValue, SettingsFieldAction } from "./settings-schema.ts";
+import { type LoadedSettingsModule, readSettingsModules } from "./settings-module-reader.ts";
+import { filterSettingsRows, rowsFromModules, type ScopedRow } from "./settings-row-model.ts";
 import { createInputSubmenu, createModelPickerSubmenu } from "./settings-submenus.ts";
 
-// ═══════════════════════════════════════════════════════════════════════════
-// Scoped settings list
-// ═══════════════════════════════════════════════════════════════════════════
-
-interface ScopedRow {
-  flatId: string;
-  sectionLabel: string;
-  field: ScopedFieldValue;
-}
-
 interface SubmenuState {
   component: {
     render: (w: number) => string[];
     invalidate?: () => void;
     handleInput?: (data: string) => void;
   };
-  onDone: () => void;
 }
 
 export class ScopedSettingsList {
-  private sections: SettingsSection[];
+  private modules: SettingsModule[];
   private scope: SettingsScope;
   private cwd: string;
   private ctx: ExtensionContext | undefined;
@@ -49,12 +42,14 @@ export class ScopedSettingsList {
   private submenu: SubmenuState | null = null;
   private searchInput?: Input;
   private searchQuery = "";
+  private actionPending = false;
   private cachedWidth?: number;
   private cachedLines?: string[];
 
   // biome-ignore lint/complexity/useMaxParams: component constructor needs all dependencies upfront for immutable wiring
   constructor(
-    sections: SettingsSection[],
+    modules: SettingsModule[],
+    initial: LoadedSettingsModule[],
     scope: SettingsScope,
     cwd: string,
     ctx: ExtensionContext | undefined,
@@ -63,7 +58,7 @@ export class ScopedSettingsList {
     onCancel: () => void,
     onError?: (message: string) => void,
   ) {
-    this.sections = sections;
+    this.modules = modules;
     this.scope = scope;
     this.cwd = cwd;
     this.ctx = ctx;
@@ -71,16 +66,30 @@ export class ScopedSettingsList {
     this.tui = tui;
     this.onCancel = onCancel;
     this.onError = onError;
-    this.rebuildRows();
+    this.rebuildRows(initial);
   }
 
-  reload(scope: SettingsScope, cwd: string, ctx?: ExtensionContext): void {
+  async reload(scope: SettingsScope, cwd: string, ctx?: ExtensionContext): Promise<void> {
     this.scope = scope;
     this.cwd = cwd;
     this.ctx = ctx;
-    this.rebuildRows();
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.rows.length - 1));
-    this.invalidate();
+    this.actionPending = true;
+    try {
+      await this.refreshRows();
+      this.selectedIndex = Math.min(
+        this.selectedIndex,
+        Math.max(0, this.filteredRows().length - 1),
+      );
+    } finally {
+      this.actionPending = false;
+      this.invalidate();
+      this.tui.requestRender();
+    }
+  }
+
+  /** Return true while a setting editor, action menu, or persistence action owns input. */
+  hasOpenSubmenu(): boolean {
+    return this.submenu !== null || this.actionPending;
   }
 
   invalidate(): void {
@@ -100,6 +109,7 @@ export class ScopedSettingsList {
     return this.cachedLines;
   }
 
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: One pass handles filtering, grouping, selection, scrolling, and descriptions.
   private renderList(width: number): string[] {
     const lines: string[] = [];
     if (this.searchInput) {
@@ -118,39 +128,61 @@ export class ScopedSettingsList {
       lines.push(this.renderHint(width));
       return lines;
     }
-    const maxVisible = Math.min(displayRows.length + 2, 20);
+    const maxVisible = Math.min(displayRows.length, 10);
     const start = Math.max(
       0,
       Math.min(this.selectedIndex - Math.floor(maxVisible / 2), displayRows.length - maxVisible),
     );
     const end = Math.min(start + maxVisible, displayRows.length);
+    const maxLabelWidth = Math.min(
+      30,
+      Math.max(...displayRows.map((row) => visibleWidth(row.field.field.label))),
+    );
+    let previousSection: string | undefined;
     for (let i = start; i < end; i++) {
       const row = displayRows[i];
       if (!row) continue;
+      if (row.moduleLabel !== previousSection) {
+        lines.push(
+          truncateToWidth(`  ${this.theme.fg("muted", this.theme.bold(row.moduleLabel))}`, width),
+        );
+        previousSection = row.moduleLabel;
+      }
       const isSelected = i === this.selectedIndex;
-      const prefix = isSelected ? "› " : "  ";
-      const section = this.theme.fg("dim", `${row.sectionLabel}: `);
-      const label = isSelected
-        ? this.theme.fg("accent", row.field.field.label)
-        : this.theme.fg("text", row.field.field.label);
-      lines.push(truncateToWidth(`${prefix}${section}${label}  ${row.field.displayValue}`, width));
+      const prefix = isSelected ? `  ${this.theme.fg("accent", "→ ")}` : "    ";
+      const label = row.field.field.label.padEnd(
+        row.field.field.label.length + maxLabelWidth - visibleWidth(row.field.field.label),
+      );
+      const labelText = this.theme.fg(isSelected ? "accent" : "text", label);
+      const valueWidth = Math.max(0, width - 4 - maxLabelWidth - 2);
+      const value = truncateToWidth(row.field.displayValue, valueWidth, "");
+      const valueText = this.theme.fg(isSelected ? "accent" : "muted", value);
+      lines.push(truncateToWidth(`${prefix}${labelText}  ${valueText}`, width));
     }
     if (start > 0 || end < displayRows.length) {
       lines.push(this.theme.fg("dim", `  (${this.selectedIndex + 1}/${displayRows.length})`));
     }
+    const description = displayRows[this.selectedIndex]?.field.field.description;
+    if (description) {
+      lines.push("");
+      for (const line of wrapTextWithAnsi(description, Math.max(1, width - 4))) {
+        lines.push(this.theme.fg("dim", `  ${line}`));
+      }
+    }
     lines.push("");
     lines.push(this.renderHint(width));
     return lines;
   }
 
-  private renderHint(_width: number): string {
+  private renderHint(width: number): string {
     const hints = [];
     if (this.searchInput) hints.push("Type to search");
-    hints.push("Enter actions", "Space cycle", "Esc close");
-    return this.theme.fg("dim", hints.join(" · "));
+    hints.push("Enter for actions", "Space to cycle", "Tab for scope", "Esc to close");
+    return truncateToWidth(this.theme.fg("dim", hints.join(" · ")), width);
   }
 
   handleInput(data: string): void {
+    if (this.actionPending) return;
     if (this.submenu) {
       this.submenu.component.handleInput?.(data);
       this.invalidate();
@@ -208,29 +240,22 @@ export class ScopedSettingsList {
     if (!this.searchInput) this.searchInput = new Input();
   }
 
-  private rebuildRows(): void {
-    const rows: ScopedRow[] = [];
-    for (const section of this.sections) {
-      for (const value of section.loadValues(this.scope, this.cwd, this.ctx)) {
-        rows.push({
-          flatId: `${section.id}.${value.field.key}`,
-          sectionLabel: section.label,
-          field: value,
-        });
-      }
-    }
-    this.rows = rows;
+  private rebuildRows(loaded: LoadedSettingsModule[]): void {
+    this.rows = rowsFromModules(loaded);
+  }
+
+  private async refreshRows(): Promise<void> {
+    const result = await readSettingsModules(this.modules, {
+      scope: this.scope,
+      cwd: this.cwd,
+      ctx: this.ctx,
+    });
+    this.rebuildRows(result.loaded);
+    for (const error of result.errors) this.onError?.(error);
   }
 
   private filteredRows(): ScopedRow[] {
-    if (!this.searchQuery) return this.rows;
-    const q = this.searchQuery.toLowerCase();
-    return this.rows.filter(
-      (r) =>
-        r.field.field.label.toLowerCase().includes(q) ||
-        r.field.field.key.toLowerCase().includes(q) ||
-        r.field.displayValue.toLowerCase().includes(q),
-    );
+    return filterSettingsRows(this.rows, this.searchQuery);
   }
 
   private activateSelected(): void {
@@ -242,11 +267,6 @@ export class ScopedSettingsList {
     if (menu.length === 0) return;
     this.submenu = {
       component: createActionMenuComponent(menu, this.doneAction(row), this.theme),
-      onDone: () => {
-        this.submenu = null;
-        this.invalidate();
-        this.tui.requestRender();
-      },
     };
     this.invalidate();
     this.tui.requestRender();
@@ -260,10 +280,8 @@ export class ScopedSettingsList {
         this.tui.requestRender();
         return;
       }
-      if (action === "inherit") {
-        this.dispatchAction(row.flatId, { kind: "inherit" });
-      } else if (action === "resetToDefault") {
-        this.dispatchAction(row.flatId, { kind: "resetToDefault" });
+      if (action === "inherit" || action === "resetToDefault") {
+        this.dispatchAction(row.flatId, { kind: "unset" });
       } else if (action === "edit") {
         this.openFreeInputSubmenu(row);
       } else if (action.startsWith("set:")) {
@@ -295,7 +313,7 @@ export class ScopedSettingsList {
           if (selectedValue !== undefined) {
             this.dispatchAction(row.flatId, { kind: "set", value: selectedValue });
           } else {
-            this.reload(this.scope, this.cwd, this.ctx);
+            void this.reload(this.scope, this.cwd, this.ctx);
           }
           this.invalidate();
           this.tui.requestRender();
@@ -304,15 +322,7 @@ export class ScopedSettingsList {
         this.cwd,
         this.ctx,
       );
-      this.submenu = {
-        component: comp,
-        onDone: () => {
-          this.submenu = null;
-          this.reload(this.scope, this.cwd, this.ctx);
-          this.invalidate();
-          this.tui.requestRender();
-        },
-      };
+      this.submenu = { component: comp };
     } else if (row.field.field.kind === "modelPicker") {
       this.submenu = {
         component: createModelPickerSubmenu(
@@ -326,11 +336,6 @@ export class ScopedSettingsList {
           this.ctx,
           row.field.field,
         ),
-        onDone: () => {
-          this.submenu = null;
-          this.invalidate();
-          this.tui.requestRender();
-        },
       };
     } else {
       const label =
@@ -344,30 +349,44 @@ export class ScopedSettingsList {
           this.invalidate();
           this.tui.requestRender();
         }),
-        onDone: () => {
-          this.submenu = null;
-          this.invalidate();
-          this.tui.requestRender();
-        },
       };
     }
     this.invalidate();
     this.tui.requestRender();
   }
 
-  private dispatchAction(flatId: string, action: SettingsFieldAction): void {
+  private dispatchAction(flatId: string, action: SettingsAction): void {
+    void this.runAction(flatId, action);
+  }
+
+  private async runAction(flatId: string, action: SettingsAction): Promise<void> {
     const dotIndex = flatId.indexOf(".");
     if (dotIndex === -1) return;
-    const sectionId = flatId.slice(0, dotIndex);
+    const moduleId = flatId.slice(0, dotIndex);
     const fieldKey = flatId.slice(dotIndex + 1);
-    const section = this.sections.find((s) => s.id === sectionId);
-    if (!section) return;
+    const module = this.modules.find((candidate) => candidate.id === moduleId);
+    if (!module) return;
+
+    this.actionPending = true;
     try {
-      section.handleAction(this.scope, this.cwd, fieldKey, action, this.ctx);
+      const result = await module.apply({
+        scope: this.scope,
+        cwd: this.cwd,
+        ctx: this.ctx,
+        fieldKey,
+        action,
+      });
+      if (result?.notice) {
+        this.ctx?.ui.notify(result.notice.message, result.notice.level);
+      }
+      await this.refreshRows();
     } catch (err) {
       this.onError?.(err instanceof Error ? err.message : String(err));
+      await this.refreshRows();
+    } finally {
+      this.actionPending = false;
+      this.invalidate();
+      this.tui.requestRender();
     }
-    this.reload(this.scope, this.cwd, this.ctx);
-    this.tui.requestRender();
   }
 }

package/{node_modules/@mrclrchtr/supi-core/src/settings → src/ui}/settings-action-menu.ts

@@ -5,8 +5,7 @@
 
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { Container, type SelectItem, SelectList, Text } from "@earendil-works/pi-tui";
-import type { SettingsScope } from "./settings-registry.ts";
-import type { ScopedFieldValue, SettingsField } from "./settings-schema.ts";
+import type { ScopedFieldValue, SettingsField, SettingsScope } from "@mrclrchtr/supi-core/settings";
 
 /** Theme accessor type matching the TUI custom() theme parameter. */
 export type ThemeAccessor = Parameters<Parameters<ExtensionContext["ui"]["custom"]>[0]>[1];

package/src/ui/settings-module-reader.ts

@@ -0,0 +1,36 @@
+import type {
+  SettingsContext,
+  SettingsModule,
+  SettingsSnapshot,
+} from "@mrclrchtr/supi-core/settings";
+
+export interface LoadedSettingsModule {
+  module: SettingsModule;
+  snapshot: SettingsSnapshot;
+}
+
+export interface SettingsReadResult {
+  loaded: LoadedSettingsModule[];
+  errors: string[];
+}
+
+/** Read independent settings modules without hiding successful modules when one fails. */
+export async function readSettingsModules(
+  modules: SettingsModule[],
+  context: SettingsContext,
+): Promise<SettingsReadResult> {
+  const results = await Promise.all(
+    modules.map(async (module) => {
+      try {
+        return { loaded: { module, snapshot: await module.read(context) } };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return { error: `${module.label}: ${message}` };
+      }
+    }),
+  );
+  return {
+    loaded: results.flatMap((result) => (result.loaded ? [result.loaded] : [])),
+    errors: results.flatMap((result) => (result.error ? [result.error] : [])),
+  };
+}

package/src/ui/settings-row-model.ts

@@ -0,0 +1,30 @@
+import type { ScopedFieldValue } from "@mrclrchtr/supi-core/settings";
+import type { LoadedSettingsModule } from "./settings-module-reader.ts";
+
+export interface ScopedRow {
+  flatId: string;
+  moduleLabel: string;
+  field: ScopedFieldValue;
+}
+
+export function rowsFromModules(loaded: LoadedSettingsModule[]): ScopedRow[] {
+  return loaded.flatMap(({ module, snapshot }) =>
+    snapshot.rows.map((field) => ({
+      flatId: `${module.id}.${field.field.key}`,
+      moduleLabel: module.label,
+      field,
+    })),
+  );
+}
+
+export function filterSettingsRows(rows: ScopedRow[], query: string): ScopedRow[] {
+  if (!query) return rows;
+  const normalized = query.toLowerCase();
+  return rows.filter(
+    (row) =>
+      row.moduleLabel.toLowerCase().includes(normalized) ||
+      row.field.field.label.toLowerCase().includes(normalized) ||
+      row.field.field.key.toLowerCase().includes(normalized) ||
+      row.field.displayValue.toLowerCase().includes(normalized),
+  );
+}

package/{node_modules/@mrclrchtr/supi-core/src/settings → src/ui}/settings-submenus.ts

@@ -13,8 +13,8 @@ import {
   SelectList,
   Text,
 } from "@earendil-works/pi-tui";
-import { getSelectableModels } from "../model-selection.ts";
-import type { ModelPickerField } from "./settings-schema.ts";
+import { getSelectableModels } from "@mrclrchtr/supi-core/model-selection";
+import type { ModelPickerField } from "@mrclrchtr/supi-core/settings";
 
 /**
  * Creates a pi-tui Input-backed submenu component with enter-to-confirm

package/{node_modules/@mrclrchtr/supi-core/src/settings → src/ui}/settings-ui.ts

@@ -1,21 +1,19 @@
-// Declarative settings overlay for SuPi extensions.
-//
-// Thin orchestration layer that collects settings contributions and opens the
-// scoped settings list inside a pi-tui custom component overlay.
+// Declarative settings screen for SuPi extensions.
 
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+  DynamicBorder,
+  type ExtensionAPI,
+  type ExtensionContext,
+} from "@earendil-works/pi-coding-agent";
 import { Container, Key, matchesKey, Text } from "@earendil-works/pi-tui";
-import { ScopedSettingsList } from "./scoped-settings-list.ts";
-import type { SettingsCollectionDiagnostic, SettingsScope } from "./settings-registry.ts";
 import {
   createSettingsContributionCollector,
+  type SettingsCollectionDiagnostic,
+  type SettingsScope,
   SUPI_SETTINGS_COLLECT_EVENT,
-} from "./settings-registry.ts";
-
-// Re-export submenu helpers
-export { createInputSubmenu, createModelPickerSubmenu } from "./settings-submenus.ts";
-
-// ── Overlay ────────────────────────────────────────────────────────────────
+} from "@mrclrchtr/supi-core/settings";
+import { ScopedSettingsList } from "./scoped-settings-list.ts";
+import { readSettingsModules } from "./settings-module-reader.ts";
 
 interface OverlayStatus {
   kind: "warning" | "error";
@@ -28,11 +26,7 @@ interface OverlayState {
   status?: OverlayStatus;
 }
 
-function getScopeLabel(scope: SettingsScope): string {
-  return scope === "project" ? "Project" : "Global";
-}
-
-function collectSettingsSections(pi: ExtensionAPI) {
+function collectSettingsModules(pi: ExtensionAPI) {
   const collector = createSettingsContributionCollector();
   pi.events.emit(SUPI_SETTINGS_COLLECT_EVENT, collector);
   return collector.result();
@@ -43,23 +37,32 @@ function latestStatus(diagnostics: SettingsCollectionDiagnostic[]): OverlayStatu
   return latest ? { kind: latest.kind, message: latest.message } : undefined;
 }
 
-export function openSettingsOverlay(pi: ExtensionAPI, ctx: ExtensionContext): void {
-  const collection = collectSettingsSections(pi);
-  if (collection.sections.length === 0) {
+export async function openSettingsOverlay(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
+  const collection = collectSettingsModules(pi);
+  if (collection.modules.length === 0) {
     ctx.ui.notify("No settings registered by SuPi extensions", "info");
     return;
   }
 
+  const initial = await readSettingsModules(collection.modules, {
+    scope: "project",
+    cwd: ctx.cwd,
+    ctx,
+  });
+  const initialError = initial.errors.at(-1);
   void ctx.ui.custom<void>((tui, theme, _kb, done) => {
     const state: OverlayState = {
       scope: "project",
       cwd: ctx.cwd,
-      status: latestStatus(collection.diagnostics),
+      status: initialError
+        ? { kind: "error", message: initialError }
+        : latestStatus(collection.diagnostics),
     };
 
     const container = new Container();
     const scopedList = new ScopedSettingsList(
-      collection.sections,
+      collection.modules,
+      initial.loaded,
       state.scope,
       state.cwd,
       ctx,
@@ -76,35 +79,41 @@ export function openSettingsOverlay(pi: ExtensionAPI, ctx: ExtensionContext): vo
 
     const rebuildOverlay = () => {
       container.clear();
-      const scopeLabel = getScopeLabel(state.scope);
-      const otherScope = state.scope === "project" ? "Global" : "Project";
+      const scope = (label: string, value: SettingsScope) =>
+        value === state.scope
+          ? theme.fg("accent", theme.bold(`[${label}]`))
+          : theme.fg("dim", label);
+      container.addChild(new DynamicBorder((text: string) => theme.fg("borderMuted", text)));
       container.addChild(
         new Text(
-          `${theme.fg("accent", theme.bold("SuPi Settings"))}  ${theme.fg("text", `Scope: ${scopeLabel}`)} ${theme.fg("dim", `(tab → ${otherScope})`)}`,
-          0,
+          `${theme.fg("accent", theme.bold("SuPi Settings"))}  ${theme.fg("dim", "Scope")}  ${scope("Project", "project")}  ${scope("Global", "global")}`,
+          1,
           0,
         ),
       );
       if (state.status) {
-        container.addChild(new Text(theme.fg(state.status.kind, state.status.message), 0, 0));
+        container.addChild(new Text(theme.fg(state.status.kind, state.status.message), 1, 0));
       }
+      container.addChild(scopedList);
+      container.addChild(new DynamicBorder((text: string) => theme.fg("borderMuted", text)));
     };
 
     rebuildOverlay();
 
     const component = {
-      render: (width: number) => [...container.render(width), ...scopedList.render(width)],
+      render: (width: number) => container.render(width),
       invalidate: () => {
+        rebuildOverlay();
         container.invalidate();
-        scopedList.invalidate();
       },
       handleInput: (data: string) => {
-        if (matchesKey(data, Key.tab)) {
+        if (matchesKey(data, Key.tab) && !scopedList.hasOpenSubmenu()) {
           state.scope = state.scope === "project" ? "global" : "project";
           state.status = undefined;
-          scopedList.reload(state.scope, state.cwd, ctx);
-          rebuildOverlay();
-          tui.requestRender();
+          void scopedList.reload(state.scope, state.cwd, ctx).then(() => {
+            rebuildOverlay();
+            tui.requestRender();
+          });
           return true;
         }
         scopedList.handleInput(data);