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（中英双语）记录共享宽度轴与容器查询的设计取舍。
2026-08-04 14:14:12 +08:00
parent b978c62a22
commit 92dd231ce4
46 changed files with 893 additions and 327 deletions
--- a/packages/client/ui-primitives/src/Tooltip.module.css
+++ b/packages/client/ui-primitives/src/Tooltip.module.css
@@ -1,6 +1,6 @@
 /* Visual spec mirrors deepsuite @deepseek/ui Tooltip.css (size m, no arrow),
-   except padding tightened 6/12 -> 4/8 and radius 10 -> 8 by product ruling:
-   tooltip-bg plate,
+   except padding tightened 6/12 -> 3/7, type 14/22 -> 13/20, and radius
+   10 -> 8 by product ruling: tooltip-bg plate,
   one text color across both themes (the plate stays dark in light and dark
   mode). Behavior (fixed positioning off the anchor rect) is local — the
   upstream Floating stack is intentionally not vendored. */
@@ -8,13 +8,20 @@
 .bubble {
  position: fixed;
  z-index: 100;
-  padding: 4px 8px;
+  /* Fixed-position shrink-to-fit measures only the space from `left` to the
+     viewport edge, so anchors near the right edge would wrap early;
+     max-content sizes by the label alone, capped at half the viewport. */
+  width: max-content;
+  max-width: 50vw;
+  padding: 3px 7px;
  border-radius: 8px;
  background: var(--dsw-alias-tooltip-bg);
  color: var(--dsw-static-neutral-bluish-00);
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 13px;
+  line-height: 20px;
  white-space: pre-line;
+  /* Unbreakable tokens (URLs, paths) must not push past max-width. */
+  overflow-wrap: break-word;
  pointer-events: none;
  animation: tooltip-in 150ms var(--ds-ease-in-out);
 }
@@ -27,6 +34,10 @@
  transform: translateX(-50%);
 }

+.bubble[data-side='top'] {
+  transform: translate(-50%, -100%);
+}
+
@keyframes tooltip-in {
  from { opacity: 0; }
 }
--- a/packages/client/ui-primitives/src/Tooltip.tsx
+++ b/packages/client/ui-primitives/src/Tooltip.tsx
@@ -1,18 +1,19 @@
 // Hover/focus label bubble (figma tooltip pill: dark plate, white text).
-// TODO: interaction is a placeholder (no flip on viewport collision or
-// arrow) — visuals and behavior get a proper pass later.
+// TODO: interaction is a placeholder (horizontal overflow clamps, but there
+// is no vertical flip on viewport collision and no arrow) — visuals and
+// behavior get a proper pass later.
 // The anchor is the child element itself (cloneElement, no wrapper node), so
 // attaching a tooltip never changes the anchor's layout context. The bubble is
 // position:fixed and coordinates come from the anchor's rect at show time, so
 // it escapes ancestor overflow clipping (the sidebar rail clips its column)
 // without a portal.

-import { cloneElement, useCallback, useEffect, useRef, useState } from 'react'
+import { cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { FocusEventHandler, MouseEventHandler, MutableRefObject, ReactElement, Ref } from 'react'
 import css from './Tooltip.module.css'

 /** Bubble placement relative to the anchor. */
-export type TooltipSide = 'right' | 'bottom'
+export type TooltipSide = 'right' | 'bottom' | 'top'

 /** Props Tooltip injects into its anchor child; the child's own handlers are chained ahead of the tooltip's. */
 interface AnchorProps {
@@ -44,6 +45,21 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
    else if (childRef != null) (childRef as MutableRefObject<HTMLElement | null>).current = el
  }, [childRef])
  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const bubble = useRef<HTMLSpanElement | null>(null)
+  // Horizontal viewport clamp: fixed positioning knows nothing about edges, so
+  // a centered bubble near the right edge would clip. Measured after paint and
+  // written straight to the style (no state), so it cannot re-trigger itself.
+  // EDGE_MARGIN keeps the bubble 12px off the viewport edges instead of flush.
+  useLayoutEffect(() => {
+    const el = bubble.current
+    if (el === null || pos === null) return
+    const EDGE_MARGIN = 12
+    const r = el.getBoundingClientRect()
+    let dx = 0
+    if (r.right > window.innerWidth - EDGE_MARGIN) dx = window.innerWidth - EDGE_MARGIN - r.right
+    if (r.left + dx < EDGE_MARGIN) dx = EDGE_MARGIN - r.left
+    if (dx !== 0) el.style.left = `${pos.x + dx}px`
+  }, [pos])
  const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
  // Hover and focus are independent triggers: the bubble hides only after
  // BOTH clear (hovering away from a focused anchor must not drop it).
@@ -73,7 +89,9 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
    const r = el.getBoundingClientRect()
    setPos(side === 'right'
      ? { x: r.right + 10, y: r.top + r.height / 2 }
-      : { x: r.left + r.width / 2, y: r.bottom + 8 })
+      : side === 'top'
+        ? { x: r.left + r.width / 2, y: r.top - 8 }
+        : { x: r.left + r.width / 2, y: r.bottom + 8 })
  }
  const showAfterHoverDelay = () => {
    cancelShow()
@@ -101,7 +119,7 @@ export function Tooltip({ label, side = 'right', delayMs = 0, disabled = false,
        onBlur: (e) => { children.props.onBlur?.(e); triggers.current.focus = false; hide() },
      })}
      {pos !== null && (
-        <span className={css.bubble} data-side={side} style={{ left: pos.x, top: pos.y }} role="tooltip">
+        <span ref={bubble} className={css.bubble} data-side={side} style={{ left: pos.x, top: pos.y }} role="tooltip">
          {label}
        </span>
      )}
--- a/packages/client/ui-primitives/src/icons/index.tsx
+++ b/packages/client/ui-primitives/src/icons/index.tsx
@@ -675,6 +675,26 @@ export const IconDataOutline16 = ({ size = 16, className }: IconProps) => (
  </svg>
 )

+/** ic_send_outline_14 (figma extract): thin-stroke upward send arrow. */
+export const IconSendOutline14 = ({ size = 14, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.24707 1.01771C7.52897 1.07653 7.77619 1.19694 8.00391 1.38001C8.19202 1.53136 8.39884 1.73784 8.61914 1.95814L12.6396 5.9806L11.6299 6.99134L7.71484 3.0763V13.0001H6.28516V3.0763L2.36914 6.99134L1.35938 5.9806L5.38086 1.95814C5.60116 1.73784 5.80798 1.53136 5.99609 1.38001C6.19476 1.22027 6.4385 1.06739 6.75195 1.01771C6.91296 0.992304 7.07471 0.997504 7.24707 1.01771Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+/** ic_queue_outline_14 (figma extract): open chat bubble with two queued lines. */
+export const IconQueueOutline14 = ({ size = 14, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.00049 0.199829C3.24488 0.199829 0.199952 3.24408 0.199707 6.99963C0.199707 8.0414 0.434087 9.03061 0.854004 9.91467L1.11279 10.4576L2.19775 9.94202L1.94092 9.39905L1.81787 9.12268C1.5498 8.46885 1.40186 7.75171 1.40186 6.99963C1.4021 3.90808 3.90888 1.40198 7.00049 1.40198C10.0919 1.40219 12.5979 3.90821 12.5981 6.99963C12.5981 10.0913 10.0921 12.5981 7.00049 12.5983C6.36734 12.5983 5.90348 12.5535 5.49268 12.4401C5.08803 12.3283 4.7041 12.1414 4.24463 11.8209C3.57111 11.3511 2.60588 11.1855 1.81006 11.6881L1.79736 11.6959L1.78467 11.7047L1.25537 12.0778L1.65381 13.2672L2.46045 12.6989C2.75029 12.5214 3.18004 12.5442 3.55615 12.8063C4.10063 13.1861 4.60863 13.4423 5.17334 13.5983C5.73194 13.7525 6.31665 13.8004 7.00049 13.8004C10.7561 13.8002 13.8003 10.7553 13.8003 6.99963C13.8 3.24421 10.7559 0.200041 7.00049 0.199829ZM3.81201 7.47327V8.67542H7.11572V7.47327H3.81201ZM3.81201 6.34924H10.2173V5.14709H3.81201V6.34924Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
 /** ic_checklist_outline_14 (figma extract): two rings + two list bars. */
 export const IconChecklistOutline14 = ({ size = 14, className }: IconProps) => (
  <svg width={size} height={size} className={className} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -703,7 +723,30 @@ export const IconListPenOutline16 = ({ size = 16, className }: IconProps) => (
  </svg>
 )

-/** sparkle_16 (Others tool-row / goal strip leading glyph; hand-authored three-star
+/** ic_ds_goal_outline_16 (goal strip leading glyph: dartboard with a landed arrow) */
+export const IconGoalOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_1498_30899)">
+      <path
+        d="M8 0C8.31451 0 8.62464 0.019379 8.92969 0.0546875C8.48228 0.403371 8.0952 0.825758 7.78809 1.30469C4.18586 1.41664 1.2998 4.37061 1.2998 8C1.2998 11.7003 4.29969 14.7002 8 14.7002C11.6297 14.7002 14.5829 11.8136 14.6943 8.21094C15.1734 7.90377 15.5956 7.51688 15.9443 7.06934C15.9797 7.37473 16 7.68512 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM7.0166 3.6084C7.00658 3.73765 7 3.86817 7 4C7 4.31845 7.03098 4.62973 7.08789 4.93164C5.76489 5.32438 4.7998 6.54958 4.7998 8C4.7998 9.76731 6.23269 11.2002 8 11.2002C9.45065 11.2002 10.6749 10.2345 11.0674 8.91113C11.3696 8.96818 11.6812 9 12 9C12.1315 9 12.2617 8.99239 12.3906 8.98242C11.9423 10.995 10.1477 12.5 8 12.5C5.51472 12.5 3.5 10.4853 3.5 8C3.5 5.85255 5.00435 4.05702 7.0166 3.6084Z"
+        fill="currentColor"
+      />
+      <path d="M7.5 8.62109L9.12109 7" stroke="currentColor" strokeWidth="1.3" />
+      <path
+        d="M9.08245 3.35798L11.8651 0.575334C11.895 0.545384 11.9463 0.56391 11.9502 0.606086L12.2362 3.69859C12.2384 3.72259 12.2574 3.74159 12.2814 3.74378L15.3697 4.02583C15.4119 4.02968 15.4305 4.08101 15.4005 4.11098L12.618 6.89351C12.6086 6.90289 12.5959 6.90816 12.5826 6.90816L9.11781 6.90815C9.09019 6.90816 9.06781 6.88577 9.06781 6.85816L9.06781 3.39333C9.06781 3.38007 9.07308 3.36735 9.08245 3.35798Z"
+        stroke="currentColor"
+        strokeWidth="1.3"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1498_30899">
+        <rect width={16} height={16} fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+/** sparkle_16 (Others tool-row leading glyph; hand-authored three-star
 *  approximation — the figma 43:31850 glyph is an SF Symbols "sparkles" text glyph,
 *  not extractable as vector data) */
 export const IconSparkle16 = ({ size = 16, className }: IconProps) => (