@visual-z/xeno 0.4.0 → 0.6.0

package/src/store/user-settings.ts

@@ -0,0 +1,30 @@
+/** One read/modify/replace owner prevents automatic selections from racing other settings (Q.25). */
+import { readFile } from "node:fs/promises";
+import { settingsPath } from "./config.ts";
+import { atomicWrite } from "./atomic.ts";
+import { serialized } from "./serial.ts";
+
+async function readSettings(path: string): Promise<Record<string, unknown>> {
+  let text: string;
+  try { text = await readFile(path, "utf8"); }
+  catch (error) {
+    if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") return {};
+    throw error;
+  }
+  let value: unknown;
+  try { value = JSON.parse(text); }
+  catch { throw new Error(`${path} is not valid JSON; repair it before saving settings`); }
+  if (value === null || typeof value !== "object" || Array.isArray(value)) throw new Error(`${path} must contain a settings object`);
+  return value as Record<string, unknown>;
+}
+
+export function editUserSettings(edit: (previous: Record<string, unknown>) => Record<string, unknown> | null): Promise<void> {
+  // Capture the destination before any await, including when another profile changes configDir().
+  const path = settingsPath();
+  // Packages and resource overrides already coordinate this file through serialized().
+  return serialized(path, async () => {
+    const next = edit(await readSettings(path));
+    if (next === null) return;
+    await atomicWrite(path, `${JSON.stringify(next, null, 2)}\n`);
+  });
+}

package/src/tui/ui/control-panel.ts

@@ -1,5 +1,5 @@
 /** View-only data: apps owns the projection and actions, as required by D20. */
-import { clipText } from "./edge.ts";
+import { wrapPlain } from "../diff.ts";
 
 export type ControlPanelModel = {
   thread: string; turn: string | null; goal: string; status: string; execution: string; gaps: readonly string[];
@@ -10,14 +10,16 @@ export type ControlTab = "goal" | "progress" | "context";
 export type ControlFocus = "messages" | "omitted" | "history";
 
 export function controlPanelLines(model: ControlPanelModel, tab: ControlTab, width: number, focus: ControlFocus = "messages"): string[] {
-  const lines = [`${tab === "goal" ? "●" : "○"} Goal    ${tab === "progress" ? "●" : "○"} Progress    ${tab === "context" ? "●" : "○"} Context Lens`, "",
-    ...(tab === "goal" ? [model.goal, `Goal: ${model.status}`, `Execution: ${model.execution}`, "", ...model.gaps,
+  const lines = tab === "goal" ? [model.goal, `Goal: ${model.status}`, `Execution: ${model.execution}`, "", ...model.gaps,
       ...model.checks, "", `Thread ${model.thread}`, `Turn ${model.turn ?? "none"}`]
       : tab === "progress" ? ["Evidence for this request", ...model.progress.map(item => `${item.label}: ${item.count}`), "",
         "Counts describe observations, not a completion percentage.", ...model.checks,
         ...model.progress.flatMap(item => item.sources.map(source => `${item.label}: ${source}`))]
       : focus === "messages" ? ["Actual model context · ←/→ change lens", ...model.context]
         : focus === "omitted" ? ["Not replayed as messages · ←/→ change lens", ...(model.omitted.length ? model.omitted : ["No omitted events in this segment."])]
-          : ["Handoff retention and recovery · ←/→ change lens", ...(model.history.length ? model.history : ["No carried history in this segment."])])];
-  return lines.map(line => clipText(line.replace(/[\x00-\x1f\x7f-\x9f]/g, " "), Math.max(1, width)));
+          : ["Handoff retention and recovery · ←/→ change lens", ...(model.history.length ? model.history : ["No carried history in this segment."])];
+  // Unlike status chrome, evidence is inspectable content: every character must
+  // remain reachable by scrolling, including long source paths and CJK (Q24).
+  // A one-cell pane cannot show a wide glyph; its owner shows resize feedback.
+  return lines.flatMap(line => wrapPlain(line.replace(/[\x00-\x1f\x7f-\x9f]/g, " "), Math.max(2, width)));
 }

package/src/tui/ui/control-sidebar.ts

@@ -0,0 +1,49 @@
+/** Persistent view state only; the controller supplies evidence and owns actions (D20/Q24). */
+import { controlPanelLines, type ControlFocus, type ControlPanelModel, type ControlTab } from "./control-panel.ts";
+import { clipText } from "./edge.ts";
+import type { Line } from "./status.ts";
+
+const TABS: readonly ControlTab[] = ["goal", "progress", "context"];
+const LENSES: readonly ControlFocus[] = ["messages", "omitted", "history"];
+/** Below these assumed view-only limits, show reversible size feedback instead of unreadable controls. */
+const MIN_CONTENT_COLUMNS = 16, MIN_CONTENT_ROWS = 8;
+
+export class ControlSidebar {
+  model: ControlPanelModel | undefined;
+  tab: ControlTab = "goal";
+  lens: ControlFocus = "messages";
+  private readonly offsets = new Map<string, number>();
+  private shownOffset = 0;
+  private pageRows = 1;
+  private maxOffset = 0;
+
+  private get page(): string { return this.tab === "context" ? `${this.tab}:${this.lens}` : this.tab; }
+
+  changeTab(delta: number): void { this.tab = TABS[(TABS.indexOf(this.tab) + delta + TABS.length) % TABS.length]!; }
+  changeLens(delta: number): void { this.lens = LENSES[(LENSES.indexOf(this.lens) + delta + LENSES.length) % LENSES.length]!; }
+  scroll(delta: number, page = false): void {
+    this.offsets.set(this.page, Math.max(0, Math.min(this.maxOffset, this.shownOffset + delta * (page ? this.pageRows : 1))));
+  }
+  edge(end: boolean): void { this.offsets.set(this.page, end ? this.maxOffset : 0); }
+
+  rows(width: number, height: number, focused: boolean): readonly Line[] {
+    const w = Math.max(0, Math.floor(width)), h = Math.max(0, Math.floor(height));
+    if (w === 0 || h === 0) return [];
+    const row = (text: string, role: "text" | "muted" | "accent" = "text", bold = false): Line => [{ text: clipText(text, w), role, bold }];
+    if (w < MIN_CONTENT_COLUMNS || h < MIN_CONTENT_ROWS) {
+      // Do not reset the model, tab or desired scroll position: resize is reversible.
+      return [row(w < 6 ? "↔" : "Resize for control", "accent"), row("Esc editor · q close", "muted")].slice(0, h);
+    }
+    const tabs = TABS.map(tab => `${tab === this.tab ? "●" : "○"} ${tab === "context" ? "Context Lens" : tab === "goal" ? "Goal" : "Progress"}`);
+    const heading = [row(`Control panel · ${focused ? "focused" : "F6 focus"}`, "accent", true), row(`${tabs[0]}  ${tabs[1]}`), row(tabs[2]!)];
+    const hints = ["Tab sections · ←→ lenses", "r refresh · i stop · a accept", "Esc editor · q close · F6"];
+    this.pageRows = Math.max(1, h - heading.length - hints.length - 1);
+    const body = this.model ? controlPanelLines(this.model, this.tab, w, this.lens) : ["Evidence unavailable.", "Press r to refresh."];
+    this.maxOffset = Math.max(0, body.length - this.pageRows);
+    this.shownOffset = Math.min(this.maxOffset, this.offsets.get(this.page) ?? 0);
+    const shown = body.slice(this.shownOffset, this.shownOffset + this.pageRows).map(text => row(text));
+    while (shown.length < this.pageRows) shown.push(row(""));
+    const range = `${this.shownOffset + 1}–${Math.min(body.length, this.shownOffset + this.pageRows)}/${body.length}`;
+    return [...heading, ...shown, row(`↑↓ PgUp/PgDn · ${range}`, "muted"), ...hints.map(text => row(text, "muted"))];
+  }
+}

package/src/tui/ui/screen.ts

@@ -23,9 +23,11 @@ import { Canvas } from "./canvas.ts";
 import type { UiColors } from "./colors.ts";
 import { Composer, draftMaxLines } from "./composer.ts";
 import { DialogHost } from "./dialog.ts";
+import type { ControlPanelModel, ControlTab } from "./control-panel.ts";
+import { ControlSidebar } from "./control-sidebar.ts";
 import { clipSegs, edgeLine, segsWidth, type Label, type Seg } from "./edge.ts";
-import type { Bindings } from "./keys.ts";
-import { screenLayout, type ScreenLayout } from "./layout.ts";
+import type { Bindings, KeyPress } from "./keys.ts";
+import { screenLayout, sidebarContentWidth, type ScreenLayout } from "./layout.ts";
 import { greetingLines, mascotFrame, MASCOT_FRAME_MS, MASCOT_FRAMES, type Greeting } from "./mascot.ts";
 import { MessageList, type MessageFeatures } from "./messages.ts";
 import { Motion } from "./motion.ts";
@@ -84,6 +86,12 @@ export class Screen {
   private readonly bottomEdge: Canvas;
   private readonly sidebar: BoxRenderable;
   private readonly sidebarRows: Canvas;
+  private readonly middle: BoxRenderable;
+  private readonly messagesArea: BoxRenderable;
+  private readonly controlView = new ControlSidebar();
+  private controlShown = false;
+  private controlHasFocus = false;
+  onControlAction: ((action: "refresh" | "interrupt" | "accept") => void) | undefined;
   private shape: ScreenLayout;
   private sidebarWanted = true;
   private status: StatusModel | undefined;
@@ -118,9 +126,11 @@ export class Screen {
     const root = new BoxRenderable(renderer, { id: "root", flexDirection: "column", width: "100%", height: "100%" });
     this.topbar = new Canvas(renderer, { id: "topbar", height: 1, flexShrink: 0, marginLeft: 1, marginRight: 1, colors });
     const middle = new BoxRenderable(renderer, { id: "middle", flexDirection: "row", flexGrow: 1, flexShrink: 1 });
+    this.middle = middle;
     const main = new BoxRenderable(renderer, { id: "main", flexDirection: "column", flexGrow: 1, flexShrink: 1 });
     this.greeting = new Canvas(renderer, { id: "greeting", height: 3, flexShrink: 0, marginTop: 1, marginLeft: 3, marginBottom: 1, colors });
     const area = new BoxRenderable(renderer, { id: "messages-area", flexDirection: "column", flexGrow: 1, flexShrink: 1 });
+    this.messagesArea = area;
     this.messages = new MessageList(renderer, colors, features, this.glyph);
     area.add(this.messages.scroll);
     this.pill = new Canvas(renderer, { id: "pill", position: "absolute", zIndex: 40, visible: false, height: 1, width: 1, bottom: 0, right: 3, colors });
@@ -140,16 +150,26 @@ export class Screen {
     this.bottomEdge = new Canvas(renderer, { id: "dock-bottom", height: 1, flexShrink: 0, colors });
     this.dock.add(this.topEdge); this.dock.add(this.body); this.dock.add(this.bottomEdge);
     main.add(this.greeting); main.add(area); main.add(this.above); main.add(this.dock);
-    this.sidebar = new BoxRenderable(renderer, { id: "sidebar", flexShrink: 0, border: ["left"], borderColor: colors.line, paddingLeft: 1, paddingRight: 1, paddingTop: 1, flexDirection: "column" });
+    this.sidebar = new BoxRenderable(renderer, { id: "sidebar", flexShrink: 0, border: ["left"], borderColor: colors.line, paddingLeft: 1, paddingRight: 1, paddingTop: 1, flexDirection: "column", overflow: "hidden", backgroundColor: colors.background });
     this.sidebarRows = new Canvas(renderer, { id: "sidebar-rows", flexGrow: 1, colors });
+    this.sidebarRows.onSizeChange = () => this.paintStatus();
+    this.sidebar.onMouseDown = () => { if (this.controlShown && !this.dialogs.open) this.focusControl(); };
     this.sidebar.add(this.sidebarRows);
     middle.add(main); middle.add(this.sidebar);
     root.add(this.topbar); root.add(middle);
     renderer.root.add(root);
     this.dialogs = new DialogHost(renderer, colors, bindings, slot, () => this.dialogRows(), this.glyph);
     this.dialogs.onOpened = () => { this.composer.setCompletion(undefined); this.composer.area.blur(); this.composer.row.visible = false; this.paintAttachments(); this.layout(); };
-    this.dialogs.onClosed = () => { this.composer.row.visible = true; this.paintAttachments(); this.layout(); this.composer.focus(); };
+    this.dialogs.onClosed = () => {
+      this.composer.row.visible = true; this.paintAttachments(); this.layout();
+      // Dialogs temporarily own input; restoring the existing owner preserves a
+      // control-initiated approval without replacing or focusing the editor (Q24).
+      if (this.controlShown && this.controlHasFocus) this.focusControl(); else this.composer.focus();
+    };
     this.dialogs.onChrome = () => { this.paintEdges(); this.syncActivity(); };
+    // Native mouse selection can focus the textarea without going through an
+    // app shortcut. The actual input owner must also release panel actions (Q24).
+    this.composer.area.on("focused", () => { this.controlHasFocus = false; this.paintStatus(); });
     this.composer.onResize = () => this.paintAbove();
     this.composer.onOverflow = () => this.paintEdges();
     this.composer.onChange = () => this.paintGreeting();
@@ -164,6 +184,8 @@ export class Screen {
   get width(): number { return this.renderer.width; }
   get tier(): ScreenLayout["tier"] { return this.shape.tier; }
   get sidebarVisible(): boolean { return this.shape.tier === "sidebar"; }
+  get controlOpen(): boolean { return this.controlShown; }
+  get controlFocused(): boolean { return this.controlShown && this.controlHasFocus && !this.dialogs.open; }
   /** An empty session (the greeting may still be hidden by a draft). */
   get homeVisible(): boolean { return this.home !== undefined; }
   get greetingVisible(): boolean { return this.greeting.visible; }
@@ -184,9 +206,11 @@ export class Screen {
     this.renderer.setBackgroundColor(colors.background);
     for (const canvas of [this.topbar, this.greeting, this.pill, this.completion, this.queueRows, this.widgetRows, this.topEdge, this.bottomEdge, this.sidebarRows]) canvas.setColors(colors);
     this.sidebar.borderColor = colors.line;
+    this.sidebar.backgroundColor = colors.background;
     this.messages.setColors(colors);
     this.composer.setColors(colors);
     this.dialogs.setColors(colors);
+    this.paintStatus();
     this.paintEdges();
   }
 
@@ -197,15 +221,77 @@ export class Screen {
     this.syncActivity();
   }
 
-  toggleSidebar(): void { this.sidebarWanted = !this.sidebarWanted; this.layout(); }
+  toggleSidebar(): void {
+    if (this.controlShown) { this.closeControl(); return; }
+    this.sidebarWanted = !this.sidebarWanted; this.layout();
+  }
+
+  // --------------------------------------------------------------- controls
+  showControl(model: ControlPanelModel | undefined, tab: ControlTab = "goal"): void {
+    this.controlView.model = model; this.controlView.tab = tab; this.controlShown = true;
+    this.composer.setCompletion(undefined);
+    this.focusControl(); this.layout();
+  }
+
+  /** Snapshot updates never open the panel or take the user's input focus. */
+  setControlModel(model: ControlPanelModel | undefined): void { this.controlView.model = model; if (this.controlShown) this.paintStatus(); }
+
+  closeControl(): void { this.controlShown = false; this.focusComposer(); this.layout(); }
+
+  focusComposer(): void {
+    this.controlHasFocus = false;
+    if (!this.dialogs.open) this.composer.focus();
+    this.paintStatus();
+  }
+
+  private focusControl(): void {
+    this.controlHasFocus = true;
+    if (!this.dialogs.open) this.composer.area.blur();
+    this.paintStatus();
+  }
+
+  handleControlKey(key: KeyPress): boolean {
+    if (!this.controlShown || this.dialogs.open) return false;
+    if (key.chord === "f6") { if (this.controlHasFocus) this.focusComposer(); else this.focusControl(); return true; }
+    if (!this.controlHasFocus) return false;
+    if (key.chord === "escape") { this.focusComposer(); return true; }
+    if (key.chord === "q") { this.closeControl(); return true; }
+    if (key.chord === "tab" || key.chord === "shift+tab") this.controlView.changeTab(key.shift ? -1 : 1);
+    else if (key.chord === "left" || key.chord === "right") {
+      const step = key.chord === "left" ? -1 : 1;
+      if (this.controlView.tab === "context") this.controlView.changeLens(step); else this.controlView.changeTab(step);
+    } else if (key.chord === "up" || key.chord === "down") this.controlView.scroll(key.chord === "up" ? -1 : 1);
+    else if (key.chord === "pageup" || key.chord === "pagedown") this.controlView.scroll(key.chord === "pageup" ? -1 : 1, true);
+    else if (key.chord === "home" || key.chord === "end") this.controlView.edge(key.chord === "end");
+    else if (key.chord === "r" || key.chord === "i" || key.chord === "a") this.onControlAction?.(key.chord === "r" ? "refresh" : key.chord === "i" ? "interrupt" : "accept");
+    else {
+      // Let the same key reach the original editor after handing focus back.
+      // Modifier shortcuts remain the app's; panel navigation never eats typing.
+      if (key.text || key.chord === "enter") this.focusComposer();
+      return false;
+    }
+    this.paintStatus();
+    return true;
+  }
 
   // ------------------------------------------------------------------ layout
   private layout(): void {
     const w = this.renderer.width, h = this.renderer.height;
-    this.shape = screenLayout(w, h, this.sidebarWanted);
+    this.shape = screenLayout(w, h, this.sidebarWanted || this.controlShown);
     this.topbar.visible = this.shape.topbar;
-    this.sidebar.visible = this.shape.tier === "sidebar";
-    if (this.sidebar.visible) this.sidebar.width = this.shape.sidebarWidth;
+    const drawer = this.controlShown && this.shape.tier !== "sidebar";
+    // One sidebar changes parent at the responsive boundary. The drawer belongs
+    // to the transcript viewport, so even a growing composer cannot be covered.
+    const parent = drawer ? this.messagesArea : this.middle;
+    if (this.sidebar.parent !== parent) { this.sidebar.parent?.remove(this.sidebar); parent.add(this.sidebar); }
+    this.sidebar.position = drawer ? "absolute" : "relative";
+    this.sidebar.top = drawer ? 0 : undefined; this.sidebar.bottom = drawer ? 0 : undefined; this.sidebar.right = drawer ? 0 : undefined;
+    this.sidebar.zIndex = drawer ? 50 : 0;
+    this.sidebar.visible = (this.shape.tier === "sidebar" || drawer) && w > 0 && h > 3;
+    if (this.sidebar.visible) this.sidebar.width = drawer ? Math.min(w, sidebarContentWidth(w) + 1) : this.shape.sidebarWidth;
+    const compact = drawer && w < 6;
+    this.sidebar.border = compact ? [] : ["left"];
+    this.sidebar.paddingLeft = compact ? 0 : 1; this.sidebar.paddingRight = compact ? 0 : 1; this.sidebar.paddingTop = compact ? 0 : 1;
     // The draft may grow while the transcript keeps its minimum and the box keeps its edges.
     this.composer.setMaxLines(Math.min(draftMaxLines(h), h - (this.shape.topbar ? 1 : 0) - 2 - MIN_TRANSCRIPT_ROWS - this.aboveRows()));
     this.dialogs.layout();
@@ -231,8 +317,14 @@ export class Screen {
 
   private paintStatus(): void {
     const model = this.status;
-    if (!model) return;
-    if (this.topbar.visible) this.topbar.setRows([topbarRow(model, Math.max(1, this.renderer.width - 2))]);
+    if (model && this.topbar.visible) this.topbar.setRows([topbarRow(model, Math.max(1, this.renderer.width - 2))]);
+    if (this.controlShown) {
+      this.sidebar.borderColor = this.controlFocused ? this.colors.accent : this.colors.line;
+      this.sidebarRows.setRows(this.controlView.rows(this.sidebarRows.width, this.sidebarRows.height, this.controlFocused));
+      return;
+    }
+    this.sidebar.borderColor = this.colors.line;
+    if (!model) { this.sidebarRows.setRows([]); return; }
     if (this.sidebar.visible) {
       const width = Math.max(1, this.shape.sidebarWidth - 3);
       this.sidebarRows.setRows(sidebarLines(model, width, Math.max(0, this.renderer.height - 1)));
@@ -270,6 +362,10 @@ export class Screen {
     if (dialog) {
       left = [{ segs: [{ text: this.dialogs.title, role: "text", bold: true }], priority: 0, min: 8 }];
       if (this.dialogs.edgeHint) right.push({ segs: [{ text: this.dialogs.edgeHint, role: "muted" }], priority: 3, min: 10 });
+    } else if (this.controlShown && this.renderer.height <= 3) {
+      // No transcript rows remain for a drawer. Keep its state and explain how
+      // to recover on the existing edge, without putting control content in it.
+      left = [{ segs: [{ text: "Resize for control", role: "accent" }], priority: 0, min: 1 }];
     } else if (d.busy) {
       const seconds = Math.max(0, Math.floor((Date.now() - this.busySince) / 1000));
       left = [{ segs: [{ text: "●", role: "accent", spin: true }, { text: ` ${d.activity}`, role: "muted" }, { text: ` ${seconds}s`, role: "muted" }], priority: 0, min: 1, shrink: 1 }];
@@ -379,7 +475,7 @@ export class Screen {
   }
 
   private paintGreeting(): void {
-    const show = this.home !== undefined && !this.composer.text && !this.dialogs.open && this.renderer.height >= GREETING_MIN_ROWS;
+    const show = this.home !== undefined && !this.controlShown && !this.composer.text && !this.dialogs.open && this.renderer.height >= GREETING_MIN_ROWS;
     this.greeting.visible = show;
     if (!show) { if (this.entrance.running) this.finishEntrance(); return; }
     // The entrance plays once per screen, when the greeting first shows on a focused terminal.