← back to Website Analysis
runs/businessclaw-marketing/03-live-dashboard.html
276 lines
<!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>