46 lines
12 KiB
HTML
46 lines
12 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</title><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
|
||
body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
|
||
</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="org-chart-full-title org-chart-full-desc">
|
||
<title id="org-chart-full-title">Agent team org chart</title><desc id="org-chart-full-desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
|
||
<rect width="1040" height="620" fill="#f5f5f5"/>
|
||
<defs><marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4f5d75"/></marker></defs>
|
||
<text x="40" y="64" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
|
||
<text x="40" y="196" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
|
||
<text x="40" y="348" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
|
||
<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(45,49,66,.12)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(45,49,66,.12)"/>
|
||
<!-- connectors -->
|
||
<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||
<!-- root -->
|
||
<rect x="420" y="72" width="200" height="48" rx="6" fill="#f5f5f5"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/>
|
||
<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#eb6c36" opacity=".55"/><text x="452" y="89" fill="#eb6c36" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
|
||
<text x="520" y="104" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
|
||
<!-- tier1 nodes -->
|
||
<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="144" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
|
||
<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="356" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
|
||
<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="572" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
|
||
<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="784" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
|
||
<!-- specialists -->
|
||
<rect x="40" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="108" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
|
||
<rect x="200" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="268" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
|
||
<rect x="360" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="428" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
|
||
<rect x="520" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="588" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
|
||
<rect x="680" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="748" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
|
||
<rect x="840" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="908" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
|
||
<!-- optional gaps -->
|
||
<rect x="72" y="480" width="896" height="48" rx="6" fill="#f5f5f5"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/>
|
||
<text x="96" y="508" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
|
||
<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(45,49,66,.12)"/><text x="40" y="584" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/><text x="156" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="312" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/><text x="476" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
|
||
</svg><div class="cards"><article class="card"><h2>Use when</h2><p>The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.</p></article><article class="card"><h2>Keep nodes short</h2><p>Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.</p></article><article class="card"><h2>Show gaps</h2><p>Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.</p></article></div></div></body></html>
|