@linxin666/dsh-client-ui-task-board 0.4.3 → 0.4.5

package/src/client/board/TaskBoard.tsx

@@ -3,25 +3,65 @@
  * active. Cards open the task detail (never execute directly); the header
  * offers filter, new-task, and a back-to-chat escape.
  */
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { selectedTaskOf, type BoardController } from '../../core/controller.ts'
-import { COLUMNS, canMoveManually, collectKnownTags, tagTone, type TaskRecord } from '../../core/tasks.ts'
+import { COLUMNS, MANUAL_STATUSES, canMoveTask, collectKnownTags, hasOpenExecution, tagTone, type TaskRecord, type TaskStatus } from '../../core/tasks.ts'
 import { t } from '../locales.ts'
 import css from '../board.module.css'
+import { IconChevronLeft, IconCompactRows, IconExpandRows, IconPlus } from './icons.tsx'
 import { NewTaskModal } from './NewTaskModal.tsx'
+import { usePresence } from './overlay.tsx'
 import { STATUS_KEY } from './status-key.ts'
+import { TagManagerModal } from './TagManagerModal.tsx'
+import { cardTimeline, groupByRecency, readCompactColumns, RECENCY_KEY, writeCompactColumns, type RecencyGroup } from './card-view.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. */
+/**
+ * Collect every string leaf of an opaque extension payload. The board does not
+ * interpret provider data, but a provider's identifiers and labels should stay
+ * searchable from the board's own filter, so the leaf strings join the haystack.
+ */
+function collectSearchLeaves(value: unknown, out: string[]): void {
+  if (typeof value === 'string') {
+    out.push(value)
+    return
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    out.push(String(value))
+    return
+  }
+  if (Array.isArray(value)) {
+    for (const item of value) collectSearchLeaves(item, out)
+    return
+  }
+  if (typeof value === 'object' && value !== null) {
+    for (const nested of Object.values(value)) collectSearchLeaves(nested, out)
+  }
+}
+
+/**
+ * Case-insensitive title/description/tag/freeze-snapshot/provider-payload match.
+ *
+ * A leading `#` is dropped from the needle. Providers render their own
+ * identifiers with that prefix (`#1758`) and the board attaches no meaning to
+ * it: stripping it keeps the identifier searchable exactly as it is written on
+ * screen, without the board learning any provider's vocabulary.
+ */
 export function matchesFilter(task: TaskRecord, filter: string): boolean {
-  if (filter.trim() === '') return true
-  const needle = filter.trim().toLowerCase()
+  const query = filter.trim().toLowerCase()
+  if (query === '') return true
+  const needle = query.startsWith('#') ? query.slice(1) : query
   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)
+  if (task.integrations !== undefined) {
+    const leaves: string[] = []
+    collectSearchLeaves(task.integrations, leaves)
+    haystacks.push(...leaves)
+  }
   return haystacks.some(text => text.toLowerCase().includes(needle))
 }
 
@@ -43,11 +83,13 @@ export function matchesTagFilter(task: TaskRecord, selected: readonly string[]):
  * re-renders only when its own task changes — not when a sibling card status,
  * the filter, or the selection moves.
  */
-const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpen, subtaskCount, isSubtask, subtasksDone, subtasksRunning, subtasksFailed }: {
+const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpen, onOpenSession, compact, subtaskCount, isSubtask, subtasksDone, subtasksRunning, subtasksFailed }: {
   task: TaskRecord
   pending: boolean
   timeZone?: string
   onOpen: (id: string) => void
+  onOpenSession: (sessionId: string) => void
+  compact: boolean
   subtaskCount: number
   isSubtask: boolean
   subtasksDone: number
@@ -61,6 +103,8 @@ const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpe
       pending={pending}
       timeZone={timeZone}
       onClick={onClick}
+      onOpenSession={onOpenSession}
+      compact={compact}
       subtaskCount={subtaskCount}
       isSubtask={isSubtask}
       subtasksDone={subtasksDone}
@@ -70,6 +114,15 @@ const MemoTaskCard = memo(function MemoTaskCard({ task, pending, timeZone, onOpe
   )
 })
 
+/** Settled columns whose cards group by recency and fold the oldest group. */
+const GROUPED_COLUMNS: readonly TaskStatus[] = ['done', 'failed']
+
+/** Cards a grouped column renders before the oldest group folds. */
+export const COLUMN_FOLD_THRESHOLD = 30
+
+/** Column key of the archive view in the fold-open set. */
+const ARCHIVE_COLUMN = 'archived'
+
 /** Board component; subscribes to the controller snapshot. */
 export function TaskBoard({ controller }: { controller: BoardController }) {
   const [snapshot, setSnapshot] = useState(controller.getSnapshot())
@@ -84,7 +137,13 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   // the header switch reveals the flat view. A text or label filter re-enables
   // them automatically, so searching a subtask title still finds it.
   const [hideSubtasks, setHideSubtasks] = useState(true)
+  // Density is a per-column browser preference: the long settled column starts
+  // compact, and each column header toggles its own density.
+  const [compactColumns, setCompactColumns] = useState<TaskStatus[]>(() => readCompactColumns(globalThis.localStorage))
+  // Grouped columns whose folded "earlier" group the user expanded this visit.
+  const [unfolded, setUnfolded] = useState<string[]>([])
   const [showNew, setShowNew] = useState(false)
+  const [showTagManager, setShowTagManager] = 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('')
@@ -94,13 +153,28 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   const [newProjectPending, setNewProjectPending] = useState(false)
   const selected = selectedTaskOf(snapshot)
   const archiveView = snapshot.archiveView
+  // Overlay lifecycle: both the detail view and the create dialog keep the
+  // last thing they showed while their exit leg runs, so closing one is the
+  // return trip of opening it instead of a node disappearing from under the
+  // pointer. The detail view's task is remembered so the surface still has its
+  // content to animate out after the selection is cleared.
+  const detailPresence = usePresence(selected !== undefined)
+  const lastDetail = useRef<TaskRecord | undefined>(undefined)
+  useEffect(() => { if (selected !== undefined) lastDetail.current = selected }, [selected])
+  const detailTask = selected ?? lastDetail.current
+  const newTaskPresence = usePresence(showNew)
+  const tagManagerPresence = usePresence(showTagManager)
   // 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)
-  // The family of cards this view owns: the board columns, or the archive.
-  const onBoard = snapshot.tasks.filter(task =>
-    archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined,
-  )
+  // The family of cards this view owns: the board columns, or the archive. A
+  // provider-hidden card (board hidden flag, or any registered visibility
+  // predicate rejecting it) never appears here.
+  const onBoard = snapshot.tasks.filter(task => {
+    if (task.hidden === true) return false
+    if (!(snapshot.visibility ?? []).every(predicate => predicate(task))) return false
+    return archiveView ? task.archivedAt !== undefined : task.archivedAt === undefined
+  })
   // Direct subtask count and state roll-up per task, for the card badge: a
   // hidden tree still has to report how many children run, fail, or finish.
   const subtaskCounts = new Map<string, number>()
@@ -109,8 +183,10 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
     if (task.parentId === undefined) continue
     subtaskCounts.set(task.parentId, (subtaskCounts.get(task.parentId) ?? 0) + 1)
     const rollup = subtaskRollup.get(task.parentId) ?? { done: 0, running: 0, failed: 0 }
-    if (task.status === 'done') rollup.done += 1
-    else if (task.status === 'running') rollup.running += 1
+    // "Running" in the badge means the runner is executing that subtask; a
+    // subtask parked in the running column by hand is not executing anything.
+    if (hasOpenExecution(task)) rollup.running += 1
+    else if (task.status === 'done') rollup.done += 1
     else if (task.status === 'failed') rollup.failed += 1
     subtaskRollup.set(task.parentId, rollup)
   }
@@ -147,6 +223,68 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
       : [...current, name])
   }, [])
   const openTask = useCallback((id: string): void => { controller.openTask(id) }, [controller])
+  const openSession = useCallback((sessionId: string): void => { controller.openSession(sessionId) }, [controller])
+  const toggleCompact = useCallback((status: TaskStatus): void => {
+    setCompactColumns(current => {
+      const next = current.includes(status) ? current.filter(entry => entry !== status) : [...current, status]
+      writeCompactColumns(globalThis.localStorage, next)
+      return next
+    })
+  }, [])
+  const timeZone = snapshot.host?.scheduler.timeZone
+  const now = Date.now()
+  const renderCard = (task: TaskRecord, compact: boolean) => (
+    <MemoTaskCard
+      key={task.id}
+      task={task}
+      pending={snapshot.pendingTaskIds.includes(task.id)}
+      timeZone={timeZone}
+      onOpen={openTask}
+      onOpenSession={openSession}
+      compact={compact}
+      subtaskCount={subtaskCounts.get(task.id) ?? 0}
+      isSubtask={task.parentId !== undefined}
+      subtasksDone={subtaskRollup.get(task.id)?.done ?? 0}
+      subtasksRunning={subtaskRollup.get(task.id)?.running ?? 0}
+      subtasksFailed={subtaskRollup.get(task.id)?.failed ?? 0}
+    />
+  )
+  /**
+   * Settled cards in recency groups, newest first. A column longer than the
+   * fold threshold folds its oldest group behind a disclosure, so a column of
+   * a hundred finished issues opens on what happened lately; a text or label
+   * search never folds, because a match hidden behind a fold reads as no match.
+   */
+  const renderGrouped = (columnKey: string, tasks: TaskRecord[], compact: boolean, archived: boolean) => {
+    const buckets = groupByRecency(tasks, task => cardTimeline(task, archived).at, now, timeZone)
+    const foldable = !searchActive && tasks.length > COLUMN_FOLD_THRESHOLD && buckets.length > 1
+    const open = unfolded.includes(columnKey)
+    return buckets.map(bucket => {
+      const folded = foldable && bucket.group === buckets[buckets.length - 1]!.group && !open
+      return (
+        <div key={bucket.group} className={css.cardGroup} data-dsh-part="card-group" data-group={bucket.group}>
+          <div className={css.cardGroupHeader}>
+            <span>{t(RECENCY_KEY[bucket.group as RecencyGroup])}</span>
+            <span className={css.cardGroupCount}>{bucket.items.length}</span>
+            {foldable && bucket.group === buckets[buckets.length - 1]!.group && (
+              <button
+                type="button"
+                className={css.linkButton}
+                data-dsh-part="card-group-toggle"
+                aria-expanded={!folded}
+                onClick={() => {
+                  setUnfolded(current => current.includes(columnKey) ? current.filter(entry => entry !== columnKey) : [...current, columnKey])
+                }}
+              >
+                {folded ? t('board.group.expand', { count: String(bucket.items.length) }) : t('board.group.collapse')}
+              </button>
+            )}
+          </div>
+          {!folded && bucket.items.map(task => renderCard(task, compact))}
+        </div>
+      )
+    })
+  }
 
   return (
     <div className={css.board} data-dsh-taskboard-board="" data-dsh-plugin="task-board">
@@ -159,7 +297,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
           aria-label={t('board.close')}
           onClick={() => { controller.closeBoard() }}
         >
-          <span aria-hidden="true">‹</span>
+          <IconChevronLeft size={15} />
           <span>{t('board.close')}</span>
         </button>
         <h2 className={css.boardTitle}>{t('board.title')}</h2>
@@ -171,68 +309,78 @@ 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)
-              }}
+        {/* Filters, view toggles and the create action share one toolbar group so
+            the header reads as identity + tools instead of one long strip. The
+            toggles keep the outlined control and only change role colour when
+            they are on, so pressing one never resizes the row. */}
+        <div className={css.boardTools}>
+          {(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"
+            placeholder={t('board.search')}
+            value={filter}
+            onChange={event => { setFilter(event.target.value) }}
+            aria-label={t('board.search')}
+          />
+          {hasSubtasks && (
+            <button
+              type="button"
+              className={css.ghostButton}
+              data-dsh-part="subtask-filter"
+              data-active={hidingSubtasks ? 'true' : undefined}
+              aria-pressed={hidingSubtasks}
+              title={t('board.subtaskFilterHint')}
+              onClick={() => { setHideSubtasks(value => !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"
-          placeholder={t('board.search')}
-          value={filter}
-          onChange={event => { setFilter(event.target.value) }}
-          aria-label={t('board.search')}
-        />
-        {hasSubtasks && (
+              {hidingSubtasks ? t('board.showSubtasks') : t('board.hideSubtasks')}
+            </button>
+          )}
           <button
             type="button"
-            className={hidingSubtasks ? css.primaryButton : css.ghostButton}
-            data-dsh-part="subtask-filter"
-            aria-pressed={hidingSubtasks}
-            title={t('board.subtaskFilterHint')}
-            onClick={() => { setHideSubtasks(value => !value) }}
+            className={css.ghostButton}
+            data-active={archiveView ? 'true' : undefined}
+            aria-pressed={archiveView}
+            onClick={() => { controller.toggleArchiveView() }}
           >
-            {hidingSubtasks ? t('board.showSubtasks') : t('board.hideSubtasks')}
+            {archiveView
+              ? t('board.backToBoard')
+              : t('board.archiveView', { count: String(snapshot.tasks.filter(task => task.archivedAt !== undefined).length) })}
           </button>
-        )}
-        <button
-          type="button"
-          className={archiveView ? css.primaryButton : css.ghostButton}
-          onClick={() => { controller.toggleArchiveView() }}
-        >
-          {archiveView
-            ? t('board.backToBoard')
-            : t('board.archiveView', { count: String(snapshot.tasks.filter(task => task.archivedAt !== undefined).length) })}
-        </button>
-        <button
-          type="button"
-          className={css.primaryButton}
-          onClick={() => { setShowNew(true) }}
-        >
-          + {t('board.new')}
-        </button>
+          <button
+            type="button"
+            className={css.primaryButton}
+            onClick={() => { setShowNew(true) }}
+          >
+            <IconPlus size={15} />
+            {t('board.new')}
+          </button>
+        </div>
       </header>
 
       {showNewProject && (
@@ -289,6 +437,16 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
               </button>
             )
           })}
+          {/* The row can only shrink through the manager: without it a label
+              created once stays on the board forever. */}
+          <button
+            type="button"
+            className={css.linkButton}
+            data-dsh-part="tag-manage"
+            onClick={() => { setShowTagManager(true) }}
+          >
+            {t('board.tagManage')}
+          </button>
           {tagFilter.length > 0 && (
             <button type="button" className={css.linkButton} onClick={() => { setTagFilter([]) }}>
               {t('board.tagFilterClear')}
@@ -314,20 +472,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
               <span className={css.columnCount}>{visible.length}</span>
             </header>
             <div className={css.cards}>
-              {visible.map(task => (
-                <MemoTaskCard
-                  key={task.id}
-                  task={task}
-                  pending={snapshot.pendingTaskIds.includes(task.id)}
-                  timeZone={snapshot.host?.scheduler.timeZone}
-                  onOpen={openTask}
-                  subtaskCount={subtaskCounts.get(task.id) ?? 0}
-                  isSubtask={task.parentId !== undefined}
-                  subtasksDone={subtaskRollup.get(task.id)?.done ?? 0}
-                  subtasksRunning={subtaskRollup.get(task.id)?.running ?? 0}
-                  subtasksFailed={subtaskRollup.get(task.id)?.failed ?? 0}
-                />
-              ))}
+              {renderGrouped(ARCHIVE_COLUMN, visible, false, true)}
               {visible.length === 0 && (
                 <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('archive.empty')}</div>
               )}
@@ -336,7 +481,11 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         ) : (
           COLUMNS.map(column => {
             const tasks = visible.filter(task => task.status === column.status)
-            const isManualDropTarget = column.status === 'backlog' || column.status === 'todo'
+            // Every manually reachable column accepts a drop; `running`
+            // never does, because only the runner opens an execution.
+            const isManualDropTarget = MANUAL_STATUSES.includes(column.status)
+            const compact = compactColumns.includes(column.status)
+            const grouped = GROUPED_COLUMNS.includes(column.status)
             return (
               <section
                 key={column.status}
@@ -352,7 +501,7 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                   const taskId = event.dataTransfer.getData('text/plain')
                   if (!taskId) return
                   const dropped = snapshot.tasks.find(t => t.id === taskId)
-                  if (dropped && canMoveManually(dropped.status, column.status) && dropped.status !== column.status) {
+                  if (dropped && canMoveTask(dropped, column.status)) {
                     controller.moveTask(taskId, column.status)
                   }
                 } : undefined}
@@ -361,22 +510,21 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
                   <span className={css.statusDot} data-status={column.status} aria-hidden="true" />
                   <h3 className={css.columnTitle}>{t(STATUS_KEY[column.status])}</h3>
                   <span className={css.columnCount}>{tasks.length}</span>
+                  <button
+                    type="button"
+                    className={css.densityToggle}
+                    data-dsh-part="density-toggle"
+                    data-active={compact ? 'true' : undefined}
+                    aria-pressed={compact}
+                    title={compact ? t('board.density.comfortable') : t('board.density.compact')}
+                    aria-label={compact ? t('board.density.comfortable') : t('board.density.compact')}
+                    onClick={() => { toggleCompact(column.status) }}
+                  >
+                    {compact ? <IconExpandRows size={13} /> : <IconCompactRows size={13} />}
+                  </button>
                 </header>
                 <div className={css.cards}>
-                  {tasks.map(task => (
-                    <MemoTaskCard
-                      key={task.id}
-                      task={task}
-                      pending={snapshot.pendingTaskIds.includes(task.id)}
-                      timeZone={snapshot.host?.scheduler.timeZone}
-                      onOpen={openTask}
-                      subtaskCount={subtaskCounts.get(task.id) ?? 0}
-                      isSubtask={task.parentId !== undefined}
-                      subtasksDone={subtaskRollup.get(task.id)?.done ?? 0}
-                      subtasksRunning={subtaskRollup.get(task.id)?.running ?? 0}
-                      subtasksFailed={subtaskRollup.get(task.id)?.failed ?? 0}
-                    />
-                  ))}
+                  {grouped ? renderGrouped(column.status, tasks, compact, false) : tasks.map(task => renderCard(task, compact))}
                   {tasks.length === 0 && (
                     <div className={css.columnEmpty}>{tagFilter.length > 0 ? t('board.tagEmpty') : t('board.empty')}</div>
                   )}
@@ -387,14 +535,22 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         )}
       </div>
 
-      {selected !== undefined && (
-        <TaskDetail controller={controller} task={selected} />
+      {detailTask !== undefined && detailPresence.mounted && (
+        <TaskDetail controller={controller} task={detailTask} phase={detailPresence.phase} />
       )}
-      {showNew && (
+      {newTaskPresence.mounted && (
         <NewTaskModal
           controller={controller}
           {...(projectId === '' ? {} : { defaultWorkspaceId: projectId })}
           onClose={() => { setShowNew(false) }}
+          phase={newTaskPresence.phase}
+        />
+      )}
+      {tagManagerPresence.mounted && (
+        <TagManagerModal
+          controller={controller}
+          onClose={() => { setShowTagManager(false) }}
+          phase={tagManagerPresence.phase}
         />
       )}
     </div>