From 7736c9e9a8131407e302b871cc13075eeb946d96 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 15:42:20 +0800
Subject: [PATCH 01/18] style(web): polish sidebar and tool typography

- Use UI font and medium weight for sidebar and composer controls

- Add reusable shortcut and tool output blocks

- Cap long tool output at 50 lines with a scrollbar

- Update sidebar show-more copy and muted styling
---
 apps/kimi-web/src/components/SessionRow.vue   |  6 ++-
 apps/kimi-web/src/components/Sidebar.vue      | 19 ++++++++-
 .../src/components/WorkspaceGroup.vue         |  2 +-
 .../kimi-web/src/components/chat/Composer.vue | 13 +++---
 .../src/components/chat/ThinkingBlock.vue     |  4 +-
 .../src/components/chat/ThinkingPanel.vue     |  2 +-
 apps/kimi-web/src/components/chat/ToolRow.vue | 21 +++++++---
 .../components/chat/tool-calls/EditTool.vue   | 16 +------
 .../chat/tool-calls/GenericTool.vue           | 16 +------
 .../chat/tool-calls/ToolOutputBlock.vue       | 42 +++++++++++++++++++
 .../src/components/ui/ShortcutKey.vue         | 24 +++++++++++
 apps/kimi-web/src/i18n/locales/en/sidebar.ts  |  4 +-
 apps/kimi-web/src/i18n/locales/zh/sidebar.ts  |  4 +-
 13 files changed, 123 insertions(+), 50 deletions(-)
 create mode 100644 apps/kimi-web/src/components/chat/tool-calls/ToolOutputBlock.vue
 create mode 100644 apps/kimi-web/src/components/ui/ShortcutKey.vue

diff --git a/apps/kimi-web/src/components/SessionRow.vue b/apps/kimi-web/src/components/SessionRow.vue
index 5d1b8a6c39..e355924250 100644
--- a/apps/kimi-web/src/components/SessionRow.vue
+++ b/apps/kimi-web/src/components/SessionRow.vue
@@ -353,7 +353,9 @@ defineExpose({ closeMenu });
 .ts {
   color: var(--color-text-faint);
   font-size: var(--text-xs);
-  font-family: var(--font-mono);
+  font-family: var(--font-ui);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
 }
 
 /* Trailing action slot: time and kebab share one grid cell (grid-area:1/1).
@@ -366,7 +368,7 @@ defineExpose({ closeMenu });
   display: inline-grid;
   flex: none;
   align-items: center;
-  justify-items: center;
+  justify-items: end;
 }
 .act .ts,
 .act .kebab { grid-area: 1 / 1; }
diff --git a/apps/kimi-web/src/components/Sidebar.vue b/apps/kimi-web/src/components/Sidebar.vue
index 920eb24924..987465dbb6 100644
--- a/apps/kimi-web/src/components/Sidebar.vue
+++ b/apps/kimi-web/src/components/Sidebar.vue
@@ -23,6 +23,7 @@ import IconButton from './ui/IconButton.vue';
 import Icon from './ui/Icon.vue';
 import Menu from './ui/Menu.vue';
 import MenuItem from './ui/MenuItem.vue';
+import ShortcutKey from './ui/ShortcutKey.vue';
 import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const { t } = useI18n();
@@ -599,7 +600,10 @@ onBeforeUnmount(() => {
       <!-- Session search — opens the Spotlight-style search dialog -->
       <button class="search" type="button" @click="openSearch">
         <Icon class="search-icon" name="search" />
-        <span class="search-input">{{ t('sidebar.searchShortcut', { shortcut: sessionSearchShortcut }) }}</span>
+        <span class="search-input">
+          <span class="search-label">{{ t('sidebar.searchPlaceholder') }}</span>
+          <ShortcutKey>{{ sessionSearchShortcut }}</ShortcutKey>
+        </span>
       </button>
 
       <!-- New chat + new workspace buttons -->
@@ -911,6 +915,7 @@ onBeforeUnmount(() => {
   color: var(--color-text);
   font-family: var(--font-ui);
   font-size: var(--ui-font-size);
+  font-weight: var(--weight-medium);
   cursor: pointer;
   text-align: left;
 }
@@ -950,15 +955,25 @@ onBeforeUnmount(() => {
   flex: none;
 }
 .search-input {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
   flex: 1;
   min-width: 0;
   color: var(--color-text);
-  font-family: var(--mono);
+  font-family: var(--font-ui);
   font-size: var(--ui-font-size);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.search-input > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.search-label {
+  font-weight: var(--weight-medium);
+}
 
 /* Sessions */
 .sessions {
diff --git a/apps/kimi-web/src/components/WorkspaceGroup.vue b/apps/kimi-web/src/components/WorkspaceGroup.vue
index 729707b8e8..87a3a1ffb0 100644
--- a/apps/kimi-web/src/components/WorkspaceGroup.vue
+++ b/apps/kimi-web/src/components/WorkspaceGroup.vue
@@ -338,7 +338,7 @@ function onHeaderDragStart(event: DragEvent): void {
   border: none;
   border-radius: var(--radius-md);
   background: transparent;
-  color: var(--color-text);
+  color: var(--color-text-muted);
   font-family: var(--font-ui);
   font-size: var(--text-xs);
   text-align: left;
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index 4f591349a7..b15a2915da 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -1447,7 +1447,8 @@ function selectModel(modelId: string): void {
   cursor: pointer;
   user-select: none;
   transition: background 0.1s, color 0.15s;
-  font-family: var(--sans);
+  font-family: var(--font-ui);
+  font-weight: var(--weight-medium);
 }
 .perm-pill:hover {
   background: var(--color-surface-sunken);
@@ -1548,6 +1549,7 @@ function selectModel(modelId: string): void {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  font-family: var(--font-ui);
 }
 
 .md-section {
@@ -1567,7 +1569,7 @@ function selectModel(modelId: string): void {
   background: none;
   border: none;
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--font-ui);
   font-size: var(--ui-font-size);
   color: var(--color-text);
   padding: 5px 7px;
@@ -1634,7 +1636,7 @@ function selectModel(modelId: string): void {
   border-radius: var(--radius-sm);
 }
 .md-thinking .md-name {
-  font-family: var(--mono);
+  font-family: var(--font-ui);
   font-size: var(--ui-font-size);
   color: var(--color-text);
   flex: none;
@@ -1657,7 +1659,7 @@ function selectModel(modelId: string): void {
   border: none;
   background: none;
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--font-ui);
   font-size: var(--ui-font-size-xs);
   line-height: 1;
   color: var(--color-text-muted);
@@ -1770,7 +1772,8 @@ function selectModel(modelId: string): void {
   background: none;
   border-radius: 6px;
   font-size: var(--ui-font-size);
-  font-family: var(--sans);
+  font-family: var(--font-ui);
+  font-weight: var(--weight-medium);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;
diff --git a/apps/kimi-web/src/components/chat/ThinkingBlock.vue b/apps/kimi-web/src/components/chat/ThinkingBlock.vue
index 64156d7cf3..afa450897f 100644
--- a/apps/kimi-web/src/components/chat/ThinkingBlock.vue
+++ b/apps/kimi-web/src/components/chat/ThinkingBlock.vue
@@ -118,14 +118,14 @@ watch(
 
 .prev {
   color: var(--color-text-faint);
-  font: var(--text-base)/var(--leading-relaxed) var(--font-mono);
+  font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
   white-space: pre-wrap;
   word-break: break-word;
   display: block;
 }
 
 .tc {
-  font: var(--text-base)/var(--leading-relaxed) var(--font-mono);
+  font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
diff --git a/apps/kimi-web/src/components/chat/ThinkingPanel.vue b/apps/kimi-web/src/components/chat/ThinkingPanel.vue
index d2b3772b41..1309a40288 100644
--- a/apps/kimi-web/src/components/chat/ThinkingPanel.vue
+++ b/apps/kimi-web/src/components/chat/ThinkingPanel.vue
@@ -64,7 +64,7 @@ watch(
   overflow-y: auto;
   margin: 0;
   padding: 12px 14px;
-  font: var(--text-base)/var(--leading-relaxed) var(--font-mono);
+  font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
diff --git a/apps/kimi-web/src/components/chat/ToolRow.vue b/apps/kimi-web/src/components/chat/ToolRow.vue
index 63d49c4c4d..65d8a3bd5a 100644
--- a/apps/kimi-web/src/components/chat/ToolRow.vue
+++ b/apps/kimi-web/src/components/chat/ToolRow.vue
@@ -55,10 +55,12 @@ function onHeadClick(): void {
   >
     <div class="bh" ref="bhEl" @click="onHeadClick">
       <span v-if="icon" class="gl" v-html="icon" aria-hidden="true" />
-      <span class="a">{{ name }}</span>
-      <Tooltip :text="arg">
-        <span v-if="arg" class="p">{{ arg }}</span>
-      </Tooltip>
+      <span class="bh-text">
+        <span class="a">{{ name }}</span>
+        <Tooltip :text="arg">
+          <span v-if="arg" class="p">{{ arg }}</span>
+        </Tooltip>
+      </span>
       <span class="rt">
         <span class="status" :class="status" role="status" :aria-label="status">
           <Icon v-if="status === 'ok'" name="check" size="sm" />
@@ -133,6 +135,13 @@ function onHeadClick(): void {
   color: var(--color-text-faint);
   flex: none;
 }
+.bh-text {
+  display: flex;
+  align-items: baseline;
+  gap: inherit;
+  flex: 1;
+  min-width: 0;
+}
 .a {
   color: var(--color-text);
   font-weight: var(--weight-medium);
@@ -140,6 +149,7 @@ function onHeadClick(): void {
 }
 .p {
   color: var(--color-text-muted);
+  font-size: var(--text-xs);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -160,6 +170,7 @@ function onHeadClick(): void {
 }
 :slotted(.chip) {
   color: var(--color-text-muted);
+  font-family: var(--font-ui);
   font-size: var(--text-xs);
   flex: none;
 }
@@ -196,7 +207,7 @@ function onHeadClick(): void {
 .bb-pad {
   min-height: 0;
   overflow: hidden;
-  padding: 0 11px 11px;
+  padding: var(--space-2) var(--space-3) var(--space-3);
   background: var(--color-surface-sunken);
   border-top: 1px solid var(--color-line);
   color: var(--color-text);
diff --git a/apps/kimi-web/src/components/chat/tool-calls/EditTool.vue b/apps/kimi-web/src/components/chat/tool-calls/EditTool.vue
index 4f5941eb0a..0033da992b 100644
--- a/apps/kimi-web/src/components/chat/tool-calls/EditTool.vue
+++ b/apps/kimi-web/src/components/chat/tool-calls/EditTool.vue
@@ -6,6 +6,7 @@ import { diffStats } from '../../../lib/diffLines';
 import { buildEditDiffLines } from '../../../lib/toolDiff';
 import { toolGlyph, toolLabel, toolSummary } from '../../../lib/toolMeta';
 import ToolRow from '../ToolRow.vue';
+import ToolOutputBlock from './ToolOutputBlock.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -69,10 +70,7 @@ function toggle(): void {
       <span v-if="chip" class="chip">{{ chip }}</span>
     </template>
     <div v-if="summaryFull" class="bb-summary">{{ summaryFull }}</div>
-    <div class="bb-code">
-      <div v-if="!hasOutput" class="bb-empty">Waiting for output…</div>
-      <div v-for="(line, i) in tool.output ?? []" :key="i">{{ line }}</div>
-    </div>
+    <ToolOutputBlock :lines="tool.output" empty-text="Waiting for output…" />
   </ToolRow>
 </template>
 
@@ -89,14 +87,4 @@ function toggle(): void {
   margin-bottom: 6px;
   word-break: break-all;
 }
-.bb-empty {
-  color: var(--color-text-muted);
-  font-style: italic;
-}
-.bb-code {
-  margin-top: 10px;
-  padding: 11px 13px;
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-md);
-}
 </style>
diff --git a/apps/kimi-web/src/components/chat/tool-calls/GenericTool.vue b/apps/kimi-web/src/components/chat/tool-calls/GenericTool.vue
index 5ea18972b6..c22a6042a2 100644
--- a/apps/kimi-web/src/components/chat/tool-calls/GenericTool.vue
+++ b/apps/kimi-web/src/components/chat/tool-calls/GenericTool.vue
@@ -4,6 +4,7 @@ import { computed, ref, watch } from 'vue';
 import type { FilePreviewRequest, ToolCall, ToolMedia } from '../../../types';
 import { toolChip, toolGlyph, toolLabel, toolSummary } from '../../../lib/toolMeta';
 import ToolRow from '../ToolRow.vue';
+import ToolOutputBlock from './ToolOutputBlock.vue';
 
 const props = withDefaults(
   defineProps<{
@@ -72,10 +73,7 @@ watch(
       <span v-if="chip" class="chip">{{ chip }}</span>
     </template>
     <div v-if="summaryFull" class="bb-summary">{{ summaryFull }}</div>
-    <div class="bb-code">
-      <div v-if="!hasOutput" class="bb-empty">Waiting for output…</div>
-      <div v-for="(line, i) in tool.output ?? []" :key="i">{{ line }}</div>
-    </div>
+    <ToolOutputBlock :lines="tool.output" empty-text="Waiting for output…" />
   </ToolRow>
 </template>
 
@@ -92,14 +90,4 @@ watch(
   font-size: var(--text-xs);
   flex: none;
 }
-.bb-empty {
-  color: var(--color-text-muted);
-  font-style: italic;
-}
-.bb-code {
-  margin-top: 10px;
-  padding: 11px 13px;
-  border: 1px solid var(--color-line);
-  border-radius: var(--radius-md);
-}
 </style>
diff --git a/apps/kimi-web/src/components/chat/tool-calls/ToolOutputBlock.vue b/apps/kimi-web/src/components/chat/tool-calls/ToolOutputBlock.vue
new file mode 100644
index 0000000000..3f7059556e
--- /dev/null
+++ b/apps/kimi-web/src/components/chat/tool-calls/ToolOutputBlock.vue
@@ -0,0 +1,42 @@
+<!-- Shared line-oriented tool output block. Keeps long outputs to a readable
+     viewport while preserving the tool card's normal typography. -->
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const OUTPUT_SCROLL_LINE_COUNT = 50;
+
+const props = defineProps<{
+  lines?: string[];
+  emptyText?: string;
+}>();
+
+const outputLines = computed(() => props.lines ?? []);
+const isScrollable = computed(() => outputLines.value.length > OUTPUT_SCROLL_LINE_COUNT);
+const outputStyle = { '--tool-output-visible-lines': String(OUTPUT_SCROLL_LINE_COUNT) };
+</script>
+
+<template>
+  <div class="bb-code tool-output-block" :class="{ scroll: isScrollable }" :style="outputStyle">
+    <div v-if="outputLines.length === 0 && emptyText" class="bb-empty">{{ emptyText }}</div>
+    <div v-for="(line, i) in outputLines" :key="i">{{ line }}</div>
+  </div>
+</template>
+
+<style scoped>
+.tool-output-block {
+  margin-top: var(--space-2);
+  padding: var(--space-3);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-raised);
+}
+.tool-output-block.scroll {
+  max-height: calc(var(--tool-output-visible-lines) * 1lh);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+.bb-empty {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+</style>
diff --git a/apps/kimi-web/src/components/ui/ShortcutKey.vue b/apps/kimi-web/src/components/ui/ShortcutKey.vue
new file mode 100644
index 0000000000..67c87a182d
--- /dev/null
+++ b/apps/kimi-web/src/components/ui/ShortcutKey.vue
@@ -0,0 +1,24 @@
+<!-- Token-styled keyboard shortcut. Keeps the semantic <kbd> element reusable
+     across compact UI surfaces. -->
+<template>
+  <kbd class="shortcut-key">
+    <slot />
+  </kbd>
+</template>
+
+<style scoped>
+.shortcut-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  padding: 0 var(--space-1);
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-raised);
+  color: var(--color-text-muted);
+  font-family: var(--font-ui);
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--leading-tight);
+}
+</style>
diff --git a/apps/kimi-web/src/i18n/locales/en/sidebar.ts b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
index 3bb705ca36..70adc2e5ec 100644
--- a/apps/kimi-web/src/i18n/locales/en/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/en/sidebar.ts
@@ -31,9 +31,9 @@ export default {
   language: 'Language',
   daemon: 'Daemon',
   noSessions: 'No conversations yet',
-  showMore: 'Load more ({count})',
+  showMore: 'Load {count} more conversations',
   showLess: 'Show less',
-  showAll: 'Show all ({count})',
+  showAll: 'Show {count} more conversations',
   loadingMore: 'Loading…',
   collapseSidebar: 'Collapse sidebar',
   expandSidebar: 'Expand sidebar',
diff --git a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
index bea56f556a..9e92e43bd6 100644
--- a/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/sidebar.ts
@@ -31,9 +31,9 @@ export default {
   language: '语言',
   daemon: '后台',
   noSessions: '暂无对话',
-  showMore: '加载更多 ({count})',
+  showMore: '加载更多 {count} 个对话',
   showLess: '收起',
-  showAll: '展开 ({count})',
+  showAll: '展开剩余 {count} 个对话',
   loadingMore: '加载中…',
   collapseSidebar: '收起侧边栏',
   expandSidebar: '展开侧边栏',

From 73e9676f434e9211c47b8c0bb6e2e5dfb183558c Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:12:53 +0800
Subject: [PATCH 02/18] style(web): refine workspace picker sizing

---
 apps/kimi-web/package.json                    |   1 +
 .../src/components/chat/ConversationPane.vue  | 159 ++++++++++++++++--
 pnpm-lock.yaml                                |   8 +
 3 files changed, 154 insertions(+), 14 deletions(-)

diff --git a/apps/kimi-web/package.json b/apps/kimi-web/package.json
index febbb86264..680456e0b3 100644
--- a/apps/kimi-web/package.json
+++ b/apps/kimi-web/package.json
@@ -13,6 +13,7 @@
     "check:style": "node scripts/check-style.mjs"
   },
   "dependencies": {
+    "@chenglou/pretext": "0.0.8",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@xterm/addon-fit": "^0.11.0",
diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
index f3f06d05e2..613b5c7e8c 100644
--- a/apps/kimi-web/src/components/chat/ConversationPane.vue
+++ b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -1,5 +1,6 @@
 <!-- apps/kimi-web/src/components/chat/ConversationPane.vue -->
 <script setup lang="ts">
+import { measureNaturalWidth, prepareWithSegments } from '@chenglou/pretext';
 import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch, type ComponentPublicInstance } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { ActivationBadges, ApprovalBlock, ChatTurn, ConversationStatus, FilePreviewRequest, PermissionMode, QueuedPromptView, TaskItem, TodoView, ToolMedia, UIQuestion, WorkspaceView } from '../../types';
@@ -15,6 +16,8 @@ import Tooltip from '../ui/Tooltip.vue';
 import { getVisibleWorkspaces } from '../../lib/workspacePicker';
 import { safeRemove, STORAGE_KEYS } from '../../lib/storage';
 
+const { t, locale } = useI18n();
+
 const props = defineProps<{
   turns: ChatTurn[];
   sessionId?: string;
@@ -134,6 +137,13 @@ const emit = defineEmits<{
 // Empty-composer workspace picker.
 const wsPickOpen = ref(false);
 const wsPickExpanded = ref(false);
+const contentWrapRef = ref<HTMLElement | null>(null);
+const wsPickMeasureRef = ref<HTMLElement | null>(null);
+const wsPickWidth = ref<string>('');
+const wsPickStyle = computed<Record<string, string> | undefined>(() =>
+  wsPickWidth.value ? { '--ws-pick-width': wsPickWidth.value } : undefined,
+);
+let wsPickMeasureFrame: number | null = null;
 
 const activeWorkspaceLabel = computed(() => {
   const w = props.workspaces?.find((ws) => ws.id === props.activeWorkspaceId);
@@ -161,7 +171,81 @@ function pickWorkspace(id: string): void {
   if (id !== props.activeWorkspaceId) emit('selectWorkspace', id);
 }
 
-const { t } = useI18n();
+function cssPx(value: string): number {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function canvasFont(style: CSSStyleDeclaration): string {
+  return `${style.fontStyle || 'normal'} ${style.fontWeight || '400'} ${style.fontSize} ${style.fontFamily}`;
+}
+
+function letterSpacingPx(style: CSSStyleDeclaration): number {
+  return style.letterSpacing === 'normal' ? 0 : cssPx(style.letterSpacing);
+}
+
+function measureText(text: string, style: CSSStyleDeclaration): number {
+  if (!text) return 0;
+  const prepared = prepareWithSegments(text, canvasFont(style), { letterSpacing: letterSpacingPx(style) });
+  return measureNaturalWidth(prepared);
+}
+
+function workspacePickerMaxWidth(): number {
+  const containerWidth = contentWrapRef.value?.getBoundingClientRect().width ?? window.innerWidth;
+  return Math.max(0, containerWidth * 0.75);
+}
+
+function updateWorkspacePickerWidth(): void {
+  const probe = wsPickMeasureRef.value;
+  if (!probe) return;
+
+  const itemPath = probe.querySelector<HTMLElement>('.ws-pick-item-path');
+  if (!itemPath) return;
+
+  const itemPathStyle = getComputedStyle(itemPath);
+
+  const measuredPathWidth = (props.workspaces ?? []).reduce(
+    (max, workspace) => Math.max(max, measureText(workspace.shortPath, itemPathStyle)),
+    0,
+  );
+  wsPickWidth.value = measuredPathWidth
+    ? `${Math.ceil(Math.min(measuredPathWidth, workspacePickerMaxWidth()))}px`
+    : '';
+}
+
+function scheduleWorkspacePickerMeasure(): void {
+  if (typeof window === 'undefined') return;
+  void nextTick(() => {
+    if (wsPickMeasureFrame !== null) window.cancelAnimationFrame(wsPickMeasureFrame);
+    wsPickMeasureFrame = window.requestAnimationFrame(() => {
+      wsPickMeasureFrame = null;
+      updateWorkspacePickerWidth();
+    });
+  });
+}
+
+watch(
+  () => [
+    props.activeWorkspaceId,
+    props.workspaceName,
+    props.workspaces?.map((w) => `${w.id}\u0000${w.name}\u0000${w.shortPath}`).join('\u0001') ?? '',
+    hiddenWorkspaceCount.value,
+    locale.value,
+  ],
+  scheduleWorkspacePickerMeasure,
+  { immediate: true },
+);
+
+onMounted(() => {
+  scheduleWorkspacePickerMeasure();
+  window.addEventListener('resize', scheduleWorkspacePickerMeasure);
+  void document.fonts?.ready.then(scheduleWorkspacePickerMeasure);
+});
+
+onUnmounted(() => {
+  if (wsPickMeasureFrame !== null) window.cancelAnimationFrame(wsPickMeasureFrame);
+  window.removeEventListener('resize', scheduleWorkspacePickerMeasure);
+});
 
 // The align toggle was removed with its UI (6e50cb7) — reading layout is
 // always centered now. Drop the old persisted preference so users who once
@@ -1045,7 +1129,7 @@ defineExpose({ loadComposerForEdit, focusComposer });
         class="panes chat-scroll"
         @scroll.passive="onPanesScroll"
       >
-        <div class="content-wrap" :class="[mobile ? 'align-mobile' : 'align-center']">
+        <div ref="contentWrapRef" class="content-wrap" :class="[mobile ? 'align-mobile' : 'align-center']">
           <template v-if="turns.length === 0 && !sessionLoading">
             <!-- Empty session: Composer rendered in the centre of the pane -->
             <div class="empty-spacer" />
@@ -1053,7 +1137,27 @@ defineExpose({ loadComposerForEdit, focusComposer });
               <span class="empty-hint-title">{{ t('composer.emptyConversationTitle') }}</span>
               <span class="empty-hint-text">{{ t('composer.emptyConversation') }}</span>
               <!-- Workspace picker: choose where this new conversation starts. -->
-              <div v-if="hasWorkspaces" class="ws-pick">
+              <div v-if="hasWorkspaces" class="ws-pick" :style="wsPickStyle">
+                <div ref="wsPickMeasureRef" class="ws-pick-measure" aria-hidden="true">
+                  <button type="button" class="ws-pick-btn" tabindex="-1">
+                    <Icon name="folder" size="sm" />
+                    <span class="ws-pick-name">{{ activeWorkspaceLabel }}</span>
+                    <Icon class="ws-pick-chev" name="chevron-down" size="sm" />
+                  </button>
+                  <div class="ws-pick-menu">
+                    <button type="button" class="ws-pick-item" tabindex="-1">
+                      <span class="ws-pick-item-name" />
+                      <span class="ws-pick-item-path" />
+                    </button>
+                    <button type="button" class="ws-pick-item ws-pick-more" tabindex="-1">
+                      <span>{{ t('conversation.moreWorkspaces', { count: hiddenWorkspaceCount }) }}</span>
+                    </button>
+                    <button type="button" class="ws-pick-action" tabindex="-1">
+                      <Icon name="plus" size="sm" />
+                      <span>{{ t('conversation.addWorkspace') }}</span>
+                    </button>
+                  </div>
+                </div>
                 <Tooltip :text="t('conversation.switchWorkspace')">
                   <button type="button" class="ws-pick-btn" @click.stop="wsPickOpen = !wsPickOpen">
                     <Icon name="folder" size="sm" />
@@ -1382,13 +1486,31 @@ defineExpose({ loadComposerForEdit, focusComposer });
 /* Empty-composer workspace picker */
 .ws-pick {
   position: relative;
-  font-family: var(--mono);
+  font-family: var(--font-ui);
+}
+.ws-pick-measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  width: max-content;
+  height: 0;
+  overflow: hidden;
+}
+.ws-pick-measure .ws-pick-menu {
+  position: static;
+  transform: none;
+  width: max-content;
+  min-width: 0;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
 }
 .ws-pick-btn {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  max-width: 320px;
+  width: var(--ws-pick-width, max-content);
+  max-width: calc(100vw - var(--space-8));
   padding: 5px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -1413,8 +1535,9 @@ defineExpose({ loadComposerForEdit, focusComposer });
   transform: translateX(-50%);
   top: calc(100% + 6px);
   z-index: var(--z-dropdown);
-  min-width: 220px;
-  max-width: min(86vw, 340px);
+  width: var(--ws-pick-width, max-content);
+  min-width: var(--ws-pick-width, max-content);
+  max-width: calc(100vw - var(--space-8));
   max-height: 50vh;
   overflow-y: auto;
   background: var(--color-surface-raised);
@@ -1435,16 +1558,23 @@ defineExpose({ loadComposerForEdit, focusComposer });
   border-radius: 6px;
   padding: 6px 10px;
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--font-ui);
 }
 .ws-pick-item:hover { background: var(--panel2); }
 .ws-pick-item.on { background: var(--color-accent-soft); }
-.ws-pick-item-name { font-size: var(--ui-font-size-sm); color: var(--color-text); }
-.ws-pick-item.on .ws-pick-item-name { color: var(--color-accent-hover); font-weight: 500; }
-.ws-pick-item-path { font-size: var(--text-base); color: var(--muted); }
+.ws-pick-item-name {
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  color: var(--color-text);
+}
+.ws-pick-item.on .ws-pick-item-name { color: var(--color-accent-hover); }
+.ws-pick-item-path { font-size: var(--text-xs); color: var(--muted); }
 .ws-pick-item.ws-pick-more {
   flex-direction: row;
-  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
   color: var(--dim);
 }
 .ws-pick-item.ws-pick-more:hover { color: var(--color-text); }
@@ -1464,8 +1594,9 @@ defineExpose({ loadComposerForEdit, focusComposer });
   border-radius: 6px;
   padding: 7px 10px;
   cursor: pointer;
-  font-family: var(--mono);
-  font-size: var(--ui-font-size-sm);
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
   color: var(--dim);
 }
 .ws-pick-action:hover { background: var(--panel2); color: var(--color-text); }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7396c9c5c9..22ee113ed0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,6 +166,9 @@ importers:
 
   apps/kimi-web:
     dependencies:
+      '@chenglou/pretext':
+        specifier: 0.0.8
+        version: 0.0.8
       '@fontsource-variable/inter':
         specifier: ^5.2.8
         version: 5.2.8
@@ -995,6 +998,9 @@ packages:
   '@chenglou/pretext@0.0.5':
     resolution: {integrity: sha512-A8GZN10REdFGsyuiUgLV8jjPDDFMg5GmgxGWV0I3igxBOnzj+jgz2VMmVD7g+SFyoctfeqHFxbNatKSzVRWtRg==}
 
+  '@chenglou/pretext@0.0.8':
+    resolution: {integrity: sha512-yqm2GMxnPI7VHcHwe84P8ZF0JK/2d2DMKPqMN+s95jQhwDMYYXKVFVJUMEaVWckQStdsjdLav/0Vu+d9YbtGxA==}
+
   '@chevrotain/types@11.1.2':
     resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
 
@@ -8077,6 +8083,8 @@ snapshots:
 
   '@chenglou/pretext@0.0.5': {}
 
+  '@chenglou/pretext@0.0.8': {}
+
   '@chevrotain/types@11.1.2': {}
 
   '@colors/colors@1.5.0':

From 07c9f31f5e0aa861c1a715dcbfb35c95cd7458b2 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:35:02 +0800
Subject: [PATCH 03/18] style(web): align composer mode menus

---
 .../kimi-web/src/components/chat/Composer.vue | 114 +++++++++++++-----
 apps/kimi-web/src/i18n/locales/en/status.ts   |   3 +
 apps/kimi-web/src/i18n/locales/zh/status.ts   |   7 +-
 apps/kimi-web/src/lib/icons.ts                |  10 ++
 4 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index b15a2915da..109346eb09 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -905,15 +905,23 @@ function selectModel(modelId: string): void {
               <span v-if="goalArmed" class="mode-tag">{{ t('status.goalLabel') }}</span>
             </button>
 
-            <div v-if="modesOpen" ref="modesMenuRef" class="modes-menu" :style="modesMenuStyle">
+            <div v-if="modesOpen" ref="modesMenuRef" class="modes-menu" :style="modesMenuStyle" role="menu">
               <!-- Plan — functional client toggle -->
-              <button type="button" class="mode-row" :class="{ on: planOn }" @click="emit('togglePlan')">
-                <span class="mode-row-name">{{ t('status.planLabel') }}</span>
+              <button type="button" class="mode-row" :class="{ on: planOn }" role="menuitem" @click="emit('togglePlan')">
+                <span class="mode-row-icon"><Icon name="file-edit" size="sm" /></span>
+                <span class="mode-row-info">
+                  <span class="mode-row-name">{{ t('status.planLabel') }}</span>
+                  <span class="mode-row-desc">{{ t('status.planDesc') }}</span>
+                </span>
                 <span class="mode-switch" :class="{ on: planOn }"><span class="mode-knob" /></span>
               </button>
               <!-- Swarm — functional client toggle -->
-              <button type="button" class="mode-row" :class="{ on: swarmOn }" @click="emit('toggleSwarm')">
-                <span class="mode-row-name">{{ t('status.swarmLabel') }}</span>
+              <button type="button" class="mode-row" :class="{ on: swarmOn }" role="menuitem" @click="emit('toggleSwarm')">
+                <span class="mode-row-icon"><Icon name="sparkles" size="sm" /></span>
+                <span class="mode-row-info">
+                  <span class="mode-row-name">{{ t('status.swarmLabel') }}</span>
+                  <span class="mode-row-desc">{{ t('status.swarmDesc') }}</span>
+                </span>
                 <span class="mode-switch" :class="{ on: swarmOn }"><span class="mode-knob" /></span>
               </button>
               <!-- Goal — lifecycle controls when active; switch is on when active or armed. -->
@@ -921,9 +929,14 @@ function selectModel(modelId: string): void {
                 <button
                   type="button"
                   class="mode-row-main"
+                  role="menuitem"
                   @click="goalActive ? emit('controlGoal', 'cancel') : emit('toggleGoal')"
                 >
-                  <span class="mode-row-name">{{ t('status.goalLabel') }}</span>
+                  <span class="mode-row-icon"><Icon name="target" size="sm" /></span>
+                  <span class="mode-row-info">
+                    <span class="mode-row-name">{{ t('status.goalLabel') }}</span>
+                    <span class="mode-row-desc">{{ t('status.goalDesc') }}</span>
+                  </span>
                   <span v-if="!goalActive" class="mode-switch" :class="{ on: props.goalMode }"><span class="mode-knob" /></span>
                 </button>
                 <div v-if="goalActive" class="mode-row-actions">
@@ -1729,12 +1742,15 @@ function selectModel(modelId: string): void {
 
 .pd-check {
   width: 14px;
+  min-height: 1lh;
   flex: none;
   color: var(--color-accent);
-  font-weight: 500;
+  font-size: var(--ui-font-size);
+  font-weight: var(--weight-medium);
   display: flex;
+  align-items: center;
   justify-content: center;
-  margin-top: 1px;
+  line-height: var(--leading-normal);
 }
 
 .pd-info {
@@ -1746,16 +1762,18 @@ function selectModel(modelId: string): void {
 }
 
 .pd-name {
-  font-family: var(--sans);
+  font-family: var(--font-ui);
   font-size: var(--ui-font-size);
-  font-weight: 500;
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-normal);
 }
 
 .pd-desc {
-  font-family: var(--sans);
-  font-size: var(--ui-font-size);
+  font-family: var(--font-ui);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
   color: var(--muted);
-  line-height: 1.4;
+  line-height: var(--leading-normal);
 }
 
 /* Toggle pills (Thinking / Plan) */
@@ -1800,35 +1818,72 @@ function selectModel(modelId: string): void {
   position: fixed;
   z-index: var(--z-dropdown);
   min-width: 220px;
+  max-width: 280px;
   background: var(--color-surface-raised);
   border: 1px solid var(--color-line);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
-  padding: 4px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
 }
 .mode-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
+  gap: 7px;
   width: 100%;
-  padding: 7px 10px;
+  padding: 6px 7px;
   border: none;
   background: none;
   border-radius: 6px;
   cursor: pointer;
-  font-family: var(--sans);
+  font-family: var(--font-ui);
   text-align: left;
 }
-.mode-row:hover:not(:disabled) { background: var(--panel2); }
+.mode-row:hover:not(:disabled) { background: var(--color-surface-sunken); }
 .mode-row:disabled { cursor: not-allowed; opacity: 0.45; }
-.mode-row-name { font-size: var(--ui-font-size-sm); color: var(--color-text); }
+.mode-row-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.mode-row-icon {
+  width: 14px;
+  min-height: 1lh;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: var(--ui-font-size);
+  line-height: var(--leading-normal);
+}
+.mode-row-name {
+  font-size: var(--ui-font-size);
+  font-weight: var(--weight-medium);
+  color: var(--color-text);
+  line-height: var(--leading-normal);
+}
+.mode-row-desc {
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--muted);
+  line-height: var(--leading-normal);
+}
 .mode-row-not-supported {
   margin-left: auto;
   font-size: var(--ui-font-size-xs);
   color: var(--muted);
 }
-.mode-row.on .mode-row-name { color: var(--color-accent-hover); font-weight: 500; }
+.mode-row.on {
+  background: var(--color-accent-soft);
+}
+.mode-row.on .mode-row-name { color: var(--color-accent-hover); }
+.mode-row.on .mode-row-icon { color: var(--color-accent-hover); }
 .mode-row-meta { font-family: var(--mono); font-size: calc(var(--ui-font-size) - 3px); color: var(--muted); }
 .mode-row:disabled .mode-row-meta { color: var(--faint); }
 .mode-switch {
@@ -1862,22 +1917,25 @@ function selectModel(modelId: string): void {
   gap: 0;
 }
 .mode-row-goal:hover { background: transparent; }
+.mode-row-goal.on {
+  background: var(--color-accent-soft);
+}
 .mode-row-main {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
+  gap: 7px;
   width: 100%;
-  padding: 7px 10px;
+  padding: 6px 7px;
   border: none;
   background: none;
   border-radius: 6px;
   cursor: pointer;
-  font-family: var(--sans);
+  font-family: var(--font-ui);
   text-align: left;
 }
-.mode-row-main:hover { background: var(--panel2); }
-.mode-row-goal.on .mode-row-main .mode-row-name { color: var(--color-accent-hover); font-weight: 500; }
+.mode-row-main:hover { background: var(--color-surface-sunken); }
+.mode-row-goal.on .mode-row-main .mode-row-name { color: var(--color-accent-hover); }
 .mode-row-actions {
   display: flex;
   gap: 6px;
@@ -2065,7 +2123,7 @@ function selectModel(modelId: string): void {
     font-size: var(--ui-font-size);
   }
   .pd-desc {
-    font-size: var(--ui-font-size);
+    font-size: var(--text-xs);
   }
 }
 
diff --git a/apps/kimi-web/src/i18n/locales/en/status.ts b/apps/kimi-web/src/i18n/locales/en/status.ts
index fc4ca8cc47..2638570b33 100644
--- a/apps/kimi-web/src/i18n/locales/en/status.ts
+++ b/apps/kimi-web/src/i18n/locales/en/status.ts
@@ -12,13 +12,16 @@ export default {
   permissionYoloDesc: 'Auto-approve tool actions, but agent may still ask questions',
   // Plan mode pill
   planLabel: 'Plan',
+  planDesc: 'Have the agent make a plan before changing files',
   planOn: 'on',
   planOff: 'off',
   planTooltip: 'Toggle plan mode (research before editing)',
   // Mode selector (Plan / Goal / Swarm)
   modesLabel: 'Mode',
   goalLabel: 'Goal',
+  goalDesc: 'Track one objective until it is complete',
   swarmLabel: 'Swarm',
+  swarmDesc: 'Run parallel agents for broader exploration',
   modeOff: 'Off',
   goalPlaceholder: 'What should the agent achieve?',
   goalStart: 'Start',
diff --git a/apps/kimi-web/src/i18n/locales/zh/status.ts b/apps/kimi-web/src/i18n/locales/zh/status.ts
index 98287e9d57..516b634987 100644
--- a/apps/kimi-web/src/i18n/locales/zh/status.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/status.ts
@@ -8,19 +8,22 @@ export default {
   permissionAuto: '完全自主',
   permissionYolo: '自动通过',
   permissionManualDesc: '每个工具操作都需要你手动确认',
-  permissionAutoDesc: '完全自主运行，agent 自己做决定，不再询问',
+  permissionAutoDesc: '完全自主运行，智能体自己做决定，不再询问',
   permissionYoloDesc: '自动批准工具操作，但遇到关键问题仍会询问',
   // 计划模式
   planLabel: '计划',
+  planDesc: '先让智能体梳理计划，再修改文件',
   planOn: '开',
   planOff: '关',
   planTooltip: '切换计划模式（先调研再修改）',
   // 模式选择器（计划 / 目标 / Swarm）
   modesLabel: '模式',
   goalLabel: '目标',
+  goalDesc: '持续跟踪一个目标，直到任务完成',
   swarmLabel: 'Swarm',
+  swarmDesc: '并行运行多个智能体，适合大范围探索',
   modeOff: '未启用',
-  goalPlaceholder: '让 Agent 完成什么目标？',
+  goalPlaceholder: '让智能体完成什么目标？',
   goalStart: '开始',
   goalPause: '暂停',
   goalResume: '继续',
diff --git a/apps/kimi-web/src/lib/icons.ts b/apps/kimi-web/src/lib/icons.ts
index e41f0b1e4a..11aaf0234c 100644
--- a/apps/kimi-web/src/lib/icons.ts
+++ b/apps/kimi-web/src/lib/icons.ts
@@ -43,6 +43,7 @@ import RiExpandRightLine from '~icons/ri/expand-right-line';
 import RiExternalLinkLine from '~icons/ri/external-link-line';
 import RiFileAddLine from '~icons/ri/file-add-line';
 import RiFileCopyLine from '~icons/ri/file-copy-line';
+import RiFileEditLine from '~icons/ri/file-edit-line';
 import RiFileLine from '~icons/ri/file-line';
 import RiFileTextLine from '~icons/ri/file-text-line';
 import RiFlashlightLine from '~icons/ri/flashlight-line';
@@ -72,6 +73,7 @@ import RiStarFill from '~icons/ri/star-fill';
 import RiStarLine from '~icons/ri/star-line';
 import RiStopFill from '~icons/ri/stop-fill';
 import RiSubtractLine from '~icons/ri/subtract-line';
+import RiTargetLine from '~icons/ri/target-line';
 import RiTerminalBoxLine from '~icons/ri/terminal-box-line';
 import RiTimeLine from '~icons/ri/time-line';
 import RiToolsLine from '~icons/ri/tools-line';
@@ -104,6 +106,7 @@ import RawExpandRightLine from '~icons/ri/expand-right-line?raw';
 import RawExternalLinkLine from '~icons/ri/external-link-line?raw';
 import RawFileAddLine from '~icons/ri/file-add-line?raw';
 import RawFileCopyLine from '~icons/ri/file-copy-line?raw';
+import RawFileEditLine from '~icons/ri/file-edit-line?raw';
 import RawFileLine from '~icons/ri/file-line?raw';
 import RawFileTextLine from '~icons/ri/file-text-line?raw';
 import RawFlashlightLine from '~icons/ri/flashlight-line?raw';
@@ -133,6 +136,7 @@ import RawStarFill from '~icons/ri/star-fill?raw';
 import RawStarLine from '~icons/ri/star-line?raw';
 import RawStopFill from '~icons/ri/stop-fill?raw';
 import RawSubtractLine from '~icons/ri/subtract-line?raw';
+import RawTargetLine from '~icons/ri/target-line?raw';
 import RawTerminalBoxLine from '~icons/ri/terminal-box-line?raw';
 import RawTimeLine from '~icons/ri/time-line?raw';
 import RawToolsLine from '~icons/ri/tools-line?raw';
@@ -177,6 +181,7 @@ export type IconName =
   | 'folder-solid'
   | 'file'
   | 'file-text'
+  | 'file-edit'
   | 'file-plus'
   | 'file-off'
   | 'image-off'
@@ -197,6 +202,7 @@ export type IconName =
   | 'alert-triangle'
   | 'clock'
   | 'sparkles'
+  | 'target'
   | 'play'
   | 'stop'
   | 'star'
@@ -256,6 +262,7 @@ export const ICONS: Record<IconName, IconEntry> = {
   'folder-solid': entry(RiFolderFill, RawFolderFill),
   file: entry(RiFileLine, RawFileLine),
   'file-text': entry(RiFileTextLine, RawFileTextLine),
+  'file-edit': entry(RiFileEditLine, RawFileEditLine),
   'file-plus': entry(RiFileAddLine, RawFileAddLine),
   'file-off': entry(RiFileLine, RawFileLine),
   'image-off': entry(RiImageLine, RawImageLine),
@@ -276,6 +283,7 @@ export const ICONS: Record<IconName, IconEntry> = {
   'alert-triangle': entry(RiAlertLine, RawAlertLine),
   clock: entry(RiTimeLine, RawTimeLine),
   sparkles: entry(RiSparklingLine, RawSparklingLine),
+  target: entry(RiTargetLine, RawTargetLine),
   play: entry(RiPlayFill, RawPlayFill),
   stop: entry(RiStopFill, RawStopFill),
   star: entry(RiStarFill, RawStarFill),
@@ -353,6 +361,7 @@ export const ICON_GROUPS: ReadonlyArray<readonly [string, readonly IconName[]]>
       'folder-solid',
       'file',
       'file-text',
+      'file-edit',
       'file-plus',
       'file-off',
       'image-off',
@@ -365,6 +374,7 @@ export const ICON_GROUPS: ReadonlyArray<readonly [string, readonly IconName[]]>
       'check-list',
       'bolt',
       'git-pull-request',
+      'target',
       'calendar-schedule',
       'calendar-todo',
       'calendar-close',

From 97b384c73d6c1e1a5ca982c6d0632406df11c991 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 17:39:31 +0800
Subject: [PATCH 04/18] style(web): tune list and question typography

---
 apps/kimi-web/src/components/SessionRow.vue   |  2 +-
 .../src/components/chat/QuestionCard.vue      | 22 ++++++++++++++-----
 apps/kimi-web/src/components/ui/MenuItem.vue  |  4 ++--
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/kimi-web/src/components/SessionRow.vue b/apps/kimi-web/src/components/SessionRow.vue
index e355924250..31a691fa27 100644
--- a/apps/kimi-web/src/components/SessionRow.vue
+++ b/apps/kimi-web/src/components/SessionRow.vue
@@ -341,7 +341,7 @@ defineExpose({ closeMenu });
 
 .t {
   color: inherit;
-  font-size: var(--ui-font-size);
+  font-size: var(--text-base);
   font-weight: var(--weight-regular);
   flex: 1;
   min-width: 0;
diff --git a/apps/kimi-web/src/components/chat/QuestionCard.vue b/apps/kimi-web/src/components/chat/QuestionCard.vue
index eff842d6e4..3617167790 100644
--- a/apps/kimi-web/src/components/chat/QuestionCard.vue
+++ b/apps/kimi-web/src/components/chat/QuestionCard.vue
@@ -452,7 +452,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
 }
 .qstep {
   color: var(--color-text-muted);
-  font: var(--text-xs) var(--font-mono);
+  font: var(--text-xs) var(--font-ui);
   margin-left: var(--space-1);
 }
 /* Minimize toggle — pinned to the right of the header row. */
@@ -482,6 +482,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   align-items: center;
   gap: var(--space-2);
   margin-bottom: var(--space-3);
+  font-family: var(--font-ui);
 }
 .qstep-dot {
   display: inline-flex;
@@ -493,7 +494,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   border: 1px solid var(--color-line);
   background: var(--color-surface);
   color: var(--color-text-muted);
-  font: var(--text-xs) var(--font-mono);
+  font: var(--text-xs) var(--font-ui);
   cursor: pointer;
   padding: 0;
   transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
@@ -545,7 +546,8 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
 
 .qopt-key {
   color: var(--color-text-muted);
-  font: var(--text-xs) var(--font-mono);
+  font: var(--text-xs) var(--font-ui);
+  font-weight: var(--weight-medium);
   width: 12px;
   flex: none;
   text-align: center;
@@ -560,8 +562,16 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   flex-direction: column;
   gap: 2px;
 }
-.qopt-label { color: var(--color-text); }
-.qopt-desc { color: var(--color-text-muted); font: var(--text-xs)/var(--leading-normal) var(--font-ui); }
+.qopt-label {
+  color: var(--color-text);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+}
+.qopt-desc {
+  color: var(--color-text-muted);
+  font: var(--text-xs)/var(--leading-normal) var(--font-ui);
+  font-weight: var(--weight-medium);
+}
 
 .chk, .rad { font: var(--text-base) var(--font-mono); }
 
@@ -603,7 +613,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   .qstep-dot {
     width: 28px;
     height: 28px;
-    font: var(--text-xs) var(--font-mono);
+    font: var(--text-xs) var(--font-ui);
   }
 
   /* Options → taller, finger-friendly rows. Label + description already stack
diff --git a/apps/kimi-web/src/components/ui/MenuItem.vue b/apps/kimi-web/src/components/ui/MenuItem.vue
index a44bb31d93..cc9cf0d694 100644
--- a/apps/kimi-web/src/components/ui/MenuItem.vue
+++ b/apps/kimi-web/src/components/ui/MenuItem.vue
@@ -38,9 +38,9 @@ defineEmits<{ click: [event: MouseEvent] }>();
   border: none;
   border-radius: var(--radius-sm);
   background: transparent;
-  color: var(--color-text-muted);
+  color: var(--color-text);
   font-family: var(--font-ui);
-  font-size: var(--text-sm);
+  font-size: var(--text-base);
   text-align: left;
   cursor: pointer;
   transition: background var(--duration-base), color var(--duration-base);

From 0e4497b4399ee46d39d6d6c23a2d0c3c31552bfc Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 17:40:51 +0800
Subject: [PATCH 05/18] style(web): reuse shortcut keys in approvals

---
 .../src/components/chat/ApprovalCard.vue      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/ApprovalCard.vue b/apps/kimi-web/src/components/chat/ApprovalCard.vue
index 0448ff2613..48047bccbb 100644
--- a/apps/kimi-web/src/components/chat/ApprovalCard.vue
+++ b/apps/kimi-web/src/components/chat/ApprovalCard.vue
@@ -10,6 +10,7 @@ import Badge from '../ui/Badge.vue';
 import Button from '../ui/Button.vue';
 import IconButton from '../ui/IconButton.vue';
 import Icon from '../ui/Icon.vue';
+import ShortcutKey from '../ui/ShortcutKey.vue';
 import Tooltip from '../ui/Tooltip.vue';
 
 const props = defineProps<{
@@ -314,20 +315,20 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
               :loading="pendingAction === `option:${opt.label}`"
               :disabled="busy"
               @click="approveOption(opt.label)"
-            >{{ opt.label }}<span class="k">[{{ i + 1 }}]</span></Button>
+            >{{ opt.label }}<ShortcutKey class="k">[{{ i + 1 }}]</ShortcutKey></Button>
           </Tooltip>
         </template>
-        <Button v-else class="kbtn" size="sm" variant="primary" :loading="pendingAction === 'approvePlan'" :disabled="busy" @click="approvePlan">{{ t('approval.approvePlan') }}<span class="k">[1]</span></Button>
-        <Button class="kbtn" size="sm" variant="secondary" :disabled="busy" @click="revisePlan">{{ t('approval.revise') }}<span v-if="planReview.options.length === 0" class="k">[2]</span></Button>
-        <Button class="kbtn" size="sm" variant="danger-soft" :loading="pendingAction === 'rejectAndExit'" :disabled="busy" @click="rejectAndExitPlan">{{ t('approval.rejectAndExit') }}<span v-if="planReview.options.length === 0" class="k">[3]</span></Button>
+        <Button v-else class="kbtn" size="sm" variant="primary" :loading="pendingAction === 'approvePlan'" :disabled="busy" @click="approvePlan">{{ t('approval.approvePlan') }}<ShortcutKey class="k">[1]</ShortcutKey></Button>
+        <Button class="kbtn" size="sm" variant="secondary" :disabled="busy" @click="revisePlan">{{ t('approval.revise') }}<ShortcutKey v-if="planReview.options.length === 0" class="k">[2]</ShortcutKey></Button>
+        <Button class="kbtn" size="sm" variant="danger-soft" :loading="pendingAction === 'rejectAndExit'" :disabled="busy" @click="rejectAndExitPlan">{{ t('approval.rejectAndExit') }}<ShortcutKey v-if="planReview.options.length === 0" class="k">[3]</ShortcutKey></Button>
       </div>
 
       <!-- default actions row -->
       <div v-else class="abtn">
-        <Button class="kbtn" size="sm" variant="primary" :loading="pendingAction === 'approve'" :disabled="busy" @click="approve">{{ t('approval.approve') }}<span class="k">[1]</span></Button>
-        <Button class="kbtn" size="sm" variant="secondary" :loading="pendingAction === 'approveSession'" :disabled="busy" @click="approveSession">{{ t('approval.approveSession') }}<span class="k">[2]</span></Button>
-        <Button class="kbtn" size="sm" variant="secondary" :loading="pendingAction === 'reject'" :disabled="busy" @click="reject">{{ t('approval.reject') }}<span class="k">[3]</span></Button>
-        <Button class="kbtn" size="sm" variant="secondary" :disabled="busy" @click="openFeedback">{{ t('approval.feedback') }}<span class="k">[4]</span></Button>
+        <Button class="kbtn" size="sm" variant="primary" :loading="pendingAction === 'approve'" :disabled="busy" @click="approve">{{ t('approval.approve') }}<ShortcutKey class="k">[1]</ShortcutKey></Button>
+        <Button class="kbtn" size="sm" variant="secondary" :loading="pendingAction === 'approveSession'" :disabled="busy" @click="approveSession">{{ t('approval.approveSession') }}<ShortcutKey class="k">[2]</ShortcutKey></Button>
+        <Button class="kbtn" size="sm" variant="secondary" :loading="pendingAction === 'reject'" :disabled="busy" @click="reject">{{ t('approval.reject') }}<ShortcutKey class="k">[3]</ShortcutKey></Button>
+        <Button class="kbtn" size="sm" variant="secondary" :disabled="busy" @click="openFeedback">{{ t('approval.feedback') }}<ShortcutKey class="k">[4]</ShortcutKey></Button>
       </div>
     </template>
   </Card>
@@ -554,7 +555,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   width: 100%;
 }
 .plan-actions { flex-wrap: wrap; }
-.k { margin-left: var(--space-2); font: var(--text-xs) var(--font-mono); opacity: .7; }
+.k { opacity: .75; }
 
 /* =========================================================================
    MOBILE (≤640px): the card spans the full chat column, inner previews scroll

From e3d4bd7f24f0a1131f38125b7614515df033014a Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 17:42:23 +0800
Subject: [PATCH 06/18] style(web): size workspace picker from content

---
 .../src/components/chat/ConversationPane.vue     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
index 613b5c7e8c..558a75f8c1 100644
--- a/apps/kimi-web/src/components/chat/ConversationPane.vue
+++ b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -139,9 +139,9 @@ const wsPickOpen = ref(false);
 const wsPickExpanded = ref(false);
 const contentWrapRef = ref<HTMLElement | null>(null);
 const wsPickMeasureRef = ref<HTMLElement | null>(null);
-const wsPickWidth = ref<string>('');
+const wsPickMenuWidth = ref<string>('');
 const wsPickStyle = computed<Record<string, string> | undefined>(() =>
-  wsPickWidth.value ? { '--ws-pick-width': wsPickWidth.value } : undefined,
+  wsPickMenuWidth.value ? { '--ws-pick-menu-width': wsPickMenuWidth.value } : undefined,
 );
 let wsPickMeasureFrame: number | null = null;
 
@@ -208,7 +208,7 @@ function updateWorkspacePickerWidth(): void {
     (max, workspace) => Math.max(max, measureText(workspace.shortPath, itemPathStyle)),
     0,
   );
-  wsPickWidth.value = measuredPathWidth
+  wsPickMenuWidth.value = measuredPathWidth
     ? `${Math.ceil(Math.min(measuredPathWidth, workspacePickerMaxWidth()))}px`
     : '';
 }
@@ -1509,8 +1509,8 @@ defineExpose({ loadComposerForEdit, focusComposer });
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  width: var(--ws-pick-width, max-content);
-  max-width: calc(100vw - var(--space-8));
+  width: max-content;
+  max-width: min(100%, calc(100vw - var(--space-8)));
   padding: 5px 10px;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -1521,7 +1521,7 @@ defineExpose({ loadComposerForEdit, focusComposer });
   cursor: pointer;
 }
 .ws-pick-btn:hover { border-color: var(--color-accent-bd); color: var(--color-text); }
-.ws-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ws-pick-chev { flex: none; color: var(--muted); transition: transform 0.15s; }
 .ws-pick-chev.open { transform: rotate(180deg); }
 .ws-pick-backdrop {
@@ -1535,8 +1535,8 @@ defineExpose({ loadComposerForEdit, focusComposer });
   transform: translateX(-50%);
   top: calc(100% + 6px);
   z-index: var(--z-dropdown);
-  width: var(--ws-pick-width, max-content);
-  min-width: var(--ws-pick-width, max-content);
+  width: var(--ws-pick-menu-width, max-content);
+  min-width: var(--ws-pick-menu-width, max-content);
   max-width: calc(100vw - var(--space-8));
   max-height: 50vh;
   overflow-y: auto;

From 0f38be423c1b57ad4568975af8f5380f8d3d3beb Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 17:44:04 +0800
Subject: [PATCH 07/18] feat(web): localize chat status labels

---
 .../src/components/chat/ChatHeader.vue        | 24 +++++++++++++++++--
 .../src/components/chat/GoalStrip.vue         | 16 ++++++++++---
 apps/kimi-web/src/i18n/locales/en/header.ts   |  5 ++++
 apps/kimi-web/src/i18n/locales/en/status.ts   |  6 +++++
 apps/kimi-web/src/i18n/locales/zh/composer.ts |  4 ++--
 apps/kimi-web/src/i18n/locales/zh/header.ts   |  5 ++++
 apps/kimi-web/src/i18n/locales/zh/status.ts   |  6 +++++
 7 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/ChatHeader.vue b/apps/kimi-web/src/components/chat/ChatHeader.vue
index 66b603babd..5de3154b9e 100644
--- a/apps/kimi-web/src/components/chat/ChatHeader.vue
+++ b/apps/kimi-web/src/components/chat/ChatHeader.vue
@@ -51,6 +51,25 @@ const behind = computed(() => props.behind ?? 0);
 const adds = computed(() => props.gitDiffStats?.totalAdditions ?? 0);
 const dels = computed(() => props.gitDiffStats?.totalDeletions ?? 0);
 const hasLineStats = computed(() => adds.value > 0 || dels.value > 0);
+const PR_STATE_LABEL_KEYS: Record<string, string> = {
+  open: 'header.prStatusOpen',
+  closed: 'header.prStatusClosed',
+  merged: 'header.prStatusMerged',
+  draft: 'header.prStatusDraft',
+};
+
+function normalizedPrState(state: string): string {
+  return state.trim().toLowerCase().replaceAll('_', '-');
+}
+
+function prStateClass(state: string): string {
+  const stateClass = normalizedPrState(state);
+  return PR_STATE_LABEL_KEYS[stateClass] ? `pr-${stateClass}` : 'pr-unknown';
+}
+
+function prStateLabel(state: string): string {
+  return t(PR_STATE_LABEL_KEYS[normalizedPrState(state)] ?? 'header.prStatusUnknown');
+}
 
 // ---------------------------------------------------------------------------
 // More-menu (kebab dropdown)
@@ -295,11 +314,11 @@ async function startArchive(): Promise<void> {
       v-if="pr"
       type="button"
       class="ch-pill ch-pr"
-      :class="`pr-${pr.state}`"
+      :class="prStateClass(pr.state)"
       @click="pr && emit('openPr', pr.url)"
     >
       <Icon name="git-pull-request" size="sm" />
-      <span>PR #{{ pr.number }} · {{ pr.state }}</span>
+      <span>PR #{{ pr.number }} · {{ prStateLabel(pr.state) }}</span>
     </button>
 
   </header>
@@ -420,6 +439,7 @@ async function startArchive(): Promise<void> {
 .ch-pr.pr-merged { color: var(--color-done); border-color: var(--color-done-bd); background: var(--color-done-soft); }
 .ch-pr.pr-closed { color: var(--color-danger); border-color: var(--color-danger-bd); background: var(--color-danger-soft); }
 .ch-pr.pr-draft { color: var(--color-text-muted); border-color: var(--color-line-strong); background: var(--color-surface-sunken); }
+.ch-pr.pr-unknown { color: var(--color-text-muted); border-color: var(--color-line-strong); background: var(--color-surface-sunken); }
 .ch-pr:hover { border-color: var(--color-line-strong); }
 
 /* Fixed more-menu, anchored to the kebab trigger. Surface / items come from
diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index c978656b80..fc598ee82b 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -27,6 +27,15 @@ const tokenPct = computed(() => {
   return Math.max(0, Math.min(100, Math.round((props.goal.tokensUsed / budget) * 100)));
 });
 
+function goalStatusLabel(status: AppGoal['status']): string {
+  switch (status) {
+    case 'active': return t('status.goalStatusActive');
+    case 'paused': return t('status.goalStatusPaused');
+    case 'blocked': return t('status.goalStatusBlocked');
+    case 'complete': return t('status.goalStatusComplete');
+  }
+}
+
 function formatMs(ms: number): string {
   const sec = Math.max(0, Math.round(ms / 1000));
   const min = Math.floor(sec / 60);
@@ -42,13 +51,13 @@ function formatMs(ms: number): string {
   <Card class="goal-strip" :class="{ expanded }">
     <template #head>
       <button class="goal-row" type="button" @click="expanded = !expanded">
-        <span class="goal-kicker">Goal</span>
+        <span class="goal-kicker">{{ t('status.goalLabel') }}</span>
         <span class="goal-objective" :class="{ 'expanded-hidden': expanded }">{{ goal.objective }}</span>
         <Badge
           :variant="goal.status === 'active' ? 'success' : goal.status === 'blocked' ? 'danger' : goal.status === 'paused' ? 'warning' : 'neutral'"
           size="sm"
           class="goal-status"
-        >{{ goal.status }}</Badge>
+        >{{ goalStatusLabel(goal.status) }}</Badge>
         <span class="goal-progress" aria-hidden="true">
           <span class="goal-progress-fill" :style="{ width: `${tokenPct}%` }"></span>
         </span>
@@ -121,7 +130,8 @@ function formatMs(ms: number): string {
 .goal-kicker {
   flex: none;
   color: var(--color-success);
-  font: var(--weight-bold) var(--text-xs) var(--font-mono);
+  font: var(--text-xs) var(--font-ui);
+  font-weight: var(--weight-semibold);
   text-transform: uppercase;
 }
 .goal-objective {
diff --git a/apps/kimi-web/src/i18n/locales/en/header.ts b/apps/kimi-web/src/i18n/locales/en/header.ts
index bf046bee45..4273de01de 100644
--- a/apps/kimi-web/src/i18n/locales/en/header.ts
+++ b/apps/kimi-web/src/i18n/locales/en/header.ts
@@ -10,6 +10,11 @@ export default {
   gitTooltip: 'Open Files > Changed',
   detached: 'detached',
   openPr: 'Open pull request',
+  prStatusOpen: 'open',
+  prStatusClosed: 'closed',
+  prStatusMerged: 'merged',
+  prStatusDraft: 'draft',
+  prStatusUnknown: 'unknown',
   options: 'Options',
   copySessionId: 'Copy Session ID',
   renameSession: 'Rename',
diff --git a/apps/kimi-web/src/i18n/locales/en/status.ts b/apps/kimi-web/src/i18n/locales/en/status.ts
index 2638570b33..8b7f022785 100644
--- a/apps/kimi-web/src/i18n/locales/en/status.ts
+++ b/apps/kimi-web/src/i18n/locales/en/status.ts
@@ -28,10 +28,16 @@ export default {
   goalPause: 'Pause',
   goalResume: 'Resume',
   goalCancel: 'Cancel',
+  goalStatusActive: 'Active',
+  goalStatusPaused: 'Paused',
+  goalStatusBlocked: 'Blocked',
+  goalStatusComplete: 'Complete',
   modeNotSupported: 'Not supported',
   // Thinking selector
   thinkingLabel: 'thinking',
   thinkingTooltip: 'Toggle thinking mode',
+  thinkingOn: 'On',
+  thinkingOff: 'Off',
   starredModels: 'Starred',
   moreModels: 'More models…',
   // Status panel
diff --git a/apps/kimi-web/src/i18n/locales/zh/composer.ts b/apps/kimi-web/src/i18n/locales/zh/composer.ts
index 6c1ec1926e..719f7adb7a 100644
--- a/apps/kimi-web/src/i18n/locales/zh/composer.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/composer.ts
@@ -22,7 +22,7 @@ export default {
   emptyConversationTitle: 'Kimi Code',
   emptyConversation: '还没有消息 —— 在下方输入开始对话',
   quickStartPlaceholder: '输入消息开始新对话…',
-  thinkingSuffix: ' · thinking',
-  thinkingSuffixEffort: ' · thinking: {level}',
+  thinkingSuffix: ' · 思考',
+  thinkingSuffixEffort: ' · 思考: {level}',
 
 } as const;
diff --git a/apps/kimi-web/src/i18n/locales/zh/header.ts b/apps/kimi-web/src/i18n/locales/zh/header.ts
index 543cece6c0..687845609e 100644
--- a/apps/kimi-web/src/i18n/locales/zh/header.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/header.ts
@@ -10,6 +10,11 @@ export default {
   gitTooltip: '打开「文件 > 改动」',
   detached: '游离',
   openPr: '打开 Pull Request',
+  prStatusOpen: '已打开',
+  prStatusClosed: '已关闭',
+  prStatusMerged: '已合并',
+  prStatusDraft: '草稿',
+  prStatusUnknown: '未知',
   options: '选项',
   copySessionId: '复制 Session ID',
   renameSession: '重命名',
diff --git a/apps/kimi-web/src/i18n/locales/zh/status.ts b/apps/kimi-web/src/i18n/locales/zh/status.ts
index 516b634987..0256b119b3 100644
--- a/apps/kimi-web/src/i18n/locales/zh/status.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/status.ts
@@ -28,10 +28,16 @@ export default {
   goalPause: '暂停',
   goalResume: '继续',
   goalCancel: '取消',
+  goalStatusActive: '进行中',
+  goalStatusPaused: '已暂停',
+  goalStatusBlocked: '已阻塞',
+  goalStatusComplete: '已完成',
   modeNotSupported: '暂不支持',
   // 思考强度选择
   thinkingLabel: '思考',
   thinkingTooltip: '切换思考模式',
+  thinkingOn: '开',
+  thinkingOff: '关',
   starredModels: '收藏',
   moreModels: '更多模型…',
   // 状态面板

From e82329093b0805f9c67172f9a9e4983cb4d01a20 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 17:45:20 +0800
Subject: [PATCH 08/18] style(web): refine composer toolbar controls

---
 .../kimi-web/src/components/chat/Composer.vue | 201 ++++++++++++++----
 1 file changed, 164 insertions(+), 37 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index 109346eb09..f9e5a2abb8 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -1,5 +1,6 @@
 <!-- apps/kimi-web/src/components/chat/Composer.vue -->
 <script setup lang="ts">
+import { measureNaturalWidth, prepareWithSegments } from '@chenglou/pretext';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SlashMenu from './SlashMenu.vue';
@@ -94,7 +95,7 @@ const emit = defineEmits<{
   selectModel: [modelId: string];
 }>();
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 // ---------------------------------------------------------------------------
 // Textarea + per-session draft persistence — see useComposerDraft.
@@ -643,6 +644,11 @@ function setThinkingSegment(draft: string): void {
   if (thinkingReadonly.value) return;
   emit('setThinking', commitLevel(currentModel.value, draft));
 }
+function thinkingSegmentLabel(segment: string): string {
+  if (segment === 'on') return t('status.thinkingOn');
+  if (segment === 'off') return t('status.thinkingOff');
+  return effortLabel(segment);
+}
 
 // Plan toggle
 const planOn = computed(() => props.planMode === true);
@@ -693,6 +699,87 @@ const PERM_MODES: { mode: PermissionMode; color: string; labelKey: string; descK
   { mode: 'yolo', color: 'var(--color-warning)', labelKey: 'status.permissionYolo', descKey: 'status.permissionYoloDesc' },
   { mode: 'auto', color: 'var(--color-danger)', labelKey: 'status.permissionAuto', descKey: 'status.permissionAutoDesc' },
 ];
+const MODE_DESC_KEYS = ['status.planDesc', 'status.swarmDesc', 'status.goalDesc'] as const;
+
+const menuMeasureRef = ref<HTMLElement | null>(null);
+const permissionDescriptionWidth = ref('');
+const modeDescriptionWidth = ref('');
+function menuDescStyle(width: string): Record<string, string> {
+  const style: Record<string, string> = {};
+  if (width) style['--composer-menu-desc-width'] = width;
+  return style;
+}
+const permissionMenuStyle = computed<Record<string, string>>(() => menuDescStyle(permissionDescriptionWidth.value));
+const modeMenuMeasureStyle = computed<Record<string, string>>(() => menuDescStyle(modeDescriptionWidth.value));
+const modesMenuInlineStyle = computed<Record<string, string>>(() => ({
+  ...modesMenuStyle.value,
+  ...modeMenuMeasureStyle.value,
+}));
+let menuMeasureFrame: number | null = null;
+
+function cssPx(value: string): number {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function canvasFont(style: CSSStyleDeclaration): string {
+  return `${style.fontStyle || 'normal'} ${style.fontWeight || '400'} ${style.fontSize} ${style.fontFamily}`;
+}
+
+function letterSpacingPx(style: CSSStyleDeclaration): number {
+  return style.letterSpacing === 'normal' ? 0 : cssPx(style.letterSpacing);
+}
+
+function measureTextWidth(text: string, style: CSSStyleDeclaration): number {
+  if (!text) return 0;
+  const prepared = prepareWithSegments(text, canvasFont(style), {
+    letterSpacing: letterSpacingPx(style),
+  });
+  return measureNaturalWidth(prepared);
+}
+
+function measureMenuDescriptions(): void {
+  const probe = menuMeasureRef.value?.querySelector<HTMLElement>('.pd-desc');
+  if (!probe) return;
+  const style = getComputedStyle(probe);
+  const permissionWidth = Math.max(
+    0,
+    ...PERM_MODES.map((opt) => measureTextWidth(t(opt.descKey), style)),
+  );
+  const modeWidth = Math.max(
+    0,
+    ...MODE_DESC_KEYS.map((key) => measureTextWidth(t(key), style)),
+  );
+  permissionDescriptionWidth.value = permissionWidth > 0 ? `${Math.ceil(permissionWidth)}px` : '';
+  modeDescriptionWidth.value = modeWidth > 0 ? `${Math.ceil(modeWidth)}px` : '';
+}
+
+function scheduleMenuDescriptionMeasure(): void {
+  if (typeof window === 'undefined') return;
+  if (menuMeasureFrame !== null) {
+    window.cancelAnimationFrame(menuMeasureFrame);
+  }
+  void nextTick(() => {
+    menuMeasureFrame = window.requestAnimationFrame(() => {
+      menuMeasureFrame = null;
+      measureMenuDescriptions();
+    });
+  });
+}
+
+watch(locale, scheduleMenuDescriptionMeasure, { immediate: true });
+
+onMounted(() => {
+  scheduleMenuDescriptionMeasure();
+  void document.fonts?.ready.then(scheduleMenuDescriptionMeasure);
+});
+
+onUnmounted(() => {
+  if (menuMeasureFrame !== null) {
+    window.cancelAnimationFrame(menuMeasureFrame);
+    menuMeasureFrame = null;
+  }
+});
 
 function choosePermission(mode: PermissionMode): void {
   emit('setPermission', mode);
@@ -850,6 +937,10 @@ function selectModel(modelId: string): void {
 
       <!-- Bottom toolbar — split into individual controls -->
       <div ref="toolbarRef" class="toolbar">
+        <div ref="menuMeasureRef" class="menu-measure" aria-hidden="true">
+          <span class="pd-desc" />
+        </div>
+
         <!-- Left: attach + permission + plan -->
         <div class="toolbar-left">
           <IconButton
@@ -874,7 +965,13 @@ function selectModel(modelId: string): void {
           >{{ permLabel }}</span>
 
           <!-- Permission dropdown — anchored to the toolbar left side -->
-          <div v-if="permDropdownOpen && status" class="perm-dropdown" role="menu" @click.stop>
+          <div
+            v-if="permDropdownOpen && status"
+            class="perm-dropdown"
+            :style="permissionMenuStyle"
+            role="menu"
+            @click.stop
+          >
             <button
               v-for="opt in PERM_MODES"
               :key="opt.mode"
@@ -905,7 +1002,7 @@ function selectModel(modelId: string): void {
               <span v-if="goalArmed" class="mode-tag">{{ t('status.goalLabel') }}</span>
             </button>
 
-            <div v-if="modesOpen" ref="modesMenuRef" class="modes-menu" :style="modesMenuStyle" role="menu">
+            <div v-if="modesOpen" ref="modesMenuRef" class="modes-menu" :style="modesMenuInlineStyle" role="menu">
               <!-- Plan — functional client toggle -->
               <button type="button" class="mode-row" :class="{ on: planOn }" role="menuitem" @click="emit('togglePlan')">
                 <span class="mode-row-icon"><Icon name="file-edit" size="sm" /></span>
@@ -1073,7 +1170,7 @@ function selectModel(modelId: string): void {
                 :class="{ 'is-active': seg === activeThinkingSegment }"
                 :disabled="thinkingReadonly"
                 @click="setThinkingSegment(seg)"
-              >{{ effortLabel(seg) }}</button>
+              >{{ thinkingSegmentLabel(seg) }}</button>
             </div>
           </div>
 
@@ -1396,6 +1493,8 @@ function selectModel(modelId: string): void {
 
 .send svg {
   flex: none;
+  width: var(--p-ic-lg);
+  height: var(--p-ic-lg);
 }
 
 /* Stop button — sibling of Send, shown only while running. Red at rest so the
@@ -1428,6 +1527,8 @@ function selectModel(modelId: string): void {
 }
 .stop svg {
   flex: none;
+  width: var(--p-ic-lg);
+  height: var(--p-ic-lg);
 }
 
 /* Bottom toolbar */
@@ -1439,6 +1540,15 @@ function selectModel(modelId: string): void {
   position: relative;
 }
 
+.menu-measure {
+  position: absolute;
+  width: max-content;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .toolbar-left,
 .toolbar-right {
   display: flex;
@@ -1497,7 +1607,9 @@ function selectModel(modelId: string): void {
 .ctx-num {
   font-size: var(--ui-font-size);
   color: var(--muted);
-  font-family: var(--mono);
+  font-family: var(--font-ui);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
   line-height: 16px;
 }
 
@@ -1509,8 +1621,10 @@ function selectModel(modelId: string): void {
   padding: 2px 7px;
   border-radius: 6px;
   font-size: var(--ui-font-size);
-  line-height: 16px;
+  line-height: var(--leading-normal);
   color: var(--dim);
+  font-family: var(--font-ui);
+  font-weight: var(--weight-medium);
   cursor: pointer;
   user-select: none;
   transition: background 0.1s;
@@ -1567,11 +1681,11 @@ function selectModel(modelId: string): void {
 
 .md-section {
   padding: 4px 7px 2px;
-  font-size: var(--ui-font-size);
+  font-size: var(--text-xs);
   color: var(--muted);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  font-weight: 500;
+  letter-spacing: 0;
+  font-weight: var(--weight-semibold);
 }
 
 .md-row {
@@ -1714,7 +1828,8 @@ function selectModel(modelId: string): void {
   left: 10px;
   z-index: var(--z-dropdown);
   min-width: 220px;
-  max-width: 280px;
+  width: max-content;
+  max-width: calc(100vw - var(--space-8));
   background: var(--color-surface-raised);
   border: 1px solid var(--color-line);
   border-radius: var(--radius-lg);
@@ -1726,9 +1841,11 @@ function selectModel(modelId: string): void {
 }
 
 .pd-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 7px;
+  display: grid;
+  grid-template-columns: 14px var(--composer-menu-desc-width, max-content);
+  column-gap: 7px;
+  row-gap: 2px;
+  align-items: start;
   width: 100%;
   background: none;
   border: none;
@@ -1741,9 +1858,10 @@ function selectModel(modelId: string): void {
 .pd-row.is-current { background: var(--color-accent-soft); }
 
 .pd-check {
+  grid-column: 1;
+  grid-row: 1;
   width: 14px;
   min-height: 1lh;
-  flex: none;
   color: var(--color-accent);
   font-size: var(--ui-font-size);
   font-weight: var(--weight-medium);
@@ -1754,14 +1872,12 @@ function selectModel(modelId: string): void {
 }
 
 .pd-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
+  display: contents;
 }
 
 .pd-name {
+  grid-column: 2;
+  grid-row: 1;
   font-family: var(--font-ui);
   font-size: var(--ui-font-size);
   font-weight: var(--weight-medium);
@@ -1769,6 +1885,9 @@ function selectModel(modelId: string): void {
 }
 
 .pd-desc {
+  grid-column: 2;
+  grid-row: 2;
+  width: var(--composer-menu-desc-width, auto);
   font-family: var(--font-ui);
   font-size: var(--text-xs);
   font-weight: var(--weight-medium);
@@ -1803,7 +1922,7 @@ function selectModel(modelId: string): void {
 .mode-label { flex: none; }
 .mode-tag {
   flex: none;
-  font-family: var(--mono);
+  font-family: var(--font-ui);
   font-size: calc(var(--ui-font-size) - 3px);
   color: var(--color-accent-hover);
   background: var(--bg);
@@ -1818,7 +1937,8 @@ function selectModel(modelId: string): void {
   position: fixed;
   z-index: var(--z-dropdown);
   min-width: 220px;
-  max-width: 280px;
+  width: max-content;
+  max-width: calc(100vw - var(--space-8));
   background: var(--color-surface-raised);
   border: 1px solid var(--color-line);
   border-radius: var(--radius-lg);
@@ -1829,10 +1949,11 @@ function selectModel(modelId: string): void {
   gap: 1px;
 }
 .mode-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 7px;
+  display: grid;
+  grid-template-columns: 14px var(--composer-menu-desc-width, max-content);
+  column-gap: 7px;
+  row-gap: 2px;
+  align-items: start;
   width: 100%;
   padding: 6px 7px;
   border: none;
@@ -1845,16 +1966,13 @@ function selectModel(modelId: string): void {
 .mode-row:hover:not(:disabled) { background: var(--color-surface-sunken); }
 .mode-row:disabled { cursor: not-allowed; opacity: 0.45; }
 .mode-row-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
+  display: contents;
 }
 .mode-row-icon {
+  grid-column: 1;
+  grid-row: 1;
   width: 14px;
   min-height: 1lh;
-  flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1863,12 +1981,17 @@ function selectModel(modelId: string): void {
   line-height: var(--leading-normal);
 }
 .mode-row-name {
+  grid-column: 2;
+  grid-row: 1;
   font-size: var(--ui-font-size);
   font-weight: var(--weight-medium);
   color: var(--color-text);
   line-height: var(--leading-normal);
 }
 .mode-row-desc {
+  grid-column: 2;
+  grid-row: 2;
+  width: var(--composer-menu-desc-width, auto);
   font-size: var(--text-xs);
   font-weight: var(--weight-medium);
   color: var(--muted);
@@ -1887,7 +2010,9 @@ function selectModel(modelId: string): void {
 .mode-row-meta { font-family: var(--mono); font-size: calc(var(--ui-font-size) - 3px); color: var(--muted); }
 .mode-row:disabled .mode-row-meta { color: var(--faint); }
 .mode-switch {
-  flex: none;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
   width: 34px;
   height: 19px;
   border-radius: 999px;
@@ -1911,6 +2036,7 @@ function selectModel(modelId: string): void {
 .mode-switch.on .mode-knob { transform: translateX(15px); }
 
 .mode-row-goal {
+  display: flex;
   flex-wrap: wrap;
   cursor: default;
   padding: 0;
@@ -1921,10 +2047,11 @@ function selectModel(modelId: string): void {
   background: var(--color-accent-soft);
 }
 .mode-row-main {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 7px;
+  display: grid;
+  grid-template-columns: 14px var(--composer-menu-desc-width, max-content);
+  column-gap: 7px;
+  row-gap: 2px;
+  align-items: start;
   width: 100%;
   padding: 6px 7px;
   border: none;
@@ -2052,7 +2179,7 @@ function selectModel(modelId: string): void {
   .stop::after {
     content: "■";
     /* Fixed icon glyph size — not part of the UI font scale. */
-    font-size: 14px;
+    font-size: 17px;
     line-height: 1;
   }
 

From 6478e01726b1a843d4487dd141df4d3acb1c9cb1 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:54:41 +0800
Subject: [PATCH 09/18] style(web): use complete Inter variable font

---
 apps/kimi-web/src/main.ts                    |  3 ++-
 apps/kimi-web/src/style.css                  | 23 ++++++++--------
 apps/kimi-web/src/views/DesignSystemView.vue | 28 +++++++++++---------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/kimi-web/src/main.ts b/apps/kimi-web/src/main.ts
index d546f7ae62..55475a2348 100644
--- a/apps/kimi-web/src/main.ts
+++ b/apps/kimi-web/src/main.ts
@@ -2,7 +2,8 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import i18n from './i18n';
 import { installClientErrorCapture } from './debug/trace';
-import '@fontsource-variable/inter/wght.css';
+import '@fontsource-variable/inter/opsz.css';
+import '@fontsource-variable/inter/opsz-italic.css';
 import '@fontsource-variable/jetbrains-mono/wght.css';
 import './style.css';
 
diff --git a/apps/kimi-web/src/style.css b/apps/kimi-web/src/style.css
index dda829b723..1f9ae2e503 100644
--- a/apps/kimi-web/src/style.css
+++ b/apps/kimi-web/src/style.css
@@ -206,9 +206,8 @@ summary {
   --content-font-size: calc(var(--base-ui-font-size) + 1px);
   --sidebar-ui-font-size: calc(var(--base-ui-font-size) + 1px);
   --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  /* Body/UI font follows the design-system canonical token (system UI font
-     first; Inter intentionally NOT in the body chain — it stays reserved for
-     --font-display headings). Mirrors --font-ui so the two can never drift. */
+  /* Body/UI font follows the design-system canonical token. Mirrors --font-ui
+     so the legacy alias can never drift from the current text face. */
   --sans: var(--font-ui);
   color-scheme: light dark;
 }
@@ -454,14 +453,15 @@ html[data-color-scheme="dark"][data-accent="mono"] {
   --duration-slow: 260ms;
 
   /* -- type families ------------------------------------------------------- */
-  /* UI/body use the platform's native UI font first (design-system §02);
-     Inter is intentionally NOT in this chain — it is reserved for
-     --font-display (optional headings / brand wordmarks) below. */
-  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
-    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
-    Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-display: "Inter Variable", "Inter", var(--font-ui);
+  /* UI/body use self-hosted Inter first. CJK and platform system UI families
+     stay late in the fallback chain so Latin glyphs resolve to Inter while
+     Chinese text can still fall through to native CJK fonts. */
+  --font-ui: "Inter Variable", "Inter", "Helvetica Neue", Arial,
+    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
+    "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-display: var(--font-ui);
   --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
     "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
 
@@ -643,6 +643,7 @@ body {
   font-size: var(--ui-font-size);
   font-weight: 400;
   line-height: 1.6;
+  font-optical-sizing: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: auto;
diff --git a/apps/kimi-web/src/views/DesignSystemView.vue b/apps/kimi-web/src/views/DesignSystemView.vue
index 7053cfce05..358d777e2a 100644
--- a/apps/kimi-web/src/views/DesignSystemView.vue
+++ b/apps/kimi-web/src/views/DesignSystemView.vue
@@ -227,18 +227,19 @@ onUnmounted(() => {
             <p>All disabled controls use <code>opacity:.5</code> + <code>cursor:not-allowed</code> uniformly; do not separately grey out or recolor.</p>
 
             <h3 class="sub">Font families</h3>
-            <p>Kimi Web uses two font families: <b>--font-ui</b> (UI and body, system fonts first) and <b>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p>
+            <p>Kimi Web uses two font families: <b>--font-ui</b> (UI and body, Inter first) and <b>--font-mono</b> (code and monospace). Components always reference the variables; do not hard-code font names.</p>
 
-            <h4 class="mini">--font-ui · UI &amp; body (system fonts first)</h4>
-            <p>Body and UI use each platform's native UI font — close to the system feel, comfortable for long text and CJK. Fallback chain:</p>
-            <div class="code"><div class="code-bar"><span class="d"></span><span class="d"></span><span class="d"></span><span class="fn">--font-ui</span></div><pre>--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI",
+            <h4 class="mini">--font-ui · UI &amp; body (Inter first)</h4>
+            <p>Body and UI use self-hosted Inter as the primary face. CJK and platform system UI fonts sit late in the fallback chain so Latin glyphs resolve to Inter while Chinese text can fall through to native CJK fonts:</p>
+            <div class="code"><div class="code-bar"><span class="d"></span><span class="d"></span><span class="d"></span><span class="fn">--font-ui</span></div><pre>--font-ui: "Inter Variable", "Inter", "Helvetica Neue", Arial,
       "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
-      "Helvetica Neue", Arial, sans-serif,
+      -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, Ubuntu, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";</pre></div>
             <ul class="clean">
-              <li>System UI fonts first: SF Pro on macOS / iOS, Segoe UI on Windows.</li>
-              <li>CJK next: PingFang SC (macOS) / Microsoft YaHei (Windows) / Noto Sans SC (Linux).</li>
-              <li>Helvetica Neue / Arial / sans-serif as generic fallbacks; emoji fonts at the end.</li>
+              <li>Inter first: self-hosted Latin UI and body text, loaded through the optical-size normal and italic variable faces.</li>
+              <li>Western fallbacks next: Helvetica Neue / Arial for environments where Inter cannot load.</li>
+              <li>CJK and system UI fallbacks late: PingFang SC / Microsoft YaHei / Noto Sans SC, then platform UI fonts and emoji fonts.</li>
             </ul>
 
             <h4 class="mini">--font-mono · Code &amp; monospace</h4>
@@ -251,8 +252,8 @@ onUnmounted(() => {
               <thead><tr><th>Font</th><th>Source</th><th>Bundled</th><th>Usage</th></tr></thead>
               <tbody>
                 <tr><td class="tk">JetBrains Mono</td><td class="val">@fontsource-variable/jetbrains-mono</td><td class="val">✓ self-hosted</td><td>monospace / code (--font-mono)</td></tr>
-                <tr><td class="tk">Inter</td><td class="val">@fontsource-variable/inter</td><td class="val">✓ self-hosted</td><td>optional: page titles / brand wordmark (--font-display)</td></tr>
-                <tr><td class="tk">System UI / CJK fonts</td><td class="val">operating system</td><td class="val">—</td><td>body / UI (--font-ui), not bundled</td></tr>
+                <tr><td class="tk">Inter</td><td class="val">@fontsource-variable/inter/opsz.css + opsz-italic.css</td><td class="val">✓ self-hosted</td><td>UI / body / display (--font-ui, --font-display), wght 100-900, opsz 14-32, normal + italic</td></tr>
+                <tr><td class="tk">System UI / CJK fonts</td><td class="val">operating system</td><td class="val">—</td><td>late fallback for UI / body, not bundled</td></tr>
               </tbody>
             </table>
             <div class="callout good"><span class="ico">✓</span><div>
@@ -262,8 +263,9 @@ onUnmounted(() => {
             <h4 class="mini">Usage rules</h4>
             <ul class="clean check">
               <li>Components always use <code>var(--font-ui)</code> / <code>var(--font-mono)</code>; do not hard-code font names like <code>'Inter'</code> / <code>'JetBrains Mono'</code>.</li>
-              <li>Body / UI use <code>--font-ui</code> (system fonts first); code / monospace use <code>--font-mono</code> (JetBrains Mono).</li>
-              <li>Inter is used only for headings / brand scenarios that need a unified look (optional <code>--font-display</code>); it is no longer the body default.</li>
+              <li>Body / UI use <code>--font-ui</code> (Inter first); code / monospace use <code>--font-mono</code> (JetBrains Mono).</li>
+              <li>Inter is loaded from the complete optical-size variable faces, including normal and italic styles; <code>font-optical-sizing: auto</code> is enabled globally.</li>
+              <li>CJK and platform system UI fonts stay late in the <code>--font-ui</code> fallback chain, after Inter and Western fallbacks.</li>
             </ul>
 
             <h3 class="sub">Type scale &amp; weight</h3>
@@ -281,7 +283,7 @@ onUnmounted(() => {
             <table class="dt">
               <thead><tr><th>Token</th><th>Value</th><th>Usage</th></tr></thead>
               <tbody>
-                <tr><td class="tk">--font-ui</td><td class="val">-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC"…</td><td>UI &amp; body (system fonts first)</td></tr>
+                <tr><td class="tk">--font-ui</td><td class="val">"Inter Variable", "Inter", "Helvetica Neue", Arial…</td><td>UI &amp; body (Inter first)</td></tr>
                 <tr><td class="tk">--font-mono</td><td class="val">JetBrains Mono…</td><td>code, tool names, line numbers, diffs</td></tr>
                 <tr><td class="tk">--base-ui-font-size</td><td class="val">14px user preference</td><td>root setting that drives UI, reading body, and sidebar font sizes</td></tr>
                 <tr><td class="tk">--content-font-size</td><td class="val">calc(base + 1px)</td><td>chat Markdown, message bubbles, composer</td></tr>

From 7c77f52c8adc8a5ab2735a2a17320ccb435f76ae Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:56:23 +0800
Subject: [PATCH 10/18] style(web): tune sidebar workspace typography

---
 apps/kimi-web/src/components/SessionRow.vue              | 4 +++-
 apps/kimi-web/src/components/WorkspaceGroup.vue          | 7 ++++---
 .../src/components/mobile/MobileSwitcherSheet.vue        | 9 +++++++--
 apps/kimi-web/src/composables/useKimiWebClient.ts        | 2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/kimi-web/src/components/SessionRow.vue b/apps/kimi-web/src/components/SessionRow.vue
index 31a691fa27..2291a26811 100644
--- a/apps/kimi-web/src/components/SessionRow.vue
+++ b/apps/kimi-web/src/components/SessionRow.vue
@@ -342,7 +342,8 @@ defineExpose({ closeMenu });
 .t {
   color: inherit;
   font-size: var(--text-base);
-  font-weight: var(--weight-regular);
+  font-weight: 450;
+  line-height: var(--leading-tight);
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -354,6 +355,7 @@ defineExpose({ closeMenu });
   color: var(--color-text-faint);
   font-size: var(--text-xs);
   font-family: var(--font-ui);
+  font-weight: 475;
   font-variant-numeric: tabular-nums;
   text-align: right;
 }
diff --git a/apps/kimi-web/src/components/WorkspaceGroup.vue b/apps/kimi-web/src/components/WorkspaceGroup.vue
index 87a3a1ffb0..9e97319297 100644
--- a/apps/kimi-web/src/components/WorkspaceGroup.vue
+++ b/apps/kimi-web/src/components/WorkspaceGroup.vue
@@ -265,7 +265,7 @@ function onHeaderDragStart(event: DragEvent): void {
 
 .gh-name {
   font-size: var(--ui-font-size-lg);
-  font-weight: var(--weight-medium);
+  font-weight: 550;
   color: var(--color-text);
   flex: 1;
   min-width: 0;
@@ -276,6 +276,7 @@ function onHeaderDragStart(event: DragEvent): void {
 }
 .gh-path {
   color: var(--color-text-faint);
+  font-weight: 425;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -317,10 +318,10 @@ function onHeaderDragStart(event: DragEvent): void {
 .gh-more.open { color: var(--color-text); background: var(--color-line); }
 
 .group-empty {
-  padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--sb-pad-x) + var(--sb-gutter) + var(--sb-gap));
+  padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--sb-pad-x) - var(--space-2) + var(--sb-gutter) + var(--sb-gap));
   font-size: var(--text-xs);
   color: var(--color-text-faint);
-  font-family: var(--font-mono);
+  font-family: var(--font-ui);
 }
 /* Show-more / show-less — a session-row-shaped compact list control (§07). The
    empty lead slot mirrors a session row's status gutter, so the label text lands
diff --git a/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue b/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
index da5d73cbd7..4a87b0cc0b 100644
--- a/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
@@ -394,7 +394,7 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
 }
 .mgh-name {
   font-size: var(--ui-font-size-lg);
-  font-weight: 500;
+  font-weight: 550;
   color: var(--color-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -402,6 +402,7 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
 }
 .mgh-path {
   font-size: var(--text-base);
+  font-weight: 425;
   color: var(--color-text-faint);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -430,12 +431,14 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
 .srow .m { flex: 1; min-width: 0; }
 .srow .m .t {
   font-size: var(--text-base);
+  font-weight: 450;
+  line-height: var(--leading-tight);
   color: var(--color-text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.srow.cur .m .t { font-weight: 500; color: var(--color-accent-hover); }
+.srow.cur .m .t { color: var(--color-accent-hover); }
 
 /* Running indicator — pulse dot in the indent gutter left of the title,
    mirroring the desktop SessionRow (.t.run::before). */
@@ -471,6 +474,8 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
 }
 .srow .m .s {
   font-size: var(--text-base);
+  font-weight: 475;
+  font-variant-numeric: tabular-nums;
   color: var(--color-text-faint);
   margin-top: 1px;
   overflow: hidden;
diff --git a/apps/kimi-web/src/composables/useKimiWebClient.ts b/apps/kimi-web/src/composables/useKimiWebClient.ts
index 2f7e822fcd..00978fec05 100644
--- a/apps/kimi-web/src/composables/useKimiWebClient.ts
+++ b/apps/kimi-web/src/composables/useKimiWebClient.ts
@@ -1375,7 +1375,7 @@ function formatTime(iso: string, _status: string): string {
     const diffD = diffMs / 86400000;
     if (diffD < 7) return `${Math.round(diffD)}d`;
     if (diffD < 30) return `${Math.round(diffD / 7)}w`;
-    if (diffD < 365) return `${Math.round(diffD / 30)}m`;
+    if (diffD < 365) return `${Math.round(diffD / 30)}mo`;
     return `${Math.round(diffD / 365)}y`;
   } catch {
     return iso;

From ee2eefc91bb8372bf392e22ad348f439f0150f80 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:57:45 +0800
Subject: [PATCH 11/18] style(web): polish composer and workspace picker

---
 .../kimi-web/src/components/chat/Composer.vue | 29 ++++++++++---------
 .../src/components/chat/ConversationPane.vue  |  7 +++--
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index f9e5a2abb8..48d0d087a6 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -1199,9 +1199,11 @@ function selectModel(modelId: string): void {
 
 /* Main composer card */
 .composer-card {
+  --composer-send-size: 32px;
+  --composer-send-inset: var(--space-2);
   position: relative;
   border: 1px solid var(--line);
-  border-radius: 16px;
+  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset));
   background: var(--bg);
   box-shadow: var(--shadow-md);
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -1465,8 +1467,8 @@ function selectModel(modelId: string): void {
    (handled upstream). Interrupt is a separate Stop button so the two are never
    confused. */
 .send {
-  width: 32px;
-  height: 32px;
+  width: var(--composer-send-size);
+  height: var(--composer-send-size);
   border-radius: 50%;
   background: var(--color-accent);
   color: var(--color-text-on-accent); /* white on accent — readable in light and dark */
@@ -1501,8 +1503,8 @@ function selectModel(modelId: string): void {
    destructive action is easy to spot; fills solid danger on hover. Kept softer
    than the accent Send so Send stays the primary action. */
 .stop {
-  width: 32px;
-  height: 32px;
+  width: var(--composer-send-size);
+  height: var(--composer-send-size);
   border-radius: 50%;
   background: var(--color-danger-soft);
   color: var(--color-danger);
@@ -1536,7 +1538,7 @@ function selectModel(modelId: string): void {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 6px 8px 8px;
+  padding: 6px var(--composer-send-inset) var(--composer-send-inset);
   position: relative;
 }
 
@@ -1610,6 +1612,7 @@ function selectModel(modelId: string): void {
   font-family: var(--font-ui);
   font-variant-numeric: tabular-nums;
   font-feature-settings: "tnum";
+  letter-spacing: 0;
   line-height: 16px;
 }
 
@@ -2134,7 +2137,7 @@ function selectModel(modelId: string): void {
       var(--dock-inline-left, max(12px, env(safe-area-inset-left)));
   }
   .composer-card {
-    border-radius: var(--radius-xl);
+    --composer-send-size: 36px;
     max-width: 100%;
   }
   .input-row {
@@ -2143,9 +2146,9 @@ function selectModel(modelId: string): void {
   }
   /* Send → 36px round (hide the SVG arrow, show only the ::after glyph) */
   .send {
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
+    width: var(--composer-send-size);
+    height: var(--composer-send-size);
+    min-width: var(--composer-send-size);
     padding: 0;
     border-radius: 50%;
     font-size: 0;
@@ -2164,9 +2167,9 @@ function selectModel(modelId: string): void {
   }
   /* Stop → 36px round "■" glyph to match the mobile Send sizing. */
   .stop {
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
+    width: var(--composer-send-size);
+    height: var(--composer-send-size);
+    min-width: var(--composer-send-size);
     padding: 0;
     border-radius: 50%;
     font-size: 0;
diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
index 558a75f8c1..20974093e3 100644
--- a/apps/kimi-web/src/components/chat/ConversationPane.vue
+++ b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -1441,11 +1441,12 @@ defineExpose({ loadComposerForEdit, focusComposer });
   text-align: center;
   padding: 0 16px 16px;
   color: var(--color-text);
-  font-family: var(--sans);
+  font-family: var(--font-ui);
 }
 .empty-hint-title {
   font-size: calc(var(--ui-font-size) + 16px);
-  font-weight: 500;
+  font-optical-sizing: auto;
+  font-weight: 600;
 }
 .empty-hint-text {
   display: inline-block;
@@ -1568,7 +1569,7 @@ defineExpose({ loadComposerForEdit, focusComposer });
   color: var(--color-text);
 }
 .ws-pick-item.on .ws-pick-item-name { color: var(--color-accent-hover); }
-.ws-pick-item-path { font-size: var(--text-xs); color: var(--muted); }
+.ws-pick-item-path { font-size: var(--text-xs); font-weight: 475; color: var(--muted); }
 .ws-pick-item.ws-pick-more {
   flex-direction: row;
   align-items: center;

From 263dcd3627582b43385585507f573fc28a8b5858 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 18:59:19 +0800
Subject: [PATCH 12/18] style(web): refine markdown and thinking typography

---
 .../kimi-web/src/components/chat/Markdown.vue | 21 ++++++++++++++-----
 .../src/components/chat/ThinkingBlock.vue     |  2 ++
 .../src/components/chat/ThinkingPanel.vue     |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/Markdown.vue b/apps/kimi-web/src/components/chat/Markdown.vue
index b8bd302efd..7a2487d38c 100644
--- a/apps/kimi-web/src/components/chat/Markdown.vue
+++ b/apps/kimi-web/src/components/chat/Markdown.vue
@@ -474,12 +474,12 @@ function copyDiff(code: string, idx: number) {
 
 /* Base prose — assistant message text. */
 .md {
-  font: 500 15px/1.6 var(--font-ui);
+  font: 400 15px/1.6 var(--font-ui);
   color: var(--color-text);
   word-break: break-word;
 }
 .md :deep(.markdown-renderer) {
-  font: 500 15px/1.6 var(--font-ui);
+  font: 400 15px/1.6 var(--font-ui);
   color: var(--color-text);
 }
 .md :deep(.markstream-vue),
@@ -523,8 +523,9 @@ function copyDiff(code: string, idx: number) {
   font-size: var(--content-font-size);
 }
 
-/* Emphasis — bold steps up from the body (medium/500) to semibold (700). */
+/* Emphasis — keep the weight strong, but soften the ink slightly. */
 .md :deep(strong) {
+  color: color-mix(in srgb, var(--color-text) 86%, var(--color-text-muted));
   font-weight: var(--weight-semibold);
 }
 
@@ -534,7 +535,8 @@ function copyDiff(code: string, idx: number) {
 .md :deep(h3),
 .md :deep(h4) {
   color: var(--color-text);
-  font-weight: var(--weight-medium);
+  font-optical-sizing: auto;
+  font-weight: 600;
   margin: 0.85em 0 0.35em;
   line-height: var(--leading-tight);
 }
@@ -573,9 +575,15 @@ function copyDiff(code: string, idx: number) {
   font: .9em var(--font-mono);
   background: var(--color-surface-sunken);
   color: var(--color-fg);
-  padding: 0 5px;
+  padding: 0 4px;
   border-radius: var(--radius-sm);
 }
+.md :deep(strong code),
+.md :deep(strong .inline-code),
+.md :deep(b code),
+.md :deep(b .inline-code) {
+  font-weight: var(--weight-semibold);
+}
 
 /* ---------------------------------------------------------------------------
    Code blocks — sunken surface, 1px line border, radius md, soft shadow, plus
@@ -602,6 +610,9 @@ function copyDiff(code: string, idx: number) {
   color: var(--color-text-muted);
   font: var(--text-xs) var(--font-mono);
 }
+.md :deep(.code-block-header .code-header-main) {
+  font-family: var(--font-ui);
+}
 /* Copy button — mirrors the §03 IconButton: muted glyph, sunken hover, soft
    radius, and the shared focus ring. markstream renders its own button, so we
    restyle it in place instead of swapping in the IconButton primitive. */
diff --git a/apps/kimi-web/src/components/chat/ThinkingBlock.vue b/apps/kimi-web/src/components/chat/ThinkingBlock.vue
index afa450897f..9fbb37db4e 100644
--- a/apps/kimi-web/src/components/chat/ThinkingBlock.vue
+++ b/apps/kimi-web/src/components/chat/ThinkingBlock.vue
@@ -119,6 +119,7 @@ watch(
 .prev {
   color: var(--color-text-faint);
   font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
+  font-weight: 425;
   white-space: pre-wrap;
   word-break: break-word;
   display: block;
@@ -126,6 +127,7 @@ watch(
 
 .tc {
   font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
+  font-weight: 425;
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;
diff --git a/apps/kimi-web/src/components/chat/ThinkingPanel.vue b/apps/kimi-web/src/components/chat/ThinkingPanel.vue
index 1309a40288..d917b82eb7 100644
--- a/apps/kimi-web/src/components/chat/ThinkingPanel.vue
+++ b/apps/kimi-web/src/components/chat/ThinkingPanel.vue
@@ -65,6 +65,7 @@ watch(
   margin: 0;
   padding: 12px 14px;
   font: var(--text-base)/var(--leading-relaxed) var(--font-ui);
+  font-weight: 425;
   color: var(--color-text-muted);
   white-space: pre-wrap;
   word-break: break-word;

From e2f886ed2907a151b89a4f0e2617c3efc8146061 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:04:13 +0800
Subject: [PATCH 13/18] chore: add web UI polish changeset

---
 .changeset/web-ui-polish.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/web-ui-polish.md

diff --git a/.changeset/web-ui-polish.md b/.changeset/web-ui-polish.md
new file mode 100644
index 0000000000..5a829b6c17
--- /dev/null
+++ b/.changeset/web-ui-polish.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Polish the chat UI with Inter typography, localized labels, and tighter sidebar, composer, and menu styling.

From 66b38d6699cae139dbbcf2de3ff94c4bfc6287ec Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:30:45 +0800
Subject: [PATCH 14/18] fix(web): pin Inter package for Nix build

---
 apps/kimi-web/package.json | 2 +-
 flake.nix                  | 2 +-
 pnpm-lock.yaml             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/kimi-web/package.json b/apps/kimi-web/package.json
index 680456e0b3..f7d2f2370d 100644
--- a/apps/kimi-web/package.json
+++ b/apps/kimi-web/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@chenglou/pretext": "0.0.8",
-    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/inter": "5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
diff --git a/flake.nix b/flake.nix
index bdb4158d0d..c914a4d56c 100644
--- a/flake.nix
+++ b/flake.nix
@@ -152,7 +152,7 @@
               inherit (finalAttrs) pname version src pnpmWorkspaces;
               inherit pnpm;
               fetcherVersion = 3;
-              hash = "sha256-RPjCWL7NqDSKgpHGL16zPlUOfjWN2rkaDY/4GFAD8VA=";
+              hash = "sha256-hUn5Srn3HnEEzU5DLxgjIzFjI0ukM3iSP4QagftEXdE=";
             };
 
             nativeBuildInputs = [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 22ee113ed0..dab48ecc99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,7 +170,7 @@ importers:
         specifier: 0.0.8
         version: 0.0.8
       '@fontsource-variable/inter':
-        specifier: ^5.2.8
+        specifier: 5.2.8
         version: 5.2.8
       '@fontsource-variable/jetbrains-mono':
         specifier: ^5.2.8

From 93c5798f7694e8595daeaaf655ed832835fa2211 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 19:48:28 +0800
Subject: [PATCH 15/18] style(web): polish goal tool calls

---
 apps/kimi-web/src/i18n/locales/en/tools.ts | 15 +++++
 apps/kimi-web/src/i18n/locales/zh/tools.ts | 15 +++++
 apps/kimi-web/src/lib/toolMeta.ts          | 68 ++++++++++++++++++++++
 3 files changed, 98 insertions(+)

diff --git a/apps/kimi-web/src/i18n/locales/en/tools.ts b/apps/kimi-web/src/i18n/locales/en/tools.ts
index aaddeb3348..13cc18211f 100644
--- a/apps/kimi-web/src/i18n/locales/en/tools.ts
+++ b/apps/kimi-web/src/i18n/locales/en/tools.ts
@@ -13,6 +13,10 @@ export default {
     task: 'Task',
     swarm: 'Swarm',
     ask_user: 'Question',
+    goal_create: 'Start Goal',
+    goal_get: 'Read Goal',
+    goal_budget: 'Set Goal Budget',
+    goal_update: 'Update Goal',
   },
   swarm: {
     progress: '{done} / {total}',
@@ -32,6 +36,17 @@ export default {
     created: 'created',
     todos: '{count} items',
   },
+  goal: {
+    objectiveWithCriterion: '{objective} · {criterion}',
+    status: 'Status: {status}',
+    budget: '{value} {unit}',
+    turns: '{value} turns',
+    tokens: '{value} tokens',
+    milliseconds: '{value} ms',
+    seconds: '{value} sec',
+    minutes: '{value} min',
+    hours: '{value} hr',
+  },
   group: {
     title: '{count} tool call | {count} tool calls',
     running: 'running',
diff --git a/apps/kimi-web/src/i18n/locales/zh/tools.ts b/apps/kimi-web/src/i18n/locales/zh/tools.ts
index 0cee010588..f9560e3da9 100644
--- a/apps/kimi-web/src/i18n/locales/zh/tools.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/tools.ts
@@ -13,6 +13,10 @@ export default {
     task: '任务',
     swarm: 'Swarm',
     ask_user: '提问',
+    goal_create: '启动目标',
+    goal_get: '读取目标',
+    goal_budget: '设置目标预算',
+    goal_update: '更新目标',
   },
   swarm: {
     progress: '{done} / {total}',
@@ -32,6 +36,17 @@ export default {
     created: '已创建',
     todos: '{count} 项',
   },
+  goal: {
+    objectiveWithCriterion: '{objective} · {criterion}',
+    status: '状态：{status}',
+    budget: '{value} {unit}',
+    turns: '{value} 轮',
+    tokens: '{value} token',
+    milliseconds: '{value} 毫秒',
+    seconds: '{value} 秒',
+    minutes: '{value} 分钟',
+    hours: '{value} 小时',
+  },
   group: {
     title: '{count} 个工具调用',
     running: '运行中',
diff --git a/apps/kimi-web/src/lib/toolMeta.ts b/apps/kimi-web/src/lib/toolMeta.ts
index 6ecfd4c00b..a2b0111322 100644
--- a/apps/kimi-web/src/lib/toolMeta.ts
+++ b/apps/kimi-web/src/lib/toolMeta.ts
@@ -25,6 +25,10 @@ const TOOL_LABEL_KEYS: Record<string, string> = {
   task: 'tools.label.task',
   agentswarm: 'tools.label.swarm',
   askuserquestion: 'tools.label.ask_user',
+  creategoal: 'tools.label.goal_create',
+  getgoal: 'tools.label.goal_get',
+  setgoalbudget: 'tools.label.goal_budget',
+  updategoal: 'tools.label.goal_update',
 };
 
 // ---------------------------------------------------------------------------
@@ -60,6 +64,10 @@ const NAME_ALIASES: Record<string, string> = {
   subagent: 'task',
   websearch: 'search',
   web_search: 'search',
+  create_goal: 'creategoal',
+  get_goal: 'getgoal',
+  set_goal_budget: 'setgoalbudget',
+  update_goal: 'updategoal',
 };
 
 export function normalizeToolName(name: string): string {
@@ -93,6 +101,10 @@ const TOOL_GLYPH: Record<string, IconName> = {
   task: 'sparkles',
   agentswarm: 'git-pull-request',
   askuserquestion: 'help-circle',
+  creategoal: 'target',
+  getgoal: 'target',
+  setgoalbudget: 'target',
+  updategoal: 'target',
   // Cron scheduling tools share a calendar motif: schedule / list / cancel.
   croncreate: 'calendar-schedule',
   cronlist: 'calendar-todo',
@@ -182,6 +194,41 @@ function filePath(d: Record<string, unknown>): string | undefined {
   return str(d.path) ?? str(d.file_path) ?? str(d.filePath) ?? str(d.filename);
 }
 
+const GOAL_STATUS_KEYS: Record<string, string> = {
+  active: 'status.goalStatusActive',
+  blocked: 'status.goalStatusBlocked',
+  complete: 'status.goalStatusComplete',
+};
+
+function goalStatusLabel(value: unknown): string | undefined {
+  const status = str(value);
+  if (!status) return undefined;
+  const key = GOAL_STATUS_KEYS[status];
+  return key ? t(key) : status;
+}
+
+function goalBudgetSummary(d: Record<string, unknown>): string | undefined {
+  const value = num(d.value);
+  const unit = str(d.unit);
+  if (value === undefined || !unit) return undefined;
+  switch (unit) {
+    case 'turns':
+      return t('tools.goal.turns', { value });
+    case 'tokens':
+      return t('tools.goal.tokens', { value });
+    case 'milliseconds':
+      return t('tools.goal.milliseconds', { value });
+    case 'seconds':
+      return t('tools.goal.seconds', { value });
+    case 'minutes':
+      return t('tools.goal.minutes', { value });
+    case 'hours':
+      return t('tools.goal.hours', { value });
+    default:
+      return t('tools.goal.budget', { value, unit });
+  }
+}
+
 const BASH_MAX = 64;
 
 /**
@@ -255,6 +302,27 @@ export function toolSummary(name: string, arg: string, full = false): string {
         if (items) return c(t('tools.chip.todos', { count: items.length }));
         return fallback();
       }
+      case 'creategoal': {
+        if (full) return fallback();
+        const objective = str(d.objective);
+        const criterion = str(d.completionCriterion);
+        if (objective && criterion) return c(t('tools.goal.objectiveWithCriterion', { objective, criterion }));
+        return objective ? c(objective) : fallback();
+      }
+      case 'getgoal': {
+        if (full) return fallback();
+        return '';
+      }
+      case 'setgoalbudget': {
+        if (full) return fallback();
+        const summary = goalBudgetSummary(d);
+        return summary ? c(summary) : fallback();
+      }
+      case 'updategoal': {
+        if (full) return fallback();
+        const status = goalStatusLabel(d.status);
+        return status ? c(t('tools.goal.status', { status })) : fallback();
+      }
       default:
         return fallback();
     }

From b35cf790ff4680581ddff5f0303ff5011c9fb910 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 21:40:37 +0800
Subject: [PATCH 16/18] style: polish goal mode display

---
 .../kimi-web/src/components/chat/ChatDock.vue |   1 +
 .../kimi-web/src/components/chat/Composer.vue |  73 +++++++-----
 .../src/components/chat/ConversationPane.vue  |   1 +
 .../src/components/chat/GoalStrip.vue         | 106 ++++++++++++------
 apps/kimi-web/src/lib/icons.ts                |   5 +
 5 files changed, 127 insertions(+), 59 deletions(-)

diff --git a/apps/kimi-web/src/components/chat/ChatDock.vue b/apps/kimi-web/src/components/chat/ChatDock.vue
index 4078c1d144..8da9067d2b 100644
--- a/apps/kimi-web/src/components/chat/ChatDock.vue
+++ b/apps/kimi-web/src/components/chat/ChatDock.vue
@@ -251,6 +251,7 @@ defineExpose({ loadForEdit, loadAttachmentsForEdit, focus });
       :plan-mode="planMode"
       :swarm-mode="swarmMode"
       :goal-mode="goalMode"
+      :goal="goal"
       :activation-badges="activationBadges"
       :models="models"
       :starred-ids="starredIds"
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index 48d0d087a6..09e39378a7 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -8,7 +8,7 @@ import MentionMenu from './MentionMenu.vue';
 import { buildSlashItems, parseSlash } from '../../lib/slashCommands';
 import type { FileItem } from './MentionMenu.vue';
 import type { ActivationBadges, ConversationStatus, PermissionMode, QueuedPromptView } from '../../types';
-import type { AppModel, AppSkill, ThinkingLevel } from '../../api/types';
+import type { AppGoal, AppModel, AppSkill, ThinkingLevel } from '../../api/types';
 import {
   coerceThinkingForModel,
   commitLevel,
@@ -23,6 +23,7 @@ import { useMentionMenu } from '../../composables/useMentionMenu';
 import { useComposerDraft } from '../../composables/useComposerDraft';
 import { useAttachmentUpload } from '../../composables/useAttachmentUpload';
 import Spinner from '../ui/Spinner.vue';
+import Button from '../ui/Button.vue';
 import IconButton from '../ui/IconButton.vue';
 import Icon from '../ui/Icon.vue';
 import ContextRing from '../ui/ContextRing.vue';
@@ -46,6 +47,7 @@ const props = withDefaults(defineProps<{
   planMode?: boolean;
   swarmMode?: boolean;
   goalMode?: boolean;
+  goal?: AppGoal | null;
   activationBadges?: ActivationBadges;
   /** Available models for the quick-switch dropdown. */
   models?: AppModel[];
@@ -653,8 +655,11 @@ function thinkingSegmentLabel(segment: string): string {
 // Plan toggle
 const planOn = computed(() => props.planMode === true);
 const swarmOn = computed(() => props.swarmMode === true);
-const goalActive = computed(() => props.activationBadges?.goal !== null);
+const goalStatus = computed(() => props.goal?.status ?? props.activationBadges?.goal?.status ?? null);
+const goalActive = computed(() => goalStatus.value !== null && goalStatus.value !== 'complete');
 const goalArmed = computed(() => goalActive.value || props.goalMode === true);
+const goalCanPause = computed(() => goalStatus.value === 'active');
+const goalCanResume = computed(() => goalStatus.value === 'paused' || goalStatus.value === 'blocked');
 
 // Modes selector (plan / goal / swarm) — the popover that replaces the bare
 // "plan" pill. Plan/Swarm are real client toggles; goal reflects agent-driven
@@ -1027,7 +1032,7 @@ function selectModel(modelId: string): void {
                   type="button"
                   class="mode-row-main"
                   role="menuitem"
-                  @click="goalActive ? emit('controlGoal', 'cancel') : emit('toggleGoal')"
+                  @click="goalActive ? emit('focusGoal') : emit('toggleGoal')"
                 >
                   <span class="mode-row-icon"><Icon name="target" size="sm" /></span>
                   <span class="mode-row-info">
@@ -1037,16 +1042,35 @@ function selectModel(modelId: string): void {
                   <span v-if="!goalActive" class="mode-switch" :class="{ on: props.goalMode }"><span class="mode-knob" /></span>
                 </button>
                 <div v-if="goalActive" class="mode-row-actions">
-                  <button
-                    type="button"
+                  <Button
+                    v-if="goalCanPause"
+                    size="sm"
+                    variant="secondary"
                     class="mode-row-action"
                     @click="emit('controlGoal', 'pause')"
-                  >{{ t('status.goalPause') }}</button>
-                  <button
-                    type="button"
+                  >
+                    <Icon name="pause" size="sm" />
+                    <span>{{ t('status.goalPause') }}</span>
+                  </Button>
+                  <Button
+                    v-if="goalCanResume"
+                    size="sm"
+                    variant="primary"
                     class="mode-row-action"
                     @click="emit('controlGoal', 'resume')"
-                  >{{ t('status.goalResume') }}</button>
+                  >
+                    <Icon name="play" size="sm" />
+                    <span>{{ t('status.goalResume') }}</span>
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="danger-soft"
+                    class="mode-row-action"
+                    @click="emit('controlGoal', 'cancel')"
+                  >
+                    <Icon name="close" size="sm" />
+                    <span>{{ t('status.goalCancel') }}</span>
+                  </Button>
                 </div>
               </div>
             </div>
@@ -2039,8 +2063,12 @@ function selectModel(modelId: string): void {
 .mode-switch.on .mode-knob { transform: translateX(15px); }
 
 .mode-row-goal {
+  --mode-row-icon-col: 14px;
+  --mode-row-col-gap: 7px;
+  --mode-row-pad-x: 7px;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
   cursor: default;
   padding: 0;
   gap: 0;
@@ -2051,12 +2079,12 @@ function selectModel(modelId: string): void {
 }
 .mode-row-main {
   display: grid;
-  grid-template-columns: 14px var(--composer-menu-desc-width, max-content);
-  column-gap: 7px;
+  grid-template-columns: var(--mode-row-icon-col) var(--composer-menu-desc-width, max-content);
+  column-gap: var(--mode-row-col-gap);
   row-gap: 2px;
   align-items: start;
   width: 100%;
-  padding: 6px 7px;
+  padding: 6px var(--mode-row-pad-x);
   border: none;
   background: none;
   border-radius: 6px;
@@ -2068,21 +2096,16 @@ function selectModel(modelId: string): void {
 .mode-row-goal.on .mode-row-main .mode-row-name { color: var(--color-accent-hover); }
 .mode-row-actions {
   display: flex;
-  gap: 6px;
-  flex: 1 1 100%;
-  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-start;
+  padding: 0 var(--mode-row-pad-x) var(--mode-row-pad-x)
+    calc(var(--mode-row-pad-x) + var(--mode-row-icon-col) + var(--mode-row-col-gap));
 }
 .mode-row-action {
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--line);
-  background: var(--panel);
-  color: var(--color-text);
-  font-size: calc(var(--ui-font-size) - 3px);
-  cursor: pointer;
+  flex: none;
 }
-.mode-row-action:hover:not(:disabled) { background: var(--panel2); }
-.mode-row-action:disabled { opacity: 0.5; cursor: default; }
+.mode-row-action :deep(.ui-button__content) { gap: var(--space-1); }
 .mode-row-input {
   flex: 1;
   min-width: 0;
diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
index 20974093e3..2a382308c9 100644
--- a/apps/kimi-web/src/components/chat/ConversationPane.vue
+++ b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -1220,6 +1220,7 @@ defineExpose({ loadComposerForEdit, focusComposer });
               :plan-mode="planMode"
               :swarm-mode="swarmMode"
               :goal-mode="goalMode"
+              :goal="goal"
               :activation-badges="activationBadges"
               :models="models"
               :starred-ids="starredIds"
diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index fc598ee82b..e2d09aa88e 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -71,36 +71,47 @@ function formatMs(ms: number): string {
         <span>Done when</span>
         <p>{{ goal.completionCriterion }}</p>
       </div>
-      <div class="goal-stats">
-        <Badge variant="neutral" size="sm">{{ goal.turnsUsed }} turns</Badge>
-        <Badge variant="neutral" size="sm">{{ goal.tokensUsed.toLocaleString() }} tokens</Badge>
-        <Badge variant="neutral" size="sm">{{ formatMs(goal.wallClockMs) }}</Badge>
-        <Badge v-if="goal.budget.tokenBudget !== null" variant="neutral" size="sm">{{ tokenPct }}% token budget</Badge>
-      </div>
     </template>
 
     <template v-if="expanded" #foot>
-      <div class="goal-actions">
-        <Button
-          v-if="goal.status !== 'paused'"
-          size="sm"
-          variant="secondary"
-          class="goal-action"
-          @click.stop="emit('controlGoal', 'pause')"
-        >{{ t('status.goalPause') }}</Button>
-        <Button
-          v-if="goal.status === 'paused'"
-          size="sm"
-          variant="primary"
-          class="goal-action"
-          @click.stop="emit('controlGoal', 'resume')"
-        >{{ t('status.goalResume') }}</Button>
-        <Button
-          size="sm"
-          variant="danger-soft"
-          class="goal-action"
-          @click.stop="emit('controlGoal', 'cancel')"
-        >{{ t('status.goalCancel') }}</Button>
+      <div class="goal-footer">
+        <div class="goal-meta">
+          <span>{{ goal.turnsUsed }} turns</span>
+          <span>{{ goal.tokensUsed.toLocaleString() }} tokens</span>
+          <span>{{ formatMs(goal.wallClockMs) }}</span>
+          <span v-if="goal.budget.tokenBudget !== null">{{ tokenPct }}% token budget</span>
+        </div>
+        <div class="goal-actions">
+          <Button
+            v-if="goal.status === 'active'"
+            size="sm"
+            variant="secondary"
+            class="goal-action"
+            @click.stop="emit('controlGoal', 'pause')"
+          >
+            <Icon name="pause" size="md" />
+            <span>{{ t('status.goalPause') }}</span>
+          </Button>
+          <Button
+            v-if="goal.status === 'paused' || goal.status === 'blocked'"
+            size="sm"
+            variant="primary"
+            class="goal-action"
+            @click.stop="emit('controlGoal', 'resume')"
+          >
+            <Icon name="play" size="md" />
+            <span>{{ t('status.goalResume') }}</span>
+          </Button>
+          <Button
+            size="sm"
+            variant="danger-soft"
+            class="goal-action"
+            @click.stop="emit('controlGoal', 'cancel')"
+          >
+            <Icon name="close" size="md" />
+            <span>{{ t('status.goalCancel') }}</span>
+          </Button>
+        </div>
       </div>
     </template>
   </Card>
@@ -108,8 +119,16 @@ function formatMs(ms: number): string {
 
 <style scoped>
 .goal-strip {
+  --composer-send-size: 32px;
+  --composer-send-inset: var(--space-2);
   margin: var(--space-2) var(--space-4) 0;
 }
+.goal-strip.ui-card {
+  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset));
+}
+.goal-strip :deep(.ui-card__foot) {
+  padding: var(--composer-send-inset);
+}
 /* When collapsed the body/foot slots are not rendered; collapse the (always-
    rendered) Card body and drop the head border so the strip is a single row. */
 .goal-strip:not(.expanded) :deep(.ui-card__body) { display: none; }
@@ -125,14 +144,14 @@ function formatMs(ms: number): string {
   background: transparent;
   color: var(--color-text);
   font: var(--text-base)/var(--leading-normal) var(--font-ui);
+  text-align: left;
   cursor: pointer;
 }
 .goal-kicker {
   flex: none;
   color: var(--color-success);
-  font: var(--text-xs) var(--font-ui);
+  font: var(--text-base)/var(--leading-normal) var(--font-ui);
   font-weight: var(--weight-semibold);
-  text-transform: uppercase;
 }
 .goal-objective {
   min-width: 0;
@@ -142,6 +161,7 @@ function formatMs(ms: number): string {
   white-space: nowrap;
   color: var(--color-text);
   font-size: var(--text-base);
+  text-align: left;
 }
 .goal-objective.expanded-hidden {
   visibility: hidden;
@@ -193,25 +213,43 @@ function formatMs(ms: number): string {
   font: var(--text-xs)/var(--leading-normal) var(--font-ui);
   text-transform: none;
 }
-.goal-stats {
+.goal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  min-width: 0;
+}
+.goal-meta {
+  min-width: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
-  margin-top: var(--space-3);
   color: var(--color-text-muted);
-  font: var(--text-xs) var(--font-mono);
+  font: 12px/var(--leading-normal) var(--font-ui);
+  font-weight: 450;
+  font-variant-numeric: tabular-nums;
 }
 .goal-actions {
   display: flex;
   gap: var(--space-2);
-  width: 100%;
+  justify-content: flex-end;
+  flex: none;
 }
 .goal-action {
-  flex: 1;
+  flex: none;
   min-width: 0;
+  height: var(--composer-send-size);
+  border-radius: calc(var(--composer-send-size) / 2);
+  padding-inline: var(--space-4);
+}
+.goal-action :deep(.ui-button__content) {
+  gap: var(--space-1);
 }
 @media (max-width: 640px) {
   .goal-strip {
+    --composer-send-size: 36px;
     margin: var(--space-2) var(--space-3) 0;
   }
   .goal-progress {
diff --git a/apps/kimi-web/src/lib/icons.ts b/apps/kimi-web/src/lib/icons.ts
index 11aaf0234c..a6e1ab5d2e 100644
--- a/apps/kimi-web/src/lib/icons.ts
+++ b/apps/kimi-web/src/lib/icons.ts
@@ -62,6 +62,7 @@ import RiLoginBoxLine from '~icons/ri/login-box-line';
 import RiMailLine from '~icons/ri/mail-line';
 import RiMessageLine from '~icons/ri/message-line';
 import RiMoreLine from '~icons/ri/more-line';
+import RiPauseFill from '~icons/ri/pause-fill';
 import RiPencilLine from '~icons/ri/pencil-line';
 import RiPlayFill from '~icons/ri/play-fill';
 import RiQuestionLine from '~icons/ri/question-line';
@@ -125,6 +126,7 @@ import RawLoginBoxLine from '~icons/ri/login-box-line?raw';
 import RawMailLine from '~icons/ri/mail-line?raw';
 import RawMessageLine from '~icons/ri/message-line?raw';
 import RawMoreLine from '~icons/ri/more-line?raw';
+import RawPauseFill from '~icons/ri/pause-fill?raw';
 import RawPencilLine from '~icons/ri/pencil-line?raw';
 import RawPlayFill from '~icons/ri/play-fill?raw';
 import RawQuestionLine from '~icons/ri/question-line?raw';
@@ -203,6 +205,7 @@ export type IconName =
   | 'clock'
   | 'sparkles'
   | 'target'
+  | 'pause'
   | 'play'
   | 'stop'
   | 'star'
@@ -284,6 +287,7 @@ export const ICONS: Record<IconName, IconEntry> = {
   clock: entry(RiTimeLine, RawTimeLine),
   sparkles: entry(RiSparklingLine, RawSparklingLine),
   target: entry(RiTargetLine, RawTargetLine),
+  pause: entry(RiPauseFill, RawPauseFill),
   play: entry(RiPlayFill, RawPlayFill),
   stop: entry(RiStopFill, RawStopFill),
   star: entry(RiStarFill, RawStarFill),
@@ -389,6 +393,7 @@ export const ICON_GROUPS: ReadonlyArray<readonly [string, readonly IconName[]]>
       'alert-triangle',
       'clock',
       'sparkles',
+      'pause',
       'play',
       'stop',
       'star',

From f44aad62c98e6acfe8f41e852fb248db2d3bd9e5 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Wed, 8 Jul 2026 21:45:26 +0800
Subject: [PATCH 17/18] fix: layer latest message pill below menus

---
 apps/kimi-web/src/components/chat/ConversationPane.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/kimi-web/src/components/chat/ConversationPane.vue b/apps/kimi-web/src/components/chat/ConversationPane.vue
index 2a382308c9..88fdc5dceb 100644
--- a/apps/kimi-web/src/components/chat/ConversationPane.vue
+++ b/apps/kimi-web/src/components/chat/ConversationPane.vue
@@ -1633,7 +1633,9 @@ defineExpose({ loadComposerForEdit, focusComposer });
   font-size: var(--ui-font-size-sm);
   cursor: pointer;
   box-shadow: var(--shadow-sm);
-  z-index: var(--z-sticky);
+  /* Positioned after the message flow, so base z-index is enough to float above
+     content while staying below composer dropdowns. */
+  z-index: var(--z-base);
 }
 .newmsg-pill:hover { background: var(--panel2); }
 .pill-chevron {

From 7af89fd4f3e52cf558c8f0b5c492b7d281ca6237 Mon Sep 17 00:00:00 2001
From: chengluyu <2239547+chengluyu@users.noreply.github.com>
Date: Thu, 9 Jul 2026 13:38:48 +0800
Subject: [PATCH 18/18] style: align goal strip content

---
 apps/kimi-web/src/components/chat/GoalStrip.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/kimi-web/src/components/chat/GoalStrip.vue b/apps/kimi-web/src/components/chat/GoalStrip.vue
index e2d09aa88e..11dab6b78c 100644
--- a/apps/kimi-web/src/components/chat/GoalStrip.vue
+++ b/apps/kimi-web/src/components/chat/GoalStrip.vue
@@ -129,6 +129,11 @@ function formatMs(ms: number): string {
 .goal-strip :deep(.ui-card__foot) {
   padding: var(--composer-send-inset);
 }
+.goal-strip :deep(.ui-card__head),
+.goal-strip :deep(.ui-card__body),
+.goal-strip :deep(.ui-card__foot) {
+  padding-left: calc((var(--composer-send-inset) + var(--composer-send-size)) / 2);
+}
 /* When collapsed the body/foot slots are not rendered; collapse the (always-
    rendered) Card body and drop the head border so the strip is a single row. */
 .goal-strip:not(.expanded) :deep(.ui-card__body) { display: none; }