@codemem/server 0.28.0 → 0.29.0

package/static/index.html

@@ -469,6 +469,16 @@
         flex-direction: column;
         gap: var(--sp-5);
       }
+      /* Sync tab wraps its cards in #syncMainView / #syncDiagnosticsView
+         sub-view containers, which breaks the .tab-panel flex gap inheritance.
+         Restore the gap inside each sub-view so Sync cards match the Feed
+         tab's card rhythm. */
+      #syncMainView,
+      #syncDiagnosticsView {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-5);
+      }
 
       /* ── Cards / sections ──────────────────────────────────── */
 
@@ -713,6 +723,84 @@
         margin-left: 2px;
       }
 
+      /* Scope-defaults drawer inside a group card. Reads top-down:
+         header · helper · auto-seed toggle (master) · include chips
+         · exclude chips · actions. Delimits itself as its own subsection
+         with a top border + breathing room so it doesn't run into the
+         peer-actions row above. Radix Collapsible.Content is the host,
+         so open/close is driven by data-state. */
+      .coordinator-admin-group-preferences {
+        display: grid;
+        gap: var(--sp-4);
+        padding-top: var(--sp-3);
+        border-top: 1px solid var(--border);
+        min-width: 0;
+      }
+      .coordinator-admin-group-preferences[data-state="closed"] { display: none; }
+      /* Rotate the trigger's chevron when the scope-defaults disclosure
+         is open. Matches the sync-tab device-row chevron affordance. */
+      .coordinator-admin-scope-trigger[data-state="open"] .device-row-chevron {
+        transform: rotate(90deg);
+      }
+      .coordinator-admin-scope-trigger .device-row-chevron {
+        display: inline-flex;
+        width: 14px;
+        height: 14px;
+        transition: transform 140ms ease;
+      }
+      .coordinator-admin-scope-trigger .device-row-chevron svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .coordinator-admin-group-preferences > .coordinator-admin-field,
+      .coordinator-admin-group-preferences > .coordinator-admin-inline-filter {
+        min-width: 0;
+      }
+
+      .coordinator-admin-drawer-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin: 0;
+        letter-spacing: 0.01em;
+      }
+
+      /* Tighten the helper text directly under the drawer title so they
+         read as one intro block, then let the sp-4 gap separate that
+         block from the toggle. */
+      .coordinator-admin-group-preferences > .coordinator-admin-drawer-title + .peer-submeta {
+        margin-top: calc(-1 * var(--sp-3));
+      }
+
+      /* Help text that lives INSIDE a chip field (e.g. "Exact names,
+         leave empty to allow all") — looser than the row gap, tighter
+         than the inter-section gap. */
+      .coordinator-admin-group-preferences .coordinator-admin-field > .peer-submeta {
+        margin-top: calc(-1 * var(--sp-1));
+      }
+
+      /* Dim the chip editor when auto-seed is off so it visually reads
+         as "configuration that isn't currently applied" rather than
+         "broken input". */
+      .coordinator-admin-group-preferences .peer-scope-input:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+
+      /* Separate the action row (Save / Cancel) from the last field with
+         an explicit gap + top border so the terminating region reads as
+         distinct from the form controls above. */
+      .coordinator-admin-group-preferences > .peer-actions {
+        margin-top: var(--sp-1);
+        padding-top: var(--sp-3);
+        border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+      }
+
+      .coordinator-admin-group-preferences > .coordinator-admin-inline-filter {
+        gap: var(--sp-3);
+      }
+
       .coordinator-admin-empty-state {
         padding: var(--sp-3) 0 var(--sp-1);
       }
@@ -746,6 +834,32 @@
         align-items: center;
       }
 
+      /* Utility link that navigates between sibling sub-surfaces (e.g.
+         main Sync view ↔ diagnostics sub-view). One treatment used for
+         both directions so header/back links read as the same vocabulary
+         — quieter than any real button nearby, since it's navigation,
+         not action. */
+      .sync-subview-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text-secondary);
+        text-decoration: none;
+        padding: 4px 6px;
+        border-radius: var(--radius-sm);
+        transition: color 140ms ease;
+      }
+      .sync-subview-link:hover {
+        color: var(--accent);
+      }
+      .sync-subview-link:focus-visible {
+        color: var(--accent);
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+
       .section-meta {
         color: var(--text-tertiary);
         font-size: 12px;
@@ -860,6 +974,144 @@
         box-shadow: 0 0 0 4px var(--focus-ring);
       }
 
+      /* Device-row compact header. A non-interactive container holding
+         the status pip + name + chips + meta, with a dedicated disclosure
+         button (.device-row-toggle) for assistive tech and keyboard users.
+         The whole row still responds to click via a background click
+         handler on .peer-card, but the accessible name of the toggle stays
+         clean ("Expand device work").
+         See docs/plans/2026-04-23-sync-tab-redesign.md (PR 2). */
+      .device-row-head {
+        display: flex;
+        align-items: center;
+        gap: var(--sp-3);
+        width: 100%;
+        min-height: 56px;
+        padding: 10px var(--sp-4);
+      }
+      /* Row head doubles as the Collapsible trigger so clicking anywhere
+         on the band toggles the drawer. Button defaults are reset; the
+         chevron at the right is a visual indicator only. */
+      button.device-row-head--trigger {
+        background: transparent;
+        border: none;
+        color: inherit;
+        text-align: left;
+        font: inherit;
+        cursor: pointer;
+      }
+      button.device-row-head--trigger:hover {
+        background: color-mix(in srgb, var(--surface-2) 60%, transparent);
+      }
+      button.device-row-head--trigger:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      .device-row-chevron {
+        margin-left: auto;
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        color: var(--text-secondary);
+      }
+      .device-row-chevron svg {
+        width: 18px;
+        height: 18px;
+        transition: transform 140ms ease;
+      }
+      button.device-row-head--trigger[data-state="open"] .device-row-chevron svg {
+        transform: rotate(90deg);
+      }
+      .device-row-head .device-row-name {
+        flex: 1 1 auto;
+        min-width: 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--text-primary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .device-row-head .device-row-chips {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .device-row-head .device-row-meta {
+        font-size: 12px;
+        color: var(--text-tertiary);
+        font-feature-settings: 'tnum' 1;
+        white-space: nowrap;
+      }
+
+      /* Drawer content region revealed when the row is expanded.
+         Keeps the existing .peer-actions / .peer-scope styling intact —
+         this is just the outer wrapper + separator line. */
+      .device-row-drawer {
+        padding: var(--sp-3) var(--sp-4) var(--sp-4);
+        border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
+        display: grid;
+        gap: var(--sp-3);
+      }
+
+      /* Device-row skeleton (shown during the initial sync load). Shape
+         matches the real row so layout doesn't shift when data arrives.
+         See docs/plans/2026-04-23-sync-tab-redesign.md (loading-states). */
+      .device-row-skeleton-list {
+        display: grid;
+        gap: var(--sp-2);
+      }
+      .device-row-skeleton {
+        display: flex;
+        align-items: center;
+        gap: var(--sp-3);
+        min-height: 56px;
+        padding: 10px var(--sp-3);
+        border-radius: var(--radius-lg);
+        border: 1px solid var(--border);
+        background: var(--surface-1);
+      }
+      .device-row-skeleton .skel-pip,
+      .device-row-skeleton .skel-name,
+      .device-row-skeleton .skel-chip {
+        display: inline-block;
+        border-radius: var(--radius-sm);
+        background: linear-gradient(90deg,
+          color-mix(in srgb, var(--surface-2) 82%, var(--surface-1)) 25%,
+          color-mix(in srgb, var(--surface-2) 60%, var(--surface-1)) 50%,
+          color-mix(in srgb, var(--surface-2) 82%, var(--surface-1)) 75%);
+        background-size: 200% 100%;
+        animation: device-skel-shimmer 1.5s ease-in-out infinite;
+      }
+      .device-row-skeleton .skel-pip {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+      .device-row-skeleton .skel-name {
+        flex: 1;
+        max-width: 180px;
+        height: 14px;
+      }
+      .device-row-skeleton .skel-chip {
+        width: 80px;
+        height: 18px;
+        border-radius: var(--radius-pill);
+      }
+      @keyframes device-skel-shimmer {
+        0%   { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .device-row-skeleton .skel-pip,
+        .device-row-skeleton .skel-name,
+        .device-row-skeleton .skel-chip { animation: none; }
+      }
+
       .sync-redact-control {
         display: inline-flex;
         align-items: center;
@@ -968,12 +1220,14 @@
 
       .feed-controls {
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--sp-3);
-        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--sp-2);
         margin-bottom: var(--sp-4);
       }
+      .feed-controls > .section-meta {
+        margin-bottom: 0;
+      }
 
       .feed-controls-right {
         display: flex;
@@ -1573,7 +1827,9 @@
         border-radius: var(--radius-sm);
         background: var(--surface-2);
       }
-      .sync-action + .sync-action { margin-top: var(--sp-2); }
+      /* General sibling, not adjacent: the invite/join panels sit in empty
+         portal <div>s between action rows and the `+` selector would miss. */
+      .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 {
@@ -1632,11 +1888,26 @@
 
       /* ── Peers ─────────────────────────────────────────────── */
 
-      .peer-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
-      @media (min-width: 900px) {
-        .peer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      /* Device list: full-width rows so the row head reads as a single
+         line and the expanded drawer uses the full card width. The old
+         2-column grid above 900px forced expansion into a narrow sidebar. */
+      .peer-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
+      .peer-card {
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        background: var(--surface-1);
+        padding: 0;
+        display: block;
+        overflow: hidden;
+      }
+      /* Padded variant for surfaces that reuse .peer-card as a generic
+         content card (e.g. coordinator-admin group cards). Device rows
+         keep padding:0 because their row-head owns its own interior. */
+      .peer-card.peer-card--padded {
+        padding: var(--sp-3);
+        display: grid;
+        gap: var(--sp-2);
       }
-      .peer-card { border-radius: var(--radius-lg); padding: var(--sp-4); display: grid; gap: var(--sp-2); }
       .peer-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
       .peer-title strong { font-size: 14px; font-weight: 600; }
       /* Direction glyph rendered when a peer is in mutual-trust state.
@@ -1668,9 +1939,189 @@
       .peer-actor-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
       .peer-scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
       .peer-scope-editor { display: grid; gap: 8px; }
-      .peer-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
+      .peer-scope-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: flex-start; padding: 8px 10px; margin: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
       .peer-scope-chip { padding: 4px 8px; background: rgba(43, 122, 176, 0.12); color: var(--accent); font-size: 12px; }
       .peer-scope-chip.empty { background: transparent; color: var(--text-tertiary); border-style: dashed; border-color: var(--border); }
+
+      /* ProjectScopePicker — selected chips on top, an "Add project"
+         button below that opens a Radix Popover with a searchable list.
+         Typing an unmatched name turns the last row into
+         `+ Create "foo"` so free-text entry folds into the same
+         surface. Used by coordinator-admin scope defaults and Sync
+         peer-scope drawers. */
+      .project-scope-picker {
+        display: grid;
+        gap: var(--sp-2);
+        position: relative;
+      }
+      .project-scope-picker-selected {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        padding: 8px 10px;
+        margin: 0;
+        min-height: 36px;
+        list-style: none;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+        align-items: center;
+      }
+      .project-scope-picker-selected-empty {
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+      .project-scope-picker-selected-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 4px 4px 10px;
+        background: rgba(43, 122, 176, 0.16);
+        border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
+        border-radius: var(--radius-pill);
+        color: var(--accent);
+        font-size: 12px;
+      }
+      .project-scope-picker-selected-remove {
+        appearance: none;
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        padding: 0 4px;
+        font: inherit;
+        font-size: 14px;
+        line-height: 1;
+        opacity: 0.7;
+      }
+      .project-scope-picker-selected-remove:hover { opacity: 1; }
+      .project-scope-picker-trigger {
+        justify-self: start;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-size: 12px;
+      }
+      .project-scope-picker-popover {
+        width: min(360px, 100%);
+        max-height: 280px;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        gap: 4px;
+        padding: 6px;
+        background: var(--surface-1);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
+        z-index: 50;
+      }
+      /* Vanilla-DOM popover (peer-scope) anchors inline under its trigger;
+         the Preact ToggleGroup version portals via Radix. Both share the
+         rest of the styling. */
+      .project-scope-picker-popover--inline {
+        position: absolute;
+        left: 0;
+        right: auto;
+        top: 100%;
+        margin-top: 6px;
+      }
+      .project-scope-picker-search {
+        appearance: none;
+        width: 100%;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+        color: var(--text-primary);
+        padding: 6px 10px;
+        font: inherit;
+        font-size: 13px;
+      }
+      .project-scope-picker-search:focus {
+        outline: 2px solid var(--accent);
+        outline-offset: 1px;
+      }
+      .project-scope-picker-results {
+        margin: 0;
+        padding: 4px 0;
+        list-style: none;
+        max-height: 220px;
+        overflow-y: auto;
+        display: grid;
+        gap: 2px;
+      }
+      .project-scope-picker-empty-row {
+        padding: 8px 10px;
+        font-size: 12px;
+        color: var(--text-tertiary);
+      }
+      .project-scope-picker-row {
+        appearance: none;
+        border: none;
+        background: transparent;
+        width: 100%;
+        text-align: left;
+        font: inherit;
+        display: grid;
+        grid-template-columns: 16px 1fr;
+        gap: 6px;
+        align-items: center;
+        padding: 6px 10px;
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        color: var(--text-secondary);
+        font-size: 13px;
+      }
+      .project-scope-picker-row:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      .project-scope-picker-row--active {
+        background: color-mix(in srgb, var(--accent) 10%, transparent);
+        color: var(--text-primary);
+      }
+      .project-scope-picker-row[aria-selected="true"] {
+        color: var(--accent);
+      }
+      .project-scope-picker-row-check {
+        display: inline-block;
+        width: 16px;
+        text-align: center;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      .project-scope-picker-row--create .project-scope-picker-row-check {
+        color: var(--text-tertiary);
+      }
+      /* PresencePip — atomic health indicator.
+         See docs/plans/2026-04-23-sync-tab-redesign.md (loading-states). */
+      .presence-pip {
+        display: inline-block;
+        width: var(--presence-pip-size, 8px);
+        height: var(--presence-pip-size, 8px);
+        border-radius: 50%;
+        flex-shrink: 0;
+        vertical-align: middle;
+      }
+      .presence-pip--online    { background: var(--accent); }
+      .presence-pip--offline   { background: var(--accent-warm, var(--accent)); }
+      .presence-pip--degraded  { background: var(--accent-warm, var(--accent)); }
+      .presence-pip--attention { background: var(--accent-warm-strong, var(--accent-warm, var(--accent))); animation: pip-attention 2.4s ease-in-out infinite; }
+      .presence-pip--syncing   { background: var(--accent); animation: pip-syncing 1.2s ease-in-out infinite; }
+      .presence-pip--unknown   { background: var(--text-tertiary); opacity: 0.6; }
+
+      @keyframes pip-attention {
+        0%, 100% { opacity: 0.6; transform: scale(1); }
+        50%      { opacity: 1;   transform: scale(1.15); }
+      }
+      @keyframes pip-syncing {
+        0%, 100% { opacity: 0.55; }
+        50%      { opacity: 1; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .presence-pip--attention,
+        .presence-pip--syncing { animation: none; opacity: 1; transform: none; }
+      }
       .peer-scope-chip-remove { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; font: inherit; opacity: 0.75; }
       .peer-scope-chip-remove:hover { opacity: 1; }
       .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; }
@@ -2581,7 +3032,8 @@
         align-items: center;
       }
       .sync-dialog-input {
-        width: 100%;
+        width: calc(100% - 6px);
+        margin: 3px;
         padding: var(--sp-2) var(--sp-3);
         border-radius: var(--radius-sm);
         border: 1px solid var(--border);
@@ -2589,11 +3041,44 @@
         color: var(--text-primary);
         font-family: var(--font-sans);
         font-size: 13px;
+        box-sizing: border-box;
       }
       .sync-dialog-input:focus {
-        outline: none;
         border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
+        outline: 2px solid var(--focus-ring);
+        outline-offset: 1px;
+      }
+      .autocomplete-popover {
+        background: var(--surface-1, var(--bg-elevated));
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+        max-height: 260px;
+        overflow-y: auto;
+        padding: 4px;
+        z-index: 120;
+      }
+      .autocomplete-listbox {
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      .autocomplete-option {
+        padding: 6px 10px;
+        border-radius: var(--radius-sm);
+        color: var(--text-primary);
+        font-family: var(--font-sans);
+        font-size: 13px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .autocomplete-option:hover,
+      .autocomplete-option.active,
+      .autocomplete-option[aria-selected="true"] {
+        background: var(--surface-2, rgba(255, 255, 255, 0.06));
+        color: var(--accent);
       }
       .sync-dialog-confirm.danger {
         background: rgba(182, 75, 47, 0.12);
@@ -3024,6 +3509,10 @@
     <!-- ── Tab: Sync ───────────────────────────────────────── -->
     <div class="tab-panel" id="tab-sync" hidden>
 
+      <!-- Sub-view: main Sync surface. Toggled by syncViewController
+           based on #sync vs #sync/diagnostics in the URL hash. -->
+      <div id="syncMainView">
+
       <!-- 1. Needs attention + team setup/status -->
       <div class="card" id="syncTeamCard">
         <div class="section-header">
@@ -3033,6 +3522,7 @@
           </div>
           <div class="section-actions">
             <button class="settings-button" id="syncNowButton">Sync now</button>
+            <a class="sync-subview-link" href="#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>
@@ -3047,22 +3537,20 @@
             <h3 class="settings-group-title">Join a team</h3>
             <div class="section-meta">Have an invite? Paste it here.</div>
             <div class="actor-create-row" id="syncJoinPanel">
-              <label for="syncJoinInvite" class="sr-only">Team invite</label>
-              <textarea class="feed-search" id="syncJoinInvite" placeholder="Paste team invite or codemem:// link"></textarea>
-              <button class="settings-button" id="syncJoinButton">Join team</button>
+              <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>
           </div>
           <div id="syncAdminSection">
             <div id="syncAdminDisclosureMount" style="display: contents"></div>
           </div>
         </div>
-        <h3 class="settings-group-title" style="margin-top: 20px">Team status</h3>
-        <div class="actor-list" id="syncTeamStatus" aria-live="polite"></div>
         <div class="actor-list" id="syncJoinRequests"></div>
         <div id="syncCoordinatorDiscovered" hidden>
-          <h3 class="settings-group-title" style="margin-top: 20px">Devices seen on team</h3>
+          <h3 class="settings-group-title" style="margin-top: 20px">Team devices to pair</h3>
           <div class="section-meta" id="syncCoordinatorDiscoveredMeta"></div>
-          <div class="actor-list" id="syncCoordinatorDiscoveredList"></div>
+          <div class="peer-list" id="syncCoordinatorDiscoveredList"></div>
         </div>
       </div>
 
@@ -3087,11 +3575,19 @@
 
         <h3 class="settings-group-title" style="margin-top: 20px">Devices</h3>
         <div class="peer-list" id="syncPeers"></div>
-        <div class="sync-skeleton" id="syncPeersSkeleton" role="status" aria-label="Loading devices">
-          <div class="sync-skeleton-block"></div>
-          <div class="sync-skeleton-block"></div>
+        <div class="device-row-skeleton-list" id="syncPeersSkeleton" role="status" aria-label="Loading devices" aria-busy="true">
+          <div class="device-row-skeleton"><span class="skel-pip"></span><span class="skel-name"></span><span class="skel-chip"></span></div>
+          <div class="device-row-skeleton"><span class="skel-pip"></span><span class="skel-name"></span><span class="skel-chip"></span></div>
+          <div class="device-row-skeleton"><span class="skel-pip"></span><span class="skel-name"></span><span class="skel-chip"></span></div>
         </div>
 
+        <h3 class="settings-group-title" style="margin-top: 20px">Connect another device</h3>
+        <div class="section-meta">Share this command on the new device to join it to the team.</div>
+        <div class="actor-create-row">
+          <div id="syncPairingDisclosureMount" style="display: contents"></div>
+        </div>
+        <div id="syncPairingPanelMount" style="display: contents"></div>
+
         <div id="syncSharingReview" hidden>
           <h3 class="settings-group-title" style="margin-top: 20px">What teammates will receive</h3>
           <div class="section-meta" id="syncSharingReviewMeta"></div>
@@ -3109,19 +3605,25 @@
         </div>
       </div>
 
-      <!-- 3. Advanced diagnostics — status, pairing, attempts -->
+      </div><!-- /#syncMainView -->
+
+      <!-- Sub-view: Advanced diagnostics. Reached via #sync/diagnostics;
+           shown by syncViewController when that hash is active. -->
+      <div id="syncDiagnosticsView" hidden>
       <div class="card" style="animation-delay: 0.06s">
         <div class="section-header">
-          <h2>Advanced diagnostics</h2>
+          <div class="section-header-title">
+            <a class="sync-subview-link" href="#sync">&larr; Back to sync</a>
+            <h2>Sync diagnostics</h2>
+          </div>
           <div class="section-actions">
-            <div id="syncPairingDisclosureMount" style="display: contents"></div>
             <label class="small sync-redact-control">
               <span id="syncRedactMount"></span>
               <span id="syncRedactLabel">Redact</span>
             </label>
           </div>
         </div>
-        <div class="section-meta" id="syncMeta">Use this section for sync debugging, pairing, and recent attempt details.</div>
+        <div class="section-meta" id="syncMeta">Use this surface for sync debugging 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>
@@ -3130,11 +3632,10 @@
         <div class="sync-actions" id="syncActions"></div>
         <div class="grid-2" id="syncStatusGrid"></div>
 
-        <div id="syncPairingPanelMount" style="display: contents"></div>
-
-        <h3 class="settings-group-title" style="margin-top: 20px">Recent sync attempts (advanced)</h3>
+        <h3 class="settings-group-title" style="margin-top: 20px">Recent sync attempts</h3>
         <div class="attempts-list" id="syncAttempts"></div>
       </div>
+      </div><!-- /#syncDiagnosticsView -->
     </div>
 
     <div class="tab-panel" id="tab-coordinator-admin" hidden>