pi-goal-x 0.17.0 → 0.18.0

package/docs/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.18.0 (2026-05-29)
+
+### Features
+
+- **Enriched confirmation dialog** — proposal dialogs now render with full-width box-drawing section headers (`┌─ Section Name ─────┐`), per-status task coloring (`[x]` green, `[ ]` yellow), and goal structure section highlighting (`Objective:`, `Success criteria:`, etc. in accent). The 12-line MAX_CONTEXT_LINES cap is removed — full proposals are always visible.
+- **Hidden TUI debug mode** — Ctrl+Shift+X toggles a debug panel in the goal widget. Ctrl+Shift+N creates/removes test goals (written to `.pi/goals/debug/`), Ctrl+Shift+T injects sample tasks, Ctrl+Shift+R starts a mock audit, Ctrl+Shift+O opens the proposal dialog with realistic data.
+
+### Fixes
+
+- **Text wrapping inside boxes** — pipe-prefixed lines (`│   content`) that wrap now maintain the `│   ` prefix on continuation lines, keeping wrapped text inside the ASCII box. Task checkbox lines embedded in objective text also get the `│   ` prefix so they appear within the box.
+
+### Tests
+
+- 310 total tests (unchanged).
+
 ## 0.17.0 (2026-05-29)
 
 ### Features

package/extensions/goal-draft.ts

@@ -85,19 +85,29 @@ export function buildDraftConfirmationText(args: {
 }): string {
 	const lines: string[] = [];
 	const modeLabel = args.focus === "sisyphus" ? "Sisyphus (prompt/criteria style)" : "Normal goal";
-	lines.push("Goal draft ready for confirmation.");
+	lines.push("● Goal draft ready for confirmation.");
 	lines.push("");
-	lines.push("Draft details:");
-	lines.push(`Mode: ${modeLabel}`);
-	lines.push(`Auto-continue: ${args.autoContinue ? "yes" : "no"}`);
+	lines.push("─── Draft Details ───");
+	lines.push(`│   Mode: ${modeLabel}`);
+	lines.push(`│   Auto-continue: ${args.autoContinue ? "yes" : "no"}`);
 	lines.push("");
-	lines.push("Original topic:");
+	lines.push("─── Original Topic ───");
 	lines.push("");
-	lines.push(args.originalTopic.trim());
+	for (const topicLine of args.originalTopic.trim().split("\n")) {
+		if (topicLine.trim()) lines.push(`│   ${topicLine}`);
+	}
 	lines.push("");
-	lines.push("Proposed goal:");
+	lines.push("─── Proposed Goal ───");
 	lines.push("");
-	lines.push(args.objective);
+	for (const objLine of args.objective.split("\n")) {
+		const trimmed = objLine.trim();
+		if (!trimmed) continue;
+		if (trimmed.startsWith("│")) {
+			lines.push(objLine);
+		} else {
+			lines.push(`│   ${objLine}`);
+		}
+	}
 	return lines.join("\n");
 }
 
@@ -109,22 +119,40 @@ export function buildTweakConfirmationText(args: {
 }): string {
 	const lines: string[] = [];
 	const modeLabel = args.sisyphus ? "Sisyphus (prompt/criteria style)" : "Normal goal";
-	lines.push("Goal tweak ready for confirmation.");
+	lines.push("● Goal tweak ready for confirmation.");
 	lines.push("");
-	lines.push("Draft details:");
-	lines.push(`Mode: ${modeLabel}`);
+	lines.push("─── Draft Details ───");
+	lines.push(`│   Mode: ${modeLabel}`);
 	lines.push("");
-	lines.push("Change:");
+	lines.push("─── Change ───");
 	lines.push("");
-	lines.push(args.changeSummary);
+	for (const changeLine of args.changeSummary.split("\n")) {
+		if (changeLine.trim()) lines.push(`│   ${changeLine}`);
+	}
 	lines.push("");
-	lines.push("Current objective:");
+	lines.push("─── Current Objective ───");
 	lines.push("");
-	lines.push(args.currentObjective);
+	for (const curLine of args.currentObjective.split("\n")) {
+		const trimmed = curLine.trim();
+		if (!trimmed) continue;
+		if (trimmed.startsWith("│")) {
+			lines.push(curLine);
+		} else {
+			lines.push(`│   ${curLine}`);
+		}
+	}
 	lines.push("");
-	lines.push("Proposed new objective:");
+	lines.push("─── Proposed New Objective ───");
 	lines.push("");
-	lines.push(args.newObjective);
+	for (const newLine of args.newObjective.split("\n")) {
+		const trimmed = newLine.trim();
+		if (!trimmed) continue;
+		if (trimmed.startsWith("│")) {
+			lines.push(newLine);
+		} else {
+			lines.push(`│   ${newLine}`);
+		}
+	}
 	return lines.join("\n");
 }
 

package/extensions/goal-questionnaire.ts

@@ -302,8 +302,6 @@ export async function runGoalQuestionnaire(ctx: ExtensionContext, rawQuestions:
 			if (matchesKey(data, Key.escape)) submit(true);
 		}
 
-		const MAX_CONTEXT_LINES = 12; // prevent viewport jumping by capping context display
-
 			function render(width: number): string[] {
 			if (cachedLines) return cachedLines;
 			const safeWidth = Math.max(20, width);
@@ -312,16 +310,109 @@ export async function runGoalQuestionnaire(ctx: ExtensionContext, rawQuestions:
 			const opts = displayOptions();
 			const add = (s: string) => lines.push(truncateToWidth(s, safeWidth, "…", true));
 			const addWrapped = (s: string) => lines.push(...wrapTextWithAnsi(s, safeWidth));
+			/**
+			 * Wraps a pipe-prefixed line and prepends "│   " to continuation lines
+			 * so wrapped content stays within the ASCII box.
+			 */
+			const addWrappedPipe = (styledLine: string) => {
+				const wrapped = wrapTextWithAnsi(styledLine, safeWidth);
+				for (let i = 0; i < wrapped.length; i++) {
+					lines.push(i === 0 ? wrapped[i] : "│   " + wrapped[i]);
+				}
+			};
+
+			/** Render context lines with per-line styling. No truncation. */
+			const renderContextLines = (context: string): void => {
+				const rawLines = context.split("\n");
+				for (const rawLine of rawLines) {
+					const trimmed = rawLine.trim();
+					// Empty line — preserve as spacing
+					if (!trimmed) {
+						lines.push("");
+						continue;
+					}
+
+					// 1. Announcement header — "● Goal draft/tweak ready for confirmation."
+					if (/^● Goal (draft|tweak) ready for confirmation\.$/.test(trimmed)) {
+						addWrapped(theme.fg("accent", rawLine));
+						continue;
+					}
+
+					// 2. Section marker — "─── Name ───" → full-width box-drawing header
+					const sectionMatch = trimmed.match(/^───\s+(.+?)\s+───$/);
+					if (sectionMatch) {
+						const sectionName = sectionMatch[1];
+						const namePart = ` ${sectionName} `;
+						const left = "┌─";
+						const right = "─┐";
+						const fill = Math.max(0, safeWidth - 2 - visibleWidth(left + namePart + right));
+						add(theme.fg("accent", left + namePart + "─".repeat(fill) + right));
+						continue;
+					}
+
+					// 3. Lines with │ prefix come from buildDraftConfirmationText / buildTweakConfirmationText.
+					if (trimmed.startsWith("│")) {
+						const afterPipe = trimmed.slice(1).trim();
+						// 3a. Task checkbox under │ prefix — detect before key-value to avoid
+						// "[x] t1: ..." being misinterpreted as a key-value pair.
+						const pipeTaskMatch = afterPipe.match(/^(\[.\])(\s+)(.+)$/);
+						if (pipeTaskMatch) {
+							const bracket = pipeTaskMatch[1];
+							const sep = pipeTaskMatch[2];
+							const rest = pipeTaskMatch[3];
+							// Preserve inner whitespace between │ and the task marker (e.g. "   " in "│   [x]...")
+							const pipeContent = trimmed.slice(1);
+							const innerWs = pipeContent.slice(0, pipeContent.length - pipeContent.trimStart().length);
+							const linePrefix = "│" + innerWs;
+							const color = bracket === "[x]" ? "success" : "warning";
+							addWrappedPipe(linePrefix + theme.fg(color, bracket) + sep + theme.fg("muted", rest));
+							continue;
+						}
+						// 3b. Key-value content (e.g. "│   Mode: Normal goal", "│   Auto-continue: yes")
+						if (afterPipe.includes(": ")) {
+							const colonIdx = afterPipe.indexOf(": ");
+							const val = afterPipe.slice(colonIdx + 2).trim();
+							const keyPart = rawLine.slice(0, rawLine.indexOf(afterPipe) + colonIdx + 2);
+							if (val === "yes" || val === "no") {
+								addWrappedPipe(theme.fg("muted", keyPart) + theme.fg(val === "yes" ? "success" : "warning", val));
+								continue;
+							}
+							addWrappedPipe(theme.fg("muted", rawLine));
+							continue;
+						}
+						// 3c. Generic content under │ prefix (topic, goal text, etc.)
+						addWrappedPipe(theme.fg("muted", rawLine));
+						continue;
+					}
+
+					// 4. Goal objective structure lines — detected before task checkboxes
+					// because === Goal could overlap with ─── markers but we already checked those.
+					const GOAL_SECTION_RE = /^(=== (Goal|Sisyphus Goal) ===|Objective:|Success criteria:|Boundaries:|Constraints:|Verification contract:|If blocked:)/;
+					if (GOAL_SECTION_RE.test(trimmed)) {
+						addWrapped(theme.fg("accent", rawLine));
+						continue;
+					}
+
+					// 5. Actual box-drawing borders (┌ └ ├ └ ┐ ┤ ┘ ─) — NOT │ which is handled above
+					if (/^[┌├└┐┤┘─]/.test(trimmed)) {
+						addWrapped(theme.fg("dim", rawLine));
+						continue;
+					}
+
+					// 6. Task checkbox item — "[ ] ...", "[x] ...", or "[~] ..." (with optional indent)
+					const checkMatch = trimmed.match(/^(\[.\])(\s+)(.+)$/);
+					if (checkMatch) {
+						const bracket = checkMatch[1];
+						const sep = checkMatch[2];
+						const rest = checkMatch[3];
+						const indent = rawLine.slice(0, rawLine.length - trimmed.length);
+						const color = bracket === "[x]" ? "success" : "warning";
+						addWrapped(indent + theme.fg(color, bracket) + sep + theme.fg("muted", rest));
+						continue;
+					}
 
-			/** Wraps text and caps at MAX_CONTEXT_LINES to prevent viewport jumping. */
-			const addContextWrapped = (s: string) => {
-				const wrapped = wrapTextWithAnsi(s, safeWidth);
-				if (wrapped.length <= MAX_CONTEXT_LINES) {
-					lines.push(...wrapped);
-				} else {
-					lines.push(...wrapped.slice(0, MAX_CONTEXT_LINES));
-					const overflow = wrapped.length - MAX_CONTEXT_LINES;
-					lines.push(theme.fg("dim", `  ... ${overflow} more line${overflow === 1 ? "" : "s"} (full details after confirmation)`));
+					// 7. Default: any remaining content (fallback)
+					addWrapped(theme.fg("muted", rawLine));
 				}
 			};
 
@@ -354,7 +445,7 @@ export async function runGoalQuestionnaire(ctx: ExtensionContext, rawQuestions:
 
 			if (inputMode && q) {
 				addWrapped(theme.fg("text", ` ${q.question}`));
-				if (q.context) addContextWrapped(theme.fg("muted", ` ${q.context}`));
+				if (q.context) renderContextLines(q.context);
 				lines.push("");
 				if (q.options.length > 0) {
 					renderOptions();
@@ -375,7 +466,7 @@ export async function runGoalQuestionnaire(ctx: ExtensionContext, rawQuestions:
 				add(allAnswered() ? theme.fg("success", " Press Enter to submit") : theme.fg("warning", ` Unanswered: ${questions.filter((qq) => !answers.has(qq.id)).map((qq) => qq.id).join(", ")}`));
 			} else if (q) {
 				addWrapped(theme.fg("text", ` ${q.question}`));
-				if (q.context) addContextWrapped(theme.fg("muted", ` ${q.context}`));
+				if (q.context) renderContextLines(q.context);
 				// Auditor toggle line between context and options
 				if (auditorToggleInit) {
 					const circle = auditorEnabled ? "●" : "○";

package/extensions/goal.ts

@@ -81,9 +81,14 @@ import {
 import { buildCompactionSummary } from "./goal-compaction.ts";
 import {
 	archiveGoalFile,
+	atomicWriteGoalFile,
+	ensureDirectory,
+	GOALS_DIR,
 	mergeGoalPromptFromDisk,
 	readActiveGoalPool,
+	safeUnlinkGoalFile,
 	sanitizeGoalPaths,
+	serializeGoalFile,
 	writeActiveGoalFile,
 } from "./storage/goal-files.ts";
 import {
@@ -410,6 +415,10 @@ export default function goalExtension(pi: ExtensionAPI): void {
 	let auditAnimationTimer: ReturnType<typeof setInterval> | null = null;
 	let auditAbortController: AbortController | null = null;
 	let showingEscapeDialog = false;
+	let debugMode = false;
+	let debugGoalCounter = 0;
+	let debugMockAuditTimer: ReturnType<typeof setInterval> | null = null;
+	const DEBUG_GOALS_DIR = ".pi/goals/debug";
 
 
 	// Per-turn flags reset in turn_start (#4, C9 fix).
@@ -805,6 +814,7 @@ export default function goalExtension(pi: ExtensionAPI): void {
 							getOpenGoalCount: () => openGoals().length,
 							getAuditorProgress: () => auditProgress,
 							getSettings: () => loadGoalSettings(ctx.cwd),
+							getDebugMode: () => debugMode,
 						});
 						return goalWidgetComponent;
 					},
@@ -833,6 +843,7 @@ export default function goalExtension(pi: ExtensionAPI): void {
 						getOpenGoalCount: () => openGoals().length,
 						getAuditorProgress: () => auditProgress,
 						getSettings: () => loadGoalSettings(ctx.cwd),
+						getDebugMode: () => debugMode,
 					});
 					return goalWidgetComponent;
 				},
@@ -971,8 +982,291 @@ export default function goalExtension(pi: ExtensionAPI): void {
 				pauseActiveGoal(ctx);
 				return { consume: true };
 			}
+
+			// ── Debug mode keybindings (hidden from normal view) ────────────────
+
+			// Ctrl+Shift+X — toggle debug mode on/off
+			if (matchesKey(data, "ctrl+shift+x")) {
+				debugMode = !debugMode;
+				ctx.ui.notify(debugMode ? "Debug mode ON" : "Debug mode OFF", "info");
+				goalWidgetComponent?.invalidate();
+				return { consume: true };
+			}
+
+			// Only process the following debug keybindings when debug mode is active
+			if (!debugMode) return undefined;
+
+			// Ctrl+Shift+N — create a test goal
+			if (matchesKey(data, "ctrl+shift+n")) {
+				createDebugGoal(ctx);
+				return { consume: true };
+			}
+
+			// Ctrl+Shift+T — inject sample tasks into current goal
+			if (matchesKey(data, "ctrl+shift+t")) {
+				injectDebugTasks(ctx);
+				return { consume: true };
+			}
+
+			// Ctrl+Shift+R — start mock completion audit
+			if (matchesKey(data, "ctrl+shift+r")) {
+				startMockAudit(ctx);
+				return { consume: true };
+			}
+
+			// Ctrl+Shift+O — open proposal dialog with sample data
+			if (matchesKey(data, "ctrl+shift+o")) {
+				openDebugProposal(ctx);
+				return { consume: true };
+			}
+
 			return undefined;
 		});
+
+		/** Toggle a test goal: create (first press) or remove (second press) */
+		function createDebugGoal(ctx: ExtensionContext): void {
+			const prev = state.goal;
+			if (prev && prev.id.startsWith("debug-")) {
+				// Toggle off — remove debug goal entirely (no archive, full delete)
+				const filePath = `${DEBUG_GOALS_DIR}/debug_goal.md`;
+				try {
+					safeUnlinkGoalFile({ cwd: ctx.cwd }, DEBUG_GOALS_DIR, filePath);
+				} catch {}
+				const prevId = prev.id;
+				state.goal = null;
+				if (focusedGoalId === prevId) {
+					goalsById.delete(prevId);
+					focusedGoalId = null;
+				}
+				clearStoppedRuntimeState();
+				syncGoalTools();
+				updateUI(ctx);
+				ctx.ui.notify("Debug goal removed", "info");
+				return;
+			}
+
+			// Toggle on — create a new debug goal, write to temp dir
+			debugGoalCounter++;
+			const goal = createGoal({
+				objective: "=== Goal ===\nObjective: Debug test goal",
+				autoContinue: true,
+				sisyphus: false,
+			});
+			goal.id = `debug-${nowIso().replace(/[:.]/g, "-")}-${debugGoalCounter}`;
+			goal.createdAt = nowIso();
+			goal.updatedAt = nowIso();
+			goal.activePath = `${DEBUG_GOALS_DIR}/debug_goal.md`;
+			const gfc = { cwd: ctx.cwd };
+			ensureDirectory(gfc, DEBUG_GOALS_DIR);
+			atomicWriteGoalFile(gfc, DEBUG_GOALS_DIR, goal.activePath, serializeGoalFile(goal));
+			setGoal(goal, ctx, false, "created"); // no persist (we already wrote the file)
+			ctx.ui.notify(`Debug goal created: ${goal.id}`, "info");
+		}
+
+		/** Inject 3-4 sample tasks into the current goal */
+		function injectDebugTasks(ctx: ExtensionContext): void {
+			if (!state.goal) {
+				ctx.ui.notify("No goal to inject tasks into; create one first (Ctrl+Shift+N)", "warning");
+				return;
+			}
+			const now = nowIso();
+			const tasks: GoalTask[] = [
+				{
+					id: "t1",
+					title: "Set up project structure",
+					status: "complete",
+					completedAt: now,
+					subtasks: [
+						{ id: "t1a", title: "Initialize repo", status: "complete", completedAt: now },
+						{ id: "t1b", title: "Add build config", status: "pending" },
+					],
+				},
+				{
+					id: "t2",
+					title: "Implement core feature",
+					status: "pending",
+				},
+				{
+					id: "t3",
+					title: "Write tests",
+					status: "pending",
+				},
+			];
+			const next = cloneGoal(state.goal);
+			next.taskList = { tasks, blockCompletion: false, proposedAt: now };
+			next.updatedAt = now;
+			setGoal(next, ctx);
+			ctx.ui.notify("Sample tasks injected (3 tasks, 1 completed)", "info");
+		}
+
+		/** Stop mock audit timer if running */
+		function stopMockAuditTimer(): void {
+			if (debugMockAuditTimer) {
+				clearInterval(debugMockAuditTimer);
+				debugMockAuditTimer = null;
+			}
+		}
+
+		/** Start a mock completion audit that transitions through phases */
+		function startMockAudit(ctx: ExtensionContext): void {
+			stopMockAuditTimer();
+			const startedAt = Date.now();
+			const phases: { phase: AuditorWidgetProgress["phase"]; atMs: number; label: string; percentage: number }[] = [
+				{ phase: "tool_executing", atMs: 0, label: "Checking test results...", percentage: 10 },
+				{ phase: "tool_executing", atMs: 800, label: "Verifying requirements...", percentage: 30 },
+				{ phase: "thinking", atMs: 1800, label: "Evaluating completion criteria...", percentage: 60 },
+				{ phase: "producing_report", atMs: 3200, label: "Writing audit report...", percentage: 85 },
+				{ phase: "done", atMs: 4800, label: "Audit complete", percentage: 100 },
+			];
+			auditProgress = {
+				recentOutput: [],
+				phase: "running",
+				elapsedMs: 0,
+			};
+			goalWidgetComponent?.invalidate();
+
+			debugMockAuditTimer = setInterval(() => {
+				const elapsed = Date.now() - startedAt;
+				let currentPhase: AuditorWidgetProgress["phase"] = "done";
+				let currentLabel = "Audit complete";
+				let currentPct = 100;
+				for (let i = phases.length - 1; i >= 0; i--) {
+					if (elapsed >= phases[i].atMs) {
+						currentPhase = phases[i].phase;
+						currentLabel = phases[i].label;
+						currentPct = phases[i].percentage;
+						break;
+					}
+				}
+				auditProgress = {
+					phase: currentPhase,
+					label: currentLabel,
+					percentage: currentPct,
+					elapsedMs: elapsed,
+					recentOutput: auditProgress?.recentOutput ?? [],
+				};
+				if (currentPhase === "done") {
+					if (auditProgress) auditProgress.recentOutput = [
+						"✓ All requirements verified",
+						"✓ Tests pass: 310/310",
+						"✓ No truncation cap remaining",
+					];
+					stopMockAuditTimer();
+					// Auto-clear audit after 3 more seconds
+					setTimeout(() => {
+						auditProgress = null;
+						goalWidgetComponent?.invalidate();
+					}, 3000);
+				}
+				goalWidgetComponent?.invalidate();
+			}, 100);
+			debugMockAuditTimer.unref?.();
+		}
+
+		/** Render task lines exactly like propose_task_list does */
+		function renderDebugTaskLines(tasks: GoalTask[], indent = 0): string[] {
+			const prefix = "  ".repeat(indent);
+			const lines: string[] = [];
+			for (const t of tasks) {
+				const marker = t.status === "complete" ? "[x]" : t.status === "skipped" ? "[~]" : "[ ]";
+				const lw = t.lightweightSubtasks ? " (lightweight)" : "";
+				lines.push(`${prefix}${marker} ${t.id}: ${t.title}${lw}`);
+				if (t.subtasks && t.subtasks.length > 0) {
+					lines.push(...renderDebugTaskLines(t.subtasks, indent + 1));
+				}
+			}
+			return lines;
+		}
+
+		/** Show the proposal dialog using real goal state — no hardcoded text */
+		function openDebugProposal(ctx: ExtensionContext): void {
+			// Build a fresh debug goal + tasks in memory for the dialog
+			debugGoalCounter++;
+			const goal = createGoal({
+				objective: `=== Goal ===
+Objective: Add collapsible task sections to the goal widget so large task lists are navigable
+
+Success criteria:
+- Tasks are grouped into sections by status (pending, active, complete) with visible section headers
+- Each section header is toggleable — clicking it expands or collapses that section
+- When collapsed, the section shows a header line only with a task count badge
+- When expanded, tasks render with normal indentation and per-line styling
+- Default state: pending section expanded, active and complete sections collapsed
+- Section state is tracked per-render (no persistence needed)
+- All 310 existing tests still pass
+
+Boundaries:
+- In scope: GoalWidgetComponent.render() grouping logic, section header toggling, expand/collapse state per render cycle
+- Out of scope: task reordering, drag-and-drop, keyboard navigation for sections, persistence of section state across pi restarts
+- Out of scope: modifying GoalTask or GoalRecord types
+
+Constraints:
+- Render width must respect the existing width parameter — no hardcoded widths
+- Section collapse state is a render-only map, not stored in goal record
+- Collapse toggle must be keyboard-accessible via existing widget interaction model
+- Do not change the GoalWidgetComponent public API (constructor options, render signature)
+- Section headers must use theme.fg("accent", ...) consistent with existing render patterns
+
+Verification contract:
+- Run npm test and confirm 310/310 pass (0 failures)
+- Read render method and confirm task grouping logic exists
+- Read expand/collapse toggle handler and confirm it inverts section state
+- Confirm collapsed sections only render the header line with task count
+- Confirm expanded sections render tasks with correct indentation and styling`,
+				autoContinue: true,
+				sisyphus: false,
+			});
+			goal.id = `debug-${nowIso().replace(/[:.]/g, "-")}-${debugGoalCounter}`;
+			goal.createdAt = nowIso();
+			goal.updatedAt = nowIso();
+
+			const now = nowIso();
+			const tasks: GoalTask[] = [
+				{
+					id: "t1",
+					title: "Set up project structure",
+					status: "complete",
+					completedAt: now,
+					subtasks: [
+						{ id: "t1a", title: "Initialize repo", status: "complete", completedAt: now },
+						{ id: "t1b", title: "Add build config", status: "pending" },
+					],
+				},
+				{
+					id: "t2",
+					title: "Implement core feature",
+					status: "pending",
+					subtasks: [
+						{ id: "t2a", title: "Status grouping logic", status: "pending" },
+						{ id: "t2b", title: "Section header component", status: "pending" },
+						{ id: "t2c", title: "Expand/collapse state", status: "pending" },
+						{ id: "t2d", title: "Task count badge", status: "pending" },
+					],
+				},
+				{ id: "t3", title: "Update tests", status: "pending" },
+				{ id: "t4", title: "Manual TUI verification", status: "pending" },
+			];
+			goal.taskList = { tasks, blockCompletion: false, proposedAt: now };
+
+			// Build proposal from goal state — exactly like the real flow
+			const confirmationText = buildDraftConfirmationText({
+				focus: "goal",
+				originalTopic: "Refactor the goal widget component to support collapsible task sections",
+				objective: goal.objective,
+				autoContinue: goal.autoContinue,
+			});
+
+			// Append task proposal — exactly like propose_task_list would
+			const taskLines = renderDebugTaskLines(tasks).map((l) => `│   ${l}`);
+			const taskProposal = [
+				"",
+				"│ Proposed task list:",
+				"",
+				...taskLines,
+			].join("\n");
+
+			showProposalDialog(ctx, confirmationText + taskProposal, "goal", true);
+		}
 	}
 
 	function sendQueuedContinuation(ctx: ExtensionContext, goalId: string): void {

package/extensions/widgets/goal-widget.ts

@@ -14,11 +14,15 @@ import type { GoalSettings } from "../goal-settings.ts";
 type GoalWidgetColor = Extract<ThemeColor, "accent" | "warning" | "success" | "error" | "dim" | "muted" | "text">;
 
 export interface GoalWidgetRecord extends GoalDisplayRecordLike {
+	id: string;
+	createdAt: string;
+	updatedAt: string;
 	activePath?: string | null;
 	archivedPath?: string | null;
 	pauseReason?: string;
 	pauseSuggestedAction?: string;
 	taskList?: GoalTaskList | null;
+	verificationContract?: string;
 }
 
 export interface AuditorWidgetProgress {
@@ -41,6 +45,7 @@ export interface GoalWidgetOptions {
 	getOpenGoalCount?: () => number;
 	getAuditorProgress?: () => AuditorWidgetProgress | null;
 	getSettings?: () => GoalSettings;
+	getDebugMode?: () => boolean;
 }
 
 function fit(value: string, width: number): string {
@@ -280,8 +285,8 @@ export class GoalWidgetComponent implements Component {
 	private getGoal: () => GoalWidgetRecord | null;
 	private getOpenGoalCount: () => number;
 	private getAuditorProgress: () => AuditorWidgetProgress | null;
-
 	private getSettings: () => GoalSettings;
+	private getDebugMode: () => boolean;
 
 	constructor(options: GoalWidgetOptions) {
 		this.theme = options.theme;
@@ -290,19 +295,75 @@ export class GoalWidgetComponent implements Component {
 		this.getOpenGoalCount = options.getOpenGoalCount ?? (() => (this.getGoal() ? 1 : 0));
 		this.getAuditorProgress = options.getAuditorProgress ?? (() => null);
 		this.getSettings = options.getSettings ?? (() => ({}));
+		this.getDebugMode = options.getDebugMode ?? (() => false);
 	}
 
 	update(): void {
 		this.tui.requestRender();
 	}
 
+	/** Render debug info panel when debug mode is active */
+	private renderDebugPanel(width: number): string[] {
+		const t = this.theme;
+		const lines: string[] = [];
+		const safeWidth = Math.max(20, width);
+
+		// Divider
+		lines.push(t.fg("dim", "─".repeat(safeWidth)));
+		lines.push(t.fg("warning", "⊙ [DEBUG MODE]"));
+		lines.push("");
+
+		const goal = this.getGoal();
+		if (goal) {
+			lines.push(t.fg("dim", `  id: ${goal.id}`));
+			lines.push(t.fg("dim", `  status: ${goal.status}`));
+			lines.push(t.fg("dim", `  objective: ${truncateText(goal.objective, 80)}`));
+			lines.push(t.fg("dim", `  sisyphus: ${goal.sisyphus}`));
+			lines.push(t.fg("dim", `  autoContinue: ${goal.autoContinue}`));
+			lines.push(t.fg("dim", `  tokens: ${goal.usage.tokensUsed}`));
+			lines.push(t.fg("dim", `  activeSeconds: ${goal.usage.activeSeconds}`));
+			lines.push(t.fg("dim", `  createdAt: ${goal.createdAt}`));
+			lines.push(t.fg("dim", `  updatedAt: ${goal.updatedAt}`));
+			if (goal.pauseReason) lines.push(t.fg("dim", `  pauseReason: ${goal.pauseReason}`));
+			if (goal.pauseSuggestedAction) lines.push(t.fg("dim", `  pauseSuggestedAction: ${goal.pauseSuggestedAction}`));
+			if (goal.stopReason) lines.push(t.fg("dim", `  stopReason: ${goal.stopReason}`));
+			if (goal.activePath) lines.push(t.fg("dim", `  activePath: ${goal.activePath}`));
+			if (goal.archivedPath) lines.push(t.fg("dim", `  archivedPath: ${goal.archivedPath}`));
+			if (goal.verificationContract) lines.push(t.fg("dim", `  vContract: ${truncateText(goal.verificationContract, 60)}`));
+
+			// Task tree summary
+			if (goal.taskList && goal.taskList.tasks.length > 0) {
+				const { total, done } = countFlatTasks(goal.taskList.tasks);
+				lines.push(t.fg("dim", `  tasks: ${done}/${total}`));
+				const firstPending = findFirstPending(goal.taskList.tasks);
+				if (firstPending) lines.push(t.fg("dim", `  next: ${firstPending.id} (${truncateText(firstPending.title, 40)})`));
+			}
+		} else {
+			lines.push(t.fg("dim", "  (no goal)"));
+		}
+
+		lines.push("");
+		lines.push(t.fg("dim", "── Debug keybindings ──"));
+		lines.push(t.fg("dim", "  Ctrl+Shift+X  Toggle debug mode"));
+		lines.push(t.fg("dim", "  Ctrl+Shift+N  Create test goal"));
+		lines.push(t.fg("dim", "  Ctrl+Shift+T  Inject sample tasks"));
+		lines.push(t.fg("dim", "  Ctrl+Shift+R  Mock audit animation"));
+		lines.push(t.fg("dim", "  Ctrl+Shift+O  Open proposal dialog"));
+
+		return lines;
+	}
+
 	render(width: number): string[] {
 		const settings = this.getSettings();
-		return renderGoalWidgetLines(this.getGoal(), this.theme, width, {
+		const lines = renderGoalWidgetLines(this.getGoal(), this.theme, width, {
 			openGoalCount: this.getOpenGoalCount(),
 			auditorProgress: this.getAuditorProgress(),
 			disableTasks: settings.disableTasks,
 		});
+		if (this.getDebugMode()) {
+			lines.push(...this.renderDebugPanel(width));
+		}
+		return lines;
 	}
 
 	invalidate(): void {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-goal-x",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Goal mode extension for pi: persistent long-running objectives, /goal-set drafting, Sisyphus prompt style, autoContinue, and an above-editor status overlay. Fork of @capyup/pi-goal.",
   "license": "MIT",
   "author": "pi-goal-x contributors",