pi-squad 0.1.0 → 0.4.14

package/src/panel/squad-panel.ts

@@ -1,11 +1,15 @@
 /**
  * squad-panel.ts — Main overlay component for the squad TUI panel.
  *
- * Manages view switching between task list, message view, and agent list.
- * Adapts layout: wide screen (>=160 cols) = right panel, narrow = centered overlay.
+ * Uses ctx.ui.custom() with a proper done() callback for lifecycle management.
+ * Inspired by pi-interactive-shell's overlay pattern:
+ * - Component implements Component + Focusable
+ * - handleInput for key dispatch
+ * - render(width) returns string[]
+ * - done() closes the overlay cleanly
  */
 
-import type { Component, Focusable, TUI, OverlayHandle, OverlayOptions } from "@mariozechner/pi-tui";
+import type { Component, Focusable, TUI } from "@mariozechner/pi-tui";
 import { matchesKey, visibleWidth, truncateToWidth } from "@mariozechner/pi-tui";
 import type { Theme } from "@mariozechner/pi-coding-agent";
 import type { PanelState, PanelView } from "../types.js";
@@ -15,10 +19,15 @@ import { MessageView } from "./message-view.js";
 import * as store from "../store.js";
 
 // ============================================================================
-// Constants
+// Result type — what the panel returns when closed
 // ============================================================================
 
-const WIDE_THRESHOLD = 160;
+export interface SquadPanelResult {
+	/** How the panel was closed */
+	action: "close" | "send-message";
+	taskId?: string;
+	message?: string;
+}
 
 // ============================================================================
 // Squad Panel
@@ -29,11 +38,14 @@ export class SquadPanel implements Component, Focusable {
 
 	private tui: TUI;
 	private theme: Theme;
+	private done: (result: SquadPanelResult) => void;
 	private scheduler: Scheduler;
 	private squadId: string;
-	private handle: OverlayHandle | null = null;
-	/** Callback to send a human message — set by the extension */
-	onSendMessage?: (taskId: string, message: string) => void;
+
+	/** Callback for sending messages — set by the extension */
+	onSendMessage?: (taskId: string, message: string) => Promise<void>;
+	/** Callback when panel closes */
+	onClose?: () => void;
 
 	private state: PanelState = {
 		view: "tasks",
@@ -45,116 +57,54 @@ export class SquadPanel implements Component, Focusable {
 
 	private taskListView: TaskListView;
 	private messageView: MessageView;
-
-	private refreshInterval: ReturnType<typeof setInterval> | null = null;
-
-	constructor(tui: TUI, theme: Theme, scheduler: Scheduler, squadId: string) {
+	/** Debounced render timer */
+	private renderTimeout: ReturnType<typeof setTimeout> | null = null;
+	/** Auto-refresh timer for live activity */
+	private refreshTimer: ReturnType<typeof setInterval> | null = null;
+	private finished = false;
+
+	constructor(
+		tui: TUI,
+		theme: Theme,
+		scheduler: Scheduler,
+		squadId: string,
+		done: (result: SquadPanelResult) => void,
+	) {
 		this.tui = tui;
 		this.theme = theme;
 		this.scheduler = scheduler;
 		this.squadId = squadId;
+		this.done = done;
 
 		this.taskListView = new TaskListView(theme, squadId);
 		this.messageView = new MessageView(theme, squadId);
-	}
-
-	// =========================================================================
-	// Overlay Lifecycle
-	// =========================================================================
-
-	/** Show the panel as an overlay */
-	show(): void {
-		if (this.handle) return;
 
-		this.handle = this.tui.showOverlay(this, this.getOverlayOptions());
-
-		// Refresh panel periodically
-		this.refreshInterval = setInterval(() => {
+		// Auto-refresh for live activity. 5s is enough — faster causes
+		// flicker and races with agents writing to JSONL files.
+		this.refreshTimer = setInterval(() => {
 			this.tui.requestRender();
-		}, 2000);
+		}, 5000);
 	}
 
-	/** Hide the panel */
-	hide(): void {
-		if (this.handle) {
-			this.handle.hide();
-			this.handle = null;
-		}
-		if (this.refreshInterval) {
-			clearInterval(this.refreshInterval);
-			this.refreshInterval = null;
-		}
+	/** Trigger a render update (called from outside, e.g., on scheduler events) */
+	requestUpdate(): void {
+		this.debouncedRender();
 	}
 
-	/** Toggle panel visibility */
-	toggle(): void {
-		if (this.handle) {
-			if (this.handle.isHidden()) {
-				this.handle.setHidden(false);
-			} else {
-				this.handle.setHidden(true);
-			}
-		} else {
-			this.show();
-		}
-	}
-
-	/** Toggle focus between panel and main editor.
-	 *  Wide screen: panel stays visible, just switch focus.
-	 *  Narrow screen: show/hide since overlay covers content.
-	 */
-	toggleFocus(): void {
-		if (!this.handle) {
-			this.show();
-			return;
-		}
-		const wide = this.tui.columns >= WIDE_THRESHOLD;
-
-		if (this.handle.isHidden()) {
-			this.handle.setHidden(false);
-			this.handle.focus();
-		} else if (this.handle.isFocused()) {
-			if (wide) {
-				// Wide: release focus back to editor, panel stays visible
-				this.handle.unfocus();
-			} else {
-				// Narrow: hide overlay entirely
-				this.handle.setHidden(true);
-			}
-		} else {
-			// Visible but not focused — take focus
-			this.handle.focus();
-		}
-	}
-
-	/** Check if panel is visible */
-	isVisible(): boolean {
-		return this.handle !== null && !this.handle.isHidden();
-	}
-
-	dispose(): void {
-		this.hide();
+	private debouncedRender(): void {
+		if (this.renderTimeout) clearTimeout(this.renderTimeout);
+		this.renderTimeout = setTimeout(() => {
+			this.renderTimeout = null;
+			this.tui.requestRender();
+		}, 16);
 	}
 
-	// =========================================================================
-	// Overlay Options (adaptive layout)
-	// =========================================================================
-
-	private getOverlayOptions(): OverlayOptions {
-		const wide = this.tui.columns >= WIDE_THRESHOLD;
-		if (wide) {
-			return {
-				anchor: "top-right",
-				width: "35%",
-				maxHeight: "100%",
-				margin: { top: 0, right: 0, bottom: 1, left: 0 },
-			};
-		}
-		return {
-			anchor: "center",
-			width: "90%",
-			maxHeight: "85%",
-		};
+	private finish(result: SquadPanelResult): void {
+		if (this.finished) return;
+		this.finished = true;
+		this.dispose();
+		this.onClose?.();
+		this.done(result);
 	}
 
 	// =========================================================================
@@ -162,43 +112,27 @@ export class SquadPanel implements Component, Focusable {
 	// =========================================================================
 
 	handleInput(data: string): void {
-		const wide = this.tui.columns >= WIDE_THRESHOLD;
-
-		// Ctrl+Q: switch focus back to editor (wide) or hide (narrow)
+		// Ctrl+Q or q: close panel
 		if (data === "\x11") {
-			if (wide) {
-				this.handle?.unfocus();
-			} else {
-				this.handle?.setHidden(true);
-			}
+			this.finish({ action: "close" });
 			return;
 		}
 
-		// Escape: back from messages to tasks, or release focus
+		// Escape: back from messages, or close panel
 		if (matchesKey(data, "escape")) {
 			if (this.state.view === "messages") {
 				this.state.view = "tasks";
 				this.tui.requestRender();
 				return;
 			}
-			if (wide) {
-				this.handle?.unfocus();
-			} else {
-				this.handle?.setHidden(true);
-			}
+			this.finish({ action: "close" });
 			return;
 		}
 
-		// q: release focus (task list only, not from message view)
-		if (matchesKey(data, "q")) {
-			if (this.state.view === "tasks") {
-				if (wide) {
-					this.handle?.unfocus();
-				} else {
-					this.handle?.setHidden(true);
-				}
-				return;
-			}
+		// q: close from task list
+		if (matchesKey(data, "q") && this.state.view === "tasks") {
+			this.finish({ action: "close" });
+			return;
 		}
 
 		// Delegate to current view
@@ -228,7 +162,6 @@ export class SquadPanel implements Component, Focusable {
 			}
 			this.tui.requestRender();
 		} else if (matchesKey(data, "return")) {
-			// Open message view for selected task
 			if (this.state.selectedTaskId) {
 				this.state.view = "messages";
 				this.state.scrollOffset = 0;
@@ -236,7 +169,6 @@ export class SquadPanel implements Component, Focusable {
 				this.tui.requestRender();
 			}
 		} else if (matchesKey(data, "p")) {
-			// Pause/resume selected task
 			if (this.state.selectedTaskId) {
 				const task = store.loadTask(this.squadId, this.state.selectedTaskId);
 				if (task?.status === "in_progress") {
@@ -247,7 +179,6 @@ export class SquadPanel implements Component, Focusable {
 				this.tui.requestRender();
 			}
 		} else if (matchesKey(data, "x")) {
-			// Cancel selected task
 			if (this.state.selectedTaskId) {
 				this.scheduler.cancelTask(this.state.selectedTaskId);
 				this.tui.requestRender();
@@ -270,7 +201,6 @@ export class SquadPanel implements Component, Focusable {
 			this.state.view = "tasks";
 			this.tui.requestRender();
 		} else if (matchesKey(data, "m")) {
-			// Send message to this task's agent
 			const taskId = this.messageView.getTaskId();
 			if (taskId && this.onSendMessage) {
 				this.onSendMessage(taskId, "");
@@ -296,10 +226,14 @@ export class SquadPanel implements Component, Focusable {
 		const title = squad ? `squad: ${squad.goal.slice(0, width - 20)}` : "squad";
 		lines.push(...this.renderHeader(title, width));
 
-		// Content area: total height minus header (1 line) and footer (3 lines)
-		const contentWidth = width - 2; // Account for border chars
-		const totalAvailable = this.tui.rows || 24;
-		const availHeight = Math.max(5, totalAvailable - 4); // 1 header + 3 footer
+		// Content area — calculate available height for task list.
+		// The overlay has maxHeight "80%", so we must fit within that.
+		// Layout: 1 header + content + 3 footer = content gets the rest.
+		const contentWidth = width - 2;
+		const termRows = this.tui.terminal.rows || 24;
+		const overlayMaxRows = Math.floor(termRows * 0.8);
+		const chromeLines = 4; // 1 header + 3 footer
+		const availHeight = Math.max(5, overlayMaxRows - chromeLines);
 
 		switch (this.state.view) {
 			case "tasks": {
@@ -323,10 +257,13 @@ export class SquadPanel implements Component, Focusable {
 			}
 		}
 
-		// Footer with keybindings
+		// Footer
 		lines.push(...this.renderFooter(width));
 
-		return lines;
+		// Strict height: cap to overlayMaxRows so the overlay never overflows.
+		// Also truncate all lines to width to prevent pi-tui crash.
+		const maxTotalLines = overlayMaxRows;
+		return lines.slice(0, maxTotalLines).map((line) => truncateToWidth(line, width, ""));
 	}
 
 	private renderHeader(title: string, width: number): string[] {
@@ -334,33 +271,29 @@ export class SquadPanel implements Component, Focusable {
 		const innerW = width - 2;
 		const titleStr = ` ${title} `;
 		const titleVW = visibleWidth(titleStr);
-		const leftBar = "─";
 		const rightBarLen = Math.max(0, innerW - titleVW - 1);
-		const rightBar = "─".repeat(rightBarLen);
 
 		return [
-			th.fg("border", "╭" + leftBar) +
+			th.fg("border", "╭─") +
 				th.fg("accent", titleStr) +
-				th.fg("border", rightBar + "╮"),
+				th.fg("border", "─".repeat(rightBarLen) + "╮"),
 		];
 	}
 
 	private renderFooter(width: number): string[] {
 		const th = this.theme;
 		const innerW = width - 2;
-		const wide = this.tui.columns >= WIDE_THRESHOLD;
-		const switchHint = wide ? "^q switch" : "^q close";
 
 		let keys: string;
 		switch (this.state.view) {
 			case "tasks":
-				keys = ` ↑↓ nav  ⏎ msgs  m send  p pause  x cancel  ${switchHint}`;
+				keys = ` ↑↓ nav  ⏎ msgs  m send  p pause  x cancel  ^q close`;
 				break;
 			case "messages":
-				keys = ` ↑↓ scroll  m send  esc back  ${switchHint}`;
+				keys = ` ↑↓ scroll  m send  esc back  ^q close`;
 				break;
 			default:
-				keys = ` ${switchHint}`;
+				keys = ` ^q close`;
 		}
 
 		return [
@@ -370,14 +303,27 @@ export class SquadPanel implements Component, Focusable {
 		];
 	}
 
-	/** Wrap a content line with border chars, padded to exact width */
 	private borderLine(content: string, width: number): string {
 		const th = this.theme;
 		const innerW = width - 2;
-		// Truncate content to fit, preserving ANSI codes
 		const truncated = truncateToWidth(content, innerW);
 		const contentVW = visibleWidth(truncated);
 		const pad = " ".repeat(Math.max(0, innerW - contentVW));
 		return th.fg("border", "│") + truncated + pad + th.fg("border", "│");
 	}
+
+	// =========================================================================
+	// Lifecycle
+	// =========================================================================
+
+	dispose(): void {
+		if (this.renderTimeout) {
+			clearTimeout(this.renderTimeout);
+			this.renderTimeout = null;
+		}
+		if (this.refreshTimer) {
+			clearInterval(this.refreshTimer);
+			this.refreshTimer = null;
+		}
+	}
 }

package/src/panel/squad-widget.ts

@@ -0,0 +1,192 @@
+/**
+ * squad-widget.ts — Simple string[] widget for squad status.
+ *
+ * Uses the simple setWidget(key, string[]) API which pi-tui handles
+ * reliably. Component-based widgets with variable height cause TUI
+ * layout corruption.
+ *
+ * Updates are pushed by calling requestUpdate() which rebuilds the
+ * string[] and calls setWidget() again.
+ */
+
+import { truncateToWidth } from "@mariozechner/pi-tui";
+import type { Theme } from "@mariozechner/pi-coding-agent";
+import type { TaskStatus } from "../types.js";
+import * as store from "../store.js";
+
+function statusIcon(status: TaskStatus, th: Theme): string {
+	switch (status) {
+		case "done": return th.fg("success", "✓");
+		case "in_progress": return th.fg("warning", "⏳");
+		case "blocked": return th.fg("muted", "◻");
+		case "failed": return th.fg("error", "✗");
+		case "suspended": return th.fg("muted", "⏸");
+		default: return th.fg("dim", "·");
+	}
+}
+
+function formatElapsed(ms: number): string {
+	const s = Math.floor(ms / 1000);
+	const m = Math.floor(s / 60);
+	const h = Math.floor(m / 60);
+	if (h > 0) return `${h}h${m % 60}m`;
+	if (m > 0) return `${m}m${s % 60}s`;
+	return `${s}s`;
+}
+
+export interface SquadWidgetState {
+	squadId: string | null;
+	enabled: boolean;
+}
+
+/**
+ * Set up the squad widget. Returns control functions.
+ * Uses simple string[] setWidget — no component factory.
+ */
+export function setupSquadWidget(
+	ctx: { ui: { setWidget: Function; setStatus: Function; [key: string]: any }; hasUI?: boolean },
+	state: SquadWidgetState,
+): {
+	requestUpdate: () => void;
+	dispose: () => void;
+} {
+	if (!ctx.hasUI) return { requestUpdate: () => {}, dispose: () => {} };
+
+	let durationTimer: ReturnType<typeof setInterval> | null = null;
+	let renderTimer: ReturnType<typeof setTimeout> | null = null;
+	/** Cache key to skip redundant setWidget calls */
+	let lastCacheKey = "";
+
+	function render(): void {
+		if (!state.enabled || !state.squadId) {
+			ctx.ui.setWidget("squad-tasks", undefined);
+			ctx.ui.setStatus("squad", undefined);
+			return;
+		}
+
+		const th = ctx.ui.theme;
+		const tasks = store.loadAllTasks(state.squadId);
+		const squad = store.loadSquad(state.squadId);
+		if (!squad || tasks.length === 0) {
+			ctx.ui.setWidget("squad-tasks", undefined);
+			ctx.ui.setStatus("squad", undefined);
+			return;
+		}
+
+		const lines: string[] = [];
+		const totalCost = tasks.reduce((sum, t) => sum + t.usage.cost, 0);
+		const doneCount = tasks.filter((t) => t.status === "done").length;
+		const elapsed = Date.now() - new Date(squad.created).getTime();
+
+		const sIcon = squad.status === "done" ? th.fg("success", "✓")
+			: squad.status === "failed" ? th.fg("error", "✗")
+			: th.fg("warning", "⏳");
+
+		lines.push(
+			`${sIcon} ${th.fg("accent", "squad")} ${th.fg("dim", squad.goal.slice(0, 35))} ` +
+			`${th.fg("muted", `${doneCount}/${tasks.length}`)} ` +
+			`${th.fg("dim", `$${totalCost.toFixed(2)}`)} ` +
+			`${th.fg("dim", formatElapsed(elapsed))} ` +
+			`${th.fg("dim", "^q detail · /squad msg")}`
+		);
+
+		// Cap visible tasks based on total count
+		const maxVisible = tasks.length > 6 ? 4 : tasks.length;
+		const visibleTasks = tasks.slice(0, maxVisible);
+
+		for (const task of visibleTasks) {
+			const icon = statusIcon(task.status, th);
+			let line = `  ${icon} ${th.fg("muted", task.id)} ${th.fg("dim", `(${task.agent})`)}`;
+
+			if (task.status === "done" && task.output) {
+				let timeStr = "";
+				if (task.started && task.completed) {
+					const dur = new Date(task.completed).getTime() - new Date(task.started).getTime();
+					timeStr = ` ${formatElapsed(dur)}`;
+				}
+				line += th.fg("dim", `${timeStr} ${task.output.split("\n")[0].slice(0, 40)}`);
+			} else if (task.status === "failed" && task.error) {
+				line += ` ${th.fg("error", task.error.slice(0, 40))}`;
+			} else if (task.status === "in_progress") {
+				const runningFor = task.started ? Date.now() - new Date(task.started).getTime() : 0;
+				const timeColor = runningFor > 180_000 ? "warning" : "dim";
+				line += ` ${th.fg(timeColor as any, formatElapsed(runningFor))}`;
+				const messages = store.loadMessages(state.squadId!, task.id);
+				const lastTool = [...messages].reverse().find(m => m.type === "tool");
+				if (lastTool) {
+					const rawDetail = (lastTool.args?.path || lastTool.args?.command || "").toString();
+					const detail = rawDetail.split("\n")[0]; // first line only
+					const toolStr = `→ ${lastTool.name || lastTool.text}`;
+					line += ` ${th.fg("dim", (detail ? `${toolStr} ${detail}` : toolStr).slice(0, 30))}`;
+				}
+			} else if (task.status === "blocked") {
+				const blockers = task.depends.filter((d) => {
+					const dep = tasks.find((t) => t.id === d);
+					return dep && dep.status !== "done";
+				});
+				if (blockers.length > 0) {
+					line += ` ${th.fg("dim", "← " + blockers.join(", "))}`;
+				}
+			}
+
+			lines.push(line);
+		}
+
+		if (tasks.length > maxVisible) {
+			lines.push(`  ${th.fg("dim", `  +${tasks.length - maxVisible} more · ^q detail`)}`);
+		}
+
+		// Skip if nothing changed (avoid redundant setWidget calls that cause flicker)
+		const cacheKey = `${squad.status}:${tasks.map(t => `${t.id}=${t.status}:${t.usage.turns}`).join(",")}`;
+		if (cacheKey === lastCacheKey) return;
+		lastCacheKey = cacheKey;
+
+		ctx.ui.setWidget("squad-tasks", lines);
+
+		// Update status bar
+		const statusText = squad.status === "done"
+			? th.fg("success", `✓ squad ${doneCount}/${tasks.length}`)
+			: squad.status === "failed"
+			? th.fg("error", `✗ squad ${doneCount}/${tasks.length}`)
+			: th.fg("accent", `⏳ squad ${doneCount}/${tasks.length} $${totalCost.toFixed(2)}`);
+		ctx.ui.setStatus("squad", statusText);
+	}
+
+	function manageDurationTimer(): void {
+		if (!state.squadId || !state.enabled) {
+			if (durationTimer) { clearInterval(durationTimer); durationTimer = null; }
+			return;
+		}
+		const squad = store.loadSquad(state.squadId);
+		const isActive = squad && (squad.status === "running" || squad.status === "paused");
+		if (isActive && !durationTimer) {
+			durationTimer = setInterval(() => render(), 5000);
+		} else if (!isActive && durationTimer) {
+			clearInterval(durationTimer);
+			durationTimer = null;
+		}
+	}
+
+	// Initial render
+	render();
+	manageDurationTimer();
+
+	return {
+		requestUpdate(): void {
+			// Debounce: multiple rapid events (scheduler) coalesce into one render
+			if (renderTimer) return;
+			renderTimer = setTimeout(() => {
+				renderTimer = null;
+				render();
+				manageDurationTimer();
+			}, 50);
+		},
+		dispose(): void {
+			if (durationTimer) { clearInterval(durationTimer); durationTimer = null; }
+			if (renderTimer) { clearTimeout(renderTimer); renderTimer = null; }
+			lastCacheKey = "";
+			ctx.ui.setWidget("squad-tasks", undefined);
+			ctx.ui.setStatus("squad", undefined);
+		},
+	};
+}