fix(memhub): align model center with R6 visuals

Co-authored-by: Cursor <cursoragent@cursor.com>

memhub/apps/web/src/EmbeddingSwitchExperience.tsx

@@ -3,7 +3,7 @@ import type {
   EmbeddingSwitchJob,
   EmbeddingSwitchPlan,
 } from "@one-memory/contracts";
-import { ChevronDown, CircleAlert, Search, X } from "lucide-react";
+import { ChevronDown, CircleAlert, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { deleteRetiredEmbeddingSpace } from "./api";
 import { R6Button } from "./R6Controls";
@@ -81,10 +81,13 @@ export function EmbeddingSwitchConfirmDialog({
   }, []);
 
   return (
-    <div className="embedding-switch-dialog-layer" role="presentation">
+    <div
+      className="r6-settings-dialog-layer embedding-switch-dialog-layer"
+      role="presentation"
+    >
       <section
         ref={panel}
-        className="embedding-switch-dialog"
+        className="r6-settings-dialog embedding-switch-dialog"
         role="dialog"
         aria-modal="true"
         aria-labelledby="embedding-switch-title"
@@ -109,9 +112,6 @@ export function EmbeddingSwitchConfirmDialog({
         }}
       >
         <header>
-          <div className="embedding-switch-dialog-icon" aria-hidden="true">
-            <Search size={20} />
-          </div>
           <div>
             <h2 id="embedding-switch-title">更新记忆搜索索引？</h2>
             <p>
@@ -390,13 +390,13 @@ export function EmbeddingSwitchGlobalStatus({
                 清理旧索引
               </R6Button>
             ) : null}
-            <button
-              type="button"
+            <R6Button
+              variant="quiet"
               aria-label="关闭完成提示"
               onClick={() => setRecent(null)}
             >
               <X size={16} aria-hidden="true" />
-            </button>
+            </R6Button>
           </div>
         </aside>
       ) : null}
@@ -426,13 +426,13 @@ export function EmbeddingSwitchGlobalStatus({
             <R6Button variant="quiet" onClick={onConfigureSearch}>
               检查连接
             </R6Button>
-            <button
-              type="button"
+            <R6Button
+              variant="quiet"
               aria-label="关闭失败提示"
               onClick={() => setRecent(null)}
             >
               <X size={16} aria-hidden="true" />
-            </button>
+            </R6Button>
           </div>
         </aside>
       ) : null}

memhub/apps/web/src/embedding-switch.css

@@ -1,44 +1,21 @@
-.embedding-switch-dialog-layer {
-  position: fixed;
-  inset: 0;
+.r6-settings-dialog-layer.embedding-switch-dialog-layer {
   z-index: 120;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: rgb(24 31 36 / 28%);
-  backdrop-filter: blur(10px);
 }
 
-.embedding-switch-dialog {
+.r6-settings-dialog.embedding-switch-dialog {
   box-sizing: border-box;
-  width: min(600px, 100%);
+  width: min(600px, calc(100vw - 40px));
   max-height: calc(100vh - 48px);
   overflow: auto;
-  padding: 28px;
-  border: 1px solid #d7dfe5;
-  border-radius: 14px;
-  background: #fff;
-  color: #26343e;
+  color: var(--r6-text);
 }
 
 .embedding-switch-dialog > header {
   display: flex;
-  gap: 14px;
   align-items: flex-start;
 }
 
-.embedding-switch-dialog-icon {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: 9px;
-  background: #edf2f5;
-  color: #425b6c;
-}
-
-.embedding-switch-dialog h2 {
+.r6-settings-dialog.embedding-switch-dialog h2 {
   margin: 0 0 6px;
   font-size: 20px;
   line-height: 28px;
@@ -47,30 +24,30 @@
 .embedding-switch-safety p,
 .embedding-switch-dialog header p {
   margin: 0;
-  color: #61717d;
+  color: var(--r6-muted);
   font-size: 13px;
-  line-height: 21px;
+  line-height: 22px;
 }
 
 .embedding-switch-impact {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1px;
   margin: 22px 0;
-  overflow: hidden;
-  border: 1px solid #dce3e8;
-  border-radius: 10px;
-  background: #dce3e8;
+  border-block: 1px solid var(--bd);
 }
 
 .embedding-switch-impact > div {
-  padding: 14px 16px;
-  background: #f8fafb;
+  padding: 14px 16px 14px 0;
+}
+
+.embedding-switch-impact > div + div {
+  padding-left: 16px;
+  border-left: 1px solid var(--bd);
 }
 
 .embedding-switch-impact dt,
 .embedding-switch-details dt {
-  color: #71808b;
+  color: var(--meta-reading);
   font-size: 12px;
   line-height: 18px;
 }
@@ -78,9 +55,10 @@
 .embedding-switch-impact dd,
 .embedding-switch-details dd {
   margin: 3px 0 0;
-  color: #26343e;
+  color: var(--r6-text);
   font-size: 14px;
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
   line-height: 21px;
 }
 
@@ -89,8 +67,7 @@
   grid-template-columns: 170px minmax(0, 1fr);
   gap: 10px 18px;
   padding: 18px 0;
-  border-top: 1px solid #e2e7eb;
-  border-bottom: 1px solid #e2e7eb;
+  border-bottom: 1px solid var(--bd);
 }
 
 .embedding-switch-safety strong {
@@ -107,11 +84,16 @@
   align-items: center;
   gap: 6px;
   min-height: 32px;
-  color: #526773;
+  color: var(--r6-muted);
   font-size: 13px;
   cursor: pointer;
 }
 
+.embedding-switch-details summary:focus-visible {
+  outline: 2px solid var(--r6-focus);
+  outline-offset: 2px;
+}
+
 .embedding-switch-alert svg {
   flex: 0 0 auto;
   margin-top: 2px;
@@ -127,8 +109,9 @@
   gap: 14px 24px;
   margin: 12px 0 0;
   padding: 16px;
-  border-radius: 9px;
-  background: #f6f8f9;
+  border-top: 1px solid var(--bd);
+  border-radius: 0;
+  background: transparent;
 }
 
 .embedding-switch-alert {
@@ -138,13 +121,14 @@
   margin-top: 16px;
   padding: 11px 12px;
   border-radius: 8px;
-  background: #fff3f1;
-  color: #873f38;
+  border: 1px solid var(--dg-bd);
+  background: var(--dg-bg);
+  color: var(--dg);
   font-size: 13px;
   line-height: 20px;
 }
 
-.embedding-switch-dialog footer {
+.r6-settings-dialog.embedding-switch-dialog footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -155,13 +139,13 @@
 .embedding-switch-outcome {
   box-sizing: border-box;
   display: flex;
-  min-height: 58px;
+  min-height: 50px;
   align-items: center;
   gap: 16px;
-  padding: 11px 18px;
-  border-bottom: 1px solid #d9e1e6;
-  background: #f8fafb;
-  color: #2f424f;
+  padding: 9px 18px;
+  border-bottom: 0.5px solid var(--bd);
+  background: var(--panel);
+  color: var(--tx);
 }
 
 .embedding-switch-strip-copy,
@@ -174,13 +158,15 @@
 .embedding-switch-strip strong,
 .embedding-switch-outcome strong {
   font-size: 13px;
+  font-weight: 600;
   line-height: 19px;
 }
 
 .embedding-switch-strip span,
 .embedding-switch-outcome span {
-  color: #667782;
+  color: var(--tx2);
   font-size: 12px;
+  font-variant-numeric: tabular-nums;
   line-height: 18px;
 }
 
@@ -189,24 +175,24 @@
   flex: 1;
   overflow: hidden;
   border-radius: 999px;
-  background: #dce4e8;
+  background: var(--bd);
 }
 
 .embedding-switch-progress > span {
   display: block;
   height: 100%;
   border-radius: inherit;
-  background: #557c93;
-  transition: width 180ms ease-out;
+  background: var(--ac);
+  transition: width var(--motion-state) var(--motion-enter);
 }
 
 .embedding-switch-outcome {
   justify-content: space-between;
-  background: #f3f8f5;
+  background: var(--ok-bg);
 }
 
 .embedding-switch-outcome.is-error {
-  background: #fff7f5;
+  background: var(--dg-bg);
 }
 
 .embedding-switch-outcome-actions {
@@ -218,28 +204,16 @@
 .embedding-switch-cleanup-error {
   margin: 0;
   padding: 8px 18px;
-  border-bottom: 1px solid #ecd8d4;
-  background: #fff7f5;
-  color: #873f38;
+  border-bottom: 0.5px solid var(--dg-bd);
+  background: var(--dg-bg);
+  color: var(--dg);
   font-size: 12px;
   line-height: 18px;
 }
 
-.embedding-switch-outcome button:not(.r6-button) {
-  display: grid;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  place-items: center;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: #60717c;
-  cursor: pointer;
-}
-
-.embedding-switch-outcome button:not(.r6-button):hover {
-  background: #e8eef1;
+.embedding-switch-outcome-actions > .r6-button:last-child {
+  width: 36px;
+  padding-inline: 0;
 }
 
 @media (max-width: 700px) {
@@ -259,6 +233,16 @@
     grid-template-columns: 1fr;
   }
 
+  .embedding-switch-impact > div {
+    padding: 12px 0;
+  }
+
+  .embedding-switch-impact > div + div {
+    padding-left: 0;
+    border-top: 1px solid var(--bd);
+    border-left: 0;
+  }
+
   .embedding-switch-safety,
   .embedding-switch-details dl {
     grid-template-columns: 1fr;
@@ -281,3 +265,7 @@
     transition: none;
   }
 }
+
+[data-native-reduce-motion="true"] .embedding-switch-progress > span {
+  transition: none;
+}

memhub/apps/web/src/r6-controls.css

@@ -11,6 +11,41 @@
   --r6-fast: 140ms;
 }
 
+.r6-settings-dialog-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  background: rgb(46 66 82 / 18%);
+  backdrop-filter: blur(8px);
+}
+
+.r6-settings-dialog {
+  width: min(420px, calc(100vw - 40px));
+  padding: 28px;
+  border: 1px solid white;
+  border-radius: 16px;
+  background: #f3f7f9;
+  box-shadow: 0 24px 64px rgb(38 59 74 / 18%);
+}
+
+.r6-settings-dialog h2 {
+  margin: 0 0 10px;
+  font-size: 20px;
+}
+
+.r6-settings-dialog p {
+  margin: 0 0 24px;
+  color: #63707b;
+}
+
+.r6-settings-dialog footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
 button.r6-button {
   position: relative;
   display: inline-flex;
@@ -318,6 +353,18 @@ button.r6-switch:focus-visible,
 [data-native-reduce-motion="true"] .r6-button-spinner {
   animation: none;
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .r6-settings-dialog-layer {
+    background: rgb(46 66 82 / 28%);
+    backdrop-filter: none;
+  }
+}
+
+[data-native-reduce-transparency="true"] .r6-settings-dialog-layer {
+  background: rgb(46 66 82 / 28%);
+  backdrop-filter: none;
+}
 [data-native-reduce-motion="true"]
   :is(.r6-button, .r6-switch-track, .r6-switch-thumb) {
   transition: none;

memhub/apps/web/src/r6-settings.css

@@ -579,36 +579,6 @@
   background: rgb(158 178 194 / 22%);
   color: #0f6e56;
 }
-.r6-settings-dialog-layer {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: grid;
-  place-items: center;
-  background: rgb(46 66 82 / 18%);
-  backdrop-filter: blur(8px);
-}
-.r6-settings-dialog {
-  width: min(420px, calc(100vw - 40px));
-  padding: 28px;
-  border: 1px solid white;
-  border-radius: 16px;
-  background: #f3f7f9;
-  box-shadow: 0 24px 64px rgb(38 59 74 / 18%);
-}
-.r6-settings-dialog h2 {
-  margin: 0 0 10px;
-  font-size: 20px;
-}
-.r6-settings-dialog p {
-  margin: 0 0 24px;
-  color: #63707b;
-}
-.r6-settings-dialog footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
 .r6-settings .r6-model-maintenance {
   margin-top: 24px;
 }
@@ -757,13 +727,42 @@
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
-  min-height: 54px;
-  border: 1px solid #c0ccd5;
+  min-height: 44px;
+  border: 1px solid var(--r6-control-edge);
   border-radius: 8px;
-  background: #f0f5f6;
-  color: #262a2e;
-  font-size: 15px;
-  padding: 14px 16px;
+  background: #fff;
+  color: var(--r6-text);
+  font-size: 14px;
+  padding: 10px 13px;
+}
+.r6-settings .model-form .om-option-menu-button {
+  height: 44px;
+  min-height: 44px;
+  padding: 0 42px 0 13px;
+  border-color: var(--r6-control-edge);
+  background: #fff;
+  color: var(--r6-text);
+  font-size: 14px;
+}
+.r6-settings .model-form .om-option-menu-button::after {
+  top: 16px;
+  right: 16px;
+}
+.r6-settings .model-form .om-option-menu-button[aria-expanded="true"] {
+  border-color: #7892a6;
+  box-shadow: 0 0 0 3px rgb(85 124 147 / 12%);
+}
+.r6-settings .model-form input:not([type="checkbox"]):hover,
+.r6-settings .model-form select:hover,
+.r6-settings .model-form .om-option-menu-button:hover:not(:disabled) {
+  border-color: #aabcc8;
+  background: #fff;
+}
+.r6-settings .model-form input:not([type="checkbox"]):focus-visible,
+.r6-settings .model-form select:focus-visible,
+.r6-settings .model-form .om-option-menu-button:focus-visible {
+  outline: 2px solid var(--r6-focus);
+  outline-offset: 2px;
 }
 .r6-settings .model-advanced {
   grid-column: 1 / -1;