Adds a better diff design and removes the select and copy feature
This commit is contained in:
281
design_handoff_helder_inline_diff/03b-in-pane-diff.html
Normal file
281
design_handoff_helder_inline_diff/03b-in-pane-diff.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Helder — 3b · in-pane diff (design reference)</title>
|
||||
<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=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { margin: 0; background: #EFF0EE; padding: 40px; font-family: 'IBM Plex Sans', sans-serif; color: #171C22; }
|
||||
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-screen-label="03b Diff in pane" style="width:1760px;height:1000px;background:#101720;border:1px solid #CDD1CD;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;color:#E4E7E6">
|
||||
|
||||
<div style="height:44px;flex:none;background:#18202B;border-bottom:1px solid #232C39;display:flex;align-items:center;gap:18px;padding:0 14px">
|
||||
<div style="display:flex;gap:8px;flex:none">
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#E8913A"></span>
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#6C7783"></span>
|
||||
<span style="width:12px;height:12px;border-radius:9999px;background:#3A424C"></span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:baseline;gap:10px;flex:none">
|
||||
<span style="font:700 13px/1 'IBM Plex Mono',monospace;letter-spacing:.02em;color:#F4F5F4">helder<span style="color:#E8913A;animation:blink 1.1s steps(1,end) infinite">.</span></span>
|
||||
<span style="font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783">bob</span>
|
||||
<span style="font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783">·</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#E8913A">bob2</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:7px;font:400 12px/1 'IBM Plex Mono',monospace;color:#6C7783;flex:1;min-width:0">
|
||||
<span>agents</span><span>›</span><span>mail-checker</span><span>›</span>
|
||||
<span style="color:#F4F5F4;font-weight:600">README.md</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:4px;flex:none">
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Search <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘F</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Fluid <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘L</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#6C7783">Hidden <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#6C7783;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘.</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0">Note <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid #232C39;border-radius:2px;padding:4px 6px">⌘N</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:2px;background:rgba(232,145,58,.10);font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4">Git <span style="font:600 12px/1 'IBM Plex Mono',monospace;color:#E8913A;border:1px solid rgba(232,145,58,.35);border-radius:2px;padding:4px 6px">⌘G</span></span>
|
||||
<span style="width:26px;height:26px;margin-left:6px;border:1px solid #232C39;border-radius:2px;display:flex;align-items:center;justify-content:center;font:600 12px/1 'IBM Plex Mono',monospace;color:#6C7783">?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-height:0;display:flex;position:relative">
|
||||
|
||||
<!-- source control -->
|
||||
<div style="width:300px;flex:none;background:#18202B;border-right:1px solid #232C39;display:flex;flex-direction:column">
|
||||
<div style="height:46px;flex:none;box-sizing:border-box;padding:0 12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid #232C39">
|
||||
<div style="flex:1;min-width:0;height:30px;background:#101720;border:1px solid #232C39;border-radius:2px;padding:0 9px;display:flex;align-items:center;font:400 12px/1 'IBM Plex Sans',sans-serif;color:#E4E7E6">runs mail check once an hour</div>
|
||||
<div style="width:30px;height:30px;flex:none;border:1px solid #232C39;border-radius:2px;display:flex;align-items:center;justify-content:center;font:400 15px/1 'IBM Plex Mono',monospace;color:#BAC0C0">↑</div>
|
||||
</div>
|
||||
<div style="padding:14px 12px 6px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783;display:flex;justify-content:space-between">
|
||||
<span>staged changes</span><span style="color:#E8913A">3</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column">
|
||||
<div style="height:22px;display:flex;align-items:center;gap:7px;padding:0 12px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;overflow:hidden"><span style="flex:none">▤</span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">agents/mail-checker</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;background:#232C39;border-left:2px solid #E8913A"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span style="font:500 12px/1 'IBM Plex Sans',sans-serif;color:#F4F5F4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">README.md</span></div>
|
||||
<div style="height:22px;display:flex;align-items:center;gap:7px;padding:0 12px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;overflow:hidden"><span style="flex:none">▤</span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">scheduler</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#F8C793;border-radius:2px;padding:4px 5px">yml</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">scheduler.yaml</span></div>
|
||||
<div style="height:22px;display:flex;align-items:center;gap:7px;padding:0 12px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;overflow:hidden"><span style="flex:none">▤</span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">state</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#A8D6CB;border-radius:2px;padding:4px 5px">tsv</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">skill-usage.tsv</span></div>
|
||||
</div>
|
||||
<div style="margin:16px 12px 0;border-top:1px solid #232C39"></div>
|
||||
<div style="padding:14px 12px 6px;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783;display:flex;justify-content:space-between">
|
||||
<span>changes</span><span style="color:#E8913A">3</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column">
|
||||
<div style="height:22px;display:flex;align-items:center;gap:7px;padding:0 12px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;overflow:hidden"><span style="flex:none">▤</span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">.</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#F0B476;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">CLAUDE.md</span></div>
|
||||
<div style="height:22px;display:flex;align-items:center;gap:7px;padding:0 12px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783;overflow:hidden"><span style="flex:none">▤</span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">scripts</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#F0B476;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">README.md</span></div>
|
||||
<div style="height:26px;display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;border-left:2px solid transparent"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#F0B476;width:12px">M</span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#EFBCB0;border-radius:2px;padding:4px 5px">sh</span><span style="font:400 12px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">check-docs-rot.sh</span></div>
|
||||
</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="padding:12px;border-top:1px solid #232C39;font:400 11px/1.5 'IBM Plex Mono',monospace;color:#6C7783">3 staged · 3 unstaged</div>
|
||||
</div>
|
||||
|
||||
<!-- explorer -->
|
||||
<div style="width:288px;flex:none;background:#18202B;border-right:1px solid #232C39;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #232C39;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783"><span>explorer</span><span>bob</span></div>
|
||||
<div style="flex:1;min-height:0;padding:6px 0;display:flex;flex-direction:column;font:400 13px/1 'IBM Plex Sans',sans-serif;overflow:hidden">
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#828D9A">▤</span>agents</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>knowledge-researcher</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>lead-agent</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#828D9A">▤</span>mail-checker</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>PROMPT.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 58px;color:#F4F5F4;background:#232C39;border-left:2px solid #E8913A"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span style="font-weight:500">README.md</span><span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 60px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>STATE.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>ok-monitor</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>sterrenkijker</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>tony</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>README.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>assets</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>data</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>docker</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>logs</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#828D9A">▤</span>scheduler</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>prompts</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>README.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>runs-2026H2.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>runs.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#F8C793;border-radius:2px;padding:4px 5px">yml</span><span>scheduler.yaml</span><span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#EFBCB0;border-radius:2px;padding:4px 5px">sh</span><span>test.sh</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#EFBCB0;border-radius:2px;padding:4px 5px">sh</span><span>tick.sh</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#BAC0C0"><span style="color:#6C7783;width:8px">›</span><span style="color:#828D9A">▤</span>scripts</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 12px;color:#F4F5F4"><span style="color:#E8913A;width:8px">⌄</span><span style="color:#828D9A">▤</span>state</div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:4px 5px">json</span><span>mail-state.json</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#C3A6CE;border-radius:2px;padding:4px 5px">json</span><span>read-counts.json</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>README.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 44px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#A8D6CB;border-radius:2px;padding:4px 5px">tsv</span><span>skill-usage.tsv</span><span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>CLAUDE.md</span><span style="flex:1"></span><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">M</span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>GUARDRAILS.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>LOOP.md</span><span style="flex:1"></span></div>
|
||||
<div style="height:24px;display:flex;align-items:center;gap:7px;padding:0 12px 0 28px;color:#BAC0C0"><span style="font:600 10px/1 'IBM Plex Mono',monospace;color:#101720;background:#BAC0C0;border-radius:2px;padding:4px 5px">md</span><span>MEMORY.md</span><span style="flex:1"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- editor · diff -->
|
||||
<div style="flex:1;min-width:0;background:#101720;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:46px;flex:none;display:flex;align-items:center;border-bottom:1px solid #232C39">
|
||||
<span style="width:46px;flex:none;text-align:center;font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">bob</span>
|
||||
<div style="flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0 12px">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#6C7783">modified</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#8FBFB4">+2</span>
|
||||
<span style="font:500 12px/1 'IBM Plex Mono',monospace;color:#C4741F">−2</span>
|
||||
<span style="flex:1"></span>
|
||||
<div style="display:flex;border:1px solid #232C39;border-radius:2px;overflow:hidden">
|
||||
<span style="padding:5px 12px;font:500 11px/1 'IBM Plex Sans',sans-serif;color:#171C22;background:#E8913A">Actual</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Original</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Preview</span>
|
||||
<span style="padding:5px 12px;font:400 11px/1 'IBM Plex Sans',sans-serif;color:#BAC0C0;border-left:1px solid #232C39">Diff</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;display:flex;overflow:hidden">
|
||||
<div style="width:46px;flex:none;border-right:1px solid #232C39;display:flex;flex-direction:column;padding-top:8px;font:600 10px/1 'IBM Plex Mono',monospace;color:#8FBFB4">
|
||||
<span style="height:110px"></span>
|
||||
<span style="height:20px;display:flex;align-items:center;justify-content:center;background:#232C39">M</span>
|
||||
<span style="height:340px"></span>
|
||||
<span style="height:20px;display:flex;align-items:center;justify-content:center;color:#C4741F">M</span>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:grid;grid-template-columns:44px 1fr;align-content:start;font:400 13px/20px 'IBM Plex Mono',monospace;padding:8px 0">
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">1</span><span style="padding-right:18px;color:#F4F5F4;text-wrap:pretty"># mail-checker — how I dispatch it</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">2</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">3</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">This file is for me (Bob), the dispatcher. It says when to run this agent and how. The agent's own prompt is <span style="color:#A8D6CB">[`PROMPT.md`](PROMPT.md)</span>. I do not read that file myself.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">6</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">7</span><span style="padding-right:18px;color:#F4F5F4;text-wrap:pretty">## What it does</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">8</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">9</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">It works through imported mails that no AI has looked at yet. Per mail it does three things:</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">11</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">12</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">1. Judges whether Jonathan should actually read it.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">13</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">2. Cleans the body into readable Markdown.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">14</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">3. Makes a todo when the mail asks for a concrete action.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">15</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">16</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">New people it meets get a Vault note, so Blijnder remembers them.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">17</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">18</span><span style="padding-right:18px;color:#F4F5F4;text-wrap:pretty">## The hard boundary</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">19</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">20</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">It reads, cleans, classifies and records. It never replies to a mail, never deletes a mail, and never chooses a recipient. Nothing that it touches leaves Blijnder, and there is no exception to that.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">23</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">24</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">Between 2026-08-22 and 2026-08-27 there was one: an invoice went to the administration through a script of its own. Skynet does that job now (skynet#41), thus the workspace gave it up (bob#371). The agent is mute again, and the outbound gate refuses every command that would speak for it.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">28</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">29</span><span style="padding-right:18px;color:#F4F5F4;text-wrap:pretty">## When to dispatch</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">30</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#8FBFB4;background:rgba(143,191,180,.12);border-left:2px solid #8FBFB4">31</span><span id="changed-line" style="padding-right:18px;color:#F4F5F4;background:rgba(143,191,180,.12);text-wrap:pretty">- The scheduler fires it. Job <span style="color:#F0B476">`mail-checker-ronde`</span>, every hour, on the hour.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">32</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">- Jonathan asks for a mail sweep.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">33</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">- The mail step of my tick shows unchecked mail piling up.</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">34</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">35</span><span style="padding-right:18px;color:#F4F5F4;text-wrap:pretty">## How to dispatch</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">36</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">37</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">Send a subagent the <span style="color:#F4F5F4;font-weight:600">path</span>, not the content:</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">38</span><span></span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">39</span><span style="padding-right:18px;color:#6C7783;text-wrap:pretty">```</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">40</span><span style="padding-right:18px;color:#BAC0C0;text-wrap:pretty">Agent tool → "Read agents/mail-checker/PROMPT.md and follow it."</span>
|
||||
<span style="text-align:right;padding-right:12px;color:#5A6472">41</span><span style="padding-right:18px;color:#6C7783;text-wrap:pretty">```</span>
|
||||
</div>
|
||||
<div style="width:16px;flex:none;border-left:1px solid #232C39;display:flex;flex-direction:column;align-items:center;padding-top:8px">
|
||||
<span style="height:104px"></span>
|
||||
<span style="width:4px;height:4px;background:#6C7783"></span>
|
||||
<span style="height:64px"></span>
|
||||
<span style="width:4px;height:4px;background:#8FBFB4"></span>
|
||||
<span style="height:184px"></span>
|
||||
<span style="width:4px;height:4px;background:#6C7783"></span>
|
||||
<span style="height:118px"></span>
|
||||
<span style="width:4px;height:4px;background:#C4741F"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- agent -->
|
||||
<div style="width:480px;flex:none;background:#101720;border-left:1px solid #232C39;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="flex:1;min-height:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow:hidden;font:400 13px/1.6 'IBM Plex Sans',sans-serif;color:#BAC0C0">
|
||||
<div style="font:400 12px/1.6 'IBM Plex Mono',monospace;color:#6C7783;text-wrap:pretty">98:| <span style="color:#F0B476">[`check-docs-rot.sh`](check-docs-rot.sh)</span> | It checks my rule files for references that are not correct any more: a script or a flag that does not exist, a dead markdown link, an orphan script, an</div>
|
||||
<div style="font:400 12px/1.6 'IBM Plex Mono',monospace;color:#6C7783">└ Allowed by auto mode classifier</div>
|
||||
<div style="display:flex;gap:10px"><span style="color:#6C7783">●</span><span style="text-wrap:pretty">The column is gone. <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">CLAUDE.md</span> now names which agents exist, and nothing about their clock.</span></div>
|
||||
<div style="text-wrap:pretty"><span style="font-weight:600;color:#F4F5F4">Why it was there.</span> The table was written as one map with three columns, and <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">check-docs-rot.sh</span> section L then enforced the third against the cron lines. That made the coupling real: each change of a schedule broke the check until somebody opened a pull request on the root.</div>
|
||||
<div style="text-wrap:pretty"><span style="font-weight:600;color:#F4F5F4">What changed.</span> The table is two columns. Below it stands one rule: when a job runs, and whether it runs at all, stands in <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">scheduler/scheduler.yaml</span> and only there. Section L still holds the table against <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">agents/</span> in both directions, and it no longer reads a clock.</div>
|
||||
<div style="text-wrap:pretty"><span style="font-weight:600;color:#F4F5F4">The check is cleaner now.</span> It reported <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">knowledge-researcher</span> and <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">sterrenkijker</span> as wrong; both were this same duplication, and both are gone.</div>
|
||||
<div style="text-wrap:pretty">Five files stand changed and uncommitted. <span style="color:#F0B476;font-family:'IBM Plex Mono',monospace">CLAUDE.md</span> is a root file, so it needs a pull request when you commit it.</div>
|
||||
<div style="font:400 12px/1.6 'IBM Plex Mono',monospace;color:#6C7783">✳ Churned for 2m 49s · done 8:10 AM</div>
|
||||
</div>
|
||||
<div style="margin:0 16px 12px;height:44px;flex:none;background:#101720;border:2px solid #E8913A;box-shadow:0 0 0 2px rgba(232,145,58,.22);border-radius:2px;display:flex;align-items:center;gap:8px;padding:0 12px">
|
||||
<span style="font:400 13px/1 'IBM Plex Mono',monospace;color:#E8913A">›</span>
|
||||
<span style="width:1px;height:16px;background:#E8913A;animation:blink 1.1s steps(1,end) infinite"></span>
|
||||
|
||||
<!-- hover: original of the whole file, same scroll -->
|
||||
<!-- id added for the demo script -->
|
||||
<div id="original-overlay" style="display:none;position:absolute;z-index:20;top:0;right:0;bottom:0;width:496px;background:#101720;border-left:2px solid #C4741F;box-shadow:0 4px 16px rgba(23,28,34,.10);flex-direction:column;overflow:hidden">
|
||||
<div style="height:46px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #232C39;background:#18202B">
|
||||
<span style="font:700 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#C4741F">original</span>
|
||||
<span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">before this change · same scroll</span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">hold hover</span>
|
||||
</div>
|
||||
<div style="flex:1;min-height:0;display:grid;grid-template-columns:35px 1fr;align-content:start;font:400 10.3px/20px 'IBM Plex Mono',monospace;padding:8px 0;overflow:hidden">
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">1</span><span style="padding-right:11px;color:#F4F5F4;text-wrap:pretty"># mail-checker — how I dispatch it</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">2</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">3</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">This file is for me (Bob), the dispatcher. It says when to run this agent and how. The agent's own prompt is <span style="color:#A8D6CB">[`PROMPT.md`](PROMPT.md)</span>. I do not read that file myself.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">6</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">7</span><span style="padding-right:11px;color:#F4F5F4;text-wrap:pretty">## What it does</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">8</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">9</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">It works through imported mails that no AI has looked at yet. Per mail it does three things:</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">11</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">12</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">1. Judges whether Jonathan should actually read it.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">13</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">2. Cleans the body into readable Markdown.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">14</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">3. Makes a todo when the mail asks for a concrete action.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">15</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">16</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">New people it meets get a Vault note, so Blijnder remembers them.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">17</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">18</span><span style="padding-right:11px;color:#F4F5F4;text-wrap:pretty">## The hard boundary</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">19</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">20</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">It reads, cleans, classifies and records. It never replies to a mail, never deletes a mail, and never chooses a recipient. Nothing that it touches leaves Blijnder, and there is no exception to that.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">23</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">24</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">Between 2026-08-22 and 2026-08-27 there was one: an invoice went to the administration through a script of its own. Skynet does that job now (skynet#41), thus the workspace gave it up (bob#371). The agent is mute again, and the outbound gate refuses every command that would speak for it.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">28</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">29</span><span style="padding-right:11px;color:#F4F5F4;text-wrap:pretty">## When to dispatch</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">30</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#C4741F;background:rgba(196,116,31,.14);border-left:2px solid #C4741F">31</span><span style="padding-right:11px;color:#E4E7E6;background:rgba(196,116,31,.14);text-wrap:pretty">- The scheduler fires it. Job <span style="color:#F0B476">`mail-checker-ronde`</span>, every 15 minutes.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">32</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">- Jonathan asks for a mail sweep.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">33</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">- The mail step of my tick shows unchecked mail piling up.</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">34</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">35</span><span style="padding-right:11px;color:#F4F5F4;text-wrap:pretty">## How to dispatch</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">36</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">37</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">Send a subagent the <span style="color:#F4F5F4;font-weight:600">path</span>, not the content:</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">38</span><span></span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">39</span><span style="padding-right:11px;color:#6C7783;text-wrap:pretty">```</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">40</span><span style="padding-right:11px;color:#BAC0C0;text-wrap:pretty">Agent tool → "Read agents/mail-checker/PROMPT.md and follow it."</span>
|
||||
<span style="text-align:right;padding-right:9px;color:#5A6472">41</span><span style="padding-right:11px;color:#6C7783;text-wrap:pretty">```</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 16px 12px;display:flex;flex-direction:column;gap:6px;font:400 11px/1.5 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span>[Opus 5 · 1M]</span>
|
||||
<span style="color:#171C22;background:#E8913A;border-radius:2px;padding:3px 6px;font-weight:600">bob</span>
|
||||
<span>|</span><span style="color:#A8D6CB">⑂ bob2</span>
|
||||
<span style="flex:1"></span><span>/rc</span>
|
||||
</div>
|
||||
<div><span style="color:#E8913A">▸▸ auto mode on</span> (shift+tab to cycle) · ← for agents</div>
|
||||
</div>
|
||||
<div style="height:150px;flex:none;background:#101720;border-top:1px solid #232C39;padding:12px 16px;font:400 12px/1.7 'IBM Plex Mono',monospace;color:#BAC0C0">
|
||||
<div><span style="color:#A8D6CB">[bob2]</span><span style="color:#828D9A">[~/code/bob]$</span> <span style="display:inline-block;width:7px;height:14px;background:#E8913A;vertical-align:-2px;animation:blink 1.1s steps(1,end) infinite"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:28px;flex:none;background:#18202B;border-top:1px solid #232C39;display:flex;align-items:center;gap:16px;padding:0 14px;font:400 11px/1 'IBM Plex Mono',monospace;color:#6C7783">
|
||||
<span style="color:#E8913A">⑂ bob2</span>
|
||||
<span style="color:#A8D6CB">+22</span><span style="color:#C4741F">−66</span>
|
||||
<span style="flex:1"></span>
|
||||
<span>agents/mail-checker/README.md</span>
|
||||
<span>·</span><span>Ln 1, Col 1</span><span>·</span><span>UTF-8</span><span>·</span><span>LF</span><span>·</span><span style="color:#D4D9D8">Markdown</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var row = document.getElementById('changed-line');
|
||||
var overlay = document.getElementById('original-overlay');
|
||||
row.addEventListener('mouseenter', function () { overlay.style.display = 'flex'; });
|
||||
row.addEventListener('mouseleave', function () { overlay.style.display = 'none'; });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user