Research Chat: Web-Chatoberfläche für den Research-Agent (DeepSeek v4 Flash + Playwright, Docker/Podman)

public/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Research Agent</title>
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" href="/icons/icon-192.png">
+  <meta name="theme-color" content="#0f172a">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = { darkMode: 'class' };
+    document.documentElement.classList.add('dark');
+  </script>
+</head>
+<body class="dark:bg-slate-950 bg-slate-100 dark:text-slate-100 text-slate-900 h-screen flex overflow-hidden">
+
+  <!-- Sidebar -->
+  <aside id="sidebar" class="w-64 shrink-0 dark:bg-slate-900 bg-white border-r dark:border-slate-800 border-slate-200 flex flex-col hidden md:flex">
+    <div class="p-4 border-b dark:border-slate-800 border-slate-200 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <span class="text-xl">🔎</span>
+        <span class="font-bold">Research Agent</span>
+      </div>
+      <button id="logoutBtn" class="text-sm text-slate-400 hover:text-red-400" title="Abmelden">⎋</button>
+    </div>
+    <button id="newSessionBtn"
+            class="m-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm">
+      + Neue Recherche
+    </button>
+    <div id="sessionList" class="flex-1 overflow-y-auto px-2 space-y-1"></div>
+    <div class="p-3 text-xs text-slate-400 border-t dark:border-slate-800 border-slate-200">
+      <div id="userName" class="font-medium text-slate-500 dark:text-slate-400 mb-1"></div>
+      <div id="queueStatus" class="hidden"><span class="inline-block w-2 h-2 bg-amber-400 rounded-full mr-1 animate-pulse"></span>Recherche läuft…</div>
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <main class="flex-1 flex flex-col min-w-0">
+    <!-- Mobile header -->
+    <div class="md:hidden flex items-center gap-2 p-3 border-b dark:border-slate-800 border-slate-200 bg-white dark:bg-slate-900">
+      <button id="menuBtn" class="px-2 py-1 rounded bg-slate-200 dark:bg-slate-800">☰</button>
+      <span class="font-bold truncate flex-1" id="mobileTitle">Research Agent</span>
+    </div>
+
+    <!-- Activity bar -->
+    <div id="activityBar" class="hidden px-4 py-2 text-sm border-b dark:border-slate-800 border-slate-200 bg-slate-50 dark:bg-slate-900">
+      <div id="activityLine" class="flex items-center gap-2">
+        <span class="inline-block w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></span>
+        <span id="activityText">Starte…</span>
+      </div>
+      <div id="activityLog" class="hidden mt-1 max-h-32 overflow-y-auto text-xs text-slate-400 space-y-0.5"></div>
+      <button id="toggleLog" class="text-xs text-blue-400 mt-1">Details zeigen</button>
+    </div>
+
+    <!-- Chat -->
+    <div id="chat" class="flex-1 overflow-y-auto p-4 space-y-4">
+      <div id="emptyState" class="h-full flex flex-col items-center justify-center text-center text-slate-400">
+        <div class="text-5xl mb-4">🔎</div>
+        <h2 class="text-lg font-semibold text-slate-500 dark:text-slate-300">Worüber soll ich recherchieren?</h2>
+        <p class="text-sm max-w-md mt-2">
+          Ich suche gründlich im Internet, verifiziere alle Quellen und baue dir ein
+          Dashboard mit Analyse, Empfehlungen und Handlungsplan.
+        </p>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <div class="p-4 border-t dark:border-slate-800 border-slate-200 bg-white dark:bg-slate-900">
+      <form id="chatForm" class="flex gap-2 items-end">
+        <textarea id="input" rows="1" placeholder="Thema eingeben… z.B. „Beste Self-Hosted Social-Media-Alternativen 2026“"
+                  class="flex-1 resize-none px-3 py-2.5 rounded-xl border dark:bg-slate-800 dark:border-slate-700 border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 max-h-40"></textarea>
+        <button id="sendBtn" type="submit"
+                class="px-4 py-2.5 rounded-xl bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-semibold">
+          Senden
+        </button>
+      </form>
+      <p class="text-xs text-slate-400 mt-2" id="shareHint"></p>
+    </div>
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>