wiki/c-work/4-done/2026-03-codeeditor-phase1.md

85 lines
5.2 KiB
Markdown

# 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)