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

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,219 @@ 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 };
+      });
+
+      // ---- swimlane org layout (Vincent dispatch: "一行一个团队,成员
+      // 不换行,最左边放总指挥和副指挥") ------------------------------------
+      // Each team is ONE horizontal lane — a wide box whose members sit in
+      // a single NON-WRAPPING row. Lanes stack top-to-bottom (one team per
+      // row). The command layer (总指挥 + 副指挥) is pinned in its own box
+      // down the left edge. Reverses the iter1–3 2D box-grid; the iter5
+      // treeContentBox auto-fit still scales + centres the whole chart.
+      const nodeR = Math.round(26 * nodeScale);
+      const cellW = Math.max(118, 2 * nodeR + 66);   // member slot — node + dense label
+      const BOX_LABEL = 26;                          // box top label band
+      const LANE_BODY = Math.max(82, 2 * nodeR + 36);// member-row band height
+      const LANE_H = BOX_LABEL + LANE_BODY;          // full lane box height
+      const LANE_GAP = 16;                           // vertical gap between lanes
+      const BOX_PAD = 14;                            // lane inner side padding
+      const CMD_W = Math.max(150, 2 * nodeR + 100);  // command column width
+      const CMD_GAP = 44;                            // gap: command column → lanes
+      const CMD_SLOT = Math.max(116, 2 * nodeR + 64);// command node vertical pitch
+      const TOP = 92;
+      const LEFT = 44;
+      const laneX0 = LEFT + CMD_W + CMD_GAP;         // x where team lanes start
+
+      // ordered lanes: one per team (teamTrees is already alias-sorted) +
+      // a trailing 未分组 lane collecting every orphan so none are dropped.
+      type Lane = { key: string; isOrphan: boolean; members: Session[] };
+      const lanes: Lane[] = teamTrees.map(tt => ({
+        key: tt.key, isOrphan: false,
+        members: [tt.lead, ...(tt.deputy ? [tt.deputy] : []), ...tt.members],
+      }));
+      if (orphans.length > 0) {
+        lanes.push({
+          key: '未分组', isOrphan: true,
+          members: [...orphans].sort((a, b) => a.alias.localeCompare(b.alias)),
+        });
+      }
+
+      // each lane = a wide box; its members in a single row inside it.
+      const laneStep = LANE_H + LANE_GAP;
+      const laneBoxes = lanes.map((lane, i) => {
+        const y = TOP + i * laneStep;
+        const w = 2 * BOX_PAD + Math.max(1, lane.members.length) * cellW;
+        lane.members.forEach((s, j) => {
+          positions[s.alias] = {
+            x: laneX0 + BOX_PAD + (j + 0.5) * cellW,
+            y: y + BOX_LABEL + LANE_BODY / 2,
+          };
+        });
+        return { lane, x: laneX0, y, w, h: LANE_H };
+      });
+      const laneBlockH = lanes.length ? lanes.length * laneStep - LANE_GAP : LANE_H;
+      const laneBlockBottom = TOP + laneBlockH;
+
+      // command column — 总指挥 + 副指挥 stacked in a compact box pinned to
+      // the far left, vertically centred against the lane block.
+      const cmdMembers: Session[] = [...commanders, ...deputyCommanders];
+      const cmdX = LEFT + CMD_W / 2;
+      const cmdH = cmdMembers.length > 0 ? BOX_LABEL + cmdMembers.length * CMD_SLOT : 0;
+      const cmdBox = cmdMembers.length > 0
+        ? { x: LEFT, y: TOP + Math.max(0, (laneBlockH - cmdH) / 2), w: CMD_W, h: cmdH }
+        : null;
+      if (cmdBox) {
+        cmdMembers.forEach((s, i) => {
+          positions[s.alias] = {
+            x: cmdX,
+            y: cmdBox.y + BOX_LABEL + (i + 0.5) * CMD_SLOT,
+          };
+        });
+      }
+
+      // org link: a light connector from the command column to each lane.
+      const connectors: TreeConnectorLine[] = [];
+      if (cmdBox) {
+        const cmdRight = cmdBox.x + cmdBox.w;
+        const cmdMidY = cmdBox.y + cmdBox.h / 2;
+        for (const lb of laneBoxes) {
+          connectors.push({ x1: cmdRight, y1: cmdMidY, x2: lb.x, y2: lb.y + LANE_H / 2 });
+        }
+      }
+
+      // swimlane has no synthetic root chip — the command box (labelled
+      // 指挥中心 when there is no single 总指挥) is the command layer.
+      const synthRoot = false;
+      const synthBoxes: { x: number; y: number; label: string }[] = [];
+
+      // lanes + command column surfaced as groupBoxes — reuses the cluster
+      // box render + per-box working/idle/offline pip strip.
+      const tally = (members: Session[]) => {
+        let w = 0, i = 0, o = 0;
+        for (const s of members) {
+          const isOn = s.status !== 'offline' || !!sseCount(s);
+          if (s.status === 'working') w++;
+          else if (isOn) i++;
+          else o++;
+        }
+        return { working: w, idle: i, offline: o };
+      };
+      const teamGroupBoxes = [
+        ...(cmdBox ? [{
+          key: commanders.length === 1 ? commanders[0].alias : '指挥中心',
+          isOrphan: false, count: cmdMembers.length,
+          statuses: tally(cmdMembers),
+          x: cmdBox.x, y: cmdBox.y, w: cmdBox.w, h: cmdBox.h,
+        }] : []),
+        ...laneBoxes.map(lb => ({
+          key: lb.lane.key, isOrphan: lb.lane.isOrphan,
+          count: lb.lane.members.length,
+          statuses: tally(lb.lane.members),
+          x: lb.x, y: lb.y, w: lb.w, h: lb.h,
+        })),
+      ];
+
+      // content bottom for auto-fit — bottom of the lowest box.
+      const treeBottom = Math.max(
+        laneBlockBottom,
+        cmdBox ? cmdBox.y + cmdBox.h : TOP + LANE_H,
+      );
+      const gridContentBottom = treeBottom + 48;
+
+      // iter5 (Vincent UX): full content bounding box → the auto-fit effect
+      // scales the chart to fit BOTH viewBox dimensions AND centres it.
+      const treeBX: number[] = [], treeBY: number[] = [];
+      for (const gb of teamGroupBoxes) { treeBX.push(gb.x, gb.x + gb.w); treeBY.push(gb.y, gb.y + gb.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
+      // 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 +1253,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 +1275,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 +1424,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 +1577,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 +1620,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 +1694,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 +1722,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 +1866,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 +2680,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 +2819,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 +2871,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 +3816,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 +4086,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 +4284,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 +6710,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 +10479,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 +11744,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 +12998,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;