← back to Website Analysis
initial scaffold (gitify-all 2026-05-06)
2252a6853250e6752af0fd59f0ca91cf3d3e728d · 2026-05-06 10:25:54 -0700 · Steve Abrams
Files touched
A .gitignoreA runs/businessclaw-2026-05-05-2018/competitors.htmlA runs/businessclaw-2026-05-05-2018/extension.htmlA runs/businessclaw-2026-05-05-2018/hub.htmlA runs/businessclaw-2026-05-05-2018/mockups/01-editorial.htmlA runs/businessclaw-2026-05-05-2018/mockups/02-dashboard-screenshot.htmlA runs/businessclaw-2026-05-05-2018/mockups/03-recipe-wall.htmlA runs/businessclaw-2026-05-05-2018/mockups/index.htmlA runs/businessclaw-2026-05-05-2018/peers.htmlA runs/businessclaw-2026-05-05-2018/report.htmlA runs/businessclaw-2026-05-05-2018/tools.htmlA runs/businessclaw-marketing/01-editorial.htmlA runs/businessclaw-marketing/02-brutalist-terminal.htmlA runs/businessclaw-marketing/03-live-dashboard.htmlA runs/businessclaw-marketing/competitors.md
Diff
commit 2252a6853250e6752af0fd59f0ca91cf3d3e728d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 6 10:25:54 2026 -0700
initial scaffold (gitify-all 2026-05-06)
---
.gitignore | 12 +
runs/businessclaw-2026-05-05-2018/competitors.html | 165 +++++++++++++
runs/businessclaw-2026-05-05-2018/extension.html | 161 ++++++++++++
runs/businessclaw-2026-05-05-2018/hub.html | 148 +++++++++++
.../mockups/01-editorial.html | 147 +++++++++++
.../mockups/02-dashboard-screenshot.html | 131 ++++++++++
.../mockups/03-recipe-wall.html | 164 ++++++++++++
.../mockups/index.html | 82 ++++++
runs/businessclaw-2026-05-05-2018/peers.html | 169 +++++++++++++
runs/businessclaw-2026-05-05-2018/report.html | 209 ++++++++++++++++
runs/businessclaw-2026-05-05-2018/tools.html | 196 +++++++++++++++
runs/businessclaw-marketing/01-editorial.html | 190 ++++++++++++++
.../02-brutalist-terminal.html | 210 ++++++++++++++++
runs/businessclaw-marketing/03-live-dashboard.html | 275 +++++++++++++++++++++
runs/businessclaw-marketing/competitors.md | 199 +++++++++++++++
15 files changed, 2458 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7e6a9c3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,12 @@
+node_modules/
+.env
+.env.local
+.env.*.local
+.env.*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
+*.bak
diff --git a/runs/businessclaw-2026-05-05-2018/competitors.html b/runs/businessclaw-2026-05-05-2018/competitors.html
new file mode 100644
index 0000000..76dcf6a
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/competitors.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Competitor Matrix — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--ink-faint:rgba(244,241,234,.30);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--warn:#d9b577;--bad:#c9856e;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.04),transparent 65%);pointer-events:none;z-index:0}
+main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 18px;border-top:1px solid var(--rule);padding-top:32px}
+h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:24px 0 6px}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 28px}
+p,li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}
+.nav a:hover,.nav .home{color:var(--gold)}
+table{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}
+th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
+th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+.tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 8px;border-radius:2px;background:var(--gold-soft);color:var(--gold);text-transform:uppercase}
+.tag.bad{background:rgba(201,133,110,.16);color:var(--bad)}
+.tag.good{background:rgba(143,184,154,.16);color:var(--good)}
+.tag.warn{background:rgba(217,181,119,.16);color:var(--warn)}
+.callout{border-left:2px solid var(--gold);background:var(--gold-soft);padding:18px 22px;margin:20px 0;border-radius:0 3px 3px 0}
+.callout strong{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500}
+.vector{border:1px solid var(--rule);background:var(--bg-card);border-radius:3px;padding:22px 24px;margin:14px 0}
+.vector .num{font-family:var(--serif);font-style:italic;font-size:36px;color:var(--gold);line-height:1;margin-bottom:8px}
+.vector h3{margin-top:0}
+.vector .why{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:14px 0 4px}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Competitor Matrix · Section 03 of 07</div>
+ <h1>Two markets. <em>One product.</em></h1>
+ <p class="lede">Commerce Claw competes in two adjacent categories that almost never overlap: pure workflow-automation (Zapier, Make, n8n) and SMB business-OS (HoneyBook, Jobber, GoHighLevel). The wedge is the intersection — and almost no funded competitor is sitting in it. Six differentiation vectors below are ranked by defensibility.</p>
+
+ <h2>Category A · Workflow automation</h2>
+ <table>
+ <thead><tr><th>Player</th><th>Wedge</th><th>Public price (entry)</th><th>Free tier</th><th>AI agent UX</th><th>SMB UX layer</th></tr></thead>
+ <tbody>
+ <tr><td><strong>Zapier</strong></td><td>Universal index of integrations</td><td>~$20/mo</td><td><span class="tag good">yes</span></td><td><span class="tag warn">retrofit</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Make</strong></td><td>Visual canvas, ops-priced</td><td>~$9/mo</td><td><span class="tag good">yes</span></td><td><span class="tag warn">retrofit</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>n8n</strong></td><td>Self-host, fair-code</td><td>$0 self-host / $20 cloud</td><td><span class="tag good">yes</span></td><td><span class="tag good">native nodes</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Pipedream</strong></td><td>Code-anywhere, dev-first</td><td>$0 / $19/mo</td><td><span class="tag good">yes</span></td><td><span class="tag good">native</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Workato</strong></td><td>Enterprise-IT</td><td>POA (~$10k+/yr)</td><td><span class="tag bad">no</span></td><td><span class="tag good">"Workbot"</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Tray.io</strong></td><td>Mid-market enterprise</td><td>POA</td><td><span class="tag bad">no</span></td><td><span class="tag good">"Merlin"</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Bardeen</strong></td><td>Browser-extension AI</td><td>$0 / $20/mo</td><td><span class="tag good">yes</span></td><td><span class="tag good">native</span></td><td><span class="tag warn">partial</span></td></tr>
+ <tr><td><strong>Relevance AI</strong></td><td>"AI workforce"</td><td>$0 / $19/mo</td><td><span class="tag good">yes</span></td><td><span class="tag good">native</span></td><td><span class="tag bad">no</span></td></tr>
+ </tbody>
+ </table>
+ <p><em>Public-price column: entry tier as published on each company's pricing page at audit time. POA = "price on application", i.e. enterprise sales-call gated.</em></p>
+
+ <h2>Category B · SMB business-OS</h2>
+ <table>
+ <thead><tr><th>Player</th><th>Vertical focus</th><th>Public price (entry)</th><th>Native automation</th><th>Cross-tool integration</th><th>AI agent</th></tr></thead>
+ <tbody>
+ <tr><td><strong>HoneyBook</strong></td><td>Creative services</td><td>~$19/mo</td><td><span class="tag good">workflows</span></td><td><span class="tag warn">limited</span></td><td><span class="tag warn">"AI Composer"</span></td></tr>
+ <tr><td><strong>Jobber</strong></td><td>Home services</td><td>~$25/mo</td><td><span class="tag good">workflows</span></td><td><span class="tag warn">limited</span></td><td><span class="tag warn">copywriter</span></td></tr>
+ <tr><td><strong>ServiceTitan</strong></td><td>Trades/contractors</td><td>POA</td><td><span class="tag good">yes</span></td><td><span class="tag warn">partner</span></td><td><span class="tag warn">limited</span></td></tr>
+ <tr><td><strong>GoHighLevel</strong></td><td>Marketing agencies</td><td>~$97/mo</td><td><span class="tag good">native</span></td><td><span class="tag good">many</span></td><td><span class="tag good">"Conversation AI"</span></td></tr>
+ <tr><td><strong>Vagaro</strong></td><td>Salon / wellness</td><td>~$30/mo</td><td><span class="tag warn">limited</span></td><td><span class="tag bad">no</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Square for Restaurants</strong></td><td>Restaurant POS</td><td>$0 / $60/mo</td><td><span class="tag warn">limited</span></td><td><span class="tag warn">app market</span></td><td><span class="tag bad">no</span></td></tr>
+ </tbody>
+ </table>
+
+ <h2>The intersection — where Commerce Claw sits</h2>
+ <p>Filter by: (a) AI-native chat UX as the primary surface, (b) SMB-priced ($0–$50/mo, not enterprise POA), (c) horizontal across SaaS tools (not vertical-locked), (d) editorial brand (not template-SaaS look).</p>
+ <table>
+ <thead><tr><th>Player</th><th>(a) AI chat primary</th><th>(b) SMB price</th><th>(c) Horizontal</th><th>(d) Editorial brand</th><th>All four</th></tr></thead>
+ <tbody>
+ <tr><td>Zapier "Copilot"</td><td><span class="tag warn">retrofit</span></td><td><span class="tag good">yes</span></td><td><span class="tag good">yes</span></td><td><span class="tag bad">no</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td>Bardeen</td><td><span class="tag good">yes</span></td><td><span class="tag good">yes</span></td><td><span class="tag warn">browser only</span></td><td><span class="tag bad">no</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td>Relevance AI</td><td><span class="tag good">yes</span></td><td><span class="tag good">yes</span></td><td><span class="tag good">yes</span></td><td><span class="tag bad">no</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td>GoHighLevel</td><td><span class="tag warn">retrofit</span></td><td><span class="tag warn">$97</span></td><td><span class="tag warn">marketing-only</span></td><td><span class="tag bad">no</span></td><td><span class="tag bad">no</span></td></tr>
+ <tr><td><strong>Commerce Claw</strong></td><td><span class="tag good"><strong>yes</strong></span></td><td><span class="tag good"><strong>$0</strong></span></td><td><span class="tag good"><strong>yes (56)</strong></span></td><td><span class="tag good"><strong>yes</strong></span></td><td><span class="tag good"><strong>YES</strong></span></td></tr>
+ </tbody>
+ </table>
+
+ <div class="callout"><strong>Wedge thesis.</strong> The four-way intersection — AI-chat-primary + SMB-priced + horizontal + editorial brand — has zero funded incumbents at the homepage level. Bardeen is closest but is browser-only; Relevance AI is closest but is workforce-positioned (not SMB-positioned) and visually generic. The marketing position "<em>the only AI command line built for SMBs that looks like Kinfolk and runs like Pipedream</em>" is currently unowned.</p>
+
+ <h2>Six differentiation vectors Commerce Claw could ship</h2>
+
+ <div class="vector">
+ <div class="num">01</div>
+ <h3>Sensitive-action approval gate as the killer feature</h3>
+ <p>None of the eight workflow-automation peers default to "ask for human approval before any action that moves money, sends a customer email, or modifies a record." Zapier's path is "if it's wired, it runs." For SMBs who are afraid of AI hallucinations near billing, this is a direct trust-buy.</p>
+ <div class="why">Defensibility</div>
+ <p>Mid. Easy to copy in code, hard to retrofit into a UX where the existing user has been told "we just run things." Commerce Claw can claim it natively from day one.</p>
+ </div>
+
+ <div class="vector">
+ <div class="num">02</div>
+ <h3>"Yelp-killer" review-ingestion + reply-via-AI</h3>
+ <p>The differentiation thesis from Steve's notes — pull every review across Yelp / Google / TripAdvisor / Booking / OpenTable into the chat surface, draft and approve replies in one place. Zapier can technically do this with 14 zaps. Commerce Claw can do it as a single chat command.</p>
+ <div class="why">Defensibility</div>
+ <p>High. Vertical SaaS (Birdeye, Podium, Reputation.com) charge $300+/mo for this and only this. Commerce Claw can ship it as one of 56 connectors.</p>
+ </div>
+
+ <div class="vector">
+ <div class="num">03</div>
+ <h3>AES-256-GCM at-rest encryption + audit trail as a marketing surface</h3>
+ <p>Buyers in this category specifically search for "SOC 2", "encryption at rest", "audit log". Commerce Claw already shipped this. None of Zapier/Make/Pipedream put encryption details on the homepage; they bury them in /security pages. Putting it <em>on</em> the homepage as a trust badge ("AES-256-GCM, every credential, every time") is unconventional but cuts the deal-breaker objection in line one.</p>
+ <div class="why">Defensibility</div>
+ <p>Low (anyone can implement) but durable as a positioning move (first to claim it loudly wins the category framing).</p>
+ </div>
+
+ <div class="vector">
+ <div class="num">04</div>
+ <h3>Editorial brand voice as the moat</h3>
+ <p>Commerce Claw's design language is closer to the New York Times than to Slack. The 8 peers all look like the same template. SMB buyers are increasingly fatigued with "purple-gradient AI startup" — the editorial register is what The Browser Company learned.</p>
+ <div class="why">Defensibility</div>
+ <p>High in the medium term (very few engineering teams can pull off restraint). Low in the long term (visually copyable). Use the runway.</p>
+ </div>
+
+ <div class="vector">
+ <div class="num">05</div>
+ <h3>Self-host / single-binary distribution path</h3>
+ <p>n8n's growth is largely from "I'll just self-host." Pipedream and Zapier don't offer it; Workato charges enterprise to. If Commerce Claw shipped a Docker image or single-binary that small businesses could put on a $5/mo VPS, it would compound.</p>
+ <div class="why">Defensibility</div>
+ <p>Mid. Architectural choice — once you commit to multi-tenant cloud, retrofitting self-host is expensive. Decision needs to be made before scale.</p>
+ </div>
+
+ <div class="vector">
+ <div class="num">06</div>
+ <h3>SMB-vertical recipe library</h3>
+ <p>Zapier's templates are organized by tool ("Stripe templates", "Slack templates"). SMBs don't think that way; they think "I run a salon and I want X." A library indexed by <em>SMB vertical</em> ("for restaurants", "for salons", "for trades") with hand-curated 5-recipe packs in each is a content moat the workflow-automation incumbents won't build because their audience isn't SMB.</p>
+ <div class="why">Defensibility</div>
+ <p>High. Organic-traffic compound. 30 verticals × 5 recipes × 1,000 visits/mo = 150k monthly visits at the floor. Mockup variant 03 visualizes this.</p>
+ </div>
+
+ <h2>What competitors will copy first</h2>
+ <ul>
+ <li><strong>Editorial brand</strong> — copyable in a week by anyone with a design lead. Capture the positioning before they wake up.</li>
+ <li><strong>"AES-256-GCM on the homepage"</strong> — copyable in a day. Same.</li>
+ <li><strong>56-connector grid</strong> — Zapier already shows 7,000. The defensible move isn't count, it's <em>curation for SMBs</em>: "the 56 tools small businesses actually use," with the explicit promise "we won't add the 57th unless we hear it from real customers."</li>
+ </ul>
+
+ <h2>What competitors structurally cannot copy</h2>
+ <ul>
+ <li><strong>Sub-50-tool curation as a feature</strong> — Zapier's whole positioning is "more is more." They can't shrink without admitting they were wrong.</li>
+ <li><strong>SMB-vertical recipe library at $0 price point</strong> — Workato/Tray won't because enterprise buyers fund their roadmap; Zapier won't because their content-machine is tool-indexed; HoneyBook/Jobber won't because they don't have horizontal connector breadth.</li>
+ <li><strong>Editorial-brand consistency</strong> — every funded competitor has multiple cooks in design. Solo-founder restraint is a structural advantage that disappears at Series A.</li>
+ </ul>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Competitor Matrix · 3 of 7. Next → <a href="mockups/index.html" style="color:var(--gold)">Mockups</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/extension.html b/runs/businessclaw-2026-05-05-2018/extension.html
new file mode 100644
index 0000000..3973a4c
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/extension.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Chrome Extension — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--bad:#c9856e;--warn:#d9b577;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}.nav a:hover,.nav .home{color:var(--gold)}
+main{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 36px}
+h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 8px;border-top:1px solid var(--rule);padding-top:32px}
+h2 em{font-style:italic;color:var(--gold)}
+h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:20px 0 6px}
+p,li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
+ul{padding-left:22px}
+pre{font-family:var(--mono);font-size:12px;background:#0a0a0c;border:1px solid var(--rule);border-radius:2px;padding:18px 22px;overflow-x:auto;line-height:1.65;color:var(--ink-soft)}
+pre .k{color:var(--gold)}.s{color:var(--good)}.c{color:var(--ink-mute);font-style:italic}
+code{font-family:var(--mono);font-size:12px;background:var(--bg-elevated);border:1px solid var(--rule);border-radius:2px;padding:2px 6px;color:var(--ink-soft)}
+.callout{border-left:2px solid var(--gold);background:var(--gold-soft);padding:18px 22px;margin:18px 0}
+.callout strong{font-family:var(--serif);font-weight:500;color:var(--ink)}
+table{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}
+th,td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
+th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+.tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 7px;border-radius:2px}
+.tag.good{background:rgba(143,184,154,.16);color:var(--good)}.tag.warn{background:rgba(217,181,119,.16);color:var(--warn)}.tag.bad{background:rgba(201,133,110,.16);color:var(--bad)}.tag.gold{background:var(--gold-soft);color:var(--gold)}
+.struct{font-family:var(--mono);font-size:12px;background:#0a0a0c;border:1px solid var(--rule);border-radius:2px;padding:18px 22px;line-height:1.7;color:var(--ink-soft)}
+.struct .dim{color:var(--ink-mute)}.struct .a{color:var(--gold)}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Chrome Extension · Section 07 of 07</div>
+ <h1>Highlight, then <em>act.</em></h1>
+ <p class="lede">A privacy-first MV3 Chrome extension that lets a Commerce Claw user highlight any text on any page — a customer name, an order number, an email — and run a connector action on it from a side panel. The companion piece to the chat surface inside the app.</p>
+
+ <h2>What it does · in one paragraph</h2>
+ <p>You're on a Yelp review page. You highlight the reviewer's name. The Commerce Claw extension icon glows. You click; a 320-px side panel slides in offering: <em>"Look up [name] in Stripe / HubSpot / Square — draft a reply — log to Notion."</em> You pick. The action runs through your existing Commerce Claw account, approval-gated like everywhere else. Nothing leaves your machine until you tap approve. The selection text never goes to any third-party LLM — only to <code>businessclaw.agentabrams.com</code> over HTTPS, with the same auth cookie you already have.</p>
+
+ <h2>Privacy & <em>permissions</em> posture</h2>
+ <table>
+ <thead><tr><th>What other "AI sidebar" extensions ask for</th><th>What Commerce Claw asks for</th></tr></thead>
+ <tbody>
+ <tr><td><code><all_urls></code> host permission</td><td><code>activeTab</code> only — granted per-click</td></tr>
+ <tr><td>Auto-injected content script on every site</td><td>Content script lazy-loaded only when user clicks the action button</td></tr>
+ <tr><td>"Read all your data on the websites you visit" warning</td><td>"See what's currently on the active tab when you click the extension" — the lightest possible warning</td></tr>
+ <tr><td>Background telemetry to vendor analytics</td><td>Zero. No analytics in the extension itself.</td></tr>
+ <tr><td>Selection text sent to OpenAI/Anthropic by extension</td><td>Selection sent only to <code>businessclaw.agentabrams.com</code> over fetch with credentials — same domain you'd already trust.</td></tr>
+ </tbody>
+ </table>
+
+ <div class="callout"><strong>Marketing positioning.</strong> This is the privacy claim that wins the listing. Most "AI assistant" extensions in the Chrome Web Store have <code><all_urls></code> + auto-content-script. Commerce Claw's version asks for <em>nothing</em> until the user clicks. That's the screenshot for the store listing.</div>
+
+ <h2>Manifest & <em>file structure</em></h2>
+ <div class="struct">
+ext/<br>
+├── <span class="a">manifest.json</span> <span class="dim">// MV3, minimal permissions</span><br>
+├── <span class="a">background.js</span> <span class="dim">// service worker, ~80 lines</span><br>
+├── <span class="a">sidepanel.html</span> <span class="dim">// the 320px panel</span><br>
+├── <span class="a">sidepanel.js</span> <span class="dim">// fetches /api/extension/actions</span><br>
+├── <span class="a">sidepanel.css</span> <span class="dim">// gold/charcoal palette inline</span><br>
+├── <span class="a">content.js</span> <span class="dim">// only injected on click; reads selection</span><br>
+├── icons/<br>
+│ ├── <span class="a">16.png</span> <span class="a">48.png</span> <span class="a">128.png</span> <span class="dim">// brand-gold C-dot logo</span><br>
+└── <span class="a">README.md</span> <span class="dim">// install + privacy notes</span>
+ </div>
+
+ <h2>manifest.json (v0.1)</h2>
+<pre><span class="k">{
+ "manifest_version"</span>: <span class="s">3</span>,
+ <span class="k">"name"</span>: <span class="s">"Commerce Claw"</span>,
+ <span class="k">"version"</span>: <span class="s">"0.1.0"</span>,
+ <span class="k">"description"</span>: <span class="s">"Highlight any text on any page · run an action across Stripe, Shopify, Slack, and 53 more."</span>,
+ <span class="k">"permissions"</span>: [<span class="s">"activeTab"</span>, <span class="s">"sidePanel"</span>, <span class="s">"storage"</span>],
+ <span class="k">"host_permissions"</span>: [<span class="s">"https://businessclaw.agentabrams.com/*"</span>],
+ <span class="k">"action"</span>: { <span class="k">"default_title"</span>: <span class="s">"Commerce Claw"</span>, <span class="k">"default_icon"</span>: { <span class="k">"16"</span>: <span class="s">"icons/16.png"</span> } },
+ <span class="k">"background"</span>: { <span class="k">"service_worker"</span>: <span class="s">"background.js"</span> },
+ <span class="k">"side_panel"</span>: { <span class="k">"default_path"</span>: <span class="s">"sidepanel.html"</span> },
+ <span class="k">"icons"</span>: { <span class="k">"16"</span>: <span class="s">"icons/16.png"</span>, <span class="k">"48"</span>: <span class="s">"icons/48.png"</span>, <span class="k">"128"</span>: <span class="s">"icons/128.png"</span> },
+ <span class="k">"content_security_policy"</span>: {
+ <span class="k">"extension_pages"</span>: <span class="s">"script-src 'self'; object-src 'self'; connect-src 'self' https://businessclaw.agentabrams.com"</span>
+ }
+}</pre>
+
+ <h2>Why this matters · five bullets</h2>
+ <ul>
+ <li><strong>Acquisition vector.</strong> Chrome Web Store is a discovery surface that doesn't depend on Commerce Claw's marketing-page SEO. A well-listed MV3 extension can pull 100–1,000 weekly installs without any homepage traffic.</li>
+ <li><strong>Distribution moat.</strong> Once installed, the extension is a daily-touch surface. Bardeen rode this all the way to a Series A.</li>
+ <li><strong>Trust artifact.</strong> A reviewable, open-source manifest with <em>activeTab only</em> is the easiest privacy proof a SaaS company can produce. Way more credible than a /security page.</li>
+ <li><strong>Workflow completion.</strong> Today, "I'm on Yelp and want to draft a reply" requires 4 tab switches. With this, it's 2 clicks.</li>
+ <li><strong>Owner-uploaded asset path.</strong> Per Steve's MEMORY, no stock images. The extension's icon is the existing gold C-dot — a 128×128 SVG → PNG export from the brand system already shipped.</li>
+ </ul>
+
+ <h2>The legal & technical <em>memo</em></h2>
+
+ <h3>1. Data flow</h3>
+ <p>User clicks extension → content script reads <code>window.getSelection()</code> + page <code>document.title</code> + <code>location.href</code> → posted to <code>POST https://businessclaw.agentabrams.com/api/extension/plan</code> with credentials → server returns proposed actions → user picks one → <code>POST /api/extension/run</code> with explicit approval → server runs the connector, returns audit ID → side panel shows result. <strong>Selection text never reaches any third-party origin from within the extension.</strong> The LLM call happens server-side, on credentials encrypted with AES-256-GCM, exactly like the chat surface.</p>
+
+ <h3>2. Host permissions justification (for Chrome Web Store review)</h3>
+ <p><code>activeTab</code> only. Triggered by the user clicking the extension icon — Chrome's <em>highest-trust</em> permission tier. No <code><all_urls></code>. No <code>tabs</code> permission. No background polling of any site.</p>
+
+ <h3>3. Retention</h3>
+ <p>Selection text is sent over HTTPS, processed for a single LLM call, and the audit row is stored with the same retention policy as in-app chat. Selection text is <em>not</em> kept in the audit row by default — only the connector action that executed. Configurable per-tenant.</p>
+
+ <h3>4. Mobile-friendliness</h3>
+ <p>Chrome on Android does not support extensions. Mobile equivalent is the existing <code>/chat</code> PWA — installable from Safari/Chrome via "Add to Home Screen." The PWA shares the same <code>/api/extension/plan</code> endpoint behind the scenes, so feature-parity is essentially free.</p>
+
+ <h3>5. Audit</h3>
+ <p>Every action originating from the extension carries a <code>source: "chrome-extension"</code> label in the audit log. Filterable in the admin dashboard. Combined with the existing audit trail, this means every connector action triggered through the extension is provably traceable to: (a) which extension version, (b) which user session, (c) which page URL the action came from, (d) approval timestamp.</p>
+
+ <h3>6. Threat model</h3>
+ <table>
+ <thead><tr><th>Threat</th><th>Mitigation</th></tr></thead>
+ <tbody>
+ <tr><td>Hostile webpage tries to trigger an action without user click</td><td>Content script only loaded after extension icon click. Page cannot inject a fake click programmatically due to <code>activeTab</code> trust gate.</td></tr>
+ <tr><td>Token theft via XSS in extension page</td><td>CSP <code>script-src 'self'</code>. No inline scripts. Token stored in <code>chrome.storage.local</code>, not <code>localStorage</code>, so not reachable from page-context scripts.</td></tr>
+ <tr><td>MITM between extension and businessclaw.agentabrams.com</td><td>HSTS-preload (already configured server-side) + CSP <code>connect-src</code> restricted to that one origin.</td></tr>
+ <tr><td>Malicious npm dependency</td><td>v0.1 ships with zero npm dependencies. Vanilla JS, ~400 lines total. Package only when essential.</td></tr>
+ <tr><td>Reviewer challenge on selection-text-sent-off-device</td><td>Privacy policy page documents the round-trip; selection sent only to first-party API. No third-party LLM endpoint.</td></tr>
+ </tbody>
+ </table>
+
+ <h3>7. v0.1 acceptance criteria</h3>
+ <ul>
+ <li>Installs from <code>chrome://extensions</code> in unpacked mode without warnings.</li>
+ <li>Click → side panel opens within 200ms.</li>
+ <li>Side panel shows: selected text (truncated 200 chars), 3-action menu (Look up / Draft reply / Log to Notion), Approve/Reject buttons.</li>
+ <li>"Approve" → action runs against the live Commerce Claw API, audit ID returned and displayed.</li>
+ <li>No console errors. No <code><all_urls></code> warning at install.</li>
+ <li>Bundle size < 50 KB (icons included).</li>
+ </ul>
+
+ <h3>8. Roadmap (post-v0.1)</h3>
+ <ul>
+ <li><strong>v0.2</strong> · Right-click context menu integration (<code>contextMenus</code> permission, additive).</li>
+ <li><strong>v0.3</strong> · Per-site profiles ("on Yelp, default to 'draft reply'") via <code>chrome.storage.sync</code>.</li>
+ <li><strong>v0.4</strong> · Firefox + Safari ports. Same manifest with provider-specific tweaks.</li>
+ <li><strong>v0.5</strong> · Recipe creation from extension: highlight → "save this as a recurring action" → recipe lands in dashboard.</li>
+ </ul>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Chrome Extension · 7 of 7. Back to <a href="index.html" style="color:var(--gold)">Audit Hub</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/hub.html b/runs/businessclaw-2026-05-05-2018/hub.html
new file mode 100644
index 0000000..5f0b427
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/hub.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Info Hub — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--bad:#c9856e;--warn:#d9b577;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}.nav a:hover,.nav .home{color:var(--gold)}
+main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 36px}
+h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 8px;border-top:1px solid var(--rule);padding-top:32px}
+h2 em{font-style:italic;color:var(--gold)}
+table{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}
+th,td{padding:11px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
+th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+td a{color:var(--gold);text-decoration:none}
+td a:hover{text-decoration:underline}
+td .sub{display:block;font-size:11px;color:var(--ink-mute);margin-top:3px}
+.tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 7px;border-radius:2px;background:var(--gold-soft);color:var(--gold);text-transform:uppercase}
+.tag.good{background:rgba(143,184,154,.16);color:var(--good)}
+.tag.warn{background:rgba(217,181,119,.16);color:var(--warn)}
+.tag.bad{background:rgba(201,133,110,.16);color:var(--bad)}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Info Hub · Section 06 of 07</div>
+ <h1>Authoritative sources for the <em>SaaS-automation</em> vertical.</h1>
+ <p class="lede">A curated directory of the standards, references, marketplaces, security guides, and SMB-policy pages that anyone building a 56-connector SaaS-automation tool should know about. Direct links to actual documents, not category homepages.</p>
+
+ <h2>Connector API references · <em>the 12 most-used</em></h2>
+ <table>
+ <thead><tr><th>Tool</th><th>Direct doc URL</th><th>Auth model</th><th>Webhook standard</th><th>Rate limit (entry tier)</th></tr></thead>
+ <tbody>
+ <tr><td>Stripe</td><td><a href="https://docs.stripe.com/api">docs.stripe.com/api</a><span class="sub">Best-in-class reference. Use as design north-star.</span></td><td>Bearer · restricted keys</td><td>Signed (HMAC SHA-256)</td><td>~100 r/s</td></tr>
+ <tr><td>Shopify</td><td><a href="https://shopify.dev/docs/api/admin">shopify.dev/docs/api/admin</a><span class="sub">REST + GraphQL. GraphQL preferred for new code.</span></td><td>OAuth · access tokens</td><td>Signed</td><td>2 r/s standard</td></tr>
+ <tr><td>Slack</td><td><a href="https://api.slack.com/methods">api.slack.com/methods</a></td><td>OAuth · bot tokens</td><td>Events API</td><td>Tier 2: 20 r/min</td></tr>
+ <tr><td>Notion</td><td><a href="https://developers.notion.com/reference/intro">developers.notion.com/reference</a></td><td>OAuth · internal-int tokens</td><td>None native (poll)</td><td>3 r/s avg</td></tr>
+ <tr><td>HubSpot</td><td><a href="https://developers.hubspot.com/docs/api/overview">developers.hubspot.com/docs/api</a></td><td>OAuth · private apps</td><td>Webhooks</td><td>100 r/10s</td></tr>
+ <tr><td>Discord</td><td><a href="https://discord.com/developers/docs/intro">discord.com/developers/docs</a></td><td>OAuth · bot tokens</td><td>Gateway WS + interactions</td><td>50 r/s global</td></tr>
+ <tr><td>Cloudflare</td><td><a href="https://developers.cloudflare.com/api/">developers.cloudflare.com/api</a></td><td>API tokens (scoped)</td><td>Notifications API</td><td>1,200 r/5min</td></tr>
+ <tr><td>Twilio</td><td><a href="https://www.twilio.com/docs/usage/api">twilio.com/docs/usage/api</a></td><td>Account SID + auth token</td><td>Webhooks</td><td>Messaging: 1 msg/s</td></tr>
+ <tr><td>SendGrid</td><td><a href="https://www.twilio.com/docs/sendgrid/api-reference">twilio.com/docs/sendgrid/api-reference</a></td><td>API keys</td><td>Event Webhook</td><td>600 r/min</td></tr>
+ <tr><td>Square</td><td><a href="https://developer.squareup.com/reference/square">developer.squareup.com/reference/square</a></td><td>OAuth · access tokens</td><td>Webhook subscriptions</td><td>10 r/s default</td></tr>
+ <tr><td>QuickBooks</td><td><a href="https://developer.intuit.com/app/developer/qbo/docs/api/accounting/all-entities/account">developer.intuit.com/app/developer/qbo/docs</a></td><td>OAuth 2.0</td><td>Webhooks (limited)</td><td>500 r/min</td></tr>
+ <tr><td>Calendly</td><td><a href="https://developer.calendly.com/api-docs">developer.calendly.com/api-docs</a></td><td>OAuth + PATs</td><td>Webhooks</td><td>1,000 r/hr</td></tr>
+ </tbody>
+ </table>
+ <p style="font-size:13px;color:var(--ink-mute)"><em>Verified against each provider's published docs. Confirm rate limits and auth scopes against current docs before shipping.</em></p>
+
+ <h2>Standards & <em>protocols</em> worth knowing</h2>
+ <table>
+ <thead><tr><th>Standard</th><th>What it is</th><th>Why Commerce Claw cares</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://datatracker.ietf.org/doc/html/rfc6749">OAuth 2.0 (RFC 6749)</a></td><td>Authorization framework</td><td>Default auth for ~80% of the 56 connectors. Implement once, support all.</td></tr>
+ <tr><td><a href="https://datatracker.ietf.org/doc/html/rfc7515">JWT (RFC 7515)</a></td><td>JSON Web Tokens</td><td>Used by Slack events, several others. Verify signatures correctly.</td></tr>
+ <tr><td><a href="https://www.w3.org/TR/webauthn-2/">WebAuthn (W3C)</a></td><td>Passwordless auth</td><td>Roadmap option for Commerce Claw login itself; reduce password attack surface.</td></tr>
+ <tr><td><a href="https://www.modelcontextprotocol.io/">Model Context Protocol</a></td><td>Anthropic's open standard for LLM↔tools</td><td>Long-term: ship Commerce Claw connectors as MCP servers. Future-proofs the routing layer.</td></tr>
+ <tr><td><a href="https://openapi.tools/">OpenAPI 3.x</a></td><td>API description format</td><td>Most modern connectors publish OpenAPI; auto-generate Commerce Claw routing schemas from it.</td></tr>
+ <tr><td><a href="https://www.iana.org/assignments/media-types/media-types.xhtml">IANA Media Types</a></td><td>Authoritative MIME registry</td><td>Correct content-type handling on file uploads across Drive/Box/Dropbox/OneDrive.</td></tr>
+ </tbody>
+ </table>
+
+ <h2>Security & <em>compliance</em> references</h2>
+ <table>
+ <thead><tr><th>Source</th><th>What's there</th><th>Status</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://owasp.org/www-project-top-ten/">OWASP Top 10</a></td><td>Web app vulnerability list (2021)</td><td><span class="tag good">required reading</span></td></tr>
+ <tr><td><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cryptographic_Storage_Cheat_Sheet.html">OWASP Cryptographic Storage Cheat Sheet</a></td><td>How to do AES-256-GCM correctly</td><td><span class="tag good">canonical</span></td></tr>
+ <tr><td><a href="https://csrc.nist.gov/pubs/sp/800/63/4/2pd">NIST SP 800-63B</a></td><td>Digital Identity Guidelines</td><td><span class="tag good">authority</span></td></tr>
+ <tr><td><a href="https://www.cisa.gov/secure-by-design">CISA · Secure by Design</a></td><td>Software security principles</td><td><span class="tag good">government baseline</span></td></tr>
+ <tr><td><a href="https://oag.ca.gov/privacy/ccpa">California CCPA / CPRA (CA AG)</a></td><td>Consumer-data law text + FAQs</td><td><span class="tag warn">applies if any CA user</span></td></tr>
+ <tr><td><a href="https://gdpr.eu/">GDPR (gdpr.eu)</a></td><td>EU regulation primer</td><td><span class="tag warn">applies if EU users</span></td></tr>
+ <tr><td><a href="https://content-security-policy.com/">CSP reference</a></td><td>Content-Security-Policy directives</td><td><span class="tag good">good</span></td></tr>
+ <tr><td><a href="https://hstspreload.org/">HSTS Preload</a></td><td>Submit domain for preload list</td><td><span class="tag good">submit when ready</span> · CC already meets criteria</td></tr>
+ <tr><td><a href="https://csrc.nist.gov/Projects/risk-management/sp800-53-controls/release-search">NIST SP 800-53</a></td><td>Security & privacy controls catalog</td><td><span class="tag warn">SOC 2 prep</span></td></tr>
+ </tbody>
+ </table>
+
+ <h2>SMB context · <em>who you're selling to</em></h2>
+ <table>
+ <thead><tr><th>Source</th><th>What's there</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://www.sba.gov/business-guide">SBA · Business Guide</a></td><td>Definitive US small-business categorization & resources. Use SBA size standards for "SMB" claims.</td></tr>
+ <tr><td><a href="https://www.census.gov/programs-surveys/susb.html">US Census · Statistics of US Businesses</a></td><td>Headcount & revenue distributions by industry — sizing math for your wedge.</td></tr>
+ <tr><td><a href="https://www.bls.gov/iag/tgs/iag00.htm">BLS · Industries at a Glance</a></td><td>Per-industry employment, wages, productivity. Build vertical packs from here.</td></tr>
+ <tr><td><a href="https://nfib.com/research/">NFIB Small Business Optimism Index</a></td><td>Monthly SMB sentiment data; useful for content + market timing claims.</td></tr>
+ <tr><td><a href="https://www.uschamber.com/small-business/start-a-business">US Chamber · Small Business Resources</a></td><td>Authoritative SMB content; useful linking out, less for in-product use.</td></tr>
+ </tbody>
+ </table>
+
+ <h2>Competitor docs & <em>marketplaces</em></h2>
+ <table>
+ <thead><tr><th>Source</th><th>What's there</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://zapier.com/apps">Zapier App Directory</a></td><td>~7,000 apps. Use as taxonomy reference; Commerce Claw's curated 56 should map cleanly.</td></tr>
+ <tr><td><a href="https://docs.n8n.io/integrations/builtin/app-nodes/">n8n nodes catalog</a></td><td>~400 open-source integration definitions. Reusable schema patterns.</td></tr>
+ <tr><td><a href="https://pipedream.com/apps">Pipedream apps</a></td><td>~2,500 apps + community-contributed components. SDK pattern reference.</td></tr>
+ <tr><td><a href="https://docs.bardeen.ai/">Bardeen docs</a></td><td>Closest UX peer. Borrow vocabulary ("playbook", "scraper", "trigger").</td></tr>
+ <tr><td><a href="https://www.make.com/en/integrations">Make integrations</a></td><td>Visual canvas paradigm reference.</td></tr>
+ </tbody>
+ </table>
+
+ <h2>SEO & <em>discoverability</em> tools</h2>
+ <table>
+ <thead><tr><th>Source</th><th>What's there</th><th>Why</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://search.google.com/search-console">Google Search Console</a></td><td>Crawl + indexation diagnostics</td><td>Verify domain, watch the login wall stop being the top page once mockup ships</td></tr>
+ <tr><td><a href="https://web.dev/measure/">web.dev Measure</a></td><td>Lighthouse on demand</td><td>Track perf as homepage grows beyond 4 KB</td></tr>
+ <tr><td><a href="https://search.google.com/test/rich-results">Rich Results Test</a></td><td>JSON-LD validation</td><td>CC's SoftwareApplication schema already passes; re-test as marketing pages added</td></tr>
+ <tr><td><a href="https://schema.org/SoftwareApplication">schema.org/SoftwareApplication</a></td><td>Schema reference</td><td>Already implemented on /login. Extend to per-connector pages.</td></tr>
+ <tr><td><a href="https://developers.google.com/search/docs/specialty/saas">Google · SaaS site SEO guide</a></td><td>Google's own SaaS SEO recommendations</td><td>Direct from the source</td></tr>
+ </tbody>
+ </table>
+
+ <h2>Privacy-first <em>analytics</em> options</h2>
+ <table>
+ <thead><tr><th>Tool</th><th>Mode</th><th>Why for CC</th></tr></thead>
+ <tbody>
+ <tr><td><a href="https://plausible.io/">Plausible</a></td><td>Hosted EU + self-host</td><td>No cookies, no PII, GDPR/CCPA-compliant by default. Light enough for the editorial brand.</td></tr>
+ <tr><td><a href="https://umami.is/">Umami</a></td><td>Self-host</td><td>Open-source. ~6 KB script. Fits CC's "small, restrained" aesthetic.</td></tr>
+ <tr><td><a href="https://posthog.com/">PostHog</a></td><td>Hosted + self-host</td><td>Heavier; only if Commerce Claw needs funnel/retention analytics on the product side.</td></tr>
+ <tr><td><a href="https://marketingplatform.google.com/about/analytics/">Google Analytics 4</a></td><td>Hosted</td><td>Steve already has 16 GA4 properties under accounts/371997142 — fits the existing fleet pattern. <span class="sub">Reference: <code>ga-analytics-agent/properties.json</code></span></td></tr>
+ </tbody>
+ </table>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Info Hub · 6 of 7. Next → <a href="extension.html" style="color:var(--gold)">Chrome Extension</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/mockups/01-editorial.html b/runs/businessclaw-2026-05-05-2018/mockups/01-editorial.html
new file mode 100644
index 0000000..33e61c9
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/mockups/01-editorial.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Mockup 01 · Editorial — Commerce Claw</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.12);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.08),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.05),transparent 65%);pointer-events:none;z-index:0}
+.banner{position:sticky;top:0;background:rgba(14,14,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);z-index:99}
+.banner a{color:var(--gold);text-decoration:none}
+.topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:30px 56px;border-bottom:1px solid var(--rule);max-width:1400px;margin:0 auto}
+.brand{display:flex;align-items:center;gap:14px}
+.logo-dot{width:30px;height:30px;border-radius:50%;background:var(--gold);position:relative}
+.logo-dot::after{content:"C";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bg);font-size:17px}
+.brand-name{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.005em;line-height:1}
+.brand-name em{font-style:italic;color:var(--gold)}
+.brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:5px}
+.topnav{display:flex;gap:32px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
+.topnav a{color:var(--ink-mute);text-decoration:none}.topnav a:hover{color:var(--gold)}
+.topnav .signin{color:var(--gold);border:1px solid var(--gold);padding:8px 16px;border-radius:2px}
+main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:24px 56px 96px}
+.issue-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rule);padding:14px 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:54px}
+.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;margin-bottom:96px;align-items:start}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
+.eyebrow::before{content:"";display:inline-block;width:24px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px;margin-bottom:3px}
+h1{font-family:var(--serif);font-weight:500;font-size:88px;line-height:.98;letter-spacing:-.025em;margin:0 0 28px}
+h1 em{font-style:italic;color:var(--gold)}
+.dek{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.45;color:var(--ink-soft);max-width:46ch}
+.byline{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-top:28px}
+.byline em{color:var(--gold);font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0}
+.hero-sidebar{position:sticky;top:96px;border-left:1px solid var(--rule);padding-left:32px}
+.toc{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
+.contents{display:flex;flex-direction:column;gap:14px}
+.contents a{color:var(--ink-soft);text-decoration:none;font-family:var(--serif);font-size:18px;line-height:1.3;border-bottom:1px solid transparent;padding-bottom:4px}
+.contents a:hover{color:var(--gold);border-color:var(--rule)}
+.contents .num{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:.18em;display:block;margin-bottom:2px}
+.feature{margin:96px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
+.feature .num{grid-column:1/3;font-family:var(--serif);font-style:italic;font-size:48px;color:var(--gold);line-height:1}
+.feature h2{grid-column:3/9;font-family:var(--serif);font-weight:500;font-size:42px;line-height:1.1;letter-spacing:-.01em;margin:0}
+.feature h2 em{font-style:italic;color:var(--gold)}
+.feature .body{grid-column:3/9;font-size:16px;line-height:1.75;color:var(--ink-soft)}
+.feature .body p{margin:14px 0}
+.feature .body p::first-letter{font-family:var(--serif);font-size:48px;font-style:italic;float:left;line-height:.85;margin:6px 8px 0 0;color:var(--gold)}
+.feature .aside{grid-column:9/13;border-left:1px solid var(--rule);padding:8px 0 8px 24px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink-soft)}
+.feature .aside .label{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-style:normal;display:block;margin-bottom:8px}
+.connector-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin:42px 0;padding:32px;border:1px solid var(--rule);background:var(--bg-card);border-radius:2px}
+.connector-grid .conn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:2px;background:rgba(244,241,234,.02);font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-mute);text-align:center;padding:6px;transition:border .15s,color .15s}
+.connector-grid .conn:hover{border-color:var(--gold);color:var(--gold)}
+.pull{font-family:var(--serif);font-style:italic;font-size:42px;line-height:1.25;color:var(--ink);max-width:24ch;margin:96px auto;text-align:center;padding:0 32px;position:relative}
+.pull::before,.pull::after{content:'"';font-size:120px;color:var(--gold);font-family:var(--serif);line-height:0;vertical-align:middle;opacity:.4}
+.pull::before{margin-right:12px}.pull::after{margin-left:12px}
+.cta-strip{margin:96px 0 0;padding:64px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
+.cta-strip h3{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1.1;margin:0 0 16px}
+.cta-strip h3 em{font-style:italic;color:var(--gold)}
+.cta-strip p{color:var(--ink-soft);margin:0 0 32px}
+.cta-form{display:flex;justify-content:center;gap:8px;max-width:520px;margin:0 auto}
+.cta-form input{flex:1;background:var(--bg-elevated);border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);font-size:13px;padding:14px 16px;border-radius:2px;outline:none}
+.cta-form input:focus{border-color:var(--gold)}
+.cta-form button{background:var(--gold);color:var(--bg);border:none;padding:14px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border-radius:2px;font-weight:500}
+footer{padding:56px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
+@media (max-width:780px){
+ .topbar,.banner{padding:14px 22px}main{padding:20px 22px 64px}h1{font-size:54px}.hero,.feature{grid-template-columns:1fr}.hero-sidebar{position:static;border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}.feature .num,.feature h2,.feature .body,.feature .aside{grid-column:1/-1}.feature .aside{border-left:0;border-top:1px solid var(--rule);padding:24px 0 0}.connector-grid{grid-template-columns:repeat(4,1fr)}.pull{font-size:28px}
+}
+</style></head>
+<body>
+<div class="banner">Mockup 01 · Editorial · concept variant for businessclaw.agentabrams.com — <a href="index.html">back to mockups</a></div>
+<div class="topbar">
+ <div class="brand">
+ <div class="logo-dot"></div>
+ <div><div class="brand-name">Commerce <em>Claw</em></div><div class="brand-sub">Connected Commerce</div></div>
+ </div>
+ <nav class="topnav"><a>Why</a><a>Connectors</a><a>Pricing</a><a>Docs</a><a class="signin">Sign in</a></nav>
+</div>
+<main>
+ <div class="issue-bar"><span>Vol. 01 · No. 01</span><span>May 2026</span><span>For the small business of one</span></div>
+
+ <section class="hero">
+ <div>
+ <div class="eyebrow">The Issue · Volume 01</div>
+ <h1>The <em>quiet</em> revolution in small business automation.</h1>
+ <p class="dek">An AI command line for fifty-six tools you already pay for. Built for owner-operators who'd rather not learn the word <em>"webhook."</em></p>
+ <p class="byline">A reading by <em>Commerce Claw</em> · 7 min · approval-gated · audit-trail every action</p>
+ </div>
+ <aside class="hero-sidebar">
+ <div class="toc">In this issue</div>
+ <div class="contents">
+ <a href="#essay"><span class="num">01 · Essay</span>Why automation tools failed small business — and what to fix</a>
+ <a href="#connectors"><span class="num">02 · Reference</span>The fifty-six tools, in alphabetical order</a>
+ <a href="#story"><span class="num">03 · Field note</span>One Saturday at a salon in Highland Park</a>
+ <a href="#trust"><span class="num">04 · Footnote</span>What "AES-256-GCM at rest" actually means</a>
+ <a href="#cta"><span class="num">05 · Subscribe</span>Get the next issue</a>
+ </div>
+ </aside>
+ </section>
+
+ <section class="feature" id="essay">
+ <div class="num">I.</div>
+ <h2>Zapier is for engineers. We are for the <em>person who owns the salon.</em></h2>
+ <div class="body">
+ <p>Workflow automation as a category was built by developers, for developers, and then awkwardly retrofitted for everyone else. The vocabulary is the giveaway: <em>zaps</em>, <em>webhooks</em>, <em>polling intervals</em>, <em>JSON path expressions</em>. None of these words are nouns the proprietor of a fourteen-chair barbershop has ever needed to say out loud.</p>
+ <p>Commerce Claw begins from the other end of the room. The interface is a sentence. <em>Refund the last three Stripe charges and post the names in Slack.</em> Underneath, a router that reads fifty-six connector schemas decides which APIs to call, in what order, and with what arguments — and pauses for your approval before any action that moves money or touches a customer. The result is something that finally answers the question Zapier never quite did: what does automation look like when the person operating it does not, and should not have to, write code?</p>
+ </div>
+ <div class="aside"><span class="label">In the margin</span>Half the small businesses we've spoken with have a Zapier account. Two of them have ever finished building a Zap.</div>
+ </section>
+
+ <section id="connectors">
+ <div class="eyebrow" style="text-align:center;margin:0 auto 12px;display:block">II · The Reference</div>
+ <h3 style="font-family:var(--serif);font-weight:500;font-size:42px;text-align:center;margin:0 0 8px">Fifty-six connectors. <em style="color:var(--gold);font-style:italic">All pre-wired.</em></h3>
+ <p style="text-align:center;color:var(--ink-mute);margin-bottom:18px">Curated, not exhaustive. The fifty-six tools small businesses actually use — not the seven-thousand they don't.</p>
+ <div class="connector-grid">
+ <div class="conn">Stripe</div><div class="conn">Shopify</div><div class="conn">Slack</div><div class="conn">Notion</div><div class="conn">HubSpot</div><div class="conn">Discord</div><div class="conn">Cloudflare</div><div class="conn">Google Sheets</div>
+ <div class="conn">Gmail</div><div class="conn">Calendar</div><div class="conn">Drive</div><div class="conn">Twilio</div><div class="conn">SendGrid</div><div class="conn">Mailchimp</div><div class="conn">Square</div><div class="conn">PayPal</div>
+ <div class="conn">QuickBooks</div><div class="conn">Xero</div><div class="conn">Airtable</div><div class="conn">Trello</div><div class="conn">Asana</div><div class="conn">Linear</div><div class="conn">GitHub</div><div class="conn">GitLab</div>
+ <div class="conn">Zendesk</div><div class="conn">Intercom</div><div class="conn">Front</div><div class="conn">Help Scout</div><div class="conn">Freshdesk</div><div class="conn">Salesforce</div><div class="conn">Pipedrive</div><div class="conn">Close</div>
+ <div class="conn">Calendly</div><div class="conn">Acuity</div><div class="conn">Cal.com</div><div class="conn">Zoom</div><div class="conn">Loom</div><div class="conn">Figma</div><div class="conn">Canva</div><div class="conn">Dropbox</div>
+ <div class="conn">Box</div><div class="conn">OneDrive</div><div class="conn">DocuSign</div><div class="conn">PandaDoc</div><div class="conn">Webflow</div><div class="conn">WordPress</div><div class="conn">Squarespace</div><div class="conn">Ghost</div>
+ <div class="conn">Yelp</div><div class="conn">Google Biz</div><div class="conn">Instagram</div><div class="conn">Facebook</div><div class="conn">LinkedIn</div><div class="conn">Twitter/X</div><div class="conn">TikTok</div><div class="conn">+ 1</div>
+ </div>
+ </section>
+
+ <p class="pull">There is a small business in Highland Park that closed for forty-seven minutes one Saturday because Yelp said yes and the calendar said no. We've been thinking about that all year.</p>
+
+ <section class="feature" id="trust">
+ <div class="num">IV.</div>
+ <h2>Every credential, every command, <em>encrypted at rest.</em></h2>
+ <div class="body">
+ <p>This sentence used to live on page sixteen of the security PDF. We're putting it on page one because it is the only thing that matters when an AI agent is allowed near your Stripe key. AES-256-GCM symmetric encryption on every connector credential, atomic write-and-fsync so a half-finished save never corrupts the store, and an immutable audit trail for every action the agent ever takes — sensitive ones gated behind your approval before execution. CSP, HSTS-preload, type-coerced session IDs. None of this is glamorous. All of it is required.</p>
+ </div>
+ <div class="aside"><span class="label">Footnote</span>If you cannot tell us what your automation tool does with your Stripe secret key, that's not a feature. That's a bug.</div>
+ </section>
+
+ <section class="cta-strip" id="cta">
+ <h3>Read the next <em>issue.</em></h3>
+ <p>Vol. 01 / No. 02 ships in two weeks. We'll let you know.</p>
+ <form class="cta-form" onsubmit="event.preventDefault();this.querySelector('button').textContent='Thank you'">
+ <input type="email" placeholder="email address" required>
+ <button type="submit">Subscribe</button>
+ </form>
+ </section>
+</main>
+<footer>Commerce Claw · A reading on connected commerce · businessclaw.agentabrams.com</footer>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/mockups/02-dashboard-screenshot.html b/runs/businessclaw-2026-05-05-2018/mockups/02-dashboard-screenshot.html
new file mode 100644
index 0000000..d340765
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/mockups/02-dashboard-screenshot.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Mockup 02 · Dashboard Screenshot — Commerce Claw</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+.banner{position:sticky;top:0;background:rgba(14,14,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);z-index:99}
+.banner a{color:var(--gold);text-decoration:none}
+.topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:24px 56px;border-bottom:1px solid var(--rule);max-width:1280px;margin:0 auto}
+.brand{display:flex;align-items:center;gap:14px}
+.logo-dot{width:28px;height:28px;border-radius:50%;background:var(--gold);position:relative}
+.logo-dot::after{content:"C";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bg);font-size:16px}
+.brand-name{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.005em;line-height:1}
+.brand-name em{font-style:italic;color:var(--gold)}
+.brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:5px}
+.topnav{display:flex;gap:28px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);align-items:center}
+.topnav a{color:var(--ink-mute);text-decoration:none}.topnav a:hover{color:var(--gold)}
+.topnav .signin{color:var(--gold);border:1px solid var(--gold);padding:8px 16px;border-radius:2px}
+.hero{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:48px 56px 24px;text-align:center}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+.hero h1{font-family:var(--serif);font-weight:500;font-size:74px;line-height:1.02;letter-spacing:-.025em;margin:0 auto 22px;max-width:18ch}
+.hero h1 em{font-style:italic;color:var(--gold)}
+.hero .dek{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink-soft);max-width:54ch;margin:0 auto 12px}
+.cta-row{display:flex;gap:10px;justify-content:center;margin:30px 0 6px;flex-wrap:wrap}
+.btn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 24px;border-radius:2px;text-decoration:none;display:inline-block;font-weight:500}
+.btn-pri{background:var(--gold);color:var(--bg)}
+.btn-sec{background:transparent;border:1px solid var(--rule);color:var(--ink-soft)}
+.demo-mark{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:12px}
+.shot-wrap{position:relative;z-index:1;max-width:1280px;margin:30px auto 0;padding:0 56px 56px}
+.shot{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--bg-elevated);box-shadow:0 60px 120px -40px rgba(0,0,0,.6),0 30px 60px -20px rgba(212,160,74,.08)}
+.shot-bar{height:34px;background:#1c1c22;display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid var(--rule)}
+.shot-bar .dot{width:9px;height:9px;border-radius:50%}
+.dot-r{background:#c9856e}.dot-y{background:#d9b577}.dot-g{background:#8fb89a}
+.shot-bar .url{flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-mute);letter-spacing:.06em}
+.shot-body{display:grid;grid-template-columns:240px 1fr;min-height:540px}
+.sidebar{border-right:1px solid var(--rule);padding:18px 14px;background:rgba(0,0,0,.18)}
+.sb-h{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:6px 0 10px;padding-left:8px}
+.conn-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;font-size:13px;font-family:var(--sans);color:var(--ink-soft)}
+.conn-row:hover{background:var(--bg-card)}
+.conn-row .icon{width:18px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:600;color:#fff}
+.icon.stripe{background:#635bff}.icon.shopify{background:#96bf48}.icon.slack{background:#4a154b}.icon.notion{background:#000;border:1px solid #444}.icon.hubspot{background:#ff7a59}.icon.discord{background:#5865f2}.icon.cf{background:#f48120}.icon.twilio{background:#f22f46}
+.conn-row .ok{margin-left:auto;color:var(--good);font-family:var(--mono);font-size:9px;letter-spacing:.16em}
+.chat{padding:24px 28px;display:flex;flex-direction:column;gap:14px;font-size:14px}
+.chat .you{align-self:flex-end;max-width:60%;background:var(--gold-soft);color:var(--ink);border:1px solid rgba(212,160,74,.3);padding:14px 18px;border-radius:8px 8px 2px 8px;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5}
+.chat .agent{max-width:75%;background:var(--bg-card);border:1px solid var(--rule);padding:18px 20px;border-radius:8px 8px 8px 2px;font-size:13px;color:var(--ink-soft);line-height:1.6}
+.exec{font-family:var(--mono);font-size:12px;color:var(--good);margin:6px 0;letter-spacing:.04em}
+.exec .arrow{color:var(--gold);margin-right:8px}
+.exec .check{color:var(--good);margin-left:8px}
+.audit{font-family:var(--mono);font-size:10px;color:var(--ink-mute);letter-spacing:.06em;margin-top:8px;padding-top:8px;border-top:1px dashed var(--rule)}
+.outcome{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold);margin-top:10px}
+.input-row{margin-top:auto;border:1px solid var(--rule);background:var(--bg-elevated);border-radius:30px;padding:12px 18px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-mute)}
+.input-row .send{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--bg);font-weight:600}
+.trust-row{position:relative;z-index:1;max-width:1280px;margin:64px auto;padding:0 56px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
+.trust{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);padding:24px}
+.trust .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px}
+.trust .val{font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:500;line-height:1.2}
+.trust .val em{font-style:italic;color:var(--gold)}
+.trust p{font-size:13px;color:var(--ink-mute);margin:8px 0 0;line-height:1.5}
+footer{padding:48px 56px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);border-top:1px solid var(--rule)}
+@media (max-width:780px){
+ .topbar,.banner,.hero,.shot-wrap,.trust-row{padding-left:22px;padding-right:22px}.hero h1{font-size:46px}.shot-body{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--rule)}.trust-row{grid-template-columns:1fr 1fr}.topnav{display:none}
+}
+</style></head>
+<body>
+<div class="banner">Mockup 02 · Dashboard Screenshot · concept variant for businessclaw.agentabrams.com — <a href="index.html">back to mockups</a></div>
+<div class="topbar">
+ <div class="brand"><div class="logo-dot"></div><div><div class="brand-name">Commerce <em>Claw</em></div><div class="brand-sub">Connected Commerce</div></div></div>
+ <nav class="topnav"><a>Why</a><a>Connectors</a><a>Pricing</a><a>Docs</a><a>Changelog</a><a class="signin">Sign in</a></nav>
+</div>
+
+<section class="hero">
+ <div class="eyebrow">— Live demo · no signup —</div>
+ <h1>Type a sentence. <em>Watch fifty-six tools</em> do the work.</h1>
+ <p class="dek">Commerce Claw is an AI command line for the SaaS stack a small business already pays for. Stripe, Shopify, Slack, Notion, HubSpot — fifty-six connectors, one chat box, every action approval-gated and audit-logged.</p>
+ <div class="cta-row">
+ <a class="btn btn-pri">Try the live demo</a>
+ <a class="btn btn-sec">View 56 connectors</a>
+ </div>
+ <div class="demo-mark">Demo · admin@businessclaw.local / admin</div>
+</section>
+
+<section class="shot-wrap">
+ <div class="shot">
+ <div class="shot-bar"><div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div><div class="url">commerceclaw.app/chat</div><div style="width:60px"></div></div>
+ <div class="shot-body">
+ <aside class="sidebar">
+ <div class="sb-h">Connected · 56</div>
+ <div class="conn-row"><div class="icon stripe">S</div>Stripe<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon shopify">S</div>Shopify<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon slack">S</div>Slack<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon notion">N</div>Notion<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon hubspot">H</div>HubSpot<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon discord">D</div>Discord<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon cf">C</div>Cloudflare<div class="ok">●</div></div>
+ <div class="conn-row"><div class="icon twilio">T</div>Twilio<div class="ok">●</div></div>
+ <div class="sb-h" style="margin-top:18px">+ 48 more</div>
+ </aside>
+ <div class="chat">
+ <div class="you">refund the last 3 stripe charges and post the customer names in #sales</div>
+ <div class="agent">
+ I'll need approval before refunding. Reviewing the last 3 charges:
+ <div class="exec"><span class="arrow">→</span>stripe.charges.list(limit=3)<span class="check">✓ 3 found · $487.20 total</span></div>
+ <div class="exec"><span class="arrow">→</span><span style="color:var(--gold)">⏸ awaiting approval</span> · refund 3 charges to Maya Chen, Jordan Park, Devon Liu</div>
+ <div style="display:flex;gap:8px;margin:8px 0"><span class="btn btn-pri" style="padding:6px 14px;font-size:9px">Approve</span><span class="btn btn-sec" style="padding:6px 14px;font-size:9px">Reject</span></div>
+ <div class="exec"><span class="arrow">→</span>stripe.refunds.create × 3<span class="check">✓ 312ms</span></div>
+ <div class="exec"><span class="arrow">→</span>slack.chat.postMessage(#sales)<span class="check">✓ delivered</span></div>
+ <div class="audit">audit.log · 8a3f2c91 · aes-256-gcm at rest · approver: you · 14:22:07 PT</div>
+ <div class="outcome">Done. $487.20 refunded across three charges, Slack notified.</div>
+ </div>
+ <div class="input-row"><span style="color:var(--gold)">></span>type a command across 56 connectors...<div class="send">↑</div></div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="trust-row">
+ <div class="trust"><div class="lbl">Encryption</div><div class="val"><em>AES-256-GCM</em><br>at rest</div><p>Every credential, every command, every audit row. Symmetric encryption with atomic write+fsync.</p></div>
+ <div class="trust"><div class="lbl">Approval gate</div><div class="val">Sensitive actions <em>pause</em></div><p>Money moves, customer emails, record deletes — all require your tap. Default-deny, not default-run.</p></div>
+ <div class="trust"><div class="lbl">Audit trail</div><div class="val">Every <em>action</em> logged</div><p>Immutable per-action log: input, plan, outcome, latency, approver. Exportable CSV. CCPA-ready.</p></div>
+ <div class="trust"><div class="lbl">Pricing</div><div class="val"><em>$0</em> for early users</div><p>Free during alpha. Paid tier in 2026 will be usage-based, never per-seat. Self-host roadmap published.</p></div>
+</section>
+
+<footer>Commerce Claw — businessclaw.agentabrams.com · status · contact · changelog · /security</footer>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/mockups/03-recipe-wall.html b/runs/businessclaw-2026-05-05-2018/mockups/03-recipe-wall.html
new file mode 100644
index 0000000..01a7b9f
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/mockups/03-recipe-wall.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Mockup 03 · SMB Recipe Wall — Commerce Claw</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+.banner{position:sticky;top:0;background:rgba(14,14,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);z-index:99}
+.banner a{color:var(--gold);text-decoration:none}
+.topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:24px 56px;border-bottom:1px solid var(--rule);max-width:1280px;margin:0 auto}
+.brand{display:flex;align-items:center;gap:14px}
+.logo-dot{width:28px;height:28px;border-radius:50%;background:var(--gold);position:relative}
+.logo-dot::after{content:"C";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bg);font-size:16px}
+.brand-name{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.005em;line-height:1}
+.brand-name em{font-style:italic;color:var(--gold)}
+.brand-sub{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-top:5px}
+.topnav{display:flex;gap:28px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);align-items:center}
+.topnav a{color:var(--ink-mute);text-decoration:none}.topnav a:hover{color:var(--gold)}
+.topnav .signin{color:var(--gold);border:1px solid var(--gold);padding:8px 16px;border-radius:2px}
+.hero{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:64px 56px 24px;text-align:center}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+.hero h1{font-family:var(--serif);font-weight:500;font-size:84px;line-height:1.0;letter-spacing:-.025em;margin:0 auto 22px;max-width:14ch}
+.hero h1 em{font-style:italic;color:var(--gold)}
+.hero .dek{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink-soft);max-width:54ch;margin:0 auto 6px}
+.vert-tabs{display:flex;justify-content:center;gap:6px;margin:36px auto 0;max-width:1100px;flex-wrap:wrap}
+.tab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-mute);cursor:pointer;background:var(--bg-card)}
+.tab.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:500}
+.tab:hover:not(.active){color:var(--gold);border-color:var(--gold)}
+.section-h{position:relative;z-index:1;max-width:1280px;margin:64px auto 24px;padding:0 56px;display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--rule);padding-bottom:18px}
+.section-h h2{font-family:var(--serif);font-weight:500;font-size:36px;margin:0;letter-spacing:-.005em}
+.section-h h2 em{font-style:italic;color:var(--gold)}
+.section-h .meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
+.recipe-grid{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
+.recipe{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);padding:24px;display:flex;flex-direction:column;gap:14px;transition:border .15s,transform .15s;cursor:pointer}
+.recipe:hover{border-color:var(--gold);transform:translateY(-2px)}
+.recipe .num{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
+.recipe h3{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;margin:0;letter-spacing:-.005em}
+.recipe h3 em{font-style:italic;color:var(--gold)}
+.recipe p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}
+.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
+.tool{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);background:var(--bg-elevated);border:1px solid var(--rule);padding:5px 9px;border-radius:2px}
+.tool .dot{width:8px;height:8px;border-radius:2px}
+.flow .arr{color:var(--gold)}
+.use{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-mute);margin-top:4px}
+.use em{color:var(--gold);font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:13px;margin-right:8px}
+.cta{position:relative;z-index:1;text-align:center;padding:80px 56px;max-width:1280px;margin:80px auto 0;border-top:1px solid var(--rule)}
+.cta h3{font-family:var(--serif);font-weight:500;font-size:48px;margin:0 0 16px;line-height:1.1}
+.cta h3 em{font-style:italic;color:var(--gold)}
+.cta p{color:var(--ink-soft);margin:0 0 24px}
+.btn-pri{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 28px;border-radius:2px;background:var(--gold);color:var(--bg);text-decoration:none;font-weight:500;display:inline-block}
+footer{padding:48px 56px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);border-top:1px solid var(--rule)}
+@media (max-width:980px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
+@media (max-width:680px){.topbar,.banner,.hero,.section-h,.recipe-grid,.cta,footer{padding-left:22px;padding-right:22px}.hero h1{font-size:48px}.recipe-grid{grid-template-columns:1fr}.topnav{display:none}}
+</style></head>
+<body>
+<div class="banner">Mockup 03 · SMB Recipe Wall · concept variant for businessclaw.agentabrams.com — <a href="index.html">back to mockups</a></div>
+<div class="topbar">
+ <div class="brand"><div class="logo-dot"></div><div><div class="brand-name">Commerce <em>Claw</em></div><div class="brand-sub">Connected Commerce</div></div></div>
+ <nav class="topnav"><a>Recipes</a><a>Connectors</a><a>Pricing</a><a>Docs</a><a class="signin">Sign in</a></nav>
+</div>
+
+<section class="hero">
+ <div class="eyebrow">— Pre-built for thirty SMB verticals —</div>
+ <h1>Five <em>recipes</em> for your trade.</h1>
+ <p class="dek">Pick the kind of business you run. Get a hand-built pack of automation recipes that already work — across the SaaS tools you already pay for. No zaps to build. No webhooks to debug.</p>
+ <div class="vert-tabs">
+ <span class="tab active">Salons</span>
+ <span class="tab">Restaurants</span>
+ <span class="tab">Trades</span>
+ <span class="tab">Retail</span>
+ <span class="tab">Studios</span>
+ <span class="tab">Agencies</span>
+ <span class="tab">+ 24 more</span>
+ </div>
+</section>
+
+<div class="section-h">
+ <h2>For your <em>salon.</em></h2>
+ <div class="meta">5 recipes · all approval-gated · all reversible</div>
+</div>
+
+<section class="recipe-grid">
+ <div class="recipe">
+ <div class="num">Recipe 01</div>
+ <h3>The <em>no-show</em> charge.</h3>
+ <p>Client doesn't show within 15 minutes of their slot. Card-on-file is charged a fee, the client gets an apology-toned SMS, and your books are updated.</p>
+ <div class="flow">
+ <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#635bff"></span>Stripe</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#f22f46"></span>Twilio</span>
+ </div>
+ <div class="use"><em>Saves</em>~3 hours/week of front-desk follow-up</div>
+ </div>
+
+ <div class="recipe">
+ <div class="num">Recipe 02</div>
+ <h3>The <em>review reply</em> draft.</h3>
+ <p>New review on Yelp or Google. Drafts a tone-matched reply for your approval, posts when you say go, and notes any patterns across reviews this month.</p>
+ <div class="flow">
+ <span class="tool"><span class="dot" style="background:#d32323"></span>Yelp</span>
+ <span class="tool"><span class="dot" style="background:#4285f4"></span>Google Biz</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#000"></span>Notion</span>
+ </div>
+ <div class="use"><em>Replaces</em>$300/mo Birdeye / Podium subscription</div>
+ </div>
+
+ <div class="recipe">
+ <div class="num">Recipe 03</div>
+ <h3>The <em>birthday</em> SMS.</h3>
+ <p>Anyone with a Square profile birthday this week gets a short, warm SMS with a $15 service credit. Approve the list once; the agent sends across the week.</p>
+ <div class="flow">
+ <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#f22f46"></span>Twilio</span>
+ </div>
+ <div class="use"><em>Lifts</em>repeat-visit rate ~6% (early users)</div>
+ </div>
+
+ <div class="recipe">
+ <div class="num">Recipe 04</div>
+ <h3>The <em>inventory</em> watch.</h3>
+ <p>When any retail SKU drops below your threshold, the agent emails the supplier with a draft PO, posts in Slack, and waits for your approval before sending.</p>
+ <div class="flow">
+ <span class="tool"><span class="dot" style="background:#000"></span>Square</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#4a154b"></span>Slack</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#ea4335"></span>Gmail</span>
+ </div>
+ <div class="use"><em>Catches</em>stockouts before clients notice</div>
+ </div>
+
+ <div class="recipe">
+ <div class="num">Recipe 05</div>
+ <h3>The <em>weekly close.</em></h3>
+ <p>Every Sunday night, the agent compiles bookings, deposits, no-shows, retail sales, and tips by stylist into one Google Sheet for your bookkeeper.</p>
+ <div class="flow">
+ <span class="tool"><span class="dot" style="background:#000"></span>Square</span>
+ <span class="tool"><span class="dot" style="background:#635bff"></span>Stripe</span><span class="arr">→</span>
+ <span class="tool"><span class="dot" style="background:#0f9d58"></span>Sheets</span>
+ </div>
+ <div class="use"><em>Cuts</em>2 hours of Sunday-night close work</div>
+ </div>
+
+ <div class="recipe" style="border-style:dashed;border-color:var(--gold)">
+ <div class="num" style="color:var(--gold)">+ Custom</div>
+ <h3>Build your <em>own.</em></h3>
+ <p>Type a sentence in the chat. The agent maps your tools, drafts the recipe, and asks for your approval before running it for the first time.</p>
+ <div class="flow"><span class="tool" style="border-color:var(--gold);color:var(--gold)">your tools</span><span class="arr">→</span><span class="tool" style="border-color:var(--gold);color:var(--gold)">your sentence</span></div>
+ <div class="use"><em>Time to first run</em>~ 90 seconds</div>
+ </div>
+</section>
+
+<section class="cta">
+ <h3>Pick a trade. <em>Get five recipes.</em> Try the demo in ninety seconds.</h3>
+ <p>Free during alpha. Fifty-six connectors. Every action approval-gated. AES-256-GCM at rest.</p>
+ <a class="btn-pri">Try the live demo</a>
+</section>
+
+<footer>Commerce Claw — businessclaw.agentabrams.com · 30 verticals · 5 recipes each · 56 connectors</footer>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/mockups/index.html b/runs/businessclaw-2026-05-05-2018/mockups/index.html
new file mode 100644
index 0000000..9ffb338
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/mockups/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Mockups — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+main{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 32px}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}.nav a:hover,.nav .home{color:var(--gold)}
+.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;margin:24px 0}
+.card{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .2s}
+.card:hover{border-color:var(--gold)}
+.card .pic{aspect-ratio:16/10;border-bottom:1px solid var(--rule);overflow:hidden;position:relative}
+.card .pic svg{width:100%;height:100%}
+.card .body{padding:22px 24px}
+.card .num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold);margin-bottom:6px}
+.card h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:0 0 8px;letter-spacing:-.005em}
+.card p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 8px}
+.card .meta{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="../index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="../report.html">Audit</a>
+ <a href="../peers.html">Peers</a>
+ <a href="../competitors.html">Competitors</a>
+ <a href="index.html">Mockups</a>
+ <a href="../tools.html">Tools</a>
+ <a href="../hub.html">Info Hub</a>
+ <a href="../extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Mockups · Section 04 of 07</div>
+ <h1>Three different ways the homepage <em>could</em> exist.</h1>
+ <p class="lede">Each of these is a distinct aesthetic direction — not three skins of the same template. They're hand-built to test where the brand can stretch. Variant 01 is the safest pick for shipping next week; variant 03 is the most distinctive; variant 02 is the one that proves the technical surface to a skeptical buyer.</p>
+
+ <div class="cards">
+ <a class="card" href="01-editorial.html">
+ <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#0e0e10"/><stop offset="1" stop-color="#16161a"/></linearGradient></defs><rect width="320" height="200" fill="url(#g1)"/><rect x="20" y="14" width="280" height="1" fill="#2a2a30"/><circle cx="32" cy="9" r="3" fill="#d4a04a"/><text x="40" y="11" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="6" font-style="italic">Commerce Claw</text><text x="20" y="60" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="22" font-style="italic">An <tspan fill="#d4a04a">editorial</tspan> for</text><text x="20" y="86" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="22" font-style="italic">small business.</text><line x1="20" y1="100" x2="60" y2="100" stroke="#d4a04a" stroke-width=".7"/><text x="20" y="116" fill="#aaa" font-family="Inter" font-size="6">A long-form magazine of automation, written</text><text x="20" y="124" fill="#aaa" font-family="Inter" font-size="6">while Stripe is being refunded in the background.</text><rect x="20" y="138" width="40" height="12" rx="1" fill="#d4a04a"/><text x="40" y="146" fill="#0e0e10" text-anchor="middle" font-family="Inter" font-size="5" font-weight="600">READ</text><rect x="68" y="138" width="40" height="12" rx="1" fill="none" stroke="#d4a04a"/><text x="88" y="146" fill="#d4a04a" text-anchor="middle" font-family="Inter" font-size="5">SIGN IN</text><g opacity=".6"><rect x="180" y="40" width="120" height="120" fill="#1a1a1f" stroke="#2a2a30"/><text x="240" y="100" text-anchor="middle" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="9">"the issue"</text><text x="240" y="115" text-anchor="middle" fill="#888" font-family="JetBrains Mono" font-size="4" letter-spacing="1">VOL. 01 · MAY 2026</text></g></svg></div>
+ <div class="body">
+ <div class="num">Variant 01</div>
+ <h3>Editorial · The Magazine</h3>
+ <p>Commerce Claw as a literary quarterly that happens to ship a product. Cormorant headlines, drop caps, pull quotes. The product surface is one panel inside a longer essay-style page about <em>why</em> small business automation matters.</p>
+ <div class="meta">SAFEST PICK · 5-7 day build · referenced peer: Workato</div>
+ </div>
+ </a>
+
+ <a class="card" href="02-dashboard-screenshot.html">
+ <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><rect width="320" height="200" fill="#0e0e10"/><rect x="14" y="22" width="290" height="160" rx="4" fill="#16161a" stroke="#2a2a30"/><rect x="14" y="22" width="290" height="20" rx="4" fill="#1c1c22"/><circle cx="22" cy="32" r="2" fill="#c9856e"/><circle cx="30" cy="32" r="2" fill="#d9b577"/><circle cx="38" cy="32" r="2" fill="#8fb89a"/><text x="160" y="35" text-anchor="middle" fill="#aaa" font-family="JetBrains Mono" font-size="5">commerceclaw.app/chat</text><rect x="20" y="50" width="100" height="124" rx="2" fill="#0e0e10" stroke="#2a2a30"/><text x="28" y="62" fill="#888" font-family="JetBrains Mono" font-size="4">CONNECTORS · 56</text><g><rect x="28" y="68" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="73" r="2" fill="#635bff"/><text x="40" y="75" fill="#f4f1ea" font-family="Inter" font-size="4">Stripe</text><circle cx="100" cy="73" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="80" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="85" r="2" fill="#96bf48"/><text x="40" y="87" fill="#f4f1ea" font-family="Inter" font-size="4">Shopify</text><circle cx="100" cy="85" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="92" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="97" r="2" fill="#4a154b"/><text x="40" y="99" fill="#f4f1ea" font-family="Inter" font-size="4">Slack</text><circle cx="100" cy="97" r="1.5" fill="#8fb89a"/></g><g><rect x="28" y="104" width="84" height="10" rx="1" fill="#1a1a20"/><circle cx="34" cy="109" r="2" fill="#000"/><text x="40" y="111" fill="#f4f1ea" font-family="Inter" font-size="4">Notion</text><circle cx="100" cy="109" r="1.5" fill="#8fb89a"/></g><rect x="124" y="50" width="170" height="100" rx="2" fill="#0e0e10" stroke="#2a2a30"/><text x="132" y="62" fill="#d4a04a" font-family="JetBrains Mono" font-size="4">CHAT · ></text><rect x="132" y="68" width="154" height="14" rx="1" fill="#1a1a20"/><text x="138" y="77" fill="#f4f1ea" font-family="Inter" font-size="4" font-style="italic">"refund the last 3 stripe charges and post in #sales"</text><rect x="132" y="86" width="154" height="50" rx="1" fill="#0a0a0c" stroke="#1a1a20"/><text x="138" y="95" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ stripe.refund(ch_*) ✓ 3/3</text><text x="138" y="103" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ slack.post(#sales) ✓ delivered</text><text x="138" y="111" fill="#8fb89a" font-family="JetBrains Mono" font-size="3.5">→ audit.log(8a3f...) ✓ aes-256-gcm</text><text x="138" y="125" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="6">done · 312ms · approved by you</text><rect x="124" y="156" width="170" height="20" rx="2" fill="#1c1c22"/><text x="132" y="168" fill="#aaa" font-family="JetBrains Mono" font-size="4">type a command...</text><circle cx="288" cy="166" r="4" fill="#d4a04a"/></svg></div>
+ <div class="body">
+ <div class="num">Variant 02</div>
+ <h3>Dashboard Screenshot Story</h3>
+ <p>The whole page is the app, captured. Hero is a perfect-pixel shot of the chat surface mid-execution: prompt typed, three connector calls completing, audit-trail line scrolling. No marketing copy until the scroll.</p>
+ <div class="meta">PROVES THE SURFACE · 3-day build if you have a screenshot · referenced peer: Pipedream</div>
+ </div>
+ </a>
+
+ <a class="card" href="03-recipe-wall.html">
+ <div class="pic"><svg viewBox="0 0 320 200" xmlns="http://www.w3.org/2000/svg"><rect width="320" height="200" fill="#0e0e10"/><text x="160" y="22" text-anchor="middle" fill="#f4f1ea" font-family="Cormorant Garamond" font-size="14" font-style="italic">For your <tspan fill="#d4a04a">salon</tspan>.</text><text x="160" y="33" text-anchor="middle" fill="#aaa" font-family="JetBrains Mono" font-size="4" letter-spacing="2">5 RECIPES · 1 CHAT · ZERO ZAPS</text><g><rect x="14" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="20" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 01</text><text x="20" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">No-show charge</text><text x="20" y="80" fill="#aaa" font-family="Inter" font-size="4">Square → Stripe → Twilio</text></g><g><rect x="114" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="120" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 02</text><text x="120" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Review reply</text><text x="120" y="80" fill="#aaa" font-family="Inter" font-size="4">Yelp + Google → drafts</text></g><g><rect x="214" y="44" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="220" y="56" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 03</text><text x="220" y="68" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Birthday SMS</text><text x="220" y="80" fill="#aaa" font-family="Inter" font-size="4">Square → Twilio</text></g><g><rect x="14" y="98" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="20" y="110" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 04</text><text x="20" y="122" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Inventory low</text><text x="20" y="134" fill="#aaa" font-family="Inter" font-size="4">Square → Slack + email</text></g><g><rect x="114" y="98" width="92" height="46" rx="2" fill="#1a1a1f" stroke="#2a2a30"/><text x="120" y="110" fill="#d4a04a" font-family="JetBrains Mono" font-size="3.5">RECIPE 05</text><text x="120" y="122" fill="#f4f1ea" font-family="Cormorant Garamond" font-style="italic" font-size="9">Weekly close</text><text x="120" y="134" fill="#aaa" font-family="Inter" font-size="4">Stripe + Square → Sheets</text></g><g><rect x="214" y="98" width="92" height="46" rx="2" fill="none" stroke="#d4a04a" stroke-dasharray="2,2"/><text x="260" y="123" text-anchor="middle" fill="#d4a04a" font-family="Cormorant Garamond" font-style="italic" font-size="9">+ your own</text></g><text x="160" y="170" text-anchor="middle" fill="#aaa" font-family="Inter" font-size="5">Browse recipes by trade · <tspan fill="#d4a04a">restaurants</tspan> · <tspan fill="#d4a04a">trades</tspan> · <tspan fill="#d4a04a">studios</tspan> · 27 more</text></svg></div>
+ <div class="body">
+ <div class="num">Variant 03</div>
+ <h3>SMB Recipe Wall</h3>
+ <p>The homepage is a visual library of pre-built automation recipes, organized by SMB vertical (salon, restaurant, trades, studios, agencies, retail…). The page <em>is</em> the SEO surface — every card becomes a programmatic landing page.</p>
+ <div class="meta">MOST DEFENSIBLE LONG TERM · 10-14 day build · referenced peer: Zapier templates section, but inverted (vertical-first not tool-first)</div>
+ </div>
+ </a>
+ </div>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Mockups · 4 of 7. Next → <a href="../tools.html" style="color:var(--gold)">Tools Pack</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/peers.html b/runs/businessclaw-2026-05-05-2018/peers.html
new file mode 100644
index 0000000..bbab1ab
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/peers.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Peer Survey — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--ink-faint:rgba(244,241,234,.30);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--warn:#d9b577;--bad:#c9856e;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.04),transparent 65%);pointer-events:none;z-index:0}
+main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 18px;border-top:1px solid var(--rule);padding-top:32px}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 28px}
+p,li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}
+.nav a:hover,.nav .home{color:var(--gold)}
+.peer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin:28px 0}
+.peer{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);overflow:hidden;display:flex;flex-direction:column}
+.peer .shot{aspect-ratio:16/10;background:linear-gradient(135deg,#1a1a1f,#0e0e10);position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
+.peer .shot svg{position:absolute;inset:0;width:100%;height:100%}
+.peer .body{padding:20px 22px}
+.peer h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:0 0 4px;color:var(--ink)}
+.peer .url{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-mute);margin-bottom:14px;text-transform:lowercase}
+.peer .borrow{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:14px 0 6px}
+.peer p{font-size:14px;margin:0 0 8px;color:var(--ink-soft);line-height:1.65}
+.matrix{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}
+.matrix th,.matrix td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left}
+.matrix th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+.matrix .y{color:var(--good)}.matrix .n{color:var(--bad);opacity:.6}
+.callout{border-left:2px solid var(--gold);background:var(--gold-soft);padding:18px 22px;margin:24px 0}
+.callout strong{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Peer Survey · Section 02 of 07</div>
+ <h1>Eight automation tools that <em>have</em> homepages.</h1>
+ <p class="lede">A survey of how the established peers in workflow-automation present themselves at the door — what each one does well, and the single UX move from each that Commerce Claw should consider borrowing. Mockups in the next section pull from this menu.</p>
+
+ <div class="peer-grid">
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0c0c0e"/><rect x="0" y="0" width="160" height="14" fill="#16161a"/><circle cx="8" cy="7" r="2" fill="#ff6d3b"/><rect x="14" y="22" width="60" height="6" rx="1" fill="#ffe8d7"/><rect x="14" y="32" width="100" height="3" rx="1" fill="#888"/><rect x="14" y="38" width="80" height="3" rx="1" fill="#666"/><rect x="14" y="50" width="32" height="10" rx="2" fill="#ff6d3b"/><rect x="50" y="50" width="32" height="10" rx="2" fill="none" stroke="#ff6d3b"/><g><rect x="14" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="38" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="62" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="86" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="110" y="68" width="22" height="22" rx="3" fill="#1f1f24"/><rect x="134" y="68" width="22" height="22" rx="3" fill="#1f1f24"/></g></svg></div>
+ <div class="body">
+ <h3>Zapier</h3>
+ <div class="url">zapier.com</div>
+ <p>The market-defining homepage for workflow automation: hero claim ("Automate without limits"), then immediately a typeable "Connect <em>X</em> with <em>Y</em>" search field that returns suggested workflows.</p>
+ <div class="borrow">Borrow this</div>
+ <p>The <strong>Connect-X-with-Y typeable hero</strong>. Stripe + Slack autofills "When a Stripe payment succeeds, post to Slack." That single UI element does positioning, demo, and SEO routing in one.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0a0c10"/><rect x="0" y="0" width="160" height="14" fill="#10141a"/><circle cx="8" cy="7" r="2" fill="#ea4b71"/><rect x="14" y="20" width="56" height="5" rx="1" fill="#ea4b71"/><rect x="14" y="30" width="120" height="4" rx="1" fill="#cfe"/><rect x="14" y="38" width="100" height="4" rx="1" fill="#9ad"/><g stroke="#ea4b71" stroke-width=".5" fill="none"><rect x="20" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><rect x="68" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><rect x="116" y="58" width="22" height="14" rx="2" fill="#1a1f28"/><line x1="42" y1="65" x2="68" y2="65"/><line x1="90" y1="65" x2="116" y2="65"/></g><circle cx="31" cy="65" r="2" fill="#ea4b71"/><circle cx="79" cy="65" r="2" fill="#ea4b71"/><circle cx="127" cy="65" r="2" fill="#ea4b71"/><rect x="14" y="84" width="40" height="8" rx="2" fill="#ea4b71"/></svg></div>
+ <div class="body">
+ <h3>n8n</h3>
+ <div class="url">n8n.io</div>
+ <p>Open-source, self-hostable, fair-code license. Homepage hero is a live, animated workflow canvas — three nodes, drawn arrows, looping execution dots. You watch automation happen.</p>
+ <div class="borrow">Borrow this</div>
+ <p>The <strong>animated workflow canvas above the fold.</strong> No video file, no autoplay-blocked-by-Safari issue — it's CSS+SVG looping forever. Costs nothing to host, communicates everything.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0e1014"/><rect x="0" y="0" width="160" height="14" fill="#13161c"/><rect x="14" y="22" width="80" height="6" rx="1" fill="#3eb489"/><rect x="14" y="34" width="120" height="3" rx="1" fill="#aaa"/><rect x="14" y="40" width="90" height="3" rx="1" fill="#888"/><g font-family="monospace" font-size="3" fill="#3eb489"><text x="14" y="56">$ pd run --trigger=stripe.charge.succeeded</text><text x="14" y="62"> → slack.notify(#sales)</text><text x="14" y="68"> → notion.create(page)</text><text x="14" y="74">✓ executed in 312ms</text></g><rect x="14" y="84" width="34" height="8" rx="2" fill="#3eb489"/></svg></div>
+ <div class="body">
+ <h3>Pipedream</h3>
+ <div class="url">pipedream.com</div>
+ <p>Developer-first, code-anywhere-in-the-flow. Homepage shows a <em>terminal-style execution log</em> — real input event, real transforms, real output, real timing.</p>
+ <div class="borrow">Borrow this</div>
+ <p>The <strong>terminal log of a real run</strong>. For an audience that has been burned by no-code black boxes, "here is the literal trace of an event flowing through" is the most credible artifact you can show. Mockup variant 06 is built on this.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#1a1a2e"/><rect x="0" y="0" width="160" height="14" fill="#1f1f3a"/><rect x="14" y="22" width="70" height="6" rx="1" fill="#7659e0"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#ddd"/><circle cx="40" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><circle cx="80" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><circle cx="120" cy="60" r="14" fill="#1f1f3a" stroke="#7659e0"/><line x1="54" y1="60" x2="66" y2="60" stroke="#7659e0" stroke-width=".7"/><line x1="94" y1="60" x2="106" y2="60" stroke="#7659e0" stroke-width=".7"/><rect x="14" y="84" width="40" height="8" rx="2" fill="#7659e0"/></svg></div>
+ <div class="body">
+ <h3>Make (Integromat)</h3>
+ <div class="url">make.com</div>
+ <p>Visual canvas + colorful node-circles. Hero focuses on "no-code" and the visual canvas. Pricing prominently above the fold — operations-based, not seats-based.</p>
+ <div class="borrow">Borrow this</div>
+ <p><strong>Pricing above the fold</strong>. SaaS buyers will scroll for it; putting it visible signals you're not embarrassed by the number. Commerce Claw's number is currently $0 — say it.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0d0d12"/><rect x="0" y="0" width="160" height="14" fill="#15151c"/><rect x="14" y="22" width="80" height="6" rx="1" fill="#52e3a4"/><rect x="14" y="32" width="120" height="3" rx="1" fill="#aaa"/><g><rect x="14" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="38" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="62" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="86" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="110" y="46" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="14" y="70" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="38" y="70" width="20" height="20" rx="3" fill="#1c1c24"/><rect x="62" y="70" width="20" height="20" rx="3" fill="#1c1c24"/></g></svg></div>
+ <div class="body">
+ <h3>Tray.io</h3>
+ <div class="url">tray.io</div>
+ <p>Enterprise-flavored. Hero leads with logos of buyers (IBM, Cisco, Adobe). Section called "Connectors" shows a 8×4 grid with hover-glow.</p>
+ <div class="borrow">Borrow this</div>
+ <p><strong>The 8×4 logo grid</strong> as the second-fold section. Commerce Claw has 56 connectors — that's a 7×8 grid. Use simpleicons.org (already CSP-allowed) so each logo is a 1.2KB SVG, not an asset request hellscape.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#1c1c1c"/><rect x="0" y="0" width="160" height="14" fill="#262626"/><rect x="14" y="22" width="60" height="6" rx="1" fill="#33ccff"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#bbb"/><g><rect x="14" y="44" width="80" height="36" rx="2" fill="#262626"/><circle cx="24" cy="54" r="3" fill="#33ccff"/><rect x="32" y="52" width="50" height="3" fill="#888"/><circle cx="24" cy="64" r="3" fill="#33ccff"/><rect x="32" y="62" width="44" height="3" fill="#888"/><circle cx="24" cy="74" r="3" fill="#33ccff"/><rect x="32" y="72" width="36" height="3" fill="#888"/></g><rect x="100" y="44" width="46" height="36" rx="2" fill="#262626"/><circle cx="123" cy="62" r="9" fill="#33ccff"/></svg></div>
+ <div class="body">
+ <h3>IFTTT</h3>
+ <div class="url">ifttt.com</div>
+ <p>The OG. Headline is still "Every thing works better together" — never moved off it. Hero is a giant "If <em>this</em> then <em>that</em>" plain-English builder.</p>
+ <div class="borrow">Borrow this</div>
+ <p><strong>The plain-English sentence-builder</strong>. "When [Stripe charge succeeds] then [post to Slack]" reads at the 8th-grade level a Yelp-comparison SMB owner expects. Don't make them learn the word "webhook."</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#fdfcf9"/><rect x="0" y="0" width="160" height="14" fill="#fff"/><rect x="14" y="22" width="86" height="6" rx="1" fill="#1a1a1a"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#888"/><g><rect x="14" y="46" width="58" height="40" rx="2" fill="#f6f3ec"/><rect x="22" y="56" width="42" height="3" fill="#444"/><rect x="22" y="64" width="36" height="2" fill="#888"/><rect x="22" y="74" width="28" height="6" rx="1" fill="#1a1a1a"/></g><g><rect x="80" y="46" width="58" height="40" rx="2" fill="#f6f3ec"/><rect x="88" y="56" width="42" height="3" fill="#444"/><rect x="88" y="64" width="40" height="2" fill="#888"/><rect x="88" y="74" width="28" height="6" rx="1" fill="#1a1a1a"/></g></svg></div>
+ <div class="body">
+ <h3>Workato</h3>
+ <div class="url">workato.com</div>
+ <p>Light-mode, enterprise. Editorial typography (close to Cormorant in spirit). Highly testimonial-driven — quotes from CIOs, not engineers.</p>
+ <div class="borrow">Borrow this</div>
+ <p><strong>One large pull-quote at the third fold</strong>. Cormorant italic 28px, named SMB customer once you have one. For now, ship the quote slot empty-but-sized so the design doesn't reflow when you fill it.</p>
+ </div>
+ </div>
+
+ <div class="peer">
+ <div class="shot"><svg viewBox="0 0 160 100" preserveAspectRatio="xMidYMid slice"><rect width="160" height="100" fill="#0f0f1a"/><rect x="0" y="0" width="160" height="14" fill="#171723"/><rect x="14" y="22" width="74" height="6" rx="1" fill="#ffd166"/><rect x="14" y="32" width="118" height="3" rx="1" fill="#cdd"/><g><rect x="14" y="46" width="132" height="40" rx="3" fill="#1a1a28"/><rect x="22" y="54" width="3" height="24" fill="#ffd166"/><rect x="30" y="54" width="80" height="3" fill="#ddd"/><rect x="30" y="62" width="100" height="2" fill="#888"/><rect x="30" y="68" width="60" height="2" fill="#888"/><rect x="30" y="74" width="36" height="6" rx="1" fill="#ffd166"/></g></svg></div>
+ <div class="body">
+ <h3>Bardeen</h3>
+ <div class="url">bardeen.ai</div>
+ <p>Closest peer to Commerce Claw's "AI command line" framing. Browser extension + chat sidebar. Hero is a screencast of the sidebar running an action across tabs.</p>
+ <div class="borrow">Borrow this</div>
+ <p><strong>The "show the chat sidebar mid-action" screencast</strong>. Commerce Claw's chat is the killer interaction — show it executing a real prompt against a real connector, with the audit-trail line scrolling underneath. Mockup variant 09 is built on this.</p>
+ </div>
+ </div>
+
+ </div>
+
+ <h2>Side-by-side feature matrix</h2>
+ <table class="matrix">
+ <thead><tr><th>Tool</th><th>Free tier</th><th>Self-host</th><th>AI chat UI</th><th>Connector count (public)</th><th>Open source</th><th>Editorial brand</th></tr></thead>
+ <tbody>
+ <tr><td>Zapier</td><td class="y">yes (5 zaps)</td><td class="n">no</td><td class="y">"Copilot" 2024</td><td>~7,000+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td>n8n</td><td class="y">self-host free</td><td class="y">yes</td><td class="y">AI nodes</td><td>~400+</td><td class="y">fair-code</td><td class="n">no</td></tr>
+ <tr><td>Pipedream</td><td class="y">yes (10k credits)</td><td class="n">no</td><td class="y">code-with-AI</td><td>~2,500+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td>Make</td><td class="y">yes (1k ops)</td><td class="n">no</td><td class="y">AI helper</td><td>~1,800+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td>Tray.io</td><td class="n">no</td><td class="n">no</td><td class="y">"Merlin" agent</td><td>~700+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td>IFTTT</td><td class="y">yes (2 applets)</td><td class="n">no</td><td class="n">no</td><td>~1,000+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td>Workato</td><td class="n">no</td><td class="n">no</td><td class="y">"Workbot"</td><td>~1,200+</td><td class="n">no</td><td class="y">close</td></tr>
+ <tr><td>Bardeen</td><td class="y">yes (limited)</td><td class="n">no</td><td class="y">central UX</td><td>~100+</td><td class="n">no</td><td class="n">no</td></tr>
+ <tr><td><strong>Commerce Claw</strong></td><td class="y"><strong>yes (alpha)</strong></td><td class="n">tbd</td><td class="y"><strong>central UX</strong></td><td><strong>56</strong></td><td class="n">tbd</td><td class="y"><strong>yes</strong></td></tr>
+ </tbody>
+ </table>
+ <p style="font-size:13px;color:var(--ink-mute);margin-top:6px"><em>Connector counts as published on each peer's homepage / public docs as of audit date. Commerce Claw counts are based on what the audit prompt described.</em></p>
+
+ <div class="callout"><strong>The single move worth stealing.</strong> Of the eight peers, only Workato has serif-driven editorial restraint, and they bury it under enterprise-sales chrome. Commerce Claw is the only player that could plausibly be <em>"the magazine of business automation"</em> — Cormorant + gold + sharp corners — while every competitor looks like a 2018 SaaS template. The brand identity is already there. The pages aren't.</p>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Peer Survey · 2 of 7. Next → <a href="competitors.html" style="color:var(--gold)">Competitor Matrix</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/report.html b/runs/businessclaw-2026-05-05-2018/report.html
new file mode 100644
index 0000000..9ef997b
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/report.html
@@ -0,0 +1,209 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Site Audit — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--ink-faint:rgba(244,241,234,.30);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.035);--rule:rgba(244,241,234,.10);--rule-strong:rgba(244,241,234,.20);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--warn:#d9b577;--bad:#c9856e;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%),radial-gradient(ellipse 60% 50% at 100% 100%,rgba(212,160,74,.04),transparent 65%);pointer-events:none;z-index:0}
+main{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:64px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+h2{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.15;letter-spacing:-.01em;margin:56px 0 14px;border-top:1px solid var(--rule);padding-top:40px}
+h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:28px 0 8px}
+p,li{font-size:15px;line-height:1.7;color:var(--ink-soft)}
+.lede{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 38px}
+.meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 36px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
+.meta span{padding:5px 10px;border:1px solid var(--rule);border-radius:2px}
+.grid-grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:24px 0 12px}
+.grade{padding:18px 16px;border:1px solid var(--rule);border-radius:3px;background:var(--bg-card)}
+.grade .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
+.grade .val{font-family:var(--serif);font-size:38px;font-weight:500;color:var(--gold);line-height:1}
+.grade .note{font-size:12px;color:var(--ink-mute);margin-top:6px;line-height:1.5}
+table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
+th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
+th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
+td .tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 8px;border-radius:2px;background:var(--gold-soft);color:var(--gold);text-transform:uppercase}
+.tag.bad{background:rgba(201,133,110,.16);color:var(--bad)}
+.tag.good{background:rgba(143,184,154,.16);color:var(--good)}
+.tag.warn{background:rgba(217,181,119,.16);color:var(--warn)}
+.callout{border-left:2px solid var(--gold);background:var(--gold-soft);padding:18px 22px;margin:20px 0;border-radius:0 3px 3px 0}
+.callout strong{font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:500}
+code,pre{font-family:var(--mono);font-size:12px;background:var(--bg-elevated);border:1px solid var(--rule);border-radius:2px;padding:2px 6px;color:var(--ink-soft)}
+pre{padding:14px 16px;overflow-x:auto;line-height:1.6}
+ul{padding-left:22px}ul li{margin:6px 0}
+.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:30px 0 8px}
+hr{border:0;border-top:1px solid var(--rule);margin:48px 0}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}
+.nav a:hover{color:var(--gold)}
+.nav .home{color:var(--gold)}
+.scoreline{display:flex;align-items:baseline;gap:16px;margin:6px 0 0}
+.scoreline .pill{font-family:var(--mono);font-size:9px;letter-spacing:.18em;padding:4px 10px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-mute);text-transform:uppercase}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Site Audit · Section 01 of 07</div>
+ <h1>The site is a <em>30-word login wall</em>.</h1>
+ <p class="lede">Commerce Claw is a heavily-built product surface with 56 SaaS connectors, AES-256-GCM at-rest encryption, and an LLM router that knows the difference between Stripe and Shopify — but the public web sees one card with two demo logins and 188 bytes of HTML behind it. As a SaaS landing page, the marketing surface does not exist yet.</p>
+
+ <div class="meta">
+ <span>businessclaw.agentabrams.com</span>
+ <span>Audited 2026-05-05</span>
+ <span>Vertical · saas-landing</span>
+ <span>Stack · Express + nginx</span>
+ <span>Public surface · 1 page (login)</span>
+ </div>
+
+ <div class="grid-grades">
+ <div class="grade"><div class="lbl">Overall</div><div class="val">D+</div><div class="note">strong infra, zero marketing</div></div>
+ <div class="grade"><div class="lbl">Security</div><div class="val">A</div><div class="note">CSP+HSTS+AES-256-GCM</div></div>
+ <div class="grade"><div class="lbl">SEO</div><div class="val">F</div><div class="note">login wall is the index</div></div>
+ <div class="grade"><div class="lbl">A11y</div><div class="val">C</div><div class="note">labels missing on inputs</div></div>
+ <div class="grade"><div class="lbl">Perf</div><div class="val">A-</div><div class="note">4 KB HTML, no render-blocking</div></div>
+ <div class="grade"><div class="lbl">Brand</div><div class="val">A-</div><div class="note">tight gold/charcoal editorial</div></div>
+ <div class="grade"><div class="lbl">Content</div><div class="val">F</div><div class="note">~30 words live</div></div>
+ </div>
+
+ <div class="callout"><strong>Single highest-priority finding.</strong> A B2B SaaS that can't be discovered or evaluated by anyone without an account does not have a marketing site — it has a security perimeter. Every other improvement listed here is downstream of: <em>publish a real homepage in front of the login wall.</em></div>
+
+ <h2>1. SEO & Discoverability</h2>
+ <p>The current index returns a 302 to <code>/login</code>. <code>/login</code> is the only HTML document Google can index. <code>sitemap.xml</code> lists three URLs (<code>/</code>, <code>/login</code>, <code>/brand</code>) — but <code>/brand</code> 302s to login too, so two of the three are the same page in disguise.</p>
+
+ <table>
+ <thead><tr><th>Signal</th><th>Status</th><th>Detail</th></tr></thead>
+ <tbody>
+ <tr><td>title</td><td><span class="tag good">good</span></td><td>"Commerce Claw — AI agent for 56 business connectors" — 56 chars, keyword-rich</td></tr>
+ <tr><td>meta description</td><td><span class="tag good">good</span></td><td>Names Stripe, Shopify, Slack — exactly the long-tail buyers search for</td></tr>
+ <tr><td>OpenGraph + Twitter</td><td><span class="tag good">good</span></td><td>og:image set to <code>/static/og-cover.png</code></td></tr>
+ <tr><td>JSON-LD SoftwareApplication</td><td><span class="tag good">good</span></td><td>Valid schema.org with offer, publisher</td></tr>
+ <tr><td>canonical</td><td><span class="tag good">good</span></td><td>Self-referential, correct</td></tr>
+ <tr><td>indexable body content</td><td><span class="tag bad">P0</span></td><td>~30 words. Google sees a login form. No H1, no benefit copy, no integrations list, no pricing.</td></tr>
+ <tr><td>internal links</td><td><span class="tag bad">P0</span></td><td>Zero. There is nowhere to crawl.</td></tr>
+ <tr><td>sitemap quality</td><td><span class="tag warn">P1</span></td><td>Lists 3 URLs, 2 of which are auth-walled. Should list public marketing pages instead.</td></tr>
+ <tr><td>robots.txt</td><td><span class="tag good">good</span></td><td>Disallows <code>/admin /api /oauth</code> — correctly scoped</td></tr>
+ </tbody>
+ </table>
+
+ <p><strong>Why it matters.</strong> The seo-analyzer flagged this as P3 because the meta is solid; the meta is solid for a page no one can read. Search engines rank pages by what they can crawl, not what's promised in <code><title></code>. The competitive set in this category (Zapier, n8n, Pipedream, Make) all rank for <em>thousands</em> of long-tail integration queries — "stripe to slack automation", "notion to discord webhook", "shopify zapier alternative" — because every connector pair gets its own indexed comparison page. Commerce Claw has 56 connectors. That is, in raw integer math, <strong>56 × 55 = 3,080 pairwise integration pages</strong> the marketing surface could ship the day a public homepage exists. Today: zero.</p>
+
+ <h2>2. Security & Headers</h2>
+ <p>Genuinely strong. The shipped headers are best-in-class for an Express app behind nginx:</p>
+ <pre>strict-transport-security: max-age=31536000; includeSubDomains; preload
+content-security-policy: default-src 'self'; script-src 'self' 'unsafe-inline';
+ style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
+ font-src 'self' https://fonts.gstatic.com;
+ img-src 'self' data: https://cdn.simpleicons.org https://cdn.jsdelivr.net
+ https://*.googleusercontent.com;
+ connect-src 'self'; frame-ancestors 'none';
+ base-uri 'self'; form-action 'self' https://*.browserbase.com
+x-frame-options: DENY
+x-content-type-options: nosniff
+referrer-policy: strict-origin-when-cross-origin
+permissions-policy: camera=(), microphone=(), geolocation=()</pre>
+ <ul>
+ <li><span class="tag good">A</span> HSTS with preload — eligible for browser preload list submission</li>
+ <li><span class="tag good">A</span> CSP that explicitly allows Browserbase form actions (correct — that's the only third-party origin you intentionally talk to)</li>
+ <li><span class="tag good">A</span> Permissions-Policy denies camera/mic/geo without being asked</li>
+ <li><span class="tag warn">P2</span> <code>script-src 'unsafe-inline'</code> is the only remaining attack surface — move the 12-line login form handler to <code>/static/login.js</code> and drop <code>'unsafe-inline'</code> entirely</li>
+ <li><span class="tag warn">P2</span> No <code>Cross-Origin-Opener-Policy</code> or <code>Cross-Origin-Embedder-Policy</code>. Optional for non-cross-origin-isolated pages but adds defence-in-depth.</li>
+ <li><span class="tag good">A</span> Recently shipped per spec: AES-256-GCM at-rest encryption for connector creds, atomic write+fsync, type-coerced session IDs. That is a higher bar than most B2B SaaS at this revenue tier (= still pre-revenue).</li>
+ </ul>
+
+ <h2>3. Accessibility</h2>
+ <p>The login form has the bones of an accessible page but cuts corners that would fail a contract review:</p>
+ <table>
+ <thead><tr><th>Issue</th><th>Severity</th><th>Fix</th></tr></thead>
+ <tbody>
+ <tr><td>Inputs use <code>placeholder</code> as the only label</td><td><span class="tag bad">P1</span></td><td>Add <code><label for="email">Email</label></code> + <code>aria-required="true"</code></td></tr>
+ <tr><td>Error <code>div</code> has no <code>role="alert"</code></td><td><span class="tag warn">P2</span></td><td>Screen readers won't announce login failures</td></tr>
+ <tr><td>Logo <code>div.logo-dot</code> has no accessible name</td><td><span class="tag warn">P2</span></td><td>Wrap in <code><a aria-label="Commerce Claw home"></code></td></tr>
+ <tr><td>Color contrast: <code>--ink-faint</code> #f4f1ea @ 30% on #0e0e10 ≈ 3.1:1</td><td><span class="tag warn">P2</span></td><td>Below WCAG AA 4.5:1 for normal text; OK for the demo creds because they're 10px decorative, but flag for any future use</td></tr>
+ <tr><td>No skip-link</td><td><span class="tag good">N/A</span></td><td>Single-form page; not needed yet</td></tr>
+ <tr><td>Focus visible state</td><td><span class="tag warn">P2</span></td><td>Verify <code>:focus-visible</code> outline is present in style.css; default browser ring may be suppressed by reset</td></tr>
+ </tbody>
+ </table>
+
+ <h2>4. Performance</h2>
+ <p>4,010 bytes of HTML, one CSS file, two Google Fonts requests, no images, no JS framework, one inline 12-line script. This is essentially the floor of "as fast as it can be." Lighthouse would score 100 on performance for the login view.</p>
+ <p>The <em>logged-in</em> surface is what the perf budget should actually target — and the recently-shipped <code>/api/connectors/health-all</code> single-roundtrip pattern (instead of 56 sequential health pings) is the right move. Continue that pattern: every UI surface that lists connectors should fetch via one batched endpoint, not 56 polls.</p>
+
+ <h2>5. Brand & Visual System</h2>
+ <p>The design language is the strongest single asset on the property. Three-color palette, three-typeface system, vignette instead of animated orbs, <em>italic gold for emphasis</em> as the only ornament — this is editorial-magazine restraint applied to dev-tools, which is rare. Notion did this. Linear did this. Almost no other automation tool has.</p>
+ <ul>
+ <li><strong>Gold #d4a04a</strong> — exactly one shade. Used for the logo dot, italic emphasis, hover, primary button. No second accent.</li>
+ <li><strong>Cormorant Garamond italic</strong> as the brand voice signature ("Sign <em>in</em>", "Commerce <em>Claw</em>"). Carries serif gravitas without being precious.</li>
+ <li><strong>JetBrains Mono</strong> at 9-10px with .22em letter-spacing for eyebrows — the design-systems convention for "this is a system, not marketing fluff."</li>
+ <li><strong>Sharp 4px corners</strong> — editorial, not soft-SaaS. Stay with this. Resist any pressure toward <code>border-radius: 16px</code>.</li>
+ </ul>
+ <p>This is not a brand that needs help. It is a brand that needs <em>more pages to live on.</em></p>
+
+ <h2>6. Component Inventory · Letter Grades</h2>
+ <table>
+ <thead><tr><th>Component</th><th>Present</th><th>Grade</th><th>Note</th></tr></thead>
+ <tbody>
+ <tr><td>Hero / above-fold value prop</td><td>No</td><td><span class="tag bad">F</span></td><td>The whole site is the login. There is no hero.</td></tr>
+ <tr><td>Connector grid (56 logos)</td><td>No public</td><td><span class="tag bad">F</span></td><td>Single biggest piece of social proof you have. Not shown.</td></tr>
+ <tr><td>Demo / video / GIF</td><td>No</td><td><span class="tag bad">F</span></td><td>The killer screenshot is "type 'refund the last 3 stripe charges and post in slack' — watch it run." Not shown.</td></tr>
+ <tr><td>Pricing</td><td>No</td><td><span class="tag bad">F</span></td><td>JSON-LD says price=0 USD — that's actually a clear positioning statement. Show it on the page.</td></tr>
+ <tr><td>Sign-in card</td><td>Yes</td><td><span class="tag good">A</span></td><td>Restrained, branded, demo creds visible — exactly right for an alpha</td></tr>
+ <tr><td>Sign-up / wait-list</td><td>No</td><td><span class="tag bad">P0</span></td><td>No way to capture interest. Not even an email-only "notify me" form.</td></tr>
+ <tr><td>Trust / security badges</td><td>No</td><td><span class="tag bad">P1</span></td><td>You ship AES-256-GCM, CSP, HSTS-preload, audit trail. SaaS buyers <em>specifically</em> ask for this. Not shown.</td></tr>
+ <tr><td>Docs / API reference</td><td>No</td><td><span class="tag bad">F</span></td><td>For an integration tool, docs are the conversion surface. Zapier's docs site is the #1 traffic driver in the category.</td></tr>
+ <tr><td>Changelog</td><td>No</td><td><span class="tag warn">P2</span></td><td>"AES-256-GCM shipped this week" is exactly the changelog entry that would build credibility</td></tr>
+ <tr><td>Footer · contact / status</td><td>Minimal</td><td><span class="tag warn">C</span></td><td>One line "Commerce Claw — businessclaw.agentabrams.com". Add status URL, contact, legal.</td></tr>
+ </tbody>
+ </table>
+
+ <h2>7. Differentiation Thesis</h2>
+ <p class="lede">"Yelp-killer for SMBs that <em>also</em> automates with AI."</p>
+ <p>This is a sharp positioning, but it lives nowhere on the public site. The login wall says "56 connectors. One command." which is closer to "Zapier with a chat box" than to "Yelp-killer with action automation." The former is a crowded market; the latter is a category. Pick one and put it on the homepage.</p>
+ <ul>
+ <li>The <em>Zapier-with-a-chat-box</em> framing competes against Zapier, n8n, Pipedream, Make, Tray.io, IFTTT, Workato, Bardeen, Relevance AI, and 30+ funded YC startups.</li>
+ <li>The <em>SMB-business-OS</em> framing competes against HoneyBook, Jobber, ServiceTitan, GoHighLevel, Vagaro — none of whom have an LLM router across 56 third-party tools.</li>
+ <li>The intersection — "AI command line for the SMB tech stack" — has Bardeen and a couple Y Combinator W26 entries, none of whom have shipped both real connectors <em>and</em> an SMB-specific UX layer. That's a wedge.</li>
+ </ul>
+
+ <h2>8. 90-Day Roadmap (priority order)</h2>
+ <table>
+ <thead><tr><th>Day</th><th>Ship</th><th>Why</th></tr></thead>
+ <tbody>
+ <tr><td>0–7</td><td>Real homepage in front of login</td><td>Hero + 56-connector grid (use simpleicons.org, already in CSP) + 90-second demo video + email wait-list. Mockup variant 02 (Dashboard Screenshot Story) is the lowest-risk pick.</td></tr>
+ <tr><td>7–14</td><td>Pricing page + security page</td><td>Both are conversion surfaces SaaS buyers always look for. Security page literally just lists what you already shipped (AES-256-GCM, CSP, HSTS-preload, audit log, CCPA). Pricing page can be one number ($0 right now, "for early adopters").</td></tr>
+ <tr><td>14–30</td><td>Connector pages × 10 high-value pairs</td><td>"Stripe → Slack", "Shopify → Notion", "HubSpot → Discord". 10 SEO-targeted pages handcrafted before scripting the other 3,070.</td></tr>
+ <tr><td>30–45</td><td>Docs site at <code>/docs</code></td><td>API ref + 20 recipe pages. Docs traffic compounds; marketing-page traffic decays.</td></tr>
+ <tr><td>45–60</td><td>Changelog + status page</td><td>Two cheap pages that say "this is a real product, run by people, with uptime."</td></tr>
+ <tr><td>60–90</td><td>Programmatic SEO: 3,080 pairwise integration pages</td><td>Generated from connector × connector × use-case. Even if each gets 5 visits/mo, that's 15,000 monthly organic visits at the floor — Zapier's whole top-of-funnel works this way.</td></tr>
+ </tbody>
+ </table>
+
+ <h2>9. What's <em>already</em> right (and to not break)</h2>
+ <ul>
+ <li>Security headers — keep them, the CSP is genuinely well-tuned for the actual third-party surfaces (Browserbase, Google Fonts, simpleicons CDN).</li>
+ <li>Brand system — gold/charcoal/paper + Cormorant + JetBrains Mono. This is the moat. Don't redesign it; just put it on more pages.</li>
+ <li>JSON-LD SoftwareApplication schema — already in place, valid, names connectors. Will pay off the day there's content to support it.</li>
+ <li>The 56-connector LLM router behind the wall — a genuine product. The audit's only complaint is that its existence is invisible from the marketing surface.</li>
+ <li>Demo logins on the login card — the right call for an alpha, removes friction for prospect evaluation.</li>
+ </ul>
+
+ <hr>
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase">End · Site Audit · 1 of 7. Next → <a href="peers.html" style="color:var(--gold)">Peer Survey</a></p>
+</main>
+</body></html>
diff --git a/runs/businessclaw-2026-05-05-2018/tools.html b/runs/businessclaw-2026-05-05-2018/tools.html
new file mode 100644
index 0000000..e87944b
--- /dev/null
+++ b/runs/businessclaw-2026-05-05-2018/tools.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en"><head>
+<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Tools Pack — businessclaw.agentabrams.com</title>
+<meta name="robots" content="noindex" />
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+:root{--ink:#f4f1ea;--ink-soft:rgba(244,241,234,.78);--ink-mute:rgba(244,241,234,.52);--bg:#0e0e10;--bg-elevated:#16161a;--bg-card:rgba(244,241,234,.04);--rule:rgba(244,241,234,.10);--gold:#d4a04a;--gold-soft:rgba(212,160,74,.14);--good:#8fb89a;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
+*{box-sizing:border-box}
+html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
+body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 18% -10%,rgba(212,160,74,.06),transparent 60%);pointer-events:none;z-index:0}
+.nav{position:sticky;top:0;background:rgba(14,14,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);padding:14px 32px;display:flex;gap:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;z-index:9}
+.nav a{color:var(--ink-mute);text-decoration:none}.nav a:hover,.nav .home{color:var(--gold)}
+main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:64px 32px 96px}
+.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+h1{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
+h1 em{font-style:italic;color:var(--gold)}
+.lede{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink);max-width:62ch;margin:0 0 36px}
+h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:48px 0 8px;border-top:1px solid var(--rule);padding-top:32px}
+h2 em{font-style:italic;color:var(--gold)}
+.tool-card{border:1px solid var(--rule);border-radius:3px;background:var(--bg-card);padding:28px;margin:24px 0}
+.tool-card .meta{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px}
+.tool-card .meta .pin{color:var(--gold);margin-right:14px}
+.tool-card p{font-size:15px;line-height:1.7;color:var(--ink-soft)}
+.calc{background:var(--bg-elevated);border:1px solid var(--rule);border-radius:3px;padding:24px;margin:18px 0}
+.row{display:grid;grid-template-columns:1fr 120px;gap:14px;align-items:center;margin:8px 0;font-size:14px}
+.row label{color:var(--ink-soft);font-family:var(--sans)}
+.row input,.row select{background:var(--bg);color:var(--ink);border:1px solid var(--rule);border-radius:2px;padding:9px 12px;font-family:var(--mono);font-size:13px;outline:none}
+.row input:focus,.row select:focus{border-color:var(--gold)}
+.result{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline}
+.result .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
+.result .val{font-family:var(--serif);font-style:italic;font-size:42px;color:var(--gold);font-weight:500}
+.result .unit{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin-left:8px}
+.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
+.toolbar .pill{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:5px 10px;border:1px solid var(--rule);border-radius:2px;color:var(--ink-mute);cursor:pointer}
+.toolbar .pill.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
+.routing-output{font-family:var(--mono);font-size:12px;color:var(--good);background:#0a0a0c;border:1px solid var(--rule);padding:14px 16px;border-radius:2px;margin-top:14px;line-height:1.7;min-height:42px}
+.routing-output .arr{color:var(--gold);margin-right:8px}
+ul{padding-left:22px}ul li{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:4px 0}
+.note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:14px}
+</style></head>
+<body>
+<nav class="nav">
+ <a href="index.html" class="home">Commerce Claw — Audit Hub</a>
+ <a href="report.html">Audit</a>
+ <a href="peers.html">Peers</a>
+ <a href="competitors.html">Competitors</a>
+ <a href="mockups/index.html">Mockups</a>
+ <a href="tools.html">Tools</a>
+ <a href="hub.html">Info Hub</a>
+ <a href="extension.html">Extension</a>
+</nav>
+<main>
+ <div class="eyebrow">Tools Pack · Section 05 of 07</div>
+ <h1>Three working <em>browser-side widgets</em> Commerce Claw could ship.</h1>
+ <p class="lede">Each is functional code, not a mockup — drop the <script>+<style> into any page and it runs. All client-side, zero server hits, fits the existing CSP. Ship them on the public homepage as conversion bait.</p>
+
+ <h2>Tool 01 · The <em>Automation ROI Calculator</em></h2>
+ <div class="tool-card">
+ <div class="meta"><span class="pin">▸ For homepage hero · third fold</span></div>
+ <p>Estimates dollar value of hours saved when an SMB swaps a manual workflow for a Commerce Claw recipe. Borrows the framing from Steve's "401(k) of automation hours saved" line.</p>
+ <div class="calc">
+ <div class="row"><label>How many SaaS tools do you log into per day?</label><input id="t" type="number" value="6" min="1" max="20"></div>
+ <div class="row"><label>How many minutes/day moving data between them?</label><input id="m" type="number" value="35" min="0" max="240"></div>
+ <div class="row"><label>Your effective hourly rate ($)</label><input id="r" type="number" value="65" min="10" max="500"></div>
+ <div class="row"><label>Working days per month</label><input id="d" type="number" value="22" min="10" max="31"></div>
+ <div class="result"><span class="lbl">Per month</span><span><span class="val" id="rm">—</span><span class="unit">USD recovered</span></span></div>
+ <div class="result"><span class="lbl">Per year</span><span><span class="val" id="ry">—</span><span class="unit">USD · ~<span id="rh">—</span> hours back</span></span></div>
+ <div class="result"><span class="lbl">10-year compound (5% inflation-adjusted)</span><span><span class="val" id="rc">—</span><span class="unit">USD lifetime</span></span></div>
+ </div>
+ <p class="note">Live calculation · all client-side · no input leaves your browser</p>
+ </div>
+
+ <h2>Tool 02 · The <em>Connector Routing Demo</em></h2>
+ <div class="tool-card">
+ <div class="meta"><span class="pin">▸ For homepage hero · second fold</span> · proves the LLM router</div>
+ <p>Live preview of which connectors a chat command would touch. Type a sentence, watch the planned tool calls appear. No backend — pattern-matched against keywords for the demo.</p>
+ <div class="calc">
+ <div class="row" style="grid-template-columns:1fr;gap:8px"><label style="font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold)">Type a command</label><input id="cmd" type="text" value="refund the last 3 stripe charges and post in slack" style="font-size:14px;padding:13px 16px"></div>
+ <div class="routing-output" id="rt">— routing preview will appear here —</div>
+ </div>
+ <p class="note">Pattern-matched demo · 56 connectors recognized · real router behind /chat</p>
+ </div>
+
+ <h2>Tool 03 · The <em>Stack Audit</em></h2>
+ <div class="tool-card">
+ <div class="meta"><span class="pin">▸ For lead-magnet · /stack-audit page</span></div>
+ <p>SMB owner toggles tools they pay for. Returns total stack cost/year, list of tools that should talk and don't, and the one Commerce Claw recipe that would unify the most.</p>
+ <div class="calc">
+ <div class="toolbar" id="stack">
+ <span class="pill" data-cost="20">Stripe</span>
+ <span class="pill" data-cost="0">Shopify</span>
+ <span class="pill" data-cost="0">Slack</span>
+ <span class="pill" data-cost="10">Notion</span>
+ <span class="pill" data-cost="800">HubSpot</span>
+ <span class="pill" data-cost="50">Calendly</span>
+ <span class="pill" data-cost="60">QuickBooks</span>
+ <span class="pill" data-cost="10">Mailchimp</span>
+ <span class="pill" data-cost="15">Zoom</span>
+ <span class="pill" data-cost="60">Square</span>
+ <span class="pill" data-cost="20">Twilio</span>
+ <span class="pill" data-cost="20">Airtable</span>
+ <span class="pill" data-cost="55">Zendesk</span>
+ <span class="pill" data-cost="0">Yelp</span>
+ <span class="pill" data-cost="0">Google Biz</span>
+ </div>
+ <div class="result"><span class="lbl">Estimated monthly stack spend</span><span><span class="val" id="sc">—</span><span class="unit">USD/month</span></span></div>
+ <div class="result"><span class="lbl">Tools that should talk to each other</span><span><span class="val" id="sp">—</span><span class="unit">pairs</span></span></div>
+ <div class="result"><span class="lbl">Top recipe to unify them</span><span class="unit" id="sr" style="font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);margin-left:0">— select tools above —</span></div>
+ </div>
+ <p class="note">Tap each tool you pay for · estimates are approximate published entry-tier rates</p>
+ </div>
+
+ <h2>Where to put these</h2>
+ <ul>
+ <li><strong>Tool 01 (ROI Calculator)</strong> — third fold of homepage, between recipe wall and trust badges. Lead-magnet on a dedicated <code>/roi</code> page.</li>
+ <li><strong>Tool 02 (Routing Demo)</strong> — directly under the hero. Replaces the "demo video" entirely; this is more interactive and never breaks. Mockup variant 02 was designed around exactly this widget being live.</li>
+ <li><strong>Tool 03 (Stack Audit)</strong> — separate <code>/stack-audit</code> landing page; high-intent SEO target ("what does my saas stack actually cost").</li>
+ </ul>
+
+ <p style="font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-mute);text-transform:uppercase;margin-top:48px">End · Tools Pack · 5 of 7. Next → <a href="hub.html" style="color:var(--gold)">Info Hub</a></p>
+</main>
+
+<script>
+// Tool 01 — ROI calc
+function roi(){
+ const t=+document.getElementById('t').value||0;
+ const m=+document.getElementById('m').value||0;
+ const r=+document.getElementById('r').value||0;
+ const d=+document.getElementById('d').value||0;
+ const minMonth=m*d;
+ const hMonth=minMonth/60;
+ const usdMonth=hMonth*r;
+ const usdYear=usdMonth*12;
+ const hYear=hMonth*12;
+ // 10y compound at 5% real
+ let total=0,annual=usdYear;for(let i=0;i<10;i++){total+=annual;annual*=1.05}
+ const fmt=n=>'$'+Math.round(n).toLocaleString('en-US');
+ document.getElementById('rm').textContent=fmt(usdMonth);
+ document.getElementById('ry').textContent=fmt(usdYear);
+ document.getElementById('rh').textContent=Math.round(hYear);
+ document.getElementById('rc').textContent=fmt(total);
+}
+['t','m','r','d'].forEach(id=>document.getElementById(id).addEventListener('input',roi));
+roi();
+
+// Tool 02 — routing demo
+const ROUTES={
+ stripe:{ name:'stripe', verbs:['refund','charge','payment','invoice','subscription'], call:'stripe.charges.list / stripe.refunds.create'},
+ slack:{ name:'slack', verbs:['post','slack','#','notify','channel'], call:'slack.chat.postMessage'},
+ shopify:{ name:'shopify', verbs:['order','product','shopify','inventory','sku'], call:'shopify.orders.list / shopify.products.update'},
+ notion:{ name:'notion', verbs:['note','notion','page','doc','database'], call:'notion.pages.create / notion.databases.query'},
+ twilio:{ name:'twilio', verbs:['sms','text','twilio','number'], call:'twilio.messages.create'},
+ hubspot:{ name:'hubspot', verbs:['lead','contact','crm','hubspot','deal'], call:'hubspot.crm.contacts.create'},
+ gmail:{ name:'gmail', verbs:['email','gmail','mail','send to'], call:'gmail.users.messages.send'},
+ sheets:{ name:'sheets', verbs:['sheet','spreadsheet','csv','log to'], call:'sheets.values.append'},
+ square:{ name:'square', verbs:['booking','square','appointment','client'], call:'square.bookings.list'},
+ yelp:{ name:'yelp', verbs:['yelp','review'], call:'yelp.reviews.list'}
+};
+function route(){
+ const q=document.getElementById('cmd').value.toLowerCase();
+ const hits=[];
+ Object.values(ROUTES).forEach(r=>{ if(r.verbs.some(v=>q.includes(v))) hits.push(r); });
+ const out=document.getElementById('rt');
+ if(!hits.length){ out.innerHTML='<span style="color:var(--ink-mute)">— no connector matched. Try mentioning Stripe, Slack, Shopify, Notion…</span>';return}
+ out.innerHTML=hits.map((h,i)=>'<div><span class="arr">→</span>'+h.call+(i<hits.length-1?'':' <span style="color:var(--gold)">⏸ awaiting your approval</span>')+'</div>').join('');
+}
+document.getElementById('cmd').addEventListener('input',route);route();
+
+// Tool 03 — stack audit
+const PAIRS_RECIPES=[
+ ['stripe','slack','Refund alerts in #sales'],
+ ['shopify','slack','New order pings'],
+ ['stripe','quickbooks','Auto-reconcile invoices'],
+ ['square','twilio','Birthday SMS'],
+ ['yelp','notion','Review log + reply drafts'],
+ ['calendly','hubspot','Booking → CRM lead'],
+ ['google biz','notion','Review aggregation'],
+ ['mailchimp','airtable','Subscriber sync'],
+ ['hubspot','slack','Deal-stage notifications']
+];
+function audit(){
+ const on=[...document.querySelectorAll('#stack .pill.on')];
+ const cost=on.reduce((s,p)=>s+(+p.dataset.cost),0);
+ const names=on.map(p=>p.textContent.toLowerCase().replace(/\s+/g,' ').trim());
+ const matched=PAIRS_RECIPES.filter(r=>names.some(n=>n.includes(r[0]))&&names.some(n=>n.includes(r[1])));
+ document.getElementById('sc').textContent='$'+cost.toLocaleString();
+ document.getElementById('sp').textContent=matched.length;
+ document.getElementById('sr').textContent=matched.length?'"'+matched[0][2]+'"':'— select two or more tools —';
+}
+document.querySelectorAll('#stack .pill').forEach(p=>p.addEventListener('click',()=>{p.classList.toggle('on');audit()}));
+audit();
+</script>
+</body></html>
diff --git a/runs/businessclaw-marketing/01-editorial.html b/runs/businessclaw-marketing/01-editorial.html
new file mode 100644
index 0000000..772d570
--- /dev/null
+++ b/runs/businessclaw-marketing/01-editorial.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Commerce Claw — The Editorial</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+ :root{
+ --gold:#d4a04a; --ink:#0e0e10; --paper:#f4f1ea;
+ --rule:rgba(14,14,16,.18); --soft:rgba(14,14,16,.55);
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
+ a{color:inherit;text-decoration:none}
+ .wrap{max-width:1240px;margin:0 auto;padding:28px 44px 80px}
+ /* masthead */
+ .masthead{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:14px}
+ .vol{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
+ .nameplate{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:54px;letter-spacing:-.01em;line-height:.95}
+ .nameplate .amp{color:var(--gold);font-style:normal}
+ .top-nav{display:flex;gap:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
+ .top-nav a{padding:6px 0;border-bottom:1px solid transparent}
+ .top-nav a:hover{border-color:var(--ink)}
+ .top-nav .cta{background:var(--ink);color:var(--paper);padding:8px 14px;border:2px solid var(--ink)}
+ /* sub-rule */
+ .sub-rule{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);padding:10px 0;border-bottom:1px solid var(--rule)}
+ /* hero */
+ .hero{display:grid;grid-template-columns:1.15fr 1fr;gap:54px;padding:46px 0 30px;border-bottom:1px solid var(--rule)}
+ .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
+ h1.title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:84px;line-height:.96;letter-spacing:-.012em}
+ h1.title em{font-style:italic;color:var(--gold)}
+ .deck{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:23px;line-height:1.35;color:var(--soft);margin-top:20px;max-width:520px}
+ .byline{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:28px;display:flex;gap:18px;align-items:center}
+ .byline span:first-child{color:var(--ink)}
+ .lede{margin-top:28px;column-count:1;max-width:520px;font-size:15.5px;line-height:1.7}
+ .lede::first-letter{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:78px;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--gold)}
+ .footnotes{margin-top:30px;padding-top:14px;border-top:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7;color:var(--soft)}
+ .footnotes sup{color:var(--gold);font-weight:500;margin-right:6px}
+ /* demo widget */
+ .demo{background:#fff;border:2px solid var(--ink);position:relative}
+ .demo-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
+ .demo-head .live{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
+ .demo-head .dot{width:7px;height:7px;background:var(--gold);display:inline-block;animation:p 1.6s infinite}
+ @keyframes p{0%,100%{opacity:.35}50%{opacity:1}}
+ .prompt-row{padding:20px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px}
+ .caret{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:30px;line-height:1}
+ .prompt{flex:1;border:none;outline:none;background:transparent;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--ink)}
+ .parse{padding:14px 18px;border-bottom:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--soft);min-height:46px}
+ .parse b{color:var(--ink);font-weight:500}
+ .parse .gold{color:var(--gold)}
+ .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0}
+ .tile{aspect-ratio:1/1;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);position:relative;cursor:default;transition:background .18s}
+ .tile:nth-child(8n){border-right:none}
+ .tile:hover{background:rgba(212,160,74,.08);color:var(--ink)}
+ .tile.active{background:var(--gold);color:var(--ink)}
+ .tile.active::after{content:"";position:absolute;inset:3px;border:1px solid var(--ink)}
+ /* below the fold */
+ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);margin-top:44px}
+ .feat{padding:36px 30px 36px 0;border-right:1px solid var(--rule)}
+ .feat:last-child{border-right:none;padding-right:0}
+ .feat:not(:first-child){padding-left:30px}
+ .feat .num{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:32px;line-height:1}
+ .feat h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;line-height:1.15;margin:10px 0 12px}
+ .feat p{font-size:14.5px;line-height:1.65;color:var(--soft)}
+ .feat .ref{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:14px}
+ /* end-rule */
+ .end{margin-top:62px;border-top:2px solid var(--ink);padding-top:14px;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
+</style>
+</head>
+<body>
+<div class="wrap">
+
+ <header class="masthead">
+ <div>
+ <div class="vol">Vol. I · No. 01 · Tuesday, May 5, 2026</div>
+ <div class="nameplate">Commerce <em class="amp">&</em> Claw</div>
+ </div>
+ <nav class="top-nav">
+ <a href="#">Connectors</a>
+ <a href="#">Field Notes</a>
+ <a href="#">Pricing</a>
+ <a href="#" class="cta">Open the desk →</a>
+ </nav>
+ </header>
+
+ <div class="sub-rule">
+ <span>An editorial agent for operating commerce</span>
+ <span>56 connectors · one composed line · zero glue code</span>
+ </div>
+
+ <section class="hero">
+ <div>
+ <div class="kicker">The Cover Story</div>
+ <h1 class="title">Type the <em>sentence.</em><br>The right tool<br>does the work.</h1>
+ <p class="deck">Commerce Claw reads a single English instruction, picks the correct connector among fifty-six — Stripe, Shopify, Slack, Cloudflare, HubSpot, Notion, Discord — and runs the action. No drag-and-drop canvas. No webhook plumbing.</p>
+ <div class="byline">
+ <span>By the desk</span>
+ <span>—</span>
+ <span>Field-tested across 1,408 live workspaces</span>
+ </div>
+ <p class="lede">Operators have spent fifteen years assembling the same five-step Zap, the same Make scenario, the same n8n branch. Commerce Claw collapses those branches into a sentence and routes intent to the connector that owns it<sup style="color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:9px;vertical-align:super">1</sup>. The line you type is the audit log. The audit log is the workflow.</p>
+ <div class="footnotes">
+ <div><sup>1</sup>Routing model: 4-stage classifier — verb, object, vendor-affinity, scope. Median resolution: 240 ms.</div>
+ <div><sup>2</sup>Idempotency keys generated per-run. Re-running the same sentence is a no-op.</div>
+ <div><sup>3</sup>Read scopes default-on; write scopes require workspace-admin click-to-arm.</div>
+ </div>
+ </div>
+
+ <aside class="demo" aria-label="Live demo">
+ <div class="demo-head">
+ <span class="live"><span class="dot"></span>The Wire · Live</span>
+ <span>req_8e91</span>
+ </div>
+ <div class="prompt-row">
+ <span class="caret">¶</span>
+ <input class="prompt" id="prompt" value="refund order 1234 on shopify" autocomplete="off">
+ </div>
+ <div class="parse" id="parse">
+ Verb <b>refund</b> · Object <b>order#1234</b> · Vendor <b class="gold">shopify</b> · Scope <b>orders.write</b>
+ </div>
+ <div class="grid" id="grid"></div>
+ </aside>
+ </section>
+
+ <section class="features">
+ <div class="feat">
+ <div class="num">i.</div>
+ <h3>One sentence,<br>one source of truth.</h3>
+ <p>Every action is the prompt that made it. Replay it, version it, paste it into Slack — the run is reproducible because the input is the contract.</p>
+ <div class="ref">See: §1 — Routing</div>
+ </div>
+ <div class="feat">
+ <div class="num">ii.</div>
+ <h3>Fifty-six connectors,<br>none of them ours.</h3>
+ <p>Stripe, Shopify, Slack, Cloudflare, HubSpot, Notion, Discord, Linear, Intercom, Plaid, Klaviyo, Postmark, Vercel, GitHub — Claw owns the routing, the vendors own the surface area.</p>
+ <div class="ref">See: §2 — Surface</div>
+ </div>
+ <div class="feat">
+ <div class="num">iii.</div>
+ <h3>Read by default.<br>Write by deliberation.</h3>
+ <p>Destructive actions arm with a single admin click. The line you typed shows up in audit alongside who armed it and when. Nothing else moves.</p>
+ <div class="ref">See: §3 — Trust</div>
+ </div>
+ </section>
+
+ <footer class="end">
+ <span>businessclaw.agentabrams.com</span>
+ <span>— fin —</span>
+ <span>Set in Cormorant & Inter</span>
+ </footer>
+
+</div>
+
+<script>
+ // 56 connectors
+ const C = ['stripe','shopify','slack','cloudflare','hubspot','notion','discord','linear',
+ 'github','vercel','postmark','plaid','klaviyo','intercom','sendgrid','twilio',
+ 'gmail','calendar','drive','figma','asana','jira','zendesk','airtable',
+ 'segment','mixpanel','amplitude','aws','gcp','azure','railway','fly',
+ 'auth0','okta','clerk','retool','metabase','snowflake','bigquery','postgres',
+ 'mongo','redis','kafka','algolia','typesense','sentry','datadog','statsig',
+ 'launchdarkly','pagerduty','opsgenie','zoom','loom','calendly','docusign','quickbooks'];
+ const grid = document.getElementById('grid');
+ C.forEach(name=>{
+ const d = document.createElement('div');
+ d.className = 'tile';
+ d.dataset.name = name;
+ d.textContent = name;
+ grid.appendChild(d);
+ });
+ const promptEl = document.getElementById('prompt');
+ const parseEl = document.getElementById('parse');
+ function light(){
+ const v = promptEl.value.toLowerCase();
+ [...grid.children].forEach(t=>t.classList.toggle('active', v.includes(t.dataset.name)));
+ let vendor = C.find(c=>v.includes(c)) || '—';
+ let verb = (v.match(/\b(refund|create|cancel|update|notify|charge|invoice|tag|archive|send|post|mute|page)\b/)||['—'])[0];
+ let object = (v.match(/(?:order|customer|invoice|user|page|domain|deal|channel|repo)\s*#?\s*[\w-]+/)||['—'])[0];
+ parseEl.innerHTML = `Verb <b>${verb}</b> · Object <b>${object}</b> · Vendor <b class="gold">${vendor}</b> · Scope <b>${verb==='refund'?'orders.write':verb+'.scope'}</b>`;
+ }
+ promptEl.addEventListener('input', light);
+ light();
+ // Pulse the active tile on initial load
+ document.querySelector('.tile[data-name="shopify"]')?.classList.add('active');
+</script>
+</body>
+</html>
diff --git a/runs/businessclaw-marketing/02-brutalist-terminal.html b/runs/businessclaw-marketing/02-brutalist-terminal.html
new file mode 100644
index 0000000..1f86a42
--- /dev/null
+++ b/runs/businessclaw-marketing/02-brutalist-terminal.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Commerce Claw // tty</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<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=Cormorant+Garamond:ital,wght@0,500;1,500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+ :root{
+ --gold:#d4a04a; --ink:#0e0e10; --paper:#f4f1ea; --green:#7ec27e;
+ --line:rgba(244,241,234,.85);
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.55}
+ ::selection{background:var(--gold);color:var(--ink)}
+ a{color:var(--gold);text-decoration:none}
+ a:hover{background:var(--gold);color:var(--ink)}
+ .wrap{max-width:1240px;margin:0 auto;padding:18px 22px 60px}
+ /* nav bar */
+ .navbar{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--paper);padding:10px 14px;font-size:11.5px;letter-spacing:.06em}
+ .navbar .left{display:flex;gap:22px;align-items:center}
+ .navbar b{color:var(--gold);font-weight:700;letter-spacing:.04em}
+ .navbar .right{display:flex;gap:18px}
+ .navbar .cta{background:var(--gold);color:var(--ink);padding:5px 10px;border:2px solid var(--gold);font-weight:700}
+ .navbar .cta:hover{background:var(--paper);border-color:var(--paper)}
+ /* ascii box helper */
+ .box{border:2px solid var(--paper);margin-top:18px;padding:0}
+ .box-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:2px solid var(--paper);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
+ .box-head b{color:var(--gold)}
+ /* hero */
+ .hero{margin-top:18px;display:grid;grid-template-columns:1.05fr 1fr;gap:18px}
+ .hero-left{border:2px solid var(--paper);padding:26px 26px 22px;position:relative}
+ .ascii{color:var(--gold);white-space:pre;font-size:11px;line-height:1.05;margin-bottom:18px;letter-spacing:0}
+ h1{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:46px;line-height:1.05;letter-spacing:-.02em;margin-bottom:14px}
+ h1 .accent{color:var(--gold)}
+ h1 .ed{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;color:var(--paper)}
+ .deck{font-size:14px;line-height:1.65;max-width:520px;color:rgba(244,241,234,.78)}
+ .deck b{color:var(--paper)}
+ .stat-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
+ .stat{border:1px dashed var(--paper);padding:8px 12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.7)}
+ .stat b{color:var(--gold);font-weight:700}
+ .ctas{margin-top:24px;display:flex;gap:10px}
+ .ctas .pri{background:var(--gold);color:var(--ink);padding:10px 14px;font-weight:700;border:2px solid var(--gold);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
+ .ctas .sec{padding:10px 14px;border:2px solid var(--paper);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
+ .ctas .sec:hover{background:var(--paper);color:var(--ink)}
+ /* terminal */
+ .term{background:#0a0a0c;border:2px solid var(--paper);padding:0;height:100%;display:flex;flex-direction:column}
+ .term-head{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:2px solid var(--paper);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.7)}
+ .term-head .lights{display:flex;gap:6px;align-items:center}
+ .term-head .l{width:8px;height:8px;background:var(--paper);display:inline-block}
+ .term-head .l.gold{background:var(--gold)}
+ .term-body{padding:16px 14px 12px;flex:1;font-size:12.5px;color:rgba(244,241,234,.85)}
+ .ln{display:block;margin-bottom:4px;white-space:pre-wrap}
+ .ln .p{color:var(--gold);font-weight:700}
+ .ln .c{color:rgba(244,241,234,.45)}
+ .ln .g{color:var(--green)}
+ .ln .y{color:var(--gold)}
+ .input-line{display:flex;align-items:center;gap:8px;padding:0 14px 14px}
+ .input-line .p{color:var(--gold);font-weight:700;font-size:12.5px}
+ .input-line input{flex:1;background:transparent;border:none;outline:none;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:12.5px;caret-color:transparent}
+ .blink{display:inline-block;width:8px;height:14px;background:var(--gold);animation:bl 1s steps(2) infinite;vertical-align:-2px}
+ @keyframes bl{50%{opacity:0}}
+ /* connector grid (ASCII style) */
+ .connectors{margin-top:18px}
+ .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:0;border-left:2px solid var(--paper);border-top:2px solid var(--paper)}
+ .tile{padding:12px 8px;border-right:2px solid var(--paper);border-bottom:2px solid var(--paper);font-size:10.5px;letter-spacing:.04em;text-transform:lowercase;color:rgba(244,241,234,.6);text-align:center;position:relative;transition:all .12s}
+ .tile::before{content:"[ ]";color:rgba(244,241,234,.35);display:block;font-size:9px;margin-bottom:4px;letter-spacing:.1em}
+ .tile.active{background:var(--gold);color:var(--ink)}
+ .tile.active::before{content:"[x]";color:var(--ink)}
+ .tile:hover:not(.active){background:rgba(212,160,74,.12);color:var(--paper)}
+ /* manifesto strip */
+ .manifesto{margin-top:28px;border:2px solid var(--paper);padding:22px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
+ .m{font-size:12.5px;line-height:1.55}
+ .m h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700}
+ .m p{color:rgba(244,241,234,.78)}
+ /* footer */
+ .foot{margin-top:22px;border:2px solid var(--paper);padding:10px 14px;display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.65)}
+</style>
+</head>
+<body>
+<div class="wrap">
+
+ <nav class="navbar">
+ <div class="left">
+ <b>commerce-claw</b>
+ <span class="c">v0.9.4 // 56 connectors online</span>
+ </div>
+ <div class="right">
+ <a href="#">/connectors</a>
+ <a href="#">/runs</a>
+ <a href="#">/docs</a>
+ <a href="#">/pricing</a>
+ <a href="#" class="cta">$ start →</a>
+ </div>
+ </nav>
+
+ <section class="hero">
+ <div class="hero-left">
+ <pre class="ascii">┌──────────────────────────────────────────────┐
+│ >_ ONE LINE. THE RIGHT TOOL. THE WORK DONE. │
+└──────────────────────────────────────────────┘</pre>
+ <h1>type a <span class="accent">sentence.</span><br>the agent <span class="ed"><em>picks the tool</em></span><br>and runs <span class="accent">the action.</span></h1>
+ <p class="deck">Commerce Claw is one prompt across <b>56 connectors</b> — Stripe, Shopify, Slack, Cloudflare, HubSpot, Notion, Discord. <b>No graph builders.</b> No webhook glue. The line you type IS the audit log.</p>
+ <div class="stat-row">
+ <span class="stat">routing latency <b>240ms</b></span>
+ <span class="stat">connectors <b>56/56</b></span>
+ <span class="stat">runs/day <b>14,802</b></span>
+ <span class="stat">writes gated <b>admin-arm</b></span>
+ </div>
+ <div class="ctas">
+ <a href="#" class="pri">$ install</a>
+ <a href="#" class="sec">man claw(1)</a>
+ </div>
+ </div>
+
+ <div class="term" aria-label="Live terminal demo">
+ <div class="term-head">
+ <span>~/claw — fish — 80×24</span>
+ <span class="lights"><span class="l"></span><span class="l"></span><span class="l gold"></span></span>
+ </div>
+ <div class="term-body">
+ <span class="ln"><span class="c"># last 4 runs (tail -f)</span></span>
+ <span class="ln"><span class="p">claw></span> <span class="y">tag deal</span> 8821 <span class="y">in hubspot</span> as "won-q2" <span class="g">✓ 312ms</span></span>
+ <span class="ln"><span class="p">claw></span> <span class="y">post</span> #releases <span class="y">in slack</span>: "v3.4 shipped" <span class="g">✓ 198ms</span></span>
+ <span class="ln"><span class="p">claw></span> <span class="y">purge</span> /api/* <span class="y">on cloudflare</span> <span class="g">✓ 540ms</span></span>
+ <span class="ln"><span class="p">claw></span> <span class="y">create page</span> "Q2 Plan" <span class="y">in notion</span> <span class="g">✓ 410ms</span></span>
+ <span class="ln"></span>
+ <span class="ln"><span class="c"># your turn — type below</span></span>
+ <span class="ln" id="parsed"><span class="c">// parser idle</span></span>
+ </div>
+ <div class="input-line">
+ <span class="p">claw></span>
+ <input id="prompt" value="refund order 1234 on shopify" autocomplete="off" spellcheck="false">
+ <span class="blink"></span>
+ </div>
+ </div>
+ </section>
+
+ <section class="connectors">
+ <div class="box">
+ <div class="box-head">
+ <span><b>// connector grid</b> — 56 online · live route</span>
+ <span class="c">$ claw connectors --live</span>
+ </div>
+ <div class="grid" id="grid"></div>
+ </div>
+ </section>
+
+ <section class="manifesto">
+ <div class="m">
+ <h4>01 / no canvas</h4>
+ <p>If your workflow needs a node graph to read, it's already broken. Claw runs from a single line. The line is the spec.</p>
+ </div>
+ <div class="m">
+ <h4>02 / read by default</h4>
+ <p>Every connector ships read-only. Write scopes require an admin to click-to-arm. The arm is logged with the prompt that triggered it.</p>
+ </div>
+ <div class="m">
+ <h4>03 / replay-able</h4>
+ <p>Idempotency keys per run. Re-running the same sentence is a no-op. Paste a run into Slack and your teammate gets the same result.</p>
+ </div>
+ <div class="m">
+ <h4>04 / vendor-flat</h4>
+ <p>Stripe, Shopify, Cloudflare, HubSpot — none of them are "primary". Routing weight is uniform. You don't migrate to Claw, you wrap it around what you already pay for.</p>
+ </div>
+ </section>
+
+ <footer class="foot">
+ <span>businessclaw.agentabrams.com</span>
+ <span>built for operators · not no-coders</span>
+ <span>$ exit 0</span>
+ </footer>
+
+</div>
+
+<script>
+ const C = ['stripe','shopify','slack','cloudflare','hubspot','notion','discord','linear',
+ 'github','vercel','postmark','plaid','klaviyo','intercom','sendgrid','twilio',
+ 'gmail','gcal','drive','figma','asana','jira','zendesk','airtable',
+ 'segment','mixpanel','amplitude','aws','gcp','azure','railway','fly',
+ 'auth0','okta','clerk','retool','metabase','snowflake','bigquery','postgres',
+ 'mongo','redis','kafka','algolia','typesense','sentry','datadog','statsig',
+ 'launchdark','pagerduty','opsgenie','zoom','loom','calendly','docusign','qbooks'];
+ const grid = document.getElementById('grid');
+ C.forEach(n=>{
+ const d=document.createElement('div');
+ d.className='tile';d.dataset.name=n;d.textContent=n;
+ grid.appendChild(d);
+ });
+ const prompt = document.getElementById('prompt');
+ const parsed = document.getElementById('parsed');
+ function light(){
+ const v=prompt.value.toLowerCase();
+ [...grid.children].forEach(t=>t.classList.toggle('active', v.includes(t.dataset.name)));
+ const vendor = C.find(c=>v.includes(c));
+ const verb=(v.match(/\b(refund|create|cancel|update|tag|post|purge|notify|send|archive)\b/)||[null])[0];
+ const obj=(v.match(/(?:order|deal|page|customer|domain|invoice)\s*#?\s*[\w-]+/)||[null])[0];
+ if(vendor && verb){
+ parsed.innerHTML = `<span class="c">// parsed →</span> verb=<span class="y">${verb}</span> object=<span class="y">${obj||'—'}</span> vendor=<span class="y">${vendor}</span> <span class="g">[arm to run]</span>`;
+ } else {
+ parsed.innerHTML = `<span class="c">// parser idle</span>`;
+ }
+ }
+ prompt.addEventListener('input', light);
+ light();
+</script>
+</body>
+</html>
diff --git a/runs/businessclaw-marketing/03-live-dashboard.html b/runs/businessclaw-marketing/03-live-dashboard.html
new file mode 100644
index 0000000..ec9540b
--- /dev/null
+++ b/runs/businessclaw-marketing/03-live-dashboard.html
@@ -0,0 +1,275 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Commerce Claw — Operations Desk</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<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=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+ :root{
+ --gold:#d4a04a; --ink:#0e0e10; --paper:#f4f1ea;
+ --rule:rgba(14,14,16,.12); --soft:rgba(14,14,16,.6);
+ --ok:#3a8a4a; --warn:#c98a2a;
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
+ a{color:inherit;text-decoration:none}
+ .wrap{max-width:1320px;margin:0 auto;padding:20px 28px 60px}
+ /* topbar */
+ .topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--rule)}
+ .brand{display:flex;align-items:center;gap:14px}
+ .logo{width:30px;height:30px;background:var(--ink);position:relative;display:inline-block}
+ .logo::before{content:"";position:absolute;inset:5px;border:2px solid var(--gold)}
+ .brand h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:24px;letter-spacing:-.01em}
+ .brand h1 b{color:var(--gold);font-style:normal;font-weight:500}
+ .nav{display:flex;gap:22px;font-size:13px;color:var(--soft)}
+ .nav a:hover{color:var(--ink)}
+ .nav .live{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
+ .nav .pulse{width:7px;height:7px;background:var(--ok);border-radius:50%;animation:pls 1.4s infinite}
+ @keyframes pls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
+ .nav .cta{background:var(--ink);color:var(--paper);padding:8px 14px;border:2px solid var(--ink);font-weight:500}
+ /* HERO row */
+ .hero{margin-top:22px;display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:stretch}
+ .hero-left{display:flex;flex-direction:column;gap:14px}
+ .head-block{background:#fff;border:2px solid var(--ink);padding:28px 30px}
+ .kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
+ .kicker .dot{width:6px;height:6px;background:var(--gold);display:inline-block;animation:pls 1.4s infinite}
+ h2.title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:54px;line-height:1.02;letter-spacing:-.012em}
+ h2.title em{font-style:italic;color:var(--gold)}
+ .deck{font-size:15px;line-height:1.6;color:var(--soft);max-width:580px;margin-top:14px}
+ .deck b{color:var(--ink);font-weight:500}
+ /* counter */
+ .counter-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;margin-top:24px;border-top:1px solid var(--rule)}
+ .counter{padding:18px 20px 18px 0;border-right:1px solid var(--rule)}
+ .counter:last-child{border-right:none}
+ .counter:not(:first-child){padding-left:20px}
+ .counter .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
+ .counter .val{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:38px;line-height:1;letter-spacing:-.01em}
+ .counter .val .gold{color:var(--gold)}
+ .counter .delta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ok);margin-top:4px}
+ /* CTA strip */
+ .cta-strip{display:flex;gap:10px;margin-top:22px;align-items:center}
+ .pri{background:var(--gold);color:var(--ink);padding:12px 18px;border:2px solid var(--gold);font-weight:600;font-size:13px;letter-spacing:.04em}
+ .sec{padding:12px 18px;border:2px solid var(--ink);font-weight:500;font-size:13px;letter-spacing:.04em}
+ .sec:hover{background:var(--ink);color:var(--paper)}
+ .micro{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--soft);letter-spacing:.06em}
+ /* DEMO widget — right hero */
+ .demo{background:var(--ink);color:var(--paper);border:2px solid var(--ink);display:flex;flex-direction:column}
+ .demo-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(244,241,234,.18);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.7)}
+ .demo-head .live{color:var(--gold);display:inline-flex;align-items:center;gap:8px}
+ .demo-head .pulse{width:7px;height:7px;background:var(--gold);border-radius:50%;animation:pls 1.4s infinite}
+ .prompt-row{padding:18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(244,241,234,.18)}
+ .prompt-row .car{font-family:'JetBrains Mono',monospace;color:var(--gold);font-weight:500}
+ .prompt-row input{flex:1;background:transparent;border:none;outline:none;color:var(--paper);font-family:'JetBrains Mono',monospace;font-size:14px;caret-color:var(--gold)}
+ .parse-strip{padding:12px 18px;display:flex;gap:14px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:rgba(244,241,234,.6);border-bottom:1px solid rgba(244,241,234,.18)}
+ .parse-strip span b{color:var(--gold);font-weight:500;letter-spacing:.04em}
+ .grid-wrap{padding:14px 12px;flex:1}
+ .grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
+ .tile{aspect-ratio:1/1;background:rgba(244,241,234,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:rgba(244,241,234,.5);text-transform:lowercase;letter-spacing:.02em;position:relative;transition:all .15s}
+ .tile .pdot{width:5px;height:5px;background:rgba(244,241,234,.25);border-radius:50%;margin-bottom:4px}
+ .tile.active{background:var(--gold);color:var(--ink)}
+ .tile.active .pdot{background:var(--ink);animation:pls 1s infinite}
+ .tile.warm{background:rgba(212,160,74,.18)}
+ .tile.warm .pdot{background:var(--gold)}
+ /* AUDIT TRAIL row */
+ .audit{margin-top:22px;background:#fff;border:2px solid var(--ink)}
+ .audit-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
+ .audit-head .right{color:var(--soft)}
+ .row{display:grid;grid-template-columns:90px 110px 1fr 130px 60px;gap:18px;padding:11px 20px;border-bottom:1px solid var(--rule);font-family:'JetBrains Mono',monospace;font-size:12px;align-items:center}
+ .row:last-child{border-bottom:none}
+ .row .t{color:var(--soft);font-size:11px}
+ .row .v{font-weight:500}
+ .row .v.gold{color:var(--gold)}
+ .row .verb{font-family:'Inter',sans-serif;font-weight:500}
+ .row .stat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
+ .row .ms{color:var(--soft);font-size:11px;text-align:right}
+ /* FEATURE strip */
+ .feats{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:2px solid var(--ink)}
+ .ft{padding:24px 22px;border-right:1px solid var(--rule)}
+ .ft:last-child{border-right:none}
+ .ft .ic{width:34px;height:34px;border:2px solid var(--ink);position:relative;margin-bottom:14px}
+ .ft .ic::after{content:"";position:absolute;inset:5px;background:var(--gold)}
+ .ft h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:20px;line-height:1.2;margin-bottom:8px}
+ .ft p{font-size:13.5px;line-height:1.55;color:var(--soft)}
+ /* footer */
+ .foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
+</style>
+</head>
+<body>
+<div class="wrap">
+
+ <header class="topbar">
+ <div class="brand">
+ <span class="logo"></span>
+ <h1>Commerce <b>Claw</b></h1>
+ </div>
+ <nav class="nav">
+ <span class="live"><span class="pulse"></span>56 connectors live</span>
+ <a href="#">Connectors</a>
+ <a href="#">Runs</a>
+ <a href="#">Pricing</a>
+ <a href="#">Docs</a>
+ <a href="#" class="cta">Open desk →</a>
+ </nav>
+ </header>
+
+ <section class="hero">
+
+ <div class="hero-left">
+ <div class="head-block">
+ <div class="kicker"><span class="dot"></span>Operations desk · Tue 5 May 2026, 14:08 PT</div>
+ <h2 class="title">One sentence routes<br>across <em>fifty-six tools.</em></h2>
+ <p class="deck">Commerce Claw is the AI agent for operators. Type one command — <b>"refund order 1234 on shopify"</b> — and it picks the right connector among Stripe, Shopify, Slack, Cloudflare, HubSpot, Notion, Discord, and 49 others, then runs the action. Read scopes by default. Write scopes admin-armed. Every run logged.</p>
+
+ <div class="counter-row">
+ <div class="counter">
+ <div class="lbl">queries routed · last 24h</div>
+ <div class="val"><span id="counter">14,802</span> <span class="gold">·</span></div>
+ <div class="delta">▲ +1,204 vs prior 24h</div>
+ </div>
+ <div class="counter">
+ <div class="lbl">median latency</div>
+ <div class="val">240<span class="gold">ms</span></div>
+ <div class="delta">▼ −18ms wk/wk</div>
+ </div>
+ <div class="counter">
+ <div class="lbl">workspaces live</div>
+ <div class="val">1,408</div>
+ <div class="delta">▲ +37 today</div>
+ </div>
+ </div>
+
+ <div class="cta-strip">
+ <a href="#" class="pri">Start free →</a>
+ <a href="#" class="sec">Watch a 90-sec run</a>
+ <span class="micro">no card · 100 runs/mo free · SOC2 Type II</span>
+ </div>
+ </div>
+ </div>
+
+ <aside class="demo">
+ <div class="demo-head">
+ <span class="live"><span class="pulse"></span>Live router</span>
+ <span>req_8e91 · routed 240ms</span>
+ </div>
+ <div class="prompt-row">
+ <span class="car">▸</span>
+ <input id="prompt" value="refund order 1234 on shopify" autocomplete="off" spellcheck="false">
+ </div>
+ <div class="parse-strip" id="parse">
+ <span>verb <b>refund</b></span>
+ <span>object <b>order#1234</b></span>
+ <span>vendor <b>shopify</b></span>
+ <span>scope <b>orders.write</b></span>
+ <span>confidence <b>0.97</b></span>
+ </div>
+ <div class="grid-wrap">
+ <div class="grid" id="grid"></div>
+ </div>
+ </aside>
+ </section>
+
+ <section class="audit">
+ <div class="audit-head">
+ <span>Audit trail · live tail</span>
+ <span class="right">last 6 runs · routed across 5 connectors</span>
+ </div>
+ <div class="row"><span class="t">14:08:02</span><span class="v gold">shopify</span><span class="verb">refund order #1234 — $89.00 to card •••4242</span><span class="stat">▶ 240ms · ok</span><span class="ms">2s ago</span></div>
+ <div class="row"><span class="t">14:07:51</span><span class="v">slack</span><span class="verb">post #releases: "v3.4 shipped — changelog attached"</span><span class="stat">▶ 198ms · ok</span><span class="ms">13s ago</span></div>
+ <div class="row"><span class="t">14:07:34</span><span class="v">cloudflare</span><span class="verb">purge cache /api/* on agentabrams.com</span><span class="stat">▶ 540ms · ok</span><span class="ms">30s ago</span></div>
+ <div class="row"><span class="t">14:07:11</span><span class="v">hubspot</span><span class="verb">tag deal 8821 as "won-q2" + assign to Steve A.</span><span class="stat">▶ 312ms · ok</span><span class="ms">53s ago</span></div>
+ <div class="row"><span class="t">14:06:48</span><span class="v">notion</span><span class="verb">create page "Q2 Plan" in /workspace/ops</span><span class="stat">▶ 410ms · ok</span><span class="ms">1m 16s ago</span></div>
+ <div class="row"><span class="t">14:06:22</span><span class="v">stripe</span><span class="verb">issue invoice cust_8821 net-30 · $4,200.00</span><span class="stat">▶ 287ms · ok</span><span class="ms">1m 42s ago</span></div>
+ </section>
+
+ <section class="feats">
+ <div class="ft">
+ <div class="ic"></div>
+ <h3>Vendor-flat routing</h3>
+ <p>Stripe, Shopify, Cloudflare — none are "primary". Routing weight is uniform; you wrap Claw around what you already pay for.</p>
+ </div>
+ <div class="ft">
+ <div class="ic"></div>
+ <h3>Read-default trust</h3>
+ <p>Every connector ships read-only. Write scopes need an admin click-to-arm. The arm is logged with the prompt that requested it.</p>
+ </div>
+ <div class="ft">
+ <div class="ic"></div>
+ <h3>Replay-able runs</h3>
+ <p>Idempotency keys per run. Re-running the same sentence is a no-op. Paste a run ID into Slack — your teammate gets the same result.</p>
+ </div>
+ <div class="ft">
+ <div class="ic"></div>
+ <h3>The line is the log</h3>
+ <p>The English sentence you typed is the audit record. No second system to reconcile. SOC2 Type II audit ships with every workspace.</p>
+ </div>
+ </section>
+
+ <footer class="foot">
+ <span>businessclaw.agentabrams.com</span>
+ <span>56 connectors · 240ms median · 14,802 routed/24h</span>
+ <span>SOC2 Type II · GDPR · CCPA</span>
+ </footer>
+
+</div>
+
+<script>
+ // 56 connectors with status flavor
+ const C = ['stripe','shopify','slack','cloudflare','hubspot','notion','discord','linear',
+ 'github','vercel','postmark','plaid','klaviyo','intercom','sendgrid','twilio',
+ 'gmail','gcal','drive','figma','asana','jira','zendesk','airtable',
+ 'segment','mixpanel','amplitude','aws','gcp','azure','railway','fly',
+ 'auth0','okta','clerk','retool','metabase','snowflake','bigquery','postgres',
+ 'mongo','redis','kafka','algolia','typesense','sentry','datadog','statsig',
+ 'launchdark','pagerduty','opsgenie','zoom','loom','calendly','docusign','qbooks'];
+ const grid = document.getElementById('grid');
+ C.forEach(n=>{
+ const d=document.createElement('div');
+ d.className='tile';d.dataset.name=n;
+ d.innerHTML = `<span class="pdot"></span><span>${n}</span>`;
+ grid.appendChild(d);
+ });
+
+ // counter ticking up
+ let counter = 14802;
+ const cel = document.getElementById('counter');
+ setInterval(()=>{
+ counter += Math.floor(Math.random()*3)+1;
+ cel.textContent = counter.toLocaleString();
+ }, 1800);
+
+ // Random pulse on idle tiles (gives "live" feel)
+ setInterval(()=>{
+ [...grid.children].forEach(t=>t.classList.remove('warm'));
+ const sample = [...grid.children].filter(t=>!t.classList.contains('active'));
+ for(let i=0;i<5;i++){
+ const pick = sample[Math.floor(Math.random()*sample.length)];
+ if(pick) pick.classList.add('warm');
+ }
+ }, 1100);
+
+ const prompt = document.getElementById('prompt');
+ const parse = document.getElementById('parse');
+ function light(){
+ const v=prompt.value.toLowerCase();
+ [...grid.children].forEach(t=>t.classList.toggle('active', v.includes(t.dataset.name)));
+ const vendor = C.find(c=>v.includes(c)) || '—';
+ const verb=(v.match(/\b(refund|create|cancel|update|tag|post|purge|notify|send|archive|invoice)\b/)||['—'])[0];
+ const obj=(v.match(/(?:order|deal|page|customer|domain|invoice)\s*#?\s*[\w-]+/)||['—'])[0];
+ const scope = verb==='refund'?'orders.write':verb==='post'?'chat.write':verb==='purge'?'zone.cache':verb+'.scope';
+ const conf = vendor!=='—' && verb!=='—' ? (0.85 + Math.random()*0.14).toFixed(2) : '—';
+ parse.innerHTML = `
+ <span>verb <b>${verb}</b></span>
+ <span>object <b>${obj}</b></span>
+ <span>vendor <b>${vendor}</b></span>
+ <span>scope <b>${scope}</b></span>
+ <span>confidence <b>${conf}</b></span>
+ `;
+ }
+ prompt.addEventListener('input', light);
+ light();
+</script>
+</body>
+</html>
diff --git a/runs/businessclaw-marketing/competitors.md b/runs/businessclaw-marketing/competitors.md
new file mode 100644
index 0000000..8d94d1a
--- /dev/null
+++ b/runs/businessclaw-marketing/competitors.md
@@ -0,0 +1,199 @@
+# Commerce Claw — Competitive Differentiation Brief
+
+**Target:** [businessclaw.agentabrams.com](https://businessclaw.agentabrams.com/) — *"56 connectors. One command."*
+**Category:** AI-driven workflow automation / integration platform for SMBs
+**Compiled:** 2026-05-05
+**Source basis:** Public pricing pages and policy pages of each named competitor, fetched live.
+
+---
+
+## 1. Competitor One-Liners + Structural Weaknesses
+
+### Zapier
+- **Positioning:** "Most-connected automation platform" — 7,000–8,000 app integrations, build multi-step "Zaps" in a visual editor.
+- **Public pricing breakpoint:** Free $0 (100 tasks/mo, 2-step Zaps); **Professional starts $19.99/mo** (annual); Team $69/mo; Enterprise quote-only.
+- **Structural weakness:** Zapier is a *workflow construction kit* — the user has to design the trigger → action graph up-front and pay per task forever. Commerce Claw flips the contract: type the command, the AI picks the connector and executes once. No graph to build, no per-task meter to babysit.
+
+### Make (formerly Integromat)
+- **Positioning:** Visual scenario builder with branching/iterators — power-user friendly.
+- **Public pricing breakpoint:** Free $0 (1,000 ops/mo, 2 active scenarios, 15-min minimum interval); **Core $12/mo** (10K ops); Pro $21; Teams $38; Enterprise quote.
+- **Structural weakness:** Make's free tier throttles to 15-minute polling minimums and 2 scenarios — a hard ceiling that pushes anyone real onto a paid plan. Commerce Claw runs on demand (you ask, it acts) instead of on a polling clock.
+
+### n8n
+- **Positioning:** "Fair-code" self-hostable workflow engine for technical teams.
+- **Public pricing breakpoint:** Community self-hosted free; **Cloud Starter €20/mo** (2,500 executions); Pro €50; self-hosted Business €667/mo; Enterprise quote.
+- **Structural weakness:** n8n requires you to own the infra story (host, upgrade, secure) OR pay for cloud — and you still build the node graph by hand. No conversational layer; LLM nodes exist but you wire them in.
+
+### Pipedream
+- **Positioning:** Code-first integration platform — write JS/Python steps between connector nodes.
+- **Public pricing breakpoint:** Free tier (≈10K credits/mo); **Basic $19/mo**; Advanced $49/mo; Business custom. (Plan names per public pricing page; exact USD shown on pipedream.com/pricing.)
+- **Structural weakness:** Aimed at developers — you write code per workflow. Locks out the SMB owner who doesn't have an engineer.
+
+### Tray.io (Tray.ai)
+- **Positioning:** "Governed platform for agents, MCP, intelligent automation, and integration" — enterprise.
+- **Public pricing breakpoint:** **Sales-led / quote-only.** No public price, no free tier; "Tray Advantage" and "Tray Advantage Plus" tiers gated behind demo request.
+- **Structural weakness:** No price → no free try → minimum 4-figure annual commit, sales cycle of weeks. Commerce Claw's "log in, see 56 connectors live" beats this on time-to-value by orders of magnitude.
+
+### Workato
+- **Positioning:** Enterprise iPaaS with strong governance + recipe library.
+- **Public pricing breakpoint:** **Sales-led, no public price.** Industry-cited entry typically $10K+/year for the lowest tier.
+- **Structural weakness:** Same opacity tax as Tray. Built for IT-led procurement, not for the operator who wants to automate something today.
+
+### IFTTT
+- **Positioning:** Consumer-grade "if this then that" applets — smart-home, social, lifestyle.
+- **Public pricing breakpoint:** Free $0 (2 applets); **Pro $2.99/mo** (20 applets); Pro+ $8.99/mo (unlimited).
+- **Structural weakness:** Two-step "if this, then that" only — not a real business automation tool. 900-brand integration list skews lifestyle (Alexa, Spotify, Hue) rather than commerce/CRM/billing.
+
+### Bardeen.ai
+- **Positioning:** Browser-extension automation with AI agents — heavy on web scraping + enrichment.
+- **Public pricing breakpoint:** Free 100 credits/mo; **Basic $10/mo** (100 credits); Premium $50/mo (1,000 credits); Enterprise custom.
+- **Structural weakness:** Credit model penalizes the exact use cases SMBs care about — enrichment is 3 credits/row, scraping is 1 credit/row. A real workday of activity blows through Premium's 1,000 credits. Also requires Chrome extension install.
+
+### Relay.app
+- **Positioning:** "AI-first" workflow tool with human-in-the-loop steps.
+- **Public pricing breakpoint:** Free (200 steps, 500 AI credits); **Professional $19/mo** (750 steps); Team $59/mo; Enterprise custom.
+- **Structural weakness:** Only ~100–200 integrations vs. 56-but-deep at Commerce Claw. Step + AI-credit dual meter — you can run out of one while still having the other. No unified "type the command" surface.
+
+---
+
+## 2. Differentiation Vectors — Marketing-Ready Copy Block
+
+> **Headline candidates:**
+> 1. **Don't build the workflow. Just ask for the result.**
+> 2. **56 connectors. One command. Zero "Zaps" to maintain.**
+> 3. **The automation tool you can use without learning the automation tool.**
+
+**Body copy (drop-in for landing-page hero / about section):**
+
+Every other automation platform — Zapier, Make, n8n, Tray, Workato — sells you a workflow builder. You become the architect: drag the trigger, wire the steps, map the fields, hope the polling interval is right, then pay per task forever. Commerce Claw inverts that. You type *what you want done* — "send last week's Stripe payouts to our Slack #finance channel" — and the AI picks the connector, runs the action once, asks for approval if it's sensitive, and logs it.
+
+**The moats no competitor can ship without rebuilding their stack:**
+
+1. **Conversational, not constructive.** Zapier, Make, n8n and Tray each require you to design the workflow graph before anything runs. Commerce Claw needs a sentence.
+2. **Per-user OAuth isolation.** Every connector token is bound to the user who authorized it — no shared service accounts, no "the integrations admin is on PTO" problem. Workato and Tray require central-IT OAuth setup; Commerce Claw is self-serve per seat.
+3. **AES-256-GCM encryption with key_id rotation.** Every credential at rest is wrapped with a versioned key so rotation doesn't require a re-auth storm. Most competitors disclose "encryption at rest" with no rotation story.
+4. **Sensitive-action approval queue.** Spending money, sending external email, deleting records — those route to a human-approval queue *before* execution. Zapier and Make execute the moment the trigger fires; the rollback is on you.
+5. **Full audit trail on every command.** Who asked, what model interpreted it, which connector ran, what arguments, what response. Workato and Tray ship this in their *enterprise* tiers only; Commerce Claw ships it default.
+6. **Zero workflow-building required.** No graph, no node editor, no "Zap." The 56 connectors are pre-wired and ready the second you log in.
+7. **No per-task meter on the critical path.** Zapier's $19.99 starts you at 750 tasks; Make caps your free tier at 1,000 ops; Bardeen makes you hoard credits. Commerce Claw's quota lives at the conversation layer, not the per-action layer.
+
+---
+
+## 3. Competitor Matrix (drop-in HTML)
+
+```html
+<table class="competitor-matrix" style="width:100%;border-collapse:collapse;font-family:system-ui,sans-serif;font-size:14px;">
+ <thead>
+ <tr style="background:#111;color:#fff;text-align:left;">
+ <th style="padding:10px;">Platform</th>
+ <th style="padding:10px;">Entry Price (public)</th>
+ <th style="padding:10px;">Free Tier</th>
+ <th style="padding:10px;">Build Model</th>
+ <th style="padding:10px;">Integrations</th>
+ <th style="padding:10px;">Approval Queue</th>
+ <th style="padding:10px;">AI-Native Command Layer</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr style="background:#fafafa;border-top:2px solid #111;">
+ <td style="padding:10px;font-weight:700;">Commerce Claw</td>
+ <td style="padding:10px;">—</td>
+ <td style="padding:10px;">Yes</td>
+ <td style="padding:10px;">Conversational ("type the command")</td>
+ <td style="padding:10px;">56 (pre-wired)</td>
+ <td style="padding:10px;">Yes (default)</td>
+ <td style="padding:10px;">Yes (the product)</td>
+ </tr>
+ <tr><td style="padding:10px;">Zapier</td>
+ <td style="padding:10px;">$19.99/mo</td>
+ <td style="padding:10px;">Yes (100 tasks)</td>
+ <td style="padding:10px;">Visual Zap builder</td>
+ <td style="padding:10px;">7,000–8,000</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">Copilot (assist only)</td>
+ </tr>
+ <tr style="background:#fafafa;"><td style="padding:10px;">Make</td>
+ <td style="padding:10px;">$12/mo</td>
+ <td style="padding:10px;">Yes (1,000 ops, 15-min poll)</td>
+ <td style="padding:10px;">Visual scenario builder</td>
+ <td style="padding:10px;">3,000+</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">No</td>
+ </tr>
+ <tr><td style="padding:10px;">n8n</td>
+ <td style="padding:10px;">€20/mo (cloud) / Free self-host</td>
+ <td style="padding:10px;">Self-host only</td>
+ <td style="padding:10px;">Node-graph editor</td>
+ <td style="padding:10px;">400+ (every integration on paid)</td>
+ <td style="padding:10px;">Manual node</td>
+ <td style="padding:10px;">LLM nodes (you wire them)</td>
+ </tr>
+ <tr style="background:#fafafa;"><td style="padding:10px;">Pipedream</td>
+ <td style="padding:10px;">~$19/mo Basic</td>
+ <td style="padding:10px;">Yes</td>
+ <td style="padding:10px;">Code-first (JS/Python steps)</td>
+ <td style="padding:10px;">2,000+</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">No</td>
+ </tr>
+ <tr><td style="padding:10px;">Tray.ai</td>
+ <td style="padding:10px;">Quote only</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">Visual + governance</td>
+ <td style="padding:10px;">600+</td>
+ <td style="padding:10px;">Enterprise tier</td>
+ <td style="padding:10px;">Agent layer (sales-led)</td>
+ </tr>
+ <tr style="background:#fafafa;"><td style="padding:10px;">Workato</td>
+ <td style="padding:10px;">Quote only (~$10K+/yr)</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">Recipe builder</td>
+ <td style="padding:10px;">1,000+</td>
+ <td style="padding:10px;">Enterprise tier</td>
+ <td style="padding:10px;">Workato AI (add-on)</td>
+ </tr>
+ <tr><td style="padding:10px;">IFTTT</td>
+ <td style="padding:10px;">$2.99/mo Pro</td>
+ <td style="padding:10px;">Yes (2 applets)</td>
+ <td style="padding:10px;">If-this-then-that applets</td>
+ <td style="padding:10px;">900 services</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">Pro+ AI services</td>
+ </tr>
+ <tr style="background:#fafafa;"><td style="padding:10px;">Bardeen.ai</td>
+ <td style="padding:10px;">$10/mo Basic</td>
+ <td style="padding:10px;">Yes (100 credits)</td>
+ <td style="padding:10px;">Browser-extension playbooks</td>
+ <td style="padding:10px;">100+</td>
+ <td style="padding:10px;">No</td>
+ <td style="padding:10px;">Magic Box (assist)</td>
+ </tr>
+ <tr><td style="padding:10px;">Relay.app</td>
+ <td style="padding:10px;">$19/mo Professional</td>
+ <td style="padding:10px;">Yes (200 steps, 500 AI credits)</td>
+ <td style="padding:10px;">Visual + AI steps</td>
+ <td style="padding:10px;">100–200</td>
+ <td style="padding:10px;">Yes (human-in-loop)</td>
+ <td style="padding:10px;">AI steps inside a flow</td>
+ </tr>
+ </tbody>
+</table>
+```
+
+---
+
+## 4. Three Hero One-Liners (Steve drops directly into hero)
+
+1. **"Don't build the workflow. Just ask for the result."** — every competitor sells the builder; Commerce Claw sells the outcome.
+2. **"56 connectors, pre-wired. Zero Zaps to maintain."** — directly contrasts the 7,000-app maze of Zapier/Make against curated, ready-on-login depth.
+3. **"Encrypted per-user keys. Approval queue on the dangerous stuff. Audit trail on everything."** — the trust triad no $19 competitor ships by default.
+
+---
+
+## 5. Notes on Source Confidence
+
+- Zapier, Make, n8n, IFTTT, Bardeen, Relay, Tray prices: fetched live from each public pricing page on 2026-05-05.
+- Workato + Tray confirmed sales-led with no public price.
+- Pipedream prices reflect the published Free/Basic/Advanced/Business structure from `pipedream.com/pricing` (the page is JS-rendered; figures match Pipedream's public docs).
+- All integration counts are the vendor's own marketing figure as of fetch date.
+- Commerce Claw self-claims (56 connectors, AES-256-GCM with key_id, approval queue, audit trail, per-user OAuth) are taken from the project's own technical inventory and should be verified once before public launch.
(oldest)
·
back to Website Analysis
·
(newest)