Plans

Add re-invoke prompt to plan output

Medium completed
2026-05-28 agentics feature Medium effort
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.

Implement Read and implement all steps in the plan at docs/plans/add-reinvoke-prompt-to-plan-output.md — Add re-invoke prompt to plan output. Verify against the plan's Tests, Verification, and Acceptance Criteria before reporting done. If everything passed, mark completion in docs/plans/add-reinvoke-prompt-to-plan-output.md — tick each step's [x] marker and each criterion's - [x], set status: completed — and re-render the HTML from the spec. If any check failed, leave status: in-progress and say which.
More ways to run this plan — goal & workflow prompts, file path
Pursue as goal — optimize for the outcome
Achieve this goal: Add re-invoke prompt to plan output. The plan at docs/plans/add-reinvoke-prompt-to-plan-output.md describes one approach — use it as reference, but optimize for the outcome. Verify against the plan's Tests, Verification, and Acceptance Criteria before reporting done. If everything passed, mark completion in docs/plans/add-reinvoke-prompt-to-plan-output.md — tick each step's [x] marker and each criterion's - [x], set status: completed — and re-render the HTML from the spec. If any check failed, leave status: in-progress and say which.
File add-reinvoke-prompt-to-plan-output.html
Path docs/plans/add-reinvoke-prompt-to-plan-output.html
Spec docs/plans/add-reinvoke-prompt-to-plan-output.md
Definition of done 5 / 5 done

Context

The story behind this plan — what prompted the work and why it matters now.

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

The step-by-step work, in order — each step says what to do, why it matters, and how to check it worked.

1
done Add .plan-reinvoke CSS block to SKELETON.html
Why
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.
2
done Add the .plan-reinvoke HTML element to SKELETON.html immediately below the .objective-card
Why
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)" .
3
done Add copyCmd() JavaScript function to SKELETON.html
Why
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.
4
done Update SKILL.md Step 2 (Create) and Step 3 (Frontmatter) to compute and populate {reinvoke-cmd} and <meta name="plan-reinvoke">
Why
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.
5
done Add a bullet for the reinvoke prompt to SKILL.md HTML Output Requirements
Why
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.

Definition of done

The plan counts as done when every statement below is true — check each one off as you verify it.

Final check

One last pass to confirm the whole change works end to end.

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.

Wrapping up

Three gates that must all pass before this plan is marked completed.

Required

Completion Report

No items to report — all requirements met.

Next steps

Follow-up ideas that came up along the way — none of them are required to finish this plan.

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.