@cloudgrid-io/mcp 0.11.2 → 0.13.0

package/src/corpus/templates/kanban/README.md

@@ -0,0 +1,72 @@
+# kanban template — persistent Next.js + Mongo board
+
+A real, deployable kanban board. Cards live in the grid-shared MongoDB, so they
+survive refresh and are shared across users/sessions. Same proven shape as
+`app-with-data`, adapted to a `cards` domain (title, column, order) with three
+columns and move-between-columns.
+
+## How the grid gives you a database
+
+You do **not** provision a database or set a connection string. In
+`cloudgrid.yaml` you declare `needs: { database: true }`, and the grid:
+
+- provisions shared Mongo for the app, and
+- injects the connection string as the **`DATABASE_MONGODB_URL`** environment
+  variable (plus the legacy `MONGODB_URL` alias) — at dev-time (`grid dev`) and
+  at runtime (after `grid plug`).
+
+The app reads it via `process.env.DATABASE_MONGODB_URL` (with a legacy
+`process.env.MONGODB_URL` fallback) in `services/web/lib/db.js` — **lazily,
+inside the `getDb` getter, never at module top level** (a top-level read fails
+`next build`, which imports the module for route analysis before the grid injects
+the var). Never hardcode a connection string; never commit a secret.
+
+> **Declare `needs: { database: true }` (the canonical shape).** The deployer
+> provisions Mongo and injects `DATABASE_MONGODB_URL` (plus the legacy
+> `MONGODB_URL` alias). `requires:` is the deprecated v1 alias — don't author new
+> yaml with it, and never set `needs:` and `requires:` together (the validator
+> rejects the combination).
+
+## Service layout
+
+App code lives under **`services/web/`**, not the template root. `path:` in
+`cloudgrid.yaml` is the URL mount, not the filesystem path — the service named
+`web` means the CLI looks for `services/web/`. Files at the root fail with
+`Error: Service directory not found: …/services/web`.
+
+## Run locally
+
+```bash
+npm install
+grid dev          # runs Next.js with DATABASE_MONGODB_URL injected against dev Mongo
+```
+
+## Deploy
+
+```bash
+grid plug         # builds + deploys the folder (async — poll status until live)
+```
+
+A runtime deploy is asynchronous: `plug` returns `status: building`; poll status
+until the app is live, then use the returned live URL. Re-plug the same entity
+to update the same URL.
+
+## File tree
+
+```
+cloudgrid.yaml                         # name + services.web (nextjs) + needs: { database: true }
+services/web/package.json              # next, react, react-dom, mongodb driver only
+services/web/lib/db.js                 # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
+services/web/app/layout.js             # root layout + inline CSS
+services/web/app/page.js               # server component: reads cards from Mongo
+services/web/app/board.js              # client board: POST / PATCH (move column) / DELETE via the API
+services/web/app/api/cards/route.js    # GET (list) / POST (add) / PATCH (move) / DELETE (remove)
+```
+
+## Adapt it
+
+- Rename the `cards` collection in `services/web/app/api/cards/route.js` and
+  `services/web/app/page.js`.
+- Change the columns (edit the `COLUMNS` array) or add fields (assignee, labels).
+- Add drag-and-drop or per-column ordering on top of the `order` field.
+- Add `cache: true` to `needs:` only if you actually need Redis.

package/src/corpus/templates/kanban/cloudgrid.yaml

@@ -0,0 +1,15 @@
+# Rename this app. The grid injects the DB connection string as an environment
+# variable at runtime — do NOT set it yourself, and never commit a connection
+# string or secret.
+#
+# `needs: { database: true }` is the canonical, recommended shape. The deployer
+# provisions Mongo and injects DATABASE_MONGODB_URL (plus the legacy MONGODB_URL
+# alias). `requires:` is the deprecated v1 alias — don't author new yaml with it,
+# and never set `needs:` and `requires:` together (the validator rejects it).
+name: my-board
+services:
+  web:
+    type: nextjs
+    path: /
+needs:
+  database: true

package/src/corpus/templates/kanban/index.md

@@ -0,0 +1,68 @@
+# Template: kanban (persistent Next.js + Mongo board)
+
+A real, deployable kanban board. Cards live in the grid-shared MongoDB, so they
+survive refresh and are shared across sessions. Same proven shape as
+`app-with-data`, adapted to a `cards` domain (title, column, order) with three
+columns and move-between-columns.
+
+**Key rules (all proven by the app-with-data end-to-end deploy):**
+
+1. **Service code MUST live under `services/<name>/`, not the repo/template
+   root.** `path:` in `cloudgrid.yaml` is the URL mount, NOT the filesystem path.
+   The service named `web` → the CLI looks for `services/web/`. App files at the
+   root fail with `Error: Service directory not found: …/services/web`.
+2. **Read the DB connection string LAZILY (inside the getter), never at module
+   top level.** The grid injects it as `DATABASE_MONGODB_URL` (plus the legacy
+   `MONGODB_URL` alias) at dev-time and runtime; the app reads
+   `process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL` inside `getDb`.
+   A top-level read fails `next build`. Never hardcode a connection string; never
+   commit a secret.
+3. **Declare the datastore with `needs: { database: true }`.** The deployer
+   provisions Mongo and injects the connection string. `requires:` is the
+   deprecated v1 alias; don't author new yaml with it, and never set `needs:` and
+   `requires:` together (the validator rejects the combination).
+
+## File tree
+
+```
+cloudgrid.yaml                         # name + services.web (nextjs) + needs: { database: true }
+services/web/package.json              # next, react, react-dom, mongodb driver only
+services/web/lib/db.js                 # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
+services/web/app/layout.js             # root layout + inline CSS
+services/web/app/page.js               # server component: reads cards from Mongo
+services/web/app/board.js              # client board: POST / PATCH (move column) / DELETE via the API
+services/web/app/api/cards/route.js    # GET (list) / POST (add) / PATCH (move) / DELETE (remove)
+```
+
+## cloudgrid.yaml
+
+```yaml
+name: my-board
+services:
+  web:
+    type: nextjs
+    path: /
+needs:
+  database: true
+```
+
+> **Capability:** this template's need is `database: true`. The deployer
+> provisions Mongo and injects `DATABASE_MONGODB_URL` (plus the legacy
+> `MONGODB_URL` alias). `requires:` is the deprecated v1 alias — don't mix it with
+> `needs:` (the validator rejects the combination). See the capability-map for
+> the full injection table.
+
+## The cards collection
+
+Documents: `{ title, column, order, createdAt }` where `column` is one of `todo`
+/ `doing` / `done`. The API route on `cards` does GET (list, ordered), POST
+(add to `todo`), PATCH (move to another column), DELETE (remove); the page is a
+server component that reads the collection and hands it to a client board.
+
+## Adapt it
+
+- Rename the `cards` collection to your data.
+- Change the columns (edit the `COLUMNS` array) or add fields (assignee, labels).
+- Add drag-and-drop or per-column ordering on top of the `order` field.
+- Add `cache: true` to `needs:` only if you actually need Redis.
+- Run `grid dev` to test locally, `grid plug` to deploy (async — poll to live).

package/src/corpus/templates/kanban/services/web/app/api/cards/route.js

@@ -0,0 +1,70 @@
+// App Router route handler for the `cards` collection.
+// GET -> list cards, POST -> add a card, PATCH -> move a card (change column),
+// DELETE -> remove a card by id.
+//
+// To adapt this app, rename the collection, change the columns, or add fields.
+import { NextResponse } from "next/server";
+import { ObjectId } from "mongodb";
+import { getDb } from "../../../lib/db.js";
+
+// Never cache — always read/write live data.
+export const dynamic = "force-dynamic";
+
+const COLUMNS = ["todo", "doing", "done"];
+
+async function cards() {
+  const db = await getDb();
+  return db.collection("cards");
+}
+
+function shape(c) {
+  return {
+    id: c._id.toString(),
+    title: c.title || "",
+    column: COLUMNS.includes(c.column) ? c.column : "todo",
+    order: typeof c.order === "number" ? c.order : 0,
+  };
+}
+
+// GET /api/cards — list all cards, ordered within a column.
+export async function GET() {
+  const col = await cards();
+  const items = await col.find({}).sort({ order: 1, createdAt: 1 }).toArray();
+  return NextResponse.json(items.map(shape));
+}
+
+// POST /api/cards — add a card. Body: { title }.
+export async function POST(request) {
+  const body = await request.json().catch(() => ({}));
+  const title = typeof body.title === "string" ? body.title.trim() : "";
+  if (!title) {
+    return NextResponse.json({ error: "title is required" }, { status: 400 });
+  }
+  const doc = { title, column: "todo", order: Date.now(), createdAt: new Date() };
+  const col = await cards();
+  const res = await col.insertOne(doc);
+  return NextResponse.json({ id: res.insertedId.toString(), ...doc }, { status: 201 });
+}
+
+// PATCH /api/cards — move a card to another column. Body: { id, column }.
+export async function PATCH(request) {
+  const body = await request.json().catch(() => ({}));
+  const { id, column } = body;
+  if (!id || !ObjectId.isValid(id) || !COLUMNS.includes(column)) {
+    return NextResponse.json({ error: "valid id and column required" }, { status: 400 });
+  }
+  const col = await cards();
+  await col.updateOne({ _id: new ObjectId(id) }, { $set: { column } });
+  return NextResponse.json({ ok: true });
+}
+
+// DELETE /api/cards?id=<id> — remove a card.
+export async function DELETE(request) {
+  const id = new URL(request.url).searchParams.get("id");
+  if (!id || !ObjectId.isValid(id)) {
+    return NextResponse.json({ error: "valid id is required" }, { status: 400 });
+  }
+  const col = await cards();
+  await col.deleteOne({ _id: new ObjectId(id) });
+  return NextResponse.json({ ok: true });
+}

package/src/corpus/templates/kanban/services/web/app/board.js

@@ -0,0 +1,93 @@
+"use client";
+
+// Small client component: renders the three columns and posts to /api/cards.
+import { useState } from "react";
+
+const COLUMNS = ["todo", "doing", "done"];
+const LABELS = { todo: "To do", doing: "Doing", done: "Done" };
+
+export default function Board({ initialCards }) {
+  const [cards, setCards] = useState(initialCards);
+  const [title, setTitle] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function add(e) {
+    e.preventDefault();
+    const value = title.trim();
+    if (!value) return;
+    setBusy(true);
+    const res = await fetch("/api/cards", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ title: value }),
+    });
+    if (res.ok) {
+      const card = await res.json();
+      setCards((prev) => [...prev, card]);
+      setTitle("");
+    }
+    setBusy(false);
+  }
+
+  async function move(id, column) {
+    setBusy(true);
+    const res = await fetch("/api/cards", {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ id, column }),
+    });
+    if (res.ok) setCards((prev) => prev.map((c) => (c.id === id ? { ...c, column } : c)));
+    setBusy(false);
+  }
+
+  async function remove(id) {
+    setBusy(true);
+    const res = await fetch(`/api/cards?id=${encodeURIComponent(id)}`, { method: "DELETE" });
+    if (res.ok) setCards((prev) => prev.filter((c) => c.id !== id));
+    setBusy(false);
+  }
+
+  return (
+    <div>
+      <form onSubmit={add} className="row">
+        <input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Add a card…"
+          aria-label="New card"
+        />
+        <button type="submit" disabled={busy}>Add</button>
+      </form>
+      <div className="board">
+        {COLUMNS.map((column) => (
+          <section key={column}>
+            <h2>{LABELS[column]}</h2>
+            {cards.filter((c) => c.column === column).length === 0 && (
+              <p className="empty">No cards.</p>
+            )}
+            {cards
+              .filter((c) => c.column === column)
+              .map((c) => (
+                <article key={c.id} className="card">
+                  <span className="title">{c.title}</span>
+                  <div className="moves">
+                    {COLUMNS.filter((other) => other !== column).map((other) => (
+                      <button
+                        key={other}
+                        type="button"
+                        onClick={() => move(c.id, other)}
+                        disabled={busy}
+                      >
+                        → {LABELS[other]}
+                      </button>
+                    ))}
+                    <button type="button" onClick={() => remove(c.id)} disabled={busy}>Delete</button>
+                  </div>
+                </article>
+              ))}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/corpus/templates/kanban/services/web/app/layout.js

@@ -0,0 +1,37 @@
+// Root layout + plain inline CSS (no external CDNs, fonts, or stylesheets).
+export const metadata = {
+  title: "Kanban board",
+  description: "A persistent kanban board on CloudGrid, backed by grid-shared Mongo.",
+};
+
+const css = `
+  :root { color-scheme: light dark; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
+  main { max-width: 60rem; margin: 3rem auto; padding: 0 1.25rem; }
+  h1 { margin: 0 0 .25rem; }
+  .hint { margin: 0 0 1.5rem; opacity: .7; font-size: .9rem; }
+  .row { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
+  input { flex: 1; padding: .5rem .75rem; border: 1px solid #8886; border-radius: .5rem; font: inherit; }
+  button { padding: .4rem .7rem; border: 1px solid #8886; border-radius: .5rem; background: #6663; font: inherit; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+  .board section { border: 1px solid #8883; border-radius: .5rem; padding: .75rem; min-height: 6rem; }
+  .board h2 { margin: 0 0 .5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
+  .card { border: 1px solid #8886; border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .5rem; }
+  .card .title { display: block; margin-bottom: .4rem; }
+  .moves { display: flex; flex-wrap: wrap; gap: .3rem; }
+  .moves button { font-size: .8rem; }
+  .empty { opacity: .6; font-size: .85rem; }
+`;
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: css }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

package/src/corpus/templates/kanban/services/web/app/page.js

@@ -0,0 +1,32 @@
+// Home page: a server component reads the cards straight from Mongo, and a small
+// client board adds / moves / removes them via the API route. Data persists
+// across refresh and across users because it lives in the grid-shared Mongo, not
+// in memory.
+import { getDb } from "../lib/db.js";
+import Board from "./board.js";
+
+export const dynamic = "force-dynamic";
+
+const COLUMNS = ["todo", "doing", "done"];
+
+async function listCards() {
+  const db = await getDb();
+  const items = await db.collection("cards").find({}).sort({ order: 1, createdAt: 1 }).toArray();
+  return items.map((c) => ({
+    id: c._id.toString(),
+    title: c.title || "",
+    column: COLUMNS.includes(c.column) ? c.column : "todo",
+    order: typeof c.order === "number" ? c.order : 0,
+  }));
+}
+
+export default async function Page() {
+  const cards = await listCards();
+  return (
+    <main>
+      <h1>Board</h1>
+      <p className="hint">Persisted in the grid-shared Mongo — survives refresh.</p>
+      <Board initialCards={cards} />
+    </main>
+  );
+}

package/src/corpus/templates/kanban/services/web/lib/db.js

@@ -0,0 +1,32 @@
+// Cached MongoDB client for the App Router.
+//
+// The grid injects the connection string as the DATABASE_MONGODB_URL environment
+// variable (plus the legacy MONGODB_URL alias) at dev-time (`grid dev`) and
+// runtime (after `grid plug`). Read the canonical var first, fall back to the
+// legacy alias. Never hardcode a connection string here and never commit a secret.
+//
+// The env var and client are resolved LAZILY (inside getDb), never at module top
+// level — otherwise `next build` throws when it imports this module for route
+// analysis, before the grid injects the var.
+import { MongoClient } from "mongodb";
+
+function clientPromise() {
+  const uri = process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL;
+  if (!uri) {
+    throw new Error(
+      "DATABASE_MONGODB_URL is not set. The grid injects it automatically — run " +
+        "this app with `grid dev` locally, or deploy it with `grid plug` (the grid " +
+        "injects the DB connection string at runtime). Do not set it by hand.",
+    );
+  }
+  if (!globalThis.__mongoClientPromise) {
+    globalThis.__mongoClientPromise = new MongoClient(uri).connect();
+  }
+  return globalThis.__mongoClientPromise;
+}
+
+export async function getDb() {
+  const client = await clientPromise();
+  // The default DB comes from the connection-string path segment the grid injects.
+  return client.db();
+}

package/src/corpus/templates/kanban/services/web/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "my-board",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "mongodb": "^6.12.0"
+  }
+}

package/src/corpus/templates/portfolio/README.md

@@ -0,0 +1,29 @@
+# portfolio
+
+A single self-contained HTML personal / freelancer portfolio: a hero intro, an about section, a skills list, a projects grid, and a contact section.
+
+Static inspiration — a single self-contained `index.html` (inline CSS and JS,
+no external CDNs). It deploys instantly via `gridctl_drop` and works on every
+CloudGrid edition, including hosted.
+
+## Fill it in
+
+Fetch the template with `gridctl_fetch("template", "portfolio")`, then replace the
+placeholders:
+
+   - The person's name, role/title, and short intro.
+   - The about paragraph.
+   - The skills — one pill per skill.
+   - One card per project: title, short description, tags, and an optional link.
+   - The contact links (email as a mailto, plus optional social/profile links).
+
+Keep it a single self-contained HTML file. Do not add external scripts,
+stylesheets, fonts, or large embedded media.
+
+## Deploy
+
+- Hosted MCP edition: call the drop tool with the HTML.
+- Local MCP / CLI edition: write the HTML to a file and run `gridctl plug`.
+
+It deploys as an inspiration and returns a live share URL right away. Re-deploy
+with the same entity id to update the same URL.

package/src/corpus/templates/portfolio/cloudgrid.yaml

@@ -0,0 +1,10 @@
+# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
+# this yaml is only for plugging it as an OWNED static runtime (async, local
+# edition only). To publish the page, prefer gridctl_drop, not grid plug.
+#
+# needs: {}  # none — static, no infrastructure
+name: portfolio
+services:
+  web:
+    type: static
+    path: /

package/src/corpus/templates/portfolio/index.html

@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>{{FULL_NAME}} — {{ROLE}}</title>
+<style>
+  :root {
+    --bg: #0b0f17; --panel: #121826; --fg: #e8edf5; --muted: #9aa7bd;
+    --accent: #5b8cff; --border: #223049;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html { scroll-behavior: smooth; }
+  body {
+    background: var(--bg); color: var(--fg);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased; line-height: 1.6;
+  }
+  .wrap { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; }
+  nav { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; max-width: 900px; margin: 0 auto; }
+  nav .brand { font-weight: 600; letter-spacing: -0.01em; }
+  nav .links { display: flex; gap: 1.25rem; }
+  nav .links a { color: var(--muted); text-decoration: none; font-size: 0.92rem; }
+  nav .links a:hover { color: var(--fg); }
+
+  section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
+  .hero { text-align: left; }
+  .hero .eyebrow { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
+  .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0.5rem 0; }
+  .hero .role { color: var(--muted); font-size: 1.3rem; margin-bottom: 1rem; }
+  .hero p { color: var(--muted); max-width: 54ch; font-size: 1.1rem; }
+
+  h2 { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.01em; margin-bottom: 1.25rem; }
+  .about p { color: var(--muted); max-width: 60ch; }
+
+  .skills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
+  .skill { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
+
+  .projects { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+  .project { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
+  .project h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
+  .project p { color: var(--muted); }
+  .project .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+  .project .tags span { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.5rem; }
+  .project a { color: var(--accent); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
+
+  .contact { text-align: center; border-top: 1px solid var(--border); }
+  .contact .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
+  .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 0.75rem 1.4rem; border-radius: 10px; font-weight: 600; }
+  .btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--fg); }
+  footer { color: var(--muted); font-size: 0.85rem; text-align: center; padding-bottom: 2.5rem; }
+</style>
+</head>
+<body>
+  <nav>
+    <span class="brand">{{FULL_NAME}}</span>
+    <div class="links">
+      <a href="#about">About</a>
+      <a href="#work">Work</a>
+      <a href="#contact">Contact</a>
+    </div>
+  </nav>
+
+  <div class="wrap">
+    <section class="hero">
+      <span class="eyebrow">{{HERO_EYEBROW}}</span>
+      <h1>{{FULL_NAME}}</h1>
+      <div class="role">{{ROLE}}</div>
+      <p>{{HERO_INTRO}}</p>
+    </section>
+
+    <section id="about" class="about">
+      <h2>About</h2>
+      <p>{{ABOUT_BODY}}</p>
+      <div class="skills" style="margin-top:1.25rem">
+        <!-- SKILLS_START -->
+        <span class="skill">{{SKILL_1}}</span>
+        <span class="skill">{{SKILL_2}}</span>
+        <span class="skill">{{SKILL_3}}</span>
+        <span class="skill">{{SKILL_4}}</span>
+        <span class="skill">{{SKILL_5}}</span>
+        <!-- Add more <span class="skill">...</span> as needed. -->
+        <!-- SKILLS_END -->
+      </div>
+    </section>
+
+    <section id="work">
+      <h2>Selected work</h2>
+      <div class="projects">
+        <!-- PROJECTS_START -->
+        <div class="project">
+          <h3>{{PROJECT_1_TITLE}}</h3>
+          <p>{{PROJECT_1_BODY}}</p>
+          <div class="tags"><span>{{PROJECT_1_TAG_1}}</span><span>{{PROJECT_1_TAG_2}}</span></div>
+          <a href="{{PROJECT_1_LINK}}">View project</a>
+        </div>
+        <div class="project">
+          <h3>{{PROJECT_2_TITLE}}</h3>
+          <p>{{PROJECT_2_BODY}}</p>
+          <div class="tags"><span>{{PROJECT_2_TAG_1}}</span><span>{{PROJECT_2_TAG_2}}</span></div>
+          <a href="{{PROJECT_2_LINK}}">View project</a>
+        </div>
+        <div class="project">
+          <h3>{{PROJECT_3_TITLE}}</h3>
+          <p>{{PROJECT_3_BODY}}</p>
+          <div class="tags"><span>{{PROJECT_3_TAG_1}}</span><span>{{PROJECT_3_TAG_2}}</span></div>
+          <a href="{{PROJECT_3_LINK}}">View project</a>
+        </div>
+        <!-- Add more .project cards as needed. -->
+        <!-- PROJECTS_END -->
+      </div>
+    </section>
+
+    <section id="contact" class="contact">
+      <h2>Get in touch</h2>
+      <p style="color:var(--muted)">{{CONTACT_BODY}}</p>
+      <div class="actions">
+        <a class="btn" href="mailto:{{EMAIL}}">Email me</a>
+        <a class="btn ghost" href="{{PROFILE_LINK}}">{{PROFILE_LABEL}}</a>
+      </div>
+    </section>
+
+    <footer>{{FOOTER_TEXT}}</footer>
+  </div>
+</body>
+</html>

package/src/corpus/templates/portfolio/index.md

@@ -0,0 +1,30 @@
+# Template: portfolio (static)
+
+A single self-contained HTML personal / freelancer portfolio: a hero intro, an about section, a skills list, a projects grid, and a contact section. **No infrastructure** — no database, no backend, no `needs:`.
+State (if any) lives only in memory and is lost on refresh.
+
+## How it deploys
+
+To publish this page, use **`gridctl_drop`** (or `gridctl_plug` with the inline
+HTML): it deploys as an **inspiration** — instant, and works on the **hosted**
+edition (Claude Web) as well as local. The reference `cloudgrid.yaml` in this
+directory (`type: static`) is ONLY for plugging the page as an OWNED static
+runtime (async, local edition only); the fast path is `gridctl_drop`.
+
+The fillable HTML is the real template — fetch it with
+`gridctl_fetch("template", "portfolio")` and fill in the user's content.
+
+## cloudgrid.yaml (reference only)
+
+```yaml
+# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
+# this yaml is only for plugging it as an OWNED static runtime (async, local
+# edition only). To publish the page, prefer gridctl_drop, not grid plug.
+#
+# needs: {}  # none — static, no infrastructure
+name: portfolio
+services:
+  web:
+    type: static
+    path: /
+```

package/src/corpus/templates/saas-marketing/README.md

@@ -0,0 +1,30 @@
+# saas-marketing
+
+A single self-contained HTML SaaS marketing site (hero, features, pricing tiers, testimonials, FAQ, and a closing call to action). Richer than the landing-page template.
+
+Static inspiration — a single self-contained `index.html` (inline CSS and JS,
+no external CDNs). It deploys instantly via `gridctl_drop` and works on every
+CloudGrid edition, including hosted.
+
+## Fill it in
+
+Fetch the template with `gridctl_fetch("template", "saas-marketing")`, then replace the
+placeholders:
+
+   - The product name, tagline, and hero eyebrow/headline/subheadline.
+   - The call-to-action label and (optional) target for the primary button.
+   - One block per feature (title + short description). Add or remove `.feature` blocks.
+   - The three pricing plans: name, price, period, and feature list. The middle plan is marked "Most popular".
+   - The testimonial quotes and who said them.
+   - The FAQ question/answer pairs (`<details>` blocks, client-side accordion).
+
+Keep it a single self-contained HTML file. Do not add external scripts,
+stylesheets, fonts, or large embedded media.
+
+## Deploy
+
+- Hosted MCP edition: call the drop tool with the HTML.
+- Local MCP / CLI edition: write the HTML to a file and run `gridctl plug`.
+
+It deploys as an inspiration and returns a live share URL right away. Re-deploy
+with the same entity id to update the same URL.