feat(21-03): add cross-screen navigation links

- Remove disabled nav stubs (Agents, Tasks, Settings) from AppLayout
- Make TaskRow agent names clickable links to inbox page
- Add task ID link and "View in context" link in inbox detail panel

packages/web/src/components/TaskRow.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@tanstack/react-router";
 import { StatusBadge } from "@/components/StatusBadge";
 import { DependencyIndicator } from "@/components/DependencyIndicator";
 import { cn } from "@/lib/utils";
@@ -53,7 +54,13 @@ export function TaskRow({
 
         {/* Agent assignment */}
         {agentName && (
-          <span className="shrink-0 text-xs text-blue-500">[{agentName}]</span>
+          <Link
+            to="/inbox"
+            className="shrink-0 text-xs text-primary hover:underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            [{agentName}]
+          </Link>
         )}
 
         {/* Status badge */}

packages/web/src/layouts/AppLayout.tsx

@@ -1,11 +1,8 @@
 import { Link } from '@tanstack/react-router'
 
 const navItems = [
-  { label: 'Initiatives', to: '/initiatives', enabled: true },
+  { label: 'Initiatives', to: '/initiatives' },
-  { label: 'Inbox', to: '/inbox', enabled: true },
+  { label: 'Inbox', to: '/inbox' },
-  { label: 'Agents', to: '#', enabled: false },
-  { label: 'Tasks', to: '#', enabled: false },
-  { label: 'Settings', to: '#', enabled: false },
 ] as const
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
@@ -20,27 +17,18 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
         </div>
         {/* Navigation */}
         <nav className="mx-auto flex max-w-7xl gap-1 px-6 pb-2">
-          {navItems.map((item) =>
+          {navItems.map((item) => (
-            item.enabled ? (
+            <Link
-              <Link
+              key={item.label}
-                key={item.label}
+              to={item.to}
-                to={item.to}
+              className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
-                className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+              activeProps={{
-                activeProps={{
+                className: 'rounded-md px-3 py-1.5 text-sm font-medium text-foreground bg-muted',
-                  className: 'rounded-md px-3 py-1.5 text-sm font-medium text-foreground bg-muted',
+              }}
-                }}
+            >
-              >
+              {item.label}
-                {item.label}
+            </Link>
-              </Link>
+          ))}
-            ) : (
-              <span
-                key={item.label}
-                className="cursor-not-allowed rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground/50"
-              >
-                {item.label}
-              </span>
-            )
-          )}
         </nav>
       </header>
 

packages/web/src/routes/inbox.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -186,8 +186,26 @@ function InboxPage() {
                 </span>
               </div>
               <p className="mt-1 text-xs text-muted-foreground">
-                Task: {selectedAgent.taskId}
+                Task:{" "}
+                {selectedAgent.taskId ? (
+                  <Link
+                    to="/initiatives"
+                    className="text-primary hover:underline"
+                  >
+                    {selectedAgent.taskId}
+                  </Link>
+                ) : (
+                  "—"
+                )}
               </p>
+              {selectedAgent.taskId && (
+                <Link
+                  to="/initiatives"
+                  className="mt-1 inline-block text-xs text-primary hover:underline"
+                >
+                  View in context →
+                </Link>
+              )}
             </div>
 
             {/* Question Form or Notification Content */}