@danypops/pi-papyrus 0.57.2 → 0.57.4

package/extension/src/artifact/artifact-browser.ts

@@ -1,10 +1,25 @@
-import { type Artifact, type OperationName, SEED_RELATIONS } from "@danypops/papyrus";
+import { type Artifact, type BinderNode, type BinderTree, type OperationName, SEED_RELATIONS } from "@danypops/papyrus";
 import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
-import { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Container, Input, matchesKey, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { callService } from "../service-client.ts";
 import { showArtifactDetailView } from "./artifact-detail-view.ts";
 import type { StatusPresentation } from "./artifact-status-presentation.ts";
+import {
+	artifactBinderPath,
+	artifactSearchText,
+	artifactsInBinder,
+	binderSearchText,
+	childBinders,
+	createBinderInteractive,
+	currentBinderPath,
+	editBinderInteractive,
+	inheritedLabelsFor,
+	loadBinderTree,
+	moveArtifactInteractive,
+	moveBinderInteractive,
+	removeBinderInteractive,
+} from "./binder-navigation.ts";
 
 export { artifactDetailsText } from "./artifact-detail-format.ts";
 
@@ -20,6 +35,8 @@ export interface ArtifactBrowserConfig {
 	presentation: Record<string, StatusPresentation>;
 	listOperation?: OperationName;
 	listInput?: Record<string, unknown>;
+	/** Enables the Binder filesystem projection. Flat browsers such as Notes/Discuss remain unchanged. */
+	hierarchical?: boolean;
 	rowMeta(row: Artifact, theme: Theme): string;
 	actions(row: Artifact): string[];
 	handleAction(choice: string, row: Artifact, ctx: ExtensionCommandContext): Promise<void>;
@@ -109,57 +126,144 @@ export async function setArtifactStatus(ctx: ExtensionCommandContext, id: string
 	}
 }
 
+async function reloadBrowser(config: ArtifactBrowserConfig, projectRoot: string): Promise<{ rows: Artifact[]; tree?: BinderTree }> {
+	const rows = await loadArtifacts(config);
+	const tree = config.hierarchical
+		? await loadBinderTree(
+				projectRoot,
+				rows.map((row) => row.id),
+			)
+		: undefined;
+	return { rows, tree };
+}
+
 export async function showArtifactBrowser(ctx: ExtensionCommandContext, config: ArtifactBrowserConfig): Promise<void> {
 	if (!ctx.hasUI) {
 		ctx.ui.notify(`/${config.kind}s requires interactive mode`, "warning");
 		return;
 	}
-	let rows = await loadArtifacts(config);
-	if (rows.length === 0) {
+	let { rows, tree } = await reloadBrowser(config, ctx.cwd);
+	let currentBinderId: string | undefined;
+	if (rows.length === 0 && !config.hierarchical) {
 		ctx.ui.notify(`No ${config.kind} artifacts yet. Ask the agent to create one.`, "info");
 		return;
 	}
 
 	for (;;) {
-		const selected = await renderPanel(ctx, rows, config);
-		if (selected === undefined) return;
-		if (selected === "refresh") {
-			rows = await loadArtifacts(config);
+		if (currentBinderId && !tree?.nodes.some((node) => node.binder.id === currentBinderId)) currentBinderId = undefined;
+		const selected = await renderPanel(ctx, rows, config, tree, currentBinderId);
+		if (!selected) return;
+		if (selected.type === "refresh") {
+			({ rows, tree } = await reloadBrowser(config, ctx.cwd));
+			continue;
+		}
+		if (selected.type === "navigate") {
+			currentBinderId = selected.binderId;
+			continue;
+		}
+		if (selected.type === "create-binder") {
+			if (await createBinderInteractive(ctx, currentBinderId)) ({ rows, tree } = await reloadBrowser(config, ctx.cwd));
+			continue;
+		}
+		if (selected.type === "binder-action" && tree) {
+			const choice = await ctx.ui.select(selected.node.path, [
+				"Open",
+				"Create nested Binder",
+				"Rename / edit inherited labels",
+				"Move Binder",
+				"Remove empty Binder",
+			]);
+			if (!choice) continue;
+			if (choice === "Open") {
+				currentBinderId = selected.node.binder.id;
+				continue;
+			}
+			let changed = false;
+			if (choice === "Create nested Binder") changed = await createBinderInteractive(ctx, selected.node.binder.id);
+			else if (choice === "Rename / edit inherited labels") changed = await editBinderInteractive(ctx, selected.node);
+			else if (choice === "Move Binder") changed = await moveBinderInteractive(ctx, tree, selected.node);
+			else if (choice === "Remove empty Binder") {
+				changed = await removeBinderInteractive(ctx, selected.node);
+				if (changed && currentBinderId === selected.node.binder.id) currentBinderId = selected.node.parentId;
+			}
+			if (changed) ({ rows, tree } = await reloadBrowser(config, ctx.cwd));
 			continue;
 		}
-		const choices = config.actions(selected);
-		const choice = await ctx.ui.select(selected.title, choices);
+		if (selected.type !== "artifact") continue;
+		const choices = [...(tree ? ["Move to Binder"] : []), ...config.actions(selected.row)];
+		const choice = await ctx.ui.select(selected.row.title, choices);
 		if (!choice) continue;
-		await config.handleAction(choice, selected, ctx);
-		rows = await loadArtifacts(config);
+		if (choice === "Move to Binder" && tree) await moveArtifactInteractive(ctx, tree, selected.row);
+		else await config.handleAction(choice, selected.row, ctx);
+		({ rows, tree } = await reloadBrowser(config, ctx.cwd));
 	}
 }
 
+type BrowserEntry = { type: "binder"; node: BinderNode } | { type: "artifact"; row: Artifact };
+
+type BrowserPanelAction =
+	| { type: "artifact"; row: Artifact }
+	| { type: "binder-action"; node: BinderNode }
+	| { type: "navigate"; binderId?: string }
+	| { type: "create-binder" }
+	| { type: "refresh" };
+
+export function browserEntries(
+	rows: Artifact[],
+	tree: BinderTree | undefined,
+	currentBinderId: string | undefined,
+	query: string,
+): BrowserEntry[] {
+	const needle = query.trim().toLowerCase();
+	if (!tree) return filterArtifactRows(rows, query).map((row) => ({ type: "artifact", row }));
+	if (needle) {
+		return [
+			...tree.nodes.filter((node) => binderSearchText(node).includes(needle)).map((node): BrowserEntry => ({ type: "binder", node })),
+			...rows.filter((row) => artifactSearchText(row, tree).includes(needle)).map((row): BrowserEntry => ({ type: "artifact", row })),
+		].sort((left, right) => {
+			const leftPath = left.type === "binder" ? left.node.path : artifactBinderPath(left.row, tree);
+			const rightPath = right.type === "binder" ? right.node.path : artifactBinderPath(right.row, tree);
+			return leftPath.localeCompare(rightPath);
+		});
+	}
+	return [
+		...childBinders(tree, currentBinderId).map((node): BrowserEntry => ({ type: "binder", node })),
+		...artifactsInBinder(rows, tree, currentBinderId).map((row): BrowserEntry => ({ type: "artifact", row })),
+	];
+}
+
 function renderPanel(
 	ctx: ExtensionCommandContext,
 	rows: Artifact[],
 	config: ArtifactBrowserConfig,
-): Promise<Artifact | "refresh" | undefined> {
-	return ctx.ui.custom<Artifact | "refresh" | undefined>((tui, theme, _keybindings, done) => {
+	tree: BinderTree | undefined,
+	currentBinderId: string | undefined,
+): Promise<BrowserPanelAction | undefined> {
+	return ctx.ui.custom<BrowserPanelAction | undefined>((tui, theme, _keybindings, done) => {
 		const input = new Input();
 		let searchActive = false;
-		let filtered = [...rows];
+		let filtered = browserEntries(rows, tree, currentBinderId, "");
 		let selectedIndex = 0;
 
 		function applyFilter(): void {
-			filtered = filterArtifactRows(rows, input.getValue());
+			filtered = browserEntries(rows, tree, currentBinderId, input.getValue());
 			selectedIndex = 0;
 		}
 
 		const header = {
 			invalidate() {},
 			render(width: number): string[] {
-				const title = theme.bold(config.title);
+				const path = tree ? ` · ${currentBinderPath(tree, currentBinderId)}` : "";
+				const title = theme.bold(`${config.title}${path}`);
 				const hint = searchActive
 					? rawKeyHint("esc", "clear")
-					: [rawKeyHint("enter", "actions"), rawKeyHint("/", "filter"), rawKeyHint("r", "refresh"), rawKeyHint("esc", "close")].join(
-							theme.fg("muted", " · "),
-						);
+					: [
+							rawKeyHint("enter", "open/actions"),
+							...(tree ? [rawKeyHint("a", "actions"), rawKeyHint("←", "up"), rawKeyHint("n", "new Binder")] : []),
+							rawKeyHint("/", "filter"),
+							rawKeyHint("r", "refresh"),
+							rawKeyHint("esc", "close"),
+						].join(theme.fg("muted", " · "));
 				const spacing = Math.max(1, width - visibleWidth(title) - visibleWidth(hint));
 				const summary = statusSummary(rows, config.statusOrder)
 					.map(({ status, count }) => {
@@ -168,9 +272,10 @@ function renderPanel(
 						return `${glyph} ${count} ${status}`;
 					})
 					.join(", ");
+				const binderSummary = tree ? `${tree.nodes.length} Binder${tree.nodes.length === 1 ? "" : "s"}` : "";
 				return [
 					truncateToWidth(`${title}${" ".repeat(spacing)}${hint}`, width, ""),
-					truncateToWidth(theme.fg("muted", summary), width, ""),
+					truncateToWidth(theme.fg("muted", [summary, binderSummary].filter(Boolean).join(" · ")), width, ""),
 				];
 			},
 		};
@@ -179,20 +284,48 @@ function renderPanel(
 			invalidate() {},
 			render(width: number): string[] {
 				const lines = searchActive ? [...input.render(width), ""] : [""];
-				if (filtered.length === 0) return [...lines, theme.fg("muted", `  No matching ${config.kind}s`)];
+				if (filtered.length === 0) return [...lines, theme.fg("muted", `  No ${tree ? "items" : `matching ${config.kind}s`}`)];
 				const start = Math.max(0, Math.min(selectedIndex - Math.floor(BROWSER_VISIBLE_ROWS / 2), filtered.length - BROWSER_VISIBLE_ROWS));
 				const end = Math.min(start + BROWSER_VISIBLE_ROWS, filtered.length);
 				for (let index = start; index < end; index++) {
-					const row = filtered[index]!;
+					const entry = filtered[index]!;
 					const selected = index === selectedIndex;
 					const cursor = selected ? theme.fg("accent", "❯") : " ";
+					if (entry.type === "binder") {
+						const title = selected ? theme.bold(entry.node.binder.title) : entry.node.binder.title;
+						const details = [
+							entry.node.childIds.length > 0 ? `${entry.node.childIds.length} Binder${entry.node.childIds.length === 1 ? "" : "s"}` : "",
+							entry.node.effectiveLabels.length > 0 ? entry.node.effectiveLabels.join(", ") : "",
+							searchActive ? entry.node.path : "",
+						].filter(Boolean);
+						lines.push(
+							truncateToWidth(
+								`${cursor} ${theme.fg("accent", "▸")} ${title}${details.length ? theme.fg("dim", ` · ${details.join(" · ")}`) : ""}`,
+								width,
+								"",
+							),
+						);
+						continue;
+					}
+					const row = entry.row;
 					const presentation = config.presentation[row.status];
 					const glyph = presentation ? theme.fg(presentation.color, presentation.glyph) : "?";
 					const title = selected ? theme.bold(row.title) : row.title;
-					const meta = config.rowMeta(row, theme);
-					lines.push(truncateToWidth(`${cursor} ${glyph} ${title}${meta ? `${theme.fg("dim", " · ")}${meta}` : ""}`, width, ""));
+					const inherited = tree ? inheritedLabelsFor(row.id, tree) : [];
+					const details = [
+						config.rowMeta(row, theme),
+						inherited.length > 0 ? `inherits ${inherited.join(", ")}` : "",
+						tree && searchActive ? artifactBinderPath(row, tree) : "",
+					].filter(Boolean);
+					lines.push(
+						truncateToWidth(
+							`${cursor} ${glyph} ${title}${details.length ? `${theme.fg("dim", " · ")}${details.join(theme.fg("dim", " · "))}` : ""}`,
+							width,
+							"",
+						),
+					);
 				}
-				lines.push(theme.fg("muted", `  ${selectedIndex + 1}/${filtered.length} ${config.kind}`));
+				lines.push(theme.fg("muted", `  ${selectedIndex + 1}/${filtered.length} item${filtered.length === 1 ? "" : "s"}`));
 				return lines;
 			},
 		};
@@ -212,10 +345,10 @@ function renderPanel(
 			invalidate: () => container.invalidate(),
 			handleInput(data: string) {
 				if (searchActive) {
-					if (data === "\x1b") {
+					if (matchesKey(data, "escape")) {
 						searchActive = false;
 						applyFilter();
-					} else if (data === "\r") searchActive = false;
+					} else if (matchesKey(data, "enter")) searchActive = false;
 					else {
 						input.handleInput(data);
 						applyFilter();
@@ -223,30 +356,33 @@ function renderPanel(
 					tui.requestRender();
 					return;
 				}
-				switch (data) {
-					case "\x1b[A":
-						selectedIndex = (selectedIndex - 1 + filtered.length) % Math.max(filtered.length, 1);
-						break;
-					case "\x1b[B":
-						selectedIndex = (selectedIndex + 1) % Math.max(filtered.length, 1);
-						break;
-					case "/":
-						searchActive = true;
-						break;
-					case "r":
-						done("refresh");
-						return;
-					case "\r": {
-						const row = filtered[selectedIndex];
-						if (row) done(row);
-						return;
-					}
-					case "\x1b":
-						done(undefined);
-						return;
-					default:
-						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 (tree && data === "n") {
+					done({ type: "create-binder" });
+					return;
+				} else if (tree && (matchesKey(data, "left") || data === "\x7f")) {
+					const parentId = currentBinderId ? tree.nodes.find((node) => node.binder.id === currentBinderId)?.parentId : undefined;
+					done({ type: "navigate", ...(parentId ? { binderId: parentId } : {}) });
+					return;
+				} else if (data === "r") {
+					done({ type: "refresh" });
+					return;
+				} else if (tree && data === "a") {
+					const entry = filtered[selectedIndex];
+					if (entry?.type === "binder") done({ type: "binder-action", node: entry.node });
+					else if (entry?.type === "artifact") done({ type: "artifact", row: entry.row });
+					return;
+				} else if (matchesKey(data, "enter")) {
+					const entry = filtered[selectedIndex];
+					if (entry?.type === "binder") done({ type: "navigate", binderId: entry.node.binder.id });
+					else if (entry?.type === "artifact") done({ type: "artifact", row: entry.row });
+					return;
+				} else if (matchesKey(data, "escape")) {
+					done(undefined);
+					return;
+				} else return;
 				tui.requestRender();
 			},
 		};

package/extension/src/artifact/binder-navigation.ts

@@ -0,0 +1,208 @@
+import type { Artifact, BinderArtifactPlacement, BinderNode, BinderTree } from "@danypops/papyrus";
+import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { callService } from "../service-client.ts";
+
+export async function loadBinderTree(projectRoot: string, artifactIds: readonly string[]): Promise<BinderTree> {
+	return callService<Record<string, unknown>, BinderTree>("binders.tree", {
+		project_root: projectRoot,
+		artifact_ids: [...new Set(artifactIds)],
+	});
+}
+
+export function parseLabelInput(value: string): string[] {
+	const result: string[] = [];
+	for (const label of value.split(",").map((entry) => entry.trim())) {
+		if (label && !result.includes(label)) result.push(label);
+	}
+	return result;
+}
+
+export function binderNodeById(tree: BinderTree): Map<string, BinderNode> {
+	return new Map(tree.nodes.map((node) => [node.binder.id, node]));
+}
+
+export function binderPlacementByArtifactId(tree: BinderTree): Map<string, BinderArtifactPlacement> {
+	return new Map(tree.artifacts.map((placement) => [placement.artifactId, placement]));
+}
+
+export function currentBinderPath(tree: BinderTree, binderId: string | undefined): string {
+	if (binderId === undefined) return "/";
+	return binderNodeById(tree).get(binderId)?.path ?? "/";
+}
+
+export function childBinders(tree: BinderTree, parentId: string | undefined): BinderNode[] {
+	return tree.nodes
+		.filter((node) => node.parentId === parentId)
+		.sort((left, right) => left.binder.title.localeCompare(right.binder.title) || left.binder.id.localeCompare(right.binder.id));
+}
+
+export function artifactsInBinder<T extends Pick<Artifact, "id" | "title">>(
+	rows: readonly T[],
+	tree: BinderTree,
+	binderId: string | undefined,
+): T[] {
+	const placements = binderPlacementByArtifactId(tree);
+	return rows
+		.filter((row) => placements.get(row.id)?.binderId === binderId)
+		.sort((left, right) => left.title.localeCompare(right.title) || left.id.localeCompare(right.id));
+}
+
+export function artifactBinderPath(row: Pick<Artifact, "id" | "title">, tree: BinderTree): string {
+	const placement = binderPlacementByArtifactId(tree).get(row.id);
+	const binderPath = placement?.binderId ? binderNodeById(tree).get(placement.binderId)?.path : undefined;
+	return binderPath ? `${binderPath}/${row.title}` : `/${row.title}`;
+}
+
+export function inheritedLabelsFor(rowId: string, tree: BinderTree): string[] {
+	return binderPlacementByArtifactId(tree).get(rowId)?.inheritedLabels ?? [];
+}
+
+export function effectiveLabelsFor(row: Pick<Artifact, "id" | "labels">, tree: BinderTree): string[] {
+	return binderPlacementByArtifactId(tree).get(row.id)?.effectiveLabels ?? [...row.labels];
+}
+
+export function binderSearchText(node: BinderNode): string {
+	return [node.path, node.binder.title, node.binder.alias, ...node.effectiveLabels].join(" ").toLowerCase();
+}
+
+export function artifactSearchText(row: Artifact, tree: BinderTree): string {
+	return [artifactBinderPath(row, tree), row.id, row.alias, row.title, row.body ?? "", row.subtype ?? "", ...effectiveLabelsFor(row, tree)]
+		.join(" ")
+		.toLowerCase();
+}
+
+export async function createBinderInteractive(ctx: ExtensionCommandContext, parentId: string | undefined): Promise<boolean> {
+	const title = await ctx.ui.input("Binder name:", "");
+	if (!title) return false;
+	const labelsText = await ctx.ui.input("Inherited labels (comma-separated):", "");
+	if (labelsText === undefined) return false;
+	try {
+		await callService("binders.create", {
+			title,
+			labels: parseLabelInput(labelsText),
+			...(parentId ? { parent_id: parentId } : {}),
+			project_root: ctx.cwd,
+			actor: "user",
+			source: "artifact-navigator",
+		});
+		ctx.ui.notify(`Created Binder "${title.trim()}"`, "info");
+		return true;
+	} catch (error) {
+		ctx.ui.notify(`Binder creation failed: ${error instanceof Error ? error.message : error}`, "error");
+		return false;
+	}
+}
+
+export async function editBinderInteractive(ctx: ExtensionCommandContext, node: BinderNode): Promise<boolean> {
+	const title = await ctx.ui.input("Binder name:", node.binder.title);
+	if (title === undefined) return false;
+	const labelsText = await ctx.ui.input("Inherited labels (comma-separated):", node.binder.labels.join(", "));
+	if (labelsText === undefined) return false;
+	try {
+		await callService("binders.update", {
+			id: node.binder.id,
+			title,
+			labels: parseLabelInput(labelsText),
+			project_root: ctx.cwd,
+			actor: "user",
+			source: "artifact-navigator",
+		});
+		ctx.ui.notify(`Updated Binder "${title.trim()}"`, "info");
+		return true;
+	} catch (error) {
+		ctx.ui.notify(`Binder update failed: ${error instanceof Error ? error.message : error}`, "error");
+		return false;
+	}
+}
+
+function descendantIds(tree: BinderTree, rootId: string): Set<string> {
+	const byId = binderNodeById(tree);
+	const result = new Set<string>([rootId]);
+	const pending = [...(byId.get(rootId)?.childIds ?? [])];
+	while (pending.length > 0) {
+		const id = pending.pop()!;
+		if (result.has(id)) continue;
+		result.add(id);
+		pending.push(...(byId.get(id)?.childIds ?? []));
+	}
+	return result;
+}
+
+async function selectBinderDestination(
+	ctx: ExtensionCommandContext,
+	tree: BinderTree,
+	excludedIds: ReadonlySet<string> = new Set(),
+): Promise<string | null | undefined> {
+	const candidates = tree.nodes
+		.filter((node) => !excludedIds.has(node.binder.id))
+		.sort((left, right) => left.path.localeCompare(right.path));
+	const labels = ["/ (root)", ...candidates.map((node) => node.path)];
+	const selected = await ctx.ui.select("Destination Binder", labels);
+	if (!selected) return undefined;
+	if (selected === labels[0]) return null;
+	return candidates[labels.indexOf(selected) - 1]?.binder.id;
+}
+
+export async function moveBinderInteractive(ctx: ExtensionCommandContext, tree: BinderTree, node: BinderNode): Promise<boolean> {
+	const destination = await selectBinderDestination(ctx, tree, descendantIds(tree, node.binder.id));
+	if (destination === undefined) return false;
+	try {
+		await callService("binders.move", {
+			id: node.binder.id,
+			...(destination ? { parent_id: destination } : {}),
+			project_root: ctx.cwd,
+			actor: "user",
+			source: "artifact-navigator",
+		});
+		ctx.ui.notify(`Moved "${node.binder.title}"`, "info");
+		return true;
+	} catch (error) {
+		ctx.ui.notify(`Binder move failed: ${error instanceof Error ? error.message : error}`, "error");
+		return false;
+	}
+}
+
+export async function moveArtifactInteractive(ctx: ExtensionCommandContext, tree: BinderTree, artifact: Artifact): Promise<boolean> {
+	const destination = await selectBinderDestination(ctx, tree);
+	if (destination === undefined) return false;
+	try {
+		if (destination === null) {
+			await callService("binders.unfile", {
+				artifact_id: artifact.id,
+				project_root: ctx.cwd,
+				actor: "user",
+				source: "artifact-navigator",
+			});
+		} else {
+			await callService("binders.file", {
+				artifact_id: artifact.id,
+				binder_id: destination,
+				project_root: ctx.cwd,
+				actor: "user",
+				source: "artifact-navigator",
+			});
+		}
+		ctx.ui.notify(`Moved "${artifact.title}"`, "info");
+		return true;
+	} catch (error) {
+		ctx.ui.notify(`Artifact move failed: ${error instanceof Error ? error.message : error}`, "error");
+		return false;
+	}
+}
+
+export async function removeBinderInteractive(ctx: ExtensionCommandContext, node: BinderNode): Promise<boolean> {
+	try {
+		await callService("binders.remove", {
+			id: node.binder.id,
+			project_root: ctx.cwd,
+			reason: "Removed from filesystem-style TUI navigator",
+			actor: "user",
+			source: "artifact-navigator",
+		});
+		ctx.ui.notify(`Removed Binder "${node.binder.title}"`, "info");
+		return true;
+	} catch (error) {
+		ctx.ui.notify(`Binder removal failed: ${error instanceof Error ? error.message : error}`, "error");
+		return false;
+	}
+}

package/extension/src/docs/docs.ts

@@ -2,6 +2,7 @@ import type { Artifact } from "@danypops/papyrus";
 import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { showArtifactBrowser, showArtifactDetails } from "../artifact/artifact-browser.ts";
 import { DOC_STATUS_PRESENTATION } from "../artifact/artifact-status-presentation.ts";
+import { parseLabelInput } from "../artifact/binder-navigation.ts";
 import { callService } from "../service-client.ts";
 
 const DOC_ACTIONS: Record<string, string[]> = {
@@ -23,6 +24,7 @@ export async function showDocs(ctx: ExtensionCommandContext): Promise<void> {
 		listOperation: "docs.list",
 		statusOrder: ["draft", "active", "archived"],
 		presentation: DOC_STATUS_PRESENTATION,
+		hierarchical: true,
 		rowMeta: documentRowMeta,
 		actions: (document) => ["Show details", "Edit", "Link artifact", ...(DOC_ACTIONS[document.status] ?? [])],
 		handleAction: async (choice, document, commandCtx) => {
@@ -31,11 +33,19 @@ export async function showDocs(ctx: ExtensionCommandContext): Promise<void> {
 				return;
 			}
 			if (choice === "Edit") {
-				const title = await commandCtx.ui.input("Title:", document.title);
+				const current = await callService<Record<string, unknown>, Artifact>("docs.show", { id: document.id });
+				const title = await commandCtx.ui.input("Title:", current.title);
 				if (title === undefined) return; // canceled
-				const body = await commandCtx.ui.input("Body:", document.body);
+				const body = await commandCtx.ui.input("Body:", current.body);
 				if (body === undefined) return; // canceled
-				const updated = await callService<Record<string, unknown>, Artifact>("docs.update", { id: document.id, title, body });
+				const labels = await commandCtx.ui.input("Direct labels (comma-separated):", current.labels.join(", "));
+				if (labels === undefined) return; // canceled
+				const updated = await callService<Record<string, unknown>, Artifact>("docs.update", {
+					id: document.id,
+					title,
+					body,
+					labels: parseLabelInput(labels),
+				});
 				commandCtx.ui.notify(`Updated "${updated.title}"`, "info");
 				return;
 			}

package/extension/src/playbook/playbooks.ts

@@ -3,6 +3,7 @@ import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import type { AutocompleteItem } from "@earendil-works/pi-tui";
 import { showArtifactBrowser, showArtifactDetails } from "../artifact/artifact-browser.ts";
 import { PLAYBOOK_STATUS_PRESENTATION } from "../artifact/artifact-status-presentation.ts";
+import { parseLabelInput } from "../artifact/binder-navigation.ts";
 import { matchArtifactByName } from "../domain-tools.ts";
 import { callService } from "../service-client.ts";
 
@@ -70,8 +71,8 @@ function strings(value: unknown): string[] {
 }
 
 export function playbookRowMeta(playbook: Artifact): string {
-	const trigger = typeof playbook.extra.trigger === "string" ? `when ${playbook.extra.trigger}` : "manual invocation";
-	const tools = strings(playbook.extra.tools);
+	const trigger = typeof playbook.extra?.trigger === "string" ? `when ${playbook.extra.trigger}` : "manual invocation";
+	const tools = strings(playbook.extra?.tools);
 	return [trigger, tools.join(", ")].filter(Boolean).join(" \u00b7 ");
 }
 
@@ -82,6 +83,7 @@ export async function showPlaybooks(ctx: ExtensionCommandContext): Promise<void>
 		listOperation: "playbooks.list",
 		statusOrder: ["active", "deprecated"],
 		presentation: PLAYBOOK_STATUS_PRESENTATION,
+		hierarchical: true,
 		rowMeta: playbookRowMeta,
 		actions: (playbook) => ["Show details", "Edit", "Invoke", "Link artifact", playbook.status === "active" ? "Disable" : "Enable"],
 		handleAction: async (choice, playbook, commandCtx) => {
@@ -90,11 +92,19 @@ export async function showPlaybooks(ctx: ExtensionCommandContext): Promise<void>
 				return;
 			}
 			if (choice === "Edit") {
-				const title = await commandCtx.ui.input("Title:", playbook.title);
+				const current = await callService<Record<string, unknown>, Artifact>("playbooks.show", { id: playbook.id });
+				const title = await commandCtx.ui.input("Title:", current.title);
 				if (title === undefined) return; // canceled
-				const body = await commandCtx.ui.input("Body:", playbook.body);
+				const body = await commandCtx.ui.input("Body:", current.body);
 				if (body === undefined) return; // canceled
-				const updated = await callService<Record<string, unknown>, Artifact>("playbooks.update", { id: playbook.id, title, body });
+				const labels = await commandCtx.ui.input("Direct labels (comma-separated):", current.labels.join(", "));
+				if (labels === undefined) return; // canceled
+				const updated = await callService<Record<string, unknown>, Artifact>("playbooks.update", {
+					id: playbook.id,
+					title,
+					body,
+					labels: parseLabelInput(labels),
+				});
 				commandCtx.ui.notify(`Updated "${updated.title}"`, "info");
 				return;
 			}

package/extension/src/rules/rules.ts

@@ -2,12 +2,13 @@ import type { Artifact } from "@danypops/papyrus";
 import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
 import { showArtifactBrowser, showArtifactDetails } from "../artifact/artifact-browser.ts";
 import { RULE_STATUS_PRESENTATION, severityColor } from "../artifact/artifact-status-presentation.ts";
+import { parseLabelInput } from "../artifact/binder-navigation.ts";
 import { callService } from "../service-client.ts";
 
 export function ruleRowMeta(rule: Artifact, theme: Theme): string {
-	const severity = typeof rule.extra.severity === "string" ? rule.extra.severity : "info";
+	const severity = typeof rule.extra?.severity === "string" ? rule.extra.severity : "info";
 	const severityText = theme.fg(severityColor(severity), severity.toUpperCase());
-	const condition = typeof rule.extra.condition === "string" ? `when ${rule.extra.condition}` : "always";
+	const condition = typeof rule.extra?.condition === "string" ? `when ${rule.extra.condition}` : "always";
 	return `${severityText} · ${condition}`;
 }
 
@@ -24,16 +25,25 @@ export async function showRules(ctx: ExtensionCommandContext): Promise<void> {
 		listOperation: "rules.list",
 		statusOrder: ["active", "deprecated"],
 		presentation: RULE_STATUS_PRESENTATION,
+		hierarchical: true,
 		rowMeta: ruleRowMeta,
 		actions: (rule) => ["Show details", "Edit", "Preview injection", "Link gated task", rule.status === "active" ? "Disable" : "Enable"],
 		handleAction: async (choice, rule, commandCtx) => {
 			if (choice === "Show details") await showArtifactDetails(commandCtx, rule.id, "rules.show");
 			else if (choice === "Edit") {
-				const title = await commandCtx.ui.input("Title:", rule.title);
+				const current = await callService<Record<string, unknown>, Artifact>("rules.show", { id: rule.id });
+				const title = await commandCtx.ui.input("Title:", current.title);
 				if (title === undefined) return; // canceled
-				const body = await commandCtx.ui.input("Body:", rule.body);
+				const body = await commandCtx.ui.input("Body:", current.body);
 				if (body === undefined) return; // canceled
-				const updated = await callService<Record<string, unknown>, Artifact>("rules.update", { id: rule.id, title, body });
+				const labels = await commandCtx.ui.input("Direct labels (comma-separated):", current.labels.join(", "));
+				if (labels === undefined) return; // canceled
+				const updated = await callService<Record<string, unknown>, Artifact>("rules.update", {
+					id: rule.id,
+					title,
+					body,
+					labels: parseLabelInput(labels),
+				});
 				commandCtx.ui.notify(`Updated "${updated.title}"`, "info");
 			} else if (choice === "Preview injection") {
 				const result = await callService<Record<string, unknown>, { preview: string; combinedLength: number; warning?: string }>(

package/extension/src/task/tasks.ts

@@ -6,6 +6,22 @@
 import type { ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
 import { DynamicBorder, rawKeyHint } from "@earendil-works/pi-coding-agent";
 import { Container, Input, matchesKey, Spacer, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import {
+	artifactBinderPath,
+	artifactSearchText,
+	artifactsInBinder,
+	binderSearchText,
+	childBinders,
+	createBinderInteractive,
+	currentBinderPath,
+	editBinderInteractive,
+	inheritedLabelsFor,
+	loadBinderTree,
+	moveArtifactInteractive,
+	moveBinderInteractive,
+	parseLabelInput,
+	removeBinderInteractive,
+} from "../artifact/binder-navigation.ts";
 import { callService } from "../service-client.ts";
 import { sessionSecretField } from "../session-identity.ts";
 import { showTaskDetails } from "./task-detail-view.ts";
@@ -17,6 +33,8 @@ export { showTaskDetails } from "./task-detail-view.ts";
 
 import {
 	type Artifact,
+	type BinderNode,
+	type BinderTree,
 	type GateResult,
 	projectTaskExecution,
 	type TaskCompletion,
@@ -51,8 +69,10 @@ export interface TaskHierarchyRow {
 	active: boolean;
 }
 
-export function buildTaskHierarchy(graph: TaskGraph): TaskHierarchyRow[] {
-	const byId = new Map(graph.nodes.map((node) => [node.task.id, node]));
+export function buildTaskHierarchy(graph: TaskGraph, includedIds?: ReadonlySet<string>): TaskHierarchyRow[] {
+	const byId = new Map(
+		graph.nodes.filter((node) => includedIds === undefined || includedIds.has(node.task.id)).map((node) => [node.task.id, node]),
+	);
 	const result: TaskHierarchyRow[] = [];
 	const visited = new Set<string>();
 	const visit = (id: string, depth: number): void => {
@@ -71,7 +91,9 @@ export function buildTaskHierarchy(graph: TaskGraph): TaskHierarchyRow[] {
 		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);
+	for (const node of graph.nodes) {
+		if (byId.has(node.task.id)) visit(node.task.id, 0);
+	}
 	return result;
 }
 
@@ -99,23 +121,66 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 	// concurrent agent working the same project never appears as (or is overridden by) this one.
 	const sessionId = ctx.sessionManager.getSessionId();
 	let graph = await loadTaskGraph(ctx.cwd, sessionId);
-	if (graph.nodes.length === 0) {
-		const create = await ctx.ui.select("No tasks yet", ["Create a task", "Cancel"]);
+	let binders = await loadBinderTree(
+		ctx.cwd,
+		graph.nodes.map((node) => node.task.id),
+	);
+	let currentBinderId: string | undefined;
+	const refresh = async (): Promise<void> => {
+		graph = await loadTaskGraph(ctx.cwd, sessionId);
+		binders = await loadBinderTree(
+			ctx.cwd,
+			graph.nodes.map((node) => node.task.id),
+		);
+		if (currentBinderId && !binders.nodes.some((node) => node.binder.id === currentBinderId)) currentBinderId = undefined;
+	};
+	if (graph.nodes.length === 0 && binders.nodes.length === 0) {
+		const create = await ctx.ui.select("No tasks or Binders yet", ["Create a task", "Create a Binder", "Cancel"]);
 		if (create === "Create a task") {
 			const title = await ctx.ui.input("Task title:", "");
 			if (title) {
 				await callService("tasks.create", { title, project_root: ctx.cwd, actor: "user", source: "tasks-tui", session_id: sessionId });
-				graph = await loadTaskGraph(ctx.cwd, sessionId);
+				await refresh();
 			}
-		}
-		if (graph.nodes.length === 0) return;
+		} else if (create === "Create a Binder") {
+			if (await createBinderInteractive(ctx, undefined)) await refresh();
+		} else return;
 	}
 
 	for (;;) {
-		const action = await renderPanel(ctx, graph);
+		const action = await renderPanel(ctx, graph, binders, currentBinderId);
 		if (!action) return;
 		if (action.type === "refresh") {
-			graph = await loadTaskGraph(ctx.cwd, sessionId);
+			await refresh();
+			continue;
+		}
+		if (action.type === "navigate") {
+			currentBinderId = action.binderId;
+			continue;
+		}
+		if (action.type === "create-binder") {
+			if (await createBinderInteractive(ctx, currentBinderId)) await refresh();
+			continue;
+		}
+		if (action.type === "binder-action" && action.binder) {
+			const choice = await ctx.ui.select(action.binder.path, [
+				"Open",
+				"Create nested Binder",
+				"Rename / edit inherited labels",
+				"Move Binder",
+				"Remove empty Binder",
+			]);
+			if (!choice) continue;
+			if (choice === "Open") {
+				currentBinderId = action.binder.binder.id;
+				continue;
+			}
+			let changed = false;
+			if (choice === "Create nested Binder") changed = await createBinderInteractive(ctx, action.binder.binder.id);
+			else if (choice === "Rename / edit inherited labels") changed = await editBinderInteractive(ctx, action.binder);
+			else if (choice === "Move Binder") changed = await moveBinderInteractive(ctx, binders, action.binder);
+			else if (choice === "Remove empty Binder") changed = await removeBinderInteractive(ctx, action.binder);
+			if (changed) await refresh();
 			continue;
 		}
 		if (action.type === "scope") {
@@ -135,7 +200,7 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 				if (!rootTaskId) continue;
 			}
 			await callService("tasks.set_scope", { project_root: ctx.cwd, scope, ...(rootTaskId ? { root_task_id: rootTaskId } : {}) });
-			graph = await loadTaskGraph(ctx.cwd, sessionId);
+			await refresh();
 			continue;
 		}
 		if (action.type === "graph") {
@@ -151,6 +216,7 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 		const choices = [
 			"Show details",
 			"Edit task",
+			"Move to Binder",
 			...(!active && action.row.status !== "done" && action.row.status !== "canceled" ? ["Make active"] : []),
 			...(active ? [focusStatus === "paused" ? "Resume focus" : "Pause focus", "Clear focus"] : []),
 			...(action.row.status === "review" ? ["Run gates"] : []),
@@ -160,6 +226,11 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 		];
 		const choice = await ctx.ui.select(action.row.title, choices);
 		if (!choice) continue;
+		if (choice === "Move to Binder") {
+			await moveArtifactInteractive(ctx, binders, action.row);
+			await refresh();
+			continue;
+		}
 
 		if ((choice === "Remove dependency" || choice === "Remove from parent") && node) {
 			const relatedIds = choice === "Remove dependency" ? node.dependencyIds : node.parentIds;
@@ -198,7 +269,7 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 			} catch (error) {
 				ctx.ui.notify(`Relationship removal failed: ${error instanceof Error ? error.message : error}`, "error");
 			}
-			graph = await loadTaskGraph(ctx.cwd, sessionId);
+			await refresh();
 			continue;
 		}
 
@@ -215,16 +286,20 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 			if (title === undefined) continue;
 			const body = await ctx.ui.input("Task body:", action.row.body);
 			if (body === undefined) continue;
+			const labels = await ctx.ui.input("Direct labels (comma-separated):", action.row.labels.join(", "));
+			if (labels === undefined) continue;
 			try {
 				const updated = await callService<Record<string, unknown>, Artifact>("tasks.update", {
 					id: action.row.id,
 					title,
 					body,
+					labels: parseLabelInput(labels),
 					actor: "user",
 					source: "tasks-tui",
 				});
 				action.row.title = updated.title;
 				action.row.body = updated.body;
+				action.row.labels = updated.labels;
 				ctx.ui.notify(`Updated: ${updated.title}`, "info");
 			} catch (error) {
 				ctx.ui.notify(`Task update failed: ${error instanceof Error ? error.message : error}`, "error");
@@ -331,39 +406,65 @@ export async function showTasks(ctx: ExtensionCommandContext): Promise<void> {
 				ctx.ui.notify(`Task action failed: ${error instanceof Error ? error.message : error}`, "error");
 			}
 		}
-		graph = await loadTaskGraph(ctx.cwd, sessionId);
+		await refresh();
 	}
 }
 
+type TaskPanelEntry = { type: "binder"; node: BinderNode } | { type: "task"; entry: TaskHierarchyRow };
+
 interface PanelAction {
-	type: "action" | "refresh" | "graph" | "scope";
+	type: "action" | "binder-action" | "navigate" | "create-binder" | "refresh" | "graph" | "scope";
 	row?: TaskRow;
+	binder?: BinderNode;
+	binderId?: string;
 }
 
-function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<PanelAction | undefined> {
+function renderPanel(
+	ctx: ExtensionCommandContext,
+	graph: TaskGraph,
+	binders: BinderTree,
+	currentBinderId: string | undefined,
+): 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 allHierarchy = buildTaskHierarchy(graph);
+		const directoryIds = new Set(artifactsInBinder(rows, binders, currentBinderId).map((task) => task.id));
+		const directoryHierarchy = buildTaskHierarchy(graph, directoryIds);
+		const currentEntries = (): TaskPanelEntry[] => [
+			...childBinders(binders, currentBinderId).map((node): TaskPanelEntry => ({ type: "binder", node })),
+			...directoryHierarchy.map((entry): TaskPanelEntry => ({ type: "task", entry })),
+		];
 		const taskById = new Map(rows.map((task) => [task.id, task]));
 		const executionById = new Map(projectTaskExecution(graph).nodes.map((node) => [node.id, node]));
 		let searchActive = false;
-		let filtered = [...hierarchy];
+		let filtered = currentEntries();
 		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];
+			const query = searchInput.getValue().trim().toLowerCase();
+			filtered = query
+				? [
+						...binders.nodes
+							.filter((node) => binderSearchText(node).includes(query))
+							.map((node): TaskPanelEntry => ({ type: "binder", node })),
+						...allHierarchy
+							.filter(({ task }) => artifactSearchText(task, binders).includes(query))
+							.map((entry): TaskPanelEntry => ({ type: "task", entry: { ...entry, depth: 0 } })),
+					].sort((left, right) => {
+						const leftPath = left.type === "binder" ? left.node.path : artifactBinderPath(left.entry.task, binders);
+						const rightPath = right.type === "binder" ? right.node.path : artifactBinderPath(right.entry.task, binders);
+						return leftPath.localeCompare(rightPath);
+					})
+				: currentEntries();
 			selectedIndex = 0;
 		}
 
 		function statusLine(): string {
 			const counts: Record<string, number> = {};
-			for (const entry of hierarchy) counts[entry.task.status] = (counts[entry.task.status] ?? 0) + 1;
-			const parts = hierarchy.some((entry) => entry.active) ? ["▶ 1 active"] : [];
+			for (const entry of allHierarchy) counts[entry.task.status] = (counts[entry.task.status] ?? 0) + 1;
+			const parts = allHierarchy.some((entry) => entry.active) ? ["▶ 1 active"] : [];
 			for (const status of ["todo", "in-progress", "review", "rejected", "done", "canceled"] as TaskStatus[]) {
 				if ((counts[status] ?? 0) > 0) {
 					const presentation = TASK_STATUS_PRESENTATION[status];
@@ -376,22 +477,21 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 		const header = {
 			invalidate() {},
 			render(width: number): string[] {
-				const title = theme.bold(`Tasks · ${graph.scope?.label ?? "scope unavailable"}`);
+				const title = theme.bold(`Tasks · ${graph.scope?.label ?? "scope unavailable"} · ${currentBinderPath(binders, currentBinderId)}`);
 				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("s", "scope") +
-						theme.fg("muted", " · ") +
-						rawKeyHint("r", "refresh") +
-						theme.fg("muted", " · ") +
-						rawKeyHint("esc", "close");
+					: [
+							rawKeyHint("↑/↓", "navigate"),
+							rawKeyHint("enter", "open/actions"),
+							rawKeyHint("a", "actions"),
+							rawKeyHint("←", "up"),
+							rawKeyHint("n", "new Binder"),
+							rawKeyHint("/", "filter"),
+							rawKeyHint("g", "graph"),
+							rawKeyHint("s", "scope"),
+							rawKeyHint("r", "refresh"),
+							rawKeyHint("esc", "close"),
+						].join(theme.fg("muted", " · "));
 				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, "");
@@ -406,16 +506,35 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 				if (searchActive) lines.push(...searchInput.render(width));
 				lines.push("");
 				if (filtered.length === 0) {
-					lines.push(theme.fg("muted", "  No tasks"));
+					lines.push(theme.fg("muted", "  No tasks or Binders here"));
 					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 panelEntry = filtered[i]!;
 					const selected = i === selectedIndex;
 					const cursor = selected ? theme.fg("accent", "❯") : " ";
+					if (panelEntry.type === "binder") {
+						const title = selected ? theme.bold(panelEntry.node.binder.title) : panelEntry.node.binder.title;
+						const metadata = [
+							panelEntry.node.childIds.length > 0
+								? `${panelEntry.node.childIds.length} Binder${panelEntry.node.childIds.length === 1 ? "" : "s"}`
+								: "",
+							panelEntry.node.effectiveLabels.length > 0 ? panelEntry.node.effectiveLabels.join(", ") : "",
+							searchActive ? panelEntry.node.path : "",
+						].filter(Boolean);
+						lines.push(
+							truncateToWidth(
+								`${cursor}  ${theme.fg("accent", "▸")} ${title}${metadata.length ? theme.fg("dim", ` · ${metadata.join(" · ")}`) : ""}`,
+								width,
+								"",
+							),
+						);
+						continue;
+					}
+					const entry = panelEntry.entry;
+					const row = entry.task;
 					const focus = entry.active ? theme.fg("accent", "▶") : " ";
 					const execution = executionById.get(row.id);
 					const state = execution?.state ?? row.status;
@@ -429,8 +548,10 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 					const title = selected ? theme.bold(row.title) : row.title;
 					let laterSibling = false;
 					for (let candidate = i + 1; candidate < filtered.length; candidate++) {
-						if (filtered[candidate]!.depth < entry.depth) break;
-						if (filtered[candidate]!.depth === entry.depth) {
+						const candidateEntry = filtered[candidate];
+						if (candidateEntry?.type !== "task") continue;
+						if (candidateEntry.entry.depth < entry.depth) break;
+						if (candidateEntry.entry.depth === entry.depth) {
 							laterSibling = true;
 							break;
 						}
@@ -441,7 +562,7 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 						hasLaterSibling: laterSibling,
 					});
 					const node = entry.depth === 0 && entry.childCount > 0 ? theme.fg("accent", connector) : theme.fg("dim", connector);
-					const gates = (row.extra?.gates as any[])?.length;
+					const gates = Array.isArray(row.extra?.gates) ? row.extra.gates.length : 0;
 					const relationParts: string[] = [];
 					if (execution) relationParts.push(execution.layer === null ? state : `layer ${execution.layer + 1} · ${state}`);
 					if (entry.childCount > 0) relationParts.push(`${entry.childCount} subtask${entry.childCount === 1 ? "" : "s"}`);
@@ -449,12 +570,18 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 						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"}`);
+					if (gates > 0) relationParts.push(`${gates} gate${gates === 1 ? "" : "s"}`);
+					if (row.labels.length > 0) relationParts.push(row.labels.join(", "));
+					const inheritedLabels = inheritedLabelsFor(row.id, binders);
+					if (inheritedLabels.length > 0) relationParts.push(`inherits ${inheritedLabels.join(", ")}`);
+					if (searchActive) relationParts.push(artifactBinderPath(row, binders));
 					const relationText = relationParts.length > 0 ? theme.fg("dim", ` · ${relationParts.join(" · ")}`) : "";
 					lines.push(truncateToWidth(`${cursor}${focus} ${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`));
+				lines.push(
+					theme.fg("muted", `  ${hasScroll ? `${selectedIndex + 1}/${filtered.length} · ` : ""}↑/↓ navigate · Enter open/actions`),
+				);
 				return lines;
 			},
 		};
@@ -489,7 +616,14 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 				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") {
+				else if (data === "n") {
+					done({ type: "create-binder" });
+					return;
+				} else if (matchesKey(data, "left") || data === "\x7f") {
+					const parentId = currentBinderId ? binders.nodes.find((node) => node.binder.id === currentBinderId)?.parentId : undefined;
+					done({ type: "navigate", ...(parentId ? { binderId: parentId } : {}) });
+					return;
+				} else if (data === "g") {
 					done({ type: "graph" });
 					return;
 				} else if (data === "s") {
@@ -498,9 +632,15 @@ function renderPanel(ctx: ExtensionCommandContext, graph: TaskGraph): Promise<Pa
 				} else if (data === "r") {
 					done({ type: "refresh" });
 					return;
+				} else if (data === "a") {
+					const panelEntry = filtered[selectedIndex];
+					if (panelEntry?.type === "binder") done({ type: "binder-action", binder: panelEntry.node });
+					else if (panelEntry?.type === "task") done({ type: "action", row: panelEntry.entry.task });
+					return;
 				} else if (matchesKey(data, "enter")) {
-					const entry = filtered[selectedIndex];
-					if (entry) done({ type: "action", row: entry.task });
+					const panelEntry = filtered[selectedIndex];
+					if (panelEntry?.type === "binder") done({ type: "navigate", binderId: panelEntry.node.binder.id });
+					else if (panelEntry?.type === "task") done({ type: "action", row: panelEntry.entry.task });
 					return;
 				} else if (matchesKey(data, "escape")) {
 					done(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/pi-papyrus",
-  "version": "0.57.2",
+  "version": "0.57.4",
   "description": "Pi host extension for Papyrus: native tools, TUI panels, and context injection over the daemon-backed graph store",
   "type": "module",
   "keywords": ["pi-package"],
@@ -12,23 +12,23 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "peerDependencies": {
-    "@danypops/vehicle-client-pi": "^0.45.0",
+    "@danypops/vehicle-client-pi": "^0.45.1",
     "@earendil-works/pi-coding-agent": "*",
     "@earendil-works/pi-tui": "*",
     "typebox": "*"
   },
   "dependencies": {
     "@danypops/jittor": "^0.19.2",
-    "@danypops/papyrus": "^0.60.0",
+    "@danypops/papyrus": "^0.60.2",
     "@danypops/vehicle-client": "^0.10.3",
-    "@danypops/vehicle-core": "^0.17.1",
+    "@danypops/vehicle-core": "^0.18.5",
     "@danypops/vehicle-server": "^0.25.2",
     "beautiful-mermaid": "1.1.3",
     "malevich-tui-components": "^0.32.1"
   },
   "devDependencies": {
     "@danypops/pi-tui-harness": "^0.0.2",
-    "@danypops/vehicle-client-pi": "^0.45.0",
+    "@danypops/vehicle-client-pi": "^0.45.1",
     "@danypops/vehicle-conformance": "^0.3.0",
     "@earendil-works/pi-coding-agent": "^0.80.10",
     "bun-types": "latest",