kiku-agent 1.2.0 → 1.3.0

package/server/web-chat/server.js

@@ -1,116 +1,145 @@
-import http from 'node:http';
-import { handleWebChatRequest } from './router.js';
-import { currentAgent, setCurrentAgent, webAgentCache } from './core/connection.js';
-import { config } from '../agent/config.js';
-
+import http from 'node:http';
+import { handleWebChatRequest } from './router.js';
+import { currentAgent, setCurrentAgent, webAgentCache } from './core/connection.js';
+import { config } from '../agent/config.js';
+
 let activeServer = null;
-let activePort = Number(process.env.PORT_WEB_CHAT || 3300);
-let activeHost = process.env.KIKU_WEB_CHAT_HOST || '127.0.0.1';
-
-export function getWebChatServerStatus() {
-  if (!activeServer) {
-    return {
-      running: false,
-      port: activePort,
-      url: `http://${activeHost}:${activePort}`,
-    };
-  }
-  return {
-    running: true,
-    port: activePort,
-    url: `http://${activeHost}:${activePort}`,
-    provider: currentAgent?.client?.provider || config.activeProvider || 'lmstudio',
-    model: currentAgent?.client?.model || 'google/gemma-4-e4b',
-  };
-}
-
-export function stopWebChatServer() {
-  return new Promise((resolve) => {
-    if (!activeServer) return resolve(false);
-    if (typeof activeServer.closeAllConnections === 'function') {
-      try { activeServer.closeAllConnections(); } catch {}
-    }
-    activeServer.close(async () => {
-      await Promise.allSettled(
-        Array.from(webAgentCache.values(), connection => connection.agent?.saveSession?.())
-      );
-      webAgentCache.clear();
-      activeServer = null;
-      resolve(true);
-    });
-  });
-}
-
-function getNextSafePort(port) {
-  // If in Windows Hyper-V / WSL TCP excluded port range (2943..3142 or 5388..5587), jump past it
-  if (port >= 2940 && port <= 3150) {
-    return 3300;
-  }
-  if (port >= 5380 && port <= 5590) {
-    return 5600;
-  }
-  return port + 1;
-}
-
+let activePort = Number(process.env.PORT_WEB_CHAT || 3002);
+let activeHost = process.env.KIKU_WEB_CHAT_HOST || 'localhost';
+
+function formatServerUrl(host, port) {
+  const displayHost = (host === '127.0.0.1' || host === 'localhost' || host === '::1') ? 'localhost' : host;
+  return `http://${displayHost}:${port}`;
+}
+
+export function getWebChatServerStatus() {
+  if (!activeServer) {
+    return {
+      running: false,
+      port: activePort,
+      url: formatServerUrl(activeHost, activePort),
+    };
+  }
+  return {
+    running: true,
+    port: activePort,
+    url: formatServerUrl(activeHost, activePort),
+    provider: currentAgent?.client?.provider || config.activeProvider || 'lmstudio',
+    model: currentAgent?.client?.model || 'google/gemma-4-e4b',
+  };
+}
+
+export function stopWebChatServer() {
+  return new Promise((resolve) => {
+    if (!activeServer) return resolve(false);
+    if (typeof activeServer.closeAllConnections === 'function') {
+      try { activeServer.closeAllConnections(); } catch {}
+    }
+    activeServer.close(async () => {
+      await Promise.allSettled(
+        Array.from(webAgentCache.values(), connection => connection.agent?.saveSession?.())
+      );
+      webAgentCache.clear();
+      activeServer = null;
+      resolve(true);
+    });
+  });
+}
+
+function getNextSafePort(port) {
+  if (port === 3000 || port === 3001) {
+    return 3002;
+  }
+  if (port >= 2940 && port < 3000) {
+    return 3002;
+  }
+  if (port >= 5380 && port <= 5590) {
+    return 5600;
+  }
+  return port + 1;
+}
+
 export async function startWebChatServer(options = {}) {
-  const requestedPort = Number(options.port || process.env.PORT_WEB_CHAT || 3300);
-  const requestedHost = String(options.host || process.env.KIKU_WEB_CHAT_HOST || '127.0.0.1');
+  const requestedPort = Number(options.port || process.env.PORT_WEB_CHAT || 3002);
+  const requestedHost = String(options.host || process.env.KIKU_WEB_CHAT_HOST || 'localhost');
   const isLoopback = requestedHost === '127.0.0.1' || requestedHost === '::1' || requestedHost === 'localhost';
   if (!isLoopback && process.env.KIKU_ALLOW_REMOTE_WEB_CHAT !== 'true') {
     throw new Error('Remote web-chat binding is disabled. Set KIKU_ALLOW_REMOTE_WEB_CHAT=true only behind an authenticated reverse proxy.');
   }
-  if (options.agent) {
-    setCurrentAgent(options.agent);
-  }
-
-  if (activeServer) {
-    if (options.port && activePort !== Number(options.port)) {
-      await stopWebChatServer();
-    } else {
-      return Promise.resolve({
-        server: activeServer,
-        port: activePort,
-        url: `http://${activeHost}:${activePort}`,
-        alreadyRunning: true
-      });
-    }
-  }
-
-  return new Promise((resolve, reject) => {
-    let currentPort = requestedPort;
-    let attempts = 0;
-    const maxAttempts = 15;
-    let server = null;
-
-    function tryBind() {
-      server = http.createServer(async (req, res) => {
-        await handleWebChatRequest(req, res, { port: activePort });
-      });
-
-      server.on('error', (err) => {
-        if ((err.code === 'EACCES' || err.code === 'EADDRINUSE') && attempts < maxAttempts) {
-          attempts++;
-          currentPort = getNextSafePort(currentPort);
-          try { server.close(); } catch {}
-          setTimeout(tryBind, 20);
-          return;
-        }
-        reject(err);
-      });
-
+  if (options.agent) {
+    setCurrentAgent(options.agent);
+  }
+
+  if (activeServer) {
+    if (options.port && activePort !== Number(options.port)) {
+      await stopWebChatServer();
+    } else {
+      return Promise.resolve({
+        server: activeServer,
+        port: activePort,
+        url: formatServerUrl(activeHost, activePort),
+        alreadyRunning: true
+      });
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    let currentPort = requestedPort;
+    let attempts = 0;
+    const maxAttempts = 15;
+    let server = null;
+
+    function tryBind() {
+      server = http.createServer(async (req, res) => {
+        await handleWebChatRequest(req, res, { port: activePort });
+      });
+
+      server.on('error', (err) => {
+        if ((err.code === 'EACCES' || err.code === 'EADDRINUSE') && attempts < maxAttempts) {
+          attempts++;
+          currentPort = getNextSafePort(currentPort);
+          try { server.close(); } catch {}
+          setTimeout(tryBind, 20);
+          return;
+        }
+        reject(err);
+      });
+
       server.listen(currentPort, requestedHost, () => {
         activeServer = server;
         activePort = currentPort;
         activeHost = requestedHost;
-        resolve({
-          server,
-          port: activePort,
-          url: `http://${activeHost}:${activePort}`,
-          alreadyRunning: false
-        });
-      });
-    }
-
-    tryBind();
-  });
-}
+        resolve({
+          server,
+          port: activePort,
+          url: formatServerUrl(activeHost, activePort),
+          alreadyRunning: false
+        });
+      });
+    }
+
+    tryBind();
+  });
+}
+
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { openBrowser } from './core/browserLauncher.js';
+
+if (process.argv[1] && path.resolve(process.argv[1]) === path.resolve(fileURLToPath(import.meta.url))) {
+  const args = process.argv.slice(2);
+  const portIdx = args.indexOf('--port');
+  const port = portIdx !== -1 && args[portIdx + 1] ? Number(args[portIdx + 1]) : 3002;
+  const shouldOpen = args.includes('--open');
+
+  startWebChatServer({ port }).then((res) => {
+    console.log(`[Web Chat] Standalone server running at ${res.url}`);
+    if (shouldOpen) {
+      try { openBrowser(res.url); } catch {}
+    }
+  }).catch((err) => {
+    console.error('[Web Chat] Failed to start server:', err);
+    process.exit(1);
+  });
+}
+

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

@@ -8,7 +8,7 @@ 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 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');
@@ -50,8 +50,8 @@ function loadAssets() {
 }
 
 export function getWebChatHtml(_port = 3001) {
-  const { tokens, styles, body, agentBubbleScript, i18nScript, script } = loadAssets();
-  const categoriesJson = JSON.stringify(CATEGORIZED_SUGGESTIONS);
+  const { tokens, styles, body, agentBubbleScript, i18nScript, script } = loadAssets();
+  const categoriesJson = JSON.stringify(CATEGORIZED_SUGGESTIONS).replace(/</g, '\\u003c');
 
   const resolvedScript = script.replace(/const ALL_CATEGORIES = [^;]+;/, `const ALL_CATEGORIES = ${categoriesJson};`);
 
@@ -62,7 +62,7 @@ export function getWebChatHtml(_port = 3001) {
     '  <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="icon" href="/favicon.ico" />',
     '  <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">',
@@ -71,9 +71,9 @@ export function getWebChatHtml(_port = 3001) {
     tokens,
     styles,
     '  </style>',
-    '</head>',
-    '<body>',
-    body,
+    '</head>',
+    '<body>',
+    body,
     '  <script>',
     agentBubbleScript,
     '  </script>',
@@ -82,7 +82,7 @@ export function getWebChatHtml(_port = 3001) {
     '  </script>',
     '  <script>',
     resolvedScript,
-    '  </script>',
+    '  </script>',
     '</body>',
     '</html>'
   ].join('\n');

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

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="th" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <title>AI Model Workbench — interaction states</title>
+  <link rel="stylesheet" href="../../../../tokens.css">
+  <link rel="stylesheet" href="../styles/main.css">
+  <style>
+    html, body { overflow-x: clip; }
+    body { margin: 0; min-height: 100dvh; background: var(--color-settings-canvas); color: var(--color-settings-ink); font-family: var(--font-body); }
+    .preview-shell { width: min(48rem, calc(100% - 2rem)); margin-inline: auto; padding-block: var(--space-xl); }
+    .preview-shell h1 { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-style: normal; }
+    .preview-shell > p { margin: 0 0 var(--space-lg); color: var(--color-settings-muted); }
+    .preview-grid { display: grid; gap: var(--space-xs); }
+    .preview-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
+    .preview-label { color: var(--color-settings-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
+    .preview-row .btn-sync-cli { width: 100%; }
+    .is-hover { border-color: var(--color-settings-accent); background: var(--color-settings-surface-raised); color: var(--color-settings-accent); transform: translateY(-1px); }
+    .is-focus { outline: 2px solid var(--color-settings-focus); outline-offset: 2px; }
+    .is-active { transform: translateY(1px); }
+    @media (max-width: 24rem) { .preview-row { grid-template-columns: minmax(0, 1fr); } }
+  </style>
+</head>
+<body>
+  <main class="preview-shell">
+    <h1>AI model workbench</h1>
+    <p>Production button treatment across all required interaction states.</p>
+    <section class="preview-grid" aria-label="Interaction states">
+      <div class="preview-row"><span class="preview-label">default</span><button class="btn-sync-cli">Use CLI defaults</button></div>
+      <div class="preview-row"><span class="preview-label">hover</span><button class="btn-sync-cli is-hover">Use CLI defaults</button></div>
+      <div class="preview-row"><span class="preview-label">focus</span><button class="btn-sync-cli is-focus">Use CLI defaults</button></div>
+      <div class="preview-row"><span class="preview-label">active</span><button class="btn-sync-cli is-active">Use CLI defaults</button></div>
+      <div class="preview-row"><span class="preview-label">disabled</span><button class="btn-sync-cli" disabled>Use CLI defaults</button></div>
+      <div class="preview-row"><span class="preview-label">loading</span><button class="btn-sync-cli" data-state="loading">Applying defaults</button></div>
+      <div class="preview-row"><span class="preview-label">error</span><button class="btn-sync-cli" data-state="error">Retry defaults</button></div>
+      <div class="preview-row"><span class="preview-label">success</span><button class="btn-sync-cli" data-state="success">Defaults applied</button></div>
+    </section>
+  </main>
+</body>
+</html>

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

@@ -1,8 +1,3 @@
-/* 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',