diff --git a/sketches/001-agentic-partiful/README.md b/sketches/001-agentic-partiful/README.md
new file mode 100644
index 0000000..d099922
--- /dev/null
+++ b/sketches/001-agentic-partiful/README.md
@@ -0,0 +1,25 @@
+## Prototype: Agentic Partiful landing page
+
+One live HTML artifact for the selected **Prompt → Party** direction. A natural-language brief becomes an agent conversation with explicit approval gates; the phone is a synchronized, display-only event preview.
+
+### Interaction
+
+- Run the synthetic agent sequence from the hero prompt. Research, publish approval, group-invite approval, RSVP monitoring, and reminder approval all happen in chat.
+- The phone never becomes a workflow surface. It only reflects draft, live, and guest states.
+- The conversation stays inside a bounded rail so the phone remains visible as the workflow progresses.
+
+### Product boundary
+
+This is an integration concept for Partiful CLI running inside a capable agent runtime. Partiful CLI provides deterministic event, guest, RSVP, and blast operations. External research, durable scheduling, and future execution come from the surrounding runtime. The CLI itself does not expose a native scheduling command.
+
+### Open locally
+
+```bash
+open sketches/001-agentic-partiful/index.html
+```
+
+All event data is synthetic. No command executes and no message sends.
+
+### Photo credit
+
+Picnic cover photo by [Simi Iluyomade](https://unsplash.com/@simisola) on [Unsplash](https://unsplash.com/photos/friends-laughing-together-on-picnic-blanket-tvbxqXI5mmo), used under the Unsplash License.
diff --git a/sketches/001-agentic-partiful/assets/picnic-cover.webp b/sketches/001-agentic-partiful/assets/picnic-cover.webp
new file mode 100644
index 0000000..399429f
Binary files /dev/null and b/sketches/001-agentic-partiful/assets/picnic-cover.webp differ
diff --git a/sketches/001-agentic-partiful/index.html b/sketches/001-agentic-partiful/index.html
new file mode 100644
index 0000000..a20d71a
--- /dev/null
+++ b/sketches/001-agentic-partiful/index.html
@@ -0,0 +1,598 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Partiful CLI — Agentic event planning</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --ink: #17151a;
+      --paper: #f7f3ec;
+      --purple: #6f54ee;
+      --purple-dark: #4932bb;
+      --pink: #ff7caf;
+      --blue: #8dd8ff;
+      --lime: #c8f05b;
+      --yellow: #ffd83d;
+      --orange: #ff9b61;
+      --line: rgba(23,21,26,.13);
+      --shadow: 0 20px 50px rgba(52, 36, 96, .16);
+      --display: "Bricolage Grotesque", sans-serif;
+      --body: "Figtree", sans-serif;
+    }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin: 0; color: var(--ink); font-family: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; }
+    button, textarea { font: inherit; }
+    button { color: inherit; }
+    a { color: inherit; }
+    :focus-visible { outline: 3px solid #17151a; outline-offset: 4px; }
+    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+
+    .shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
+    .nav { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 20; }
+    .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
+    .brand-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); position: relative; flex: none; }
+    .brand-mark::before, .brand-mark::after { content:""; position:absolute; border-radius:50%; background: currentColor; width:6px; height:6px; top:9px; color:#fff; }
+    .brand-mark::before { left:8px; } .brand-mark::after { right:8px; }
+    .brand-mark i { position:absolute; width:13px; height:7px; border-bottom:2px solid #fff; border-radius:50%; left:10px; top:15px; }
+    .nav-links { display:flex; align-items:center; gap:26px; font-weight:600; font-size:14px; }
+    .nav-links a { text-decoration:none; }
+    .nav-cta { border:0; border-radius:999px; padding:13px 20px; background:var(--ink); color:white; font-weight:700; cursor:pointer; }
+    .fine { font-size: 12px; color: rgba(23,21,26,.62); }
+    .tag { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid currentColor; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em; }
+    h1, h2, h3, p { margin-top: 0; }
+    h1, h2, h3 { font-family:var(--display); }
+    h1 { text-wrap: balance; }
+    .footer { padding:80px 0 120px; display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line); font-size:13px; }
+
+    #prompt-party { min-height:100vh; overflow:hidden; background:#f7f2ff; }
+    .v1-hero { position:relative; padding:65px 0 120px; }
+    .v1-hero::before { content:""; position:absolute; width:440px; height:440px; border-radius:48% 52% 44% 56%; background:var(--pink); filter:blur(1px); opacity:.35; top:-190px; left:-220px; transform:rotate(14deg); }
+    .v1-hero::after { content:""; position:absolute; width:360px; height:360px; border-radius:58% 42% 61% 39%; background:var(--blue); opacity:.55; right:-170px; bottom:-80px; transform:rotate(-10deg); }
+    .v1-copy { text-align:center; max-width:900px; margin:0 auto; position:relative; z-index:2; }
+
+    .v1-copy h1 { font-size:clamp(60px, 9.5vw, 136px); line-height:.82; letter-spacing:-.04em; margin:32px auto 24px; font-weight:800; }
+    .v1-copy h1 span { display:block; color:var(--purple); }
+    .v1-sub { max-width:620px; margin:0 auto 36px; font-size:clamp(18px,2vw,23px); line-height:1.45; }
+    .prompt-box { width:min(760px,100%); margin:0 auto; padding:12px; border-radius:28px; background:white; box-shadow:var(--shadow); text-align:left; position:relative; overflow:hidden; }
+    .prompt-box[hidden] { display:none; }
+    .prompt-box textarea { display:block; border:0; resize:none; width:100%; min-height:100px; padding:18px 20px; background:transparent; font-size:20px; line-height:1.45; color:var(--ink); }
+    .prompt-box textarea:focus { outline:none; }
+    .prompt-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 2px 14px; }
+    .prompt-hint { font-size:12px; color:rgba(23,21,26,.55); }
+    .prompt-go { border:0; border-radius:999px; padding:15px 23px; background:var(--purple); color:white; font-weight:800; cursor:pointer; box-shadow:0 8px 18px rgba(111,84,238,.3); }
+    .prompt-go[disabled] { opacity:.65; cursor:wait; }
+    .agent-run { display:none; }
+    .run-step { min-height:85px; padding:14px; border-radius:15px; background:rgba(255,255,255,.68); border:1px solid rgba(111,84,238,.13); text-align:left; font-size:12px; color:rgba(23,21,26,.62); transition:.35s; }
+    .run-step strong { display:block; color:var(--ink); font-family:var(--display); font-size:14px; margin-bottom:5px; }
+    .run-step.done { background:var(--lime); color:var(--ink); border-color:transparent; transform:translateY(-5px); }
+    .run-step.running { background:var(--yellow); color:var(--ink); border-color:transparent; }
+    .run-step.approval { background:var(--yellow); color:var(--ink); border-color:transparent; transform:translateY(-5px); }
+    .run-step.blocked { opacity:.62; border-style:dashed; }
+    .phone-reveal { display:none; width:min(1040px,calc(100vw - 32px)); margin:0; position:relative; left:50%; transform:translateX(-50%); }
+    .phone-reveal.visible { display:block; }
+    .agent-stage { height:719px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; text-align:left; }
+    .agent-conversation { height:719px; min-height:0; border-radius:24px; background:white; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
+    .phone-reveal.visible .phone-preview { animation:phone-enter .72s .1s cubic-bezier(.16,1,.3,1) both; }
+    @keyframes phone-enter { from { opacity:.01; transform:translateX(54px) scale(.95); } }
+    ::view-transition-group(agent-surface) { animation-duration:.72s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
+    ::view-transition-group(prompt-copy) { animation-duration:.55s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
+    ::view-transition-group(agent-progress) { animation-duration:.55s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
+    ::view-transition-old(agent-surface), ::view-transition-new(agent-surface) { mix-blend-mode:normal; }
+    .conversation-head { min-height:65px; padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
+    .agent-identity { display:flex; align-items:center; gap:10px; font-weight:900; }
+    .agent-mark { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:var(--purple); color:white; }
+    .agent-mark svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+    .agent-status { display:inline-flex; align-items:center; gap:7px; color:#2d7350; font-size:11px; font-weight:850; }
+    .agent-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#31b66f; box-shadow:0 0 0 4px rgba(49,182,111,.12); }
+    .conversation-body { flex:1; min-height:0; padding:22px; display:flex; flex-direction:column; gap:15px; overflow:auto; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-gutter:stable; }
+    .chat-message { max-width:88%; padding:13px 15px; border-radius:17px; font-size:13px; line-height:1.5; }
+    .chat-message.host { align-self:flex-end; background:var(--ink); color:white; border-bottom-right-radius:5px; }
+    .chat-message.agent { background:#f4f0eb; border-bottom-left-radius:5px; }
+    .chat-message strong { font-family:var(--display); }
+    .chat-message[hidden], .chat-approval[hidden] { display:none; }
+    .chat-message.arriving, .chat-approval.arriving { animation:chat-arrive .38s cubic-bezier(.16,1,.3,1) both; }
+    @keyframes chat-arrive { from { opacity:.01; transform:translateY(11px); filter:blur(4px); } }
+    .agent-facts { margin:9px 0 0; padding:0; list-style:none; display:grid; gap:5px; color:rgba(23,21,26,.66); font-size:11px; }
+    .agent-facts li::before { content:"✓"; margin-right:7px; color:#2d7350; font-weight:900; }
+    .chat-approval { padding:18px; border-radius:16px; background:#eee9ff; color:var(--ink); }
+    .chat-approval h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.02em; }
+    .chat-approval > p { margin:0 0 13px; color:rgba(23,21,26,.68); font-size:12px; line-height:1.48; }
+    .approval-detail { padding:12px; border-radius:12px; background:white; font-size:11px; line-height:1.48; }
+    .approval-detail strong { display:block; margin-bottom:4px; font-size:12px; }
+    .approval-action { width:100%; margin-top:13px; border:0; border-radius:999px; padding:13px 17px; background:var(--purple); color:white; font-size:12px; font-weight:900; cursor:pointer; transition:transform .18s ease-out, background .2s ease-out; }
+    .approval-action:not([disabled]):active { transform:scale(.985); }
+    .approval-action[disabled] { background:#a99be2; cursor:wait; }
+    .approval-action:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
+    .approval-safety { display:flex; align-items:center; gap:7px; margin-top:10px; color:#4930b7; font-size:10px; font-weight:850; }
+    .approval-safety svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+    .recipient-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+    .recipient-stack { display:flex; padding-left:5px; }
+    .recipient-avatar { width:29px; height:29px; margin-left:-5px; border:2px solid white; border-radius:50%; display:grid; place-items:center; background:var(--avatar); font-size:8px; font-weight:900; }
+    .recipient-copy { font-size:10px; color:rgba(23,21,26,.62); }
+    .phone-preview { position:sticky; top:24px; display:flex; flex-direction:column; align-items:center; }
+    .phone-preview-label { margin:0 0 10px; text-align:center; color:rgba(23,21,26,.58); font-size:11px; font-weight:850; }
+    .phone-scale { transform-origin:top center; }
+    .phone-frame { width:340px; margin:0; padding:10px; border-radius:48px; background:var(--ink); box-shadow:0 34px 75px rgba(23,21,26,.23), 0 12px 24px rgba(23,21,26,.16); text-align:left; transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1); }
+    .agent-conversation { transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
+    .agent-stage.phone-focused .agent-conversation { opacity:.68; transform:scale(.985); }
+    .agent-stage.phone-focused .phone-frame { animation:phone-focus .82s cubic-bezier(.16,1,.3,1); }
+    @keyframes phone-focus { 35% { transform:translateY(-8px) scale(1.035); box-shadow:0 44px 92px rgba(73,48,183,.28), 0 0 0 7px rgba(120,89,239,.13); } }
+    .phone-screen { min-height:675px; overflow:hidden; border-radius:39px; background:#fffdf8; position:relative; view-transition-name:phone-content; }
+    .phone-status { height:32px; padding:10px 20px 0; display:flex; justify-content:space-between; align-items:flex-start; font-size:10px; font-weight:800; }
+    .phone-island { position:absolute; width:92px; height:25px; border-radius:999px; background:var(--ink); top:8px; left:50%; transform:translateX(-50%); }
+    .phone-appbar { height:52px; padding:0 18px; display:grid; grid-template-columns:32px 1fr 32px; align-items:center; }
+    .phone-appbar strong { text-align:center; font-size:16px; }
+    .phone-icon { width:30px; height:30px; border:0; border-radius:50%; background:#f1eee8; display:grid; place-items:center; color:var(--ink); }
+    .phone-icon svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
+    .event-view { transition:filter .45s ease, opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
+    .phone-screen[data-stage="building"] .event-view { filter:blur(7px); opacity:.28; transform:scale(.97); }
+    .phone-screen[data-stage="draft"] .event-view { animation:draft-resolve .62s cubic-bezier(.16,1,.3,1); }
+    @keyframes draft-resolve { from { filter:blur(5px); opacity:.35; transform:scale(.97); } }
+    .phone-poster { height:310px; margin:0 12px; border-radius:26px; overflow:hidden; position:relative; background:#31543a; }
+    .phone-poster img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 46%; }
+    .phone-screen[data-stage="publishing"] .phone-poster { animation:poster-publish .7s ease-in-out infinite alternate; }
+    @keyframes poster-publish { to { transform:scale(.975); filter:saturate(1.18) brightness(1.08); } }
+    .phone-event { padding:21px 22px 22px; }
+    .phone-draft { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; background:#fff0a9; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
+    .phone-draft::before { content:""; width:6px; height:6px; border-radius:50%; background:#ec8e00; }
+    .phone-event h3 { margin:12px 0 6px; font-size:25px; line-height:1; letter-spacing:-.025em; }
+    .phone-host { margin:0 0 17px; color:rgba(23,21,26,.58); font-size:12px; }
+    .phone-detail { display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:center; margin:10px 0; font-size:12px; font-weight:750; }
+    .phone-detail svg { width:16px; height:16px; fill:none; stroke:var(--purple); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
+    .phone-next { margin:13px 0 0; padding:10px 12px; border-radius:12px; background:#f1ecff; color:#4930b7; font-size:11px; font-weight:800; line-height:1.35; }
+    .phone-feedback { position:absolute; z-index:8; left:16px; right:16px; bottom:16px; min-height:72px; padding:13px 14px; border:1px solid rgba(23,21,26,.1); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 18px 44px rgba(23,21,26,.2); backdrop-filter:blur(16px); display:grid; grid-template-columns:37px 1fr; gap:11px; align-items:center; }
+    .phone-feedback[hidden] { display:none; }
+    .phone-feedback.arriving { animation:phone-feedback-in .58s cubic-bezier(.16,1,.3,1); }
+    @keyframes phone-feedback-in { from { opacity:.01; transform:translateY(28px) scale(.94); } }
+    .phone-feedback-icon { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; background:#eee8ff; color:var(--purple); }
+    .phone-feedback-icon::before { content:""; width:17px; height:17px; border-radius:50%; background:conic-gradient(transparent 0 24%, currentColor 24% 100%); -webkit-mask:radial-gradient(circle, transparent 0 5px, #000 5.5px); mask:radial-gradient(circle, transparent 0 5px, #000 5.5px); animation:phone-working .7s linear infinite; }
+    @keyframes phone-working { to { transform:rotate(360deg); } }
+    .phone-screen[data-stage="draft"] .phone-feedback-icon,
+    .phone-screen[data-stage="live"] .phone-feedback-icon,
+    .phone-screen[data-stage="invited"] .phone-feedback-icon,
+    .phone-screen[data-stage="monitoring"] .phone-feedback-icon { background:#dfffa2; color:#315b00; }
+    .phone-screen[data-stage="draft"] .phone-feedback-icon::before,
+    .phone-screen[data-stage="live"] .phone-feedback-icon::before,
+    .phone-screen[data-stage="invited"] .phone-feedback-icon::before,
+    .phone-screen[data-stage="monitoring"] .phone-feedback-icon::before { width:14px; height:11px; border-radius:0; background:currentColor; -webkit-mask:none; mask:none; clip-path:polygon(0 45%, 34% 74%, 100% 0, 100% 31%, 35% 100%, 0 70%); transform:none; animation:none; }
+    .phone-feedback strong, .phone-feedback span { display:block; }
+    .phone-feedback strong { margin-bottom:3px; font-size:12px; }
+    .phone-feedback-copy { color:rgba(23,21,26,.58); font-size:9px; font-weight:750; line-height:1.3; }
+    .phone-feedback .phone-feedback-people { grid-column:2; display:flex; margin-top:-4px; padding-left:4px; }
+    .phone-feedback-people[hidden] { display:none; }
+    .phone-feedback-people i { width:24px; height:24px; margin-left:-4px; border:2px solid white; border-radius:50%; display:grid; place-items:center; background:var(--avatar); color:var(--ink); font-size:7px; font-style:normal; font-weight:900; animation:guest-arrive .45s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--i) * 80ms); }
+    @keyframes guest-arrive { from { opacity:.01; transform:translateY(20px) scale(.35); } }
+    @keyframes status-arrive { from { opacity:.01; transform:translateY(6px); } }
+    .phone-draft.published { background:#dfffa2; }
+    .confetti-layer { position:fixed; inset:0; z-index:120; overflow:hidden; pointer-events:none; }
+    .confetti-piece { position:fixed; width:9px; height:15px; border-radius:3px; opacity:0; will-change:transform,opacity; }
+    .v1-proof { background:var(--purple); color:white; padding:120px 0; position:relative; }
+    .proof-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
+    .proof-grid h2 { font-size:clamp(48px,6vw,82px); line-height:.92; letter-spacing:-.035em; position:sticky; top:80px; }
+    .proof-grid h2 em { font-style:normal; color:var(--lime); }
+    .lifecycle { display:grid; gap:0; }
+    .life-row { display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:20px; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.22); }
+    .life-no { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.4); font-family:var(--display); font-weight:700; }
+    .life-row h3 { font-size:24px; margin:0 0 5px; }
+    .life-row p { margin:0; color:rgba(255,255,255,.72); }
+    .life-code { font:600 11px ui-monospace, SFMono-Regular, Menlo, monospace; background:rgba(0,0,0,.2); padding:9px 11px; border-radius:8px; white-space:nowrap; }
+
+    .toast { position:fixed; left:50%; bottom:104px; z-index:90; transform:translate(-50%,20px); opacity:0; background:white; color:var(--ink); padding:12px 18px; border-radius:999px; box-shadow:0 12px 32px rgba(0,0,0,.18); font-size:13px; font-weight:700; transition:.3s; pointer-events:none; }
+    .toast.show { opacity:1; transform:translate(-50%,0); }
+
+    @media (max-width: 850px) {
+      .nav-links a { display:none; }
+      .shell { width:min(100% - 28px, 680px); }
+      .v1-hero { padding:45px 0 90px; }
+      .v1-copy h1 { font-size:clamp(58px,18vw,92px); }
+      .agent-run { grid-template-columns:1fr 1fr; }
+      .agent-run .run-step:last-child { grid-column:1/-1; }
+      .phone-reveal { width:min(680px,calc(100vw - 20px)); }
+      .agent-stage { height:calc(100svh - 20px); min-height:760px; grid-template-columns:1fr; grid-template-rows:minmax(280px,38%) minmax(0,62%); gap:14px; justify-items:center; }
+      .agent-conversation { width:100%; height:100%; min-height:0; }
+      .phone-preview { position:static; width:100%; height:100%; overflow:visible; }
+      .phone-scale { height:485px; transform:scale(.7); }
+      .proof-grid { grid-template-columns:1fr; gap:40px; }
+      .proof-grid h2 { position:static; }
+      .life-row { grid-template-columns:56px 1fr; }
+      .life-code { grid-column:2; width:max-content; }
+
+    }
+    @media (max-width: 560px) {
+      .nav { height:72px; }
+      .brand { font-size:18px; }
+      .brand-mark { width:28px; height:28px; }
+      .brand-mark::before,.brand-mark::after { top:8px; }
+      .brand-mark i { left:8px; top:13px; }
+      .nav-cta { padding:11px 14px; font-size:12px; }
+      .v1-copy h1 { font-size:57px; }
+      .v1-sub { font-size:17px; }
+      .prompt-box textarea { font-size:17px; min-height:155px; overflow:hidden; }
+      .prompt-hint { display:none; }
+      .agent-run { grid-template-columns:1fr; }
+      .agent-run .run-step:last-child { grid-column:auto; }
+      .conversation-body { padding:16px; }
+      .chat-message { max-width:94%; }
+      .chat-approval { padding:15px; }
+      .phone-frame { width:320px; border-radius:43px; }
+      .phone-screen { min-height:650px; border-radius:34px; }
+      .life-row { grid-template-columns:44px 1fr; gap:12px; }
+      .life-no { width:38px; height:38px; }
+      .life-row h3 { font-size:20px; }
+      .footer { display:block; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
+      ::view-transition-group(agent-surface), ::view-transition-group(prompt-copy), ::view-transition-group(agent-progress) { animation-duration:.01ms; }
+    }
+  </style>
+</head>
+<body>
+  <!--
+  THESIS: One conversation runs the whole social-production loop while the phone stays a passive artifact, refusing both terminal chrome and app-like manual workflow.
+  OWN-WORLD: Partiful-adjacent saturated fields, buoyant circular geometry, compressed display type, and crisp dark controls.
+  STORY: A technically fluent host directs an agent, approves consequential sends in chat, and watches the finished event update beside it.
+  FIRST VIEWPORT: Prompt → Party opens with one brief, then reveals an approval-driven conversation beside a display-only event preview. Primary actions stay in chat.
+  FORM: One selected live prototype direction; user-pinned direction, seed e3989f1d acknowledged.
+  FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
+  -->
+
+  <main>
+    <section id="prompt-party" aria-label="Agentic Partiful experience">
+      <header class="shell nav">
+        <a class="brand" href="#" aria-label="Partiful CLI home"><span class="brand-mark"><i></i></span>partiful CLI</a>
+        <nav class="nav-links" aria-label="Primary"><a href="#v1-how">How it works</a><a href="https://github.com/KalebCole/partiful-cli">GitHub</a><button class="nav-cta demo-toast">Try the CLI</button></nav>
+      </header>
+      <div class="v1-hero">
+        <div class="shell v1-copy">
+          <h1>Your agent has the<span>party covered.</span></h1>
+          <p class="v1-sub">You bring the idea. Your agent handles the research, setup, invites, RSVPs, and reminders.</p>
+          <div class="prompt-box">
+            <label class="sr-only" for="party-prompt">Describe your party</label>
+            <textarea id="party-prompt">Plan a sunset picnic for 18 next Saturday. Find a spot, make the invite, invite my climbing friends, and remind everyone that afternoon.</textarea>
+            <div class="prompt-actions"><span class="prompt-hint">Synthetic demo · nothing gets sent</span><button class="prompt-go" id="run-agent">Build the plan</button></div>
+          </div>
+          <div class="agent-run" id="agent-run" aria-live="polite">
+            <div class="run-step"><strong>Research</strong><span>Compare suitable spots</span></div>
+            <div class="run-step"><strong>Draft</strong><span>Build event + poster</span></div>
+            <div class="run-step"><strong>Review</strong><span>Approve event details</span></div>
+            <div class="run-step"><strong>Publish</strong><span>Waits for event review</span></div>
+            <div class="run-step"><strong>Invite</strong><span>Waits for host approval</span></div>
+            <div class="run-step"><strong>Remind</strong><span>Draft waits for approval</span></div>
+          </div>
+          <div class="phone-reveal" id="draft-phone" aria-hidden="true">
+            <div class="agent-stage">
+              <section class="agent-conversation" aria-label="Party agent conversation">
+                <header class="conversation-head">
+                  <span class="agent-identity"><span class="agent-mark" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="5"/></svg></span>Party agent</span>
+                  <span class="agent-status" id="chat-status">Waiting for approval</span>
+                </header>
+                <div class="conversation-body" id="agent-conversation" aria-live="polite">
+                  <div class="chat-message host" id="host-brief">Plan a sunset picnic for 18 next Saturday. Find a spot, make the invite, invite my climbing friends, and remind everyone that afternoon.</div>
+                  <div class="chat-message agent" id="plan-result" hidden><strong>I built the plan.</strong> Sunset Hill Park has the best west-facing view and enough lawn for 18.
+                    <ul class="agent-facts"><li>Saturday at 6:30 PM</li><li>Dry forecast during the event window</li><li>Four recent climbing friends matched</li></ul>
+                  </div>
+                  <article class="chat-approval" id="publish-approval" hidden>
+                    <h3>Publish this event?</h3>
+                    <p>The phone preview shows exactly what guests will see.</p>
+                    <div class="approval-detail"><strong>Sunset picnic at the park</strong>Saturday at 6:30 PM · Sunset Hill Park · 18 guests</div>
+                    <button class="approval-action" id="publish-action" type="button">Approve &amp; publish</button>
+                    <span class="approval-safety"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v5c0 5 3.4 8.4 8 10 4.6-1.6 8-5 8-10V6l-8-3Z"/><path d="m9 12 2 2 4-5"/></svg>Nothing happens until you approve</span>
+                  </article>
+                  <div class="chat-message agent" id="publish-receipt" hidden><strong>Event published.</strong> I have the share link and prepared the guest group.</div>
+                  <article class="chat-approval" id="invite-approval" hidden>
+                    <h3>Send these four invites?</h3>
+                    <p>I matched your recent climbing friends and drafted one message for the group.</p>
+                    <div class="approval-detail">
+                      <div class="recipient-row"><span class="recipient-stack" aria-label="Maya Chen, Jordan Lee, Chris Singh, and Nina Williams"><span class="recipient-avatar" style="--avatar:#ffd65a">MC</span><span class="recipient-avatar" style="--avatar:#ff9bcf">JL</span><span class="recipient-avatar" style="--avatar:#9edcff">CS</span><span class="recipient-avatar" style="--avatar:#c7f552">NW</span></span><span class="recipient-copy">Maya, Jordan, Chris + Nina</span></div>
+                      “Sunset picnic next Saturday! I found us a great spot. Bring a blanket and a layer for sunset.”
+                    </div>
+                    <button class="approval-action" id="invite-action" type="button">Approve sending 4 invites</button>
+                  </article>
+                  <div class="chat-message agent" id="invite-receipt" hidden><strong>4 invites delivered.</strong> I’m monitoring RSVPs and will only interrupt when a decision is needed.</div>
+                  <article class="chat-approval" id="reminder-approval" hidden>
+                    <h3>Queue the event-day reminder?</h3>
+                    <p>I’ll check RSVPs once more before the surrounding agent runtime sends this Saturday at 3:00 PM.</p>
+                    <div class="approval-detail"><strong>Message</strong>“Picnic tonight at 6:30! Bring a blanket and a layer for sunset. See you at Sunset Hill Park.”</div>
+                    <button class="approval-action" id="reminder-action" type="button">Approve reminder</button>
+                  </article>
+                  <div class="chat-message agent" id="reminder-receipt" tabindex="-1" hidden><strong>Covered.</strong> I’ll recheck the guest list and have the agent runtime send the approved reminder Saturday at 3:00 PM.</div>
+                </div>
+              </section>
+              <aside class="phone-preview" aria-label="Display-only event preview">
+                <p class="phone-preview-label">Live event preview · updates from chat</p>
+                <div class="phone-scale">
+                  <div class="phone-frame">
+                    <div class="phone-screen" data-stage="idle">
+                    <div class="phone-status"><span>9:41</span><span>5G&nbsp;&nbsp;100%</span></div>
+                    <span class="phone-island" aria-hidden="true"></span>
+                    <div class="phone-appbar">
+                      <span class="phone-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg></span>
+                      <strong>partiful</strong>
+                      <span class="phone-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></span>
+                    </div>
+                    <div class="event-view" id="event-view">
+                      <div class="phone-poster"><img src="assets/picnic-cover.webp" alt="Friends laughing together on a picnic blanket"></div>
+                      <div class="phone-event">
+                        <span class="phone-draft" id="phone-state">Draft preview</span>
+                        <h3>Sunset picnic</h3>
+                        <p class="phone-host" id="phone-host">Hosted by you · 18 guests proposed</p>
+                        <div class="phone-detail"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>Next Saturday at 6:30 PM</span></div>
+                        <div class="phone-detail"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg><span>Sunset Hill Park · Seattle</span></div>
+                        <p class="phone-next" id="phone-event-summary" aria-live="polite">Draft only · not visible to guests</p>
+                      </div>
+                    </div>
+                      <div class="phone-feedback" id="phone-feedback" role="status" aria-live="polite" hidden>
+                        <span class="phone-feedback-icon" aria-hidden="true"></span>
+                        <div><strong id="phone-feedback-title">Building your event</strong><span class="phone-feedback-copy" id="phone-feedback-copy">Researching the plan</span></div>
+                        <span class="phone-feedback-people" id="phone-feedback-people" aria-label="Maya, Jordan, Chris, and Nina" hidden><i style="--avatar:#ffd65a;--i:0">MC</i><i style="--avatar:#ff9bcf;--i:1">JL</i><i style="--avatar:#9edcff;--i:2">CS</i><i style="--avatar:#c7f552;--i:3">NW</i></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </aside>
+            </div>
+          </div>
+        </div>
+      </div>
+      <section class="v1-proof" id="v1-how">
+        <div class="shell proof-grid">
+          <h2>Not an invite maker. An <em>event operator.</em></h2>
+          <div class="lifecycle">
+            <div class="life-row"><span class="life-no">1</span><div><h3>Start with the outcome</h3><p>Your agent researches the plan before touching the guest list.</p></div><span class="life-code">events create</span></div>
+            <div class="life-row"><span class="life-no">2</span><div><h3>Make it feel real</h3><p>Create the event, choose a poster, and return the share link.</p></div><span class="life-code">posters search</span></div>
+            <div class="life-row"><span class="life-no">3</span><div><h3>Bring your people</h3><p>Resolve contacts by name, preview the group, then invite.</p></div><span class="life-code">guests invite</span></div>
+            <div class="life-row"><span class="life-no">4</span><div><h3>Keep the energy up</h3><p>Watch RSVPs and let the agent invoke approved blasts on schedule.</p></div><span class="life-code">blasts send</span></div>
+          </div>
+        </div>
+      </section>
+      <footer class="shell footer"><span>Independent, open-source tooling for Partiful.</span><span>Prototype concept · synthetic event data</span></footer>
+    </section>
+
+  </main>
+
+  <div class="confetti-layer" id="confetti-layer" aria-hidden="true"></div>
+
+  <div class="toast" id="toast" role="status">Prototype only · no command was run</div>
+
+  <script>
+
+    const runButton = document.getElementById('run-agent');
+    const promptBox = document.querySelector('.prompt-box');
+    const promptInput = document.getElementById('party-prompt');
+    const primaryWorkspace = document.querySelector('.v1-copy');
+    const run = document.getElementById('agent-run');
+    const draftPhone = document.getElementById('draft-phone');
+    const agentConversation = document.querySelector('.agent-conversation');
+    const conversationBody = document.getElementById('agent-conversation');
+    const hostBrief = document.getElementById('host-brief');
+    const planResult = document.getElementById('plan-result');
+    const publishApproval = document.getElementById('publish-approval');
+    const steps = [...run.querySelectorAll('.run-step')];
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const wait = duration => new Promise(resolve => setTimeout(resolve, reducedMotion.matches ? 0 : duration));
+    runButton.addEventListener('click', async () => {
+      if (runButton.dataset.review === 'true') {
+        document.getElementById('publish-action').focus({ preventScroll:true });
+        return;
+      }
+      runButton.disabled = true;
+      runButton.textContent = 'Agent working…';
+      hostBrief.textContent = promptInput.value.trim();
+      document.getElementById('chat-status').textContent = 'Building the plan';
+      steps.forEach(step => step.className = 'run-step');
+
+      const openWorkspace = () => {
+        primaryWorkspace.classList.add('workspace-open');
+        promptBox.hidden = true;
+        draftPhone.classList.add('visible');
+        draftPhone.setAttribute('aria-hidden', 'false');
+        setPhoneStage('building', 'Building your event', 'Researching the spot, forecast, and poster', { focus:false });
+      };
+
+      if (!reducedMotion.matches && document.startViewTransition) {
+        promptBox.style.viewTransitionName = 'agent-surface';
+        promptInput.style.viewTransitionName = 'prompt-copy';
+        runButton.style.viewTransitionName = 'agent-progress';
+        const transition = document.startViewTransition(() => {
+          openWorkspace();
+          agentConversation.style.viewTransitionName = 'agent-surface';
+          hostBrief.style.viewTransitionName = 'prompt-copy';
+          chatStatus.style.viewTransitionName = 'agent-progress';
+        });
+        transition.finished.finally(() => {
+          promptBox.style.viewTransitionName = '';
+          promptInput.style.viewTransitionName = '';
+          agentConversation.style.viewTransitionName = '';
+          hostBrief.style.viewTransitionName = '';
+          runButton.style.viewTransitionName = '';
+          chatStatus.style.viewTransitionName = '';
+        });
+      } else {
+        openWorkspace();
+      }
+
+      runButton.dataset.review = 'true';
+      await wait(820);
+      draftPhone.scrollIntoView({ behavior:reducedMotion.matches ? 'auto' : 'smooth', block:'start' });
+      await wait(420);
+      setPhoneStage('draft', 'Draft ready', 'Event details are ready for your review');
+      await wait(900);
+      steps.slice(0, 2).forEach(step => step.classList.add('done'));
+      steps[2].classList.add('approval');
+      steps.slice(3).forEach(step => step.classList.add('blocked'));
+      planResult.hidden = false;
+      planResult.classList.add('arriving');
+      await wait(140);
+      publishApproval.hidden = false;
+      publishApproval.classList.add('arriving');
+      scrollConversationTo(publishApproval);
+      document.getElementById('chat-status').textContent = 'Waiting for approval';
+      document.getElementById('publish-action').focus({ preventScroll:true });
+    });
+
+    const phoneState = document.getElementById('phone-state');
+    const phoneEventSummary = document.getElementById('phone-event-summary');
+    const phoneHost = document.getElementById('phone-host');
+    const phoneFrame = document.querySelector('.phone-frame');
+    const phoneScreen = document.querySelector('.phone-screen');
+    const phoneFeedback = document.getElementById('phone-feedback');
+    const phoneFeedbackTitle = document.getElementById('phone-feedback-title');
+    const phoneFeedbackCopy = document.getElementById('phone-feedback-copy');
+    const phoneFeedbackPeople = document.getElementById('phone-feedback-people');
+    const agentStage = document.querySelector('.agent-stage');
+    const chatStatus = document.getElementById('chat-status');
+    const publishAction = document.getElementById('publish-action');
+    const inviteAction = document.getElementById('invite-action');
+    const reminderAction = document.getElementById('reminder-action');
+    const confettiLayer = document.getElementById('confetti-layer');
+
+    function setPhoneStage(stage, title, detail, { people = false, focus = true } = {}) {
+      phoneScreen.dataset.stage = stage;
+      phoneFeedbackTitle.textContent = title;
+      phoneFeedbackCopy.textContent = detail;
+      phoneFeedbackPeople.hidden = !people;
+      phoneFeedback.hidden = false;
+      phoneFeedback.classList.remove('arriving');
+      agentStage.classList.remove('phone-focused');
+      void phoneFrame.offsetWidth;
+      phoneFeedback.classList.add('arriving');
+      if (focus) {
+        agentStage.classList.add('phone-focused');
+        phoneFrame.addEventListener('animationend', () => agentStage.classList.remove('phone-focused'), { once:true });
+      }
+    }
+
+    function celebratePublish() {
+      if (reducedMotion.matches) return;
+      const rect = phoneFrame.getBoundingClientRect();
+      const originX = rect.left + rect.width / 2;
+      const originY = rect.top + rect.height * .38;
+      const colors = ['#7859ef', '#ff8fcb', '#c7f552', '#ffd65a', '#8fd6ff', '#ffffff'];
+      for (let index = 0; index < 54; index += 1) {
+        const piece = document.createElement('i');
+        const lane = index - 26.5;
+        const xTravel = lane * 15 + Math.sin(index * 1.7) * 42;
+        const peak = -145 - (index % 6) * 17;
+        const fall = window.innerHeight - originY + 90;
+        const turns = 300 + (index % 7) * 95;
+        piece.className = 'confetti-piece';
+        piece.style.left = `${originX}px`;
+        piece.style.top = `${originY}px`;
+        piece.style.background = colors[index % colors.length];
+        piece.style.width = `${7 + (index % 3) * 2}px`;
+        piece.style.height = `${10 + (index % 4) * 3}px`;
+        confettiLayer.appendChild(piece);
+        const motion = piece.animate([
+          { opacity:0, transform:'translate(-50%, -50%) scale(.4) rotate(0deg)' },
+          { opacity:1, offset:.08 },
+          { opacity:1, transform:`translate(calc(-50% + ${xTravel * .55}px), calc(-50% + ${peak}px)) rotate(${turns * .45}deg)`, offset:.42 },
+          { opacity:0, transform:`translate(calc(-50% + ${xTravel}px), calc(-50% + ${fall}px)) rotate(${turns}deg)` }
+        ], { duration:760 + (index % 5) * 60, delay:(index % 9) * 18, easing:'cubic-bezier(.17,.67,.28,1)' });
+        motion.finished.finally(() => piece.remove());
+      }
+    }
+
+    function scrollConversationTo(element) {
+      const top = Math.max(0, element.offsetTop - conversationBody.offsetTop - 16);
+      conversationBody.scrollTo({ top, behavior:reducedMotion.matches ? 'auto' : 'smooth' });
+    }
+
+    function revealChat(id, focusId) {
+      const element = document.getElementById(id);
+      element.hidden = false;
+      element.classList.add('arriving');
+      scrollConversationTo(element);
+      if (focusId) requestAnimationFrame(() => document.getElementById(focusId).focus({ preventScroll:true }));
+    }
+
+    publishAction.addEventListener('click', async () => {
+      publishAction.disabled = true;
+      publishAction.textContent = 'Publishing…';
+      chatStatus.textContent = 'Publishing event';
+      setPhoneStage('publishing', 'Publishing your event', 'Creating the live event and share link');
+      steps[2].classList.remove('approval');
+      steps[2].classList.add('done');
+      steps[2].querySelector('span').textContent = 'Approved in chat';
+      steps[3].classList.remove('blocked');
+      steps[3].classList.add('running');
+      await wait(520);
+      steps[3].classList.remove('running');
+      steps[3].classList.add('done');
+      steps[3].querySelector('span').textContent = 'Event is live';
+      phoneState.textContent = 'Event live';
+      phoneState.classList.add('published');
+      phoneEventSummary.textContent = 'Published · ready for guests';
+      setPhoneStage('live', 'Your event is live', 'Share link created · ready for invitations');
+      publishAction.textContent = 'Event published';
+      chatStatus.textContent = 'Preparing invitations';
+      celebratePublish();
+      await wait(900);
+      revealChat('publish-receipt');
+      await wait(220);
+      steps[4].classList.remove('blocked');
+      steps[4].classList.add('approval');
+      steps[4].querySelector('span').textContent = '4 invites ready in chat';
+      revealChat('invite-approval', 'invite-action');
+      chatStatus.textContent = 'Waiting for invite approval';
+    });
+
+    inviteAction.addEventListener('click', async () => {
+      inviteAction.disabled = true;
+      inviteAction.textContent = 'Sending 4 invites…';
+      chatStatus.textContent = 'Sending invitations';
+      setPhoneStage('inviting', 'Sending 4 invitations', 'Delivering the approved invite to your friends');
+      steps[4].classList.remove('approval');
+      steps[4].classList.add('running');
+      await wait(520);
+      steps[4].classList.remove('running');
+      steps[4].classList.add('done');
+      steps[4].querySelector('span').textContent = '4 invites delivered';
+      inviteAction.textContent = '4 invites sent';
+      phoneEventSummary.textContent = '4 invited · agent monitoring RSVPs';
+      phoneHost.textContent = 'Hosted by you · 4 invited';
+      setPhoneStage('invited', 'Delivered to 4 friends', 'Maya, Jordan, Chris, and Nina received it', { people:true });
+      await wait(900);
+      revealChat('invite-receipt');
+      await wait(250);
+      steps[5].classList.remove('blocked');
+      steps[5].classList.add('approval');
+      steps[5].querySelector('span').textContent = 'Reminder ready in chat';
+      revealChat('reminder-approval', 'reminder-action');
+      chatStatus.textContent = 'Waiting for reminder approval';
+    });
+
+    reminderAction.addEventListener('click', async () => {
+      reminderAction.disabled = true;
+      reminderAction.textContent = 'Recording approval…';
+      chatStatus.textContent = 'Scheduling with agent runtime';
+      setPhoneStage('scheduling', 'Scheduling your reminder', 'Preparing Saturday’s approved message');
+      steps[5].classList.remove('approval');
+      steps[5].classList.add('running');
+      await wait(420);
+      steps[5].classList.remove('running');
+      steps[5].classList.add('done');
+      steps[5].querySelector('span').textContent = 'Approved for Saturday at 3:00 PM';
+      reminderAction.textContent = 'Reminder approved';
+      phoneEventSummary.textContent = 'Reminder set · monitoring 4 RSVPs';
+      phoneHost.textContent = 'Hosted by you · 2 going · 2 awaiting';
+      setPhoneStage('monitoring', 'Reminder scheduled', 'Saturday at 3:00 PM · RSVP watch is active');
+      await wait(900);
+      revealChat('reminder-receipt');
+      chatStatus.textContent = 'Monitoring RSVPs';
+      document.getElementById('reminder-receipt').focus({ preventScroll:true });
+    });
+
+    const toast = document.getElementById('toast');
+    document.querySelectorAll('.demo-toast').forEach(button => button.addEventListener('click', () => {
+      toast.classList.add('show');
+      setTimeout(() => toast.classList.remove('show'), 2200);
+    }));
+  </script>
+</body>
+</html>
