@codemem/server 0.39.1 → 0.40.0

package/static/index.html

@@ -200,7 +200,7 @@
         padding: var(--sp-3) var(--sp-4);
         border: none;
         background: transparent;
-        color: var(--text-tertiary);
+        color: var(--text-secondary);
         font-family: var(--font-sans);
         font-size: var(--font-size-md);
         font-weight: var(--font-weight-medium);
@@ -213,10 +213,16 @@
       }
 
       .tab-btn.active {
-        color: var(--accent);
+        color: var(--accent-hover);
         font-weight: var(--font-weight-semibold);
       }
 
+      #recipientPolicyManagementMount .small,
+      .recipient-policy-management-dialog .small,
+      #recipientPolicySharingMount .small {
+        color: var(--text-secondary);
+      }
+
       .tab-btn.active::after {
         content: "";
         position: absolute;
@@ -1129,6 +1135,198 @@
         margin-top: var(--sp-2);
       }
       .projects-pagination { margin-top: var(--sp-4); }
+      .recipient-policy-review > h3 { margin-top: var(--sp-4); }
+      .recipient-policy-review-status:empty { display: none; }
+      .recipient-policy-review-list { margin-top: var(--sp-3); }
+      .recipient-policy-review-item .project-inventory-actions label {
+        color: var(--text-secondary);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-semibold);
+      }
+      .recipient-policy-review-select { min-width: min(100%, 280px); }
+      .recipient-policy-deferred { margin-top: var(--sp-3); }
+      .recipient-policy-preview { margin-top: var(--sp-3); }
+      .recipient-policy-preview-list { margin-top: var(--sp-2); }
+      .recipient-policy-preview-list ul {
+        margin-top: var(--sp-1);
+        padding-left: var(--sp-5);
+      }
+      .recipient-policy-blocked-heading { margin-top: var(--sp-5) !important; }
+      .project-selection-actions,
+      .recipient-policy-management-actions,
+      .recipient-policy-sharing-actions {
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .project-selection-target,
+      .recipient-policy-management-target,
+      .recipient-policy-sharing-target-24 {
+        min-width: 24px;
+        min-height: 24px;
+      }
+      .project-selection-control {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 32px;
+        min-width: 32px;
+        min-height: 32px;
+        cursor: pointer;
+      }
+      .project-selection-checkbox { width: 18px; height: 18px; }
+      .project-recipient-summary { margin-top: var(--sp-3); }
+      .project-recipient-status { color: var(--text-secondary); font-size: var(--font-size-sm); }
+      .project-recipient-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        padding: 0;
+        margin: var(--sp-2) 0 0;
+        list-style: none;
+      }
+      .project-recipient-chip {
+        padding: 3px 9px;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-pill);
+        background: var(--surface-2);
+        color: var(--text-primary);
+        font-size: var(--font-size-xs);
+      }
+      .project-advanced-administration { margin-top: var(--sp-3); }
+      .project-advanced-surface summary,
+      .advanced-administration-disclosure > summary {
+        cursor: pointer;
+        color: var(--text-primary);
+        font-weight: var(--font-weight-semibold);
+      }
+      .recipient-policy-management-dialog .modal-card { width: min(720px, calc(100vw - 32px)); }
+      .recipient-policy-management-selection fieldset { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
+      .recipient-policy-management-selection legend { font-weight: var(--font-weight-semibold); }
+      .recipient-policy-management-review section + section { margin-top: var(--sp-4); }
+      .recipient-policy-management-review h3 { margin: 0 0 var(--sp-2); }
+      .recipient-policy-management-review p,
+      .recipient-policy-management-review ul { margin-top: var(--sp-2); }
+      .recipient-policy-management-review ul,
+      .recipient-policy-management-details ul { padding-left: var(--sp-5); }
+      .recipient-policy-management-name { overflow-wrap: anywhere; }
+      .recipient-policy-management-choice > span { min-width: 0; }
+      .recipient-policy-management-description,
+      .recipient-policy-management-member-names,
+      .recipient-policy-management-recipient-context,
+      .recipient-policy-management-review li,
+      .recipient-policy-management-review li span {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .recipient-policy-management-details {
+        margin-top: var(--sp-3);
+        color: var(--text-secondary);
+      }
+      .recipient-policy-management-details summary {
+        color: var(--text-primary);
+        cursor: pointer;
+        font-weight: var(--font-weight-semibold);
+      }
+      .recipient-policy-management-details p { margin-top: var(--sp-2); }
+      .recipient-policy-management-details li { overflow-wrap: anywhere; }
+      .recipient-policy-management-status:empty { display: none; }
+      .recipient-policy-sharing-header { margin-bottom: var(--sp-4); }
+      .recipient-policy-sharing-tabs {
+        position: static;
+        display: flex;
+        gap: var(--sp-1);
+        margin-bottom: var(--sp-4);
+        padding: 0;
+        background: transparent;
+        border: 0;
+        z-index: auto;
+      }
+      .recipient-policy-sharing-tabs .tab-btn { color: var(--text-secondary); }
+      .recipient-policy-sharing-tabs .tab-btn.active { color: var(--text-primary); }
+      .recipient-policy-sharing-grid { display: grid; gap: var(--sp-3); }
+      .recipient-policy-sharing-card { border: 1px solid var(--border); border-radius: var(--radius-md); }
+      .recipient-policy-sharing-card-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sp-3);
+      }
+      .recipient-policy-sharing-card-title h3 { margin: 0; }
+      .recipient-policy-sharing-details { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0; }
+      .recipient-policy-sharing-details div {
+        display: grid;
+        grid-template-columns: minmax(150px, max-content) 1fr;
+        gap: var(--sp-3);
+      }
+      .recipient-policy-sharing-details dt { color: var(--text-secondary); }
+      .recipient-policy-sharing-details dd { margin: 0; color: var(--text-primary); }
+      .recipient-policy-invitation-result {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--sp-3);
+        padding: var(--sp-4);
+        border: 1px solid color-mix(in srgb, var(--status-healthy) 36%, var(--border));
+        border-radius: var(--radius-md);
+        background: color-mix(in srgb, var(--status-healthy) 9%, var(--surface-1));
+      }
+      .recipient-policy-invitation-result:focus {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+        box-shadow: 0 0 0 4px var(--focus-ring);
+      }
+      .recipient-policy-invitation-result-mark {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 28px;
+        width: 28px;
+        height: 28px;
+        border-radius: var(--radius-pill);
+        background: color-mix(in srgb, var(--status-healthy) 18%, var(--surface-0));
+        color: var(--status-healthy);
+        font-weight: var(--font-weight-semibold);
+        line-height: 1;
+      }
+      .recipient-policy-invitation-result-copy { min-width: 0; }
+      .recipient-policy-invitation-result-copy h3 { margin: 0; }
+      .recipient-policy-invitation-result-copy p {
+        margin-top: var(--sp-2);
+        color: var(--text-secondary);
+        overflow-wrap: anywhere;
+      }
+
+      #devicesMount .recipient-policy-sharing-grid {
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+        list-style: none;
+        padding: 0;
+      }
+      #devicesMount .recipient-policy-sharing-card { height: 100%; }
+      #devicesMount .recipient-policy-sharing-card section + section { margin-top: var(--sp-4); }
+      #devicesMount .recipient-policy-sharing-card section ul {
+        display: grid;
+        gap: var(--sp-2);
+        margin-top: var(--sp-2);
+        padding-left: var(--sp-5);
+      }
+      #devicesMount .recipient-policy-sharing-card > .settings-button { margin-top: var(--sp-4); }
+
+      @media (max-width: 720px) {
+        .project-inventory-row-header { align-items: center; flex-wrap: wrap; }
+        .project-inventory-title { flex: 1 1 calc(100% - 48px); }
+        .project-recipient-action { width: 100%; }
+        .recipient-policy-management-dialog .modal-card { width: calc(100vw - 16px); }
+        .recipient-policy-management-actions,
+        .recipient-policy-sharing-responsive-actions { display: grid; grid-template-columns: 1fr; }
+        .recipient-policy-management-actions button,
+        .recipient-policy-sharing-responsive-actions button { min-height: 44px; width: 100%; }
+        .recipient-policy-sharing-responsive-tabs { overflow-x: auto; }
+        .recipient-policy-sharing-details div { grid-template-columns: 1fr; gap: var(--sp-1); }
+        .recipient-policy-invitation-result { padding: var(--sp-3); }
+        #devicesMount .recipient-policy-sharing-card > .settings-button {
+          min-height: 44px;
+          width: 100%;
+        }
+      }
 
       /* 36×36 square icon buttons — theme toggle, settings gear. */
       .icon-button {
@@ -2635,7 +2833,7 @@
         font-size: var(--font-size-sm);
         transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
       }
-      .modal-close-button:hover {
+      .modal-close-button:hover:not(:disabled) {
         border-color: var(--border-hover);
         background: color-mix(in srgb, var(--surface-0) 92%, var(--control-hover-bg));
         color: var(--text-primary);
@@ -2645,6 +2843,13 @@
         outline-offset: 2px;
         box-shadow: 0 0 0 4px var(--focus-ring);
       }
+      .modal-close-button:disabled {
+        border-color: var(--border);
+        background: var(--surface-1);
+        color: var(--text-tertiary);
+        cursor: not-allowed;
+        opacity: 0.65;
+      }
       .modal-close-button-icon {
         display: inline-flex;
         align-items: center;
@@ -3413,13 +3618,15 @@
 
     <!-- ── Tab bar ─────────────────────────────────────────── -->
     <nav class="tab-bar" aria-label="Main navigation">
-      <button class="tab-btn active" id="tabBtn-feed">Feed</button>
+      <button class="tab-btn active" id="tabBtn-feed" aria-current="page">Feed</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-sharing">Sharing</button>
+      <button class="tab-btn" id="tabBtn-devices">Devices</button>
       <button class="tab-btn" id="tabBtn-health">Health</button>
-      <button class="tab-btn" id="tabBtn-coordinator-admin">Teams</button>
+      <button class="tab-btn" id="tabBtn-advanced">Advanced</button>
     </nav>
     <div id="toastRoot"></div>
+    <div id="recipientPolicyManagementMount"></div>
     <div class="viewer-reconnect-overlay" id="viewerReconnectOverlay" hidden>
       <div class="viewer-reconnect-card" role="status" aria-live="assertive">
         <div class="viewer-reconnect-eyebrow">Viewer connection</div>
@@ -3713,11 +3920,16 @@
 
     <!-- ── Tab: Projects ───────────────────────────────────── -->
     <div class="tab-panel" id="tab-projects" hidden>
+      <div id="recipientPolicyReviewMount" hidden></div>
       <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>
+            <h2>Projects</h2>
+            <div class="section-meta">Choose exact Projects, then share them with Teams or Identities.</div>
+          </div>
+          <div class="section-actions project-selection-actions">
+            <span class="section-meta" id="projectsSelectionStatus" role="status" aria-live="polite">0 Projects selected.</span>
+            <button class="settings-button project-selection-target" id="projectsShareSelected" type="button" disabled>Share selected</button>
           </div>
         </div>
         <div class="projects-toolbar">
@@ -3743,13 +3955,42 @@
           <button class="settings-button" id="projectsNextPage" type="button">Next</button>
         </div>
       </div>
+      <details class="card project-advanced-surface">
+        <summary>Advanced Project invitations</summary>
+        <div class="section-meta">Use the legacy invitation flow when the recipient does not have an Identity yet.</div>
+        <div class="section-actions" id="projectShareFlowMount"></div>
+      </details>
+    </div>
+
+    <!-- ── Tab: Sharing ────────────────────────────────────── -->
+    <div class="tab-panel" id="tab-sharing" hidden>
+      <div class="card" id="recipientPolicySharingMount"></div>
+    </div>
+
+    <!-- ── Tab: Devices ────────────────────────────────────── -->
+    <div class="tab-panel" id="tab-devices" hidden>
+      <div class="card" id="devicesMount"></div>
     </div>
 
-    <!-- ── Tab: Sync ───────────────────────────────────────── -->
-    <div class="tab-panel" id="tab-sync" hidden>
+    <!-- ── Tab: Advanced ───────────────────────────────────── -->
+    <div class="tab-panel" id="tab-advanced" hidden>
+      <div class="card">
+        <div class="section-header">
+          <div>
+            <h2>Advanced</h2>
+            <div class="section-meta">Compatibility tools for device sync and Team administration.</div>
+          </div>
+          <div class="section-actions" aria-label="Advanced sections">
+            <button class="settings-button" id="advancedSyncButton" type="button" aria-pressed="true">Sync</button>
+            <button class="settings-button" id="advancedTeamsButton" type="button" aria-pressed="false">Teams</button>
+          </div>
+        </div>
+      </div>
+
+      <div id="advancedSyncContent">
 
-      <!-- Sub-view: main Sync surface. Toggled by syncViewController
-           based on #sync vs #sync/diagnostics in the URL hash. -->
+      <!-- Sub-view: main Sync surface. Toggled by syncViewController and
+           app compatibility routing for canonical and legacy hashes. -->
       <div id="syncMainView">
 
       <!-- 1. Needs attention + team setup/status -->
@@ -3760,8 +4001,9 @@
             <span class="sync-online-badge" id="syncOnlineBadge" hidden role="status" aria-live="polite"></span>
           </div>
           <div class="section-actions">
+            <button class="settings-button" id="syncShareProjectsButton" type="button">Share projects</button>
             <button class="settings-button" id="syncNowButton">Sync now</button>
-            <a class="sync-subview-link" href="#sync/diagnostics">View diagnostics &rarr;</a>
+            <a class="sync-subview-link" href="#advanced/sync/diagnostics">View diagnostics &rarr;</a>
           </div>
         </div>
         <div class="section-meta" id="syncTeamMeta">Start with the next step below, then review team status and device details.</div>
@@ -3778,7 +4020,15 @@
             <div class="actor-create-row" id="syncJoinPanel">
               <label for="syncJoinInvite" class="sr-only">Team invite or pairing payload</label>
               <textarea class="feed-search" id="syncJoinInvite" placeholder="Paste a team invite or device pairing payload"></textarea>
-              <button class="settings-button" id="syncJoinButton">Accept</button>
+              <div id="syncProjectInviteReview" role="region" aria-labelledby="syncProjectInviteReviewHeading" hidden>
+                <h4 id="syncProjectInviteReviewHeading" tabindex="-1">Review project invitation</h4>
+                <div class="section-meta" id="syncProjectInviteContext"></div>
+                <label for="syncRecipientName">Your name</label>
+                <input class="feed-search" id="syncRecipientName" maxlength="120" autocomplete="name" />
+                <label for="syncRecipientDeviceName">This device</label>
+                <input class="feed-search" id="syncRecipientDeviceName" maxlength="120" />
+              </div>
+              <button class="settings-button" id="syncJoinButton">Review invite</button>
             </div>
           </div>
           <div id="syncAdminSection">
@@ -3797,6 +4047,13 @@
       <div class="card" style="animation-delay: 0.04s">
         <h2>People &amp; devices</h2>
 
+        <h3 class="settings-group-title">Project sharing</h3>
+        <div class="section-meta" id="syncProjectShareOperationsMeta">Loading project sharing status…</div>
+        <div class="actor-list" id="syncProjectShareOperations" aria-live="polite"></div>
+
+        <details class="project-inventory-details" style="margin-top: 20px">
+          <summary>Manual device and identity controls</summary>
+
         <h3 class="settings-group-title">People</h3>
         <div class="section-meta" id="syncActorsMeta">Create and rename people here. Assign each device below.</div>
         <div class="actor-create-row">
@@ -3826,6 +4083,7 @@
           <div id="syncPairingDisclosureMount" style="display: contents"></div>
         </div>
         <div id="syncPairingPanelMount" style="display: contents"></div>
+        </details>
 
         <div id="syncSharingReview" hidden>
           <h3 class="settings-group-title" style="margin-top: 20px">What teammates will receive</h3>
@@ -3846,13 +4104,13 @@
 
       </div><!-- /#syncMainView -->
 
-      <!-- Sub-view: Advanced diagnostics. Reached via #sync/diagnostics;
-           shown by syncViewController when that hash is active. -->
+      <!-- Sub-view: Advanced diagnostics. Canonically reached through
+           #advanced/sync/diagnostics; #sync/diagnostics remains compatible. -->
       <div id="syncDiagnosticsView" hidden>
       <div class="card" style="animation-delay: 0.06s">
         <div class="section-header">
           <div class="section-header-title">
-            <a class="sync-subview-link" href="#sync">&larr; Back to sync</a>
+            <a class="sync-subview-link" href="#advanced/sync">&larr; Back to sync</a>
             <h2>Sync diagnostics</h2>
           </div>
           <div class="section-actions">
@@ -3875,10 +4133,17 @@
         <div class="attempts-list" id="syncAttempts"></div>
       </div>
       </div><!-- /#syncDiagnosticsView -->
-    </div>
-
-    <div class="tab-panel" id="tab-coordinator-admin" hidden>
-      <div id="coordinatorAdminMount"></div>
+      </div><!-- /#advancedSyncContent -->
+
+      <div id="advancedTeamsContent" hidden>
+        <div class="card">
+          <details class="advanced-administration-disclosure" open>
+            <summary>Advanced Team administration</summary>
+            <div class="section-meta">Manage legacy enrollment, Spaces, device administration, and coordinator settings.</div>
+            <div id="coordinatorAdminMount"></div>
+          </details>
+        </div>
+      </div>
     </div>
 
     <script src="/assets/app.js"></script>