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.

packages/client/ui-goal/src/client/GoalBar.module.css

@@ -91,7 +91,7 @@
 .actions {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 8px;
   flex: none;
 }
 

packages/client/ui-goal/src/client/GoalBar.tsx

@@ -11,7 +11,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import type { GoalSnapshot } from '@deepseek-ai/dsh-goal/client'
 import {
-  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
+  IconCheckOutline16, IconCloseOutline16, IconEditOutline16, IconPauseOutline16, IconPlayOutline16, IconSparkle16, IconTrashOutline16,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { GoalActionResult, GoalBarActions } from './slots.ts'
 import css from './GoalBar.module.css'
@@ -28,7 +28,7 @@ const PHASE_LABELS = {
   blocked: 'Blocked Goal',
 } as const
 
-export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
+export function GoalBar({ goal, onEdit, onPause, onResume, onClear }: GoalBarProps) {
   const [editing, setEditing] = useState(false)
   const [draft, setDraft] = useState('')
   const [pending, setPending] = useState(false)
@@ -120,6 +120,11 @@ export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
         <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="Pause goal" aria-label="Pause goal">
+              <IconPauseOutline16 />
+            </button>
+          )}
           {goal.phase === 'paused' && (
             <button type="button" className={css.iconBtn} disabled={pending} onClick={() => { void runAction(onResume) }} title="Resume goal" aria-label="Resume goal">
               <IconPlayOutline16 />
@@ -148,12 +153,13 @@ export function GoalBar({ goal, onEdit, onResume, onClear }: GoalBarProps) {
 export type GoalDockProps = import('@deepseek-ai/dsh-client-ui-slots').PropsRuntime<'conversation.input.dock'> & GoalBarActions
 
 /** Dock adapter: reads the host-computed 'goal' projection (whole value; absent or null renders nothing). */
-export function GoalDock({ useProjection, onEdit, onResume, onClear }: GoalDockProps) {
+export function GoalDock({ useProjection, onEdit, onPause, onResume, onClear }: GoalDockProps) {
   const projection = useProjection('goal')
   return (
     <GoalBar
       goal={projection === undefined ? undefined : projection === null ? null : projection.goal}
       onEdit={onEdit}
+      onPause={onPause}
       onResume={onResume}
       onClear={onClear}
     />

packages/client/ui-goal/src/client/index.ts

@@ -66,6 +66,11 @@ export function apply(ctx: ClientContext): void {
           if (ref === undefined) return noCurrentGoal
           return settle((await goals.edit({ sessionId, ref, objective })).result)
         },
+        onPause: async () => {
+          const ref = refOf(sessionId)
+          if (ref === undefined) return noCurrentGoal
+          return settle((await goals.pause({ sessionId, ref })).result)
+        },
         onResume: async () => {
           const ref = refOf(sessionId)
           if (ref === undefined) return noCurrentGoal

packages/client/ui-goal/src/client/slots.ts

@@ -19,6 +19,8 @@ export interface GoalBarActions {
    * @param objective - replacement objective text.
    */
   onEdit: (objective: string) => Promise<GoalActionResult>
+  /** Pause an active goal. */
+  onPause: () => Promise<GoalActionResult>
   /** Resume a paused goal. */
   onResume: () => Promise<GoalActionResult>
   /** Clear the current goal (tombstone). */

packages/client/ui-goal/tests/browser-plugin.spec.tsx

@@ -57,6 +57,7 @@ function bench(options: { projection?: GoalProjection | null | undefined; failWi
   const ref = { id: 'g-1', revision: 3 }
   ctx.provide('connection', { api: { goals: {
     edit: answer('goal.edit', { ref }),
+    pause: answer('goal.pause', { ref }),
     resume: answer('goal.resume', { ref }),
     clear: answer('goal.clear', { cleared: true as const }),
   } } })
@@ -100,13 +101,15 @@ describe('ui-goal browser plugin', () => {
     await b.fiber.await()
     const verbs = b.entry()!.inject!(sid('s1'))
     expect(await verbs.onEdit('New objective')).toEqual({ ok: true })
+    expect(await verbs.onPause()).toEqual({ ok: true })
     expect(await verbs.onResume()).toEqual({ ok: true })
     expect(await verbs.onClear()).toEqual({ ok: true })
-    expect(b.calls.map(c => c.method)).toEqual(['goal.edit', 'goal.resume', 'goal.clear'])
+    expect(b.calls.map(c => c.method)).toEqual(['goal.edit', 'goal.pause', 'goal.resume', 'goal.clear'])
     const ref = { id: 'g-1', revision: 5 }
     expect(b.calls[0]?.payload).toEqual({ sessionId: 's1', ref, objective: 'New objective' })
     expect(b.calls[1]?.payload).toEqual({ sessionId: 's1', ref })
     expect(b.calls[2]?.payload).toEqual({ sessionId: 's1', ref })
+    expect(b.calls[3]?.payload).toEqual({ sessionId: 's1', ref })
   })
 
   it('a null or absent projection short-circuits every verb without touching the wire', async () => {
@@ -114,7 +117,7 @@ describe('ui-goal browser plugin', () => {
       const b = bench({ projection })
       await b.fiber.await()
       const verbs = b.entry()!.inject!(sid('s1'))
-      for (const result of [await verbs.onEdit('x'), await verbs.onResume(), await verbs.onClear()]) {
+      for (const result of [await verbs.onEdit('x'), await verbs.onPause(), await verbs.onResume(), await verbs.onClear()]) {
         expect(result).toEqual({ ok: false, error: { code: 'no-current-goal', message: 'no current goal to mutate' } })
       }
       expect(b.calls).toHaveLength(0)
@@ -143,6 +146,7 @@ describe('GoalDock adapter', () => {
     const useProjection = vi.fn(() => projection)
     const actions: GoalBarActions = {
       onEdit: () => Promise.resolve({ ok: true }),
+      onPause: () => Promise.resolve({ ok: true }),
       onResume: () => Promise.resolve({ ok: true }),
       onClear: () => Promise.resolve({ ok: true }),
     }

packages/client/ui-goal/tests/goalbar.spec.tsx

@@ -25,6 +25,7 @@ function makeGoal(over: Partial<GoalSnapshot> = {}): GoalSnapshot {
 function makeActions() {
   return {
     onEdit: vi.fn<GoalBarActions['onEdit']>(() => Promise.resolve({ ok: true })),
+    onPause: vi.fn<GoalBarActions['onPause']>(() => Promise.resolve({ ok: true })),
     onResume: vi.fn<GoalBarActions['onResume']>(() => Promise.resolve({ ok: true })),
     onClear: vi.fn<GoalBarActions['onClear']>(() => Promise.resolve({ ok: true })),
   } satisfies GoalBarActions