# SBCC org layout board — notes for Grok bots

**Live demo:** https://demo.bendake.com/tools/sbcc-org-layout-board.html  
**This file:** https://demo.bendake.com/tools/sbcc-org-layout-board.md  
**Source chart:** https://demo.bendake.com/sbcc/about `#org-chart` (“Our Leadership Structure”)

This is a **layout communication template**, not the production About page. Ben rearranges tiles here, then pastes JSON or a screenshot so another Grok can implement the *drawing* without inventing a new org model.

---

## What Ben asked for

1. Same people and reporting tree as the live SBCC About org chart.
2. **Live-canvas drag** (same idea as Commander Live agent tiles): pick a tile up, put it down, the picture updates.
3. **Connections stay.** Dragging must **not** change who reports to whom. No reparenting.
4. **VP row (third level):** Elena, Marcus, Patricia, Ben — slide **left/right only**. They must not move up to President or down to reports.
5. **People under Elena Vasquez:** there are many of them. They must be able to sit on **two rows**. Gold lines must redraw to Elena, including people on the second row.

If a bot builds a pretty static tree, or a chart where dropping a person onto another person changes their boss, that is the **wrong product**.

---

## Why the live About chart is hard to edit

The production chart (`#org-chart` on `/sbcc/about`) is a **recursive flex tree**:

- Data is a nested JS object (`steve-bubalo` → `john-s` → VPs → reports).
- Each node renders a tile, then a gold vertical, then a **single wrapping row** of children.
- Connectors are CSS (`w-px` / `h-px` gold lines), not a canvas.
- Elena’s seven reports overflow horizontally. The page even auto-scrolls that strip to center it.

That layout cannot express “two rows of Elena’s team” without rewriting the renderer. Bots that only restyle the flex tree will keep failing this request.

---

## The model that works

Split **org truth** from **drawing**.

| Layer | Locked? | What it is |
|---|---|---|
| **Tree** | Yes | `id`, `name`, `title`, `parent`. Who reports to whom. |
| **Bands** | Yes | Rank rows: CEO, President, VP, Reports row 1, Elena row 2. |
| **Positions** | No | `{ id: { x, y } }` on a 1680×1080 board. This is what Ben edits. |
| **Wires** | Derived | SVG elbows from parent bottom → horizontal bus → child top. Redraw every drag frame. |

Commander Live does the same split: membership is truth; layout coords are the editor; lines follow.

### Rank bands (Y is snapped, not free)

| Band | Y | Who | Drag rule |
|---|---:|---|---|
| CEO | 36 | Steve Bubalo | X only |
| President | 230 | John S | X only |
| VP | 424 | Elena, Marcus, Patricia, Ben | **X only — do not change level** |
| Reports row 1 | 638 | Default reports; Elena’s team may use this row | X free; Elena’s kids may snap here |
| Elena row 2 | 850 | Only Elena’s seven reports | X free; snap to row 1 or row 2 |

**Elena’s seven:** Derek Holt, Alicia Ramirez, James Okonkwo, Nina Patel, Carlos Mendoza, Ryan Brooks, Maintenance & Equipment Drivers (group tile).

**Not two-row:** Sofia Nguyen and Kevin Ortiz (Patricia), Mario Hernandez (Ben). They stay on reports row 1.

On drag, `y` is replaced by the nearest **allowed** band for that person. VPs never receive row-2 Y. That is how “don’t change levels” is enforced — not a warning, a clamp.

### Connectors

For each parent with children:

1. Vertical from parent bottom-center down to a **bus** 28px below the tile.
2. Horizontal bus from `min(parent.x, children.x)` to `max(...)`.
3. Vertical from the bus down to each child’s top-center.

Children on Elena’s second row get a **longer vertical**. They still attach to Elena, never to a sibling. Do not reparent. Do not draw a second tree.

---

## Reporting tree (do not reorder this in code unless Ben says so)

```
Steve Bubalo — Founder & CEO
└── John S — President
    ├── Elena Vasquez — VP, Operations
    │   ├── Derek Holt — Sr. Project Manager
    │   ├── Alicia Ramirez — Project Manager
    │   ├── James Okonkwo — Project Manager
    │   ├── Nina Patel — Safety Manager
    │   ├── Carlos Mendoza — Safety Manager
    │   ├── Ryan Brooks — Maintenance & Fleet Superintendent
    │   └── Maintenance & Equipment Drivers (group)
    ├── Marcus Chen — VP, Estimating & Business Development
    ├── Patricia Morales — VP, Finance & Administration
    │   ├── Sofia Nguyen — Controller / AP Lead
    │   └── Kevin Ortiz — AR Specialist
    └── Ben Dake — Director of IT
        └── Mario Hernandez — Assistant to Director of IT
```

Default **drawing** already puts Elena’s seven as **4 + 3** (two rows) so the two-row idea is visible. Ben may drag from there.

---

## How to duplicate this (checklist for Grok bots)

1. **Do not** implement drop-on-person = new manager.
2. **Do not** use a single wrapping flex row for Elena’s reports.
3. Store people as a **flat list** with `parent` + `band`, plus a `positions` map.
4. Render tiles `position: absolute` on a large board (Live canvas), not CSS tree layout.
5. Draw wires in SVG (`pointer-events: none`) from current positions; redraw on `pointermove`.
6. On drag: update `x` (clamped to the board); set `y` with `snapY(person)` as in the HTML.
7. Persist positions (`localStorage` is enough for this template). Tree JSON is read-only.
8. Match SBCC chrome if drawing for the About page: cream `#F4F4F2`, ink `#2F3E46`, gold `#EED89E`, serif names, mono titles.
9. Group tile (Drivers) is dashed gold, no headshot. It is still a child of Elena.
10. Headshots on the demo chart are Base44 media URLs; if they 404, show initials.

When Ben sends **Copy layout JSON**, honor `positions`. Do not ignore them and rebuild a default tree. The JSON `tree` block is documentation of the locked reporting lines; `positions` is the layout he wants.

---

## What this template is not

- Not a Commander Live glass (no agents, heartbeats, or unplaced dock).
- Not production `/sbcc/about` (do not deploy this file over the About page).
- Not an org-edit HR tool (titles and bosses stay as on the demo site until Ben says otherwise).

---

## Files

| File | Role |
|---|---|
| `sbcc-org-layout-board.html` | The board. Open it, drag, copy JSON. |
| `sbcc-org-layout-board.md` | These notes. Read before cloning the behavior. |