wiki/c-work/4-done/2026-03-codeeditor-phase1.md
2026-06-02 09:42:12 +02:00

5.2 KiB

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
platform-core/modules/features/codeeditor/__init__.py Package init
platform-core/modules/features/codeeditor/datamodelCodeeditor.py Pydantic Models: FileContext, ResponseSegment, FileEditProposal, FileVersion, MIME-Type Validierung
platform-core/modules/features/codeeditor/mainCodeeditor.py Feature-Registration: RBAC UI/Resource Objects, Template Roles (Plug&Play)
platform-core/modules/features/codeeditor/fileContextManager.py Text-Dateien aus DB laden, MIME-Type filtern
platform-core/modules/features/codeeditor/promptAssembly.py System Prompt Builder mit Datei-Kontext und Format-Instruktionen
platform-core/modules/features/codeeditor/responseParser.py AI-Antwort in typisierte Segmente parsen (text, code_block, file_edit)
platform-core/modules/features/codeeditor/codeEditorProcessor.py Orchestrator: Files laden -> Prompt bauen -> AI call -> Parse -> SSE emit
platform-core/modules/features/codeeditor/routeFeatureCodeeditor.py 8 FastAPI Endpoints inkl. SSE Stream

Frontend (Nyla UI)

Datei Beschreibung
ui-nyla/src/pages/views/codeeditor/CodeEditorPage.tsx Drei-Panel-Layout mit resizable Panels
ui-nyla/src/pages/views/codeeditor/FileListPanel.tsx Datei-Auswahl mit Checkboxen
ui-nyla/src/pages/views/codeeditor/DiffPreviewPanel.tsx Diff-Anzeige mit Accept/Reject
ui-nyla/src/pages/views/codeeditor/useCodeEditor.ts SSE Hook mit Auth/CSRF, File-Selection, Edit-State
ui-nyla/src/pages/views/codeeditor/CodeEditor.module.css Styling
ui-nyla/src/pages/views/codeeditor/index.ts Export

Geaenderte Dateien

Datei Aenderung
platform-core/modules/datamodels/datamodelChat.py WORKFLOW_CODEEDITOR = "CodeEditor" zu WorkflowModeEnum hinzugefuegt
platform-core/modules/routes/routeSystem.py codeeditor in _getFeatureUiObjects() fuer Navigation API
platform-core/modules/system/mainSystem.py Store-Resource resource.store.codeeditor
platform-core/modules/interfaces/interfaceBootstrap.py resource.store.codeeditor in storeResources
ui-nyla/src/pages/FeatureView.tsx Import + codeeditor in VIEW_COMPONENTS Registry
ui-nyla/src/config/pageRegistry.tsx feature.codeeditor Icon (FaFileAlt)
ui-nyla/src/types/mandate.ts codeeditor in FEATURE_REGISTRY mit Views
ui-nyla/src/pages/Store.tsx Icon + Beschreibung fuer Feature Store
ui-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)