← back to Agent Cabinet
Add cabinet pyramid visual: President→Officers→Agents→Skills→Workflows with connector lines + 24h timeline
655d59b485de70c3c4aa3cd6bc494fe0d8ef652d · 2026-06-16 14:44:35 -0700 · SteveStudio2
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Files touched
Diff
commit 655d59b485de70c3c4aa3cd6bc494fe0d8ef652d
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Tue Jun 16 14:44:35 2026 -0700
Add cabinet pyramid visual: President→Officers→Agents→Skills→Workflows with connector lines + 24h timeline
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
pyramid.html | 272 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 272 insertions(+)
diff --git a/pyramid.html b/pyramid.html
new file mode 100644
index 0000000..9785230
--- /dev/null
+++ b/pyramid.html
@@ -0,0 +1,272 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>The Cabinet — Pyramid & Timelines</title>
+<style>
+ :root{
+ --bg:#0b0e14; --panel:#11151f; --ink:#e7ecf3; --dim:#8a94a6; --line:#1f2735;
+ --op:#60a5fa; --com:#34d399; --mkt:#f472b6; --dir:#fbbf24; --eng:#a78bfa; --res:#22d3ee; --cmp:#fb7185;
+ }
+ *{box-sizing:border-box}
+ html,body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
+ header{padding:18px 24px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:linear-gradient(180deg,#0b0e14 70%,rgba(11,14,20,.0));z-index:30}
+ h1{margin:0;font-size:20px;letter-spacing:.2px;font-weight:600}
+ h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:10px}
+ .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;align-items:center}
+ .legend .lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
+ .legend .dot{width:11px;height:11px;border-radius:3px}
+ .legend .key{margin-left:auto;display:flex;gap:14px;font-size:11.5px;color:var(--dim)}
+ .legend .key b{color:var(--ink);font-weight:600}
+ .scroller{overflow:auto;padding:26px 24px 40px}
+ #pyramid{position:relative;min-width:1180px}
+ svg#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
+ .tier{position:relative;z-index:2}
+ .tier-label{position:absolute;left:-2px;transform:translateX(-100%);color:var(--dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding-right:14px;opacity:.65}
+
+ /* President */
+ .president{display:flex;justify-content:center;margin-bottom:54px}
+ .pres-node{background:linear-gradient(180deg,#1b2233,#141a28);border:1px solid #2b3650;border-radius:14px;padding:12px 26px;text-align:center;box-shadow:0 6px 26px rgba(0,0,0,.4)}
+ .pres-node .t{font-size:16px;font-weight:700}
+ .pres-node .s{color:var(--dim);font-size:11.5px;margin-top:2px}
+
+ /* Officers row */
+ .officers{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
+ .officer-col{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;align-items:center}
+ .officer-node{width:100%;border-radius:11px;padding:10px 12px;text-align:center;cursor:default;
+ background:#121826;border:1px solid var(--oc,#2b3650);box-shadow:0 4px 18px rgba(0,0,0,.35);position:relative}
+ .officer-node::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;border-radius:11px 11px 0 0;background:var(--oc)}
+ .officer-node .nm{font-weight:700;font-size:13px;color:var(--ink)}
+ .officer-node .dm{color:var(--dim);font-size:10.5px;margin-top:3px;line-height:1.3;min-height:26px}
+ .officer-node .ct{margin-top:6px;font-size:10.5px;color:var(--oc);font-weight:600}
+
+ .group-label{align-self:flex-start;margin:16px 0 6px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);opacity:.7}
+ .agents,.skills{display:flex;flex-wrap:wrap;gap:5px;width:100%;justify-content:center}
+ .agent{font-size:10.5px;padding:4px 7px;border-radius:7px;background:#0f1623;border:1px solid var(--oc);color:#dfe6f2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
+ .skill{font-size:9.5px;padding:2.5px 6px;border-radius:20px;background:#0c1019;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
+ .skill.scr{border-color:var(--oc);color:#cfe;cursor:help;font-weight:600}
+
+ /* Workflows */
+ .tier-workflows{margin-top:58px}
+ .wf-band{border:1px dashed #2b3650;border-radius:12px;padding:14px 16px;background:rgba(20,26,40,.4)}
+ .wf-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
+ .wf-row{display:flex;gap:10px;flex-wrap:wrap}
+ .wf{min-width:150px;flex:1 1 150px;border-radius:10px;background:#101725;border:1px solid var(--wc,#2b3650);padding:9px 11px}
+ .wf .wn{font-weight:700;font-size:12px}
+ .wf .wd{color:var(--dim);font-size:10.5px;margin-top:2px}
+ .wf .wt{font-size:10px;color:var(--wc);margin-top:5px;font-weight:600}
+
+ /* Timeline */
+ .timeline-wrap{margin:8px 24px 50px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 22px}
+ .timeline-wrap h2{margin:0 0 4px;font-size:15px;font-weight:600}
+ .timeline-wrap .sub{color:var(--dim);font-size:11.5px;margin-bottom:16px}
+ .tl{position:relative;margin-left:178px;border-left:1px solid var(--line)}
+ .tl-axis{position:relative;height:20px;margin-bottom:4px}
+ .tl-axis .hr{position:absolute;top:0;height:100%;border-left:1px solid #1a2230}
+ .tl-axis .hr span{position:absolute;top:2px;left:3px;font-size:9.5px;color:var(--dim)}
+ .lane{position:relative;height:26px;border-top:1px solid #141b28}
+ .lane:hover{background:rgba(255,255,255,.02)}
+ .lane .lab{position:absolute;left:-178px;width:172px;top:0;height:100%;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink);padding-right:8px;justify-content:flex-end;text-align:right}
+ .lane .lab .d{width:9px;height:9px;border-radius:2px;flex:none}
+ .lane .lab .o{color:var(--dim);font-size:9.5px}
+ .mark{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}
+ .mark.pt{width:11px;height:11px;border-radius:50%;border:2px solid #0b0e14}
+ .mark.pt .tip,.bar .tip{display:none}
+ .bar{position:absolute;top:50%;transform:translateY(-50%);height:8px;border-radius:5px;opacity:.55;background-image:repeating-linear-gradient(90deg,transparent,transparent 5px,rgba(0,0,0,.25) 5px,rgba(0,0,0,.25) 9px)}
+ .mark:hover .tip,.bar:hover .tip{display:block}
+ .tip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:#0b0e14;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:10.5px;white-space:nowrap;color:var(--ink);z-index:9;box-shadow:0 4px 14px rgba(0,0,0,.5)}
+ .foot{color:var(--dim);font-size:11px;padding:0 24px 36px}
+ .foot code{background:#101725;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
+</style>
+</head>
+<body>
+<header>
+ <h1>The Cabinet <small>President → Officers → Agents → Skills → Workflows · live structure from cabinet.yaml</small></h1>
+ <div class="legend" id="legend"></div>
+</header>
+
+<div class="scroller">
+ <div id="pyramid">
+ <svg id="lines"></svg>
+ <div class="tier president"><div class="tier-label" style="top:14px">President</div>
+ <div class="pres-node" id="pres"><div class="t">Steve</div><div class="s">Chief Executive · steve@designerwallcoverings.com</div></div>
+ </div>
+ <div class="tier officers" id="officers"><div class="tier-label" style="top:0">Officers · Agents · Skills</div></div>
+ <div class="tier tier-workflows" id="wftier">
+ <div class="tier-label" style="top:14px">Workflows</div>
+ <div class="wf-band"><div class="wf-title">Recurring orchestration & council workflows</div><div class="wf-row" id="wfrow"></div></div>
+ </div>
+ </div>
+</div>
+
+<div class="timeline-wrap">
+ <h2>Daily timeline — when the fleet fires</h2>
+ <div class="sub">Real launchd / cron cadence. ● = point-in-day job · ▭ = interval job (runs all day). Colored by owning officer.</div>
+ <div id="tl"></div>
+</div>
+
+<div class="foot">
+ Source of truth: <code>~/Projects/agent-cabinet/cabinet.yaml</code> · regenerate with the <code>agent-architect</code> agent.
+ Agents = subagents an officer delegates to · Skills = leaf skill bundles · Workflows = multi-agent orchestrations.
+</div>
+
+<script>
+const OFF = [
+ { id:'vp-operations', nm:'VP Operations', v:'op', col:'#60a5fa',
+ dm:'Infra · monitoring · secrets · domains · DNS · watchdogs',
+ agents:['domain-name-agent','onboard-domain-agent','secrets-manager','pm2-crash-watcher','deployment-engineer','devops-engineer','analytics-agent'],
+ skills:['secrets','domain-setup','cloudflare-manager','open-firewalls','process-hawk'] },
+ { id:'vp-dw-commerce', nm:'VP DW Commerce', v:'com', col:'#34d399',
+ dm:'Catalog · vendor scrapers · Shopify · storefronts',
+ agents:['aichat (Big Red)','front-page-steward'],
+ skills:['dw-site-build','dw-shopify-theme-optimizer','dw-marketing-copy','dw-seo-optimizer','dw-purchasing-vendor','dw-sku-analyst','dw-legal-compliance','room-setting-generator','commercial-room-setting-generator','shopify-vendor-bulk-updater','weekend-csv-products','tiktok','instagram-post-template','instagram-account-manager','instagram-post-scheduler'],
+ scrapers:['1838','arteriors','atomic50','bnwalls','bespoke','brewster','colefax-fowler','colouranddesign','command54','contrado','cowtan','dedar','denovowall','designtex','fabricut','folia','franquemont','hygge','jim-dultz','justin-david','justindavid','knoll','maya-romanoff','mindthegap','muralsource','naturale54','novasuede-updater','osborne','reid-witlin','romo','scalamandre','schumacher-dwsw','stout','timorous','wallquest','york','york-wallcoverings','arc-com','arte-international'] },
+ { id:'vp-dw-marketing', nm:'VP DW Marketing', v:'mkt', col:'#f472b6',
+ dm:'Command center · social · video · creative · ad-intel · GA4',
+ agents:['dw-instagram','dw-tiktok','dw-linkedin','dw-facebook','dw-pinterest','dw-youtube','dw-x-twitter','seo-analyzer','analytics-agent','product-strategist'],
+ skills:['dw-marketing-copy','dw-seo-optimizer','reels-producer','reviewed-demo-video','app-demo-video','what-landed-video','session-debrief','video-gallery','room-setting-generator','commercial-room-setting-generator','canvas-design','four-horsemen','four-horsemen-ui-orchestrator','stampede','logo-agent','ad-social-tracker','advertising-signals','collection-creator','new-arrivals-rotator','pairs-well-with','dw-vendor-landing'] },
+ { id:'vp-directories', nm:'VP Directories', v:'dir', col:'#fbbf24',
+ dm:'Lawyer · doctor · NPH · animals · lacountyeats · ventura',
+ agents:['lawyer-build-agent','doctor-agent','la-research-agent'],
+ skills:['ad-social-tracker','advertising-signals'] },
+ { id:'vp-engineering', nm:'VP Engineering', v:'eng', col:'#a78bfa',
+ dm:'Backend · frontend · DB · review · security · perf · test',
+ agents:['backend-architect','frontend-developer','fullstack-developer','database-architect','database-optimizer','api-documenter','code-reviewer','architect-review','security-auditor','performance-engineer','test-engineer','error-detective','debugger','javascript-pro','typescript-pro','python-pro','ios-developer','mobile-developer','ai-engineer','prompt-engineer','mcp-expert'],
+ skills:['dw-agent-builder','prompt-cache-optimization','claude-api','simplify','review','refactor-agent','mcp-builder'] },
+ { id:'vp-research-content', nm:'VP Research & Content', v:'res', col:'#22d3ee',
+ dm:'Web research · LA records · video · mockups · design · voice',
+ agents:['exa-agent','search-specialist','technical-researcher','data-analyst','data-scientist','website-analysis','seo-analyzer','ui-ux-designer','graphic-designer','product-strategist','debate-team-fast','task-decomposition-expert'],
+ skills:['site-audit','peer-survey','competitors','mockups','tools-pack','info-hub','extension','reviewed-demo-video','app-demo-video','session-debrief','video-gallery','clone-voice','use-voice','reels-producer','four-horsemen','four-horsemen-ui-orchestrator','stampede','canvas-design','artifacts-builder','prism','gamify','claude-control-center'] },
+ { id:'vp-compliance-policy', nm:'VP Compliance & Policy', v:'cmp', col:'#fb7185',
+ dm:'Outbound-comms compliance · pre-flight · legal posture',
+ agents:['comms-compliance','best-practices-reviewer'],
+ skills:['best-practices'] },
+];
+
+const WF = [
+ { n:'officer-idea-council', d:'7 officers brainstorm → top-5', t:'daily 7:00am', col:'#cbd5e1' },
+ { n:'coordinating-agents', d:'morning standup + cross-help', t:'daily 6:45am', col:'#cbd5e1' },
+ { n:'officer-council-replies', d:'apply Steve’s emailed decisions', t:'few ×/day', col:'#cbd5e1' },
+ { n:'george-reply-ingest', d:'reply-to-act on any Claude email', t:'every 20 min', col:'#60a5fa' },
+ { n:'idea-loop', d:'generate + debate-score ideas', t:'every 30 min', col:'#22d3ee' },
+ { n:'morning-review', d:'overnight findings approve panel', t:'daily 8:30am', col:'#22d3ee' },
+ { n:'fleet-refactor-sweep', d:'parallel code-health pass', t:'on demand', col:'#a78bfa' },
+ { n:'deep-research', d:'fan-out web research + verify', t:'on demand', col:'#22d3ee' },
+];
+
+// Daily timeline jobs. start/end in fractional hours (0-24). type pt|interval.
+const JOBS = [
+ { lab:'dw-uptime-probe', owner:'operations', col:'#60a5fa', type:'interval', every:'15 min' },
+ { lab:'dw-canary-meta-watchdog', owner:'operations', col:'#60a5fa', type:'interval', every:'hourly' },
+ { lab:'george-reply-ingest', owner:'operations', col:'#60a5fa', type:'interval', every:'20 min' },
+ { lab:'idea-loop', owner:'research', col:'#22d3ee', type:'interval', every:'30 min' },
+ { lab:'dw-leak-guard', owner:'commerce', col:'#34d399', type:'pt', at:3.5, note:'nightly leak scan' },
+ { lab:'dw-backup-canary', owner:'operations', col:'#60a5fa', type:'pt', at:4.0, note:'Sun 04:00 weekly' },
+ { lab:'dw-scraper-canary', owner:'commerce', col:'#34d399', type:'pt', at:5.0, note:'nightly 05:00' },
+ { lab:'dw-map-auditor', owner:'commerce', col:'#34d399', type:'pt', at:5.5, note:'daily 05:30' },
+ { lab:'dw-leak-scan (fleet)', owner:'compliance', col:'#fb7185', type:'pt', at:6.0, note:'Mon 06:00 weekly' },
+ { lab:'sample-split-resume', owner:'commerce', col:'#34d399', type:'pt', at:6.25, note:'daily 06:15' },
+ { lab:'coordinating-agents', owner:'cabinet', col:'#cbd5e1', type:'pt', at:6.75, note:'standup 06:45' },
+ { lab:'officer-idea-council', owner:'cabinet', col:'#cbd5e1', type:'pt', at:7.0, note:'daily 07:00' },
+ { lab:'morning-review', owner:'research', col:'#22d3ee', type:'pt', at:8.5, note:'daily 08:30' },
+];
+
+const childRefs = []; // {childEl, parentEl, kind}
+
+function legend(){
+ const L = document.getElementById('legend');
+ OFF.forEach(o=>{
+ const s=document.createElement('span'); s.className='lg';
+ s.innerHTML = `<span class="dot" style="background:${o.col}"></span>${o.nm.replace('VP ','')}`;
+ L.appendChild(s);
+ });
+ const k=document.createElement('span'); k.className='key';
+ const totA = OFF.reduce((a,o)=>a+o.agents.length,0);
+ const totS = OFF.reduce((a,o)=>a+o.skills.length+(o.scrapers?o.scrapers.length:0),0);
+ k.innerHTML = `<span><b>7</b> officers</span><span><b>${totA}</b> agents</span><span><b>${totS}</b> skills</span><span><b>${WF.length}</b> workflows</span>`;
+ L.appendChild(k);
+}
+
+function build(){
+ const row = document.getElementById('officers');
+ OFF.forEach(o=>{
+ const col=document.createElement('div'); col.className='officer-col';
+ const node=document.createElement('div'); node.className='officer-node'; node.style.setProperty('--oc',o.col);
+ const sc = o.scrapers?o.scrapers.length:0;
+ node.innerHTML = `<div class="nm">${o.nm}</div><div class="dm">${o.dm}</div>
+ <div class="ct">${o.agents.length} agents · ${o.skills.length+sc} skills</div>`;
+ col.appendChild(node); o._node=node;
+
+ const aL=document.createElement('div'); aL.className='group-label'; aL.textContent='Agents'; col.appendChild(aL);
+ const aWrap=document.createElement('div'); aWrap.className='agents';
+ o.agents.forEach(a=>{ const e=document.createElement('div'); e.className='agent'; e.style.setProperty('--oc',o.col); e.textContent=a; aWrap.appendChild(e); childRefs.push({c:e,p:node,kind:'agent',col:o.col}); });
+ col.appendChild(aWrap);
+
+ const sL=document.createElement('div'); sL.className='group-label'; sL.textContent='Skills'; col.appendChild(sL);
+ const sWrap=document.createElement('div'); sWrap.className='skills';
+ o.skills.forEach(s=>{ const e=document.createElement('div'); e.className='skill'; e.textContent=s; sWrap.appendChild(e); childRefs.push({c:e,p:node,kind:'skill',col:o.col}); });
+ if(o.scrapers){ const e=document.createElement('div'); e.className='skill scr'; e.style.setProperty('--oc',o.col);
+ e.textContent='Vendor Scrapers ×'+o.scrapers.length; e.title=o.scrapers.join(', ');
+ sWrap.appendChild(e); childRefs.push({c:e,p:node,kind:'skill',col:o.col}); }
+ col.appendChild(sWrap);
+
+ row.appendChild(col);
+ childRefs.push({c:node,p:document.getElementById('pres'),kind:'officer',col:o.col});
+ });
+
+ const wfrow=document.getElementById('wfrow');
+ WF.forEach(w=>{ const e=document.createElement('div'); e.className='wf'; e.style.setProperty('--wc',w.col);
+ e.innerHTML=`<div class="wn">${w.n}</div><div class="wd">${w.d}</div><div class="wt">${w.t}</div>`; wfrow.appendChild(e); });
+}
+
+function center(el, root){
+ const r=el.getBoundingClientRect(), b=root.getBoundingClientRect();
+ return { x:r.left-b.left+r.width/2, y:r.top-b.top, yb:r.top-b.top+r.height, h:r.height };
+}
+function drawLines(){
+ const root=document.getElementById('pyramid');
+ const svg=document.getElementById('lines');
+ svg.setAttribute('width', root.scrollWidth); svg.setAttribute('height', root.scrollHeight);
+ svg.setAttribute('viewBox',`0 0 ${root.scrollWidth} ${root.scrollHeight}`);
+ let html='';
+ childRefs.forEach(ref=>{
+ const c=center(ref.c,root), p=center(ref.p,root);
+ const x1=p.x, y1=p.yb, x2=c.x, y2=c.y; // parent bottom → child top
+ const my=(y1+y2)/2;
+ const op = ref.kind==='officer'?0.9 : ref.kind==='agent'?0.5 : 0.22;
+ const w = ref.kind==='officer'?1.8 : ref.kind==='agent'?1.1 : 0.7;
+ html += `<path d="M${x1},${y1} C${x1},${my} ${x2},${my} ${x2},${y2}" fill="none" stroke="${ref.col}" stroke-width="${w}" stroke-opacity="${op}"/>`;
+ });
+ svg.innerHTML=html;
+}
+
+function timeline(){
+ const W=860; // px for 24h track
+ const tl=document.getElementById('tl');
+ const axis=document.createElement('div'); axis.className='tl-axis tl';
+ for(let h=0;h<=24;h+=2){ const t=document.createElement('div'); t.className='hr'; t.style.left=(h/24*W)+'px';
+ t.innerHTML=`<span>${String(h).padStart(2,'0')}</span>`; axis.appendChild(t); }
+ tl.appendChild(axis);
+ JOBS.forEach(j=>{
+ const lane=document.createElement('div'); lane.className='lane tl';
+ const lab=document.createElement('div'); lab.className='lab';
+ lab.innerHTML=`<span>${j.lab}</span><span class="o">${j.owner}</span><span class="d" style="background:${j.col}"></span>`;
+ lane.appendChild(lab);
+ if(j.type==='pt'){
+ const m=document.createElement('div'); m.className='mark pt'; m.style.left=(j.at/24*W)+'px'; m.style.background=j.col;
+ m.innerHTML=`<div class="tip">${j.lab} — ${j.note}</div>`; lane.appendChild(m);
+ } else {
+ const b=document.createElement('div'); b.className='bar'; b.style.left='0px'; b.style.width=W+'px'; b.style.background=j.col;
+ b.innerHTML=`<div class="tip" style="left:60px">${j.lab} — every ${j.every}</div>`; lane.appendChild(b);
+ }
+ tl.appendChild(lane);
+ });
+}
+
+legend(); build(); timeline();
+requestAnimationFrame(()=>requestAnimationFrame(drawLines));
+window.addEventListener('resize', ()=>{ requestAnimationFrame(drawLines); });
+</script>
+</body>
+</html>
← 70ad0c8 cabinet: add vp-dw-marketing (DW Marketing Officer) + 7 per-
·
back to Agent Cabinet
·
Make pyramid nodes runnable + openable: /api/source|open|run 29b288a →