npm - @dreki-gg/pi-plan-mode - Versions diffs - 0.21.0 → 0.23.0 - Mend

@dreki-gg/pi-plan-mode 0.21.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +12 -0
package/extensions/plan-mode/__tests__/html-render.test.ts +37 -23
package/extensions/plan-mode/__tests__/list-plans.test.ts +253 -0
package/extensions/plan-mode/commands/list-plans.ts +229 -0
package/extensions/plan-mode/html/render.ts +41 -18
package/extensions/plan-mode/index.ts +9 -0
package/extensions/plan-mode/prompts.ts +1 -1
package/extensions/plan-mode/tools/preview-prototype.ts +14 -9
package/package.json +2 -3
package/skills/visual-prototype/SKILL.md +4 -2
package/extensions/plan-mode/html/templates/prototype.pug +0 -25
package/extensions/plan-mode/pug.d.ts +0 -5

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @dreki-gg/pi-plan-mode
+## 0.23.0
+### Minor Changes
+- `preview_prototype` is now freeform. The tool dropped its Pug dependency and the imposed wrapper template (fixed dark theme, badge header, purple-accent panel) that made every prototype look the same. It now takes a `html` parameter — a complete, self-contained HTML document the agent authors with full freedom over markup, fonts, colors, layout, and inline scripts — and only persists and opens it. A bare fragment is tolerated and wrapped in a minimal unstyled shell. The `visual-prototype` skill and plan-mode prompt now steer the agent toward product-fitting designs and toward delegating the markup to the `ux-designer` subagent for real design taste, instead of generic boilerplate.
+## 0.22.0
+### Minor Changes
+- Add `/plans` command to list, filter, and sort plans interactively. Supports filtering by status (in-progress, done, superseded, abandoned) and sorting by date, task count, or name. Works both interactively and with inline args (e.g. `/plans done oldest`).
 ## 0.21.0
 ### Minor Changes

package/extensions/plan-mode/__tests__/html-render.test.ts CHANGED Viewed

@@ -1,34 +1,48 @@
 import { describe, expect, test } from 'bun:test';
-import { renderPrototypeHtml } from '../html/render.js';
-describe('renderPrototypeHtml', () => {
-  test('renders title and intent in a minimal header', () => {
-    const html = renderPrototypeHtml('Sidebar redesign', 'Left-aligned nav with icons', '.nav Nav');
-    expect(html).toContain('Sidebar redesign');
-    expect(html).toContain('Left-aligned nav with icons');
-    expect(html).toContain('Prototype');
+import { buildPrototypeDocument } from '../html/render.js';
+describe('buildPrototypeDocument', () => {
+  test('returns a full HTML document untouched, with no imposed wrapper', () => {
+    const doc = `<!doctype html>
+<html lang="en">
+  <head><meta charset="utf-8"><title>My own design</title></head>
+  <body style="background: salmon"><h1>Hand-crafted</h1></body>
+</html>`;
+    const html = buildPrototypeDocument('Sidebar redesign', doc);
+    // Author's document is preserved verbatim — no badge, no theme, no panel.
+    expect(html).toBe(doc.trim());
+    expect(html).not.toContain('Prototype ·');
+    expect(html).not.toContain('class="prototype"');
+    expect(html).not.toContain('Inter');
   });
-  test('renders the Pug body markup', () => {
-    const html = renderPrototypeHtml('Card', 'A product card', '.card Product card');
-    expect(html).toContain('class="card"');
-    expect(html).toContain('Product card');
+  test('recognizes a full document via <html> even without a doctype', () => {
+    const doc = '<html><body><main>Hello</main></body></html>';
+    const html = buildPrototypeDocument('Card', doc);
+    expect(html).toBe(doc);
   });
-  test('does not render tasks or handoff sections', () => {
-    const html = renderPrototypeHtml('Card', 'A product card', '.card Hello');
+  test('wraps a bare fragment in a minimal, unstyled shell', () => {
+    const html = buildPrototypeDocument('Card', '<div class="card">Product card</div>');
-    expect(html).not.toContain('Handoff');
-    expect(html).not.toContain('Tasks');
-    expect(html).not.toContain('Depends on');
+    expect(html).toMatch(/^<!doctype html>/i);
+    expect(html).toContain('<title>Card</title>');
+    expect(html).toContain('<div class="card">Product card</div>');
+    // The shell imposes no theme of its own.
+    expect(html).not.toContain('background');
+    expect(html).not.toContain('Inter');
   });
-  test('handles an empty prototype body without throwing', () => {
-    const html = renderPrototypeHtml('Empty', 'Nothing yet', '');
+  test('escapes the title when used in the fallback shell', () => {
+    const html = buildPrototypeDocument('A & B <script>', '<p>hi</p>');
+    expect(html).toContain('<title>A &amp; B &lt;script&gt;</title>');
+  });
-    expect(html).toContain('Empty');
-    expect(html).toContain('Nothing yet');
+  test('handles an empty body without throwing', () => {
+    const html = buildPrototypeDocument('Empty', '');
+    expect(html).toMatch(/^<!doctype html>/i);
+    expect(html).toContain('<title>Empty</title>');
   });
 });

package/extensions/plan-mode/__tests__/list-plans.test.ts ADDED Viewed

@@ -0,0 +1,253 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { chdir } from 'node:process';
+import { mkdtemp, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { makePlanRuntime } from '../effects/runtime.js';
+import { upsertPlanEntry } from '../storage/plans-manifest.js';
+import { writeTasksJsonl } from '../storage/task-storage.js';
+import type { TaskMeta, TaskRecord, PlanStatus } from '../types.js';
+import {
+  filterPlans,
+  sortPlans,
+  formatPlanList,
+  parseArgs,
+  loadPlanListItems,
+  type PlanListItem,
+  type SortField,
+  type StatusFilter,
+} from '../commands/list-plans.js';
+const runPlanIO = makePlanRuntime();
+const originalCwd = process.cwd();
+let dir: string;
+beforeEach(async () => {
+  dir = await mkdtemp(join(tmpdir(), 'plan-mode-list-'));
+  chdir(dir);
+});
+afterEach(async () => {
+  chdir(originalCwd);
+  await rm(dir, { recursive: true, force: true });
+});
+// ── Helpers ──────────────────────────────────────────────────────────────────
+const meta = (name: string): TaskMeta => ({
+  _type: 'meta',
+  title: `Title ${name}`,
+  plan_name: name,
+  created_at: '2026-01-01T00:00:00.000Z',
+});
+const task = (id: string, status: 'done' | 'pending' = 'done'): TaskRecord => ({
+  _type: 'task',
+  id,
+  description: `task ${id}`,
+  status,
+  origin: 'plan',
+  created_at: '2026-01-01T00:00:00.000Z',
+  updated_at: '2026-01-01T00:00:00.000Z',
+});
+function makePlanItem(overrides: Partial<PlanListItem> & { name: string }): PlanListItem {
+  return {
+    title: `Title ${overrides.name}`,
+    status: 'in-progress',
+    created_at: '2026-01-01T00:00:00.000Z',
+    completed_at: null,
+    totalTasks: 3,
+    doneTasks: 1,
+    pendingTasks: 2,
+    ...overrides,
+  };
+}
+// ── filterPlans ──────────────────────────────────────────────────────────────
+describe('filterPlans', () => {
+  const plans: PlanListItem[] = [
+    makePlanItem({ name: 'alpha', status: 'in-progress' }),
+    makePlanItem({ name: 'beta', status: 'done' }),
+    makePlanItem({ name: 'gamma', status: 'abandoned' }),
+  ];
+  test('returns all when filter is "all"', () => {
+    expect(filterPlans(plans, 'all')).toHaveLength(3);
+  });
+  test('filters by in-progress', () => {
+    const result = filterPlans(plans, 'in-progress');
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('alpha');
+  });
+  test('filters by done', () => {
+    const result = filterPlans(plans, 'done');
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('beta');
+  });
+  test('filters by abandoned', () => {
+    const result = filterPlans(plans, 'abandoned');
+    expect(result).toHaveLength(1);
+    expect(result[0].name).toBe('gamma');
+  });
+  test('returns empty when no match', () => {
+    expect(filterPlans(plans, 'superseded')).toHaveLength(0);
+  });
+});
+// ── sortPlans ────────────────────────────────────────────────────────────────
+describe('sortPlans', () => {
+  const plans: PlanListItem[] = [
+    makePlanItem({ name: 'charlie', created_at: '2026-03-01T00:00:00.000Z', totalTasks: 2 }),
+    makePlanItem({ name: 'alpha', created_at: '2026-01-01T00:00:00.000Z', totalTasks: 5 }),
+    makePlanItem({ name: 'bravo', created_at: '2026-02-01T00:00:00.000Z', totalTasks: 1 }),
+  ];
+  test('sorts by name', () => {
+    const result = sortPlans(plans, 'name');
+    expect(result.map((p) => p.name)).toEqual(['alpha', 'bravo', 'charlie']);
+  });
+  test('sorts by date ascending (oldest first)', () => {
+    const result = sortPlans(plans, 'date-asc');
+    expect(result.map((p) => p.name)).toEqual(['alpha', 'bravo', 'charlie']);
+  });
+  test('sorts by date descending (newest first)', () => {
+    const result = sortPlans(plans, 'date-desc');
+    expect(result.map((p) => p.name)).toEqual(['charlie', 'bravo', 'alpha']);
+  });
+  test('sorts by task count (most tasks first)', () => {
+    const result = sortPlans(plans, 'tasks');
+    expect(result.map((p) => p.name)).toEqual(['alpha', 'charlie', 'bravo']);
+  });
+  test('does not mutate the original array', () => {
+    const original = [...plans];
+    sortPlans(plans, 'name');
+    expect(plans.map((p) => p.name)).toEqual(original.map((p) => p.name));
+  });
+});
+// ── formatPlanList ───────────────────────────────────────────────────────────
+describe('formatPlanList', () => {
+  test('shows message when empty and filter is all', () => {
+    expect(formatPlanList([], 'all', 'date-desc')).toContain('No plans found');
+  });
+  test('shows filter-specific message when empty', () => {
+    expect(formatPlanList([], 'done', 'date-desc')).toContain('No plans with status "done"');
+  });
+  test('includes plan details in output', () => {
+    const plans = [makePlanItem({ name: 'alpha', title: 'Alpha Plan', totalTasks: 5, doneTasks: 3 })];
+    const output = formatPlanList(plans, 'all', 'date-desc');
+    expect(output).toContain('alpha');
+    expect(output).toContain('Alpha Plan');
+    expect(output).toContain('3/5 tasks');
+  });
+  test('shows header with count and sort', () => {
+    const plans = [makePlanItem({ name: 'a' }), makePlanItem({ name: 'b' })];
+    const output = formatPlanList(plans, 'all', 'tasks');
+    expect(output).toContain('All plans (2)');
+    expect(output).toContain('most tasks first');
+  });
+});
+// ── parseArgs ────────────────────────────────────────────────────────────────
+describe('parseArgs', () => {
+  test('parses filter only', () => {
+    expect(parseArgs('done')).toEqual({ filter: 'done', sort: 'date-desc' });
+  });
+  test('parses sort only', () => {
+    expect(parseArgs('oldest')).toEqual({ filter: 'all', sort: 'date-asc' });
+  });
+  test('parses filter and sort together', () => {
+    expect(parseArgs('in-progress tasks')).toEqual({ filter: 'in-progress', sort: 'tasks' });
+  });
+  test('accepts aliases', () => {
+    expect(parseArgs('pending newest')).toEqual({ filter: 'in-progress', sort: 'date-desc' });
+    expect(parseArgs('active oldest')).toEqual({ filter: 'in-progress', sort: 'date-asc' });
+    expect(parseArgs('completed name')).toEqual({ filter: 'done', sort: 'name' });
+  });
+  test('defaults to all + date-desc for unknown tokens', () => {
+    expect(parseArgs('unknown gibberish')).toEqual({ filter: 'all', sort: 'date-desc' });
+  });
+  test('is case-insensitive', () => {
+    expect(parseArgs('DONE TASKS')).toEqual({ filter: 'done', sort: 'tasks' });
+  });
+});
+// ── loadPlanListItems (integration) ──────────────────────────────────────────
+describe('loadPlanListItems', () => {
+  test('returns empty for no plans', async () => {
+    const items = await runPlanIO(loadPlanListItems());
+    expect(items).toEqual([]);
+  });
+  test('loads plans with task counts', async () => {
+    await runPlanIO(upsertPlanEntry('alpha', { status: 'in-progress', title: 'Alpha' }));
+    await runPlanIO(
+      writeTasksJsonl('.plans/alpha', meta('alpha'), [
+        task('t-001', 'done'),
+        task('t-002', 'pending'),
+        task('t-003', 'pending'),
+      ]),
+    );
+    const items = await runPlanIO(loadPlanListItems());
+    expect(items).toHaveLength(1);
+    expect(items[0].name).toBe('alpha');
+    expect(items[0].totalTasks).toBe(3);
+    expect(items[0].doneTasks).toBe(1);
+    expect(items[0].pendingTasks).toBe(2);
+  });
+  test('handles plans without task files', async () => {
+    await runPlanIO(upsertPlanEntry('orphan', { status: 'in-progress', title: 'Orphan' }));
+    const items = await runPlanIO(loadPlanListItems());
+    expect(items).toHaveLength(1);
+    expect(items[0].totalTasks).toBe(0);
+    expect(items[0].doneTasks).toBe(0);
+  });
+  test('loads multiple plans', async () => {
+    await runPlanIO(upsertPlanEntry('alpha', { status: 'in-progress', title: 'Alpha' }));
+    await runPlanIO(upsertPlanEntry('beta', { status: 'done', title: 'Beta' }));
+    await runPlanIO(
+      writeTasksJsonl('.plans/alpha', meta('alpha'), [task('t-001', 'pending')]),
+    );
+    await runPlanIO(
+      writeTasksJsonl('.plans/beta', meta('beta'), [task('t-001', 'done'), task('t-002', 'done')]),
+    );
+    const items = await runPlanIO(loadPlanListItems());
+    expect(items).toHaveLength(2);
+    const alpha = items.find((i) => i.name === 'alpha')!;
+    expect(alpha.status).toBe('in-progress');
+    expect(alpha.totalTasks).toBe(1);
+    const beta = items.find((i) => i.name === 'beta')!;
+    expect(beta.status).toBe('done');
+    expect(beta.totalTasks).toBe(2);
+    expect(beta.doneTasks).toBe(2);
+  });
+});

package/extensions/plan-mode/commands/list-plans.ts ADDED Viewed

@@ -0,0 +1,229 @@
+/**
+ * /plans command — list, filter, and sort plans interactively.
+ *
+ * Reads from the plans manifest AND task snapshots to build a rich table
+ * with status, task counts, and dates. The user can filter by status and
+ * sort by different criteria via interactive selectors.
+ */
+import { Effect } from 'effect';
+import type { ExtensionCommandContext } from '@earendil-works/pi-coding-agent';
+import type { RunPlanIO } from '../effects/runtime.js';
+import { FileSystem } from '../effects/filesystem.js';
+import { readPlansManifest, type PlanManifestEntry } from '../storage/plans-manifest.js';
+import { readTasksJsonl } from '../storage/task-storage.js';
+import type { PlanStatus } from '../types.js';
+// ── Types ────────────────────────────────────────────────────────────────────
+export type SortField = 'name' | 'date-asc' | 'date-desc' | 'tasks';
+export type StatusFilter = 'all' | PlanStatus;
+export interface PlanListItem {
+  name: string;
+  title: string;
+  status: PlanStatus;
+  created_at: string;
+  completed_at: string | null;
+  totalTasks: number;
+  doneTasks: number;
+  pendingTasks: number;
+}
+// ── Core logic (pure, testable) ──────────────────────────────────────────────
+export function filterPlans(plans: PlanListItem[], filter: StatusFilter): PlanListItem[] {
+  if (filter === 'all') return plans;
+  return plans.filter((p) => p.status === filter);
+}
+export function sortPlans(plans: PlanListItem[], sort: SortField): PlanListItem[] {
+  const sorted = [...plans];
+  switch (sort) {
+    case 'name':
+      sorted.sort((a, b) => a.name.localeCompare(b.name));
+      break;
+    case 'date-asc':
+      sorted.sort((a, b) => a.created_at.localeCompare(b.created_at));
+      break;
+    case 'date-desc':
+      sorted.sort((a, b) => b.created_at.localeCompare(a.created_at));
+      break;
+    case 'tasks':
+      sorted.sort((a, b) => b.totalTasks - a.totalTasks);
+      break;
+  }
+  return sorted;
+}
+const STATUS_ICON: Record<PlanStatus, string> = {
+  'in-progress': '🔵',
+  done: '✅',
+  superseded: '🔄',
+  abandoned: '❌',
+};
+export function formatPlanList(plans: PlanListItem[], filter: StatusFilter, sort: SortField): string {
+  if (plans.length === 0) {
+    return filter === 'all'
+      ? 'No plans found in .plans/plans.jsonl'
+      : `No plans with status "${filter}"`;
+  }
+  const sortLabel: Record<SortField, string> = {
+    name: 'name',
+    'date-asc': 'oldest first',
+    'date-desc': 'newest first',
+    tasks: 'most tasks first',
+  };
+  const header =
+    filter === 'all'
+      ? `All plans (${plans.length}) — sorted by ${sortLabel[sort]}`
+      : `Plans: ${filter} (${plans.length}) — sorted by ${sortLabel[sort]}`;
+  const lines = plans.map((p) => {
+    const icon = STATUS_ICON[p.status];
+    const progress =
+      p.totalTasks > 0 ? ` [${p.doneTasks}/${p.totalTasks} tasks]` : ' [no tasks]';
+    const date = p.created_at.slice(0, 10);
+    return `  ${icon} ${p.name} — ${p.title}${progress}  (${date})`;
+  });
+  return `${header}\n${lines.join('\n')}`;
+}
+// ── Data loading (Effect-based) ──────────────────────────────────────────────
+export function loadPlanListItems(): Effect.Effect<PlanListItem[], never, FileSystem> {
+  return Effect.gen(function* () {
+    const manifest = yield* Effect.orElseSucceed(readPlansManifest(), () => [] as PlanManifestEntry[]);
+    const items: PlanListItem[] = [];
+    for (const entry of manifest) {
+      const dir = `.plans/${entry.name}`;
+      const snapshot = yield* Effect.orElseSucceed(readTasksJsonl(dir), () => undefined);
+      const totalTasks = snapshot?.tasks.length ?? 0;
+      const doneTasks = snapshot?.tasks.filter(
+        (t) => t.status === 'done' || t.status === 'skipped',
+      ).length ?? 0;
+      const pendingTasks = snapshot?.tasks.filter((t) => t.status === 'pending').length ?? 0;
+      items.push({
+        name: entry.name,
+        title: entry.title,
+        status: entry.status,
+        created_at: entry.created_at,
+        completed_at: entry.completed_at,
+        totalTasks,
+        doneTasks,
+        pendingTasks,
+      });
+    }
+    return items;
+  });
+}
+// ── Interactive command handler ──────────────────────────────────────────────
+export async function handleListPlans(
+  ctx: ExtensionCommandContext,
+  runPlanIO: RunPlanIO,
+  args?: string,
+): Promise<void> {
+  const allItems = await runPlanIO(loadPlanListItems());
+  if (allItems.length === 0) {
+    ctx.ui.notify('No plans found in .plans/plans.jsonl', 'info');
+    return;
+  }
+  // Parse inline args: /plans [filter] [sort]
+  // e.g. /plans done tasks, /plans in-progress date-asc
+  let filter: StatusFilter = 'all';
+  let sort: SortField = 'date-desc';
+  if (args?.trim()) {
+    const parsed = parseArgs(args.trim());
+    filter = parsed.filter;
+    sort = parsed.sort;
+  } else {
+    // Interactive mode: ask the user
+    const filterChoice = await ctx.ui.select('Filter plans by status:', [
+      'All',
+      'In-progress',
+      'Done',
+      'Superseded',
+      'Abandoned',
+    ]);
+    if (!filterChoice) return;
+    const filterMap: Record<string, StatusFilter> = {
+      All: 'all',
+      'In-progress': 'in-progress',
+      Done: 'done',
+      Superseded: 'superseded',
+      Abandoned: 'abandoned',
+    };
+    filter = filterMap[filterChoice] ?? 'all';
+    const sortChoice = await ctx.ui.select('Sort by:', [
+      'Newest first',
+      'Oldest first',
+      'Most tasks',
+      'Name',
+    ]);
+    if (!sortChoice) return;
+    const sortMap: Record<string, SortField> = {
+      'Newest first': 'date-desc',
+      'Oldest first': 'date-asc',
+      'Most tasks': 'tasks',
+      Name: 'name',
+    };
+    sort = sortMap[sortChoice] ?? 'date-desc';
+  }
+  const filtered = filterPlans(allItems, filter);
+  const sorted = sortPlans(filtered, sort);
+  const output = formatPlanList(sorted, filter, sort);
+  ctx.ui.notify(output, 'info');
+}
+// ── Arg parsing ──────────────────────────────────────────────────────────────
+const FILTER_ALIASES: Record<string, StatusFilter> = {
+  all: 'all',
+  'in-progress': 'in-progress',
+  pending: 'in-progress',
+  active: 'in-progress',
+  done: 'done',
+  completed: 'done',
+  superseded: 'superseded',
+  abandoned: 'abandoned',
+};
+const SORT_ALIASES: Record<string, SortField> = {
+  name: 'name',
+  'date-asc': 'date-asc',
+  oldest: 'date-asc',
+  'date-desc': 'date-desc',
+  newest: 'date-desc',
+  tasks: 'tasks',
+  'task-count': 'tasks',
+};
+export function parseArgs(raw: string): { filter: StatusFilter; sort: SortField } {
+  const tokens = raw.toLowerCase().split(/\s+/);
+  let filter: StatusFilter = 'all';
+  let sort: SortField = 'date-desc';
+  for (const token of tokens) {
+    if (FILTER_ALIASES[token]) filter = FILTER_ALIASES[token];
+    else if (SORT_ALIASES[token]) sort = SORT_ALIASES[token];
+  }
+  return { filter, sort };
+}

package/extensions/plan-mode/html/render.ts CHANGED Viewed

@@ -1,24 +1,47 @@
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import pug from 'pug';
+/**
+ * Prototype document builder.
+ *
+ * A prototype is a planning-phase visual aid the agent authors freely — there
+ * is no template engine and no imposed theme. Whatever HTML the agent (or a
+ * delegated ux-designer subagent) writes is what the user sees.
+ *
+ * The only thing this does is tolerate a bare fragment: if the agent passes
+ * body-only markup instead of a complete page, we drop it into a minimal,
+ * UNSTYLED shell so the browser still renders it. No fonts, colors, or layout
+ * are injected — the design is entirely the agent's.
+ */
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
-const templatePath = join(dirname(fileURLToPath(import.meta.url)), 'templates', 'prototype.pug');
+/** True when the markup is already a complete HTML page. */
+function isFullDocument(markup: string): boolean {
+  return /<!doctype\s+html|<html[\s>]/i.test(markup);
+}
 /**
- * Renders a standalone prototype preview: a minimal header (title + one-line
- * intent) wrapping the rendered Pug body. This is a planning-phase visual aid,
- * not a plan dump — no tasks, no handoff.
+ * Returns a standalone HTML document for the prototype. Full documents are
+ * passed through verbatim; fragments are wrapped in a barebones shell.
  */
-export function renderPrototypeHtml(title: string, intent: string, pugBody: string): string {
-  const template = readFileSync(templatePath, 'utf8');
-  const prototypeHtml = pugBody.trim() ? pug.render(pugBody) : '';
+export function buildPrototypeDocument(title: string, html: string): string {
+  const markup = html.trim();
+  if (isFullDocument(markup)) return markup;
-  return pug.render(template, {
-    filename: templatePath,
-    title,
-    intent,
-    prototypeHtml,
-    generatedAt: new Date().toISOString(),
-  });
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+</head>
+<body>
+${markup}
+</body>
+</html>`;
 }

package/extensions/plan-mode/index.ts CHANGED Viewed

@@ -51,6 +51,7 @@ import { registerSetActivePlanTool } from './tools/set-active-plan.js';
 import { registerUpdatePlanTool } from './tools/update-plan.js';
 import { registerReconcilePlansTool } from './tools/reconcile-plans.js';
 import { isSafeCommand, isPlanPath } from './utils.js';
+import { handleListPlans } from './commands/list-plans.js';
 export default function planMode(pi: ExtensionAPI): void {
   const state = new PlanModeState();
@@ -268,6 +269,14 @@ export default function planMode(pi: ExtensionAPI): void {
     },
   });
+  pi.registerCommand('plans', {
+    description:
+      'List all plans with filtering and sorting. Usage: /plans [filter] [sort]. Filters: all, in-progress, done, superseded, abandoned. Sorts: newest, oldest, tasks, name.',
+    handler: async (args, ctx) => {
+      await handleListPlans(ctx, runPlanIO, args);
+    },
+  });
   pi.registerCommand('todos', {
     description: 'Show current plan progress',
     handler: async (_args, ctx) => {

package/extensions/plan-mode/prompts.ts CHANGED Viewed

@@ -35,7 +35,7 @@ submit_plan is finalization, not the starting point. It records tasks and the ha
 If a plan with the same name already exists and the user asks for follow-up changes (e.g. you submitted prematurely), call revise_plan instead of submit_plan. It rewrites the existing plan in place — pass only the fields that change (title, handoff, and/or tasks); status and notes are preserved for tasks whose id is unchanged.
-For visual/UI/layout/style work, build a prototype with preview_prototype DURING planning, before submit_plan, so the user can react to the visual before the plan hardens. The visual-prototype skill covers when and how.
+For visual/UI/layout/style work, build a prototype with preview_prototype DURING planning, before submit_plan, so the user can react to the visual before the plan hardens. You author the HTML freely — no template engine, no imposed theme — and can delegate the markup to the ux-designer subagent for real design taste. The visual-prototype skill covers when and how.
 When facing a significant technical decision with multiple viable approaches (architecture, API design, implementation strategy), use the technical-options skill: you generate the competing proposals yourself, then use the subagent tool to fan out voting agents for evaluation. Do not delegate the entire workflow to a subagent — you are the planner, you drive the process.`;
 }

package/extensions/plan-mode/tools/preview-prototype.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 /**
  * preview_prototype tool — available during the plan phase.
  *
- * Renders a Pug prototype to a standalone HTML visual aid, writes it under
- * .plans/_prototypes/, and best-effort opens it so the user can react to the
- * visual BEFORE the plan is finalized.
+ * Persists a freeform HTML prototype the agent authored (no template engine,
+ * no imposed theme), writes it under .plans/_prototypes/, and best-effort opens
+ * it so the user can react to the visual BEFORE the plan is finalized.
  */
 import type { ExtensionAPI } from '@earendil-works/pi-coding-agent';
@@ -14,7 +14,7 @@ import { spawn } from 'node:child_process';
 import { join } from 'node:path';
 import { FileSystem } from '../effects/filesystem.js';
 import type { RunPlanIO } from '../effects/runtime.js';
-import { renderPrototypeHtml } from '../html/render.js';
+import { buildPrototypeDocument } from '../html/render.js';
 import { toKebabCase } from '../utils.js';
 const PREVIEW_DIR = '.plans/_prototypes';
@@ -41,25 +41,30 @@ export function registerPreviewPrototypeTool(pi: ExtensionAPI, runPlanIO: RunPla
     name: 'preview_prototype',
     label: 'Preview Prototype',
     description:
-      'Render a Pug prototype to a standalone HTML visual aid and open it for review during planning.',
-    promptSnippet: 'Render a Pug UI prototype to HTML and open it for the user to review',
+      'Open a freeform HTML prototype for review during planning. You write the HTML — any markup, styles, fonts, and scripts you want — and the tool just persists and opens it.',
+    promptSnippet: 'Open a freeform HTML prototype for the user to review',
     promptGuidelines: [
       'Use preview_prototype during planning for visual/UI/layout/style work, before submit_plan.',
       'The prototype is a convergence aid — show it so the user can react before the plan hardens.',
-      'Keep the Pug self-contained; inline any styles the prototype needs.',
+      'You have full freedom over the HTML: there is no template engine and no imposed theme. Avoid generic boilerplate — design something that fits the actual product.',
+      'For real design taste, consider delegating the markup to the ux-designer subagent and passing its HTML straight through.',
+      'Pass a complete, self-contained HTML document (doctype + html/head/body). Inline any styles or scripts; assume nothing about a host page.',
     ],
     parameters: Type.Object({
       title: Type.String({ description: 'Short title for the prototype' }),
       intent: Type.String({
         description: 'One-line description of what this prototype is showing',
       }),
-      pug: Type.String({ description: 'Pug markup for the prototype body' }),
+      html: Type.String({
+        description:
+          'Complete, self-contained HTML document for the prototype (your own markup, styles, and scripts). A bare fragment is also accepted and wrapped in a minimal unstyled shell.',
+      }),
     }),
     async execute(_toolCallId, params, _signal, _onUpdate, ctx) {
       const slug = toKebabCase(params.title) || 'prototype';
       const filePath = join(PREVIEW_DIR, `${slug}.html`);
-      const html = renderPrototypeHtml(params.title, params.intent, params.pug);
+      const html = buildPrototypeDocument(params.title, params.html);
       await runPlanIO(
         Effect.gen(function* () {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dreki-gg/pi-plan-mode",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Two-phase planning workflow for pi — plan with claude-opus-4-6:medium, execute with gpt-5.5:low, with .plans/ file-based handoff",
   "keywords": [
     "pi-package"
@@ -41,8 +41,7 @@
   },
   "dependencies": {
     "@dreki-gg/pi-command-sandbox": "^0.3.0",
-    "effect": "^3.21.2",
-    "pug": "^3.0.3"
+    "effect": "^3.21.2"
   },
   "devDependencies": {
     "@types/node": "24",

package/skills/visual-prototype/SKILL.md CHANGED Viewed

@@ -30,9 +30,11 @@ Call `preview_prototype` with:
 - `title` — short name for the prototype
 - `intent` — one line describing what it shows
-- `pug` — self-contained Pug markup for the prototype body. Inline any styles the prototype needs; assume nothing about the host page.
+- `html` — a complete, self-contained HTML document you author **with full freedom**. There is no template engine and no imposed theme: pick your own markup, fonts, colors, layout, and inline `<style>`/`<script>`. Assume nothing about a host page.
-The tool renders the Pug, writes `.plans/_prototypes/<slug>.html`, and opens it for review.
+The tool persists your HTML to `.plans/_prototypes/<slug>.html` and opens it for review. It does not wrap, restyle, or theme your markup — what you write is what the user sees. (A bare fragment is tolerated and dropped into a minimal unstyled shell, but prefer sending a full document.)
+**Avoid generic boilerplate.** A dark dashboard with a purple accent and a card is not a design — it is slop. Design something that fits the actual product. For real design taste, delegate the markup to the `ux-designer` subagent and pass its HTML straight through `preview_prototype`.
 ### 3. Get a reaction before submitting

package/extensions/plan-mode/html/templates/prototype.pug DELETED Viewed

@@ -1,25 +0,0 @@
-doctype html
-html(lang="en")
-  head
-    meta(charset="utf-8")
-    meta(name="viewport" content="width=device-width, initial-scale=1")
-    title= title
-    style.
-      :root { color-scheme: dark; --bg:#0b0d12; --panel:#11141b; --muted:#8b93a7; --text:#eef1f7; --line:#242936; --accent:#8b5cf6; }
-      * { box-sizing: border-box; }
-      body { margin:0; background:radial-gradient(circle at top left,#1c1730,transparent 34rem),var(--bg); color:var(--text); font:14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-      main { width:min(1040px, calc(100% - 48px)); margin:48px auto; }
-      header { margin-bottom:24px; }
-      h1 { font-size:30px; line-height:1.1; margin:0 0 8px; letter-spacing:-0.04em; }
-      .intent { color:var(--muted); margin:0; }
-      .badge { display:inline-block; border:1px solid var(--line); border-radius:999px; padding:5px 10px; background:rgba(255,255,255,0.03); color:var(--muted); font-size:12px; margin-bottom:14px; }
-      .prototype { background:rgba(17,20,27,0.82); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,0.24); }
-  body
-    main
-      header
-        span.badge Prototype · #{generatedAt}
-        h1= title
-        if intent
-          p.intent= intent
-      section.prototype
-        != prototypeHtml

package/extensions/plan-mode/pug.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-declare module 'pug' {
-  export function render(template: string, options?: Record<string, unknown>): string;
-  const pug: { render: typeof render };
-  export default pug;
-}