kiku-agent 1.3.0 → 1.3.1

package/server/agent/ink/PromptInput.jsx

@@ -0,0 +1,321 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { toolsSchema } from '../tools.js';
+import { INPUT_PLACEHOLDER, previousGraphemeBoundary, nextGraphemeBoundary } from '../ui.js';
+import { COMMAND_DEFINITIONS, SUB_COMMANDS } from '../commandRegistry.js';
+import { getInkPalette } from '../theme.js';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+function getSuggestions(line) {
+  const trimmed = line.trimStart();
+  if (!trimmed.startsWith('/')) return [];
+
+  const parts = trimmed.split(/\s+/);
+  const baseCmd = parts[0].toLowerCase();
+
+  if (baseCmd === '/tool' && (parts.length > 1 || line.includes(' '))) {
+    const q = parts.slice(1).join(' ').toLowerCase();
+    if (!q) {
+      return toolsSchema.slice(0, 8).map(t => ({
+        name: `/tool ${t.function.name}`,
+        desc: t.function.description.slice(0, 50),
+        insert: `/tool ${t.function.name} `,
+      }));
+    }
+    return toolsSchema
+      .filter(t => t.function.name.toLowerCase().includes(q))
+      .slice(0, 8)
+      .map(t => ({
+        name: `/tool ${t.function.name}`,
+        desc: t.function.description.slice(0, 50),
+        insert: `/tool ${t.function.name} `,
+      }));
+  }
+
+  if (parts.length > 1 || (parts.length === 1 && line.includes(' '))) {
+    const subs = SUB_COMMANDS[baseCmd] || [];
+    const query = trimmed.toLowerCase();
+    return subs
+      .filter(s => s.toLowerCase().includes(query) || `${baseCmd} ${s}`.includes(query))
+      .map(s => ({
+        name: `${baseCmd} ${s}`,
+        desc: '',
+        insert: `${baseCmd} ${s} `,
+      }));
+  }
+
+  return COMMAND_DEFINITIONS
+    .map(c => ({
+      ...c,
+      score: c.name === baseCmd ? 200 : c.name.startsWith(baseCmd) ? 100 : c.name.includes(baseCmd) ? 70 : 0,
+    }))
+    .filter(c => c.score > 0)
+    .sort((a, b) => b.score - a.score);
+}
+
+function getGhostText(line, suggestions) {
+  if (!suggestions.length || !line.startsWith('/')) return '';
+  const top = suggestions[0];
+  const target = top.insert || top.name;
+  if (target.toLowerCase().startsWith(line.toLowerCase()) && target.length > line.length) {
+    return target.slice(line.length);
+  }
+  return '';
+}
+
+export function PromptInput({ onSubmit, musicStatus = '', isProcessing = false, agentStateLabel = '' }) {
+  const theme = getInkPalette();
+  const [value, setValue] = useState('');
+  const [cursorPos, setCursorPos] = useState(0);
+  const [suggestions, setSuggestions] = useState([]);
+  const [suggestionIdx, setSuggestionIdx] = useState(0);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [history, setHistory] = useState([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const [spinFrame, setSpinFrame] = useState(0);
+  const { exit } = useApp();
+
+  useEffect(() => {
+    if (!isProcessing) return;
+    const id = setInterval(() => {
+      setSpinFrame(prev => (prev + 1) % SPINNER_FRAMES.length);
+    }, 80);
+    return () => clearInterval(id);
+  }, [isProcessing]);
+
+  useEffect(() => {
+    if (value.startsWith('/')) {
+      const s = getSuggestions(value);
+      setSuggestions(s);
+      setShowSuggestions(s.length > 0);
+      setSuggestionIdx(0);
+    } else {
+      setSuggestions([]);
+      setShowSuggestions(false);
+    }
+  }, [value]);
+
+  const ghostText = getGhostText(value, suggestions);
+  const maxVisibleSuggestions = 6;
+  const visibleSuggestionStart = Math.max(
+    0,
+    Math.min(suggestionIdx - 2, suggestions.length - maxVisibleSuggestions),
+  );
+  const visibleSuggestions = suggestions.slice(
+    visibleSuggestionStart,
+    visibleSuggestionStart + maxVisibleSuggestions,
+  );
+
+  const statusText = isProcessing
+    ? `${SPINNER_FRAMES[spinFrame]} ${agentStateLabel || 'Processing…'}`
+    : musicStatus;
+
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      if (value.length > 0) {
+        setValue('');
+        setCursorPos(0);
+        return;
+      }
+      exit();
+      return;
+    }
+
+    if (key.ctrl && input === 'l') {
+      return;
+    }
+
+    if (key.escape) {
+      if (showSuggestions) {
+        setShowSuggestions(false);
+        return;
+      }
+      return;
+    }
+
+    if (key.tab) {
+      if (showSuggestions && suggestions.length > 0) {
+        const item = suggestions[suggestionIdx] || suggestions[0];
+        const insertVal = item.insert || item.name;
+        setValue(insertVal);
+        setCursorPos(insertVal.length);
+        if (!insertVal.endsWith(' ')) {
+          onSubmit(insertVal);
+          setHistory(prev => [...prev, insertVal]);
+          setValue('');
+          setCursorPos(0);
+        }
+        return;
+      }
+      if (ghostText) {
+        const newVal = value + ghostText;
+        setValue(newVal);
+        setCursorPos(newVal.length);
+        return;
+      }
+      return;
+    }
+
+    if (key.return) {
+      if (showSuggestions && suggestions.length > 0) {
+        const item = suggestions[suggestionIdx] || suggestions[0];
+        const insertVal = item.insert || item.name;
+        if (insertVal.endsWith(' ')) {
+          setValue(insertVal);
+          setCursorPos(insertVal.length);
+          setShowSuggestions(false);
+          return;
+        }
+        onSubmit(insertVal);
+        setHistory(prev => [...prev, insertVal]);
+        setValue('');
+        setCursorPos(0);
+        setShowSuggestions(false);
+        return;
+      }
+      if (value.trim()) {
+        onSubmit(value);
+        setHistory(prev => [...prev, value]);
+      }
+      setValue('');
+      setCursorPos(0);
+      return;
+    }
+
+    if (key.up) {
+      if (showSuggestions && suggestions.length > 0) {
+        setSuggestionIdx(prev => (prev - 1 + suggestions.length) % suggestions.length);
+        return;
+      }
+      if (history.length > 0) {
+        const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+        setHistoryIdx(newIdx);
+        const cmd = history[newIdx] || '';
+        setValue(cmd);
+        setCursorPos(cmd.length);
+      }
+      return;
+    }
+
+    if (key.down) {
+      if (showSuggestions && suggestions.length > 0) {
+        setSuggestionIdx(prev => (prev + 1) % suggestions.length);
+        return;
+      }
+      if (historyIdx !== -1) {
+        const newIdx = historyIdx + 1;
+        if (newIdx >= history.length) {
+          setHistoryIdx(-1);
+          setValue('');
+          setCursorPos(0);
+        } else {
+          setHistoryIdx(newIdx);
+          const cmd = history[newIdx] || '';
+          setValue(cmd);
+          setCursorPos(cmd.length);
+        }
+      }
+      return;
+    }
+
+    if (key.backspace) {
+      if (cursorPos > 0) {
+        const previous = previousGraphemeBoundary(value, cursorPos);
+        setValue(value.slice(0, previous) + value.slice(cursorPos));
+        setCursorPos(previous);
+      }
+      return;
+    }
+
+    if (key.delete) {
+      if (cursorPos < value.length) {
+        const next = nextGraphemeBoundary(value, cursorPos);
+        setValue(value.slice(0, cursorPos) + value.slice(next));
+      }
+      return;
+    }
+
+    if (key.home || (key.ctrl && input === 'a')) {
+      setCursorPos(0);
+      return;
+    }
+
+    if (key.end || (key.ctrl && input === 'e')) {
+      setCursorPos(value.length);
+      return;
+    }
+
+    if (key.left) {
+      setCursorPos(previousGraphemeBoundary(value, cursorPos));
+      return;
+    }
+
+    if (key.right) {
+      setCursorPos(nextGraphemeBoundary(value, cursorPos));
+      return;
+    }
+
+    if (input && !key.ctrl && !key.meta) {
+      if (input.startsWith('\x1b') || /[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/.test(input)) return;
+      const newVal = value.slice(0, cursorPos) + input + value.slice(cursorPos);
+      setValue(newVal);
+      setCursorPos(prev => prev + input.length);
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box
+        backgroundColor={isProcessing ? theme.panelHeader : theme.panel}
+        width="100%"
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        <Text color={isProcessing ? theme.info : theme.muted}>{statusText || ' '}</Text>
+      </Box>
+
+      {showSuggestions && suggestions.length > 0 && (
+        <Box
+          flexDirection="column"
+          width="100%"
+          backgroundColor={theme.panel}
+          paddingLeft={1}
+          paddingRight={1}
+        >
+          {visibleSuggestions.map((item, idx) => {
+            const actualIdx = visibleSuggestionStart + idx;
+            const isSelected = actualIdx === suggestionIdx;
+            return (
+            <Box key={item.name}>
+              <Text backgroundColor={theme.panel} color={isSelected ? theme.highlight : theme.text}>{isSelected ? '❯ ' : '  '}</Text>
+              <Text
+                bold={isSelected}
+                color={isSelected ? theme.text : theme.info}
+                backgroundColor={theme.panel}
+              >
+                {item.name.padEnd(22)}
+              </Text>
+              <Text backgroundColor={theme.panel} color={isSelected ? theme.text : theme.muted} dimColor={!isSelected}>
+                {item.desc}{' '}
+              </Text>
+            </Box>
+            );
+          })}
+        </Box>
+      )}
+
+      <Box backgroundColor={theme.panel} width="100%" paddingY={1}>
+        <Text bold color={theme.primary}>Kiku ❯ </Text>
+        <Text color={theme.text}>{value}</Text>
+        {ghostText && (
+          <Text color={theme.subdued} dimColor>{ghostText}</Text>
+        )}
+        {!value && (
+          <Text color={theme.muted} dimColor>{INPUT_PLACEHOLDER}</Text>
+        )}
+        <Text> </Text>
+      </Box>
+    </Box>
+  );
+}

package/server/agent/ink/TaskPlanPanel.jsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { getInkPalette } from '../theme.js';
+
+const RUNNING_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function TaskPlanPanel({ plan }) {
+  const [frameIdx, setFrameIdx] = useState(0);
+  const theme = getInkPalette();
+
+  useEffect(() => {
+    if (!plan?.isActive) return;
+    const id = setInterval(() => {
+      setFrameIdx(prev => (prev + 1) % RUNNING_FRAMES.length);
+    }, 70);
+    return () => clearInterval(id);
+  }, [plan?.isActive]);
+
+  if (!plan || !plan.steps || plan.steps.length === 0) return null;
+
+  const total = plan.steps.length;
+  const completed = plan.steps.filter(s => s.state === 'complete').length;
+  const pct = Math.round((completed / total) * 100);
+  const barFilled = Math.round((completed / total) * 10);
+  const barEmpty = 10 - barFilled;
+  const progressBar = `[${'█'.repeat(barFilled)}${'░'.repeat(barEmpty)}] ${pct}%`;
+
+  return (
+    <Box flexDirection="column" marginY={1} paddingX={1} borderStyle="single" borderColor={theme.subdued}>
+      <Box justifyContent="space-between">
+        <Text>
+          <Text bold color={theme.primary}>◆ Task Plan </Text>
+          <Text color={theme.highlight}>{progressBar} </Text>
+          <Text color={theme.muted}>({completed}/{total} steps)</Text>
+        </Text>
+        {plan.isActive && (
+          <Text color={theme.info}>
+            {RUNNING_FRAMES[frameIdx]} running
+          </Text>
+        )}
+      </Box>
+
+      {plan.question && (
+        <Box>
+          <Text color={theme.muted}>
+            │  Goal: "{plan.question.length > 56 ? plan.question.slice(0, 56) + '…' : plan.question}"
+          </Text>
+        </Box>
+      )}
+
+      {plan.steps.map((step, idx) => {
+        const isLast = idx === total - 1;
+        const branch = isLast ? '└─ ' : '├─ ';
+
+        let icon = '○';
+        let color = theme.muted;
+        let stateLabel = 'pending';
+
+        if (step.state === 'complete') {
+          icon = '✓';
+          color = theme.success;
+          stateLabel = 'done';
+        } else if (step.state === 'running') {
+          icon = '●';
+          color = theme.info;
+          stateLabel = 'active';
+        } else if (step.state === 'failed') {
+          icon = '✕';
+          color = theme.error;
+          stateLabel = 'failed';
+        }
+
+        return (
+          <Box key={step.id || idx}>
+            <Text color={theme.muted}>{branch}</Text>
+            <Text color={color} bold>{icon} </Text>
+            <Text color={theme.muted}>Step {idx + 1}: </Text>
+            <Text bold color={theme.text}>{step.label || step.id}</Text>
+            {step.objective && (
+              <Text color={theme.muted} dimColor> — {step.objective.length > 40 ? step.objective.slice(0, 40) + '…' : step.objective}</Text>
+            )}
+            <Text color={color}> [{stateLabel}]</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/server/agent/ink/ThinkingPanel.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { getInkPalette } from '../theme.js';
+
+const DOTS_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function ThinkingPanel({ text, isActive, duration }) {
+  const [frameIdx, setFrameIdx] = useState(0);
+  const theme = getInkPalette();
+
+  useEffect(() => {
+    if (!isActive) return;
+    const id = setInterval(() => {
+      setFrameIdx(prev => (prev + 1) % DOTS_FRAMES.length);
+    }, 80);
+    return () => clearInterval(id);
+  }, [isActive]);
+
+  if (!isActive && (!text || text.length === 0)) return null;
+
+  const icon = isActive
+    ? DOTS_FRAMES[frameIdx]
+    : '[DONE]';
+
+  const statusColor = isActive ? theme.tertiary : theme.success;
+
+  const cleanText = (text || '')
+    .replace(/\*\*\*?([^*]+)\*\*\*/g, '$1')
+    .replace(/\*([^\*\n]+)\*/g, '$1')
+    .replace(/^(\s*)[-*]\s+/gm, '$1• ')
+    .replace(/\*/g, '')
+    .trim();
+
+  const lines = cleanText.split('\n').filter(l => l.trim());
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text> </Text>
+        <Text color={statusColor} bold>{icon} </Text>
+        <Text color={statusColor} bold>
+          {isActive ? 'Thinking…' : `Thought for ${duration}s`}
+        </Text>
+      </Box>
+
+      {isActive && lines.length > 0 && (
+        <Box flexDirection="column" paddingLeft={1}>
+          {lines.slice(0, 15).map((line, i) => (
+            <Box key={i}>
+              <Text color={theme.muted} dimColor>  {line}</Text>
+            </Box>
+          ))}
+          {lines.length > 15 && (
+            <Box>
+              <Text color={theme.muted} dimColor>  ... +{lines.length - 15} more lines</Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {!isActive && duration && (
+        <Box>
+          <Text> </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/server/agent/ink/ToolResult.jsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { getInkPalette } from '../theme.js';
+
+const RUNNING_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function ToolRunning({ name, args }) {
+  const [frameIdx, setFrameIdx] = useState(0);
+  const theme = getInkPalette();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrameIdx(prev => (prev + 1) % RUNNING_FRAMES.length);
+    }, 70);
+    return () => clearInterval(id);
+  }, []);
+
+  const queryVal = args?.query || args?.url || args?.endpoint || '';
+  const displayQuery = typeof queryVal === 'string' && queryVal.length > 35
+    ? queryVal.slice(0, 35) + '…'
+    : queryVal;
+
+  return (
+    <Box>
+      <Text> </Text>
+      <Text color={theme.info}>{RUNNING_FRAMES[frameIdx]} </Text>
+      <Text bold color={theme.text}>{name}</Text>
+      {displayQuery && (
+        <Text color={theme.muted}> "{displayQuery}"</Text>
+      )}
+    </Box>
+  );
+}
+
+export function ToolCompleted({ name, result, duration }) {
+  const theme = getInkPalette();
+  const isError = result?.status === 'error';
+  const isNotFound = result?.status === 'not_found';
+
+  const statusLabel = isError ? '[ERROR]' : isNotFound ? '[NOT FOUND]' : '[OK]';
+  const iconColor = isError
+    ? theme.error
+    : isNotFound
+      ? theme.warning
+      : theme.success;
+
+  const statusText = isError ? 'Failed' : isNotFound ? 'Not found' : 'OK';
+  const count = result?.count ?? result?.returnedCount;
+  const countTag = count !== null && !isError ? ` • ${count} results` : '';
+  const durationTag = duration ? ` • ${(duration / 1000).toFixed(2)}s` : '';
+
+  const preview = extractPreview(result);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text> </Text>
+        <Text color={theme.muted}>▸ </Text>
+        <Text bold color={theme.info}>{name}</Text>
+        <Text> </Text>
+        <Text color={iconColor} bold>{statusLabel}</Text>
+        <Text color={iconColor}> {statusText}</Text>
+        {countTag && <Text color={theme.info}>{countTag}</Text>}
+        {durationTag && <Text color={theme.muted} dimColor>{durationTag}</Text>}
+      </Box>
+      {preview && (
+        <Box paddingLeft={1}>
+          <Text color={theme.muted} dimColor>• {preview}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function ToolSummary({ tools }) {
+  if (!tools || tools.length === 0) return null;
+  const theme = getInkPalette();
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text> </Text>
+        <Text color={theme.info} bold>▾ Tool Invocations ({tools.length})</Text>
+      </Box>
+      {tools.map((t, idx) => {
+        const statusLabel = t.status === 'error' ? '[ERROR]' : t.status === 'running' ? '[RUNNING]' : '[OK]';
+        const iconColor = t.status === 'error'
+          ? theme.error
+          : t.status === 'running'
+            ? theme.warning
+            : theme.success;
+        return (
+          <Box key={idx}>
+            <Text> </Text>
+            <Text color={theme.highlight}>[{idx + 1}]</Text>
+            <Text> </Text>
+            <Text color={theme.info} bold>{t.name}</Text>
+            <Text> </Text>
+            <Text color={iconColor}>{statusLabel}</Text>
+            {t.duration > 0 && (
+              <Text color={theme.muted} dimColor> {(t.duration / 1000).toFixed(2)}s</Text>
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+function extractPreview(result) {
+  if (!result) return '';
+  const MAX = 80;
+  let raw = '';
+
+  if (result.content) raw = result.content;
+  else if (result.verdict) raw = `[Verdict: ${result.verdict}] ${result.summary || ''}`;
+  else if (result.subagentReport) raw = `[Subagent] ${result.subagentReport}`;
+  else if (result.researchReport) raw = `[Research: ${result.sourcesCount || 0} sources] ${result.researchReport}`;
+  else if (result.answer) raw = String(result.answer);
+  else if (result.results && Array.isArray(result.results) && result.results.length > 0) {
+    raw = result.results[0].title || result.results[0].snippet || '';
+  } else if (result.works) raw = result.works.map(w => w.titleTh || w.titleCn).filter(Boolean).join(', ');
+  else if (result.songs) raw = result.songs.map(s => s.title).filter(Boolean).join(', ');
+  else if (result.brands) raw = result.brands.map(b => b.brand).filter(Boolean).join(', ');
+  else if (result.profile) raw = `${result.profile.nameTh || ''} ${result.profile.nameCn || ''}`.trim();
+  else if (result.stats) raw = `${result.stats.totalWorks || 0} works, ${result.stats.totalUniqueSongs || 0} songs`;
+  else if (result.skills) raw = `Skills (${result.skills.length}) enabled: ${result.skillsEnabled}`;
+  else if (result.message) raw = result.message;
+
+  if (!raw) return '';
+  raw = raw.replace(/\s+/g, ' ').trim();
+  return raw.length > MAX ? raw.slice(0, MAX) + '…' : raw;
+}