nothumanallowed 16.0.45 → 16.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "16.0.45",
+  "version": "16.0.46",
   "description": "Local AI assistant: 80 tools (Gmail, Calendar, Drive, GitHub, Slack, browser, code, files), 38 agents, visual workflows (Studio, AWF, WebCraft). Install with `npm i -g nothumanallowed`, run with `nha ui`. Free tier built-in (Liara), no API key required. Your data stays on your PC — OAuth tokens local, no cloud. Open-source MIT.",
   "type": "module",
   "bin": {

package/src/constants.mjs

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export const VERSION = '16.0.45';
+export const VERSION = '16.0.46';
 export const BASE_URL = 'https://nothumanallowed.com/cli';
 export const API_BASE = 'https://nothumanallowed.com/api/v1';
 

package/src/server/routes/webcraft.mjs

@@ -233,12 +233,24 @@ class SandboxManager {
     // Detects "incomplete styling" (LLM truncated CSS generation) and calls
     // the LLM automatically to extend the CSS file with rules for the missing
     // HTML selectors. NO user intervention required.
+    // Iterates up to 2 times to handle large projects where a single extend
+    // might not cover all selectors (e.g. 200+ missing selectors).
     try {
       const projectName = path.basename(projectDir);
       const cfg = loadConfig();
-      const styleResult = await _autoExtendStylesIfNeeded(projectName, cfg, emit, { minCoverage: 0.6 });
-      if (styleResult.extended) {
-        emit({ type: 'status', msg: `Auto-extended styles: ${styleResult.file} (${styleResult.missingBefore - styleResult.missingAfter} new selectors covered).` });
+      const maxPasses = 2;
+      let totalCovered = 0;
+      for (let pass = 1; pass <= maxPasses; pass++) {
+        const styleResult = await _autoExtendStylesIfNeeded(projectName, cfg, emit, { minCoverage: 0.85 });
+        if (!styleResult.extended) {
+          if (styleResult.reason === 'coverage acceptable') break;
+          // LLM failed or skipped — don't loop on a broken provider
+          break;
+        }
+        const newlyCovered = (styleResult.missingBefore || 0) - (styleResult.missingAfter || 0);
+        totalCovered += newlyCovered;
+        emit({ type: 'status', msg: `Pass ${pass}/${maxPasses}: ${styleResult.file} extended — ${newlyCovered} new selectors covered (total ${totalCovered}).` });
+        if ((styleResult.coverageAfter || 0) >= 0.85) break;
       }
     } catch (e) {
       emit({ type: 'warn', msg: `Auto-extend styles failed: ${(e.message || e).slice(0, 200)}` });
@@ -4254,27 +4266,57 @@ export async function _autoExtendStylesIfNeeded(projectName, config, emit, opts)
     } catch {}
   }
 
-  const sys = 'You are an expert frontend designer. Extend the existing CSS to cover ALL classes/ids found in the HTML, maintaining the existing design language (colors, gradients, typography, spacing). Add responsive mobile-first rules. Output ONLY the complete extended CSS file content — no markdown fences, no explanations.';
+  const sys = `You are an expert frontend designer producing PRODUCTION-QUALITY CSS.
+
+DESIGN REQUIREMENTS (NON-NEGOTIABLE):
+- WCAG AA contrast: text-on-background ratio >= 4.5:1. NO washed-out pastels for text. Body text must be near-black on light bg, or near-white on dark bg.
+- Use VIBRANT accent colors with sufficient saturation (HSL S >= 60%, L between 35-65% for accents).
+- Cover EVERY selector listed — including footer, header, nav, hero, sections, cards, buttons, forms, modals, tooltips.
+- Use modern CSS: flex/grid layouts, custom properties for colors, smooth transitions (200-300ms), subtle shadows.
+
+OUTPUT: ONLY the complete extended CSS file content. No markdown fences, no explanations, no preamble. The output will be written directly to disk.`;
   const user =
     `Extend this CSS file: \`${targetRel}\`\n\n` +
     `Current CSS (${target.size} bytes, ${analysis.cssRuleCount} rules):\n\`\`\`css\n${target.content.slice(0, 6000)}\n\`\`\`\n\n` +
-    `Missing selectors (${analysis.missing.length}):\n${analysis.missing.slice(0, 50).join(', ')}\n\n` +
+    `ALL missing selectors (${analysis.missing.length} — cover every single one):\n${analysis.missing.join(', ')}\n\n` +
     `HTML files for context:\n${htmlSample}\n\n` +
-    `Output the COMPLETE extended CSS file (existing rules + new rules for all missing selectors). Add:\n` +
-    `- img { max-width: 100%; height: auto; object-fit: cover; }\n` +
-    `- Layout for each missing class/id, coherent with the existing design language\n` +
-    `- Responsive breakpoints at 768px and 480px\n` +
-    `- Hover/transition states for interactive elements`;
-
-  if (emit) emit({ type: 'status', msg: `CSS coverage ${(analysis.coverage * 100).toFixed(0)}% (${analysis.missing.length} selectors missing). Auto-extending ${targetRel} via LLM...` });
-
+    `Output the COMPLETE extended CSS file. Required additions:\n` +
+    `- img { max-width: 100%; height: auto; object-fit: cover; display: block; }\n` +
+    `- Footer, header, nav with proper layout and visible styling (NOT transparent backgrounds with low-contrast text)\n` +
+    `- Rules for EVERY one of the ${analysis.missing.length} missing selectors above\n` +
+    `- Responsive breakpoints at 1024px, 768px, 480px (mobile-first)\n` +
+    `- Hover/focus/transition states for buttons, links, cards\n` +
+    `- Color contrast must pass WCAG AA: text-on-bg >= 4.5:1`;
+
+  if (emit) emit({ type: 'status', msg: `CSS coverage ${(analysis.coverage * 100).toFixed(0)}% (${analysis.missing.length} selectors missing). Auto-extending ${targetRel} via LLM (timeout 60s)...` });
+
+  // Call LLM with timeout + progress heartbeat. Otherwise a slow/stuck Liara
+  // leaves the user staring at "Auto-extending..." forever with no feedback.
   let body = '';
+  let lastChunkAt = Date.now();
+  const startedAt = Date.now();
+  const timeoutMs = 60_000;
+  const heartbeatInterval = setInterval(() => {
+    if (!emit) return;
+    const elapsed = ((Date.now() - startedAt) / 1000).toFixed(0);
+    const sinceLast = ((Date.now() - lastChunkAt) / 1000).toFixed(0);
+    emit({ type: 'status', msg: `LLM extend: ${elapsed}s elapsed, ${body.length} bytes received (${sinceLast}s since last chunk)` });
+  }, 5_000);
+
   try {
-    await callLLMStream(config, sys, user, (chunk) => { body += chunk; }, { max_tokens: 8192 });
+    await Promise.race([
+      callLLMStream(config, sys, user, (chunk) => {
+        body += chunk;
+        lastChunkAt = Date.now();
+      }, { max_tokens: 8192 }),
+      new Promise((_, reject) => setTimeout(() => reject(new Error('LLM timeout after ' + (timeoutMs / 1000) + 's')), timeoutMs)),
+    ]);
   } catch (e) {
-    if (emit) emit({ type: 'warn', msg: `CSS extend failed: ${(e.message || e).slice(0, 200)}` });
-    return { extended: false, reason: 'llm_failed', error: e.message };
+    clearInterval(heartbeatInterval);
+    if (emit) emit({ type: 'warn', msg: `CSS extend failed: ${(e.message || e).slice(0, 200)}. Sandbox continues with current CSS — open chat to extend manually.` });
+    return { extended: false, reason: 'llm_failed', error: e.message, partialBytes: body.length };
   }
+  clearInterval(heartbeatInterval);
 
   // Strip markdown fences
   body = body.replace(/^```[a-zA-Z]*\n?/m, '').replace(/\n?```\s*$/m, '').trim();