+
+
,
+ onClick: handleContinue,
+ title: 'Workflow fortsetzen',
+ }
+ ]}
+ onDelete={handleDelete}
+ hookData={{
+ refetch,
+ permissions,
+ pagination,
+ handleDelete,
+ handleInlineUpdate,
+ }}
+ />
+
+ );
+};
+```
+
+### Phase 3: Automations Page
+
+**Analog zu Workflows Page:**
+1. Hook erweitern: `useAutomationsAdmin()`
+2. Page umschreiben mit `FormGeneratorTable`
+3. Custom Actions: Execute, Toggle Active
+
+### Phase 4: Prompts Page
+
+**Spezifische Anpassungen:**
+1. Hook erweitern: `usePromptsAdmin()`
+2. Page umschreiben mit `FormGeneratorTable`
+3. Create/Edit Modal mit `FormGeneratorForm`
+4. Content-Feld als Textarea
+
+### Phase 5: Files Page
+
+**Spezifische Anpassungen:**
+1. Hook erweitern: `useFilesAdmin()`
+2. Page umschreiben mit `FormGeneratorTable`
+3. Custom Actions: Download, Preview
+4. Upload-Button mit `UploadButton`-Komponente
+
+### Phase 6: Connections Page
+
+**Spezifische Anpassungen:**
+1. Hook erweitern: `useConnectionsAdmin()`
+2. Page umschreiben mit `FormGeneratorTable`
+3. Custom Actions: Connect, Refresh Token
+4. Provider-spezifische Buttons (Google, Microsoft)
+
+---
+
+## 4. Detaillierte Änderungsliste
+
+### 4.1 Zu erstellende Dateien
+
+```
+frontend_nyla/src/
+├── hooks/
+│ └── useResizablePanels.ts # NEU: Hook für resizable panels
+├── components/
+│ └── Playground/
+│ ├── index.ts
+│ ├── Playground.module.css # NEU: Layout-Styles inkl. Divider
+│ ├── WorkflowDashboard/
+│ │ ├── index.ts
+│ │ ├── WorkflowDashboard.tsx # Logik aus workflowUiRendererDashboard.js
+│ │ ├── WorkflowDashboard.module.css
+│ │ ├── DashboardRound.tsx
+│ │ ├── DashboardOperation.tsx
+│ │ └── DashboardProgressBar.tsx
+│ ├── UnifiedContentArea/
+│ │ ├── index.ts
+│ │ ├── UnifiedContentArea.tsx # Logik aus workflowUiRenderer.js
+│ │ ├── UnifiedContentArea.module.css
+│ │ ├── MessageItem.tsx
+│ │ └── LogItem.tsx
+│ ├── UserInputArea/
+│ │ ├── index.ts
+│ │ ├── UserInputArea.tsx # Logik aus workflow.js + part_workflow.html
+│ │ ├── UserInputArea.module.css
+│ │ ├── PromptSelector.tsx
+│ │ ├── WorkflowModeSelector.tsx
+│ │ └── VoiceRecordButton.tsx
+│ ├── WorkflowControls/
+│ │ ├── index.ts
+│ │ ├── WorkflowControls.tsx # Logik aus workflowUiControls.js
+│ │ └── WorkflowControls.module.css
+│ └── DataStatistics/
+│ ├── index.ts
+│ ├── DataStatistics.tsx
+│ └── DataStatistics.module.css
+```
+
+> **Hinweis:** Alle `.module.css` Dateien sollen bestehende Nyla CSS-Variablen nutzen
+> und sich nahtlos ins bestehende Design einfügen!
+
+### 4.2 Zu ändernde Dateien
+
+| Datei | Änderung |
+|-------|----------|
+| `pages/workflows/PlaygroundPage.tsx` | Kompletter Rewrite mit neuen Komponenten |
+| `pages/workflows/WorkflowsPage.tsx` | Umschreiben auf FormGeneratorTable |
+| `pages/workflows/AutomationsPage.tsx` | Umschreiben auf FormGeneratorTable |
+| `pages/basedata/PromptsPage.tsx` | Umschreiben auf FormGeneratorTable |
+| `pages/basedata/FilesPage.tsx` | Umschreiben auf FormGeneratorTable |
+| `pages/basedata/ConnectionsPage.tsx` | Umschreiben auf FormGeneratorTable |
+| `hooks/useWorkflows.ts` | Admin-Hook hinzufügen |
+| `hooks/useAutomations.ts` | Admin-Hook hinzufügen |
+| `hooks/usePrompts.ts` | Admin-Hook hinzufügen |
+| `hooks/useFiles.ts` | Admin-Hook hinzufügen |
+| `hooks/useConnections.ts` | Admin-Hook hinzufügen |
+
+### 4.3 CSS-Anpassungen
+
+**Neue CSS-Module:**
+- `Playground.module.css` - Hauptlayout
+- `WorkflowDashboard.module.css` - Dashboard-Styles
+- `UnifiedContentArea.module.css` - Content-Styles
+
+**Bestehende zu aktualisieren:**
+- `WorkflowPages.module.css` - Für alle Workflow-Seiten
+
+---
+
+## 5. API-Endpunkte (bereits vorhanden)
+
+| Endpunkt | Verwendung |
+|----------|------------|
+| `/api/workflows/` | Liste, CRUD |
+| `/api/workflows/{id}` | Einzelner Workflow |
+| `/api/workflows/{id}/chat-data` | Unified Chat-Daten |
+| `/api/automations/` | Liste, CRUD |
+| `/api/prompts/` | Liste, CRUD |
+| `/api/files/` | Liste, CRUD |
+| `/api/connections/` | Liste, CRUD |
+| `/api/attributes/{EntityType}` | Attribute-Definitionen |
+| `/api/options/workflow.mode` | Workflow-Modus-Enum |
+
+---
+
+## 6. Migrations-Checkliste
+
+### Chat Playground
+- [ ] `useResizablePanels` Hook erstellen
+- [ ] Resizable Spalten-Layout implementieren (mit Drag-Divider)
+- [ ] WorkflowDashboard-Komponente erstellen (Logik aus frontend_agents, Nyla-Styles)
+- [ ] UnifiedContentArea-Komponente erstellen (Logik aus frontend_agents, Nyla-Styles)
+- [ ] UserInputArea mit allen Features erstellen (Nyla Input-Styles)
+- [ ] DataStatistics-Komponente erstellen (Nyla-Styles)
+- [ ] Polling integrieren (bestehende Hooks nutzen)
+- [ ] File-Upload mit Drag & Drop (bestehende DragDropOverlay nutzen)
+- [ ] Voice-Recording integrieren
+- [ ] LocalStorage-Persistenz für Panel-Breite
+
+### Workflows Page
+- [ ] Hook `useWorkflowsAdmin` erstellen
+- [ ] Page auf FormGeneratorTable umstellen
+- [ ] Action Buttons konfigurieren
+- [ ] RBAC-Permissions implementieren
+
+### Automations Page
+- [ ] Hook `useAutomationsAdmin` erstellen
+- [ ] Page auf FormGeneratorTable umstellen
+- [ ] Toggle Active implementieren
+- [ ] Execute-Action implementieren
+
+### Prompts Page
+- [ ] Hook `usePromptsAdmin` erstellen
+- [ ] Page auf FormGeneratorTable umstellen
+- [ ] Create/Edit Modals mit FormGeneratorForm
+- [ ] Content-Textarea korrekt anzeigen
+
+### Files Page
+- [ ] Hook `useFilesAdmin` erstellen
+- [ ] Page auf FormGeneratorTable umstellen
+- [ ] Download/Preview Actions
+- [ ] Upload-Button integrieren
+
+### Connections Page
+- [ ] Hook `useConnectionsAdmin` erstellen
+- [ ] Page auf FormGeneratorTable umstellen
+- [ ] Connect/Refresh Actions
+- [ ] Provider-spezifische Buttons
+
+---
+
+## 7. Schätzung Aufwand
+
+| Phase | Aufwand | Priorität |
+|-------|---------|-----------|
+| Phase 1: Chat Playground | Hoch | KRITISCH |
+| Phase 2: Workflows Page | Mittel | Hoch |
+| Phase 3: Automations Page | Mittel | Hoch |
+| Phase 4: Prompts Page | Niedrig | Mittel |
+| Phase 5: Files Page | Niedrig | Mittel |
+| Phase 6: Connections Page | Niedrig | Mittel |
+
+---
+
+## 8. Anhang: Pattern-Referenz
+
+### Standard-Page-Struktur
+
+```tsx
+import React, { useState, useMemo } from 'react';
+import { FormGeneratorTable, FormGeneratorForm } from '../../components/FormGenerator';
+import { useEntityAdmin, useEntityOperations } from '../../hooks/useEntity';
+import styles from './Page.module.css';
+
+interface Entity {
+ id: string;
+ [key: string]: any;
+}
+
+export const EntityPage: React.FC = () => {
+ // Hooks
+ const {
+ data,
+ attributes,
+ columns,
+ permissions,
+ pagination,
+ loading,
+ error,
+ refetch,
+ fetchById,
+ handleInlineUpdate,
+ updateOptimistically,
+ } = useEntityAdmin();
+
+ const {
+ handleCreate,
+ handleUpdate,
+ handleDelete,
+ } = useEntityOperations();
+
+ // State
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [editingItem, setEditingItem] = useState