Upgrade Companies page: stats, delete, status badge, dropdown menu

Server:
- companyService.stats() returns per-company agent/issue counts in one query pair
- companyService.remove() cascades deletes across all child tables in dependency order
- GET /companies/stats endpoint (board-accessible)
- DELETE /companies/:companyId endpoint (board-only)

UI:
- Companies page shows agent count, issue count, spend/budget, and created-at per card
- Company status shown as a colored badge (active/paused/archived)
- Three-dot dropdown menu with Rename and Delete Company actions
- Inline delete confirmation to prevent accidental data loss
- 'New Company' button opens onboarding wizard instead of inline form

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

server/src/routes/companies.ts

@@ -14,6 +14,11 @@ export function companyRoutes(db: Db) {
     res.json(result);
   });
 
+  router.get("/stats", async (_req, res) => {
+    const stats = await svc.stats();
+    res.json(stats);
+  });
+
   router.get("/:companyId", async (req, res) => {
     const companyId = req.params.companyId as string;
     const company = await svc.getById(companyId);
@@ -78,5 +83,16 @@ export function companyRoutes(db: Db) {
     res.json(company);
   });
 
+  router.delete("/:companyId", async (req, res) => {
+    assertBoard(req);
+    const companyId = req.params.companyId as string;
+    const company = await svc.remove(companyId);
+    if (!company) {
+      res.status(404).json({ error: "Company not found" });
+      return;
+    }
+    res.json({ ok: true });
+  });
+
   return router;
 }

server/src/services/companies.ts

@@ -1,6 +1,21 @@
-import { eq } from "drizzle-orm";
+import { eq, sql, count } from "drizzle-orm";
 import type { Db } from "@paperclip/db";
-import { companies } from "@paperclip/db";
+import {
+  companies,
+  agents,
+  agentApiKeys,
+  agentRuntimeState,
+  agentWakeupRequests,
+  issues,
+  issueComments,
+  projects,
+  goals,
+  heartbeatRuns,
+  heartbeatRunEvents,
+  costEvents,
+  approvals,
+  activityLog,
+} from "@paperclip/db";
 
 export function companyService(db: Db) {
   return {
@@ -35,5 +50,53 @@ export function companyService(db: Db) {
         .where(eq(companies.id, id))
         .returning()
         .then((rows) => rows[0] ?? null),
+
+    remove: (id: string) =>
+      db.transaction(async (tx) => {
+        // Delete from child tables in dependency order
+        await tx.delete(heartbeatRunEvents).where(eq(heartbeatRunEvents.companyId, id));
+        await tx.delete(heartbeatRuns).where(eq(heartbeatRuns.companyId, id));
+        await tx.delete(agentWakeupRequests).where(eq(agentWakeupRequests.companyId, id));
+        await tx.delete(agentApiKeys).where(eq(agentApiKeys.companyId, id));
+        await tx.delete(agentRuntimeState).where(eq(agentRuntimeState.companyId, id));
+        await tx.delete(issueComments).where(eq(issueComments.companyId, id));
+        await tx.delete(costEvents).where(eq(costEvents.companyId, id));
+        await tx.delete(approvals).where(eq(approvals.companyId, id));
+        await tx.delete(issues).where(eq(issues.companyId, id));
+        await tx.delete(goals).where(eq(goals.companyId, id));
+        await tx.delete(projects).where(eq(projects.companyId, id));
+        await tx.delete(agents).where(eq(agents.companyId, id));
+        await tx.delete(activityLog).where(eq(activityLog.companyId, id));
+        const rows = await tx
+          .delete(companies)
+          .where(eq(companies.id, id))
+          .returning();
+        return rows[0] ?? null;
+      }),
+
+    stats: () =>
+      Promise.all([
+        db
+          .select({ companyId: agents.companyId, count: count() })
+          .from(agents)
+          .groupBy(agents.companyId),
+        db
+          .select({ companyId: issues.companyId, count: count() })
+          .from(issues)
+          .groupBy(issues.companyId),
+      ]).then(([agentRows, issueRows]) => {
+        const result: Record<string, { agentCount: number; issueCount: number }> = {};
+        for (const row of agentRows) {
+          result[row.companyId] = { agentCount: row.count, issueCount: 0 };
+        }
+        for (const row of issueRows) {
+          if (result[row.companyId]) {
+            result[row.companyId].issueCount = row.count;
+          } else {
+            result[row.companyId] = { agentCount: 0, issueCount: row.count };
+          }
+        }
+        return result;
+      }),
   };
 }

ui/src/api/companies.ts

@@ -1,9 +1,12 @@
 import type { Company } from "@paperclip/shared";
 import { api } from "./client";
 
+export type CompanyStats = Record<string, { agentCount: number; issueCount: number }>;
+
 export const companiesApi = {
   list: () => api.get<Company[]>("/companies"),
   get: (companyId: string) => api.get<Company>(`/companies/${companyId}`),
+  stats: () => api.get<CompanyStats>("/companies/stats"),
   create: (data: { name: string; description?: string | null; budgetMonthlyCents?: number }) =>
     api.post<Company>("/companies", data),
   update: (
@@ -11,4 +14,5 @@ export const companiesApi = {
     data: Partial<Pick<Company, "name" | "description" | "status" | "budgetMonthlyCents">>,
   ) => api.patch<Company>(`/companies/${companyId}`, data),
   archive: (companyId: string) => api.post<Company>(`/companies/${companyId}/archive`, {}),
+  remove: (companyId: string) => api.delete<{ ok: true }>(`/companies/${companyId}`),
 };

ui/src/lib/queryKeys.ts

@@ -2,6 +2,7 @@ export const queryKeys = {
   companies: {
     all: ["companies"] as const,
     detail: (id: string) => ["companies", id] as const,
+    stats: ["companies", "stats"] as const,
   },
   agents: {
     list: (companyId: string) => ["agents", companyId] as const,

ui/src/pages/Companies.tsx

@@ -1,14 +1,32 @@
 import { useState, useEffect } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCompany } from "../context/CompanyContext";
 import { useDialog } from "../context/DialogContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { companiesApi } from "../api/companies";
 import { queryKeys } from "../lib/queryKeys";
-import { formatCents } from "../lib/utils";
+import { formatCents, relativeTime } from "../lib/utils";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { Pencil, Check, X, Plus } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Pencil,
+  Check,
+  X,
+  Plus,
+  MoreHorizontal,
+  Trash2,
+  Users,
+  CircleDot,
+  DollarSign,
+  Calendar,
+} from "lucide-react";
 
 export function Companies() {
   const {
@@ -22,9 +40,15 @@ export function Companies() {
   const { setBreadcrumbs } = useBreadcrumbs();
   const queryClient = useQueryClient();
 
+  const { data: stats } = useQuery({
+    queryKey: queryKeys.companies.stats,
+    queryFn: () => companiesApi.stats(),
+  });
+
   // Inline edit state
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
 
   const editMutation = useMutation({
     mutationFn: ({ id, newName }: { id: string; newName: string }) =>
@@ -35,6 +59,15 @@ export function Companies() {
     },
   });
 
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => companiesApi.remove(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.stats });
+      setConfirmDeleteId(null);
+    },
+  });
+
   useEffect(() => {
     setBreadcrumbs([{ label: "Companies" }]);
   }, [setBreadcrumbs]);
@@ -72,10 +105,20 @@ export function Companies() {
         {error && <p className="text-sm text-destructive">{error.message}</p>}
       </div>
 
-      <div className="grid gap-3">
+      <div className="grid gap-4">
         {companies.map((company) => {
           const selected = company.id === selectedCompanyId;
           const isEditing = editingId === company.id;
+          const isConfirmingDelete = confirmDeleteId === company.id;
+          const companyStats = stats?.[company.id];
+          const agentCount = companyStats?.agentCount ?? 0;
+          const issueCount = companyStats?.issueCount ?? 0;
+          const budgetPct =
+            company.budgetMonthlyCents > 0
+              ? Math.round(
+                  (company.spentMonthlyCents / company.budgetMonthlyCents) * 100,
+                )
+              : 0;
 
           return (
             <div
@@ -89,14 +132,20 @@ export function Companies() {
                   setSelectedCompanyId(company.id);
                 }
               }}
-              className={`group text-left bg-card border rounded-lg p-4 transition-colors cursor-pointer ${
+              className={`group text-left bg-card border rounded-lg p-5 transition-colors cursor-pointer ${
-                selected ? "border-primary ring-1 ring-primary" : "border-border hover:border-muted-foreground/30"
+                selected
+                  ? "border-primary ring-1 ring-primary"
+                  : "border-border hover:border-muted-foreground/30"
               }`}
             >
-              <div className="flex items-center justify-between">
+              {/* Header row: name + menu */}
+              <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
                   {isEditing ? (
-                    <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                    <div
+                      className="flex items-center gap-2"
+                      onClick={(e) => e.stopPropagation()}
+                    >
                       <Input
                         value={editName}
                         onChange={(e) => setEditName(e.target.value)}
@@ -121,7 +170,18 @@ export function Companies() {
                     </div>
                   ) : (
                     <div className="flex items-center gap-2">
-                      <h3 className="font-semibold">{company.name}</h3>
+                      <h3 className="font-semibold text-base">{company.name}</h3>
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${
+                          company.status === "active"
+                            ? "bg-green-500/10 text-green-600 dark:text-green-400"
+                            : company.status === "paused"
+                              ? "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400"
+                              : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {company.status}
+                      </span>
                       <Button
                         variant="ghost"
                         size="icon-xs"
@@ -136,13 +196,103 @@ export function Companies() {
                     </div>
                   )}
                   {company.description && !isEditing && (
-                    <p className="text-sm text-muted-foreground mt-1">{company.description}</p>
+                    <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
+                      {company.description}
+                    </p>
                   )}
                 </div>
-                <div className="text-sm text-muted-foreground">
+
-                  {formatCents(company.spentMonthlyCents)} / {formatCents(company.budgetMonthlyCents)}
+                {/* Three-dot menu */}
+                <div onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        className="text-muted-foreground opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => startEdit(company.id, company.name)}
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                        Rename
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        variant="destructive"
+                        onClick={() => setConfirmDeleteId(company.id)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Delete Company
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               </div>
+
+              {/* Stats row */}
+              <div className="flex items-center gap-5 mt-4 text-sm text-muted-foreground">
+                <div className="flex items-center gap-1.5">
+                  <Users className="h-3.5 w-3.5" />
+                  <span>
+                    {agentCount} {agentCount === 1 ? "agent" : "agents"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <CircleDot className="h-3.5 w-3.5" />
+                  <span>
+                    {issueCount} {issueCount === 1 ? "issue" : "issues"}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <DollarSign className="h-3.5 w-3.5" />
+                  <span>
+                    {formatCents(company.spentMonthlyCents)} /{" "}
+                    {formatCents(company.budgetMonthlyCents)}
+                  </span>
+                  {company.budgetMonthlyCents > 0 && (
+                    <span className="text-xs">({budgetPct}%)</span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1.5 ml-auto">
+                  <Calendar className="h-3.5 w-3.5" />
+                  <span>Created {relativeTime(company.createdAt)}</span>
+                </div>
+              </div>
+
+              {/* Delete confirmation */}
+              {isConfirmingDelete && (
+                <div
+                  className="mt-4 flex items-center justify-between bg-destructive/5 border border-destructive/20 rounded-md px-4 py-3"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <p className="text-sm text-destructive font-medium">
+                    Delete this company and all its data? This cannot be undone.
+                  </p>
+                  <div className="flex items-center gap-2 ml-4 shrink-0">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setConfirmDeleteId(null)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => deleteMutation.mutate(company.id)}
+                      disabled={deleteMutation.isPending}
+                    >
+                      {deleteMutation.isPending ? "Deleting..." : "Delete"}
+                    </Button>
+                  </div>
+                </div>
+              )}
             </div>
           );
         })}