@hobin/developer 0.1.3 → 0.1.5

package/extensions/tui.ts

@@ -1,15 +1,14 @@
 import {
-  DynamicBorder,
   type ExtensionCommandContext,
+  type KeybindingsManager,
   type Theme,
   type ThemeColor,
 } from "@earendil-works/pi-coding-agent";
 import {
-  Box,
   Container,
   matchesKey,
   type SelectItem,
-  SelectList,
+  type SizeValue,
   Text,
   truncateToWidth,
   visibleWidth,
@@ -20,6 +19,7 @@ import {
   protocolState,
   type DeveloperMode,
   type DeveloperState,
+  type JudgmentStatus,
   type PendingQuestion,
   type ProtocolState,
 } from "./state.ts";
@@ -33,7 +33,12 @@ function modeName(mode: DeveloperMode): string {
 
 function protocolColor(value: ProtocolState): ThemeColor {
   if (value === "blocked") return "error";
-  if (value === "needs-evidence" || value === "needs-verification") return "warning";
+  if (
+    value === "needs-evidence" ||
+    value === "needs-answer" ||
+    value === "needs-routing" ||
+    value === "needs-verification"
+  ) return "warning";
   if (value === "needs-judgment") return "accent";
   return "dim";
 }
@@ -44,6 +49,22 @@ function modeColor(mode: DeveloperMode): ThemeColor {
   return "dim";
 }
 
+function judgmentColor(status: JudgmentStatus): ThemeColor {
+  if (status === "blocked") return "error";
+  if (status === "needs-evidence") return "warning";
+  if (status === "resolved") return "success";
+  return "muted";
+}
+
+function judgmentSummary(result: string): string {
+  return (
+    result
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .find((line) => line && !line.startsWith("```")) ?? result
+  );
+}
+
 export function renderDeveloperFooter(state: DeveloperState, theme: Theme): string {
   const currentProtocol = protocolState(state);
   const target = state.activeRoute?.owner ?? "none";
@@ -82,7 +103,7 @@ export function developerActionItems(state: DeveloperState): SelectItem[] {
     {
       value: "strict",
       label: state.mode === "strict" ? "Strict mode (active)" : "Strict mode",
-      description: "Require a direct route before Pi built-in mutation tools become active",
+      description: "Allow bash on judgment routes; require direct for Pi built-in edit/write",
     },
     {
       value: "off",
@@ -93,146 +114,272 @@ export function developerActionItems(state: DeveloperState): SelectItem[] {
   return items;
 }
 
+function questionAction(owner: PendingQuestion["resolutionOwner"]): string {
+  if (owner === "user") return "enter to provide the required answer";
+  if (owner === "environment") return "enter to provide access or external evidence";
+  if (owner === "agent") return "enter to ask Pi to investigate";
+  return "enter to classify and resolve this legacy question";
+}
+
+function resolutionRequestLabel(owner: PendingQuestion["resolutionOwner"]): string {
+  if (owner === "user") return "Required answer or product decision:";
+  if (owner === "environment") return "External access, observation, or environment evidence:";
+  return "Evidence or investigation request for Pi:";
+}
+
+const ENABLE_MOUSE_SCROLL = "\u001b[?1000h\u001b[?1006h";
+const DISABLE_MOUSE_SCROLL = "\u001b[?1006l\u001b[?1000l";
+
+interface WritableTerminal {
+  write(data: string): void;
+}
+
+function enableMouseScroll(tui: { terminal?: WritableTerminal }): WritableTerminal | undefined {
+  const terminal = tui.terminal;
+  if (!terminal || typeof terminal.write !== "function") return undefined;
+  terminal.write(ENABLE_MOUSE_SCROLL);
+  return terminal;
+}
+
+function disableMouseScroll(terminal: WritableTerminal | undefined): void {
+  terminal?.write(DISABLE_MOUSE_SCROLL);
+}
+
+function mouseWheelDirection(data: string): -1 | 1 | undefined {
+  const match = /^\u001b\[<(\d+);\d+;\d+M$/.exec(data);
+  if (!match?.[1]) return undefined;
+  const button = Number(match[1]);
+  if ((button & 64) === 0 || (button & 3) > 1) return undefined;
+  return (button & 1) === 0 ? -1 : 1;
+}
+
 export function pendingQuestionItems(questions: PendingQuestion[]): SelectItem[] {
-  return questions.map((question) => ({
-    value: question.id,
-    label: question.question,
-    description: `${question.status} · ${question.id}`,
-  }));
+  return questions.map((question) => {
+    const action = questionAction(question.resolutionOwner);
+    return {
+      value: question.id,
+      label: question.question,
+      description: `${question.status} · ${question.resolutionOwner} · ${question.gate} · ${action}`,
+    };
+  });
 }
 
 interface SelectDialogOptions {
   title: string;
   subtitle: string;
   items: SelectItem[];
-  width: number;
+  width: SizeValue;
+  minWidth: number;
   maxVisible: number;
-  maxPrimaryColumnWidth?: number;
+  selectedLabelMaxLines: number;
+  selectedDescriptionMaxLines: number;
 }
 
-class SelectionPreview {
-  private item?: SelectItem;
-  private offset = 0;
-  private lastWidth = 40;
+function boundedWrappedLines(content: string, width: number, maxLines: number, ellipsis: string): string[] {
+  const contentWidth = Math.max(1, width);
+  const wrapped = wrapTextWithAnsi(content, contentWidth);
+  const visible = wrapped.slice(0, Math.max(1, maxLines));
+  if (wrapped.length > visible.length && visible.length > 0) {
+    const last = visible.length - 1;
+    visible[last] = truncateToWidth(visible[last] ?? "", Math.max(1, contentWidth - 1), "") + ellipsis;
+  }
+  return visible;
+}
+
+function renderModalFrame(container: Container, theme: Theme, width: number): string[] {
+  if (width < 3) return container.render(Math.max(1, width));
+
+  const innerWidth = width - 2;
+  const border = (text: string) => theme.fg("borderAccent", text);
+  const rows = container
+    .render(innerWidth)
+    .map((line) => `${border("│")}${truncateToWidth(line, innerWidth, "…", true)}${border("│")}`);
+  return [border(`╭${"─".repeat(innerWidth)}╮`), ...rows, border(`╰${"─".repeat(innerWidth)}╯`)];
+}
+
+class WrappedSelectList {
+  private selectedIndex = 0;
+  private readonly items: SelectItem[];
+  private readonly keybindings: KeybindingsManager;
+  private readonly maxVisible: number;
+  private readonly renderHeight: number;
+  private readonly selectedDescriptionMaxLines: number;
+  private readonly selectedLabelMaxLines: number;
   private readonly theme: Theme;
-  private readonly maxLines: number;
+  onSelect?: (item: SelectItem) => void;
+  onCancel?: () => void;
 
-  constructor(theme: Theme, maxLines = 5) {
+  constructor(
+    items: SelectItem[],
+    maxVisible: number,
+    theme: Theme,
+    keybindings: KeybindingsManager,
+    options: {
+      selectedLabelMaxLines: number;
+      selectedDescriptionMaxLines: number;
+    },
+  ) {
+    this.items = items;
+    this.maxVisible = maxVisible;
     this.theme = theme;
-    this.maxLines = maxLines;
+    this.keybindings = keybindings;
+    this.selectedLabelMaxLines = options.selectedLabelMaxLines;
+    this.selectedDescriptionMaxLines = options.selectedDescriptionMaxLines;
+    this.renderHeight = Math.max(
+      1,
+      maxVisible - 1 + options.selectedLabelMaxLines + options.selectedDescriptionMaxLines + 1,
+    );
   }
 
-  setItem(item: SelectItem): void {
-    this.item = item;
-    this.offset = 0;
-  }
+  render(width: number): string[] {
+    if (this.items.length === 0) return [this.theme.fg("warning", "  No items")];
 
-  scroll(delta: number): void {
-    const total = this.contentLines(this.lastWidth).length;
-    this.offset = Math.max(0, Math.min(this.offset + delta, Math.max(0, total - this.maxLines)));
-  }
+    const lines: string[] = [];
+    const startIndex = Math.max(
+      0,
+      Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.items.length - this.maxVisible),
+    );
+    const endIndex = Math.min(startIndex + this.maxVisible, this.items.length);
+
+    for (let index = startIndex; index < endIndex; index += 1) {
+      const item = this.items[index];
+      if (!item) continue;
+      if (index !== this.selectedIndex) {
+        lines.push(`  ${truncateToWidth(item.label, Math.max(1, width - 2), "…")}`);
+        continue;
+      }
 
-  render(width: number): string[] {
-    this.lastWidth = width;
-    const lines = this.contentLines(width);
-    const visible = lines.slice(this.offset, this.offset + this.maxLines);
-    if (lines.length > this.maxLines) {
-      const end = Math.min(lines.length, this.offset + this.maxLines);
-      visible.push(this.theme.fg("dim", `  detail ${this.offset + 1}–${end}/${lines.length} · shift+↑↓ scroll`));
+      const labels = boundedWrappedLines(
+        this.theme.fg("accent", item.label),
+        width - 2,
+        this.selectedLabelMaxLines,
+        this.theme.fg("dim", "…"),
+      );
+      lines.push(`${this.theme.fg("accent", "→ ")}${labels[0] ?? ""}`);
+      for (const line of labels.slice(1)) lines.push(`  ${line}`);
+
+      if (item.description) {
+        const descriptions = boundedWrappedLines(
+          this.theme.fg("muted", item.description),
+          width - 4,
+          this.selectedDescriptionMaxLines,
+          this.theme.fg("dim", "…"),
+        );
+        for (const line of descriptions) lines.push(`  ${line}`);
+      }
+    }
+
+    if (startIndex > 0 || endIndex < this.items.length) {
+      lines.push(
+        this.theme.fg(
+          "dim",
+          truncateToWidth(`  (${this.selectedIndex + 1}/${this.items.length})`, Math.max(1, width - 2), ""),
+        ),
+      );
     }
+    const visible = lines.slice(0, this.renderHeight);
+    while (visible.length < this.renderHeight) visible.push("");
     return visible;
   }
 
-  invalidate(): void {}
+  handleInput(data: string): void {
+    const wheelDirection = mouseWheelDirection(data);
+    if (wheelDirection !== undefined) {
+      this.moveSelection(wheelDirection * 3);
+    } else if (this.keybindings.matches(data, "tui.select.up")) {
+      this.selectedIndex = this.selectedIndex === 0 ? this.items.length - 1 : this.selectedIndex - 1;
+    } else if (this.keybindings.matches(data, "tui.select.down")) {
+      this.selectedIndex = this.selectedIndex === this.items.length - 1 ? 0 : this.selectedIndex + 1;
+    } else if (this.keybindings.matches(data, "tui.select.pageUp")) {
+      this.moveSelection(-Math.max(1, this.maxVisible - 1));
+    } else if (this.keybindings.matches(data, "tui.select.pageDown")) {
+      this.moveSelection(Math.max(1, this.maxVisible - 1));
+    } else if (matchesKey(data, "home")) {
+      this.selectedIndex = 0;
+    } else if (matchesKey(data, "end")) {
+      this.selectedIndex = Math.max(0, this.items.length - 1);
+    } else if (this.keybindings.matches(data, "tui.select.confirm")) {
+      const selected = this.items[this.selectedIndex];
+      if (selected) this.onSelect?.(selected);
+    } else if (this.keybindings.matches(data, "tui.select.cancel")) {
+      this.onCancel?.();
+    }
+  }
 
-  private contentLines(width: number): string[] {
-    if (!this.item) return [];
-    const content = [
-      this.theme.fg("accent", this.theme.bold(this.item.label)),
-      ...(this.item.description ? [this.theme.fg("muted", this.item.description)] : []),
-    ].join("\n");
-    return new Text(content, 1, 0).render(width);
+  private moveSelection(delta: number): void {
+    this.selectedIndex = Math.max(0, Math.min(this.items.length - 1, this.selectedIndex + delta));
   }
+
+  invalidate(): void {}
 }
 
 async function showSelectDialog(
   ctx: ExtensionCommandContext,
   options: SelectDialogOptions,
 ): Promise<string | undefined> {
-  const result = await ctx.ui.custom<string | null>(
-    (tui, theme, _keybindings, done) => {
-      const container = new Container();
-      const surface = new Box(1, 0, (text) => theme.bg("customMessageBg", text));
-      surface.addChild(container);
-      const title = new Text("", 1, 0);
-      const subtitle = new Text("", 1, 0);
-      const hint = new Text("", 1, 0);
-      const previewLabel = new Text(theme.fg("dim", "Selected detail"), 1, 0);
-      const preview = new SelectionPreview(theme);
-      const updateText = () => {
-        title.setText(theme.fg("accent", theme.bold(`◆ ${options.title}`)));
-        subtitle.setText(theme.fg("muted", options.subtitle));
-        hint.setText(theme.fg("dim", "↑↓ navigate · shift+↑↓ scroll detail · enter select · esc cancel"));
-      };
-      updateText();
-
-      const list = new SelectList(
-        options.items,
-        Math.min(options.items.length, options.maxVisible),
-        {
-          selectedPrefix: (text) => theme.fg("accent", text),
-          selectedText: (text) => theme.fg("accent", text),
-          description: (text) => theme.fg("muted", text),
-          scrollInfo: (text) => theme.fg("dim", text),
-          noMatch: (text) => theme.fg("warning", text),
-        },
-        options.maxPrimaryColumnWidth
-          ? { minPrimaryColumnWidth: 24, maxPrimaryColumnWidth: options.maxPrimaryColumnWidth }
-          : undefined,
-      );
-      list.onSelect = (item) => done(item.value);
-      list.onCancel = () => done(null);
-      list.onSelectionChange = (item) => preview.setItem(item);
-      const initialItem = list.getSelectedItem();
-      if (initialItem) preview.setItem(initialItem);
-
-      container.addChild(new DynamicBorder((text) => theme.fg("borderAccent", text)));
-      container.addChild(title);
-      container.addChild(subtitle);
-      container.addChild(list);
-      container.addChild(new DynamicBorder((text) => theme.fg("borderMuted", text)));
-      container.addChild(previewLabel);
-      container.addChild(preview);
-      container.addChild(hint);
-      container.addChild(new DynamicBorder((text) => theme.fg("borderAccent", text)));
-
-      return {
-        render(width: number) {
-          return surface.render(width);
-        },
-        invalidate() {
-          updateText();
-          surface.invalidate();
-        },
-        handleInput(data: string) {
-          if (matchesKey(data, "shift+up")) preview.scroll(-1);
-          else if (matchesKey(data, "shift+down")) preview.scroll(1);
-          else list.handleInput(data);
-          tui.requestRender();
+  let mouseTerminal: WritableTerminal | undefined;
+  try {
+    const result = await ctx.ui.custom<string | null>(
+      (tui, theme, keybindings, done) => {
+        mouseTerminal = enableMouseScroll(tui);
+        const container = new Container();
+        const title = new Text("", 1, 0);
+        const subtitle = new Text("", 1, 0);
+        const hint = new Text("", 1, 0);
+        const updateText = () => {
+          title.setText(theme.fg("accent", theme.bold(`◆ ${options.title}`)));
+          subtitle.setText(theme.fg("muted", options.subtitle));
+          hint.setText(theme.fg("dim", "wheel/↑↓ · PgUp/PgDn · Home/End · enter select · esc cancel"));
+        };
+        updateText();
+
+        const list = new WrappedSelectList(
+          options.items,
+          Math.min(options.items.length, options.maxVisible),
+          theme,
+          keybindings,
+          {
+            selectedLabelMaxLines: options.selectedLabelMaxLines,
+            selectedDescriptionMaxLines: options.selectedDescriptionMaxLines,
+          },
+        );
+        list.onSelect = (item) => done(item.value);
+        list.onCancel = () => done(null);
+
+        container.addChild(title);
+        container.addChild(subtitle);
+        container.addChild(list);
+        container.addChild(hint);
+
+        return {
+          render(width: number) {
+            return renderModalFrame(container, theme, width);
+          },
+          invalidate() {
+            updateText();
+            container.invalidate();
+          },
+          handleInput(data: string) {
+            list.handleInput(data);
+            tui.requestRender();
+          },
+        };
+      },
+      {
+        overlay: true,
+        overlayOptions: {
+          anchor: "center",
+          width: options.width,
+          minWidth: options.minWidth,
+          maxHeight: "88%",
+          margin: 1,
         },
-      };
-    },
-    {
-      overlay: true,
-      overlayOptions: {
-        anchor: "center",
-        width: options.width,
-        maxHeight: Math.min(options.maxVisible + 15, 26),
-        margin: 1,
       },
-    },
-  );
-  return result ?? undefined;
+    );
+    return result ?? undefined;
+  } finally {
+    disableMouseScroll(mouseTerminal);
+  }
 }
 
 export async function showDeveloperActionSelector(
@@ -243,8 +390,11 @@ export async function showDeveloperActionSelector(
     title: "Developer control",
     subtitle: `Current · ${modeName(state.mode)} · ${protocolState(state)}`,
     items: developerActionItems(state),
-    width: 78,
+    width: "84%",
+    minWidth: 78,
     maxVisible: 6,
+    selectedLabelMaxLines: 3,
+    selectedDescriptionMaxLines: 3,
   });
   if (result === "status" || result === "questions" || result === "on" || result === "strict" || result === "off") {
     return result;
@@ -252,18 +402,20 @@ export async function showDeveloperActionSelector(
   return undefined;
 }
 
-export async function showPendingQuestionSelector(
+export function showPendingQuestionSelector(
   ctx: ExtensionCommandContext,
   questions: PendingQuestion[],
 ): Promise<string | undefined> {
-  if (questions.length === 0) return undefined;
+  if (questions.length === 0) return Promise.resolve(undefined);
   return showSelectDialog(ctx, {
-    title: "Revisit an open Developer question",
-    subtitle: "Selection prepares an editable prompt; protocol state changes only after the route is judged",
+    title: "Resolve an open Developer question",
+    subtitle: "Enter opens an answer/evidence editor; the question closes after a resolved or not-applicable judgment",
     items: pendingQuestionItems(questions),
-    width: 96,
+    width: "92%",
+    minWidth: 88,
     maxVisible: 10,
-    maxPrimaryColumnWidth: 52,
+    selectedLabelMaxLines: 5,
+    selectedDescriptionMaxLines: 3,
   });
 }
 
@@ -288,9 +440,10 @@ export class DeveloperWidget {
       );
     }
     for (const question of this.state.pendingQuestions.slice(0, 3)) {
+      const label = question.resolutionOwner === "user" ? "? answer" : "? evidence";
       lines.push(
         truncateToWidth(
-          `${this.theme.fg(question.status === "blocked" ? "error" : "warning", "? open")} ${this.theme.fg("dim", "·")} ${this.theme.fg("muted", question.question)}`,
+          `${this.theme.fg(question.status === "blocked" ? "error" : "warning", label)} ${this.theme.fg("dim", `· ${question.gate} ·`)} ${this.theme.fg("muted", question.question)}`,
           width,
           "…",
         ),
@@ -302,6 +455,9 @@ export class DeveloperWidget {
     if (this.state.implementationFramingRequired) {
       lines.push(this.theme.fg("warning", "→ next · sketch feature shape or signal structural movement"));
     }
+    if (this.state.rerouteRequired) {
+      lines.push(this.theme.fg("warning", "→ next · reroute from the latest direct landing"));
+    }
     if (this.state.verificationRequired) {
       lines.push(this.theme.fg("warning", "→ next · verify changed artifacts before completion"));
     }
@@ -346,96 +502,120 @@ export class DeveloperStatusPanel {
       this.onClose();
       return;
     }
-    if (matchesKey(data, "up")) this.scrollOffset = Math.max(0, this.scrollOffset - 1);
-    else if (matchesKey(data, "down")) {
-      this.scrollOffset = Math.min(this.maxScrollOffset, this.scrollOffset + 1);
-    } else return;
+    const wheelDirection = mouseWheelDirection(data);
+    const pageSize = Math.max(1, this.viewportHeight - 6);
+    if (wheelDirection !== undefined) this.moveScroll(wheelDirection * 3);
+    else if (matchesKey(data, "up")) this.moveScroll(-1);
+    else if (matchesKey(data, "down")) this.moveScroll(1);
+    else if (matchesKey(data, "pageUp")) this.moveScroll(-pageSize);
+    else if (matchesKey(data, "pageDown")) this.moveScroll(pageSize);
+    else if (matchesKey(data, "home")) this.scrollOffset = 0;
+    else if (matchesKey(data, "end")) this.scrollOffset = this.maxScrollOffset;
+    else return;
     this.invalidate();
     this.requestRender();
   }
 
+  private moveScroll(delta: number): void {
+    this.scrollOffset = Math.max(0, Math.min(this.maxScrollOffset, this.scrollOffset + delta));
+  }
+
   render(width: number): string[] {
     if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
 
-    const panelWidth = Math.max(20, width);
-    const innerWidth = Math.max(18, panelWidth - 2);
+    const panelWidth = Math.max(1, width);
+    const innerWidth = Math.max(1, panelWidth - 2);
     const rows: string[] = [];
-    const background = (text: string) => this.theme.bg("customMessageBg", text);
     const border = (text: string) => this.theme.fg("borderAccent", text);
-    const row = (content = "") => {
-      const clipped = truncateToWidth(content, innerWidth, "…", true);
-      const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(clipped)));
-      return background(`${border("│")}${clipped}${padding}${border("│")}`);
-    };
-    const addWrapped = (label: string, value: string, color: ThemeColor = "muted", _maxLines?: number) => {
-      const prefix = `  ${this.theme.fg("dim", `${label} ·`)} `;
-      const wrapped = wrapTextWithAnsi(prefix + this.theme.fg(color, value), innerWidth);
-      for (const line of wrapped) rows.push(row(line));
+    const row = (content = "") => `${border("│")}${truncateToWidth(content, innerWidth, "…", true)}${border("│")}`;
+    const addWrapped = (label: string, value: string, color: ThemeColor = "muted", maxLines = 2) => {
+      const labelText = `${label} ·`;
+      const plainPrefix = `  ${labelText} `;
+      const styledPrefix = `  ${this.theme.fg("dim", labelText)} `;
+      const contentWidth = Math.max(1, innerWidth - visibleWidth(plainPrefix));
+      const wrapped = wrapTextWithAnsi(this.theme.fg(color, value.trim()), contentWidth);
+      const visible = wrapped.slice(0, Math.max(1, maxLines));
+      if (wrapped.length > visible.length && visible.length > 0) {
+        const last = visible.length - 1;
+        visible[last] =
+          truncateToWidth(visible[last] ?? "", Math.max(1, contentWidth - 1), "") + this.theme.fg("dim", "…");
+      }
+      rows.push(row(styledPrefix + (visible[0] ?? "")));
+      const hangingIndent = " ".repeat(visibleWidth(plainPrefix));
+      for (const line of visible.slice(1)) rows.push(row(hangingIndent + line));
     };
     const section = (title: string) => rows.push(row(`  ${this.theme.fg("accent", this.theme.bold(title))}`));
 
-    rows.push(background(border(`╭${"─".repeat(innerWidth)}╮`)));
+    rows.push(border(`╭${"─".repeat(innerWidth)}╮`));
     rows.push(row(`  ${this.theme.fg("accent", this.theme.bold("◆ Developer status"))}`));
     rows.push(row());
 
     const state = this.view.state;
     const currentProtocol = protocolState(state);
-    rows.push(
-      row(
-        `  mode ${this.theme.fg(modeColor(state.mode), modeName(state.mode))}` +
-          this.theme.fg("dim", " · ") +
-          `protocol ${this.theme.fg(protocolColor(currentProtocol), currentProtocol)}` +
-          this.theme.fg("dim", " · ") +
-          `target ${this.theme.fg("muted", state.activeRoute?.owner ?? "none")}`,
-      ),
-    );
+    const summary =
+      `mode ${this.theme.fg(modeColor(state.mode), modeName(state.mode))}` +
+      this.theme.fg("dim", " · ") +
+      `protocol ${this.theme.fg(protocolColor(currentProtocol), currentProtocol)}` +
+      this.theme.fg("dim", " · ") +
+      `target ${this.theme.fg("muted", state.activeRoute?.owner ?? "none")}`;
+    for (const line of wrapTextWithAnsi(summary, Math.max(1, innerWidth - 2))) rows.push(row(`  ${line}`));
     rows.push(row());
 
     section("Active route");
     if (state.activeRoute) {
       addWrapped("id", state.activeRoute.routeId, "dim", 1);
-      addWrapped("question", state.activeRoute.question, "text");
-      addWrapped("reason", state.activeRoute.reason);
+      addWrapped("question", state.activeRoute.question, "text", 3);
+      addWrapped("reason", state.activeRoute.reason, "muted", 2);
       addWrapped("skill", state.activeRoute.methodLocation ?? "direct action", "dim", 1);
       addWrapped("known evidence", String(state.activeRoute.knownEvidence.length), "muted", 1);
     } else {
-      addWrapped("state", "No route is currently waiting for judgment.", "dim", 1);
+      addWrapped("state", "No route is currently waiting for judgment.", "dim", 2);
     }
 
     rows.push(row());
     section(`Open questions · ${state.pendingQuestions.length}`);
     if (state.pendingQuestions.length === 0) {
-      addWrapped("state", "No unresolved Developer questions.", "dim", 1);
+      addWrapped("state", "No unresolved Developer questions.", "dim", 2);
     } else {
-      for (const question of state.pendingQuestions) {
+      for (const question of state.pendingQuestions.slice(0, 4)) {
         addWrapped(
-          question.status === "blocked" ? "blocked" : "needs evidence",
+          `${question.status} · ${question.resolutionOwner} · ${question.gate}`,
           question.question,
           question.status === "blocked" ? "error" : "warning",
-          1,
+          2,
         );
+        addWrapped("resolves when", question.resolutionCriteria, "dim", 2);
+      }
+      if (state.pendingQuestions.length > 4) {
+        addWrapped("more", `${state.pendingQuestions.length - 4} additional open questions`, "dim", 1);
       }
     }
 
     rows.push(row());
-    section("Last judgment");
-    if (state.lastJudgment) {
-      addWrapped("status", state.lastJudgment.status, protocolColor(
-        state.lastJudgment.status === "blocked"
-          ? "blocked"
-          : state.lastJudgment.status === "needs-evidence"
-            ? "needs-evidence"
-            : "idle",
-      ), 1);
-      addWrapped("result", state.lastJudgment.result, "muted");
-      addWrapped(
-        "evidence",
-        `${state.lastJudgment.basis.length} basis · ${state.lastJudgment.artifacts.length} artifacts`,
-        "dim",
-        1,
-      );
+    section(`Judgment history · ${state.judgmentHistory.length}`);
+    if (state.judgmentHistory.length === 0) {
+      addWrapped("state", "No judgment has been recorded on this branch.", "dim", 2);
     } else {
-      addWrapped("state", "No judgment has been recorded on this branch.", "dim", 1);
+      const recentJudgments = state.judgmentHistory.slice(-10).toReversed();
+      for (const judgment of recentJudgments) {
+        const route = state.routeHistory.find((candidate) => candidate.routeId === judgment.routeId);
+        addWrapped(
+          `${judgment.owner} ${judgment.status}`,
+          `${judgment.question} → ${judgmentSummary(judgment.result)}`,
+          judgmentColor(judgment.status),
+          3,
+        );
+        if (route) addWrapped("route reason", route.reason, "dim", 2);
+        for (const alternative of route?.consideredAlternatives ?? []) {
+          addWrapped(`considered ${alternative.owner}`, alternative.reason, "dim", 2);
+        }
+        for (const update of judgment.questionUpdates ?? []) {
+          addWrapped(`question ${update.status}`, `${update.questionId} → ${update.result}`, "accent", 2);
+        }
+      }
+      if (state.judgmentHistory.length > recentJudgments.length) {
+        addWrapped("earlier", `${state.judgmentHistory.length - recentJudgments.length} earlier judgments`, "dim", 1);
+      }
     }
 
     rows.push(row());
@@ -446,23 +626,23 @@ export class DeveloperStatusPanel {
       1,
     );
     rows.push(row());
-    rows.push(row(`  ${this.theme.fg("dim", "enter/esc close · /develop questions revisits open work")}`));
-    rows.push(background(border(`╰${"─".repeat(innerWidth)}╯`)));
 
     const header = rows.slice(0, 2);
-    const body = rows.slice(2, -2);
+    const body = rows.slice(2);
     const bodyCapacity = Math.max(1, this.viewportHeight - 4);
     this.maxScrollOffset = Math.max(0, body.length - bodyCapacity);
     this.scrollOffset = Math.min(this.scrollOffset, this.maxScrollOffset);
     const visibleBody = body.slice(this.scrollOffset, this.scrollOffset + bodyCapacity);
-    const position = body.length > bodyCapacity
-      ? `↑↓ scroll · ${this.scrollOffset + 1}–${Math.min(body.length, this.scrollOffset + bodyCapacity)}/${body.length} · enter/esc close`
-      : "enter/esc close · /develop questions revisits open work";
+    while (visibleBody.length < bodyCapacity) visibleBody.push(row());
+    const position =
+      body.length > bodyCapacity
+        ? `wheel/↑↓ · PgUp/PgDn · Home/End · ${this.scrollOffset + 1}–${Math.min(body.length, this.scrollOffset + bodyCapacity)}/${body.length} · enter/esc close`
+        : "enter/esc close · /develop questions revisits open work";
     const visibleRows = [
       ...header,
       ...visibleBody,
       row(`  ${this.theme.fg("dim", position)}`),
-      background(border(`╰${"─".repeat(innerWidth)}╯`)),
+      border(`╰${"─".repeat(innerWidth)}╯`),
     ];
 
     this.cachedWidth = width;
@@ -476,31 +656,56 @@ export class DeveloperStatusPanel {
   }
 }
 
-export async function showDeveloperStatus(
-  ctx: ExtensionCommandContext,
-  view: DeveloperStatusView,
-): Promise<void> {
-  await ctx.ui.custom<void>(
-    (tui, theme, _keybindings, done) =>
-      new DeveloperStatusPanel(view, theme, () => done(), {
-        viewportHeight: Math.max(12, Math.floor(tui.terminal.rows * 0.8)),
-        requestRender: () => tui.requestRender(),
-      }),
-    {
-      overlay: true,
-      overlayOptions: {
-        anchor: "center",
-        width: "82%",
-        minWidth: 56,
-        maxHeight: "85%",
-        margin: 1,
+export async function showDeveloperStatus(ctx: ExtensionCommandContext, view: DeveloperStatusView): Promise<void> {
+  let mouseTerminal: WritableTerminal | undefined;
+  try {
+    await ctx.ui.custom<void>(
+      (tui, theme, _keybindings, done) => {
+        mouseTerminal = enableMouseScroll(tui);
+        return new DeveloperStatusPanel(view, theme, () => done(), {
+          viewportHeight: Math.max(10, Math.min(36, Math.floor(tui.terminal.rows * 0.88))),
+          requestRender: () => tui.requestRender(),
+        });
       },
-    },
-  );
+      {
+        overlay: true,
+        overlayOptions: {
+          anchor: "center",
+          width: "90%",
+          minWidth: 72,
+          maxHeight: "88%",
+          margin: 1,
+        },
+      },
+    );
+  } finally {
+    disableMouseScroll(mouseTerminal);
+  }
+}
+
+export function questionResolutionPrompt(question: PendingQuestion): string {
+  const requestLabel = resolutionRequestLabel(question.resolutionOwner);
+  return [
+    "Resolve this open Developer question.",
+    "",
+    `Question: ${question.question}`,
+    `Resolution owner: ${question.resolutionOwner}`,
+    `Gate: ${question.gate}`,
+    `Resolution criteria: ${question.resolutionCriteria}`,
+    "",
+    requestLabel,
+    "",
+    "Use the supplied answer as new evidence, or investigate with available tools when the owner is agent.",
+    "Route the focused question, then record resolved/not-applicable with question_updates when it is settled; otherwise retain it with the specific remaining evidence gap.",
+  ].join("\n");
 }
 
-export function prepareQuestionPrompt(ctx: ExtensionCommandContext, question: PendingQuestion): void {
-  const prompt = `Revisit this Developer question: ${question.question}`;
+export function editQuestionResolutionRequest(
+  ctx: ExtensionCommandContext,
+  question: PendingQuestion,
+): Promise<string | undefined> {
   const current = ctx.ui.getEditorText();
-  ctx.ui.setEditorText(current.trim() ? `${current.trimEnd()}\n\n${prompt}` : prompt);
+  const request = questionResolutionPrompt(question);
+  const initial = current.trim() ? `${current.trimEnd()}\n\n${request}` : request;
+  return ctx.ui.editor("Answer or investigate the selected Developer question", initial);
 }