@linxin666/dsh-client-ui-task-board 0.3.22 → 0.3.24

package/src/client/board/NewTaskModal.tsx

@@ -2,7 +2,7 @@
  * 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'
@@ -10,6 +10,7 @@ import { collectKnownTags, TASK_PERMISSIONS, type TaskPermission, type TaskRecor
 import { t, type TaskBoardKey } from '../locales.ts'
 import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import { ModalShell, TaskContentFields, TaskTagFields, cleanTags } from './TaskForm.tsx'
+import { readParseModelPreference, writeParseModelPreference } from './parse-model-pref.ts'
 import css from '../board.module.css'
 
 export interface NewTaskModalProps {
@@ -17,17 +18,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 ?? '')
@@ -45,6 +51,17 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
   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('')
+  // Issue #1621: start from the model this browser used last, not from the
+  // roster's first entry; '' is the Host default and stays valid.
+  const [parseModel, setParseModel] = useState(() => readParseModelPreference())
+  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.
@@ -53,7 +70,47 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
     [controller],
   )
 
-  const submit = async (): Promise<void> => {
+  // The model roster arrives asynchronously. A remembered model the deployment
+  // no longer offers falls back to the Host default; an empty value is the
+  // Host-default choice and is never overwritten by the roster (issue #1621).
+  useEffect(() => {
+    if (parseModel === '' || parseModels.length === 0) return
+    if (parseModels.some(option => option.id === parseModel)) return
+    setParseModel('')
+    writeParseModelPreference('')
+  }, [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)
+    }
+  }
+
+  /**
+   * Create the task through the Host, then optionally start it.
+   * @param runAfterCreate - true for the "create and run" action: the task is
+   * committed either way, and a refused start opens the task instead of
+   * reporting the creation as failed.
+   */
+  const submit = async (runAfterCreate: boolean): Promise<void> => {
     if (scheduleEnabled) {
       const cron = scheduleCron.trim()
       if (cron === '' || !isValidCron(cron)) {
@@ -112,6 +169,14 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
         await controller.archiveTask(initialTask.id)
       }
     }
+    if (runAfterCreate) {
+      // The task exists from here on, so a refused start (a permission above
+      // the session default, a pinned target that went stale) must not read as
+      // a failed creation: open the task, whose detail view owns the
+      // confirmation step and the refusal message.
+      const started = await controller.runTask(task.id)
+      if (!started) controller.openTask(task.id)
+    }
     onClose()
   }
 
@@ -129,9 +194,58 @@ export function NewTaskModal({ controller, onClose, initialTask, onDuplicateSucc
       error={error}
       pending={pending}
       submitLabel={t('new.submit')}
-      onSubmit={() => { void submit() }}
+      onSubmit={() => { void submit(false) }}
       onClose={onClose}
+      secondaryAction={{ label: t('new.createAndRun'), onSubmit: () => { void submit(true) } }}
     >
+      {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)
+                writeParseModelPreference(event.target.value)
+              }}
+            >
+              <option value="">{t('exec.model.default')}</option>
+              {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}

package/src/client/board/TaskBoard.tsx

@@ -13,6 +13,9 @@ import { STATUS_KEY } from './status-key.ts'
 import { TaskCard } from './TaskCard.tsx'
 import { TaskDetail } from './TaskDetail.tsx'
 
+/** 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
@@ -55,6 +58,13 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   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
@@ -63,9 +73,28 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   // Archived tasks leave the columns; the archive view shows them instead.
   const visible = snapshot.tasks.filter(task =>
     (archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined)
+    && (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)
@@ -96,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"
@@ -122,6 +177,39 @@ 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>
@@ -225,6 +313,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
       {showNew && (
         <NewTaskModal
           controller={controller}
+          {...(projectId === '' ? {} : { defaultWorkspaceId: projectId })}
           onClose={() => { setShowNew(false) }}
         />
       )}

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,7 +5,7 @@
  * are controlled components.
  */
 import type { ReactNode } from 'react'
-import { TAG_NAME_MAX_LENGTH, TAG_PROMPT_MAX_LENGTH, TASK_TAG_LIMIT, type TaskTag } from '../../core/tasks.ts'
+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'
 
@@ -21,6 +21,7 @@ export function ModalShell({
   submitLabel,
   onSubmit,
   onClose,
+  secondaryAction,
   children,
 }: {
   ariaLabel: string
@@ -30,6 +31,8 @@ export function ModalShell({
   submitLabel: string
   onSubmit: () => void
   onClose: () => void
+  /** Optional second action beside the primary submit (e.g. create and run). */
+  secondaryAction?: { label: string; onSubmit: () => void }
   children: ReactNode
 }) {
   return (
@@ -50,6 +53,16 @@ export function ModalShell({
           <button type="button" className={css.ghostButton} onClick={onClose}>
             {t('new.cancel')}
           </button>
+          {secondaryAction !== undefined && (
+            <button
+              type="button"
+              className={css.ghostButton}
+              disabled={pending}
+              onClick={secondaryAction.onSubmit}
+            >
+              {secondaryAction.label}
+            </button>
+          )}
           <button type="submit" className={css.primaryButton} disabled={pending}>
             {submitLabel}
           </button>
@@ -188,16 +201,9 @@ export function TaskTagFields({
 }
 
 /**
- * Drop blank rows and trim what survives, so the wire always carries a valid
- * tag list (the protocol rejects a list with a blank name or an empty array).
+ * 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[] {
-  const cleaned: TaskTag[] = []
-  for (const tag of tags) {
-    const name = tag.name.trim()
-    if (name === '') continue
-    const promptPrefix = tag.promptPrefix?.trim()
-    cleaned.push(promptPrefix === undefined || promptPrefix === '' ? { name } : { name, promptPrefix })
-  }
-  return cleaned
+  return normalizeTags(tags) ?? []
 }

package/src/client/board/parse-model-pref.ts

@@ -0,0 +1,35 @@
+/**
+ * The model the user last picked for AI parsing, remembered per browser so the
+ * next new-task modal starts from it instead of the roster's first entry
+ * (issue #1621). An empty value is a real choice — "let the Host use its
+ * default model" — and is remembered as such.
+ */
+const PARSE_MODEL_KEY = 'dsh-task-board.parse-model'
+
+/** The nearest browser storage, or undefined when the global itself throws. */
+function defaultStorage(): Storage | undefined {
+  try {
+    return globalThis.localStorage
+  } catch {
+    return undefined
+  }
+}
+
+/** The remembered parse model; '' means the Host default (or no preference). */
+export function readParseModelPreference(storage: Pick<Storage, 'getItem'> | undefined = defaultStorage()): string {
+  try {
+    return storage?.getItem(PARSE_MODEL_KEY) ?? ''
+  } catch {
+    // A blocked or full store must never break the form.
+    return ''
+  }
+}
+
+/** Remember the picked parse model; '' records the Host-default choice. */
+export function writeParseModelPreference(model: string, storage: Pick<Storage, 'setItem'> | undefined = defaultStorage()): void {
+  try {
+    storage?.setItem(PARSE_MODEL_KEY, model)
+  } catch {
+    // Storage is optional: the picker still works without it.
+  }
+}

package/src/client/board.module.css

@@ -1240,3 +1240,64 @@ html[data-dsh-taskboard-active]:not([data-dsh-ssh-active]) [class*='centerCol']
 .tagAddButton {
   align-self: flex-start;
 }
+
+/* --- project partition (#1536) ------------------------------------------------ */
+
+.projectFilter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+}
+
+.projectFilterLabel {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+  white-space: nowrap;
+}
+
+.projectDialog {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: none;
+  margin-bottom: 8px;
+  padding: 10px 12px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+}
+
+.projectDialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* --- AI parse of pasted text (#1540) ------------------------------------------ */
+
+.aiParse {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+}
+
+.aiParseRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.aiParseRow .select {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.aiParseRow .ghostButton,
+.aiParseRow .primaryButton {
+  flex: none;
+}