@linxin666/dsh-client-ui-task-board 0.4.4 → 0.4.6

package/src/client/board/TaskForm.tsx

@@ -8,6 +8,8 @@ import { useState, 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'
+import { IconClose, IconPlus } from './icons.tsx'
+import { useDialog, type OverlayPhase } from './overlay.tsx'
 
 /** 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'
@@ -22,6 +24,7 @@ export function ModalShell({
   onSubmit,
   onClose,
   secondaryAction,
+  phase = 'open',
   children,
 }: {
   ariaLabel: string
@@ -33,14 +36,20 @@ export function ModalShell({
   onClose: () => void
   /** Optional second action beside the primary submit (e.g. create and run). */
   secondaryAction?: { label: string; onSubmit: () => void }
+  /** Which leg of the enter/exit motion pair the surface is on. */
+  phase?: OverlayPhase
   children: ReactNode
 }) {
+  const dialog = useDialog<HTMLFormElement>(onClose, phase)
   return (
-    <div className={css.modalBackdrop} onMouseDown={event => { if (event.target === event.currentTarget) onClose() }}>
+    <div className={css.modalBackdrop} data-state={phase} onMouseDown={dialog.onMouseDown}>
       <form
+        ref={dialog.attach}
         className={css.modal}
         role="dialog"
+        aria-modal="true"
         aria-label={ariaLabel}
+        tabIndex={-1}
         onSubmit={event => { event.preventDefault(); onSubmit() }}
       >
         <h2 className={css.modalTitle}>{title}</h2>
@@ -226,7 +235,7 @@ export function TaskTagFields({
             aria-label={t('new.tagRemove', { name: tag.name })}
             onClick={() => { onChange(tags.filter((_, position) => position !== index)) }}
           >
-            ×
+            <IconClose size={14} />
           </button>
         </div>
       ))}
@@ -239,7 +248,8 @@ export function TaskTagFields({
         disabled={tags.length >= TASK_TAG_LIMIT}
         onClick={() => { onChange([...tags, { name: '' }]) }}
       >
-        + {t('new.tagAdd')}
+        <IconPlus size={14} />
+        {t('new.tagAdd')}
       </button>
     </div>
   )

package/src/client/board/VerificationReport.tsx

@@ -0,0 +1,322 @@
+/**
+ * One execution's goal-acceptance report.
+ *
+ * Rendered inside the execution-history row, so a rerun or a scheduled run
+ * keeps its OWN report and a later cycle never overwrites an earlier verdict.
+ * It shows what the board decided and the evidence it decided on: the verdict,
+ * the judge route and reasoning level, the acceptance count, the total and
+ * per-criterion scores against their threshold, the findings the judge located,
+ * the evidence scope with its truncation, and the token usage.
+ *
+ * Deliberately adds no new `data-dsh-part` value: the part enum is owned by the
+ * cross-repository semantic-attribute contract, and this report reuses the
+ * execution row's existing markup instead of extending that enum.
+ */
+import {
+  MAX_INVALID_ATTEMPTS,
+  MAX_QUALITY_ATTEMPTS,
+  exceptionAttempts,
+  invalidAttempts,
+  qualityAttempts,
+  verificationPhase,
+  verificationTotals,
+  type AcceptanceAuditRecord,
+  type AcceptanceCleanupRecord,
+  type ExecutionVerification,
+  type VerificationAttempt,
+  type VerificationCriterionFinding,
+} from '../../core/verification.ts'
+import { t } from '../locales.ts'
+import type { TaskBoardKey } from '../locales.ts'
+import css from '../board.module.css'
+
+/** Render one 0..1 score as a percentage. */
+function percent(value: number): string {
+  return (value * 100).toFixed(1) + '%'
+}
+
+/** The judge route of one attempt, with its effective reasoning level. */
+function routeLabel(attempt: VerificationAttempt): string {
+  const model = attempt.route.provider === '' ? attempt.route.model : attempt.route.provider + '/' + attempt.route.model
+  const effort = attempt.route.reasoningEffort
+  const key: TaskBoardKey = effort === undefined || effort === '' ? 'verify.judgeNoEffort' : 'verify.judge'
+  return t(key, effort === undefined || effort === '' ? { model } : { model, effort })
+}
+
+/** Board phase → report badge key. */
+const PHASE_STATUS_KEY: Record<ReturnType<typeof verificationPhase>, TaskBoardKey> = {
+  off: 'verify.status.off',
+  executing: 'verify.status.pending',
+  verifying: 'verify.status.verifying',
+  repairing: 'verify.status.failed',
+  passed: 'verify.status.passed',
+  failed: 'verify.status.failed',
+  invalid: 'verify.status.invalidHeld',
+}
+
+/** Evidence location → locale key, for one structured finding's citation. */
+const LOCATION_KEY: Record<VerificationCriterionFinding['location'], TaskBoardKey> = {
+  task: 'verify.location.task',
+  trajectory: 'verify.location.trajectory',
+  workspace: 'verify.location.workspace',
+  baseline: 'verify.location.baseline',
+  unknown: 'verify.location.unknown',
+}
+
+/** Invalid reason → locale key. */
+function invalidReasonKey(attempt: VerificationAttempt): TaskBoardKey {
+  switch (attempt.invalidReason) {
+    case 'missing-finding': return 'verify.invalidReason.missing-finding'
+    case 'unlocatable-quote': return 'verify.invalidReason.unlocatable-quote'
+    case 'baseline-finding': return 'verify.invalidReason.baseline-finding'
+    case 'vacuous-finding': return 'verify.invalidReason.vacuous-finding'
+    case 'insufficient-evidence': return 'verify.invalidReason.insufficient-evidence'
+    default: return 'verify.invalidReason.unknown'
+  }
+}
+
+/** Audit stage → locale key (the lightweight credential after cleanup). */
+const AUDIT_STAGE_KEY: Record<AcceptanceAuditRecord['stage'], TaskBoardKey> = {
+  quality: 'verify.cleanup.stage.quality',
+  invalid: 'verify.cleanup.stage.invalid',
+  exception: 'verify.cleanup.stage.exception',
+  budget: 'verify.cleanup.stage.budget',
+}
+
+/** One recorded attempt: a quality verdict, an invalid veto, an anomaly, or a budget stop. */
+function AttemptRow({ attempt, detailRemoved }: { attempt: VerificationAttempt, detailRemoved: boolean }) {
+  // Everything that is not a quality verdict renders as an anomaly row: a
+  // budget stop carries no score either, and an invalid acceptance carries a
+  // score the board REFUSED to book, so showing either as a scored failure
+  // would read as a judgement the board never made. The invalid row gets its
+  // own badge and reason line, because it is a distinct outcome.
+  const invalid = attempt.stage === 'invalid'
+  const exception = attempt.stage !== 'quality' && !invalid
+  const result = exception ? 'failed' : attempt.passed ? 'succeeded' : 'failed'
+  return (
+    <li className={css.executionRow} data-result={result}>
+      <span className={css.executionBadge} data-result={result}>
+        {invalid ? t('verify.status.invalid') : exception ? t('verify.status.exception') : attempt.passed ? t('verify.status.passed') : t('verify.status.failed')}
+      </span>
+      <span className={css.executionTimes}>
+        {invalid
+          ? t('verify.attemptInvalid', { index: String(attempt.index) })
+          : exception
+            ? t('verify.attemptException', { index: String(attempt.index) })
+            : t('verify.attempt', { index: String(attempt.index) })}
+        {' · '}{routeLabel(attempt)}
+        {!exception && !invalid && ' · ' + t('verify.rounds', { rounds: String(attempt.rounds) })}
+      </span>
+      {invalid && (
+        <span className={css.executionTimes}>
+          {t('verify.invalidDetail', { reason: t(invalidReasonKey(attempt)) })}
+        </span>
+      )}
+      {attempt.error !== undefined && <span className={css.executionTimes}>{attempt.error}</span>}
+      {!exception && (
+        <>
+          <span className={css.executionTimes}>
+            {t('verify.summary', {
+              score: percent(attempt.score),
+              threshold: percent(attempt.criteria[0]?.threshold ?? 0),
+              baseline: percent(attempt.baseline),
+            })}
+          </span>
+          <span className={css.executionTimes}>{t('verify.criteria')}</span>
+          <ul className={css.executionList}>
+            {attempt.criteria.map(criterion => (
+              <li key={criterion.id} className={css.executionTimes}>
+                {t('verify.criterion', {
+                  name: criterion.name,
+                  score: percent(criterion.score),
+                  threshold: percent(criterion.threshold),
+                })}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+      {(attempt.criterionFindings ?? []).length > 0 && (
+        <>
+          <span className={css.executionTimes}>{t('verify.criterionFindings')}</span>
+          <ul className={css.executionList}>
+            {(attempt.criterionFindings ?? []).map((finding, index) => (
+              <li key={findingKey(attempt, index)} className={css.executionTimes}>
+                {t('verify.criterionFindingFull', {
+                  criterion: finding.criterionId,
+                  location: t(LOCATION_KEY[finding.location]),
+                  quote: finding.quote,
+                  requirement: finding.requirement,
+                  observation: finding.observation,
+                  gap: finding.gap,
+                })}
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+      {attempt.findings.length > 0 && (
+        <>
+          <span className={css.executionTimes}>{t('verify.findings')}</span>
+          <ul className={css.executionList}>
+            {attempt.findings.map((finding, index) => (
+              <li key={findingKey(attempt, index)} className={css.executionTimes}>{finding}</li>
+            ))}
+          </ul>
+        </>
+      )}
+      {!exception && !invalid && attempt.findings.length === 0 && (
+        // A cleaned attempt has no findings because the acceptance removed them,
+        // not because the judge gave none: saying "the judge reported no
+        // finding" here would invite exactly the misreading the cleanup rule
+        // exists to avoid.
+        <span className={css.executionTimes}>{t(detailRemoved ? 'verify.detailRemoved' : 'verify.noFindings')}</span>
+      )}
+      <span className={css.executionTimes}>
+        {t('verify.evidence', {
+          chars: String(attempt.evidence.chars),
+          entries: String(attempt.evidence.entries),
+          omitted: String(attempt.evidence.omittedCharacters),
+        })}
+        {attempt.evidence.workspaceFiles !== undefined && attempt.evidence.workspaceFiles > 0
+          ? ' · ' + t('verify.workspaceEvidence', { files: String(attempt.evidence.workspaceFiles) })
+          : ''}
+      </span>
+      <span className={css.executionTimes}>
+        {t('verify.usage', {
+          calls: String(attempt.usage.calls),
+          input: String(attempt.usage.inputTokens),
+          output: String(attempt.usage.outputTokens),
+          reasoning: String(attempt.usage.reasoningTokens),
+        })}
+        {attempt.usage.usageIncomplete === true ? t('verify.usageIncomplete') : ''}
+      </span>
+    </li>
+  )
+}
+
+/** Stable key for one finding row. */
+function findingKey(attempt: VerificationAttempt, index: number): string {
+  return attempt.at.toString(36) + '-' + String(index)
+}
+
+/**
+ * Render one execution's acceptance report.
+ * @param props - the execution's persisted acceptance block.
+ * @returns the report, or nothing when acceptance never applied.
+ */
+export function VerificationReport({ verification }: { verification: ExecutionVerification }) {
+  const phase = verificationPhase(verification)
+  if (phase === 'off' && verification.contract.enabled === false && verification.applicability !== 'skipped') return null
+  const totals = verificationTotals(verification)
+  const route = verification.contract.route
+  const applicabilityKey: TaskBoardKey | undefined = verification.applicability === 'disabled'
+    ? 'verify.applicability.disabled'
+    : verification.applicability === 'skipped'
+      ? 'verify.applicability.skipped'
+      : verification.applicability === 'goal-unavailable'
+        ? 'verify.applicability.goalUnavailable'
+        : verification.applicability === 'goal-disabled'
+          ? 'verify.applicability.goalDisabled'
+          : verification.applicability === 'team-member' ? 'verify.applicability.teamMember' : undefined
+  return (
+    <div className={css.executionTimes}>
+      <span className={css.executionBadge} data-result={phase === 'passed' ? 'succeeded' : phase === 'failed' ? 'failed' : undefined}>
+        {t('verify.title')} · {t(PHASE_STATUS_KEY[phase])}
+      </span>
+      <span className={css.executionTimes}>
+        {t('verify.invalidCounts', {
+          quality: String(qualityAttempts(verification).length),
+          max: String(MAX_QUALITY_ATTEMPTS),
+          invalid: String(invalidAttempts(verification).length),
+          maxInvalid: String(MAX_INVALID_ATTEMPTS),
+          exceptions: String(exceptionAttempts(verification).length),
+        })}
+      </span>
+      {route !== undefined && (
+        <span className={css.executionTimes}>
+          {verification.contract.modelSource === 'inherit'
+            ? t('verify.judgeInherited', { model: route.provider + '/' + route.model })
+            : t(route.reasoningEffort === undefined || route.reasoningEffort === '' ? 'verify.judgeNoEffort' : 'verify.judge', {
+              model: route.provider + '/' + route.model,
+              ...(route.reasoningEffort === undefined ? {} : { effort: route.reasoningEffort }),
+            })}
+        </span>
+      )}
+      {verification.contract.effortFallback !== undefined && (
+        <span className={css.executionTimes}>
+          {t('verify.effortFallback', {
+            requested: verification.contract.effortFallback.requested,
+            resolved: verification.contract.effortFallback.resolved ?? t('settings.goalVerificationResolvedNoEffort'),
+          })}
+        </span>
+      )}
+      {applicabilityKey !== undefined && <span className={css.executionTimes}>{t(applicabilityKey)}</span>}
+      {verification.failedReason !== undefined && (
+        <span className={css.executionTimes}>{t('verify.finalFailure', { reason: verification.failedReason })}</span>
+      )}
+      {totals.calls > 0 && (
+        <span className={css.executionTimes}>
+          {t('verify.usage', {
+            calls: String(totals.calls),
+            input: String(totals.inputTokens),
+            output: String(totals.outputTokens),
+            reasoning: String(totals.reasoningTokens),
+          })}
+          {totals.usageIncomplete ? t('verify.usageIncomplete') : ''}
+        </span>
+      )}
+      {verification.attempts.length > 0 && (
+        <ul className={css.executionList}>
+          {[...verification.attempts].reverse().map(attempt => (
+            <AttemptRow
+              key={attempt.at.toString(36) + '-' + attempt.stage + '-' + String(attempt.index)}
+              attempt={attempt}
+              detailRemoved={verification.cleanup?.state === 'cleaned'}
+            />
+          ))}
+        </ul>
+      )}
+      {verification.cleanup !== undefined && <CleanupNotice cleanup={verification.cleanup} />}
+    </div>
+  )
+}
+
+/**
+ * Retention notice of one execution's acceptance detail.
+ *
+ * It exists so a reader never mistakes a cleaned-up report for a judge that
+ * produced no evidence: the notice says the detail WAS produced and was removed
+ * by the automatic cleanup, and lists the lightweight credential that survives.
+ * A pending or failed cleanup is reported the same way — never as a missing
+ * verdict and never as a revoked pass.
+ */
+function CleanupNotice({ cleanup }: { cleanup: AcceptanceCleanupRecord }) {
+  const key: TaskBoardKey = cleanup.state === 'cleaned'
+    ? 'verify.cleanup.cleaned'
+    : cleanup.state === 'failed' ? 'verify.cleanup.failed' : 'verify.cleanup.pending'
+  return (
+    <>
+      <span className={css.executionTimes}>
+        {cleanup.state === 'failed'
+          ? t(key, { attempts: String(cleanup.attempts), error: cleanup.lastError ?? '' })
+          : t(key)}
+      </span>
+      {cleanup.audit.length > 0 && (
+        <ul className={css.executionList}>
+          {cleanup.audit.map((record, index) => (
+            <li key={record.at.toString(36) + '-' + record.stage + '-' + String(index)} className={css.executionTimes}>
+              {t('verify.cleanup.audit', {
+                index: String(index + 1),
+                stage: t(AUDIT_STAGE_KEY[record.stage]),
+                score: percent(record.score),
+                hash: record.evidenceHash.slice(0, 12),
+              })}
+              {record.findingSummary === undefined ? '' : ' · ' + record.findingSummary}
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}

package/src/client/board/card-view.ts

@@ -0,0 +1,220 @@
+/**
+ * Card view model: the pure derivations a task card renders from its record.
+ *
+ * Everything here is a function of the task record (plus the clock and the
+ * Host time zone for the recency groups), so the card stays a thin renderer and
+ * every rule is unit-testable without mounting React. Nothing here writes the
+ * record: the type prefix, the tone and the time label are presentation only.
+ *
+ * @module @linxin666/dsh-client-ui-task-board/client/board/card-view
+ */
+import { hasOpenExecution, type ExecutionOutcome, type ExecutionRecord, type TaskRecord, type TaskStatus } from '../../core/tasks.ts'
+import type { TaskBoardKey } from '../locales.ts'
+
+/** A title split into its bracketed type prefix and the remaining text. */
+export interface TitleParts {
+  /** Bracketed type prefix such as `Bug` from `[Bug]: ...`; absent when none. */
+  kind?: string
+  /** Title text without the prefix (the whole title when there is no prefix). */
+  text: string
+}
+
+/** `[Bug]:` / `[Issue]` / a bracketed CJK word, at most 24 characters, optional colon. */
+const KIND_PREFIX = /^\[([^[\]\n]{1,24})\]\s*[:\uFF1A]?\s*/
+
+/**
+ * Split an issue-form style type prefix off a title. The prefix becomes a
+ * badge, so the clamped title lines carry the text the reader scans for. A
+ * title that is only a prefix keeps its full text.
+ * @param summary - the plain-text title.
+ * @returns the prefix (when present) and the remaining title text.
+ */
+export function splitTitleKind(summary: string): TitleParts {
+  const match = KIND_PREFIX.exec(summary)
+  if (match === null) return { text: summary }
+  const kind = (match[1] ?? '').trim()
+  const text = summary.slice(match[0].length).trim()
+  if (kind === '' || text === '') return { text: summary }
+  return { kind, text }
+}
+
+/** Stripe tone of a card: the state of its latest execution. */
+export type CardTone = 'running' | ExecutionOutcome
+
+/** What the card reports about its latest execution. */
+export interface CardOutcome {
+  /** Stripe tone; absent on an archived card or a card that never ran. */
+  tone?: CardTone
+  /** The latest execution record, when the card ran at least once. */
+  latest?: ExecutionRecord
+  /**
+   * The column disagrees with the latest settled run: a card in Done whose last
+   * run did not succeed, or a card in Failed whose last run succeeded. The
+   * column was then set by hand or by a provider (a closed issue), and the
+   * card says so instead of letting a red run count read as a contradiction.
+   */
+  declared: boolean
+}
+
+/**
+ * Derive the card's execution outcome.
+ * @param task - the task record.
+ * @param archived - whether the card renders in the archive view.
+ */
+export function cardOutcome(task: TaskRecord, archived: boolean): CardOutcome {
+  const latest = task.executions[task.executions.length - 1]
+  if (latest === undefined) return { declared: false }
+  if (hasOpenExecution(task)) return archived ? { latest, declared: false } : { tone: 'running', latest, declared: false }
+  const result = latest.result
+  if (archived || result === undefined) return { latest, declared: false }
+  const declared = (task.status === 'done' && result !== 'succeeded') || (task.status === 'failed' && result === 'succeeded')
+  return { tone: result, latest, declared }
+}
+
+/** Locale key of the latest settled result shown before the run count. */
+export const RESULT_KEY: Record<ExecutionOutcome, TaskBoardKey> = {
+  succeeded: 'card.result.succeeded',
+  failed: 'card.result.failed',
+  cancelled: 'card.result.cancelled',
+}
+
+/** The one time a card shows, and what that time means. */
+export interface CardTimeline {
+  /** Locale key with a `{time}` placeholder. */
+  key: TaskBoardKey
+  /** The instant (ms epoch). */
+  at: number
+}
+
+/**
+ * Pick the time that tells cards in the same column apart. `updatedAt` moves
+ * on every provider sync, so a column of synced cards would all read
+ * "updated 4m"; each column instead shows the instant its cards differ by:
+ * planning columns the creation time, an executing card its start, settled
+ * columns the latest run's settlement, the archive the archive time.
+ * @param task - the task record.
+ * @param archived - whether the card renders in the archive view.
+ */
+export function cardTimeline(task: TaskRecord, archived: boolean): CardTimeline {
+  if (archived && task.archivedAt !== undefined) return { key: 'card.time.archived', at: task.archivedAt }
+  const open = task.executions.find(execution => execution.endedAt === undefined)
+  if (open !== undefined) return { key: 'card.time.started', at: open.startedAt }
+  if (task.status === 'done' || task.status === 'failed') {
+    const latest = task.executions[task.executions.length - 1]
+    if (latest?.endedAt !== undefined) return { key: 'card.time.settled', at: latest.endedAt }
+    return { key: 'card.time.updated', at: task.updatedAt }
+  }
+  if (task.status === 'backlog' || task.status === 'todo') return { key: 'card.time.created', at: task.createdAt }
+  return { key: 'card.time.updated', at: task.updatedAt }
+}
+
+/** Recency bucket of a settled card. */
+export type RecencyGroup = 'today' | 'week' | 'earlier'
+
+/** Group order, newest first. */
+export const RECENCY_GROUPS: readonly RecencyGroup[] = ['today', 'week', 'earlier']
+
+/** Locale key of each recency group header. */
+export const RECENCY_KEY: Record<RecencyGroup, TaskBoardKey> = {
+  today: 'board.group.today',
+  week: 'board.group.week',
+  earlier: 'board.group.earlier',
+}
+
+const DAY_FORMATS = new Map<string, Intl.DateTimeFormat>()
+
+/** Calendar day of an instant in a time zone (the browser zone when absent). */
+function dayKey(ms: number, timeZone: string | undefined): string {
+  const key = timeZone ?? ''
+  let format = DAY_FORMATS.get(key)
+  if (format === undefined) {
+    try {
+      format = new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit', ...(timeZone === undefined ? {} : { timeZone }) })
+    } catch {
+      // An unknown zone id: bucket by the browser zone rather than failing the board.
+      format = new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit' })
+    }
+    DAY_FORMATS.set(key, format)
+  }
+  return format.format(new Date(ms))
+}
+
+const WEEK_MS = 7 * 24 * 60 * 60 * 1000
+
+/**
+ * Bucket an instant: the same Host calendar day as now, the last seven days, or
+ * earlier.
+ * @param at - the instant to bucket.
+ * @param now - the current instant.
+ * @param timeZone - Host IANA zone the calendar day is read in.
+ */
+export function recencyGroup(at: number, now: number, timeZone?: string): RecencyGroup {
+  if (dayKey(at, timeZone) === dayKey(now, timeZone)) return 'today'
+  if (now - at < WEEK_MS) return 'week'
+  return 'earlier'
+}
+
+/** One recency group and its items, newest first. */
+export interface RecencyBucket<T> {
+  group: RecencyGroup
+  items: T[]
+}
+
+/**
+ * Sort items newest first and split them into recency groups; empty groups are
+ * omitted.
+ * @param items - the items to group.
+ * @param at - the instant each item is ordered and bucketed by.
+ * @param now - the current instant.
+ * @param timeZone - Host IANA zone.
+ */
+export function groupByRecency<T>(items: readonly T[], at: (item: T) => number, now: number, timeZone?: string): RecencyBucket<T>[] {
+  const sorted = [...items].sort((left, right) => at(right) - at(left))
+  const buckets = new Map<RecencyGroup, T[]>()
+  for (const item of sorted) {
+    const group = recencyGroup(at(item), now, timeZone)
+    const list = buckets.get(group) ?? []
+    list.push(item)
+    buckets.set(group, list)
+  }
+  return RECENCY_GROUPS.filter(group => buckets.has(group)).map(group => ({ group, items: buckets.get(group)! }))
+}
+
+/** Columns that render compact by default: the long settled column. */
+export const DEFAULT_COMPACT_COLUMNS: readonly TaskStatus[] = ['done']
+
+/** Browser storage key of the per-column density choice. */
+export const COMPACT_COLUMNS_KEY = 'dsh.taskBoard.compactColumns.v1'
+
+const STATUSES: readonly TaskStatus[] = ['backlog', 'todo', 'running', 'done', 'failed']
+
+/**
+ * Read the columns the user set to compact. A missing, unreadable or malformed
+ * value falls back to the default rather than failing the board.
+ * @param storage - browser storage (absent outside a browser).
+ */
+export function readCompactColumns(storage: Pick<Storage, 'getItem'> | undefined): TaskStatus[] {
+  try {
+    const raw = storage?.getItem(COMPACT_COLUMNS_KEY)
+    if (raw === null || raw === undefined) return [...DEFAULT_COMPACT_COLUMNS]
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return [...DEFAULT_COMPACT_COLUMNS]
+    return STATUSES.filter(status => parsed.includes(status))
+  } catch {
+    return [...DEFAULT_COMPACT_COLUMNS]
+  }
+}
+
+/**
+ * Persist the compact columns; a storage failure (quota, privacy mode) only
+ * loses the preference.
+ * @param storage - browser storage (absent outside a browser).
+ * @param columns - the compact columns.
+ */
+export function writeCompactColumns(storage: Pick<Storage, 'setItem'> | undefined, columns: readonly TaskStatus[]): void {
+  try {
+    storage?.setItem(COMPACT_COLUMNS_KEY, JSON.stringify(STATUSES.filter(status => columns.includes(status))))
+  } catch {
+    // Preference only: the board keeps working with the in-memory choice.
+  }
+}