Polish UI: enhance dialogs, command palette, and page layouts

Expand NewIssueDialog with richer form fields. Add NewProjectDialog.
Enhance CommandPalette with more actions and search. Improve
CompanySwitcher, EmptyState, and IssueProperties. Flesh out Activity,
Companies, Dashboard, and Inbox pages with real content and layouts.
Refine sidebar, routing, and dialog context. CSS tweaks for dark theme.

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

ui/src/pages/Inbox.tsx

@@ -1,20 +1,50 @@
 import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { approvalsApi } from "../api/approvals";
 import { dashboardApi } from "../api/dashboard";
+import { issuesApi } from "../api/issues";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { useAgents } from "../hooks/useAgents";
 import { useApi } from "../hooks/useApi";
 import { StatusBadge } from "../components/StatusBadge";
+import { StatusIcon } from "../components/StatusIcon";
+import { PriorityIcon } from "../components/PriorityIcon";
 import { EmptyState } from "../components/EmptyState";
 import { timeAgo } from "../lib/timeAgo";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { Inbox as InboxIcon } from "lucide-react";
+import {
+  Inbox as InboxIcon,
+  Shield,
+  AlertTriangle,
+  Clock,
+  ExternalLink,
+} from "lucide-react";
+import type { Issue } from "@paperclip/shared";
+
+const STALE_THRESHOLD_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+function getStaleIssues(issues: Issue[]): Issue[] {
+  const now = Date.now();
+  return issues
+    .filter(
+      (i) =>
+        ["in_progress", "todo"].includes(i.status) &&
+        now - new Date(i.updatedAt).getTime() > STALE_THRESHOLD_MS
+    )
+    .sort(
+      (a, b) =>
+        new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+    );
+}
 
 export function Inbox() {
   const { selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
+  const navigate = useNavigate();
   const [actionError, setActionError] = useState<string | null>(null);
+  const { data: agents } = useAgents(selectedCompanyId);
 
   useEffect(() => {
     setBreadcrumbs([{ label: "Inbox" }]);
@@ -30,8 +60,22 @@ export function Inbox() {
     return dashboardApi.summary(selectedCompanyId);
   }, [selectedCompanyId]);
 
+  const issuesFetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([]);
+    return issuesApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
   const { data: approvals, loading, error, reload } = useApi(approvalsFetcher);
   const { data: dashboard } = useApi(dashboardFetcher);
+  const { data: issues } = useApi(issuesFetcher);
+
+  const staleIssues = issues ? getStaleIssues(issues) : [];
+
+  const agentName = (id: string | null) => {
+    if (!id || !agents) return null;
+    const agent = agents.find((a) => a.id === id);
+    return agent?.name ?? null;
+  };
 
   async function approve(id: string) {
     setActionError(null);
@@ -57,7 +101,13 @@ export function Inbox() {
     return <EmptyState icon={InboxIcon} message="Select a company to view inbox." />;
   }
 
-  const hasContent = (approvals && approvals.length > 0) || (dashboard && (dashboard.staleTasks > 0));
+  const hasApprovals = approvals && approvals.length > 0;
+  const hasAlerts =
+    dashboard &&
+    (dashboard.agents.error > 0 ||
+      dashboard.costs.monthUtilizationPercent >= 80);
+  const hasStale = staleIssues.length > 0;
+  const hasContent = hasApprovals || hasAlerts || hasStale;
 
   return (
     <div className="space-y-6">
@@ -71,28 +121,37 @@ export function Inbox() {
         <EmptyState icon={InboxIcon} message="You're all caught up!" />
       )}
 
-      {approvals && approvals.length > 0 && (
+      {/* Pending Approvals */}
+      {hasApprovals && (
         <div>
-          <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
-            Pending Approvals ({approvals.length})
-          </h3>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+              Approvals
+            </h3>
+            <button
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              onClick={() => navigate("/approvals")}
+            >
+              See all approvals <ExternalLink className="inline h-3 w-3 ml-0.5" />
+            </button>
+          </div>
           <div className="border border-border rounded-md divide-y divide-border">
-            {approvals.map((approval) => (
+            {approvals!.map((approval) => (
               <div key={approval.id} className="p-4 space-y-2">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <span className="text-sm font-medium">{approval.type.replace(/_/g, " ")}</span>
-                    <span className="text-xs text-muted-foreground ml-2">
-                      {timeAgo(approval.createdAt)}
-                    </span>
-                  </div>
-                  <StatusBadge status={approval.status} />
+                <div className="flex items-center gap-2">
+                  <Shield className="h-4 w-4 text-yellow-500 shrink-0" />
+                  <span className="text-sm font-medium">
+                    {approval.type.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
+                  </span>
+                  <span className="text-xs text-muted-foreground ml-auto">
+                    {timeAgo(approval.createdAt)}
+                  </span>
                 </div>
                 <div className="flex gap-2">
                   <Button
                     size="sm"
                     variant="outline"
-                    className="border-green-700 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20"
+                    className="border-green-700 text-green-500 hover:bg-green-900/20"
                     onClick={() => approve(approval.id)}
                   >
                     Approve
@@ -104,6 +163,14 @@ export function Inbox() {
                   >
                     Reject
                   </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="text-muted-foreground ml-auto"
+                    onClick={() => navigate(`/approvals/${approval.id}`)}
+                  >
+                    View details
+                  </Button>
                 </div>
               </div>
             ))}
@@ -111,18 +178,79 @@ export function Inbox() {
         </div>
       )}
 
-      {dashboard && dashboard.staleTasks > 0 && (
+      {/* Alerts */}
+      {hasAlerts && (
         <>
-          <Separator />
+          {hasApprovals && <Separator />}
+          <div>
+            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+              Alerts
+            </h3>
+            <div className="border border-border rounded-md divide-y divide-border">
+              {dashboard!.agents.error > 0 && (
+                <div
+                  className="px-4 py-3 flex items-center gap-3 cursor-pointer hover:bg-accent/50 transition-colors"
+                  onClick={() => navigate("/agents")}
+                >
+                  <AlertTriangle className="h-4 w-4 text-red-400 shrink-0" />
+                  <span className="text-sm">
+                    <span className="font-medium">{dashboard!.agents.error}</span>{" "}
+                    {dashboard!.agents.error === 1 ? "agent has" : "agents have"} errors
+                  </span>
+                </div>
+              )}
+              {dashboard!.costs.monthUtilizationPercent >= 80 && (
+                <div
+                  className="px-4 py-3 flex items-center gap-3 cursor-pointer hover:bg-accent/50 transition-colors"
+                  onClick={() => navigate("/costs")}
+                >
+                  <AlertTriangle className="h-4 w-4 text-yellow-400 shrink-0" />
+                  <span className="text-sm">
+                    Budget at{" "}
+                    <span className="font-medium">
+                      {dashboard!.costs.monthUtilizationPercent}%
+                    </span>{" "}
+                    utilization this month
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Stale Work */}
+      {hasStale && (
+        <>
+          {(hasApprovals || hasAlerts) && <Separator />}
           <div>
             <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
               Stale Work
             </h3>
-            <div className="border border-border rounded-md p-4">
-              <p className="text-sm">
-                <span className="font-medium">{dashboard.staleTasks}</span> tasks have gone stale
-                and may need attention.
-              </p>
+            <div className="border border-border rounded-md divide-y divide-border">
+              {staleIssues.map((issue) => (
+                <div
+                  key={issue.id}
+                  className="px-4 py-3 flex items-center gap-3 cursor-pointer hover:bg-accent/50 transition-colors"
+                  onClick={() => navigate(`/issues/${issue.id}`)}
+                >
+                  <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
+                  <PriorityIcon priority={issue.priority} />
+                  <StatusIcon status={issue.status} />
+                  <span className="text-xs font-mono text-muted-foreground">
+                    {issue.id.slice(0, 8)}
+                  </span>
+                  <span className="text-sm truncate flex-1">{issue.title}</span>
+                  {issue.assigneeAgentId && (
+                    <span className="text-xs text-muted-foreground">
+                      {agentName(issue.assigneeAgentId) ?? issue.assigneeAgentId.slice(0, 8)}
+                    </span>
+                  )}
+                  <span className="text-xs text-muted-foreground shrink-0">
+                    updated {timeAgo(issue.updatedAt)}
+                  </span>
+                </div>
+              ))}
             </div>
           </div>
         </>