kiku-agent 1.0.11 → 1.2.0

package/server/web-chat/ui/htmlBuilder.js

@@ -0,0 +1,91 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { CATEGORIZED_SUGGESTIONS, DEFAULT_SUGGESTIONS } from './scripts/suggestionsData.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const STYLES_PATH = path.join(__dirname, 'styles', 'main.css');
+const TOKENS_PATH = path.resolve(__dirname, '../../../tokens.css');
+const BODY_PATH = path.join(__dirname, 'templates', 'body.html');
+const AGENT_BUBBLE_SCRIPT_PATH = path.join(__dirname, 'scripts', 'agentBubbleSystem.js');
+const WEBCHAT_I18N_SCRIPT_PATH = path.join(__dirname, 'scripts', 'webchatI18n.js');
+const SCRIPT_PATH = path.join(__dirname, 'scripts', 'client.js');
+
+let cachedStyles = null;
+let cachedTokens = null;
+let cachedBody = null;
+let cachedAgentBubbleScript = null;
+let cachedI18nScript = null;
+let cachedScriptTemplate = null;
+
+function loadAssets() {
+  if (process.env.NODE_ENV === 'production' && cachedTokens && cachedStyles && cachedBody && cachedAgentBubbleScript && cachedI18nScript && cachedScriptTemplate) {
+    return {
+      tokens: cachedTokens,
+      styles: cachedStyles,
+      body: cachedBody,
+      agentBubbleScript: cachedAgentBubbleScript,
+      i18nScript: cachedI18nScript,
+      script: cachedScriptTemplate
+    };
+  }
+
+  cachedTokens = fs.readFileSync(TOKENS_PATH, 'utf8');
+  cachedStyles = fs.readFileSync(STYLES_PATH, 'utf8');
+  cachedBody = fs.readFileSync(BODY_PATH, 'utf8');
+  cachedAgentBubbleScript = fs.readFileSync(AGENT_BUBBLE_SCRIPT_PATH, 'utf8');
+  cachedI18nScript = fs.readFileSync(WEBCHAT_I18N_SCRIPT_PATH, 'utf8');
+  cachedScriptTemplate = fs.readFileSync(SCRIPT_PATH, 'utf8');
+
+  return {
+    tokens: cachedTokens,
+    styles: cachedStyles,
+    body: cachedBody,
+    agentBubbleScript: cachedAgentBubbleScript,
+    i18nScript: cachedI18nScript,
+    script: cachedScriptTemplate
+  };
+}
+
+export function getWebChatHtml(_port = 3001) {
+  const { tokens, styles, body, agentBubbleScript, i18nScript, script } = loadAssets();
+  const categoriesJson = JSON.stringify(CATEGORIZED_SUGGESTIONS);
+
+  const resolvedScript = script.replace(/const ALL_CATEGORIES = [^;]+;/, `const ALL_CATEGORIES = ${categoriesJson};`);
+
+  return [
+    '<!DOCTYPE html>',
+    '<html lang="th" data-theme="dark" class="scroll-smooth">',
+    '<head>',
+    '  <meta charset="UTF-8">',
+    '  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">',
+    '  <title>鞠婧祎 (Ju Jingyi) — Official AI Assistant</title>',
+    '  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><text y=\'.9em\' font-size=\'90\'>🌸</text></svg>" />',
+    '  <link rel="preconnect" href="https://fonts.googleapis.com">',
+    '  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+    '  <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">',
+    '  <link rel="stylesheet" href="/fonts/google-sans-official.css">',
+    '  <style>',
+    tokens,
+    styles,
+    '  </style>',
+    '</head>',
+    '<body>',
+    body,
+    '  <script>',
+    agentBubbleScript,
+    '  </script>',
+    '  <script>',
+    i18nScript,
+    '  </script>',
+    '  <script>',
+    resolvedScript,
+    '  </script>',
+    '</body>',
+    '</html>'
+  ].join('\n');
+}
+
+export { CATEGORIZED_SUGGESTIONS, DEFAULT_SUGGESTIONS };

package/server/web-chat/ui/previews/agentBubble.preview.html

@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Agent Bubble — eight states</title>
+  <link rel="stylesheet" href="../../../../tokens.css">
+  <link rel="stylesheet" href="../styles/main.css">
+  <style>
+    html,
+    body {
+      min-width: 0;
+      overflow-x: clip;
+    }
+
+    body.preview-page {
+      display: block;
+      width: 100%;
+      min-height: 100vh;
+      height: auto;
+      overflow-y: auto;
+      padding: var(--space-lg);
+      background: var(--color-paper);
+      color: var(--color-ink);
+      font-family: var(--font-body) !important;
+    }
+
+    .preview-shell {
+      width: min(100%, 58rem);
+      margin-inline: auto;
+    }
+
+    .preview-heading {
+      margin-block-end: var(--space-xl);
+      font-family: var(--font-display) !important;
+      font-size: var(--text-xl);
+      font-style: normal;
+      line-height: 1.15;
+      overflow-wrap: anywhere;
+    }
+
+    .preview-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: var(--space-lg);
+    }
+
+    .preview-case {
+      min-width: 0;
+    }
+
+    .preview-label {
+      display: block;
+      margin-block-end: var(--space-xs);
+      color: var(--color-muted);
+      font-family: var(--font-mono) !important;
+      font-size: var(--text-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    .preview-case .msg-group {
+      max-width: 100%;
+    }
+
+    .preview-case .bubble {
+      min-height: 7rem;
+    }
+
+    @media (max-width: 48rem) {
+      body.preview-page { padding: var(--space-md); }
+      .preview-grid { grid-template-columns: minmax(0, 1fr); }
+    }
+  </style>
+</head>
+<body class="preview-page">
+  <main class="preview-shell">
+    <h1 class="preview-heading">Agent bubble — eight states</h1>
+    <div class="preview-grid" id="preview-grid"></div>
+  </main>
+
+  <script src="../scripts/agentBubbleSystem.js"></script>
+  <script>
+    const cases = [
+      { label: 'Default', status: 'idle', text: 'Ready for a new request.' },
+      { label: 'Hover', status: 'idle', forceClass: 'is-hover', text: 'Pointer feedback changes the boundary only.' },
+      { label: 'Focus', status: 'idle', forceClass: 'is-focus', text: 'Keyboard focus uses an immediate, visible ring.' },
+      { label: 'Active', status: 'streaming', forceClass: 'is-active', text: 'The answer is arriving one part at a time.' },
+      { label: 'Disabled', status: 'stopped', forceClass: 'is-disabled', text: 'This response is no longer interactive.', disabled: true },
+      { label: 'Loading', status: 'working', text: 'Searching the official works catalog…' },
+      { label: 'Error', status: 'error', text: 'The agent could not finish this response. Try again.' },
+      { label: 'Success', status: 'done', text: 'The response and its sources are ready.' }
+    ];
+
+    const grid = document.getElementById('preview-grid');
+    cases.forEach((item) => {
+      const cell = document.createElement('section');
+      cell.className = 'preview-case';
+
+      const label = document.createElement('span');
+      label.className = 'preview-label';
+      label.textContent = item.label;
+
+      const group = document.createElement('article');
+      group.className = 'msg-group msg-bot' + (item.forceClass ? ' ' + item.forceClass : '');
+      if (item.disabled) group.setAttribute('aria-disabled', 'true');
+
+      const meta = document.createElement('div');
+      meta.className = 'msg-meta';
+      meta.textContent = '✿ KIKU Research Agent • now';
+
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble bubble-bot';
+      bubble.tabIndex = 0;
+
+      const answer = document.createElement('div');
+      answer.className = 'answer-content';
+      answer.textContent = item.text;
+      bubble.appendChild(answer);
+      group.append(meta, bubble);
+      cell.append(label, group);
+      grid.appendChild(cell);
+
+      AgentBubbleSystem.mount({
+        group,
+        bubble,
+        language: 'en',
+        status: item.status,
+        agent: { id: 'research', name: 'KIKU Research Agent', avatar: '✿' }
+      });
+    });
+  </script>
+</body>
+</html>

package/server/web-chat/ui/scripts/agentBubbleSystem.js

@@ -0,0 +1,320 @@
+/* Hallmark · component: agent bubble · genre: atmospheric · theme: existing Kiku
+ * states: default · hover · focus · active · disabled · loading · error · success
+ * contrast: token-backed
+ */
+/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 */
+(function initializeAgentBubbleSystem(globalScope) {
+  const STATUS = Object.freeze({
+    IDLE: 'idle',
+    QUEUED: 'queued',
+    THINKING: 'thinking',
+    WORKING: 'working',
+    STREAMING: 'streaming',
+    WAITING: 'waiting',
+    DONE: 'done',
+    ERROR: 'error',
+    STOPPED: 'stopped'
+  });
+
+  const ACTIVE_STATUSES = new Set([
+    STATUS.QUEUED,
+    STATUS.THINKING,
+    STATUS.WORKING,
+    STATUS.STREAMING
+  ]);
+
+  const STATUS_LABELS = Object.freeze({
+    th: {
+      idle: 'พร้อม',
+      queued: 'รอเริ่ม',
+      thinking: 'กำลังวิเคราะห์',
+      working: 'กำลังใช้เครื่องมือ',
+      streaming: 'กำลังตอบ',
+      waiting: 'รอคำตอบจากคุณ',
+      done: 'เสร็จแล้ว',
+      error: 'ต้องลองใหม่',
+      stopped: 'หยุดแล้ว'
+    },
+    zh: {
+      idle: '就绪',
+      queued: '等待开始',
+      thinking: '正在分析',
+      working: '正在使用工具',
+      streaming: '正在回答',
+      waiting: '等待您的回复',
+      done: '已完成',
+      error: '需要重试',
+      stopped: '已停止'
+    },
+    en: {
+      idle: 'Ready',
+      queued: 'Queued',
+      thinking: 'Analyzing',
+      working: 'Using tools',
+      streaming: 'Answering',
+      waiting: 'Waiting for you',
+      done: 'Complete',
+      error: 'Retry needed',
+      stopped: 'Stopped'
+    }
+  });
+
+  const stateByGroup = new WeakMap();
+  let fallbackId = 0;
+
+  function makeId(prefix = 'bubble') {
+    if (globalScope.crypto && typeof globalScope.crypto.randomUUID === 'function') {
+      return prefix + '_' + globalScope.crypto.randomUUID();
+    }
+    fallbackId += 1;
+    return prefix + '_' + Date.now().toString(36) + '_' + fallbackId.toString(36);
+  }
+
+  function normalizeAgent(agent = {}) {
+    return {
+      id: String(agent.id || agent.key || 'kiku'),
+      name: String(agent.name || 'KIKU Agent'),
+      avatar: String(agent.avatar || '✿'),
+      image: agent.image ? String(agent.image) : ''
+    };
+  }
+
+  function createModel(options = {}) {
+    return {
+      id: String(options.id || makeId('message')),
+      role: options.role === 'user' ? 'user' : 'bot',
+      agent: normalizeAgent(options.agent),
+      status: options.status || (options.role === 'user' ? STATUS.DONE : STATUS.IDLE),
+      parts: Array.isArray(options.parts) ? options.parts.slice() : [],
+      createdAt: options.createdAt || Date.now(),
+      updatedAt: Date.now(),
+      error: null
+    };
+  }
+
+  function findPart(model, type, predicate = () => true) {
+    for (let index = model.parts.length - 1; index >= 0; index -= 1) {
+      const part = model.parts[index];
+      if (part.type === type && predicate(part)) return part;
+    }
+    return null;
+  }
+
+  function ensureTextPart(model, type) {
+    let part = findPart(model, type);
+    if (!part) {
+      part = { id: makeId(type), type, content: '' };
+      model.parts.push(part);
+    }
+    return part;
+  }
+
+  function reduceEvent(model, event = {}) {
+    const eventAgent = event.agent || (event.agentId ? {
+      id: event.agentId,
+      name: event.agentName || event.agentId,
+      avatar: event.agentAvatar || model.agent.avatar,
+      image: event.agentImage || model.agent.image
+    } : null);
+    const next = {
+      ...model,
+      agent: eventAgent ? normalizeAgent(eventAgent) : model.agent,
+      parts: model.parts.map(part => ({ ...part })),
+      updatedAt: Date.now(),
+      error: model.error
+    };
+
+    if (event.type === 'queued') {
+      next.status = STATUS.QUEUED;
+    } else if (event.type === 'reasoning') {
+      next.status = STATUS.THINKING;
+      ensureTextPart(next, 'reasoning').content += String(event.chunk || '');
+    } else if (event.type === 'tool_start') {
+      next.status = STATUS.WORKING;
+      next.parts.push({
+        id: String(event.callId || makeId('tool')),
+        type: 'tool',
+        name: String(event.name || 'tool'),
+        input: event.input,
+        result: null,
+        status: 'running',
+        startedAt: Date.now()
+      });
+    } else if (event.type === 'tool_result') {
+      next.status = STATUS.WORKING;
+      let tool = findPart(next, 'tool', part => {
+        if (event.callId) return part.id === String(event.callId);
+        return part.name === String(event.name || 'tool') && part.status === 'running';
+      });
+      if (!tool) {
+        tool = {
+          id: String(event.callId || makeId('tool')),
+          type: 'tool',
+          name: String(event.name || 'tool'),
+          status: 'running'
+        };
+        next.parts.push(tool);
+      }
+      tool.status = 'done';
+      tool.result = event.result;
+      tool.durationMs = event.durationMs;
+      tool.finishedAt = Date.now();
+    } else if (event.type === 'subagent_progress') {
+      next.status = STATUS.WORKING;
+      const subject = String(event.subject || '');
+      let subagent = null;
+      for (let index = next.parts.length - 1; index >= 0; index -= 1) {
+        const part = next.parts[index];
+        if (part.type === 'subagent' && part.source === String(event.source || 'subagent') &&
+            (part.subject || '') === subject && part.status === 'running') {
+          subagent = part;
+          break;
+        }
+      }
+      if (!subagent || event.kind === 'start') {
+        if (subagent && event.kind === 'start') subagent.status = 'done';
+        subagent = {
+          id: makeId('subagent'),
+          type: 'subagent',
+          source: String(event.source || 'subagent'),
+          subject,
+          status: 'running',
+          iterations: 0,
+          tools: [],
+          startedAt: Date.now()
+        };
+        next.parts.push(subagent);
+      }
+      if (Number.isFinite(event.iteration)) subagent.iterations = event.iteration;
+      if (event.tool && !subagent.tools.includes(String(event.tool))) subagent.tools.push(String(event.tool));
+      if (event.kind === 'complete') subagent.status = 'done';
+      subagent.updatedAt = Date.now();
+    } else if (event.type === 'token') {
+      next.status = STATUS.STREAMING;
+      ensureTextPart(next, 'text').content += String(event.chunk || '');
+    } else if (event.type === 'clarifying_questions') {
+      next.status = STATUS.WAITING;
+    } else if (event.type === 'final' || event.type === 'done') {
+      next.status = STATUS.DONE;
+      if (event.answer !== undefined) ensureTextPart(next, 'text').content = String(event.answer || '');
+    } else if (event.type === 'error') {
+      next.status = STATUS.ERROR;
+      next.error = String(event.error || event.message || 'Agent execution failed.');
+      next.parts.push({ id: makeId('error'), type: 'error', content: next.error });
+    } else if (event.type === 'stopped') {
+      next.status = STATUS.STOPPED;
+    }
+
+    return next;
+  }
+
+  function statusLabel(status, language = 'th') {
+    const labels = STATUS_LABELS[language] || STATUS_LABELS.en;
+    return labels[status] || labels.idle;
+  }
+
+  function updateDom(group, model, language = 'th') {
+    if (!group || !model) return;
+    const status = model.status || STATUS.IDLE;
+    group.dataset.agentId = model.agent.id;
+    group.dataset.agentStatus = status;
+    group.dataset.messageId = model.id;
+    group.setAttribute('aria-busy', String(ACTIVE_STATUSES.has(status)));
+
+    const meta = group.querySelector('.msg-meta');
+    if (meta) {
+      const avatarImage = meta.querySelector('.msg-avatar-thumb');
+      const agentName = meta.querySelector('.msg-agent-name');
+      if (avatarImage && model.agent.image) {
+        avatarImage.src = model.agent.image;
+        avatarImage.alt = model.agent.name;
+      }
+      if (agentName) agentName.textContent = model.agent.avatar + ' ' + model.agent.name;
+
+      let badge = meta.querySelector('.agent-status-badge');
+      if (!badge) {
+        badge = document.createElement('span');
+        badge.className = 'agent-status-badge';
+        badge.setAttribute('role', 'status');
+        badge.setAttribute('aria-live', 'polite');
+        meta.appendChild(badge);
+      }
+      badge.dataset.status = status;
+      badge.textContent = statusLabel(status, language);
+      if (status === STATUS.ERROR) {
+        badge.setAttribute('role', 'button');
+        badge.setAttribute('tabindex', '0');
+        badge.title = language === 'th' ? 'คลิกเพื่อลองใหม่อีกครั้ง (Click to retry)' : (language === 'zh' ? '点击重试 (Click to retry)' : 'Click to retry');
+        badge.onclick = (e) => {
+          e.stopPropagation();
+          if (typeof globalScope.regenerateMessage === 'function') {
+            globalScope.regenerateMessage(group);
+          }
+        };
+        badge.onkeydown = (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            badge.click();
+          }
+        };
+      } else {
+        badge.setAttribute('role', 'status');
+        badge.removeAttribute('tabindex');
+        badge.removeAttribute('title');
+        badge.onclick = null;
+        badge.onkeydown = null;
+      }
+    }
+
+    const bubble = group.querySelector('.bubble');
+    if (bubble) {
+      bubble.dataset.state = status;
+      bubble.setAttribute('aria-label', model.agent.name + ' — ' + statusLabel(status, language));
+    }
+
+    const actions = group.querySelector('.msg-actions');
+    if (actions) {
+      const ready = status === STATUS.DONE || status === STATUS.ERROR || status === STATUS.STOPPED;
+      actions.hidden = !ready;
+      actions.setAttribute('aria-hidden', String(!ready));
+      actions.querySelectorAll('button, a').forEach(control => {
+        control.tabIndex = ready ? 0 : -1;
+      });
+    }
+  }
+
+  function mount(options = {}) {
+    const group = options.group;
+    if (!group) throw new TypeError('AgentBubbleSystem.mount requires a message group.');
+    const model = createModel(options);
+    stateByGroup.set(group, model);
+    group.classList.add('agent-bubble-system');
+    updateDom(group, model, options.language);
+    return model;
+  }
+
+  function dispatch(group, event, language = 'th') {
+    const current = stateByGroup.get(group);
+    if (!current) return null;
+    const next = reduceEvent(current, event);
+    stateByGroup.set(group, next);
+    updateDom(group, next, language);
+    group.dispatchEvent(new CustomEvent('agentbubblechange', { detail: next }));
+    return next;
+  }
+
+  function getState(group) {
+    return stateByGroup.get(group) || null;
+  }
+
+  globalScope.AgentBubbleSystem = Object.freeze({
+    STATUS,
+    STATUS_LABELS,
+    createModel,
+    reduceEvent,
+    mount,
+    dispatch,
+    getState,
+    statusLabel
+  });
+}(typeof window !== 'undefined' ? window : globalThis));