Phase 4: KI-UI-Steuerung — AI agent UI control via WebSocket

- New ai_ui_control plugin: WS endpoint /ws/ai-ui-control, REST API (POST /command, GET /command/{id}/status, GET /online-users) - UI-Command-Protocol: 6 command types (navigate, filter, open_contact, modal, tab, settings) with Pydantic schemas - WebSocket manager: per-user connections, command delivery, feedback storage, stale cleanup - Frontend useAIUIControl hook: WS client with auto-reconnect, command dispatch, feedback sending - aiUIControlStore: Zustand store for command state, active modal/tab, pending filter/settings - AIUIControlIndicator: visual KI indication (Bot icon, toast, pulse animation) - ContactDetail integration: syncs activeTab and personModalOpen from AI control store - AppShell integration: useAIUIControl hook + AIUIControlIndicator - i18n keys for DE/EN - 18 Vitest tests: command protocol, store actions, feedback, visual indication - TSC: 0 new errors (only 2 pre-existing Dms.tsx errors)
2026-07-23 20:13:39 +02:00
parent 5dc6f29ac1
commit 903d649a0f
15 changed files with 1582 additions and 5 deletions
@@ -0,0 +1,109 @@
+/**
+ * AI UI Control Store — Zustand store for AI-driven UI commands.
+ *
+ * Task 4.3: Frontend useAIUIControl Hook (store portion)
+ * Task 4.11: Visuelle KI-Indikation (state for visual feedback)
+ */
+
+import { create } from 'zustand';
+
+export type UICommandType =
+  | 'navigate'
+  | 'filter'
+  | 'open_contact'
+  | 'modal'
+  | 'tab'
+  | 'settings';
+
+export type UICommandStatus =
+  | 'pending'
+  | 'delivered'
+  | 'success'
+  | 'failed'
+  | 'timeout';
+
+export interface UICommand {
+  command_id: string;
+  action: UICommandType;
+  path?: string | null;
+  entity?: string | null;
+  filter?: Record<string, unknown> | null;
+  contact_id?: string | null;
+  modal?: string | null;
+  tab?: string | null;
+  section?: string | null;
+  key?: string | null;
+  value?: unknown | null;
+  timestamp?: number | string | null;
+  description?: string | null;
+}
+
+export interface UICommandFeedback {
+  command_id: string;
+  status: UICommandStatus;
+  action?: UICommandType | null;
+  current_path?: string | null;
+  current_tab?: string | null;
+  message?: string | null;
+  error?: string | null;
+  data?: Record<string, unknown> | null;
+}
+
+export interface AIUIControlState {
+  /** Whether the WebSocket is connected */
+  connected: boolean;
+  /** Currently executing command (for visual indication) */
+  activeCommand: UICommand | null;
+  /** History of recent commands (last 50) */
+  commandHistory: UICommand[];
+  /** Whether AI is currently controlling the UI (for visual indicator) */
+  aiActive: boolean;
+  /** Last feedback received */
+  lastFeedback: UICommandFeedback | null;
+  /** Active modal state (controlled by AI) */
+  activeModal: string | null;
+  /** Active tab state (controlled by AI) */
+  activeTab: string | null;
+  /** Pending filter to apply */
+  pendingFilter: { entity: string; filter: Record<string, unknown> } | null;
+  /** Pending settings change */
+  pendingSettings: { section: string; key: string; value: unknown } | null;
+
+  setConnected: (connected: boolean) => void;
+  setActiveCommand: (cmd: UICommand | null) => void;
+  addCommandToHistory: (cmd: UICommand) => void;
+  setAIActive: (active: boolean) => void;
+  setLastFeedback: (feedback: UICommandFeedback | null) => void;
+  setActiveModal: (modal: string | null) => void;
+  setActiveTab: (tab: string | null) => void;
+  setPendingFilter: (filter: { entity: string; filter: Record<string, unknown> } | null) => void;
+  setPendingSettings: (settings: { section: string; key: string; value: unknown } | null) => void;
+  clearPending: () => void;
+}
+
+export const useAIUIControlStore = create<AIUIControlState>((set) => ({
+  connected: false,
+  activeCommand: null,
+  commandHistory: [],
+  aiActive: false,
+  lastFeedback: null,
+  activeModal: null,
+  activeTab: null,
+  pendingFilter: null,
+  pendingSettings: null,
+
+  setConnected: (connected) => set({ connected }),
+  setActiveCommand: (cmd) => set({ activeCommand: cmd, aiActive: cmd !== null }),
+  addCommandToHistory: (cmd) =>
+    set((s) => ({
+      commandHistory: [...s.commandHistory, cmd].slice(-50),
+    })),
+  setAIActive: (active) => set({ aiActive: active }),
+  setLastFeedback: (feedback) => set({ lastFeedback: feedback }),
+  setActiveModal: (modal) => set({ activeModal: modal }),
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  setPendingFilter: (filter) => set({ pendingFilter: filter }),
+  setPendingSettings: (settings) => set({ pendingSettings: settings }),
+  clearPending: () =>
+    set({ pendingFilter: null, pendingSettings: null, activeCommand: null, aiActive: false }),
+}));