tokenmaw 0.3.0 → 0.4.0

package/dist/ui/tui-design.js

@@ -35,6 +35,7 @@ const TOOL_LABELS = {
     search_files: 'Find files',
     search_history: 'Search history',
     search_text: 'Search',
+    shell: 'Shell',
     spawn_agent: 'Start agent',
     send_agent: 'Message agent',
     wait_agent: 'Wait for agent',
@@ -92,3 +93,80 @@ export function visibleTimelineEntries(entries, limit = 400) {
     const omitted = Math.max(0, entries.length - safeLimit);
     return { entries: omitted ? entries.slice(omitted) : entries, omitted };
 }
+const WAITING_DOT = '.';
+// One full gradient cycle in frames; divisible by 3 so the per-dot phase
+// offsets stay evenly spaced.
+const WAITING_CYCLE = 24;
+const WAITING_PHASES = [0, 1 / 6, 1 / 3];
+const isHexColor = (color) => /^#[0-9a-fA-F]{6}$/.test(color);
+function blendHex(low, high, intensity) {
+    const channels = [0, 1, 2].map((channel) => {
+        const from = parseInt(low.slice(1 + channel * 2, 3 + channel * 2), 16);
+        const to = parseInt(high.slice(1 + channel * 2, 3 + channel * 2), 16);
+        return Math.round(from + (to - from) * intensity);
+    });
+    return `#${channels.map((value) => Math.max(0, Math.min(255, value)).toString(16).padStart(2, '0')).join('')}`;
+}
+/**
+ * Animated ellipsis for the assistant slot while a turn has been submitted but
+ * no token has arrived. Pure and deterministic: the frame number is the only
+ * input, colors come from the caller, and nothing here touches blessed state.
+ * Dots cycle through a gradient between the two colors with per-dot phase
+ * offset (eased-cosine interpolation); non-hex colors degrade to a single tag.
+ */
+export function waitingIndicatorFrame(frame, colors) {
+    const safeFrame = Number.isFinite(frame) ? Math.max(0, Math.floor(frame)) : 0;
+    const accent = typeof colors?.accent === 'string' ? colors.accent : '';
+    const subtle = typeof colors?.subtle === 'string' ? colors.subtle : '';
+    if (isHexColor(accent) && isHexColor(subtle)) {
+        const dots = WAITING_PHASES.map((phase, index) => {
+            const progress = (((safeFrame % WAITING_CYCLE) / WAITING_CYCLE) + phase) % 1;
+            const eased = (1 - Math.cos(progress * Math.PI * 2)) / 2;
+            const color = blendHex(subtle, accent, eased);
+            return `{${color}-fg}${WAITING_DOT}{/${color}-fg}`;
+        });
+        return dots.join('');
+    }
+    const fallback = (isHexColor(accent) ? accent : '') || (isHexColor(subtle) ? subtle : '') || accent || subtle || 'gray';
+    return `{${fallback}-fg}...{/${fallback}-fg}`;
+}
+/** Braille dot glyphs, ordered like the classic "dots" spinner. */
+const SPINNER_GLYPHS = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+/** Ticks per ease cycle (~0.48s at the 60ms timer cadence). */
+const SPINNER_CYCLE = 8;
+/** Glyphs advanced per tick while resting (the slow phase). */
+const SPINNER_REST = 0.35;
+/** Extra glyphs per tick at the top of the beat (the fast phase). */
+const SPINNER_SWING = 0.65;
+/** Eased per-tick advance: rest → accelerate → sweep → settle. */
+const SPINNER_STEPS = Array.from({ length: SPINNER_CYCLE }, (_, k) => SPINNER_REST + SPINNER_SWING * (1 - Math.cos((k / SPINNER_CYCLE) * Math.PI * 2)) / 2);
+/** Glyphs swept per full ease cycle. */
+const SPINNER_TRAVEL = SPINNER_STEPS.reduce((sum, step) => sum + step, 0);
+/** Running position at the start of each phase within a cycle. */
+const SPINNER_OFFSETS = SPINNER_STEPS.map((_, k) => SPINNER_STEPS.slice(0, k).reduce((sum, step) => sum + step, 0));
+/**
+ * Eased activity spinner pacing. A fixed interval reads as either sluggish
+ * (slow enough to stay calm) or frantic (fast enough to feel alive), so the
+ * glyph index instead rides an eased cosine: quick sweeps, then a graceful
+ * pause, forever. Position is a running total of the eased per-tick advance,
+ * which keeps the spin strictly forward while its speed breathes. Pure and
+ * deterministic so callers and tests can scrub the timeline.
+ */
+export function spinnerGlyphFrame(tick) {
+    const safeTick = Number.isFinite(tick) ? Math.max(0, Math.floor(tick)) : 0;
+    const cycle = Math.floor(safeTick / SPINNER_CYCLE);
+    const offset = SPINNER_OFFSETS[safeTick % SPINNER_CYCLE] ?? 0;
+    const travel = cycle * SPINNER_TRAVEL + offset;
+    return Math.floor(travel % SPINNER_GLYPHS.length);
+}
+/** Resolved glyph for an activity tick; falls back to the first glyph. */
+export function spinnerGlyph(tick) {
+    return SPINNER_GLYPHS[spinnerGlyphFrame(tick)] ?? SPINNER_GLYPHS[0];
+}
+/** A turn is pending with no streamed token yet: show the waiting ellipsis. */
+export function isWaitingForFirstToken(state) {
+    if (state.sessionHasTimeline) {
+        return state.pendingTurns > 0 && state.streamingEntries === 0 && state.runningTimelineEntries === 0;
+    }
+    return false;
+}

package/dist/ui/welcome.js

@@ -1,21 +1,154 @@
-/** A quiet, static wordmark. Center against the window, not its scrollback. */
+/** A big animated wordmark: theme-gradient block letters with a clean ping-ponging shine; the phosphor theme rains glyphs through the background instead. */
+import { activeTuiTheme } from './theme.js';
+const GLYPH_LETTERS = [
+    ['███╗   ███╗', '████╗ ████║', '██╔████╔██║', '██║╚██╔╝██║', '██║ ╚═╝ ██║', '╚═╝     ╚═╝'],
+    [' █████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║  ██║', '╚═╝  ╚═╝'],
+    ['██╗    ██╗', '██║    ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝'],
+];
+const LOGO = (() => {
+    const letters = GLYPH_LETTERS.map((rows) => {
+        const widest = Math.max(...rows.map((row) => row.length));
+        return rows.map((row) => row.padEnd(widest));
+    });
+    const rows = [];
+    for (let line = 0; line < 6; line++)
+        rows.push(letters.map((letter) => letter[line]).join(' '));
+    return rows;
+})();
+const LOGO_WIDTH = LOGO[0].length;
+const BRAND = 'T O K E N M A W';
+const TAGLINE = 'multi-agent coding runtime';
+const RAIN_GLYPHS = '01ﾊﾋｸｼｱｳﾄﾅﾆﾇﾈﾓﾘ';
+function hexToRgb(hex) {
+    const value = hex.replace('#', '');
+    return [parseInt(value.slice(0, 2), 16), parseInt(value.slice(2, 4), 16), parseInt(value.slice(4, 6), 16)];
+}
+function mix(from, to, t) {
+    const a = hexToRgb(from);
+    const b = hexToRgb(to);
+    return '#' + a.map((channel, index) => Math.round(channel + (b[index] - channel) * t).toString(16).padStart(2, '0')).join('');
+}
+/** Stateless pseudo-randomness keyed by frame and cell, so the render stays a pure function. */
+function flicker(frame, seed) {
+    let x = (Math.imul(frame + 1, 2654435761) ^ Math.imul(seed + 1, 97531)) >>> 0;
+    x ^= x >>> 16;
+    x = Math.imul(x, 0x45d9f3b);
+    x ^= x >>> 16;
+    x = Math.imul(x, 0x45d9f3b);
+    x ^= x >>> 16;
+    return (x >>> 0) / 4294967296;
+}
 export function renderWelcome(width, height, terminalHeight = height, frame = 0) {
     width = Math.max(1, Math.floor(width));
     height = Math.max(1, Math.floor(height));
     const rows = Array.from({ length: height }, () => '');
-    const wordmark = width >= 9 ? 'C O D E R' : 'CODER'.slice(0, width);
     const center = Math.max(0, Math.min(height - 1, Math.floor((terminalHeight - 1) / 2)));
-    const left = ' '.repeat(Math.max(0, Math.floor((width - wordmark.length) / 2)));
-    rows[center] = `${left}{white-fg}{bold}${wordmark}{/bold}{/white-fg}`;
-    if (center + 2 < height && width >= 9) {
-        // A four-second, eased breath in one subdued hue, with a slight spatial
-        // falloff. No discrete moving cell or white flash at the turning points.
-        const breath = (1 - Math.cos((frame % 80) / 80 * Math.PI * 2)) / 2;
+    const palette = activeTuiTheme().markdown;
+    const cycle = frame % 80;
+    const logoTop = center - 3;
+    if (width >= LOGO_WIDTH + 3 && logoTop >= 0 && logoTop + LOGO.length <= height) {
+        // One clean motion layer for every theme: the shine rides diagonal "/"
+        // stripes (distance along u = x + rise · y) and ping-pongs end to end.
+        // Its phase advances at a rate that itself sways, so the band lingers at
+        // the ends, then dashes across — never a flat metronome. No other motion
+        // touches the letterforms.
+        const rise = 2;
+        const span = LOGO_WIDTH + rise * (LOGO.length - 1);
+        const theta = 0.04 * frame + 3.5 * Math.sin(frame / 170);
+        const ride = Math.sin(theta);
+        const bandCenter = span / 2 + ride * (span / 2 + 6);
+        const bandWidth = 18;
+        const glowBoost = 0.7;
+        // The phosphor theme swaps the empty space around the mark for glyph
+        // rain: per-column heads fall the full height of the screen, trailing a
+        // fading wake. The letterforms themselves stay pristine on top.
+        const effect = activeTuiTheme().name === 'matrix' ? 'rain' : 'shine';
+        const RAIN_TRAIL = 7;
+        const rainCycle = height + RAIN_TRAIL;
+        const rainHead = [];
+        const rainPass = [];
+        for (let column = 0; column < width; column++) {
+            const speed = 0.12 + flicker(column * 13 + 5, 401) * 0.23;
+            const phase = flicker(column * 13 + 7, 402) * 240;
+            const travel = frame * speed + phase;
+            rainHead.push(Math.floor(travel % rainCycle));
+            rainPass.push(Math.floor(travel / rainCycle));
+        }
+        const rainAt = (row, x) => {
+            if (effect !== 'rain')
+                return ' ';
+            const depth = rainHead[x] - row;
+            if (depth < 0 || depth > RAIN_TRAIL)
+                return ' ';
+            // Wet/dry gates and glyphs are keyed to the column's current pass, not
+            // the frame: characters hold steady while the trail covers them and only
+            // re-roll when the head wraps around — the rain shimmers, not flickers.
+            if (flicker(rainPass[x] * 89 + 7, row * 31 + x) <= 0.25)
+                return ' ';
+            const slot = flicker(rainPass[x] * 97 + 13, row * 53 + x) * RAIN_GLYPHS.length;
+            const tick = Math.floor(frame / 8);
+            const mutated = flicker(tick * 71 + 3, row * 53 + x) > 0.94;
+            const glyph = RAIN_GLYPHS[Math.floor(mutated ? slot + 5.5 : slot) % RAIN_GLYPHS.length];
+            const color = depth === 0 ? palette.text : mix(mix(palette.accent, '#000000', 0.55), palette.text, 1 - depth / RAIN_TRAIL);
+            return `{${color}-fg}${glyph}{/${color}-fg}`;
+        };
+        const rainPad = (row, from, to) => {
+            let pad = '';
+            for (let x = from; x < to; x++)
+                pad += rainAt(row, x);
+            return pad;
+        };
+        const leftCells = Math.floor((width - LOGO_WIDTH) / 2);
+        LOGO.forEach((template, rowIndex) => {
+            const row = logoTop + rowIndex;
+            let line = '';
+            for (let column = 0; column < LOGO_WIDTH; column++) {
+                const diagonal = column + rowIndex * rise;
+                const dx = diagonal - bandCenter;
+                const glow = Math.exp(-(dx * dx) / bandWidth);
+                const base = mix(palette.accent, palette.heading, diagonal / span);
+                const intensity = Math.min(0.95, glow * glowBoost);
+                const color = intensity > 0.03 ? mix(base, palette.headingStrong, intensity) : base;
+                const glyph = template[column];
+                if (glyph === ' ') {
+                    line += rainAt(row, leftCells + column);
+                    continue;
+                }
+                line += `{${color}-fg}${glyph}{/${color}-fg}`;
+            }
+            rows[row] = `${rainPad(row, 0, leftCells)}${line}${rainPad(row, leftCells + LOGO_WIDTH, width)}`;
+        });
+        const brandRow = logoTop + LOGO.length + 1;
+        if (brandRow < height && BRAND.length <= width) {
+            const brandLeft = Math.floor((width - BRAND.length) / 2);
+            const brand = `{${palette.headingStrong}-fg}{bold}${BRAND}{/bold}{/${palette.headingStrong}-fg}`;
+            rows[brandRow] = `${rainPad(brandRow, 0, brandLeft)}${brand}${rainPad(brandRow, brandLeft + BRAND.length, width)}`;
+        }
+        const taglineRow = brandRow + 1;
+        if (taglineRow < height && TAGLINE.length <= width) {
+            const taglineLeft = Math.floor((width - TAGLINE.length) / 2);
+            const tagline = `{${palette.muted}-fg}${TAGLINE}{/${palette.muted}-fg}`;
+            rows[taglineRow] = `${rainPad(taglineRow, 0, taglineLeft)}${tagline}${rainPad(taglineRow, taglineLeft + TAGLINE.length, width)}`;
+        }
+        for (let row = 0; row < height; row++) {
+            if (rows[row] !== '')
+                continue;
+            let line = '';
+            for (let column = 0; column < width; column++)
+                line += rainAt(row, column);
+            rows[row] = line;
+        }
+        return rows;
+    }
+    const wordmark = width >= 17 ? BRAND : 'MAW'.slice(0, Math.min(3, width));
+    rows[center] = `${' '.repeat(Math.max(0, Math.floor((width - wordmark.length) / 2)))}{white-fg}{bold}${wordmark}{/bold}{/white-fg}`;
+    if (center + 2 < height && width >= 5) {
+        // A four-second, eased breath derived from the theme accent, with a
+        // slight spatial falloff and no discrete moving cell.
+        const breath = (1 - Math.cos(cycle / 80 * Math.PI * 2)) / 2;
         const rule = [0, 1, 2].map((index) => {
             const intensity = breath * (index === 1 ? 1 : 0.85);
-            const low = [48, 66, 72];
-            const high = [91, 135, 146];
-            const color = '#' + low.map((value, channel) => Math.round(value + (high[channel] - value) * intensity).toString(16).padStart(2, '0')).join('');
+            const color = mix(mix(palette.accent, '#000000', 0.65), palette.accent, intensity);
             return `{${color}-fg}─{/${color}-fg}`;
         }).join('');
         rows[center + 2] = `${' '.repeat(Math.floor((width - 3) / 2))}${rule}`;

package/docs/architecture-revision.md

@@ -263,7 +263,7 @@ TUI 不再模拟任务管理器，而采用现代桌面聊天应用布局：
 - [ ] main 的“相关工作复用还是新建 coordinator”由 LLM/spec 决定，Runtime 尚未提供语义相似度或去重兜底。
 - [ ] TUI 已现代化但仍是 Blessed 单体界面，尚未拆成可复用组件；暂不提供 Web 客户端。
 - [ ] 多用户、多进程服务化和远程 agent 执行尚未实现。
-- [ ] Agent 级 token/cost 统计和完整 trace 导出尚未实现。
+- [x] Agent 级 token/延迟统计已记录并在 TUI 状态栏展示；完整 trace 导出仍待后续补充。
 
 ## 10. 验收标准
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenmaw",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "dist",
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "clean": "node -e \"const fs=require('fs'),path=require('path'),p=path.resolve('dist');if(path.basename(p)!=='dist')throw new Error('unsafe clean target');fs.rmSync(p,{recursive:true,force:true})\"",
-    "build": "npm run clean && tsc -p tsconfig.json",
+    "build": "npm run clean && tsc -p tsconfig.json && node -e \"const fs=require('fs');const p='dist/cli.js';if(fs.existsSync(p))fs.chmodSync(p,0o755)\"",
     "start": "node dist/cli.js",
     "dev": "tsx src/cli.ts",
     "test": "node --import tsx/esm --test tests/*.test.ts tests/**/*.test.ts",