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
@@ -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;