design: establish model setup dialog v1 branch and structure

design/model-setup-dialog/v1/README.md

@@ -0,0 +1,23 @@
+# Model Setup Dialog Design v1
+
+## Scope
+- Improve selected-state clarity for provider cards.
+- Unify selected ring and check colors with primary action color.
+- Replace hardcoded red error/close-hover colors with MAI danger tokens.
+
+## Decisions
+- Selected card keeps a single visible selected border layer.
+- Selected fill matches hover fill to avoid a blue tint bias.
+- Error text and close-hover danger visuals use semantic tokens:
+  - --smtc-status-danger-foreground
+  - --smtc-status-danger-background
+
+## Files Updated
+- desktop/renderer/src/components/ModelSetupDialog.vue
+- desktop/renderer/src/components/GatewayLoading.vue
+- desktop/renderer/src/App.vue
+- desktop/renderer/src/styles/global.css
+- desktop/renderer/src/views/ChatView.vue
+
+## Notes
+- This version is intended for design iteration and review on branch design/model-setup-dialog/v1.

desktop/renderer/src/App.vue

@@ -359,12 +359,17 @@ onMounted(async () => {
   } catch {}
 
   // Listen for mid-session integrity alerts (file watcher)
-  unsubIntegrityAlert = window.openclaw.skills.onIntegrityAlert((result) => {
-    if (!result.valid) {
-      integrityResult.value = result;
-      integrityDialogVisible.value = true;
+  // Some preview environments do not expose this API yet.
+  try {
+    if (typeof window.openclaw.skills.onIntegrityAlert === "function") {
+      unsubIntegrityAlert = window.openclaw.skills.onIntegrityAlert((result) => {
+        if (!result.valid) {
+          integrityResult.value = result;
+          integrityDialogVisible.value = true;
+        }
+      });
     }
-  });
+  } catch {}
 
   // Listen for sandbox permission requests
   unsubPermission = window.openclaw.sandbox.onPermissionRequest((data: PermissionRequestData) => {
@@ -547,28 +552,40 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+.app-layout,
+.main-content,
+.app-header,
+.win-ctrl,
+.integrity-hint,
+.integrity-file {
+  --ux-surface-primary: var(--smtc-background-web-page-primary, var(--bg-primary));
+  --ux-surface-secondary: var(--smtc-background-window-primary-solid, var(--bg-secondary));
+  --ux-surface-hover: var(--smtc-background-ctrl-subtle-hover, #f0f0f0);
+  --ux-danger-surface: var(--smtc-status-danger-background);
+  --ux-danger-text: var(--smtc-status-danger-foreground);
+  --ux-text-primary: var(--smtc-foreground-ctrl-neutral-primary-rest, var(--text-primary));
+  --ux-text-secondary: var(--smtc-foreground-ctrl-neutral-secondary-rest, var(--text-secondary));
+  --ux-border: var(--smtc-stroke-divider-subtle, #e0e0e0);
+}
+
 .app-layout {
   display: flex;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   border-radius: 16px;
-  border: 1px solid #e0e0e0;
-  background: var(--bg-primary);
+  border: 1px solid var(--ux-border);
+  background: var(--ux-surface-primary);
   position: relative;
   will-change: contents;
 }
 
-html.dark .app-layout {
-  border-color: #3a3a3a;
-}
-
 .main-content {
   flex: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  background: var(--bg-secondary);
+  background: var(--ux-surface-secondary);
 }
 
 .app-header {
@@ -578,18 +595,14 @@ html.dark .app-layout {
   padding: 0 20px;
   height: 56px;
   flex-shrink: 0;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--ux-border);
   -webkit-app-region: drag;
 }
 
-html.dark .app-header {
-  border-bottom-color: var(--border);
-}
-
 .app-header-title {
   font-size: 18px;
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--ux-text-primary);
 }
 
 .app-header-controls {
@@ -606,30 +619,22 @@ html.dark .app-header {
   place-items: center;
   border: none;
   background: transparent;
-  color: var(--text-secondary);
+  color: var(--ux-text-secondary);
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.15s;
 }
 
 .win-ctrl:hover {
-  background: #f0f0f0;
-}
-
-html.dark .win-ctrl:hover {
-  background: var(--bg-tertiary);
+  background: var(--ux-surface-hover);
 }
 
 .win-ctrl--close:hover {
-  background: #fee2e2;
+  background: var(--ux-danger-surface);
 }
 
 .win-ctrl--close:hover svg {
-  stroke: #dc2626;
-}
-
-html.dark .win-ctrl--close:hover {
-  background: rgba(239, 68, 68, 0.15);
+  stroke: var(--ux-danger-text);
 }
 
 .main-drag-region {
@@ -638,12 +643,12 @@ html.dark .win-ctrl--close:hover {
 
 .integrity-hint {
   margin-bottom: 12px;
-  color: var(--text-secondary);
+  color: var(--ux-text-secondary);
 }
 
 .integrity-file {
   font-size: 13px;
-  color: var(--text-secondary);
+  color: var(--ux-text-secondary);
   padding-left: 12px;
 }
 </style>

desktop/renderer/src/components/GatewayLoading.vue

@@ -403,15 +403,15 @@ watch(
 }
 
 .win-ctrl--close:hover {
-  background: #fee2e2;
+  background: var(--smtc-status-danger-background);
 }
 
 .win-ctrl--close:hover svg {
-  stroke: #dc2626;
+  stroke: var(--smtc-status-danger-foreground);
 }
 
 :global(html.dark) .win-ctrl--close:hover {
-  background: rgba(239, 68, 68, 0.15);
+  background: color-mix(in srgb, var(--smtc-status-danger-background) 28%, transparent);
 }
 
 .loading-center {