feat(web): add AppShell layout with topbar and grain overlay

Shared layout wrapping all protected routes: 56px sticky topbar
(logo, live dot, user avatar, sign out) + max-width centered content
+ warm grain overlay. Landing and auth callback remain full-bleed.

Author: mariuspruvot

apps/web/src/app.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router'
 import { useAuthStore } from './features/auth/store'
 import OAuthCallback from './features/auth/OAuthCallback'
 import ProtectedRoute from './features/auth/ProtectedRoute'
+import { AppShell } from './shared/components'
 import InstallationList from './features/dashboard/InstallationList'
 import InstallationDetail from './features/dashboard/InstallationDetail'
 import SessionReplay from './features/dashboard/SessionReplay'
@@ -20,14 +21,17 @@ export default function App() {
   return (
     <BrowserRouter>
       <Routes>
+        {/* Public routes — no shell */}
         <Route path="/" element={<AuthRedirect />} />
         <Route path="/auth/callback" element={<OAuthCallback />} />
-        <Route path="/installations" element={<ProtectedRoute><InstallationList /></ProtectedRoute>} />
-        <Route path="/installations/:installationId" element={<ProtectedRoute><InstallationDetail /></ProtectedRoute>} />
-        <Route path="/installations/:installationId/sessions/:sessionId" element={<ProtectedRoute><SessionReplay /></ProtectedRoute>} />
-        <Route path="/installations/:installationId/setup" element={<ProtectedRoute><SetupView /></ProtectedRoute>} />
-        <Route path="/installations/:installationId/settings" element={<ProtectedRoute><SettingsView /></ProtectedRoute>} />
-        <Route path="/session/:installationId/*" element={<ProtectedRoute><SessionView /></ProtectedRoute>} />
+
+        {/* Protected routes — wrapped in AppShell */}
+        <Route path="/installations" element={<ProtectedRoute><AppShell><InstallationList /></AppShell></ProtectedRoute>} />
+        <Route path="/installations/:installationId" element={<ProtectedRoute><AppShell><InstallationDetail /></AppShell></ProtectedRoute>} />
+        <Route path="/installations/:installationId/sessions/:sessionId" element={<ProtectedRoute><AppShell><SessionReplay /></AppShell></ProtectedRoute>} />
+        <Route path="/installations/:installationId/setup" element={<ProtectedRoute><AppShell><SetupView /></AppShell></ProtectedRoute>} />
+        <Route path="/installations/:installationId/settings" element={<ProtectedRoute><AppShell><SettingsView /></AppShell></ProtectedRoute>} />
+        <Route path="/session/:installationId/*" element={<ProtectedRoute><AppShell><SessionView /></AppShell></ProtectedRoute>} />
       </Routes>
     </BrowserRouter>
   )

apps/web/src/shared/components/AppShell.tsx

@@ -0,0 +1,18 @@
+import { GrainOverlay } from './GrainOverlay'
+import { Topbar } from './Topbar'
+
+interface AppShellProps {
+  children: React.ReactNode
+}
+
+export function AppShell({ children }: AppShellProps) {
+  return (
+    <div className="relative min-h-screen bg-bg text-ink">
+      <GrainOverlay />
+      <Topbar />
+      <main className="relative max-w-[1120px] mx-auto px-5 py-8">
+        {children}
+      </main>
+    </div>
+  )
+}

apps/web/src/shared/components/Topbar.tsx

@@ -0,0 +1,42 @@
+import { useAuthStore } from '../../features/auth/store'
+import { Dot } from './Dot'
+
+export function Topbar() {
+  const user = useAuthStore((s) => s.user)
+  const logout = useAuthStore((s) => s.logout)
+
+  return (
+    <header className="sticky top-0 z-50 h-14 bg-bg2 border-b border-rule flex items-center px-5">
+      <a href="/installations" className="font-mono text-sm font-bold text-accent tracking-tight">
+        helPRs
+      </a>
+
+      <div className="flex-1" />
+
+      {user && (
+        <div className="flex items-center gap-3">
+          <Dot color="ok" pulse />
+          <span className="font-mono text-[11px] text-dim">live</span>
+
+          <span className="text-rule-str mx-1">|</span>
+
+          {user.avatar_url && (
+            <img
+              src={user.avatar_url}
+              alt={user.github_login}
+              className="w-6 h-6 rounded-full border border-rule"
+            />
+          )}
+          <span className="font-mono text-xs text-ink2">{user.github_login}</span>
+
+          <button
+            onClick={logout}
+            className="font-mono text-[11px] text-dim hover:text-ink2 transition-colors cursor-pointer ml-1"
+          >
+            sign out
+          </button>
+        </div>
+      )}
+    </header>
+  )
+}

apps/web/src/shared/components/index.ts

@@ -1,3 +1,4 @@
+export { AppShell } from './AppShell'
 export { Button } from './Button'
 export { Card } from './Card'
 export { Chip } from './Chip'
@@ -6,3 +7,4 @@ export { GrainOverlay } from './GrainOverlay'
 export { Overline } from './Overline'
 export { StatCard } from './StatCard'
 export { TerminalBlock } from './TerminalBlock'
+export { Topbar } from './Topbar'