@booboo-brain/panel 0.3.4 → 0.5.0

package/dist/index.js

@@ -1,5 +1,1709 @@
+// src/Panel.tsx
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { orgBootSlice } from "@booboo-brain/spec";
+
+// src/panel-css.ts
+var PANEL_CSS = String.raw`
+/* Booboo Organigram — alive, simple, for everyone. One accent (verdigris,
+   the dachshund's collar), a slow aurora breathing behind everything, cards
+   that lift and settle, numbers that count up. Dark by default. */
+
+:root {
+  --bg: #0b0c10;
+  --bg-1: #10131a;
+  --bg-2: #171b24;
+  --line: #242a36;
+  --ink: #e9edf3;
+  --ink-2: #9aa7b6;
+  --ink-3: #5d6776;
+  --accent: #4fb8a0;
+  --accent-2: #7fd4c0;
+  --accent-dim: rgba(79, 184, 160, 0.13);
+  --warn: #e0b45f;
+  --font: -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+/* LIGHT theme — same verdigris accent, swapped surfaces. Toggle in the top bar. */
+:root[data-theme="light"] {
+  --bg: #f5f7f9;
+  --bg-1: #ffffff;
+  --bg-2: #eef1f4;
+  --line: #dbe1e8;
+  --ink: #182029;
+  --ink-2: #55636f;
+  --ink-3: #8b97a3;
+  --accent: #1e8f79;
+  --accent-2: #12796a;
+  --accent-dim: rgba(30, 143, 121, 0.12);
+  --warn: #b57b1e;
+}
+[data-theme="light"] .bar,
+[data-theme="light"] .tabs { background: rgba(255, 255, 255, 0.82); }
+[data-theme="light"] .btn.primary { color: #ffffff; }
+[data-theme="light"] .pnl-aurora { opacity: 0.32; }
+[data-theme="light"] .doss-rep.tap:hover { background: rgba(0, 0, 0, 0.03); }
+[data-theme="light"] .bk-card:hover,
+[data-theme="light"] .mem-row:hover { box-shadow: 0 8px 22px rgba(20, 40, 60, 0.08); }
+/* surfaces that hardcode a dark tint — retint for the light theme */
+[data-theme="light"] .oc-row.wrap { background: rgba(20, 40, 60, 0.04); }
+[data-theme="light"] .doss { background: rgba(255, 255, 255, 0.9); }
+[data-theme="light"] .ag {
+  background: linear-gradient(180deg, hsl(var(--h) 42% 93% / 0.9), var(--bg-1) 60%);
+  border-color: hsl(var(--h) 30% 78%);
+}
+[data-theme="light"] .tl-ava { background: hsl(var(--h) 45% 90% / 0.9); border-color: hsl(var(--h) 40% 75% / 0.5); }
+[data-theme="light"] .oc-tray { background: linear-gradient(180deg, #e7ebef, #eef1f4); box-shadow: inset 0 3px 7px rgba(20, 40, 60, 0.08); }
+[data-theme="light"] .oc-mac { background: rgba(20, 40, 60, 0.05); border-color: rgba(20, 40, 60, 0.1); }
+
+* { box-sizing: border-box; }
+body { font-family: var(--font); color: var(--ink); background: var(--bg); overflow-x: hidden; }
+
+.pnl { display: flex; flex-direction: column; position: relative; overflow: hidden; }
+
+/* the breath — a slow aurora drifting behind everything */
+.pnl-aurora {
+  position: fixed; inset: -30%; pointer-events: none; z-index: 0; opacity: 0.5;
+  background:
+    radial-gradient(38% 30% at 24% 30%, rgba(79, 184, 160, 0.10), transparent 70%),
+    radial-gradient(30% 26% at 78% 64%, rgba(90, 130, 200, 0.08), transparent 70%),
+    radial-gradient(24% 22% at 55% 15%, rgba(79, 184, 160, 0.06), transparent 70%);
+  animation: aurora 48s ease-in-out infinite alternate;
+}
+@keyframes aurora {
+  0% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(3%, -2%) scale(1.06); }
+  100% { transform: translate(-3%, 2%) scale(1.02); }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* everything lands at its final state — honest for users, crisp for captures */
+  .pnl-aurora, .ag.root::before, .ag.root::after, .ag, .content, .bk-card, .tl-row, .mem-row,
+  .rule-card, .doss, .doss-rep, .bar-draft, .ag-light.fail, .mac-dot.fail { animation: none !important; }
+}
+/* the fit is a TRANSITION not an animation — suppress it explicitly so the org
+   snaps to its fitted size instantly under reduced-motion (honest for captures) */
+@media (prefers-reduced-motion: reduce) { .chart { transition: none !important; } }
+
+/* top bar */
+.bar {
+  position: relative; z-index: 2; display: flex; align-items: center; gap: 22px;
+  padding: 14px 26px; border-bottom: 1px solid var(--line);
+  background: rgba(16, 19, 26, 0.82); backdrop-filter: blur(10px);
+  flex-wrap: wrap;
+}
+.bar-brand { font-size: 15px; }
+.bar-brand b { font-weight: 650; }
+.bar-stats { display: flex; gap: 18px; color: var(--ink-2); font-size: 12.5px; }
+.bar-stats b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 14px; }
+.bar-stats .tap { cursor: pointer; transition: color 0.15s; }
+.bar-stats .tap:hover { color: var(--accent); }
+.bar-stats .tap:hover b { color: var(--accent); }
+.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+.bar-ok { color: var(--accent); font-size: 12px; }
+.bar-draft { color: var(--warn); font-size: 12px; animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+.btn {
+  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
+  border-radius: 9px; padding: 8px 15px; font-size: 12.5px; cursor: pointer;
+  transition: border-color 0.15s, transform 0.1s;
+}
+.btn:hover { border-color: var(--accent); }
+.btn:active { transform: scale(0.97); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: #08110e; font-weight: 650; }
+.btn.primary:disabled { opacity: 0.5; cursor: wait; }
+.btn.ghost { background: transparent; color: var(--ink-2); }
+
+/* tabs */
+.tabs {
+  position: relative; z-index: 2; display: flex; gap: 4px; padding: 0 22px;
+  border-bottom: 1px solid var(--line); background: rgba(16, 19, 26, 0.7); backdrop-filter: blur(8px);
+  overflow-x: auto;
+}
+.tab {
+  background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2);
+  font-size: 12.5px; padding: 12px 15px 11px; cursor: pointer; white-space: nowrap;
+  transition: color 0.15s, border-color 0.2s;
+}
+.tab:hover { color: var(--ink); }
+.tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
+.tab-glyph { margin-right: 5px; opacity: 0.85; }
+
+/* every tab's content rises in — the key on .content retriggers it */
+.content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; animation: rise 0.28s ease both; }
+@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+
+.screen { flex: 1; overflow-y: auto; padding: 30px 34px 60px; max-width: 900px; }
+.scr-title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 6px; }
+.scr-count { font-size: 12px; background: var(--accent-dim); color: var(--accent); border-radius: 99px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
+.scr-sub { color: var(--ink-2); font-size: 12.5px; margin: 0 0 24px; }
+.scr-empty { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
+.scr-empty code, .scr-sub code { font-family: var(--mono); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
+.pnl-back { background: none; border: 1px solid var(--line); color: var(--ink-2); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; margin-bottom: 16px; }
+.pnl-back:hover { border-color: var(--accent); color: var(--accent); }
+
+/* buckets */
+.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 13px; }
+.bk-card {
+  text-align: left; background: var(--bg-1); border: 1px solid var(--line); border-radius: 15px;
+  padding: 17px 18px; cursor: pointer; transition: border-color 0.15s, transform 0.12s, box-shadow 0.2s;
+  animation: settle 0.4s ease both;
+}
+.bk-card:hover { border-color: hsl(var(--h) 45% 55% / 0.6); transform: translateY(-2px); box-shadow: 0 8px 26px hsl(var(--h) 50% 50% / 0.10); }
+.bk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--h) 55% 60%); box-shadow: 0 0 9px hsl(var(--h) 55% 60% / 0.7); display: inline-block; }
+.bk-name { font-size: 14px; font-weight: 650; }
+.bk-n { font-size: 27px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
+.bk-n.dim { color: var(--ink-3); }
+.bk-l { font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
+.bk-crew { display: flex; gap: 4px; margin-top: 13px; flex-wrap: wrap; }
+.bk-face {
+  width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px;
+  border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line);
+}
+.bk-more { font-size: 10px; color: var(--ink-3); align-self: center; }
+.bk-agents { margin-top: 8px; font-size: 10.5px; color: var(--ink-3); line-height: 1.5; }
+
+.mem-list { display: flex; flex-direction: column; gap: 6px; }
+.mem-row {
+  display: flex; align-items: baseline; gap: 13px; background: var(--bg-1);
+  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; animation: settle 0.35s ease both;
+}
+.mem-when { font-size: 10.5px; color: var(--accent-2); white-space: nowrap; min-width: 68px; font-variant-numeric: tabular-nums; }
+.mem-label { font-size: 13px; }
+
+/* reports timeline */
+.rep-filter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
+.chip.tap { cursor: pointer; transition: transform 0.1s, background 0.15s; }
+.chip.tap:hover { transform: translateY(-1px); }
+.timeline { position: relative; padding-left: 22px; }
+.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
+.tl-row { position: relative; margin-bottom: 15px; animation: settle 0.35s ease both; }
+.tl-dot {
+  position: absolute; left: -21px; top: 12px; width: 9px; height: 9px; border-radius: 50%;
+  background: hsl(var(--h) 55% 60%); box-shadow: 0 0 9px hsl(var(--h) 55% 60% / 0.7);
+}
+.tl-body { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 11px 15px; transition: border-color 0.15s, transform 0.12s; }
+.tl-row:hover .tl-body { border-color: hsl(var(--h) 45% 50% / 0.5); transform: translateX(2px); }
+.tl-top { display: flex; align-items: center; gap: 8px; }
+.tl-ava {
+  width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; font-size: 12px;
+  border-radius: 7px; background: hsl(var(--h) 42% 22% / 0.8); border: 1px solid hsl(var(--h) 45% 45% / 0.3);
+}
+.tl-agent { font-size: 12.5px; font-weight: 650; }
+.tl-when { font-size: 10.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tl-label { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tl-sum { margin: 7px 0 0 32px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
+
+/* rules */
+.rule-list { display: flex; flex-direction: column; gap: 9px; }
+.rule-card { background: var(--bg-1); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 11px; padding: 12px 15px 10px; animation: settle 0.35s ease both; transition: border-color 0.15s; }
+.rule-card:hover { border-color: var(--accent); }
+.rule-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
+.rule-ref { font-family: var(--mono); font-size: 12.5px; }
+.rule-scope { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); background: var(--accent-dim); border-radius: 5px; padding: 2px 7px; }
+.rule-meta { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
+.rule-meta b { color: var(--ink-2); font-weight: 600; }
+.rule-bar { margin-top: 9px; height: 3px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
+.rule-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.6s ease; }
+
+/* graph */
+.graph-wrap { flex: 1; min-height: 0; display: flex; }
+.graph-frame { flex: 1; border: none; background: #06080e; }
+
+/* dossier extras */
+.doss-head-actions { margin-left: auto; display: flex; gap: 6px; }
+.doss-3d { background: var(--accent-dim); border: 1px solid rgba(79, 184, 160, 0.35); color: var(--accent); border-radius: 8px; padding: 6px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; }
+.doss-3d:hover { border-color: var(--accent); }
+
+/* dossier edit mode — every field of the agent, saved into the draft */
+.doss-edit { display: flex; flex-direction: column; gap: 10px; background: var(--bg-1); border: 1px solid rgba(79, 184, 160, 0.3); border-radius: 12px; padding: 13px 14px; margin-bottom: 20px; animation: settle 0.25s ease both; }
+.doss-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
+.doss-edit label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: 9.5px; }
+.doss-edit input, .doss-edit textarea { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; font-family: var(--font); resize: vertical; }
+.doss-edit input:focus, .doss-edit textarea:focus { outline: none; border-color: var(--accent); }
+.doss-edit-row2 { display: grid; grid-template-columns: 1fr 72px; gap: 8px; }
+.doss-edit-actions { display: flex; gap: 8px; margin-top: 2px; }
+
+/* machine trays — the automations an agent operates, chips with health lights */
+/* the machine rack — a recessed slot flush under the owner's card */
+.oc-tray {
+  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
+  max-width: 210px; margin-top: -6px; padding: 10px 8px 7px;
+  background: linear-gradient(180deg, #0a0c11, #0d1017);
+  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px;
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
+}
+.oc-tray.fail { border-color: rgba(224, 123, 106, 0.55); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55), 0 6px 18px -8px rgba(224, 123, 106, 0.3); }
+.oc-tray.warn { border-color: rgba(224, 180, 95, 0.45); }
+.oc-mac {
+  display: inline-flex; align-items: center; gap: 5px;
+  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px; padding: 4px 8px; cursor: pointer;
+  font-family: var(--mono); font-size: 10px; color: var(--ink-2);
+  transition: border-color 0.15s, transform 0.1s;
+}
+.oc-mac:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
+.oc-mac.sel { border-color: var(--accent); background: var(--accent-dim); color: var(--ink); }
+.oc-mac.more { color: var(--ink-3); font-style: italic; }
+.oc-mac.more:hover { color: var(--accent); }
+.mac-emoji { font-size: 11px; }
+.mac-name { white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
+.mac-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; display: inline-block; }
+.mac-dot.ok { background: var(--accent); box-shadow: 0 0 6px rgba(79, 184, 160, 0.7); }
+.mac-dot.warn { background: var(--warn); box-shadow: 0 0 6px rgba(224, 180, 95, 0.7); }
+.mac-dot.fail { background: #e07b6a; box-shadow: 0 0 7px rgba(224, 123, 106, 0.8); animation: pulse 1.4s ease-in-out infinite; }
+.mac-dot.none { background: var(--ink-3); }
+/* green, but it failed earlier in the window — a faint amber ring, never a tint */
+.mac-dot.ok.unstable { box-shadow: 0 0 6px rgba(79, 184, 160, 0.7), 0 0 0 2px rgba(224, 180, 95, 0.3); }
+
+/* automation dossier health header */
+.doss-health {
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+  background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px;
+  padding: 10px 13px; margin-bottom: 16px; font-size: 11.5px; color: var(--ink-2);
+}
+.doss-health b { color: var(--ink); font-size: 12px; }
+.doss-health.fail { border-color: rgba(224, 123, 106, 0.5); }
+.doss-health.warn { border-color: rgba(224, 180, 95, 0.4); }
+.doss-health.ok { border-color: rgba(79, 184, 160, 0.35); }
+.doss-auto-when { margin-left: auto; font-size: 10px; color: var(--ink-3); white-space: nowrap; }
+
+/* automations — machines an agent operates, listed in its dossier */
+.auto-badge { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn); background: rgba(224, 180, 95, 0.1); border: 1px solid rgba(224, 180, 95, 0.3); border-radius: 5px; padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
+.doss-autos { display: flex; flex-direction: column; gap: 5px; }
+.doss-auto { display: flex; align-items: baseline; gap: 9px; text-align: left; background: var(--bg-1); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; cursor: pointer; transition: border-color 0.15s; }
+.doss-auto:hover { border-color: var(--warn); }
+.doss-auto-emoji { font-size: 13px; }
+.doss-auto-name { font-size: 12px; font-weight: 600; white-space: nowrap; }
+.doss-auto-role { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.doss-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
+.btn.danger { border-color: rgba(224, 123, 106, 0.45); color: #e07b6a; background: transparent; }
+.btn.danger:hover { background: rgba(224, 123, 106, 0.1); }
+.bk-agents.unassigned { color: var(--ink-3); font-style: italic; }
+
+.pending {
+  position: relative; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap;
+  padding: 10px 26px; border-bottom: 1px solid var(--line); background: rgba(224, 180, 95, 0.06);
+}
+.pending-item { font-size: 11.5px; color: var(--warn); font-family: var(--mono); }
+.pnl-err { position: relative; z-index: 2; padding: 10px 26px; color: #e07b6a; font-size: 12.5px; }
+
+/* layout — 100% so a HOST container decides the height (embedded panel);
+   the standalone app gives html/body/#root 100%, so served behaviour is unchanged. */
+.pnl { height: 100%; min-height: 480px; }
+.body { position: relative; z-index: 1; flex: 1; display: flex; min-height: 0; }
+.tree { position: relative; flex: 1; min-width: 0; padding: 24px 26px 24px; overflow: hidden;
+  display: flex; flex-direction: column;
+  /* the ground plane: a faint dot grid (engineered surface, drag affordance)
+     + a verdigris pool anchoring the eye at the root. Static — capture-safe. */
+  background:
+    radial-gradient(900px 420px at 50% 120px, rgba(79, 184, 160, 0.05), transparent 70%),
+    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 1.5px);
+  background-size: auto, 28px 28px;
+}
+.tree-hint { color: var(--ink-3); font-size: 11.5px; margin: 0 0 20px; text-align: center; }
+
+/* THE COMPANY CHART — root on top, branches fanning beneath. Connectors are
+   crafted: curved elbows at the row's ends, branch-hued drops, a glowing
+   junction node where the parent's line meets the bar. Pure CSS. */
+/* the measuring viewport — flex:1 + min-height:0 lets it consume the height
+   .tree gives it; align/justify center the scaled block for narrow orgs. */
+.chart-fit { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
+/* user-zoomed: native scroll is the pan; top-left origin keeps the scaled
+   overflow fully reachable (top/center origin would clip the left half). */
+.chart-fit.zoomed { overflow: auto; justify-content: flex-start; }
+.chart-fit.zoomed .chart { transform-origin: top left; }
+.zoomer {
+  position: absolute; right: 34px; bottom: 32px; z-index: 3; display: flex; align-items: center; gap: 2px;
+  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
+  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+.zoomer button {
+  all: unset; cursor: pointer; padding: 2px 8px; border-radius: 5px; color: var(--ink-2);
+  font-family: var(--mono); font-size: 12px; line-height: 1.4;
+}
+.zoomer button:hover { background: var(--accent-dim); color: var(--ink); }
+.zoomer button.on { color: var(--accent); }
+.zoomer-pct { min-width: 40px; text-align: center; color: var(--ink-3); }
+/* min-width:max-content keeps connectors geometrically correct at natural size
+   BEFORE scaling; the measured --fit shrinks the whole block toward its head. */
+.chart {
+  min-width: max-content; padding: 8px 14px 20px;
+  transform: scale(var(--fit, 1)); transform-origin: top center;
+  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;
+}
+.ocn { display: flex; flex-direction: column; align-items: center; }
+.oc-down { width: 1.5px; height: 18px; position: relative;
+  background: linear-gradient(180deg, hsl(165 40% 45% / 0.5), var(--line)); }
+.oc-down::after { content: ""; position: absolute; bottom: -2px; left: 50%;
+  width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%;
+  background: var(--accent); box-shadow: 0 0 8px rgba(79, 184, 160, 0.5); }
+.oc-row { display: flex; align-items: flex-start; }
+.oc-child { position: relative; padding: 18px 5px 0; display: flex; flex-direction: column; align-items: center; }
+.oc-child::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: 18px;
+  background: linear-gradient(180deg, var(--line), hsl(var(--h, 165) 32% 34%)); }
+.oc-child::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
+  border-top: 1.5px solid var(--line); }
+.oc-child:first-child::after { left: 50%; border-left: 1.5px solid var(--line); border-top-left-radius: 14px; }
+.oc-child:last-child::after { right: 50%; border-right: 1.5px solid var(--line); border-top-right-radius: 14px; }
+.oc-child:first-child::before, .oc-child:last-child::before { display: none; }
+.oc-child:only-child::after { display: none; }
+.oc-child:only-child::before { display: block; }
+
+/* the branch wakes when you hover its parent */
+.ocn:has(> .ag:hover) > .oc-down,
+.ocn:has(> .ag:hover) > .oc-row > .oc-child::before { background: hsl(165 45% 45% / 0.6); }
+.ocn:has(> .ag:hover) > .oc-row > .oc-child::after { border-color: hsl(165 45% 45% / 0.6); }
+
+/* wide sibling sets — grouped subtrees that wrap to natural width (never crush a
+   branch into a fixed cell — that overflowed and collided with the next branch) */
+.oc-row.wrap {
+  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
+  gap: 10px 18px; margin: 0 auto; padding: 12px 14px 14px;
+  max-width: min(100%, 840px);
+  border: 1px solid var(--line); border-radius: 18px; background: rgba(16, 19, 26, 0.35);
+}
+.oc-row.wrap > .oc-child { padding: 8px 4px 0; flex: 0 0 auto; }
+.oc-row.wrap > .oc-child::before, .oc-row.wrap > .oc-child::after { display: none; }
+
+/* agent cards — company badges with a rank system (size + saturation recede
+   with depth) and a light-from-above material model. */
+.ag {
+  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
+  width: calc(160px - min(var(--d, 0), 2) * 12px); /* 160 / 148 / 136 by rank */
+  padding: 13px 11px 10px; text-align: center;
+  background: linear-gradient(180deg, hsl(var(--h) 30% 14% / 0.55), var(--bg-1) 55%);
+  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 15px; cursor: grab; overflow: hidden;
+  filter: saturate(calc(1 - min(var(--d, 0), 2) * 0.15));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 0 0 1px hsl(var(--h) 40% 40% / 0.07),
+    0 1px 2px rgba(0, 0, 0, 0.5),
+    0 16px 32px -18px hsl(var(--h) 55% 40% / 0.28);
+  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s, opacity 0.15s, filter 0.2s;
+  animation: settle 0.4s ease both;
+}
+.ag::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
+  height: calc(4px - min(var(--d, 0), 2) * 1px); /* lanyard thins with rank */
+  background: linear-gradient(90deg, hsl(var(--h) 55% 55% / 0.9), hsl(var(--h) 55% 45% / 0.25)); }
+@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+.ag:hover { border-color: hsl(var(--h) 45% 50% / 0.6); transform: translateY(-2px); filter: saturate(1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 44px -18px hsl(var(--h) 55% 45% / 0.4); }
+.ag.sel { border-color: hsl(var(--h) 55% 55%); filter: saturate(1);
+  box-shadow: 0 0 0 2px hsl(var(--h) 55% 55% / 0.18), 0 10px 28px hsl(var(--h) 50% 45% / 0.2); }
+.ag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ag.over { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-dim), 0 12px 30px rgba(79, 184, 160, 0.2); transform: scale(1.03); }
+.ag.dragging { opacity: 0.45; cursor: grabbing; }
+
+.ag-light { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; }
+.ag-light.ok { background: var(--accent); box-shadow: 0 0 6px rgba(79, 184, 160, 0.7); }
+.ag-light.warn { background: var(--warn); box-shadow: 0 0 6px rgba(224, 180, 95, 0.7); }
+.ag-light.fail { background: #e07b6a; box-shadow: 0 0 8px rgba(224, 123, 106, 0.9); animation: pulse 1.4s ease-in-out infinite; }
+
+.ag.root { cursor: default; width: 200px; padding: 16px 13px 11px;
+  border-color: rgba(79, 184, 160, 0.35); filter: none;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(79, 184, 160, 0.25), 0 24px 60px -20px rgba(79, 184, 160, 0.35); }
+.ag.root .ag-ava { width: 46px; height: 46px; font-size: 23px; }
+.ag.root .ag-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
+.ag.root::after {
+  content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none;
+  box-shadow: inset 0 0 26px rgba(79, 184, 160, 0.08); animation: ring 3.2s ease-in-out infinite;
+}
+@keyframes ring { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
+
+.ag-ava {
+  width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px; margin-top: 2px;
+  border-radius: 13px; background: linear-gradient(140deg, hsl(var(--h) 42% 26% / 0.85), hsl(var(--h) 45% 14% / 0.9));
+  border: 1px solid hsl(var(--h) 45% 45% / 0.35);
+  box-shadow: inset 0 1px 0 hsl(var(--h) 50% 60% / 0.25), 0 4px 10px -4px hsl(var(--h) 50% 30% / 0.6);
+}
+.ag-name { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.ag-role { font-size: 11px; color: var(--ink-2); line-height: 1.35;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.ag-meta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
+.ag-meta em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ag-kids {
+  font-size: 10px; background: var(--accent-dim); color: var(--accent); border-radius: 99px;
+  padding: 2px 8px; font-variant-numeric: tabular-nums; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em;
+}
+
+/* the dossier */
+.doss {
+  width: 340px; flex: 0 0 340px; border-left: 1px solid var(--line);
+  background: rgba(16, 19, 26, 0.75); backdrop-filter: blur(10px);
+  padding: 26px 24px 40px; overflow-y: auto; animation: slidein 0.25s ease both;
+}
+@keyframes slidein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
+.doss-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
+.doss-emoji { font-size: 30px; }
+.doss h2 { margin: 0; font-size: 18px; }
+.doss-role { margin: 3px 0 0; color: var(--ink-2); font-size: 12.5px; }
+
+.doss-chain { font-size: 11px; color: var(--ink-3); margin-bottom: 18px; line-height: 1.7; }
+.doss-chain i { font-style: normal; margin: 0 5px; }
+.doss-chain b { font-weight: 500; }
+.doss-chain b.me { color: var(--accent); font-weight: 650; }
+
+.doss-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
+.doss-stat { background: var(--bg-1); border: 1px solid var(--line); border-radius: 11px; padding: 11px 8px; text-align: center; }
+.doss-n { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.doss-l { font-size: 9.5px; color: var(--ink-3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
+
+.doss section { margin-bottom: 20px; }
+.doss h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); margin: 0 0 9px; }
+.doss-empty { color: var(--ink-3); font-size: 12px; margin: 0; }
+.doss-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
+.doss-rules li { font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: var(--bg-1); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; word-break: break-all; }
+.doss-rules li.own { color: var(--ink); border-color: rgba(79, 184, 160, 0.35); }
+.doss-rules em { color: var(--ink-3); font-style: normal; font-size: 9.5px; margin-left: 5px; }
+.doss-chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.doss-reps { display: flex; flex-direction: column; gap: 7px; }
+.doss-rep {
+  background: var(--bg-1); border: 1px solid var(--line); border-left: 2px solid var(--accent);
+  border-radius: 9px; padding: 9px 11px; animation: settle 0.35s ease both;
+}
+.doss-rep-top { display: flex; align-items: baseline; gap: 9px; }
+.doss-rep-when { font-size: 10px; color: var(--accent-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.doss-rep-label { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.doss-rep-sum { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.55; }
+.doss-rep.tap { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
+.doss-rep.tap:hover { border-left-color: var(--warn); background: rgba(255, 255, 255, 0.03); }
+.doss-rep.tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.doss-rep-caret { margin-left: auto; font-size: 10px; color: var(--ink-2); align-self: center; }
+.rep-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
+.rep-dot.ok { background: var(--accent); } .rep-dot.warn { background: var(--warn); } .rep-dot.fail { background: #e07b6a; }
+.rep-ok { color: var(--accent); } .rep-warn { color: var(--warn); } .rep-fail { color: #e07b6a; }
+.doss-rep-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--ink-2); font-family: var(--mono); word-break: break-word; }
+.doss-rep-detail .doss-l { display: inline-block; min-width: 74px; opacity: .6; text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; }
+.chip { font-size: 11px; background: var(--accent-dim); color: var(--accent-2); border-radius: 7px; padding: 4px 10px; }
+.chip.alt { background: var(--bg-2); color: var(--ink-2); }
+.doss-boot { font-size: 12px; color: var(--ink-2); line-height: 1.6; margin: 0; white-space: pre-wrap; }
+/* contract — one click to open, edit in place, save flows to the org file */
+.doss-contract h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.contract-card {
+  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
+  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
+  padding: 13px 14px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
+}
+.contract-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
+.contract-card:hover .contract-hint { opacity: 1; }
+.contract-card.empty { border-style: dashed; }
+.contract-hint {
+  position: absolute; top: 9px; right: 11px; font-size: 10.5px; font-weight: 650;
+  color: var(--accent-2); opacity: 0.55; transition: opacity 0.15s; letter-spacing: 0.02em;
+}
+.contract-edit { display: flex; flex-direction: column; gap: 8px; }
+.contract-ta {
+  width: 100%; min-height: 220px; resize: vertical; box-sizing: border-box;
+  background: var(--bg-1); border: 1px solid var(--accent); border-radius: 12px;
+  padding: 12px 13px; color: var(--ink); font-family: var(--mono); font-size: 12px; line-height: 1.6;
+  outline: none; box-shadow: 0 0 0 3px var(--accent-dim);
+}
+.doss-edit-hint { font-size: 11px; color: var(--ink-3); margin: 2px 0 0; font-style: italic; }
+.doss-note { color: var(--ink-3); font-size: 11px; line-height: 1.6; }
+.doss-note code { font-family: var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }
+
+.pnl-fatal { min-height: 100vh; display: grid; place-items: center; color: #e07b6a; font-size: 14px; padding: 30px; text-align: center; }
+.pnl-fatal.calm { color: var(--ink-2); }
+
+@media (max-width: 760px) {
+  .doss { position: fixed; right: 0; top: 0; bottom: 0; z-index: 5; width: min(340px, 88vw); box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5); }
+  .tree { padding: 20px 14px 60px; }
+  .ag { max-width: 100%; }
+  .ag-role { display: none; }
+}
+`;
+
+// src/Panel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultApi = (path, init) => fetch(`/api${path}`, init).then((r) => r.ok ? r.json() : r.json().then((b) => Promise.reject(b)));
+var ApiCtx = createContext(defaultApi);
+var useApi = () => useContext(ApiCtx);
+var TABS = [
+  { id: "org", glyph: "\u2302", label: "organigram" },
+  { id: "buckets", glyph: "\u25A4", label: "buckets" },
+  { id: "reports", glyph: "\u23F1", label: "reports" },
+  { id: "rules", glyph: "\xA7", label: "rules" },
+  { id: "graph", glyph: "\u25C9", label: "graph" }
+];
+function relTime(iso) {
+  if (typeof iso !== "string") return "";
+  const t = new Date(iso).getTime();
+  if (!t) return "";
+  const s = (Date.now() - t) / 1e3;
+  if (s < 60) return "just now";
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  if (s < 172800) return "yesterday";
+  return `${Math.floor(s / 86400)}d ago`;
+}
+function nodeAt(n) {
+  const d = n.data ?? {};
+  for (const k of ["at", "ts", "time", "created_at", "date", "bst", "ts_bst", "finished_at"]) {
+    const v = d[k];
+    if (typeof v === "string" && v) return v;
+  }
+  return "";
+}
+function timeMs(at) {
+  if (!at) return NaN;
+  const t = Date.parse(at);
+  return Number.isFinite(t) ? t : Number(at);
+}
+function buildHealthMap(nodes) {
+  const m = /* @__PURE__ */ new Map();
+  for (const r of nodes) {
+    if (!r.cluster) continue;
+    const d = r.data ?? {};
+    if (typeof d.status !== "string") continue;
+    const status = d.status;
+    const at = nodeAt(r);
+    const atMs = timeMs(at);
+    const cur = m.get(r.cluster) ?? { lastAt: "", lastMs: -Infinity, lastStatus: "", n: 0, fails: 0 };
+    cur.n++;
+    if (status === "fail") cur.fails++;
+    if (Number.isFinite(atMs) && atMs >= cur.lastMs) {
+      cur.lastMs = atMs;
+      cur.lastAt = at;
+      cur.lastStatus = status;
+    }
+    m.set(r.cluster, cur);
+  }
+  return m;
+}
+function pulseFor(a, health) {
+  if (!health) return null;
+  const keys = [a.id, ...a.buckets ?? []];
+  let best = null;
+  for (const k of keys) {
+    const p = health.get(k);
+    if (p && (!best || p.lastMs > best.lastMs)) best = p;
+  }
+  return best;
+}
+function lightFor(a, health) {
+  const p = pulseFor(a, health);
+  if (!p || !p.lastAt) return "none";
+  if (p.lastStatus === "fail") return "fail";
+  const ageH = (Date.now() - p.lastMs) / 36e5;
+  const cadence = typeof a.cadence === "number" && a.cadence > 0 ? a.cadence : 26;
+  if (ageH > cadence * 2) return "warn";
+  if (p.lastStatus === "warn") return "warn";
+  return "ok";
+}
+function unstableFor(a, health) {
+  return lightFor(a, health) === "ok" && (pulseFor(a, health)?.fails ?? 0) > 0;
+}
+var worst = (ls) => ls.includes("fail") ? "fail" : ls.includes("warn") ? "warn" : ls.includes("ok") ? "ok" : "none";
+function nodeSummary(n) {
+  const d = n.data ?? {};
+  for (const k of ["summary", "title", "detail"]) {
+    const v = d[k];
+    if (typeof v === "string" && v && v !== n.label) return v;
+  }
+  return "";
+}
+async function fetchReports(api, cluster, limit = 500) {
+  const q = async (t) => {
+    try {
+      const base = `/nodes?type=${t}${cluster ? `&cluster=${encodeURIComponent(cluster)}` : ""}`;
+      const first = await api(`${base}&limit=${limit}`);
+      const nodes2 = first.nodes ?? [];
+      const want = Math.min(first.total ?? 0, limit);
+      while (nodes2.length < want) {
+        const page = await api(`${base}&limit=${limit}&offset=${nodes2.length}`);
+        if (!page.nodes?.length) break;
+        nodes2.push(...page.nodes);
+      }
+      return { total: first.total ?? 0, nodes: nodes2 };
+    } catch {
+      return { total: 0, nodes: [] };
+    }
+  };
+  const [r, d] = await Promise.all([q("report"), q("decision")]);
+  const nodes = [...r.nodes ?? [], ...d.nodes ?? []].sort((a, b) => nodeAt(b).localeCompare(nodeAt(a)));
+  return { total: (r.total ?? 0) + (d.total ?? 0), nodes };
+}
+function slugify(s) {
+  return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+var REDUCED = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function readTheme() {
+  try {
+    return localStorage.getItem("booboo-theme") === "light" ? "light" : "dark";
+  } catch {
+    return "dark";
+  }
+}
+function useTheme() {
+  const [theme, setTheme] = useState(readTheme);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    try {
+      localStorage.setItem("booboo-theme", theme);
+    } catch {
+    }
+  }, [theme]);
+  return [theme, () => setTheme((t) => t === "dark" ? "light" : "dark")];
+}
+function useCountUp(target, ms = 900) {
+  const [v, setV] = useState(REDUCED ? target : 0);
+  const fromRef = useRef(0);
+  useEffect(() => {
+    if (REDUCED) {
+      setV(target);
+      return;
+    }
+    const from = fromRef.current;
+    const t0 = performance.now();
+    let raf = 0;
+    const tick = (t) => {
+      const k = Math.min(1, (t - t0) / ms);
+      const eased = 1 - Math.pow(1 - k, 3);
+      setV(Math.round(from + (target - from) * eased));
+      if (k < 1) raf = requestAnimationFrame(tick);
+      else fromRef.current = target;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, ms]);
+  return v;
+}
+function useRoute() {
+  const parse = () => {
+    const h = window.location.hash.replace(/^#\/?/, "");
+    const [tab, ...rest] = h.split("/");
+    const known = TABS.some((t) => t.id === tab) ? tab : "org";
+    return [known, rest.length ? decodeURIComponent(rest.join("/")) : null];
+  };
+  const [route, setRoute] = useState(parse);
+  useEffect(() => {
+    const onHash = () => setRoute(parse());
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+  return route;
+}
+var nav = (path) => {
+  window.location.hash = path;
+};
+function bucketHue(name) {
+  let h = 0;
+  for (const c of name) h = (h * 31 + c.charCodeAt(0)) % 360;
+  return h;
+}
+function AgentCard({
+  a,
+  isRoot,
+  depth,
+  order,
+  selected,
+  dragId,
+  onSelect,
+  onDragStart,
+  onDropOn,
+  childCount,
+  light = "none"
+}) {
+  const [over, setOver] = useState(false);
+  const nBuckets = a.buckets?.length ?? 0;
+  const nSkills = a.skills?.length ?? 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `ag${isRoot ? " root" : ""}${selected ? " sel" : ""}${over ? " over" : ""}${dragId === a.id ? " dragging" : ""}`,
+      style: { ["--h"]: bucketHue(a.id), ["--d"]: depth, animationDelay: `${Math.min(depth * 70 + order * 45, 600)}ms` },
+      draggable: !isRoot,
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect(a.id);
+        }
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect(a.id);
+      },
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        onDragStart(a.id);
+      },
+      onDragOver: (e) => {
+        if (dragId && dragId !== a.id) {
+          e.preventDefault();
+          setOver(true);
+        }
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setOver(false);
+        onDropOn(a.id);
+      },
+      children: [
+        light !== "none" && /* @__PURE__ */ jsx("i", { className: `ag-light ${light}`, title: `fleet health: ${light}` }),
+        /* @__PURE__ */ jsx("span", { className: "ag-ava", children: a.emoji || "\u{1F916}" }),
+        /* @__PURE__ */ jsx("span", { className: "ag-name", children: a.name }),
+        /* @__PURE__ */ jsx("span", { className: "ag-role", children: a.role || " " }),
+        /* @__PURE__ */ jsxs("span", { className: "ag-meta", children: [
+          nBuckets > 0 && /* @__PURE__ */ jsxs("em", { title: "memory buckets", children: [
+            "\u25A4 ",
+            nBuckets
+          ] }),
+          nSkills > 0 && /* @__PURE__ */ jsxs("em", { title: "skills", children: [
+            "\u2726 ",
+            nSkills
+          ] }),
+          childCount > 0 && /* @__PURE__ */ jsxs("span", { className: "ag-kids", title: "direct reports", children: [
+            childCount,
+            " reports"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ChartNode({
+  org,
+  a,
+  depth,
+  order,
+  ...cardProps
+}) {
+  const kids = org.agents.filter((c) => c.parent === a.id && c.kind !== "automation");
+  const machines = (() => {
+    const out = [];
+    const walk = (pid) => {
+      for (const c of org.agents.filter((x) => x.parent === pid && x.kind === "automation")) {
+        const hasKids = org.agents.some((x) => x.parent === c.id);
+        if (hasKids) walk(c.id);
+        else out.push(c);
+      }
+    };
+    walk(a.id);
+    return out;
+  })();
+  const lights = machines.map((m) => lightFor(m, cardProps.health));
+  const trayLight = worst(lights);
+  const TRAY_MAX = 8;
+  const hidden = machines.length - TRAY_MAX;
+  const hiddenBad = machines.slice(TRAY_MAX).reduce(
+    (n, m) => n + (lightFor(m, cardProps.health) !== "ok" && lightFor(m, cardProps.health) !== "none" ? 1 : 0),
+    0
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "ocn", children: [
+    /* @__PURE__ */ jsx(
+      AgentCard,
+      {
+        a,
+        isRoot: a.id === org.root,
+        depth,
+        order,
+        selected: cardProps.selected === a.id,
+        dragId: cardProps.dragId,
+        onSelect: cardProps.onSelect,
+        onDragStart: cardProps.onDragStart,
+        onDropOn: cardProps.onDropOn,
+        childCount: kids.length,
+        light: trayLight
+      }
+    ),
+    machines.length > 0 && /* @__PURE__ */ jsxs("div", { className: `oc-tray ${trayLight}`, children: [
+      machines.slice(0, TRAY_MAX).map((m) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `oc-mac${cardProps.selected === m.id ? " sel" : ""}`,
+          title: `${m.name}${m.role ? ` \u2014 ${m.role}` : ""}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            cardProps.onSelect(m.id);
+          },
+          children: [
+            /* @__PURE__ */ jsx("i", { className: `mac-dot ${lightFor(m, cardProps.health)}${unstableFor(m, cardProps.health) ? " unstable" : ""}` }),
+            /* @__PURE__ */ jsx("span", { className: "mac-emoji", children: m.emoji || "\u2699\uFE0F" }),
+            /* @__PURE__ */ jsx("span", { className: "mac-name", children: m.name })
+          ]
+        },
+        m.id
+      )),
+      hidden > 0 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "oc-mac more",
+          title: "open the full machine list in the dossier",
+          onClick: (e) => {
+            e.stopPropagation();
+            cardProps.onSelect(a.id);
+          },
+          children: [
+            "+",
+            hidden,
+            " machines",
+            hiddenBad > 0 ? ` \xB7 ${hiddenBad} not green` : ""
+          ]
+        }
+      )
+    ] }),
+    kids.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "oc-down" }),
+      /* @__PURE__ */ jsx("div", { className: `oc-row${kids.length > 3 ? " wrap" : ""}`, children: kids.map((k, i) => /* @__PURE__ */ jsx("div", { className: "oc-child", style: { ["--h"]: bucketHue(k.id) }, children: /* @__PURE__ */ jsx(ChartNode, { org, a: k, depth: depth + 1, order: i, ...cardProps }) }, k.id)) })
+    ] })
+  ] });
+}
+function Chip({ children, tone, onClick }) {
+  return /* @__PURE__ */ jsx("span", { className: `chip${tone ? ` ${tone}` : ""}${onClick ? " tap" : ""}`, onClick, children });
+}
+function Dossier({
+  org,
+  id,
+  hasSnapshot,
+  onUpdate,
+  onAdd,
+  onRemove,
+  onSelect,
+  health = null
+}) {
+  const api = useApi();
+  const slice = useMemo(() => orgBootSlice(org, id), [org, id]);
+  const autos = useMemo(() => {
+    const out = [];
+    const walk = (pid) => {
+      for (const c of org.agents.filter((x) => x.parent === pid && x.kind === "automation")) {
+        const hasKids = org.agents.some((x) => x.parent === c.id);
+        if (hasKids) walk(c.id);
+        else out.push(c);
+      }
+    };
+    walk(id);
+    return out;
+  }, [org, id]);
+  const [memCount, setMemCount] = useState(null);
+  const [repCount, setRepCount] = useState(null);
+  const [reports, setReports] = useState(null);
+  const [edit, setEdit] = useState(false);
+  const [form, setForm] = useState({});
+  const [openRep, setOpenRep] = useState(null);
+  const [editContract, setEditContract] = useState(false);
+  const [contractText, setContractText] = useState("");
+  useEffect(() => {
+    setEdit(false);
+    setOpenRep(null);
+    setEditContract(false);
+  }, [id]);
+  useEffect(() => {
+    setMemCount(null);
+    setRepCount(null);
+    setReports(null);
+    if (!hasSnapshot || !slice) return;
+    Promise.all(
+      slice.buckets.map(
+        (b) => api(`/nodes?type=memory&cluster=${encodeURIComponent(b)}&limit=1`).then((j) => j.total).catch(() => 0)
+      )
+    ).then((counts) => setMemCount(counts.reduce((s, n) => s + n, 0)));
+    fetchReports(api, id, 100).then(({ total, nodes }) => {
+      setRepCount(total);
+      setReports(nodes.slice(0, 4));
+    });
+  }, [id, hasSnapshot, slice, api]);
+  const mem = useCountUp(memCount ?? 0);
+  const rep = useCountUp(repCount ?? 0);
+  const startEdit = () => {
+    if (!slice) return;
+    const ag = slice.agent;
+    setForm({
+      name: ag.name ?? "",
+      emoji: ag.emoji ?? "",
+      role: ag.role ?? "",
+      boot: ag.boot ?? "",
+      rules: (ag.rules ?? []).join(", "),
+      skills: (ag.skills ?? []).join(", "),
+      buckets: (ag.buckets ?? []).join(", ")
+    });
+    setEdit(true);
+  };
+  const saveEdit = () => {
+    const list = (s) => s.split(",").map((x) => x.trim()).filter(Boolean);
+    onUpdate(id, {
+      name: form.name.trim() || slice?.agent.name || id,
+      emoji: form.emoji.trim() || void 0,
+      role: form.role.trim() || void 0,
+      boot: form.boot.trim() || void 0,
+      rules: list(form.rules),
+      skills: list(form.skills),
+      buckets: list(form.buckets)
+    });
+    setEdit(false);
+  };
+  if (!slice) return null;
+  const a = slice.agent;
+  const isRoot = a.id === org.root;
+  const own = new Set(a.rules ?? []);
+  return /* @__PURE__ */ jsxs("aside", { className: "doss", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "doss-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "doss-emoji", children: a.emoji || "\u{1F916}" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("h2", { children: [
+          a.name,
+          " ",
+          a.kind === "automation" && /* @__PURE__ */ jsx("span", { className: "auto-badge", children: "automation" })
+        ] }),
+        a.role && /* @__PURE__ */ jsx("p", { className: "doss-role", children: a.role })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "doss-head-actions", children: [
+        !edit && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "edit this agent", onClick: startEdit, children: "\u270E edit" }),
+        hasSnapshot && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "see the whole brain in 3D", onClick: () => nav("/graph"), children: "\u25C9 3D" })
+      ] })
+    ] }),
+    edit && /* @__PURE__ */ jsxs("div", { className: "doss-edit", children: [
+      /* @__PURE__ */ jsxs("div", { className: "doss-edit-row2", children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "name",
+          /* @__PURE__ */ jsx("input", { value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }) })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "narrow", children: [
+          "emoji",
+          /* @__PURE__ */ jsx("input", { value: form.emoji, onChange: (e) => setForm({ ...form, emoji: e.target.value }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "role",
+        /* @__PURE__ */ jsx("input", { value: form.role, onChange: (e) => setForm({ ...form, role: e.target.value }), placeholder: "one line \u2014 what this agent is for" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "rules ",
+        /* @__PURE__ */ jsx("em", { children: "comma-separated refs \xB7 inherited by everyone beneath" }),
+        /* @__PURE__ */ jsx("input", { value: form.rules, onChange: (e) => setForm({ ...form, rules: e.target.value }), placeholder: "rules/GLOBAL.md, rules/CONTENT.md" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "memory buckets ",
+        /* @__PURE__ */ jsx("em", { children: "comma-separated" }),
+        /* @__PURE__ */ jsx("input", { value: form.buckets, onChange: (e) => setForm({ ...form, buckets: e.target.value }), placeholder: "shared, content" })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        "skills ",
+        /* @__PURE__ */ jsx("em", { children: "comma-separated" }),
+        /* @__PURE__ */ jsx("input", { value: form.skills, onChange: (e) => setForm({ ...form, skills: e.target.value }), placeholder: "humanizer, deep-research" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "doss-edit-hint", children: "\u2193 edit the contract below \u2014 the agent's operating prompt lives in its own section." }),
+      /* @__PURE__ */ jsxs("div", { className: "doss-edit-actions", children: [
+        /* @__PURE__ */ jsx("button", { className: "btn primary", onClick: saveEdit, children: "save to draft" }),
+        /* @__PURE__ */ jsx("button", { className: "btn ghost", onClick: () => setEdit(false), children: "cancel" })
+      ] })
+    ] }),
+    a.kind === "automation" && (() => {
+      const p = pulseFor(a, health);
+      const l = lightFor(a, health);
+      return /* @__PURE__ */ jsxs("div", { className: `doss-health ${l}`, children: [
+        /* @__PURE__ */ jsx("i", { className: `mac-dot ${l}` }),
+        /* @__PURE__ */ jsx("b", { children: l === "ok" ? "healthy" : l === "fail" ? "last run failed" : l === "warn" ? "stale or degraded" : "no runs recorded" }),
+        p?.lastAt && /* @__PURE__ */ jsxs("span", { children: [
+          "last run ",
+          relTime(p.lastAt)
+        ] }),
+        p && p.n > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          Math.round((p.n - p.fails) / p.n * 100),
+          "% ok of ",
+          p.n
+        ] }),
+        typeof a.cadence === "number" && /* @__PURE__ */ jsxs("span", { children: [
+          "expected every ",
+          a.cadence,
+          "h"
+        ] })
+      ] });
+    })(),
+    /* @__PURE__ */ jsx("div", { className: "doss-chain", children: slice.chain.map((c, i) => /* @__PURE__ */ jsxs("span", { children: [
+      i > 0 && /* @__PURE__ */ jsx("i", { children: "\u203A" }),
+      /* @__PURE__ */ jsx("b", { className: c.id === a.id ? "me" : "", children: c.name })
+    ] }, c.id)) }),
+    hasSnapshot && /* @__PURE__ */ jsxs("div", { className: "doss-stats", children: [
+      /* @__PURE__ */ jsxs("div", { className: "doss-stat", children: [
+        /* @__PURE__ */ jsx("div", { className: "doss-n", children: memCount === null ? "\u2026" : mem.toLocaleString() }),
+        /* @__PURE__ */ jsx("div", { className: "doss-l", children: "memories in reach" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "doss-stat", children: [
+        /* @__PURE__ */ jsx("div", { className: "doss-n", children: repCount === null ? "\u2026" : rep.toLocaleString() }),
+        /* @__PURE__ */ jsx("div", { className: "doss-l", children: "reports filed" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "doss-stat", children: [
+        /* @__PURE__ */ jsx("div", { className: "doss-n", children: slice.children.filter((c) => c.kind !== "automation").length }),
+        /* @__PURE__ */ jsx("div", { className: "doss-l", children: "direct reports" })
+      ] })
+    ] }),
+    hasSnapshot && /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { children: "latest reports" }),
+      reports === null ? /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "loading\u2026" }) : reports.length === 0 ? /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "no reports filed yet \u2014 they appear here as this agent closes work." }) : /* @__PURE__ */ jsx("div", { className: "doss-reps", children: reports.map((r) => {
+        const when = relTime(nodeAt(r));
+        const sum = nodeSummary(r);
+        const st = typeof r.data?.status === "string" ? String(r.data.status) : void 0;
+        const open = openRep === r.id;
+        const skip = /* @__PURE__ */ new Set(["summary", "status", "at", "ts", "time", "created_at", "date", "bst", "ts_bst", "finished_at"]);
+        const extra = r.data ? Object.entries(r.data).filter(([k, v]) => !skip.has(k) && v != null && v !== "") : [];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `doss-rep tap${open ? " open" : ""}`,
+            role: "button",
+            tabIndex: 0,
+            "aria-expanded": open,
+            title: "click for the full report",
+            onClick: () => setOpenRep(open ? null : r.id),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpenRep(open ? null : r.id);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "doss-rep-top", children: [
+                st && /* @__PURE__ */ jsx("span", { className: `rep-dot ${st}`, "aria-label": st }),
+                when && /* @__PURE__ */ jsx("span", { className: "doss-rep-when", children: when }),
+                /* @__PURE__ */ jsx("span", { className: "doss-rep-label", children: r.label }),
+                /* @__PURE__ */ jsx("span", { className: "doss-rep-caret", "aria-hidden": true, children: open ? "\u25BE" : "\u25B8" })
+              ] }),
+              sum && /* @__PURE__ */ jsx("p", { className: "doss-rep-sum", children: sum }),
+              open && /* @__PURE__ */ jsxs("div", { className: "doss-rep-detail", children: [
+                st && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "doss-l", children: "status" }),
+                  " ",
+                  /* @__PURE__ */ jsx("b", { className: `rep-${st}`, children: st })
+                ] }),
+                extra.map(([k, v]) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "doss-l", children: k }),
+                  " ",
+                  String(v)
+                ] }, k)),
+                extra.length === 0 && !st && /* @__PURE__ */ jsx("div", { className: "doss-empty", children: "no extra detail on this report" })
+              ] })
+            ]
+          },
+          r.id
+        );
+      }) })
+    ] }),
+    autos.length > 0 && /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsxs("h3", { children: [
+        "automations \xB7 ",
+        autos.length,
+        " \u2014 machines this agent operates"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "doss-autos", children: autos.map((m) => {
+        const p = pulseFor(m, health);
+        return /* @__PURE__ */ jsxs("button", { className: "doss-auto", onClick: () => onSelect(m.id), children: [
+          /* @__PURE__ */ jsx("i", { className: `mac-dot ${lightFor(m, health)}${unstableFor(m, health) ? " unstable" : ""}` }),
+          /* @__PURE__ */ jsx("span", { className: "doss-auto-emoji", children: m.emoji || "\u2699\uFE0F" }),
+          /* @__PURE__ */ jsx("span", { className: "doss-auto-name", children: m.name }),
+          m.role && /* @__PURE__ */ jsx("span", { className: "doss-auto-role", children: m.role }),
+          p?.lastAt && /* @__PURE__ */ jsx("span", { className: "doss-auto-when", children: relTime(p.lastAt) })
+        ] }, m.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { children: "rules \xB7 inherited top-down" }),
+      slice.rules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "no rules anywhere on this branch yet." }) : /* @__PURE__ */ jsx("ul", { className: "doss-rules", children: slice.rules.map((r) => /* @__PURE__ */ jsxs("li", { className: own.has(r) ? "own" : "", children: [
+        r,
+        " ",
+        !own.has(r) && /* @__PURE__ */ jsx("em", { children: "inherited" })
+      ] }, r)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { children: "memory buckets" }),
+      slice.buckets.length === 0 ? /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "no bucket access \u2014 this agent remembers nothing." }) : /* @__PURE__ */ jsx("div", { className: "doss-chips", children: slice.buckets.map((b) => /* @__PURE__ */ jsxs(Chip, { onClick: () => nav(`/buckets/${encodeURIComponent(b)}`), children: [
+        b,
+        " \u203A"
+      ] }, b)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { children: "skills" }),
+      slice.skills.length === 0 ? /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "no skills declared." }) : /* @__PURE__ */ jsx("div", { className: "doss-chips", children: slice.skills.map((s) => /* @__PURE__ */ jsx(Chip, { tone: "alt", children: s }, s)) })
+    ] }),
+    !edit && /* @__PURE__ */ jsxs("section", { className: "doss-contract", children: [
+      /* @__PURE__ */ jsxs("h3", { children: [
+        "contract ",
+        /* @__PURE__ */ jsx("em", { children: "the operating prompt \u2014 loaded first, every session" })
+      ] }),
+      editContract ? /* @__PURE__ */ jsxs("div", { className: "contract-edit", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "contract-ta",
+            autoFocus: true,
+            value: contractText,
+            onChange: (e) => setContractText(e.target.value),
+            placeholder: "Who this agent is \xB7 what it decides \xB7 how it verifies \xB7 when it stops. This is the first thing it reads."
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "doss-edit-actions", children: [
+          /* @__PURE__ */ jsx("button", { className: "btn primary", onClick: () => {
+            onUpdate(id, { boot: contractText.trim() || void 0 });
+            setEditContract(false);
+          }, children: "save to draft" }),
+          /* @__PURE__ */ jsx("button", { className: "btn ghost", onClick: () => setEditContract(false), children: "cancel" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `contract-card${a.boot ? "" : " empty"}`,
+          title: "click to open \xB7 edit this agent's contract",
+          onClick: () => {
+            setContractText(a.boot ?? "");
+            setEditContract(true);
+          },
+          children: [
+            a.boot ? /* @__PURE__ */ jsx("p", { className: "doss-boot", children: a.boot }) : /* @__PURE__ */ jsx("p", { className: "doss-empty", children: "no contract yet \u2014 click to write one." }),
+            /* @__PURE__ */ jsx("span", { className: "contract-hint", children: "\u270E edit" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "doss-foot", children: [
+      /* @__PURE__ */ jsxs("button", { className: "btn ghost", onClick: () => onAdd(id), children: [
+        "\uFF0B add agent under ",
+        a.name
+      ] }),
+      !isRoot && /* @__PURE__ */ jsxs("button", { className: "btn danger", onClick: () => onRemove(id), children: [
+        "\u2212 remove ",
+        a.name
+      ] })
+    ] })
+  ] });
+}
+function OrgScreen({
+  draft,
+  selected,
+  dragId,
+  setSelected,
+  setDragId,
+  dropOn,
+  hasSnapshot,
+  onUpdate,
+  onAdd,
+  onRemove
+}) {
+  const api = useApi();
+  const [health, setHealth] = useState(null);
+  useEffect(() => {
+    if (!hasSnapshot) return;
+    fetchReports(api, null, 1e4).then(({ nodes }) => setHealth(buildHealthMap(nodes))).catch(() => {
+    });
+  }, [hasSnapshot, api]);
+  const fitRef = useRef(null);
+  const chartRef = useRef(null);
+  const [fit, setFit] = useState(1);
+  const [zoom, setZoom] = useState(null);
+  const eff = zoom ?? fit;
+  useLayoutEffect(() => {
+    const vp = fitRef.current, chart = chartRef.current;
+    if (!vp || !chart) return;
+    const PAD = 24;
+    const measure = () => {
+      const natW = chart.scrollWidth, natH = chart.scrollHeight;
+      const availW = vp.clientWidth - PAD * 2, availH = vp.clientHeight - PAD * 2;
+      if (natW <= 0 || natH <= 0) return;
+      const k = Math.min(1, availW / natW, availH / natH);
+      setFit(k > 0 ? k : 1);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(vp);
+    ro.observe(chart);
+    return () => ro.disconnect();
+  }, [draft, health, selected]);
+  const effRef = useRef(eff);
+  effRef.current = eff;
+  useEffect(() => {
+    const vp = fitRef.current;
+    if (!vp) return;
+    const onWheel = (e) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const k = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+      setZoom(Math.min(2.5, Math.max(0.2, effRef.current * k)));
+    };
+    vp.addEventListener("wheel", onWheel, { passive: false });
+    return () => vp.removeEventListener("wheel", onWheel);
+  }, []);
+  const root = draft.agents.find((a) => a.id === draft.root);
+  return /* @__PURE__ */ jsxs("div", { className: "body", onClick: () => setSelected(null), children: [
+    /* @__PURE__ */ jsxs("main", { className: "tree", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("p", { className: "tree-hint", children: "drag an agent onto its new parent \xB7 click for its dossier \xB7 machine trays show live health" }),
+      /* @__PURE__ */ jsx("div", { className: `chart-fit${zoom !== null ? " zoomed" : ""}`, ref: fitRef, children: /* @__PURE__ */ jsx("div", { className: "chart", ref: chartRef, style: { ["--fit"]: eff }, children: root && /* @__PURE__ */ jsx(
+        ChartNode,
+        {
+          org: draft,
+          a: root,
+          depth: 0,
+          order: 0,
+          selected,
+          dragId,
+          health,
+          onSelect: setSelected,
+          onDragStart: setDragId,
+          onDropOn: dropOn
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "zoomer", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", title: "zoom out (ctrl+wheel)", onClick: () => setZoom(Math.max(0.2, eff / 1.25)), children: "\u2212" }),
+        /* @__PURE__ */ jsxs("span", { className: "zoomer-pct", children: [
+          Math.round(eff * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", title: "zoom in (ctrl+wheel)", onClick: () => setZoom(Math.min(2.5, eff * 1.25)), children: "\uFF0B" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: zoom === null ? "on" : "", title: "fit the whole org in view", onClick: () => setZoom(null), children: "fit" })
+      ] })
+    ] }),
+    selected && /* @__PURE__ */ jsx(
+      Dossier,
+      {
+        org: draft,
+        id: selected,
+        hasSnapshot,
+        onUpdate,
+        onAdd,
+        onRemove,
+        onSelect: setSelected,
+        health
+      }
+    )
+  ] });
+}
+function BucketCount({ bucket }) {
+  const api = useApi();
+  const [n, setN] = useState(null);
+  useEffect(() => {
+    api(`/nodes?type=memory&cluster=${encodeURIComponent(bucket)}&limit=1`).then((j) => setN(j.total)).catch(() => setN(0));
+  }, [bucket, api]);
+  const v = useCountUp(n ?? 0);
+  return /* @__PURE__ */ jsx("div", { className: "bk-n", children: n === null ? "\u2026" : v.toLocaleString() });
+}
+function BucketsScreen({ org, param, hasSnapshot }) {
+  const api = useApi();
+  const [discovered, setDiscovered] = useState(null);
+  useEffect(() => {
+    if (!hasSnapshot) {
+      setDiscovered({});
+      return;
+    }
+    api("/clusters?type=memory").then((j) => setDiscovered(j.clusters ?? {})).catch(() => setDiscovered({}));
+  }, [hasSnapshot, api]);
+  const buckets = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const a of org.agents) {
+      const slice = orgBootSlice(org, a.id);
+      for (const b of slice?.buckets ?? []) {
+        const arr = map.get(b) ?? [];
+        arr.push(a);
+        map.set(b, arr);
+      }
+    }
+    for (const b of Object.keys(discovered ?? {})) if (!map.has(b)) map.set(b, []);
+    return [...map.entries()].sort(
+      (x, y) => (y[1].length ? 1 : 0) - (x[1].length ? 1 : 0) || (discovered?.[y[0]] ?? 0) - (discovered?.[x[0]] ?? 0) || x[0].localeCompare(y[0])
+    );
+  }, [org, discovered]);
+  const [items, setItems] = useState(null);
+  useEffect(() => {
+    setItems(null);
+    if (!param || !hasSnapshot) return;
+    api(`/nodes?type=memory&cluster=${encodeURIComponent(param)}&limit=500`).then((j) => {
+      setItems([...j.nodes].sort((a, b) => nodeAt(b).localeCompare(nodeAt(a))));
+    }).catch(() => setItems([]));
+  }, [param, hasSnapshot, api]);
+  if (param) {
+    return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+      /* @__PURE__ */ jsx("button", { className: "pnl-back", onClick: () => nav("/buckets"), children: "\u2190 all buckets" }),
+      /* @__PURE__ */ jsxs("h2", { className: "scr-title", children: [
+        /* @__PURE__ */ jsx("i", { className: "bk-dot", style: { ["--h"]: bucketHue(param) } }),
+        " ",
+        param
+      ] }),
+      !hasSnapshot ? /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+        "start with ",
+        /* @__PURE__ */ jsx("code", { children: "--snapshot" }),
+        " to browse this bucket's memories."
+      ] }) : items === null ? /* @__PURE__ */ jsx("p", { className: "scr-empty", children: "loading\u2026" }) : items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "scr-empty", children: "this bucket is empty \u2014 nothing remembered here yet." }) : /* @__PURE__ */ jsx("div", { className: "mem-list", children: items.slice(0, 150).map((m) => {
+        const when = relTime(nodeAt(m));
+        return /* @__PURE__ */ jsxs("div", { className: "mem-row", children: [
+          when && /* @__PURE__ */ jsx("span", { className: "mem-when", children: when }),
+          /* @__PURE__ */ jsx("span", { className: "mem-label", children: m.label })
+        ] }, m.id);
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+    /* @__PURE__ */ jsx("h2", { className: "scr-title", children: "memory buckets" }),
+    /* @__PURE__ */ jsx("p", { className: "scr-sub", children: "every bucket in the organigram, who reaches it, and how much lives inside." }),
+    buckets.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+      "no buckets declared on any agent yet \u2014 add ",
+      /* @__PURE__ */ jsx("code", { children: '"buckets"' }),
+      " to agents in the org file."
+    ] }) : /* @__PURE__ */ jsx("div", { className: "bk-grid", children: buckets.map(([b, agents], i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "bk-card",
+        style: { ["--h"]: bucketHue(b), animationDelay: `${i * 70}ms` },
+        onClick: () => nav(`/buckets/${encodeURIComponent(b)}`),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "bk-top", children: [
+            /* @__PURE__ */ jsx("i", { className: "bk-dot" }),
+            /* @__PURE__ */ jsx("span", { className: "bk-name", children: b })
+          ] }),
+          hasSnapshot ? /* @__PURE__ */ jsx(BucketCount, { bucket: b }) : /* @__PURE__ */ jsx("div", { className: "bk-n dim", children: "\u2014" }),
+          /* @__PURE__ */ jsx("div", { className: "bk-l", children: "memories" }),
+          agents.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "bk-crew", children: [
+              agents.slice(0, 7).map((a) => /* @__PURE__ */ jsx("span", { className: "bk-face", title: a.name, children: a.emoji || "\u{1F916}" }, a.id)),
+              agents.length > 7 && /* @__PURE__ */ jsxs("span", { className: "bk-more", children: [
+                "+",
+                agents.length - 7
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "bk-agents", children: [
+              agents.slice(0, 3).map((a) => a.name).join(" \xB7 "),
+              agents.length > 3 ? ` +${agents.length - 3}` : ""
+            ] })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "bk-agents unassigned", children: "unassigned \u2014 no agent declares this bucket; add it to an agent's buckets to claim it" })
+        ]
+      },
+      b
+    )) })
+  ] });
+}
+function ReportsScreen({ org, hasSnapshot }) {
+  const api = useApi();
+  const [rows, setRows] = useState(null);
+  const [who, setWho] = useState("");
+  const nameOf = useMemo(() => new Map(org.agents.map((a) => [a.id, a])), [org]);
+  useEffect(() => {
+    if (!hasSnapshot) return;
+    fetchReports(api, null, 1e3).then(({ nodes }) => setRows(nodes)).catch(() => setRows([]));
+  }, [hasSnapshot, api]);
+  const agents = useMemo(() => [...new Set((rows ?? []).map((r) => r.cluster ?? ""))].filter(Boolean), [rows]);
+  const shown = (rows ?? []).filter((r) => !who || r.cluster === who);
+  const total = useCountUp(shown.length);
+  if (!hasSnapshot)
+    return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+      /* @__PURE__ */ jsx("h2", { className: "scr-title", children: "reports" }),
+      /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+        "start with ",
+        /* @__PURE__ */ jsx("code", { children: "--snapshot" }),
+        " to see the portfolio timeline."
+      ] })
+    ] });
+  return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+    /* @__PURE__ */ jsxs("h2", { className: "scr-title", children: [
+      "reports ",
+      /* @__PURE__ */ jsx("span", { className: "scr-count", children: total })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "scr-sub", children: "what the fleet has been closing, newest first." }),
+    agents.length > 1 && /* @__PURE__ */ jsxs("div", { className: "rep-filter", children: [
+      /* @__PURE__ */ jsx(Chip, { tone: who === "" ? "" : "alt", onClick: () => setWho(""), children: "everyone" }),
+      agents.map((a) => /* @__PURE__ */ jsxs(Chip, { tone: who === a ? "" : "alt", onClick: () => setWho(who === a ? "" : a), children: [
+        nameOf.get(a)?.emoji ?? "",
+        " ",
+        nameOf.get(a)?.name ?? a
+      ] }, a))
+    ] }),
+    rows === null ? /* @__PURE__ */ jsx("p", { className: "scr-empty", children: "loading\u2026" }) : shown.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+      "no reports filed yet \u2014 they land here as agents close work (node type ",
+      /* @__PURE__ */ jsx("code", { children: "report" }),
+      ")."
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "timeline", children: [
+      shown.slice(0, 100).map((r) => {
+        const a = r.cluster ? nameOf.get(r.cluster) : void 0;
+        const when = relTime(nodeAt(r));
+        const sum = nodeSummary(r);
+        return /* @__PURE__ */ jsxs("div", { className: "tl-row", style: { ["--h"]: bucketHue(r.cluster ?? "x") }, children: [
+          /* @__PURE__ */ jsx("div", { className: "tl-dot" }),
+          /* @__PURE__ */ jsxs("div", { className: "tl-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "tl-top", children: [
+              /* @__PURE__ */ jsx("span", { className: "tl-ava", children: a?.emoji ?? "\u{1F916}" }),
+              /* @__PURE__ */ jsx("span", { className: "tl-agent", children: a?.name ?? r.cluster ?? "unknown" }),
+              when && /* @__PURE__ */ jsx("span", { className: "tl-when", children: when })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "tl-sum", children: sum || r.label })
+          ] })
+        ] }, r.id);
+      }),
+      shown.length > 100 && /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+        "showing the latest 100 of ",
+        shown.length,
+        "."
+      ] })
+    ] })
+  ] });
+}
+function RulesScreen({ org }) {
+  const rules = useMemo(() => {
+    const declared = /* @__PURE__ */ new Map();
+    for (const a of org.agents) for (const r of a.rules ?? []) {
+      const arr = declared.get(r) ?? [];
+      arr.push(a.id);
+      declared.set(r, arr);
+    }
+    const inherited = /* @__PURE__ */ new Map();
+    for (const a of org.agents) {
+      const own = new Set(a.rules ?? []);
+      const slice = orgBootSlice(org, a.id);
+      for (const r of slice?.rules ?? []) if (!own.has(r)) {
+        const arr = inherited.get(r) ?? [];
+        arr.push(a.id);
+        inherited.set(r, arr);
+      }
+    }
+    const name = (id) => org.agents.find((a) => a.id === id)?.name ?? id;
+    return [...declared.entries()].sort((x, y) => x[0].localeCompare(y[0])).map(([r, by]) => ({
+      rule: r,
+      global: by.includes(org.root),
+      declaredBy: by.map(name),
+      inheritedBy: (inherited.get(r) ?? []).map(name)
+    }));
+  }, [org]);
+  const maxBind = Math.max(1, org.agents.length - 1);
+  return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+    /* @__PURE__ */ jsxs("h2", { className: "scr-title", children: [
+      "rules ",
+      /* @__PURE__ */ jsx("span", { className: "scr-count", children: rules.length })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "scr-sub", children: "every rule in the organigram \u2014 who declares it, and who lives under it." }),
+    rules.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+      "no rules declared yet \u2014 add ",
+      /* @__PURE__ */ jsx("code", { children: '"rules"' }),
+      " refs to agents in the org file."
+    ] }) : /* @__PURE__ */ jsx("div", { className: "rule-list", children: rules.map((r, i) => /* @__PURE__ */ jsxs("div", { className: "rule-card", style: { animationDelay: `${i * 60}ms` }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "rule-top", children: [
+        /* @__PURE__ */ jsx("span", { className: "rule-ref", children: r.rule }),
+        r.global && /* @__PURE__ */ jsx("span", { className: "rule-scope", children: "global \u2014 binds everyone" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rule-meta", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "declared by ",
+          /* @__PURE__ */ jsx("b", { children: r.declaredBy.join(", ") })
+        ] }),
+        r.inheritedBy.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          " \xB7 binds ",
+          /* @__PURE__ */ jsx("b", { children: r.inheritedBy.length }),
+          " below: ",
+          r.inheritedBy.join(", ")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "rule-bar", children: /* @__PURE__ */ jsx("i", { style: { width: `${Math.round(r.inheritedBy.length / maxBind * 100)}%` } }) })
+    ] }, r.rule)) })
+  ] });
+}
+function GraphScreen({ hasSnapshot }) {
+  if (!hasSnapshot)
+    return /* @__PURE__ */ jsxs("div", { className: "screen", children: [
+      /* @__PURE__ */ jsx("h2", { className: "scr-title", children: "graph" }),
+      /* @__PURE__ */ jsxs("p", { className: "scr-empty", children: [
+        "start with ",
+        /* @__PURE__ */ jsx("code", { children: "--snapshot graph.json" }),
+        " and the 3D brain renders right here."
+      ] })
+    ] });
+  return /* @__PURE__ */ jsx("div", { className: "graph-wrap", children: /* @__PURE__ */ jsx("iframe", { className: "graph-frame", src: "/view/?file=/snapshot.json", title: "Booboo 3D brain" }) });
+}
+function App() {
+  const api = useApi();
+  const [tab, param] = useRoute();
+  const [saved, setSaved] = useState(null);
+  const [draft, setDraft] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [dragId, setDragId] = useState(null);
+  const [stats, setStats] = useState(null);
+  const [err, setErr] = useState("");
+  const [applying, setApplying] = useState(false);
+  const [totals, setTotals] = useState(null);
+  useEffect(() => {
+    api("/org").then((o) => {
+      setSaved(o);
+      setDraft(o);
+      setSelected(o.root);
+    }).catch(() => setErr("Can't load the organigram \u2014 is `booboo panel --org` running?"));
+    api("/stats").then(setStats).catch(() => setStats(null));
+    Promise.all([
+      api("/nodes?type=memory&limit=1").then((j) => j.total),
+      fetchReports(api, null, 1).then((r) => r.total)
+    ]).then(([mem, rep]) => setTotals({ mem, rep })).catch(() => setTotals(null));
+  }, [api]);
+  const changes = useMemo(() => {
+    if (!saved || !draft) return [];
+    const before = new Map(saved.agents.map((a) => [a.id, a]));
+    const after = new Map(draft.agents.map((a) => [a.id, a]));
+    const name = (id) => after.get(id)?.name ?? before.get(id)?.name ?? id;
+    const noParent = ({ parent: _p, ...rest }) => rest;
+    const out = [];
+    for (const a of draft.agents) {
+      const b = before.get(a.id);
+      if (!b) {
+        out.push(`\uFF0B ${a.name} under ${a.parent ? name(a.parent) : "root"}`);
+        continue;
+      }
+      if ((b.parent ?? null) !== (a.parent ?? null)) out.push(`${a.name} \u2192 now under ${a.parent ? name(a.parent) : "root"}`);
+      if (JSON.stringify(noParent(b)) !== JSON.stringify(noParent(a))) out.push(`\u270E ${a.name} edited`);
+    }
+    for (const b of saved.agents) if (!after.has(b.id)) out.push(`\u2212 ${b.name} removed`);
+    return out;
+  }, [saved, draft]);
+  const updateAgent = useCallback((id, patch) => {
+    setDraft((d) => d ? { ...d, agents: d.agents.map((a) => a.id === id ? { ...a, ...patch } : a) } : d);
+  }, []);
+  const addAgent = useCallback(
+    (parentId) => {
+      if (!draft) return;
+      const nm = window.prompt("Name for the new agent:");
+      if (!nm || !nm.trim()) return;
+      const base = slugify(nm) || "agent";
+      let newId = base;
+      let i = 2;
+      while (draft.agents.some((a) => a.id === newId)) newId = `${base}-${i++}`;
+      setDraft({ ...draft, agents: [...draft.agents, { id: newId, name: nm.trim(), emoji: "\u{1F916}", parent: parentId }] });
+      setSelected(newId);
+    },
+    [draft]
+  );
+  const removeAgent = useCallback(
+    (id) => {
+      if (!draft || id === draft.root) return;
+      const ag = draft.agents.find((a) => a.id === id);
+      if (!ag) return;
+      const parentName = draft.agents.find((a) => a.id === ag.parent)?.name ?? "the root";
+      const kids = draft.agents.filter((a) => a.parent === id).length;
+      if (!window.confirm(`Remove ${ag.name}?${kids ? ` Its ${kids} direct report${kids > 1 ? "s" : ""} move up to ${parentName}.` : ""}`)) return;
+      setDraft({
+        ...draft,
+        agents: draft.agents.filter((a) => a.id !== id).map((a) => a.parent === id ? { ...a, parent: ag.parent ?? draft.root } : a)
+      });
+      setSelected(ag.parent ?? draft.root);
+    },
+    [draft]
+  );
+  const isDescendant = useCallback((org, maybeChild, of) => {
+    const byId = new Map(org.agents.map((a) => [a.id, a]));
+    let cur = byId.get(maybeChild);
+    const guard = /* @__PURE__ */ new Set();
+    while (cur?.parent && !guard.has(cur.id)) {
+      guard.add(cur.id);
+      if (cur.parent === of) return true;
+      cur = byId.get(cur.parent);
+    }
+    return false;
+  }, []);
+  const dropOn = useCallback(
+    (targetId) => {
+      if (!draft || !dragId || dragId === targetId) return;
+      if (dragId === draft.root) return;
+      if (isDescendant(draft, targetId, dragId)) return;
+      setDraft({ ...draft, agents: draft.agents.map((a) => a.id === dragId ? { ...a, parent: targetId } : a) });
+      setDragId(null);
+    },
+    [draft, dragId, isDescendant]
+  );
+  const apply = useCallback(async () => {
+    if (!draft) return;
+    setApplying(true);
+    setErr("");
+    try {
+      await api("/org", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(draft) });
+      setSaved(draft);
+    } catch (e) {
+      setErr(`apply failed: ${e?.errors?.join("; ") ?? "unknown error"}`);
+    } finally {
+      setApplying(false);
+    }
+  }, [draft, api]);
+  const agentCount = useCountUp(draft?.agents.length ?? 0);
+  const nodeCount = useCountUp(stats?.nodes ?? 0, 1200);
+  const memTotal = useCountUp(totals?.mem ?? 0, 1100);
+  const repTotal = useCountUp(totals?.rep ?? 0, 1300);
+  const [theme, toggleTheme] = useTheme();
+  if (err && !draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal", children: err });
+  if (!draft) return /* @__PURE__ */ jsx("div", { className: "pnl-fatal calm", children: "waking the organigram\u2026" });
+  return /* @__PURE__ */ jsxs("div", { className: "pnl", children: [
+    /* @__PURE__ */ jsx("div", { className: "pnl-aurora", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("header", { className: "bar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bar-brand", children: [
+        "\u{1F43E} ",
+        /* @__PURE__ */ jsx("b", { children: draft.title || "the organigram" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bar-stats", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("b", { children: agentCount }),
+          " agents"
+        ] }),
+        stats && /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("b", { children: nodeCount.toLocaleString() }),
+          " nodes"
+        ] }),
+        totals && /* @__PURE__ */ jsxs("span", { onClick: () => nav("/buckets"), className: "tap", children: [
+          /* @__PURE__ */ jsx("b", { children: memTotal.toLocaleString() }),
+          " memories"
+        ] }),
+        totals && /* @__PURE__ */ jsxs("span", { onClick: () => nav("/reports"), className: "tap", children: [
+          /* @__PURE__ */ jsx("b", { children: repTotal.toLocaleString() }),
+          " reports"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bar-actions", children: [
+        /* @__PURE__ */ jsx("button", { className: "btn ghost theme-toggle", title: "light / dark", "aria-label": "toggle light or dark theme", onClick: toggleTheme, children: theme === "dark" ? "\u2600" : "\u263E" }),
+        changes.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "bar-draft", children: [
+            changes.length,
+            " unapplied change",
+            changes.length > 1 ? "s" : ""
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "btn ghost", onClick: () => setDraft(saved), children: "discard" }),
+          /* @__PURE__ */ jsx("button", { className: "btn primary", disabled: applying, onClick: apply, children: applying ? "applying\u2026" : "apply \u2192 org file" })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "bar-ok", children: "\u25CF in sync with the org file" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "tabs", children: TABS.map((t) => /* @__PURE__ */ jsxs("button", { className: `tab${tab === t.id ? " on" : ""}`, onClick: () => nav(`/${t.id === "org" ? "" : t.id}`), children: [
+      /* @__PURE__ */ jsx("span", { className: "tab-glyph", children: t.glyph }),
+      " ",
+      t.label
+    ] }, t.id)) }),
+    changes.length > 0 && tab === "org" && /* @__PURE__ */ jsx("div", { className: "pending", children: changes.map((c) => /* @__PURE__ */ jsx("span", { className: "pending-item", children: c }, c)) }),
+    err && /* @__PURE__ */ jsx("div", { className: "pnl-err", children: err }),
+    /* @__PURE__ */ jsxs("div", { className: "content", children: [
+      tab === "org" && /* @__PURE__ */ jsx(
+        OrgScreen,
+        {
+          draft,
+          selected,
+          dragId,
+          setSelected,
+          setDragId,
+          dropOn,
+          hasSnapshot: !!stats,
+          onUpdate: updateAgent,
+          onAdd: addAgent,
+          onRemove: removeAgent
+        }
+      ),
+      tab === "buckets" && /* @__PURE__ */ jsx(BucketsScreen, { org: draft, param, hasSnapshot: !!stats }),
+      tab === "reports" && /* @__PURE__ */ jsx(ReportsScreen, { org: draft, hasSnapshot: !!stats }),
+      tab === "rules" && /* @__PURE__ */ jsx(RulesScreen, { org: draft }),
+      tab === "graph" && /* @__PURE__ */ jsx(GraphScreen, { hasSnapshot: !!stats })
+    ] }, tab + (param ?? ""))
+  ] });
+}
+function Panel({ api = defaultApi } = {}) {
+  return /* @__PURE__ */ jsxs(ApiCtx.Provider, { value: api, children: [
+    /* @__PURE__ */ jsx("style", { children: PANEL_CSS }),
+    /* @__PURE__ */ jsx(App, {})
+  ] });
+}
+
 // src/index.ts
-var PANEL_VERSION = "0.1.0";
+var PANEL_VERSION = "0.4.0";
 export {
-  PANEL_VERSION
+  PANEL_VERSION,
+  Panel
 };