@danypops/papyrus 0.10.0 → 0.10.1

package/README.md

@@ -116,7 +116,7 @@ Internally, application services depend on the `ArtifactStore` and `GateRunner`
 - `/rules` — severity/condition rows, exact injection preview, enable/disable, and task gating
 - `/skills` — trigger/tools rows, invocation into the editor, and artifact templates
 
-All frontends use daemon-backed domain operations; none opens SQLite from the Pi process.
+All frontends use daemon-backed domain operations; none opens SQLite from the Pi process. **Show details** opens a bounded navigable view across Tasks, Notes, Docs, Rules, legacy Skills, templates, and workflow Skills. `↑/↓` scrolls, `←/→` pans wide relationships, and Esc returns to the browser; non-interactive clients receive stable text.
 
 ## Notes
 

package/extension/src/artifact-browser.ts

@@ -4,9 +4,12 @@ import { Container, Input, Spacer, truncateToWidth, visibleWidth } from "@earend
 import { SEED_RELATIONS } from "../../src/constants.ts";
 import type { Artifact } from "../../src/domain/artifact.ts";
 import type { OperationName } from "../../src/service.ts";
-import { formatMetadata } from "./artifact-format.ts";
+import { artifactDetailsText } from "./artifact-detail-format.ts";
+import { showArtifactDetailView } from "./artifact-detail-view.ts";
 import { callService } from "./service-client.ts";
 
+export { artifactDetailsText } from "./artifact-detail-format.ts";
+
 const BROWSER_QUERY_LIMIT = 500;
 const BROWSER_VISIBLE_ROWS = 20;
 const DETAIL_GRAPH_DEPTH = 4;
@@ -51,31 +54,34 @@ async function loadArtifacts(config: ArtifactBrowserConfig): Promise<Artifact[]>
 	});
 }
 
+export type ArtifactDetailLoader = (
+	operation: OperationName,
+	input: Record<string, unknown>,
+) => Promise<Artifact | null>;
+
+const loadArtifactDetails: ArtifactDetailLoader = (operation, input) =>
+	callService<Record<string, unknown>, Artifact | null>(operation, input);
+
 export async function showArtifactDetails(
 	ctx: ExtensionCommandContext,
 	id: string,
 	operation: OperationName = "artifact.show",
 	input: Record<string, unknown> = {},
+	load: ArtifactDetailLoader = loadArtifactDetails,
 ): Promise<void> {
-	const artifact = await callService<Record<string, unknown>, Artifact | null>(operation, {
-		id,
-		...input,
-		tree: true,
-		depth: DETAIL_GRAPH_DEPTH,
-		max_nodes: DETAIL_GRAPH_NODES,
-	});
-	if (!artifact) { ctx.ui.notify(`Artifact ${id} not found`, "error"); return; }
-	let output = `${artifact.title}\n${artifact.id} [${artifact.kind}|${artifact.status}]`;
-	if (artifact.subtype) output += ` · ${artifact.subtype}`;
-	if (artifact.body) output += `\n\n${artifact.body}`;
-	if (artifact.labels.length > 0) output += `\n\nLabels: ${artifact.labels.join(", ")}`;
-	if (Object.keys(artifact.extra).length > 0) {
-		output += `\n\nMetadata:\n${formatMetadata(artifact.extra).map((line) => `  ${line}`).join("\n")}`;
-	}
-	if (artifact.edges?.length) {
-		output += `\n\nEdges:\n${artifact.edges.map((edge) => `  ${edge.from} --${edge.relation}--> ${edge.to}`).join("\n")}`;
+	try {
+		const artifact = await load(operation, {
+			id,
+			...input,
+			tree: true,
+			depth: DETAIL_GRAPH_DEPTH,
+			max_nodes: DETAIL_GRAPH_NODES,
+		});
+		if (!artifact) { ctx.ui.notify(`Artifact ${id} not found`, "error"); return; }
+		await showArtifactDetailView(ctx, artifact);
+	} catch (error) {
+		ctx.ui.notify(`Show details failed: ${error instanceof Error ? error.message : error}`, "error");
 	}
-	ctx.ui.notify(output, "info");
 }
 
 export async function linkFromArtifact(ctx: ExtensionCommandContext, fromId: string, fixedRelation?: string): Promise<void> {

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

@@ -0,0 +1,16 @@
+import type { Artifact } from "../../src/domain/artifact.ts";
+import { formatMetadata } from "./artifact-format.ts";
+
+export function artifactDetailsText(artifact: Artifact): string {
+	let output = `${artifact.title}\n${artifact.id} [${artifact.kind}|${artifact.status}]`;
+	if (artifact.subtype) output += ` · ${artifact.subtype}`;
+	output += `\n\n${artifact.body || "(no body)"}`;
+	if (artifact.labels.length > 0) output += `\n\nLabels: ${artifact.labels.join(", ")}`;
+	if (Object.keys(artifact.extra).length > 0) {
+		output += `\n\nMetadata:\n${formatMetadata(artifact.extra).map((line) => `  ${line}`).join("\n")}`;
+	}
+	if (artifact.edges?.length) {
+		output += `\n\nRelationships:\n${artifact.edges.map((edge) => `  ${edge.from} --${edge.relation}--> ${edge.to}`).join("\n")}`;
+	}
+	return output;
+}

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

@@ -0,0 +1,95 @@
+import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi, type TUI } from "@earendil-works/pi-tui";
+import {
+	ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS,
+	ARTIFACT_DETAIL_MAX_VISIBLE_LINES,
+	ARTIFACT_DETAIL_MIN_VISIBLE_LINES,
+	ARTIFACT_DETAIL_RESERVED_ROWS,
+} from "../../src/constants.ts";
+import type { Artifact } from "../../src/domain/artifact.ts";
+import { artifactDetailsText } from "./artifact-detail-format.ts";
+
+interface ArtifactDetailLine {
+	text: string;
+	wide: boolean;
+}
+
+class ArtifactDetailViewport {
+	private offsetX = 0;
+	private offsetY = 0;
+	private renderedWidth = 0;
+	private lines: ArtifactDetailLine[] = [];
+	private readonly visibleLines: number;
+	private readonly narrative: string;
+	private readonly relationships: string[];
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		artifact: Artifact,
+		private readonly close: () => void,
+	) {
+		this.visibleLines = Math.max(
+			ARTIFACT_DETAIL_MIN_VISIBLE_LINES,
+			Math.min(ARTIFACT_DETAIL_MAX_VISIBLE_LINES, tui.terminal.rows - ARTIFACT_DETAIL_RESERVED_ROWS),
+		);
+		this.narrative = artifactDetailsText({ ...artifact, edges: undefined });
+		this.relationships = (artifact.edges ?? []).map((edge) => `${edge.from} --${edge.relation}--> ${edge.to}`);
+	}
+
+	invalidate(): void { this.renderedWidth = 0; }
+
+	render(width: number): string[] {
+		const contentWidth = Math.max(1, width - 2);
+		this.buildLines(contentWidth);
+		const wideWidth = this.relationships.reduce((maximum, line) => Math.max(maximum, visibleWidth(line)), 0);
+		this.offsetX = Math.min(this.offsetX, Math.max(0, wideWidth - contentWidth));
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
+		const end = Math.min(this.lines.length, this.offsetY + this.visibleLines);
+		const border = this.theme.fg("borderMuted", "─".repeat(Math.max(1, width)));
+		const footer = [
+			wideWidth > contentWidth ? `←/→ relationships · column ${this.offsetX + 1}/${wideWidth}` : "",
+			this.lines.length > this.visibleLines ? `↑/↓ scroll · ${this.offsetY + 1}-${end}/${this.lines.length}` : "",
+			"Esc back",
+		].filter(Boolean).join(" · ");
+		return [
+			border,
+			truncateToWidth(this.theme.bold("Artifact details"), width, ""),
+			border,
+			...this.lines.slice(this.offsetY, end).map((line) => line.wide
+				? ` ${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.lines.length - this.visibleLines), this.offsetY + 1);
+		else if (matchesKey(data, "left")) this.offsetX = Math.max(0, this.offsetX - ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS);
+		else if (matchesKey(data, "right")) this.offsetX += ARTIFACT_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, wide: false })));
+		const relationshipSection = this.relationships.length > 0
+			? [{ text: "", wide: false }, { text: "Relationships:", wide: false }, ...this.relationships.map((text) => ({ text, wide: true }))]
+			: [];
+		this.lines = [...narrative, ...relationshipSection];
+		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
+	}
+}
+
+export async function showArtifactDetailView(ctx: ExtensionCommandContext, artifact: Artifact): Promise<void> {
+	const output = artifactDetailsText(artifact);
+	if (ctx.mode !== "tui") { ctx.ui.notify(output, "info"); return; }
+	await ctx.ui.custom<void>((tui, theme, _keybindings, done) =>
+		new ArtifactDetailViewport(tui, theme, artifact, done));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danypops/papyrus",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Daemon-backed graph artifacts, evidence-bearing tasks, rules, skills, and native TUI workflows for Pi",
   "type": "module",
   "keywords": ["pi-package"],

package/src/constants.ts

@@ -29,6 +29,11 @@ export const TASK_DETAIL_MIN_VISIBLE_LINES = 8;
 export const TASK_DETAIL_MAX_VISIBLE_LINES = 24;
 export const TASK_DETAIL_RESERVED_ROWS = 8;
 export const TASK_DETAIL_HORIZONTAL_PAN_COLUMNS = 4;
+/** Bounded navigable detail views for non-Task artifacts. */
+export const ARTIFACT_DETAIL_MIN_VISIBLE_LINES = 8;
+export const ARTIFACT_DETAIL_MAX_VISIBLE_LINES = 24;
+export const ARTIFACT_DETAIL_RESERVED_ROWS = 8;
+export const ARTIFACT_DETAIL_HORIZONTAL_PAN_COLUMNS = 4;
 export const TASK_GRAPH_MIN_VISIBLE_LINES = 8;
 export const TASK_GRAPH_MAX_VISIBLE_LINES = 30;
 export const TASK_GRAPH_RESERVED_ROWS = 8;