@linxin666/dsh-client-ui-task-board 0.3.21 → 0.3.23

package/src/client/board/NewTaskModal.tsx

@@ -2,14 +2,14 @@
  * New-task modal: title + description + the prompt that execution will send.
  * Creates through the Host and closes only after the Host confirms it.
  */
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
 import { isValidCron, nextRunAtMs } from '../../core/schedule.ts'
 import { parseFreezeRequest } from '../../core/freeze-snapshot.ts'
-import { TASK_PERMISSIONS, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
+import { collectKnownTags, TASK_PERMISSIONS, type TaskPermission, type TaskRecord, type TaskTag } from '../../core/tasks.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
-import { ModalShell, TaskContentFields } from './TaskForm.tsx'
+import { ModalShell, TaskContentFields, TaskTagFields, cleanTags } from './TaskForm.tsx'
 import css from '../board.module.css'
 
 export interface NewTaskModalProps {
@@ -17,17 +17,22 @@ export interface NewTaskModalProps {
   onClose: () => void
   /** Optional task template to clone/duplicate from. */
   initialTask?: TaskRecord
+  /**
+   * Workspace the board's project filter has selected (#1536): a task created
+   * while a project is open belongs to that project unless the user changes it.
+   */
+  defaultWorkspaceId?: string
   /** Optional callback after successful duplication (e.g. to archive source). */
   onDuplicateSuccess?: (sourceTaskId: string) => Promise<void>
 }
 
 /** New-task form overlay. */
-export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSuccess }: NewTaskModalProps) {
+export function NewTaskModal({ controller, onClose, initialTask, defaultWorkspaceId, onDuplicateSuccess }: NewTaskModalProps) {
   const isDuplicate = initialTask !== undefined
   const [title, setTitle] = useState(initialTask?.title ?? '')
   const [description, setDescription] = useState(initialTask?.description ?? '')
   const [prompt, setPrompt] = useState(initialTask?.prompt ?? '')
-  const [workspaceId, setWorkspaceId] = useState(initialTask?.workspaceId ?? '')
+  const [workspaceId, setWorkspaceId] = useState(initialTask?.workspaceId ?? defaultWorkspaceId ?? '')
   const [mode, setMode] = useState(initialTask?.mode ?? '')
   const [permission, setPermission] = useState(initialTask?.permission ?? '')
   const [model, setModel] = useState(initialTask?.model ?? '')
@@ -40,10 +45,20 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
   const [handoverText, setHandoverText] = useState(
     initialTask?.handover?.references !== undefined ? initialTask.handover.references.join('\n') : '',
   )
+  const [tags, setTags] = useState<TaskTag[]>(initialTask?.tags ?? [])
   const [archiveOriginal, setArchiveOriginal] = useState(true)
   const [error, setError] = useState<string | undefined>(undefined)
   const [pending, setPending] = useState(false)
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
+  // "Parse pasted text" (issue #1540) exists only when the deployment carries a
+  // parse face; the section stays hidden otherwise.
+  const [canParse] = useState(controller.getSnapshot().canParseTask === true)
+  const [parseText, setParseText] = useState('')
+  const [parseModel, setParseModel] = useState('')
+  const [parsePending, setParsePending] = useState(false)
+  const [parseError, setParseError] = useState<string | undefined>(undefined)
+  const parseAbort = useRef<AbortController | undefined>(undefined)
+  const parseModels = options.models ?? []
 
   // The workspace list and preset roster arrive from the runtime after mount;
   // follow them so the pickers never freeze on an empty snapshot.
@@ -52,6 +67,36 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
     [controller],
   )
 
+  // The model roster arrives asynchronously: default to its first entry, which
+  // the user can change before parsing.
+  useEffect(() => {
+    if (parseModel === '' && parseModels.length > 0) setParseModel(parseModels[0]!.id)
+  }, [parseModel, options.models])
+
+  const runParse = async (): Promise<void> => {
+    const text = parseText.trim()
+    if (text === '') {
+      setParseError(t('new.aiParseEmpty'))
+      return
+    }
+    const abort = new AbortController()
+    parseAbort.current = abort
+    setParsePending(true)
+    setParseError(undefined)
+    try {
+      const draft = await controller.parseTaskDraft({ text, ...(parseModel === '' ? {} : { model: parseModel }) }, abort.signal)
+      setTitle(draft.title)
+      setDescription(draft.description)
+      setPrompt(draft.prompt)
+    } catch (parseFailure) {
+      // A cancelled parse reports nothing: the user asked for it to stop.
+      if (!abort.signal.aborted) setParseError(parseFailure instanceof Error ? parseFailure.message : String(parseFailure))
+    } finally {
+      parseAbort.current = undefined
+      setParsePending(false)
+    }
+  }
+
   const submit = async (): Promise<void> => {
     if (scheduleEnabled) {
       const cron = scheduleCron.trim()
@@ -81,6 +126,9 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
       mode: mode === '' ? undefined : mode,
       permission: permission === '' ? undefined : permission as TaskPermission,
     }
+    // Blank rows never reach the wire: the protocol rejects a tag with an
+    // empty name, and an empty list is expressed by omitting the field.
+    const tagList = cleanTags(tags)
     setPending(true)
     const task = await controller.createTaskConfirmed({
       title,
@@ -93,6 +141,7 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
       permission: permission === '' ? undefined : permission as TaskPermission,
       model: model === '' ? undefined : model,
       ...(reuseSession ? { reuseSession: true } : {}),
+      ...(tagList.length > 0 ? { tags: tagList } : {}),
       schedule: scheduleEnabled ? { enabled: true, cron: scheduleCron.trim() } : undefined,
     })
     if (task === undefined) {
@@ -127,6 +176,50 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
       onSubmit={() => { void submit() }}
       onClose={onClose}
     >
+      {canParse && (
+        <section className={css.aiParse} data-dsh-part="ai-parse">
+          <span className={css.fieldLabel}>{t('new.aiParse')}</span>
+          <p className={css.fieldHint}>{t('new.aiParseHint')}</p>
+          <textarea
+            className={css.input}
+            rows={3}
+            value={parseText}
+            placeholder={t('new.aiParsePlaceholder')}
+            spellCheck={false}
+            onChange={event => { setParseText(event.target.value); setParseError(undefined) }}
+          />
+          <div className={css.aiParseRow}>
+            <select
+              className={css.select}
+              value={parseModel}
+              aria-label={t('new.aiParseModel')}
+              onChange={event => { setParseModel(event.target.value) }}
+            >
+              {parseModels.map(option => (
+                <option key={option.id} value={option.id}>{option.name ?? option.id}</option>
+              ))}
+            </select>
+            {parsePending
+              ? (
+                <button type="button" className={css.ghostButton} onClick={() => { parseAbort.current?.abort() }}>
+                  {t('new.aiParseCancel')}
+                </button>
+                )
+              : (
+                <button
+                  type="button"
+                  className={css.primaryButton}
+                  disabled={parseText.trim() === ''}
+                  onClick={() => { void runParse() }}
+                >
+                  {t('new.aiParseRun')}
+                </button>
+                )}
+          </div>
+          {parseError !== undefined && <p className={css.formError}>{parseError}</p>}
+        </section>
+      )}
+
       <TaskContentFields
         title={title}
         description={description}
@@ -136,6 +229,8 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
         onPromptChange={setPrompt}
       />
 
+      <TaskTagFields tags={tags} knownTags={collectKnownTags(controller.getSnapshot().tasks)} onChange={setTags} />
+
         <label className={css.field}>
           <span className={css.fieldLabel}>{t('new.freeze')}</span>
           <textarea

package/src/client/board/TaskBoard.tsx

@@ -5,7 +5,7 @@
  */
 import { memo, useCallback, useEffect, useState } from 'react'
 import { selectedTaskOf, type BoardController } from '../../core/controller.ts'
-import { COLUMNS, canMoveManually, type TaskRecord } from '../../core/tasks.ts'
+import { COLUMNS, canMoveManually, collectKnownTags, tagTone, type TaskRecord } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
 import { NewTaskModal } from './NewTaskModal.tsx'
@@ -13,15 +13,30 @@ import { STATUS_KEY } from './status-key.ts'
 import { TaskCard } from './TaskCard.tsx'
 import { TaskDetail } from './TaskDetail.tsx'
 
-/** Case-insensitive title/description/freeze-snapshot match. */
+/** Sentinel option value of the project row's "register a new project" entry. */
+export const NEW_PROJECT_VALUE = '__dsh_new_project__'
+
+/** Case-insensitive title/description/tag/freeze-snapshot match. */
 export function matchesFilter(task: TaskRecord, filter: string): boolean {
   if (filter.trim() === '') return true
   const needle = filter.trim().toLowerCase()
-  const haystacks = [task.title, task.description]
+  const haystacks = [task.title, task.description, ...(task.tags ?? []).map(tag => tag.name)]
   if (task.freeze !== undefined) haystacks.push(task.freeze.goal, task.freeze.progress, task.freeze.next)
   return haystacks.some(text => text.toLowerCase().includes(needle))
 }
 
+/**
+ * Whether a task carries every selected label (issue #1521). Multi-select is
+ * conjunctive: adding a label narrows the board instead of widening it, which
+ * is the only reading that keeps "工作" selected from dragging unrelated cards
+ * back in when a second label is added.
+ */
+export function matchesTagFilter(task: TaskRecord, selected: readonly string[]): boolean {
+  if (selected.length === 0) return true
+  const names = new Set((task.tags ?? []).map(tag => tag.name))
+  return selected.every(name => names.has(name))
+}
+
 /**
  * Memoized per-card adapter: with a stable `onOpen` from the board and an
  * immutable task record (only the changed card gets a new object ref), a card
@@ -41,14 +56,50 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
     [controller],
   )
   const [filter, setFilter] = useState('')
+  const [tagFilter, setTagFilter] = useState<string[]>([])
   const [showNew, setShowNew] = useState(false)
+  // Project partition (#1536): '' means "all projects". A selected project
+  // narrows the board and becomes the new-task form's default workspace.
+  const [projectId, setProjectId] = useState('')
+  const [showNewProject, setShowNewProject] = useState(false)
+  const [newProjectPath, setNewProjectPath] = useState('')
+  const [newProjectError, setNewProjectError] = useState<string | undefined>(undefined)
+  const [newProjectPending, setNewProjectPending] = useState(false)
   const selected = selectedTaskOf(snapshot)
   const archiveView = snapshot.archiveView
+  // Every label in use across the ledger (board and archive alike), so the
+  // filter never loses an option just because its task was archived.
+  const knownTags = collectKnownTags(snapshot.tasks)
   // Archived tasks leave the columns; the archive view shows them instead.
   const visible = snapshot.tasks.filter(task =>
     (archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined)
-    && matchesFilter(task, filter),
+    && (projectId === '' || task.workspaceId === projectId)
+    && matchesFilter(task, filter)
+    && matchesTagFilter(task, tagFilter),
   )
+  const projects = snapshot.executionOptions.workspaces
+  const canCreateProject = snapshot.canCreateWorkspace === true
+  const submitNewProject = async (): Promise<void> => {
+    const path = newProjectPath.trim()
+    if (path === '') return
+    setNewProjectPending(true)
+    setNewProjectError(undefined)
+    try {
+      const created = await controller.createWorkspace(path)
+      setProjectId(created.workspaceId)
+      setShowNewProject(false)
+      setNewProjectPath('')
+    } catch (error) {
+      setNewProjectError(error instanceof Error ? error.message : String(error))
+    } finally {
+      setNewProjectPending(false)
+    }
+  }
+  const toggleTag = useCallback((name: string): void => {
+    setTagFilter(current => current.includes(name)
+      ? current.filter(entry => entry !== name)
+      : [...current, name])
+  }, [])
   const openTask = useCallback((id: string): void => { controller.openTask(id) }, [controller])
 
   return (
@@ -74,6 +125,32 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
             })}
           </span>
         )}
+        {(projects.length > 0 || canCreateProject) && (
+          <label className={css.projectFilter}>
+            <span className={css.projectFilterLabel}>{t('board.project')}</span>
+            <select
+              className={css.select}
+              data-dsh-part="project-filter"
+              value={projectId}
+              aria-label={t('board.project')}
+              onChange={event => {
+                const value = event.target.value
+                if (value === NEW_PROJECT_VALUE) {
+                  setNewProjectError(undefined)
+                  setShowNewProject(true)
+                  return
+                }
+                setProjectId(value)
+              }}
+            >
+              <option value="">{t('board.projectAll')}</option>
+              {projects.map(project => (
+                <option key={project.workspaceId} value={project.workspaceId}>{project.title}</option>
+              ))}
+              {canCreateProject && <option value={NEW_PROJECT_VALUE}>{t('board.projectNew')}</option>}
+            </select>
+          </label>
+        )}
         <input
           className={css.search}
           type="search"
@@ -100,6 +177,68 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         </button>
       </header>
 
+      {showNewProject && (
+        <div className={css.projectDialog} data-dsh-part="project-dialog">
+          <label className={css.field}>
+            <span className={css.fieldLabel}>{t('board.projectNewPath')}</span>
+            <input
+              className={css.input}
+              value={newProjectPath}
+              placeholder={t('board.projectNewPathPlaceholder')}
+              spellCheck={false}
+              onChange={event => { setNewProjectPath(event.target.value); setNewProjectError(undefined) }}
+            />
+          </label>
+          {newProjectError !== undefined && <p className={css.formError}>{t('board.projectCreateFailed', { error: newProjectError })}</p>}
+          <div className={css.projectDialogActions}>
+            <button
+              type="button"
+              className={css.ghostButton}
+              onClick={() => { setShowNewProject(false); setNewProjectError(undefined) }}
+            >
+              {t('new.cancel')}
+            </button>
+            <button
+              type="button"
+              className={css.primaryButton}
+              disabled={newProjectPending || newProjectPath.trim() === ''}
+              onClick={() => { void submitNewProject() }}
+            >
+              {t('board.projectCreate')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!archiveView && knownTags.length > 0 && (
+        <div className={css.tagFilter} data-dsh-part="tag-filter">
+          <span className={css.tagFilterLabel}>{t('board.tagFilter')}</span>
+          {knownTags.map(tag => {
+            const active = tagFilter.includes(tag.name)
+            return (
+              <button
+                key={tag.name}
+                type="button"
+                className={css.tagChip}
+                data-dsh-part="tag-chip"
+                data-tag-tone={tagTone(tag.name)}
+                data-active={active ? 'true' : undefined}
+                aria-pressed={active}
+                title={tag.promptPrefix === undefined ? tag.name : tag.promptPrefix}
+                onClick={() => { toggleTag(tag.name) }}
+              >
+                {tag.name}
+              </button>
+            )
+          })}
+          {tagFilter.length > 0 && (
+            <button type="button" className={css.linkButton} onClick={() => { setTagFilter([]) }}>
+              {t('board.tagFilterClear')}
+            </button>
+          )}
+        </div>
+      )}
+
       {snapshot.transportError !== undefined && (
         <div className={css.formError}>
           {t('board.hostError', { error: snapshot.transportError })}{' '}
@@ -120,7 +259,9 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
               {visible.map(task => (
                 <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
               ))}
-              {visible.length === 0 && <div className={css.columnEmpty}>{t('archive.empty')}</div>}
+              {visible.length === 0 && (
+                <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('archive.empty')}</div>
+              )}
             </div>
           </section>
         ) : (
@@ -156,7 +297,9 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                   {tasks.map(task => (
                     <MemoTaskCard key={task.id} task={task} pending={snapshot.pendingTaskIds.includes(task.id)} timeZone={snapshot.host?.scheduler.timeZone} onOpen={openTask} />
                   ))}
-                  {tasks.length === 0 && <div className={css.columnEmpty}>{t('board.empty')}</div>}
+                  {tasks.length === 0 && (
+                    <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('board.empty')}</div>
+                  )}
                 </div>
               </section>
             )
@@ -170,6 +313,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
       {showNew && (
         <NewTaskModal
           controller={controller}
+          {...(projectId === '' ? {} : { defaultWorkspaceId: projectId })}
           onClose={() => { setShowNew(false) }}
         />
       )}

package/src/client/board/TaskCard.tsx

@@ -9,7 +9,7 @@
  */
 import { memo } from 'react'
 import type { TaskRecord } from '../../core/tasks.ts'
-import { executionLabel } from '../../core/tasks.ts'
+import { executionLabel, tagTone } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
 
@@ -59,6 +59,22 @@ function TaskCardInner({ task, pending, timeZone, onClick }: { task: TaskRecord;
       title={task.description !== '' ? task.description : task.title}
     >
       <span className={css.cardTitle}>{task.title}</span>
+      {task.tags !== undefined && task.tags.length > 0 && (
+        <span className={css.cardTags}>
+          {task.tags.map(tag => (
+            <span
+              key={tag.name}
+              className={css.cardTag}
+              data-tag-tone={tagTone(tag.name)}
+              data-dsh-part="tag-badge"
+              data-tag-hint={tag.promptPrefix === undefined ? undefined : tag.promptPrefix}
+              title={tag.promptPrefix === undefined ? tag.name : tag.promptPrefix}
+            >
+              {tag.name}
+            </span>
+          ))}
+        </span>
+      )}
       {task.description !== '' && <span className={css.cardExcerpt}>{task.description}</span>}
       <span className={css.cardMeta}>
         <span className={css.cardTime}>{t('board.updated')} {formatTime(task.updatedAt)}</span>

package/src/client/board/TaskDetail.tsx

@@ -7,14 +7,14 @@
 import { useEffect, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
 import { isValidCron } from '../../core/schedule.ts'
-import { MANUAL_STATUSES, TASK_PERMISSIONS, type ExecutionRecord, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
+import { MANUAL_STATUSES, TASK_PERMISSIONS, tagTone, type ExecutionRecord, type TaskPermission, type TaskRecord } from '../../core/tasks.ts'
 import { canEditTaskContent } from '../../core/use-cases/task-update.ts'
 import { requiresPermissionConfirmation } from '../../core/handover.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import css from '../board.module.css'
 import { ConfirmDialog } from './ConfirmDialog.tsx'
-import { EditTaskModal } from './EditTaskModal.tsx'
+import { EditTaskModal, EditTagsModal } from './EditTaskModal.tsx'
 import { NewTaskModal } from './NewTaskModal.tsx'
 import { formatHostTimestamp, formatTime } from './TaskCard.tsx'
 import { STATUS_KEY } from './status-key.ts'
@@ -269,6 +269,7 @@ function ScheduleSection({ controller, task, pending }: { controller: BoardContr
 export function TaskDetail({ controller, task }: { controller: BoardController; task: TaskRecord }) {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [showEdit, setShowEdit] = useState(false)
+  const [showEditTags, setShowEditTags] = useState(false)
   const [showDuplicate, setShowDuplicate] = useState(false)
 
   // Keep the overlay in sync if the task record changes underneath.
@@ -277,6 +278,7 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
   // A re-used overlay instance must not carry an edit session across tasks.
   useEffect(() => {
     setShowEdit(false)
+    setShowEditTags(false)
     setShowDuplicate(false)
   }, [task.id])
   const current = latest
@@ -320,6 +322,26 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
             <p className={css.detailText}>{current.description !== '' ? current.description : '—'}</p>
           </section>
 
+          {current.tags !== undefined && current.tags.length > 0 && (
+            <section className={css.detailSection} data-dsh-part="tags">
+              <h4>{t('new.tags')}</h4>
+              <div className={css.cardTags}>
+                {current.tags.map(tag => (
+                  <span
+                    key={tag.name}
+                    className={css.cardTag}
+                    data-tag-tone={tagTone(tag.name)}
+                    data-dsh-part="tag-badge"
+                    data-tag-hint={tag.promptPrefix === undefined ? undefined : tag.promptPrefix}
+                    title={tag.promptPrefix === undefined ? tag.name : tag.promptPrefix}
+                  >
+                    {tag.name}
+                  </span>
+                ))}
+              </div>
+            </section>
+          )}
+
           {current.freeze !== undefined && (
             <section className={css.detailSection} data-dsh-part="freeze">
               <h4>{t('detail.freeze')}</h4>
@@ -431,6 +453,16 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
               {t('detail.edit')}
             </button>
           )}
+          {!archived && !canEditTaskContent(current) && current.status !== 'running' && (
+            <button
+              type="button"
+              className={css.ghostButton}
+              disabled={pending}
+              onClick={() => { setShowEditTags(true) }}
+            >
+              {t('detail.editTags')}
+            </button>
+          )}
           {!archived && (
             <button
               type="button"
@@ -514,6 +546,10 @@ export function TaskDetail({ controller, task }: { controller: BoardController;
         <EditTaskModal controller={controller} task={current} onClose={() => { setShowEdit(false) }} />
       )}
 
+      {showEditTags && !archived && current.status !== 'running' && (
+        <EditTagsModal controller={controller} task={current} onClose={() => { setShowEditTags(false) }} />
+      )}
+
       {showDuplicate && !archived && (
         <NewTaskModal
           controller={controller}

package/src/client/board/TaskForm.tsx

@@ -5,9 +5,13 @@
  * are controlled components.
  */
 import type { ReactNode } from 'react'
+import { TAG_NAME_MAX_LENGTH, TAG_PROMPT_MAX_LENGTH, TASK_TAG_LIMIT, normalizeTags, type TaskTag } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
 
+/** DOM id shared by the tag-name inputs and their datalist (one board at a time). */
+const TAG_NAME_LIST_ID = 'dsh-task-board-tag-names'
+
 /** Modal overlay: closes on backdrop press, submits through the form. */
 export function ModalShell({
   ariaLabel,
@@ -109,3 +113,84 @@ export function TaskContentFields({
     </>
   )
 }
+
+/**
+ * Task labels (issue #1521): one row per label holding the badge name and an
+ * optional execution hint. The name inputs offer the labels already used on the
+ * board through a datalist, and picking one adopts its hint when the row has
+ * none — so a business line is defined once and reused by every later task.
+ */
+export function TaskTagFields({
+  tags,
+  knownTags,
+  onChange,
+}: {
+  tags: TaskTag[]
+  /** Labels already carried elsewhere on the board. */
+  knownTags: TaskTag[]
+  onChange: (tags: TaskTag[]) => void
+}) {
+  const update = (index: number, patch: Partial<TaskTag>): void => {
+    onChange(tags.map((tag, position) => (position === index ? { ...tag, ...patch } : tag)))
+  }
+
+  return (
+    <div className={css.field}>
+      <span className={css.fieldLabel}>{t('new.tags')}</span>
+      <span className={css.fieldHint}>{t('new.tagsHint')}</span>
+      {tags.map((tag, index) => (
+        <div className={css.tagRow} key={index}>
+          <input
+            className={css.input}
+            list={TAG_NAME_LIST_ID}
+            value={tag.name}
+            maxLength={TAG_NAME_MAX_LENGTH}
+            placeholder={t('new.tagNamePlaceholder')}
+            aria-label={t('new.tagName')}
+            onChange={(event) => {
+              const name = event.target.value
+              const known = knownTags.find(candidate => candidate.name === name)
+              const adoptsHint = known?.promptPrefix !== undefined && (tag.promptPrefix ?? '').trim() === ''
+              update(index, adoptsHint ? { name, promptPrefix: known.promptPrefix } : { name })
+            }}
+          />
+          <input
+            className={css.input}
+            value={tag.promptPrefix ?? ''}
+            maxLength={TAG_PROMPT_MAX_LENGTH}
+            placeholder={t('new.tagPromptPlaceholder')}
+            aria-label={t('new.tagPrompt')}
+            onChange={event => { update(index, { promptPrefix: event.target.value }) }}
+          />
+          <button
+            type="button"
+            className={css.ghostButton}
+            aria-label={t('new.tagRemove', { name: tag.name })}
+            onClick={() => { onChange(tags.filter((_, position) => position !== index)) }}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+      <datalist id={TAG_NAME_LIST_ID}>
+        {knownTags.map(tag => <option key={tag.name} value={tag.name} />)}
+      </datalist>
+      <button
+        type="button"
+        className={css.ghostButton + ' ' + css.tagAddButton}
+        disabled={tags.length >= TASK_TAG_LIMIT}
+        onClick={() => { onChange([...tags, { name: '' }]) }}
+      >
+        + {t('new.tagAdd')}
+      </button>
+    </div>
+  )
+}
+
+/**
+ * Clean a tag list via normalizeTags: trim, drop blanks and duplicates, cap
+ * lengths and count, so the wire always carries a valid tag list.
+ */
+export function cleanTags(tags: readonly TaskTag[]): TaskTag[] {
+  return normalizeTags(tags) ?? []
+}