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/App.tsx

@@ -20,6 +20,7 @@ import { Activity } from "./pages/Activity";
 import { Inbox } from "./pages/Inbox";
 import { CompanySettings } from "./pages/CompanySettings";
 import { DesignGuide } from "./pages/DesignGuide";
+import { OrgChart } from "./pages/OrgChart";
 import { AuthPage } from "./pages/Auth";
 import { BoardClaimPage } from "./pages/BoardClaim";
 import { InviteLandingPage } from "./pages/InviteLanding";
@@ -95,7 +96,7 @@ export function App() {
           <Route path="dashboard" element={<Dashboard />} />
           <Route path="companies" element={<Companies />} />
           <Route path="company/settings" element={<CompanySettings />} />
-          <Route path="org" element={<Navigate to="/agents/all" replace />} />
+          <Route path="org" element={<OrgChart />} />
           <Route path="agents" element={<Navigate to="/agents/all" replace />} />
           <Route path="agents/all" element={<Agents />} />
           <Route path="agents/active" element={<Agents />} />

ui/src/components/CommentThread.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import type { IssueComment, Agent } from "@paperclip/shared";
 import { Button } from "@/components/ui/button";
@@ -18,15 +18,46 @@ interface CommentThreadProps {
   issueStatus?: string;
   agentMap?: Map<string, Agent>;
   imageUploadHandler?: (file: File) => Promise<string>;
+  draftKey?: string;
 }
 
 const CLOSED_STATUSES = new Set(["done", "cancelled"]);
+const DRAFT_DEBOUNCE_MS = 800;
 
-export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUploadHandler }: CommentThreadProps) {
+function loadDraft(draftKey: string): string {
+  try {
+    return localStorage.getItem(draftKey) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+function saveDraft(draftKey: string, value: string) {
+  try {
+    if (value.trim()) {
+      localStorage.setItem(draftKey, value);
+    } else {
+      localStorage.removeItem(draftKey);
+    }
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
+function clearDraft(draftKey: string) {
+  try {
+    localStorage.removeItem(draftKey);
+  } catch {
+    // Ignore localStorage failures.
+  }
+}
+
+export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUploadHandler, draftKey }: CommentThreadProps) {
   const [body, setBody] = useState("");
   const [reopen, setReopen] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const editorRef = useRef<MarkdownEditorRef>(null);
+  const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
 
@@ -47,6 +78,25 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
       }));
   }, [agentMap]);
 
+  useEffect(() => {
+    if (!draftKey) return;
+    setBody(loadDraft(draftKey));
+  }, [draftKey]);
+
+  useEffect(() => {
+    if (!draftKey) return;
+    if (draftTimer.current) clearTimeout(draftTimer.current);
+    draftTimer.current = setTimeout(() => {
+      saveDraft(draftKey, body);
+    }, DRAFT_DEBOUNCE_MS);
+  }, [body, draftKey]);
+
+  useEffect(() => {
+    return () => {
+      if (draftTimer.current) clearTimeout(draftTimer.current);
+    };
+  }, []);
+
   async function handleSubmit() {
     const trimmed = body.trim();
     if (!trimmed) return;
@@ -55,6 +105,7 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
     try {
       await onAdd(trimmed, isClosed && reopen ? true : undefined);
       setBody("");
+      if (draftKey) clearDraft(draftKey);
       setReopen(false);
     } finally {
       setSubmitting(false);

ui/src/components/InlineEditor.tsx

@@ -127,8 +127,12 @@ export function InlineEditor({
     );
   }
 
+  // Use div instead of Tag when rendering markdown to avoid invalid nesting
+  // (e.g. <p> cannot contain the <div>/<p> elements that markdown produces)
+  const DisplayTag = value && multiline ? "div" : Tag;
+
   return (
-    <Tag
+    <DisplayTag
       className={cn(
         "cursor-pointer rounded hover:bg-accent/50 transition-colors",
         pad,
@@ -142,6 +146,6 @@ export function InlineEditor({
       ) : (
         value || placeholder
       )}
-    </Tag>
+    </DisplayTag>
   );
 }

ui/src/components/IssueProperties.tsx

@@ -253,9 +253,9 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
                 <button
                   className={cn(
                     "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                    !issue.assigneeAgentId && "bg-accent"
+                    !issue.assigneeAgentId && !issue.assigneeUserId && "bg-accent"
                   )}
-                  onClick={() => { onUpdate({ assigneeAgentId: null }); setAssigneeOpen(false); }}
+                  onClick={() => { onUpdate({ assigneeAgentId: null, assigneeUserId: null }); setAssigneeOpen(false); }}
                 >
                   No assignee
                 </button>
@@ -273,7 +273,7 @@ export function IssueProperties({ issue, onUpdate }: IssuePropertiesProps) {
                       "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
                       a.id === issue.assigneeAgentId && "bg-accent"
                     )}
-                    onClick={() => { onUpdate({ assigneeAgentId: a.id }); setAssigneeOpen(false); }}
+                    onClick={() => { onUpdate({ assigneeAgentId: a.id, assigneeUserId: null }); setAssigneeOpen(false); }}
                   >
                     <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
                     {a.name}

ui/src/components/IssuesList.tsx

@@ -6,7 +6,7 @@ import { useCompany } from "../context/CompanyContext";
 import { issuesApi } from "../api/issues";
 import { queryKeys } from "../lib/queryKeys";
 import { groupBy } from "../lib/groupBy";
-import { formatDate } from "../lib/utils";
+import { formatDate, cn } from "../lib/utils";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { EmptyState } from "./EmptyState";
@@ -15,7 +15,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible";
-import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3 } from "lucide-react";
+import { CircleDot, Plus, Filter, ArrowUpDown, Layers, Check, X, ChevronRight, List, Columns3, User } from "lucide-react";
 import { KanbanBoard } from "./KanbanBoard";
 import type { Issue } from "@paperclip/shared";
 
@@ -161,6 +161,8 @@ export function IssuesList({
     }
     return getViewState(viewStateKey);
   });
+  const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
+  const [assigneeSearch, setAssigneeSearch] = useState("");
 
   const updateView = useCallback((patch: Partial<IssueViewState>) => {
     setViewState((prev) => {
@@ -223,6 +225,12 @@ export function IssuesList({
     return defaults;
   };
 
+  const assignIssue = (issueId: string, assigneeAgentId: string | null) => {
+    onUpdateIssue(issueId, { assigneeAgentId, assigneeUserId: null });
+    setAssigneePickerIssueId(null);
+    setAssigneeSearch("");
+  };
+
   return (
     <div className="space-y-4">
       {/* Toolbar */}
@@ -548,6 +556,84 @@ export function IssuesList({
                     </div>
                   )}
                   <div className="flex items-center gap-2 sm:gap-3 shrink-0 ml-auto">
+                    <Popover
+                      open={assigneePickerIssueId === issue.id}
+                      onOpenChange={(open) => {
+                        setAssigneePickerIssueId(open ? issue.id : null);
+                        if (!open) setAssigneeSearch("");
+                      }}
+                    >
+                      <PopoverTrigger asChild>
+                        <button
+                          className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 hover:bg-accent/50 transition-colors"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                        >
+                          {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
+                            <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
+                          ) : (
+                            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
+                                <User className="h-3 w-3" />
+                              </span>
+                              Assignee
+                            </span>
+                          )}
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        className="w-56 p-1"
+                        align="end"
+                        onClick={(e) => e.stopPropagation()}
+                        onPointerDownOutside={() => setAssigneeSearch("")}
+                      >
+                        <input
+                          className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
+                          placeholder="Search agents..."
+                          value={assigneeSearch}
+                          onChange={(e) => setAssigneeSearch(e.target.value)}
+                          autoFocus
+                        />
+                        <div className="max-h-48 overflow-y-auto overscroll-contain">
+                          <button
+                            className={cn(
+                              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
+                              !issue.assigneeAgentId && "bg-accent"
+                            )}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              assignIssue(issue.id, null);
+                            }}
+                          >
+                            No assignee
+                          </button>
+                          {(agents ?? [])
+                            .filter((agent) => {
+                              if (!assigneeSearch.trim()) return true;
+                              return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
+                            })
+                            .map((agent) => (
+                              <button
+                                key={agent.id}
+                                className={cn(
+                                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
+                                  issue.assigneeAgentId === agent.id && "bg-accent"
+                                )}
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  assignIssue(issue.id, agent.id);
+                                }}
+                              >
+                                <Identity name={agent.name} size="sm" className="min-w-0" />
+                              </button>
+                            ))}
+                        </div>
+                      </PopoverContent>
+                    </Popover>
                     {liveIssueIds?.has(issue.id) && (
                       <span className="inline-flex items-center gap-1 sm:gap-1.5 px-1.5 sm:px-2 py-0.5 rounded-full bg-blue-500/10">
                         <span className="relative flex h-2 w-2">
@@ -557,12 +643,6 @@ export function IssuesList({
                         <span className="text-[11px] font-medium text-blue-400 hidden sm:inline">Live</span>
                       </span>
                     )}
-                    {issue.assigneeAgentId && (() => {
-                      const name = agentName(issue.assigneeAgentId);
-                      return name
-                        ? <Identity name={name} size="sm" />
-                        : <span className="text-xs text-muted-foreground font-mono">{issue.assigneeAgentId.slice(0, 8)}</span>;
-                    })()}
                     <span className="text-xs text-muted-foreground hidden sm:inline">
                       {formatDate(issue.createdAt)}
                     </span>

ui/src/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import {
   History,
   Search,
   SquarePen,
+  Network,
 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { SidebarSection } from "./SidebarSection";
@@ -90,6 +91,7 @@ export function Sidebar() {
           <SidebarAgents />
 
           <SidebarSection label="Company">
+            <SidebarNavItem to="/org" label="Org" icon={Network} />
             <SidebarNavItem to="/costs" label="Costs" icon={DollarSign} />
             <SidebarNavItem to="/activity" label="Activity" icon={History} />
           </SidebarSection>

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,10 +599,32 @@ export function IssueDetail() {
 
       <Separator />
 
+      <LiveRunWidget issueId={issueId!} companyId={selectedCompanyId} />
+
+      <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 });
             }}
@@ -595,12 +633,12 @@ export function IssueDetail() {
               return attachment.contentPath;
             }}
           />
+        </TabsContent>
 
-      {childIssues.length > 0 && (
+        <TabsContent value="subissues">
-        <>
+          {childIssues.length === 0 ? (
-          <Separator />
+            <p className="text-xs text-muted-foreground">No sub-issues.</p>
-          <div className="space-y-2">
+          ) : (
-            <h3 className="text-sm font-medium text-muted-foreground">Sub-issues</h3>
             <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 && (
-        <>
+        <Collapsible
-          <Separator />
+          open={secondaryOpen.approvals}
-          <div className="space-y-2">
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, approvals: open }))}
-            <h3 className="text-sm font-medium text-muted-foreground">Linked Approvals</h3>
+          className="rounded-lg border border-border"
-            <div className="border border-border rounded-lg divide-y divide-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 && (
-        <>
+        <Collapsible
-          <Separator />
+          open={secondaryOpen.runs}
-          <div className="space-y-2">
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, runs: open }))}
-            <h3 className="text-sm font-medium text-muted-foreground">Linked Runs</h3>
+          className="rounded-lg border border-border"
-            <div className="border border-border rounded-lg divide-y divide-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,34 +749,24 @@ export function IssueDetail() {
                 </Link>
               ))}
             </div>
-          </div>
+          </CollapsibleContent>
-        </>
+        </Collapsible>
       )}
 
-      {/* Activity Log */}
+      {linkedRuns && linkedRuns.length > 0 && (
-      {activity && activity.length > 0 && (
+        <Collapsible
-        <>
+          open={secondaryOpen.cost}
-          <Separator />
+          onOpenChange={(open) => setSecondaryOpen((prev) => ({ ...prev, cost: open }))}
-          <div className="space-y-2">
+          className="rounded-lg border border-border"
-            <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
+        >
-            <div className="space-y-1.5">
+          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
-              {activity.slice(0, 20).map((evt) => (
+            <span className="text-sm font-medium text-muted-foreground">Cost Summary</span>
-                <div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <ChevronDown
-                  <ActorIdentity evt={evt} agentMap={agentMap} />
+              className={cn("h-4 w-4 text-muted-foreground transition-transform", secondaryOpen.cost && "rotate-180")}
-                  <span>{formatAction(evt.action, evt.details)}</span>
+            />
-                  <span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
+          </CollapsibleTrigger>
-                </div>
+          <CollapsibleContent>
-              ))}
+            <div className="border-t border-border px-3 py-2">
-            </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>
               ) : (
@@ -726,7 +787,8 @@ export function IssueDetail() {
                 </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;
+}