Configure AlgoSpaced for Hugging Face Spaces deployment

.gitignore

@@ -0,0 +1,40 @@
+# Virtual environment
+venv/
+.venv/
+env/
+ENV/
+
+# Python caching
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Local SQLite databases and logs
+/scratch/db_*.sqlite
+sync.log
+debug_cookies.txt
+debug_db.txt
+
+# Node dependencies and build files
+node_modules/
+algospaced-ui/node_modules/
+algospaced-ui/dist/
+
+# Local configuration and secrets
+.streamlit/secrets.toml
+.env
+.env.local
+.env.*.local
+
+# Design layouts and binaries
+stitch_algospaced_dock_layout/
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.ico
+*.zip
+*.tar.gz
+*.pdf
+

.streamlit/secrets.toml.example

@@ -0,0 +1,19 @@
+# .streamlit/secrets.toml
+
+SUPABASE_URL = "your_supabase_url_here"
+SUPABASE_KEY = "your_supabase_anon_key_here"
+GEMINI_API_KEY = "your_gemini_api_key_here"
+GDRIVE_FOLDER_ID = "your_gdrive_folder_id_here"
+
+# Contents of your google-credentials.json
+[gcp_service_account]
+type = "service_account"
+project_id = "..."
+private_key_id = "..."
+private_key = "..."
+client_email = "..."
+client_id = "..."
+auth_uri = "https://accounts.google.com/o/oauth2/auth"
+token_uri = "https://oauth2.googleapis.com/token"
+auth_provider_x509_cert_url = "https://www.googleapis.com/oauth2/v1/certs"
+client_x509_cert_url = "..."

Dockerfile

@@ -0,0 +1,36 @@
+# Stage 1: Build the React frontend
+FROM node:20-alpine AS frontend-builder
+WORKDIR /app/frontend
+
+# Copy package files and install dependencies
+COPY algospaced-ui/package*.json ./
+RUN npm ci
+
+# Copy the rest of the frontend source code
+COPY algospaced-ui/ ./
+
+# Run the build
+RUN npm run build
+
+# Stage 2: Run the FastAPI backend
+FROM python:3.11-slim
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install python dependencies
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all source files
+COPY . .
+
+# Copy compiled frontend from Stage 1 into the backend's static directory
+COPY --from=frontend-builder /app/frontend/dist ./algospaced-ui/dist
+
+# Expose port (Render/Railway will set PORT env var, default to 8000)
+ENV PORT=8000
+CMD uvicorn main:app --host 0.0.0.0 --port $PORT

System_Design_DSA_Learn.md

@@ -0,0 +1,384 @@
+# System Design Document: AlgoSpaced
+
+A cloud-native, mobile-responsive Spaced Repetition System (SRS) designed to help software engineering candidates master the LeetCode 150 patterns. Rather than rote memorization, **AlgoSpaced** optimizes the retention of algorithmic paradigms using dynamic intervals, cloud syncing, an automated LLM Code Reviewer, a gamified Daily Streak System, and an automated Google Drive Ingestion Pipeline.
+
+## 1. System Architecture Overview
+
+The system is designed with a lightweight, cross-platform approach to ensure seamless transition between desktop (IDE practice) and mobile (on-the-go review) views.
+
+```
++--------------------------------------------------------------+
+|                        Client Tier                           |
+|      (Mobile Browser / Desktop Browser - Streamlit App)      |
++------------------------------+-------------------------------+
+                               |
+                        HTTPS (JSON / REST)
+                               |
+                               v
++------------------------------+-------------------------------+
+|                        Application Tier                      |
+|                  (Python Serverless/Streamlit)                |
++-------+----------------------+-----------------------+-------+
+        |                      |                       |
+        | Secure API           | Sync Data             | Database Queries
+        | (gemini-2.5-flash)   | Google Drive & Docs   | (SSL/TLS Connection)
+        v                      v                       v
++-------+--------------------+ +--------------------+ +-------+-------+
+|        External AI Engine  | | Google Workspace   | | Database Tier |
+|  (Google Gemini API)       | | (Drive & Docs APIs)| | (Supabase/PG) |
++----------------------------+ +--------------------+ +---------------+
+
+```
+
+### Components
+
+1.  **Client Tier (Frontend):** A unified, responsive web interface built using **Streamlit**. It automatically handles fluid widths and touch-friendly target sizes for mobile screens, adapting beautifully between viewports.
+    
+2.  **Application Tier (Backend Logic):** Python logic running the core Spaced Repetition engine (calculating intervals), processing user code inputs, calculating daily active streaks, coordinating Google Drive folder scans, and structuring payloads for the LLM evaluation.
+    
+3.  **External AI Engine (Gemini API):** An intelligent grading agent utilizing `gemini-2.5-flash-preview-09-2025` to evaluate candidate code for logical correctness, time/space complexity, and pattern edge-cases.
+    
+4.  **Database Tier (Cloud Database):** A managed PostgreSQL instance (e.g., Supabase) storing user progress, problem history, review queues, and user streak statistics.
+    
+
+## 2. Spaced Repetition & Streak Algorithms
+
+### 2.1 Leitner System Spaced Repetition
+
+To avoid linear burnout, AlgoSpaced implements a customized **Leitner System** optimized for algorithmic patterns. Problems transition between 5 "Boxes", where each box represents a distinct revision interval.
+
+Let the next review date $D_{next}$ for a problem $p$ be defined as:
+
+$$D_{next} = D_{last} + I(b)$$
+
+Where $D_{last}$ is the date of the last review, and $I(b)$ is the interval (in days) associated with the problem's current Box level $b \in \{1, 2, 3, 4, 5\}$:
+
+$$I(b) = \begin{cases} 1 \text{ day} & \text{if } b = 1 \text{ (Forgot / Hard)} \\ 3 \text{ days} & \text{if } b = 2 \\ 7 \text{ days} & \text{if } b = 3 \\ 14 \text{ days} & \text{if } b = 4 \\ 30 \text{ days} & \text{if } b = 5 \text{ (Mastered)} \end{cases}$$
+
+### 2.2 SRS State Transitions
+
+-   **On Correct Evaluation (Easy / AI Approved):**
+    
+    $$b_{new} = \min(b_{current} + 1, 5)$$
+-   **On Mixed Evaluation (Medium / Minor Bugs):**
+    
+    $$b_{new} = b_{current}$$
+    
+    _(No change in Box level, but resets the countdown interval to_ $I(b_{current})$ _days from today)_
+    
+-   **On Incorrect/Forgotten Evaluation (Hard):**
+    
+    $$b_{new} = 1$$
+    
+    _(Resets to Box 1 immediately to build retention)_
+    
+
+### 2.3 Daily Streak Mathematical Model
+
+To keep motivation high, the system maintains a running daily streak tracking active participation. A streak increments when the user completes at least **one** practice session (submitting code or passing a review) within a calendar day.
+
+Let $T_{now}$ be the current timestamp in the user's localized timezone, and let $Date(T)$ be the calendar date portion of a timestamp. Let $D_{last\_active}$ be the date of the user's last logged review session.
+
+When a review session is completed, the system evaluates the state of the streak:
+
+$$\text{Streak Status} = \begin{cases} \text{No Change} & \text{if } Date(T_{now}) = D_{last\_active} \\ \text{Increment Streak} & \text{if } Date(T_{now}) = D_{last\_active} + 1 \text{ day} \\ \text{Reset Streak to 1} & \text{if } Date(T_{now}) > D_{last\_active} + 1 \text{ day} \end{cases}$$
+
+#### Lazy Streak Verification on Login
+
+To ensure the visual streak updates immediately even before the user starts a session, the frontend runs a checking routine whenever the application loads:
+
+$$\text{Current Streak} = \begin{cases} 0 & \text{if } Date(T_{now}) > D_{last\_active} + 1 \text{ day} \\ \text{Unchanged} & \text{otherwise} \end{cases}$$
+
+## 3. Google Drive Ingestion Pipeline
+
+To make registration friction-free, users only need to drop their LeetCode notes as Google Docs into a dedicated Google Drive folder (e.g., named `LeetCode-150-Reviews`). The system will parse and sync them automatically.
+
+### 3.1 Authentication Workflow
+
+The background sync worker uses a secure Google Cloud service account with specific read-only permissions:
+
+-   **Scope Required:** `https://www.googleapis.com/auth/drive.readonly` and `https://www.googleapis.com/auth/documents.readonly`
+    
+
+### 3.2 Document Structured Parsing Rules
+
+Your notes are structured inside the Google Doc in a human-friendly format. The ingestion script parses the Google Doc's JSON structural elements (`body.content`) and applies regex matching to dynamically extract fields:
+
+```
++--------------------------------------------------------------+
+|                     Google Doc Layout                        |
++--------------------------------------------------------------+
+| Document Title: [Problem Name] (e.g. "Two Sum")              |
+|                                                              |
+| Pattern: [Pattern Name]                                      |
+| Complexity: Time: [O(N)], Space: [O(N)]                      |
+|                                                              |
+| ---                                                          |
+| [Optional: Aha! Moment Line / Key insight]                  |
+|                                                              |
+| Code:                                                        |
+| ```python                                                    |
+| ... python code solution ...                                 |
+| ```                                                          |
++--------------------------------------------------------------+
+
+```
+
+1.  **Problem Name:** Extracted directly from the Doc filename.
+    
+2.  **Pattern Name:** Found via Regex search for line: `Pattern:\s*(.*)`. Default to `Unassigned` if not found.
+    
+3.  **Complexities:** Found via Regex matching: `Time:\s*(\S+)\s*,\s*Space:\s*(\S+)`.
+    
+4.  **Correct Working Code Block:** Parsed by grabbing all texts following a `Code:` delimiter or inside formatted monospace blocks.
+    
+
+## 4. Data Models & Database Schema
+
+The database must be hosted in the cloud to sync perfectly between your phone and laptop. Below is the relational schema designed for **PostgreSQL**.
+
+### PostgreSQL Schema Initialization Script
+
+```
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Table: problems
+CREATE TABLE problems (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    name VARCHAR(255) NOT NULL UNIQUE,
+    pattern VARCHAR(100) NOT NULL,
+    difficulty VARCHAR(20) NOT NULL DEFAULT 'Medium' CHECK (difficulty IN ('Easy', 'Medium', 'Hard')),
+    google_doc_url TEXT,
+    google_doc_id VARCHAR(100) UNIQUE, -- Tracks file to prevent duplicates
+    optimal_time VARCHAR(50) NOT NULL DEFAULT 'O(N)',
+    optimal_space VARCHAR(50) NOT NULL DEFAULT 'O(N)',
+    reference_code TEXT, -- Stores reference code synced from Doc
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Table: user_reviews
+CREATE TABLE user_reviews (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    problem_id UUID NOT NULL REFERENCES problems(id) ON DELETE CASCADE,
+    box_level INTEGER NOT NULL DEFAULT 1 CHECK (box_level BETWEEN 1 AND 5),
+    last_reviewed TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    next_review TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    times_correct INTEGER NOT NULL DEFAULT 0,
+    total_attempts INTEGER NOT NULL DEFAULT 0,
+    CONSTRAINT unique_problem_review UNIQUE (problem_id)
+);
+
+-- Table: user_streaks
+CREATE TABLE user_streaks (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    current_streak INTEGER NOT NULL DEFAULT 0 CHECK (current_streak >= 0),
+    longest_streak INTEGER NOT NULL DEFAULT 0 CHECK (longest_streak >= 0),
+    last_active_date DATE,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+```
+
+### Table Properties & Metadata
+
+#### Table: `problems` (Modified for Google Sync)
+
+Column Name
+
+Data Type
+
+Constraints
+
+Description
+
+`id`
+
+`UUID`
+
+Primary Key, Default: `uuid_generate_v4()`
+
+Unique problem identifier
+
+`name`
+
+`VARCHAR(255)`
+
+Not Null, Unique
+
+LeetCode title (e.g., "3Sum")
+
+`pattern`
+
+`VARCHAR(100)`
+
+Not Null
+
+Core paradigm (e.g., "Two Pointers")
+
+`google_doc_url`
+
+`TEXT`
+
+Nullable
+
+Hyperlink to personal Google Doc notes
+
+`google_doc_id`
+
+`VARCHAR(100)`
+
+Unique
+
+Unique identifier of file in Google Drive
+
+`reference_code`
+
+`TEXT`
+
+Nullable
+
+The ideal source code extracted from your Doc
+
+## 5. AI Code Reviewer Integration (Gemini API)
+
+To evaluate handwritten code on a mobile device without compiler dependencies, heavy runtimes, or strict test harnesses, the system integrates the Gemini API using `gemini-2.5-flash-preview-09-2025`.
+
+### API Payload Schema Configuration
+
+```
+import google.generativeai as genai
+from google.genai import types
+
+# Define JSON Schema to guarantee structural correctness of the AI response
+response_schema = {
+    "type": "OBJECT",
+    "properties": {
+        "is_correct": {"type": "BOOLEAN"},
+        "detected_complexity": {
+            "type": "OBJECT",
+            "properties": {
+                "time": {"type": "STRING"},
+                "space": {"type": "STRING"}
+            },
+            "required": ["time", "space"]
+        },
+        "bugs": {
+            "type": "ARRAY",
+            "items": {"type": "STRING"}
+        },
+        "key_suggestion": {"type": "STRING"}
+    },
+    "required": ["is_correct", "detected_complexity", "bugs", "key_suggestion"]
+}
+
+```
+
+### System & Prompt Prompts
+
+```
+system_instruction = """
+You are an expert technical interviewer evaluating a candidate's LeetCode code written from memory.
+Your primary objective is to review code correctness, algorithmic efficiency, and potential edge-case failures.
+Be highly forgiving of minor visual/syntax typos (e.g., off-by-one indentation, minor spelling mistakes in variables, or missing colons)
+which would be caught in 1 second by a standard IDE. Focus on raw algorithmic correctness.
+"""
+
+user_prompt_template = """
+Problem Name: {problem_name}
+Target Pattern: {pattern_name}
+Expected Complexity: {target_complexities}
+
+Candidate's Code Submission:
+{candidate_code}
+
+Evaluate the code logic and return the structured JSON output.
+"""
+
+```
+
+## 6. System Execution Workflows
+
+### Daily Queue Retrieval Workflow
+
+The system minimizes burnout by limiting the daily workload to problems scheduled for _on or before_ the current timestamp.
+
+```
+[User Opens App] 
+       |
+       v
+[Query Database] 
+  1. Retrieve Active Streak -> SELECT * FROM user_streaks LIMIT 1;
+  2. Lazy Check: If CURRENT_DATE > last_active_date + 1, reset current_streak to 0 in DB.
+  3. Query Daily Cards -> SELECT * FROM user_reviews 
+                           JOIN problems ON user_reviews.problem_id = problems.id
+                           WHERE next_review <= NOW()
+                           ORDER BY next_review ASC;
+       |
+       v
+[Render Streamlit Mobile-Responsive Cards & Streak Banner]
+
+```
+
+### Google Drive Ingest Sync (Triggered via UI Button or Cron)
+
+The user can tap "Sync Folder" in the app interface, executing the background sync worker:
+
+```
+                      [User Taps "Sync Google Folder"]
+                                     |
+                                     v
+                        [Read Files from Folder]
+             Call Google Drive API: List files inside target FolderID
+                                     |
+                                     v
+                       [Filter New Google Doc IDs]
+         Identify Doc IDs not present in problems.google_doc_id DB column
+                                     |
+                                     v
+                  +------------------+------------------+
+                  |                                     |
+         [No New Docs Found]                    [New Docs Found]
+                  |                                     |
+                  v                                     v
+          Complete Sync Task                    For each new doc:
+                                                - Call Google Docs API
+                                                - Parse name, patterns, code
+                                                - INSERT INTO problems
+                                                - INSERT INTO user_reviews 
+                                                  (Default Box = 1, next_review = now())
+                                                        |
+                                                        v
+                                                Refresh Review Queue
+
+```
+
+## 7. Portability, Accessibility & Performance
+
+### 1. Fully Responsive Fluid Layouts
+
+-   **Framework Adaptation:** All Streamlit elements are configured using native block components (`st.columns`, `st.container`) that transition seamlessly from a dual-pane desktop view to a single-stack layout on iOS/Android devices.
+    
+-   **Typographic Scaling:** Markdown blocks use standard relative heading levels (`###` and body text) to remain highly readable on varying screen resolutions.
+    
+-   **Streak Visual Integration:** The app features a high-visibility, fluid CSS indicator displaying the user's current streak count (e.g., "🔥 14 Days Active") pinned to the top of both mobile and desktop screens.
+    
+-   **Touch Target Optimization:** Touch elements such as "Submit", "Forgot", and "Easy" use high-contrast primary colors with custom internal padding so they can be clicked reliably with a single thumb tap.
+    
+
+### 2. Manual Offline Fallback Mode (No Connection Option)
+
+Traveling frequently results in spotty network connections. To prevent missed study days and protect your active streak:
+
+-   **The "Self-Grade" Toggle:** If connection to the Gemini API is lost or latency is too high, users can toggle a "Manual Grade" override.
+    
+-   **Mechanism:** The app displays the user's stored Google Doc code and asks the user to manually rate themselves ("Forgot", "Struggled", "Smashed It").
+    
+-   **Local Synchronization:** The review state transition calculates intervals locally, registers the streak daily increment, and pushes the DB update asynchronously, guaranteeing zero study gaps.
+    
+
+### 3. Data Protection & Sync Security
+
+-   **Encrypted Cloud Connect:** All DB calls are encrypted via TLS/SSL.
+    
+-   **Personal Space Partitioning:** The Supabase endpoint utilizes Row-Level Security (RLS) to ensure that only you can view, create, or alter your saved algorithmic problem queues and personal study metrics.

algospaced-ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

algospaced-ui/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

algospaced-ui/eslint.config.js

@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])

algospaced-ui/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>AlgoSpaced - Arcade Review</title>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&amp;family=Be+Vietnam+Pro:wght@500;700&amp;family=Courier+Prime:wght@400;700&amp;family=Press+Start+2P&amp;display=swap" rel="stylesheet"/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

algospaced-ui/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "algospaced-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-python": "^6.2.1",
+    "@supabase/supabase-js": "^2.108.2",
+    "@uiw/react-codemirror": "^4.25.10",
+    "lucide-react": "^1.21.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.1",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}

algospaced-ui/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

algospaced-ui/src/App.tsx

@@ -0,0 +1,895 @@
+import { useEffect, useState } from 'react';
+import { supabase } from './supabaseClient';
+import Auth from './components/Auth';
+import ReviewQueue from './components/ReviewQueue';
+import JourneyPath from './components/JourneyPath';
+import WindowShell from './components/WindowShell';
+import TerminalEmulator from './components/TerminalEmulator';
+import PythonChallenge from './components/PythonChallenge';
+import MySQLPlayground from './components/MySQLPlayground';
+import FileExplorer from './components/FileExplorer';
+
+
+
+interface WindowState {
+  isOpen: boolean;
+  isMinimized: boolean;
+}
+
+export default function App() {
+  const [user, setUser] = useState<any>(null);
+  const [overrideProblemId, setOverrideProblemId] = useState<string | null>(null);
+
+  // Window states
+  const [windows, setWindows] = useState<Record<string, WindowState>>({
+    queue: { isOpen: true, isMinimized: false },
+    journey: { isOpen: false, isMinimized: false },
+    terminal: { isOpen: false, isMinimized: false },
+    computer: { isOpen: false, isMinimized: false },
+    sync: { isOpen: false, isMinimized: false },
+    python: { isOpen: false, isMinimized: false },
+    mysql: { isOpen: false, isMinimized: false },
+  });
+  const [activeWindow, setActiveWindow] = useState<string>('queue');
+
+  // Start Menu and System info
+  const [isStartOpen, setIsStartOpen] = useState(false);
+  const [streak, setStreak] = useState<any>(null);
+  const [time, setTime] = useState('');
+
+  // Sync state
+  const [syncing, setSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<string | null>(null);
+
+  // Wallpaper state
+  const [wallpaperUrl, setWallpaperUrl] = useState<string>(() => {
+    return localStorage.getItem('desktopWallpaperUrl') || 'https://lh3.googleusercontent.com/aida-public/AB6AXuAMJHVhhK8_G7F8sbhn8F7w4AZWXb1O_-HLKvrZ_fJlbUVMcVuxxEOO_LlOh8qIwtAn2KvzvCwzmtNLLEZ5uYkCEsx8ZWXJR609qgSMRSX8LBBeskk4VzVXnyzsgIKCedeV2PvGxJlUNnledcWKCXqG9egQi8dgTcA7C2z82QyM73KZ4s7ZRzZHNupuQt1ocfcMl9E_x1PWFRridl751LIpyGZgednS5CmVw2rZvFc_tbp2QTxgVHJ_59myEBmy6aajbO06AhkKmCvI';
+  });
+
+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{ visible: boolean; x: number; y: number }>({
+    visible: false,
+    x: 0,
+    y: 0
+  });
+
+  // Fullscreen state
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // Fetch streak info
+  const fetchStreak = async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/streak`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setStreak(data);
+      }
+    } catch (err) {
+      console.error('Error fetching streak:', err);
+    }
+  };
+
+  useEffect(() => {
+    // Check initial session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null);
+    });
+
+    // Listen for auth state changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+    });
+
+    // Clock Updater
+    const updateTime = () => {
+      const date = new Date();
+      let hours = date.getHours();
+      const minutes = date.getMinutes();
+      const ampm = hours >= 12 ? 'PM' : 'AM';
+      hours = hours % 12;
+      hours = hours ? hours : 12; // 0 is 12
+      const minStr = minutes < 10 ? '0' + minutes : minutes;
+      setTime(`${hours}:${minStr} ${ampm}`);
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 30000);
+
+    return () => {
+      subscription.unsubscribe();
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (user) {
+      fetchStreak();
+      const savedWallpaper = localStorage.getItem('desktopWallpaperUrl');
+      if (savedWallpaper) {
+        setWallpaperUrl(savedWallpaper);
+      }
+    }
+  }, [user]);
+
+  // Fullscreen change listener
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  // Zoom prevention listener
+  useEffect(() => {
+    const handleWheel = (e: WheelEvent) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+      }
+    };
+
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && (
+        e.key === '=' || 
+        e.key === '-' || 
+        e.key === '0' || 
+        e.key === '+' || 
+        e.code === 'NumpadAdd' || 
+        e.code === 'NumpadSubtract'
+      )) {
+        e.preventDefault();
+      }
+    };
+
+    const handleTouchmove = (e: TouchEvent) => {
+      if (e.touches.length > 1) {
+        e.preventDefault();
+      }
+    };
+
+    document.addEventListener('wheel', handleWheel, { passive: false });
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('touchmove', handleTouchmove, { passive: false });
+
+    return () => {
+      document.removeEventListener('wheel', handleWheel);
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('touchmove', handleTouchmove);
+    };
+  }, []);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    const target = e.target as HTMLElement;
+    // Prevent menu if clicking interactive windows/buttons/inputs
+    if (
+      target.closest('.window-shadow') || 
+      target.closest('button') || 
+      target.closest('input') || 
+      target.closest('textarea') || 
+      target.closest('details') ||
+      target.closest('#start-menu')
+    ) {
+      return;
+    }
+    e.preventDefault();
+    setContextMenu({
+      visible: true,
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+
+  const closeContextMenu = () => {
+    if (contextMenu.visible) {
+      setContextMenu(prev => ({ ...prev, visible: false }));
+    }
+  };
+
+  const toggleFullscreen = () => {
+    closeContextMenu();
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch((err) => {
+        console.error(`Error enabling fullscreen: ${err.message}`);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  const compressAndSaveWallpaper = (file: File) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        let width = img.width;
+        let height = img.height;
+
+        const MAX_WIDTH = 1920;
+        const MAX_HEIGHT = 1080;
+
+        if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+          if (width / height > MAX_WIDTH / MAX_HEIGHT) {
+            height = Math.round((height * MAX_WIDTH) / width);
+            width = MAX_WIDTH;
+          } else {
+            width = Math.round((width * MAX_HEIGHT) / height);
+            height = MAX_HEIGHT;
+          }
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, width, height);
+          try {
+            const dataUrl = canvas.toDataURL('image/jpeg', 0.7);
+            setWallpaperUrl(dataUrl);
+            localStorage.setItem('desktopWallpaperUrl', dataUrl);
+            localStorage.setItem('customWallpaperUrl', dataUrl);
+            localStorage.setItem('customWallpaperName', file.name);
+          } catch (err) {
+            console.error('Failed to save compressed image to localStorage:', err);
+            // Fallback: set it as state but warn
+            const rawDataUrl = event.target?.result as string;
+            setWallpaperUrl(rawDataUrl);
+          }
+        } else {
+          const rawDataUrl = event.target?.result as string;
+          setWallpaperUrl(rawDataUrl);
+          try {
+            localStorage.setItem('desktopWallpaperUrl', rawDataUrl);
+            localStorage.setItem('customWallpaperUrl', rawDataUrl);
+            localStorage.setItem('customWallpaperName', file.name);
+          } catch (err) {
+            console.error('Failed to save raw image to localStorage:', err);
+          }
+        }
+      };
+      img.src = event.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleWallpaperChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    closeContextMenu();
+    const file = e.target.files?.[0];
+    if (file) {
+      compressAndSaveWallpaper(file);
+    }
+  };
+
+
+  const openWindow = (id: string) => {
+    setWindows(prev => ({
+      ...prev,
+      [id]: { isOpen: true, isMinimized: false }
+    }));
+    setActiveWindow(id);
+    setIsStartOpen(false);
+  };
+
+  const closeWindow = (id: string) => {
+    setWindows(prev => ({
+      ...prev,
+      [id]: { ...prev[id], isOpen: false }
+    }));
+  };
+
+  const minimizeWindow = (id: string) => {
+    setWindows(prev => ({
+      ...prev,
+      [id]: { ...prev[id], isMinimized: true }
+    }));
+  };
+
+  const toggleWindowMinimize = (id: string) => {
+    setWindows(prev => {
+      const win = prev[id];
+      if (win.isMinimized || !win.isOpen) {
+        setActiveWindow(id);
+        return {
+          ...prev,
+          [id]: { isOpen: true, isMinimized: false }
+        };
+      } else if (activeWindow === id) {
+        return {
+          ...prev,
+          [id]: { ...win, isMinimized: true }
+        };
+      } else {
+        setActiveWindow(id);
+        return prev;
+      }
+    });
+  };
+
+  const handleSelectProblemForReview = (problemId: string) => {
+    setOverrideProblemId(problemId);
+    openWindow('queue');
+  };
+
+  const triggerSync = async () => {
+    openWindow('sync');
+    setSyncing(true);
+    setSyncResult(null);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/sync`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setSyncResult(data.message || 'Synchronization successfully completed!');
+        fetchStreak();
+      } else {
+        setSyncResult('Sync operation failed at server host.');
+      }
+    } catch {
+      setSyncResult('Cloud synchronization server unreachable.');
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    setIsStartOpen(false);
+    await supabase.auth.signOut();
+  };
+
+  if (!user) {
+    return <Auth />;
+  }
+
+  const username = user.email ? user.email.split('@')[0] : 'Player_One';
+
+  return (
+    <div 
+      onContextMenu={handleContextMenu}
+      onClick={closeContextMenu}
+      className="w-screen h-screen m-0 p-0 relative font-sans text-ink-black overflow-hidden select-none"
+    >
+      
+      {/* Background Wallpaper image */}
+      <div 
+        className="absolute inset-0 w-full h-full bg-cover bg-center z-[-1] saturate-150 contrast-125 transition-all duration-300" 
+        style={{ backgroundImage: `url('${wallpaperUrl}')` }}
+      />
+
+      {/* Desktop Icons column */}
+      <nav className="fixed left-0 top-12 h-[calc(100vh-80px)] w-[140px] flex flex-col items-center py-gutter-md space-y-6 z-10 overflow-y-auto custom-scrollbar select-none">
+        
+        {/* Daily Queue Shortcut */}
+        <button 
+          onClick={() => toggleWindowMinimize('queue')}
+          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+        >
+          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+              view_list
+            </span>
+          </div>
+          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+            DAILY<br/>QUEUE
+          </span>
+        </button>
+
+        {/* Journey Path Shortcut */}
+        <button 
+          onClick={() => toggleWindowMinimize('journey')}
+          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+        >
+          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+              route
+            </span>
+          </div>
+          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+            JOURNEY<br/>PATH
+          </span>
+        </button>
+
+        {/* Drive Sync Shortcut */}
+        <button 
+          onClick={triggerSync}
+          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+        >
+          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+            <span className="material-symbols-outlined text-4xl" style={{ fontVariationSettings: "'FILL' 1" }}>
+              cloud_sync
+            </span>
+          </div>
+          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+            DRIVE<br/>SYNC
+          </span>
+        </button>
+
+        {/* My Computer Shortcut */}
+        <button 
+          onClick={() => toggleWindowMinimize('computer')}
+          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+        >
+          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
+            <img 
+              alt="My Computer" 
+              className="w-full h-full object-cover" 
+              src="https://lh3.googleusercontent.com/aida-public/AB6AXuD2tUGA2d7QiNyajDAWYK183zhNTgtAZpOXK3E9wRvHGs-t6ykWt9uPScYe_fziWzQI0pREcY_ThI341WvGMusyYmnAkagfuwx6wubIs1ES68DO8CCNAlcHcb2zOUU4MJeYuhWDy1uYRqyGYjIaDUqfgNWk2vm4WzwRqoorn2dxtZ6QdJhEKbXjG8fG9chkkvr68qJf0fLUL6bIqBXZg2FJ30S7zS3oZ4IZsug-wLyRYuJ4Gu_86snNUo1whNrBdZm5OMREfc9sLbwJ"
+            />
+          </div>
+          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+            MY<br/>COMP
+          </span>
+        </button>
+
+        {/* Terminal Shortcut */}
+        <button 
+          onClick={() => toggleWindowMinimize('terminal')}
+          className="flex flex-col items-center justify-center text-ink-black gap-2.5 p-2 w-full group icon-hover-shift cursor-pointer outline-none"
+        >
+          <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow group-hover:bg-secondary-container transition-colors shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] p-1 overflow-hidden">
+            <img 
+              alt="Terminal" 
+              className="w-full h-full object-cover" 
+              src="https://lh3.googleusercontent.com/aida-public/AB6AXuA2AvcQ2oKWP8AJ8yR5nF82LLDEH1FKySUK-npnqEjvJ6Cs9xp8joCwH7x43oTCAC5xhO2rQdYzka3B6u72FNbdxMnsv3WJLye3bKochu8AnnRlS3szfYSaj724sYsiZo4n8G-oWqvl7C0rOGaDaU2nRH1xXmW2PBi6L2NryTsUaTCVZQKTKBBNNEOig5kh7B52e-iIuj2PTzaSjF9ebp6gMuCnBtJT8Sxo5Qsmvfm-t2U5r_qQpRiYj--Ut41T7NTh-tHgs4S4kBvz"
+            />
+          </div>
+          <span className="font-icon-label text-[9px] bg-ink-black text-white px-2 py-1 border-[3px] border-ink-black text-center leading-tight shadow-[2px_2px_0px_0px_#fde047] uppercase">
+            TERMINAL
+          </span>
+        </button>
+      </nav>
+
+      {/* System Gadget Widget (Top Right) */}
+      <div className="absolute top-desktop-margin right-desktop-margin w-64 bg-paper-white border-[3px] border-ink-black gadget-shadow z-20 overflow-hidden flex flex-col shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] select-none">
+        <div className="bg-[#0ea5e9] border-b-[3px] border-ink-black px-3 py-1 flex justify-between items-center text-white">
+          <span className="font-window-title text-xs font-bold tracking-wide">Profile.sys</span>
+        </div>
+        <div className="p-3 flex items-center gap-3 bg-[#fdf8e1]">
+          <div className="w-12 h-12 border-[3px] border-ink-black overflow-hidden bg-primary-fixed-dim shadow-[2px_2px_0_0_#1E293B] shrink-0">
+            <img 
+              className="w-full h-full object-cover" 
+              src="https://lh3.googleusercontent.com/aida-public/AB6AXuBl1MnAmh_W_EWibibrGw1F1YSenuKlaIn3JymUnBKn1nPLjAaOBjoLzdT5krzVDmihFhXOk-DEtNTdM2Js1_Ttr--5WZohhyqD1QfpS6j_yU1_-4wweOmgWq2HLUYNMf0mzQDNLNu5KbACEJKL5sm1YaTLPePlO687X3VHYsUhWTpUQeBwFjushaBpyW8tEa2dJj5ZSRWq0qa5GhtE0zAAW741e2SIRtFOp7CvBYEEetymSiucK513lli1TUwgWIgXvlfxZoGbH00q"
+            />
+          </div>
+          <div className="overflow-hidden">
+            <div className="font-headline-md text-sm font-bold text-ink-black truncate">{username}</div>
+            <div className="flex items-center gap-1 text-red-500 mt-1 select-none font-bold">
+              <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>
+                local_fire_department
+              </span>
+              <span className="font-arcade text-[7px]">{streak?.current_streak ?? 0} DAY STREAK</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Floating Windows Shell Containers */}
+      
+      {/* 1. Daily Review Queue Window */}
+      <WindowShell
+        id="queue"
+        title="Daily Queue.exe"
+        icon="terminal"
+        isOpen={windows.queue.isOpen}
+        isMinimized={windows.queue.isMinimized}
+        onClose={() => closeWindow('queue')}
+        onMinimize={() => minimizeWindow('queue')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="750px"
+        defaultHeight="600px"
+      >
+        <ReviewQueue 
+          overrideProblemId={overrideProblemId} 
+          onClearOverride={() => setOverrideProblemId(null)} 
+        />
+      </WindowShell>
+
+      {/* 2. Journey Path Map Window */}
+      <WindowShell
+        id="journey"
+        title="Journey_Path.exe"
+        icon="route"
+        isOpen={windows.journey.isOpen}
+        isMinimized={windows.journey.isMinimized}
+        onClose={() => closeWindow('journey')}
+        onMinimize={() => minimizeWindow('journey')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="700px"
+        defaultHeight="560px"
+      >
+        <JourneyPath 
+          onSelectProblemForReview={handleSelectProblemForReview} 
+        />
+      </WindowShell>
+
+      {/* 3. Command Line Terminal Window */}
+      <WindowShell
+        id="terminal"
+        title="Arcade Terminal.com"
+        icon="terminal"
+        isOpen={windows.terminal.isOpen}
+        isMinimized={windows.terminal.isMinimized}
+        onClose={() => closeWindow('terminal')}
+        onMinimize={() => minimizeWindow('terminal')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="640px"
+        defaultHeight="450px"
+        titleBarColor="#1e293b"
+      >
+        <TerminalEmulator 
+          onOpenWindow={openWindow} 
+          onClose={() => closeWindow('terminal')} 
+        />
+      </WindowShell>
+
+      {/* 4. Google Drive Sync Dialog Window */}
+      <WindowShell
+        id="sync"
+        title="Drive_Sync.sys"
+        icon="cloud_sync"
+        isOpen={windows.sync.isOpen}
+        isMinimized={windows.sync.isMinimized}
+        onClose={() => closeWindow('sync')}
+        onMinimize={() => minimizeWindow('sync')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="480px"
+        defaultHeight="320px"
+        titleBarColor="#855400"
+      >
+        <div className="w-full h-full bg-[#fdf8e1] p-6 flex flex-col justify-between">
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 border-b-2 border-dashed border-ink-black pb-3">
+              <span className="material-symbols-outlined text-4xl text-[#855400] animate-bounce">cloud_sync</span>
+              <div>
+                <h4 className="font-arcade text-[10px] font-bold text-ink-black">DRIVE NOTES SYNCHRONIZATION</h4>
+                <span className="text-[8px] font-arcade text-trash-gray font-bold uppercase mt-1 block">Importing LeetCode sheets</span>
+              </div>
+            </div>
+            
+            {syncing ? (
+              <div className="space-y-3 py-2">
+                <span className="text-[9px] font-arcade text-ink-black font-bold block animate-pulse">SYNC PROCESS RUNNING...</span>
+                <div className="w-full h-6 bg-white border-[3px] border-ink-black relative overflow-hidden select-none">
+                  <div className="absolute inset-y-0 left-0 bg-[#ffe24c] border-r-2 border-ink-black w-[75%] animate-pulse" />
+                </div>
+                <p className="text-[9px] font-sans text-trash-gray leading-normal font-semibold">
+                  Connecting to Supabase partition, requesting Google Drive manifest, indexing note items...
+                </p>
+              </div>
+            ) : (
+              <div className="p-3 bg-white border-[3px] border-ink-black text-xs font-semibold text-ink-black leading-relaxed shadow-[2px_2px_0px_0px_#1E293B]">
+                {syncResult || 'Idle. Ready to synchronize Leitner box data logs from Sheets drive storage.'}
+              </div>
+            )}
+          </div>
+          
+          <div className="flex gap-3 justify-end pt-4 border-t border-slate-200">
+            <button
+              onClick={() => closeWindow('sync')}
+              className="px-4 py-2 bg-white hover:bg-slate-100 text-ink-black border-[3px] border-ink-black font-bold text-xs shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none cursor-pointer"
+            >
+              CLOSE
+            </button>
+            <button
+              onClick={triggerSync}
+              disabled={syncing}
+              className="px-4 py-2 bg-[#ffcc00] hover:bg-yellow-300 text-ink-black border-[3px] border-ink-black font-bold text-xs shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none disabled:opacity-50 cursor-pointer"
+            >
+              {syncing ? 'SYNCING...' : 'SYNC NOW'}
+            </button>
+          </div>
+        </div>
+      </WindowShell>
+
+      {/* 5. My Computer Window (Interactive File Explorer) */}
+      <WindowShell
+        id="computer"
+        title="File Explorer"
+        icon="desktop_windows"
+        isOpen={windows.computer.isOpen}
+        isMinimized={windows.computer.isMinimized}
+        onClose={() => closeWindow('computer')}
+        onMinimize={() => minimizeWindow('computer')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="640px"
+        defaultHeight="480px"
+        titleBarColor="#006686"
+      >
+        <FileExplorer onSetWallpaper={setWallpaperUrl} activeWallpaperUrl={wallpaperUrl} />
+      </WindowShell>
+
+      {/* 6. Daily Python Challenge Window */}
+      <WindowShell
+        id="python"
+        title="Python Challenge"
+        icon="sports_esports"
+        isOpen={windows.python.isOpen}
+        isMinimized={windows.python.isMinimized}
+        onClose={() => closeWindow('python')}
+        onMinimize={() => minimizeWindow('python')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="620px"
+        defaultHeight="580px"
+        titleBarColor="#9d4edd"
+      >
+        <PythonChallenge />
+      </WindowShell>
+
+      {/* 7. MySQL Playground Window */}
+      <WindowShell
+        id="mysql"
+        title="MySQL Playground"
+        icon="database"
+        isOpen={windows.mysql.isOpen}
+        isMinimized={windows.mysql.isMinimized}
+        onClose={() => closeWindow('mysql')}
+        onMinimize={() => minimizeWindow('mysql')}
+        activeWindow={activeWindow}
+        setActiveWindow={setActiveWindow}
+        defaultWidth="660px"
+        defaultHeight="580px"
+        titleBarColor="#0ea5e9"
+      >
+        <MySQLPlayground />
+      </WindowShell>
+
+      {/* Start Menu Popup */}
+      {isStartOpen && (
+        <div 
+          onClick={(e) => e.stopPropagation()}
+          className="absolute bottom-14 left-0 w-64 bg-white border-[3px] border-ink-black shadow-[6px_6px_0px_0px_#1E293B] flex flex-col p-4 z-[60] ml-2 mb-2 select-none"
+        >
+          <div className="flex flex-col gap-2.5 font-window-title text-base font-bold">
+            <button 
+              onClick={() => openWindow('queue')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>view_list</span>
+              Daily Queue
+            </button>
+            <button 
+              onClick={() => openWindow('journey')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>route</span>
+              Journey Path
+            </button>
+            <button 
+              onClick={triggerSync}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>cloud_sync</span>
+              Drive Sync
+            </button>
+            <button 
+              onClick={() => openWindow('terminal')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>terminal</span>
+              Terminal
+            </button>
+            <button 
+              onClick={() => openWindow('computer')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>desktop_windows</span>
+              My Computer
+            </button>
+            <button 
+              onClick={() => openWindow('python')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>sports_esports</span>
+              Python Challenge
+            </button>
+            <button 
+              onClick={() => openWindow('mysql')}
+              className="w-full text-left hover:bg-secondary-container px-3 py-1.5 border-2 border-transparent hover:border-ink-black transition-colors cursor-pointer flex items-center gap-2"
+            >
+              <span className="material-symbols-outlined text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>database</span>
+              MySQL Playground
+            </button>
+          </div>
+          
+          <div className="mt-4 flex justify-end border-t-[3px] border-ink-black pt-4 select-none">
+            <button 
+              onClick={handleSignOut}
+              className="bg-highlight-pink text-white font-window-title px-4 py-2.5 border-[3px] border-ink-black shadow-[3px_3px_0px_0px_#1E293B] active:translate-y-0.5 active:translate-x-0.5 active:shadow-none hover:bg-rose-600 transition-all cursor-pointer font-bold uppercase text-xs"
+            >
+              Shut Down
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Taskbar Bottom (Taskbar fixed layout) */}
+      <div 
+        onClick={() => setIsStartOpen(false)}
+        className="fixed bottom-0 left-0 w-full z-50 flex items-center justify-between h-14 border-t-[4px] border-ink-black bg-[#0ea5e9] px-0 select-none shadow-[0_-4px_0_0_rgba(30,41,59,0.1)]"
+      >
+        <div className="flex items-center h-full overflow-x-auto custom-scrollbar">
+          {/* Start button */}
+          <button 
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsStartOpen(!isStartOpen);
+            }}
+            className="h-full px-6 flex items-center gap-2 border-r-[4px] border-ink-black bg-[#39ff14] text-ink-black hover:bg-[#28e007] active:bg-[#1fb304] transition-colors shadow-[inset_-3px_-3px_0px_rgba(0,0,0,0.2),inset_3px_3px_0px_rgba(255,255,255,0.5)] font-bold cursor-pointer"
+          >
+            <span className="material-symbols-outlined text-2xl font-bold" style={{ fontVariationSettings: "'FILL' 1" }}>
+              sports_esports
+            </span>
+            <span className="font-display-lg text-lg italic tracking-wide">Start</span>
+          </button>
+
+          {/* Windows tabs in taskbar */}
+          
+          {/* Daily Queue Tab */}
+          {windows.queue.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('queue')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'queue' && !windows.queue.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">view_list</span>
+              <span>Daily Queue</span>
+            </button>
+          )}
+
+          {/* Journey Path Tab */}
+          {windows.journey.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('journey')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'journey' && !windows.journey.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">route</span>
+              <span>Journey Path</span>
+            </button>
+          )}
+
+          {/* Terminal Tab */}
+          {windows.terminal.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('terminal')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'terminal' && !windows.terminal.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">terminal</span>
+              <span>Terminal</span>
+            </button>
+          )}
+
+          {/* Google Drive Sync Tab */}
+          {windows.sync.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('sync')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'sync' && !windows.sync.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">cloud_sync</span>
+              <span>Drive Sync</span>
+            </button>
+          )}
+
+          {/* My Computer Tab */}
+          {windows.computer.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('computer')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'computer' && !windows.computer.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">desktop_windows</span>
+              <span>My Computer</span>
+            </button>
+          )}
+
+          {/* Python Challenge Tab */}
+          {windows.python.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('python')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'python' && !windows.python.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">sports_esports</span>
+              <span>Python Challenge</span>
+            </button>
+          )}
+
+          {/* MySQL Playground Tab */}
+          {windows.mysql.isOpen && (
+            <button 
+              onClick={() => toggleWindowMinimize('mysql')}
+              className={`h-full px-4 flex items-center gap-2 border-r-[4px] border-ink-black text-xs font-bold font-window-title cursor-pointer transition-all shadow-[inset_0px_3px_0px_rgba(255,255,255,0.8)] ${
+                activeWindow === 'mysql' && !windows.mysql.isMinimized
+                  ? 'bg-paper-white text-ink-black font-extrabold translate-y-[2px]' 
+                  : 'bg-surface-variant text-trash-gray hover:bg-white/40'
+              }`}
+            >
+              <span className="material-symbols-outlined text-sm font-bold">database</span>
+              <span>MySQL Playground</span>
+            </button>
+          )}
+        </div>
+
+        {/* System tray (wifi, clock, volume) */}
+        <div className="flex items-center h-full border-l-[4px] border-ink-black bg-[#0284c7] text-white px-4 gap-4 shadow-[inset_3px_3px_0px_rgba(0,0,0,0.2)]">
+          <span className="material-symbols-outlined cursor-pointer select-none text-lg">volume_up</span>
+          <span className="material-symbols-outlined cursor-pointer select-none text-lg">network_wifi</span>
+          <div className="font-arcade text-[9px] font-bold flex flex-col items-center leading-none justify-center select-none pt-0.5">
+            <span>{time}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Context Menu (Right Click Options) */}
+      {contextMenu.visible && (
+        <div 
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+          className="absolute bg-paper-white border-[3px] border-ink-black shadow-[4px_4px_0px_0px_#1E293B] z-[999] py-1 w-48 font-headline-md text-xs font-bold text-ink-black select-none animate-fade-in"
+        >
+          <button 
+            onClick={toggleFullscreen}
+            className="w-full text-left px-4 py-2.5 hover:bg-secondary-container border-b-[2px] border-dashed border-ink-black flex items-center gap-2 cursor-pointer font-bold select-none outline-none"
+          >
+            <span className="material-symbols-outlined text-sm">fullscreen</span>
+            {isFullscreen ? 'Exit Full Screen' : 'Go Full Screen'}
+          </button>
+          <button 
+            onClick={() => {
+              closeContextMenu();
+              document.getElementById('wallpaper-input')?.click();
+            }}
+            className="w-full text-left px-4 py-2.5 hover:bg-secondary-container flex items-center gap-2 cursor-pointer font-bold select-none outline-none"
+          >
+            <span className="material-symbols-outlined text-sm">image</span>
+            Change Wallpaper
+          </button>
+        </div>
+      )}
+
+      {/* Hidden Wallpaper File Input Selector */}
+      <input 
+        type="file" 
+        id="wallpaper-input" 
+        accept="image/*" 
+        onChange={handleWallpaperChange} 
+        className="hidden" 
+      />
+    </div>
+  );
+}

algospaced-ui/src/components/Auth.tsx

@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import { supabase } from '../supabaseClient';
+import { Mail, Lock, ShieldCheck, ArrowRight } from 'lucide-react';
+
+export default function Auth() {
+  const [isSignUp, setIsSignUp] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'error' | 'success'; text: string } | null>(null);
+
+  const handleAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      if (isSignUp) {
+        const { error } = await supabase.auth.signUp({
+          email,
+          password,
+        });
+        if (error) throw error;
+        setMessage({ type: 'success', text: 'Registration successful! Check your email for validation link.' });
+      } else {
+        const { error } = await supabase.auth.signInWithPassword({
+          email,
+          password,
+        });
+        if (error) throw error;
+      }
+    } catch (err: any) {
+      setMessage({ type: 'error', text: err.message || 'An error occurred during authentication' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = async () => {
+    try {
+      setLoading(true);
+      const redirectUrl = window.location.origin.endsWith('/') ? window.location.origin : `${window.location.origin}/`;
+      alert('Sending redirect URL: ' + redirectUrl);
+      const { error } = await supabase.auth.signInWithOAuth({
+        provider: 'google',
+        options: {
+          redirectTo: redirectUrl
+        }
+      });
+      if (error) throw error;
+    } catch (err: any) {
+      setMessage({ type: 'error', text: err.message || 'Google OAuth failed to initialize' });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-screen flex items-center justify-center p-4 relative selection:bg-highlight-pink selection:text-white">
+      {/* Background Wallpaper image */}
+      <div 
+        className="absolute inset-0 w-full h-full bg-cover bg-center z-0 saturate-150 contrast-125" 
+        style={{ backgroundImage: "url('https://lh3.googleusercontent.com/aida-public/AB6AXuAMJHVhhK8_G7F8sbhn8F7w4AZWXb1O_-HLKvrZ_fJlbUVMcVuxxEOO_LlOh8qIwtAn2KvzvCwzmtNLLEZ5uYkCEsx8ZWXJR609qgSMRSX8LBBeskk4VzVXnyzsgIKCedeV2PvGxJlUNnledcWKCXqG9egQi8dgTcA7C2z82QyM73KZ4s7ZRzZHNupuQt1ocfcMl9E_x1PWFRridl751LIpyGZgednS5CmVw2rZvFc_tbp2QTxgVHJ_59myEBmy6aajbO06AhkKmCvI')" }}
+      />
+      
+      {/* OS System Setup Dialog Box */}
+      <div className="w-full max-w-md bg-paper-white border-[4px] border-ink-black window-shadow z-10 flex flex-col overflow-hidden shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] relative animate-float">
+        {/* Title Bar */}
+        <div className="bg-[#0ea5e9] border-b-[4px] border-ink-black px-4 py-2.5 flex justify-between items-center text-white select-none">
+          <div className="flex items-center gap-2">
+            <span className="material-symbols-outlined select-none" style={{ fontVariationSettings: "'FILL' 1" }}>
+              sports_esports
+            </span>
+            <span className="font-window-title text-sm md:text-base font-bold tracking-wide">System_Setup.exe</span>
+          </div>
+        </div>
+
+        {/* Content Box */}
+        <div className="p-6 bg-[#fdf8e1] flex-1 flex flex-col">
+          <div className="flex flex-col items-center mb-6">
+            <div className="w-16 h-16 bg-paper-white border-[3px] border-ink-black flex items-center justify-center gadget-shadow shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] mb-4">
+              <ShieldCheck className="w-9 h-9 text-primary" />
+            </div>
+            <h2 className="text-3xl font-extrabold tracking-tight text-ink-black font-headline-md leading-none m-0">AlgoSpaced</h2>
+            <p className="text-xs font-arcade text-trash-gray mt-2 tracking-wide uppercase text-center">Spaced Repetition for DSA</p>
+          </div>
+
+          {/* Form Tabs */}
+          <div className="flex gap-2 mb-6 font-arcade text-[10px]">
+            <button
+              onClick={() => { setIsSignUp(false); setMessage(null); }}
+              className={`flex-1 py-2.5 border-[3px] border-ink-black cursor-pointer font-bold tracking-wider outline-none transition-all shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none active:translate-y-0.5 ${
+                !isSignUp
+                  ? 'bg-secondary-container text-ink-black translate-y-0.5 shadow-[1px_1px_0px_0px_rgba(30,41,59,1)]'
+                  : 'bg-white text-trash-gray hover:bg-surface-container'
+              }`}
+            >
+              SIGN IN
+            </button>
+            <button
+              onClick={() => { setIsSignUp(true); setMessage(null); }}
+              className={`flex-1 py-2.5 border-[3px] border-ink-black cursor-pointer font-bold tracking-wider outline-none transition-all shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none active:translate-y-0.5 ${
+                isSignUp
+                  ? 'bg-secondary-container text-ink-black translate-y-0.5 shadow-[1px_1px_0px_0px_rgba(30,41,59,1)]'
+                  : 'bg-white text-trash-gray hover:bg-surface-container'
+              }`}
+            >
+              CREATE COMP
+            </button>
+          </div>
+
+          {message && (
+            <div
+              className={`mb-6 p-4 border-[3px] border-ink-black text-xs font-arcade leading-relaxed ${
+                message.type === 'error'
+                  ? 'bg-red-100 border-red-500 text-error shadow-[2px_2px_0px_0px_rgba(30,41,59,1)]'
+                  : 'bg-emerald-100 border-emerald-500 text-emerald-700 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)]'
+              }`}
+            >
+              {message.text}
+            </div>
+          )}
+
+          <form onSubmit={handleAuth} className="space-y-4">
+            <div>
+              <label className="block text-xs font-bold text-ink-black uppercase tracking-wider mb-2 font-headline-md">Email Address</label>
+              <div className="relative">
+                <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-ink-black" />
+                <input
+                  type="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="name@arcade.com"
+                  className="w-full bg-white border-[3px] border-ink-black rounded-lg py-2.5 pl-10 pr-4 text-ink-black placeholder-trash-gray focus:outline-none focus:bg-white text-sm font-code-mono shadow-[inset_2px_2px_0px_rgba(0,0,0,0.1)]"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-bold text-ink-black uppercase tracking-wider mb-2 font-headline-md">Password</label>
+              <div className="relative">
+                <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-ink-black" />
+                <input
+                  type="password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  className="w-full bg-white border-[3px] border-ink-black rounded-lg py-2.5 pl-10 pr-4 text-ink-black placeholder-trash-gray focus:outline-none focus:bg-white text-sm font-code-mono shadow-[inset_2px_2px_0px_rgba(0,0,0,0.1)]"
+                />
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-[#ffcc00] border-[4px] border-ink-black rounded-xl py-3.5 font-window-title text-base text-ink-black arcade-btn cursor-pointer disabled:opacity-50 flex items-center justify-center gap-2 uppercase font-bold tracking-wide"
+            >
+              {loading ? 'RUNNING...' : isSignUp ? 'RUN SETUP.EXE' : 'EXEC LOGON'}
+              {!loading && <ArrowRight className="w-4 h-4 stroke-[3px]" />}
+            </button>
+          </form>
+
+          <div className="relative my-5 select-none">
+            <div className="absolute inset-0 flex items-center"><div className="w-full border-t-[3px] border-ink-black border-dashed" /></div>
+            <div className="relative flex justify-center text-[10px] uppercase font-arcade"><span className="bg-[#fdf8e1] px-3 text-trash-gray font-bold">OR LOAD ALTERNATE</span></div>
+          </div>
+
+          <button
+            onClick={handleGoogleSignIn}
+            disabled={loading}
+            className="w-full bg-white hover:bg-slate-100 border-[3px] border-ink-black text-ink-black font-bold py-3 px-4 rounded-xl flex items-center justify-center gap-3 transition-all text-xs cursor-pointer shadow-[3px_3px_0px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none"
+          >
+            <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z" fill="#FBBC05" />
+              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z" fill="#EA4335" />
+            </svg>
+            SIGN IN WITH GOOGLE
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

algospaced-ui/src/components/FileExplorer.tsx

@@ -0,0 +1,948 @@
+import React, { useState, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+
+interface ProblemFile {
+  id: string;
+  name: string;
+  pattern: string;
+  difficulty: string;
+  reference_code: string;
+  description: string | null;
+  box_level: number | null;
+  next_review: string | null;
+  last_reviewed: string | null;
+  times_correct: number;
+  total_attempts: number;
+}
+
+interface FileExplorerProps {
+  onSetWallpaper: (url: string) => void;
+  activeWallpaperUrl: string;
+}
+
+const WALLPAPER_PRESETS = [
+  {
+    name: 'Retro Arcade Grid.img',
+    url: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAMJHVhhK8_G7F8sbhn8F7w4AZWXb1O_-HLKvrZ_fJlbUVMcVuxxEOO_LlOh8qIwtAn2KvzvCwzmtNLLEZ5uYkCEsx8ZWXJR609qgSMRSX8LBBeskk4VzVXnyzsgIKCedeV2PvGxJlUNnledcWKCXqG9egQi8dgTcA7C2z82QyM73KZ4s7ZRzZHNupuQt1ocfcMl9E_x1PWFRridl751LIpyGZgednS5CmVw2rZvFc_tbp2QTxgVHJ_59myEBmy6aajbO06AhkKmCvI',
+    desc: 'Default AlgoSpaced purple grid and pixel theme background.'
+  },
+  {
+    name: 'Classic Board Logo.img',
+    url: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD2tUGA2d7QiNyajDAWYK183zhNTgtAZpOXK3E9wRvHGs-t6ykWt9uPScYe_fziWzQI0pREcY_ThI341WvGMusyYmnAkagfuwx6wubIs1ES68DO8CCNAlcHcb2zOUU4MJeYuhWDy1uYRqyGYjIaDUqfgNWk2vm4WzwRqoorn2dxtZ6QdJhEKbXjG8fG9chkkvr68qJf0fLUL6bIqBXZg2FJ30S7zS3oZ4IZsug-wLyRYuJ4Gu_86snNUo1whNrBdZm5OMREfc9sLbwJ',
+    desc: 'System info and arcade machine diagram wallpaper.'
+  },
+  {
+    name: 'Terminal Console Icon.img',
+    url: 'https://lh3.googleusercontent.com/aida-public/AB6AXuA2AvcQ2oKWP8AJ8yR5nF82LLDEH1FKySUK-npnqEjvJ6Cs9xp8joCwH7x43oTCAC5xhO2rQdYzka3B6u72FNbdxMnsv3WJLye3bKochu8AnnRlS3szfYSaj724sYsiZo4n8G-oWqvl7C0rOGaDaU2nRH1xXmW2PBi6L2NryTsUaTCVZQKTKBBNNEOig5kh7B52e-iIuj2PTzaSjF9ebp6gMuCnBtJT8Sxo5Qsmvfm-t2U5r_qQpRiYj--Ut41T7NTh-tHgs4S4kBvz',
+    desc: 'Dark retro CRT terminal screen layout.'
+  },
+  {
+    name: 'Synthwave Sunset Grid.img',
+    url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop',
+    desc: 'Glowing neon grids and vector mountains styling.'
+  },
+  {
+    name: 'Matrix Code Rain.img',
+    url: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=1000&auto=format&fit=crop',
+    desc: 'Falling green digital characters rain.'
+  }
+];
+
+export default function FileExplorer({ onSetWallpaper, activeWallpaperUrl }: FileExplorerProps) {
+  const [currentPath, setCurrentPath] = useState<string[]>(['C:']);
+  const [problems, setProblems] = useState<ProblemFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+
+  // Dynamic wallpapers list merging presets and custom wallpaper from localStorage
+  const wallpapersList = React.useMemo(() => {
+    const list = [...WALLPAPER_PRESETS];
+    const customUrl = localStorage.getItem('customWallpaperUrl');
+    const customName = localStorage.getItem('customWallpaperName') || 'Custom Wallpaper.img';
+    if (customUrl) {
+      const exists = list.some(p => p.url === customUrl);
+      if (!exists) {
+        list.push({
+          name: customName,
+          url: customUrl,
+          desc: 'User uploaded custom background wallpaper.'
+        });
+      }
+    }
+    return list;
+  }, [activeWallpaperUrl]);
+
+  // Search & Filter state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [difficultyFilter, setDifficultyFilter] = useState('All');
+  const [patternFilter, setPatternFilter] = useState('All');
+
+  // Drag & Drop state
+  const [dragOver, setDragOver] = useState(false);
+
+  // New File Creation state
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [newFileName, setNewFileName] = useState('');
+  const [newFilePattern, setNewFilePattern] = useState('');
+  const [newFileDifficulty, setNewFileDifficulty] = useState('Medium');
+  const [newFileCode, setNewFileCode] = useState('');
+  const [newFileDescription, setNewFileDescription] = useState('');
+  const [createError, setCreateError] = useState('');
+  const [creating, setCreating] = useState(false);
+
+  // Previewer Modal state
+  const [previewFile, setPreviewFile] = useState<ProblemFile | null>(null);
+  const [modalTab, setModalTab] = useState<'description' | 'code' | 'properties'>('description');
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedCode, setEditedCode] = useState('');
+  const [editedDescription, setEditedDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const fetchProblems = async () => {
+    setLoading(true);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+      
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/explorer/problems`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setProblems(data);
+      }
+    } catch (err) {
+      console.error('Failed to fetch explorer files:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProblems();
+  }, []);
+
+  const navigateTo = (folder: string) => {
+    setCurrentPath(['C:', folder]);
+    setSelectedItem(null);
+  };
+
+  const navigateUp = () => {
+    if (currentPath.length > 1) {
+      setCurrentPath(['C:']);
+      setSelectedItem(null);
+    }
+  };
+
+  // ZIP Solutions Exporter via Backend stream
+  const handleExportZip = async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+      
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/explorer/export`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const blob = await res.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'algospaced_solutions.zip';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error('Failed to download solutions ZIP:', err);
+    }
+  };
+
+  // Handle Save Solution Code changes
+  const handleSaveSolution = async () => {
+    if (!previewFile) return;
+    setSaving(true);
+    setSaveSuccess(false);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/explorer/problems/${previewFile.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({
+          name: previewFile.name,
+          pattern: previewFile.pattern,
+          difficulty: previewFile.difficulty,
+          reference_code: editedCode,
+          description: editedDescription
+        })
+      });
+      if (res.ok) {
+        setSaveSuccess(true);
+        setIsEditing(false);
+        // Refresh local problems list
+        const updated = problems.map(p => p.id === previewFile.id ? { ...p, reference_code: editedCode, description: editedDescription } : p);
+        setProblems(updated);
+        setPreviewFile({ ...previewFile, reference_code: editedCode, description: editedDescription });
+        setTimeout(() => setSaveSuccess(false), 2000);
+      }
+    } catch (err) {
+      console.error('Failed to update solution code:', err);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Create New Problem
+  const handleCreateProblem = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newFileName.trim()) {
+      setCreateError('Problem name cannot be empty');
+      return;
+    }
+    setCreating(true);
+    setCreateError('');
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/explorer/problems/create`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({
+          name: newFileName.trim(),
+          pattern: newFilePattern.trim() || 'General',
+          difficulty: newFileDifficulty,
+          reference_code: newFileCode,
+          description: newFileDescription
+        })
+      });
+
+      const data = await res.json();
+      if (res.ok && data.success) {
+        setIsCreateModalOpen(false);
+        setNewFileName('');
+        setNewFilePattern('');
+        setNewFileCode('');
+        setNewFileDescription('');
+        fetchProblems();
+      } else {
+        setCreateError(data.detail || 'Failed to create problem.');
+      }
+    } catch {
+      setCreateError('Connection timed out.');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  // Drag and Drop files parser
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragOver(false);
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.name.endsWith('.py')) {
+        try {
+          const text = await file.text();
+          const guessedName = file.name
+            .replace('.py', '')
+            .replace(/_/g, ' ')
+            .replace(/-/g, ' ');
+
+          // Parse metadata tags if they exist inside script comments
+          let pattern = 'General';
+          let difficulty = 'Medium';
+
+          const patternMatch = text.match(/#\s*Pattern:\s*(.+)/i);
+          if (patternMatch) pattern = patternMatch[1].trim();
+
+          const difficultyMatch = text.match(/#\s*Difficulty:\s*(.+)/i);
+          if (difficultyMatch) {
+            const val = difficultyMatch[1].trim();
+            if (['Easy', 'Medium', 'Hard'].includes(val)) difficulty = val;
+          }
+
+          // Parse description: take all leading comment lines (excluding structural tags)
+          const lines = text.split('\n');
+          let descLines = [];
+          for (let line of lines) {
+            const trimmed = line.trim();
+            if (trimmed.startsWith('#')) {
+              if (trimmed.match(/#\s*(Pattern|Difficulty|Problem|Description):/i)) continue;
+              descLines.push(trimmed.replace(/^#\s*/, ''));
+            } else if (trimmed !== '') {
+              break;
+            }
+          }
+          const description = descLines.join('\n').trim();
+
+
+
+          // Load into New File Creator modal
+          setNewFileName(guessedName);
+          setNewFilePattern(pattern);
+          setNewFileDifficulty(difficulty);
+          setNewFileCode(text);
+          setNewFileDescription(description);
+          setIsCreateModalOpen(true);
+        } catch (err) {
+          console.error('Failed to parse uploaded script:', err);
+        }
+      }
+    }
+  };
+
+  const handleCopyCode = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const activeFolder = currentPath.length > 1 ? currentPath[1] : 'root';
+
+  // Statistics calculation for the visualizer
+  const totalProblems = problems.length;
+  const completedSolutions = problems.filter(p => p.reference_code && p.reference_code.trim()).length;
+  const completionPercent = totalProblems > 0 ? Math.round((completedSolutions / totalProblems) * 100) : 0;
+  
+  const boxCounts = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+  problems.forEach(p => {
+    if (p.box_level !== null && p.box_level !== undefined) {
+      const lvl = p.box_level as 1|2|3|4|5;
+      if (lvl >= 1 && lvl <= 5) boxCounts[lvl]++;
+    }
+  });
+
+  // Extract unique patterns to populate filter dropdown dynamically
+  const uniquePatterns = Array.from(new Set(problems.map(p => p.pattern).filter(Boolean)));
+
+  // Filter solutions list
+  const filteredProblems = problems.filter(p => {
+    const matchesSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesDifficulty = difficultyFilter === 'All' || p.difficulty === difficultyFilter;
+    const matchesPattern = patternFilter === 'All' || p.pattern === patternFilter;
+    return matchesSearch && matchesDifficulty && matchesPattern;
+  });
+
+  return (
+    <div className="w-full h-full bg-paper-white text-ink-black flex flex-col overflow-hidden text-xs md:text-sm font-sans select-none">
+      
+      {/* 1. Address Bar & Navigation */}
+      <div className="bg-slate-200 border-b-[3px] border-ink-black p-2 flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2 flex-1">
+          <button
+            onClick={navigateUp}
+            disabled={currentPath.length === 1}
+            className="w-7 h-7 bg-white border-2 border-ink-black flex items-center justify-center hover:bg-slate-100 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer active:translate-y-0.5"
+            title="Up One Folder"
+          >
+            <span className="material-symbols-outlined text-[16px] font-bold">arrow_upward</span>
+          </button>
+          <div className="bg-white border-2 border-ink-black px-3 py-1 font-mono text-[10px] flex-1 max-w-[280px] truncate">
+            {currentPath.join('\\')}
+          </div>
+        </div>
+
+        {/* Action Link bar */}
+        <div className="flex gap-3 text-[10px] font-bold pr-2 font-mono items-center">
+          {activeFolder === 'Database_Codes' && (
+            <>
+              <button
+                onClick={() => setIsCreateModalOpen(true)}
+                className="text-blue-700 hover:underline cursor-pointer flex items-center gap-0.5"
+              >
+                <span className="material-symbols-outlined text-[12px] font-bold">add_box</span>
+                NEW FILE
+              </button>
+              <span className="text-slate-400">|</span>
+              <button
+                onClick={handleExportZip}
+                className="text-purple-700 hover:underline cursor-pointer flex items-center gap-0.5"
+              >
+                <span className="material-symbols-outlined text-[12px] font-bold">downloadzip</span>
+                BACKUP (.ZIP)
+              </button>
+              <span className="text-slate-400">|</span>
+            </>
+          )}
+          <span className="text-slate-500">
+            {activeFolder === 'root' ? '2 Folder(s)' : activeFolder === 'Database_Codes' ? `${filteredProblems.length} of ${problems.length} item(s)` : `${wallpapersList.length} image(s)`}
+          </span>
+        </div>
+      </div>
+
+      {/* 2. Main Workspace Layout */}
+      <div className="flex-1 flex overflow-hidden">
+        
+        {/* Left Side: Navigation Sidebar & Disk Stats Visualizer */}
+        <aside className="w-1/3 border-r-[3px] border-ink-black bg-[#fdf8e1] p-3 overflow-y-auto custom-scrollbar flex flex-col gap-4 shrink-0">
+          {/* Folders tree */}
+          <div>
+            <span className="text-[9px] font-arcade text-slate-500 block uppercase mb-1.5">Folders</span>
+            <div className="space-y-1">
+              <button
+                onClick={() => setCurrentPath(['C:'])}
+                className={`w-full text-left p-1.5 flex items-center gap-1.5 font-semibold border-2 border-transparent hover:bg-slate-100 rounded ${currentPath.length === 1 ? 'bg-white border-ink-black' : ''}`}
+              >
+                <span className="material-symbols-outlined text-[#855400] text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>desktop_windows</span>
+                <span>C: (Root)</span>
+              </button>
+              <div className="pl-4 space-y-1">
+                <button
+                  onClick={() => navigateTo('Database_Codes')}
+                  className={`w-full text-left p-1.5 flex items-center gap-1.5 font-semibold border-2 border-transparent hover:bg-slate-100 rounded ${activeFolder === 'Database_Codes' ? 'bg-white border-ink-black' : ''}`}
+                >
+                  <span className="material-symbols-outlined text-yellow-600 text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>folder</span>
+                  <span className="truncate">Database_Codes</span>
+                </button>
+                <button
+                  onClick={() => navigateTo('Wallpapers')}
+                  className={`w-full text-left p-1.5 flex items-center gap-1.5 font-semibold border-2 border-transparent hover:bg-slate-100 rounded ${activeFolder === 'Wallpapers' ? 'bg-white border-ink-black' : ''}`}
+                >
+                  <span className="material-symbols-outlined text-yellow-600 text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>folder</span>
+                  <span className="truncate">Wallpapers</span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Feature 5: Disk Stats Visualizer */}
+          <div className="border-t-2 border-dashed border-slate-300 pt-3">
+            <span className="text-[9px] font-arcade text-slate-500 block uppercase mb-2">System Statistics</span>
+            
+            <div className="space-y-3 font-sans text-[11px] font-bold text-slate-700">
+              {/* Completion Rate ProgressBar */}
+              <div className="space-y-1">
+                <div className="flex justify-between text-[10px]">
+                  <span>CODE COMPLETION:</span>
+                  <span className="font-mono text-emerald-600">{completionPercent}%</span>
+                </div>
+                <div className="w-full h-4 bg-white border-2 border-ink-black overflow-hidden relative">
+                  <div 
+                    style={{ width: `${completionPercent}%` }} 
+                    className="h-full bg-emerald-500 border-r-2 border-ink-black transition-all duration-500" 
+                  />
+                </div>
+              </div>
+
+              {/* Box Level Counts visual bar charts */}
+              <div className="space-y-1.5 mt-2">
+                <span className="text-[9px] uppercase text-slate-500 block">Leitner Distribution:</span>
+                {([1, 2, 3, 4, 5] as const).map(boxNum => {
+                  const count = boxCounts[boxNum];
+                  const maxCount = Math.max(...Object.values(boxCounts), 1);
+                  const barWidth = Math.max(8, Math.round((count / maxCount) * 100));
+
+                  return (
+                    <div key={boxNum} className="flex items-center gap-2">
+                      <span className="w-9 font-mono text-[10px] text-slate-400">Box {boxNum}:</span>
+                      <div className="flex-1 h-3 bg-white border border-ink-black overflow-hidden relative">
+                        <div 
+                          style={{ width: `${barWidth}%` }} 
+                          className="h-full bg-[#0ea5e9] border-r border-ink-black transition-all" 
+                        />
+                      </div>
+                      <span className="w-4 text-right font-mono text-[10px] text-slate-600">{count}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        {/* Right Side: Folder View Contents & Upload Area */}
+        <main 
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          className={`flex-1 bg-white p-4 overflow-y-auto custom-scrollbar flex flex-col relative transition-all ${
+            dragOver ? 'bg-blue-50 border-4 border-dashed border-blue-500 m-2' : ''
+          }`}
+        >
+          {dragOver && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-blue-800 bg-white/80 pointer-events-none select-none z-[10] gap-2 font-sans font-bold">
+              <span className="material-symbols-outlined text-5xl animate-bounce">upload_file</span>
+              <div className="text-sm">DROP SOLUTIONS PYTHON SCRIPT (.PY) HERE</div>
+              <p className="text-[10px] text-slate-400">Will load and parse file metadata for import</p>
+            </div>
+          )}
+
+          {loading ? (
+            <div className="flex-1 flex flex-col items-center justify-center font-arcade text-[8px] animate-pulse">
+              READING SYSTEM DISK...
+            </div>
+          ) : (
+            <>
+              {/* Feature 2: Search and Filter Bar Header */}
+              {activeFolder === 'Database_Codes' && (
+                <div className="mb-4 bg-slate-50 border-[2px] border-ink-black p-2 flex flex-col gap-2 shrink-0 select-none">
+                  <div className="flex gap-2">
+                    {/* Search Field */}
+                    <div className="flex-1 bg-white border border-slate-300 rounded px-2 py-1 flex items-center gap-1">
+                      <span className="material-symbols-outlined text-slate-400 text-sm">search</span>
+                      <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="w-full bg-transparent outline-none border-none p-0 text-[11px] focus:ring-0 font-sans"
+                        placeholder="Search codes by name..."
+                      />
+                    </div>
+                  </div>
+                  <div className="flex gap-3 text-[10px] font-bold text-slate-600">
+                    {/* Difficulty Filter */}
+                    <div className="flex items-center gap-1">
+                      <span>Diff:</span>
+                      <select
+                        value={difficultyFilter}
+                        onChange={(e) => setDifficultyFilter(e.target.value)}
+                        className="bg-white border border-slate-300 p-0.5 text-[9px] rounded font-sans cursor-pointer focus:ring-1 outline-none"
+                      >
+                        <option value="All">All</option>
+                        <option value="Easy">Easy</option>
+                        <option value="Medium">Medium</option>
+                        <option value="Hard">Hard</option>
+                      </select>
+                    </div>
+                    {/* Pattern Filter */}
+                    <div className="flex items-center gap-1 flex-1">
+                      <span>Pattern:</span>
+                      <select
+                        value={patternFilter}
+                        onChange={(e) => setPatternFilter(e.target.value)}
+                        className="bg-white border border-slate-300 p-0.5 text-[9px] rounded font-sans cursor-pointer max-w-[120px] focus:ring-1 outline-none truncate"
+                      >
+                        <option value="All">All</option>
+                        {uniquePatterns.map(pat => (
+                          <option key={pat} value={pat}>{pat}</option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Root Content View */}
+              {activeFolder === 'root' && (
+                <div className="grid grid-cols-2 gap-4">
+                  <div
+                    onDoubleClick={() => navigateTo('Database_Codes')}
+                    onClick={() => setSelectedItem('codes')}
+                    className={`flex flex-col items-center justify-center p-3 border-[3px] border-transparent hover:bg-slate-50 cursor-pointer rounded select-none ${selectedItem === 'codes' ? 'bg-yellow-50 border-dashed border-ink-black' : ''}`}
+                  >
+                    <span className="material-symbols-outlined text-5xl text-yellow-500" style={{ fontVariationSettings: "'FILL' 1" }}>folder</span>
+                    <span className="font-bold text-center mt-2 text-xs">Database_Codes</span>
+                    <span className="text-[9px] text-slate-400 mt-0.5">Synced solution files</span>
+                  </div>
+                  <div
+                    onDoubleClick={() => navigateTo('Wallpapers')}
+                    onClick={() => setSelectedItem('wallpapers')}
+                    className={`flex flex-col items-center justify-center p-3 border-[3px] border-transparent hover:bg-slate-50 cursor-pointer rounded select-none ${selectedItem === 'wallpapers' ? 'bg-yellow-50 border-dashed border-ink-black' : ''}`}
+                  >
+                    <span className="material-symbols-outlined text-5xl text-yellow-500" style={{ fontVariationSettings: "'FILL' 1" }}>folder</span>
+                    <span className="font-bold text-center mt-2 text-xs">Wallpapers</span>
+                    <span className="text-[9px] text-slate-400 mt-0.5">Desktop wallpaper images</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Database Codes Content View */}
+              {activeFolder === 'Database_Codes' && (
+                filteredProblems.length === 0 ? (
+                  <div className="flex-1 flex flex-col items-center justify-center text-center text-slate-400 p-6 italic select-none">
+                    <span className="material-symbols-outlined text-3xl mb-1">drafts</span>
+                    No matching files found. Drag and drop a .py script to upload/create!
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-3 gap-2">
+                    {filteredProblems.map((prob) => {
+                      const cleanName = prob.name.replace(/\s+/g, '_');
+                      const fileName = `${cleanName}.py`;
+                      const isSelected = selectedItem === prob.id;
+
+                      return (
+                        <div
+                          key={prob.id}
+                          onClick={() => setSelectedItem(prob.id)}
+                          onDoubleClick={() => {
+                            setPreviewFile(prob);
+                            setEditedCode(prob.reference_code || '');
+                            setEditedDescription(prob.description || '');
+                            setModalTab('description');
+                            setIsEditing(false);
+                          }}
+                          className={`flex flex-col items-center p-2 border-[3px] border-transparent hover:bg-slate-50 cursor-pointer rounded select-none text-center ${isSelected ? 'bg-yellow-50 border-dashed border-ink-black' : ''}`}
+                        >
+                          <span className="material-symbols-outlined text-3xl text-emerald-600">article</span>
+                          <span className="font-bold text-[10px] truncate w-full mt-1.5 leading-tight">{fileName}</span>
+                          <span className="text-[8px] text-slate-400 font-bold uppercase mt-0.5">{prob.difficulty}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )
+              )}
+
+              {/* Wallpapers Content View */}
+              {activeFolder === 'Wallpapers' && (
+                <div className="grid grid-cols-2 gap-3 select-none">
+                  {wallpapersList.map((paper) => {
+                    const isSelected = selectedItem === paper.name;
+                    const isActive = activeWallpaperUrl === paper.url;
+
+                    return (
+                      <div
+                        key={paper.name}
+                        onClick={() => setSelectedItem(paper.name)}
+                        className={`border-[3px] p-2 flex flex-col cursor-pointer bg-slate-50 relative hover:bg-slate-100 ${isSelected ? 'border-ink-black bg-yellow-50 shadow-[2px_2px_0_0_#1E293B]' : 'border-slate-300'}`}
+                      >
+                        <div className="aspect-video w-full border border-slate-300 overflow-hidden bg-black shrink-0 relative">
+                          <img src={paper.url} alt={paper.name} className="w-full h-full object-cover select-none" />
+                          {isActive && (
+                            <div className="absolute top-1 right-1 bg-green-500 text-white rounded-full w-5 h-5 flex items-center justify-center border border-white" title="Active Wallpaper">
+                              <span className="material-symbols-outlined text-[12px] font-extrabold">check</span>
+                            </div>
+                          )}
+                        </div>
+                        <span className="font-bold text-[10px] mt-1.5 truncate">{paper.name}</span>
+                        <p className="text-[8px] text-slate-400 font-sans leading-tight mt-0.5 line-clamp-2">{paper.desc}</p>
+                        
+                        {isSelected && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onSetWallpaper(paper.url);
+                              localStorage.setItem('desktopWallpaperUrl', paper.url);
+                            }}
+                            className="mt-2 w-full py-1 bg-highlight-pink text-white border-2 border-ink-black font-window-title font-bold text-[9px] hover:bg-pink-400 shadow-[1px_1px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none transition-all text-center cursor-pointer"
+                          >
+                            APPLY BACKGROUND
+                          </button>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </>
+          )}
+        </main>
+      </div>
+
+      {/* Feature 3 & 1: Two-Tab File Previewer & Editor Inspector Modal */}
+      {previewFile && (
+        <div className="absolute inset-0 bg-black/60 z-[999] flex items-center justify-center p-4">
+          <div className="w-[90%] h-[90%] bg-paper-white border-[4px] border-ink-black shadow-[6px_6px_0px_0px_#1E293B] flex flex-col overflow-hidden animate-scale-up text-ink-black">
+            
+            {/* Modal Title bar */}
+            <div className="bg-emerald-600 text-white p-2 border-b-[3px] border-ink-black flex justify-between items-center shrink-0 select-none">
+              <div className="flex items-center gap-1.5">
+                <span className="material-symbols-outlined text-sm">article</span>
+                <span className="font-window-title font-bold text-xs">{previewFile.name.replace(/\s+/g, '_')}.py</span>
+              </div>
+              <button
+                onClick={() => setPreviewFile(null)}
+                className="bg-white text-ink-black border-[2px] border-ink-black w-5 h-5 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white cursor-pointer"
+              >
+                X
+              </button>
+            </div>
+
+            {/* Triple Tab selectors */}
+            <div className="bg-slate-200 border-b-2 border-ink-black flex shrink-0 select-none">
+              <button
+                onClick={() => setModalTab('description')}
+                className={`px-4 py-2 border-r-2 border-ink-black font-bold text-[11px] cursor-pointer ${modalTab === 'description' ? 'bg-white translate-y-[2px]' : 'bg-slate-300 hover:bg-slate-100'}`}
+              >
+                PROBLEM DESCRIPTION
+              </button>
+              <button
+                onClick={() => setModalTab('code')}
+                className={`px-4 py-2 border-r-2 border-ink-black font-bold text-[11px] cursor-pointer ${modalTab === 'code' ? 'bg-white translate-y-[2px]' : 'bg-slate-300 hover:bg-slate-100'}`}
+              >
+                CODE VIEW & EDIT
+              </button>
+              <button
+                onClick={() => setModalTab('properties')}
+                className={`px-4 py-2 border-r-2 border-ink-black font-bold text-[11px] cursor-pointer ${modalTab === 'properties' ? 'bg-white translate-y-[2px]' : 'bg-slate-300 hover:bg-slate-100'}`}
+              >
+                LEITNER PROPERTIES
+              </button>
+            </div>
+
+            {/* TAB CONTENT: Problem Description */}
+            {modalTab === 'description' && (
+              <div className="flex-1 flex flex-col overflow-hidden bg-slate-900 relative">
+                {isEditing ? (
+                  <textarea
+                    value={editedDescription}
+                    onChange={(e) => setEditedDescription(e.target.value)}
+                    className="flex-1 w-full bg-slate-950 text-[#4ADE80] font-mono p-4 outline-none border-none text-xs leading-relaxed resize-none custom-scrollbar"
+                    placeholder="Enter problem description / question body here..."
+                    spellCheck="false"
+                  />
+                ) : (
+                  <div className="flex-1 p-4 bg-slate-900 text-[#4ADE80] font-sans text-xs leading-relaxed overflow-y-auto custom-scrollbar select-text">
+                    <div className="whitespace-pre-wrap font-semibold">{previewFile.description || 'No description provided for this problem.'}</div>
+                  </div>
+                )}
+
+                {/* Edit indicators */}
+                {isEditing && (
+                  <div className="absolute top-2 right-2 bg-yellow-400 text-ink-black border border-ink-black px-2 py-0.5 text-[9px] font-bold select-none animate-pulse">
+                    EDIT MODE ACTIVE
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* TAB CONTENT: Code preview & editing */}
+            {modalTab === 'code' && (
+              <div className="flex-1 flex flex-col overflow-hidden bg-slate-900 relative">
+                {isEditing ? (
+                  <textarea
+                    value={editedCode}
+                    onChange={(e) => setEditedCode(e.target.value)}
+                    className="flex-1 w-full bg-slate-950 text-[#4ADE80] font-mono p-4 outline-none border-none text-xs leading-relaxed resize-none custom-scrollbar"
+                    spellCheck="false"
+                  />
+                ) : (
+                  <textarea
+                    readOnly
+                    value={previewFile.reference_code || '# Write your solution here.'}
+                    className="flex-1 w-full bg-slate-900 text-[#4ADE80] font-mono p-4 outline-none border-none text-xs leading-relaxed resize-none custom-scrollbar"
+                    spellCheck="false"
+                  />
+                )}
+
+                {/* Edit indicators */}
+                {isEditing && (
+                  <div className="absolute top-2 right-2 bg-yellow-400 text-ink-black border border-ink-black px-2 py-0.5 text-[9px] font-bold select-none animate-pulse">
+                    EDIT MODE ACTIVE
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* TAB CONTENT: Leitner properties */}
+            {modalTab === 'properties' && (
+              <div className="flex-1 p-6 overflow-y-auto custom-scrollbar bg-slate-50 font-sans leading-relaxed select-text flex flex-col gap-4">
+                <h3 className="font-arcade text-[10px] border-b border-slate-300 pb-1 text-slate-500">Card Diagnostics</h3>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="border-[3px] border-ink-black bg-white p-3 space-y-2">
+                    <span className="text-[9px] font-arcade text-[#0ea5e9] block">Scheduling Status</span>
+                    <div>Leitner Combo Box: <span className="font-mono font-bold text-lg text-sky-600">{previewFile.box_level || 'N/A (Box 1)'}</span></div>
+                    <div>Next Review Date: <span className="font-mono text-xs font-semibold">{previewFile.next_review ? new Date(previewFile.next_review).toLocaleString() : 'N/A (Due)'}</span></div>
+                    <div>Last Reviewed: <span className="font-mono text-xs font-semibold">{previewFile.last_reviewed ? new Date(previewFile.last_reviewed).toLocaleDateString() : 'Never'}</span></div>
+                  </div>
+
+                  <div className="border-[3px] border-ink-black bg-white p-3 space-y-2">
+                    <span className="text-[9px] font-arcade text-emerald-600 block">Performance History</span>
+                    <div>Total Attempts: <span className="font-mono font-bold text-sm">{previewFile.total_attempts}</span></div>
+                    <div>Times Correct: <span className="font-mono font-bold text-sm text-green-600">{previewFile.times_correct}</span></div>
+                    <div>Success Ratio: <span className="font-mono font-bold text-sm text-purple-700">
+                      {previewFile.total_attempts > 0 ? `${Math.round((previewFile.times_correct / previewFile.total_attempts) * 100)}%` : '0%'}
+                    </span></div>
+                  </div>
+                </div>
+
+                <div className="border-[3px] border-ink-black bg-white p-3 space-y-1.5 text-xs font-semibold">
+                  <span className="text-[9px] font-arcade text-slate-400 block">Properties</span>
+                  <div>File ID: <span className="font-mono text-[10px] text-slate-500">{previewFile.id}</span></div>
+                  <div>Logical Pattern: <span className="text-blue-600">{previewFile.pattern}</span></div>
+                  <div>Difficulty Tag: <span className="uppercase">{previewFile.difficulty}</span></div>
+                </div>
+              </div>
+            )}
+
+            {/* Modal Footer controls */}
+            <div className="p-3 bg-slate-100 border-t-[3px] border-ink-black flex justify-between items-center shrink-0 select-none">
+              <div>
+                {saveSuccess && (
+                  <span className="text-green-600 font-bold text-xs animate-pulse">✓ Solution saved!</span>
+                )}
+              </div>
+              <div className="flex gap-2">
+                {(modalTab === 'code' || modalTab === 'description') && (
+                  isEditing ? (
+                    <>
+                      <button
+                        onClick={() => {
+                          setEditedCode(previewFile.reference_code || '');
+                          setEditedDescription(previewFile.description || '');
+                          setIsEditing(false);
+                        }}
+                        className="px-3 py-1.5 bg-white hover:bg-slate-50 text-ink-black border-2 border-ink-black font-bold text-xs cursor-pointer"
+                      >
+                        CANCEL
+                      </button>
+                      <button
+                        disabled={saving}
+                        onClick={handleSaveSolution}
+                        className="px-3 py-1.5 bg-[#4ADE80] hover:bg-emerald-400 text-ink-black border-2 border-ink-black font-bold text-xs cursor-pointer shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none"
+                      >
+                        {saving ? 'SAVING...' : 'SAVE CHANGES'}
+                      </button>
+                    </>
+                  ) : (
+                    <button
+                      onClick={() => setIsEditing(true)}
+                      className="px-3 py-1.5 bg-yellow-400 hover:bg-yellow-300 text-ink-black border-2 border-ink-black font-bold text-xs cursor-pointer shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none flex items-center gap-1"
+                    >
+                      <span className="material-symbols-outlined text-sm">edit</span>
+                      EDIT FILE
+                    </button>
+                  )
+                )}
+
+                <button
+                  onClick={() => handleCopyCode(isEditing ? editedCode : previewFile.reference_code)}
+                  className="px-3 py-1.5 bg-[#ffcc00] hover:bg-yellow-300 text-ink-black border-2 border-ink-black font-bold text-xs shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none cursor-pointer flex items-center gap-1"
+                >
+                  <span className="material-symbols-outlined text-sm">content_copy</span>
+                  {copied ? 'COPIED!' : 'COPY CODE'}
+                </button>
+                <button
+                  onClick={() => setPreviewFile(null)}
+                  className="px-3 py-1.5 bg-white hover:bg-slate-50 text-ink-black border-2 border-ink-black font-bold text-xs shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none cursor-pointer"
+                >
+                  CLOSE
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Feature 1: New File Creator Modal Dialog */}
+      {isCreateModalOpen && (
+        <div className="absolute inset-0 bg-black/60 z-[999] flex items-center justify-center p-4 select-none">
+          <div className="w-[80%] max-w-[500px] bg-paper-white border-[4px] border-ink-black shadow-[6px_6px_0px_0px_#1E293B] flex flex-col overflow-hidden animate-scale-up text-ink-black font-sans">
+            
+            {/* Modal Header */}
+            <div className="bg-primary-purple text-white p-2.5 border-b-[3px] border-ink-black flex justify-between items-center font-bold">
+              <span className="font-window-title text-xs">CREATE NEW SOLUTION FILE</span>
+              <button
+                onClick={() => setIsCreateModalOpen(false)}
+                className="bg-white text-ink-black border-[2px] border-ink-black w-5 h-5 flex items-center justify-center font-bold hover:bg-red-500 hover:text-white cursor-pointer"
+              >
+                X
+              </button>
+            </div>
+
+            {/* Modal Body form */}
+            <form onSubmit={handleCreateProblem} className="p-4 space-y-3 flex-1 overflow-y-auto custom-scrollbar">
+              {createError && (
+                <div className="p-2 border-2 border-red-500 bg-red-50 text-red-800 text-[10px] font-mono leading-relaxed">
+                  {createError}
+                </div>
+              )}
+
+              {/* Problem Name */}
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-bold text-slate-500 uppercase">Problem Name:</label>
+                <input
+                  type="text"
+                  required
+                  value={newFileName}
+                  onChange={(e) => setNewFileName(e.target.value)}
+                  placeholder="e.g. Two Sum"
+                  className="bg-white border-2 border-ink-black p-1.5 text-xs outline-none focus:ring-1 focus:ring-primary-purple font-semibold"
+                />
+              </div>
+
+              {/* Logical Pattern Category */}
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-bold text-slate-500 uppercase">Pattern Category:</label>
+                <input
+                  type="text"
+                  value={newFilePattern}
+                  onChange={(e) => setNewFilePattern(e.target.value)}
+                  placeholder="e.g. Sliding Window"
+                  className="bg-white border-2 border-ink-black p-1.5 text-xs outline-none focus:ring-1 focus:ring-primary-purple font-semibold"
+                />
+              </div>
+
+              {/* Difficulty Selection */}
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-bold text-slate-500 uppercase">Difficulty:</label>
+                <select
+                  value={newFileDifficulty}
+                  onChange={(e) => setNewFileDifficulty(e.target.value)}
+                  className="bg-white border-2 border-ink-black p-1.5 text-xs outline-none focus:ring-1 focus:ring-primary-purple font-bold cursor-pointer"
+                >
+                  <option value="Easy">Easy</option>
+                  <option value="Medium">Medium</option>
+                  <option value="Hard">Hard</option>
+                </select>
+              </div>
+
+              {/* Problem Description */}
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-bold text-slate-500 uppercase">Problem Description:</label>
+                <textarea
+                  value={newFileDescription}
+                  onChange={(e) => setNewFileDescription(e.target.value)}
+                  placeholder="e.g. Given an array of integers, return indices of the two numbers such that they add up to a specific target."
+                  className="bg-white border-2 border-ink-black p-1.5 text-xs outline-none focus:ring-1 focus:ring-primary-purple font-semibold h-[70px] resize-none"
+                />
+              </div>
+
+              {/* Solution Code */}
+              <div className="flex flex-col gap-1">
+                <label className="text-[10px] font-bold text-slate-500 uppercase">Reference Python Code:</label>
+                <textarea
+                  value={newFileCode}
+                  onChange={(e) => setNewFileCode(e.target.value)}
+                  placeholder="def solve():\n    pass"
+                  className="bg-slate-900 text-[#4ADE80] font-mono p-2 border-2 border-ink-black rounded outline-none h-[120px] text-xs leading-relaxed resize-none"
+                />
+              </div>
+
+              {/* Action Buttons */}
+              <div className="pt-3 border-t border-slate-200 flex justify-end gap-3 font-semibold">
+                <button
+                  type="button"
+                  onClick={() => setIsCreateModalOpen(false)}
+                  className="px-3 py-1.5 bg-white hover:bg-slate-50 border-2 border-ink-black text-xs cursor-pointer"
+                >
+                  CANCEL
+                </button>
+                <button
+                  type="submit"
+                  disabled={creating}
+                  className="px-3 py-1.5 bg-primary-purple text-white border-2 border-ink-black text-xs cursor-pointer shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none"
+                >
+                  {creating ? 'CREATING...' : 'ADD SOLUTION'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

algospaced-ui/src/components/JourneyPath.tsx

@@ -0,0 +1,362 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '../supabaseClient';
+import { ExternalLink, Search, CheckCircle, XCircle, ArrowLeft, RefreshCw, Star, Info } from 'lucide-react';
+
+const JOURNEY_SEQUENCE = [
+  217, 242, 1, 49, 347, 271, 238, 36, 128, 125, 167, 15, 11, 42, 121, 3, 424, 567, 76, 239, 20, 
+  155, 150, 739, 853, 84, 704, 74, 875, 153, 33, 981, 4, 206, 21, 141, 143, 19, 138, 2, 287, 
+  146, 23, 25, 226, 104, 543, 110, 100, 572, 235, 102, 199, 1448, 98, 230, 105, 124, 297, 703, 
+  1046, 973, 215, 621, 355, 295, 78, 39, 40, 46, 90, 22, 79, 131, 17, 51, 208, 211, 212, 200, 
+  695, 133, 286, 994, 417, 130, 207, 210, 261, 323, 684, 127, 743, 332, 1584, 778, 269, 787, 
+  70, 746, 198, 213, 5, 647, 91, 322, 152, 139, 300, 416, 62, 1143, 309, 518, 494, 97, 329, 
+  115, 72, 312, 10, 53, 55, 45, 134, 846, 1899, 763, 678, 57, 56, 435, 252, 253, 1851, 48, 
+  54, 73, 202, 66, 50, 43, 2013, 136, 191, 338, 190, 268, 371, 7
+];
+
+interface JourneyPathProps {
+  onSelectProblemForReview: (problemId: string) => void;
+}
+
+export default function JourneyPath({ onSelectProblemForReview }: JourneyPathProps) {
+  const [completions, setCompletions] = useState<Set<number>>(new Set());
+  const [titles, setTitles] = useState<Record<number, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [selectedNum, setSelectedNum] = useState<number | null>(null);
+  const [details, setDetails] = useState<any[]>([]);
+  const [modalLoading, setModalLoading] = useState(false);
+  const [toggleLoading, setToggleLoading] = useState(false);
+
+  const fetchData = async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const headers = { 'Authorization': `Bearer ${session.access_token}` };
+      
+      const [progRes, titlesRes] = await Promise.all([
+        fetch(`${import.meta.env.VITE_API_BASE_URL}/api/journey-progress`, { headers }),
+        fetch(`${import.meta.env.VITE_API_BASE_URL}/api/journey-progress/titles`, { headers })
+      ]);
+
+      if (progRes.ok && titlesRes.ok) {
+        const progData = await progRes.json();
+        const titlesData = await titlesRes.json();
+        setCompletions(new Set(progData));
+        setTitles(titlesData);
+      }
+    } catch (err) {
+      console.error('Error fetching journey data:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleNodeClick = async (num: number) => {
+    setSelectedNum(num);
+    setDetails([]);
+    setModalLoading(true);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/reviews/problems/${num}`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setDetails(data);
+      }
+    } catch (err) {
+      console.error('Error fetching problem details:', err);
+    } finally {
+      setModalLoading(false);
+    }
+  };
+
+  const handleToggleCompletion = async (num: number) => {
+    setToggleLoading(true);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/journey-progress/toggle`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({ problem_number: num })
+      });
+
+      if (res.ok) {
+        const updated = new Set(completions);
+        if (updated.has(num)) {
+          updated.delete(num);
+        } else {
+          updated.add(num);
+        }
+        setCompletions(updated);
+      }
+    } catch (err) {
+      console.error('Error toggling progress:', err);
+    } finally {
+      setToggleLoading(false);
+    }
+  };
+
+  // Compute stats
+  const total = JOURNEY_SEQUENCE.length;
+  const completedCount = JOURNEY_SEQUENCE.filter(num => completions.has(num)).length;
+  const percentage = total > 0 ? Math.round((completedCount / total) * 100) : 0;
+
+  if (loading) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-[#fdf8e1] text-ink-black">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw className="w-8 h-8 text-primary animate-spin" />
+          <span className="font-arcade text-[10px] tracking-wide">COMPILING MAP...</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Determine active node: first node in sequence that is not completed
+  const activeNode = JOURNEY_SEQUENCE.find(num => !completions.has(num)) || JOURNEY_SEQUENCE[0];
+
+  return (
+    <div className="w-full h-full bg-[#fdf8e1] p-6 overflow-y-auto custom-scrollbar flex flex-col relative">
+      <div className="flex flex-col gap-4">
+        {/* Header progress info */}
+        <div className="flex flex-col md:flex-row items-center justify-between p-4 bg-white border-[3px] border-ink-black shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] gap-4 select-none">
+          <div>
+            <h3 className="font-headline-md font-bold text-ink-black text-sm m-0">MAP PROGRESS STATUS</h3>
+            <span className="text-[10px] font-arcade text-trash-gray font-bold uppercase mt-1 block">Leitner path completion metrics</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="font-arcade text-[10px] font-bold text-ink-black">{percentage}% DONE</span>
+            <div className="w-48 h-6 bg-slate-100 border-[3px] border-ink-black relative overflow-hidden">
+              <div 
+                className="absolute inset-y-0 left-0 bg-[#0ea5e9] border-r-[3px] border-ink-black transition-all duration-500"
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Milestone path visualization */}
+        <div className="bg-white border-[3px] border-ink-black shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] relative p-8 mt-4 overflow-hidden min-h-[700px] flex flex-col items-center">
+          {/* Timeline Center Sine Path via SVG */}
+          <svg className="absolute inset-y-0 w-full h-full pointer-events-none" preserveAspectRatio="none" viewBox="0 0 100 1000">
+            <path 
+              d="M 50,0 Q 70,50 30,100 T 50,200 T 70,300 T 30,400 T 50,500 T 70,600 T 30,700 T 50,800 T 70,900 T 50,1000" 
+              fill="none" 
+              opacity="0.3" 
+              stroke="#1E293B" 
+              strokeDasharray="5,15" 
+              strokeLinecap="round" 
+              strokeWidth="6"
+            />
+          </svg>
+
+          {/* Nodes Container */}
+          <div className="relative z-10 flex flex-col items-center gap-10 w-full max-w-sm">
+            {JOURNEY_SEQUENCE.map((num, index) => {
+              const isCompleted = completions.has(num);
+              const isSynced = num in titles;
+              const title = titles[num] || 'Unsynced Note';
+              const isActive = num === activeNode;
+              
+              // Sine wave displacement
+              const xOffset = Math.sin(index * 0.8) * 75;
+
+              return (
+                <div
+                  key={num}
+                  className="relative group flex items-center justify-center"
+                  style={{ transform: `translateX(${xOffset}px)` }}
+                >
+                  {/* Tooltip */}
+                  <div className="absolute bottom-[115%] left-1/2 -translate-x-1/2 bg-paper-white text-ink-black border-[3px] border-ink-black text-[9px] font-arcade px-3 py-2 rounded-xl whitespace-nowrap shadow-[4px_4px_0px_0px_#1E293B] opacity-0 group-hover:opacity-100 transition-all duration-200 scale-90 group-hover:scale-100 pointer-events-none z-30">
+                    <span className="font-bold text-primary mr-1">#{num}</span>
+                    <span>{title.toUpperCase()}</span>
+                    {!isSynced && <span className="ml-2 text-red-500 font-bold">(LOCKED)</span>}
+                  </div>
+
+                  {/* Circular / Rounded Square Node */}
+                  <button
+                    onClick={() => handleNodeClick(num)}
+                    className={`w-14 h-14 border-[3px] border-ink-black flex items-center justify-center font-arcade font-bold text-xs cursor-pointer transition-all duration-200 hover:scale-110 active:scale-95 ${
+                      isCompleted
+                        ? 'bg-grass-green text-ink-black shadow-[3px_3px_0px_0px_#1E293B] rounded-lg'
+                        : isActive
+                        ? 'bg-[#ffe24c] text-ink-black shadow-[4px_4px_0px_0px_#F472B6] rounded-xl animate-bounce border-dashed'
+                        : isSynced
+                        ? 'bg-[#c0e8ff] text-ink-black shadow-[3px_3px_0px_0px_#1E293B] rounded-lg'
+                        : 'bg-slate-200 text-trash-gray opacity-60 shadow-[1px_1px_0px_0px_#1E293B] rounded-lg'
+                    }`}
+                  >
+                    {isCompleted ? '✓' : isActive ? '▶' : num}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Modal Dialog (Styled as a Retro OS System Dialog) */}
+      {selectedNum !== null && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center z-[100] p-4 animate-fade-in">
+          <div className="w-full max-w-md bg-paper-white border-[4px] border-ink-black p-0 shadow-[8px_8px_0px_0px_rgba(30,41,59,1)] relative select-none">
+            {/* Title Bar */}
+            <div className="bg-[#0ea5e9] border-b-[4px] border-ink-black px-4 py-2 flex justify-between items-center text-white font-bold text-sm">
+              <div className="flex items-center gap-2">
+                <span className="material-symbols-outlined text-sm font-bold">info</span>
+                <span>Problem_Detail.sys</span>
+              </div>
+              <button
+                onClick={() => setSelectedNum(null)}
+                className="w-6 h-6 bg-highlight-pink text-white border-2 border-ink-black flex items-center justify-center hover:bg-rose-600 active:translate-y-0.5 shadow-[1px_1px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer font-bold"
+              >
+                &times;
+              </button>
+            </div>
+
+            {/* Dialog Content */}
+            <div className="p-6 bg-[#fdf8e1] space-y-4">
+              <div className="pb-3 border-b-2 border-dashed border-ink-black">
+                <span className="text-[8px] font-arcade font-bold text-trash-gray uppercase block">Milestone Index</span>
+                <h3 className="text-xl font-bold font-headline-md text-ink-black mt-1">LeetCode Problem #{selectedNum}</h3>
+              </div>
+
+              {modalLoading ? (
+                <div className="py-8 flex flex-col items-center justify-center gap-3">
+                  <RefreshCw className="w-6 h-6 text-primary animate-spin" />
+                  <span className="text-[8px] font-arcade font-bold text-trash-gray uppercase">FETCHING DATA...</span>
+                </div>
+              ) : details.length > 0 ? (
+                <div className="space-y-4">
+                  {details.map((prob) => (
+                    <div key={prob.id} className="p-4 bg-white border-[3px] border-ink-black shadow-[3px_3px_0px_0px_rgba(30,41,59,1)] space-y-3">
+                      <div className="flex justify-between items-start gap-2">
+                        <div>
+                          <h4 className="font-bold text-ink-black text-sm font-headline-md leading-tight m-0">{prob.name}</h4>
+                          <span className="text-[8px] font-arcade text-trash-gray font-bold uppercase mt-1 block">Pattern: {prob.pattern}</span>
+                        </div>
+                        <span className={`text-[8px] font-arcade font-bold px-2 py-0.5 border-2 border-ink-black ${
+                          prob.difficulty === 'Easy' ? 'bg-grass-green text-ink-black' :
+                          prob.difficulty === 'Medium' ? 'bg-secondary-container text-ink-black' :
+                          'bg-highlight-pink text-white'
+                        }`}>
+                          {prob.difficulty.toUpperCase()}
+                        </span>
+                      </div>
+
+                      <div className="flex gap-4 text-xs font-bold text-ink-black">
+                        <div>Time: <code className="bg-[#1E293B] text-[#4ADE80] font-code-mono px-1.5 py-0.5 border border-ink-black">{prob.optimal_time}</code></div>
+                        <div>Space: <code className="bg-[#1E293B] text-[#4ADE80] font-code-mono px-1.5 py-0.5 border border-ink-black">{prob.optimal_space}</code></div>
+                      </div>
+
+                      <div className="flex flex-col sm:flex-row gap-2 pt-2 border-t border-slate-200">
+                        <a
+                          href={prob.google_doc_url}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="flex-1 flex items-center justify-center gap-1.5 py-2 border-[3px] border-ink-black bg-white hover:bg-slate-100 text-xs font-bold text-ink-black shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer text-center"
+                        >
+                          <ExternalLink className="w-3.5 h-3.5" />
+                          Google Doc
+                        </a>
+                        <button
+                          onClick={() => {
+                            onSelectProblemForReview(prob.id);
+                            setSelectedNum(null);
+                          }}
+                          className="flex-1 flex items-center justify-center gap-1.5 py-2 border-[3px] border-ink-black bg-[#ffe24c] hover:bg-yellow-300 text-xs font-bold text-ink-black shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer text-center"
+                        >
+                          <Star className="w-3.5 h-3.5" />
+                          Review Problem
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="p-4 bg-white border-[3px] border-ink-black shadow-[3px_3px_0px_0px_rgba(30,41,59,1)] space-y-4">
+                  <div className="flex items-start gap-3 text-xs font-bold text-ink-black leading-relaxed">
+                    <Info className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                    <div>
+                      <h4 className="font-bold text-ink-black m-0">No Local Note Synced</h4>
+                      <p className="text-[10px] text-trash-gray mt-1 leading-normal font-semibold">
+                        You haven't synced notes for LeetCode #{selectedNum} yet. Click "Sync Google Drive" to import your progress notes.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2 pt-2 border-t border-slate-200">
+                    <span className="text-[8px] font-arcade text-trash-gray uppercase font-bold block">External Search Shortcuts:</span>
+                    <a
+                      href={`https://leetcode.com/problemset/?search=${selectedNum}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="w-full flex items-center justify-between p-2.5 bg-white border-[3px] border-ink-black text-xs font-bold text-ink-black hover:bg-slate-100 shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2">
+                        <ExternalLink className="w-4 h-4 text-emerald-500" />
+                        Search LeetCode
+                      </span>
+                      <ArrowLeft className="w-3.5 h-3.5 rotate-180 text-trash-gray" />
+                    </a>
+                    <a
+                      href={`https://www.google.com/search?q=leetcode+${selectedNum}`}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="w-full flex items-center justify-between p-2.5 bg-white border-[3px] border-ink-black text-xs font-bold text-ink-black hover:bg-slate-100 shadow-[2px_2px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer"
+                    >
+                      <span className="flex items-center gap-2">
+                        <Search className="w-4 h-4 text-primary" />
+                        Search Google
+                      </span>
+                      <ArrowLeft className="w-3.5 h-3.5 rotate-180 text-trash-gray" />
+                    </a>
+                  </div>
+                </div>
+              )}
+
+              {/* Completion Toggle */}
+              <div className="mt-4 pt-3 border-t-2 border-dashed border-ink-black flex flex-col gap-2">
+                <span className="text-[8px] font-arcade text-trash-gray font-bold uppercase block">Quick Action</span>
+                
+                <button
+                  onClick={() => handleToggleCompletion(selectedNum)}
+                  disabled={toggleLoading}
+                  className={`w-full py-3 border-[3px] border-ink-black font-arcade text-[10px] font-bold tracking-wide uppercase flex items-center justify-center gap-2 cursor-pointer transition-all shadow-[3px_3px_0px_0px_#1E293B] active:translate-y-0.5 active:shadow-none disabled:opacity-50 ${
+                    completions.has(selectedNum)
+                      ? 'bg-red-100 text-red-600 hover:bg-red-200'
+                      : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200'
+                  }`}
+                >
+                  {completions.has(selectedNum) ? (
+                    <>
+                      <XCircle className="w-4.5 h-4.5" />
+                      UNMARK AS COMPLETED
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle className="w-4.5 h-4.5" />
+                      MARK AS COMPLETED
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

algospaced-ui/src/components/MySQLPlayground.tsx

@@ -0,0 +1,341 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+
+interface MySQLStatusData {
+  active?: boolean;
+  title: string;
+  objective: string;
+  points: number;
+  challenge_type: string;
+  schema: Record<string, Array<{ name: string; type: string }>>;
+  completed: boolean;
+  total_score: number;
+}
+
+export default function MySQLPlayground() {
+  const [status, setStatus] = useState<MySQLStatusData | null>(null);
+  const [query, setQuery] = useState('');
+  const [running, setRunning] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  
+  const [results, setResults] = useState<{
+    columns: string[];
+    rows: any[];
+    rowsAffected: number;
+    isCorrect?: boolean;
+  } | null>(null);
+
+  const fetchStatus = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Unauthenticated session');
+        return;
+      }
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/status`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.active) {
+          setStatus(data);
+        } else {
+          setStatus(null);
+        }
+      } else {
+        setError('Failed to fetch playground status.');
+      }
+    } catch {
+      setError('Connection timed out.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInit = async () => {
+    setLoading(true);
+    setError('');
+    setResults(null);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Unauthenticated session');
+        return;
+      }
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/init`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setStatus({
+          active: true,
+          title: data.title,
+          objective: data.objective,
+          points: data.points,
+          schema: data.schema,
+          challenge_type: data.challenge_type,
+          completed: false,
+          total_score: data.total_score
+        });
+      } else {
+        setError('Failed to initialize mock database playground.');
+      }
+    } catch {
+      setError('Server connection error.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRunQuery = async () => {
+    if (!query.trim()) return;
+    setRunning(true);
+    setError('');
+    setResults(null);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Unauthenticated session');
+        return;
+      }
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/query`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({ query })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          setResults({
+            columns: data.columns,
+            rows: data.rows,
+            rowsAffected: data.rows_affected,
+            isCorrect: data.is_correct
+          });
+          if (data.is_correct) {
+            setStatus(prev => prev ? { ...prev, completed: true, total_score: data.total_score } : null);
+          }
+          if (data.schema) {
+            setStatus(prev => prev ? { ...prev, schema: data.schema } : null);
+          }
+        } else {
+          setError(data.error);
+        }
+      } else {
+        setError('Database server query failure.');
+      }
+    } catch {
+      setError('Query connection lost.');
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="w-full h-full bg-paper-white p-6 flex flex-col items-center justify-center font-arcade text-[10px]">
+        <div className="animate-bounce mb-2">INITIALIZING SQL PLAYGROUND...</div>
+        <div className="w-48 h-4 bg-white border-[3px] border-ink-black overflow-hidden relative">
+          <div className="absolute inset-y-0 left-0 bg-[#0ea5e9] w-1/2 animate-pulse border-r-2 border-ink-black" />
+        </div>
+      </div>
+    );
+  }
+
+  // Dashboard state: no active database initialized
+  if (!status) {
+    return (
+      <div className="w-full h-full bg-paper-white p-6 flex flex-col justify-between items-center text-center text-ink-black text-xs md:text-sm font-sans select-none">
+        <div className="flex-1 flex flex-col justify-center items-center gap-4">
+          <div className="w-16 h-16 bg-white border-[3px] border-ink-black flex items-center justify-center shadow-[4px_4px_0_0_#1E293B]">
+            <span className="material-symbols-outlined text-4xl text-[#0ea5e9]" style={{ fontVariationSettings: "'FILL' 1" }}>
+              database
+            </span>
+          </div>
+          <h3 className="font-headline-md font-bold text-lg">Interactive MySQL Playground</h3>
+          <p className="max-w-md text-slate-600 leading-relaxed font-semibold">
+            Test and run relational queries against isolated schemas dynamically built by the AI generator. Includes full support for:
+          </p>
+          <div className="flex flex-wrap justify-center gap-2 font-mono text-[10px] text-slate-700 font-bold uppercase mt-1">
+            <span className="bg-blue-100 border border-blue-400 px-2 py-0.5">SELECT / JOIN</span>
+            <span className="bg-emerald-100 border border-emerald-400 px-2 py-0.5">UPDATE / DELETE</span>
+            <span className="bg-purple-100 border border-purple-400 px-2 py-0.5">WINDOW FUNCTIONS</span>
+          </div>
+        </div>
+        
+        <div className="w-full border-t border-slate-200 pt-4 flex flex-col gap-2 shrink-0">
+          <button
+            onClick={handleInit}
+            className="w-full py-2.5 bg-[#0ea5e9] hover:bg-sky-400 text-white font-window-title font-bold text-xs uppercase border-[3px] border-ink-black shadow-[4px_4px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none transition-all cursor-pointer text-center"
+          >
+            CREATE NEW DATABASE INSTANCE
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full bg-paper-white text-ink-black flex flex-col overflow-hidden text-xs md:text-sm">
+      {/* Play Workspace Scrollable Body */}
+      <div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-4">
+        
+        {/* Objectives Badge Header */}
+        <div className="flex justify-between items-center bg-slate-100 border-[3px] border-ink-black p-3 shrink-0">
+          <div className="flex gap-2">
+            <span className="bg-blue-100 text-blue-800 px-2 py-0.5 border-2 border-ink-black font-bold text-[9px] uppercase">
+              {status.challenge_type}
+            </span>
+            <span className="bg-yellow-100 text-yellow-800 px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+              +{status.points} PTS
+            </span>
+            {status.completed ? (
+              <span className="bg-emerald-500 text-white px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+                SOLVED
+              </span>
+            ) : (
+              <span className="bg-rose-500 text-white px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+                UNSOLVED
+              </span>
+            )}
+          </div>
+          <div className="font-arcade text-[8px] text-sky-700 font-bold bg-white border-2 border-ink-black px-2 py-0.5 shadow-[1px_1px_0_0_#1E293B]">
+            SCORE: {status.total_score}
+          </div>
+        </div>
+
+        {/* Objective banner */}
+        <div className="border-[3px] border-yellow-400 bg-yellow-50 p-3 rounded font-sans leading-relaxed text-xs">
+          <h4 className="font-arcade text-[9px] text-yellow-800 mb-1">MISSION OBJECTIVE</h4>
+          <p className="font-bold text-slate-800">{status.objective}</p>
+        </div>
+
+        {/* Schema Tree */}
+        <div className="border-[3px] border-ink-black bg-white p-3">
+          <div className="font-bold text-[10px] border-b border-slate-300 pb-1 mb-2 flex items-center gap-1.5">
+            <span className="material-symbols-outlined text-sm">schema</span>
+            <span>SCHEMA EXPLORER (MOCK INSTANCE)</span>
+          </div>
+          <div className="grid grid-cols-2 gap-3 max-h-[140px] overflow-y-auto custom-scrollbar font-mono text-[10px]">
+            {Object.entries(status.schema).map(([tableName, cols]) => (
+              <div key={tableName} className="border border-slate-300 p-2 bg-slate-50">
+                <div className="font-bold text-blue-700 border-b border-slate-200 pb-0.5 mb-1 flex items-center gap-1">
+                  <span className="material-symbols-outlined text-[12px]">table_chart</span>
+                  {tableName}
+                </div>
+                <ul className="space-y-0.5 text-slate-600 text-[9px]">
+                  {cols.map((col, cIdx) => (
+                    <li key={cIdx} className="flex justify-between">
+                      <span>{col.name}</span>
+                      <span className="text-slate-400 italic text-[8px]">{col.type}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Query Input Editor */}
+        <div className="flex flex-col min-h-[120px]">
+          <div className="font-bold text-[10px] mb-1 tracking-wide uppercase flex items-center gap-1">
+            <span className="material-symbols-outlined text-sm text-sky-600">terminal</span>
+            <span>Enter SQL Query:</span>
+          </div>
+          <textarea
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="flex-1 w-full bg-slate-900 text-[#4ADE80] font-mono p-3 border-[3px] border-ink-black rounded outline-none focus:ring-2 focus:ring-sky-500 text-xs leading-relaxed resize-none"
+            placeholder="SELECT * FROM customers WHERE score > 100;"
+            spellCheck="false"
+          />
+        </div>
+
+        {/* Run Button bar */}
+        <div className="flex gap-3">
+          <button
+            onClick={handleInit}
+            className="flex-1 bg-white hover:bg-slate-100 text-ink-black border-[3px] border-ink-black font-bold font-window-title text-xs py-2 shadow-[3px_3px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none cursor-pointer"
+          >
+            NEW PROBLEM
+          </button>
+          <button
+            disabled={running}
+            onClick={handleRunQuery}
+            className="flex-[2] bg-highlight-pink text-white font-window-title font-bold py-2 border-[3px] border-ink-black shadow-[3px_3px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none hover:bg-pink-400 transition-all disabled:opacity-50 cursor-pointer text-center text-xs"
+          >
+            {running ? 'EXECUTING SQL...' : 'EXECUTE SQL QUERY'}
+          </button>
+        </div>
+
+        {/* Query Error Console */}
+        {error && (
+          <div className="border-[3px] border-red-500 bg-red-50 text-red-800 p-3 font-mono text-xs whitespace-pre-wrap">
+            <div className="font-bold mb-1">SQL RUNTIME / SYNTAX ERROR:</div>
+            {error}
+          </div>
+        )}
+
+        {/* Tabular Result Grid */}
+        {results && (
+          <div className="border-[3px] border-ink-black bg-white p-3 flex flex-col">
+            <div className="font-bold text-[10px] border-b border-slate-300 pb-1 mb-2 flex justify-between items-center">
+              <span>QUERY OUTPUT BUFFER</span>
+              {results.isCorrect && (
+                <span className="text-green-600 font-bold animate-bounce text-[9px]">
+                  ✓ MISSION ACHIEVED!
+                </span>
+              )}
+            </div>
+
+            <div className="text-[9px] text-slate-500 mb-2 font-mono">
+              Rows Affected: {results.rowsAffected} | Total Returned: {results.rows.length}
+            </div>
+
+            {results.rows.length > 0 ? (
+              <div className="overflow-x-auto border border-slate-300 max-h-[180px] custom-scrollbar">
+                <table className="border-collapse w-full font-mono text-[9px] min-w-full">
+                  <thead>
+                    <tr className="bg-slate-100 border-b border-slate-300">
+                      {results.columns.map((col, idx) => (
+                        <th key={idx} className="border-r border-slate-300 p-1.5 text-left font-bold text-slate-700">
+                          {col}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-200">
+                    {results.rows.map((row, rIdx) => (
+                      <tr key={rIdx} className="hover:bg-slate-50">
+                        {results.columns.map((col, cIdx) => (
+                          <td key={cIdx} className="border-r border-slate-200 p-1.5 text-slate-800 whitespace-nowrap">
+                            {row[col] !== null ? String(row[col]) : <span className="text-slate-300 italic">NULL</span>}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="p-3 border border-dashed border-slate-300 text-center text-slate-400 italic font-sans text-xs">
+                Query executed successfully. Result set is empty (or modification completed).
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

algospaced-ui/src/components/PythonChallenge.tsx

@@ -0,0 +1,237 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+
+interface PythonChallengeData {
+  title: string;
+  description: string;
+  difficulty: string;
+  points: number;
+  starter_code: string;
+  completed: boolean;
+  total_score: number;
+}
+
+export default function PythonChallenge() {
+  const [challenge, setChallenge] = useState<PythonChallengeData | null>(null);
+  const [code, setCode] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [results, setResults] = useState<any[]>([]);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [globalScore, setGlobalScore] = useState(0);
+
+  const fetchChallenge = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Unauthenticated session');
+        return;
+      }
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/python/daily`, {
+        headers: { 'Authorization': `Bearer ${session.access_token}` }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setChallenge(data);
+        setCode(data.starter_code);
+        setGlobalScore(data.total_score);
+      } else {
+        setError('Failed to load challenge from server.');
+      }
+    } catch {
+      setError('Connection timed out.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchChallenge();
+  }, []);
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setError('');
+    setResults([]);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        setError('Unauthenticated session');
+        return;
+      }
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/python/submit`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({ code })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          setResults(data.results);
+          if (data.all_passed) {
+            setGlobalScore(data.total_score);
+            setChallenge(prev => prev ? { ...prev, completed: true } : null);
+          }
+        } else {
+          setError(data.error);
+        }
+      } else {
+        setError('Submission failed at server host.');
+      }
+    } catch {
+      setError('Network connection lost.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full h-full bg-paper-white p-6 flex flex-col items-center justify-center font-arcade text-[10px]">
+        <div className="animate-bounce mb-2">LOADING CHALLENGE...</div>
+        <div className="w-48 h-4 bg-white border-[3px] border-ink-black overflow-hidden relative">
+          <div className="absolute inset-y-0 left-0 bg-[#9d4edd] w-2/3 animate-pulse border-r-2 border-ink-black" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!challenge) {
+    return (
+      <div className="w-full h-full bg-paper-white p-6 flex flex-col items-center justify-center font-sans text-center gap-3">
+        <span className="material-symbols-outlined text-red-500 text-4xl">error</span>
+        <div className="font-bold text-ink-black text-sm">{error || 'No active challenge found.'}</div>
+        <button 
+          onClick={fetchChallenge}
+          className="px-3 py-1.5 bg-yellow-400 hover:bg-yellow-300 border-[3px] border-ink-black text-xs font-bold font-window-title cursor-pointer shadow-[2px_2px_0px_rgba(0,0,0,1)] active:translate-y-0.5 active:shadow-none"
+        >
+          RETRY
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full bg-paper-white text-ink-black flex flex-col overflow-hidden text-xs md:text-sm">
+      {/* Workspace Body */}
+      <div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-4">
+        {/* Info Header */}
+        <div className="flex justify-between items-center bg-slate-100 border-[3px] border-ink-black p-3">
+          <div className="flex gap-2">
+            <span className={`px-2 py-0.5 border-2 border-ink-black font-bold uppercase text-[9px] ${
+              challenge.difficulty === 'Easy' ? 'bg-green-200 text-green-800' :
+              challenge.difficulty === 'Medium' ? 'bg-yellow-200 text-yellow-800' :
+              'bg-red-200 text-red-800'
+            }`}>
+              {challenge.difficulty}
+            </span>
+            <span className="bg-blue-100 text-blue-800 px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+              +{challenge.points} PTS
+            </span>
+            {challenge.completed ? (
+              <span className="bg-emerald-500 text-white px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+                COMPLETED
+              </span>
+            ) : (
+              <span className="bg-rose-500 text-white px-2 py-0.5 border-2 border-ink-black font-bold text-[9px]">
+                INCOMPLETE
+              </span>
+            )}
+          </div>
+          <div className="font-arcade text-[8px] text-purple-700 font-bold bg-white border-2 border-ink-black px-2 py-0.5 shadow-[1px_1px_0_0_#1E293B]">
+            TOTAL SCORE: {globalScore}
+          </div>
+        </div>
+
+        {/* Description */}
+        <div className="border-2 border-ink-black bg-slate-50 p-3 rounded font-sans leading-relaxed text-xs">
+          <h3 className="font-bold border-b border-slate-300 pb-1 mb-2 uppercase tracking-wide text-primary-purple flex items-center gap-1">
+            <span className="material-symbols-outlined text-sm">description</span>
+            Problem: {challenge.title}
+          </h3>
+          <p className="whitespace-pre-wrap">{challenge.description}</p>
+        </div>
+
+        {/* Code Editor */}
+        <div className="flex flex-col flex-1 min-h-[220px]">
+          <div className="flex justify-between items-center mb-1">
+            <span className="font-bold text-[10px] tracking-wide uppercase flex items-center gap-1">
+              <span className="material-symbols-outlined text-sm text-purple-600">code</span>
+              Write Python Solution:
+            </span>
+            <button
+              onClick={() => setCode(challenge.starter_code)}
+              className="text-[9px] underline text-blue-600 hover:text-blue-800 cursor-pointer font-sans"
+            >
+              Reset Starter Code
+            </button>
+          </div>
+          <textarea
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            className="flex-1 w-full bg-slate-900 text-[#4ADE80] font-mono p-3 border-[3px] border-ink-black rounded outline-none focus:ring-2 focus:ring-primary-purple text-xs leading-relaxed resize-none"
+            placeholder="# Write your python code here"
+            spellCheck="false"
+          />
+        </div>
+
+        {/* Submit Bar */}
+        <div className="shrink-0">
+          <button
+            disabled={submitting}
+            onClick={handleSubmit}
+            className="w-full bg-highlight-pink text-white font-window-title font-bold py-2 px-4 border-[3px] border-ink-black shadow-[3px_3px_0px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none hover:bg-pink-400 transition-all disabled:opacity-50 cursor-pointer text-center text-xs"
+          >
+            {submitting ? 'EXECUTING TEST CASES...' : 'RUN SOLUTION SUBMISSION'}
+          </button>
+        </div>
+
+        {/* Error Console */}
+        {error && (
+          <div className="border-[3px] border-red-500 bg-red-50 text-red-800 p-3 font-mono text-xs whitespace-pre-wrap">
+            <div className="font-bold mb-1">COMPILER / RUNTIME ERROR:</div>
+            {error}
+          </div>
+        )}
+
+        {/* Test Results */}
+        {results.length > 0 && (
+          <div className="border-[3px] border-ink-black bg-slate-100 p-3">
+            <div className="font-bold text-[10px] border-b border-slate-300 pb-1 mb-2 uppercase">Test Case Executions:</div>
+            <div className="space-y-1.5 font-mono text-xs">
+              {results.map((res, index) => (
+                <div key={index} className="flex flex-col p-2 border border-slate-300 bg-white">
+                  <div className="flex justify-between">
+                    <span className="font-bold">Test Case {index + 1}:</span>
+                    <span className={`font-bold uppercase ${res.status === 'passed' ? 'text-green-600' : 'text-red-600'}`}>
+                      {res.status}
+                    </span>
+                  </div>
+                  <div className="text-[10px] text-slate-500 mt-1">
+                    <div>Input: {JSON.stringify(res.input)}</div>
+                    {res.status === 'passed' && <div>Output: {JSON.stringify(res.got)}</div>}
+                    {res.status === 'failed' && (
+                      <div className="text-red-700">
+                        Expected: {JSON.stringify(res.expected)} | Got: {JSON.stringify(res.got)}
+                      </div>
+                    )}
+                    {res.status === 'error' && (
+                      <div className="text-red-700 font-semibold">
+                        Error: {res.error}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

algospaced-ui/src/components/ReviewQueue.tsx

@@ -0,0 +1,683 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '../supabaseClient';
+import { Sparkles, Check, AlertTriangle, Code, Award, ExternalLink, RefreshCw, ChevronDown } from 'lucide-react';
+import CodeMirror from '@uiw/react-codemirror';
+import { python } from '@codemirror/lang-python';
+
+interface ReviewQueueProps {
+  overrideProblemId: string | null;
+  onClearOverride: () => void;
+}
+
+export default function ReviewQueue({ overrideProblemId, onClearOverride }: ReviewQueueProps) {
+  const [reviews, setReviews] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [code, setCode] = useState('');
+  const [activeTab, setActiveTab] = useState<'ai' | 'offline'>('ai');
+  
+  // AI evaluation states
+  const [aiLoading, setAiLoading] = useState(false);
+  const [aiResult, setAiResult] = useState<any>(null);
+  const [aiError, setAiError] = useState<string | null>(null);
+  
+  // Reference code collapse state
+  const [showRefCode, setShowRefCode] = useState(false);
+
+  // Code explanation states
+  const [explainLoading, setExplainLoading] = useState(false);
+  const [explanationText, setExplanationText] = useState<string | null>(null);
+  const [explainError, setExplainError] = useState<string | null>(null);
+
+  // Autocomplete state (persistent)
+  const [isAutocompleteEnabled, setIsAutocompleteEnabled] = useState<boolean>(() => {
+    const saved = localStorage.getItem('isAutocompleteEnabled');
+    return saved !== 'false';
+  });
+
+  const fetchQueue = async () => {
+    setLoading(true);
+    setAiResult(null);
+    setAiError(null);
+    setCode('');
+    setShowRefCode(false);
+    setExplanationText(null);
+    setExplainError(null);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const headers = { 'Authorization': `Bearer ${session.access_token}` };
+      
+      let url = `${import.meta.env.VITE_API_BASE_URL}/api/reviews/due`;
+      if (overrideProblemId) {
+        url = `${import.meta.env.VITE_API_BASE_URL}/api/reviews/problems/id/${overrideProblemId}`;
+      }
+
+      const res = await fetch(url, { headers });
+      if (res.ok) {
+        const data = await res.json();
+        setReviews(data);
+        if (data && data.length > 0) {
+          const activeReview = data[0];
+          const problem = activeReview.problems;
+          if (problem && problem.starter_code) {
+            setCode(problem.starter_code);
+          }
+        }
+      }
+    } catch (err) {
+      console.error('Error fetching review queue:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchQueue();
+  }, [overrideProblemId]);
+
+  const handleGrade = async (rating: 'Correct' | 'Mixed' | 'Incorrect') => {
+    if (reviews.length === 0) return;
+    const activeReview = reviews[0];
+    
+    setSubmitting(true);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/reviews/complete`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({
+          review_id: activeReview.id,
+          box_level: activeReview.box_level,
+          times_correct: activeReview.times_correct,
+          total_attempts: activeReview.total_attempts,
+          rating
+        })
+      });
+
+      if (res.ok) {
+        if (overrideProblemId) {
+          // If we completed the custom override card, exit override mode
+          onClearOverride();
+        } else {
+          // Refresh the daily queue
+          fetchQueue();
+        }
+      }
+    } catch (err) {
+      console.error('Error logging review completion:', err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleAiEvaluation = async () => {
+    if (reviews.length === 0 || !code.trim()) return;
+    const activeReview = reviews[0];
+    const problem = activeReview.problems;
+
+    setAiLoading(true);
+    setAiResult(null);
+    setAiError(null);
+
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/reviews/evaluate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({
+          problem_name: problem.name,
+          pattern: problem.pattern,
+          optimal_time: problem.optimal_time,
+          optimal_space: problem.optimal_space,
+          code: code
+        })
+      });
+
+      if (res.ok) {
+        const result = await res.json();
+        setAiResult(result);
+      } else {
+        const errorData = await res.json();
+        setAiError(errorData.detail || 'Failed to analyze code.');
+      }
+    } catch (err) {
+      setAiError('Connection to evaluation server failed.');
+    } finally {
+      setAiLoading(false);
+    }
+  };
+
+  const handleExplainCode = async () => {
+    if (reviews.length === 0) return;
+    const activeReview = reviews[0];
+    const problem = activeReview.problems;
+    if (!problem || !problem.problem_number) return;
+
+    setExplainLoading(true);
+    setExplanationText(null);
+    setExplainError(null);
+
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/reviews/explain`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${session.access_token}`
+        },
+        body: JSON.stringify({
+          problem_number: problem.problem_number,
+          method: problem.pattern
+        })
+      });
+
+      if (res.ok) {
+        const result = await res.json();
+        setExplanationText(result.explanation);
+      } else {
+        const errorData = await res.json();
+        setExplainError(errorData.detail || 'Failed to generate code explanation.');
+      }
+    } catch (err) {
+      setExplainError('Connection to explanation server failed.');
+    } finally {
+      setExplainLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-[#fdf8e1] text-ink-black">
+        <div className="flex flex-col items-center gap-3">
+          <RefreshCw className="w-8 h-8 text-primary animate-spin" />
+          <span className="font-arcade text-[10px] tracking-wide">LOADING SYSTEM CARD...</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (reviews.length === 0) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-[#fdf8e1] px-6">
+        <div className="w-full max-w-md text-center space-y-6 py-12 px-8 bg-paper-white border-[3px] border-ink-black gadget-shadow relative overflow-hidden">
+          <div className="absolute top-0 left-0 right-0 h-[8px] bg-grass-green" />
+          <div className="w-16 h-16 bg-emerald-100 border-[3px] border-ink-black flex items-center justify-center mx-auto text-emerald-600 gadget-shadow">
+            <Check className="w-8 h-8 stroke-[3px]" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-ink-black font-headline-md">Queue Clear!</h2>
+            <p className="text-xs font-sans text-trash-gray mt-2 leading-relaxed font-semibold">
+              Fantastic work. All active Leitner cards are up to date. Come back tomorrow for new spaced-repetition reviews!
+            </p>
+          </div>
+          {overrideProblemId && (
+            <button
+              onClick={onClearOverride}
+              className="bg-white border-[3px] border-ink-black text-ink-black font-bold px-4 py-2 text-xs uppercase tracking-wide hover:bg-slate-100 active:translate-y-0.5 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer inline-block"
+            >
+              Return to Daily Queue
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const activeReview = reviews[0];
+  const problem = activeReview.problems;
+
+  return (
+    <div className="w-full h-full bg-[#fdf8e1] overflow-y-auto custom-scrollbar p-6 flex flex-col">
+      <div className="flex-1 flex flex-col">
+        {/* Custom Override Header Banner */}
+        {overrideProblemId && (
+          <div className="p-3 mb-5 border-[3px] border-ink-black bg-yellow-100 flex flex-col sm:flex-row gap-3 justify-between items-center text-xs font-arcade text-ink-black shadow-[3px_3px_0px_0px_rgba(30,41,59,1)]">
+            <span className="flex items-center gap-2 font-bold">
+              <AlertTriangle className="w-4 h-4 text-amber-600 shrink-0" />
+              OVERRIDE: SELECTED MAP PROBLEM
+            </span>
+            <button
+              onClick={onClearOverride}
+              className="bg-white hover:bg-slate-100 text-ink-black font-bold px-3 py-1.5 border-[3px] border-ink-black shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none transition-all text-[8px] uppercase tracking-wide cursor-pointer shrink-0"
+            >
+              Exit Override Mode
+            </button>
+          </div>
+        )}
+
+        {/* Problem Stats Header Card */}
+        <div className="mb-6 bg-paper-white border-[3px] border-ink-black p-5 relative overflow-hidden gadget-shadow shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)]">
+          <div className="absolute top-0 left-0 right-0 h-[5px] bg-gradient-to-r from-primary via-[#ffcc00] to-highlight-pink" />
+          
+          <div className="flex justify-between items-start gap-4">
+            <div>
+              <div className="flex flex-wrap items-center gap-2 font-arcade text-[8px] tracking-wide text-trash-gray font-bold">
+                <span className="px-1.5 py-0.5 bg-white border-2 border-ink-black">BOX {activeReview.box_level}</span>
+                <span>•</span>
+                <span>CORRECT: {activeReview.times_correct}/{activeReview.total_attempts}</span>
+                <span>•</span>
+                <span>PATTERN: {problem.pattern}</span>
+              </div>
+              <h2 className="text-xl md:text-2xl font-extrabold text-ink-black tracking-tight mt-2 font-headline-md leading-tight">{problem.name}</h2>
+            </div>
+            
+            <span className={`text-[10px] font-arcade font-bold px-3 py-1 border-[3px] border-ink-black shadow-[3px_3px_0px_0px_rgba(30,41,59,1)] shrink-0 ${
+              problem.difficulty === 'Easy' ? 'bg-green-500 text-white' :
+              problem.difficulty === 'Medium' ? 'bg-orange-500 text-white' :
+              'bg-red-500 text-white'
+            }`}>
+              {problem.difficulty.toUpperCase()}
+            </span>
+          </div>
+
+          {problem.description && (
+            <div className="mt-4 p-4 bg-slate-50 border-[3px] border-ink-black font-sans text-xs text-slate-800 leading-relaxed max-h-48 overflow-y-auto custom-scrollbar">
+              <div className="text-[9px] font-arcade text-slate-400 uppercase mb-2 font-bold">Problem Description</div>
+              <div className="font-semibold space-y-1">
+                {problem.description.split('\n').map((line: string, i: number) => (
+                  <p key={i} className="m-0 leading-relaxed whitespace-pre-wrap">{line}</p>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-5 border-t-[3px] border-dashed border-ink-black pt-4 text-xs font-bold text-ink-black">
+            <div>
+              <span className="text-[8px] font-arcade text-trash-gray block uppercase tracking-wider">Optimal Time</span>
+              <code className="bg-[#1E293B] text-[#4ADE80] font-code-mono px-2 py-0.5 border border-ink-black mt-1 inline-block text-xs">{problem.optimal_time}</code>
+            </div>
+            <div>
+              <span className="text-[8px] font-arcade text-trash-gray block uppercase tracking-wider">Optimal Space</span>
+              <code className="bg-[#1E293B] text-[#4ADE80] font-code-mono px-2 py-0.5 border border-ink-black mt-1 inline-block text-xs">{problem.optimal_space}</code>
+            </div>
+            <div>
+              <span className="text-[8px] font-arcade text-trash-gray block uppercase tracking-wider">Doc Link</span>
+              <a
+                href={problem.google_doc_url}
+                target="_blank"
+                rel="noreferrer"
+                className="flex items-center gap-1.5 text-primary hover:underline mt-1 inline-flex font-headline-md font-bold"
+              >
+                Google Doc
+                <ExternalLink className="w-3.5 h-3.5" />
+              </a>
+            </div>
+            <div>
+              <span className="text-[8px] font-arcade text-trash-gray block uppercase tracking-wider">Next Due</span>
+              <span className="text-xs text-ink-black block mt-2 font-code-mono">
+                {new Date(activeReview.next_review).toLocaleDateString()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Reference Code Expander (Chunky details element from code.html style) */}
+        <details className="mb-6 group border-[3px] border-ink-black bg-white shadow-[4px_4px_0px_0px_rgba(30,41,59,1)]">
+          <summary 
+            onClick={() => setShowRefCode(!showRefCode)}
+            className="font-arcade text-[10px] p-3 cursor-pointer flex justify-between items-center outline-none hover:bg-secondary-container transition-colors select-none font-bold"
+          >
+            <span className="flex items-center gap-2">
+              <Code className="w-4 h-4 text-primary" />
+              {showRefCode ? 'HIDE REFERENCE CODE' : 'SHOW REFERENCE CODE'}
+            </span>
+            <ChevronDown className="w-4 h-4 group-open:rotate-180 transition-transform" />
+          </summary>
+          <div className="p-4 border-t-[3px] border-ink-black bg-[#1E293B] text-paper-white font-code-mono text-xs shadow-[inset_4px_4px_0px_rgba(0,0,0,0.5)] overflow-x-auto">
+            <pre className="font-mono text-xs leading-relaxed select-all text-[#4ADE80]">
+              <code>{problem.reference_code || '# No reference code found for this problem'}</code>
+            </pre>
+            
+            {problem.reference_code && (
+              <div className="pt-4 mt-4 border-t border-slate-700 flex flex-col gap-4">
+                <button
+                  onClick={handleExplainCode}
+                  disabled={explainLoading}
+                  className="w-fit bg-white hover:bg-slate-100 border-[3px] border-ink-black text-ink-black font-bold px-4 py-2 text-xs flex items-center gap-2 transition-all cursor-pointer disabled:opacity-50 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:translate-y-0.5 active:shadow-none"
+                >
+                  {explainLoading ? (
+                    <>
+                      <RefreshCw className="w-3.5 h-3.5 animate-spin text-primary" />
+                      Generating Explanation...
+                    </>
+                  ) : (
+                    <>
+                      <span>💡 Explain Reference Code</span>
+                    </>
+                  )}
+                </button>
+
+                {/* Explain Error */}
+                {explainError && (
+                  <div className="p-3 border-2 border-red-500 bg-red-100 text-error text-xs font-semibold">
+                    {explainError}
+                  </div>
+                )}
+
+                {/* Explanation display */}
+                {explanationText && (
+                  <div className="bg-paper-white border-[3px] border-ink-black p-4 text-ink-black max-h-80 overflow-y-auto space-y-3 custom-scrollbar shadow-[inset_2px_2px_0px_rgba(0,0,0,0.05)]">
+                    <h4 className="text-[10px] font-arcade font-bold text-primary mb-1 flex items-center gap-1.5 uppercase">
+                      <Sparkles className="w-3.5 h-3.5" />
+                      Code Breakdown
+                    </h4>
+                    <div className="border-t-2 border-dashed border-ink-black pt-2 font-sans font-semibold">
+                      {parseMarkdown(explanationText)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </details>
+
+        {/* Interactive Tabs */}
+        <div className="mb-6 flex-1 flex flex-col">
+          <div className="flex gap-2 mb-4 font-arcade text-[10px]">
+            <button
+              onClick={() => setActiveTab('ai')}
+              className={`px-4 py-2 border-[3px] border-ink-black cursor-pointer outline-none transition-all shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] hover:bg-slate-100 ${
+                activeTab === 'ai'
+                  ? 'bg-[#c0e8ff] translate-y-1 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] font-bold'
+                  : 'bg-white text-trash-gray'
+              }`}
+            >
+              AI GEMINI EVALUATION
+            </button>
+            <button
+              onClick={() => setActiveTab('offline')}
+              className={`px-4 py-2 border-[3px] border-ink-black cursor-pointer outline-none transition-all shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] hover:bg-slate-100 ${
+                activeTab === 'offline'
+                  ? 'bg-[#c0e8ff] translate-y-1 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] font-bold'
+                  : 'bg-white text-trash-gray'
+              }`}
+            >
+              OFFLINE SELF-GRADE
+            </button>
+          </div>
+
+          {/* Tab Content Box */}
+          <div className="border-[3px] border-ink-black bg-white p-5 shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] flex-1 flex flex-col">
+            {activeTab === 'ai' ? (
+              <div className="flex-1 flex flex-col space-y-4">
+                <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+                  <label className="block text-[9px] font-arcade font-bold text-trash-gray">
+                    PASTE YOUR SOLUTION CODE FROM MEMORY:
+                  </label>
+                  
+                  <label className="inline-flex items-center gap-2 cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      checked={isAutocompleteEnabled}
+                      onChange={(e) => {
+                        setIsAutocompleteEnabled(e.target.checked);
+                        localStorage.setItem('isAutocompleteEnabled', String(e.target.checked));
+                      }}
+                      className="sr-only peer"
+                    />
+                    <div className="relative w-8 h-4 bg-slate-300 border border-ink-black rounded-full peer peer-checked:bg-grass-green transition-all after:content-[''] after:absolute after:top-[1px] after:left-[2px] after:bg-white after:border after:border-ink-black after:rounded-full after:h-2.5 after:w-2.5 after:transition-all peer-checked:after:translate-x-3.5"></div>
+                    <span className="text-[8px] font-arcade font-bold text-trash-gray peer-checked:text-ink-black transition-colors">
+                      🤖 AUTOCOMPLETE
+                    </span>
+                  </label>
+                </div>
+
+                <div className="flex-1 min-h-[220px] flex flex-col">
+                  <CodeMirror
+                    value={code}
+                    onChange={(value) => setCode(value)}
+                    placeholder="def solve(nums):&#10;    # Write code here..."
+                    height="100%"
+                    theme="dark"
+                    extensions={[python()]}
+                    basicSetup={{
+                      autocompletion: isAutocompleteEnabled,
+                      lineNumbers: true,
+                      foldGutter: true,
+                      dropCursor: true,
+                      allowMultipleSelections: true,
+                      indentOnInput: true,
+                      bracketMatching: true,
+                      closeBrackets: true,
+                      rectangularSelection: true,
+                      crosshairCursor: true,
+                      highlightActiveLine: true,
+                      highlightSelectionMatches: true,
+                      closeBracketsKeymap: true,
+                      defaultKeymap: true,
+                      searchKeymap: true,
+                      historyKeymap: true,
+                      foldKeymap: true,
+                      completionKeymap: true,
+                      lintKeymap: true,
+                    }}
+                    className="w-full h-full flex-1 min-h-[200px]"
+                  />
+                </div>
+
+                <div className="flex flex-col sm:flex-row justify-between items-center gap-4 pt-2">
+                  <span className="text-[10px] text-trash-gray italic max-w-sm font-semibold leading-normal">
+                    Gemini will inspect your algorithm for logical correctness, time/space limits, and edge cases.
+                  </span>
+                  
+                  <button
+                    onClick={handleAiEvaluation}
+                    disabled={aiLoading || !code.trim()}
+                    className="w-full sm:w-auto bg-[#a855f7] hover:bg-[#9333ea] text-white font-arcade text-[10px] py-3 px-6 border-[3px] border-ink-black shadow-[4px_4px_0px_0px_rgba(30,41,59,1)] active:translate-y-1 active:translate-x-1 active:shadow-none transition-all cursor-pointer font-bold select-none shrink-0"
+                  >
+                    {aiLoading ? (
+                      <span className="flex items-center gap-2 justify-center">
+                        <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                        RUNNING EVAL...
+                      </span>
+                    ) : (
+                      'SUBMIT FOR AI REVIEW'
+                    )}
+                  </button>
+                </div>
+
+                {/* AI Review Loader Panel */}
+                {aiLoading && (
+                  <div className="p-6 border-[3px] border-ink-black bg-[#fdf8e1] gadget-shadow flex flex-col items-center justify-center gap-3 animate-pulse">
+                    <RefreshCw className="w-7 h-7 text-primary animate-spin" />
+                    <div className="text-center">
+                      <h4 className="text-xs font-bold text-ink-black font-arcade">AI COMPILING SUBMISSION</h4>
+                      <p className="text-[9px] text-trash-gray mt-1 font-bold">Verifying constraints, checking edge cases, evaluating big-O complexity...</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* AI Error display */}
+                {aiError && (
+                  <div className="p-4 border-[3px] border-red-500 bg-red-100 text-error text-xs font-semibold shadow-[2px_2px_0px_0px_rgba(30,41,59,1)]">
+                    {aiError}
+                  </div>
+                )}
+
+                {/* AI Result details */}
+                {aiResult && (
+                  <div className="border-[3px] border-ink-black bg-[#fdf8e1] p-5 gadget-shadow space-y-4">
+                    <div className="flex items-center gap-3 pb-3 border-b-2 border-dashed border-ink-black">
+                      <div className={`w-10 h-10 border-[3px] border-ink-black flex items-center justify-center gadget-shadow shrink-0 ${
+                        aiResult.is_correct 
+                          ? 'bg-grass-green text-ink-black'
+                          : 'bg-highlight-pink text-white'
+                      }`}>
+                        <Award className="w-5 h-5" />
+                      </div>
+                      <div>
+                        <h3 className="text-xs font-bold font-arcade text-ink-black">VERDICT RESULT</h3>
+                        <p className="text-[9px] text-trash-gray font-bold uppercase mt-1">
+                          {aiResult.is_correct ? 'Logical verification passed successfully.' : 'Logical verification failed.'}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="p-3 bg-white border-[3px] border-ink-black shadow-[2px_2px_0px_0px_rgba(30,41,59,1)]">
+                        <span className="text-[8px] font-arcade text-trash-gray block uppercase">Detected Time</span>
+                        <p className="font-bold text-xs text-ink-black mt-1 font-code-mono">{aiResult.detected_complexity?.time || 'N/A'}</p>
+                      </div>
+                      <div className="p-3 bg-white border-[3px] border-ink-black shadow-[2px_2px_0px_0px_rgba(30,41,59,1)]">
+                        <span className="text-[8px] font-arcade text-trash-gray block uppercase">Detected Space</span>
+                        <p className="font-bold text-xs text-ink-black mt-1 font-code-mono">{aiResult.detected_complexity?.space || 'N/A'}</p>
+                      </div>
+                    </div>
+
+                    {aiResult.bugs && aiResult.bugs.length > 0 && (
+                      <div className="space-y-1.5">
+                        <span className="text-[8px] font-arcade text-trash-gray uppercase block font-bold">Traceback / Edge Case Failures:</span>
+                        <ul className="list-disc list-inside text-xs text-ink-black space-y-1 pl-1 font-semibold">
+                          {aiResult.bugs.map((bug: string, idx: number) => (
+                            <li key={idx} className="leading-relaxed">{bug}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    {aiResult.key_suggestion && (
+                      <div className="p-3 bg-yellow-50 border-[3px] border-ink-black rounded-lg space-y-1">
+                        <span className="text-[8px] font-arcade text-[#d97706] uppercase font-bold block">Refactoring Tip</span>
+                        <p className="text-xs text-ink-black font-semibold leading-relaxed m-0">{aiResult.key_suggestion}</p>
+                      </div>
+                    )}
+
+                    <div className="pt-2 border-t-2 border-dashed border-ink-black">
+                      <p className="text-xs text-ink-black font-bold">
+                        🤖 AI SUGGESTION: {aiResult.is_correct ? (
+                          <span className="text-emerald-600 font-bold">Click "Smashed It" to increment box level!</span>
+                        ) : (
+                          <span className="text-red-500 font-bold">Click "Forgot" to reset back to Box 1.</span>
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="flex-1 font-sans text-xs text-ink-black leading-relaxed space-y-4 font-semibold">
+                <h3 className="font-bold text-sm font-arcade uppercase m-0">Offline grading instructions:</h3>
+                <ol className="list-decimal list-inside space-y-2.5">
+                  <li>Expand the <span className="font-bold text-primary">"Show Reference Code"</span> block above.</li>
+                  <li>Compare your logic or mental draft with the reference algorithm.</li>
+                  <li>Verify if you correctly recalled the patterns, Big-O limit, and transitions.</li>
+                  <li>Score yourself using the buttons below:</li>
+                </ol>
+                <div className="border-t-2 border-dashed border-ink-black pt-4 font-arcade text-[8px] leading-loose text-trash-gray space-y-2 font-bold uppercase">
+                  <div>🔴 <span className="text-red-500">Forgot</span>: resets box back to Box 1.</div>
+                  <div>🟡 <span className="text-amber-500">Mixed</span>: keeps the current Box level.</div>
+                  <div>🟢 <span className="text-emerald-500">Smashed It</span>: increments box level by 1.</div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* SRS Completion Logging Buttons */}
+        <div className="flex gap-4 mt-auto shrink-0 pt-4 border-t-[3px] border-ink-black border-dashed">
+          <button
+            onClick={() => handleGrade('Incorrect')}
+            disabled={submitting}
+            className="flex-1 bg-[#ff1a1a] border-[4px] border-ink-black rounded-xl py-4 font-window-title text-base md:text-lg text-white font-bold arcade-btn cursor-pointer disabled:opacity-50"
+          >
+            Forgot
+          </button>
+          <button
+            onClick={() => handleGrade('Mixed')}
+            disabled={submitting}
+            className="flex-1 bg-[#ffcc00] border-[4px] border-ink-black rounded-xl py-4 font-window-title text-base md:text-lg text-ink-black font-bold arcade-btn cursor-pointer disabled:opacity-50"
+          >
+            Mixed
+          </button>
+          <button
+            onClick={() => handleGrade('Correct')}
+            disabled={submitting}
+            className="flex-1 bg-[#39ff14] border-[4px] border-ink-black rounded-xl py-4 font-window-title text-base md:text-lg text-ink-black font-bold arcade-btn cursor-pointer disabled:opacity-50"
+          >
+            Smashed It
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Simple Markdown Parser Helpers
+function renderInlineMarkdown(text: string) {
+  const regex = /(\*\*.*?\*\*|`.*?`)/g;
+  const tokens = text.split(regex);
+  
+  return tokens.map((token, index) => {
+    if (token.startsWith('**') && token.endsWith('**')) {
+      return (
+        <strong key={index} className="text-ink-black font-bold">
+          {token.slice(2, -2)}
+        </strong>
+      );
+    }
+    if (token.startsWith('`') && token.endsWith('`')) {
+      return (
+        <code key={index} className="bg-[#1E293B] text-[#4ADE80] px-1.5 py-0.5 rounded text-[11px] font-mono border border-ink-black">
+          {token.slice(1, -1)}
+        </code>
+      );
+    }
+    return token;
+  });
+}
+
+function parseMarkdown(text: string) {
+  const parts = text.split(/(```[\s\S]*?```)/g);
+  return parts.map((part, index) => {
+    if (part.startsWith('```')) {
+      const lines = part.split('\n');
+      const code = lines.slice(1, -1).join('\n');
+      return (
+        <pre key={index} className="bg-[#1E293B] p-3 rounded-lg border border-ink-black overflow-x-auto font-mono text-[11px] text-[#4ADE80] my-2">
+          <code>{code}</code>
+        </pre>
+      );
+    }
+    
+    const lines = part.split('\n');
+    return lines.map((line, lineIndex) => {
+      const key = `${index}-${lineIndex}`;
+      if (line.startsWith('### ')) {
+        return <h3 key={key} className="text-xs font-bold text-ink-black mt-3 mb-1.5 uppercase font-arcade">{line.substring(4)}</h3>;
+      }
+      if (line.startsWith('## ')) {
+        return <h2 key={key} className="text-sm font-bold text-ink-black mt-4 mb-2 font-headline-md">{line.substring(3)}</h2>;
+      }
+      if (line.startsWith('# ')) {
+        return <h1 key={key} className="text-base font-extrabold text-ink-black mt-5 mb-2 font-headline-md">{line.substring(2)}</h1>;
+      }
+      if (line.trim().startsWith('- ') || line.trim().startsWith('* ')) {
+        const content = line.trim().substring(2);
+        return (
+          <div key={key} className="flex items-start gap-1.5 pl-2 my-1">
+            <span className="text-primary mt-1">•</span>
+            <span className="text-ink-black text-xs leading-relaxed">{renderInlineMarkdown(content)}</span>
+          </div>
+        );
+      }
+      if (line.trim() === '') {
+        return <div key={key} className="h-2" />;
+      }
+      return <p key={key} className="text-ink-black text-xs leading-relaxed my-1">{renderInlineMarkdown(line)}</p>;
+    });
+  });
+}

algospaced-ui/src/components/Sidebar.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '../supabaseClient';
+import { BookOpen, Map, Flame, LogOut, RefreshCw, Trophy, User } from 'lucide-react';
+
+interface SidebarProps {
+  activeTab: 'queue' | 'journey';
+  setActiveTab: (tab: 'queue' | 'journey') => void;
+  user: any;
+}
+
+export default function Sidebar({ activeTab, setActiveTab, user }: SidebarProps) {
+  const [streak, setStreak] = useState<any>(null);
+  const [syncing, setSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<string | null>(null);
+
+  const fetchStreak = async () => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/streak`, {
+        headers: {
+          'Authorization': `Bearer ${session.access_token}`
+        }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setStreak(data);
+      }
+    } catch (err) {
+      console.error('Error fetching streak:', err);
+    }
+  };
+
+  useEffect(() => {
+    fetchStreak();
+  }, [user]);
+
+  const handleSync = async () => {
+    setSyncing(true);
+    setSyncResult(null);
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) return;
+
+      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/sync`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${session.access_token}`
+        }
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setSyncResult(data.message || 'Sync complete!');
+        // Refresh streak and state
+        fetchStreak();
+      } else {
+        setSyncResult('Sync failed. Check backend logs.');
+      }
+    } catch (err) {
+      setSyncResult('Sync failed. Server unreachable.');
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+  };
+
+  return (
+    <aside className="w-80 h-screen bg-bg-sidebar border-r border-slate-900 flex flex-col justify-between p-6 shrink-0 z-10 relative">
+      <div className="space-y-8">
+        {/* Brand */}
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-purple to-accent-pink flex items-center justify-center shadow-[0_0_15px_rgba(157,78,221,0.3)]">
+            <Trophy className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tight text-white m-0">AlgoSpaced</h1>
+            <span className="text-xs text-slate-500">DSA Repetition</span>
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <nav className="space-y-2">
+          <button
+            onClick={() => setActiveTab('queue')}
+            className={`w-full flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
+              activeTab === 'queue'
+                ? 'bg-primary-purple text-white shadow-[0_0_15px_rgba(157,78,221,0.25)]'
+                : 'text-slate-400 hover:text-white hover:bg-slate-950'
+            }`}
+          >
+            <BookOpen className="w-5 h-5" />
+            Daily Review Queue
+          </button>
+          <button
+            onClick={() => setActiveTab('journey')}
+            className={`w-full flex items-center gap-3.5 px-4 py-3 rounded-xl text-sm font-semibold tracking-wide transition-all duration-200 cursor-pointer ${
+              activeTab === 'journey'
+                ? 'bg-primary-purple text-white shadow-[0_0_15px_rgba(157,78,221,0.25)]'
+                : 'text-slate-400 hover:text-white hover:bg-slate-950'
+            }`}
+          >
+            <Map className="w-5 h-5" />
+            Journey Path
+          </button>
+        </nav>
+
+        {/* Streak Component */}
+        <div className="glass-panel rounded-2xl p-5 border border-slate-900">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-2 rounded-lg bg-orange-500/10 text-orange-400">
+              <Flame className="w-5 h-5" />
+            </div>
+            <div>
+              <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Active Streak</h3>
+              <span className="text-2xl font-bold text-white tracking-tight">{streak?.current_streak ?? 0} days</span>
+            </div>
+          </div>
+          <div className="flex justify-between items-center text-xs text-slate-500 border-t border-slate-900/60 pt-3">
+            <span>Longest: {streak?.longest_streak ?? 0} days</span>
+            {streak?.last_active_date && (
+              <span>Last active: {new Date(streak.last_active_date).toLocaleDateString()}</span>
+            )}
+          </div>
+        </div>
+
+        {/* Sync Google Drive */}
+        <div className="space-y-2">
+          <button
+            onClick={handleSync}
+            disabled={syncing}
+            className="w-full bg-slate-950 hover:bg-slate-900 text-slate-300 font-semibold py-3 px-4 rounded-xl flex items-center justify-center gap-2 border border-slate-800 transition-all text-sm cursor-pointer disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 text-accent-cyan ${syncing ? 'animate-spin' : ''}`} />
+            {syncing ? 'Syncing...' : 'Sync Google Drive'}
+          </button>
+          {syncResult && (
+            <p className="text-[11px] text-center text-accent-cyan leading-normal max-h-16 overflow-y-auto px-2">
+              {syncResult}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* User Session Info / Sign Out */}
+      <div className="border-t border-slate-900 pt-5 space-y-4">
+        <div className="flex items-center gap-3 px-2">
+          <div className="w-8 h-8 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400">
+            <User className="w-4 h-4" />
+          </div>
+          <div className="overflow-hidden">
+            <p className="text-xs font-semibold text-white truncate m-0">{user.email}</p>
+            <p className="text-[10px] text-slate-500 truncate m-0">Verified User</p>
+          </div>
+        </div>
+        <button
+          onClick={handleSignOut}
+          className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg text-xs font-semibold text-rose-400 hover:text-rose-300 bg-rose-500/5 hover:bg-rose-500/10 transition-all cursor-pointer"
+        >
+          <LogOut className="w-4 h-4" />
+          Sign Out
+        </button>
+      </div>
+    </aside>
+  );
+}

algospaced-ui/src/components/TerminalEmulator.tsx

@@ -0,0 +1,370 @@
+import { useState, useRef, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+
+interface TerminalEmulatorProps {
+  onOpenWindow: (windowId: string) => void;
+  onClose: () => void;
+}
+
+// Custom helper to format result rows as a clean ASCII text table
+function formatAsciiTable(columns: string[], rows: any[]): string[] {
+  if (columns.length === 0 || rows.length === 0) {
+    return ['Empty result set.'];
+  }
+  
+  // Calculate column widths
+  const widths: Record<string, number> = {};
+  columns.forEach(col => {
+    widths[col] = col.length;
+  });
+  
+  rows.forEach(row => {
+    columns.forEach(col => {
+      const valStr = row[col] !== null && row[col] !== undefined ? String(row[col]) : 'NULL';
+      if (valStr.length > (widths[col] || 0)) {
+        widths[col] = valStr.length;
+      }
+    });
+  });
+
+  // Build grid components
+  const separator = '+' + columns.map(col => '-'.repeat(widths[col] + 2)).join('+') + '+';
+  const header = '|' + columns.map(col => ` ${col.padEnd(widths[col])} `).join('|') + '|';
+  
+  const lines: string[] = [separator, header, separator];
+  
+  rows.forEach(row => {
+    const rowLine = '|' + columns.map(col => {
+      const valStr = row[col] !== null && row[col] !== undefined ? String(row[col]) : 'NULL';
+      return ` ${valStr.padEnd(widths[col])} `;
+    }).join('|') + '|';
+    lines.push(rowLine);
+  });
+  
+  lines.push(separator);
+  return lines;
+}
+
+export default function TerminalEmulator({ onOpenWindow, onClose }: TerminalEmulatorProps) {
+  const [history, setHistory] = useState<string[]>([
+    'AlgoSpaced OS [Version 1.0.24]',
+    '(c) Retro Arcade Systems. All rights reserved.',
+    '',
+    'Type "help" for a list of available commands.',
+    ''
+  ]);
+  const [input, setInput] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [history]);
+
+  // Tokenize inputs while respecting single/double quoted strings
+  const tokenize = (cmd: string): { command: string; args: string[] } => {
+    const trimmed = cmd.trim();
+    const regex = /[^\s"']+|"([^"]*)"|'([^']*)'/g;
+    const args: string[] = [];
+    let match;
+    while ((match = regex.exec(trimmed)) !== null) {
+      args.push(match[1] || match[2] || match[0]);
+    }
+    return {
+      command: args[0]?.toLowerCase() || '',
+      args: args.slice(1)
+    };
+  };
+
+  const handleCommand = async (cmd: string) => {
+    const trimmed = cmd.trim();
+    if (trimmed === '') {
+      setHistory(prev => [...prev, '$']);
+      return;
+    }
+
+    const { command, args } = tokenize(trimmed);
+    let output: string[] = [`$ ${trimmed}`];
+
+    switch (command) {
+      case 'help':
+        output.push(
+          'Available commands:',
+          '  help         - Display this documentation',
+          '  streak       - Retrieve your active Leitner combo streak metrics',
+          '  sync         - Run google drive file import sync',
+          '  reviews      - Fetch Leetcode numbers due for daily review',
+          '  python play  - Open Daily Python Challenge window',
+          '  db init      - Initialize SQL session and open playground window',
+          '  db status    - Check active SQL session objectives',
+          '  db query [Q] - Execute query and format results inside CLI',
+          '  open         - Open window (usage: open queue | journey | system)',
+          '  clear        - Clear terminal buffer',
+          '  exit         - Close the terminal shell'
+        );
+        break;
+      case 'clear':
+        setHistory([]);
+        return;
+      case 'exit':
+        output.push('Closing terminal session...');
+        setTimeout(() => {
+          onClose();
+        }, 500);
+        break;
+      case 'open': {
+        const target = args[0]?.toLowerCase();
+        if (target === 'queue' || target === 'daily' || target === 'reviews') {
+          onOpenWindow('queue');
+          output.push('Launching Daily Queue window...');
+        } else if (target === 'journey' || target === 'path' || target === 'map') {
+          onOpenWindow('journey');
+          output.push('Launching Journey Path window...');
+        } else if (target === 'system' || target === 'computer' || target === 'sys') {
+          onOpenWindow('computer');
+          output.push('Launching System Information window...');
+        } else if (target === 'python' || target === 'challenge') {
+          onOpenWindow('python');
+          output.push('Launching Daily Python Challenge window...');
+        } else if (target === 'db' || target === 'mysql' || target === 'sql') {
+          onOpenWindow('mysql');
+          output.push('Launching MySQL Playground window...');
+        } else {
+          output.push('Usage: open [queue | journey | system | python | db]');
+        }
+        break;
+      }
+      case 'streak':
+        output.push('Connecting to streak.sys database...');
+        try {
+          const { data: { session } } = await supabase.auth.getSession();
+          if (!session) {
+            output.push('Error: Unauthenticated session');
+            break;
+          }
+          const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/streak`, {
+            headers: { 'Authorization': `Bearer ${session.access_token}` }
+          });
+          if (res.ok) {
+            const data = await res.json();
+            output.push(
+              'Database Response:',
+              `  Active Streak:  ${data.current_streak} days`,
+              `  Max Combo:      ${data.longest_streak} days`,
+              `  Last Activity:  ${data.last_active_date ? new Date(data.last_active_date).toLocaleDateString() : 'N/A'}`
+            );
+          } else {
+            output.push('Error: Failed to query database endpoint');
+          }
+        } catch {
+          output.push('Error: Connection timed out');
+        }
+        break;
+      case 'sync':
+        output.push('Initializing Google Drive synchronization sync.exe...');
+        try {
+          const { data: { session } } = await supabase.auth.getSession();
+          if (!session) {
+            output.push('Error: Unauthenticated session');
+            break;
+          }
+          const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/sync`, {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${session.access_token}` }
+          });
+          if (res.ok) {
+            const data = await res.json();
+            output.push(`Sync Result: ${data.message}`);
+          } else {
+            output.push('Error: Sync command failed at backend host');
+          }
+        } catch {
+          output.push('Error: Cloud host unreachable');
+        }
+        break;
+      case 'reviews':
+        output.push('Querying leitner_cards partition...');
+        try {
+          const { data: { session } } = await supabase.auth.getSession();
+          if (!session) {
+            output.push('Error: Unauthenticated session');
+            break;
+          }
+          const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/reviews/due`, {
+            headers: { 'Authorization': `Bearer ${session.access_token}` }
+          });
+          if (res.ok) {
+            const data = await res.json();
+            if (data.length === 0) {
+              output.push('Queue status: CLEAR! 0 cards due.');
+            } else {
+              output.push(
+                `Queue status: ${data.length} card(s) due:`,
+                ...data.map((r: any) => `  - LeetCode ${r.problems?.problem_number}: ${r.problems?.name} (Box ${r.box_level})`)
+              );
+            }
+          } else {
+            output.push('Error: Failed to fetch due items');
+          }
+        } catch {
+          output.push('Error: Database connection lost');
+        }
+        break;
+
+      case 'python': {
+        const subCommand = args[0]?.toLowerCase();
+        if (subCommand === 'play') {
+          output.push('Launching Daily Python Challenge window...');
+          onOpenWindow('python');
+        } else {
+          output.push('Usage: python play');
+        }
+        break;
+      }
+
+      case 'db': {
+        const subCommand = args[0]?.toLowerCase();
+        if (subCommand === 'init') {
+          output.push('Initializing MySQL Playground and launching window...');
+          onOpenWindow('mysql');
+          try {
+            const { data: { session } } = await supabase.auth.getSession();
+            if (!session) {
+              output.push('Error: Unauthenticated session');
+              break;
+            }
+            const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/init`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${session.access_token}` }
+            });
+            if (res.ok) {
+              const data = await res.json();
+              output.push(
+                `Database Session Created: "${data.title}"`,
+                `Objective: ${data.objective}`
+              );
+            } else {
+              output.push('Error: Failed to initialize DB session on backend host.');
+            }
+          } catch {
+            output.push('Error: Server connection lost.');
+          }
+        } else if (subCommand === 'status') {
+          output.push('Fetching SQL playground status...');
+          onOpenWindow('mysql');
+          try {
+            const { data: { session } } = await supabase.auth.getSession();
+            if (!session) {
+              output.push('Error: Unauthenticated session');
+              break;
+            }
+            const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/status`, {
+              headers: { 'Authorization': `Bearer ${session.access_token}` }
+            });
+            if (res.ok) {
+              const data = await res.json();
+              if (data.active) {
+                output.push(
+                  `Active SQL Challenge: "${data.title}"`,
+                  `Objective: ${data.objective}`,
+                  `Status: ${data.completed ? 'COMPLETED (Done)' : 'IN PROGRESS'}`
+                );
+              } else {
+                output.push(data.message);
+              }
+            } else {
+              output.push('Error: Failed to fetch DB status.');
+            }
+          } catch {
+            output.push('Error: Server timed out.');
+          }
+        } else if (subCommand === 'query') {
+          // Parse SQL query which resides in the remaining input
+          const sqlIdx = trimmed.toLowerCase().indexOf('query');
+          const sql = sqlIdx !== -1 ? trimmed.substring(sqlIdx + 5).trim().replace(/^["']|["']$/g, '') : '';
+          
+          if (!sql) {
+            output.push('Usage: db query [SQL Statement] - Remember to wrap query in double quotes.');
+            break;
+          }
+          
+          output.push(`Running query: ${sql}`);
+          onOpenWindow('mysql');
+          
+          try {
+            const { data: { session } } = await supabase.auth.getSession();
+            if (!session) {
+              output.push('Error: Unauthenticated session');
+              break;
+            }
+            const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/challenges/mysql/query`, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${session.access_token}`
+              },
+              body: JSON.stringify({ query: sql })
+            });
+            if (res.ok) {
+              const data = await res.json();
+              if (data.success) {
+                output.push(
+                  `Query OK. Affected ${data.rows_affected} rows.`,
+                  ...formatAsciiTable(data.columns, data.rows)
+                );
+                if (data.is_correct) {
+                  output.push('OBJECTIVE ACHIEVED! Congratulations.');
+                }
+              } else {
+                output.push(`SQL Error: ${data.error}`);
+              }
+            } else {
+              output.push('Error: SQL execution failed.');
+            }
+          } catch {
+            output.push('Error: Database server unreachable.');
+          }
+        } else {
+          output.push('Usage: db init | db status | db query "SELECT..."');
+        }
+        break;
+      }
+
+      default:
+        output.push(`Command not recognized: "${command}". Type "help" for a list of available actions.`);
+    }
+
+    setHistory(prev => [...prev, ...output, '']);
+  };
+
+  return (
+    <div className="w-full h-full bg-[#1E293B] text-[#4ADE80] font-code-mono p-4 flex flex-col overflow-hidden text-xs md:text-sm select-text">
+      <div ref={containerRef} className="flex-1 overflow-y-auto mb-2 custom-scrollbar space-y-1">
+        {history.map((line, idx) => (
+          <div key={idx} className="whitespace-pre-wrap leading-relaxed min-h-[1.2em]">
+            {line}
+          </div>
+        ))}
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleCommand(input);
+          setInput('');
+        }}
+        className="flex items-center gap-1.5 border-t border-slate-700 pt-2 shrink-0 select-none"
+      >
+        <span className="font-bold text-[#ffcc00]">$</span>
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          className="flex-1 bg-transparent text-[#4ADE80] outline-none border-none p-0 focus:ring-0 font-code-mono text-xs md:text-sm"
+          autoFocus
+          placeholder="Type command..."
+        />
+      </form>
+    </div>
+  );
+}

algospaced-ui/src/components/WindowShell.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface WindowShellProps {
+  id: string;
+  title: string;
+  isOpen: boolean;
+  isMinimized: boolean;
+  onClose: () => void;
+  onMinimize: () => void;
+  activeWindow: string;
+  setActiveWindow: (id: string) => void;
+  children: React.ReactNode;
+  icon?: string;
+  defaultWidth?: string;
+  defaultHeight?: string;
+  defaultX?: number;
+  defaultY?: number;
+  titleBarColor?: string;
+}
+
+export default function WindowShell({
+  id,
+  title,
+  isOpen,
+  isMinimized,
+  onClose,
+  onMinimize,
+  activeWindow,
+  setActiveWindow,
+  children,
+  icon = 'terminal',
+  defaultWidth = '700px',
+  defaultHeight = '600px',
+  defaultX,
+  defaultY,
+  titleBarColor = '#0ea5e9',
+}: WindowShellProps) {
+  // Helper to parse default dimensions (e.g. '700px') into integer values
+  const parseDimension = (val: string): number => {
+    const num = parseInt(val, 10);
+    return isNaN(num) ? 500 : num;
+  };
+
+  const [position, setPosition] = useState({ x: defaultX ?? 0, y: defaultY ?? 0 });
+  const [dimensions, setDimensions] = useState({
+    width: parseDimension(defaultWidth),
+    height: parseDimension(defaultHeight)
+  });
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const dragStart = useRef({ x: 0, y: 0 });
+  const resizeStart = useRef({ width: 0, height: 0, x: 0, y: 0 });
+  const windowRef = useRef<HTMLDivElement>(null);
+
+  const isActive = activeWindow === id;
+
+  useEffect(() => {
+    // If not set, randomize offset slightly to feel "tossed on the desk"
+    if (defaultX === undefined && defaultY === undefined) {
+      const randomX = Math.floor(Math.random() * 40) - 20;
+      const randomY = Math.floor(Math.random() * 40) - 20;
+      setPosition({ x: randomX, y: randomY });
+    }
+  }, [defaultX, defaultY]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // Only drag on left click and not on control buttons or resize handles
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    if (target.closest('.window-control-btn') || target.closest('.window-resize-handle')) return;
+
+    setActiveWindow(id);
+    setIsDragging(true);
+    dragStart.current = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    };
+    e.preventDefault();
+  };
+
+  const handleResizeMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    setActiveWindow(id);
+    setIsResizing(true);
+    resizeStart.current = {
+      width: dimensions.width,
+      height: dimensions.height,
+      x: e.clientX,
+      y: e.clientY
+    };
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isDragging) {
+        const newX = e.clientX - dragStart.current.x;
+        const newY = e.clientY - dragStart.current.y;
+        setPosition({ x: newX, y: newY });
+      } else if (isResizing) {
+        const deltaX = e.clientX - resizeStart.current.x;
+        const deltaY = e.clientY - resizeStart.current.y;
+        
+        // Enforce minimum dimensions (350x250 px)
+        const newWidth = Math.max(350, resizeStart.current.width + deltaX);
+        const newHeight = Math.max(250, resizeStart.current.height + deltaY);
+        
+        setDimensions({
+          width: newWidth,
+          height: newHeight
+        });
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      setIsResizing(false);
+    };
+
+    if (isDragging || isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging, isResizing]);
+
+  if (!isOpen || isMinimized) return null;
+
+  return (
+    <div
+      ref={windowRef}
+      onMouseDown={() => setActiveWindow(id)}
+      style={{
+        width: `${dimensions.width}px`,
+        height: `${dimensions.height}px`,
+        transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+        zIndex: isActive ? 40 : 30,
+      }}
+      className={`absolute top-1/2 left-1/2 max-w-[98vw] max-h-[90vh] bg-paper-white border-[4px] flex flex-col overflow-hidden window-shadow shadow-[inset_2px_2px_0px_rgba(255,255,255,0.8)] transition-all ${
+        isActive ? 'border-ink-black shadow-[8px_8px_0px_0px_rgba(30,41,59,1)]' : 'border-ink-black opacity-95 shadow-[4px_4px_0px_0px_rgba(30,41,59,1)]'
+      }`}
+    >
+      {/* Title Bar */}
+      <div
+        onMouseDown={handleMouseDown}
+        style={{ backgroundColor: titleBarColor }}
+        className="border-b-[4px] border-ink-black px-4 py-2 flex justify-between items-center text-white shrink-0 cursor-move select-none"
+      >
+        <div className="flex items-center gap-2">
+          {icon && (
+            <span className="material-symbols-outlined select-none" style={{ fontVariationSettings: "'FILL' 1" }}>
+              {icon}
+            </span>
+          )}
+          <span className="font-window-title text-sm md:text-base font-bold tracking-wide select-none">{title}</span>
+        </div>
+        <div className="flex gap-1.5">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onMinimize();
+            }}
+            className="window-control-btn w-7 h-7 bg-white text-ink-black border-[3px] border-ink-black flex items-center justify-center hover:bg-yellow-300 active:translate-y-0.5 active:translate-x-0.5 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer"
+          >
+            <span className="material-symbols-outlined text-[14px] font-bold">minimize</span>
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            className="window-control-btn w-7 h-7 bg-highlight-pink text-white border-[3px] border-ink-black flex items-center justify-center hover:bg-rose-600 active:translate-y-0.5 active:translate-x-0.5 shadow-[2px_2px_0px_0px_rgba(30,41,59,1)] active:shadow-none transition-all cursor-pointer"
+          >
+            <span className="material-symbols-outlined text-[14px] font-bold">close</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Window Content */}
+      <div className="flex-1 overflow-hidden relative bg-paper-white flex flex-col">
+        {children}
+      </div>
+
+      {/* Resize Handle */}
+      <div
+        onMouseDown={handleResizeMouseDown}
+        className="window-resize-handle absolute bottom-0 right-0 w-4 h-4 cursor-se-resize flex items-end justify-end p-0.5 select-none z-[50]"
+      >
+        <svg width="10" height="10" viewBox="0 0 10 10" className="text-ink-black opacity-60">
+          <line x1="8" y1="2" x2="2" y2="8" stroke="currentColor" strokeWidth="1.5" />
+          <line x1="8" y1="5" x2="5" y2="8" stroke="currentColor" strokeWidth="1.5" />
+        </svg>
+      </div>
+    </div>
+  );
+}

algospaced-ui/src/index.css

@@ -0,0 +1,147 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Be Vietnam Pro', system-ui, sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  
+  --font-arcade: 'Press Start 2P', monospace;
+  --font-headline-md: 'Bricolage Grotesque', sans-serif;
+  --font-body-base: 'Be Vietnam Pro', sans-serif;
+  --font-display-lg: 'Bricolage Grotesque', sans-serif;
+  --font-code-mono: 'Courier Prime', monospace;
+  --font-window-title: 'Bricolage Grotesque', sans-serif;
+  --font-icon-label: 'Press Start 2P', monospace;
+
+  --color-paper-white: #F9F8F3;
+  --color-ink-black: #1E293B;
+  --color-highlight-pink: #F472B6;
+  --color-grass-green: #4ADE80;
+  --color-trash-gray: #64748B;
+  
+  --color-primary-purple: #9d4edd;
+  --color-primary-purple-hover: #b5179e;
+  --color-accent-cyan: #4cc9f0;
+  --color-accent-pink: #f72585;
+
+  --borderRadius-DEFAULT: 0.25rem;
+  --borderRadius-lg: 0.5rem;
+  --borderRadius-xl: 0.75rem;
+  --borderRadius-full: 9999px;
+
+  --spacing-border-width: 3px;
+  --spacing-gutter-md: 16px;
+  --spacing-icon-grid-gap: 24px;
+  --spacing-window-padding: 20px;
+  --spacing-desktop-margin: 32px;
+}
+
+/* Base style resets */
+body {
+  background: linear-gradient(135deg, #0ea5e9 0%, #fde047 100%);
+  color: #1E293B;
+  font-family: 'Be Vietnam Pro', sans-serif;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  width: 100vw;
+}
+
+/* Custom Scrollbars - Retro & Chunky */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #F9F8F3;
+  border-left: 3px solid #1E293B;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #fde047;
+  border: 3px solid #1E293B;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #ffe24c;
+}
+
+/* Specific scrollbar styling for windows that scroll */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #F9F8F3;
+  border-left: 3px solid #1E293B;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #0ea5e9;
+  border: 3px solid #1E293B;
+}
+
+/* Retro Shadow Effects */
+.window-shadow {
+  box-shadow: 6px 6px 0px 0px rgba(30, 41, 59, 1);
+}
+
+.gadget-shadow {
+  box-shadow: 6px 6px 0px 0px rgba(30, 41, 59, 1);
+}
+
+/* Physical click effects */
+.arcade-btn {
+  box-shadow: 0px 6px 0px 0px rgba(30, 41, 59, 1), inset 0px 4px 0px 0px rgba(255,255,255,0.4);
+  transition: all 0.1s ease;
+}
+
+.arcade-btn:active {
+  box-shadow: 0px 0px 0px 0px rgba(30, 41, 59, 1), inset 0px 2px 0px 0px rgba(0,0,0,0.2);
+  transform: translateY(6px);
+}
+
+.icon-hover-shift {
+  transition: all 0.1s ease-in-out;
+}
+.icon-hover-shift:hover {
+  transform: translate(-2px, -2px);
+}
+.icon-hover-shift:active {
+  transform: translate(2px, 2px);
+}
+
+/* CodeMirror Custom Retro Styling */
+.cm-editor {
+  background-color: #1E293B !important;
+  color: #4ADE80 !important;
+  font-family: 'Courier Prime', monospace !important;
+  font-size: 13px !important;
+  outline: none !important;
+  border-radius: 0.5rem;
+  border: 3px solid #1E293B;
+}
+
+.cm-scroller {
+  font-family: inherit !important;
+}
+
+.cm-gutters {
+  background-color: #1E293B !important;
+  border-right: 3px solid #1E293B !important;
+  color: #64748B !important;
+}
+
+.cm-activeLineGutter {
+  background-color: rgba(74, 222, 128, 0.1) !important;
+  color: #4ADE80 !important;
+}
+
+.cm-activeLine {
+  background-color: rgba(74, 222, 128, 0.05) !important;
+}
+
+.cm-cursor {
+  border-left-color: #4ADE80 !important;
+}

algospaced-ui/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

algospaced-ui/src/supabaseClient.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL || '';
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY || '';
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);

algospaced-ui/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

algospaced-ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

algospaced-ui/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

algospaced-ui/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const rawApiUrl = env.VITE_API_BASE_URL || 'http://localhost:8000'
+
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      'import.meta.env.VITE_API_BASE_URL': `(() => {
+        if (${mode === 'production'}) {
+          return '';
+        }
+        const base = ${JSON.stringify(rawApiUrl)};
+        if (typeof window !== 'undefined' && window.location) {
+          const hostname = window.location.hostname;
+          if (hostname && hostname !== 'localhost' && hostname !== '127.0.0.1') {
+            return base.replace('localhost', hostname).replace('127.0.0.1', hostname);
+          }
+        }
+        return base;
+      })()`
+    },
+    server: {
+      host: true, // Expose on local network (0.0.0.0)
+    }
+  }
+})

app.py

@@ -0,0 +1,664 @@
+import streamlit as st
+import urllib.parse
+from streamlit_cookies_controller import CookieController
+import db
+import importlib
+importlib.reload(db)
+import srs_logic
+import llm_reviewer
+import gdrive_sync
+
+st.set_page_config(page_title="AlgoSpaced", page_icon="🧠", layout="centered")
+
+# Initialize Cookie Controller
+controller = CookieController()
+
+def trigger_delayed_reload(delay_ms=500):
+    st.components.v1.html(
+        f"""
+        <script>
+        setTimeout(function() {{
+            window.parent.location.reload();
+        }}, {delay_ms});
+        </script>
+        """,
+        height=0,
+        width=0
+    )
+
+JOURNEY_SEQUENCE = [
+    217, 242, 1, 49, 347, 271, 238, 36, 128, 125, 167, 15, 11, 42, 121, 3, 424, 567, 76, 239, 20, 
+    155, 150, 739, 853, 84, 704, 74, 875, 153, 33, 981, 4, 206, 21, 141, 143, 19, 138, 2, 287, 
+    146, 23, 25, 226, 104, 543, 110, 100, 572, 235, 102, 199, 1448, 98, 230, 105, 124, 297, 703, 
+    1046, 973, 215, 621, 355, 295, 78, 39, 40, 46, 90, 22, 79, 131, 17, 51, 208, 211, 212, 200, 
+    695, 133, 286, 994, 417, 130, 207, 210, 261, 323, 684, 127, 743, 332, 1584, 778, 269, 787, 
+    70, 746, 198, 213, 5, 647, 91, 322, 152, 139, 300, 416, 62, 1143, 309, 518, 494, 97, 329, 
+    115, 72, 312, 10, 53, 55, 45, 134, 846, 1899, 763, 678, 57, 56, 435, 252, 253, 1851, 48, 
+    54, 73, 202, 66, 50, 43, 2013, 136, 191, 338, 190, 268, 371, 7
+]
+
+@st.dialog("Problem Details")
+def show_problem_details_dialog(problem_number):
+    completions = db.get_user_journey_progress()
+    is_completed = problem_number in completions
+    
+    problems = db.get_problems_by_number(problem_number)
+    
+    if problems:
+        st.markdown(f"### LeetCode {problem_number}")
+        
+        # Display each method
+        for i, p in enumerate(problems):
+            with st.expander(f"Method: {p['pattern']} ({p['difficulty']})", expanded=(i == 0)):
+                st.markdown(f"**Complexity**: Time `{p['optimal_time']}` | Space `{p['optimal_space']}`")
+                st.markdown(f"[View Google Doc]({p['google_doc_url']})")
+                
+                # Review button
+                if st.button("🎯 Review This Problem", key=f"rev_{p['id']}", use_container_width=True):
+                    st.session_state.active_review_problem_id = p['id']
+                    st.session_state.active_tab = "🎯 Review Queue"
+                    st.rerun()
+    else:
+        st.warning("No local notes found for this problem yet.")
+        st.write("You can search for this problem on LeetCode or Google:")
+        
+        leetcode_url = f"https://leetcode.com/problemset/?search={problem_number}"
+        google_url = f"https://www.google.com/search?q=leetcode+{problem_number}"
+        
+        st.markdown(f"- [Search on LeetCode 🌐]({leetcode_url})")
+        st.markdown(f"- [Search on Google 🔍]({google_url})")
+        
+    st.markdown("---")
+    
+    # Toggle viewed status
+    if is_completed:
+        st.write("Status: **Completed / Viewed** ✅")
+        if st.button("🔴 Remove from Viewed", use_container_width=True):
+            db.toggle_journey_progress(problem_number)
+            st.rerun()
+    else:
+        st.write("Status: **Not Completed / Viewed** ❌")
+        if st.button("🟢 Mark as Completed / Viewed", type="primary", use_container_width=True):
+            db.toggle_journey_progress(problem_number)
+            st.rerun()
+
+def show_journey_page():
+    import math
+    if "show_dialog_num" in st.session_state:
+        show_problem_details_dialog(st.session_state.show_dialog_num)
+        del st.session_state.show_dialog_num
+        
+    st.subheader("🗺️ Your Journey Path")
+    st.write("Visually track your algorithmic progress. Synced problems and manual completions are highlighted in **green/gold**.")
+    
+    completions = db.get_user_journey_progress()
+    titles = db.get_problem_titles_by_number()
+    
+    total = len(JOURNEY_SEQUENCE)
+    completed_count = len(completions.intersection(JOURNEY_SEQUENCE))
+    pct = int((completed_count / total) * 100) if total else 0
+    
+    st.progress(pct / 100.0)
+    st.write(f"**Progress**: {completed_count} / {total} Problems Completed ({pct}%)")
+    
+    css = """
+    <style>
+    .journey-wrapper {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        padding: 20px 0;
+    }
+    .journey-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        max-width: 450px;
+        padding: 40px 0;
+    }
+    .journey-line {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 6px;
+        background: rgba(128, 128, 128, 0.2);
+        z-index: 1;
+        border-radius: 3px;
+    }
+    .journey-node {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        font-weight: bold;
+        font-size: 14px;
+        text-decoration: none !important;
+        z-index: 2;
+        margin: 15px 0;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        border: 3px solid rgba(255, 255, 255, 0.2);
+    }
+    .journey-node.completed {
+        background: linear-gradient(135deg, #10b981, #f59e0b);
+        color: #ffffff !important;
+        box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2);
+    }
+    .journey-node.uncompleted {
+        background: rgba(128, 128, 128, 0.15);
+        color: rgba(255, 255, 255, 0.6) !important;
+    }
+    .journey-node:hover {
+        transform: scale(1.15);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        z-index: 10;
+    }
+    .journey-node.completed:hover {
+        background: linear-gradient(135deg, #059669, #d97706);
+        box-shadow: 0 0 20px rgba(217, 119, 6, 0.6);
+    }
+    .journey-node.uncompleted:hover {
+        background: rgba(128, 128, 128, 0.3);
+        color: #ffffff !important;
+    }
+    
+    .journey-node::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%) scale(0.9);
+        background: #1e293b;
+        color: #f8fafc;
+        padding: 8px 12px;
+        border-radius: 8px;
+        font-size: 12px;
+        font-weight: 500;
+        width: 220px;
+        text-align: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        z-index: 100;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .journey-node:hover::after {
+        opacity: 1;
+        transform: translateX(-50%) scale(1);
+    }
+    </style>
+    """
+    
+    html = f"{css}<div class='journey-wrapper'><div class='journey-container'><div class='journey-line'></div>"
+    
+    for i, num in enumerate(JOURNEY_SEQUENCE):
+        offset = int(math.sin(i * 0.8) * 65)
+        is_completed = num in completions
+        status_class = "completed" if is_completed else "uncompleted"
+        
+        title = titles.get(num)
+        if title:
+            tooltip_text = f"{num}. {title}"
+        else:
+            tooltip_text = f"Problem {num} (Not Synced)"
+        html += f'<a href="?view_num={num}" target="_self" class="journey-node {status_class}" data-tooltip="{tooltip_text}" style="position: relative; left: {offset}px;">{num}</a>'
+        
+    html += "</div></div>"
+    st.markdown(html, unsafe_allow_html=True)
+
+# Check and restore session from cookies if present and not already restored
+client = db.get_supabase_client()
+if "session_restored" not in st.session_state and "signed_out" not in st.session_state:
+    cookies = st.context.cookies
+    access_token = cookies.get('sb_access_token')
+    refresh_token = cookies.get('sb_refresh_token')
+    if access_token and refresh_token:
+        try:
+            client.auth.set_session(access_token, refresh_token)
+            st.session_state.session_restored = True
+            st.rerun()
+        except Exception:
+            # Token might be invalid/expired, remove them
+            controller.remove('sb_access_token')
+            controller.remove('sb_refresh_token')
+
+def dump_cookies_diagnostics():
+    import os
+    try:
+        log_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "debug_cookies.txt")
+        cookies = st.context.cookies
+        session = client.auth.get_session()
+        user_id = session.user.id if session and session.user else None
+        
+        with open(log_path, "w", encoding="utf-8") as f:
+            f.write(f"Cookies keys: {list(cookies.keys())}\n")
+            f.write(f"sb_access_token: {cookies.get('sb_access_token')[:20] if cookies.get('sb_access_token') else None}...\n")
+            f.write(f"sb_refresh_token: {cookies.get('sb_refresh_token')[:20] if cookies.get('sb_refresh_token') else None}...\n")
+            f.write(f"Session State keys: {list(st.session_state.keys())}\n")
+            f.write(f"Supabase Client User ID: {user_id}\n")
+            if "session_restored" in st.session_state:
+                f.write(f"session_restored: {st.session_state.session_restored}\n")
+            if "signed_out" in st.session_state:
+                f.write(f"signed_out: {st.session_state.signed_out}\n")
+    except Exception as e:
+        import traceback
+        with open("debug_cookies_error.txt", "w") as err_f:
+            err_f.write(f"Error: {e}\n")
+            err_f.write(traceback.format_exc())
+
+dump_cookies_diagnostics()
+
+
+def handle_review_completion(current_review, streak_data, rating):
+    new_box = srs_logic.evaluate_new_box(current_review['box_level'], rating)
+    next_review_date = srs_logic.calculate_next_review(new_box).isoformat()
+    
+    times_correct = current_review['times_correct'] + (1 if rating == "Correct" else 0)
+    total_attempts = current_review['total_attempts'] + 1
+    
+    db.update_review(current_review['id'], {
+        "box_level": new_box,
+        "next_review": next_review_date,
+        "times_correct": times_correct,
+        "total_attempts": total_attempts
+    })
+    
+    new_streak = srs_logic.increment_streak(streak_data)
+    db.update_streak(new_streak)
+    st.toast(f"Review saved! Moved to Box {new_box}. Next review: {next_review_date[:10]}")
+
+def show_auth_screen():
+    st.markdown("<h2 style='text-align: center;'>Welcome to AlgoSpaced 🧠</h2>", unsafe_allow_html=True)
+    st.markdown("<p style='text-align: center; color: #888;'>A cloud-syncing Spaced Repetition system for mastering LeetCode algorithmic paradigms.</p>", unsafe_allow_html=True)
+    
+    # Sign in with Google (placed prominently at the top)
+    client = db.get_supabase_client()
+    if st.button("🔴 Sign in with Google", use_container_width=True):
+        with st.spinner("Redirecting to Google..."):
+            try:
+                # 1. Trigger oauth to generate the code challenge and verifier internally
+                res = client.auth.sign_in_with_oauth({
+                    "provider": "google",
+                    "options": {
+                        "redirect_to": "http://localhost:8501"
+                    }
+                })
+                # 2. Extract code_verifier from the client's internal storage
+                code_verifier = client.auth._storage.get_item("supabase.auth.token-code-verifier")
+                if res.url and code_verifier:
+                    # 3. Parse res.url and safely append verifier as a query parameter inside redirect_to URL.
+                    # This avoids overriding the 'state' parameter which Supabase reserves internally.
+                    parsed_url = urllib.parse.urlparse(res.url)
+                    query_params = urllib.parse.parse_qs(parsed_url.query)
+                    if "redirect_to" in query_params:
+                        base_redirect = query_params["redirect_to"][0]
+                        separator = "&" if "?" in base_redirect else "?"
+                        query_params["redirect_to"] = [f"{base_redirect}{separator}verifier={code_verifier}"]
+                    
+                    # Rebuild the final authorize URL
+                    new_query = urllib.parse.urlencode(query_params, doseq=True)
+                    oauth_url = urllib.parse.urlunparse(parsed_url._replace(query=new_query))
+                    
+                    # Redirect client browser
+                    st.markdown(f'<meta http-equiv="refresh" content="0; url={oauth_url}">', unsafe_allow_html=True)
+            except Exception as e:
+                st.error(f"Google login failed: {e}")
+
+    st.markdown("<div style='text-align: center; margin: 15px 0; color: #666;'>— OR —</div>", unsafe_allow_html=True)
+    
+    tab1, tab2 = st.tabs(["Log In", "Sign Up"])
+    
+    with tab1:
+        email = st.text_input("Email Address", key="login_email")
+        password = st.text_input("Password", type="password", key="login_password")
+        if st.button("Log In", type="primary", use_container_width=True):
+            if not email or not password:
+                st.error("Please fill in all fields.")
+                return
+            with st.spinner("Logging in..."):
+                try:
+                    res = client.auth.sign_in_with_password({"email": email, "password": password})
+                    if res.user:
+                        st.success("Successfully logged in! Redirecting...")
+                        session = client.auth.get_session()
+                        if session:
+                            controller.set('sb_access_token', session.access_token)
+                            controller.set('sb_refresh_token', session.refresh_token)
+                        if "signed_out" in st.session_state:
+                            del st.session_state.signed_out
+                        trigger_delayed_reload(500)
+                except Exception as e:
+                    st.error(f"Login failed: {e}")
+                
+    with tab2:
+        new_email = st.text_input("Email Address", key="signup_email")
+        new_password = st.text_input("Password", type="password", key="signup_password")
+        confirm_password = st.text_input("Confirm Password", type="password", key="signup_confirm_password")
+        if st.button("Create Account", use_container_width=True):
+            if not new_email or not new_password or not confirm_password:
+                st.error("Please fill in all fields.")
+                return
+            if new_password != confirm_password:
+                st.error("Passwords do not match!")
+                return
+            with st.spinner("Signing up..."):
+                try:
+                    res = client.auth.sign_up({"email": new_email, "password": new_password})
+                    if res.user:
+                        st.success("Sign up successful! If email confirmation is enabled in Supabase, check your inbox. Otherwise, you can Log In now.")
+                        session = client.auth.get_session()
+                        if session:
+                            controller.set('sb_access_token', session.access_token)
+                            controller.set('sb_refresh_token', session.refresh_token)
+                            if "signed_out" in st.session_state:
+                                del st.session_state.signed_out
+                            trigger_delayed_reload(500)
+                except Exception as e:
+                    st.error(f"Sign up failed: {e}")
+
+def dump_user_data_to_file():
+    import os
+    try:
+        user_id = db.get_current_user_id()
+        if user_id:
+            client = db.get_supabase_client()
+            problems = client.table('problems').select('*').eq('user_id', user_id).execute().data
+            reviews = client.table('user_reviews').select('*').eq('user_id', user_id).execute().data
+            
+            log_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "debug_db.txt")
+            with open(log_path, "w", encoding="utf-8") as f:
+                f.write(f"User ID: {user_id}\n")
+                f.write(f"Problems Count: {len(problems)}\n")
+                f.write("Problems:\n")
+                for p in problems:
+                    code_val = p.get('reference_code')
+                    code_repr = repr(code_val[:50]) if code_val else str(code_val)
+                    f.write(f"  - ID: {p['id']}\n")
+                    f.write(f"    Name: {p['name']}\n")
+                    f.write(f"    Pattern: {p['pattern']}\n")
+                    f.write(f"    Code: {code_repr}\n")
+                    f.write(f"    Doc ID: {p.get('google_doc_id')}\n")
+                    f.write(f"    Created At: {p.get('created_at')}\n")
+                f.write(f"\nReviews Count: {len(reviews)}\n")
+                for r in reviews:
+                    f.write(f"  - ID: {r['id']}, Problem ID: {r['problem_id']}, Box: {r['box_level']}\n")
+    except Exception as e:
+        log_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "debug_error.txt")
+        with open(log_path, "w", encoding="utf-8") as f:
+            f.write(str(e))
+
+def main():
+    # Check for Journey Path view query parameter
+    query_params = st.query_params
+    if "view_num" in query_params:
+        try:
+            view_num = int(query_params["view_num"])
+            st.session_state.show_dialog_num = view_num
+            st.session_state.active_tab = "🗺️ Journey Path"
+            st.query_params.clear()
+            st.rerun()
+        except Exception as e:
+            st.error(f"Error opening details modal: {e}")
+
+    # 0. Check for OAuth redirect code and verifier query parameter
+    if "code" in query_params and "verifier" in query_params:
+        auth_code = query_params["code"]
+        code_verifier = query_params["verifier"]
+        client = db.get_supabase_client()
+        with st.spinner("Completing Google authentication..."):
+            try:
+                # Seed the verifier back into the storage of the new client instance
+                client.auth._storage.set_item("supabase.auth.token-code-verifier", code_verifier)
+                # Exchange the authorization code for an active session
+                client.auth.exchange_code_for_session({
+                    "auth_code": auth_code,
+                    "code_verifier": code_verifier
+                })
+                session = client.auth.get_session()
+                if session:
+                    controller.set('sb_access_token', session.access_token)
+                    controller.set('sb_refresh_token', session.refresh_token)
+                if "signed_out" in st.session_state:
+                    del st.session_state.signed_out
+                # Clear URL params
+                st.query_params.clear()
+                st.success("Successfully logged in with Google! Redirecting...")
+                trigger_delayed_reload(500)
+            except Exception as e:
+                st.error(f"Failed to exchange Google OAuth code: {e}")
+
+    # Authenticate User
+    client = db.get_supabase_client()
+    user = None
+    try:
+        session = client.auth.get_session()
+        if session and session.user:
+            user = session.user
+    except Exception:
+        pass
+        
+    if not user:
+        show_auth_screen()
+        return
+        
+    dump_user_data_to_file()
+    st.title("AlgoSpaced 🧠")
+    
+    # 1. Lazy Check & Streak Banner
+    streak_data = db.get_active_streak()
+    if streak_data:
+        streak_data = srs_logic.lazy_check_streak(streak_data)
+        db.update_streak(streak_data)
+        
+        # High visibility fluid CSS banner for streak
+        st.markdown(
+            f"""
+            <div style="background-color: #2e7b32; padding: 10px; border-radius: 5px; text-align: center; color: white; margin-bottom: 20px;">
+                <strong>🔥 Current Streak: {streak_data['current_streak']} Days | Longest: {streak_data['longest_streak']} Days</strong>
+            </div>
+            """, 
+            unsafe_allow_html=True
+        )
+    
+    # Navigation in Sidebar
+    if "active_tab" not in st.session_state:
+        st.session_state.active_tab = "🎯 Review Queue"
+        
+    with st.sidebar:
+        st.header("Navigation")
+        app_mode = st.radio(
+            "Go to",
+            ["🎯 Review Queue", "🗺️ Journey Path"],
+            index=0 if st.session_state.active_tab == "🎯 Review Queue" else 1
+        )
+        st.session_state.active_tab = app_mode
+        st.markdown("---")
+        
+        st.header("Settings & Sync")
+        st.write(f"Logged in as: **{user.email}**")
+        
+        if st.button("Sync Google Drive Folder", use_container_width=True):
+            with st.spinner("Syncing..."):
+                import importlib
+                importlib.reload(db)
+                importlib.reload(gdrive_sync)
+                res = gdrive_sync.sync_gdrive()
+                st.info(res)
+        
+        st.markdown("---")
+        
+        # Collapsible Guide and Tips Expander
+        with st.sidebar.expander("💡 Review Tips & Guide"):
+            st.markdown("""
+            ### 🔄 The Core Cycle
+            AlgoSpaced uses a customized **Leitner System** to optimize retention:
+            - **Easy / Smashed It**: Moves up 1 Box (Max Box 5).
+            - **Medium / Struggles**: Stays in the current Box (resets interval).
+            - **Hard / Forgot**: Resets to **Box 1** immediately.
+            
+            **Intervals**:
+            - **Box 1**: 1 day
+            - **Box 2**: 3 days
+            - **Box 3**: 7 days
+            - **Box 4**: 14 days
+            - **Box 5**: 30 days (Mastered!)
+            
+            ### 📝 Review Modes
+            - **AI Review**: Write code from memory. Gemini AI reviews logic, bugs, and time/space constraints.
+            - **Self-Grade (Offline)**: Quickly self-grade yourself if you have spotty connection or want a fast session.
+            
+            ### 📄 Note Formatting (Google Doc)
+            Ensure your shared Google Doc follows this format to sync properly:
+            ```markdown
+            121. Best Time to Buy and Sell Stock
+            Easy
+            Description of the problem...
+            
+            Method 1 (One Pass):
+            Time Complexity: O(N)
+            Space Complexity: O(1)
+            Code:
+            ```python
+            def maxProfit(prices):
+                # your code here
+            ```
+            
+            Method 2 (Brute Force):
+            Time Complexity: O(N^2)
+            ...
+            ```
+            """)
+        
+        st.markdown("---")
+        if st.button("Sign Out", use_container_width=True):
+            client.auth.sign_out()
+            controller.remove('sb_access_token')
+            controller.remove('sb_refresh_token')
+            if "session_restored" in st.session_state:
+                del st.session_state.session_restored
+            st.session_state.signed_out = True
+            trigger_delayed_reload(500)
+                
+    if st.session_state.active_tab == "🗺️ Journey Path":
+        show_journey_page()
+        return
+
+    # Fetch current review card (handling custom reviews from Journey Path)
+    current_review = None
+    is_custom_review = False
+    if "active_review_problem_id" in st.session_state:
+        prob_id = st.session_state.active_review_problem_id
+        reviews = db.get_reviews_by_problem_id(prob_id)
+        if reviews:
+            current_review = reviews[0]
+            is_custom_review = True
+        else:
+            del st.session_state.active_review_problem_id
+            
+    if not current_review:
+        due_reviews = db.get_due_reviews()
+        if not due_reviews:
+            st.info("🎉 You're all caught up for today! Come back tomorrow.")
+            return
+        current_review = due_reviews[0]
+        
+    problem = current_review['problems']
+    
+    st.subheader(f"Review: {problem['name']}")
+    if is_custom_review:
+        if st.button("🔙 Return to Daily Queue", use_container_width=True):
+            del st.session_state.active_review_problem_id
+            st.rerun()
+    st.write(f"**Pattern**: {problem['pattern']} | **Difficulty**: {problem['difficulty']}")
+    st.write(f"**Optimal Time**: {problem['optimal_time']} | **Optimal Space**: {problem['optimal_space']}")
+    if problem['google_doc_url']:
+        st.markdown(f"[View Google Doc]({problem['google_doc_url']})")
+    
+    st.write(f"**Box Level**: {current_review['box_level']} (Next review was scheduled for: {current_review['next_review'][:10]})")
+    
+    # Check if we have evaluation results for this card in the session state
+    eval_state_key = f"eval_{current_review['id']}"
+    
+    if eval_state_key in st.session_state:
+        eval_res = st.session_state[eval_state_key]
+        
+        st.markdown("---")
+        st.subheader("AI Evaluation Feedback")
+        is_correct = eval_res.get('is_correct', False)
+        
+        if is_correct:
+            st.success("✅ Solution Approved! You parsed the constraints and code structure correctly.")
+        else:
+            st.error("❌ Solution struggled. Keep reviewing the paradigm.")
+            
+        st.write(f"**Detected Complexity**: Time: `{eval_res.get('detected_complexity', {}).get('time', 'N/A')}` | Space: `{eval_res.get('detected_complexity', {}).get('space', 'N/A')}`")
+        
+        if eval_res.get('bugs'):
+            st.warning("**Bugs / Code Issues Identified**:")
+            for bug in eval_res['bugs']:
+                st.markdown(f"- {bug}")
+        else:
+            st.write("✨ No logic bugs detected!")
+            
+        if eval_res.get('key_suggestion'):
+            st.info(f"💡 **Key Suggestion**: {eval_res['key_suggestion']}")
+            
+        if st.button("Next Card ➡️", type="primary", use_container_width=True):
+            rating = "Correct" if is_correct else "Incorrect"
+            handle_review_completion(current_review, streak_data, rating)
+            del st.session_state[eval_state_key]
+            st.rerun()
+            
+        if st.button("🔄 Try Again (Clear Feedback)", use_container_width=True):
+            del st.session_state[eval_state_key]
+            st.rerun()
+            
+        return
+        
+    mode = st.radio("Review Mode", ["AI Review", "Self-Grade (Offline)"], horizontal=True)
+    
+    if mode == "AI Review":
+        code = st.text_area("Write your code here from memory:", height=300)
+        if st.button("Submit Code for Review", type="primary", use_container_width=True):
+            if not code.strip():
+                st.warning("Please type your solution before submitting.")
+                return
+            with st.spinner("Evaluating with Gemini AI..."):
+                eval_res = llm_reviewer.evaluate_code(
+                    problem['name'], 
+                    problem['pattern'], 
+                    problem['optimal_time'], 
+                    problem['optimal_space'], 
+                    code
+                )
+                
+                if "error" in eval_res:
+                    st.error(f"Error calling AI: {eval_res['error']}")
+                else:
+                    st.session_state[eval_state_key] = eval_res
+                    st.rerun()
+                    
+    else:
+        st.warning("Self-Grade Mode Active. Evaluate yourself truthfully.")
+        with st.expander("Show Reference Code"):
+            st.code(problem.get('reference_code', 'No reference code available.'), language="python")
+            
+        col1, col2, col3 = st.columns(3)
+        if col1.button("Forgot (Box 1)", use_container_width=True):
+            handle_review_completion(current_review, streak_data, "Incorrect")
+            st.rerun()
+        if col2.button("Mixed (Same Box)", use_container_width=True):
+            handle_review_completion(current_review, streak_data, "Mixed")
+            st.rerun()
+        if col3.button("Smashed It (+1 Box)", type="primary", use_container_width=True):
+            handle_review_completion(current_review, streak_data, "Correct")
+            st.rerun()
+
+if __name__ == "__main__":
+    main()

db.py

@@ -0,0 +1,308 @@
+import streamlit as st
+from supabase import create_client, Client, ClientOptions
+from datetime import datetime, timezone
+import os
+
+def get_supabase_client() -> Client:
+    # Try using environment variables or st.secrets
+    url = os.environ.get("SUPABASE_URL")
+    key = os.environ.get("SUPABASE_KEY")
+    
+    if not url or not key:
+        try:
+            if hasattr(st, "secrets") and st.secrets:
+                url = url or st.secrets.get("SUPABASE_URL")
+                key = key or st.secrets.get("SUPABASE_KEY")
+        except Exception:
+            pass
+            
+    if not url or not key:
+        # Try loading from secrets.toml directly
+        import toml
+        try:
+            secrets_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), ".streamlit", "secrets.toml")
+            if os.path.exists(secrets_path):
+                secrets = toml.load(secrets_path)
+                url = url or secrets.get("SUPABASE_URL")
+                key = key or secrets.get("SUPABASE_KEY")
+        except Exception:
+            pass
+            
+    if not url or not key:
+        raise ValueError("SUPABASE_URL and SUPABASE_KEY must be set in environment variables or secrets")
+        
+    try:
+        if "supabase_client" not in st.session_state:
+            st.session_state.supabase_client = create_client(url, key)
+        return st.session_state.supabase_client
+    except Exception:
+        # Fallback to creating a new client if session_state is unavailable
+        return create_client(url, key)
+
+def get_current_user_id(client=None):
+    if client is None:
+        client = get_supabase_client()
+    if hasattr(client, "current_user_id"):
+        return client.current_user_id
+    try:
+        session = client.auth.get_session()
+        if session and session.user:
+            return session.user.id
+    except Exception:
+        pass
+    return None
+
+def get_active_streak(client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    res = client.table('user_streaks').select('*').eq('user_id', user_id).limit(1).execute()
+    if res.data:
+        return res.data[0]
+    else:
+        new_streak = {
+            "user_id": user_id,
+            "current_streak": 0,
+            "longest_streak": 0,
+            "last_active_date": None
+        }
+        res2 = client.table('user_streaks').insert(new_streak).execute()
+        return res2.data[0] if res2.data else None
+
+def update_streak(streak_data, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    return client.table('user_streaks').update({
+        "current_streak": streak_data["current_streak"],
+        "longest_streak": streak_data["longest_streak"],
+        "last_active_date": streak_data["last_active_date"],
+        "updated_at": datetime.now(timezone.utc).isoformat()
+    }).eq('user_id', user_id).execute()
+
+def get_due_reviews(client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return []
+    now_iso = datetime.now(timezone.utc).isoformat()
+    res = client.table('user_reviews').select('*, problems(*)').eq('user_id', user_id).lte('next_review', now_iso).order('next_review').execute()
+    return res.data
+
+def update_review(review_id, update_data, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    return client.table('user_reviews').update(update_data).eq('id', review_id).eq('user_id', user_id).execute()
+
+def log_trace(message: str):
+    import datetime
+    import os
+    try:
+        log_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "sync.log")
+        with open(log_path, "a", encoding="utf-8") as f:
+            f.write(f"[{datetime.datetime.now().isoformat()}] {message}\n")
+    except Exception:
+        pass
+
+def insert_problem(problem_data, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        log_trace("db: insert_problem failed - no user_id")
+        return None
+    problem_data["user_id"] = user_id
+    log_trace(f"db: Inserting problem '{problem_data['name']}' with code length {len(problem_data.get('reference_code', '') or '')}")
+    res = client.table('problems').insert(problem_data).execute()
+    log_trace(f"db: Insert completed, returned ID: {res.data[0]['id'] if res.data else 'None'}")
+    return res
+
+def update_problem(problem_id, update_data, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        log_trace("db: update_problem failed - no user_id")
+        return None
+    log_trace(f"db: Updating problem {problem_id} with keys {list(update_data.keys())} and code length {len(update_data.get('reference_code', '') or '')}")
+    res = client.table('problems').update(update_data).eq('id', problem_id).eq('user_id', user_id).execute()
+    log_trace(f"db: Update completed, returned data: {res.data}")
+    return res
+
+def insert_review(review_data, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    review_data["user_id"] = user_id
+    return client.table('user_reviews').insert(review_data).execute()
+
+def get_problem_by_doc_id(doc_id, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    res = client.table('problems').select('*').eq('user_id', user_id).eq('google_doc_id', doc_id).execute()
+    return res.data[0] if res.data else None
+
+def get_problem_by_name(name, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    res = client.table('problems').select('*').eq('user_id', user_id).eq('name', name).execute()
+    return res.data[0] if res.data else None
+
+def insert_journey_progress(problem_number: int, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    return client.table('user_journey_progress').upsert({
+        "user_id": user_id,
+        "problem_number": problem_number
+    }, on_conflict="user_id,problem_number").execute()
+
+def delete_journey_progress(problem_number: int, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    return client.table('user_journey_progress').delete().eq('user_id', user_id).eq('problem_number', problem_number).execute()
+
+def toggle_journey_progress(problem_number: int, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    res = client.table('user_journey_progress').select('id').eq('user_id', user_id).eq('problem_number', problem_number).execute()
+    if res.data:
+        return delete_journey_progress(problem_number, client)
+    else:
+        return insert_journey_progress(problem_number, client)
+
+def get_user_journey_progress(client=None) -> set:
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return set()
+    res = client.table('user_journey_progress').select('problem_number').eq('user_id', user_id).execute()
+    return {row['problem_number'] for row in res.data} if res.data else set()
+
+def get_problem_titles_by_number(client=None) -> dict:
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return {}
+    res = client.table('problems').select('problem_number, name').eq('user_id', user_id).execute()
+    mapping = {}
+    if res.data:
+        for row in res.data:
+            num = row.get('problem_number')
+            if num is not None:
+                base_name = row['name'].split(" - ")[0].strip()
+                mapping[num] = base_name
+    return mapping
+
+def get_problems_by_number(problem_number: int, client=None) -> list:
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return []
+    res = client.table('problems').select('*').eq('user_id', user_id).eq('problem_number', problem_number).execute()
+    return res.data if res.data else []
+
+def get_reviews_by_problem_id(problem_id: str, client=None) -> list:
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return []
+    res = client.table('user_reviews').select('*, problems(*)').eq('user_id', user_id).eq('problem_id', problem_id).execute()
+    return res.data if res.data else []
+
+def get_user_score(client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    res = client.table('user_scores').select('*').eq('user_id', user_id).limit(1).execute()
+    if res.data:
+        return res.data[0]
+    else:
+        new_score = {
+            "user_id": user_id,
+            "total_score": 0,
+            "python_challenges_completed": 0,
+            "sql_challenges_completed": 0
+        }
+        try:
+            res2 = client.table('user_scores').insert(new_score).execute()
+            return res2.data[0] if res2.data else None
+        except Exception:
+            return None
+
+def increment_user_score(points: int, challenge_type: str, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    
+    current_score = get_user_score(client)
+    if not current_score:
+        return None
+        
+    update_data = {
+        "total_score": current_score["total_score"] + points,
+        "updated_at": datetime.now(timezone.utc).isoformat()
+    }
+    
+    if challenge_type == "python":
+        update_data["python_challenges_completed"] = current_score["python_challenges_completed"] + 1
+    elif challenge_type == "mysql":
+        update_data["sql_challenges_completed"] = current_score["sql_challenges_completed"] + 1
+        
+    return client.table('user_scores').update(update_data).eq('user_id', user_id).execute()
+
+def add_challenge_history(challenge_type: str, challenge_title: str, points_awarded: int, client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return None
+    history_data = {
+        "user_id": user_id,
+        "challenge_type": challenge_type,
+        "challenge_title": challenge_title,
+        "points_awarded": points_awarded
+    }
+    return client.table('challenge_history').insert(history_data).execute()
+
+def get_challenge_history(client=None):
+    if client is None:
+        client = get_supabase_client()
+    user_id = get_current_user_id(client)
+    if not user_id:
+        return []
+    res = client.table('challenge_history').select('*').eq('user_id', user_id).order('completed_at', desc=True).execute()
+    return res.data if res.data else []
+

gdrive_sync.py

@@ -0,0 +1,276 @@
+import re
+import streamlit as st
+from google.oauth2 import service_account
+from googleapiclient.discovery import build
+import db
+
+def get_secret(key):
+    import os
+    # Try environment variables first
+    env_val = os.environ.get(key.upper()) or os.environ.get(key)
+    if env_val:
+        if key == "gcp_service_account" or (isinstance(env_val, str) and env_val.strip().startswith("{")):
+            import json
+            try:
+                return json.loads(env_val)
+            except Exception:
+                pass
+        return env_val
+
+    try:
+        # Try Streamlit secrets first
+        if hasattr(st, "secrets") and st.secrets and key in st.secrets:
+            return st.secrets[key]
+    except Exception:
+        pass
+    
+    # Fallback to loading from toml directly
+    import toml
+    try:
+        secrets_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), ".streamlit", "secrets.toml")
+        if os.path.exists(secrets_path):
+            data = toml.load(secrets_path)
+            if key in data:
+                return data[key]
+    except Exception:
+        pass
+    return None
+
+def get_credentials():
+    creds_dict = get_secret("gcp_service_account")
+    if not creds_dict:
+        raise KeyError("gcp_service_account not found in secrets")
+    return service_account.Credentials.from_service_account_info(
+        dict(creds_dict),
+        scopes=[
+            'https://www.googleapis.com/auth/drive.readonly',
+            'https://www.googleapis.com/auth/documents.readonly'
+        ]
+    )
+
+def extract_text_from_elements(elements):
+    text = ""
+    for value in elements:
+        if 'paragraph' in value:
+            for elem in value.get('paragraph', {}).get('elements', []):
+                if 'textRun' in elem:
+                    text += elem.get('textRun', {}).get('content', '')
+    return text
+
+def parse_problem_body(problem_name, body):
+    # Match headers like "Method 1:" or "Method 2 (Two Pointers):"
+    method_matches = list(re.finditer(r'Method\s*(\d+)(?:\s*\(([^)]+)\))?:', body, re.IGNORECASE))
+    
+    difficulty = "Medium"
+    diff_match = re.search(r'^\s*(Easy|Medium|Hard)\b', body, re.IGNORECASE | re.MULTILINE)
+    if diff_match:
+        difficulty = diff_match.group(1).capitalize()
+        
+    methods = []
+    
+    # Extract description text: everything before the first Method match or Time Complexity line, excluding the difficulty word.
+    desc_raw = ""
+    if method_matches:
+        desc_raw = body[:method_matches[0].start()]
+    else:
+        time_match = re.search(r'Time\s+Complexity:\s*([^\n\r]+)', body, re.IGNORECASE)
+        if time_match:
+            desc_raw = body[:time_match.start()]
+        else:
+            desc_raw = body
+            
+    description = re.sub(r'^\s*(Easy|Medium|Hard)\b', '', desc_raw, flags=re.IGNORECASE | re.MULTILINE).strip()
+    
+    if not method_matches:
+        # Fallback for when there are no "Method X" headers (treat the whole body as one method)
+        time_match = re.search(r'Time\s+Complexity:\s*([^\n\r]+)', body, re.IGNORECASE)
+        space_match = re.search(r'Space\s+Complexity:\s*([^\n\r]+)', body, re.IGNORECASE)
+        
+        optimal_time = time_match.group(1).strip() if time_match else "O(N)"
+        optimal_space = space_match.group(1).strip() if space_match else "O(N)"
+        
+        code = ""
+        if space_match:
+            start_pos = space_match.end()
+            raw_code = body[start_pos:].strip()
+            
+            # Improved regex to handle leading indentation/spaces/tabs
+            code_start_match = re.search(r'(?:^|\n)[ \t]*(?:def\s+|class\s+|import\s+|from\s+\S+\s+import|```[a-zA-Z]*)', raw_code)
+            if code_start_match:
+                raw_code = raw_code[code_start_match.start():].strip()
+            
+            # Clean up: remove "Code:" or "Reference Code:" if explicitly present
+            raw_code = re.sub(r'^(Code|Reference Code):\s*', '', raw_code, flags=re.IGNORECASE)
+            
+            # Clean up: strip markdown backticks if present
+            raw_code = re.sub(r'^```[a-zA-Z]*\s*', '', raw_code)
+            raw_code = re.sub(r'\s*```$', '', raw_code)
+            
+            code = raw_code.strip()
+            
+        methods.append({
+            "name": f"{problem_name} - Method 1 (Standard)",
+            "pattern": "Standard",
+            "difficulty": difficulty,
+            "optimal_time": optimal_time,
+            "optimal_space": optimal_space,
+            "code": code,
+            "description": description
+        })
+    else:
+        for j, m_match in enumerate(method_matches):
+            m_start = m_match.end()
+            m_end = method_matches[j+1].start() if j + 1 < len(method_matches) else len(body)
+            
+            method_num = m_match.group(1).strip()
+            method_name = m_match.group(2).strip() if m_match.group(2) else f"Method {method_num}"
+            method_body = body[m_start:m_end]
+            
+            # Complexities
+            time_match = re.search(r'Time\s+Complexity:\s*([^\n\r]+)', method_body, re.IGNORECASE)
+            space_match = re.search(r'Space\s+Complexity:\s*([^\n\r]+)', method_body, re.IGNORECASE)
+            
+            optimal_time = time_match.group(1).strip() if time_match else "O(N)"
+            optimal_space = space_match.group(1).strip() if space_match else "O(N)"
+            
+            # Extract code block: grab everything following the "Space Complexity" line
+            code = ""
+            if space_match:
+                start_pos = space_match.end()
+                raw_code = method_body[start_pos:].strip()
+                
+                # Improved regex to handle leading indentation/spaces/tabs
+                code_start_match = re.search(r'(?:^|\n)[ \t]*(?:def\s+|class\s+|import\s+|from\s+\S+\s+import|```[a-zA-Z]*)', raw_code)
+                if code_start_match:
+                    raw_code = raw_code[code_start_match.start():].strip()
+                
+                # Clean up: remove "Code:" or "Reference Code:" if explicitly present
+                raw_code = re.sub(r'^(Code|Reference Code):\s*', '', raw_code, flags=re.IGNORECASE)
+                
+                # Clean up: strip markdown backticks if present
+                raw_code = re.sub(r'^```[a-zA-Z]*\s*', '', raw_code)
+                raw_code = re.sub(r'\s*```$', '', raw_code)
+                
+                code = raw_code.strip()
+                    
+            methods.append({
+                "name": f"{problem_name} - Method {method_num} ({method_name})",
+                "pattern": method_name,
+                "difficulty": difficulty,
+                "optimal_time": optimal_time,
+                "optimal_space": optimal_space,
+                "code": code,
+                "description": description
+            })
+            
+    return methods
+
+def parse_multi_problem_doc(text):
+    # Find all problem headers: e.g. "1. Two Sum"
+    matches = list(re.finditer(r'^\s*(\d+)\.\s*([^\n\r]+)', text, re.MULTILINE))
+    
+    problems = []
+    for i, match in enumerate(matches):
+        start_idx = match.end()
+        end_idx = matches[i+1].start() if i + 1 < len(matches) else len(text)
+        
+        problem_number = int(match.group(1).strip())
+        problem_name = match.group(2).strip()
+        problem_body = text[start_idx:end_idx]
+        
+        parsed_methods = parse_problem_body(problem_name, problem_body)
+        for m in parsed_methods:
+            m['problem_number'] = problem_number
+        problems.extend(parsed_methods)
+        
+    return problems
+
+def sync_gdrive(client=None):
+    if client is None:
+        client = db.get_supabase_client()
+        
+    try:
+        creds = get_credentials()
+    except KeyError:
+        return "GCP credentials not found in secrets.toml"
+        
+    drive_service = build('drive', 'v3', credentials=creds)
+    docs_service = build('docs', 'v1', credentials=creds)
+    
+    folder_id = get_secret("GDRIVE_FOLDER_ID")
+    if not folder_id:
+        return "GDRIVE_FOLDER_ID not found in secrets.toml"
+    
+    query = f"'{folder_id}' in parents and mimeType='application/vnd.google-apps.document' and trashed=false"
+    results = drive_service.files().list(q=query, fields="nextPageToken, files(id, name)").execute()
+    items = results.get('files', [])
+    
+    inserted_count = 0
+    updated_count = 0
+    
+    for item in items:
+        doc_id = item['id']
+        doc_name = item['name']
+        db.log_trace(f"Sync: Processing Doc '{doc_name}' ({doc_id})")
+        
+        # Fetch doc content
+        doc = docs_service.documents().get(documentId=doc_id).execute()
+        doc_content = doc.get('body').get('content')
+        full_text = extract_text_from_elements(doc_content)
+        
+        parsed_problems = parse_multi_problem_doc(full_text)
+        db.log_trace(f"Sync: Parsed {len(parsed_problems)} methods from '{doc_name}'")
+        
+        for p in parsed_problems:
+            # Check if this specific problem/method name exists in DB for this user
+            existing = db.get_problem_by_name(p['name'], client)
+            
+            problem_data = {
+                "name": p['name'],
+                "problem_number": p.get('problem_number'),
+                "pattern": p['pattern'],
+                "difficulty": p['difficulty'],
+                "google_doc_url": f"https://docs.google.com/document/d/{doc_id}/edit",
+                "google_doc_id": doc_id,
+                "optimal_time": p['optimal_time'],
+                "optimal_space": p['optimal_space'],
+                "reference_code": p['code'],
+                "description": p.get('description', '')
+            }
+            
+            db.log_trace(f"Sync: Method '{p['name']}' -> code length={len(p['code'])}")
+            
+            if not existing:
+                # Insert problem
+                db.log_trace(f"Sync: Inserting new problem: '{p['name']}'")
+                prob_res = db.insert_problem(problem_data, client)
+                db.log_trace(f"Sync: Insert result data: {prob_res.data if prob_res else 'None'}")
+                
+                # Insert review queue starting at Box 1
+                if prob_res and prob_res.data:
+                    prob_id = prob_res.data[0]['id']
+                    db.insert_review({
+                        "problem_id": prob_id,
+                        "box_level": 1
+                    }, client)
+                    inserted_count += 1
+            else:
+                # Update problem in case anything changed
+                db.log_trace(f"Sync: Updating existing problem: '{p['name']}' (ID={existing['id']})")
+                update_res = db.update_problem(existing['id'], {
+                    "problem_number": p.get('problem_number'),
+                    "pattern": p['pattern'],
+                    "difficulty": p['difficulty'],
+                    "optimal_time": p['optimal_time'],
+                    "optimal_space": p['optimal_space'],
+                    "reference_code": p['code'],
+                    "description": p.get('description', '')
+                }, client)
+                db.log_trace(f"Sync: Update result data: {update_res.data if update_res else 'None'}")
+                updated_count += 1
+                
+            if p.get('problem_number'):
+                db.insert_journey_progress(p['problem_number'], client)
+                
+    return f"Sync complete. Created {inserted_count} new methods, updated {updated_count} existing methods."
+

llm_reviewer.py

@@ -0,0 +1,225 @@
+import json
+import streamlit as st
+from google import genai
+from google.genai import types
+
+from gdrive_sync import get_secret
+
+def generate_content_with_fallback(client, system_instruction, user_prompt, is_json=False):
+    models = [
+        'gemini-2.5-flash',
+        'gemini-3.5-flash',
+        'gemini-3-flash-preview',
+        'gemini-3.1-flash-lite'
+    ]
+    
+    last_err = None
+    for model_name in models:
+        try:
+            if is_json:
+                response = client.models.generate_content(
+                    model=model_name,
+                    contents=user_prompt,
+                    config=types.GenerateContentConfig(
+                        system_instruction=system_instruction,
+                        response_mime_type="application/json",
+                    )
+                )
+            else:
+                response = client.models.generate_content(
+                    model=model_name,
+                    contents=user_prompt,
+                    config=types.GenerateContentConfig(
+                        system_instruction=system_instruction,
+                    )
+                )
+            return response
+        except Exception as e:
+            last_err = e
+            continue
+            
+    raise last_err if last_err else Exception("No Gemini models succeeded")
+
+def evaluate_code(problem_name, pattern_name, expected_time, expected_space, candidate_code):
+    api_key = get_secret("GEMINI_API_KEY")
+    if not api_key:
+        return {"error": "GEMINI_API_KEY not found in secrets"}
+    
+    client = genai.Client(api_key=api_key)
+    
+    system_instruction = """
+    You are an expert technical interviewer evaluating a candidate's LeetCode code written from memory.
+    Your primary objective is to review code correctness, algorithmic efficiency, and potential edge-case failures.
+    Be highly forgiving of minor visual/syntax typos (e.g., off-by-one indentation, minor spelling mistakes in variables, or missing colons)
+    which would be caught in 1 second by a standard IDE. Focus on raw algorithmic correctness.
+    Return ONLY a JSON response matching the required schema. No markdown formatting blocks around the JSON.
+    """
+    
+    user_prompt_template = f"""
+    Problem Name: {problem_name}
+    Target Pattern: {pattern_name}
+    Expected Complexity: Time: {expected_time}, Space: {expected_space}
+ 
+    Candidate's Code Submission:
+    {candidate_code}
+ 
+    Evaluate the code logic and return the structured JSON output with the exact schema:
+    {{
+        "is_correct": boolean,
+        "detected_complexity": {{"time": string, "space": string}},
+        "bugs": [string, string, ...],
+        "key_suggestion": string
+    }}
+    """
+    
+    try:
+        response = generate_content_with_fallback(client, system_instruction, user_prompt_template, is_json=True)
+        # Parse the JSON output
+        result = json.loads(response.text)
+        return result
+    except Exception as e:
+        return {"error": str(e)}
+
+def explain_code(problem_name, code, optimal_time, optimal_space):
+    api_key = get_secret("GEMINI_API_KEY")
+    if not api_key:
+        return {"error": "GEMINI_API_KEY not found in secrets"}
+    
+    client = genai.Client(api_key=api_key)
+    
+    system_instruction = """
+    You are an expert technical interviewer and computer science educator.
+    Your objective is to provide a clean, comprehensive line-by-line explanation of a LeetCode reference solution.
+    
+    Analyze only the provided code block text. Do NOT suggest or write an alternative code solution.
+    Break down the line-by-line logic, explain the state tracking variables, and explicitly match the code to the time and space complexities saved next to it.
+    
+    Format your response in beautiful, clear Markdown.
+    """
+    
+    user_prompt = f"""
+    Problem Name: {problem_name}
+    Expected Complexity: Time: {optimal_time}, Space: {optimal_space}
+    
+    Reference Code to Explain:
+    ```python
+    {code}
+    ```
+    
+    Provide the explanation satisfying the constraints:
+    1. Break down the line-by-line logic of the code.
+    2. Explain any state tracking variables (what they hold and how they evolve).
+    3. Explicitly explain and match why the time complexity is {optimal_time} and the space complexity is {optimal_space}.
+    4. Do not write any alternative code solution.
+    """
+    
+    try:
+        response = generate_content_with_fallback(client, system_instruction, user_prompt, is_json=False)
+        return {"explanation": response.text}
+    except Exception as e:
+        return {"error": str(e)}
+
+def generate_daily_python_challenge():
+    api_key = get_secret("GEMINI_API_KEY")
+    if not api_key:
+        return {"error": "GEMINI_API_KEY not found in secrets"}
+    
+    client = genai.Client(api_key=api_key)
+    
+    system_instruction = """
+    You are an expert curriculum designer for a retro-arcade coding platform called AlgoSpaced.
+    Your task is to generate a new, daily python programming challenge.
+    The challenge should test standard core DSA concepts or standard coding tasks.
+    Provide test cases that check edge cases.
+    Return ONLY a JSON response matching the required schema. No markdown formatting blocks around the JSON.
+    """
+    
+    import random
+    concepts = [
+        "arrays and hashing", "two pointers", "sliding window", "stack", 
+        "binary search", "linked lists", "trees and graphs", "heap / priority queue", 
+        "backtracking", "dynamic programming", "greedy algorithms", "string manipulation",
+        "math & geometry", "bit manipulation"
+    ]
+    concept = random.choice(concepts)
+    
+    user_prompt = f"""
+    Generate a daily coding challenge on the topic: "{concept}".
+    
+    Return the structured JSON output with the exact schema:
+    {{
+        "title": "string (Short creative title, max 50 chars)",
+        "description": "string (Markdown description of the problem, input format, output format)",
+        "difficulty": "string (Easy, Medium, or Hard)",
+        "points": number (100 for Easy, 200 for Medium, 300 for Hard),
+        "starter_code": "string (Python starter code ending with 'pass')",
+        "test_cases": [
+            {{
+                "input": [any] (list of args to pass to the function),
+                "expected": any (expected return value)
+            }},
+            ...
+        ]
+    }}
+    
+    Ensure the test cases are completely valid JSON and mathematically correct. 
+    Ensure the starter_code defines a function (e.g., 'def solve(arr):\\n    pass').
+    """
+    
+    try:
+        response = generate_content_with_fallback(client, system_instruction, user_prompt, is_json=True)
+        result = json.loads(response.text)
+        return result
+    except Exception as e:
+        return {"error": str(e)}
+
+def generate_sql_challenge():
+    api_key = get_secret("GEMINI_API_KEY")
+    if not api_key:
+        return {"error": "GEMINI_API_KEY not found in secrets"}
+    
+    client = genai.Client(api_key=api_key)
+    
+    system_instruction = """
+    You are an expert SQL instructor for a retro-arcade coding platform called AlgoSpaced.
+    Your task is to generate an interactive SQL challenge.
+    The challenge must test standard SQL capabilities (SELECT, JOIN, GROUP BY, Window Functions, or simple mutations like UPDATE/DELETE).
+    Return ONLY a JSON response matching the required schema. No markdown formatting blocks around the JSON.
+    """
+    
+    import random
+    topics = [
+        "Window Functions (DENSE_RANK, ROW_NUMBER, PARTITION BY)",
+        "Aggregations & Grouping (SUM, AVG, HAVING)",
+        "Subqueries & CTEs (WITH clause)",
+        "Table Joins & Filtering (LEFT/INNER JOIN, NULL handling)",
+        "Data Mutations (UPDATE balances, DELETE inactive users)"
+    ]
+    topic = random.choice(topics)
+    
+    user_prompt = f"""
+    Generate an interactive SQL challenge on the topic: "{topic}".
+    
+    Return the structured JSON output with the exact schema:
+    {{
+        "title": "string (Short creative title, max 50 chars)",
+        "objective": "string (Describe the SQL query the user needs to write. E.g., 'Write a query using DENSE_RANK() to rank employee salaries within each department.')",
+        "ddl": "string (DDL statements to create 2-3 tables. Use standard SQL types compatible with SQLite/MySQL. Ensure syntax is correct.)",
+        "inserts": "string (INSERT statements to populate the tables with 5-10 realistic mock rows.)",
+        "validation_query": "string (The correct reference SQL query that fulfills the objective.)",
+        "challenge_type": "string ('SELECT' or 'DML' (for UPDATE/DELETE challenges))",
+        "points": number (e.g., 150)
+    }}
+    
+    Ensure that the DDL and INSERT statements are correct and run sequentially without errors.
+    Do not use complex MySQL-specific engines or custom functions. Keep it standard SQL.
+    """
+    
+    try:
+        response = generate_content_with_fallback(client, system_instruction, user_prompt, is_json=True)
+        result = json.loads(response.text)
+        return result
+    except Exception as e:
+        return {"error": str(e)}
+
+

main.py

@@ -0,0 +1,727 @@
+import toml
+from fastapi import FastAPI, Header, HTTPException, Depends
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from supabase import create_client, Client, ClientOptions
+import db
+import srs_logic
+import llm_reviewer
+import gdrive_sync
+import sandbox
+import sql_playground
+from datetime import datetime, timezone
+
+DAILY_PYTHON_CHALLENGE_CACHE = {}  # maps YYYY-MM-DD to challenge dict
+ACTIVE_SQL_CHALLENGES = {}         # maps user_id to active challenge dict
+
+
+
+def extract_starter_code(reference_code: str) -> str:
+    if not reference_code:
+        return ""
+    
+    lines = reference_code.splitlines()
+    starter_lines = []
+    
+    found_class = False
+    found_def = False
+    in_def = False
+    
+    for line in lines:
+        stripped = line.strip()
+        
+        # If we see a class, add it
+        if stripped.startswith("class ") and not in_def:
+            starter_lines.append(line)
+            found_class = True
+            continue
+        
+        # If we see def, start adding lines
+        if stripped.startswith("def ") and not in_def:
+            in_def = True
+            starter_lines.append(line)
+            check_line = stripped.split('#')[0].strip()
+            if check_line.endswith(':'):
+                in_def = False
+                indent = len(line) - len(line.lstrip())
+                starter_lines.append(" " * (indent + 4) + "pass")
+                found_def = True
+                break
+            continue
+            
+        # If we are inside a multi-line def, keep adding lines
+        if in_def:
+            starter_lines.append(line)
+            check_line = stripped.split('#')[0].strip()
+            if check_line.endswith(':'):
+                in_def = False
+                def_indent = 4
+                for l in reversed(starter_lines):
+                    if l.strip().startswith("def "):
+                        def_indent = len(l) - len(l.lstrip())
+                        break
+                starter_lines.append(" " * (def_indent + 4) + "pass")
+                found_def = True
+                break
+                
+    if not starter_lines:
+        return reference_code
+        
+    return "\n".join(starter_lines)
+
+app = FastAPI(title="AlgoSpaced API")
+
+# Configure CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://127.0.0.1:5173"], # Vite React Dev Server
+    allow_origin_regex=r"http://(localhost|127\.0\.0\.1|192\.168\.\d+\.\d+|10\.\d+\.\d+\.\d+|172\.(1[6-9]|2\d|3[0-1])\.\d+\.\d+):5173",
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+import os
+
+# Load secrets for Supabase configuration
+SUPABASE_URL = os.environ.get("SUPABASE_URL")
+SUPABASE_KEY = os.environ.get("SUPABASE_KEY")
+
+if not SUPABASE_URL or not SUPABASE_KEY:
+    try:
+        secrets_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), ".streamlit", "secrets.toml")
+        if os.path.exists(secrets_path):
+            secrets = toml.load(secrets_path)
+            SUPABASE_URL = SUPABASE_URL or secrets.get("SUPABASE_URL")
+            SUPABASE_KEY = SUPABASE_KEY or secrets.get("SUPABASE_KEY")
+    except Exception as e:
+        print(f"Error loading secrets.toml: {e}")
+
+# Dependency to resolve a Supabase client configured for the specific request user session
+def get_supabase_client(authorization: str = Header(None)) -> Client:
+    if not authorization or not authorization.startswith("Bearer "):
+        raise HTTPException(status_code=401, detail="Missing or invalid Authorization header")
+    access_token = authorization.split(" ")[1]
+    
+    try:
+        # Initialize a Supabase client authenticated as this specific user
+        client = create_client(
+            SUPABASE_URL, 
+            SUPABASE_KEY, 
+            options=ClientOptions(headers={"Authorization": f"Bearer {access_token}"})
+        )
+        # Validate session actively by querying user details
+        user_res = client.auth.get_user(access_token)
+        if not user_res or not user_res.user:
+            raise HTTPException(status_code=401, detail="Invalid Supabase authentication session")
+        client.current_user_id = user_res.user.id
+        return client
+    except Exception as e:
+        raise HTTPException(status_code=401, detail=f"Authentication failed: {str(e)}")
+
+@app.get("/api/streak")
+def get_streak(client: Client = Depends(get_supabase_client)):
+    streak_data = db.get_active_streak(client)
+    if streak_data:
+        streak_data = srs_logic.lazy_check_streak(streak_data)
+        db.update_streak(streak_data, client)
+    return streak_data
+
+@app.get("/api/reviews/due")
+def get_due_reviews(client: Client = Depends(get_supabase_client)):
+    reviews = db.get_due_reviews(client)
+    for review in reviews:
+        if "problems" in review and review["problems"]:
+            prob = review["problems"]
+            prob["starter_code"] = extract_starter_code(prob.get("reference_code", ""))
+    return reviews
+
+@app.get("/api/reviews/problems/{problem_number}")
+def get_problems_by_number(problem_number: int, client: Client = Depends(get_supabase_client)):
+    problems = db.get_problems_by_number(problem_number, client)
+    for prob in problems:
+        prob["starter_code"] = extract_starter_code(prob.get("reference_code", ""))
+    return problems
+
+@app.get("/api/reviews/problems/id/{problem_id}")
+def get_reviews_by_problem_id(problem_id: str, client: Client = Depends(get_supabase_client)):
+    reviews = db.get_reviews_by_problem_id(problem_id, client)
+    for review in reviews:
+        if "problems" in review and review["problems"]:
+            prob = review["problems"]
+            prob["starter_code"] = extract_starter_code(prob.get("reference_code", ""))
+    return reviews
+
+class CompleteReviewRequest(BaseModel):
+    review_id: str
+    box_level: int
+    times_correct: int
+    total_attempts: int
+    rating: str  # "Correct", "Mixed", "Incorrect"
+
+@app.post("/api/reviews/complete")
+def complete_review(req: CompleteReviewRequest, client: Client = Depends(get_supabase_client)):
+    new_box = srs_logic.evaluate_new_box(req.box_level, req.rating)
+    next_review_date = srs_logic.calculate_next_review(new_box).isoformat()
+    
+    new_times_correct = req.times_correct + (1 if req.rating == "Correct" else 0)
+    new_total_attempts = req.total_attempts + 1
+    
+    db.update_review(req.review_id, {
+        "box_level": new_box,
+        "next_review": next_review_date,
+        "times_correct": new_times_correct,
+        "total_attempts": new_total_attempts
+    }, client)
+    
+    streak_data = db.get_active_streak(client)
+    if streak_data:
+        new_streak = srs_logic.increment_streak(streak_data)
+        db.update_streak(new_streak, client)
+        
+    return {
+        "success": True,
+        "new_box": new_box,
+        "next_review": next_review_date
+    }
+
+class EvaluateCodeRequest(BaseModel):
+    problem_name: str
+    pattern: str
+    optimal_time: str
+    optimal_space: str
+    code: str
+
+@app.post("/api/reviews/evaluate")
+def evaluate_code(req: EvaluateCodeRequest, client: Client = Depends(get_supabase_client)):
+    eval_res = llm_reviewer.evaluate_code(
+        req.problem_name,
+        req.pattern,
+        req.optimal_time,
+        req.optimal_space,
+        req.code
+    )
+    if "error" in eval_res:
+        raise HTTPException(status_code=500, detail=eval_res["error"])
+    return eval_res
+
+class ExplainCodeRequest(BaseModel):
+    problem_number: int
+    method: str
+
+@app.post("/api/reviews/explain")
+def explain_review_code(req: ExplainCodeRequest, client: Client = Depends(get_supabase_client)):
+    try:
+        user_id = db.get_current_user_id(client)
+        if not user_id:
+            raise HTTPException(status_code=401, detail="Authentication failed")
+        
+        res = client.table('problems').select('*').eq('user_id', user_id).eq('problem_number', req.problem_number).execute()
+        if not res.data:
+            raise HTTPException(status_code=404, detail=f"No local entry found for LeetCode {req.problem_number}")
+        
+        problem = None
+        for p in res.data:
+            pattern = p.get('pattern', '')
+            name = p.get('name', '')
+            if pattern.lower() == req.method.lower() or name.lower() == req.method.lower():
+                problem = p
+                break
+        
+        if not problem:
+            problem = res.data[0]
+            
+        reference_code = problem.get('reference_code')
+        if not reference_code:
+            raise HTTPException(status_code=400, detail="No reference code stored for this problem")
+            
+        optimal_time = problem.get('optimal_time', 'O(N)')
+        optimal_space = problem.get('optimal_space', 'O(N)')
+        problem_name = problem.get('name', '')
+        
+        eval_res = llm_reviewer.explain_code(
+            problem_name=problem_name,
+            code=reference_code,
+            optimal_time=optimal_time,
+            optimal_space=optimal_space
+        )
+        
+        if "error" in eval_res:
+            raise HTTPException(status_code=500, detail=eval_res["error"])
+            
+        return eval_res
+    except HTTPException:
+        raise
+    except Exception as e:
+        import traceback
+        db.log_trace(f"Explain endpoint error: {str(e)}\n{traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/journey-progress")
+def get_journey_progress(client: Client = Depends(get_supabase_client)):
+    return list(db.get_user_journey_progress(client))
+
+class ToggleJourneyRequest(BaseModel):
+    problem_number: int
+
+@app.post("/api/journey-progress/toggle")
+def toggle_journey(req: ToggleJourneyRequest, client: Client = Depends(get_supabase_client)):
+    db.toggle_journey_progress(req.problem_number, client)
+    return {"success": True}
+
+@app.get("/api/journey-progress/titles")
+def get_journey_titles(client: Client = Depends(get_supabase_client)):
+    return db.get_problem_titles_by_number(client)
+
+@app.post("/api/sync")
+def trigger_sync(client: Client = Depends(get_supabase_client)):
+    try:
+        res = gdrive_sync.sync_gdrive(client)
+        return {"message": res}
+    except Exception as e:
+        import traceback
+        err_msg = f"Sync endpoint exception: {str(e)}\n{traceback.format_exc()}"
+        db.log_trace(err_msg)
+        raise HTTPException(status_code=500, detail=err_msg)
+
+class SubmitPythonRequest(BaseModel):
+    code: str
+
+@app.get("/api/challenges/python/daily")
+def get_daily_python_challenge(client: Client = Depends(get_supabase_client)):
+    today_str = datetime.now(timezone.utc).strftime("%Y-%m-%d")
+    
+    if today_str not in DAILY_PYTHON_CHALLENGE_CACHE:
+        challenge = llm_reviewer.generate_daily_python_challenge()
+        if "error" in challenge:
+            raise HTTPException(status_code=500, detail=f"Failed to generate challenge: {challenge['error']}")
+        DAILY_PYTHON_CHALLENGE_CACHE[today_str] = challenge
+    
+    challenge = DAILY_PYTHON_CHALLENGE_CACHE[today_str]
+    
+    user_id = db.get_current_user_id(client)
+    completed = False
+    if user_id:
+        try:
+            res = client.table('challenge_history')\
+                .select('id')\
+                .eq('user_id', user_id)\
+                .eq('challenge_type', 'python')\
+                .eq('challenge_title', challenge.get("title", ""))\
+                .execute()
+            completed = len(res.data) > 0 if res.data else False
+        except Exception:
+            pass
+            
+    score_record = db.get_user_score(client)
+    total_score = score_record["total_score"] if score_record else 0
+    
+    return {
+        "title": challenge.get("title"),
+        "description": challenge.get("description"),
+        "difficulty": challenge.get("difficulty"),
+        "points": challenge.get("points"),
+        "starter_code": challenge.get("starter_code"),
+        "completed": completed,
+        "total_score": total_score
+    }
+
+@app.post("/api/challenges/python/submit")
+def submit_python_challenge(req: SubmitPythonRequest, client: Client = Depends(get_supabase_client)):
+    today_str = datetime.now(timezone.utc).strftime("%Y-%m-%d")
+    
+    if today_str not in DAILY_PYTHON_CHALLENGE_CACHE:
+        challenge = llm_reviewer.generate_daily_python_challenge()
+        if "error" in challenge:
+            raise HTTPException(status_code=500, detail=f"No challenge available: {challenge['error']}")
+        DAILY_PYTHON_CHALLENGE_CACHE[today_str] = challenge
+        
+    challenge = DAILY_PYTHON_CHALLENGE_CACHE[today_str]
+    test_cases = challenge.get("test_cases", [])
+    
+    run_res = sandbox.run_python_sandbox(req.code, test_cases)
+    
+    if not run_res.get("success", False):
+        return {
+            "success": False,
+            "error": run_res.get("error", "Unknown execution error"),
+            "sandbox_type": run_res.get("sandbox_type")
+        }
+        
+    results = run_res.get("results", [])
+    all_passed = len(results) > 0 and all(r.get("status") == "passed" for r in results)
+    
+    points_awarded = 0
+    completed_before = False
+    total_score = 0
+    
+    user_id = db.get_current_user_id(client)
+    if all_passed and user_id:
+        title = challenge.get("title", "Daily Python Challenge")
+        points = challenge.get("points", 100)
+        
+        try:
+            hist_res = client.table('challenge_history')\
+                .select('id')\
+                .eq('user_id', user_id)\
+                .eq('challenge_type', 'python')\
+                .eq('challenge_title', title)\
+                .execute()
+            completed_before = len(hist_res.data) > 0 if hist_res.data else False
+        except Exception:
+            pass
+            
+        if not completed_before:
+            db.increment_user_score(points, "python", client)
+            db.add_challenge_history("python", title, points, client)
+            points_awarded = points
+            
+    score_record = db.get_user_score(client)
+    if score_record:
+        total_score = score_record["total_score"]
+        
+    return {
+        "success": True,
+        "all_passed": all_passed,
+        "results": results,
+        "points_awarded": points_awarded,
+        "completed_before": completed_before,
+        "total_score": total_score,
+        "sandbox_type": run_res.get("sandbox_type"),
+        "sandbox_warning": run_res.get("sandbox_warning")
+    }
+
+
+class SQLQueryRequest(BaseModel):
+    query: str
+
+@app.post("/api/challenges/mysql/init")
+def init_mysql_challenge(client: Client = Depends(get_supabase_client)):
+    import os
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    challenge = llm_reviewer.generate_sql_challenge()
+    if "error" in challenge:
+        raise HTTPException(status_code=500, detail=f"Failed to generate SQL challenge: {challenge['error']}")
+        
+    init_res = sql_playground.init_user_db(user_id, challenge)
+    if not init_res.get("success", False):
+        raise HTTPException(status_code=500, detail=f"Failed to initialize database: {init_res.get('error')}")
+        
+    ACTIVE_SQL_CHALLENGES[user_id] = challenge
+    
+    score_record = db.get_user_score(client)
+    total_score = score_record["total_score"] if score_record else 0
+    
+    return {
+        "success": True,
+        "title": challenge.get("title"),
+        "objective": challenge.get("objective"),
+        "points": challenge.get("points"),
+        "schema": init_res.get("schema"),
+        "challenge_type": challenge.get("challenge_type"),
+        "total_score": total_score
+    }
+
+@app.get("/api/challenges/mysql/status")
+def get_mysql_status(client: Client = Depends(get_supabase_client)):
+    import os
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    if user_id not in ACTIVE_SQL_CHALLENGES:
+        return {"active": False, "message": "No active SQL session. Please initialize with 'db init'."}
+        
+    challenge = ACTIVE_SQL_CHALLENGES[user_id]
+    
+    db_path = sql_playground.get_db_path(user_id)
+    schema = {}
+    if os.path.exists(db_path):
+        import sqlite3
+        try:
+            conn = sqlite3.connect(db_path)
+            schema = sql_playground.get_db_schema(conn)
+            conn.close()
+        except Exception:
+            pass
+            
+    completed = False
+    try:
+        res = client.table('challenge_history')\
+            .select('id')\
+            .eq('user_id', user_id)\
+            .eq('challenge_type', 'mysql')\
+            .eq('challenge_title', challenge.get("title", ""))\
+            .execute()
+        completed = len(res.data) > 0 if res.data else False
+    except Exception:
+        pass
+        
+    score_record = db.get_user_score(client)
+    total_score = score_record["total_score"] if score_record else 0
+    
+    return {
+        "active": True,
+        "title": challenge.get("title"),
+        "objective": challenge.get("objective"),
+        "points": challenge.get("points"),
+        "challenge_type": challenge.get("challenge_type"),
+        "schema": schema,
+        "completed": completed,
+        "total_score": total_score
+    }
+
+@app.post("/api/challenges/mysql/query")
+def run_mysql_query(req: SQLQueryRequest, client: Client = Depends(get_supabase_client)):
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    if user_id not in ACTIVE_SQL_CHALLENGES:
+        raise HTTPException(status_code=400, detail="No active SQL session. Type 'db init' first.")
+        
+    challenge = ACTIVE_SQL_CHALLENGES[user_id]
+    
+    run_res = sql_playground.run_user_query(user_id, req.query, challenge)
+    
+    if not run_res.get("success", False):
+        return {
+            "success": False,
+            "error": run_res.get("error", "Unknown database error")
+        }
+        
+    is_correct = run_res.get("is_correct", False)
+    points_awarded = 0
+    completed_before = False
+    total_score = 0
+    
+    if is_correct:
+        title = challenge.get("title", "SQL Challenge")
+        points = challenge.get("points", 150)
+        
+        try:
+            hist_res = client.table('challenge_history')\
+                .select('id')\
+                .eq('user_id', user_id)\
+                .eq('challenge_type', 'mysql')\
+                .eq('challenge_title', title)\
+                .execute()
+            completed_before = len(hist_res.data) > 0 if hist_res.data else False
+        except Exception:
+            pass
+            
+        if not completed_before:
+            db.increment_user_score(points, "mysql", client)
+            db.add_challenge_history("mysql", title, points, client)
+            points_awarded = points
+            
+    score_record = db.get_user_score(client)
+    if score_record:
+        total_score = score_record["total_score"]
+        
+    return {
+        "success": True,
+        "is_correct": is_correct,
+        "columns": run_res.get("columns", []),
+        "rows": run_res.get("rows", []),
+        "rows_affected": run_res.get("rows_affected", 0),
+        "schema": run_res.get("schema", {}),
+        "points_awarded": points_awarded,
+        "completed_before": completed_before,
+        "total_score": total_score
+    }
+
+class CreateProblemRequest(BaseModel):
+    name: str
+    pattern: str
+    difficulty: str
+    reference_code: str
+    description: str = ""
+
+class UpdateProblemRequest(BaseModel):
+    name: str
+    pattern: str
+    difficulty: str
+    reference_code: str
+    description: str = ""
+
+@app.get("/api/explorer/problems")
+def get_explorer_problems(client: Client = Depends(get_supabase_client)):
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+    try:
+        res = client.table('problems')\
+            .select('id, name, pattern, difficulty, reference_code, description, user_reviews(box_level, next_review, last_reviewed, times_correct, total_attempts)')\
+            .eq('user_id', user_id)\
+            .execute()
+        
+        problems = res.data if res.data else []
+        for p in problems:
+            reviews = p.pop("user_reviews", [])
+            if reviews and isinstance(reviews, list) and len(reviews) > 0:
+                rev = reviews[0]
+                p["box_level"] = rev.get("box_level", 1)
+                p["next_review"] = rev.get("next_review")
+                p["last_reviewed"] = rev.get("last_reviewed")
+                p["times_correct"] = rev.get("times_correct", 0)
+                p["total_attempts"] = rev.get("total_attempts", 0)
+            else:
+                p["box_level"] = None
+                p["next_review"] = None
+                p["last_reviewed"] = None
+                p["times_correct"] = 0
+                p["total_attempts"] = 0
+        return problems
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/explorer/problems/create")
+def create_explorer_problem(req: CreateProblemRequest, client: Client = Depends(get_supabase_client)):
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    if not req.name.strip():
+        raise HTTPException(status_code=400, detail="Problem name cannot be empty")
+        
+    existing = db.get_problem_by_name(req.name, client)
+    if existing:
+        raise HTTPException(status_code=400, detail=f"A problem named '{req.name}' already exists.")
+        
+    try:
+        prob_data = {
+            "name": req.name.strip(),
+            "pattern": req.pattern.strip() or "General",
+            "difficulty": req.difficulty or "Medium",
+            "reference_code": req.reference_code,
+            "description": req.description
+        }
+        res_prob = db.insert_problem(prob_data, client)
+        if not res_prob or not res_prob.data:
+            raise HTTPException(status_code=500, detail="Failed to create problem record")
+            
+        new_prob_id = res_prob.data[0]['id']
+        
+        review_data = {
+            "problem_id": new_prob_id,
+            "box_level": 1,
+            "next_review": datetime.now(timezone.utc).isoformat(),
+            "times_correct": 0,
+            "total_attempts": 0
+        }
+        db.insert_review(review_data, client)
+        
+        return {"success": True, "problem_id": new_prob_id}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.put("/api/explorer/problems/{problem_id}")
+def update_explorer_problem(problem_id: str, req: UpdateProblemRequest, client: Client = Depends(get_supabase_client)):
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    try:
+        update_data = {
+            "name": req.name.strip(),
+            "pattern": req.pattern.strip() or "General",
+            "difficulty": req.difficulty or "Medium",
+            "reference_code": req.reference_code,
+            "description": req.description
+        }
+        res = db.update_problem(problem_id, update_data, client)
+        if not res or not res.data:
+            raise HTTPException(status_code=500, detail="Failed to update problem record")
+        return {"success": True}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/explorer/export")
+def export_solutions_zip(client: Client = Depends(get_supabase_client)):
+    import io
+    import zipfile
+    from fastapi.responses import StreamingResponse
+    import re
+    
+    user_id = db.get_current_user_id(client)
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Authentication failed")
+        
+    try:
+        res = client.table('problems')\
+            .select('name, pattern, difficulty, reference_code, description')\
+            .eq('user_id', user_id)\
+            .execute()
+        
+        problems = res.data if res.data else []
+        
+        zip_buffer = io.BytesIO()
+        with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file:
+            for p in problems:
+                name = p.get("name", "Unnamed_Problem")
+                pattern = p.get("pattern", "General")
+                difficulty = p.get("difficulty", "Medium")
+                code = p.get("reference_code", "")
+                description = p.get("description", "")
+                
+                safe_name = re.sub(r'[^\w\-]', '_', name)
+                filename = f"{safe_name}.py"
+                
+                if not code or not code.strip():
+                    desc_comment = f"\n# Description: {description}" if description else ""
+                    code = f"# Problem: {name}\n# Pattern: {pattern}\n# Difficulty: {difficulty}{desc_comment}\n# Write your solution here!\n\ndef solve():\n    pass\n"
+                else:
+                    if description:
+                        formatted_desc = "\n".join([f"# {line}" for line in description.splitlines()])
+                        code = f"# Description:\n{formatted_desc}\n\n" + code
+                    
+                zip_file.writestr(filename, code)
+                
+        zip_buffer.seek(0)
+        
+        headers = {
+            "Content-Disposition": "attachment; filename=algospaced_solutions.zip"
+        }
+        return StreamingResponse(
+            zip_buffer,
+            media_type="application/zip",
+            headers=headers
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+# Serve static files from Vite frontend in production
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+frontend_dist = os.path.join(os.path.dirname(__file__), "algospaced-ui", "dist")
+if os.path.exists(frontend_dist):
+    # Mount the assets directory (contains compiled js, css, images)
+    app.mount("/assets", StaticFiles(directory=os.path.join(frontend_dist, "assets")), name="assets")
+    
+    @app.get("/favicon.ico", include_in_schema=False)
+    def serve_favicon():
+        fav = os.path.join(frontend_dist, "favicon.ico")
+        if os.path.exists(fav):
+            return FileResponse(fav)
+        raise HTTPException(status_code=404)
+
+    @app.get("/{fallback_path:path}")
+    def serve_frontend(fallback_path: str):
+        # Prevent intercepting API routes
+        if fallback_path.startswith("api/"):
+            raise HTTPException(status_code=404, detail="API endpoint not found")
+            
+        index_file = os.path.join(frontend_dist, "index.html")
+        if os.path.exists(index_file):
+            return FileResponse(index_file)
+        raise HTTPException(status_code=404, detail="Frontend index.html not found")
+
+
+
+
+

requirements.txt

@@ -0,0 +1,12 @@
+streamlit>=1.35.0
+supabase>=2.5.1
+google-genai>=0.1.1
+google-api-python-client>=2.131.0
+google-auth-httplib2>=0.2.0
+google-auth-oauthlib>=1.2.0
+pandas>=2.2.2
+streamlit-cookies-controller>=0.0.4
+fastapi>=0.110.0
+uvicorn>=0.29.0
+toml>=0.10.2
+

run_app.bat

@@ -0,0 +1,20 @@
+@echo off
+echo Starting AlgoSpaced application stack...
+
+:: Start the FastAPI backend in a new window
+echo Launching FastAPI server...
+start "AlgoSpaced Backend" cmd /c ".\venv\Scripts\uvicorn main:app --reload --host 0.0.0.0 --port 8000"
+
+:: Start the React Vite frontend in a new window
+echo Launching React frontend...
+start "AlgoSpaced Frontend" cmd /c "cd algospaced-ui && npm run dev"
+
+:: Wait for 3 seconds
+echo Waiting for servers to initialize...
+timeout /t 3 /nobreak >nul
+
+:: Launch default browser
+echo Opening browser...
+start http://localhost:5173
+
+echo All services launched!

sandbox.py

@@ -0,0 +1,198 @@
+import sys
+import subprocess
+import json
+import tempfile
+import os
+
+EXECUTION_TEMPLATE = """
+import sys
+import json
+import traceback
+
+# --- User Code Start ---
+{user_code}
+# --- User Code End ---
+
+def run_tests():
+    test_cases = {test_cases_json}
+    results = []
+    
+    # Locate entry point function
+    func = None
+    if 'solve' in globals() and callable(globals()['solve']):
+        func = globals()['solve']
+    else:
+        for name, obj in list(globals().items()):
+            if callable(obj) and not name.startswith('_') and name not in ('run_tests', 'sys', 'json', 'traceback', 'copy'):
+                func = obj
+                break
+                
+    if not func:
+        print(json.dumps([ {{"status": "error", "error": "No callable function found in your code. Please define a function (e.g., 'def solve(...)')."}} ]))
+        return
+
+    for idx, tc in enumerate(test_cases):
+        inputs = tc.get("input", [])
+        expected = tc.get("expected")
+        if not isinstance(inputs, list):
+            inputs = [inputs]
+        try:
+            import copy
+            args = copy.deepcopy(inputs)
+            res = func(*args)
+            
+            # Comparison
+            is_match = (res == expected)
+            results.append({{
+                "index": idx,
+                "status": "passed" if is_match else "failed",
+                "input": inputs,
+                "expected": expected,
+                "got": res
+            }})
+        except Exception as e:
+            results.append({{
+                "index": idx,
+                "status": "error",
+                "input": inputs,
+                "expected": expected,
+                "error": str(e),
+                "traceback": traceback.format_exc().splitlines()[-2:]
+            }})
+            
+    print(json.dumps(results))
+
+if __name__ == '__main__':
+    run_tests()
+"""
+
+
+def run_python_sandbox(user_code: str, test_cases: list, timeout: float = 4.0) -> dict:
+    """
+    Executes user code against test cases in an isolated sandbox.
+    Attempts Docker execution first, then falls back to restricted subprocess.
+    """
+    test_cases_json = json.dumps(test_cases)
+    full_script = EXECUTION_TEMPLATE.format(
+        user_code=user_code,
+        test_cases_json=test_cases_json
+    )
+    
+    # Try Docker execution
+    try:
+        # Run python:3.11-slim container with stdin, no network, 128MB memory, 0.5 CPU
+        # On Windows, we pipe the script directly to python via stdin to avoid path mounts
+        cmd = [
+            "docker", "run", "--rm", "-i",
+            "--network", "none",
+            "--memory", "128m",
+            "--cpus", "0.5",
+            "python:3.11-slim",
+            "python"
+        ]
+        
+        proc = subprocess.Popen(
+            cmd,
+            stdin=subprocess.PIPE,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True
+        )
+        
+        stdout, stderr = proc.communicate(input=full_script, timeout=timeout)
+        
+        if proc.returncode == 137:
+            return {
+                "success": False,
+                "error": "Memory limit exceeded (OOM) or container killed.",
+                "sandbox_type": "docker"
+            }
+        
+        if proc.returncode != 0:
+            return {
+                "success": False,
+                "error": stderr or f"Execution failed with code {proc.returncode}",
+                "sandbox_type": "docker"
+            }
+            
+        try:
+            results = json.loads(stdout.strip())
+            return {
+                "success": True,
+                "results": results,
+                "sandbox_type": "docker"
+            }
+        except json.JSONDecodeError:
+            return {
+                "success": False,
+                "error": f"Invalid output from execution: {stdout}\nErrors: {stderr}",
+                "sandbox_type": "docker"
+            }
+            
+    except (subprocess.TimeoutExpired, TimeoutError):
+        # Clean up process
+        try:
+            proc.kill()
+        except Exception:
+            pass
+        return {
+            "success": False,
+            "error": f"Execution timed out. Code exceeded max runtime of {timeout}s.",
+            "sandbox_type": "docker"
+        }
+    except Exception as docker_err:
+        # Fall back to native local subprocess execution with limited environment
+        return run_local_fallback(full_script, timeout, str(docker_err))
+
+def run_local_fallback(script_content: str, timeout: float, debug_msg: str) -> dict:
+    """
+    Fallback execution using current python environment.
+    """
+    try:
+        proc = subprocess.Popen(
+            [sys.executable],
+            stdin=subprocess.PIPE,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+            text=True
+        )
+        stdout, stderr = proc.communicate(input=script_content, timeout=timeout)
+        
+        if proc.returncode != 0:
+            return {
+                "success": False,
+                "error": stderr or f"Local execution failed with code {proc.returncode}",
+                "sandbox_type": "local_fallback",
+                "sandbox_warning": f"Docker isolation unavailable: {debug_msg}"
+            }
+            
+        try:
+            results = json.loads(stdout.strip())
+            return {
+                "success": True,
+                "results": results,
+                "sandbox_type": "local_fallback",
+                "sandbox_warning": f"Docker isolation unavailable: {debug_msg}"
+            }
+        except json.JSONDecodeError:
+            return {
+                "success": False,
+                "error": f"Invalid output from local runner: {stdout}",
+                "sandbox_type": "local_fallback"
+            }
+    except subprocess.TimeoutExpired:
+        try:
+            proc.kill()
+        except Exception:
+            pass
+        return {
+            "success": False,
+            "error": f"Local execution timed out. Code exceeded {timeout}s.",
+            "sandbox_type": "local_fallback"
+        }
+    except Exception as e:
+        return {
+            "success": False,
+            "error": f"Failed to execute local fallback runner: {str(e)}",
+            "sandbox_type": "none"
+        }

schema.sql

@@ -0,0 +1,125 @@
+-- Drop existing tables if they exist to prevent schema mismatch
+DROP TABLE IF EXISTS user_reviews CASCADE;
+DROP TABLE IF EXISTS user_streaks CASCADE;
+DROP TABLE IF EXISTS problems CASCADE;
+
+-- Enable UUID extension
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
+
+-- Table: problems
+CREATE TABLE problems (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    name VARCHAR(255) NOT NULL,
+    problem_number INTEGER, -- Tracked for Journey Path
+    pattern VARCHAR(100) NOT NULL,
+    difficulty VARCHAR(20) NOT NULL DEFAULT 'Medium' CHECK (difficulty IN ('Easy', 'Medium', 'Hard')),
+    google_doc_url TEXT,
+    google_doc_id VARCHAR(100), -- Tracks file
+    optimal_time VARCHAR(50) NOT NULL DEFAULT 'O(N)',
+    optimal_space VARCHAR(50) NOT NULL DEFAULT 'O(N)',
+    description TEXT,
+    reference_code TEXT, -- Stores reference code synced from Doc
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT unique_user_problem UNIQUE (user_id, name)
+);
+
+-- Table: user_reviews
+CREATE TABLE user_reviews (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    problem_id UUID NOT NULL REFERENCES problems(id) ON DELETE CASCADE,
+    box_level INTEGER NOT NULL DEFAULT 1 CHECK (box_level BETWEEN 1 AND 5),
+    last_reviewed TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    next_review TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    times_correct INTEGER NOT NULL DEFAULT 0,
+    total_attempts INTEGER NOT NULL DEFAULT 0,
+    CONSTRAINT unique_user_problem_review UNIQUE (user_id, problem_id)
+);
+
+-- Table: user_streaks
+CREATE TABLE user_streaks (
+    user_id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+    current_streak INTEGER NOT NULL DEFAULT 0 CHECK (current_streak >= 0),
+    longest_streak INTEGER NOT NULL DEFAULT 0 CHECK (longest_streak >= 0),
+    last_active_date DATE,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Enable RLS on all tables
+ALTER TABLE problems ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_reviews ENABLE ROW LEVEL SECURITY;
+ALTER TABLE user_streaks ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies for problems
+CREATE POLICY select_problems ON problems FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_problems ON problems FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_problems ON problems FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_problems ON problems FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+-- RLS Policies for user_reviews
+CREATE POLICY select_reviews ON user_reviews FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_reviews ON user_reviews FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_reviews ON user_reviews FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_reviews ON user_reviews FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+-- RLS Policies for user_streaks
+CREATE POLICY select_streaks ON user_streaks FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_streaks ON user_streaks FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_streaks ON user_streaks FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_streaks ON user_streaks FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+-- Table: user_journey_progress
+CREATE TABLE user_journey_progress (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    problem_number INTEGER NOT NULL,
+    viewed_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT unique_user_journey_problem UNIQUE (user_id, problem_number)
+);
+
+-- Enable RLS on new table
+ALTER TABLE user_journey_progress ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies for user_journey_progress
+CREATE POLICY select_journey ON user_journey_progress FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_journey ON user_journey_progress FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_journey ON user_journey_progress FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_journey ON user_journey_progress FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+-- Table: user_scores
+CREATE TABLE IF NOT EXISTS user_scores (
+    user_id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+    total_score INTEGER DEFAULT 0 CHECK (total_score >= 0),
+    python_challenges_completed INTEGER DEFAULT 0,
+    sql_challenges_completed INTEGER DEFAULT 0,
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Table: challenge_history
+CREATE TABLE IF NOT EXISTS challenge_history (
+    id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+    challenge_type VARCHAR(20) NOT NULL CHECK (challenge_type IN ('python', 'mysql')),
+    challenge_title VARCHAR(255) NOT NULL,
+    points_awarded INTEGER NOT NULL DEFAULT 0,
+    completed_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Enable RLS on new tables
+ALTER TABLE user_scores ENABLE ROW LEVEL SECURITY;
+ALTER TABLE challenge_history ENABLE ROW LEVEL SECURITY;
+
+-- RLS Policies for user_scores
+CREATE POLICY select_scores ON user_scores FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_scores ON user_scores FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_scores ON user_scores FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_scores ON user_scores FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+-- RLS Policies for challenge_history
+CREATE POLICY select_history ON challenge_history FOR SELECT TO authenticated USING (auth.uid() = user_id);
+CREATE POLICY insert_history ON challenge_history FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id);
+CREATE POLICY update_history ON challenge_history FOR UPDATE TO authenticated USING (auth.uid() = user_id) WITH CHECK (auth.uid() = user_id);
+CREATE POLICY delete_history ON challenge_history FOR DELETE TO authenticated USING (auth.uid() = user_id);
+
+

scratch/test_explorer_upgrades.py

@@ -0,0 +1,232 @@
+import os
+import sys
+import io
+import zipfile
+from fastapi.testclient import TestClient
+
+# Add workspace root to python path
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from main import app, get_supabase_client
+
+# Define mock classes to intercept Supabase client interactions
+class MockResponse:
+    def __init__(self, data):
+        self.data = data
+
+class MockQueryBuilder:
+    def __init__(self, table_name, mock_client):
+        self.table_name = table_name
+        self.mock_client = mock_client
+        self.filters = {}
+
+    def select(self, columns):
+        return self
+
+    def eq(self, column, value):
+        self.filters[column] = value
+        return self
+
+    def insert(self, data):
+        if self.table_name == 'problems':
+            if not isinstance(data, list):
+                data = [data]
+            inserted = []
+            for item in data:
+                item_copy = item.copy()
+                if 'id' not in item_copy:
+                    item_copy['id'] = f"mock-prob-id-{len(self.mock_client.problems) + 1}"
+                self.mock_client.problems.append(item_copy)
+                inserted.append(item_copy)
+            self.last_result = inserted
+        elif self.table_name == 'user_reviews':
+            if not isinstance(data, list):
+                data = [data]
+            inserted = []
+            for item in data:
+                item_copy = item.copy()
+                if 'id' not in item_copy:
+                    item_copy['id'] = f"mock-rev-id-{len(self.mock_client.reviews) + 1}"
+                self.mock_client.reviews.append(item_copy)
+                inserted.append(item_copy)
+            self.last_result = inserted
+        return self
+
+    def update(self, data):
+        self.update_data = data
+        return self
+
+    def execute(self):
+        if hasattr(self, 'last_result'):
+            return MockResponse(self.last_result)
+        
+        if self.table_name == 'problems':
+            name_filter = self.filters.get('name')
+            id_filter = self.filters.get('id')
+            
+            # If update was called
+            if hasattr(self, 'update_data'):
+                updated = []
+                for p in self.mock_client.problems:
+                    if id_filter and p.get('id') == id_filter:
+                        p.update(self.update_data)
+                        updated.append(p)
+                return MockResponse(updated)
+                
+            matches = []
+            for p in self.mock_client.problems:
+                if name_filter and p.get('name') != name_filter:
+                    continue
+                if id_filter and p.get('id') != id_filter:
+                    continue
+                p_copy = p.copy()
+                p_reviews = [r for r in self.mock_client.reviews if r.get('problem_id') == p.get('id')]
+                p_copy['user_reviews'] = p_reviews
+                matches.append(p_copy)
+            return MockResponse(matches)
+            
+        elif self.table_name == 'user_reviews':
+            return MockResponse(self.mock_client.reviews)
+            
+        return MockResponse([])
+
+class MockSupabaseClient:
+    def __init__(self):
+        self.problems = []
+        self.reviews = []
+        self.current_user_id = "mock_user_123"
+        self.auth = self
+
+    def get_user(self, token):
+        class MockUser:
+            id = "mock_user_123"
+        class MockUserRes:
+            user = MockUser()
+        return MockUserRes()
+
+    def table(self, table_name):
+        return MockQueryBuilder(table_name, self)
+
+# Create a shared mock client state
+shared_mock_client = MockSupabaseClient()
+
+# Override FastAPI dependency
+def mock_get_supabase_client():
+    return shared_mock_client
+
+app.dependency_overrides[get_supabase_client] = mock_get_supabase_client
+
+client = TestClient(app)
+
+def test_explorer_endpoints():
+    print("=== Running Explorer REST API Tests ===")
+    headers = {"Authorization": "Bearer mock-token-123"}
+    
+    # 1. Create Problem 1 (Two Sum)
+    print("\n1. Testing POST /api/explorer/problems/create (Two Sum)")
+    create_payload = {
+        "name": "Two Sum",
+        "pattern": "Two Pointers",
+        "difficulty": "Easy",
+        "reference_code": "def twoSum(nums, target):\n    pass",
+        "description": "Find two numbers in the array that sum to target."
+    }
+    res = client.post("/api/explorer/problems/create", json=create_payload, headers=headers)
+    print("Response status:", res.status_code)
+    print("Response JSON:", res.json())
+    assert res.status_code == 200
+    assert res.json()["success"] is True
+    prob1_id = res.json()["problem_id"]
+    
+    # Verify review was created
+    assert len(shared_mock_client.reviews) == 1
+    assert shared_mock_client.reviews[0]["problem_id"] == prob1_id
+    assert shared_mock_client.reviews[0]["box_level"] == 1
+
+    # 2. Try to create duplicate problem
+    print("\n2. Testing duplicate prevention")
+    res_dup = client.post("/api/explorer/problems/create", json=create_payload, headers=headers)
+    print("Response status:", res_dup.status_code)
+    print("Response JSON:", res_dup.json())
+    assert res_dup.status_code == 400
+    assert "already exists" in res_dup.json()["detail"]
+
+    # 3. Create Problem 2 (Three Sum)
+    print("\n3. Testing POST /api/explorer/problems/create (Three Sum)")
+    create_payload_2 = {
+        "name": "Three Sum",
+        "pattern": "Two Pointers",
+        "difficulty": "Medium",
+        "reference_code": "def threeSum(nums):\n    pass",
+        "description": "Find all unique triplets that sum to zero."
+    }
+    res2 = client.post("/api/explorer/problems/create", json=create_payload_2, headers=headers)
+    assert res2.status_code == 200
+    prob2_id = res2.json()["problem_id"]
+
+    # 4. List Problems
+    print("\n4. Testing GET /api/explorer/problems")
+    res_list = client.get("/api/explorer/problems", headers=headers)
+    print("Response status:", res_list.status_code)
+    problems_list = res_list.json()
+    print("List count:", len(problems_list))
+    for p in problems_list:
+        print(f"  - Problem: {p['name']}, Box: {p['box_level']}, Description: '{p['description']}', Code length: {len(p['reference_code'])}")
+    assert res_list.status_code == 200
+    assert len(problems_list) == 2
+    assert problems_list[0]["box_level"] == 1
+    assert problems_list[0]["description"] == "Find two numbers in the array that sum to target."
+
+    # 5. Update reference code for Two Sum
+    print("\n5. Testing PUT /api/explorer/problems/{id}")
+    new_code = "def twoSum(nums, target):\n    # Optimized solution\n    seen = {}\n    for i, num in enumerate(nums):\n        diff = target - num\n        if diff in seen:\n            return [seen[diff], i]\n        seen[num] = i\n    return []"
+    update_payload = {
+        "name": "Two Sum",
+        "pattern": "Two Pointers",
+        "difficulty": "Easy",
+        "reference_code": new_code,
+        "description": "Find two numbers in the array that sum to target (Optimized)."
+    }
+    res_update = client.put(f"/api/explorer/problems/{prob1_id}", json=update_payload, headers=headers)
+    print("Response status:", res_update.status_code)
+    print("Response JSON:", res_update.json())
+    assert res_update.status_code == 200
+    assert res_update.json()["success"] is True
+
+    # Verify update in listing
+    res_list2 = client.get("/api/explorer/problems", headers=headers)
+    problems_list2 = res_list2.json()
+    two_sum_updated = next(p for p in problems_list2 if p["id"] == prob1_id)
+    print("Updated Two Sum code length:", len(two_sum_updated["reference_code"]))
+    print("Updated Two Sum description:", two_sum_updated["description"])
+    assert "Optimized solution" in two_sum_updated["reference_code"]
+    assert "Optimized" in two_sum_updated["description"]
+
+    # 6. Export ZIP of solutions
+    print("\n6. Testing GET /api/explorer/export (ZIP download)")
+    res_export = client.get("/api/explorer/export", headers=headers)
+    print("Response status:", res_export.status_code)
+    print("Content-Type:", res_export.headers.get("content-type"))
+    assert res_export.status_code == 200
+    assert res_export.headers.get("content-type") == "application/zip"
+    
+    # Validate Zip structure
+    zip_bytes = io.BytesIO(res_export.content)
+    with zipfile.ZipFile(zip_bytes, "r") as zf:
+        namelist = zf.namelist()
+        print("Files in ZIP:", namelist)
+        assert "Two_Sum.py" in namelist
+        assert "Three_Sum.py" in namelist
+        
+        # Read content from ZIP
+        two_sum_zip_code = zf.read("Two_Sum.py").decode("utf-8")
+        print("Two_Sum.py contents in ZIP:")
+        print(two_sum_zip_code)
+        assert "Optimized solution" in two_sum_zip_code
+        assert "# Description:" in two_sum_zip_code
+        assert "Find two numbers in the array that sum to target" in two_sum_zip_code
+
+    print("\n=== ALL TESTS PASSED SUCCESSFULLY ===")
+
+if __name__ == "__main__":
+    test_explorer_endpoints()

scratch/test_sandbox_sql.py

@@ -0,0 +1,79 @@
+import os
+import sys
+
+# Add root folder to sys.path so we can import sandbox and sql_playground
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+import sandbox
+import sql_playground
+
+def test_python_sandbox():
+    print("--- Testing Python Sandbox ---")
+    
+    # 1. Correct Submission Test
+    correct_code = "def solve(a, b):\n    return a + b"
+    test_cases = [
+        {"input": [1, 2], "expected": 3},
+        {"input": [10, -5], "expected": 5}
+    ]
+    res_correct = sandbox.run_python_sandbox(correct_code, test_cases)
+    print("Correct Code Result:")
+    print("Success:", res_correct.get("success"))
+    print("Sandbox Type:", res_correct.get("sandbox_type"))
+    if res_correct.get("success"):
+        for r in res_correct["results"]:
+            print(f"  Test {r['index'] + 1}: status={r['status']}, got={r['got']}")
+            
+    # 2. Logic Failure Test
+    failed_code = "def solve(a, b):\n    return a - b"
+    res_failed = sandbox.run_python_sandbox(failed_code, test_cases)
+    print("\nFailed Code Result:")
+    print("Success:", res_failed.get("success"))
+    if res_failed.get("success"):
+        for r in res_failed["results"]:
+            print(f"  Test {r['index'] + 1}: status={r['status']}, got={r['got']}, expected={r['expected']}")
+
+def test_sql_playground():
+    print("\n--- Testing SQL Playground ---")
+    user_id = "test_developer_123"
+    
+    challenge = {
+        "title": "High Earners",
+        "objective": "Find employees with salary greater than 85000",
+        "ddl": "CREATE TABLE employees (id INTEGER PRIMARY KEY, name TEXT, department TEXT, salary INTEGER);",
+        "inserts": "INSERT INTO employees VALUES (1, 'Alice', 'Engineering', 95000); INSERT INTO employees VALUES (2, 'Bob', 'HR', 75000); INSERT INTO employees VALUES (3, 'Charlie', 'Engineering', 100000);",
+        "validation_query": "SELECT name FROM employees WHERE salary > 85000;",
+        "challenge_type": "SELECT",
+        "points": 150
+    }
+    
+    # 1. Init DB
+    init_res = sql_playground.init_user_db(user_id, challenge)
+    print("DB Init Result:", init_res)
+    
+    # 2. Run correct SELECT query
+    correct_query = "SELECT name FROM employees WHERE salary > 85000"
+    res_correct = sql_playground.run_user_query(user_id, correct_query, challenge)
+    print("\nCorrect Query Result:")
+    print("Success:", res_correct.get("success"))
+    print("Is Correct:", res_correct.get("is_correct"))
+    print("Columns:", res_correct.get("columns"))
+    print("Rows:", res_correct.get("rows"))
+    
+    # 3. Run incorrect SELECT query
+    incorrect_query = "SELECT name FROM employees"
+    res_incorrect = sql_playground.run_user_query(user_id, incorrect_query, challenge)
+    print("\nIncorrect Query Result:")
+    print("Success:", res_incorrect.get("success"))
+    print("Is Correct:", res_incorrect.get("is_correct"))
+    
+    # 4. Test safety check
+    unsafe_query = "SELECT name FROM employees; DROP TABLE employees;"
+    res_unsafe = sql_playground.run_user_query(user_id, unsafe_query, challenge)
+    print("\nUnsafe Query Result:")
+    print("Success:", res_unsafe.get("success"))
+    print("Error:", res_unsafe.get("error"))
+
+if __name__ == '__main__':
+    test_python_sandbox()
+    test_sql_playground()

sql_playground.py

@@ -0,0 +1,268 @@
+import os
+import sqlite3
+import re
+import json
+
+DB_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "scratch")
+
+def get_db_path(user_id: str, suffix: str = "") -> str:
+    """Returns the path to the user's SQLite session database."""
+    # Ensure scratch dir exists
+    os.makedirs(DB_DIR, exist_ok=True)
+    clean_id = "".join(c for c in user_id if c.isalnum() or c in ("-", "_"))
+    return os.path.join(DB_DIR, f"db_{clean_id}{suffix}.sqlite")
+
+def is_query_safe(sql: str) -> tuple[bool, str]:
+    """
+    Checks if a query is safe to execute.
+    Blocks command chaining, ATTACH, PRAGMA, and database administration commands.
+    """
+    cleaned = sql.strip().upper()
+    
+    # 1. Block command chaining (multiple queries separated by semicolon)
+    # Strip trailing semicolons first, then check if any semicolon remains
+    temp = cleaned.rstrip(';')
+    if ';' in temp:
+        return False, "Query chaining (using ';') is disabled for security."
+        
+    # 2. Block file attachment and direct system configurations
+    blocked_keywords = [
+        r"\bATTACH\b", r"\bDETACH\b", r"\bPRAGMA\b", r"\bLOAD_EXTENSION\b", 
+        r"\bSHUTDOWN\b", r"\bGRANT\b", r"\bREVOKE\b"
+    ]
+    for pattern in blocked_keywords:
+        if re.search(pattern, cleaned):
+            return False, f"SQL command blocked for security: contains restricted keyword."
+            
+    return True, ""
+
+def get_db_schema(conn: sqlite3.Connection) -> dict:
+    """Extracts column definitions for all tables in the database."""
+    cursor = conn.cursor()
+    cursor.execute("SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%';")
+    tables = [row[0] for row in cursor.fetchall()]
+    
+    schema = {}
+    for table in tables:
+        cursor.execute(f"PRAGMA table_info({table});")
+        # PRAGMA returns: (cid, name, type, notnull, dflt_value, pk)
+        columns = [{"name": r[1], "type": r[2]} for r in cursor.fetchall()]
+        schema[table] = columns
+    return schema
+
+def init_user_db(user_id: str, challenge: dict) -> dict:
+    """
+    Initializes a fresh session database for the user with DDL and mock data.
+    """
+    db_path = get_db_path(user_id)
+    
+    # Remove existing db if it exists
+    if os.path.exists(db_path):
+        try:
+            os.remove(db_path)
+        except Exception as e:
+            return {"success": False, "error": f"Failed to reset database session: {str(e)}"}
+            
+    conn = None
+    try:
+        conn = sqlite3.connect(db_path)
+        cursor = conn.cursor()
+        
+        # Execute DDL
+        ddl = challenge.get("ddl", "")
+        # Split DDL by semicolon to run statements sequentially
+        for statement in ddl.split(';'):
+            stmt = statement.strip()
+            if stmt:
+                cursor.execute(stmt)
+                
+        # Execute Mock Data INSERTS
+        inserts = challenge.get("inserts", "")
+        for statement in inserts.split(';'):
+            stmt = statement.strip()
+            if stmt:
+                cursor.execute(stmt)
+                
+        conn.commit()
+        
+        # Extract schema for frontend visualization
+        schema = get_db_schema(conn)
+        return {
+            "success": True,
+            "schema": schema,
+            "message": "Database initialized successfully."
+        }
+    except Exception as e:
+        return {"success": False, "error": f"Database initialization failed: {str(e)}"}
+    finally:
+        if conn:
+            conn.close()
+
+def run_user_query(user_id: str, query: str, challenge: dict) -> dict:
+    """
+    Executes a query against the user's session database and validates results.
+    """
+    # 1. Input Safety Validation
+    is_safe, err_msg = is_query_safe(query)
+    if not is_safe:
+        return {"success": False, "error": err_msg}
+        
+    db_path = get_db_path(user_id)
+    if not os.path.exists(db_path):
+        return {"success": False, "error": "Database session not initialized. Type 'db init' first."}
+        
+    conn = None
+    try:
+        conn = sqlite3.connect(db_path)
+        # Enable column-name dictionary rows
+        conn.row_factory = sqlite3.Row
+        cursor = conn.cursor()
+        
+        # Run query with execution timeout (sqlite3 doesn't have a direct query timeout in execute,
+        # but we can set busy_timeout, or just rely on local speed. Since it is local SQLite with small mock data,
+        # execution time is sub-millisecond unless there is an infinite loop CTE.
+        # SQLite detects circular CTEs, but we will wrap execute in a try block)
+        cursor.execute(query)
+        
+        # Determine if statement returns rows
+        is_select = challenge.get("challenge_type", "SELECT").upper() == "SELECT"
+        
+        rows = []
+        columns = []
+        rows_affected = cursor.rowcount
+        
+        if cursor.description:
+            columns = [col[0] for col in cursor.description]
+            db_rows = cursor.fetchall()
+            # Convert SQLite Row objects to list of dicts
+            rows = [dict(r) for r in db_rows]
+            
+        conn.commit()
+        
+        # 2. Validation Engine
+        validation_success = False
+        challenge_type = challenge.get("challenge_type", "SELECT").upper()
+        
+        if challenge_type == "SELECT":
+            validation_success = validate_select_query(user_id, query, challenge.get("validation_query", ""))
+        elif challenge_type == "DML":
+            # For UPDATE/DELETE, we check if the user's table states match the target table states
+            validation_success = validate_dml_query(user_id, query, challenge)
+            
+        return {
+            "success": True,
+            "columns": columns,
+            "rows": rows,
+            "rows_affected": rows_affected if rows_affected >= 0 else 0,
+            "is_correct": validation_success,
+            "schema": get_db_schema(conn)
+        }
+        
+    except Exception as e:
+        if conn:
+            conn.rollback()
+        return {"success": False, "error": f"SQL execution error: {str(e)}"}
+    finally:
+        if conn:
+            conn.close()
+
+def validate_select_query(user_id: str, user_query: str, golden_query: str) -> bool:
+    """
+    Validates a SELECT query by running both user query and golden query
+    and comparing output sets.
+    """
+    db_path = get_db_path(user_id)
+    conn = None
+    try:
+        conn = sqlite3.connect(db_path)
+        cursor = conn.cursor()
+        
+        # Run user query
+        cursor.execute(user_query)
+        user_res = cursor.fetchall()
+        
+        # Run golden query
+        cursor.execute(golden_query)
+        golden_res = cursor.fetchall()
+        
+        # Compare row sets (ignoring row order for general checking, unless they differ)
+        # We check set equality of row tuples
+        return set(user_res) == set(golden_res)
+    except Exception:
+        return False
+    finally:
+        if conn:
+            conn.close()
+
+def validate_dml_query(user_id: str, user_query: str, challenge: dict) -> bool:
+    """
+    Validates UPDATE/DELETE challenges by comparing database states.
+    We initialize a reference database, run the golden DML query on it,
+    and verify all tables in both databases are identical.
+    """
+    db_user_path = get_db_path(user_id)
+    db_ref_path = get_db_path(user_id, "_ref")
+    
+    # 1. Initialize reference database
+    if os.path.exists(db_ref_path):
+        os.remove(db_ref_path)
+        
+    conn_ref = None
+    conn_user = None
+    try:
+        # Spin up reference DB matching original state
+        conn_ref = sqlite3.connect(db_ref_path)
+        cursor_ref = conn_ref.cursor()
+        
+        # Setup tables and inserts
+        for stmt in challenge.get("ddl", "").split(';'):
+            if stmt.strip():
+                cursor_ref.execute(stmt)
+        for stmt in challenge.get("inserts", "").split(';'):
+            if stmt.strip():
+                cursor_ref.execute(stmt)
+                
+        # Run golden validation DML query on reference DB
+        cursor_ref.execute(challenge.get("validation_query", ""))
+        conn_ref.commit()
+        
+        # 2. Fetch all tables
+        cursor_ref.execute("SELECT name FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%';")
+        tables = [row[0] for row in cursor_ref.fetchall()]
+        
+        # Connect to user's updated database
+        conn_user = sqlite3.connect(db_user_path)
+        cursor_user = conn_user.cursor()
+        
+        # Compare contents of every table
+        for table in tables:
+            # Check user table exists
+            cursor_user.execute(f"SELECT name FROM sqlite_master WHERE type='table' AND name='{table}';")
+            if not cursor_user.fetchone():
+                return False
+                
+            # Get table content from reference DB
+            cursor_ref.execute(f"SELECT * FROM {table};")
+            ref_rows = cursor_ref.fetchall()
+            
+            # Get table content from user DB
+            cursor_user.execute(f"SELECT * FROM {table};")
+            user_rows = cursor_user.fetchall()
+            
+            if set(ref_rows) != set(user_rows):
+                return False
+                
+        return True
+    except Exception:
+        return False
+    finally:
+        if conn_ref:
+            conn_ref.close()
+        if conn_user:
+            conn_user.close()
+        # Clean up reference DB file
+        if os.path.exists(db_ref_path):
+            try:
+                os.remove(db_ref_path)
+            except Exception:
+                pass

srs_logic.py

@@ -0,0 +1,66 @@
+from datetime import datetime, timedelta, timezone
+
+def calculate_next_review(box_level: int) -> datetime:
+    intervals = {
+        1: 1,
+        2: 3,
+        3: 7,
+        4: 14,
+        5: 30
+    }
+    days = intervals.get(box_level, 1)
+    return datetime.now(timezone.utc) + timedelta(days=days)
+
+def evaluate_new_box(current_box: int, rating: str) -> int:
+    """
+    rating: "Correct", "Mixed", "Incorrect"
+    """
+    if rating == "Correct":
+        return min(current_box + 1, 5)
+    elif rating == "Mixed":
+        return current_box
+    else: # Incorrect
+        return 1
+
+def lazy_check_streak(streak_data):
+    """
+    Evaluates streak on Login (lazy checking). 
+    Resets to 0 if the user missed a day.
+    """
+    if not streak_data.get('last_active_date'):
+        return streak_data
+
+    now = datetime.now(timezone.utc)
+    current_date = now.date()
+    last_active_date = datetime.strptime(streak_data['last_active_date'], '%Y-%m-%d').date()
+    
+    delta = (current_date - last_active_date).days
+    
+    if delta > 1:
+        streak_data['current_streak'] = 0
+    return streak_data
+
+def increment_streak(streak_data):
+    """
+    Updates the streak object when a practice session is completed.
+    """
+    now = datetime.now(timezone.utc)
+    current_date = now.date()
+    
+    last_active = streak_data.get('last_active_date')
+    if last_active:
+        last_active_date = datetime.strptime(last_active, '%Y-%m-%d').date()
+        delta = (current_date - last_active_date).days
+    else:
+        delta = 2 # force increment for first time
+        
+    if delta == 1 or last_active is None:
+        streak_data['current_streak'] += 1
+        streak_data['longest_streak'] = max(streak_data['longest_streak'], streak_data['current_streak'])
+    elif delta > 1:
+        # Restarting streak
+        streak_data['current_streak'] = 1
+        streak_data['longest_streak'] = max(streak_data['longest_streak'], streak_data['current_streak'])
+    
+    streak_data['last_active_date'] = current_date.isoformat()
+    return streak_data