# PR: CodeEditor Feature - Phase 1 (MVP) ## Summary Neues Feature "CodeEditor" -- Cursor-artiger AI-gestuetzter Text-Editor als eigenstaendiges Feature im Gateway mit Frontend-Integration in Nyla UI. Komplett unabhaengig vom bestehenden Workflow-System (Option B). - Eigenstaendiger Verarbeitungspfad in `features/codeeditor/` ohne Eingriff in `workflowManager.py` - AI-Aufrufe direkt ueber `interfaceAiObjects.callWithTextContext()` mit voller Model Selection, Failover und Billing - SSE-Streaming via bestehender `EventManager`-Infrastruktur aus dem Chatbot-Feature - Frontend: Drei-Panel-Layout (FileList, Chat, DiffPreview) mit Accept/Reject fuer Datei-Aenderungen - Phase 1 = Single-Shot Mode (1 AI Call pro Prompt). Phase 2 (Agent Loop mit Tool Calling) ist geplant. ## Neue Dateien ### Backend (Gateway) | Datei | Beschreibung | |---|---| | `gateway/modules/features/codeeditor/__init__.py` | Package init | | `gateway/modules/features/codeeditor/datamodelCodeeditor.py` | Pydantic Models: FileContext, ResponseSegment, FileEditProposal, FileVersion, MIME-Type Validierung | | `gateway/modules/features/codeeditor/mainCodeeditor.py` | Feature-Registration: RBAC UI/Resource Objects, Template Roles (Plug&Play) | | `gateway/modules/features/codeeditor/fileContextManager.py` | Text-Dateien aus DB laden, MIME-Type filtern | | `gateway/modules/features/codeeditor/promptAssembly.py` | System Prompt Builder mit Datei-Kontext und Format-Instruktionen | | `gateway/modules/features/codeeditor/responseParser.py` | AI-Antwort in typisierte Segmente parsen (text, code_block, file_edit) | | `gateway/modules/features/codeeditor/codeEditorProcessor.py` | Orchestrator: Files laden -> Prompt bauen -> AI call -> Parse -> SSE emit | | `gateway/modules/features/codeeditor/routeFeatureCodeeditor.py` | 8 FastAPI Endpoints inkl. SSE Stream | ### Frontend (Nyla UI) | Datei | Beschreibung | |---|---| | `frontend_nyla/src/pages/views/codeeditor/CodeEditorPage.tsx` | Drei-Panel-Layout mit resizable Panels | | `frontend_nyla/src/pages/views/codeeditor/FileListPanel.tsx` | Datei-Auswahl mit Checkboxen | | `frontend_nyla/src/pages/views/codeeditor/DiffPreviewPanel.tsx` | Diff-Anzeige mit Accept/Reject | | `frontend_nyla/src/pages/views/codeeditor/useCodeEditor.ts` | SSE Hook mit Auth/CSRF, File-Selection, Edit-State | | `frontend_nyla/src/pages/views/codeeditor/CodeEditor.module.css` | Styling | | `frontend_nyla/src/pages/views/codeeditor/index.ts` | Export | ## Geaenderte Dateien | Datei | Aenderung | |---|---| | `gateway/modules/datamodels/datamodelChat.py` | `WORKFLOW_CODEEDITOR = "CodeEditor"` zu `WorkflowModeEnum` hinzugefuegt | | `gateway/modules/routes/routeSystem.py` | `codeeditor` in `_getFeatureUiObjects()` fuer Navigation API | | `gateway/modules/system/mainSystem.py` | Store-Resource `resource.store.codeeditor` | | `gateway/modules/interfaces/interfaceBootstrap.py` | `resource.store.codeeditor` in `storeResources` | | `frontend_nyla/src/pages/FeatureView.tsx` | Import + `codeeditor` in `VIEW_COMPONENTS` Registry | | `frontend_nyla/src/config/pageRegistry.tsx` | `feature.codeeditor` Icon (FaFileAlt) | | `frontend_nyla/src/types/mandate.ts` | `codeeditor` in `FEATURE_REGISTRY` mit Views | | `frontend_nyla/src/pages/Store.tsx` | Icon + Beschreibung fuer Feature Store | | `frontend_nyla/src/App.tsx` | Route `editor` fuer CodeEditorPage | ## API Endpoints | Endpoint | Methode | Beschreibung | |---|---|---| | `/api/codeeditor/{instanceId}/start/stream` | POST | Workflow starten + SSE-Stream | | `/api/codeeditor/{instanceId}/{workflowId}/stop` | POST | Workflow stoppen | | `/api/codeeditor/{instanceId}/{workflowId}/chatData` | GET | Polling-Fallback | | `/api/codeeditor/{instanceId}/workflows` | GET | Workflows auflisten | | `/api/codeeditor/{instanceId}/files` | GET | Text-Dateien auflisten | | `/api/codeeditor/{instanceId}/files/{fileId}/content` | GET | Datei-Inhalt laden | | `/api/codeeditor/{instanceId}/{workflowId}/apply` | POST | Aenderung akzeptieren | ## Architektur-Entscheide - **Option B**: Eigenstaendiger Pfad, kein Eingriff in WorkflowManager/WorkflowProcessor - **AI-Zugriff**: Direkt ueber `interfaceAiObjects.callWithTextContext()` -- nutzt bestehende Model Selection, Failover, Provider-Filtering, Billing - **SSE**: Segment-weise Emission (nicht token-weise), da aicore aktuell kein Token-Streaming hat - **Feature-Discovery**: Plug&Play via `mainCodeeditor.py` + `routeFeatureCodeeditor.py` (automatisch entdeckt durch `registry.py`) ## Test Plan - [ ] Gateway startet ohne Fehler mit neuem Feature - [ ] Feature erscheint im Feature Store und kann aktiviert werden - [ ] Navigation zeigt CodeEditor-Instanz mit Icon und Views (Editor, Workflows) - [ ] Editor-View laedt: FileList links, Chat mitte, DiffPreview rechts - [ ] Panel-Divider sind verschiebbar - [ ] Text-Dateien werden in FileList angezeigt (nur text-basierte MIME-Types) - [ ] Chat-Prompt mit ausgewaehlten Dateien sendet SSE-Request - [ ] AI-Antwort wird als Chat-Nachrichten gerendert - [ ] file_edit Vorschlaege erscheinen im DiffPreview Panel - [ ] Accept/Reject Buttons funktionieren (Accept ueberschreibt Datei in DB) - [ ] Follow-Up Prompts nutzen bestehenden Workflow (kein neuer Workflow pro Message) - [ ] Keine Auswirkungen auf bestehende Features (Chatplayground, Automation, Chatbot, Teamsbot)