@askalf/dario 5.4.3 → 5.4.5

package/dist/tui/render.js

@@ -143,7 +143,15 @@ export function truncate(text, maxWidth, ellipsis = '…') {
         visible++;
         i++;
     }
-    return out + ellipsis;
+    // Flush SGR sequences from the clipped remainder. Without this, a cut
+    // that lands inside a dim()/fg() block drops the closing code, leaving
+    // the attribute open — it then bleeds into the following line, and past
+    // the frame entirely (clearScreen does not reset SGR). Replaying the
+    // remainder's own codes rather than appending a blanket reset keeps an
+    // enclosing inverse() wrapper intact; clipped openers arrive paired
+    // with their closers, so they render as a no-op.
+    const tail = text.slice(i).match(/\x1b\[[\x30-\x3f]*[\x20-\x2f]*[\x40-\x7e]/g);
+    return out + ellipsis + (tail ? tail.join('') : '');
 }
 /** Pad `text` (right-aligned by default 'left' fills right side) to `width`. */
 export function pad(text, width, align = 'left') {

package/dist/tui/tabs/config.js

@@ -19,7 +19,7 @@
  * change. The DarioConfig schema is the source of truth — adding a
  * field there + a row here lights it up.
  */
-import { fg, dim, brand, inverse, pad } from '../render.js';
+import { fg, dim, brand, inverse, pad, truncate } from '../render.js';
 import { CONFIG_SCHEMA_VERSION, defaultConfig, loadConfig, saveConfig, } from '../../config-file.js';
 /**
  * The visible field registry. Order = display order. New fields just
@@ -101,40 +101,55 @@ export const ConfigTab = {
         const lines = [];
         const w = dimv.cols;
         const labelW = 26;
-        const valueW = w - labelW - 6;
+        // Fixed value column so the hint keeps room on the same row. Every
+        // row is padded/truncated to exactly `w` below: the frame is drawn
+        // from the top with no scrollback, so a row that wraps costs a
+        // second physical line and pushes the panel head off-screen.
+        const valueW = Math.max(6, Math.min(16, w - labelW - 4));
+        // Rows that fit between the title (+blank) and the trailing blank
+        // + prompt/status pair. Window FIELDS around the selection so the
+        // list scrolls instead of overflowing the body region.
+        const listRows = Math.max(1, dimv.rows - 5);
+        const startIdx = Math.max(0, Math.min(state.selectedIdx - Math.floor(listRows / 3), FIELDS.length - listRows));
+        const endIdx = Math.min(startIdx + listRows, FIELDS.length);
         const dirty = isDirty(state);
         const title = dirty
             ? brand('Config') + dim('  — ') + fg('yellow', '● unsaved changes')
             : brand('Config');
-        lines.push(' ' + title);
+        const counter = FIELDS.length > listRows
+            ? dim(`  ${state.selectedIdx + 1} / ${FIELDS.length}`)
+            : '';
+        lines.push(truncate(' ' + title + counter, w));
         lines.push('');
-        for (let i = 0; i < FIELDS.length; i++) {
+        for (let i = startIdx; i < endIdx; i++) {
             const field = FIELDS[i];
             const value = getByPath(state.config, field.path);
             const orig = getByPath(state.snapshot, field.path);
             const changed = !Object.is(value, orig);
             const valueRender = renderValue(field, value, changed);
             const hint = field.hint ? '  ' + dim('— ' + field.hint) : '';
-            const row = '  ' + pad(field.label + ':', labelW) + pad(valueRender, valueW) + hint;
+            const row = pad(truncate('  ' + pad(field.label + ':', labelW) + pad(valueRender, valueW) + hint, w), w);
             lines.push(i === state.selectedIdx ? inverse(row) : row);
         }
         // ── Edit prompt or status line ─────────────────────────────
         lines.push('');
         if (state.editBuffer !== null) {
             const f = FIELDS[state.selectedIdx];
-            lines.push(' ' + fg('cyan', `Edit ${f.label}:`) + ' ' + state.editBuffer + fg('cyan', '_'));
-            lines.push(' ' + dim('Enter to confirm · Esc to cancel'));
+            lines.push(truncate(' ' + fg('cyan', `Edit ${f.label}:`) + ' ' + state.editBuffer + fg('cyan', '_'), w));
+            lines.push(truncate(' ' + dim('Enter to confirm · Esc to cancel'), w));
         }
         else if (state.statusMessage) {
             const color = state.statusKind === 'error' ? 'red'
                 : state.statusKind === 'success' ? 'green'
                     : 'cyan';
-            lines.push(' ' + fg(color, state.statusMessage));
+            lines.push(truncate(' ' + fg(color, state.statusMessage), w));
         }
         else {
-            lines.push(' ' + dim('↑↓ navigate · Enter edit · s save · d discard · r reload'));
+            lines.push(truncate(' ' + dim('↑↓ navigate · Enter edit · s save · d discard · r reload'), w));
         }
-        return lines.join('\n');
+        // Hard floor for terminals too short for even one field + prompt:
+        // drop trailing rows rather than let the panel run past the body.
+        return lines.slice(0, Math.max(1, dimv.rows)).join('\n');
     },
 };
 // ── Helpers ───────────────────────────────────────────────────

package/dist/tui/tabs/hits.js

@@ -112,17 +112,18 @@ export const HitsTab = {
         const detailRows = 9;
         const listRows = Math.max(3, totalRows - detailRows - 2);
         if (state.buffer.length === 0) {
-            lines.push(' ' + brand('Hits') + dim('  — live request stream'));
+            lines.push(truncate(' ' + brand('Hits') + dim('  — live request stream'), w));
             lines.push('');
             if (state.connectionError) {
-                lines.push('  ' + fg('red', `SSE error: ${state.connectionError}`));
-                lines.push('  ' + dim('Is `dario proxy` running? The stream reconnects automatically on the next mount.'));
+                // The error text is upstream-supplied and unbounded.
+                lines.push(truncate('  ' + fg('red', `SSE error: ${state.connectionError}`), w));
+                lines.push(truncate('  ' + dim('Is `dario proxy` running? The stream reconnects automatically on the next mount.'), w));
             }
             else if (!state.subscribed) {
-                lines.push('  ' + dim('Connecting to /analytics/stream …'));
+                lines.push(truncate('  ' + dim('Connecting to /analytics/stream …'), w));
             }
             else {
-                lines.push('  ' + dim('Waiting for requests. Send one through dario to see it land here.'));
+                lines.push(truncate('  ' + dim('Waiting for requests. Send one through dario to see it land here.'), w));
             }
             return lines.join('\n');
         }
@@ -136,26 +137,34 @@ export const HitsTab = {
         const colTime = 9;
         const colModel = 18;
         const colIn = 8, colOut = 7, colLat = 7, colStatus = 5;
-        lines.push(' ' + brand('Hits') +
-            dim(`  ${state.buffer.length} buffered · ${state.subscribed ? fg('green', 'live') : fg('yellow', 'disconnected')}`));
+        lines.push(truncate(' ' + brand('Hits') +
+            dim(`  ${state.buffer.length} buffered · ${state.subscribed ? fg('green', 'live') : fg('yellow', 'disconnected')}`), w));
         // ── Overage-halt banner (v4.1, dario#288) ──────────────────
         // Pinned at the top so it's always visible while scrolling the buffer.
+        //
+        // Both lines are ordered most-actionable-first and kept short enough
+        // to fit 80 columns, because a banner that wraps costs a second
+        // physical row and pushes the panel head off the top of the screen —
+        // and it wraps exactly when the user needs to read it. The account is
+        // last on line 1 so a narrow terminal clips the least-critical field;
+        // the resume instructions on line 2 fit outright.
         if (state.halt) {
             const since = formatTimestamp(state.halt.since);
             const cooldown = formatRemaining(state.halt.cooldownUntil - Date.now());
-            const line1 = `  ${fg('red', '⚠ HALTED')}  ${state.halt.request.claim} detected at ${since} on ${state.halt.request.model}  (account=${state.halt.request.account})`;
-            const line2 = `  ${dim('→ New /v1/messages requests return 503 until')} ${fg('cyan', 'R')} ${dim('here, or')} ${fg('cyan', 'dario resume')}${dim(' from any shell. Auto-resume in')} ${cooldown}${dim('.')}`;
-            lines.push(line1);
-            lines.push(line2);
+            const line1 = `  ${fg('red', '⚠ HALTED')}  ${state.halt.request.claim} · ${since} · ${shortenModel(state.halt.request.model)} · ${dim(state.halt.request.account)}`;
+            const line2 = `  ${dim('→ 503 until')} ${fg('cyan', 'R')} ${dim('or')} ${fg('cyan', 'dario resume')} ${dim(`· auto-resume in ${cooldown}`)}`;
+            lines.push(truncate(line1, w));
+            lines.push(truncate(line2, w));
         }
         lines.push('');
-        // Header row (aligned with data rows)
-        lines.push('  ' + dim(pad('time', colTime) +
+        // Header row — truncated to the same budget as the data rows below
+        // (`w - 2`) so the columns stay aligned when the terminal is narrow.
+        lines.push(truncate('  ' + dim(pad('time', colTime) +
             pad('model', colModel) +
             pad('in', colIn) +
             pad('out', colOut) +
             pad('lat', colLat) +
-            pad('st', colStatus)));
+            pad('st', colStatus)), w - 2));
         for (let i = startIdx; i < endIdx; i++) {
             const r = newestFirst[i];
             // Flag any non-subscription billing red — the same condition the
@@ -185,16 +194,16 @@ export const HitsTab = {
         }
         // Scroll hint
         if (newestFirst.length > listRows) {
-            lines.push(' ' + dim(`${state.selectedIdx + 1} / ${newestFirst.length}  ` +
+            lines.push(truncate(' ' + dim(`${state.selectedIdx + 1} / ${newestFirst.length}  ` +
                 (startIdx > 0 ? '↑ more ' : '') +
-                (endIdx < newestFirst.length ? '↓ more' : '')));
+                (endIdx < newestFirst.length ? '↓ more' : '')), w));
         }
         // Separator
         lines.push(' ' + dim(BOX.horizontal.repeat(w - 2)));
         // Detail pane
         if (state.selectedIdx >= 0 && state.selectedIdx < newestFirst.length) {
             const r = newestFirst[state.selectedIdx];
-            lines.push('  ' + brand('Selected') + dim(`  ${formatTime(r.timestamp)}`));
+            lines.push(truncate('  ' + brand('Selected') + dim(`  ${formatTime(r.timestamp)}`), w));
             lines.push('  ' + renderKvRow('Account', r.account, w - 4));
             lines.push('  ' + renderKvRow('Model', r.model, w - 4));
             lines.push('  ' + renderKvRow('Billing bucket', billingBucketFromClaim(r.claim), w - 4));
@@ -205,7 +214,7 @@ export const HitsTab = {
         }
         else {
             lines.push('');
-            lines.push('  ' + dim('Use ↑↓ to select a request for details.'));
+            lines.push(truncate('  ' + dim('Use ↑↓ to select a request for details.'), w));
         }
         return lines.join('\n');
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askalf/dario",
-  "version": "5.4.3",
+  "version": "5.4.5",
   "description": "Use your Claude Pro/Max subscription in any tool — Cursor, Cline, Aider, the Agent SDK, your scripts — at subscription pricing, not per-token API bills. One local Anthropic + OpenAI-compatible endpoint.",
   "type": "module",
   "bin": {