frontend/src/components/dashboard/Dashboard.tsx

@@ -83,7 +83,7 @@ const railIcon: Record<Tier, React.ReactNode> = {
   infra: (<svg width="20" height="20" viewBox="0 0 20 20"><rect x="3.5" y="4" width="13" height="5" rx="1.4" stroke="currentColor" strokeWidth="1.4" fill="none" /><rect x="3.5" y="11" width="13" height="5" rx="1.4" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="6.4" cy="6.5" r="1" fill="currentColor" /><circle cx="6.4" cy="13.5" r="1" fill="currentColor" /></svg>),
 };
 const TIER_TABS: { key: Tier; label: string }[] = [
-  { key: "world", label: "WORLD" }, { key: "claw", label: "AGENT" }, { key: "infra", label: "INFRA" },
+  { key: "world", label: "VIZ" }, { key: "claw", label: "AGENT" }, { key: "infra", label: "INFRA" },
 ];
 const companyIcon = (size: number) => (
   <svg width={size} height={size} viewBox="0 0 20 20"><rect x="3.5" y="5" width="6" height="11" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" /><rect x="10.5" y="2.5" width="6" height="13.5" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
@@ -452,6 +452,26 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
   const allAgents = orgs.flatMap((o) => o.companies.flatMap((c) => c.teams.flatMap((t) => t.agents)));
   // World: the full expandable org→company→team→agent forest. Agents page: a flat list.
   const worldRoots: TreeItem[] = orgs.map(orgNode);
+  // World canvas: when a node is selected, prune to just the branch that
+  // contains it — sibling orgs/companies/teams disappear so the visualization
+  // frames the selection alone. The left tree keeps the full forest.
+  const narrowRoots = (roots: TreeItem[], sel: string | null): TreeItem[] => {
+    if (!sel) return roots;
+    const prune = (n: TreeItem): TreeItem | null => {
+      if (n.id === sel) return n;
+      for (const c of n.children ?? []) {
+        const found = prune(c);
+        if (found) return { ...n, children: [found] };
+      }
+      return null;
+    };
+    for (const r of roots) {
+      const found = prune(r);
+      if (found) return [found];
+    }
+    return roots;
+  };
+  const worldCanvasRoots: TreeItem[] = narrowRoots(worldRoots, worldSel);
   const treeRoots: TreeItem[] = isClaw ? allAgents.map(clawNode) : worldRoots;
   const treeActiveId = isClaw ? agentId : worldSel;
   const treeAutoExpand: string[] = [];
@@ -496,7 +516,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
         </Link>
         <div style={{ width: 1, height: 22, background: "rgba(255,255,255,.08)" }} />
         <div style={{ display: "flex", alignItems: "center", gap: 6, fontFamily: mono, fontSize: 12 }}>
-          <span style={crumbStyle(isWorld)} onClick={() => setTier("world")}>Large World</span>
+          <span style={crumbStyle(isWorld)} onClick={() => setTier("world")}>Visualizations</span>
           <span style={{ color: "#3a3a40" }}>/</span>
           <span style={crumbStyle(isClaw)} onClick={() => setTier("claw")}>Agents</span>
           <span style={{ color: "#3a3a40" }}>/</span>
@@ -540,7 +560,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
             <div style={{ padding: "16px 16px 12px", borderBottom: "1px solid rgba(255,255,255,.06)", display: "flex", alignItems: "flex-start", gap: 8 }}>
               <div style={{ flex: 1, minWidth: 0 }}>
                 <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", color: "#5a5a62", marginBottom: 6 }}>{orgs.length} ORG{orgs.length === 1 ? "" : "S"} · {allAgents.length} AGENTS</div>
-                <div style={{ fontSize: 18, fontWeight: 700, color: "#f3f3f5", letterSpacing: "-.01em" }}>Large World</div>
+                <div style={{ fontSize: 18, fontWeight: 700, color: "#f3f3f5", letterSpacing: "-.01em" }}>Visualizations</div>
               </div>
               <button type="button" onClick={() => { setSelectMode((v) => { if (v) setSelectedAgents(new Set()); return !v; }); }} title="Select to manage" aria-label="Select to manage" style={{ flex: "none", width: 34, height: 34, borderRadius: 9, border: `1px solid ${selectMode ? "rgba(255,111,97,.5)" : "rgba(255,255,255,.12)"}`, background: selectMode ? "rgba(255,111,97,.12)" : "transparent", color: selectMode ? "#ff6f61" : "#9a9aa2", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Wrench aria-hidden size={16} /></button>
             </div>
@@ -589,7 +609,7 @@ export function Dashboard({ user, orgs, claws }: { user?: { display_name?: strin
             <>
               {/* Graph stage — condensed by the right slide-out's width. */}
               <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: "var(--world-width, 0px)", background: "radial-gradient(120% 90% at 55% 38%, #0e0e13 0%, #08080a 70%)", transition: "right var(--duration-normal) var(--ease-app)" }}>
-                <WorldCanvas roots={worldRoots} expanded={expanded} onToggleExpand={toggleExpand} selectedId={worldSel} onSelect={onWorldSelect} onOpenRuns={() => setRunsOpen(true)} />
+                <WorldCanvas roots={worldCanvasRoots} expanded={expanded} onToggleExpand={toggleExpand} selectedId={worldSel} onSelect={onWorldSelect} onOpenRuns={() => setRunsOpen(true)} />
                 {/* Open the slide-out (top-right) when it's closed. */}
                 {!worldPanelOpen ? (
                   <button type="button" aria-label="Open panel" title="Panel" onClick={() => setWorldPanelOpen(true)} style={{ position: "absolute", top: 14, right: 16, zIndex: 50, width: 38, height: 38, borderRadius: "50%", border: "1px solid rgba(255,111,97,.4)", background: "rgba(255,111,97,.08)", color: "#ff6f61", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}><PanelRight aria-hidden size={19} /></button>