From 32b3cb0174b26a3746e63c94524000e9f4c66af5 Mon Sep 17 00:00:00 2001
From: nicad <36125594+PBnicad@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:42:47 +0800
Subject: [PATCH] fix(web): replace native select dropdowns with a
 design-system listbox

---
 .changeset/web-select-dropdown-style.md       |   5 +
 .../components/settings/ProviderManager.vue   |   5 +-
 .../components/settings/SettingsDialog.vue    |  31 +-
 apps/kimi-web/src/components/ui/Select.vue    | 390 ++++++++++++++++--
 apps/kimi-web/src/debug/KapDebugView.vue      |  45 +-
 apps/kimi-web/src/views/DesignSystemView.vue  |  19 +-
 6 files changed, 422 insertions(+), 73 deletions(-)
 create mode 100644 .changeset/web-select-dropdown-style.md

diff --git a/.changeset/web-select-dropdown-style.md b/.changeset/web-select-dropdown-style.md
new file mode 100644
index 0000000000..55647f2f5d
--- /dev/null
+++ b/.changeset/web-select-dropdown-style.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Restyle the settings dropdowns to match the design system instead of using the browser-native option list.
diff --git a/apps/kimi-web/src/components/settings/ProviderManager.vue b/apps/kimi-web/src/components/settings/ProviderManager.vue
index e9316f6bd3..c9910083b9 100644
--- a/apps/kimi-web/src/components/settings/ProviderManager.vue
+++ b/apps/kimi-web/src/components/settings/ProviderManager.vue
@@ -61,6 +61,7 @@ const addForm = reactive({
 const addError = ref('');
 
 const PROVIDER_TYPES = ['moonshot', 'anthropic', 'openai', 'custom'];
+const providerTypeOptions = PROVIDER_TYPES.map((pt) => ({ value: pt, label: pt }));
 
 function openAdd(): void {
   addForm.type = 'moonshot';
@@ -191,9 +192,7 @@ function statusLabel(status: AppProvider['status']): string {
         <template v-else>
           <div class="add-form">
             <Field :label="t('providers.fieldType')">
-              <Select v-model="addForm.type">
-                <option v-for="pt in PROVIDER_TYPES" :key="pt" :value="pt">{{ pt }}</option>
-              </Select>
+              <Select v-model="addForm.type" :options="providerTypeOptions" />
             </Field>
             <Field :label="t('providers.fieldApiKey')">
               <Input
diff --git a/apps/kimi-web/src/components/settings/SettingsDialog.vue b/apps/kimi-web/src/components/settings/SettingsDialog.vue
index 181e4197eb..abe5ba2a02 100644
--- a/apps/kimi-web/src/components/settings/SettingsDialog.vue
+++ b/apps/kimi-web/src/components/settings/SettingsDialog.vue
@@ -147,6 +147,13 @@ const modelGroups = computed<Array<{ provider: string; options: ModelOption[] }>
     .map(([provider, options]) => ({ provider, options }));
 });
 
+// Flat option list for ui/Select, with the provider carried as the group header.
+const modelSelectOptions = computed(() =>
+  modelGroups.value.flatMap((group) =>
+    group.options.map((o) => ({ value: o.id, label: o.label, group: group.provider })),
+  ),
+);
+
 const defaultPermissionMode = computed(() => {
   const mode = props.config?.defaultPermissionMode;
   return mode === 'auto' || mode === 'yolo' || mode === 'manual' ? mode : 'manual';
@@ -274,6 +281,11 @@ const archiveWorkspaces = computed<string[]>(() => {
   return Array.from(set).sort((a, b) => a.localeCompare(b));
 });
 
+const archiveWsOptions = computed(() => [
+  { value: 'all', label: t('settings.archivedAllWorkspaces') },
+  ...archiveWorkspaces.value.map((ws) => ({ value: ws, label: ws })),
+]);
+
 const filteredArchived = computed<AppSession[]>(() => {
   const q = archiveQuery.value.trim().toLowerCase();
   // Defensive invariant: this panel must only ever render archived sessions,
@@ -483,17 +495,12 @@ function archiveTime(iso: string): string {
                 <div v-if="modelGroups.length > 0" class="select-wrap">
                   <Select
                     :model-value="config.defaultModel ?? ''"
+                    :options="modelSelectOptions"
+                    :placeholder="t('settings.noDefaultModel')"
                     :disabled="configSaving"
                     :aria-label="t('settings.defaultModel')"
                     @update:model-value="setDefaultModel"
-                  >
-                    <option v-if="!config.defaultModel" value="" disabled>{{ t('settings.noDefaultModel') }}</option>
-                    <optgroup v-for="group in modelGroups" :key="group.provider" :label="group.provider">
-                      <option v-for="model in group.options" :key="model.id" :value="model.id">
-                        {{ model.label }}
-                      </option>
-                    </optgroup>
-                  </Select>
+                  />
                 </div>
                 <span v-else class="rvalue mono">{{ config.defaultModel ?? t('settings.noDefaultModel') }}</span>
               </div>
@@ -610,13 +617,11 @@ function archiveTime(iso: string): string {
             </label>
             <Select
               :model-value="archiveWsFilter"
+              :options="archiveWsOptions"
               size="sm"
               :aria-label="t('settings.archivedAllWorkspaces')"
-              @update:model-value="archiveWsFilter = $event as string"
-            >
-              <option value="all">{{ t('settings.archivedAllWorkspaces') }}</option>
-              <option v-for="ws in archiveWorkspaces" :key="ws" :value="ws">{{ ws }}</option>
-            </Select>
+              @update:model-value="archiveWsFilter = $event"
+            />
             <SegmentedControl
               size="sm"
               :model-value="archiveSort"
diff --git a/apps/kimi-web/src/components/ui/Select.vue b/apps/kimi-web/src/components/ui/Select.vue
index aaa7f1a2b4..6171a5750a 100644
--- a/apps/kimi-web/src/components/ui/Select.vue
+++ b/apps/kimi-web/src/components/ui/Select.vue
@@ -1,76 +1,384 @@
 <!-- apps/kimi-web/src/components/ui/Select.vue -->
-<!-- Design-system §03 Select: same sizing/surface/focus as Input. -->
+<!-- Design-system §03 Select: the trigger shares Input's sizing/surface/focus,
+     and the popup reuses the Menu surface + rows so the open state follows the
+     design system instead of the OS-native listbox. Options are data-driven
+     (no slot): pass flat options, with `group` set on an option to render a
+     group header whenever it differs from the previous option's group. -->
 <script setup lang="ts">
-withDefaults(defineProps<{
-  modelValue?: string | number;
+import { computed, nextTick, onBeforeUnmount, ref, useId } from 'vue';
+import Icon from './Icon.vue';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  /** Group header text — a header row is rendered whenever it differs from the
+      previous option's group. */
+  group?: string;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue?: string;
+  options?: SelectOption[];
+  /** Shown (muted) when no option matches modelValue. */
+  placeholder?: string;
   size?: 'sm' | 'md';
   disabled?: boolean;
   error?: boolean;
+  ariaLabel?: string;
 }>(), {
+  options: () => [],
+  placeholder: '',
   size: 'md',
 });
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
 
-function onChange(event: Event) {
-  emit('update:modelValue', (event.target as HTMLSelectElement).value);
+const uid = useId();
+const open = ref(false);
+const rootRef = ref<HTMLElement>();
+const triggerRef = ref<HTMLButtonElement>();
+const popRef = ref<HTMLElement>();
+const popStyle = ref<Record<string, string>>({});
+const activeIdx = ref(-1);
+
+const selectedOption = computed(() => props.options.find((o) => o.value === props.modelValue));
+
+function optionId(i: number): string {
+  return `${uid}-opt-${i}`;
+}
+
+// The component may be mounted into a popped-out window (KAP debug panel), so
+// DOM objects are resolved from the root element rather than module globals.
+function doc(): Document {
+  return rootRef.value?.ownerDocument ?? document;
+}
+
+function win(): Window {
+  return doc().defaultView ?? window;
+}
+
+function onDocMouseDown(e: MouseEvent): void {
+  if (rootRef.value?.contains(e.target as Node)) return;
+  close();
+}
+
+function onWinScroll(e: Event): void {
+  // Scrolling inside the popup list must not close it.
+  if (popRef.value?.contains(e.target as Node)) return;
+  close();
+}
+
+async function openPop(): Promise<void> {
+  if (props.disabled || open.value || props.options.length === 0) return;
+  // Fix the popup width and hide it before the first paint so the height
+  // measurement below is stable and there's no flash at the wrong spot.
+  const rect = triggerRef.value?.getBoundingClientRect();
+  popStyle.value = { visibility: 'hidden', minWidth: `${Math.round(rect?.width ?? 0)}px` };
+  open.value = true;
+  const selected = props.options.findIndex((o) => o.value === props.modelValue && !o.disabled);
+  activeIdx.value = selected >= 0 ? selected : firstEnabled();
+  doc().addEventListener('mousedown', onDocMouseDown, true);
+  win().addEventListener('resize', close);
+  win().addEventListener('scroll', onWinScroll, true);
+  await nextTick();
+  positionPop();
+  scrollActiveIntoView();
+}
+
+function close(): void {
+  if (!open.value) return;
+  open.value = false;
+  doc().removeEventListener('mousedown', onDocMouseDown, true);
+  win().removeEventListener('resize', close);
+  win().removeEventListener('scroll', onWinScroll, true);
+}
+
+onBeforeUnmount(() => close());
+
+function toggle(): void {
+  if (open.value) close();
+  else void openPop();
+}
+
+function firstEnabled(): number {
+  return props.options.findIndex((o) => !o.disabled);
+}
+
+function lastEnabled(): number {
+  for (let i = props.options.length - 1; i >= 0; i--) {
+    if (!props.options[i]?.disabled) return i;
+  }
+  return -1;
+}
+
+function moveActive(delta: number): void {
+  const n = props.options.length;
+  if (n === 0) return;
+  let i = activeIdx.value;
+  for (let step = 0; step < n; step++) {
+    i = (i + delta + n) % n;
+    if (!props.options[i]?.disabled) break;
+  }
+  activeIdx.value = i;
+  scrollActiveIntoView();
+}
+
+function scrollActiveIntoView(): void {
+  popRef.value?.querySelector('.is-active')?.scrollIntoView({ block: 'nearest' });
+}
+
+// Anchors the popup to the trigger, flipping above when the viewport bottom
+// doesn't fit it (same pattern as the ChatHeader kebab menu).
+function positionPop(): void {
+  const trigger = triggerRef.value;
+  const pop = popRef.value;
+  if (!trigger || !pop) return;
+  const w = win();
+  const r = trigger.getBoundingClientRect();
+  const gap = 4;
+  const margin = 8;
+  const popH = pop.offsetHeight;
+  let top = r.bottom + gap;
+  if (top + popH > w.innerHeight - margin && r.top - gap - popH > margin) {
+    top = r.top - gap - popH;
+  }
+  const popW = pop.offsetWidth;
+  let left = r.left;
+  if (left + popW > w.innerWidth - margin) left = Math.max(margin, w.innerWidth - margin - popW);
+  popStyle.value = {
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    minWidth: `${Math.round(r.width)}px`,
+  };
+}
+
+function choose(option: SelectOption): void {
+  if (option.disabled) return;
+  emit('update:modelValue', option.value);
+  close();
+  triggerRef.value?.focus();
+}
+
+// Focus stays on the trigger while the popup is open (listbox pattern), so all
+// open-state keys are handled here.
+function onTriggerKeydown(e: KeyboardEvent): void {
+  if (!open.value) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      void openPop();
+    }
+    return;
+  }
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault();
+      // Don't let an enclosing dialog's own Escape handler close it with us.
+      e.stopPropagation();
+      close();
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      moveActive(1);
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      moveActive(-1);
+      break;
+    case 'Home':
+      e.preventDefault();
+      activeIdx.value = firstEnabled();
+      scrollActiveIntoView();
+      break;
+    case 'End':
+      e.preventDefault();
+      activeIdx.value = lastEnabled();
+      scrollActiveIntoView();
+      break;
+    case 'Enter':
+    case ' ': {
+      e.preventDefault();
+      const opt = props.options[activeIdx.value];
+      if (opt) choose(opt);
+      break;
+    }
+    case 'Tab':
+      close();
+      break;
+  }
 }
 </script>
 
 <template>
-  <select
+  <div
+    ref="rootRef"
     class="ui-select"
-    :class="[`ui-select--${size}`, { 'has-error': error }]"
-    :value="modelValue"
-    :disabled="disabled"
-    @change="onChange"
+    :class="[`ui-select--${size}`, { 'is-open': open, 'has-error': error }]"
   >
-    <slot />
-  </select>
+    <button
+      ref="triggerRef"
+      type="button"
+      class="ui-select-trigger"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-activedescendant="open && activeIdx >= 0 ? optionId(activeIdx) : undefined"
+      @click="toggle"
+      @keydown="onTriggerKeydown"
+    >
+      <span class="ui-select-value" :class="{ 'is-placeholder': !selectedOption }">
+        {{ selectedOption?.label ?? placeholder }}
+      </span>
+      <Icon class="ui-select-chev" name="chevron-down" size="sm" />
+    </button>
+
+    <!-- Fixed popup, anchored to the trigger. mousedown is preventDefaulted so
+         clicking an option doesn't move focus away from the trigger. -->
+    <div
+      v-if="open"
+      ref="popRef"
+      class="ui-select-pop"
+      :class="`ui-select-pop--${size}`"
+      :style="popStyle"
+      role="listbox"
+      :aria-label="ariaLabel"
+      @mousedown.prevent
+    >
+      <template v-for="(opt, i) in options" :key="opt.value">
+        <div
+          v-if="opt.group && (i === 0 || options[i - 1]?.group !== opt.group)"
+          class="ui-select-group"
+        >
+          {{ opt.group }}
+        </div>
+        <div
+          :id="optionId(i)"
+          class="ui-select-option"
+          :class="{
+            'is-active': i === activeIdx,
+            'is-selected': opt.value === modelValue,
+            'is-disabled': opt.disabled,
+          }"
+          role="option"
+          :aria-selected="opt.value === modelValue"
+          :aria-disabled="opt.disabled ? true : undefined"
+          :title="opt.label"
+          @click="choose(opt)"
+          @mouseenter="!opt.disabled && (activeIdx = i)"
+        >
+          <span class="ui-select-option-label">{{ opt.label }}</span>
+          <Icon v-if="opt.value === modelValue" class="ui-select-check" name="check" size="sm" />
+        </div>
+      </template>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-.ui-select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+.ui-select { position: relative; width: 100%; }
+
+/* Trigger: same sizing / surface / focus as Input. */
+.ui-select-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   width: 100%;
   border: 1px solid var(--color-line-strong);
   border-radius: var(--radius-md);
-  background-color: var(--color-surface-raised);
-  /* Chevron matches the design-system `chevron-down` icon (16×16, 1.5px stroke).
-     Inline SVG can't read CSS vars, so the stroke is hardcoded per theme below. */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right var(--space-3) center;
-  background-size: 16px 16px;
+  background: var(--color-surface-raised);
   box-shadow: var(--shadow-xs);
   color: var(--color-text);
   font-family: var(--font-ui);
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   padding: 0 var(--space-3);
-  padding-right: calc(var(--space-3) + 16px + var(--space-2));
   cursor: pointer;
   transition: border-color var(--duration-base) var(--ease-out),
     box-shadow var(--duration-base) var(--ease-out);
 }
-.ui-select--md { height: 38px; }
-.ui-select--sm { height: 32px; font-size: var(--text-sm); }
-.ui-select:hover:not(:disabled):not(:focus) { border-color: var(--color-line-strong); }
-.ui-select:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--p-focus-ring); }
-.ui-select:disabled { opacity: 0.5; cursor: not-allowed; }
-.ui-select.has-error { border-color: var(--color-danger); }
-.ui-select.has-error:focus { box-shadow: 0 0 0 3px var(--color-danger-soft); }
-
-/* Dark-theme chevron (explicit choice). */
-html[data-color-scheme="dark"] .ui-select {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa0a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-}
-/* Dark-theme chevron (follow OS). */
-@media (prefers-color-scheme: dark) {
-  html[data-color-scheme="system"] .ui-select {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa0a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
-  }
+.ui-select--md .ui-select-trigger { height: 38px; }
+.ui-select--sm .ui-select-trigger { height: 32px; font-size: var(--text-sm); }
+.ui-select-trigger:hover:not(:disabled) { border-color: var(--color-line-strong); }
+.ui-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--p-focus-ring);
+}
+.ui-select.is-open .ui-select-trigger {
+  border-color: var(--color-accent);
+  box-shadow: var(--p-focus-ring);
+}
+.ui-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+.ui-select.has-error .ui-select-trigger { border-color: var(--color-danger); }
+.ui-select.has-error .ui-select-trigger:focus-visible { box-shadow: 0 0 0 3px var(--color-danger-soft); }
+
+.ui-select-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+.ui-select-value.is-placeholder { color: var(--color-text-faint); }
+.ui-select-chev {
+  flex: none;
+  color: var(--color-text-muted);
+  transition: transform var(--duration-base) var(--ease-out);
+}
+.ui-select.is-open .ui-select-chev { transform: rotate(180deg); }
+
+/* Popup: same surface as Menu. */
+.ui-select-pop {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  min-width: 140px;
+  max-width: 320px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: var(--space-1);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Options: same row styling as MenuItem. */
+.ui-select-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--duration-base), color var(--duration-base);
+}
+.ui-select-pop--sm .ui-select-option { font-size: var(--text-sm); }
+.ui-select-option.is-active { background: var(--color-surface-sunken); }
+.ui-select-option.is-disabled { opacity: 0.5; cursor: not-allowed; }
+.ui-select-option-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-select-check { flex: none; color: var(--color-accent); }
+
+.ui-select-group {
+  padding: var(--space-1) 10px 2px;
+  font-family: var(--font-ui);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--color-text-faint);
+  user-select: none;
 }
 </style>
diff --git a/apps/kimi-web/src/debug/KapDebugView.vue b/apps/kimi-web/src/debug/KapDebugView.vue
index 6371008c91..0fafbb51ce 100644
--- a/apps/kimi-web/src/debug/KapDebugView.vue
+++ b/apps/kimi-web/src/debug/KapDebugView.vue
@@ -7,6 +7,7 @@
 import { computed, nextTick, ref, watch } from 'vue';
 import { copyTextToClipboard } from '../lib/clipboard';
 import Tooltip from '../components/ui/Tooltip.vue';
+import Select from '../components/ui/Select.vue';
 import {
   clearTrace,
   downloadTraceLog,
@@ -27,6 +28,22 @@ const sessionFilter = ref<string>('');
 const errorsOnly = ref(false);
 const view = ref<'timeline' | 'aggregate'>('timeline');
 
+const sourceOptions = [
+  { value: 'all', label: 'rest + ws + app' },
+  { value: 'rest', label: 'rest' },
+  { value: 'ws', label: 'ws' },
+  { value: 'client', label: 'app errors' },
+];
+
+function setSourceFilter(v: string): void {
+  if (v === 'all' || v === 'rest' || v === 'ws' || v === 'client') sourceFilter.value = v;
+}
+
+const sessionOptions = computed(() => [
+  { value: '', label: 'all sessions' },
+  ...sessionIds.value.map((sid) => ({ value: sid, label: sid })),
+]);
+
 const all = computed<readonly TraceEntry[]>(() => {
   void traceVersion.value; // re-read the buffer on every push
   return [...traceEntries()];
@@ -166,16 +183,21 @@ function badgeLabel(e: TraceEntry): string {
     </header>
 
     <div class="kap-filters">
-      <select v-model="sourceFilter" aria-label="Source filter">
-        <option value="all">rest + ws + app</option>
-        <option value="rest">rest</option>
-        <option value="ws">ws</option>
-        <option value="client">app errors</option>
-      </select>
-      <select v-model="sessionFilter" aria-label="Session filter">
-        <option value="">all sessions</option>
-        <option v-for="sid in sessionIds" :key="sid" :value="sid">{{ sid }}</option>
-      </select>
+      <Select
+        :model-value="sourceFilter"
+        :options="sourceOptions"
+        size="sm"
+        aria-label="Source filter"
+        class="kap-select"
+        @update:model-value="setSourceFilter"
+      />
+      <Select
+        v-model="sessionFilter"
+        :options="sessionOptions"
+        size="sm"
+        aria-label="Session filter"
+        class="kap-select kap-select--session"
+      />
       <input v-model="textFilter" type="text" placeholder="filter (type / path / id)" aria-label="Text filter" />
       <label class="kap-check"><input v-model="errorsOnly" type="checkbox" /> errors</label>
       <label class="kap-check"><input v-model="follow" type="checkbox" /> follow</label>
@@ -283,7 +305,6 @@ function badgeLabel(e: TraceEntry): string {
   padding: 7px 10px;
   border-bottom: 1px solid var(--line);
 }
-.kap-filters select,
 .kap-filters input[type='text'] {
   padding: 3px 6px;
   border: 1px solid var(--line);
@@ -294,6 +315,8 @@ function badgeLabel(e: TraceEntry): string {
   min-width: 0;
 }
 .kap-filters input[type='text'] { flex: 1; min-width: 120px; }
+.kap-select { flex: none; width: 150px; }
+.kap-select--session { width: 200px; }
 .kap-check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; }
 .kap-view-toggle { display: flex; gap: 0; }
 .kap-view-toggle button:first-child { border-radius: 6px 0 0 6px; border-right: none; }
diff --git a/apps/kimi-web/src/views/DesignSystemView.vue b/apps/kimi-web/src/views/DesignSystemView.vue
index 404f445b6f..1ae0bb5522 100644
--- a/apps/kimi-web/src/views/DesignSystemView.vue
+++ b/apps/kimi-web/src/views/DesignSystemView.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { ICON_GROUPS } from '../lib/icons';
 import Icon from '../components/ui/Icon.vue';
+import Select from '../components/ui/Select.vue';
 
 const emit = defineEmits<{ close: [] }>();
 
+// §03 Select specimen uses the real primitive (data-driven options).
+const demoProvider = ref('anthropic');
+const demoProviderOptions = [
+  { value: 'anthropic', label: 'Anthropic' },
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'moonshot', label: 'Moonshot' },
+];
+
 function close(): void {
   emit('close');
 }
@@ -645,7 +654,7 @@ onUnmounted(() => {
                   </div>
                   <div class="p-field demo-grow">
                     <label class="p-label">Model provider</label>
-                    <select class="p-select"><option>Anthropic</option><option>OpenAI</option><option>Moonshot</option></select>
+                    <Select v-model="demoProvider" :options="demoProviderOptions" aria-label="Model provider" />
                   </div>
                 </div>
                 <div class="p-field">
@@ -1996,15 +2005,15 @@ onUnmounted(() => {
   /* ===== Form Input / Select / Textarea ===== */
   .p-field { display: flex; flex-direction: column; gap: 6px; }
   .p-label { font-size: var(--p-font-size-sm); font-weight: 600; color: var(--p-text); }
-  .p-input, .p-select, .p-textarea {
+  .p-input, .p-textarea {
     width: 100%; height: 38px; padding: 0 12px; border-radius: var(--p-r-md);
     border: 1px solid var(--p-line-strong); background: var(--p-surface-raised);
     font-family: var(--p-font-sans); font-size: var(--p-font-size-base); color: var(--p-text);
     box-shadow: var(--p-sh-xs); transition: border-color var(--p-dur) var(--p-ease), box-shadow var(--p-dur) var(--p-ease);
   }
   .p-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: var(--p-leading-normal); }
-  .p-input:hover, .p-select:hover, .p-textarea:hover { border-color: var(--p-line-strong); }
-  .p-input:focus, .p-select:focus, .p-textarea:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
+  .p-input:hover, .p-textarea:hover { border-color: var(--p-line-strong); }
+  .p-input:focus, .p-textarea:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 3px var(--p-accent-soft); }
   .p-input::placeholder, .p-textarea::placeholder { color: var(--p-text-faint); }
   .p-input.sm { height: 32px; font-size: var(--p-font-size-sm); border-radius: var(--p-r-sm); }
   .p-hint { font-size: var(--p-font-size-xs); color: var(--p-text-faint); }