Omar SobhandClaude Opus 4.8
39bacbd1d2
Replaces the static React-Flow world forest with a real-time WebGL view of the swarm working, plus the live event contract that feeds it. Phase A — the live contract + feed: - frontend/src/lib/live/taxonomy.ts — the 13-event Clawmates Event Taxonomy as typed TS (the shared World/Observe contract). - frontend/src/lib/live/useClawmatesLive.ts — native shared-singleton live client (EventSource to /api/world/live, typed fan-out, replay-of-last-state to late subscribers, refcounted, synthetic fallback so views are always alive). - crates/cm-api/src/routes/world.rs — GET /api/world/live, authed + workspace- scoped SSE emitting the taxonomy (real agent.status from live-container state, a topology.update of the workspace's agents, telemetry with real doorsPending), mirroring run_events_sse. normalize() seam documented for run_events->world.touch. Phase B — the WebGL engine: - frontend/src/components/world/engine.ts — Gource-inspired force-directed model: org/company/team tree (sibling repulsion + parent spring + friction), agent pawns that converge on the touched node and beam it, world nodes that glow with heat and fade when idle. Framework-agnostic (renderer-independent) state+math. - frontend/src/components/world/WorldCanvas.tsx — three.js scene (ortho cam, UnrealBloom), render loop syncing engine state, camera auto-fit, HTML labels, raycast click->select, Hierarchy/Flat/Live formation switch. - Dashboard.tsx: swap <WorldFlow/> -> <WorldCanvas/> at the world-tier seam (shared claw-tier pieces untouched; WorldFlow.tsx kept for now). - Adds three (+ @types/three). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
459 lines
48 KiB
HTML
459 lines
48 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; }
|
|
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: .25; } }
|
|
@keyframes cm-halo { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
|
|
@keyframes cm-type { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
|
|
@keyframes cm-bar { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
|
|
@keyframes cm-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="min-width:100%; min-height:100vh; box-sizing:border-box; padding:48px; background:#e3e3e6; width:max-content;">
|
|
<div style="display:flex; gap:56px; align-items:flex-start;">
|
|
|
|
<!-- FRAME A -->
|
|
<div style="flex:none; width:1520px;">
|
|
<div style="display:flex; align-items:baseline; gap:10px; margin-bottom:14px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.14em; color:#1a1a1d;">DIRECTION A</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:#6a6a70;">Close-up — watch one claw think & act, brain folds away</span>
|
|
</div>
|
|
<div style="width:1520px; height:960px; background:#08080a; border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; position:relative; color:#f3f3f5;">
|
|
<div style="height:52px; flex:none; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#0d0d10,#0a0a0c);">
|
|
<div style="display:flex; align-items:center; gap:9px;">
|
|
<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.2" fill="#ff6f61"></circle><circle cx="18" cy="17" r="2.2" fill="#ff6f61"></circle><circle cx="4" cy="17" r="2.2" fill="#ff6f61"></circle></svg>
|
|
<span style="font-size:14px; font-weight:700;">Clawmates</span>
|
|
</div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6a6a72;">Large World</span>
|
|
<span style="color:#3a3a40;">/</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#9a9aa2;">Agents</span>
|
|
<!-- linked mode toggle -->
|
|
<div style="margin-left:8px; display:flex; padding:3px; border-radius:9px; background:#141417; border:1px solid rgba(255,255,255,.08);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:5px 12px; border-radius:6px; color:#8a8a92; cursor:pointer;">System</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:5px 12px; border-radius:6px; background:rgba(255,111,97,.16); color:#ff8a7a; cursor:pointer;">Agent</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5ec8d8; padding:5px 10px; border:1px solid rgba(94,200,216,.25); border-radius:7px; background:rgba(94,200,216,.06);">
|
|
<span style="width:6px; height:6px; border-radius:50%; background:#5ec8d8; animation:cm-blink 1.2s infinite;"></span>working
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8a92;">
|
|
<span style="color:#e8b465;">▮</span> 38.4k tok/min
|
|
</div>
|
|
<div style="width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#2a0d0a;">O</div>
|
|
</div>
|
|
<div style="flex:1; display:flex; min-height:0;">
|
|
<!-- icon nav -->
|
|
<div style="width:54px; flex:none; border-right:1px solid rgba(255,255,255,.06); background:#0a0a0c; display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px;">
|
|
<div style="width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:9px; color:#5a5a62;">
|
|
<svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.4" fill="none"></circle><circle cx="10" cy="10" r="2.4" fill="currentColor"></circle></svg>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.05em;">WORLD</span>
|
|
</div>
|
|
<div style="position:relative; width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:9px; color:#ff6f61; background:rgba(255,111,97,.1);">
|
|
<span style="position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:#ff6f61;"></span>
|
|
<svg width="18" height="18" viewBox="0 0 20 20"><rect x="4" y="4" width="12" height="12" rx="3.5" stroke="currentColor" stroke-width="1.4" fill="none"></rect><circle cx="10" cy="10" r="2.2" fill="currentColor"></circle></svg>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.05em;">AGENT</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="width:28px; height:28px; border-radius:8px; border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#ff6f61; font-size:16px; font-weight:300;">+</div>
|
|
</div>
|
|
<!-- agent list -->
|
|
<div style="width:218px; flex:none; border-right:1px solid rgba(255,255,255,.06); background:#0b0b0e; display:flex; flex-direction:column; min-height:0;">
|
|
<div style="padding:14px 14px 10px;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5a5a62;">2 AGENTS · LIVE</div>
|
|
<div style="font-size:17px; font-weight:700; margin-top:3px;">Agents</div>
|
|
</div>
|
|
<div style="flex:1; overflow:hidden; padding:6px;">
|
|
<div style="display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px; background:rgba(255,111,97,.1); border:1px solid rgba(255,111,97,.25); position:relative; margin-bottom:4px;">
|
|
<span style="position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:#ff6f61;"></span>
|
|
<div style="position:relative; width:32px; height:32px; flex:none;">
|
|
<div style="width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#2a0d0a;">M</div>
|
|
<span style="position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; background:#5ec8d8; border:2px solid #0b0b0e;"></span>
|
|
</div>
|
|
<div style="flex:1; min-width:0;">
|
|
<div style="font-size:13px; font-weight:600; color:#fff;">Morpheus</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#ff8a7a;">Project Manager</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5ec8d8; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">▸ reviewing PR #214</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px;">
|
|
<div style="position:relative; width:32px; height:32px; flex:none;">
|
|
<div style="width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#06201f;">S</div>
|
|
<span style="position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; background:#5fd08a; border:2px solid #0b0b0e;"></span>
|
|
</div>
|
|
<div style="flex:1; min-width:0;">
|
|
<div style="font-size:13px; font-weight:600; color:#eaeaee;">Smith</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">Research Specialist</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">▸ crawling 12 sources</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="flex:none; padding:10px 12px; border-top:1px solid rgba(255,255,255,.06);">
|
|
<div style="display:flex; align-items:center; justify-content:center; gap:7px; height:32px; border-radius:8px; border:1px solid rgba(94,200,216,.3); color:#5ec8d8; font-size:12px; font-weight:600;">⊕ Add to teams</div>
|
|
</div>
|
|
</div>
|
|
<div style="width:560px; flex:none; border-right:1px solid rgba(255,255,255,.06); background:#0a0a0c; display:flex; flex-direction:column; min-height:0;">
|
|
<!-- agent header -->
|
|
<div style="flex:none; display:flex; align-items:center; gap:14px; padding:16px 18px 12px;">
|
|
<div style="position:relative; width:48px; height:48px;">
|
|
<div style="position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(255,111,97,.4);"></div>
|
|
<div style="width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#2a0d0a; box-shadow:0 0 26px rgba(255,111,97,.4);">M</div>
|
|
</div>
|
|
<div style="flex:1;">
|
|
<div style="font-size:22px; font-weight:700; letter-spacing:-.01em;">Morpheus</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">Project Manager · Rust 2024 Specialist</div>
|
|
</div>
|
|
<div style="display:flex; gap:6px;">
|
|
<div style="width:30px; height:30px; border-radius:8px; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#9a9aa2;"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M2 8h12M8 2v12" stroke="currentColor" stroke-width="1.4"></path></svg></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex:1; overflow:hidden; padding:0 16px 16px; display:flex; flex-direction:column; gap:12px;">
|
|
|
|
<!-- NOW: current task + live reasoning -->
|
|
<div style="flex:none; border-radius:13px; border:1px solid rgba(94,200,216,.22); background:linear-gradient(180deg,#0c1416,#0b0e0f); overflow:hidden;">
|
|
<div style="display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05);">
|
|
<span style="width:7px; height:7px; border-radius:50%; background:#5ec8d8; animation:cm-blink 1.2s infinite;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5ec8d8;">WORKING ON NOW</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">task · 02:14 elapsed</span>
|
|
</div>
|
|
<div style="padding:13px 14px;">
|
|
<div style="font-size:15px; font-weight:600; margin-bottom:4px;">Review PR #214 — borrow-checker fix in <span style="font-family:'JetBrains Mono',monospace; color:#ff8a7a;">cm-runtime</span></div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; color:#7a7a82; line-height:1.7;">
|
|
<div><span style="color:#5fd08a;">✓</span> read cm-runtime/src/sandbox.rs <span style="color:#5a5a62;">· 3 hunks</span></div>
|
|
<div><span style="color:#5fd08a;">✓</span> ran cargo clippy --workspace <span style="color:#5a5a62;">· clean</span></div>
|
|
<div><span style="color:#5ec8d8;">▸</span> checking lifetime on <span style="color:#cfcfd5;">&'a mut Guard</span> across await<span style="display:inline-block; width:6px; height:12px; background:#5ec8d8; margin-left:2px; vertical-align:-2px; animation:cm-type 1s steps(1) infinite;"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- brain summary (folded) -->
|
|
<div style="flex:none; border-radius:13px; border:1px solid rgba(255,255,255,.07); background:#0d0d10; padding:13px 14px;">
|
|
<div style="display:flex; align-items:center; gap:8px; margin-bottom:11px;">
|
|
<span style="width:18px; height:18px; border-radius:5px; background:rgba(255,111,97,.16); display:flex; align-items:center; justify-content:center;"><svg width="11" height="11" viewBox="0 0 16 16"><rect x="3" y="2" width="10" height="12" rx="2" fill="none" stroke="#ff6f61" stroke-width="1.3"></rect><path d="M6 6h4M6 9h4" stroke="#ff6f61" stroke-width="1.2"></path></svg></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#ff8a7a;">BRAIN</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5ec8d8; cursor:pointer;">Edit brain →</span>
|
|
</div>
|
|
<div style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#cfcfd5; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.05);">system prompt · 3,318 ch</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#cfcfd5; padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.05);">personality · senior reviewer</span>
|
|
</div>
|
|
<div style="display:flex; gap:8px;">
|
|
<div style="flex:1; text-align:center; padding:8px 0; border-radius:8px; background:rgba(255,255,255,.03);"><div style="font-size:16px; font-weight:700; color:#ff8a7a;">5</div><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">skills</div></div>
|
|
<div style="flex:1; text-align:center; padding:8px 0; border-radius:8px; background:rgba(255,255,255,.03);"><div style="font-size:16px; font-weight:700; color:#5ec8d8;">4</div><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">tools · doors</div></div>
|
|
<div style="flex:1; text-align:center; padding:8px 0; border-radius:8px; background:rgba(255,255,255,.03);"><div style="font-size:16px; font-weight:700; color:#5fd08a;">10</div><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">memories</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- activity -->
|
|
<div style="flex:1; min-height:0; border-radius:13px; border:1px solid rgba(255,255,255,.07); background:#0d0d10; padding:13px 14px; display:flex; flex-direction:column;">
|
|
<div style="display:flex; align-items:center; gap:8px; margin-bottom:12px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5fd08a;">● ACTIVITY · LIVE</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">9,105 commits · 11 hot</span>
|
|
</div>
|
|
<div style="flex:1; display:flex; align-items:flex-end; gap:3px;">
|
|
<span style="flex:1; background:#1e3a2a; border-radius:2px; height:30%;"></span>
|
|
<span style="flex:1; background:#2e6e44; border-radius:2px; height:55%;"></span>
|
|
<span style="flex:1; background:#3a9457; border-radius:2px; height:42%;"></span>
|
|
<span style="flex:1; background:#46c46a; border-radius:2px; height:78%;"></span>
|
|
<span style="flex:1; background:#e8b465; border-radius:2px; height:62%; transform-origin:bottom; animation:cm-bar 1.6s ease-in-out infinite;"></span>
|
|
<span style="flex:1; background:#2e6e44; border-radius:2px; height:48%;"></span>
|
|
<span style="flex:1; background:#3a9457; border-radius:2px; height:70%;"></span>
|
|
<span style="flex:1; background:#46c46a; border-radius:2px; height:90%; transform-origin:bottom; animation:cm-bar 1.9s ease-in-out infinite;"></span>
|
|
<span style="flex:1; background:#2e6e44; border-radius:2px; height:36%;"></span>
|
|
<span style="flex:1; background:#3a9457; border-radius:2px; height:58%;"></span>
|
|
<span style="flex:1; background:#1e3a2a; border-radius:2px; height:44%;"></span>
|
|
<span style="flex:1; background:#46c46a; border-radius:2px; height:66%;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div style="flex:1; min-width:0; background:#0c0c0f; display:flex; flex-direction:column; min-height:0;">
|
|
<!-- pane header / app tabs -->
|
|
<div style="flex:none; display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.06);">
|
|
<span style="width:7px; height:7px; border-radius:50%; background:#ff6f61;"></span>
|
|
<span style="font-size:13px; font-weight:700;">Morpheus's Computer</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5ec8d8;">● sandbox live · no network</span>
|
|
<span style="flex:1;"></span>
|
|
<div style="display:flex; gap:4px; padding:3px; border-radius:8px; background:#141417; border:1px solid rgba(255,255,255,.08);">
|
|
<span style="display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; background:rgba(94,200,216,.16); color:#5ec8d8;">◐ Browser</span>
|
|
<span style="display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; color:#8a8a92;">▸ Terminal</span>
|
|
<span style="display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; color:#8a8a92;">◇ Slack</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LIVE SCREEN (browser the agent is operating) -->
|
|
<div style="flex:1.3; min-height:0; margin:14px 16px 0; border-radius:11px; border:1px solid rgba(255,255,255,.09); background:#fff; overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow:0 14px 40px rgba(0,0,0,.5);">
|
|
<!-- live cursor sweep -->
|
|
<div style="position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#5ec8d8,transparent); width:40%; animation:cm-sweep 3s ease-in-out infinite; z-index:5;"></div>
|
|
<div style="flex:none; display:flex; align-items:center; gap:8px; padding:8px 12px; background:#f1f1f3; border-bottom:1px solid #e2e2e6;">
|
|
<span style="display:flex; gap:5px;"><span style="width:9px; height:9px; border-radius:50%; background:#ff5f57;"></span><span style="width:9px; height:9px; border-radius:50%; background:#febc2e;"></span><span style="width:9px; height:9px; border-radius:50%; background:#28c840;"></span></span>
|
|
<div style="flex:1; height:22px; border-radius:6px; background:#fff; border:1px solid #dcdce0; display:flex; align-items:center; padding:0 10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#6a6a72;">github.com/clawarmada/cm-runtime/pull/214/files</div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#9a9aa2;">agent-controlled</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; overflow:hidden; padding:14px 16px; background:#fff; color:#1a1a1d;">
|
|
<div style="font-size:13px; font-weight:700; color:#0a0a0c; margin-bottom:8px;">Files changed · sandbox.rs</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.75;">
|
|
<div style="background:#ffebe9; color:#82071e; padding:1px 6px; border-radius:3px;">- let guard = self.lock.lock().unwrap();</div>
|
|
<div style="background:#ffebe9; color:#82071e; padding:1px 6px; border-radius:3px;">- do_async(&guard).await;</div>
|
|
<div style="background:#dafbe1; color:#0a6b2c; padding:1px 6px; border-radius:3px; margin-top:2px;">+ let data = { self.lock.lock().unwrap().clone() };</div>
|
|
<div style="background:#dafbe1; color:#0a6b2c; padding:1px 6px; border-radius:3px;">+ do_async(&data).await;</div>
|
|
</div>
|
|
<div style="margin-top:14px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:7px; background:#5ec8d822; border:1px solid #5ec8d855; font-family:'JetBrains Mono',monospace; font-size:11px; color:#1f7a8c;">
|
|
<span style="width:6px; height:6px; border-radius:50%; background:#1f7a8c; animation:cm-blink 1s infinite;"></span> agent is reading line 142…
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STREAMING OUTPUT console -->
|
|
<div style="flex:1; min-height:0; margin:12px 16px 16px; border-radius:11px; border:1px solid rgba(255,255,255,.08); background:#070708; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid rgba(255,255,255,.06);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5fd08a;">▌ REASONING STREAM</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62;">claude-sonnet · 18:16:09</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; overflow:hidden; padding:12px 14px; font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.7;">
|
|
<div style="color:#6a6a72;"><span style="color:#c98af0;">think</span> The original holds the MutexGuard across .await — that's the std::sync::Mutex-across-await footgun my rules forbid.</div>
|
|
<div style="color:#9a9aa2; margin-top:6px;">The fix clones under a scoped lock, dropping the guard before the await point. Sound.</div>
|
|
<div style="color:#6a6a72; margin-top:6px;"><span style="color:#5ec8d8;">tool</span> github.review.comment <span style="color:#5a5a62;">→ door check…</span></div>
|
|
<div style="color:#e8b465; margin-top:6px;">⏸ door <span style="color:#cfcfd5;">post review on PR #214</span> needs approval<span style="display:inline-block; width:6px; height:12px; background:#5fd08a; margin-left:3px; vertical-align:-2px; animation:cm-type 1s steps(1) infinite;"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- door approval toast -->
|
|
<div style="position:absolute; right:18px; bottom:42px; width:332px; z-index:20; border-radius:13px; border:1px solid rgba(232,196,106,.4); background:linear-gradient(180deg,#1a1408,#12100a); box-shadow:0 18px 50px rgba(0,0,0,.6); overflow:hidden;">
|
|
<div style="height:3px; background:linear-gradient(90deg,#e8b465,#ff6f61);"></div>
|
|
<div style="padding:13px 15px;">
|
|
<div style="display:flex; align-items:center; gap:8px; margin-bottom:9px;">
|
|
<span style="width:24px; height:24px; border-radius:7px; background:rgba(232,196,106,.16); display:flex; align-items:center; justify-content:center;"><svg width="13" height="13" viewBox="0 0 16 16"><path d="M8 1l5 2v4c0 4-2.5 6-5 7-2.5-1-5-3-5-7V3z" fill="none" stroke="#e8b465" stroke-width="1.4" stroke-linejoin="round"></path></svg></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:#e8b465;">§15 DOOR · APPROVAL</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">expand ▾</span>
|
|
</div>
|
|
<div style="font-size:13px; font-weight:600; margin-bottom:3px;">Post code review on PR #214</div>
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#8a8a92; line-height:1.6; margin-bottom:12px;">Morpheus · github.review.comment → external egress · drafts 1 comment</div>
|
|
<div style="display:flex; gap:8px;">
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; height:32px; border-radius:8px; background:linear-gradient(135deg,#ffb27a,#e8b465); color:#2a1d05; font-size:12px; font-weight:700;">Approve</div>
|
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.14); color:#cfcfd5; font-size:12px; font-weight:600;">Review</div>
|
|
<div style="width:34px; display:flex; align-items:center; justify-content:center; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.1); color:#8a8a92;">✕</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height:26px; flex:none; display:flex; align-items:center; gap:16px; padding:0 16px; border-top:1px solid rgba(255,255,255,.06); background:#0a0a0c; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62;">
|
|
<span style="color:#5fd08a;">● durable runner ok</span>
|
|
<span>checkpoint 3s ago</span>
|
|
<span style="flex:1;"></span>
|
|
<span>§15 sandbox: isolated</span>
|
|
<span style="color:#e8b465;">1 door awaiting approval</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FRAME B -->
|
|
<div style="flex:none; width:1520px;">
|
|
<div style="display:flex; align-items:baseline; gap:10px; margin-bottom:14px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.14em; color:#1a1a1d;">DIRECTION B</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:#6a6a70;">System mode — mission control, both claws working together</span>
|
|
</div>
|
|
<div style="width:1520px; height:960px; background:#08080a; border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; position:relative; color:#f3f3f5;">
|
|
<div style="height:52px; flex:none; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#0d0d10,#0a0a0c);">
|
|
<div style="display:flex; align-items:center; gap:9px;">
|
|
<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.2" fill="#ff6f61"></circle><circle cx="18" cy="17" r="2.2" fill="#ff6f61"></circle><circle cx="4" cy="17" r="2.2" fill="#ff6f61"></circle></svg>
|
|
<span style="font-size:14px; font-weight:700;">Clawmates</span>
|
|
</div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#9a9aa2;">Large World</span>
|
|
<div style="margin-left:8px; display:flex; padding:3px; border-radius:9px; background:#141417; border:1px solid rgba(255,255,255,.08);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:5px 12px; border-radius:6px; background:rgba(94,200,216,.16); color:#5ec8d8; cursor:pointer;">System</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; padding:5px 12px; border-radius:6px; color:#8a8a92; cursor:pointer;">Agent</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#5fd08a; padding:5px 10px; border:1px solid rgba(95,208,138,.25); border-radius:7px; background:rgba(95,208,138,.06);">
|
|
<span style="width:6px; height:6px; border-radius:50%; background:#5fd08a; animation:cm-blink 1.6s infinite;"></span>2 claws · autonomous
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8a92;"><span style="color:#e8b465;">▮</span> $0.42 / hr</div>
|
|
<div style="width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#2a0d0a;">O</div>
|
|
</div>
|
|
<div style="flex:1; display:flex; min-height:0;">
|
|
<div style="width:54px; flex:none; border-right:1px solid rgba(255,255,255,.06); background:#0a0a0c; display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px;">
|
|
<div style="position:relative; width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:9px; color:#5ec8d8; background:rgba(94,200,216,.1);">
|
|
<span style="position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:#5ec8d8;"></span>
|
|
<svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7.5" stroke="currentColor" stroke-width="1.4" fill="none"></circle><circle cx="10" cy="10" r="2.4" fill="currentColor"></circle></svg>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.05em;">WORLD</span>
|
|
</div>
|
|
<div style="width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:9px; color:#5a5a62;">
|
|
<svg width="18" height="18" viewBox="0 0 20 20"><rect x="4" y="4" width="12" height="12" rx="3.5" stroke="currentColor" stroke-width="1.4" fill="none"></rect><circle cx="10" cy="10" r="2.2" fill="currentColor"></circle></svg>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.05em;">AGENT</span>
|
|
</div>
|
|
<div style="flex:1;"></div>
|
|
<div style="width:28px; height:28px; border-radius:8px; border:1px dashed rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#ff6f61; font-size:16px; font-weight:300;">+</div>
|
|
</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:12px; padding:13px 16px 4px;">
|
|
<div style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; color:#5a5a62;">LARGE WORLD · SYSTEM</div>
|
|
<span style="flex:1;"></span>
|
|
<div style="display:flex; gap:10px;">
|
|
<div style="display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.07); background:#0d0d10;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">THROUGHPUT</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:#5ec8d8;">38.4k</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">tok/min</span>
|
|
<span style="display:flex; align-items:flex-end; gap:1.5px; height:14px; margin-left:2px;">
|
|
<span style="width:2px; background:#5ec8d8; height:40%;"></span><span style="width:2px; background:#5ec8d8; height:70%;"></span><span style="width:2px; background:#5ec8d8; height:55%; animation:cm-bar 1.4s ease-in-out infinite; transform-origin:bottom;"></span><span style="width:2px; background:#5ec8d8; height:90%; animation:cm-bar 1.7s ease-in-out infinite; transform-origin:bottom;"></span><span style="width:2px; background:#5ec8d8; height:65%;"></span>
|
|
</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.07); background:#0d0d10;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">SPEND</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:#e8b465;">$0.42</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">/hr</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:9px; border:1px solid rgba(255,255,255,.07); background:#0d0d10;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">LOOPS</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:#5fd08a;">3</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">running</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:9px; border:1px solid rgba(232,196,106,.3); background:rgba(232,196,106,.06);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#e8b465;">DOORS</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:#e8b465;">1</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1; min-height:0; display:flex; gap:14px; padding:14px 16px;">
|
|
<div style="flex:1.5; min-width:0; display:flex; flex-direction:column; gap:14px;">
|
|
|
|
<!-- Morpheus tile -->
|
|
<div style="flex:1; min-height:0; border-radius:13px; border:1px solid rgba(255,111,97,.22); background:#0d0d10; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid rgba(255,255,255,.05);">
|
|
<div style="position:relative; width:26px; height:26px;"><div style="width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#2a0d0a;">M</div><span style="position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#5ec8d8; border:2px solid #0d0d10;"></span></div>
|
|
<span style="font-size:13px; font-weight:700;">Morpheus</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5ec8d8;">▸ reviewing PR #214 · Browser</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72; cursor:pointer;">open ⤢</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; margin:10px 12px; border-radius:9px; background:#fff; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.4);">
|
|
<div style="position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#5ec8d8,transparent); width:35%; animation:cm-sweep 3.2s ease-in-out infinite; z-index:4;"></div>
|
|
<div style="display:flex; align-items:center; gap:6px; padding:6px 10px; background:#f1f1f3; border-bottom:1px solid #e2e2e6;">
|
|
<span style="display:flex; gap:4px;"><span style="width:7px; height:7px; border-radius:50%; background:#ff5f57;"></span><span style="width:7px; height:7px; border-radius:50%; background:#febc2e;"></span><span style="width:7px; height:7px; border-radius:50%; background:#28c840;"></span></span>
|
|
<div style="flex:1; height:18px; border-radius:5px; background:#fff; border:1px solid #dcdce0; display:flex; align-items:center; padding:0 8px; font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72;">github.com · pull/214/files</div>
|
|
</div>
|
|
<div style="padding:10px 12px; font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.7; color:#1a1a1d;">
|
|
<div style="background:#ffebe9; color:#82071e; padding:0 5px; border-radius:3px;">- do_async(&guard).await;</div>
|
|
<div style="background:#dafbe1; color:#0a6b2c; padding:0 5px; border-radius:3px; margin-top:2px;">+ do_async(&data).await;</div>
|
|
<div style="margin-top:8px; display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:6px; background:#5ec8d822; color:#1f7a8c; font-size:9px;"><span style="width:5px; height:5px; border-radius:50%; background:#1f7a8c; animation:cm-blink 1s infinite;"></span> reading line 142…</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- collaboration connector -->
|
|
<div style="flex:none; display:flex; align-items:center; gap:10px; padding:0 14px;">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">M</span>
|
|
<div style="flex:1; height:1px; position:relative; background:rgba(255,255,255,.08);">
|
|
<span style="position:absolute; top:-3px; left:0; width:7px; height:7px; border-radius:50%; background:#5ec8d8; animation:cm-sweep 2.4s linear infinite;"></span>
|
|
</div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5ec8d8; padding:3px 8px; border-radius:6px; background:rgba(94,200,216,.1); border:1px solid rgba(94,200,216,.22);">Morpheus → Smith · "need crate audit"</span>
|
|
<div style="flex:1; height:1px; background:rgba(255,255,255,.08);"></div>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#6a6a72;">S</span>
|
|
</div>
|
|
|
|
<!-- Smith tile -->
|
|
<div style="flex:1; min-height:0; border-radius:13px; border:1px solid rgba(111,208,192,.22); background:#0d0d10; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid rgba(255,255,255,.05);">
|
|
<div style="position:relative; width:26px; height:26px;"><div style="width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#06201f;">S</div><span style="position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#5fd08a; border:2px solid #0d0d10;"></span></div>
|
|
<span style="font-size:13px; font-weight:700;">Smith</span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; color:#5fd08a;">▸ crawling 12 sources · Terminal</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72; cursor:pointer;">open ⤢</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; margin:10px 12px; border-radius:9px; background:#070708; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.06);">
|
|
<div style="padding:10px 12px; font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.7;">
|
|
<div style="color:#5fd08a;">$ cargo audit --json | jq '.vulnerabilities'</div>
|
|
<div style="color:#6a6a72;"> fetching advisory-db… <span style="color:#5fd08a;">done</span></div>
|
|
<div style="color:#9a9aa2;"> scanned 184 crates · <span style="color:#e8b465;">2 advisories</span></div>
|
|
<div style="color:#5ec8d8;"> ▸ tokio 1.x · RUSTSEC-2025-00xx<span style="display:inline-block; width:5px; height:11px; background:#5fd08a; margin-left:2px; vertical-align:-1px; animation:cm-type 1s steps(1) infinite;"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:14px;">
|
|
|
|
<!-- inter-agent comms -->
|
|
<div style="flex:1.2; min-height:0; border-radius:13px; border:1px solid rgba(255,255,255,.07); background:#0d0d10; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#c98af0;">⇄ INTER-AGENT COMMS</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a;">● live</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; overflow:hidden; padding:12px 14px; display:flex; flex-direction:column; gap:11px;">
|
|
<div style="display:flex; gap:9px;">
|
|
<div style="width:22px; height:22px; flex:none; border-radius:6px; background:linear-gradient(135deg,#ff8a7a,#ff5f57); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#2a0d0a;">M</div>
|
|
<div style="flex:1;"><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#ff8a7a; margin-bottom:2px;">Morpheus · 18:15:52</div><div style="font-size:12px; color:#cfcfd5; line-height:1.5;">PR #214 touches tokio — can you audit the crate tree before I approve?</div></div>
|
|
</div>
|
|
<div style="display:flex; gap:9px;">
|
|
<div style="width:22px; height:22px; flex:none; border-radius:6px; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#06201f;">S</div>
|
|
<div style="flex:1;"><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a; margin-bottom:2px;">Smith · 18:16:03</div><div style="font-size:12px; color:#cfcfd5; line-height:1.5;">On it. Running cargo audit across 184 crates now.</div></div>
|
|
</div>
|
|
<div style="display:flex; gap:9px; opacity:.85;">
|
|
<div style="width:22px; height:22px; flex:none; border-radius:6px; background:linear-gradient(135deg,#6fd0c0,#4aa3b8); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#06201f;">S</div>
|
|
<div style="flex:1;"><div style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a; margin-bottom:2px;">Smith · typing…</div><div style="font-size:12px; color:#7a7a82; line-height:1.5;">2 advisories found, summarizing<span style="display:inline-block; width:5px; height:11px; background:#5fd08a; margin-left:2px; vertical-align:-1px; animation:cm-type 1s steps(1) infinite;"></span></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- routines & loops -->
|
|
<div style="flex:1; min-height:0; border-radius:13px; border:1px solid rgba(255,255,255,.07); background:#0d0d10; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div style="flex:none; display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05);">
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#5fd08a;">↻ ROUTINES & LOOPS</span>
|
|
<span style="flex:1;"></span>
|
|
<span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#6a6a72; cursor:pointer;">+ new</span>
|
|
</div>
|
|
<div style="flex:1; min-height:0; overflow:hidden; padding:11px 14px; display:flex; flex-direction:column; gap:9px;">
|
|
<div style="padding:9px 11px; border-radius:9px; background:#101014; border:1px solid rgba(94,200,216,.18);">
|
|
<div style="display:flex; align-items:center; gap:7px; margin-bottom:7px;"><span style="width:6px; height:6px; border-radius:50%; background:#5ec8d8; animation:cm-blink 1.4s infinite;"></span><span style="font-size:12px; font-weight:600;">Dependency watch</span><span style="flex:1;"></span><span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5ec8d8;">loop · Smith · step 7</span></div>
|
|
<div style="height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden;"><div style="width:48%; height:100%; background:linear-gradient(90deg,#5ec8d8,#4aa3b8);"></div></div>
|
|
</div>
|
|
<div style="padding:9px 11px; border-radius:9px; background:#101014; border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:7px;"><span style="width:6px; height:6px; border-radius:50%; background:#e8b465;"></span><span style="font-size:12px; font-weight:600;">PR triage</span><span style="flex:1;"></span><span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#e8b465;">cron · Morpheus · 09:00</span></div>
|
|
<div style="padding:9px 11px; border-radius:9px; background:#101014; border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:7px;"><span style="width:6px; height:6px; border-radius:50%; background:#5fd08a;"></span><span style="font-size:12px; font-weight:600;">Nightly digest</span><span style="flex:1;"></span><span style="font-family:'JetBrains Mono',monospace; font-size:9px; color:#5fd08a;">done · 02:00 · 1m</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:26px; flex:none; display:flex; align-items:center; gap:16px; padding:0 16px; border-top:1px solid rgba(255,255,255,.06); background:#0a0a0c; font-family:'JetBrains Mono',monospace; font-size:10px; color:#5a5a62;">
|
|
<span style="color:#5fd08a;">● durable runner ok</span>
|
|
<span>2 agents · 3 loops</span>
|
|
<span>checkpoint 3s ago</span>
|
|
<span style="flex:1;"></span>
|
|
<span>§15 sandbox: isolated</span>
|
|
<span style="color:#e8b465;">1 door awaiting approval</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
</body>
|
|
</html>
|