tagword-codeagent 1.1.6__py3-none-any.whl

codeagent/web/static/13a-skills.js

@@ -0,0 +1,156 @@
+/* ================================================================
+ * 13-agent.js
+ *   - Agent page: skill (Agents/<agent_id>/skills/) management,
+ *     tool (integrated plugins) management,
+ *     system prompt MD file editor.
+ *
+ * Depends on (from earlier files): agentId, refreshChatModelSelect
+ * ================================================================ */
+
+// ---------------- Skill management ----------------
+
+// Track which agent's skills are currently displayed.
+// When viewing an agent detail, this is the detail agent ID;
+// on page load, it falls back to the global agentId.
+var _skillAgentId = null;
+
+function _currentSkillAgentId() {
+  return _skillAgentId || agentId;
+}
+
+async function loadSkills(overrideAgentId) {
+  const aid = overrideAgentId || agentId;
+  _skillAgentId = aid;
+  const list = document.getElementById('skillList');
+  const status = document.getElementById('skillStatus');
+  if (!list) return;
+  if (status) status.classList.remove('is-err');
+  try {
+    const r = await fetch('/api/ui/skills?agent_id=' + encodeURIComponent(aid));
+    if (!r.ok) throw new Error(r.statusText);
+    const j = await r.json();
+    const skills = j.skills || [];
+    list.innerHTML = '';
+    if (skills.length === 0) {
+      list.innerHTML = '<div class="cron-empty">暂无技能文件，点击"+ 新增"添加。</div>';
+      if (status) status.textContent = '共 0 个技能文件';
+      return;
+    }
+    skills.forEach(function(s) { list.appendChild(buildSkillCard(s)); });
+    if (status) status.textContent = '共 ' + skills.length + ' 个技能文件';
+  } catch (e) {
+    if (status) { status.classList.add('is-err'); status.textContent = '加载失败：' + String(e); }
+  }
+}
+
+function buildSkillCard(s) {
+  var wrap = document.createElement('div'); wrap.className = 'cron-card-wrap';
+  var header = document.createElement('div'); header.className = 'cron-card';
+  var info = document.createElement('div'); info.className = 'cron-card__info';
+
+  var nameRow = document.createElement('div'); nameRow.className = 'cron-card__name';
+  nameRow.textContent = s.name;
+  var badge = document.createElement('span');
+  badge.className = 'cron-card__badge' + (s.enabled !== false ? '' : ' cron-card__badge-off');
+  badge.textContent = (s.enabled !== false) ? '启用' : '停用';
+  nameRow.appendChild(badge);
+  info.appendChild(nameRow);
+
+  var detail = document.createElement('div'); detail.className = 'cron-card__detail';
+  detail.textContent = s.path || '';
+  info.appendChild(detail);
+
+  var actions = document.createElement('div'); actions.className = 'cron-card__actions';
+  var btnToggle = document.createElement('button');
+  btnToggle.type = 'button'; btnToggle.className = 'btn btn--ghost btn--xs';
+  btnToggle.textContent = (s.enabled !== false) ? '停用' : '启用';
+  btnToggle.addEventListener('click', function(ev) {
+    ev.stopPropagation();
+    s.enabled = !(s.enabled !== false);
+    toggleSkillEnabled(s);
+  });
+  actions.appendChild(btnToggle);
+
+  var btnDel = document.createElement('button');
+  btnDel.type = 'button'; btnDel.className = 'btn btn--ghost btn--xs cron-del'; btnDel.textContent = '删除';
+  btnDel.addEventListener('click', function(ev) {
+    ev.stopPropagation();
+    if (!confirm('确定删除技能「' + s.name + '」？')) return;
+    deleteSkill(s.name);
+  });
+  actions.appendChild(btnDel);
+
+  header.appendChild(info); header.appendChild(actions);
+
+  var editWrap = document.createElement('div'); editWrap.className = 'cron-edit-wrap'; editWrap.style.display = 'none';
+  var editStatus = document.createElement('div'); editStatus.className = 'status-line';
+  editWrap.innerHTML = '<label class="form-label">文件名</label>'
+    + '<input class="skill-fld-name" type="text" value="' + escAttr(s.name) + '" placeholder="my-skill.md"/>'
+    + '<label class="form-label">内容（Markdown）</label>'
+    + '<textarea class="skill-fld-body" spellcheck="false" style="height:200px;font-family:var(--font-mono);font-size:13px;width:100%;padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);resize:vertical;">' + escAttr(s.content || '') + '</textarea>'
+    + '<div class="row-actions" style="margin-top:var(--sp-2);">'
+    + '<button type="button" class="btn btn--primary btn--sm skill-save-btn">保存</button>'
+    + '<button type="button" class="btn btn--subtle btn--sm skill-cancel-btn">取消</button>'
+    + '</div>';
+  editWrap.appendChild(editStatus);
+
+  var toggleEdit = function(show) { editWrap.style.display = show ? 'block' : 'none'; editStatus.textContent = ''; editStatus.classList.remove('is-err'); };
+
+  // Toggle edit on header click
+  header.style.cursor = 'pointer';
+  header.addEventListener('click', function(e) {
+    if (e.target.closest('.btn') || e.target.closest('.cron-card__actions')) return;
+    toggleEdit(editWrap.style.display !== 'block');
+  });
+
+  editWrap.querySelector('.skill-cancel-btn').addEventListener('click', function() { toggleEdit(false); });
+  editWrap.querySelector('.skill-save-btn').addEventListener('click', async function() {
+    var name = editWrap.querySelector('.skill-fld-name').value.trim();
+    var body = editWrap.querySelector('.skill-fld-body').value;
+    if (!name) { editStatus.textContent = '文件名不能为空'; editStatus.classList.add('is-err'); return; }
+    editStatus.textContent = '保存中…';
+    editStatus.classList.remove('is-err');
+    try {
+      var r = await fetch('/api/ui/skills?agent_id=' + encodeURIComponent(_currentSkillAgentId()), {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'save', name: name, content: body })
+      });
+      var j = await r.json().catch(function() { return {}; });
+      if (!r.ok) throw new Error(j.detail || r.statusText);
+      editStatus.textContent = j.hint || '已保存。';
+      toggleEdit(false);
+      await loadSkills(_currentSkillAgentId());
+    } catch (e) { editStatus.classList.add('is-err'); editStatus.textContent = String(e); }
+  });
+
+  wrap.appendChild(header); wrap.appendChild(editWrap);
+  return wrap;
+}
+
+async function toggleSkillEnabled(s) {
+  try {
+    var r = await fetch('/api/ui/skills?agent_id=' + encodeURIComponent(_currentSkillAgentId()), {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'save', name: s.name, content: s.content || '', enabled: s.enabled })
+    });
+    if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
+    await loadSkills(_currentSkillAgentId());
+  } catch (e) {
+    const st = document.getElementById('skillStatus');
+    if (st) { st.classList.add('is-err'); st.textContent = String(e); }
+  }
+}
+
+async function deleteSkill(name) {
+  try {
+    var r = await fetch('/api/ui/skills?agent_id=' + encodeURIComponent(_currentSkillAgentId()), {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'delete', name: name })
+    });
+    if (!r.ok) throw new Error((await r.json()).detail || r.statusText);
+    await loadSkills(_currentSkillAgentId());
+  } catch (e) {
+    const st = document.getElementById('skillStatus');
+    if (st) { st.classList.add('is-err'); st.textContent = String(e); }
+  }
+}

codeagent/web/static/13a-todo-utils.js

@@ -0,0 +1,140 @@
+/* ================================================================
+ * 13-todos.js — Todo panel UI (v3: scope toggle + session isolation)
+ *   - render todo items from /api/ui/projects/todos
+ *   - scope toggle: 当前会话（session） / 全部（project）
+ *   - toggle checkboxes to update status
+ *   - delete buttons
+ *   - grouped by session_id with round identifiers
+ *   - auto-refresh on project changes
+ * ================================================================ */
+
+const btnToggleTodos = document.getElementById('btnToggleTodos');
+const todoPanel = document.getElementById('todoPanel');
+const todoList = document.getElementById('todoList');
+const btnTodoRefresh = document.getElementById('btnTodoRefresh');
+const todoScopeToggle = document.getElementById('todoScopeToggle');
+
+let todoScope = 'session'; // 'session' | 'project'
+
+// 用实际 DOM display 状态判断，避免被对方面板互斥关闭后状态不同步
+function todoIsVisible() {
+  return todoPanel.style.display === 'flex';
+}
+
+try {
+  if (tryGetLS(STORAGE_KEYS.TODO_PANEL_OPEN) === '1') {
+    // 初始化互斥：如果 Plan 已打开，不覆盖
+    var planP = document.getElementById('planPanel');
+    if (planP && planP.style.display === 'flex') {
+      // Plan 已开 → 忽略 localStorage，自己不打开
+    } else {
+      todoPanel.style.display = 'flex';
+      btnToggleTodos.classList.add('is-active');
+      setTimeout(function() { refreshTodos(); }, 100);
+    }
+  }
+} catch (_) {}
+
+try {
+  const saved = tryGetLS(STORAGE_KEYS.TODO_SCOPE);
+  if (saved === 'project' || saved === 'session') todoScope = saved;
+} catch (_) {}
+
+btnToggleTodos.addEventListener('click', () => {
+  var opening = !todoIsVisible();
+  todoPanel.style.display = opening ? 'flex' : 'none';
+  btnToggleTodos.classList.toggle('is-active', opening);
+  trySetLS(STORAGE_KEYS.TODO_PANEL_OPEN, opening ? '1' : '0');
+  // 互斥：打开待办时自动关闭计划面板
+  if (opening) {
+    var planPanel = document.getElementById('planPanel');
+    var planBtn = document.getElementById('btnTogglePlans');
+    if (planPanel && planPanel.style.display !== 'none') {
+      planPanel.style.display = 'none';
+      if (planBtn) planBtn.classList.remove('is-active');
+      trySetLS(STORAGE_KEYS.PLAN_PANEL_OPEN, '0');
+    }
+    refreshTodos();
+  }
+});
+
+if (btnTodoRefresh) { btnTodoRefresh.addEventListener('click', refreshTodos); }
+
+/* ---- Scope toggle ---- */
+
+function applyScopeUI() {
+  if (!todoScopeToggle) return;
+  const btns = todoScopeToggle.querySelectorAll('.todo-scope-btn');
+  for (const btn of btns) {
+    btn.classList.toggle('is-active', btn.dataset.scope === todoScope);
+  }
+}
+
+if (todoScopeToggle) {
+  todoScopeToggle.addEventListener('click', (e) => {
+    const btn = e.target.closest('.todo-scope-btn');
+    if (!btn) return;
+    const scope = btn.dataset.scope;
+    if (scope === todoScope) return;
+    todoScope = scope;
+    trySetLS(STORAGE_KEYS.TODO_SCOPE, todoScope);
+    applyScopeUI();
+    refreshTodos();
+  });
+  applyScopeUI();
+}
+
+/* ---- helpers ---- */
+
+function shortenId(id) {
+  if (!id) return '—';
+  return id.length > 8 ? id.slice(0, 8) : id;
+}
+
+function formatRelativeTime(isoStr) {
+  if (!isoStr) return '';
+  const then = new Date(isoStr);
+  if (isNaN(then.getTime())) return isoStr;
+  const diffMs = Date.now() - then.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 10) return '刚刚';
+  if (diffSec < 60) return diffSec + '秒前';
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return diffMin + '分钟前';
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return diffHr + '小时前';
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffDay < 30) return diffDay + '天前';
+  return then.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+}
+
+// Deterministic color from session_id hash
+const sessionColors = [
+  { bg: '#e3f2fd', text: '#1565c0', border: '#90caf9' },
+  { bg: '#fce4ec', text: '#c62828', border: '#f48fb1' },
+  { bg: '#e8f5e9', text: '#2e7d32', border: '#a5d6a7' },
+  { bg: '#fff3e0', text: '#e65100', border: '#ffcc80' },
+  { bg: '#f3e5f5', text: '#7b1fa2', border: '#ce93d8' },
+  { bg: '#e0f7fa', text: '#00695c', border: '#80deea' },
+  { bg: '#fbe9e7', text: '#bf360c', border: '#ffab91' },
+  { bg: '#ede7f6', text: '#4527a0', border: '#b39ddb' },
+  { bg: '#f1f8e9', text: '#558b2f', border: '#aed581' },
+  { bg: '#fff8e1', text: '#f57f17', border: '#ffe082' },
+];
+
+function sessionColor(sessionId) {
+  if (!sessionId) return sessionColors[0];
+  let hash = 0;
+  for (let i = 0; i < sessionId.length; i++) {
+    hash = ((hash << 5) - hash) + sessionId.charCodeAt(i);
+    hash |= 0;
+  }
+  const idx = Math.abs(hash) % sessionColors.length;
+  return sessionColors[idx];
+}
+
+function formatSessionLabel(sessionId) {
+  if (!sessionId) return '未分组';
+  return shortenId(sessionId);
+}
+

codeagent/web/static/13b-todo-fetch.js

@@ -0,0 +1,106 @@
+/* ---- API ---- */
+
+async function fetchTodos() {
+  const pid = typeof projectId !== 'undefined' ? (projectId || '') : '';
+  if (!pid) return [];
+  try {
+    let url = '/api/ui/projects/todos?project_id=' + encodeURIComponent(pid)
+      + '&agent_id=' + encodeURIComponent(typeof agentId !== 'undefined' ? agentId : 'default');
+    // When scope is "session", filter by current session_id
+    if (todoScope === 'session') {
+      const sid = typeof sessionId !== 'undefined' ? (sessionId || '') : '';
+      if (sid) url += '&session_id=' + encodeURIComponent(sid);
+    }
+    const r = await fetch(url);
+    if (!r.ok) return [];
+    const j = await r.json();
+    return j.todos || [];
+  } catch (_) { return []; }
+}
+
+/* ---- Grouping & Rendering ---- */
+
+function groupBySession(todos) {
+  const groups = {};
+  for (const t of todos) {
+    const sid = t.session_id || '';
+    if (!groups[sid]) groups[sid] = [];
+    groups[sid].push(t);
+  }
+  for (const sid in groups) {
+    groups[sid].sort((a, b) => {
+      const da = a.created_at || '';
+      const db = b.created_at || '';
+      return da.localeCompare(db);
+    });
+  }
+  const keys = Object.keys(groups);
+  keys.sort((a, b) => {
+    const aOldest = groups[a][0]?.created_at || '';
+    const bOldest = groups[b][0]?.created_at || '';
+    const cmp = aOldest.localeCompare(bOldest);
+    if (cmp !== 0) return cmp;
+    return a.localeCompare(b);
+  });
+  return keys.map(k => ({ sessionId: k, items: groups[k] }));
+}
+
+async function refreshTodos() {
+  const todos = await fetchTodos();
+  if (!todoList) return;
+  todoList.innerHTML = '';
+  if (!todos || !todos.length) {
+    const msg = todoScope === 'session'
+      ? '当前会话暂无待办事项<br/>让 Agent 创建待办'
+      : '暂无待办事项<br/>在会话中让 Agent 创建待办';
+    todoList.innerHTML = '<div class="todo-empty">' + msg + '</div>';
+    return;
+  }
+  const grouped = groupBySession(todos);
+  let first = true;
+  for (const g of grouped) {
+    if (!first) {
+      const sep = document.createElement('div');
+      sep.className = 'todo-group-sep';
+      todoList.appendChild(sep);
+    }
+    first = false;
+    // In session scope, the group header is simpler — just a count
+    if (todoScope === 'session') {
+      // Show a minimal "来自当前会话" indicator instead of full group header
+      const c = sessionColor(g.sessionId);
+      const header = document.createElement('div');
+      header.className = 'todo-group-header';
+      header.innerHTML = '<span class="todo-group-badge" style="--gb-bg:' + c.bg + ';--gb-text:' + c.text + ';--gb-border:' + c.border + '">' + formatSessionLabel(g.sessionId) + '</span>'
+        + '<span class="todo-group-meta"><span class="todo-group-count">' + g.items.length + ' 项</span></span>';
+      todoList.appendChild(header);
+    } else {
+      todoList.appendChild(buildGroupHeader(g.sessionId, g.items));
+    }
+    for (const t of g.items) {
+      todoList.appendChild(buildTodoItem(t, g.sessionId));
+    }
+  }
+}
+
+function buildGroupHeader(sessionId, items) {
+  const c = sessionColor(sessionId);
+  const header = document.createElement('div');
+  header.className = 'todo-group-header';
+  const label = formatSessionLabel(sessionId);
+  const count = items.length;
+  const times = items.map(t => t.created_at).filter(Boolean).sort();
+  const timeStr = times.length > 0
+    ? formatRelativeTime(times[0]) + (times.length > 1 ? ' ~ ' + formatRelativeTime(times[times.length - 1]) : '')
+    : '';
+  header.innerHTML = `
+    <span class="todo-group-badge" style="--gb-bg:${c.bg};--gb-text:${c.text};--gb-border:${c.border}">
+      ${label}
+    </span>
+    <span class="todo-group-meta">
+      <span class="todo-group-count">${count} 项</span>
+      ${timeStr ? '<span class="todo-group-time">' + timeStr + '</span>' : ''}
+    </span>
+  `;
+  return header;
+}

codeagent/web/static/13b-tools.js

@@ -0,0 +1,127 @@
+function showNewSkillForm() {
+  var list = document.getElementById('skillList');
+  if (!list) return;
+  var existing = list.querySelector('.cron-card-wrap.is-new');
+  if (existing) existing.remove();
+
+  var wrap = document.createElement('div'); wrap.className = 'cron-card-wrap is-new';
+  var editWrap = document.createElement('div'); editWrap.className = 'cron-edit-wrap'; editWrap.style.display = 'block';
+  var editStatus = document.createElement('div'); editStatus.className = 'status-line';
+  editWrap.innerHTML = '<label class="form-label">文件名</label>'
+    + '<input class="skill-fld-name" type="text" placeholder="my-skill.md"/>'
+    + '<label class="form-label">内容（Markdown）</label>'
+    + '<textarea class="skill-fld-body" spellcheck="false" style="height:200px;font-family:var(--font-mono);font-size:13px;width:100%;padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);resize:vertical;"></textarea>'
+    + '<div class="row-actions" style="margin-top:var(--sp-2);">'
+    + '<button type="button" class="btn btn--primary btn--sm skill-save-btn">保存</button>'
+    + '<button type="button" class="btn btn--subtle btn--sm skill-cancel-btn">取消</button>'
+    + '</div>';
+  editWrap.appendChild(editStatus);
+
+  editWrap.querySelector('.skill-cancel-btn').addEventListener('click', function() { wrap.remove(); });
+  editWrap.querySelector('.skill-save-btn').addEventListener('click', async function() {
+    var name = editWrap.querySelector('.skill-fld-name').value.trim();
+    var body = editWrap.querySelector('.skill-fld-body').value;
+    if (!name) { editStatus.textContent = '文件名不能为空'; editStatus.classList.add('is-err'); return; }
+    editStatus.textContent = '保存中…';
+    editStatus.classList.remove('is-err');
+    try {
+      var r = await fetch('/api/ui/skills?agent_id=' + encodeURIComponent(_currentSkillAgentId()), {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'save', name: name, content: body })
+      });
+      var j = await r.json().catch(function() { return {}; });
+      if (!r.ok) throw new Error(j.detail || r.statusText);
+      wrap.remove();
+      await loadSkills(_currentSkillAgentId());
+    } catch (e) { editStatus.classList.add('is-err'); editStatus.textContent = String(e); }
+  });
+  wrap.appendChild(editWrap);
+  if (list.firstChild) list.insertBefore(wrap, list.firstChild);
+  else list.appendChild(wrap);
+}
+
+document.getElementById('btnSkillAdd') && document.getElementById('btnSkillAdd').addEventListener('click', showNewSkillForm);
+document.getElementById('btnSkillRefresh') && document.getElementById('btnSkillRefresh').addEventListener('click', function() { loadSkills(typeof _currentSkillAgentId === 'function' ? _currentSkillAgentId() : undefined); });
+
+// ---------------- Tool (integrated plugins) management ----------------
+
+async function loadTools() {
+  const list = document.getElementById('toolList');
+  const status = document.getElementById('toolStatus');
+  if (!list) return;
+  status.textContent = '';
+  status.classList.remove('is-err');
+  try {
+    const r = await fetch('/api/ui/plugins');
+    const j = await r.json();
+    if (!r.ok) throw new Error(j.detail || r.statusText);
+    list.innerHTML = '';
+
+    var tools = j.plugins || {};
+    var toolKeys = Object.keys(tools);
+    if (toolKeys.length === 0) {
+      list.innerHTML = '<div class="cron-empty">暂无可用工具。</div>';
+      if (status) status.textContent = '0 个可用工具';
+      return;
+    }
+    toolKeys.forEach(function(tid) {
+      var t = tools[tid] || {};
+      var wrap = document.createElement('div'); wrap.className = 'tool-card-wrap';
+      var card = document.createElement('div'); card.className = 'cron-card';
+      var info = document.createElement('div'); info.className = 'cron-card__info';
+      var nameRow = document.createElement('div'); nameRow.className = 'cron-card__name';
+      nameRow.textContent = tid;
+      var badge = document.createElement('span');
+      badge.className = 'cron-card__badge' + (t.enabled !== false ? '' : ' cron-card__badge-off');
+      badge.textContent = (t.enabled !== false) ? '启用' : '停用';
+      nameRow.appendChild(badge);
+      info.appendChild(nameRow);
+      var detail = document.createElement('div'); detail.className = 'cron-card__detail';
+      detail.textContent = t.description || '';
+      info.appendChild(detail);
+      var actions = document.createElement('div'); actions.className = 'cron-card__actions';
+      var btn = document.createElement('button');
+      btn.type = 'button'; btn.className = 'btn btn--ghost btn--xs';
+      btn.textContent = (t.enabled !== false) ? '停用' : '启用';
+      btn.addEventListener('click', function(ev) {
+        ev.stopPropagation();
+        toggleTool(tid, !(t.enabled !== false));
+      });
+      actions.appendChild(btn);
+      card.appendChild(info); card.appendChild(actions);
+      wrap.appendChild(card);
+      list.appendChild(wrap);
+    });
+    if (status) status.textContent = '共 ' + toolKeys.length + ' 个可用工具';
+  } catch (e) {
+    if (status) { status.classList.add('is-err'); status.textContent = String(e); }
+  }
+}
+
+async function toggleTool(toolId, enabled) {
+  const body = {};
+  body[toolId] = { enabled: enabled };
+  try {
+    const r = await fetch('/api/ui/plugins', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ plugins: body }) });
+    const j = await r.json();
+    if (!r.ok) throw new Error(j.detail || r.statusText);
+    await loadTools();
+  } catch (e) {
+    const st = document.getElementById('toolStatus');
+    if (st) { st.classList.add('is-err'); st.textContent = String(e); }
+  }
+}
+
+document.getElementById('btnToolRefresh') && document.getElementById('btnToolRefresh').addEventListener('click', function() { loadTools(); });
+
+// ---------------- Agent page load orchestration ----------------
+
+async function loadAgentPage() {
+  // 单 Agent 模式：加载当前 Agent 的技能、工具和身份配置文件
+  if (typeof renderCurrentAgent === 'function') renderCurrentAgent();
+  await loadSkills();
+  await loadTools();
+  if (typeof loadMdFiles === 'function') {
+    await loadMdFiles();
+  }
+}

codeagent/web/static/13c-todo-crud.js

@@ -0,0 +1,92 @@
+function buildTodoItem(todo, sessionId) {
+  const c = sessionColor(sessionId);
+  const wrap = document.createElement('div');
+  wrap.className = 'todo-item';
+  wrap.dataset.todoId = todo.id;
+
+  // ── Main row: checkbox + content + delete ──
+  const mainRow = document.createElement('div');
+  mainRow.className = 'todo-item__main';
+
+  const cb = document.createElement('input');
+  cb.type = 'checkbox';
+  cb.className = 'todo-item__checkbox';
+  cb.checked = todo.status === 'completed';
+  cb.addEventListener('change', async () => {
+    await updateTodoApi(todo.id, { status: cb.checked ? 'completed' : 'pending' });
+    refreshTodos();
+  });
+
+  const content = document.createElement('span');
+  content.className = 'todo-item__content' + (todo.status === 'completed' ? ' todo-item__content--done' : '');
+  content.textContent = todo.content;
+
+  const delBtn = document.createElement('button');
+  delBtn.className = 'todo-item__delete';
+  delBtn.textContent = '\u00D7';
+  delBtn.title = '删除';
+  delBtn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    await deleteTodoApi(todo.id);
+    refreshTodos();
+  });
+
+  mainRow.appendChild(cb);
+  mainRow.appendChild(content);
+  mainRow.appendChild(delBtn);
+
+  // ── Meta row: time + status + (optional) session badge ──
+  const metaRow = document.createElement('div');
+  metaRow.className = 'todo-item__meta';
+
+  const timeBadge = document.createElement('span');
+  timeBadge.className = 'todo-item__time';
+  timeBadge.textContent = formatRelativeTime(todo.created_at);
+  timeBadge.title = todo.created_at || '';
+
+  const statusBadge = document.createElement('span');
+  statusBadge.className = 'todo-item__status todo-item__status--' + todo.status;
+  const statusLabels = { pending: '待办', in_progress: '进行中', completed: '已完成', cancelled: '已取消' };
+  statusBadge.textContent = statusLabels[todo.status] || todo.status;
+
+  metaRow.appendChild(timeBadge);
+  metaRow.appendChild(statusBadge);
+
+  // Session badge — only in project scope (all sessions mode)
+  if (todoScope === 'project' && sessionId) {
+    const sidBadge = document.createElement('span');
+    sidBadge.className = 'todo-item__session';
+    sidBadge.style.setProperty('--s-bg', c.bg);
+    sidBadge.style.setProperty('--s-text', c.text);
+    sidBadge.style.setProperty('--s-border', c.border);
+    sidBadge.textContent = formatSessionLabel(sessionId);
+    sidBadge.title = '会话 ID: ' + (sessionId || '未分组');
+    metaRow.appendChild(sidBadge);
+  }
+
+  wrap.appendChild(mainRow);
+  wrap.appendChild(metaRow);
+  return wrap;
+}
+
+/* ---- Network ---- */
+
+async function updateTodoApi(todoId, updates) {
+  const pid = typeof projectId !== 'undefined' ? (projectId || '') : '';
+  try {
+    await fetch('/api/ui/projects/todos/' + encodeURIComponent(todoId), {
+      method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(Object.assign({ project_id: pid, agent_id: typeof agentId !== 'undefined' ? agentId : 'default' }, updates))
+    });
+  } catch (_) {}
+}
+
+async function deleteTodoApi(todoId) {
+  const pid = typeof projectId !== 'undefined' ? (projectId || '') : '';
+  try {
+    await fetch('/api/ui/projects/todos/' + encodeURIComponent(todoId) + '?project_id=' + encodeURIComponent(pid) + '&agent_id=' + encodeURIComponent(typeof agentId !== 'undefined' ? agentId : 'default'), { method: 'DELETE' });
+  } catch (_) {}
+}
+
+window.addEventListener('project-changed', () => { if (todoIsVisible()) refreshTodos(); });
+window.addEventListener('session-changed', () => { if (todoIsVisible()) refreshTodos(); });