@codemem/server 0.46.0-alpha.1 → 0.46.0-beta.1

package/static/index.html

@@ -110,7 +110,7 @@
         align-items: center;
         gap: var(--sp-3);
         min-width: 0;
-        overflow: hidden;
+        overflow: visible;
       }
 
       .logo {
@@ -774,6 +774,10 @@
          — quieter than any real button nearby, since it's navigation,
          not action. */
       .sync-subview-link {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        font-family: inherit;
         display: inline-flex;
         align-items: center;
         gap: 4px;
@@ -832,6 +836,10 @@
         stroke: var(--accent);
         opacity: 0.6;
       }
+      .health-icon-slot {
+        display: flex;
+        flex-shrink: 0;
+      }
 
       .stat-content {
         display: flex;
@@ -883,13 +891,80 @@
         line-height: 1.5;
       }
 
-      .health-primary {
-        border-width: 2px;
+      .has-tooltip { cursor: help; }
+      .health-loading-icon {
+        animation: viewerLoadingSpin var(--duration-attention) linear infinite;
       }
-      .health-primary .value { font-size: var(--font-size-3xl); letter-spacing: 0.2px; }
-      .health-primary.status-healthy .value { color: var(--status-healthy); }
-      .health-primary.status-degraded .value { color: var(--status-degraded); }
-      .health-primary.status-attention .value { color: var(--status-attention); }
+
+      .health-system-card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-4);
+      }
+      .health-system-header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sp-4);
+      }
+      .health-status-summary {
+        display: flex;
+        align-items: center;
+        gap: var(--sp-3);
+        min-width: 0;
+      }
+      .health-status-copy {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+      }
+      .health-status-word {
+        font-size: var(--font-size-3xl);
+        font-weight: var(--font-weight-semibold);
+        line-height: 1.15;
+      }
+      .health-status-word.status-healthy { color: var(--status-healthy); }
+      .health-status-word.status-degraded { color: var(--status-degraded); }
+      .health-status-word.status-attention { color: var(--status-attention); }
+      .health-status-word.status-unknown { color: var(--text-tertiary); }
+      .health-status-copy .section-meta { margin: 0; }
+      .health-status-meta {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+      }
+      .health-tile-grid {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: var(--sp-3);
+      }
+      .health-tile {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-1);
+        min-width: 0;
+        padding: var(--sp-3) var(--sp-4);
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+      }
+      .health-tile-label {
+        color: var(--text-tertiary);
+        font-size: var(--font-size-2xs);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+      .health-tile-value {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+        color: var(--text-secondary);
+        font-size: var(--font-size-md);
+      }
+      .health-maintenance-grid { margin-top: var(--sp-3); }
 
       /* ── Buttons ───────────────────────────────────────────── */
 
@@ -1159,16 +1234,10 @@
         font-family: var(--font-sans);
         font-size: var(--font-size-md);
       }
-      .project-inventory-list {
-        display: grid;
-        gap: var(--sp-3);
-        margin-top: var(--sp-4);
-      }
-      .project-inventory-skeleton {
-        display: grid;
-        gap: var(--sp-3);
-        margin-top: var(--sp-4);
-      }
+      .projects-toolbar #projectsStatusFilter { flex: 0 1 220px; min-width: 0; }
+      #projectsInventoryMeta { color: var(--text-tertiary); white-space: nowrap; }
+      .project-inventory-list { margin-top: var(--sp-3); min-width: 0; }
+      .project-inventory-skeleton { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
       .project-inventory-skeleton-row {
         padding: var(--sp-4);
         border: 1px solid var(--border);
@@ -1186,93 +1255,169 @@
       .project-inventory-skeleton-line.title { width: 42%; height: 16px; }
       .project-inventory-skeleton-line.meta { width: 68%; }
       .project-inventory-skeleton-line.signal { width: 86%; }
-      .project-inventory-row {
-        padding: var(--sp-4);
+      .project-inventory-table {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        overflow: visible;
+        border-spacing: 0;
         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-table > thead,
+      .project-inventory-table > tbody { display: block; width: 100%; }
+      .project-inventory-table th,
+      .project-inventory-table td { padding: 0; text-align: left; font-weight: inherit; }
+      .project-inventory-table-row {
+        display: grid;
+        grid-template-columns: 28px minmax(0, 1fr) 72px 72px 120px minmax(0, 130px) 180px;
+        align-items: center;
+        column-gap: var(--sp-3);
+        min-width: 0;
       }
-      .project-inventory-title { font-size: var(--font-size-lg); font-weight: 650; color: var(--text-primary); }
-      .project-inventory-domain { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--accent); }
-      .project-inventory-meta, .project-inventory-signal {
-        margin-top: var(--sp-2);
-        color: var(--text-secondary);
-        font-size: var(--font-size-sm);
+      .project-inventory-table-header {
+        padding: var(--sp-2) var(--sp-4);
+        background: var(--surface-2);
+        color: var(--text-tertiary);
+        font-size: var(--font-size-2xs);
+        font-weight: var(--font-weight-medium);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
       }
-      .project-inventory-signal { overflow-wrap: anywhere; }
-      .project-inventory-badges {
+      .project-inventory-row-header {
+        min-width: 0;
+        border-top: 1px solid var(--border);
+        background: var(--surface-1);
+      }
+      .project-inventory-row-header { padding: var(--sp-3) var(--sp-4); }
+      .project-inventory-row-stats { display: contents; }
+      .project-inventory-cell { min-width: 0; }
+      .project-inventory-project-cell { display: flex; flex-direction: column; gap: var(--sp-1); }
+      .project-inventory-title { overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
+      .project-inventory-signal { overflow: hidden; color: var(--text-tertiary); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
+      .project-inventory-number { font-variant-numeric: tabular-nums; }
+      .project-inventory-latest { color: var(--text-secondary); }
+      .project-inventory-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+      .project-inventory-badges:empty { display: none; }
+      .project-inventory-row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
+      .project-inventory-row-actions .settings-button { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
+      .project-row-menu { position: relative; flex: 0 0 auto; }
+      .project-row-menu-panel { position: absolute; top: calc(100% + var(--sp-1)); right: 0; }
+      button.feed-menu-item { border: 0; background: transparent; font-family: inherit; text-align: left; }
+      button.feed-menu-item:hover,
+      button.feed-menu-item:focus-visible { background: var(--surface-2); }
+      button.feed-menu-item:disabled { color: var(--text-tertiary); cursor: default; }
+      .project-inventory-details { background: var(--surface-2); }
+      .project-inventory-details-row,
+      .project-inventory-details-cell { display: block; min-width: 0; }
+      .project-inventory-details > summary {
         display: flex;
-        flex-wrap: wrap;
+        align-items: center;
         gap: var(--sp-2);
-        margin-top: var(--sp-3);
-      }
-      .project-status-badge {
-        padding: 2px 8px;
-        border-radius: var(--radius-pill);
-        background: var(--surface-2);
+        padding: var(--sp-3) var(--sp-4) var(--sp-3) 44px;
+        cursor: pointer;
         color: var(--text-secondary);
-        font-size: var(--font-size-xs);
-        border: 1px solid var(--border);
+        font-size: var(--font-size-sm);
       }
-      .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: var(--font-size-sm); }
+      .project-inventory-details-body { padding: 0 var(--sp-4) var(--sp-4) 44px; }
+      .project-inventory-domain { color: var(--accent); font-family: var(--font-mono); font-size: var(--font-size-sm); }
+      .project-inventory-meta { margin-top: var(--sp-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
       .project-detail-grid {
         display: grid;
-        grid-template-columns: minmax(130px, max-content) 1fr;
-        gap: var(--sp-2) var(--sp-3);
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--sp-2) var(--sp-4);
         margin-top: var(--sp-3);
         font-size: var(--font-size-sm);
       }
+      .project-detail-pair { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: var(--sp-3); }
       .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-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);
+        border-radius: var(--radius-sm);
         background: var(--input-bg);
         color: var(--text-primary);
         font-family: var(--font-sans);
         font-size: var(--font-size-md);
       }
-      .project-guardrail-confirmation {
-        flex-basis: 100%;
-        margin-top: var(--sp-2);
-      }
+      .project-guardrail-confirmation { flex-basis: 100%; margin-top: var(--sp-2); }
       .projects-pagination { margin-top: var(--sp-4); }
+      .project-selection-control { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; cursor: pointer; }
+      .project-selection-checkbox { width: 18px; height: 18px; }
+      .project-recipient-summary { min-width: 0; }
+      .project-recipient-status { color: var(--text-secondary); font-size: var(--font-size-sm); }
+      .project-recipient-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0; margin: 0; list-style: none; }
+      .project-recipient-chip { overflow: hidden; padding: 2px var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-primary); font-size: var(--font-size-2xs); text-overflow: ellipsis; white-space: nowrap; }
+      .project-inventory-child-row { padding-left: var(--sp-5); }
+      .project-inventory-cluster + .project-inventory-child .project-inventory-child-row { border-top: 1px solid var(--border); }
       .recipient-policy-review-section + .recipient-policy-review-section { margin-top: var(--sp-5); }
       .recipient-policy-review-heading { margin-bottom: var(--sp-2); }
-      .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-review-header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--sp-4);
+      }
+      }
+      .recipient-policy-review-count {
+        color: var(--text-tertiary);
+        font-weight: var(--font-weight-regular);
+      }
+      .recipient-policy-review-status:empty { display: none; }
+      .recipient-policy-review-list {
+        margin-top: var(--sp-3);
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+      }
+      .recipient-policy-review-item {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 260px auto;
+        align-items: center;
+        column-gap: var(--sp-4);
+        padding: var(--sp-3) var(--sp-4);
+        background: var(--surface-1);
+      }
+      .recipient-policy-review-item + .recipient-policy-review-item { border-top: 1px solid var(--border); }
+      .recipient-policy-review-name,
+      .recipient-policy-review-actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+      }
+      .recipient-policy-review-name > strong { font-size: var(--font-size-lg); }
+      .recipient-policy-review-identity { color: var(--text-tertiary); overflow-wrap: anywhere; }
+      .recipient-policy-review-meta {
+        color: var(--text-secondary);
+        margin-top: var(--sp-1);
+      }
+      .recipient-policy-review-meta .badge { margin-left: var(--sp-2); }
+      .recipient-policy-review-select { min-width: 0; width: 100%; }
+      .recipient-policy-review-details {
+        grid-column: 1 / -1;
+        padding: var(--sp-3) 0 var(--sp-1);
+      }
+      .recipient-policy-deferred,
+      .recipient-policy-preview { margin-top: var(--sp-2); }
       .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-review-section { margin-top: var(--sp-5); }
+      @media (max-width: 900px) {
+        .recipient-policy-review-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-3); }
+        .recipient-policy-review-details { grid-column: 1; }
+      }
       .project-selection-actions,
       .recipient-policy-management-actions,
       .recipient-policy-sharing-actions {
@@ -1540,6 +1685,16 @@
       .recipient-policy-management-details li { overflow-wrap: anywhere; }
       .recipient-policy-management-status:empty { display: none; }
       .recipient-policy-sharing-header { margin-bottom: var(--sp-4); }
+      .sharing-member-preview {
+        overflow-wrap: anywhere;
+      }
+      .sharing-member-names .sharing-member-preview {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+      .sharing-member-names p { overflow-wrap: anywhere; }
       .recipient-policy-sharing-tabs {
         position: static;
         display: flex;
@@ -1567,6 +1722,89 @@
         gap: var(--sp-3);
       }
       .recipient-policy-sharing-card-title h3 { margin: 0; }
+      .recipient-policy-sharing-card-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--sp-4);
+      }
+      .recipient-policy-sharing-card-title { justify-content: flex-start; flex-wrap: wrap; }
+      .recipient-policy-sharing-card-actions,
+      .recipient-policy-sharing-card-actions .recipient-policy-sharing-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--sp-2);
+        flex-wrap: wrap;
+      }
+      .recipient-policy-sharing-card-actions .settings-button { margin-top: 0; }
+      .recipient-policy-sharing-stats {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: var(--sp-2);
+        margin-top: var(--sp-4);
+      }
+      .recipient-policy-sharing-stats > div {
+        display: grid;
+        gap: var(--sp-1);
+        min-width: 0;
+        padding: var(--sp-3);
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+      }
+      .recipient-policy-sharing-stats strong { font-size: var(--font-size-lg); }
+      .recipient-policy-sharing-stats span { color: var(--text-secondary); overflow-wrap: anywhere; }
+      .recipient-policy-sharing-projects,
+      .recipient-policy-sharing-identity-rows,
+      .recipient-policy-sharing-identity-rows > div { display: grid; gap: var(--sp-2); }
+      .recipient-policy-sharing-projects,
+      .recipient-policy-sharing-identity-rows { margin-top: var(--sp-4); }
+      .recipient-policy-sharing-identity-rows > div + div { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
+      .recipient-policy-sharing-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+      .recipient-policy-sharing-more {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--accent);
+        font: inherit;
+        cursor: pointer;
+      }
+      .recipient-policy-sharing-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sp-3);
+        margin-bottom: var(--sp-3);
+      }
+      .recipient-policy-sharing-toolbar label { flex: 1; }
+      .recipient-policy-sharing-toolbar input { width: 100%; }
+      .recipient-policy-sharing-received-table { display: block; width: 100%; overflow: hidden; border: 1px solid var(--border); border-spacing: 0; border-radius: var(--radius-md); }
+      .recipient-policy-sharing-received-table thead,
+      .recipient-policy-sharing-received-table tbody { display: block; }
+      .recipient-policy-sharing-received-head,
+      .recipient-policy-sharing-received-row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 180px 190px 170px;
+        gap: var(--sp-4);
+        align-items: center;
+        padding: var(--sp-3) var(--sp-4);
+      }
+      .recipient-policy-sharing-received-head {
+        background: var(--surface-2);
+        color: var(--text-tertiary);
+        font-size: var(--font-size-2xs);
+        font-weight: var(--font-weight-semibold);
+        letter-spacing: var(--letter-spacing-wide);
+        text-transform: uppercase;
+      }
+      .recipient-policy-sharing-received-row { border-top: 1px solid var(--border); background: var(--surface-1); }
+      .recipient-policy-sharing-received-row > * { min-width: 0; overflow-wrap: anywhere; }
+      .recipient-policy-sharing-received-row td { min-width: 0; padding: 0; color: var(--text-secondary); text-align: left; }
+      .recipient-policy-sharing-received-row td:first-child { color: var(--text-primary); }
+      .recipient-policy-sharing-received-head th { min-width: 0; padding: 0; text-align: left; }
+      .recipient-policy-sharing-received-head th:nth-child(n + 3),
+      .recipient-policy-sharing-received-row td:nth-child(n + 3) { text-align: right; }
+      .recipient-policy-sharing-pointer { display: inline-block; margin-top: var(--sp-3); }
       .recipient-policy-sharing-card,
       .recipient-policy-sharing-card-title,
       .recipient-policy-sharing-details dd { min-width: 0; overflow-wrap: anywhere; }
@@ -1600,10 +1838,6 @@
       }
       .recipient-policy-sharing-details dt { color: var(--text-secondary); }
       .recipient-policy-sharing-details dd { margin: 0; color: var(--text-primary); }
-      .recipient-policy-sharing-team-card > .recipient-policy-sharing-actions + .recipient-policy-sharing-actions {
-        margin-top: var(--sp-2);
-      }
-
       .loading-card-list { display: grid; gap: var(--sp-3); }
       .loading-card {
         padding: var(--sp-4);
@@ -1753,10 +1987,177 @@
       .device-identity-review-panel ul { margin: var(--sp-3) 0; padding-left: var(--sp-5); }
       .device-identity-review-panel .peer-actions { margin-top: var(--sp-4); }
 
+      #devicesMount .recipient-policy-sharing-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--sp-4);
+      }
+      .devices-summary-bar,
+      .devices-summary-counts,
+      .devices-summary-counts > span,
+      .devices-identity-header,
+      .devices-table-device {
+        display: flex;
+        align-items: center;
+      }
+      .devices-summary-bar {
+        justify-content: space-between;
+        gap: var(--sp-4);
+        padding: 10px 14px;
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+        color: var(--text-secondary);
+        font-size: var(--font-size-sm);
+      }
+      .devices-summary-counts { gap: var(--sp-4); flex-wrap: wrap; }
+      .devices-summary-counts > span { gap: 6px; }
+      .devices-coordinator-status {
+        display: flex;
+        align-items: center;
+        gap: var(--sp-2);
+        padding: var(--sp-2) var(--sp-3);
+        border-radius: var(--radius-sm);
+        background: var(--surface-2);
+      }
+      .devices-coordinator-status-spacer { flex: 1; }
+      .devices-local-row {
+        display: grid;
+        grid-template-columns: 16px minmax(0, 1fr) auto;
+        align-items: center;
+        gap: var(--sp-3);
+        padding: 14px var(--sp-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-1);
+      }
+      .devices-local-copy { display: grid; gap: 2px; }
+      .devices-local-copy .small { color: var(--text-tertiary); }
+      .devices-empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--sp-2);
+        padding: 40px var(--sp-6);
+        border: 1px dashed var(--border-strong);
+        border-radius: var(--radius-md);
+        text-align: center;
+      }
+      .devices-empty-state > strong { font-size: var(--font-size-lg); }
+      .devices-empty-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
+      .devices-pairing-panel {
+        display: grid;
+        gap: var(--sp-3);
+        padding: var(--sp-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-2);
+      }
+      .devices-pairing-panel p { margin: 0; color: var(--text-secondary); }
+      .devices-pairing-header,
+      .devices-pairing-command { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+      .devices-pairing-header h3 { margin: 0; }
+      .devices-pairing-command code { min-width: 0; overflow-wrap: anywhere; }
+      .devices-identity-group { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
+      .devices-identity-header { align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
+      .devices-identity-header strong > span { color: var(--text-tertiary); font-weight: var(--font-weight-regular); }
+      .devices-identity-header > .small { color: var(--text-tertiary); }
+      .devices-table { width: 100%; overflow: visible; border: 1px solid var(--border); border-spacing: 0; border-radius: var(--radius-md); }
+      .devices-table-head,
+      .devices-table-row {
+        display: grid;
+        grid-template-columns: 16px minmax(0, 1fr) 160px 140px 48px;
+        align-items: center;
+        column-gap: var(--sp-4);
+      }
+      .devices-table-head {
+        padding: var(--sp-2) var(--sp-4);
+        background: var(--surface-2);
+        color: var(--text-tertiary);
+        font-size: var(--font-size-2xs);
+        font-weight: var(--font-weight-medium);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+      .devices-table th,
+      .devices-table td { min-width: 0; padding: 0; text-align: left; }
+      .devices-table-head { border-radius: var(--radius-md) var(--radius-md) 0 0; }
+      .devices-table-row { min-width: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
+      .devices-table-device { min-width: 0; gap: var(--sp-2); flex-wrap: wrap; }
+      .devices-table-device strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .devices-table-availability { color: var(--text-secondary); }
+      .devices-table-version { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--font-size-xs); }
+      .devices-row-menu { position: relative; }
+      .devices-row-menu > summary { list-style: none; }
+      .devices-row-menu > summary::-webkit-details-marker { display: none; }
+      .devices-row-menu[open] > .feed-menu-trigger { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-hover); }
+      .devices-row-menu > .feed-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; }
+      .devices-table-details { border-top: 1px solid var(--border); background: var(--surface-2); }
+      .devices-table-details > td { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); }
+      .devices-table-details p { margin: 0; }
+      .devices-table-details ul { margin: 0; padding-left: var(--sp-5); }
+      .devices-table-details .device-identity-rebind { margin-top: 0; }
+      .devices-delivered-copy-warning { margin-top: var(--sp-3); color: var(--text-secondary); }
+
+      @media (max-width: 900px) {
+        .recipient-policy-sharing-card-header { align-items: stretch; flex-direction: column; }
+        .recipient-policy-sharing-card-actions { justify-content: flex-start; }
+        .recipient-policy-sharing-stats { grid-template-columns: 1fr; }
+        .recipient-policy-sharing-received-head {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          clip-path: inset(50%);
+          white-space: nowrap;
+          border: 0;
+        }
+        .recipient-policy-sharing-received-row { grid-template-columns: 1fr 1fr; }
+        .recipient-policy-sharing-received-row > td:not(:first-child)::before {
+          content: attr(data-label) " ";
+          display: block;
+          color: var(--text-tertiary);
+          font-size: var(--font-size-2xs);
+          text-transform: uppercase;
+        }
+        .recipient-policy-sharing-received-row td:nth-child(n + 3) { text-align: left; }
+        .project-inventory-table-header { display: none; }
+        .project-inventory-table-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: var(--sp-3); }
+        .project-inventory-select-cell { grid-column: 1; grid-row: 1; }
+        .project-inventory-project-cell { grid-column: 2; grid-row: 1; }
+        .project-inventory-row-actions { grid-column: 3; grid-row: 1; flex-wrap: wrap; }
+        .project-inventory-number::before,
+        .project-inventory-latest::before,
+        .project-inventory-shared::before { content: attr(data-label) " "; color: var(--text-tertiary); font-size: var(--font-size-2xs); text-transform: uppercase; }
+        .project-inventory-table-row > :nth-child(3) { grid-column: 2; grid-row: 2; }
+        .project-inventory-table-row > :nth-child(4) { grid-column: 3; grid-row: 2; }
+        .project-inventory-table-row > :nth-child(5) { grid-column: 2; grid-row: 3; }
+        .project-inventory-table-row > :nth-child(6) { grid-column: 3; grid-row: 3; }
+        .project-detail-grid { grid-template-columns: 1fr; }
+        .devices-table-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
+        .devices-table-row { grid-template-columns: 16px minmax(0, 1fr) 48px; row-gap: var(--sp-2); }
+        .devices-table-row > :nth-child(1) { grid-column: 1; grid-row: 1; }
+        .devices-table-row > :nth-child(2) { grid-column: 2; grid-row: 1; }
+        .devices-table-row > :nth-child(3) { grid-column: 2; grid-row: 2; }
+        .devices-table-row > :nth-child(4) { grid-column: 2; grid-row: 3; }
+        .devices-table-row > :nth-child(5) { grid-column: 3; grid-row: 1; }
+        .devices-table-availability::before,
+        .devices-table-version::before { content: attr(data-label) " "; color: var(--text-tertiary); font-family: var(--font-sans); font-size: var(--font-size-2xs); text-transform: uppercase; }
+      }
+
       @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-sharing-toolbar { align-items: stretch; flex-direction: column; }
+        .recipient-policy-sharing-received-row { grid-template-columns: 1fr; }
+        .project-inventory-row-header { grid-template-columns: 28px minmax(0, 1fr); }
+        .project-inventory-row-actions { grid-column: 2; grid-row: 2; justify-content: flex-start; }
+        .project-inventory-table-row > :nth-child(3) { grid-column: 2; grid-row: 3; }
+        .project-inventory-table-row > :nth-child(4) { grid-column: 2; grid-row: 4; }
+        .project-inventory-table-row > :nth-child(5) { grid-column: 2; grid-row: 5; }
+        .project-inventory-table-row > :nth-child(6) { grid-column: 2; grid-row: 6; }
+        .project-recipient-action { width: auto; }
         .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; }
@@ -1778,6 +2179,16 @@
         .device-identity-setup-summary { align-items: stretch; flex-direction: column; }
         .device-identity-setup-summary .settings-button,
         .device-identity-review-panel .settings-button { min-height: 44px; width: 100%; }
+        .devices-summary-bar,
+        .devices-coordinator-status,
+        .devices-pairing-header,
+        .devices-pairing-command,
+        .devices-identity-header,
+        #devicesMount .recipient-policy-sharing-header { align-items: stretch; flex-direction: column; }
+        .devices-summary-bar .settings-button,
+        .devices-coordinator-status .settings-button,
+        .devices-pairing-panel button { width: 100%; min-height: 44px; }
+        .devices-empty-actions { align-items: stretch; flex-direction: column; width: 100%; }
       }
 
       /* 36×36 square icon buttons — theme toggle, settings gear. */
@@ -1925,7 +2336,9 @@
         transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
       }
       .toggle-button:hover { background: var(--toggle-hover-bg); color: var(--text-primary); }
-      .toggle-button.active {
+      .toggle-button.active,
+      .toggle-button[data-state="checked"],
+      .toggle-button[aria-checked="true"] {
         background: var(--accent-subtle);
         color: var(--accent);
         box-shadow: inset 0 0 0 1px var(--accent-strong);
@@ -2000,18 +2413,14 @@
       .feed-skeleton-chip.w-56 { width: 56px; }
 
       /* ── Feed items ────────────────────────────────────────── */
-      /* Design-handoff clarification (2026-04-19): feed items render with
-         a full-width top banner in the kind's tint, not a 4px left rail.
-         Banner ~28px tall, --accent-subtle bg per kind, 1px accent-strong
-         bottom border; kind chip sits inset left inside the banner. */
-
       .feed-item {
+        display: grid;
+        grid-template-columns: 104px minmax(0, 1fr) auto;
+        column-gap: var(--sp-4);
+        padding: var(--sp-4) var(--sp-5);
         border: 1px solid var(--border);
-        border-radius: var(--radius-md);
+        border-radius: var(--radius-lg);
         background: var(--surface-1);
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
         box-shadow: var(--shadow-sm);
         transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
       }
@@ -2021,31 +2430,17 @@
         border-color: var(--border-hover);
       }
 
-      /* Kind banner — defaults to mint (feature). Per-kind overrides below. */
-      .feed-kind-banner {
-        padding: 7px var(--sp-5);
-        background: var(--accent-subtle);
-        border-bottom: 1px solid var(--accent-strong);
-      }
-      .feed-item.change .feed-kind-banner { background: var(--accent-cool-subtle); border-bottom-color: color-mix(in srgb, var(--accent-cool) 30%, transparent); }
-      .feed-item.bugfix .feed-kind-banner { background: var(--accent-warm-subtle); border-bottom-color: color-mix(in srgb, var(--accent-warm) 30%, transparent); }
-      .feed-item.refactor .feed-kind-banner { background: var(--accent-violet-subtle); border-bottom-color: color-mix(in srgb, var(--accent-violet) 30%, transparent); }
-      .feed-item.discovery .feed-kind-banner { background: var(--accent-steel-subtle); border-bottom-color: color-mix(in srgb, var(--accent-steel) 30%, transparent); }
-      .feed-item.docs .feed-kind-banner { background: var(--accent-ochre-subtle); border-bottom-color: color-mix(in srgb, var(--accent-ochre) 30%, transparent); }
-      .feed-item.test .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
-      /* Core emits 'decision' / 'exploration' / 'session_summary' too — preserve
-         neutral treatments so those items aren't unstyled. */
-      .feed-item.decision .feed-kind-banner { background: var(--accent-neutral-subtle); border-bottom-color: color-mix(in srgb, var(--accent-neutral) 30%, transparent); }
-      .feed-item.exploration .feed-kind-banner { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--text-tertiary) 24%, transparent); }
-      .feed-item.session_summary .feed-kind-banner { background: color-mix(in srgb, var(--accent-cool) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--accent-cool) 22%, transparent); }
-
+      .feed-kind-rail { align-self: start; min-width: 0; }
       .feed-card-body {
         padding: var(--sp-4) var(--sp-5);
         display: flex;
         flex-direction: column;
         gap: var(--sp-2);
       }
-
+      .feed-item > .feed-card-body {
+        padding: 0;
+        min-width: 0;
+      }
       .feed-card-header {
         display: flex;
         align-items: flex-start;
@@ -2053,21 +2448,23 @@
         gap: var(--sp-3);
       }
       .feed-card-header > .feed-header { flex: 1; overflow: hidden; }
-
-      .feed-header {
+      .feed-card-side {
         display: flex;
-        align-items: center;
-        gap: var(--sp-2);
-        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: space-between;
         min-width: 0;
+        gap: var(--sp-3);
       }
-
-      .feed-actions {
+      .feed-card-side-top,
+      .feed-card-side-bottom {
         display: flex;
         align-items: center;
+        justify-content: flex-end;
+        min-width: 0;
         gap: var(--sp-2);
-        flex-shrink: 0;
       }
+      .feed-card-side-bottom { flex-wrap: wrap; }
 
       .feed-menu-panel {
         min-width: 180px;
@@ -2127,25 +2524,88 @@
       }
 
       .feed-title {
-        font-weight: var(--font-weight-semibold);
+        display: block;
+        width: 100%;
+        min-width: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-primary);
+        font-family: var(--font-sans);
         font-size: var(--font-size-lg);
-        flex: 1;
+        font-weight: var(--font-weight-semibold);
+        line-height: 1.35;
+        text-align: left;
+        overflow-wrap: anywhere;
+        white-space: normal;
+      }
+      button.feed-title { cursor: pointer; }
+      button.feed-title:hover { color: var(--accent); }
+      button.feed-title:focus-visible {
+        border-radius: var(--radius-sm);
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      .feed-summary {
         min-width: 0;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
         overflow: hidden;
-        overflow-wrap: anywhere;
-        word-break: break-word;
+        color: var(--text-secondary);
+        font-size: var(--font-size-md);
+        line-height: 1.4;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
-      .feed-card-subtitle {
-        width: 100%;
+      .feed-meta-line {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        min-width: 0;
+        gap: 6px;
         color: var(--text-tertiary);
+        font-size: var(--font-size-sm);
       }
+      .feed-project { color: var(--text-secondary); }
       .feed-meta {
         color: var(--text-tertiary);
         font-size: var(--font-size-sm);
       }
+      .feed-expanded-provenance {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+      }
+      .feed-search-match {
+        display: flex;
+        min-width: 0;
+        gap: var(--sp-2);
+        padding: var(--sp-2) var(--sp-3);
+        border-left: 2px solid var(--accent);
+        background: var(--accent-subtle);
+        color: var(--text-secondary);
+        font-size: var(--font-size-sm);
+      }
+      .feed-search-match-label {
+        flex-shrink: 0;
+        color: var(--accent);
+        font-family: var(--font-mono);
+        text-transform: capitalize;
+      }
+      .feed-search-match > span:last-child {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .feed-detail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-2);
+        padding-top: var(--sp-2);
+        border-top: 1px solid var(--border);
+        animation: feedDisclosure var(--duration-fast) var(--ease-out);
+      }
+      @keyframes feedDisclosure {
+        from { opacity: 0; transform: translateY(-4px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
       /* Empty state renders as a terminal-output block — mono surface,
          blinking mint cursor — to match the codemem "warm local journal"
          voice and signal "this is a CLI-native tool." */
@@ -2183,12 +2643,6 @@
         50% { opacity: 0; }
       }
 
-      .feed-provenance {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
-      }
-
       /* ── Chip base ─────────────────────────────────────────── */
       /* Shared layout for every pill-shaped label in the viewer. Per-variant
          rules below only override background / color / border / typography.
@@ -2218,6 +2672,12 @@
         background: var(--surface-2);
         color: var(--text-tertiary);
       }
+      .feed-item .feed-meta-line > *, .feed-item .feed-expanded-provenance > * {
+        min-width: 0;
+        max-width: 100%;
+        white-space: normal;
+        overflow-wrap: anywhere;
+      }
       .provenance-chip.mine { background: var(--accent-subtle); color: var(--accent); border-color: rgba(43, 122, 176, 0.18); }
       .provenance-chip.author { color: var(--text-secondary); }
       .provenance-chip.private { background: rgba(140, 140, 140, 0.12); color: var(--text-secondary); }
@@ -2234,10 +2694,61 @@
       }
 
       .feed-body {
+        min-width: 0;
+        overflow-wrap: anywhere;
         font-size: var(--font-size-md);
         line-height: 1.55;
         color: var(--text-secondary);
       }
+      .first-run-guide {
+        display: flex;
+        flex-direction: column;
+        gap: var(--sp-3);
+        margin-bottom: var(--sp-4);
+        padding: var(--sp-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-1);
+      }
+      .first-run-guide-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--sp-3);
+      }
+      .first-run-guide h2 { margin: 0; font-size: var(--font-size-lg); }
+      .first-run-guide p { margin: 3px 0 0; color: var(--text-secondary); }
+      .first-run-guide-list {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--sp-2);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .first-run-guide-list li {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--sp-2);
+        min-width: 0;
+        padding: var(--sp-2);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+      }
+      .first-run-guide-list li.is-complete { background: var(--surface-2); }
+      .first-run-guide-status { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
+      .first-run-guide-status > span:last-child { display: flex; flex-direction: column; min-width: 0; }
+      .first-run-guide-status .small { color: var(--text-tertiary); }
+      .feed-empty-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
+
+      @media (max-width: 755px) {
+        .first-run-guide-header,
+        .first-run-guide-list li { align-items: stretch; flex-direction: column; }
+        .first-run-guide-list { grid-template-columns: 1fr; }
+        .first-run-guide button,
+        .feed-empty-actions .settings-button { width: 100%; }
+      }
       .feed-body.narrative { max-width: 88ch; }
       .feed-body.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
       .feed-body.clamp-3 { -webkit-line-clamp: 3; }
@@ -2268,16 +2779,15 @@
       .summary-section-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
       .summary-section-content { font-size: var(--font-size-md); line-height: 1.5; color: var(--text-primary); }
 
-      .feed-footer {
+      .feed-visibility-label {
         display: flex;
-        flex-wrap: wrap;
-        gap: var(--sp-2);
-        align-items: flex-start;
-        justify-content: space-between;
+        flex-direction: column;
+        gap: 3px;
+        color: var(--text-tertiary);
+        font-size: var(--font-size-2xs);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
       }
-      .feed-footer-left { display: flex; flex-direction: column; gap: 6px; }
-      .feed-footer-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
-      .feed-visibility-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
       .feed-visibility-select {
         min-width: 180px;
         padding: 6px 10px;
@@ -2287,22 +2797,8 @@
         color: var(--text-primary);
         font-family: var(--font-sans);
         font-size: var(--font-size-sm);
-      }
-      .feed-visibility-note { width: 100%; max-width: 60ch; font-size: var(--font-size-sm); color: var(--text-tertiary); }
-
-      .feed-expand {
-        border: 1px solid var(--border);
-        background: transparent;
-        color: var(--text-tertiary);
-        padding: 3px 10px;
-        font-size: var(--font-size-xs);
-        transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
-      }
-      .feed-expand:hover { background: var(--accent-subtle); color: var(--accent); }
-      .feed-expand:focus-visible {
-        outline: 2px solid var(--accent);
-        outline-offset: 2px;
-        box-shadow: 0 0 0 4px var(--focus-ring);
+        letter-spacing: normal;
+        text-transform: none;
       }
 
       .feed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -2310,6 +2806,9 @@
          filename is informative and earns its horizontal space. */
       .feed-files { display: flex; flex-wrap: wrap; gap: 6px; }
       .feed-file {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
         padding: 2px 8px;
         border-radius: var(--radius-sm);
         background: var(--surface-2);
@@ -2323,7 +2822,7 @@
 
       /* ── Pills & badges ────────────────────────────────────── */
 
-      /* Kind chip — lives inside .feed-kind-banner. Tint + colored border
+      /* Kind chip — lives inside .feed-kind-rail. Tint + colored border
          match the banner per kind so the chip reads as part of the strip. */
       .kind-chip {
         padding: 2px 10px;
@@ -2423,55 +2922,31 @@
 
       .health-update-banner {
         display: flex;
-        align-items: flex-start;
-        gap: var(--sp-3);
-        padding: var(--sp-4);
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sp-2);
+        padding: 10px var(--sp-4);
         border: 1px solid var(--border);
-        border-radius: var(--radius-lg);
+        border-radius: var(--radius-md);
         background: var(--surface-1);
-        box-shadow: var(--shadow-sm);
-      }
-      .health-update-banner--current {
-        border-color: color-mix(in srgb, var(--status-healthy) 34%, var(--border));
-        background: color-mix(in srgb, var(--status-healthy) 7%, var(--surface-1));
-      }
-      .health-update-banner--available,
-      .health-update-banner--stale {
-        border-color: color-mix(in srgb, var(--accent-warm) 34%, var(--border));
-        background: color-mix(in srgb, var(--accent-warm-subtle) 34%, var(--surface-1));
-      }
-      .health-update-banner--unavailable {
-        border-color: color-mix(in srgb, var(--status-attention) 34%, var(--border));
-        background: color-mix(in srgb, var(--status-attention) 7%, var(--surface-1));
+        color: var(--text-secondary);
       }
       .health-update-icon {
-        width: 20px;
-        height: 20px;
-        flex: 0 0 20px;
-        margin-top: 2px;
+        width: 16px;
+        height: 16px;
+        flex: 0 0 16px;
         color: var(--accent);
       }
-      .health-update-banner--current .health-update-icon { color: var(--status-healthy); }
-      .health-update-banner--available .health-update-icon,
-      .health-update-banner--stale .health-update-icon { color: var(--accent-warm); }
-      .health-update-banner--unavailable .health-update-icon { color: var(--status-attention); }
-      .health-update-copy { min-width: 0; }
-      .health-update-copy h2 { font-size: var(--font-size-lg); line-height: 1.3; }
-      .health-update-copy p { margin-top: var(--sp-1); color: var(--text-secondary); }
-      .health-update-guidance { display: grid; gap: 3px; }
-      .health-update-guidance-label {
-        color: var(--text-tertiary);
-        font-size: var(--font-size-xs);
-        font-weight: var(--font-weight-semibold);
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
+      .health-update-source {
+        background: var(--accent-cool-subtle);
+        color: var(--accent-cool);
       }
-      .health-update-guidance code {
-        color: var(--text-primary);
-        font-family: var(--font-mono);
-        font-size: var(--font-size-sm);
+      .health-update-detail { flex: 1 1 280px; min-width: 0; }
+      .health-update-command {
+        flex: 1 1 100%;
         overflow-wrap: anywhere;
       }
+      .health-update-copy-button { margin-left: auto; }
 
       .health-actions, .sync-actions {
         display: grid;
@@ -3049,7 +3524,8 @@
         animation: sync-attention-target var(--duration-attention) var(--ease-out);
       }
       .settings-button:disabled,
-      .settings-button[aria-disabled="true"] {
+      .settings-button[aria-disabled="true"],
+      .settings-save[aria-disabled="true"] {
         opacity: 0.55;
         cursor: not-allowed;
       }
@@ -3523,6 +3999,18 @@
       }
       .modal-body { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
       .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-shrink: 0; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
+      .settings-footer-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
+      .settings-link-button {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-secondary);
+        font: inherit;
+        font-size: var(--font-size-sm);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
+      .settings-link-button:hover { color: var(--text-primary); }
       /* ── Toast (Radix Toast-backed) ───────────────────────── */
       /* Fixed viewport anchored bottom-right. Each toast is a surface-card
          with a severity-tinted left accent keyed to .toast-{variant}. */
@@ -3658,9 +4146,9 @@
         border-radius: 50%;
         border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
         border-top-color: var(--accent);
-        animation: reconnectSpin var(--duration-attention) linear infinite;
+        animation: viewerLoadingSpin var(--duration-attention) linear infinite;
       }
-      @keyframes reconnectSpin {
+      @keyframes viewerLoadingSpin {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
@@ -3683,6 +4171,23 @@
         color: var(--accent);
         background: var(--accent-subtle);
       }
+      .advanced-heading { margin: 0 0 var(--sp-4); font-size: var(--font-size-2xl); }
+      #advancedTabsMount .settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .advanced-sync-status,
+      .advanced-sync-status-label {
+        display: flex;
+        align-items: center;
+      }
+      .advanced-sync-status { justify-content: space-between; gap: var(--sp-4); }
+      .advanced-sync-status-label { gap: var(--sp-3); }
+      .advanced-sync-status-label .xl { font-size: var(--font-size-xl); }
+      .advanced-administration-sections { margin-bottom: var(--sp-3); }
+
+      @media (max-width: 720px) {
+        .advanced-sync-status { align-items: stretch; flex-direction: column; }
+        .advanced-sync-status .section-actions { align-items: stretch; flex-direction: column; }
+        .advanced-sync-status .settings-save { width: 100%; }
+      }
       .settings-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
       .settings-panel[data-state="inactive"] { display: none; }
       .settings-panel[hidden] { display: none; }
@@ -3842,6 +4347,19 @@
       }
 
       .field { display: flex; flex-direction: column; gap: 6px; font-size: var(--font-size-md); }
+      .settings-outcome {
+        margin: 0;
+        color: var(--text-tertiary);
+        font-size: var(--font-size-xs);
+        line-height: 1.45;
+      }
+      .settings-outcome > summary,
+      .settings-config-details > summary { cursor: pointer; color: var(--text-secondary); }
+      .settings-outcome > summary:focus-visible,
+      .settings-config-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+      .settings-outcome-details { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); }
+      .settings-config-details { margin-top: var(--sp-4); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
+      .settings-outcome strong { color: var(--text-secondary); font-weight: var(--font-weight-medium); }
       .field input:not([type="checkbox"]), .field select, .field textarea { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--input-bg); font-family: var(--font-sans); font-size: var(--font-size-md); color: var(--text-primary); }
       .settings-select-trigger {
         display: inline-flex;
@@ -3902,7 +4420,9 @@
         justify-content: flex-start;
         gap: 10px;
         flex: 0 1 auto;
+		flex-wrap: wrap;
       }
+      .settings-switch-row .settings-outcome { flex-basis: 100%; }
       .settings-switch-copy {
         color: var(--text-primary);
         line-height: 1.35;
@@ -3965,6 +4485,19 @@
         transition: background var(--duration-fast) var(--ease-standard);
       }
       .settings-save:hover { background: var(--control-hover-bg); }
+      /* Text actions share geometry; icon, tab, and segmented controls retain theirs. */
+      .settings-button,
+      .settings-save {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        min-height: 36px;
+        padding: 8px 12px;
+        border-radius: var(--radius-md);
+        font-size: var(--font-size-sm);
+        line-height: 18px;
+      }
       .sync-dialog-card {
         width: min(560px, 100%);
       }
@@ -4112,8 +4645,8 @@
         50% { transform: scale(1.3); opacity: 0.5; }
       }
 
-      /* newPulse: fresh feed items pulse their kind-banner bottom border
-         from accent-strong to transparent once on mount. The class is
+      /* newPulse: fresh feed items pulse the card outline from accent-strong
+         to transparent once on mount. The class is
          applied by feed.ts only while state.newItemKeys holds the item's
          key (700ms useEffect then clears it). Skipped entirely under
          prefers-reduced-motion so the ambient accessibility pass still
@@ -4150,12 +4683,9 @@
         .tab-btn { flex-shrink: 0; }
         .tab-panel { padding: var(--sp-4); }
         .summary-row { grid-template-columns: 1fr; }
-        .feed-card-header { flex-wrap: wrap; }
-        .feed-actions { width: 100%; justify-content: flex-end; }
+        .health-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
         .actor-row { align-items: stretch; flex-direction: column; }
         .peer-scope-row { grid-template-columns: 1fr; }
-        .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; }
@@ -4164,6 +4694,41 @@
         .legacy-review-bulk-row .settings-save { width: 100%; }
       }
 
+      @media (max-width: 755px) {
+        .feed-item {
+          grid-template-columns: minmax(0, 1fr) auto;
+          row-gap: var(--sp-3);
+          padding: var(--sp-4);
+        }
+        .feed-kind-rail { grid-column: 1; grid-row: 1; align-self: center; }
+        .feed-card-side { display: contents; }
+        .feed-card-side-top { grid-column: 2; grid-row: 1; }
+        .feed-item > .feed-card-body { grid-column: 1 / -1; grid-row: 2; }
+        .feed-card-side-bottom {
+          grid-column: 1 / -1;
+          grid-row: 3;
+          justify-content: space-between;
+          flex-wrap: wrap;
+        }
+        .feed-toggle { max-width: 100%; }
+        .toggle-button { padding-inline: var(--sp-2); }
+        .feed-visibility-label { flex: 1 1 180px; }
+        .feed-visibility-select { box-sizing: border-box; width: 100%; min-width: 0; }
+        .feed-meta-line { max-width: 100%; }
+        .feed-file { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+      }
+
+      @media print {
+        .feed-menu-trigger,
+        .feed-card-side-bottom { display: none !important; }
+        .feed-item {
+          break-inside: avoid;
+          grid-template-columns: 104px minmax(0, 1fr) auto;
+          box-shadow: none;
+        }
+        .feed-item:hover { transform: none; box-shadow: none; }
+      }
+
       @media (max-width: 720px) {
         .header-title { font-size: var(--font-size-xl); }
       }
@@ -4213,6 +4778,12 @@
       }
 
       @media (prefers-reduced-motion: reduce) {
+        .health-loading-icon,
+        .viewer-reconnect-spinner,
+        .feed-detail,
+        .feed-item.new-item {
+          animation: none;
+        }
         *, *::before, *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
@@ -4501,15 +5072,21 @@
     <!-- ── Tab: Health ─────────────────────────────────────── -->
     <div class="tab-panel" id="tab-health" hidden>
       <div id="healthUpdateBanner" hidden></div>
-      <div class="card" style="animation-delay: 0s">
-        <div class="section-header">
-          <h2>System health</h2>
+      <section class="card health-system-card" id="healthSystemCard" aria-label="System health" tabindex="-1">
+        <div class="health-system-header">
+          <div id="healthStatus">
+            <div class="health-status-summary">
+              <div class="health-status-copy">
+                <strong class="health-status-word status-unknown">Assessing</strong>
+                <div class="section-meta" id="healthMeta" role="status" aria-live="polite" aria-atomic="true">Assessing health signals…</div>
+              </div>
+            </div>
+          </div>
           <button class="settings-button" id="healthOpenDiagnostics" type="button">View diagnostics</button>
         </div>
-        <div class="section-meta" id="healthMeta">Assessing health signals…</div>
         <div class="health-actions" id="healthActions"></div>
-        <div class="grid-2" id="healthGrid"></div>
-      </div>
+        <div id="healthGrid"></div>
+      </section>
 
       <div class="summary-row">
         <div class="card" style="animation-delay: 0.05s">
@@ -4530,20 +5107,17 @@
       <div id="recipientPolicyReviewMount" hidden></div>
       <div class="card" style="animation-delay: 0s">
         <div class="section-header">
-          <div>
-            <h2>Projects</h2>
-            <div class="section-meta">Choose exact Projects, then share them with Teams or Identities.</div>
-          </div>
+          <h2>Projects</h2>
           <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>
+            <button class="settings-button project-selection-target" id="projectsShareSelected" type="button" disabled>Add Teams or Identities</button>
           </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>
+          <input class="feed-search" id="projectsSearch" placeholder="Search by name, path, or git remote…" />
+          <select id="projectsStatusFilter" aria-label="Filter projects"></select>
+          <span class="small" id="projectsInventoryMeta">Loading project inventory…</span>
         </div>
-        <div class="section-meta" id="projectsInventoryMeta">Loading project inventory…</div>
         <div class="project-inventory-skeleton" id="projectsInventorySkeleton" role="status" aria-label="Loading project inventory" aria-busy="true">
           <div class="project-inventory-skeleton-row">
             <div class="project-inventory-skeleton-line title"></div>
@@ -4563,8 +5137,7 @@
         </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>
+        <summary>Invite someone</summary>
         <div class="section-actions" id="projectShareFlowMount"></div>
       </details>
     </div>
@@ -4581,39 +5154,33 @@
 
     <!-- ── Tab: Advanced ───────────────────────────────────── -->
     <div class="tab-panel" id="tab-advanced" hidden>
-      <div class="card">
-        <div class="section-header advanced-legacy-header">
-          <div>
-            <h2>Advanced</h2>
-            <div class="section-meta">Device sync, legacy Team and Space setup, and coordinator administration.</div>
-          </div>
-          <div class="section-actions" aria-label="Advanced sections" role="group">
-            <button class="settings-button" id="advancedSyncButton" type="button" aria-pressed="true">Sync</button>
-            <button class="settings-button" id="advancedTeamsButton" type="button" aria-pressed="false">Coordinator Administration</button>
-          </div>
-        </div>
-      </div>
+      <h2 class="advanced-heading">Advanced</h2>
+      <div id="advancedTabsMount"></div>
 
-      <div id="advancedSyncContent">
+      <div id="advancedSyncContent" role="tabpanel" aria-labelledby="advancedSyncButton">
 
       <!-- Sub-view: main Sync surface. Toggled by syncViewController and
            app compatibility routing for canonical and legacy hashes. -->
       <div id="syncMainView">
 
+      <section class="card advanced-sync-status">
+        <div id="syncAdvancedStatusMount"></div>
+        <div class="section-actions">
+          <button class="settings-button" id="syncNowButton">Sync now</button>
+          <a class="sync-subview-link" href="#advanced/sync/diagnostics">View diagnostics &rarr;</a>
+          <button class="settings-save" id="syncTurnOnButton" type="button" hidden>Turn on sync</button>
+        </div>
+      </section>
+
       <!-- 1. Needs attention + team setup/status -->
       <div class="card" id="syncTeamCard">
         <div class="section-header">
           <div class="section-header-title">
-            <h2>Team sync</h2>
+            <h2>Join a team</h2>
             <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="#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>
+        <div class="section-meta" id="syncTeamMeta" hidden></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>
@@ -4623,10 +5190,9 @@
         <div id="syncSetupPanel">
           <div id="syncJoinSection">
             <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 or pairing payload</label>
-              <textarea class="feed-search" id="syncJoinInvite" placeholder="Paste a team invite or device pairing payload"></textarea>
+            <div class="actor-create-row" id="syncJoinPanel" hidden>
+              <label for="syncJoinInvite" class="sr-only">Invite or pairing code</label>
+              <textarea class="feed-search" id="syncJoinInvite" placeholder="Invite or pairing code" rows="2"></textarea>
               <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>
@@ -4635,6 +5201,15 @@
                 <label for="syncRecipientDeviceName">This device</label>
                 <input class="feed-search" id="syncRecipientDeviceName" maxlength="120" />
               </div>
+              <div id="syncPairingReview" role="region" aria-labelledby="syncPairingReviewHeading" hidden>
+                <h4 id="syncPairingReviewHeading" tabindex="-1">Review device pairing</h4>
+                <p>Check these details with the other device. Accept only a device you trust.</p>
+                <dl>
+                  <dt>Device ID</dt><dd id="syncPairingDeviceId" style="overflow-wrap: anywhere"></dd>
+                  <dt>Fingerprint</dt><dd id="syncPairingFingerprint" style="overflow-wrap: anywhere"></dd>
+                  <dt>Addresses</dt><dd id="syncPairingAddresses" style="white-space: pre-wrap; overflow-wrap: anywhere"></dd>
+                </dl>
+              </div>
               <button class="settings-button" id="syncJoinButton">Review invite</button>
             </div>
           </div>
@@ -4650,19 +5225,24 @@
         </div>
       </div>
 
-      <!-- 2. People & devices -->
+      <!-- 2. People and devices -->
       <div class="card" style="animation-delay: 0.04s">
-        <h2>People &amp; devices</h2>
+        <div class="section-header">
+          <h2>People and devices</h2>
+          <a class="sync-subview-link" href="#sharing" id="advancedSharingLink">Invite someone via Sharing &rarr;</a>
+        </div>
 
-        <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>
+        <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>
+          <div class="actor-list" id="syncSharingReviewList"></div>
+        </div>
 
-        <details class="project-inventory-details" style="margin-top: 20px">
+        <details class="project-inventory-details" id="manualDeviceIdentityControls" 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="section-meta" id="syncActorsMeta"></div>
         <div class="actor-create-row">
           <div class="sync-labeled-field">
             <label for="syncActorCreateInput" class="sync-labeled-field-caption">Person name</label>
@@ -4683,21 +5263,6 @@
           <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>
-        </details>
-
-        <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>
-          <div class="actor-list" id="syncSharingReviewList"></div>
-        </div>
-
         <div id="syncLegacyClaims" hidden>
           <h3 class="settings-group-title" style="margin-top: 20px">Legacy device history</h3>
           <div class="peer-meta" id="syncLegacyClaimsMeta"></div>
@@ -4707,6 +5272,7 @@
             <button class="sync-legacy-button" id="syncLegacyClaimButton">Attach device history</button>
           </div>
         </div>
+        </details>
       </div>
 
       </div><!-- /#syncMainView -->
@@ -4728,7 +5294,8 @@
             </label>
           </div>
         </div>
-        <div class="section-meta" id="syncMeta">Use this surface for sync debugging and recent attempt details.</div>
+        <div class="section-meta" id="syncPrimaryStatusDetail"></div>
+        <div class="section-meta" id="syncMeta"></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>
@@ -4743,30 +5310,21 @@
       </div><!-- /#syncDiagnosticsView -->
       </div><!-- /#advancedSyncContent -->
 
-      <div id="advancedTeamsContent" hidden>
+      <div id="advancedTeamsContent" role="tabpanel" aria-labelledby="advancedTeamsButton" hidden>
         <div class="card">
-          <aside
-            aria-labelledby="coordinatorAdminLegacyNoticeTitle"
-            class="coordinator-admin-inline-warning coordinator-admin-legacy-notice"
-            role="note"
-          >
-            <div class="coordinator-admin-legacy-notice-copy">
-              <h3 id="coordinatorAdminLegacyNoticeTitle" tabindex="-1">Looking for Team settings?</h3>
-              <div class="peer-submeta">
-                Manage Team members, names, and Project access in Sharing. Use this page only for older coordinator groups and Spaces.
-              </div>
-            </div>
-            <button class="settings-button" id="coordinatorAdminOpenSharing" type="button">Open Sharing</button>
-          </aside>
-          <details class="advanced-administration-disclosure" open>
-            <summary>Coordinator Administration</summary>
-            <div class="section-meta">Technical coordinator groups, Spaces, enrollment, and recovery controls.</div>
+          <div class="section-header">
+            <h2 id="coordinatorAdminHeading" tabindex="-1">Coordinator administration</h2>
+            <a class="sync-subview-link" href="#sharing" id="advancedTeamSettingsLink">Team settings &rarr;</a>
+          </div>
+          <div class="section-meta advanced-administration-sections">Groups · Invites · Join requests · Devices</div>
+          <details class="advanced-administration-disclosure" id="advancedAdministrationDisclosure">
+            <summary>Legacy administration</summary>
             <div id="coordinatorAdminMount"></div>
           </details>
         </div>
       </div>
     </div>
 
-    <script src="/assets/app.js?v=e12e29717376"></script>
+    <script src="/assets/app.js?v=a52e5e81ae2c"></script>
   </body>
 </html>