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

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)