kankaku 0.6.0 → 0.7.0

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

@@ -0,0 +1,274 @@
+/**
+ * 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, 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;
+}
+
+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 = " · ";
+
+/** 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;
+  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;
+
+  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;
+      },
+    };
+    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.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.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 lines: string[] = [];
+    lines.push(this.theme.bold(this.theme.fg("accent", panelTitle(screen))));
+    lines.push("");
+    lines.push(...this.body.render(width));
+    lines.push("");
+
+    this.hints = footerHints(screen, { searchable: this.body.searchable ?? false });
+    const { line, spans } = renderFooter(this.hints, this.theme, this.hoveredHintIndex);
+    this.hintSpans = spans;
+    this.footerRowIndex = lines.length;
+    lines.push(line);
+
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.escape)) {
+      // Forward escape to the body when it can handle input itself (a real
+      // `SettingsList`/`SelectList`-backed screen): pi-tui's own
+      // `SettingsList.handleInput`/`SelectList.handleInput` already close an
+      // open submenu on escape and fall through to the body's own
+      // `onCancel` only once no submenu remains — wired to `host.back()` by
+      // every real screen (the root `SelectList`, the target screen). Only
+      // a body with no `handleInput` at all (the placeholder "coming soon"
+      // `Text`, or a read-only note like the subagent target screen) has no
+      // way to react, so the shell pops the stack itself in that case.
+      if (this.body.handleInput) {
+        this.body.handleInput(data);
+      } 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);
+    }
+    return this.body.handleMouse?.(event);
+  }
+
+  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]!;
+      if (hint.key === "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,77 @@
+/**
+ * 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;
+}
+
+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;
+    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)) {
+      // Keep the cursor on the row that opened this action — the caller
+      // (the enclosing SettingsList) restores selection to it by id.
+      this.done(undefined, { navigateTo: this.options.id });
+    }
+  }
+}
+
+/** 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);
+}

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

@@ -0,0 +1,85 @@
+/**
+ * The `/kankaku` panel's `doctor` screen (see odd/tasks/kankaku-panel.md):
+ * renders `buildDoctorLines`' output (the exact lines `/kankaku doctor`
+ * shows) in a bounded body, with `pin`/`refresh` actions.
+ */
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { Component, SettingsListTheme, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { SettingsList } from "@earendil-works/pi-tui";
+import { buildDoctorLines } from "../../kankaku-command.ts";
+import type { KankakuCommandDeps, KankakuReportData } from "../../kankaku-command.ts";
+import type { PanelHost, PanelScreenFactory } from "../kankaku-panel.ts";
+import { actionItem } from "../panel-items.ts";
+import { renderBoundedLines } from "../panel-lines.ts";
+import { buildSettingsListTheme } from "../panel-theme.ts";
+
+export interface DoctorScreenDeps {
+  commandDeps: KankakuCommandDeps;
+  ctx: ExtensionContext;
+  pinReport: (report: KankakuReportData) => void;
+}
+
+const MAX_VISIBLE = 4;
+const MAX_BODY_LINES = 14;
+
+class DoctorScreenComponent implements Component {
+  readonly searchable = false;
+  private readonly deps: DoctorScreenDeps;
+  private readonly host: PanelHost;
+  private readonly settingsTheme: SettingsListTheme;
+  private lines: string[];
+  private list: SettingsList;
+
+  constructor(deps: DoctorScreenDeps, host: PanelHost) {
+    this.deps = deps;
+    this.host = host;
+    this.settingsTheme = buildSettingsListTheme(host.theme);
+    this.lines = buildDoctorLines(deps.commandDeps, deps.ctx);
+    this.list = this.buildList();
+  }
+
+  private buildList(): SettingsList {
+    const items = [
+      actionItem(this.settingsTheme, {
+        id: "pin",
+        label: "Pin to chat",
+        run: () => {
+          this.deps.pinReport({ title: "doctor", lines: this.lines });
+          return ["pinned to the chat transcript"];
+        },
+        onDone: () => this.host.requestRender(),
+      }),
+      actionItem(this.settingsTheme, {
+        id: "refresh",
+        label: "Refresh",
+        run: () => {
+          this.lines = buildDoctorLines(this.deps.commandDeps, this.deps.ctx);
+          return ["refreshed"];
+        },
+        onDone: () => this.host.requestRender(),
+      }),
+    ];
+    return new SettingsList(items, MAX_VISIBLE, this.settingsTheme, () => {}, () => this.host.back(), { enableSearch: false });
+  }
+
+  invalidate(): void {
+    this.list.invalidate();
+  }
+
+  render(width: number): string[] {
+    return [...this.list.render(width), "", ...renderBoundedLines(this.lines, MAX_BODY_LINES)];
+  }
+
+  handleInput(data: string): void {
+    this.list.handleInput(data);
+  }
+
+  handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+    return this.list.handleMouse?.(event);
+  }
+}
+
+/** `openKankakuPanel`'s `screens.doctor` factory; see {@link DoctorScreenDeps}. */
+export function createDoctorScreen(deps: DoctorScreenDeps): PanelScreenFactory {
+  return (host: PanelHost) => new DoctorScreenComponent(deps, host);
+}

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

@@ -0,0 +1,119 @@
+/**
+ * The `/kankaku` panel's `export` screen (see odd/tasks/kankaku-panel.md
+ * P4): `Format`/`Range` rows plus a `Write file` action that computes the
+ * export content through the exact same `buildExportContent`
+ * (`adapters/report-views.ts`) `/kankaku export` uses, so the panel and the
+ * subcommand can never drift. `Pin to chat` pins a short note of the last
+ * write (or the current selection, before anything has been written).
+ */
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { Component, SettingItem, SettingsListTheme, TuiMouseEvent, TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { SettingsList } from "@earendil-works/pi-tui";
+import type { KankakuReportData } from "../../kankaku-command.ts";
+import { buildExportContent } from "../../report-views.ts";
+import type { WorkLog } from "../../../ports/work-log.ts";
+import type { PanelHost, PanelScreenFactory } from "../kankaku-panel.ts";
+import { actionItem } from "../panel-items.ts";
+import { buildSettingsListTheme } from "../panel-theme.ts";
+
+export interface ExportScreenDeps {
+  log: WorkLog;
+  /**
+   * Write an export file (name, content) under the kankaku dir and return
+   * its absolute path — the same dep `/kankaku export` uses. When absent,
+   * `Write file` reports the exact message the subcommand gives today
+   * ("export is not configured").
+   */
+  writeExportFile?: (name: string, content: string) => string;
+  ctx: ExtensionContext;
+  pinReport: (report: KankakuReportData) => void;
+}
+
+type ExportFormat = "csv" | "json";
+type ExportRange = "today" | "all";
+
+const FORMAT_VALUES: ExportFormat[] = ["csv", "json"];
+const RANGE_VALUES: ExportRange[] = ["today", "all"];
+const MAX_VISIBLE = 4;
+const EXPORT_NOT_CONFIGURED = "export is not configured";
+
+class ExportScreenComponent implements Component {
+  readonly searchable = false;
+  private readonly deps: ExportScreenDeps;
+  private readonly host: PanelHost;
+  private readonly settingsTheme: SettingsListTheme;
+  private format: ExportFormat = "csv";
+  private range: ExportRange = "today";
+  private lastNote = "nothing written yet";
+  private list: SettingsList;
+
+  constructor(deps: ExportScreenDeps, host: PanelHost) {
+    this.deps = deps;
+    this.host = host;
+    this.settingsTheme = buildSettingsListTheme(host.theme);
+    this.list = this.buildList();
+  }
+
+  private buildList(): SettingsList {
+    const items: SettingItem[] = [
+      { id: "format", label: "Format", currentValue: this.format, values: FORMAT_VALUES },
+      { id: "range", label: "Range", currentValue: this.range, values: RANGE_VALUES },
+      actionItem(this.settingsTheme, {
+        id: "write",
+        label: "Write file",
+        run: () => {
+          if (!this.deps.writeExportFile) {
+            throw new Error(EXPORT_NOT_CONFIGURED);
+          }
+          const { name, content } = buildExportContent(this.deps.log.readAll(), { format: this.format, all: this.range === "all" });
+          const path = this.deps.writeExportFile(name, content);
+          this.lastNote = `wrote ${path}`;
+          return [this.lastNote];
+        },
+        onDone: () => this.host.requestRender(),
+      }),
+      actionItem(this.settingsTheme, {
+        id: "pin",
+        label: "Pin to chat",
+        run: () => {
+          this.deps.pinReport({ title: "export", lines: [this.lastNote] });
+          return ["pinned to the chat transcript"];
+        },
+        onDone: () => this.host.requestRender(),
+      }),
+    ];
+    return new SettingsList(items, MAX_VISIBLE, this.settingsTheme, (id, value) => this.onChange(id, value), () => this.host.back(), {
+      enableSearch: false,
+    });
+  }
+
+  private onChange(id: string, value: string): void {
+    if (id === "format") this.format = value as ExportFormat;
+    else if (id === "range") this.range = value as ExportRange;
+
+    this.list = this.buildList();
+    this.list.selectItem(id);
+    this.host.requestRender();
+  }
+
+  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.export` factory; see {@link ExportScreenDeps}. */
+export function createExportScreen(deps: ExportScreenDeps): PanelScreenFactory {
+  return (host: PanelHost) => new ExportScreenComponent(deps, host);
+}