kankaku-pi 1.0.0

package/src/adapters/panel/kankaku-panel.ts

@@ -0,0 +1,419 @@
+/**
+ * The `/kankaku` overlay panel shell (see odd/tasks/kankaku-panel.md):
+ * title row, current screen body, and a footer hint row that is both a
+ * keyboard legend and (in fullscreen, where mouse events are dispatched —
+ * see the "Verified facts" section of the feature doc) clickable.
+ *
+ * Screens (`screens/root.ts` for P1; `screens/target.ts` etc. in later
+ * tasks) are supplied by the caller through {@link KankakuPanelDeps}; a
+ * screen id with no registered factory renders a "coming soon" placeholder
+ * so navigation stays testable before every screen exists.
+ */
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Component, TUI, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { Key, matchesKey, SelectList, Text, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { SelectItem } from "@earendil-works/pi-tui";
+import { footerHints, navBack, navCurrent, navPush, navRoot, panelTitle, rootMenu } from "../../domain/panel-model.ts";
+import type { PanelHint, PanelNav, PanelScreenId } from "../../domain/panel-model.ts";
+import { buildSelectListTheme } from "./panel-theme.ts";
+
+/** A screen's component factory, given a {@link PanelHost} so it can navigate the panel or trigger a re-render. */
+export type PanelScreenFactory = (host: PanelHost) => Component & { dispose?(): void; searchable?: boolean };
+
+/** What a screen factory can do to the panel that hosts it. */
+export interface PanelHost {
+  tui: TUI;
+  theme: Theme;
+  push(id: PanelScreenId): void;
+  back(): void;
+  close(): void;
+  requestRender(): void;
+  /**
+   * Set (or clear) whether the current body owns a text field (e.g. the
+   * target screen's legacy-label `Input`). While `true`, `q` is forwarded
+   * to the body like any other key instead of closing the panel — so
+   * typing the letter `q` into a text field never closes the overlay. A
+   * screen must reset this to `false` when its text field closes (see
+   * `screens/target.ts`'s legacy-label submenu).
+   */
+  setBodyWantsText(flag: boolean): void;
+  /**
+   * Set (or clear) whether the current body owns Escape (a submenu or text
+   * field is open and must see it before the shell does — e.g. the target
+   * screen's client/project/task submenus, its legacy-label `Input`, or an
+   * `actionItem`'s result view). The shell owns Escape (and left arrow) by
+   * default and pops the current screen itself: it never relies on
+   * pi-tui's `SettingsList`/`SelectList` `onCancel` firing on its own,
+   * since that path does not reliably fire in the real TUI (see
+   * `KankakuPanelComponent#handleInput`). A screen must reset this to
+   * `false` when the thing that captured Escape closes (see
+   * `screens/target.ts` and every `actionItem` call site).
+   */
+  setBodyCapturesEscape(flag: boolean): void;
+}
+
+export interface KankakuPanelDeps {
+  hubConfigured: boolean;
+  screens: Partial<Record<Exclude<PanelScreenId, "root">, PanelScreenFactory>>;
+}
+
+type PanelBody = Component & { dispose?(): void; searchable?: boolean };
+
+interface HintSpan {
+  start: number;
+  end: number;
+}
+
+const HINT_SEPARATOR = " · ";
+
+/**
+ * Below this width the frame (border + one column of inner padding) no
+ * longer leaves room for any content, so `render` falls back to the
+ * unframed layout instead of throwing (see `KankakuPanelComponent#render`).
+ */
+const MIN_FRAME_WIDTH = 8;
+
+/** Columns the frame's left border ("│") and its one column of padding occupy, left of every inner/body row. */
+const FRAME_LEFT_PADDING = 2;
+
+/**
+ * Wraps `content` between the frame's left/right border (`│ ... │`),
+ * padding/truncating it to `innerWidth` first — ANSI-safe, via pi-tui's
+ * `truncateToWidth` (never raw string length; see the module doc).
+ */
+function frameLine(theme: Theme, content: string, innerWidth: number): string {
+  const left = theme.fg("border", "│ ");
+  const right = theme.fg("border", " │");
+  const padded = truncateToWidth(content, innerWidth, "…", true);
+  return `${left}${padded}${right}`;
+}
+
+/**
+ * The framed top border: `╭─ <title> ` then a `─` fill, then `╮`, sized to
+ * `width`. `titleStyled` keeps its own styling (bold/accent, applied by the
+ * caller); it is itself truncated (ANSI-aware) if the title cannot fit.
+ */
+function frameTop(theme: Theme, titleStyled: string, width: number): string {
+  const available = Math.max(0, width - 5); // "╭─ " + " " + "╮"
+  const title = truncateToWidth(titleStyled, available, "…", false);
+  const fillLen = Math.max(0, available - visibleWidth(title));
+  const left = theme.fg("border", "╭─ ");
+  const fill = theme.fg("border", `${"─".repeat(fillLen)}╮`);
+  return `${left}${title} ${fill}`;
+}
+
+/** The framed bottom border: `╰` + a `─` fill + `╯`, sized to `width`. */
+function frameBottom(theme: Theme, width: number): string {
+  return theme.fg("border", `╰${"─".repeat(Math.max(0, width - 2))}╯`);
+}
+
+/** Placeholder body for a screen id with no registered factory yet (P2–P4 fill these in). */
+function comingSoonBody(theme: Theme): PanelBody {
+  return new Text(theme.fg("muted", "coming soon"));
+}
+
+/** Builds one root-menu row per {@link rootMenu} item. */
+function buildRootItems(hubConfigured: boolean): SelectItem[] {
+  return rootMenu({ hubConfigured }).map((item) => ({
+    value: item.id,
+    label: item.label,
+    description: item.description,
+  }));
+}
+
+/**
+ * Render the footer hint line and, alongside it, the clickable column range
+ * of each hint (in local, cell-based coordinates — see
+ * `TuiMouseEvent.x`), so `handleMouse` can hit-test a click without
+ * re-deriving the layout from ANSI-colored text.
+ */
+function renderFooter(hints: PanelHint[], theme: Theme, hoveredIndex: number | undefined): { line: string; spans: HintSpan[] } {
+  let column = 0;
+  let line = "";
+  const spans: HintSpan[] = [];
+
+  hints.forEach((hint, index) => {
+    if (index > 0) {
+      line += theme.fg("muted", HINT_SEPARATOR);
+      column += visibleWidth(HINT_SEPARATOR);
+    }
+    const text = `${hint.key} ${hint.label}`;
+    const start = column;
+    line += index === hoveredIndex ? theme.inverse(text) : `${theme.fg("accent", hint.key)} ${theme.fg("muted", hint.label)}`;
+    column += visibleWidth(text);
+    spans.push({ start, end: column });
+  });
+
+  return { line, spans };
+}
+
+class KankakuPanelComponent implements Component {
+  private readonly tui: TUI;
+  private readonly theme: Theme;
+  private readonly deps: KankakuPanelDeps;
+  private readonly done: (result: void) => void;
+  private readonly host: PanelHost;
+
+  private nav: PanelNav;
+  private body: PanelBody;
+  /** Set via `PanelHost.setBodyWantsText` by a screen that owns a text field (e.g. the target screen's legacy-label `Input`), so `q` types instead of closing. */
+  private bodyWantsText = false;
+  /** Set via `PanelHost.setBodyCapturesEscape` by a screen whose body must see Escape/← itself (an open submenu or text field) before the shell pops the screen. */
+  private bodyCapturesEscape = false;
+  private hints: PanelHint[] = [];
+  private hintSpans: HintSpan[] = [];
+  /** -1 until the first `render()`, so a mouse event that arrives before any render never mismatches row 0 for the footer. */
+  private footerRowIndex = -1;
+  private hoveredHintIndex: number | undefined;
+  /** Whether the last `render()` drew the frame (`width >= MIN_FRAME_WIDTH`) or fell back to the unframed layout. */
+  private framed = false;
+  /** -1 until the first `render()` draws the frame; the absolute row index of the body's first rendered line. */
+  private bodyRowStart = -1;
+  private bodyRowCount = 0;
+  /** The width last passed to `this.body.render(...)` (`width` unframed, `width - 4` framed), for shifted mouse events. */
+  private bodyWidth = 0;
+
+  constructor(tui: TUI, theme: Theme, deps: KankakuPanelDeps, done: (result: void) => void) {
+    this.tui = tui;
+    this.theme = theme;
+    this.deps = deps;
+    this.done = done;
+    this.host = {
+      tui,
+      theme,
+      push: (id) => this.pushScreen(id),
+      back: () => this.goBack(),
+      close: () => this.closePanel(),
+      requestRender: () => this.tui.requestRender(),
+      setBodyWantsText: (flag) => {
+        this.bodyWantsText = flag;
+      },
+      setBodyCapturesEscape: (flag) => {
+        this.bodyCapturesEscape = flag;
+      },
+    };
+    this.nav = navRoot();
+    this.body = this.createBody("root");
+  }
+
+  private createBody(id: PanelScreenId): PanelBody {
+    if (id === "root") {
+      const list = new SelectList(buildRootItems(this.deps.hubConfigured), 10, buildSelectListTheme(this.theme));
+      list.onSelect = (item) => this.pushScreen(item.value as PanelScreenId);
+      list.onCancel = () => this.goBack();
+      return list;
+    }
+
+    const factory = this.deps.screens[id];
+    return factory ? factory(this.host) : comingSoonBody(this.theme);
+  }
+
+  private pushScreen(id: PanelScreenId): void {
+    this.body.dispose?.();
+    this.nav = navPush(this.nav, id);
+    this.body = this.createBody(id);
+    this.bodyWantsText = false;
+    this.bodyCapturesEscape = false;
+    this.hoveredHintIndex = undefined;
+    this.tui.requestRender();
+  }
+
+  private goBack(): void {
+    const { nav, closed } = navBack(this.nav);
+    if (closed) {
+      this.closePanel();
+      return;
+    }
+    this.body.dispose?.();
+    this.nav = nav;
+    this.body = this.createBody(navCurrent(nav));
+    this.bodyWantsText = false;
+    this.bodyCapturesEscape = false;
+    this.hoveredHintIndex = undefined;
+    this.tui.requestRender();
+  }
+
+  private closePanel(): void {
+    this.body.dispose?.();
+    this.done(undefined);
+  }
+
+  invalidate(): void {
+    this.body.invalidate();
+  }
+
+  dispose(): void {
+    this.body.dispose?.();
+  }
+
+  render(width: number): string[] {
+    const screen = navCurrent(this.nav);
+    const titleStyled = this.theme.bold(this.theme.fg("accent", panelTitle(screen)));
+    this.hints = footerHints(screen, { searchable: this.body.searchable ?? false });
+
+    if (width < MIN_FRAME_WIDTH) {
+      return this.renderUnframed(width, titleStyled);
+    }
+    return this.renderFramed(width, titleStyled, screen);
+  }
+
+  /** Legacy, unframed layout: title, body at `width`, footer — used when `width` is too narrow to fit a frame (see `MIN_FRAME_WIDTH`). */
+  private renderUnframed(width: number, titleStyled: string): string[] {
+    this.framed = false;
+    const lines: string[] = [titleStyled, ""];
+
+    const bodyLines = this.body.render(width);
+    this.bodyRowStart = lines.length;
+    this.bodyRowCount = bodyLines.length;
+    this.bodyWidth = width;
+    lines.push(...bodyLines);
+    lines.push("");
+
+    const { line, spans } = renderFooter(this.hints, this.theme, this.hoveredHintIndex);
+    this.hintSpans = spans;
+    this.footerRowIndex = lines.length;
+    lines.push(line);
+
+    return lines;
+  }
+
+  /**
+   * Rounded frame around the panel (see the module's "no padding/border"
+   * feature doc, `odd/tasks/kankaku-panel.md`): a `╭─ <title> ─…─╮` top
+   * border, one blank inner line, the body rendered at `innerWidth`
+   * (`width - 4`), a blank inner line, the footer hints, and a `╰─…─╯`
+   * bottom border. Every inner line is `│ <content> │`.
+   */
+  private renderFramed(width: number, titleStyled: string, screen: PanelScreenId): string[] {
+    this.framed = true;
+    const innerWidth = width - 4;
+    const lines: string[] = [];
+
+    lines.push(frameTop(this.theme, titleStyled, width));
+    lines.push(frameLine(this.theme, "", innerWidth));
+
+    const bodyLines = this.body.render(innerWidth);
+    this.bodyRowStart = lines.length;
+    this.bodyRowCount = bodyLines.length;
+    this.bodyWidth = innerWidth;
+    for (const bodyLine of bodyLines) lines.push(frameLine(this.theme, bodyLine, innerWidth));
+
+    lines.push(frameLine(this.theme, "", innerWidth));
+
+    const { line, spans } = renderFooter(this.hints, this.theme, this.hoveredHintIndex);
+    // The footer's own hit-test spans are local to its (unframed) content;
+    // shift them by the left border + padding so they match the actual
+    // rendered column once wrapped in `frameLine`.
+    this.hintSpans = spans.map((span) => ({ start: span.start + FRAME_LEFT_PADDING, end: span.end + FRAME_LEFT_PADDING }));
+    this.footerRowIndex = lines.length;
+    lines.push(frameLine(this.theme, line, innerWidth));
+
+    lines.push(frameBottom(this.theme, width));
+
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    // The shell owns Escape and left arrow itself; it never relies on
+    // pi-tui's `SettingsList`/`SelectList` calling `onCancel` on its own
+    // (via `getKeybindings().matches(data, "tui.select.cancel")`) — that
+    // path does not reliably fire in the real TUI, which is the bug this
+    // guards against. Only when the current body has explicitly captured
+    // Escape (`PanelHost.setBodyCapturesEscape(true)` — an open submenu or
+    // text field that must see the key itself, e.g. the target screen's
+    // client/project/task submenus or its legacy-label `Input`) is the key
+    // forwarded; otherwise the shell pops the current screen directly.
+    if (matchesKey(data, Key.escape)) {
+      if (this.bodyCapturesEscape) {
+        this.body.handleInput?.(data);
+      } else {
+        this.goBack();
+      }
+      return;
+    }
+    if (matchesKey(data, Key.left)) {
+      if (this.bodyCapturesEscape) {
+        // Translate to the escape sequence so a captured body (which only
+        // ever wires up Escape, not left arrow) closes exactly as it would
+        // on Escape.
+        this.body.handleInput?.("\x1b");
+      } else {
+        this.goBack();
+      }
+      return;
+    }
+    if (data === "q" && !this.bodyWantsText) {
+      this.closePanel();
+      return;
+    }
+    this.body.handleInput?.(data);
+  }
+
+  handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+    if (event.y === this.footerRowIndex) {
+      return this.handleFooterMouse(event);
+    }
+    if (!this.framed) {
+      // Legacy, unframed layout: any non-footer row delegates as-is.
+      return this.body.handleMouse?.(event);
+    }
+    const bodyRowEnd = this.bodyRowStart + this.bodyRowCount;
+    if (event.y < this.bodyRowStart || event.y >= bodyRowEnd) {
+      // Frame border or blank padding row: nothing to delegate to.
+      return undefined;
+    }
+    return this.body.handleMouse?.({
+      ...event,
+      x: event.x - FRAME_LEFT_PADDING,
+      y: event.y - this.bodyRowStart,
+      width: this.bodyWidth,
+    });
+  }
+
+  private handleFooterMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+    const hitIndex = this.hintSpans.findIndex((span) => event.x >= span.start && event.x < span.end);
+
+    if (event.type === "move") {
+      if (hitIndex !== this.hoveredHintIndex) {
+        this.hoveredHintIndex = hitIndex === -1 ? undefined : hitIndex;
+        return { handled: true, render: true };
+      }
+      return { handled: true, render: false };
+    }
+
+    if (event.type === "click" && event.button === "left" && hitIndex !== -1) {
+      const hint = this.hints[hitIndex]!;
+      // "esc" at root, "esc/←" on every other screen (see `footerHints`) —
+      // `goBack()` already closes the panel outright when at root.
+      if (hint.key.startsWith("esc")) {
+        this.goBack();
+        return { handled: true };
+      }
+      if (hint.key === "q") {
+        this.closePanel();
+        return { handled: true };
+      }
+    }
+
+    return { handled: true, render: false };
+  }
+}
+
+/** Builds the panel shell component; see {@link openKankakuPanel} for how it is mounted. */
+export function createPanelComponent(tui: TUI, theme: Theme, deps: KankakuPanelDeps, done: (result: void) => void): Component & { dispose?(): void } {
+  return new KankakuPanelComponent(tui, theme, deps, done);
+}
+
+/**
+ * Opens the `/kankaku` panel as a focused overlay. A no-op when no UI is
+ * attached (print/RPC mode) — the caller (`kankaku-command.ts`) falls back
+ * to the existing report notification in that case.
+ */
+export async function openKankakuPanel(ctx: ExtensionContext, deps: KankakuPanelDeps): Promise<void> {
+  if (!ctx.hasUI) return;
+  await ctx.ui.custom<void>((tui, theme, _keybindings, done) => createPanelComponent(tui, theme, deps, done), {
+    overlay: true,
+    overlayOptions: { width: "80%", minWidth: 64, maxHeight: "80%", anchor: "center" },
+  });
+}

package/src/adapters/panel/panel-items.ts

@@ -0,0 +1,87 @@
+/**
+ * A reusable action row for a panel `SettingsList` screen: its submenu runs
+ * an async action, shows a busy indicator while it runs, then the lines it
+ * returned (or an inline error), and closes back to the row that opened it
+ * on any Enter/Escape. Used by the target screen's "Remember" row (P2) and,
+ * per the feature doc, meant for reuse by the sync/export screens (P4).
+ */
+import type { Component, SettingItem, SettingsListTheme } from "@earendil-works/pi-tui";
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+const PENDING_LINE = "…";
+
+export interface ActionItemOptions {
+  id: string;
+  label: string;
+  description?: string;
+  /** Runs the action and returns the lines to show once it settles. May throw; a thrown error is shown as `error: <message>` instead. */
+  run: () => string[] | Promise<string[]>;
+  /** Called once `run()` settles (success or error), so the caller can re-render — this component has no `host` reference of its own. */
+  onDone?: () => void;
+  /** Called synchronously when the submenu component is created (the action starts running). */
+  onOpen?: () => void;
+  /** Called right before `done(...)` is invoked on close (Enter or Escape), so the caller can, e.g., clear `PanelHost.setBodyCapturesEscape`. */
+  onClose?: () => void;
+}
+
+class ActionItemComponent implements Component {
+  private readonly theme: SettingsListTheme;
+  private readonly options: ActionItemOptions;
+  private readonly done: (selectedValue?: string, options?: { navigateTo?: string }) => void;
+  private lines: string[] = [];
+  private pending = true;
+
+  constructor(
+    theme: SettingsListTheme,
+    options: ActionItemOptions,
+    done: (selectedValue?: string, options?: { navigateTo?: string }) => void,
+  ) {
+    this.theme = theme;
+    this.options = options;
+    this.done = done;
+    this.options.onOpen?.();
+    void this.start();
+  }
+
+  private async start(): Promise<void> {
+    try {
+      this.lines = await this.options.run();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      this.lines = [`error: ${message}`];
+    } finally {
+      this.pending = false;
+      this.options.onDone?.();
+    }
+  }
+
+  invalidate(): void {}
+
+  render(_width: number): string[] {
+    return this.pending ? [this.theme.hint(PENDING_LINE)] : this.lines;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.enter) || matchesKey(data, Key.escape)) {
+      this.options.onClose?.();
+      // Close with NO `navigateTo`: pi-tui's `SettingsList.closeSubmenu`
+      // treats `navigateTo` as "select that row and activate it", and
+      // activating this row opens its submenu again — the result would
+      // reopen and the action re-run on every Enter/Escape, leaving the
+      // user stuck until `q`. Without it the list restores the cursor to
+      // the row that opened the submenu on its own (`submenuItemIndex`).
+      this.done();
+    }
+  }
+}
+
+/** Build a `SettingItem` whose submenu is a busy/result/error view over `options.run`. See the module doc comment. */
+export function actionItem(theme: SettingsListTheme, options: ActionItemOptions): SettingItem {
+  return {
+    id: options.id,
+    label: options.label,
+    currentValue: "",
+    ...(options.description !== undefined ? { description: options.description } : {}),
+    submenu: (_currentValue, done) => new ActionItemComponent(theme, options, done),
+  };
+}

package/src/adapters/panel/panel-lines.ts

@@ -0,0 +1,13 @@
+/**
+ * Bounded, scroll-free line rendering shared by the panel's report and
+ * doctor screens' body area (see odd/tasks/kankaku-panel.md P3): show at
+ * most `maxLines` lines, with a "… N more" footer when the content was
+ * truncated. Plain array/string logic, no pi imports, reused by
+ * `screens/report.ts` and `screens/doctor.ts`.
+ */
+export function renderBoundedLines(lines: string[], maxLines: number): string[] {
+  if (lines.length <= maxLines) return lines;
+  const shown = lines.slice(0, maxLines);
+  const more = lines.length - maxLines;
+  return [...shown, `… ${more} more`];
+}

package/src/adapters/panel/panel-theme.ts

@@ -0,0 +1,32 @@
+/**
+ * Builds pi-tui `SelectListTheme`/`SettingsListTheme` objects from a pi
+ * `Theme` instance, mirroring the role mapping pi's own `/settings`
+ * (`node_modules/@earendil-works/pi-coding-agent/dist/modes/interactive/
+ * theme/theme.js`'s `getSelectListTheme`/`getSettingsListTheme`) uses —
+ * so the panel looks and behaves like every other pi list, without
+ * depending on pi's internal (non-exported-per-extension) theme singleton.
+ */
+import type { SelectListTheme, SettingsListTheme } from "@earendil-works/pi-tui";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+
+/** `SelectListTheme` for the panel's root menu and other select lists. */
+export function buildSelectListTheme(theme: Theme): SelectListTheme {
+  return {
+    selectedPrefix: (text) => theme.fg("accent", text),
+    selectedText: (text) => theme.fg("accent", text),
+    description: (text) => theme.fg("muted", text),
+    scrollInfo: (text) => theme.fg("muted", text),
+    noMatch: (text) => theme.fg("muted", text),
+  };
+}
+
+/** `SettingsListTheme` for screens built on `SettingsList` (e.g. the target screen). */
+export function buildSettingsListTheme(theme: Theme): SettingsListTheme {
+  return {
+    label: (text, selected) => (selected ? theme.fg("accent", text) : text),
+    value: (text, selected) => (selected ? theme.fg("accent", text) : theme.fg("muted", text)),
+    description: (text) => theme.fg("dim", text),
+    cursor: theme.fg("accent", "→ "),
+    hint: (text) => theme.fg("dim", text),
+  };
+}

package/src/adapters/panel/screens/about.ts

@@ -0,0 +1,69 @@
+/**
+ * The `/kankaku` panel's `about` screen (see odd/tasks/kankaku-panel.md):
+ * versions, the resolved `KANKAKU_DIR`, the hub URL, and every env-only
+ * setting, all read-only (no `values`, no `submenu`) — `buildAboutRows`
+ * (`domain/panel-model.ts`) builds the rows; this stays a thin adapter that
+ * maps `KankakuConfig` into that pure input.
+ */
+import type { Component, SettingItem, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { SettingsList } from "@earendil-works/pi-tui";
+import type { KankakuConfig } from "../../../config.ts";
+import { buildAboutRows } from "../../../domain/panel-model.ts";
+import type { PanelHost, PanelScreenFactory } from "../kankaku-panel.ts";
+import { buildSettingsListTheme } from "../panel-theme.ts";
+
+export interface AboutScreenDeps {
+  config: KankakuConfig;
+  kankakuDir: string;
+  agentVersion?: string;
+  pluginVersion?: string;
+  hubUrl?: string;
+}
+
+const MAX_VISIBLE = 10;
+
+class AboutScreenComponent implements Component {
+  readonly searchable = false;
+  private readonly list: SettingsList;
+
+  constructor(deps: AboutScreenDeps, host: PanelHost) {
+    const rows = buildAboutRows({
+      pluginVersion: deps.pluginVersion,
+      agentVersion: deps.agentVersion,
+      kankakuDir: deps.kankakuDir,
+      hubUrl: deps.hubUrl,
+      interactiveTools: deps.config.interactiveTools,
+      segmentRuleCount: deps.config.segmentRules.length,
+      subagentProfileNames: deps.config.subagentProfiles.map((profile) => profile.id),
+      client: deps.config.client,
+    });
+    const items: SettingItem[] = rows.map((row) => ({
+      id: row.id,
+      label: row.label,
+      currentValue: row.value,
+      ...(row.description !== undefined ? { description: row.description } : {}),
+    }));
+    this.list = new SettingsList(items, MAX_VISIBLE, buildSettingsListTheme(host.theme), () => {}, () => host.back(), { enableSearch: false });
+  }
+
+  invalidate(): void {
+    this.list.invalidate();
+  }
+
+  render(width: number): string[] {
+    return this.list.render(width);
+  }
+
+  handleInput(data: string): void {
+    this.list.handleInput(data);
+  }
+
+  handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+    return this.list.handleMouse?.(event);
+  }
+}
+
+/** `openKankakuPanel`'s `screens.about` factory; see {@link AboutScreenDeps}. */
+export function createAboutScreen(deps: AboutScreenDeps): PanelScreenFactory {
+  return (host: PanelHost) => new AboutScreenComponent(deps, host);
+}