dsh-taskboard 0.5.5 → 0.6.1

package/src/client/board/SlashPromptInput.tsx

@@ -0,0 +1,340 @@
+/**
+ * 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 { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type KeyboardEvent } from 'react'
+import { createPortal } from 'react-dom'
+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)
+  const popupRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  // Inline fixed-position style for the portaled popup (set by positionPopup).
+  const [popupStyle, setPopupStyle] = useState<CSSProperties>({})
+
+  // 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])
+
+  // Keep the keyboard-highlighted option visible inside the scrolling list:
+  // mouse hovering only ever targets rendered rows, but ArrowUp/ArrowDown can
+  // move the highlight past the clipped edge. Adjust the list's scrollTop
+  // directly from rect deltas — NOT scrollIntoView, which would also scroll
+  // ancestor containers (the modal body behind the portaled popup).
+  useLayoutEffect(() => {
+    if (!popupOpen) return
+    const list = listRef.current
+    const active = list?.children[selectedIndex]
+    if (list === null || !(active instanceof HTMLElement)) return
+    const listRect = list.getBoundingClientRect()
+    const itemRect = active.getBoundingClientRect()
+    if (itemRect.top < listRect.top) list.scrollTop -= listRect.top - itemRect.top
+    else if (itemRect.bottom > listRect.bottom) list.scrollTop += itemRect.bottom - listRect.bottom
+  }, [popupOpen, selectedIndex, filteredItems])
+
+  // 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
+      }
+    }
+  }
+
+  // The popup is portaled to document.body and fixed-positioned from the
+  // textarea's viewport rect: an absolute popup inside the scrollable modal
+  // body was clipped at the container's top edge (0.6.0 field report).
+  // Opens above by preference, flips below when the top is tight, and clamps
+  // to the viewport (maxHeight shrinks; the list scrolls internally).
+  const positionPopup = useCallback((): void => {
+    const anchor = textareaRef.current
+    if (anchor === null) return
+    const rect = anchor.getBoundingClientRect()
+    const gap = 6
+    const margin = 8
+    const vh = window.innerHeight
+    const measured = popupRef.current?.offsetHeight ?? 0
+    const natural = measured > 0 ? measured : 240
+    const roomAbove = rect.top - gap - margin
+    const roomBelow = vh - margin - (rect.bottom + gap)
+    const openBelow = roomBelow > roomAbove
+    const height = Math.min(natural, Math.max(openBelow ? roomBelow : roomAbove, 120))
+    const top = openBelow ? rect.bottom + gap : rect.top - gap - height
+    // Bail out (return prev) when unchanged: the layout effect below runs on
+    // every open render, and a fresh object here would re-render forever.
+    setPopupStyle(prev => (prev.left === rect.left && prev.top === top && prev.width === rect.width && prev.maxHeight === height
+      ? prev
+      : { position: 'fixed', left: rect.left, top, width: rect.width, maxHeight: height, zIndex: 100 }))
+  }, [])
+
+  // Reposition on every open render: the popup height follows the filtered
+  // item count, so typing changes the geometry too.
+  useLayoutEffect(() => {
+    if (!popupOpen) return
+    positionPopup()
+  })
+
+  // Follow scrolling and viewport resizes while open (capture phase: the
+  // modal body scrolls, the window itself does not).
+  useEffect(() => {
+    if (!popupOpen) return
+    window.addEventListener('scroll', positionPopup, true)
+    window.addEventListener('resize', positionPopup)
+    return () => {
+      window.removeEventListener('scroll', positionPopup, true)
+      window.removeEventListener('resize', positionPopup)
+    }
+  }, [popupOpen, positionPopup])
+
+  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 — portaled to document.body so the
+            scrollable modal body can never clip it (see positionPopup). */}
+        {popupOpen && filteredItems.length > 0 && createPortal(
+          <div ref={popupRef} className="dsh-atb-slash-popup" style={popupStyle} 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 ref={listRef} 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>,
+          document.body,
+        )}
+      </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>
+  )
+}

package/src/client/board/TaskBoard.tsx

@@ -9,7 +9,8 @@ import type { BoardController, ControllerState } from '../controller.ts'
 import type { TaskRecord, TaskStatus, Urgency } from '../../shared/protocol.ts'
 import { MAIN_STATUSES, canTransition } from '../../shared/protocol.ts'
 import { PLUGIN_VERSION } from '../../shared/version.ts'
-import { COLUMN_LABELS, URGENCY_LABEL } from './labels.ts'
+import { COLUMN_KEYS, URGENCY_KEYS } from './labels.ts'
+import { useT } from '../i18n/runtime.ts'
 import { fmtTime, isStaleClaim } from './format.ts'
 import { DRAG_TYPE, TaskCard } from './TaskCard.tsx'
 import { TaskDetail } from './TaskDetail.tsx'
@@ -43,6 +44,7 @@ export function filterTasks(state: ControllerState, tasks: TaskRecord[]): TaskRe
  * @param controller - the controller.
  */
 export function TaskBoard({ controller }: { controller: BoardController }) {
+  const t = useT()
   const state = useSyncExternalStore(
     cb => controller.subscribe(cb),
     () => controller.getSnapshot(),
@@ -66,8 +68,8 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   return (
     <div className="dsh-atb-board">
       <div className="dsh-atb-toolbar">
-        <h2 className="dsh-atb-title">Agent 任务看板</h2>
-        <span className="dsh-atb-count">{live.length} 任务 · rev {state.ledger.revision}</span>
+        <h2 className="dsh-atb-title">{t('board.title')}</h2>
+        <span className="dsh-atb-count">{t('board.count.tasks', { n: live.length, rev: state.ledger.revision })}</span>
         <div className="dsh-atb-newmenu">
           <button
             type="button"
@@ -79,13 +81,13 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
               if (next) controller.prepareTemplateMenu()
             }}
           >
-            + 新建任务 ▼
+            {t('board.action.newTask')}
           </button>
           {newMenuOpen && (
             <>
               <div className="dsh-atb-newmenu-backdrop" onClick={closeMenu} />
               <div className="dsh-atb-newmenu-list">
-                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.setComposer(true) }}>空白任务</button>
+                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.setComposer(true) }}>{t('board.action.blankTask')}</button>
                 {state.templates.map(t => (
                   <button
                     key={t.id}
@@ -98,7 +100,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                   </button>
                 ))}
                 <div className="dsh-atb-newmenu-sep" />
-                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.openTemplateManager() }}>⌗ 管理模板…</button>
+                <button type="button" className="dsh-atb-newmenu-opt" onClick={() => { closeMenu(); controller.openTemplateManager() }}>{t('board.action.manageTemplates')}</button>
               </div>
             </>
           )}
@@ -107,7 +109,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         <input
           className="dsh-atb-input dsh-atb-search"
           value={state.search}
-          placeholder="搜索标题 / ID…"
+          placeholder={t('board.search.placeholder')}
           spellCheck={false}
           onChange={e => controller.setSearch(e.target.value)}
         />
@@ -116,20 +118,20 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           value={state.filters.workspaceId ?? ''}
           onChange={e => controller.setWorkspaceFilter(e.target.value === '' ? undefined : e.target.value)}
         >
-          <option value="">全部项目</option>
+          <option value="">{t('board.filter.allProjects')}</option>
           {state.workspaces.map(ws => <option key={ws.id} value={ws.id}>{ws.title || ws.path}</option>)}
         </select>
         <select
           className="dsh-atb-select"
           value={state.sortBy}
-          title="列内排序"
+          title={t('board.sort.title')}
           onChange={e => controller.setSortBy(e.target.value as typeof state.sortBy)}
         >
-          <option value="default">默认排序</option>
-          <option value="updated">最近更新</option>
-          <option value="urgency">按紧急度</option>
-          <option value="created">创建时间</option>
-          <option value="title">按标题</option>
+          <option value="default">{t('board.sort.default')}</option>
+          <option value="updated">{t('board.sort.updated')}</option>
+          <option value="urgency">{t('board.sort.urgency')}</option>
+          <option value="created">{t('board.sort.created')}</option>
+          <option value="title">{t('board.sort.byTitle')}</option>
         </select>
         {(['urgent', 'normal', 'relaxed'] as const).map(u => (
           <button
@@ -141,23 +143,23 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
             onClick={() => controller.toggleUrgency(u)}
           >
             <span className="dsh-atb-dot" data-urgency={u} />
-            {URGENCY_LABEL[u]}
+            {t(URGENCY_KEYS[u])}
           </button>
         ))}
         <button type="button" className="dsh-atb-btn" onClick={() => controller.toggleSecondary()}>
-          {state.secondaryOpen ? '返回看板' : '其它任务'}
+          {state.secondaryOpen ? t('board.action.backToBoard') : t('board.action.otherTasks')}
         </button>
-        <button type="button" className="dsh-atb-btn" title="看板设置：新建任务的默认执行隔离等" onClick={() => controller.openSettings()}>🛠 设置</button>
-        <button type="button" className="dsh-atb-btn" title="健康诊断：遗留 worktree、台账基本项" onClick={() => controller.openDiagnostics()}>⚙ 诊断</button>
-        <button type="button" className="dsh-atb-btn" title="从 JSON 备份文件导入台账（预览后合并或整册替换）" onClick={() => controller.openImport()}>⬆ 导入</button>
+        <button type="button" className="dsh-atb-btn" title={t('board.action.settingsTitle')} onClick={() => controller.openSettings()}>{t('board.action.settings')}</button>
+        <button type="button" className="dsh-atb-btn" title={t('board.action.diagTitle')} onClick={() => controller.openDiagnostics()}>{t('board.action.diag')}</button>
+        <button type="button" className="dsh-atb-btn" title={t('board.action.importTitle')} onClick={() => controller.openImport()}>{t('board.action.import')}</button>
         <div className="dsh-atb-newmenu">
           <button
             type="button"
             className="dsh-atb-btn"
-            title="导出台账：完整 JSON 备份或任务清单 CSV"
+            title={t('board.action.exportTitle')}
             onClick={() => setExportOpen(!exportOpen)}
           >
-            ⬇ 导出 ▼
+            {t('board.action.export')}
           </button>
           {exportOpen && (
             <>
@@ -166,18 +168,18 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                 <button
                   type="button"
                   className="dsh-atb-newmenu-opt"
-                  title="完整台账备份（含执行历史与看板设置），可用于导入恢复"
+                  title={t('board.export.jsonTitle')}
                   onClick={() => { closeExport(); controller.exportJson() }}
                 >
-                  完整台账（JSON）
+                  {t('board.export.json')}
                 </button>
                 <button
                   type="button"
                   className="dsh-atb-newmenu-opt"
-                  title="任务清单表格（Excel 可直接打开，中文已加 BOM）"
+                  title={t('board.export.csvTitle')}
                   onClick={() => { closeExport(); controller.exportCsv() }}
                 >
-                  任务清单（CSV）
+                  {t('board.export.csv')}
                 </button>
               </div>
             </>
@@ -221,7 +223,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                     const task = state.ledger.tasks.find(t => t.id === id)
                     if (task === undefined || task.status === status) return
                     if (!canTransition(task.status, status)) {
-                      showAlert(`无法从「${COLUMN_LABELS[task.status]}」拖至「${COLUMN_LABELS[status]}」`)
+                      showAlert(t('board.drag.forbidden', { from: t(COLUMN_KEYS[task.status]), to: t(COLUMN_KEYS[status]) }))
                       return
                     }
                     void controller.move(id, task.version, status)
@@ -229,7 +231,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                 >
                   <div className="dsh-atb-colhead">
                     <span className="dsh-atb-dot" data-status={status} />
-                    {COLUMN_LABELS[status]}
+                    {t(COLUMN_KEYS[status])}
                     <span className="dsh-atb-colcount">{columnTasks.length}</span>
                   </div>
                   <div className="dsh-atb-cards">
@@ -243,7 +245,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                         onAlert={showAlert}
                       />
                     ))}
-                    {columnTasks.length === 0 && <div className="dsh-atb-empty">无任务</div>}
+                    {columnTasks.length === 0 && <div className="dsh-atb-empty">{t('board.empty')}</div>}
                   </div>
                 </div>
               )
@@ -281,6 +283,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
 
 /** ⚙ Health-diagnostics panel (plan §3.6): ledger basics + orphan worktrees + one-click cleanup. */
 function DiagnosticsPanel({ controller }: { controller: BoardController }) {
+  const t = useT()
   const state = controller.getSnapshot()
   const diag = state.diagnostics
   const wsName = (id: string): string => {
@@ -289,52 +292,52 @@ function DiagnosticsPanel({ controller }: { controller: BoardController }) {
   }
   return (
     <div className="dsh-atb-modal-backdrop" onClick={e => { if (e.target === e.currentTarget) controller.closeDiagnostics() }}>
-      <div className="dsh-atb-modal dsh-atb-diag" role="dialog" aria-modal="true" aria-label="健康诊断">
+      <div className="dsh-atb-modal dsh-atb-diag" role="dialog" aria-modal="true" aria-label={t('diag.title')}>
         <div className="dsh-atb-modal-head">
           <span className="dsh-atb-modal-headicon">⚙</span>
           <div className="dsh-atb-modal-headtext">
-            <h3>健康诊断</h3>
-            <p>台账基本项与 worktree 遗留清理</p>
+            <h3>{t('diag.title')}</h3>
+            <p>{t('diag.subtitle')}</p>
           </div>
-          <button type="button" className="dsh-atb-modal-close" aria-label="关闭" onClick={() => controller.closeDiagnostics()}>✕</button>
+          <button type="button" className="dsh-atb-modal-close" aria-label={t('shared.close')} onClick={() => controller.closeDiagnostics()}>✕</button>
         </div>
         <div className="dsh-atb-modal-body">
           {diag === undefined
-            ? <div className="dsh-atb-empty2">读取中…</div>
+            ? <div className="dsh-atb-empty2">{t('shared.loading')}</div>
             : (
               <>
                 <div className="dsh-atb-diag-grid">
-                  <div className="dsh-atb-diag-item"><b>{diag.revision}</b><span>台账修订号</span></div>
-                  <div className="dsh-atb-diag-item"><b>{diag.tasks}</b><span>任务总数</span></div>
-                  <div className="dsh-atb-diag-item" data-bad={diag.staleRunning > 0 ? 'true' : undefined}><b>{diag.staleRunning}</b><span>执行中</span></div>
-                  <div className="dsh-atb-diag-item" data-bad={diag.orphanWorktrees.length > 0 ? 'true' : undefined}><b>{diag.orphanWorktrees.length}</b><span>遗留 worktree</span></div>
+                  <div className="dsh-atb-diag-item"><b>{diag.revision}</b><span>{t('diag.revision')}</span></div>
+                  <div className="dsh-atb-diag-item"><b>{diag.tasks}</b><span>{t('diag.tasks')}</span></div>
+                  <div className="dsh-atb-diag-item" data-bad={diag.staleRunning > 0 ? 'true' : undefined}><b>{diag.staleRunning}</b><span>{t('diag.running')}</span></div>
+                  <div className="dsh-atb-diag-item" data-bad={diag.orphanWorktrees.length > 0 ? 'true' : undefined}><b>{diag.orphanWorktrees.length}</b><span>{t('diag.orphans')}</span></div>
                 </div>
                 <div className="dsh-atb-diag-sec">
-                  <h4>遗留 worktree（台账无主但目录存在）</h4>
+                  <h4>{t('diag.orphans.heading')}</h4>
                   {diag.orphanWorktrees.length === 0
-                    ? <div className="dsh-atb-empty2">无遗留 — 各项目 .dsh-worktrees 目录干净</div>
+                    ? <div className="dsh-atb-empty2">{t('diag.orphans.none')}</div>
                     : (
                         <div className="dsh-atb-diag-orphans">
                           {diag.orphanWorktrees.map(o => (
                             <div key={o.path} className="dsh-atb-diag-orphan">
                               <span className="dsh-atb-diag-orphan-path" title={o.path}>{wsName(o.workspaceId)} · {o.taskId}</span>
-                              <button type="button" className="dsh-atb-btn" data-danger="true" onClick={() => void controller.cleanupOrphan(o.workspaceId, o.taskId)}>清理</button>
+                              <button type="button" className="dsh-atb-btn" data-danger="true" onClick={() => void controller.cleanupOrphan(o.workspaceId, o.taskId)}>{t('diag.orphans.cleanup')}</button>
                             </div>
                           ))}
                         </div>
                       )}
-                  <div className="dsh-atb-empty2">提示：有未提交修改的遗留目录会被拒绝清理，请先手动处理其内容。live 任务的 worktree 请在任务详情页删除。</div>
+                  <div className="dsh-atb-empty2">{t('diag.orphans.hint')}</div>
                 </div>
                 <div className="dsh-atb-diag-sec">
-                  <h4>gitignore 建议</h4>
+                  <h4>{t('diag.gitignore.heading')}</h4>
                   {(diag.gitIgnoreSuggestions ?? []).length === 0
-                    ? <div className="dsh-atb-empty2">无待办 — 各 git 项目已忽略 .dsh-worktrees 目录</div>
+                    ? <div className="dsh-atb-empty2">{t('diag.gitignore.none')}</div>
                     : (
                         <div className="dsh-atb-diag-orphans">
                           {diag.gitIgnoreSuggestions.map(s => (
                             <div key={s.workspaceId} className="dsh-atb-diag-orphan">
                               <span className="dsh-atb-diag-orphan-path" title={s.workspacePath}>
-                                {wsName(s.workspaceId)} · 建议在 .gitignore 加入一行 <code>.dsh-worktrees/</code>（不会自动修改）
+                                {wsName(s.workspaceId)} · {t('diag.gitignore.suggestA')} <code>.dsh-worktrees/</code>{t('diag.gitignore.suggestB')}
                               </span>
                             </div>
                           ))}
@@ -351,20 +354,21 @@ function DiagnosticsPanel({ controller }: { controller: BoardController }) {
 
 /** Secondary tab: tasks grouped into canceled / archived / trashed columns. */
 function SecondaryTab({ controller, tasks }: { controller: BoardController; tasks: TaskRecord[] }) {
+  const t = useT()
   // Trashed takes precedence (a trashed task still carries its old status,
   // but what matters to the user is the pending purge).
   const trashed = tasks.filter(t => t.trashedAt !== undefined)
   const archived = tasks.filter(t => t.trashedAt === undefined && t.status === 'archived')
   const canceled = tasks.filter(t => t.trashedAt === undefined && t.status === 'canceled')
   const groups = [
-    { label: '已取消', dot: 'canceled', rows: canceled },
-    { label: '已归档', dot: 'archived', rows: archived },
-    { label: '已删除', dot: 'trashed', rows: trashed },
+    { label: t('status.column.canceled'), dot: 'canceled', rows: canceled },
+    { label: t('status.column.archived'), dot: 'archived', rows: archived },
+    { label: t('board.group.trashed'), dot: 'trashed', rows: trashed },
   ]
   if (trashed.length + archived.length + canceled.length === 0) {
     return (
       <div className="dsh-atb-secondary">
-        <div className="dsh-atb-empty">无已取消 / 已归档 / 已删除任务</div>
+        <div className="dsh-atb-empty">{t('board.secondary.empty')}</div>
       </div>
     )
   }
@@ -381,7 +385,7 @@ function SecondaryTab({ controller, tasks }: { controller: BoardController; task
             {group.rows.map(task => (
               <TaskCard key={task.id} task={task} controller={controller} />
             ))}
-            {group.rows.length === 0 && <div className="dsh-atb-empty">无任务</div>}
+            {group.rows.length === 0 && <div className="dsh-atb-empty">{t('board.empty')}</div>}
           </div>
         </div>
       ))}