diff --git a/.changeset/session-emoji-icon.md b/.changeset/session-emoji-icon.md
new file mode 100644
index 000000000..3cc402e7e
--- /dev/null
+++ b/.changeset/session-emoji-icon.md
@@ -0,0 +1,5 @@
+---
+"kimi-code-app": patch
+---
+
+支持为会话设置 Emoji 图标（选择器可搜索、显示最近使用），在会话选项菜单选择「设置 Emoji…」或点击标题前的 Emoji 即可使用。
diff --git a/apps/desktop/src/renderer/components/SessionEmojiPicker.vue b/apps/desktop/src/renderer/components/SessionEmojiPicker.vue
new file mode 100644
index 000000000..7eeb222e8
--- /dev/null
+++ b/apps/desktop/src/renderer/components/SessionEmojiPicker.vue
@@ -0,0 +1,241 @@
+<!-- apps/web/src/components/SessionEmojiPicker.vue -->
+<!-- Session emoji picker popover (SessionRow's "Set Emoji…" entry / title emoji
+     click): bare search row → scrollable sections (Recently used from
+     localStorage, cap 8 → the grouped dataset) → MenuItem footer. -->
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Icon, Menu, MenuItem, useImeComposition } from '@moonshot-ai/web-ui';
+import {
+  EMOJI_ENTRIES,
+  EMOJI_GROUPS,
+  pushRecentEmoji,
+  searchEmojis,
+  type EmojiGroup,
+} from '@moonshot-ai/web-core/lib';
+
+const { t } = useI18n();
+
+// IME guard: Enter that only confirms a composition candidate must not pick.
+const { handleCompositionStart, handleCompositionEnd, isComposingKeyEvent } = useImeComposition();
+
+const props = withDefaults(
+  defineProps<{
+    current?: string | null;
+    /** False when the title is emoji-only: removing would leave an empty title. */
+    removable?: boolean;
+  }>(),
+  { current: null, removable: true },
+);
+const emit = defineEmits<{ pick: [emoji: string | null] }>();
+
+// Random's pool: a small curated set of safe bets (all round-trip through
+// splitSessionEmoji's conservative detection).
+const RANDOM_POOL = [
+  '⏳', '⚠️', '🐛', '✨', '🔥', '🚀', '🎯', '🧪',
+  '📝', '🔍', '🛠️', '💡', '📦', '🎨', '🔒', '📈',
+  '🧹', '🚧', '✅', '❓', '🌙', '☕', '🐳', '🗂️',
+  '📊', '🤖', '🧩', '⚙️', '🌱', '📌', '💥', '🕐',
+];
+
+const GROUP_LABEL_KEY: Record<EmojiGroup, string> = {
+  faces: 'sidebar.emojiGroupFaces',
+  nature: 'sidebar.emojiGroupNature',
+  food: 'sidebar.emojiGroupFood',
+  activity: 'sidebar.emojiGroupActivity',
+  objects: 'sidebar.emojiGroupObjects',
+  symbols: 'sidebar.emojiGroupSymbols',
+};
+const grouped = EMOJI_GROUPS.map((id) => ({
+  id,
+  labelKey: GROUP_LABEL_KEY[id],
+  emojis: EMOJI_ENTRIES.filter((e) => e.group === id).map((e) => e.emoji),
+}));
+
+const STORAGE_KEY = 'kimi-web.recent-emojis';
+const recents = ref<string[]>(readRecents());
+function readRecents(): string[] {
+  try {
+    const raw: unknown = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '[]');
+    return Array.isArray(raw) ? raw.filter((e): e is string => typeof e === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function onPick(emoji: string): void {
+  recents.value = pushRecentEmoji(recents.value, emoji);
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(recents.value));
+  } catch {
+    // Quota / private mode: recents just don't persist.
+  }
+  emit('pick', emoji);
+}
+
+const query = ref('');
+const searching = computed(() => query.value.trim().length > 0);
+const results = computed(() => searchEmojis(query.value));
+
+const inputRef = ref<HTMLInputElement | null>(null);
+onMounted(() => inputRef.value?.focus());
+
+// Enter picks the first search result.
+function onEnter(e: KeyboardEvent): void {
+  if (isComposingKeyEvent(e)) return;
+  const first = results.value[0];
+  if (searching.value && first) onPick(first);
+}
+
+function pickRandom(): void {
+  let next: string | undefined = props.current ?? undefined;
+  while (next === undefined || next === props.current) {
+    next = RANDOM_POOL[Math.floor(Math.random() * RANDOM_POOL.length)];
+  }
+  onPick(next);
+}
+
+// Mirror Menu/IconButton's exposed-el pattern so the consumer can outside-click
+// against the panel (positioning is left to the consumer, same as Menu); the
+// IME guard is shared for the consumer's Escape handling (Safari reports
+// isComposing=false on the candidate-cancelling Escape).
+const menuRef = ref<InstanceType<typeof Menu> | null>(null);
+defineExpose({ el: computed(() => menuRef.value?.el), isComposingKeyEvent });
+</script>
+
+<template>
+  <Menu ref="menuRef" class="emoji-picker" role="dialog" :aria-label="t('sidebar.sessionEmojiTitle')" @keydown.stop>
+    <div class="ep-search">
+      <Icon name="search" size="sm" />
+      <input
+        ref="inputRef"
+        v-model="query"
+        class="ep-input"
+        type="text"
+        :placeholder="t('sidebar.searchEmoji')"
+        autocomplete="off"
+        spellcheck="false"
+        @keydown.enter="onEnter"
+        @compositionstart="handleCompositionStart"
+        @compositionend="handleCompositionEnd"
+      />
+    </div>
+
+    <div class="ep-scroll">
+      <template v-if="searching">
+        <div v-if="results.length" class="ep-grid">
+          <button
+            v-for="e in results"
+            :key="e"
+            class="ep-e"
+            :class="{ sel: e === current }"
+            type="button"
+            @click="onPick(e)"
+          >{{ e }}</button>
+        </div>
+        <div v-else class="ep-empty">{{ t('sidebar.noEmojiResults') }}</div>
+      </template>
+
+      <template v-else>
+        <template v-if="recents.length">
+          <div class="ep-label">{{ t('sidebar.recentEmojis') }}</div>
+          <div class="ep-grid">
+            <button
+              v-for="e in recents"
+              :key="e"
+              class="ep-e"
+              :class="{ sel: e === current }"
+              type="button"
+              @click="onPick(e)"
+            >{{ e }}</button>
+          </div>
+        </template>
+        <template v-for="g in grouped" :key="g.id">
+          <div class="ep-label">{{ t(g.labelKey) }}</div>
+          <div class="ep-grid">
+            <button
+              v-for="e in g.emojis"
+              :key="e"
+              class="ep-e"
+              :class="{ sel: e === current }"
+              type="button"
+              @click="onPick(e)"
+            >{{ e }}</button>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <MenuItem separator />
+    <MenuItem role="button" :disabled="!(current && removable)" @click="emit('pick', null)">
+      <Icon name="close" size="sm" />
+      {{ t('sidebar.removeEmoji') }}
+    </MenuItem>
+    <MenuItem role="button" @click="pickRandom">
+      <Icon name="sparkles" size="sm" />
+      {{ t('sidebar.randomEmoji') }}
+    </MenuItem>
+  </Menu>
+</template>
+
+<style scoped>
+/* Cell size drives every picker metric (matches the IconButton-sm footprint):
+   8-column grid + derived input height, scroll height and panel width. */
+.emoji-picker { --ep-cell: 26px; }
+/* Bare list-style search row (the sidebar Search vocabulary): icon + input,
+   no border; the row shows a sunken wash on hover / focus-within. */
+.ep-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: var(--space-1);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-faint);
+}
+.ep-search:hover,
+.ep-search:focus-within { background: var(--color-surface-sunken); }
+.ep-input {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--ep-cell) + 2px);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.ep-input::placeholder { color: var(--color-text-faint); }
+.ep-scroll { max-height: calc(var(--ep-cell) * 10 + var(--space-1)); overflow-y: auto; padding: 0 var(--space-1); }
+/* Section labels — the .side-section-label recipe (xs / 600 / uppercase / faint). */
+.ep-label {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-section-label);
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  user-select: none;
+}
+.ep-grid { display: grid; grid-template-columns: repeat(8, var(--ep-cell)); gap: var(--space-1); padding-bottom: var(--space-1); }
+.ep-e {
+  height: var(--ep-cell);
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: var(--text-lg);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+.ep-e:hover { background: var(--color-hover); }
+.ep-e:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
+.ep-e.sel { background: var(--color-accent-soft); }
+.ep-empty {
+  padding: var(--space-3) var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+  text-align: center;
+  user-select: none;
+}
+</style>
diff --git a/apps/desktop/src/renderer/components/SessionRow.vue b/apps/desktop/src/renderer/components/SessionRow.vue
index 7d61d9f6f..f1de4bcfb 100644
--- a/apps/desktop/src/renderer/components/SessionRow.vue
+++ b/apps/desktop/src/renderer/components/SessionRow.vue
@@ -1,12 +1,15 @@
 <!-- apps/web/src/components/SessionRow.vue -->
 <!-- A single session row: status dot + title + time + attention pill + kebab. -->
-<!-- Inline rename (dblclick) and delete-confirm live here. -->
+<!-- Inline rename (dblclick), the emoji icon affordance (hover wash + picker, -->
+<!-- see SessionEmojiPicker) and delete-confirm live here. -->
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { Session } from '../types';
 import { copyTextToClipboard } from '../lib/clipboard';
 import { Badge, Icon, IconButton, Menu, MenuItem, Spinner, Tooltip, useImeComposition } from '@moonshot-ai/web-ui';
+import { applySessionEmoji, splitSessionEmoji } from '@moonshot-ai/web-core/lib';
+import SessionEmojiPicker from './SessionEmojiPicker.vue';
 
 const { t } = useI18n();
 
@@ -109,6 +112,7 @@ async function toggleMenu(e: Event): Promise<void> {
 // caller then anchors it — the ⋯ button for toggleMenu, the cursor for
 // right-click.
 async function openMenu(): Promise<void> {
+  closePicker();
   menuOpen.value = true;
   // Defer so the current click doesn't immediately close the menu.
   setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
@@ -124,9 +128,137 @@ function closeMenu(): void {
 
 onUnmounted(() => {
   document.removeEventListener('mousedown', onDocClick);
+  document.removeEventListener('mousedown', onPickerDocClick);
+  window.removeEventListener('keydown', onPickerKeydown, true);
   window.removeEventListener('resize', closeMenu);
+  window.removeEventListener('resize', closePicker);
 });
 
+// Emoji picker — picking rewrites the title's leading emoji cluster (web-core
+// splitSessionEmoji) through the ordinary rename path.
+const emojiSplit = computed(() => splitSessionEmoji(props.session.title));
+/** Title text after the emoji button — the stored separator + text, byte-for-byte. */
+const displayText = computed(() => {
+  const e = emojiSplit.value.emoji;
+  return e ? props.session.title.slice(e.length) : props.session.title;
+});
+const pickerOpen = ref(false);
+const pickerRef = ref<InstanceType<typeof SessionEmojiPicker> | null>(null);
+const pickerStyle = ref<Record<string, string>>({});
+/** Element the picker is anchored to — its own clicks toggle, so outside-click ignores it. */
+let pickerAnchor: HTMLElement | null = null;
+
+// Pointer-anchored: transform origin tracks the click even after clamping.
+// Keyboard "clicks" (clientX/Y = 0) fall back to the trigger rect's `side` corner.
+function positionPicker(r: DOMRect, side: 'left' | 'right', originX?: number): void {
+  const panel = pickerRef.value?.el;
+  const gap = 4;
+  const margin = 8;
+  const panelH = panel?.offsetHeight ?? 0;
+  const panelW = panel?.offsetWidth ?? 0;
+  let top = r.bottom + gap;
+  let flipped = false;
+  if (top + panelH > window.innerHeight - margin) {
+    top = Math.max(margin, r.top - panelH - gap);
+    flipped = true;
+  }
+  const wantLeft = originX ?? (side === 'left' ? r.left : r.right - panelW);
+  const left = Math.max(margin, Math.min(wantLeft, window.innerWidth - panelW - margin));
+  const originXPart =
+    originX === undefined ? side : `${Math.round(Math.min(Math.max(originX - left, 0), panelW))}px`;
+  pickerStyle.value = {
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    transformOrigin: `${originXPart} ${flipped ? 'bottom' : 'top'}`,
+    '--menu-pop-shift': flipped ? '2px' : '-2px',
+  };
+}
+
+async function openPicker(
+  anchor: HTMLElement | undefined,
+  rect?: DOMRect,
+  side: 'left' | 'right' = 'left',
+  originX?: number,
+): Promise<void> {
+  const r = rect ?? anchor?.getBoundingClientRect();
+  if (!r) return;
+  if (pickerOpen.value) {
+    closePicker();
+    return;
+  }
+  closeMenu();
+  pickerAnchor = anchor ?? null;
+  pickerOpen.value = true;
+  // Defer so the opening click doesn't immediately close the panel.
+  setTimeout(() => document.addEventListener('mousedown', onPickerDocClick), 0);
+  // Window capture, consumed: the top layer owns Escape — ahead of the side
+  // panel (document capture) and the conversation interrupt (document bubble).
+  window.addEventListener('keydown', onPickerKeydown, true);
+  window.addEventListener('resize', closePicker);
+  // Wait for the teleported panel to mount so its size can be measured.
+  await nextTick();
+  positionPicker(r, side, originX);
+}
+
+function closePicker(): void {
+  pickerOpen.value = false;
+  pickerAnchor = null;
+  document.removeEventListener('mousedown', onPickerDocClick);
+  window.removeEventListener('keydown', onPickerKeydown, true);
+  window.removeEventListener('resize', closePicker);
+}
+
+function onPickerDocClick(e: MouseEvent): void {
+  const target = e.target as Node;
+  if (pickerRef.value?.el?.contains(target)) return;
+  // The trigger's own click toggles the picker — leave it for openPicker,
+  // otherwise the mousedown closes and the click immediately reopens.
+  if (pickerAnchor?.contains(target)) return;
+  closePicker();
+}
+
+function onPickerKeydown(e: KeyboardEvent): void {
+  if (e.key !== 'Escape') return;
+  // An Escape that only cancels an IME candidate in the search box must not
+  // close the picker (the picker's own guard covers Safari's isComposing=false).
+  if (pickerRef.value?.isComposingKeyEvent(e)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  closePicker();
+}
+
+function pointRect(e: MouseEvent): DOMRect | undefined {
+  return e.clientX || e.clientY ? new DOMRect(e.clientX, e.clientY, 0, 0) : undefined;
+}
+
+function openPickerFromRow(e: Event): void {
+  e.stopPropagation();
+  const me = e as MouseEvent;
+  void openPicker(me.currentTarget as HTMLElement, pointRect(me), 'left', me.clientX || undefined);
+}
+
+function openPickerFromMenu(e: Event): void {
+  // Right-click opened the menu at the cursor: anchor the picker to the click
+  // point (or, as a keyboard fallback, the menu's rect captured before
+  // closeMenu unmounts it), not to the hidden kebab.
+  const fromCursor = menuAnchor.value === 'cursor';
+  const anchor = fromCursor ? menuRef.value?.el : kebabRef.value?.el;
+  const me = e as MouseEvent;
+  const rect = pointRect(me) ?? anchor?.getBoundingClientRect();
+  closeMenu();
+  void openPicker(anchor, rect, fromCursor ? 'left' : 'right', me.clientX || undefined);
+}
+
+function applyEmoji(emoji: string | null): void {
+  closePicker();
+  // Re-picking the current icon is a no-op — even for stored titles whose
+  // prefix isn't in the normalized `emoji + space` shape, don't rewrite them.
+  if (emoji === emojiSplit.value.emoji) return;
+  const newTitle = applySessionEmoji(props.session.title, emoji);
+  // Never PATCH an empty title (the title was emoji-only and the emoji is removed).
+  if (newTitle && newTitle !== props.session.title) emit('rename', props.session.id, newTitle);
+}
+
 // Inline rename
 const renaming = ref(false);
 const renameValue = ref('');
@@ -135,6 +267,7 @@ const renameInputRef = ref<HTMLInputElement | null>(null);
 const { handleCompositionStart, handleCompositionEnd, isComposingKeyEvent } = useImeComposition();
 async function startRename(): Promise<void> {
   closeMenu();
+  closePicker();
   renaming.value = true;
   renameValue.value = props.session.title;
   await nextTick();
@@ -272,7 +405,14 @@ defineExpose({ closeMenu });
           @compositionend="handleCompositionEnd"
           @blur="commitRename"
         />
-        <span v-else class="t" @dblclick.stop="startRename">{{ session.title }}</span>
+        <span v-else class="t" @dblclick.stop="startRename"><button
+          v-if="emojiSplit.emoji"
+          type="button"
+          class="emoji"
+          :aria-label="t('sidebar.setEmoji')"
+          @click.stop="openPickerFromRow"
+          @dblclick.stop
+        >{{ emojiSplit.emoji }}</button>{{ displayText }}</span>
       </div>
 
       <!-- Pending tags — coloured per kind, shown even when the row isn't
@@ -361,6 +501,10 @@ defineExpose({ closeMenu });
           <Icon name="pencil" size="sm" />
           {{ t('sidebar.rename') }}
         </MenuItem>
+        <MenuItem @click="openPickerFromMenu">
+          <Icon name="emoji" size="sm" />
+          {{ t('sidebar.setEmoji') }}
+        </MenuItem>
         <MenuItem @click="forkRow">
           <Icon name="git-fork" size="sm" />
           {{ t('sidebar.fork') }}
@@ -382,6 +526,23 @@ defineExpose({ closeMenu });
         </Menu>
       </Transition>
     </Teleport>
+
+    <!-- Emoji picker — teleported like the kebab menu so the collapsing
+         `.group-sessions` list's `overflow: hidden` can't clip it. -->
+    <Teleport to="body">
+      <Transition name="menu-pop">
+        <SessionEmojiPicker
+          v-if="pickerOpen"
+          ref="pickerRef"
+          class="picker"
+          :style="pickerStyle"
+          :current="emojiSplit.emoji"
+          :removable="emojiSplit.rest.length > 0"
+          @click.stop
+          @pick="applyEmoji"
+        />
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -471,6 +632,17 @@ defineExpose({ closeMenu });
   --sb-fade-len: 26px;
 }
 
+/* Leading emoji (the session icon): an ordinary title character — no
+   decoration at rest or on hover. It stays a <button> for a11y; the kebab
+   menu's "Set Emoji…" is the discoverable path. */
+.t .emoji {
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.t .emoji:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
+
 .ts {
   color: var(--color-text-faint);
   font-size: var(--text-xs);
@@ -553,6 +725,14 @@ defineExpose({ closeMenu });
   left: 0;
   z-index: var(--z-dropdown);
 }
+/* The emoji picker shares the menu's fixed + teleported placement (anchored by
+   positionPicker, either to the ⋯ button or to the title's emoji). */
+.picker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-dropdown);
+}
 /* Menu enter/exit — pops out of the trigger corner (the composer model
    dropdown's language): fade + a slight scale, exit a touch faster. The
    origin and the nudge direction come from the positioning code. */
diff --git a/apps/desktop/src/renderer/lib/icons.ts b/apps/desktop/src/renderer/lib/icons.ts
index 7a8c0d1f8..b6be67600 100644
--- a/apps/desktop/src/renderer/lib/icons.ts
+++ b/apps/desktop/src/renderer/lib/icons.ts
@@ -107,6 +107,7 @@ import RiCalendarCloseLine from '~icons/ri/calendar-close-line';
 import RiCalendarScheduleLine from '~icons/ri/calendar-schedule-line';
 import RiCalendarTodoLine from '~icons/ri/calendar-todo-line';
 import RiCodeLine from '~icons/ri/code-line';
+import RiEmotionLine from '~icons/ri/emotion-line';
 import RiExternalLinkLine from '~icons/ri/external-link-line';
 import RiFileAddLine from '~icons/ri/file-add-line';
 import RiFlashlightLine from '~icons/ri/flashlight-line';
@@ -194,6 +195,7 @@ import RawCalendarCloseLine from '~icons/ri/calendar-close-line?raw';
 import RawCalendarScheduleLine from '~icons/ri/calendar-schedule-line?raw';
 import RawCalendarTodoLine from '~icons/ri/calendar-todo-line?raw';
 import RawCodeLine from '~icons/ri/code-line?raw';
+import RawEmotionLine from '~icons/ri/emotion-line?raw';
 import RawExternalLinkLine from '~icons/ri/external-link-line?raw';
 import RawFileAddLine from '~icons/ri/file-add-line?raw';
 import RawFlashlightLine from '~icons/ri/flashlight-line?raw';
@@ -280,6 +282,7 @@ export type IconName =
   | 'clock'
   | 'robot'
   | 'sparkles'
+  | 'emoji'
   | 'target'
   | 'pause'
   | 'play'
@@ -379,6 +382,7 @@ export const ICONS: Record<IconName, IconEntry> = {
   clock: entry(KimiClock, RawKimiClock),
   robot: entry(KimiRobot, RawKimiRobot),
   sparkles: entry(KimiTask, RawKimiTask),
+  emoji: entry(RiEmotionLine, RawEmotionLine),
   target: entry(KimiTarget, RawKimiTarget),
   pause: entry(KimiPause, RawKimiPause),
   play: entry(KimiPlay, RawKimiPlay),
@@ -492,7 +496,7 @@ export const ICON_GROUPS: ReadonlyArray<readonly [string, readonly IconName[]]>
       'microscope',
     ],
   ],
-  ['Communication', ['message', 'mail', 'user', 'robot']],
+  ['Communication', ['message', 'mail', 'user', 'robot', 'emoji']],
   [
     'Status & media',
     [
diff --git a/apps/desktop/src/renderer/views/DesignSystemView.vue b/apps/desktop/src/renderer/views/DesignSystemView.vue
index e464f0763..0f94898ba 100644
--- a/apps/desktop/src/renderer/views/DesignSystemView.vue
+++ b/apps/desktop/src/renderer/views/DesignSystemView.vue
@@ -1384,7 +1384,7 @@ onUnmounted(() => {
                 <tr><td class="tk">no-gradient-text</td><td>gradient text / gradient background</td><td><span class="pill red">Forbidden</span></td></tr>
                 <tr><td class="tk">no-glassmorphism</td><td><code>backdrop-filter: blur</code> (<b>TopBar sticky nav bar</b> is the sole exception)</td><td><span class="pill amber">TopBar exempt</span></td></tr>
                 <tr><td class="tk">no-color-glow</td><td>colored / large-radius box-shadow glow</td><td><span class="pill red">Forbidden</span></td></tr>
-                <tr><td class="tk">no-emoji-icon</td><td>using emoji as a functional icon (<b>the moon phases 🌑…🌘 are the sole exception</b>, and only in the "waiting for the Agent to respond" chat state; all other loading states use the plain Spinner)</td><td><span class="pill amber">Moon phase exempt</span></td></tr>
+                <tr><td class="tk">no-emoji-icon</td><td>using emoji as a functional icon (<b>the moon phases 🌑…🌘 are the sole exception</b>, and only in the "waiting for the Agent to respond" chat state; all other loading states use the plain Spinner). Emoji inside <b>user content</b> — session titles, messages — is not chrome and is out of scope (see §07 Session row's emoji icon)</td><td><span class="pill amber">Moon phase exempt</span></td></tr>
                 <tr><td class="tk">no-hardcoded-hex</td><td>unregistered hex color inside a component <code>&lt;style&gt;</code></td><td><span class="pill amber">Warning</span></td></tr>
                 <tr><td class="tk">no-hardcoded-font</td><td>hard-coded <code>font-family</code> in a component (e.g. <code>'Inter'</code>) instead of <code>var(--font-ui)</code></td><td><span class="pill amber">Warning</span></td></tr>
                 <tr><td class="tk">radius-from-scale</td><td>radius value not in <code>{4,6,8,12,16,20,999}</code></td><td><span class="pill amber">Warning</span></td></tr>
@@ -1497,6 +1497,7 @@ onUnmounted(() => {
                 <tr><td>Container</td><td><code>padding: 8px 8px</code> inside the list's <code>--sb-inset</code> gutter, <code>radius-sm</code>; <b>no fixed/min height</b> — row height is font-driven (title <code>line-height: --leading-tight</code>, ≈16px) → ≈32px total, the sidebar-wide row rhythm. The hover kebab is absolutely positioned so it never forces the row taller (no hover jitter). hover = <code>--sb-hover</code> (the global <code>--color-hover</code> wash); active = <code>--sb-selected</code> (75% of the global selected wash) — neutral, no accent tint, no border, no weight change</td></tr>
                 <tr><td>Status slot (lead)</td><td>fixed <code>--sb-gutter</code> width; running = <code>Spinner</code> sm, otherwise unread = 7px accent dot</td></tr>
                 <tr><td>Title</td><td>flex:1 with truncation and <code>user-select:none</code>; double-click enters inline rename (compact input, not Input), whose text remains selectable</td></tr>
+                <tr><td>Emoji icon</td><td>the session icon is the title's LEADING emoji cluster (web-core <code>splitSessionEmoji</code> — no icon field; every client renders the title as-is). The emoji is an ordinary title character — no decoration at rest or on hover (it stays a <code>&lt;button&gt;</code> for a11y), and clicking it opens <code>SessionEmojiPicker</code> — a Menu-shelled panel (bare list-style search row → scrollable sections: Recently used persisted in localStorage (cap 8) + the grouped emoji dataset, with remove/random as MenuItems in the footer; a query swaps the sections for keyword-search results), teleported + fixed + <code>--z-dropdown</code>, popping from the trigger corner like the kebab menu. The kebab's "Set Emoji…" opens the same picker and is the touch/keyboard path. Inline rename edits the whole title — the emoji is an ordinary character in the input</td></tr>
                 <tr><td>Time</td><td>mono xs, <code>fg-faint</code>; yields to the kebab on hover</td></tr>
                 <tr><td>Attention Badge</td><td><code>Badge</code> sm: info (needs answer) / warning (needs approval) / danger (aborted)</td></tr>
                 <tr><td>kebab</td><td><code>IconButton</code> sm, shown on hover (and pinned visible + lit while its own menu is open); dropdown uses <code>Menu/MenuItem</code>. Right-clicking the row opens the same menu anchored to the cursor — without pinning the kebab — except over the inline rename input, where the native text-editing menu stays</td></tr>
diff --git a/apps/web/src/components/SessionEmojiPicker.vue b/apps/web/src/components/SessionEmojiPicker.vue
new file mode 100644
index 000000000..7eeb222e8
--- /dev/null
+++ b/apps/web/src/components/SessionEmojiPicker.vue
@@ -0,0 +1,241 @@
+<!-- apps/web/src/components/SessionEmojiPicker.vue -->
+<!-- Session emoji picker popover (SessionRow's "Set Emoji…" entry / title emoji
+     click): bare search row → scrollable sections (Recently used from
+     localStorage, cap 8 → the grouped dataset) → MenuItem footer. -->
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Icon, Menu, MenuItem, useImeComposition } from '@moonshot-ai/web-ui';
+import {
+  EMOJI_ENTRIES,
+  EMOJI_GROUPS,
+  pushRecentEmoji,
+  searchEmojis,
+  type EmojiGroup,
+} from '@moonshot-ai/web-core/lib';
+
+const { t } = useI18n();
+
+// IME guard: Enter that only confirms a composition candidate must not pick.
+const { handleCompositionStart, handleCompositionEnd, isComposingKeyEvent } = useImeComposition();
+
+const props = withDefaults(
+  defineProps<{
+    current?: string | null;
+    /** False when the title is emoji-only: removing would leave an empty title. */
+    removable?: boolean;
+  }>(),
+  { current: null, removable: true },
+);
+const emit = defineEmits<{ pick: [emoji: string | null] }>();
+
+// Random's pool: a small curated set of safe bets (all round-trip through
+// splitSessionEmoji's conservative detection).
+const RANDOM_POOL = [
+  '⏳', '⚠️', '🐛', '✨', '🔥', '🚀', '🎯', '🧪',
+  '📝', '🔍', '🛠️', '💡', '📦', '🎨', '🔒', '📈',
+  '🧹', '🚧', '✅', '❓', '🌙', '☕', '🐳', '🗂️',
+  '📊', '🤖', '🧩', '⚙️', '🌱', '📌', '💥', '🕐',
+];
+
+const GROUP_LABEL_KEY: Record<EmojiGroup, string> = {
+  faces: 'sidebar.emojiGroupFaces',
+  nature: 'sidebar.emojiGroupNature',
+  food: 'sidebar.emojiGroupFood',
+  activity: 'sidebar.emojiGroupActivity',
+  objects: 'sidebar.emojiGroupObjects',
+  symbols: 'sidebar.emojiGroupSymbols',
+};
+const grouped = EMOJI_GROUPS.map((id) => ({
+  id,
+  labelKey: GROUP_LABEL_KEY[id],
+  emojis: EMOJI_ENTRIES.filter((e) => e.group === id).map((e) => e.emoji),
+}));
+
+const STORAGE_KEY = 'kimi-web.recent-emojis';
+const recents = ref<string[]>(readRecents());
+function readRecents(): string[] {
+  try {
+    const raw: unknown = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '[]');
+    return Array.isArray(raw) ? raw.filter((e): e is string => typeof e === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function onPick(emoji: string): void {
+  recents.value = pushRecentEmoji(recents.value, emoji);
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(recents.value));
+  } catch {
+    // Quota / private mode: recents just don't persist.
+  }
+  emit('pick', emoji);
+}
+
+const query = ref('');
+const searching = computed(() => query.value.trim().length > 0);
+const results = computed(() => searchEmojis(query.value));
+
+const inputRef = ref<HTMLInputElement | null>(null);
+onMounted(() => inputRef.value?.focus());
+
+// Enter picks the first search result.
+function onEnter(e: KeyboardEvent): void {
+  if (isComposingKeyEvent(e)) return;
+  const first = results.value[0];
+  if (searching.value && first) onPick(first);
+}
+
+function pickRandom(): void {
+  let next: string | undefined = props.current ?? undefined;
+  while (next === undefined || next === props.current) {
+    next = RANDOM_POOL[Math.floor(Math.random() * RANDOM_POOL.length)];
+  }
+  onPick(next);
+}
+
+// Mirror Menu/IconButton's exposed-el pattern so the consumer can outside-click
+// against the panel (positioning is left to the consumer, same as Menu); the
+// IME guard is shared for the consumer's Escape handling (Safari reports
+// isComposing=false on the candidate-cancelling Escape).
+const menuRef = ref<InstanceType<typeof Menu> | null>(null);
+defineExpose({ el: computed(() => menuRef.value?.el), isComposingKeyEvent });
+</script>
+
+<template>
+  <Menu ref="menuRef" class="emoji-picker" role="dialog" :aria-label="t('sidebar.sessionEmojiTitle')" @keydown.stop>
+    <div class="ep-search">
+      <Icon name="search" size="sm" />
+      <input
+        ref="inputRef"
+        v-model="query"
+        class="ep-input"
+        type="text"
+        :placeholder="t('sidebar.searchEmoji')"
+        autocomplete="off"
+        spellcheck="false"
+        @keydown.enter="onEnter"
+        @compositionstart="handleCompositionStart"
+        @compositionend="handleCompositionEnd"
+      />
+    </div>
+
+    <div class="ep-scroll">
+      <template v-if="searching">
+        <div v-if="results.length" class="ep-grid">
+          <button
+            v-for="e in results"
+            :key="e"
+            class="ep-e"
+            :class="{ sel: e === current }"
+            type="button"
+            @click="onPick(e)"
+          >{{ e }}</button>
+        </div>
+        <div v-else class="ep-empty">{{ t('sidebar.noEmojiResults') }}</div>
+      </template>
+
+      <template v-else>
+        <template v-if="recents.length">
+          <div class="ep-label">{{ t('sidebar.recentEmojis') }}</div>
+          <div class="ep-grid">
+            <button
+              v-for="e in recents"
+              :key="e"
+              class="ep-e"
+              :class="{ sel: e === current }"
+              type="button"
+              @click="onPick(e)"
+            >{{ e }}</button>
+          </div>
+        </template>
+        <template v-for="g in grouped" :key="g.id">
+          <div class="ep-label">{{ t(g.labelKey) }}</div>
+          <div class="ep-grid">
+            <button
+              v-for="e in g.emojis"
+              :key="e"
+              class="ep-e"
+              :class="{ sel: e === current }"
+              type="button"
+              @click="onPick(e)"
+            >{{ e }}</button>
+          </div>
+        </template>
+      </template>
+    </div>
+
+    <MenuItem separator />
+    <MenuItem role="button" :disabled="!(current && removable)" @click="emit('pick', null)">
+      <Icon name="close" size="sm" />
+      {{ t('sidebar.removeEmoji') }}
+    </MenuItem>
+    <MenuItem role="button" @click="pickRandom">
+      <Icon name="sparkles" size="sm" />
+      {{ t('sidebar.randomEmoji') }}
+    </MenuItem>
+  </Menu>
+</template>
+
+<style scoped>
+/* Cell size drives every picker metric (matches the IconButton-sm footprint):
+   8-column grid + derived input height, scroll height and panel width. */
+.emoji-picker { --ep-cell: 26px; }
+/* Bare list-style search row (the sidebar Search vocabulary): icon + input,
+   no border; the row shows a sunken wash on hover / focus-within. */
+.ep-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin: var(--space-1);
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-faint);
+}
+.ep-search:hover,
+.ep-search:focus-within { background: var(--color-surface-sunken); }
+.ep-input {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--ep-cell) + 2px);
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+.ep-input::placeholder { color: var(--color-text-faint); }
+.ep-scroll { max-height: calc(var(--ep-cell) * 10 + var(--space-1)); overflow-y: auto; padding: 0 var(--space-1); }
+/* Section labels — the .side-section-label recipe (xs / 600 / uppercase / faint). */
+.ep-label {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-section-label);
+  text-transform: uppercase;
+  color: var(--color-text-faint);
+  user-select: none;
+}
+.ep-grid { display: grid; grid-template-columns: repeat(8, var(--ep-cell)); gap: var(--space-1); padding-bottom: var(--space-1); }
+.ep-e {
+  height: var(--ep-cell);
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: var(--text-lg);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+.ep-e:hover { background: var(--color-hover); }
+.ep-e:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
+.ep-e.sel { background: var(--color-accent-soft); }
+.ep-empty {
+  padding: var(--space-3) var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--color-text-faint);
+  text-align: center;
+  user-select: none;
+}
+</style>
diff --git a/apps/web/src/components/SessionRow.vue b/apps/web/src/components/SessionRow.vue
index 7d61d9f6f..f1de4bcfb 100644
--- a/apps/web/src/components/SessionRow.vue
+++ b/apps/web/src/components/SessionRow.vue
@@ -1,12 +1,15 @@
 <!-- apps/web/src/components/SessionRow.vue -->
 <!-- A single session row: status dot + title + time + attention pill + kebab. -->
-<!-- Inline rename (dblclick) and delete-confirm live here. -->
+<!-- Inline rename (dblclick), the emoji icon affordance (hover wash + picker, -->
+<!-- see SessionEmojiPicker) and delete-confirm live here. -->
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { Session } from '../types';
 import { copyTextToClipboard } from '../lib/clipboard';
 import { Badge, Icon, IconButton, Menu, MenuItem, Spinner, Tooltip, useImeComposition } from '@moonshot-ai/web-ui';
+import { applySessionEmoji, splitSessionEmoji } from '@moonshot-ai/web-core/lib';
+import SessionEmojiPicker from './SessionEmojiPicker.vue';
 
 const { t } = useI18n();
 
@@ -109,6 +112,7 @@ async function toggleMenu(e: Event): Promise<void> {
 // caller then anchors it — the ⋯ button for toggleMenu, the cursor for
 // right-click.
 async function openMenu(): Promise<void> {
+  closePicker();
   menuOpen.value = true;
   // Defer so the current click doesn't immediately close the menu.
   setTimeout(() => document.addEventListener('mousedown', onDocClick), 0);
@@ -124,9 +128,137 @@ function closeMenu(): void {
 
 onUnmounted(() => {
   document.removeEventListener('mousedown', onDocClick);
+  document.removeEventListener('mousedown', onPickerDocClick);
+  window.removeEventListener('keydown', onPickerKeydown, true);
   window.removeEventListener('resize', closeMenu);
+  window.removeEventListener('resize', closePicker);
 });
 
+// Emoji picker — picking rewrites the title's leading emoji cluster (web-core
+// splitSessionEmoji) through the ordinary rename path.
+const emojiSplit = computed(() => splitSessionEmoji(props.session.title));
+/** Title text after the emoji button — the stored separator + text, byte-for-byte. */
+const displayText = computed(() => {
+  const e = emojiSplit.value.emoji;
+  return e ? props.session.title.slice(e.length) : props.session.title;
+});
+const pickerOpen = ref(false);
+const pickerRef = ref<InstanceType<typeof SessionEmojiPicker> | null>(null);
+const pickerStyle = ref<Record<string, string>>({});
+/** Element the picker is anchored to — its own clicks toggle, so outside-click ignores it. */
+let pickerAnchor: HTMLElement | null = null;
+
+// Pointer-anchored: transform origin tracks the click even after clamping.
+// Keyboard "clicks" (clientX/Y = 0) fall back to the trigger rect's `side` corner.
+function positionPicker(r: DOMRect, side: 'left' | 'right', originX?: number): void {
+  const panel = pickerRef.value?.el;
+  const gap = 4;
+  const margin = 8;
+  const panelH = panel?.offsetHeight ?? 0;
+  const panelW = panel?.offsetWidth ?? 0;
+  let top = r.bottom + gap;
+  let flipped = false;
+  if (top + panelH > window.innerHeight - margin) {
+    top = Math.max(margin, r.top - panelH - gap);
+    flipped = true;
+  }
+  const wantLeft = originX ?? (side === 'left' ? r.left : r.right - panelW);
+  const left = Math.max(margin, Math.min(wantLeft, window.innerWidth - panelW - margin));
+  const originXPart =
+    originX === undefined ? side : `${Math.round(Math.min(Math.max(originX - left, 0), panelW))}px`;
+  pickerStyle.value = {
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    transformOrigin: `${originXPart} ${flipped ? 'bottom' : 'top'}`,
+    '--menu-pop-shift': flipped ? '2px' : '-2px',
+  };
+}
+
+async function openPicker(
+  anchor: HTMLElement | undefined,
+  rect?: DOMRect,
+  side: 'left' | 'right' = 'left',
+  originX?: number,
+): Promise<void> {
+  const r = rect ?? anchor?.getBoundingClientRect();
+  if (!r) return;
+  if (pickerOpen.value) {
+    closePicker();
+    return;
+  }
+  closeMenu();
+  pickerAnchor = anchor ?? null;
+  pickerOpen.value = true;
+  // Defer so the opening click doesn't immediately close the panel.
+  setTimeout(() => document.addEventListener('mousedown', onPickerDocClick), 0);
+  // Window capture, consumed: the top layer owns Escape — ahead of the side
+  // panel (document capture) and the conversation interrupt (document bubble).
+  window.addEventListener('keydown', onPickerKeydown, true);
+  window.addEventListener('resize', closePicker);
+  // Wait for the teleported panel to mount so its size can be measured.
+  await nextTick();
+  positionPicker(r, side, originX);
+}
+
+function closePicker(): void {
+  pickerOpen.value = false;
+  pickerAnchor = null;
+  document.removeEventListener('mousedown', onPickerDocClick);
+  window.removeEventListener('keydown', onPickerKeydown, true);
+  window.removeEventListener('resize', closePicker);
+}
+
+function onPickerDocClick(e: MouseEvent): void {
+  const target = e.target as Node;
+  if (pickerRef.value?.el?.contains(target)) return;
+  // The trigger's own click toggles the picker — leave it for openPicker,
+  // otherwise the mousedown closes and the click immediately reopens.
+  if (pickerAnchor?.contains(target)) return;
+  closePicker();
+}
+
+function onPickerKeydown(e: KeyboardEvent): void {
+  if (e.key !== 'Escape') return;
+  // An Escape that only cancels an IME candidate in the search box must not
+  // close the picker (the picker's own guard covers Safari's isComposing=false).
+  if (pickerRef.value?.isComposingKeyEvent(e)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  closePicker();
+}
+
+function pointRect(e: MouseEvent): DOMRect | undefined {
+  return e.clientX || e.clientY ? new DOMRect(e.clientX, e.clientY, 0, 0) : undefined;
+}
+
+function openPickerFromRow(e: Event): void {
+  e.stopPropagation();
+  const me = e as MouseEvent;
+  void openPicker(me.currentTarget as HTMLElement, pointRect(me), 'left', me.clientX || undefined);
+}
+
+function openPickerFromMenu(e: Event): void {
+  // Right-click opened the menu at the cursor: anchor the picker to the click
+  // point (or, as a keyboard fallback, the menu's rect captured before
+  // closeMenu unmounts it), not to the hidden kebab.
+  const fromCursor = menuAnchor.value === 'cursor';
+  const anchor = fromCursor ? menuRef.value?.el : kebabRef.value?.el;
+  const me = e as MouseEvent;
+  const rect = pointRect(me) ?? anchor?.getBoundingClientRect();
+  closeMenu();
+  void openPicker(anchor, rect, fromCursor ? 'left' : 'right', me.clientX || undefined);
+}
+
+function applyEmoji(emoji: string | null): void {
+  closePicker();
+  // Re-picking the current icon is a no-op — even for stored titles whose
+  // prefix isn't in the normalized `emoji + space` shape, don't rewrite them.
+  if (emoji === emojiSplit.value.emoji) return;
+  const newTitle = applySessionEmoji(props.session.title, emoji);
+  // Never PATCH an empty title (the title was emoji-only and the emoji is removed).
+  if (newTitle && newTitle !== props.session.title) emit('rename', props.session.id, newTitle);
+}
+
 // Inline rename
 const renaming = ref(false);
 const renameValue = ref('');
@@ -135,6 +267,7 @@ const renameInputRef = ref<HTMLInputElement | null>(null);
 const { handleCompositionStart, handleCompositionEnd, isComposingKeyEvent } = useImeComposition();
 async function startRename(): Promise<void> {
   closeMenu();
+  closePicker();
   renaming.value = true;
   renameValue.value = props.session.title;
   await nextTick();
@@ -272,7 +405,14 @@ defineExpose({ closeMenu });
           @compositionend="handleCompositionEnd"
           @blur="commitRename"
         />
-        <span v-else class="t" @dblclick.stop="startRename">{{ session.title }}</span>
+        <span v-else class="t" @dblclick.stop="startRename"><button
+          v-if="emojiSplit.emoji"
+          type="button"
+          class="emoji"
+          :aria-label="t('sidebar.setEmoji')"
+          @click.stop="openPickerFromRow"
+          @dblclick.stop
+        >{{ emojiSplit.emoji }}</button>{{ displayText }}</span>
       </div>
 
       <!-- Pending tags — coloured per kind, shown even when the row isn't
@@ -361,6 +501,10 @@ defineExpose({ closeMenu });
           <Icon name="pencil" size="sm" />
           {{ t('sidebar.rename') }}
         </MenuItem>
+        <MenuItem @click="openPickerFromMenu">
+          <Icon name="emoji" size="sm" />
+          {{ t('sidebar.setEmoji') }}
+        </MenuItem>
         <MenuItem @click="forkRow">
           <Icon name="git-fork" size="sm" />
           {{ t('sidebar.fork') }}
@@ -382,6 +526,23 @@ defineExpose({ closeMenu });
         </Menu>
       </Transition>
     </Teleport>
+
+    <!-- Emoji picker — teleported like the kebab menu so the collapsing
+         `.group-sessions` list's `overflow: hidden` can't clip it. -->
+    <Teleport to="body">
+      <Transition name="menu-pop">
+        <SessionEmojiPicker
+          v-if="pickerOpen"
+          ref="pickerRef"
+          class="picker"
+          :style="pickerStyle"
+          :current="emojiSplit.emoji"
+          :removable="emojiSplit.rest.length > 0"
+          @click.stop
+          @pick="applyEmoji"
+        />
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
@@ -471,6 +632,17 @@ defineExpose({ closeMenu });
   --sb-fade-len: 26px;
 }
 
+/* Leading emoji (the session icon): an ordinary title character — no
+   decoration at rest or on hover. It stays a <button> for a11y; the kebab
+   menu's "Set Emoji…" is the discoverable path. */
+.t .emoji {
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.t .emoji:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
+
 .ts {
   color: var(--color-text-faint);
   font-size: var(--text-xs);
@@ -553,6 +725,14 @@ defineExpose({ closeMenu });
   left: 0;
   z-index: var(--z-dropdown);
 }
+/* The emoji picker shares the menu's fixed + teleported placement (anchored by
+   positionPicker, either to the ⋯ button or to the title's emoji). */
+.picker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-dropdown);
+}
 /* Menu enter/exit — pops out of the trigger corner (the composer model
    dropdown's language): fade + a slight scale, exit a touch faster. The
    origin and the nudge direction come from the positioning code. */
diff --git a/apps/web/src/lib/icons.ts b/apps/web/src/lib/icons.ts
index e074383d3..10062008e 100644
--- a/apps/web/src/lib/icons.ts
+++ b/apps/web/src/lib/icons.ts
@@ -105,6 +105,7 @@ import RiCalendarCloseLine from '~icons/ri/calendar-close-line';
 import RiCalendarScheduleLine from '~icons/ri/calendar-schedule-line';
 import RiCalendarTodoLine from '~icons/ri/calendar-todo-line';
 import RiCodeLine from '~icons/ri/code-line';
+import RiEmotionLine from '~icons/ri/emotion-line';
 import RiExternalLinkLine from '~icons/ri/external-link-line';
 import RiFileAddLine from '~icons/ri/file-add-line';
 import RiFlashlightLine from '~icons/ri/flashlight-line';
@@ -190,6 +191,7 @@ import RawCalendarCloseLine from '~icons/ri/calendar-close-line?raw';
 import RawCalendarScheduleLine from '~icons/ri/calendar-schedule-line?raw';
 import RawCalendarTodoLine from '~icons/ri/calendar-todo-line?raw';
 import RawCodeLine from '~icons/ri/code-line?raw';
+import RawEmotionLine from '~icons/ri/emotion-line?raw';
 import RawExternalLinkLine from '~icons/ri/external-link-line?raw';
 import RawFileAddLine from '~icons/ri/file-add-line?raw';
 import RawFlashlightLine from '~icons/ri/flashlight-line?raw';
@@ -274,6 +276,7 @@ export type IconName =
   | 'clock'
   | 'robot'
   | 'sparkles'
+  | 'emoji'
   | 'target'
   | 'pause'
   | 'play'
@@ -371,6 +374,7 @@ export const ICONS: Record<IconName, IconEntry> = {
   clock: entry(KimiClock, RawKimiClock),
   robot: entry(KimiRobot, RawKimiRobot),
   sparkles: entry(KimiTask, RawKimiTask),
+  emoji: entry(RiEmotionLine, RawEmotionLine),
   target: entry(KimiTarget, RawKimiTarget),
   pause: entry(KimiPause, RawKimiPause),
   play: entry(KimiPlay, RawKimiPlay),
@@ -482,7 +486,7 @@ export const ICON_GROUPS: ReadonlyArray<readonly [string, readonly IconName[]]>
       'microscope',
     ],
   ],
-  ['Communication', ['message', 'mail', 'user', 'robot']],
+  ['Communication', ['message', 'mail', 'user', 'robot', 'emoji']],
   [
     'Status & media',
     [
diff --git a/apps/web/src/views/DesignSystemView.vue b/apps/web/src/views/DesignSystemView.vue
index d44f9e5c3..eaa7fabf7 100644
--- a/apps/web/src/views/DesignSystemView.vue
+++ b/apps/web/src/views/DesignSystemView.vue
@@ -1370,7 +1370,7 @@ onUnmounted(() => {
                 <tr><td class="tk">no-gradient-text</td><td>gradient text / gradient background</td><td><span class="pill red">Forbidden</span></td></tr>
                 <tr><td class="tk">no-glassmorphism</td><td><code>backdrop-filter: blur</code> (<b>TopBar sticky nav bar</b> is the sole exception)</td><td><span class="pill amber">TopBar exempt</span></td></tr>
                 <tr><td class="tk">no-color-glow</td><td>colored / large-radius box-shadow glow</td><td><span class="pill red">Forbidden</span></td></tr>
-                <tr><td class="tk">no-emoji-icon</td><td>using emoji as a functional icon (<b>the moon phases 🌑…🌘 are the sole exception</b>, and only in the "waiting for the Agent to respond" chat state; all other loading states use the plain Spinner)</td><td><span class="pill amber">Moon phase exempt</span></td></tr>
+                <tr><td class="tk">no-emoji-icon</td><td>using emoji as a functional icon (<b>the moon phases 🌑…🌘 are the sole exception</b>, and only in the "waiting for the Agent to respond" chat state; all other loading states use the plain Spinner). Emoji inside <b>user content</b> — session titles, messages — is not chrome and is out of scope (see §07 Session row's emoji icon)</td><td><span class="pill amber">Moon phase exempt</span></td></tr>
                 <tr><td class="tk">no-hardcoded-hex</td><td>unregistered hex color inside a component <code>&lt;style&gt;</code></td><td><span class="pill amber">Warning</span></td></tr>
                 <tr><td class="tk">no-hardcoded-font</td><td>hard-coded <code>font-family</code> in a component (e.g. <code>'Inter'</code>) instead of <code>var(--font-ui)</code></td><td><span class="pill amber">Warning</span></td></tr>
                 <tr><td class="tk">radius-from-scale</td><td>radius value not in <code>{4,6,8,12,16,20,999}</code></td><td><span class="pill amber">Warning</span></td></tr>
@@ -1483,6 +1483,7 @@ onUnmounted(() => {
                 <tr><td>Container</td><td><code>padding: 8px 8px</code> inside the list's <code>--sb-inset</code> gutter, <code>radius-sm</code>; <b>no fixed/min height</b> — row height is font-driven (title <code>line-height: --leading-tight</code>, ≈16px) → ≈32px total, the sidebar-wide row rhythm. The hover kebab is absolutely positioned so it never forces the row taller (no hover jitter). hover = <code>--sb-hover</code> (the global <code>--color-hover</code> wash); active = <code>--sb-selected</code> (75% of the global selected wash) — neutral, no accent tint, no border, no weight change</td></tr>
                 <tr><td>Status slot (lead)</td><td>fixed <code>--sb-gutter</code> width; running = <code>Spinner</code> sm, otherwise unread = 7px accent dot</td></tr>
                 <tr><td>Title</td><td>flex:1 with truncation and <code>user-select:none</code>; double-click enters inline rename (compact input, not Input), whose text remains selectable</td></tr>
+                <tr><td>Emoji icon</td><td>the session icon is the title's LEADING emoji cluster (web-core <code>splitSessionEmoji</code> — no icon field; every client renders the title as-is). The emoji is an ordinary title character — no decoration at rest or on hover (it stays a <code>&lt;button&gt;</code> for a11y), and clicking it opens <code>SessionEmojiPicker</code> — a Menu-shelled panel (bare list-style search row → scrollable sections: Recently used persisted in localStorage (cap 8) + the grouped emoji dataset, with remove/random as MenuItems in the footer; a query swaps the sections for keyword-search results), teleported + fixed + <code>--z-dropdown</code>, popping from the trigger corner like the kebab menu. The kebab's "Set Emoji…" opens the same picker and is the touch/keyboard path. Inline rename edits the whole title — the emoji is an ordinary character in the input</td></tr>
                 <tr><td>Time</td><td>mono xs, <code>fg-faint</code>; yields to the kebab on hover</td></tr>
                 <tr><td>Attention Badge</td><td><code>Badge</code> sm: info (needs answer) / warning (needs approval) / danger (aborted)</td></tr>
                 <tr><td>kebab</td><td><code>IconButton</code> sm, shown on hover (and pinned visible + lit while its own menu is open); dropdown uses <code>Menu/MenuItem</code>. Right-clicking the row opens the same menu anchored to the cursor — without pinning the kebab — except over the inline rename input, where the native text-editing menu stays</td></tr>
diff --git a/docs/prototypes/session-emoji-slot.html b/docs/prototypes/session-emoji-slot.html
new file mode 100644
index 000000000..821ead662
--- /dev/null
+++ b/docs/prototypes/session-emoji-slot.html
@@ -0,0 +1,690 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-color-scheme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Session Emoji · 侧栏「hover 虚线框选 emoji」方案原型</title>
+<style>
+/* ===========================================================================
+   Tokens —— 与 packages/web-ui/src/style.css 的 token 层一一对应。
+   字体在真实应用中是自托管 Schibsted Grotesk + Noto Sans SC Variable，
+   原型退回系统字体栈（仅影响字腔，不影响节奏/颜色/层级）。
+   =========================================================================== */
+:root {
+  --color-bg: #ffffff;
+  --color-surface: #fafbfc;
+  --color-surface-raised: #ffffff;
+  --color-surface-overlay: #ffffff;
+  --color-surface-sunken: #f3f5f8;
+  --color-well: #f3f5f8;
+  --color-sidebar-bg: #fbfaf9;
+  --color-text: rgba(0, 0, 0, 0.9);
+  --color-text-muted: #6b7280;
+  --color-text-faint: #9aa3af;
+  --color-line: #e7eaee;
+  --color-line-strong: #d4d9e0;
+  --color-selected: #00000014;
+  --color-hover: #0000000d;
+  --color-accent: #1783ff;
+  --color-accent-hover: #0f6fe0;
+  --color-accent-soft: #e8f3ff;
+  --color-accent-bd: #cfe6ff;
+  --color-warning: #a9610a;
+  --color-warning-soft: #fbf1e0;
+  --color-warning-bd: #f0d9b8;
+  --color-danger: #c0392b;
+
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px;
+
+  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
+  --radius-xl: 16px; --radius-full: 999px;
+
+  --shadow-menu: 0 6px 18px lch(0% 0 0 / 0.02), 0 3px 9px lch(0% 0 0 / 0.04), 0 1px 1px lch(0% 0 0 / 0.04);
+
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+
+  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px;
+  --leading-tight: 1.25; --leading-normal: 1.5; --leading-prose: 1.6;
+  --weight-regular: 400; --weight-medium: 500;
+
+  --font-ui: "Schibsted Grotesk Variable", "Helvetica Neue", Arial,
+    "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
+    "SF Mono", Menlo, Consolas, monospace;
+
+  --p-content-max: 860px;
+}
+html[data-color-scheme="dark"] {
+  color-scheme: dark;
+  --color-bg: #0d1117;
+  --color-surface: #13181e;
+  --color-surface-raised: #1c2128;
+  --color-surface-overlay: #22272e;
+  --color-surface-sunken: #0d1117;
+  --color-well: #13181e;
+  --color-sidebar-bg: #0a0d12;
+  --color-text: #e8eaed;
+  --color-text-muted: #9aa0a8;
+  --color-text-faint: #6b7280;
+  --color-line: #2d333b;
+  --color-line-strong: #3d444d;
+  --color-selected: #ffffff14;
+  --color-hover: #ffffff0d;
+  --color-accent: #58a6ff;
+  --color-accent-hover: #79b8ff;
+  --color-accent-soft: rgba(88, 166, 255, 0.14);
+  --color-accent-bd: rgba(88, 166, 255, 0.28);
+  --color-warning: #d29922;
+  --color-warning-soft: rgba(210, 153, 34, 0.14);
+  --color-warning-bd: rgba(210, 153, 34, 0.28);
+  --color-danger: #f85149;
+  --shadow-menu: 0 6px 18px rgba(0, 0, 0, 0.2), 0 3px 9px rgba(0, 0, 0, 0.24), 0 1px 1px rgba(0, 0, 0, 0.24);
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; }
+body {
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  line-height: var(--leading-prose);
+  color: var(--color-text);
+  background: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+}
+button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
+code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-sunken); border-radius: var(--radius-xs); padding: 1px 5px; }
+html[data-color-scheme="dark"] code { background: #ffffff1a; }
+::selection { background: rgba(23, 131, 255, 0.18); }
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
+}
+
+/* ============================= 顶栏 ============================= */
+.topbar {
+  position: sticky; top: 0; z-index: 100;
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-3) var(--space-5);
+  background: var(--color-bg); border-bottom: 0.5px solid var(--color-line);
+  user-select: none;
+}
+.topbar .brand { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-right: var(--space-3); }
+.topbar .sp { flex: 1; }
+.demo-btn {
+  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3);
+  border-radius: var(--radius-full); border: 0.5px solid var(--color-line-strong);
+  background: var(--color-surface-raised); font-size: var(--text-xs); color: var(--color-text-muted);
+  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
+}
+.demo-btn:hover { color: var(--color-text); border-color: var(--color-text-faint); }
+.demo-btn.on { color: var(--color-accent); border-color: var(--color-accent-bd); background: var(--color-accent-soft); }
+
+/* ============================= 页面骨架 ============================= */
+.page { display: none; }
+.page.on { display: block; }
+.wrap { max-width: var(--p-content-max); margin: 0 auto; padding: var(--space-6) var(--space-6) 120px; }
+.wrap h1 { font-size: 20px; font-weight: 600; margin: 0 0 var(--space-1); }
+.wrap .sub { font-size: var(--text-sm); color: var(--color-text-faint); margin: 0 0 var(--space-5); }
+.wrap h2 {
+  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint);
+  margin: var(--space-8) 0 var(--space-2); text-transform: none;
+}
+.wrap h2 .n { font-family: var(--font-mono); color: var(--color-accent); margin-right: 6px; }
+.wrap p, .wrap li { color: var(--color-text-muted); font-size: var(--text-sm); }
+.wrap p b, .wrap li b { color: var(--color-text); font-weight: var(--weight-medium); }
+.wrap ul { margin: 0 0 var(--space-3); padding-left: 20px; }
+.wrap li { margin-bottom: 4px; }
+.pro { color: var(--color-accent); font-weight: var(--weight-medium); }
+.con { color: var(--color-danger); font-weight: var(--weight-medium); }
+
+.demo-stage {
+  border: 0.5px dashed var(--color-line-strong); border-radius: var(--radius-lg);
+  padding: var(--space-5); display: flex; gap: var(--space-6); align-items: flex-start;
+  background: var(--color-surface);
+}
+.demo-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin: 6px 0 0; }
+
+/* ============================= 侧栏 mock（还原截图语境） ============================= */
+.side {
+  width: 264px; flex: none; background: var(--color-sidebar-bg);
+  border: 0.5px solid var(--color-line); border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-2); user-select: none;
+}
+.ws-card {
+  display: flex; align-items: center; gap: var(--space-2);
+  background: var(--color-surface-sunken); border-radius: var(--radius-md);
+  padding: 7px var(--space-2); margin-bottom: var(--space-2);
+  font-size: var(--text-sm); font-weight: var(--weight-medium);
+}
+.ws-card svg { flex: none; color: var(--color-text-muted); }
+html[data-color-scheme="dark"] .ws-card { background: var(--color-well); }
+
+/* 行基础 —— 三个方案共用骨架（对齐 SessionRow.vue：8px padding / 13px 标题 / 右侧时间） */
+.se {
+  display: flex; align-items: center; gap: 6px;
+  padding: 5px var(--space-2); border-radius: var(--radius-sm);
+  font-size: var(--text-sm); color: var(--color-text-muted);
+  cursor: pointer; position: relative;
+}
+.se:hover, .se.fh { background: var(--color-hover); color: var(--color-text); }
+.se.active { background: var(--color-selected); color: var(--color-text); }
+.se .st { width: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
+.se .t {
+  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: var(--text-sm); line-height: var(--leading-tight);
+}
+.se .tm { flex: none; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
+.spin {
+  width: 10px; height: 10px; border-radius: 50%;
+  border: 1.5px solid var(--color-line-strong); border-top-color: var(--color-text-muted);
+  animation: rot 0.8s linear infinite;
+}
+@keyframes rot { to { transform: rotate(360deg); } }
+
+/* ===========================================================================
+   方案 A —— 独立 emoji 槽（emoji 提升为 session 元数据，槽位常驻宽度）
+   =========================================================================== */
+.pa .es {
+  width: 18px; height: 18px; flex: none;
+  display: grid; place-items: center;
+  border: 1px dashed transparent; border-radius: var(--radius-xs);
+  font-size: 13px; line-height: 1;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.pa .es .ph { font-size: 11px; color: var(--color-text-faint); opacity: 0; transition: opacity var(--duration-fast); }
+.pa .es .em { display: none; }
+.pa .es.has .em { display: block; }
+.pa .es.has .ph { display: none; }
+/* hover 行：空槽显虚线框 + 淡 +；有 emoji 的槽外套虚线圈 */
+.pa .se:hover .es, .pa .se.fh .es { border-color: var(--color-line-strong); }
+.pa .se:hover .es:not(.has) .ph, .pa .se.fh .es:not(.has) .ph { opacity: 1; }
+/* 直接 hover 槽位：accent 反馈，表达「可点」 */
+.pa .es:hover { border-color: var(--color-accent) !important; background: var(--color-accent-soft); }
+.pa .es:hover .ph { color: var(--color-accent); opacity: 1 !important; }
+.pa .es:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 1px; }
+
+/* ===========================================================================
+   方案 B —— 标题内联（emoji 留在标题字符串，hover 虚线圈出首字符 / 覆盖式加号框）
+   =========================================================================== */
+.pb .t .e { border-radius: var(--radius-xs); cursor: pointer; }
+.pb .se:hover .t .e, .pb .se.fh .t .e { outline: 1px dashed var(--color-line-strong); outline-offset: 2px; }
+.pb .t .e:hover { outline: 1px dashed var(--color-accent) !important; background: var(--color-accent-soft); }
+/* 无 emoji 行：hover 时虚线框覆盖在标题起始处（不占位，会遮住首字符 —— 如实呈现） */
+.pb .ov {
+  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
+  width: 18px; height: 18px; display: none; place-items: center;
+  border: 1px dashed var(--color-line-strong); border-radius: var(--radius-xs);
+  background: var(--color-sidebar-bg);
+  font-size: 11px; color: var(--color-text-faint); cursor: pointer; z-index: 2;
+}
+.pb .se:hover .ov, .pb .se.fh .ov { display: grid; }
+.pb .ov:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
+
+/* ===========================================================================
+   方案 C —— 菜单入口 + 轻提示（行上无新增常驻元素；kebab 菜单收「设置 Emoji…」）
+   =========================================================================== */
+.pc .t .e { border-radius: var(--radius-xs); cursor: pointer; }
+.pc .se:hover .t .e, .pc .se.fh .t .e { outline: 1px dashed var(--color-line-strong); outline-offset: 2px; }
+.pc .t .e:hover { outline: 1px dashed var(--color-accent) !important; background: var(--color-accent-soft); }
+/* 尾槽：时间与 kebab 互换（visibility，不换宽度 —— 沿用 §07 session row 语言） */
+.pc .act { position: relative; flex: none; display: inline-flex; align-items: center; min-width: 22px; justify-content: flex-end; }
+.pc .kb {
+  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
+  width: 22px; height: 22px; display: grid; place-items: center;
+  border-radius: var(--radius-sm); color: var(--color-text-faint);
+  visibility: hidden; font-size: 14px; letter-spacing: 1px;
+  background: var(--color-sidebar-bg);
+}
+.pc .se:hover .kb, .pc .se.fh .kb { visibility: visible; }
+.pc .se:hover .kb ~ .tm, .pc .se.fh .kb ~ .tm { visibility: hidden; }
+.pc .kb:hover { color: var(--color-text); background: var(--color-hover); }
+
+/* ============================= Emoji picker（三方案共用） ============================= */
+.picker {
+  position: fixed; z-index: 300; display: none;
+  width: 240px; padding: var(--space-2);
+  background: var(--color-surface-overlay); border: 0.5px solid var(--color-line);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-menu);
+}
+.pk-label { font-size: var(--text-xs); color: var(--color-text-faint); padding: 2px 6px 6px; }
+.pk-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
+.pk-e {
+  height: 26px; display: grid; place-items: center; font-size: 15px;
+  border-radius: var(--radius-xs); cursor: pointer;
+}
+.pk-e:hover { background: var(--color-hover); }
+.pk-e.sel { background: var(--color-accent-soft); outline: 1px solid var(--color-accent-bd); }
+.pk-foot { display: flex; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 0.5px solid var(--color-line); }
+.pk-act {
+  flex: 1; height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  font-size: var(--text-xs); color: var(--color-text-muted); border-radius: var(--radius-xs); cursor: pointer;
+}
+.pk-act:hover { background: var(--color-hover); color: var(--color-text); }
+.pk-act.danger:hover { color: var(--color-danger); }
+
+/* 静态陈列里的 picker 样张 */
+.pk-sample { position: static; display: block; width: 240px; }
+
+/* ============================= 方案 C 的 kebab 菜单 ============================= */
+.menu {
+  position: fixed; z-index: 310; display: none; min-width: 168px; padding: 4px;
+  background: var(--color-surface-overlay); border: 0.5px solid var(--color-line);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-menu);
+  font-size: var(--text-sm);
+}
+.mi {
+  display: flex; align-items: center; gap: var(--space-2); width: 100%;
+  padding: 5px var(--space-2); border-radius: var(--radius-xs);
+  color: var(--color-text); cursor: pointer; text-align: left;
+}
+.mi:hover { background: var(--color-hover); }
+.mi svg { flex: none; color: var(--color-text-muted); }
+.mi-sep { height: 1px; margin: 4px 6px; background: var(--color-line); }
+
+/* ============================= 状态陈列 ============================= */
+.gal-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
+.gal-tag { width: 148px; flex: none; font-size: var(--text-xs); color: var(--color-text-faint); text-align: right; }
+.gal-row .side { width: 264px; }
+
+/* ============================= 对比表 ============================= */
+table.cmp { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); }
+.cmp th, .cmp td { text-align: left; padding: 8px 12px; border-bottom: 0.5px solid var(--color-line); vertical-align: top; }
+.cmp th { color: var(--color-text-faint); font-weight: var(--weight-medium); font-size: var(--text-xs); }
+.cmp td { color: var(--color-text-muted); }
+.cmp td:first-child { color: var(--color-text); font-weight: var(--weight-medium); white-space: nowrap; }
+.callout {
+  border: 0.5px solid var(--color-warning-bd); background: var(--color-warning-soft);
+  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
+  font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-4) 0;
+}
+.callout b { color: var(--color-text); }
+</style>
+</head>
+<body>
+
+<header class="topbar">
+  <span class="brand">Session Emoji · hover 虚线框方案原型</span>
+  <button class="demo-btn on" data-page="a">方案 A · 独立图标槽</button>
+  <button class="demo-btn" data-page="b">方案 B · 标题内联圈选</button>
+  <button class="demo-btn" data-page="c">方案 C · 菜单入口 + 轻提示</button>
+  <button class="demo-btn" data-page="cmp">对比与建议</button>
+  <span class="sp"></span>
+  <button class="demo-btn" id="btn-theme">◐ 主题</button>
+</header>
+
+<!-- ═══════════════════════════ 方案 A ═══════════════════════════ -->
+<section class="page on" id="page-a">
+  <div class="wrap">
+    <h1>方案 A · 独立图标槽</h1>
+    <p class="sub">emoji 提升为 session 的元数据（不再混在标题字符串里），行首常驻一个 18px 槽位；hover 时空槽显虚线框、已有 emoji 外套虚线圈，点击开 picker。</p>
+
+    <h2><span class="n">A1</span>交互 demo —— hover 行看虚线框，点槽位换 emoji</h2>
+    <div class="demo-stage">
+      <div class="side pa" id="demo-a">
+        <div class="ws-card">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
+          kimi-code-app2
+        </div>
+        <div class="se" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳">
+          <span class="st"></span>
+          <button class="es" aria-label="设置 Emoji"><span class="ph">+</span><span class="em"></span></button>
+          <span class="t">做一个 desktop 的需求，希望 …</span>
+          <span class="tm">1h</span>
+        </div>
+        <div class="se" data-title="排查一个 desktop 的 bug，现 …" data-emoji="⚠️">
+          <span class="st"></span>
+          <button class="es" aria-label="设置 Emoji"><span class="ph">+</span><span class="em"></span></button>
+          <span class="t">排查一个 desktop 的 bug，现 …</span>
+          <span class="tm">7h</span>
+        </div>
+        <div class="se" data-title="release: v0.3.2 changeset" data-emoji="">
+          <span class="st"><span class="spin"></span></span>
+          <button class="es" aria-label="设置 Emoji"><span class="ph">+</span><span class="em"></span></button>
+          <span class="t">release: v0.3.2 changeset</span>
+          <span class="tm">12m</span>
+        </div>
+        <div class="se" data-title="composer 工作区选择器" data-emoji="">
+          <span class="st"></span>
+          <button class="es" aria-label="设置 Emoji"><span class="ph">+</span><span class="em"></span></button>
+          <span class="t">composer 工作区选择器</span>
+          <span class="tm">昨天</span>
+        </div>
+      </div>
+      <div>
+        <p style="margin-top:0"><b>试一试</b>：hover 任意行 → 行首出现虚线框（已有 emoji 的行是虚线圈）；点击槽位打开 picker，选一个 emoji 或「移除」。第三行演示 busy 状态（spinner 占用更左的状态 gutter，与 emoji 槽并存）。</p>
+        <p class="demo-hint">槽位是 <code>&lt;button&gt;</code>，可 Tab 聚焦、Enter 打开 picker，Esc 关闭。</p>
+      </div>
+    </div>
+
+    <h2><span class="n">A2</span>状态陈列</h2>
+    <div class="gal-row"><span class="gal-tag">静止 · 无 emoji</span>
+      <div class="side pa"><div class="se" data-title="composer 工作区选择器" data-emoji=""><span class="st"></span><button class="es"><span class="ph">+</span><span class="em"></span></button><span class="t">composer 工作区选择器</span><span class="tm">昨天</span></div></div>
+      <span class="demo-hint">完全干净，与现状一致</span>
+    </div>
+    <div class="gal-row"><span class="gal-tag">hover · 无 emoji</span>
+      <div class="side pa"><div class="se fh" data-title="composer 工作区选择器" data-emoji=""><span class="st"></span><button class="es"><span class="ph">+</span><span class="em"></span></button><span class="t">composer 工作区选择器</span><span class="tm">昨天</span></div></div>
+      <span class="demo-hint">虚线框 + 淡「+」，只在 hover 出现</span>
+    </div>
+    <div class="gal-row"><span class="gal-tag">静止 · 有 emoji</span>
+      <div class="side pa"><div class="se" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳"><span class="st"></span><button class="es"><span class="ph">+</span><span class="em"></span></button><span class="t">做一个 desktop 的需求，希望 …</span><span class="tm">1h</span></div></div>
+      <span class="demo-hint">emoji 常显，标题起始位置全列表对齐</span>
+    </div>
+    <div class="gal-row"><span class="gal-tag">hover · 有 emoji</span>
+      <div class="side pa"><div class="se fh" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳"><span class="st"></span><button class="es"><span class="ph">+</span><span class="em"></span></button><span class="t">做一个 desktop 的需求，希望 …</span><span class="tm">1h</span></div></div>
+      <span class="demo-hint">虚线圈提示「可换」</span>
+    </div>
+    <div class="gal-row"><span class="gal-tag">picker 展开</span>
+      <div class="picker pk-sample">
+        <div class="pk-label">设置 Session Emoji</div>
+        <div class="pk-grid pk-grid-sample"></div>
+        <div class="pk-foot"><button class="pk-act danger">移除 Emoji</button><button class="pk-act">随机一个</button></div>
+      </div>
+      <span class="demo-hint">精选 32 个常用 emoji，8×4；锚定槽位下方，空间不足上翻</span>
+    </div>
+
+    <h2><span class="n">A3</span>优劣</h2>
+    <ul>
+      <li><span class="pro">优</span> <b>布局绝对稳定</b>：槽位常驻 18px，标题起始 x 全列表对齐，hover 零位移 —— 与 §07「session row 不因 hover reflow」的原则一致。</li>
+      <li><span class="pro">优</span> <b>语义干净</b>：emoji 是结构化字段，rename、搜索、导出都不受标题里 emoji 的干扰；自动标题生成后可把 emoji 前缀剥离进该字段。</li>
+      <li><span class="pro">优</span> 发现性好：hover 即见虚线框，且静止时完全无噪声。</li>
+      <li><span class="con">劣</span> <b>改动面最大</b>：session 需要新增 icon 字段（server 存储 + 多端同步策略），行布局多一个槽。</li>
+      <li><span class="con">劣</span> 行首水平空间更紧张：状态 gutter（spinner/unread）+ emoji 槽 + 标题，窄侧栏下标题更短。</li>
+    </ul>
+  </div>
+</section>
+
+<!-- ═══════════════════════════ 方案 B ═══════════════════════════ -->
+<section class="page" id="page-b">
+  <div class="wrap">
+    <h1>方案 B · 标题内联圈选</h1>
+    <p class="sub">emoji 留在标题字符串里（现状如此：自动标题自带 emoji 前缀）；hover 时用虚线圈出标题首字符的 emoji 供点击更换，无 emoji 的行在标题起始处覆盖一个虚线加号框。</p>
+
+    <h2><span class="n">B1</span>交互 demo</h2>
+    <div class="demo-stage">
+      <div class="side pb" id="demo-b">
+        <div class="ws-card">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
+          kimi-code-app2
+        </div>
+        <div class="se" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳"><span class="st"></span><span class="t"></span><span class="tm">1h</span></div>
+        <div class="se" data-title="排查一个 desktop 的 bug，现 …" data-emoji="⚠️"><span class="st"></span><span class="t"></span><span class="tm">7h</span></div>
+        <div class="se" data-title="release: v0.3.2 changeset" data-emoji=""><span class="st"><span class="spin"></span></span><span class="t"></span><span class="tm">12m</span><span class="ov">+</span></div>
+        <div class="se" data-title="composer 工作区选择器" data-emoji=""><span class="st"></span><span class="t"></span><span class="tm">昨天</span><span class="ov">+</span></div>
+      </div>
+      <div>
+        <p style="margin-top:0"><b>试一试</b>：hover 有 emoji 的行 → 标题首字符被虚线圈出，点击更换；hover 无 emoji 的行 → 标题起始处覆盖一个虚线「+」框（<b>注意它会遮住标题第一个字</b>，这是该方案的真实代价）。</p>
+        <p class="demo-hint">零数据模型改动：picker 写入的就是标题字符串的 emoji 前缀，存量 session 天然兼容。</p>
+      </div>
+    </div>
+
+    <h2><span class="n">B2</span>状态陈列</h2>
+    <div class="gal-row"><span class="gal-tag">hover · 有 emoji</span>
+      <div class="side pb"><div class="se fh" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳"><span class="st"></span><span class="t"></span><span class="tm">1h</span></div></div>
+      <span class="demo-hint">虚线圈用 <code>outline: dashed</code>，不占布局</span>
+    </div>
+    <div class="gal-row"><span class="gal-tag">hover · 无 emoji</span>
+      <div class="side pb"><div class="se fh" data-title="composer 工作区选择器" data-emoji=""><span class="st"></span><span class="t"></span><span class="tm">昨天</span><span class="ov">+</span></div></div>
+      <span class="demo-hint">覆盖式虚线框，遮挡标题首字符</span>
+    </div>
+
+    <h2><span class="n">B3</span>优劣</h2>
+    <ul>
+      <li><span class="pro">优</span> <b>实现成本最低</b>：纯前端改动，不动数据模型、不动行布局；存量「emoji + 标题」的 session 直接可用。</li>
+      <li><span class="pro">优</span> 符合直觉：用户看到的就是标题的一部分，「改它」的心理模型直接。</li>
+      <li><span class="con">劣</span> <b>标题即数据的耦合风险</b>：识别「标题首字符是不是 emoji」需要 grapheme 级解析（ZWJ 序列、修饰符）；与双击 rename 的起点选择、标题搜索、排序都产生耦合。</li>
+      <li><span class="con">劣</span> <b>布局不齐</b>：有 emoji 的行标题整体右移，行间标题起始 x 不对齐；无 emoji 行的 hover 框遮挡首字符。</li>
+      <li><span class="con">劣</span> 自动标题重新生成时会覆盖用户手动选的 emoji（除非额外记录）。</li>
+    </ul>
+  </div>
+</section>
+
+<!-- ═══════════════════════════ 方案 C ═══════════════════════════ -->
+<section class="page" id="page-c">
+  <div class="wrap">
+    <h1>方案 C · 菜单入口 + 轻提示</h1>
+    <p class="sub">行上不新增任何常驻交互元素；kebab（⋯）/右键菜单收一个「设置 Emoji…」入口。已设 emoji 的行 hover 时给 emoji 一个虚线圈轻提示，点击也可直接唤起 picker。</p>
+
+    <h2><span class="n">C1</span>交互 demo</h2>
+    <div class="demo-stage">
+      <div class="side pc" id="demo-c">
+        <div class="ws-card">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
+          kimi-code-app2
+        </div>
+        <div class="se" data-title="做一个 desktop 的需求，希望 …" data-emoji="⏳"><span class="st"></span><span class="t"></span><span class="act"><button class="kb" aria-label="更多操作">⋯</button><span class="tm">1h</span></span></div>
+        <div class="se" data-title="排查一个 desktop 的 bug，现 …" data-emoji="⚠️"><span class="st"></span><span class="t"></span><span class="act"><button class="kb" aria-label="更多操作">⋯</button><span class="tm">7h</span></span></div>
+        <div class="se" data-title="release: v0.3.2 changeset" data-emoji=""><span class="st"><span class="spin"></span></span><span class="t"></span><span class="act"><button class="kb" aria-label="更多操作">⋯</button><span class="tm">12m</span></span></div>
+        <div class="se" data-title="composer 工作区选择器" data-emoji=""><span class="st"></span><span class="t"></span><span class="act"><button class="kb" aria-label="更多操作">⋯</button><span class="tm">昨天</span></span></div>
+      </div>
+      <div>
+        <p style="margin-top:0"><b>试一试</b>：hover 行 → 右侧出现 kebab「⋯」，点开菜单选「设置 Emoji…」；有 emoji 的行 hover 时 emoji 会被虚线圈出，点击它也能直接换。</p>
+        <p class="demo-hint">无 emoji 的行在静止与 hover 下都与现状完全一致 —— 零新增视觉元素。</p>
+      </div>
+    </div>
+
+    <h2><span class="n">C2</span>优劣</h2>
+    <ul>
+      <li><span class="pro">优</span> <b>最克制</b>：不给列表增加任何常驻/悬停视觉负担，与现有 kebab 词汇完全同构（重命名、归档的同款路径）。</li>
+      <li><span class="pro">优</span> <b>触屏可达</b>：不依赖 hover —— 移动端/触屏唯一的可用入口；键盘走同样的菜单路径。</li>
+      <li><span class="con">劣</span> <b>发现性最低</b>：功能藏在二级菜单里，用户大概率不知道可以设 emoji。</li>
+    </ul>
+    <div class="callout"><b>注意</b>：无论最终选 A 还是 B，C 的菜单入口都建议作为<b>必备兜底</b>一并实现 —— hover 在触屏上不存在，键盘用户也需要一个不依赖指针悬停的可达路径。</div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════ 对比与建议 ═══════════════════════════ -->
+<section class="page" id="page-cmp">
+  <div class="wrap">
+    <h1>对比与建议</h1>
+    <p class="sub">三个方案不是互斥的全集 —— 推荐组合落地，详见文末。</p>
+
+    <h2><span class="n">T1</span>对比表</h2>
+    <table class="cmp">
+      <tr><th style="width:120px">维度</th><th>A · 独立图标槽</th><th>B · 标题内联圈选</th><th>C · 菜单入口</th></tr>
+      <tr><td>发现性</td><td>高：hover 即见虚线框</td><td>中：有 emoji 才直观</td><td>低：藏在菜单里</td></tr>
+      <tr><td>视觉噪声（静止）</td><td>无</td><td>无</td><td>无</td></tr>
+      <tr><td>布局稳定性</td><td>标题起始 x 全列表对齐，hover 零位移</td><td>有 emoji 的行标题右移不对齐；无 emoji 行 hover 框遮挡首字符</td><td>同 B（emoji 在标题内时）</td></tr>
+      <tr><td>数据模型</td><td>session 新增 icon 字段（server 存储 + 同步策略）</td><td>零改动，emoji 留在标题字符串</td><td>取决于选 A 还是 B 的存储</td></tr>
+      <tr><td>存量/自动标题兼容</td><td>需迁移：剥离自动标题的 emoji 前缀写入字段</td><td>天然兼容（现状即如此）</td><td>—</td></tr>
+      <tr><td>触屏 / 键盘</td><td>槽位是 button 可 Tab；触屏无 hover 需 C 兜底</td><td>同左</td><td>菜单路径天然可达</td></tr>
+      <tr><td>实现成本</td><td>中（布局 + 字段 + 迁移）</td><td>低（纯前端）</td><td>低</td></tr>
+      <tr><td>主要风险</td><td>行首空间与状态 gutter 争抢</td><td>grapheme 解析、rename/搜索耦合、自动标题覆盖手动选择</td><td>功能被埋没</td></tr>
+    </table>
+
+    <h2><span class="n">T2</span>建议</h2>
+    <ul>
+      <li><b>主方案选 A</b>：emoji 作为 session 元数据、独立槽位常显，hover 虚线框作为唯一新增交互。布局稳定、语义干净，长期债最少。</li>
+      <li><b>C 的菜单入口必备</b>：作为触屏与键盘的可达性兜底，与 A 共用同一个 picker。</li>
+      <li><b>B 可作零成本过渡</b>：如果 server 字段短期排不上期，先用 B 纯前端落地（picker 直接改写标题前缀），但接受 grapheme 解析与 rename 耦合的风险；A 上线后退役。</li>
+    </ul>
+
+    <h2><span class="n">T3</span>开放问题（实现前需定）</h2>
+    <ul>
+      <li><b>存储</b>：icon 字段存 server（随 session 同步多设备）还是本地？外部 server 模式下行为是否一致？</li>
+      <li><b>迁移</b>：存量「emoji + 标题」session 是自动剥离，还是保留双显由用户手动清理？自动标题重生成时是否保留用户手选的 emoji？</li>
+      <li><b>picker 选集</b>：固定精选 32 个（当前原型）/ 分组全量 + 搜索 / 直接唤起系统 emoji 键盘？</li>
+      <li><b>状态优先级</b>：busy（spinner）/ unread（蓝点）与 emoji 槽并存时的层级 —— 原型按「spinner 在更左的 gutter，emoji 槽不让位」演示，需确认。</li>
+      <li><b>设计系统</b>：§icon 的 no-emoji-icon 规则约束的是 UI chrome；session emoji 属于用户内容（同标题文本），建议在该节补一句豁免说明，避免后续误读。</li>
+    </ul>
+  </div>
+</section>
+
+<!-- 共享浮层：picker + kebab 菜单 -->
+<div class="picker" id="picker">
+  <div class="pk-label">设置 Session Emoji</div>
+  <div class="pk-grid" id="pk-grid"></div>
+  <div class="pk-foot">
+    <button class="pk-act danger" id="pk-remove">移除 Emoji</button>
+    <button class="pk-act" id="pk-random">随机一个</button>
+  </div>
+</div>
+
+<div class="menu" id="menu">
+  <button class="mi" data-act="emoji">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8.5 14.5s1 1.5 3.5 1.5 3.5-1.5 3.5-1.5"/><circle cx="9" cy="10" r="0.5" fill="currentColor"/><circle cx="15" cy="10" r="0.5" fill="currentColor"/></svg>
+    设置 Emoji…
+  </button>
+  <button class="mi" data-act="rename">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3l4 4L8 20l-5 1 1-5L17 3z"/></svg>
+    重命名
+  </button>
+  <div class="mi-sep"></div>
+  <button class="mi" data-act="archive">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 001 1h12a1 1 0 001-1V9M10 13h4"/></svg>
+    归档
+  </button>
+</div>
+
+<script>
+/* ============================= 主题 / 页面切换 ============================= */
+document.getElementById('btn-theme').addEventListener('click', () => {
+  const el = document.documentElement;
+  el.dataset.colorScheme = el.dataset.colorScheme === 'light' ? 'dark' : 'light';
+});
+document.querySelectorAll('.topbar .demo-btn[data-page]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.topbar .demo-btn[data-page]').forEach(b => b.classList.toggle('on', b === btn));
+    document.querySelectorAll('.page').forEach(p => p.classList.toggle('on', p.id === 'page-' + btn.dataset.page));
+    closePicker(); closeMenu();
+  });
+});
+
+/* ============================= 行渲染 ============================= */
+/* data-emoji 是唯一状态源；标题文本固定在 data-title，emoji 渲染进各自方案的容器 */
+function renderRow(se) {
+  const e = se.dataset.emoji || '';
+  const title = se.dataset.title || '';
+  const slot = se.querySelector('.es');            // 方案 A 的槽位
+  if (slot) {
+    slot.classList.toggle('has', !!e);
+    slot.querySelector('.em').textContent = e;
+  }
+  const t = se.querySelector('.t');
+  if (t && !slot) {                                // 方案 B / C：emoji 内联进标题
+    t.textContent = '';
+    if (e) {
+      const s = document.createElement('span');
+      s.className = 'e'; s.textContent = e; s.tabIndex = 0;
+      s.setAttribute('role', 'button'); s.setAttribute('aria-label', '更换 Emoji');
+      t.appendChild(s);
+      t.appendChild(document.createTextNode(' '));
+    }
+    t.appendChild(document.createTextNode(title));
+  }
+}
+document.querySelectorAll('.se[data-title]').forEach(renderRow);
+
+/* ============================= Emoji picker ============================= */
+const EMOJIS = ['⏳','⚠️','🐛','✨','🔥','🚀','🎯','🧪','📝','🔍','🛠️','💡','📦','🎨','🔒','📈',
+                '🧹','🚧','✅','❓','🌙','☕','🐳','🗂️','📊','🤖','🧩','⚙️','🌱','📌','💥','🕐'];
+const picker = document.getElementById('picker');
+const pkGrid = document.getElementById('pk-grid');
+const pkRemove = document.getElementById('pk-remove');
+let applyPick = null;
+
+function buildGrid(container) {
+  EMOJIS.forEach(e => {
+    const b = document.createElement('button');
+    b.className = 'pk-e'; b.textContent = e;
+    container.appendChild(b);
+  });
+}
+buildGrid(pkGrid);
+buildGrid(document.querySelector('.pk-grid-sample'));
+
+function openPicker(anchor, current, apply) {
+  applyPick = apply;
+  pkGrid.querySelectorAll('.pk-e').forEach(b => b.classList.toggle('sel', b.textContent === current));
+  pkRemove.style.display = current ? '' : 'none';
+  picker.style.display = 'block';
+  const r = anchor.getBoundingClientRect();
+  const pw = picker.offsetWidth, ph = picker.offsetHeight;
+  let top = r.bottom + 6;
+  if (top + ph > window.innerHeight - 8) top = Math.max(8, r.top - ph - 6);
+  const left = Math.min(Math.max(8, r.left), window.innerWidth - pw - 8);
+  picker.style.top = top + 'px';
+  picker.style.left = left + 'px';
+  setTimeout(() => document.addEventListener('mousedown', onDocDown), 0);
+}
+function closePicker() {
+  picker.style.display = 'none';
+  applyPick = null;
+  document.removeEventListener('mousedown', onDocDown);
+}
+function onDocDown(e) {
+  if (!picker.contains(e.target)) closePicker();
+  if (!menu.contains(e.target)) closeMenu();
+}
+pkGrid.addEventListener('click', e => {
+  const b = e.target.closest('.pk-e');
+  if (!b || !applyPick) return;
+  applyPick(b.textContent);
+  closePicker();
+});
+pkRemove.addEventListener('click', () => { if (applyPick) applyPick(''); closePicker(); });
+document.getElementById('pk-random').addEventListener('click', () => {
+  if (applyPick) applyPick(EMOJIS[Math.floor(Math.random() * EMOJIS.length)]);
+  closePicker();
+});
+
+/* ============================= 方案 C 的 kebab 菜单 ============================= */
+const menu = document.getElementById('menu');
+let menuRow = null;
+function openMenu(anchor, se) {
+  menuRow = se;
+  menu.style.display = 'block';
+  const r = anchor.getBoundingClientRect();
+  const mw = menu.offsetWidth, mh = menu.offsetHeight;
+  let top = r.bottom + 4;
+  if (top + mh > window.innerHeight - 8) top = Math.max(8, r.top - mh - 4);
+  menu.style.top = top + 'px';
+  menu.style.left = Math.max(8, r.right - mw) + 'px';
+  setTimeout(() => document.addEventListener('mousedown', onDocDown), 0);
+}
+function closeMenu() {
+  menu.style.display = 'none';
+  menuRow = null;
+}
+menu.addEventListener('click', e => {
+  const mi = e.target.closest('.mi');
+  if (!mi || !menuRow) return;
+  const se = menuRow;
+  closeMenu();
+  if (mi.dataset.act === 'emoji') {
+    openPicker(se.querySelector('.t .e') || se.querySelector('.t'), se.dataset.emoji, em => {
+      se.dataset.emoji = em; renderRow(se);
+    });
+  }
+  /* rename / archive 在原型中不实现 —— 重点是 emoji 入口 */
+});
+
+/* ============================= 事件委派 ============================= */
+document.addEventListener('click', e => {
+  const se = e.target.closest('.se');
+  if (!se) return;
+  if (e.target.closest('.es, .t .e, .ov')) {       // 三个方案的 emoji 触发点
+    e.stopPropagation();
+    openPicker(e.target.closest('.es, .t .e, .ov'), se.dataset.emoji, em => {
+      se.dataset.emoji = em; renderRow(se);
+    });
+    return;
+  }
+  const kb = e.target.closest('.kb');
+  if (kb) { e.stopPropagation(); openMenu(kb, se); }
+});
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') { closePicker(); closeMenu(); }
+  if (e.key === 'Enter' && e.target.classList && e.target.classList.contains('e')) {
+    const se = e.target.closest('.se');
+    openPicker(e.target, se.dataset.emoji, em => { se.dataset.emoji = em; renderRow(se); });
+  }
+});
+</script>
+</body>
+</html>
diff --git a/packages/web-core/package.json b/packages/web-core/package.json
index 852c8a99d..d78d30e57 100644
--- a/packages/web-core/package.json
+++ b/packages/web-core/package.json
@@ -6,7 +6,8 @@
   "exports": {
     ".": "./src/index.ts",
     "./api": "./src/api/index.ts",
-    "./contracts": "./src/contracts.ts"
+    "./contracts": "./src/contracts.ts",
+    "./lib": "./src/lib/index.ts"
   },
   "peerDependencies": {
     "vue": "^3.5.35"
diff --git a/packages/web-core/src/lib/emojiData.ts b/packages/web-core/src/lib/emojiData.ts
new file mode 100644
index 000000000..18e5522ce
--- /dev/null
+++ b/packages/web-core/src/lib/emojiData.ts
@@ -0,0 +1,478 @@
+// web-core lib/emojiData — the picker's searchable emoji dataset (curated, not
+// the full Unicode set) + the recently-used helper. Every entry must round-trip
+// through splitSessionEmoji's detection — a test asserts exactly that, since
+// anything the picker writes into a title must parse back as the session icon.
+
+export type EmojiGroup = 'faces' | 'nature' | 'food' | 'activity' | 'objects' | 'symbols';
+
+/** Display order of the groups in the picker's rest view. */
+export const EMOJI_GROUPS: readonly EmojiGroup[] = [
+  'faces',
+  'nature',
+  'food',
+  'activity',
+  'objects',
+  'symbols',
+];
+
+/** [emoji, group, keywords] — keywords are lowercase, space-separated, en + zh. */
+const DATA: Array<[string, EmojiGroup, string]> = [
+  // Faces & people
+  ['😀', 'faces', 'grinning smile happy 笑 开心'],
+  ['😄', 'faces', 'smile happy joy 笑 开心 高兴'],
+  ['😁', 'faces', 'grin beaming 咧嘴笑 开心'],
+  ['😂', 'faces', 'joy laugh tears 笑哭 爆笑'],
+  ['🤣', 'faces', 'rofl laugh rolling 笑翻 爆笑'],
+  ['😊', 'faces', 'blush shy happy 微笑 害羞'],
+  ['😉', 'faces', 'wink 眨眼'],
+  ['😍', 'faces', 'heart eyes love 爱心眼 喜欢 爱'],
+  ['🥰', 'faces', 'smiling hearts love 爱心 喜欢'],
+  ['😘', 'faces', 'kiss 飞吻 亲亲'],
+  ['😋', 'faces', 'yum tongue 好吃 馋'],
+  ['🤪', 'faces', 'zany crazy 鬼脸 疯'],
+  ['🤔', 'faces', 'thinking hmm consider 思考 想'],
+  ['🤨', 'faces', 'skeptical eyebrow 怀疑 挑眉'],
+  ['😐', 'faces', 'neutral meh 面无表情 无语'],
+  ['😑', 'faces', 'expressionless 面无表情 无语'],
+  ['🙄', 'faces', 'eye roll 翻白眼 无语'],
+  ['😶', 'faces', 'no mouth silent 无言 沉默'],
+  ['🫡', 'faces', 'salute 敬礼 收到'],
+  ['🤫', 'faces', 'shush quiet 嘘 安静'],
+  ['🤭', 'faces', 'oops giggle 捂嘴 偷笑'],
+  ['😴', 'faces', 'sleeping sleepy 睡觉 困'],
+  ['😪', 'faces', 'sleepy tired 困 疲惫'],
+  ['😷', 'faces', 'mask sick 口罩 生病'],
+  ['🤒', 'faces', 'sick fever 生病 发烧'],
+  ['🤕', 'faces', 'hurt bandage 受伤'],
+  ['🤢', 'faces', 'nauseated 恶心'],
+  ['🤯', 'faces', 'mind blown explode 震惊 爆炸'],
+  ['🥳', 'faces', 'party celebrate 庆祝 派对'],
+  ['🤩', 'faces', 'star struck 星星眼 激动'],
+  ['😎', 'faces', 'cool sunglasses 酷 墨镜'],
+  ['🥸', 'faces', 'disguise 伪装 假扮'],
+  ['🤓', 'faces', 'nerd geek 书呆子 学霸'],
+  ['😢', 'faces', 'cry sad 哭 难过'],
+  ['😭', 'faces', 'sob cry loudly 大哭 痛哭'],
+  ['😤', 'faces', 'triumph huff 哼 生气'],
+  ['😡', 'faces', 'angry rage mad 生气 愤怒'],
+  ['🤬', 'faces', 'swearing cursing 骂人 爆粗'],
+  ['😱', 'faces', 'scream fear 尖叫 害怕'],
+  ['😨', 'faces', 'fearful 害怕 恐惧'],
+  ['🥵', 'faces', 'hot heat 热 出汗'],
+  ['🥶', 'faces', 'cold freezing 冷 冻'],
+  ['🥴', 'faces', 'woozy drunk 晕 醉'],
+  ['😇', 'faces', 'angel innocent 天使 无辜'],
+  ['🙃', 'faces', 'upside down silly 倒脸 哭笑不得'],
+  ['💀', 'faces', 'skull dead 骷髅 笑死'],
+  ['👻', 'faces', 'ghost 鬼 幽灵'],
+  ['👍', 'faces', 'thumbs up like good 赞 好'],
+  ['👎', 'faces', 'thumbs down dislike 踩 差'],
+  ['👏', 'faces', 'clap applause 鼓掌 厉害'],
+  ['🙌', 'faces', 'raise hands celebrate 举手 庆祝'],
+  ['🙏', 'faces', 'pray thanks please 拜托 感谢 祈祷'],
+  ['💪', 'faces', 'muscle strong flex 加油 强壮 肌肉'],
+  ['👀', 'faces', 'eyes look watch 看 围观 眼睛'],
+  ['🤝', 'faces', 'handshake deal 握手 合作'],
+  ['✌️', 'faces', 'victory peace 胜利 耶'],
+  ['👋', 'faces', 'wave hello bye 挥手 你好 再见'],
+  ['🤞', 'faces', 'crossed fingers luck 祈祷 好运'],
+  ['👌', 'faces', 'ok okay 好的 可以'],
+  ['🫶', 'faces', 'heart hands love 比心 爱心'],
+  ['✍️', 'faces', 'writing hand 写字 记录'],
+  ['🧠', 'faces', 'brain smart 大脑 聪明'],
+  ['🦾', 'faces', 'mechanical arm 机械臂 力量'],
+  // Animals & nature
+  ['🐶', 'nature', 'dog puppy 狗 小狗'],
+  ['🐱', 'nature', 'cat kitten 猫 小猫'],
+  ['🐭', 'nature', 'mouse rat 老鼠'],
+  ['🐹', 'nature', 'hamster 仓鼠'],
+  ['🐰', 'nature', 'rabbit bunny 兔子'],
+  ['🦊', 'nature', 'fox 狐狸'],
+  ['🐻', 'nature', 'bear 熊'],
+  ['🐼', 'nature', 'panda 熊猫'],
+  ['🐨', 'nature', 'koala 考拉'],
+  ['🐯', 'nature', 'tiger 老虎'],
+  ['🦁', 'nature', 'lion 狮子'],
+  ['🐮', 'nature', 'cow 牛'],
+  ['🐷', 'nature', 'pig 猪'],
+  ['🐸', 'nature', 'frog 青蛙'],
+  ['🐵', 'nature', 'monkey 猴子'],
+  ['🐔', 'nature', 'chicken 鸡'],
+  ['🐧', 'nature', 'penguin 企鹅'],
+  ['🐦', 'nature', 'bird 鸟'],
+  ['🐣', 'nature', 'chick hatching 小鸡 孵化'],
+  ['🦆', 'nature', 'duck 鸭子'],
+  ['🦉', 'nature', 'owl 猫头鹰'],
+  ['🐝', 'nature', 'bee 蜜蜂'],
+  ['🐛', 'nature', 'bug caterpillar 虫子 毛虫'],
+  ['🦋', 'nature', 'butterfly 蝴蝶'],
+  ['🐌', 'nature', 'snail slow 蜗牛 慢'],
+  ['🐢', 'nature', 'turtle slow 乌龟 慢'],
+  ['🐍', 'nature', 'snake 蛇'],
+  ['🐙', 'nature', 'octopus 章鱼'],
+  ['🦑', 'nature', 'squid 鱿鱼'],
+  ['🦐', 'nature', 'shrimp 虾'],
+  ['🦀', 'nature', 'crab 螃蟹'],
+  ['🐠', 'nature', 'tropical fish 鱼 热带鱼'],
+  ['🐳', 'nature', 'whale 鲸鱼'],
+  ['🦈', 'nature', 'shark 鲨鱼'],
+  ['🐊', 'nature', 'crocodile 鳄鱼'],
+  ['🦄', 'nature', 'unicorn 独角兽'],
+  ['🐴', 'nature', 'horse 马'],
+  ['🐑', 'nature', 'sheep 羊 绵羊'],
+  ['🐐', 'nature', 'goat 山羊'],
+  ['🦜', 'nature', 'parrot 鹦鹉'],
+  ['🌸', 'nature', 'blossom flower sakura 樱花 花'],
+  ['🌹', 'nature', 'rose flower 玫瑰 花'],
+  ['🌻', 'nature', 'sunflower 向日葵'],
+  ['🌷', 'nature', 'tulip 郁金香'],
+  ['🌱', 'nature', 'seedling sprout 发芽 幼苗'],
+  ['🌲', 'nature', 'tree evergreen 树 松树'],
+  ['🌳', 'nature', 'deciduous tree 树 大树'],
+  ['🌵', 'nature', 'cactus 仙人掌'],
+  ['🍀', 'nature', 'clover luck 四叶草 幸运'],
+  ['🍁', 'nature', 'maple leaf autumn 枫叶 秋天'],
+  ['🍄', 'nature', 'mushroom 蘑菇'],
+  ['🌈', 'nature', 'rainbow 彩虹'],
+  ['☀️', 'nature', 'sun sunny 太阳 晴'],
+  ['🌙', 'nature', 'moon crescent 月亮'],
+  ['⭐', 'nature', 'star 星星'],
+  ['🌟', 'nature', 'glowing star 星星 闪亮'],
+  ['☁️', 'nature', 'cloud 云'],
+  ['⛅', 'nature', 'partly cloudy 多云'],
+  ['🌧️', 'nature', 'rain rainy 下雨'],
+  ['❄️', 'nature', 'snowflake snow 雪 雪花'],
+  ['⛄', 'nature', 'snowman 雪人'],
+  ['⚡', 'nature', 'lightning bolt 闪电'],
+  ['🔥', 'nature', 'fire hot 火 燃'],
+  ['🌊', 'nature', 'wave ocean sea 海浪'],
+  ['🏔️', 'nature', 'mountain snow 雪山 山'],
+  // Food & drink
+  ['☕', 'food', 'coffee 咖啡'],
+  ['🍵', 'food', 'tea 茶'],
+  ['🧋', 'food', 'bubble tea boba 奶茶'],
+  ['🥛', 'food', 'milk 牛奶'],
+  ['🍺', 'food', 'beer 啤酒'],
+  ['🍷', 'food', 'wine 红酒'],
+  ['🥂', 'food', 'champagne cheers 香槟 干杯'],
+  ['🥤', 'food', 'cup straw soda 饮料 可乐'],
+  ['🧃', 'food', 'juice box 果汁'],
+  ['🍎', 'food', 'apple 苹果'],
+  ['🍊', 'food', 'orange tangerine 橙子 橘子'],
+  ['🍋', 'food', 'lemon 柠檬'],
+  ['🍉', 'food', 'watermelon 西瓜'],
+  ['🍓', 'food', 'strawberry 草莓'],
+  ['🍑', 'food', 'peach 桃子'],
+  ['🥭', 'food', 'mango 芒果'],
+  ['🍍', 'food', 'pineapple 菠萝'],
+  ['🥝', 'food', 'kiwi 猕猴桃'],
+  ['🍇', 'food', 'grapes 葡萄'],
+  ['🍒', 'food', 'cherries 樱桃'],
+  ['🥑', 'food', 'avocado 牛油果'],
+  ['🥦', 'food', 'broccoli 西兰花'],
+  ['🌽', 'food', 'corn 玉米'],
+  ['🌶️', 'food', 'hot pepper spicy 辣椒 辣'],
+  ['🍔', 'food', 'burger hamburger 汉堡'],
+  ['🍟', 'food', 'fries 薯条'],
+  ['🍕', 'food', 'pizza 披萨'],
+  ['🌭', 'food', 'hot dog 热狗'],
+  ['🥪', 'food', 'sandwich 三明治'],
+  ['🌮', 'food', 'taco 墨西哥卷'],
+  ['🍜', 'food', 'ramen noodles 拉面 面条'],
+  ['🍝', 'food', 'spaghetti pasta 意面'],
+  ['🍣', 'food', 'sushi 寿司'],
+  ['🍱', 'food', 'bento 便当'],
+  ['🥟', 'food', 'dumpling 饺子'],
+  ['🍚', 'food', 'rice 米饭'],
+  ['🍞', 'food', 'bread 面包'],
+  ['🥐', 'food', 'croissant 可颂 牛角包'],
+  ['🧀', 'food', 'cheese 奶酪 芝士'],
+  ['🍳', 'food', 'cooking egg 煎蛋 做饭'],
+  ['🍦', 'food', 'ice cream 冰淇淋'],
+  ['🍰', 'food', 'cake 蛋糕'],
+  ['🎂', 'food', 'birthday cake 生日蛋糕'],
+  ['🍫', 'food', 'chocolate 巧克力'],
+  ['🍩', 'food', 'donut doughnut 甜甜圈'],
+  ['🍪', 'food', 'cookie 饼干'],
+  ['🍭', 'food', 'lollipop 棒棒糖'],
+  // Activity & travel
+  ['⚽', 'activity', 'soccer football 足球'],
+  ['🏀', 'activity', 'basketball 篮球'],
+  ['🏈', 'activity', 'american football 橄榄球'],
+  ['⚾', 'activity', 'baseball 棒球'],
+  ['🎾', 'activity', 'tennis 网球'],
+  ['🏐', 'activity', 'volleyball 排球'],
+  ['🏓', 'activity', 'ping pong 乒乓球'],
+  ['🏸', 'activity', 'badminton 羽毛球'],
+  ['🥊', 'activity', 'boxing 拳击'],
+  ['⛳', 'activity', 'golf 高尔夫'],
+  ['🎣', 'activity', 'fishing 钓鱼'],
+  ['🏊', 'activity', 'swim 游泳'],
+  ['🏄', 'activity', 'surf 冲浪'],
+  ['🚴', 'activity', 'cycling 骑行'],
+  ['🏋️', 'activity', 'weightlifting gym 举重 健身'],
+  ['🧘', 'activity', 'yoga meditation 瑜伽 冥想'],
+  ['🎮', 'activity', 'video game controller 游戏 游戏机'],
+  ['🎲', 'activity', 'dice 骰子'],
+  ['🎯', 'activity', 'target bullseye 目标 靶心'],
+  ['🎳', 'activity', 'bowling 保龄球'],
+  ['🎰', 'activity', 'slot machine 老虎机'],
+  ['♟️', 'activity', 'chess 国际象棋 棋'],
+  ['🎸', 'activity', 'guitar 吉他'],
+  ['🎹', 'activity', 'piano keyboard 钢琴'],
+  ['🥁', 'activity', 'drum 鼓'],
+  ['🎤', 'activity', 'microphone sing 麦克风 唱歌'],
+  ['🎧', 'activity', 'headphones 耳机'],
+  ['🎬', 'activity', 'clapper movie 电影 拍摄'],
+  ['🎨', 'activity', 'art palette paint 画画 艺术'],
+  ['🎭', 'activity', 'theater masks 戏剧 面具'],
+  ['🎪', 'activity', 'circus 马戏团'],
+  ['🎡', 'activity', 'ferris wheel 摩天轮'],
+  ['✈️', 'activity', 'airplane travel flight 飞机 旅行'],
+  ['🚗', 'activity', 'car drive 汽车 车'],
+  ['🚕', 'activity', 'taxi 出租车'],
+  ['🚌', 'activity', 'bus 公交车'],
+  ['🚑', 'activity', 'ambulance 救护车'],
+  ['🚒', 'activity', 'fire engine 消防车'],
+  ['🚀', 'activity', 'rocket launch ship 火箭 发射'],
+  ['🛸', 'activity', 'ufo flying saucer 飞碟'],
+  ['🚲', 'activity', 'bicycle bike 自行车'],
+  ['🛴', 'activity', 'scooter 滑板车'],
+  ['🚄', 'activity', 'bullet train 高铁 动车'],
+  ['🚢', 'activity', 'ship 船 轮船'],
+  ['⛵', 'activity', 'sailboat 帆船'],
+  ['🏠', 'activity', 'house home 房子 家'],
+  ['🏢', 'activity', 'office building 公司 办公楼'],
+  ['🏥', 'activity', 'hospital 医院'],
+  ['🏫', 'activity', 'school 学校'],
+  ['🏖️', 'activity', 'beach vacation 海滩 度假'],
+  ['⛺', 'activity', 'camping tent 露营 帐篷'],
+  ['🌋', 'activity', 'volcano 火山'],
+  ['🗺️', 'activity', 'map world 地图'],
+  ['🧭', 'activity', 'compass 指南针'],
+  // Objects & work
+  ['💻', 'objects', 'laptop computer 电脑 笔记本'],
+  ['🖥️', 'objects', 'desktop computer 台式机 电脑'],
+  ['⌨️', 'objects', 'keyboard 键盘'],
+  ['🖱️', 'objects', 'computer mouse 鼠标'],
+  ['📱', 'objects', 'phone mobile 手机'],
+  ['🔋', 'objects', 'battery 电池'],
+  ['🔌', 'objects', 'plug electric 插头'],
+  ['💾', 'objects', 'floppy save 软盘 保存'],
+  ['📀', 'objects', 'cd disc 光盘'],
+  ['🎥', 'objects', 'movie camera 摄像机'],
+  ['📷', 'objects', 'camera 相机'],
+  ['🔭', 'objects', 'telescope 望远镜'],
+  ['📡', 'objects', 'satellite antenna 卫星 天线'],
+  ['🕯️', 'objects', 'candle 蜡烛'],
+  ['💡', 'objects', 'bulb idea light 灯泡 点子'],
+  ['🔦', 'objects', 'flashlight 手电筒'],
+  ['📁', 'objects', 'folder 文件夹'],
+  ['📂', 'objects', 'open folder 文件夹 打开'],
+  ['🗂️', 'objects', 'card index archive 归档 索引'],
+  ['📅', 'objects', 'calendar date 日历 日期'],
+  ['📌', 'objects', 'pin pushpin 图钉 置顶'],
+  ['📍', 'objects', 'round pin location 定位 位置'],
+  ['📎', 'objects', 'paperclip attachment 回形针 附件'],
+  ['✂️', 'objects', 'scissors cut 剪刀 剪切'],
+  ['📏', 'objects', 'ruler 尺子'],
+  ['📝', 'objects', 'memo note write 备忘 记录'],
+  ['📄', 'objects', 'document page 文档 文件'],
+  ['📃', 'objects', 'page curl 文档 文件'],
+  ['📑', 'objects', 'bookmark tabs 标签页 文档'],
+  ['📚', 'objects', 'books 书 书籍'],
+  ['📖', 'objects', 'open book 打开的书 阅读'],
+  ['🔖', 'objects', 'bookmark 书签'],
+  ['🏷️', 'objects', 'label tag 标签'],
+  ['📊', 'objects', 'bar chart stats 图表 统计'],
+  ['📈', 'objects', 'chart up growth 上涨 增长'],
+  ['📉', 'objects', 'chart down 下跌 下降'],
+  ['🔍', 'objects', 'search magnifier 搜索 查找'],
+  ['🔎', 'objects', 'search magnifier right 搜索 查找'],
+  ['🔒', 'objects', 'lock locked 锁 锁定'],
+  ['🔓', 'objects', 'unlock open 解锁'],
+  ['🔑', 'objects', 'key 钥匙 密钥'],
+  ['🔧', 'objects', 'wrench tool 扳手 工具'],
+  ['🔨', 'objects', 'hammer 锤子'],
+  ['🛠️', 'objects', 'tools hammer wrench 工具 修理'],
+  ['⚙️', 'objects', 'gear settings 齿轮 设置'],
+  ['🧲', 'objects', 'magnet 磁铁'],
+  ['⚗️', 'objects', 'alembic 蒸馏器 实验'],
+  ['🧪', 'objects', 'test tube experiment 实验 试管'],
+  ['🔬', 'objects', 'microscope science 显微镜 科学'],
+  ['🤖', 'objects', 'robot bot 机器人'],
+  ['👾', 'objects', 'alien monster game 外星人 游戏'],
+  ['💣', 'objects', 'bomb 炸弹'],
+  ['🧨', 'objects', 'firecracker 爆竹'],
+  ['🗑️', 'objects', 'trash delete 垃圾桶 删除'],
+  ['🧹', 'objects', 'broom clean 扫帚 清理'],
+  ['🧻', 'objects', 'toilet paper 纸巾'],
+  ['🧽', 'objects', 'sponge 海绵'],
+  ['📦', 'objects', 'package box 包裹 箱子'],
+  ['✉️', 'objects', 'envelope mail 邮件 信封'],
+  ['📮', 'objects', 'mailbox postbox 邮箱'],
+  ['🗳️', 'objects', 'ballot box vote 投票箱 投票'],
+  ['🔗', 'objects', 'link chain 链接 连接'],
+  ['🧩', 'objects', 'puzzle piece plugin 拼图 插件'],
+  ['🪄', 'objects', 'magic wand 魔法 魔杖'],
+  ['🛡️', 'objects', 'shield security 盾牌 安全'],
+  ['⚔️', 'objects', 'crossed swords 交叉剑 战斗'],
+  ['💳', 'objects', 'credit card 信用卡'],
+  ['💰', 'objects', 'money bag 钱袋 钱'],
+  ['🧾', 'objects', 'receipt 收据 小票'],
+  ['📿', 'objects', 'prayer beads 念珠'],
+  ['💍', 'objects', 'ring 戒指'],
+  ['👑', 'objects', 'crown 皇冠'],
+  ['🎩', 'objects', 'top hat 礼帽'],
+  ['🎒', 'objects', 'backpack 背包 书包'],
+  ['👓', 'objects', 'glasses 眼镜'],
+  ['🌂', 'objects', 'umbrella 雨伞'],
+  ['🕰️', 'objects', 'mantel clock 座钟'],
+  ['⌚', 'objects', 'watch 手表'],
+  ['⏱️', 'objects', 'stopwatch 秒表'],
+  ['🧯', 'objects', 'fire extinguisher 灭火器'],
+  // Symbols & status
+  ['✅', 'symbols', 'check done complete 完成 对勾'],
+  ['✔️', 'symbols', 'checkmark correct 对勾 正确'],
+  ['❌', 'symbols', 'cross x wrong 错误 叉'],
+  ['❓', 'symbols', 'question help 问题 问号'],
+  ['❔', 'symbols', 'white question 问题 问号'],
+  ['❗', 'symbols', 'exclamation important 感叹号 重要'],
+  ['❕', 'symbols', 'white exclamation 感叹号'],
+  ['⚠️', 'symbols', 'warning caution 警告 注意'],
+  ['🚧', 'symbols', 'construction wip 施工 进行中'],
+  ['🚫', 'symbols', 'prohibited no 禁止'],
+  ['💥', 'symbols', 'boom explosion 爆炸'],
+  ['✨', 'symbols', 'sparkles shiny 闪亮 星星'],
+  ['🎉', 'symbols', 'tada party celebrate 庆祝 撒花'],
+  ['🎊', 'symbols', 'confetti party 庆祝 彩带'],
+  ['🏆', 'symbols', 'trophy champion 奖杯 冠军'],
+  ['🥇', 'symbols', 'gold medal first 金牌 第一'],
+  ['🥈', 'symbols', 'silver medal second 银牌 第二'],
+  ['🥉', 'symbols', 'bronze medal third 铜牌 第三'],
+  ['🎖️', 'symbols', 'military medal 勋章'],
+  ['🚩', 'symbols', 'red flag mark 红旗 标记'],
+  ['🏁', 'symbols', 'checkered flag finish 终点 完成'],
+  ['⏳', 'symbols', 'hourglass time waiting 沙漏 时间'],
+  ['⌛', 'symbols', 'hourglass done 沙漏 时间'],
+  ['🕐', 'symbols', 'clock one time 时钟 一点'],
+  ['⏰', 'symbols', 'alarm clock 闹钟'],
+  ['🔔', 'symbols', 'bell notification 铃铛 通知'],
+  ['🔕', 'symbols', 'bell slash mute 静音 免打扰'],
+  ['🕹️', 'symbols', 'joystick game 摇杆 游戏'],
+  ['🔴', 'symbols', 'red circle record 红圆 录制'],
+  ['🟢', 'symbols', 'green circle online 绿圆 在线'],
+  ['🟡', 'symbols', 'yellow circle 黄圆'],
+  ['🟠', 'symbols', 'orange circle 橙圆'],
+  ['🔵', 'symbols', 'blue circle 蓝圆'],
+  ['🟣', 'symbols', 'purple circle 紫圆'],
+  ['⚫', 'symbols', 'black circle 黑圆'],
+  ['⚪', 'symbols', 'white circle 白圆'],
+  ['🟥', 'symbols', 'red square 红方'],
+  ['🟩', 'symbols', 'green square 绿方'],
+  ['🟦', 'symbols', 'blue square 蓝方'],
+  ['🔺', 'symbols', 'red triangle up 三角 上'],
+  ['🔻', 'symbols', 'triangle down 三角 下'],
+  ['🔸', 'symbols', 'diamond orange 菱形'],
+  ['🔹', 'symbols', 'diamond blue 菱形'],
+  ['💠', 'symbols', 'diamond dot 菱形 花'],
+  ['🔶', 'symbols', 'diamond orange big 菱形'],
+  ['🔷', 'symbols', 'diamond blue big 菱形'],
+  ['▶️', 'symbols', 'play 播放'],
+  ['⏸️', 'symbols', 'pause 暂停'],
+  ['⏹️', 'symbols', 'stop 停止'],
+  ['⏺️', 'symbols', 'record 录制'],
+  ['⏩', 'symbols', 'fast forward 快进'],
+  ['⏪', 'symbols', 'rewind 快退'],
+  ['🔀', 'symbols', 'shuffle 随机 打乱'],
+  ['🔁', 'symbols', 'repeat 重复 循环'],
+  ['🔂', 'symbols', 'repeat one 单曲循环'],
+  ['🔄', 'symbols', 'refresh sync 刷新 同步'],
+  ['🔃', 'symbols', 'reload 重载'],
+  ['➕', 'symbols', 'plus add 加 新增'],
+  ['➖', 'symbols', 'minus 减'],
+  ['➗', 'symbols', 'divide 除'],
+  ['✖️', 'symbols', 'multiply 乘'],
+  ['💲', 'symbols', 'dollar money 美元 钱'],
+  ['™️', 'symbols', 'trademark 商标'],
+  ['©️', 'symbols', 'copyright 版权'],
+  ['®️', 'symbols', 'registered 注册商标'],
+  ['↔️', 'symbols', 'left right arrow 左右箭头'],
+  ['⬆️', 'symbols', 'up arrow 上箭头'],
+  ['⬇️', 'symbols', 'down arrow 下箭头'],
+  ['➡️', 'symbols', 'right arrow 右箭头'],
+  ['⬅️', 'symbols', 'left arrow 左箭头'],
+  ['🔙', 'symbols', 'back 返回'],
+  ['🔜', 'symbols', 'soon 很快'],
+  ['🔝', 'symbols', 'top 置顶 顶部'],
+  ['💤', 'symbols', 'zzz sleep 睡觉'],
+  ['🆕', 'symbols', 'new 新 新品'],
+  ['🆒', 'symbols', 'cool 酷'],
+  ['🆓', 'symbols', 'free 免费'],
+  ['🆗', 'symbols', 'ok 可以'],
+  ['🆙', 'symbols', 'up 提升'],
+  ['🆚', 'symbols', 'vs versus 对比'],
+  ['♾️', 'symbols', 'infinity 无限'],
+  ['💯', 'symbols', 'hundred perfect 满分 一百'],
+  ['💢', 'symbols', 'anger 生气'],
+  ['♨️', 'symbols', 'hot springs 温泉'],
+  ['🚸', 'symbols', 'children crossing 注意儿童'],
+  ['🔞', 'symbols', 'no one under eighteen 十八禁'],
+  ['📵', 'symbols', 'no mobile phones 禁止手机'],
+  ['❤️', 'symbols', 'red heart love 红心 爱'],
+  ['🧡', 'symbols', 'orange heart 橙心'],
+  ['💛', 'symbols', 'yellow heart 黄心'],
+  ['💚', 'symbols', 'green heart 绿心'],
+  ['💙', 'symbols', 'blue heart 蓝心'],
+  ['💜', 'symbols', 'purple heart 紫心'],
+  ['🖤', 'symbols', 'black heart 黑心'],
+  ['🤍', 'symbols', 'white heart 白心'],
+  ['🤎', 'symbols', 'brown heart 棕心'],
+  ['💔', 'symbols', 'broken heart 心碎'],
+  ['💕', 'symbols', 'two hearts 双心 爱心'],
+  ['💖', 'symbols', 'sparkling heart 闪亮的心'],
+  ['💗', 'symbols', 'growing heart 心动'],
+];
+
+export interface EmojiEntry {
+  emoji: string;
+  group: EmojiGroup;
+  /** Lowercase space-separated keywords; matched by substring. */
+  keywords: string;
+}
+
+export const EMOJI_ENTRIES: readonly EmojiEntry[] = DATA.map(([emoji, group, keywords]) => ({
+  emoji,
+  group,
+  keywords,
+}));
+
+/**
+ * Filter the dataset by a lowercase-insensitive substring of the keywords
+ * (zh or en), capped at `limit` entries in dataset order. An empty query
+ * yields no results — the picker falls back to its grouped grid then.
+ */
+export function searchEmojis(query: string, limit = 24): string[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const out: string[] = [];
+  for (const entry of EMOJI_ENTRIES) {
+    if (entry.keywords.includes(q) || entry.emoji === q) {
+      out.push(entry.emoji);
+      if (out.length >= limit) break;
+    }
+  }
+  return out;
+}
+
+/** Cap on the picker's recently-used row. */
+export const RECENT_EMOJIS_MAX = 8;
+
+/** Prepend `emoji` to the recent list, deduplicated and capped at `max`. */
+export function pushRecentEmoji(
+  list: readonly string[],
+  emoji: string,
+  max = RECENT_EMOJIS_MAX,
+): string[] {
+  return [emoji, ...list.filter((e) => e !== emoji)].slice(0, max);
+}
diff --git a/packages/web-core/src/lib/index.ts b/packages/web-core/src/lib/index.ts
new file mode 100644
index 000000000..9d8b45e8e
--- /dev/null
+++ b/packages/web-core/src/lib/index.ts
@@ -0,0 +1,2 @@
+export * from './emojiData';
+export * from './sessionEmoji';
diff --git a/packages/web-core/src/lib/sessionEmoji.ts b/packages/web-core/src/lib/sessionEmoji.ts
new file mode 100644
index 000000000..a6ffbd81a
--- /dev/null
+++ b/packages/web-core/src/lib/sessionEmoji.ts
@@ -0,0 +1,55 @@
+// web-core lib/sessionEmoji — a session's "icon" is the leading emoji cluster
+// of its title; these helpers are the one parse/write rule for it.
+
+// Constructed lazily: the lib must stay side-effect-free for every importer,
+// and environments without Intl.Segmenter degrade to "no icon" instead of
+// throwing during sidebar rendering.
+let graphemeSegmenter: Intl.Segmenter | undefined;
+
+function graphemes(title: string): Intl.Segments | undefined {
+  if (typeof Intl.Segmenter !== 'function') return undefined;
+  graphemeSegmenter ??= new Intl.Segmenter('und', { granularity: 'grapheme' });
+  return graphemeSegmenter.segment(title);
+}
+
+const EMOJI_PRESENTATION_RE = /\p{Emoji_Presentation}/u;
+const REGIONAL_INDICATOR_RE = /\p{Regional_Indicator}/u;
+const EXTENDED_PICTOGRAPHIC_RE = /\p{Extended_Pictographic}/u;
+const VARIATION_SELECTOR_16 = '\uFE0F';
+
+// Detection is deliberately conservative to avoid false positives on plain
+// text: Emoji_Presentation code points, Regional_Indicator pairs (flags), or
+// Extended_Pictographic + VS16 (⚠️ as typed by OS emoji pickers). Bare ASCII
+// digits / '#' / '*' are Extended_Pictographic but are NOT icons, and neither
+// are text-presentation marks (bare "⚠", "❤") or keycap sequences.
+function isEmojiCluster(cluster: string): boolean {
+  if (EMOJI_PRESENTATION_RE.test(cluster)) return true;
+  if (REGIONAL_INDICATOR_RE.test(cluster)) return true;
+  return EXTENDED_PICTOGRAPHIC_RE.test(cluster) && cluster.includes(VARIATION_SELECTOR_16);
+}
+
+export interface SessionEmojiSplit {
+  /** Leading emoji cluster, or null when the title starts with plain text. */
+  emoji: string | null;
+  /** Title text with the emoji prefix (and one separating run of spaces) removed. */
+  rest: string;
+}
+
+/** Split a session title into its leading emoji icon and the remaining text. */
+export function splitSessionEmoji(title: string): SessionEmojiSplit {
+  const first = graphemes(title)?.[Symbol.iterator]().next().value;
+  if (first === undefined || !isEmojiCluster(first.segment)) return { emoji: null, rest: title };
+  const rest = title.slice(first.index + first.segment.length).replace(/^\s+/, '');
+  return { emoji: first.segment, rest };
+}
+
+/**
+ * Return the title with its emoji prefix replaced / inserted / removed
+ * (`emoji: null`). The title text itself is left untouched.
+ */
+export function applySessionEmoji(title: string, emoji: string | null): string {
+  const { rest } = splitSessionEmoji(title);
+  const next = emoji?.trim() ?? '';
+  if (!next) return rest;
+  return rest ? `${next} ${rest}` : next;
+}
diff --git a/packages/web-core/test/emojiData.test.ts b/packages/web-core/test/emojiData.test.ts
new file mode 100644
index 000000000..97125a210
--- /dev/null
+++ b/packages/web-core/test/emojiData.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import { EMOJI_ENTRIES, pushRecentEmoji, RECENT_EMOJIS_MAX, searchEmojis } from '../src/lib/emojiData';
+import { splitSessionEmoji } from '../src/lib/sessionEmoji';
+
+describe('searchEmojis', () => {
+  it('matches English keywords case-insensitively', () => {
+    expect(searchEmojis('FIRE')).toContain('🔥');
+    expect(searchEmojis('rocket')).toEqual(['🚀']);
+  });
+
+  it('matches Chinese keywords by substring', () => {
+    expect(searchEmojis('咖啡')).toEqual(['☕']);
+    expect(searchEmojis('电脑')).toEqual(expect.arrayContaining(['💻', '🖥️']));
+  });
+
+  it('matches partial keywords', () => {
+    // "chart" is a prefix of both bar-chart and trend entries.
+    const hits = searchEmojis('chart');
+    expect(hits).toEqual(expect.arrayContaining(['📊', '📈', '📉']));
+  });
+
+  it('returns an empty array for an empty query', () => {
+    expect(searchEmojis('')).toEqual([]);
+    expect(searchEmojis('   ')).toEqual([]);
+  });
+
+  it('returns an empty array when nothing matches', () => {
+    expect(searchEmojis('qqqzzz')).toEqual([]);
+  });
+
+  it('caps the results at the limit', () => {
+    expect(searchEmojis('圆', 2)).toHaveLength(2);
+  });
+});
+
+describe('pushRecentEmoji', () => {
+  it('prepends the emoji', () => {
+    expect(pushRecentEmoji(['🐛', '⏳'], '🔥')).toEqual(['🔥', '🐛', '⏳']);
+  });
+
+  it('deduplicates an existing entry to the front', () => {
+    expect(pushRecentEmoji(['🐛', '⏳', '🔥'], '🔥')).toEqual(['🔥', '🐛', '⏳']);
+  });
+
+  it('caps the list at the max', () => {
+    const full = Array.from({ length: RECENT_EMOJIS_MAX }, (_, i) => `e${i}`);
+    const next = pushRecentEmoji(full, '🔥');
+    expect(next).toHaveLength(RECENT_EMOJIS_MAX);
+    expect(next[0]).toBe('🔥');
+    expect(next.at(-1)).toBe(`e${RECENT_EMOJIS_MAX - 2}`);
+  });
+});
+
+describe('EMOJI_ENTRIES', () => {
+  it('every entry round-trips through splitSessionEmoji as the session icon', () => {
+    for (const { emoji } of EMOJI_ENTRIES) {
+      expect(splitSessionEmoji(`${emoji} 标题`).emoji).toBe(emoji);
+    }
+  });
+
+  it('has no duplicate entries', () => {
+    const all = EMOJI_ENTRIES.map((e) => e.emoji);
+    expect(new Set(all).size).toBe(all.length);
+  });
+});
diff --git a/packages/web-core/test/sessionEmoji.test.ts b/packages/web-core/test/sessionEmoji.test.ts
new file mode 100644
index 000000000..3c00f7d04
--- /dev/null
+++ b/packages/web-core/test/sessionEmoji.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import { applySessionEmoji, splitSessionEmoji } from '../src/lib/sessionEmoji';
+
+describe('splitSessionEmoji', () => {
+  it('returns null emoji for plain titles', () => {
+    expect(splitSessionEmoji('做一个 desktop 的需求')).toEqual({
+      emoji: null,
+      rest: '做一个 desktop 的需求',
+    });
+  });
+
+  it('splits a leading emoji and its separating space', () => {
+    expect(splitSessionEmoji('⏳ 做一个 desktop 的需求')).toEqual({
+      emoji: '⏳',
+      rest: '做一个 desktop 的需求',
+    });
+  });
+
+  it('handles VS16 sequences (⚠️ = U+26A0 U+FE0F) as one emoji', () => {
+    const { emoji, rest } = splitSessionEmoji('⚠️ 排查一个 bug');
+    expect(emoji).toBe('⚠️');
+    expect(rest).toBe('排查一个 bug');
+  });
+
+  it('handles ZWJ sequences as a single cluster', () => {
+    const { emoji, rest } = splitSessionEmoji('👨‍👩‍👧 家庭事项');
+    expect(emoji).toBe('👨‍👩‍👧');
+    expect(rest).toBe('家庭事项');
+  });
+
+  it('handles flags (Regional_Indicator pairs)', () => {
+    const { emoji, rest } = splitSessionEmoji('🇨🇳 本地化');
+    expect(emoji).toBe('🇨🇳');
+    expect(rest).toBe('本地化');
+  });
+
+  it('returns an empty rest for emoji-only titles', () => {
+    expect(splitSessionEmoji('⏳')).toEqual({ emoji: '⏳', rest: '' });
+  });
+
+  it('strips a run of spaces after the emoji', () => {
+    expect(splitSessionEmoji('🔥   紧急')).toEqual({ emoji: '🔥', rest: '紧急' });
+  });
+
+  it('does not treat ASCII digits as emoji (Extended_Pictographic false positive)', () => {
+    expect(splitSessionEmoji('2 个 bug')).toEqual({ emoji: null, rest: '2 个 bug' });
+    expect(splitSessionEmoji('# 标签')).toEqual({ emoji: null, rest: '# 标签' });
+  });
+
+  it('does not treat text-presentation marks without VS16 as icons', () => {
+    const title = '⚠ 裸警告符';
+    expect(splitSessionEmoji(title)).toEqual({ emoji: null, rest: title });
+  });
+
+  it('leaves titles with leading whitespace untouched', () => {
+    const title = ' ⏳ 前导空格';
+    expect(splitSessionEmoji(title)).toEqual({ emoji: null, rest: title });
+  });
+
+  it('handles empty titles', () => {
+    expect(splitSessionEmoji('')).toEqual({ emoji: null, rest: '' });
+  });
+
+  it('degrades to "no icon" when Intl.Segmenter is unavailable', () => {
+    const original = Intl.Segmenter;
+    // @ts-expect-error deliberately simulating a webview without the API
+    Intl.Segmenter = undefined;
+    try {
+      expect(splitSessionEmoji('⏳ 标题')).toEqual({ emoji: null, rest: '⏳ 标题' });
+      expect(applySessionEmoji('⏳ 标题', '🔥')).toBe('🔥 ⏳ 标题');
+    } finally {
+      Intl.Segmenter = original;
+    }
+  });
+});
+
+describe('applySessionEmoji', () => {
+  it('prepends an emoji to a plain title', () => {
+    expect(applySessionEmoji('新标题', '🎯')).toBe('🎯 新标题');
+  });
+
+  it('replaces an existing emoji', () => {
+    expect(applySessionEmoji('⏳ 旧', '🔥')).toBe('🔥 旧');
+  });
+
+  it('removes the emoji when null', () => {
+    expect(applySessionEmoji('⏳ 旧', null)).toBe('旧');
+  });
+
+  it('is a no-op when removing from a plain title', () => {
+    expect(applySessionEmoji('旧', null)).toBe('旧');
+  });
+
+  it('does not emit a trailing space when the text is empty', () => {
+    expect(applySessionEmoji('⏳', '🔥')).toBe('🔥');
+    expect(applySessionEmoji('', '⏳')).toBe('⏳');
+  });
+
+  it('round-trips through splitSessionEmoji', () => {
+    for (const [title, emoji] of [
+      ['做一个 desktop 的需求', '🎨'],
+      ['⏳ 旧', '🇨🇳'],
+      ['⚠️ 排查 bug', '✨'],
+    ] as const) {
+      const next = applySessionEmoji(title, emoji);
+      expect(splitSessionEmoji(next)).toEqual({ emoji, rest: splitSessionEmoji(title).rest });
+    }
+  });
+});
diff --git a/packages/web-i18n/src/locales/en/sidebar.ts b/packages/web-i18n/src/locales/en/sidebar.ts
index 45f1d98ea..a254f3f76 100644
--- a/packages/web-i18n/src/locales/en/sidebar.ts
+++ b/packages/web-i18n/src/locales/en/sidebar.ts
@@ -15,6 +15,19 @@ export default {
   archiveConfirm: 'Archive this session? You can restore it later from Settings.',
   options: 'Options',
   rename: 'Rename',
+  setEmoji: 'Set Emoji…',
+  sessionEmojiTitle: 'Pick an emoji',
+  removeEmoji: 'Remove emoji',
+  randomEmoji: 'Random',
+  searchEmoji: 'Search emoji',
+  recentEmojis: 'Recently used',
+  noEmojiResults: 'No matching emoji',
+  emojiGroupFaces: 'Smileys & People',
+  emojiGroupNature: 'Animals & Nature',
+  emojiGroupFood: 'Food & Drink',
+  emojiGroupActivity: 'Activities & Travel',
+  emojiGroupObjects: 'Objects & Work',
+  emojiGroupSymbols: 'Symbols & Status',
   copyPath: 'Copy path',
   copySessionId: 'Copy session ID',
   copied: 'Copied ✓',
diff --git a/packages/web-i18n/src/locales/zh/sidebar.ts b/packages/web-i18n/src/locales/zh/sidebar.ts
index 9244532df..b9ef63b09 100644
--- a/packages/web-i18n/src/locales/zh/sidebar.ts
+++ b/packages/web-i18n/src/locales/zh/sidebar.ts
@@ -15,6 +15,19 @@ export default {
   archiveConfirm: '确认归档会话？归档后可以从「设置」中恢复',
   options: '选项',
   rename: '重命名',
+  setEmoji: '设置 Emoji…',
+  sessionEmojiTitle: '选择 Emoji',
+  removeEmoji: '移除 Emoji',
+  randomEmoji: '随机',
+  searchEmoji: '搜索 Emoji',
+  recentEmojis: '最近使用',
+  noEmojiResults: '没有匹配的 Emoji',
+  emojiGroupFaces: '笑脸与人物',
+  emojiGroupNature: '动物与自然',
+  emojiGroupFood: '美食饮品',
+  emojiGroupActivity: '活动与出行',
+  emojiGroupObjects: '物品与工作',
+  emojiGroupSymbols: '符号与状态',
   copyPath: '复制路径',
   copySessionId: '复制 Session ID',
   copied: '已复制 ✓',
diff --git a/packages/web-ui/src/components/ui/Menu.vue b/packages/web-ui/src/components/ui/Menu.vue
index befb1bd83..44e99934a 100644
--- a/packages/web-ui/src/components/ui/Menu.vue
+++ b/packages/web-ui/src/components/ui/Menu.vue
@@ -4,6 +4,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+// `menu` for action lists (the default); `dialog` for popovers whose content
+// isn't menuitems (search inputs, grids — e.g. SessionEmojiPicker).
+withDefaults(defineProps<{ role?: 'menu' | 'dialog' }>(), { role: 'menu' });
+
 // Expose the panel element so call sites can anchor / outside-click against the
 // menu surface (positioning is intentionally left to the consumer).
 const el = ref<HTMLElement>();
@@ -11,7 +15,7 @@ defineExpose({ el });
 </script>
 
 <template>
-  <div ref="el" class="ui-menu" role="menu">
+  <div ref="el" class="ui-menu" :role="role">
     <slot />
   </div>
 </template>
diff --git a/packages/web-ui/src/components/ui/MenuItem.vue b/packages/web-ui/src/components/ui/MenuItem.vue
index 9397f7780..e1b112f3b 100644
--- a/packages/web-ui/src/components/ui/MenuItem.vue
+++ b/packages/web-ui/src/components/ui/MenuItem.vue
@@ -8,7 +8,9 @@ withDefaults(defineProps<{
   separator?: boolean;
   /** md (desktop) · lg (touch / mobile, ≥44px row). */
   size?: 'md' | 'lg';
-}>(), { size: 'md' });
+  /** `menuitem` inside a Menu (default); `button` in non-menu popovers (e.g. dialogs). */
+  role?: 'menuitem' | 'button';
+}>(), { size: 'md', role: 'menuitem' });
 
 defineEmits<{ click: [event: MouseEvent] }>();
 </script>
@@ -20,7 +22,7 @@ defineEmits<{ click: [event: MouseEvent] }>();
     class="ui-menu-item"
     :class="[`ui-menu-item--${size}`, { 'is-active': active, 'is-danger': danger }]"
     type="button"
-    role="menuitem"
+    :role="role"
     :disabled="disabled"
     @click="$emit('click', $event)"
   >