feat(hooks): add setWidget API for multi-line status displays

- ctx.ui.setWidget(key, lines) for multi-line displays above editor
- Widgets appear below 'Working...' indicator, above editor
- Supports ANSI styling including strikethrough
- Added theme.strikethrough() method
- Plan-mode hook now shows todo list with checkboxes
- Completed items show checked box and strikethrough text

packages/coding-agent/examples/hooks/plan-mode.ts

@@ -229,18 +229,34 @@ export default function planModeHook(pi: HookAPI) {
 		default: false,
 	});
 
-	// Helper to update footer status
+	// Helper to update status displays
 	function updateStatus(ctx: HookContext) {
+		// Update footer status
 		if (executionMode && todoItems.length > 0) {
 			const completed = todoItems.filter((t) => t.completed).length;
-			const total = todoItems.length;
-			const progress = `${completed}/${total}`;
-			ctx.ui.setStatus("plan-mode", ctx.ui.theme.fg("accent", `📋 ${progress}`));
+			ctx.ui.setStatus("plan-mode", ctx.ui.theme.fg("accent", `📋 ${completed}/${todoItems.length}`));
 		} else if (planModeEnabled) {
 			ctx.ui.setStatus("plan-mode", ctx.ui.theme.fg("warning", "⏸ plan"));
 		} else {
 			ctx.ui.setStatus("plan-mode", undefined);
 		}
+
+		// Update widget with todo list
+		if (executionMode && todoItems.length > 0) {
+			const lines: string[] = [];
+			for (const item of todoItems) {
+				if (item.completed) {
+					lines.push(
+						ctx.ui.theme.fg("success", "☑ ") + ctx.ui.theme.fg("muted", ctx.ui.theme.strikethrough(item.text)),
+					);
+				} else {
+					lines.push(ctx.ui.theme.fg("muted", "☐ ") + item.text);
+				}
+			}
+			ctx.ui.setWidget("plan-todos", lines);
+		} else {
+			ctx.ui.setWidget("plan-todos", undefined);
+		}
 	}
 
 	// Helper to toggle plan mode