pi-one-ui 0.1.1 → 0.2.1

package/extensions/app/panel.ts

@@ -1,26 +1,30 @@
-import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
+import {
+  type ExtensionCommandContext,
+  type ExtensionContext,
+  getSettingsListTheme,
+} from "@earendil-works/pi-coding-agent";
 import {
   matchesKey,
   type SettingItem,
   SettingsList,
   truncateToWidth,
 } from "@earendil-works/pi-tui";
-import type { ShellRuntimeController } from "../shell/index.ts";
 import {
   renderEditorSettingsPreview,
   renderUserMessageSettingsPreview,
-} from "../shell/settings-previews.ts";
-import type { TranscriptRuntimeController } from "../transcript/index.ts";
+} from "./commands/settings-previews.ts";
 import {
   type CompactStyleMode,
+  type Config as ContextConfig,
   DIFF_INDICATOR_MODES,
   DIFF_VIEW_MODES,
-  type Config as RendererConfig,
   config as rendererConfig,
-  updateConfig as updateRendererConfig,
+  updateConfig as updateContextConfig,
 } from "./config/renderer.ts";
 import {
+  type EditorComponentConfig,
   type EditorStyle,
+  type FooterComponentConfig,
   type FooterStyle,
   loadConfig as loadShellConfig,
   saveEditorComponentPatch,
@@ -28,8 +32,11 @@ import {
   saveUserMessagesComponentPatch,
   saveWorkingLineComponentPatch,
   type UserMessageStyle,
+  type UserMessagesComponentConfig,
+  type WorkingLineComponentPatch,
   type WorkingLineSpinner,
 } from "./config/shell.ts";
+import { overlayManager } from "./overlay/overlay-manager.ts";
 import { ownerFor } from "./ownership.ts";
 import { applyPreset, PRESET_VALUES, type Preset } from "./presets.ts";
 
@@ -56,8 +63,11 @@ const WORKING_SPINNERS: WorkingLineSpinner[] = [
 const PREVIEW_LINES = ["0", "1", "3", "5", "10"];
 
 const SECTIONS = [
-  { id: "shell", label: "Shell" },
-  { id: "renderer", label: "Renderer" },
+  { 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;
@@ -75,12 +85,38 @@ function renderTabs(theme: any, active: number, width: number): string {
   return truncateToWidth(text, Math.max(0, width));
 }
 
+/** Adds a stable chrome frame around the settings content. */
+function renderPanelFrame(theme: any, 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 innerWidth = safeWidth - 2;
+  const content = rows.map(
+    (row) =>
+      `${border("│")}${truncateToWidth(row, innerWidth, "", true)}${border("│")}`,
+  );
+  if (safeWidth === 2) return [border("╭╮"), ...content, border("╰╯")];
+  return [
+    border(`╭${"─".repeat(innerWidth)}╮`),
+    ...content,
+    border(`╰${"─".repeat(innerWidth)}╯`),
+  ];
+}
+
 function sectionDescription(section: SectionId): string {
   switch (section) {
-    case "shell":
-      return `${ownerFor("editor")} owns the editor, user messages, working line, and footer.`;
-    case "renderer":
-      return `${ownerFor("toolRenderer")} owns tool cards, rich diffs, thinking, and transcript layout.`;
+    case "header":
+      return "Header owns startup branding and startup guidance.";
+    case "context":
+      return `${ownerFor("toolRenderer")} owns messages, tool cards, diffs, thinking, and summaries.`;
+    case "workingLine":
+      return "WorkingLine is the sole owner of Pi's unkeyed working row.";
+    case "editor":
+      return `${ownerFor("editor")} owns the input editor factory and its styles.`;
+    case "footer":
+      return `${ownerFor("footer")} owns footer rendering and project status segments.`;
     case "features":
       return "Feature switches are saved immediately and applied after /reload.";
     case "presets":
@@ -88,13 +124,16 @@ function sectionDescription(section: SectionId): string {
   }
 }
 
-function shellItems(): SettingItem[] {
+/**
+ * Builds settings owned by the Editor layout.
+ */
+function editorItems(): SettingItem[] {
   const config = loadShellConfig();
   return [
     {
       id: "editorEnabled",
       label: "Editor",
-      description: "Enable Zentui's custom input editor.",
+      description: "Enable the custom input editor.",
       currentValue: onOff(config.components.editor.enabled),
       values: ["on", "off"],
     },
@@ -105,24 +144,19 @@ function shellItems(): SettingItem[] {
       currentValue: config.components.editor.style,
       values: EDITOR_STYLES,
     },
-    {
-      id: "userMessagesEnabled",
-      label: "User messages",
-      description: "Enable custom rendering for previous user messages.",
-      currentValue: onOff(config.components.userMessages.enabled),
-      values: ["on", "off"],
-    },
-    {
-      id: "userMessagesStyle",
-      label: "Message style",
-      description: "Choose the previous user message treatment.",
-      currentValue: config.components.userMessages.style,
-      values: MESSAGE_STYLES,
-    },
+  ];
+}
+
+/**
+ * Builds settings owned by the WorkingLine layout.
+ */
+function workingLineItems(): SettingItem[] {
+  const config = loadShellConfig();
+  return [
     {
       id: "workingLineEnabled",
       label: "Working line",
-      description: "Zentui is the sole owner of Pi's working row.",
+      description: "Enable the sole owner of Pi's working row.",
       currentValue: onOff(config.components.workingLine.enabled),
       values: ["on", "off"],
     },
@@ -133,6 +167,15 @@ function shellItems(): SettingItem[] {
       currentValue: config.components.workingLine.spinner,
       values: WORKING_SPINNERS,
     },
+  ];
+}
+
+/**
+ * Builds settings owned by the Footer layout.
+ */
+function footerItems(): SettingItem[] {
+  const config = loadShellConfig();
+  return [
     {
       id: "footerStyle",
       label: "Footer",
@@ -143,10 +186,28 @@ function shellItems(): SettingItem[] {
   ];
 }
 
-function rendererItems(config: RendererConfig): SettingItem[] {
+/**
+ * Builds settings owned by the Context layout.
+ */
+function contextItems(config: ContextConfig): SettingItem[] {
+  const shellConfig = loadShellConfig();
   return [
     {
-      id: "rendererMode",
+      id: "userMessagesEnabled",
+      label: "User messages",
+      description: "Enable custom rendering for previous user messages.",
+      currentValue: onOff(shellConfig.components.userMessages.enabled),
+      values: ["on", "off"],
+    },
+    {
+      id: "userMessagesStyle",
+      label: "Message style",
+      description: "Choose the previous user message treatment.",
+      currentValue: shellConfig.components.userMessages.style,
+      values: MESSAGE_STYLES,
+    },
+    {
+      id: "contextMode",
       label: "Tool style",
       description:
         "on = rich cards, compact = one summary per assistant message, off = native.",
@@ -191,7 +252,25 @@ function rendererItems(config: RendererConfig): SettingItem[] {
   ];
 }
 
-function featureItems(config: RendererConfig): SettingItem[] {
+/**
+ * Builds settings owned by the Header layout.
+ */
+function headerItems(config: ContextConfig): SettingItem[] {
+  return [
+    {
+      id: "showStartupHeader",
+      label: "Startup header",
+      description: "Show the custom startup header on new sessions.",
+      currentValue: onOff(config.showStartupHeader),
+      values: ["on", "off"],
+    },
+  ];
+}
+
+/**
+ * Builds non-visual feature switches.
+ */
+function featureItems(config: ContextConfig): SettingItem[] {
   return [
     {
       id: "enableSessionReference",
@@ -228,13 +307,6 @@ function featureItems(config: RendererConfig): SettingItem[] {
       currentValue: onOff(config.enableAliases),
       values: ["on", "off"],
     },
-    {
-      id: "showStartupHeader",
-      label: "Startup header",
-      description: "Show CC Style's startup header on new sessions.",
-      currentValue: onOff(config.showStartupHeader),
-      values: ["on", "off"],
-    },
   ];
 }
 
@@ -244,10 +316,10 @@ function presetItems(): SettingItem[] {
     label: preset,
     description:
       preset === "balanced"
-        ? "Zentui shell + rich CC Style tool renderer."
+        ? "Zentui shell + rich CC Style context renderer."
         : preset === "compact"
-          ? "Zentui shell + compact CC Style transcript."
-          : "Disable custom shell and transcript rendering.",
+          ? "Zentui shell + compact CC Style context."
+          : "Disable custom shell and context rendering.",
     currentValue: "apply",
     values: ["apply"],
   }));
@@ -255,10 +327,16 @@ function presetItems(): SettingItem[] {
 
 function itemsFor(section: SectionId): SettingItem[] {
   switch (section) {
-    case "shell":
-      return shellItems();
-    case "renderer":
-      return rendererItems(rendererConfig);
+    case "header":
+      return headerItems(rendererConfig);
+    case "context":
+      return contextItems(rendererConfig);
+    case "workingLine":
+      return workingLineItems();
+    case "editor":
+      return editorItems();
+    case "footer":
+      return footerItems();
     case "features":
       return featureItems(rendererConfig);
     case "presets":
@@ -270,12 +348,38 @@ function isOn(value: string): boolean {
   return value === "on";
 }
 
+export type TuiPanelRuntime = {
+  setEditorComponent: (
+    patch: Partial<EditorComponentConfig>,
+    ctx: ExtensionContext,
+  ) => { applied: boolean; reason?: string };
+  setUserMessagesComponent: (
+    patch: Partial<UserMessagesComponentConfig>,
+    ctx: ExtensionContext,
+  ) => void;
+  setWorkingLineComponent: (
+    patch: WorkingLineComponentPatch,
+    ctx: ExtensionContext,
+  ) => { applied: boolean; reason?: string };
+  setFooterComponent: (
+    patch: Partial<FooterComponentConfig>,
+    ctx: ExtensionContext,
+  ) => void;
+  setContextMode: (mode: CompactStyleMode, ctx: ExtensionContext) => void;
+  updateContextConfig: (
+    patch: Partial<ContextConfig>,
+    ctx: ExtensionContext,
+  ) => void;
+};
+
 type UnifiedPanelDeps = {
-  shell?: ShellRuntimeController;
-  renderer?: TranscriptRuntimeController;
+  runtime?: TuiPanelRuntime;
 };
 
-function renderShellPreview(theme: any, width: number): string[] {
+/**
+ * Renders the Editor layout preview for the settings panel.
+ */
+function renderEditorPreview(theme: any, width: number): string[] {
   const config = loadShellConfig();
   const previewWidth = Math.max(20, Math.min(72, width - 2));
   return [
@@ -284,6 +388,16 @@ function renderShellPreview(theme: any, width: number): string[] {
     ...renderEditorSettingsPreview(config, theme, previewWidth).map(
       (line) => `  ${line}`,
     ),
+  ];
+}
+
+/**
+ * Renders the Context layout User Message preview for the settings panel.
+ */
+function renderContextPreview(theme: any, width: number): string[] {
+  const config = loadShellConfig();
+  const previewWidth = Math.max(20, Math.min(72, width - 2));
+  return [
     "",
     theme.fg("muted", "  User message preview"),
     ...renderUserMessageSettingsPreview(config, theme, previewWidth).map(
@@ -299,6 +413,14 @@ function saveNotice(ctx: any, label: string, value: string): void {
   );
 }
 
+/**
+ * Persists one panel setting and reconciles its owning runtime layout.
+ *
+ * @param id Stable settings item identifier.
+ * @param value Selected settings value.
+ * @param ctx Active Pi extension context.
+ * @param deps Live runtime controllers available to the panel.
+ */
 function updateSetting(
   id: string,
   value: string,
@@ -306,22 +428,22 @@ function updateSetting(
   deps: UnifiedPanelDeps,
 ): void {
   if (id === "editorEnabled") {
-    if (deps.shell)
-      deps.shell.setEditorComponent({ enabled: isOn(value) }, ctx);
+    if (deps.runtime)
+      deps.runtime.setEditorComponent({ enabled: isOn(value) }, ctx);
     else saveEditorComponentPatch({ enabled: isOn(value) });
     saveNotice(ctx, "Editor", value);
     return;
   }
   if (id === "editorStyle" && EDITOR_STYLES.includes(value as EditorStyle)) {
-    if (deps.shell)
-      deps.shell.setEditorComponent({ style: value as EditorStyle }, ctx);
+    if (deps.runtime)
+      deps.runtime.setEditorComponent({ style: value as EditorStyle }, ctx);
     else saveEditorComponentPatch({ style: value as EditorStyle });
     saveNotice(ctx, "Editor style", value);
     return;
   }
   if (id === "userMessagesEnabled") {
-    if (deps.shell)
-      deps.shell.setUserMessagesComponent({ enabled: isOn(value) }, ctx);
+    if (deps.runtime)
+      deps.runtime.setUserMessagesComponent({ enabled: isOn(value) }, ctx);
     else saveUserMessagesComponentPatch({ enabled: isOn(value) });
     saveNotice(ctx, "User messages", value);
     return;
@@ -330,8 +452,8 @@ function updateSetting(
     id === "userMessagesStyle" &&
     MESSAGE_STYLES.includes(value as UserMessageStyle)
   ) {
-    if (deps.shell)
-      deps.shell.setUserMessagesComponent(
+    if (deps.runtime)
+      deps.runtime.setUserMessagesComponent(
         { style: value as UserMessageStyle },
         ctx,
       );
@@ -340,8 +462,8 @@ function updateSetting(
     return;
   }
   if (id === "workingLineEnabled") {
-    if (deps.shell)
-      deps.shell.setWorkingLineComponent({ enabled: isOn(value) }, ctx);
+    if (deps.runtime)
+      deps.runtime.setWorkingLineComponent({ enabled: isOn(value) }, ctx);
     else saveWorkingLineComponentPatch({ enabled: isOn(value) });
     saveNotice(ctx, "Working line", value);
     return;
@@ -350,8 +472,8 @@ function updateSetting(
     id === "workingLineSpinner" &&
     WORKING_SPINNERS.includes(value as WorkingLineSpinner)
   ) {
-    if (deps.shell)
-      deps.shell.setWorkingLineComponent(
+    if (deps.runtime)
+      deps.runtime.setWorkingLineComponent(
         { spinner: value as WorkingLineSpinner },
         ctx,
       );
@@ -361,22 +483,23 @@ function updateSetting(
     return;
   }
   if (id === "footerStyle" && FOOTER_STYLES.includes(value as FooterStyle)) {
-    if (deps.shell)
-      deps.shell.setFooterComponent({ style: value as FooterStyle }, ctx);
+    if (deps.runtime)
+      deps.runtime.setFooterComponent({ style: value as FooterStyle }, ctx);
     else saveFooterComponentPatch({ style: value as FooterStyle });
     saveNotice(ctx, "Footer", value);
     return;
   }
-  if (id === "rendererMode") {
-    if (deps.renderer) deps.renderer.setMode(value as CompactStyleMode, ctx);
-    else updateRendererConfig({ mode: value as CompactStyleMode });
+  if (id === "contextMode") {
+    if (deps.runtime)
+      deps.runtime.setContextMode(value as CompactStyleMode, ctx);
+    else updateContextConfig({ mode: value as CompactStyleMode });
     saveNotice(ctx, "Tool style", value);
     return;
   }
   if (id === "diffViewMode" && DIFF_VIEW_MODES.includes(value as never)) {
-    const patch = { diffViewMode: value as RendererConfig["diffViewMode"] };
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    const patch = { diffViewMode: value as ContextConfig["diffViewMode"] };
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, "Diff layout", value);
     return;
   }
@@ -385,31 +508,31 @@ function updateSetting(
     DIFF_INDICATOR_MODES.includes(value as never)
   ) {
     const patch = {
-      diffIndicatorMode: value as RendererConfig["diffIndicatorMode"],
+      diffIndicatorMode: value as ContextConfig["diffIndicatorMode"],
     };
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, "Diff indicator", value);
     return;
   }
   if (id === "diffWordWrap") {
     const patch = { diffWordWrap: isOn(value) };
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, "Diff word wrap", value);
     return;
   }
   if (id === "thinkingPreviewLines") {
     const patch = { previewLines: Number(value) };
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, "Thinking preview", value);
     return;
   }
   if (id === "dimThinkingText") {
     const patch = { dimThinkingText: isOn(value) };
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, "Thinking text", value);
     return;
   }
@@ -421,9 +544,9 @@ function updateSetting(
     id === "enableAliases" ||
     id === "showStartupHeader"
   ) {
-    const patch = { [id]: isOn(value) } as Partial<RendererConfig>;
-    if (deps.renderer) deps.renderer.updateConfig(patch, ctx);
-    else updateRendererConfig(patch);
+    const patch = { [id]: isOn(value) } as Partial<ContextConfig>;
+    if (deps.runtime) deps.runtime.updateContextConfig(patch, ctx);
+    else updateContextConfig(patch);
     saveNotice(ctx, id, value);
     return;
   }
@@ -431,8 +554,8 @@ function updateSetting(
     const preset = id.slice("preset:".length);
     if (PRESET_VALUES.includes(preset as Preset)) {
       applyPreset(preset as Preset);
-      if (deps.renderer) {
-        deps.renderer.setMode(
+      if (deps.runtime) {
+        deps.runtime.setContextMode(
           preset === "compact" ? "compact" : preset === "native" ? "off" : "on",
           ctx,
         );
@@ -445,8 +568,14 @@ function updateSetting(
 
 let unifiedPanelOpen = false;
 
+/**
+ * Opens the unified settings panel as a managed overlay.
+ *
+ * @param ctx Active TUI extension context.
+ * @param deps Runtime controllers used for live updates.
+ */
 export async function showOneUiPanel(
-  ctx: any,
+  ctx: ExtensionCommandContext,
   deps: UnifiedPanelDeps = {},
 ): Promise<void> {
   if (
@@ -464,68 +593,111 @@ export async function showOneUiPanel(
 
   unifiedPanelOpen = true;
   try {
-    await ctx.ui.custom(
-      (tui: any, theme: any, _keybindings: any, done: () => void) => {
-        let activeIndex = 0;
-        let list: SettingsList;
-        const createList = () => {
-          list = new SettingsList(
-            itemsFor(SECTIONS[activeIndex].id),
-            10,
-            getSettingsListTheme(),
-            (id, value) => {
-              updateSetting(id, value, ctx, deps);
-              list.updateValue(id, value);
-              tui.requestRender();
-            },
-            done,
-          );
-        };
-        createList();
-
-        const switchSection = (delta: number) => {
-          activeIndex =
-            (activeIndex + delta + SECTIONS.length) % SECTIONS.length;
+    let panelHandle: { focus: () => void } | undefined;
+    await overlayManager.run(() =>
+      ctx.ui.custom(
+        (tui, theme, _keybindings, done) => {
+          let activeIndex = 0;
+          let list: SettingsList;
+          const createList = () => {
+            list = new SettingsList(
+              itemsFor(SECTIONS[activeIndex].id),
+              10,
+              getSettingsListTheme(),
+              (id, value) => {
+                // Replacing Pi's editor synchronously moves focus away from
+                // this overlay. Restore the overlay handle after the editor
+                // has been reconciled so the panel remains interactive.
+                if (id === "editorEnabled") {
+                  try {
+                    updateSetting(id, value, ctx, deps);
+                    list.updateValue(id, value);
+                  } catch (error) {
+                    ctx.ui?.notify?.(
+                      `Could not update Editor setting: ${error instanceof Error ? error.message : String(error)}`,
+                      "error",
+                    );
+                  } finally {
+                    panelHandle?.focus();
+                    tui.requestRender();
+                  }
+                  return;
+                }
+                updateSetting(id, value, ctx, deps);
+                list.updateValue(id, value);
+                tui.requestRender();
+              },
+              () => done(undefined),
+            );
+          };
           createList();
-          tui.requestRender();
-        };
 
-        return {
-          render: (width: number) => [
-            renderTabs(theme, activeIndex, width),
-            theme.fg("dim", "─".repeat(Math.max(0, width))),
-            theme.fg(
-              "muted",
-              `  ${sectionDescription(SECTIONS[activeIndex].id)}`,
-            ),
-            "",
-            ...list.render(width),
-            ...(SECTIONS[activeIndex].id === "shell"
-              ? renderShellPreview(theme, width)
-              : []),
-            "",
-            truncateToWidth(
-              theme.fg(
-                "dim",
-                "  Tab/Shift+Tab switch sections · Enter/Space change · Esc close",
-              ),
-              width,
-            ),
-          ],
-          invalidate: () => list.invalidate(),
-          handleInput: (data: string) => {
-            if (data === "\x1b[Z" || matchesKey(data, "shift+tab")) {
-              switchSection(-1);
-              return;
-            }
-            if (matchesKey(data, "tab")) {
-              switchSection(1);
-              return;
-            }
-            list.handleInput(data);
+          const switchSection = (delta: number) => {
+            activeIndex =
+              (activeIndex + delta + SECTIONS.length) % SECTIONS.length;
+            createList();
+            tui.requestRender();
+          };
+
+          return {
+            render: (width: number) => {
+              const contentWidth = Math.max(0, width - 2);
+              return renderPanelFrame(theme, width, [
+                renderTabs(theme, activeIndex, contentWidth),
+                theme.fg("dim", "─".repeat(contentWidth)),
+                theme.fg(
+                  "muted",
+                  `  ${sectionDescription(SECTIONS[activeIndex].id)}`,
+                ),
+                "",
+                ...list.render(contentWidth),
+                ...(SECTIONS[activeIndex].id === "editor"
+                  ? renderEditorPreview(theme, contentWidth)
+                  : SECTIONS[activeIndex].id === "context"
+                    ? renderContextPreview(theme, contentWidth)
+                    : []),
+                "",
+                truncateToWidth(
+                  theme.fg(
+                    "dim",
+                    "  Tab/Shift+Tab switch sections · Enter/Space change · Esc close",
+                  ),
+                  contentWidth,
+                ),
+              ]);
+            },
+            invalidate: () => list.invalidate(),
+            handleInput: (data: string) => {
+              if (data === "\x1b[Z" || matchesKey(data, "shift+tab")) {
+                switchSection(-1);
+                return;
+              }
+              if (matchesKey(data, "tab")) {
+                switchSection(1);
+                return;
+              }
+              list.handleInput(data);
+            },
+          };
+        },
+        {
+          overlay: true,
+          overlayOptions: {
+            anchor: "top-center",
+            width: "85%",
+            maxHeight: "90%",
+            margin: {
+              top: 10,
+              right: 1,
+              bottom: 1,
+              left: 1,
+            },
+          },
+          onHandle: (handle: { focus: () => void }) => {
+            panelHandle = handle;
           },
-        };
-      },
+        },
+      ),
     );
   } finally {
     unifiedPanelOpen = false;