feat: Workspace-Umbau Schritt 5 — Live-Code-Editor + code_file-Strom

Durchgaengiger Live-Editor fuer Code-Projekte: - App: selbstenthaltener Highlight-Editor in einer WebView (editorHtml.ts, Textarea + Regex-Highlight-Layer, voll offline). CodeEditorTile mit Datei-Tabs, verdrahtet mit dem codeFile-Spiegel; Bridge-Protokoll setContent/applyPatch/ setReadOnly ↔ onEditFromUser. - Proxy-Hook (routes.js): faengt ARIAs Write/Edit/MultiEdit unter /shared/projects/<pid>/ ab und postet den Volltext bei Erfolg an /internal/code-file. tool_use_id→file_path-Korrelation, liest die Datei aus dem gemounteten /shared. - Bridge: /internal/code-file relayt als RVS code_file an die App; eingehende code_file_edit schreiben den Volltext pfad-sicher nach /shared/projects/<pid>/ (_write_project_file, kein Ausbruch via ..). Arbeitsverzeichnis fuer Code-Projekte = /shared/projects/<projectId>/ (in proxy/ bridge/brain gemountet, kein SSH noetig). tsc/py/js clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-16 23:53:48 +02:00
parent 85363b1014
commit a6cb152f55
4 changed files with 388 additions and 12 deletions
@@ -0,0 +1,167 @@
+/**
+ * editorHtml — selbstenthaltener Live-Code-Editor fuer die WebView (offline,
+ * kein CDN/Bundler). Eine transparente <textarea> ueber einer <pre>-Highlight-
+ * Ebene: man sieht Syntax-Highlighting UND kann tippen. Bewusst leichtgewichtig
+ * (Regex-Highlighter fuer C-artige/JS/Python/Shell), damit es ohne Build-Schritt
+ * inline passt.
+ *
+ * Bridge-Protokoll:
+ *   RN -> WebView  window.ariaBridge.onMessage(jsonString):
+ *     {cmd:'setContent', content, language, version}
+ *     {cmd:'applyPatch', from, to, insert, version}
+ *     {cmd:'setLanguage', language}
+ *     {cmd:'setReadOnly', value}
+ *   WebView -> RN  window.ReactNativeWebView.postMessage(jsonString):
+ *     {event:'ready'}
+ *     {event:'onEditFromUser', from, to, insert, fullText, version}
+ */
+
+export const EDITOR_HTML = `<!doctype html><html><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; background: #0D0D1A; }
+  #wrap { position: relative; height: 100%; width: 100%; }
+  #hl, #ed {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    margin: 0; border: 0; padding: 10px 12px;
+    font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.45;
+    white-space: pre; word-wrap: normal; overflow: auto; tab-size: 2;
+  }
+  #hl { color: #C8C8E0; z-index: 1; pointer-events: none; }
+  #ed {
+    z-index: 2; color: transparent; background: transparent; caret-color: #0096FF;
+    resize: none; outline: none;
+    -webkit-text-fill-color: transparent;
+  }
+  #ed::selection { background: rgba(0,150,255,0.3); }
+  .tok-cmt { color: #6A7A6A; font-style: italic; }
+  .tok-str { color: #C6A972; }
+  .tok-num { color: #B58BE0; }
+  .tok-kw  { color: #4F9CE8; font-weight: bold; }
+</style></head><body>
+<div id="wrap">
+  <pre id="hl"></pre>
+  <textarea id="ed" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
+</div>
+<script>
+(function(){
+  var ed = document.getElementById('ed');
+  var hl = document.getElementById('hl');
+  var lang = 'text';
+  var version = 0;
+  var lastValue = '';
+  var applyingProgrammatic = false;
+
+  var KW = {
+    common: ['if','else','for','while','do','return','break','continue','switch','case','default','function','var','let','const','class','new','this','import','from','export','try','catch','finally','throw','typeof','instanceof','void','delete','in','of','yield','async','await','def','elif','end','then','fi','esac','local','echo','extends','implements','interface','public','private','protected','static','struct','enum','include','define','null','true','false','undefined','None','True','False','print','with','as','pass','lambda','not','and','or','is']
+  };
+
+  function esc(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+
+  function highlight(code){
+    // Token-Scan: Kommentare, Strings, Zahlen, Keywords. Bewusst simpel.
+    var out = '';
+    var i = 0, n = code.length;
+    var kwRe = /[A-Za-z_][A-Za-z0-9_]*/;
+    while(i < n){
+      var c = code[i];
+      var two = code.substr(i,2);
+      // Zeilenkommentar // oder #
+      if(two === '//' || (c === '#')){
+        var j = code.indexOf('\\n', i); if(j<0) j=n;
+        out += '<span class="tok-cmt">'+esc(code.slice(i,j))+'</span>'; i=j; continue;
+      }
+      // Blockkommentar
+      if(two === '/*'){
+        var k = code.indexOf('*/', i+2); k = (k<0)? n : k+2;
+        out += '<span class="tok-cmt">'+esc(code.slice(i,k))+'</span>'; i=k; continue;
+      }
+      // Strings
+      if(c === '"' || c === "'" || c === '\`'){
+        var q=c, m=i+1;
+        while(m<n){ if(code[m]==='\\\\'){m+=2;continue;} if(code[m]===q){m++;break;} m++; }
+        out += '<span class="tok-str">'+esc(code.slice(i,m))+'</span>'; i=m; continue;
+      }
+      // Zahl
+      if(c>='0' && c<='9'){
+        var p=i+1; while(p<n && /[0-9a-fA-F.xX_]/.test(code[p])) p++;
+        out += '<span class="tok-num">'+esc(code.slice(i,p))+'</span>'; i=p; continue;
+      }
+      // Wort / Keyword
+      if(/[A-Za-z_]/.test(c)){
+        var rest = code.slice(i);
+        var mm = rest.match(kwRe);
+        var w = mm[0];
+        if(KW.common.indexOf(w) >= 0){ out += '<span class="tok-kw">'+esc(w)+'</span>'; }
+        else { out += esc(w); }
+        i += w.length; continue;
+      }
+      out += esc(c); i++;
+    }
+    return out;
+  }
+
+  function render(){
+    hl.innerHTML = highlight(ed.value) + '\\n';
+    hl.scrollTop = ed.scrollTop; hl.scrollLeft = ed.scrollLeft;
+  }
+
+  function post(obj){ if(window.ReactNativeWebView) window.ReactNativeWebView.postMessage(JSON.stringify(obj)); }
+
+  // Minimalen Diff (gemeinsamer Prefix/Suffix) zwischen alt und neu.
+  function diff(a, b){
+    var s = 0; var maxS = Math.min(a.length, b.length);
+    while(s < maxS && a[s] === b[s]) s++;
+    var e = 0;
+    while(e < (maxS - s) && a[a.length-1-e] === b[b.length-1-e]) e++;
+    return { from: s, to: a.length - e, insert: b.slice(s, b.length - e) };
+  }
+
+  var editTimer = null;
+  ed.addEventListener('input', function(){
+    render();
+    if(applyingProgrammatic) return;
+    if(editTimer) clearTimeout(editTimer);
+    editTimer = setTimeout(function(){
+      var nv = ed.value;
+      var d = diff(lastValue, nv);
+      lastValue = nv; version++;
+      post({ event:'onEditFromUser', from:d.from, to:d.to, insert:d.insert, fullText:nv, version:version });
+    }, 160);
+  });
+  ed.addEventListener('scroll', function(){ hl.scrollTop=ed.scrollTop; hl.scrollLeft=ed.scrollLeft; });
+
+  window.ariaBridge = {
+    onMessage: function(json){
+      var m; try { m = JSON.parse(json); } catch(e){ return; }
+      if(m.cmd === 'setContent'){
+        applyingProgrammatic = true;
+        ed.value = m.content || '';
+        lastValue = ed.value;
+        if(typeof m.version === 'number') version = m.version;
+        if(m.language) lang = m.language;
+        render();
+        applyingProgrammatic = false;
+      } else if(m.cmd === 'applyPatch'){
+        applyingProgrammatic = true;
+        var v = ed.value;
+        var from = Math.max(0, Math.min(m.from, v.length));
+        var to = Math.max(from, Math.min(m.to, v.length));
+        ed.value = v.slice(0, from) + (m.insert||'') + v.slice(to);
+        lastValue = ed.value;
+        if(typeof m.version === 'number') version = m.version;
+        render();
+        applyingProgrammatic = false;
+      } else if(m.cmd === 'setLanguage'){
+        lang = m.language || 'text'; render();
+      } else if(m.cmd === 'setReadOnly'){
+        ed.readOnly = !!m.value;
+      }
+    }
+  };
+
+  render();
+  post({ event:'ready' });
+})();
+</script></body></html>`;
@@ -1,30 +1,128 @@
 /**
- * CodeEditorTile — Live-Code-Editor (CodeMirror in einer WebView).
- * Platzhalter fuer Commit 4; die CodeMirror-Bridge folgt in Commit 5.
+ * CodeEditorTile — Live-Code-Editor (WebView, editorHtml.ts).
+ *
+ * Zeigt live, was ARIA in diesem Projekt schreibt (aus dem codeFile-Spiegel)
+ * und laesst Stefan selbst editieren — Aenderungen gehen als code_file_edit
+ * zurueck an die Bridge. Datei-Tabs oben zum Umschalten.
 */

-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import codeFile, { CodeFileState } from '../../services/codeFile';
+import { EDITOR_HTML } from '../assets/editorHtml';

 interface Props {
  projectId: string;
 }

-const CodeEditorTile: React.FC<Props> = () => {
+const CodeEditorTile: React.FC<Props> = ({ projectId }) => {
+  const webRef = useRef<WebView>(null);
+  const [files, setFiles] = useState<CodeFileState[]>(() => codeFile.getFiles(projectId));
+  const [currentPath, setCurrentPath] = useState<string | null>(files[0]?.path ?? null);
+
+  const readyRef = useRef(false);
+  const currentPathRef = useRef<string | null>(currentPath);
+  currentPathRef.current = currentPath;
+
+  const sendToWeb = useCallback((payload: Record<string, unknown>) => {
+    const js = `window.ariaBridge && window.ariaBridge.onMessage(${JSON.stringify(JSON.stringify(payload))}); true;`;
+    webRef.current?.injectJavaScript(js);
+  }, []);
+
+  const loadFileIntoEditor = useCallback((path: string | null) => {
+    if (!path) { sendToWeb({ cmd: 'setContent', content: '', language: 'text', version: 0 }); return; }
+    const f = codeFile.getFile(projectId, path);
+    sendToWeb({ cmd: 'setContent', content: f?.content ?? '', language: f?.language ?? 'text', version: f?.version ?? 0 });
+  }, [projectId, sendToWeb]);
+
+  // Projektwechsel: Dateiliste + Auswahl neu.
+  useEffect(() => {
+    const list = codeFile.getFiles(projectId);
+    setFiles(list);
+    setCurrentPath((prev) => (prev && list.some((f) => f.path === prev) ? prev : list[0]?.path ?? null));
+  }, [projectId]);
+
+  // Eingehende Updates aus dem Spiegel.
+  useEffect(() => {
+    return codeFile.subscribe((u) => {
+      if ((u.projectId || '') !== (projectId || '')) return;
+      setFiles(codeFile.getFiles(projectId));
+      // Noch keine Datei gewaehlt → diese oeffnen.
+      if (!currentPathRef.current) { setCurrentPath(u.path); return; }
+      if (u.path !== currentPathRef.current) return;
+      if (!readyRef.current) return;
+      if (u.patch) {
+        sendToWeb({ cmd: 'applyPatch', from: u.patch.from, to: u.patch.to, insert: u.patch.insert, version: u.version });
+      } else {
+        sendToWeb({ cmd: 'setContent', content: u.content ?? '', language: u.language, version: u.version });
+      }
+    });
+  }, [projectId, sendToWeb]);
+
+  // Datei-Auswahl gewechselt → in den Editor laden (falls WebView bereit).
+  useEffect(() => {
+    if (readyRef.current) loadFileIntoEditor(currentPath);
+  }, [currentPath, loadFileIntoEditor]);
+
+  const onMessage = useCallback((e: WebViewMessageEvent) => {
+    let m: any;
+    try { m = JSON.parse(e.nativeEvent.data); } catch { return; }
+    if (m.event === 'ready') {
+      readyRef.current = true;
+      loadFileIntoEditor(currentPathRef.current);
+    } else if (m.event === 'onEditFromUser') {
+      const path = currentPathRef.current;
+      if (!path) return;
+      codeFile.sendEdit(projectId, path, { from: m.from, to: m.to, insert: m.insert }, m.fullText, m.version);
+    }
+  }, [projectId, loadFileIntoEditor]);
+
  return (
    <View style={styles.container}>
-      <Text style={styles.icon}>📝</Text>
-      <Text style={styles.text}>Code-Editor</Text>
-      <Text style={styles.sub}>Wird geladen …</Text>
+      <View style={styles.tabsRow}>
+        {files.length === 0 ? (
+          <Text style={styles.noFiles}>Noch keine Datei</Text>
+        ) : (
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabs}>
+            {files.map((f) => {
+              const active = f.path === currentPath;
+              const name = f.path.split('/').pop() || f.path;
+              return (
+                <TouchableOpacity key={f.path} onPress={() => setCurrentPath(f.path)} style={[styles.tab, active && styles.tabActive]}>
+                  <Text style={[styles.tabText, active && styles.tabTextActive]} numberOfLines={1}>{name}</Text>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        )}
+      </View>
+      <WebView
+        ref={webRef}
+        style={styles.web}
+        originWhitelist={['*']}
+        source={{ html: EDITOR_HTML, baseUrl: '' }}
+        onMessage={onMessage}
+        javaScriptEnabled
+        domStorageEnabled
+        keyboardDisplayRequiresUserAction={false}
+        androidLayerType="hardware"
+        setBuiltInZoomControls={false}
+      />
    </View>
  );
 };

 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#0D0D1A', alignItems: 'center', justifyContent: 'center' },
-  icon: { fontSize: 64, marginBottom: 16 },
-  text: { color: '#FFFFFF', fontSize: 18, fontWeight: '700' },
-  sub: { color: '#9090B0', fontSize: 14, marginTop: 8 },
+  container: { flex: 1, backgroundColor: '#0D0D1A' },
+  tabsRow: { height: 40, backgroundColor: '#12122A', borderBottomColor: '#1E1E2E', borderBottomWidth: 1, justifyContent: 'center' },
+  tabs: { alignItems: 'center', paddingHorizontal: 6 },
+  noFiles: { color: '#9090B0', fontSize: 13, paddingHorizontal: 12 },
+  tab: { paddingHorizontal: 12, paddingVertical: 6, marginHorizontal: 3, borderRadius: 12, backgroundColor: '#0D0D1A', maxWidth: 180 },
+  tabActive: { backgroundColor: '#0096FF' },
+  tabText: { color: '#9090B0', fontSize: 12, fontWeight: '600' },
+  tabTextActive: { color: '#FFFFFF' },
+  web: { flex: 1, backgroundColor: '#0D0D1A' },
 });

 export default CodeEditorTile;
@@ -3351,6 +3351,19 @@ class ARIABridge:
                    logger.info("[rvs] flux-bridge -> %s", state)
            return

+        elif msg_type == "code_file_edit":
+            # Stefan hat im Live-Editor getippt → Datei im Projekt-Arbeits-
+            # verzeichnis (/shared/projects/<pid>/) mit dem Volltext ueberschreiben.
+            # ARIA sieht die Aenderung beim naechsten Read.
+            pid = str(payload.get("projectId") or "")
+            rel = (payload.get("path") or "").strip()
+            full_text = payload.get("fullText")
+            if rel and isinstance(full_text, str):
+                ok = self._write_project_file(pid, rel, full_text)
+                logger.info("[rvs] code_file_edit %s/%s (%d chars) → %s",
+                            pid or "main", rel, len(full_text), "ok" if ok else "abgelehnt")
+            return
+
        elif msg_type == "config_request":
            # Eine andere Bridge (whisper/f5tts) bittet um die aktuelle Voice-
            # Config — passiert wenn sie sich connected, weil sie sonst die
@@ -4192,6 +4205,33 @@ class ARIABridge:
                        "timestamp": int(time.time() * 1000),
                    }))
                    await _send_response(writer, 200, {"ok": True})
+                elif method == "POST" and path == "/internal/code-file":
+                    # Vom Proxy-Hook gefeuert wenn ARIA in einem Code-Projekt eine
+                    # Datei schreibt/aendert. Wir spiegeln das als RVS code_file an
+                    # die App (Live-Code-Editor). payload: {projectId, path,
+                    # language?, content?, patch?, version?}.
+                    try:
+                        data = json.loads(body.decode("utf-8", "ignore"))
+                    except Exception as exc:
+                        await _send_response(writer, 400, {"error": f"bad json: {exc}"})
+                        return
+                    fpath = (data.get("path") or "").strip()
+                    if not fpath:
+                        await _send_response(writer, 400, {"error": "path erforderlich"})
+                        return
+                    asyncio.create_task(self._send_to_rvs({
+                        "type": "code_file",
+                        "payload": {
+                            "projectId": str(data.get("projectId") or ""),
+                            "path": fpath,
+                            "language": data.get("language") or "",
+                            "content": data.get("content"),
+                            "patch": data.get("patch"),
+                            "version": data.get("version") or 0,
+                        },
+                        "timestamp": int(time.time() * 1000),
+                    }))
+                    await _send_response(writer, 200, {"ok": True})
                elif method == "POST" and path == "/internal/flux-generate":
                    # Vom Brain (flux_generate-Tool) gefeuert. Wir routen den
                    # Render-Request via RVS an die flux-bridge (Gamebox),
@@ -4301,6 +4341,28 @@ class ARIABridge:
        except Exception:
            logger.exception("[bridge] Internal HTTP-Listener konnte nicht starten")

+    def _write_project_file(self, project_id: str, rel_path: str, content: str) -> bool:
+        """Schreibt content nach /shared/projects/<project_id>/<rel_path>.
+
+        Pfad-sicher: rel_path darf nicht aus dem Projekt-Basisverzeichnis
+        ausbrechen (kein .., kein absoluter Pfad). Legt Verzeichnisse an.
+        """
+        try:
+            base = Path("/shared/projects") / (project_id or "main")
+            base = base.resolve()
+            target = (base / rel_path).resolve()
+            if base != target and base not in target.parents:
+                logger.warning("[code_file] Pfad ausserhalb Projekt abgelehnt: %s", rel_path)
+                return False
+            target.parent.mkdir(parents=True, exist_ok=True)
+            tmp = target.with_suffix(target.suffix + ".tmp")
+            tmp.write_text(content, encoding="utf-8")
+            tmp.replace(target)
+            return True
+        except Exception as exc:
+            logger.warning("[code_file] Schreiben fehlgeschlagen %s/%s: %s", project_id, rel_path, exc)
+            return False
+
    async def _delete_chat_message(self, ts: int) -> dict:
        """Entfernt eine Bubble: aus chat_backup.jsonl + Brain conversation,
        broadcastet chat_message_deleted via RVS.
@@ -28,6 +28,43 @@ const TOOL_HOOK_URL = process.env.ARIA_TOOL_HOOK_URL
    || "http://aria-bridge:8090/internal/agent-activity";
 const STREAM_HOOK_URL = process.env.ARIA_STREAM_HOOK_URL
    || "http://aria-bridge:8090/internal/agent-stream";
+const CODE_FILE_HOOK_URL = process.env.ARIA_CODE_FILE_HOOK_URL
+    || "http://aria-bridge:8090/internal/code-file";
+
+// Code-Projekte leben unter /shared/projects/<projectId>/ (Volume in proxy +
+// bridge + brain gemountet). Schreibt/aendert ARIA hier eine Datei, spiegeln
+// wir den Volltext live in den Code-Editor der App. Nur Dateien unter diesem
+// Praefix — ARIAs sonstige Datei-Ops (Skills, Configs) bleiben unberuehrt.
+const PROJECTS_ROOT = "/shared/projects/";
+const CODE_FILE_MAX_BYTES = 512 * 1024;
+
+/** Zerlegt einen absoluten Pfad unter /shared/projects/<pid>/<rel> → {pid, rel}
+ *  oder null wenn er nicht darunter liegt. */
+function _parseProjectPath(filePath) {
+    if (typeof filePath !== "string" || !filePath.startsWith(PROJECTS_ROOT)) return null;
+    const rest = filePath.slice(PROJECTS_ROOT.length);
+    const slash = rest.indexOf("/");
+    if (slash <= 0) return null;
+    return { pid: rest.slice(0, slash), rel: rest.slice(slash + 1) };
+}
+
+/** Liest die (frisch geschriebene) Datei und pusht sie als code_file an die
+ *  Bridge. Fire-and-forget, fail-open. */
+function _emitCodeFile(filePath) {
+    try {
+        const parsed = _parseProjectPath(filePath);
+        if (!parsed || !parsed.rel) return;
+        const st = fs.statSync(filePath);
+        if (!st.isFile() || st.size > CODE_FILE_MAX_BYTES) return;
+        const content = fs.readFileSync(filePath, "utf8");
+        _postJson(CODE_FILE_HOOK_URL, {
+            projectId: parsed.pid,
+            path: parsed.rel,
+            content,
+            version: Date.now(),
+        });
+    } catch (_) { /* fail-open */ }
+}

 // Tool-Output kann sehr lang werden (git log -p, find /). Wir truncaten
 // hart auf 4 KB pro Event — der User sieht weiterhin den Anfang und einen
@@ -153,6 +190,9 @@ function _attachIdleWatchdog(subprocess, requestId) {
 *  - Neu-API: voller Stream (text/tool_use/tool_result) an /internal/agent-stream
 */
 function _attachToolHook(subprocess, requestId, projectId) {
+    // tool_use_id → file_path fuer Write/Edit, damit wir beim (erfolgreichen)
+    // tool_result die frisch geschriebene Datei aus /shared lesen koennen.
+    const _pendingFileWrites = new Map();
    subprocess.on("assistant", (message) => {
        try {
            const blocks = message?.message?.content || [];
@@ -160,6 +200,10 @@ function _attachToolHook(subprocess, requestId, projectId) {
                if (!b) continue;
                if (b.type === "tool_use") {
                    if (b.name) _emitToolEvent(b.name, projectId);
+                    if ((b.name === "Write" || b.name === "Edit" || b.name === "MultiEdit")
+                        && b.id && b.input && typeof b.input.file_path === "string") {
+                        _pendingFileWrites.set(b.id, b.input.file_path);
+                    }
                    const inputStr = b.input ? JSON.stringify(b.input) : "";
                    const inp = _truncate(inputStr, TOOL_INPUT_MAX_CHARS);
                    _emitStreamEvent(requestId, "tool_use", {
@@ -203,6 +247,11 @@ function _attachToolHook(subprocess, requestId, projectId) {
                        truncatedBytes: out.truncatedBytes,
                        isError: b.is_error === true,
                    });
+                    // Write/Edit erfolgreich → Datei live in den Code-Editor spiegeln.
+                    if (b.tool_use_id && b.is_error !== true && _pendingFileWrites.has(b.tool_use_id)) {
+                        _emitCodeFile(_pendingFileWrites.get(b.tool_use_id));
+                        _pendingFileWrites.delete(b.tool_use_id);
+                    }
                }
            }
        } catch (_) { /* fail-open */ }