@codemem/server 0.22.0 → 0.22.2

package/static/index.html

@@ -346,6 +346,13 @@
         max-width: 300px;
       }
 
+      .runtime-label {
+        font-size: 11px;
+        color: var(--text-tertiary);
+        opacity: 0.8;
+        white-space: nowrap;
+      }
+
       /* ── Tab bar ───────────────────────────────────────────── */
 
       .tab-bar {
@@ -515,10 +522,15 @@
         background: var(--control-bg);
         color: var(--control-text);
         padding: 5px 12px;
+        min-width: 28px;
+        min-height: 28px;
         border-radius: var(--radius-pill);
         font-size: 12px;
         font-family: var(--font-sans);
         cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         transition: background 0.15s ease, border-color 0.15s ease;
         white-space: nowrap;
       }
@@ -938,6 +950,25 @@
       .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; }
+      .sync-section-heading {
+        display: flex;
+        align-items: center;
+        gap: var(--sp-2);
+        margin-top: var(--sp-2);
+        flex-wrap: wrap;
+      }
+      .sync-section-label {
+        margin-top: 0;
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--text-tertiary);
+      }
+      .sync-section-count {
+        font-size: 11px;
+        padding: 2px 8px;
+      }
       .health-action-command, .sync-action-command { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
       .health-action-buttons { display: flex; gap: 6px; flex-shrink: 0; }
 
@@ -982,8 +1013,14 @@
       .peer-scope-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-primary); padding: 8px 10px; font: inherit; }
       .peer-scope-actions { display: flex; gap: var(--sp-2); }
       .peer-actions { display: flex; gap: 6px; }
-      .peer-actions button { border: 1px solid var(--border); background: transparent; border-radius: var(--radius-pill); padding: 5px 10px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; color: var(--text-secondary); }
+      .peer-actions button { border: 1px solid var(--border); background: transparent; border-radius: var(--radius-pill); padding: 5px 10px; min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 12px; cursor: pointer; color: var(--text-secondary); }
       .peer-actions button:hover { border-color: var(--border-hover); background: var(--surface-2); }
+      .peer-card,
+      .actor-row,
+      .peer-scope-input,
+      .actor-list {
+        scroll-margin-top: 110px;
+      }
       .peer-scope-editor-wrap {
         display: grid;
         gap: var(--sp-2);
@@ -1030,6 +1067,25 @@
         border-radius: 8px;
         margin: 8px 0;
       }
+      .sync-empty-state strong {
+        display: block;
+        margin-bottom: 6px;
+        color: var(--text-secondary);
+        font-size: 0.95rem;
+      }
+      .sync-empty-state span {
+        display: block;
+        max-width: 54ch;
+        margin: 0 auto;
+        line-height: 1.5;
+      }
+      .sync-inline-feedback {
+        margin-top: 8px;
+        font-size: 12px;
+        color: var(--text-secondary);
+      }
+      .sync-inline-feedback.success { color: var(--accent); }
+      .sync-inline-feedback.warning { color: var(--accent-warm); }
       .sync-field-error {
         outline: 1.5px solid var(--red-text, #dc2626) !important;
         outline-offset: -1px;
@@ -1045,6 +1101,23 @@
         40%, 80% { transform: translateX(4px); }
       }
       .sync-shake { animation: sync-shake 0.3s ease-in-out; }
+      @keyframes sync-attention-target {
+        0% {
+          transform: translateY(0);
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+        }
+        35% {
+          transform: translateY(-1px);
+          box-shadow: 0 0 0 3px var(--focus-ring);
+        }
+        100% {
+          transform: translateY(0);
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+        }
+      }
+      .sync-attention-target {
+        animation: sync-attention-target 900ms ease-out;
+      }
       .settings-button:disabled {
         opacity: 0.55;
         cursor: not-allowed;
@@ -1099,11 +1172,19 @@
         text-transform: uppercase;
         color: var(--text-tertiary);
       }
+      .sync-team-headline {
+        font-size: 15px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
       .sync-team-metrics {
         font-size: 13px;
         color: var(--text-secondary);
         font-feature-settings: 'tnum' 1;
       }
+      .sync-team-metrics-secondary {
+        color: var(--text-tertiary);
+      }
       .sync-radix-select-host {
         min-width: 0;
         max-width: 100%;
@@ -1314,6 +1395,64 @@
         background: rgba(212, 100, 46, 0.1);
         color: var(--accent-warm);
       }
+      .viewer-reconnect-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 30;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--sp-6);
+        background: color-mix(in srgb, var(--surface-0) 82%, transparent);
+        backdrop-filter: blur(10px);
+      }
+      .viewer-reconnect-card {
+        width: min(460px, 100%);
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-3);
+        padding: var(--sp-5);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-xl);
+        background: var(--surface-1);
+        box-shadow: var(--shadow-md);
+      }
+      .viewer-reconnect-eyebrow {
+        font-size: 12px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--text-tertiary);
+      }
+      .viewer-reconnect-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text-primary);
+      }
+      .viewer-reconnect-detail {
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--text-secondary);
+      }
+      .viewer-reconnect-status {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        color: var(--text-secondary);
+        font-size: 12px;
+      }
+      .viewer-reconnect-spinner {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
+        border-top-color: var(--accent);
+        animation: reconnectSpin 0.9s linear infinite;
+      }
+      @keyframes reconnectSpin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
 
       .settings-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
       .settings-tab {
@@ -1625,6 +1764,7 @@
           <span class="sr-only" id="refreshAnnouncer" aria-live="polite"></span>
         </div>
         <div class="header-right">
+          <span class="runtime-label" id="runtimeLabel" hidden></span>
           <span class="meta-line" id="metaLine"></span>
           <select class="project-filter" id="projectFilter" aria-label="Project filter">
             <option value="">All Projects</option>
@@ -1643,6 +1783,22 @@
       <button class="tab-btn" id="tabBtn-sync">Sync</button>
     </nav>
     <div class="app-notice" id="globalNotice" hidden aria-live="polite"></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>
+        <div class="viewer-reconnect-title">Reconnecting to codemem…</div>
+        <div class="viewer-reconnect-detail" id="viewerReconnectDetail">
+          The viewer server is restarting or temporarily unavailable. Trying again automatically…
+        </div>
+        <div class="viewer-reconnect-status">
+          <span class="viewer-reconnect-spinner" aria-hidden="true"></span>
+          <span>The page will recover automatically when the server responds.</span>
+        </div>
+        <div>
+          <button class="settings-button" id="viewerReconnectRetry">Retry now</button>
+        </div>
+      </div>
+    </div>
 
     <!-- ── Settings modal ──────────────────────────────────── -->
     <div id="settingsDialogMount"></div>
@@ -1878,17 +2034,18 @@
       <!-- 1. Needs attention + team setup/status -->
       <div class="card" id="syncTeamCard">
         <div class="section-header">
-          <h2>Needs attention</h2>
+          <h2>Team sync</h2>
           <div class="section-actions">
             <button class="settings-button" id="syncNowButton">Sync now</button>
           </div>
         </div>
-        <div class="section-meta" id="syncTeamMeta">See what needs action first, then review the current team status below.</div>
+        <div class="section-meta" id="syncTeamMeta">Start with the next step below, then review team status and device details.</div>
         <div class="sync-skeleton" id="syncTeamSkeleton" role="status" aria-label="Loading team sync">
           <div class="sync-skeleton-line medium"></div>
           <div class="sync-skeleton-block"></div>
           <div class="sync-skeleton-line short"></div>
         </div>
+        <div class="sync-actions" id="syncTeamActions" hidden></div>
         <div id="syncSetupPanel">
           <div id="syncJoinSection">
             <h3 class="settings-group-title">Join a team</h3>
@@ -1911,7 +2068,6 @@
           <div class="section-meta" id="syncCoordinatorDiscoveredMeta"></div>
           <div class="actor-list" id="syncCoordinatorDiscoveredList"></div>
         </div>
-        <div class="sync-actions" id="syncTeamActions" hidden></div>
       </div>
 
       <!-- 2. People & devices -->
@@ -1967,7 +2123,7 @@
             </label>
           </div>
         </div>
-        <div class="section-meta" id="syncMeta">Debug details for sync status, pairing, and recent attempts.</div>
+        <div class="section-meta" id="syncMeta">Use this section for sync debugging, pairing, and recent attempt details.</div>
         <div class="sync-skeleton" id="syncDiagSkeleton" role="status" aria-label="Loading diagnostics">
           <div class="sync-skeleton-line long"></div>
           <div class="sync-skeleton-line medium"></div>
@@ -1978,7 +2134,7 @@
 
         <div id="syncPairingPanelMount" style="display: contents"></div>
 
-        <h3 class="settings-group-title" style="margin-top: 20px">Recent sync attempts</h3>
+        <h3 class="settings-group-title" style="margin-top: 20px">Recent sync attempts (advanced)</h3>
         <div class="attempts-list" id="syncAttempts"></div>
       </div>
     </div>