@siuver/omp-debug-mode 0.1.5 → 0.1.7

package/src/ui.ts

@@ -1,13 +1,16 @@
 import type { ExtensionContext } from "@oh-my-pi/pi-coding-agent";
-import { describeOpenReason } from "./gate";
-import { PROCEED_REMINDER } from "./methodology";
-import type { DebugSession, DebugState, EvidenceRequest } from "./state";
+import type { DebugSession, DebugState, EvidenceRequest, HandoffMode } from "./state";
 import { currentRound, pendingRequests } from "./state";
 
 export const WIDGET_MAX_LINES = 10;
 const WIDGET_MAX_WIDTH = 90;
 
-export type WidgetTone = "accent" | "dim";
+/** Above the editor: what this round asked the user to do. */
+export const WIDGET_CONTEXT_KEY = "debug-mode";
+/** Below the editor: the commands that finish or keep the round. */
+export const WIDGET_ACTIONS_KEY = "debug-mode-actions";
+
+export type WidgetTone = "accent" | "dim" | "warning";
 
 export interface WidgetLine {
 	text: string;
@@ -15,23 +18,54 @@ export interface WidgetLine {
 }
 
 export function statusLabel(session: DebugSession): string {
-	const round = currentRound(session).index;
-	if (session.stage === "awaiting_evidence") return "🐞 waiting-repro";
-	if (session.stage === "open") return `🐞 round ${round} · your turn`;
+	const round = currentRound(session);
 	if (session.stage === "cleaning_up") return "🐞 cleanup";
-	return `🐞 round ${round}`;
+	if (session.stage === "investigating") return `🐞 round ${round.index}`;
+	const mode = round.handoff ?? "incomplete";
+	if (mode === "reproduce") return `🐞 round ${round.index} · reproduce`;
+	if (mode === "capture") return `🐞 round ${round.index} · capture`;
+	if (mode === "question") return `🐞 round ${round.index} · your reply`;
+	return `🐞 round ${round.index} · needs input`;
 }
 
+/**
+ * Clip to terminal columns, not to code units. Reproduction steps are written
+ * in whatever language the user reports the bug in, and a CJK step counts one
+ * unit per character while occupying two columns — measured by `length` a line
+ * of Chinese fits the budget at twice the real width and the host wraps or
+ * truncates it instead.
+ */
 function clip(text: string): string {
-	return text.length > WIDGET_MAX_WIDTH ? `${text.slice(0, WIDGET_MAX_WIDTH - 1)}…` : text;
+	if (Bun.stringWidth(text) <= WIDGET_MAX_WIDTH) return text;
+	let width = 0;
+	let kept = "";
+	for (const char of text) {
+		const next = width + Bun.stringWidth(char);
+		if (next > WIDGET_MAX_WIDTH - 1) break;
+		width = next;
+		kept += char;
+	}
+	return `${kept}…`;
+}
+
+function paint(ctx: ExtensionContext, lines: WidgetLine[]): string[] {
+	return lines.map(line => ctx.ui.theme.fg(line.tone, line.text));
+}
+
+function clearWidgets(ctx: ExtensionContext): void {
+	ctx.ui.setWidget(WIDGET_CONTEXT_KEY, undefined);
+	ctx.ui.setWidget(WIDGET_ACTIONS_KEY, undefined);
 }
 
-/** The command surface is the only interaction path at the gate. */
-const COMMAND_LINES = [
-	"/debug-proceed [details]",
-	"/debug-evidence <request-id> <path>",
-	"/debug-done · /debug-abort · /debug-status",
-] as const;
+const TIPS_HEADER = "Tips:";
+
+/**
+ * Remaining commands after the exits have their own lines. The `-`
+ * sentinel is deliberately not spelled out here: `<request-id|->` renders as an
+ * arrow next to lines that use `→` to mean "and then this happens", and
+ * the command's own completion offers `-` as its first entry anyway.
+ */
+const OTHER_COMMANDS = "/debug-evidence <request-id> <path> · /debug-clear · /debug-abort · /debug-status";
 
 function plural(count: number, singular: string): string {
 	return `${count} ${singular}${count === 1 ? "" : "s"}`;
@@ -42,86 +76,126 @@ function logEntries(count: number): string {
 }
 
 /**
- * A round that settled without closing needs its own affordance: the user has
- * the turn, but the answer is an ordinary reply, not a reproduction. Showing
- * nothing here is what makes an unclosed round look like the gate.
+ * What this round wants from the user, without naming a command: the actions
+ * widget sits directly under the editor and names all of them already.
  */
-export function openWidgetLines(session: DebugSession): WidgetLine[] {
-	const round = currentRound(session);
-	const reason = round.openReason ?? "awaiting_reply";
-	return [
-		{ text: "This round is not closed — reply to continue.", tone: "accent" },
-		{ text: clip(describeOpenReason(reason, round.index)), tone: "dim" },
-		{ text: "/debug-proceed closes it anyway · /debug-status · /debug-abort", tone: "dim" },
-	];
+function callToAction(mode: HandoffMode): string {
+	if (mode === "reproduce") return "Reproduce the bug now.";
+	if (mode === "capture") return "Supply the requested report or file.";
+	if (mode === "question") return "Reply in the editor. The agent is waiting on an answer, not a reproduction.";
+	return "The agent stopped without saying what to reproduce or capture.";
+}
+
+/**
+ * What `/debug-proceed` does right now, with the numbers it would act on.
+ * The actions strip is a dim cheat-sheet under the editor, so this line never
+ * lights up: captured vs empty is in the wording, not the tone.
+ */
+export function proceedLine(session: DebugSession, logCount: number): WidgetLine {
+	const captured: string[] = [];
+	if (logCount > 0) captured.push(logEntries(logCount));
+	if (session.observations.length > 0) captured.push(plural(session.observations.length, "observation"));
+	if (session.artifacts.length > 0) captured.push(plural(session.artifacts.length, "artifact"));
+	return {
+		text: clip(
+			captured.length > 0
+				? `/debug-proceed → close this round, analyze ${captured.join(", ")}`
+				: "/debug-proceed → close this round with nothing captured yet",
+		),
+		tone: "dim",
+	};
+}
+
+/** The other exit: the bug is actually gone. */
+export function doneLine(): WidgetLine {
+	return {
+		text: clip("/debug-done → bug is fixed: remove probes and summarize"),
+		tone: "dim",
+	};
+}
+
+/** A model ordinal in any of the shapes the prompt's numbered list produces. */
+const LEADING_ORDINAL = /^\s*\d+\s*[.)、]\s*/;
+
+/**
+ * Every step carries the widget's own ordinal. The model numbers its list about
+ * as often as it does not, and an unnumbered run of dim lines reads as one
+ * paragraph rather than as a sequence to work through.
+ */
+export function numberedSteps(steps: readonly string[]): string[] {
+	const kept: string[] = [];
+	for (const step of steps) {
+		// The commands are named once, under the editor. A step that repeats them
+		// is the third copy on one screen, and the prompt forbids writing it.
+		if (/\/debug-(?:proceed|done)\b/i.test(step)) continue;
+		const body = step.replace(LEADING_ORDINAL, "").trim();
+		if (body.length === 0) continue;
+		kept.push(`${kept.length + 1}. ${body}`);
+	}
+	return kept;
+}
+
+function appendFoldedSteps(lines: WidgetLine[], steps: readonly string[]): void {
+	const stepBudget = Math.max(0, WIDGET_MAX_LINES - lines.length);
+	if (stepBudget === 0 || steps.length === 0) return;
+	const shownCount = steps.length > stepBudget ? Math.max(0, stepBudget - 1) : stepBudget;
+	for (const step of steps.slice(0, shownCount)) lines.push({ text: clip(step), tone: "dim" });
+	const hidden = steps.length - shownCount;
+	if (hidden > 0) lines.push({ text: `… +${plural(hidden, "more step")} in the transcript`, tone: "dim" });
 }
 
 /**
- * Reproduction-gate widget: the call to action, pending user evidence,
- * reproduction-step context, the command surface, and the live evidence
- * counter. Commands are the only interaction path — there is no menu. The
- * live log counter is always the final line within the host's line budget.
+ * Above the editor: the work this round asked for. Mode changes the wording
+ * and whether stale reproduction steps are worth repeating, never which
+ * commands the actions widget offers.
  */
-export function waitingWidgetLines(
+export function userTurnContextLines(
 	session: DebugSession,
-	logCount: number,
 	pendingEvidence: EvidenceRequest[] = pendingRequests(session),
 ): WidgetLine[] {
 	const round = currentRound(session);
-	const lines: WidgetLine[] = [{ text: PROCEED_REMINDER, tone: "accent" }];
+	const mode = round.handoff ?? "incomplete";
+	const lines: WidgetLine[] = [{ text: clip(callToAction(mode)), tone: mode === "incomplete" ? "warning" : "accent" }];
 	for (const request of pendingEvidence.slice(0, 2)) {
 		lines.push({ text: clip(`↪ ${request.id} ${request.title}: ${request.instructions[0] ?? ""}`), tone: "accent" });
 	}
-	for (const command of COMMAND_LINES) lines.push({ text: command, tone: "accent" });
-
-	// Reproduction details are useful context, but command discoverability and
-	// the live log counter must survive the host's ten-line widget limit.
-	const reserved = lines.length + 2;
-	const stepBudget = Math.max(0, WIDGET_MAX_LINES - reserved);
-	if (stepBudget > 0 && round.reproductionSteps.length > 0) {
-		const showMoreLine = round.reproductionSteps.length > stepBudget;
-		const shownCount = showMoreLine ? Math.max(0, stepBudget - 1) : stepBudget;
-		for (const step of round.reproductionSteps.slice(0, shownCount)) {
-			lines.push({ text: clip(step), tone: "dim" });
-		}
-		const hidden = round.reproductionSteps.length - shownCount;
-		if (hidden > 0) lines.push({ text: `… +${plural(hidden, "more step")} in the transcript`, tone: "dim" });
-	}
-	lines.push({
-		text: `evidence: ${plural(pendingEvidence.length, "pending request")}, ${plural(session.artifacts.length, "attached artifact")}`,
-		tone: pendingEvidence.length > 0 || session.artifacts.length > 0 ? "accent" : "dim",
-	});
-	lines.push({
-		text: `run ${round.runId ?? "none"} — ${logEntries(logCount)}`,
-		tone: logCount > 0 ? "accent" : "dim",
-	});
+	const steps = mode === "reproduce" || mode === "capture" ? numberedSteps(round.reproductionSteps) : [];
+	appendFoldedSteps(lines, steps);
 	return lines.slice(0, WIDGET_MAX_LINES);
 }
 
 /**
- * Render the status entry and the stage widget. `getLogCount` is only consulted
- * at the reproduction gate so idle stages do not touch the log files.
+ * Below the editor: a dim cheat-sheet next to the prompt so the user does not
+ * have to hunt above the transcript for what to type. A reply in the editor is
+ * still a legal exit — it just is not listed here, because the editor is
+ * already where that line would have pointed.
+ */
+export function userTurnActionLines(session: DebugSession, logCount: number): WidgetLine[] {
+	return [
+		{ text: TIPS_HEADER, tone: "dim" },
+		proceedLine(session, logCount),
+		doneLine(),
+		{ text: clip(OTHER_COMMANDS), tone: "dim" },
+	];
+}
+
+/**
+ * Render the footer status and the two stage widgets. `getLogCount` is only
+ * consulted on the user's turn so idle stages do not touch the log files.
  */
 export function applyUi(ctx: ExtensionContext | null, state: DebugState, getLogCount: () => number): void {
 	if (!ctx?.hasUI) return;
 	if (!state.active) {
 		ctx.ui.setStatus("debug-mode", undefined);
-		ctx.ui.setWidget("debug-mode", undefined);
+		clearWidgets(ctx);
 		return;
 	}
 	ctx.ui.setStatus("debug-mode", ctx.ui.theme.fg("warning", statusLabel(state)));
-	const lines =
-		state.stage === "awaiting_evidence"
-			? waitingWidgetLines(state, getLogCount())
-			: state.stage === "open"
-				? openWidgetLines(state)
-				: null;
-	if (!lines) {
-		ctx.ui.setWidget("debug-mode", undefined);
+	if (state.stage !== "user_turn") {
+		clearWidgets(ctx);
 		return;
 	}
-	ctx.ui.setWidget(
-		"debug-mode",
-		lines.map(line => ctx.ui.theme.fg(line.tone, line.text)),
-	);
+	const logCount = getLogCount();
+	ctx.ui.setWidget(WIDGET_CONTEXT_KEY, paint(ctx, userTurnContextLines(state)));
+	ctx.ui.setWidget(WIDGET_ACTIONS_KEY, paint(ctx, userTurnActionLines(state, logCount)), { placement: "belowEditor" });
 }