TrajectoryOS Frontend Transformation Plan

apps/web-dashboard/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── (dashboard)/              # Dashboard layout group
│   │   │   ├── layout.tsx            # Shared dashboard layout
│   │   │   ├── page.tsx              # Physics Dashboard (home)
│   │   │   ├── timeline/             # Calendar replacement
│   │   │   │   └── page.tsx
│   │   │   ├── scenarios/            # Scenario planner
│   │   │   │   ├── page.tsx          # List/generate
│   │   │   │   └── [id]/page.tsx     # Scenario detail
│   │   │   ├── skills/               # Skill graph
│   │   │   │   └── page.tsx
│   │   │   ├── constraints/          # Gravity/constraint manager
│   │   │   │   └── page.tsx
│   │   │   ├── history/              # Analysis timeline
│   │   │   │   └── page.tsx
│   │   │   └── settings/             # User settings
│   │   │       └── page.tsx
│   │   ├── api/                      # API routes (if needed)
│   │   ├── layout.tsx                # Root layout
│   │   └── globals.css               # Global styles
│   │
│   ├── lib/                          # Shared utilities
│   │   ├── api/                      # API client layer
│   │   │   ├── client.ts             # Axios instance + config
│   │   │   ├── queries/              # React Query hooks
│   │   │   │   ├── useSkills.ts
│   │   │   │   ├── useLifeState.ts
│   │   │   │   ├── useScenarios.ts
│   │   │   │   └── usePlanner.ts
│   │   │   ├── mutations/            # React Query mutations
│   │   │   │   ├── useSubmitEvidence.ts
│   │   │   │   ├── useGenerateScenarios.ts
│   │   │   │   └── useCreatePlan.ts
│   │   │   └── types.ts              # API types (from backend)
│   │   │
│   │   ├── store/                    # Zustand stores
│   │   │   ├── uiStore.ts            # UI state (sidebar, modals)
│   │   │   └── userStore.ts          # User preferences
│   │   │
│   │   ├── utils/                    # Utility functions
│   │   │   ├── physics.ts            # Physics calculations
│   │   │   ├── dates.ts              # Date utilities
│   │   │   └── formatting.ts         # Number/text formatting
│   │   │
│   │   └── hooks/                    # Custom React hooks
│   │       ├── usePhysicsMetrics.ts
│   │       ├── useTrajectoryForecast.ts
│   │       └── useRealtime.ts
│   │
│   └── components/                   # React components
│       ├── ui/                       # Base UI components
│       │   ├── Button.tsx
│       │   ├── Card.tsx
│       │   ├── Chart.tsx
│       │   ├── Modal.tsx
│       │   └── ...
│       │
│       ├── physics/                  # Physics-specific components
│       │   ├── EscapeIndexDisplay.tsx
│       │   ├── PhysicsCard.tsx
│       │   ├── MetricSparkline.tsx
│       │   └── TrajectoryChart.tsx
│       │
│       ├── timeline/                 # Timeline components
│       │   ├── TimelineView.tsx
│       │   ├── DayCell.tsx
│       │   ├── ScenarioOverlay.tsx
│       │   └── ...
│       │
│       ├── scenarios/                # Scenario components
│       │   ├── ScenarioGenerator.tsx
│       │   ├── ScenarioCard.tsx
│       │   ├── ComparisonMatrix.tsx
│       │   └── ...
│       │
│       ├── skills/                   # Skill components
│       │   ├── SkillGraph.tsx
│       │   ├── SkillNode.tsx
│       │   ├── BeliefDistribution.tsx
│       │   └── ...
│       │
│       └── layout/                   # Layout components
│           ├── DashboardNav.tsx
│           ├── Sidebar.tsx
│           └── Header.tsx
│
├── public/                           # Static assets
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

// src/lib/api/client.ts
import axios, { AxiosInstance, AxiosError } from 'axios';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3003';

export const apiClient: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Request interceptor - add auth token
apiClient.interceptors.request.use(
  (config) => {
    // TODO: Add auth token when implemented
    const userId = process.env.NEXT_PUBLIC_DEMO_USER_ID || 'demo';
    config.headers['x-user-id'] = userId;
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor - handle errors
apiClient.interceptors.response.use(
  (response) => response,
  (error: AxiosError) => {
    if (error.response?.status === 401) {
      // Handle unauthorized
      console.error('Unauthorized - redirect to login');
    }
    return Promise.reject(error);
  }
);

# Test API client
curl http://localhost:3003/health
# Should return: {"status":"ok","service":"trajectory-core"}

{
  "dependencies": {
    "@tanstack/react-query": "^5.56.2",
    "@tanstack/react-query-devtools": "^5.56.2",
    "zustand": "^4.5.0",
    "axios": "^1.7.7",
    "date-fns": "^3.6.0",
    "react-hook-form": "^7.53.0",
    "zod": "^3.23.8",
    "sonner": "^1.5.0",
    "cmdk": "^1.0.0",
    "reactflow": "^11.11.4"
  },
  "devDependencies": {
    "tailwindcss": "^3.4.1",
    "@types/node": "^20",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32"
  }
}

cd apps/web-dashboard
npm install @tanstack/react-query @tanstack/react-query-devtools zustand axios date-fns react-hook-form zod sonner cmdk reactflow
npm install -D tailwindcss autoprefixer postcss
npx tailwindcss init -p

// src/lib/api/queryClient.ts
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      gcTime: 1000 * 60 * 10, // 10 minutes (formerly cacheTime)
      retry: 1,
      refetchOnWindowFocus: false,
    },
    mutations: {
      retry: 0,
    },
  },
});

// src/app/layout.tsx
'use client';

import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { queryClient } from '@/lib/api/queryClient';
import { Toaster } from 'sonner';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          {children}
          <ReactQueryDevtools initialIsOpen={false} />
          <Toaster richColors position="top-right" />
        </QueryClientProvider>
      </body>
    </html>
  );
}

// src/lib/api/types.ts

// ========== User & Auth ==========
export interface User {
  id: string;
  email?: string;
  createdAt: string;
}

// ========== Skills ==========
export interface SkillBelief {
  skillId: string;
  level: number;           // Bayesian posterior mean
  uncertainty: number;      // Bayesian posterior std
  lastUpdated: string;
  utilization?: number;     // 0-1
}

export interface SkillEvidence {
  skillId: string;
  levelEstimate: number;    // 0-10
  confidence: number;       // 0-1
  utilization?: number;     // 0-1
  source: 'interview' | 'artifact' | 'manual' | 'observation';
  rawText?: string;
  timestamp?: string;
}

export interface SkillEvidenceInput {
  userId: string;
  evidence: SkillEvidence[];
}

// ========== Projects ==========
export interface Project {
  id: string;
  name: string;
  description?: string;
  status: 'active' | 'paused' | 'completed';
  createdAt: string;
  embedding?: number[];     // Semantic embedding from Python
}

// ========== Life State ==========
export interface LifeState {
  id: string;
  userId: string;
  timestamp: string;
  thrust: number;           // T
  alignment: number;        // A (0-1)
  gravity: number;          // G
  mass: number;             // M
  escapeIndex: number;      // η = T*A / (G*M)
  latentState?: number[];   // 32-dim z vector
}

export interface TrajectoryForecast {
  days: number[];           // [0, 1, 2, ..., horizon]
  thrust: number[];
  alignment: number[];
  gravity: number[];
  mass: number[];
  escapeIndex: number[];
}

export interface EscapeTimeEstimate {
  meanDays: number;
  stdDays: number;
  escapeProb: number;       // P(escape within horizon)
  percentiles: {
    p10: number;
    p50: number;
    p90: number;
  };
}

// ========== Scenarios ==========
export interface Action {
  action_type: 'skill_practice' | 'project_work' | 'remove_constraint' | 'simplify_project';
  skill_id?: string;
  project_id?: string;
  constraint_id?: string;
  intensity: number;        // 0-1
  duration_hours: number;
}

export interface Scenario {
  name: string;
  description: string;
  actions: Action[][];      // Array of daily action lists
}

export interface ScenarioEvaluation {
  scenarioName: string;
  finalEta: number;
  meanEta: number;
  escapeProb: number;
  escapeDays: number | null;
  risks: string[];
}

export interface GenerateAndEvaluateResult {
  scenarios: Record<string, Scenario>;
  evaluations: ScenarioEvaluation[];
  bestScenario: string;
  rankedScenarios: ScenarioEvaluation[];
}

// ========== Action Plans ==========
export interface PlanStep {
  id: string;
  description: string;
  priority: number;
  etaDays: number;
  dependencies?: string | null;
}

export interface ActionPlan {
  id: string;
  userId: string;
  goal: string;
  horizonDays: number;
  status: 'draft' | 'active' | 'completed' | 'archived';
  steps?: PlanStep[];
  createdAt: string;
  finalEta?: number;
  escapeProb?: number;
}

// ========== Analysis ==========
export interface TrajectoryAnalysis {
  summary: string;
  currentEta: number;
  thrust: number;
  alignment: number;
  gravity: number;
  mass: number;
  risks: string[];
  opportunities: string[];
  timestamp?: string;
}

export interface LeveragePoint {
  id: string;
  description: string;
  impactEstimate: number;
  effortEstimate: number;
  category: string;
}

// ========== Constraints ==========
export interface Constraint {
  id: string;
  type: 'deadline' | 'financial' | 'health' | 'social' | 'time' | 'other';
  description: string;
  severity: number;         // 0-10
  deadline?: string;
  resolutionCost?: number;
}

// ========== API Request/Response Types ==========
export interface ApiError {
  error: string;
  issues?: any[];
}

export interface PaginatedResponse<T> {
  data: T[];
  total: number;
  offset: number;
  limit: number;
}

// src/lib/api/queries/useSkills.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../client';
import { SkillBelief } from '../types';

export const useSkills = (userId: string) => {
  return useQuery({
    queryKey: ['skills', userId],
    queryFn: async () => {
      const { data } = await apiClient.get<{ skills: SkillBelief[] }>(
        `/api/skills/user/${userId}`
      );
      return data.skills;
    },
    enabled: !!userId,
  });
};

// src/lib/api/mutations/useSubmitEvidence.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../client';
import { SkillEvidenceInput } from '../types';
import { toast } from 'sonner';

export const useSubmitEvidence = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (input: SkillEvidenceInput) => {
      const { data } = await apiClient.post('/api/skills/evidence', input);
      return data;
    },
    onSuccess: (_, variables) => {
      // Invalidate skills query to refetch
      queryClient.invalidateQueries({ queryKey: ['skills', variables.userId] });
      toast.success('Skill evidence submitted successfully');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to submit evidence');
    },
  });
};

// src/lib/api/queries/useLifeState.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../client';
import { LifeState } from '../types';

export const useLatestLifeState = (userId: string) => {
  return useQuery({
    queryKey: ['lifeState', userId, 'latest'],
    queryFn: async () => {
      const { data } = await apiClient.get<LifeState>(`/api/state/${userId}`);
      return data;
    },
    enabled: !!userId,
    refetchInterval: 30000, // Refetch every 30s for real-time feel
  });
};

export const useLifeStateHistory = (userId: string, limit = 100) => {
  return useQuery({
    queryKey: ['lifeState', userId, 'history', limit],
    queryFn: async () => {
      const { data } = await apiClient.get<LifeState[]>(
        `/api/state/${userId}/history?limit=${limit}`
      );
      return data;
    },
    enabled: !!userId,
  });
};

// src/lib/api/mutations/useRecomputeState.ts
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../client';
import { LifeState } from '../types';
import { toast } from 'sonner';

export const useRecomputeState = (userId: string) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      const { data } = await apiClient.post<LifeState>(
        `/api/state/${userId}/recompute`
      );
      return data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lifeState', userId] });
      toast.success('Life state recomputed with Python models');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to recompute state');
    },
  });
};

// src/lib/api/queries/useScenarios.ts
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '../client';
import { ActionPlan } from '../types';

export const useActionPlans = (userId: string, status?: string) => {
  return useQuery({
    queryKey: ['actionPlans', userId, status],
    queryFn: async () => {
      const params = status ? `?status=${status}` : '';
      const { data } = await apiClient.get<ActionPlan[]>(
        `/api/planner/${userId}/plans${params}`
      );
      return data;
    },
    enabled: !!userId,
  });
};

export const useActionPlan = (userId: string, planId: string) => {
  return useQuery({
    queryKey: ['actionPlan', userId, planId],
    queryFn: async () => {
      const { data } = await apiClient.get<ActionPlan>(
        `/api/planner/${userId}/plans/${planId}`
      );
      return data;
    },
    enabled: !!userId && !!planId,
  });
};

// src/lib/api/mutations/useGenerateScenarios.ts
import { useMutation } from '@tanstack/react-query';
import { apiClient } from '../client';
import { GenerateAndEvaluateResult } from '../types';
import { toast } from 'sonner';

interface GenerateScenariosInput {
  userId: string;
  goal: string;
  nScenarios?: number;
  horizon?: number;
}

export const useGenerateScenarios = () => {
  return useMutation({
    mutationFn: async (input: GenerateScenariosInput) => {
      const { userId, ...body } = input;
      const { data } = await apiClient.post<GenerateAndEvaluateResult>(
        `/api/planner/${userId}/scenarios/generate-and-evaluate`,
        body
      );
      return data;
    },
    onSuccess: () => {
      toast.success('Scenarios generated and evaluated');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to generate scenarios');
    },
  });
};

export const useCreatePlan = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (input: GenerateScenariosInput) => {
      const { userId, ...body } = input;
      const { data } = await apiClient.post<ActionPlan>(
        `/api/planner/${userId}/scenarios/generate-and-save`,
        body
      );
      return data;
    },
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['actionPlans', variables.userId] });
      toast.success('Action plan created successfully');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to create plan');
    },
  });
};

// src/lib/store/uiStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface UIState {
  sidebarOpen: boolean;
  timelineView: 'week' | 'month' | 'quarter';
  scenarioComparison: boolean;
  selectedScenarioIds: string[];

  // Actions
  toggleSidebar: () => void;
  setTimelineView: (view: 'week' | 'month' | 'quarter') => void;
  toggleScenarioComparison: () => void;
  selectScenario: (id: string) => void;
  deselectScenario: (id: string) => void;
  clearSelectedScenarios: () => void;
}

export const useUIStore = create<UIState>()(
  persist(
    (set) => ({
      sidebarOpen: true,
      timelineView: 'week',
      scenarioComparison: false,
      selectedScenarioIds: [],

      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
      setTimelineView: (view) => set({ timelineView: view }),
      toggleScenarioComparison: () =>
        set((state) => ({ scenarioComparison: !state.scenarioComparison })),
      selectScenario: (id) =>
        set((state) => ({
          selectedScenarioIds: [...state.selectedScenarioIds, id],
        })),
      deselectScenario: (id) =>
        set((state) => ({
          selectedScenarioIds: state.selectedScenarioIds.filter((sid) => sid !== id),
        })),
      clearSelectedScenarios: () => set({ selectedScenarioIds: [] }),
    }),
    {
      name: 'trajectory-ui-store',
    }
  )
);

// src/lib/store/userStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface UserState {
  userId: string;
  preferences: {
    theme: 'light' | 'dark' | 'system';
    notifications: boolean;
    autoRefresh: boolean;
  };

  // Actions
  setUserId: (userId: string) => void;
  updatePreferences: (preferences: Partial<UserState['preferences']>) => void;
}

export const useUserStore = create<UserState>()(
  persist(
    (set) => ({
      userId: process.env.NEXT_PUBLIC_DEMO_USER_ID || 'demo',
      preferences: {
        theme: 'dark',
        notifications: true,
        autoRefresh: true,
      },

      setUserId: (userId) => set({ userId }),
      updatePreferences: (preferences) =>
        set((state) => ({
          preferences: { ...state.preferences, ...preferences },
        })),
    }),
    {
      name: 'trajectory-user-store',
    }
  )
);

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        // TrajectoryOS brand colors
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9', // Main brand color
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
        // Physics metric colors
        thrust: '#10b981',      // Green
        alignment: '#3b82f6',   // Blue
        gravity: '#ef4444',     // Red
        mass: '#f59e0b',        // Amber
        escape: '#8b5cf6',      // Purple
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace'],
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
    },
  },
  plugins: [],
};

export default config;

/* src/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-inter: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  }

  body {
    @apply bg-slate-950 text-slate-100;
  }
}

@layer components {
  .card {
    @apply bg-slate-900 border border-slate-800 rounded-lg p-6;
  }

  .metric-card {
    @apply card hover:border-slate-700 transition-colors;
  }

  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg font-medium transition-colors;
  }

  .btn-secondary {
    @apply bg-slate-800 hover:bg-slate-700 text-slate-100 px-4 py-2 rounded-lg font-medium transition-colors;
  }
}

// src/components/ui/Button.tsx
import { ButtonHTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils/cn';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', loading, children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(
          'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
          'disabled:opacity-50 disabled:pointer-events-none',
          {
            'bg-primary-600 hover:bg-primary-700 text-white': variant === 'primary',
            'bg-slate-800 hover:bg-slate-700 text-slate-100': variant === 'secondary',
            'bg-red-600 hover:bg-red-700 text-white': variant === 'danger',
            'hover:bg-slate-800 text-slate-100': variant === 'ghost',
            'px-3 py-1.5 text-sm': size === 'sm',
            'px-4 py-2 text-base': size === 'md',
            'px-6 py-3 text-lg': size === 'lg',
          },
          className
        )}
        disabled={disabled || loading}
        {...props}
      >
        {loading && <Spinner className="mr-2 h-4 w-4" />}
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';

// src/components/physics/EscapeIndexDisplay.tsx
interface EscapeIndexDisplayProps {
  eta: number;
  trend?: 'up' | 'down' | 'stable';
  size?: 'sm' | 'lg';
}

export function EscapeIndexDisplay({ eta, trend, size = 'lg' }: EscapeIndexDisplayProps) {
  const status = eta >= 1 ? 'escaped' : eta > 0.8 ? 'approaching' : 'bound';

  return (
    <div className="relative">
      <div className={cn(
        'text-center',
        size === 'lg' ? 'p-8' : 'p-4'
      )}>
        <div className="text-sm uppercase tracking-wide text-slate-400 mb-2">
          Escape Index
        </div>
        <div className={cn(
          'font-bold font-mono',
          size === 'lg' ? 'text-6xl' : 'text-3xl',
          {
            'text-green-400': status === 'escaped',
            'text-yellow-400': status === 'approaching',
            'text-red-400': status === 'bound',
          }
        )}>
          η = {eta.toFixed(2)}
        </div>
        {trend && (
          <div className="mt-2 flex items-center justify-center gap-1 text-sm">
            {trend === 'up' && <TrendingUp className="text-green-400" />}
            {trend === 'down' && <TrendingDown className="text-red-400" />}
            <span className="text-slate-400">
              {status === 'escaped' ? 'Escaped' : status === 'approaching' ? 'Approaching escape velocity' : 'Bound orbit'}
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

// src/components/physics/PhysicsCard.tsx
interface PhysicsCardProps {
  metric: 'thrust' | 'alignment' | 'gravity' | 'mass';
  value: number;
  history?: number[];
  description?: string;
}

export function PhysicsCard({ metric, value, history, description }: PhysicsCardProps) {
  const config = {
    thrust: { label: 'Thrust', symbol: 'T', color: 'text-thrust', icon: Zap },
    alignment: { label: 'Alignment', symbol: 'A', color: 'text-alignment', icon: Target },
    gravity: { label: 'Gravity', symbol: 'G', color: 'text-gravity', icon: Anchor },
    mass: { label: 'Mass', symbol: 'M', color: 'text-mass', icon: Box },
  }[metric];

  return (
    <div className="metric-card">
      <div className="flex items-start justify-between mb-4">
        <div>
          <div className="text-sm text-slate-400 uppercase tracking-wide">
            {config.label}
          </div>
          <div className={cn('text-3xl font-bold font-mono mt-1', config.color)}>
            {value.toFixed(1)}
          </div>
        </div>
        <config.icon className={cn('h-6 w-6', config.color)} />
      </div>
      {history && <MetricSparkline data={history} color={config.color} />}
      {description && <p className="text-sm text-slate-400 mt-2">{description}</p>}
    </div>
  );
}

┌─────────────────────────────────────────────────┐
│  Header                                         │
├───────────┬─────────────────────────────────────┤
│           │  ESCAPE INDEX (Hero)                │
│           │  η = 0.94                           │
│  Sidebar  │  "Approaching escape velocity"      │
│           ├─────────────────────────────────────┤
│           │  PHYSICS METRICS (4-column grid)    │
│           │  [T] [A] [G] [M]                    │
│           ├─────────────────────────────────────┤
│           │  TRAJECTORY FORECAST (Chart)        │
│           │  η over 180 days                    │
│           ├─────────────────────────────────────┤
│           │  LATEST ANALYSIS                    │
│           │  Summary, Risks, Opportunities      │
│           ├─────────────────────────────────────┤
│           │  LEVERAGE POINTS                    │
│           │  Top 5 high-impact actions          │
│           ├─────────────────────────────────────┤
│           │  ACTIVE PLANS                       │
│           │  Current action plans               │
└───────────┴─────────────────────────────────────┘

// src/app/(dashboard)/page.tsx
'use client';

import { useLatestLifeState, useLifeStateHistory } from '@/lib/api/queries/useLifeState';
import { useUserStore } from '@/lib/store/userStore';
import { EscapeIndexDisplay } from '@/components/physics/EscapeIndexDisplay';
import { PhysicsCard } from '@/components/physics/PhysicsCard';
import { TrajectoryChart } from '@/components/physics/TrajectoryChart';
import { AnalysisCard } from '@/components/dashboard/AnalysisCard';
import { LeverageList } from '@/components/dashboard/LeverageList';
import { ActivePlans } from '@/components/dashboard/ActivePlans';
import { Skeleton } from '@/components/ui/Skeleton';

export default function DashboardPage() {
  const userId = useUserStore((state) => state.userId);

  const { data: currentState, isLoading: loadingCurrent } = useLatestLifeState(userId);
  const { data: history, isLoading: loadingHistory } = useLifeStateHistory(userId, 30);

  if (loadingCurrent) {
    return <DashboardSkeleton />;
  }

  if (!currentState) {
    return <EmptyState />;
  }

  const historyData = {
    thrust: history?.map(s => s.thrust) || [],
    alignment: history?.map(s => s.alignment) || [],
    gravity: history?.map(s => s.gravity) || [],
    mass: history?.map(s => s.mass) || [],
  };

  return (
    <div className="space-y-6 p-6">
      {/* Hero Escape Index */}
      <section>
        <EscapeIndexDisplay
          eta={currentState.escapeIndex}
          trend={determineTrend(history)}
          size="lg"
        />
      </section>

      {/* Physics Metrics Grid */}
      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <PhysicsCard
          metric="thrust"
          value={currentState.thrust}
          history={historyData.thrust}
          description="Effective capability × alignment"
        />
        <PhysicsCard
          metric="alignment"
          value={currentState.alignment}
          history={historyData.alignment}
          description="Project coherence factor"
        />
        <PhysicsCard
          metric="gravity"
          value={currentState.gravity}
          history={historyData.gravity}
          description="Environmental constraints"
        />
        <PhysicsCard
          metric="mass"
          value={currentState.mass}
          history={historyData.mass}
          description="System inertia & complexity"
        />
      </section>

      {/* Trajectory Forecast */}
      <section className="card">
        <h2 className="text-xl font-semibold mb-4">Trajectory Forecast</h2>
        <TrajectoryForecastSection userId={userId} />
      </section>

      {/* Analysis & Insights */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <AnalysisCard userId={userId} />
        <LeverageList userId={userId} />
      </div>

      {/* Active Plans */}
      <ActivePlans userId={userId} />
    </div>
  );
}

// src/components/physics/TrajectoryChart.tsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, ComposedChart } from 'recharts';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api/client';
import { TrajectoryForecast } from '@/lib/api/types';

interface TrajectoryChartProps {
  userId: string;
  actionPlan?: any[];
  horizon?: number;
}

export function TrajectoryChart({ userId, actionPlan, horizon = 180 }: TrajectoryChartProps) {
  const { data, isLoading } = useQuery({
    queryKey: ['trajectory-forecast', userId, actionPlan, horizon],
    queryFn: async () => {
      const { data } = await apiClient.post<TrajectoryForecast>(
        `/api/state/${userId}/forecast`,
        { actionPlan: actionPlan || [], horizon }
      );
      return data;
    },
    enabled: !!userId,
  });

  if (isLoading) return <Skeleton className="h-64" />;

  const chartData = data?.days.map((day, i) => ({
    day,
    eta: data.escapeIndex[i],
    thrust: data.thrust[i],
    alignment: data.alignment[i],
    gravity: data.gravity[i],
    mass: data.mass[i],
  })) || [];

  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={chartData}>
        <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
        <XAxis
          dataKey="day"
          stroke="#94a3b8"
          label={{ value: 'Days', position: 'insideBottom', offset: -5 }}
        />
        <YAxis
          stroke="#94a3b8"
          label={{ value: 'Escape Index (η)', angle: -90, position: 'insideLeft' }}
        />
        <Tooltip
          contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155' }}
          labelStyle={{ color: '#e2e8f0' }}
        />
        <Legend />
        <Line
          type="monotone"
          dataKey="eta"
          stroke="#8b5cf6"
          strokeWidth={2}
          name="Escape Index"
          dot={false}
        />
        {/* Reference line at η = 1 (escape threshold) */}
        <Line
          type="monotone"
          dataKey={() => 1}
          stroke="#10b981"
          strokeDasharray="5 5"
          strokeWidth={1}
          name="Escape Threshold"
          dot={false}
        />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

┌─────────────────────────────────────────────────┐
│  View: [Week] [Month] [Quarter]    Today →     │
├─────────────────────────────────────────────────┤
│  Mon    Tue    Wed    Thu    Fri    Sat    Sun │
│ ┌─────┬─────┬─────┬─────┬─────┬─────┬─────┐   │
│ │η=.92│η=.93│η=.94│η=.95│η=.96│η=.97│η=.98│   │
│ │🎯ML │🎯ML │⚓Mtg │🎯Code│🎯Code│     │     │   │
│ │     │     │     │     │     │     │     │   │
│ └─────┴─────┴─────┴─────┴─────┴─────┴─────┘   │
│                                                 │
│  [Compare Scenarios: Scenario A | Scenario B]  │
└─────────────────────────────────────────────────┘

// src/app/(dashboard)/timeline/page.tsx
'use client';

import { useState } from 'react';
import { useUIStore } from '@/lib/store/uiStore';
import { useUserStore } from '@/lib/store/userStore';
import { useForecastTimeline } from '@/lib/api/queries/useTimeline';
import { DayCell } from '@/components/timeline/DayCell';
import { ScenarioComparison } from '@/components/timeline/ScenarioComparison';
import { Button } from '@/components/ui/Button';
import { addDays, startOfWeek, endOfWeek, eachDayOfInterval, format } from 'date-fns';

export default function TimelinePage() {
  const userId = useUserStore((state) => state.userId);
  const { timelineView, setTimelineView, scenarioComparison } = useUIStore();

  const [currentDate, setCurrentDate] = useState(new Date());

  const { data: forecast, isLoading } = useForecastTimeline(userId, {
    start: startOfWeek(currentDate),
    end: addDays(endOfWeek(currentDate), timelineView === 'month' ? 30 : 0),
  });

  const days = eachDayOfInterval({
    start: startOfWeek(currentDate),
    end: endOfWeek(currentDate),
  });

  return (
    <div className="p-6 space-y-6">
      {/* Header Controls */}
      <div className="flex items-center justify-between">
        <div className="flex gap-2">
          <Button
            variant={timelineView === 'week' ? 'primary' : 'secondary'}
            onClick={() => setTimelineView('week')}
          >
            Week
          </Button>
          <Button
            variant={timelineView === 'month' ? 'primary' : 'secondary'}
            onClick={() => setTimelineView('month')}
          >
            Month
          </Button>
          <Button
            variant={timelineView === 'quarter' ? 'primary' : 'secondary'}
            onClick={() => setTimelineView('quarter')}
          >
            Quarter
          </Button>
        </div>

        <div className="flex gap-2">
          <Button variant="ghost" onClick={() => setCurrentDate(addDays(currentDate, -7))}>
            ← Prev
          </Button>
          <Button variant="ghost" onClick={() => setCurrentDate(new Date())}>
            Today
          </Button>
          <Button variant="ghost" onClick={() => setCurrentDate(addDays(currentDate, 7))}>
            Next →
          </Button>
        </div>
      </div>

      {/* Calendar Grid */}
      <div className="grid grid-cols-7 gap-2">
        {/* Day headers */}
        {days.map((day) => (
          <div key={day.toISOString()} className="text-center text-sm text-slate-400 font-medium py-2">
            {format(day, 'EEE')}
          </div>
        ))}

        {/* Day cells */}
        {days.map((day) => {
          const dayForecast = forecast?.find(f =>
            format(new Date(f.date), 'yyyy-MM-dd') === format(day, 'yyyy-MM-dd')
          );

          return (
            <DayCell
              key={day.toISOString()}
              date={day}
              eta={dayForecast?.eta || 0}
              focusAreas={dayForecast?.focusAreas || []}
              constraints={dayForecast?.constraints || []}
            />
          );
        })}
      </div>

      {/* Scenario Comparison */}
      {scenarioComparison && <ScenarioComparison userId={userId} />}
    </div>
  );
}

┌─────────────────────────────────────────────────┐
│  Generate Scenarios                             │
│  ┌───────────────────────────────────────────┐ │
│  │ Goal: [Become senior ML engineer........] │ │
│  │ # Scenarios: [10] ▼   Horizon: [180] days│ │
│  │ [Generate Scenarios]                      │ │
│  └───────────────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│  Scenario Comparison                            │
│  ┌─────────────┬─────────────┬─────────────┐   │
│  │ Scenario A  │ Scenario B  │ Scenario C  │   │
│  │ η: 1.24     │ η: 1.18     │ η: 1.15     │   │
│  │ P(esc): 87% │ P(esc): 79% │ P(esc): 74% │   │
│  │ Days: 142   │ Days: 156   │ Days: 168   │   │
│  │ [View] [✓]  │ [View]      │ [View]      │   │
│  └─────────────┴─────────────┴─────────────┘   │
│                                                 │
│  Scenario A - Deep Dive                         │
│  [Chart: η over time]                           │
│  Day-by-day actions...                          │
└─────────────────────────────────────────────────┘

// src/app/(dashboard)/scenarios/page.tsx
'use client';

import { useState } from 'react';
import { useGenerateScenarios, useCreatePlan } from '@/lib/api/mutations/useGenerateScenarios';
import { useUserStore } from '@/lib/store/userStore';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { ScenarioCard } from '@/components/scenarios/ScenarioCard';
import { ComparisonMatrix } from '@/components/scenarios/ComparisonMatrix';
import { toast } from 'sonner';

export default function ScenariosPage() {
  const userId = useUserStore((state) => state.userId);
  const [goal, setGoal] = useState('');
  const [nScenarios, setNScenarios] = useState(10);
  const [horizon, setHorizon] = useState(180);

  const generateMutation = useGenerateScenarios();
  const createPlanMutation = useCreatePlan();

  const handleGenerate = () => {
    if (!goal.trim()) {
      toast.error('Please enter a goal');
      return;
    }

    generateMutation.mutate({ userId, goal, nScenarios, horizon });
  };

  const handleSaveScenario = (scenarioName: string) => {
    createPlanMutation.mutate({ userId, goal, nScenarios: 1, horizon });
  };

  return (
    <div className="p-6 space-y-6">
      {/* Generator Form */}
      <section className="card">
        <h2 className="text-2xl font-bold mb-4">Generate Scenarios</h2>
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-2">Goal</label>
            <Input
              value={goal}
              onChange={(e) => setGoal(e.target.value)}
              placeholder="e.g., Become a senior ML engineer at a top tech company"
              className="w-full"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-2"># Scenarios</label>
              <Input
                type="number"
                value={nScenarios}
                onChange={(e) => setNScenarios(parseInt(e.target.value))}
                min={1}
                max={20}
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-2">Horizon (days)</label>
              <Input
                type="number"
                value={horizon}
                onChange={(e) => setHorizon(parseInt(e.target.value))}
                min={30}
                max={365}
              />
            </div>
          </div>
          <Button
            onClick={handleGenerate}
            loading={generateMutation.isPending}
            className="w-full"
          >
            Generate Scenarios
          </Button>
        </div>
      </section>

      {/* Results */}
      {generateMutation.data && (
        <>
          <ComparisonMatrix
            scenarios={generateMutation.data.rankedScenarios}
            onSelect={handleSaveScenario}
          />

          <section className="space-y-4">
            <h2 className="text-2xl font-bold">Scenario Details</h2>
            {generateMutation.data.rankedScenarios.map((scenario) => (
              <ScenarioCard
                key={scenario.scenarioName}
                scenario={scenario}
                userId={userId}
                horizon={horizon}
              />
            ))}
          </section>
        </>
      )}
    </div>
  );
}

NEXT_PUBLIC_API_BASE_URL=http://localhost:3003
NEXT_PUBLIC_DEMO_USER_ID=demo
NEXT_PUBLIC_PYTHON_API_URL=http://localhost:8001

Phase 1: Foundation          [██████████] 8/8 tasks    (100%) ✅
Phase 2: Components          [██████████] 4/4 tasks    (100%) ✅
Phase 3: Dashboard           [██████████] 2/2 tasks    (100%) ✅
Phase 4: Timeline            [██████████] 2/2 tasks    (100%) ✅
Phase 5: Scenarios           [██████████] 1/1 task     (100%) ✅
Phase 6: Skills              [██████████] 1/1 task     (100%) ✅
Phase 7: Polish              [░░░░░░░░░░] 0/5 tasks    (0%)   ⏳ NEXT (Optional)

TOTAL PROGRESS               [████████░░] 18/23 tasks  (78%)
CORE FEATURES                [██████████] 18/18 tasks  (100%) 🎉