clawport-ui 0.4.7 → 0.5.1

package/components/AgentNode.tsx

@@ -10,6 +10,8 @@ export function AgentNode({ data, selected }: NodeProps) {
   const hasCrons = agent.crons && agent.crons.length > 0
   const hasErrors = hasCrons && agent.crons.some((c: CronJob) => c.status === "error")
   const cronCount = hasCrons ? agent.crons.length : 0
+  const toolCount = agent.tools?.length ?? 0
+  const reportCount = agent.directReports?.length ?? 0
 
   return (
     <div
@@ -25,14 +27,13 @@ export function AgentNode({ data, selected }: NodeProps) {
         borderBottom: `1px solid ${selected ? "var(--accent)" : "var(--separator)"}`,
         borderLeft: `1px solid ${selected ? "var(--accent)" : "var(--separator)"}`,
         padding: "var(--space-3) var(--space-4)",
-        minWidth: 200,
-        maxWidth: 220,
+        width: 260,
         cursor: "pointer",
         position: "relative",
         boxShadow: selected ? "0 0 0 1px var(--accent), var(--shadow-card)" : "var(--shadow-card)",
       }}
     >
-      {/* Emoji + Name row */}
+      {/* Emoji + Name + Title row */}
       <div
         style={{
           display: "flex",
@@ -42,75 +43,119 @@ export function AgentNode({ data, selected }: NodeProps) {
         }}
       >
         <AgentAvatar agent={agent} size={30} borderRadius={8} />
-        <div
-          style={{
-            fontSize: "var(--text-body)",
-            fontWeight: "var(--weight-semibold)",
-            color: "var(--text-primary)",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-          }}
-        >
-          {agent.name}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: "var(--text-body)",
+              fontWeight: "var(--weight-semibold)",
+              color: "var(--text-primary)",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              lineHeight: "var(--leading-tight)",
+            }}
+          >
+            {agent.name}
+          </div>
+          <div
+            style={{
+              fontSize: "var(--text-caption2)",
+              color: agent.color,
+              opacity: 0.85,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              marginTop: 1,
+            }}
+          >
+            {agent.title}
+          </div>
         </div>
       </div>
 
-      {/* Title */}
-      <div
-        style={{
-          fontSize: "var(--text-caption1)",
-          color: "var(--text-secondary)",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          marginTop: 1,
-        }}
-      >
-        {agent.title}
-      </div>
-
-      {/* Description snippet */}
+      {/* Description — allow 2 lines */}
       {agent.description && (
         <div
           style={{
             fontSize: "var(--text-caption2)",
+            lineHeight: 1.4,
             color: "var(--text-tertiary)",
-            whiteSpace: "nowrap",
+            marginTop: "var(--space-1)",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
             overflow: "hidden",
-            textOverflow: "ellipsis",
-            marginTop: 2,
           }}
         >
           {agent.description}
         </div>
       )}
 
-      {/* Cron health row */}
-      {hasCrons && (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 4,
-            marginTop: "var(--space-2)",
-            fontSize: "var(--text-caption2)",
-            color: hasErrors ? "var(--system-red)" : "var(--system-green)",
-          }}
-        >
-          <div
-            className={hasErrors ? "animate-error-pulse" : ""}
+      {/* Stats row */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--space-2)",
+          marginTop: "var(--space-2)",
+          flexWrap: "wrap",
+        }}
+      >
+        {toolCount > 0 && (
+          <span
             style={{
-              width: 6,
-              height: 6,
-              borderRadius: "50%",
-              background: hasErrors ? "var(--system-red)" : "var(--system-green)",
-              flexShrink: 0,
+              fontSize: "var(--text-caption2)",
+              fontWeight: "var(--weight-medium)",
+              color: "var(--text-quaternary)",
+              background: "var(--fill-quaternary)",
+              padding: "1px 7px",
+              borderRadius: 10,
             }}
-          />
-          {cronCount} cron{cronCount !== 1 ? "s" : ""} · {hasErrors ? "errors" : "healthy"}
-        </div>
-      )}
+          >
+            {toolCount} tools
+          </span>
+        )}
+        {reportCount > 0 && (
+          <span
+            style={{
+              fontSize: "var(--text-caption2)",
+              fontWeight: "var(--weight-medium)",
+              color: "var(--text-quaternary)",
+              background: "var(--fill-quaternary)",
+              padding: "1px 7px",
+              borderRadius: 10,
+            }}
+          >
+            {reportCount} reports
+          </span>
+        )}
+        {hasCrons && (
+          <span
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              fontSize: "var(--text-caption2)",
+              fontWeight: "var(--weight-medium)",
+              color: hasErrors ? "var(--system-red)" : "var(--system-green)",
+              background: hasErrors ? "var(--system-red)10" : "var(--system-green)10",
+              padding: "1px 7px",
+              borderRadius: 10,
+            }}
+          >
+            <span
+              className={hasErrors ? "animate-error-pulse" : ""}
+              style={{
+                width: 5,
+                height: 5,
+                borderRadius: "50%",
+                background: hasErrors ? "var(--system-red)" : "var(--system-green)",
+              }}
+            />
+            {cronCount} cron{cronCount !== 1 ? "s" : ""}
+          </span>
+        )}
+      </div>
 
       {/* Handles - invisible */}
       <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
@@ -119,4 +164,36 @@ export function AgentNode({ data, selected }: NodeProps) {
   )
 }
 
-export const nodeTypes = { agentNode: AgentNode }
+function TeamGroupNode({ data }: NodeProps) {
+  const { label, color } = data as { label: string; color?: string } & Record<string, unknown>
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 10,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          fontSize: "var(--text-caption2)",
+          fontWeight: "var(--weight-semibold)",
+          letterSpacing: "var(--tracking-wide)",
+          textTransform: "uppercase",
+          color: color ?? "var(--text-tertiary)",
+          userSelect: "none",
+          pointerEvents: "none",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export const nodeTypes = { agentNode: AgentNode, teamGroup: TeamGroupNode }

package/components/GridView.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import type { Agent, CronJob } from "@/lib/types"
+import { buildTeams } from "@/lib/teams"
 import { AgentAvatar } from "@/components/AgentAvatar"
 
 interface GridViewProps {
@@ -16,45 +17,6 @@ function worstStatus(statuses: CronJob["status"][]): CronJob["status"] {
   return "idle"
 }
 
-interface Team {
-  manager: Agent
-  members: Agent[]
-}
-
-function buildTeams(agents: Agent[]): { jarvis: Agent | null; teams: Team[]; soloOps: Agent[] } {
-  const jarvis = agents.find((a) => a.reportsTo === null) ?? null
-  if (!jarvis) return { jarvis: null, teams: [], soloOps: [] }
-
-  const byId = new Map(agents.map((a) => [a.id, a]))
-  const teamManagers: Agent[] = []
-  const soloOps: Agent[] = []
-
-  for (const rid of jarvis.directReports) {
-    const r = byId.get(rid)
-    if (!r) continue
-    if (r.directReports.length > 0) {
-      teamManagers.push(r)
-    } else {
-      soloOps.push(r)
-    }
-  }
-
-  const teams: Team[] = teamManagers.map((mgr) => {
-    const members: Agent[] = []
-    const queue = [...mgr.directReports]
-    while (queue.length > 0) {
-      const id = queue.shift()!
-      const a = byId.get(id)
-      if (a) {
-        members.push(a)
-        queue.push(...a.directReports)
-      }
-    }
-    return { manager: mgr, members }
-  })
-
-  return { jarvis, teams, soloOps }
-}
 
 function AgentCard({
   agent,
@@ -269,7 +231,7 @@ function TeamSection({
 }
 
 export function GridView({ agents, crons, selectedId, onSelect }: GridViewProps) {
-  const { jarvis, teams, soloOps } = buildTeams(agents)
+  const { root, teams, soloOps } = buildTeams(agents)
 
   const totalCrons = crons.length
   const healthyCrons = crons.filter((c) => c.status === "ok").length
@@ -286,10 +248,10 @@ export function GridView({ agents, crons, selectedId, onSelect }: GridViewProps)
       }}
     >
       {/* Jarvis hero banner */}
-      {jarvis && (
+      {root && (
         <button
           className="hover-lift focus-ring"
-          onClick={() => onSelect(jarvis)}
+          onClick={() => onSelect(root)}
           style={{
             display: "flex",
             alignItems: "center",
@@ -297,28 +259,28 @@ export function GridView({ agents, crons, selectedId, onSelect }: GridViewProps)
             width: "100%",
             padding: "var(--space-5) var(--space-6)",
             borderRadius: "var(--radius-xl)",
-            background: `linear-gradient(135deg, var(--material-regular) 0%, ${jarvis.color}08 100%)`,
-            border: selectedId === jarvis.id
-              ? `1.5px solid ${jarvis.color}`
+            background: `linear-gradient(135deg, var(--material-regular) 0%, ${root.color}08 100%)`,
+            border: selectedId === root.id
+              ? `1.5px solid ${root.color}`
               : "1px solid var(--separator)",
             cursor: "pointer",
             textAlign: "left",
             marginBottom: "var(--space-6)",
             transition: "all 150ms var(--ease-spring)",
-            boxShadow: selectedId === jarvis.id
-              ? `0 0 0 1px ${jarvis.color}40, 0 8px 32px ${jarvis.color}12`
+            boxShadow: selectedId === root.id
+              ? `0 0 0 1px ${root.color}40, 0 8px 32px ${root.color}12`
               : "var(--shadow-card)",
             position: "relative",
             overflow: "hidden",
           }}
         >
           <AgentAvatar
-            agent={jarvis}
+            agent={root}
             size={64}
             borderRadius={18}
             style={{
-              border: `1.5px solid ${jarvis.color}50`,
-              boxShadow: `0 4px 20px ${jarvis.color}20`,
+              border: `1.5px solid ${root.color}50`,
+              boxShadow: `0 4px 20px ${root.color}20`,
             }}
           />
           <div style={{ flex: 1, minWidth: 0 }}>
@@ -331,19 +293,19 @@ export function GridView({ agents, crons, selectedId, onSelect }: GridViewProps)
                 lineHeight: "var(--leading-tight)",
               }}
             >
-              {jarvis.name}
+              {root.name}
             </div>
             <div
               style={{
                 fontSize: "var(--text-subheadline)",
-                color: jarvis.color,
+                color: root.color,
                 opacity: 0.85,
                 marginTop: 2,
               }}
             >
-              {jarvis.title}
+              {root.title}
             </div>
-            {jarvis.description && (
+            {root.description && (
               <div
                 style={{
                   fontSize: "var(--text-caption1)",
@@ -351,7 +313,7 @@ export function GridView({ agents, crons, selectedId, onSelect }: GridViewProps)
                   marginTop: "var(--space-1)",
                 }}
               >
-                {jarvis.description}
+                {root.description}
               </div>
             )}
           </div>

package/components/OrgMap.tsx

@@ -2,14 +2,17 @@
 import {
   ReactFlow,
   Controls,
+  Panel,
   useNodesState,
   useEdgesState,
   type Node,
   type Edge,
   ConnectionLineType,
 } from "@xyflow/react"
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useState } from "react"
+import dagre from "@dagrejs/dagre"
 import type { Agent, CronJob } from "@/lib/types"
+import { buildTeams } from "@/lib/teams"
 import { nodeTypes } from "@/components/AgentNode"
 
 interface OrgMapProps {
@@ -19,79 +22,40 @@ interface OrgMapProps {
   onNodeClick: (agent: Agent) => void
 }
 
-function buildLayout(
-  agents: Agent[],
-  crons: CronJob[],
-  selectedId: string | null,
-): { nodes: Node[]; edges: Edge[] } {
-  const agentMap = new Map(agents.map((a) => [a.id, a]))
+type MapLayout = "teams" | "hierarchy"
+
+const NODE_W = 260
+const NODE_H = 110
+
+// ── Shared helpers ─────────────────────────────────────────────
+
+function mergeAgentsWithCrons(agents: Agent[], crons: CronJob[]) {
   const withCrons = agents.map((a) => ({
     ...a,
     crons: crons.filter((c) => c.agentId === a.id),
   }))
-  const agentMapWithCrons = new Map(withCrons.map((a) => [a.id, a]))
-
-  // BFS to determine levels
-  const levels: string[][] = []
-  const visited = new Set<string>()
-  const root = agents.find((a) => a.reportsTo === null)
-  if (!root) return { nodes: [], edges: [] }
-
-  let queue = [root.id]
-  while (queue.length > 0) {
-    levels.push([...queue])
-    queue.forEach((id) => visited.add(id))
-    const nextQueue: string[] = []
-    for (const id of queue) {
-      const agent = agentMap.get(id)
-      if (!agent) continue
-      for (const childId of agent.directReports) {
-        if (!visited.has(childId)) nextQueue.push(childId)
-      }
-    }
-    queue = nextQueue
-  }
-
-  // Pick up disconnected agents
-  const disconnected = agents.filter((a) => !visited.has(a.id))
-  if (disconnected.length > 0) levels.push(disconnected.map((a) => a.id))
-
-  const LEVEL_HEIGHT = 200
-  const nodes: Node[] = []
-
-  for (let level = 0; level < levels.length; level++) {
-    const ids = levels[level]
-    const spacing = Math.max(200, Math.min(260, 1600 / Math.max(ids.length, 1)))
-    const totalWidth = ids.length * spacing
-    const startX = 600 - totalWidth / 2 + spacing / 2
-
-    ids.forEach((id, i) => {
-      const agent = agentMapWithCrons.get(id)
-      if (!agent) return
-      nodes.push({
-        id,
-        type: "agentNode",
-        data: agent as unknown as Record<string, unknown>,
-        position: { x: startX + i * spacing - spacing / 2, y: level * LEVEL_HEIGHT + 20 },
-        selected: id === selectedId,
-      })
-    })
-  }
+  return new Map(withCrons.map((a) => [a.id, a]))
+}
 
-  // Build edges -- selected agent's edges get accent color
+function buildEdges(
+  agents: Agent[],
+  selectedId: string | null,
+): Edge[] {
+  const agentMap = new Map(agents.map((a) => [a.id, a]))
   const selectedAgentIds = new Set<string>()
   if (selectedId) {
     selectedAgentIds.add(selectedId)
-    const selectedAgent = agentMap.get(selectedId)
-    if (selectedAgent) {
-      if (selectedAgent.reportsTo) selectedAgentIds.add(selectedAgent.reportsTo)
-      selectedAgent.directReports.forEach((id) => selectedAgentIds.add(id))
+    const sel = agentMap.get(selectedId)
+    if (sel) {
+      if (sel.reportsTo) selectedAgentIds.add(sel.reportsTo)
+      sel.directReports.forEach((id) => selectedAgentIds.add(id))
     }
   }
 
   const edges: Edge[] = []
   for (const agent of agents) {
     for (const childId of agent.directReports) {
+      if (!agentMap.has(childId)) continue
       const isHighlighted =
         selectedId && selectedAgentIds.has(agent.id) && selectedAgentIds.has(childId)
 
@@ -101,29 +65,240 @@ function buildLayout(
         target: childId,
         type: "smoothstep",
         style: {
-          stroke: isHighlighted ? "var(--accent)" : "var(--separator)",
-          strokeWidth: isHighlighted ? 2 : 1.5,
-          opacity: isHighlighted ? 1 : 0.6,
-          strokeDasharray: isHighlighted ? undefined : "6 4",
+          stroke: isHighlighted ? "var(--accent)" : "var(--text-quaternary)",
+          strokeWidth: isHighlighted ? 2.5 : 1.5,
+          opacity: isHighlighted ? 1 : 0.7,
         },
         animated: !!isHighlighted,
       })
     }
   }
+  return edges
+}
+
+// ── Dagre helper ───────────────────────────────────────────────
+
+function dagreLayout(
+  nodeIds: string[],
+  parentChildEdges: [string, string][],
+  opts: { rankdir?: string; nodesep?: number; ranksep?: number } = {},
+): Map<string, { x: number; y: number }> {
+  const g = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}))
+  g.setGraph({
+    rankdir: opts.rankdir ?? "TB",
+    nodesep: opts.nodesep ?? 60,
+    ranksep: opts.ranksep ?? 120,
+    marginx: 20,
+    marginy: 20,
+  })
+
+  for (const id of nodeIds) {
+    g.setNode(id, { width: NODE_W, height: NODE_H })
+  }
+  for (const [src, tgt] of parentChildEdges) {
+    g.setEdge(src, tgt)
+  }
+
+  dagre.layout(g)
+
+  const positions = new Map<string, { x: number; y: number }>()
+  for (const id of nodeIds) {
+    const n = g.node(id)
+    // dagre returns center coords — convert to top-left for React Flow
+    positions.set(id, { x: n.x - NODE_W / 2, y: n.y - NODE_H / 2 })
+  }
+  return positions
+}
+
+// ── Team-column layout (dagre per column) ──────────────────────
+
+const COL_GAP = 80
+const GROUP_PAD_X = 30
+const GROUP_PAD_TOP = 36
+const GROUP_PAD_BOTTOM = 24
+
+function buildTeamLayout(
+  agents: Agent[],
+  crons: CronJob[],
+  selectedId: string | null,
+): { nodes: Node[]; edges: Edge[] } {
+  const agentMapWithCrons = mergeAgentsWithCrons(agents, crons)
+  const { root, teams, soloOps } = buildTeams(agents)
+  if (!root) return { nodes: [], edges: [] }
+
+  // Collect all placed IDs
+  const placedIds = new Set<string>([root.id])
+  for (const t of teams) {
+    placedIds.add(t.manager.id)
+    t.members.forEach((m) => placedIds.add(m.id))
+  }
+  soloOps.forEach((a) => placedIds.add(a.id))
+  const disconnected = agents.filter((a) => !placedIds.has(a.id))
+
+  // Build columns
+  type Column = { label: string; color?: string; agentIds: string[]; edges: [string, string][] }
+  const columns: Column[] = []
+
+  const agentMap = new Map(agents.map((a) => [a.id, a]))
+  for (const t of teams) {
+    const ids = [t.manager.id, ...t.members.map((m) => m.id)]
+    const colEdges: [string, string][] = []
+    for (const id of ids) {
+      const a = agentMap.get(id)
+      if (!a) continue
+      for (const cid of a.directReports) {
+        if (ids.includes(cid)) colEdges.push([id, cid])
+      }
+    }
+    columns.push({ label: `Team ${t.manager.name}`, color: t.manager.color, agentIds: ids, edges: colEdges })
+  }
+  if (soloOps.length > 0) {
+    columns.push({ label: "Solo Ops", agentIds: soloOps.map((a) => a.id), edges: [] })
+  }
+  if (disconnected.length > 0) {
+    columns.push({ label: "Unlinked", agentIds: disconnected.map((a) => a.id), edges: [] })
+  }
+
+  // Layout each column with dagre independently, then offset horizontally
+  const nodes: Node[] = []
+  let cursorX = 0
+  const ROOT_Y = 0
+  const COLUMNS_TOP = 200
+
+  // Place root centered (we'll adjust x after computing total width)
+  const rootAgent = agentMapWithCrons.get(root.id)
+
+  type ColumnResult = { groupNode: Node; childNodes: Node[]; width: number }
+  const columnResults: ColumnResult[] = []
+
+  for (let ci = 0; ci < columns.length; ci++) {
+    const col = columns[ci]
+    const positions = dagreLayout(col.agentIds, col.edges, { nodesep: 40, ranksep: 90 })
+
+    // Compute bounding box of dagre output
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity
+    for (const pos of positions.values()) {
+      minX = Math.min(minX, pos.x)
+      maxX = Math.max(maxX, pos.x + NODE_W)
+      minY = Math.min(minY, pos.y)
+      maxY = Math.max(maxY, pos.y + NODE_H)
+    }
+    const contentW = maxX - minX
+    const contentH = maxY - minY
+    const groupW = contentW + GROUP_PAD_X * 2
+    const groupH = GROUP_PAD_TOP + contentH + GROUP_PAD_BOTTOM
+
+    const groupId = `group-${ci}`
+    const groupNode: Node = {
+      id: groupId,
+      type: "teamGroup",
+      data: { label: col.label, color: col.color },
+      position: { x: cursorX, y: COLUMNS_TOP },
+      style: {
+        width: groupW,
+        height: groupH,
+        background: "var(--fill-quaternary)",
+        borderRadius: 12,
+        border: "1px solid var(--separator)",
+        padding: 0,
+      },
+      selectable: false,
+      draggable: false,
+    }
+
+    const childNodes: Node[] = []
+    for (const id of col.agentIds) {
+      const agent = agentMapWithCrons.get(id)
+      const pos = positions.get(id)
+      if (!agent || !pos) continue
+      childNodes.push({
+        id,
+        type: "agentNode",
+        data: agent as unknown as Record<string, unknown>,
+        position: { x: pos.x - minX + GROUP_PAD_X, y: pos.y - minY + GROUP_PAD_TOP },
+        parentId: groupId,
+        extent: "parent" as const,
+        selected: id === selectedId,
+      })
+    }
+
+    columnResults.push({ groupNode, childNodes, width: groupW })
+    cursorX += groupW + COL_GAP
+  }
+
+  const totalWidth = cursorX - COL_GAP
+
+  // Root node
+  if (rootAgent) {
+    nodes.push({
+      id: root.id,
+      type: "agentNode",
+      data: rootAgent as unknown as Record<string, unknown>,
+      position: { x: totalWidth / 2 - NODE_W / 2, y: ROOT_Y },
+      selected: root.id === selectedId,
+    })
+  }
+
+  for (const cr of columnResults) {
+    nodes.push(cr.groupNode)
+    nodes.push(...cr.childNodes)
+  }
+
+  return { nodes, edges: buildEdges(agents, selectedId) }
+}
+
+// ── Hierarchy layout (full dagre) ──────────────────────────────
+
+function buildHierarchyLayout(
+  agents: Agent[],
+  crons: CronJob[],
+  selectedId: string | null,
+): { nodes: Node[]; edges: Edge[] } {
+  const agentMapWithCrons = mergeAgentsWithCrons(agents, crons)
+  const agentMap = new Map(agents.map((a) => [a.id, a]))
+
+  const allIds = agents.map((a) => a.id)
+  const allEdges: [string, string][] = []
+  for (const a of agents) {
+    for (const cid of a.directReports) {
+      if (agentMap.has(cid)) allEdges.push([a.id, cid])
+    }
+  }
+
+  const positions = dagreLayout(allIds, allEdges, { nodesep: 60, ranksep: 140 })
 
-  return { nodes, edges }
+  const nodes: Node[] = []
+  for (const a of agents) {
+    const agent = agentMapWithCrons.get(a.id)
+    const pos = positions.get(a.id)
+    if (!agent || !pos) continue
+    nodes.push({
+      id: a.id,
+      type: "agentNode",
+      data: agent as unknown as Record<string, unknown>,
+      position: pos,
+      selected: a.id === selectedId,
+    })
+  }
+
+  return { nodes, edges: buildEdges(agents, selectedId) }
 }
 
+// ── Component ──────────────────────────────────────────────────
+
 export function OrgMap({ agents, crons, selectedId, onNodeClick }: OrgMapProps) {
-  const { nodes: initialNodes, edges: initialEdges } = buildLayout(agents, crons, selectedId)
+  const [layout, setLayout] = useState<MapLayout>("hierarchy")
+
+  const build = layout === "teams" ? buildTeamLayout : buildHierarchyLayout
+  const { nodes: initialNodes, edges: initialEdges } = build(agents, crons, selectedId)
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
 
   useEffect(() => {
-    const { nodes: n, edges: e } = buildLayout(agents, crons, selectedId)
+    const { nodes: n, edges: e } = build(agents, crons, selectedId)
     setNodes(n)
     setEdges(e)
-  }, [agents, crons, selectedId, setNodes, setEdges])
+  }, [agents, crons, selectedId, layout, setNodes, setEdges, build])
 
   const handleNodeClick = useCallback(
     (_: React.MouseEvent, node: Node) => {
@@ -152,6 +327,54 @@ export function OrgMap({ agents, crons, selectedId, onNodeClick }: OrgMapProps)
         position="bottom-left"
         style={{ left: 16, bottom: 16 }}
       />
+
+      {/* Layout toggle */}
+      <Panel
+        position="bottom-center"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 2,
+          padding: 3,
+          borderRadius: "var(--radius-sm)",
+          background: "var(--material-regular)",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+          border: "1px solid var(--separator)",
+        }}
+      >
+        {(["teams", "hierarchy"] as const).map((opt) => {
+          const isActive = layout === opt
+          return (
+            <button
+              key={opt}
+              onClick={() => setLayout(opt)}
+              className="focus-ring"
+              style={{
+                padding: "4px 12px",
+                borderRadius: "var(--radius-sm)",
+                fontSize: "var(--text-caption1)",
+                fontWeight: "var(--weight-medium)",
+                border: "none",
+                cursor: "pointer",
+                transition: "all 200ms var(--ease-smooth)",
+                ...(isActive
+                  ? {
+                      background: "var(--accent-fill)",
+                      color: "var(--accent)",
+                      boxShadow: "0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent)",
+                    }
+                  : {
+                      background: "transparent",
+                      color: "var(--text-secondary)",
+                    }),
+              }}
+            >
+              {opt === "teams" ? "Teams" : "Hierarchy"}
+            </button>
+          )
+        })}
+      </Panel>
     </ReactFlow>
   )
 }

package/lib/agents-registry.ts

@@ -1,4 +1,5 @@
 import { readFileSync, existsSync, readdirSync } from 'fs'
+import { execSync } from 'child_process'
 import { join, basename } from 'path'
 import bundledRegistry from '@/lib/agents.json'
 import type { Agent } from '@/lib/types'
@@ -295,16 +296,100 @@ function discoverAgents(workspacePath: string): AgentEntry[] | null {
   return discovered.length > 0 ? discovered : null
 }
 
+// ---------------------------------------------------------------------------
+// CLI-based discovery (openclaw agents list)
+// ---------------------------------------------------------------------------
+
+/**
+ * Discover agents via `openclaw agents list --json`.
+ * Returns AgentEntry[] for any agents found, or null on failure.
+ * This catches agents defined in openclaw.json that don't have
+ * filesystem directories under agents/.
+ */
+function discoverAgentsViaCli(openclawBin: string): AgentEntry[] | null {
+  try {
+    const raw = execSync(`${openclawBin} agents list --json`, {
+      encoding: 'utf-8',
+      timeout: 10000,
+    })
+    const parsed = JSON.parse(raw)
+    const agents: unknown[] = Array.isArray(parsed)
+      ? parsed
+      : parsed.agents ?? parsed.data ?? []
+
+    if (agents.length === 0) return null
+
+    let colorIndex = 0
+    return agents.map((entry) => {
+      const a = entry as Record<string, unknown>
+      const id = String(a.id ?? a.name ?? a.slug ?? '')
+      const name = String(a.name ?? a.displayName ?? slugToName(id))
+      const title = String(a.title ?? a.role ?? 'Agent')
+      const reportsTo = a.reportsTo != null ? String(a.reportsTo) : null
+      const directReports = Array.isArray(a.directReports)
+        ? a.directReports.map(String)
+        : []
+      const tools = Array.isArray(a.tools) ? a.tools.map(String) : ['read', 'write']
+
+      return {
+        id,
+        name,
+        title,
+        reportsTo,
+        directReports,
+        soulPath: typeof a.soulPath === 'string' ? a.soulPath : null,
+        voiceId: typeof a.voiceId === 'string' ? a.voiceId : null,
+        color: typeof a.color === 'string' ? a.color : DISCOVER_COLORS[colorIndex++ % DISCOVER_COLORS.length],
+        emoji: typeof a.emoji === 'string' ? a.emoji : name.charAt(0).toUpperCase(),
+        tools,
+        memoryPath: typeof a.memoryPath === 'string' ? a.memoryPath : null,
+        description: typeof a.description === 'string' ? a.description : `${name} agent.`,
+      }
+    })
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Merge CLI-discovered agents into an existing registry.
+ * Only adds agents whose IDs are not already present.
+ * Also patches directReports on existing agents to include new CLI agents.
+ */
+function mergeCliAgents(existing: AgentEntry[], cliAgents: AgentEntry[]): AgentEntry[] {
+  const existingIds = new Set(existing.map(a => a.id))
+  const added: AgentEntry[] = []
+
+  for (const ca of cliAgents) {
+    if (existingIds.has(ca.id)) continue
+    added.push(ca)
+    existingIds.add(ca.id)
+
+    // If the CLI agent reports to an existing agent, add it to that agent's directReports
+    if (ca.reportsTo) {
+      const parent = existing.find(a => a.id === ca.reportsTo)
+      if (parent && !parent.directReports.includes(ca.id)) {
+        parent.directReports.push(ca.id)
+      }
+    }
+  }
+
+  return [...existing, ...added]
+}
+
 /**
  * Load the agent registry.
  *
  * Resolution order:
  *   1. $WORKSPACE_PATH/clawport/agents.json  (user's own config)
  *   2. Auto-discovered from $WORKSPACE_PATH   (agents/ directory scan)
- *   3. Bundled lib/agents.json               (default example registry)
+ *      + merged with `openclaw agents list --json` (catches config-only agents)
+ *   3. CLI-only discovery via `openclaw agents list --json`
+ *   4. Bundled lib/agents.json               (default example registry)
  */
 export function loadRegistry(): AgentEntry[] {
   const workspacePath = process.env.WORKSPACE_PATH
+  const openclawBin = process.env.OPENCLAW_BIN
 
   if (workspacePath) {
     // 1. User-provided override
@@ -318,11 +403,24 @@ export function loadRegistry(): AgentEntry[] {
       }
     }
 
-    // 2. Auto-discover from workspace
+    // 2. Auto-discover from workspace filesystem
     const discovered = discoverAgents(workspacePath)
+
+    // 2b. Merge in any agents known to OpenClaw CLI but missing from filesystem
+    if (discovered && openclawBin) {
+      const cliAgents = discoverAgentsViaCli(openclawBin)
+      if (cliAgents) return mergeCliAgents(discovered, cliAgents)
+      return discovered
+    }
     if (discovered) return discovered
+
+    // 3. CLI-only discovery (no workspace agents/ dir, but CLI knows about agents)
+    if (openclawBin) {
+      const cliAgents = discoverAgentsViaCli(openclawBin)
+      if (cliAgents) return cliAgents
+    }
   }
 
-  // 3. Bundled fallback
+  // 4. Bundled fallback
   return bundledRegistry as AgentEntry[]
 }

package/lib/teams.ts

@@ -0,0 +1,44 @@
+import type { Agent } from "@/lib/types"
+
+export interface Team {
+  manager: Agent
+  members: Agent[]
+}
+
+export function buildTeams(agents: Agent[]): { root: Agent | null; teams: Team[]; soloOps: Agent[] } {
+  const root = agents.find((a) => a.reportsTo === null) ?? null
+  if (!root) return { root: null, teams: [], soloOps: [] }
+
+  const byId = new Map(agents.map((a) => [a.id, a]))
+  const teamManagers: Agent[] = []
+  const soloOps: Agent[] = []
+
+  for (const rid of root.directReports) {
+    const r = byId.get(rid)
+    if (!r) continue
+    if (r.directReports.length > 0) {
+      teamManagers.push(r)
+    } else {
+      soloOps.push(r)
+    }
+  }
+
+  const teams: Team[] = teamManagers.map((mgr) => {
+    const members: Agent[] = []
+    const visited = new Set<string>([mgr.id])
+    const queue = [...mgr.directReports]
+    while (queue.length > 0) {
+      const id = queue.shift()!
+      if (visited.has(id)) continue
+      visited.add(id)
+      const a = byId.get(id)
+      if (a) {
+        members.push(a)
+        queue.push(...a.directReports)
+      }
+    }
+    return { manager: mgr, members }
+  })
+
+  return { root, teams, soloOps }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clawport-ui",
-  "version": "0.4.7",
+  "version": "0.5.1",
   "description": "Open-source dashboard for managing, monitoring, and chatting with your OpenClaw AI agents.",
   "homepage": "https://clawport.dev",
   "repository": {
@@ -47,6 +47,7 @@
     "prepublishOnly": "npx tsc --noEmit && vitest run"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^2.0.4",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",