@danypops/papyrus 0.10.1 → 0.11.0

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. **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.
+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. User-authored bodies render as width-aware Markdown with headings, emphasis, links, quotes, lists, tables, inline/fenced code, syntax highlighting, and every color/decorative style derived dynamically from the active Pi theme. Generated lifecycle, metadata, checklist, gate, history, and relationship sections keep explicit semantic theme colors. `↑/↓` scrolls, `←/→` pans wide relationships, and Esc returns to the browser; non-interactive clients receive stable source text.
 
 ## Notes
 

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

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

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

@@ -1,4 +1,4 @@
-import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { ExtensionCommandContext } 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,
@@ -7,7 +7,8 @@ import {
 	ARTIFACT_DETAIL_RESERVED_ROWS,
 } from "../../src/constants.ts";
 import type { Artifact } from "../../src/domain/artifact.ts";
-import { artifactDetailsText } from "./artifact-detail-format.ts";
+import { artifactDetailContent, artifactDetailsText, type ArtifactDetailContent } from "./artifact-detail-format.ts";
+import { renderMarkdownBody, type ActiveTheme } from "./markdown.ts";
 
 interface ArtifactDetailLine {
 	text: string;
@@ -20,12 +21,11 @@ class ArtifactDetailViewport {
 	private renderedWidth = 0;
 	private lines: ArtifactDetailLine[] = [];
 	private readonly visibleLines: number;
-	private readonly narrative: string;
-	private readonly relationships: string[];
+	private readonly content: ArtifactDetailContent;
 
 	constructor(
 		private readonly tui: TUI,
-		private readonly theme: Theme,
+		private readonly activeTheme: ActiveTheme,
 		artifact: Artifact,
 		private readonly close: () => void,
 	) {
@@ -33,8 +33,7 @@ class ArtifactDetailViewport {
 			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}`);
+		this.content = artifactDetailContent(artifact);
 	}
 
 	invalidate(): void { this.renderedWidth = 0; }
@@ -42,11 +41,12 @@ class ArtifactDetailViewport {
 	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);
+		const wideWidth = this.content.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 theme = this.activeTheme();
+		const border = 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}` : "",
@@ -54,12 +54,12 @@ class ArtifactDetailViewport {
 		].filter(Boolean).join(" · ");
 		return [
 			border,
-			truncateToWidth(this.theme.bold("Artifact details"), width, ""),
+			truncateToWidth(theme.fg("accent", 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, ""),
+			truncateToWidth(theme.fg("dim", footer), width, ""),
 			border,
 		];
 	}
@@ -77,12 +77,29 @@ class ArtifactDetailViewport {
 	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 }))]
+		const theme = this.activeTheme();
+		const wrap = (text: string, color: "text" | "muted" | "dim" = "text"): ArtifactDetailLine[] =>
+			(text.length === 0 ? [""] : wrapTextWithAnsi(theme.fg(color, text), width)).map((line) => ({ text: line, wide: false }));
+		const identity = [
+			...wrap(theme.bold(this.content.title)),
+			...wrap(this.content.identity, "muted"),
+			{ text: "", wide: false },
+		];
+		const body = renderMarkdownBody(this.content.body, width, this.activeTheme).map((text) => ({ text, wide: false }));
+		const labels = this.content.labels.length > 0
+			? [{ text: "", wide: false }, ...wrap("Labels:", "muted"), ...wrap(this.content.labels.join(", "))]
+			: [];
+		const metadata = this.content.metadata.length > 0
+			? [{ text: "", wide: false }, ...wrap("Metadata:", "muted"), ...this.content.metadata.flatMap((line) => wrap(`  ${line}`, "dim"))]
+			: [];
+		const relationships = this.content.relationships.length > 0
+			? [
+				{ text: "", wide: false },
+				...wrap("Relationships:", "muted"),
+				...this.content.relationships.map((text) => ({ text: theme.fg("text", text), wide: true })),
+			]
 			: [];
-		this.lines = [...narrative, ...relationshipSection];
+		this.lines = [...identity, ...body, ...labels, ...metadata, ...relationships];
 		this.offsetY = Math.min(this.offsetY, Math.max(0, this.lines.length - this.visibleLines));
 	}
 }
@@ -91,5 +108,5 @@ export async function showArtifactDetailView(ctx: ExtensionCommandContext, artif
 	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));
+		new ArtifactDetailViewport(tui, () => ctx.ui.theme ?? theme, artifact, done));
 }

package/extension/src/markdown.ts

@@ -0,0 +1,60 @@
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import { Markdown, type MarkdownTheme } from "@earendil-works/pi-tui";
+
+export type ActiveTheme = () => Theme;
+export type ActiveMarkdownTheme = () => Pick<MarkdownTheme, "highlightCode">;
+
+function activePiMarkdownTheme(): Pick<MarkdownTheme, "highlightCode"> {
+	try {
+		return getMarkdownTheme();
+	} catch {
+		return {};
+	}
+}
+
+export function createPapyrusMarkdownTheme(
+	activeTheme: ActiveTheme,
+	activeMarkdownTheme: ActiveMarkdownTheme = activePiMarkdownTheme,
+): MarkdownTheme {
+	return {
+		heading: (text) => activeTheme().fg("mdHeading", text),
+		link: (text) => activeTheme().fg("mdLink", text),
+		linkUrl: (text) => activeTheme().fg("mdLinkUrl", text),
+		code: (text) => activeTheme().fg("mdCode", text),
+		codeBlock: (text) => activeTheme().fg("mdCodeBlock", text),
+		codeBlockBorder: (text) => activeTheme().fg("mdCodeBlockBorder", text),
+		quote: (text) => activeTheme().fg("mdQuote", text),
+		quoteBorder: (text) => activeTheme().fg("mdQuoteBorder", text),
+		hr: (text) => activeTheme().fg("mdHr", text),
+		listBullet: (text) => activeTheme().fg("mdListBullet", text),
+		bold: (text) => activeTheme().bold(text),
+		italic: (text) => activeTheme().italic(text),
+		strikethrough: (text) => activeTheme().strikethrough(text),
+		underline: (text) => activeTheme().underline(text),
+		highlightCode: (code, language) => {
+			try {
+				const highlighted = activeMarkdownTheme().highlightCode?.(code, language);
+				if (highlighted) return highlighted;
+			} catch {
+				// The host theme may be unavailable in isolated rendering tests.
+			}
+			return code.split("\n").map((line) => activeTheme().fg("mdCodeBlock", line));
+		},
+	};
+}
+
+export function renderMarkdownBody(
+	body: string,
+	width: number,
+	activeTheme: ActiveTheme,
+	activeMarkdownTheme: ActiveMarkdownTheme = activePiMarkdownTheme,
+): string[] {
+	const markdown = new Markdown(
+		body || "(no body)",
+		0,
+		0,
+		createPapyrusMarkdownTheme(activeTheme, activeMarkdownTheme),
+		{ color: (text) => activeTheme().fg("text", text) },
+	);
+	return markdown.render(Math.max(1, width));
+}

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

@@ -70,19 +70,38 @@ function historyLines(history: TaskEvent[]): string[] {
 	return lines;
 }
 
-export function taskDetailsText(task: Artifact, relationshipGraphLines: string[] = [], history: TaskEvent[] = []): 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)"}`;
+export interface TaskDetailContent {
+	headline: string;
+	identity: string;
+	labels: string[];
+	body: string;
+	sections: string[][];
+}
+
+export function taskDetailContent(task: Artifact, history: TaskEvent[] = []): TaskDetailContent {
+	const sections: string[][] = [];
 	const checklist = checklistLines(task.extra["checklist"]);
-	if (checklist.length > 0) output += `\n\n${checklist.join("\n")}`;
+	if (checklist.length > 0) sections.push(checklist);
 	const gates = gateLines(task.extra["gates"]);
-	if (gates.length > 0) output += `\n\n${gates.join("\n")}`;
+	if (gates.length > 0) sections.push(gates);
 	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")}`;
-	}
-	output += `\n\n${historyLines(history).join("\n")}`;
+	if (Object.keys(metadata).length > 0) sections.push(["Metadata:", ...formatMetadata(metadata).map((line) => `  ${line}`)]);
+	sections.push(historyLines(history));
+	return {
+		headline: `${TASK_STATUS_GLYPHS[task.status] ?? "?"} ${task.title}`,
+		identity: `${task.id} [task|${task.status}]`,
+		labels: [...task.labels],
+		body: task.body || "(no body)",
+		sections,
+	};
+}
+
+export function taskDetailsText(task: Artifact, relationshipGraphLines: string[] = [], history: TaskEvent[] = []): string {
+	const content = taskDetailContent(task, history);
+	let output = `${content.headline}\n${content.identity}`;
+	if (content.labels.length > 0) output += `\nLabels: ${content.labels.join(", ")}`;
+	output += `\n\n${content.body}`;
+	for (const section of content.sections) output += `\n\n${section.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}`;

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

@@ -1,4 +1,4 @@
-import type { ExtensionCommandContext, Theme } from "@earendil-works/pi-coding-agent";
+import type { ExtensionCommandContext } 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,
@@ -12,7 +12,9 @@ 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";
+import { taskDetailContent, taskDetailsText, type TaskDetailContent } from "./task-detail-format.ts";
+import { renderMarkdownBody, type ActiveTheme } from "./markdown.ts";
+import { TASK_STATUS_PRESENTATION } from "./task-presentation.ts";
 
 interface DetailLine {
 	text: string;
@@ -25,11 +27,12 @@ class TaskDetailViewport {
 	private renderedWidth = 0;
 	private detailLines: DetailLine[] = [];
 	private readonly visibleLines: number;
-	private readonly narrative: string;
+	private readonly content: TaskDetailContent;
+	private readonly status: Artifact["status"];
 
 	constructor(
 		private readonly tui: TUI,
-		private readonly theme: Theme,
+		private readonly activeTheme: ActiveTheme,
 		task: Artifact,
 		private readonly graphLines: string[],
 		history: TaskEvent[],
@@ -39,7 +42,8 @@ class TaskDetailViewport {
 			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 }, [], history);
+		this.content = taskDetailContent(task, history);
+		this.status = task.status;
 	}
 
 	invalidate(): void { this.renderedWidth = 0; }
@@ -51,7 +55,8 @@ class TaskDetailViewport {
 		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 theme = this.activeTheme();
+		const border = 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}` : "",
@@ -59,12 +64,12 @@ class TaskDetailViewport {
 		].filter(Boolean).join(" · ");
 		return [
 			border,
-			truncateToWidth(this.theme.bold("Task details"), width, ""),
+			truncateToWidth(theme.fg("accent", 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, ""),
+			truncateToWidth(theme.fg("dim", footer), width, ""),
 			border,
 		];
 	}
@@ -82,16 +87,36 @@ class TaskDetailViewport {
 	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 theme = this.activeTheme();
+		const wrap = (text: string, color: "text" | "muted" | "dim" = "text"): DetailLine[] =>
+			(text.length === 0 ? [""] : wrapTextWithAnsi(theme.fg(color, text), width)).map((line) => ({ text: line, graph: false }));
+		const status = TASK_STATUS_PRESENTATION[this.status as keyof typeof TASK_STATUS_PRESENTATION];
+		const headline = status ? theme.fg(status.color, theme.bold(this.content.headline)) : theme.bold(this.content.headline);
+		const identity = [
+			...wrapTextWithAnsi(headline, width).map((text) => ({ text, graph: false })),
+			...wrap(this.content.identity, "muted"),
+			...(this.content.labels.length > 0 ? wrap(`Labels: ${this.content.labels.join(", ")}`, "muted") : []),
+			{ text: "", graph: false },
+		];
+		const body = renderMarkdownBody(this.content.body, width, this.activeTheme).map((text) => ({ text, graph: false }));
+		const sections = this.content.sections.flatMap((section) => [
+			{ text: "", graph: false },
+			...section.flatMap((line, index) => wrap(line, index === 0 ? "muted" : "dim")),
+		]);
 		const relationshipHeader = this.graphLines.length > 0
 			? [
 				{ text: "", graph: false },
-				{ text: "Relationships:", graph: false },
-				{ text: "  Dependencies point prerequisite → dependent.", graph: false },
+				...wrap("Relationships:", "muted"),
+				...wrap("  Dependencies point prerequisite → dependent.", "dim"),
 			]
 			: [];
-		this.detailLines = [...narrative, ...relationshipHeader, ...this.graphLines.map((text) => ({ text, graph: true }))];
+		this.detailLines = [
+			...identity,
+			...body,
+			...sections,
+			...relationshipHeader,
+			...this.graphLines.map((text) => ({ text: theme.fg("text", text), graph: true })),
+		];
 		this.offsetY = Math.min(this.offsetY, Math.max(0, this.detailLines.length - this.visibleLines));
 	}
 }
@@ -110,5 +135,5 @@ export async function showTaskDetails(
 		return;
 	}
 	await ctx.ui.custom<void>((tui, theme, _keybindings, done) =>
-		new TaskDetailViewport(tui, theme, task, relationshipGraph, history, done));
+		new TaskDetailViewport(tui, () => ctx.ui.theme ?? theme, task, relationshipGraph, history, done));
 }

package/package.json

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