@agent-link/server 0.1.160 → 0.1.162

package/web/modules/connection.js

@@ -25,6 +25,8 @@ export function createConnection(deps) {
     // Multi-session parallel
     currentConversationId, processingConversations, conversationCache,
     switchConversation,
+    // i18n
+    t,
   } = deps;
 
   // Dequeue callback — set after creation to resolve circular dependency
@@ -163,7 +165,7 @@ export function createConnection(deps) {
     const sid = getSessionId();
     if (!sid) {
       status.value = 'No Session';
-      error.value = 'No session ID in URL. Use a session URL provided by agentlink start.';
+      error.value = t('error.noSessionId');
       return;
     }
     sessionId.value = sid;
@@ -194,9 +196,9 @@ export function createConnection(deps) {
         return;
       }
       if (parsed.type === 'auth_failed') {
-        authError.value = parsed.message || 'Incorrect password.';
+        authError.value = parsed.message || t('error.incorrectPassword');
         authAttempts.value = parsed.attemptsRemaining != null
-          ? `${parsed.attemptsRemaining} attempt${parsed.attemptsRemaining !== 1 ? 's' : ''} remaining`
+          ? t('error.attemptsRemaining', { n: parsed.attemptsRemaining })
           : null;
         authPassword.value = '';
         return;
@@ -204,7 +206,7 @@ export function createConnection(deps) {
       if (parsed.type === 'auth_locked') {
         authLocked.value = true;
         authRequired.value = false;
-        authError.value = parsed.message || 'Too many failed attempts.';
+        authError.value = parsed.message || t('error.tooManyAttempts');
         status.value = 'Locked';
         return;
       }
@@ -283,7 +285,7 @@ export function createConnection(deps) {
           wsSend({ type: 'query_active_conversations' });
         } else {
           status.value = 'Waiting';
-          error.value = 'Agent is not connected yet.';
+          error.value = t('error.agentNotConnected');
         }
       } else if (msg.type === 'pong') {
         if (typeof msg.ts === 'number') {
@@ -294,7 +296,7 @@ export function createConnection(deps) {
         status.value = 'Waiting';
         agentName.value = '';
         hostname.value = '';
-        error.value = 'Agent disconnected. Waiting for reconnect...';
+        error.value = t('error.agentDisconnected');
         isProcessing.value = false;
         isCompacting.value = false;
         queuedMessages.value = [];
@@ -423,7 +425,7 @@ export function createConnection(deps) {
           isCompacting.value = true;
           messages.value.push({
             id: streaming.nextId(), role: 'system',
-            content: 'Context compacting...', isCompactStart: true,
+            content: t('system.contextCompacting'), isCompactStart: true,
             timestamp: new Date(),
           });
           scrollToBottom();
@@ -432,7 +434,7 @@ export function createConnection(deps) {
           // Update the start message to show completed
           const startMsg = [...messages.value].reverse().find(m => m.isCompactStart && !m.compactDone);
           if (startMsg) {
-            startMsg.content = 'Context compacted';
+            startMsg.content = t('system.contextCompacted');
             startMsg.compactDone = true;
           }
           scrollToBottom();
@@ -451,7 +453,7 @@ export function createConnection(deps) {
           needsResume.value = true;
           messages.value.push({
             id: streaming.nextId(), role: 'system',
-            content: 'Generation stopped.', timestamp: new Date(),
+            content: t('system.generationStopped'), timestamp: new Date(),
           });
           scrollToBottom();
         }
@@ -507,20 +509,20 @@ export function createConnection(deps) {
           isProcessing.value = true;
           messages.value.push({
             id: streaming.nextId(), role: 'system',
-            content: 'Context compacting...', isCompactStart: true,
+            content: t('system.contextCompacting'), isCompactStart: true,
             timestamp: new Date(),
           });
         } else if (msg.isProcessing) {
           isProcessing.value = true;
           messages.value.push({
             id: streaming.nextId(), role: 'system',
-            content: 'Agent is processing...',
+            content: t('system.agentProcessing'),
             timestamp: new Date(),
           });
         } else {
           messages.value.push({
             id: streaming.nextId(), role: 'system',
-            content: 'Session restored. You can continue the conversation.',
+            content: t('system.sessionRestored'),
             timestamp: new Date(),
           });
         }
@@ -564,7 +566,7 @@ export function createConnection(deps) {
         }
         messages.value.push({
           id: streaming.nextId(), role: 'system',
-          content: 'Working directory changed to: ' + msg.workDir,
+          content: t('system.workdirChanged', { dir: msg.workDir }),
           timestamp: new Date(),
         });
         // Clear old history immediately so UI doesn't show stale data
@@ -601,13 +603,13 @@ export function createConnection(deps) {
   function scheduleReconnect(scheduleHighlight) {
     if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
       status.value = 'Disconnected';
-      error.value = 'Unable to reconnect. Please refresh the page.';
+      error.value = t('error.unableToReconnect');
       return;
     }
     const delay = Math.min(RECONNECT_BASE_DELAY * Math.pow(1.5, reconnectAttempts), RECONNECT_MAX_DELAY);
     reconnectAttempts++;
     status.value = 'Reconnecting...';
-    error.value = 'Connection lost. Reconnecting... (attempt ' + reconnectAttempts + ')';
+    error.value = t('error.connectionLost', { n: reconnectAttempts });
     if (reconnectTimer) clearTimeout(reconnectTimer);
     reconnectTimer = setTimeout(() => { reconnectTimer = null; connect(scheduleHighlight); }, delay);
   }

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 {