@booboo-brain/panel 0.5.1 → 0.5.3

package/README.md

@@ -0,0 +1,52 @@
+# @booboo-brain/panel
+
+The [Booboo](https://github.com/jessedu29260-netizen/booboo) **organigram** — your agent
+fleet as a real org chart, where the chart is the **authority**, not a diagram. Drag an
+agent under a new parent, hit apply, and the org file changes: validated before every
+write (a cycle can never land), versioned in git. Agents that boot with `booboo_boot`
+obey the new shape next session.
+
+## Standalone (no React app needed)
+
+```bash
+booboo panel --org org.booboo.json [--snapshot brain.json] [--port 8990] [--no-open]
+```
+
+The package ships a prebuilt static app (`dist-app/`) that the
+[`@booboo-brain/cli`](https://www.npmjs.com/package/@booboo-brain/cli) `panel` command
+serves directly. Pass `--snapshot` to light up live memory/report counts on each dossier.
+
+Five tabs over one org file + one snapshot:
+
+| Tab | What it shows |
+|-----|---------------|
+| **organigram** | the drag-drop hierarchy — every agent a card: rules, skills, buckets, latest reports |
+| **buckets** | each memory bucket with live counts and the agents that reach it |
+| **reports** | what the fleet closed, newest first, filterable per agent |
+| **rules** | who declares each rule, who inherits it (rules inherit top-down) |
+| **graph** | the 3D brain, embedded ([`@booboo-brain/viewer`](https://www.npmjs.com/package/@booboo-brain/viewer)) |
+
+Reports and buckets fill two ways: **live**, when an agent calls `booboo_remember` /
+`booboo_report` over MCP (durable journal writes, no rebuild), or **in bulk** from your
+own tables via config — see the repo's
+[docs/CONFIG.md](https://github.com/jessedu29260-netizen/booboo/blob/main/docs/CONFIG.md).
+
+## As a React component
+
+```bash
+npm install @booboo-brain/panel react react-dom
+```
+
+```tsx
+import { Panel } from "@booboo-brain/panel";
+
+// Standalone default: same-origin /api/*. A host app injects its own backend:
+export function OrgPage() {
+  return <Panel api={(path, init) => fetch(`/my-backend${path}`, init).then((r) => r.json())} />;
+}
+```
+
+`Panel` mounts the full five-tab app; the `api` prop (`ApiFn`) routes every read/write so
+you can back it with anything that speaks the same `/api/*` shape the CLI serves.
+
+Part of [Booboo](https://github.com/jessedu29260-netizen/booboo) — the unified operational brain. MIT.

package/dist/index.d.ts

@@ -5,6 +5,6 @@ declare function Panel({ api }?: {
     api?: ApiFn;
 }): react.JSX.Element;
 
-declare const PANEL_VERSION = "0.4.0";
+declare const PANEL_VERSION: string;
 
 export { type ApiFn, PANEL_VERSION, Panel };

package/dist/index.js

@@ -511,10 +511,34 @@ body { font-family: var(--font); color: var(--ink); background: var(--bg); overf
 .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; }
+  /* compact chrome */
+  .bar { gap: 8px 14px; padding: 9px 12px; }
+  .bar-brand { font-size: 13px; }
+  .bar-stats { gap: 11px; font-size: 11px; }
+  .bar-stats b { font-size: 12.5px; }
+  .bar-actions { gap: 6px; }
+  .btn { padding: 6px 11px; font-size: 11.5px; }
+  .tabs { padding: 0 4px; }
+  .tab { padding: 10px 9px 9px; font-size: 11.5px; }
+  .tree { padding: 12px 8px 40px; }
+  .tree-hint { display: none; }
   .ag { max-width: 100%; }
   .ag-role { display: none; }
+  .screen { padding: 18px 13px 60px; }
+  /* the dossier becomes a BOTTOM SHEET inside the pane — the chart above stays
+     tappable to switch agents; the ✕ closes. ABSOLUTE (not fixed) so it can
+     never overlap an embedding host's chrome. */
+  .doss {
+    position: absolute; left: 0; right: 0; bottom: 0; top: 34%;
+    width: auto; z-index: 6; border-radius: 16px 16px 0 0;
+    border-top: 1px solid var(--line);
+    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
+  }
+  .doss { animation: sheetup 0.25s ease both; }
+  @keyframes sheetup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
+  .doss-close { display: grid; }
+  /* zoom control clears the sheet — top-right of the chart */
+  .zoomer { top: 4px; right: 8px; bottom: auto; }
 }
 `;
 
@@ -873,6 +897,7 @@ function Dossier({
   onAdd,
   onRemove,
   onSelect,
+  onClose,
   health = null
 }) {
   const api = useApi();
@@ -963,7 +988,8 @@ function Dossier({
       ] }),
       /* @__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" })
+        hasSnapshot && /* @__PURE__ */ jsx("button", { className: "doss-3d", title: "see the whole brain in 3D", onClick: () => nav("/graph"), children: "\u25C9 3D" }),
+        /* @__PURE__ */ jsx("button", { className: "doss-close", title: "close the dossier", "aria-label": "close the dossier", onClick: onClose, children: "\u2715" })
       ] })
     ] }),
     edit && /* @__PURE__ */ jsxs("div", { className: "doss-edit", children: [
@@ -1275,6 +1301,7 @@ function OrgScreen({
         onAdd,
         onRemove,
         onSelect: setSelected,
+        onClose: () => setSelected(null),
         health
       }
     )
@@ -1707,8 +1734,67 @@ function Panel({ api = defaultApi } = {}) {
   ] });
 }
 
+// package.json
+var package_default = {
+  name: "@booboo-brain/panel",
+  version: "0.5.3",
+  description: "Booboo panel \u2014 the organigram. Run your agents like a company: a drag-drop hierarchy your agents boot from, with buckets, reports, rules and the 3D graph, over one org file + snapshot.",
+  license: "MIT",
+  repository: {
+    type: "git",
+    url: "git+https://github.com/jessedu29260-netizen/booboo.git",
+    directory: "packages/panel"
+  },
+  bugs: {
+    url: "https://github.com/jessedu29260-netizen/booboo/issues"
+  },
+  homepage: "https://github.com/jessedu29260-netizen/booboo#readme",
+  type: "module",
+  main: "./dist/index.js",
+  module: "./dist/index.js",
+  types: "./dist/index.d.ts",
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  files: [
+    "dist",
+    "dist-app"
+  ],
+  scripts: {
+    build: "tsup src/index.ts --format esm --dts --clean --external react,react-dom,@booboo-brain/spec && vite build --config vite.app.config.ts",
+    dev: "vite"
+  },
+  peerDependencies: {
+    react: ">=18",
+    "react-dom": ">=18"
+  },
+  dependencies: {
+    "@booboo-brain/spec": "workspace:*"
+  },
+  devDependencies: {
+    react: "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    vite: "^6.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    tsup: "^8",
+    typescript: "^5"
+  },
+  publishConfig: {
+    access: "public"
+  },
+  engines: {
+    node: ">=18"
+  }
+};
+
 // src/index.ts
-var PANEL_VERSION = "0.4.0";
+var PANEL_VERSION = package_default.version;
 export {
   PANEL_VERSION,
   Panel