First draft

frontend/src/features/capture/InstantCaptureBar.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Mic, MicOff, Send, Sparkles, Calendar, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { PriorityLevel, Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface InstantCaptureBarProps {
+  onCaptured: (thought: Thought) => void;
+  autoFocusTrigger?: number;
+}
+
+export const InstantCaptureBar: React.FC<InstantCaptureBarProps> = ({
+  onCaptured,
+  autoFocusTrigger = 0,
+}) => {
+  const [content, setContent] = useState('');
+  const [priority, setPriority] = useState<PriorityLevel>('normal');
+  const [dueDate, setDueDate] = useState('');
+  const [showOptions, setShowOptions] = useState(false);
+  const [isListening, setIsListening] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [justSaved, setJustSaved] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const recognitionRef = useRef<any>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [autoFocusTrigger]);
+
+  // Global keyboard shortcut: 'c' or '/' focuses the Instant Capture input immediately
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      const isEditing =
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable;
+
+      if (!isEditing && (e.key === 'c' || e.key === 'C' || e.key === '/')) {
+        e.preventDefault();
+        inputRef.current?.focus();
+      } else if (e.key === 'Escape' && document.activeElement === inputRef.current) {
+        setContent('');
+        setShowOptions(false);
+        inputRef.current?.blur();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const toggleVoiceDictation = () => {
+    const SpeechRecognition =
+      (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+
+    if (!SpeechRecognition) {
+      alert('Spracheingabe wird von diesem Browser nicht direkt unterstützt (bitte Chrome, Edge oder Safari nutzen).');
+      return;
+    }
+
+    if (isListening && recognitionRef.current) {
+      recognitionRef.current.stop();
+      setIsListening(false);
+      return;
+    }
+
+    try {
+      const recognition = new SpeechRecognition();
+      recognition.lang = 'de-DE';
+      recognition.continuous = false;
+      recognition.interimResults = true;
+
+      recognition.onstart = () => {
+        setIsListening(true);
+        triggerHaptic(20);
+      };
+
+      recognition.onresult = (event: any) => {
+        let transcript = '';
+        for (let i = 0; i < event.results.length; i++) {
+          transcript += event.results[i][0].transcript;
+        }
+        setContent((prev) => {
+          const base = prev.replace(/\s*\[…\]$/, '').trim();
+          return base ? `${base} ${transcript}` : transcript;
+        });
+      };
+
+      recognition.onerror = () => {
+        setIsListening(false);
+      };
+
+      recognition.onend = () => {
+        setIsListening(false);
+        inputRef.current?.focus();
+      };
+
+      recognitionRef.current = recognition;
+      recognition.start();
+    } catch {
+      setIsListening(false);
+    }
+  };
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    const trimmed = content.trim();
+    if (!trimmed || isSubmitting) return;
+
+    setIsSubmitting(true);
+    triggerHaptic(15);
+
+    try {
+      const created = await api.captureThought(
+        trimmed,
+        priority,
+        isListening ? 'voice' : 'manual',
+        dueDate
+      );
+      setContent('');
+      setPriority('normal');
+      setDueDate('');
+      setShowOptions(false);
+      setJustSaved(true);
+      setTimeout(() => setJustSaved(false), 1800);
+      onCaptured(created);
+      inputRef.current?.focus();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="w-full max-w-3xl mx-auto">
+      <form onSubmit={handleSubmit} className="relative">
+        <div
+          className={`flex items-center h-14 px-4 sm:px-5 rounded-full bg-[#1e1f20] gemini-border gemini-input-glow transition-all duration-200 ${
+            isListening ? 'border-[#c58af9] shadow-purple-glow' : ''
+          }`}
+        >
+          <Sparkles
+            className={`w-5 h-5 mr-3 flex-shrink-0 transition-colors ${
+              isListening
+                ? 'text-[#c58af9] animate-pulse'
+                : justSaved
+                ? 'text-[#81c995]'
+                : 'text-[#8ab4f8]'
+            }`}
+          />
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={
+              isListening
+                ? 'Ich höre zu… sprich deinen Gedanken aus'
+                : 'Gedanke, Idee oder Zutat sofort festhalten… (Taste C oder /)'
+            }
+            className="w-full bg-transparent text-[#e3e3e3] placeholder-[#9aa0a6] text-sm sm:text-base focus:outline-none"
+            autoComplete="off"
+          />
+
+          <div className="flex items-center gap-1.5 ml-2 flex-shrink-0">
+            {/* Options Toggle Pill (Due Date / Priority) */}
+            <button
+              type="button"
+              onClick={() => setShowOptions((prev) => !prev)}
+              title="Priorität & Fälligkeitsdatum"
+              className={`h-9 px-3 rounded-full text-xs font-medium flex items-center gap-1.5 transition-colors ${
+                showOptions || priority !== 'normal' || dueDate
+                  ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
+                  : 'text-[#9aa0a6] hover:bg-[#282a2c] hover:text-[#e3e3e3]'
+              }`}
+            >
+              <Calendar className="w-3.5 h-3.5" />
+              <span className="hidden sm:inline">
+                {dueDate ? dueDate : priority !== 'normal' ? priority.toUpperCase() : 'Optionen'}
+              </span>
+            </button>
+
+            {/* Voice Dictation Pill Button */}
+            <button
+              type="button"
+              onClick={toggleVoiceDictation}
+              title="Spracheingabe (Diktieren)"
+              className={`w-9 h-9 rounded-full flex items-center justify-center transition-all ${
+                isListening
+                  ? 'bg-[#c58af9] text-[#0b0f19] animate-pulse'
+                  : 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#323538]'
+              }`}
+            >
+              {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+            </button>
+
+            {/* Instant Send Pill Button */}
+            <button
+              type="submit"
+              disabled={!content.trim() || isSubmitting}
+              className={`h-9 px-4 rounded-full font-medium text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+                content.trim()
+                  ? 'bg-[#8ab4f8] text-[#0b0f19] hover:bg-[#a1c2fa] shadow-sm cursor-pointer'
+                  : 'bg-[#282a2c] text-[#5f6368] cursor-not-allowed'
+              }`}
+            >
+              {justSaved ? (
+                <>
+                  <CheckCircle2 className="w-4 h-4 text-[#0b0f19]" />
+                  <span className="hidden sm:inline">Gespeichert</span>
+                </>
+              ) : (
+                <>
+                  <Send className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Einfrieren</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Expandable Quick Metadata Pills */}
+        {showOptions && (
+          <div className="mt-2.5 px-4 py-2.5 rounded-full bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-2 text-xs animate-fadeIn">
+            <div className="flex items-center gap-1.5">
+              <AlertTriangle className="w-3.5 h-3.5 text-[#9aa0a6] mr-1" />
+              <span className="text-[#9aa0a6] mr-1">Priorität:</span>
+              {(['low', 'normal', 'high', 'urgent'] as PriorityLevel[]).map((p) => {
+                const labels: Record<PriorityLevel, string> = {
+                  low: 'Niedrig',
+                  normal: 'Normal',
+                  high: 'Hoch',
+                  urgent: 'Dringend',
+                };
+                const active = priority === p;
+                return (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setPriority(p)}
+                    className={`px-3 py-1 rounded-full transition-colors ${
+                      active
+                        ? p === 'urgent'
+                          ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
+                          : 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+                        : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                    }`}
+                  >
+                    {labels[p]}
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-[#9aa0a6]">Fällig am:</span>
+              <input
+                type="date"
+                value={dueDate}
+                onChange={(e) => setDueDate(e.target.value)}
+                className="bg-[#1e1f20] text-[#e3e3e3] px-3 py-1 rounded-full gemini-border text-xs focus:outline-none focus:border-[#8ab4f8]"
+              />
+            </div>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+};

frontend/src/features/lists/SharedListsView.tsx

@@ -0,0 +1,587 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Plus,
+  CheckCircle2,
+  Circle,
+  Trash2,
+  Users,
+  Copy,
+  Check,
+  Radio,
+  Sparkles,
+  UserPlus,
+} from 'lucide-react';
+import { ListItem, SharedList, Space, WSMessage } from '../../lib/types';
+import { api, buildWebSocketURL, triggerHaptic } from '../../lib/api';
+
+interface SharedListsViewProps {
+  onRefreshGlobal: () => void;
+}
+
+const CATEGORIES = ['Obst & Gemüse', 'Kühlregal', 'Vorrat & Konserven', 'Backwaren', 'Getränke', 'Drogerie', 'Sonstiges'];
+
+export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGlobal }) => {
+  const [spaces, setSpaces] = useState<Space[]>([]);
+  const [activeSpace, setActiveSpace] = useState<Space | null>(null);
+  const [lists, setLists] = useState<SharedList[]>([]);
+  const [activeListId, setActiveListId] = useState<string>('');
+
+  const [newItemText, setNewItemText] = useState('');
+  const [newItemQty, setNewItemQty] = useState('');
+  const [newItemCategory, setNewItemCategory] = useState('');
+
+  const [wsConnected, setWsConnected] = useState(false);
+  const [onlineUsers, setOnlineUsers] = useState(1);
+  const [copiedInvite, setCopiedInvite] = useState(false);
+
+  const [showNewListModal, setShowNewListModal] = useState(false);
+  const [newListTitle, setNewListTitle] = useState('');
+  const [newListIcon, setNewListIcon] = useState('🛒');
+
+  const [showJoinModal, setShowJoinModal] = useState(false);
+  const [joinCode, setJoinCode] = useState('');
+  const [showNewSpaceModal, setShowNewSpaceModal] = useState(false);
+  const [newSpaceName, setNewSpaceName] = useState('');
+
+  const wsRef = useRef<WebSocket | null>(null);
+
+  const loadSpaces = async () => {
+    const sp = await api.getSpaces();
+    setSpaces(sp);
+    if (sp.length > 0 && !activeSpace) {
+      setActiveSpace(sp[0]);
+    }
+  };
+
+  const loadListsForSpace = async (spaceId: string) => {
+    const lst = await api.getSpaceLists(spaceId);
+    setLists(lst);
+    if (lst.length > 0 && (!activeListId || !lst.some((l) => l.id === activeListId))) {
+      setActiveListId(lst[0].id);
+    }
+  };
+
+  useEffect(() => {
+    loadSpaces();
+  }, []);
+
+  useEffect(() => {
+    if (!activeSpace) return;
+    loadListsForSpace(activeSpace.id);
+
+    // Connect Realtime WebSocket for this Space
+    if (wsRef.current) {
+      wsRef.current.close();
+    }
+
+    let ws: WebSocket | null = null;
+    try {
+      ws = new WebSocket(buildWebSocketURL(activeSpace.id));
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        setWsConnected(true);
+      };
+
+      ws.onclose = () => {
+        setWsConnected(false);
+      };
+
+      ws.onmessage = (evt) => {
+        try {
+          const msg: WSMessage = JSON.parse(evt.data);
+          if (msg.event === 'USER_PRESENCE' && msg.payload?.onlineCount) {
+            setOnlineUsers(msg.payload.onlineCount);
+          } else if (msg.event === 'ITEM_CREATED' && msg.list_id) {
+            const newItem: ListItem = msg.payload;
+            setLists((prev) =>
+              prev.map((l) => {
+                if (l.id !== msg.list_id) return l;
+                if (l.items.some((i) => i.id === newItem.id)) return l;
+                return { ...l, items: [newItem, ...l.items] };
+              })
+            );
+          } else if (msg.event === 'ITEM_TOGGLED' && msg.list_id) {
+            const updatedItem: ListItem = msg.payload;
+            setLists((prev) =>
+              prev.map((l) => {
+                if (l.id !== msg.list_id) return l;
+                return {
+                  ...l,
+                  items: l.items.map((i) => (i.id === updatedItem.id ? updatedItem : i)),
+                };
+              })
+            );
+          } else if (msg.event === 'ITEM_DELETED' && msg.list_id) {
+            const deletedId = msg.payload?.itemId;
+            setLists((prev) =>
+              prev.map((l) => {
+                if (l.id !== msg.list_id) return l;
+                return { ...l, items: l.items.filter((i) => i.id !== deletedId) };
+              })
+            );
+          } else if (msg.event === 'LIST_CLEARED' && msg.list_id) {
+            const updatedList: SharedList = msg.payload;
+            setLists((prev) => prev.map((l) => (l.id === msg.list_id ? updatedList : l)));
+          } else if (msg.event === 'LIST_CREATED' || msg.event === 'LIST_DELETED') {
+            loadListsForSpace(activeSpace.id);
+          }
+        } catch {
+          // ignore malformed frames
+        }
+      };
+    } catch {
+      setWsConnected(false);
+    }
+
+    return () => {
+      if (ws) ws.close();
+    };
+  }, [activeSpace?.id]);
+
+  const activeList = lists.find((l) => l.id === activeListId) || lists[0] || null;
+
+  const handleAddItem = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!activeList || !newItemText.trim()) return;
+    triggerHaptic(15);
+
+    const text = newItemText.trim();
+    const qty = newItemQty.trim();
+    const cat = newItemCategory;
+
+    setNewItemText('');
+    setNewItemQty('');
+
+    const created = await api.createListItem(activeList.id, text, cat, qty);
+    setLists((prev) =>
+      prev.map((l) => {
+        if (l.id !== activeList.id) return l;
+        if (l.items.some((i) => i.id === created.id)) return l;
+        return { ...l, items: [created, ...l.items] };
+      })
+    );
+  };
+
+  const handleToggleItem = async (item: ListItem) => {
+    if (!activeList) return;
+    triggerHaptic(18);
+    const nextCompleted = !item.isCompleted;
+
+    // Optimistic UI update (BRAIN.md Section 3)
+    setLists((prev) =>
+      prev.map((l) => {
+        if (l.id !== activeList.id) return l;
+        return {
+          ...l,
+          items: l.items.map((i) =>
+            i.id === item.id ? { ...i, isCompleted: nextCompleted } : i
+          ),
+        };
+      })
+    );
+
+    try {
+      const updated = await api.toggleListItem(activeList.id, item.id, nextCompleted);
+      setLists((prev) =>
+        prev.map((l) => {
+          if (l.id !== activeList.id) return l;
+          return {
+            ...l,
+            items: l.items.map((i) => (i.id === item.id ? updated : i)),
+          };
+        })
+      );
+    } catch {
+      // Rollback on error
+      loadListsForSpace(activeSpace!.id);
+    }
+  };
+
+  const handleDeleteItem = async (itemId: string) => {
+    if (!activeList) return;
+    triggerHaptic(15);
+    setLists((prev) =>
+      prev.map((l) =>
+        l.id === activeList.id ? { ...l, items: l.items.filter((i) => i.id !== itemId) } : l
+      )
+    );
+    await api.deleteListItem(activeList.id, itemId);
+  };
+
+  const handleClearCompleted = async () => {
+    if (!activeList) return;
+    triggerHaptic(20);
+    await api.clearCompletedItems(activeList.id);
+    await loadListsForSpace(activeSpace!.id);
+  };
+
+  const handleCreateList = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!activeSpace || !newListTitle.trim()) return;
+    const created = await api.createList(activeSpace.id, newListTitle.trim(), newListIcon, 'shopping');
+    setNewListTitle('');
+    setShowNewListModal(false);
+    await loadListsForSpace(activeSpace.id);
+    setActiveListId(created.id);
+    onRefreshGlobal();
+  };
+
+  const handleCreateSpace = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newSpaceName.trim()) return;
+    const created = await api.createSpace(newSpaceName.trim(), '🏡', 'Geteilter Familien- & Team-Bereich');
+    setNewSpaceName('');
+    setShowNewSpaceModal(false);
+    const sp = await api.getSpaces();
+    setSpaces(sp);
+    setActiveSpace(created);
+  };
+
+  const handleJoinSpace = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!joinCode.trim()) return;
+    try {
+      const joined = await api.joinSpace(joinCode.trim());
+      setJoinCode('');
+      setShowJoinModal(false);
+      const sp = await api.getSpaces();
+      setSpaces(sp);
+      setActiveSpace(joined);
+    } catch (err: any) {
+      alert(err.message || 'Einladungscode ungültig');
+    }
+  };
+
+  const copyInviteCode = () => {
+    if (!activeSpace) return;
+    navigator.clipboard.writeText(activeSpace.inviteCode);
+    setCopiedInvite(true);
+    setTimeout(() => setCopiedInvite(false), 2000);
+  };
+
+  const openItems = activeList?.items.filter((i) => !i.isCompleted) || [];
+  const completedItems = activeList?.items.filter((i) => i.isCompleted) || [];
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      {/* Top Space Bar & Realtime Indicator */}
+      <div className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] gemini-border flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center gap-2">
+          {spaces.map((sp) => (
+            <button
+              key={sp.id}
+              onClick={() => setActiveSpace(sp)}
+              className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium flex items-center gap-2 transition-all ${
+                activeSpace?.id === sp.id
+                  ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold shadow-sm'
+                  : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+              }`}
+            >
+              <span>{sp.icon}</span>
+              <span>{sp.name}</span>
+            </button>
+          ))}
+
+          <button
+            onClick={() => setShowNewSpaceModal((prev) => !prev)}
+            className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#8ab4f8] flex items-center gap-1"
+          >
+            <Plus className="w-3.5 h-3.5" /> Space
+          </button>
+
+          <button
+            onClick={() => setShowJoinModal((prev) => !prev)}
+            className="h-10 px-3.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#c58af9] flex items-center gap-1"
+          >
+            <UserPlus className="w-3.5 h-3.5" /> Code einlösen
+          </button>
+        </div>
+
+        {/* Realtime Status & Invite Code Pill */}
+        {activeSpace && (
+          <div className="flex items-center gap-2">
+            <div
+              className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 ${
+                wsConnected
+                  ? 'bg-[#81c995]/15 text-[#81c995] border border-[#81c995]/30'
+                  : 'bg-[#282a2c] text-[#9aa0a6]'
+              }`}
+            >
+              <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
+              <span>{wsConnected ? `Echtzeit-Sync (${onlineUsers} aktiv)` : 'Offline-Puffer'}</span>
+            </div>
+
+            <button
+              onClick={copyInviteCode}
+              title="Einladungscode für Partner oder Familie kopieren"
+              className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+            >
+              <Users className="w-3.5 h-3.5 text-[#8ab4f8]" />
+              <span>Code: {activeSpace.inviteCode}</span>
+              {copiedInvite ? (
+                <Check className="w-3.5 h-3.5 text-[#81c995]" />
+              ) : (
+                <Copy className="w-3 h-3 text-[#9aa0a6]" />
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Create or Join Space Modals */}
+      {showNewSpaceModal && (
+        <form
+          onSubmit={handleCreateSpace}
+          className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3"
+        >
+          <input
+            type="text"
+            value={newSpaceName}
+            onChange={(e) => setNewSpaceName(e.target.value)}
+            placeholder="Name des neuen Familien-/Team-Spaces (z. B. Sommerurlaub 2027)…"
+            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+            autoFocus
+          />
+          <button
+            type="submit"
+            className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+          >
+            Space anlegen
+          </button>
+        </form>
+      )}
+
+      {showJoinModal && (
+        <form
+          onSubmit={handleJoinSpace}
+          className="p-4 rounded-3xl bg-[#131314] gemini-border flex items-center gap-3"
+        >
+          <input
+            type="text"
+            value={joinCode}
+            onChange={(e) => setJoinCode(e.target.value)}
+            placeholder="Invite-Code des Partners eingeben…"
+            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none uppercase"
+            autoFocus
+          />
+          <button
+            type="submit"
+            className="h-10 px-5 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+          >
+            Beitreten
+          </button>
+        </form>
+      )}
+
+      {/* List Tabs within Active Space */}
+      <div className="flex flex-wrap items-center gap-2">
+        {lists.map((lst) => {
+          const openCount = lst.items.filter((i) => !i.isCompleted).length;
+          const isSelected = activeList?.id === lst.id;
+          return (
+            <button
+              key={lst.id}
+              onClick={() => setActiveListId(lst.id)}
+              className={`h-11 px-5 rounded-full text-sm font-medium flex items-center gap-2 transition-all ${
+                isSelected
+                  ? 'bg-[#1e1f20] text-[#8ab4f8] border border-[#8ab4f8]/50 shadow-gemini-glow'
+                  : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+              }`}
+            >
+              <span>{lst.icon}</span>
+              <span>{lst.title}</span>
+              <span className="px-2 py-0.5 rounded-full bg-[#0b0f19] text-xs text-[#8ab4f8]">
+                {openCount}
+              </span>
+            </button>
+          );
+        })}
+
+        <button
+          onClick={() => setShowNewListModal((prev) => !prev)}
+          className="h-11 px-4 rounded-full bg-[#131314] hover:bg-[#1e1f20] gemini-border text-xs sm:text-sm text-[#e3e3e3] flex items-center gap-1.5"
+        >
+          <Plus className="w-4 h-4 text-[#8ab4f8]" />
+          <span>Neue Liste</span>
+        </button>
+      </div>
+
+      {showNewListModal && (
+        <form
+          onSubmit={handleCreateList}
+          className="p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center gap-3"
+        >
+          <div className="flex items-center gap-1.5">
+            {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
+              <button
+                key={ic}
+                type="button"
+                onClick={() => setNewListIcon(ic)}
+                className={`w-9 h-9 rounded-full flex items-center justify-center ${
+                  newListIcon === ic ? 'bg-[#8ab4f8]/25 border border-[#8ab4f8]' : 'bg-[#1e1f20]'
+                }`}
+              >
+                {ic}
+              </button>
+            ))}
+          </div>
+          <input
+            type="text"
+            value={newListTitle}
+            onChange={(e) => setNewListTitle(e.target.value)}
+            placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
+            className="flex-1 h-10 px-4 rounded-full bg-[#1e1f20] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+            autoFocus
+          />
+          <button
+            type="submit"
+            className="h-10 px-5 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm"
+          >
+            Liste erstellen
+          </button>
+        </form>
+      )}
+
+      {/* Active Shared List Card */}
+      {activeList ? (
+        <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+          {/* Quick-Add Pill Form */}
+          <form onSubmit={handleAddItem} className="space-y-3 mb-6">
+            <div className="flex flex-col sm:flex-row gap-2.5">
+              <input
+                type="text"
+                value={newItemText}
+                onChange={(e) => setNewItemText(e.target.value)}
+                placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch)…`}
+                className="flex-1 h-12 px-5 rounded-full bg-[#131314] text-sm sm:text-base text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+              />
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={newItemQty}
+                  onChange={(e) => setNewItemQty(e.target.value)}
+                  placeholder="Menge (z.B. 2x)"
+                  className="w-32 h-12 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                />
+                <button
+                  type="submit"
+                  disabled={!newItemText.trim()}
+                  className="h-12 px-6 rounded-full bg-[#8ab4f8] disabled:bg-[#282a2c] text-[#0b0f19] disabled:text-[#5f6368] font-semibold text-sm flex items-center gap-1.5 transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  <span>Hinzufügen</span>
+                </button>
+              </div>
+            </div>
+
+            {/* Category Quick-Select Pills */}
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-xs text-[#9aa0a6] mr-1">Kategorie:</span>
+              {CATEGORIES.map((cat) => (
+                <button
+                  key={cat}
+                  type="button"
+                  onClick={() => setNewItemCategory((prev) => (prev === cat ? '' : cat))}
+                  className={`px-3 py-1 rounded-full text-xs transition-colors ${
+                    newItemCategory === cat
+                      ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
+                      : 'bg-[#131314] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                  }`}
+                >
+                  {cat}
+                </button>
+              ))}
+            </div>
+          </form>
+
+          {/* Open Items */}
+          <div className="space-y-2">
+            {openItems.length === 0 ? (
+              <div className="py-8 text-center text-[#9aa0a6] text-sm flex flex-col items-center gap-2">
+                <Sparkles className="w-6 h-6 text-[#81c995]" />
+                <span>Alles erledigt! Keine offenen Punkte auf dieser Liste.</span>
+              </div>
+            ) : (
+              openItems.map((item) => (
+                <div
+                  key={item.id}
+                  onClick={() => handleToggleItem(item)}
+                  className="p-4 rounded-2xl bg-[#131314] hover:bg-[#242628] gemini-border flex items-center justify-between gap-3 cursor-pointer transition-all active:scale-[0.99]"
+                >
+                  <div className="flex items-center gap-3.5 min-w-0">
+                    <Circle className="w-5 h-5 text-[#8ab4f8] flex-shrink-0" />
+                    <span className="text-base font-medium text-[#e3e3e3] truncate">
+                      {item.content}
+                    </span>
+                    {item.quantity && (
+                      <span className="px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#8ab4f8] text-xs font-medium">
+                        {item.quantity}
+                      </span>
+                    )}
+                    {item.category && (
+                      <span className="hidden sm:inline px-2.5 py-0.5 rounded-full bg-[#1e1f20] text-[#9aa0a6] text-xs">
+                        {item.category}
+                      </span>
+                    )}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteItem(item.id);
+                    }}
+                    className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#5f6368] hover:text-[#f28b82] flex items-center justify-center"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Completed Items Section */}
+          {completedItems.length > 0 && (
+            <div className="mt-8 pt-6 border-t border-white/[0.06]">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-xs font-semibold uppercase tracking-wider text-[#9aa0a6]">
+                  Bereits im Einkaufswagen / Erledigt ({completedItems.length})
+                </span>
+                <button
+                  onClick={handleClearCompleted}
+                  className="px-3.5 py-1 rounded-full bg-[#131314] hover:bg-[#f28b82]/20 text-xs text-[#9aa0a6] hover:text-[#f28b82] transition-colors"
+                >
+                  Erledigte aufräumen
+                </button>
+              </div>
+
+              <div className="space-y-2 opacity-70">
+                {completedItems.map((item) => (
+                  <div
+                    key={item.id}
+                    onClick={() => handleToggleItem(item)}
+                    className="p-3.5 rounded-2xl bg-[#131314]/60 gemini-border flex items-center justify-between gap-3 cursor-pointer"
+                  >
+                    <div className="flex items-center gap-3 min-w-0">
+                      <CheckCircle2 className="w-5 h-5 text-[#81c995] flex-shrink-0" />
+                      <span className="text-sm text-[#9aa0a6] line-through truncate">
+                        {item.content}
+                      </span>
+                      {item.quantity && (
+                        <span className="text-xs text-[#5f6368]">({item.quantity})</span>
+                      )}
+                    </div>
+                    {item.completedByName && (
+                      <span className="text-xs text-[#5f6368]">✓ {item.completedByName}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};

frontend/src/features/settings/EcosystemView.tsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Key,
+  Plus,
+  Trash2,
+  Copy,
+  Check,
+  Webhook,
+  Download,
+  ShieldCheck,
+  Zap,
+  Terminal,
+} from 'lucide-react';
+import { APIKey, PriorityLevel } from '../../lib/types';
+import { api, getToken, triggerHaptic } from '../../lib/api';
+
+interface EcosystemViewProps {
+  onIngested: () => void;
+}
+
+export const EcosystemView: React.FC<EcosystemViewProps> = ({ onIngested }) => {
+  const [keys, setKeys] = useState<APIKey[]>([]);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null);
+  const [copiedKey, setCopiedKey] = useState(false);
+
+  // Live Webhook Simulator State
+  const [simTitle, setSimTitle] = useState('Waschmaschine im Keller ist fertig!');
+  const [simPriority, setSimPriority] = useState<PriorityLevel>('high');
+  const [simStatus, setSimStatus] = useState<string | null>(null);
+
+  const loadKeys = async () => {
+    const k = await api.getAPIKeys();
+    setKeys(k);
+  };
+
+  useEffect(() => {
+    loadKeys();
+  }, []);
+
+  const handleCreateKey = async (e: React.FormEvent) => {
+    e.preventDefault();
+    triggerHaptic(15);
+    const created = await api.createAPIKey(newKeyName.trim() || 'Home Assistant');
+    if (created.rawKey) {
+      setNewlyCreatedKey(created.rawKey);
+    }
+    setNewKeyName('');
+    await loadKeys();
+  };
+
+  const handleDeleteKey = async (id: string) => {
+    triggerHaptic(20);
+    await api.deleteAPIKey(id);
+    await loadKeys();
+  };
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedKey(true);
+    setTimeout(() => setCopiedKey(false), 2000);
+  };
+
+  const handleSimulateWebhook = async () => {
+    triggerHaptic(20);
+    const tokenToUse = newlyCreatedKey || getToken() || '';
+    try {
+      await api.testWebhookIngest(tokenToUse, simTitle, simPriority, ['smarthome', 'automation']);
+      setSimStatus('✅ Webhook erfolgreich ausgelöst! Neue Karte liegt in deiner Inbox.');
+      onIngested();
+      setTimeout(() => setSimStatus(null), 4000);
+    } catch (err: any) {
+      setSimStatus(`❌ Fehler: ${err.message}`);
+    }
+  };
+
+  const handleFullExport = async () => {
+    triggerHaptic(15);
+    const data = await api.exportAll();
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: 'application/json;charset=utf-8',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `mindsift-backup-${new Date().toISOString().slice(0, 10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const exampleToken = newlyCreatedKey || 'mindsift_sec_dein_api_key';
+  const baseUrl = window.location.origin;
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      {/* Section 1: API Keys for Smarthome & Automation */}
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-10 h-10 rounded-full bg-[#8ab4f8]/15 flex items-center justify-center">
+            <Key className="w-5 h-5 text-[#8ab4f8]" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-[#e3e3e3]">
+              Webhooks & Ingestion API-Schlüssel
+            </h3>
+            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+              Verbinde Home Assistant, Zigbee2MQTT, n8n oder eigene Cronjobs direkt mit deiner MindSift Inbox.
+            </p>
+          </div>
+        </div>
+
+        <form onSubmit={handleCreateKey} className="mt-5 flex flex-col sm:flex-row gap-2.5">
+          <input
+            type="text"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="Bezeichnung (z. B. Home Assistant, Proxmox Backup, Rauchmelder)…"
+            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+          />
+          <button
+            type="submit"
+            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:bg-[#a1c2fa] transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            <span>API-Key erzeugen</span>
+          </button>
+        </form>
+
+        {newlyCreatedKey && (
+          <div className="mt-4 p-4 rounded-2xl bg-[#81c995]/15 border border-[#81c995]/40 flex flex-wrap items-center justify-between gap-3">
+            <div className="min-w-0">
+              <p className="text-xs font-semibold text-[#81c995] mb-1">
+                Neuer API-Schlüssel erstellt (bitte jetzt kopieren):
+              </p>
+              <code className="text-xs sm:text-sm font-mono text-[#e3e3e3] break-all">
+                {newlyCreatedKey}
+              </code>
+            </div>
+            <button
+              onClick={() => handleCopy(newlyCreatedKey)}
+              className="h-9 px-4 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs flex items-center gap-1.5"
+            >
+              {copiedKey ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+              <span>{copiedKey ? 'Kopiert!' : 'Key kopieren'}</span>
+            </button>
+          </div>
+        )}
+
+        {/* Active Keys List */}
+        <div className="mt-5 space-y-2">
+          {keys.length === 0 ? (
+            <p className="text-xs text-[#5f6368] py-2">
+              Noch keine dedizierten API-Schlüssel hinterlegt.
+            </p>
+          ) : (
+            keys.map((k) => (
+              <div
+                key={k.id}
+                className="p-3.5 rounded-2xl bg-[#131314] gemini-border flex items-center justify-between gap-3"
+              >
+                <div>
+                  <span className="text-sm font-medium text-[#e3e3e3]">{k.name}</span>
+                  <span className="ml-3 text-xs font-mono text-[#8ab4f8]">{k.keyPrefix}</span>
+                  {k.lastUsedAt && (
+                    <span className="ml-3 text-xs text-[#5f6368]">
+                      Zuletzt genutzt: {new Date(k.lastUsedAt).toLocaleDateString('de-DE')}
+                    </span>
+                  )}
+                </div>
+                <button
+                  onClick={() => handleDeleteKey(k.id)}
+                  className="w-8 h-8 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Section 2: Interactive Smarthome Webhook Simulator */}
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 rounded-full bg-[#c58af9]/15 flex items-center justify-center">
+            <Webhook className="w-5 h-5 text-[#c58af9]" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-[#e3e3e3]">
+              Live Smarthome Webhook-Simulator
+            </h3>
+            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+              Teste den Webhook-Endpunkt direkt hier – das Event landet sofort als Karte im Triage-Deck.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2 mb-4">
+          {[
+            { label: '🧺 Waschmaschine fertig', text: 'Waschmaschine im Keller ist fertig – Wäsche aufhängen!', prio: 'high' as PriorityLevel },
+            { label: '🚨 Rauchmelder Batterie', text: 'Rauchmelder Dachgeschoss meldet niedrige Batterie (12%)', prio: 'urgent' as PriorityLevel },
+            { label: '💧 Luftfeuchtigkeit Keller', text: 'Kellerfeuchtigkeit über 70% – Lüften oder Entfeuchter starten', prio: 'urgent' as PriorityLevel },
+          ].map((preset) => (
+            <button
+              key={preset.label}
+              type="button"
+              onClick={() => {
+                setSimTitle(preset.text);
+                setSimPriority(preset.prio);
+              }}
+              className="px-3.5 py-1.5 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3]"
+            >
+              {preset.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-2.5">
+          <input
+            type="text"
+            value={simTitle}
+            onChange={(e) => setSimTitle(e.target.value)}
+            className="flex-1 h-11 px-4 rounded-full bg-[#131314] text-sm text-[#e3e3e3] gemini-border focus:outline-none"
+          />
+          <button
+            type="button"
+            onClick={handleSimulateWebhook}
+            className="h-11 px-6 rounded-full bg-[#c58af9] text-[#0b0f19] font-semibold text-sm flex items-center justify-center gap-1.5 hover:opacity-90 transition-opacity"
+          >
+            <Zap className="w-4 h-4" />
+            <span>Webhook jetzt abfeuern</span>
+          </button>
+        </div>
+
+        {simStatus && (
+          <p className="mt-3 text-xs font-medium text-[#81c995]">{simStatus}</p>
+        )}
+
+        {/* Code Example Snippets */}
+        <div className="mt-6 space-y-3">
+          <div className="flex items-center gap-2 text-xs font-semibold text-[#9aa0a6]">
+            <Terminal className="w-3.5 h-3.5 text-[#8ab4f8]" />
+            <span>cURL / Home Assistant REST Command:</span>
+          </div>
+          <pre className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs text-[#8ab4f8] overflow-x-auto">
+{`curl -X POST "${baseUrl}/api/v1/webhooks/ingest?token=${exampleToken}" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "title": "Kellerfeuchtigkeit über 70%",
+    "priority": "urgent",
+    "tags": ["smarthome", "keller"]
+  }'`}
+          </pre>
+        </div>
+      </div>
+
+      {/* Section 3: Data Sovereignty & Export */}
+      <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-[#81c995]/15 flex items-center justify-center flex-shrink-0">
+            <ShieldCheck className="w-5 h-5 text-[#81c995]" />
+          </div>
+          <div>
+            <h3 className="text-base font-bold text-[#e3e3e3]">
+              100 % Datensouveränität & Komplett-Export
+            </h3>
+            <p className="text-xs sm:text-sm text-[#9aa0a6]">
+              Exportiere jederzeit alle Gedanken, Aufgaben, Dokumente und geteilten Listen als portables JSON-Archiv.
+            </p>
+          </div>
+        </div>
+
+        <button
+          onClick={handleFullExport}
+          className="h-11 px-6 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-sm flex items-center gap-2 hover:opacity-90 flex-shrink-0"
+        >
+          <Download className="w-4 h-4" />
+          <span>Komplett-Backup (.json)</span>
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/features/triage/TasksView.tsx

@@ -0,0 +1,272 @@
+import React, { useEffect, useState } from 'react';
+import {
+  CheckCircle2,
+  Circle,
+  Calendar,
+  Trash2,
+  RotateCcw,
+  FileText,
+  Tag,
+  AlertCircle,
+} from 'lucide-react';
+import { Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface TasksViewProps {
+  onRefreshStats: () => void;
+  onOpenDocument: (docId: string) => void;
+}
+
+export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => {
+  const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
+  const [tasks, setTasks] = useState<Thought[]>([]);
+  const [discarded, setDiscarded] = useState<Thought[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [allTasks, allDiscarded] = await Promise.all([
+        api.getTasks(),
+        api.getThoughts('discarded'),
+      ]);
+      setTasks(allTasks);
+      setDiscarded(allDiscarded);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleToggleDone = async (task: Thought) => {
+    triggerHaptic(15);
+    const nextState = !task.isCompleted;
+    setTasks((prev) =>
+      prev.map((t) => (t.id === task.id ? { ...t, isCompleted: nextState } : t))
+    );
+    await api.updateThought(task.id, { isCompleted: nextState });
+    onRefreshStats();
+  };
+
+  const handleDueDateChange = async (task: Thought, newDate: string) => {
+    setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, dueDate: newDate } : t)));
+    await api.updateThought(task.id, { dueDate: newDate });
+  };
+
+  const handleConvertToDoc = async (task: Thought) => {
+    triggerHaptic(20);
+    const updated = await api.triageAction(task.id, 'keep', { convertTo: 'document' });
+    onRefreshStats();
+    if (updated.convertedRefId) {
+      onOpenDocument(updated.convertedRefId);
+    } else {
+      loadData();
+    }
+  };
+
+  const handleRestore = async (item: Thought) => {
+    triggerHaptic(15);
+    await api.triageAction(item.id, 'restore');
+    await loadData();
+    onRefreshStats();
+  };
+
+  const handleDeletePermanent = async (id: string) => {
+    triggerHaptic(20);
+    await api.deleteThought(id);
+    await loadData();
+    onRefreshStats();
+  };
+
+  const handlePurgeAllDiscarded = async () => {
+    await api.purgeDiscarded();
+    await loadData();
+    onRefreshStats();
+  };
+
+  const openTasks = tasks.filter((t) => !t.isCompleted);
+  const doneTasks = tasks.filter((t) => t.isCompleted);
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* Filter Pills */}
+      <div className="flex flex-wrap items-center justify-between gap-3 mb-6">
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setFilter('open')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'open'
+                ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Offene Aufgaben ({openTasks.length})
+          </button>
+
+          <button
+            onClick={() => setFilter('done')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'done'
+                ? 'bg-[#81c995] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Erledigt ({doneTasks.length})
+          </button>
+
+          <button
+            onClick={() => setFilter('discarded')}
+            className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
+              filter === 'discarded'
+                ? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
+                : 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
+            }`}
+          >
+            Verworfen ({discarded.length})
+          </button>
+        </div>
+
+        {filter === 'discarded' && discarded.length > 0 && (
+          <button
+            onClick={handlePurgeAllDiscarded}
+            className="h-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Papierkorb leeren
+          </button>
+        )}
+      </div>
+
+      {loading ? (
+        <div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div>
+      ) : filter === 'discarded' ? (
+        <div className="space-y-2.5">
+          {discarded.length === 0 ? (
+            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+              Keine verworfenen Gedanken im Papierkorb.
+            </div>
+          ) : (
+            discarded.map((item) => (
+              <div
+                key={item.id}
+                className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  <button
+                    onClick={() => handleRestore(item)}
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#8ab4f8] flex items-center gap-1"
+                  >
+                    <RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
+                  </button>
+                  <button
+                    onClick={() => handleDeletePermanent(item.id)}
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      ) : (
+        <div className="space-y-2.5">
+          {(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
+            <div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
+              {filter === 'open'
+                ? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!'
+                : 'Noch keine erledigten Aufgaben.'}
+            </div>
+          ) : (
+            (filter === 'open' ? openTasks : doneTasks).map((task) => (
+              <div
+                key={task.id}
+                className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
+              >
+                <div className="flex items-start gap-3.5 min-w-0 flex-1">
+                  <button
+                    onClick={() => handleToggleDone(task)}
+                    className="mt-0.5 flex-shrink-0 text-[#8ab4f8] hover:scale-110 transition-transform"
+                  >
+                    {task.isCompleted ? (
+                      <CheckCircle2 className="w-5 h-5 text-[#81c995]" />
+                    ) : (
+                      <Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" />
+                    )}
+                  </button>
+
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`text-sm sm:text-base font-medium break-words ${
+                        task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
+                      }`}
+                    >
+                      {task.content}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-2 mt-2">
+                      {task.priority === 'urgent' && (
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/20 text-[#f28b82] text-xs flex items-center gap-1">
+                          <AlertCircle className="w-3 h-3" /> Dringend
+                        </span>
+                      )}
+                      {task.priority === 'high' && (
+                        <span className="px-2.5 py-0.5 rounded-full bg-[#8ab4f8]/20 text-[#8ab4f8] text-xs">
+                          Hoch
+                        </span>
+                      )}
+                      {task.tags?.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                        >
+                          <Tag className="w-2.5 h-2.5" />#{tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Controls */}
+                <div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
+                  <div className="relative flex items-center">
+                    <Calendar className="w-3.5 h-3.5 text-[#8ab4f8] absolute left-3 pointer-events-none" />
+                    <input
+                      type="date"
+                      value={task.dueDate || ''}
+                      onChange={(e) => handleDueDateChange(task, e.target.value)}
+                      className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs gemini-border focus:outline-none focus:border-[#8ab4f8]"
+                    />
+                  </div>
+
+                  <button
+                    onClick={() => handleConvertToDoc(task)}
+                    title="Im Workspace als Projekt-Dokument vertiefen"
+                    className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1"
+                  >
+                    <FileText className="w-3.5 h-3.5" />
+                    <span className="hidden md:inline">Vertiefen</span>
+                  </button>
+
+                  <button
+                    onClick={() => handleDeletePermanent(task.id)}
+                    title="Löschen"
+                    className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/features/triage/TriageDeck.tsx

@@ -0,0 +1,457 @@
+import React, { useEffect, useState } from 'react';
+import { motion, useMotionValue, useTransform, AnimatePresence } from 'framer-motion';
+import {
+  X,
+  Check,
+  Calendar,
+  FileText,
+  ShoppingCart,
+  RotateCcw,
+  Sparkles,
+  Mic,
+  Webhook,
+  Keyboard,
+  Tag,
+  Clock,
+} from 'lucide-react';
+import { SharedList, Thought } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface TriageDeckProps {
+  deck: Thought[];
+  lists: SharedList[];
+  onDeckChange: () => void;
+  onOpenDocument: (docId: string) => void;
+  onFocusCapture: () => void;
+}
+
+export const TriageDeck: React.FC<TriageDeckProps> = ({
+  deck,
+  lists,
+  onDeckChange,
+  onOpenDocument,
+  onFocusCapture,
+}) => {
+  const [cards, setCards] = useState<Thought[]>(deck);
+  const [lastTriaged, setLastTriaged] = useState<Thought | null>(null);
+  const [showDateModal, setShowDateModal] = useState(false);
+  const [taskDueDate, setTaskDueDate] = useState(() => {
+    const tomorrow = new Date(Date.now() + 86400000);
+    return tomorrow.toISOString().slice(0, 10);
+  });
+  const [showListSelector, setShowListSelector] = useState(false);
+
+  useEffect(() => {
+    setCards(deck);
+  }, [deck]);
+
+  const activeCard = cards[0];
+  const nextCard = cards[1];
+
+  const x = useMotionValue(0);
+  const rotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
+  const keepOpacity = useTransform(x, [25, 130], [0, 1]);
+  const discardOpacity = useTransform(x, [-130, -25], [1, 0]);
+  const cardBorderColor = useTransform(
+    x,
+    [-140, 0, 140],
+    ['rgba(242, 139, 130, 0.65)', 'rgba(255, 255, 255, 0.08)', 'rgba(129, 201, 149, 0.65)']
+  );
+
+  const handleAction = async (
+    action: 'keep' | 'discard',
+    options?: {
+      convertTo?: 'task' | 'document' | 'list_item';
+      targetListId?: string;
+      dueDate?: string;
+    }
+  ) => {
+    if (!activeCard) return;
+
+    const current = activeCard;
+    triggerHaptic(action === 'keep' ? [12, 25] : 18);
+
+    // Optimistic removal from deck
+    setCards((prev) => prev.slice(1));
+    setLastTriaged(current);
+    setShowDateModal(false);
+    setShowListSelector(false);
+    x.set(0);
+
+    try {
+      const updated = await api.triageAction(current.id, action, options);
+      onDeckChange();
+      if (options?.convertTo === 'document' && updated.convertedRefId) {
+        onOpenDocument(updated.convertedRefId);
+      }
+    } catch {
+      onDeckChange();
+    }
+  };
+
+  const handleUndo = async () => {
+    if (!lastTriaged) return;
+    triggerHaptic(15);
+    const toRestore = lastTriaged;
+    setLastTriaged(null);
+    await api.triageAction(toRestore.id, 'restore');
+    onDeckChange();
+  };
+
+  // Keyboard shortcuts for desktop power users (BRAIN.md Section 5)
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable ||
+        !activeCard
+      ) {
+        return;
+      }
+
+      if (e.key === 'ArrowLeft' || e.key === 'h' || e.key === 'H') {
+        e.preventDefault();
+        handleAction('discard');
+      } else if (e.key === 'ArrowRight' || e.key === 'l' || e.key === 'L') {
+        e.preventDefault();
+        handleAction('keep');
+      } else if (e.key === 't' || e.key === 'T') {
+        e.preventDefault();
+        setShowDateModal((prev) => !prev);
+      } else if (e.key === 'd' || e.key === 'D') {
+        e.preventDefault();
+        handleAction('keep', { convertTo: 'document' });
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [activeCard]);
+
+  const priorityBadge = (priority: string) => {
+    switch (priority) {
+      case 'urgent':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#f28b82]/20 text-[#f28b82] border border-[#f28b82]/40">
+            🚨 Dringend
+          </span>
+        );
+      case 'high':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-semibold bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40">
+            ⚡ Priorität Hoch
+          </span>
+        );
+      case 'low':
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+            Später / Niedrig
+          </span>
+        );
+      default:
+        return (
+          <span className="px-3 py-1 rounded-full text-xs font-medium bg-[#282a2c] text-[#9aa0a6]">
+            Gedanke
+          </span>
+        );
+    }
+  };
+
+  const sourceBadge = (source: string) => {
+    if (source === 'voice') {
+      return (
+        <span className="px-3 py-1 rounded-full text-xs bg-[#c58af9]/15 text-[#c58af9] flex items-center gap-1">
+          <Mic className="w-3 h-3" /> Sprachnotiz
+        </span>
+      );
+    }
+    if (source === 'webhook') {
+      return (
+        <span className="px-3 py-1 rounded-full text-xs bg-[#81c995]/15 text-[#81c995] flex items-center gap-1">
+          <Webhook className="w-3 h-3" /> Smarthome Webhook
+        </span>
+      );
+    }
+    return null;
+  };
+
+  if (!activeCard) {
+    return (
+      <div className="max-w-xl mx-auto mt-8 p-8 sm:p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center shadow-card-depth">
+        <div className="w-16 h-16 rounded-full bg-[#81c995]/15 border border-[#81c995]/30 flex items-center justify-center mx-auto mb-5">
+          <Sparkles className="w-8 h-8 text-[#81c995]" />
+        </div>
+        <h2 className="text-2xl font-bold text-[#e3e3e3] mb-2">Inbox Zero erreicht!</h2>
+        <p className="text-[#9aa0a6] text-sm sm:text-base max-w-md mx-auto mb-6">
+          Dein Kopf ist komplett frei. Alle eingefrorenen Gedanken wurden gesichtet, verworfen oder in echte Projekte und Aufgaben verwandelt.
+        </p>
+
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <button
+            onClick={onFocusCapture}
+            className="h-11 px-6 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-sm hover:bg-[#a1c2fa] transition-colors"
+          >
+            + Neuen Gedanken einfrieren
+          </button>
+
+          {lastTriaged && (
+            <button
+              onClick={handleUndo}
+              className="h-11 px-5 rounded-full bg-[#282a2c] text-[#e3e3e3] hover:bg-[#333639] text-sm flex items-center gap-2 transition-colors"
+            >
+              <RotateCcw className="w-4 h-4 text-[#8ab4f8]" />
+              Letzten Swipe rückgängig machen
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-xl mx-auto select-none">
+      {/* Top Deck Status & Undo Bar */}
+      <div className="flex items-center justify-between mb-4 px-2">
+        <div className="flex items-center gap-2">
+          <span className="px-3.5 py-1 rounded-full bg-[#1e1f20] gemini-border text-xs font-medium text-[#8ab4f8]">
+            🃏 Noch {cards.length} {cards.length === 1 ? 'Gedanke' : 'Gedanken'} im Deck
+          </span>
+          <span className="hidden sm:flex items-center gap-1 text-xs text-[#5f6368]">
+            <Keyboard className="w-3.5 h-3.5" /> Pfeiltasten ← / → oder H / L
+          </span>
+        </div>
+
+        {lastTriaged && (
+          <button
+            onClick={handleUndo}
+            className="px-3.5 py-1 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#9aa0a6] hover:text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+          >
+            <RotateCcw className="w-3.5 h-3.5 text-[#8ab4f8]" />
+            Rückgängig
+          </button>
+        )}
+      </div>
+
+      {/* Card Stack Container */}
+      <div className="relative h-[340px] sm:h-[360px] w-full flex items-center justify-center">
+        {/* Background Preview Card */}
+        {nextCard && (
+          <div
+            key={nextCard.id + '-preview'}
+            className="absolute inset-x-4 top-5 bottom-0 rounded-3xl bg-[#18191b] gemini-border p-6 opacity-50 scale-[0.95] pointer-events-none flex flex-col justify-between"
+          >
+            <div className="flex items-center gap-2">{priorityBadge(nextCard.priority)}</div>
+            <p className="text-lg text-[#9aa0a6] line-clamp-3">{nextCard.content}</p>
+            <div className="text-xs text-[#5f6368]">Nächste Karte…</div>
+          </div>
+        )}
+
+        {/* Active Draggable Card */}
+        <AnimatePresence mode="popLayout">
+          <motion.div
+            key={activeCard.id}
+            style={{ x, rotate, borderColor: cardBorderColor }}
+            drag="x"
+            dragConstraints={{ left: 0, right: 0 }}
+            dragElastic={0.85}
+            transition={{ type: 'spring', stiffness: 350, damping: 25 }}
+            onDragEnd={(_, info) => {
+              if (info.offset.x > 110 || info.velocity.x > 550) {
+                handleAction('keep');
+              } else if (info.offset.x < -110 || info.velocity.x < -550) {
+                handleAction('discard');
+              }
+            }}
+            initial={{ scale: 0.94, opacity: 0, y: 16 }}
+            animate={{ scale: 1, opacity: 1, y: 0 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            className="relative w-full h-full rounded-3xl bg-[#1e1f20] border p-6 sm:p-8 shadow-card-depth cursor-grab active:cursor-grabbing flex flex-col justify-between overflow-hidden"
+          >
+            {/* Dynamic Swipe Overlays */}
+            <motion.div
+              style={{ opacity: keepOpacity }}
+              className="pointer-events-none absolute top-6 right-6 px-4 py-1.5 rounded-full bg-[#81c995]/20 border-2 border-[#81c995] text-[#81c995] font-bold text-xs tracking-wider uppercase"
+            >
+              Behalten 👉
+            </motion.div>
+
+            <motion.div
+              style={{ opacity: discardOpacity }}
+              className="pointer-events-none absolute top-6 left-6 px-4 py-1.5 rounded-full bg-[#f28b82]/20 border-2 border-[#f28b82] text-[#f28b82] font-bold text-xs tracking-wider uppercase"
+            >
+              👈 Weg damit
+            </motion.div>
+
+            {/* Card Header */}
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                {priorityBadge(activeCard.priority)}
+                {sourceBadge(activeCard.source)}
+              </div>
+              <span className="text-xs text-[#5f6368] flex items-center gap-1">
+                <Clock className="w-3.5 h-3.5" />
+                {new Date(activeCard.createdAt).toLocaleString('de-DE', {
+                  day: '2-digit',
+                  month: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </span>
+            </div>
+
+            {/* Card Body: The Thought */}
+            <div className="my-auto py-4">
+              <p className="text-xl sm:text-2xl font-medium text-[#e3e3e3] leading-relaxed break-words">
+                {activeCard.content}
+              </p>
+            </div>
+
+            {/* Card Footer: Tags & Due Date */}
+            <div className="flex flex-wrap items-center justify-between gap-2 pt-3 border-t border-white/[0.06]">
+              <div className="flex flex-wrap items-center gap-1.5">
+                {activeCard.tags && activeCard.tags.length > 0 ? (
+                  activeCard.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
+                    >
+                      <Tag className="w-3 h-3" />#{tag}
+                    </span>
+                  ))
+                ) : (
+                  <span className="text-xs text-[#5f6368]">Wische links zum Verwerfen, rechts zum Behalten</span>
+                )}
+              </div>
+
+              {activeCard.dueDate && (
+                <span className="px-3 py-0.5 rounded-full bg-[#8ab4f8]/15 text-[#8ab4f8] text-xs">
+                  📅 {activeCard.dueDate}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Convert to Task Date Picker Popover */}
+      {showDateModal && (
+        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-sm text-[#e3e3e3]">
+            <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+            <span>Als To-Do mit Fälligkeitsdatum anlegen:</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="date"
+              value={taskDueDate}
+              onChange={(e) => setTaskDueDate(e.target.value)}
+              className="bg-[#1e1f20] text-[#e3e3e3] px-3.5 py-1.5 rounded-full gemini-border text-xs focus:outline-none"
+            />
+            <button
+              onClick={() => handleAction('keep', { convertTo: 'task', dueDate: taskDueDate })}
+              className="px-4 py-1.5 rounded-full bg-[#81c995] text-[#0b0f19] font-semibold text-xs hover:opacity-90"
+            >
+              Aufgabe speichern
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Convert to Shopping List Item Popover */}
+      {showListSelector && (
+        <div className="mt-4 p-4 rounded-3xl bg-[#131314] gemini-border">
+          <p className="text-xs text-[#9aa0a6] mb-2.5">
+            In welche geteilte Liste soll dieser Gedanke verschoben werden?
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {lists.length > 0 ? (
+              lists.map((lst) => (
+                <button
+                  key={lst.id}
+                  onClick={() =>
+                    handleAction('keep', { convertTo: 'list_item', targetListId: lst.id })
+                  }
+                  className="px-4 py-2 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                >
+                  <span>{lst.icon}</span>
+                  <span>{lst.title}</span>
+                </button>
+              ))
+            ) : (
+              <span className="text-xs text-[#5f6368]">Noch keine Listen vorhanden.</span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Primary Triage Action Pills */}
+      <div className="mt-6 flex flex-wrap items-center justify-center gap-2.5 sm:gap-3">
+        {/* Swipe Left: Discard */}
+        <button
+          onClick={() => handleAction('discard')}
+          title="Verwerfen (Taste H oder Pfeil links)"
+          className="h-12 px-5 rounded-full bg-[#1e1f20] hover:bg-[#f28b82]/20 border border-[#f28b82]/30 text-[#f28b82] font-medium text-sm flex items-center gap-2 transition-all active:scale-95"
+        >
+          <X className="w-4 h-4" />
+          <span>Weg damit</span>
+        </button>
+
+        {/* Convert to Task with Due Date */}
+        <button
+          onClick={() => {
+            setShowListSelector(false);
+            setShowDateModal((prev) => !prev);
+          }}
+          title="Als Aufgabe mit Datum (Taste T)"
+          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+            showDateModal
+              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+          }`}
+        >
+          <Calendar className="w-4 h-4 text-[#8ab4f8]" />
+          <span>Termin-To-Do</span>
+        </button>
+
+        {/* Convert to Workspace Document */}
+        <button
+          onClick={() => handleAction('keep', { convertTo: 'document' })}
+          title="In ein Workspace-Dokument verwandeln (Taste D)"
+          className="h-12 px-4 rounded-full bg-[#1e1f20] hover:bg-[#282a2c] gemini-border text-[#e3e3e3] text-xs sm:text-sm flex items-center gap-1.5 transition-all"
+        >
+          <FileText className="w-4 h-4 text-[#c58af9]" />
+          <span>Als Projekt-Notiz</span>
+        </button>
+
+        {/* Convert to Shared Shopping List Item */}
+        <button
+          onClick={() => {
+            setShowDateModal(false);
+            setShowListSelector((prev) => !prev);
+          }}
+          title="Auf eine geteilte Einkaufsliste setzen"
+          className={`h-12 px-4 rounded-full gemini-border text-xs sm:text-sm flex items-center gap-1.5 transition-all ${
+            showListSelector
+              ? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
+              : 'bg-[#1e1f20] hover:bg-[#282a2c] text-[#e3e3e3]'
+          }`}
+        >
+          <ShoppingCart className="w-4 h-4 text-[#81c995]" />
+          <span>Auf Liste</span>
+        </button>
+
+        {/* Swipe Right: Keep */}
+        <button
+          onClick={() => handleAction('keep')}
+          title="Behalten & als Aufgabe sichern (Taste L oder Pfeil rechts)"
+          className="h-12 px-5 rounded-full bg-[#81c995]/20 hover:bg-[#81c995]/30 border border-[#81c995]/40 text-[#81c995] font-semibold text-sm flex items-center gap-2 transition-all active:scale-95"
+        >
+          <Check className="w-4 h-4" />
+          <span>Behalten</span>
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/features/workspace/WorkspaceView.tsx

@@ -0,0 +1,539 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Plus,
+  Pin,
+  Trash2,
+  Download,
+  CheckSquare,
+  Heading1,
+  Heading2,
+  List,
+  Code,
+  Sparkles,
+  AlignLeft,
+  Check,
+  Search,
+  ArrowUp,
+  ArrowDown,
+} from 'lucide-react';
+import { BlockType, Document, DocumentBlock } from '../../lib/types';
+import { api, triggerHaptic } from '../../lib/api';
+
+interface WorkspaceViewProps {
+  initialDocId?: string | null;
+  onStatsChange: () => void;
+}
+
+const ICONS = ['🚀', '💡', '📄', '🏡', '⚡', '🎯', '🍕', '🛠️', '🧠', '🔥', '🏔️', '📦'];
+
+export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
+  initialDocId,
+  onStatsChange,
+}) => {
+  const [docs, setDocs] = useState<Document[]>([]);
+  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [saveState, setSaveState] = useState<'saved' | 'saving'>('saved');
+  const [showIconPicker, setShowIconPicker] = useState(false);
+
+  const loadDocs = async (selectId?: string | null) => {
+    const list = await api.getDocuments();
+    setDocs(list);
+    if (selectId) {
+      const found = list.find((d) => d.id === selectId);
+      if (found) {
+        setSelectedDoc(found);
+        return;
+      }
+    }
+    if (!selectedDoc && list.length > 0) {
+      setSelectedDoc(list[0]);
+    } else if (selectedDoc) {
+      const updated = list.find((d) => d.id === selectedDoc.id);
+      if (updated) setSelectedDoc(updated);
+    }
+  };
+
+  useEffect(() => {
+    loadDocs(initialDocId);
+  }, [initialDocId]);
+
+  const persistDocument = async (updatedDoc: Document) => {
+    setSelectedDoc(updatedDoc);
+    setDocs((prev) => prev.map((d) => (d.id === updatedDoc.id ? updatedDoc : d)));
+    setSaveState('saving');
+    try {
+      await api.updateDocument(updatedDoc.id, {
+        title: updatedDoc.title,
+        icon: updatedDoc.icon,
+        blocks: updatedDoc.blocks,
+        tags: updatedDoc.tags,
+        isPinned: updatedDoc.isPinned,
+      });
+    } finally {
+      setSaveState('saved');
+    }
+  };
+
+  const handleCreateDoc = async () => {
+    triggerHaptic(15);
+    const created = await api.createDocument({
+      title: 'Neues Projekt / Notiz',
+      icon: '💡',
+      blocks: [
+        {
+          id: `blk_${Date.now()}_1`,
+          type: 'callout',
+          content: 'Kernidee oder Ziel dieses Projekts kurz zusammenfassen…',
+        },
+        {
+          id: `blk_${Date.now()}_2`,
+          type: 'h2',
+          content: 'Nächste Schritte',
+        },
+        {
+          id: `blk_${Date.now()}_3`,
+          type: 'todo',
+          content: 'Ersten Punkt abhaken',
+          checked: false,
+        },
+      ],
+      tags: ['projekt'],
+    });
+    await loadDocs(created.id);
+    onStatsChange();
+  };
+
+  const handleDeleteDoc = async (docId: string) => {
+    triggerHaptic(20);
+    await api.deleteDocument(docId);
+    const remaining = docs.filter((d) => d.id !== docId);
+    setDocs(remaining);
+    setSelectedDoc(remaining[0] || null);
+    onStatsChange();
+  };
+
+  const addBlock = (type: BlockType, afterIndex?: number) => {
+    if (!selectedDoc) return;
+    const newBlock: DocumentBlock = {
+      id: `blk_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+      type,
+      content: '',
+      checked: false,
+      lang: type === 'code' ? 'bash' : undefined,
+    };
+
+    const nextBlocks = [...selectedDoc.blocks];
+    if (afterIndex !== undefined && afterIndex >= 0) {
+      nextBlocks.splice(afterIndex + 1, 0, newBlock);
+    } else {
+      nextBlocks.push(newBlock);
+    }
+
+    persistDocument({ ...selectedDoc, blocks: nextBlocks });
+  };
+
+  const updateBlock = (blockId: string, patch: Partial<DocumentBlock>) => {
+    if (!selectedDoc) return;
+    const nextBlocks = selectedDoc.blocks.map((b) =>
+      b.id === blockId ? { ...b, ...patch } : b
+    );
+    persistDocument({ ...selectedDoc, blocks: nextBlocks });
+  };
+
+  const removeBlock = (blockId: string) => {
+    if (!selectedDoc || selectedDoc.blocks.length <= 1) return;
+    const nextBlocks = selectedDoc.blocks.filter((b) => b.id !== blockId);
+    persistDocument({ ...selectedDoc, blocks: nextBlocks });
+  };
+
+  const moveBlock = (index: number, direction: -1 | 1) => {
+    if (!selectedDoc) return;
+    const targetIdx = index + direction;
+    if (targetIdx < 0 || targetIdx >= selectedDoc.blocks.length) return;
+    const nextBlocks = [...selectedDoc.blocks];
+    const [moved] = nextBlocks.splice(index, 1);
+    nextBlocks.splice(targetIdx, 0, moved);
+    persistDocument({ ...selectedDoc, blocks: nextBlocks });
+  };
+
+  const handleExportMarkdown = () => {
+    if (!selectedDoc) return;
+    const lines: string[] = [`# ${selectedDoc.icon} ${selectedDoc.title}`, ''];
+    for (const b of selectedDoc.blocks) {
+      switch (b.type) {
+        case 'h1':
+          lines.push(`# ${b.content}`, '');
+          break;
+        case 'h2':
+          lines.push(`## ${b.content}`, '');
+          break;
+        case 'h3':
+          lines.push(`### ${b.content}`, '');
+          break;
+        case 'todo':
+          lines.push(`- [${b.checked ? 'x' : ' '}] ${b.content}`);
+          break;
+        case 'bullet':
+          lines.push(`- ${b.content}`);
+          break;
+        case 'callout':
+          lines.push(`> 💡 ${b.content}`, '');
+          break;
+        case 'code':
+          lines.push('```' + (b.lang || ''), b.content, '```', '');
+          break;
+        default:
+          lines.push(b.content, '');
+      }
+    }
+
+    const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${selectedDoc.title.toLowerCase().replace(/[^a-z0-9äöüß]+/g, '-')}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const filteredDocs = docs.filter(
+    (d) =>
+      d.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      d.content.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-6xl mx-auto">
+      {/* Left Document List Sidebar */}
+      <div className="lg:col-span-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="w-4 h-4 text-[#9aa0a6] absolute left-3.5 top-1/2 -translate-y-1/2" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Notizen durchsuchen…"
+              className="w-full h-10 pl-9 pr-4 rounded-full bg-[#1e1f20] text-xs sm:text-sm text-[#e3e3e3] placeholder-[#9aa0a6] gemini-border focus:outline-none focus:border-[#8ab4f8]"
+            />
+          </div>
+
+          <button
+            onClick={handleCreateDoc}
+            className="h-10 px-4 rounded-full bg-[#8ab4f8] text-[#0b0f19] font-semibold text-xs sm:text-sm flex items-center gap-1.5 hover:bg-[#a1c2fa] transition-colors flex-shrink-0"
+          >
+            <Plus className="w-4 h-4" />
+            <span>Neu</span>
+          </button>
+        </div>
+
+        <div className="space-y-2 max-h-[540px] overflow-y-auto pr-1">
+          {filteredDocs.map((doc) => {
+            const active = selectedDoc?.id === doc.id;
+            return (
+              <button
+                key={doc.id}
+                onClick={() => setSelectedDoc(doc)}
+                className={`w-full text-left p-4 rounded-3xl transition-all flex items-start justify-between gap-3 ${
+                  active
+                    ? 'bg-[#1e1f20] border border-[#8ab4f8]/50 shadow-gemini-glow'
+                    : 'bg-[#131314] hover:bg-[#1e1f20] gemini-border'
+                }`}
+              >
+                <div className="flex items-start gap-3 min-w-0">
+                  <span className="text-2xl flex-shrink-0">{doc.icon}</span>
+                  <div className="min-w-0">
+                    <h4 className="font-semibold text-sm text-[#e3e3e3] truncate">{doc.title}</h4>
+                    <p className="text-xs text-[#9aa0a6] truncate mt-0.5">
+                      {doc.blocks?.[0]?.content || 'Leeres Dokument'}
+                    </p>
+                  </div>
+                </div>
+                {doc.isPinned && <Pin className="w-3.5 h-3.5 text-[#8ab4f8] flex-shrink-0 mt-1" />}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Right Notion-Flair Block Editor */}
+      <div className="lg:col-span-8">
+        {selectedDoc ? (
+          <div className="p-6 sm:p-8 rounded-3xl bg-[#1e1f20] gemini-border shadow-card-depth">
+            {/* Document Top Action Bar */}
+            <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-6 border-b border-white/[0.06]">
+              <div className="flex items-center gap-2 text-xs text-[#9aa0a6]">
+                <span className="px-3 py-1 rounded-full bg-[#131314] text-[#81c995] flex items-center gap-1">
+                  <Check className="w-3 h-3" />
+                  {saveState === 'saving' ? 'Speichert…' : 'Automatisch gespeichert'}
+                </span>
+                <span>• {selectedDoc.blocks.length} Blöcke</span>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() =>
+                    persistDocument({ ...selectedDoc, isPinned: !selectedDoc.isPinned })
+                  }
+                  className={`h-8 px-3 rounded-full text-xs flex items-center gap-1.5 transition-colors ${
+                    selectedDoc.isPinned
+                      ? 'bg-[#8ab4f8]/20 text-[#8ab4f8] border border-[#8ab4f8]/40'
+                      : 'bg-[#282a2c] text-[#9aa0a6] hover:text-[#e3e3e3]'
+                  }`}
+                >
+                  <Pin className="w-3.5 h-3.5" />
+                  <span>{selectedDoc.isPinned ? 'Angepinnt' : 'Anpinnen'}</span>
+                </button>
+
+                <button
+                  onClick={handleExportMarkdown}
+                  className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#e3e3e3] flex items-center gap-1.5 transition-colors"
+                >
+                  <Download className="w-3.5 h-3.5 text-[#8ab4f8]" />
+                  <span>Markdown (.md)</span>
+                </button>
+
+                <button
+                  onClick={() => handleDeleteDoc(selectedDoc.id)}
+                  className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center transition-colors"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Document Icon & Title */}
+            <div className="flex items-center gap-3 mb-6 relative">
+              <button
+                type="button"
+                onClick={() => setShowIconPicker((prev) => !prev)}
+                className="w-12 h-12 rounded-2xl bg-[#131314] hover:bg-[#282a2c] gemini-border text-2xl flex items-center justify-center flex-shrink-0"
+                title="Icon ändern"
+              >
+                {selectedDoc.icon}
+              </button>
+
+              {showIconPicker && (
+                <div className="absolute top-14 left-0 z-20 p-2.5 rounded-3xl bg-[#131314] gemini-border shadow-card-depth flex flex-wrap gap-1.5 w-64">
+                  {ICONS.map((ic) => (
+                    <button
+                      key={ic}
+                      type="button"
+                      onClick={() => {
+                        persistDocument({ ...selectedDoc, icon: ic });
+                        setShowIconPicker(false);
+                      }}
+                      className="w-9 h-9 rounded-full hover:bg-[#282a2c] text-lg flex items-center justify-center"
+                    >
+                      {ic}
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              <input
+                type="text"
+                value={selectedDoc.title}
+                onChange={(e) => persistDocument({ ...selectedDoc, title: e.target.value })}
+                placeholder="Dokument-Titel…"
+                className="w-full bg-transparent text-2xl sm:text-3xl font-bold text-[#e3e3e3] focus:outline-none"
+              />
+            </div>
+
+            {/* Blocks Stack */}
+            <div className="space-y-3">
+              {selectedDoc.blocks.map((block, idx) => (
+                <div key={block.id} className="group flex items-start gap-2">
+                  {/* Block Renderer */}
+                  <div className="flex-1 min-w-0">
+                    {block.type === 'h1' && (
+                      <input
+                        type="text"
+                        value={block.content}
+                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                        placeholder="Überschrift 1…"
+                        className="w-full bg-transparent text-2xl font-bold text-[#e3e3e3] focus:outline-none py-1"
+                      />
+                    )}
+
+                    {block.type === 'h2' && (
+                      <input
+                        type="text"
+                        value={block.content}
+                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                        placeholder="Abschnitts-Überschrift…"
+                        className="w-full bg-transparent text-lg font-semibold text-[#8ab4f8] focus:outline-none pt-2 pb-1"
+                      />
+                    )}
+
+                    {block.type === 'paragraph' && (
+                      <textarea
+                        rows={Math.max(1, Math.ceil(block.content.length / 75))}
+                        value={block.content}
+                        onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                        placeholder="Text schreiben…"
+                        className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] leading-relaxed focus:outline-none resize-none"
+                      />
+                    )}
+
+                    {block.type === 'todo' && (
+                      <div className="flex items-center gap-3 py-1">
+                        <input
+                          type="checkbox"
+                          checked={!!block.checked}
+                          onChange={(e) => updateBlock(block.id, { checked: e.target.checked })}
+                          className="w-4 h-4 rounded accent-[#81c995] cursor-pointer"
+                        />
+                        <input
+                          type="text"
+                          value={block.content}
+                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                          placeholder="To-Do Punkt…"
+                          className={`w-full bg-transparent text-sm sm:text-base focus:outline-none ${
+                            block.checked ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
+                          }`}
+                        />
+                      </div>
+                    )}
+
+                    {block.type === 'bullet' && (
+                      <div className="flex items-center gap-3 py-0.5">
+                        <span className="w-1.5 h-1.5 rounded-full bg-[#8ab4f8] flex-shrink-0" />
+                        <input
+                          type="text"
+                          value={block.content}
+                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                          placeholder="Listenpunkt…"
+                          className="w-full bg-transparent text-sm sm:text-base text-[#e3e3e3] focus:outline-none"
+                        />
+                      </div>
+                    )}
+
+                    {block.type === 'callout' && (
+                      <div className="p-4 rounded-2xl bg-[#131314] border border-[#8ab4f8]/30 flex items-start gap-3">
+                        <Sparkles className="w-4 h-4 text-[#8ab4f8] flex-shrink-0 mt-1" />
+                        <textarea
+                          rows={2}
+                          value={block.content}
+                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                          placeholder="Wichtiger Hinweis oder Zusammenfassung…"
+                          className="w-full bg-transparent text-sm text-[#e3e3e3] focus:outline-none resize-none"
+                        />
+                      </div>
+                    )}
+
+                    {block.type === 'code' && (
+                      <div className="p-4 rounded-2xl bg-[#0b0f19] gemini-border font-mono text-xs sm:text-sm text-[#81c995]">
+                        <textarea
+                          rows={Math.max(2, block.content.split('\n').length)}
+                          value={block.content}
+                          onChange={(e) => updateBlock(block.id, { content: e.target.value })}
+                          placeholder="// Code oder Shell-Kommando…"
+                          className="w-full bg-transparent focus:outline-none resize-none"
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Block Reorder & Delete Controls */}
+                  <div className="opacity-0 group-hover:opacity-100 flex items-center gap-1 transition-opacity pt-1">
+                    <button
+                      type="button"
+                      onClick={() => moveBlock(idx, -1)}
+                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
+                      title="Nach oben"
+                    >
+                      <ArrowUp className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => moveBlock(idx, 1)}
+                      className="p-1 rounded-full hover:bg-[#282a2c] text-[#9aa0a6]"
+                      title="Nach unten"
+                    >
+                      <ArrowDown className="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => removeBlock(block.id)}
+                      className="p-1 rounded-full hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82]"
+                      title="Block entfernen"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Add Block Pill Toolbar */}
+            <div className="mt-8 pt-4 border-t border-white/[0.06] flex flex-wrap items-center gap-2">
+              <span className="text-xs text-[#9aa0a6] mr-1">+ Block einfügen:</span>
+
+              <button
+                type="button"
+                onClick={() => addBlock('paragraph')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <AlignLeft className="w-3.5 h-3.5 text-[#8ab4f8]" /> Text
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('h2')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <Heading2 className="w-3.5 h-3.5 text-[#8ab4f8]" /> Überschrift
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('todo')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <CheckSquare className="w-3.5 h-3.5 text-[#81c995]" /> Checkliste
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('bullet')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <List className="w-3.5 h-3.5 text-[#8ab4f8]" /> Aufzählung
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('callout')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <Sparkles className="w-3.5 h-3.5 text-[#c58af9]" /> Callout
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('code')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <Code className="w-3.5 h-3.5 text-[#81c995]" /> Codeblock
+              </button>
+
+              <button
+                type="button"
+                onClick={() => addBlock('h1')}
+                className="h-8 px-3 rounded-full bg-[#131314] hover:bg-[#282a2c] gemini-border text-xs text-[#e3e3e3] flex items-center gap-1.5"
+              >
+                <Heading1 className="w-3.5 h-3.5 text-[#8ab4f8]" /> H1
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="p-12 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6]">
+            Wähle links ein Dokument aus oder erstelle ein neues Projekt.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};