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-conversation/package.json
+++ b/packages/client/ui-conversation/package.json
@@ -39,6 +39,7 @@
    "clsx": "^2.0.0"
  },
  "peerDependencies": {
+    "@deepseek-ai/dsh-client-locale": "^0.0.1",
    "@deepseek-ai/dsh-client-runtime": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-primitives": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-slash": "^0.0.1",
@@ -48,10 +49,10 @@
    "react": "^18.2.0"
  },
  "devDependencies": {
+    "@deepseek-ai/dsh-client-locale": "workspace:^",
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
+    "@deepseek-ai/dsh-goal": "workspace:^",
    "@deepseek-ai/dsh-plan-mode": "workspace:^",
-    "@deepseek-ai/dsh-session-projection": "workspace:^",
-    "@deepseek-ai/dsh-tool-todo": "workspace:^",
    "@deepseek-ai/dsh-client-ui-layout": "workspace:^",
    "@deepseek-ai/dsh-client-ui-primitives": "workspace:^",
    "@deepseek-ai/dsh-client-ui-slash": "workspace:^",
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/packages/client/ui-conversation/src/client/apply.ts
@@ -3,6 +3,8 @@ import type { Context } from 'cordis'
 import type { BoundActions } from '@deepseek-ai/dsh-client-ui-slots'
 import type { ISessions, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+// Type-only: pulls the locale plugin's Context merge (ctx.locale).
+import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type { ViewTab } from './contract/views.ts'
 import type {
  ApprovalWait, ChatViewInjected, ComposerBarInjected, ComposerChainProps, ConversationInjected,
@@ -25,7 +27,7 @@ import { ConversationSession } from './skeleton/ConversationSession.tsx'
 import { DetailsPanel } from './skeleton/DetailsPanel.tsx'

 /** Services required by the conversation plugin. */
-export const inject = ['slots', 'layout', 'sessions', 'workspaces']
+export const inject = ['slots', 'layout', 'sessions', 'workspaces', 'locale']

 /** Resolve the session-scoped conversation face (scope-addressed send/cancel), failing loud. */
 function scopedConversation(sessions: ISessions, id: SessionId): IConversation {
@@ -50,6 +52,33 @@ export function apply(ctx: Context): void {
  const layout = ctx.layout
  const slots = ctx.slots

+  // Command hint locale: friendly placeholder text for claimed commands. The
+  // claimed /plan hint and the plan-mode textarea placeholder share one
+  // string: both describe the same next action.
+  const HINT_NS = 'command.hint'
+  const PLAN_HINT_ZH = '描述你的任务以生成计划'
+  const PLAN_HINT_EN = 'describe your task to generate plan'
+  ctx.effect(() => {
+    const disposers = [
+      ctx.locale.register(HINT_NS, 'zh', {
+        plan: PLAN_HINT_ZH,
+        goal: '输入目标，智能体将持续执行',
+        'goal.active': '当前目标进行中。可输入 edit 修改 / pause 暂停 / resume 继续 / clear 清除',
+        'placeholder.plan': PLAN_HINT_ZH,
+        'placeholder.default': '给智能体发消息',
+      }),
+      ctx.locale.register(HINT_NS, 'en', {
+        plan: PLAN_HINT_EN,
+        goal: 'describe the objective for a long-running task',
+        'goal.active': 'goal active — edit / pause / resume / clear',
+        'placeholder.plan': PLAN_HINT_EN,
+        'placeholder.default': 'Message the agent',
+      }),
+    ]
+    return () => { for (const dispose of disposers) dispose() }
+  }, 'ui-conversation: command hint dictionaries')
+  const translateHint = ctx.locale.bind(HINT_NS)
+
  // Apply-time construction keeps store identity bound to this fiber.
  const chatStore = createChatStore()

@@ -159,6 +188,7 @@ export function apply(ctx: Context): void {
          const result = await session.command(line)
          return result.ok && result.value.matched
        },
+        translateHint,
        hooks: { notices: shell.notices, lexicon: shell.lexicon },
      }
    },
--- a/packages/client/ui-conversation/src/client/contract/slots.ts
+++ b/packages/client/ui-conversation/src/client/contract/slots.ts
@@ -257,6 +257,8 @@ export interface ComposerBarInjected {
   * Resolves admission: false = rejected/unmatched/transport failure.
   */
  command: (line: string) => Promise<boolean>
+  /** Locale-aware hint translator for claimed command placeholders. */
+  translateHint: (key: string) => string
  /** Registrant hooks compartment: the renderer binds these to useNotices/useLexicon. */
  hooks: {
    /** Latest surfaced notice (null after none; seq keys re-render of repeats). */
--- a/packages/client/ui-conversation/src/client/input/machine.ts
+++ b/packages/client/ui-conversation/src/client/input/machine.ts
@@ -297,14 +297,23 @@ export class InputMachine {
    return []
  }

-  /** Shared chip-insertion transaction: replace [span) with one placeholder occurrence (insert-ref and paste-upgrade both land here). */
-  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): void {
+  /**
+   * Shared chip-insertion transaction: replace [span) with one placeholder
+   * occurrence (insert-ref and paste-upgrade both land here). A separating
+   * space follows the chip unless one is already next.
+   * @returns the inserted length (placeholder plus optional gap).
+   */
+  private replaceSpanWithChip(reference: ReferenceInsert, span: TokenSpan): number {
    this.pushTxn()
    this.typingRun = undefined
-    this.reconcile({ start: span.start, end: span.end, insertedLength: 1 })
+    const tail = this.draft.slice(span.end)
+    const gap = tail.length === 0 || tail[0] !== ' ' ? ' ' : ''
+    const inserted = PLACEHOLDER + gap
+    this.reconcile({ start: span.start, end: span.end, insertedLength: inserted.length })
    this.withMinted([this.mint(reference, span.start)])
-    this.adopt(this.draft.slice(0, span.start) + PLACEHOLDER + this.draft.slice(span.end))
+    this.adopt(this.draft.slice(0, span.start) + inserted + tail)
    this.watchClaim()
+    return inserted.length
  }

  /**
@@ -442,10 +451,10 @@ export class InputMachine {
    if (attempt === undefined || attempt.attemptId !== attemptId) return []
    if (this.phase !== 'plain' && this.phase !== 'claimed') return []
    if (!this.casOk(span) || span.start === span.end) return []
-    this.replaceSpanWithChip(reference, span)
+    const insertedLength = this.replaceSpanWithChip(reference, span)
    this.paste = {
      ...attempt,
-      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + 1 - (span.end - span.start) },
+      insertedRange: { start: attempt.insertedRange.start, end: attempt.insertedRange.end + insertedLength - (span.end - span.start) },
    }
    return []
  }
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
@@ -125,20 +125,18 @@
  position: absolute;
  inset: 0;
  overflow: hidden;
-  color: transparent;
+  color: var(--dsw-alias-label-primary);
  pointer-events: none;
 }

 .hlToken {
-  border-radius: 4px;
-  /* GOAL 稿 amber token emphasis (state warn pair; glyphs stay the textarea's). */
-  background: var(--dsw-alias-state-warn-tertiary);
-  color: transparent;
+  background-color: transparent;
+  color: var(--dsw-alias-state-warn-label);
 }

 .hlSegment {
  border-radius: 4px;
-  background: var(--dsw-alias-interactive-bg-hover);
+  background-color: transparent;
  color: transparent;
 }

@@ -170,7 +168,7 @@
  border: none;
  outline: none;
  background: transparent;
-  color: var(--dsw-alias-label-primary);
+  color: transparent;
  /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
  caret-color: var(--dsw-alias-state-business-primary);
 }
@@ -348,25 +346,13 @@
   draft's own glyphs — advance untouched, so the two layers cannot drift.
   Chip family colors; clone keeps rounded ends on soft-wrap fragments. */
 .textRef {
-  color: transparent;
  background-color: transparent;
+  color: var(--dsw-alias-state-business-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
-  position: relative;
 }
 .textRef:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-
-  width: 100%;
-  height: 100%;
-
-  border-radius: 6px;
-  background: rgba(97, 135, 216, 0.22);
-  transform: translate(-2px, -1px);
-  padding: 2px 4px;
+  display: none;
 }

 /* Reference chip: rendered in the backdrop at the placeholder offset. Hard
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
@@ -13,6 +13,8 @@ import { IconPlusOutline16 } 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'
+// Type-only: the `goal` projection key merge (hint disambiguation).
+import type {} from '@deepseek-ai/dsh-goal/client'
 import type { ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
 import { PermissionSelect } from './PermissionSelect.tsx'
@@ -27,7 +29,7 @@ export interface InputBarError {
 export type InputBarProps = ComposerBarProps

 export function InputBar({
-  useSession, useInput, inputActions, keyboard, stop, command, renderSlot, useNotices, useLexicon, useProjection,
+  useSession, useInput, inputActions, keyboard, stop, command, translateHint, renderSlot, useNotices, useLexicon, useProjection,
  variant, placeholder, accessory, overlay, leftItems, rightItems, onAdd, addLabel = 'Add attachment',
 }: InputBarProps) {
  const input = useInput(s => s)
@@ -39,6 +41,8 @@ export function InputBar({
  // Plan mode swaps the textarea placeholder (the projection is the folded
  // host value; owner-prop placeholders — hero, session-unavailable — win).
  const planActive = useProjection('plan', plan => plan !== undefined && (plan.pending ? !plan.active : plan.active))
+  // Absent (undefined: no frame yet) and cleared (null) both mean no goal.
+  const hasGoal = useProjection('goal', goal => goal != null)
  // Prompt failures are ordinary failures (no create/attach transaction
  // exists anymore): the strip renders promptError, the draft stays in the
  // machine, and the user resubmits.
@@ -296,7 +300,12 @@ export function InputBar({
    }
    pushPlain(draft.length)
    if (deco.hint !== null) {
-      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{deco.hint}</span>)
+      // Claim tokens are shaped `/name ` (trailing space); trim to the bare name.
+      const commandName = input.claim?.token.slice(1).trim() ?? ''
+      const hintKey = commandName === 'goal' && hasGoal ? 'goal.active' : commandName
+      const translated = translateHint(hintKey)
+      const displayHint = translated !== hintKey ? translated : deco.hint
+      backdrop.push(<span key="hint" className={css.hint} data-decoration="hint">{displayHint}</span>)
    }
  }

@@ -312,7 +321,7 @@ export function InputBar({
          {notice.text}
        </div>
      )}
-      <div className={css.card}>
+      <div className={css.card} data-composer-card>
        {overlay !== undefined && <div className={css.overlayAnchor}>{overlay}</div>}
        {accessory !== undefined && <div className={css.accessory}>{accessory}</div>}
        {/* Mirror-div auto-grow: the hidden mirror renders draft+'\n' and stretches the wrapper
@@ -329,7 +338,7 @@ export function InputBar({
            data-phase={input.phase}
            placeholder={placeholder ?? (disabled
              ? 'Session unavailable'
-              : planActive ? 'describe your task to generate plan' : 'Message the agent')}
+              : planActive ? translateHint('placeholder.plan') : translateHint('placeholder.default'))}
            rows={2}
            onChange={onChange}
            onKeyDown={onKeyDown}
--- a/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.module.css
@@ -1,49 +1,43 @@
-/* Composer bottom-row permission chip (draft start.jpeg `Read-only ∨`): a
-   quiet text chip with a chevron; hover paints the standard interactive pill.
-   The native select is stretched invisibly over the chip so the platform
-   dropdown does the menu work — keyboard/AT semantics come free. */
-
-.root {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.chip {
+.trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
-  padding: 6px 8px;
-  border-radius: 8px;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 14px;
-  line-height: 20px;
-  pointer-events: none; /* the overlaid select owns the interaction */
-}
-
-.root:hover .chip {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.chevron {
-  color: var(--dsw-alias-label-caption);
-}
-
-/* Invisible native select stretched over the chip: real menu, zero drawing. */
-.select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
+  min-width: 0;
+  max-width: 220px;
+  height: 28px;
+  padding: 0 4px 0 8px;
  border: none;
+  border-radius: 8px;
+  outline: none;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
  cursor: pointer;
 }

-.select:disabled {
+.trigger:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
+}
+
+.trigger:disabled {
+  color: var(--dsw-alias-label-dimmed);
  cursor: default;
 }

-.root:has(.select:disabled) .chip {
-  opacity: 0.5;
+.triggerLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-caption);
 }
--- a/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
+++ b/packages/client/ui-conversation/src/client/skeleton/PermissionSelect.tsx
@@ -1,27 +1,14 @@
-// PermissionSelect: the composer bottom-row permission chip (draft
-// start.jpeg's `Read-only ∨` control), the Access seat's wired occupant.
-// Options and the current value read from the host-computed `permissions`
-// projection (baseline block + push frames — no fetch, no mount timing);
-// key absence (a permission-less composition, or a Draft with no host
-// session yet) renders nothing. The visible chip is presentation only — an
-// invisible native select stretched over it owns the menu and interaction.
-// A switch submits the `/permission <preset>` command line (the one write
-// path); the control shows the picked value optimistically and disables
-// until the admission result, then re-follows the projection — the pushed
-// frame confirms the switch, and a failed/unmatched submit falls back to
-// the still-authoritative projection value (`custom` is shown as the
-// current value but never offered as a target — the host omits it from
-// switchable options).
-
 import { useState } from 'react'
 import type { PermissionSelect as PermissionSelectValue } from '@deepseek-ai/dsh-permission/client'
+import { Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { MenuEntry } from '@deepseek-ai/dsh-client-ui-primitives'
 import css from './PermissionSelect.module.css'

 /**
 * Display transform: kebab-case machine names render as title-case labels
- * (`workspace-write` → `Workspace Write`). Presentation-only — the wire
- * vocabulary and the host's advertised names are untouched; a host-configured
- * name that is not kebab-case (contains spaces or uppercase) passes through.
+ * (`workspace-write` → `Workspace Write`); non-kebab host-configured names
+ * pass through. Twin of the /permission popup's (client ui-permission) — the
+ * two permission surfaces must show the same text.
 */
 function displayName(name: string): string {
  if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(name)) return name
@@ -29,52 +16,57 @@ function displayName(name: string): string {
 }

 export interface PermissionSelectProps {
-  /** The host-computed select, or undefined while the capability is absent. */
  value: PermissionSelectValue | undefined
-  /** Session-removed lock (the bar's chrome disable state). */
  locked: boolean
-  /** Submit one slash-command line; resolves admission (false = rejected/unmatched). */
  command: (line: string) => Promise<boolean>
 }

 export function PermissionSelect({ value, locked, command }: PermissionSelectProps) {
-  // Optimistic pick, shown while the admission round-trip runs; null follows
-  // the projection (the pushed frame lands the confirmed value there).
  const [pick, setPick] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+
  if (value === undefined) return null

  const currentValue = pick ?? value.currentValue
  const current = value.options.find(option => option.value === currentValue)
+  const busy = pick !== null

-  const onChange = (next: string): void => {
-    if (next === value.currentValue) return
-    setPick(next)
-    void command(`/permission ${next}`)
+  const items: MenuEntry[] = value.options
+    .filter(o => o.value !== 'custom')
+    .map(option => ({ id: option.value, label: displayName(option.name) }))
+
+  const choose = (id: string): void => {
+    setOpen(false)
+    if (id === value.currentValue) return
+    setPick(id)
+    void command(`/permission ${id}`)
      .catch(() => false)
      .then(() => { setPick(null) })
  }

  return (
-    <label className={css.root} title={current?.description}>
-      <span className={css.chip}>
-        {displayName(current?.name ?? currentValue)}
-        <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>
-      </span>
-      <select
-        className={css.select}
-        aria-label="Access mode"
-        value={currentValue}
-        disabled={locked || pick !== null}
-        onChange={(e) => { onChange(e.target.value) }}
-      >
-        {value.options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.value === 'custom'}>
-            {displayName(option.name)}
-          </option>
-        ))}
-      </select>
-    </label>
+    <Menu
+      open={open}
+      items={items}
+      selectedId={currentValue}
+      onSelect={choose}
+      onClose={() => { setOpen(false) }}
+      side="top"
+      anchor={
+        <button
+          type="button"
+          className={css.trigger}
+          aria-label={`Access mode, current: ${displayName(current?.name ?? currentValue)}`}
+          title={current?.description}
+          disabled={locked || busy}
+          onClick={() => { setOpen(!open) }}
+        >
+          <span className={css.triggerLabel}>{displayName(current?.name ?? currentValue)}</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>
+        </button>
+      }
+    />
  )
 }
--- a/packages/client/ui-conversation/tests/apply-inject.spec.tsx
+++ b/packages/client/ui-conversation/tests/apply-inject.spec.tsx
@@ -17,6 +17,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
 import type { SessionBehaviorOverrides } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { ISession, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type {
@@ -49,6 +50,7 @@ async function bench() {
  })
  const layoutFake = { openDetails: vi.fn(), closeDetails: vi.fn() }
  runtime.provide('layout', layoutFake)
+  runtime.provide('locale', new LocaleService(runtime.ctx))

  // The AppFrame role: the conversation-package slots must be declared by a
  // live entry before apply can contribute into them.
--- a/packages/client/ui-conversation/tests/chat-apply.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-apply.spec.tsx
@@ -10,6 +10,7 @@

 import { describe, expect, it, vi } from 'vitest'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'

@@ -22,6 +23,7 @@ async function bench() {
  await runtime.sessions.add(
    { id: CHILD, summary: { title: 'C', displayTitle: 'C', parentId: ROOT } }, { current: false })
  runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
+  runtime.provide('locale', new LocaleService(runtime.ctx))

  // Declared by ui-layout's root entry in production; the test root declares
  // them here so the contributions land.
--- a/packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx
@@ -17,6 +17,7 @@ import type {
  ToolResultNode, WorkspaceListState,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import { createSlotRenderer } from '@deepseek-ai/dsh-client-web-react'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'

@@ -125,7 +126,7 @@ async function bench(snapshot: ConversationSnapshot) {
  }
  ctx.provide('workspaces', workspaces)
  ctx.provide('layout', layout)
-  ctx.provide('i18n', { bind: () => (key: string) => key })
+  ctx.provide('locale', new LocaleService(ctx))

  slots.install(createSlotRenderer())
  slots.register({
--- a/packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx
+++ b/packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx
@@ -15,6 +15,7 @@ import { cleanup, fireEvent } from '@testing-library/react'
 import type { ISession, SessionId, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { PropsRenderSlots } from '@deepseek-ai/dsh-client-ui-slots'
 import { SlotTestRuntime } from '@deepseek-ai/dsh-client-test-runtime'
+import { LocaleService } from '@deepseek-ai/dsh-client-locale/client'
 import { apply, inject } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'

@@ -53,6 +54,7 @@ async function bench(nodes: ToolResultNode[]) {
  const runtime = await SlotTestRuntime.create()
  const layout = { openDetails: vi.fn(), closeDetails: vi.fn() }
  runtime.provide('layout', layout)
+  runtime.provide('locale', new LocaleService(runtime.ctx))
  await runtime.sessions.add({
    id: SID,
    summary: { title: 'S', displayTitle: 'S' },
@@ -180,6 +182,7 @@ describe('registrant load-order seam', () => {
  it("suspends a registrant on inject: ['slots', 'conversation'] until the service (and the hole) exists", async () => {
    const runtime = await SlotTestRuntime.create()
    runtime.provide('layout', { openDetails: vi.fn(), closeDetails: vi.fn() })
+    runtime.provide('locale', new LocaleService(runtime.ctx))
    await runtime.root.declare(LAYOUT_CHILDREN, AppRoot)

    // Third-party posture, mounted BEFORE ui-conversation: real fiber inject
--- a/packages/client/ui-conversation/tests/input-bar.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-bar.spec.tsx
@@ -42,6 +42,7 @@ interface BenchOptions {
  promptError?: ConversationSnapshot['promptError']
  variant?: 'hero' | 'composer'
  placeholder?: string
+  translateHint?: (key: string) => string
  accessory?: React.ReactNode
  overlay?: React.ReactNode
  leftItems?: React.ReactNode
@@ -100,6 +101,11 @@ function bench(over?: BenchOptions) {
    useLexicon: bindSnapshotSelector(shell.lexicon),
    stop,
    command: () => Promise.resolve(true),
+    // Mirrors the en 'command.hint' locale entries the production apply wires in.
+    translateHint: over?.translateHint ?? ((key: string) => ({
+      'placeholder.default': 'Message the agent',
+      'placeholder.plan': 'describe your task to generate plan',
+    } as Record<string, string>)[key] ?? key),
    renderSlot,
    variant: over?.variant ?? 'composer',
    ...(over?.placeholder !== undefined ? { placeholder: over.placeholder } : {}),
@@ -292,6 +298,19 @@ describe('decorations', () => {
    expect(view.container.querySelector('[data-decoration="token"]')).not.toBeNull()
  })

+  it('a locale entry for the claimed command overrides the raw claim hint (trailing-space token)', () => {
+    const dict: Record<string, string> = { goal: '输入目标，智能体将持续执行' }
+    const { view, shell } = bench({ translateHint: key => dict[key] ?? key })
+    act(() => {
+      shell.setDraft('/goal ')
+      shell.beginCommand(
+        { token: '/goal ', hint: '[<objective>|clear|edit <objective>|pause|resume]', submit: () => Promise.resolve({ kind: 'success' as const }) },
+        { start: 0, end: 6, draftRev: shell.snapshot.draftRev },
+      )
+    })
+    expect(view.container.querySelector('[data-decoration="hint"]')?.textContent).toBe('输入目标，智能体将持续执行')
+  })
+
  it('an inserted reference renders as a chip at its placeholder offset', () => {
    const { view, shell } = bench()
    act(() => {
@@ -374,7 +393,7 @@ describe('placeholder chrome and control seats', () => {
    const { view, slotCalls } = bench()
    expect(view.getByLabelText('Add attachment')).toBeTruthy()
    // Capability absent (no projection value): the chip renders nothing.
-    expect(view.queryByLabelText('Access mode')).toBeNull()
+    expect(view.queryByLabelText(/^Access mode/)).toBeNull()
    // Both seats dispatched, nothing rendered.
    expect(slotCalls.map(c => c.key)).toEqual(['conversation.input.plan', 'conversation.input.model'])
    expect(view.queryByLabelText('Plan mode')).toBeNull()
@@ -390,15 +409,19 @@ describe('placeholder chrome and control seats', () => {
      currentValue: 'workspace-write',
    }
    const { view } = bench({ permissions })
-    const select = view.getByLabelText('Access mode') as HTMLSelectElement
-    expect(select.value).toBe('workspace-write')
-    // Title-case display is presentation only; the option values stay machine names.
-    expect([...select.options].map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
-    fireEvent.change(select, { target: { value: 'danger-full-access' } })
+    const trigger = view.getByLabelText(/^Access mode/) as HTMLButtonElement
+    // Title-case display is presentation only; the menu ids stay machine names.
+    expect(trigger.textContent).toBe('Workspace Write')
+    fireEvent.click(trigger)
+    const items = view.getAllByRole('menuitem')
+    expect(items.map(o => o.textContent)).toEqual(['Workspace Write', 'Danger Full Access'])
+    fireEvent.click(items[1]!)
    // Optimistic pick + disable until admission resolves (command stub resolves true).
-    expect(select.disabled).toBe(true)
+    const busy = view.getByLabelText(/^Access mode/) as HTMLButtonElement
+    expect(busy.textContent).toBe('Danger Full Access')
+    expect(busy.disabled).toBe(true)
    await act(async () => {})
-    expect(select.disabled).toBe(false)
+    expect((view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(false)
  })

  it('a registered entry fills its seat and receives the locked owner prop', () => {
@@ -420,9 +443,9 @@ describe('placeholder chrome and control seats', () => {
    const permissions = { options: [{ value: 'workspace-write', name: 'workspace-write' }], currentValue: 'workspace-write' }
    const { view } = bench({ disabled: true, permissions })
    expect((view.getByLabelText('Add attachment') as HTMLButtonElement).disabled).toBe(true)
-    expect((view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(true)
+    expect((view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(true)
    cleanup()
    const live = bench({ running: true, permissions })
-    expect((live.view.getByLabelText('Access mode') as HTMLSelectElement).disabled).toBe(false)
+    expect((live.view.getByLabelText(/^Access mode/) as HTMLButtonElement).disabled).toBe(false)
  })
 })
--- a/packages/client/ui-conversation/tests/input-machine.spec.ts
+++ b/packages/client/ui-conversation/tests/input-machine.spec.ts
@@ -260,10 +260,10 @@ describe('input-machine: insert-ref and the occurrence table', () => {
    m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 0, 4) })
    m.dispatch({ type: 'draft-changed', draft: `${P} and /alp`, editRange: { start: 1, end: 1, insertedLength: 9 } })
    m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 6, 10) })
-    expect(m.state.draft).toBe(`${P} and ${P}`)
+    expect(m.state.draft).toBe(`${P} and ${P} `)
    expect(m.state.occurrences.map(o => o.occurrenceId)).toEqual([1, 2])
    // Delete the first chip whole; the second survives with its own identity.
-    m.dispatch({ type: 'draft-changed', draft: ` and ${P}`, editRange: { start: 0, end: 1, insertedLength: 0 } })
+    m.dispatch({ type: 'draft-changed', draft: ` and ${P} `, editRange: { start: 0, end: 1, insertedLength: 0 } })
    expect(m.state.occurrences).toEqual([expect.objectContaining({ occurrenceId: 2, offset: 5 })])
  })

@@ -273,7 +273,7 @@ describe('input-machine: insert-ref and the occurrence table', () => {
    m.dispatch({ type: 'begin-command', claim: claimOf('goal'), span: spanOf(m, 0, 3) })
    m.dispatch({ type: 'draft-changed', draft: '/goal ask @wor' })
    m.dispatch({ type: 'insert-ref', reference: refOf('worker-1', 'subagent'), span: spanOf(m, 10, 14) })
-    expect(m.state.draft).toBe(`/goal ask ${P}`)
+    expect(m.state.draft).toBe(`/goal ask ${P} `)
    expect(m.state.phase).toBe('claimed')
    expect(m.state.occurrences).toHaveLength(1)
  })
@@ -350,10 +350,10 @@ describe('input-machine: newline transaction (F1)', () => {
    m.dispatch({ type: 'draft-changed', draft: 'ab @wor' })
    m.dispatch({ type: 'insert-ref', reference: refOf('w'), span: spanOf(m, 3, 7) })
    m.dispatch({ type: 'newline', selection: { start: 2, end: 2 } })
-    expect(m.state.draft).toBe(`ab\n ${P}`)
+    expect(m.state.draft).toBe(`ab\n ${P} `)
    expect(m.state.occurrences[0]?.offset).toBe(4)
    m.dispatch({ type: 'undo' })
-    expect(m.state.draft).toBe(`ab ${P}`)
+    expect(m.state.draft).toBe(`ab ${P} `)
  })

  it('replaces a selection, breaks the claim prefix when leading, and rejects out-of-bounds', () => {
@@ -410,7 +410,7 @@ describe('input-machine: consume-token guards', () => {
    m.dispatch({ type: 'draft-changed', draft: '/model @wor' })
    m.dispatch({ type: 'insert-ref', reference: refOf('w'), span: spanOf(m, 7, 11) })
    m.dispatch({ type: 'consume-token', guard: { kind: 'span', span: spanOf(m, 0, 7) } })
-    expect(m.state.draft).toBe(P)
+    expect(m.state.draft).toBe(`${P} `)
    expect(m.state.occurrences[0]?.offset).toBe(0)
  })
 })
@@ -490,7 +490,7 @@ describe('input-machine: undo / redo', () => {
    m.dispatch({ type: 'draft-changed', draft: '', editRange: { start: 0, end: 1, insertedLength: 0 } })
    expect(m.state.occurrences).toEqual([])
    m.dispatch({ type: 'undo' })
-    expect(m.state.draft).toBe(P)
+    expect(m.state.draft).toBe(`${P} `)
    expect(m.state.occurrences).toHaveLength(1)
  })

@@ -555,9 +555,9 @@ describe('input-machine: paste plane', () => {
    m.dispatch({ type: 'paste-upgrade', attemptId: 1, span: spanOf(m, 0, 6), reference: refOf('alpha') })
    expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 7 })
    m.dispatch({ type: 'paste-upgrade', attemptId: 1, span: spanOf(m, 2, 7), reference: refOf('beta') })
-    expect(m.state.draft).toBe(`${P} ${P}`)
+    expect(m.state.draft).toBe(`${P} ${P} `)
    expect(m.state.occurrences.map(o => o.ref)).toEqual(['alpha', 'beta'])
-    expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 3 })
+    expect(m.state.paste?.insertedRange).toEqual({ start: 0, end: 4 })
  })

  it('a stale span CAS drops one upgrade without ending the attempt', () => {
@@ -634,8 +634,8 @@ describe('input-machine: projectClipboard', () => {
    m.dispatch({ type: 'insert-ref', reference: refOf('alpha'), span: spanOf(m, 4, 8) })
    m.dispatch({ type: 'draft-changed', draft: `use ${P} then /bet`, editRange: { start: 5, end: 5, insertedLength: 10 } })
    m.dispatch({ type: 'insert-ref', reference: refOf('beta'), span: spanOf(m, 11, 15) })
-    expect(m.state.draft).toBe(`use ${P} then ${P}`)
-    expect(projectClipboard(m.state)).toBe('use /alpha then /beta')
+    expect(m.state.draft).toBe(`use ${P} then ${P} `)
+    expect(projectClipboard(m.state)).toBe('use /alpha then /beta ')
  })

  it('is the identity on a chip-free draft', () => {
--- a/packages/client/ui-conversation/tests/input-matrix.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-matrix.spec.tsx
@@ -48,6 +48,7 @@ function mountBar(shell: SessionInputShell, over?: { running?: boolean; disabled
    renderSlot: (() => null) as InputBarProps['renderSlot'],
    stop: vi.fn(),
    command: () => Promise.resolve(true),
+    translateHint: (key: string) => key,
    variant: 'composer',
  }
  return render(<InputBar {...props} />)
--- a/packages/client/ui-conversation/tests/input-scenarios.spec.tsx
+++ b/packages/client/ui-conversation/tests/input-scenarios.spec.tsx
@@ -134,6 +134,7 @@ async function scopedBench(register?: (slash: SlashService) => void) {
    renderSlot: (() => null) as InputBarProps['renderSlot'],
    stop: vi.fn(),
    command: () => Promise.resolve(true),
+    translateHint: (key: string) => key,
    variant: 'composer',
  }
  const view = render(<InputBar {...barProps} />)
--- a/packages/client/ui-conversation/tests/skeleton.spec.tsx
+++ b/packages/client/ui-conversation/tests/skeleton.spec.tsx
@@ -124,6 +124,7 @@ function mount(
          useLexicon={bindSnapshotSelector(wiring.lexicon)}
          stop={stop}
          command={() => Promise.resolve(true)}
+          translateHint={(key: string) => key}
          renderSlot={(() => null) as InputBarProps['renderSlot']}
          {...bar}
        />
--- a/packages/client/ui-conversation/tsconfig.json
+++ b/packages/client/ui-conversation/tsconfig.json
@@ -29,6 +29,9 @@
    {
      "path": "../../plan/plan-mode"
    },
+    {
+      "path": "../../goal/goal"
+    },
    {
      "path": "../../todo/tool-todo"
    },