0
TOOLS#01b7666d
Datum -- Project Context Brain
@Owner·deposited 1mo ago·updated 1mo ago·26 views
TOOLS#01b7666d
Datum -- Project Context Brain
OW
@Owner
26Views
0Comments
0Forks
0Saves
SHARE · REMIX
Datum -- Project Context Brain — a HTML tools widget by @Owner.
CONTROLS
timerformclock
No comments yet. Be the first!
✦ Remix with AI
SDK in this widgetNo Vibes SDK features detected yet
Generated prompt
You are helping me modify a vibe-coded widget from itjustvibes.com.
[VIBE CODE: "Datum -- Project Context Brain" by @Owner]
Source: https://itjustvibes.com/Owner/datum-project-context-brain
Type: HTML
--- SOURCE CODE ---
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datum -- Project Context Brain</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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--paper:#EBEEF3; --surface:#FFFFFF; --surface-2:#F5F7FA; --inset:#F0F3F7;
--line:#DCE1E9; --line-2:#C7CFDB;
--ink:#0F1E36; --ink-2:#43506A; --muted:#7B879C; --faint:#9BA5B6;
--blue:#2B5CC4; --blue-deep:#1E3E86; --blue-tint:#E7EEFB;
--amber:#B26A00; --amber-tint:#FBEED4; --amber-line:#EBCB8B;
--green:#1B7A54; --green-tint:#DCF0E6;
--red:#B23A2E; --red-tint:#F8E2DF;
--shadow:0 1px 2px rgba(15,30,54,.04),0 8px 24px rgba(15,30,54,.06);
--shadow-sm:0 1px 2px rgba(15,30,54,.06);
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--disp:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
--body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--paper);color:var(--ink);
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--amber-tint)}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.01em;line-height:1.15}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
/* ---------- SHELL ---------- */
.app{display:grid;grid-template-columns:224px 1fr;grid-template-rows:56px 1fr;
grid-template-areas:"brand top" "nav main";height:100vh;overflow:hidden}
.brand{grid-area:brand;display:flex;align-items:center;gap:9px;padding:0 18px;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.mark{width:22px;height:22px;flex:none;display:grid;place-items:center}
.mark svg{display:block}
.brand b{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.02em}
.brand .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);margin-left:2px}
.topbar{grid-area:top;display:flex;align-items:center;gap:14px;padding:0 16px 0 18px;
background:var(--surface);border-bottom:1px solid var(--line)}
.proj-switch{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);
border-radius:8px;background:var(--surface);min-width:0}
.proj-switch:hover{border-color:var(--line-2)}
.proj-switch .pid{font-family:var(--mono);font-size:10px;color:var(--muted)}
.proj-switch .pname{font-family:var(--disp);font-weight:600;font-size:13px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--faint)}
.ask{flex:1;display:flex;align-items:center;gap:9px;max-width:560px;padding:7px 12px;
background:var(--inset);border:1px solid var(--line);border-radius:9px}
.ask:focus-within{border-color:var(--blue);background:var(--surface)}
.ask input{flex:1;border:none;background:none;outline:none;font-size:13px;font-family:var(--body);color:var(--ink)}
.ask input::placeholder{color:var(--faint)}
.ask kbd{font-family:var(--mono);font-size:10px;color:var(--muted);border:1px solid var(--line-2);
border-radius:4px;padding:1px 5px;background:var(--surface)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.avatars{display:flex}
.avatars span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
font-family:var(--mono);font-size:10px;font-weight:600;color:#fff;border:2px solid var(--surface);margin-left:-7px}
.avatars span:first-child{margin-left:0}
/* ---------- NAV ---------- */
.nav{grid-area:nav;background:var(--surface);border-right:1px solid var(--line);
padding:14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav .grp{padding:14px 10px 6px;}
.nav .grp:first-child{padding-top:2px}
.navitem{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;
color:var(--ink-2);font-size:13px;font-weight:500;position:relative}
.navitem svg{color:var(--faint);flex:none}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem.on{background:var(--blue-tint);color:var(--blue-deep);font-weight:600}
.navitem.on svg{color:var(--blue)}
.navitem .badge{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;
background:var(--amber);color:#fff;border-radius:20px;padding:1px 7px;line-height:1.5}
.navitem.on .badge{background:var(--amber)}
.nav-foot{margin-top:auto;padding:12px 10px 2px;border-top:1px solid var(--line)}
/* ---------- MAIN ---------- */
.main{grid-area:main;overflow-y:auto;background:var(--paper)}
.view{display:none;padding:26px 30px 60px;max-width:1180px}
.view.on{display:block}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.vhead h1{font-size:23px}
.vhead .sub{color:var(--muted);font-size:13px;margin-top:5px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;
font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{background:var(--blue-deep)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn svg{flex:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;
font-weight:500;padding:2px 8px;border-radius:20px;line-height:1.7;white-space:nowrap}
.chip.blue{background:var(--blue-tint);color:var(--blue-deep)}
.chip.amber{background:var(--amber-tint);color:var(--amber)}
.chip.green{background:var(--green-tint);color:var(--green)}
.chip.red{background:var(--red-tint);color:var(--red)}
.chip.gray{background:var(--inset);color:var(--muted)}
.chip .d{width:5px;height:5px;border-radius:50%}
.chip.blue .d{background:var(--blue)} .chip.amber .d{background:var(--amber)}
.chip.green .d{background:var(--green)} .chip.red .d{background:var(--red)} .chip.gray .d{background:var(--faint)}
.src{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;
color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
padding:2px 7px;cursor:pointer}
.src:hover{border-color:var(--blue);color:var(--blue-deep)}
.src svg{color:var(--blue)}
/* brain meter */
.meter{display:flex;gap:3px;height:9px;border-radius:5px;overflow:hidden}
.meter i{flex:1;background:var(--inset)}
.meter i.b{background:var(--blue)} .meter i.a{background:var(--amber)} .meter i.r{background:var(--red)}
.topmeter{display:flex;align-items:center;gap:10px}
.topmeter .meter{width:130px}
.topmeter .pct{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
/* stat tiles */
.stat{padding:16px 18px}
.stat .eyebrow{margin-bottom:9px}
.stat .num{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em}
.stat .cap{font-size:12px;color:var(--muted);margin-top:3px}
.stat .num small{font-size:14px;color:var(--muted);font-weight:500}
/* tables */
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 14px;
border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td .rid{font-family:var(--mono);font-size:11px;color:var(--muted)}
.sec-title{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;
border-bottom:1px solid var(--line)}
.sec-title h3{font-size:14px}
.pad{padding:18px}
/* project cards */
.projcard{padding:18px;display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:.12s}
.projcard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.projcard.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.projcard .tag{font-family:var(--mono);font-size:10px;color:var(--muted)}
.projcard h3{font-size:15px;line-height:1.25}
.projcard .row{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted)}
/* distill candidate */
.cand{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.cand:last-child{border-bottom:none}
.cand .body{flex:1;min-width:0}
.cand .stmt{font-size:13.5px;font-weight:500;line-height:1.45;margin-bottom:9px;color:var(--ink)}
.cand .meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.conf{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cand .acts{display:flex;gap:6px;flex:none}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);
display:grid;place-items:center;color:var(--ink-2)}
.icon-btn.ok:hover{background:var(--green-tint);border-color:var(--green);color:var(--green)}
.icon-btn.no:hover{background:var(--red-tint);border-color:var(--red);color:var(--red)}
.icon-btn.ed:hover{border-color:var(--blue);color:var(--blue)}
/* brain section list */
.bsec{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line)}
.bsec:last-child{border-bottom:none}
.bsec .idx{font-family:var(--mono);font-size:11px;color:var(--faint);width:24px;flex:none}
.bsec .nm{flex:1;font-size:13px;font-weight:500}
.bsec .nm small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px}
/* fact block */
.fact{padding:14px 18px;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:none}
.fact .t{font-size:13px;font-weight:500;line-height:1.5;margin-bottom:8px}
.fact .prov{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:11px;color:var(--muted)}
/* answer (ask the brain) */
.answer{margin-bottom:20px;border:1px solid var(--blue);background:linear-gradient(180deg,#F6F9FF,#fff);
border-radius:12px;overflow:hidden;display:none}
.answer.show{display:block}
.answer .ah{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep)}
.answer .ab{padding:16px}
.answer .ab p{font-size:13.5px;line-height:1.6;margin-bottom:12px}
.answer .ab p:last-child{margin-bottom:0}
.answer .cites{display:flex;flex-wrap:wrap;gap:7px}
/* agents */
.agent{padding:16px;display:flex;flex-direction:column;gap:12px}
.agent .top{display:flex;align-items:flex-start;gap:11px}
.agent .ico{width:34px;height:34px;border-radius:9px;background:var(--blue-tint);color:var(--blue);
display:grid;place-items:center;flex:none}
.agent h3{font-size:13.5px}
.agent .desc{font-size:12px;color:var(--muted);line-height:1.45}
.agent .scope{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);background:var(--surface-2);
border:1px solid var(--line);border-radius:6px;padding:7px 9px;line-height:1.5}
.agent .foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.agent .last{font-family:var(--mono);font-size:10px;color:var(--muted)}
/* toggle */
.tog{width:34px;height:19px;border-radius:20px;background:var(--line-2);position:relative;flex:none;transition:.15s}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
background:#fff;box-shadow:var(--shadow-sm);transition:.15s}
.tog.on{background:var(--green)} .tog.on::after{left:17px}
.running{color:var(--amber)!important}
/* skills */
.skill{padding:15px 16px;display:flex;flex-direction:column;gap:9px;cursor:pointer}
.skill:hover{border-color:var(--line-2)}
.skill.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.skill h3{font-size:13px}
.skill .desc{font-size:11.5px;color:var(--muted);line-height:1.45}
.skill .used{font-family:var(--mono);font-size:10px;color:var(--faint)}
.editor{font-family:var(--mono);font-size:12px;line-height:1.7;background:#0F1E36;color:#C7D3E8;
border-radius:10px;padding:16px 18px;overflow:auto;white-space:pre}
.editor .fm{color:#7FA7E0} .editor .k{color:#E0B36A} .editor .h{color:#8FD3B0}
.callout{display:flex;gap:12px;padding:15px 18px;background:var(--amber-tint);
border:1px solid var(--amber-line);border-radius:10px;align-items:flex-start}
.callout svg{color:var(--amber);flex:none;margin-top:1px}
.callout b{font-family:var(--disp)}
.callout p{font-size:12.5px;color:#6A4A12;line-height:1.5}
.divider{height:1px;background:var(--line);margin:26px 0}
/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;font-size:13px;padding:11px 18px;border-radius:10px;
box-shadow:0 12px 30px rgba(15,30,54,.28);display:flex;align-items:center;gap:9px;
opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{color:#7FE0AE;flex:none}
.toast .mono{color:#AEB9CC}
/* dropdown */
.dd{position:absolute;top:52px;left:18px;width:320px;background:var(--surface);border:1px solid var(--line);
border-radius:12px;box-shadow:var(--shadow);z-index:50;overflow:hidden;display:none}
.dd.show{display:block}
.dd .di{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.dd .di:hover{background:var(--surface-2)} .dd .di:last-child{border-bottom:none}
.dd .di .sq{width:8px;height:8px;border-radius:2px;flex:none}
.dd .di .t{font-size:12.5px;font-weight:500} .dd .di .m{font-family:var(--mono);font-size:10px;color:var(--muted)}
.dd .dnew{color:var(--blue);font-weight:600;font-size:12.5px;padding:11px 14px;display:flex;gap:9px;align-items:center}
@media(max-width:860px){
.app{grid-template-columns:60px 1fr;grid-template-areas:"brand top" "nav main"}
.brand b,.brand .dot{display:none}.brand{justify-content:center;padding:0}
.navitem span.lbl{display:none}.navitem{justify-content:center;padding:10px}
.nav .grp{display:none}.navitem .badge{position:absolute;top:3px;right:3px;margin:0;padding:0 4px}
.g2,.g3,.g4{grid-template-columns:1fr}
.ask{display:none}.proj-switch .pid{display:none}
.view{padding:18px 16px 60px}
.nav-foot{display:none}
}
</style>
</head>
<body>
<div class="app">
<!-- BRAND -->
<div class="brand">
<span class="mark">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none">
<path d="M11 3 L19 17 H3 Z" stroke="#2B5CC4" stroke-width="1.6" fill="#E7EEFB"/>
<circle cx="11" cy="14.2" r="1.7" fill="#B26A00"/>
<path d="M11 3 V14" stroke="#2B5CC4" stroke-width="1.2" stroke-dasharray="2 2"/>
</svg>
</span>
<b>Datum</b><span class="dot"></span>
</div>
<!-- TOPBAR -->
<div class="topbar" style="position:relative">
<div class="proj-switch" onclick="toggleDD(event)">
<span class="sq" style="width:9px;height:9px;border-radius:2px;background:var(--blue)"></span>
<div>
<div class="pid">DBB-2024-118</div>
<div class="pname">Cascade Regional -- Jet A Fuel Farm Expansion</div>
</div>
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2"/></svg>
</div>
<div class="dd" id="dd">
<div class="di"><span class="sq" style="background:var(--blue)"></span><div><div class="t">Cascade Regional -- Jet A Fuel Farm</div><div class="m">DBB-2024-118 · 62% · active</div></div></div>
<div class="di"><span class="sq" style="background:var(--green)"></span><div><div class="t">Harbor Point -- Marine Fueling Pier</div><div class="m">DBB-2024-091 · 88% · bid-ready</div></div></div>
<div class="di"><span class="sq" style="background:var(--amber)"></span><div><div class="t">Depot 7 -- Test Cell Fuel System</div><div class="m">DBB-2025-004 · 24% · intake</div></div></div>
<div class="dnew"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/></svg>New project</div>
</div>
<label class="ask">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="var(--muted)" stroke-width="2"/><path d="M20 20l-3-3" stroke="var(--muted)" stroke-width="2"/></svg>
<input id="askInput" placeholder="Ask the brain -- e.g. what secondary containment volume is required?" onkeydown="if(event.key==='Enter')askBrain()">
<kbd>↵</kbd>
</label>
<div class="top-right">
<div class="topmeter" title="Basis of Design completeness">
<div class="meter"><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="a"></i><i class="r"></i><i></i><i></i><i></i></div>
<span class="pct" id="topPct">62%</span>
</div>
<div class="avatars">
<span style="background:#2B5CC4">RM</span>
<span style="background:#1B7A54">JC</span>
<span style="background:#B26A00">TP</span>
<span style="background:#5A6B86">+2</span>
</div>
</div>
</div>
<!-- NAV -->
<nav class="nav">
<div class="grp eyebrow">Workspace</div>
<div class="navitem" data-v="hub" onclick="go('hub')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="3" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.8"/><rect x="3" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.8"/><rect x="14" y="14" width="7" height="7" rx="1.5" stroke="currentColor" stroke-width="1.8"/></svg>
<span class="lbl">Projects</span>
</div>
<div class="grp eyebrow">Build the brain</div>
<div class="navitem" data-v="intake" onclick="go('intake')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0l-4-4m4 4l4-4" stroke="currentColor" stroke-width="1.8"/><path d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2" stroke="currentColor" stroke-width="1.8"/></svg>
<span class="lbl">Intake</span>
</div>
<div class="navitem" data-v="distill" onclick="go('distill')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M3 4h18l-7 8v6l-4 2v-8z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
<span class="lbl">Distill</span><span class="badge" id="navBadge">6</span>
</div>
<div class="navitem" data-v="brain" onclick="go('brain')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M11 3 L19 17 H3 Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="11" cy="14" r="1.5" fill="currentColor"/></svg>
<span class="lbl">Basis of Design</span>
</div>
<div class="grp eyebrow">Work the project</div>
<div class="navitem" data-v="eng" onclick="go('eng')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M4 20V7l8-4 8 4v13" stroke="currentColor" stroke-width="1.7"/><path d="M4 20h16M9 20v-6h6v6" stroke="currentColor" stroke-width="1.7"/></svg>
<span class="lbl">Engineering</span>
</div>
<div class="navitem" data-v="pm" onclick="go('pm')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M4 5h16M4 12h16M4 19h10" stroke="currentColor" stroke-width="1.8"/><circle cx="19" cy="19" r="2" stroke="currentColor" stroke-width="1.6"/></svg>
<span class="lbl">PM Dashboard</span>
</div>
<div class="grp eyebrow">Intelligence</div>
<div class="navitem" data-v="agents" onclick="go('agents')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><rect x="5" y="8" width="14" height="11" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M12 5V3M8 8V6m8 2V6" stroke="currentColor" stroke-width="1.7"/><circle cx="9.5" cy="13" r="1" fill="currentColor"/><circle cx="14.5" cy="13" r="1" fill="currentColor"/></svg>
<span class="lbl">Agents</span>
</div>
<div class="navitem" data-v="skills" onclick="go('skills')">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 15.8 6.5 18.2l1-5.5-4-3.9L9 8z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
<span class="lbl">Skills</span>
</div>
<div class="nav-foot">
<div class="navitem"><svg width="17" height="17" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.7"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3" stroke="currentColor" stroke-width="1.7"/></svg><span class="lbl">Settings</span></div>
</div>
</nav>
<!-- MAIN -->
<main class="main">
<!-- ===== HUB ===== -->
<section class="view" data-view="hub">
<div class="vhead">
<div><div class="eyebrow">Workspace</div><h1>Projects</h1><div class="sub">Each project is one brain -- a curated, sourced, multi-user context base.</div></div>
<button class="btn pri" onclick="toast('New project wizard','link a folder to begin intake')"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/></svg>New project</button>
</div>
<div class="grid g3">
<div class="card projcard active" onclick="go('brain')">
<div style="display:flex;justify-content:space-between;align-items:start"><span class="tag">DBB-2024-118</span><span class="chip blue"><i class="d"></i>Active</span></div>
<h3>Cascade Regional<br>Jet A Fuel Farm Expansion</h3>
<div><div class="eyebrow" style="margin-bottom:6px">Brain completeness</div><div class="meter"><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="a"></i><i class="r"></i><i></i><i></i><i></i></div></div>
<div class="row"><span>62% · 6 pending review</span><span>4 contributors</span></div>
</div>
<div class="card projcard" onclick="toast('Harbor Point','switch project')">
<div style="display:flex;justify-content:space-between;align-items:start"><span class="tag">DBB-2024-091</span><span class="chip green"><i class="d"></i>Bid-ready</span></div>
<h3>Harbor Point<br>Marine Fueling Pier</h3>
<div><div class="eyebrow" style="margin-bottom:6px">Brain completeness</div><div class="meter"><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="b"></i><i class="a"></i><i></i></div></div>
<div class="row"><span>88% · 0 pending</span><span>6 contributors</span></div>
</div>
<div class="card projcard" onclick="toast('Depot 7','switch project')">
<div style="display:flex;justify-content:space-between;align-items:start"><span class="tag">DBB-2025-004</span><span class="chip amber"><i class="d"></i>Intake</span></div>
<h3>Depot 7<br>Test Cell Fuel System</h3>
<div><div class="eyebrow" style="margin-bottom:6px">Brain completeness</div><div class="meter"><i class="b"></i><i class="b"></i><i class="a"></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
<div class="row"><span>24% · 18 pending</span><span>2 contributors</span></div>
</div>
</div>
<div class="divider"></div>
<div class="eyebrow" style="margin-bottom:12px">Why a brain beats a fresh chat</div>
<div class="grid g4">
<div class="card stat"><div class="eyebrow">Curation gate</div><div class="num">1,240<small> → 86</small></div><div class="cap">Intake facts distilled to reviewed, sourced entries. Signal in, noise out.</div></div>
<div class="card stat"><div class="eyebrow">Traceable</div><div class="num">100%</div><div class="cap">Every brain fact links to its source doc, page, and approver.</div></div>
<div class="card stat"><div class="eyebrow">Persistent</div><div class="num">4</div><div class="cap">Contributors share one brain. It survives sessions and staff turnover.</div></div>
<div class="card stat"><div class="eyebrow">Conflicts caught</div><div class="num" style="color:var(--red)">3</div><div class="cap">Contradictions between code, client std & AHJ surfaced automatically.</div></div>
</div>
</section>
<!-- ===== INTAKE ===== -->
<section class="view" data-view="intake">
<div class="vhead">
<div><div class="eyebrow">Build the brain · Step 1</div><h1>Intake</h1><div class="sub">Linked folders are scanned and classified. This is raw material -- nothing here is in the brain yet.</div></div>
<div style="display:flex;gap:10px"><button class="btn" onclick="toast('Re-scan started','watching linked folders')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M4 12a8 8 0 018-8 8 8 0 016 2.7M20 12a8 8 0 01-8 8 8 8 0 01-6-2.7" stroke="currentColor" stroke-width="1.8"/><path d="M18 3v4h-4M6 21v-4h4" stroke="currentColor" stroke-width="1.8"/></svg>Re-scan</button><button class="btn pri" onclick="toast('Link a folder','\\\\fileserver\\projects\\DBB-2024-118')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" stroke="currentColor" stroke-width="1.7"/></svg>Link folder</button></div>
</div>
<div class="grid g4" style="margin-bottom:16px">
<div class="card stat"><div class="eyebrow">Linked folders</div><div class="num">3</div></div>
<div class="card stat"><div class="eyebrow">Files scanned</div><div class="num">147</div></div>
<div class="card stat"><div class="eyebrow">Classified</div><div class="num">142 <small>/147</small></div></div>
<div class="card stat"><div class="eyebrow">Sent to distill</div><div class="num" style="color:var(--amber)">6</div></div>
</div>
<div class="card">
<div class="sec-title"><h3>Scanned items · \\fileserver\projects\DBB-2024-118</h3><span class="chip gray mono">last scan 41 min ago</span></div>
<table>
<thead><tr><th>File</th><th>Type</th><th>Classified as</th><th>Status</th></tr></thead>
<tbody>
<tr><td><b>00_RFP_CascadeRegional_FuelFarm.pdf</b><div class="rid">2.4 MB · 38 pp</div></td><td class="mono">PDF</td><td><span class="chip blue"><i class="d"></i>RFP / Scope</span></td><td><span class="chip amber">4 candidates</span></td></tr>
<tr><td><b>Client_Design_Standards_v4.docx</b><div class="rid">880 KB</div></td><td class="mono">DOCX</td><td><span class="chip blue"><i class="d"></i>Client standard</span></td><td><span class="chip amber">2 candidates</span></td></tr>
<tr><td><b>Geotech_Report_Rev2.pdf</b><div class="rid">6.1 MB · 64 pp</div></td><td class="mono">PDF</td><td><span class="chip blue"><i class="d"></i>Geotech</span></td><td><span class="chip green">read</span></td></tr>
<tr><td><b>Email_AHJ_setback_clarification.msg</b><div class="rid">Fire Marshal · 06/18</div></td><td class="mono">MSG</td><td><span class="chip blue"><i class="d"></i>AHJ correspondence</span></td><td><span class="chip red">conflict flagged</span></td></tr>
<tr><td><b>NFPA30_2021.pdf</b><div class="rid">reference code</div></td><td class="mono">PDF</td><td><span class="chip blue"><i class="d"></i>Code / Standard</span></td><td><span class="chip gray">indexed</span></td></tr>
<tr><td><b>Existing_Site_Survey.dwg</b><div class="rid">CAD</div></td><td class="mono">DWG</td><td><span class="chip gray"><i class="d"></i>Drawing</span></td><td><span class="chip gray">metadata only</span></td></tr>
<tr><td><b>Kickoff_Meeting_Notes_0312.docx</b><div class="rid">312 KB</div></td><td class="mono">DOCX</td><td><span class="chip blue"><i class="d"></i>Meeting notes</span></td><td><span class="chip green">read</span></td></tr>
<tr><td style="color:var(--muted)"><b>Vendor_TankCutSheets/</b><div class="rid">11 files</div></td><td class="mono">FOLDER</td><td><span class="chip gray"><i class="d"></i>Vendor data</span></td><td><span class="chip gray">queued</span></td></tr>
</tbody>
</table>
</div>
</section>
<!-- ===== DISTILL ===== -->
<section class="view" data-view="distill">
<div class="vhead">
<div><div class="eyebrow">Build the brain · Step 2 · the gate</div><h1>Distill & review</h1><div class="sub">Agents propose structured facts from intake. You decide what enters the brain. This gate is the whole point.</div></div>
<div class="topmeter"><span class="eyebrow">Pending</span><span class="pct" id="pendCount" style="color:var(--amber);font-size:16px">6</span></div>
</div>
<div class="callout" style="margin-bottom:18px">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3l9 16H3z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M12 9v5M12 17v.5" stroke="currentColor" stroke-width="1.8"/></svg>
<div><b>Conflict detected.</b><p>One proposed fact contradicts a code minimum already in the brain. Accepting it will open a resolution task rather than silently overwriting -- the brain never hides a contradiction.</p></div>
</div>
<div class="card" id="candList">
<div class="cand" id="c1">
<div class="body">
<div class="stmt">Provide two (2) 30,000-gallon aboveground storage tanks for Jet A, welded steel, API 650.</div>
<div class="meta"><span class="chip blue"><i class="d"></i>Requirement</span><span class="src" onclick="trace('RFP §2.1, p.4')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>RFP §2.1 · p.4</span><span class="conf">confidence 96%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c1')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c1','Tank & Equipment')" title="Accept into brain"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
<div class="cand" id="c2">
<div class="body">
<div class="stmt">Secondary containment (dike) shall be sized for 110% of the largest tank volume -- 33,000 gal.</div>
<div class="meta"><span class="chip green"><i class="d"></i>Code basis</span><span class="src" onclick="trace('NFPA 30 §22.11.2')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>NFPA 30 §22.11</span><span class="conf">confidence 91%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c2')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c2','Containment & Spill Control')" title="Accept into brain"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
<div class="cand" id="c3" style="background:var(--red-tint)">
<div class="body">
<div class="stmt">AHJ requires a <b>50 ft</b> setback from the property line -- exceeds the 25 ft code minimum currently in the brain.</div>
<div class="meta"><span class="chip red"><i class="d"></i>Conflict · Constraint</span><span class="src" onclick="trace('AHJ email, Fire Marshal, 06/18')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>AHJ email · 06/18</span><span class="conf">confidence 88%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c3')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c3','Offsets & Setbacks',true)" title="Accept & open resolution"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
<div class="cand" id="c4">
<div class="body">
<div class="stmt">All product piping shall be double-wall with interstitial monitoring (client standard, exceeds code).</div>
<div class="meta"><span class="chip blue"><i class="d"></i>Requirement</span><span class="src" onclick="trace('Client Design Standards v4 §3.2')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>Client Std v4 §3.2</span><span class="conf">confidence 94%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c4')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c4','Materials of Construction')" title="Accept into brain"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
<div class="cand" id="c5">
<div class="body">
<div class="stmt">Seismic Design Category D per site-specific geotechnical investigation.</div>
<div class="meta"><span class="chip blue"><i class="d"></i>Constraint</span><span class="src" onclick="trace('Geotech Report Rev2, p.12')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>Geotech Rev2 · p.12</span><span class="conf">confidence 90%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c5')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c5','Design Criteria')" title="Accept into brain"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
<div class="cand" id="c6">
<div class="body">
<div class="stmt"><b>Open question:</b> fire-protection water source is not identified in the RFP. Needs client / civil confirmation before Fire Protection section can be closed.</div>
<div class="meta"><span class="chip amber"><i class="d"></i>Open question</span><span class="src" onclick="trace('gap -- absent from RFP §5')"><svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M10 14a3 3 0 004 0l3-3a3 3 0 00-4-4l-1 1M14 10a3 3 0 00-4 0l-3 3a3 3 0 004 4l1-1" stroke="currentColor" stroke-width="1.8"/></svg>gap · RFP §5</span><span class="conf">confidence 72%</span></div>
</div>
<div class="acts"><button class="icon-btn ed" onclick="toast('Edit candidate','refine before accepting')" title="Edit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 20h4L18 10l-4-4L4 16z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg></button><button class="icon-btn no" onclick="reject('c6')" title="Reject"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/></svg></button><button class="icon-btn ok" onclick="accept('c6','PM · open questions')" title="Log as open question"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2"/></svg></button></div>
</div>
</div>
<div id="emptyDistill" style="display:none;text-align:center;padding:50px;color:var(--muted)">
<div class="eyebrow" style="margin-bottom:8px">Queue clear</div>
<p>Every candidate reviewed. New intake will refill this queue.</p>
</div>
</section>
<!-- ===== BRAIN / BASIS OF DESIGN ===== -->
<section class="view" data-view="brain">
<div class="vhead">
<div><div class="eyebrow">The brain · anchor deliverable</div><h1>Basis of Design</h1><div class="sub">The durable, sourced core. Compiled truth on top; the decision timeline underneath every fact.</div></div>
<button class="btn" onclick="toast('Export','Basis of Design → Word / PDF')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" stroke="currentColor" stroke-width="1.8"/></svg>Export BoD</button>
</div>
<!-- ask the brain answer -->
<div class="answer" id="answer">
<div class="ah"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M11 3l8 14H3z" stroke="var(--blue)" stroke-width="1.7"/></svg>Answered from the brain</div>
<div class="ab">
<p id="answerText">Required secondary containment volume is <b>33,000 gallons</b> -- 110% of the largest single tank (30,000 gal Jet A).</p>
<div class="cites">
<span class="src" onclick="trace('NFPA 30 §22.11.2')">NFPA 30 §22.11 · dike sizing</span>
<span class="src" onclick="trace('RFP §2.1 p.4')">RFP §2.1 · tank capacity</span>
<span class="src" onclick="trace('approved by J. Cho 06/22')">approved · J. Cho · 06/22</span>
</div>
</div>
</div>
<div class="grid g4" style="margin-bottom:18px">
<div class="card stat"><div class="eyebrow">Completeness</div><div class="num" id="brainNum">62<small>%</small></div><div class="cap">of 12 required sections</div></div>
<div class="card stat"><div class="eyebrow">Sourced facts</div><div class="num" id="factNum">86</div><div class="cap">all traceable to intake</div></div>
<div class="card stat"><div class="eyebrow">Open questions</div><div class="num" style="color:var(--amber)">5</div><div class="cap">blocking 2 sections</div></div>
<div class="card stat"><div class="eyebrow">Conflicts</div><div class="num" style="color:var(--red)">1</div><div class="cap">setback -- awaiting resolution</div></div>
</div>
<div class="grid g2">
<div class="card">
<div class="sec-title"><h3>Sections</h3><span class="eyebrow">status</span></div>
<div class="bsec"><span class="idx">01</span><div class="nm">Design Criteria<small>Jet A, seismic D, climate loads</small></div><span class="chip blue"><i class="d"></i>Populated</span></div>
<div class="bsec"><span class="idx">02</span><div class="nm">Governing Codes & Standards<small>NFPA 30 / 407, API 650 / 2610, 40 CFR 112</small></div><span class="chip blue"><i class="d"></i>Populated</span></div>
<div class="bsec"><span class="idx">03</span><div class="nm">Containment & Spill Control<small>110% dike, SPCC</small></div><span class="chip blue"><i class="d"></i>Populated</span></div>
<div class="bsec"><span class="idx">04</span><div class="nm">Tank & Equipment Design<small>2 * 30,000 gal AST</small></div><span class="chip blue"><i class="d"></i>Populated</span></div>
<div class="bsec"><span class="idx">05</span><div class="nm">Materials of Construction<small>double-wall piping</small></div><span class="chip amber"><i class="d"></i>Needs input</span></div>
<div class="bsec"><span class="idx">06</span><div class="nm">Offsets & Setbacks<small>code vs AHJ mismatch</small></div><span class="chip red"><i class="d"></i>Conflict</span></div>
<div class="bsec"><span class="idx">07</span><div class="nm">Leak Detection & Monitoring<small>--</small></div><span class="chip gray"><i class="d"></i>Empty</span></div>
<div class="bsec"><span class="idx">08</span><div class="nm">Fire Protection<small>water source unknown</small></div><span class="chip gray"><i class="d"></i>Empty</span></div>
<div class="bsec"><span class="idx">09</span><div class="nm">Electrical Area Classification<small>--</small></div><span class="chip gray"><i class="d"></i>Empty</span></div>
</div>
<div class="card" style="align-self:start">
<div class="sec-title"><h3>03 · Containment & Spill Control</h3><span class="chip blue">compiled truth</span></div>
<div class="fact">
<div class="t">Secondary containment dike sized to 110% of the largest tank = <b>33,000 gal</b>. Impervious liner; sloped to a monitored low point.</div>
<div class="prov"><span class="src" onclick="trace('NFPA 30 §22.11.2')">NFPA 30 §22.11</span><span class="src" onclick="trace('RFP §2.1 p.4')">RFP §2.1</span><span>·</span><span>J. Cho · 06/22</span></div>
</div>
<div class="fact">
<div class="t">SPCC plan required; facility exceeds 1,320 gal aggregate aboveground storage.</div>
<div class="prov"><span class="src" onclick="trace('40 CFR 112.1')">40 CFR 112</span><span>·</span><span>R. Mehta · 06/20</span></div>
</div>
<div class="pad" style="border-top:1px solid var(--line);background:var(--surface-2)">
<div class="eyebrow" style="margin-bottom:8px">Timeline</div>
<div class="prov" style="flex-direction:column;align-items:flex-start;gap:6px">
<span>06/20 -- added from SPCC permit intake</span>
<span>06/22 -- dike volume revised 27,500 → 33,000 gal after tank count confirmed</span>
<span>06/22 -- approved by J. Cho</span>
</div>
</div>
</div>
</div>
</section>
<!-- ===== ENGINEERING ===== -->
<section class="view" data-view="eng">
<div class="vhead">
<div><div class="eyebrow">Work the project</div><h1>Engineering context</h1><div class="sub">The registers the discipline leads live in -- every row sourced, every code traced.</div></div>
<div style="display:flex;gap:9px"><span class="chip blue">Requirements 34</span><span class="chip green">Codes 9</span><span class="chip red">Conflicts 1</span></div>
</div>
<div class="card" style="margin-bottom:16px">
<div class="sec-title"><h3>Requirements register</h3><button class="btn sm" onclick="toast('Filter','by discipline / status')">Filter</button></div>
<table>
<thead><tr><th>ID</th><th>Requirement</th><th>Source</th><th>Code ref</th><th>Owner</th><th>Status</th></tr></thead>
<tbody>
<tr><td class="rid">R-001</td><td>Two 30,000-gal Jet A AST</td><td><span class="src" onclick="trace('RFP §2.1')">RFP §2.1</span></td><td class="mono">API 650</td><td>RM</td><td><span class="chip green">verified</span></td></tr>
<tr><td class="rid">R-014</td><td>110% secondary containment</td><td><span class="src" onclick="trace('NFPA 30 §22.11')">NFPA 30</span></td><td class="mono">§22.11</td><td>JC</td><td><span class="chip green">verified</span></td></tr>
<tr><td class="rid">R-022</td><td>Double-wall product piping</td><td><span class="src" onclick="trace('Client Std v4 §3.2')">Client Std v4</span></td><td class="mono">§3.2</td><td>JC</td><td><span class="chip amber">review</span></td></tr>
<tr><td class="rid">R-031</td><td>50 ft property-line setback</td><td><span class="src" onclick="trace('AHJ email 06/18')">AHJ 06/18</span></td><td class="mono">local</td><td>RM</td><td><span class="chip red">conflict</span></td></tr>
<tr><td class="rid">R-037</td><td>Seismic Design Category D</td><td><span class="src" onclick="trace('Geotech Rev2 p.12')">Geotech Rev2</span></td><td class="mono">ASCE 7</td><td>TP</td><td><span class="chip amber">review</span></td></tr>
<tr><td class="rid">R-040</td><td>Fire-protection water source</td><td><span class="src" onclick="trace('gap')">-- gap --</span></td><td class="mono">NFPA 407</td><td>--</td><td><span class="chip gray">open</span></td></tr>
</tbody>
</table>
</div>
<div class="grid g2">
<div class="card">
<div class="sec-title"><h3>Code applicability register</h3></div>
<table>
<thead><tr><th>Code</th><th>Applies to</th><th>Status</th></tr></thead>
<tbody>
<tr><td class="mono">NFPA 30</td><td>Tanks, containment, spacing</td><td><span class="chip green">confirmed</span></td></tr>
<tr><td class="mono">NFPA 407</td><td>Aircraft fuel servicing</td><td><span class="chip green">confirmed</span></td></tr>
<tr><td class="mono">API 650</td><td>Welded steel tanks</td><td><span class="chip green">confirmed</span></td></tr>
<tr><td class="mono">40 CFR 112</td><td>SPCC / spill prevention</td><td><span class="chip green">confirmed</span></td></tr>
<tr><td class="mono">Local AHJ</td><td>Setbacks, fire access</td><td><span class="chip amber">verifying</span></td></tr>
</tbody>
</table>
</div>
<div class="card">
<div class="sec-title"><h3>Conflict · open</h3><span class="chip red"><i class="d"></i>needs resolution</span></div>
<div class="pad">
<div class="eyebrow" style="margin-bottom:8px">R-031 · Property-line setback</div>
<p style="font-size:13px;line-height:1.6;margin-bottom:14px">Code minimum is <b>25 ft</b> (NFPA 30 §22.4). The Fire Marshal's 06/18 email requires <b>50 ft</b>. The brain holds both and blocks the section until an engineer records the governing value and rationale.</p>
<div style="display:flex;gap:8px"><button class="btn pri sm" onclick="toast('Resolution recorded','50 ft governs -- AHJ authority')">Record resolution</button><button class="btn sm" onclick="trace('both sources')">View both sources</button></div>
</div>
</div>
</div>
</section>
<!-- ===== PM DASHBOARD ===== -->
<section class="view" data-view="pm">
<div class="vhead">
<div><div class="eyebrow">Work the project</div><h1>PM dashboard</h1><div class="sub">Related items pulled straight from the brain -- no status meeting required to know where things stand.</div></div>
</div>
<div class="grid g4" style="margin-bottom:16px">
<div class="card stat"><div class="eyebrow">Delivery</div><div class="num">Design-Bid-Build</div><div class="cap">30% design phase</div></div>
<div class="card stat"><div class="eyebrow">Brain health</div><div class="num" style="color:var(--blue)">62%</div><div class="cap">2 sections blocked</div></div>
<div class="card stat"><div class="eyebrow">Open questions</div><div class="num" style="color:var(--amber)">5</div><div class="cap">3 awaiting client</div></div>
<div class="card stat"><div class="eyebrow">Risks</div><div class="num" style="color:var(--red)">2</div><div class="cap">1 schedule-affecting</div></div>
</div>
<div class="grid g2">
<div class="card">
<div class="sec-title"><h3>Open questions & owners</h3></div>
<table>
<thead><tr><th>Question</th><th>Owner</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Fire-protection water source?</td><td>Client</td><td class="mono">07/09</td></tr>
<tr><td>Confirm governing setback (25 vs 50 ft)</td><td>R. Mehta</td><td class="mono">07/05</td></tr>
<tr><td>Tank vendor pre-approval list</td><td>Procurement</td><td class="mono">07/12</td></tr>
<tr><td>Leak-detection standard to apply</td><td>J. Cho</td><td class="mono">07/10</td></tr>
</tbody>
</table>
</div>
<div class="card" style="align-self:start">
<div class="sec-title"><h3>Risks</h3></div>
<div class="fact"><div class="t"><span class="chip red" style="margin-right:6px"><i class="d"></i>Schedule</span>50 ft setback may not fit current site layout -- could force civil rework before 30% submittal.</div><div class="prov"><span>from R-031 · surfaced by Conflict Checker</span></div></div>
<div class="fact"><div class="t"><span class="chip amber" style="margin-right:6px"><i class="d"></i>Scope</span>Fire-protection water source undefined; may add a pump house not in fee.</div><div class="prov"><span>from open question · RFP §5 gap</span></div></div>
<div class="sec-title" style="border-top:1px solid var(--line)"><h3>Milestones</h3></div>
<div class="bsec"><span class="idx">✓</span><div class="nm">Kickoff & intake</div><span class="chip green">done</span></div>
<div class="bsec"><span class="idx">→</span><div class="nm">30% design submittal</div><span class="chip amber">Jul 25</span></div>
<div class="bsec"><span class="idx">·</span><div class="nm">60% / 90% design</div><span class="chip gray">Sep</span></div>
<div class="bsec"><span class="idx">·</span><div class="nm">Bid documents</div><span class="chip gray">Nov</span></div>
</div>
</div>
</section>
<!-- ===== AGENTS ===== -->
<section class="view" data-view="agents">
<div class="vhead">
<div><div class="eyebrow">Intelligence</div><h1>Agents</h1><div class="sub">Scoped workers that read intake and propose facts. Each writes only where it's allowed -- the brain stays governed.</div></div>
<button class="btn pri" onclick="runAll()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>Run pipeline</button>
</div>
<div class="grid g3">
<div class="card agent">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h10" stroke="currentColor" stroke-width="1.8"/></svg></div><div><h3>Intake Classifier</h3><div class="desc">Tags every scanned file by type & discipline.</div></div><div class="tog on" onclick="tg(this)"></div></div>
<div class="scope">reads: intake/* · writes: file tags</div>
<div class="foot"><span class="last agstat">idle · ran 41m ago</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
<div class="card agent">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M11 3l8 14H3z" stroke="currentColor" stroke-width="1.7"/><circle cx="11" cy="13" r="1.3" fill="currentColor"/></svg></div><div><h3>Design-Basis Extractor</h3><div class="desc">Pulls requirements, criteria & constraints as candidates.</div></div><div class="tog on" onclick="tg(this)"></div></div>
<div class="scope">reads: RFP, standards · writes: distill queue</div>
<div class="foot"><span class="last agstat">idle · 4 candidates</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
<div class="card agent">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v14H4z" stroke="currentColor" stroke-width="1.7"/><path d="M8 9h8M8 13h5" stroke="currentColor" stroke-width="1.7"/></svg></div><div><h3>Code Researcher</h3><div class="desc">Maps NFPA / API / CFR clauses to the project scope.</div></div><div class="tog on" onclick="tg(this)"></div></div>
<div class="scope">tools: web · code library · writes: code register</div>
<div class="foot"><span class="last agstat">idle · 9 codes mapped</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
<div class="card agent">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M6 3v18M6 8h9l-2-2.5L15 3M6 14h6l-1.5-1.8" stroke="currentColor" stroke-width="1.6"/></svg></div><div><h3>Requirements Tracer</h3><div class="desc">Keeps every requirement linked to a source & owner.</div></div><div class="tog on" onclick="tg(this)"></div></div>
<div class="scope">reads: brain · writes: requirements register</div>
<div class="foot"><span class="last agstat">idle · 34 traced</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
<div class="card agent">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3l9 16H3z" stroke="currentColor" stroke-width="1.7"/><path d="M12 10v4M12 16.5v.5" stroke="currentColor" stroke-width="1.8"/></svg></div><div><h3>Conflict & QA Checker</h3><div class="desc">Flags contradictions between code, client std & AHJ.</div></div><div class="tog on" onclick="tg(this)"></div></div>
<div class="scope">reads: brain · writes: conflicts, risks</div>
<div class="foot"><span class="last agstat" style="color:var(--red)">1 conflict found</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
<div class="card agent" style="opacity:.7">
<div class="top"><div class="ico"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 5h16v14H4z" stroke="currentColor" stroke-width="1.7"/><path d="M8 9h8M8 12h8M8 15h5" stroke="currentColor" stroke-width="1.7"/></svg></div><div><h3>PM Digest</h3><div class="desc">Compiles open questions & risks into the dashboard.</div></div><div class="tog" onclick="tg(this)"></div></div>
<div class="scope">reads: brain · writes: PM dashboard</div>
<div class="foot"><span class="last agstat">disabled</span><button class="btn sm" onclick="runOne(this)">Run</button></div>
</div>
</div>
</section>
<!-- ===== SKILLS ===== -->
<section class="view" data-view="skills">
<div class="vhead">
<div><div class="eyebrow">Intelligence</div><h1>Skills</h1><div class="sub">The reusable know-how agents load on demand. Author once, version, reuse across every project.</div></div>
<button class="btn pri" onclick="toast('New skill','scaffold a SKILL.md')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2"/></svg>New skill</button>
</div>
<div class="grid" style="grid-template-columns:340px 1fr">
<div class="grid" style="gap:12px;align-content:start">
<div class="card skill sel" onclick="selSkill(this)"><div style="display:flex;justify-content:space-between;align-items:center"><h3>fueling-design-basis</h3><span class="chip blue mono">v2.3</span></div><div class="desc">Establishes the design basis for a fuel-handling project: extracts governing requirements & researches applicable codes.</div><div class="used">used by · Design-Basis Extractor, Code Researcher</div></div>
<div class="card skill" onclick="selSkill(this)"><div style="display:flex;justify-content:space-between;align-items:center"><h3>containment-sizing</h3><span class="chip blue mono">v1.1</span></div><div class="desc">Computes secondary containment volume from tank schedule & the governing code factor.</div><div class="used">used by · Design-Basis Extractor</div></div>
<div class="card skill" onclick="selSkill(this)"><div style="display:flex;justify-content:space-between;align-items:center"><h3>code-applicability</h3><span class="chip blue mono">v3.0</span></div><div class="desc">Determines which federal/state/local codes govern & cites the controlling sections.</div><div class="used">used by · Code Researcher</div></div>
<div class="card skill" onclick="selSkill(this)"><div style="display:flex;justify-content:space-between;align-items:center"><h3>conflict-detection</h3><span class="chip blue mono">v1.4</span></div><div class="desc">Compares facts across sources & raises a resolution task on contradiction.</div><div class="used">used by · Conflict & QA Checker</div></div>
</div>
<div class="card" style="align-self:start;overflow:hidden">
<div class="sec-title"><h3 class="mono">fueling-design-basis / SKILL.md</h3><div style="display:flex;gap:8px"><button class="btn sm" onclick="toast('Test run','sandbox on sample intake')">Test</button><button class="btn sm pri" onclick="toast('Saved','v2.3 committed')">Save</button></div></div>
<div class="pad">
<div class="editor"><span class="fm">---</span>
<span class="k">name</span>: fueling-design-basis
<span class="k">description</span>: Establish the design basis for a
fuel-handling project. Ingest a scope of work, extract
governing requirements, research applicable codes
(CFR / OSHA / NFPA / API), and produce a traceable
Basis of Design that grounds the project before design.
<span class="fm">---</span>
<span class="h"># Basis of Design</span>
<span class="h">## When to use</span>
Airport fuel farms, storage sites, fuel stations,
engine test-cell fuel systems -- any time you need a
code-grounded requirements framework before design.
<span class="h">## Steps</span>
1. Read the scope; list the governing requirements.
2. Build the code-applicability register.
3. Frame containment, offsets, pressures, materials,
leak detection, fire protection.
4. Emit each fact as a <span class="k">reviewable candidate</span> with a
source citation -- never write straight to the brain.</div>
</div>
</div>
</div>
</section>
</main>
</div>
<div class="toast" id="toast"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.2"/></svg><span id="toastText"></span></div>
<script>
let pending=6, brainPct=62, factCount=86;
function go(v){
document.querySelectorAll('.view').forEach(s=>s.classList.toggle('on',s.dataset.view===v));
document.querySelectorAll('.navitem').forEach(n=>n.classList.toggle('on',n.dataset.v===v));
document.querySelector('.main').scrollTop=0;
document.getElementById('dd').classList.remove('show');
}
function toggleDD(e){e.stopPropagation();document.getElementById('dd').classList.toggle('show');}
document.addEventListener('click',()=>document.getElementById('dd').classList.remove('show'));
let tTimer;
function toast(t,sub){
const el=document.getElementById('toast');
document.getElementById('toastText').innerHTML=t+(sub?' <span class="mono">-- '+sub+'</span>':'');
el.classList.add('show');clearTimeout(tTimer);tTimer=setTimeout(()=>el.classList.remove('show'),2600);
}
function trace(s){toast('Source',s);}
function accept(id,section,conflict){
const c=document.getElementById(id); if(!c)return;
c.style.transition='.28s';c.style.opacity='0';c.style.transform='translateX(20px)';
setTimeout(()=>{c.remove();afterReview();},280);
pending--; brainPct=Math.min(100,brainPct+ (id==='c6'?0:3)); factCount++;
if(conflict){toast('Accepted → resolution task opened','Offsets & Setbacks');}
else if(id==='c6'){toast('Logged as open question','PM dashboard');}
else {toast('Added to Basis of Design','→ '+section);}
syncNums();
}
function reject(id){
const c=document.getElementById(id); if(!c)return;
c.style.transition='.28s';c.style.opacity='0';c.style.transform='translateX(-20px)';
setTimeout(()=>{c.remove();afterReview();},280);
pending--; toast('Rejected','kept out of the brain'); syncNums();
}
function afterReview(){
if(pending<=0){document.getElementById('candList').style.display='none';
document.getElementById('emptyDistill').style.display='block';}
}
function syncNums(){
document.getElementById('navBadge').textContent=pending;
if(pending<=0)document.getElementById('navBadge').style.display='none';
document.getElementById('pendCount').textContent=pending;
document.getElementById('topPct').textContent=brainPct+'%';
document.getElementById('brainNum').innerHTML=brainPct+'<small>%</small>';
document.getElementById('factNum').textContent=factCount;
}
function askBrain(){
const q=document.getElementById('askInput').value.trim();
go('brain');
const a=document.getElementById('answer'); a.classList.add('show');
a.scrollIntoView({behavior:'smooth',block:'nearest'});
toast('Answered from the brain','with citations');
}
function tg(el){el.classList.toggle('on');
const s=el.closest('.agent').querySelector('.agstat');
if(!el.classList.contains('on')){el.closest('.agent').style.opacity='.7';s.textContent='disabled';}
else{el.closest('.agent').style.opacity='1';s.textContent='idle · enabled';}
}
function runOne(btn){
const ag=btn.closest('.agent'); const s=ag.querySelector('.agstat');
const old=s.textContent; s.textContent='running...'; s.classList.add('running'); btn.disabled=true;
setTimeout(()=>{s.textContent='idle · just now';s.classList.remove('running');btn.disabled=false;
toast(ag.querySelector('h3').textContent+' finished','new candidates in Distill');},1300);
}
function runAll(){
document.querySelectorAll('.agent .agstat').forEach(s=>{s.textContent='running...';s.classList.add('running');});
toast('Pipeline running','5 agents');
setTimeout(()=>{document.querySelectorAll('.agent .agstat').forEach(s=>{s.textContent='idle · just now';s.classList.remove('running');});
toast('Pipeline complete','review new candidates in Distill');},1600);
}
function selSkill(el){document.querySelectorAll('.skill').forEach(s=>s.classList.remove('sel'));el.classList.add('sel');}
go('hub');
</script>
</body>
</html>
```
[REQUESTED CHANGES]
(no specific request — apply your best judgment)
--- HOW TO RESPOND (READ FIRST) ---
Before writing any code, follow this exact process:
1. **ANALYZE** the widget source code provided above and identify:
a. Which Vibes SDK features it already uses (vibes.save, vibes.load, vibes.shared.join, etc.)
b. Which SDK features would genuinely benefit THIS specific widget — tailored to what it does, not a dump of everything available.
2. **PRESENT A NUMBERED LIST** covering:
- SDK features currently active in this widget
- New SDK features that would concretely improve this widget (be specific: why this widget, what it enables)
3. **WAIT** — do not write any code yet. Reply with your analysis and numbered list, then stop and ask the user which numbered items they want.
4. **IMPLEMENT ONLY** the items the user confirms, plus any explicit change they requested. Do not add unrequested features.
**IMPORTANT — Shared state room names:**
If you add vibes.shared.join(), do NOT use a hardcoded string literal as the room name (e.g. vibes.shared.join("lobby")) unless the user explicitly wants ALL viewers to share one single global state. A hardcoded room name means every person who visits this widget reads and writes the same shared state — it is a global room. For per-user or per-session isolation, derive the room name from a variable (e.g. a user ID, session token, or random value). When in doubt, use vibes.save/vibes.load for per-user persistence instead.
--- VIBES SDK CONTEXT ---
## Vibes SDK Reference
You are building an HTML widget for It Just Vibes (itjustvibes.com). The Vibes SDK is auto-injected — do NOT add a script tag. Just use `window.vibes` (or just `vibes`).
### Setup
Wrap your startup code in `vibes.onReady`:
```js
vibes.onReady(async () => {
const saved = await vibes.load("myKey");
// your widget logic here
});
```
### State (Per-User Persistence)
Every user gets their own isolated state per widget. All methods return Promises.
| Method | Description |
|--------|-------------|
| `await vibes.save(key, value)` | Save JSON-serializable data |
| `await vibes.load(key)` | Load saved data (returns `null` if not found) |
| `await vibes.delete(key)` | Delete a saved key |
| `await vibes.listKeys()` | Get array of all saved key names |
**Key rules:**
- Keys are strings, max 64 characters, alphanumeric + dashes/underscores
- Values must be JSON-serializable (objects, arrays, strings, numbers, booleans)
- Max 100KB per value, 500KB per widget per user, 5MB per user total
- Max 100 keys per widget per user
### Fetch Proxy
Use direct `fetch()` for APIs with permissive CORS headers (`Access-Control-Allow-Origin: *`). Use `vibes.fetch` for APIs without CORS headers (the proxy handles cross-origin requests):
```js
const resp = await vibes.fetch("https://api.example.com/data", {
method: "GET", // GET, POST, PUT, DELETE
headers: {}, // optional headers
body: null, // optional body (string)
timeout: null // optional timeout in ms
});
const data = await resp.json(); // or resp.text()
console.log(resp.status, resp.ok);
```
### Multiplayer (Shared State)
Real-time shared state across all users viewing the same widget.
```js
// Join a room (call once at startup)
await vibes.shared.join("lobby", { persistent: true });
// Set shared state (broadcasts to all users)
await vibes.shared.set("score", { player1: 10, player2: 7 });
// Read shared state (synchronous, returns last known value)
const score = vibes.shared.get("score");
// Listen for changes to a specific key
vibes.shared.onChange("score", (newValue) => {
console.log("Score updated:", newValue);
});
// Listen for any shared state change
vibes.shared.onAny((key, value) => {
console.log(key, "changed to", value);
});
// Get number of connected users
const count = await vibes.shared.getUserCount();
// Leave room
vibes.shared.leave();
// Clear all shared state for this room
await vibes.shared.clear();
```
**Shared state options:**
- `{ persistent: true }` — state survives page reloads (stored server-side)
- Default room name is "__default__" if omitted
### Agent-Accessible State (vibes.ai.*)
State written with the standard `vibes.save` / `vibes.load` methods is private to each user and is **NOT readable by AI agents**. To share state with an AI agent (via the MCP connector), use the `vibes.ai` sub-namespace:
| Method | Description |
|--------|-------------|
| `await vibes.ai.setState(key, value)` | Write agent-readable state. Key is stored internally as `ai/<key>`. |
| `await vibes.ai.getState(key)` | Read agent-readable state. Returns `null` if key absent. |
| `await vibes.ai.listKeys()` | List all agent-readable keys (without the `ai/` prefix). |
**Important rules:**
- Regular `vibes.save()` / `vibes.load()` is **NOT agent-accessible** — use `vibes.ai.*` for state you want agents to read.
- The widget **owner** must enable agent access in **Manage → Agent tab** before any agent can read or write `vibes.ai.*` state.
- Keys are auto-prefixed to `ai/` internally; you supply just the short key (e.g. `'context'`).
```js
vibes.onReady(async () => {
// Write state an AI agent can later read
await vibes.ai.setState('context', { currentLevel: 3, score: 1500 });
// Read it back (same auto-prefix applies)
const ctx = await vibes.ai.getState('context');
// List all agent-accessible keys for this widget
const keys = await vibes.ai.listKeys(); // e.g. ['context']
});
```
### Rules
1. **Do NOT use localStorage, sessionStorage, or window.storage** — they are blocked or undefined in the sandbox. Use `vibes.save`/`vibes.load` instead.
2. **Do NOT add a script tag to import the SDK** — it is auto-injected.
3. **Wrap startup code in `vibes.onReady()`** — the SDK may not be ready immediately.
4. **Await all SDK calls** — every method (except `vibes.shared.get`) returns a Promise.
5. **External JS libraries are allowed and encouraged** — load them via a `<script src>` tag from a reputable CDN (jsDelivr, unpkg, or cdnjs) with a pinned version, or inline the library source. The only exception: do NOT add a script tag for the Vibes SDK itself — it is auto-injected (see Rule 2).
6. **Keep total code under 100KB** — that is the default widget size limit (your account limit may be higher).
### Rate Limits
| Operation | Limit |
|-----------|-------|
| Writes (save + delete combined) | 30/min |
| Reads (load) | 60/min |
| List keys | 30/min |
| Fetch proxy | Rate limited per widget |
### Error Handling
All SDK methods can reject. Wrap in try/catch:
```js
try {
await vibes.save("key", value);
} catch (err) {
console.error("Save failed:", err.message);
}
```
Fetch proxy errors include `err.code`: `"RATE_LIMITED"`, `"BLOCKED"`, `"FETCH_ERROR"`.
### Data Export
Export rows of data as CSV or Excel directly from your widget.
```js
// Register dataset for the platform's "Export data" button
// AND optionally trigger an immediate download
vibes.exportData(rows, { filename: 'results.csv' })
// rows: Array of arrays (each inner array is one row; first row = headers)
// options.filename: sets the download filename and format (csv or xlsx)
// options.directDownload: false to only register without downloading (default: true)
```
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `filename` | string | `'data.csv'` | Download filename; extension determines format (`.csv` or `.xlsx`) |
| `directDownload` | boolean | `true` | Trigger immediate browser download in addition to registering the dataset |
**Notes:**
- First call registers the dataset so the widget chrome shows an "Export data" button
- Use `.csv` extension for CSV, `.xlsx` for Excel
- CSV injection safety is automatic (formula-starting cells prefixed with `'`)
- Data stays in the browser — no server round-trip
--- FORK & RESUBMIT INSTRUCTION ---
Return the complete, self-contained HTML file with all changes applied.
It should be ready to paste into itjustvibes.com/submit to create a new fork.
Include this comment at the top of the output:
/* Forked from: https://itjustvibes.com/Owner/datum-project-context-brain */