@danypops/papyrus 0.1.0

package/extension/src/skills.ts

@@ -0,0 +1,60 @@
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import type { Artifact } from "../../src/domain/artifact.ts";
+import { showArtifactBrowser, showArtifactDetails } from "./artifact-browser.ts";
+import { callService } from "./service-client.ts";
+
+const SKILL_GLYPHS: Record<string, string> = { active: "●", deprecated: "○" };
+
+function strings(value: unknown): string[] {
+	return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string") : [];
+}
+
+export function skillRowMeta(skill: Artifact): string {
+	if (skill.subtype === "artifact-template") {
+		const target = typeof skill.extra["targetKind"] === "string" ? skill.extra["targetKind"] : "artifact";
+		return `template → ${target}`;
+	}
+	const trigger = typeof skill.extra["trigger"] === "string" ? `when ${skill.extra["trigger"]}` : "manual";
+	const tools = strings(skill.extra["tools"]);
+	return [trigger, tools.join(", ")].filter(Boolean).join(" · ");
+}
+
+export function skillInvocationPrompt(skill: Artifact): string {
+	if (skill.subtype === "artifact-template") {
+		return [`Create an artifact using Papyrus template \"${skill.title}\".`, `template_id: ${skill.id}`, "Ask for or infer the title and all required template fields, then call papyrus_create."].join("\n");
+	}
+	const trigger = typeof skill.extra["trigger"] === "string" ? skill.extra["trigger"] : "manual invocation";
+	const steps = strings(skill.extra["steps"]);
+	const tools = strings(skill.extra["tools"]);
+	return [
+		`Apply Papyrus skill \"${skill.title}\" (${skill.id}).`,
+		`Trigger: ${trigger}`,
+		...(skill.body ? [`Context: ${skill.body}`] : []),
+		...(steps.length > 0 ? ["Steps:", ...steps.map((step, index) => `${index + 1}. ${step}`)] : []),
+		...(tools.length > 0 ? [`Tools: ${tools.join(", ")}`] : []),
+	].join("\n");
+}
+
+export async function showSkills(ctx: ExtensionCommandContext): Promise<void> {
+	await showArtifactBrowser(ctx, {
+		kind: "skill",
+		title: "Skills",
+		listOperation: "skills.list",
+		statusOrder: ["active", "deprecated"],
+		glyphs: SKILL_GLYPHS,
+		rowMeta: skillRowMeta,
+		actions: (skill) => ["Show details", skill.subtype === "artifact-template" ? "Use template" : "Invoke skill", skill.status === "active" ? "Disable" : "Enable"],
+		handleAction: async (choice, skill, commandCtx) => {
+			if (choice === "Show details") await showArtifactDetails(commandCtx, skill.id, "skills.show");
+			else if (choice === "Invoke skill" || choice === "Use template") {
+				const invocation = await callService<Record<string, unknown>, string>("skills.invoke", { id: skill.id });
+				commandCtx.ui.setEditorText(invocation);
+				commandCtx.ui.notify("Invocation placed in the editor", "info");
+			} else {
+				const operation = choice === "Disable" ? "skills.disable" : "skills.enable";
+				const updated = await callService<Record<string, unknown>, Artifact>(operation, { id: skill.id });
+				commandCtx.ui.notify(`${updated.id} → [${updated.status}]`, "info");
+			}
+		},
+	});
+}

package/extension/src/task-context.ts

@@ -0,0 +1 @@
+export { taskContext } from "../../src/task-context.ts";

package/extension/src/task-detail-format.ts

@@ -0,0 +1,66 @@
+import type { Artifact } from "../../src/domain/artifact.ts";
+import { checklistEntries, type ProofReference } from "../../src/domain/checklist.ts";
+import { formatMetadata } from "./artifact-format.ts";
+
+const TASK_STATUS_GLYPHS: Record<string, string> = {
+	pending: "○",
+	active: "●",
+	done: "■",
+	failed: "▲",
+};
+
+function proofLine(proof: ProofReference): string {
+	return `${proof.type} · ${proof.target}${proof.expect ? ` · ${proof.expect}` : ""}`;
+}
+
+function checklistLines(value: unknown): string[] {
+	const entries = checklistEntries(value);
+	if (entries.length === 0) return [];
+	const lines = ["Checklist:"];
+	for (const entry of entries) {
+		lines.push(`  • ${entry.item}`);
+		if (entry.proof.length === 0) {
+			lines.push(`    proof: missing${entry.legacy ? " (legacy item)" : ""}`);
+			continue;
+		}
+		lines.push("    proof:");
+		for (const proof of entry.proof) lines.push(`      - ${proofLine(proof)}`);
+	}
+	return lines;
+}
+
+function gateLines(value: unknown): string[] {
+	if (!Array.isArray(value) || value.length === 0) return [];
+	const lines = ["Validation gates:"];
+	for (const gate of value) {
+		if (typeof gate !== "object" || gate === null || Array.isArray(gate)) {
+			lines.push("  ? invalid gate configuration");
+			continue;
+		}
+		const record = gate as Record<string, unknown>;
+		const type = typeof record["type"] === "string" ? record["type"] : "unknown";
+		const target = typeof record["target"] === "string" ? record["target"] : "missing target";
+		const expect = typeof record["expect"] === "string" ? ` · ${record["expect"]}` : "";
+		lines.push(`  ○ ${type} · ${target}${expect}`);
+	}
+	return lines;
+}
+
+export function taskDetailsText(task: Artifact, relationshipGraphLines: string[] = []): string {
+	let output = `${TASK_STATUS_GLYPHS[task.status] ?? "?"} ${task.title}\n${task.id} [task|${task.status}]`;
+	if (task.labels.length > 0) output += `\nLabels: ${task.labels.join(", ")}`;
+	output += `\n\n${task.body || "(no body)"}`;
+	const checklist = checklistLines(task.extra["checklist"]);
+	if (checklist.length > 0) output += `\n\n${checklist.join("\n")}`;
+	const gates = gateLines(task.extra["gates"]);
+	if (gates.length > 0) output += `\n\n${gates.join("\n")}`;
+	const metadata = Object.fromEntries(Object.entries(task.extra).filter(([key]) => key !== "checklist" && key !== "gates"));
+	if (Object.keys(metadata).length > 0) {
+		output += `\n\nMetadata:\n${formatMetadata(metadata).map((line) => `  ${line}`).join("\n")}`;
+	}
+	if (task.edges?.length) {
+		const graph = relationshipGraphLines.length > 0 ? relationshipGraphLines.join("\n") : "  (graph unavailable)";
+		output += `\n\nRelationships:\n  Dependencies point prerequisite → dependent.\n${graph}`;
+	}
+	return output;
+}

package/extension/src/task-detail-view.ts

@@ -0,0 +1,111 @@
+import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi, type TUI } from "@earendil-works/pi-tui";
+import {
+	TASK_DETAIL_HORIZONTAL_PAN_COLUMNS,
+	TASK_DETAIL_MAX_VISIBLE_LINES,
+	TASK_DETAIL_MIN_VISIBLE_LINES,
+	TASK_DETAIL_RESERVED_ROWS,
+} from "../../src/constants.ts";
+import type { Artifact } from "../../src/domain/artifact.ts";
+import type { GraphRenderer } from "../../src/ports/graph-renderer.ts";
+import { projectTaskRelationships } from "../../src/task-relationship-view.ts";
+import type { TaskGraph } from "../../src/task-service.ts";
+import { BeautifulMermaidRenderer } from "./beautiful-mermaid-renderer.ts";
+import { taskDetailsText } from "./task-detail-format.ts";
+
+interface DetailLine {
+	text: string;
+	graph: boolean;
+}
+
+class TaskDetailViewport {
+	private offsetX = 0;
+	private offsetY = 0;
+	private renderedWidth = 0;
+	private detailLines: DetailLine[] = [];
+	private readonly visibleLines: number;
+	private readonly narrative: string;
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		task: Artifact,
+		private readonly graphLines: string[],
+		private readonly close: () => void,
+	) {
+		this.visibleLines = Math.max(
+			TASK_DETAIL_MIN_VISIBLE_LINES,
+			Math.min(TASK_DETAIL_MAX_VISIBLE_LINES, tui.terminal.rows - TASK_DETAIL_RESERVED_ROWS),
+		);
+		this.narrative = taskDetailsText({ ...task, edges: undefined });
+	}
+
+	invalidate(): void { this.renderedWidth = 0; }
+
+	render(width: number): string[] {
+		const contentWidth = Math.max(1, width - 2);
+		this.buildLines(contentWidth);
+		const graphWidth = this.graphLines.reduce((maximum, line) => Math.max(maximum, visibleWidth(line)), 0);
+		this.offsetX = Math.min(this.offsetX, Math.max(0, graphWidth - contentWidth));
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.detailLines.length - this.visibleLines));
+		const end = Math.min(this.detailLines.length, this.offsetY + this.visibleLines);
+		const border = this.theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
+		const footer = [
+			graphWidth > contentWidth ? `←/→ graph · column ${this.offsetX + 1}/${graphWidth}` : "",
+			this.detailLines.length > this.visibleLines ? `↑/↓ scroll · ${this.offsetY + 1}-${end}/${this.detailLines.length}` : "",
+			"Esc back",
+		].filter(Boolean).join(" · ");
+		return [
+			border,
+			truncateToWidth(this.theme.bold("Task details"), width, ""),
+			border,
+			...this.detailLines.slice(this.offsetY, end).map((line) => line.graph
+				? ` ${sliceByColumn(line.text, this.offsetX, contentWidth, true)}`
+				: truncateToWidth(` ${line.text}`, width, "")),
+			truncateToWidth(this.theme.fg("dim", footer), width, ""),
+			border,
+		];
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) { this.close(); return; }
+		if (matchesKey(data, "up")) this.offsetY = Math.max(0, this.offsetY - 1);
+		else if (matchesKey(data, "down")) this.offsetY = Math.min(Math.max(0, this.detailLines.length - this.visibleLines), this.offsetY + 1);
+		else if (matchesKey(data, "left")) this.offsetX = Math.max(0, this.offsetX - TASK_DETAIL_HORIZONTAL_PAN_COLUMNS);
+		else if (matchesKey(data, "right")) this.offsetX += TASK_DETAIL_HORIZONTAL_PAN_COLUMNS;
+		else return;
+		this.tui.requestRender();
+	}
+
+	private buildLines(width: number): void {
+		if (this.renderedWidth === width) return;
+		this.renderedWidth = width;
+		const narrative = this.narrative.split("\n").flatMap((line) =>
+			(line.length === 0 ? [""] : wrapTextWithAnsi(line, width)).map((text) => ({ text, graph: false })));
+		const relationshipHeader = this.graphLines.length > 0
+			? [
+				{ text: "", graph: false },
+				{ text: "Relationships:", graph: false },
+				{ text: "  Dependencies point prerequisite → dependent.", graph: false },
+			]
+			: [];
+		this.detailLines = [...narrative, ...relationshipHeader, ...this.graphLines.map((text) => ({ text, graph: true }))];
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.detailLines.length - this.visibleLines));
+	}
+}
+
+export async function showTaskDetails(
+	ctx: ExtensionCommandContext,
+	task: Artifact,
+	graph?: TaskGraph,
+	renderer: GraphRenderer = new BeautifulMermaidRenderer(),
+): Promise<void> {
+	const relationshipGraph = renderer.render(projectTaskRelationships(task, graph)).lines;
+	const content = taskDetailsText(task, relationshipGraph);
+	if (ctx.mode !== "tui") {
+		ctx.ui.notify(content, "info");
+		return;
+	}
+	await ctx.ui.custom<void>((tui, theme, _keybindings, done) =>
+		new TaskDetailViewport(tui, theme, task, relationshipGraph, done));
+}

package/extension/src/task-graph.ts

@@ -0,0 +1,97 @@
+import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, sliceByColumn, truncateToWidth, visibleWidth, type TUI } from "@earendil-works/pi-tui";
+import {
+	TASK_GRAPH_HORIZONTAL_PAN_COLUMNS,
+	TASK_GRAPH_MAX_VISIBLE_LINES,
+	TASK_GRAPH_MIN_VISIBLE_LINES,
+	TASK_GRAPH_RESERVED_ROWS,
+} from "../../src/constants.ts";
+import type { GraphRenderer } from "../../src/ports/graph-renderer.ts";
+import { projectTaskGraph, type TaskGraphView } from "../../src/task-graph-view.ts";
+import type { TaskGraph } from "../../src/task-service.ts";
+import { BeautifulMermaidRenderer } from "./beautiful-mermaid-renderer.ts";
+
+const GRAPH_VIEWS: TaskGraphView[] = ["dependencies", "composition"];
+
+export class TaskGraphViewport {
+	private viewIndex = 0;
+	private offsetX = 0;
+	private offsetY = 0;
+	private graphLines: string[] = [];
+	private readonly viewportHeight: number;
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		private readonly graph: TaskGraph,
+		private readonly renderer: GraphRenderer,
+		private readonly close: () => void,
+	) {
+		this.viewportHeight = Math.max(
+			TASK_GRAPH_MIN_VISIBLE_LINES,
+			Math.min(TASK_GRAPH_MAX_VISIBLE_LINES, tui.terminal.rows - TASK_GRAPH_RESERVED_ROWS),
+		);
+		this.rebuild();
+	}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const contentWidth = Math.max(1, width);
+		const graphWidth = this.graphLines.reduce((maximum, line) => Math.max(maximum, visibleWidth(line)), 0);
+		this.offsetX = Math.min(this.offsetX, Math.max(0, graphWidth - contentWidth));
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.graphLines.length - this.viewportHeight));
+		const end = Math.min(this.graphLines.length, this.offsetY + this.viewportHeight);
+		const border = this.theme.fg("borderMuted", "─".repeat(contentWidth));
+		const position = graphWidth > contentWidth || this.graphLines.length > this.viewportHeight
+			? ` · column ${this.offsetX + 1}/${Math.max(contentWidth, graphWidth)} · row ${this.offsetY + 1}/${this.graphLines.length}`
+			: "";
+		return [
+			border,
+			truncateToWidth(this.theme.bold(`Task graph · ${GRAPH_VIEWS[this.viewIndex]}`), contentWidth, ""),
+			truncateToWidth(this.theme.fg("dim", `Tab switch · arrows pan · Esc back${position}`), contentWidth, ""),
+			border,
+			...this.graphLines.slice(this.offsetY, end).map((line) => sliceByColumn(line, this.offsetX, contentWidth, true)),
+			border,
+		];
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) { this.close(); return; }
+		if (matchesKey(data, "tab")) this.switchView();
+		else if (matchesKey(data, "up")) this.offsetY = Math.max(0, this.offsetY - 1);
+		else if (matchesKey(data, "down")) this.offsetY = Math.min(Math.max(0, this.graphLines.length - this.viewportHeight), this.offsetY + 1);
+		else if (matchesKey(data, "left")) this.offsetX = Math.max(0, this.offsetX - TASK_GRAPH_HORIZONTAL_PAN_COLUMNS);
+		else if (matchesKey(data, "right")) this.offsetX += TASK_GRAPH_HORIZONTAL_PAN_COLUMNS;
+		else return;
+		this.tui.requestRender();
+	}
+
+	private switchView(): void {
+		this.viewIndex = (this.viewIndex + 1) % GRAPH_VIEWS.length;
+		this.offsetX = 0;
+		this.offsetY = 0;
+		this.rebuild();
+	}
+
+	private rebuild(): void {
+		const view = GRAPH_VIEWS[this.viewIndex]!;
+		this.graphLines = this.renderer.render(projectTaskGraph(this.graph, view)).lines;
+		if (this.graphLines.length === 0) this.graphLines = [`No task ${view} relationships`];
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.graphLines.length - this.viewportHeight));
+	}
+}
+
+export async function showTaskGraph(
+	ctx: ExtensionCommandContext,
+	graph: TaskGraph,
+	renderer: GraphRenderer = new BeautifulMermaidRenderer(),
+): Promise<void> {
+	if (ctx.mode !== "tui") {
+		const rendered = renderer.render(projectTaskGraph(graph, "dependencies"));
+		ctx.ui.notify(rendered.lines.join("\n") || "No task dependency relationships", "info");
+		return;
+	}
+	await ctx.ui.custom<void>((tui, theme, _keybindings, done) =>
+		new TaskGraphViewport(tui, theme, graph, renderer, done));
+}

package/extension/src/task-widget.ts

@@ -0,0 +1,49 @@
+import { TASK_WIDGET_ACTIVE_LIMIT } from "../../src/constants.ts";
+import type { Artifact } from "../../src/domain/artifact.ts";
+import type { TaskGraph } from "../../src/task-service.ts";
+
+export interface TaskWidgetRow {
+	task: Artifact;
+	depth: number;
+	hasActiveChildren: boolean;
+}
+
+export interface TaskWidgetProjection {
+	active: TaskWidgetRow[];
+	activeTotal: number;
+	total: number;
+}
+
+/** Keep active work in containment order; /tasks owns full graph navigation. */
+export function buildTaskWidgetProjection(
+	graph: TaskGraph,
+	activeLimit = TASK_WIDGET_ACTIVE_LIMIT,
+): TaskWidgetProjection {
+	const visibleNodes = graph.nodes.filter((node) => node.task.status !== "deleted");
+	const byId = new Map(visibleNodes.map((node) => [node.task.id, node]));
+	const visited = new Set<string>();
+	const ordered: TaskWidgetRow[] = [];
+
+	const visit = (id: string, activeDepth: number): void => {
+		if (visited.has(id)) return;
+		const node = byId.get(id);
+		if (!node) return;
+		visited.add(id);
+		const active = node.task.status === "active";
+		if (active) ordered.push({ task: node.task, depth: activeDepth, hasActiveChildren: false });
+		const childDepth = active ? activeDepth + 1 : activeDepth;
+		for (const childId of node.childIds) visit(childId, childDepth);
+	};
+
+	for (const rootId of graph.rootIds) visit(rootId, 0);
+	for (const node of visibleNodes) visit(node.task.id, 0);
+	for (let index = 0; index < ordered.length - 1; index++) {
+		ordered[index]!.hasActiveChildren = ordered[index + 1]!.depth > ordered[index]!.depth;
+	}
+	const active = ordered.slice(0, Math.max(0, activeLimit));
+	return {
+		active,
+		activeTotal: ordered.length,
+		total: visibleNodes.length,
+	};
+}

package/extension/src/tasks.ts

@@ -0,0 +1,258 @@
+/**
+ * tasks.ts — /tasks interactive panel.
+ * Filterable list with status glyphs, advance status, run gates, show edges.
+ * Follows the pi-extension-manager / pi-packed TUI idiom.
+ */
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
+import { Container, Input, Spacer, matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { callService } from "./service-client.ts";
+import { showTaskDetails } from "./task-detail-view.ts";
+import { showTaskGraph } from "./task-graph.ts";
+
+export { taskDetailsText } from "./task-detail-format.ts";
+export { showTaskDetails } from "./task-detail-view.ts";
+import type { Artifact } from "../../src/domain/artifact.ts";
+import type { GateResult } from "../../src/domain/gate.ts";
+import type { TaskGraph } from "../../src/task-service.ts";
+
+const GLYPHS: Record<string, string> = {
+	pending: "○",
+	active: "●",
+	done: "■",
+	failed: "▲",
+};
+
+const STATUS_ACTIONS: Record<string, string[]> = {
+	pending: ["Start", "Fail"],
+	active: ["Complete (run gates)", "Fail"],
+	done: [],
+	failed: ["Retry"],
+};
+
+type TaskRow = Artifact;
+
+export interface TaskHierarchyRow {
+	task: TaskRow;
+	depth: number;
+	childCount: number;
+	dependencies: string[];
+}
+
+export function buildTaskHierarchy(graph: TaskGraph): TaskHierarchyRow[] {
+	const byId = new Map(graph.nodes.map((node) => [node.task.id, node]));
+	const result: TaskHierarchyRow[] = [];
+	const visited = new Set<string>();
+	const visit = (id: string, depth: number): void => {
+		if (visited.has(id)) return;
+		const node = byId.get(id);
+		if (!node) return;
+		visited.add(id);
+		const children = node.childIds.filter((childId) => byId.has(childId));
+		result.push({ task: node.task, depth, childCount: children.length, dependencies: [...node.dependencyIds] });
+		for (const childId of children) visit(childId, depth + 1);
+	};
+	for (const rootId of graph.rootIds) visit(rootId, 0);
+	for (const node of graph.nodes) visit(node.task.id, 0);
+	return result;
+}
+
+async function loadTaskGraph(): Promise<TaskGraph> {
+	return callService<Record<string, unknown>, TaskGraph>("tasks.graph", { limit: 200 });
+}
+
+export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
+	if (!ctx.hasUI) {
+		ctx.ui.notify("/tasks requires interactive mode", "warning");
+		return;
+	}
+	let graph = await loadTaskGraph();
+	if (graph.nodes.length === 0) {
+		const create = await ctx.ui.select("No tasks yet", ["Create a task", "Cancel"]);
+		if (create === "Create a task") {
+			const title = await ctx.ui.input("Task title:", "");
+			if (title) {
+				await callService("tasks.create", { title });
+				graph = await loadTaskGraph();
+			}
+		}
+		if (graph.nodes.length === 0) return;
+	}
+
+	for (;;) {
+		const action = await renderPanel(ctx, graph);
+		if (!action) return;
+		if (action.type === "refresh") { graph = await loadTaskGraph(); continue; }
+		if (action.type === "graph") { await showTaskGraph(ctx, graph); continue; }
+		if (action.type !== "action" || !action.row) continue;
+
+		const choices = ["Show details", "Run gates", ...(STATUS_ACTIONS[action.row.status] ?? [])];
+		const choice = await ctx.ui.select(action.row.title, choices);
+		if (!choice) continue;
+
+		if (choice === "Show details") {
+			const art = await callService<Record<string, unknown>, Artifact | null>("tasks.show", { id: action.row.id });
+			if (!art) { ctx.ui.notify("Not found", "error"); continue; }
+			await showTaskDetails(ctx, art, graph);
+		} else if (choice === "Run gates") {
+			try {
+				const results = await callService<Record<string, unknown>, GateResult[]>("tasks.run_gates", { id: action.row.id });
+				ctx.ui.notify(`Gates:\n${results.map((gate) => `${gate.passed ? "✓" : "✗"} ${gate.gate.type}: ${gate.gate.target} — ${gate.output}`).join("\n")}`, "info");
+			} catch (error) {
+				ctx.ui.notify(`Gates failed: ${error instanceof Error ? error.message : error}`, "error");
+			}
+		} else {
+			try {
+				const operation = choice === "Start" ? "tasks.start" : choice === "Fail" ? "tasks.fail" : choice === "Retry" ? "tasks.retry" : "tasks.complete";
+				if (operation === "tasks.complete") {
+					const result = await callService<Record<string, unknown>, { artifact: Artifact; gates: GateResult[]; completed: boolean }>(operation, { id: action.row.id });
+					action.row.status = result.artifact.status;
+					const gates = result.gates.map((gate) => `${gate.passed ? "✓" : "✗"} ${gate.gate.type}: ${gate.gate.target}`).join("\n");
+					ctx.ui.notify(result.completed ? `Completed ${result.artifact.id}${gates ? `\n${gates}` : ""}` : `Not complete; gates failed\n${gates}`, result.completed ? "info" : "warning");
+				} else {
+					const updated = await callService<Record<string, unknown>, Artifact>(operation, { id: action.row.id });
+					action.row.status = updated.status;
+					ctx.ui.notify(`${updated.id} → [${updated.status}]`, "info");
+				}
+			} catch (error) {
+				ctx.ui.notify(`Task action failed: ${error instanceof Error ? error.message : error}`, "error");
+			}
+		}
+		graph = await loadTaskGraph();
+	}
+}
+
+interface PanelAction {
+	type: "action" | "refresh" | "graph";
+	row?: TaskRow;
+}
+
+function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<PanelAction | undefined> {
+	return ctx.ui.custom<PanelAction | undefined>((tui, theme, _kb, done) => {
+		const rows = graph.nodes.map((node) => node.task);
+		const searchInput = new Input();
+		const hierarchy = buildTaskHierarchy(graph);
+		const taskById = new Map(rows.map((task) => [task.id, task]));
+		let searchActive = false;
+		let filtered = [...hierarchy];
+		let selectedIndex = 0;
+		const maxVisible = 20;
+
+		function applyFilter(): void {
+			const q = searchInput.getValue().trim().toLowerCase();
+			filtered = q ? hierarchy.filter(({ task }) =>
+				task.title.toLowerCase().includes(q) || task.id.toLowerCase().includes(q)
+			) : [...hierarchy];
+			selectedIndex = 0;
+		}
+
+		function statusLine(): string {
+			const counts: Record<string, number> = {};
+			for (const r of rows) counts[r.status] = (counts[r.status] ?? 0) + 1;
+			return ["pending", "active", "done", "failed"]
+				.filter((s) => (counts[s] ?? 0) > 0)
+				.map((s) => `${GLYPHS[s] ?? s} ${counts[s]} ${s}`)
+				.join(", ");
+		}
+
+		const header = {
+			invalidate() {},
+			render(width: number): string[] {
+				const title = theme.bold("Tasks");
+				const hint = searchActive
+					? rawKeyHint("esc", "clear")
+					: rawKeyHint("↑/↓", "navigate") +
+						theme.fg("muted", " · ") +
+						rawKeyHint("enter", "actions") +
+						theme.fg("muted", " · ") +
+						rawKeyHint("/", "filter") +
+						theme.fg("muted", " · ") +
+						rawKeyHint("g", "graph") +
+						theme.fg("muted", " · ") +
+						rawKeyHint("r", "refresh") +
+						theme.fg("muted", " · ") +
+						rawKeyHint("esc", "close");
+				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
+				const line1 = truncateToWidth(`${title}${" ".repeat(spacing)}${hint}`, width, "");
+				const line2 = truncateToWidth(theme.fg("muted", statusLine()), width, "");
+				return [line1, line2];
+			},
+		};
+
+		const list = {
+			invalidate() {},
+			render(width: number): string[] {
+				const lines: string[] = [];
+				if (searchActive) lines.push(...searchInput.render(width));
+				lines.push("");
+				if (filtered.length === 0) {
+					lines.push(theme.fg("muted", "  No tasks"));
+					return lines;
+				}
+				const start = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), filtered.length - maxVisible));
+				const end = Math.min(start + maxVisible, filtered.length);
+				for (let i = start; i < end; i++) {
+					const entry = filtered[i]!;
+					const row = entry.task;
+					const selected = i === selectedIndex;
+					const cursor = selected ? theme.fg("accent", "❯") : " ";
+					const glyph = GLYPHS[row.status] ?? "?";
+					const statusColor = row.status === "active" ? "accent" : row.status === "done" ? "dim" : row.status === "failed" ? "warning" : "muted";
+					const glyphStyled = theme.fg(statusColor, glyph);
+					const title = selected ? theme.bold(row.title) : row.title;
+					const indent = "  ".repeat(entry.depth);
+					const node = entry.childCount > 0 ? theme.fg("accent", "▾") : theme.fg("dim", "·");
+					const gates = (row.extra?.["gates"] as any[])?.length;
+					const relationParts: string[] = [];
+					if (entry.childCount > 0) relationParts.push(`${entry.childCount} subtask${entry.childCount === 1 ? "" : "s"}`);
+					if (entry.dependencies.length > 0) {
+						const names = entry.dependencies.map((id) => taskById.get(id)?.title ?? id);
+						relationParts.push(`needs ${names.join(", ")}`);
+					}
+					if (gates) relationParts.push(`${gates} gate${gates === 1 ? "" : "s"}`);
+					const relationText = relationParts.length > 0 ? theme.fg("dim", ` · ${relationParts.join(" · ")}`) : "";
+					lines.push(truncateToWidth(`${cursor} ${indent}${node} ${glyphStyled} ${title}${relationText}`, width, ""));
+				}
+				const hasScroll = start > 0 || end < filtered.length;
+				lines.push(theme.fg("muted", `  ${hasScroll ? `${selectedIndex + 1}/${filtered.length} · ` : ""}↑/↓ navigate · Enter actions`));
+				return lines;
+			},
+		};
+
+		const container = new Container();
+		container.addChild(new Spacer(1));
+		container.addChild(new DynamicBorder());
+		container.addChild(new Spacer(1));
+		container.addChild(header);
+		container.addChild(new Spacer(1));
+		container.addChild(list);
+		container.addChild(new Spacer(1));
+		container.addChild(new DynamicBorder());
+
+		return {
+			render: (width: number) => container.render(width),
+			invalidate: () => container.invalidate(),
+			handleInput(data: string) {
+				if (searchActive) {
+					if (matchesKey(data, "escape")) { searchActive = false; applyFilter(); }
+					else if (matchesKey(data, "enter")) { searchActive = false; }
+					else { searchInput.handleInput(data); applyFilter(); }
+					tui.requestRender();
+					return;
+				}
+				if (matchesKey(data, "up")) selectedIndex = (selectedIndex - 1 + filtered.length) % Math.max(filtered.length, 1);
+				else if (matchesKey(data, "down")) selectedIndex = (selectedIndex + 1) % Math.max(filtered.length, 1);
+				else if (data === "/") searchActive = true;
+				else if (data === "g") { done({ type: "graph" }); return; }
+				else if (data === "r") { done({ type: "refresh" }); return; }
+				else if (matchesKey(data, "enter")) {
+					const entry = filtered[selectedIndex];
+					if (entry) done({ type: "action", row: entry.task });
+					return;
+				} else if (matchesKey(data, "escape")) { done(undefined); return; }
+				else return;
+				tui.requestRender();
+			},
+		};
+	});
+}