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