ucode-agent 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucode-agent",
-  "version": "1.12.0",
+  "version": "1.13.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,12 @@ 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.',
+    '- Say what you are about to do before you do it, in one short line, every time you',
+    '  pick up a new piece of work: "Right, the HTML structure first.", "Now the state',
+    '  and the render loop.", "That is the layout done - onto the animations." Without',
+    '  it the screen is a list of file operations and the user cannot tell what you are',
+    '  building or why. One sentence, in your own voice, then the actions. Not three',
+    '  sentences, and not a restatement of the request.',
     '',
     '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 +495,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.',
@@ -1815,6 +1818,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 +1829,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 ----------------------------------------------------------------------
@@ -92,6 +92,8 @@ const HIDE = `${ESC}[?25l`;
 const SHOW = `${ESC}[?25h`;
 const HOME = `${ESC}[H`;
 const CLEAR_LINE = `${ESC}[K`;
+/** Written out rather than inline, so no edit can turn it into a real break. */
+const NEWLINE = String.fromCharCode(10);
 const at = (row, col) => `${ESC}[${row};${col}H`;
 const title = (t) => `${ESC}]0;${t}\x07`;
 
@@ -345,8 +347,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);
   }
 
   /**
@@ -506,7 +510,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;
   }
 
@@ -603,15 +610,47 @@ export class Screen {
   // -- input box -----------------------------------------------------------
 
   /** The typed line, wrapped to the inside of a box `width` characters across. */
+  /**
+   * The typed text, laid out as rows inside the box.
+   *
+   * A line break in the buffer is a row of its own before any wrapping is
+   * considered. Slicing the text into fixed widths without looking for one
+   * put the newline into the frame instead, and the terminal obeyed it — the
+   * pasted text walked out of the box and over the transcript beside it.
+   *
+   * `starts` records where each row begins in the text, so the caret can be
+   * placed by looking up rather than by counting characters a second way and
+   * hoping the two agree.
+   */
   inputLines(width = this.inner()) {
     const prefix = this.pendingPrompt ? `${this.pendingPrompt} ` : '› ';
     const full = prefix + this.buffer;
 
     const rows = [];
-    for (let i = 0; i < full.length; i += width) rows.push(full.slice(i, i + width));
-    if (rows.length === 0) rows.push(prefix);
+    const starts = [];
+    let at = 0;
+
+    for (const para of full.split(NEWLINE)) {
+      let i = 0;
+      do {
+        rows.push(para.slice(i, i + width));
+        starts.push(at + i);
+        i += width;
+      } while (i < para.length);
+      at += para.length + 1; // the newline itself
+    }
 
-    return { rows, prefix, width };
+    if (rows.length === 0) { rows.push(prefix); starts.push(0); }
+    return { rows, prefix, width, starts };
+  }
+
+  /** Which row the caret sits on, and how far along it. */
+  caretAt(width) {
+    const { rows, prefix, starts } = this.inputLines(width);
+    const index = prefix.length + this.cursor;
+    let row = 0;
+    while (row + 1 < starts.length && starts[row + 1] <= index) row++;
+    return { row, col: Math.min(index - starts[row], rows[row].length), rows };
   }
 
   viewportHeight() {
@@ -1255,17 +1294,13 @@ export class Screen {
   caret() {
     if (this.welcoming()) {
       const g = this.welcomeGeometry();
-      const { rows, prefix, width } = this.inputLines(g.boxWidth - 4);
-      const index = prefix.length + this.cursor;
-      const row = Math.min(Math.floor(index / width), rows.length - 1);
+      const { row, col } = this.caretAt(g.boxWidth - 4);
       // g.boxTop is 0-based and the typed lines start one below the border.
-      return [g.boxTop + 2 + row, g.left + 3 + (index % width)];
+      return [g.boxTop + 2 + row, g.left + 3 + col];
     }
 
-    const { rows, prefix, width } = this.inputLines();
-    const index = prefix.length + this.cursor;
-    const row = Math.min(Math.floor(index / width), rows.length - 1);
-    const col = 3 + (index % width);
+    const { row, col: at, rows } = this.caretAt();
+    const col = 3 + at;
     // Counting up from the bottom: the box border is the last row, the status
     // row is above it, then the blank row, then the typed lines.
     const firstRow = this.rows - 2 - rows.length;
@@ -1354,10 +1389,10 @@ export class Screen {
 export function looksPasted(chunk) {
   const text = String(chunk ?? '');
   if (text.length < 2 || text.includes(ESC)) return false;
-  const breaks = (text.match(/[\r\n]/g) ?? []).length;
+  const breaks = (text.match(/[\r\n]/g) ?? []).length;
   if (breaks === 0) return false;
   // One trailing break is someone finishing a line, not pasting one.
-  if (breaks === 1 && /[\r\n]$/.test(text)) return false;
+  if (breaks === 1 && /[\r\n]$/.test(text)) return false;
   return true;
 }
 

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)}`;
 }
 
 /**