← back to Website Analysis
runs/businessclaw-2026-05-05-2018/report.html
210 lines
<!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>