feat: URL-based tab navigation + agent status dots on Hall of Fame

- Tabs now update URL query param (?view=ceo, ?view=kanban, ?view=comms)
- Right-click copy link + browser back/forward works
- Add online/idle/offline status dots to /agents podium + leaderboard
- Wrap Home in Suspense for useSearchParams compatibility

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: sonpiaz

app/agents/page.tsx

@@ -26,6 +26,13 @@ const PODIUM_STYLES: Record<number, { border: string; bg: string; label: string;
   3: { border: "border-amber-700/40", bg: "bg-amber-700/10", label: "3rd", size: "text-2xl" },
 };
 
+const STATUS_DOT: Record<string, string> = {
+  online: "bg-green-500",
+  busy: "bg-yellow-500",
+  idle: "bg-zinc-500",
+  offline: "bg-zinc-700",
+};
+
 const BADGE_COLORS: Record<string, string> = {
   "Top Performer": "bg-yellow-500/20 text-yellow-400",
   "Most Productive": "bg-emerald-500/20 text-emerald-400",
@@ -83,8 +90,11 @@ export default function HallOfFamePage() {
                   <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-2">
                     {style.label}
                   </div>
-                  <div className={cn("font-bold uppercase mb-1", style.size, AGENT_COLORS[agent.name.toLowerCase()] ?? "text-zinc-300")}>
-                    {agent.name}
+                  <div className="flex items-center justify-center gap-2 mb-1">
+                    <span className={cn("h-2 w-2 rounded-full shrink-0", STATUS_DOT[agent.status?.toLowerCase()] ?? STATUS_DOT.offline)} />
+                    <span className={cn("font-bold uppercase", style.size, AGENT_COLORS[agent.name.toLowerCase()] ?? "text-zinc-300")}>
+                      {agent.name}
+                    </span>
                   </div>
                   <div className="text-[10px] text-zinc-500 uppercase mb-3">{agent.role}</div>
                   <div className="text-lg font-bold tabular-nums text-zinc-200">
@@ -153,9 +163,12 @@ export default function HallOfFamePage() {
                     <td className="px-3 py-2.5">
                       <Link
                         href={`/agents/${agent.name.toLowerCase()}`}
-                        className={cn("font-bold uppercase hover:underline", AGENT_COLORS[agent.name.toLowerCase()] ?? "text-zinc-300")}
+                        className="flex items-center gap-2 hover:underline"
                       >
-                        {agent.name}
+                        <span className={cn("h-1.5 w-1.5 rounded-full shrink-0", STATUS_DOT[agent.status?.toLowerCase()] ?? STATUS_DOT.offline)} />
+                        <span className={cn("font-bold uppercase", AGENT_COLORS[agent.name.toLowerCase()] ?? "text-zinc-300")}>
+                          {agent.name}
+                        </span>
                       </Link>
                     </td>
                     <td className="text-right px-3 py-2.5 tabular-nums text-zinc-400">{agent.tasksCompleted}</td>

app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useCallback, Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import { useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
@@ -26,6 +27,14 @@ import { sortAgents, AGENT_ORDER } from "@/lib/constants";
 
 /** AGT-181: 2-panel layout — [Sidebar 220px] | [Kanban flex-1]. Agent Profile → Modal, Activity → Drawer */
 export default function Home() {
+  return (
+    <Suspense>
+      <HomeContent />
+    </Suspense>
+  );
+}
+
+function HomeContent() {
   const [date, setDate] = useState(new Date());
   const [dateMode, setDateMode] = useState<DateFilterMode>("day");
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -36,7 +45,13 @@ export default function Home() {
   const [dispatchQueueOpen, setDispatchQueueOpen] = useState(false);
   const [agentSettingsId, setAgentSettingsId] = useState<Id<"agents"> | null>(null);
   const [shortcutsHelpOpen, setShortcutsHelpOpen] = useState(false);
-  const [activeViewTab, setActiveViewTab] = useState<MainViewTab>("kanban");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const viewParam = searchParams.get("view") as MainViewTab | null;
+  const activeViewTab: MainViewTab = viewParam && ["ceo", "kanban", "comms"].includes(viewParam) ? viewParam : "kanban";
+  const setActiveViewTab = useCallback((tab: MainViewTab) => {
+    router.replace(`/?view=${tab}`, { scroll: false });
+  }, [router]);
 
   const agents = useQuery(api.agents.list);
 

components/evox/ViewTabs.tsx

@@ -11,20 +11,16 @@ interface ViewTabsProps {
   className?: string;
 }
 
-const tabs: { id: MainViewTab; label: string }[] = [
-  { id: "ceo", label: "Overview" },
-  { id: "kanban", label: "Kanban" },
-  { id: "comms", label: "Comms" },
-];
-
-const externalLinks: { label: string; href: string }[] = [
-  { label: "Team", href: "/agents" },
+const tabs: { id: MainViewTab; label: string; href: string }[] = [
+  { id: "ceo", label: "Overview", href: "/?view=ceo" },
+  { id: "kanban", label: "Kanban", href: "/?view=kanban" },
+  { id: "comms", label: "Comms", href: "/?view=comms" },
 ];
 
 /**
- * AGT-206: View Tabs — Vercel-style navigation
- * Clean text tabs with active underline indicator.
- * "Team" links to /agents (Hall of Fame + Career Profiles).
+ * AGT-206: View Tabs — Vercel-style navigation with URL links.
+ * Each tab updates the URL query param (?view=...).
+ * "Team" navigates to /agents.
  */
 export function ViewTabs({ activeTab, onTabChange, className }: ViewTabsProps) {
   return (
@@ -37,12 +33,15 @@ export function ViewTabs({ activeTab, onTabChange, className }: ViewTabsProps) {
       aria-label="Dashboard views"
     >
       {tabs.map((tab) => (
-        <button
+        <Link
           key={tab.id}
-          type="button"
+          href={tab.href}
           role="tab"
           aria-selected={activeTab === tab.id}
-          onClick={() => onTabChange(tab.id)}
+          onClick={(e) => {
+            e.preventDefault();
+            onTabChange(tab.id);
+          }}
           className={cn(
             "relative px-3 py-2.5 text-sm transition-colors whitespace-nowrap shrink-0",
             activeTab === tab.id
@@ -54,18 +53,15 @@ export function ViewTabs({ activeTab, onTabChange, className }: ViewTabsProps) {
           {activeTab === tab.id && (
             <span className="absolute bottom-0 left-0 right-0 h-px bg-white" />
           )}
-        </button>
-      ))}
-
-      {externalLinks.map((link) => (
-        <Link
-          key={link.href}
-          href={link.href}
-          className="relative px-3 py-2.5 text-sm text-zinc-500 hover:text-zinc-300 transition-colors whitespace-nowrap shrink-0"
-        >
-          {link.label}
         </Link>
       ))}
+
+      <Link
+        href="/agents"
+        className="relative px-3 py-2.5 text-sm text-zinc-500 hover:text-zinc-300 transition-colors whitespace-nowrap shrink-0"
+      >
+        Team
+      </Link>
     </div>
   );
 }