feat(FN-005): implement frontend foundation with auth and routing

- Add OIDC authentication with PKCE flow
- Create dashboard shell with sidebar and header
- Implement project management UI (list, create, detail)
- Add tool spawn page with tool/project selection
- Create tool instance detail page with status and controls
- Set up React Router with route guards
- Add Zustand auth store and API client with types

apps/web/src/components/DashboardLayout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom'
+import Header from './Header'
+import Sidebar from './Sidebar'
+
+export default function DashboardLayout() {
+  return (
+    <div className="flex h-screen">
+      <Sidebar />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-auto">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

apps/web/src/components/Header.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth'
+import {
+  UserCircleIcon,
+  ArrowRightOnRectangleIcon,
+  Cog6ToothIcon,
+} from '@heroicons/react/24/outline'
+
+export default function Header() {
+  const { user, logout } = useAuthStore()
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  const handleLogout = () => {
+    logout()
+    localStorage.removeItem('access_token')
+    window.location.href = '/login'
+  }
+
+  return (
+    <header className="h-16 border-b border-border bg-surface flex items-center justify-between px-6">
+      <div className="flex items-center">
+        <span className="text-lg font-semibold">Headquarter</span>
+      </div>
+
+      <div className="relative">
+        <button
+          onClick={() => setShowDropdown(!showDropdown)}
+          className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface transition-colors"
+        >
+          <UserCircleIcon className="w-6 h-6" />
+          <span className="text-sm">{user?.display_name || user?.email || 'User'}</span>
+        </button>
+
+        {showDropdown && (
+          <div className="absolute right-0 mt-2 w-48 rounded-lg border border-border bg-surface shadow-lg z-50">
+            <div className="p-2">
+              <Link
+                to="/settings"
+                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm"
+                onClick={() => setShowDropdown(false)}
+              >
+                <Cog6ToothIcon className="w-4 h-4" />
+                Settings
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface text-sm w-full text-left text-red-400"
+              >
+                <ArrowRightOnRectangleIcon className="w-4 h-4" />
+                Logout
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}

apps/web/src/components/RouteGuard.tsx

@@ -0,0 +1,20 @@
+import { Navigate } from 'react-router-dom'
+import { useAuthStore } from '../stores/auth'
+
+export default function RouteGuard({ children }: { children: React.ReactNode }) {
+  const { state } = useAuthStore()
+
+  if (state === 'loading') {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent"></div>
+      </div>
+    )
+  }
+
+  if (state === 'unauthenticated' || state === 'error') {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}

apps/web/src/components/Sidebar.tsx

@@ -0,0 +1,48 @@
+import { Link, useLocation } from 'react-router-dom'
+import {
+  HomeIcon,
+  FolderIcon,
+  WrenchIcon,
+  Cog6ToothIcon,
+  BookOpenIcon,
+} from '@heroicons/react/24/outline'
+
+const navigation = [
+  { name: 'Dashboard', href: '/', icon: HomeIcon },
+  { name: 'Projects', href: '/projects', icon: FolderIcon },
+  { name: 'Repositories', href: '/repositories', icon: BookOpenIcon },
+  { name: 'Tools', href: '/tools', icon: WrenchIcon },
+  { name: 'Settings', href: '/settings', icon: Cog6ToothIcon },
+]
+
+export default function Sidebar() {
+  const location = useLocation()
+
+  return (
+    <nav className="w-64 border-r border-border bg-surface h-screen sticky top-0">
+      <div className="p-4">
+        <h1 className="text-xl font-bold mb-6">Headquarter</h1>
+        <ul className="space-y-1">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href
+            return (
+              <li key={item.name}>
+                <Link
+                  to={item.href}
+                  className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+                    isActive
+                      ? 'bg-accent/10 text-accent'
+                      : 'text-gray-400 hover:text-fg hover:bg-surface'
+                  }`}
+                >
+                  <item.icon className="w-5 h-5" />
+                  {item.name}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </nav>
+  )
+}