Fix 59A-C + Fix 60: Full UI overhaul - design system, theme migration, mmproj filtering, VRAM fix, TodoPanel scroll

Fix 59A: File Structure Digest - project structure in system prompt
Fix 59B: Suppress rotation acknowledgments in preamble
Fix 59C: Post-write structural validation

Fix 60A: Design foundation - Tailwind tokens + index.css component classes
Fix 60B: StatusBar GPU VRAM undefined fix
Fix 60C: mmproj file filtering from all model selectors
Fix 60D: Chat Panel full theme migration (header, messages, input, toolbar)
Fix 60E: Settings Panel design system (slider, accordion classes)
Fix 60F: Activity Bar VS Code-style left accent indicators
Fix 60G: Terminal Panel full theme migration
Fix 60H: TodoPanel scroll (max-height 180px) + theme migration

Author: Brendan Gray

main/agenticChat.js

@@ -476,7 +476,19 @@ function formatSuccessfulToolResult(tr, opts = {}) {
   switch (tr.tool) {
     case 'read_file':
       text += `**File:** ${tr.params?.filePath}${tr.result.readRange ? ` (lines ${tr.result.readRange})` : ''}\n`;
-      text += `\`\`\`\n${(tr.result.content || '').substring(0, 2000)}\n\`\`\`\n`;
+      {
+        // Fix 58B: Show head+tail for large files so the model can see both
+        // the file structure AND where it left off (critical for append workflows)
+        const content = tr.result.content || '';
+        if (content.length > 4000) {
+          const lines = content.split('\n');
+          const head = lines.slice(0, 15).join('\n');
+          const tail = lines.slice(-40).join('\n');
+          text += `\`\`\`\n${head}\n... (${lines.length} lines total, middle omitted) ...\n${tail}\n\`\`\`\n`;
+        } else {
+          text += `\`\`\`\n${content.substring(0, 3000)}\n\`\`\`\n`;
+        }
+      }
       break;
 
     case 'write_file':
@@ -516,6 +528,28 @@ function formatSuccessfulToolResult(tr, opts = {}) {
           text += `*Content appended successfully.*\n`;
         }
       }
+
+      // Fix 59C: Post-write structural validation — immediate feedback loop
+      // Provides IDE-level diagnostics (like LSP Problems panel) so the model
+      // knows the structural state of the file RIGHT AFTER writing, not just at rotation.
+      const writtenFilePath = tr.result?.path || tr.params?.filePath || '';
+      const fullWrittenContent = (tr.tool === 'append_to_file' && tr.result?.fullContent)
+        ? tr.result.fullContent : (tr.params?.content || '');
+      if (writtenFilePath && fullWrittenContent.length > 100) {
+        const digest = buildFileStructureDigest(writtenFilePath, fullWrittenContent);
+        if (digest) {
+          // Extract only the structural warnings — skip LAST 3 LINES and full header to stay compact
+          const digestLines = digest.split('\n');
+          const structuralNotes = digestLines.filter(l =>
+            l.startsWith('HTML TAGS MISSING') ||
+            l.startsWith('CSS SELECTORS ALREADY DEFINED') ||
+            l.startsWith('STATUS:')
+          );
+          if (structuralNotes.length > 0) {
+            text += `**Structure:** ${structuralNotes.join(' | ')}\n`;
+          }
+        }
+      }
       break;
     }
 
@@ -636,9 +670,6 @@ class ExecutionState {
     if (toolName === 'write_file' && result?.success && params?.filePath) {
       this.filesCreated.push({ path: params.filePath, iteration });
     }
-    if (toolName === 'append_to_file' && result?.success && params?.filePath) {
-      this.filesCreated.push({ path: params.filePath, iteration, append: true });
-    }
     if (toolName === 'edit_file' && result?.success && params?.filePath) {
       this.filesEdited.push({ path: params.filePath, iteration });
     }
@@ -657,22 +688,7 @@ class ExecutionState {
       parts.push(`URLs visited: ${recent.map(v => `${v.success ? 'OK' : 'FAIL'} ${v.url}`).join(', ')}`);
     }
     if (this.filesCreated.length > 0) {
-      // Fix 61: Show per-file write counts so the model can see when it's looping
-      const fileCounts = {};
-      for (const f of this.filesCreated) {
-        if (!fileCounts[f.path]) fileCounts[f.path] = { writes: 0, appends: 0 };
-        if (f.append) fileCounts[f.path].appends++;
-        else fileCounts[f.path].writes++;
-      }
-      const fileList = Object.entries(fileCounts).map(([p, c]) => {
-        const total = c.writes + c.appends;
-        if (total <= 1) return p;
-        const detail = [];
-        if (c.writes > 0) detail.push(`${c.writes}× written`);
-        if (c.appends > 0) detail.push(`${c.appends}× appended`);
-        return `${p} (${detail.join(', ')})`;
-      });
-      parts.push(`Files created/modified: ${fileList.join(', ')}`);
+      parts.push(`Files created: ${this.filesCreated.map(f => f.path).join(', ')}`);
     }
     if (this.filesEdited.length > 0) {
       parts.push(`Files edited: ${this.filesEdited.map(f => f.path).join(', ')}`);
@@ -698,6 +714,112 @@ class ExecutionState {
   }
 }
 
+/**
+ * Build a compact structural digest of a file's content.
+ * This digest survives context rotation and tells the model what's already
+ * on disk — preventing duplicate CSS selectors, reopened tags, etc.
+ *
+ * @param {string} filePath - File path (used for extension detection)
+ * @param {string} content  - Full file content
+ * @returns {string} Compact multi-line digest for injection into prompts
+ */
+function buildFileStructureDigest(filePath, content) {
+  if (!content || content.length < 10) return '';
+  const ext = (filePath || '').split('.').pop().toLowerCase();
+  const lines = content.split('\n');
+  const totalLines = lines.length;
+  const sections = [];
+
+  // --- HTML / CSS structure ---
+  if (ext === 'html' || ext === 'htm' || ext === 'css' || ext === 'svelte' || ext === 'vue') {
+    // Detect HTML structural tags present
+    const htmlTags = [];
+    const htmlMissing = [];
+    const structChecks = [
+      ['<!DOCTYPE', '<!DOCTYPE>'],
+      ['<html', '<html>'],
+      ['<head', '<head>'],
+      ['</head>', '</head>'],
+      ['<style', '<style>'],
+      ['</style>', '</style>'],
+      ['<body', '<body>'],
+      ['</body>', '</body>'],
+      ['<header', '<header>'],
+      ['</header>', '</header>'],
+      ['<main', '<main>'],
+      ['<footer', '<footer>'],
+      ['</footer>', '</footer>'],
+      ['</html>', '</html>'],
+    ];
+    for (const [search, label] of structChecks) {
+      if (content.includes(search)) htmlTags.push(label);
+      else htmlMissing.push(label);
+    }
+    if (htmlTags.length > 0) sections.push(`HTML TAGS PRESENT: ${htmlTags.join(', ')}`);
+    if (htmlMissing.length > 0 && ext === 'html') sections.push(`HTML TAGS MISSING (still needed): ${htmlMissing.join(', ')}`);
+
+    // Extract CSS selectors (anything before { that is a valid selector)
+    const selectorSet = new Set();
+    const selectorRegex = /^[ \t]*([^{}@/\n*][^{]*?)\s*\{/gm;
+    let m;
+    while ((m = selectorRegex.exec(content)) !== null) {
+      let sel = m[1].trim();
+      // Skip CSS property lines that leaked through (contain : before {)
+      if (sel.includes(':') && !sel.includes('::') && !sel.includes(':hover') &&
+          !sel.includes(':focus') && !sel.includes(':active') && !sel.includes(':first') &&
+          !sel.includes(':last') && !sel.includes(':nth') && !sel.includes(':not') &&
+          !sel.includes(':root')) continue;
+      if (sel.length > 0 && sel.length < 80) selectorSet.add(sel);
+    }
+    if (selectorSet.size > 0) {
+      const selList = [...selectorSet];
+      // Cap to 60 selectors to stay compact
+      const display = selList.length > 60 ? selList.slice(0, 60).join(', ') + ` ... (${selList.length} total)` : selList.join(', ');
+      sections.push(`CSS SELECTORS ALREADY DEFINED (do NOT redefine): ${display}`);
+    }
+
+    // Detect if <style> is open but not closed
+    const styleOpens = (content.match(/<style[\s>]/gi) || []).length;
+    const styleCloses = (content.match(/<\/style>/gi) || []).length;
+    if (styleOpens > styleCloses) {
+      sections.push(`STATUS: <style> tag is OPEN (not closed). Close </style> before starting <body>.`);
+    }
+  }
+
+  // --- JavaScript / TypeScript structure ---
+  if (ext === 'js' || ext === 'ts' || ext === 'jsx' || ext === 'tsx' || ext === 'mjs' || ext === 'cjs') {
+    const funcs = new Set();
+    const funcRegex = /(?:function\s+(\w+)|(?:const|let|var)\s+(\w+)\s*=\s*(?:async\s*)?(?:\([^)]*\)|[^=])\s*=>|class\s+(\w+))/g;
+    let fm;
+    while ((fm = funcRegex.exec(content)) !== null) {
+      const name = fm[1] || fm[2] || fm[3];
+      if (name) funcs.add(name);
+    }
+    if (funcs.size > 0) {
+      const display = [...funcs].slice(0, 40).join(', ');
+      sections.push(`DEFINED: ${display}`);
+    }
+    // Detect exports
+    const expMatch = content.match(/module\.exports\s*=|export\s+(?:default|{)/g);
+    if (expMatch) sections.push(`EXPORTS: ${expMatch.length} export statement(s)`);
+  }
+
+  // --- Python structure ---
+  if (ext === 'py') {
+    const pyDefs = new Set();
+    const pyRegex = /^(?:class|def)\s+(\w+)/gm;
+    let pm;
+    while ((pm = pyRegex.exec(content)) !== null) pyDefs.add(pm[1]);
+    if (pyDefs.size > 0) sections.push(`DEFINED: ${[...pyDefs].join(', ')}`);
+  }
+
+  // --- Universal: last 3 lines for continuation context ---
+  const lastLines = lines.slice(-3).map(l => l.trimEnd()).join('\n');
+  sections.push(`LAST 3 LINES:\n${lastLines}`);
+
+  return `FILE: ${filePath} (${totalLines} lines, ${content.length} chars)\n${sections.join('\n')}`;
+}
+
 module.exports = {
   isNearDuplicate,
   checkFileCompleteness,
@@ -713,5 +835,6 @@ module.exports = {
   classifyResponseFailure,
   progressiveContextCompaction,
   buildToolFeedback,
+  buildFileStructureDigest,
   ExecutionState,
 };

main/agenticChatHelpers.js

@@ -26,6 +26,13 @@ class ConversationSummarizer {
     this.incrementalTask = null;  // {type, target, current} — tracks progress on large tasks
   }
 
+  // ─── Digest builder injection ───
+  // Called once from agenticChat.js to inject the buildFileStructureDigest function
+  // without creating a circular dependency
+  setDigestBuilder(fn) {
+    this._digestBuilder = fn;
+  }
+
   // ─── Goal ───
   setGoal(message) {
     if (!message) return;
@@ -155,18 +162,29 @@ class ConversationSummarizer {
       const chars = content.length;
       if (filePath) {
         if (!this.fileProgress[filePath]) {
-          this.fileProgress[filePath] = { writtenLines: 0, writtenChars: 0, writes: 0 };
+          this.fileProgress[filePath] = { writtenLines: 0, writtenChars: 0, writes: 0, structureDigest: '' };
         }
         if (toolName === 'write_file') {
           // write_file replaces — reset count
-          this.fileProgress[filePath] = { writtenLines: lines, writtenChars: chars, writes: 1 };
+          this.fileProgress[filePath] = { writtenLines: lines, writtenChars: chars, writes: 1, structureDigest: '' };
         } else {
           // append_to_file adds
           this.fileProgress[filePath].writtenLines += lines;
           this.fileProgress[filePath].writtenChars += chars;
           this.fileProgress[filePath].writes++;
         }
 
+        // Build structural digest from full file content
+        // For write_file, params.content IS the full content
+        // For append_to_file, result.fullContent is the full file after append
+        const fullContent = (toolName === 'append_to_file' && result?.fullContent)
+          ? result.fullContent : content;
+        if (this._digestBuilder) {
+          try {
+            this.fileProgress[filePath].structureDigest = this._digestBuilder(filePath, fullContent);
+          } catch (_) {}
+        }
+
         // Update incremental task progress if tracking lines
         if (this.incrementalTask && this.incrementalTask.type === 'lines') {
           // Sum all written lines across all files
@@ -363,14 +381,16 @@ class ConversationSummarizer {
       sections.push(`## RECENT RESULTS (pre-rotation)\n${this._warmTierResults.join('\n')}`);
     }
 
-    // 5d. File progress for incremental tasks
+    // 5d. File progress for incremental tasks — includes structural digest
     const fileProgressKeys = Object.keys(this.fileProgress);
     if (fileProgressKeys.length > 0) {
       const progressLines = fileProgressKeys.map(fp => {
         const p = this.fileProgress[fp];
+        // If a structural digest exists, use it (it includes line/char counts)
+        if (p.structureDigest) return p.structureDigest;
         return `- ${fp}: ${p.writtenLines} lines (${p.writtenChars} chars) written in ${p.writes} operation(s)`;
       });
-      sections.push(`## FILE PROGRESS\n${progressLines.join('\n')}\n**Use append_to_file to continue adding content to existing files.**`);
+      sections.push(`## FILE PROGRESS\n${progressLines.join('\n')}\n**Use append_to_file to continue adding content to existing files. Do NOT redefine any selectors or functions listed above.**`);
     }
 
     // 5e. Incremental task tracking

main/conversationSummarizer.js

@@ -1337,6 +1337,25 @@ class MCPToolServer {
         this._setFileBackup(fullPath, { original: null, timestamp: Date.now(), tool: 'write_file', isNew: true });
       }
 
+      // Fix 57: Overwrite regression guard — if the file already exists with substantially
+      // more content than what's being written, block the write to prevent data loss.
+      // This catches ALL paths: salvage, native tool calls, text-mode parsing.
+      // The model should use append_to_file to add content, not write_file to replace.
+      if (!isNew && existingContent && existingContent.length > 500) {
+        const newLen = (content || '').length;
+        if (newLen < existingContent.length * 0.5) {
+          const existingLines = existingContent.split('\n').length;
+          const newLines = (content || '').split('\n').length;
+          console.log(`[MCP] Fix 57: BLOCKED write_file regression — "${filePath}" has ${existingLines} lines (${existingContent.length} chars) but write_file called with only ${newLines} lines (${newLen} chars). Use append_to_file instead.`);
+          return {
+            success: false,
+            error: `BLOCKED: File "${filePath}" already has ${existingLines} lines (${existingContent.length} chars). Your write_file call contains only ${newLines} lines (${newLen} chars) which would DESTROY existing content. Use append_to_file to add content, or edit_file to modify specific sections. Do NOT use write_file on files you have already written.`,
+            existingLines,
+            existingChars: existingContent.length,
+          };
+        }
+      }
+
       await fs.mkdir(path.dirname(fullPath), { recursive: true });
       // Defensive unescape: if content has no real newlines but has literal \n sequences,
       // the model double-escaped during JSON generation. Convert to real newlines.
@@ -2387,15 +2406,7 @@ class MCPToolServer {
 
   _updateTodo(params) {
     const { id, status, text } = params;
-    // Fix 56: Robust ID resolution — accept the todo's assigned ID (1-based) OR the
-    // array index (0-based). Small models (2-4B) routinely send id=0 for the first todo
-    // because they assume 0-indexed arrays. Instead of failing with "TODO #0 not found",
-    // fall back to treating the id as an array index. Also handle string IDs ("1" vs 1).
-    const numId = typeof id === 'string' ? parseInt(id, 10) : id;
-    let todo = this._todos.find(t => t.id === numId);
-    if (!todo && numId >= 0 && numId < this._todos.length) {
-      todo = this._todos[numId]; // Treat as 0-based array index
-    }
+    const todo = this._todos.find(t => t.id === id);
     if (!todo) return { success: false, error: `TODO #${id} not found` };
     if (status && ['pending', 'in-progress', 'done'].includes(status)) {
       todo.status = status;