dsh-taskboard 0.5.4 → 0.6.0

package/src/client/board/ImportModal.tsx

@@ -10,6 +10,7 @@ import { useRef, useState } from 'react'
 import type { BoardController } from '../controller.ts'
 import type { ImportPreviewResponse } from '../../shared/api.ts'
 import { useAlert } from './AlertModal.tsx'
+import { useT } from '../i18n/runtime.ts'
 
 /** One classified row (create / overwrite). */
 function PlanRow({ row }: { row: { id: string; title: string; status: string } }) {
@@ -26,6 +27,7 @@ function PlanRow({ row }: { row: { id: string; title: string; status: string } }
  * @param controller - the controller.
  */
 export function ImportModal({ controller }: { controller: BoardController }) {
+  const t = useT()
   const [fileName, setFileName] = useState('')
   const [parsed, setParsed] = useState<unknown>(null)
   const [parseError, setParseError] = useState<string | undefined>(undefined)
@@ -55,7 +57,7 @@ export function ImportModal({ controller }: { controller: BoardController }) {
           if (p !== undefined) setPlan(p)
         })
       } catch {
-        setParseError('文件不是合法 JSON')
+        setParseError(t('imp.parseError'))
       }
     })
   }
@@ -73,8 +75,8 @@ export function ImportModal({ controller }: { controller: BoardController }) {
       setConfirmReplace(false)
       if (r === undefined) return
       setResult(r.mode === 'replace'
-        ? `整册替换完成：导入 ${r.created + r.overwritten} 张（原 ${r.replacedTotal} 张已整册备份）`
-        : `合并完成：新增 ${r.created} 张、覆盖 ${r.overwritten} 张`)
+        ? t('imp.result.replace', { n: r.created + r.overwritten, total: r.replacedTotal ?? 0 })
+        : t('imp.result.merge', { n: r.created, m: r.overwritten }))
     })
   }
 
@@ -82,14 +84,14 @@ export function ImportModal({ controller }: { controller: BoardController }) {
 
   return (
     <div className="dsh-atb-modal-backdrop" onClick={e => { if (e.target === e.currentTarget) close() }}>
-      <div className="dsh-atb-modal dsh-atb-imp" role="dialog" aria-modal="true" aria-label="导入台账">
+      <div className="dsh-atb-modal dsh-atb-imp" role="dialog" aria-modal="true" aria-label={t('imp.aria')}>
         <div className="dsh-atb-modal-head">
           <span className="dsh-atb-modal-headicon">⬆</span>
           <div className="dsh-atb-modal-headtext">
-            <h3>导入台账</h3>
-            <p>选择导出的 JSON 备份文件：先预览、再合并或整册替换</p>
+            <h3>{t('imp.title')}</h3>
+            <p>{t('imp.subtitle')}</p>
           </div>
-          <button type="button" className="dsh-atb-modal-close" aria-label="关闭" onClick={close}>✕</button>
+          <button type="button" className="dsh-atb-modal-close" aria-label={t('shared.close')} onClick={close}>✕</button>
         </div>
         <div className="dsh-atb-modal-body">
           <div className="dsh-atb-imp-picker">
@@ -101,38 +103,38 @@ export function ImportModal({ controller }: { controller: BoardController }) {
             />
             {fileName.length > 0 && <span className="dsh-atb-imp-filename">{fileName}</span>}
           </div>
-          <div className="dsh-atb-imp-note">⬇ JSON 导出的文件即为同格式备份，可直接导入恢复；导入文件的 schemaVersion 必须与当前版本一致。</div>
+          <div className="dsh-atb-imp-note">{t('imp.note')}</div>
 
           {parseError !== undefined && <div className="dsh-atb-imp-error">{parseError}</div>}
-          {plan === undefined && parseError === undefined && fileName.length > 0 && <div className="dsh-atb-empty2">预览中…</div>}
+          {plan === undefined && parseError === undefined && fileName.length > 0 && <div className="dsh-atb-empty2">{t('imp.previewing')}</div>}
 
           {plan !== undefined && (
             <>
               <div className="dsh-atb-imp-stats">
-                <div className="dsh-atb-imp-stat" data-tone="ok"><b>{plan.create.length}</b><span>新增</span></div>
-                <div className="dsh-atb-imp-stat" data-tone="warn"><b>{plan.overwrite.length}</b><span>覆盖（同 id）</span></div>
-                <div className="dsh-atb-imp-stat" data-tone={plan.invalid.length > 0 ? 'bad' : undefined}><b>{plan.invalid.length}</b><span>无效（跳过）</span></div>
+                <div className="dsh-atb-imp-stat" data-tone="ok"><b>{plan.create.length}</b><span>{t('imp.stat.create')}</span></div>
+                <div className="dsh-atb-imp-stat" data-tone="warn"><b>{plan.overwrite.length}</b><span>{t('imp.stat.overwrite')}</span></div>
+                <div className="dsh-atb-imp-stat" data-tone={plan.invalid.length > 0 ? 'bad' : undefined}><b>{plan.invalid.length}</b><span>{t('imp.stat.invalid')}</span></div>
               </div>
 
               {plan.create.length > 0 && (
                 <div className="dsh-atb-imp-sec">
-                  <h4>新增任务</h4>
+                  <h4>{t('imp.sec.create')}</h4>
                   <div className="dsh-atb-imp-list">{plan.create.map(r => <PlanRow key={r.id} row={r} />)}</div>
                 </div>
               )}
               {plan.overwrite.length > 0 && (
                 <div className="dsh-atb-imp-sec">
-                  <h4>覆盖任务（整卡替换，含执行历史与评论）</h4>
+                  <h4>{t('imp.sec.overwrite')}</h4>
                   <div className="dsh-atb-imp-list">{plan.overwrite.map(r => <PlanRow key={r.id} row={r} />)}</div>
                 </div>
               )}
               {plan.invalid.length > 0 && (
                 <div className="dsh-atb-imp-sec">
-                  <h4>无效条目（不会导入）</h4>
+                  <h4>{t('imp.sec.invalid')}</h4>
                   <div className="dsh-atb-imp-list">
                     {plan.invalid.map((r, i) => (
                       <div key={r.id ?? `invalid-${i}`} className="dsh-atb-imp-row" data-tone="bad" title={r.id ?? ''}>
-                        <span className="dsh-atb-imp-row-title">{r.id ?? '（无 id）'}</span>
+                        <span className="dsh-atb-imp-row-title">{r.id ?? t('imp.noId')}</span>
                         <span className="dsh-atb-imp-row-status">{r.reason}</span>
                       </div>
                     ))}
@@ -142,12 +144,12 @@ export function ImportModal({ controller }: { controller: BoardController }) {
 
               <div className="dsh-atb-mode-picker">
                 <button type="button" className="dsh-atb-mode-opt" data-on={mode === 'merge'} onClick={() => { setMode('merge'); setConfirmReplace(false) }}>
-                  <span className="dsh-atb-mode-name">⊕ 合并</span>
-                  <span className="dsh-atb-mode-hint">新增 + 按 id 覆盖，其余不动</span>
+                  <span className="dsh-atb-mode-name">{t('imp.mode.merge')}</span>
+                  <span className="dsh-atb-mode-hint">{t('imp.mode.mergeHint')}</span>
                 </button>
                 <button type="button" className="dsh-atb-mode-opt" data-on={mode === 'replace'} onClick={() => setMode('replace')}>
-                  <span className="dsh-atb-mode-name">💣 整册替换</span>
-                  <span className="dsh-atb-mode-hint">清空当前台账，以导入文件为准（先自动备份）</span>
+                  <span className="dsh-atb-mode-name">{t('imp.mode.replace')}</span>
+                  <span className="dsh-atb-mode-hint">{t('imp.mode.replaceHint')}</span>
                 </button>
               </div>
 
@@ -158,11 +160,11 @@ export function ImportModal({ controller }: { controller: BoardController }) {
         <div className="dsh-atb-modal-foot">
           <span className="dsh-atb-modal-hint">
             {mode === 'replace'
-              ? confirmReplace ? '⚠ 再次点击确认执行整册替换（不可撤销，已自动备份）' : '整册替换需要二次确认'
-              : '合并只写入预览中列出的任务'}
+              ? confirmReplace ? t('imp.foot.replaceConfirm') : t('imp.foot.replaceNeedConfirm')
+              : t('imp.foot.mergeHint')}
           </span>
           <span className="dsh-atb-modal-footbtns">
-            <button type="button" className="dsh-atb-btn" onClick={close}>{result !== undefined ? '关闭' : '取消'}</button>
+            <button type="button" className="dsh-atb-btn" onClick={close}>{result !== undefined ? t('shared.close') : t('shared.cancel')}</button>
             <button
               type="button"
               className="dsh-atb-btn"
@@ -171,7 +173,7 @@ export function ImportModal({ controller }: { controller: BoardController }) {
               disabled={plan === undefined || busy}
               onClick={commit}
             >
-              {mode === 'replace' && confirmReplace ? '确认整册替换' : '执行导入'}
+              {mode === 'replace' && confirmReplace ? t('imp.action.confirmReplace') : t('imp.action.run')}
             </button>
           </span>
         </div>

package/src/client/board/SettingsModal.tsx

@@ -9,12 +9,13 @@
  */
 import { useState } from 'react'
 import type { BoardController } from '../controller.ts'
-import { DEFAULT_ISOLATION, type IsolationMode } from '../../shared/protocol.ts'
+import { DEFAULT_ISOLATION, defaultPermissionOf, defaultSyncExternalSessionsOf, type IsolationMode, type PermissionMode } from '../../shared/protocol.ts'
+import { useT, type Translate } from '../i18n/runtime.ts'
 
-/** The isolation options with one-line hints (mirrors the task form). */
-const ISOLATION_OPTIONS: ReadonlyArray<{ value: IsolationMode; name: string; hint: string }> = [
-  { value: 'none', name: '📁 原目录执行', hint: '不使用 git，直接在项目目录工作（出厂默认）' },
-  { value: 'worktree', name: '🌿 Worktree 隔离', hint: '每次执行在独立 worktree 分支上进行（task/标题+ID），互不污染' },
+/** The isolation options with one-line hints (mirrors the task form; translated per render). */
+const isolationOptions = (t: Translate): ReadonlyArray<{ value: IsolationMode; name: string; hint: string }> => [
+  { value: 'none', name: t('form.iso.none'), hint: t('set.iso.noneHint') },
+  { value: 'worktree', name: t('form.iso.worktree'), hint: t('set.iso.worktreeHint') },
 ]
 
 /**
@@ -23,41 +24,50 @@ const ISOLATION_OPTIONS: ReadonlyArray<{ value: IsolationMode; name: string; hin
  * @param controller - the board controller.
  */
 export function SettingsModal({ controller }: { controller: BoardController }) {
+  const t = useT()
   const state = controller.getSnapshot()
-  const current = state.ledger.settings?.defaultIsolation ?? DEFAULT_ISOLATION
-  const [draft, setDraft] = useState<IsolationMode>(current)
-  const dirty = draft !== current
+  const currentIso = state.ledger.settings?.defaultIsolation ?? DEFAULT_ISOLATION
+  const currentSync = defaultSyncExternalSessionsOf(state.ledger.settings)
+  const currentPerm = defaultPermissionOf(state.ledger.settings)
+  const [draftIso, setDraftIso] = useState<IsolationMode>(currentIso)
+  const [draftSync, setDraftSync] = useState<boolean>(currentSync)
+  const [draftPerm, setDraftPerm] = useState<PermissionMode>(currentPerm)
+  const dirty = draftIso !== currentIso || draftSync !== currentSync || draftPerm !== currentPerm
 
   const save = (): void => {
-    void controller.updateSettings({ defaultIsolation: draft }).then(ok => {
+    void controller.updateSettings({
+      defaultIsolation: draftIso,
+      syncExternalSessions: draftSync,
+      defaultPermission: draftPerm,
+    }).then(ok => {
       if (ok) controller.closeSettings()
     })
   }
 
   return (
     <div className="dsh-atb-modal-backdrop" onClick={e => { if (e.target === e.currentTarget) controller.closeSettings() }}>
-      <div className="dsh-atb-modal dsh-atb-set" role="dialog" aria-modal="true" aria-label="看板设置">
+      <div className="dsh-atb-modal dsh-atb-set" role="dialog" aria-modal="true" aria-label={t('set.aria')}>
         <div className="dsh-atb-modal-head">
           <span className="dsh-atb-modal-headicon">🛠</span>
           <div className="dsh-atb-modal-headtext">
-            <h3>看板设置</h3>
-            <p>新建任务时应用的默认值（不影响已有任务）</p>
+            <h3>{t('set.title')}</h3>
+            <p>{t('set.subtitle')}</p>
           </div>
-          <button type="button" className="dsh-atb-modal-close" aria-label="关闭" onClick={() => controller.closeSettings()}>✕</button>
+          <button type="button" className="dsh-atb-modal-close" aria-label={t('shared.close')} onClick={() => controller.closeSettings()}>✕</button>
         </div>
 
         <div className="dsh-atb-modal-body">
           <section className="dsh-atb-diag-sec">
-            <h4>默认执行隔离</h4>
+            <h4>{t('set.iso.heading')}</h4>
             <div className="dsh-atb-mode-picker">
-              {ISOLATION_OPTIONS.map(o => (
+              {isolationOptions(t).map(o => (
                 <button
                   key={o.value}
                   type="button"
                   className="dsh-atb-mode-opt"
-                  data-on={draft === o.value}
+                  data-on={draftIso === o.value}
                   title={o.hint}
-                  onClick={() => setDraft(o.value)}
+                  onClick={() => setDraftIso(o.value)}
                 >
                   <span className="dsh-atb-mode-name">{o.name}</span>
                   <span className="dsh-atb-mode-hint">{o.hint}</span>
@@ -65,17 +75,83 @@ export function SettingsModal({ controller }: { controller: BoardController }) {
               ))}
             </div>
             <span className="dsh-atb-isolation-note">
-              当前保存的默认：{current === 'worktree' ? '🌿 Worktree 隔离' : '📁 原目录执行'}。
-              仅影响之后新建的任务；已有任务保持创建时的选择，非 git 项目运行时仍自动降级原目录。
+              {t('set.iso.current', { current: currentIso === 'worktree' ? t('form.iso.worktree') : t('form.iso.none') })}
+            </span>
+          </section>
+
+          <section className="dsh-atb-diag-sec">
+            <h4>{t('set.sync.heading')}</h4>
+            <div className="dsh-atb-mode-picker">
+              <button
+                type="button"
+                className="dsh-atb-mode-opt"
+                data-on={!draftSync}
+                title={t('set.sync.off.title')}
+                onClick={() => setDraftSync(false)}
+              >
+                <span className="dsh-atb-mode-name">{t('set.sync.off.name')}</span>
+                <span className="dsh-atb-mode-hint">{t('set.sync.off.hint')}</span>
+              </button>
+              <button
+                type="button"
+                className="dsh-atb-mode-opt"
+                data-on={draftSync}
+                title={t('set.sync.on.title')}
+                onClick={() => setDraftSync(true)}
+              >
+                <span className="dsh-atb-mode-name">{t('set.sync.on.name')}</span>
+                <span className="dsh-atb-mode-hint">{t('set.sync.on.hint')}</span>
+              </button>
+            </div>
+            <span className="dsh-atb-isolation-note">
+              {currentSync
+                ? t('set.sync.stateOn')
+                : t('set.sync.stateOff')}
+            </span>
+          </section>
+
+          <section className="dsh-atb-diag-sec">
+            <h4>{t('set.perm.heading')}</h4>
+            <div className="dsh-atb-perm-picker">
+              <button
+                type="button"
+                className="dsh-atb-perm-opt"
+                data-on={draftPerm === 'workspace-write'}
+                onClick={() => setDraftPerm('workspace-write')}
+              >
+                <span className="dsh-atb-perm-name">{t('set.perm.writeName')}</span>
+                <span className="dsh-atb-perm-hint">{t('set.perm.writeHint')}</span>
+              </button>
+              <button
+                type="button"
+                className="dsh-atb-perm-opt"
+                data-on={draftPerm === 'read-only'}
+                onClick={() => setDraftPerm('read-only')}
+              >
+                <span className="dsh-atb-perm-name">{t('set.perm.readOnlyName')}</span>
+                <span className="dsh-atb-perm-hint">{t('set.perm.readOnlyHint')}</span>
+              </button>
+              <button
+                type="button"
+                className="dsh-atb-perm-opt"
+                data-on={draftPerm === 'danger-full-access'}
+                onClick={() => setDraftPerm('danger-full-access')}
+              >
+                <span className="dsh-atb-perm-name">{t('set.perm.fullName')}</span>
+                <span className="dsh-atb-perm-hint">{t('set.perm.fullHint')}</span>
+              </button>
+            </div>
+            <span className="dsh-atb-isolation-note">
+              {t('set.perm.current', { current: currentPerm === 'read-only' ? t('set.perm.readOnlyName') : currentPerm === 'danger-full-access' ? t('set.perm.fullName') : t('set.perm.writeName') })}
             </span>
           </section>
         </div>
 
         <div className="dsh-atb-modal-foot">
-          <span className="dsh-atb-modal-hint">{dirty ? '有未保存的修改' : '与看板当前设置一致'}</span>
+          <span className="dsh-atb-modal-hint">{dirty ? t('set.foot.dirty') : t('set.foot.clean')}</span>
           <span className="dsh-atb-modal-footbtns">
-            <button type="button" className="dsh-atb-btn" onClick={() => controller.closeSettings()}>取消</button>
-            <button type="button" className="dsh-atb-btn" data-primary="true" disabled={!dirty} onClick={save}>保存设置</button>
+            <button type="button" className="dsh-atb-btn" onClick={() => controller.closeSettings()}>{t('shared.cancel')}</button>
+            <button type="button" className="dsh-atb-btn" data-primary="true" disabled={!dirty} onClick={save}>{t('set.action.save')}</button>
           </span>
         </div>
       </div>

package/src/client/board/SlashPromptInput.tsx

@@ -0,0 +1,272 @@
+/**
+ * SlashPromptInput: Rich text input component for task description & execution prompt.
+ * Features:
+ * - Slash autocomplete popup for commands and skills with keyboard navigation.
+ * - Clean text editing without image base64 pollution.
+ *
+ * @module dsh-taskboard/client/board/SlashPromptInput
+ */
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react'
+import type { BoardController } from '../controller.ts'
+import type { PromptCompletionItem } from '../../shared/api.ts'
+import { useT, type Translate } from '../i18n/runtime.ts'
+
+/** Default built-in slash commands (descriptions resolve through t at render,
+ * so they follow the GUI language live; host-provided items override by name). */
+export const defaultCommands = (t: Translate): PromptCompletionItem[] => [
+  { name: 'goal', kind: 'command', description: t('slash.cmd.goal.desc'), hint: t('slash.cmd.goal.hint') },
+  { name: 'schedule', kind: 'command', description: t('slash.cmd.schedule.desc'), hint: t('slash.cmd.schedule.hint') },
+  { name: 'plan', kind: 'command', description: t('slash.cmd.plan.desc') },
+  { name: 'browser', kind: 'command', description: t('slash.cmd.browser.desc') },
+  { name: 'grill-me', kind: 'command', description: t('slash.cmd.grill-me.desc') },
+  { name: 'teamwork-preview', kind: 'command', description: t('slash.cmd.teamwork-preview.desc') },
+  { name: 'learn', kind: 'command', description: t('slash.cmd.learn.desc') },
+  { name: 'review', kind: 'command', description: t('slash.cmd.review.desc') },
+  { name: 'security', kind: 'command', description: t('slash.cmd.security.desc') },
+  { name: 'permission', kind: 'command', description: t('slash.cmd.permission.desc'), hint: t('slash.cmd.permission.hint') },
+]
+
+/** Default built-in skills (descriptions resolve through t at render). */
+export const defaultSkills = (t: Translate): PromptCompletionItem[] => [
+  { name: 'frontend-ui-engineering', kind: 'skill', description: t('slash.skill.frontend-ui-engineering') },
+  { name: 'api-and-interface-design', kind: 'skill', description: t('slash.skill.api-and-interface-design') },
+  { name: 'test-driven-development', kind: 'skill', description: t('slash.skill.test-driven-development') },
+  { name: 'debugging-and-error-recovery', kind: 'skill', description: t('slash.skill.debugging-and-error-recovery') },
+  { name: 'performance-optimization', kind: 'skill', description: t('slash.skill.performance-optimization') },
+  { name: 'ci-cd-and-automation', kind: 'skill', description: t('slash.skill.ci-cd-and-automation') },
+  { name: 'code-review-and-quality', kind: 'skill', description: t('slash.skill.code-review-and-quality') },
+  { name: 'code-simplification', kind: 'skill', description: t('slash.skill.code-simplification') },
+  { name: 'context-engineering', kind: 'skill', description: t('slash.skill.context-engineering') },
+  { name: 'doubt-driven-development', kind: 'skill', description: t('slash.skill.doubt-driven-development') },
+  { name: 'git-workflow-and-versioning', kind: 'skill', description: t('slash.skill.git-workflow-and-versioning') },
+  { name: 'idea-refine', kind: 'skill', description: t('slash.skill.idea-refine') },
+  { name: 'incremental-implementation', kind: 'skill', description: t('slash.skill.incremental-implementation') },
+  { name: 'interview-me', kind: 'skill', description: t('slash.skill.interview-me') },
+  { name: 'memory-leak-debugging', kind: 'skill', description: t('slash.skill.memory-leak-debugging') },
+  { name: 'observability-and-instrumentation', kind: 'skill', description: t('slash.skill.observability-and-instrumentation') },
+  { name: 'planning-and-task-breakdown', kind: 'skill', description: t('slash.skill.planning-and-task-breakdown') },
+  { name: 'security-and-hardening', kind: 'skill', description: t('slash.skill.security-and-hardening') },
+  { name: 'shipping-and-launch', kind: 'skill', description: t('slash.skill.shipping-and-launch') },
+  { name: 'source-driven-development', kind: 'skill', description: t('slash.skill.source-driven-development') },
+  { name: 'spec-driven-development', kind: 'skill', description: t('slash.skill.spec-driven-development') },
+  { name: 'using-agent-skills', kind: 'skill', description: t('slash.skill.using-agent-skills') },
+]
+
+/** Props for SlashPromptInput. */
+export interface SlashPromptInputProps {
+  value: string
+  onChange: (value: string) => void
+  controller?: BoardController
+  placeholder?: string
+  rows?: number
+  maxLength?: number
+  disabled?: boolean
+  autoFocus?: boolean
+  className?: string
+  ariaLabel?: string
+}
+
+/**
+ * Rich prompt textarea with / autocomplete for slash commands & skills.
+ */
+export function SlashPromptInput({
+  value,
+  onChange,
+  controller,
+  placeholder,
+  rows = 4,
+  maxLength = 8000,
+  disabled = false,
+  autoFocus = false,
+  className,
+  ariaLabel,
+}: SlashPromptInputProps) {
+  const t = useT()
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Autocomplete state: only HOST-provided items are stateful; the built-in
+  // defaults are re-derived per render so their descriptions follow the
+  // active locale live (host items override defaults by name).
+  const [hostCompletions, setHostCompletions] = useState<{ commands: PromptCompletionItem[]; skills: PromptCompletionItem[] } | undefined>(undefined)
+  const completions = useMemo<{ commands: PromptCompletionItem[]; skills: PromptCompletionItem[] }>(() => {
+    const merge = (defaults: PromptCompletionItem[], host: PromptCompletionItem[] | undefined): PromptCompletionItem[] => {
+      const map = new Map<string, PromptCompletionItem>()
+      for (const d of defaults) map.set(d.name, d)
+      for (const h of host ?? []) map.set(h.name, h)
+      return Array.from(map.values())
+    }
+    return { commands: merge(defaultCommands(t), hostCompletions?.commands), skills: merge(defaultSkills(t), hostCompletions?.skills) }
+  }, [t, hostCompletions])
+  const [popupOpen, setPopupOpen] = useState(false)
+  const [slashQuery, setSlashQuery] = useState('')
+  const [slashStart, setSlashStart] = useState(-1)
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  // Fetch host completions if controller provided
+  useEffect(() => {
+    if (controller === undefined) return
+    let alive = true
+    void controller.fetchPromptCompletions().then(res => {
+      if (!alive || res === undefined) return
+      setHostCompletions({
+        commands: res.commands.map(c => ({ ...c, kind: 'command' })),
+        skills: res.skills.map(s => ({ ...s, kind: 'skill' })),
+      })
+    })
+    return () => { alive = false }
+  }, [controller])
+
+  // Filter items based on query
+  const filteredItems = useMemo<PromptCompletionItem[]>(() => {
+    const q = slashQuery.toLowerCase().trim()
+    const all = [...completions.commands, ...completions.skills]
+    if (q.length === 0) return all
+    return all.filter(item => item.name.toLowerCase().includes(q) || (item.description !== undefined && item.description.toLowerCase().includes(q)))
+  }, [completions, slashQuery])
+
+  // Keep selected index in bounds
+  useEffect(() => {
+    if (selectedIndex >= filteredItems.length) {
+      setSelectedIndex(Math.max(0, filteredItems.length - 1))
+    }
+  }, [filteredItems.length, selectedIndex])
+
+  // Detect slash typing on cursor movement or text change
+  const checkSlashTrigger = (): void => {
+    const el = textareaRef.current
+    if (el === null) return
+    const pos = el.selectionStart
+    const currentText = el.value.slice(0, pos)
+    
+    // Check if cursor is right after a word starting with /
+    const lastSlash = currentText.lastIndexOf('/')
+    if (lastSlash >= 0) {
+      const charBefore = lastSlash > 0 ? (currentText[lastSlash - 1] ?? '\n') : '\n'
+      const isWordStart = /\s/.test(charBefore) || lastSlash === 0
+      const queryPart = currentText.slice(lastSlash + 1)
+      const noWhitespaceInQuery = !/\s/.test(queryPart)
+
+      if (isWordStart && noWhitespaceInQuery) {
+        setSlashStart(lastSlash)
+        setSlashQuery(queryPart)
+        setPopupOpen(true)
+        return
+      }
+    }
+    setPopupOpen(false)
+  }
+
+  // Insert picked completion item
+  const applyCompletion = (item: PromptCompletionItem): void => {
+    const el = textareaRef.current
+    if (el === null || slashStart < 0) return
+    const pos = el.selectionStart
+    const before = value.slice(0, slashStart)
+    const after = value.slice(pos)
+    const inserted = `/${item.name} `
+    const nextText = before + inserted + after
+    onChange(nextText)
+    setPopupOpen(false)
+
+    // Restore focus & cursor position
+    setTimeout(() => {
+      if (textareaRef.current !== null) {
+        const nextPos = slashStart + inserted.length
+        textareaRef.current.focus()
+        textareaRef.current.setSelectionRange(nextPos, nextPos)
+      }
+    }, 0)
+  }
+
+  // Keyboard navigation for slash popup
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (popupOpen && filteredItems.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        setSelectedIndex(prev => (prev + 1) % filteredItems.length)
+        return
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        setSelectedIndex(prev => (prev - 1 + filteredItems.length) % filteredItems.length)
+        return
+      }
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        const picked = filteredItems[selectedIndex]
+        if (picked !== undefined) {
+          e.preventDefault()
+          applyCompletion(picked)
+          return
+        }
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setPopupOpen(false)
+        return
+      }
+    }
+  }
+
+  return (
+    <div className={`dsh-atb-prompt-wrap ${className ?? ''}`}>
+      <div className="dsh-atb-prompt-inner">
+        <textarea
+          ref={textareaRef}
+          className="dsh-atb-prompt-input"
+          value={value}
+          rows={rows}
+          maxLength={maxLength}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          aria-label={ariaLabel}
+          onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+            onChange(e.target.value)
+            checkSlashTrigger()
+          }}
+          onKeyUp={checkSlashTrigger}
+          onClick={checkSlashTrigger}
+          onKeyDown={handleKeyDown}
+        />
+
+        {/* Slash Autocomplete Popup */}
+        {popupOpen && filteredItems.length > 0 && (
+          <div className="dsh-atb-slash-popup" role="listbox" aria-label={t('slash.aria')}>
+            <div className="dsh-atb-slash-head">
+              <span className="dsh-atb-slash-title">{t('slash.title')}</span>
+              <span className="dsh-atb-slash-hint">{t('slash.hint')}</span>
+            </div>
+            <div className="dsh-atb-slash-list">
+              {filteredItems.map((item, idx) => (
+                <div
+                  key={`${item.kind}-${item.name}`}
+                  role="option"
+                  aria-selected={idx === selectedIndex}
+                  className="dsh-atb-slash-item"
+                  data-active={idx === selectedIndex ? 'true' : undefined}
+                  data-kind={item.kind}
+                  onClick={() => applyCompletion(item)}
+                  onMouseEnter={() => setSelectedIndex(idx)}
+                >
+                  <span className="dsh-atb-slash-badge" data-kind={item.kind}>
+                    {item.kind === 'command' ? t('slash.badge.command') : t('slash.badge.skill')}
+                  </span>
+                  <span className="dsh-atb-slash-name">/{item.name}</span>
+                  {item.hint && <span className="dsh-atb-slash-param">{item.hint}</span>}
+                  {item.description && <span className="dsh-atb-slash-desc">{item.description}</span>}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Bottom helper toolbar */}
+      <div className="dsh-atb-prompt-foot">
+        <span className="dsh-atb-prompt-tip">
+          {t('slash.tipA')} <code>/</code> {t('slash.tipB')}
+        </span>
+      </div>
+    </div>
+  )
+}