@codemem/server 0.46.3 → 0.47.0-beta.3

package/static/index.html

@@ -8,7 +8,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script src="https://unpkg.com/lucide@latest"></script>
     <script>
       (function() {
         try {
@@ -31,13 +30,46 @@
            1. Dark defaults from tokens.css (:root).
            2. Light overrides from themes.css ([data-theme="light"] +
               @media (prefers-color-scheme: light)).
-           3. Low-specificity native controls from controls.css.
+           3. Shared controls from controls.css.
            4. The component-level rules below, which reference the tokens
               via var(--...).
          Edit packages/ui/static/tokens.css and themes.css to change the
-         token surface, controls.css for native-control defaults, and this
+         token surface, controls.css for shared-control defaults, and this
          <style> block for per-component styling. */
 
+      /* My Account profile: keep these rules local to the linked card. */
+      .my-account-profile {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+      .my-account-profile-text {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .my-account-profile-text p { margin: 0.25rem 0 0; }
+      .my-account-technical-details { overflow-wrap: anywhere; }
+      .my-account-avatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 3rem;
+        width: 3rem;
+        height: 3rem;
+        border: 1px solid var(--border);
+        border-radius: 50%;
+        overflow: hidden;
+        font-weight: 600;
+      }
+      .my-account-avatar img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
       /* ── Reset & base ──────────────────────────────────────── */
 
       *, *::before, *::after { box-sizing: border-box; margin: 0; }
@@ -973,9 +1005,6 @@
          below only override padding / sizing / colors / typography.
          Markup stays unchanged; each variant class continues to work
          standalone. */
-      .btn,
-      .settings-button,
-      .sync-legacy-button,
       .feed-menu-trigger,
       .feed-expand {
         display: inline-flex;
@@ -991,10 +1020,6 @@
         border: 1px solid var(--control-border);
         background: var(--control-bg);
         color: var(--control-text);
-        padding: 5px 12px;
-        min-width: 28px;
-        min-height: 28px;
-        font-size: var(--font-size-sm);
         transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
       }
       .settings-button:hover {
@@ -1200,21 +1225,8 @@
       /* ── Selects / inputs ──────────────────────────────────── */
 
       .project-filter {
-        padding: 5px 10px;
-        border-radius: var(--radius-sm);
-        border: 1px solid var(--border);
-        background: var(--input-bg);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-sm);
-        cursor: pointer;
-        transition: border-color var(--duration-fast) var(--ease-standard);
-      }
-      .project-filter:hover { border-color: var(--border-hover); }
-      .project-filter:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
+        min-width: 96px;
+        max-width: 240px;
       }
 
       .projects-toolbar {
@@ -1301,12 +1313,7 @@
       .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-row-menu { flex: 0 0 auto; }
       .project-inventory-details { background: var(--surface-2); }
       .project-inventory-details-row,
       .project-inventory-details-cell { display: block; min-width: 0; }
@@ -1334,14 +1341,8 @@
       .project-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); }
       .project-inventory-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
       .project-domain-select {
-        min-width: min(100%, 260px);
-        padding: var(--sp-2) var(--sp-3);
-        border: 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);
+        --select-width: auto;
+        --select-min-width: min(100%, 260px);
       }
       .project-guardrail-confirmation { flex-basis: 100%; margin-top: var(--sp-2); }
       .projects-pagination { margin-top: var(--sp-4); }
@@ -1349,8 +1350,6 @@
       .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); }
@@ -1366,7 +1365,6 @@
         justify-content: space-between;
         gap: var(--sp-4);
       }
-      }
       .recipient-policy-review-count {
         color: var(--text-tertiary);
         font-weight: var(--font-weight-regular);
@@ -1423,7 +1421,6 @@
         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);
@@ -1475,12 +1472,15 @@
         list-style: none;
       }
       .project-recipient-chip {
+        overflow: hidden;
         padding: 3px 9px;
         border: 1px solid var(--border);
         border-radius: var(--radius-pill);
         background: var(--surface-2);
         color: var(--text-primary);
         font-size: var(--font-size-xs);
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .project-advanced-administration { margin-top: var(--sp-3); }
       .project-advanced-surface summary,
@@ -1559,8 +1559,6 @@
       }
       .legacy-team-device-row label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
       .legacy-team-device-evidence { display: grid; gap: var(--sp-1); }
-      .legacy-team-device-select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; }
-      .legacy-team-device-select:disabled { opacity: 0.55; cursor: not-allowed; }
       .legacy-team-device-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
       .legacy-team-project-list {
         display: grid;
@@ -1595,8 +1593,6 @@
       }
       .legacy-team-project-row-content > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
       .legacy-team-project-row label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
-      .legacy-team-project-select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; }
-      .legacy-team-project-select:disabled { opacity: 0.55; cursor: not-allowed; }
       .legacy-team-setup-row-needs-attention {
         border-color: var(--accent);
         background: var(--accent-subtle);
@@ -2003,8 +1999,6 @@
       .device-identity-rebind legend { padding: 0 var(--sp-2); font-weight: var(--font-weight-semibold); }
       .device-identity-setup-card label,
       .device-identity-rebind label { display: flex; align-items: center; gap: var(--sp-2); }
-      .device-identity-setup-card select,
-      .device-identity-rebind select { width: 100%; min-height: 36px; }
       .device-identity-rebind { margin-top: var(--sp-4); }
       .device-identity-rebind-review { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }
       .device-identity-review-panel { margin-top: var(--sp-4); }
@@ -2113,11 +2107,6 @@
       .devices-table-version { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--font-size-xs); }
       .devices-table-sync { display: grid; gap: 2px; color: var(--text-tertiary); font-size: var(--font-size-xs); }
       .devices-table-sync strong { color: var(--text-secondary); font-weight: var(--font-weight-medium); }
-      .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; }
@@ -2221,8 +2210,8 @@
 
       /* 36×36 square icon buttons — theme toggle, settings gear. */
       .icon-button {
-        width: 36px;
-        height: 36px;
+        width: var(--control-button-height);
+        height: var(--control-button-height);
         padding: 0;
         display: inline-flex;
         align-items: center;
@@ -2309,14 +2298,6 @@
         transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
       }
       .feed-search::placeholder { color: var(--text-tertiary); }
-      .feed-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
-      .feed-search.legacy-team-device-select,
-      .feed-search.legacy-team-project-select {
-        box-sizing: border-box;
-        width: 100%;
-        min-width: 0;
-        max-width: 100%;
-      }
 
       .feed-inspector-files {
         width: 100%;
@@ -2335,10 +2316,6 @@
         transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
       }
       .feed-inspector-files::placeholder { color: var(--text-tertiary); }
-      .feed-inspector-files:focus {
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
-      }
 
       .feed-toggle {
         display: inline-flex;
@@ -2527,11 +2504,14 @@
 
       .feed-menu-panel {
         min-width: 180px;
-        padding: 6px;
-        border-radius: var(--radius-lg);
+        max-width: min(420px, var(--radix-dropdown-menu-content-available-width));
+        max-height: var(--radix-dropdown-menu-content-available-height);
+        overflow-y: auto;
+        padding: var(--popup-padding);
+        border-radius: var(--popup-radius);
         border: 1px solid var(--border);
         background: var(--surface-1);
-        box-shadow: var(--shadow-md);
+        box-shadow: var(--popup-shadow);
         z-index: 24;
       }
       .feed-menu-trigger {
@@ -2557,29 +2537,40 @@
         box-shadow: 0 0 0 4px var(--focus-ring);
       }
       .feed-menu-item {
+        border: 0;
+        background: transparent;
+        font-family: inherit;
+        text-align: left;
         display: flex;
         align-items: center;
         width: 100%;
-        min-height: 36px;
+        min-height: var(--control-button-height);
         padding: 8px 10px;
         border-radius: var(--radius-md);
         color: var(--text-primary);
         font-size: var(--font-size-md);
         cursor: pointer;
         user-select: none;
+        white-space: normal;
+        overflow-wrap: anywhere;
         outline: none;
       }
-      .feed-menu-item[data-highlighted] {
+      .feed-menu-item:not([data-disabled]):not(:disabled):hover,
+      .feed-menu-item:not([data-disabled]):not(:disabled):focus-visible,
+      .feed-menu-item:not([data-disabled]):not(:disabled)[data-highlighted] {
         background: var(--surface-2);
       }
-      .feed-menu-item[data-disabled] {
-        color: var(--text-tertiary);
-        cursor: default;
-      }
       .feed-menu-item.danger {
         color: var(--accent-warm);
       }
-      .feed-menu-item.danger[data-highlighted] {
+      .feed-menu-item[data-disabled],
+      .feed-menu-item:disabled {
+        color: var(--text-tertiary);
+        cursor: default;
+      }
+      .feed-menu-item.danger:not([data-disabled]):not(:disabled):hover,
+      .feed-menu-item.danger:not([data-disabled]):not(:disabled):focus-visible,
+      .feed-menu-item.danger:not([data-disabled]):not(:disabled)[data-highlighted] {
         background: rgba(212, 100, 46, 0.1);
       }
 
@@ -2908,24 +2899,14 @@
         min-width: 0;
       }
       .feed-visibility-select {
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--sp-2);
         width: 124px;
-        min-width: 0;
         min-height: 30px;
         padding: 6px 10px;
         border-radius: var(--radius-pill);
-        border: 1px solid var(--border);
-        background: var(--input-bg);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
         font-size: var(--font-size-sm);
         letter-spacing: normal;
         text-transform: none;
       }
-      .feed-visibility-content { z-index: 30; }
 
       .feed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
       /* File paths render as compact pill-tags in their own row — the actual
@@ -3345,7 +3326,16 @@
       .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; 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: var(--font-size-sm); }
+      .peer-scope-chip {
+        min-width: 0;
+        max-width: 100%;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        padding: 4px 8px;
+        background: rgba(43, 122, 176, 0.12);
+        color: var(--accent);
+        font-size: var(--font-size-sm);
+      }
       .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"
@@ -3414,11 +3404,11 @@
         display: grid;
         grid-template-rows: auto 1fr;
         gap: 4px;
-        padding: 6px;
+        padding: var(--popup-padding);
         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));
+        border-radius: var(--popup-radius);
+        box-shadow: var(--popup-shadow);
         z-index: 50;
       }
       /* Vanilla-DOM popover (peer-scope) anchors inline under its trigger;
@@ -3442,10 +3432,6 @@
         font: inherit;
         font-size: var(--font-size-md);
       }
-      .project-scope-picker-search:focus {
-        outline: 2px solid var(--accent);
-        outline-offset: 1px;
-      }
       .project-scope-picker-results {
         margin: 0;
         padding: 4px 0;
@@ -3732,89 +3718,11 @@
         max-width: 100%;
         flex: 1 1 320px;
       }
-      .sync-radix-select-trigger {
-        display: inline-flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        width: 100%;
-        text-align: left;
-      }
-      .sync-radix-select-trigger > span:first-child {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .sync-radix-select-icon {
-        color: var(--text-tertiary);
-        flex: 0 0 auto;
-      }
-      .sync-radix-select-content {
-        z-index: 30;
-        min-width: var(--radix-select-trigger-width);
-        max-width: min(420px, calc(100vw - 24px));
-        overflow: hidden;
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        background: var(--surface-1);
-        box-shadow: var(--shadow-lg);
-      }
-      .sync-radix-select-viewport {
-        padding: 6px;
-      }
-      .sync-radix-select-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        min-height: 36px;
-        padding: 8px 12px;
-        border-radius: var(--radius-sm);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-md);
-        cursor: pointer;
-        user-select: none;
-      }
-      .sync-radix-select-item[data-highlighted] {
-        outline: none;
-        background: var(--accent-subtle);
-        color: var(--accent);
-      }
-      .sync-radix-select-item[data-disabled] {
-        opacity: 0.45;
-        cursor: default;
-      }
-      .sync-radix-select-indicator {
-        color: var(--accent);
-        flex: 0 0 auto;
-      }
       .sync-legacy-claim-row { margin-top: 12px; gap: 12px; align-items: center; flex-wrap: wrap; }
-      .sync-legacy-select {
-        padding: 8px 12px;
-        border-radius: var(--radius-md);
-        border: 1px solid var(--border);
-        background: var(--input-bg);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-md);
-        cursor: pointer;
-        transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
-      }
-      .sync-legacy-select:hover { border-color: var(--border-hover); }
-      .sync-legacy-select:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
-      }
       .sync-legacy-button {
         border: 1px solid var(--control-border);
         background: var(--control-bg);
         color: var(--control-text);
-        padding: 8px 14px;
-        font-size: var(--font-size-md);
         font-weight: var(--font-weight-semibold);
         transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
       }
@@ -3831,23 +3739,6 @@
         cursor: default;
         transform: none;
       }
-      .sync-actor-select {
-        padding: 8px 12px;
-        border-radius: var(--radius-md);
-        border: 1px solid var(--border);
-        background: var(--input-bg);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-md);
-        cursor: pointer;
-        transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
-      }
-      .sync-actor-select:hover { border-color: var(--border-hover); }
-      .sync-actor-select:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
-      }
       .peer-meta { font-size: var(--font-size-md); color: var(--text-tertiary); font-feature-settings: 'tnum' 1; }
       .peer-addresses { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--text-tertiary); letter-spacing: 0.02em; }
       .attempts-list { margin-top: var(--sp-3); display: grid; gap: 6px; font-size: var(--font-size-md); color: var(--text-tertiary); }
@@ -3921,16 +3812,6 @@
         flex-shrink: 0;
       }
       .diagnostics-controls label { display: grid; gap: 5px; color: var(--text-secondary); font-size: var(--font-size-sm); }
-      .diagnostics-controls select {
-        width: 100%;
-        min-height: 36px;
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        padding: 6px 10px;
-        background: var(--input-bg);
-        color: var(--text-primary);
-      }
-      .diagnostics-controls select:focus-visible,
       .diagnostics-new-events:focus-visible,
       .diagnostics-recovery:focus-visible {
         outline: 2px solid var(--accent);
@@ -4053,6 +3934,7 @@
          timestamps, full file paths). Mono by default since most hints
          are paths / timestamps; callers can override per instance. */
       .tooltip-content {
+        position: relative;
         background: var(--surface-1);
         border: 1px solid var(--border);
         border-radius: var(--radius-sm);
@@ -4521,56 +4403,6 @@
       .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;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-        width: 100%;
-        padding: var(--sp-2) var(--sp-3);
-        border-radius: var(--radius-sm);
-        border: 1px solid var(--border);
-        background: var(--input-bg);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-md);
-        text-align: left;
-      }
-      .settings-select-trigger:hover { border-color: var(--border-hover); }
-      .settings-select-trigger:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
-      }
-      .settings-select-content {
-        z-index: 30;
-        min-width: var(--radix-select-trigger-width);
-        overflow: hidden;
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        background: var(--surface-1);
-        box-shadow: var(--shadow-lg);
-      }
-      .settings-select-viewport { padding: 6px; }
-      .settings-select-item {
-        min-height: 36px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        padding: 8px 12px;
-        border-radius: var(--radius-sm);
-        color: var(--text-primary);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-md);
-        cursor: pointer;
-        user-select: none;
-      }
-      .settings-select-item[data-highlighted] {
-        outline: none;
-        background: var(--accent-subtle);
-        color: var(--accent);
-      }
       .field-checkbox { flex-direction: row; align-items: center; gap: 8px; }
       .field-checkbox input[type="checkbox"] { width: 14px; height: 14px; margin: 0; }
       .field-checkbox label { margin: 0; }
@@ -4637,30 +4469,20 @@
         border: 1px solid var(--control-border);
         background: var(--control-bg);
         color: var(--control-text);
-        padding: var(--sp-2) var(--sp-4);
-        border-radius: var(--radius-md);
-        font-family: var(--font-sans);
-        font-size: var(--font-size-sm);
         cursor: pointer;
         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%);
       }
+      fieldset.sync-dialog-stack {
+        border: 0;
+        margin: 0;
+        padding: 0;
+        min-width: 0;
+      }
+      fieldset.sync-dialog-stack > legend { padding: 0; }
       .sync-dialog-actions {
         display: flex;
         gap: var(--sp-2);
@@ -4678,19 +4500,14 @@
         font-size: var(--font-size-md);
         box-sizing: border-box;
       }
-      .sync-dialog-input:focus {
-        border-color: var(--accent);
-        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);
+        border-radius: var(--popup-radius);
+        box-shadow: var(--popup-shadow);
         max-height: 260px;
         overflow-y: auto;
-        padding: 4px;
+        padding: var(--popup-padding);
         z-index: 120;
       }
       .autocomplete-listbox {
@@ -4734,10 +4551,16 @@
       }
       .sync-dialog-radio-list {
         display: grid;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        border: 0;
         gap: var(--sp-2);
       }
+      .sync-dialog-radio-list legend { max-width: 100%; overflow-wrap: anywhere; }
       .sync-dialog-radio-option {
         display: flex;
+        min-width: 0;
         align-items: center;
         gap: 10px;
         padding: 10px 12px;
@@ -4747,18 +4570,20 @@
         cursor: pointer;
         transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
       }
-      .recipient-policy-management-choice-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+      .sync-dialog-choice-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
       .devices-table-device .sync-subview-link { display: block; margin-top: 4px; text-align: left; }
       .devices-rename-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 6px; }
       .devices-rename-form label { display: grid; gap: 4px; font-weight: var(--font-weight-normal); }
-      .sync-dialog-radio-option:hover {
+      .sync-dialog-radio-option:hover:not(:has(:disabled, [data-disabled], button[data-state="checked"], input:checked)) {
         border-color: var(--border-hover);
         background: color-mix(in srgb, var(--surface-1) 94%, var(--surface-0));
       }
-      .sync-dialog-radio-option:has(button[data-state="checked"]) {
+      .sync-dialog-radio-option:has(button[data-state="checked"], input:checked) {
         border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
         background: color-mix(in srgb, var(--accent-subtle) 68%, var(--surface-1));
       }
+      .sync-dialog-radio-option:has(:disabled, [data-disabled]) { cursor: not-allowed; opacity: 0.6; }
+      .sync-dialog-radio-option:has(:disabled, [data-disabled]) :is(button, input, label) { cursor: not-allowed; }
       .sync-dialog-radio-option button {
         width: 18px;
         height: 18px;
@@ -4786,6 +4611,8 @@
         background: var(--accent);
       }
       .sync-dialog-radio-label {
+        min-width: 0;
+        overflow-wrap: anywhere;
         color: var(--text-primary);
         font-size: var(--font-size-md);
       }
@@ -4907,33 +4734,12 @@
         .feed-item > .feed-card-body { grid-column: 1; grid-row: 3; }
       }
 
-      /* ──────────────────────────────────────────────────────────────────
-         Token-aligned focus rings.
-
-         The interactive surfaces below previously relied on the browser's
-         default focus outline. They now share the same focus language as
-         the rest of the system:
-           - Buttons get a 2px var(--accent) outline with a 2px offset.
-           - Inputs and selects get an accent border + 3px var(--focus-ring)
-             halo, matching .feed-search / .project-filter / .sync-actor-select.
-         Radix-managed items (with [data-highlighted]) are intentionally not
-         touched here because their highlight state already serves as a
-         keyboard-focus indicator. */
+      /* Non-native button surfaces retain an offset keyboard outline. */
       .coordinator-admin-tab-trigger:focus-visible,
       .feed-inspector-button:focus-visible {
         outline: 2px solid var(--accent);
         outline-offset: 2px;
       }
-      .actor-merge-select:focus,
-      .actor-name-input:focus,
-      .feed-visibility-select:focus,
-      .legacy-review-search:focus,
-      .peer-scope-input:focus,
-      .project-domain-select:focus {
-        outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px var(--focus-ring);
-      }
 
       @media (prefers-reduced-motion: reduce) {
         .health-loading-icon,
@@ -4974,9 +4780,7 @@
             <span class="runtime-label" id="runtimeLabel" hidden></span>
             <span class="meta-line" id="metaLine"></span>
           </div>
-          <select class="project-filter" id="projectFilter" aria-label="Project filter">
-            <option value="">All Projects</option>
-          </select>
+          <div class="project-filter" id="projectFilterMount"></div>
           <button class="icon-button" id="themeToggle" type="button" aria-label="Switch theme">
             <i data-lucide="sun" aria-hidden="true"></i>
           </button>
@@ -5483,6 +5287,6 @@
       </div>
     </div>
 
-    <script src="/assets/app.js?v=a9865927468c"></script>
+    <script src="/assets/app.js?v=55d1f3f56f44"></script>
   </body>
 </html>