feat: add Proaktiv and KI Chat tabs to AI sidebar

frontend/src/components/ai/SuggestionSidebar.tsx

@@ -7,7 +7,19 @@ interface SuggestionSidebarProps {
   onClose: () => void;
 }
 
-export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
+const filterOptions = [
+  { value: 'all', label: 'Alle' },
+  { value: 'info', label: 'Info' },
+  { value: 'warning', label: 'Warnung' },
+  { value: 'action', label: 'Aktion' },
+  { value: 'insight', label: 'Erkenntnis' },
+];
+
+/**
+ * Inline suggestion list — no overlay/aside wrapper.
+ * Used inside the AISidebar proactive tab.
+ */
+export function SuggestionList() {
   const { suggestions, connected, dismiss, act } = useSuggestions();
   const [filter, setFilter] = useState<string>('all');
 
@@ -15,14 +27,68 @@ export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
     ? suggestions
     : suggestions.filter(s => s.suggestion_type === filter);
 
-  const filterOptions = [
-    { value: 'all', label: 'Alle' },
-    { value: 'info', label: 'Info' },
-    { value: 'warning', label: 'Warnung' },
-    { value: 'action', label: 'Aktion' },
-    { value: 'insight', label: 'Erkenntnis' },
-  ];
+  return (
+    <div className="flex flex-col h-full" data-testid="suggestion-list">
+      {/* Live indicator */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-100">
+        {connected && (
+          <span className="flex items-center gap-1 text-xs text-green-600">
+            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            Live
+          </span>
+        )}
+        <span className="text-xs text-secondary-400 ml-auto">
+          {suggestions.length} Vorschläge
+        </span>
+      </div>
 
+      {/* Filter */}
+      <div className="flex gap-1 px-3 py-2 border-b border-secondary-100 overflow-x-auto">
+        {filterOptions.map(opt => (
+          <button
+            key={opt.value}
+            onClick={() => setFilter(opt.value)}
+            className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
+              filter === opt.value
+                ? 'bg-primary-500 text-white'
+                : 'bg-secondary-100 text-secondary-600 hover:bg-secondary-200'
+            }`}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-3">
+        {filteredSuggestions.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-secondary-400">
+            <div className="text-4xl mb-3">🤖</div>
+            <p className="text-sm">Keine Vorschläge vorhanden</p>
+            <p className="text-xs mt-1">Die KI analysiert deinen Kontext...</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredSuggestions.map(suggestion => (
+              <SuggestionCard
+                key={suggestion.id}
+                suggestion={suggestion}
+                onDismiss={dismiss}
+                onAct={act}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Legacy overlay-based SuggestionSidebar — kept for backwards compat.
+ * Uses SuggestionList internally.
+ */
+export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
   return (
     <>
       {/* Overlay */}
@@ -43,12 +109,6 @@ export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
           <div className="flex items-center gap-2">
             <h2 className="font-semibold text-gray-800">KI Vorschläge</h2>
-            {connected && (
-              <span className="flex items-center gap-1 text-xs text-green-600">
-                <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
-                Live
-              </span>
-            )}
           </div>
           <button
             onClick={onClose}
@@ -58,51 +118,7 @@ export function SuggestionSidebar({ isOpen, onClose }: SuggestionSidebarProps) {
           </button>
         </div>
 
-        {/* Filter */}
-        <div className="flex gap-1 p-3 border-b border-gray-100 overflow-x-auto">
-          {filterOptions.map(opt => (
-            <button
-              key={opt.value}
-              onClick={() => setFilter(opt.value)}
-              className={`px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
-                filter === opt.value
-                  ? 'bg-blue-500 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto p-4">
-          {filteredSuggestions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center h-full text-gray-400">
-              <div className="text-4xl mb-3">🤖</div>
-              <p className="text-sm">Keine Vorschläge vorhanden</p>
-              <p className="text-xs mt-1">Die KI analysiert deinen Kontext...</p>
-            </div>
-          ) : (
-            <div>
-              {filteredSuggestions.map(suggestion => (
-                <SuggestionCard
-                  key={suggestion.id}
-                  suggestion={suggestion}
-                  onDismiss={dismiss}
-                  onAct={act}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Footer */}
-        <div className="p-3 border-t border-gray-200 text-center">
-          <span className="text-xs text-gray-400">
-            {suggestions.length} Vorschläge insgesamt
-          </span>
-        </div>
+        <SuggestionList />
       </aside>
     </>
   );