project-mgr 0.2.1 → 0.3.1

package/dist/web/i18n.d.ts

@@ -0,0 +1,8 @@
+import { type I18nKey, type LocaleMessages } from "./locales/zh.js";
+export type { I18nKey, LocaleMessages };
+export type Locale = "zh" | "en";
+export declare const DEFAULT_LOCALE: Locale;
+export declare const locales: Record<Locale, LocaleMessages>;
+export declare function resolveLocale(lang?: unknown): Locale;
+export declare function getMessages(lang: Locale): LocaleMessages;
+export declare function getClientI18nScript(initialLang: Locale): string;

package/dist/web/i18n.js

@@ -0,0 +1,77 @@
+import { en } from "./locales/en.js";
+import { zh } from "./locales/zh.js";
+export const DEFAULT_LOCALE = "zh";
+export const locales = {
+    zh,
+    en,
+};
+export function resolveLocale(lang) {
+    return lang === "en" ? "en" : DEFAULT_LOCALE;
+}
+export function getMessages(lang) {
+    return locales[lang];
+}
+export function getClientI18nScript(initialLang) {
+    return `    const i18n = ${JSON.stringify(locales)};
+
+    let currentLang = "${initialLang}";
+    try {
+      const savedLang = localStorage.getItem("pmgr_lang");
+      if (savedLang === "zh" || savedLang === "en") {
+        currentLang = savedLang;
+      }
+    } catch {
+      /* ignore storage errors */
+    }
+
+    function t(key) {
+      return (i18n[currentLang] && i18n[currentLang][key]) || key;
+    }
+
+    function formatStatus(status) {
+      const raw = status || "none";
+      const key = "status_" + raw;
+      const val = t(key);
+      return val === key ? raw : val;
+    }
+
+    function formatSource(source) {
+      const raw = source || "";
+      const key = "source_" + raw;
+      const val = t(key);
+      return val === key ? raw : val;
+    }
+
+    function formatUpdateCount(count) {
+      if (currentLang === "zh") {
+        return \`\${count} 条动态\`;
+      }
+      return \`\${count} update\${count > 1 ? "s" : ""}\`;
+    }
+
+    function applyI18n() {
+      document.documentElement.lang = t("htmlLang");
+      document.title = t("pageTitle");
+      document.querySelectorAll("[data-i18n]").forEach((el) => {
+        el.textContent = t(el.dataset.i18n);
+      });
+      document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+        el.placeholder = t(el.dataset.i18nPlaceholder);
+      });
+      document.getElementById("langSwitch").setAttribute("aria-label", t("langSwitchAriaLabel"));
+      document.getElementById("btnLangZh").classList.toggle("active", currentLang === "zh");
+      document.getElementById("btnLangEn").classList.toggle("active", currentLang === "en");
+    }
+
+    function setLang(lang) {
+      if (lang !== "zh" && lang !== "en") return;
+      currentLang = lang;
+      try {
+        localStorage.setItem("pmgr_lang", currentLang);
+      } catch {
+        /* ignore storage errors */
+      }
+      applyI18n();
+      render();
+    }`;
+}

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

@@ -0,0 +1,2 @@
+import type { LocaleMessages } from "./zh.js";
+export declare const en: LocaleMessages;

package/dist/web/locales/en.js

@@ -0,0 +1,52 @@
+export const en = {
+    htmlLang: "en",
+    pageTitle: "Project Manager - Projects & Activity Feed",
+    appTitle: "Project Manager",
+    langSwitchAriaLabel: "Language Switcher",
+    statProjectsLabel: "Projects:",
+    statActiveLabel: "Active:",
+    statUpdatesLabel: "Updates:",
+    searchPlaceholder: "Search projects, status, or activity...",
+    projects: "Projects",
+    activityFeed: "Activity Feed",
+    refresh: "🔄 Refresh",
+    filteringByProject: "Filtering by project:",
+    dateLabel: "📅 Date:",
+    today: "Today",
+    showAllDates: "Show All Dates",
+    groupByProject: "📁 Group by Project",
+    flatList: "📜 Flat List",
+    noProjectsTitle: "No projects found",
+    noProjectsDesc: "No projects match your search or filter criteria.",
+    noActivityTitle: "No activity entries",
+    noActivityOnDate: "No activity entries on {date}",
+    noActivityDesc: "No status updates match the selected date or search filter.",
+    latestUpdate: "Latest Update",
+    createdLabel: "Created:",
+    viewActivity: "View Activity →",
+    progressLabel: "Progress:",
+    blockersTitle: "⛔ Blockers",
+    nextStepsTitle: "🎯 Next Steps",
+    decisionsTitle: "💡 Decisions",
+    backToActivities: "Back to activities",
+    currentStatus: "Current status",
+    superseded: "Superseded",
+    originalStatus: "Original status: ",
+    completedBy: "Completed by follow-up",
+    followUpTime: "Follow-up time: ",
+    completionRecorded: "Completion recorded: ",
+    originalRecord: "Original record",
+    entryLoadError: "Could not load activity. Please retry.",
+    sourcePrefix: "source: ",
+    status_idea: "idea",
+    status_planned: "planned",
+    status_active: "active",
+    status_blocked: "blocked",
+    status_paused: "paused",
+    status_completed: "completed",
+    status_archived: "archived",
+    status_none: "none",
+    source_human: "human",
+    source_agent: "agent",
+    source_import: "import",
+};

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

@@ -0,0 +1,54 @@
+export declare const zh: {
+    readonly htmlLang: "zh-CN";
+    readonly pageTitle: "项目管理 - 项目与动态概览";
+    readonly appTitle: "项目管理";
+    readonly langSwitchAriaLabel: "切换语言";
+    readonly statProjectsLabel: "项目：";
+    readonly statActiveLabel: "进行中：";
+    readonly statUpdatesLabel: "动态：";
+    readonly searchPlaceholder: "搜索项目、状态或动态...";
+    readonly projects: "项目列表";
+    readonly activityFeed: "动态流";
+    readonly refresh: "🔄 刷新";
+    readonly filteringByProject: "按项目筛选：";
+    readonly dateLabel: "📅 日期：";
+    readonly today: "今天";
+    readonly showAllDates: "显示全部日期";
+    readonly groupByProject: "📁 按项目分组";
+    readonly flatList: "📜 平铺列表";
+    readonly noProjectsTitle: "未找到项目";
+    readonly noProjectsDesc: "没有符合搜索或筛选条件的项目。";
+    readonly noActivityTitle: "暂无动态记录";
+    readonly noActivityOnDate: "{date} 暂无动态记录";
+    readonly noActivityDesc: "所选日期或搜索条件下暂无状态更新。";
+    readonly latestUpdate: "最新动态";
+    readonly createdLabel: "创建于：";
+    readonly viewActivity: "查看动态 →";
+    readonly progressLabel: "进展：";
+    readonly blockersTitle: "⛔ 阻塞项";
+    readonly nextStepsTitle: "🎯 下一步";
+    readonly decisionsTitle: "💡 决策";
+    readonly backToActivities: "返回动态列表";
+    readonly currentStatus: "当前状态";
+    readonly superseded: "已有后续更新";
+    readonly originalStatus: "当时状态：";
+    readonly completedBy: "由后续动态完成";
+    readonly followUpTime: "后续动态时间：";
+    readonly completionRecorded: "完成关联记录时间：";
+    readonly originalRecord: "原始记录";
+    readonly entryLoadError: "无法加载动态，请重试。";
+    readonly sourcePrefix: "来源：";
+    readonly status_idea: "构想";
+    readonly status_planned: "计划中";
+    readonly status_active: "进行中";
+    readonly status_blocked: "受阻";
+    readonly status_paused: "已暂停";
+    readonly status_completed: "已完成";
+    readonly status_archived: "已归档";
+    readonly status_none: "无状态";
+    readonly source_human: "人工";
+    readonly source_agent: "Agent";
+    readonly source_import: "导入";
+};
+export type I18nKey = keyof typeof zh;
+export type LocaleMessages = Record<I18nKey, string>;

package/dist/web/locales/zh.js

@@ -0,0 +1,52 @@
+export const zh = {
+    htmlLang: "zh-CN",
+    pageTitle: "项目管理 - 项目与动态概览",
+    appTitle: "项目管理",
+    langSwitchAriaLabel: "切换语言",
+    statProjectsLabel: "项目：",
+    statActiveLabel: "进行中：",
+    statUpdatesLabel: "动态：",
+    searchPlaceholder: "搜索项目、状态或动态...",
+    projects: "项目列表",
+    activityFeed: "动态流",
+    refresh: "🔄 刷新",
+    filteringByProject: "按项目筛选：",
+    dateLabel: "📅 日期：",
+    today: "今天",
+    showAllDates: "显示全部日期",
+    groupByProject: "📁 按项目分组",
+    flatList: "📜 平铺列表",
+    noProjectsTitle: "未找到项目",
+    noProjectsDesc: "没有符合搜索或筛选条件的项目。",
+    noActivityTitle: "暂无动态记录",
+    noActivityOnDate: "{date} 暂无动态记录",
+    noActivityDesc: "所选日期或搜索条件下暂无状态更新。",
+    latestUpdate: "最新动态",
+    createdLabel: "创建于：",
+    viewActivity: "查看动态 →",
+    progressLabel: "进展：",
+    blockersTitle: "⛔ 阻塞项",
+    nextStepsTitle: "🎯 下一步",
+    decisionsTitle: "💡 决策",
+    backToActivities: "返回动态列表",
+    currentStatus: "当前状态",
+    superseded: "已有后续更新",
+    originalStatus: "当时状态：",
+    completedBy: "由后续动态完成",
+    followUpTime: "后续动态时间：",
+    completionRecorded: "完成关联记录时间：",
+    originalRecord: "原始记录",
+    entryLoadError: "无法加载动态，请重试。",
+    sourcePrefix: "来源：",
+    status_idea: "构想",
+    status_planned: "计划中",
+    status_active: "进行中",
+    status_blocked: "受阻",
+    status_paused: "已暂停",
+    status_completed: "已完成",
+    status_archived: "已归档",
+    status_none: "无状态",
+    source_human: "人工",
+    source_agent: "Agent",
+    source_import: "导入",
+};

package/dist/web/script.d.ts

@@ -0,0 +1,2 @@
+import { type Locale } from "./i18n.js";
+export declare function getWebUIScript(initialLang: Locale): string;

package/dist/web/script.js

@@ -0,0 +1,356 @@
+import { getClientI18nScript } from "./i18n.js";
+export function getWebUIScript(initialLang) {
+    return `${getClientI18nScript(initialLang)}
+
+    let projectsData = [];
+    let historyData = [];
+    let focusedEntry = null;
+    let activeProjectFilter = null;
+    let activeGroupMode = 'grouped';
+
+    function getTodayDateString() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      return \`\${year}-\${month}-\${day}\`;
+    }
+
+    function getLocalDateString(isoStr) {
+      if (!isoStr) return '';
+      const d = new Date(isoStr);
+      if (isNaN(d.getTime())) return '';
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, '0');
+      const day = String(d.getDate()).padStart(2, '0');
+      return \`\${year}-\${month}-\${day}\`;
+    }
+
+    // Set default date input value to Today on page load
+    document.getElementById('activityDateInput').value = getTodayDateString();
+    applyI18n();
+
+    async function fetchData() {
+      try {
+        const [projRes, histRes, statsRes] = await Promise.all([
+          fetch('/api/projects'),
+          fetch('/api/history?limit=1000'),
+          fetch('/api/stats')
+        ]);
+
+        if (projRes.ok) projectsData = await projRes.json();
+        if (histRes.ok) historyData = await histRes.json();
+        if (statsRes.ok) {
+          const stats = await statsRes.json();
+          document.getElementById('statProjects').textContent = stats.totalProjects;
+          document.getElementById('statActive').textContent = stats.statusCounts.active || 0;
+          document.getElementById('statUpdates').textContent = stats.totalEntries;
+        }
+
+        render();
+        if (typeof location !== 'undefined') {
+          const ref = new URLSearchParams(location.search).get('entry');
+          if (ref) {
+            switchTab('activity');
+            const response = await fetch('/api/entries/' + encodeURIComponent(ref));
+            if (!response.ok) throw new Error('Entry unavailable');
+            focusedEntry = await response.json();
+            render();
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load data', err);
+        document.getElementById('timelineContainer').textContent = t('entryLoadError');
+      }
+    }
+
+    function switchTab(tab) {
+      document.getElementById('tabProjects').classList.toggle('active', tab === 'projects');
+      document.getElementById('tabActivity').classList.toggle('active', tab === 'activity');
+      document.getElementById('viewProjects').classList.toggle('active', tab === 'projects');
+      document.getElementById('viewActivity').classList.toggle('active', tab === 'activity');
+    }
+
+    function clearEntryFocus() {
+      focusedEntry = null;
+      if (typeof window !== 'undefined') {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('entry');
+        window.history.replaceState(null, '', url);
+      }
+    }
+
+    function returnToActivityList() {
+      clearEntryFocus();
+      activeProjectFilter = null;
+      document.getElementById('searchInput').value = '';
+      document.getElementById('activityDateInput').value = '';
+      render();
+    }
+
+    function refreshData() {
+      clearEntryFocus();
+      return fetchData();
+    }
+
+    function changeActivityDate() {
+      clearEntryFocus();
+      render();
+    }
+
+    function setActivityDateToday() {
+      clearEntryFocus();
+      document.getElementById('activityDateInput').value = getTodayDateString();
+      render();
+    }
+
+    function clearActivityDate() {
+      clearEntryFocus();
+      document.getElementById('activityDateInput').value = '';
+      render();
+    }
+
+    function setActivityGroupMode(mode) {
+      activeGroupMode = mode;
+      document.getElementById('modeGrouped').classList.toggle('active', mode === 'grouped');
+      document.getElementById('modeFlat').classList.toggle('active', mode === 'flat');
+      render();
+    }
+
+    function filterByProject(slug) {
+      clearEntryFocus();
+      activeProjectFilter = slug;
+      switchTab('activity');
+      render();
+    }
+
+    function clearProjectFilter() {
+      clearEntryFocus();
+      activeProjectFilter = null;
+      render();
+    }
+
+    document.getElementById('searchInput').addEventListener('input', () => { clearEntryFocus(); render(); });
+
+    function formatTime(isoStr) {
+      if (!isoStr) return '';
+      try {
+        const d = new Date(isoStr);
+        return d.toLocaleString(currentLang === 'zh' ? 'zh-CN' : 'en-US');
+      } catch {
+        return isoStr;
+      }
+    }
+
+    function renderTimelineItem(item) {
+      const status = item.effectiveStatus || item.status;
+      return \`
+        <div class="timeline-item" id="entry-\${escapeHtml(item.uid || item.id)}">
+          <div class="timeline-header">
+            <div class="timeline-meta">
+              <span class="project-tag" data-action="filter-project" data-project="\${escapeHtml(item.project)}">\${escapeHtml(item.project)}</span>
+              <span class="status-badge status-\${escapeHtml(status)}">\${escapeHtml(formatStatus(status))}</span>
+              <span class="source-badge">\${escapeHtml(t(item.isCurrent ? "currentStatus" : "superseded"))}</span>
+              <span class="source-badge">\${escapeHtml(t('sourcePrefix'))}\${escapeHtml(formatSource(item.source))}</span>
+            </div>
+            <div class="time-stamp">\${formatTime(item.occurredAt)}</div>
+          </div>
+          <div class="entry-summary">\${escapeHtml(item.summary)}</div>
+          \${item.completedBy ? \`<div class="completion-evidence">
+            <a class="link-btn" href="?entry=\${encodeURIComponent(item.completedBy.uid)}">\${escapeHtml(t('completedBy'))}: #\${item.completedBy.id} — \${escapeHtml(item.completedBy.summary)}</a>
+            <div>\${escapeHtml(t('followUpTime'))} \${formatTime(item.completedBy.occurredAt)}</div>
+            <div>\${escapeHtml(t('completionRecorded'))} \${formatTime(item.completedBy.recordedAt)}</div>
+          </div><details><summary>\${escapeHtml(t('originalRecord'))} · \${escapeHtml(t('originalStatus'))} \${escapeHtml(formatStatus(item.status))}</summary>\` : ''}
+          \${item.progress ? \`<div class="entry-progress"><strong>\${escapeHtml(t('progressLabel'))}</strong> \${escapeHtml(item.progress)}</div>\` : ''}
+
+          \${item.blockers && item.blockers.length ? \`
+            <div class="section-box">
+              <div class="section-title blockers">\${escapeHtml(t('blockersTitle'))}</div>
+              <ul class="bullet-list">
+                \${item.blockers.map(b => \`<li>\${escapeHtml(b)}</li>\`).join('')}
+              </ul>
+            </div>
+          \` : ''}
+
+          \${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 => \`<li>\${escapeHtml(n)}</li>\`).join('')}
+              </ul>
+            </div>
+          \` : ''}
+
+          \${item.decisions && item.decisions.length ? \`
+            <div class="section-box">
+              <div class="section-title decisions">\${escapeHtml(t('decisionsTitle'))}</div>
+              <ul class="bullet-list">
+                \${item.decisions.map(d => \`<li>\${escapeHtml(d)}</li>\`).join('')}
+              </ul>
+            </div>
+          \` : ''}
+
+          \${item.tags && item.tags.length ? \`
+            <div class="tags-container">
+              \${item.tags.map(tag => \`<span class="pill-tag">#\${escapeHtml(tag)}</span>\`).join('')}
+            </div>
+          \` : ''}
+          \${item.completedBy ? '</details>' : ''}
+        </div>
+      \`;
+    }
+
+    document.addEventListener('click', function(e) {
+      const filterTarget = e.target.closest('[data-action="filter-project"]');
+      if (filterTarget && filterTarget.dataset.project) {
+        filterByProject(filterTarget.dataset.project);
+      }
+      if (e.target && e.target.id === 'btnClearFilter') {
+        clearProjectFilter();
+      }
+    });
+
+    function render() {
+      const query = document.getElementById('searchInput').value.trim().toLowerCase();
+      const selectedDate = document.getElementById('activityDateInput').value;
+
+      // Render Active Filter Chip
+      const filterBar = document.getElementById('filterBarContainer');
+      const chip = document.getElementById('activeFilterChip');
+      if (activeProjectFilter) {
+        filterBar.style.display = 'flex';
+        chip.innerHTML = \`\${escapeHtml(activeProjectFilter)} <button id="btnClearFilter">✕</button>\`;
+      } else {
+        filterBar.style.display = 'none';
+      }
+
+      // Render Projects
+      const projContainer = document.getElementById('projectsContainer');
+      const filteredProjects = projectsData.filter(p => {
+        if (activeProjectFilter && p.project !== activeProjectFilter) return false;
+        if (!query) return true;
+        const status = p.latestStatus ? p.latestStatus.status : 'none';
+        return p.project.toLowerCase().includes(query) ||
+               p.displayName.toLowerCase().includes(query) ||
+               status.toLowerCase().includes(query) ||
+               formatStatus(status).toLowerCase().includes(query) ||
+               (p.description && p.description.toLowerCase().includes(query)) ||
+               (p.notes && p.notes.toLowerCase().includes(query)) ||
+               (p.latestStatus && p.latestStatus.summary.toLowerCase().includes(query));
+      });
+
+      if (filteredProjects.length === 0) {
+        projContainer.innerHTML = \`
+          <div class="empty-state" style="grid-column: 1 / -1;">
+            <h3>\${t('noProjectsTitle')}</h3>
+            <p>\${t('noProjectsDesc')}</p>
+          </div>\`;
+      } else {
+        projContainer.innerHTML = filteredProjects.map(p => {
+          const status = p.latestStatus ? p.latestStatus.status : 'none';
+          return \`
+            <div class="project-card">
+              <div>
+                <div class="card-header">
+                  <div>
+                    <div class="project-title">\${escapeHtml(p.displayName)}</div>
+                    <div class="project-slug">\${escapeHtml(p.project)}</div>
+                  </div>
+                  <span class="status-badge status-\${status}">\${escapeHtml(formatStatus(status))}</span>
+                </div>
+                <div class="card-body">
+                  \${p.description ? \`<div class="card-description">\${escapeHtml(p.description)}</div>\` : ''}
+                  \${p.notes ? \`<div class="card-notes">\${escapeHtml(p.notes)}</div>\` : ''}
+                  \${p.latestStatus ? \`
+                    <div class="latest-summary">
+                      <div class="latest-summary-title">\${escapeHtml(t('latestUpdate'))} (\${formatTime(p.latestStatus.occurredAt)})</div>
+                      <div>\${escapeHtml(p.latestStatus.summary)}</div>
+                    </div>
+                  \` : ''}
+                </div>
+              </div>
+              <div class="card-footer">
+                <span>\${escapeHtml(t('createdLabel'))} \${formatTime(p.createdAt)}</span>
+                <a class="link-btn" data-action="filter-project" data-project="\${escapeHtml(p.project)}">\${escapeHtml(t('viewActivity'))}</a>
+              </div>
+            </div>
+          \`;
+        }).join('');
+      }
+
+      document.getElementById('btnBackToActivities').hidden = !focusedEntry;
+
+      // Render Timeline Feed
+      const timelineContainer = document.getElementById('timelineContainer');
+      const filteredHistory = focusedEntry ? [focusedEntry] : historyData.filter(h => {
+        if (activeProjectFilter && h.project !== activeProjectFilter) return false;
+        if (selectedDate && getLocalDateString(h.occurredAt) !== selectedDate) return false;
+        if (!query) return true;
+        return h.project.toLowerCase().includes(query) ||
+               (h.effectiveStatus || h.status).toLowerCase().includes(query) ||
+               formatStatus(h.effectiveStatus || h.status).toLowerCase().includes(query) ||
+               h.status.toLowerCase().includes(query) ||
+               formatStatus(h.status).toLowerCase().includes(query) ||
+               h.summary.toLowerCase().includes(query) ||
+               (h.progress && h.progress.toLowerCase().includes(query)) ||
+               h.tags.some(tag => tag.toLowerCase().includes(query));
+      });
+
+      if (filteredHistory.length === 0) {
+        const emptyTitle = selectedDate
+          ? t('noActivityOnDate').replace('{date}', selectedDate)
+          : t('noActivityTitle');
+        timelineContainer.innerHTML = \`
+          <div class="empty-state">
+            <h3>\${escapeHtml(emptyTitle)}</h3>
+            <p>\${t('noActivityDesc')}</p>
+            \${selectedDate ? \`<button class="btn btn-primary" onclick="clearActivityDate()">\${t('showAllDates')}</button>\` : ''}
+          </div>\`;
+      } else {
+        if (activeGroupMode === 'grouped') {
+          // Group by Project
+          const groups = {};
+          filteredHistory.forEach(item => {
+            if (!groups[item.project]) groups[item.project] = [];
+            groups[item.project].push(item);
+          });
+
+          timelineContainer.innerHTML = Object.keys(groups).map(projSlug => {
+            const projMeta = projectsData.find(p => p.project === projSlug);
+            const titleName = projMeta ? projMeta.displayName : projSlug;
+            const entries = groups[projSlug];
+
+            return \`
+              <div class="project-group-card">
+                <div class="project-group-header">
+                  <div class="project-group-title">
+                    📁 <span>\${escapeHtml(titleName)}</span>
+                    <span class="project-slug">(\${escapeHtml(projSlug)})</span>
+                  </div>
+                  <span class="project-group-count">\${escapeHtml(formatUpdateCount(entries.length))}</span>
+                </div>
+                <div class="timeline">
+                  \${entries.map(renderTimelineItem).join('')}
+                </div>
+              </div>
+            \`;
+          }).join('');
+        } else {
+          // Flat Timeline
+          timelineContainer.innerHTML = filteredHistory.map(renderTimelineItem).join('');
+        }
+      }
+    }
+
+    function escapeHtml(str) {
+      if (!str) return '';
+      return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    fetchData();`;
+}

package/dist/web/styles.d.ts

@@ -0,0 +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    }";