Omar SobhandClaude Opus 4.8
fb59378aa2
Agents can now provision their sandbox on a connected fleet node instead of the gateway host. Local stays the strict default, so existing agents are byte-for- byte unaffected until explicitly placed elsewhere. Security parity: the daemon links the REAL cm-sandbox DockerDriver and runs the typed container ops (sb_provision/sb_exec/sb_destroy/sb_health/sb_list) through it — identical hardening (cap-drop ALL, seccomp, no-net, read-only, non-root) to local sandboxes. cm-sandbox spec types are now Serialize/Deserialize so the spec crosses the channel. - cm-api: RemoteDriver (impl SandboxDriver over the node channel) + HubDriverProvider (impl cm_runtime::NodeDriverProvider, hands out a driver only for connected nodes via a sync online set) + NodeHub.call/is_connected. AppState.with_node_hub so the hub is shared with the placement provider. - cm-runtime SandboxManager: driver_for(node_id) routes by the recorded agent_containers.node_id (local default = existing driver, identical path); placement_node() reads the workspace setting and falls back to local if the node is offline; exec/release route accordingly. NodeDriverProvider trait. - DB: 0020_workspace_placement + repo (for_agent/get/set/clear). - main.rs: build the NodeHub first; inject HubDriverProvider into the agent manager + share the hub with AppState. - API+UI: GET/PUT /api/fleet/placement + a "Run agents on: Local / <node>" selector in the Fleet overview. Note: a node must be able to pull the agent image (the daemon docker-pulls it); interactive PTY for agent containers on remote nodes is not wired (Terminal app stays local) — the in-dashboard node shell already covers host access. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
345 lines
36 KiB
HTML
345 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<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=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; background: #08080a; }
|
|
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
@keyframes cm-flow { to { stroke-dashoffset: -24; } }
|
|
@keyframes cm-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
|
|
@keyframes cm-halo { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
|
|
@keyframes cm-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="background:#08080a; color:#f3f3f5; min-height:100vh; overflow-x:hidden;">
|
|
|
|
<!-- NAV -->
|
|
<div style="position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; padding:16px 32px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(8,8,10,.72); backdrop-filter:blur(14px);">
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
<svg width="24" height="24" viewBox="0 0 22 22" fill="none">
|
|
<path d="M11 3 L18.5 17 L3.5 17 Z" stroke="#ff6f61" stroke-width="1.3" stroke-linejoin="round" opacity="0.55"></path>
|
|
<circle cx="11" cy="3.5" r="2.4" fill="#ff6f61"></circle><circle cx="18" cy="17" r="2.4" fill="#ff6f61"></circle><circle cx="4" cy="17" r="2.4" fill="#ff6f61"></circle>
|
|
</svg>
|
|
<span style="font-size:17px; font-weight:700; letter-spacing:-.01em;">Clawmates</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="display:flex; align-items:center; gap:28px; font-size:14px; color:#b5b5bd;">
|
|
<span style="cursor:pointer;">Platform</span>
|
|
<span style="cursor:pointer;">Topologies</span>
|
|
<span style="cursor:pointer;">Safety</span>
|
|
<span style="cursor:pointer;">Docs</span>
|
|
</div>
|
|
<div style="width:1px; height:22px; background:rgba(255,255,255,.1); margin:0 22px;"></div>
|
|
<span style="font-size:14px; color:#b5b5bd; cursor:pointer;">Sign in</span>
|
|
<div style="display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); color:#2a0d0a; font-size:14px; font-weight:700; cursor:pointer;" style-hover="filter:brightness(1.07);">Get started</div>
|
|
</div>
|
|
|
|
<!-- HERO -->
|
|
<div style="position:relative; max-width:1240px; margin:0 auto; padding:88px 32px 80px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;">
|
|
<div style="position:absolute; top:-40px; left:30%; width:520px; height:420px; background:radial-gradient(circle, rgba(255,111,97,.13), transparent 68%); pointer-events:none;"></div>
|
|
|
|
<div style="position:relative;">
|
|
<div style="display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:#ff8a7a; padding:6px 11px; border-radius:7px; border:1px solid rgba(255,111,97,.25); background:rgba(255,111,97,.06); margin-bottom:26px;">
|
|
<span style="width:6px; height:6px; border-radius:50%; background:#ff6f61; animation:cm-blink 1.6s infinite;"></span>MULTI-AGENT PLATFORM
|
|
</div>
|
|
<h1 style="font-size:62px; line-height:1.02; font-weight:700; letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance;">Deploy agents at<br>any scale.</h1>
|
|
<p style="font-size:18px; line-height:1.6; color:#a8a8b0; max-width:480px; margin:0 0 32px; text-wrap:pretty;">Every unit of work is a <span style="color:#f3f3f5; font-weight:600;">topology</span> — a graph of role-slots bound to real AI agents. Compose and run agentic systems from a single claw up to a whole org, on a durable, crash-resumable runner.</p>
|
|
<div style="display:flex; gap:12px; margin-bottom:30px;">
|
|
<div style="display:flex; align-items:center; gap:8px; padding:13px 22px; border-radius:10px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); color:#2a0d0a; font-size:15px; font-weight:700; cursor:pointer;" style-hover="filter:brightness(1.07);">Start deploying →</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:13px 22px; border-radius:10px; border:1px solid rgba(255,255,255,.14); color:#e6e6ea; font-size:15px; font-weight:600; cursor:pointer;" style-hover="background:rgba(255,255,255,.04);">Read the paper</div>
|
|
</div>
|
|
<div style="display:flex; flex-wrap:wrap; gap:8px 18px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#6a6a72;">
|
|
<span style="color:#5ec8d8;">12 topologies</span><span>·</span><span>durable runner</span><span>·</span><span style="color:#5fd08a;">§15-safe</span><span>·</span><span>self-hostable</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hero constellation panel -->
|
|
<div style="position:relative; height:420px; border-radius:16px; border:1px solid rgba(255,255,255,.07); background:radial-gradient(120% 100% at 60% 30%, #0f0f14, #0a0a0c); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4);">
|
|
<div style="position:absolute; top:14px; left:16px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:#5a5a62;">GROWTH TEAM · hub-spoke · running</div>
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="position:absolute; inset:0; width:100%; height:100%;">
|
|
<path d="M50,52 C40,38 34,32 24,26" fill="none" stroke="rgba(94,200,216,.5)" stroke-width="1.4" stroke-dasharray="3 4" vector-effect="non-scaling-stroke" style="animation:cm-flow 1.2s linear infinite;"></path>
|
|
<path d="M50,52 C40,64 34,70 26,76" fill="none" stroke="rgba(94,200,216,.5)" stroke-width="1.4" stroke-dasharray="3 4" vector-effect="non-scaling-stroke" style="animation:cm-flow 1.4s linear infinite;"></path>
|
|
<path d="M50,52 C52,38 53,28 54,18" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="1.3" vector-effect="non-scaling-stroke"></path>
|
|
<path d="M50,52 C64,46 72,40 80,32" fill="none" stroke="rgba(255,255,255,.12)" stroke-width="1.3" vector-effect="non-scaling-stroke"></path>
|
|
<path d="M50,52 C64,58 72,66 80,74" fill="none" stroke="rgba(255,111,97,.6)" stroke-width="1.6" stroke-dasharray="3 4" vector-effect="non-scaling-stroke" style="animation:cm-flow .9s linear infinite;"></path>
|
|
</svg>
|
|
<div style="position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:7px;">
|
|
<div style="width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#ff9a6a,#ff6f4a); display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:700; color:#2a0d05; box-shadow:0 0 38px rgba(255,111,97,.5);">A</div>
|
|
<span style="font-size:11px; font-weight:600;">Atlas</span>
|
|
</div>
|
|
<div style="position:absolute; left:24%; top:26%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="position:relative; width:40px; height:40px;"><div style="position:absolute; inset:0; border-radius:50%; background:rgba(94,200,216,.4); animation:cm-halo 1.9s ease-out infinite;"></div><div style="position:relative; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#06201f;">I</div></div><span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5ec8d8;">research…</span></div>
|
|
<div style="position:absolute; left:54%; top:18%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#e8c46a,#d89a3a); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#2a1d05;">N</div>
|
|
<div style="position:absolute; left:80%; top:32%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#c98af0,#9a5ad8); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#1a0a2a; opacity:.7;">S</div>
|
|
<div style="position:absolute; left:26%; top:76%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#8a9af0,#5a6ad8); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#0a0e2a;">E</div>
|
|
<div style="position:absolute; left:80%; top:74%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="position:relative; width:44px; height:44px;"><div style="position:absolute; inset:-5px; border-radius:50%; border:2px solid #ff6f61;"></div><div style="position:relative; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#2a0d0a;">M</div></div><span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#ff8a7a;">Morpheus</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEPLOY LADDER -->
|
|
<div style="max-width:1240px; margin:0 auto; padding:64px 32px;">
|
|
<div style="text-align:center; margin-bottom:48px;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5ec8d8; margin-bottom:14px;">THE DEPLOY LADDER</div>
|
|
<h2 style="font-size:40px; font-weight:700; letter-spacing:-.03em; margin:0 0 14px;">One model, four scales.</h2>
|
|
<p style="font-size:17px; color:#a8a8b0; max-width:580px; margin:0 auto; line-height:1.55;">Each rung composes the one below — a company is staffed with teams, an org with companies. Pick a scale; we instantiate the topology and bind it to real, chattable claws.</p>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:16px;">
|
|
<div style="position:relative; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:#0d0d10; padding:22px; overflow:hidden;" style-hover="border-color:rgba(255,111,97,.35);">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62; margin-bottom:18px;">01 · SINGLE</div>
|
|
<svg width="36" height="36" viewBox="0 0 36 36" style="margin-bottom:16px;"><circle cx="18" cy="18" r="8" fill="none" stroke="#ff6f61" stroke-width="1.6"></circle><circle cx="18" cy="18" r="3" fill="#ff6f61"></circle></svg>
|
|
<div style="font-size:18px; font-weight:700; margin-bottom:6px;">A claw</div>
|
|
<div style="font-size:13px; color:#8a8a92; line-height:1.5;">One agent in a §15 sandbox. Chat with it, give it skills, point it at a task.</div>
|
|
</div>
|
|
<div style="position:relative; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:#0d0d10; padding:22px; overflow:hidden;" style-hover="border-color:rgba(255,111,97,.35);">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62; margin-bottom:18px;">02 · TEAM</div>
|
|
<svg width="36" height="36" viewBox="0 0 36 36" style="margin-bottom:16px;"><circle cx="18" cy="9" r="3.4" fill="#ff6f61"></circle><circle cx="9" cy="26" r="3.4" fill="#ff8a7a"></circle><circle cx="27" cy="26" r="3.4" fill="#ff8a7a"></circle><path d="M18 9 L9 26 M18 9 L27 26 M9 26 L27 26" stroke="rgba(255,111,97,.5)" stroke-width="1.3"></path></svg>
|
|
<div style="font-size:18px; font-weight:700; margin-bottom:6px;">A team</div>
|
|
<div style="font-size:13px; color:#8a8a92; line-height:1.5;">A topology of claws — lead, researchers, writer, critic — running one of 12 patterns.</div>
|
|
</div>
|
|
<div style="position:relative; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:#0d0d10; padding:22px; overflow:hidden;" style-hover="border-color:rgba(255,111,97,.35);">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62; margin-bottom:18px;">03 · COMPANY</div>
|
|
<svg width="36" height="36" viewBox="0 0 36 36" style="margin-bottom:16px;"><rect x="5" y="20" width="9" height="9" rx="2" fill="none" stroke="#ff6f61" stroke-width="1.5"></rect><rect x="22" y="6" width="9" height="9" rx="2" fill="none" stroke="#ff6f61" stroke-width="1.5"></rect><rect x="22" y="20" width="9" height="9" rx="2" fill="none" stroke="#ff6f61" stroke-width="1.5"></rect><path d="M14 24 L22 11 M14 24 L22 24" stroke="rgba(255,111,97,.5)" stroke-width="1.3"></path></svg>
|
|
<div style="font-size:18px; font-weight:700; margin-bottom:6px;">A company</div>
|
|
<div style="font-size:13px; color:#8a8a92; line-height:1.5;">Teams composed into a coordinating topology. Run the parent, run every child.</div>
|
|
</div>
|
|
<div style="position:relative; border-radius:14px; border:1px solid rgba(255,111,97,.3); background:linear-gradient(180deg,#150f12,#0d0d10); padding:22px; overflow:hidden;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#ff8a7a; margin-bottom:18px;">04 · ORG</div>
|
|
<svg width="36" height="36" viewBox="0 0 36 36" style="margin-bottom:16px;"><circle cx="18" cy="18" r="14" fill="none" stroke="rgba(255,111,97,.3)" stroke-width="1.2" stroke-dasharray="2 3"></circle><circle cx="18" cy="9" r="3" fill="#ff6f61"></circle><circle cx="27" cy="23" r="3" fill="#ff6f61"></circle><circle cx="9" cy="23" r="3" fill="#ff6f61"></circle><path d="M18 9 L27 23 L9 23 Z" stroke="rgba(255,111,97,.5)" stroke-width="1.3" fill="none"></path></svg>
|
|
<div style="font-size:18px; font-weight:700; margin-bottom:6px;">A whole org</div>
|
|
<div style="font-size:13px; color:#a8a8b0; line-height:1.5;">Companies under one roof. Recursive execution all the way down to the leaf claws.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TOPOLOGIES -->
|
|
<div style="border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#0a0a0c,#08080a);">
|
|
<div style="max-width:1240px; margin:0 auto; padding:72px 32px;">
|
|
<div style="display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap;">
|
|
<div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5ec8d8; margin-bottom:14px;">THE TAXONOMY</div>
|
|
<h2 style="font-size:40px; font-weight:700; letter-spacing:-.03em; margin:0 0 12px; max-width:620px; text-wrap:balance;">Twelve topologies.<br>Five execution patterns.</h2>
|
|
<p style="font-size:17px; color:#a8a8b0; max-width:520px; margin:0; line-height:1.55;">Classify a task, build the structure that fits it, and switch patterns without rewriting a thing — authority stays invariant across every one.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:14px;">
|
|
<sc-for list="{{ topologies }}" as="t" hint-placeholder-count="12">
|
|
<div style="border-radius:13px; border:1px solid rgba(255,255,255,.07); background:#0d0d10; padding:16px; transition:border-color .2s;" style-hover="border-color:rgba(255,255,255,.16);">
|
|
<div style="height:88px; margin-bottom:12px; display:flex; align-items:center; justify-content:center;">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:100px; height:88px;">
|
|
<sc-for list="{{ t.links }}" as="l" hint-placeholder-count="4">
|
|
<line x1="{{ l.x1 }}" y1="{{ l.y1 }}" x2="{{ l.x2 }}" y2="{{ l.y2 }}" stroke="{{ t.color }}" stroke-width="1.3" stroke-opacity="0.4" stroke-dasharray="{{ l.dash }}"></line>
|
|
</sc-for>
|
|
<sc-for list="{{ t.nodes }}" as="n" hint-placeholder-count="5">
|
|
<sc-if value="{{ n.isRect }}" hint-placeholder-val="{{ false }}">
|
|
<rect x="{{ n.rx }}" y="{{ n.ry }}" width="12" height="12" rx="2.5" fill="{{ t.color }}"></rect>
|
|
</sc-if>
|
|
<sc-if value="{{ n.isCircle }}" hint-placeholder-val="{{ true }}">
|
|
<circle cx="{{ n.x }}" cy="{{ n.y }}" r="{{ n.r }}" fill="{{ t.color }}"></circle>
|
|
</sc-if>
|
|
</sc-for>
|
|
</svg>
|
|
</div>
|
|
<div style="font-size:15px; font-weight:700; margin-bottom:3px;">{{ t.name }}</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">{{ t.kind }}</div>
|
|
</div>
|
|
</sc-for>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RECURSIVE EXECUTION -->
|
|
<div style="max-width:1240px; margin:0 auto; padding:72px 32px;">
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;">
|
|
<div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5ec8d8; margin-bottom:14px;">RECURSIVE EXECUTION</div>
|
|
<h2 style="font-size:38px; font-weight:700; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance;">Run the parent, run everything beneath it.</h2>
|
|
<p style="font-size:17px; color:#a8a8b0; margin:0 0 26px; line-height:1.6;">Executing a node runs its entire sub-topology, all the way down to the leaf claws — on a durable runner that checkpoints every step.</p>
|
|
<div style="display:flex; flex-direction:column; gap:14px;">
|
|
<div style="display:flex; align-items:flex-start; gap:12px;"><span style="width:8px; height:8px; border-radius:2px; background:#5fd08a; margin-top:6px; flex:none;"></span><div><div style="font-size:15px; font-weight:600;">Crash-resumable</div><div style="font-size:13px; color:#8a8a92; line-height:1.5;">Checkpointed per step. A crash resumes where it left off — not from zero.</div></div></div>
|
|
<div style="display:flex; align-items:flex-start; gap:12px;"><span style="width:8px; height:8px; border-radius:2px; background:#5ec8d8; margin-top:6px; flex:none;"></span><div><div style="font-size:15px; font-weight:600;">Live + cancellable</div><div style="font-size:13px; color:#8a8a92; line-height:1.5;">Stream every turn over SSE; cancel a run mid-flight at any tier.</div></div></div>
|
|
<div style="display:flex; align-items:flex-start; gap:12px;"><span style="width:8px; height:8px; border-radius:2px; background:#ff6f61; margin-top:6px; flex:none;"></span><div><div style="font-size:15px; font-weight:600;">Recursive zoom canvas</div><div style="font-size:13px; color:#8a8a92; line-height:1.5;">One view for every tier — click a node to drill down, breadcrumb to climb back up.</div></div></div>
|
|
</div>
|
|
</div>
|
|
<div style="position:relative; height:340px; border-radius:16px; border:1px solid rgba(255,255,255,.07); background:#0c0c0f; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4);">
|
|
<div style="display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; font-size:11px;">
|
|
<span style="color:#6a6a72;">Org</span><span style="color:#3a3a40;">/</span><span style="color:#9a9aa2;">Acme Corp</span><span style="color:#3a3a40;">/</span><span style="color:#ff8a7a;">Growth Team</span>
|
|
</div>
|
|
<div style="position:absolute; inset:48px 0 0 0;">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" style="position:absolute; inset:0; width:100%; height:100%;">
|
|
<path d="M50,46 L24,26 M50,46 L76,26 M50,46 L28,74 M50,46 L74,74" stroke="rgba(255,255,255,.12)" stroke-width="1.2" vector-effect="non-scaling-stroke"></path>
|
|
<path d="M50,46 L24,26" stroke="rgba(94,200,216,.55)" stroke-width="1.5" stroke-dasharray="3 4" vector-effect="non-scaling-stroke" style="animation:cm-flow 1.1s linear infinite;"></path>
|
|
</svg>
|
|
<div style="position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#ff9a6a,#ff6f4a); display:flex; align-items:center; justify-content:center; font-weight:700; color:#2a0d05; font-size:16px; box-shadow:0 0 30px rgba(255,111,97,.4);">A</div>
|
|
<div style="position:absolute; left:24%; top:26%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-weight:700; color:#06201f; font-size:12px;">I</div>
|
|
<div style="position:absolute; left:76%; top:26%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#e8c46a,#d89a3a); display:flex; align-items:center; justify-content:center; font-weight:700; color:#2a1d05; font-size:12px;">N</div>
|
|
<div style="position:absolute; left:28%; top:74%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#8a9af0,#5a6ad8); display:flex; align-items:center; justify-content:center; font-weight:700; color:#0a0e2a; font-size:12px;">E</div>
|
|
<div style="position:absolute; left:74%; top:74%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#c98af0,#9a5ad8); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1a0a2a; font-size:12px;">S</div>
|
|
</div>
|
|
<div style="position:absolute; bottom:12px; left:16px; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5fd08a;">● step 142 · checkpoint 3s ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COMPARE + MODELS ROW -->
|
|
<div style="max-width:1240px; margin:0 auto; padding:0 32px 72px;">
|
|
<div style="display:grid; grid-template-columns:1.2fr 1fr; gap:16px;">
|
|
<div style="border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#0d0d10; padding:28px; display:flex; gap:28px; align-items:center;">
|
|
<div style="flex:1;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:#e8b465; margin-bottom:12px;">COMPARE & EVOLVE</div>
|
|
<h3 style="font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px;">Run one task across many topologies.</h3>
|
|
<p style="font-size:14px; color:#9a9aa2; margin:0; line-height:1.55;">Get a quality/cost Pareto front, then let a MAP-Elites search evolve better team configurations using the comparison harness as fitness.</p>
|
|
</div>
|
|
<svg width="180" height="150" viewBox="0 0 180 150" style="flex:none;">
|
|
<line x1="24" y1="126" x2="168" y2="126" stroke="rgba(255,255,255,.12)" stroke-width="1"></line>
|
|
<line x1="24" y1="14" x2="24" y2="126" stroke="rgba(255,255,255,.12)" stroke-width="1"></line>
|
|
<path d="M34,104 C70,96 108,52 156,30" fill="none" stroke="rgba(255,111,97,.5)" stroke-width="1.4" stroke-dasharray="3 3"></path>
|
|
<circle cx="34" cy="104" r="4" fill="#ff6f61"></circle>
|
|
<circle cx="68" cy="88" r="4" fill="#ff6f61"></circle>
|
|
<circle cx="104" cy="58" r="4" fill="#ff6f61"></circle>
|
|
<circle cx="156" cy="30" r="4" fill="#ff6f61"></circle>
|
|
<circle cx="58" cy="112" r="3" fill="#4a4a52"></circle>
|
|
<circle cx="92" cy="96" r="3" fill="#4a4a52"></circle>
|
|
<circle cx="120" cy="92" r="3" fill="#4a4a52"></circle>
|
|
<circle cx="138" cy="64" r="3" fill="#4a4a52"></circle>
|
|
<text x="92" y="144" fill="#5a5a62" font-family="'JetBrains Mono',monospace" font-size="9" text-anchor="middle">cost →</text>
|
|
</svg>
|
|
</div>
|
|
<div style="border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#0d0d10; padding:28px;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:#5ec8d8; margin-bottom:12px;">HETEROGENEOUS</div>
|
|
<h3 style="font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 16px;">Bind any node to any model.</h3>
|
|
<div style="display:flex; flex-wrap:wrap; gap:8px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#e6e6ea; padding:7px 13px; border-radius:8px; border:1px solid rgba(255,111,97,.3); background:rgba(255,111,97,.07);">Claude</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#cfcfd5; padding:7px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);">Gemini</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#cfcfd5; padding:7px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);">Groq</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#cfcfd5; padding:7px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);">GLM</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#cfcfd5; padding:7px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);">Kimi</span>
|
|
</div>
|
|
<p style="font-size:14px; color:#9a9aa2; margin:18px 0 0; line-height:1.55;">Mix backends across a single topology — a cheap model for fan-out, a strong one for the judge.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SAFETY -->
|
|
<div style="border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#0a0a0c,#08080a);">
|
|
<div style="max-width:1240px; margin:0 auto; padding:72px 32px;">
|
|
<div style="display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;">
|
|
<div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#5fd08a; margin-bottom:14px;">§15 · SAFE BY CONSTRUCTION</div>
|
|
<h2 style="font-size:38px; font-weight:700; letter-spacing:-.03em; margin:0 0 16px; text-wrap:balance;">Authority is topology-invariant.</h2>
|
|
<p style="font-size:17px; color:#a8a8b0; margin:0 0 22px; line-height:1.6;">No choice of structure — and no switch between structures — can let an agent exceed its sandbox. The network segmentation <span style="color:#f3f3f5; font-weight:600;">is</span> the security model.</p>
|
|
<div style="display:flex; flex-direction:column; gap:12px; font-size:14px; color:#b5b5bd;">
|
|
<div style="display:flex; gap:10px; align-items:center;"><span style="color:#5fd08a;">✓</span> Agents run tool-free in network-isolated sandboxes</div>
|
|
<div style="display:flex; gap:10px; align-items:center;"><span style="color:#5fd08a;">✓</span> Every sandbox-leaving action is a gated, human-approvable "door"</div>
|
|
<div style="display:flex; gap:10px; align-items:center;"><span style="color:#5fd08a;">✓</span> A secret broker holds credentials that never reach agent code</div>
|
|
</div>
|
|
</div>
|
|
<div style="border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#0c0c0f; padding:24px; box-shadow:0 24px 60px rgba(0,0,0,.4);">
|
|
<div style="display:flex; flex-direction:column; gap:10px;">
|
|
<div style="display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:11px; border:1px dashed rgba(255,255,255,.14); background:#0f0f13;">
|
|
<span style="width:34px; height:34px; border-radius:9px; background:rgba(255,111,97,.14); display:flex; align-items:center; justify-content:center;"><svg width="18" height="18" viewBox="0 0 20 20"><rect x="4" y="4" width="12" height="12" rx="3" stroke="#ff6f61" stroke-width="1.5" fill="none"></rect><circle cx="10" cy="10" r="2" fill="#ff6f61"></circle></svg></span>
|
|
<div style="flex:1;"><div style="font-size:13px; font-weight:600;">Agent sandbox</div><div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">tool-free · no network</div></div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#ff8a7a; padding:3px 8px; border-radius:5px; background:rgba(255,111,97,.1);">isolated</span>
|
|
</div>
|
|
<div style="display:flex; justify-content:center; color:#3a3a40; font-family:'JetBrains Mono',monospace; font-size:11px;">↓ gated door · human approval</div>
|
|
<div style="display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:11px; border:1px solid rgba(94,200,216,.22); background:#0f0f13;">
|
|
<span style="width:34px; height:34px; border-radius:9px; background:rgba(94,200,216,.14); display:flex; align-items:center; justify-content:center;"><svg width="18" height="18" viewBox="0 0 20 20"><path d="M10 2v6m0 0l3-3m-3 3L7 5M3 12v4a2 2 0 002 2h10a2 2 0 002-2v-4" stroke="#5ec8d8" stroke-width="1.5" fill="none" stroke-linecap="round"></path></svg></span>
|
|
<div style="flex:1;"><div style="font-size:13px; font-weight:600;">Door tool → egress</div><div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">email · slack · browser</div></div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a; padding:3px 8px; border-radius:5px; background:rgba(95,208,138,.1);">approved</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:11px; border:1px solid rgba(255,255,255,.08); background:#0f0f13;">
|
|
<span style="width:34px; height:34px; border-radius:9px; background:rgba(232,196,106,.14); display:flex; align-items:center; justify-content:center;"><svg width="18" height="18" viewBox="0 0 20 20"><rect x="4" y="9" width="12" height="8" rx="2" stroke="#e8b465" stroke-width="1.5" fill="none"></rect><path d="M7 9V6.5a3 3 0 016 0V9" stroke="#e8b465" stroke-width="1.5" fill="none"></path></svg></span>
|
|
<div style="flex:1;"><div style="font-size:13px; font-weight:600;">Secret broker</div><div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">private socket · creds never leave</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SELF-HOST -->
|
|
<div style="max-width:1240px; margin:0 auto; padding:72px 32px;">
|
|
<div style="border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#0e0e12,#0a0a0c); padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;">
|
|
<div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#c98af0; margin-bottom:14px;">SELF-HOSTABLE</div>
|
|
<h2 style="font-size:32px; font-weight:700; letter-spacing:-.03em; margin:0 0 14px;">The whole platform, one node.</h2>
|
|
<p style="font-size:16px; color:#a8a8b0; margin:0; line-height:1.6;">A single-node Docker Compose deployment runs everything with the same network-segmented security model as the Kubernetes path. The server self-migrates on boot.</p>
|
|
</div>
|
|
<div style="border-radius:12px; background:#070708; border:1px solid rgba(255,255,255,.08); padding:20px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.9;">
|
|
<div style="color:#5a5a62;"># bring up the stack</div>
|
|
<div><span style="color:#5fd08a;">$</span> <span style="color:#cfcfd5;">cd deploy/compose</span></div>
|
|
<div><span style="color:#5fd08a;">$</span> <span style="color:#cfcfd5;">docker compose up -d</span></div>
|
|
<div style="margin-top:8px; color:#5a5a62;"># app → localhost:3000</div>
|
|
<div style="color:#5ec8d8;">✓ server self-migrated · owner provisioned</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div style="max-width:1240px; margin:0 auto; padding:40px 32px 96px;">
|
|
<div style="position:relative; border-radius:20px; border:1px solid rgba(255,111,97,.25); background:radial-gradient(120% 140% at 50% 0%, rgba(255,111,97,.12), #0c0c0f 60%); padding:72px 32px; text-align:center; overflow:hidden;">
|
|
<h2 style="font-size:46px; font-weight:700; letter-spacing:-.035em; margin:0 0 16px; text-wrap:balance;">Deploy your first claw.</h2>
|
|
<p style="font-size:18px; color:#a8a8b0; margin:0 0 30px;">From one agent to a whole org — same model, same guarantees.</p>
|
|
<div style="display:flex; gap:12px; justify-content:center;">
|
|
<div style="display:flex; align-items:center; gap:8px; padding:14px 26px; border-radius:11px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); color:#2a0d0a; font-size:16px; font-weight:700; cursor:pointer;" style-hover="filter:brightness(1.07);">Get started free →</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:14px 26px; border-radius:11px; border:1px solid rgba(255,255,255,.14); color:#e6e6ea; font-size:16px; font-weight:600; cursor:pointer;" style-hover="background:rgba(255,255,255,.04);">clawmates.work</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<div style="border-top:1px solid rgba(255,255,255,.06); background:#0a0a0c;">
|
|
<div style="max-width:1240px; margin:0 auto; padding:40px 32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
|
|
<div style="display:flex; align-items:center; gap:10px;">
|
|
<svg width="20" height="20" viewBox="0 0 22 22" fill="none"><path d="M11 3 L18.5 17 L3.5 17 Z" stroke="#ff6f61" stroke-width="1.3" stroke-linejoin="round" opacity="0.55"></path><circle cx="11" cy="3.5" r="2.4" fill="#ff6f61"></circle><circle cx="18" cy="17" r="2.4" fill="#ff6f61"></circle><circle cx="4" cy="17" r="2.4" fill="#ff6f61"></circle></svg>
|
|
<span style="font-size:14px; font-weight:700;">Clawmates</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="display:flex; gap:24px; font-size:13px; color:#8a8a92;">
|
|
<span style="cursor:pointer;">Platform</span><span style="cursor:pointer;">Topologies</span><span style="cursor:pointer;">Safety</span><span style="cursor:pointer;">Docs</span><span style="cursor:pointer;">Paper</span>
|
|
</div>
|
|
<div style="width:100%; border-top:1px solid rgba(255,255,255,.05); margin-top:24px; padding-top:20px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5a5a62;">© 2026 Clawmates · authority is topology-invariant</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script>
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
const C = { coral:'#ff6f61', cyan:'#5ec8d8', green:'#5fd08a', amber:'#e8b465', purple:'#c98af0', teal:'#6fd0c0' };
|
|
const raw = [
|
|
{ name:'Hierarchical', kind:'tree command', color:C.coral, pts:[[50,15],[28,50],[72,50],[16,85],[40,85],[84,85]], edges:[[0,1],[0,2],[1,3],[1,4],[2,5]] },
|
|
{ name:'Pipeline', kind:'sequential', color:C.amber, pts:[[12,50],[37,50],[63,50],[88,50]], edges:[[0,1],[1,2],[2,3]] },
|
|
{ name:'Swarm', kind:'parallel', color:C.cyan, pts:[[26,30],[60,22],[82,52],[54,80],[22,64],[48,48]], edges:[[0,1],[1,2],[3,4],[5,0],[5,2],[5,3]] },
|
|
{ name:'Mesh', kind:'all-to-all', color:C.green, pts:[[50,14],[86,42],[70,84],[30,84],[14,42]], edges:[[0,1],[0,2],[0,3],[0,4],[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]] },
|
|
{ name:'Debate', kind:'adversarial', color:C.purple, pts:[[50,12],[26,46],[26,82],[74,46],[74,82]], edges:[[1,3],[1,4],[2,3],[2,4],[0,1],[0,3]] },
|
|
{ name:'Hub-spoke', kind:'one coordinator', color:C.coral, pts:[[50,50],[50,16],[82,38],[70,82],[30,82],[18,38]], edges:[[0,1],[0,2],[0,3],[0,4],[0,5]], big:0 },
|
|
{ name:'Star-MoE', kind:'router + experts',color:C.teal, pts:[[50,50],[24,24],[76,24],[24,76],[76,76]], edges:[[0,1],[0,2],[0,3],[0,4]], big:0 },
|
|
{ name:'Market', kind:'bid / auction', color:C.amber, pts:[[50,50],[20,30],[80,30],[20,72],[80,72]], edges:[[0,1],[0,2],[0,3],[0,4]], big:0, dash:true },
|
|
{ name:'Ring', kind:'cyclic hand-off', color:C.cyan, pts:[[50,14],[81,32],[81,68],[50,86],[19,68],[19,32]], edges:[[0,1],[1,2],[2,3],[3,4],[4,5],[5,0]] },
|
|
{ name:'Flat', kind:'peers', color:C.purple, pts:[[30,32],[70,32],[30,68],[70,68]], edges:[] },
|
|
{ name:'Holacratic', kind:'nested circles', color:C.teal, pts:[[50,50],[50,22],[74,64],[26,64]], edges:[[0,1],[0,2],[0,3]], big:0 },
|
|
{ name:'Blackboard', kind:'shared memory', color:C.cyan, pts:[[50,50],[24,26],[76,26],[24,74],[76,74]], edges:[[0,1],[0,2],[0,3],[0,4]], rect:0, big:0 },
|
|
];
|
|
const topologies = raw.map(t => ({
|
|
name: t.name, kind: t.kind, color: t.color,
|
|
nodes: t.pts.map((p,i) => ({ x:p[0], y:p[1], r:(t.big===i?7:5), isRect:(t.rect===i), isCircle:(t.rect!==i), rx:p[0]-6, ry:p[1]-6 })),
|
|
links: t.edges.map(([a,b]) => ({ x1:t.pts[a][0], y1:t.pts[a][1], x2:t.pts[b][0], y2:t.pts[b][1], dash:(t.dash?'3 3':'0') })),
|
|
}));
|
|
return { topologies };
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|