project-mgr 0.2.0 → 0.3.0

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    }";

package/dist/web/styles.js

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

package/dist/web/ui.d.ts

@@ -1 +1,3 @@
-export declare function getWebUIHTML(): string;
+import { type Locale } from "./i18n.js";
+export type { I18nKey, Locale, LocaleMessages } from "./i18n.js";
+export declare function getWebUIHTML(defaultLang?: Locale): string;