feat(client): localize composer hints and rework input command interaction

Unify the /plan claimed hint with the plan placeholder through a locale namespace, localize slash menu group titles, replace the PermissionSelect native select with the Menu primitive, add a goal pause verb chain, clamp anchored popups to the viewport with scroll-into-view and outside-dismiss, and fix onPasteUpgrade insertedRange to account for the chip trailing gap.
2026-07-29 19:46:48 +08:00
parent c451b63016
commit 45c9205caf
46 changed files with 623 additions and 225 deletions
--- a/packages/client/ui-slash/src/client/MenuView.module.css
+++ b/packages/client/ui-slash/src/client/MenuView.module.css
@@ -11,8 +11,10 @@
  z-index: 100;
  min-width: 260px;
  max-width: 537px;
+  /* 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;
-  overflow-y: auto;
+  overflow: hidden;
  /* Elevated surface: the scrollbar thumb takes the l2 elevation tokens
     (see ui-theme styles/scrollbar.css for the rebinding contract). */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
@@ -26,6 +28,13 @@
  box-shadow: var(--dsw-shadow-lv3);
 }

+.viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+
 .item {
  display: flex;
  align-items: center;
@@ -75,6 +84,15 @@
  color: var(--dsw-alias-label-tertiary);
 }

+/* Heading row above a source group: non-interactive small grey text,
+ * padding aligned with items (mirrors ui-primitives Menu .label). */
+.groupTitle {
+  padding: 8px 10px;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 /* Pending-source row: same cell metrics, dimmed label. */
 .loading {
  display: flex;
--- a/packages/client/ui-slash/src/client/MenuView.tsx
+++ b/packages/client/ui-slash/src/client/MenuView.tsx
@@ -1,16 +1,21 @@
 /**
 * Trigger candidate menu: renders the SlashService menu store into the
 * conversation.input.overlay anchor. Closed state renders null (the overlay
- * slot stays mounted); groups render in roster order, pending groups as a
- * loading row; pointer picks route back through the service (combobox
- * pattern — focus never leaves the textarea, so rows are mousedown-handled
- * and the highlight is exposed via aria-activedescendant on the listbox).
+ * slot stays mounted); groups render in roster order under localized title
+ * rows, pending groups as a loading row; pointer picks route back through
+ * the service (combobox pattern — focus never leaves the textarea, so rows
+ * are mousedown-handled and the highlight is exposed via
+ * aria-activedescendant on the listbox).
 */
-import { useSyncExternalStore } from 'react'
+import { Fragment, useEffect, useRef, useSyncExternalStore } from 'react'
 import clsx from 'clsx'
+import { useAnchoredMaxHeight } from '@deepseek-ai/dsh-client-ui-primitives'
 import css from './MenuView.module.css'
 import type { MenuViewInjected } from './slots.ts'

+/** Design cap on the list height (figma SLASH 39:26572 MenuDropdown). */
+const MAX_HEIGHT = 320
+
 /** DOM id of one option row (the aria-activedescendant target). */
 function optionId(source: string, index: number): string {
  return `dsh-slash-option-${source}-${index}`
@@ -18,49 +23,86 @@ function optionId(source: string, index: number): string {

 /**
 * Render the candidate menu overlay entry.
- * @param props - injected face: the menu store and the pick route.
+ * @param props - injected face: the menu store, the pick route, and the menu-namespace translator.
 * @returns the dropdown while open; null while closed.
 */
-export function MenuView({ menu, onPick }: MenuViewInjected) {
+export function MenuView({ menu, onPick, onDismiss, t }: MenuViewInjected) {
  const state = useSyncExternalStore(
    fn => menu.subscribe(fn),
    () => menu.getSnapshot(),
  )
+  const listRef = useRef<HTMLDivElement>(null)
+  // The list is bottom-anchored above the composer; clamp the design cap to
+  // the space above it, re-measured on every store update (the anchor moves
+  // when the composer grows).
+  const maxHeight = useAnchoredMaxHeight(listRef, MAX_HEIGHT, state)
+  const highlight = state.open ? state.highlight : null
+  // Focus stays in the textarea (combobox pattern), so the browser never
+  // scrolls the active option into view on keyboard moves — do it here.
+  useEffect(() => {
+    if (highlight === null) return
+    document.getElementById(optionId(highlight.source, highlight.index))
+      ?.scrollIntoView({ block: 'nearest' })
+  }, [highlight])
+  // Dismiss on pointer outside the menu AND outside the composer card
+  // (clicking the textarea or bottom bar must not close the menu).
+  useEffect(() => {
+    if (!state.open) return
+    const onPointerDown = (ev: PointerEvent): void => {
+      if (!(ev.target instanceof Node)) return
+      if (listRef.current?.contains(ev.target)) return
+      const composerCard = listRef.current?.closest('[data-composer-card]')
+      if (composerCard?.contains(ev.target)) return
+      onDismiss()
+    }
+    document.addEventListener('pointerdown', onPointerDown, true)
+    return () => { document.removeEventListener('pointerdown', onPointerDown, true) }
+  }, [state.open, onDismiss])
  if (!state.open) return null
-  const { highlight } = state
  return (
    <div
+      ref={listRef}
      className={css.menu}
+      style={{ maxHeight }}
      role="listbox"
      aria-label="Trigger suggestions"
      aria-activedescendant={highlight !== null ? optionId(highlight.source, highlight.index) : undefined}
    >
-      {state.groups.map(group => group.status === 'pending'
-        ? <div key={group.source} className={css.loading} data-source={group.source}>Loading {group.source}…</div>
-        : group.items.map((item, index) => {
-          const active = highlight !== null && highlight.source === group.source && highlight.index === index
-          return (
-            <button
-              key={`${group.source}:${item.name}`}
-              id={optionId(group.source, index)}
-              type="button"
-              role="option"
-              aria-selected={active}
-              className={clsx(css.item, active && css.active)}
-              // mousedown, not click: the textarea keeps focus (combobox
-              // pattern) — preventing default stops the focus steal, and the
-              // pick runs before any blur-driven teardown.
-              onMouseDown={(ev) => {
-                ev.preventDefault()
-                onPick(group.source, index)
-              }}
-            >
-              {item.icon !== undefined && <span className={css.itemIcon} aria-hidden>{item.icon}</span>}
-              <span className={css.itemName}>{item.name}</span>
-              {item.description !== undefined && <span className={css.itemDescription}>{item.description}</span>}
-            </button>
-          )
-        }))}
+      <div className={css.viewport}>
+        {state.groups.map(group => (group.status === 'ready' && group.items.length === 0)
+          ? null
+          : (
+            <Fragment key={group.source}>
+              <div className={css.groupTitle} role="presentation" data-source={group.source}>{t(group.source)}</div>
+              {group.status === 'pending'
+                ? <div className={css.loading} data-source={group.source}>{t('loading')}</div>
+                : group.items.map((item, index) => {
+                  const active = highlight !== null && highlight.source === group.source && highlight.index === index
+                  return (
+                    <button
+                      key={`${group.source}:${item.name}`}
+                      id={optionId(group.source, index)}
+                      type="button"
+                      role="option"
+                      aria-selected={active}
+                      className={clsx(css.item, active && css.active)}
+                      // mousedown, not click: the textarea keeps focus (combobox
+                      // pattern) — preventing default stops the focus steal, and the
+                      // pick runs before any blur-driven teardown.
+                      onMouseDown={(ev) => {
+                        ev.preventDefault()
+                        onPick(group.source, index)
+                      }}
+                    >
+                      {item.icon !== undefined && <span className={css.itemIcon} aria-hidden>{item.icon}</span>}
+                      <span className={css.itemName}>{item.name}</span>
+                      {item.description !== undefined && <span className={css.itemDescription}>{item.description}</span>}
+                    </button>
+                  )
+                })}
+            </Fragment>
+          ))}
+      </div>
    </div>
  )
 }
--- a/packages/client/ui-slash/src/client/controller.ts
+++ b/packages/client/ui-slash/src/client/controller.ts
@@ -256,6 +256,13 @@ export class SlashController {
    this.refreshLexicon()
  }

+  /** External dismiss (e.g. pointer outside the composer area). */
+  dismiss(): void {
+    if (this.disposed) return
+    this.stopFetch()
+    this.reduce({ type: 'close' })
+  }
+
  /** Scope teardown: close and abort (the service deletes the map entry). */
  dispose(): void {
    this.disposed = true
--- a/packages/client/ui-slash/src/client/index.ts
+++ b/packages/client/ui-slash/src/client/index.ts
@@ -4,6 +4,8 @@
 * self-registers into the conversation.input.overlay slot. Frozen pipeline
 * contract in ./contract.ts; sources register through ctx.slash alone.
 */
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
 import { SlashService } from './service.ts'
 import type { MenuViewInjected } from './slots.ts'
@@ -29,8 +31,11 @@ declare module 'cordis' {
  }
 }

-/** Required services: controller resolution reads the session scope tree. */
-export const inject = ['sessions']
+/** Namespace owning the candidate-menu copy: group titles keyed by source name plus the pending row. */
+const MENU_NS = 'slash.menu'
+
+/** Required services: controller resolution reads the session scope tree; the menu copy is localized. */
+export const inject = ['sessions', 'locale']

 /**
 * Client plugin body: mount the service, then register MenuView into the
@@ -39,6 +44,13 @@ export const inject = ['sessions']
 */
 export function apply(ctx: ClientContext): void {
  ctx.plugin(SlashService)
+  ctx.effect(() => {
+    const disposers = [
+      ctx.locale.register(MENU_NS, 'zh', { command: '命令', skill: '技能', subagent: '子智能体', loading: '正在加载…' }),
+      ctx.locale.register(MENU_NS, 'en', { command: 'Commands', skill: 'Skills', subagent: 'Subagents', loading: 'Loading…' }),
+    ]
+    return () => { for (const dispose of disposers) dispose() }
+  }, 'ui-slash: menu dictionaries')
  // Conditional mount: 'conversation.input.overlay' is declared by the
  // conversation composer entry, and the conversation service is mounted
  // after that declaration lands on the ledger — its presence is the
@@ -59,6 +71,8 @@ export function apply(ctx: ClientContext): void {
        return {
          menu: controller.menu,
          onPick: (source, index) => { controller.pick(source, index) },
+          onDismiss: () => { controller.dismiss() },
+          t: scope.locale.bind(MENU_NS),
        }
      },
    }, MenuView), 'ui-slash: MenuView overlay registration')
--- a/packages/client/ui-slash/src/client/service.ts
+++ b/packages/client/ui-slash/src/client/service.ts
@@ -87,7 +87,7 @@ export class SlashService extends Service implements SlashServiceContract {
      actx,
      sessionId: id,
      roster: {
-        sources: trigger => live.sources.filter(s => s.trigger === trigger),
+        sources: trigger => live.sources.filter(s => s.trigger === trigger).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
        all: () => live.sources,
      },
    })
--- a/packages/client/ui-slash/src/client/slots.ts
+++ b/packages/client/ui-slash/src/client/slots.ts
@@ -9,6 +9,7 @@
 */
 // Type-only edge: the SlotMap augmentation below merges into this package's interface.
 import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import type { Translate } from '@deepseek-ai/dsh-client-locale/client'
 import type { SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import type { MenuState } from '../core/contract.ts'

@@ -35,4 +36,12 @@ export interface MenuViewInjected {
   * @param index - candidate index within the group.
   */
  onPick: (source: string, index: number) => void
+  /** Dismiss the menu (external pointer outside the composer area). */
+  onDismiss: () => void
+  /**
+   * Bound translator for the menu namespace: group titles keyed by source
+   * name (the locale fallback chain returns the key itself, so an unknown
+   * source shows its raw name) plus the pending-row text.
+   */
+  t: Translate
 }
--- a/packages/client/ui-slash/src/types.ts
+++ b/packages/client/ui-slash/src/types.ts
@@ -138,6 +138,8 @@ export interface SlashSource {
  readonly trigger: TriggerChar
  /** Menu group label; unique per trigger — duplicate registration throws. */
  readonly name: string
+  /** Menu group display order (lower = higher in the list; default 0). */
+  readonly order?: number
  candidates(session: ClientSessionContext, req: CandidateRequest): Promise<readonly SlashCandidate[]>
  /** Every pick lands here; claim/insert outcomes are executed by the pipeline via the scoped input events. */
  onPick(pick: SlashPick): PickOutcome