Initial commit of RedThread project

.gitignore

@@ -0,0 +1,39 @@
+# Dependencies
+node_modules/
+.next/
+dist/
+dist-ssr/
+build/
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Databases and Scraping
+*.sqlite
+locations.sqlite
+*.db
+scraper_log.txt
+server_run.log
+build_error.log
+
+# Logs and Debugging
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# IDEs
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db

README.md

@@ -0,0 +1,60 @@
+# RedThread
+
+**AI-assisted location-based recommendation platform** that combines intelligent intent parsing, safety validation, and structured data extraction.
+
+## Architecture
+
+```
+ultimate_spider/
+├── client/               # React + Vite frontend
+│   └── src/
+│       ├── api/          # Backend communication layer
+│       ├── components/   # Reusable UI components
+│       ├── pages/        # Page-level compositions
+│       └── styles/       # Design system
+└── server/               # Node.js + Express backend
+    └── src/
+        ├── config/       # Environment-driven configuration
+        ├── controllers/  # Request orchestration (thin)
+        ├── middleware/   # Rate limiting, safety guard, error handler
+        ├── routes/       # HTTP route definitions
+        ├── services/     # Business logic (AI, safety, scraper)
+        ├── utils/        # Logger, custom errors
+        └── validators/   # Request body validation
+```
+
+## Quick Start
+
+```bash
+# Backend
+cd server
+npm install
+cp .env.example .env     # Add your GROQ_API_KEY
+npm run dev
+
+# Frontend (new terminal)
+cd client
+npm install
+npm run dev
+```
+
+- **Frontend**: http://localhost:5173
+- **Backend**: http://localhost:3001
+- **Health**: http://localhost:3001/api/health
+
+## Tech Stack
+
+| Layer | Tech |
+|-------|------|
+| Frontend | React 19, Vite |
+| Backend | Express 4, Node.js |
+| AI | Groq API (Llama 3.3 70B) |
+| Security | Helmet, CORS, Rate Limiting, Safety Middleware |
+
+## Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `PORT` | Server port (default: 3001) |
+| `NODE_ENV` | Environment (development/production) |
+| `GROQ_API_KEY` | Groq API key for AI intent parsing |

check_rows.js

@@ -0,0 +1,18 @@
+const { getDb } = require('./server/src/db/database');
+
+async function checkRows() {
+    try {
+        const db = await getDb();
+        const count = await db.get('SELECT COUNT(*) as count FROM places');
+        console.log(`TOTAL ROWS: ${count.count}`);
+
+        const first = await db.get('SELECT * FROM places LIMIT 1');
+        console.log('FIRST ROW:', JSON.stringify(first, null, 2));
+    } catch (err) {
+        console.error('Debug failed:', err.message);
+    } finally {
+        process.exit(0);
+    }
+}
+
+checkRows();

client/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

client/README.md

@@ -0,0 +1,18 @@
+# React + 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 [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

client/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

client/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+};
+
+export default nextConfig;

client/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev -p 5173",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^15.1.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0"
+  }
+}

client/src/api/client.js

@@ -0,0 +1,44 @@
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api';
+
+async function request(endpoint, options = {}) {
+    const url = `${BASE_URL}${endpoint}`;
+    const config = {
+        headers: { 'Content-Type': 'application/json' },
+        ...options,
+    };
+
+    const response = await fetch(url, config);
+    const data = await response.json();
+
+    if (!response.ok) {
+        const error = new Error(data.error || 'Request failed');
+        error.status = response.status;
+        error.data = data;
+        throw error;
+    }
+
+    return data;
+}
+
+export function getHealth() {
+    return request('/health');
+}
+
+export function search(query, location, filters, userLocation, clarificationContext) {
+    return request('/search', {
+        method: 'POST',
+        body: JSON.stringify({ query, location, filters, userLocation, clarificationContext }),
+    });
+}
+
+export function getCategories() {
+    return request('/categories');
+}
+
+export function getSuggestions(q) {
+    return request(`/suggestions?q=${encodeURIComponent(q)}`);
+}
+
+export function getPlaceById(id) {
+    return request(`/suggestions/${id}`);
+}

client/src/app/About.css

@@ -0,0 +1,196 @@
+.about {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem 4rem;
+}
+
+.about-hero {
+    text-align: center;
+    padding: 2rem 0 2.5rem;
+}
+
+.about-title {
+    font-size: 2rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    margin-bottom: 1rem;
+}
+
+.accent-text {
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.about-lead {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.7;
+}
+
+.about-section {
+    margin-bottom: 2.5rem;
+}
+
+.about-section h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.about-pipeline {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 1rem 0;
+}
+
+.pipeline-step {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.pipeline-num {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--accent-gradient);
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.pipeline-label {
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+}
+
+.pipeline-arrow {
+    color: var(--text-muted);
+    margin: 0 0.25rem;
+}
+
+.about-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 0.75rem;
+}
+
+.about-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 1rem 1.25rem;
+    transition: all var(--transition-normal);
+}
+
+.about-card:hover {
+    background: var(--bg-card-hover);
+    border-color: rgba(238, 105, 131, 0.15);
+    transform: translateY(-2px);
+}
+
+.about-card-icon {
+    font-size: 1.5rem;
+    display: block;
+    margin-bottom: 0.4rem;
+}
+
+.about-card h4 {
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.about-card p {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    line-height: 1.4;
+}
+
+.about-table-wrap {
+    overflow-x: auto;
+}
+
+.about-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.82rem;
+}
+
+.about-table th {
+    text-align: left;
+    padding: 0.6rem 0.75rem;
+    background: var(--bg-card);
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.about-table td {
+    padding: 0.6rem 0.75rem;
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+}
+
+.about-table-layer {
+    font-weight: 600;
+    color: var(--accent-secondary) !important;
+    white-space: nowrap;
+}
+
+.about-table-interview {
+    font-style: italic;
+    font-size: 0.78rem;
+}
+
+.about-safety {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.about-safety-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+}
+
+.about-safety-icon {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+}
+
+.about-safety-item h4 {
+    font-size: 0.85rem;
+    font-weight: 600;
+    margin-bottom: 0.15rem;
+}
+
+.about-safety-item p {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    line-height: 1.4;
+}

client/src/app/History.css

@@ -0,0 +1,160 @@
+.history-page {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem 4rem;
+}
+
+.history-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+
+.history-header h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.history-subtitle {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-top: 0.2rem;
+}
+
+.history-clear-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    background: rgba(214, 48, 49, 0.1);
+    border: 1px solid rgba(214, 48, 49, 0.2);
+    border-radius: var(--radius-sm);
+    color: #e17055;
+    font-size: 0.78rem;
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.history-clear-btn:hover {
+    background: rgba(214, 48, 49, 0.2);
+}
+
+.history-empty {
+    text-align: center;
+    padding: 4rem 1rem;
+    color: var(--text-muted);
+}
+
+.history-empty svg {
+    margin-bottom: 1rem;
+    opacity: 0.3;
+}
+
+.history-empty p {
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.history-empty-sub {
+    font-size: 0.82rem !important;
+    font-weight: 400 !important;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+.history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+}
+
+.history-item:hover {
+    background: var(--bg-card-hover);
+    border-color: rgba(238, 105, 131, 0.15);
+}
+
+.history-item-main {
+    flex: 1;
+    min-width: 0;
+}
+
+.history-item-query {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 0.3rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.history-item-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.history-chip {
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    background: rgba(238, 105, 131, 0.12);
+    color: var(--accent-secondary);
+}
+
+.history-item-results,
+.history-item-time {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+}
+
+.history-item-time::before {
+    content: '·';
+    margin-right: 0.4rem;
+}
+
+.history-item-actions {
+    display: flex;
+    gap: 0.25rem;
+    flex-shrink: 0;
+}
+
+.history-rerun-btn,
+.history-remove-btn {
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+}
+
+.history-rerun-btn:hover {
+    background: rgba(238, 105, 131, 0.15);
+    color: var(--accent-secondary);
+}
+
+.history-remove-btn:hover {
+    background: rgba(214, 48, 49, 0.15);
+    color: #e17055;
+}

client/src/app/Home.css

@@ -0,0 +1,279 @@
+.home {
+    flex: 1;
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 1.5rem 3rem;
+}
+
+.home-hero {
+    position: relative;
+    text-align: center;
+    padding: 3.5rem 0 2rem;
+}
+
+.home-hero-glow {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(238, 105, 131, 0.12) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+.home-headline {
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 1.15;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+    text-shadow: none;
+    filter: none;
+}
+
+.home-headline-accent {
+    background: linear-gradient(90deg,
+            #FFC4C4 0%,
+            #fd79a8 25%,
+            #FCF5EE 50%,
+            #fd79a8 75%,
+            #FFC4C4 100%);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: flowing-light 3s linear infinite;
+}
+
+@keyframes flowing-light {
+    to {
+        background-position: 200% center;
+    }
+}
+
+.home-subline {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    max-width: 540px;
+    margin: 0 auto 2rem;
+    line-height: 1.6;
+}
+
+.home-error {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: 720px;
+    margin: 1.5rem auto;
+    padding: 0.75rem 1rem;
+    background: rgba(214, 48, 49, 0.1);
+    border: 1px solid rgba(214, 48, 49, 0.2);
+    border-radius: var(--radius-md);
+    color: #e17055;
+    font-size: 0.85rem;
+}
+
+.error-action-btn {
+    background: var(--accent-gradient);
+    border: none;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    margin-left: 0.5rem;
+}
+
+.error-action-btn:hover {
+    transform: scale(1.05);
+}
+
+.home-intent {
+    max-width: 720px;
+    margin: 1.5rem auto;
+    padding: 1rem 1.25rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+}
+
+.home-intent-title {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.home-intent-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.intent-chip {
+    font-size: 0.78rem;
+    padding: 0.25rem 0.6rem;
+    border-radius: 6px;
+    background: rgba(238, 105, 131, 0.1);
+    color: var(--text-secondary);
+}
+
+.intent-chip strong {
+    color: var(--accent-secondary);
+    font-weight: 600;
+    margin-right: 0.2rem;
+}
+
+.intent-chip.reasoning {
+    width: 100%;
+    margin-bottom: 0.25rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px dashed rgba(238, 105, 131, 0.3);
+    font-style: italic;
+}
+
+.home-results-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+    align-items: start;
+}
+
+.home-results {
+    min-width: 0;
+}
+
+.home-results-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.home-results-header h3 {
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.home-results-meta {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.home-results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+}
+
+.home-empty {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.home-recent-searches {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.recent-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.recent-links {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.recent-link-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.8rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border-subtle);
+    border-radius: 20px;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    transition: all var(--transition-fast);
+}
+
+.recent-link-btn:hover {
+    background: rgba(238, 105, 131, 0.1);
+    border-color: rgba(238, 105, 131, 0.3);
+    color: var(--accent-secondary);
+    transform: translateY(-1px);
+}
+
+.recent-link-btn svg {
+    color: var(--text-muted);
+}
+
+.home-scope-guidance {
+    display: flex;
+    gap: 1.25rem;
+    max-width: 720px;
+    margin: 1.5rem auto;
+    padding: 1.5rem;
+    background: rgba(238, 105, 131, 0.08);
+    border: 1px solid rgba(238, 105, 131, 0.15);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.scope-icon {
+    font-size: 1.5rem;
+    background: rgba(238, 105, 131, 0.12);
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    flex-shrink: 0;
+}
+
+.scope-content h4 {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--accent-secondary);
+    margin-bottom: 0.4rem;
+}
+
+.scope-content p {
+    font-size: 0.88rem;
+    line-height: 1.55;
+    color: var(--text-secondary);
+}
+
+@media (max-width: 768px) {
+    .home-headline {
+        font-size: 1.75rem;
+    }
+
+    .home-results-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .home-results-grid {
+        grid-template-columns: 1fr;
+    }
+}

client/src/app/Miner.css

@@ -0,0 +1,166 @@
+.miner-container {
+    padding: 3rem 5%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.miner-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.miner-header h2 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.miner-header p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+}
+
+.miner-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    align-items: start;
+}
+
+.miner-form {
+    background: var(--bg-card);
+    padding: 2.5rem;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    font-size: 0.95rem;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 1rem;
+    background: var(--bg-main);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text-main);
+    font-family: 'Inter', sans-serif;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(108, 92, 237, 0.2);
+}
+
+.form-group input:disabled,
+.form-group select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+.miner-btn {
+    width: 100%;
+    padding: 1rem;
+    font-size: 1.1rem;
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+.miner-btn.mining {
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    cursor: wait;
+}
+
+.mining-status-text {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: rgba(253, 203, 110, 0.1);
+    border: 1px solid rgba(253, 203, 110, 0.3);
+    border-radius: 8px;
+    color: #fdcb6e;
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.miner-info {
+    background: var(--bg-card);
+    padding: 2rem;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+}
+
+.miner-info h3 {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-main);
+}
+
+.miner-info ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.miner-info li {
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 0.95rem;
+}
+
+.miner-info li strong {
+    color: var(--text-main);
+}
+
+@media (max-width: 768px) {
+    .miner-content {
+        grid-template-columns: 1fr;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+}

client/src/app/NotFound.css

@@ -0,0 +1,54 @@
+.notfound-container {
+    min-height: calc(100vh - 64px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg-primary);
+    text-align: center;
+}
+
+.notfound-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.notfound-title {
+    font-size: 6rem;
+    font-weight: 800;
+    line-height: 1;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 20px rgba(238, 105, 131, 0.3));
+}
+
+.notfound-subtitle {
+    font-size: 1.5rem;
+    color: var(--text-primary);
+}
+
+.notfound-text {
+    color: var(--text-secondary);
+    font-size: 1rem;
+    margin-bottom: 1rem;
+}
+
+.notfound-btn {
+    padding: 0.75rem 2rem;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    text-decoration: none;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    transition: all var(--transition-normal);
+}
+
+.notfound-btn:hover {
+    background: var(--bg-input);
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+}

client/src/app/about/page.jsx

@@ -0,0 +1,110 @@
+'use client';
+
+import '../About.css';
+
+const TECH_STACK = [
+    { name: 'React 19', desc: 'Component-based UI with hooks', icon: '⚛️' },
+    { name: 'Next.js 15', desc: 'App Router, Server Components, and optimized performance', icon: '🚀' },
+    { name: 'Express', desc: 'Layered REST API with middleware', icon: '🛤️' },
+    { name: 'Groq + Llama 3.3', desc: 'LLM intent parsing and review analysis', icon: '🧠' },
+    { name: 'Helmet + CORS', desc: 'Security headers and cross-origin policy', icon: '🛡️' },
+    { name: 'Rate Limiting', desc: 'Per-IP request throttling', icon: '⏱️' },
+];
+
+const ARCHITECTURE = [
+    { layer: 'Routes', purpose: 'HTTP endpoint definitions', interview: 'Keeps routing declarative and separate from logic' },
+    { layer: 'Middleware', purpose: 'Cross-cutting concerns (auth, safety, rate limit)', interview: 'Runs before controller — reject early, save resources' },
+    { layer: 'Controllers', purpose: 'Thin orchestration layer', interview: 'Calls services in order, shapes response — no business logic here' },
+    { layer: 'Services', purpose: 'Business logic (AI, scraping, safety)', interview: 'Independently testable, reusable across routes' },
+    { layer: 'Validators', purpose: 'Request body schema validation', interview: 'Fail fast with clear messages before processing' },
+];
+
+export default function About() {
+    return (
+        <main className="about">
+            <section className="about-hero fade-in-up">
+                <h2 className="about-title">
+                    What is <span className="accent-text">RedThread</span>?
+                </h2>
+                <p className="about-lead">
+                    RedThread is an AI that thinks before it searches.
+                    By interpreting your intent and adapting to context, it removes the noise
+                    of traditional search to find results that actually match your needs.
+                </p>
+            </section>
+
+            <section className="about-section fade-in-up stagger-1">
+                <h3>How It Works</h3>
+                <div className="about-pipeline">
+                    {['User Query', 'Safety Check', 'AI Intent Parsing', 'Smart Scraping', 'Review Analysis', 'Structured Results'].map((step, i) => (
+                        <div key={i} className="pipeline-step">
+                            <span className="pipeline-num">{i + 1}</span>
+                            <span className="pipeline-label">{step}</span>
+                            {i < 5 && <span className="pipeline-arrow">→</span>}
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            <section className="about-section fade-in-up stagger-2">
+                <h3>Tech Stack</h3>
+                <div className="about-grid">
+                    {TECH_STACK.map((t, i) => (
+                        <div key={i} className="about-card">
+                            <span className="about-card-icon">{t.icon}</span>
+                            <h4>{t.name}</h4>
+                            <p>{t.desc}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
+
+            <section className="about-section fade-in-up stagger-3">
+                <h3>Backend Architecture</h3>
+                <div className="about-table-wrap">
+                    <table className="about-table">
+                        <thead>
+                            <tr><th>Layer</th><th>Purpose</th><th>Why It Matters</th></tr>
+                        </thead>
+                        <tbody>
+                            {ARCHITECTURE.map((a, i) => (
+                                <tr key={i}>
+                                    <td className="about-table-layer">{a.layer}</td>
+                                    <td>{a.purpose}</td>
+                                    <td className="about-table-interview">{a.interview}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+
+            <section className="about-section fade-in-up stagger-4">
+                <h3>Safety Philosophy</h3>
+                <div className="about-safety">
+                    <div className="about-safety-item">
+                        <span className="about-safety-icon">🚫</span>
+                        <div>
+                            <h4>Query Moderation</h4>
+                            <p>Harmful, illegal, and adult content queries are blocked before they reach any service.</p>
+                        </div>
+                    </div>
+                    <div className="about-safety-item">
+                        <span className="about-safety-icon">🔒</span>
+                        <div>
+                            <h4>Platform Restrictions</h4>
+                            <p>Scraping is limited to publicly available data. Social media and private platforms are blocked.</p>
+                        </div>
+                    </div>
+                    <div className="about-safety-item">
+                        <span className="about-safety-icon">⚖️</span>
+                        <div>
+                            <h4>User Responsibility</h4>
+                            <p>Users agree to Terms of Use and accept responsibility for ethical, legal use of results.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+}

client/src/app/globals.css

@@ -0,0 +1,139 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-primary: #850E35;
+  --bg-secondary: rgba(238, 105, 131, 0.2);
+  --bg-card: rgba(238, 105, 131, 0.15);
+  --bg-card-hover: rgba(238, 105, 131, 0.25);
+  --bg-input: rgba(255, 196, 196, 0.1);
+
+  --border-subtle: rgba(255, 196, 196, 0.2);
+  --border-focus: #FFC4C4;
+
+  --text-primary: #FCF5EE;
+  --text-secondary: #FFC4C4;
+  --text-muted: rgba(252, 245, 238, 0.65);
+
+  --accent-primary: #FFC4C4;
+  --accent-secondary: #FCF5EE;
+  --accent-tertiary: #EE6983;
+  --accent-gradient: linear-gradient(135deg, #FFC4C4 0%, #EE6983 100%);
+  --accent-glow: 0 0 20px rgba(255, 196, 196, 0.4);
+
+  --success: #2ecc71;
+  --warning: #f1c40f;
+  --danger: #e74c3c;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  --shadow-sm: 0 2px 8px rgba(133, 14, 53, 0.06);
+  --shadow-md: 0 4px 16px rgba(133, 14, 53, 0.1);
+  --shadow-lg: 0 8px 32px rgba(133, 14, 53, 0.15);
+
+  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-family);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+::selection {
+  background: var(--accent-primary);
+  color: white;
+}
+
+button {
+  cursor: pointer;
+  font-family: var(--font-family);
+  border: none;
+  outline: none;
+}
+
+input,
+select,
+textarea {
+  font-family: var(--font-family);
+  outline: none;
+}
+
+select {
+  appearance: none;
+  color: var(--text-primary);
+  background: #850E35;
+}
+
+/* Maintain visibility fix in dropdowns */
+option {
+  background-color: #850E35;
+  color: var(--text-primary);
+  padding: 10px;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp var(--transition-slow) both;
+}
+
+.stagger-1 {
+  animation-delay: 0.1s;
+}
+
+.stagger-2 {
+  animation-delay: 0.2s;
+}
+
+.stagger-3 {
+  animation-delay: 0.3s;
+}
+
+.stagger-4 {
+  animation-delay: 0.4s;
+}

client/src/app/history/page.jsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import useSearchHistory from '../../hooks/useSearchHistory';
+import { useToast } from '../../contexts/ToastContext';
+import '../History.css';
+
+export default function History() {
+    const { history, clearHistory, removeEntry } = useSearchHistory();
+    const router = useRouter();
+    const { addToast } = useToast();
+
+    function handleRerun(query) {
+        // Next.js App Router doesn't have state in navigate, using query params instead.
+        router.push(`/?rerunQuery=${encodeURIComponent(query)}`);
+    }
+
+    function handleClear() {
+        clearHistory();
+        addToast('Search history cleared', 'success');
+    }
+
+    function handleRemove(id) {
+        removeEntry(id);
+        addToast('Entry removed from history', 'info');
+    }
+
+    function formatTime(iso) {
+        const d = new Date(iso);
+        const now = new Date();
+        const diffMs = now - d;
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1) return 'Just now';
+        if (diffMins < 60) return `${diffMins}m ago`;
+        const diffHours = Math.floor(diffMins / 60);
+        if (diffHours < 24) return `${diffHours}h ago`;
+        return d.toLocaleDateString('en-IN', { day: 'numeric', month: 'short' });
+    }
+
+    return (
+        <main className="history-page">
+            <div className="history-header fade-in-up">
+                <div>
+                    <h2>Search History</h2>
+                    <p className="history-subtitle">{history.length} search{history.length !== 1 ? 'es' : ''} saved locally</p>
+                </div>
+                {history.length > 0 && (
+                    <button className="history-clear-btn" onClick={handleClear}>
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                        </svg>
+                        Clear All
+                    </button>
+                )}
+            </div>
+
+            {history.length === 0 ? (
+                <div className="history-empty fade-in-up stagger-1">
+                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                    </svg>
+                    <p>No searches yet.</p>
+                    <p className="history-empty-sub">Your searches will appear here once you start exploring.</p>
+                </div>
+            ) : (
+                <div className="history-list">
+                    {history.map((entry, i) => (
+                        <div key={entry.id} className={`history-item fade-in-up stagger-${(i % 4) + 1}`}>
+                            <div className="history-item-main">
+                                <p className="history-item-query">"{entry.query}"</p>
+                                <div className="history-item-meta">
+                                    {entry.intent?.category && (
+                                        <span className="history-chip">{entry.intent.category}</span>
+                                    )}
+                                    {entry.intent?.location && (
+                                        <span className="history-chip">{entry.intent.location}</span>
+                                    )}
+                                    <span className="history-item-results">{entry.resultCount} result{entry.resultCount !== 1 ? 's' : ''}</span>
+                                    <span className="history-item-time">{formatTime(entry.timestamp)}</span>
+                                </div>
+                            </div>
+                            <div className="history-item-actions">
+                                <button className="history-rerun-btn" onClick={() => handleRerun(entry.query)} title="Search again">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                        <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                                    </svg>
+                                </button>
+                                <button className="history-remove-btn" onClick={() => handleRemove(entry.id)} title="Remove">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </main>
+    );
+}

client/src/app/layout.jsx

@@ -0,0 +1,21 @@
+import './globals.css';
+import Header from '../components/Header';
+import { Providers } from '../components/Providers';
+
+export const metadata = {
+    title: 'RedThread - AI-assisted location-based recommendations',
+    description: 'Find the perfect spot, powered by AI.',
+};
+
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en">
+            <body suppressHydrationWarning={true}>
+                <Providers>
+                    <Header />
+                    {children}
+                </Providers>
+            </body>
+        </html>
+    );
+}

client/src/app/not-found.jsx

@@ -0,0 +1,23 @@
+'use client';
+
+import Link from 'next/link';
+import './NotFound.css';
+
+export default function NotFound() {
+    return (
+        <main className="not-found fade-in-up">
+            <div className="not-found-content">
+                <div className="not-found-icon">
+                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
+                    </svg>
+                </div>
+                <h2>404 - Page Not Found</h2>
+                <p>The page you're looking for doesn't exist or has been moved.</p>
+                <Link href="/" className="btn-primary">
+                    Return Home
+                </Link>
+            </div>
+        </main>
+    );
+}

client/src/app/page.jsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
+import SearchBar from '../components/SearchBar';
+import ResultCard from '../components/ResultCard';
+import SafetyBanner from '../components/SafetyBanner';
+import FilterPanel from '../components/FilterPanel';
+import SkeletonCard from '../components/SkeletonCard';
+import ResultModal from '../components/ResultModal';
+import ClarificationPrompt from '../components/ClarificationPrompt';
+import useSearchHistory from '../hooks/useSearchHistory';
+import { useToast } from '../contexts/ToastContext';
+import { search } from '../api/client';
+import { useGeolocation } from '../hooks/useGeolocation';
+import './Home.css';
+
+const DEFAULT_FILTERS = { category: 'all', maxBudget: '', features: [], sortBy: 'relevance' };
+
+export default function Home() {
+    const [results, setResults] = useState([]);
+    const [intent, setIntent] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [meta, setMeta] = useState(null);
+    const [loadingMsg, setLoadingMsg] = useState('Parsing intent...');
+    const [hasSearched, setHasSearched] = useState(false);
+    const [filters, setFilters] = useState({});
+    const [dynamicFilters, setDynamicFilters] = useState([]);
+    const [selectedResult, setSelectedResult] = useState(null);
+    const [scopeMessage, setScopeMessage] = useState(null);
+    const [clarification, setClarification] = useState(null);
+
+    const { addEntry, history } = useSearchHistory();
+    const { addToast } = useToast();
+    const searchParams = useSearchParams();
+    const { location: userLocation, error: locationError, isLoading: locationLoading, requestLocation, clearLocation } = useGeolocation();
+
+    useEffect(() => {
+        const rerunQuery = searchParams.get('rerunQuery');
+        if (rerunQuery) {
+            handleSearch(rerunQuery);
+            // In Next.js, updating the URL without reloading is done via router.replace
+            // but for now, we'll just handle the search.
+        }
+    }, [searchParams]);
+
+    const handleClarificationSubmit = (answer) => {
+        if (clarification) {
+            const context = {
+                originalQuery: clarification.originalQuery,
+                question: clarification.question,
+                answer: answer
+            };
+            setClarification(null);
+            handleSearch(clarification.originalQuery, context);
+        }
+    };
+
+    const handleClarificationCancel = () => {
+        setClarification(null);
+    };
+
+    async function handleSearch(query, clarificationContext = null) {
+        setLoading(true);
+        setLoadingMsg('Searching...');
+        setError(null);
+        setScopeMessage(null);
+        setHasSearched(true);
+
+        // Show auto-scraping message if backend takes longer than 3 seconds
+        const timeoutId = setTimeout(() => {
+            setLoadingMsg('Scraping fresh data from the web (this may take 10-15s)...');
+        }, 3000);
+
+        try {
+            // Include `userLocation` dynamically if the user has requested it
+            const data = await search(query, null, filters, userLocation, clarificationContext);
+            clearTimeout(timeoutId);
+
+            if (data.isOutOfScope) {
+                setScopeMessage(data.scopeMessage);
+                setResults([]);
+                setIntent(data.intent || null);
+                setMeta(null);
+                setLoading(false);
+                return;
+            }
+
+            if (data.needsClarification) {
+                setClarification({ originalQuery: query, question: data.clarificationQuestion });
+                setResults([]);
+                setIntent(null);
+                setMeta(null);
+                setLoading(false);
+                return;
+            }
+
+            setClarification(null);
+
+            const res = data.results || [];
+            setResults(res);
+            setIntent(data.intent || null);
+            setMeta(data.meta || null);
+            setDynamicFilters(data.dynamicFilters || []);
+            setFilters({});
+            addEntry(query, data.intent, res.length);
+        } catch (err) {
+            clearTimeout(timeoutId);
+            const errorMsg = err.data?.error || err.message || 'Something went wrong';
+            setError(errorMsg);
+            addToast(errorMsg, 'error');
+            setResults([]);
+            setIntent(null);
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const filteredResults = useMemo(() => {
+        let filtered = [...results];
+
+        dynamicFilters.forEach(schema => {
+            const val = filters[schema.id];
+            if (!val) return;
+
+            if (schema.type === 'range') {
+                const max = parseInt(val, 10);
+                filtered = filtered.filter(r => {
+                    const match = r.priceRange?.match(/([₹$£€])(\d+)/);
+                    return match ? parseInt(match[2], 10) <= max : true;
+                });
+            } else if (schema.type === 'select') {
+                if (val.length > 0) {
+                    filtered = filtered.filter(r =>
+                        val.every(selectedOpt => {
+                            const optL = selectedOpt.toLowerCase();
+                            const inFeatures = (r.features || []).some(f => f.toLowerCase().includes(optL));
+                            const inName = r.name?.toLowerCase().includes(optL);
+                            const inSummary = r.reviewSummary?.toLowerCase().includes(optL);
+                            const inCat = r.category?.toLowerCase().includes(optL);
+                            return inFeatures || inName || inSummary || inCat;
+                        })
+                    );
+                }
+            } else if (schema.type === 'sort') {
+                if (val === 'rating') {
+                    filtered.sort((a, b) => (b.rating === 'N/A' ? 0 : parseFloat(b.rating)) - (a.rating === 'N/A' ? 0 : parseFloat(a.rating)));
+                } else if (val === 'price_low') {
+                    filtered.sort((a, b) => {
+                        const pa = parseInt(a.priceRange?.match(/([₹$£€])(\d+)/)?.[2] || '0', 10);
+                        const pb = parseInt(b.priceRange?.match(/([₹$£€])(\d+)/)?.[2] || '0', 10);
+                        if (!pa) return 1; if (!pb) return -1;
+                        return pa - pb;
+                    });
+                } else if (val === 'price_high') {
+                    filtered.sort((a, b) => {
+                        const pa = parseInt(a.priceRange?.match(/([₹$£€])(\d+)/)?.[2] || '0', 10);
+                        const pb = parseInt(b.priceRange?.match(/([₹$£€])(\d+)/)?.[2] || '0', 10);
+                        return pb - pa;
+                    });
+                }
+            }
+        });
+
+        return filtered;
+    }, [results, filters, dynamicFilters]);
+
+    return (
+        <main className="home">
+            <section className="home-hero">
+                <div className="home-hero-glow"></div>
+                <h2 className="home-headline fade-in-up">
+                    AI that <span className="home-headline-accent">thinks</span><br />
+                    before it searches
+                </h2>
+                <p className="home-subline fade-in-up stagger-1">
+                    Describe what you want naturally — RedThread interprets your intent,
+                    adapts to context, and finds results that actually match.
+                </p>
+                <div className="fade-in-up stagger-2" style={{ position: 'relative', zIndex: 10 }}>
+                    <SearchBar
+                        onSearch={handleSearch}
+                        userLocation={userLocation}
+                        locationLoading={locationLoading}
+                        locationError={locationError}
+                        requestLocation={requestLocation}
+                        clearLocation={clearLocation}
+                        loading={loading}
+                    />
+                </div>
+                <div className="fade-in-up stagger-3" style={{ position: 'relative', zIndex: 1, marginTop: '0.75rem' }}>
+                    <SafetyBanner />
+                </div>
+                {!hasSearched && history.length > 0 && (
+                    <div className="home-recent-searches fade-in-up stagger-4">
+                        <span className="recent-label">Your Recent Searches:</span>
+                        <div className="recent-links">
+                            {history.slice(0, 3).map((entry) => (
+                                <button
+                                    key={entry.id}
+                                    className="recent-link-btn"
+                                    onClick={() => handleSearch(entry.query)}
+                                >
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                        <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                                    </svg>
+                                    {entry.query}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                )}
+                {clarification && !loading && (
+                    <div className="home-clarification-wrapper fade-in-up stagger-2" style={{ position: 'relative', zIndex: 20 }}>
+                        <ClarificationPrompt
+                            question={clarification.question}
+                            onSubmit={handleClarificationSubmit}
+                            onCancel={handleClarificationCancel}
+                        />
+                    </div>
+                )}
+            </section>
+
+            {scopeMessage && !loading && (
+                <div className="home-scope-guidance fade-in-up">
+                    <div className="scope-icon">💡</div>
+                    <div className="scope-content">
+                        <h4>Platform Guidance</h4>
+                        <p>{scopeMessage}</p>
+                    </div>
+                </div>
+            )}
+
+            {error && (
+                <div className="home-error fade-in-up">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <circle cx="12" cy="12" r="10" />
+                        <line x1="15" y1="9" x2="9" y2="15" />
+                        <line x1="9" y1="9" x2="15" y2="15" />
+                    </svg>
+                    <span style={{ flex: 1 }}>{error}</span>
+                    {error.toLowerCase().includes('location') && !userLocation && (
+                        <button
+                            type="button"
+                            className="error-action-btn"
+                            onClick={requestLocation}
+                        >
+                            Use my location
+                        </button>
+                    )}
+                </div>
+            )}
+
+            {intent && !error && (
+                <section className="home-intent fade-in-up">
+                    <h4 className="home-intent-title">Parsed Intent</h4>
+                    <div className="home-intent-chips">
+                        <span className="intent-chip reasoning">
+                            <strong>AI Reasoning:</strong> {intent.reasoning}
+                        </span>
+                        <span className="intent-chip">
+                            <strong>Category:</strong> {intent.category}
+                        </span>
+                        {intent.location && (
+                            <span className="intent-chip">
+                                <strong>Location:</strong> {intent.location}
+                            </span>
+                        )}
+                        {intent.budget?.max && (
+                            <span className="intent-chip">
+                                <strong>Budget:</strong> up to {intent.budget.currency}{intent.budget.max}
+                            </span>
+                        )}
+                        {intent.occasion && (
+                            <span className="intent-chip">
+                                <strong>Occasion:</strong> {intent.occasion}
+                            </span>
+                        )}
+                    </div>
+                </section>
+            )}
+
+            {loading && (
+                <section className="home-results">
+                    <div className="home-results-header">
+                        <h3>{loadingMsg}</h3>
+                    </div>
+                    <div className="home-results-grid">
+                        {[1, 2, 3, 4].map(i => <SkeletonCard key={i} />)}
+                    </div>
+                </section>
+            )}
+
+            {!loading && hasSearched && results.length > 0 && (
+                <section className="home-results-layout">
+                    <FilterPanel
+                        filters={filters}
+                        onChange={setFilters}
+                        dynamicFilters={dynamicFilters}
+                        resultCount={filteredResults.length}
+                    />
+                    <section className="home-results">
+                        <div className="home-results-header">
+                            <h3>Results</h3>
+                            {meta && (
+                                <span className="home-results-meta">
+                                    {filteredResults.length} of {meta.total} · {meta.source}
+                                </span>
+                            )}
+                        </div>
+                        <div className="home-results-grid">
+                            {filteredResults.map((r, i) => (
+                                <ResultCard
+                                    key={i}
+                                    result={{ ...r, cached: meta?.cached }}
+                                    index={i}
+                                    onClick={() => setSelectedResult(r)}
+                                />
+                            ))}
+                        </div>
+                        {filteredResults.length === 0 && (
+                            <div className="home-empty">
+                                <p>No results match your filters. Try adjusting them.</p>
+                            </div>
+                        )}
+                    </section>
+                </section>
+            )}
+
+            {hasSearched && !loading && results.length === 0 && !error && (
+                <div className="home-empty fade-in-up">
+                    <p>No results found. Try a different query or location.</p>
+                </div>
+            )}
+
+            {selectedResult && (
+                <ResultModal result={selectedResult} onClose={() => setSelectedResult(null)} />
+            )}
+        </main>
+    );
+}

client/src/app/terms/Terms.css

@@ -0,0 +1,71 @@
+.terms-container {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 40px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+}
+
+.terms-header {
+    margin-bottom: 40px;
+    text-align: center;
+}
+
+.terms-header h1 {
+    font-size: 2.5rem;
+    color: var(--text-primary);
+    margin-bottom: 15px;
+}
+
+.terms-last-updated {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.terms-section {
+    margin-bottom: 30px;
+}
+
+.terms-section h2 {
+    font-size: 1.5rem;
+    color: var(--accent-primary);
+    margin-bottom: 15px;
+    border-bottom: 1px solid var(--border-subtle);
+    padding-bottom: 10px;
+}
+
+.terms-section p {
+    font-size: 1rem;
+    line-height: 1.8;
+    color: var(--text-secondary);
+    margin-bottom: 15px;
+}
+
+.terms-section ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.terms-section li {
+    position: relative;
+    padding-left: 25px;
+    margin-bottom: 12px;
+    color: var(--text-secondary);
+}
+
+.terms-section li::before {
+    content: "→";
+    position: absolute;
+    left: 0;
+    color: var(--accent-tertiary);
+}
+
+.terms-footer {
+    margin-top: 50px;
+    padding-top: 30px;
+    border-top: 1px solid var(--border-subtle);
+    text-align: center;
+    color: var(--text-muted);
+}

client/src/app/terms/page.jsx

@@ -0,0 +1,60 @@
+'use client';
+
+import './Terms.css';
+import Link from 'next/link';
+
+export default function Terms() {
+    return (
+        <main className="terms-container fade-in-up">
+            <header className="terms-header">
+                <h1>Terms of Use</h1>
+                <p className="terms-last-updated">Last Updated: March 2026</p>
+            </header>
+
+            <section className="terms-section">
+                <h2>1. Acceptance of Terms</h2>
+                <p>
+                    By accessing and using RedThread, you agree to be bound by these Terms of Use and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing this site.
+                </p>
+            </section>
+
+            <section className="terms-section">
+                <h2>2. Ethical AI Use</h2>
+                <p>
+                    RedThread is designed to be a helpful assistant for discovering location-based information. Users are strictly prohibited from using the platform for:
+                </p>
+                <ul>
+                    <li>Generating or promoting harmful, illegal, or adult content.</li>
+                    <li>Stalking, harassment, or any form of malicious monitoring.</li>
+                    <li>Automated bulk scraping beyond normal individual research use.</li>
+                    <li>Attempting to bypass safety filters or platform restrictions.</li>
+                </ul>
+            </section>
+
+            <section className="terms-section">
+                <h2>3. Data & Privacy</h2>
+                <p>
+                    We value your privacy. RedThread processes your queries to provide relevant recommendations. While we strive for accuracy, AI-generated content may occasionally contain errors. Always verify critical information directly with the service provider.
+                </p>
+            </section>
+
+            <section className="terms-section">
+                <h2>4. Intellectual Property</h2>
+                <p>
+                    The technology, design, and "RedThread" brand are the intellectual property of its creators. Users are granted a limited license for personal, non-commercial use of the search results.
+                </p>
+            </section>
+
+            <section className="terms-section">
+                <h2>5. Disclaimer</h2>
+                <p>
+                    The materials on RedThread are provided on an 'as is' basis. RedThread makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, or fitness for a particular purpose.
+                </p>
+            </section>
+
+            <footer className="terms-footer">
+                <Link href="/" className="accent-text">Return to Search</Link>
+            </footer>
+        </main>
+    );
+}

client/src/components/ClarificationPrompt.css

@@ -0,0 +1,111 @@
+.clarification-prompt {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    max-width: 720px;
+    margin: 1rem auto;
+    box-shadow: var(--shadow-md);
+    position: relative;
+    z-index: 15;
+}
+
+.clarification-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.clarification-icon {
+    font-size: 1.25rem;
+}
+
+.clarification-title {
+    font-weight: 600;
+    color: var(--primary-color);
+    font-size: 0.95rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    flex: 1;
+}
+
+.clarification-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.5rem;
+    cursor: pointer;
+    line-height: 1;
+    padding: 0;
+    transition: color var(--transition-fast);
+}
+
+.clarification-close:hover {
+    color: #ff7675;
+}
+
+.clarification-question {
+    font-size: 1.05rem;
+    color: var(--text-primary);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+    padding-left: 0.5rem;
+    border-left: 3px solid rgba(238, 105, 131, 0.4);
+}
+
+.clarification-form {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.clarification-input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    background: var(--bg-input);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    transition: all var(--transition-normal);
+}
+
+.clarification-input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px rgba(238, 105, 131, 0.15);
+    outline: none;
+}
+
+.clarification-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: rgba(238, 105, 131, 0.15);
+    color: var(--primary-color);
+    font-weight: 600;
+    border: 1px solid rgba(238, 105, 131, 0.3);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.clarification-btn:hover:not(:disabled) {
+    background: rgba(238, 105, 131, 0.25);
+    text-shadow: 0 0 8px rgba(238, 105, 131, 0.4);
+}
+
+.clarification-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+@media (max-width: 600px) {
+    .clarification-form {
+        flex-direction: column;
+    }
+
+    .clarification-btn {
+        justify-content: center;
+    }
+}

client/src/components/ClarificationPrompt.jsx

@@ -0,0 +1,52 @@
+import { useState, useRef, useEffect } from 'react';
+import './ClarificationPrompt.css';
+
+export default function ClarificationPrompt({ question, onSubmit, onCancel }) {
+    const [answer, setAnswer] = useState('');
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [question]);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (answer.trim()) {
+            onSubmit(answer.trim());
+        }
+    };
+
+    return (
+        <div className="clarification-prompt fade-in-up">
+            <div className="clarification-header">
+                <span className="clarification-icon">🤖</span>
+                <span className="clarification-title">Clarification Needed</span>
+                <button type="button" className="clarification-close" onClick={onCancel} title="Cancel search">
+                    &times;
+                </button>
+            </div>
+
+            <p className="clarification-question">{question}</p>
+
+            <form className="clarification-form" onSubmit={handleSubmit}>
+                <input
+                    ref={inputRef}
+                    type="text"
+                    className="clarification-input"
+                    placeholder="Type your answer..."
+                    value={answer}
+                    onChange={(e) => setAnswer(e.target.value)}
+                />
+                <button type="submit" className="clarification-btn" disabled={!answer.trim()}>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                        <line x1="22" y1="2" x2="11" y2="13" />
+                        <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                    </svg>
+                    Send
+                </button>
+            </form>
+        </div>
+    );
+}

client/src/components/ErrorBoundary.css

@@ -0,0 +1,70 @@
+.error-boundary-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background: var(--bg-primary);
+    text-align: center;
+}
+
+.error-boundary-content {
+    max-width: 480px;
+    background: var(--bg-card);
+    padding: 3rem 2rem;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-xl);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.error-boundary-icon {
+    color: #ff7675;
+    filter: drop-shadow(0 0 12px rgba(255, 118, 117, 0.2));
+}
+
+.error-boundary-content h2 {
+    font-size: 1.5rem;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.error-boundary-content p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.error-boundary-btn {
+    margin-top: 1rem;
+    padding: 0.75rem 2rem;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-normal);
+}
+
+.error-boundary-btn:hover {
+    background: var(--bg-input);
+    border-color: var(--border-hover);
+    transform: translateY(-2px);
+}
+
+.error-boundary-details {
+    margin-top: 1.5rem;
+    text-align: left;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    width: 100%;
+    overflow-x: auto;
+    border: 1px solid rgba(255, 118, 117, 0.1);
+}

client/src/components/ErrorBoundary.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './ErrorBoundary.css';
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="error-boundary-container">
+                    <div className="error-boundary-content fade-in-up">
+                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="error-boundary-icon">
+                            <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
+                            <line x1="12" y1="8" x2="12" y2="12" />
+                            <line x1="12" y1="16" x2="12.01" y2="16" />
+                        </svg>
+                        <h2>Something went wrong.</h2>
+                        <p>We've encountered an unexpected error. Our team has been notified.</p>
+                        <button
+                            className="error-boundary-btn"
+                            onClick={() => window.location.reload()}
+                        >
+                            Reload Page
+                        </button>
+                        {process.env.NODE_ENV === 'development' && (
+                            <pre className="error-boundary-details">{this.state.error?.toString()}</pre>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

client/src/components/FilterPanel.css

@@ -0,0 +1,182 @@
+.filter-panel {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+.filter-toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: none;
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: left;
+    transition: background var(--transition-fast);
+}
+
+.filter-toggle:hover {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.filter-active-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    box-shadow: 0 0 6px var(--accent-primary);
+}
+
+.filter-chevron {
+    margin-left: auto;
+    transition: transform var(--transition-fast);
+}
+
+.filter-chevron.open {
+    transform: rotate(180deg);
+}
+
+.filter-body {
+    padding: 0 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    animation: fadeInUp 200ms ease;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.home-headline {
+    font-size: 2.5rem;
+    font-weight: 800;
+    line-height: 1.15;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
+}
+
+.filter-label {
+    font-size: 0.68rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+}
+
+.filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.filter-chip {
+    padding: 0.3rem 0.65rem;
+    border-radius: 20px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.filter-chip:hover {
+    background: rgba(238, 105, 131, 0.08);
+    border-color: rgba(238, 105, 131, 0.2);
+}
+
+.filter-chip.active {
+    background: rgba(238, 105, 131, 0.2);
+    border-color: var(--accent-primary);
+    color: var(--accent-secondary);
+}
+
+.filter-budget-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.filter-slider {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--border-subtle);
+    outline: none;
+}
+
+.filter-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--accent-primary);
+    cursor: pointer;
+    box-shadow: 0 0 6px rgba(238, 105, 131, 0.4);
+}
+
+.filter-budget-val {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--accent-secondary);
+    min-width: 50px;
+    text-align: right;
+}
+
+.filter-select {
+    padding: 0.4rem 0.6rem;
+    background: var(--bg-input);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+.filter-select:focus {
+    border-color: var(--border-focus);
+}
+
+.filter-select option {
+    background: #850E35;
+    color: var(--text-primary);
+}
+
+.filter-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.filter-count {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+}
+
+.filter-reset {
+    font-size: 0.72rem;
+    font-weight: 500;
+    background: none;
+    color: var(--accent-secondary);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    transition: background var(--transition-fast);
+}
+
+.filter-reset:hover {
+    background: rgba(238, 105, 131, 0.1);
+}

client/src/components/FilterPanel.jsx

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import './FilterPanel.css';
+
+export default function FilterPanel({ filters, onChange, dynamicFilters = [], resultCount }) {
+    const [expanded, setExpanded] = useState(true);
+
+    if (!dynamicFilters || dynamicFilters.length === 0) return null;
+
+    function updateFilter(key, value) {
+        onChange({ ...filters, [key]: value });
+    }
+
+    function toggleSelectVal(id, option) {
+        const current = filters[id] || [];
+        const next = current.includes(option)
+            ? current.filter(f => f !== option)
+            : [...current, option];
+        updateFilter(id, next);
+    }
+
+    function resetFilters() {
+        onChange({});
+    }
+
+    const hasActiveFilters = Object.values(filters).some(val =>
+        (Array.isArray(val) && val.length > 0) ||
+        (typeof val === 'string' && val !== '' && val !== 'relevance')
+    );
+
+    return (
+        <aside className={`filter-panel ${expanded ? 'expanded' : 'collapsed'}`}>
+            <button className="filter-toggle" onClick={() => setExpanded(!expanded)}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="14" y2="12" /><line x1="4" y1="18" x2="8" y2="18" />
+                </svg>
+                AI Filters
+                {hasActiveFilters && <span className="filter-active-dot"></span>}
+                <svg className={`filter-chevron ${expanded ? 'open' : ''}`} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <polyline points="6 9 12 15 18 9" />
+                </svg>
+            </button>
+
+            {expanded && (
+                <div className="filter-body">
+                    {dynamicFilters.map((schema, index) => {
+                        if (schema.type === 'range') {
+                            return (
+                                <div key={index} className="filter-group">
+                                    <label className="filter-label">{schema.label}</label>
+                                    <div className="filter-budget-row">
+                                        <input
+                                            type="range"
+                                            min={schema.min || 0}
+                                            max={schema.max || 5000}
+                                            step={schema.step || 100}
+                                            value={filters[schema.id] || 0}
+                                            onChange={e => updateFilter(schema.id, e.target.value === '0' ? '' : e.target.value)}
+                                            className="filter-slider"
+                                        />
+                                        <span className="filter-budget-val">
+                                            {filters[schema.id] ? `₹${filters[schema.id]}` : 'Any'}
+                                        </span>
+                                    </div>
+                                </div>
+                            );
+                        }
+
+                        if (schema.type === 'select') {
+                            const activeSet = filters[schema.id] || [];
+                            return (
+                                <div key={index} className="filter-group">
+                                    <label className="filter-label">{schema.label}</label>
+                                    <div className="filter-chips">
+                                        {(schema.options || []).map(opt => (
+                                            <button
+                                                key={opt}
+                                                className={`filter-chip ${activeSet.includes(opt) ? 'active' : ''}`}
+                                                onClick={() => toggleSelectVal(schema.id, opt)}
+                                            >
+                                                {opt}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </div>
+                            );
+                        }
+
+                        if (schema.type === 'sort') {
+                            return (
+                                <div key={index} className="filter-group">
+                                    <label className="filter-label">{schema.label}</label>
+                                    <select
+                                        className="filter-select"
+                                        value={filters[schema.id] || 'relevance'}
+                                        onChange={e => updateFilter(schema.id, e.target.value)}
+                                    >
+                                        {(schema.options || []).map(opt => (
+                                            <option key={opt.value} value={opt.value}>{opt.label}</option>
+                                        ))}
+                                    </select>
+                                </div>
+                            );
+                        }
+
+                        return null;
+                    })}
+
+                    <div className="filter-footer">
+                        {resultCount !== undefined && (
+                            <span className="filter-count">{resultCount} result{resultCount !== 1 ? 's' : ''}</span>
+                        )}
+                        {hasActiveFilters && (
+                            <button className="filter-reset" onClick={resetFilters}>Reset Custom AI Filters</button>
+                        )}
+                    </div>
+                </div>
+            )}
+        </aside>
+    );
+}

client/src/components/Header.css

@@ -0,0 +1,199 @@
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(133, 14, 53, 0.85);
+    backdrop-filter: blur(16px);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.header-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    text-decoration: none;
+}
+
+.header-logo {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 32px;
+    height: 32px;
+}
+
+.thread-logo {
+    width: 100%;
+    height: 100%;
+}
+
+.thread-path-outer {
+    stroke: var(--accent-primary);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-dasharray: 80;
+    stroke-dashoffset: 80;
+    animation: thread-unfold 4s ease-in-out infinite alternate;
+}
+
+.thread-core {
+    fill: var(--text-primary);
+}
+
+.thread-line {
+    stroke: var(--accent-secondary);
+    stroke-width: 1;
+    stroke-dasharray: 28;
+    stroke-dashoffset: 28;
+    animation: thread-line-flow 4s linear infinite;
+    opacity: 0.6;
+}
+
+@keyframes thread-unfold {
+    0% {
+        stroke-dashoffset: 80;
+        opacity: 0.3;
+    }
+
+    50% {
+        stroke-dashoffset: 0;
+        opacity: 1;
+    }
+
+    100% {
+        stroke-dashoffset: -80;
+        opacity: 0.3;
+    }
+}
+
+@keyframes core-pulse {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.6;
+    }
+
+    100% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+}
+
+@keyframes thread-line-flow {
+    0% {
+        stroke-dashoffset: 28;
+    }
+
+    100% {
+        stroke-dashoffset: -28;
+    }
+}
+
+.header-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+}
+
+.header-badge {
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    padding: 0.125rem 0.4rem;
+    border-radius: 4px;
+    background: var(--accent-gradient);
+    color: white;
+}
+
+.header-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.header-link {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: all var(--transition-fast);
+}
+
+.header-link:hover {
+    color: var(--text-secondary);
+    background: rgba(255, 255, 255, 0.04);
+}
+
+.header-link.active {
+    color: var(--accent-secondary);
+    background: rgba(238, 105, 131, 0.1);
+}
+
+.header-status {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-left: 0.75rem;
+    padding-left: 0.75rem;
+    border-left: 1px solid var(--border-subtle);
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--success);
+    box-shadow: 0 0 8px var(--success);
+    animation: pulse-glow-green 2s infinite;
+}
+
+@keyframes pulse-glow-green {
+
+    0%,
+    100% {
+        box-shadow: 0 0 4px var(--success);
+    }
+
+    50% {
+        box-shadow: 0 0 12px var(--success);
+    }
+}
+
+@media (max-width: 600px) {
+    .header-nav {
+        gap: 0;
+    }
+
+    .header-link span,
+    .header-link svg+* {
+        display: none;
+    }
+
+    .header-link {
+        padding: 0.4rem;
+    }
+
+    .header-status {
+        display: none;
+    }
+}

client/src/components/Header.jsx

@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import './Header.css';
+
+export default function Header() {
+    const pathname = usePathname();
+
+    const isActive = (path) => pathname === path;
+
+    return (
+        <header className="header">
+            <div className="header-inner">
+                <Link href="/" className="header-brand">
+                    <div className="header-logo">
+                        <div className="header-logo">
+                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" className="thread-logo">
+                                <path d="M4 16C4 16 8 8 16 8C24 8 28 16 28 16C28 16 24 24 16 24C8 24 4 16 4 16Z" className="thread-path-outer" />
+                                <circle cx="16" cy="16" r="3" className="thread-core" />
+                                <path d="M2 16H30" className="thread-line" />
+                            </svg>
+                        </div>
+                    </div>
+                    <h1 className="header-title">RedThread</h1>
+                    <span className="header-badge">AI</span>
+                </Link>
+
+                <nav className="header-nav">
+                    <Link href="/" className={`header-link ${isActive('/') ? 'active' : ''}`}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+                        </svg>
+                        Search
+                    </Link>
+                    <Link href="/history" className={`header-link ${isActive('/history') ? 'active' : ''}`}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                        </svg>
+                        History
+                    </Link>
+                    <Link href="/about" className={`header-link ${isActive('/about') ? 'active' : ''}`}>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+                        </svg>
+                        About
+                    </Link>
+                    <span className="header-status">
+                        <span className="status-dot"></span>
+                        Online
+                    </span>
+                </nav>
+            </div>
+        </header>
+    );
+}

client/src/components/Providers.jsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { ToastProvider } from '../contexts/ToastContext';
+
+export function Providers({ children }) {
+    return (
+        <ToastProvider>
+            {children}
+        </ToastProvider>
+    );
+}

client/src/components/ResultCard.css

@@ -0,0 +1,158 @@
+.result-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    position: relative;
+    overflow: hidden;
+}
+
+.result-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--accent-gradient);
+    opacity: 0;
+    transition: opacity var(--transition-normal);
+    z-index: 0;
+}
+
+.result-card:hover {
+    border-color: var(--border-hover);
+    box-shadow: var(--shadow-md);
+}
+
+.result-card:hover::before {
+    opacity: 0.03;
+}
+
+.result-card>* {
+    position: relative;
+    z-index: 1;
+}
+
+.result-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.result-card-title-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.result-card-name {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+.result-card-category {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--accent-primary);
+    background: rgba(238, 105, 131, 0.1);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    width: fit-content;
+}
+
+.result-card-rating {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    background: var(--bg-input);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+}
+
+.result-card-address {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.result-card-price {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--success);
+}
+
+.result-card-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.25rem;
+}
+
+.result-card-tag {
+    font-size: 0.75rem;
+    padding: 0.2rem 0.5rem;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+}
+
+.result-card-review {
+    font-style: italic;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-top: 0.5rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid var(--border-hover);
+}
+
+.result-card-footer {
+    margin-top: auto;
+    padding-top: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    border-top: 1px solid var(--border-subtle);
+}
+
+.result-card-source {
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.cache-badge {
+    background: rgba(46, 204, 113, 0.15);
+    color: var(--success);
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    font-weight: 700;
+    font-size: 0.65rem;
+}
+
+.result-card-expand {
+    color: var(--accent-secondary);
+    font-weight: 600;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all var(--transition-normal);
+}
+
+.result-card:hover .result-card-expand {
+    opacity: 1;
+    transform: translateX(0);
+}

client/src/components/ResultCard.jsx

@@ -0,0 +1,53 @@
+import './ResultCard.css';
+
+export default function ResultCard({ result, index, onClick }) {
+    return (
+        <article
+            className={`result-card fade-in-up stagger-${(index % 4) + 1}`}
+            onClick={onClick}
+            role="button"
+            tabIndex={0}
+            onKeyDown={e => { if (e.key === 'Enter') onClick?.(); }}
+        >
+            <div className="result-card-header">
+                <div className="result-card-title-row">
+                    <h3 className="result-card-name">{result.name}</h3>
+                    <span className="result-card-category">{result.category}</span>
+                </div>
+                <div className="result-card-rating">
+                    {result.rating !== 'N/A' && (
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="#fdcb6e" stroke="none">
+                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                        </svg>
+                    )}
+                    <span>{result.rating}</span>
+                </div>
+            </div>
+
+            <p className="result-card-address">{result.address}</p>
+            {result.priceRange && result.priceRange !== 'N/A' && (
+                <p className="result-card-price">{result.priceRange}</p>
+            )}
+
+            {result.features && result.features.length > 0 && (
+                <div className="result-card-features">
+                    {result.features.map((f, i) => (
+                        <span key={i} className="result-card-tag">{f}</span>
+                    ))}
+                </div>
+            )}
+
+            {result.reviewSummary && (
+                <p className="result-card-review">"{result.reviewSummary}"</p>
+            )}
+
+            <div className="result-card-footer">
+                <span className="result-card-source">
+                    Source: {result.source}
+                    {result.cached && <span className="cache-badge">⚡ Cached</span>}
+                </span>
+                <span className="result-card-expand">View Details →</span>
+            </div>
+        </article>
+    );
+}

client/src/components/ResultModal.css

@@ -0,0 +1,179 @@
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    animation: fadeInUp 200ms ease;
+}
+
+.modal-content {
+    position: relative;
+    width: 100%;
+    max-width: 560px;
+    max-height: 85vh;
+    overflow-y: auto;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    padding: 2rem;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+}
+
+.modal-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1.25rem;
+    padding-right: 2.5rem;
+}
+
+.modal-name {
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 0.3rem;
+}
+
+.modal-category {
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+    background: rgba(238, 105, 131, 0.15);
+    color: var(--accent-secondary);
+}
+
+.modal-rating {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--warning);
+}
+
+.modal-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+}
+
+.modal-detail {
+    padding: 0.6rem 0.75rem;
+    background: var(--bg-card);
+    border-radius: var(--radius-sm);
+}
+
+.modal-detail-label {
+    display: block;
+    font-size: 0.62rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 0.2rem;
+}
+
+.modal-detail span:last-child {
+    font-size: 0.85rem;
+    color: var(--text-primary);
+}
+
+.modal-price {
+    color: var(--success) !important;
+    font-weight: 600;
+}
+
+.modal-section {
+    margin-bottom: 1.25rem;
+}
+
+.modal-section-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+}
+
+.modal-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.modal-feature-tag {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.78rem;
+    font-weight: 500;
+    padding: 0.25rem 0.6rem;
+    border-radius: 20px;
+    background: rgba(0, 184, 148, 0.1);
+    border: 1px solid rgba(0, 184, 148, 0.2);
+    color: var(--success);
+}
+
+.modal-review {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    font-style: italic;
+    line-height: 1.6;
+    padding: 0.75rem 1rem;
+    border-left: 3px solid var(--accent-primary);
+    background: rgba(238, 105, 131, 0.05);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    margin: 0;
+}
+
+.modal-map-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.8rem 1.5rem;
+    background: var(--accent-primary);
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+    box-shadow: 0 4px 15px rgba(238, 105, 131, 0.2);
+    margin-top: 1rem;
+}
+
+.modal-map-button:hover {
+    background: var(--accent-secondary);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(238, 105, 131, 0.3);
+}

client/src/components/ResultModal.jsx

@@ -0,0 +1,98 @@
+import { useEffect } from 'react';
+import './ResultModal.css';
+
+export default function ResultModal({ result, onClose }) {
+    useEffect(() => {
+        function handleKey(e) {
+            if (e.key === 'Escape') onClose();
+        }
+        document.addEventListener('keydown', handleKey);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', handleKey);
+            document.body.style.overflow = '';
+        };
+    }, [onClose]);
+
+    if (!result) return null;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={e => e.stopPropagation()}>
+                <button className="modal-close" onClick={onClose}>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                </button>
+
+                <div className="modal-header">
+                    <div>
+                        <h2 className="modal-name">{result.name}</h2>
+                        <span className="modal-category">{result.category}</span>
+                    </div>
+                    <div className="modal-rating">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="#fdcb6e" stroke="none">
+                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+                        </svg>
+                        <span>{result.rating}</span>
+                    </div>
+                </div>
+
+                <div className="modal-detail-grid">
+                    <div className="modal-detail">
+                        <span className="modal-detail-label">Address</span>
+                        <span>{result.address}</span>
+                    </div>
+                    {result.priceRange && result.priceRange !== 'N/A' && (
+                        <div className="modal-detail">
+                            <span className="modal-detail-label">Price Range</span>
+                            <span className="modal-price">{result.priceRange}</span>
+                        </div>
+                    )}
+                    <div className="modal-detail">
+                        <span className="modal-detail-label">Data Source</span>
+                        <span>{result.source}</span>
+                    </div>
+                </div>
+
+                {result.features && result.features.length > 0 && (
+                    <div className="modal-section">
+                        <h4 className="modal-section-title">Features</h4>
+                        <div className="modal-features">
+                            {result.features.map((f, i) => (
+                                <span key={i} className="modal-feature-tag">
+                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                                        <polyline points="20 6 9 17 4 12" />
+                                    </svg>
+                                    {f}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {result.reviewSummary && (
+                    <div className="modal-section">
+                        <h4 className="modal-section-title">AI Review Summary</h4>
+                        <blockquote className="modal-review">
+                            {result.reviewSummary}
+                        </blockquote>
+                    </div>
+                )}
+
+                <a
+                    href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${result.name} ${result.address}`)}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="modal-map-button"
+                >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                        <circle cx="12" cy="10" r="3" />
+                    </svg>
+                    View on Google Maps
+                </a>
+            </div>
+        </div>
+    );
+}

client/src/components/SafetyBanner.css

@@ -0,0 +1,29 @@
+.safety-banner {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 0.75rem 1rem;
+    background: rgba(238, 105, 131, 0.06);
+    border: 1px solid rgba(238, 105, 131, 0.12);
+    border-radius: var(--radius-md);
+}
+
+.safety-banner-icon {
+    flex-shrink: 0;
+    color: var(--accent-secondary);
+    margin-top: 0.1rem;
+}
+
+.safety-banner-text {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+.safety-banner-text a {
+    color: var(--accent-secondary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}

client/src/components/SafetyBanner.jsx

@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import './SafetyBanner.css';
+
+export default function SafetyBanner() {
+    return (
+        <aside className="safety-banner">
+            <div className="safety-banner-icon">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                </svg>
+            </div>
+            <div className="safety-banner-content">
+                <p className="safety-banner-text">
+                    RedThread uses AI-powered safety validation. Harmful, illegal, or adult content queries are automatically blocked.
+                    By searching, you agree to our <Link href="/terms">Terms of Use</Link> and accept responsibility for ethical use.
+                </p>
+            </div>
+        </aside>
+    );
+}

client/src/components/SearchBar.css

@@ -0,0 +1,277 @@
+.searchbar-container {
+    max-width: 720px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 100;
+}
+
+.searchbar {
+    display: flex;
+    gap: 0.75rem;
+    position: relative;
+    z-index: 10;
+    /* Ensure searchbar is above siblings like location-active-plate */
+}
+
+.location-hint {
+    margin-top: 0.6rem;
+    margin-left: 0.15rem;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    max-width: 720px;
+}
+
+.location-hint .mono {
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-size: 0.78rem;
+}
+
+.searchbar-input-wrap {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.location-active-plate {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    align-self: flex-start;
+    margin-top: 0.75rem;
+    margin-left: 1rem;
+    padding: 0.4rem 0.8rem;
+    background: rgba(238, 105, 131, 0.1);
+    border: 1px solid rgba(238, 105, 131, 0.2);
+    border-radius: 20px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    animation: fadeIn 0.2s ease-out;
+}
+
+.active-dot {
+    width: 6px;
+    height: 6px;
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    box-shadow: 0 0 8px var(--primary-color);
+}
+
+.clear-location-text {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    margin-left: 0.25rem;
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.clear-location-text:hover {
+    color: #ff7675;
+    text-decoration-color: #ff7675;
+}
+
+
+
+.location-btn {
+    position: absolute;
+    left: 10px;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    z-index: 2;
+}
+
+.location-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-main);
+}
+
+.location-btn.active {
+    color: var(--primary-color);
+}
+
+.location-btn:not(.active):not(.error):not(:disabled) {
+    animation: pulse-hint 3s infinite;
+}
+
+@keyframes pulse-hint {
+    0% {
+        transform: scale(1);
+        filter: brightness(1);
+    }
+
+    50% {
+        transform: scale(1.15);
+        filter: brightness(1.3);
+        color: var(--accent-primary);
+    }
+
+    100% {
+        transform: scale(1);
+        filter: brightness(1);
+    }
+}
+
+.location-btn.error {
+    color: #ff7675;
+}
+
+.location-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Consolidated search input styling */
+.searchbar-input {
+    width: 100%;
+    padding: 0.875rem 1rem 0.875rem 3rem;
+    background: var(--bg-input);
+    border: 1.5px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    transition: all var(--transition-normal);
+}
+
+.searchbar-input::placeholder {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.searchbar-input:focus {
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 3px rgba(238, 105, 131, 0.15);
+}
+
+.searchbar-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    background: var(--accent-gradient);
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-normal);
+    white-space: nowrap;
+}
+
+.searchbar-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: var(--accent-glow);
+}
+
+.searchbar-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.searchbar-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2.5px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+}
+
+.searchbar-suggestions {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    background: #850E35;
+    /* Opaque background to prevent overlap bleed-through */
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    list-style: none;
+    z-index: 9999;
+    overflow: hidden;
+    animation: fadeInUp 150ms ease;
+    backdrop-filter: blur(10px);
+}
+
+.searchbar-suggestion {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0.75rem;
+    cursor: pointer;
+    transition: background var(--transition-fast);
+    font-size: 0.85rem;
+}
+
+.searchbar-suggestion:hover,
+.searchbar-suggestion.active {
+    background: rgba(238, 105, 131, 0.1);
+}
+
+.suggestion-type-icon {
+    font-size: 0.8rem;
+    flex-shrink: 0;
+}
+
+.suggestion-text {
+    flex: 1;
+    color: var(--text-primary);
+}
+
+.suggestion-cat {
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.1rem 0.35rem;
+    border-radius: 3px;
+    background: rgba(238, 105, 131, 0.12);
+    color: var(--accent-secondary);
+}
+
+.searchbar-suggestion.is-history {
+    color: var(--text-secondary);
+}
+
+.searchbar-suggestion.is-history svg {
+    color: var(--text-muted);
+}
+
+
+.suggestion-tag {
+    font-size: 0.6rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.1rem 0.3rem;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-muted);
+    margin-left: 0.5rem;
+}
+
+@media (max-width: 600px) {
+    .searchbar {
+        flex-direction: column;
+    }
+
+    .searchbar-btn {
+        justify-content: center;
+    }
+}

client/src/components/SearchBar.jsx

@@ -0,0 +1,192 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import useSearchHistory from '../hooks/useSearchHistory';
+import './SearchBar.css';
+
+export default function SearchBar({
+    onSearch,
+    loading,
+    userLocation,
+    locationLoading,
+    locationError,
+    requestLocation,
+    clearLocation
+}) {
+    const [query, setQuery] = useState('');
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [activeIdx, setActiveIdx] = useState(-1);
+    const { history } = useSearchHistory();
+    const debounceRef = useRef(null);
+    const wrapperRef = useRef(null);
+
+    // Filter local history based on query
+    const historySuggestions = useMemo(() => {
+        if (!query.trim()) {
+            return history.slice(0, 5).map(h => ({ ...h, type: 'history', text: h.query }));
+        }
+        const lowerQuery = query.toLowerCase();
+        return history
+            .filter(h => h.query.toLowerCase().includes(lowerQuery))
+            .slice(0, 5)
+            .map(h => ({ ...h, type: 'history', text: h.query }));
+    }, [history, query]);
+
+    // Only show private history suggestions
+    const allSuggestions = useMemo(() => {
+        return historySuggestions;
+    }, [historySuggestions]);
+
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+                setShowSuggestions(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    function handleInputChange(value) {
+        setQuery(value);
+        setActiveIdx(-1);
+
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+
+        setShowSuggestions(true);
+
+        // We stop fetching global suggestions to respect "no global searches"
+        // and only rely on the filtered local historySuggestions.
+    }
+
+
+    function handleSelect(text) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        setQuery(text);
+        setShowSuggestions(false);
+        onSearch(text);
+    }
+
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (query.trim().length < 3) return;
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        setShowSuggestions(false);
+        onSearch(query.trim());
+    }
+
+    function handleKeyDown(e) {
+        if (!showSuggestions || allSuggestions.length === 0) return;
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIdx(prev => (prev < allSuggestions.length - 1 ? prev + 1 : 0));
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIdx(prev => (prev > 0 ? prev - 1 : allSuggestions.length - 1));
+        } else if (e.key === 'Enter' && activeIdx >= 0) {
+            e.preventDefault();
+            handleSelect(allSuggestions[activeIdx].text);
+        } else if (e.key === 'Escape') {
+            setShowSuggestions(false);
+        } else if (e.key === 'Tab') {
+            setShowSuggestions(false);
+        }
+    }
+
+    return (
+        <div className="searchbar-container" ref={wrapperRef}>
+            <form className="searchbar" onSubmit={handleSubmit}>
+                <div className={`searchbar-input-wrap ${userLocation ? 'has-location' : ''}`}>
+                    <button
+                        type="button"
+                        className={`location-btn ${userLocation ? 'active' : ''} ${locationError ? 'error' : ''}`}
+                        onClick={userLocation ? clearLocation : requestLocation}
+                        disabled={locationLoading || loading}
+                        title={userLocation ? "Clear Location" : locationError ? locationError : "Use My Location"}
+                    >
+                        {locationLoading ? (
+                            <span className="location-spinner"></span>
+                        ) : (
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                <polygon points="3 11 22 2 13 21 11 13 3 11" />
+                            </svg>
+                        )}
+                    </button>
+                    <input
+                        id="search-input"
+                        type="text"
+                        className="searchbar-input"
+                        placeholder='Search anything — add your city or use your location'
+                        value={query}
+                        onChange={e => handleInputChange(e.target.value)}
+                        onFocus={() => { setShowSuggestions(true); }}
+                        onKeyDown={handleKeyDown}
+                        disabled={loading}
+                        autoComplete="off"
+                    />
+
+                    {showSuggestions && allSuggestions.length > 0 && !loading && (
+                        <ul className="searchbar-suggestions" role="listbox">
+                            {allSuggestions.map((s, i) => (
+                                <li
+                                    key={`${s.type}-${i}`}
+                                    className={`searchbar-suggestion ${i === activeIdx ? 'active' : ''} ${s.type === 'history' ? 'is-history' : ''}`}
+                                    onClick={() => handleSelect(s.text)}
+                                    role="option"
+                                    aria-selected={i === activeIdx}
+                                >
+                                    <span className="suggestion-type-icon">
+                                        {s.type === 'history' ? (
+                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                                                <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+                                            </svg>
+                                        ) : s.type === 'place' ? '📍' : s.type === 'category' ? '📂' : '💡'}
+                                    </span>
+                                    <span className="suggestion-text">{s.text}</span>
+                                    {s.type === 'history' && (
+                                        <span className="suggestion-tag">Recent</span>
+                                    )}
+                                    {s.category && (
+                                        <span className="suggestion-cat">{s.category}</span>
+                                    )}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+                <button
+                    id="search-button"
+                    type="submit"
+                    className="searchbar-btn"
+                    disabled={loading || query.trim().length < 3}
+                >
+                    {loading ? (
+                        <span className="searchbar-spinner"></span>
+                    ) : (
+                        <>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M22 2L11 13" /><path d="M22 2L15 22L11 13L2 9L22 2Z" />
+                            </svg>
+                            Search
+                        </>
+                    )}
+                </button>
+            </form>
+
+            {userLocation ? (
+                <div className="location-active-plate">
+                    <span className="active-dot"></span>
+                    Using precise GPS location
+                    <button type="button" className="clear-location-text" onClick={clearLocation}>
+                        Clear
+                    </button>
+                </div>
+            ) : (
+                <div className="location-hint">
+                    Tip: include your city in the search or use your location
+                </div>
+            )}
+        </div>
+    );
+}
+

client/src/components/SkeletonCard.css

@@ -0,0 +1,64 @@
+.skeleton-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 1.25rem 1.5rem;
+}
+
+.skeleton-line {
+    border-radius: 4px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
+    background-size: 400% 100%;
+    animation: shimmer 1.5s infinite;
+}
+
+.skeleton-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.6rem;
+}
+
+.skeleton-title {
+    width: 55%;
+    height: 18px;
+}
+
+.skeleton-badge {
+    width: 40px;
+    height: 18px;
+}
+
+.skeleton-address {
+    width: 70%;
+    height: 12px;
+    margin-bottom: 0.35rem;
+}
+
+.skeleton-price {
+    width: 30%;
+    height: 14px;
+    margin-bottom: 0.75rem;
+}
+
+.skeleton-tags {
+    display: flex;
+    gap: 0.375rem;
+    margin-bottom: 0.75rem;
+}
+
+.skeleton-tag {
+    width: 60px;
+    height: 22px;
+    border-radius: 20px;
+}
+
+.skeleton-review {
+    width: 100%;
+    height: 12px;
+    margin-bottom: 0.35rem;
+}
+
+.skeleton-review-short {
+    width: 65%;
+    height: 12px;
+}

client/src/components/SkeletonCard.jsx

@@ -0,0 +1,21 @@
+import './SkeletonCard.css';
+
+export default function SkeletonCard() {
+    return (
+        <div className="skeleton-card">
+            <div className="skeleton-header">
+                <div className="skeleton-line skeleton-title"></div>
+                <div className="skeleton-line skeleton-badge"></div>
+            </div>
+            <div className="skeleton-line skeleton-address"></div>
+            <div className="skeleton-line skeleton-price"></div>
+            <div className="skeleton-tags">
+                <div className="skeleton-line skeleton-tag"></div>
+                <div className="skeleton-line skeleton-tag"></div>
+                <div className="skeleton-line skeleton-tag"></div>
+            </div>
+            <div className="skeleton-line skeleton-review"></div>
+            <div className="skeleton-line skeleton-review-short"></div>
+        </div>
+    );
+}

client/src/contexts/ToastContext.css

@@ -0,0 +1,70 @@
+.toast-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    z-index: 9999;
+    pointer-events: none;
+}
+
+.toast {
+    pointer-events: auto;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    padding: 1rem 1.25rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    min-width: 250px;
+    max-width: 400px;
+    animation-duration: 0.3s;
+}
+
+.toast-success {
+    border-left: 4px solid var(--success);
+}
+
+.toast-error {
+    border-left: 4px solid #ff7675;
+}
+
+.toast-info {
+    border-left: 4px solid var(--accent-primary);
+}
+
+.toast-close {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 0.25rem;
+    transition: color var(--transition-fast);
+}
+
+.toast-close:hover {
+    color: var(--text-primary);
+}
+
+@media (max-width: 600px) {
+    .toast-container {
+        bottom: 1rem;
+        left: 1rem;
+        right: 1rem;
+        align-items: center;
+    }
+
+    .toast {
+        width: 100%;
+        max-width: 100%;
+    }
+}

client/src/contexts/ToastContext.jsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback } from 'react';
+import './ToastContext.css';
+
+const ToastContext = createContext(null);
+
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+
+    const addToast = useCallback((message, type = 'info', duration = 3000) => {
+        const id = Date.now();
+        setToasts(prev => [...prev, { id, message, type }]);
+
+        setTimeout(() => {
+            setToasts(prev => prev.filter(t => t.id !== id));
+        }, duration);
+    }, []);
+
+    const removeToast = useCallback(id => {
+        setToasts(prev => prev.filter(t => t.id !== id));
+    }, []);
+
+    return (
+        <ToastContext.Provider value={{ addToast }}>
+            {children}
+            <div className="toast-container" aria-live="polite">
+                {toasts.map(toast => (
+                    <div key={toast.id} className={`toast toast-${toast.type} fade-in-up`}>
+                        {toast.type === 'success' && '✅ '}
+                        {toast.type === 'error' && '❌ '}
+                        {toast.type === 'info' && '💡 '}
+                        {toast.message}
+                        <button
+                            className="toast-close"
+                            onClick={() => removeToast(toast.id)}
+                            aria-label="Close"
+                        >
+                            ×
+                        </button>
+                    </div>
+                ))}
+            </div>
+        </ToastContext.Provider>
+    );
+}
+
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+}

client/src/hooks/useGeolocation.js

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+export function useGeolocation() {
+    const [location, setLocation] = useState(null);
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const requestLocation = () => {
+        setIsLoading(true);
+        setError(null);
+
+        if (!navigator.geolocation) {
+            setError('Geolocation is not supported by your browser');
+            setIsLoading(false);
+            return;
+        }
+
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                setLocation({
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude
+                });
+                setIsLoading(false);
+            },
+            (err) => {
+                setError(err.message || 'Failed to retrieve location');
+                setIsLoading(false);
+            },
+            {
+                enableHighAccuracy: true,
+                timeout: 10000,
+                maximumAge: 0
+            }
+        );
+    };
+
+    const clearLocation = () => {
+        setLocation(null);
+        setError(null);
+    };
+
+    return { location, error, isLoading, requestLocation, clearLocation };
+}