@wangzhizhi/remi 0.0.1-alpha

package/dist/tui/renderers/PromptBox.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { displayWidth } from '@remi/terminal-markdown';
+import { remiDarkTheme } from '../theme.js';
+import { executableSlashCommandPrefix } from '../slashCommandHighlight.js';
+const maxVisibleCommandHints = 8;
+function rule(width) {
+    return '─'.repeat(Math.max(24, width - 2));
+}
+function promptLabel(mode) {
+    return mode === 'prompt' ? '>' : `${mode}>`;
+}
+function commandMatches(input, command) {
+    if (/\s/.test(input.value)) {
+        return false;
+    }
+    const query = input.value.trim();
+    return query === '/' || command.name.startsWith(query);
+}
+function visibleCommandHints(input) {
+    if (!input.value.startsWith('/')) {
+        return [];
+    }
+    return (input.commandHints ?? []).filter(command => commandMatches(input, command));
+}
+export function PromptBox({ input, width = 100 }) {
+    const commandHints = visibleCommandHints(input);
+    const label = promptLabel(input.mode);
+    const inputLines = wrapComposerInput(input, width, label);
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { color: remiDarkTheme.border, children: rule(width) }), _jsx(Box, { minHeight: 3, paddingX: 1, paddingY: 1, backgroundColor: remiDarkTheme.composerBackground, flexDirection: "column", children: inputLines.map((line, index) => (_jsx(ComposerLineView, { line: line, label: index === 0 ? label : ' '.repeat(displayWidth(label)), showPrompt: index === 0 }, `${index}-${line.segments.map(segment => `${segment.kind}:${segment.text}`).join('|')}`))) }), input.queuedCommands.length > 0 ? (_jsxs(Text, { color: remiDarkTheme.muted, children: ["queued ", input.queuedCommands.length] })) : null, commandHints.length > 0 ? (_jsx(CommandHints, { commands: commandHints, selectedIndex: input.selectedCommandIndex ?? 0 })) : null, _jsx(Text, { color: remiDarkTheme.border, children: rule(width) })] }));
+}
+function clampCursorPosition(position, length) {
+    return Math.max(0, Math.min(length, position));
+}
+function wrapComposerInput(input, width, label) {
+    const labelWidth = displayWidth(label);
+    const contentWidth = Math.max(8, width - 2 - labelWidth - 1);
+    const segments = input.value.length > 0 ? inputValueSegments(input) : placeholderSegments(input.placeholder);
+    return wrapSegments(segments, contentWidth);
+}
+function inputValueSegments(input) {
+    const chars = Array.from(input.value);
+    const cursorPosition = clampCursorPosition(input.cursorPosition ?? chars.length, chars.length);
+    const slashCommand = executableSlashCommandPrefix(input.value, input.commandHints ?? []);
+    const segments = [];
+    for (let index = 0; index < chars.length; index += 1) {
+        const char = chars[index] ?? '';
+        const kind = slashCommand && index < Array.from(slashCommand.command).length ? 'slash-command' : 'text';
+        segments.push({ kind: index === cursorPosition ? 'cursor' : kind, text: char });
+    }
+    if (cursorPosition === chars.length) {
+        segments.push({ kind: 'cursor', text: ' ' });
+    }
+    return segments;
+}
+function placeholderSegments(placeholder) {
+    return [{ kind: 'cursor', text: ' ' }, ...Array.from(placeholder).map(char => ({ kind: 'placeholder', text: char }))];
+}
+function wrapSegments(segments, width) {
+    const lines = [];
+    let current = [];
+    let currentWidth = 0;
+    for (const segment of segments) {
+        const segmentWidth = Math.max(1, displayWidth(segment.text));
+        if (current.length > 0 && currentWidth + segmentWidth > width) {
+            lines.push({ segments: current });
+            current = [];
+            currentWidth = 0;
+        }
+        current.push(segment);
+        currentWidth += segmentWidth;
+    }
+    lines.push({ segments: current });
+    return lines;
+}
+function ComposerLineView({ line, label, showPrompt }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { color: showPrompt ? remiDarkTheme.accent : remiDarkTheme.muted, backgroundColor: remiDarkTheme.composerBackground, bold: showPrompt, children: label }), _jsx(Text, { color: remiDarkTheme.muted, backgroundColor: remiDarkTheme.composerBackground, children: " " }), line.segments.map((segment, index) => (_jsx(ComposerSegmentView, { segment: segment }, `${index}-${segment.kind}-${segment.text}`)))] }));
+}
+function ComposerSegmentView({ segment }) {
+    if (segment.kind === 'cursor') {
+        return _jsx(Cursor, { char: segment.text });
+    }
+    if (segment.kind === 'placeholder') {
+        return _jsx(Text, { color: remiDarkTheme.muted, backgroundColor: remiDarkTheme.composerBackground, children: segment.text });
+    }
+    if (segment.kind === 'slash-command') {
+        return _jsx(Text, { color: remiDarkTheme.accent, backgroundColor: remiDarkTheme.composerBackground, children: segment.text });
+    }
+    return _jsx(Text, { color: remiDarkTheme.text, backgroundColor: remiDarkTheme.composerBackground, children: segment.text });
+}
+function Cursor({ char }) {
+    return (_jsx(Text, { color: remiDarkTheme.text, backgroundColor: remiDarkTheme.composerBackground, children: cursorGlyph(char) }));
+}
+function cursorGlyph(char) {
+    return '█'.repeat(Math.max(1, displayWidth(char ?? ' ')));
+}
+function CommandHints({ commands, selectedIndex }) {
+    const normalizedSelectedIndex = normalizeHintIndex(selectedIndex, commands.length);
+    const windowStart = commandHintWindowStart(normalizedSelectedIndex, commands.length);
+    const visibleCommands = commands.slice(windowStart, windowStart + maxVisibleCommandHints);
+    return (_jsx(Box, { flexDirection: "column", marginLeft: 3, children: visibleCommands.map((command, index) => {
+            const commandIndex = windowStart + index;
+            const isSelected = commandIndex === normalizedSelectedIndex;
+            return (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { color: isSelected ? remiDarkTheme.accent : remiDarkTheme.muted, children: command.name }) }), _jsx(Text, { color: isSelected ? remiDarkTheme.accent : remiDarkTheme.muted, wrap: "truncate-end", children: command.description })] }, command.name));
+        }) }));
+}
+function commandHintWindowStart(selectedIndex, total) {
+    if (total <= maxVisibleCommandHints) {
+        return 0;
+    }
+    return Math.min(Math.max(0, selectedIndex - maxVisibleCommandHints + 1), total - maxVisibleCommandHints);
+}
+function normalizeHintIndex(index, length) {
+    if (length <= 0) {
+        return 0;
+    }
+    return ((index % length) + length) % length;
+}

package/dist/tui/renderers/StatusLine.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { homedir } from 'node:os';
+import { Box, Text } from 'ink';
+import { t } from '../../i18n.js';
+import { defaultStatusLineItems } from '../../statusline.js';
+import { formatCompactTokenCount, normalizedTokenUsageTotal, totalInputTokens } from '../../usage.js';
+import { remiDarkTheme } from '../theme.js';
+export function compactPath(path, maxLength) {
+    const displayPath = path.replace(homedir(), '~');
+    if (displayPath.length <= maxLength) {
+        return displayPath;
+    }
+    const parts = displayPath.split('/').filter(Boolean);
+    const tail = parts.slice(-2).join('/');
+    const compacted = displayPath.startsWith('~/') ? `~/${tail}` : `.../${tail}`;
+    if (compacted.length <= maxLength) {
+        return compacted;
+    }
+    return compacted.slice(0, maxLength);
+}
+export function permissionColor(mode) {
+    if (mode === 'bypass') {
+        return remiDarkTheme.danger;
+    }
+    if (mode === 'auto') {
+        return remiDarkTheme.warning;
+    }
+    return remiDarkTheme.success;
+}
+export function formatStatusLine(status, width = 100) {
+    return statusLineFields(status, width)
+        .map(field => field.text)
+        .join(' · ');
+}
+function statusLineFields(status, width = 100) {
+    const contentWidth = Math.max(40, width - 2);
+    const items = status.statusLineItems ?? defaultStatusLineItems;
+    const fields = items.flatMap(item => createStatusLineField(item, status, contentWidth));
+    const accepted = [];
+    let length = 0;
+    for (const field of fields) {
+        const nextLength = length + field.text.length + (accepted.length > 0 ? 3 : 0);
+        if (nextLength <= contentWidth) {
+            accepted.push(field);
+            length = nextLength;
+            continue;
+        }
+        if (accepted.length === 0) {
+            accepted.push({ ...field, text: field.text.slice(0, contentWidth) });
+        }
+        break;
+    }
+    return accepted;
+}
+function createStatusLineField(item, status, width) {
+    if (item === 'model') {
+        return [mutedField(status.model)];
+    }
+    if (item === 'cwd') {
+        return [mutedField(compactPath(status.cwd, Math.max(12, Math.floor(width / 2))))];
+    }
+    if (item === 'git-branch') {
+        return status.git?.branch ? [mutedField(status.git.branch)] : [];
+    }
+    if (item === 'branch-changes') {
+        if (!status.git) {
+            return [];
+        }
+        const added = status.git?.added ?? 0;
+        const deleted = status.git?.deleted ?? 0;
+        return [mutedField(`+${added} -${deleted}`)];
+    }
+    if (item === 'context-remaining') {
+        const remaining = resolveContextRemainingPercent(status);
+        return remaining === undefined ? [] : [mutedField(`${t(status.language, 'statusline.context')} ${contextRemainingBar(remaining)} ${remaining}%`)];
+    }
+    if (item === 'used-tokens') {
+        const totalTokens = status.usage ? normalizedTokenUsageTotal(status.usage) : 0;
+        return [mutedField(`${formatCompactTokenCount(totalTokens)} ${t(status.language, 'statusline.used')}`)];
+    }
+    if (item === 'total-input-tokens') {
+        const inputTokens = status.usage ? totalInputTokens(status.usage) : 0;
+        return [mutedField(`${formatCompactTokenCount(inputTokens)} ${t(status.language, 'statusline.input')}`)];
+    }
+    if (item === 'total-output-tokens') {
+        const outputTokens = status.usage?.outputTokens ?? 0;
+        return [mutedField(`${formatCompactTokenCount(outputTokens)} ${t(status.language, 'statusline.output')}`)];
+    }
+    if (item === 'run-state') {
+        if (!status.runState) {
+            return [];
+        }
+        const key = status.runState === 'Working' ? 'run.working' : status.runState === 'Thinking' ? 'run.thinking' : 'run.ready';
+        return [mutedField(t(status.language, key))];
+    }
+    if (item === 'permissions') {
+        return status.permissionProfile ? [mutedField(status.permissionProfile)] : [];
+    }
+    return [];
+}
+function resolveContextRemainingPercent(status) {
+    if (status.contextRemainingPercent !== undefined) {
+        return clampPercent(status.contextRemainingPercent);
+    }
+    return undefined;
+}
+function contextRemainingBar(remainingPercent) {
+    const segments = 5;
+    const filled = Math.max(0, Math.min(segments, Math.round((remainingPercent / 100) * segments)));
+    return `${'█'.repeat(filled)}${'░'.repeat(segments - filled)}`;
+}
+function clampPercent(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(100, Math.round(value)));
+}
+function mutedField(text) {
+    return { text, color: remiDarkTheme.muted };
+}
+export function StatusLine({ status, width = 100 }) {
+    const fields = statusLineFields(status, width);
+    return (_jsx(Box, { flexShrink: 0, children: fields.map((field, index) => (_jsxs(Text, { children: [index > 0 ? _jsx(Text, { color: remiDarkTheme.muted, children: " \u00B7 " }) : null, _jsx(Text, { color: field.color, wrap: "truncate-end", children: field.text })] }, `${field.text}-${index}`))) }));
+}

package/dist/tui/renderers/WorkingIndicator.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, Text } from 'ink';
+import { t } from '../../i18n.js';
+import { remiDarkTheme } from '../theme.js';
+export const activityIntervalMs = 80;
+export const activityDotsTickDivisor = 3;
+const flowingHighlightWidth = 4;
+const flowingPauseWidth = 3;
+export const activityBaseColor = '#7dd3fc';
+export const activityHighlightColor = 'white';
+export const activityGlyphs = ['◜', '◠', '◝', '◞', '◡', '◟'];
+const activityTrailColor = '#bae6fd';
+const flowingTrailColors = [activityHighlightColor, activityTrailColor, activityBaseColor, activityBaseColor];
+export function WorkingIndicator({ startedAt, visible, language, label, interruptText, marginTop = 1 }) {
+    const tick = useActivityTick(visible, startedAt);
+    if (!visible || startedAt === undefined) {
+        return null;
+    }
+    const elapsedSeconds = Math.max(1, Math.ceil((Date.now() - startedAt) / 1000));
+    const displayLabel = label ?? t(language, 'working.label');
+    const displayInterrupt = interruptText ?? t(language, 'working.interrupt');
+    return (_jsxs(Box, { flexShrink: 0, marginTop: marginTop, children: [_jsx(ActivityText, { label: displayLabel, tick: tick }), _jsx(Text, { color: remiDarkTheme.muted, children: ` (${elapsedSeconds}s · ${displayInterrupt})` })] }));
+}
+export function ActivityText({ label, tick }) {
+    const baseLabel = stripTrailingDots(label);
+    return (_jsxs(Text, { children: [_jsx(ActivityGlyph, { tick: tick }), _jsx(Text, { color: activityBaseColor, children: " " }), _jsx(FlowingText, { text: baseLabel, tick: tick }), _jsx(AnimatedDots, { tick: tick })] }));
+}
+export function ActivityGlyph({ tick }) {
+    const color = flowingTextColor(0, tick % Math.max(1, flowingHighlightWidth), flowingHighlightWidth);
+    return _jsx(Text, { color: color, children: activityGlyphForTick(tick) });
+}
+export function AnimatedDots({ tick }) {
+    return _jsx(Text, { color: activityBaseColor, children: activityDotsForTick(tick) });
+}
+export function FlowingText({ text, tick }) {
+    const chars = useMemo(() => Array.from(text), [text]);
+    const cycle = Math.max(1, chars.length + flowingPauseWidth);
+    const head = tick % cycle;
+    return (_jsx(_Fragment, { children: chars.map((char, index) => (_jsx(Text, { color: flowingTextColor(index, head, cycle), children: char }, `${index}-${char}`))) }));
+}
+export function useActivityTick(active = true, resetKey) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (!active) {
+            return undefined;
+        }
+        setTick(0);
+        const timer = setInterval(() => setTick(current => current + 1), activityIntervalMs);
+        return () => clearInterval(timer);
+    }, [active, resetKey]);
+    return tick;
+}
+export function activityDotsForTick(tick) {
+    const dotTick = Math.floor(Math.abs(tick) / activityDotsTickDivisor);
+    return '.'.repeat((dotTick % 3) + 1).padEnd(3, ' ');
+}
+export function activityGlyphForTick(tick) {
+    return activityGlyphs[Math.abs(tick) % activityGlyphs.length] ?? activityGlyphs[0];
+}
+function stripTrailingDots(label) {
+    return label.replace(/\.+$/, '');
+}
+function flowingTextColor(index, head, cycle) {
+    const distance = (head - index + cycle) % cycle;
+    if (distance >= 0 && distance < flowingHighlightWidth) {
+        return flowingTrailColors[distance] ?? remiDarkTheme.text;
+    }
+    return activityBaseColor;
+}

package/dist/tui/slashCommandHighlight.js

@@ -0,0 +1,8 @@
+export function executableSlashCommandPrefix(text, slashCommandHints) {
+    const match = /^(\S+)([\s\S]*)$/.exec(text);
+    const command = match?.[1];
+    if (!command || !command.startsWith('/')) {
+        return undefined;
+    }
+    return slashCommandHints.some(hint => hint.name === command) ? { command, rest: match?.[2] ?? '' } : undefined;
+}

package/dist/tui/theme.js

@@ -0,0 +1,13 @@
+export const remiDarkTheme = {
+    text: 'white',
+    muted: 'gray',
+    accent: 'cyan',
+    success: 'green',
+    warning: 'yellow',
+    danger: 'red',
+    border: 'gray',
+    composerBackground: '#2b3036',
+    selection: 'blue',
+    tool: 'magenta',
+    model: 'cyan',
+};

package/dist/tui/types.js

@@ -0,0 +1 @@
+export {};

package/dist/usage.js

@@ -0,0 +1,66 @@
+import { t } from './i18n.js';
+export function createEmptyTokenUsage() {
+    return {
+        inputTokens: 0,
+        outputTokens: 0,
+        totalTokens: 0,
+        cachedInputTokens: 0,
+        reasoningOutputTokens: 0,
+    };
+}
+export function addTokenUsage(current, usage) {
+    return {
+        inputTokens: current.inputTokens + usage.inputTokens,
+        outputTokens: current.outputTokens + usage.outputTokens,
+        totalTokens: normalizedTokenUsageTotal(current) + normalizedTokenUsageTotal(usage),
+        cachedInputTokens: (current.cachedInputTokens ?? 0) + (usage.cachedInputTokens ?? 0),
+        reasoningOutputTokens: (current.reasoningOutputTokens ?? 0) + (usage.reasoningOutputTokens ?? 0),
+    };
+}
+export function sumSessionTokenUsage(events) {
+    return events.reduce((total, event) => {
+        if (event.type !== 'assistant' || !event.usage) {
+            return total;
+        }
+        return addTokenUsage(total, event.usage);
+    }, createEmptyTokenUsage());
+}
+export function formatTokenUsage(usage, language) {
+    const cached = usage.cachedInputTokens && usage.cachedInputTokens > 0 ? ` (+ ${formatNumber(usage.cachedInputTokens)} ${t(language, 'usage.cached')})` : '';
+    const reasoning = usage.reasoningOutputTokens && usage.reasoningOutputTokens > 0 ? ` (${t(language, 'usage.reasoning')} ${formatNumber(usage.reasoningOutputTokens)})` : '';
+    return [
+        t(language, 'usage.prefix'),
+        `total=${formatNumber(normalizedTokenUsageTotal(usage))}`,
+        `input=${formatNumber(usage.inputTokens)}${cached}`,
+        `output=${formatNumber(usage.outputTokens)}${reasoning}`,
+    ].join(' ');
+}
+export function totalInputTokens(usage) {
+    return usage.inputTokens + (usage.cachedInputTokens ?? 0);
+}
+export function contextRemainingPercentFromUsage(usage, contextWindowTokens) {
+    if (!contextWindowTokens || contextWindowTokens <= 0) {
+        return undefined;
+    }
+    const usedPercent = Math.max(0, Math.min(100, Math.round((totalInputTokens(usage) / contextWindowTokens) * 100)));
+    return 100 - usedPercent;
+}
+export function normalizedTokenUsageTotal(usage) {
+    return Math.max(usage.totalTokens, totalInputTokens(usage) + usage.outputTokens);
+}
+export function formatCompactTokenCount(value) {
+    if (value >= 1_000_000) {
+        return `${formatCompactDecimal(value / 1_000_000)}M`;
+    }
+    if (value >= 1_000) {
+        return `${formatCompactDecimal(value / 1_000)}K`;
+    }
+    return String(value);
+}
+function formatNumber(value) {
+    return new Intl.NumberFormat('en-US').format(value);
+}
+function formatCompactDecimal(value) {
+    const rounded = value >= 10 ? Math.round(value) : Math.round(value * 10) / 10;
+    return Number.isInteger(rounded) ? String(rounded) : String(rounded);
+}

package/dist/version.js

@@ -0,0 +1,5 @@
+import { t } from './i18n.js';
+export const version = '0.0.1-alpha';
+export function formatVersionMessage(language) {
+    return t(language, 'version.message', { version });
+}