feat(ui): consolidate shared UI patterns into reusable components

- Token cleanup: replace raw hex colors (#c084fc, #60a5fa, #6ee7b7, #fdba74)
  in BoardCard.vue with nexus-tokens.css CSS variables (--clr-iris, --clr-bao,
  --clr-agent, --clr-review)
- New composable: useFormatDate (formatDate, relativeTime, toDateInputValue,
  minutesSince, hoursSince) — extracts duplicated date helpers from
  TaskBoardView and BoardCard
- New composable: useConfirm — reusable confirmation dialog logic
  (open/close, error/success state, Escape binding, body scroll lock)
- New component: StatusPill — unified state pill for backlog/progress/
  review/blocked/done, replacing inline .detail-state-pill classes
- New component: SkeletonLoader — loading placeholder with shimmer
  animation (card/text/circle variants)
- TaskBoardView: imports StatusPill & useFormatDate, removes 35+ lines
  of duplicated helpers
- ui/index.ts: exports new StatusPill & SkeletonLoader
- Build verified: pnpm build green (vue-tsc --noEmit + vite build pass)

frontend/src/components/board/BoardCard.vue

@@ -235,9 +235,9 @@ function toggleExpand(e: MouseEvent) {
 
 .mcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
 .ball { display: inline-flex; align-items: center; gap: 4px; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
-.ball.is-iris { background: rgba(147,51,234,.16); color: #c084fc; }
-.ball.is-bao { background: rgba(59,130,246,.16); color: #60a5fa; }
-.ball.is-agent { background: rgba(16,185,129,.14); color: #6ee7b7; }
+.ball.is-iris   { background: rgba(147, 51, 234, .16); color: var(--clr-iris);  }
+.ball.is-bao    { background: rgba(59, 130, 246, .16); color: var(--clr-bao);   }
+.ball.is-agent  { background: rgba(16, 185, 129, .14); color: var(--clr-agent); }
 .ball-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 .prio { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid; background: transparent; }
 .prio-high { color: var(--st-block); border-color: var(--st-block); }
@@ -263,9 +263,9 @@ function toggleExpand(e: MouseEvent) {
 .children { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; cursor: default; }
 .child-group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
 .child-agent { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; }
-.child-agent.is-iris { background: rgba(147,51,234,.14); color: #c084fc; }
-.child-agent.is-bao { background: rgba(59,130,246,.14); color: #60a5fa; }
-.child-agent.is-agent { background: rgba(16,185,129,.12); color: #6ee7b7; }
+.child-agent.is-iris   { background: rgba(147, 51, 234, .14); color: var(--clr-iris);  }
+.child-agent.is-bao    { background: rgba(59, 130, 246, .14); color: var(--clr-bao);   }
+.child-agent.is-agent  { background: rgba(16, 185, 129, .12); color: var(--clr-agent); }
 .child-group-count { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--tx-3); }
 .child-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: none; border-radius: 7px; background: rgba(10,9,24,.4); color: var(--tx); cursor: pointer; text-align: left; transition: background .15s; }
 .child-row:hover { background: rgba(124,108,255,.08); }
@@ -275,7 +275,7 @@ function toggleExpand(e: MouseEvent) {
 .child-state { font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em; }
 .cs-done { background: rgba(61,220,151,.14); color: var(--st-work); }
 .cs-blocked { background: rgba(251,113,133,.14); color: var(--st-block); }
-.cs-review { background: rgba(251,146,60,.14); color: #fdba74; }
+.cs-review   { background: rgba(251, 146, 60, .14); color: var(--clr-review); }
 .cs-active { background: rgba(52,214,245,.14); color: var(--st-think); }
 .cs-backlog { background: var(--glass-2); color: var(--tx-3); }
 
@@ -283,7 +283,7 @@ function toggleExpand(e: MouseEvent) {
 .rv-approve, .rv-changes { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 600; font-family: 'Manrope', sans-serif; cursor: pointer; transition: filter .15s, background .15s; }
 .rv-approve { border: none; background: rgba(61,220,151,.16); color: var(--st-work); border: 1px solid rgba(61,220,151,.3); }
 .rv-approve:hover { background: rgba(61,220,151,.26); }
-.rv-changes { border: 1px solid rgba(251,146,60,.3); background: rgba(251,146,60,.12); color: #fdba74; }
+.rv-changes { border: 1px solid rgba(251, 146, 60, .3); background: rgba(251, 146, 60, .12); color: var(--clr-review); }
 .rv-changes:hover { background: rgba(251,146,60,.22); }
 
 .mcard-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--tx-3); margin-top: 7px; font-variant-numeric: tabular-nums; }