fix(client): preserve keyboard focus hints without hover

apps/web/tests/hover-input.e2e.ts

@@ -6,6 +6,46 @@ import { launchWebScaffold, seedSession, watchConsole } from './scaffold.ts'
 import { createChatScrollFixture } from './chat-scroll-fixture.ts'
 import { connectFreshWorkspace, saveFailureShot } from './support.ts'
 
+it.each([false, true])('shows the new-session shortcut on keyboard focus with touch=%s', async (hasTouch) => {
+  const scaffold = await launchWebScaffold()
+  onTestFinished(() => scaffold.close())
+  const browser = await chromium.launch()
+  onTestFinished(() => browser.close())
+  const context = await browser.newContext({ viewport: { width: 1280, height: 900 }, hasTouch, locale: 'en-US' })
+  await context.addInitScript(() => { Object.defineProperty(navigator, 'platform', { value: 'MacIntel' }) })
+  const page = await context.newPage()
+  onTestFailed(() => saveFailureShot(page, `new-session-focus-${String(hasTouch)}`))
+  await page.goto(scaffold.authenticatedUrl)
+  const button = page.getByRole('button', { name: 'New session', exact: true }).filter({ has: page.locator('kbd') })
+  await button.waitFor()
+  const shortcut = button.locator('[class*="newSessionShortcut"]')
+  const mask = button.locator('[class*="newSessionLabelMask"]')
+  const opacity = () => shortcut.evaluate(element => getComputedStyle(element).opacity)
+  const maskImage = () => mask.evaluate(element => getComputedStyle(element).maskImage)
+  expect(await page.evaluate(() => matchMedia('(hover: none)').matches)).toBe(hasTouch)
+  expect(await opacity()).toBe('0')
+  expect(await maskImage()).toBe('none')
+  await button.focus()
+  await page.keyboard.press('Shift+Tab')
+  await page.keyboard.press('Tab')
+  expect(await button.evaluate(element => element === document.activeElement && element.matches(':focus-visible'))).toBe(true)
+  expect(await opacity()).toBe('1')
+  expect(await maskImage()).not.toBe('none')
+  await page.keyboard.press('Tab')
+  expect(await opacity()).toBe('0')
+  expect(await maskImage()).toBe('none')
+  if (hasTouch) {
+    await button.tap()
+    expect(await button.evaluate(element => element.matches(':focus-visible'))).toBe(false)
+    expect(await opacity()).toBe('0')
+    expect(await maskImage()).toBe('none')
+  } else {
+    await button.hover()
+    expect(await opacity()).toBe('1')
+    expect(await maskImage()).not.toBe('none')
+  }
+})
+
 it.each([false, true])('keeps workspace and archived search actions reachable with touch=%s', async (hasTouch) => {
   const scaffold = await launchWebScaffold()
   onTestFinished(() => scaffold.close())

packages/client/ui-sidebar/README.i18n.yaml

@@ -18,8 +18,8 @@
   en: a970f0547496634f
   zh: 36ef9a85b26e19f1
 /deepseek-ai-dsh-client-ui-sidebar/use-this-package/brand-and-new-session:
-  en: e68a91220fd47f98
-  zh: 531277d0fc42767f
+  en: f2c2254325cea5db
+  zh: c9ef643b431f8328
 /deepseek-ai-dsh-client-ui-sidebar/use-this-package/global-panel-entries:
   en: b109498d88367117
   zh: 6d407f265bacdb0d

packages/client/ui-sidebar/README.md

@@ -31,7 +31,7 @@ The sidebar is the navigation shell: users see the brand, start new sessions, co
 
 ### Brand and New Session
 
-The expanded brand row renders `sidebar.brand.mark` and `sidebar.brand.name` as independent single slots; the collapsed rail renders the same mark slot. On Web and Windows desktop, clicking the expanded brand starts a new session; hovering or focusing it shows no tooltip. Without occupants, the shell uses the fish mark and a localized local-build label. A complete build stacks a code badge below the label as `version[-commit][-dirty]`, using `DSH_CLIENT_VERSION`, the optional 7-character `DSH_CLIENT_COMMIT_HASH`, and `DSH_CLIENT_GIT_DIRTY=true`; missing version metadata omits the badge. Clicking the fallback mark or label of such a build copies that badge text instead of starting a session, also on macOS desktop, and a successful write shows a Version copied toast. New Session targets the explicit Workspace used by a scoped action, otherwise the current Session's Workspace, otherwise the most recently active Workspace; when none exists it clears into the blank New Session page. The expanded New Session button displays the effective binding as trailing grey text on hover or keyboard focus. While the shortcut is visible, the centered icon and label fade before it when space is narrow; CSS reserves the shortcut’s width without measuring the button. Icon-only controls retain tooltips with platform-formatted keycaps, including the resident macOS header control when the sidebar is hidden. All controls expose `aria-keyshortcuts`.
+The expanded brand row renders `sidebar.brand.mark` and `sidebar.brand.name` as independent single slots; the collapsed rail renders the same mark slot. On Web and Windows desktop, clicking the expanded brand starts a new session; hovering or focusing it shows no tooltip. Without occupants, the shell uses the fish mark and a localized local-build label. A complete build stacks a code badge below the label as `version[-commit][-dirty]`, using `DSH_CLIENT_VERSION`, the optional 7-character `DSH_CLIENT_COMMIT_HASH`, and `DSH_CLIENT_GIT_DIRTY=true`; missing version metadata omits the badge. Clicking the fallback mark or label of such a build copies that badge text instead of starting a session, also on macOS desktop, and a successful write shows a Version copied toast. New Session targets the explicit Workspace used by a scoped action, otherwise the current Session's Workspace, otherwise the most recently active Workspace; when none exists it clears into the blank New Session page. The expanded New Session button displays the effective binding as trailing grey text on keyboard focus regardless of hover capability, and on hover when the device supports it. While the shortcut is visible, the centered icon and label fade before it when space is narrow; CSS reserves the shortcut’s width without measuring the button. Icon-only controls retain tooltips with platform-formatted keycaps, including the resident macOS header control when the sidebar is hidden. All controls expose `aria-keyshortcuts`.
 
 ### Global panel entries
 

packages/client/ui-sidebar/README.zh.md

@@ -31,7 +31,7 @@ dsh Web 客户端的侧边栏让用户识别当前构建、启动新会话、将
 
 ### 品牌与 New Session
 
-展开的品牌行把 `sidebar.brand.mark` 与 `sidebar.brand.name` 渲染为两个独立的 single slot；收起轨道则渲染同一个 mark slot。在 Web 和 Windows 桌面端，点击展开态的品牌会新建会话，悬停或聚焦时不显示 tooltip。没有占位者时，外壳使用鱼形标记和本地化的本地构建标签。完整构建会在标签下方显示代码徽标；该徽标使用 `DSH_CLIENT_VERSION`、可选的 7 位 `DSH_CLIENT_COMMIT_HASH` 与 `DSH_CLIENT_GIT_DIRTY=true` 组装成 `version[-commit][-dirty]`；缺少版本元数据时不显示徽标。此类构建中点击回退的标记或标签会复制该徽标文本而非新建会话，macOS 桌面端同样适用；写入成功后弹出“版本号复制成功”toast。New Session 优先使用作用域操作明确指定的 Workspace，否则使用当前 Session 所属 Workspace，再否则使用最近活跃 Workspace；一个 Workspace 都没有时则清空选择，进入空白 New Session 页面。 展开态的新建会话按钮在悬停或键盘聚焦时于右侧以灰色文字显示当前有效绑定。快捷键可见且空间较窄时，居中的图标与文字在快捷键之前渐隐；CSS 为快捷键保留宽度，无需测量按钮。纯图标控件保留使用平台键位样式的 tooltip，侧栏隐藏时常驻的 macOS 头部控件也保持一致。所有控件均提供 `aria-keyshortcuts`。
+展开的品牌行把 `sidebar.brand.mark` 与 `sidebar.brand.name` 渲染为两个独立的 single slot；收起轨道则渲染同一个 mark slot。在 Web 和 Windows 桌面端，点击展开态的品牌会新建会话，悬停或聚焦时不显示 tooltip。没有占位者时，外壳使用鱼形标记和本地化的本地构建标签。完整构建会在标签下方显示代码徽标；该徽标使用 `DSH_CLIENT_VERSION`、可选的 7 位 `DSH_CLIENT_COMMIT_HASH` 与 `DSH_CLIENT_GIT_DIRTY=true` 组装成 `version[-commit][-dirty]`；缺少版本元数据时不显示徽标。此类构建中点击回退的标记或标签会复制该徽标文本而非新建会话，macOS 桌面端同样适用；写入成功后弹出“版本号复制成功”toast。New Session 优先使用作用域操作明确指定的 Workspace，否则使用当前 Session 所属 Workspace，再否则使用最近活跃 Workspace；一个 Workspace 都没有时则清空选择，进入空白 New Session 页面。 展开态的新建会话按钮在键盘聚焦时于右侧以灰色文字显示当前有效绑定，不受设备悬停能力限制；支持悬停的设备也会在悬停时显示。快捷键可见且空间较窄时，居中的图标与文字在快捷键之前渐隐；CSS 为快捷键保留宽度，无需测量按钮。纯图标控件保留使用平台键位样式的 tooltip，侧栏隐藏时常驻的 macOS 头部控件也保持一致。所有控件均提供 `aria-keyshortcuts`。
 
 ### 全局面板入口
 

packages/client/ui-sidebar/src/client/SidebarRoot.module.css

@@ -486,8 +486,17 @@
 }
 
 .newSessionLabelMask { flex: 1; min-width: 0; }
+
+.newSession:focus-visible .newSessionLabelMask:has(+ .newSessionShortcut) {
+  overflow: hidden;
+  mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
+}
+
 @media (hover: hover) {
-  .newSession:is(:hover, :focus-visible) .newSessionLabelMask:has(+ .newSessionShortcut) { overflow: hidden; mask-image: linear-gradient(to right, black calc(100% - 16px), transparent); }
+  .newSession:hover .newSessionLabelMask:has(+ .newSessionShortcut) {
+    overflow: hidden;
+    mask-image: linear-gradient(to right, black calc(100% - 16px), transparent);
+  }
 }
 .newSessionContent { display: flex; width: 100cqw; align-items: center; justify-content: center; gap: 6px; }
 .newSessionContent > svg { flex: none; }
@@ -500,8 +509,14 @@
   font-weight: 400;
 }
 
+.newSession:focus-visible .newSessionShortcut {
+  opacity: 1;
+}
+
 @media (hover: hover) {
-  .newSession:is(:hover, :focus-visible) .newSessionShortcut { opacity: 1; }
+  .newSession:hover .newSessionShortcut {
+    opacity: 1;
+  }
 }
 
 .panelList {