feat: drag&drop treeview, flat chat UI, activity indicator, fixed toolbar registration

frontend/src/components/ai/ChatWindow.tsx

@@ -25,19 +25,33 @@ function MessageContent({ content, role }: { content: string; role: string }) {
     return <div className="whitespace-pre-wrap break-words">{content}</div>;
   }
   return (
-    <div className="prose prose-sm max-w-none break-words">
+    <div className="prose prose-sm max-w-none break-words [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1 [&_table]:text-xs [&_th]:px-2 [&_th]:py-1 [&_td]:px-2 [&_td]:py-1 [&_pre]:text-xs [&_code]:text-xs">
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
     </div>
   );
 }
 
+function ActivityIndicator({ status }: { status: string | null }) {
+  if (!status) return null;
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 text-xs text-secondary-500">
+      <div className="flex gap-1">
+        <span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '0ms' }} />
+        <span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '150ms' }} />
+        <span className="w-1.5 h-1.5 rounded-full bg-primary-400 animate-bounce" style={{ animationDelay: '300ms' }} />
+      </div>
+      <span>{status}</span>
+    </div>
+  );
+}
+
 export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindowProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const [input, setInput] = useState('');
   const [isStreaming, setIsStreaming] = useState(false);
   const [streamingContent, setStreamingContent] = useState('');
-  const [toolStatus, setToolStatus] = useState<string | null>(null);
+  const [activity, setActivity] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [uploadingFile, setUploadingFile] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -55,7 +69,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
 
   useEffect(() => {
     if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  }, [messages, streamingContent]);
+  }, [messages, streamingContent, activity]);
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files || []);
@@ -80,7 +94,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
     setInput('');
     setIsStreaming(true);
     setStreamingContent('');
-    setToolStatus(null);
+    setActivity('Denke nach...');
     setError(null);
 
     const userMsg: ChatMessage = { id: 'temp-' + Date.now(), session_id: sessionId, role: 'user', content, tokens: 0, model_used: '' };
@@ -93,17 +107,19 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
         if (event.type === 'token' && event.content) {
           accumulated += event.content;
           setStreamingContent(accumulated);
+          setActivity(null);
         } else if (event.type === 'tool_calls' && event.tools) {
-          setToolStatus(`Tools: ${event.tools.join(', ')}`);
+          setActivity(`Rufe Tool auf: ${event.tools.join(', ')}`);
         } else if (event.type === 'tool_result' && event.tool) {
-          setToolStatus(`Tool '${event.tool}' ausgefuehrt`);
+          setActivity(`Tool '${event.tool}' ausgeführt`);
         } else if (event.type === 'done') {
-          setToolStatus(null);
+          setActivity(null);
           const msgs = await fetchMessages(sessionId);
           setMessages(msgs);
           setStreamingContent('');
         } else if (event.type === 'error') {
           setError(event.content || 'Unknown error');
+          setActivity(null);
         }
       }
     } catch (e) {
@@ -111,7 +127,7 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
     } finally {
       setIsStreaming(false);
       setStreamingContent('');
-      setToolStatus(null);
+      setActivity(null);
       inputRef.current?.focus();
     }
   };
@@ -140,24 +156,30 @@ export function ChatWindow({ sessionId, agentId, className, compact }: ChatWindo
           <div className="flex items-center justify-center h-full text-secondary-400 text-sm">Starte eine Konversation...</div>
         )}
         {messages.map((msg) => (
-          <div key={msg.id} className={clsx('mb-4 flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
-            <div className={clsx('max-w-[80%] rounded-lg px-4 py-2 text-sm', msg.role === 'user' ? 'bg-primary-600 text-white' : 'bg-secondary-100 text-secondary-900')}>
+          <div key={msg.id} className="mb-6">
+            <div className={clsx('text-xs font-medium mb-1', msg.role === 'user' ? 'text-primary-600' : 'text-secondary-400')}>
+              {msg.role === 'user' ? 'Du' : 'KI'}
+            </div>
+            <div className="text-sm text-secondary-900">
               <MessageContent content={msg.content} role={msg.role} />
               {msg.tool_calls && msg.tool_calls.length > 0 && (
-                <div className="mt-2 text-xs opacity-70">Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}</div>
+                <div className="mt-2 text-xs text-secondary-400 border-l-2 border-secondary-200 pl-2">
+                  ⚙️ Tools: {msg.tool_calls.map((tc: any) => tc.function?.name).join(', ')}
+                </div>
               )}
             </div>
           </div>
         ))}
         {streamingContent && (
-          <div className="mb-4 flex justify-start">
-            <div className="max-w-[80%] rounded-lg px-4 py-2 text-sm bg-secondary-100 text-secondary-900">
+          <div className="mb-6">
+            <div className="text-xs font-medium mb-1 text-secondary-400">KI</div>
+            <div className="text-sm text-secondary-900">
               <MessageContent content={streamingContent} role="assistant" />
             </div>
           </div>
         )}
-        {toolStatus && <div className="mb-2 text-center text-xs text-secondary-500">⚙️ {toolStatus}</div>}
-        {error && <div className="mb-4 flex justify-center"><div className="rounded-lg px-4 py-2 text-sm bg-red-50 text-red-700">{error}</div></div>}
+        <ActivityIndicator status={activity} />
+        {error && <div className="mb-4 text-sm text-red-600">{error}</div>}
       </div>
       <div className={clsx('border-t border-secondary-200', compact ? 'p-2' : 'p-4')}>
         <div className="flex items-end gap-2">

frontend/src/components/ai/SessionList.tsx

@@ -22,32 +22,21 @@ interface TreeNode {
 function buildTree(folders: ChatFolder[], sessions: ChatSession[]): TreeNode[] {
   const rootSessions = sessions.filter((s) => !s.folder_id);
   const root: TreeNode = { folder: null, sessions: rootSessions, children: [] };
-
   const folderMap = new Map<string, TreeNode>();
-  for (const f of folders) {
-    folderMap.set(f.id, { folder: f, sessions: [], children: [] });
-  }
-
+  for (const f of folders) folderMap.set(f.id, { folder: f, sessions: [], children: [] });
   for (const f of folders) {
     const node = folderMap.get(f.id)!;
-    if (f.parent_id && folderMap.has(f.parent_id)) {
-      folderMap.get(f.parent_id)!.children.push(node);
-    } else {
-      root.children.push(node);
-    }
+    if (f.parent_id && folderMap.has(f.parent_id)) folderMap.get(f.parent_id)!.children.push(node);
+    else root.children.push(node);
   }
-
   for (const s of sessions) {
-    if (s.folder_id && folderMap.has(s.folder_id)) {
-      folderMap.get(s.folder_id)!.sessions.push(s);
-    }
+    if (s.folder_id && folderMap.has(s.folder_id)) folderMap.get(s.folder_id)!.sessions.push(s);
   }
-
   return [root];
 }
 
 function TreeItem({
-  node, activeSessionId, onSelectSession, depth, onMoveSession, onDeleteFolder, onAddFolder,
+  node, activeSessionId, onSelectSession, depth, onMoveSession, onDeleteFolder, onAddFolder, onDragSession, onDropToFolder,
 }: {
   node: TreeNode;
   activeSessionId: string | null;
@@ -56,16 +45,25 @@ function TreeItem({
   onMoveSession: (sessionId: string, folderId: string | null) => void;
   onDeleteFolder: (folderId: string) => void;
   onAddFolder: (parentId: string | null) => void;
+  onDragSession: (sessionId: string) => void;
+  onDropToFolder: (folderId: string | null) => void;
 }) {
   const [expanded, setExpanded] = useState(true);
+  const [isDragOver, setIsDragOver] = useState(false);
   const isRoot = node.folder === null;
 
   return (
-    <div>
-      {/* Folder header */}
+    <div
+      onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={(e) => { e.preventDefault(); setIsDragOver(false); onDropToFolder(node.folder?.id || null); }}
+    >
       {!isRoot && (
         <div
-          className="group flex items-center gap-1 px-2 py-1.5 text-sm font-medium text-secondary-700 hover:bg-secondary-100 rounded-md cursor-pointer"
+          className={clsx(
+            'group flex items-center gap-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer',
+            isDragOver ? 'bg-primary-100 ring-1 ring-primary-300' : 'text-secondary-700 hover:bg-secondary-100'
+          )}
           style={{ paddingLeft: depth * 12 + 8 }}
           onClick={() => setExpanded(!expanded)}
         >
@@ -76,29 +74,21 @@ function TreeItem({
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
           </svg>
           <span className="flex-1 truncate">{node.folder!.name}</span>
-          <button
-            onClick={(e) => { e.stopPropagation(); onAddFolder(node.folder!.id); }}
-            className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600"
-            title="Unterordner"
-          >+</button>
-          <button
-            onClick={(e) => { e.stopPropagation(); onDeleteFolder(node.folder!.id); }}
-            className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600"
-            title="Löschen"
-          >✕</button>
+          <button onClick={(e) => { e.stopPropagation(); onAddFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600" title="Unterordner">+</button>
+          <button onClick={(e) => { e.stopPropagation(); onDeleteFolder(node.folder!.id); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
         </div>
       )}
-
-      {/* Sessions in this folder */}
       {(isRoot || expanded) && (
         <div>
           {node.sessions.map((session) => (
             <div
               key={session.id}
+              draggable
+              onDragStart={() => onDragSession(session.id)}
               onClick={() => onSelectSession(session.id)}
               className={clsx(
                 'group flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer rounded-md',
-                'hover:bg-secondary-100',
+                'hover:bg-secondary-100 active:cursor-grabbing',
                 activeSessionId === session.id && 'bg-primary-100 text-primary-700'
               )}
               style={{ paddingLeft: depth * 12 + 24 }}
@@ -107,26 +97,11 @@ function TreeItem({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h8M8 8h8m-8 4h8m-8 4h8" />
               </svg>
               <span className="flex-1 truncate">{session.title}</span>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  const folderId = node.folder?.id || null;
-                  onMoveSession(session.id, folderId ? null : 'root');
-                }}
-                className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-primary-600"
-                title="Verschieben"
-              >↦</button>
-              <button
-                onClick={(e) => { e.stopPropagation(); deleteSession(session.id).then(() => window.location.reload()); }}
-                className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600"
-                title="Löschen"
-              >✕</button>
+              <button onClick={(e) => { e.stopPropagation(); deleteSession(session.id).then(() => window.location.reload()); }} className="opacity-0 group-hover:opacity-100 text-secondary-400 hover:text-red-600" title="Löschen">✕</button>
             </div>
           ))}
         </div>
       )}
-
-      {/* Child folders */}
       {(isRoot || expanded) && node.children.map((child) => (
         <TreeItem
           key={child.folder!.id}
@@ -137,6 +112,8 @@ function TreeItem({
           onMoveSession={onMoveSession}
           onDeleteFolder={onDeleteFolder}
           onAddFolder={onAddFolder}
+          onDragSession={onDragSession}
+          onDropToFolder={onDropToFolder}
         />
       ))}
     </div>
@@ -148,22 +125,15 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
   const [folders, setFolders] = useState<ChatFolder[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [dragSessionId, setDragSessionId] = useState<string | null>(null);
 
   const loadData = async () => {
     try {
       setLoading(true);
-      const [s, f] = await Promise.all([
-        fetchSessions(isSidebar ? true : undefined),
-        fetchFolders(),
-      ]);
-      setSessions(s);
-      setFolders(f);
-      setError(null);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to load');
-    } finally {
-      setLoading(false);
-    }
+      const [s, f] = await Promise.all([fetchSessions(isSidebar ? true : undefined), fetchFolders()]);
+      setSessions(s); setFolders(f); setError(null);
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to load'); }
+    finally { setLoading(false); }
   };
 
   useEffect(() => { loadData(); }, [isSidebar]);
@@ -171,19 +141,14 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
   const handleNewChat = async () => {
     try {
       const session = await createSession({ is_sidebar: isSidebar || false });
-      setSessions((prev) => [session, ...prev]);
-      onSelectSession(session.id);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to create session');
-    }
+      setSessions((prev) => [session, ...prev]); onSelectSession(session.id);
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed'); }
   };
 
   const handleAddFolder = (parentId: string | null) => {
-    const name = prompt('Ordnername:');
+    const name = prompt('Ordnername:');;
     if (!name) return;
-    createFolder({ name, parent_id: parentId || undefined })
-      .then(() => loadData())
-      .catch((e) => setError(e?.message));
+    createFolder({ name, parent_id: parentId || undefined }).then(() => loadData()).catch((e) => setError(e?.message));
   };
 
   const handleDeleteFolder = (folderId: string) => {
@@ -191,14 +156,13 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
     deleteFolder(folderId).then(() => loadData()).catch((e) => setError(e?.message));
   };
 
-  const handleMoveSession = async (sessionId: string, target: string) => {
-    const folderId = target === 'root' ? null : target;
+  const handleDropToFolder = async (folderId: string | null) => {
+    if (!dragSessionId) return;
     try {
-      await updateSession(sessionId, { folder_id: folderId });
+      await updateSession(dragSessionId, { folder_id: folderId });
+      setDragSessionId(null);
       loadData();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Failed to move');
-    }
+    } catch (e) { setError(e instanceof Error ? e.message : 'Failed to move'); }
   };
 
   if (loading) return <div className="p-4 text-sm text-secondary-400">Laden...</div>;
@@ -208,19 +172,8 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
   return (
     <div className={clsx('flex flex-col h-full', className)}>
       <div className="p-3 border-b border-secondary-200 flex gap-2">
-        <button
-          onClick={handleNewChat}
-          className="flex-1 rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700"
-        >
-          + Neuer Chat
-        </button>
-        <button
-          onClick={() => handleAddFolder(null)}
-          className="rounded-lg border border-secondary-300 px-3 py-2 text-sm hover:bg-secondary-100"
-          title="Neuer Ordner"
-        >
-          📁+
-        </button>
+        <button onClick={handleNewChat} className="flex-1 rounded-lg bg-primary-600 text-white px-3 py-2 text-sm font-medium hover:bg-primary-700">+ Neuer Chat</button>
+        <button onClick={() => handleAddFolder(null)} className="rounded-lg border border-secondary-300 px-3 py-2 text-sm hover:bg-secondary-100" title="Neuer Ordner">📁+</button>
       </div>
       {error && <div className="p-2 text-xs text-red-600">{error}</div>}
       <div className="flex-1 overflow-y-auto p-2">
@@ -231,9 +184,11 @@ export function SessionList({ activeSessionId, onSelectSession, isSidebar, class
             activeSessionId={activeSessionId}
             onSelectSession={onSelectSession}
             depth={0}
-            onMoveSession={handleMoveSession}
+            onMoveSession={() => {}}
             onDeleteFolder={handleDeleteFolder}
             onAddFolder={handleAddFolder}
+            onDragSession={setDragSessionId}
+            onDropToFolder={handleDropToFolder}
           />
         ))}
       </div>

frontend/src/pages/AIAssistant.tsx

@@ -15,8 +15,30 @@ export function AIAssistantPage() {
 
   useEffect(() => {
     registerItems('ai_assistant', [
-      { id: 'agent-select', label: 'Agent', type: 'select', options: agents.map((a) => ({ value: a.id, label: a.name })), value: selectedAgentId || '', onChange: (val: string) => setSelectedAgentId(val || null) },
-      { id: 'new-chat', label: 'Neuer Chat', type: 'button', onClick: () => { setActiveSessionId(null); setMobileView('list'); } },
+      {
+        id: 'agent-select',
+        plugin: 'ai_assistant',
+        label: 'Agent',
+        type: 'select',
+        group: 'agent',
+        selectOptions: agents.map((a) => ({ value: a.id, label: a.name })),
+        selectValue: selectedAgentId || '',
+        onSelect: (val: string) => setSelectedAgentId(val || null),
+        onClick: () => {},
+      },
+      {
+        id: 'new-chat',
+        plugin: 'ai_assistant',
+        label: 'Neuer Chat',
+        type: 'button',
+        group: 'actions',
+        icon: (
+          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+        ),
+        onClick: () => { setActiveSessionId(null); setMobileView('list'); },
+      },
     ]);
     return () => unregisterPlugin('ai_assistant');
   }, [agents, selectedAgentId, registerItems, unregisterPlugin]);