ucode-agent 1.43.0 → 1.45.0

package/README.md

@@ -27,7 +27,7 @@ corner:
          add a dark mode toggle that remembers the choice
 
 
-                                                                           v1.43.0
+                                                                           v1.44.0
 ```
 
 A light crosses the wordmark once as it opens, and the three lines under the box

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucode-agent",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "description": "ucode - a terminal coding agent that reads, edits and runs your code, on NVIDIA and Cohere models.",
   "type": "module",
   "main": "ucode.js",
@@ -53,6 +53,7 @@
     "playwright-core": "^1.63.0"
   },
   "devDependencies": {
+    "@types/node": "^26.5.1",
     "typescript": "^5.9.3"
   },
   "publishConfig": {

package/src/core/csscheck.js

@@ -0,0 +1,77 @@
+/**
+ * csscheck.js — a custom property that was never defined.
+ *
+ * `padding: var(--space-md)` where nothing ever declared `--space-md` does not
+ * warn, does not fall back and does not appear in the console. The browser
+ * throws the whole declaration away at parse time, so the padding is simply
+ * not there — and the page still renders, still looks deliberate, and is
+ * wrong in a way that reads as a design choice rather than a bug.
+ *
+ * It came out of a build here: a stylesheet that declared --space-xs, --space,
+ * --space-sm, --space-lg and --space-xl, then used --space-md four times.
+ * Nothing in the checks looked at CSS, so nothing said a word.
+ *
+ * The check is one whole app at a time rather than one file at a time,
+ * because the definition and the use are routinely in different files: a
+ * single-page app keeps its tokens in styles.css and reaches for them from an
+ * inline <style>, and reporting that as undefined would be worse than not
+ * looking. Whatever is passed in is the world; a name defined anywhere in it
+ * counts as defined everywhere.
+ */
+
+/** Definitions: `--name:` at the start of a declaration. */
+const DEFINED = /(?:^|[;{\s])(--[A-Za-z0-9_-]+)\s*:/g;
+/** Uses: `var(--name)` — and whether a fallback follows the name. */
+const USED = /var\(\s*(--[A-Za-z0-9_-]+)\s*([,)])/g;
+/** A name handed to CSS from script is defined, just not in a stylesheet. */
+const FROM_JS = /setProperty\(\s*['"`](--[A-Za-z0-9_-]+)/g;
+/** Inline styles in a page are part of that page's CSS. */
+const STYLE_TAGS = /<style\b[^>]*>([\s\S]*?)<\/style\s*>/gi;
+
+/** Comments hold examples and dead rules; neither defines anything. */
+const uncommented = (css) => css.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '));
+
+/** The CSS in a source file: a stylesheet whole, a page's <style> blocks only. */
+function cssOf(rel, text) {
+  if (!/\.html?$/i.test(rel)) return uncommented(text);
+  // Everything outside a <style> is blanked rather than dropped, so a line
+  // number in the result is still a line number in the file.
+  let out = text.replace(/[^\n]/g, ' ');
+  for (const m of text.matchAll(STYLE_TAGS)) {
+    const at = m.index + m[0].indexOf(m[1]);
+    out = out.slice(0, at) + uncommented(m[1]) + out.slice(at + m[1].length);
+  }
+  return out;
+}
+
+/**
+ * Every `var(--x)` in `sources` with no `--x` defined anywhere in them and no
+ * fallback of its own.
+ *
+ * @param {{rel: string, text: string}[]} sources every file of one app that
+ *   holds CSS — stylesheets, pages with inline <style>, and any script that
+ *   sets a property, which defines names without declaring them.
+ * @returns {{rel: string, line: number, name: string}[]}
+ */
+export function checkCss(sources = []) {
+  const files = sources.map(({ rel, text }) => ({ rel, css: cssOf(rel, String(text ?? '')) }));
+
+  const defined = new Set();
+  for (const { css } of files) for (const m of css.matchAll(DEFINED)) defined.add(m[1]);
+  for (const { text } of sources) for (const m of String(text ?? '').matchAll(FROM_JS)) defined.add(m[1]);
+
+  const problems = [];
+  const seen = new Set();
+  for (const { rel, css } of files) {
+    for (const m of css.matchAll(USED)) {
+      const [, name, next] = m;
+      if (next === ',') continue;            // it carries its own fallback
+      if (defined.has(name)) continue;
+      const key = `${rel}:${name}`;
+      if (seen.has(key)) continue;           // once per name per file, not once per use
+      seen.add(key);
+      problems.push({ rel, name, line: css.slice(0, m.index).split('\n').length });
+    }
+  }
+  return problems;
+}

package/src/core/jslogic.js

@@ -0,0 +1,69 @@
+/**
+ * jslogic.js — the logic mistakes, in the system prompt, every turn.
+ *
+ * Skills are disclosed progressively and that is right for almost everything:
+ * a body loads when the work matches it. This does not, because the failures
+ * below do not announce themselves. They arrive in the middle of a build
+ * nobody called "a JavaScript task" — an empty state that stops coming back,
+ * a listener attached to a row that has since been replaced — and by the time
+ * the work looks like it needs a guide, the guide is being read too late.
+ *
+ * So it is always on, and the price of that is length: every word here is
+ * re-read by the provider on every step of every build. It is kept to the
+ * mistakes that have actually shipped from here, in the shortest form that
+ * still says what to do instead. Anything a parser could catch belongs in a
+ * check — see htmlcheck.js — not in this list. Nothing general about
+ * JavaScript belongs here at all: the model already knows it, and a paragraph
+ * confirming what it knows costs the same as one it does not.
+ *
+ * The vanilla section is drawn from builds that came out of ucode looking
+ * finished and were not. The framework section is the same failures one level
+ * up.
+ */
+
+export const JS_LOGIC = `## The logic mistakes that ship looking finished
+
+Every one of these renders. None of them throws where you can see it. Check
+each against what you are writing, before you write it.
+
+In a page:
+
+- **Empty is a state, not a starting position.** A render function that clears
+  its container decides what zero items looks like, in that same function.
+  Markup sitting in index.html, or one render call at start-up, survives the
+  first paint and then never comes back: add an item, delete it, and the list
+  is blank for good.
+- **User text goes in with textContent.** Into innerHTML, a task named
+  \`<img src=x onerror=alert(1)>\` runs, and one reading \`5 < 6\` silently eats
+  the rest of the row. Build rows with createElement and set .textContent.
+- **Every var(--x) needs a --x in :root.** An undefined custom property does
+  not fall back and does not warn — the browser discards the whole declaration,
+  so the padding is simply missing. Use only names you defined.
+- **One listener on the container, not one per row.** Re-rendering throws the
+  rows away and their listeners with them. Listen on the list and read
+  event.target.closest('[data-id]').
+- **An id that goes through the DOM comes back a string.** dataset.id is
+  "1738", never 1738, so === against a numeric id is always false. Make ids
+  strings when you create them.
+- **Saved is not loaded.** Writing localStorage is half of it: read it as the
+  page boots, before the first render, and confirm a refresh keeps the state.
+- **A missing element kills every line after it.** getElementById returns null
+  for a typo, .addEventListener on it throws, and the rest of the module never
+  runs — so every later handler in that file is silently never attached. One
+  typo, and nothing on the page works.
+
+In React or Next, the same failures one level up:
+
+- **Setting state does not change the variable you are holding.** Two
+  setCount(count + 1) in one handler add one. Pass a function when the next
+  value depends on the last.
+- **State is replaced, never edited.** items.push(x) then setItems(items) is
+  the same reference, so nothing re-renders.
+- **Hooks run every render, in order** — never inside an if, a loop, or after
+  an early return.
+- **An effect that sets what it depends on is a loop**, and one with no
+  dependency array runs after every render.
+- **key={index} is not identity.** On a list that reorders or filters, it moves
+  state onto the wrong row.
+- **"use client" is per file, at the top.** State, an event handler or a
+  browser API in a server file fails at build, not at run.`;

package/src/core/loop.js

@@ -14,10 +14,11 @@
 import path from 'node:path';
 import os from 'node:os';
 import { appendFileSync, existsSync } from 'node:fs';
-import { readFile, access, mkdir } from 'node:fs/promises';
+import { readFile, readdir, access, mkdir } from 'node:fs/promises';
 import { testRunnerFor, relatedCommand, summariseFailures } from './tests.js';
 import { LogWatch } from './livelog.js';
 import { checkHtml } from './htmlcheck.js';
+import { checkCss } from './csscheck.js';
 import { runningServers } from '../tools/shell.js';
 import { unprefixOwnFolder } from './relink.js';
 import { beginTurn, undoTurn, changedCount } from './undo.js';
@@ -28,7 +29,8 @@ import {
   MODELS, DEFAULT_MODEL, PROVIDER, fallbackFor,
 } from './provider.js';
 import {
-  tools, runTool, describe, setRoot, setConfirm, PARALLEL_SAFE, WRITES, FILE_WRITES,
+  tools, runTool, describe, setRoot, setConfirm, setRequest,
+  PARALLEL_SAFE, WRITES, FILE_WRITES,
 } from '../tools/index.js';
 import { projectMap, loadMemory, hasCode, remember, MEMORY_FILE } from './context.js';
 import { autoUpdate } from './updater.js';
@@ -38,14 +40,16 @@ import {
 } from './history.js';
 import { fold, usage, tooBig, SUMMARY_PROMPT, forSummary } from './window.js';
 import { loadSkills, catalogue, findSkill, skillMessage, autoLoadFor } from './skills.js';
-import { Screen, isLabel } from '../ui/screen.js';
+import { Screen } from '../ui/screen.js';
 import { Plain } from '../ui/plain.js';
-import { theme, blue, sky, dim, formatTokens, relativeTime, shortenPath, clip } from '../ui/theme.js';
+import { theme, blue, sky, dim, formatTokens, relativeTime, shortenPath, clip,
+  asNarrationLine } from '../ui/theme.js';
 import { Failure, ToolFailure, Declined } from './failure.js';
 import { StuckWatch, eventFor, describeHit } from './stuck.js';
 import { serversReadySince } from '../tools/shell.js';
 import { formatDuration } from '../ui/activity.js';
 import { runDoctor } from './doctor.js';
+import { JS_LOGIC } from './jslogic.js';
 import { deploy } from '../tools/deploy.js';
 
 /**
@@ -605,13 +609,13 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     '  - One line when you move between the big pieces of work: "The layout is done,',
     '    now the animations."',
     '  - One line at the end saying what it does and how to try it.',
-    'That closing line is ONE OR TWO SENTENCES, and SIX LINES IS THE HARD CEILING.',
+    'That closing line is ONE OR TWO SENTENCES, and FIVE LINES IS THE HARD CEILING.',
     'Never a checklist, never a feature list, never ticks or bullets walking through',
     'the request item by item, never a list of the files you touched - the user',
     'watched them go past. "Tide is built - open tide/index.html, or serve the folder',
     'and visit it." Anything longer is a status report nobody asked for, and it is',
     'the last thing on screen, so it is what the whole session looks like. ucode cuts',
-    'the closing message to eight lines before it is drawn, so anything past that is',
+    'the closing message to five lines before it is drawn, so anything past that is',
     'written for nobody: say the one thing that matters and stop.',
     'That is all. A line before every tool call is not narration, it is noise: the',
     'steps already show on screen, and repeating them in words buries the few',
@@ -632,6 +636,13 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     'the request repeated back. Say it the way you would to someone watching over',
     'your shoulder, who can already see the screen.',
     '',
+    'Every one of those lines is ONE SENTENCE, because that is all that is drawn:',
+    'anything you write beside a tool call is cut to a single status line, so a',
+    'paragraph there loses everything after its first sentence. The closing message',
+    '- the one with no tool call after it - is the only prose the user reads.',
+    '',
+    JS_LOGIC,
+    '',
 
     '',
     '',
@@ -1107,6 +1118,7 @@ export class Agent {
     this.declines = 0;
     this.apps = [];
     forgetReviews(); // a new request: its apps get a fresh design review
+    setRequest(input); // create_app checks this before choosing a starter
     const images = await this.attachImages(input);
     this.push(images.length
       ? { role: 'user', content: input, images }
@@ -1346,7 +1358,10 @@ export class Agent {
       // message, the last thing on screen, and it gets cut to eight lines.
       const closing = !narrating && (this.touched.size > 0 || this.ranSomething);
       if (streaming) this.ui.streamEnd({ asNarration: narrating, closing });
-      else if (reply.text && narrating && isLabel(reply.text)) this.ui.narrate(reply.text);
+      // Anything said beside a tool call is narration, however long it ran on:
+      // it is cut to a status line instead of being printed as an answer. Only
+      // the closing message — the one with no tool call after it — is prose.
+      else if (reply.text && narrating) this.ui.narrate(asNarrationLine(reply.text));
       else if (reply.text) this.ui.assistant(reply.text, { closing });
       if (closing && reply.text) this.checkClaims(reply.text);
 
@@ -2095,6 +2110,55 @@ export class Agent {
       else if (/\.[cm]?js$/i.test(rel)) singles.push({ abs, rel, command: `node --check "${abs}"` });
     }
 
+    // CSS is checked a folder at a time, not a file at a time: a token
+    // declared in styles.css and reached for from an inline <style> is
+    // defined, and either file read on its own would call it undefined.
+    // Definitions are gathered from everything beside the changed files;
+    // problems are reported only in the files this turn actually wrote, so a
+    // build is never interrupted by something it did not touch.
+    const rels = (abs) => path.relative(root, abs).split(path.sep).join('/');
+    const group = (found) => {
+      const by = new Map();
+      for (const b of found) {
+        if (!by.has(b.rel)) by.set(b.rel, []);
+        by.get(b.rel).push(b);
+      }
+      return by;
+    };
+    const cssDirs = new Set();
+    for (const rel of changed) {
+      if (/\.(?:css|html?)$/i.test(rel)) cssDirs.add(path.dirname(path.resolve(root, rel)));
+    }
+    if (cssDirs.size) {
+      const sources = [];
+      const seen = new Set();
+      const take = async (abs) => {
+        if (seen.has(abs)) return;
+        seen.add(abs);
+        const text = await readFile(abs, 'utf8').catch(() => null);
+        if (text !== null) sources.push({ rel: rels(abs), text });
+      };
+      for (const dir of cssDirs) {
+        for (const entry of await readdir(dir, { withFileTypes: true }).catch(() => [])) {
+          if (entry.isFile() && /\.(?:css|html?|[cm]?js)$/i.test(entry.name)) {
+            await take(path.join(dir, entry.name));
+          }
+        }
+      }
+      const mine = new Set(changed.map((rel) => rels(path.resolve(root, rel))));
+      for (const rel of changed) await take(path.resolve(root, rel));
+
+      const undefinedVars = checkCss(sources).filter((b) => mine.has(b.rel));
+      for (const [rel, found] of group(undefinedVars)) {
+        problems.push(
+          `${rel} — ${found.length === 1 ? 'a custom property is' : `${found.length} custom properties are`} ` +
+          'used and never defined. CSS does not warn about this: the browser throws away the whole ' +
+          'declaration, so the value is silently missing and the page still renders.\n' +
+          found.map((b) => `  line ${b.line}: var(${b.name})`).join('\n')
+        );
+      }
+    }
+
     const check = async (label, command, cwd) => {
       // The spinner only, never a transcript line. This pass runs after the
       // model has finished speaking, so a step logged here is the last thing