Update app.py

app.py

@@ -1,23 +1,29 @@
 """
 AI HTML Editor — Flask Server
-Semua pemrosesan (AI call, find/change, fuzzy match) dilakukan di sisi server.
+Multi-file support, system prompt from file, Eruda-only preview.
 Job disimpan di memori dengan TTL 1 hari.
 """
 
 from flask import Flask, request, jsonify, Response
-import uuid, time, re, json, threading, requests
+import uuid, time, re, threading, requests, os
 
 app = Flask(__name__)
 
+# ─────────────────────────────────────────────
+#  LOAD SYSTEM PROMPT FROM FILE
+# ─────────────────────────────────────────────
+_SP_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'system_prompt.txt')
+with open(_SP_PATH, 'r', encoding='utf-8') as _f:
+    SYSTEM_PROMPT = _f.read()
+
 # ─────────────────────────────────────────────
 #  JOB STORE  (in-memory, TTL = 1 hari)
 # ─────────────────────────────────────────────
 JOBS: dict[str, dict] = {}
-JOB_TTL = 86_400          # 1 hari dalam detik
+JOB_TTL = 86_400
 _lock = threading.Lock()
 
 def _purge_expired():
-    """Hapus job yang sudah expired."""
     now = time.time()
     with _lock:
         expired = [jid for jid, j in JOBS.items() if now - j["created_at"] > JOB_TTL]
@@ -29,7 +35,7 @@ def new_job(payload: dict) -> str:
     jid = str(uuid.uuid4())
     with _lock:
         JOBS[jid] = {
-            "status": "pending",    # pending | running | done | error
+            "status": "pending",
             "created_at": time.time(),
             "payload": payload,
             "result": None,
@@ -47,8 +53,9 @@ def update_job(jid: str, **kwargs):
         if jid in JOBS:
             JOBS[jid].update(kwargs)
 
+
 # ─────────────────────────────────────────────
-#  ALGORITMA FIND & CHANGE  (ported dari JS)
+#  FUZZY REPLACE (Levenshtein-based)
 # ─────────────────────────────────────────────
 
 def levenshtein(a: str, b: str) -> int:
@@ -72,16 +79,12 @@ def calculate_similarity(s1: str, s2: str) -> float:
     return (len(longer) - levenshtein(longer, shorter)) / len(longer)
 
 def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
-    """Sama persis dengan fuzzyReplace() di JS."""
     search_trimmed = search.strip()
     if not search_trimmed:
         return {"success": False, "result": source}
 
     # Level 1 — whitespace-agnostic regex
-    def escape_re(s):
-        return re.escape(s)
-
-    flex = re.sub(r'\s+', r'\\s+', escape_re(search_trimmed))
+    flex = re.sub(r'\s+', r'\\s+', re.escape(search_trimmed))
     try:
         m = re.search(flex, source)
         if m:
@@ -89,7 +92,7 @@ def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
     except re.error:
         pass
 
-    # Level 2 — sliding window + Levenshtein (hanya jika < 3000 chars)
+    # Level 2 — sliding window + Levenshtein
     if len(search_trimmed) > 3000:
         return {"success": False, "result": source}
 
@@ -102,12 +105,11 @@ def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
     best = {"index": -1, "score": 0.0, "length": 0}
     n = len(search_lines)
 
-    for window_size in [max(1, n-1), n, n+1]:
+    for window_size in [max(1, n - 1), n, n + 1]:
         for i in range(len(source_lines)):
             if i + window_size > len(source_lines):
                 continue
-            window_lines = source_lines[i:i+window_size]
-            window_str   = ''.join(l.strip() for l in window_lines)
+            window_str = ''.join(l.strip() for l in source_lines[i:i + window_size])
             if abs(len(window_str) - len(search_str)) > len(search_str) * 0.5:
                 continue
             score = calculate_similarity(window_str, search_str)
@@ -115,70 +117,163 @@ def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
                 best = {"index": i, "score": score, "length": window_size}
 
     if best["score"] > 0.70:
-        result_lines = source_lines[:best["index"]] + [replacement] + source_lines[best["index"] + best["length"]:]
+        result_lines = (source_lines[:best["index"]]
+                        + [replacement]
+                        + source_lines[best["index"] + best["length"]:])
         return {"success": True, "result": '\n'.join(result_lines)}
 
     return {"success": False, "result": source}
 
 
-def apply_find_change(code_base: str, ai_response: str) -> dict:
+# ─────────────────────────────────────────────
+#  PARSE tools_call BLOCKS
+# ───────────────────────��─────────────────────
+
+def _parse_eof_content(block: str, tag: str) -> str | None:
     """
-    Parse respons AI dan terapkan semua blok <find>/<element>/<change>.
-    Return dict: {success, code, message, action_label}
+    Extract content between:
+        [tag] (optional text on same line)
+        <<EOF >
+        ...content...
+        EOF
+    Returns the content string or None if tag not found.
     """
-    exec_match = re.search(r'<execution>([\s\S]*?)</execution>', ai_response, re.IGNORECASE)
-    if not exec_match:
-        raise ValueError("Gunakan format tag <execution>.")
+    pattern = (
+        rf'\[{re.escape(tag)}\][^\n]*\n'   # [tag] line
+        r'<<EOF\s*>\s*\n'                  # <<EOF > line
+        r'([\s\S]*?)'                      # content (captured)
+        r'\nEOF(?:\s|$)'                   # EOF terminator
+    )
+    m = re.search(pattern, block)
+    return m.group(1) if m else None
+
+
+def parse_tools_call_blocks(ai_response: str) -> list[dict]:
+    """Parse all ```tools_call ... ``` blocks from AI response."""
+    pattern = r'```tools_call\s*\n([\s\S]*?)```'
+    raw_blocks = re.findall(pattern, ai_response)
+    results = []
+    for block in raw_blocks:
+        tool: dict = {}
+
+        m = re.search(r'\[name\]\s*\n\s*(\S+)', block)
+        if m: tool['name'] = m.group(1).strip()
+
+        m = re.search(r'\[reason\]\s*\n\s*(.+)', block)
+        if m: tool['reason'] = m.group(1).strip()
 
-    exec_content = exec_match.group(1)
+        m = re.search(r'\[path\]\s*\n\s*(\S+)', block)
+        if m: tool['path'] = m.group(1).strip()
 
-    respond_match = re.search(r'<responding>([\s\S]*?)</responding>', exec_content, re.IGNORECASE)
-    respond_text  = respond_match.group(1).strip() if respond_match else "Kode berhasil diperbarui."
+        for tag in ('old_string', 'new_string', 'content'):
+            val = _parse_eof_content(block, tag)
+            if val is not None:
+                tool[tag] = val
 
-    find_blocks = re.findall(r'<find>([\s\S]*?)</find>', exec_content, re.IGNORECASE)
-    if not find_blocks:
-        raise ValueError("Kamu wajib menggunakan tag <find> berisi <element> dan <change>.")
+        if tool.get('name') and tool.get('path'):
+            results.append(tool)
 
-    temp_code     = code_base
+    return results
+
+
+# ─────────────────────────────────────────────
+#  APPLY tools_call TO FILES
+# ─────────────────────────────────────────────
+
+def apply_tools_call(files: dict, ai_response: str) -> dict:
+    """
+    Parse AI response (tools_call format) dan terapkan ke dict files.
+    Return: {files, message, action_label}
+    """
+    tools = parse_tools_call_blocks(ai_response)
+    if not tools:
+        raise ValueError(
+            "Tidak ada blok ```tools_call``` yang valid ditemukan dalam respons AI. "
+            "Gunakan format write_file atau edit_file sesuai instruksi sistem."
+        )
+
+    # Ambil kalimat pembuka "Saya akan..." sebagai pesan balasan
+    respond_m = re.search(r'Saya akan[^\n]+', ai_response)
+    respond_text = respond_m.group(0).strip() if respond_m else "Kode berhasil diperbarui."
+
+    temp_files    = dict(files)
     success_count = 0
     is_fuzzy      = False
 
-    for i, block in enumerate(find_blocks):
-        el_match  = re.search(r'<element>([\s\S]*?)</element>', block, re.IGNORECASE)
-        ch_match  = re.search(r'<change>([\s\S]*?)</change>',   block, re.IGNORECASE)
-        if not el_match or not ch_match:
-            raise ValueError(f"Blok <find> ke-{i+1} tidak memiliki <element> atau <change>.")
-
-        old_code         = el_match.group(1)
-        old_code_trimmed = old_code.strip()
-        new_code = (ch_match.group(1)
-                    .replace('&amp;', '&')
-                    .replace('&lt;',  '<')
-                    .replace('&gt;',  '>')
-                    .replace('&quot;', '"')
-                    .replace('&#39;', "'"))
-
-        if old_code in temp_code:
-            temp_code = temp_code.replace(old_code, new_code, 1)
-            success_count += 1
-        elif old_code_trimmed and old_code_trimmed in temp_code:
-            temp_code = temp_code.replace(old_code_trimmed, new_code.strip(), 1)
+    for i, tool in enumerate(tools):
+        name = tool.get('name', '')
+        path = tool.get('path', '')
+
+        if name == 'write_file':
+            content = tool.get('content', '')
+            temp_files[path] = content
             success_count += 1
-        else:
-            res = fuzzy_replace(temp_code, old_code, new_code)
-            if res["success"]:
-                temp_code  = res["result"]
-                success_count += 1
-                is_fuzzy = True
-            else:
+
+        elif name == 'edit_file':
+            old_string = tool.get('old_string', '')
+            new_string = tool.get('new_string', '')
+
+            if path not in temp_files:
                 raise ValueError(
-                    f"Isi dari <element> pada <find> ke-{i+1}:\n{old_code}\n\n"
-                    "TIDAK DITEMUKAN di codebase meskipun fitur Similarity Fallback sudah aktif. "
-                    "Salin teks dengan lebih teliti!"
+                    f"[edit_file ke-{i+1}] File '{path}' tidak ditemukan dalam project."
                 )
 
-    action_label = f"Diperbarui ({success_count} bagian){' ✨ Auto-Fix' if is_fuzzy else ''}"
-    return {"code": temp_code, "message": respond_text, "action_label": action_label}
+            current = temp_files[path]
+
+            # Exact match
+            if old_string in current:
+                temp_files[path] = current.replace(old_string, new_string, 1)
+                success_count += 1
+            # Trimmed exact match
+            elif old_string.strip() and old_string.strip() in current:
+                temp_files[path] = current.replace(old_string.strip(), new_string.strip(), 1)
+                success_count += 1
+            else:
+                # Similarity fallback
+                res = fuzzy_replace(current, old_string, new_string)
+                if res['success']:
+                    temp_files[path] = res['result']
+                    success_count += 1
+                    is_fuzzy = True
+                else:
+                    raise ValueError(
+                        f"[edit_file ke-{i+1}, file '{path}'] old_string:\n"
+                        f"{old_string}\n\n"
+                        "TIDAK DITEMUKAN meskipun Similarity Fallback sudah aktif. "
+                        "Salin [old_string] dengan lebih teliti dari isi file yang diberikan!"
+                    )
+        else:
+            raise ValueError(f"Tool tidak dikenal '{name}' pada blok ke-{i+1}. Gunakan write_file atau edit_file.")
+
+    action_label = f"Diperbarui ({success_count} operasi){' ✨ Auto-Fix' if is_fuzzy else ''}"
+    return {"files": temp_files, "message": respond_text, "action_label": action_label}
+
+
+# ─────────────────────────────────────────────
+#  BUILD PROMPT
+#  Context: system_prompt.txt + semua file + instruksi user + error log (jika loop)
+# ─────────────────────────────────────────────
+
+def build_prompt(files: dict, user_instruction: str, error_feedback: str = None) -> str:
+    files_context = ""
+    for path, content in files.items():
+        files_context += f"\n[File: {path}]\n```\n{content}\n```\n"
+
+    prompt = (
+        f"{SYSTEM_PROMPT}\n\n"
+        f"--- PROJECT FILES ---\n{files_context}"
+        f"--- END OF FILES ---\n\n"
+        f"Instruksi User: {user_instruction}"
+    )
+
+    if error_feedback:
+        prompt += (
+            f"\n\n[ERROR PADA JAWABANMU SEBELUMNYA]:\n{error_feedback}\n\n"
+            "Perbaiki [old_string] agar identik persis dengan isi file di PROJECT FILES. "
+            "Jika perlu, salin ulang teks tersebut langsung dari sana."
+        )
+
+    return prompt
 
 
 # ─────────────────────────────────────────────
@@ -200,65 +295,32 @@ def call_ai(prompt: str) -> str:
     return data["result"]["answer"]
 
 
-def build_system_prompt(code_base: str) -> str:
-    return f"""Kamu adalah AI HTML Editor. Tugasmu HANYA mengubah bagian tertentu dari kode (Partial Update).
-Codebase saat ini:
-```html
-{code_base}
-```
-
-ATURAN WAJIB:
-1. Gunakan blok <find> untuk setiap perubahan.
-2. <element> HARUS berisi teks/kode lama yang IDENTIK PERSIS dengan Codebase.
-3. <change> berisi kode baru penggantinya.
-4. Boleh memakai banyak blok <find> sekaligus.
-5. Balas HANYA dengan format <execution> seperti contoh di bawah. DILARANG KERAS menulis ulang seluruh kode!
-
-CONTOH JAWABAN:
-<execution>
-<responding>Saya telah mengganti teks H1 dan warna tombol.</responding>
-<find>
-<element>
-  <h1>Halo Dunia!</h1>
-</element>
-<change>
-  <h1>Dunia Baru!</h1>
-</change>
-</find>
-</execution>"""
-
-
-def run_ai_loop(jid: str, user_instruction: str, code_base: str,
+def run_ai_loop(jid: str, user_instruction: str, files: dict,
                 loop: int = 0, error_feedback: str = None, max_loops: int = 10):
-    """Rekursif di thread terpisah — sama dengan runAILoop() JS."""
+    """Self-healing AI loop — rekursif di thread terpisah."""
     if loop >= max_loops:
         update_job(jid,
             status="error",
-            error="Gagal merubah kode setelah 10x loop perbaikan. AI terus menerus gagal mencocokkan kode dengan Codebase. Coba beri instruksi yang lebih jelas.",
+            error=(
+                "Gagal merubah kode setelah 10x loop perbaikan. "
+                "AI terus-menerus gagal mencocokkan kode. "
+                "Coba beri instruksi yang lebih spesifik."
+            ),
             loop_count=loop,
         )
         return
 
     try:
-        prompt = build_system_prompt(code_base) + f"\n\nInstruksi User: {user_instruction}"
-        if error_feedback:
-            prompt += (f"\n\n[ERROR PADA JAWABANMU SEBELUMNYA]:\n{error_feedback}\n"
-                       "Perbaiki pencarian teksmu. Jika kau kesulitan, setidaknya salin elemen persis seperti aslinya.")
-
+        prompt  = build_prompt(files, user_instruction, error_feedback)
         ai_text = call_ai(prompt)
-        result  = apply_find_change(code_base, ai_text)
+        result  = apply_tools_call(files, ai_text)
 
-        update_job(jid,
-            status="done",
-            result=result,
-            loop_count=loop,
-        )
+        update_job(jid, status="done", result=result, loop_count=loop)
 
     except Exception as exc:
-        # Self-healing: retry
         threading.Thread(
             target=run_ai_loop,
-            args=(jid, user_instruction, code_base, loop + 1, str(exc), max_loops),
+            args=(jid, user_instruction, files, loop + 1, str(exc), max_loops),
             daemon=True,
         ).start()
 
@@ -269,23 +331,22 @@ def run_ai_loop(jid: str, user_instruction: str, code_base: str,
 
 @app.route("/api/chat", methods=["POST"])
 def api_chat():
-    """
-    Body: { instruction: str, code_base: str }
-    Return: { job_id: str }
-    """
-    body = request.get_json(silent=True) or {}
+    """Body: { instruction: str, files: {path: content} } → { job_id: str }"""
+    body        = request.get_json(silent=True) or {}
     instruction = body.get("instruction", "").strip()
-    code_base   = body.get("code_base", "")
+    files       = body.get("files", {})
 
     if not instruction:
         return jsonify({"error": "instruction wajib diisi"}), 400
+    if not isinstance(files, dict):
+        return jsonify({"error": "files harus berupa object {path: content}"}), 400
 
     jid = new_job({"instruction": instruction})
     update_job(jid, status="running", loop_count=0)
 
     threading.Thread(
         target=run_ai_loop,
-        args=(jid, instruction, code_base),
+        args=(jid, instruction, files),
         daemon=True,
     ).start()
 
@@ -294,7 +355,6 @@ def api_chat():
 
 @app.route("/api/job/<jid>", methods=["GET"])
 def api_job_status(jid):
-    """Poll status job."""
     job = get_job(jid)
     if not job:
         return jsonify({"error": "Job tidak ditemukan atau sudah expired (> 1 hari)"}), 404
@@ -314,7 +374,6 @@ def api_job_status(jid):
 
 @app.route("/api/job/<jid>", methods=["DELETE"])
 def api_delete_job(jid):
-    """Hapus job secara manual."""
     with _lock:
         if jid in JOBS:
             del JOBS[jid]
@@ -344,7 +403,7 @@ HTML = r"""<!DOCTYPE html>
 <body class="bg-gray-100 flex justify-center h-[100dvh] overflow-hidden text-gray-800">
 
     <div x-data="aiEditor()" class="w-full max-w-md h-full bg-white shadow-2xl relative flex flex-col">
-        
+
         <!-- Header -->
         <header class="flex-shrink-0 bg-indigo-600 text-white p-4 flex justify-between items-center shadow-md z-10">
             <h1 class="text-lg font-bold flex items-center gap-2">
@@ -356,15 +415,15 @@ HTML = r"""<!DOCTYPE html>
                 </button>
                 <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-400 p-2 rounded text-sm transition font-medium shadow">
                     <i class="fa-solid fa-file-upload"></i> Upload
-                    <input type="file" accept=".html" class="hidden" @change="uploadFile">
+                    <input type="file" class="hidden" @change="uploadFile">
                 </label>
             </div>
         </header>
 
         <!-- Main -->
         <main class="flex-1 min-h-0 relative bg-gray-50 flex flex-col overflow-hidden">
-            
-            <!-- CHAT PAGE -->
+
+            <!-- ═══ CHAT PAGE ═══ -->
             <div x-show="tab === 'chat'" class="h-full flex flex-col" x-transition.opacity>
                 <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container">
                     <template x-for="(msg, index) in chatHistory" :key="index">
@@ -372,9 +431,9 @@ HTML = r"""<!DOCTYPE html>
                             <span class="text-[10px] text-gray-400 mb-1 font-semibold uppercase tracking-wider"
                                   x-text="msg.role === 'user' ? 'Kamu' : 'AI'"></span>
                             <div class="max-w-[85%] p-3 rounded-2xl shadow-sm text-sm"
-                                 :class="msg.role === 'user' ? 'bg-indigo-600 text-white rounded-tr-none'
-                                         : (msg.isErrorPrompt ? 'bg-red-50 text-red-800 border border-red-200 rounded-tr-none'
-                                         : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none')">
+                                 :class="msg.role === 'user'
+                                     ? 'bg-indigo-600 text-white rounded-tr-none'
+                                     : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none'">
                                 <p class="whitespace-pre-wrap leading-relaxed" x-text="msg.content"></p>
                                 <template x-if="msg.action">
                                     <div class="mt-2 pt-2 border-t border-gray-100/30 flex items-center gap-1">
@@ -388,7 +447,7 @@ HTML = r"""<!DOCTYPE html>
                         </div>
                     </template>
 
-                    <!-- Loading -->
+                    <!-- Loading indicator -->
                     <div x-show="isProcessing" class="flex items-start">
                         <div class="bg-white border border-gray-200 p-3 rounded-2xl rounded-tl-none shadow-sm flex items-center gap-2">
                             <i class="fa-solid fa-circle-notch fa-spin text-indigo-600"></i>
@@ -414,23 +473,108 @@ HTML = r"""<!DOCTYPE html>
                 </div>
             </div>
 
-            <!-- CODE PAGE -->
+            <!-- ═══ CODE PAGE ═══ -->
             <div x-show="tab === 'code'" class="h-full flex flex-col" x-transition.opacity style="display:none">
-                <div class="flex-shrink-0 bg-[#2d2d2d] text-gray-300 text-xs px-4 py-2 flex justify-between items-center border-b border-black">
-                    <span class="font-mono flex items-center gap-2"><i class="fa-brands fa-html5 text-orange-500 text-sm"></i> index.html</span>
-                    <button @click="copyCode" class="hover:text-white transition flex items-center gap-1">
+
+                <!-- Code Toolbar -->
+                <div class="flex-shrink-0 bg-[#2d2d2d] text-gray-300 text-xs px-3 py-2 flex justify-between items-center border-b border-black">
+                    <div class="flex items-center gap-2 min-w-0">
+                        <!-- Hamburger -->
+                        <button @click="showFileList = !showFileList"
+                                class="flex-shrink-0 hover:text-white transition p-1 rounded hover:bg-white/10"
+                                :class="showFileList ? 'text-white bg-white/10' : ''">
+                            <i class="fa-solid fa-bars text-sm"></i>
+                        </button>
+                        <!-- Active file name -->
+                        <span class="font-mono text-gray-200 truncate" x-text="activeFile"></span>
+                    </div>
+                    <button @click="copyCode" class="flex-shrink-0 hover:text-white transition flex items-center gap-1 ml-2">
                         <i class="fa-regular fa-copy"></i> Salin
                     </button>
                 </div>
-                <textarea x-model="codeBase" spellcheck="false"
-                          class="flex-1 w-full h-full min-h-0 bg-[#1e1e1e] text-[#d4d4d4] font-mono p-4 text-sm outline-none resize-none leading-relaxed"
-                          placeholder="<!-- Tulis atau tempel kode HTML di sini -->"></textarea>
+
+                <!-- File List Drawer -->
+                <div x-show="showFileList"
+                     x-transition:enter="transition ease-out duration-150"
+                     x-transition:enter-start="opacity-0 -translate-y-1"
+                     x-transition:enter-end="opacity-100 translate-y-0"
+                     x-transition:leave="transition ease-in duration-100"
+                     x-transition:leave-start="opacity-100"
+                     x-transition:leave-end="opacity-0"
+                     class="flex-shrink-0 bg-[#252526] border-b border-black text-gray-300 text-xs z-10">
+
+                    <!-- Drawer header -->
+                    <div class="px-3 py-2 flex justify-between items-center border-b border-[#3e3e3e]">
+                        <span class="font-semibold text-gray-400 uppercase tracking-widest text-[10px]">
+                            <i class="fa-solid fa-folder-open mr-1 text-yellow-500"></i> Project Files
+                        </span>
+                        <button @click="showNewFileInput = !showNewFileInput"
+                                class="flex items-center gap-1 text-gray-400 hover:text-white transition px-2 py-0.5 rounded hover:bg-white/10">
+                            <i class="fa-solid fa-plus text-xs"></i> New File
+                        </button>
+                    </div>
+
+                    <!-- New file input -->
+                    <div x-show="showNewFileInput" class="px-3 py-2 border-b border-[#3e3e3e] flex gap-2">
+                        <input x-model="newFileName"
+                               @keydown.enter="addFile"
+                               @keydown.escape="showNewFileInput = false"
+                               placeholder="nama-file.html"
+                               class="flex-1 bg-[#3c3c3c] text-gray-200 text-xs px-2 py-1.5 rounded outline-none focus:ring-1 focus:ring-indigo-500 placeholder-gray-500">
+                        <button @click="addFile"
+                                class="bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1 rounded text-xs transition">
+                            Tambah
+                        </button>
+                        <button @click="showNewFileInput = false"
+                                class="text-gray-500 hover:text-gray-300 px-1 transition">
+                            <i class="fa-solid fa-xmark"></i>
+                        </button>
+                    </div>
+
+                    <!-- File list -->
+                    <div class="max-h-44 overflow-y-auto">
+                        <template x-for="fname in Object.keys(files)" :key="fname">
+                            <div @click="selectFile(fname)"
+                                 class="flex items-center justify-between px-3 py-2 cursor-pointer transition group"
+                                 :class="fname === activeFile
+                                     ? 'bg-[#094771] text-white'
+                                     : 'hover:bg-[#37373d] text-gray-300'">
+                                <span class="font-mono flex items-center gap-2 truncate text-xs">
+                                    <i class="fa-brands fa-html5 text-orange-400 flex-shrink-0"
+                                       x-show="fname.endsWith('.html')"></i>
+                                    <i class="fa-brands fa-css3-alt text-blue-400 flex-shrink-0"
+                                       x-show="fname.endsWith('.css')"></i>
+                                    <i class="fa-brands fa-js text-yellow-400 flex-shrink-0"
+                                       x-show="fname.endsWith('.js')"></i>
+                                    <i class="fa-solid fa-file-code text-gray-400 flex-shrink-0"
+                                       x-show="!fname.endsWith('.html') && !fname.endsWith('.css') && !fname.endsWith('.js')"></i>
+                                    <span x-text="fname" class="truncate"></span>
+                                </span>
+                                <button @click.stop="deleteFile(fname)"
+                                        x-show="Object.keys(files).length > 1"
+                                        class="flex-shrink-0 ml-2 text-gray-600 group-hover:text-gray-400 hover:!text-red-400 transition">
+                                    <i class="fa-solid fa-xmark text-xs"></i>
+                                </button>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <!-- Editor Textarea -->
+                <textarea :value="files[activeFile] || ''"
+                          @input="files[activeFile] = $event.target.value"
+                          spellcheck="false"
+                          class="flex-1 w-full min-h-0 bg-[#1e1e1e] text-[#d4d4d4] font-mono p-4 text-sm outline-none resize-none leading-relaxed"
+                          placeholder="<!-- Tulis atau tempel kode di sini -->"></textarea>
             </div>
 
-            <!-- PREVIEW PAGE -->
+            <!-- ═══ PREVIEW PAGE ═══ -->
             <div x-show="tab === 'preview'" class="h-full flex flex-col bg-white" x-transition.opacity style="display:none">
                 <div class="flex-shrink-0 bg-gray-200 text-gray-700 text-xs px-4 py-2 flex justify-between items-center border-b border-gray-300">
-                    <span class="font-semibold flex items-center gap-2"><i class="fa-solid fa-eye text-indigo-500"></i> Hasil Render</span>
+                    <span class="font-semibold flex items-center gap-2">
+                        <i class="fa-solid fa-eye text-indigo-500"></i> Hasil Render
+                        <span class="text-gray-400 font-normal">— debug via Eruda (pojok bawah)</span>
+                    </span>
                     <button @click="updatePreview" class="hover:text-indigo-600 transition flex items-center gap-1">
                         <i class="fa-solid fa-rotate-right"></i> Refresh
                     </button>
@@ -444,15 +588,22 @@ HTML = r"""<!DOCTYPE html>
 
         <!-- Bottom Nav -->
         <nav class="flex-shrink-0 bg-white border-t flex justify-between text-gray-500 text-xs pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_10px_rgba(0,0,0,0.05)] z-20 px-2">
-            <button @click="tab='chat'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+            <button @click="tab='chat'; showFileList=false"
+                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                     :class="tab==='chat' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                 <i class="fa-solid fa-message text-lg"></i> Chat
             </button>
-            <button @click="tab='code'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+            <button @click="tab='code'"
+                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                     :class="tab==='code' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                 <i class="fa-solid fa-code text-lg"></i> Code
+                <!-- File count badge -->
+                <span x-show="Object.keys(files).length > 1"
+                      class="absolute mt-0 ml-5 bg-indigo-500 text-white text-[9px] rounded-full px-1.5 leading-4 font-bold"
+                      x-text="Object.keys(files).length"></span>
             </button>
-            <button @click="tab='preview'" class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
+            <button @click="tab='preview'; showFileList=false"
+                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                     :class="tab==='preview' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                 <i class="fa-solid fa-play text-lg"></i> Preview
             </button>
@@ -460,67 +611,72 @@ HTML = r"""<!DOCTYPE html>
 
         <!-- Toast -->
         <div x-show="toastMsg" x-transition.duration.300ms
-             class="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full text-sm shadow-xl z-50 whitespace-nowrap">
+             class="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full text-sm shadow-xl z-50 whitespace-nowrap pointer-events-none">
             <i class="fa-solid fa-circle-check text-green-400 mr-1"></i>
             <span x-text="toastMsg"></span>
         </div>
 
-        <!-- Error Modal -->
-        <div x-show="previewError" class="absolute inset-0 bg-black/60 z-50 flex justify-center items-end p-0"
-             x-transition.opacity style="display:none">
-            <div class="bg-white rounded-t-2xl w-full max-w-md shadow-2xl flex flex-col" style="max-height:80dvh">
-                <div class="flex-shrink-0 flex items-center justify-between gap-3 px-5 pt-5 pb-3 border-b border-gray-100">
-                    <div class="flex items-center gap-3 text-red-600">
-                        <div class="bg-red-100 p-2 rounded-full"><i class="fa-solid fa-triangle-exclamation text-lg"></i></div>
-                        <h2 class="font-bold text-base">Error Terdeteksi!</h2>
-                    </div>
-                    <button @click="previewError=null" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
-                </div>
-                <div class="flex-1 overflow-y-auto px-5 py-3 min-h-0">
-                    <p class="text-xs text-gray-500 mb-2">Log error lengkap dari preview:</p>
-                    <div class="bg-gray-950 p-3 rounded-xl text-xs font-mono text-green-400 whitespace-pre-wrap border border-gray-800 leading-relaxed">
-                        <span x-text="previewError"></span>
-                    </div>
-                </div>
-                <div class="flex-shrink-0 px-5 py-4 border-t border-gray-100 bg-white flex flex-col gap-2">
-                    <p class="text-xs text-gray-500 text-center">Kirim error ini ke AI agar diperbaiki otomatis?</p>
-                    <div class="flex gap-2">
-                        <button @click="previewError=null" class="flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-sm font-semibold hover:bg-gray-200 transition">Abaikan</button>
-                        <button @click="sendErrorToAI" class="flex-1 bg-indigo-600 text-white py-2.5 rounded-xl text-sm font-semibold hover:bg-indigo-700 shadow-md flex items-center justify-center gap-2 transition">
-                            <i class="fa-solid fa-robot"></i> Send ke AI
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
     </div>
 
     <script>
     document.addEventListener('alpine:init', () => {
         Alpine.data('aiEditor', () => ({
             tab: 'chat',
-            codeBase: `<!DOCTYPE html>\n<html>\n<head>\n  <title>Halo Dunia</title>\n</head>\n<body>\n  <h1>Halo Dunia!</h1>\n  <button onclick="showAlert()">Klik Saya</button>\n  <script>\n    function showAlert() {\n      alert('Halo!');\n    }\n  <\/script>\n</body>\n</html>`,
-            chatHistory: [{role:'ai', content:'Halo! Saya AI Editor (Server-Side). Minta saya mengubah bagian mana saja di halaman ini!'}],
+            files: {
+                'index.html': `<!DOCTYPE html>\n<html>\n<head>\n  <title>Halo Dunia</title>\n</head>\n<body>\n  <h1>Halo Dunia!</h1>\n  <button onclick="showAlert()">Klik Saya</button>\n  <script>\n    function showAlert() {\n      alert('Halo!');\n    }\n  <\/script>\n</body>\n</html>`
+            },
+            activeFile: 'index.html',
+            showFileList: false,
+            showNewFileInput: false,
+            newFileName: '',
+            chatHistory: [{ role: 'ai', content: 'Halo! Saya AI Editor. Minta saya membuat atau mengubah file apa saja di project ini!' }],
             userInput: '',
             isProcessing: false,
             loopCount: 0,
             toastMsg: '',
-            previewError: null,
             _pollTimer: null,
 
             init() {
-                this.$watch('tab', val => { if (val === 'preview') this.updatePreview(); });
-                this.$watch('codeBase', () => { if (this.tab === 'preview') this.updatePreview(); });
-                window.addEventListener('message', event => {
-                    if (event.data && event.data.type === 'PREVIEW_ERROR') {
-                        this.previewError = this.previewError
-                            ? this.previewError + '\n\n' + event.data.error
-                            : event.data.error;
-                    }
+                this.$watch('tab', val => {
+                    if (val === 'preview') this.updatePreview();
+                    if (val !== 'code') this.showFileList = false;
                 });
             },
 
+            /* ─── File Management ─── */
+
+            selectFile(fname) {
+                this.activeFile = fname;
+                this.showFileList = false;
+            },
+
+            addFile() {
+                const name = this.newFileName.trim();
+                if (!name) return;
+                // Avoid overwriting existing file without confirmation
+                if (!this.files[name]) {
+                    this.files[name] = '';
+                }
+                this.activeFile = name;
+                this.newFileName = '';
+                this.showNewFileInput = false;
+                this.showFileList = false;
+                this.showToast(`File '${name}' dibuat!`);
+            },
+
+            deleteFile(fname) {
+                if (Object.keys(this.files).length <= 1) return;
+                const newFiles = Object.assign({}, this.files);
+                delete newFiles[fname];
+                this.files = newFiles;
+                if (this.activeFile === fname) {
+                    this.activeFile = Object.keys(newFiles)[0];
+                }
+                this.showToast(`File '${fname}' dihapus.`);
+            },
+
+            /* ─── UI Helpers ─── */
+
             showToast(msg) {
                 this.toastMsg = msg;
                 setTimeout(() => this.toastMsg = '', 3000);
@@ -533,13 +689,16 @@ HTML = r"""<!DOCTYPE html>
                 }, 100);
             },
 
+            /* ─── File I/O ─── */
+
             uploadFile(event) {
                 const file = event.target.files[0];
                 if (!file) return;
                 const reader = new FileReader();
                 reader.onload = e => {
-                    this.codeBase = e.target.result;
-                    this.showToast('File berhasil diunggah!');
+                    this.files[file.name] = e.target.result;
+                    this.activeFile = file.name;
+                    this.showToast(`'${file.name}' berhasil diunggah!`);
                     this.tab = 'code';
                 };
                 reader.readAsText(file);
@@ -547,82 +706,77 @@ HTML = r"""<!DOCTYPE html>
             },
 
             copyCode() {
-                navigator.clipboard.writeText(this.codeBase);
+                navigator.clipboard.writeText(this.files[this.activeFile] || '');
                 this.showToast('Kode berhasil disalin!');
             },
 
             downloadCode() {
                 try {
-                    const blob = new Blob([this.codeBase], {type:'text/html'});
+                    const content = this.files[this.activeFile] || '';
+                    const blob = new Blob([content], { type: 'text/plain' });
                     const url  = URL.createObjectURL(blob);
                     const a    = document.createElement('a');
-                    a.href = url; a.download = 'index.html';
-                    document.body.appendChild(a); a.click();
+                    a.href = url;
+                    a.download = this.activeFile;
+                    document.body.appendChild(a);
+                    a.click();
                     document.body.removeChild(a);
                     URL.revokeObjectURL(url);
-                    this.showToast('File berhasil diunduh!');
-                } catch { this.showToast('Gagal mengunduh file'); }
+                    this.showToast(`'${this.activeFile}' berhasil diunduh!`);
+                } catch {
+                    this.showToast('Gagal mengunduh file.');
+                }
             },
 
+            /* ─── Preview (Eruda only) ─── */
+
             updatePreview() {
                 const iframe = document.getElementById('preview-frame');
                 if (!iframe) return;
-                const errorCatcherScript = `<script>
-(function(){
-    var _all=[],_t=null;
-    function _report(d){_all.push(d);clearTimeout(_t);_t=setTimeout(function(){if(_all.length)window.parent.postMessage({type:'PREVIEW_ERROR',error:_all.join('\\n\\n---\\n\\n')},'*');},200);}
-    function _fmt(e){if(!e)return'';var o=e.name?e.name+': '+e.message:String(e);if(e.stack){o+='\\n  Stack:\\n  '+e.stack.split('\\n').slice(0,5).join('\\n  ');}return o;}
-    window.onerror=function(m,s,l,c,e){var d;if(e){d='[Runtime Error]\\n'+_fmt(e);if(s)d+='\\n  File: '+s;if(l)d+='\\n  Line: '+l+(c?', Col: '+c:'');}else if(m==='Script error.'||m==='Script error'){d='[Cross-Origin Script Error]\\n  Browser menyembunyikan detail.\\n  File: '+(s||'unknown');}else{d='[Runtime Error] '+m;if(s)d+='\\n  File: '+s;if(l)d+='\\n  Line: '+l+(c?', Col: '+c:'');}_report(d);return true;};
-    window.addEventListener('unhandledrejection',function(e){var r=e.reason,d='[Unhandled Promise Rejection]\\n';if(r instanceof Error){d+=_fmt(r);}else{d+=String(r);}_report(d);});
-    var _oe=console.error.bind(console),_ow=console.warn.bind(console);
-    console.error=function(){var m=Array.from(arguments).map(function(a){return a instanceof Error?_fmt(a):(typeof a==='object'?JSON.stringify(a,null,2):String(a));}).join(' ');_report('[console.error] '+m);_oe.apply(console,arguments);};
-    console.warn=function(){var m=Array.from(arguments).map(function(a){return typeof a==='object'?JSON.stringify(a):String(a);}).join(' ');_report('[console.warn] '+m);_ow.apply(console,arguments);};
-    var _of=window.fetch;window.fetch=function(url,opts){return _of.apply(this,arguments).then(function(r){if(!r.ok)_report('[Fetch Error] '+(opts&&opts.method||'GET')+' '+url+'\\n  Status: '+r.status+' '+r.statusText);return r;}).catch(function(err){_report('[Fetch Failed] '+url+'\\n  '+_fmt(err));throw err;});};
-    var _oc=document.createElement.bind(document);document.createElement=function(tag){var el=_oc(tag);if(tag.toLowerCase()==='script')el.addEventListener('error',function(){_report('[Script Load Error] Gagal memuat: '+(el.src||'unknown'));});return el;};
-})();
-<\/script>`;
-                let html = this.codeBase;
-                this.previewError = null;
-                html = html.includes('<head>')
-                    ? html.replace('<head>', '<head>' + errorCatcherScript)
-                    : errorCatcherScript + html;
+
+                // Render index.html first, fallback to first file
+                let html = this.files['index.html'] || Object.values(this.files)[0] || '';
+
+                // Inject Eruda debugger only — no custom error modal
+                const erudaSnippet = [
+                    '<script src="https://cdn.jsdelivr.net/npm/eruda"><\/script>',
+                    '<script>eruda.init();<\/script>'
+                ].join('');
+
+                html = html.includes('</body>')
+                    ? html.replace('</body>', erudaSnippet + '</body>')
+                    : html + erudaSnippet;
+
                 iframe.srcdoc = html;
             },
 
-            sendErrorToAI() {
-                const msg = `Perbaiki error berikut yang terdeteksi saat preview:\n\n${this.previewError}\n\nAnalisa penyebabnya berdasarkan error di atas, lalu perbaiki kode menggunakan format <find>.`;
-                this.previewError = null;
-                this.tab = 'chat';
-                this.chatHistory.push({role:'user', content: msg, isErrorPrompt: true});
-                this.scrollToBottom();
-                this._submitToServer(msg);
-            },
+            /* ─── Chat / AI ─── */
 
             async sendPrompt() {
                 if (!this.userInput.trim() || this.isProcessing) return;
                 const prompt = this.userInput;
                 this.userInput = '';
-                this.chatHistory.push({role:'user', content: prompt});
+                this.chatHistory.push({ role: 'user', content: prompt });
                 this.scrollToBottom();
                 this._submitToServer(prompt);
             },
 
-            /* ── Server-side job flow ── */
             async _submitToServer(instruction) {
                 this.isProcessing = true;
                 this.loopCount    = 0;
                 try {
                     const res  = await fetch('/api/chat', {
                         method: 'POST',
-                        headers: {'Content-Type': 'application/json'},
-                        body: JSON.stringify({instruction, code_base: this.codeBase}),
+                        headers: { 'Content-Type': 'application/json' },
+                        // Context: only all files + latest user instruction
+                        body: JSON.stringify({ instruction, files: this.files }),
                     });
                     const data = await res.json();
                     if (!res.ok) throw new Error(data.error || 'Server error');
                     this._pollJob(data.job_id);
                 } catch (err) {
                     this.isProcessing = false;
-                    this.chatHistory.push({role:'ai', content: '❌ ' + err.message});
+                    this.chatHistory.push({ role: 'ai', content: '❌ ' + err.message });
                     this.scrollToBottom();
                 }
             },
@@ -643,20 +797,24 @@ HTML = r"""<!DOCTYPE html>
                         }
 
                         if (data.status === 'done') {
-                            this.codeBase = data.result.code;
+                            this.files = data.result.files;
+                            // Ensure activeFile still exists after AI response
+                            if (!this.files[this.activeFile]) {
+                                this.activeFile = Object.keys(this.files)[0] || 'index.html';
+                            }
                             this.chatHistory.push({
-                                role: 'ai',
+                                role:    'ai',
                                 content: data.result.message,
                                 action:  data.result.action_label,
                             });
                         } else {
                             this.chatHistory.push({
-                                role: 'ai',
+                                role:    'ai',
                                 content: '❌ ' + (data.error || 'Terjadi kesalahan pada server.'),
                             });
                         }
                     } catch {
-                        this.chatHistory.push({role:'ai', content:'❌ Gagal membaca status job dari server.'});
+                        this.chatHistory.push({ role: 'ai', content: '❌ Gagal membaca status job dari server.' });
                     } finally {
                         this.isProcessing = false;
                         this.scrollToBottom();
@@ -670,10 +828,11 @@ HTML = r"""<!DOCTYPE html>
 </body>
 </html>"""
 
+
 @app.route("/")
 def index():
     return Response(HTML, mimetype="text/html")
 
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=7860)
+    app.run(host="0.0.0.0", port=7860)