jaitus 0.3.6 → 0.3.8

package/src/skills/builtin/frontend-design/SKILL.md

@@ -0,0 +1,102 @@
+---
+description: Load BEFORE building or restyling anything people look at — a website, landing page, web app screen, dashboard, component, HTML email, or any HTML/CSS/React/Vue/Svelte UI. Makes it look designed and professional instead of generic.
+---
+
+# Designing interfaces that look made by a designer
+
+The default look of generated UI is instantly recognisable and reads as cheap: a blue or
+purple gradient hero, Inter or system font everywhere, three identical rounded cards with
+emoji icons, grey text on white, soft shadows on everything, centred everything. Avoid all
+of it. Every screen must look like a deliberate choice by someone with taste.
+
+## 1. Decide the direction before writing code
+
+Write these down (in your head or a comment) first — they drive every later decision:
+
+- **Who it is for and what it must make them feel** (trust, speed, calm, delight, authority).
+- **One visual direction**, named concretely. Pick what suits the subject, e.g.:
+  editorial (serif display, generous whitespace, rules and columns) · Swiss/International
+  (strict grid, one sans, big type, flat colour) · warm product (off-white paper, soft ink,
+  one saturated accent) · dark technical (near-black, luminous accent, mono details) ·
+  brutalist (raw borders, heavy type, no radius) · luxury (restrained, large margins, thin
+  serif, muted palette) · playful (bold colour blocks, chunky type, big radius).
+- **The one memorable thing** — an oversized headline, an unusual colour, a striking
+  layout, a detail. A design with nothing memorable is the generic one.
+
+If the project already has a design system, tokens, a brand colour or a component library,
+**follow it** — consistency beats novelty. Read the existing CSS/theme files first.
+
+## 2. Tokens first
+
+Define design tokens as CSS custom properties (or the theme file of the framework in use)
+before any component, and use only them afterwards:
+
+- **Colour:** a background, a surface, 2–3 text shades, ONE accent, borders, and semantic
+  success/warning/danger. Neutrals should be tinted toward the accent's hue (warm or cool
+  greys), never flat `#808080`. Avoid pure `#000` on pure `#fff` for large areas — use ink
+  like `#16181d` on paper like `#faf8f5`. Accent used sparingly: buttons, links, one
+  highlight. Check contrast: body text ≥ 4.5:1, large text ≥ 3:1.
+- **Type:** two families at most — a characterful display face and a readable text face
+  (or one family with strong weight contrast). Good free pairs (Google Fonts):
+  Fraunces + Inter Tight · Instrument Serif + Geist · Space Grotesk + IBM Plex Sans ·
+  DM Serif Display + DM Sans · Playfair Display + Source Sans 3 · JetBrains Mono for code.
+  A modular scale (e.g. 1.25): 12 · 14 · 16 · 20 · 25 · 31 · 39 · 49 · 61. Headlines tight
+  (line-height 1.05–1.15, letter-spacing −0.01 to −0.03em); body 1.5–1.65; measure
+  60–75 characters. Use weight and size for hierarchy, not colour alone.
+- **Space:** a 4 or 8px scale (4 8 12 16 24 32 48 64 96 128). Be generous — cramped is the
+  most common amateur tell. Sections breathe with 96–160px vertical padding on desktop.
+- **Radius and elevation:** choose one radius personality (0, 4–6, or 12–16) and keep it.
+  Prefer borders and background shifts over shadows; when shadows are used, make them
+  subtle and layered (`0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .06)`).
+
+## 3. Layout
+
+- Build on a real grid (12 columns, or a clear 2–3 column system) with a max content width
+  (1120–1280px) and consistent gutters.
+- Break symmetry on purpose: asymmetric hero (text left, visual right, offset), a wide
+  feature next to narrow ones, a pull quote, a full-bleed band. Not every section centred.
+- Establish hierarchy in every section: one thing clearly first, then second, then detail.
+- Align everything to the grid; mismatched left edges look broken.
+- Mobile first-class: stack sensibly, keep 16–20px side padding, tap targets ≥ 44px, no
+  horizontal scroll. Test at 375px and 1440px widths mentally or in a browser.
+
+## 4. Components and detail
+
+- **Buttons:** one primary style (solid accent), one secondary (outline or ghost); clear
+  hover, focus-visible (a visible ring), active and disabled states. Label with verbs.
+- **Icons:** one consistent SVG set (Lucide, Heroicons, Phosphor, Tabler) at one stroke
+  weight — never emoji as icons.
+- **Imagery:** real content or tasteful placeholders — CSS/SVG shapes, a gradient mesh used
+  subtly, product mock frames. Never broken image links or stock-photo clichés.
+- **Copy:** specific and concrete; no "Lorem ipsum", no "Welcome to our website", no
+  "Revolutionize your workflow". Real numbers and nouns.
+- **States:** empty, loading (skeletons that match the layout), error (says what happened
+  and what to do), success. Forms: labels above inputs, helpful inline errors.
+- **Motion:** small and purposeful — 150–250ms ease-out for hover/press, a staggered fade-up
+  on first view at most. Respect `prefers-reduced-motion`.
+- **Dark mode** if the product warrants it: redefine the tokens, don't invert colours; dark
+  surfaces are dark grey (`#111318`), not black, with slightly desaturated accents.
+
+## 5. Things that make it look generic — don't
+
+- Purple/blue gradient backgrounds, gradient text on everything, glowing blobs by default.
+- Three equal cards with an emoji, a bold title and two lines of grey text as the main idea.
+- Every section centred with the same padding and the same card component.
+- Default Tailwind blue (`blue-500`) or Bootstrap primary as the brand colour.
+- Heavy drop shadows, borders AND shadows AND gradients on the same element.
+- Tiny low-contrast grey text; ALL CAPS paragraphs; more than two font families.
+
+## 6. Build, then review like a designer
+
+After building, check honestly and fix before reporting done:
+
+1. Squint test: is the hierarchy obvious — what is first, second, third?
+2. Is the spacing consistent and generous? Any cramped block or misaligned edge?
+3. Does the palette hold together — one accent, tinted neutrals, contrast passes?
+4. Is there one memorable, distinctive element? Would a designer recognise a direction?
+5. Every interactive element has hover and focus states; works at 375px wide.
+6. Nothing from section 5 slipped in.
+
+If a browser or screenshot tool is available, look at the result and iterate. Deliver
+single-file HTML with inline CSS unless the project has its own structure; load fonts from
+Google Fonts with `display=swap` and give a system fallback stack.

package/src/skills.js

@@ -8,6 +8,10 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
+import { fileURLToPath } from 'node:url';
+
+// Skills that ship with Jaitus. A project or personal skill with the same name wins.
+const BUILTIN = path.join(path.dirname(fileURLToPath(import.meta.url)), 'skills', 'builtin');
 
 const MAX_SKILL = 32_000;
 
@@ -47,6 +51,7 @@ export function discoverSkills(cwd) {
     [path.join(cwd, '.claude', 'skills'), 'project'],
     [path.join(os.homedir(), '.jaitus', 'skills'), 'user'],
     [path.join(os.homedir(), '.claude', 'skills'), 'user'],
+    [BUILTIN, 'builtin'],
   ];
   const skills = new Map();
   for (const [root, scope] of roots) {
@@ -58,5 +63,5 @@ export function discoverSkills(cwd) {
 export function skillCatalog(skills) {
   const entries = Object.values(skills || {});
   if (!entries.length) return '';
-  return `\n\nAvailable project workflows (invoke with /<name>):\n${entries.map((s) => `- /${s.name}: ${s.description}`).join('\n')}`;
+  return `\n\nSkills — instructions for particular kinds of work. When the task matches one, call load_skill with its name before you start, and follow it. The user can also run one as /<name>.\n${entries.map((s) => `- ${s.name}: ${s.description}`).join('\n')}`;
 }

package/src/tui/entries.js

@@ -167,8 +167,10 @@ const BUILDERS = {
     const style = styles[data.status] || styles.running;
     const icon = pick(TOOL_ICON[data.name] || ['⚙', '*']);
     const rows = [];
+    const openable = data.status !== 'running' && expandable(data);
 
     const head = [
+      ...(openable ? [{ t: `${pick(data.expanded ? ['▾', 'v'] : ['▸', '>'])} `, color: p.dim }] : []),
       { t: `${pick(style.mark)} `, color: style.color },
       { t: `${icon} `, color: data.status === 'ok' ? p.dim : style.color },
       { t: prettyName(data.name), color: data.status === 'failed' ? p.red : p.muted, bold: data.status === 'running' },
@@ -186,8 +188,8 @@ const BUILDERS = {
     }
 
     // A preview is a sample, never the whole output: a 4000-line test run in the
-    // transcript buries the answer that follows it.
-    const preview = previewLines(data);
+    // transcript buries the answer that follows it. A click on the row opens all of it.
+    const preview = data.expanded ? fullLines(data) : previewLines(data);
     if (preview.lines.length) {
       const language = data.name === 'run_command' ? 'sh' : languageForPath(data.file || data.label);
       let state = {};
@@ -198,7 +200,8 @@ const BUILDERS = {
         rows.push([{ t: `    ${pick(['│', '|'])} `, color: p.lineSoft }, ...truncateRow(spans, Math.max(8, width - 6))]);
       }
       if (preview.more > 0) {
-        rows.push([{ t: `    ${pick(['│', '|'])} `, color: p.lineSoft }, { t: `+${preview.more} more line${preview.more === 1 ? '' : 's'}`, color: p.faint, italic: true }]);
+        const hint = openable && !data.expanded ? ' — click the row to show all' : '';
+        rows.push([{ t: `    ${pick(['│', '|'])} `, color: p.lineSoft }, { t: `+${preview.more} more line${preview.more === 1 ? '' : 's'}${hint}`, color: p.faint, italic: true }]);
       }
     }
     return rows;
@@ -211,8 +214,11 @@ const BUILDERS = {
     const lines = String(data.patch || '').split('\n');
     const added = lines.filter((l) => l.startsWith('+') && !l.startsWith('+++')).length;
     const removed = lines.filter((l) => l.startsWith('-') && !l.startsWith('---')).length;
+    const limit = data.expanded ? DIFF_OPEN_LINES : (data.max || 40);
+    const openable = lines.length > (data.max || 40);
 
     rows.push([
+      ...(openable ? [{ t: `${pick(data.expanded ? ['▾', 'v'] : ['▸', '>'])} `, color: p.dim }] : []),
       { t: `${pick(['◈', '~'])} `, color: p.brand },
       { t: String(data.file || 'diff'), color: p.body, bold: true },
       { t: '  ' },
@@ -222,7 +228,7 @@ const BUILDERS = {
     ]);
 
     const language = languageForPath(data.file);
-    const shown = lines.slice(0, data.max || 40);
+    const shown = lines.slice(0, limit);
     for (const line of shown) {
       if (/^(diff |index |--- |\+\+\+ )/.test(line)) continue;
       if (line.startsWith('@@')) {
@@ -241,7 +247,8 @@ const BUILDERS = {
       }
     }
     if (lines.length > shown.length) {
-      rows.push([{ t: '    ' }, { t: `… ${lines.length - shown.length} more lines`, color: p.faint, italic: true }]);
+      const hint = data.expanded ? '' : ' — click the file name to show all';
+      rows.push([{ t: '    ' }, { t: `… ${lines.length - shown.length} more lines${hint}`, color: p.faint, italic: true }]);
     }
     return rows;
   },
@@ -354,6 +361,30 @@ function bar(value, total, width) {
  * puts the command at the top and the failure at the bottom, and a build puts the error
  * last. Showing both ends beats showing the first twenty lines of a stack trace.
  */
+// How much an opened row shows. Enough for any real diff or test run; a 50,000-line
+// log is still a sample (the head and the tail), never the whole screen's worth of rows.
+const OPEN_LINES = 400;
+const DIFF_OPEN_LINES = 2000;
+
+/** Is there more behind this tool row than the collapsed view shows? */
+export function expandable(data) {
+  const full = String(data?.full ?? '').trimEnd();
+  if (!full) return false;
+  const shown = previewLines({ ...data, expanded: false });
+  const lines = full.split('\n').length;
+  return lines > shown.lines.length || (!shown.lines.length && full.length > 0);
+}
+
+/** An opened row: the whole output, or its head and tail past OPEN_LINES. */
+function fullLines(data) {
+  const raw = String(data.full ?? data.preview ?? '').replace(/\r\n?/g, '\n').trimEnd();
+  if (!raw) return { lines: [], more: 0 };
+  const all = raw.split('\n');
+  if (all.length <= OPEN_LINES) return { lines: all, more: 0 };
+  const head = Math.ceil(OPEN_LINES * 0.75);
+  return { lines: [...all.slice(0, head), ...all.slice(all.length - (OPEN_LINES - head))], more: all.length - OPEN_LINES };
+}
+
 function previewLines(data) {
   const raw = String(data.preview ?? data.detail ?? '').replace(/\r\n?/g, '\n').trimEnd();
   if (!raw) return { lines: [], more: 0 };

package/src/tui/widgets.js

@@ -160,6 +160,38 @@ export function Elapsed({ since, color, interval = 1000 }) {
   return h(Text, { color: color || p.dim }, label);
 }
 
+/**
+ * One composer line with the cursor drawn OVER the character at the cursor (inverse
+ * video, like a terminal's own block cursor) — never inserted between characters.
+ *
+ * The inserted glyph this replaced took a column of its own, so every character after
+ * the cursor moved one cell right as the cursor passed and back as it left ("the
+ * characters go left and right while I type"), and on a line that was exactly full the
+ * extra cell made the line re-wrap mid-typing. Here the width never changes: the cursor
+ * sits on the next character, or on the one spare column kept at the end of the line.
+ */
+export function CursorRow({ left = [], right = [], color }) {
+  const p = palette();
+  const active = motionOn();
+  const { frame } = useAnimation({ interval: 530, isActive: active });
+  const on = !active || frame % 2 === 0;
+  const rest = right.slice();
+  let under = ' ';
+  let underSpan = {};
+  if (rest.length) {
+    const first = { ...rest[0] };
+    const chars = Array.from(String(first.t));
+    under = chars[0] || ' ';
+    underSpan = first;
+    if (chars.length > 1) rest[0] = { ...first, t: chars.slice(1).join('') };
+    else rest.shift();
+  }
+  const cursor = on
+    ? { ...underSpan, t: under, inverse: !color, backgroundColor: color || undefined, color: color ? (p.name === 'light' ? '#ffffff' : '#000000') : underSpan.color }
+    : { ...underSpan, t: under };
+  return h(Row, { spans: [...left, cursor, ...rest] });
+}
+
 /** A block cursor that blinks. Off under reduced motion, where it stands solid. */
 export function Caret({ color, char = '▏' }) {
   const p = palette();

package/src/tui-ink.js

@@ -26,9 +26,9 @@ import path from 'node:path';
 import React from 'react';
 import { Box, Spacer, Text, render, useAnimation, useApp, useCursor, useInput, usePaste, useWindowSize } from 'ink';
 import { palette, resetPalette, mix, ramp } from './tui/theme.js';
-import { makeEntry, rowsFor, invalidate } from './tui/entries.js';
+import { makeEntry, rowsFor, invalidate, expandable } from './tui/entries.js';
 import { plain, stringWidth, truncateRow, wrapRow, rowText, inverseRange } from './tui/ansi.js';
-import { Spinner, Shimmer, GradientText, FlowingRule, Meter, Elapsed, Caret, Rows, Row, Reveal, motionOn, publishSettings } from './tui/widgets.js';
+import { Spinner, Shimmer, GradientText, FlowingRule, Meter, Elapsed, CursorRow, Rows, Row, Reveal, motionOn, publishSettings } from './tui/widgets.js';
 import { wordRows, wordSize } from './tui/wordmark.js';
 import { enableMouse, disableMouse, parseMouse, isMouse, isMouseFragment, createHitMap } from './tui/mouse.js';
 import { openUrl } from './open.js';
@@ -320,21 +320,25 @@ function Hero({ state, width, height }) {
 function layoutTranscript(state, width, height, top) {
   const inner = Math.max(24, width - 2);
   const rows = [];
+  // Which entry each row belongs to, and whether it is that entry's first row — so a
+  // click on a tool row's or a diff's header line can open or close it.
+  const owners = [];
   // Where each prompt starts, so the sticky header can name the one whose answer is
   // currently on screen rather than always the newest.
   const prompts = [];
   for (const entry of state.transcript) {
     const built = rowsFor(entry, inner);
     if (!built.length) continue;
-    if (rows.length) rows.push([]);
+    if (rows.length) { rows.push([]); owners.push(null); }
     if (entry.kind === 'user') prompts.push({ at: rows.length, text: String(entry.data.text || '') });
-    rows.push(...built);
+    built.forEach((row, i) => { rows.push(row); owners.push({ entry, head: i === 0 }); });
   }
   if (state.live && state.live.text) {
     const built = rowsFor(state.live.entry, inner);
     if (built.length) {
-      if (rows.length) rows.push([]);
+      if (rows.length) { rows.push([]); owners.push(null); }
       rows.push(...built);
+      for (let i = 0; i < built.length; i++) owners.push(null);
     }
   }
 
@@ -355,6 +359,7 @@ function layoutTranscript(state, width, height, top) {
   const end = rows.length - offset;
   const first = Math.max(0, end - height);
   const visible = rows.slice(first, end);
+  const visibleOwners = owners.slice(first, end);
   // Bottom-anchored: a short conversation sits at the composer, not floating at the top
   // of an empty screen with the input a dozen rows below it.
   const pad = Math.max(0, height - visible.length);
@@ -363,6 +368,7 @@ function layoutTranscript(state, width, height, top) {
   // The drag handler needs the text under the pointer, and it must be the text actually
   // on screen rather than the transcript's idea of it.
   state.screen = { top: screenTop, left: 2, rows: visible };
+  state.totalRows = rows.length;
 
   // The sticky header names the prompt whose answer you are looking at — the last one
   // that has scrolled off the top. Scroll far enough that the prompt itself is back on
@@ -370,7 +376,44 @@ function layoutTranscript(state, width, height, top) {
   const owning = prompts.filter((entry) => entry.at < first).at(-1);
   state.stickyPrompt = owning ? owning.text : '';
 
-  return { visible, pad, screenTop };
+  return { visible, pad, screenTop, owners: visibleOwners };
+}
+
+/** Can a click open this entry? A finished tool row with more behind it, or a long diff. */
+function openable(entry) {
+  if (!entry) return false;
+  if (entry.kind === 'tool') return entry.data.status !== 'running' && expandable(entry.data);
+  if (entry.kind === 'diff') return String(entry.data.patch || '').split('\n').length > (entry.data.max || 40);
+  return false;
+}
+
+/** The header line of every openable entry on screen is a click target. */
+function registerToggleHits(owners, screenTop, width, hits) {
+  if (!hits || !owners) return;
+  owners.forEach((owner, index) => {
+    if (!owner?.head || !openable(owner.entry)) return;
+    hits.add({ x1: 1, x2: width, y1: screenTop + index, y2: screenTop + index, action: { type: 'toggle', entry: owner.entry } });
+  });
+}
+
+/** Credits as the website writes them: 1,234 · 45.6 · 0.42. */
+export function fmtCredits(n) {
+  const v = Number(n) || 0;
+  if (v >= 1000) return Math.round(v).toLocaleString('en-IN');
+  if (v >= 10) return String(Math.round(v * 10) / 10);
+  return String(Math.round(v * 100) / 100);
+}
+
+/**
+ * Is this burst of input a paste rather than typing? True when a line break is followed
+ * by at least two more characters, or when it holds two or more line breaks outside a
+ * single \r\n pair. "abc\r" (typed fast, then Enter) is typing.
+ */
+export function isPasteBurst(text) {
+  const s = String(text || '');
+  const breaks = (s.replace(/\r\n/g, '\n').match(/[\r\n]/g) || []).length;
+  if (breaks >= 2) return true;
+  return /[\r\n][^\r\n\x1b]{2,}/.test(s);
 }
 
 /**
@@ -581,19 +624,20 @@ function Composer({ state, width }) {
           // The caret sits AT the cursor. It used to be drawn after the whole line, so
           // moving left with the arrow keys showed no movement at all while typing went
           // in somewhere in the middle.
-          const [left, right] = index === caretLine ? splitSpansAt(row, caretCol) : [row, []];
-          return h(Box, { key: index, flexDirection: 'row' },
-          h(Row, { spans: left, wrap: 'wrap' }),
+          // One text run per line, the cursor drawn over the character at the cursor
+          // (CursorRow) — the line's width never changes as the cursor moves.
           // The caret is always present, including at an empty prompt. Hiding it there
           // was meant to keep it off the placeholder, but the result is a prompt with
           // no cursor at all — there is nothing on screen saying the app is waiting for
           // typing, which is the one thing a prompt has to say. The placeholder sits
           // AFTER the caret instead, so the caret is at the insertion point either way.
-          index === caretLine ? h(Caret, { color: p.brand, char: g('▏', '_') }) : null,
-          right.length ? h(Row, { spans: right, wrap: 'wrap' }) : null,
-          !state.input && index === 0
-            ? h(Text, { color: p.faint, italic: true, wrap: 'truncate-end' }, placeholder)
-            : null,
+          if (index !== caretLine) return h(Box, { key: index }, h(Row, { spans: row }));
+          const [left, right] = splitSpansAt(row, caretCol);
+          return h(Box, { key: index, flexDirection: 'row' },
+            h(CursorRow, { left, right, color: p.brand }),
+            !state.input && index === 0
+              ? h(Text, { color: p.faint, italic: true, wrap: 'truncate-end' }, placeholder)
+              : null,
           );
         }),
       ),
@@ -654,7 +698,9 @@ function composerLayout(state, width, spans = null) {
   const cursor = Math.max(0, Math.min(input.length, state.cursor ?? input.length));
   for (const para of paragraphs) {
     const text = para.map((s) => s.t).join('');
-    const rows = para.length ? wrapRow(para, width) : [[]];
+    // One column is kept spare for the cursor to sit on after a line's last character,
+    // so a full line never grows a cell when the cursor reaches its end.
+    const rows = para.length ? wrapRow(para, Math.max(4, width - 1)) : [[]];
     if (cursor >= start && cursor <= start + text.length) {
       let rowStart = start;
       let line = rows.length - 1;
@@ -732,7 +778,12 @@ function StatusBar({ state, width }) {
   if (state.spent?.turns) {
     right.push({ t: `${state.spent.turns} turn${state.spent.turns === 1 ? '' : 's'}`, color: p.faint });
     right.push({ t: `  ${g('·', '|')}  `, color: p.faint });
-    right.push({ t: `${((state.spent.input || 0) + (state.spent.cached || 0) + (state.spent.output || 0)).toLocaleString()} tok`, color: p.faint });
+    // Credits — what the plan counts — when the gateway reports them. The raw token sum
+    // (input + cached + output) this used to show was ~20× the number the plan counted,
+    // for the same session, and matched neither the allowance nor the cost.
+    right.push(state.spent.credits
+      ? { t: `${fmtCredits(state.spent.credits)} credits`, color: p.faint }
+      : { t: `${((state.spent.input || 0) + (state.spent.cached || 0) + (state.spent.output || 0)).toLocaleString()} tok`, color: p.faint });
   }
   // The counter on the right keeps its width; the hints get what is left, with a gap.
   // Both used to shrink together, so the hints were cut off flush against the counter
@@ -1027,6 +1078,7 @@ function App({ controller }) {
     ? { visible: [], pad: 0, screenTop: transcriptTop + 1 }
     : layoutTranscript(state, width, transcriptHeight, transcriptTop);
   hits.add({ x1: 1, x2: width, y1: transcriptTop + 1, y2: transcriptTop + transcriptHeight, action: { type: 'transcript' } });
+  registerToggleHits(layout.owners, layout.screenTop, width, hits);
   registerLinkHits(layout.visible, layout.screenTop, hits);
   registerHeaderHits(state, width, hits);
   hits.add({ x1: 1, x2: width, y1: height, y2: height, action: { type: 'status' } });
@@ -1144,7 +1196,7 @@ export function createTui({ slashCommands = [], fileProvider = null, meta = {},
     onLine: null, onEscape: null, onRewind: null, onCommand: null, onCopy: null, onModeCycle,
     debug: !!process.env.JAITUS_DEBUG, introDone: false,
     turnStartedAt: null, turnTokens: 0,
-    spent: { turns: 0, input: 0, cached: 0, output: 0 },
+    spent: { turns: 0, input: 0, cached: 0, output: 0, credits: 0 },
     meta: { model: 'loading…', mode: 'default', ctx: '0 tok', ctxUsed: 0, ctxMax: 1, intent: 'build', ...meta },
   };
 
@@ -1678,6 +1730,26 @@ export function createTui({ slashCommands = [], fileProvider = null, meta = {},
         return;
       case 'status':
         return openPalette();
+      case 'toggle': {
+        // Open or close a tool row / diff. Everything it adds or removes is BELOW the
+        // header, and the scroll offset counts rows up from the bottom — so the offset
+        // moves by exactly that much and the header stays under the pointer.
+        const entry = region.action.entry;
+        const inner = Math.max(24, (state._width || process.stdout.columns || 80) - 2);
+        const rowsOf = () => rowsFor(entry, inner).length;
+        const before = rowsOf();
+        entry.data.expanded = !entry.data.expanded;
+        entry._w = -1;
+        entry._rows = null;
+        const delta = rowsOf() - before;
+        if (delta !== 0) {
+          state.viewingTranscript = true;
+          state.transcriptOffset = Math.max(0, (state.transcriptOffset || 0) + delta);
+        }
+        clearTimeout(returnToLiveTimer);
+        notifyNow();
+        return;
+      }
       case 'transcript':
         // A click in the body is how you get back to the live end after scrolling.
         // Deferred, and cancelled by a second click: a double-click to select a word
@@ -1855,6 +1927,16 @@ export function createTui({ slashCommands = [], fileProvider = null, meta = {},
     // Fast PTYs on Windows deliver a typed line and its carriage return in one chunk.
     // Split here or the return becomes a literal character in the composer.
     const newlineAt = String(input || '').search(/[\r\n]/);
+    // A paste the terminal did not mark as one (no bracketed-paste codes — some Windows
+    // consoles, SSH, right-click paste in older hosts) arrives as a burst with a return
+    // at every line end, and each return used to SEND: pasting a 17-line error log sent
+    // 16 messages in a few seconds (seen in production, all refused). A person never
+    // types a return and then more text inside one burst; a paste always does. So a
+    // burst with text after a line break, or several line breaks, is a paste.
+    if (newlineAt >= 0 && isPasteBurst(String(input))) {
+      handlePaste(String(input).replace(/[\r\n]+$/, ''));
+      return notifyNow();
+    }
     if (newlineAt >= 0) {
       const text = String(input);
       const typed = text.slice(0, newlineAt);