Overhaul UI with shadcn components and new pages

Add shadcn/ui components (badge, button, card, input, select,
separator). Add company context provider. New pages: Activity,
Approvals, Companies, Costs, Org chart. Restyle existing pages
(Dashboard, Agents, Issues, Goals, Projects) with shadcn components
and dark theme. Update layout, sidebar navigation, and routing.

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

ui/src/pages/Activity.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from "react";
+import { activityApi } from "../api/activity";
+import { useCompany } from "../context/CompanyContext";
+import { useApi } from "../hooks/useApi";
+import { formatDate } from "../lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
+export function Activity() {
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return activityApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data, loading, error } = useApi(fetcher);
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Activity</h2>
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+
+      {data && data.length === 0 && <p className="text-muted-foreground">No activity yet.</p>}
+
+      {data && data.length > 0 && (
+        <div className="space-y-2">
+          {data.map((event) => (
+            <Card key={event.id}>
+              <CardContent className="p-3 text-sm">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="font-medium">{event.action}</span>
+                  <span className="text-xs text-muted-foreground">{formatDate(event.createdAt)}</span>
+                </div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {event.entityType} {event.entityId}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/pages/Agents.tsx

@@ -1,33 +1,91 @@
+import { useState } from "react";
 import { useAgents } from "../hooks/useAgents";
 import { StatusBadge } from "../components/StatusBadge";
 import { formatCents } from "../lib/utils";
+import { useCompany } from "../context/CompanyContext";
+import { agentsApi } from "../api/agents";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 
 export function Agents() {
-  const { data: agents, loading, error } = useAgents();
+  const { selectedCompanyId } = useCompany();
+  const { data: agents, loading, error, reload } = useAgents(selectedCompanyId);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  async function invoke(agentId: string) {
+    setActionError(null);
+    try {
+      await agentsApi.invoke(agentId);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to invoke agent");
+    }
+  }
+
+  async function pause(agentId: string) {
+    setActionError(null);
+    try {
+      await agentsApi.pause(agentId);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to pause agent");
+    }
+  }
+
+  async function resume(agentId: string) {
+    setActionError(null);
+    try {
+      await agentsApi.resume(agentId);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to resume agent");
+    }
+  }
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
 
   return (
     <div>
       <h2 className="text-2xl font-bold mb-4">Agents</h2>
-      {loading && <p className="text-gray-500">Loading...</p>}
-      {error && <p className="text-red-600">{error.message}</p>}
-      {agents && agents.length === 0 && <p className="text-gray-500">No agents yet.</p>}
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {actionError && <p className="text-destructive mb-3">{actionError}</p>}
+      {agents && agents.length === 0 && <p className="text-muted-foreground">No agents yet.</p>}
       {agents && agents.length > 0 && (
         <div className="grid gap-4">
           {agents.map((agent) => (
-            <div key={agent.id} className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-semibold">{agent.name}</h3>
-                  <p className="text-sm text-gray-500">{agent.role}</p>
+            <Card key={agent.id}>
+              <CardContent className="p-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">{agent.name}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {agent.role}
+                      {agent.title ? ` - ${agent.title}` : ""}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span className="text-sm text-muted-foreground">
+                      {formatCents(agent.spentMonthlyCents)} / {formatCents(agent.budgetMonthlyCents)}
+                    </span>
+                    <StatusBadge status={agent.status} />
+                  </div>
                 </div>
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-gray-500">
-                    {formatCents(agent.spentCents)} / {formatCents(agent.budgetCents)}
-                  </span>
-                  <StatusBadge status={agent.status} />
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm" onClick={() => invoke(agent.id)}>
+                    Invoke
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => pause(agent.id)}>
+                    Pause
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => resume(agent.id)}>
+                    Resume
+                  </Button>
                 </div>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}

ui/src/pages/Approvals.tsx

@@ -0,0 +1,91 @@
+import { useCallback, useState } from "react";
+import { approvalsApi } from "../api/approvals";
+import { useCompany } from "../context/CompanyContext";
+import { useApi } from "../hooks/useApi";
+import { StatusBadge } from "../components/StatusBadge";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export function Approvals() {
+  const { selectedCompanyId } = useCompany();
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return approvalsApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data, loading, error, reload } = useApi(fetcher);
+
+  async function approve(id: string) {
+    setActionError(null);
+    try {
+      await approvalsApi.approve(id);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to approve");
+    }
+  }
+
+  async function reject(id: string) {
+    setActionError(null);
+    try {
+      await approvalsApi.reject(id);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to reject");
+    }
+  }
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Approvals</h2>
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {actionError && <p className="text-destructive">{actionError}</p>}
+
+      {data && data.length === 0 && <p className="text-muted-foreground">No approvals.</p>}
+
+      {data && data.length > 0 && (
+        <div className="grid gap-3">
+          {data.map((approval) => (
+            <Card key={approval.id}>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">{approval.type}</p>
+                    <p className="text-xs text-muted-foreground">{approval.id}</p>
+                  </div>
+                  <StatusBadge status={approval.status} />
+                </div>
+                {approval.status === "pending" && (
+                  <div className="flex gap-2 mt-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="border-green-700 text-green-400 hover:bg-green-900/50"
+                      onClick={() => approve(approval.id)}
+                    >
+                      Approve
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => reject(approval.id)}
+                    >
+                      Reject
+                    </Button>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/pages/Companies.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { useCompany } from "../context/CompanyContext";
+import { formatCents } from "../lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+export function Companies() {
+  const {
+    companies,
+    selectedCompanyId,
+    setSelectedCompanyId,
+    createCompany,
+    loading,
+    error,
+    reloadCompanies,
+  } = useCompany();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [budget, setBudget] = useState("0");
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setSubmitting(true);
+    setSubmitError(null);
+    try {
+      await createCompany({
+        name: name.trim(),
+        description: description.trim() || null,
+        budgetMonthlyCents: Number(budget) || 0,
+      });
+      setName("");
+      setDescription("");
+      setBudget("0");
+      await reloadCompanies();
+    } catch (err) {
+      setSubmitError(err instanceof Error ? err.message : "Failed to create company");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">Companies</h2>
+        <p className="text-muted-foreground">Create and select the company you are operating.</p>
+      </div>
+
+      <Card>
+        <CardContent className="p-4 space-y-3">
+          <h3 className="font-semibold">Create Company</h3>
+          <form onSubmit={onSubmit} className="space-y-3">
+            <div className="grid md:grid-cols-3 gap-3">
+              <Input
+                placeholder="Company name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+              <Input
+                placeholder="Description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              />
+              <Input
+                placeholder="Monthly budget (cents)"
+                value={budget}
+                onChange={(e) => setBudget(e.target.value.replace(/[^0-9]/g, ""))}
+              />
+            </div>
+            {submitError && <p className="text-sm text-destructive">{submitError}</p>}
+            <Button type="submit" disabled={submitting}>
+              {submitting ? "Creating..." : "Create Company"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {loading && <p className="text-muted-foreground">Loading companies...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+
+      <div className="grid gap-3">
+        {companies.map((company) => {
+          const selected = company.id === selectedCompanyId;
+          return (
+            <button
+              key={company.id}
+              onClick={() => setSelectedCompanyId(company.id)}
+              className={`text-left bg-card border rounded-lg p-4 ${
+                selected ? "border-primary ring-1 ring-primary" : "border-border"
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-semibold">{company.name}</h3>
+                  {company.description && (
+                    <p className="text-sm text-muted-foreground mt-1">{company.description}</p>
+                  )}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  {formatCents(company.spentMonthlyCents)} / {formatCents(company.budgetMonthlyCents)}
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

ui/src/pages/Costs.tsx

@@ -0,0 +1,83 @@
+import { useCallback } from "react";
+import { costsApi } from "../api/costs";
+import { useCompany } from "../context/CompanyContext";
+import { useApi } from "../hooks/useApi";
+import { formatCents } from "../lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
+export function Costs() {
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(async () => {
+    if (!selectedCompanyId) {
+      return null;
+    }
+
+    const [summary, byAgent, byProject] = await Promise.all([
+      costsApi.summary(selectedCompanyId),
+      costsApi.byAgent(selectedCompanyId),
+      costsApi.byProject(selectedCompanyId),
+    ]);
+
+    return { summary, byAgent, byProject };
+  }, [selectedCompanyId]);
+
+  const { data, loading, error } = useApi(fetcher);
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
+  return (
+    <div className="space-y-5">
+      <h2 className="text-2xl font-bold">Costs</h2>
+
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+
+      {data && (
+        <>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Month to Date</p>
+              <p className="text-lg font-semibold mt-1">
+                {formatCents(data.summary.monthSpendCents)} / {formatCents(data.summary.monthBudgetCents)}
+              </p>
+              <p className="text-sm text-muted-foreground">Utilization {data.summary.monthUtilizationPercent}%</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <h3 className="font-semibold mb-3">By Agent</h3>
+              <div className="space-y-2 text-sm">
+                {data.byAgent.map((row, idx) => (
+                  <div key={`${row.agentId ?? "na"}-${idx}`} className="flex justify-between">
+                    <span>{row.agentId}</span>
+                    <span>{formatCents(row.costCents)}</span>
+                  </div>
+                ))}
+                {data.byAgent.length === 0 && <p className="text-muted-foreground">No cost events yet.</p>}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="p-4">
+              <h3 className="font-semibold mb-3">By Project</h3>
+              <div className="space-y-2 text-sm">
+                {data.byProject.map((row, idx) => (
+                  <div key={`${row.projectId ?? "na"}-${idx}`} className="flex justify-between">
+                    <span>{row.projectId}</span>
+                    <span>{formatCents(row.costCents)}</span>
+                  </div>
+                ))}
+                {data.byProject.length === 0 && <p className="text-muted-foreground">No project-attributed costs yet.</p>}
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}

ui/src/pages/Dashboard.tsx

@@ -1,8 +1,72 @@
+import { useCallback } from "react";
+import { dashboardApi } from "../api/dashboard";
+import { useCompany } from "../context/CompanyContext";
+import { useApi } from "../hooks/useApi";
+import { formatCents } from "../lib/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
 export function Dashboard() {
+  const { selectedCompanyId, selectedCompany } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) {
+      return Promise.resolve(null);
+    }
+    return dashboardApi.summary(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data, loading, error } = useApi(fetcher);
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Create or select a company to view the dashboard.</p>;
+  }
+
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
-      <p className="text-gray-600">Welcome to Paperclip. Select a section from the sidebar.</p>
+    <div className="space-y-4">
+      <div>
+        <h2 className="text-2xl font-bold">Dashboard</h2>
+        <p className="text-muted-foreground">{selectedCompany?.name}</p>
+      </div>
+
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+
+      {data && (
+        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Agents</p>
+              <p className="mt-2 text-sm">Running: {data.agents.running}</p>
+              <p className="text-sm">Paused: {data.agents.paused}</p>
+              <p className="text-sm">Error: {data.agents.error}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Tasks</p>
+              <p className="mt-2 text-sm">Open: {data.tasks.open}</p>
+              <p className="text-sm">In Progress: {data.tasks.inProgress}</p>
+              <p className="text-sm">Blocked: {data.tasks.blocked}</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Costs</p>
+              <p className="mt-2 text-sm">
+                {formatCents(data.costs.monthSpendCents)} / {formatCents(data.costs.monthBudgetCents)}
+              </p>
+              <p className="text-sm">Utilization: {data.costs.monthUtilizationPercent}%</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <p className="text-sm text-muted-foreground">Governance</p>
+              <p className="mt-2 text-sm">Pending approvals: {data.pendingApprovals}</p>
+              <p className="text-sm">Stale tasks: {data.staleTasks}</p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
     </div>
   );
 }

ui/src/pages/Goals.tsx

@@ -1,46 +1,45 @@
 import { useCallback } from "react";
 import { goalsApi } from "../api/goals";
 import { useApi } from "../hooks/useApi";
-import { cn } from "../lib/utils";
-
-const levelColors: Record<string, string> = {
-  company: "bg-purple-100 text-purple-800",
-  team: "bg-blue-100 text-blue-800",
-  agent: "bg-indigo-100 text-indigo-800",
-  task: "bg-gray-100 text-gray-600",
-};
+import { StatusBadge } from "../components/StatusBadge";
+import { useCompany } from "../context/CompanyContext";
+import { Card, CardContent } from "@/components/ui/card";
 
 export function Goals() {
-  const fetcher = useCallback(() => goalsApi.list(), []);
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return goalsApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
   const { data: goals, loading, error } = useApi(fetcher);
 
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
   return (
     <div>
       <h2 className="text-2xl font-bold mb-4">Goals</h2>
-      {loading && <p className="text-gray-500">Loading...</p>}
-      {error && <p className="text-red-600">{error.message}</p>}
-      {goals && goals.length === 0 && <p className="text-gray-500">No goals yet.</p>}
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {goals && goals.length === 0 && <p className="text-muted-foreground">No goals yet.</p>}
       {goals && goals.length > 0 && (
         <div className="grid gap-4">
           {goals.map((goal) => (
-            <div key={goal.id} className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-semibold">{goal.title}</h3>
-                  {goal.description && (
-                    <p className="text-sm text-gray-500 mt-1">{goal.description}</p>
-                  )}
+            <Card key={goal.id}>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">{goal.title}</h3>
+                    {goal.description && <p className="text-sm text-muted-foreground mt-1">{goal.description}</p>}
+                    <p className="text-xs text-muted-foreground mt-2">Level: {goal.level}</p>
+                  </div>
+                  <StatusBadge status={goal.status} />
                 </div>
-                <span
-                  className={cn(
-                    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-                    levelColors[goal.level] ?? "bg-gray-100 text-gray-600"
-                  )}
-                >
-                  {goal.level}
-                </span>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}

ui/src/pages/Issues.tsx

@@ -3,50 +3,62 @@ import { issuesApi } from "../api/issues";
 import { useApi } from "../hooks/useApi";
 import { StatusBadge } from "../components/StatusBadge";
 import { cn } from "../lib/utils";
+import { useCompany } from "../context/CompanyContext";
+import { Card, CardContent } from "@/components/ui/card";
 
 const priorityColors: Record<string, string> = {
-  critical: "text-red-700 bg-red-50",
-  high: "text-orange-700 bg-orange-50",
-  medium: "text-yellow-700 bg-yellow-50",
-  low: "text-gray-600 bg-gray-50",
+  critical: "text-red-300 bg-red-900/50",
+  high: "text-orange-300 bg-orange-900/50",
+  medium: "text-yellow-300 bg-yellow-900/50",
+  low: "text-neutral-400 bg-neutral-800",
 };
 
 export function Issues() {
-  const fetcher = useCallback(() => issuesApi.list(), []);
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return issuesApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
   const { data: issues, loading, error } = useApi(fetcher);
 
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
   return (
     <div>
-      <h2 className="text-2xl font-bold mb-4">Issues</h2>
-      {loading && <p className="text-gray-500">Loading...</p>}
-      {error && <p className="text-red-600">{error.message}</p>}
-      {issues && issues.length === 0 && <p className="text-gray-500">No issues yet.</p>}
+      <h2 className="text-2xl font-bold mb-4">Tasks</h2>
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {issues && issues.length === 0 && <p className="text-muted-foreground">No tasks yet.</p>}
       {issues && issues.length > 0 && (
         <div className="grid gap-4">
           {issues.map((issue) => (
-            <div key={issue.id} className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-semibold">{issue.title}</h3>
-                  {issue.description && (
-                    <p className="text-sm text-gray-500 mt-1 line-clamp-1">
-                      {issue.description}
-                    </p>
-                  )}
-                </div>
-                <div className="flex items-center gap-3">
-                  <span
-                    className={cn(
-                      "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-                      priorityColors[issue.priority] ?? "text-gray-600 bg-gray-50"
+            <Card key={issue.id}>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">{issue.title}</h3>
+                    {issue.description && (
+                      <p className="text-sm text-muted-foreground mt-1 line-clamp-1">{issue.description}</p>
                     )}
-                  >
-                    {issue.priority}
-                  </span>
-                  <StatusBadge status={issue.status} />
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={cn(
+                        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
+                        priorityColors[issue.priority] ?? "text-neutral-400 bg-neutral-800",
+                      )}
+                    >
+                      {issue.priority}
+                    </span>
+                    <StatusBadge status={issue.status} />
+                  </div>
                 </div>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}

ui/src/pages/Org.tsx

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { agentsApi, type OrgNode } from "../api/agents";
+import { useCompany } from "../context/CompanyContext";
+import { useApi } from "../hooks/useApi";
+import { StatusBadge } from "../components/StatusBadge";
+import { Card, CardContent } from "@/components/ui/card";
+
+function OrgTree({ nodes, depth = 0 }: { nodes: OrgNode[]; depth?: number }) {
+  return (
+    <div className="space-y-2">
+      {nodes.map((node) => (
+        <div key={node.id}>
+          <Card style={{ marginLeft: `${depth * 20}px` }}>
+            <CardContent className="p-3 flex items-center justify-between">
+              <div>
+                <p className="font-medium">{node.name}</p>
+                <p className="text-xs text-muted-foreground">{node.role}</p>
+              </div>
+              <StatusBadge status={node.status} />
+            </CardContent>
+          </Card>
+          {node.reports.length > 0 && <OrgTree nodes={node.reports} depth={depth + 1} />}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function Org() {
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([] as OrgNode[]);
+    return agentsApi.org(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data, loading, error } = useApi(fetcher);
+
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
+  return (
+    <div>
+      <h2 className="text-2xl font-bold mb-4">Org Chart</h2>
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {data && data.length === 0 && <p className="text-muted-foreground">No agents in org.</p>}
+      {data && data.length > 0 && <OrgTree nodes={data} />}
+    </div>
+  );
+}

ui/src/pages/Projects.tsx

@@ -2,31 +2,49 @@ import { useCallback } from "react";
 import { projectsApi } from "../api/projects";
 import { useApi } from "../hooks/useApi";
 import { formatDate } from "../lib/utils";
+import { StatusBadge } from "../components/StatusBadge";
+import { useCompany } from "../context/CompanyContext";
+import { Card, CardContent } from "@/components/ui/card";
 
 export function Projects() {
-  const fetcher = useCallback(() => projectsApi.list(), []);
+  const { selectedCompanyId } = useCompany();
+
+  const fetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return projectsApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
   const { data: projects, loading, error } = useApi(fetcher);
 
+  if (!selectedCompanyId) {
+    return <p className="text-muted-foreground">Select a company first.</p>;
+  }
+
   return (
     <div>
       <h2 className="text-2xl font-bold mb-4">Projects</h2>
-      {loading && <p className="text-gray-500">Loading...</p>}
-      {error && <p className="text-red-600">{error.message}</p>}
-      {projects && projects.length === 0 && <p className="text-gray-500">No projects yet.</p>}
+      {loading && <p className="text-muted-foreground">Loading...</p>}
+      {error && <p className="text-destructive">{error.message}</p>}
+      {projects && projects.length === 0 && <p className="text-muted-foreground">No projects yet.</p>}
       {projects && projects.length > 0 && (
         <div className="grid gap-4">
           {projects.map((project) => (
-            <div key={project.id} className="bg-white rounded-lg border border-gray-200 p-4">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="font-semibold">{project.name}</h3>
-                  {project.description && (
-                    <p className="text-sm text-gray-500 mt-1">{project.description}</p>
-                  )}
+            <Card key={project.id}>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold">{project.name}</h3>
+                    {project.description && (
+                      <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
+                    )}
+                    {project.targetDate && (
+                      <p className="text-xs text-muted-foreground mt-2">Target: {formatDate(project.targetDate)}</p>
+                    )}
+                  </div>
+                  <StatusBadge status={project.status} />
                 </div>
-                <span className="text-sm text-gray-400">{formatDate(project.createdAt)}</span>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}