@agent-link/server 0.1.160 → 0.1.161

package/web/modules/i18n.js

@@ -0,0 +1,101 @@
+// ── Lightweight i18n module ─────────────────────────────────────────────────
+const { ref, computed } = Vue;
+
+/**
+ * Creates i18n functionality: t() translator, locale switching, persistence.
+ * Locale data is loaded dynamically from /locales/<lang>.json.
+ *
+ * @returns {{ t: Function, locale: import('vue').Ref<string>, setLocale: Function }}
+ */
+export function createI18n() {
+  const STORAGE_KEY = 'agentlink-language';
+  const SUPPORTED = ['en', 'zh'];
+  const DEFAULT_LOCALE = 'en';
+
+  // Detect initial locale
+  function detectLocale() {
+    // 1. Explicit user choice
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && SUPPORTED.includes(stored)) return stored;
+
+    // 2. Browser preference
+    const nav = (navigator.language || '').toLowerCase();
+    if (nav.startsWith('zh')) return 'zh';
+
+    // 3. Default
+    return DEFAULT_LOCALE;
+  }
+
+  const locale = ref(detectLocale());
+  const _messages = ref({});
+  let _loadedLocale = null;
+
+  // Load locale JSON
+  async function loadMessages(lang) {
+    if (_loadedLocale === lang && Object.keys(_messages.value).length > 0) return;
+    try {
+      const resp = await fetch(`/locales/${lang}.json`);
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      _messages.value = await resp.json();
+      _loadedLocale = lang;
+    } catch (e) {
+      console.warn(`[i18n] Failed to load locale "${lang}":`, e);
+      // Fallback: try loading English
+      if (lang !== DEFAULT_LOCALE) {
+        try {
+          const resp = await fetch(`/locales/${DEFAULT_LOCALE}.json`);
+          if (resp.ok) {
+            _messages.value = await resp.json();
+            _loadedLocale = DEFAULT_LOCALE;
+          }
+        } catch { /* give up */ }
+      }
+    }
+  }
+
+  /**
+   * Translate a key, with optional parameter substitution.
+   * Returns the key itself if no translation is found (fallback).
+   *
+   * @param {string} key - Dot-notation key, e.g. "button.send"
+   * @param {object} [params] - Substitution params, e.g. { n: 5 }
+   * @returns {string}
+   */
+  function t(key, params) {
+    let str = _messages.value[key];
+    if (str === undefined) return key;
+    if (params) {
+      for (const [k, v] of Object.entries(params)) {
+        str = str.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v));
+      }
+    }
+    return str;
+  }
+
+  /**
+   * Switch locale, persist choice, and reload strings.
+   * @param {string} lang
+   */
+  async function setLocale(lang) {
+    if (!SUPPORTED.includes(lang)) return;
+    locale.value = lang;
+    localStorage.setItem(STORAGE_KEY, lang);
+    await loadMessages(lang);
+  }
+
+  /**
+   * Toggle between supported locales (EN ↔ 中).
+   */
+  async function toggleLocale() {
+    const next = locale.value === 'en' ? 'zh' : 'en';
+    await setLocale(next);
+  }
+
+  // The display label for the language switcher button
+  const localeLabel = computed(() => locale.value === 'en' ? 'EN' : '中');
+
+  // Load initial messages
+  loadMessages(locale.value);
+
+  return { t, locale, setLocale, toggleLocale, localeLabel };
+}

package/web/modules/messageHelpers.js

@@ -8,15 +8,15 @@ export function isContextSummary(text) {
   return typeof text === 'string' && text.trimStart().startsWith(CONTEXT_SUMMARY_PREFIX);
 }
 
-export function formatRelativeTime(ts) {
+export function formatRelativeTime(ts, t) {
   const diff = Date.now() - ts;
   const mins = Math.floor(diff / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return `${mins}m ago`;
+  if (mins < 1) return t ? t('time.justNow') : 'just now';
+  if (mins < 60) return t ? t('time.minutesAgo', { n: mins }) : `${mins}m ago`;
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) return t ? t('time.hoursAgo', { n: hours }) : `${hours}h ago`;
   const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
+  if (days < 30) return t ? t('time.daysAgo', { n: days }) : `${days}d ago`;
   return new Date(ts).toLocaleDateString();
 }
 
@@ -53,7 +53,7 @@ export function toggleTool(msg) {
   msg.expanded = !msg.expanded;
 }
 
-export function getToolSummary(msg) {
+export function getToolSummary(msg, t) {
   const name = msg.toolName;
   const input = msg.toolInput;
   try {
@@ -65,8 +65,8 @@ export function getToolSummary(msg) {
     if (name === 'Glob' && obj.pattern) return obj.pattern;
     if (name === 'Grep' && obj.pattern) return obj.pattern;
     if (name === 'TodoWrite' && obj.todos) {
-      const done = obj.todos.filter(t => t.status === 'completed').length;
-      return `${done}/${obj.todos.length} done`;
+      const doneCount = obj.todos.filter(td => td.status === 'completed').length;
+      return t ? t('tool.done', { done: doneCount, total: obj.todos.length }) : `${doneCount}/${obj.todos.length} done`;
     }
     if (name === 'Task' && obj.description) return obj.description;
     if (name === 'Agent' && obj.description) return obj.description;
@@ -81,7 +81,7 @@ export function isEditTool(msg) {
   return msg.role === 'tool' && msg.toolName === 'Edit' && msg.toolInput;
 }
 
-export function getFormattedToolInput(msg) {
+export function getFormattedToolInput(msg, t) {
   if (!msg.toolInput) return null;
   try {
     const obj = JSON.parse(msg.toolInput);
@@ -91,18 +91,22 @@ export function getFormattedToolInput(msg) {
     if (name === 'Read' && obj.file_path) {
       let detail = esc(obj.file_path);
       if (obj.offset && obj.limit) {
-        detail += `  <span class="tool-input-meta">lines ${obj.offset}\u2013${obj.offset + obj.limit - 1}</span>`;
+        const meta = t ? t('tool.lines', { start: obj.offset, end: obj.offset + obj.limit - 1 }) : `lines ${obj.offset}\u2013${obj.offset + obj.limit - 1}`;
+        detail += `  <span class="tool-input-meta">${meta}</span>`;
       } else if (obj.offset) {
-        detail += `  <span class="tool-input-meta">from line ${obj.offset}</span>`;
+        const meta = t ? t('tool.fromLine', { offset: obj.offset }) : `from line ${obj.offset}`;
+        detail += `  <span class="tool-input-meta">${meta}</span>`;
       } else if (obj.limit) {
-        detail += `  <span class="tool-input-meta">first ${obj.limit} lines</span>`;
+        const meta = t ? t('tool.firstLines', { limit: obj.limit }) : `first ${obj.limit} lines`;
+        detail += `  <span class="tool-input-meta">${meta}</span>`;
       }
       return detail;
     }
 
     if (name === 'Write' && obj.file_path) {
       const lines = (obj.content || '').split('\n').length;
-      return esc(obj.file_path) + `  <span class="tool-input-meta">${lines} lines</span>`;
+      const lineCount = t ? t('tool.lineCount', { n: lines }) : `${lines} lines`;
+      return esc(obj.file_path) + `  <span class="tool-input-meta">${lineCount}</span>`;
     }
 
     if (name === 'Bash' && obj.command) {
@@ -113,13 +117,13 @@ export function getFormattedToolInput(msg) {
 
     if (name === 'Glob' && obj.pattern) {
       let html = '<code class="tool-input-cmd">' + esc(obj.pattern) + '</code>';
-      if (obj.path) html += '  <span class="tool-input-meta">in ' + esc(obj.path) + '</span>';
+      if (obj.path) html += '  <span class="tool-input-meta">' + (t ? t('tool.inPath', { path: esc(obj.path) }) : 'in ' + esc(obj.path)) + '</span>';
       return html;
     }
 
     if (name === 'Grep' && obj.pattern) {
       let html = '<code class="tool-input-cmd">' + esc(obj.pattern) + '</code>';
-      if (obj.path) html += '  <span class="tool-input-meta">in ' + esc(obj.path) + '</span>';
+      if (obj.path) html += '  <span class="tool-input-meta">' + (t ? t('tool.inPath', { path: esc(obj.path) }) : 'in ' + esc(obj.path)) + '</span>';
       return html;
     }
 
@@ -139,10 +143,13 @@ export function getFormattedToolInput(msg) {
 
     if (name === 'Task' || name === 'Agent') {
       let html = '';
-      if (obj.description) html += '<div class="task-field"><span class="tool-input-meta">Description</span> ' + esc(obj.description) + '</div>';
-      if (obj.subagent_type) html += '<div class="task-field"><span class="tool-input-meta">Agent</span> <code class="tool-input-cmd">' + esc(obj.subagent_type) + '</code></div>';
+      const descLabel = t ? t('tool.description') : 'Description';
+      const agentLabel = t ? t('tool.agent') : 'Agent';
+      const promptLabel = t ? t('tool.prompt') : 'Prompt';
+      if (obj.description) html += '<div class="task-field"><span class="tool-input-meta">' + descLabel + '</span> ' + esc(obj.description) + '</div>';
+      if (obj.subagent_type) html += '<div class="task-field"><span class="tool-input-meta">' + agentLabel + '</span> <code class="tool-input-cmd">' + esc(obj.subagent_type) + '</code></div>';
       if (obj.prompt) {
-        html += '<div class="task-field"><span class="tool-input-meta">Prompt</span></div><div class="task-prompt">' + esc(obj.prompt) + '</div>';
+        html += '<div class="task-field"><span class="tool-input-meta">' + promptLabel + '</span></div><div class="task-prompt">' + esc(obj.prompt) + '</div>';
       }
       if (html) return html;
     }
@@ -161,7 +168,7 @@ export function getFormattedToolInput(msg) {
   return null;
 }
 
-export function getEditDiffHtml(msg) {
+export function getEditDiffHtml(msg, t) {
   try {
     const obj = JSON.parse(msg.toolInput);
     if (!obj.old_string && !obj.new_string) return null;
@@ -171,7 +178,7 @@ export function getEditDiffHtml(msg) {
     const newLines = (obj.new_string || '').split('\n');
     let html = '';
     if (filePath) {
-      html += '<div class="diff-file">' + esc(filePath) + (obj.replace_all ? ' <span class="diff-replace-all">(replace all)</span>' : '') + '</div>';
+      html += '<div class="diff-file">' + esc(filePath) + (obj.replace_all ? ' <span class="diff-replace-all">' + (t ? t('tool.replaceAll') : '(replace all)') + '</span>' : '') + '</div>';
     }
     html += '<div class="diff-lines">';
     for (const line of oldLines) {

package/web/modules/sidebar.js

@@ -35,6 +35,8 @@ export function createSidebar(deps) {
     // Multi-session parallel
     currentConversationId, conversationCache, processingConversations,
     switchConversation,
+    // i18n
+    t,
   } = deps;
 
   // Late-binding callback: called when user switches to a normal chat session
@@ -130,7 +132,7 @@ export function createSidebar(deps) {
       switchConversation(newConvId);
       messages.value.push({
         id: streaming.nextId(), role: 'system',
-        content: 'New conversation started.',
+        content: t('system.newConversation'),
         timestamp: new Date(),
       });
       return;
@@ -365,18 +367,25 @@ export function createSidebar(deps) {
     const yesterdayStart = todayStart - 86400000;
     const weekStart = todayStart - 6 * 86400000;
 
+    const GROUP_KEYS = {
+      today: 'session.today',
+      yesterday: 'session.yesterday',
+      thisWeek: 'session.thisWeek',
+      earlier: 'session.earlier',
+    };
+
     const groups = {};
     for (const s of historySessions.value) {
-      let label;
-      if (s.lastModified >= todayStart) label = 'Today';
-      else if (s.lastModified >= yesterdayStart) label = 'Yesterday';
-      else if (s.lastModified >= weekStart) label = 'This week';
-      else label = 'Earlier';
-      if (!groups[label]) groups[label] = [];
-      groups[label].push(s);
+      let key;
+      if (s.lastModified >= todayStart) key = 'today';
+      else if (s.lastModified >= yesterdayStart) key = 'yesterday';
+      else if (s.lastModified >= weekStart) key = 'thisWeek';
+      else key = 'earlier';
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(s);
     }
-    const order = ['Today', 'Yesterday', 'This week', 'Earlier'];
-    return order.filter(k => groups[k]).map(k => ({ label: k, sessions: groups[k] }));
+    const order = ['today', 'yesterday', 'thisWeek', 'earlier'];
+    return order.filter(k => groups[k]).map(k => ({ label: t(GROUP_KEYS[k]), sessions: groups[k] }));
   });
 
   return {