@linxin666/dsh-client-ui-task-board 0.1.17 → 0.1.19

package/lib/types/client/PluginSettingsCard.d.ts

@@ -28,6 +28,17 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
     onSave: () => void;
     /** Drop every staged edit. */
     onDiscard: () => void;
+    /**
+     * Render the controls expanded on arrival (still collapsible). Defaults to
+     * true: promoted first-level sections show their settings immediately.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Render without the collapse affordance: a static header and an always
+     * visible body. Used by first-level settings sections whose nav entry
+     * already provides the selection.
+     */
+    alwaysOpen?: boolean;
     /** The plugin's controls. */
     children: ReactNode;
 }

package/lib/types/client/TaskBoardSettingsCard.d.ts

@@ -40,6 +40,11 @@ export declare class TaskBoardSettingsCardController {
      * @returns the card's snapshot and its form actions.
      */
     inject(): TaskBoardSettingsCardFace;
+    /**
+     * Release the card's scope subscription and bound stores; the slot
+     * disposer calls this on teardown.
+     */
+    dispose(): void;
 }
 /** Props the renderer binds for the task-board card. */
 export type TaskBoardSettingsCardProps = PropsRuntime<'web-ui.plugin.item'> & PropsLocale<'task-board'> & InjectFace<TaskBoardSettingsCardFace>;

package/lib/types/client/locales.d.ts

@@ -13,6 +13,10 @@ export declare const zh: {
     'board.search': string;
     'board.empty': string;
     'board.filterAll': string;
+    'board.archive': string;
+    'board.archiveView': string;
+    'board.backToBoard': string;
+    'archive.empty': string;
     'board.status': string;
     'board.status.backlog': string;
     'board.status.todo': string;
@@ -40,6 +44,9 @@ export declare const zh: {
     'detail.run': string;
     'detail.rerun': string;
     'detail.delete': string;
+    'detail.archive': string;
+    'detail.restore': string;
+    'detail.archivedAt': string;
     'detail.viewSession': string;
     'detail.noSession': string;
     'detail.executionStarted': string;

package/lib/types/client/schedule-presets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared scheduled-run presets for the schedule editors (the new-task dialog
+ * and the task detail panel): cron expression → locale label.
+ */
+import type { TaskBoardKey } from './locales.ts';
+/** Common scheduled-run presets (cron → locale label). */
+export declare const SCHEDULE_PRESETS: ReadonlyArray<{
+    cron: string;
+    label: TaskBoardKey;
+}>;

package/lib/types/client/settings-form.d.ts

@@ -149,11 +149,19 @@ export declare class CardForm<T> {
     private readonly specs;
     private readonly staged;
     private readonly listeners;
+    /** The scope subscription installed in the constructor; released by dispose(). */
+    private readonly disposeScope;
+    private disposed;
     private saving;
     private failed;
     private failedReason;
     /** @param scope - the bound settings scope for this card's namespace. */
     constructor(scope: SettingsScope<T>, specs: FieldSpec[]);
+    /**
+     * Release the scope subscription and every bound store listener. The card
+     * must call this on teardown; later calls are no-ops.
+     */
+    dispose(): void;
     /** Publish a projection of this form, rebuilt whenever the scope or a draft changes. */
     bind<S>(project: () => S): SnapshotStore<S>;
     /** Read the card-level state: what the Host serves, and what a save would do. */

package/lib/types/core/controller.d.ts

@@ -64,6 +64,8 @@ export interface ExecutionOptionsSnapshot {
 export interface ControllerSnapshot {
     tasks: readonly TaskRecord[];
     boardOpen: boolean;
+    /** True when the board shows the archive view instead of the columns. */
+    archiveView: boolean;
     selectedTaskId: string | undefined;
     /** Picker option sets (workspace list + agent-preset roster). */
     executionOptions: ExecutionOptionsSnapshot;
@@ -78,6 +80,7 @@ export declare class BoardController {
     private readonly deps;
     private tasks;
     private boardOpen;
+    private archiveView;
     private selectedTaskId;
     private executionOptions;
     private listeners;
@@ -95,6 +98,12 @@ export declare class BoardController {
     openBoard(): void;
     closeBoard(): void;
     toggleBoard(): void;
+    /**
+     * Switch between the kanban columns and the archive view. Leaving the
+     * archive view with an archived task still selected closes the selection —
+     * the detail overlay must not linger over a task that is off-board.
+     */
+    toggleArchiveView(): void;
     openTask(id: string): void;
     closeTask(): void;
     createTask(input: NewTaskInput): TaskRecord | undefined;
@@ -106,6 +115,15 @@ export declare class BoardController {
     setExecutionOptions(patch: Partial<ExecutionOptionsSnapshot>): void;
     moveTask(id: string, status: TaskStatus): void;
     deleteTask(id: string): void;
+    /**
+     * Archive a settled task (done/failed). Running or on-board-unsettled
+     * tasks are refused so the runner keeps exclusive ownership of their
+     * lifecycle.
+     * @returns true when applied.
+     */
+    archiveTask(id: string): boolean;
+    /** Restore an archived task back onto the board (same status column). */
+    restoreTask(id: string): boolean;
     /**
      * Update a task's schedule rule. A blank or invalid cron expression is
      * rejected (returns false, state untouched). When the rule ends up enabled
@@ -125,6 +143,15 @@ export declare class BoardController {
      * schedule rule (it was deleted mid-tick, for example).
      */
     applyScheduleNextRun(id: string, nextRunAt: number | undefined, lastTriggeredAt: number | undefined): void;
+    /**
+     * Reload the ledger from the persisted store without notifying subscribers.
+     * The scheduler calls this before every tick so a task deleted in another
+     * tab (or a stale in-memory copy) can never be fired from this tab: the
+     * fire decision and the subsequent roll-forward both run on the freshest
+     * persisted truth. Deliberately silent — same-origin external changes still
+     * reach subscribers through the storage-event subscription.
+     */
+    reloadFromStore(): void;
     /**
      * Jump to an execution's session transcript. Selecting the session changes
      * `current`, which closes the board (the conversation view takes over).

package/lib/types/core/execution.d.ts

@@ -133,6 +133,15 @@ export type ExecutionEvent = {
  */
 export declare class ExecutionService {
     private readonly env;
+    /**
+     * In-flight preset switches keyed by `sessionId\u0000mode`. The session
+     * list mirror can lag behind a just-applied switch, so concurrent runs
+     * against one blank session would otherwise each issue the same select
+     * RPC (an amplified storm); sharing one in-flight call keeps the wire to
+     * a single request. The settled entry is forgotten so a later run can
+     * switch again.
+     */
+    private readonly presetSwitches;
     /** @param env - the runtime faces (real or fake). */
     constructor(env: ExecutionEnvironment);
     run(task: TaskRecord, execution: ExecutionRecord, onEvent: (event: ExecutionEvent) => void): Promise<void>;
@@ -143,6 +152,13 @@ export declare class ExecutionService {
      * the wire refuses.
      */
     private applyMode;
+    /**
+     * One in-flight `select` per (session, preset): concurrent runs against
+     * the same blank session share the same wire call instead of each issuing
+     * a duplicate RPC. The entry is removed once the call settles, so a later
+     * run (after a shared failure, say) issues a fresh switch.
+     */
+    private switchPreset;
     /**
      * Apply the task-pinned permission preset through the `/permission <id>`
      * slash command. No-op when the task pins none; fails the run when the

package/lib/types/core/scheduler.d.ts

@@ -3,6 +3,13 @@ import type { TaskRecord } from './tasks.ts';
 export interface SchedulerDeps {
     /** Read the current task ledger (the controller snapshot). */
     tasks(): readonly TaskRecord[];
+    /**
+     * Re-sync the task ledger from its persisted source before the tick decides
+     * what is due. The wiring passes the controller's store reload so a task
+     * deleted elsewhere can never be fired from a stale in-memory copy.
+     * Optional: absent in pure in-memory harnesses.
+     */
+    refresh?: () => void;
     /** Clock; defaults to Date.now in the controller wiring. */
     now(): number;
     /** Trigger one task's real execution (the controller's runTask); resolves

package/lib/types/core/tasks.d.ts

@@ -75,7 +75,14 @@ export interface TaskRecord {
      * `/permission <id>` slash command; absent leaves the session default.
      */
     permission?: TaskPermission;
+    /**
+     * When the task was archived (ms epoch). Archived tasks keep their status
+     * and execution history but leave the main board; absent means on-board.
+     */
+    archivedAt?: number;
 }
+/** Statuses a settled task may be archived from. */
+export declare const ARCHIVABLE_STATUSES: readonly TaskStatus[];
 /** Permission presets a task may pin on its execution session (the `/permission <id>` ids). */
 export declare const TASK_PERMISSIONS: readonly ["read-only", "workspace-write", "danger-full-access"];
 /** One permission preset id. */
@@ -93,6 +100,15 @@ export interface NewTaskInput {
     mode?: string;
     /** Permission preset applied to the execution session; absent = session default. */
     permission?: TaskPermission;
+    /**
+     * Optional scheduled-run rule requested at creation time (the new-task
+     * dialog): an enable flag plus a 5-field cron expression. The create use
+     * case arms it only when enabled and the expression is valid.
+     */
+    schedule?: {
+        enabled: boolean;
+        cron: string;
+    };
 }
 /** The five kanban columns, in display order. */
 export declare const COLUMNS: readonly {

package/lib/types/core/use-cases/task-archive.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Archive/restore task use case: move a settled (done/failed) task off the
+ * main board and back. Purely a marker transition — the task keeps its
+ * status, execution history and transcript references, so archiving never
+ * loses traceability and restoring lands it in the exact column it left.
+ */
+import type { TaskRecord } from '../tasks.ts';
+/** Result of an archive transition. */
+export interface ArchiveTaskResult {
+    /** The next ledger. */
+    tasks: readonly TaskRecord[];
+    /** Whether the archive was applied (false = unknown task / not archivable). */
+    archived: boolean;
+}
+/**
+ * Archive one task: only settled statuses (done/failed) can be archived;
+ * a running or not-yet-settled task stays on the board (its runner still
+ * owns its lifecycle). Already-archived tasks are a no-op.
+ */
+export declare function applyArchiveTask(tasks: readonly TaskRecord[], id: string, now: number): ArchiveTaskResult;
+/** Restore one task back onto the main board (clears the archive marker). */
+export declare function applyRestoreTask(tasks: readonly TaskRecord[], id: string, now: number): ArchiveTaskResult;

package/lib/types/core/use-cases/task-create.d.ts

@@ -1,8 +1,3 @@
-/**
- * Create-task use case: mint a new task from user input, rejecting a blank
- * title. Pure ledger transition (no persistence or notify — the controller
- * orchestrates those), so it is unit-testable without any runtime face.
- */
 import { type NewTaskInput, type TaskRecord } from '../tasks.ts';
 /** Result of a create transition: the new task (when accepted) + the next ledger. */
 export interface CreateTaskResult {
@@ -15,7 +10,7 @@ export interface CreateTaskResult {
  * Apply a create against the current ledger. Returns the new task and the
  * appended ledger, or the unchanged ledger when the title is blank.
  * @param tasks - current ledger.
- * @param input - raw user input (title/description/prompt).
+ * @param input - raw user input (title/description/prompt + optional schedule).
  * @param now - clock instant (ms epoch).
  * @param id - minted task id.
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-task-board",
   "description": "Task board for the dsh web GUI: a sidebar entry plus a multi-column kanban view with local persistence, task details, and real execution through dsh sessions (session.prompt). Hot-pluggable — mounted via ~/.dsh/cordis.patch.yml + a profile node_modules symlink, no dsh source changes.",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",

package/src/client/PluginSettingsCard.tsx

@@ -45,6 +45,17 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
   onSave: () => void
   /** Drop every staged edit. */
   onDiscard: () => void
+  /**
+   * Render the controls expanded on arrival (still collapsible). Defaults to
+   * true: promoted first-level sections show their settings immediately.
+   */
+  defaultOpen?: boolean
+  /**
+   * Render without the collapse affordance: a static header and an always
+   * visible body. Used by first-level settings sections whose nav entry
+   * already provides the selection.
+   */
+  alwaysOpen?: boolean
   /** The plugin's controls. */
   children: ReactNode
 }
@@ -55,57 +66,27 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
  * @returns the card, or nothing while the namespace is still loading.
  */
 export function PluginSettingsCard<TKey extends string = string>(props: PluginSettingsCardProps<TKey>) {
-  const [open, setOpen] = useState(false)
-  const { state } = props
+  const [open, setOpen] = useState(props.defaultOpen ?? true)
+  const { state, alwaysOpen } = props
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const description = props.t(props.descriptionKey)
   const blocked = !state.dirty || state.invalid || state.saving
-  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
-  // The namespace exists but the Host does not serve it to this client (the
-  // official settings allowlist omits third-party namespaces): show a card
-  // that explains the gap instead of vanishing, so a missing card never
-  // reads as a missing plugin.
-  if (!state.exposed) {
-    return (
-      <li className={cardClass}>
-        <button
-          type="button"
-          className={css.header}
-          aria-expanded={open}
-          aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
-          onClick={() => { setOpen(!open) }}
-        >
-          <span className={css.headText}>
-            <span className={css.name} title={title}>{title}</span>
-            <span className={css.description} title={description}>{description}</span>
-          </span>
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
-          >
-            <path
-              d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
-              fill="currentColor"
-            />
-          </svg>
-        </button>
-        {open
-          ? (
-            <div className={css.body}>
-              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
-            </div>
-          )
-          : null}
-      </li>
+  const expanded = alwaysOpen === true || open
+  const cardClass = expanded ? `${css.cardOpen} ${css.card}` : css.card
+  // With alwaysOpen the nav entry already provides the selection, so the
+  // header is a static title row instead of a disclosure button.
+  const header = alwaysOpen === true
+    ? (
+      <div className={css.headerStatic}>
+        <span className={css.headText}>
+          <span className={css.name} title={title}>{title}</span>
+          <span className={css.description} title={description}>{description}</span>
+        </span>
+        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
+      </div>
     )
-  }
-  return (
-    <li className={cardClass}>
+    : (
       <button
         type="button"
         className={css.header}
@@ -132,7 +113,29 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
           />
         </svg>
       </button>
-      {open
+    )
+  // The namespace exists but the Host does not serve it to this client (the
+  // official settings allowlist omits third-party namespaces): show a card
+  // that explains the gap instead of vanishing, so a missing card never
+  // reads as a missing plugin.
+  if (!state.exposed) {
+    return (
+      <li className={cardClass}>
+        {header}
+        {expanded
+          ? (
+            <div className={css.body}>
+              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
+            </div>
+          )
+          : null}
+      </li>
+    )
+  }
+  return (
+    <li className={cardClass}>
+      {header}
+      {expanded
         ? (
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}

package/src/client/TaskBoardSettingsCard.tsx

@@ -63,6 +63,14 @@ export class TaskBoardSettingsCardController {
   inject(): TaskBoardSettingsCardFace {
     return { hooks: { taskBoardSettingsCard: this.store }, ...this.form.actions() }
   }
+
+  /**
+   * Release the card's scope subscription and bound stores; the slot
+   * disposer calls this on teardown.
+   */
+  dispose(): void {
+    this.form.dispose()
+  }
 }
 
 /** Props the renderer binds for the task-board card. */

package/src/client/board/NewTaskModal.tsx

@@ -4,8 +4,10 @@
  */
 import { useEffect, useState } from 'react'
 import type { BoardController } from '../../core/controller.ts'
+import { isValidCron, nextRunAtMs } from '../../core/schedule.ts'
 import { TASK_PERMISSIONS, type TaskPermission } from '../../core/tasks.ts'
 import { t, type TaskBoardKey } from '../locales.ts'
+import { SCHEDULE_PRESETS } from '../schedule-presets.ts'
 import css from '../board.module.css'
 
 /** New-task form overlay. */
@@ -16,6 +18,9 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
   const [workspaceId, setWorkspaceId] = useState('')
   const [mode, setMode] = useState('')
   const [permission, setPermission] = useState('')
+  const [scheduleEnabled, setScheduleEnabled] = useState(false)
+  const [scheduleCron, setScheduleCron] = useState('')
+  const [scheduleError, setScheduleError] = useState<string | undefined>(undefined)
   const [error, setError] = useState<string | undefined>(undefined)
   const [options, setOptions] = useState(controller.getSnapshot().executionOptions)
 
@@ -27,6 +32,13 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
   )
 
   const submit = (): void => {
+    if (scheduleEnabled) {
+      const cron = scheduleCron.trim()
+      if (cron === '' || !isValidCron(cron)) {
+        setScheduleError(t('detail.schedule.invalid'))
+        return
+      }
+    }
     const task = controller.createTask({
       title,
       description,
@@ -34,6 +46,7 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
       workspaceId: workspaceId === '' ? undefined : workspaceId,
       mode: mode === '' ? undefined : mode,
       permission: permission === '' ? undefined : permission as TaskPermission,
+      schedule: scheduleEnabled ? { enabled: true, cron: scheduleCron.trim() } : undefined,
     })
     if (task === undefined) {
       setError(t('new.required'))
@@ -42,6 +55,11 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
     onClose()
   }
 
+  /** Next-run preview for a valid armed cron (creation-time only). */
+  const scheduleNextRun = scheduleEnabled && scheduleCron.trim() !== '' && isValidCron(scheduleCron)
+    ? nextRunAtMs(scheduleCron, Date.now())
+    : undefined
+
   return (
     <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onClose() }}>
       <form
@@ -131,6 +149,56 @@ export function NewTaskModal({ controller, onClose }: { controller: BoardControl
           </select>
         </label>
 
+        <section className={css.detailSection}>
+          <h4>{t('detail.schedule')}</h4>
+          <label className={css.scheduleToggle}>
+            <input
+              type="checkbox"
+              checked={scheduleEnabled}
+              onChange={event => {
+                setScheduleEnabled(event.target.checked)
+                if (!event.target.checked) setScheduleError(undefined)
+              }}
+            />
+            <span>{t('detail.schedule.enable')}</span>
+          </label>
+          {scheduleEnabled && (
+            <>
+              <div className={css.scheduleRow}>
+                <input
+                  className={`${css.input} ${css.scheduleInput}${scheduleError !== undefined ? ` ${css.scheduleInputInvalid}` : ''}`}
+                  value={scheduleCron}
+                  placeholder="0 9 * * *"
+                  spellCheck={false}
+                  aria-label={t('detail.schedule.cron')}
+                  onChange={event => { setScheduleCron(event.target.value); setScheduleError(undefined) }}
+                />
+                <select
+                  className={css.schedulePreset}
+                  value=""
+                  aria-label={t('detail.schedule.presets')}
+                  onChange={event => {
+                    if (event.target.value === '') return
+                    setScheduleCron(event.target.value)
+                    setScheduleError(undefined)
+                  }}
+                >
+                  <option value="">{t('detail.schedule.presets')}…</option>
+                  {SCHEDULE_PRESETS.map(preset => (
+                    <option key={preset.cron} value={preset.cron}>{t(preset.label)}</option>
+                  ))}
+                </select>
+              </div>
+              {scheduleError !== undefined && <p className={css.formError}>{scheduleError}</p>}
+              {scheduleError === undefined && scheduleNextRun !== undefined && (
+                <p className={css.scheduleMeta}>
+                  {t('detail.schedule.nextRun')} {new Date(scheduleNextRun).toLocaleString()}
+                </p>
+              )}
+            </>
+          )}
+        </section>
+
         {error !== undefined && <p className={css.formError}>{error}</p>}
 
         <footer className={css.modalFooter}>

package/src/client/board/TaskBoard.tsx

@@ -49,12 +49,26 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
   const [filter, setFilter] = useState('')
   const [showNew, setShowNew] = useState(false)
   const selected = selectedTaskOf(snapshot)
-  const visible = snapshot.tasks.filter(task => matchesFilter(task, filter))
+  const archiveView = snapshot.archiveView
+  // 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),
+  )
   const openTask = useCallback((id: string): void => { controller.openTask(id) }, [controller])
 
   return (
     <div className={css.board} data-dsh-taskboard-board="">
       <header className={css.boardHeader}>
+        <button
+          type="button"
+          className={`${css.ghostButton} ${css.backButton}`}
+          aria-label={t('board.close')}
+          onClick={() => { controller.closeBoard() }}
+        >
+          <span aria-hidden="true">‹</span>
+          <span>{t('board.close')}</span>
+        </button>
         <h2 className={css.boardTitle}>{t('board.title')}</h2>
         <input
           className={css.search}
@@ -66,39 +80,56 @@ export function TaskBoard({ controller }: { controller: BoardController }) {
         />
         <button
           type="button"
-          className={css.primaryButton}
-          onClick={() => { setShowNew(true) }}
+          className={archiveView ? css.primaryButton : css.ghostButton}
+          onClick={() => { controller.toggleArchiveView() }}
         >
-          + {t('board.new')}
+          {archiveView
+            ? t('board.backToBoard')
+            : t('board.archiveView', { count: String(snapshot.tasks.filter(task => task.archivedAt !== undefined).length) })}
         </button>
         <button
           type="button"
-          className={css.ghostButton}
-          onClick={() => { controller.closeBoard() }}
+          className={css.primaryButton}
+          onClick={() => { setShowNew(true) }}
         >
-          {t('board.close')}
+          + {t('board.new')}
         </button>
       </header>
 
       <div className={css.columns}>
-        {COLUMNS.map(column => {
-          const tasks = visible.filter(task => task.status === column.status)
-          return (
-            <section key={column.status} className={css.column} data-status={column.status}>
-              <header className={css.columnHeader}>
-                <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>
-              </header>
-              <div className={css.cards}>
-                {tasks.map(task => (
-                  <MemoTaskCard key={task.id} task={task} onOpen={openTask} />
-                ))}
-                {tasks.length === 0 && <div className={css.columnEmpty}>{t('board.empty')}</div>}
-              </div>
-            </section>
-          )
-        })}
+        {archiveView ? (
+          <section className={css.column} data-status="archived">
+            <header className={css.columnHeader}>
+              <h3 className={css.columnTitle}>{t('board.archive')}</h3>
+              <span className={css.columnCount}>{visible.length}</span>
+            </header>
+            <div className={css.cards}>
+              {visible.map(task => (
+                <MemoTaskCard key={task.id} task={task} onOpen={openTask} />
+              ))}
+              {visible.length === 0 && <div className={css.columnEmpty}>{t('archive.empty')}</div>}
+            </div>
+          </section>
+        ) : (
+          COLUMNS.map(column => {
+            const tasks = visible.filter(task => task.status === column.status)
+            return (
+              <section key={column.status} className={css.column} data-status={column.status}>
+                <header className={css.columnHeader}>
+                  <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>
+                </header>
+                <div className={css.cards}>
+                  {tasks.map(task => (
+                    <MemoTaskCard key={task.id} task={task} onOpen={openTask} />
+                  ))}
+                  {tasks.length === 0 && <div className={css.columnEmpty}>{t('board.empty')}</div>}
+                </div>
+              </section>
+            )
+          })
+        )}
       </div>
 
       {selected !== undefined && (