ucode-agent 1.30.0 → 1.32.0

package/package.json

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

@@ -556,6 +556,34 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     'already contains it. Do not re-check work the checks have already reported on.',
     'Fast is not sloppy: it is the same work with the waiting taken out.',
     '',
+    'DESIGN IT BEFORE YOU TYPE IT. Fast means fewer round trips. It does not mean a',
+    'default theme, and an app that goes out in the palette its starter came with is',
+    'not a fast build, it is an undesigned one. There is no design pass after the',
+    'create_app call, because there is no after — so the decisions happen before it.',
+    '',
+    'Three of them, and you hold them for the whole build:',
+    '  - A TONE, one word you commit to: clinical, warm, editorial, technical,',
+    '    playful, industrial, calm, dense. "Modern and clean" is not a tone.',
+    '  - An ACCENT that is not the one the starter shipped with.',
+    '  - ONE memorable thing this app has that other apps do not: a colour, a type',
+    '    move, a texture, one interaction. Exactly one. It is the difference between',
+    '    a design and a theme.',
+    'Name the tone and the accent in your opening line, so they are settled before any',
+    'file exists: "I will build Tide - a tasks app in one HTML file, calm, warm grey',
+    'with a single amber accent." That is not narrating a plan, that is the decision.',
+    '',
+    'Then the tokens are the first thing in the file, in the same call as everything',
+    'else: the type scale, the space scale, neutrals that carry a hue, the accent and',
+    'its semantics. Nothing after that uses a raw value. IN next-shadcn THAT MEANS',
+    'globals.css IS RE-TINTED IN THAT SAME create_app CALL. Shipping the palette the',
+    'starter came with is the commonest way a build looks generated, and it is the',
+    'first thing anyone notices. A blocked-out page in the colours this app chose',
+    'beats a finished page in the ones it was handed.',
+    '',
+    'add_block gives you structure, never a look. A block arrives with no opinion',
+    'about this app and is yours to tint the moment it lands. Assembling blocks and',
+    'shipping them as they came is the quick way to something nobody designed.',
+    '',
     'Never repeat the request back. Not as a summary, not as a restatement, not as',
     'a list of what was asked for. They wrote it and it is on the screen above you.',
     'Do not narrate your planning either - which files you will make, what order you',
@@ -665,6 +693,11 @@ function systemPrompt({ cwd, skills, mode, check, map, memory }) {
     '  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.',
+    '- ANYTHING THAT NEEDS A SERVER IS LEFT RUNNING. If the app has a dev server -',
+    '  Next.js, Vite, anything with an npm run dev - start it and leave it up when you',
+    '  finish. ucode opens it in the browser for the user as soon as it is ready, so a',
+    '  build that ends with the server stopped ends with nothing to look at. A one-page',
+    '  app with no server needs none of this: the file is the app.',
     '  name, handles keys and returns the live link. Build locally first.',
     '- Nothing you run has a keyboard. Pass the non-interactive flag to anything that',
     '  would ask a question, or it fails instead of waiting: create-next-app --yes,',
@@ -1034,6 +1067,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();
     }
   }
 
@@ -1535,15 +1573,19 @@ export class Agent {
 
   /** A dev server came up during this turn: open it in the browser, once. */
   /**
-   * Open the running app in a browser — only when asked.
+   * Open the running app in a browser as soon as a dev server is up.
+   *
+   * This was turned off once, on the grounds that a window seizing the screen
+   * mid-thought is startling and worse during a demo. It only fires at the end
+   * of a finished turn, though, not mid-thought — and the thing the user asked
+   * for is a running app, not a URL they then have to go and click. Being
+   * handed a link to the thing you asked to be built is the last step of the
+   * job left undone.
    *
-   * This used to happen on its own whenever a dev server came up. Something
-   * seizing the screen mid-thought is startling at the best of times, and
-   * during a demo it is worse. UCODE_OPEN=1 brings the old behaviour back for
-   * anyone who liked it; otherwise the URL is on screen to click.
+   * UCODE_OPEN=0 turns it off for anyone who wants the link and nothing else.
    */
   openWhenReady(since) {
-    if (!this.full || process.env.UCODE_OPEN !== '1') return;
+    if (!this.full || process.env.UCODE_OPEN === '0') return;
     const server = serversReadySince(since).at(-1);
     if (!server || (this.opened ??= new Set()).has(server.url)) return;
     this.opened.add(server.url);

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,19 +152,30 @@ 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();
@@ -220,10 +241,11 @@ export function indeterminate(cells, t, { level = chalk.level } = {}) {
  * The whole live line: what is happening, that it is still happening, how long
  * it has been happening, and how to stop it.
  *
- * This used to be squeezed into whatever the status row had spare between the
- * model name and the percentage, which is why the label shimmered — it was the
- * only way to look alive in twenty columns. With a row of its own the motion
- * moves to the bar and the label can simply be read.
+ * 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.
@@ -240,7 +262,7 @@ export function workingLine({
   const shortTail = elapsed || '';
 
   const draw = (cells, tailText, labelRoom) => {
-    let out = `${glyph} ${sky(clip(text, labelRoom))}`;
+    let out = `${glyph} ${shimmer(clip(text, labelRoom), t, { level })}`;
     if (cells) out += `   ${indeterminate(cells, t, { level })}`;
     if (tailText) out += `   ${dim(tailText)}`;
     return out;
@@ -254,7 +276,7 @@ export function workingLine({
     if (labelRoom >= Math.min(MIN_LABEL, text.length)) return draw(cells, tailText, labelRoom);
   }
 
-  return `${glyph} ${sky(clip(text, Math.max(1, room - 2)))}`;
+  return `${glyph} ${shimmer(clip(text, Math.max(1, room - 2)), t, { level })}`;
 }
 
 /**

package/src/ui/screen.js

@@ -100,16 +100,10 @@ const at = (row, col) => `${ESC}[${row};${col}H`;
 const title = (t) => `${ESC}]0;${t}\x07`;
 
 /**
- * Fixed rows below the header: the gap under it, the live line, the gap above
- * the input box, the box's two borders, the blank row inside it, and the
- * status row.
- *
- * The live line's row is held whether anything is running or not. Adding it
- * only while busy would move the whole transcript up a row at the start of
- * every turn and back down at the end of it, which reads as the screen
- * flinching each time you press return.
+ * Fixed rows below the header: the gap under it, the gap above the input box,
+ * the input box's two borders, the blank row inside it, and the status row.
  */
-const CHROME_BELOW = 7;
+const CHROME_BELOW = 6;
 
 /** How long one sentence of reasoning holds the line before the next takes it. */
 const THOUGHT_HOLD_MS = 1100;
@@ -930,7 +924,15 @@ export class Screen {
     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);
@@ -956,20 +958,27 @@ export class Screen {
   activityLine(width = this.width()) {
     if (!this.busy()) return '';
     const now = Date.now();
-    const since = this.activity?.start ?? this.status.since ?? now;
     return workingLine({
       glyph: spinnerGlyph(this.tick, now),
       label: this.status.busy ? this.status.text : 'working',
-      elapsed: now - since >= 1000 ? formatDuration(now - since) : '',
       hint: 'esc to stop',
       room: Math.max(4, width),
       t: now,
     });
   }
 
-  /** Which row the live line is painted on, 1-based. */
+  /**
+   * 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() {
-    return this.rows - this.inputLines().rows.length - 5;
+    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;
   }
 
   /**
@@ -988,9 +997,10 @@ export class Screen {
     }
     const [row, col] = this.caret();
     const width = this.width();
+    const liveAt = this.activityRowAt();
     this.output.write(
       HIDE +
-      at(this.activityRowAt(), 1) + CLEAR_LINE + padVis(this.activityLine(width), width) +
+      (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
     );
@@ -1481,18 +1491,24 @@ 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 = [
       ...this.headerLines(),
       '',
       ...window,
-      // What is happening right now, in the same column as the steps above it,
-      // because it is the next one of those. Empty between turns.
-      this.activityLine(width),
       // Always one clear row between the last thing said and the box you type
       // in. Without it the newest line of output sits against the border and
       // reads as part of the input rather than as the answer above it.