makersclaw 0.2.0 → 0.3.0

package/registry/blocks/org-chart/org-chart.jsx

@@ -0,0 +1,631 @@
+"use client";
+
+// OrgChart — the people tree, top down, on FlowCanvas. Managers over their
+// reports, a team with no managers in it as a compact column, teams folded
+// past the first levels with a chip that says how big they are. Find a
+// person from the search and the chart unfolds down to them, centres them
+// and lights their chain of managers. A person's card opens their details
+// (reports to, direct reports); with `onChangeManager`, drag a card onto
+// another to move someone to a new manager.
+//
+// People come in flat (each names a manager); org.js builds the tree and
+// lays it out, and the canvas — read-only, its own tools unused — draws,
+// pans and zooms. Pointer and keys come through this component.
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Avatar, Badge, Button, Combobox, Empty, Item, ItemGroup, Kbd, Legend, Sheet, Tooltip, cx, toast } from "../../ui";
+import { FlowCanvas, useFlowCanvas } from "../flow-canvas";
+import { OrgContext, NODE_TYPES } from "./person";
+import { CARD, STACK_FROM, buildOrg, chainOf, groupHues, layoutOrg } from "./org";
+
+const CONTROL = 'input,textarea,select,[contenteditable="true"],[contenteditable="plaintext-only"],[role="dialog"],[role="menu"],[popover],button,a[href]';
+
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(pointer: coarse)");
+    const on = () => setCoarse(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return coarse;
+}
+
+async function settle(fn, ...args) {
+  try {
+    const res = await fn(...args);
+    return res && res.ok === false ? { ok: false, error: res.error } : { ok: true };
+  } catch (e) {
+    return { ok: false, error: e?.message };
+  }
+}
+
+const nameOf = (p) => p?.name || "Unnamed";
+
+export function OrgChart({
+  people,
+  managerKey = "managerId",
+  groupBy = "department",
+  defaultDepth = 3,
+  onChangeManager,
+  onOpenPerson,
+  renderDetails,
+  onSelectionChange,
+  height = 640,
+  label = "Org chart",
+  className,
+}) {
+  const canvas = useFlowCanvas();
+  const boxRef = useRef(null);
+  const coarse = useCoarsePointer();
+  const cbs = useRef({});
+  cbs.current = { onChangeManager, onOpenPerson, onSelectionChange };
+
+  // ── moves not yet in `people` (optimistic) ────────────────────────────
+  const [moves, setMoves] = useState(() => new Map());
+  useEffect(() => {
+    // What the page has taken in needs no override any more.
+    setMoves((m) => {
+      if (!m.size) return m;
+      const next = new Map(m);
+      for (const p of people ?? []) if (next.has(String(p.id)) && String(p[managerKey] ?? "") === String(next.get(String(p.id)) ?? "")) next.delete(String(p.id));
+      return next.size === m.size ? m : next;
+    });
+  }, [people, managerKey]);
+  const everyone = useMemo(
+    () => (people ?? []).filter((p) => p && p.id != null).map((p) => (moves.has(String(p.id)) ? { ...p, [managerKey]: moves.get(String(p.id)) } : p)),
+    [people, moves, managerKey],
+  );
+
+  const org = useMemo(() => buildOrg(everyone, { managerKey }), [everyone, managerKey]);
+  const hues = useMemo(() => groupHues(everyone, groupBy), [everyone, groupBy]);
+  const groupOf = useCallback((p) => (groupBy ? (typeof groupBy === "function" ? groupBy(p) : p?.[groupBy]) : null), [groupBy]);
+
+  // ── folding ───────────────────────────────────────────────────────────
+  const [folds, setFolds] = useState(() => new Map()); // id → folded?
+  const isFolded = useCallback((n) => (folds.has(n.id) ? folds.get(n.id) : n.depth >= defaultDepth - 1), [folds, defaultDepth]);
+  const layout = useMemo(() => layoutOrg(org.roots, { collapsed: (n) => n.children.length > 0 && isFolded(n) }), [org, isFolded]);
+  const itemsById = useMemo(() => new Map(layout.items.map((it) => [it.id, it])), [layout]);
+
+  const board = useMemo(
+    () => ({
+      nodes: layout.items.map((it) => {
+        const p = it.node.person;
+        const g = groupOf(p);
+        return {
+          id: it.id,
+          type: "person",
+          position: { x: Math.round(it.x), y: Math.round(it.y) },
+          width: it.width,
+          height: it.height,
+          draggable: false,
+          connectable: false,
+          data: {
+            name: p.name,
+            title: p.title,
+            avatar: p.avatar,
+            group: g ?? undefined,
+            hue: g != null ? hues.get(g) : undefined,
+            direct: it.node.children.length,
+            total: it.node.total,
+            folded: it.folded,
+            parentId: it.parentId,
+            link: it.link.length ? it.link.map((pt) => ({ x: pt.x - it.x, y: pt.y - it.y })) : null,
+          },
+        };
+      }),
+      edges: [],
+    }),
+    [layout, hues, groupOf],
+  );
+
+  // ── selection ─────────────────────────────────────────────────────────
+  const [selectedId, setSelectedId] = useState(null);
+  const selectedRef = useRef(null);
+  const select = useCallback((id) => {
+    selectedRef.current = id;
+    setSelectedId(id);
+  }, []);
+  useEffect(() => {
+    if (selectedId && !org.byId.has(selectedId)) select(null);
+  }, [org, selectedId, select]);
+  const chain = useMemo(() => new Set(selectedId ? chainOf(org.byId, selectedId).map((n) => n.id) : []), [org, selectedId]);
+
+  // The canvas pans with a plain drag (its hand tool).
+  const hand = useCallback(() => {
+    const api = canvas.current;
+    if (api && api.getTool?.() !== "hand") api.setTool("hand");
+  }, [canvas]);
+  useEffect(() => {
+    let raf = 0;
+    let tries = 0;
+    const wait = () => {
+      if (canvas.current) return hand();
+      if (tries++ < 120) raf = requestAnimationFrame(wait);
+    };
+    wait();
+    return () => cancelAnimationFrame(raf);
+  }, [canvas, hand]);
+
+  /** Centre a person when they are off screen (or always, with `force`),
+   *  at the zoom there is — but close enough to read. */
+  const reveal = useCallback(
+    (id, { force = false, tries = 4 } = {}) => {
+      const host = boxRef.current;
+      const el = host?.querySelector(`[data-person="${CSS.escape(id)}"]`);
+      if (!el) {
+        if (tries > 0) setTimeout(() => reveal(id, { force, tries: tries - 1 }), 60);
+        return;
+      }
+      const r = el.getBoundingClientRect();
+      const c = host.getBoundingClientRect();
+      const pad = 24;
+      const inView = r.left >= c.left + pad && r.right <= c.right - pad && r.top >= c.top + pad && r.bottom <= c.bottom - pad - 40;
+      if (inView && !force) return;
+      const now = r.width / CARD.width;
+      const zoom = force ? Math.max(now, Math.min(1, (c.width - 48) / CARD.width)) : now;
+      canvas.current?.fitView({ nodes: [{ id }], minZoom: zoom, maxZoom: zoom, padding: 0.6 });
+    },
+    [canvas],
+  );
+
+  const [announce, setAnnounce] = useState("");
+  const say = (m) => setAnnounce((x) => (x === m ? `${m} ` : m));
+
+  useEffect(() => {
+    const n = selectedId ? org.byId.get(selectedId) : null;
+    cbs.current.onSelectionChange?.(n?.person ?? null);
+    if (!n) return;
+    const p = n.person;
+    const boss = n.parentId ? org.byId.get(n.parentId)?.person : null;
+    say(`${nameOf(p)}${p.title ? `, ${p.title}` : ""}${boss ? `, reports to ${nameOf(boss)}` : ""}${n.children.length ? `, ${n.children.length} direct report${n.children.length === 1 ? "" : "s"}` : ""}`);
+    const raf = requestAnimationFrame(() => {
+      const host = boxRef.current;
+      const el = host?.querySelector(`.react-flow__node[data-id="${CSS.escape(selectedId)}"]`);
+      if (el && host.contains(document.activeElement) && document.activeElement !== el) el.focus({ preventScroll: true });
+      reveal(selectedId);
+    });
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId]);
+
+  const setFold = useCallback(
+    (id, folded) => {
+      const n = org.byId.get(id);
+      if (!n || !n.children.length) return;
+      setFolds((f) => new Map(f).set(id, folded ?? !isFolded(n)));
+      say(`${nameOf(n.person)}'s team ${folded ?? !isFolded(n) ? "hidden" : "shown"}`);
+    },
+    [org, isFolded],
+  );
+  const foldAll = (folded) => {
+    const next = new Map();
+    for (const n of org.byId.values()) if (n.children.length) next.set(n.id, folded && n.depth > 0);
+    setFolds(next);
+    setTimeout(() => canvas.current?.fitView(), 80);
+  };
+
+  /** Unfold the way down to someone, select them, centre them. */
+  const focusPerson = useCallback(
+    (id) => {
+      const path = chainOf(org.byId, id);
+      if (!path.length) return;
+      setFolds((f) => {
+        const next = new Map(f);
+        for (const n of path.slice(0, -1)) next.set(n.id, false);
+        return next;
+      });
+      select(id);
+      setTimeout(() => reveal(id, { force: true }), 30);
+    },
+    [org, select, reveal],
+  );
+
+  // ── details ───────────────────────────────────────────────────────────
+  const [detailsId, setDetailsId] = useState(null);
+  const open = useCallback(
+    (id) => {
+      const n = org.byId.get(id);
+      if (!n) return;
+      select(id);
+      if (cbs.current.onOpenPerson) return cbs.current.onOpenPerson(n.person);
+      setDetailsId(id);
+    },
+    [org, select],
+  );
+
+  // ── moving someone to a new manager ──────────────────────────────────
+  const canMove = Boolean(onChangeManager);
+  const reassign = async (id, to, { quiet = false } = {}) => {
+    const n = org.byId.get(id);
+    if (!n) return;
+    const from = n.person[managerKey] ?? null;
+    setMoves((m) => new Map(m).set(id, to));
+    if (to) setFolds((f) => new Map(f).set(to, false));
+    const boss = to ? org.byId.get(to)?.person : null;
+    const res = await settle(cbs.current.onChangeManager, n.person, to);
+    if (!res.ok) {
+      setMoves((m) => {
+        const next = new Map(m);
+        if (String(from ?? "") === String((people ?? []).find((p) => String(p.id) === id)?.[managerKey] ?? "")) next.delete(id);
+        else next.set(id, from);
+        return next;
+      });
+      toast.error(`Couldn't move ${nameOf(n.person)}`, { description: res.error || "Nothing changed. Try again." });
+      return;
+    }
+    if (!quiet) {
+      toast(`${nameOf(n.person)} now reports to ${boss ? nameOf(boss) : "no one"}`, {
+        action: { label: "Undo", onClick: () => reassign(id, from, { quiet: true }) },
+      });
+    }
+  };
+
+  const [drag, setDrag] = useState(null); // { id, name, x, y }
+  const [dropId, setDropId] = useState(null);
+  const onCardPointerDown = (e, id) => {
+    const wasSelected = selectedRef.current === id;
+    select(id);
+    const start = { x: e.clientX, y: e.clientY };
+    let active = false;
+    let over = null;
+    const n = org.byId.get(id);
+    const allowDrag = canMove && e.pointerType === "mouse";
+    const move = (ev) => {
+      if (!allowDrag) return;
+      if (!active && Math.hypot(ev.clientX - start.x, ev.clientY - start.y) < 5) return;
+      active = true;
+      const host = boxRef.current?.getBoundingClientRect();
+      if (!host) return;
+      const hit = document
+        .elementsFromPoint(ev.clientX, ev.clientY)
+        .map((el) => el.closest?.("[data-person]"))
+        .find((el) => el && el.dataset.person !== id);
+      const tid = hit?.dataset.person ?? null;
+      const inside = tid && chainOf(org.byId, tid).some((x) => x.id === id);
+      over = tid && !inside && n?.parentId !== tid ? tid : null;
+      setDropId(over);
+      setDrag({ id, name: nameOf(n?.person), x: ev.clientX - host.left, y: ev.clientY - host.top });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", up);
+      if (!active) {
+        // A second click on the selected card opens it (a tap, on a phone).
+        if (wasSelected) open(id);
+        return;
+      }
+      setDrag(null);
+      setDropId(null);
+      if (over) reassign(id, over);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", up);
+  };
+
+  // A click on the empty canvas (not a pan) clears the selection.
+  const paneDown = useRef(null);
+  const onPointerDownCapture = (e) => {
+    paneDown.current = e.target?.classList?.contains("react-flow__pane") ? { x: e.clientX, y: e.clientY } : null;
+  };
+  const onPointerUpCapture = (e) => {
+    const p = paneDown.current;
+    paneDown.current = null;
+    if (p && Math.hypot(e.clientX - p.x, e.clientY - p.y) <= 4) select(null);
+  };
+
+  // ── keys ──────────────────────────────────────────────────────────────
+  const [searchOpen, setSearchOpen] = useState(false);
+  const onKeyDownCapture = (e) => {
+    const t = e.target;
+    if (t?.closest?.(CONTROL)) return;
+    const k = e.key;
+    const mod = e.metaKey || e.ctrlKey;
+    const done = () => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    if (mod || e.altKey) return;
+    if (k === "/") return done(), setSearchOpen(true);
+    const sel = selectedRef.current && org.byId.has(selectedRef.current) ? selectedRef.current : null;
+    if (k === "Escape") {
+      if (sel) return done(), select(null);
+      setTimeout(hand, 0);
+      return;
+    }
+    const first = org.roots[0]?.id;
+    if (!sel) {
+      if ((k.startsWith("Arrow") || k === "Enter" || k === "Home") && first) return done(), select(first);
+      return;
+    }
+    const n = org.byId.get(sel);
+    const parent = n.parentId ? org.byId.get(n.parentId) : null;
+    const siblings = parent ? parent.children : org.roots;
+    const i = siblings.findIndex((x) => x.id === sel);
+    const stacked = parent && itemsById.get(siblings[0]?.id)?.link?.length === 3;
+    if (k === "Home" && first) return done(), select(first);
+    if (k === "Enter") return done(), open(sel);
+    if (k === " ") return done(), setFold(sel);
+    if (k === "ArrowUp") {
+      done();
+      if (stacked && i > 0) return select(siblings[i - 1].id);
+      return parent && select(parent.id);
+    }
+    if (k === "ArrowDown") {
+      done();
+      if (n.children.length) {
+        if (isFolded(n)) setFold(sel, false);
+        const kids = n.children;
+        // Into a column: its top. Into a row: its middle, under the manager.
+        const column = kids.length >= STACK_FROM && kids.every((c) => !c.children.length);
+        return select(kids[column ? 0 : Math.floor((kids.length - 1) / 2)].id);
+      }
+      if (stacked && i < siblings.length - 1) return select(siblings[i + 1].id);
+      return;
+    }
+    if (k === "ArrowLeft" || k === "ArrowRight") {
+      done();
+      const j = i + (k === "ArrowLeft" ? -1 : 1);
+      if (siblings[j]) return select(siblings[j].id);
+      // Past the end of the team: the nearest card across, in the same row.
+      const me = itemsById.get(sel);
+      if (!me) return;
+      const across = layout.items
+        .filter((it) => Math.abs(it.y - me.y) < 4 && (k === "ArrowLeft" ? it.x < me.x : it.x > me.x))
+        .sort((a, b) => Math.abs(a.x - me.x) - Math.abs(b.x - me.x))[0];
+      if (across) select(across.id);
+    }
+  };
+
+  // ── the context the cards read ────────────────────────────────────────
+  const ctx = useMemo(
+    () => ({
+      selectedId,
+      chain,
+      dropId,
+      dragId: drag?.id ?? null,
+      coarse,
+      draggable: canMove && !coarse,
+      onCardPointerDown,
+      open,
+      toggle: (id) => setFold(id),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedId, chain, dropId, drag, coarse, canMove, open, setFold, org],
+  );
+
+  // ── chrome ────────────────────────────────────────────────────────────
+  const options = useMemo(
+    () =>
+      everyone.map((p) => ({
+        value: String(p.id),
+        label: nameOf(p),
+        description: [p.title, groupOf(p)].filter(Boolean).join(" · ") || undefined,
+        icon: <Avatar name={p.name} src={p.avatar} size="xs" />,
+        keywords: [p.title, groupOf(p), p.email, p.location].filter(Boolean),
+      })),
+    [everyone, groupOf],
+  );
+  const legend = useMemo(() => {
+    if (!groupBy || !hues.size) return [];
+    const count = new Map();
+    for (const p of everyone) {
+      const g = groupOf(p);
+      if (g != null && g !== "") count.set(g, (count.get(g) ?? 0) + 1);
+    }
+    return [...hues.entries()].map(([g, hue]) => ({ key: String(g), hue, label: String(g), count: count.get(g) }));
+  }, [everyone, hues, groupBy, groupOf]);
+  const managers = useMemo(() => [...org.byId.values()].filter((n) => n.children.length).length, [org]);
+  const sized = /(^|\s)(h-|min-h-|size-|flex-1|grow)/.test(className ?? "");
+  const details = detailsId ? org.byId.get(detailsId) : null;
+
+  if (!everyone.length) {
+    return (
+      <section aria-label={label} className={cx("grid place-items-center rounded-lg border border-border bg-background p-6", className)} style={sized ? undefined : { minHeight: Math.min(Number(height) || 320, 320) }}>
+        <Empty icon="users" title="No one on the chart yet" body="People appear here once they're added, each with the person they report to." />
+      </section>
+    );
+  }
+
+  return (
+    <section aria-label={label} className={cx("flex flex-col overflow-hidden rounded-lg border border-border bg-background text-foreground", className)} style={sized ? undefined : { height }}>
+      <header className="grid shrink-0 gap-2 border-b border-border bg-card px-3 py-2 text-card-foreground">
+        <div className="flex flex-wrap items-center gap-2">
+          <Combobox
+            label="Find a person"
+            options={options}
+            value={null}
+            onValueChange={(v) => v && focusPerson(String(v))}
+            open={searchOpen}
+            onOpenChange={setSearchOpen}
+            placeholder="Find a person…"
+            searchPlaceholder="Name, title or team"
+            empty="No one by that name."
+            className="w-full sm:w-72"
+          />
+          <p className="text-sm text-muted-foreground tabular-nums">
+            {everyone.length} {everyone.length === 1 ? "person" : "people"}
+            <span className="max-sm:hidden">
+              {" "}
+              · {managers} {managers === 1 ? "manager" : "managers"}
+            </span>
+          </p>
+          <div className="flex-1" />
+          <div className="flex items-center gap-1">
+            <Tooltip label="Show every team">
+              <Button size="sm" variant="quiet" icon="chevron-down" onClick={() => foldAll(false)}>
+                Expand all
+              </Button>
+            </Tooltip>
+            <Tooltip label="Fold every team under the top">
+              <Button size="sm" variant="quiet" icon="chevron-up" onClick={() => foldAll(true)}>
+                Collapse
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+        {legend.length > 1 ? <Legend size="sm" items={legend} label={typeof groupBy === "string" ? `People by ${groupBy}` : "People by group"} /> : null}
+      </header>
+
+      <div ref={boxRef} className="relative min-h-0 flex-1" onKeyDownCapture={onKeyDownCapture} onPointerDownCapture={onPointerDownCapture} onPointerUpCapture={onPointerUpCapture}>
+        <p className="sr-only" aria-live="polite">
+          {announce}
+        </p>
+        <OrgContext.Provider value={ctx}>
+          <FlowCanvas
+            value={board}
+            readOnly
+            nodeTypes={NODE_TYPES}
+            canvasRef={canvas}
+            label={label}
+            height="100%"
+            bare
+            emptyState={false}
+            templates={[]}
+            describeNode={describePerson}
+            className="[&_.react-flow__node]:transition-transform [&_.react-flow__node]:duration-200 [&_.react-flow__node]:ease-out motion-reduce:[&_.react-flow__node]:transition-none"
+          />
+        </OrgContext.Provider>
+
+        {drag ? (
+          <div aria-hidden="true" className="pointer-events-none absolute z-20 grid -translate-x-1/2 -translate-y-[calc(100%+10px)] justify-items-center gap-1" style={{ left: drag.x, top: drag.y }}>
+            <span className="max-w-60 truncate rounded-lg border border-border bg-popover px-3 py-1.5 text-sm font-medium text-popover-foreground shadow-lg">{drag.name}</span>
+            <span className="rounded-md bg-foreground px-2 py-0.5 text-xs text-background">{dropId ? `Reports to ${nameOf(org.byId.get(dropId)?.person)}` : "Drop on their new manager"}</span>
+          </div>
+        ) : null}
+
+        <div aria-hidden="true" className="pointer-events-none absolute bottom-3 left-3 z-10 hidden items-center gap-3 rounded-lg border border-border bg-card/90 px-2.5 py-1.5 text-xs text-muted-foreground shadow-xs backdrop-blur-sm md:flex">
+          <span className="flex items-center gap-1.5">
+            <Kbd>/</Kbd>find
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd>←↑→↓</Kbd>move
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd>Space</Kbd>team
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd>Enter</Kbd>details
+          </span>
+        </div>
+      </div>
+
+      <Sheet
+        open={Boolean(details)}
+        onClose={() => setDetailsId(null)}
+        title={details ? nameOf(details.person) : ""}
+        description={details?.person.title}
+        footer={
+          details ? (
+            <Button
+              size="sm"
+              icon="target"
+              onClick={() => {
+                const id = details.id;
+                setDetailsId(null);
+                focusPerson(id);
+              }}
+            >
+              Show on the chart
+            </Button>
+          ) : null
+        }
+      >
+        {details ? (
+          <PersonDetails
+            node={details}
+            byId={org.byId}
+            group={groupOf(details.person)}
+            hue={hues.get(groupOf(details.person))}
+            extra={renderDetails?.(details.person)}
+            onPick={(id) => {
+              setDetailsId(id);
+              focusPerson(id);
+            }}
+          />
+        ) : null}
+      </Sheet>
+    </section>
+  );
+}
+
+function describePerson(n) {
+  if (n.type !== "person") return undefined;
+  const d = n.data ?? {};
+  return `${d.name || "Unnamed"}${d.title ? `, ${d.title}` : ""}${d.direct ? ` — ${d.direct} direct report${d.direct === 1 ? "" : "s"}` : ""}`;
+}
+
+function PersonDetails({ node, byId, group, hue, extra, onPick }) {
+  const p = node.person;
+  const boss = node.parentId ? byId.get(node.parentId) : null;
+  const facts = [p.location].filter(Boolean);
+  return (
+    <div className="grid gap-6">
+      <div className="flex items-center gap-4">
+        <Avatar name={p.name} src={p.avatar} size="lg" />
+        <div className="grid min-w-0 gap-1">
+          <p className="truncate text-base font-semibold">{nameOf(p)}</p>
+          {p.title ? <p className="truncate text-sm text-muted-foreground">{p.title}</p> : null}
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            {group != null && group !== "" ? (
+              <Badge variant="soft" hue={hue}>
+                {String(group)}
+              </Badge>
+            ) : null}
+            {facts.map((f) => (
+              <span key={f} className="text-xs text-muted-foreground">
+                {f}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {p.email ? (
+        <a href={`mailto:${p.email}`} className="-mt-2 w-fit truncate text-sm text-primary underline-offset-4 hover:underline">
+          {p.email}
+        </a>
+      ) : null}
+
+      <section className="grid gap-2">
+        <h3 className="text-sm font-medium">Reports to</h3>
+        {boss ? (
+          <Item size="sm" variant="outline" media={<Avatar name={boss.person.name} src={boss.person.avatar} size="sm" />} title={nameOf(boss.person)} description={boss.person.title} onClick={() => onPick(boss.id)} />
+        ) : (
+          <p className="text-sm text-muted-foreground">No one — the top of the chart.</p>
+        )}
+      </section>
+
+      <section className="grid gap-2">
+        <h3 className="flex items-baseline gap-2 text-sm font-medium">
+          Direct reports
+          <span className="text-xs font-normal text-muted-foreground tabular-nums">
+            {node.children.length}
+            {node.total > node.children.length ? ` · ${node.total} in the team` : ""}
+          </span>
+        </h3>
+        {node.children.length ? (
+          <ItemGroup>
+            {node.children.map((c) => (
+              <Item
+                key={c.id}
+                size="sm"
+                media={<Avatar name={c.person.name} src={c.person.avatar} size="sm" />}
+                title={nameOf(c.person)}
+                description={c.person.title}
+                meta={c.total ? <span className="tabular-nums">{c.total}</span> : null}
+                onClick={() => onPick(c.id)}
+              />
+            ))}
+          </ItemGroup>
+        ) : (
+          <p className="text-sm text-muted-foreground">No one reports to {nameOf(p).split(" ")[0]}.</p>
+        )}
+      </section>
+
+      {extra ? <section className="grid gap-2">{extra}</section> : null}
+    </div>
+  );
+}