diff --git a/site/components/Prose.tsx b/site/components/Prose.tsx
index 77b31656..feb54f28 100644
--- a/site/components/Prose.tsx
+++ b/site/components/Prose.tsx
@@ -65,9 +65,21 @@ export function PageFooter() {
);
diff --git a/site/routes/index.tsx b/site/routes/index.tsx
index 5c402de5..4f3a8339 100644
--- a/site/routes/index.tsx
+++ b/site/routes/index.tsx
@@ -39,9 +39,28 @@ const PAIR =
/**
* The release-link hover inverts the base rule: it inherits the eyebrow's
* dim until hover, where it picks up the accent.
+ *
+ * The plan panels wrap rather than scroll, so every line is its own block
+ * instead of a newline in the source — an instruction that wraps then takes a
+ * 3ch hanging indent and its continuation aligns under the text rather than
+ * under the number. Both panels take the same treatment: the two examples
+ * differ only in the syntax around them.
*/
const PAGE_CSS = ".release-link{color:inherit;letter-spacing:inherit;}" +
- ".release-link:hover{color:var(--green);}";
+ ".release-link:hover{color:var(--green);}" +
+ "#plan .code-panel pre{white-space:pre-wrap;overflow-wrap:break-word;}" +
+ "#plan .plan-line{display:block;}" +
+ "#plan .plan-step{display:block;padding-left:3ch;text-indent:-3ch;}" +
+ "#plan strong code{font-weight:800;}";
+
+/** The instruction list both plan examples are built from, verbatim. */
+const PLAN_STEPS = [
+ "1. Read package.json and CHANGELOG.md.",
+ "2. Ask an agent to recommend the next semantic version and explain why.",
+ "3. Validate the answer.",
+ "4. Ask me to approve it.",
+ "5. Write RELEASE.md.",
+];
const RELEASE_MD: Tok[][] = [
[bold("# Release")],
@@ -425,6 +444,19 @@ const RUNTIMES: { name: string; body: string; lines: string[][] }[] = [
},
];
+/** The plan instructions, one block per line. */
+function PlanSteps() {
+ return (
+ <>
+ {PLAN_STEPS.map((step) => (
+
+ {step}
+
+ ))}
+
+ );
+}
+
/** A terminal slab whose lines each open with a prompt. */
function Terminal(
{ lines, noWrap }: { lines: string[][]; noWrap?: boolean },
@@ -460,6 +492,10 @@ export default define.page(function Home({ url }) {
rel="noopener"
>
{VERSION}
+ {" "}
+ ·{" "}
+
+ Star on GitHub ↗
@@ -844,6 +880,66 @@ export default define.page(function Home({ url }) {
+ {/* Plan */}
+
+
+
Plans are made to be followed.
+
+
+ {/* Same instructions, two surfaces: the row states the equivalence. */}
+
+
+ CLI
+
+
+ xmd plan "
+
+
+ "
+
+
+
+
+ XMD
+
+
+ ")]]} />
+
+
+
+ ")]]} />
+
+
+
+
+
+
+
+ xmd plan is command-line shorthand for{" "}
+ {""}.
+ {" "}
+ Underneath, it expands {""}{" "}
+ with your instructions to produce an XMD program you can review,
+ change, commit, and run.
+
+
+
+ Planning is part of the language.
+ {" "}
+ {""} uses the components exposed by{" "}
+ xmd syntax, so it plans with the same vocabulary
+ available to you.
+
+
+
+ Once the workflow says what you mean, run the program instead of
+ asking an agent to figure it out again.
+