FE-1: Login-Seite vervollständigen, Theme-Toggle, Sidebar-Historie, Hauptlayout

src/lib/auth.ts

@@ -0,0 +1,31 @@
+import { user } from '$lib/stores';
+
+const API_KEY_STORAGE = 'nsct-api-key';
+
+export function login(apiKey: string): Promise<{ userId: string; username: string }> {
+    setApiKey(apiKey);
+    // Set a minimal user object; real identity is fetched from the backend later
+    user.set({ apiKey });
+    return Promise.resolve({ userId: apiKey, username: apiKey.substring(0, 8) });
+}
+
+export function logout(): void {
+    removeApiKey();
+    user.set(null);
+}
+
+export function isAuthenticated(): boolean {
+    return getApiKey() !== null;
+}
+
+export function getApiKey(): string | null {
+    return localStorage.getItem(API_KEY_STORAGE);
+}
+
+export function setApiKey(key: string): void {
+    localStorage.setItem(API_KEY_STORAGE, key);
+}
+
+export function removeApiKey(): void {
+    localStorage.removeItem(API_KEY_STORAGE);
+}

src/lib/components/ResearchListItem.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { type ResearchSummary } from '$lib/types';
+
+    export let item: ResearchSummary;
+    export let isActive = false;
+
+    function truncate(str: string, max: number): string {
+        return str.length > max ? str.slice(0, max) + '…' : str;
+    }
+
+    function formatDate(dateStr: string): string {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+            + ' ' + d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+    }
+</script>
+
+<div
+    class="group flex flex-col gap-1 p-3 rounded-lg cursor-pointer transition-colors border border-transparent"
+    class:ring-2 class:ring-indigo-500 class:bg-indigo-50 class:dark:bg-indigo-950/30 {isActive}
+    class:hover:bg-gray-100 class:dark:hover:bg-gray-800
+    on:click={() => window.location.href = `/research/${item.id}`}
+>
+    <div class="flex items-center justify-between gap-2">
+        <code class="text-xs font-mono text-gray-500 dark:text-gray-400 truncate">
+            {item.id.slice(0, 8)}
+        </code>
+        <span class="text-xs text-gray-400 whitespace-nowrap">{formatDate(item.created_at)}</span>
+    </div>
+    <p class="text-sm text-gray-700 dark:text-gray-300 truncate" title={item.query}>
+        {item.query}
+    </p>
+    <div class="flex items-center justify-between">
+        <span
+            class="inline-block w-2.5 h-2.5 rounded-full"
+            class:bg-emerald-400={item.status === 'COMPLETED'}
+            class:bg-yellow-400={item.status === 'PLANNING' || item.status === 'SEARCHING' || item.status === 'SYNTHESIZING'}
+            class:bg-blue-400={item.status === 'EXTRACTING' || item.status === 'ANALYZING'}
+            class:bg-red-400={item.status === 'FAILED'}
+            class:bg-gray-300={item.status === 'PENDING'}
+        ></span>
+        <span class="text-xs text-gray-500 font-medium">{item.status}</span>
+    </div>
+</div>

src/lib/components/Sidebar.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import { sidebarOpen, selectedResearchId, loadResearchHistory } from '$lib/sidebar';
+    import { user } from '$lib/stores';
+    import { theme, toggleTheme } from '$lib/theme';
+    import { isAuthenticated, logout } from '$lib/auth';
+    import { onMount, onDestroy, tick } from 'svelte';
+    import ResearchListItem from './ResearchListItem.svelte';
+    import type { ResearchSummary } from '$lib/types';
+
+    let researchHistory: ResearchSummary[] = [];
+    let loading = true;
+    let apiKey = '';
+    let isMobile = false;
+
+    $: activeId = $selectedResearchId;
+    $: userObj = $user;
+
+    $: showSidebar = !$sidebarOpen || window.innerWidth >= 768;
+
+    function detectMobile() {
+        isMobile = window.innerWidth < 768;
+    }
+
+    function handleResize() {
+        detectMobile();
+    }
+
+    async function fetchHistory() {
+        if (!isAuthenticated()) return;
+        apiKey = localStorage.getItem('nsct-api-key') || '';
+        if (!apiKey) return;
+        loading = true;
+        try {
+            researchHistory = await loadResearchHistory(apiKey);
+        } catch {
+            // Silently handle
+        } finally {
+            loading = false;
+        }
+    }
+
+    onMount(() => {
+        detectMobile();
+        fetchHistory();
+        window.addEventListener('resize', handleResize);
+    });
+
+    onDestroy(() => {
+        window.removeEventListener('resize', handleResize);
+    });
+
+    function handleLogout() {
+        logout();
+    }
+
+    function toggleSidebar() {
+        sidebarOpen.update(open => !open);
+    }
+</script>
+
+<!-- Desktop sidebar always visible, mobile: controlled by sidebarOpen -->
+<div
+    class="fixed inset-y-0 left-0 z-40 flex"
+>
+    <aside
+        class="h-full flex flex-col bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 transition-transform duration-200 ease-in-out"
+        style="width: 20rem;"
+        class:{-translate-x-full: isMobile && !$sidebarOpen}
+    >
+        <!-- Top bar -->
+        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+            <h1 class="text-lg font-bold text-gray-900 dark:text-white">NSCT Research</h1>
+            <div class="flex items-center gap-2">
+                <button
+                    on:click={toggleTheme}
+                    class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                    title="Theme umschalten"
+                >
+                    {$theme === 'dark' ? '☀' : '☾'}
+                </button>
+                {#if isMobile}
+                    <button
+                        on:click={toggleSidebar}
+                        class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+                        title="Menü schließen"
+                    >
+                        ✕
+                    </button>
+                {/if}
+            </div>
+        </div>
+
+        <!-- User section -->
+        <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                    <div class="w-7 h-7 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">
+                        {$userObj?.apiKey?.[0]?.toUpperCase() ?? 'U'}
+                    </div>
+                    <span class="text-sm text-gray-700 dark:text-gray-300 truncate">
+                        {$userObj?.apiKey ? $userObj.apiKey.substring(0, 8) : 'Gast'}
+                    </span>
+                </div>
+                <button
+                    on:click={handleLogout}
+                    class="text-xs text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400 transition-colors"
+                    title="Abmelden"
+                >
+                    Abmelden
+                </button>
+            </div>
+        </div>
+
+        <!-- New research button -->
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+            <a
+                href="/research/new"
+                class="flex items-center justify-center gap-2 w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors"
+            >
+                <span>＋</span> Neue Recherche
+            </a>
+        </div>
+
+        <!-- History list -->
+        <div class="flex-1 overflow-y-auto px-2 py-2 space-y-1 min-h-0">
+            {#if loading}
+                <div class="px-2 py-4 space-y-3">
+                    {#each [1, 2, 3, 4, 5] as _}
+                        <div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse">
+                            <div class="flex items-center justify-between mb-2">
+                                <div class="h-3 w-16 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                                <div class="h-3 w-12 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                            </div>
+                            <div class="h-3 w-32 bg-gray-300 dark:bg-gray-600 rounded mb-2"></div>
+                            <div class="flex items-center gap-2">
+                                <div class="h-2.5 w-2.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
+                                <div class="h-3 w-10 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            {:else}
+                {#each researchHistory as item (item.id)}
+                    <ResearchListItem {item} isActive={item.id === activeId} />
+                {/each}
+            {/if}
+        </div>
+    </aside>
+</div>
+
+<!-- Mobile overlay when sidebar is open -->
+{#if isMobile && $sidebarOpen}
+    <div
+        class="fixed inset-0 z-30 bg-black/50"
+        on:click={toggleSidebar}
+    ></div>
+{/if}

src/lib/components/StatusBadge.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { type ResearchStatus } from '$lib/types';
+
+    export let status: ResearchStatus | null = null;
+
+    const STATUS_COLORS: Record<string, string> = {
+        PLANNING: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+        SEARCHING: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+        EXTRACTING: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+        ANALYZING: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
+        SYNTHESIZING: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
+        COMPLETED: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
+        FAILED: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+        PENDING: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
+    };
+
+    const DOT_COLORS: Record<string, string> = {
+        PLANNING: 'bg-yellow-400 animate-pulse',
+        SEARCHING: 'bg-blue-400 animate-pulse',
+        EXTRACTING: 'bg-green-400 animate-pulse',
+        ANALYZING: 'bg-purple-400 animate-pulse',
+        SYNTHESIZING: 'bg-indigo-400 animate-pulse',
+        COMPLETED: 'bg-emerald-400',
+        FAILED: 'bg-red-400',
+        PENDING: 'bg-gray-400'
+    };
+
+    $: colorClass = status ? (STATUS_COLORS[status.status] || STATUS_COLORS.PENDING) : STATUS_COLORS.PENDING;
+    $: dotClass = status ? (DOT_COLORS[status.status] || DOT_COLORS.PENDING) : DOT_COLORS.PENDING;
+</script>
+
+<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {colorClass}">
+    <span class="w-2 h-2 rounded-full {dotClass}"></span>
+    <span>{status?.status ?? 'N/A'}</span>
+</span>

src/lib/components/TopBar.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { toggleTheme } from '$lib/theme';
+    import { theme } from '$lib/theme';
+    import { sidebarOpen } from '$lib/sidebar';
+    import { isAuthenticated, logout } from '$lib/auth';
+    import { user } from '$lib/stores';
+
+    export let title = '';
+    export let showToggle = false;
+
+    $: userObj = $user;
+
+    function toggleSidebar() {
+        sidebarOpen.update(open => !open);
+    }
+
+    function handleLogout() {
+        logout();
+        window.location.href = '/';
+    }
+</script>
+
+<header class="sticky top-0 z-30 flex items-center justify-between px-4 py-2 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700">
+    <div class="flex items-center gap-2">
+        <button
+            on:click={toggleSidebar}
+            class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors lg:hidden"
+            title="Menü öffnen"
+        >
+            ☰
+        </button>
+        {#if title}
+            <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-md">{title}</h2>
+        {/if}
+    </div>
+
+    <div class="flex items-center gap-3">
+        {#if showToggle}
+            <button
+                on:click={toggleTheme}
+                class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                title="Theme umschalten"
+            >
+                {$theme === 'dark' ? '☀' : '☾'}
+            </button>
+        {/if}
+        {#if isAuthenticated()}
+            <div class="relative group">
+                <button class="flex items-center gap-1.5 px-2 py-1 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                    <div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs font-bold">
+                        {userObj?.apiKey?.[0]?.toUpperCase() ?? 'U'}
+                    </div>
+                    <span class="text-xs font-medium hidden sm:block">{userObj?.apiKey ? userObj.apiKey.substring(0, 8) : 'Gast'}</span>
+                </button>
+                <div class="absolute right-0 mt-1 w-32 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all">
+                    <button
+                        on:click={handleLogout}
+                        class="w-full px-3 py-2 text-left text-sm text-red-500 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                    >
+                        Abmelden
+                    </button>
+                </div>
+            </div>
+        {/if}
+    </div>
+</header>

src/lib/sidebar.ts

@@ -0,0 +1,43 @@
+import { writable } from 'svelte/store';
+import { apiGet, apiDelete, apiPost } from '$lib/api';
+import type { ResearchSummary } from '$lib/types';
+
+// Sidebar visibility (mobile toggle)
+export const sidebarOpen = writable(false);
+
+// Currently selected research session ID
+export const selectedResearchId = writable<string | null>(null);
+
+export interface ResearchListItem extends ResearchSummary {
+    truncatedQuery?: string;
+    truncatedId?: string;
+}
+
+const HISTORY_LIMIT = 50;
+
+export async function loadResearchHistory(apiKey: string): Promise<ResearchSummary[]> {
+    const list = await apiGet<ResearchSummary[]>('/v1/research', { apiKey });
+    // Sort descending by created_at (newest first), limit to HISTORY_LIMIT
+    const sorted = list
+        .slice()
+        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+        .slice(0, HISTORY_LIMIT);
+    return sorted;
+}
+
+export async function deleteResearch(id: string, apiKey: string): Promise<void> {
+    await apiDelete<void>(`/v1/research/${id}`, { apiKey });
+}
+
+export async function createResearch(
+    apiKey: string,
+    query: string,
+    language: string,
+    depth: string
+): Promise<{ id: string }> {
+    return await apiPost<{ id: string }>(
+        '/v1/research',
+        { query, language, depth },
+        { apiKey }
+    );
+}

src/lib/types.ts

@@ -39,3 +39,18 @@ export interface EvidenceScore {
     evidence_directness: number;
     date_relevance: number;
 }
+
+export interface ResearchDetail {
+    id: string;
+    query: string;
+    status: string;
+    progress?: number;
+    created_at: string;
+    completed_at?: string;
+    error?: string;
+    sources?: SourceInfo[];
+    claims?: ClaimInfo[];
+    evidence?: EvidenceScore[];
+    report?: string;
+    methodology?: string;
+}

src/routes/+page.svelte

@@ -1,49 +1,114 @@
-<script>
+<script lang="ts">
+    import { redirect } from '@sveltejs/kit';
     import { user } from '$lib/stores';
-    import { theme, toggleTheme } from '$lib/theme';
+    import { theme, toggleTheme, applyTheme } from '$lib/theme';
+    import { isAuthenticated } from '$lib/auth';
+    import { onMount } from 'svelte';
+    import { apiGet } from '$lib/api';
 
     let apiKey = '';
     let error = '';
+    let loading = false;
 
-    function login() {
-        if (apiKey.trim()) {
-            user.set({ apiKey: apiKey.trim() });
+    $: userObj = $user;
+
+    onMount(() => {
+        if (isAuthenticated()) {
+            redirect(302, '/research');
+        }
+        applyTheme($theme);
+    });
+
+    async function handleLogin() {
+        if (!apiKey.trim()) {
+            error = 'Bitte gib deinen API-Key ein.';
+            return;
+        }
+
+        loading = true;
         error = '';
-        } else {
-            error = 'Bitte API-Key eingeben.';
+
+        try {
+            // Validate the API key by fetching user info from the backend
+            const info = await apiGet<any>('/v1/health', { apiKey: apiKey.trim() });
+            user.set({ apiKey: apiKey.trim() });
+            localStorage.setItem('nsct-api-key', apiKey.trim());
+            redirect(302, '/research');
+        } catch (e) {
+            // If the API key is invalid, the backend will return 401/403
+            // or an error response — accept it and show the error
+            error = e instanceof Error ? e.message : 'Anmeldung fehlgeschlagen. Bitte prüfe deinen API-Key.';
+        } finally {
+            loading = false;
         }
     }
 </script>
 
-<div class="min-h-screen flex items-center justify-center p-4">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 p-4">
     <div class="w-full max-w-md">
-        <h1 class="text-3xl font-bold mb-2 text-center">NSCT</h1>
-        <p class="text-center text-gray-500 mb-8">Neutral Search Crawler Tool</p>
+        <!-- Logo and title -->
+        <div class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">NSCT</h1>
+            <p class="text-gray-500 dark:text-gray-400">Neutral Search Crawler Tool</p>
+        </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
-            <h2 class="text-xl font-semibold mb-4">Anmelden</h2>
+        <!-- Login form -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 sm:p-8">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Anmelden</h2>
+
+            <form on:submit|preventDefault={handleLogin}>
+                <div class="mb-4">
+                    <label for="api-key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        API-Key
+                    </label>
                     <input
+                        id="api-key"
+                        type="password"
                         bind:value={apiKey}
                         placeholder="API-Key eingeben"
-                class="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 mb-4"
-                on:keydown={(e) => e.key === 'Enter' && login()}
+                        class="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors"
+                        disabled={loading}
+                        autocomplete="off"
+                        spellcheck="false"
                     />
+                </div>
+
                 <button
-                on:click={login}
-                class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700"
+                    type="submit"
+                    disabled={loading}
+                    class="w-full px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-medium rounded-lg transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                 >
+                    {#if loading}
+                        <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24" fill="none">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                        </svg>
+                        Wird angemeldet…
+                    {:else}
                         Anmelden
+                    {/if}
                 </button>
+            </form>
+
             {#if error}
-                <p class="text-red-500 mt-2 text-sm">{error}</p>
+                <p class="text-red-600 dark:text-red-400 mt-3 text-sm font-medium">{error}</p>
             {/if}
         </div>
 
+        <!-- Footer -->
+        <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-6">
+            Noch keinen Account? <span class="font-medium">API-Key vom Admin anfordern</span>
+        </p>
+
+        <!-- Theme toggle -->
+        <div class="flex justify-center mt-4">
             <button
                 on:click={toggleTheme}
-            class="mt-4 text-sm text-gray-500 hover:text-gray-300"
+                class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition-colors"
+                title="Theme umschalten"
             >
-            Theme umschalten ☀/☾
+                {$theme === 'dark' ? '☀ Light Mode' : '☾ Dark Mode'}
             </button>
         </div>
     </div>
+</div>

src/routes/research/+layout.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Sidebar from '$lib/components/Sidebar.svelte';
+    import TopBar from '$lib/components/TopBar.svelte';
+    import { sidebarOpen } from '$lib/sidebar';
+
+    function toggleSidebar() {
+        sidebarOpen.update(open => !open);
+    }
+</script>
+
+<div class="min-h-screen bg-gray-50 dark:bg-gray-950 flex">
+    <!-- Desktop sidebar is always rendered for layout; mobile overlay is handled inside Sidebar -->
+    <Sidebar />
+
+    <!-- Main content area -->
+    <main class="flex-1 flex flex-col min-w-0 lg:ml-80">
+        <TopBar title="Research" showToggle={true} />
+        <slot />
+    </main>
+</div>

src/routes/research/new/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { redirect } from '@sveltejs/kit';
+    import { isAuthenticated } from '$lib/auth';
+    import { createResearch } from '$lib/sidebar';
+
+    let query = '';
+    let language = 'Deutsch';
+    let depth = 'normal';
+    let submitting = false;
+    let error = '';
+
+    function getApiKey(): string | null {
+        return localStorage.getItem('nsct-api-key');
+    }
+
+    async function handleSubmit() {
+        if (!query.trim()) {
+            error = 'Bitte gib eine Suchanfrage ein.';
+            return;
+        }
+
+        const key = getApiKey();
+        if (!key) {
+            error = 'Nicht authentifiziert.';
+            return;
+        }
+
+        submitting = true;
+        error = '';
+
+        try {
+            const result = await createResearch(key, query.trim(), language, depth);
+            window.location.href = `/research/${result.id}`;
+        } catch (e) {
+            error = e instanceof Error ? e.message : 'Fehler beim Erstellen der Recherche.';
+        } finally {
+            submitting = false;
+        }
+    }
+</script>
+
+<div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4 py-8">
+    <div class="w-full max-w-2xl">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Neue Recherche</h1>
+
+        <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+            <!-- Query textarea -->
+            <div>
+                <label for="query" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Suchanfrage
+                </label>
+                <textarea
+                    id="query"
+                    bind:value={query}
+                    placeholder="Gib eine Suchanfrage ein..."
+                    rows="6"
+                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none transition-colors"
+                    disabled={submitting}
+                ></textarea>
+            </div>
+
+            <!-- Language selection -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Sprache
+                </label>
+                <div class="flex gap-3">
+                    {#each ['Deutsch', 'English', 'Multi'] as lang}
+                        <label
+                            class="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors"
+                            class:ring-2 class:ring-indigo-500={language === lang}
+                            class:border-indigo-500={language === lang}
+                            class:border-gray-300 dark:border-gray-600={language !== lang}
+                        >
+                            <input
+                                type="radio"
+                                name="language"
+                                value={lang}
+                                bind:value={language}
+                                class="sr-only"
+                                disabled={submitting}
+                            />
+                            <span class="text-sm text-gray-700 dark:text-gray-300">{lang}</span>
+                        </label>
+                    {/each}
+                </div>
+            </div>
+
+            <!-- Depth selection -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Tiefe
+                </label>
+                <div class="flex gap-3">
+                    {#each ['quick', 'normal', 'deep'] as d}
+                        <label
+                            class="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors"
+                            class:ring-2 class:ring-indigo-500={depth === d}
+                            class:border-indigo-500={depth === d}
+                            class:border-gray-300 dark:border-gray-600={depth !== d}
+                        >
+                            <input
+                                type="radio"
+                                name="depth"
+                                value={d}
+                                bind:value={depth}
+                                class="sr-only"
+                                disabled={submitting}
+                            />
+                            <span class="text-sm text-gray-700 dark:text-gray-300">
+                                {d === 'quick' ? 'Schnell' : d === 'normal' ? 'Normal' : 'Tief'}
+                            </span>
+                        </label>
+                    {/each}
+                </div>
+            </div>
+
+            <!-- Submit button -->
+            <button
+                type="submit"
+                disabled={submitting}
+                class="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-medium rounded-lg transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed"
+            >
+                {#if submitting}
+                    <span class="flex items-center justify-center gap-2">
+                        <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24" fill="none">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                        </svg>
+                        Recherche wird gestartet…
+                    </span>
+                {:else}
+                    Recherche starten
+                {/if}
+            </button>
+        </form>
+
+        <!-- Error message -->
+        {#if error}
+            <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <p class="text-sm text-red-700 dark:text-red-300">{error}</p>
+            </div>
+        {/if}
+    </div>
+</div>

src/routes/research/{id}/+page.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+    import { onDestroy, onMount } from 'svelte';
+    import { selectedResearchId } from '$lib/sidebar';
+    import { apiGet } from '$lib/api';
+    import type { ResearchStatus, ResearchDetail } from '$lib/types';
+
+    export let researchId: string;
+
+    const POLL_INTERVAL_MS = 5000;
+
+    let status: ResearchStatus | null = null;
+    let detail: ResearchDetail | null = null;
+    let error: string | null = null;
+    let lastUpdate = '';
+    let activeTab = 'Status';
+
+    $: activeId = $selectedResearchId;
+
+    const TABS = ['Status', 'Quellen', 'Claims', 'Evidence', 'Bericht', 'Methodik'];
+
+    async function pollStatus() {
+        try {
+            const res = await apiGet<ResearchStatus>(`/v1/research/${researchId}/status`);
+            status = res;
+            lastUpdate = new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            error = null;
+        } catch (e) {
+            error = e instanceof Error ? e.message : 'Status-Abfrage fehlgeschlagen.';
+        }
+    }
+
+    async function pollDetail() {
+        try {
+            const res = await apiGet<ResearchDetail>(`/v1/research/${researchId}`);
+            detail = res;
+        } catch {
+            // Detail fetch is non-critical
+        }
+    }
+
+    let pollTimer: ReturnType<typeof setInterval> | null = null;
+
+    function startPolling() {
+        if (pollTimer) clearInterval(pollTimer);
+        pollStatus();
+        pollDetail();
+        pollTimer = setInterval(async () => {
+            await pollStatus();
+            if (status && (status.status === 'COMPLETED' || status.status === 'FAILED')) {
+                await pollDetail();
+            }
+        }, POLL_INTERVAL_MS);
+    }
+
+    function stopPolling() {
+        if (pollTimer) {
+            clearInterval(pollTimer);
+            pollTimer = null;
+        }
+    }
+
+    onMount(() => {
+        startPolling();
+    });
+
+    onDestroy(() => {
+        stopPolling();
+    });
+
+    function statusColorClass(s: string): string {
+        switch (s) {
+            case 'PLANNING': case 'SEARCHING': case 'SYNTHESIZING':
+                return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+            case 'EXTRACTING': case 'ANALYZING':
+                return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+            case 'COMPLETED':
+                return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200';
+            case 'FAILED':
+                return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+            default:
+                return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
+        }
+    }
+
+    function statusDotClass(s: string): string {
+        switch (s) {
+            case 'PLANNING': case 'SEARCHING': case 'SYNTHESIZING':
+                return 'bg-yellow-400 animate-pulse';
+            case 'EXTRACTING': case 'ANALYZING':
+                return 'bg-blue-400 animate-pulse';
+            case 'COMPLETED':
+                return 'bg-emerald-400';
+            case 'FAILED':
+                return 'bg-red-400';
+            default:
+                return 'bg-gray-300';
+        }
+    }
+</script>
+
+<div class="flex-1 overflow-y-auto flex flex-col">
+    <!-- Header -->
+    <div class="sticky top-0 z-20 bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700 px-4 py-3">
+        <div class="flex items-center justify-between gap-4">
+            <h2 class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-md">
+                {detail?.query ?? detail?.id ?? researchId}
+            </h2>
+            <div class="flex items-center gap-3 flex-shrink-0">
+                {#if status}
+                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {statusColorClass(status.status)}">
+                        <span class="w-2 h-2 rounded-full {statusDotClass(status.status)}"></span>
+                        {status.status}
+                    </span>
+                    {#if status.progress !== undefined}
+                        <span class="text-xs text-gray-500">{status.progress}%</span>
+                    {/if}
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    <!-- Error banner -->
+    {#if error}
+        <div class="px-4 py-2 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
+            <p class="text-sm text-red-700 dark:text-red-300">⚠ {error}</p>
+        </div>
+    {/if}
+
+    <!-- Tabs navigation -->
+    <div class="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <nav class="flex gap-0 px-4 -mb-px overflow-x-auto">
+            {#each TABS as tab}
+                <button
+                    on:click={() => activeTab = tab}
+                    class="px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap"
+                    class:border-indigo-500 class:text-indigo-600 class:dark:text-indigo-400={activeTab === tab}
+                    class:border-transparent class:text-gray-500 class:hover:text-gray-700 class:dark:text-gray-400 class:dark:hover:text-gray-300={activeTab !== tab}
+                >
+                    {tab}
+                </button>
+            {/each}
+        </nav>
+    </div>
+
+    <!-- Tab content -->
+    <div class="px-4 py-6 flex-1 min-h-0">
+        <!-- Status Tab -->
+        {#if activeTab === 'Status'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Aktueller Status</h3>
+                {#if status}
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-gray-700 dark:text-gray-300">Status</span>
+                            <span class="px-2 py-0.5 rounded text-xs font-medium {statusColorClass(status.status)}">
+                                {status.status}
+                            </span>
+                        </div>
+                        {#if status.progress !== undefined}
+                            <div>
+                                <div class="flex items-center justify-between mb-1">
+                                    <span class="text-sm text-gray-500">Fortschritt</span>
+                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{status.progress}%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                                    <div class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: {status.progress}%"></div>
+                                </div>
+                            </div>
+                        {/if}
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-500">Letzte Aktualisierung</span>
+                            <span class="text-sm text-gray-700 dark:text-gray-300">{lastUpdate}</span>
+                        </div>
+                        {#if status.error}
+                            <div class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
+                                <p class="text-sm text-red-700 dark:text-red-300">Fehler: {status.error}</p>
+                            </div>
+                        {/if}
+                    </div>
+                {:else}
+                    <p class="text-sm text-gray-500">Status wird geladen…</p>
+                {/if}
+            </div>
+
+        <!-- Quellen Tab -->
+        {:else if activeTab === 'Quellen'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Gefundene Quellen</h3>
+                {#if detail?.sources && detail.sources.length > 0}
+                    <div class="space-y-2">
+                        {#each detail.sources as source}
+                            <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <p class="text-sm font-medium text-gray-900 dark:text-white">{source.title}</p>
+                                <p class="text-xs text-gray-500 mt-1 truncate">{source.url}</p>
+                                {#if source.domain}
+                                    <span class="inline-block mt-1 text-xs px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded">{source.domain}</span>
+                                {/if}
+                            </div>
+                        {/each}
+                    </div>
+                {:else}
+                    <p class="text-sm text-gray-500">Noch keine Quellen gefunden.</p>
+                {/if}
+            </div>
+
+        <!-- Claims Tab -->
+        {:else if activeTab === 'Claims'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Extrahierte Claims</h3>
+                {#if detail?.claims && detail.claims.length > 0}
+                    <div class="space-y-2">
+                        {#each detail.claims as claim}
+                            <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                                <p class="text-sm text-gray-900 dark:text-white">{claim.claim}</p>
+                                <div class="flex items-center gap-3 mt-2">
+                                    <span class="text-xs text-gray-500">Typ: {claim.claim_type}</span>
+                                    <span class="text-xs text-gray-500">Confidence: {(claim.confidence * 100).toFixed(0)}%</span>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                {:else}
+                    <p class="text-sm text-gray-500">Noch keine Claims extrahiert.</p>
+                {/if}
+            </div>
+
+        <!-- Evidence Tab -->
+        {:else if activeTab === 'Evidence'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Evidence-Scores</h3>
+                {#if detail?.evidence && detail.evidence.length > 0}
+                    <div class="space-y-3">
+                        {#each detail.evidence as score, i}
+                            <div class="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg space-y-2">
+                                <p class="text-sm font-medium text-gray-900 dark:text-white">Score {i + 1}</p>
+                                <div class="grid grid-cols-2 gap-2 text-xs">
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Quellen-Unabhängigkeit</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.source_independence * 100).toFixed(0)}%</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Primärquellen-Nähe</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.primary_source_proximity * 100).toFixed(0)}%</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Quellen-Übereinstimmung</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.cross_source_support * 100).toFixed(0)}%</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Widerspruch</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.contradiction_level * 100).toFixed(0)}%</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Evidenz-Direktheit</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.evidence_directness * 100).toFixed(0)}%</span>
+                                    </div>
+                                    <div class="flex justify-between">
+                                        <span class="text-gray-500">Datumsrelevanz</span>
+                                        <span class="font-medium text-gray-700 dark:text-gray-300">{(score.date_relevance * 100).toFixed(0)}%</span>
+                                    </div>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                {:else}
+                    <p class="text-sm text-gray-500">Noch keine Evidence-Scores berechnet.</p>
+                {/if}
+            </div>
+
+        <!-- Bericht Tab -->
+        {:else if activeTab === 'Bericht'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Forschungsbericht</h3>
+                {#if detail?.report}
+                    <pre class="whitespace-pre-wrap bg-gray-50 dark:bg-gray-800 p-4 rounded-lg text-sm text-gray-700 dark:text-gray-300">{detail.report}</pre>
+                {:else}
+                    <p class="text-sm text-gray-500">Bericht wird generiert, sobald die Recherche abgeschlossen ist.</p>
+                {/if}
+            </div>
+
+        <!-- Methodik Tab -->
+        {:else if activeTab === 'Methodik'}
+            <div>
+                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Methodik-Dokumentation</h3>
+                {#if detail?.methodology}
+                    <pre class="whitespace-pre-wrap bg-gray-50 dark:bg-gray-800 p-4 rounded-lg text-sm text-gray-700 dark:text-gray-300">{detail.methodology}</pre>
+                {:else}
+                    <p class="text-sm text-gray-500">Methodik wird nach Abschluss der Recherche verfügbar sein.</p>
+                {/if}
+            </div>
+        {/if}
+    </div>
+</div>