@sleep2agi/agent-network-dashboard 0.5.3-preview.260 → 0.5.3-preview.261

package/app/components/TopoGraph.tsx

@@ -85,6 +85,23 @@ interface Point {
   y: number;
 }
 
+/** #170 tree-view MVP — payload for the org-chart layout. `lines` are the
+ *  parent→child elbow connectors (raw endpoints; the render branch draws
+ *  the right-angle path). `synthLabels` are placeholder chips for the
+ *  synthetic nodes (指挥中心 root / 未分组 bucket) that have no backing
+ *  session. Empty in ring/grid layouts. */
+interface TreeConnectorLine {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+interface TreeLayout {
+  lines: TreeConnectorLine[];
+  synthLabels: { x: number; y: number; label: string }[];
+  synthRoot: boolean;
+}
+
 interface FlowLink {
   key: string;
   from: string;
@@ -607,11 +624,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // grid arranges nodes in an N×M grid (better for 30+ nodes). Persisted to
   // localStorage like the zoom/pan view state. Declared above nodePositions
   // since that useMemo branches on it.
-  const [layout, setLayout] = useState<'ring' | 'grid'>('ring');
+  const [layout, setLayout] = useState<'ring' | 'grid' | 'tree'>('ring');
   useEffect(() => {
     try {
       const saved = localStorage.getItem('anet-topo-layout');
-      if (saved === 'grid' || saved === 'ring') {
+      if (saved === 'grid' || saved === 'ring' || saved === 'tree') {
         setLayout(saved);
       } else if (sessions.length >= 20) {
         // v0.10.0 Hero 3 Wave 1 §3.D — auto-grid for dense fleets.
@@ -650,11 +667,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // R168's smoothView arming but on a different visual axis
   // (opacity, not transform).
   const [layoutSwitching, setLayoutSwitching] = useState(false);
+  // #170 tree-view MVP — layout is now 3-way (ring | grid | tree).
+  // selectLayout sets a specific mode (used by the chrome segmented
+  // control's 3 buttons); toggleLayout cycles ring → grid → tree → ring
+  // (used by the `l` keyboard shortcut). Both arm the R170 crossfade-
+  // blink so the node teleport between layouts reads as a soft swap.
+  const LAYOUT_CYCLE: ('ring' | 'grid' | 'tree')[] = ['ring', 'grid', 'tree'];
+  const selectLayout = (next: 'ring' | 'grid' | 'tree') => {
+    setLayoutSwitching(true);
+    setTimeout(() => setLayoutSwitching(false), 400);
+    setLayout(prev => {
+      if (prev === next) return prev;
+      try { localStorage.setItem('anet-topo-layout', next); } catch {}
+      return next;
+    });
+  };
   const toggleLayout = () => {
     setLayoutSwitching(true);
     setTimeout(() => setLayoutSwitching(false), 400);
     setLayout(prev => {
-      const next = prev === 'ring' ? 'grid' : 'ring';
+      const next = LAYOUT_CYCLE[(LAYOUT_CYCLE.indexOf(prev) + 1) % LAYOUT_CYCLE.length];
       try { localStorage.setItem('anet-topo-layout', next); } catch {}
       return next;
     });
@@ -718,6 +750,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     groupKeys,
     groupBoxes,
     gridContentBottom,
+    treeConnectors,
+    treeContentBox,
   } = useMemo(() => {
     const sseCount = (s: { alias: string; network_id?: string }) =>
       (s.network_id ? sseSessions[`${s.network_id}:${s.alias}`] : undefined) ?? sseSessions[s.alias];
@@ -922,6 +956,269 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
         groupKeys,
         groupBoxes,
         gridContentBottom,
+        treeConnectors: { lines: [], synthLabels: [], synthRoot: false } as TreeLayout,
+        treeContentBox: null as { x: number; y: number; w: number; h: number } | null,
+      };
+    }
+
+    if (layout === 'tree') {
+      // #170 tree-view MVP — classic top-down org chart, derived purely
+      // from alias + runtime (zero-config; org.json override is the
+      // RFC-017 formal version, out of scope here).
+      //
+      //   layer 0  总指挥        ── synthetic root if none / multiple
+      //   layer 1  副指挥        ── report to 总指挥
+      //   layer 2  team leads   ── one per computeGroups() team
+      //                            + a 未分组 bucket for orphans
+      //   layer 3  deputy + members hanging under their team lead
+      //
+      // The classifier per team: LEAD = runtime claude-code-cli OR alias
+      // contains 负责人; DEPUTY = runtime codex-sdk (or runtime string
+      // containing "codex"); everyone else = members.
+      const all = [...online, ...offline];
+      const groupKeys = computeGroups(all);
+      const isCommander = (a: string) => a.includes('总指挥');
+      const isDeputyCmdr = (a: string) => a.includes('副指挥');
+      const runtimeOf = (s: Session) => (s.runtime || '').toLowerCase();
+      const isCodexRt = (s: Session) => runtimeOf(s).includes('codex');
+      const isCliRt = (s: Session) => runtimeOf(s) === 'claude-code-cli';
+
+      // commanders are roots, never team members
+      const commanders = all.filter(s => isCommander(s.alias));
+      const deputyCommanders = all.filter(s => isDeputyCmdr(s.alias) && !isCommander(s.alias));
+      const rankAliases = new Set([...commanders, ...deputyCommanders].map(s => s.alias));
+
+      // teams = computeGroups components, minus the commander aliases.
+      // A "real" team is a group key shared by ≥2 non-commander members.
+      const teamMembers: Record<string, Session[]> = {};
+      const orphans: Session[] = [];
+      for (const s of all) {
+        if (rankAliases.has(s.alias)) continue;
+        const gk = groupKeys[s.alias] ?? s.alias;
+        (teamMembers[gk] ||= []).push(s);
+      }
+      const realTeams: { key: string; members: Session[] }[] = [];
+      for (const [key, members] of Object.entries(teamMembers)) {
+        if (members.length >= 2) realTeams.push({ key, members });
+        else orphans.push(...members);
+      }
+      realTeams.sort((a, b) => a.key.localeCompare(b.key));
+
+      // within a team: pick the LEAD (claude-code-cli runtime, or 负责人
+      // in the alias forces it), then DEPUTY (codex runtime), rest = members.
+      type TeamTree = { key: string; lead: Session; deputy: Session | null; members: Session[] };
+      const pickLead = (members: Session[]): Session => {
+        const forced = members.find(s => s.alias.includes('负责人'));
+        if (forced) return forced;
+        const cli = members.find(s => isCliRt(s));
+        if (cli) return cli;
+        return [...members].sort((a, b) => a.alias.localeCompare(b.alias))[0];
+      };
+      const teamTrees: TeamTree[] = realTeams.map(({ key, members }) => {
+        const lead = pickLead(members);
+        const rest = members.filter(s => s.alias !== lead.alias);
+        const deputy = rest.find(s => isCodexRt(s)) ?? null;
+        const others = rest
+          .filter(s => !deputy || s.alias !== deputy.alias)
+          .sort((a, b) => a.alias.localeCompare(b.alias));
+        return { key, lead, deputy, members: others };
+      });
+
+      // ---- box-based org layout (Vincent #170 feedback) ----------------
+      // Each team is a rectangular BOX (reusing the grid-mode cluster-box
+      // visual via groupBoxes); its members pack into a compact ~√n grid
+      // INSIDE the box rather than one wide row — an 8-person team is a
+      // ~3×3 block, not a 1×8 strip. Boxes sit side-by-side at layer 2;
+      // 副指挥 (layer 1) centre over their contiguous box-run; the root
+      // (layer 0) centres over the 副指挥. Keeps the whole chart compact
+      // and screenshot-friendly even at dozens of nodes.
+      const nodeR = Math.round(26 * nodeScale);
+      const cellW = Math.max(108, 2 * nodeR + 56);  // member grid cell — fits a label card
+      const cellH = Math.max(96, 2 * nodeR + 48);   // + label drop room below the node
+      const BOX_PAD = 16;                            // box inner padding
+      const BOX_LABEL = 26;                          // box top label band
+      const BOX_GAP = 48;                            // gap between sibling boxes
+      // iter5 (Vincent UX — tree presentation): the two header layers
+      // (总指挥 / 副指挥) hold single small nodes; the iter-2 ROW=116 gap
+      // gave them ~362px of pure header before the first team box. HEAD_ROW
+      // tightens those two layer gaps — still clears node radius + label
+      // drop + connector elbow (needs >72px; 88 leaves a safe margin) but
+      // trims header bloat so the box-layout auto-fit lands at a larger
+      // zoom. The team-box rows below keep their own spacing untouched.
+      const HEAD_ROW = Math.max(88, nodeR + 62);     // header layer gap (iter5)
+      const TOP = 130;                               // y of layer-0 root (clears corner panels)
+      const LEFT = 70;
+
+      // a "box unit" = a team (or the 未分组 bucket) drawn as a grid box.
+      type BoxUnit = {
+        key: string; isOrphan: boolean;
+        members: Session[];                          // grid order: lead, deputy, …
+        cols: number; rows: number; w: number; h: number;
+        x: number; y: number;                        // top-left, filled below
+      };
+      const mkBox = (key: string, isOrphan: boolean, members: Session[]): BoxUnit => {
+        const n = Math.max(1, members.length);
+        const cols = Math.ceil(Math.sqrt(n));
+        const rows = Math.ceil(n / cols);
+        return {
+          key, isOrphan, members, cols, rows,
+          w: cols * cellW + 2 * BOX_PAD,
+          h: rows * cellH + 2 * BOX_PAD + BOX_LABEL,
+          x: 0, y: 0,
+        };
+      };
+      const boxes: BoxUnit[] = teamTrees.map(tt =>
+        mkBox(tt.key, false, [tt.lead, ...(tt.deputy ? [tt.deputy] : []), ...tt.members]));
+      // orphan bucket — every underivable agent in its own 未分组 box so
+      // none are ever dropped from the chart.
+      if (orphans.length > 0) {
+        boxes.push(mkBox('未分组', true,
+          [...orphans].sort((a, b) => a.alias.localeCompare(b.alias))));
+      }
+
+      // lay boxes into a 2D wrapped grid (Vincent iter 3: team boxes need
+      // not sit in one long row — wrap into rows so the chart stays
+      // compact / screenshot-friendly even with many teams).
+      const layer2Y = TOP + 2 * HEAD_ROW;
+      const BOX_ROW_GAP = 40;                        // vertical gap between box rows
+      const ROW_W_TARGET = 1240;                     // wrap once a row would exceed this
+      let rowX = LEFT, rowY = layer2Y, rowMaxH = 0, rowCount = 0;
+      let lastRowBottom = layer2Y;
+      for (const b of boxes) {
+        if (rowCount > 0 && rowX + b.w > LEFT + ROW_W_TARGET) {
+          rowY += rowMaxH + BOX_ROW_GAP;             // wrap to next box row
+          rowX = LEFT; rowMaxH = 0; rowCount = 0;
+        }
+        b.x = rowX; b.y = rowY;
+        rowX += b.w + BOX_GAP;
+        rowMaxH = Math.max(rowMaxH, b.h);
+        rowCount++;
+        lastRowBottom = rowY + rowMaxH;
+      }
+      // member positions — compact grid inside each box.
+      for (const b of boxes) {
+        b.members.forEach((s, i) => {
+          const col = i % b.cols;
+          const row = Math.floor(i / b.cols);
+          positions[s.alias] = {
+            x: b.x + BOX_PAD + (col + 0.5) * cellW,
+            y: b.y + BOX_LABEL + BOX_PAD + (row + 0.5) * cellH,
+          };
+        });
+      }
+      const boxCentreX = (b: BoxUnit) => b.x + b.w / 2;
+
+      // layer 1: 副指挥, each centred over a contiguous run of boxes.
+      const layer1Y = TOP + HEAD_ROW;
+      const depNodes: { alias: string; x: number; y: number }[] = [];
+      const depPer = deputyCommanders.length > 0
+        ? Math.ceil(Math.max(boxes.length, 1) / deputyCommanders.length)
+        : 0;
+      deputyCommanders.forEach((s, di) => {
+        const run = boxes.slice(di * depPer, di * depPer + depPer);
+        const xs = run.length ? run.map(boxCentreX)
+                              : [LEFT + di * (cellW + BOX_GAP) + cellW / 2];
+        const x = (Math.min(...xs) + Math.max(...xs)) / 2;
+        depNodes.push({ alias: s.alias, x, y: layer1Y });
+        positions[s.alias] = { x, y: layer1Y };
+      });
+
+      // layer 0: root — single 总指挥, else a synthetic 指挥中心.
+      const anchorXs = depNodes.length > 0 ? depNodes.map(d => d.x)
+                      : boxes.length > 0 ? boxes.map(boxCentreX)
+                      : [LEFT + cellW / 2];
+      const rootX = (Math.min(...anchorXs) + Math.max(...anchorXs)) / 2;
+      let synthRoot = false;
+      if (commanders.length === 1) {
+        positions[commanders[0].alias] = { x: rootX, y: TOP };
+      } else {
+        synthRoot = true;
+        // any 总指挥 (0, or >1) spread along layer 0 beside the synth anchor
+        commanders.forEach((c, ci) => {
+          positions[c.alias] = {
+            x: rootX + (ci - (commanders.length - 1) / 2) * (cellW + 28),
+            y: TOP,
+          };
+        });
+      }
+
+      // elbow connectors: root → 副指挥 → team-box top edge (render draws
+      // the right-angle path behind the nodes).
+      const connectors: TreeConnectorLine[] = [];
+      for (const d of depNodes) {
+        connectors.push({ x1: rootX, y1: TOP, x2: d.x, y2: d.y });
+      }
+      boxes.forEach((b, bi) => {
+        let px = rootX, py = TOP;
+        if (depNodes.length > 0) {
+          const di = Math.min(depNodes.length - 1, Math.floor(bi / Math.max(depPer, 1)));
+          px = depNodes[di].x; py = depNodes[di].y;
+        }
+        connectors.push({ x1: px, y1: py, x2: boxCentreX(b), y2: b.y });
+      });
+
+      // synthetic root label (only when there is no single 总指挥)
+      const synthBoxes = synthRoot ? [{ x: rootX, y: TOP, label: '指挥中心' }] : [];
+
+      // team boxes surfaced as groupBoxes — reuses the grid-mode cluster
+      // box render + per-box working/idle/offline pip strip.
+      const teamGroupBoxes = boxes.map(b => {
+        let w = 0, i = 0, o = 0;
+        for (const s of b.members) {
+          const isOn = s.status !== 'offline' || !!sseCount(s);
+          if (s.status === 'working') w++;
+          else if (isOn) i++;
+          else o++;
+        }
+        return {
+          key: b.key, isOrphan: b.isOrphan, count: b.members.length,
+          statuses: { working: w, idle: i, offline: o },
+          x: b.x, y: b.y, w: b.w, h: b.h,
+        };
+      });
+
+      // tree mode is a clean org chart (Vincent iter 4): message flow-links
+      // between nodes in different team boxes tangle as long curves across
+      // the hierarchy and bury the structure. Suppress them in tree — the
+      // right-angle report connectors (treeConnectors) carry the org lines.
+
+      // content bottom for auto-fit zoom — bottom of the LAST box row.
+      // Boxes wrap into multiple rows (iter 3), so this must track the
+      // wrapped lastRowBottom, not layer2Y + tallest-box.
+      const treeBottom = boxes.length ? lastRowBottom : TOP + HEAD_ROW;
+      const gridContentBottom = treeBottom + 48;
+
+      // iter5 (Vincent UX): full content bounding box over every team box
+      // + every node. The auto-fit effect uses this to scale the org chart
+      // to fit BOTH viewBox dimensions AND centre it. Pre-iter5 auto-fit
+      // only fit height and left-anchored the chart (LEFT=70), so the tree
+      // hugged the top-left corner with dead canvas down the right side.
+      const treeBX: number[] = [], treeBY: number[] = [];
+      for (const b of boxes) { treeBX.push(b.x, b.x + b.w); treeBY.push(b.y, b.y + b.h); }
+      for (const a of Object.keys(positions)) { treeBX.push(positions[a].x); treeBY.push(positions[a].y); }
+      // TREE_M pads the raw box/node extent so node radii + label drops
+      // (root/副指挥 sit above the boxes) never clip at the fitted edge.
+      const TREE_M = 52;
+      const treeContentBox: { x: number; y: number; w: number; h: number } | null = treeBX.length
+        ? {
+            x: Math.min(...treeBX) - TREE_M,
+            y: Math.min(...treeBY) - TREE_M,
+            w: Math.max(...treeBX) - Math.min(...treeBX) + 2 * TREE_M,
+            h: Math.max(...treeBY) - Math.min(...treeBY) + 2 * TREE_M,
+          }
+        : null;
+
+      return {
+        onlineNodes: online,
+        offlineNodes: offline,
+        nodePositions: positions,
+        flowLinks: [],
+        activeAliases: new Set<string>(),
+        groupKeys,
+        groupBoxes: teamGroupBoxes,
+        gridContentBottom,
+        treeConnectors: { lines: connectors, synthLabels: synthBoxes, synthRoot } as TreeLayout,
+        treeContentBox,
       };
     }
 
@@ -1006,6 +1303,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       groupBoxes: [] as { key: string; isOrphan?: boolean; count: number; statuses: { working: number; idle: number; offline: number }; x: number; y: number; w: number; h: number }[],
       // ring fits within VIEWBOX_H by construction (offlineRadius=325 + centre at y=330)
       gridContentBottom: 0,
+      treeConnectors: { lines: [], synthLabels: [], synthRoot: false } as TreeLayout,
+      treeContentBox: null as { x: number; y: number; w: number; h: number } | null,
     };
   }, [messages, sessions, sseSessions, layout, nodeScale]);
 
@@ -1026,7 +1325,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   const vendorDist = useMemo(() => {
     const tally = new Map<string, { initial: string; count: number; color: string }>();
     for (const s of [...onlineNodes, ...offlineNodes]) {
-      const v = vendorForModel(s.model);
+      const v = vendorForModel(s.model, s.runtime);
       const key = v.id === 'unknown' ? '?' : v.initial;
       const cur = tally.get(key);
       if (cur) cur.count++;
@@ -1175,7 +1474,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // a single-axis paint lift. Post-R674 inline filter applies the
   // same 2+4 stride at pal.legendAccent tint as R667/R668 chrome-
   // control siblings.
-  const [hoveredLayout, setHoveredLayout] = useState<'ring' | 'grid' | null>(null);
+  const [hoveredLayout, setHoveredLayout] = useState<'ring' | 'grid' | 'tree' | null>(null);
   // R675 — hover state for the chrome nodeSize S/M/L segmented trio.
   // Value-typed (single state covers all three buttons) drives the
   // multi-layer halo filter completing the chrome strip's nodeSize
@@ -1328,7 +1627,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // {zoom,x,y} persists to localStorage (same sticky pattern as brand flag).
   const VIEWBOX_W = 1000;
   const VIEWBOX_H = 680;
-  const ZOOM_MIN = 0.5;
+  // tree mode can render a tall multi-row org chart — it needs a lower
+  // zoom-out floor than ring/grid so the whole tree can fit (Vincent iter
+  // 3: "缩放最多 50%" couldn't shrink the tree enough).
+  const ZOOM_MIN = layout === 'tree' ? 0.3 : 0.5;
   const ZOOM_MAX = 4;
   const containerRef = useRef<HTMLDivElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
@@ -1368,7 +1670,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // keeps its own R184 rotation animation (different gesture, semantic).
   // Node-size S/M/L keep their R171 layoutSwitching crossfade (already
   // gestural). Type union grows but the helper signature stays one-arg.
-  type ChromePop = 'zoom-in' | 'zoom-out' | 'layout-ring' | 'layout-grid' | 'fullscreen' | 'size-S' | 'size-M' | 'size-L';
+  type ChromePop = 'zoom-in' | 'zoom-out' | 'layout-ring' | 'layout-grid' | 'layout-tree' | 'fullscreen' | 'size-S' | 'size-M' | 'size-L';
   const [chromePopping, setChromePopping] = useState<ChromePop | null>(null);
   const popChrome = (which: ChromePop) => {
     setChromePopping(which);
@@ -1442,7 +1744,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       autoFitDoneRef.current = true;
       return;
     }
-    if (layout !== 'grid' || sessions.length === 0 || !gridContentBottom) return;
+    if (sessions.length === 0) return;
+    // iter5 (Vincent UX): tree auto-fit scales the org chart to fit BOTH
+    // viewBox dimensions and CENTRES it. Pre-iter5 the shared grid path
+    // only fit height and left-anchored the chart, so the tree hugged the
+    // top-left corner with dead canvas down the right side.
+    if (layout === 'tree') {
+      if (!treeContentBox) return;
+      const b = treeContentBox;
+      if (b.w <= 0 || b.h <= 0) { autoFitDoneRef.current = true; return; }
+      const pad = 24;
+      const z = Math.max(ZOOM_MIN, Math.min(
+        1, (VIEWBOX_W - 2 * pad) / b.w, (VIEWBOX_H - 2 * pad) / b.h));
+      setView({
+        zoom: z,
+        x: VIEWBOX_W / 2 - (b.x + b.w / 2) * z,
+        y: VIEWBOX_H / 2 - (b.y + b.h / 2) * z,
+      });
+      autoFitDoneRef.current = true;
+      return;
+    }
+    if (layout !== 'grid' || !gridContentBottom) return;
     if (gridContentBottom <= VIEWBOX_H) {
       autoFitDoneRef.current = true; // no overflow → no fit needed
       return;
@@ -1450,7 +1772,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     const fitZoom = Math.max(ZOOM_MIN, Math.min(1, VIEWBOX_H / gridContentBottom));
     setView({ zoom: fitZoom, x: 0, y: 0 });
     autoFitDoneRef.current = true;
-  }, [layout, sessions.length, gridContentBottom, hadPersistedViewOnMount]);
+  }, [layout, sessions.length, gridContentBottom, treeContentBox, hadPersistedViewOnMount]);
 
   // persist view
   useEffect(() => {
@@ -1594,13 +1916,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // when the operator invokes fit-to-content via the hub click (R52),
   // chrome button, `f` key, or palette command.
   const fitView = useCallback(() => {
+    setSmoothView(true);
+    setTimeout(() => setSmoothView(false), 350);
+    // iter5: tree fits-and-centres via its content bbox (sister to the
+    // auto-fit effect); grid/ring keep the height-only fit-to-content.
+    if (layout === 'tree' && treeContentBox && treeContentBox.w > 0 && treeContentBox.h > 0) {
+      const b = treeContentBox;
+      const pad = 24;
+      const z = Math.max(ZOOM_MIN, Math.min(
+        1, (VIEWBOX_W - 2 * pad) / b.w, (VIEWBOX_H - 2 * pad) / b.h));
+      setView({
+        zoom: z,
+        x: VIEWBOX_W / 2 - (b.x + b.w / 2) * z,
+        y: VIEWBOX_H / 2 - (b.y + b.h / 2) * z,
+      });
+      return;
+    }
     const zoom = !gridContentBottom || gridContentBottom <= VIEWBOX_H
       ? 1
       : Math.max(ZOOM_MIN, Math.min(1, VIEWBOX_H / gridContentBottom));
-    setSmoothView(true);
-    setTimeout(() => setSmoothView(false), 350);
     setView({ zoom, x: 0, y: 0 });
-  }, [gridContentBottom]);
+  }, [gridContentBottom, layout, treeContentBox]);
 
   // R74: listen for layout + view palette commands. Sister to R69's
   // pin listener — palette dispatches a CustomEvent, the reducer here
@@ -2394,11 +2730,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             data-topo-chrome-wrapper-halo-family="layout"
           >
             <button
-              onClick={() => { popChrome('layout-ring'); if (layout !== 'ring') toggleLayout(); }}
+              onClick={() => { popChrome('layout-ring'); selectLayout('ring'); }}
               onMouseEnter={() => setHoveredLayout('ring')}
               onMouseLeave={() => setHoveredLayout((prev) => prev === 'ring' ? null : prev)}
               aria-pressed={layout === 'ring'}
-              title="Ring layout (l to toggle)"
+              title="Ring layout (l to cycle)"
               data-topo-chrome-layout="ring"
               data-topo-chrome-layout-active={layout === 'ring' ? 'true' : 'false'}
               data-topo-chrome-layout-ring-popping={chromePopping === 'layout-ring' ? 'true' : 'false'}
@@ -2533,11 +2869,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               Ring
             </button>
             <button
-              onClick={() => { popChrome('layout-grid'); if (layout !== 'grid') toggleLayout(); }}
+              onClick={() => { popChrome('layout-grid'); selectLayout('grid'); }}
               onMouseEnter={() => setHoveredLayout('grid')}
               onMouseLeave={() => setHoveredLayout((prev) => prev === 'grid' ? null : prev)}
               aria-pressed={layout === 'grid'}
-              title="Grid layout (l to toggle)"
+              title="Grid layout (l to cycle)"
               data-topo-chrome-layout="grid"
               data-topo-chrome-layout-active={layout === 'grid' ? 'true' : 'false'}
               data-topo-chrome-layout-grid-popping={chromePopping === 'layout-grid' ? 'true' : 'false'}
@@ -2585,6 +2921,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             >
               Grid
             </button>
+            {/* #170 tree-view MVP — third segment in the layout control.
+               Org-chart view: 总指挥/副指挥 root → teams → members.
+               Mirrors the Grid button's border-l divider + active/
+               inactive paint vocabulary; the heavier R-series polish
+               (halo layers, hover-fw preview attrs) is deferred to the
+               RFC-017 formal version. */}
+            <button
+              onClick={() => { popChrome('layout-tree'); selectLayout('tree'); }}
+              onMouseEnter={() => setHoveredLayout('tree')}
+              onMouseLeave={() => setHoveredLayout((prev) => prev === 'tree' ? null : prev)}
+              aria-pressed={layout === 'tree'}
+              title="Tree layout — org chart (l to cycle)"
+              data-topo-chrome-layout="tree"
+              data-topo-chrome-layout-active={layout === 'tree' ? 'true' : 'false'}
+              data-topo-chrome-layout-tree-popping={chromePopping === 'layout-tree' ? 'true' : 'false'}
+              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide hover:brightness-[1.15] active:scale-95 transform-gpu ${layout === 'tree' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 hover:text-cyan-200 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15 hover:font-medium'} ${chromePopping === 'layout-tree' ? ' anet-chrome-pop' : ''}`}
+              style={{
+                borderColor: pal.containerBorder,
+                transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out, transform 150ms ease-out, font-weight 150ms ease, filter 150ms ease',
+                filter: hoveredLayout === 'tree' ? `drop-shadow(0 0 2px ${pal.legendAccent}80) drop-shadow(0 0 4px ${pal.legendAccent}40) brightness(1.15)` : undefined,
+              }}
+            >
+              Tree
+            </button>
           </div>
           {/* R79: working + online count chips become hover affordances —
               extends R77's chip-hover pattern to status counts. Hover the
@@ -3506,7 +3866,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // unknowns folded to '?').
             const matchAliases = [...onlineNodes, ...offlineNodes]
               .filter(s => {
-                const v = vendorForModel(s.model);
+                const v = vendorForModel(s.model, s.runtime);
                 return (v.id === 'unknown' ? '?' : v.initial) === pinnedVendor;
               })
               .map(s => s.alias);
@@ -3776,7 +4136,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 if (gk !== pinnedGroup) return false;
               }
               if (pinnedVendor) {
-                const v = vendorForModel(s.model);
+                const v = vendorForModel(s.model, s.runtime);
                 const initial = v.id === 'unknown' ? '?' : v.initial;
                 if (initial !== pinnedVendor) return false;
               }
@@ -3974,7 +4334,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // UI shows "A:3" should hover-explain which 3.
                 const aliases = [...onlineNodes, ...offlineNodes]
                   .filter(s => {
-                    const vid = vendorForModel(s.model);
+                    const vid = vendorForModel(s.model, s.runtime);
                     return (vid.id === 'unknown' ? '?' : vid.initial) === v.initial;
                   })
                   .map(s => s.alias);
@@ -6400,6 +6760,70 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             });
           })()}
 
+          {/* #170 tree-view MVP — org-chart elbow connectors. Tree layout
+              only (treeConnectors.lines is empty in ring/grid). Rendered
+              here, behind the nodes + labels, as right-angle polylines:
+              vertical drop from the parent, horizontal at the mid-y, then
+              vertical into the child. pointer-events off so they never
+              intercept a node click. The synthetic-node chips (指挥中心
+              root / 未分组 bucket) render here too — they have no backing
+              session so the node-map below skips them. */}
+          {layout === 'tree' && treeConnectors.lines.map((ln, i) => {
+            const midY = (ln.y1 + ln.y2) / 2;
+            // drop from just below the parent ring to just above the child
+            // ring — keeps the connector clear of the avatars themselves.
+            const startY = ln.y1;
+            const endY = ln.y2;
+            const d = `M ${ln.x1} ${startY} L ${ln.x1} ${midY} L ${ln.x2} ${midY} L ${ln.x2} ${endY}`;
+            return (
+              <path
+                key={`tree-conn-${i}`}
+                d={d}
+                fill="none"
+                stroke={pal.containerBorder}
+                strokeWidth={1.5}
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                opacity={0.55}
+                style={{ pointerEvents: 'none' }}
+              />
+            );
+          })}
+          {layout === 'tree' && treeConnectors.synthLabels.map((s, i) => {
+            // synthetic node chip: a small pill with a centred label, drawn
+            // at the synthetic node's slot. No status ring → never counted
+            // by the node↔node overlap test; sized to clear neighbours.
+            const chipW = Math.max(58, s.label.length * 13 + 20);
+            const chipH = 26;
+            return (
+              <g key={`tree-synth-${i}`} style={{ pointerEvents: 'none' }} data-topo-tree-synth={s.label}>
+                <rect
+                  x={s.x - chipW / 2}
+                  y={s.y - chipH / 2}
+                  width={chipW}
+                  height={chipH}
+                  rx={13}
+                  fill={pal.containerBg}
+                  stroke={pal.containerBorder}
+                  strokeWidth={1.25}
+                  strokeDasharray="3 3"
+                  opacity={0.92}
+                />
+                <text
+                  x={s.x}
+                  y={s.y}
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                  fontSize={12}
+                  fontWeight={600}
+                  fill={pal.legendAccent}
+                >
+                  {s.label}
+                </text>
+              </g>
+            );
+          })}
+
           {/* #111: prefix-group boundary boxes (Vincent 4722). Grid layout
               only — groupBoxes is empty in ring mode. Rendered behind the
               flow links + nodes; pointer-events off so they never intercept
@@ -10105,7 +10529,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   opacity: hoveredEdgeEndpoints && !hoveredEdgeEndpoints.has(session.alias) && chatAlias !== session.alias
                     ? 0.28
                     : activeVendor && chatAlias !== session.alias && (() => {
-                        const v = vendorForModel(session.model);
+                        const v = vendorForModel(session.model, session.runtime);
                         const initial = v.id === 'unknown' ? '?' : v.initial;
                         return initial !== activeVendor;
                       })()
@@ -11370,7 +11794,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 {(() => {
                   const ar = Math.round((isOnline ? 14 : 10) * nodeScale);
                   const size = radius * 2;
-                  const vendor = vendorForModel(session.model);
+                  const vendor = vendorForModel(session.model, session.runtime);
                   const internByAlias = /书生|书小生|intern/i.test(session.alias);
 
                   if (isIntern || internByAlias || vendor.logo) {
@@ -12624,7 +13048,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     gate as showFullLabel; dense fleets already have
                     too much per-node chrome competing. */}
                 {!reducedMotion && hoveredAlias === session.alias && !denseLayout && (() => {
-                  const v = vendorForModel(session.model);
+                  const v = vendorForModel(session.model, session.runtime);
                   const rt = runtimeIdentity(session.runtime);
                   const flipLeft = pos.x > VIEWBOX_W * 0.65;
                   const detailW = 192;