ucode-agent 1.12.1 → 1.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucode-agent",
-  "version": "1.12.1",
+  "version": "1.14.0",
   "description": "ucode - a terminal coding agent that reads, edits and runs your code, on NVIDIA and Cohere models.",
   "type": "module",
   "main": "ucode.js",

package/src/core/loop.js

@@ -434,10 +434,24 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     '',
     '## How to work',
     '',
-    'Say what you are about to do, in one short line, before you do it — "now the',
-    'tests", "wiring this into the loop". A line like that before a group of actions is',
-    'what makes the work readable. Keep it to a sentence: the narration is not the',
-    'answer, and three sentences of intent before every step reads as stalling.',
+    'FIRST, EVERY TIME: one short line saying what you are about to do, then the tool',
+    'calls. Never open a turn with a tool call and no words. "Right, the HTML',
+    'structure first." / "Now the state and the render loop." / "That is the layout',
+    'done - onto the animations." / "Let me see what is there." One sentence, your own',
+    'voice, before the actions - not after them, not instead of them, not a',
+    'restatement of the request. The user watches this scroll past, and without those',
+    'lines it is a list of file operations they cannot read intent from.',
+    '',
+    'FIRST, EVERY TIME: write one short line saying what you are about to do, then',
+    'make the tool calls. Never open a turn with a tool call and no words. Examples:',
+    '"Right, the HTML structure first." / "Now the state and the render loop." /',
+    '"That is the layout done - onto the animations." / "Let me see what is there."',
+    'One sentence, your own voice, before the actions - not after them, not instead',
+    'of them, and not a restatement of what was asked. The user is watching this',
+    'scroll past; without those lines it is a list of file operations and they cannot',
+    'tell what you are building. This matters as much as the code.',
+    '',
+
     '',
     'Before you guess at an API, ask: type_of gives the exact signature from the',
     'TypeScript this project has installed, and find_symbol says where something is declared without',
@@ -493,7 +507,8 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     '  writing files. Running the install yourself afterwards just waits for that one.',
     '- When you finish, ucode type-checks what you changed and hands you the errors, so',
     '  there is no need to run tsc yourself.',
-    '- Once the dev server is ready, run look_at_app on the pages you built. Fix what it',
+    '- Do not open or drive a browser. Checking the page in one is something the user',
+    '  asks for with /look; your job is to leave the app in a state worth looking at.',
     '  reports - errors, layout that overflows a phone, the review points worth fixing -',
     '  in one pass, then look once more. A clean second look means it is done: report',
     '  back instead of polishing in circles. Never call an interface finished unlooked at.',
@@ -1367,9 +1382,13 @@ export class Agent {
   reportFailure(call, err) {
     if (!(err instanceof ToolFailure)) throw err;
 
-    this.ui.toolFailed(
-      err instanceof Declined ? 'declined' : `${err.kind}: ${err.failed}`
-    );
+    // Bad arguments are the model talking to itself. "old_string and new_string
+    // are identical" is a correction it will make on the next step, and it means
+    // nothing to whoever is watching except that something went wrong. It goes
+    // to the model, which can act on it, and not to the screen. A refusal the
+    // user made, and anything that actually failed, still shows.
+    if (err instanceof Declined) this.ui.toolFailed('declined');
+    else if (err.kind !== 'bad_args') this.ui.toolFailed(`${err.kind}: ${err.failed}`);
     this.push({
       role: 'tool',
       toolCallId: call.id,
@@ -1815,6 +1834,7 @@ export class Agent {
       case '/copy':     return this.cmdCopy();
       case '/stats':    return this.cmdStats();
       case '/doctor':   return this.cmdDoctor();
+      case '/look':     return this.cmdLook(arg);
       case '/deploy':   return this.cmdDeploy(arg);
       case '/exit':
       case '/quit':     return 'exit';
@@ -1825,11 +1845,42 @@ export class Agent {
     }
   }
 
+  /**
+   * Look at the running app, because the user asked to.
+   *
+   * This used to happen on its own, which meant a browser being driven while
+   * someone was reading, and a window taking the screen mid-thought. It is
+   * the same check as before; the difference is who starts it.
+   */
+  async cmdLook(url) {
+    const { lookAtApp } = await import('../tools/browser.js');
+    const server = runningServers().at(-1);
+    const at = (url ?? '').trim() || server?.url;
+    if (!at) {
+      this.ui.write(theme.warn('  nothing is running to look at.'));
+      this.ui.note('start the app first, or pass a URL: /look http://localhost:3000');
+      return;
+    }
+    this.ui.toolCall(`Looking at ${at}`);
+    try {
+      const out = await lookAtApp({ url: at });
+      this.ui.write(out.content);
+      // The model gets it too, so the next thing it says is about what is
+      // actually on the page rather than what it believes it built.
+      this.push({ role: 'user', content: `I looked at ${at}. This is what is there:
+
+${out.content}` });
+    } catch (err) {
+      this.ui.write(theme.error(`  ${err.failed ?? err.message}`));
+    }
+  }
+
   cmdHelp() {
     const rows = [
       ['/help', 'this list'],
       ['/stats', 'time, steps and tokens this session'],
       ['/doctor', 'check that everything ucode needs is working'],
+      ['/look [url]', 'open the running app and report what is on the page'],
       ['/deploy [folder]', 'put the app online and get its link'],
       ['/model', 'show the models and switch between them'],
       ['/resume', 'pick up an earlier conversation'],

package/src/tools/index.js

@@ -23,6 +23,37 @@ const str = (description) => ({ type: 'string', description });
 const int = (description) => ({ type: 'integer', description });
 const bool = (description) => ({ type: 'boolean', description });
 
+/**
+ * The browser check is deliberately not in `tools`.
+ *
+ * It used to run itself whenever a dev server came up, which meant a window
+ * opening mid-thought and a page being driven while the user was reading. It
+ * is now something asked for: /look runs it, and nothing else does.
+ */
+export const lookAtAppTool =   {
+    name: 'look_at_app',
+    description:
+      'Open the running app in a real browser at a phone width (375px) and a desktop width ' +
+      '(1440px) and report what a person would run into: console errors, failed requests, ' +
+      'content that spills off the side of the screen, broken images, unlabeled buttons and ' +
+      'fields. The first look at an app also brings a designer-style review of the ' +
+      'screenshots; later looks re-run only the fast checks. Use it once the dev server is ' +
+      'ready, fix what it reports, then look once more to confirm. Screenshots are saved ' +
+      'under .ucode/screenshots.',
+    parameters: {
+      type: 'object',
+      properties: {
+        url: str('The local URL the dev server reported, e.g. http://localhost:3000'),
+        paths: {
+          type: 'array',
+          description: 'Pages to open, e.g. ["/", "/settings"]. Defaults to ["/"]. Up to 4.',
+          items: { type: 'string' },
+        },
+      },
+      required: ['url'],
+    },
+  };
+
 export const tools = [
   {
     name: 'create_app',
@@ -416,29 +447,6 @@ export const tools = [
       required: ['commands'],
     },
   },
-  {
-    name: 'look_at_app',
-    description:
-      'Open the running app in a real browser at a phone width (375px) and a desktop width ' +
-      '(1440px) and report what a person would run into: console errors, failed requests, ' +
-      'content that spills off the side of the screen, broken images, unlabeled buttons and ' +
-      'fields. The first look at an app also brings a designer-style review of the ' +
-      'screenshots; later looks re-run only the fast checks. Use it once the dev server is ' +
-      'ready, fix what it reports, then look once more to confirm. Screenshots are saved ' +
-      'under .ucode/screenshots.',
-    parameters: {
-      type: 'object',
-      properties: {
-        url: str('The local URL the dev server reported, e.g. http://localhost:3000'),
-        paths: {
-          type: 'array',
-          description: 'Pages to open, e.g. ["/", "/settings"]. Defaults to ["/"]. Up to 4.',
-          items: { type: 'string' },
-        },
-      },
-      required: ['url'],
-    },
-  },
   {
     name: 'web_search',
     description:
@@ -578,28 +586,20 @@ export async function runTool(name, args = {}, opts = {}) {
 export function describe(name, args = {}) {
   switch (name) {
     case 'read_file':
-      return `Reading ${clip(args.path)}${args.offset > 1 ? ` from line ${args.offset}` : ''}`;
-    case 'read_files': {
-      const names = (args.paths ?? []).map((p) => String(p));
-      const joined = names.join(', ');
-      return names.length && joined.length <= 60 ? `Reading ${joined}` : `Reading ${names.length} files`;
-    }
+    case 'read_files':
+      // Which file is in the diff and in the result; the transcript only has to
+      // say what kind of work is going on, so a run of them folds into one line.
+      return 'Reading files';
     case 'write_file':
-      return `Writing ${clip(args.path)}`;
-    case 'batch_write': {
-      const n = args.files?.length ?? 0;
-      const first = args.files?.[0]?.path;
-      return n === 1 && first ? `Writing ${clip(first)}` : `Writing ${n} files`;
-    }
+      return 'Writing app';
+    case 'batch_write':
+      return 'Writing app';
     case 'edit_file':
-      return `Editing ${clip(args.path)}`;
+      return 'Writing app';
     case 'multi_edit':
-      return `Editing ${clip(args.path)}, ${args.edits?.length ?? 0} changes`;
-    case 'edit_files': {
-      const n = args.files?.length ?? 0;
-      const first = args.files?.[0]?.path;
-      return n === 1 && first ? `Editing ${clip(first)}` : `Editing ${n} files`;
-    }
+      return 'Writing app';
+    case 'edit_files':
+      return 'Writing app';
     case 'update_plan':
       return 'Updating the plan';
     case 'delegate':

package/src/ui/screen.js

@@ -39,7 +39,7 @@ import chalk from 'chalk';
 import {
   theme, blue, sky, deep, dim, edge, ADDED, REMOVED, BANNER, BANNER_WIDTH, SPINNER,
   boxTop, boxBottom, boxRow, visLen, padVis, clip, wrapAnsi,
-  shortenPath, asLabel, ensureColour, planLine, bare, narration, narrationMark, groupKind, groupLabel, groupTarget, runLine } from './theme.js';
+  shortenPath, asLabel, ensureColour, planLine, bare, narration, narrationMark, groupKind, groupLabel, groupTarget, runLine, planRows } from './theme.js';
 import { FRAME_MS, fitActivity, shimmer, spinnerGlyph, formatDuration, doneLine, stepPaint } from './activity.js';
 import { renderer, render, polish } from './markdown.js';
 import { VERSION } from '../core/version.js';
@@ -58,7 +58,7 @@ export function isLabel(text) {
 export const COMMANDS = [
   '/help', '/model', '/models', '/session', '/sessions', '/resume',
   '/new', '/remember', '/skills', '/clear', '/search', '/copy', '/exit',
-  '/stats', '/doctor', '/deploy',
+  '/stats', '/doctor', '/deploy', '/look',
 ];
 
 // ANSI ----------------------------------------------------------------------
@@ -297,40 +297,66 @@ export class Screen {
     // U+25CF, not U+23FA: the latter carries emoji presentation, which Windows
     // Terminal draws as a white circle on a blue tile.
     const kind = groupKind(label);
-    const run = this.run;
-    // The run's own line is either the last one, or the last but one with its
-    // result underneath. Anything further down means something else was said
-    // in between, and the run is over.
-    const gap = run ? this.lines.length - 1 - run.at : Infinity;
-
-    // A second step of the same kind rewrites the line the first one wrote,
-    // rather than adding another almost-identical one beneath it.
-    if (run && run.kind === kind && gap <= 1) {
-      if (gap === 1) this.lines.pop();   // its single result line, now counted
+    // One line per kind of work for as long as the model is working on one
+    // thing. Reading, writing and reading again used to draw six lines that
+    // said three things; now the "Reading files" line it already has is the
+    // one that counts up, wherever it sits.
+    const run = (this.segment ??= new Map()).get(kind);
+
+    if (run && this.lines[run.at] !== undefined) {
       run.count++;
       run.label = label;
       run.targets.push(groupTarget(label));
-      this.paintRun();
+      this.run = run;
+      this.paintRun({ live: true });
     } else {
       this.push(`${narrationMark()} ${narration(asLabel(label))}`);
       this.run = {
         kind, count: 1, at: this.lines.length - 1, label,
         targets: [groupTarget(label)], added: 0, removed: 0,
       };
+      this.segment.set(kind, this.run);
+      this.paintRun({ live: true });
     }
     this.updateSpinner(label);
   }
 
-  /** Anything that is not another step of the same kind ends the run. */
-  endRun() { this.run = null; }
+  /**
+   * The model speaking — or a plan, or a failure — ends the segment.
+   *
+   * Up to that point a kind of work keeps one line and counts up on it. After
+   * it, the next read is a new piece of work and deserves its own line, which
+   * is what makes the transcript read as a sequence of things done rather
+   * than a set of running totals.
+   */
+  endRun() {
+    if (this.run) this.paintRun({ live: false });
+    this.run = null;
+    this.segment = new Map();
+  }
 
   /** Redraw the run's single line from what it has accumulated. */
-  paintRun() {
+  /**
+   * Redraw the run's single line from what it has accumulated.
+   *
+   * While its step is still running the text shimmers, which is the only
+   * thing on screen saying "this is happening now" once the per-step result
+   * lines are gone. It settles to plain dim the moment the step finishes, so
+   * the finished ones above stay quiet.
+   */
+  paintRun({ live = this.run?.live } = {}) {
     if (!this.run) return;
-    this.lines[this.run.at] = `${narrationMark()} ${narration(asLabel(runLine(this.run)))}`;
+    const text = asLabel(runLine(this.run));
+    this.run.live = live;
+    this.lines[this.run.at] = `${narrationMark()} ${live ? shimmer(text, this.tick * FRAME_MS) : narration(text)}`;
     this.render();
   }
 
+  /** Let the line in flight animate, one frame per tick. */
+  paintLiveRun() {
+    if (this.run?.live && this.lines[this.run.at] !== undefined) this.paintRun({ live: true });
+  }
+
   /**
    * A change, as its two numbers.
    *
@@ -347,8 +373,10 @@ export class Screen {
 
   /** The checklist, when the model updates it. One line, wrapped if it must. */
   plan(items) {
-    const line = planLine(items);
-    if (line) this.push(line);
+    const rows = planRows(items);
+    if (!rows.length) return;
+    this.endRun();          // a plan is not another step of whatever came before
+    for (const row of rows) this.push(row);
   }
 
   /**
@@ -359,7 +387,10 @@ export class Screen {
    * already names the step, and a change adds its numbers to that same line.
    * Only a failure earns a line of its own.
    */
-  toolResult() {}
+  toolResult() {
+    // The step is over: the line stops moving and joins the quiet ones above.
+    if (this.run) this.paintRun({ live: false });
+  }
 
   toolFailed(summary) {
     // A failure is never folded away.
@@ -508,7 +539,10 @@ export class Screen {
   thinkingEnd() {
     if (this.thoughtSince === undefined) return;
     const seconds = Math.round((Date.now() - this.thoughtSince) / 1000);
-    if (seconds >= 2) this.push(dim(`  ⋮ thought for ${seconds}s`));
+    // How long it thought is not what the reader is here for, and a line of it
+    // between every step broke every run of steps into singletons — which is
+    // why nothing folded. The time is still on the status row while it runs.
+    void seconds;
     this.thoughtSince = undefined;
   }
 
@@ -851,6 +885,7 @@ export class Screen {
     if (this.spinTimer) return;
     this.spinTimer = setInterval(() => {
       this.tick++;
+      this.paintLiveRun();
       this.paintStatus();
     }, FRAME_MS);
     this.spinTimer.unref?.();

package/src/ui/theme.js

@@ -263,18 +263,41 @@ export function asLabel(text) {
  * The model's checklist, as one short line — done ticked, the current item
  * marked, the rest dim — so progress is visible without taking over the screen.
  */
+/**
+ * The plan, as a block rather than a sentence.
+ *
+ * Six steps joined with separators made one line far wider than any terminal,
+ * so it wrapped — and a wrapped checklist has its ticks in the middle of the
+ * text, which is unreadable. Down the page each step keeps its own row, its
+ * mark stays in the left column, and the eye can find the one in progress
+ * without reading any of the others.
+ *
+ * Returns the rows; the caller pushes them.
+ */
+export function planRows(items) {
+  const list = (Array.isArray(items) ? items : []).slice(0, 8);
+  if (!list.length) return [];
+  const done = list.filter((i) => i?.done).length;
+  const current = list.findIndex((i) => !i?.done);
+
+  const rows = [`  ${sky(`plan ${done}/${list.length}`)}`];
+  list.forEach((item, i) => {
+    const text = clip(String(item?.text ?? '').trim(), 64);
+    if (item?.done) rows.push(`    ${theme.ok('✓')} ${dim(text)}`);
+    else if (i === current) rows.push(`    ${blue('▸')} ${chalk.white(text)}`);
+    else rows.push(`    ${dim('○')} ${dim(text)}`);
+  });
+  return rows;
+}
+
+/** Kept for the plain interface, which has one line to work with. */
 export function planLine(items) {
   const list = (Array.isArray(items) ? items : []).slice(0, 6);
   if (!list.length) return '';
   const done = list.filter((i) => i?.done).length;
   const current = list.findIndex((i) => !i?.done);
-  const parts = list.map((item, i) => {
-    const text = clip(String(item?.text ?? '').trim(), 30);
-    if (item?.done) return `${theme.ok('✓')} ${dim(text)}`;
-    if (i === current) return `${blue('▸')} ${chalk.white(text)}`;
-    return dim(`○ ${text}`);
-  });
-  return `  ${sky(`plan ${done}/${list.length}`)}  ${parts.join(dim('  ·  '))}`;
+  const now = current === -1 ? 'done' : clip(String(list[current]?.text ?? '').trim(), 40);
+  return `  ${sky(`plan ${done}/${list.length}`)}  ${chalk.white(now)}`;
 }
 
 /**