@agent-link/server 0.1.27 → 0.1.29

package/web/modules/messageHelpers.js

@@ -0,0 +1,185 @@
+// ── Message helpers: formatting, tool summaries, diff display ─────────────────
+import { renderMarkdown } from './markdown.js';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+const CONTEXT_SUMMARY_PREFIX = 'This session is being continued from a previous conversation';
+
+export function isContextSummary(text) {
+  return typeof text === 'string' && text.trimStart().startsWith(CONTEXT_SUMMARY_PREFIX);
+}
+
+export function formatRelativeTime(ts) {
+  const diff = Date.now() - ts;
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+export function formatTimestamp(ts) {
+  if (!ts) return '';
+  const d = ts instanceof Date ? ts : new Date(ts);
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' · ' + d.toLocaleDateString();
+}
+
+export function getRenderedContent(msg) {
+  if (msg.role !== 'assistant' && !msg.isCommandOutput) return msg.content;
+  return renderMarkdown(msg.content);
+}
+
+export async function copyMessage(msg) {
+  try {
+    await navigator.clipboard.writeText(msg.content);
+    msg.copied = true;
+    setTimeout(() => { msg.copied = false; }, 2000);
+  } catch {}
+}
+
+export function isPrevAssistant(visibleMessages, idx) {
+  if (idx <= 0) return false;
+  const prev = visibleMessages[idx - 1];
+  return prev && (prev.role === 'assistant' || prev.role === 'tool');
+}
+
+export function toggleContextSummary(msg) {
+  msg.contextExpanded = !msg.contextExpanded;
+}
+
+export function toggleTool(msg) {
+  msg.expanded = !msg.expanded;
+}
+
+export function getToolSummary(msg) {
+  const name = msg.toolName;
+  const input = msg.toolInput;
+  try {
+    const obj = JSON.parse(input);
+    if (name === 'Read' && obj.file_path) return obj.file_path;
+    if (name === 'Edit' && obj.file_path) return obj.file_path;
+    if (name === 'Write' && obj.file_path) return obj.file_path;
+    if (name === 'Bash' && obj.command) return obj.command.length > 60 ? obj.command.slice(0, 60) + '...' : obj.command;
+    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`;
+    }
+    if (name === 'Task' && obj.description) return obj.description;
+    if (name === 'WebSearch' && obj.query) return obj.query;
+    if (name === 'WebFetch' && obj.url) return obj.url.length > 60 ? obj.url.slice(0, 60) + '...' : obj.url;
+  } catch {}
+  return '';
+}
+
+export function isEditTool(msg) {
+  return msg.role === 'tool' && msg.toolName === 'Edit' && msg.toolInput;
+}
+
+export function getFormattedToolInput(msg) {
+  if (!msg.toolInput) return null;
+  try {
+    const obj = JSON.parse(msg.toolInput);
+    const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    const name = msg.toolName;
+
+    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>`;
+      } else if (obj.offset) {
+        detail += `  <span class="tool-input-meta">from line ${obj.offset}</span>`;
+      } else if (obj.limit) {
+        detail += `  <span class="tool-input-meta">first ${obj.limit} lines</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>`;
+    }
+
+    if (name === 'Bash' && obj.command) {
+      let html = '<code class="tool-input-cmd">' + esc(obj.command) + '</code>';
+      if (obj.description) html = '<span class="tool-input-meta">' + esc(obj.description) + '</span> ' + html;
+      return html;
+    }
+
+    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>';
+      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>';
+      return html;
+    }
+
+    if (name === 'TodoWrite' && Array.isArray(obj.todos)) {
+      let html = '<div class="todo-list">';
+      for (const t of obj.todos) {
+        const s = t.status;
+        const icon = s === 'completed' ? '<span class="todo-icon done">\u2713</span>'
+          : s === 'in_progress' ? '<span class="todo-icon active">\u25CF</span>'
+          : '<span class="todo-icon">\u25CB</span>';
+        const cls = s === 'completed' ? ' todo-done' : s === 'in_progress' ? ' todo-active' : '';
+        html += '<div class="todo-item' + cls + '">' + icon + '<span class="todo-text">' + esc(t.content || t.activeForm || '') + '</span></div>';
+      }
+      html += '</div>';
+      return html;
+    }
+
+    if (name === 'Task') {
+      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>';
+      if (obj.prompt) {
+        const short = obj.prompt.length > 200 ? obj.prompt.slice(0, 200) + '...' : obj.prompt;
+        html += '<div class="task-field"><span class="tool-input-meta">Prompt</span></div><div class="task-prompt">' + esc(short) + '</div>';
+      }
+      if (html) return html;
+    }
+
+    if (name === 'WebSearch' && obj.query) {
+      return '<code class="tool-input-cmd">' + esc(obj.query) + '</code>';
+    }
+
+    if (name === 'WebFetch' && obj.url) {
+      let html = '<a class="tool-link" href="' + esc(obj.url) + '" target="_blank" rel="noopener">' + esc(obj.url) + '</a>';
+      if (obj.prompt) html += '<div class="task-field"><span class="tool-input-meta">' + esc(obj.prompt) + '</span></div>';
+      return html;
+    }
+
+  } catch {}
+  return null;
+}
+
+export function getEditDiffHtml(msg) {
+  try {
+    const obj = JSON.parse(msg.toolInput);
+    if (!obj.old_string && !obj.new_string) return null;
+    const esc = s => s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    const filePath = obj.file_path || '';
+    const oldLines = (obj.old_string || '').split('\n');
+    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-lines">';
+    for (const line of oldLines) {
+      html += '<div class="diff-removed">' + '<span class="diff-sign">-</span>' + esc(line) + '</div>';
+    }
+    for (const line of newLines) {
+      html += '<div class="diff-added">' + '<span class="diff-sign">+</span>' + esc(line) + '</div>';
+    }
+    html += '</div>';
+    return html;
+  } catch { return null; }
+}

package/web/modules/sidebar.js

@@ -0,0 +1,186 @@
+// ── Sidebar: session management, folder picker, grouped sessions ─────────────
+const { computed } = Vue;
+
+/**
+ * Creates sidebar functionality bound to reactive state.
+ * @param {object} deps
+ * @param {Function} deps.wsSend
+ * @param {import('vue').Ref} deps.messages
+ * @param {import('vue').Ref} deps.isProcessing
+ * @param {import('vue').Ref} deps.sidebarOpen
+ * @param {import('vue').Ref} deps.historySessions
+ * @param {import('vue').Ref} deps.currentClaudeSessionId
+ * @param {import('vue').Ref} deps.needsResume
+ * @param {import('vue').Ref} deps.loadingSessions
+ * @param {import('vue').Ref} deps.loadingHistory
+ * @param {import('vue').Ref} deps.workDir
+ * @param {import('vue').Ref} deps.visibleLimit
+ * @param {import('vue').Ref} deps.folderPickerOpen
+ * @param {import('vue').Ref} deps.folderPickerPath
+ * @param {import('vue').Ref} deps.folderPickerEntries
+ * @param {import('vue').Ref} deps.folderPickerLoading
+ * @param {import('vue').Ref} deps.folderPickerSelected
+ * @param {object} deps.streaming - streaming controller
+ */
+export function createSidebar(deps) {
+  const {
+    wsSend, messages, isProcessing, sidebarOpen,
+    historySessions, currentClaudeSessionId, needsResume,
+    loadingSessions, loadingHistory, workDir, visibleLimit,
+    folderPickerOpen, folderPickerPath, folderPickerEntries,
+    folderPickerLoading, folderPickerSelected, streaming,
+  } = deps;
+
+  // ── Session management ──
+
+  function requestSessionList() {
+    loadingSessions.value = true;
+    wsSend({ type: 'list_sessions' });
+  }
+
+  function resumeSession(session) {
+    if (isProcessing.value) return;
+    if (window.innerWidth <= 768) sidebarOpen.value = false;
+    messages.value = [];
+    visibleLimit.value = 50;
+    streaming.setMessageIdCounter(0);
+    streaming.setStreamingMessageId(null);
+    streaming.reset();
+
+    currentClaudeSessionId.value = session.sessionId;
+    needsResume.value = true;
+    loadingHistory.value = true;
+
+    wsSend({
+      type: 'resume_conversation',
+      claudeSessionId: session.sessionId,
+    });
+  }
+
+  function newConversation() {
+    if (isProcessing.value) return;
+    if (window.innerWidth <= 768) sidebarOpen.value = false;
+    messages.value = [];
+    visibleLimit.value = 50;
+    streaming.setMessageIdCounter(0);
+    streaming.setStreamingMessageId(null);
+    streaming.reset();
+    currentClaudeSessionId.value = null;
+    needsResume.value = false;
+
+    messages.value.push({
+      id: streaming.nextId(), role: 'system',
+      content: 'New conversation started.',
+      timestamp: new Date(),
+    });
+  }
+
+  function toggleSidebar() {
+    sidebarOpen.value = !sidebarOpen.value;
+  }
+
+  // ── Folder picker ──
+
+  function openFolderPicker() {
+    folderPickerOpen.value = true;
+    folderPickerSelected.value = '';
+    folderPickerLoading.value = true;
+    folderPickerPath.value = workDir.value || '';
+    folderPickerEntries.value = [];
+    wsSend({ type: 'list_directory', dirPath: workDir.value || '' });
+  }
+
+  function loadFolderPickerDir(dirPath) {
+    folderPickerLoading.value = true;
+    folderPickerSelected.value = '';
+    folderPickerEntries.value = [];
+    wsSend({ type: 'list_directory', dirPath });
+  }
+
+  function folderPickerNavigateUp() {
+    if (!folderPickerPath.value) return;
+    const isWin = folderPickerPath.value.includes('\\');
+    const parts = folderPickerPath.value.replace(/[/\\]$/, '').split(/[/\\]/);
+    parts.pop();
+    if (parts.length === 0) {
+      folderPickerPath.value = '';
+      loadFolderPickerDir('');
+    } else if (isWin && parts.length === 1 && /^[A-Za-z]:$/.test(parts[0])) {
+      folderPickerPath.value = parts[0] + '\\';
+      loadFolderPickerDir(parts[0] + '\\');
+    } else {
+      const sep = isWin ? '\\' : '/';
+      const parent = parts.join(sep);
+      folderPickerPath.value = parent;
+      loadFolderPickerDir(parent);
+    }
+  }
+
+  function folderPickerSelectItem(entry) {
+    folderPickerSelected.value = entry.name;
+  }
+
+  function folderPickerEnter(entry) {
+    const sep = folderPickerPath.value.includes('\\') || /^[A-Z]:/.test(entry.name) ? '\\' : '/';
+    let newPath;
+    if (!folderPickerPath.value) {
+      newPath = entry.name + (entry.name.endsWith('\\') ? '' : '\\');
+    } else {
+      newPath = folderPickerPath.value.replace(/[/\\]$/, '') + sep + entry.name;
+    }
+    folderPickerPath.value = newPath;
+    folderPickerSelected.value = '';
+    loadFolderPickerDir(newPath);
+  }
+
+  function folderPickerGoToPath() {
+    const path = folderPickerPath.value.trim();
+    if (!path) {
+      loadFolderPickerDir('');
+      return;
+    }
+    folderPickerSelected.value = '';
+    loadFolderPickerDir(path);
+  }
+
+  function confirmFolderPicker() {
+    let path = folderPickerPath.value;
+    if (!path) return;
+    if (folderPickerSelected.value) {
+      const sep = path.includes('\\') ? '\\' : '/';
+      path = path.replace(/[/\\]$/, '') + sep + folderPickerSelected.value;
+    }
+    folderPickerOpen.value = false;
+    wsSend({ type: 'change_workdir', workDir: path });
+  }
+
+  // ── Grouped sessions ──
+
+  const groupedSessions = computed(() => {
+    if (!historySessions.value.length) return [];
+    const now = new Date();
+    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    const yesterdayStart = todayStart - 86400000;
+    const weekStart = todayStart - 6 * 86400000;
+
+    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);
+    }
+    const order = ['Today', 'Yesterday', 'This week', 'Earlier'];
+    return order.filter(k => groups[k]).map(k => ({ label: k, sessions: groups[k] }));
+  });
+
+  return {
+    requestSessionList, resumeSession, newConversation, toggleSidebar,
+    openFolderPicker, folderPickerNavigateUp, folderPickerSelectItem,
+    folderPickerEnter, folderPickerGoToPath, confirmFolderPicker,
+    groupedSessions,
+  };
+}

package/web/modules/streaming.js

@@ -0,0 +1,93 @@
+// ── Progressive text streaming / reveal animation ────────────────────────────
+
+const CHARS_PER_TICK = 5;
+const TICK_MS = 16;
+
+/**
+ * Creates a streaming text reveal controller.
+ * @param {object} deps
+ * @param {import('vue').Ref} deps.messages - messages ref array
+ * @param {() => void} deps.scrollToBottom - scroll callback
+ */
+export function createStreaming({ messages, scrollToBottom }) {
+  let pendingText = '';
+  let revealTimer = null;
+  let streamingMessageId = null;
+  let messageIdCounter = 0;
+
+  function getMessageIdCounter() { return messageIdCounter; }
+  function setMessageIdCounter(v) { messageIdCounter = v; }
+  function getStreamingMessageId() { return streamingMessageId; }
+  function setStreamingMessageId(v) { streamingMessageId = v; }
+  function nextId() { return ++messageIdCounter; }
+
+  function startReveal() {
+    if (revealTimer !== null) return;
+    revealTimer = setTimeout(revealTick, TICK_MS);
+  }
+
+  function revealTick() {
+    revealTimer = null;
+    if (!pendingText) return;
+
+    const streamMsg = streamingMessageId !== null
+      ? messages.value.find(m => m.id === streamingMessageId)
+      : null;
+
+    if (!streamMsg) {
+      const id = ++messageIdCounter;
+      const chunk = pendingText.slice(0, CHARS_PER_TICK);
+      pendingText = pendingText.slice(CHARS_PER_TICK);
+      messages.value.push({
+        id, role: 'assistant', content: chunk,
+        isStreaming: true, timestamp: new Date(),
+      });
+      streamingMessageId = id;
+    } else {
+      const chunk = pendingText.slice(0, CHARS_PER_TICK);
+      pendingText = pendingText.slice(CHARS_PER_TICK);
+      streamMsg.content += chunk;
+    }
+    scrollToBottom();
+    if (pendingText) revealTimer = setTimeout(revealTick, TICK_MS);
+  }
+
+  function flushReveal() {
+    if (revealTimer !== null) { clearTimeout(revealTimer); revealTimer = null; }
+    if (!pendingText) return;
+    const streamMsg = streamingMessageId !== null
+      ? messages.value.find(m => m.id === streamingMessageId) : null;
+    if (streamMsg) {
+      streamMsg.content += pendingText;
+    } else {
+      const id = ++messageIdCounter;
+      messages.value.push({
+        id, role: 'assistant', content: pendingText,
+        isStreaming: true, timestamp: new Date(),
+      });
+      streamingMessageId = id;
+    }
+    pendingText = '';
+    scrollToBottom();
+  }
+
+  function appendPending(text) {
+    pendingText += text;
+  }
+
+  function reset() {
+    pendingText = '';
+    if (revealTimer !== null) { clearTimeout(revealTimer); revealTimer = null; }
+  }
+
+  function cleanup() {
+    if (revealTimer !== null) { clearTimeout(revealTimer); revealTimer = null; }
+  }
+
+  return {
+    startReveal, flushReveal, appendPending, reset, cleanup,
+    getMessageIdCounter, setMessageIdCounter,
+    getStreamingMessageId, setStreamingMessageId,
+    nextId,
+  };
+}

package/web/style.css

@@ -6,6 +6,16 @@
   padding: 0;
 }
 
+/* Keyboard focus outlines (visible only for keyboard navigation) */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
 :root {
   --bg-primary: #0f172a;
   --bg-secondary: #1e293b;
@@ -29,7 +39,7 @@
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #e9ecef;
   --text-primary: #1a1a1a;
-  --text-secondary: #6b7280;
+  --text-secondary: #4b5563;
   --accent: #2563eb;
   --accent-hover: #1d4ed8;
   --success: #16a34a;
@@ -753,6 +763,13 @@ body {
   margin-left: 20px;
   border-left: 1px solid var(--border);
   padding-left: 8px;
+  overflow: hidden;
+  animation: toolExpand 0.15s ease-out;
+}
+
+@keyframes toolExpand {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 500px; }
 }
 
 .tool-block {