@unbrained/pm-web 2026.6.9 → 2026.6.13-2

package/public/src/views/plan-execution.ts

@@ -0,0 +1,279 @@
+type PlanStepInput = {
+  id?: string;
+  ref?: string;
+  title?: string;
+  description?: string;
+  status?: string;
+  blockedReason?: string;
+  blocked_reason?: string;
+  dependsOn?: string[];
+  depends_on?: string[];
+};
+
+type PlanInput = {
+  id?: string;
+  title?: string;
+  description?: string;
+  scope?: string;
+  status?: string;
+};
+
+export type AnalyzedPlanStep = {
+  ref: string;
+  title: string;
+  description: string;
+  status: string;
+  blockedReason: string;
+  dependsOn: string[];
+  unresolvedDependencies: string[];
+  incompleteDependencies: string[];
+  isDone: boolean;
+  isBlocked: boolean;
+  original: PlanStepInput;
+};
+
+export type PlanExecutionSnapshot = {
+  totalSteps: number;
+  completedSteps: number;
+  blockedSteps: number;
+  waitingSteps: AnalyzedPlanStep[];
+  readySteps: AnalyzedPlanStep[];
+  blockedStepDetails: AnalyzedPlanStep[];
+  allSteps: AnalyzedPlanStep[];
+  stepByRef: Record<string, AnalyzedPlanStep>;
+  completionPct: number;
+  nextReadyStep: AnalyzedPlanStep | null;
+};
+
+const DONE_STATUSES = new Set(['done', 'completed', 'closed']);
+const BLOCKED_STATUSES = new Set(['blocked']);
+
+function normalizeStatus(status?: string): string {
+  const value = (status || 'pending').trim().toLowerCase().replace(/\s+/g, '_');
+  return value || 'pending';
+}
+
+function normalizeStepRef(step: PlanStepInput, index: number): string {
+  const candidate = (step.ref || step.id || '').trim();
+  return candidate || `step-${index + 1}`;
+}
+
+function normalizeDependsOn(step: PlanStepInput): string[] {
+  const raw = Array.isArray(step.dependsOn)
+    ? step.dependsOn
+    : (Array.isArray(step.depends_on) ? step.depends_on : []);
+  const unique = new Set<string>();
+  for (const dep of raw) {
+    const trimmed = String(dep || '').trim();
+    if (trimmed) unique.add(trimmed);
+  }
+  return Array.from(unique);
+}
+
+function formatStepLine(step: AnalyzedPlanStep): string {
+  return `- [${step.ref}] ${step.title}`;
+}
+
+function formatWaitReason(step: AnalyzedPlanStep): string {
+  const blockers = [
+    ...step.incompleteDependencies,
+    ...step.unresolvedDependencies.map(dep => `${dep} (missing)`),
+  ];
+  if (blockers.length === 0) return 'waiting';
+  return `waiting on ${blockers.join(', ')}`;
+}
+
+function stepDependencyBlockers(step: AnalyzedPlanStep): string[] {
+  return [
+    ...step.incompleteDependencies,
+    ...step.unresolvedDependencies.map(dep => `${dep} (missing)`),
+  ];
+}
+
+export function buildPlanExecutionSnapshot(steps: PlanStepInput[]): PlanExecutionSnapshot {
+  const normalized: AnalyzedPlanStep[] = steps.map((step, index) => {
+    const status = normalizeStatus(step.status);
+    return {
+      ref: normalizeStepRef(step, index),
+      title: (step.title || '(untitled)').trim() || '(untitled)',
+      description: (step.description || '').trim(),
+      status,
+      blockedReason: (step.blockedReason || step.blocked_reason || '').trim(),
+      dependsOn: normalizeDependsOn(step),
+      unresolvedDependencies: [],
+      incompleteDependencies: [],
+      isDone: DONE_STATUSES.has(status),
+      isBlocked: BLOCKED_STATUSES.has(status),
+      original: step,
+    };
+  });
+
+  const stepByRef: Record<string, AnalyzedPlanStep> = {};
+  for (const step of normalized) {
+    if (!stepByRef[step.ref]) stepByRef[step.ref] = step;
+  }
+
+  const completedRefs = new Set(normalized.filter(step => step.isDone).map(step => step.ref));
+
+  for (const step of normalized) {
+    if (step.isDone || step.isBlocked) continue;
+    for (const dep of step.dependsOn) {
+      if (!stepByRef[dep]) {
+        step.unresolvedDependencies.push(dep);
+      } else if (!completedRefs.has(dep)) {
+        step.incompleteDependencies.push(dep);
+      }
+    }
+  }
+
+  const readySteps: AnalyzedPlanStep[] = [];
+  const waitingSteps: AnalyzedPlanStep[] = [];
+  const blockedStepDetails: AnalyzedPlanStep[] = [];
+
+  for (const step of normalized) {
+    if (step.isDone) continue;
+    if (step.isBlocked) {
+      blockedStepDetails.push(step);
+      continue;
+    }
+    if (step.incompleteDependencies.length === 0 && step.unresolvedDependencies.length === 0) {
+      readySteps.push(step);
+    } else {
+      waitingSteps.push(step);
+    }
+  }
+
+  const totalSteps = normalized.length;
+  const completedSteps = normalized.filter(step => step.isDone).length;
+  const blockedSteps = blockedStepDetails.length;
+  const completionPct = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;
+
+  return {
+    totalSteps,
+    completedSteps,
+    blockedSteps,
+    waitingSteps,
+    readySteps,
+    blockedStepDetails,
+    allSteps: normalized,
+    stepByRef,
+    completionPct,
+    nextReadyStep: readySteps[0] || null,
+  };
+}
+
+export function buildPlanAgentBrief(plan: PlanInput, snapshot: PlanExecutionSnapshot): string {
+  const title = (plan.title || plan.id || '(untitled)').trim();
+  const lines: string[] = [
+    '# Plan execution brief',
+    `Plan: ${title}`,
+  ];
+  if (plan.id) lines.push(`Plan ID: ${plan.id}`);
+  if (plan.status) lines.push(`Status: ${plan.status}`);
+  if (plan.scope) lines.push(`Scope: ${plan.scope}`);
+  if (plan.description) lines.push('', 'Description:', plan.description.trim());
+
+  lines.push(
+    '',
+    'Execution summary:',
+    `- Completed: ${snapshot.completedSteps}/${snapshot.totalSteps} (${snapshot.completionPct}%)`,
+    `- Ready now: ${snapshot.readySteps.length}`,
+    `- Waiting on dependencies: ${snapshot.waitingSteps.length}`,
+    `- Explicitly blocked: ${snapshot.blockedStepDetails.length}`
+  );
+
+  if (snapshot.readySteps.length > 0) {
+    lines.push('', `Ready now (${snapshot.readySteps.length}):`);
+    for (const step of snapshot.readySteps) lines.push(formatStepLine(step));
+  } else {
+    lines.push('', 'Ready now: none');
+  }
+
+  if (snapshot.waitingSteps.length > 0) {
+    lines.push('', `Waiting (${snapshot.waitingSteps.length}):`);
+    for (const step of snapshot.waitingSteps) {
+      lines.push(`${formatStepLine(step)} (${formatWaitReason(step)})`);
+    }
+  }
+
+  if (snapshot.blockedStepDetails.length > 0) {
+    lines.push('', `Blocked (${snapshot.blockedStepDetails.length}):`);
+    for (const step of snapshot.blockedStepDetails) {
+      const reason = step.blockedReason ? `: ${step.blockedReason}` : '';
+      lines.push(`${formatStepLine(step)}${reason}`);
+    }
+  }
+
+  lines.push(
+    '',
+    'Instruction:',
+    'Pick the top ready step, execute it end-to-end, and report tests/evidence before moving to the next.'
+  );
+
+  return lines.join('\n');
+}
+
+export function buildNextStepPrompt(
+  plan: PlanInput,
+  snapshot: PlanExecutionSnapshot,
+  stepRef?: string
+): string {
+  const step = stepRef ? snapshot.stepByRef[stepRef] : snapshot.nextReadyStep;
+  if (!step) {
+    const planName = (plan.title || plan.id || '(untitled)').trim();
+    return [
+      `No ready step is currently available for plan "${planName}".`,
+      'Please inspect waiting and blocked steps, resolve dependencies, and refresh the plan.',
+    ].join('\n');
+  }
+
+  const planName = (plan.title || plan.id || '(untitled)').trim();
+  const dependencyBlockers = stepDependencyBlockers(step);
+  const isWaiting = dependencyBlockers.length > 0 && !step.isBlocked;
+  const readinessLabel = step.isBlocked ? 'blocked' : (isWaiting ? 'waiting' : 'ready');
+  const lines: string[] = [
+    '# Next step execution prompt',
+    `You are working on plan "${planName}"${plan.id ? ` (${plan.id})` : ''}.`,
+    `Current progress: ${snapshot.completedSteps}/${snapshot.totalSteps} complete.`,
+    `Step readiness: ${readinessLabel}.`,
+    '',
+    `Execute step [${step.ref}] ${step.title}.`,
+  ];
+
+  if (step.description) {
+    lines.push(`Step details: ${step.description}`);
+  }
+
+  if (step.isBlocked) {
+    lines.push(
+      `Blocked reason: ${step.blockedReason || 'No reason provided.'}`,
+      'This step is explicitly blocked. Resolve the blocker before implementation.'
+    );
+  } else if (isWaiting) {
+    lines.push(
+      `Pending dependencies: ${dependencyBlockers.join(', ')}`,
+      'This step is waiting on dependencies. Do not start implementation until dependencies are complete.'
+    );
+  } else if (step.dependsOn.length > 0) {
+    lines.push(`Dependencies already satisfied: ${step.dependsOn.join(', ')}`);
+  }
+
+  lines.push('', 'Execution requirements:');
+  if (step.isBlocked || isWaiting) {
+    lines.push(
+      '- Resolve blockers/dependencies first, then refresh this plan snapshot.',
+      '- Once ready, execute the step in production-ready quality.',
+      '- Report exact commands/outcomes and evidence collected.',
+      '- Update dependency and step status notes after each change.'
+    );
+  } else {
+    lines.push(
+      '- Implement in production-ready quality.',
+      '- Add or update tests where feasible.',
+      '- Report the exact commands and outcomes.',
+      '- Update the step status when done.'
+    );
+  }
+
+  return lines.join('\n');
+}

package/public/src/views/plan.js

@@ -6,8 +6,11 @@ import { api } from '../api.js';
 import { escHtml } from '../utils.js';
 import { toast } from '../components/toast.js';
 import { showModal, hideModal, createModal, confirmDialog } from '../components/modals.js';
+import { buildPlanExecutionSnapshot, buildPlanAgentBrief, buildNextStepPrompt } from './plan-execution.js';
 // ─── State ───────────────────────────────────────────────────
 let currentPlanId = null;
+let currentPlanData = null;
+let currentExecutionSnapshot = null;
 // ─── Helpers ─────────────────────────────────────────────────
 function stepRef(step) {
     return step.ref || step.id || '';
@@ -25,10 +28,91 @@ function stepStatusBadge(status) {
     const color = colors[s] || 'var(--text-muted)';
     return `<span style="font-size:11px;padding:2px 7px;border-radius:4px;background:color-mix(in srgb,${color} 18%,transparent);color:${color};font-weight:600;letter-spacing:.3px">${escHtml(s)}</span>`;
 }
-function renderStepRow(step, planId) {
+function metricBadge(label, value, color) {
+    return `
+    <div style="padding:8px 10px;border-radius:8px;background:color-mix(in srgb,${color} 14%, var(--bg-card));border:1px solid color-mix(in srgb,${color} 28%, var(--border));min-width:95px">
+      <div style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px">${escHtml(label)}</div>
+      <div style="font-size:14px;font-weight:600;color:${color};margin-top:2px">${escHtml(value)}</div>
+    </div>`;
+}
+function renderDependencyHint(analyzed) {
+    if (!analyzed || analyzed.dependsOn.length === 0 || analyzed.isDone || analyzed.isBlocked)
+        return '';
+    if (analyzed.incompleteDependencies.length === 0 && analyzed.unresolvedDependencies.length === 0) {
+        return `<div style="font-size:12px;color:var(--text-muted);margin-top:3px">Dependencies complete: ${escHtml(analyzed.dependsOn.join(', '))}</div>`;
+    }
+    const blockers = [
+        ...analyzed.incompleteDependencies,
+        ...analyzed.unresolvedDependencies.map(dep => `${dep} (missing)`),
+    ];
+    return `<div style="font-size:12px;color:var(--warning,#f59e0b);margin-top:3px">Waiting on: ${escHtml(blockers.join(', '))}</div>`;
+}
+function renderExecutionFocus(planId, snapshot) {
+    const next = snapshot.nextReadyStep;
+    const waitingPreview = snapshot.waitingSteps.slice(0, 2).map(step => {
+        const blockers = [
+            ...step.incompleteDependencies,
+            ...step.unresolvedDependencies.map(dep => `${dep} (missing)`),
+        ];
+        return `
+      <li style="font-size:12px;color:var(--text-secondary);line-height:1.5">
+        <span style="font-family:'JetBrains Mono',monospace;color:var(--text-muted)">[${escHtml(step.ref)}]</span>
+        ${escHtml(step.title)} - waiting on ${escHtml(blockers.join(', '))}
+      </li>`;
+    }).join('');
+    const blockedPreview = snapshot.blockedStepDetails.slice(0, 2).map(step => `
+    <li style="font-size:12px;color:var(--text-secondary);line-height:1.5">
+      <span style="font-family:'JetBrains Mono',monospace;color:var(--text-muted)">[${escHtml(step.ref)}]</span>
+      ${escHtml(step.title)}
+      ${step.blockedReason ? `<span style="color:var(--status-blocked)"> - ${escHtml(step.blockedReason)}</span>` : ''}
+    </li>`).join('');
+    return `
+    <div style="margin-bottom:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-elevated)">
+      <div style="display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:flex-start">
+        <div>
+          <div style="font-size:13px;font-weight:600">Execution Focus</div>
+          <div style="font-size:12px;color:var(--text-muted);margin-top:2px">Dependency-aware summary to guide agent execution.</div>
+        </div>
+        <div style="display:flex;gap:6px;flex-wrap:wrap">
+          <button class="btn btn-ghost btn-sm" onclick="window.__app.copyPlanAgentBrief('${escHtml(planId)}')" title="Copy dependency and status summary">Copy agent brief</button>
+          ${next ? `<button class="btn btn-secondary btn-sm" onclick="window.__app.copyPlanNextStepPrompt('${escHtml(planId)}','${escHtml(next.ref)}')" title="Copy prompt for the next ready step">Copy next-step prompt</button>` : ''}
+        </div>
+      </div>
+      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px">
+        ${metricBadge('Complete', `${snapshot.completedSteps}/${snapshot.totalSteps}`, 'var(--status-closed)')}
+        ${metricBadge('Ready', String(snapshot.readySteps.length), 'var(--accent)')}
+        ${metricBadge('Waiting', String(snapshot.waitingSteps.length), 'var(--warning,#f59e0b)')}
+        ${metricBadge('Blocked', String(snapshot.blockedStepDetails.length), 'var(--status-blocked)')}
+      </div>
+      ${next
+        ? `<div style="margin-top:10px;font-size:12px;color:var(--text-secondary)">Next ready step: <span style="font-family:'JetBrains Mono',monospace;color:var(--text-muted)">[${escHtml(next.ref)}]</span> <strong>${escHtml(next.title)}</strong></div>`
+        : '<div style="margin-top:10px;font-size:12px;color:var(--text-muted)">No ready steps right now. Resolve blockers or dependencies to continue.</div>'}
+      ${waitingPreview
+        ? `<div style="margin-top:8px">
+            <div style="font-size:12px;font-weight:600;color:var(--text-secondary)">Waiting queue</div>
+            <ul style="margin:6px 0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px">${waitingPreview}</ul>
+            ${snapshot.waitingSteps.length > 2 ? `<div style="font-size:11px;color:var(--text-muted);margin-top:4px">+ ${snapshot.waitingSteps.length - 2} more waiting step(s)</div>` : ''}
+          </div>`
+        : ''}
+      ${blockedPreview
+        ? `<div style="margin-top:8px">
+            <div style="font-size:12px;font-weight:600;color:var(--status-blocked)">Blocked steps</div>
+            <ul style="margin:6px 0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px">${blockedPreview}</ul>
+            ${snapshot.blockedStepDetails.length > 2 ? `<div style="font-size:11px;color:var(--text-muted);margin-top:4px">+ ${snapshot.blockedStepDetails.length - 2} more blocked step(s)</div>` : ''}
+          </div>`
+        : ''}
+    </div>`;
+}
+function renderStepRow(step, planId, analyzed) {
     const ref = stepRef(step);
     const isDone = ['done', 'completed'].includes((step.status || '').toLowerCase());
     const isBlocked = (step.status || '').toLowerCase() === 'blocked';
+    const isWaiting = !!analyzed && !analyzed.isDone && !analyzed.isBlocked
+        && (analyzed.incompleteDependencies.length > 0 || analyzed.unresolvedDependencies.length > 0);
+    const promptTitle = isBlocked
+        ? 'Copy blocker-resolution prompt'
+        : (isWaiting ? 'Copy dependency-resolution prompt' : 'Copy execution prompt');
+    const dependencyHint = renderDependencyHint(analyzed);
     return `
     <div class="plan-step-row" data-step-ref="${escHtml(ref)}">
       <div style="flex:1;min-width:0">
@@ -38,9 +122,11 @@ function renderStepRow(step, planId) {
           ${stepStatusBadge(step.status)}
         </div>
         ${step.description ? `<div style="font-size:12px;color:var(--text-muted);margin-top:3px">${escHtml(step.description)}</div>` : ''}
+        ${dependencyHint}
         ${isBlocked && (step.blockedReason || step.blocked_reason) ? `<div style="font-size:12px;color:var(--status-blocked);margin-top:3px">Blocked: ${escHtml(step.blockedReason || step.blocked_reason || '')}</div>` : ''}
       </div>
       <div style="display:flex;gap:6px;flex-shrink:0">
+        ${!isDone ? `<button class="btn btn-ghost btn-sm" onclick="window.__app.copyPlanNextStepPrompt('${escHtml(planId)}','${escHtml(ref)}')" title="${escHtml(promptTitle)}" ${isBlocked ? 'style="color:var(--status-blocked)"' : ''}>⧉</button>` : ''}
         ${!isDone ? `<button class="btn btn-ghost btn-sm" onclick="window.__app.planCompleteStep('${escHtml(planId)}','${escHtml(ref)}')" title="Mark complete">✓</button>` : ''}
         ${!isBlocked && !isDone ? `<button class="btn btn-ghost btn-sm" onclick="window.__app.planBlockStepPrompt('${escHtml(planId)}','${escHtml(ref)}')" title="Block">⊘</button>` : ''}
         <button class="btn btn-ghost btn-sm" onclick="window.__app.planRemoveStep('${escHtml(planId)}','${escHtml(ref)}')" title="Remove" style="color:var(--danger,#f87171)">✕</button>
@@ -75,6 +161,9 @@ export async function initPlanView() {
     const el = document.getElementById('content-plan');
     if (!el)
         return;
+    currentPlanId = null;
+    currentPlanData = null;
+    currentExecutionSnapshot = null;
     if (!state.currentProject) {
         el.innerHTML = '<div class="empty-state"><div class="empty-state-text">No project selected</div></div>';
         return;
@@ -95,6 +184,9 @@ async function loadPlanList() {
         if (subEl)
             subEl.textContent = state.currentProject.name;
         if (items.length === 0) {
+            currentPlanId = null;
+            currentPlanData = null;
+            currentExecutionSnapshot = null;
             listEl.innerHTML = '<div class="empty-state" style="padding:16px"><div class="empty-state-text">No plans yet</div></div>';
             return;
         }
@@ -130,37 +222,127 @@ export async function openPlanDetail(planId) {
         const data = await api('GET', `/projects/${state.currentProject.id}/pm/plan/${encodeURIComponent(planId)}`);
         const plan = (data.plan || data);
         const steps = plan.steps || [];
+        const snapshot = buildPlanExecutionSnapshot(steps);
+        currentPlanData = plan;
+        currentExecutionSnapshot = snapshot;
         const isApproved = !!(plan.approvedAt || plan.approved_at);
-        detailEl.innerHTML = `
-      <div class="card">
-        <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
-          <div>
-            <div class="card-title">${escHtml(plan.title || planId)}</div>
-            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;font-family:'JetBrains Mono',monospace">${escHtml(plan.id || planId)}</div>
-          </div>
-          <div style="display:flex;gap:8px;flex-wrap:wrap">
-            ${!isApproved ? `<button class="btn btn-secondary btn-sm" onclick="window.__app.planApprove('${escHtml(planId)}')">✓ Approve</button>` : '<span style="font-size:12px;color:var(--status-closed)">✓ Approved</span>'}
-            <button class="btn btn-primary btn-sm" onclick="window.__app.planMaterializePrompt('${escHtml(planId)}')">⇗ Materialize</button>
-            <button class="btn btn-ghost btn-sm" onclick="window.__app.planEditPrompt('${escHtml(planId)}','${escHtml(plan.title || '')}')" title="Edit plan">✎</button>
-            <button class="btn btn-ghost btn-sm" style="color:var(--danger,#f87171)" onclick="window.__app.planDeletePrompt('${escHtml(planId)}')" title="Delete plan">✕</button>
-          </div>
-        </div>
-        <div class="card-body">
-          ${plan.description ? `<div style="font-size:13px;color:var(--text-secondary);margin-bottom:12px">${escHtml(plan.description)}</div>` : ''}
-          ${plan.scope ? `<div style="font-size:12px;color:var(--text-muted);margin-bottom:8px">Scope: ${escHtml(plan.scope)}</div>` : ''}
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
-            <div style="font-size:13px;font-weight:600">Steps (${steps.length})</div>
-            <button class="btn btn-ghost btn-sm" onclick="window.__app.openAddStepModal('${escHtml(planId)}')">+ Add Step</button>
-          </div>
-          <div id="plan-steps-list">
-            ${steps.length === 0
-            ? '<div style="font-size:13px;color:var(--text-muted);padding:8px 0">No steps yet. Add the first step to get started.</div>'
-            : steps.map(s => renderStepRow(s, planId)).join('')}
-          </div>
-        </div>
-      </div>`;
+        const card = document.createElement('div');
+        card.className = 'card';
+        const header = document.createElement('div');
+        header.className = 'card-header';
+        header.style.display = 'flex';
+        header.style.alignItems = 'center';
+        header.style.justifyContent = 'space-between';
+        header.style.flexWrap = 'wrap';
+        header.style.gap = '8px';
+        const heading = document.createElement('div');
+        const titleEl = document.createElement('div');
+        titleEl.className = 'card-title';
+        titleEl.textContent = plan.title || planId;
+        const idEl = document.createElement('div');
+        idEl.style.fontSize = '12px';
+        idEl.style.color = 'var(--text-muted)';
+        idEl.style.marginTop = '2px';
+        idEl.style.fontFamily = "'JetBrains Mono',monospace";
+        idEl.textContent = plan.id || planId;
+        heading.append(titleEl, idEl);
+        const actions = document.createElement('div');
+        actions.style.display = 'flex';
+        actions.style.gap = '8px';
+        actions.style.flexWrap = 'wrap';
+        if (!isApproved) {
+            const approveBtn = document.createElement('button');
+            approveBtn.className = 'btn btn-secondary btn-sm';
+            approveBtn.textContent = '✓ Approve';
+            approveBtn.addEventListener('click', () => { void planApprove(planId); });
+            actions.appendChild(approveBtn);
+        }
+        else {
+            const approvedLabel = document.createElement('span');
+            approvedLabel.style.fontSize = '12px';
+            approvedLabel.style.color = 'var(--status-closed)';
+            approvedLabel.textContent = '✓ Approved';
+            actions.appendChild(approvedLabel);
+        }
+        const materializeBtn = document.createElement('button');
+        materializeBtn.className = 'btn btn-primary btn-sm';
+        materializeBtn.textContent = '⇗ Materialize';
+        materializeBtn.addEventListener('click', () => planMaterializePrompt(planId));
+        actions.appendChild(materializeBtn);
+        const editBtn = document.createElement('button');
+        editBtn.className = 'btn btn-ghost btn-sm';
+        editBtn.title = 'Edit plan';
+        editBtn.textContent = '✎';
+        editBtn.addEventListener('click', () => planEditPrompt(planId, plan.title || ''));
+        actions.appendChild(editBtn);
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'btn btn-ghost btn-sm';
+        deleteBtn.title = 'Delete plan';
+        deleteBtn.style.color = 'var(--danger,#f87171)';
+        deleteBtn.textContent = '✕';
+        deleteBtn.addEventListener('click', () => planDeletePrompt(planId));
+        actions.appendChild(deleteBtn);
+        header.append(heading, actions);
+        const body = document.createElement('div');
+        body.className = 'card-body';
+        if (plan.description) {
+            const descEl = document.createElement('div');
+            descEl.style.fontSize = '13px';
+            descEl.style.color = 'var(--text-secondary)';
+            descEl.style.marginBottom = '12px';
+            descEl.textContent = plan.description;
+            body.appendChild(descEl);
+        }
+        if (plan.scope) {
+            const scopeEl = document.createElement('div');
+            scopeEl.style.fontSize = '12px';
+            scopeEl.style.color = 'var(--text-muted)';
+            scopeEl.style.marginBottom = '8px';
+            scopeEl.textContent = `Scope: ${plan.scope}`;
+            body.appendChild(scopeEl);
+        }
+        const focusTemplate = document.createElement('template');
+        focusTemplate.innerHTML = renderExecutionFocus(planId, snapshot);
+        body.appendChild(focusTemplate.content);
+        const stepsHeader = document.createElement('div');
+        stepsHeader.style.display = 'flex';
+        stepsHeader.style.alignItems = 'center';
+        stepsHeader.style.justifyContent = 'space-between';
+        stepsHeader.style.marginBottom = '8px';
+        const stepsTitle = document.createElement('div');
+        stepsTitle.style.fontSize = '13px';
+        stepsTitle.style.fontWeight = '600';
+        stepsTitle.textContent = `Steps (${steps.length})`;
+        const addStepBtn = document.createElement('button');
+        addStepBtn.className = 'btn btn-ghost btn-sm';
+        addStepBtn.textContent = '+ Add Step';
+        addStepBtn.addEventListener('click', () => openAddStepModal(planId));
+        stepsHeader.append(stepsTitle, addStepBtn);
+        body.appendChild(stepsHeader);
+        const stepsList = document.createElement('div');
+        stepsList.id = 'plan-steps-list';
+        if (steps.length === 0) {
+            const emptySteps = document.createElement('div');
+            emptySteps.style.fontSize = '13px';
+            emptySteps.style.color = 'var(--text-muted)';
+            emptySteps.style.padding = '8px 0';
+            emptySteps.textContent = 'No steps yet. Add the first step to get started.';
+            stepsList.appendChild(emptySteps);
+        }
+        else {
+            steps.forEach((step, index) => {
+                const rowTemplate = document.createElement('template');
+                rowTemplate.innerHTML = renderStepRow(step, planId, snapshot.allSteps[index]);
+                stepsList.appendChild(rowTemplate.content);
+            });
+        }
+        body.appendChild(stepsList);
+        card.append(header, body);
+        detailEl.replaceChildren(card);
     }
     catch (err) {
+        currentPlanData = null;
+        currentExecutionSnapshot = null;
         detailEl.innerHTML = `<div class="empty-state"><div class="empty-state-text">Error: ${escHtml(err instanceof Error ? err.message : String(err))}</div></div>`;
     }
 }
@@ -391,6 +573,60 @@ export async function submitMaterializePlan(planId) {
         toast(err instanceof Error ? err.message : 'Failed to materialize plan', 'error');
     }
 }
+async function copyTextWithFallback(modalTitle, text, successMessage) {
+    if (navigator.clipboard?.writeText) {
+        try {
+            await navigator.clipboard.writeText(text);
+            toast(successMessage, 'success');
+            return;
+        }
+        catch {
+            // Fall through to manual-copy modal.
+        }
+    }
+    const modalId = 'plan-copy-fallback-modal';
+    createModal(modalId, modalTitle, `
+    <p style="font-size:12px;color:var(--text-muted);margin-bottom:8px">Clipboard access is unavailable in this browser context. Copy manually:</p>
+    <textarea class="form-textarea" id="plan-copy-fallback-text" rows="12" spellcheck="false"></textarea>`, `<button class="btn btn-primary" onclick="window.__app.hideModal('${modalId}')">Close</button>`);
+    showModal(modalId);
+    const el = document.getElementById('plan-copy-fallback-text');
+    if (el) {
+        el.value = text;
+        el.focus();
+        el.select();
+    }
+    toast('Clipboard blocked. Opened manual copy panel.', 'info');
+}
+function getCurrentPlanContext(planId) {
+    const activeId = currentPlanData?.id || currentPlanId;
+    if (!currentPlanData || !currentExecutionSnapshot || activeId !== planId) {
+        toast('Open this plan first to generate prompts', 'info');
+        return null;
+    }
+    return { plan: currentPlanData, snapshot: currentExecutionSnapshot };
+}
+export async function copyPlanAgentBrief(planId) {
+    const ctx = getCurrentPlanContext(planId);
+    if (!ctx)
+        return;
+    const brief = buildPlanAgentBrief(ctx.plan, ctx.snapshot);
+    await copyTextWithFallback('Plan Agent Brief', brief, 'Agent brief copied');
+}
+export async function copyPlanNextStepPrompt(planId, stepRef) {
+    const ctx = getCurrentPlanContext(planId);
+    if (!ctx)
+        return;
+    if (stepRef && !ctx.snapshot.stepByRef[stepRef]) {
+        toast(`Step ${stepRef} not found`, 'error');
+        return;
+    }
+    if (!stepRef && !ctx.snapshot.nextReadyStep) {
+        toast('No ready step available right now', 'info');
+        return;
+    }
+    const prompt = buildNextStepPrompt(ctx.plan, ctx.snapshot, stepRef);
+    await copyTextWithFallback('Next Step Prompt', prompt, 'Next-step prompt copied');
+}
 export function planEditPrompt(planId, currentTitle) {
     createModal('edit-plan-modal', 'Edit Plan', `
     <div class="form-group">
@@ -439,6 +675,8 @@ export function planDeletePrompt(planId) {
             await api('DELETE', `/projects/${state.currentProject.id}/pm/plan/${encodeURIComponent(planId)}`, {});
             toast('Plan deleted', 'success');
             currentPlanId = null;
+            currentPlanData = null;
+            currentExecutionSnapshot = null;
             const detailEl = document.getElementById('plan-detail-panel');
             if (detailEl)
                 detailEl.innerHTML = '<div class="empty-state"><div class="empty-state-text">Select a plan to view its steps</div></div>';