project-mgr 0.3.2 → 0.5.0

package/dist/domain.js

@@ -16,6 +16,8 @@ const keys = new Set([
     "progress",
     "blockers",
     "nextSteps",
+    "nextTodoUids",
+    "nextStepsSourceUid",
     "decisions",
     "tags",
     "occurredAt",
@@ -66,6 +68,14 @@ function textList(value, field) {
         throw new ValidationError(`${field} must be an array of at most 100 strings`);
     return value.map((item) => text(item, field, true));
 }
+function uidList(value, field) {
+    if (!Array.isArray(value) || value.length > 100)
+        throw new ValidationError(`${field} must be an array of at most 100 uuids`);
+    const uids = value.map((item) => validateUid(item));
+    if (new Set(uids).size !== uids.length)
+        throw new ValidationError(`${field} contains a duplicate uid`);
+    return uids;
+}
 export function parseTime(value, field) {
     if (typeof value !== "string" ||
         !/^\d{4}-\d{2}-\d{2}T.*(?:Z|[+-]\d{2}:\d{2})$/.test(value) ||
@@ -120,6 +130,18 @@ export function validateStatusEntry(value, defaultSource = "human") {
     const externalRef = text(input.externalRef, "externalRef");
     if (externalRef && externalRef.length > 200)
         throw new ValidationError("externalRef must be at most 200 characters");
+    const nextSteps = textList(input.nextSteps, "nextSteps");
+    const nextStepsSourceUid = input.nextStepsSourceUid === undefined
+        ? undefined
+        : validateUid(input.nextStepsSourceUid);
+    // null and omission both mean legacy rows: the refs field is absent, not [].
+    const nextTodoUids = input.nextTodoUids === undefined || input.nextTodoUids === null
+        ? undefined
+        : uidList(input.nextTodoUids, "nextTodoUids");
+    if (nextTodoUids !== undefined && nextSteps.length > 0)
+        throw new ValidationError("cannot combine nextSteps text with nextTodoUids");
+    if (nextTodoUids !== undefined && nextStepsSourceUid !== undefined)
+        throw new ValidationError("invalid next step provenance");
     return {
         ...(input.uid === undefined ? {} : { uid: validateUid(input.uid) }),
         project,
@@ -127,7 +149,9 @@ export function validateStatusEntry(value, defaultSource = "human") {
         summary: text(input.summary, "summary", true),
         progress: text(input.progress, "progress"),
         blockers: textList(input.blockers, "blockers"),
-        nextSteps: textList(input.nextSteps, "nextSteps"),
+        nextSteps,
+        ...(nextTodoUids !== undefined ? { nextTodoUids } : {}),
+        ...(nextStepsSourceUid !== undefined ? { nextStepsSourceUid } : {}),
         decisions: textList(input.decisions, "decisions"),
         tags: textList(input.tags, "tags"),
         occurredAt: input.occurredAt === undefined
@@ -150,6 +174,10 @@ export function toPortableStatusEntry(entry) {
         occurredAt: entry.occurredAt,
         source: entry.source,
     };
+    if (entry.nextStepsSourceUid !== undefined)
+        result.nextStepsSourceUid = entry.nextStepsSourceUid;
+    if (entry.nextTodoUids !== undefined)
+        result.nextTodoUids = entry.nextTodoUids;
     if (entry.progress !== undefined)
         result.progress = entry.progress;
     if (entry.externalRef !== undefined)

package/dist/server.js

@@ -1,23 +1,23 @@
-import { exec } from "node:child_process";
+import { spawn } from "node:child_process";
 import { createServer, } from "node:http";
 import { URL } from "node:url";
-import { countEntries, getEntry, history, listProjects, openLedger, } from "./db.js";
+import { countEntries, createTodo, listTodos, updateTodo, convertNextStep, completeActivity, getEntry, history, listProjects, openLedger, } from "./db.js";
+import { ValidationError } from "./domain.js";
 import { getWebUIHTML } from "./web/ui.js";
 export function openBrowser(url) {
     const platform = process.platform;
-    let command = "";
-    if (platform === "darwin") {
-        command = `open "${url}"`;
-    }
-    else if (platform === "win32") {
-        command = `start "" "${url}"`;
-    }
-    else {
-        command = `xdg-open "${url}"`;
-    }
-    exec(command, () => {
-        /* ignore background exec errors */
+    const command = platform === "darwin" ? "open" : platform === "win32" ? "cmd" : "xdg-open";
+    const args = platform === "darwin"
+        ? [url]
+        : platform === "win32"
+            ? ["/c", "start", "", url]
+            : [url];
+    const child = spawn(command, args, { detached: true, stdio: "ignore" });
+    child.on("error", () => {
+        /* ignore background launch errors */
     });
+    // Detach so a long-lived browser does not keep this process alive.
+    child.unref();
 }
 function parseQueryParams(url) {
     const params = {};
@@ -34,6 +34,11 @@ function sendJson(res, statusCode, data) {
     res.end(JSON.stringify(data));
 }
 export function handleRequest(req, res, db) {
+    if (req.method === "POST" &&
+        /^\/api\/(todos(?:\/[^/]+)?|entries\/[^/]+\/(complete|todos))$/.test((req.url || "").split("?")[0])) {
+        void handleMutation(req, res, db);
+        return;
+    }
     if (req.method !== "GET" && req.method !== "HEAD") {
         sendJson(res, 405, { error: "Method not allowed" });
         return;
@@ -61,6 +66,20 @@ export function handleRequest(req, res, db) {
         res.end(getWebUIHTML());
         return;
     }
+    if (pathname === "/api/todos") {
+        const status = query.status;
+        if (status !== undefined &&
+            status !== "open" &&
+            status !== "completed" &&
+            status !== "cancelled") {
+            sendJson(res, 400, { error: "invalid todo status" });
+            return;
+        }
+        sendJson(res, 200, listTodos(db, query.project, status === undefined
+            ? {}
+            : { status: status }));
+        return;
+    }
     if (pathname === "/api/projects") {
         const projects = listProjects(db, { query: query.query });
         sendJson(res, 200, projects);
@@ -162,3 +181,68 @@ export function startServer(options = {}) {
         });
     });
 }
+async function handleMutation(req, res, db) {
+    try {
+        const host = req.headers.host;
+        if (!host ||
+            !/^(localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/.test(host) ||
+            (req.headers.origin !== undefined &&
+                req.headers.origin !== `http://${host}`) ||
+            (req.headers["sec-fetch-site"] !== undefined &&
+                !["same-origin", "none"].includes(String(req.headers["sec-fetch-site"])))) {
+            sendJson(res, 403, {
+                error: "Only same-origin local writes are allowed",
+            });
+            return;
+        }
+        if (req.headers["content-type"] !== "application/json") {
+            sendJson(res, 415, { error: "JSON required" });
+            return;
+        }
+        const chunks = [];
+        let size = 0;
+        for await (const chunk of req) {
+            const bytes = Buffer.from(chunk);
+            size += bytes.length;
+            if (size > 32768) {
+                sendJson(res, 413, { error: "Request too large" });
+                return;
+            }
+            chunks.push(bytes);
+        }
+        const input = JSON.parse(Buffer.concat(chunks).toString("utf8"));
+        const parts = new URL(req.url, `http://${host}`).pathname
+            .split("/")
+            .map(decodeURIComponent);
+        let result;
+        if (parts[2] === "todos")
+            result = parts[3]
+                ? updateTodo(db, parts[3], input)
+                : createTodo(db, input);
+        else {
+            if (!input || typeof input !== "object" || Array.isArray(input))
+                throw new ValidationError("expected an object");
+            const data = input;
+            if (parts[4] === "complete") {
+                if (Object.keys(data).length)
+                    throw new ValidationError("unexpected fields");
+                result = completeActivity(db, parts[3]);
+            }
+            else if (Object.keys(data).length === 1 && "index" in data)
+                result = convertNextStep(db, parts[3], data.index);
+            else {
+                if (Object.keys(data).some((key) => key !== "title"))
+                    throw new ValidationError("unexpected fields");
+                result = createTodo(db, { title: data.title, entryUid: parts[3] });
+            }
+        }
+        sendJson(res, 200, result);
+    }
+    catch (error) {
+        sendJson(res, error instanceof ValidationError ||
+            error instanceof SyntaxError ||
+            error instanceof URIError
+            ? 400
+            : 500, { error: error instanceof Error ? error.message : "Request failed" });
+    }
+}

package/dist/web/locales/en.js

@@ -1,4 +1,20 @@
 export const en = {
+    savedRefreshError: "Saved, but the list could not refresh. Refresh before retrying.",
+    todos: "Todos",
+    todoTitle: "Todo title",
+    addTodo: "Add Todo",
+    complete: "Mark completed",
+    convertTodo: "Convert to Todo",
+    noTodos: "No Todos",
+    noProject: "No project",
+    sourceEntry: "Source activity",
+    reopen: "Reopen",
+    cancelTodo: "Cancel Todo",
+    todo_open: "Open",
+    todo_completed: "Completed",
+    todo_cancelled: "Cancelled",
+    viewTodos: "View Todos",
+    chooseProject: "Assign project",
     htmlLang: "en",
     pageTitle: "Project Manager - Projects & Activity Feed",
     appTitle: "Project Manager",

package/dist/web/locales/zh.d.ts

@@ -1,4 +1,20 @@
 export declare const zh: {
+    readonly savedRefreshError: "已保存，但列表刷新失败。请先刷新页面，不要重复创建。";
+    readonly todos: "待办";
+    readonly todoTitle: "待办内容";
+    readonly addTodo: "新增待办";
+    readonly complete: "标为已完成";
+    readonly convertTodo: "转为待办";
+    readonly noTodos: "暂无待办";
+    readonly noProject: "不关联项目";
+    readonly sourceEntry: "来源动态";
+    readonly reopen: "重新打开";
+    readonly cancelTodo: "取消待办";
+    readonly todo_open: "待办";
+    readonly todo_completed: "已完成";
+    readonly todo_cancelled: "已取消";
+    readonly viewTodos: "查看待办";
+    readonly chooseProject: "关联项目";
     readonly htmlLang: "zh-CN";
     readonly pageTitle: "项目管理 - 项目与动态概览";
     readonly appTitle: "项目管理";

package/dist/web/locales/zh.js

@@ -1,4 +1,20 @@
 export const zh = {
+    savedRefreshError: "已保存，但列表刷新失败。请先刷新页面，不要重复创建。",
+    todos: "待办",
+    todoTitle: "待办内容",
+    addTodo: "新增待办",
+    complete: "标为已完成",
+    convertTodo: "转为待办",
+    noTodos: "暂无待办",
+    noProject: "不关联项目",
+    sourceEntry: "来源动态",
+    reopen: "重新打开",
+    cancelTodo: "取消待办",
+    todo_open: "待办",
+    todo_completed: "已完成",
+    todo_cancelled: "已取消",
+    viewTodos: "查看待办",
+    chooseProject: "关联项目",
     htmlLang: "zh-CN",
     pageTitle: "项目管理 - 项目与动态概览",
     appTitle: "项目管理",

package/dist/web/script.js

@@ -2,11 +2,13 @@ import { getClientI18nScript } from "./i18n.js";
 export function getWebUIScript(initialLang) {
     return `${getClientI18nScript(initialLang)}
 
+    let todosData = [];
     let projectsData = [];
     let historyData = [];
     let focusedEntry = null;
     let activeProjectFilter = null;
     let activeGroupMode = 'grouped';
+    let initialNavigation = true;
 
     function getTodayDateString() {
       const now = new Date();
@@ -32,13 +34,15 @@ export function getWebUIScript(initialLang) {
 
     async function fetchData() {
       try {
-        const [projRes, histRes, statsRes] = await Promise.all([
+        const [projRes, histRes, statsRes, todosRes] = await Promise.all([
           fetch('/api/projects'),
           fetch('/api/history?limit=1000'),
-          fetch('/api/stats')
+          fetch('/api/stats'),
+          fetch('/api/todos')
         ]);
 
-        if (projRes.ok) projectsData = await projRes.json();
+        if (![projRes, histRes, statsRes, todosRes].every(response => response.ok)) throw new Error(t('entryLoadError'));
+        projectsData = await projRes.json();
         if (histRes.ok) historyData = await histRes.json();
         if (statsRes.ok) {
           const stats = await statsRes.json();
@@ -47,24 +51,32 @@ export function getWebUIScript(initialLang) {
           document.getElementById('statUpdates').textContent = stats.totalEntries;
         }
 
+        if (!todosRes.ok) throw new Error('Todos unavailable');
+        todosData = await todosRes.json();
         render();
         if (typeof location !== 'undefined') {
           const ref = new URLSearchParams(location.search).get('entry');
           if (ref) {
-            switchTab('activity');
+            if (initialNavigation) switchTab('activity');
             const response = await fetch('/api/entries/' + encodeURIComponent(ref));
             if (!response.ok) throw new Error('Entry unavailable');
             focusedEntry = await response.json();
             render();
           }
         }
+        initialNavigation = false;
+        return true;
       } catch (err) {
+        document.getElementById('actionError').textContent = t('entryLoadError');
         console.error('Failed to load data', err);
         document.getElementById('timelineContainer').textContent = t('entryLoadError');
+        return false;
       }
     }
 
     function switchTab(tab) {
+      document.getElementById('tabTodos').classList.toggle('active', tab === 'todos');
+      document.getElementById('viewTodos').classList.toggle('active', tab === 'todos');
       document.getElementById('tabProjects').classList.toggle('active', tab === 'projects');
       document.getElementById('tabActivity').classList.toggle('active', tab === 'activity');
       document.getElementById('viewProjects').classList.toggle('active', tab === 'projects');
@@ -172,11 +184,20 @@ export function getWebUIScript(initialLang) {
             </div>
           \` : ''}
 
-          \${item.nextSteps && item.nextSteps.length ? \`
+          \${pinnedTodos(item).length ? \`
             <div class="section-box">
               <div class="section-title next-steps">\${escapeHtml(t('nextStepsTitle'))}</div>
               <ul class="bullet-list">
-                \${item.nextSteps.map(n => \`<li>\${escapeHtml(n)}</li>\`).join('')}
+                \${pinnedTodos(item).map(todo => \`<li><strong>\${escapeHtml(todo.title)}</strong> <span class="status-badge status-\${escapeHtml(todo.status)}">\${escapeHtml(t('todo_' + todo.status))}</span> <code>\${escapeHtml(todo.uid)}</code></li>\`).join('')}
+              </ul>
+            </div>
+          \` : ''}
+
+          \${!item.nextTodoUids && item.nextSteps && item.nextSteps.length ? \`
+            <div class="section-box">
+              <div class="section-title next-steps">\${escapeHtml(t('nextStepsTitle'))}</div>
+              <ul class="bullet-list">
+                \${item.nextSteps.map((n, index) => todosData.some(todo => todo.entryUid === (item.nextStepsSourceUid || item.uid) && todo.stepIndex === index) ? '' : \`<li>\${escapeHtml(n)} <button class="btn btn-sm" data-action="convert-todo" data-entry="\${escapeHtml(item.uid)}" data-index="\${index}">\${escapeHtml(t('convertTodo'))}</button></li>\`).join('')}
               </ul>
             </div>
           \` : ''}
@@ -196,6 +217,11 @@ export function getWebUIScript(initialLang) {
             </div>
           \` : ''}
           \${item.completedBy ? '</details>' : ''}
+          <div class="section-box">
+            <button class="btn" data-action="add-todo" data-entry="\${escapeHtml(item.uid)}">\${escapeHtml(t('addTodo'))}</button>
+            \${status !== 'completed' ? \`<button class="btn" data-action="complete-entry" data-entry="\${escapeHtml(item.uid)}">\${escapeHtml(t('complete'))}</button>\` : ''}
+            \${todosData.filter(todo => (todo.entryUid === item.uid || todo.entryUid === item.nextStepsSourceUid) && !(item.nextTodoUids || []).includes(todo.uid)).map(renderTodo).join('')}
+          </div>
         </div>
       \`;
     }
@@ -214,6 +240,7 @@ export function getWebUIScript(initialLang) {
       const query = document.getElementById('searchInput').value.trim().toLowerCase();
       const selectedDate = document.getElementById('activityDateInput').value;
 
+      renderTodos(query);
       // Render Active Filter Chip
       const filterBar = document.getElementById('filterBarContainer');
       const chip = document.getElementById('activeFilterChip');
@@ -265,12 +292,14 @@ export function getWebUIScript(initialLang) {
                     <div class="latest-summary">
                       <div class="latest-summary-title">\${escapeHtml(t('latestUpdate'))} (\${formatTime(p.latestStatus.occurredAt)})</div>
                       <div>\${escapeHtml(p.latestStatus.summary)}</div>
+                      \${Array.isArray(p.latestStatus.nextTodos) && p.latestStatus.nextTodos.length ? \`<ul class="bullet-list">\${p.latestStatus.nextTodos.map(todo => \`<li>\${escapeHtml(todo.title)} <span class="status-badge status-\${escapeHtml(todo.status)}">\${escapeHtml(t('todo_' + todo.status))}</span></li>\`).join('')}</ul>\` : ''}
                     </div>
                   \` : ''}
                 </div>
               </div>
               <div class="card-footer">
                 <span>\${escapeHtml(t('createdLabel'))} \${formatTime(p.createdAt)}</span>
+                <button class="btn" data-action="project-todos" data-project="\${escapeHtml(p.project)}">\${escapeHtml(t('viewTodos'))}</button>
                 <a class="link-btn" data-action="filter-project" data-project="\${escapeHtml(p.project)}">\${escapeHtml(t('viewActivity'))}</a>
               </div>
             </div>
@@ -352,5 +381,79 @@ export function getWebUIScript(initialLang) {
         .replace(/'/g, '&#039;');
     }
 
+
+    function projectOptions(selected) {
+      return '<option value="">' + escapeHtml(t('noProject')) + '</option>' + projectsData.map(p =>
+        '<option value="' + escapeHtml(p.project) + '"' + (selected === p.project ? ' selected' : '') + '>' + escapeHtml(p.displayName) + '</option>').join('');
+    }
+    function pinnedTodos(item) {
+      if (!Array.isArray(item.nextTodoUids)) return [];
+      const embedded = Array.isArray(item.nextTodos) ? item.nextTodos : [];
+      return item.nextTodoUids.map((uid) => {
+        const live = todosData.find((todo) => todo.uid === uid);
+        const snapshot = embedded.find((todo) => todo.uid === uid);
+        return live || snapshot || { uid, title: uid, status: 'open', project: null };
+      });
+    }
+    function renderTodo(todo) {
+      return '<div class="section-box"><strong>' + escapeHtml(todo.title) + '</strong> · ' + escapeHtml(t('todo_' + todo.status)) +
+        (todo.project ? ' · ' + escapeHtml(todo.project) : '') +
+        (todo.entryUid ? ' <a class="link-btn" href="?entry=' + encodeURIComponent(todo.entryUid) + '">' + escapeHtml(t('sourceEntry')) + '</a>' :
+          ' <label>' + escapeHtml(t('chooseProject')) + ' <select data-todo-project="' + escapeHtml(todo.uid) + '">' + projectOptions(todo.project) + '</select></label>') +
+        ' <button class="btn" data-action="todo-status" data-uid="' + escapeHtml(todo.uid) + '" data-status="' + (todo.status === 'open' ? 'completed' : 'open') + '">' + escapeHtml(t(todo.status === 'open' ? 'complete' : 'reopen')) + '</button>' +
+        (todo.status === 'open' ? ' <button class="btn" data-action="todo-status" data-uid="' + escapeHtml(todo.uid) + '" data-status="cancelled">' + escapeHtml(t('cancelTodo')) + '</button>' : '') + '</div>';
+    }
+    function renderTodos(query) {
+      const select = document.getElementById('todoProject');
+      select.innerHTML = projectOptions(select.value);
+      const todos = todosData.filter(todo => (!activeProjectFilter || todo.project === activeProjectFilter) &&
+        (!query || (todo.title + ' ' + (todo.project || '')).toLowerCase().includes(query)));
+      document.getElementById('todosContainer').innerHTML = todos.length ? todos.map(renderTodo).join('') : '<p>' + escapeHtml(t('noTodos')) + '</p>';
+    }
+    async function mutate(path, data) {
+      const response = await fetch(path, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)});
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.error || 'Request failed');
+      if (!await fetchData()) { const error = new Error(t('savedRefreshError')); error.saved = true; throw error; }
+    }
+    async function runAction(element, action) {
+      if (element.disabled) return;
+      element.disabled = true;
+      document.getElementById('actionError').textContent = '';
+      try { await action(); }
+      catch (error) { document.getElementById('actionError').textContent = error.message; }
+      finally { element.disabled = false; }
+    }
+    document.getElementById('todoForm').addEventListener('submit', function(event) {
+      event.preventDefault();
+      const button = this.querySelector('button');
+      runAction(button, async () => {
+        try {
+          await mutate('/api/todos', {title: document.getElementById('todoTitle').value, project: document.getElementById('todoProject').value || null});
+          document.getElementById('todoTitle').value = '';
+        } catch (error) {
+          if (error.saved) document.getElementById('todoTitle').value = '';
+          throw error;
+        }
+      });
+    });
+    document.addEventListener('change', function(event) {
+      const select = event.target.closest('[data-todo-project]');
+      if (select) runAction(select, () => mutate('/api/todos/' + select.dataset.todoProject, {project: select.value || null}));
+    });
+    document.addEventListener('click', function(event) {
+      const button = event.target.closest('[data-action]');
+      if (!button) return;
+      const data = button.dataset;
+      if (data.action === 'project-todos') { activeProjectFilter = data.project; switchTab('todos'); render(); document.getElementById('todoProject').value = data.project; return; }
+      if (data.action === 'complete-entry') runAction(button, () => mutate('/api/entries/' + data.entry + '/complete', {}));
+      if (data.action === 'convert-todo') runAction(button, () => mutate('/api/entries/' + data.entry + '/todos', {index: Number(data.index)}));
+      if (data.action === 'todo-status') runAction(button, () => mutate('/api/todos/' + data.uid, {status: data.status}));
+      if (data.action === 'add-todo') {
+        const title = window.prompt(t('todoTitle'));
+        if (title && title.trim()) runAction(button, () => mutate('/api/entries/' + data.entry + '/todos', {title}));
+      }
+    });
+
     fetchData();`;
 }

package/dist/web/styles.d.ts

@@ -1 +1 @@
-export declare const WEB_UI_STYLES = "    :root {\n      --bg: #0d1117;\n      --card-bg: #161b22;\n      --border: #30363d;\n      --text: #c9d1d9;\n      --text-muted: #8b949e;\n      --heading: #f0f6fc;\n      --accent: #58a6ff;\n      --accent-hover: #79c0ff;\n      --success: #3fb950;\n      --warning: #d29922;\n      --danger: #f85149;\n      --purple: #bc8cff;\n      --cyan: #39c5cf;\n      --radius: 8px;\n    }\n\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: var(--bg);\n      color: var(--text);\n      line-height: 1.5;\n      padding: 0;\n      margin: 0;\n      min-height: 100vh;\n    }\n\n    header {\n      background-color: var(--card-bg);\n      border-bottom: 1px solid var(--border);\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      padding: 1rem 1.5rem;\n    }\n\n    .header-container {\n      max-width: 1200px;\n      margin: 0 auto;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n    }\n\n    .brand {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n    }\n\n    .logo-icon {\n      width: 32px;\n      height: 32px;\n      background: linear-gradient(135deg, var(--accent), var(--purple));\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      font-weight: bold;\n      font-size: 1.1rem;\n    }\n\n    h1 {\n      font-size: 1.25rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n    }\n\n    .stats-bar {\n      display: flex;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n    }\n\n    .lang-switch {\n      display: inline-flex;\n      gap: 0.2rem;\n      background: var(--bg);\n      padding: 0.2rem;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n\n    .lang-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.25rem 0.65rem;\n      font-size: 0.8rem;\n      font-weight: 500;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .lang-btn:hover {\n      color: var(--heading);\n    }\n\n    .lang-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n      font-weight: 600;\n    }\n\n    .stat-pill {\n      background: rgba(255, 255, 255, 0.05);\n      border: 1px solid var(--border);\n      border-radius: 20px;\n      padding: 0.25rem 0.75rem;\n      font-size: 0.85rem;\n      display: flex;\n      align-items: center;\n      gap: 0.35rem;\n    }\n\n    .stat-val {\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .controls {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n      width: 100%;\n      max-width: 1200px;\n      margin: 1rem auto 0 auto;\n      padding: 0 1.5rem;\n    }\n\n    .search-box {\n      flex: 1;\n      min-width: 240px;\n      position: relative;\n    }\n\n    .search-input {\n      width: 100%;\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      color: var(--text);\n      padding: 0.5rem 0.75rem 0.5rem 2.25rem;\n      border-radius: var(--radius);\n      font-size: 0.9rem;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .search-input:focus {\n      border-color: var(--accent);\n    }\n\n    .search-icon {\n      position: absolute;\n      left: 0.75rem;\n      top: 50%;\n      transform: translateY(-50%);\n      color: var(--text-muted);\n      pointer-events: none;\n      font-size: 0.85rem;\n    }\n\n    .nav-tabs {\n      display: flex;\n      gap: 0.5rem;\n      background: var(--card-bg);\n      padding: 0.25rem;\n      border-radius: var(--radius);\n      border: 1px solid var(--border);\n    }\n\n    .tab-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.4rem 1rem;\n      font-size: 0.875rem;\n      font-weight: 500;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .tab-btn:hover {\n      color: var(--heading);\n    }\n\n    .tab-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n    }\n\n    .btn[hidden] { display: none !important; }\n    .btn {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      color: var(--text);\n      padding: 0.45rem 0.85rem;\n      border-radius: var(--radius);\n      font-size: 0.875rem;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.35rem;\n      transition: all 0.2s;\n    }\n\n    .btn:hover {\n      border-color: var(--text-muted);\n      color: var(--heading);\n    }\n\n    .btn-sm {\n      padding: 0.3rem 0.6rem;\n      font-size: 0.8rem;\n    }\n\n    .btn-primary {\n      background: var(--accent);\n      color: #ffffff;\n      border-color: var(--accent);\n      margin-top: 0.75rem;\n    }\n\n    .btn-primary:hover {\n      background: var(--accent-hover);\n      color: #ffffff;\n    }\n\n    main {\n      max-width: 1200px;\n      margin: 1.5rem auto;\n      padding: 0 1.5rem;\n    }\n\n    .view-panel {\n      display: none;\n    }\n\n    .view-panel.active {\n      display: block;\n    }\n\n    /* Activity Feed Toolbar & Grouping Toggle */\n    .activity-toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 0.75rem 1rem;\n      margin-bottom: 1.25rem;\n      flex-wrap: wrap;\n    }\n\n    .date-picker-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n      font-size: 0.9rem;\n      color: var(--heading);\n      font-weight: 500;\n      flex-wrap: wrap;\n    }\n\n    .date-input {\n      background: var(--bg);\n      border: 1px solid var(--border);\n      color: var(--heading);\n      padding: 0.35rem 0.65rem;\n      border-radius: 6px;\n      font-size: 0.875rem;\n      outline: none;\n      font-family: inherit;\n    }\n\n    .date-input:focus {\n      border-color: var(--accent);\n    }\n\n    .view-mode-toggle {\n      display: flex;\n      gap: 0.25rem;\n      background: var(--bg);\n      padding: 0.2rem;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n\n    .mode-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.3rem 0.75rem;\n      font-size: 0.8rem;\n      font-weight: 500;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .mode-btn:hover {\n      color: var(--heading);\n    }\n\n    .mode-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n      font-weight: 600;\n    }\n\n    /* Project Grouping Container */\n    .project-group-card {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n\n    .project-group-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      border-bottom: 1px solid var(--border);\n      padding-bottom: 0.75rem;\n      margin-bottom: 1rem;\n    }\n\n    .project-group-title {\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n      font-size: 1.1rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .project-group-count {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n      background: rgba(255, 255, 255, 0.06);\n      padding: 0.15rem 0.55rem;\n      border-radius: 12px;\n    }\n\n    /* Projects Grid */\n    .projects-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n      gap: 1.25rem;\n    }\n\n    .project-card {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      transition: transform 0.15s, border-color 0.15s;\n    }\n\n    .project-card:hover {\n      border-color: var(--text-muted);\n      transform: translateY(-2px);\n    }\n\n    .card-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 0.75rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .project-title {\n      font-size: 1.1rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .project-slug {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n      font-family: monospace;\n    }\n\n    .completion-evidence { margin: 12px 0; line-height: 1.7; }\n    details > summary { cursor: pointer; margin: 12px 0; }\n    .status-badge {\n      font-size: 0.75rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      padding: 0.2rem 0.55rem;\n      border-radius: 12px;\n      display: inline-block;\n      white-space: nowrap;\n    }\n\n    .status-active { background: rgba(63, 185, 80, 0.15); color: var(--success); border: 1px solid rgba(63, 185, 80, 0.3); }\n    .status-planned { background: rgba(88, 166, 255, 0.15); color: var(--accent); border: 1px solid rgba(88, 166, 255, 0.3); }\n    .status-idea { background: rgba(188, 140, 255, 0.15); color: var(--purple); border: 1px solid rgba(188, 140, 255, 0.3); }\n    .status-blocked { background: rgba(248, 81, 73, 0.15); color: var(--danger); border: 1px solid rgba(248, 81, 73, 0.3); }\n    .status-paused { background: rgba(210, 153, 34, 0.15); color: var(--warning); border: 1px solid rgba(210, 153, 34, 0.3); }\n    .status-completed { background: rgba(57, 197, 207, 0.15); color: var(--cyan); border: 1px solid rgba(57, 197, 207, 0.3); }\n    .status-archived { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border: 1px solid rgba(139, 148, 158, 0.3); }\n\n    .card-body {\n      margin-bottom: 1rem;\n      font-size: 0.9rem;\n    }\n\n    .card-description {\n      color: var(--text);\n      margin-bottom: 0.5rem;\n    }\n\n    .card-notes {\n      color: var(--text-muted);\n      font-size: 0.85rem;\n      font-style: italic;\n      border-left: 2px solid var(--border);\n      padding-left: 0.5rem;\n      margin-top: 0.5rem;\n    }\n\n    .latest-summary {\n      background: rgba(0, 0, 0, 0.2);\n      padding: 0.6rem;\n      border-radius: 6px;\n      margin-top: 0.75rem;\n      font-size: 0.85rem;\n    }\n\n    .latest-summary-title {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      text-transform: uppercase;\n      margin-bottom: 0.25rem;\n    }\n\n    .card-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: 0.85rem;\n      color: var(--text-muted);\n      border-top: 1px solid var(--border);\n      padding-top: 0.75rem;\n      margin-top: auto;\n    }\n\n    .link-btn {\n      color: var(--accent);\n      text-decoration: none;\n      cursor: pointer;\n      font-weight: 500;\n    }\n\n    .link-btn:hover {\n      text-decoration: underline;\n    }\n\n    /* Timeline View */\n    .timeline {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      position: relative;\n    }\n\n    .timeline-item {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      position: relative;\n    }\n\n    .timeline-header {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.5rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .timeline-meta {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .project-tag {\n      background: rgba(88, 166, 255, 0.1);\n      color: var(--accent);\n      border: 1px solid rgba(88, 166, 255, 0.2);\n      padding: 0.15rem 0.5rem;\n      border-radius: 4px;\n      font-family: monospace;\n      font-size: 0.85rem;\n      cursor: pointer;\n    }\n\n    .time-stamp {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n    }\n\n    .source-badge {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      background: rgba(255, 255, 255, 0.05);\n      padding: 0.1rem 0.4rem;\n      border-radius: 4px;\n    }\n\n    .entry-summary {\n      font-size: 1rem;\n      font-weight: 500;\n      color: var(--heading);\n      margin-bottom: 0.5rem;\n    }\n\n    .entry-progress {\n      font-size: 0.9rem;\n      color: var(--text);\n      margin-bottom: 0.75rem;\n    }\n\n    .section-box {\n      margin-top: 0.5rem;\n      font-size: 0.875rem;\n    }\n\n    .section-title {\n      font-weight: 600;\n      font-size: 0.8rem;\n      text-transform: uppercase;\n      margin-bottom: 0.25rem;\n      display: flex;\n      align-items: center;\n      gap: 0.25rem;\n    }\n\n    .section-title.blockers { color: var(--danger); }\n    .section-title.next-steps { color: var(--accent); }\n    .section-title.decisions { color: var(--purple); }\n\n    .bullet-list {\n      list-style: disc inside;\n      color: var(--text);\n      padding-left: 0.25rem;\n    }\n\n    .bullet-list li {\n      margin-bottom: 0.2rem;\n    }\n\n    .tags-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.35rem;\n      margin-top: 0.75rem;\n    }\n\n    .pill-tag {\n      background: rgba(255, 255, 255, 0.06);\n      border: 1px solid var(--border);\n      color: var(--text-muted);\n      font-size: 0.75rem;\n      padding: 0.1rem 0.45rem;\n      border-radius: 12px;\n    }\n\n    .empty-state {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: var(--text-muted);\n    }\n\n    .empty-state h3 {\n      color: var(--heading);\n      margin-bottom: 0.5rem;\n    }\n\n    .filter-bar {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin-bottom: 1rem;\n      font-size: 0.875rem;\n      color: var(--text-muted);\n    }\n\n    .filter-chip {\n      background: rgba(88, 166, 255, 0.15);\n      color: var(--accent);\n      padding: 0.2rem 0.6rem;\n      border-radius: 12px;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.3rem;\n    }\n\n    .filter-chip button {\n      background: none;\n      border: none;\n      color: var(--accent);\n      cursor: pointer;\n      font-weight: bold;\n    }";
+export declare const WEB_UI_STYLES = "    :root {\n      --bg: #0d1117;\n      --card-bg: #161b22;\n      --border: #30363d;\n      --text: #c9d1d9;\n      --text-muted: #8b949e;\n      --heading: #f0f6fc;\n      --accent: #58a6ff;\n      --accent-hover: #79c0ff;\n      --success: #3fb950;\n      --warning: #d29922;\n      --danger: #f85149;\n      --purple: #bc8cff;\n      --cyan: #39c5cf;\n      --radius: 8px;\n    }\n\n    * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n    }\n\n    body {\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      background-color: var(--bg);\n      color: var(--text);\n      line-height: 1.5;\n      padding: 0;\n      margin: 0;\n      min-height: 100vh;\n    }\n\n    header {\n      background-color: var(--card-bg);\n      border-bottom: 1px solid var(--border);\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      padding: 1rem 1.5rem;\n    }\n\n    .header-container {\n      max-width: 1200px;\n      margin: 0 auto;\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n    }\n\n    .brand {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n    }\n\n    .logo-icon {\n      width: 32px;\n      height: 32px;\n      background: linear-gradient(135deg, var(--accent), var(--purple));\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      font-weight: bold;\n      font-size: 1.1rem;\n    }\n\n    h1 {\n      font-size: 1.25rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n    }\n\n    .stats-bar {\n      display: flex;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n    }\n\n    .lang-switch {\n      display: inline-flex;\n      gap: 0.2rem;\n      background: var(--bg);\n      padding: 0.2rem;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n\n    .lang-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.25rem 0.65rem;\n      font-size: 0.8rem;\n      font-weight: 500;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .lang-btn:hover {\n      color: var(--heading);\n    }\n\n    .lang-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n      font-weight: 600;\n    }\n\n    .stat-pill {\n      background: rgba(255, 255, 255, 0.05);\n      border: 1px solid var(--border);\n      border-radius: 20px;\n      padding: 0.25rem 0.75rem;\n      font-size: 0.85rem;\n      display: flex;\n      align-items: center;\n      gap: 0.35rem;\n    }\n\n    .stat-val {\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .controls {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      flex-wrap: wrap;\n      width: 100%;\n      max-width: 1200px;\n      margin: 1rem auto 0 auto;\n      padding: 0 1.5rem;\n    }\n\n    .search-box {\n      flex: 1;\n      min-width: 240px;\n      position: relative;\n    }\n\n    .search-input {\n      width: 100%;\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      color: var(--text);\n      padding: 0.5rem 0.75rem 0.5rem 2.25rem;\n      border-radius: var(--radius);\n      font-size: 0.9rem;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .search-input:focus {\n      border-color: var(--accent);\n    }\n\n    .search-icon {\n      position: absolute;\n      left: 0.75rem;\n      top: 50%;\n      transform: translateY(-50%);\n      color: var(--text-muted);\n      pointer-events: none;\n      font-size: 0.85rem;\n    }\n\n    .nav-tabs {\n      display: flex;\n      gap: 0.5rem;\n      background: var(--card-bg);\n      padding: 0.25rem;\n      border-radius: var(--radius);\n      border: 1px solid var(--border);\n    }\n\n    .tab-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.4rem 1rem;\n      font-size: 0.875rem;\n      font-weight: 500;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .tab-btn:hover {\n      color: var(--heading);\n    }\n\n    .tab-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n    }\n\n    .btn[hidden] { display: none !important; }\n    .btn {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      color: var(--text);\n      padding: 0.45rem 0.85rem;\n      border-radius: var(--radius);\n      font-size: 0.875rem;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.35rem;\n      transition: all 0.2s;\n    }\n\n    .btn:hover {\n      border-color: var(--text-muted);\n      color: var(--heading);\n    }\n\n    .btn-sm {\n      padding: 0.3rem 0.6rem;\n      font-size: 0.8rem;\n    }\n\n    .btn-primary {\n      background: var(--accent);\n      color: #ffffff;\n      border-color: var(--accent);\n      margin-top: 0.75rem;\n    }\n\n    .btn-primary:hover {\n      background: var(--accent-hover);\n      color: #ffffff;\n    }\n\n    main {\n      max-width: 1200px;\n      margin: 1.5rem auto;\n      padding: 0 1.5rem;\n    }\n\n    .view-panel {\n      display: none;\n    }\n\n    .view-panel.active {\n      display: block;\n    }\n\n    /* Activity Feed Toolbar & Grouping Toggle */\n    .activity-toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 1rem;\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 0.75rem 1rem;\n      margin-bottom: 1.25rem;\n      flex-wrap: wrap;\n    }\n\n    .date-picker-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n      font-size: 0.9rem;\n      color: var(--heading);\n      font-weight: 500;\n      flex-wrap: wrap;\n    }\n\n    .date-input {\n      background: var(--bg);\n      border: 1px solid var(--border);\n      color: var(--heading);\n      padding: 0.35rem 0.65rem;\n      border-radius: 6px;\n      font-size: 0.875rem;\n      outline: none;\n      font-family: inherit;\n    }\n\n    .date-input:focus {\n      border-color: var(--accent);\n    }\n\n    .view-mode-toggle {\n      display: flex;\n      gap: 0.25rem;\n      background: var(--bg);\n      padding: 0.2rem;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n    }\n\n    .mode-btn {\n      background: transparent;\n      border: none;\n      color: var(--text-muted);\n      padding: 0.3rem 0.75rem;\n      font-size: 0.8rem;\n      font-weight: 500;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .mode-btn:hover {\n      color: var(--heading);\n    }\n\n    .mode-btn.active {\n      background: var(--accent);\n      color: #ffffff;\n      font-weight: 600;\n    }\n\n    /* Project Grouping Container */\n    .project-group-card {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      margin-bottom: 1.25rem;\n    }\n\n    .project-group-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      border-bottom: 1px solid var(--border);\n      padding-bottom: 0.75rem;\n      margin-bottom: 1rem;\n    }\n\n    .project-group-title {\n      display: flex;\n      align-items: center;\n      gap: 0.6rem;\n      font-size: 1.1rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .project-group-count {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n      background: rgba(255, 255, 255, 0.06);\n      padding: 0.15rem 0.55rem;\n      border-radius: 12px;\n    }\n\n    /* Projects Grid */\n    .projects-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n      gap: 1.25rem;\n    }\n\n    .project-card {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      transition: transform 0.15s, border-color 0.15s;\n    }\n\n    .project-card:hover {\n      border-color: var(--text-muted);\n      transform: translateY(-2px);\n    }\n\n    .card-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 0.75rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .project-title {\n      font-size: 1.1rem;\n      font-weight: 600;\n      color: var(--heading);\n    }\n\n    .project-slug {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n      font-family: monospace;\n    }\n\n    .completion-evidence { margin: 12px 0; line-height: 1.7; }\n    details > summary { cursor: pointer; margin: 12px 0; }\n    .status-badge {\n      font-size: 0.75rem;\n      font-weight: 600;\n      text-transform: uppercase;\n      padding: 0.2rem 0.55rem;\n      border-radius: 12px;\n      display: inline-block;\n      white-space: nowrap;\n    }\n\n    .status-active { background: rgba(63, 185, 80, 0.15); color: var(--success); border: 1px solid rgba(63, 185, 80, 0.3); }\n    .status-planned { background: rgba(88, 166, 255, 0.15); color: var(--accent); border: 1px solid rgba(88, 166, 255, 0.3); }\n    .status-idea { background: rgba(188, 140, 255, 0.15); color: var(--purple); border: 1px solid rgba(188, 140, 255, 0.3); }\n    .status-blocked { background: rgba(248, 81, 73, 0.15); color: var(--danger); border: 1px solid rgba(248, 81, 73, 0.3); }\n    .status-paused { background: rgba(210, 153, 34, 0.15); color: var(--warning); border: 1px solid rgba(210, 153, 34, 0.3); }\n    .status-completed { background: rgba(57, 197, 207, 0.15); color: var(--cyan); border: 1px solid rgba(57, 197, 207, 0.3); }\n    .status-archived { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border: 1px solid rgba(139, 148, 158, 0.3); }\n    .status-open { background: rgba(63, 185, 80, 0.15); color: var(--success); border: 1px solid rgba(63, 185, 80, 0.3); }\n    .status-cancelled { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border: 1px solid rgba(139, 148, 158, 0.3); }\n\n    .card-body {\n      margin-bottom: 1rem;\n      font-size: 0.9rem;\n    }\n\n    .card-description {\n      color: var(--text);\n      margin-bottom: 0.5rem;\n    }\n\n    .card-notes {\n      color: var(--text-muted);\n      font-size: 0.85rem;\n      font-style: italic;\n      border-left: 2px solid var(--border);\n      padding-left: 0.5rem;\n      margin-top: 0.5rem;\n    }\n\n    .latest-summary {\n      background: rgba(0, 0, 0, 0.2);\n      padding: 0.6rem;\n      border-radius: 6px;\n      margin-top: 0.75rem;\n      font-size: 0.85rem;\n    }\n\n    .latest-summary-title {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      text-transform: uppercase;\n      margin-bottom: 0.25rem;\n    }\n\n    .card-footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: 0.85rem;\n      color: var(--text-muted);\n      border-top: 1px solid var(--border);\n      padding-top: 0.75rem;\n      margin-top: auto;\n    }\n\n    .link-btn {\n      color: var(--accent);\n      text-decoration: none;\n      cursor: pointer;\n      font-weight: 500;\n    }\n\n    .link-btn:hover {\n      text-decoration: underline;\n    }\n\n    /* Timeline View */\n    .timeline {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      position: relative;\n    }\n\n    .timeline-item {\n      background: var(--card-bg);\n      border: 1px solid var(--border);\n      border-radius: var(--radius);\n      padding: 1.25rem;\n      position: relative;\n    }\n\n    .timeline-header {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 0.5rem;\n      margin-bottom: 0.75rem;\n    }\n\n    .timeline-meta {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .project-tag {\n      background: rgba(88, 166, 255, 0.1);\n      color: var(--accent);\n      border: 1px solid rgba(88, 166, 255, 0.2);\n      padding: 0.15rem 0.5rem;\n      border-radius: 4px;\n      font-family: monospace;\n      font-size: 0.85rem;\n      cursor: pointer;\n    }\n\n    .time-stamp {\n      font-size: 0.8rem;\n      color: var(--text-muted);\n    }\n\n    .source-badge {\n      font-size: 0.75rem;\n      color: var(--text-muted);\n      background: rgba(255, 255, 255, 0.05);\n      padding: 0.1rem 0.4rem;\n      border-radius: 4px;\n    }\n\n    .entry-summary {\n      font-size: 1rem;\n      font-weight: 500;\n      color: var(--heading);\n      margin-bottom: 0.5rem;\n    }\n\n    .entry-progress {\n      font-size: 0.9rem;\n      color: var(--text);\n      margin-bottom: 0.75rem;\n    }\n\n    .section-box {\n      margin-top: 0.5rem;\n      font-size: 0.875rem;\n    }\n\n    .section-title {\n      font-weight: 600;\n      font-size: 0.8rem;\n      text-transform: uppercase;\n      margin-bottom: 0.25rem;\n      display: flex;\n      align-items: center;\n      gap: 0.25rem;\n    }\n\n    .section-title.blockers { color: var(--danger); }\n    .section-title.next-steps { color: var(--accent); }\n    .section-title.decisions { color: var(--purple); }\n\n    .bullet-list {\n      list-style: disc inside;\n      color: var(--text);\n      padding-left: 0.25rem;\n    }\n\n    .bullet-list li {\n      margin-bottom: 0.2rem;\n    }\n\n    .tags-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.35rem;\n      margin-top: 0.75rem;\n    }\n\n    .pill-tag {\n      background: rgba(255, 255, 255, 0.06);\n      border: 1px solid var(--border);\n      color: var(--text-muted);\n      font-size: 0.75rem;\n      padding: 0.1rem 0.45rem;\n      border-radius: 12px;\n    }\n\n    .empty-state {\n      text-align: center;\n      padding: 3rem 1rem;\n      color: var(--text-muted);\n    }\n\n    .empty-state h3 {\n      color: var(--heading);\n      margin-bottom: 0.5rem;\n    }\n\n    .filter-bar {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin-bottom: 1rem;\n      font-size: 0.875rem;\n      color: var(--text-muted);\n    }\n\n    .filter-chip {\n      background: rgba(88, 166, 255, 0.15);\n      color: var(--accent);\n      padding: 0.2rem 0.6rem;\n      border-radius: 12px;\n      display: inline-flex;\n      align-items: center;\n      gap: 0.3rem;\n    }\n\n    .filter-chip button {\n      background: none;\n      border: none;\n      color: var(--accent);\n      cursor: pointer;\n      font-weight: bold;\n    }";

package/dist/web/styles.js

@@ -426,6 +426,8 @@ export const WEB_UI_STYLES = `    :root {
     .status-paused { background: rgba(210, 153, 34, 0.15); color: var(--warning); border: 1px solid rgba(210, 153, 34, 0.3); }
     .status-completed { background: rgba(57, 197, 207, 0.15); color: var(--cyan); border: 1px solid rgba(57, 197, 207, 0.3); }
     .status-archived { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border: 1px solid rgba(139, 148, 158, 0.3); }
+    .status-open { background: rgba(63, 185, 80, 0.15); color: var(--success); border: 1px solid rgba(63, 185, 80, 0.3); }
+    .status-cancelled { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); border: 1px solid rgba(139, 148, 158, 0.3); }
 
     .card-body {
       margin-bottom: 1rem;

package/dist/web/ui.js

@@ -45,6 +45,7 @@ ${WEB_UI_STYLES}
     <div class="nav-tabs">
       <button class="tab-btn active" id="tabProjects" data-i18n="projects" onclick="switchTab('projects')">${dict.projects}</button>
       <button class="tab-btn" id="tabActivity" data-i18n="activityFeed" onclick="switchTab('activity')">${dict.activityFeed}</button>
+      <button class="tab-btn" id="tabTodos" data-i18n="todos" onclick="switchTab('todos')">${dict.todos}</button>
     </div>
     <button class="btn" id="btnRefresh" data-i18n="refresh" onclick="refreshData()">${dict.refresh}</button>
   </div>
@@ -54,6 +55,17 @@ ${WEB_UI_STYLES}
       <span id="labelFilterByProject" data-i18n="filteringByProject">${dict.filteringByProject}</span> <span id="activeFilterChip" class="filter-chip"></span>
     </div>
 
+    <div id="actionError" role="alert"></div>
+    <div id="viewTodos" class="view-panel">
+      <form id="todoForm" class="section-box">
+        <label for="todoTitle" data-i18n="todoTitle">${dict.todoTitle}</label>
+        <input id="todoTitle" class="search-input" required maxlength="2000" />
+        <label for="todoProject" data-i18n="projects">${dict.projects}</label>
+        <select id="todoProject" class="date-input"></select>
+        <button class="btn" type="submit" data-i18n="addTodo">${dict.addTodo}</button>
+      </form>
+      <div id="todosContainer"></div>
+    </div>
     <!-- Projects View -->
     <div id="viewProjects" class="view-panel active">
       <div id="projectsContainer" class="projects-grid"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-mgr",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Local-first append-only project status ledger",
   "type": "module",
   "bin": {