DeepSeek/deepseek-harness
1
0
Fork 0
mirror of https://github.com/deepseek-ai/deepseek-harness synced 2026-08-15 21:04:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1389 from deepseek-harness/fix/UI-polish-pack

Browse Source 
Fix/UI polish pack
This commit is contained in:
imccyu
2026-08-04 17:31:06 +08:00
committed by GitHub
parent 11bad56fc3 69d5a83b87
commit 7f3ea406e1
63 changed files with 1043 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.agents/notes/implemented/feature/2026-08-04-web-composer-shared-width-axis.i18n.yaml Normal file
View File

@@ -0,0 +1,6 @@
# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
# side as of the last confirmed-consistent state. Both languages carry equal authority;
# after editing either side, bring the other along and re-record with:
# pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-08-04-web-composer-shared-width-axis.md
2026-08-04-web-composer-shared-width-axis.md: 96cddda25bf79e9f2df7a0298039c27f316befca
2026-08-04-web-composer-shared-width-axis.zh.md: 9a9f5a513bbce8f3e97698d58ab48b0abdefb142

31
.agents/notes/implemented/feature/2026-08-04-web-composer-shared-width-axis.md Normal file
View File

@@ -0,0 +1,31 @@
# Agent Note: Web composer shared width axis and control-row polish
Status: implemented
English | [中文](2026-08-04-web-composer-shared-width-axis.zh.md)
## Problem
The web conversation column sized each surface independently: the transcript column, the input card, the todo/goal/queue dock cards, and the ask-question/approval/plan-review takeover cards each carried their own hardcoded max-width (736/752/776/800px variants) and their own side paddings. The surfaces drifted a few pixels apart at full width and diverged further on narrow viewports, where some panels kept clearance from the screen edge and others went flush. Separately, the composer's control row had no adaptive behavior — on a narrow card the permission trigger's label squeezed the row — and the overlay menus anchored to the card could render wider than the card itself, painting past its right edge.
## Decision
One content width variable owns the whole column. `--dsh-chat-content-width` (748px) is declared on ConversationRoot's `.root` — the transcript and the composer seat are sibling subtrees, so the declaration must sit on their common ancestor for CSS custom-property inheritance to reach both. Every other geometry derives from it: the input card caps at `content + 32px` (`--dsh-composer-card-max-width`), the dock cards subtract four dock insets (4 × 8px) from the card and land back on the content width, and the takeover cards use the content width directly. The narrow-viewport invariant is expressed structurally, not numerically: content-width surfaces pad `calc(var(--dsh-composer-side-clearance) + 16px)` per side while the input card clears the bare clearance (16px), so "input card = content + 32px" holds at every viewport width, not just at the cap.
The control row inside the card is a `container-type: inline-size` container, and the permission trigger drops its text label (keeping glyph + chevron) under a 460px container query. The query is anonymous on purpose: CSS modules hash `container-name` per module, so a name declared in InputBar's sheet can never match a query written in PermissionSelect's sheet — the two hashed names silently differ and the query never fires. Only triggers that carry a mode glyph collapse (`:has(.triggerIcon)`); a host-configured mode without one keeps its text as its sole identifier.
Overlay menus anchored to the card (slash menu, command popupSelect) clamp to the anchor's width (`max-width: min(<design cap>, 100%)`), truncating long rows with ellipses instead of overflowing the card. Tooltip bubbles keep a 12px viewport-edge safety margin in the clamp (ui-primitives Tooltip).
## Alternatives considered
**Keep per-surface widths and align the numbers by hand.** Rejected: the drift this change removes was exactly the residue of hand-aligned constants; any future width change would need five coordinated edits with nothing enforcing the relation.
**Declare the variables on `.composerStack`.** Rejected after trying it: the takeover panels are siblings of the stack in the composer seat and the transcript is a different subtree entirely, so the variables never reached them; the common ancestor (`.root`) is the only correct home.
**A named container query for the label collapse.** Rejected by measurement: CSS modules scope `container-name` per module, so the cross-module name never matched and the query was dead. The anonymous query resolves against the nearest ancestor container, which is unambiguous here (the row is the only container).
**JS ResizeObserver for the label collapse.** Rejected: a container query is declarative, needs no listener lifecycle, and the 460px threshold is a design choice either way.
## Consequences
Changing the column width is now a one-line edit with the ratio relations preserved by construction, which the 736 → 748 retune during review already exercised. The cost is indirection: the widths of five surfaces are no longer readable off their own stylesheets and require following the variable chain to ConversationRoot. The container-query collapse adds the constraint that InputBar's row stays a size container; removing that declaration silently disables the permission trigger's adaptive behavior. The anonymous query also means any future second container between the row and the trigger would capture it — if that happens, the query must move or the intermediate container must be avoided.

31
.agents/notes/implemented/feature/2026-08-04-web-composer-shared-width-axis.zh.md Normal file
View File

@@ -0,0 +1,31 @@
# Agent Note: Web 输入区共享宽度轴与控制行打磨
Status: implemented
[English](2026-08-04-web-composer-shared-width-axis.md) | 中文
## Problem
Web 会话列的各个界面各自独立设定尺寸：转录列、输入卡片、todo/goal/queue 停靠卡片、ask-question/approval/plan-review 接管卡片各自硬编码 max-width（736/752/776/800px 等变体）与各自的侧边内边距。这些界面在全宽下彼此漂移几个像素，在窄视口下偏差更大——有的面板保留了到屏幕边缘的间隙，有的却贴边。另外，输入卡片的控制行没有自适应行为——窄卡片下权限触发器的文字标签会挤压整行；锚定在卡片上的浮层菜单也可能渲染得比卡片更宽，越过其右边缘。
## Decision
一个内容宽度变量拥有整列。`--dsh-chat-content-width`（748px）声明在 ConversationRoot 的 `.root` 上——转录与 composer 座位是兄弟子树，声明必须放在共同祖先上，CSS 自定义属性才能通过继承同时到达两者。其他几何全部由它推导：输入卡片上限为 `content + 32px`（`--dsh-composer-card-max-width`），停靠卡片从卡片宽度中减去四个停靠 inset（4 × 8px）正好回到内容宽度，接管卡片直接使用内容宽度。窄视口不变式以结构而非数值表达：内容宽度的界面每侧 pad `calc(var(--dsh-composer-side-clearance) + 16px)`，而输入卡片只留裸 clearance（16px），因此"输入卡片 = 内容 + 32px"在任意视口宽度下都成立，而不只是在上限处。
卡片内的控制行是一个 `container-type: inline-size` 容器，权限触发器在 460px 容器查询下收起文字标签（保留图标 + 下拉箭头）。查询刻意匿名：CSS modules 按模块哈希 `container-name`，InputBar 样式表里声明的名字永远无法匹配 PermissionSelect 样式表里写的查询——两个哈希后的名字悄然不同，查询永不触发。只有带模式图标的触发器才收起（`:has(.triggerIcon)`）；没有图标的宿主自定义模式保留文字作为其唯一标识。
锚定在卡片上的浮层菜单（slash 菜单、command popupSelect）钳制到锚点宽度（`max-width: min(<设计上限>, 100%)`），过长的行以省略号截断而不是溢出卡片。Tooltip 气泡在钳制中保留 12px 的视口边缘安全距离（ui-primitives Tooltip）。
## Alternatives considered
**保留各界面独立宽度，手工对齐数值。** 否决：本次改动消除的漂移正是手工对齐常量的残留；未来任何宽度调整都需要五处协同编辑，且没有任何机制强制这组关系。
**把变量声明在 `.composerStack` 上。** 尝试后否决：接管面板在 composer 座位中是 stack 的兄弟节点，转录更是完全不同的子树，变量根本到不了它们；共同祖先（`.root`）是唯一正确的家。
**用命名容器查询实现标签收起。** 经实测否决：CSS modules 按模块作用域化 `container-name`，跨模块名字永不匹配，查询是死的。匿名查询解析到最近的祖先容器，在这里没有歧义（该行是唯一的容器）。
**用 JS ResizeObserver 实现标签收起。** 否决：容器查询是声明式的，无需监听器生命周期，而 460px 阈值无论哪种方案都是设计选择。
## Consequences
修改列宽现在是一行编辑，比例关系由构造保证——评审期间 736 → 748 的重调已经验证了这一点。代价是间接性：五个界面的宽度不再能从各自的样式表直接读出，需要沿变量链追到 ConversationRoot。容器查询收起增加了一个约束：InputBar 的行必须保持为尺寸容器；删掉那条声明会静默禁用权限触发器的自适应行为。匿名查询也意味着未来若在行与触发器之间出现第二个容器，它会截获该查询——届时查询必须迁移，或避免中间容器。

3
apps/web/tests/chat-scroll-contract.e2e.ts
View File

@@ -608,6 +608,9 @@ describe('web e2e: long Chat scroll contract', () => {
await world.page.getByRole('tab', { name: 'Trajectory', exact: true }).click()
await world.page.getByLabel('Trajectory timeline').waitFor({ timeout: 30_000 })
await world.page.setViewportSize({ width: 700, height: 900 })
// The narrow breakpoint auto-collapses the sidebar. Re-open it because
// this scenario switches sessions while pinning the narrow Chat scroll owner.
await world.page.getByRole('button', { name: 'Open sidebar', exact: true }).click()
await world.page.getByRole('tab', { name: 'Chat', exact: true }).click()
await nextPaint(world.page)
await expectSameFlowTop(world.page, sessionAnchor)

2
apps/web/tests/models-settings.e2e.ts
View File

@@ -58,7 +58,7 @@ describe('web e2e: Models settings page configures a dormant provider', () => {
await dialog.getByText('填入各提供方的 API 密钥即可使用其模型。').waitFor({ timeout: 10_000 })
// The dormant pi-ai adapter contributes its whole installed catalog; no
// provider is configured yet, so the page is one add button.
const add = dialog.getByRole('button', { name: '+ 添加提供方' })
const add = dialog.getByRole('button', { name: '添加提供方' })
await add.waitFor({ timeout: 10_000 })
// The button enables once the dormant catalog lands in the join.
await expect.poll(async () => add.isEnabled(), { timeout: 10_000 }).toBe(true)

1
apps/web/tests/snapshots/lifecycle-chrome/hero.expected.md
View File

@@ -28,6 +28,7 @@
- textbox "Describe what you want to build"
- button "Commands":
- img
- tooltip "Commands"
- 'button "Access mode, current: Workspace Write"': Workspace Write
- button "Select model, current DeepSeek-V4-Flash":
- text: DeepSeek-V4-Flash

4
apps/web/tests/snapshots/models-settings/configured.expected.md
View File

@@ -17,4 +17,6 @@
- text: minimax-cn
- button "编辑"
- button "删除"
- button "+ 添加提供方"
- button "添加提供方":
- img
- text: 添加提供方

1
apps/web/tests/snapshots/queue-actions/editing.expected.md
View File

@@ -30,6 +30,7 @@
- textbox "Edit queued message": Edited queue item
- button "Save queued message":
- img
- tooltip "Save queued message"
- button "Cancel editing":
- img
- textbox "Message the agent"

2
apps/web/tests/snapshots/queue-actions/layout.expected.md
View File

@@ -23,7 +23,7 @@
- paragraph: partial
- status: Deep diving...
- region "To-dos":
- button "To-dos 1/2 tasks · 1 in progress"
- button "To-dos 1 completed · 1 in progress"
- img
- text: Ongoing Goal Keep the composer context panels aligned
- button "Pause goal":

1
apps/web/tests/snapshots/queue-actions/ui.expected.md
View File

@@ -21,6 +21,7 @@
- text: Edited queue item
- button "Edit queued message":
- img
- tooltip "Edit queued message"
- button "Remove queued message":
- img
- button "Steer queued message":

4
apps/web/tests/snapshots/sidebar-scrollbar/geometry.expected.md
View File

@@ -28,8 +28,8 @@
- scrollbar-width: auto
- scrollbar-color: auto
- ::-webkit-scrollbar-thumb:hover declarations: var(--dsh-scrollbar-thumb-hover)
- --dsh-scrollbar-thumb, pointer over the list: rgb(60, 60, 61)
- --dsh-scrollbar-thumb-hover, pointer over the list: rgb(84, 85, 87)
- --dsh-scrollbar-thumb, pointer over the list: rgb(84, 85, 87)
- --dsh-scrollbar-thumb-hover, pointer over the list: rgb(101, 103, 107)
- list overflows: true
- reserved band: 8px
- scrollbar inset from the sidebar edge: 2px

10
packages/client/ui-command/src/client/PopupSelectView.module.css
View File

@@ -12,7 +12,10 @@
padding: 4px;
display: flex;
flex-direction: column;
min-width: 220px;
min-width: min(220px, 100%);
/* Never wider than the composer card (the overlay anchor's width): long
rows truncate instead of pushing the card past the composer's edge. */
max-width: 100%;
/* Height cap: the 320px design maximum, clamped at runtime to the space
* above the composer (inline max-height set in PopupSelectView.tsx). */
max-height: 320px;
@@ -51,7 +54,8 @@
}
.label {
flex: 1;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -61,6 +65,8 @@
font-size: 12px;
color: var(--dsw-alias-label-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.check {

13
packages/client/ui-conversation/src/client/chat/ChatView.module.css
View File

@@ -16,7 +16,9 @@
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 16px 24px;
/* Sides = composer clearance + 16px: on narrow viewports the transcript
stays exactly 32px narrower than the input card (the shared width rule). */
padding: 16px calc(var(--dsh-composer-side-clearance) + 16px);
}
:global([data-conversation-scroll]) .root {
@@ -31,10 +33,11 @@
min-height: auto;
}
/* Message column: 736px fixed width, centered on the same axis as the
input box; the scroller itself stays full-bleed. */
/* Message column: shared chat width (ConversationRoot --dsh-chat-content-width),
centered on the same axis as the input box (which caps at chat + 16px); the
scroller itself stays full-bleed. */
.column {
max-width: 736px;
max-width: var(--dsh-chat-content-width);
width: 100%;
margin: 0 auto;
display: flex;
@@ -166,7 +169,7 @@
height: 0;
display: flex;
justify-content: flex-end;
padding-right: max(0px, calc((100% - 736px) / 2));
padding-right: max(0px, calc((100% - var(--dsh-chat-content-width)) / 2));
pointer-events: none;
}

39
packages/client/ui-conversation/src/client/chat/MessageIconActions.tsx
View File

@@ -1,12 +1,12 @@
// Shared IconActions chrome for user, steering, and assistant messages: copy
// live, optional branch wiring, and an optional date-aware clock.
import { useCallback, useId } from 'react'
import { useCallback, useEffect, useId, useRef, useState } from 'react'
import {
IconBranchOutline16, IconCopyOutline16, Tooltip,
IconBranchOutline16, IconCheckOutline16, IconCopyOutline16, Tooltip, writeClipboard,
} from '@deepseek-ai/dsh-client-ui-primitives'
import type { ChatViewSlotProps } from '../contract/slots.ts'
import { formatMessageClock, formatRunDuration, writeClipboard } from './message-chrome.ts'
import { formatMessageClock, formatRunDuration } from './message-chrome.ts'
import { useCalendarDay } from './use-calendar-day.ts'
import css from './MessageIconActions.module.css'
@@ -41,9 +41,32 @@ export function MessageIconActions({
}: MessageIconActionsProps) {
const day = useCalendarDay()
const reasonId = useId()
// Same success chrome as CodeBlock: a short check swap after the write,
// gated so re-clicks during the window neither re-copy nor stack timers.
const [copied, setCopied] = useState(false)
const copyPending = useRef(false)
const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
const copyEpoch = useRef(0)
useEffect(() => () => {
copyEpoch.current += 1
copyPending.current = false
if (copyTimer.current !== null) clearTimeout(copyTimer.current)
}, [])
const onCopy = useCallback(() => {
void writeClipboard(text)
}, [text])
if (copied || copyPending.current) return
const epoch = copyEpoch.current
copyPending.current = true
void writeClipboard(text).then((ok) => {
if (epoch !== copyEpoch.current) return
copyPending.current = false
if (!ok) return
setCopied(true)
copyTimer.current = window.setTimeout(() => {
copyTimer.current = null
setCopied(false)
}, 1000)
})
}, [copied, text])
const clockEl = time === undefined ? null : (
<span className={clock === 'start' ? css.timeStart : css.timeEnd}>
{formatMessageClock(time, t, day)}
@@ -58,9 +81,9 @@ export function MessageIconActions({
return (
<div className={className === undefined ? css.actions : `${css.actions} ${className}`}>
{clock === 'start' ? clockEl : null}
<Tooltip label={t('copy')} side="bottom">
<button type="button" className={css.action} aria-label={t('copy')} onClick={onCopy}>
<IconCopyOutline16 />
<Tooltip label={copied ? t('copied') : t('copy')} side="bottom">
<button type="button" className={css.action} aria-label={copied ? t('copied') : t('copy')} onClick={onCopy}>
{copied ? <IconCheckOutline16 /> : <IconCopyOutline16 />}
</button>
</Tooltip>
{showBranch && onBranch !== undefined && (

16
packages/client/ui-conversation/src/client/chat/StatsLine.module.css
View File

@@ -1,23 +1,25 @@
/* Session stats row: 12/20 tertiary text under the flow, aligned to the
736px message column axis. */
shared message column axis (--dsh-chat-content-width). */
.root {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 736px;
/* Block, not flex: text-overflow only elides a block's inline content, so
an overlong line ends in … instead of a mid-glyph clip. */
display: block;
text-align: center;
max-width: var(--dsh-chat-content-width);
width: 100%;
margin: 0 auto;
box-sizing: border-box;
padding: 4px 24px 0px;
padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;
font-size: 12px;
line-height: 20px;
color: var(--dsw-alias-label-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sep {
color: var(--dsw-alias-separator-primary);
margin: 0 10px; /* carries the former flex gap */
}

2
packages/client/ui-conversation/src/client/chat/StatsLine.tsx
View File

@@ -152,7 +152,7 @@ export const StatsLine = memo(function StatsLine({ useSession, useProjection }:
<div className={css.root}>
{groups.map((group, i) => (
<Fragment key={group}>
{i > 0 && <span className={css.sep} aria-hidden>|</span>}
{i > 0 && <><span className={css.sep} aria-hidden>|</span>{' '}</>}
<span>{group}</span>
</Fragment>
))}

43
packages/client/ui-conversation/src/client/chat/message-chrome.ts
View File

@@ -1,5 +1,4 @@
// Shared chrome helpers for user/assistant IconActions rows: clipboard write
// and the compact date+clock label from a session-event epoch.
// Shared time-label helpers for user/assistant IconActions rows.
import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
@@ -8,46 +7,6 @@ export type ClockTranslate = Translate<'clock.md' | 'clock.ymd'>
/** The elapsed-duration share of the conversation dictionary. */
export type RunDurationTranslate = Translate<'duration.seconds' | 'duration.minutes'>
/**
* Best-effort clipboard write; rejections stay swallowed (no success chrome).
* @param text - Plain text to place on the clipboard.
*/
export async function writeClipboard(text: string): Promise<void> {
// lib.dom types clipboard non-optional, but insecure contexts omit it —
// that runtime gap is exactly what this guard detects.
/* oxlint-disable-next-line typescript/no-unnecessary-condition */
if (navigator.clipboard?.writeText) {
try {
await navigator.clipboard.writeText(text)
} catch {
// Denied permissions / iframe policy.
}
return
}
// execCommand('copy') is the only clipboard fallback where the async API
// is missing (insecure contexts); deprecated but deliberately retained.
/* oxlint-disable typescript/no-deprecated */
const exec = typeof document.execCommand === 'function'
? document.execCommand.bind(document)
: undefined
if (exec === undefined) return
const el = document.createElement('textarea')
el.value = text
el.setAttribute('readonly', '')
el.style.position = 'fixed'
el.style.left = '-9999px'
document.body.appendChild(el)
el.select()
try {
exec('copy')
} catch {
// Clipboard unavailable; the button stays idle.
}
/* oxlint-enable typescript/no-deprecated */
el.remove()
}
function pad2(n: number): string {
return String(n).padStart(2, '0')
}

10
packages/client/ui-conversation/src/client/locales.ts
View File

@@ -42,8 +42,10 @@ export const zh = {
'details.input': '输入',
'details.output': '输出',
'details.running': '运行中…',
'todo.title': '任务清单',
'todo.progress': '{done}/{total} 项任务 · {active} 项进行中',
'todo.title': '任务',
'todo.progress.done': '{done} 已完成',
'todo.progress.active': '{active} 进行中',
'todo.progress.pending': '{pending} 待处理',
'todo.rowTitle': '更新任务清单',
'todo.completed': '{done}/{total} 已完成',
'chat.loadingHistory': '载入历史…',
@@ -154,7 +156,9 @@ export const en = {
'details.output': 'Output',
'details.running': 'Running…',
'todo.title': 'To-dos',
'todo.progress': '{done}/{total} tasks · {active} in progress',
'todo.progress.done': '{done} completed',
'todo.progress.active': '{active} in progress',
'todo.progress.pending': '{pending} pending',
'todo.rowTitle': 'Update to-do list',
'todo.completed': '{done}/{total} completed',
'chat.loadingHistory': 'Loading history…',

31
packages/client/ui-conversation/src/client/queue/QueueDock.module.css
View File

@@ -16,20 +16,21 @@
var(--dsh-composer-dock-inset) -
var(--dsh-composer-dock-inset)
);
/* Flex gap still applies after this item; subtract it together with the
design's overlap so the later composer paints over the queue edge. */
margin: 0 auto calc(
0px - var(--dsh-composer-stack-gap) - var(--dsh-queue-composer-overlap)
);
padding: 2px 12px;
/* Cancel the stack gap after this item and tuck 3px under the input card
(square bottom), reading as one attached surface. */
margin: 0 auto calc(0px - var(--dsh-composer-stack-gap) - 3px);
/* Horizontal padding completes the shared dock inset (this wrapper only
subtracts two insets from its width); no vertical padding, so the visual
gap above the panel stays the uniform stack gap. */
padding: 0 var(--dsh-composer-dock-inset);
}
.panel {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 2px;
border-radius: 14px 14px 0 0;
padding: 2px 0;
border-radius: 12px 12px 0 0;
background: var(--dsw-specific-tip);
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
@@ -39,6 +40,7 @@
position: absolute;
inset: 0;
border: 1px solid var(--dsw-alias-border-l1);
/* The input card's own top border closes the shape below. */
border-bottom: none;
border-radius: inherit;
content: '';
@@ -52,7 +54,9 @@
gap: 10px;
width: 100%;
height: 36px;
padding: 4px 16px 4px 12px;
/* Right inset 12px puts the chevron on the same vertical line as the Todo
header's chevron (12px body padding there). */
padding: 4px 12px;
border: none;
border-radius: 8px;
background: transparent;
@@ -70,11 +74,18 @@
cursor: default;
}
.lead {
display: grid;
flex: none;
place-items: center;
color: var(--dsw-alias-label-tertiary);
}
.count {
flex: 1 1 auto;
min-width: 0;
font-family: Inter, var(--dsw-font-family);
font-size: 14px;
font-size: 13px;
font-weight: 500;
line-height: 24px;
}

144
packages/client/ui-conversation/src/client/queue/QueueDock.tsx
View File

@@ -8,8 +8,8 @@ import { useEffect, useId, useMemo, useState } from 'react'
import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
import {
IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14,
IconCloseOutline16, IconEditOutline16, IconSendOutline16, IconTrashOutline16,
IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14, IconCloseOutline16,
IconEditOutline16, IconQueueOutline14, IconSendOutline14, IconTrashOutline16, Tooltip,
} from '@deepseek-ai/dsh-client-ui-primitives'
import type { QueueAction, QueueItemId } from '../contract/queue.ts'
import { NS } from '../locales.ts'
@@ -87,6 +87,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
disabled={interactionActive}
onClick={() => { setCollapsed(value => !value) }}
>
<span className={css.lead} aria-hidden><IconQueueOutline14 /></span>
<span className={css.count}>{t('queue.count', { n: queue.length })}</span>
<span className={css.chevron} aria-hidden>
{expanded ? <IconChevronDownOutline14 /> : <IconChevronUpOutline14 />}
@@ -96,6 +97,8 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
<ul id={listId} className={css.list} hidden={!listVisible}>
{listVisible && queue.map(row => (
<li key={row.id} className={css.row}>
{/* Single-item strip has no count header, so the row itself carries the queue glyph. */}
{queue.length === 1 && <span className={css.lead} aria-hidden><IconQueueOutline14 /></span>}
{editing?.id === row.id
? (
<input
@@ -121,74 +124,83 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
{editing?.id === row.id
? (
<>
<button
type="button"
className={css.action}
aria-label={t('queue.save')}
title={t('queue.save')}
disabled={busy !== null || editing.text.trim() === ''}
onClick={() => { void saveEdit() }}
>
<IconCheckOutline16 size={14} />
</button>
<button
type="button"
className={css.action}
aria-label={t('queue.cancelEdit')}
title={t('queue.cancelEdit')}
disabled={busy !== null}
onClick={() => { setEditing(null) }}
>
<IconCloseOutline16 size={14} />
</button>
<Tooltip label={t('queue.save')} side="bottom" delayMs={500}>
<button
type="button"
className={css.action}
aria-label={t('queue.save')}
disabled={busy !== null || editing.text.trim() === ''}
onClick={() => { void saveEdit() }}
>
<IconCheckOutline16 size={14} />
</button>
</Tooltip>
<Tooltip label={t('queue.cancelEdit')} side="bottom" delayMs={500}>
<button
type="button"
className={css.action}
aria-label={t('queue.cancelEdit')}
disabled={busy !== null}
onClick={() => { setEditing(null) }}
>
<IconCloseOutline16 size={14} />
</button>
</Tooltip>
</>
)
: (
<>
<button
type="button"
className={css.action}
aria-label={t('queue.edit')}
title={row.text === null ? t('queue.edit.unsupported') : t('queue.edit')}
disabled={busy !== null || row.text === null}
onClick={() => {
if (row.text !== null) setEditing({ id: row.id, text: row.text })
}}
>
<IconEditOutline16 size={14} />
</button>
<button
type="button"
className={css.action}
aria-label={t('queue.remove')}
title={t('queue.remove')}
disabled={busy !== null}
onClick={() => {
void applyAction(
row.id,
{ kind: 'remove' },
t('queue.removeFailed'),
)
}}
>
<IconTrashOutline16 size={14} />
</button>
<button
type="button"
className={css.action}
aria-label={t('queue.steer')}
title={running ? t('queue.steer') : t('queue.steer.unavailable')}
disabled={busy !== null || !running}
onClick={() => {
void applyAction(
row.id,
{ kind: 'steer' },
t('queue.steerFailed'),
)
}}
>
<IconSendOutline16 size={14} />
</button>
<Tooltip label={t('queue.edit')} side="bottom" delayMs={500} disabled={row.text === null}>
<button
type="button"
className={css.action}
aria-label={t('queue.edit')}
// Disabled buttons fire no hover events, so the
// unsupported hint stays a native title.
title={row.text === null ? t('queue.edit.unsupported') : undefined}
disabled={busy !== null || row.text === null}
onClick={() => {
if (row.text !== null) setEditing({ id: row.id, text: row.text })
}}
>
<IconEditOutline16 size={14} />
</button>
</Tooltip>
<Tooltip label={t('queue.remove')} side="bottom" delayMs={500}>
<button
type="button"
className={css.action}
aria-label={t('queue.remove')}
disabled={busy !== null}
onClick={() => {
void applyAction(
row.id,
{ kind: 'remove' },
t('queue.removeFailed'),
)
}}
>
<IconTrashOutline16 size={14} />
</button>
</Tooltip>
<Tooltip label={t('queue.steer')} side="bottom" delayMs={500} disabled={!running}>
<button
type="button"
className={css.action}
aria-label={t('queue.steer')}
title={running ? undefined : t('queue.steer.unavailable')}
disabled={busy !== null || !running}
onClick={() => {
void applyAction(
row.id,
{ kind: 'steer' },
t('queue.steerFailed'),
)
}}
>
<IconSendOutline14 />
</button>
</Tooltip>
</>
)}
</div>}

40
packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.module.css
View File

@@ -8,13 +8,15 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 32px 12px;
/* Sides = clearance + 16px so the card lands on the shared content width
(input card - 32) at every viewport. */
padding: 8px calc(var(--dsh-composer-side-clearance) + 16px) 12px;
}
.card {
overflow: hidden;
width: 100%;
max-width: 776px;
max-width: var(--dsh-chat-content-width);
border: 1px solid var(--dsw-alias-state-warn-secondary);
border-radius: 20px;
background: var(--dsw-specific-input-major);
@@ -84,7 +86,9 @@
/* Card-level row, not body content. Its padding reproduces the metrics the row
had inside the body: 14px above (the flex gap of 6 plus the row's 8px top
margin, neither of which reaches it out here) and the body's former 14px
bottom pad below, so the resting card is unchanged. */
bottom pad below, so the resting card is unchanged. Buttons are the shared
outline/primary capsules (Button atom, matching QuestionComposer's footer);
only the reject's danger hover is local. */
.actionRow {
display: flex;
justify-content: flex-end;
@@ -92,36 +96,6 @@
padding: 14px 16px 14px;
}
.allow,
.reject {
padding: 6px 16px;
border-radius: 10px;
font-size: 13px;
line-height: 18px;
cursor: pointer;
}
.allow:disabled,
.reject:disabled {
opacity: 0.5;
cursor: default;
}
/* Primary action: filled ink (draft's rightmost emphasis, minus the dropped
always-allow button). */
.allow {
border: none;
background: var(--dsw-alias-label-primary);
color: var(--dsw-alias-label-primary-foreground);
}
/* Secondary: quiet outline. */
.reject {
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
background: transparent;
color: var(--dsw-alias-label-secondary);
}
.reject:hover:not(:disabled) {
background: var(--dsw-alias-interactive-bg-hover-danger);
color: var(--dsw-alias-state-error-primary);

9
packages/client/ui-conversation/src/client/skeleton/ApprovalPanel.tsx
View File

@@ -14,6 +14,7 @@
// grant storage.
import { useMemo, useState } from 'react'
import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
import type { RunningToolCall } from '@deepseek-ai/dsh-client-runtime/client'
import { PendingApproval, type ApprovalComposerProps } from '../contract/slots.ts'
import css from './ApprovalPanel.module.css'
@@ -69,12 +70,12 @@ function ApprovalFlow({ pending, command, t }: {
{command !== undefined && <div className={css.command}>{command}</div>}
</div>
<div className={css.actionRow}>
<button type="button" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
<Button variant="outline" className={css.reject} disabled={answered} onClick={() => { answer('rejected') }}>
{t('approval.reject')}
</button>
<button type="button" className={css.allow} disabled={answered} onClick={() => { answer('allowed-once') }}>
</Button>
<Button variant="primary" disabled={answered} onClick={() => { answer('allowed-once') }}>
{t('approval.allowOnce')}
</button>
</Button>
</div>
</div>
</div>

33
packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
View File

@@ -9,6 +9,20 @@
height: 100%;
min-width: 0;
background: var(--dsw-alias-bg-base);
/* Shared width axis for the whole column: one content width W
(--dsh-chat-content-width) for the transcript, the dock cards
(todo/goal/queue: card minus four insets, 4 x 8 = 32), and the takeover
cards (question/approval/plan review); the input card alone is W + 32px.
The relation also holds when a narrow viewport shrinks everything: the
chat scroller and the takeover frames pad clearance + 16px per side while
the input card clears the bare clearance, so the input card stays exactly
content + 32px at every width. Declared on the root because the
transcript and the composer seat are sibling subtrees. */
--dsh-chat-content-width: 748px;
--dsh-composer-card-max-width: calc(var(--dsh-chat-content-width) + 32px);
--dsh-composer-side-clearance: 16px;
--dsh-composer-dock-inset: 8px;
}
.header {
@@ -134,16 +148,11 @@
}
/* Composer context stack (Figma 9:937): standalone dock cards share one
rhythm; the terminal queue strip additionally tucks under the input card. */
rhythm above the input card. */
.composerStack {
/* Horizontal geometry (card width, clearance, dock inset) rides the shared
.root variables above so takeover siblings match the stack. */
--dsh-composer-stack-gap: 6px;
--dsh-queue-composer-overlap: 5px;
/* InputBar and dock registrants derive their horizontal geometry from the
same card width, outer clearance, and dock inset. */
--dsh-composer-card-max-width: 800px;
--dsh-composer-side-clearance: 32px;
--dsh-composer-dock-inset: 12px;
display: flex;
flex-direction: column;
@@ -239,7 +248,9 @@
gap: 12px;
/* Foot inside the centered box floats the stack a bit above true center. */
padding-bottom: 32px;
width: min(776px, calc(100% - 48px));
/* Card cap + both clearances: the hero input card lands at exactly the same
width as the docked composer at every viewport. */
width: min(calc(var(--dsh-composer-card-max-width) + 2 * var(--dsh-composer-side-clearance)), 100%);
z-index: 1;
}
@@ -263,7 +274,9 @@
display: flex;
align-items: center;
min-width: 0;
padding-left: 8px;
/* figma drew px 8; nudged +12 so the chip's folder glyph lines up closer to
the card's inner controls below. */
padding-left: 20px;
}
/* Hero: the composer sits inside the session scroll body; center there so

43
packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
View File

@@ -11,23 +11,28 @@
/* Floating capsule input (figma Input_Bottom 75:8208): card floats above the
viewport bottom inside the centered message column; textarea on top, action
row below, one primary circle button bottom-right. Input width rides the
column (800 is a cap, not a fixed size — layout rule: the box shrinks with
the center column keeping its padding). Hero variant = the same card
centered in the empty state; the transition between the two is a position
move of one component. */
column (--dsh-composer-card-max-width = chat content + 32px, 16px per side,
is a cap, not a fixed size — layout rule: the box shrinks with the center
column keeping its clearance). Hero variant = the same card centered in the
empty state; the transition between the two is a position move of one
component. */
.root {
display: flex;
flex-direction: column;
align-items: center;
/* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
the chat scroller. No top pad: the composer stack's gap owns the space
above; error/status strips still carry their own margin. */
/* Side pads ride the shared clearance (figma Input_Bottom drew L32/R32/B8;
the sides narrow with the shared width axis); the bottom gradient mask
is owned by the chat scroller. No top pad: the composer stack's gap owns
the space above; error/status strips still carry their own margin. */
padding: 0 var(--dsh-composer-side-clearance) 8px;
}
.hero {
padding: 0;
/* No bottom pad in the centered hero, but the side clearance must survive:
the hero wrapper is full-width on narrow viewports, so this padding is
the only thing keeping the card off the edges there. */
padding: 0 var(--dsh-composer-side-clearance);
}
.error,
@@ -83,7 +88,7 @@
the input border is one notch weaker than buttons) — exactly the
l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
border-radius: 20px;
border-radius: 22px;
background: var(--dsw-specific-input-major);
box-shadow: var(--dsw-shadow-lv2);
font-size: 16px;
@@ -256,8 +261,16 @@
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 10px 10px 10px;
/* 2px moved from the bottom pad to the top: the whole control row sits 2px
lower in the card (it read too high against the textarea) while the card
height and the controls' own centering stay untouched. */
padding: 2px 8px 6px;
min-width: 0;
/* Size container so the chips inside can collapse to icon-only when the
card runs out of row width (PermissionSelect @container rule). Anonymous
on purpose: CSS modules hash container-name per module, so a name declared
here can never match a query in another module's sheet. */
container-type: inline-size;
}
.tools,
@@ -268,13 +281,15 @@
min-width: 0;
}
/* figma 75:8208: 16 between + and the mode chips; 4 between Plan / Read-only. */
/* figma 75:8208 drew 16 between + and the mode chips and 4 between Plan /
Read-only; the chip gap widened to 12 so the pill chips read as separate
controls. */
.tools {
gap: 16px;
}
.modes {
gap: 4px;
gap: 12px;
}
.trailing {
@@ -354,6 +369,10 @@
color: #fff;
cursor: pointer;
transition: background-color 100ms ease;
/* Opts out of the row's 2px downward shift (.row top pad): the send circle
keeps its original seat while the smaller chips sit lower. Transform, not
margin, so flex centering math is untouched. */
transform: translateY(-2px);
}
.primary:hover:not(:disabled) {

68
packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
View File

@@ -9,7 +9,7 @@
import { useEffect, useRef } from 'react'
import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
import clsx from 'clsx'
import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
import { IconPlusOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
// Type-only: the `plan` projection key merge (the TodoDock posture — the
// composer reads a host-computed value; the domain owns the key).
import type {} from '@deepseek-ai/dsh-plan-mode/client'
@@ -489,19 +489,20 @@ export function InputBar({
</div>
<div className={css.row}>
<div className={css.tools}>
<button
type="button"
className={css.add}
aria-label={t('input.commands')}
title={t('input.commands')}
aria-haspopup="listbox"
aria-expanded={commandMenuOpen}
disabled={locked || toggleCommandMenu === undefined}
onMouseDown={keepFocus}
onClick={onToggleCommandMenu}
>
<IconPlusOutline16 size={14} />
</button>
<Tooltip label={t('input.commands')} side="top" delayMs={500}>
<button
type="button"
className={css.add}
aria-label={t('input.commands')}
aria-haspopup="listbox"
aria-expanded={commandMenuOpen}
disabled={locked || toggleCommandMenu === undefined}
onMouseDown={keepFocus}
onClick={onToggleCommandMenu}
>
<IconPlusOutline16 size={14} />
</button>
</Tooltip>
<div className={css.modes}>
{accessSelect}
{renderSlot('conversation.input.plan', { locked })}
@@ -512,25 +513,26 @@ export function InputBar({
{rightItems}
{renderSlot('conversation.input.model', { locked })}
{/* {machineBusy && <span className={css.pending} data-input-pending aria-label="处理中" />} */}
<button
type="button"
className={css.primary}
aria-label={primaryLabel}
title={primaryLabel}
disabled={stopping ? stop === undefined : empty || disabled || machineBusy}
onMouseDown={keepFocus}
onClick={onPrimary}
>
{stopping ? (
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
<rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
</svg>
) : (
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
<path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
</svg>
)}
</button>
<Tooltip label={primaryLabel} side="top" delayMs={500}>
<button
type="button"
className={css.primary}
aria-label={primaryLabel}
disabled={stopping ? stop === undefined : empty || disabled || machineBusy}
onMouseDown={keepFocus}
onClick={onPrimary}
>
{stopping ? (
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
<rect x="3" y="3" width="10" height="10" rx="3" fill="currentColor" />
</svg>
) : (
<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
<path d="M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z" fill="currentColor" />
</svg>
)}
</button>
</Tooltip>
</div>
</div>
</div>

32
packages/client/ui-conversation/src/client/skeleton/PermissionSelect.module.css
View File

@@ -7,7 +7,8 @@
height: 28px;
padding: 0 4px 0 8px;
border: none;
border-radius: 8px;
/* Rounded chip chrome, matching the sibling model trigger. */
border-radius: 24px;
outline: none;
background: transparent;
color: var(--dsw-alias-label-secondary);
@@ -30,6 +31,18 @@
cursor: default;
}
.triggerIcon {
display: inline-flex;
flex: 0 0 auto;
}
/* The shared 16px glyphs render one step smaller on the exposed trigger;
the dropdown rows keep the full 16px. */
.triggerIcon svg {
width: 14px;
height: 14px;
}
.triggerLabel {
min-width: 0;
overflow: hidden;
@@ -40,4 +53,21 @@
.chevron {
flex: 0 0 auto;
color: var(--dsw-alias-label-caption);
transition: transform 120ms ease;
}
/* Narrow composer: the trigger collapses to icon + chevron so the row keeps
fitting. Only triggers that actually carry a mode glyph drop their label —
a host-configured mode without one keeps its text as the sole identifier.
The 460px cut is the point where the row (attach + modes + model + send)
starts squeezing labels; the container is the composer row (InputBar .row —
anonymous query because CSS modules hash container-names per module). */
@container (max-width: 460px) {
.trigger:has(.triggerIcon) .triggerLabel {
display: none;
}
}
.chevronOpen {
transform: rotate(180deg);
}

55
packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
View File

@@ -1,12 +1,50 @@
import { useEffect, useState } from 'react'
import type { ReactNode } from 'react'
import clsx from 'clsx'
import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
import { Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
import { IconChevronDownOutline14, Menu, RiskConfirmation } from '@deepseek-ai/dsh-client-ui-primitives'
import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
import type { ComposerBarProps } from '../contract/slots.ts'
import css from './PermissionSelect.module.css'
const FULL_ACCESS = 'danger-full-access'
/* Shield glyphs (design set 1556): check = read-only, pencil = workspace
write, exclamation = full access. currentColor so the trigger and menu
rows tint them with their own text color. */
const shieldOutline = 'M8.20554 0.899994L14.7901 3.36857V7.01026C14.7901 12 11.0466 14.2103 8.20554 15.3C5.36446 14.2103 1.62012 12 1.62012 7.01026V3.36857L8.20554 0.899994Z'
const permissionGlyphs = {
'read-only': (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
<path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
<path d="M12.1654 5.7552L8.9447 9.41475C8.73044 9.65816 8.53628 9.8804 8.35774 10.0423C8.1713 10.2114 7.94235 10.3717 7.64016 10.4254C7.48207 10.4535 7.32 10.4552 7.16151 10.4294C6.85843 10.3801 6.62728 10.2223 6.43836 10.0559C6.25752 9.89653 6.06037 9.67732 5.84264 9.43705L4.72925 8.20897L5.63557 7.38707L6.74897 8.61594C6.98603 8.87755 7.12974 9.03533 7.24673 9.13839C7.31033 9.19443 7.34485 9.21476 7.35823 9.22122C7.38068 9.22484 7.40352 9.22515 7.42593 9.22122C7.40522 9.22502 7.42893 9.23294 7.53583 9.136C7.65132 9.03126 7.79316 8.87139 8.02643 8.60638L11.2479 4.94763L12.1654 5.7552Z" fill="currentColor" />
</svg>
),
'workspace-write': (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
<path d="M8.08887 0.251709C8.20479 0.23085 8.32486 0.241168 8.43652 0.282959L15.0215 2.75171C15.2787 2.84819 15.4492 3.09414 15.4492 3.3689V7.0105C15.4492 7.10986 15.4441 7.2081 15.4414 7.30542C15.0285 7.07175 14.5905 6.87695 14.1309 6.73022V3.82495L8.20508 1.60327L2.2793 3.82495V7.0105C2.27936 9.7171 3.4745 11.5379 5.02734 12.7947C5.01025 12.9942 5 13.1962 5 13.4001C5.00001 13.7617 5.02722 14.1169 5.08008 14.4636C2.91555 13.0393 0.961014 10.752 0.960938 7.0105V3.3689C0.960938 3.09417 1.13146 2.84821 1.38867 2.75171L7.97461 0.282959L8.08887 0.251709Z" fill="currentColor" />
<path d="M11.3525 5.64688V6.85688H5V5.64688H11.3525Z" fill="currentColor" />
<path d="M9.5824 8.29376V9.50376H5V8.29376H9.5824Z" fill="currentColor" />
<path d="M14.6647 15.6852H10.0338C10.3878 15.3751 10.7567 15.0517 11.0772 14.7706C11.2531 14.6164 11.4144 14.4746 11.5511 14.3547H14.6647V15.6852Z" fill="currentColor" />
<path d="M8.14852 14.1308L7.33925 15.4976C7.22458 15.6912 7.42245 15.9194 7.63037 15.8333L9.09785 15.2254L15.0399 10.0719L14.0905 8.97733L8.14852 14.1308Z" fill="currentColor" />
</svg>
),
[FULL_ACCESS]: (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
<path d={shieldOutline} stroke="currentColor" strokeWidth="1.31831" strokeLinejoin="round" />
<path d="M9.10094 4.5V8.75939H7.59888V4.5H9.10094Z" fill="currentColor" />
<path d="M9.10094 9.8114V11.5H7.59888V9.8114H9.10094Z" fill="currentColor" />
</svg>
),
} as Record<string, ReactNode>
/** Glyph for a permission option value; host-configured names outside the design set get none. */
function permissionGlyph(value: string): ReactNode | undefined {
return permissionGlyphs[value]
}
/**
* Display transform: kebab-case machine names render as title-case labels
* (`workspace-write` → `Workspace Write`); non-kebab host-configured names
@@ -52,7 +90,10 @@ export function PermissionSelect({ value, locked, command, t }: PermissionSelect
const items: MenuEntry[] = value.options
.filter(o => o.value !== 'custom')
.map(option => ({ id: option.value, label: optionLabel(option) }))
.map((option) => {
const icon = permissionGlyph(option.value)
return { id: option.value, label: optionLabel(option), ...icon === undefined ? {} : { icon } }
})
const submit = (id: string): void => {
setPick(id)
@@ -102,10 +143,14 @@ export function PermissionSelect({ value, locked, command, t }: PermissionSelect
disabled={locked || busy}
onClick={() => { setOpen(!open) }}
>
{permissionGlyph(currentValue) !== undefined && (
<span className={css.triggerIcon} aria-hidden>{permissionGlyph(currentValue)}</span>
)}
<span className={css.triggerLabel}>{current === undefined ? displayName(currentValue) : optionLabel(current)}</span>
<svg className={css.chevron} viewBox="0 0 12 12" width="12" height="12" aria-hidden>
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
</svg>
{/* Same glyph + open rotation as the sibling ModelSelect trigger. */}
<span className={clsx(css.chevron, open && css.chevronOpen)} aria-hidden>
<IconChevronDownOutline14 />
</span>
</button>
}
/>

18
packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css
View File

@@ -1,6 +1,7 @@
/* Todo strip in the composer context stack (Figma 1236:32276): tip surface,
14px radius, status icons + secondary item labels. Its visible card aligns
with the GoalBar and the Queue panel inside their shared dock column. */
status icons + secondary item labels. Its visible card aligns with the
GoalBar and the Queue panel inside their shared dock column: 12px radius,
36px collapsed row, 12px side padding, 14px tertiary leading glyph. */
.root {
box-sizing: border-box;
@@ -24,7 +25,7 @@
var(--dsh-composer-dock-inset)
);
border: 1px solid var(--dsw-alias-border-l1);
border-radius: 14px;
border-radius: 12px;
background: var(--dsw-specific-tip);
/* Elevated surface: `--dsw-specific-tip` is the same dark rung as the menu
surface, and `.list` scrolls inside this card, so the thumb takes the l2
@@ -39,7 +40,7 @@
display: flex;
flex-direction: column;
gap: 8px;
padding: 9px 15px;
padding: 6px 12px;
}
.header {
@@ -54,9 +55,16 @@
cursor: pointer;
}
.lead {
display: grid;
flex: none;
place-items: center;
color: var(--dsw-alias-label-tertiary);
}
.title {
flex: none;
font-size: 14px;
font-size: 13px;
line-height: 24px;
font-weight: 500;
color: var(--dsw-alias-label-primary);

14
packages/client/ui-conversation/src/client/skeleton/TodoPanel.tsx
View File

@@ -13,7 +13,7 @@ import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots
// declare) and the payload type. Type-only by construction — the outlet is
// free of host value imports, so no host Context merge enters this program.
import type { TodoItem } from '@deepseek-ai/dsh-tool-todo/client'
import { IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
import { IconChecklistOutline14, IconChevronDownOutline14, IconChevronUpOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
import { NS } from '../locales.ts'
import css from './TodoPanel.module.css'
@@ -78,11 +78,18 @@ function StatusGlyph({ status }: { status: TodoItem['status'] }) {
}
}
/** Header summary: "<done>/<total> tasks · <n> in progress". */
/** Header summary: "·"-joined per-status counts; zero-count segments are omitted as noise (a non-empty list keeps at least one). */
function progressLabel(todos: readonly TodoItem[], t: TodoPanelProps['t']): string {
const done = todos.filter(item => item.status === 'completed').length
const active = todos.filter(item => item.status === 'in_progress').length
return t('todo.progress', { done, total: todos.length, active })
const pending = todos.length - done - active
// En spaces (U+2002): HTML collapses runs of ASCII spaces, so widening the
// separator breathing room needs a literal wide space.
return [
...done > 0 ? [t('todo.progress.done', { done })] : [],
...active > 0 ? [t('todo.progress.active', { active })] : [],
...pending > 0 ? [t('todo.progress.pending', { pending })] : [],
].join('\u2002·\u2002')
}
export function TodoPanel({ todos, t }: TodoPanelProps) {
@@ -98,6 +105,7 @@ export function TodoPanel({ todos, t }: TodoPanelProps) {
aria-expanded={!collapsed}
onClick={() => { setCollapsed(v => !v) }}
>
<span className={css.lead} aria-hidden><IconChecklistOutline14 /></span>
<span className={css.title}>{t('todo.title')}</span>
<span className={css.progress}>{progressLabel(todos, t)}</span>
<span className={css.chevron} aria-hidden>

2
packages/client/ui-conversation/tests/assembly-surfaces.spec.tsx
View File

@@ -122,7 +122,7 @@ describe('todo_write assembly (product registrations, no outlet twins)', () => {
// (default-collapsed: the header summary shows; rows appear on expand).
const panel = view.container.querySelector('[data-testid="todo-panel"]')
expect(panel).not.toBeNull()
expect(panel!.textContent).toContain('1/3 项任务 · 1 项进行中')
expect(panel!.textContent).toContain('1 已完成\u2002·\u20021 进行中\u2002·\u20021 待处理')
fireEvent.click(panel!.querySelector('button')!)
expect([...panel!.querySelectorAll('li')].map(li => li.getAttribute('data-status')))
.toEqual(['completed', 'in_progress', 'pending'])

95
packages/client/ui-conversation/tests/chat-branch-tails.spec.tsx
View File

@@ -102,16 +102,10 @@ describe('MessageItem arms', () => {
expect(screen.getByRole('tooltip').textContent).toBe('仅可从已完成轮次的最后一条消息分支')
})
it('user copy stays quiet when execCommand throws or is absent', () => {
it('user copy never claims success when the host rejects the write', async () => {
Object.defineProperty(navigator, 'clipboard', {
configurable: true,
value: undefined,
})
Object.defineProperty(document, 'execCommand', {
configurable: true,
value: () => {
throw new Error('denied')
},
value: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
})
render(
<MessageItem t={t} node={{
@@ -122,12 +116,91 @@ describe('MessageItem arms', () => {
/>,
)
fireEvent.click(screen.getByRole('button', { name: '复制' }))
await act(async () => {
await Promise.resolve()
await Promise.resolve()
})
expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
expect(screen.queryByRole('button', { name: '复制成功' })).toBeNull()
})
Object.defineProperty(document, 'execCommand', {
it('copy swaps to the check success chrome, gates re-clicks, and reverts after a second', async () => {
vi.useFakeTimers()
const writeText = vi.fn().mockResolvedValue(undefined)
Object.defineProperty(navigator, 'clipboard', {
configurable: true,
value: undefined,
value: { writeText },
})
render(
<MessageItem t={t} node={{
kind: 'user', seq: 1, time: 1_000,
content: [{ type: 'text', text: 'copied body' }] as never,
source: null,
}}
/>,
)
const copy = screen.getByRole('button', { name: '复制' })
fireEvent.click(copy)
fireEvent.click(copy)
expect(writeText).toHaveBeenCalledTimes(1)
// Two microtask ticks: writeClipboard's own await, then the .then that
// lands the success chrome.
await act(async () => {
await Promise.resolve()
await Promise.resolve()
})
const done = screen.getByRole('button', { name: '复制成功' })
fireEvent.click(done)
expect(writeText).toHaveBeenCalledTimes(1)
act(() => { vi.advanceTimersByTime(1000) })
expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
})
it('clears copy feedback work when the message unmounts', async () => {
vi.useFakeTimers()
let finishWrite!: () => void
const writeText = vi.fn(() => new Promise<void>((resolve) => { finishWrite = resolve }))
Object.defineProperty(navigator, 'clipboard', {
configurable: true,
value: { writeText },
})
const view = render(
<MessageItem t={t} node={{
kind: 'user', seq: 1, time: 1_000,
content: [{ type: 'text', text: 'copied body' }] as never,
source: null,
}}
/>,
)
fireEvent.click(screen.getByRole('button', { name: '复制' }))
view.unmount()
await act(async () => {
finishWrite()
await Promise.resolve()
await Promise.resolve()
})
expect(vi.getTimerCount()).toBe(0)
const mounted = render(
<MessageItem t={t} node={{
kind: 'user', seq: 2, time: 1_000,
content: [{ type: 'text', text: 'copied body' }] as never,
source: null,
}}
/>,
)
Object.defineProperty(navigator, 'clipboard', {
configurable: true,
value: { writeText: vi.fn().mockResolvedValue(undefined) },
})
fireEvent.click(screen.getByRole('button', { name: '复制' }))
await act(async () => {
await Promise.resolve()
await Promise.resolve()
})
expect(screen.getByRole('button', { name: '复制成功' })).toBeTruthy()
mounted.unmount()
expect(vi.getTimerCount()).toBe(0)
})
it('consumed steering renders copy and branch actions without a badge', () => {
@@ -502,6 +575,6 @@ describe('small branch tails', () => {
: undefined}
/>,
)
expect(view.container.textContent).toBe('1 turns · 1 steps|Input 0 tok · Output 10 tok')
expect(view.container.textContent).toBe('1 turns · 1 steps| Input 0 tok · Output 10 tok')
})
})

8
packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx
View File

@@ -133,7 +133,7 @@ describe('StatsLine', () => {
const view = render(<StatsLine {...props(source)} />)
// No timing on the fixture: the duration group drops out whole. Tokens come
// from the projection, so paging the window cannot change them.
expect(view.container.textContent).toBe('1 turns · 1 steps|Cache hit 90%|Input 100 tok · Output 5 tok')
expect(view.container.textContent).toBe('1 turns · 1 steps| Cache hit 90%| Input 100 tok · Output 5 tok')
const empty = makeSource()
const emptyView = render(<StatsLine {...props(empty.source, {
tokenUsage: { uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 },
@@ -149,7 +149,7 @@ describe('StatsLine', () => {
contextPressure: { pressureTokens: 32_000, contextWindow: 128_000 },
})} />)
expect(view.container.textContent)
.toBe('Context 25% of 128K|Cache hit 90%|Input 100 tok · Output 5 tok')
.toBe('Context 25% of 128K| Cache hit 90%| Input 100 tok · Output 5 tok')
})
it('renders context occupancy only when the projection knows a capacity', () => {
@@ -196,7 +196,7 @@ describe('StatsLine', () => {
const view = render(<StatsLine {...props(source, {
tokenUsage: { uncachedInputTokens: 0, outputTokens: 7, cacheReadTokens: 0, cacheWriteTokens: 0 },
})} />)
expect(view.container.textContent).toBe('1 turns · 1 steps|Input 0 tok · Output 7 tok')
expect(view.container.textContent).toBe('1 turns · 1 steps| Input 0 tok · Output 7 tok')
})
it('includes cache writes in billed input and the cache-hit denominator', () => {
@@ -210,7 +210,7 @@ describe('StatsLine', () => {
},
})} />)
expect(view.container.textContent)
.toBe('1 turns · 1 steps|Cache hit 45%|Input 200 tok · Output 7 tok')
.toBe('1 turns · 1 steps| Cache hit 45%| Input 200 tok · Output 7 tok')
})
it('renders ZERO times during streaming chunk frames (RFC hard acceptance)', () => {

3
packages/client/ui-conversation/tests/input-bar.spec.tsx
View File

@@ -143,7 +143,6 @@ function bench(over?: BenchOptions) {
}
const view = render(<InputBar {...props} />)
const textarea = view.container.querySelector('textarea')!
// aria-label (not role name): title carries the same label and would double-match.
const stopping = over?.running === true && over.subagent === undefined
const button = view.container.querySelector<HTMLButtonElement>(
`button[aria-label="${stopping ? '停止生成' : '发送消息'}"]`,
@@ -724,6 +723,8 @@ describe('command launcher chrome and control seats', () => {
const trigger = view.getByLabelText(/^访问模式/) as HTMLButtonElement
// Title-case display is presentation only; the menu ids stay machine names.
expect(trigger.textContent).toBe('Read Only')
expect([...trigger.querySelectorAll('svg')]
.every(icon => icon.closest('[aria-hidden="true"]') !== null)).toBe(true)
fireEvent.click(trigger)
const items = view.getAllByRole('menuitem')
expect(items.map(o => o.textContent)).toEqual(['Read Only', 'Workspace Write', 'Full access'])

24
packages/client/ui-conversation/tests/todo-panel.spec.tsx
View File

@@ -38,15 +38,24 @@ describe('TodoPanel', () => {
expect(container.innerHTML).toBe('')
})
it('starts collapsed with the progress summary visible', () => {
it('starts collapsed with the per-status count summary visible', () => {
render(<TodoPanel todos={LIST} t={t} />)
expect(screen.getByTestId('todo-panel')).toBeTruthy()
expect(screen.getByText('任务清单')).toBeTruthy()
expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
expect(screen.getByText('任务')).toBeTruthy()
expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
expect(screen.queryByRole('list')).toBeNull()
})
it('omits the completed segment while nothing is done yet', () => {
render(<TodoPanel todos={[
{ content: '写组件', status: 'in_progress' },
{ content: '补测试', status: 'pending' },
]} t={t} />)
expect(screen.getByText('1 进行中 · 1 待处理')).toBeTruthy()
expect(screen.queryByText(/已完成/)).toBeNull()
})
it('expands to show one row per item with its status glyph', () => {
render(<TodoPanel todos={LIST} t={t} />)
fireEvent.click(screen.getByRole('button', { expanded: false }))
@@ -65,17 +74,18 @@ describe('TodoPanel', () => {
fireEvent.click(header)
expect(screen.queryByRole('list')).toBeNull()
// Collapsed header is title + progress only (no in-progress content hint).
expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
expect(screen.queryByText('写组件')).toBeNull()
fireEvent.click(screen.getByRole('button', { expanded: false }))
expect(screen.getAllByRole('listitem')).toHaveLength(3)
})
it('collapsed header still shows zero in-progress when nothing is active', () => {
it('an all-completed list collapses the summary to the done count alone', () => {
render(<TodoPanel todos={[{ content: '都完了', status: 'completed' }]} t={t} />)
expect(screen.getByRole('button', { expanded: false })).toBeTruthy()
expect(screen.queryByText('都完了')).toBeNull()
expect(screen.getByText('1/1 项任务 · 0 项进行中')).toBeTruthy()
expect(screen.getByText('1 已完成')).toBeTruthy()
expect(screen.queryByText(/进行中|待处理/)).toBeNull()
})
})
@@ -93,7 +103,7 @@ describe('TodoDock', () => {
// Capability absent (no baseline/frame yet) renders nothing.
expect(screen.queryByTestId('todo-panel')).toBeNull()
act(() => { store.set({ value: LIST }) })
expect(screen.getByText('1/3 项任务 · 1 项进行中')).toBeTruthy()
expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy()
// The pre-first-write whole value (null) retires the strip (the panel owns no data).
act(() => { store.set({ value: null }) })
expect(screen.queryByTestId('todo-panel')).toBeNull()

15
packages/client/ui-goal/src/client/GoalBar.module.css
View File

@@ -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,27 +22,29 @@
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);
}
.sparkle {
.goalGlyph {
display: inline-flex;
flex: none;
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 {

94
packages/client/ui-goal/src/client/GoalBar.tsx
View File

@@ -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.goalGlyph}><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>

2
packages/client/ui-goal/tests/goalbar.spec.tsx
View File

@@ -52,7 +52,7 @@ describe('GoalBar', () => {
expect(complete.container.firstChild).toBeNull()
})
it('active goal: sparkle, "进行中的目标", truncated objective, edit and clear actions', () => {
it('active goal: goal glyph, "进行中的目标", truncated objective, edit and clear actions', () => {
const actions = makeActions()
render(<GoalBar goal={makeGoal()} {...actions} t={t} />)
expect(screen.getByText('进行中的目标')).toBeTruthy()

25
packages/client/ui-layout/src/client/AppFrame.tsx
View File

@@ -13,7 +13,7 @@
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
import type { ReactNode } from 'react'
import type { PropsRenderSlots, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots'
import { computeColumns } from './columns.ts'
import { computeColumns, SIDEBAR_AUTO_COLLAPSE, SIDEBAR_DEFAULT } from './columns.ts'
import type { createLayoutStore } from './stores.ts'
import css from './AppFrame.module.css'
@@ -127,7 +127,19 @@ export function AppFrame({
}
}, [])
const cols = computeColumns(viewport, panels.sidebar, detailsSession === undefined ? 0 : panels.details)
// Narrow viewports auto-collapse the sidebar; the store mirror keeps
// toggleSidebar's semantics right (narrow toggles flip the manual
// re-expand override, stores.ts). Collapsed is decided here, so the
// solver stays breakpoint-free: a narrow re-expand passes the preference
// (or the default when the wide preference is closed) and the center
// absorbs the squeeze.
const narrow = viewport < SIDEBAR_AUTO_COLLAPSE
useEffect(() => { actions.setNarrow(narrow) }, [actions, narrow])
const sidebarCollapsed = narrow ? !panels.narrowExpanded : panels.sidebar === 0
const sidebarPreference = sidebarCollapsed
? 0
: panels.sidebar === 0 ? SIDEBAR_DEFAULT : panels.sidebar
const cols = computeColumns(viewport, sidebarPreference, detailsSession === undefined ? 0 : panels.details)
const colsRef = useRef(cols)
colsRef.current = cols
@@ -154,7 +166,7 @@ export function AppFrame({
ref={frameRef}
className={css.frame}
style={{ gridTemplateColumns: `${cols.sidebar}px minmax(0, 1fr) ${cols.details}px` }}
data-sidebar-collapsed={panels.sidebar === 0 || undefined}
data-sidebar-collapsed={sidebarCollapsed || undefined}
data-details-collapsed={cols.details === 0 || undefined}
data-dragging={dragging || undefined}
>
@@ -162,9 +174,10 @@ export function AppFrame({
{/* Render-site slot call with live concession output: a closed
sidebar keeps the mounted slot at the compact-rail width, and the
component sees its rendered state as owner params decided here
(collapsed follows the preference, not the resolved width). */}
(collapsed follows the resolved rail, so a derived auto-collapse
renders the rail UI too). */}
{renderSlot('sidebar', {
collapsed: panels.sidebar === 0,
collapsed: sidebarCollapsed,
width: cols.sidebar,
})}
</div>
@@ -178,7 +191,7 @@ export function AppFrame({
<DetailsColumn>{renderSlot('details', {})}</DetailsColumn>
</>
{/* The collapsed rail is fixed-width: no resize handle while closed. */}
{panels.sidebar > 0 && <DragHandle side="sidebar" left={cols.sidebar} onStart={onSidebarStart} onDrag={onSidebarDrag} onEnd={onDragEnd} />}
{!sidebarCollapsed && <DragHandle side="sidebar" left={cols.sidebar} onStart={onSidebarStart} onDrag={onSidebarDrag} onEnd={onDragEnd} />}
{cols.details > 0 && <DragHandle side="details" left={viewport - cols.details} onStart={onDetailsStart} onDrag={onDetailsDrag} onEnd={onDragEnd} />}
</div>
)

7
packages/client/ui-layout/src/client/columns.ts
View File

@@ -8,6 +8,9 @@
* deficit as the last resort. Inputs are the layout store's plain width
* preferences (0 = closed); a closed sidebar resolves to the fixed
* SIDEBAR_COLLAPSED control rail while closed details resolve to zero width.
* The SIDEBAR_AUTO_COLLAPSE breakpoint is consumed by AppFrame, which decides
* the effective sidebar preference before solving; the solver itself stays
* breakpoint-free.
*/
/** Resolved widths for one frame; center may drop below CENTER_MIN only at the final fallback. */
@@ -24,6 +27,10 @@ export const SIDEBAR_MAX = 420
export const SIDEBAR_DEFAULT = 280
/** Closed-sidebar rail: a 24px icon column between 16px horizontal paddings. */
export const SIDEBAR_COLLAPSED = 56
/** Viewport width below which the sidebar auto-collapses to the rail (deepsuite
* LG breakpoint); a manual toggle below it re-expands over the squeezed center
* (stores.ts narrowExpanded). */
export const SIDEBAR_AUTO_COLLAPSE = 1024
/** Details drag clamp floor. */
export const DETAILS_MIN = 300
/** Details drag clamp ceiling. */

31
packages/client/ui-layout/src/client/stores.ts
View File

@@ -13,8 +13,14 @@ import {
SIDEBAR_DEFAULT, SIDEBAR_MAX, SIDEBAR_MIN,
} from './columns.ts'
/** Layout store state: panel width preferences in px (0 = closed). */
type LayoutState = { sidebar: number; details: number }
/**
* Layout store state: panel width preferences in px (0 = closed), plus the
* narrow-viewport pair — `narrow` mirrors AppFrame's breakpoint reading
* (viewport < SIDEBAR_AUTO_COLLAPSE) so toggleSidebar can pick semantics, and
* `narrowExpanded` is the manual override that re-expands the auto-collapsed
* sidebar over the squeezed center without rewriting the width preference.
*/
type LayoutState = { sidebar: number; details: number; narrow: boolean; narrowExpanded: boolean }
/**
* Annotation twin of the actions literal below (the export needs a declared
@@ -24,6 +30,7 @@ type LayoutActions = {
setSidebar: (draft: LayoutState, px: number) => void
setDetails: (draft: LayoutState, px: number) => void
toggleSidebar: (draft: LayoutState) => void
setNarrow: (draft: LayoutState, narrow: boolean) => void
openDetails: (draft: LayoutState) => void
closeDetails: (draft: LayoutState) => void
}
@@ -33,16 +40,30 @@ type LayoutActions = {
* closing a panel forgets its drag width — reopening restores the contract
* default. Actions are the complete write set: drag writes clamp
* into the panel's contract range and never cross the open/closed line;
* open/close transitions write 0 / the default explicitly.
* open/close transitions write 0 / the default explicitly. Below the
* auto-collapse breakpoint (AppFrame feeds setNarrow) the sidebar toggle
* flips the narrowExpanded override instead of the preference.
* @returns the store handle (spec + type + identity + factory in one).
*/
export function createLayoutStore(): EngineStoreHandle<LayoutState, LayoutActions> {
const handle = defineStore({
init: (): LayoutState => ({ sidebar: SIDEBAR_DEFAULT, details: 0 }),
init: (): LayoutState => ({ sidebar: SIDEBAR_DEFAULT, details: 0, narrow: false, narrowExpanded: false }),
actions: {
setSidebar: (d, px: number) => { d.sidebar = clampWidth(px, SIDEBAR_MIN, SIDEBAR_MAX) },
setDetails: (d, px: number) => { d.details = clampWidth(px, DETAILS_MIN, DETAILS_MAX) },
toggleSidebar: (d) => { d.sidebar = d.sidebar === 0 ? SIDEBAR_DEFAULT : 0 },
// Narrow toggles flip only the override: the width preference survives
// untouched, so re-widening restores the pre-squeeze layout.
toggleSidebar: (d) => {
if (d.narrow) d.narrowExpanded = !d.narrowExpanded
else d.sidebar = d.sidebar === 0 ? SIDEBAR_DEFAULT : 0
},
// Crossing the breakpoint in either direction drops the override: the
// narrow default is auto-collapsed, the wide state is the preference.
setNarrow: (d, narrow: boolean) => {
if (d.narrow === narrow) return
d.narrow = narrow
d.narrowExpanded = false
},
openDetails: (d) => { if (d.details === 0) d.details = DETAILS_DEFAULT },
closeDetails: (d) => { d.details = 0 },
},

44
packages/client/ui-layout/tests/app-frame.spec.tsx
View File

@@ -284,6 +284,50 @@ describe('AppFrame', () => {
})
})
describe('AppFrame — narrow-viewport auto-collapse', () => {
it('mounts collapsed below the breakpoint with no sidebar handle', () => {
frameWidth = 980
const { frame, slotCalls } = mountFrame()
expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
expect(frame.hasAttribute('data-sidebar-collapsed')).toBe(true)
expect(slotCalls.filter(c => c.key === 'sidebar').at(-1)!.props).toEqual({ collapsed: true, width: SIDEBAR_COLLAPSED })
expect(frame.querySelectorAll('[class*="handle"]')).toHaveLength(0)
})
it('narrow toggle re-expands over the squeezed center and back', () => {
frameWidth = 980
const { frame, instance } = mountFrame()
act(() => { instance.actions.toggleSidebar() })
expect(tracks(frame)).toEqual([280, 0])
expect(frame.hasAttribute('data-sidebar-collapsed')).toBe(false)
expect(frame.querySelectorAll('[class*="handle"]')).toHaveLength(1)
act(() => { instance.actions.toggleSidebar() })
expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
})
it('a wide-closed preference re-expands at the contract default while narrow', () => {
frameWidth = 1920
const { frame, instance } = mountFrame()
act(() => { instance.actions.toggleSidebar() }) // close while wide: preference 0
frameWidth = 980
act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
act(() => { instance.actions.toggleSidebar() })
expect(tracks(frame)).toEqual([280, 0])
expect(instance.getSnapshot().sidebar).toBe(0) // preference untouched
})
it('shrinking across the breakpoint auto-collapses; re-widening restores the drag width', () => {
const { frame, instance } = mountFrame()
act(() => { instance.actions.setSidebar(400) })
frameWidth = 980
act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
expect(tracks(frame)).toEqual([SIDEBAR_COLLAPSED, 0])
frameWidth = 1920
act(() => { fireResize?.(); vi.advanceTimersByTime(20) })
expect(tracks(frame)).toEqual([400, 0])
})
})
describe('AppFrame — guard branches', () => {
it('pointer moves without capture are ignored (no width write)', () => {
const { frame, instance } = mountFrame()

30
packages/client/ui-layout/tests/layout-store.spec.ts
View File

@@ -17,9 +17,9 @@ const PERSIST_KEY = 'dsh.layout.panels'
beforeEach(() => { localStorage.clear() })
describe('createLayoutStore', () => {
it('initializes the sidebar at its default width and details closed', () => {
it('initializes the sidebar at its default width, details closed, wide viewport assumed', () => {
const { store } = createLayoutStore().create()
expect(store.getSnapshot()).toEqual({ sidebar: SIDEBAR_DEFAULT, details: 0 })
expect(store.getSnapshot()).toEqual({ sidebar: SIDEBAR_DEFAULT, details: 0, narrow: false, narrowExpanded: false })
})
it('each create() is an independent instance (factory is not a singleton)', () => {
@@ -50,6 +50,30 @@ describe('createLayoutStore', () => {
expect(store.getSnapshot().sidebar).toBe(SIDEBAR_DEFAULT)
})
it('narrow toggleSidebar flips only the re-expand override; the width preference survives', () => {
const { store, actions } = createLayoutStore().create()
actions.setSidebar(400)
actions.setNarrow(true)
actions.toggleSidebar()
expect(store.getSnapshot()).toEqual({ sidebar: 400, details: 0, narrow: true, narrowExpanded: true })
actions.toggleSidebar()
expect(store.getSnapshot().narrowExpanded).toBe(false)
expect(store.getSnapshot().sidebar).toBe(400)
})
it('crossing the breakpoint drops the override; a same-value setNarrow keeps it', () => {
const { store, actions } = createLayoutStore().create()
actions.setNarrow(true)
actions.toggleSidebar()
expect(store.getSnapshot().narrowExpanded).toBe(true)
actions.setNarrow(true)
expect(store.getSnapshot().narrowExpanded).toBe(true)
actions.setNarrow(false)
expect(store.getSnapshot()).toMatchObject({ narrow: false, narrowExpanded: false })
actions.setNarrow(true)
expect(store.getSnapshot().narrowExpanded).toBe(false)
})
it('openDetails uses the contract default, preserves an open width, and closeDetails zeroes', () => {
const { store, actions } = createLayoutStore().create()
actions.openDetails()
@@ -72,6 +96,8 @@ describe('createLayoutStore', () => {
expect(second.store.getSnapshot()).toEqual({
sidebar: SIDEBAR_DEFAULT,
details: 0,
narrow: false,
narrowExpanded: false,
})
})
})

1
packages/client/ui-layout/tests/service.spec.ts
View File

@@ -13,6 +13,7 @@ function fakePanels(): PanelActions {
setSidebar: vi.fn(),
setDetails: vi.fn(),
toggleSidebar: vi.fn(),
setNarrow: vi.fn(),
openDetails: vi.fn(),
closeDetails: vi.fn(),
}

3
packages/client/ui-model/src/client/ModelSelect.module.css
View File

@@ -15,7 +15,8 @@
height: 28px;
padding: 0 4px 0 8px;
border: none;
border-radius: 8px;
/* Rounded chip chrome, matching the sibling permission trigger. */
border-radius: 24px;
outline: none;
background: transparent;
color: var(--dsw-alias-label-secondary);

43
packages/client/ui-models/src/client/ModelsSection.module.css
View File

@@ -26,7 +26,8 @@
.rows {
list-style: none;
margin: 0;
/* Extra air between the title/intro block and the first provider card. */
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
@@ -70,6 +71,10 @@
cursor: pointer;
}
.primaryButton:hover:not(:disabled) {
background: var(--dsw-alias-button-primary-hover);
}
.secondaryButton {
border: 1px solid var(--dsw-alias-border-l2);
border-radius: 999px;
@@ -80,14 +85,24 @@
cursor: pointer;
}
.secondaryButton:hover:not(:disabled) {
background: var(--dsw-alias-interactive-bg-hover-solid);
}
.dangerButton {
border: none;
border-radius: 8px;
padding: 4px 8px;
background: none;
color: var(--dsw-alias-state-error-primary);
font: inherit;
cursor: pointer;
}
.dangerButton:hover:not(:disabled) {
background: var(--dsw-alias-interactive-bg-hover-danger);
}
.primaryButton:disabled,
.secondaryButton:disabled,
.dangerButton:disabled {
@@ -147,6 +162,10 @@
cursor: pointer;
}
.linkButton:hover:not(:disabled) {
color: var(--dsw-alias-label-secondary);
}
.linkButton:disabled {
opacity: 0.5;
cursor: default;
@@ -171,17 +190,23 @@
}
.addButton {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
border: 1px solid var(--dsw-alias-border-l2);
border-radius: 999px;
padding: 8px 16px;
font: inherit;
font-size: 13px;
background: var(--dsw-alias-bg-layer-3);
color: inherit;
cursor: pointer;
}
.addButton:hover:not(:disabled) {
background: var(--dsw-alias-interactive-bg-hover-solid);
}
.addButton:disabled {
opacity: 0.5;
cursor: default;
@@ -246,6 +271,20 @@
color: var(--dsw-alias-label-dimmed);
}
/* Select variant of .input: replaces the OS arrow (which sits flush against
the right edge) with the shared 12px chevron inset like the composer's
.select chips; the right pad reserves its cell. */
.selectInput {
appearance: none;
padding-right: 32px;
/* Data-URI SVGs cannot resolve CSS variables; #81858C is the caption gray
shared by both themes. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
}
.error {
margin: 0;
font-size: 12px;

8
packages/client/ui-models/src/client/ModelsSection.tsx
View File

@@ -12,7 +12,7 @@
import { useState } from 'react'
import type { ReactNode } from 'react'
import type { IApiClient } from '@deepseek-ai/dsh-client-connection/client'
import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
import { Button, IconPlusOutline16, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-web-react'
import { messageOf } from './store.ts'
import type { ModelsSettingsState, ModelsSettingsStore, ProviderRow } from './store.ts'
@@ -245,7 +245,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
<div className={styles['field']}>
<span className={styles['fieldLabel']}>{t('provider')}</span>
<select
className={styles['input']}
className={`${styles['input']} ${styles['selectInput']}`}
value={addTarget.provider}
aria-label={t('provider')}
onChange={(event) => {
@@ -287,7 +287,9 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
setEditing(targetOf(first))
}}
>
{`+ ${t('add')}`}
{/* Same glyph as the composer's attach button. */}
<IconPlusOutline16 size={14} />
{t('add')}
</button>
)}
</div>

2
packages/client/ui-models/src/client/ProviderEditor.tsx
View File

@@ -275,7 +275,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
<div className={styles['field']}>
<span className={styles['fieldLabel']}>{t('effort')}</span>
<select
className={styles['input']}
className={`${styles['input']} ${styles['selectInput']}`}
value={stringAt(draft, effortField) ?? ''}
aria-label={t('effort')}
disabled={disabled}

14
packages/client/ui-models/tests/components.spec.tsx
View File

@@ -155,7 +155,7 @@ describe('ModelsSection', () => {
expect(screen.getByText('openai')).toBeTruthy()
expect(screen.queryByText('Active')).toBeNull()
expect(screen.queryByText('Inactive')).toBeNull()
expect(screen.getByText(`+ ${en.add}`)).toBeTruthy()
expect(screen.getByText(en.add)).toBeTruthy()
})
it('turns the setup card into a row once the credential reports configured', async () => {
@@ -332,7 +332,7 @@ describe('ModelsSection', () => {
it('adds a dormant provider with a derived reference and stores its key', async () => {
const { mutate, set } = await mountSection()
fireEvent.click(screen.getByText(`+ ${en.add}`))
fireEvent.click(screen.getByText(en.add))
const pick = await screen.findByLabelText<HTMLSelectElement>(en.provider)
expect([...pick.options].map(option => option.value)).toEqual(['anthropic', 'broken', 'plain'])
expect(pick.value).toBe('anthropic')
@@ -356,7 +356,7 @@ describe('ModelsSection', () => {
it('switches the add card target and degrades unknown or broken targets loudly', async () => {
await mountSection()
fireEvent.click(screen.getByText(`+ ${en.add}`))
fireEvent.click(screen.getByText(en.add))
const pick = await screen.findByLabelText<HTMLSelectElement>(en.provider)
fireEvent.change(pick, { target: { value: 'broken' } })
await screen.findByText(/unresolvable settings path/)
@@ -374,7 +374,7 @@ describe('ModelsSection', () => {
const { set } = await mountSection({
mutate: vi.fn(() => Promise.resolve(fail('llm-pi-ai: unknown pi-ai provider "bogus"'))),
})
fireEvent.click(screen.getByText(`+ ${en.add}`))
fireEvent.click(screen.getByText(en.add))
await screen.findByLabelText(en.provider)
const keys = screen.getAllByLabelText<HTMLInputElement>(en.keyInput)
fireEvent.change(keys[keys.length - 1] as HTMLInputElement, { target: { value: 'sk-x' } })
@@ -554,7 +554,7 @@ describe('ModelsSection', () => {
/>)
expect(screen.getByText(en.readOnly)).toBeTruthy()
expect(screen.getAllByText<HTMLButtonElement>(en.remove).every(button => button.disabled)).toBe(true)
expect(screen.getByText<HTMLButtonElement>(`+ ${en.add}`).disabled).toBe(true)
expect(screen.getByText<HTMLButtonElement>(en.add).disabled).toBe(true)
})
it('toggles the row editor closed on a second edit click and on cancel', async () => {
@@ -573,10 +573,10 @@ describe('ModelsSection', () => {
it('cancels the add card back to the add button', async () => {
await mountSection()
fireEvent.click(screen.getByText(`+ ${en.add}`))
fireEvent.click(screen.getByText(en.add))
await screen.findByLabelText(en.provider)
fireEvent.click(screen.getAllByText(en.cancel)[1] as HTMLElement)
await screen.findByText(`+ ${en.add}`)
await screen.findByText(en.add)
expect(screen.queryByLabelText(en.provider)).toBeNull()
})

21
packages/client/ui-primitives/src/Tooltip.module.css
View File

@@ -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; }
}

38
packages/client/ui-primitives/src/Tooltip.tsx
View File

@@ -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,29 @@ 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. Each measurement resets
// the base position before applying a direct style offset, allowing a shorter
// label or wider viewport to release a previous clamp without another render.
useLayoutEffect(() => {
if (pos === null) return
const clamp = () => {
const el = bubble.current
/* v8 ignore next -- pos is set only while the bubble is mounted. */
if (el === null) return
const EDGE_MARGIN = 12
el.style.left = `${pos.x}px`
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
el.style.left = `${pos.x + dx}px`
}
clamp()
window.addEventListener('resize', clamp)
return () => { window.removeEventListener('resize', clamp) }
}, [label, 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 +97,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 +127,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>
)}

5
packages/client/ui-primitives/src/clipboard.ts
View File

@@ -1,6 +1,5 @@
// Package-internal clipboard write, shared by every copy control in this
// package (CodeBlock's code copy, TerminalBlock's output copy). Not part of the
// public surface: consumers get the components, not the host detection.
// Host clipboard write shared by Web UI copy controls. Success feedback stays
// with each control; this seam only reports whether the host accepted a write.
/**
* Write text to the host clipboard, preferring the async Clipboard API and

38
packages/client/ui-primitives/src/icons/index.tsx
View File

@@ -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,23 @@ 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">
<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"
/>
</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) => (

1
packages/client/ui-primitives/src/index.ts
View File

@@ -20,6 +20,7 @@ export { FishLogo } from './FishLogo.tsx'
export { BrandWordmark } from './BrandWordmark.tsx'
export { Tooltip } from './Tooltip.tsx'
export type { TooltipSide } from './Tooltip.tsx'
export { writeClipboard } from './clipboard.ts'
export { JsonTree } from './JsonTree.tsx'
export type { JsonTreeProps, JsonTreeLabels } from './JsonTree.tsx'
export { TerminalBlock, DEFAULT_TERMINAL_MAX_LINES } from './TerminalBlock.tsx'

14
packages/client/ui-primitives/tests/icons.spec.tsx
View File

@@ -2,7 +2,9 @@
import { cleanup, render } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
import { IconApiOutline14, IconArchiveOutline20, IconFolderClose16, IconSendOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
import {
IconApiOutline14, IconArchiveOutline20, IconFolderClose16, IconGoalOutline16, IconSendOutline16,
} from '@deepseek-ai/dsh-client-ui-primitives'
afterEach(cleanup)
@@ -14,8 +16,8 @@ const icons = Object.fromEntries(
const iconNames = Object.keys(icons)
describe('ic_ds_ icon set', () => {
it('exports the full P-I set (45 deepsuite + 15 figma extracts + the hand-authored sparkle)', () => {
expect(iconNames.length).toBe(61)
it('exports the full P-I set (46 deepsuite + 17 figma extracts + the hand-authored sparkle)', () => {
expect(iconNames.length).toBe(64)
})
it.each(iconNames)('%s renders an svg with currentColor fills and no hardcoded palette', (name) => {
@@ -44,6 +46,12 @@ describe('ic_ds_ icon set', () => {
const archive = render(<IconArchiveOutline20 />)
expect(archive.container.querySelector('svg')!.getAttribute('width')).toBe('20')
})
it('renders reusable goal glyphs without document-global ids', () => {
const { container } = render(<><IconGoalOutline16 /><IconGoalOutline16 /></>)
expect(container.querySelector('[id]')).toBeNull()
expect(container.querySelector('[clip-path]')).toBeNull()
})
})
describe('FishLogo', () => {

95
packages/client/ui-primitives/tests/tooltip.spec.tsx
View File

@@ -43,8 +43,9 @@ describe('Tooltip', () => {
const bubble = screen.getByRole('tooltip')
expect(bubble.textContent).toBe('Open sidebar')
expect(bubble.getAttribute('data-side')).toBe('right')
// jsdom rects are all-zero: right placement lands at the +10 gutter.
expect(bubble.style.left).toBe('10px')
// jsdom rects are all-zero: right placement lands at the +10 gutter, then
// the zero-width measured rect clamps to the 12px edge margin (10 + 12).
expect(bubble.style.left).toBe('22px')
expect(bubble.style.top).toBe('0px')
fireEvent.mouseLeave(anchor)
expect(screen.queryByRole('tooltip')).toBeNull()
@@ -60,12 +61,100 @@ describe('Tooltip', () => {
fireEvent.focus(anchor)
const bubble = screen.getByRole('tooltip')
expect(bubble.getAttribute('data-side')).toBe('bottom')
expect(bubble.style.left).toBe('0px')
// Zero-width jsdom rect at x=0 clamps to the 12px edge margin.
expect(bubble.style.left).toBe('12px')
expect(bubble.style.top).toBe('8px')
fireEvent.blur(anchor)
expect(screen.queryByRole('tooltip')).toBeNull()
})
// jsdom's default rects are all-zero, so the clamp tests stub the measured
// rect (anchor and bubble share the prototype stub) and derive expectations
// from it: pos.x = anchor center, then shifted by the measured overflow.
const rect = (left: number, right: number): DOMRect =>
({ left, right, top: 0, bottom: 20, width: right - left, height: 20, x: left, y: 0, toJSON: () => ({}) })
it('clamps a bubble overflowing the right viewport edge back inside', () => {
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(900, 1100))
try {
render(
<Tooltip label="Wide" side="bottom">
<button type="button">anchor</button>
</Tooltip>,
)
fireEvent.mouseEnter(screen.getByText('anchor'))
// pos.x = 1000 (anchor center); measured right edge 1100 overflows the
// 1024 viewport's 12px safe margin (limit 1012) by 88, so the clamp
// shifts left to 912.
expect(screen.getByRole('tooltip').style.left).toBe('912px')
} finally {
spy.mockRestore()
}
})
it('reclamps after label and viewport width changes', () => {
const originalWidth = window.innerWidth
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
if (this.getAttribute('role') !== 'tooltip') return rect(900, 1000)
return this.textContent === 'Wide' ? rect(900, 1100) : rect(850, 950)
})
try {
const view = render(
<Tooltip label="Wide" side="bottom">
<button type="button">anchor</button>
</Tooltip>,
)
fireEvent.mouseEnter(screen.getByText('anchor'))
expect(screen.getByRole('tooltip').style.left).toBe('862px')
view.rerender(
<Tooltip label="Short" side="bottom">
<button type="button">anchor</button>
</Tooltip>,
)
expect(screen.getByRole('tooltip').style.left).toBe('950px')
Object.defineProperty(window, 'innerWidth', { configurable: true, value: 900 })
fireEvent(window, new Event('resize'))
expect(screen.getByRole('tooltip').style.left).toBe('888px')
} finally {
Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalWidth })
spy.mockRestore()
}
})
it('clamps a bubble past the left viewport edge back inside', () => {
const spy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(-20, 80))
try {
render(
<Tooltip label="Wide" side="bottom">
<button type="button">anchor</button>
</Tooltip>,
)
fireEvent.mouseEnter(screen.getByText('anchor'))
// pos.x = 30 (anchor center); measured left edge -20 underflows the
// 12px safe margin by 32, so the clamp shifts right to 62.
expect(screen.getByRole('tooltip').style.left).toBe('62px')
} finally {
spy.mockRestore()
}
})
it('supports top placement for anchors at the viewport bottom', () => {
render(
<Tooltip label="Above" side="top">
<button type="button">anchor</button>
</Tooltip>,
)
fireEvent.mouseEnter(screen.getByText('anchor'))
const bubble = screen.getByRole('tooltip')
expect(bubble.getAttribute('data-side')).toBe('top')
// jsdom rects are all-zero: top placement lands at the -8 gutter and the
// zero-width measured rect clamps left to the 12px edge margin.
expect(bubble.style.left).toBe('12px')
expect(bubble.style.top).toBe('-8px')
})
it('chains the anchor\'s own handlers ahead of the tooltip\'s', () => {
const onMouseEnter = vi.fn()
const onMouseLeave = vi.fn()

22
packages/client/ui-question/src/client/PlanReviewPanel.module.css
View File

@@ -9,7 +9,9 @@
.frame {
display: flex;
justify-content: center;
padding: 6px 24px 10px;
/* Sides = clearance + 16px: the card lands on the shared content width
(input card - 32) at every viewport. */
padding: 6px calc(var(--dsh-composer-side-clearance) + 16px) 10px;
}
.card {
@@ -17,7 +19,7 @@
overflow: hidden;
flex-direction: column;
width: 100%;
max-width: 776px;
max-width: var(--dsh-chat-content-width);
/* Composer seat sits in a fixed-height conversation column (overflow
hidden): cap the card against the viewport and scroll the plan, so the
strip and the decision row stay reachable on a long plan. */
@@ -93,11 +95,19 @@
gap: 8px;
}
@media (max-width: 720px) {
.frame {
padding: 6px 10px 10px;
}
/* The discuss verb stays a quiet text button beside the two decision
capsules: 14px glyph against the 14px label with a slightly wider gap, so
the icon reads as a prefix rather than a peer-sized control. */
.discuss {
gap: 6px;
color: var(--dsw-alias-label-secondary);
}
.discuss:hover:not(:disabled) {
color: var(--dsw-alias-label-primary);
}
@media (max-width: 720px) {
.card {
border-radius: 16px;
}

6
packages/client/ui-question/src/client/PlanReviewPanel.tsx
View File

@@ -73,21 +73,21 @@ export function PlanReviewPanel({ pending, review, t }: PlanReviewPanelProps) {
<div className={css.feedback} role="status">{error}</div>
<div className={css.actions}>
<Button
size="sm" variant="ghost" icon={<IconEditOutline16 />}
variant="ghost" className={css.discuss} icon={<IconEditOutline16 size={14} />}
disabled={busy} onClick={() => { settle(() => pending.cancel()) }}
>
{t('plan.discuss')}
</Button>
{decline !== undefined && (
<Button
size="sm" variant="outline" {...tooltip(decline.description)}
variant="outline" {...tooltip(decline.description)}
disabled={busy} onClick={() => { decide(decline.label) }}
>
{t('plan.decline')}
</Button>
)}
<Button
size="sm" variant="primary" {...tooltip(review.approve.description)}
variant="primary" {...tooltip(review.approve.description)}
disabled={busy} onClick={() => { decide(review.approve.label) }}
>
{t('plan.approve')}

13
packages/client/ui-question/src/client/QuestionComposer.module.css
View File

@@ -1,9 +1,10 @@
/* The takeover seats where the input card sits, so the frame mirrors the
InputBar geometry (side pad 32, card cap 800) to keep both edges flush. */
/* The takeover seats where the input card sits, centered on the InputBar
axis at the shared content width (input card - 32): sides = clearance +
16px so the relation also holds on narrow viewports. */
.frame {
display: flex;
justify-content: center;
padding: 6px 32px 10px;
padding: 6px calc(var(--dsh-composer-side-clearance) + 16px) 10px;
}
/* Figma Input 973:36348 body over the 1019:36938 header: no banner strip —
@@ -12,7 +13,7 @@
display: flex;
flex-direction: column;
width: 100%;
max-width: 800px;
max-width: var(--dsh-chat-content-width);
/* Composer seat sits in a fixed-height conversation column (overflow
hidden): cap the card against the viewport and scroll the option list
so header and footer actions stay reachable on long batches. */
@@ -366,10 +367,6 @@
}
@media (max-width: 720px) {
.frame {
padding: 6px 10px 10px;
}
.card {
border-radius: 16px;
}

4
packages/client/ui-sidebar/src/client/SidebarRoot.module.css
View File

@@ -16,6 +16,10 @@
background: var(--dsw-specific-sidebar-fill);
color: var(--dsw-alias-label-primary);
font-size: 14px;
/* The sidebar is elevated above the conversation surface, so a revealed
scrollbar uses the l2 pair. .quietBars hides it without changing layout. */
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}
/* Rail geometry (figma rail spec): 36x36 control boxes centered in the 56px

5
packages/client/ui-sidebar/src/client/SidebarRoot.tsx
View File

@@ -141,7 +141,7 @@ export function SidebarRoot({
)}
{/* Rail resting state is the whale mark; hovering swaps in the panel
icon (the expand affordance, figma sidebar-hover flow). */}
<Tooltip label={t('toggle.open')} disabled={wide}>
<Tooltip label={collapsed ? t('toggle.open') : t('toggle.collapse')} delayMs={500}>
<button
type="button"
className={clsx(css.iconButton, css.toggle)}
@@ -155,7 +155,8 @@ export function SidebarRoot({
</Tooltip>
</div>
<Tooltip label={t('session.new.label')} disabled={wide}>
{/* Expanded, the button carries its own label — tooltip only on the rail. */}
<Tooltip label={t('session.new.label')} delayMs={500} disabled={wide}>
<button
type="button"
className={css.newSession}

7
packages/client/ui-slash/src/client/MenuView.module.css
View File

@@ -9,8 +9,11 @@
bottom: calc(100% + 4px);
left: 0;
z-index: 100;
min-width: 260px;
max-width: 537px;
min-width: min(260px, 100%);
/* 537 is the design cap; the 100% clamp keeps the menu inside the composer
card when a narrow viewport shrinks the card below the cap (the overlay
anchor is exactly the card's width). */
max-width: min(537px, 100%);
/* Height cap: the 320px design maximum, clamped at runtime to the space
* above the composer (inline max-height set in MenuView.tsx). */
max-height: 320px;

4
packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css
View File

@@ -228,7 +228,9 @@
- var(--dsh-session-list-scrollbar-width)
- var(--dsh-session-list-scrollbar-offset)
);
padding-bottom: 12px;
/* Clears the 72px bottom fade overlay: at scroll end the last row sits
above the gradient instead of under it. */
padding-bottom: 48px;
scrollbar-gutter: stable;
}

20
packages/client/ui-workspace/src/client/WorkspaceBrowser.tsx
View File

@@ -78,14 +78,16 @@ function GroupByMenu({ groupBy, onPick, t }: {
// be cut off at the header's bounds.
portal
anchor={(
<button
type="button"
className={clsx(css.iconButton, css.wide)}
aria-label={t('groupBy.label')}
onClick={() => { setOpen(v => !v) }}
>
<IconPersonalizationOutline16 />
</button>
<Tooltip label={t('groupBy.label')} side="bottom" delayMs={500}>
<button
type="button"
className={clsx(css.iconButton, css.wide)}
aria-label={t('groupBy.label')}
onClick={() => { setOpen(v => !v) }}
>
<IconPersonalizationOutline16 />
</button>
</Tooltip>
)}
/>
)
@@ -550,7 +552,7 @@ export function WorkspaceBrowser({
picking affordance has nothing to offer here: the region hides the
button rather than leaving a dead one in the header. */}
{directoryFlowAvailable && (
<Tooltip label={t('workspace.add')} disabled={wide}>
<Tooltip label={t('workspace.add')} side="bottom" delayMs={500}>
<button
ref={wsPlusRef}
type="button"