@codemem/server 0.30.0-alpha.5 → 0.31.0

package/static/index.html

@@ -1237,6 +1237,99 @@
         box-shadow: 0 0 0 3px var(--focus-ring);
       }
 
+      .projects-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--sp-3);
+        align-items: center;
+        margin: var(--sp-4) 0 var(--sp-3);
+      }
+      .projects-toolbar .feed-search { flex: 1 1 320px; }
+      .projects-toolbar select {
+        padding: var(--sp-2) var(--sp-3);
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--input-bg);
+        color: var(--text-primary);
+        font-family: var(--font-sans);
+        font-size: 13px;
+      }
+      .project-inventory-list {
+        display: grid;
+        gap: var(--sp-3);
+        margin-top: var(--sp-4);
+      }
+      .project-inventory-row {
+        padding: var(--sp-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-1);
+      }
+      .project-inventory-row-header {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--sp-3);
+        align-items: flex-start;
+      }
+      .project-inventory-title { font-size: 15px; font-weight: 650; color: var(--text-primary); }
+      .project-inventory-domain { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
+      .project-inventory-meta, .project-inventory-signal {
+        margin-top: var(--sp-2);
+        color: var(--text-secondary);
+        font-size: 12px;
+      }
+      .project-inventory-signal { overflow-wrap: anywhere; }
+      .project-inventory-badges {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        margin-top: var(--sp-3);
+      }
+      .project-status-badge {
+        padding: 2px 8px;
+        border-radius: var(--radius-pill);
+        background: var(--surface-2);
+        color: var(--text-secondary);
+        font-size: 11px;
+        border: 1px solid var(--border);
+      }
+      .project-status-badge.needs_attention,
+      .project-status-badge.legacy_review { color: var(--accent-warm); background: var(--accent-warm-subtle); }
+      .project-status-badge.suggested { color: var(--accent); background: var(--accent-subtle); }
+      .project-inventory-details { margin-top: var(--sp-3); }
+      .project-inventory-details summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; }
+      .project-detail-grid {
+        display: grid;
+        grid-template-columns: minmax(130px, max-content) 1fr;
+        gap: var(--sp-2) var(--sp-3);
+        margin-top: var(--sp-3);
+        font-size: 12px;
+      }
+      .project-detail-grid dt { color: var(--text-tertiary); }
+      .project-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); }
+      .project-inventory-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        margin-top: var(--sp-4);
+      }
+      .project-domain-select {
+        min-width: min(100%, 260px);
+        padding: var(--sp-2) var(--sp-3);
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--input-bg);
+        color: var(--text-primary);
+        font-family: var(--font-sans);
+        font-size: 13px;
+      }
+      .project-guardrail-confirmation {
+        flex-basis: 100%;
+        margin-top: var(--sp-2);
+      }
+      .projects-pagination { margin-top: var(--sp-4); }
+
       /* 36×36 square icon buttons — theme toggle, settings gear. */
       .icon-button {
         width: 36px;
@@ -1885,6 +1978,18 @@
       .sync-action ~ .sync-action { margin-top: var(--sp-2); }
 
       .health-action-text, .sync-action-text { font-size: 13px; color: var(--text-primary); flex: 1; min-width: 0; }
+      .settings-link,
+      .sync-subview-link {
+        color: var(--accent);
+        text-decoration-color: color-mix(in srgb, var(--accent) 52%, transparent);
+        text-underline-offset: 3px;
+        transition: color 140ms ease, text-decoration-color 140ms ease;
+      }
+      .settings-link:hover,
+      .sync-subview-link:hover {
+        color: var(--accent-hover);
+        text-decoration-color: currentColor;
+      }
       .sync-section-heading {
         display: flex;
         align-items: center;
@@ -1980,6 +2085,108 @@
       .actor-details { min-width: 0; display: grid; gap: 6px; }
       .actor-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
       .actor-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
+      .legacy-review-card {
+        display: grid;
+        gap: var(--sp-3);
+        padding: var(--sp-3);
+        border: 1px solid color-mix(in srgb, var(--accent-warm) 24%, var(--border));
+        border-radius: var(--radius-lg);
+        background: color-mix(in srgb, var(--accent-warm-subtle) 34%, var(--surface-1));
+      }
+      .legacy-review-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--sp-3);
+      }
+      .legacy-review-summary { margin-top: 6px; max-width: 78ch; color: var(--text-secondary); }
+      .legacy-review-warning { margin-top: 4px; max-width: 78ch; }
+      .legacy-review-groups {
+        display: grid;
+        gap: var(--sp-2);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .legacy-review-toolbar {
+        display: grid;
+        gap: var(--sp-2);
+        padding: var(--sp-2);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: color-mix(in srgb, var(--surface-2) 72%, transparent);
+      }
+      .legacy-review-filter-row,
+      .legacy-review-bulk-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        align-items: center;
+      }
+      .legacy-filter.active {
+        background: var(--accent-subtle);
+        border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
+        color: var(--accent);
+      }
+      .legacy-review-search { flex: 1 1 260px; min-width: min(260px, 100%); }
+      .legacy-review-group {
+        display: grid;
+        gap: var(--sp-2);
+        padding: var(--sp-3);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-2);
+      }
+      .legacy-review-group-main {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: var(--sp-3);
+        align-items: start;
+      }
+      .legacy-review-title-wrap { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
+      .legacy-review-group-title { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
+      .legacy-review-group-meta,
+      .legacy-review-reason {
+        margin-top: 2px;
+        color: var(--text-tertiary);
+        font-size: 12px;
+        line-height: 1.45;
+      }
+      .legacy-review-cleanup-note {
+        margin-top: 6px;
+        color: var(--accent-warm);
+        font-size: 12px;
+        line-height: 1.45;
+      }
+      .legacy-review-count {
+        justify-self: end;
+        white-space: nowrap;
+        padding: 3px 9px;
+        border-radius: var(--radius-pill);
+        background: var(--accent-neutral-subtle);
+        color: var(--text-secondary);
+        font-family: var(--font-mono);
+        font-size: 12px;
+      }
+      .legacy-review-confirmation {
+        padding: var(--sp-2) var(--sp-3);
+        border: 1px solid color-mix(in srgb, var(--accent-warm) 35%, var(--border));
+        border-radius: var(--radius-md);
+        background: var(--accent-warm-subtle);
+        color: var(--text-secondary);
+        font-size: 13px;
+        line-height: 1.45;
+      }
+      .legacy-review-target {
+        display: grid;
+        gap: 5px;
+        color: var(--text-tertiary);
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+      .legacy-review-actions { display: flex; justify-content: flex-end; }
       .actor-name-input { min-width: 220px; }
       .actor-merge-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
       .actor-merge-select { min-width: 200px; }
@@ -2522,6 +2729,22 @@
       @media (max-height: 720px) { .modal { align-items: flex-start; } }
       .modal-backdrop[hidden], .modal[hidden] { display: none; }
 
+      .legacy-upgrade-modal .modal-card { width: min(620px, 100%); }
+      .legacy-upgrade-summary {
+        padding: var(--sp-3);
+        border: 1px solid color-mix(in srgb, var(--accent-warm) 28%, var(--border));
+        border-radius: var(--radius-md);
+        background: var(--accent-warm-subtle);
+        color: var(--text-secondary);
+        line-height: 1.5;
+      }
+      .legacy-upgrade-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        justify-content: flex-end;
+      }
+
       .modal-card {
         width: min(520px, 100%);
         border-radius: var(--radius-xl);
@@ -3250,6 +3473,11 @@
         .feed-visibility-controls { align-items: stretch; }
         .feed-visibility-select { width: 100%; }
         .actor-actions { justify-content: flex-start; }
+        .legacy-review-header { flex-direction: column; }
+        .legacy-review-group-main { grid-template-columns: 1fr; }
+        .legacy-review-count { justify-self: start; }
+        .legacy-review-actions { justify-content: flex-start; }
+        .legacy-review-bulk-row .settings-save { width: 100%; }
       }
 
       @media (max-width: 520px) {
@@ -3306,8 +3534,9 @@
     <!-- ── Tab bar ─────────────────────────────────────────── -->
     <nav class="tab-bar" aria-label="Main navigation">
       <button class="tab-btn active" id="tabBtn-feed">Feed</button>
-      <button class="tab-btn" id="tabBtn-health">Health</button>
+      <button class="tab-btn" id="tabBtn-projects">Projects</button>
       <button class="tab-btn" id="tabBtn-sync">Sync</button>
+      <button class="tab-btn" id="tabBtn-health">Health</button>
       <button class="tab-btn" id="tabBtn-coordinator-admin">Coordinator Admin</button>
     </nav>
     <div id="toastRoot"></div>
@@ -3328,6 +3557,49 @@
       </div>
     </div>
 
+    <div class="modal-backdrop" id="legacyUpgradeModalBackdrop" hidden></div>
+    <div
+      aria-describedby="legacyUpgradeDescription legacyUpgradeSummary"
+      aria-labelledby="legacyUpgradeTitle"
+      aria-modal="true"
+      class="modal legacy-upgrade-modal"
+      hidden
+      id="legacyUpgradeModal"
+      role="dialog"
+    >
+      <div class="modal-card">
+        <div class="modal-header">
+          <h2 id="legacyUpgradeTitle">Choose where older shared memories belong</h2>
+        </div>
+        <div class="modal-body">
+          <div class="small" id="legacyUpgradeDescription">
+            Some memories were shared before codemem had clear Sharing domains. We kept them out
+            of normal sync until you choose which project/domain they belong to.
+          </div>
+          <div class="legacy-upgrade-summary" id="legacyUpgradeSummary"></div>
+          <div class="small">
+            You’ll review projects, not individual memories. Nothing moves automatically, and this
+            will not erase copies another device may already have received.
+          </div>
+          <label class="field-checkbox" for="legacyUpgradeDontShow">
+            <input class="cm-checkbox" id="legacyUpgradeDontShow" type="checkbox" />
+            <span>Don’t show this again</span>
+          </label>
+        </div>
+        <div class="modal-footer">
+          <div class="legacy-upgrade-actions">
+            <button class="settings-button" id="legacyUpgradeReviewProjects" type="button">
+              Manage all projects
+            </button>
+            <button class="settings-button" id="legacyUpgradeNotNow" type="button">Not now</button>
+            <button class="settings-save" id="legacyUpgradeReviewGroups" type="button">
+              Start review
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- ── Settings modal ──────────────────────────────────── -->
     <div id="settingsDialogMount"></div>
     <template id="settingsDialogTemplate">
@@ -3559,6 +3831,28 @@
       </div>
     </div>
 
+    <!-- ── Tab: Projects ───────────────────────────────────── -->
+    <div class="tab-panel" id="tab-projects" hidden>
+      <div class="card" style="animation-delay: 0s">
+        <div class="section-header">
+          <div>
+            <h2>Projects & Sharing domains</h2>
+            <div class="section-meta">Choose which Sharing domain future memories use. “Stays on this device” means no Sharing domain is assigned yet, so it belongs in Projects review rather than Sync triage.</div>
+          </div>
+        </div>
+        <div class="projects-toolbar">
+          <input class="feed-search" id="projectsSearch" placeholder="Search project, path, git remote, or workspace id…" />
+          <select id="projectsStatusFilter" aria-label="Project status filter"></select>
+        </div>
+        <div class="section-meta" id="projectsInventoryMeta">Loading project inventory…</div>
+        <div class="project-inventory-list" id="projectsInventoryList" aria-live="polite"></div>
+        <div class="section-actions projects-pagination">
+          <button class="settings-button" id="projectsPrevPage" type="button">Previous</button>
+          <button class="settings-button" id="projectsNextPage" type="button">Next</button>
+        </div>
+      </div>
+    </div>
+
     <!-- ── Tab: Sync ───────────────────────────────────────── -->
     <div class="tab-panel" id="tab-sync" hidden>