agent-conveyor 0.1.6 → 0.1.8

package/docs/landing-page.html

@@ -14,8 +14,8 @@
         --ink: #17202a;
         --muted: #607080;
         --line: #d7dde4;
-        --page: #f7f4ec;
-        --surface: #fffdf8;
+        --page: #f6f8fb;
+        --surface: #ffffff;
         --coal: #24313d;
         --green: #257a61;
         --blue: #2b68a8;
@@ -46,11 +46,11 @@
       .topbar {
         align-items: center;
         display: flex;
-        gap: 24px;
+        gap: 18px;
         justify-content: space-between;
         margin: 0 auto;
         max-width: 1180px;
-        padding: 18px 24px;
+        padding: 14px 24px;
       }
 
       .brand {
@@ -58,6 +58,7 @@
         display: flex;
         font-weight: 800;
         gap: 10px;
+        white-space: nowrap;
       }
 
       .brand-mark {
@@ -73,14 +74,16 @@
       nav {
         display: flex;
         flex-wrap: wrap;
-        gap: 16px;
+        gap: 14px;
         justify-content: flex-end;
       }
 
       nav a {
         color: var(--muted);
-        font-size: 14px;
+        font-size: 13px;
+        font-weight: 700;
         text-decoration: none;
+        white-space: nowrap;
       }
 
       nav a:hover {
@@ -89,7 +92,7 @@
 
       .hero {
         border-top: 1px solid rgba(36, 49, 61, 0.1);
-        min-height: min(760px, 92vh);
+        min-height: min(700px, 88vh);
         overflow: hidden;
         position: relative;
       }
@@ -106,12 +109,12 @@
 
       .hero-inner {
         display: grid;
-        gap: 52px;
+        gap: 46px;
         grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
         margin: 0 auto;
         max-width: 1180px;
-        min-height: min(710px, 86vh);
-        padding: 78px 24px 48px;
+        min-height: min(600px, 76vh);
+        padding: 46px 24px 34px;
         position: relative;
       }
 
@@ -125,7 +128,7 @@
       }
 
       h1 {
-        font-size: clamp(44px, 7vw, 92px);
+        font-size: clamp(44px, 5.8vw, 76px);
         line-height: 0.95;
         letter-spacing: 0;
         margin: 0;
@@ -134,16 +137,57 @@
 
       .hero-copy {
         color: #354758;
-        font-size: 20px;
-        margin: 24px 0 0;
+        font-size: 18px;
+        margin: 20px 0 0;
+        max-width: 650px;
+      }
+
+      .hero-summary {
+        color: #425467;
+        font-size: 15px;
+        font-weight: 700;
+        margin: 16px 0 0;
+        max-width: 640px;
+      }
+
+      .hero-proof {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        margin-top: 20px;
         max-width: 650px;
       }
 
+      .hero-proof span {
+        background: rgba(255, 255, 255, 0.68);
+        border-left: 4px solid var(--green);
+        color: #354758;
+        display: block;
+        font-size: 13px;
+        min-height: 76px;
+        padding: 12px;
+      }
+
+      .hero-proof strong {
+        color: var(--ink);
+        display: block;
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+
+      .hero-proof span:nth-child(2) {
+        border-color: var(--blue);
+      }
+
+      .hero-proof span:nth-child(3) {
+        border-color: var(--gold);
+      }
+
       .actions {
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
-        margin-top: 34px;
+        margin-top: 26px;
       }
 
       .button {
@@ -174,17 +218,49 @@
         color: #edf7f2;
         display: grid;
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-        font-size: 14px;
+        font-size: 13px;
         gap: 9px;
-        margin-top: 30px;
+        margin-top: 22px;
         max-width: 650px;
         padding: 18px;
       }
 
+      .command code {
+        overflow-wrap: anywhere;
+      }
+
       .command span {
         color: #91d9bd;
       }
 
+      .transcript {
+        background: var(--surface);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        display: grid;
+        gap: 10px;
+        margin-top: 16px;
+        padding: 16px;
+      }
+
+      .transcript-row {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: 86px minmax(0, 1fr);
+      }
+
+      .transcript-row strong {
+        color: var(--green);
+        font-size: 12px;
+        text-transform: uppercase;
+      }
+
+      .transcript-row p {
+        color: #425467;
+        font-size: 14px;
+        margin: 0;
+      }
+
       .flow-stage {
         align-self: center;
         background: rgba(255, 253, 248, 0.74);
@@ -208,6 +284,7 @@
         border: 1px solid var(--line);
         border-radius: 8px;
         min-height: 130px;
+        min-width: 0;
         padding: 16px;
       }
 
@@ -266,6 +343,10 @@
         padding: 64px 24px;
       }
 
+      #recipes .section-inner {
+        padding-top: 28px;
+      }
+
       h2 {
         font-size: clamp(30px, 4vw, 52px);
         letter-spacing: 0;
@@ -287,6 +368,38 @@
         grid-template-columns: repeat(5, minmax(0, 1fr));
       }
 
+      .mode-guide {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        margin: -12px 0 22px;
+      }
+
+      .mode-guide a {
+        background: rgba(255, 255, 255, 0.72);
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        display: grid;
+        gap: 6px;
+        min-height: 104px;
+        padding: 14px;
+        text-decoration: none;
+      }
+
+      .mode-guide a:hover {
+        border-color: var(--blue);
+        box-shadow: 0 10px 28px rgba(23, 32, 42, 0.08);
+      }
+
+      .mode-guide strong {
+        font-size: 15px;
+      }
+
+      .mode-guide span {
+        color: var(--muted);
+        font-size: 13px;
+      }
+
       .recipe {
         background: var(--surface);
         border: 1px solid var(--line);
@@ -309,6 +422,12 @@
         margin: 0;
       }
 
+      .recipe .use-case {
+        color: var(--ink);
+        font-size: 13px;
+        font-weight: 800;
+      }
+
       .tag-row {
         align-content: flex-start;
         align-items: flex-start;
@@ -359,6 +478,11 @@
         grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
       }
 
+      .split h2 {
+        font-size: clamp(30px, 3.2vw, 44px);
+        max-width: 640px;
+      }
+
       .timeline {
         display: grid;
         gap: 12px;
@@ -399,7 +523,29 @@
         grid-template-columns: repeat(3, minmax(0, 1fr));
       }
 
-      .db-item {
+      .diagnostic-strip {
+        background: #edf7f2;
+        border: 1px solid rgba(37, 122, 97, 0.22);
+        border-radius: 8px;
+        display: grid;
+        gap: 12px;
+        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
+        margin-top: 14px;
+        padding: 16px;
+      }
+
+      .diagnostic-strip strong {
+        display: block;
+        margin-bottom: 4px;
+      }
+
+      .diagnostic-strip p {
+        color: #425467;
+        margin: 0;
+      }
+
+      .db-item,
+      .proof-card {
         background: var(--surface);
         border: 1px solid var(--line);
         border-radius: 8px;
@@ -407,17 +553,62 @@
         padding: 16px;
       }
 
-      .db-item strong {
+      .db-item strong,
+      .proof-card strong {
         display: block;
         margin-bottom: 6px;
       }
 
-      .db-item p {
+      .db-item p,
+      .proof-card p {
         color: var(--muted);
         font-size: 14px;
         margin: 0;
       }
 
+      .proof-grid {
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .proof-card {
+        min-height: 146px;
+      }
+
+      .proof-card code {
+        color: var(--green);
+        display: block;
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+
+      .release-band {
+        background: #eaf1f7;
+      }
+
+      .release-grid {
+        align-items: start;
+        display: grid;
+        gap: 18px;
+        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
+      }
+
+      .release-list {
+        display: grid;
+        gap: 10px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .release-list li {
+        background: rgba(255, 255, 255, 0.74);
+        border-left: 4px solid var(--blue);
+        list-style: none;
+        padding: 12px 14px;
+      }
+
       .closing {
         background: var(--coal);
         color: white;
@@ -448,20 +639,94 @@
         }
 
         .recipes,
+        .mode-guide,
+        .proof-grid,
         .db-grid {
           grid-template-columns: repeat(2, minmax(0, 1fr));
         }
+
+        .release-grid {
+          grid-template-columns: 1fr;
+        }
+
+        .diagnostic-strip {
+          grid-template-columns: 1fr;
+        }
       }
 
       @media (max-width: 640px) {
         .topbar {
           align-items: flex-start;
           flex-direction: column;
+          gap: 10px;
+          padding: 10px 18px;
+        }
+
+        .brand {
+          font-size: 14px;
+        }
+
+        .brand-mark {
+          height: 18px;
+          width: 26px;
+        }
+
+        nav {
+          gap: 10px;
+          flex-wrap: nowrap;
+          justify-content: flex-start;
+          overflow-x: auto;
+          padding-bottom: 2px;
+          width: 100%;
+        }
+
+        nav a {
+          font-size: 12px;
         }
 
         .hero-inner {
-          gap: 28px;
-          padding-top: 46px;
+          gap: 20px;
+          min-height: auto;
+          padding: 30px 24px 30px;
+        }
+
+        .eyebrow {
+          font-size: 11px;
+          margin-bottom: 10px;
+        }
+
+        .hero-copy {
+          font-size: 16px;
+          margin-top: 16px;
+        }
+
+        .hero-summary {
+          font-size: 13px;
+          margin-top: 12px;
+        }
+
+        .hero-proof {
+          gap: 8px;
+          margin-top: 16px;
+        }
+
+        .hero-proof span {
+          min-height: 0;
+          padding: 10px 12px;
+        }
+
+        .actions {
+          margin-top: 20px;
+        }
+
+        .hero .command {
+          font-size: 12px;
+          margin-top: 16px;
+          padding: 14px;
+        }
+
+        .hero .command code:nth-child(n + 2) {
+          display: none;
         }
 
         .flow-stage {
@@ -469,18 +734,7 @@
         }
 
         .mobile-flow-strip {
-          align-items: center;
-          background: rgba(255, 253, 248, 0.78);
-          border: 1px solid rgba(36, 49, 61, 0.16);
-          border-radius: 8px;
-          box-shadow: 0 12px 32px rgba(23, 32, 42, 0.12);
-          display: grid;
-          gap: 8px;
-          grid-template-columns: 1fr 18px 1fr 18px 1fr;
-          margin-top: 18px;
-          min-height: 64px;
-          padding: 12px;
-          text-align: center;
+          display: none;
         }
 
         .mobile-flow-strip span {
@@ -494,6 +748,9 @@
         }
 
         .recipes,
+        .hero-proof,
+        .mode-guide,
+        .proof-grid,
         .db-grid {
           grid-template-columns: 1fr;
         }
@@ -501,6 +758,10 @@
         h1 {
           font-size: 44px;
         }
+
+        #recipes .section-inner {
+          padding-top: 16px;
+        }
       }
     </style>
   </head>
@@ -511,7 +772,8 @@
         <a href="#recipes">Recipes</a>
         <a href="#flow">Manager Flow</a>
         <a href="#database">Audit Trail</a>
-        <a href="../README.md">README</a>
+        <a href="#release">Release</a>
+        <a href="https://github.com/neonwatty/agent-conveyor#readme">README</a>
       </nav>
     </header>
 
@@ -522,13 +784,22 @@
             <p class="eyebrow">Local Codex manager / worker control plane</p>
             <h1>Agent Conveyor</h1>
             <p class="hero-copy">
-              Turn broad Codex work into repeatable manager recipes: one manager
-              supervises one worker through Dispatch, evidence gates, handoffs,
-              and an auditable SQLite trail.
+              Turn broad Codex work into repeatable manager recipes: pick a
+              mode, launch one supervised worker, and require receipts before
+              the manager continues, compacts, merges, or stops.
+            </p>
+            <p class="hero-summary">
+              Built for long-running GoalBuddy boards, screenshot-driven UX
+              polish, coverage loops, and PR/CI merge supervision.
             </p>
+            <div class="hero-proof" aria-label="Agent Conveyor outcomes">
+              <span><strong>Choose a recipe</strong>Modes, tools, permissions, and cleanup rules are locked before work starts.</span>
+              <span><strong>Route the worker</strong>Dispatch sends handoffs, records attempts, and blocks unsafe continuations.</span>
+              <span><strong>Close with proof</strong>SQLite receipts make tests, screenshots, CI, and blockers replayable.</span>
+            </div>
             <div class="actions">
               <a class="button primary" href="#recipes">Explore recipes</a>
-              <a class="button secondary" href="manager-recipes.md">Read the docs</a>
+              <a class="button secondary" href="https://github.com/neonwatty/agent-conveyor/blob/main/docs/manager-recipes.md">Read the docs</a>
             </div>
             <div class="command" aria-label="Install and recipe preview commands">
               <code>npm install -g agent-conveyor</code>
@@ -579,9 +850,24 @@
             starts it resolves to a named recipe or explicit custom mode. Each
             recipe has settings, permissions, evidence gates, and cleanup rules.
           </p>
+          <div class="mode-guide" aria-label="Choose a starting recipe">
+            <a href="https://github.com/neonwatty/agent-conveyor/blob/main/docs/manager-recipes.md#goalbuddy-conveyor">
+              <strong>Need overnight progress?</strong>
+              <span>Start with GoalBuddy Conveyor and one active board at a time.</span>
+            </a>
+            <a href="https://github.com/neonwatty/agent-conveyor/blob/main/docs/manager-recipes.md#ux-polish-loop">
+              <strong>Need visible quality?</strong>
+              <span>Use UX Polish when screenshots should decide the next pass.</span>
+            </a>
+            <a href="https://github.com/neonwatty/agent-conveyor/blob/main/docs/manager-recipes.md#prcimerge-ralph-loop">
+              <strong>Need a green merge?</strong>
+              <span>Use the PR/CI loop for review, CI monitoring, and merge receipts.</span>
+            </a>
+          </div>
           <div class="recipes">
             <article class="recipe accent-green">
               <h3>GoalBuddy Conveyor</h3>
+              <p class="use-case">Use when the work is bigger than one safe worker turn.</p>
               <p>Runs broad work as sequential child boards with one active child at a time.</p>
               <div class="tag-row">
                 <span class="tag">strict</span>
@@ -591,6 +877,7 @@
             </article>
             <article class="recipe accent-blue">
               <h3>Test Coverage Loop</h3>
+              <p class="use-case">Use when confidence is the blocker.</p>
               <p>Improves or proves test confidence before another worker pass can begin.</p>
               <div class="tag-row">
                 <span class="tag">strict</span>
@@ -600,6 +887,7 @@
             </article>
             <article class="recipe accent-gold">
               <h3>UX Polish Loop</h3>
+              <p class="use-case">Use when screenshots should drive the next fix.</p>
               <p>Iterates visible quality using screenshots, browser evidence, and visual diffs.</p>
               <div class="tag-row">
                 <span class="tag">guided</span>
@@ -609,6 +897,7 @@
             </article>
             <article class="recipe accent-rose">
               <h3>Nudge / What's Next</h3>
+              <p class="use-case">Use when direction is fuzzy and risk should stay low.</p>
               <p>Observes, negotiates criteria, and asks focused next-step questions without taking over.</p>
               <div class="tag-row">
                 <span class="tag">guided</span>
@@ -618,6 +907,7 @@
             </article>
             <article class="recipe accent-violet">
               <h3>PR / CI / Merge Ralph Loop</h3>
+              <p class="use-case">Use when the manager should drive review to green merge.</p>
               <p>Drives PR readiness, CI monitoring, green merge, handoff, and fresh-worker replay.</p>
               <div class="tag-row">
                 <span class="tag">strict</span>
@@ -639,9 +929,16 @@
             </p>
             <div class="command">
               <code><span>conveyor</span> manager-config "$TASK" --recipe goalbuddy-conveyor --mode strict</code>
+              <code><span>conveyor</span> pair --task dogfood-goalbuddy --manager-recipe goalbuddy-conveyor --path /tmp/agent-conveyor-dogfood/workerctl.db</code>
               <code><span>conveyor</span> cycle "$TASK"</code>
               <code><span>conveyor</span> replay "$TASK"</code>
             </div>
+            <div class="transcript" aria-label="Example manager dispatcher worker transcript">
+              <div class="transcript-row"><strong>Manager</strong><p>Start `ux-polish-loop`; require screenshot proof before another worker pass.</p></div>
+              <div class="transcript-row"><strong>Dispatch</strong><p>Routes the task, records the command attempt, and waits for worker receipts.</p></div>
+              <div class="transcript-row"><strong>Worker</strong><p>Returns screenshot paths, changed files, tests run, and the next blocker if one remains.</p></div>
+              <div class="transcript-row"><strong>Manager</strong><p>Accepts proof, asks for one more pass, or closes the loop with replayable evidence.</p></div>
+            </div>
           </div>
           <div class="timeline">
             <div class="step">
@@ -660,6 +957,27 @@
               <span class="step-number">4</span>
               <div><strong>Finish with proof</strong><p>Completion needs receipts: tests, screenshots, CI, handoff, audit, or an explicit blocker.</p></div>
             </div>
+            <div class="step">
+              <span class="step-number">5</span>
+              <div><strong>Dogfood the package</strong><p>A clean package run launches Dispatch, records acks, satisfies criteria, and finishes without path fixes.</p></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="section-inner">
+          <h2>Dogfood proof is a first-class recipe output</h2>
+          <p class="section-lede">
+            A useful manager setup is more than a prompt. It should leave enough
+            evidence for another operator to replay what happened and improve
+            the recipe when friction repeats.
+          </p>
+          <div class="proof-grid">
+            <div class="proof-card"><code>manager-config</code><strong>Settings locked</strong><p>Mode, objective, permissions, tools, epilogues, and cleanup policy are saved before the manager starts.</p></div>
+            <div class="proof-card"><code>pair --json</code><strong>Launch is explicit</strong><p>The package records manager, worker, Dispatch PID, cwd, and database path for the run.</p></div>
+            <div class="proof-card"><code>criteria --list</code><strong>Acceptance is visible</strong><p>Criteria move from accepted to satisfied with evidence instead of being inferred from chat.</p></div>
+            <div class="proof-card"><code>replay / audit</code><strong>Closeout is replayable</strong><p>Worker completion, manager decisions, finish task, and cleanup receipts remain inspectable.</p></div>
           </div>
         </div>
       </section>
@@ -680,6 +998,41 @@
             <div class="db-item"><strong>manager_cycles</strong><p>Observation history and the manager context used for each decision.</p></div>
             <div class="db-item"><strong>telemetry_events</strong><p>Dispatch heartbeat, routing issues, stale work, and searchable issue clues.</p></div>
           </div>
+          <div class="diagnostic-strip">
+            <div>
+              <strong>When a run feels wrong</strong>
+              <p>Use the database as the bug report, not a reconstructed chat summary.</p>
+            </div>
+            <p>
+              Start with `conveyor replay`, attach acceptance criteria and
+              notification receipts, then tune the recipe gate that allowed the
+              weak continuation.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section id="release" class="release-band">
+        <div class="section-inner release-grid">
+          <div>
+            <h2>Release without token wrangling</h2>
+            <p class="section-lede">
+              Package verification can stay separate from publish. The manual
+              workflow first creates a review tarball; only an explicit publish
+              run with the npm production environment uses Trusted Publishing.
+            </p>
+            <div class="command">
+              <code><span>gh</span> workflow run publish.yml -f version=0.1.8 -f publish=false</code>
+              <code><span>gh</span> workflow run publish.yml -f version=0.1.8 -f publish=true</code>
+              <code><span>npm</span> view agent-conveyor version</code>
+            </div>
+          </div>
+          <ul class="release-list">
+            <li><strong>Verify first</strong><br />Run tests, package smoke, release check, and upload a tarball for review.</li>
+            <li><strong>Publish intentionally</strong><br />Require `publish=true`, a matching version input, and the `npm-production` environment.</li>
+            <li><strong>Use OIDC</strong><br />Trusted Publishing removes long-lived npm tokens from the release path.</li>
+            <li><strong>Dogfood after publish</strong><br />Fresh-install the public package before merging release paperwork.</li>
+          </ul>
         </div>
       </section>
 
@@ -692,8 +1045,8 @@
             continued, stopped, compacted, or finished.
           </p>
           <div class="actions">
-            <a class="button primary" href="manager-recipes.md">Open manager recipes</a>
-            <a class="button secondary" href="../README.md">Read install docs</a>
+            <a class="button primary" href="https://github.com/neonwatty/agent-conveyor/blob/main/docs/manager-recipes.md">Open manager recipes</a>
+            <a class="button secondary" href="https://github.com/neonwatty/agent-conveyor#readme">Read install docs</a>
           </div>
         </div>
       </section>