claude-remote 0.5.2 → 0.6.1

package/web/modules/sessions.js

@@ -0,0 +1,108 @@
+// ============================================================
+//  Session Drawer
+// ============================================================
+import { $, esc, trunc } from './utils.js';
+import { S } from './state.js';
+import { showConfirm } from './confirm.js';
+
+export let sessionListCache = [];
+
+function getSessionTitle(session) {
+  return session.customTitle || session.summary || session.firstPrompt || 'Untitled';
+}
+
+function getSessionModifiedMs(session) {
+  const value = session.lastModified ?? session.modified ?? null;
+  if (!value) return 0;
+  if (typeof value === 'number') return value;
+  const numeric = Number(value);
+  if (Number.isFinite(numeric)) return numeric;
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export function getSessionCwd(session) {
+  return session.projectPath || session.cwd || '';
+}
+
+function formatRelativeTime(session) {
+  const ts = getSessionModifiedMs(session);
+  if (!ts) return '';
+  const diff = Math.max(0, 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 < 7) return `${days}d ago`;
+  const d = new Date(ts);
+  return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+function openSessionDrawer() {
+  $('session-overlay').classList.add('visible');
+  requestSessionList();
+}
+
+function closeSessionDrawer() {
+  $('session-overlay').classList.remove('visible');
+}
+
+function requestSessionList() {
+  if (S.ws && S.ws.readyState === WebSocket.OPEN) {
+    $('session-list').innerHTML = '<div class="drawer-loading">Loading...</div>';
+    S.ws.send(JSON.stringify({ type: 'list_sessions' }));
+  }
+}
+
+export function renderSessionList(sessions) {
+  sessionListCache = sessions;
+  const $list = $('session-list');
+  $list.innerHTML = '';
+  if (!sessions.length) {
+    $list.innerHTML = '<div class="drawer-loading">No sessions found</div>';
+    return;
+  }
+  for (const s of sessions) {
+    const isActive = s.sessionId === S.sessionId;
+    const el = document.createElement('div');
+    el.className = 'session-item' + (isActive ? ' active' : '');
+    el.innerHTML =
+      `<div class="session-summary">${esc(getSessionTitle(s))}</div>` +
+      `<div class="session-meta">` +
+        `<span>${formatRelativeTime(s)}</span>` +
+        (s.gitBranch ? `<span class="session-branch">${esc(s.gitBranch)}</span>` : '') +
+      `</div>`;
+    if (!isActive) {
+      el.addEventListener('click', () => confirmSwitchSession(s));
+    }
+    $list.appendChild(el);
+  }
+}
+
+async function confirmSwitchSession(session) {
+  const label = trunc(getSessionTitle(session), 40);
+  const ok = await showConfirm(`切换到会话 "${label}"？\n当前对话进度不会丢失。`);
+  if (!ok) return;
+  closeSessionDrawer();
+  if (S.ws && S.ws.readyState === WebSocket.OPEN) {
+    S.ws.send(JSON.stringify({ type: 'switch_session', sessionId: session.sessionId }));
+  }
+}
+
+export function initSessions() {
+  $('btn-sessions').addEventListener('click', openSessionDrawer);
+  $('session-drawer-close').addEventListener('click', closeSessionDrawer);
+  $('session-overlay').addEventListener('click', e => {
+    if (e.target === $('session-overlay')) closeSessionDrawer();
+  });
+  $('btn-new-session').addEventListener('click', async () => {
+    const ok = await showConfirm('新建会话？当前对话进度不会丢失。');
+    if (!ok) return;
+    closeSessionDrawer();
+    if (S.ws && S.ws.readyState === WebSocket.OPEN) {
+      S.ws.send(JSON.stringify({ type: 'chat', text: '/clear' }));
+    }
+  });
+}

package/web/modules/settings.js

@@ -0,0 +1,101 @@
+// ============================================================
+//  Settings
+// ============================================================
+import { $ } from './utils.js';
+import { S, approvalMode, setApprovalModeValue, themeMode, setThemeModeValue } from './state.js';
+import { showConfirm } from './confirm.js';
+import { updateSettingsCwd } from './dir-picker.js';
+
+function updateApprovalActive() {
+  document.querySelectorAll('#approval-options .settings-opt').forEach(el => {
+    el.classList.toggle('active', el.dataset.mode === approvalMode);
+  });
+}
+
+function updateThemeActive() {
+  document.querySelectorAll('#theme-options .settings-opt').forEach(el => {
+    el.classList.toggle('active', el.dataset.themeMode === themeMode);
+  });
+}
+
+function setApprovalMode(mode) {
+  setApprovalModeValue(mode);
+  localStorage.setItem('approvalMode', mode);
+  updateApprovalActive();
+  if (S.ws && S.ws.readyState === WebSocket.OPEN) {
+    S.ws.send(JSON.stringify({ type: 'set_approval_mode', mode }));
+  }
+}
+
+function applyTheme(mode) {
+  setThemeModeValue(mode);
+  localStorage.setItem('theme', mode);
+  if (mode === 'light' || mode === 'dark') {
+    document.documentElement.setAttribute('data-theme', mode);
+  } else {
+    document.documentElement.removeAttribute('data-theme');
+  }
+  updateThemeActive();
+}
+
+export function initSettingsValues() {
+  const approvalRadio = document.querySelector(`input[name="approval-mode"][value="${approvalMode}"]`);
+  if (approvalRadio) approvalRadio.checked = true;
+  updateApprovalActive();
+
+  const themeRadio = document.querySelector(`input[name="theme-mode"][value="${themeMode}"]`);
+  if (themeRadio) themeRadio.checked = true;
+  updateThemeActive();
+}
+
+function openSettings() {
+  initSettingsValues();
+  updateSettingsCwd();
+  $('settings-overlay').classList.add('visible');
+}
+
+function closeSettings() {
+  $('settings-overlay').classList.remove('visible');
+}
+
+export { closeSettings };
+
+export function initSettings() {
+  $('btn-settings').addEventListener('click', openSettings);
+  $('settings-close').addEventListener('click', closeSettings);
+  $('settings-overlay').addEventListener('click', e => {
+    if (e.target === $('settings-overlay')) closeSettings();
+  });
+
+  document.querySelectorAll('input[name="approval-mode"]').forEach(radio => {
+    radio.addEventListener('change', async (e) => {
+      const mode = e.target.value;
+      if (mode === 'all') {
+        const ok = await showConfirm(
+          '全部自动审批将允许所有命令（包括 Bash、系统命令）无需确认直接执行，这可能存在风险。确定要开启吗？'
+        );
+        if (!ok) {
+          const prev = document.querySelector(`input[name="approval-mode"][value="${approvalMode}"]`);
+          if (prev) prev.checked = true;
+          return;
+        }
+      } else if (mode === 'partial') {
+        const ok = await showConfirm(
+          '部分自动审批将自动放行 Read、Write、Edit、Glob、Grep 命令，无需手动确认。确定要开启吗？'
+        );
+        if (!ok) {
+          const prev = document.querySelector(`input[name="approval-mode"][value="${approvalMode}"]`);
+          if (prev) prev.checked = true;
+          return;
+        }
+      }
+      setApprovalMode(mode);
+    });
+  });
+
+  document.querySelectorAll('input[name="theme-mode"]').forEach(radio => {
+    radio.addEventListener('change', (e) => {
+      applyTheme(e.target.value);
+    });
+  });
+}

package/web/modules/state.js

@@ -0,0 +1,61 @@
+// ============================================================
+//  App State
+// ============================================================
+
+export const S = {
+  ws: null,
+  authenticated: false,
+  sessionId: '',
+  lastSeq: 0,
+  lastMessageAt: 0,
+  seenUuids: new Set(),
+  messageMap: new Map(),
+  toolMap: new Map(),
+  currentGroup: null,
+  currentGroupCount: 0,
+  isAtBottom: true,
+  waiting: false,
+  workingEl: null,
+  cwd: '',
+  model: '',
+  pendingPerms: [],
+  waitStartedAt: 0,
+  replaying: true,
+  turnStateVersion: 0,
+  pendingTurnState: null,
+  pendingPlanContent: '',
+  reconnectTimer: null,
+  intentionalDisconnect: false,
+  skipNextCloseHandling: false,
+  resumeRequestedFor: '',
+  cacheSaveTimer: null,
+  sessionSyncToken: 0,
+  uploadWaiters: new Map(),
+  foregroundProbeSeq: 0,
+  foregroundProbeId: '',
+  foregroundProbeTimer: null,
+  lastForegroundRecoverAt: 0,
+};
+
+export const dirBrowserState = {
+  cwd: '',
+  parent: null,
+  roots: [],
+  entries: [],
+};
+
+export let serverAddr = '';
+export let serverWsUrl = '';
+export let serverCacheAddr = '';
+export let serverToken = '';
+export let pendingImage = null;
+export let approvalMode = localStorage.getItem('approvalMode') || 'default';
+export let themeMode = localStorage.getItem('theme') || 'system';
+
+export function setServerAddr(v) { serverAddr = v; }
+export function setServerWsUrl(v) { serverWsUrl = v; }
+export function setServerCacheAddr(v) { serverCacheAddr = v; }
+export function setServerToken(v) { serverToken = v; }
+export function setPendingImage(v) { pendingImage = v; }
+export function setApprovalModeValue(v) { approvalMode = v; }
+export function setThemeModeValue(v) { themeMode = v; }

package/web/modules/toast.js

@@ -0,0 +1,68 @@
+// ============================================================
+//  Toast Messages
+// ============================================================
+import { $ } from './utils.js';
+
+function localizeToastText(text) {
+  const raw = String(text || '').trim();
+  if (!raw) return '';
+  if (/[\u4e00-\u9fff]/.test(raw)) return raw;
+
+  const directMap = new Map([
+    ['Server not found', '未找到服务器记录'],
+    ['Invalid server address', '服务器地址无效'],
+    ['Clearing conversation...', '正在清空当前对话…'],
+    ['Fetching token costs...', '正在获取 Token 费用信息…'],
+    ['Loading help...', '正在加载帮助信息…'],
+    ['Please select an image file', '请选择图片文件'],
+    ['Image too large (max 4MB)', '图片过大\n最大支持 4MB'],
+    ['Connection unavailable', '连接不可用\n请先确认已连接到服务器'],
+    ['Image upload failed', '图片上传失败'],
+    ['Image upload failed. Re-select the image and try again.', '图片上传失败\n请重新选择图片后再试'],
+    ['Image submit failed', '图片发送失败'],
+    ['Failed to change folder', '切换文件夹失败'],
+    ['Connection lost', '连接已断开'],
+    ['Handshake timed out - check client/server compatibility and try again', '连接握手超时\n请检查客户端与服务端版本是否兼容'],
+    ['Linux image paste requires xclip or wl-copy on the server. Install one and try again.', '服务端缺少图片剪贴板工具\n请安装 xclip 或 wl-copy 后重试'],
+    ['Upload not ready', '图片尚未上传完成\n请稍后再试'],
+    ['Upload session not found', '上传会话不存在\n请重新选择图片'],
+    ['Upload owner mismatch', '上传会话无效\n请重新选择图片'],
+    ['Missing uploadId', '上传请求无效\n请重新选择图片'],
+    ['Missing chunk payload', '图片分片数据缺失\n请重新上传'],
+  ]);
+
+  if (directMap.has(raw)) return directMap.get(raw);
+  if (raw.startsWith('Linux image paste requires a graphical session.')) {
+    return 'Linux 服务端缺少图形会话环境变量\n请在 pm2/systemd 中设置 DISPLAY 或 WAYLAND_DISPLAY 后重试';
+  }
+  if (raw.startsWith('Now using ')) {
+    return `已切换模型\n${raw.slice('Now using '.length)}`;
+  }
+  if (raw.startsWith('Switching to ')) {
+    return `正在切换模型\n${raw.slice('Switching to '.length).replace(/\.\.\.$/, '')}`;
+  }
+  if (raw.startsWith('Authentication failed')) {
+    return '鉴权失败\n请检查 Token 是否正确';
+  }
+  if (raw.startsWith('Unexpected chunk index')) {
+    return '图片分片顺序异常\n请重新上传';
+  }
+  if (raw.startsWith('Upload incomplete')) {
+    return '图片上传不完整\n请重新上传';
+  }
+  if (raw.startsWith('Image upload failed:')) {
+    return `图片上传失败\n${raw.slice('Image upload failed:'.length).trim()}`;
+  }
+  return raw;
+}
+
+export function showToast(text) {
+  const message = localizeToastText(text);
+  if (!message) return;
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.setAttribute('role', 'alert');
+  el.textContent = message;
+  $('toast-container').appendChild(el);
+  setTimeout(() => el.remove(), 3600);
+}

package/web/modules/todo.js

@@ -0,0 +1,292 @@
+// ============================================================
+//  Todo Panel
+// ============================================================
+import { TODO_AUTO_CLEAR_DELAY_MS } from './constants.js';
+import { $, esc } from './utils.js';
+import { S } from './state.js';
+import { scrollEnd } from './waiting.js';
+import { scheduleSessionCacheSave } from './renderer.js';
+
+export const todoState = {
+  tasks: new Map(),
+  pendingCreates: new Map(),
+  panelOpen: false,
+  autoOpenedForBatch: false,
+  clearTimer: null,
+};
+
+export function cancelTodoAutoClear() {
+  if (!todoState.clearTimer) return;
+  clearTimeout(todoState.clearTimer);
+  todoState.clearTimer = null;
+}
+
+export function clearTodoBatch() {
+  cancelTodoAutoClear();
+  todoState.tasks.clear();
+  todoState.pendingCreates.clear();
+  todoState.panelOpen = false;
+  todoState.autoOpenedForBatch = false;
+  $('todo-panel').classList.remove('has-tasks', 'open');
+  $('todo-list').innerHTML = '';
+  $('todo-summary').textContent = '';
+  $('todo-progress-bar').style.width = '0%';
+  $('todo-progress-bar').classList.remove('all-done');
+  $('todo-badge').textContent = '0';
+  $('todo-badge').classList.remove('done');
+  scheduleSessionCacheSave();
+}
+
+function syncTodoPanelLifecycle(tasks) {
+  const hasTasks = tasks.length > 0;
+  const hasPendingCreates = todoState.pendingCreates.size > 0;
+  const hasOpenTasks = tasks.some(([, task]) => (task.status || 'pending') !== 'completed');
+
+  if (!hasTasks) {
+    cancelTodoAutoClear();
+    todoState.autoOpenedForBatch = false;
+    todoState.panelOpen = false;
+    return;
+  }
+
+  if (!todoState.autoOpenedForBatch) {
+    todoState.autoOpenedForBatch = true;
+    todoState.panelOpen = true;
+  }
+
+  if (hasOpenTasks || hasPendingCreates) {
+    cancelTodoAutoClear();
+    return;
+  }
+
+  if (!todoState.clearTimer) {
+    todoState.clearTimer = setTimeout(() => {
+      todoState.clearTimer = null;
+      const latestTasks = Array.from(todoState.tasks.values());
+      const latestHasPendingCreates = todoState.pendingCreates.size > 0;
+      const latestHasOpenTasks = latestTasks.some(task => (task.status || 'pending') !== 'completed');
+      if (!latestHasPendingCreates && latestTasks.length > 0 && !latestHasOpenTasks) {
+        clearTodoBatch();
+      }
+    }, TODO_AUTO_CLEAR_DELAY_MS);
+  }
+}
+
+export function handleTodoToolUse(b) {
+  const { name, id, input } = b;
+  if (name === 'TaskCreate') {
+    const hasOpenTasks = Array.from(todoState.tasks.values()).some(t => t.status !== 'completed');
+    if (todoState.tasks.size > 0 && !hasOpenTasks) {
+      clearTodoBatch();
+    }
+    todoState.pendingCreates.set(id, input);
+  } else if (name === 'TaskUpdate' && input.taskId) {
+    const task = todoState.tasks.get(input.taskId);
+    if (task) {
+      if (input.status) task.status = input.status;
+      if (input.subject) task.subject = input.subject;
+      if (input.description) task.description = input.description;
+      if (input.activeForm) task.activeForm = input.activeForm;
+      renderTodoPanel();
+    }
+  }
+}
+
+export function handleTodoToolResult(b, evt) {
+  const { tool_use_id, content } = b;
+  const text = typeof content === 'string' ? content :
+    Array.isArray(content) ? content.map(c => c.text || '').join('') : '';
+  const toolUseResult = (evt && typeof evt.toolUseResult === 'object' && evt.toolUseResult) ? evt.toolUseResult : null;
+
+  const createInput = todoState.pendingCreates.get(tool_use_id);
+  if (createInput) {
+    todoState.pendingCreates.delete(tool_use_id);
+    const metaTaskId = toolUseResult?.task?.id;
+    const m = text.match(/Task #(\d+) created/i);
+    const taskId = metaTaskId ? String(metaTaskId) : (m ? m[1] : '');
+    if (taskId) {
+      const metaSubject = toolUseResult?.task?.subject;
+      todoState.tasks.set(taskId, {
+        subject: metaSubject || createInput.subject || '',
+        description: createInput.description || '',
+        status: 'pending',
+        activeForm: createInput.activeForm || '',
+        blockedBy: [],
+        blocks: [],
+      });
+      renderTodoPanel();
+    }
+    return;
+  }
+
+  if (toolUseResult?.taskId) {
+    const taskId = String(toolUseResult.taskId);
+    let task = todoState.tasks.get(taskId);
+    if (!task) {
+      task = {
+        subject: `Task #${taskId}`,
+        description: '',
+        status: 'pending',
+        activeForm: '',
+        blockedBy: [],
+        blocks: [],
+      };
+      todoState.tasks.set(taskId, task);
+    }
+    if (toolUseResult.statusChange?.to) {
+      task.status = toolUseResult.statusChange.to;
+    }
+    renderTodoPanel();
+    return;
+  }
+
+  if (text.includes('Task #') && (text.includes('[pending]') || text.includes('[in_progress]') || text.includes('[completed]'))) {
+    const lines = text.split('\n');
+    for (const line of lines) {
+      const tm = line.match(/#(\d+)\.\s*\[(\w+)]\s*(.*)/);
+      if (tm) {
+        const [, taskId, status, subject] = tm;
+        const existing = todoState.tasks.get(taskId);
+        if (existing) {
+          existing.status = status;
+          if (subject.trim()) existing.subject = subject.trim();
+        } else {
+          todoState.tasks.set(taskId, {
+            subject: subject.trim(),
+            description: '',
+            status,
+            activeForm: '',
+            blockedBy: [],
+            blocks: [],
+          });
+        }
+      }
+    }
+    renderTodoPanel();
+    return;
+  }
+
+  const um = text.match(/Updated task #(\d+)/i);
+  if (um) {
+    renderTodoPanel();
+  }
+}
+
+export function isTodoTool(name) {
+  return name === 'TaskCreate' || name === 'TaskUpdate' || name === 'TaskList' || name === 'TaskGet';
+}
+
+export function renderTodoPanel() {
+  const panel = $('todo-panel');
+  const list = $('todo-list');
+  const tasks = Array.from(todoState.tasks.entries()).sort(([aId], [bId]) => {
+    const aNum = Number.parseInt(aId, 10);
+    const bNum = Number.parseInt(bId, 10);
+    const aOk = Number.isFinite(aNum);
+    const bOk = Number.isFinite(bNum);
+    if (aOk && bOk) return aNum - bNum;
+    if (aOk) return -1;
+    if (bOk) return 1;
+    return String(aId).localeCompare(String(bId), undefined, { numeric: true });
+  });
+
+  if (tasks.length === 0) {
+    panel.classList.remove('has-tasks', 'open');
+    list.innerHTML = '';
+    $('todo-summary').textContent = '';
+    $('todo-progress-bar').style.width = '0%';
+    $('todo-progress-bar').classList.remove('all-done');
+    $('todo-badge').textContent = '0';
+    $('todo-badge').classList.remove('done');
+    return;
+  }
+
+  syncTodoPanelLifecycle(tasks);
+  panel.classList.add('has-tasks');
+  panel.classList.toggle('open', todoState.panelOpen);
+
+  const total = tasks.length;
+  const completed = tasks.filter(([, t]) => t.status === 'completed').length;
+  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  const badge = $('todo-badge');
+  const remaining = total - completed;
+  badge.textContent = remaining > 0 ? remaining : '\u2713';
+  badge.classList.toggle('done', remaining === 0);
+
+  const bar = $('todo-progress-bar');
+  bar.style.width = pct + '%';
+  bar.classList.toggle('all-done', pct === 100);
+
+  $('todo-summary').textContent = `${completed}/${total}`;
+
+  const STATUS_ICON = {
+    pending: '\u25CB',
+    in_progress: '\u25D4',
+    completed: '\u2713',
+  };
+  const STATUS_LABEL = {
+    pending: 'Pending',
+    in_progress: 'Running',
+    completed: 'Done',
+  };
+
+  list.innerHTML = tasks.map(([id, t]) => {
+    const status = t.status || 'pending';
+    const showActive = status === 'in_progress' && t.activeForm;
+    return `<div class="todo-item ${status}">
+      <div class="todo-icon">${STATUS_ICON[status] || '\u25CB'}</div>
+      <div class="todo-body">
+        <div class="todo-subject">${esc(t.subject || 'Task #' + id)}</div>
+        ${showActive ? `<div class="todo-active-form">${esc(t.activeForm)}</div>` : ''}
+      </div>
+      <span class="todo-status-tag">${STATUS_LABEL[status] || status}</span>
+    </div>`;
+  }).join('');
+
+  scrollEnd();
+}
+
+export function toggleTodoPanel() {
+  const panel = $('todo-panel');
+  todoState.panelOpen = !todoState.panelOpen;
+  panel.classList.toggle('open', todoState.panelOpen);
+  scheduleSessionCacheSave();
+}
+
+// Make toggleTodoPanel available globally for inline onclick in HTML
+window.toggleTodoPanel = toggleTodoPanel;
+
+export function resetTodoState() {
+  cancelTodoAutoClear();
+  todoState.tasks.clear();
+  todoState.pendingCreates.clear();
+  todoState.panelOpen = false;
+  todoState.autoOpenedForBatch = false;
+  $('todo-panel').classList.remove('has-tasks', 'open');
+  $('todo-list').innerHTML = '';
+  $('todo-summary').textContent = '';
+  $('todo-progress-bar').style.width = '0%';
+  $('todo-progress-bar').classList.remove('all-done');
+  $('todo-badge').textContent = '0';
+  $('todo-badge').classList.remove('done');
+}
+
+export function getTodoSnapshot() {
+  return {
+    tasks: Array.from(todoState.tasks.entries()),
+    panelOpen: todoState.panelOpen,
+  };
+}
+
+export function restoreTodoSnapshot(snapshot) {
+  resetTodoState();
+  if (!snapshot || !Array.isArray(snapshot.tasks) || snapshot.tasks.length === 0) return;
+  snapshot.tasks.forEach(([taskId, task]) => {
+    todoState.tasks.set(String(taskId), task);
+  });
+  todoState.panelOpen = !!snapshot.panelOpen;
+  todoState.autoOpenedForBatch = todoState.tasks.size > 0;
+  renderTodoPanel();
+  $('todo-panel').classList.toggle('open', todoState.panelOpen && todoState.tasks.size > 0);
+}