Merge remote-tracking branch 'origin/master' into worktree/web-multimodal-image-input

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()
 
@@ -186,6 +215,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 },
       }
     },

packages/client/ui-conversation/src/client/contract/slots.ts

@@ -274,6 +274,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). */

packages/client/ui-conversation/src/client/input/machine.ts

@@ -298,14 +298,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
   }
 
   /**
@@ -443,10 +452,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 []
   }

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

@@ -195,20 +195,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;
 }
 
@@ -240,7 +238,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);
 }
@@ -418,25 +416,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

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 { ComposerAttachment, ComposerBarProps } from '../contract/slots.ts'
 import { deriveDecorations } from '../input/decorations.ts'
 import { ImageLightbox } from './ImageLightbox.tsx'
@@ -29,7 +31,7 @@ export type InputBarProps = ComposerBarProps
 
 export function InputBar({
   useSession, useInput, inputActions, keyboard, addImages, removeImage, draftImages,
-  stop, command, renderSlot, useNotices, useLexicon, useProjection,
+  stop, command, translateHint, renderSlot, useNotices, useLexicon, useProjection,
   variant, placeholder, accessory, overlay, leftItems, rightItems, onAdd, addLabel = 'Add attachment',
 }: InputBarProps) {
   const input = useInput(s => s)
@@ -41,6 +43,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.
@@ -357,7 +361,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>)
     }
   }
 
@@ -376,6 +385,7 @@ export function InputBar({
       {dropError !== null && <div className={css.error} role="alert">{dropError}</div>}
       <div
         className={clsx(css.card, dragActive && css.dragActive)}
+        data-composer-card
         onDragEnter={onDragEnter}
         onDragOver={onDragOver}
         onDragLeave={onDragLeave}
@@ -423,7 +433,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={(event) => {
               setDropError(null)

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

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>
+      }
+    />
   )
 }