Initial commit: deardiary project setup

2026-03-26 19:57:20 +00:00
commit 3f9bc1f484
73 changed files with 8627 additions and 0 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY frontend/package*.json ./
+RUN npm install
+
+COPY frontend ./
+RUN npm run build
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost/ || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#1e293b" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>TotalRecall - AI Journal</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -0,0 +1,18 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "totalrecall-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.1"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,21 @@
+{
+  "name": "TotalRecall",
+  "short_name": "TotalRecall",
+  "description": "AI-powered daily journal that captures life through multiple input methods",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#020617",
+  "theme_color": "#1e293b",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,94 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { api } from './lib/api';
+import Auth from './pages/Auth';
+import Home from './pages/Home';
+import History from './pages/History';
+import Day from './pages/Day';
+import Journal from './pages/Journal';
+import Settings from './pages/Settings';
+
+function PrivateRoute({ children }: { children: React.ReactNode }) {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const key = api.getApiKey();
+    setIsAuthenticated(!!key);
+  }, []);
+
+  if (isAuthenticated === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-pulse text-slate-400">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/auth" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const key = api.getApiKey();
+    setIsAuthenticated(!!key);
+    setLoading(false);
+  }, []);
+
+  const handleAuth = () => {
+    setIsAuthenticated(true);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-slate-950">
+        <div className="animate-pulse text-slate-400">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <BrowserRouter>
+      <div className="min-h-screen bg-slate-950 text-slate-100">
+        {isAuthenticated && (
+          <nav className="bg-slate-900 border-b border-slate-800 sticky top-0 z-50">
+            <div className="max-w-4xl mx-auto px-4 py-3 flex gap-6">
+              <a href="/" className="text-slate-300 hover:text-white transition">Today</a>
+              <a href="/history" className="text-slate-300 hover:text-white transition">History</a>
+              <a href="/settings" className="text-slate-300 hover:text-white transition">Settings</a>
+            </div>
+          </nav>
+        )}
+        <Routes>
+          <Route path="/auth" element={
+            isAuthenticated ? <Navigate to="/" replace /> : <Auth onAuth={handleAuth} />
+          } />
+          <Route path="/" element={
+            <PrivateRoute><Home /></PrivateRoute>
+          } />
+          <Route path="/history" element={
+            <PrivateRoute><History /></PrivateRoute>
+          } />
+          <Route path="/day/:date" element={
+            <PrivateRoute><Day /></PrivateRoute>
+          } />
+          <Route path="/journal/:date" element={
+            <PrivateRoute><Journal /></PrivateRoute>
+          } />
+          <Route path="/settings" element={
+            <PrivateRoute><Settings /></PrivateRoute>
+          } />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;
--- a/frontend/src/components/EntryInput.tsx
+++ b/frontend/src/components/EntryInput.tsx
@@ -0,0 +1,197 @@
+import { useState, useRef } from 'react';
+
+interface Props {
+  onSubmit: (type: string, content: string, metadata?: object) => Promise<{ error: { message: string } | null }>;
+}
+
+export default function EntryInput({ onSubmit }: Props) {
+  const [type, setType] = useState('text');
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [recording, setRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!content.trim()) return;
+
+    setLoading(true);
+    setError('');
+
+    const res = await onSubmit(type, content);
+    if (res.error) {
+      setError(res.error.message);
+    } else {
+      setContent('');
+    }
+    setLoading(false);
+  };
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      const chunks: Blob[] = [];
+
+      recorder.ondataavailable = (e) => chunks.push(e.data);
+      recorder.onstop = async () => {
+        const blob = new Blob(chunks, { type: 'audio/webm' });
+        setLoading(true);
+        const res = await onSubmit('voice', 'Voice memo', { duration: Math.round(blob.size / 1000) });
+        setLoading(false);
+        if (!res.error) setContent('');
+        stream.getTracks().forEach(t => t.stop());
+      };
+
+      recorder.start();
+      setMediaRecorder(recorder);
+      setRecording(true);
+    } catch (err) {
+      setError('Microphone access denied');
+    }
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setRecording(false);
+    }
+  };
+
+  const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setLoading(true);
+    const res = await onSubmit('photo', `Photo: ${file.name}`);
+    setLoading(false);
+    if (!res.error) setContent('');
+    e.target.value = '';
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="mb-6">
+      <div className="flex gap-2 mb-2">
+        <button
+          type="button"
+          onClick={() => setType('text')}
+          className={`px-3 py-1 rounded text-sm ${type === 'text' ? 'bg-slate-700' : 'bg-slate-800'}`}
+        >
+          Text
+        </button>
+        <button
+          type="button"
+          onClick={() => setType('photo')}
+          className={`px-3 py-1 rounded text-sm ${type === 'photo' ? 'bg-slate-700' : 'bg-slate-800'}`}
+        >
+          Photo
+        </button>
+        <button
+          type="button"
+          onClick={() => setType('voice')}
+          className={`px-3 py-1 rounded text-sm ${type === 'voice' ? 'bg-slate-700' : 'bg-slate-800'}`}
+        >
+          Voice
+        </button>
+        <button
+          type="button"
+          onClick={() => setType('health')}
+          className={`px-3 py-1 rounded text-sm ${type === 'health' ? 'bg-slate-700' : 'bg-slate-800'}`}
+        >
+          Health
+        </button>
+      </div>
+
+      {type === 'text' && (
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="What's on your mind?"
+            className="flex-1 px-4 py-3 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+            autoFocus
+          />
+          <button
+            type="submit"
+            disabled={loading || !content.trim()}
+            className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition disabled:opacity-50"
+          >
+            Add
+          </button>
+        </div>
+      )}
+
+      {type === 'photo' && (
+        <div className="bg-slate-800 rounded-lg p-4 border border-slate-700">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            onChange={handlePhotoUpload}
+            className="hidden"
+          />
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={loading}
+            className="w-full py-3 bg-slate-700 hover:bg-slate-600 rounded-lg transition disabled:opacity-50"
+          >
+            Take Photo or Choose from Gallery
+          </button>
+        </div>
+      )}
+
+      {type === 'voice' && (
+        <div className="bg-slate-800 rounded-lg p-4 border border-slate-700">
+          {recording ? (
+            <div className="flex items-center justify-center gap-4">
+              <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" />
+              <span className="text-slate-300">Recording...</span>
+              <button
+                type="button"
+                onClick={stopRecording}
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition"
+              >
+                Stop
+              </button>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={startRecording}
+              disabled={loading}
+              className="w-full py-3 bg-slate-700 hover:bg-slate-600 rounded-lg transition disabled:opacity-50"
+            >
+              Start Recording
+            </button>
+          )}
+        </div>
+      )}
+
+      {type === 'health' && (
+        <div className="space-y-3">
+          <input
+            type="text"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder="How are you feeling? (e.g., 'Good energy, slight headache')"
+            className="w-full px-4 py-3 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+          />
+          <button
+            type="submit"
+            disabled={loading || !content.trim()}
+            className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition disabled:opacity-50"
+          >
+            Log Health
+          </button>
+        </div>
+      )}
+
+      {error && <p className="mt-2 text-red-400 text-sm">{error}</p>}
+    </form>
+  );
+}
--- a/frontend/src/components/EntryList.tsx
+++ b/frontend/src/components/EntryList.tsx
@@ -0,0 +1,77 @@
+import type { Entry } from '../lib/api';
+
+interface Props {
+  entries: Entry[];
+  onDelete: (id: string) => void;
+}
+
+export default function EntryList({ entries, onDelete }: Props) {
+  const formatTime = (dateStr: string) => {
+    return new Date(dateStr).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'text': return '📝';
+      case 'photo': return '📷';
+      case 'voice': return '🎤';
+      case 'health': return '❤️';
+      case 'location': return '📍';
+      default: return '📌';
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'text': return 'border-l-blue-500';
+      case 'photo': return 'border-l-yellow-500';
+      case 'voice': return 'border-l-purple-500';
+      case 'health': return 'border-l-red-500';
+      case 'location': return 'border-l-green-500';
+      default: return 'border-l-slate-500';
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {entries.map((entry) => (
+        <div
+          key={entry.id}
+          className={`bg-slate-900 rounded-lg p-4 border border-slate-800 border-l-4 ${getTypeColor(entry.type)}`}
+        >
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <span className="text-lg">{getTypeIcon(entry.type)}</span>
+                <span className="text-xs text-slate-500">{formatTime(entry.createdAt)}</span>
+              </div>
+              <p className="text-slate-200">{entry.content}</p>
+              {entry.metadata && (
+                <div className="mt-2 text-xs text-slate-500">
+                  {(() => {
+                    try {
+                      const meta = JSON.parse(entry.metadata);
+                      return meta.location ? (
+                        <span>📍 {meta.location.lat?.toFixed(4)}, {meta.location.lng?.toFixed(4)}</span>
+                      ) : meta.duration ? (
+                        <span>⏱️ {meta.duration}s</span>
+                      ) : null;
+                    } catch {
+                      return null;
+                    }
+                  })()}
+                </div>
+              )}
+            </div>
+            <button
+              onClick={() => onDelete(entry.id)}
+              className="text-slate-500 hover:text-red-400 text-sm transition"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-slate-950 text-slate-100;
+}
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,172 @@
+const API_BASE = '/api/v1';
+
+interface ApiResponse<T> {
+  data: T | null;
+  error: { code: string; message: string } | null;
+}
+
+class ApiClient {
+  private apiKey: string | null = null;
+
+  setApiKey(key: string) {
+    this.apiKey = key;
+    localStorage.setItem('apiKey', key);
+  }
+
+  getApiKey(): string | null {
+    if (this.apiKey) return this.apiKey;
+    this.apiKey = localStorage.getItem('apiKey');
+    return this.apiKey;
+  }
+
+  clearApiKey() {
+    this.apiKey = null;
+    localStorage.removeItem('apiKey');
+  }
+
+  private async request<T>(
+    method: string,
+    path: string,
+    body?: unknown
+  ): Promise<ApiResponse<T>> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (this.getApiKey()) {
+      headers['Authorization'] = `Bearer ${this.getApiKey()}`;
+    }
+
+    const response = await fetch(`${API_BASE}${path}`, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    return response.json() as Promise<ApiResponse<T>>;
+  }
+
+  async register(email: string, password: string) {
+    return this.request<{ user: { id: string; email: string } }>('POST', '/auth/register', { email, password });
+  }
+
+  async login(email: string, password: string) {
+    return this.request<{ token: string; userId: string }>('POST', '/auth/login', { email, password });
+  }
+
+  async createApiKey(name: string, token: string) {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`,
+    };
+    const response = await fetch(`${API_BASE}/auth/api-key`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ name }),
+    });
+    return response.json() as Promise<ApiResponse<{ apiKey: string }>>;
+  }
+
+  async getDays() {
+    return this.request<Array<{ date: string; entryCount: number; hasJournal: boolean }>>('GET', '/days');
+  }
+
+  async getDay(date: string) {
+    return this.request<{ date: string; entries: Entry[]; journal: Journal | null }>('GET', `/days/${date}`);
+  }
+
+  async deleteDay(date: string) {
+    return this.request<{ deleted: boolean }>('DELETE', `/days/${date}`);
+  }
+
+  async createEntry(date: string, type: string, content: string, metadata?: object) {
+    return this.request<Entry>('POST', '/entries', { date, type, content, metadata });
+  }
+
+  async updateEntry(id: string, content: string, metadata?: object) {
+    return this.request<Entry>('PUT', `/entries/${id}`, { content, metadata });
+  }
+
+  async deleteEntry(id: string) {
+    return this.request<{ deleted: boolean }>('DELETE', `/entries/${id}`);
+  }
+
+  async uploadPhoto(entryId: string, file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const headers: Record<string, string> = {};
+    if (this.getApiKey()) {
+      headers['Authorization'] = `Bearer ${this.getApiKey()}`;
+    }
+
+    const response = await fetch(`${API_BASE}/entries/${entryId}/photo`, {
+      method: 'POST',
+      headers,
+      body: formData,
+    });
+    return response.json() as Promise<ApiResponse<{ mediaPath: string }>>;
+  }
+
+  async uploadVoice(entryId: string, file: File) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const headers: Record<string, string> = {};
+    if (this.getApiKey()) {
+      headers['Authorization'] = `Bearer ${this.getApiKey()}`;
+    }
+
+    const response = await fetch(`${API_BASE}/entries/${entryId}/voice`, {
+      method: 'POST',
+      headers,
+      body: formData,
+    });
+    return response.json() as Promise<ApiResponse<{ mediaPath: string }>>;
+  }
+
+  async generateJournal(date: string) {
+    return this.request<Journal>('POST', `/journal/generate/${date}`);
+  }
+
+  async getJournal(date: string) {
+    return this.request<Journal>('GET', `/journal/${date}`);
+  }
+
+  async getSettings() {
+    return this.request<Settings>('GET', '/settings');
+  }
+
+  async updateSettings(settings: Partial<Settings>) {
+    return this.request<Settings>('PUT', '/settings', settings);
+  }
+}
+
+export interface Entry {
+  id: string;
+  date: string;
+  type: 'text' | 'voice' | 'photo' | 'health' | 'location';
+  content: string;
+  mediaPath?: string;
+  metadata?: string;
+  createdAt: string;
+}
+
+export interface Journal {
+  id: string;
+  date: string;
+  content: string;
+  entryCount: number;
+  generatedAt: string;
+}
+
+export interface Settings {
+  aiProvider: 'openai' | 'anthropic' | 'ollama' | 'lmstudio';
+  aiApiKey?: string;
+  aiModel: string;
+  aiBaseUrl?: string;
+  journalPrompt: string;
+  language: string;
+}
+
+export const api = new ApiClient();
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
--- a/frontend/src/pages/Auth.tsx
+++ b/frontend/src/pages/Auth.tsx
@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { api } from '../lib/api';
+
+export default function Auth({ onAuth }: { onAuth: () => void }) {
+  const [mode, setMode] = useState<'login' | 'register'>('login');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (mode === 'register') {
+        const res = await api.register(email, password);
+        if (res.error) {
+          setError(res.error.message);
+          return;
+        }
+        setMode('login');
+        setPassword('');
+        setError('Account created! Please log in.');
+      } else {
+        const res = await api.login(email, password);
+        if (res.error) {
+          setError(res.error.message);
+          return;
+        }
+        
+        const keyRes = await api.createApiKey('Web App', res.data!.token);
+        if (keyRes.data) {
+          api.setApiKey(keyRes.data.apiKey);
+          onAuth();
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <h1 className="text-3xl font-bold text-center mb-8 text-slate-100">TotalRecall</h1>
+        
+        <div className="bg-slate-900 rounded-xl p-6 border border-slate-800">
+          <div className="flex gap-4 mb-6">
+            <button
+              onClick={() => setMode('login')}
+              className={`flex-1 py-2 rounded-lg transition ${
+                mode === 'login' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              Login
+            </button>
+            <button
+              onClick={() => setMode('register')}
+              className={`flex-1 py-2 rounded-lg transition ${
+                mode === 'register' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:text-white'
+              }`}
+            >
+              Register
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Password</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+                required
+                minLength={8}
+              />
+            </div>
+            {error && <p className="text-red-400 text-sm">{error}</p>}
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition disabled:opacity-50"
+            >
+              {loading ? 'Please wait...' : mode === 'login' ? 'Login' : 'Create Account'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/Day.tsx
+++ b/frontend/src/pages/Day.tsx
@@ -0,0 +1,78 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { api, Entry } from '../lib/api';
+import EntryInput from '../components/EntryInput';
+import EntryList from '../components/EntryList';
+
+export default function Day() {
+  const { date } = useParams<{ date: string }>();
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasJournal, setHasJournal] = useState(false);
+
+  useEffect(() => {
+    if (date) loadEntries();
+  }, [date]);
+
+  const loadEntries = async () => {
+    if (!date) return;
+    setLoading(true);
+    const res = await api.getDay(date);
+    if (res.data) {
+      setEntries(res.data.entries);
+      setHasJournal(!!res.data.journal);
+    }
+    setLoading(false);
+  };
+
+  const handleAddEntry = async (type: string, content: string, metadata?: object) => {
+    if (!date) return { error: { message: 'No date' } };
+    const res = await api.createEntry(date, type, content, metadata);
+    if (res.data) {
+      setEntries((prev) => [...prev, res.data!]);
+    }
+    return res;
+  };
+
+  const handleDeleteEntry = async (id: string) => {
+    const res = await api.deleteEntry(id);
+    if (res.data) {
+      setEntries((prev) => prev.filter((e) => e.id !== id));
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr + 'T12:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+  };
+
+  if (!date) return null;
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <a href="/history" className="text-slate-400 hover:text-white text-sm mb-1 inline-block">← Back</a>
+          <h1 className="text-2xl font-bold">{formatDate(date)}</h1>
+        </div>
+        {hasJournal && (
+          <a href={`/journal/${date}`} className="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition">
+            View Journal
+          </a>
+        )}
+      </div>
+
+      <EntryInput onSubmit={handleAddEntry} />
+
+      {loading ? (
+        <div className="text-center py-12 text-slate-400">Loading...</div>
+      ) : entries.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-slate-400">No entries for this day</p>
+        </div>
+      ) : (
+        <EntryList entries={entries} onDelete={handleDeleteEntry} />
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/History.tsx
+++ b/frontend/src/pages/History.tsx
@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { api } from '../lib/api';
+
+interface DayInfo {
+  date: string;
+  entryCount: number;
+  hasJournal: boolean;
+}
+
+export default function History() {
+  const [days, setDays] = useState<DayInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadDays();
+  }, []);
+
+  const loadDays = async () => {
+    setLoading(true);
+    const res = await api.getDays();
+    if (res.data) {
+      setDays(res.data);
+    }
+    setLoading(false);
+  };
+
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr + 'T12:00:00');
+    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  };
+
+  const handleDelete = async (date: string) => {
+    if (confirm('Delete all entries for this day?')) {
+      await api.deleteDay(date);
+      loadDays();
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-6">History</h1>
+
+      {loading ? (
+        <div className="text-center py-12 text-slate-400">Loading...</div>
+      ) : days.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-slate-400">No entries yet</p>
+          <p className="text-slate-500 text-sm">Start adding entries to see them here</p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {days.map((day) => (
+            <div
+              key={day.date}
+              className="flex items-center justify-between p-4 bg-slate-900 rounded-lg border border-slate-800"
+            >
+              <div className="flex items-center gap-4">
+                <a href={`/day/${day.date}`} className="font-medium hover:text-blue-400">
+                  {formatDate(day.date)}
+                </a>
+                <span className="text-slate-400 text-sm">
+                  {day.entryCount} {day.entryCount === 1 ? 'entry' : 'entries'}
+                </span>
+                {day.hasJournal && (
+                  <a href={`/journal/${day.date}`} className="text-purple-400 text-sm hover:text-purple-300">
+                    Journal
+                  </a>
+                )}
+              </div>
+              <button
+                onClick={() => handleDelete(day.date)}
+                className="text-slate-500 hover:text-red-400 text-sm transition"
+              >
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import { api, Entry } from '../lib/api';
+import EntryInput from '../components/EntryInput';
+import EntryList from '../components/EntryList';
+
+export default function Home() {
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+
+  const today = new Date().toISOString().split('T')[0];
+
+  useEffect(() => {
+    loadEntries();
+  }, []);
+
+  const loadEntries = async () => {
+    setLoading(true);
+    const res = await api.getDay(today);
+    if (res.data) {
+      setEntries(res.data.entries);
+    }
+    setLoading(false);
+  };
+
+  const handleAddEntry = async (type: string, content: string, metadata?: object) => {
+    const res = await api.createEntry(today, type, content, metadata);
+    if (res.data) {
+      setEntries((prev) => [...prev, res.data!]);
+    }
+    return res;
+  };
+
+  const handleDeleteEntry = async (id: string) => {
+    const res = await api.deleteEntry(id);
+    if (res.data) {
+      setEntries((prev) => prev.filter((e) => e.id !== id));
+    }
+  };
+
+  const handleGenerateJournal = async () => {
+    setGenerating(true);
+    await api.generateJournal(today);
+    setGenerating(false);
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Today</h1>
+          <p className="text-slate-400">{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</p>
+        </div>
+        <button
+          onClick={handleGenerateJournal}
+          disabled={generating || entries.length === 0}
+          className="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition disabled:opacity-50"
+        >
+          {generating ? 'Generating...' : 'Generate Journal'}
+        </button>
+      </div>
+
+      <EntryInput onSubmit={handleAddEntry} />
+
+      {loading ? (
+        <div className="text-center py-12 text-slate-400">Loading...</div>
+      ) : entries.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-slate-400 mb-2">No entries yet today</p>
+          <p className="text-slate-500 text-sm">Start capturing your day above</p>
+        </div>
+      ) : (
+        <EntryList entries={entries} onDelete={handleDeleteEntry} />
+      )}
+
+      {entries.length > 0 && (
+        <div className="mt-6 text-center">
+          <a href={`/journal/${today}`} className="text-purple-400 hover:text-purple-300 text-sm">
+            View journal →
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/Journal.tsx
+++ b/frontend/src/pages/Journal.tsx
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { api, Journal } from '../lib/api';
+
+export default function JournalPage() {
+  const { date } = useParams<{ date: string }>();
+  const [journal, setJournal] = useState<Journal | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+
+  useEffect(() => {
+    if (date) loadJournal();
+  }, [date]);
+
+  const loadJournal = async () => {
+    if (!date) return;
+    setLoading(true);
+    const res = await api.getJournal(date);
+    if (res.data) {
+      setJournal(res.data);
+    }
+    setLoading(false);
+  };
+
+  const handleGenerate = async () => {
+    if (!date) return;
+    setGenerating(true);
+    const res = await api.generateJournal(date);
+    if (res.data) {
+      setJournal(res.data);
+    }
+    setGenerating(false);
+  };
+
+  const formatDate = (dateStr: string) => {
+    const d = new Date(dateStr + 'T12:00:00');
+    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
+  };
+
+  if (!date) return null;
+
+  return (
+    <div className="max-w-4xl mx-auto p-4">
+      <div className="mb-6">
+        <a href={`/day/${date}`} className="text-slate-400 hover:text-white text-sm mb-1 inline-block">← Back to day</a>
+        <h1 className="text-2xl font-bold">Journal</h1>
+        <p className="text-slate-400">{formatDate(date)}</p>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-slate-400">Loading...</div>
+      ) : !journal ? (
+        <div className="text-center py-12">
+          <p className="text-slate-400 mb-4">No journal generated yet</p>
+          <button
+            onClick={handleGenerate}
+            disabled={generating}
+            className="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition disabled:opacity-50"
+          >
+            {generating ? 'Generating...' : 'Generate Journal'}
+          </button>
+        </div>
+      ) : (
+        <div>
+          <div className="text-sm text-slate-400 mb-4">
+            Generated {new Date(journal.generatedAt).toLocaleString()} • {journal.entryCount} entries
+          </div>
+          <div className="prose prose-invert prose-slate max-w-none">
+            <div className="bg-slate-900 rounded-xl p-6 border border-slate-800 whitespace-pre-wrap leading-relaxed">
+              {journal.content}
+            </div>
+          </div>
+          <div className="mt-6 flex gap-4">
+            <button
+              onClick={handleGenerate}
+              disabled={generating}
+              className="px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm transition disabled:opacity-50"
+            >
+              Regenerate
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import { api, Settings } from '../lib/api';
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useState<Partial<Settings>>({});
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    setLoading(true);
+    const res = await api.getSettings();
+    if (res.data) {
+      setSettings(res.data);
+    }
+    setLoading(false);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaved(false);
+    await api.updateSettings(settings);
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const handleLogout = () => {
+    api.clearApiKey();
+    window.location.href = '/auth';
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-2xl mx-auto p-4">
+        <div className="text-center py-12 text-slate-400">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-4">
+      <h1 className="text-2xl font-bold mb-6">Settings</h1>
+
+      <div className="space-y-6">
+        <section className="bg-slate-900 rounded-xl p-6 border border-slate-800">
+          <h2 className="text-lg font-medium mb-4">AI Provider</h2>
+          
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Provider</label>
+              <select
+                value={settings.aiProvider || 'openai'}
+                onChange={(e) => setSettings({ ...settings, aiProvider: e.target.value as Settings['aiProvider'] })}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+              >
+                <option value="openai">OpenAI (GPT-4)</option>
+                <option value="anthropic">Anthropic (Claude)</option>
+                <option value="ollama">Ollama (Local)</option>
+                <option value="lmstudio">LM Studio (Local)</option>
+              </select>
+            </div>
+
+            {(settings.aiProvider === 'openai' || settings.aiProvider === 'anthropic') && (
+              <div>
+                <label className="block text-sm text-slate-400 mb-1">API Key</label>
+                <input
+                  type="password"
+                  value={settings.aiApiKey || ''}
+                  onChange={(e) => setSettings({ ...settings, aiApiKey: e.target.value })}
+                  placeholder="sk-..."
+                  className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+            )}
+
+            {(settings.aiProvider === 'ollama' || settings.aiProvider === 'lmstudio') && (
+              <div>
+                <label className="block text-sm text-slate-400 mb-1">Base URL</label>
+                <input
+                  type="text"
+                  value={settings.aiBaseUrl || ''}
+                  onChange={(e) => setSettings({ ...settings, aiBaseUrl: e.target.value })}
+                  placeholder={settings.aiProvider === 'ollama' ? 'http://localhost:11434' : 'http://localhost:1234/v1'}
+                  className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+                />
+              </div>
+            )}
+
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Model</label>
+              <input
+                type="text"
+                value={settings.aiModel || ''}
+                onChange={(e) => setSettings({ ...settings, aiModel: e.target.value })}
+                placeholder={settings.aiProvider === 'openai' ? 'gpt-4' : settings.aiProvider === 'anthropic' ? 'claude-3-sonnet-20240229' : 'llama3.2'}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className="bg-slate-900 rounded-xl p-6 border border-slate-800">
+          <h2 className="text-lg font-medium mb-4">Journal Generation</h2>
+          
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">System Prompt</label>
+              <textarea
+                value={settings.journalPrompt || ''}
+                onChange={(e) => setSettings({ ...settings, journalPrompt: e.target.value })}
+                rows={4}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none resize-none"
+                placeholder="Instructions for the AI journal writer..."
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Language</label>
+              <select
+                value={settings.language || 'en'}
+                onChange={(e) => setSettings({ ...settings, language: e.target.value })}
+                className="w-full px-4 py-2 bg-slate-800 rounded-lg border border-slate-700 focus:border-blue-500 focus:outline-none"
+              >
+                <option value="en">English</option>
+                <option value="de">Deutsch</option>
+                <option value="es">Español</option>
+                <option value="fr">Français</option>
+                <option value="ja">日本語</option>
+                <option value="zh">中文</option>
+              </select>
+            </div>
+          </div>
+        </section>
+
+        <div className="flex items-center justify-between">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition disabled:opacity-50"
+          >
+            {saving ? 'Saving...' : saved ? 'Saved!' : 'Save Settings'}
+          </button>
+
+          <button
+            onClick={handleLogout}
+            className="px-4 py-2 text-red-400 hover:text-red-300 transition"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/EntryInput.tsx","./src/components/EntryList.tsx","./src/lib/api.ts","./src/pages/Auth.tsx","./src/pages/Day.tsx","./src/pages/History.tsx","./src/pages/Home.tsx","./src/pages/Journal.tsx","./src/pages/Settings.tsx"],"version":"5.9.3"}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: process.env.VITE_API_URL || 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+});
				`@@ -0,0 +1 @@`
				`{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/EntryInput.tsx","./src/components/EntryList.tsx","./src/lib/api.ts","./src/pages/Auth.tsx","./src/pages/Day.tsx","./src/pages/History.tsx","./src/pages/Home.tsx","./src/pages/Journal.tsx","./src/pages/Settings.tsx"],"version":"5.9.3"}`