@qnote/q-ai-note 1.0.0

package/dist/web/app.js

@@ -0,0 +1,1081 @@
+import { API_BASE, apiRequest, escapeHtml, safeText, appendLoadingMessage, setButtonState } from './shared.js';
+import { renderChatEntry } from './chatView.js';
+import { mountSandboxGrid, mountHtmlList, mountDiaryTimeline, mountWorkTree } from './vueRenderers.js';
+
+const state = {
+  sandboxes: [],
+  currentSandbox: null,
+  diaries: [],
+  operations: [],
+  chats: [],
+  settings: {},
+  pendingAction: null,
+  workItemSearch: '',
+  workItemStatusFilter: 'all',
+  diarySearch: '',
+  diaryProcessedFilter: 'all',
+  changesSandboxFilter: '',
+  changesTypeFilter: 'all',
+  changesQuickFilter: 'all',
+};
+
+const expandedNodes = new Set();
+let selectedNodeId = null;
+
+function applyWorkItemFilters(items) {
+  const query = state.workItemSearch.trim().toLowerCase();
+  const statusFilter = state.workItemStatusFilter;
+  if (!query && statusFilter === 'all') {
+    return items;
+  }
+
+  const byId = new Map(items.map((item) => [item.id, item]));
+  const included = new Set();
+
+  function includeAncestors(item) {
+    let current = item;
+    while (current) {
+      included.add(current.id);
+      current = current.parent_id ? byId.get(current.parent_id) : null;
+    }
+  }
+
+  for (const item of items) {
+    const statusMatched = statusFilter === 'all' || item.status === statusFilter;
+    const text = `${item.name || ''} ${item.description || ''} ${item.assignee || ''}`.toLowerCase();
+    const queryMatched = !query || text.includes(query);
+    if (statusMatched && queryMatched) {
+      includeAncestors(item);
+    }
+  }
+
+  return items.filter((item) => included.has(item.id));
+}
+
+function applyDiaryFilters(diaries) {
+  const query = state.diarySearch.trim().toLowerCase();
+  const processed = state.diaryProcessedFilter;
+  return diaries.filter((diary) => {
+    const queryMatched = !query || `${diary.content || ''}`.toLowerCase().includes(query);
+    const statusMatched = processed === 'all'
+      || (processed === 'processed' && diary.processed)
+      || (processed === 'unprocessed' && !diary.processed);
+    return queryMatched && statusMatched;
+  });
+}
+
+function expandAllNodes() {
+  const items = state.currentSandbox?.items || [];
+  items.forEach(item => expandedNodes.add(item.id));
+}
+
+function renderWorkTree() {
+  const tree = document.getElementById('work-tree');
+  if (!tree || !state.currentSandbox) return;
+  
+  const allItems = state.currentSandbox.items || [];
+  const items = applyWorkItemFilters(allItems);
+  
+  if (expandedNodes.size === 0 && allItems.length > 0) {
+    expandAllNodes();
+  }
+
+  if (allItems.length === 0) {
+    tree.innerHTML = '<div class="empty-state"><p>点击上方"添加"按钮创建第一个任务</p></div>';
+    return;
+  }
+
+  mountWorkTree('work-tree', {
+    items,
+    expandedIds: Array.from(expandedNodes),
+    onToggleExpand: (id) => {
+      if (expandedNodes.has(id)) {
+        expandedNodes.delete(id);
+      } else {
+        expandedNodes.add(id);
+      }
+      renderWorkTree();
+    },
+    onAddChild: (parentId) => {
+      document.getElementById('item-dialog-title').textContent = '添加子任务';
+      document.getElementById('item-dialog').dataset.editId = '';
+      document.getElementById('new-item-name').value = '';
+      document.getElementById('new-item-desc').value = '';
+      document.getElementById('new-item-assignee').value = '';
+      document.getElementById('new-item-status').value = 'pending';
+      document.getElementById('new-item-priority').value = 'medium';
+      document.getElementById('new-item-parent').value = parentId;
+      document.getElementById('item-dialog').showModal();
+    },
+    onEdit: (id) => {
+      editWorkItem(id);
+    },
+    onDelete: async (id) => {
+      if (confirm('确定删除此任务？')) {
+        await apiRequest(`${API_BASE}/items/${id}`, { method: 'DELETE' });
+        await loadSandbox(state.currentSandbox.id);
+      }
+    }
+  });
+  
+  populateParentSelect(allItems);
+}
+
+function populateParentSelect(items) {
+  const select = document.getElementById('new-item-parent');
+  if (!select) return;
+  
+  select.innerHTML = '<option value="">无（顶级）</option>' + 
+    items.map(i => `<option value="${i.id}">${safeText(i.name)}</option>`).join('');
+}
+
+async function loadSandboxes() {
+  state.sandboxes = await apiRequest(`${API_BASE}/sandboxes`);
+  renderSandboxes();
+  renderSandboxesSummary();
+  updateSandboxSelect();
+}
+
+function renderSandboxesSummary() {
+  const container = document.getElementById('sandboxes-summary');
+  if (!container) return;
+  const total = state.sandboxes.length;
+  const lastUpdated = total
+    ? new Date(Math.max(...state.sandboxes.map((s) => new Date(s.updated_at).getTime()))).toLocaleString()
+    : '-';
+  const recent = state.sandboxes.filter((s) => Date.now() - new Date(s.updated_at).getTime() < 7 * 24 * 3600 * 1000).length;
+
+  container.innerHTML = `
+    <div class="summary-card"><div class="label">总沙盘数</div><div class="value">${total}</div></div>
+    <div class="summary-card"><div class="label">近7天活跃</div><div class="value">${recent}</div></div>
+    <div class="summary-card"><div class="label">最近更新</div><div class="value" style="font-size:13px;font-weight:500">${safeText(lastUpdated)}</div></div>
+  `;
+}
+
+function renderSandboxes() {
+  const grid = document.getElementById('sandbox-grid');
+  if (!grid) return;
+  
+  mountSandboxGrid('sandbox-grid', {
+    sandboxes: state.sandboxes,
+    emptyText: '暂无沙盘',
+    onOpen: (id) => {
+      window.location.hash = `/sandbox/${id}`;
+    },
+    onDelete: async (id) => {
+      if (confirm('确定删除此沙盘？')) {
+        await apiRequest(`${API_BASE}/sandboxes/${id}`, { method: 'DELETE' });
+        await loadSandboxes();
+      }
+    }
+  });
+}
+
+async function loadSandbox(id) {
+  const [sandbox, items, diaries] = await Promise.all([
+    apiRequest(`${API_BASE}/sandboxes/${id}`),
+    apiRequest(`${API_BASE}/sandboxes/${id}/items`),
+    apiRequest(`${API_BASE}/diaries?sandbox_id=${id}`)
+  ]);
+  state.currentSandbox = { ...sandbox, items, diaries };
+  
+  document.getElementById('sandbox-title').textContent = sandbox.name;
+  renderSandboxOverview();
+  renderWorkTree();
+  loadSandboxChats(id);
+}
+
+function renderSandboxOverview() {
+  const container = document.getElementById('sandbox-overview');
+  if (!container || !state.currentSandbox) return;
+  const items = state.currentSandbox.items || [];
+  const diaries = state.currentSandbox.diaries || [];
+  const byStatus = {
+    pending: items.filter((i) => i.status === 'pending').length,
+    inProgress: items.filter((i) => i.status === 'in_progress').length,
+    done: items.filter((i) => i.status === 'done').length,
+  };
+  container.innerHTML = `
+    <div class="summary-card"><div class="label">任务总数</div><div class="value">${items.length}</div></div>
+    <div class="summary-card"><div class="label">待处理/进行中</div><div class="value">${byStatus.pending}/${byStatus.inProgress}</div></div>
+    <div class="summary-card"><div class="label">已完成</div><div class="value">${byStatus.done}</div></div>
+    <div class="summary-card"><div class="label">关联日记</div><div class="value">${diaries.length}</div></div>
+  `;
+}
+
+async function loadSandboxChats(sandboxId) {
+  const messages = document.getElementById('sandbox-chat-messages');
+  if (!messages) return;
+  
+  const chats = await apiRequest(`${API_BASE}/chats/sandbox/${sandboxId}`);
+  state.chats = chats;
+
+  mountHtmlList('sandbox-chat-messages', chats.map((chat) => renderChatEntry(chat, { safeText, renderAIActionMessage })));
+  
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function renderAIActionMessage(action) {
+  const actionType = action.action;
+  const getExecutionStatus = (targetAction) => {
+    const status = targetAction?.execution_result?.status;
+    if (status === 'success' || status === 'partial' || status === 'failed') {
+      return status;
+    }
+
+    const observation = String(targetAction?.observation || '');
+    const match = observation.match(/成功\s*(\d+)\s*\/\s*(\d+)/);
+    if (match) {
+      const successCount = Number(match[1]);
+      const totalCount = Number(match[2]);
+      if (Number.isFinite(successCount) && Number.isFinite(totalCount) && totalCount > 0) {
+        if (successCount >= totalCount) return 'success';
+        if (successCount <= 0) return 'failed';
+        return 'partial';
+      }
+    }
+
+    if (/失败[:：]/.test(observation)) {
+      return 'failed';
+    }
+    return 'success';
+  };
+  
+  if (actionType === 'response' || actionType === 'clarify') {
+    return `<div class="chat-message assistant">${escapeHtml(action.response || action.observation || '')}</div>`;
+  }
+  else if (actionType === 'confirm' && action.confirm_items) {
+    // Skip confirm, go directly to done
+    return '';
+  }
+  else if (actionType === 'done') {
+    const status = getExecutionStatus(action);
+    const statusIcon = status === 'success' ? '✅' : status === 'partial' ? '⚠️' : '❌';
+    const statusClass = status === 'success' ? 'is-success' : status === 'partial' ? 'is-partial' : 'is-failed';
+    const undoBtn = action.operationId 
+      ? `<button class="btn btn-sm btn-undo" data-operation-id="${action.operationId}" onclick="undoOperation('${action.operationId}', this)">撤销</button>`
+      : '';
+    return `<div class="chat-message assistant ${status === 'failed' ? 'error' : ''}">
+      <div class="operation-result ${statusClass}">
+        <span class="status-icon">${statusIcon}</span>
+        <span class="result-text">${escapeHtml(action.observation || '操作完成')}</span>
+        ${undoBtn}
+      </div>
+    </div>`;
+  }
+  
+  return `<div class="chat-message assistant">${escapeHtml(action.response || '')}</div>`;
+}
+
+window.undoOperation = async function(operationId, btn) {
+  btn.disabled = true;
+  btn.textContent = '撤销中...';
+  try {
+    await apiRequest(`${API_BASE}/items/operations/${operationId}/undo`, {
+      method: 'POST'
+    });
+    btn.textContent = '已撤销';
+    btn.classList.add('undone');
+    if (state.currentSandbox) {
+      await loadSandbox(state.currentSandbox.id);
+    }
+  } catch (error) {
+    btn.textContent = '撤销失败';
+    btn.disabled = false;
+  }
+};
+
+async function loadDiaries() {
+  state.diaries = await apiRequest(`${API_BASE}/diaries`);
+  renderDiaries();
+}
+
+function renderDiaries() {
+  const timeline = document.getElementById('diary-timeline');
+  if (!timeline) return;
+  const filtered = applyDiaryFilters(state.diaries);
+
+  mountDiaryTimeline('diary-timeline', {
+    diaries: filtered,
+    getSandboxName,
+    onConfirm: async (id) => {
+      await apiRequest(`${API_BASE}/diaries/${id}/process`, {
+        method: 'PUT',
+        body: JSON.stringify({ action: 'confirm' }),
+      });
+      await loadDiaries();
+    },
+    onIgnore: async (id) => {
+      await apiRequest(`${API_BASE}/diaries/${id}/process`, {
+        method: 'PUT',
+        body: JSON.stringify({ action: 'ignore' }),
+      });
+      await loadDiaries();
+    }
+  });
+}
+
+function getSandboxName(id) {
+  const s = state.sandboxes.find(s => s.id === id);
+  return s ? s.name : id;
+}
+
+function updateSandboxSelect() {
+  const diarySelect = document.getElementById('diary-sandbox-select');
+  if (diarySelect) {
+    diarySelect.innerHTML = '<option value="">选择沙盘（可选）</option>' +
+      state.sandboxes.map(s => `<option value="${s.id}">${safeText(s.name)}</option>`).join('');
+  }
+
+  const changesSelect = document.getElementById('changes-sandbox-filter');
+  if (changesSelect) {
+    const currentValue = state.changesSandboxFilter || '';
+    changesSelect.innerHTML = '<option value="">全部沙盘</option>' +
+      state.sandboxes.map(s => `<option value="${s.id}">${safeText(s.name)}</option>`).join('');
+    changesSelect.value = currentValue;
+  }
+}
+
+function generateSandboxReportMarkdown(sandbox, mode = 'management') {
+  const items = sandbox?.items || [];
+  const diaries = sandbox?.diaries || [];
+  const lines = [];
+  lines.push(`# 沙盘汇报：${sandbox?.name || ''}`);
+  lines.push('');
+
+  if (mode === 'management') {
+    lines.push(`- 任务总数：${items.length}`);
+    lines.push(`- 已完成：${items.filter((i) => i.status === 'done').length}`);
+    lines.push(`- 进行中：${items.filter((i) => i.status === 'in_progress').length}`);
+    lines.push(`- 待处理：${items.filter((i) => i.status === 'pending').length}`);
+    lines.push(`- 关联日记：${diaries.length}`);
+    lines.push('');
+    lines.push('## 风险与建议');
+    const highPending = items.filter((i) => i.priority === 'high' && i.status !== 'done').length;
+    lines.push(`- 高优先级未完成任务：${highPending}`);
+    lines.push(`- 进行中任务需关注节奏与阻塞，建议本周优先清理高优先级未完成事项。`);
+  } else {
+    lines.push('## 执行清单');
+    for (const item of items) {
+      lines.push(`- [${item.status}] ${item.name}${item.assignee ? ` (@${item.assignee})` : ''}`);
+    }
+    lines.push('');
+    lines.push('## 最近日记（最多10条）');
+    for (const diary of diaries.slice(0, 10)) {
+      lines.push(`- ${new Date(diary.created_at).toLocaleString()}：${diary.content}`);
+    }
+  }
+  return lines.join('\n');
+}
+
+function parseOpJson(value) {
+  if (!value || typeof value !== 'string') return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+function getFilteredOperations() {
+  return state.operations.filter((op) => {
+    const before = parseOpJson(op.data_before);
+    const after = parseOpJson(op.data_after);
+    const sandboxMatched = !state.changesSandboxFilter || op.sandbox_id === state.changesSandboxFilter;
+    const typeMatched = state.changesTypeFilter === 'all' || op.operation_type === state.changesTypeFilter;
+    const quickMatched = state.changesQuickFilter === 'all' || isKeyOperation(op, before, after);
+    return sandboxMatched && typeMatched && quickMatched;
+  });
+}
+
+function isKeyOperation(op, before, after) {
+  const statusChanged = op.operation_type === 'update' && (before?.status ?? '') !== (after?.status ?? '');
+  const highPriorityTouched = (before?.priority === 'high') || (after?.priority === 'high');
+  return statusChanged || highPriorityTouched;
+}
+
+function formatDiffLabel(key) {
+  const labels = {
+    name: '名称',
+    status: '状态',
+    priority: '优先级',
+    assignee: '负责人',
+    parent_id: '父任务',
+    description: '描述',
+  };
+  return labels[key] || key;
+}
+
+function buildUpdateDiffLines(before, after) {
+  const trackedFields = ['name', 'status', 'priority', 'assignee', 'parent_id', 'description'];
+  return trackedFields
+    .filter((key) => (before?.[key] ?? '') !== (after?.[key] ?? ''))
+    .map((key) => {
+      const fromValue = before?.[key] ?? '-';
+      const toValue = after?.[key] ?? '-';
+      return `${formatDiffLabel(key)}：${safeText(String(fromValue))} -> ${safeText(String(toValue))}`;
+    });
+}
+
+function generateWeeklySummaryMarkdown(mode = 'management') {
+  const filtered = getFilteredOperations();
+  const now = new Date();
+  const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const recentOps = filtered.filter((op) => new Date(op.created_at) >= sevenDaysAgo);
+  const createCount = recentOps.filter((op) => op.operation_type === 'create').length;
+  const updateCount = recentOps.filter((op) => op.operation_type === 'update').length;
+  const deleteCount = recentOps.filter((op) => op.operation_type === 'delete').length;
+  const sandboxMap = new Map();
+
+  for (const op of recentOps) {
+    const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
+    sandboxMap.set(sandboxName, (sandboxMap.get(sandboxName) || 0) + 1);
+  }
+
+  const keyOps = recentOps.filter((op) => {
+    const before = parseOpJson(op.data_before);
+    const after = parseOpJson(op.data_after);
+    return isKeyOperation(op, before, after);
+  });
+
+  const lines = [];
+  lines.push(`# 变化周报摘要（${mode === 'management' ? '管理层版' : '执行层版'}）`);
+  lines.push('');
+  lines.push(`- 时间范围：${sevenDaysAgo.toLocaleDateString()} ~ ${now.toLocaleDateString()}`);
+  lines.push(`- 变化总数：${recentOps.length}`);
+  lines.push(`- 创建：${createCount} / 更新：${updateCount} / 删除：${deleteCount}`);
+
+  if (mode === 'management') {
+    lines.push(`- 关键变化：${keyOps.length}`);
+    lines.push('');
+    lines.push('## 管理关注项');
+    lines.push(`- 状态变更或高优先级相关变化共 ${keyOps.length} 条。`);
+    lines.push('- 若关键变化集中在单一沙盘，建议在下周设置专题跟踪。');
+    lines.push('');
+    lines.push('## 沙盘变化分布');
+    if (sandboxMap.size === 0) {
+      lines.push('- 本周暂无变化');
+    } else {
+      for (const [sandboxName, count] of sandboxMap.entries()) {
+        lines.push(`- ${sandboxName}：${count}`);
+      }
+    }
+    lines.push('');
+    lines.push('## 关键变化（最多 8 条）');
+    for (const op of keyOps.slice(0, 8)) {
+      const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
+      const before = parseOpJson(op.data_before);
+      const after = parseOpJson(op.data_after);
+      const taskName = after?.name || before?.name || '-';
+      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${taskName}`);
+    }
+  } else {
+    lines.push('');
+    lines.push('## 执行建议');
+    lines.push('- 优先处理高优先级且未完成任务，避免关键路径阻塞。');
+    lines.push('- 对近期频繁变更项补充说明，减少反复沟通。');
+    lines.push('');
+    lines.push('## 任务变化明细（最多 12 条）');
+    for (const op of recentOps.slice(0, 12)) {
+      const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
+      const before = parseOpJson(op.data_before);
+      const after = parseOpJson(op.data_after);
+      const taskName = after?.name || before?.name || '-';
+      const diffLines = op.operation_type === 'update' ? buildUpdateDiffLines(before, after) : [];
+      lines.push(`- ${new Date(op.created_at).toLocaleString()} [${sandboxName}] ${op.operation_type} ${taskName}`);
+      if (diffLines.length > 0) {
+        for (const line of diffLines.slice(0, 3)) {
+          lines.push(`  - ${line}`);
+        }
+      }
+    }
+  }
+  return lines.join('\n');
+}
+
+function renderChanges() {
+  const container = document.getElementById('changes-list');
+  if (!container) return;
+
+  const filtered = getFilteredOperations();
+
+  if (!filtered.length) {
+    container.innerHTML = '<div class="empty-state"><p>暂无变化记录</p></div>';
+    return;
+  }
+  const groups = new Map();
+  for (const op of filtered) {
+    const key = new Date(op.created_at).toLocaleDateString();
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(op);
+  }
+
+  container.innerHTML = Array.from(groups.entries()).map(([date, ops]) => {
+    const items = ops.map((op) => {
+      const before = parseOpJson(op.data_before);
+      const after = parseOpJson(op.data_after);
+      const sandboxName = state.sandboxes.find((s) => s.id === op.sandbox_id)?.name || op.sandbox_id;
+      let detail = '';
+      let diffLinesHtml = '';
+
+      if (op.operation_type === 'create') {
+        detail = `创建任务：${safeText(after?.name || '-')}`;
+      } else if (op.operation_type === 'update') {
+        detail = `更新任务：${safeText(after?.name || before?.name || '-')}`;
+        const diffLines = buildUpdateDiffLines(before, after);
+        if (diffLines.length > 0) {
+          diffLinesHtml = `<div class="change-diff-list">${diffLines.map((line) => `<div class="change-diff-line">${line}</div>`).join('')}</div>`;
+        }
+      } else if (op.operation_type === 'delete') {
+        detail = `删除任务：${safeText(before?.name || '-')}`;
+      }
+      return `
+        <div class="change-item">
+          <div class="change-meta">
+            <span class="change-type ${safeText(op.operation_type)}">${safeText(op.operation_type)}</span>
+            <span>${safeText(sandboxName)}</span>
+            <span>${new Date(op.created_at).toLocaleTimeString()}</span>
+          </div>
+          <div class="change-detail">${detail}</div>
+          ${diffLinesHtml}
+        </div>
+      `;
+    }).join('');
+
+    return `
+      <div class="change-date-group">
+        <h4 class="change-date-title">${safeText(date)}</h4>
+        ${items}
+      </div>
+    `;
+  }).join('');
+}
+
+async function loadChanges() {
+  const query = new URLSearchParams();
+  query.set('limit', '80');
+  if (state.changesSandboxFilter) {
+    query.set('sandbox_id', state.changesSandboxFilter);
+  }
+  state.operations = await apiRequest(`${API_BASE}/items/operations/recent?${query.toString()}`);
+  renderChanges();
+}
+
+async function loadSettings() {
+  state.settings = await apiRequest(`${API_BASE}/settings`);
+  document.getElementById('setting-api-url').value = state.settings.api_url || '';
+  const apiKeyInput = document.getElementById('setting-api-key');
+  apiKeyInput.value = '';
+  apiKeyInput.placeholder = state.settings.has_api_key ? '已配置，留空表示不修改' : 'sk-...';
+  document.getElementById('setting-model').value = state.settings.model || '';
+}
+
+async function loadChats() {
+  const messages = document.getElementById('chat-messages');
+  if (!messages) return;
+  
+  const chats = await apiRequest(`${API_BASE}/chats`);
+  mountHtmlList('chat-messages', chats.map((chat) => renderChatEntry(chat, { safeText, renderAIActionMessage })));
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function showPage(pageId) {
+  document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
+  const page = document.getElementById(`page-${pageId}`);
+  if (page) {
+    page.classList.remove('hidden');
+  }
+  
+  document.querySelectorAll('.nav-list a').forEach(a => a.classList.remove('active'));
+  const nav = document.querySelector(`[data-nav="${pageId}"]`);
+  if (nav) nav.classList.add('active');
+}
+
+function editWorkItem(id) {
+  const item = state.currentSandbox.items.find(i => i.id === id);
+  if (!item) return;
+  
+  document.getElementById('item-dialog-title').textContent = '编辑工作项';
+  document.getElementById('new-item-name').value = item.name;
+  document.getElementById('new-item-desc').value = item.description;
+  document.getElementById('new-item-assignee').value = item.assignee;
+  document.getElementById('new-item-status').value = item.status;
+  document.getElementById('new-item-priority').value = item.priority;
+  
+  document.getElementById('item-dialog').dataset.editId = id;
+  document.getElementById('item-dialog').showModal();
+}
+
+function initApp() {
+  const hash = window.location.hash;
+  
+  document.querySelectorAll('.nav-list a').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      window.location.hash = link.getAttribute('href').replace('#', '') || '/';
+    });
+  });
+  
+  document.getElementById('add-sandbox-btn')?.addEventListener('click', () => {
+    document.getElementById('sandbox-dialog').showModal();
+  });
+  
+  document.getElementById('cancel-sandbox-btn')?.addEventListener('click', () => {
+    document.getElementById('sandbox-dialog').close();
+  });
+  
+  document.getElementById('sandbox-dialog').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const name = document.getElementById('new-sandbox-name').value;
+    const description = document.getElementById('new-sandbox-desc').value;
+    const dialog = document.getElementById('sandbox-dialog');
+    
+    try {
+      await apiRequest(`${API_BASE}/sandboxes`, {
+        method: 'POST',
+        body: JSON.stringify({ name, description }),
+      });
+      dialog.close();
+      document.getElementById('new-sandbox-name').value = '';
+      document.getElementById('new-sandbox-desc').value = '';
+      await loadSandboxes();
+    } catch (error) {
+      alert('创建失败: ' + error.message);
+    }
+  });
+  
+  document.getElementById('add-item-btn')?.addEventListener('click', () => {
+    document.getElementById('item-dialog-title').textContent = '添加任务';
+    document.getElementById('item-dialog').dataset.editId = '';
+    document.getElementById('new-item-name').value = '';
+    document.getElementById('new-item-desc').value = '';
+    document.getElementById('new-item-assignee').value = '';
+    document.getElementById('new-item-status').value = 'pending';
+    document.getElementById('new-item-priority').value = 'medium';
+    document.getElementById('new-item-parent').value = '';
+    document.getElementById('item-dialog').showModal();
+  });
+  
+  document.getElementById('cancel-item-btn')?.addEventListener('click', () => {
+    document.getElementById('item-dialog').close();
+  });
+  
+  document.getElementById('confirm-item-btn')?.addEventListener('click', async () => {
+    const dialog = document.getElementById('item-dialog');
+    const editId = dialog.dataset.editId || null;
+    const isNewItem = !editId;
+    
+    const data = {
+      name: document.getElementById('new-item-name').value,
+      description: document.getElementById('new-item-desc').value,
+      assignee: document.getElementById('new-item-assignee').value,
+      status: document.getElementById('new-item-status').value,
+      priority: document.getElementById('new-item-priority').value,
+      parent_id: document.getElementById('new-item-parent').value || null,
+    };
+    
+    if (!data.name) {
+      return;
+    }
+    
+    const btn = document.getElementById('confirm-item-btn');
+    const originalText = btn.textContent;
+    setButtonState(btn, { disabled: true, text: '保存中...' });
+    
+    try {
+      if (editId) {
+        await apiRequest(`${API_BASE}/items/${editId}`, {
+          method: 'PUT',
+          body: JSON.stringify(data),
+        });
+      } else {
+        await apiRequest(`${API_BASE}/sandboxes/${state.currentSandbox.id}/items`, {
+          method: 'POST',
+          body: JSON.stringify(data),
+        });
+        
+        }
+      
+      dialog.close();
+      expandedNodes.clear();
+      await loadSandbox(state.currentSandbox.id);
+    } catch (error) {
+      setButtonState(btn, { disabled: false, text: originalText || '保存' });
+    } finally {
+      setButtonState(btn, { disabled: false, text: originalText || '保存' });
+    }
+  });
+  
+  document.getElementById('rollback-btn')?.addEventListener('click', async () => {
+    if (!state.currentSandbox?.items?.length) return;
+    const lastItem = state.currentSandbox.items[state.currentSandbox.items.length - 1];
+    await apiRequest(`${API_BASE}/items/${lastItem.id}/rollback`, { method: 'POST' });
+    await loadSandbox(state.currentSandbox.id);
+  });
+  
+  document.getElementById('send-btn')?.addEventListener('click', async () => {
+    const input = document.getElementById('chat-input');
+    const content = input.value.trim();
+    if (!content) return;
+    
+    const messages = document.getElementById('chat-messages');
+    messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(content)}</div>`);
+    const loadingMessage = appendLoadingMessage(messages);
+    messages.scrollTop = messages.scrollHeight;
+    input.value = '';
+    
+    const btn = document.getElementById('send-btn');
+    setButtonState(btn, { disabled: true });
+    
+    try {
+      await apiRequest(`${API_BASE}/chats`, {
+        method: 'POST',
+        body: JSON.stringify({ content }),
+      });
+      
+      loadingMessage?.remove();
+      await loadChats();
+    } catch (error) {
+      loadingMessage?.remove();
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant error">❌ 错误: ${escapeHtml(error.message)}</div>`);
+      messages.scrollTop = messages.scrollHeight;
+    } finally {
+      setButtonState(btn, { disabled: false });
+    }
+  });
+  
+  document.getElementById('chat-input')?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+      document.getElementById('send-btn').click();
+    }
+  });
+  
+  document.getElementById('sandbox-send-btn')?.addEventListener('click', async () => {
+    const input = document.getElementById('sandbox-chat-input');
+    const content = input.value.trim();
+    if (!content || !state.currentSandbox) return;
+    
+    const btn = document.getElementById('sandbox-send-btn');
+    const messages = document.getElementById('sandbox-chat-messages');
+    
+    messages.insertAdjacentHTML('beforeend', `<div class="chat-message user">${escapeHtml(content)}</div>`);
+    const loadingMessage = appendLoadingMessage(messages);
+    messages.scrollTop = messages.scrollHeight;
+    input.value = '';
+    
+    const originalText = btn.textContent;
+    setButtonState(btn, { disabled: true, text: '思考中' });
+    
+    try {
+      const history = state.chats
+        .filter(c => c.role)
+        .slice(-10)
+        .map(c => ({ role: c.role, content: typeof c.content === 'string' ? c.content : JSON.stringify(c.content) }));
+      
+      const result = await apiRequest(`${API_BASE}/chats/react`, {
+        method: 'POST',
+        body: JSON.stringify({ 
+          content, 
+          sandbox_id: state.currentSandbox.id,
+          history,
+          pending_action: state.pendingAction
+        }),
+      });
+      
+      console.log('Chat result:', result);
+      
+      loadingMessage?.remove();
+      
+      await handleAIAction(result.action, state.currentSandbox.id);
+      await loadSandbox(state.currentSandbox.id);
+    } catch (error) {
+      console.error('发送消息失败:', error);
+      loadingMessage?.remove();
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant error">❌ 错误: ${escapeHtml(error.message)}</div>`);
+      messages.scrollTop = messages.scrollHeight;
+    } finally {
+      setButtonState(btn, { disabled: false, text: originalText || '发送' });
+    }
+  });
+
+  async function handleAIAction(action, sandboxId) {
+    if (!action) return;
+    
+    const messages = document.getElementById('sandbox-chat-messages');
+    if (!messages) return;
+    
+    const actionType = action.action;
+    
+    if (actionType === 'response' || actionType === 'clarify') {
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${safeText(action.response || action.observation || '')}</div>`);
+      messages.scrollTop = messages.scrollHeight;
+      
+      if (actionType === 'clarify') {
+        if (action.pending_action) {
+          state.pendingAction = action.pending_action;
+        } else if (action.response && action.response.includes('创建')) {
+          const lastUserMsg = state.chats.filter(c => c.role === 'user').pop();
+          if (lastUserMsg && lastUserMsg.content) {
+            state.pendingAction = {
+              action_type: 'create_work_item',
+              action_input: { name: '待创建任务' }
+            };
+          }
+        }
+      } else if (actionType === 'response') {
+        state.pendingAction = null;
+      }
+    }
+    else if (actionType === 'confirm' && action.confirm_items) {
+      let html = '<div class="confirm-panel">';
+      html += `<div class="ai-thought">💭 ${safeText(action.thought || '')}</div>`;
+      html += '<h4>请确认以下操作：</h4>';
+      
+      for (const item of action.confirm_items) {
+        const actionText = { 
+          create_work_item: '创建任务', 
+          update_work_item: '更新任务', 
+          delete_work_item: '删除任务',
+          move_work_item: '移动任务'
+        };
+        html += `<div class="confirm-item">
+          <span class="confirm-action">${safeText(actionText[item.type] || item.type)}</span>
+          <span class="confirm-name">${safeText(item.name)}</span>
+          ${item.description ? `<span class="confirm-desc">${safeText(item.description)}</span>` : ''}
+        </div>`;
+      }
+      
+      html += '<div class="confirm-actions">';
+      html += '<button class="btn btn-secondary" id="cancel-confirm-btn">取消</button>';
+      html += '<button class="btn btn-primary" id="execute-confirm-btn">确认执行</button>';
+      html += '</div></div>';
+      
+      messages.insertAdjacentHTML('beforeend', html);
+      messages.scrollTop = messages.scrollHeight;
+      
+      document.getElementById('cancel-confirm-btn')?.addEventListener('click', () => {
+        document.querySelector('.confirm-panel')?.remove();
+        messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">已取消操作</div>`);
+        messages.scrollTop = messages.scrollHeight;
+      });
+      
+      document.getElementById('execute-confirm-btn')?.addEventListener('click', async () => {
+        try {
+          const confirmData = action.confirm_items.map(item => ({
+            type: item.type,
+            name: item.name,
+            description: item.description,
+            params: item.params
+          }));
+          
+          const confirmResult = await apiRequest(`${API_BASE}/chats/confirm`, {
+            method: 'POST',
+            body: JSON.stringify({
+              sandbox_id: sandboxId,
+              confirm_items: confirmData
+            }),
+          });
+          
+          document.querySelector('.confirm-panel')?.remove();
+          await loadSandbox(sandboxId);
+          const results = Array.isArray(confirmResult?.results) ? confirmResult.results : [];
+          const successCount = results.filter((item) => item.success).length;
+          const totalCount = results.length;
+          const failCount = totalCount - successCount;
+          const statusText = totalCount === 0
+            ? '未执行任何操作'
+            : `执行完成：成功 ${successCount}/${totalCount}${failCount > 0 ? `，失败 ${failCount}` : ''}`;
+          const statusIcon = failCount === 0 ? '✅' : successCount === 0 ? '❌' : '⚠️';
+          messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${statusIcon} ${safeText(statusText)}</div>`);
+          messages.scrollTop = messages.scrollHeight;
+        } catch (error) {
+          alert('执行失败: ' + error.message);
+        }
+      });
+    }
+    else if (actionType === 'done') {
+      messages.insertAdjacentHTML('beforeend', renderAIActionMessage(action));
+      messages.scrollTop = messages.scrollHeight;
+      state.pendingAction = null;
+    }
+    else if (actionType === 'stop') {
+      messages.insertAdjacentHTML('beforeend', `<div class="chat-message assistant">${safeText(action.observation || '已取消操作')}</div>`);
+      messages.scrollTop = messages.scrollHeight;
+      state.pendingAction = null;
+    }
+  }
+  
+  document.getElementById('sandbox-chat-input')?.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+      document.getElementById('sandbox-send-btn').click();
+    }
+  });
+  
+  document.getElementById('save-diary-btn')?.addEventListener('click', async () => {
+    const sandboxId = document.getElementById('diary-sandbox-select').value || null;
+    const content = document.getElementById('diary-content').value.trim();
+    if (!content) return;
+    
+    await apiRequest(`${API_BASE}/diaries`, {
+      method: 'POST',
+      body: JSON.stringify({ sandbox_id: sandboxId, content }),
+    });
+    
+    document.getElementById('diary-content').value = '';
+    await loadDiaries();
+  });
+  
+  document.getElementById('save-settings-btn')?.addEventListener('click', async () => {
+    const api_url = document.getElementById('setting-api-url').value;
+    const api_key = document.getElementById('setting-api-key').value;
+    const model = document.getElementById('setting-model').value;
+    
+    await apiRequest(`${API_BASE}/settings/api_url`, {
+      method: 'PUT',
+      body: JSON.stringify({ value: api_url }),
+    });
+    if (api_key) {
+      await apiRequest(`${API_BASE}/settings/api_key`, {
+        method: 'PUT',
+        body: JSON.stringify({ value: api_key }),
+      });
+    }
+    await apiRequest(`${API_BASE}/settings/model`, {
+      method: 'PUT',
+      body: JSON.stringify({ value: model }),
+    });
+    
+    alert('设置已保存');
+    await loadSettings();
+  });
+
+  document.getElementById('work-item-search')?.addEventListener('input', (e) => {
+    state.workItemSearch = e.target.value || '';
+    renderWorkTree();
+  });
+
+  document.getElementById('work-item-status-filter')?.addEventListener('change', (e) => {
+    state.workItemStatusFilter = e.target.value || 'all';
+    renderWorkTree();
+  });
+
+  document.getElementById('diary-search')?.addEventListener('input', (e) => {
+    state.diarySearch = e.target.value || '';
+    renderDiaries();
+  });
+
+  document.getElementById('diary-processed-filter')?.addEventListener('change', (e) => {
+    state.diaryProcessedFilter = e.target.value || 'all';
+    renderDiaries();
+  });
+
+  document.getElementById('generate-report-btn')?.addEventListener('click', () => {
+    if (!state.currentSandbox) return;
+    const mode = document.getElementById('report-template')?.value || 'management';
+    const report = generateSandboxReportMarkdown(state.currentSandbox, mode);
+    document.getElementById('report-content').value = report;
+    document.getElementById('report-dialog').showModal();
+  });
+
+  document.getElementById('report-template')?.addEventListener('change', (e) => {
+    if (!state.currentSandbox) return;
+    const mode = e.target.value || 'management';
+    document.getElementById('report-content').value = generateSandboxReportMarkdown(state.currentSandbox, mode);
+  });
+
+  document.getElementById('close-report-btn')?.addEventListener('click', () => {
+    document.getElementById('report-dialog').close();
+  });
+
+  document.getElementById('copy-report-btn')?.addEventListener('click', async () => {
+    const content = document.getElementById('report-content').value;
+    await navigator.clipboard.writeText(content);
+    alert('汇报已复制');
+  });
+
+  document.getElementById('generate-insight-btn')?.addEventListener('click', async () => {
+    if (!state.currentSandbox) return;
+    const output = document.getElementById('sandbox-insight-output');
+    output.classList.remove('hidden');
+    output.textContent = '生成中...';
+    try {
+      const result = await apiRequest(`${API_BASE}/chats/sandbox/${state.currentSandbox.id}/insight`);
+      output.textContent = result.insight;
+    } catch (error) {
+      output.textContent = `生成失败：${error.message}`;
+    }
+  });
+
+  document.getElementById('changes-sandbox-filter')?.addEventListener('change', async (e) => {
+    state.changesSandboxFilter = e.target.value || '';
+    await loadChanges();
+  });
+
+  document.getElementById('changes-type-filter')?.addEventListener('change', (e) => {
+    state.changesTypeFilter = e.target.value || 'all';
+    renderChanges();
+  });
+
+  document.getElementById('changes-quick-filter')?.addEventListener('change', (e) => {
+    state.changesQuickFilter = e.target.value || 'all';
+    renderChanges();
+  });
+
+  document.getElementById('refresh-changes-btn')?.addEventListener('click', async () => {
+    await loadChanges();
+  });
+
+  document.getElementById('export-weekly-summary-btn')?.addEventListener('click', () => {
+    const mode = document.getElementById('weekly-summary-template')?.value || 'management';
+    const content = generateWeeklySummaryMarkdown(mode);
+    document.getElementById('weekly-summary-content').value = content;
+    document.getElementById('weekly-summary-dialog').showModal();
+  });
+
+  document.getElementById('weekly-summary-template')?.addEventListener('change', (e) => {
+    const mode = e.target.value || 'management';
+    document.getElementById('weekly-summary-content').value = generateWeeklySummaryMarkdown(mode);
+  });
+
+  document.getElementById('close-weekly-summary-btn')?.addEventListener('click', () => {
+    document.getElementById('weekly-summary-dialog').close();
+  });
+
+  document.getElementById('copy-weekly-summary-btn')?.addEventListener('click', async () => {
+    const content = document.getElementById('weekly-summary-content').value;
+    await navigator.clipboard.writeText(content);
+    alert('周报摘要已复制');
+  });
+  
+  window.addEventListener('hashchange', handleRoute);
+  handleRoute();
+  
+  async function handleRoute() {
+    const hash = window.location.hash.slice(1) || '/';
+    
+    if (hash === '/') {
+      showPage('home');
+      await loadChats();
+    } else if (hash === '/sandboxes') {
+      showPage('sandboxes');
+      await loadSandboxes();
+    } else if (hash.startsWith('/sandbox/')) {
+      const id = hash.split('/')[2];
+      showPage('sandbox-detail');
+      await loadSandbox(id);
+    } else if (hash === '/diaries') {
+      showPage('diaries');
+      await loadDiaries();
+      await loadSandboxes();
+    } else if (hash === '/changes') {
+      showPage('changes');
+      await loadSandboxes();
+      await loadChanges();
+    } else if (hash === '/settings') {
+      showPage('settings');
+      await loadSettings();
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', initApp);