ucode-agent 1.29.1 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucode-agent",
-  "version": "1.29.1",
+  "version": "1.31.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

@@ -1034,6 +1034,11 @@ export class Agent {
       if (message.short) this.short.add(skill.name);
       this.push(message);
       this.ui.note(`${skill.name} skill loaded for this${message.short ? ' (short form)' : ''}`);
+      // A clear row under it. This is bookkeeping about the turn, not part of
+      // it, and against the first line of thinking the two read as one block —
+      // the notice looks like the opening of the answer rather than a note
+      // about how the answer is being reached.
+      this.ui.blank();
     }
   }
 

package/src/ui/activity.js

@@ -109,26 +109,36 @@ export function shimmer(text, t, { level = chalk.level } = {}) {
 }
 
 /**
- * The wordmark with a light passing across it, once, at launch.
+ * The wordmark being lit, once, at launch.
  *
- * The first thing anyone sees of a program is the half second before they can
- * type, and ucode was spending it showing a finished picture. A band of light
- * crossing the mark left to right in that same half second costs nothing, is
- * over before it can annoy anyone, and is the difference between a logo that
- * was printed and one that arrived.
+ * The first thing anyone sees of a program is the moment before they can type,
+ * and ucode was spending it showing a finished picture. A band of light
+ * crossing the mark left to right costs nothing and is the difference between
+ * a logo that was printed and one that arrived.
  *
- * Every row is swept from the same clock, so the light is a vertical bar
- * travelling across the whole wordmark rather than six separate glints. It
- * blends out of the row's own gradient colour, not out of a flat blue, so the
- * moment it passes the mark is exactly what it will look like at rest.
+ * The light does not pass over a finished wordmark — it paints it. Ahead of
+ * the crest the letters sit almost unlit, a silhouette dark enough to read as
+ * "not yet" and light enough not to look like a hole in the screen. At the
+ * crest they flare to near-white. Behind it they settle into the row's own
+ * resting gradient and stay there. So the mark is drawn on by the light rather
+ * than glinting under it, and the instant the crest leaves a column that
+ * column is already exactly what it will look like for the rest of the
+ * session.
+ *
+ * Every row is lit from the same clock, so the crest is one bar standing
+ * upright and travelling across the whole wordmark rather than six separate
+ * glints, and the band is wide enough that the edge of it is never a line.
  *
  * Below 256 colours there are no in-between shades to fade through, so the
  * mark is simply drawn finished — a two-colour "sweep" is a flicker.
  */
-export const SWEEP_MS = 620;
+export const SWEEP_MS = 1300;
 
 /** Half the width of the travelling band, in characters. */
-const SWEEP_BAND = 7;
+const SWEEP_BAND = 9;
+
+/** The wordmark before the light reaches it: present, not yet lit. */
+const UNLIT_RGB = [0x16, 0x23, 0x3d];
 
 export function bannerSweep(line, row, rows, elapsed, { level = chalk.level } = {}) {
   const text = String(line ?? '');
@@ -142,25 +152,133 @@ export function bannerSweep(line, row, rows, elapsed, { level = chalk.level } =
 
   let out = '';
   let run = '';
-  let runStep = -1;
+  let runKey = '';
+  let runRGB = null;
   const flush = () => {
     if (!run) return;
-    const [r, g, b] = mix(rest, PEAK_RGB, runStep / STEPS);
+    const [r, g, b] = runRGB;
     out += painter(level).rgb(r, g, b)(run);
     run = '';
   };
 
   for (let i = 0; i < text.length; i++) {
-    const distance = Math.abs(i - centre);
+    const offset = i - centre;
+    // Behind the crest the column is finished; ahead of it, still waiting.
+    const base = offset > 0 ? UNLIT_RGB : rest;
+    const distance = Math.abs(offset);
     const k = distance < SWEEP_BAND ? (Math.cos((Math.PI * distance) / SWEEP_BAND) + 1) / 2 : 0;
+
+    // Quantised so neighbours landing on the same shade share one escape code.
     const step = Math.round(k * STEPS);
-    if (step !== runStep) { flush(); runStep = step; }
+    const key = `${offset > 0 ? 'a' : 'b'}${step}`;
+    if (key !== runKey) {
+      flush();
+      runKey = key;
+      runRGB = mix(base, PEAK_RGB, step / STEPS);
+    }
     run += text[i];
   }
   flush();
   return out;
 }
 
+
+/**
+ * The bar that says work is happening, with no claim about how much is left.
+ *
+ * A spinner turning in one cell says "alive". A band of light running along a
+ * track says "alive, and going somewhere", which is the honest amount of
+ * progress an agent can report — it does not know how many steps are left, so
+ * a filling bar would be a lie and an indeterminate one is not.
+ *
+ * The band runs off both ends rather than bouncing inside the track: a bounce
+ * draws the eye to the turn, where a pass reads as something continuous going
+ * by. Below 256 colours there is nothing to fade through, so the track is
+ * simply dim and still, and the spinner beside it carries the motion.
+ */
+export const BAR_CELLS = 12;
+
+/** The unlit track, and the crest of the band running along it. */
+const TRACK_RGB = [0x24, 0x34, 0x4f];
+const CREST_RGB = [0x8f, 0xbc, 0xff];
+
+/** One pass of the band, in milliseconds. */
+const BAR_PERIOD = 1400;
+
+/** Half the width of the band, in cells. */
+const BAR_BAND = 3.5;
+
+export function indeterminate(cells, t, { level = chalk.level } = {}) {
+  const width = Math.max(0, Math.floor(cells));
+  if (!width) return '';
+  const track = '━'.repeat(width);
+  if (level < 2) return dim(track);
+
+  const centre = ((Math.max(0, t) % BAR_PERIOD) / BAR_PERIOD) * (width + BAR_BAND * 2) - BAR_BAND;
+
+  let out = '';
+  let run = '';
+  let runStep = -1;
+  const flush = () => {
+    if (!run) return;
+    const [r, g, b] = mix(TRACK_RGB, CREST_RGB, runStep / STEPS);
+    out += painter(level).rgb(r, g, b)(run);
+    run = '';
+  };
+
+  for (let i = 0; i < width; i++) {
+    const distance = Math.abs(i - centre);
+    const k = distance < BAR_BAND ? (Math.cos((Math.PI * distance) / BAR_BAND) + 1) / 2 : 0;
+    const step = Math.round(k * STEPS);
+    if (step !== runStep) { flush(); runStep = step; }
+    run += track[i];
+  }
+  flush();
+  return out;
+}
+
+/**
+ * The whole live line: what is happening, that it is still happening, how long
+ * it has been happening, and how to stop it.
+ *
+ * Two things move on it, and they say different things. The bar is the steady
+ * pulse that means the program is alive at all; the band of light crossing the
+ * label is on the label, so it is the thing being done right now that looks
+ * live. How long the turn has taken is not here — that is a fact about the
+ * session, and it belongs on the status row with the other two.
+ *
+ * Things are given up from the least useful end as the terminal narrows: the
+ * hint first, then the bar shortens, then it goes, then the label is clipped.
+ * The spinner is the last thing standing, because a line with nothing moving
+ * on it says the program has hung.
+ */
+export function workingLine({
+  glyph, label = '', elapsed = '', hint = 'esc to stop', room, t = 0, level = chalk.level,
+} = {}) {
+  const text = String(label ?? '');
+  if (room < 3) return glyph;
+
+  const tail = [elapsed, hint].filter(Boolean).join('   ');
+  const shortTail = elapsed || '';
+
+  const draw = (cells, tailText, labelRoom) => {
+    let out = `${glyph} ${shimmer(clip(text, labelRoom), t, { level })}`;
+    if (cells) out += `   ${indeterminate(cells, t, { level })}`;
+    if (tailText) out += `   ${dim(tailText)}`;
+    return out;
+  };
+
+  for (const [cells, tailText] of [
+    [BAR_CELLS, tail], [BAR_CELLS, shortTail], [8, shortTail], [0, shortTail], [0, ''],
+  ]) {
+    const fixed = 2 + (cells ? cells + 3 : 0) + (tailText ? tailText.length + 3 : 0);
+    const labelRoom = room - fixed;
+    if (labelRoom >= Math.min(MIN_LABEL, text.length)) return draw(cells, tailText, labelRoom);
+  }
+
+  return `${glyph} ${shimmer(clip(text, Math.max(1, room - 2)), t, { level })}`;
+}
+
 /**
  * The spinner glyph for a frame, breathing slowly between two blues.
  *
@@ -170,8 +288,8 @@ export function bannerSweep(line, row, rows, elapsed, { level = chalk.level } =
 export function spinnerGlyph(frame, t, { level = chalk.level } = {}) {
   const glyph = SPINNER[((frame % SPINNER.length) + SPINNER.length) % SPINNER.length];
   if (level < 2) return theme.blue(glyph);
-  const k = (Math.sin((Math.max(0, t) / 1300) * Math.PI * 2) + 1) / 2;
-  const [r, g, b] = mix([0x4d, 0x8d, 0xff], [0x9f, 0xc6, 0xff], k);
+  const k = (Math.sin((Math.max(0, t) / 1000) * Math.PI * 2) + 1) / 2;
+  const [r, g, b] = mix([0x2f, 0x6f, 0xe0], [0x9f, 0xc6, 0xff], k);
   return painter(level).rgb(r, g, b)(glyph);
 }
 

package/src/ui/screen.js

@@ -41,7 +41,7 @@ import {
   boxTop, boxBottom, boxRow, visLen, padVis, clip, wrapAnsi,
   shortenPath, asLabel, ensureColour, planLine, bare, narration, narrationMark, groupKind, groupLabel, groupTarget, runLine, planRows, tidyReply, trimAnswer,
   bannerPaint, RAIL, modeChip } from './theme.js';
-import { FRAME_MS, fitActivity, shimmer, spinnerGlyph, formatDuration, doneLine, stepPaint, bannerSweep, SWEEP_MS } from './activity.js';
+import { FRAME_MS, spinnerGlyph, formatDuration, doneLine, workingLine, bannerSweep, SWEEP_MS } from './activity.js';
 import { gitBranch } from '../core/git.js';
 import { renderer, render, polish } from './markdown.js';
 import { VERSION } from '../core/version.js';
@@ -915,54 +915,74 @@ export class Screen {
    * the same on every line of every session, so it was decoration that had to
    * be read past to reach the two things that do change.
    *
-   * The middle is borrowed while something is running, for the spinner and the
-   * way out of it, and handed straight back when it finishes.
+   * The spinner used to borrow the middle of this row while something ran. It
+   * has a row of its own outside the box now, so the only thing that ever
+   * appears between the model and the percentage is a flash — a reply to
+   * something you just pressed, gone a moment later.
    */
   statusRow(width = this.width()) {
     const inner = width - 2;             // the space between the two borders
     const chip = this.modeChip();
     const left = ` ${chip}  ${chalk.white(this.model || '—')}`;
-    const right = `${this.percentChip()} `;
+
+    // How long the turn has taken, back in the box beside the other two facts
+    // about the session. It is not on the live line: that line says what is
+    // being done, and a clock ticking in the middle of it competes with the
+    // words for no reason. Under a second there is no number worth reading.
+    const now = Date.now();
+    const since = this.activity?.start ?? this.status.since ?? 0;
+    const running = this.busy() && since && now - since >= 1000;
+    const right = `${running ? `${dim(formatDuration(now - since))}   ` : ''}${this.percentChip()} `;
 
     // Where a click on the bottom row still counts as hitting the mode chip.
     this.chipTo = 2 + visLen(chip);
 
     const between = Math.max(1, inner - visLen(left) - visLen(right));
+    const middle = this.flashText ? dim(clip(this.flashText, between - 2)) : '';
 
-    let middle = '';
-    if (this.flashText) {
-      middle = dim(clip(this.flashText, between - 2));
-    } else if (this.status.busy || this.activity) {
-      // The whole turn, not just the current tool: the timer and step count
-      // keep going through the gaps between calls, so a long build never
-      // looks like it has stopped.
-      const now = Date.now();
-      const a = this.activity;
-      const since = a?.start ?? this.status.since ?? now;
-      const meta = [];
-      // No step count. It measures how much machinery ran, which is not
-      // something the person waiting has any use for; the elapsed time is.
-      void stepPaint;
-      if (now - since >= 1000) meta.push({ text: formatDuration(now - since), keep: true });
-      middle = fitActivity({
-        glyph: spinnerGlyph(this.tick, now),
-        label: this.status.busy ? this.status.text : 'working',
-        meta,
-        hint: 'esc to stop',
-        paint: (s) => shimmer(s, now),
-      }, between - 3);
-    }
-
-    // The percentage is pinned to the right border whatever is in the middle,
-    // with a gap kept in front of it so a long spinner label cannot run into
-    // the number and read as part of it.
     const tail = middle ? `${middle}   ` : '';
     const pad = Math.max(1, inner - visLen(left) - visLen(tail) - visLen(right));
     return padVis(left + ' '.repeat(pad) + tail + right, inner);
   }
 
   /**
-   * Repaint only the status row, leaving the caret where the user left it.
+   * What is happening right now: the spinner, what it is doing, how long it has
+   * been doing it, and the way out.
+   *
+   * It used to live in whatever space the status row had spare between the
+   * model name and the percentage — inside the box you type into, which is the
+   * one place on screen that is about you rather than about the agent. Out
+   * here it sits directly under the steps it belongs to, in the same column,
+   * and has room for a bar instead of a shimmer.
+   */
+  activityLine(width = this.width()) {
+    if (!this.busy()) return '';
+    const now = Date.now();
+    return workingLine({
+      glyph: spinnerGlyph(this.tick, now),
+      label: this.status.busy ? this.status.text : 'working',
+      hint: 'esc to stop',
+      room: Math.max(4, width),
+      t: now,
+    });
+  }
+
+  /**
+   * Which row the live line is painted on, 1-based, or 0 when it is not shown.
+   *
+   * It is the last line of the conversation, so its row moves as the
+   * conversation grows and stops moving once the viewport is full. Scrolled
+   * back, or with the picker open, it is not on screen at all and the cheap
+   * repaint has nothing to do.
+   */
+  activityRowAt() {
+    if (this.scroll > 0 || this.picker) return 0;
+    const index = Math.min(this.lines.length + 1, this.viewportHeight()) - 1;
+    return index < 0 ? 0 : this.headerHeight() + 2 + index;
+  }
+
+  /**
+   * Repaint only the moving rows, leaving the caret where the user left it.
    *
    * It is the second row from the bottom now — the box's own border is below
    * it — so the row is written with its borders rather than as a bare line.
@@ -976,9 +996,12 @@ export class Screen {
       return;
     }
     const [row, col] = this.caret();
+    const width = this.width();
+    const liveAt = this.activityRowAt();
     this.output.write(
       HIDE +
-      at(this.rows - 1, 1) + CLEAR_LINE + boxRow(this.statusRow(), this.width(), this.borderPaint()) +
+      (liveAt ? at(liveAt, 1) + CLEAR_LINE + padVis(this.activityLine(width), width) : '') +
+      at(this.rows - 1, 1) + CLEAR_LINE + boxRow(this.statusRow(width), width, this.borderPaint()) +
       at(row, col) + SHOW
     );
   }
@@ -1468,9 +1491,18 @@ export class Screen {
     const width = this.width();
     const height = this.viewportHeight();
 
-    const end = Math.max(0, this.lines.length - this.scroll);
+    // The live line is the last line of the conversation, not a fixture above
+    // the input box. Pinned down there it sat at the bottom of the screen while
+    // the message that started it was at the top, with the empty middle of the
+    // viewport between them — so the thing being done looked unrelated to the
+    // thing that had been asked. On the end of the transcript it arrives
+    // directly under the prompt, which is where the eye already is.
+    const live = this.activityLine(width);
+    const said = live ? [...this.lines, live] : this.lines;
+
+    const end = Math.max(0, said.length - this.scroll);
     const start = Math.max(0, end - height);
-    const window = this.picker ? this.pickerLines(height) : this.lines.slice(start, end);
+    const window = this.picker ? this.pickerLines(height) : said.slice(start, end);
     while (window.length < height) window.push('');
 
     const frame = [