Plan: Add re-invoke prompt to plan output

Objective

Embed a copyable re-invoke command in every generated plan so any developer can resume, reference, or re-run the planning workflow directly from the plan HTML — no need to reconstruct the command from scratch.

Re-invoke /plan-agent:planning add-reinvoke-prompt-to-plan-output.html add re-invoke prompt to plan output

File add-reinvoke-prompt-to-plan-output.html

Path docs/plans/add-reinvoke-prompt-to-plan-output.html

Acceptance criteria 5 / 5 done

Context

Plans generated by the plan-agent:planning skill are self-contained HTML files stored in docs/plans/. Once a plan exists, the only way to re-invoke the skill against it (to continue implementation, update status, or run a follow-up) is to manually reconstruct the original command — the filename and a short objective summary. There is no prompt in the plan itself that surfaces this command.

The user wants each generated plan to include a visible, copyable re-invoke command in the format /plan-agent:planning <filename>.html <short-objective> so the workflow is recoverable from the artifact alone.

Steps

done Add .plan-reinvoke CSS block to SKELETON.html

The reinvoke row needs a distinct visual treatment — inline monospace command, muted label, compact copy button — without inheriting the full .copy-prompt-btn affordance (which targets <pre> blocks).

Verify

Open SKELETON.html and confirm: .plan-reinvoke, .plan-reinvoke-label, .plan-reinvoke code, and .copy-cmd-btn CSS rules exist; @media print hides the row; no existing rule is modified.

done Add the .plan-reinvoke HTML element to SKELETON.html immediately below the .objective-card

Positioning below the objective card ties the re-invoke command to the plan's stated goal — after reading what the plan is for, a developer immediately sees how to re-invoke it. Placing it in the header would bury it alongside metadata rather than the plan content.

Verify

In SKELETON.html, find the #objective div (.objective-card). Confirm a <div class="plan-reinvoke"> element appears immediately after it and before .progress-wrap, and contains: <span class="plan-reinvoke-label">, <code id="reinvoke-cmd" aria-label="Re-invoke command">{reinvoke-cmd}</code>, and a button with onclick="copyCmd(this)".

done Add copyCmd() JavaScript function to SKELETON.html

The existing copyPrompt() function targets <pre> siblings; the reinvoke row uses an inline <code> element with a known ID. A separate copyCmd() avoids brittle DOM traversal and keeps the two copy patterns independent.

Verify

In the <script> block, confirm copyCmd(btn) is defined — it reads document.getElementById('reinvoke-cmd').textContent, copies via navigator.clipboard.writeText with document.execCommand fallback, and flashes the button with Copied ✓ / resets after 2 s.

done Update SKILL.md Step 2 (Create) and Step 3 (Frontmatter) to compute and populate {reinvoke-cmd} and <meta name="plan-reinvoke">

Step 2 must instruct the model to build the reinvoke command from the resolved filename + condensed objective. Step 3 must emit a <meta name="plan-reinvoke"> tag so the plans-library gallery can extract the command without parsing the HTML body — this keeps the frontmatter block as the single authoritative source of machine-readable plan metadata.

Verify

Read SKILL.md Step 2: confirm it instructs the model to set {reinvoke-cmd} = /plan-agent:planning <filename>.html <short-objective≤60chars>. Read Step 3: confirm it now lists <meta name="plan-reinvoke" content="…"> alongside the other required meta tags. Existing rules in both steps are otherwise unchanged.

done Add a bullet for the reinvoke prompt to SKILL.md HTML Output Requirements

The requirements list is the single source of truth for what every generated plan must contain; the reinvoke prompt needs a line there so future skill audits and validators can confirm compliance.

Verify

Read the HTML Output Requirements section of SKILL.md. Confirm a bullet appears stating that every plan must include a .plan-reinvoke element immediately below the .objective-card and before .progress-wrap, containing the /plan-agent:planning <filename> <short-objective> command with a copy button. No other bullets in the section are modified.

Acceptance Criteria

Every new plan HTML file includes a .plan-reinvoke row immediately below the .objective-card and before the .progress-wrap.
The reinvoke command text follows the exact format /plan-agent:planning <filename>.html <short-objective≤60chars>.
Clicking Copy in the reinvoke row writes the command to the clipboard and shows "Copied ✓" feedback for 2 seconds.
The reinvoke row is suppressed in @media print — it does not appear in printed or PDF output.
SKILL.md Step 2, Step 3, and the HTML Output Requirements section all document the {reinvoke-cmd} placeholder, its population rule, and the corresponding <meta name="plan-reinvoke"> tag. The <code> element carries aria-label="Re-invoke command".

Verification

Run /plan-agent:planning --quick test reinvoke prompt and open the generated HTML file. Confirm:

A .plan-reinvoke row appears immediately below the .objective-card and before the .progress-wrap.
The command text reads /plan-agent:planning test-reinvoke-prompt.html test reinvoke prompt (or a condensed equivalent ≤60 chars).
Clicking Copy copies the command text to clipboard and flashes "Copied ✓".
Printing the page (Cmd+P → PDF) hides the reinvoke row.

Also confirm that this plan file itself already demonstrates the feature — the reinvoke row immediately below the objective card shows the correct command.

Next Steps

Backfill existing plan files with the reinvoke row

Paste this prompt into Claude to execute this follow-up:

Scan every .html file under docs/plans/ (excluding docs/plans/archive/) that does NOT contain a <div class="plan-reinvoke"> element. For each, derive the reinvoke command from: (1) the basename of the file, (2) the <title> tag text after stripping the "Plan: " prefix, condensed to ≤60 chars. Insert the .plan-reinvoke HTML element (with CSS and copyCmd JS if missing) immediately after the .objective-card div and before .progress-wrap in each file. Report a list of files modified.

Surface reinvoke command in plans-gallery index

Paste this prompt into Claude to execute this follow-up:

In the plans-library skill (kit/plugins/plan-agent/skills/plans-library/), update the gallery template so each plan card shows the reinvoke command extracted from <meta name="plan-reinvoke"> (add this meta tag to SKELETON.html alongside the reinvoke row). The card should include a copy button matching the plan card's existing button style.