`runs/businessclaw-marketing/01-editorial.html`

191 lines
<!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 &nbsp;·&nbsp; No. 01 &nbsp;·&nbsp; Tuesday, May 5, 2026</div>
      <div class="nameplate">Commerce <em class="amp">&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> &nbsp;·&nbsp; Object <b>order#1234</b> &nbsp;·&nbsp; Vendor <b class="gold">shopify</b> &nbsp;·&nbsp; 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 &amp; 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> &nbsp;·&nbsp; Object <b>${object}</b> &nbsp;·&nbsp; Vendor <b class="gold">${vendor}</b> &nbsp;·&nbsp; 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>