Complete Phase 2: Frontend implementation with React + TypeScript

Frontend Features:
- React 18 + Vite + TypeScript + Tailwind CSS + Zustand
- JWT authentication with automatic token refresh
- Tree library with search and category filtering
- Full tree navigation (decision/action/solution nodes)
- Session management with notes and completion
- Session history with export (Markdown/Text/HTML)
- ErrorBoundary for graceful error handling

Backend Fixes:
- CORS: Added port 5174 to allowed origins
- Sessions: Fixed JSONB datetime serialization (mode='json')

Documentation:
- Updated PROGRESS.md with Phase 2 completion
- Updated 03-DEVELOPMENT-ROADMAP.md with checked items
- Added PHASE-2.5-PERSONAL-BRANCHING.md spec

Seed Data:
- Added backend/scripts/seed_data.py with Password Reset tree

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/common/ErrorBoundary.tsx

@@ -0,0 +1,66 @@
+import { Component, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex min-h-[400px] flex-col items-center justify-center p-8">
+          <div className="max-w-md text-center">
+            <h2 className="mb-2 text-xl font-semibold text-foreground">
+              Something went wrong
+            </h2>
+            <p className="mb-4 text-muted-foreground">
+              An unexpected error occurred. Please try refreshing the page.
+            </p>
+            {this.state.error && (
+              <pre className="mb-4 overflow-auto rounded bg-muted p-3 text-left text-xs text-muted-foreground">
+                {this.state.error.message}
+              </pre>
+            )}
+            <button
+              onClick={() => window.location.reload()}
+              className={cn(
+                'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+                'hover:bg-primary/90'
+              )}
+            >
+              Refresh Page
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

frontend/src/components/common/RouteError.tsx

@@ -0,0 +1,52 @@
+import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+
+export function RouteError() {
+  const error = useRouteError()
+  const navigate = useNavigate()
+
+  let errorMessage = 'An unexpected error occurred'
+  let errorDetails = ''
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.status === 404 ? 'Page not found' : `Error ${error.status}`
+    errorDetails = error.statusText || ''
+  } else if (error instanceof Error) {
+    errorMessage = 'Something went wrong'
+    errorDetails = error.message
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
+      <div className="max-w-md text-center">
+        <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
+        <h2 className="mb-2 text-xl font-semibold text-foreground">{errorMessage}</h2>
+        {errorDetails && (
+          <p className="mb-4 text-muted-foreground">{errorDetails}</p>
+        )}
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={() => navigate(-1)}
+            className={cn(
+              'rounded-md border border-input px-4 py-2 text-sm font-medium',
+              'hover:bg-accent hover:text-accent-foreground'
+            )}
+          >
+            Go Back
+          </button>
+          <button
+            onClick={() => navigate('/trees')}
+            className={cn(
+              'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+              'hover:bg-primary/90'
+            )}
+          >
+            Go Home
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RouteError

frontend/src/components/layout/AppLayout.tsx

@@ -0,0 +1,72 @@
+import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom'
+import { useAuthStore } from '@/store/authStore'
+import { cn } from '@/lib/utils'
+
+export function AppLayout() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const { user, logout } = useAuthStore()
+
+  const handleLogout = async () => {
+    await logout()
+    navigate('/login')
+  }
+
+  const navItems = [
+    { path: '/trees', label: 'Trees' },
+    { path: '/sessions', label: 'Sessions' },
+  ]
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b border-border bg-card">
+        <div className="container mx-auto flex h-14 items-center justify-between px-4">
+          <div className="flex items-center gap-8">
+            <Link to="/trees" className="text-lg font-bold text-foreground">
+              Apoklisis
+            </Link>
+            <nav className="hidden items-center gap-1 sm:flex">
+              {navItems.map((item) => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={cn(
+                    'rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                    location.pathname.startsWith(item.path)
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                  )}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <span className="hidden text-sm text-muted-foreground sm:block">
+              {user?.name || user?.email}
+            </span>
+            <button
+              onClick={handleLogout}
+              className={cn(
+                'rounded-md px-3 py-1.5 text-sm font-medium',
+                'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+              )}
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+
+export default AppLayout

frontend/src/components/layout/ProtectedRoute.tsx

@@ -0,0 +1,27 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuthStore } from '@/store/authStore'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuthStore()
+  const location = useLocation()
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />
+  }
+
+  return <>{children}</>
+}
+
+export default ProtectedRoute

frontend/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { default as AppLayout } from './AppLayout'
+export { default as ProtectedRoute } from './ProtectedRoute'