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

package/src/client/board/VerificationReport.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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_QUALITY_ATTEMPTS,
+  exceptionAttempts,
+  qualityAttempts,
+  verificationPhase,
+  verificationTotals,
+  type ExecutionVerification,
+  type VerificationAttempt,
+} 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',
+}
+
+/** One recorded attempt: a quality verdict or an acceptance anomaly. */
+function AttemptRow({ attempt }: { attempt: VerificationAttempt }) {
+  const exception = attempt.stage === 'exception'
+  const result = exception ? 'failed' : attempt.passed ? 'succeeded' : 'failed'
+  return (
+    <li className={css.executionRow} data-result={result}>
+      <span className={css.executionBadge} data-result={result}>
+        {exception ? t('verify.status.exception') : attempt.passed ? t('verify.status.passed') : t('verify.status.failed')}
+      </span>
+      <span className={css.executionTimes}>
+        {exception
+          ? t('verify.attemptException', { index: String(attempt.index) })
+          : t('verify.attempt', { index: String(attempt.index) })}
+        {' · '}{routeLabel(attempt)}
+        {!exception && ' · ' + t('verify.rounds', { rounds: String(attempt.rounds) })}
+      </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.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 && attempt.findings.length === 0 && (
+        <span className={css.executionTimes}>{t('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 === '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.counts', {
+          quality: String(qualityAttempts(verification).length),
+          max: String(MAX_QUALITY_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} />
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

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.
+  }
+}

package/src/client/board/icons.tsx

@@ -0,0 +1,89 @@
+/**
+ * The board's own vector glyphs.
+ *
+ * Every control glyph the board draws comes from here, so one action always
+ * has one metaphor and one stroke recipe: a 16-unit viewBox, `currentColor`,
+ * 1.3 stroke, round caps and joins — the same recipe the sidebar panel glyph
+ * (`native-panel.tsx`) uses, which is why the board's chrome and its sidebar
+ * row read as one product. Icon-only controls pass a localized `title` and an
+ * accessible name at the call site; the glyph itself is always decorative.
+ *
+ * @module @linxin666/dsh-client-ui-task-board/client/board/icons
+ */
+import type { ReactNode, ReactElement } from 'react'
+
+/** Stroke geometry shared by every board glyph. */
+const GLYPH = {
+  viewBox: '0 0 16 16',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.3,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': true,
+} as const
+
+/** Props of one board glyph: the shared recipe plus an explicit pixel size. */
+export interface BoardIconProps {
+  /** Rendered square edge in CSS pixels. */
+  size?: number
+}
+
+/** Render one board glyph through the shared stroke recipe. */
+function Glyph({ size = 14, children }: BoardIconProps & { children: ReactNode }): ReactElement {
+  return (
+    <svg {...GLYPH} width={size} height={size}>
+      {children}
+    </svg>
+  )
+}
+
+/** Leave the board: the back-to-chat chevron. */
+export function IconChevronLeft(props: BoardIconProps): ReactElement {
+  return <Glyph {...props}><path d="M10 3.5 5.5 8 10 12.5" /></Glyph>
+}
+
+/** Dismiss a transient surface. */
+export function IconClose(props: BoardIconProps): ReactElement {
+  return <Glyph {...props}><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" /></Glyph>
+}
+
+/** Add: create a task, a label row, or a subtask. */
+export function IconPlus(props: BoardIconProps): ReactElement {
+  return <Glyph {...props}><path d="M8 3.5v9M3.5 8h9" /></Glyph>
+}
+
+/** Open the execution's session transcript. */
+export function IconSession(props: BoardIconProps): ReactElement {
+  return (
+    <Glyph {...props}>
+      <rect x="2.2" y="3.2" width="11.6" height="9.6" rx="1.6" />
+      <path d="M5.3 6.6l1.9 1.7-1.9 1.7M8.8 10h2.4" />
+    </Glyph>
+  )
+}
+
+/** Switch a column to single-line cards. */
+export function IconCompactRows(props: BoardIconProps): ReactElement {
+  return <Glyph {...props}><path d="M3 4.5h10M3 8h10M3 11.5h10" /></Glyph>
+}
+
+/** Switch a column back to full cards. */
+export function IconExpandRows(props: BoardIconProps): ReactElement {
+  return (
+    <Glyph {...props}>
+      <rect x="2.6" y="2.6" width="10.8" height="4.4" rx="1.2" />
+      <rect x="2.6" y="9" width="10.8" height="4.4" rx="1.2" />
+    </Glyph>
+  )
+}
+
+/** A scheduled run: the recurrence mark on a card. */
+export function IconClock(props: BoardIconProps): ReactElement {
+  return (
+    <Glyph {...props}>
+      <circle cx="8" cy="8" r="5.4" />
+      <path d="M8 5.2V8l2 1.4" />
+    </Glyph>
+  )
+}