blyuecode 0.1.15 → 0.1.17

package/dist/ui/Banner.js

@@ -5,7 +5,7 @@ import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import os from 'os';
-import { hueAt } from './animColor.js';
+import { pastelAt } from './pastel.js';
 function getVersion() {
     try {
         const here = dirname(fileURLToPath(import.meta.url));
@@ -63,8 +63,6 @@ const CODE_SMALL = [
 ];
 const BLYUE_WIDTH = 44;
 const BLYUE_SMALL_WIDTH = 27;
-// Single <Text> — was previously a fragment with two <Text> children,
-// which React/Ink flagged as "list without keys" under the parent Text.
 const MakerMarkInline = ({ color }) => (_jsx(Text, { color: color, bold: true, children: "\u25C6  L U M E N" }));
 export const Banner = () => {
     const { stdout } = useStdout();
@@ -77,14 +75,15 @@ export const Banner = () => {
     const pad = ' '.repeat(leftPad);
     const [animate] = useState(() => shouldAnimate());
     const [t, setT] = useState(0);
+    // Slow pastel drift — 24s full cycle, matches the rest of the TUI.
     useEffect(() => {
         if (!animate)
             return;
-        const interval = setInterval(() => setT((v) => (v + 1 / 320) % 1), 120);
+        const interval = setInterval(() => setT((v) => (v + 1 / 200) % 1), 120);
         return () => clearInterval(interval);
     }, [animate]);
-    const baseHue = animate ? t : 0.1;
-    const brand = hueAt(baseHue);
+    const baseHue = animate ? t : 0.08;
+    const brand = pastelAt(baseHue);
     const version = getVersion();
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [pad, _jsx(MakerMarkInline, { color: brand })] }), _jsx(Text, { children: " " }), blyue.map((line, i) => (_jsx(Text, { color: hueAt((baseHue + i * 0.06) % 1), bold: true, children: pad + line }, 'b' + i))), code.map((line, i) => (_jsx(Text, { color: hueAt((baseHue + i * 0.06 + 0.35) % 1), bold: true, children: pad + line }, 'c' + i))), _jsx(Text, { children: " " }), _jsxs(Text, { children: [pad, _jsx(Text, { color: "gray", children: 'a coding agent · v' + version })] }), _jsx(Text, { children: " " })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [pad, _jsx(MakerMarkInline, { color: brand })] }), _jsx(Text, { children: " " }), blyue.map((line, i) => (_jsx(Text, { color: pastelAt((baseHue + i * 0.035) % 1), bold: true, children: pad + line }, 'b' + i))), code.map((line, i) => (_jsx(Text, { color: pastelAt((baseHue + i * 0.035 + 0.18) % 1), bold: true, children: pad + line }, 'c' + i))), _jsx(Text, { children: " " }), _jsxs(Text, { children: [pad, _jsx(Text, { color: "gray", children: 'a coding agent · v' + version })] }), _jsx(Text, { children: " " })] }));
 };

package/dist/ui/Chat.js

@@ -12,13 +12,15 @@ import { Settings } from './Settings.js';
 import { PermissionPrompt } from './PermissionPrompt.js';
 import { Spinner } from './Spinner.js';
 import { toolToState } from './MascotPrompt.js';
+import { useSlowColor } from './useSlowColor.js';
+import { pastelAt } from './pastel.js';
 import { bumpActivity } from './activity.js';
 import { theme } from './theme.js';
 let nextId = 0;
 const mkItem = (kind, text) => ({ kind, text, id: nextId++ });
 const HistoryLine = ({ item }) => {
     if (item.kind === 'user') {
-        return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.accent, bold: true, children: '❯ ' }), _jsx(Text, { color: theme.text, bold: true, children: item.text })] }));
+        return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: pastelAt(0.08), bold: true, children: '❯ ' }), _jsx(Text, { color: theme.text, bold: true, children: item.text })] }));
     }
     if (item.kind === 'error') {
         return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.error, children: '❯ ' }), _jsx(Text, { color: theme.error, children: item.text })] }));
@@ -93,6 +95,7 @@ export const Chat = ({ resumedCount = 0 }) => {
         setMascotState(state);
         setTimeout(() => setMascotState(undefined), ms);
     };
+    const slowColor = useSlowColor();
     useInput((inputChar, key) => {
         bumpActivity();
         if (permReq)
@@ -245,5 +248,5 @@ export const Chat = ({ resumedCount = 0 }) => {
     const shortModel = currentModel.length > maxModelLen
         ? '…' + currentModel.slice(-(maxModelLen - 1))
         : currentModel || 'unset';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: history, children: (item) => _jsx(HistoryLine, { item: item }, item.id) }), streaming ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.text, children: streaming }) })) : loading ? (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, {}) })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(InputBar, { value: input, onChange: setInput, onSubmit: handleSubmit, loading: loading, mascotState: mascotState, elapsedSec: elapsedSec }), _jsxs(Text, { children: [_jsx(Text, { color: theme.accent, children: "  /model" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: theme.accent, children: "/settings" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: theme.accent, children: "/compact" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: theme.text, children: shortModel })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: history, children: (item) => _jsx(HistoryLine, { item: item }, item.id) }), streaming ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.text, children: streaming }) })) : loading ? (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, {}) })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(InputBar, { value: input, onChange: setInput, onSubmit: handleSubmit, loading: loading, mascotState: mascotState, elapsedSec: elapsedSec }), _jsxs(Text, { children: [_jsx(Text, { color: slowColor, children: "  /model" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: slowColor, children: "/settings" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: slowColor, children: "/compact" }), _jsx(Text, { color: theme.muted, children: "  \u00B7  " }), _jsx(Text, { color: theme.text, children: shortModel })] })] })] }));
 };

package/dist/ui/InputBar.js

@@ -6,10 +6,12 @@ import { Placeholder } from './Placeholder.js';
 import { RocketBar } from './RocketBar.js';
 import { MascotPrompt } from './MascotPrompt.js';
 import { theme } from './theme.js';
+import { useSlowColor } from './useSlowColor.js';
 const DOTS = ['●○○○', '○●○○', '○○●○', '○○○●'];
 export const InputBar = ({ value, onChange, onSubmit, loading, mascotState, awaitingPermission, elapsedSec = 0, }) => {
     const { stdout } = useStdout();
     const width = Math.max(24, stdout?.columns ?? 50);
+    const pastel = useSlowColor();
     const [dotI, setDotI] = useState(0);
     useEffect(() => {
         if (!loading)
@@ -18,13 +20,6 @@ export const InputBar = ({ value, onChange, onSubmit, loading, mascotState, awai
         return () => clearInterval(int);
     }, [loading]);
     const hasText = value.length > 0;
-    // Priority:
-    //   explicit mascotState
-    //   → permission waiting
-    //   → impatient if running > 8s
-    //   → thinking if loading
-    //   → typing if has text
-    //   → idle
     const state = mascotState ??
         (awaitingPermission ? 'permission' :
             loading && elapsedSec > 8 ? 'impatient' :
@@ -33,5 +28,5 @@ export const InputBar = ({ value, onChange, onSubmit, loading, mascotState, awai
     const label = awaitingPermission ? 'waiting' : loading ? 'thinking' : 'blyue';
     const status = loading ? ' ' + DOTS[dotI] + ' ' : '';
     const botLen = Math.max(0, width - 2 - status.length);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(MascotPrompt, { state: state }), _jsx(RocketBar, { label: label, loading: loading, width: width }), _jsxs(Box, { children: [_jsx(Text, { color: theme.accent, bold: true, children: '❯ ' }), hasText ? (_jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit })) : (_jsxs(_Fragment, { children: [_jsx(Placeholder, {}), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit })] }))] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(botLen) }), loading && _jsx(Text, { color: theme.accent, children: status }), _jsx(Text, { color: theme.muted, children: "\u256F" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(MascotPrompt, { state: state }), _jsx(RocketBar, { label: label, loading: loading, width: width }), _jsxs(Box, { children: [_jsx(Text, { color: pastel, bold: true, children: '❯ ' }), hasText ? (_jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit })) : (_jsxs(_Fragment, { children: [_jsx(Placeholder, {}), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit })] }))] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(botLen) }), loading && _jsx(Text, { color: pastel, children: status }), _jsx(Text, { color: theme.muted, children: "\u256F" })] })] }));
 };

package/dist/ui/MascotPrompt.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from './theme.js';
 import { useIdle, defaultIdleThresholds, idleDisabled } from './useIdle.js';
+import { useSlowColor } from './useSlowColor.js';
 import { Zzz } from './SleepZs.js';
 const FACES = {
     idle: ['◕‿◕', '◕‿◕', '◕_◕', '◕‿◕', '◕‿◕', '◕‿◕', '◕_◕', '◕‿◕'],
@@ -30,8 +31,6 @@ const SPEEDS = {
 };
 const DROWSY_FACE = '–_–';
 const SLEEPING_FACE = '-‿-';
-// Reserved vertical rows above the face. Every state renders exactly
-// this many rows so Ink never has to reflow the layout below us.
 const TOP_ROWS = 2;
 export function toolToState(tool) {
     if (tool === 'read_file')
@@ -49,6 +48,20 @@ export function toolToState(tool) {
     return 'thinking';
 }
 const BlankRows = () => (_jsx(_Fragment, { children: Array.from({ length: TOP_ROWS }, (_, i) => (_jsx(Text, { children: " " }, i))) }));
+// States whose color is semantic (meaning-bearing) — these stay their
+// theme colors. Everything else drifts through the pastel palette.
+function isSemantic(state) {
+    return (state === 'error' || state === 'denied' ||
+        state === 'success' || state === 'granted' ||
+        state === 'permission' || state === 'impatient');
+}
+function semanticColor(state) {
+    if (state === 'error' || state === 'denied')
+        return theme.error;
+    if (state === 'success' || state === 'granted')
+        return theme.success;
+    return theme.warning; // permission / impatient
+}
 export const MascotPrompt = ({ state, keepAwake = false, }) => {
     const frames = FACES[state];
     const [i, setI] = useState(0);
@@ -57,6 +70,7 @@ export const MascotPrompt = ({ state, keepAwake = false, }) => {
         ...thresholds,
         disabled: keepAwake || idleDisabled(),
     });
+    const slowColor = useSlowColor();
     useEffect(() => {
         setI(0);
         if (frames.length <= 1)
@@ -70,12 +84,6 @@ export const MascotPrompt = ({ state, keepAwake = false, }) => {
     if (idle === 'drowsy') {
         return (_jsxs(Box, { flexDirection: "column", height: TOP_ROWS + 1, children: [_jsx(BlankRows, {}), _jsx(Text, { color: theme.muted, bold: true, children: ' ' + DROWSY_FACE })] }));
     }
-    const color = state === 'error' || state === 'denied'
-        ? theme.error
-        : state === 'success' || state === 'granted'
-            ? theme.success
-            : state === 'permission' || state === 'impatient'
-                ? theme.warning
-                : theme.accent;
+    const color = isSemantic(state) ? semanticColor(state) : slowColor;
     return (_jsxs(Box, { flexDirection: "column", height: TOP_ROWS + 1, children: [_jsx(BlankRows, {}), _jsx(Text, { color: color, bold: true, children: ' ' + frames[i] })] }));
 };

package/dist/ui/RocketBar.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { Text } from 'ink';
 import os from 'os';
 import { theme } from './theme.js';
-import { hueAt } from './animColor.js';
+import { useSlowColor } from './useSlowColor.js';
 function shouldAnimate() {
     if (process.env.BLYUE_ANIMATE === '1')
         return true;
@@ -25,20 +25,13 @@ function shouldAnimate() {
 }
 export const RocketBar = ({ label, loading, width }) => {
     const [animate] = useState(() => shouldAnimate());
-    const [t, setT] = useState(0);
     const [pos, setPos] = useState(0);
-    useEffect(() => {
-        if (!animate)
-            return;
-        const int = setInterval(() => setT((v) => (v + 0.00625) % 1), 120);
-        return () => clearInterval(int);
-    }, [animate]);
+    const hue = useSlowColor(); // shared pastel clock — matches banner + face
     const fixed = 5 + label.length;
     const midLen = Math.max(0, width - fixed);
     useEffect(() => {
         if (!loading || midLen < 6)
             return;
-        // Static mode: no rocket motion, just fixed at 1/3 position
         if (!animate) {
             setPos(Math.floor(midLen / 3));
             return;
@@ -47,9 +40,8 @@ export const RocketBar = ({ label, loading, width }) => {
         const int = setInterval(() => setPos((p) => (p + 1) % track), 90);
         return () => clearInterval(int);
     }, [loading, midLen, animate]);
-    const hue = animate ? hueAt(t) : hueAt(0.1);
     if (!loading || midLen < 6) {
-        return (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: loading ? hue : theme.accent, bold: true, children: label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(midLen) + '╮' })] }));
+        return (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: hue, bold: true, children: label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(midLen) + '╮' })] }));
     }
     const p = Math.min(pos, Math.max(0, midLen - 3));
     const before = '─'.repeat(p);

package/dist/ui/Settings.js

@@ -92,7 +92,9 @@ export const Settings = ({ onClose, onModelChange }) => {
     const inner = width - 4;
     const top = (label) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '╭─ ' }), _jsx(Text, { color: theme.accent, bold: true, children: label }), _jsx(Text, { color: theme.muted, children: ' ' + '─'.repeat(Math.max(1, inner - label.length - 3)) + '╮' })] }));
     const bot = (_jsx(Text, { color: theme.muted, children: '╰' + '─'.repeat(inner) + '╯' }));
-    const row = (content) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.muted, children: '│ ' }), content] }));
+    // ⚠️  Changed from <Text> to <Box flexDirection="row"> — callers pass a
+    // <Box> containing a prompt + <KeyInput>, and Ink forbids Box-in-Text.
+    const row = (content) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.muted, children: '│ ' }), content] }));
     // ---- Main screen ----
     if (screen === 'main') {
         const baseUrlIsLocal = (cfg.baseUrl || '').includes('localhost') ||

package/dist/ui/pastel.js

@@ -0,0 +1,30 @@
+// Pastel/faded palette — Claude-Code-inspired soft muting.
+// All colors sit at ~76% lightness / ~48% saturation, so they read as
+// "faded" on both dark and light terminals.
+function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+        const c = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        return Math.round(255 * c);
+    };
+    const toHex = (x) => x.toString(16).padStart(2, '0');
+    return '#' + toHex(f(0)) + toHex(f(8)) + toHex(f(4));
+}
+/** Full-hue pastel cycle. t in [0, 1). */
+export function pastelAt(t) {
+    const h = (((t % 1) + 1) % 1) * 360;
+    return hslToHex(h, 48, 76);
+}
+/**
+ * Warm-only variant — rose → peach → gold → sage → back. If the full
+ * wheel feels too rainbow-y for your taste, swap pastelAt -> pastelWarmAt
+ * in the four call sites below.
+ */
+export function pastelWarmAt(t) {
+    const t2 = ((t % 1) + 1) % 1;
+    const h = (320 + t2 * 110) % 360; // 320° → 70°, wraps through warm
+    return hslToHex(h, 52, 76);
+}

package/dist/ui/slowTick.js

@@ -0,0 +1,38 @@
+// A single module-level tick shared by every component that wants to
+// fade in sync. One interval, N subscribers, no per-component drift.
+const PERIOD_MS = 24_000; // full pastel cycle
+const TICK_MS = 120;
+let t = 0;
+const listeners = new Set();
+let interval = null;
+function start() {
+    if (interval)
+        return;
+    interval = setInterval(() => {
+        t = (t + TICK_MS / PERIOD_MS) % 1;
+        for (const l of listeners)
+            l();
+    }, TICK_MS);
+    // Don't keep the Node process alive just to animate colors.
+    const anyInt = interval;
+    anyInt.unref?.();
+}
+function stop() {
+    if (interval) {
+        clearInterval(interval);
+        interval = null;
+    }
+}
+export function subscribeSlowTick(fn) {
+    listeners.add(fn);
+    if (listeners.size === 1)
+        start();
+    return () => {
+        listeners.delete(fn);
+        if (listeners.size === 0)
+            stop();
+    };
+}
+export function getSlowTick() {
+    return t;
+}

package/dist/ui/useSlowColor.js

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react';
+import { subscribeSlowTick, getSlowTick } from './slowTick.js';
+import { pastelAt, pastelWarmAt } from './pastel.js';
+/**
+ * Returns a pastel hex color that drifts slowly and stays in sync with
+ * every other component that uses this hook.
+ */
+export function useSlowColor(warm = false) {
+    const t = useSyncExternalStore(subscribeSlowTick, getSlowTick, getSlowTick);
+    return warm ? pastelWarmAt(t) : pastelAt(t);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blyuecode",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "BLYUE Code — a coding agent by Lumen",
   "type": "module",
   "license": "MIT",