sanook-cli 0.5.2 → 0.5.7

package/dist/ui/banner.js

@@ -1,15 +1,89 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { Box, Text, useStdout } from 'ink';
+import BigText from 'ink-big-text';
 import Gradient from 'ink-gradient';
 import { homedir } from 'node:os';
 import { readFileSync } from 'node:fs';
 import { BRAND } from '../brand.js';
 // gradient ของ Sanook: เขียว → ส้ม → ฟ้า (สนุก = สดใส)
 const SANOOK_GRADIENT = ['#22C55E', '#F97316', '#38BDF8'];
+const BANNER_TITLE = BRAND.bannerWide.toUpperCase();
+const COMMAND_HINTS = ['/help', '/tools', '/mcp', '/status'];
+const BRAND_LINE = 'งานหนักให้เบาลง · ไม่เบาความรับผิดชอบ · local-first memory';
+const WORKFLOW = ['plan', 'patch', 'prove', 'remember'];
+const PROMISE = ['readable', 'recoverable', 'remembered'];
+const SERVICE_ROUTES = [
+    ['1', 'Code', '@file · /tools · /diff'],
+    ['2', 'Brain', 'brain context · /skills · /compress'],
+    ['3', 'Connect', '/mcp · serve · webhooks'],
+    ['4', 'Ship', '/cost · /copy · /undo'],
+];
+const WIDE_WORDMARK_MIN_COLUMNS = 96;
+const COMPACT_PANEL_COLUMNS = 76;
+const TINY_PANEL_COLUMNS = 44;
+const MAX_PANEL_COLUMNS = 100;
 // version จาก package.json (single source of truth) — กัน default drift เหมือน bin.ts
 const VERSION = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')).version;
-/** welcome banner — minimal: gradient wordmark + meta บรรทัดเดียว (terminal-first, ไม่รก) */
-export function Banner({ model, version = VERSION, account = 'BYOK', cwd }) {
+const clip = (text, width) => {
+    if (width <= 0)
+        return '';
+    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
+};
+function signalText(signals) {
+    return signals
+        .filter((signal) => signal.label.trim() && signal.value.trim())
+        .map((signal) => {
+        const prefix = signal.tone === 'warn' ? '!' : signal.tone === 'muted' ? '-' : '+';
+        return `${prefix} ${signal.label} ${signal.value}`;
+    })
+        .join(' · ');
+}
+function bannerLines({ account, dir, model, mode, signals, version, }, columns) {
+    const title = `${BANNER_TITLE} v${version} · terminal AI agent · ${account}`;
+    const status = `● model ${model} · mode ${mode} · cwd ${dir}`;
+    const signalLine = signalText(signals);
+    const flow = `Flow ${WORKFLOW.join(' -> ')} · Promise ${PROMISE.join(' · ')}`;
+    const routeLine = `Routes ${SERVICE_ROUTES.map(([num, label]) => `${num} ${label}`).join(' | ')} · ${COMMAND_HINTS.join(' · ')}`;
+    if (columns < TINY_PANEL_COLUMNS) {
+        return [
+            title,
+            `● ${model} · ${mode}`,
+            ...(signalLine ? [`Signals ${signalLine}`] : []),
+            '› /help · /tools · /mcp',
+        ];
+    }
+    if (columns < COMPACT_PANEL_COLUMNS) {
+        return [
+            title,
+            status,
+            ...(signalLine ? [`Signals ${signalLine}`] : []),
+            `◆ ${BRAND_LINE}`,
+            `Flow ${WORKFLOW.join(' -> ')}`,
+            '› routes: Code · Brain · Connect · Ship',
+            '› code: @file · /tools · /diff',
+            '› brain: context · skills · compress',
+            '› connect: /mcp · serve',
+            '› ship: /copy · /cost · /undo',
+        ];
+    }
+    return [
+        title,
+        status,
+        ...(signalLine ? [`Signals ${signalLine}`] : []),
+        `◆ ${BRAND_LINE}`,
+        flow,
+        routeLine,
+        ...SERVICE_ROUTES.map(([num, label, hint]) => `› ${num} ${label.padEnd(7)} ${hint}`),
+    ];
+}
+/** welcome banner — Hermes-style responsive wordmark + compact Sanook launchpad. */
+export function Banner({ model, version = VERSION, account = 'BYOK', cwd, mode = 'auto', columns, signals = [] }) {
+    const { stdout } = useStdout();
     const dir = (cwd ?? process.cwd()).replace(homedir(), '~');
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Gradient, { colors: SANOOK_GRADIENT, children: _jsx(Text, { bold: true, children: BRAND.cliName }) }), _jsxs(Text, { dimColor: true, children: [" v", version, " \u00B7 terminal coding agent \u00B7 ", account] })] }), _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "green", children: "\u25CF" }), " ", model, " \u00B7 ", dir] })] }));
+    const terminalColumns = Math.max(1, Math.floor(columns ?? stdout?.columns ?? MAX_PANEL_COLUMNS));
+    const showWordmark = terminalColumns >= WIDE_WORDMARK_MIN_COLUMNS;
+    const panelWidth = Math.max(28, Math.min(terminalColumns, MAX_PANEL_COLUMNS));
+    const innerWidth = Math.max(1, panelWidth - 4);
+    const lines = bannerLines({ account, dir, model, mode, signals, version }, terminalColumns);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [showWordmark ? (_jsx(Gradient, { colors: SANOOK_GRADIENT, children: _jsx(BigText, { text: BANNER_TITLE, font: "block", align: "left" }) })) : null, _jsx(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, width: panelWidth, children: lines.map((line, index) => (_jsx(Text, { color: index === 0 ? 'cyan' : undefined, dimColor: index > 0, wrap: "truncate-end", children: clip(line, innerWidth) }, `${index}-${line}`))) })] }));
 }

package/dist/ui/markdown.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { memo, useRef } from 'react';
+const FENCE_RE = /^\s*(`{3,}|~{3,})(.*)$/;
+function clip(text, width) {
+    if (width <= 0)
+        return '';
+    return text.length > width ? `${text.slice(0, Math.max(0, width - 3))}...` : text;
+}
+function bodyWidth(columns) {
+    return Math.max(24, Math.min(Math.max(30, columns - 4), 100));
+}
+function lineStartsFence(line) {
+    return FENCE_RE.test(line);
+}
+export function findStableMarkdownBoundary(text) {
+    let inFence = false;
+    let last = -1;
+    for (let i = 0; i < text.length;) {
+        const nl = text.indexOf('\n', i);
+        const end = nl === -1 ? text.length : nl;
+        const line = text.slice(i, end);
+        if (lineStartsFence(line))
+            inFence = !inFence;
+        if (!inFence && text.slice(end, end + 2) === '\n\n')
+            last = end + 2;
+        if (nl === -1)
+            break;
+        i = nl + 1;
+    }
+    return last;
+}
+function inlineSegments(text) {
+    const out = [];
+    const re = /(`[^`\n]+`|\*\*[^*\n]+\*\*)/g;
+    let last = 0;
+    for (const match of text.matchAll(re)) {
+        const index = match.index ?? 0;
+        if (index > last)
+            out.push({ kind: 'text', text: text.slice(last, index) });
+        const token = match[0];
+        out.push(token.startsWith('`')
+            ? { kind: 'code', text: token.slice(1, -1) }
+            : { kind: 'bold', text: token.slice(2, -2) });
+        last = index + token.length;
+    }
+    if (last < text.length)
+        out.push({ kind: 'text', text: text.slice(last) });
+    return out;
+}
+function InlineMarkdown({ text }) {
+    return (_jsx(Text, { children: inlineSegments(text).map((segment, index) => {
+            if (segment.kind === 'code') {
+                return (_jsx(Text, { color: "yellow", children: segment.text }, index));
+            }
+            if (segment.kind === 'bold') {
+                return (_jsx(Text, { bold: true, children: segment.text }, index));
+            }
+            return _jsx(Text, { children: segment.text }, index);
+        }) }));
+}
+export function MarkdownText({ columns, text }) {
+    const width = bodyWidth(columns);
+    const lines = text.replace(/\r\n/g, '\n').split('\n');
+    const nodes = [];
+    let inFence = false;
+    let fenceLang = '';
+    for (let index = 0; index < lines.length; index += 1) {
+        const raw = lines[index] ?? '';
+        const fence = FENCE_RE.exec(raw);
+        if (fence) {
+            inFence = !inFence;
+            fenceLang = inFence ? fence[2]?.trim() ?? '' : '';
+            nodes.push(_jsx(Text, { color: "cyan", dimColor: true, children: inFence ? `code${fenceLang ? ` ${clip(fenceLang, 24)}` : ''}` : 'end code' }, `f-${index}`));
+            continue;
+        }
+        if (inFence) {
+            nodes.push(_jsxs(Text, { color: "gray", wrap: "truncate-end", children: ['  ', clip(raw || ' ', width - 2)] }, `c-${index}`));
+            continue;
+        }
+        const trimmed = raw.trim();
+        if (!trimmed) {
+            nodes.push(_jsx(Text, { children: " " }, `b-${index}`));
+            continue;
+        }
+        const heading = /^(#{1,6})\s+(.+)$/.exec(trimmed);
+        if (heading) {
+            nodes.push(_jsx(Text, { color: "cyan", bold: true, wrap: "truncate-end", children: clip(heading[2] ?? '', width) }, `h-${index}`));
+            continue;
+        }
+        const quote = /^>\s?(.*)$/.exec(trimmed);
+        if (quote) {
+            nodes.push(_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['> ', clip(quote[1] ?? '', width - 2)] }, `q-${index}`));
+            continue;
+        }
+        const bullet = /^([-*])\s+(.+)$/.exec(trimmed);
+        if (bullet) {
+            nodes.push(_jsxs(Text, { wrap: "truncate-end", children: ['- ', _jsx(InlineMarkdown, { text: clip(bullet[2] ?? '', width - 2) })] }, `li-${index}`));
+            continue;
+        }
+        const ordered = /^(\d+[.)])\s+(.+)$/.exec(trimmed);
+        if (ordered) {
+            const marker = `${ordered[1]} `;
+            nodes.push(_jsxs(Text, { wrap: "truncate-end", children: [marker, _jsx(InlineMarkdown, { text: clip(ordered[2] ?? '', width - marker.length) })] }, `ol-${index}`));
+            continue;
+        }
+        nodes.push(_jsx(Text, { wrap: "truncate-end", children: _jsx(InlineMarkdown, { text: clip(trimmed, width) }) }, `p-${index}`));
+    }
+    return _jsx(Box, { flexDirection: "column", children: nodes });
+}
+const MemoMarkdownText = memo(MarkdownText);
+export const StreamingMarkdownText = memo(function StreamingMarkdownText({ columns, text }) {
+    const stableRef = useRef('');
+    if (!text.startsWith(stableRef.current))
+        stableRef.current = '';
+    const boundary = findStableMarkdownBoundary(text);
+    if (boundary > stableRef.current.length)
+        stableRef.current = text.slice(0, boundary);
+    const stable = stableRef.current;
+    const tail = text.slice(stable.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [stable ? _jsx(MemoMarkdownText, { columns: columns, text: stable }) : null, tail ? _jsx(MarkdownText, { columns: columns, text: tail }) : null] }));
+});