polish(web): 打磨 Web 会话界面的布局、自适应与组件一致性

1. 统一会话列宽度轴：新增 --dsh-chat-content-width（748px），输入框、todo、goal、queue、approval、plan review、ask question 等容器的宽度与边距全部由该变量推导，消除各面板之间的像素漂移，窄视口下的边缘留白也保持一致。
2. 输入框自适应与细节：控制行改为容器查询（460px 阈值以下权限选择器只显示图标+下拉，隐藏文字）；卡片圆角 20→22、行内边距调整并整体下移 2px（发送按钮除外）；permission/model 触发器统一 24px 圆角；Plan 与 Read Only 间距 +8。
3. 修复浮层菜单溢出：slash 菜单与命令弹层钳制到输入卡片宽度，超长行以省略号截断；Tooltip 增加 12px 视口边缘安全距离。
4. 增加与替换图标：Add provider 改用输入框同款加号图标（IconPlusOutline16），统一图标尺寸与字号。
5. 统一 Settings → Models 组件：补齐按钮 hover 态、select 下拉箭头不再贴边、标题区与 provider 卡片间距 +12。
6. 侧边栏交互：add workspace / group by / create session / 收起侧边栏四个图标按钮增加 500ms 延迟 tooltip（前两个向下弹出）；展开态的 New Session 不再重复显示 tooltip；侧边栏窄屏自适应收起逻辑微调。
7. 其他：hero 区 workspace 徽章右移对齐；附带 Agent Note（中英双语）记录共享宽度轴与容器查询的设计取舍。

packages/client/ui-goal/src/client/GoalBar.module.css

@@ -1,5 +1,6 @@
 /* GoalBar: the second standalone card in the composer context stack (Figma
-   1236:32276). Its 752px column matches Todo and the Queue panel. */
+   1236:32276). Its dock column (card cap minus four insets) matches Todo and
+   the Queue panel. */
 
 .dock {
   box-sizing: border-box;
@@ -21,12 +22,12 @@
   align-items: center;
   gap: 10px;
   width: 100%;
-  max-width: 752px;
+  max-width: calc(var(--dsh-composer-card-max-width) - 4 * var(--dsh-composer-dock-inset));
   height: 36px;
   margin: 0 auto;
   padding: 4px 5px 4px 12px;
   border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--dsw-specific-tip);
 }
 
@@ -36,12 +37,14 @@
   color: var(--dsw-alias-label-tertiary);
 }
 
+/* Matches the Todo/Queue panel titles (13/24 medium, primary) so the three
+   composer-stack cards read as one family. */
 .label {
   flex: none;
   font-size: 13px;
-  line-height: 20px;
+  line-height: 24px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary-dimmed);
+  color: var(--dsw-alias-label-primary);
 }
 
 .objective {

packages/client/ui-goal/src/client/GoalBar.tsx

@@ -1,6 +1,6 @@
 /**
  * GoalBar: the goal indicator docked above the message composer (input dock
- * strip). A present goal shows a sparkle, a phase label, the truncated
+ * strip). A present goal shows a goal glyph, a phase label, the truncated
  * objective, and icon actions — resume when paused, edit (inline form in the
  * same strip), and clear. Goal creation lives on the `/goal` command, not
  * here: loading (undefined), no goal (null), and complete goals render
@@ -11,7 +11,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { GoalSnapshot } from '@deepseek-ai/dsh-goal/client'
 import {
-  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPauseOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
+  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconGoalOutline16,
+  IconPauseOutline16, IconPlayOutline16, IconTrashOutline16, Tooltip,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { GoalActionResult, GoalBarActions } from './slots.ts'
@@ -94,26 +95,28 @@ export function GoalBar({ goal, onEdit, onPause, onResume, onClear, t }: GoalBar
           />
           {actionError !== null && <span className={css.error} role="alert">{actionError}</span>}
           <div className={css.actions}>
-            <button
-              type="button"
-              className={css.iconBtn}
-              onClick={() => { void handleEdit() }}
-              disabled={pending || draft.trim() === ''}
-              title={t('action.save')}
-              aria-label={t('action.save')}
-            >
-              <IconCheckOutline16 />
-            </button>
-            <button
-              type="button"
-              className={css.iconBtn}
-              onClick={() => { setEditing(false) }}
-              disabled={pending}
-              title={t('action.cancel')}
-              aria-label={t('action.cancel')}
-            >
-              <IconCloseOutline16 />
-            </button>
+            <Tooltip label={t('action.save')} side="bottom" delayMs={500}>
+              <button
+                type="button"
+                className={css.iconBtn}
+                onClick={() => { void handleEdit() }}
+                disabled={pending || draft.trim() === ''}
+                aria-label={t('action.save')}
+              >
+                <IconCheckOutline16 size={14} />
+              </button>
+            </Tooltip>
+            <Tooltip label={t('action.cancel')} side="bottom" delayMs={500}>
+              <button
+                type="button"
+                className={css.iconBtn}
+                onClick={() => { setEditing(false) }}
+                disabled={pending}
+                aria-label={t('action.cancel')}
+              >
+                <IconCloseOutline16 size={14} />
+              </button>
+            </Tooltip>
           </div>
         </div>
       </div>
@@ -124,34 +127,41 @@ export function GoalBar({ goal, onEdit, onPause, onResume, onClear, t }: GoalBar
   return (
     <div className={css.dock} data-goal-bar>
       <div className={css.bar} title={title}>
-        <span className={css.sparkle}><IconSparkle16 /></span>
+        <span className={css.sparkle}><IconGoalOutline16 size={14} /></span>
         <span className={css.label}>{t(PHASE_LABELS[goal.phase])}</span>
         <span className={css.objective}>{goal.objective}</span>
         {actionError !== null && <span className={css.error} role="alert">{actionError}</span>}
         <div className={css.actions}>
           {goal.phase === 'active' && (
-            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onPause) }} title={t('action.pause')} aria-label={t('action.pause')}>
-              <IconPauseOutline16 />
-            </button>
+            <Tooltip label={t('action.pause')} side="bottom" delayMs={500}>
+              <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onPause) }} aria-label={t('action.pause')}>
+                <IconPauseOutline16 size={14} />
+              </button>
+            </Tooltip>
           )}
           {goal.phase === 'paused' && (
-            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} title={t('action.resume')} aria-label={t('action.resume')}>
-              <IconPlayOutline16 />
-            </button>
+            <Tooltip label={t('action.resume')} side="bottom" delayMs={500}>
+              <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} aria-label={t('action.resume')}>
+                <IconPlayOutline16 size={14} />
+              </button>
+            </Tooltip>
           )}
-          <button
-            type="button"
-            className={css.iconBtn}
-            disabled={pending}
-            onClick={() => { setDraft(goal.objective); setEditing(true) }}
-            title={t('action.edit')}
-            aria-label={t('action.edit')}
-          >
-            <IconEditOutline16 />
-          </button>
-          <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void handleClear(goal.id) }} title={t('action.clear')} aria-label={t('action.clear')}>
-            <IconTrashOutline16 />
-          </button>
+          <Tooltip label={t('action.edit')} side="bottom" delayMs={500}>
+            <button
+              type="button"
+              className={css.iconBtn}
+              disabled={pending}
+              onClick={() => { setDraft(goal.objective); setEditing(true) }}
+              aria-label={t('action.edit')}
+            >
+              <IconEditOutline16 size={14} />
+            </button>
+          </Tooltip>
+          <Tooltip label={t('action.clear')} side="bottom" delayMs={500}>
+            <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void handleClear(goal.id) }} aria-label={t('action.clear')}>
+              <IconTrashOutline16 size={14} />
+            </button>
+          </Tooltip>
         </div>
       </div>
     </div>