fix(web): fix QA bugs and align dashboard/detail with R2 mockup

Fixes:
- Session replay crash: extract nested scorecard from API wrapper
- Topbar logo: use React Router Link instead of <a href>
- Sign-out: navigate to / before logout to avoid OAuth redirect
- SkillSelector: remove nested <button> (use <span> for Run)
- Add ErrorBoundary wrapping the entire app

Design alignment:
- ActivityChart: div-based flex bars matching mockup (3px gap, 120px
  height, accent color with active highlight, 30-day fill, axis labels)
- InstallationList: avatar + 2-column status grid + action buttons
- InstallationDetail: completion bar with stacked segments + legend,
  grid-based session table with proper columns, filter buttons

Author: mariuspruvot

apps/web/src/app.tsx

@@ -2,7 +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 { AppShell, ErrorBoundary } from './shared/components'
 import InstallationList from './features/dashboard/InstallationList'
 import InstallationDetail from './features/dashboard/InstallationDetail'
 import SessionReplay from './features/dashboard/SessionReplay'
@@ -19,6 +19,7 @@ function AuthRedirect() {
 
 export default function App() {
   return (
+    <ErrorBoundary>
     <BrowserRouter>
       <Routes>
         {/* Public routes — no shell */}
@@ -34,5 +35,6 @@ export default function App() {
         <Route path="/session/:installationId/*" element={<ProtectedRoute><AppShell><SessionView /></AppShell></ProtectedRoute>} />
       </Routes>
     </BrowserRouter>
+    </ErrorBoundary>
   )
 }

apps/web/src/features/dashboard/ActivityChart.tsx

@@ -1,6 +1,6 @@
 /**
- * ActivityChart — simple SVG bar chart for session activity over 30 days.
- * No external charting library — just proportional <rect> elements.
+ * ActivityChart — flex-based bar chart matching the R2 redesign mockup.
+ * 30 bars with 3px gap, 120px height, accent color with active highlight.
  */
 
 interface DailyCount {
@@ -12,63 +12,56 @@ interface ActivityChartProps {
   data: DailyCount[]
 }
 
-export default function ActivityChart({ data }: ActivityChartProps) {
-  if (data.length === 0) {
-    return (
-      <div className="text-dim text-xs font-mono py-4 text-center">
-        // no sessions in the last 30 days
-      </div>
-    )
+/** Fill sparse data to 30 consecutive days ending today. */
+function fillToThirtyDays(data: DailyCount[]): DailyCount[] {
+  const map = new Map(data.map((d) => [d.date.slice(0, 10), d.count]))
+  const result: DailyCount[] = []
+  const today = new Date()
+  for (let i = 29; i >= 0; i--) {
+    const d = new Date(today)
+    d.setDate(d.getDate() - i)
+    const key = d.toISOString().slice(0, 10)
+    result.push({ date: key, count: map.get(key) ?? 0 })
   }
+  return result
+}
 
-  const maxCount = Math.max(...data.map((d) => d.count), 1)
-  const barCount = data.length
-  const chartWidth = 100
-  const chartHeight = 80
-  const barGap = 1
-  const barWidth = Math.max(1, (chartWidth - barGap * (barCount - 1)) / barCount)
+export default function ActivityChart({ data }: ActivityChartProps) {
+  const days = fillToThirtyDays(data)
+  const maxCount = Math.max(...days.map((d) => d.count), 1)
 
   return (
-    <svg
-      viewBox={`0 0 ${chartWidth} ${chartHeight + 16}`}
-      className="w-full"
-      style={{ height: '100px' }}
-      preserveAspectRatio="none"
-    >
-      {data.map((d, i) => {
-        const barHeight = Math.max(1, (d.count / maxCount) * chartHeight)
-        const x = i * (barWidth + barGap)
-        const y = chartHeight - barHeight
+    <div>
+      <div className="flex items-end gap-[3px]" style={{ height: 120 }}>
+        {days.map((d, i) => {
+          const heightPx = d.count === 0 ? 2 : Math.max(4, (d.count / maxCount) * 110)
+          const isRecent = i >= 23
+          const isEmpty = d.count === 0
 
-        return (
-          <g key={d.date}>
-            <rect
-              x={x}
-              y={y}
-              width={barWidth}
-              height={barHeight}
-              rx={0.5}
-              fill="var(--color-accent)"
-              opacity={0.65}
-            >
-              <title>{`${d.date}: ${d.count} session${d.count !== 1 ? 's' : ''}`}</title>
-            </rect>
-            {/* Show label every 7 bars */}
-            {i % 7 === 0 && (
-              <text
-                x={x + barWidth / 2}
-                y={chartHeight + 10}
-                textAnchor="middle"
-                fill="var(--color-dim)"
-                fontSize="3"
-                fontFamily="var(--font-family-mono)"
-              >
-                {new Date(d.date).toLocaleDateString('en', { month: 'short', day: 'numeric' })}
-              </text>
-            )}
-          </g>
-        )
-      })}
-    </svg>
+          return (
+            <div
+              key={d.date}
+              className="flex-1 rounded-[2px] transition-opacity hover:opacity-100"
+              style={{
+                height: heightPx,
+                backgroundColor: isEmpty
+                  ? 'var(--color-rule)'
+                  : isRecent
+                    ? 'var(--color-accent)'
+                    : 'rgba(226,160,57,0.35)',
+                opacity: isEmpty ? 0.5 : isRecent ? 1 : 0.85,
+              }}
+              title={`${d.date}: ${d.count} session${d.count !== 1 ? 's' : ''}`}
+            />
+          )
+        })}
+      </div>
+      <div className="flex justify-between mt-2 font-mono text-[10px] text-dim2 tracking-[0.12em]">
+        <span>30D AGO</span>
+        <span>15D</span>
+        <span>7D</span>
+        <span>TODAY</span>
+      </div>
+    </div>
   )
 }

apps/web/src/features/dashboard/InstallationDetail.tsx

@@ -1,21 +1,21 @@
 /**
- * InstallationDetail — session history list for a single installation.
+ * InstallationDetail — session history for a single installation.
+ * Matches R2 redesign: completion bar, grid table, filter buttons.
  */
 
 import { useState, useEffect, useCallback } from 'react'
-import { useParams, useNavigate, Link } from 'react-router'
+import { useParams, useNavigate } from 'react-router'
 import { fetchInstallationSessions } from './dashboardApi'
-import type { SessionSummary, PaginatedSessionsResponse } from './dashboardApi'
-import StatusBadge from './StatusBadge'
+import type { PaginatedSessionsResponse } from './dashboardApi'
 import { formatDuration, formatRelativeTime } from './formatters'
-import { Button, Card, Chip, Dot, Overline } from '../../shared/components'
+import { Button, Chip, Dot, Overline } from '../../shared/components'
 
 const STATUS_OPTIONS = ['all', 'completed', 'failed', 'running', 'pending', 'timeout'] as const
 
 export default function InstallationDetail() {
   const { installationId } = useParams<{ installationId: string }>()
   const navigate = useNavigate()
-  const [sessions, setSessions] = useState<SessionSummary[]>([])
+  const [sessions, setSessions] = useState<PaginatedSessionsResponse['items']>([])
   const [page, setPage] = useState(1)
   const [totalPages, setTotalPages] = useState(0)
   const [total, setTotal] = useState(0)
@@ -28,7 +28,7 @@ export default function InstallationDetail() {
     setLoading(true)
     setError(null)
     try {
-      const data: PaginatedSessionsResponse = await fetchInstallationSessions(
+      const data = await fetchInstallationSessions(
         Number(installationId),
         page,
         20,
@@ -51,57 +51,63 @@ export default function InstallationDetail() {
     setPage(1)
   }
 
+  // Completion stats from loaded sessions (approximation from current page)
+  const completed = sessions.filter((s) => s.status === 'completed').length
+  const failed = sessions.filter((s) => s.status === 'failed').length
+  const timeout = sessions.filter((s) => s.status === 'timeout').length
+  const completionPct = total > 0 ? Math.round((completed / Math.max(sessions.length, 1)) * 100) : 0
+
   return (
     <div>
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 mb-6 text-sm">
-        <Link to="/installations" className="text-dim hover:text-ink2 transition-colors font-mono">
-          &larr; Installations
-        </Link>
-        <span className="text-dim2">|</span>
-        <span className="text-ink font-mono font-medium">
-          Installation #{installationId}
-        </span>
-        <div className="ml-auto">
-          <Link
-            to={`/installations/${installationId}/settings`}
-            className="text-dim text-xs font-mono hover:text-ink2 transition-colors"
-          >
-            Settings
-          </Link>
-        </div>
-      </div>
-
-      {/* Title + filter */}
-      <div className="flex items-center justify-between mb-6">
+      {/* Header + filters */}
+      <div className="flex justify-between items-end mb-5">
         <div>
-          <h1 className="font-mono text-lg font-bold">
-            Session History
-            {!loading && (
-              <span className="text-dim text-sm font-normal ml-2">({total})</span>
-            )}
-          </h1>
-          <Overline className="mt-1">// every time Claude ran against one of your PRs</Overline>
+          <Overline className="mb-1.5">{'\u25b8'} SESSIONS {'\u00b7'} {total} TOTAL</Overline>
+          <h1 className="font-mono text-2xl font-bold tracking-[-0.02em]">Session History</h1>
+          <p className="font-mono text-sm text-dim mt-1">// every time Claude ran against one of your PRs</p>
         </div>
-
-        <select
-          value={statusFilter}
-          onChange={(e) => handleStatusChange(e.target.value)}
-          className="font-mono text-xs px-3 py-1.5 rounded-button bg-card border border-rule text-ink cursor-pointer outline-none"
-        >
+        <div className="flex gap-2">
           {STATUS_OPTIONS.map((opt) => (
-            <option key={opt} value={opt} className="bg-card">
-              {opt.charAt(0).toUpperCase() + opt.slice(1)}
-            </option>
+            <button
+              key={opt}
+              onClick={() => handleStatusChange(opt)}
+              className={`font-mono text-[13px] font-medium px-4 py-2 rounded-[7px] border transition-colors cursor-pointer ${
+                statusFilter === opt
+                  ? 'bg-accent/15 border-accent/30 text-accent'
+                  : 'bg-card border-rule-str text-ink hover:bg-card-hi'
+              }`}
+            >
+              {opt === 'all' ? 'Status: all' : opt.charAt(0).toUpperCase() + opt.slice(1)}
+            </button>
           ))}
-        </select>
+        </div>
       </div>
 
+      {/* Completion bar */}
+      {!loading && sessions.length > 0 && (
+        <div className="flex items-center gap-5 px-4 py-3.5 bg-card border border-rule rounded-card mb-5">
+          <div className="flex items-baseline gap-1.5">
+            <span className="font-mono text-[22px] font-bold">{completionPct}%</span>
+            <span className="font-mono text-[10px] text-dim tracking-[0.12em] uppercase">completion</span>
+          </div>
+          <div className="flex-1 h-1.5 bg-bg2 rounded-full flex gap-0.5 overflow-hidden">
+            {completed > 0 && <div className="bg-ok" style={{ flex: completed }} />}
+            {timeout > 0 && <div className="bg-warn" style={{ flex: timeout }} />}
+            {failed > 0 && <div className="bg-danger" style={{ flex: failed }} />}
+          </div>
+          <div className="flex gap-4 font-mono text-[11px] text-dim">
+            <span><Dot color="ok" className="mr-1" />{completed} done</span>
+            <span><Dot color="warn" className="mr-1" />{timeout} timeout</span>
+            <span><Dot color="danger" className="mr-1" />{failed} failed</span>
+          </div>
+        </div>
+      )}
+
       {/* Error */}
       {error && (
-        <Card className="mb-6 border-danger/30">
-          <p className="text-danger text-sm">{error}</p>
-        </Card>
+        <div className="mb-4 px-4 py-3 bg-danger/8 border border-danger/20 rounded-card text-danger text-sm">
+          {error}
+        </div>
       )}
 
       {/* Loading */}
@@ -113,39 +119,64 @@ export default function InstallationDetail() {
 
       {/* Empty */}
       {!loading && !error && sessions.length === 0 && (
-        <Card className="text-center py-12">
+        <div className="text-center py-12 bg-card border border-rule rounded-card">
           <p className="text-ink2 text-sm">
             {statusFilter === 'all' ? 'No sessions yet.' : `No ${statusFilter} sessions.`}
           </p>
-        </Card>
+        </div>
       )}
 
       {/* Session table */}
       {!loading && sessions.length > 0 && (
         <>
-          <div className="rounded-card border border-rule overflow-hidden">
-            {sessions.map((session, idx) => (
-              <button
-                key={session.id}
-                onClick={() => navigate(`/installations/${installationId}/sessions/${session.id}`)}
-                className={`w-full text-left px-5 py-3.5 flex items-center gap-4 transition-colors cursor-pointer hover:bg-card-hi ${idx % 2 === 0 ? 'bg-card/50' : 'bg-transparent'} ${idx < sessions.length - 1 ? 'border-b border-rule/50' : ''}`}
-              >
-                <div className="flex-1 min-w-0">
-                  <span className="text-ink text-[13px]">{session.repo_full_name}</span>
-                  <span className="text-dim text-xs ml-1.5">#{session.pr_number}</span>
-                </div>
-                <Chip variant="accent">{session.skill_name}</Chip>
-                <div className="shrink-0 w-20 text-center">
-                  <StatusBadge status={session.status} />
-                </div>
-                <span className="text-dim text-xs font-mono shrink-0 w-16 text-right">
-                  {formatDuration(session.started_at, session.completed_at)}
-                </span>
-                <span className="text-dim text-xs shrink-0 w-16 text-right">
-                  {formatRelativeTime(session.created_at)}
-                </span>
-              </button>
-            ))}
+          <div className="border border-rule-str rounded-card overflow-hidden">
+            {/* Header row */}
+            <div
+              className="grid bg-bg2 px-4 py-2.5 font-mono text-[10px] text-dim tracking-[0.18em] uppercase border-b border-rule"
+              style={{ gridTemplateColumns: '36px 1fr 140px 110px 80px 80px' }}
+            >
+              <span>#</span>
+              <span>REPO / PR</span>
+              <span>SKILL</span>
+              <span>STATUS</span>
+              <span className="text-right">DURATION</span>
+              <span className="text-right">RAN</span>
+            </div>
+
+            {/* Data rows */}
+            {sessions.map((session, idx) => {
+              const statusColor =
+                session.status === 'completed' ? 'ok' as const :
+                session.status === 'timeout' ? 'warn' as const :
+                session.status === 'failed' ? 'danger' as const :
+                'default' as const
+
+              return (
+                <button
+                  key={session.id}
+                  onClick={() => navigate(`/installations/${installationId}/sessions/${session.id}`)}
+                  className={`w-full grid items-center px-4 py-3 text-[13px] transition-colors cursor-pointer hover:bg-card-hi ${
+                    idx < sessions.length - 1 ? 'border-b border-rule' : ''
+                  }`}
+                  style={{ gridTemplateColumns: '36px 1fr 140px 110px 80px 80px' }}
+                >
+                  <span className="font-mono text-[11px] text-dim2">
+                    {String(idx + 1 + (page - 1) * 20).padStart(2, '0')}
+                  </span>
+                  <span className="font-mono text-ink truncate">
+                    {session.repo_full_name} <span className="text-accent">#{session.pr_number}</span>
+                  </span>
+                  <span><Chip variant="accent">{session.skill_name}</Chip></span>
+                  <span><Chip variant={statusColor}>{session.status}</Chip></span>
+                  <span className="font-mono text-xs text-ink2 text-right">
+                    {formatDuration(session.started_at, session.completed_at)}
+                  </span>
+                  <span className="font-mono text-xs text-dim text-right">
+                    {formatRelativeTime(session.created_at)}
+                  </span>
+                </button>
+              )
+            })}
           </div>
 
           {/* Pagination */}