feat(ui): org chart page, issue detail tabs, and UX improvements

- Add org chart page with tree visualization and sidebar nav link
- Restructure issue detail into tabbed layout (comments/activity/sub-issues)
- Persist comment drafts to localStorage with debounce
- Add inline assignee picker to issues list with search
- Fix assignee clear to reset both agent and user assignee
- Fix InlineEditor nesting when rendering markdown content

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ui/src/pages/IssueDetail.tsx

@@ -22,9 +22,23 @@ import { Identity } from "../components/Identity";
 import { Separator } from "@/components/ui/separator";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { ChevronRight, MoreHorizontal, EyeOff, Hexagon, Paperclip, Trash2, SlidersHorizontal } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  Activity as ActivityIcon,
+  ChevronDown,
+  ChevronRight,
+  EyeOff,
+  Hexagon,
+  ListTree,
+  MessageSquare,
+  MoreHorizontal,
+  Paperclip,
+  SlidersHorizontal,
+  Trash2,
+} from "lucide-react";
 import type { ActivityEvent } from "@paperclip/shared";
 import type { Agent, IssueAttachment } from "@paperclip/shared";
 
@@ -126,6 +140,12 @@ export function IssueDetail() {
   const navigate = useNavigate();
   const [moreOpen, setMoreOpen] = useState(false);
   const [mobilePropsOpen, setMobilePropsOpen] = useState(false);
+  const [detailTab, setDetailTab] = useState("comments");
+  const [secondaryOpen, setSecondaryOpen] = useState({
+    approvals: false,
+    runs: false,
+    cost: false,
+  });
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -505,10 +525,6 @@ export function IssueDetail() {
         />
       </div>
 
-      <LiveRunWidget issueId={issueId!} companyId={selectedCompanyId} />
-
-      <Separator />
-
       <div className="space-y-3">
         <div className="flex items-center justify-between gap-2">
           <h3 className="text-sm font-medium text-muted-foreground">Attachments</h3>
@@ -583,24 +599,46 @@ export function IssueDetail() {
 
       <Separator />
 
-      <CommentThread
-        comments={commentsWithRunMeta}
-        issueStatus={issue.status}
-        agentMap={agentMap}
-        onAdd={async (body, reopen) => {
-          await addComment.mutateAsync({ body, reopen });
-        }}
-        imageUploadHandler={async (file) => {
-          const attachment = await uploadAttachment.mutateAsync(file);
-          return attachment.contentPath;
-        }}
-      />
+      <LiveRunWidget issueId={issueId!} companyId={selectedCompanyId} />
 
-      {childIssues.length > 0 && (
-        <>
-          <Separator />
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Sub-issues</h3>
+      <Separator />
+
+      <Tabs value={detailTab} onValueChange={setDetailTab} className="space-y-3">
+        <TabsList variant="line" className="w-full justify-start gap-1">
+          <TabsTrigger value="comments" className="gap-1.5">
+            <MessageSquare className="h-3.5 w-3.5" />
+            Comments
+          </TabsTrigger>
+          <TabsTrigger value="subissues" className="gap-1.5">
+            <ListTree className="h-3.5 w-3.5" />
+            Sub-issues
+          </TabsTrigger>
+          <TabsTrigger value="activity" className="gap-1.5">
+            <ActivityIcon className="h-3.5 w-3.5" />
+            Activity
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="comments">
+          <CommentThread
+            comments={commentsWithRunMeta}
+            issueStatus={issue.status}
+            agentMap={agentMap}
+            draftKey={`paperclip:issue-comment-draft:${issue.id}`}
+            onAdd={async (body, reopen) => {
+              await addComment.mutateAsync({ body, reopen });
+            }}
+            imageUploadHandler={async (file) => {
+              const attachment = await uploadAttachment.mutateAsync(file);
+              return attachment.contentPath;
+            }}
+          />
+        </TabsContent>
+
+        <TabsContent value="subissues">
+          {childIssues.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No sub-issues.</p>
+          ) : (
             <div className="border border-border rounded-lg divide-y divide-border">
               {childIssues.map((child) => (
                 <Link
@@ -625,16 +663,42 @@ export function IssueDetail() {
                 </Link>
               ))}
             </div>
-          </div>
-        </>
-      )}
+          )}
+        </TabsContent>
+
+        <TabsContent value="activity">
+          {!activity || activity.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No activity yet.</p>
+          ) : (
+            <div className="space-y-1.5">
+              {activity.slice(0, 20).map((evt) => (
+                <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <ActorIdentity evt={evt} agentMap={agentMap} />
+                  <span>{formatAction(evt.action, evt.details)}</span>
+                  <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
 
       {linkedApprovals && linkedApprovals.length > 0 && (
-        <>
-          <Separator />
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Linked Approvals</h3>
-            <div className="border border-border rounded-lg divide-y divide-border">
+        <Collapsible
+          open={secondaryOpen.approvals}
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, approvals: open }))}
+          className="rounded-lg border border-border"
+        >
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
+            <span className="text-sm font-medium text-muted-foreground">
+              Linked Approvals ({linkedApprovals.length})
+            </span>
+            <ChevronDown
+              className={cn("h-4 w-4 text-muted-foreground transition-transform", secondaryOpen.approvals && "rotate-180")}
+            />
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="border-t border-border divide-y divide-border">
               {linkedApprovals.map((approval) => (
                 <Link
                   key={approval.id}
@@ -652,17 +716,24 @@ export function IssueDetail() {
                 </Link>
               ))}
             </div>
-          </div>
-        </>
+          </CollapsibleContent>
+        </Collapsible>
       )}
 
-      {/* Linked Runs */}
       {linkedRuns && linkedRuns.length > 0 && (
-        <>
-          <Separator />
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Linked Runs</h3>
-            <div className="border border-border rounded-lg divide-y divide-border">
+        <Collapsible
+          open={secondaryOpen.runs}
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, runs: open }))}
+          className="rounded-lg border border-border"
+        >
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
+            <span className="text-sm font-medium text-muted-foreground">Linked Runs ({linkedRuns.length})</span>
+            <ChevronDown
+              className={cn("h-4 w-4 text-muted-foreground transition-transform", secondaryOpen.runs && "rotate-180")}
+            />
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="border-t border-border divide-y divide-border">
               {linkedRuns.map((run) => (
                 <Link
                   key={run.runId}
@@ -678,55 +749,46 @@ export function IssueDetail() {
                 </Link>
               ))}
             </div>
-          </div>
-        </>
+          </CollapsibleContent>
+        </Collapsible>
       )}
 
-      {/* Activity Log */}
-      {activity && activity.length > 0 && (
-        <>
-          <Separator />
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
-            <div className="space-y-1.5">
-              {activity.slice(0, 20).map((evt) => (
-                <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <ActorIdentity evt={evt} agentMap={agentMap} />
-                  <span>{formatAction(evt.action, evt.details)}</span>
-                  <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+      {linkedRuns && linkedRuns.length > 0 && (
+        <Collapsible
+          open={secondaryOpen.cost}
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, cost: open }))}
+          className="rounded-lg border border-border"
+        >
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
+            <span className="text-sm font-medium text-muted-foreground">Cost Summary</span>
+            <ChevronDown
+              className={cn("h-4 w-4 text-muted-foreground transition-transform", secondaryOpen.cost && "rotate-180")}
+            />
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="border-t border-border px-3 py-2">
+              {!issueCostSummary.hasCost && !issueCostSummary.hasTokens ? (
+                <div className="text-xs text-muted-foreground">No cost data yet.</div>
+              ) : (
+                <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
+                  {issueCostSummary.hasCost && (
+                    <span className="font-medium text-foreground">
+                      ${issueCostSummary.cost.toFixed(4)}
+                    </span>
+                  )}
+                  {issueCostSummary.hasTokens && (
+                    <span>
+                      Tokens {formatTokens(issueCostSummary.totalTokens)}
+                      {issueCostSummary.cached > 0
+                        ? ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)}, cached ${formatTokens(issueCostSummary.cached)})`
+                        : ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)})`}
+                    </span>
+                  )}
                 </div>
-              ))}
+              )}
             </div>
-          </div>
-        </>
-      )}
-
-      {(linkedRuns && linkedRuns.length > 0) && (
-        <>
-          <Separator />
-          <div className="space-y-2">
-            <h3 className="text-sm font-medium text-muted-foreground">Cost</h3>
-            {!issueCostSummary.hasCost && !issueCostSummary.hasTokens ? (
-              <div className="text-xs text-muted-foreground">No cost data yet.</div>
-            ) : (
-              <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
-                {issueCostSummary.hasCost && (
-                  <span className="font-medium text-foreground">
-                    ${issueCostSummary.cost.toFixed(4)}
-                  </span>
-                )}
-                {issueCostSummary.hasTokens && (
-                  <span>
-                    Tokens {formatTokens(issueCostSummary.totalTokens)}
-                    {issueCostSummary.cached > 0
-                      ? ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)}, cached ${formatTokens(issueCostSummary.cached)})`
-                      : ` (in ${formatTokens(issueCostSummary.input)}, out ${formatTokens(issueCostSummary.output)})`}
-                  </span>
-                )}
-              </div>
-            )}
-          </div>
-        </>
+          </CollapsibleContent>
+        </Collapsible>
       )}
 
       {/* Mobile properties drawer */}

ui/src/pages/MyIssues.tsx

@@ -50,7 +50,7 @@ export function MyIssues() {
               key={issue.id}
               identifier={issue.identifier ?? issue.id.slice(0, 8)}
               title={issue.title}
-              to={`/issues/${issue.identifier ?? issue.id}`}}
+              to={`/issues/${issue.identifier ?? issue.id}`}
               leading={
                 <>
                   <PriorityIcon priority={issue.priority} />

ui/src/pages/OrgChart.tsx

@@ -0,0 +1,424 @@
+import { useEffect, useRef, useState, useMemo, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { agentsApi, type OrgNode } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { queryKeys } from "../lib/queryKeys";
+import { EmptyState } from "../components/EmptyState";
+import { AgentIcon } from "../components/AgentIconPicker";
+import { Network } from "lucide-react";
+import type { Agent } from "@paperclip/shared";
+
+// Layout constants
+const CARD_W = 200;
+const CARD_H = 100;
+const GAP_X = 32;
+const GAP_Y = 80;
+const PADDING = 60;
+
+// ── Tree layout types ───────────────────────────────────────────────────
+
+interface LayoutNode {
+  id: string;
+  name: string;
+  role: string;
+  status: string;
+  x: number;
+  y: number;
+  children: LayoutNode[];
+}
+
+// ── Layout algorithm ────────────────────────────────────────────────────
+
+/** Compute the width each subtree needs. */
+function subtreeWidth(node: OrgNode): number {
+  if (node.reports.length === 0) return CARD_W;
+  const childrenW = node.reports.reduce((sum, c) => sum + subtreeWidth(c), 0);
+  const gaps = (node.reports.length - 1) * GAP_X;
+  return Math.max(CARD_W, childrenW + gaps);
+}
+
+/** Recursively assign x,y positions. */
+function layoutTree(node: OrgNode, x: number, y: number): LayoutNode {
+  const totalW = subtreeWidth(node);
+  const layoutChildren: LayoutNode[] = [];
+
+  if (node.reports.length > 0) {
+    const childrenW = node.reports.reduce((sum, c) => sum + subtreeWidth(c), 0);
+    const gaps = (node.reports.length - 1) * GAP_X;
+    let cx = x + (totalW - childrenW - gaps) / 2;
+
+    for (const child of node.reports) {
+      const cw = subtreeWidth(child);
+      layoutChildren.push(layoutTree(child, cx, y + CARD_H + GAP_Y));
+      cx += cw + GAP_X;
+    }
+  }
+
+  return {
+    id: node.id,
+    name: node.name,
+    role: node.role,
+    status: node.status,
+    x: x + (totalW - CARD_W) / 2,
+    y,
+    children: layoutChildren,
+  };
+}
+
+/** Layout all root nodes side by side. */
+function layoutForest(roots: OrgNode[]): LayoutNode[] {
+  if (roots.length === 0) return [];
+
+  const totalW = roots.reduce((sum, r) => sum + subtreeWidth(r), 0);
+  const gaps = (roots.length - 1) * GAP_X;
+  let x = PADDING;
+  const y = PADDING;
+
+  const result: LayoutNode[] = [];
+  for (const root of roots) {
+    const w = subtreeWidth(root);
+    result.push(layoutTree(root, x, y));
+    x += w + GAP_X;
+  }
+
+  // Compute bounds and return
+  return result;
+}
+
+/** Flatten layout tree to list of nodes. */
+function flattenLayout(nodes: LayoutNode[]): LayoutNode[] {
+  const result: LayoutNode[] = [];
+  function walk(n: LayoutNode) {
+    result.push(n);
+    n.children.forEach(walk);
+  }
+  nodes.forEach(walk);
+  return result;
+}
+
+/** Collect all parent→child edges. */
+function collectEdges(nodes: LayoutNode[]): Array<{ parent: LayoutNode; child: LayoutNode }> {
+  const edges: Array<{ parent: LayoutNode; child: LayoutNode }> = [];
+  function walk(n: LayoutNode) {
+    for (const c of n.children) {
+      edges.push({ parent: n, child: c });
+      walk(c);
+    }
+  }
+  nodes.forEach(walk);
+  return edges;
+}
+
+// ── Status dot colors (raw hex for SVG) ─────────────────────────────────
+
+const adapterLabels: Record<string, string> = {
+  claude_local: "Claude",
+  codex_local: "Codex",
+  process: "Process",
+  http: "HTTP",
+};
+
+const statusDotColor: Record<string, string> = {
+  running: "#22d3ee",
+  active: "#4ade80",
+  paused: "#facc15",
+  idle: "#facc15",
+  error: "#f87171",
+  terminated: "#a3a3a3",
+};
+const defaultDotColor = "#a3a3a3";
+
+// ── Main component ──────────────────────────────────────────────────────
+
+export function OrgChart() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+  const navigate = useNavigate();
+
+  const { data: orgTree, isLoading } = useQuery({
+    queryKey: queryKeys.org(selectedCompanyId!),
+    queryFn: () => agentsApi.org(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: agents } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const agentMap = useMemo(() => {
+    const m = new Map<string, Agent>();
+    for (const a of agents ?? []) m.set(a.id, a);
+    return m;
+  }, [agents]);
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Org Chart" }]);
+  }, [setBreadcrumbs]);
+
+  // Layout computation
+  const layout = useMemo(() => layoutForest(orgTree ?? []), [orgTree]);
+  const allNodes = useMemo(() => flattenLayout(layout), [layout]);
+  const edges = useMemo(() => collectEdges(layout), [layout]);
+
+  // Compute SVG bounds
+  const bounds = useMemo(() => {
+    if (allNodes.length === 0) return { width: 800, height: 600 };
+    let maxX = 0, maxY = 0;
+    for (const n of allNodes) {
+      maxX = Math.max(maxX, n.x + CARD_W);
+      maxY = Math.max(maxY, n.y + CARD_H);
+    }
+    return { width: maxX + PADDING, height: maxY + PADDING };
+  }, [allNodes]);
+
+  // Pan & zoom state
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [dragging, setDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+
+  // Center the chart on first load
+  const hasInitialized = useRef(false);
+  useEffect(() => {
+    if (hasInitialized.current || allNodes.length === 0 || !containerRef.current) return;
+    hasInitialized.current = true;
+
+    const container = containerRef.current;
+    const containerW = container.clientWidth;
+    const containerH = container.clientHeight;
+
+    // Fit chart to container
+    const scaleX = (containerW - 40) / bounds.width;
+    const scaleY = (containerH - 40) / bounds.height;
+    const fitZoom = Math.min(scaleX, scaleY, 1);
+
+    const chartW = bounds.width * fitZoom;
+    const chartH = bounds.height * fitZoom;
+
+    setZoom(fitZoom);
+    setPan({
+      x: (containerW - chartW) / 2,
+      y: (containerH - chartH) / 2,
+    });
+  }, [allNodes, bounds]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    // Don't drag if clicking a card
+    const target = e.target as HTMLElement;
+    if (target.closest("[data-org-card]")) return;
+    setDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY, panX: pan.x, panY: pan.y };
+  }, [pan]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    setPan({ x: dragStart.current.panX + dx, y: dragStart.current.panY + dy });
+  }, [dragging]);
+
+  const handleMouseUp = useCallback(() => {
+    setDragging(false);
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const container = containerRef.current;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+
+    const factor = e.deltaY < 0 ? 1.1 : 0.9;
+    const newZoom = Math.min(Math.max(zoom * factor, 0.2), 2);
+
+    // Zoom toward mouse position
+    const scale = newZoom / zoom;
+    setPan({
+      x: mouseX - scale * (mouseX - pan.x),
+      y: mouseY - scale * (mouseY - pan.y),
+    });
+    setZoom(newZoom);
+  }, [zoom, pan]);
+
+  if (!selectedCompanyId) {
+    return <EmptyState icon={Network} message="Select a company to view the org chart." />;
+  }
+
+  if (isLoading) {
+    return <p className="text-sm text-muted-foreground p-4">Loading...</p>;
+  }
+
+  if (orgTree && orgTree.length === 0) {
+    return <EmptyState icon={Network} message="No organizational hierarchy defined." />;
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="w-full h-[calc(100vh-4rem)] overflow-hidden relative bg-muted/20 border border-border rounded-lg"
+      style={{ cursor: dragging ? "grabbing" : "grab" }}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onWheel={handleWheel}
+    >
+      {/* Zoom controls */}
+      <div className="absolute top-3 right-3 z-10 flex flex-col gap-1">
+        <button
+          className="w-7 h-7 flex items-center justify-center bg-background border border-border rounded text-sm hover:bg-accent transition-colors"
+          onClick={() => {
+            const newZoom = Math.min(zoom * 1.2, 2);
+            const container = containerRef.current;
+            if (container) {
+              const cx = container.clientWidth / 2;
+              const cy = container.clientHeight / 2;
+              const scale = newZoom / zoom;
+              setPan({ x: cx - scale * (cx - pan.x), y: cy - scale * (cy - pan.y) });
+            }
+            setZoom(newZoom);
+          }}
+        >
+          +
+        </button>
+        <button
+          className="w-7 h-7 flex items-center justify-center bg-background border border-border rounded text-sm hover:bg-accent transition-colors"
+          onClick={() => {
+            const newZoom = Math.max(zoom * 0.8, 0.2);
+            const container = containerRef.current;
+            if (container) {
+              const cx = container.clientWidth / 2;
+              const cy = container.clientHeight / 2;
+              const scale = newZoom / zoom;
+              setPan({ x: cx - scale * (cx - pan.x), y: cy - scale * (cy - pan.y) });
+            }
+            setZoom(newZoom);
+          }}
+        >
+          &minus;
+        </button>
+        <button
+          className="w-7 h-7 flex items-center justify-center bg-background border border-border rounded text-[10px] hover:bg-accent transition-colors"
+          onClick={() => {
+            if (!containerRef.current) return;
+            const cW = containerRef.current.clientWidth;
+            const cH = containerRef.current.clientHeight;
+            const scaleX = (cW - 40) / bounds.width;
+            const scaleY = (cH - 40) / bounds.height;
+            const fitZoom = Math.min(scaleX, scaleY, 1);
+            const chartW = bounds.width * fitZoom;
+            const chartH = bounds.height * fitZoom;
+            setZoom(fitZoom);
+            setPan({ x: (cW - chartW) / 2, y: (cH - chartH) / 2 });
+          }}
+          title="Fit to screen"
+        >
+          Fit
+        </button>
+      </div>
+
+      {/* SVG layer for edges */}
+      <svg
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <g transform={`translate(${pan.x}, ${pan.y}) scale(${zoom})`}>
+          {edges.map(({ parent, child }) => {
+            const x1 = parent.x + CARD_W / 2;
+            const y1 = parent.y + CARD_H;
+            const x2 = child.x + CARD_W / 2;
+            const y2 = child.y;
+            const midY = (y1 + y2) / 2;
+
+            return (
+              <path
+                key={`${parent.id}-${child.id}`}
+                d={`M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`}
+                fill="none"
+                stroke="var(--border)"
+                strokeWidth={1.5}
+              />
+            );
+          })}
+        </g>
+      </svg>
+
+      {/* Card layer */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+          transformOrigin: "0 0",
+        }}
+      >
+        {allNodes.map((node) => {
+          const agent = agentMap.get(node.id);
+          const dotColor = statusDotColor[node.status] ?? defaultDotColor;
+
+          return (
+            <div
+              key={node.id}
+              data-org-card
+              className="absolute bg-card border border-border rounded-lg shadow-sm hover:shadow-md hover:border-foreground/20 transition-all cursor-pointer select-none"
+              style={{
+                left: node.x,
+                top: node.y,
+                width: CARD_W,
+                minHeight: CARD_H,
+              }}
+              onClick={() => navigate(`/agents/${node.id}`)}
+            >
+              <div className="flex items-center px-4 py-3 gap-3">
+                {/* Agent icon + status dot */}
+                <div className="relative shrink-0">
+                  <div className="w-9 h-9 rounded-full bg-muted flex items-center justify-center">
+                    <AgentIcon icon={agent?.icon} className="h-4.5 w-4.5 text-foreground/70" />
+                  </div>
+                  <span
+                    className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-card"
+                    style={{ backgroundColor: dotColor }}
+                  />
+                </div>
+                {/* Name + role + adapter type */}
+                <div className="flex flex-col items-start min-w-0 flex-1">
+                  <span className="text-sm font-semibold text-foreground leading-tight">
+                    {node.name}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground leading-tight mt-0.5">
+                    {agent?.title ?? roleLabel(node.role)}
+                  </span>
+                  {agent && (
+                    <span className="text-[10px] text-muted-foreground/60 font-mono leading-tight mt-1">
+                      {adapterLabels[agent.adapterType] ?? agent.adapterType}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const roleLabels: Record<string, string> = {
+  ceo: "CEO", cto: "CTO", cmo: "CMO", cfo: "CFO",
+  engineer: "Engineer", designer: "Designer", pm: "PM",
+  qa: "QA", devops: "DevOps", researcher: "Researcher", general: "General",
+};
+
+function roleLabel(role: string): string {
+  return roleLabels[role] ?? role;
+}