feat(ui): add auth pages, company rail, inbox redesign, and page improvements

Add Auth sign-in/sign-up page and InviteLanding page for invite acceptance.
Add CloudAccessGate that checks deployment mode and redirects to /auth when
session is required. Add CompanyRail with drag-and-drop company switching.
Add MarkdownBody prose renderer. Redesign Inbox with category filters and
inline join-request approval. Refactor AgentDetail to overview/configure/runs
views with claude-login support. Replace navigate() anti-patterns with <Link>
components in Dashboard and MetricCard. Add live-run indicators in sidebar
agents. Fix LiveUpdatesProvider cache key resolution for issue identifiers.
Add auth, health, and access API clients.

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

ui/src/components/MetricCard.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
 import { Card, CardContent } from "@/components/ui/card";
 
 interface MetricCardProps {
@@ -7,25 +8,22 @@ interface MetricCardProps {
   value: string | number;
   label: string;
   description?: ReactNode;
+  to?: string;
   onClick?: () => void;
 }
 
-export function MetricCard({ icon: Icon, value, label, description, onClick }: MetricCardProps) {
-  return (
+export function MetricCard({ icon: Icon, value, label, description, to, onClick }: MetricCardProps) {
+  const isClickable = !!(to || onClick);
+
+  const inner = (
     <Card>
       <CardContent className="p-3 sm:p-4">
         <div className="flex gap-2 sm:gap-3">
           <div className="flex-1 min-w-0">
-            <p
-              className={`text-lg sm:text-2xl font-bold${onClick ? " cursor-pointer" : ""}`}
-              onClick={onClick}
-            >
+            <p className={`text-lg sm:text-2xl font-bold${isClickable ? " cursor-pointer" : ""}`}>
               {value}
             </p>
-            <p
-              className={`text-xs sm:text-sm text-muted-foreground${onClick ? " cursor-pointer" : ""}`}
-              onClick={onClick}
-            >
+            <p className={`text-xs sm:text-sm text-muted-foreground${isClickable ? " cursor-pointer" : ""}`}>
               {label}
             </p>
             {description && (
@@ -39,4 +37,22 @@ export function MetricCard({ icon: Icon, value, label, description, onClick }: M
       </CardContent>
     </Card>
   );
+
+  if (to) {
+    return (
+      <Link to={to} className="no-underline text-inherit" onClick={onClick}>
+        {inner}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <div className="cursor-pointer" onClick={onClick}>
+        {inner}
+      </div>
+    );
+  }
+
+  return inner;
 }