# Web Home Dashboard Clickable Cards (2026-05)

Session context: BOSS liked the xianyu-hunter Web dashboard visual polish, then requested that the home cards be actionable instead of decorative.

Implementation pattern used in `/Users/chick/.Hermes/workspace/research/xianyu-hunter`:

- Keep the home dashboard as the landing/empty state, but make overview cards real `<button>` elements.
- Add a generic routing helper in `public/app.js`:
  - `findLatestTask(predicate)` sorts tasks by `updatedAt || createdAt` descending.
  - `openHomeCard(target)` maps dashboard metrics to the most relevant task:
    - `tasks` → latest task
    - `raw` → latest task with `products.rawCount > 0`
    - `fine` → latest task with `products.fineCount > 0`
    - `recommend` → latest task with `hermesAnalysis.recommendedCount > 0`, then open `analysis` tab
    - `running` → latest running task
    - `scheduled` → latest task with `config.schedule.enabled`
  - If no matching task exists, open `showCreateModal()` instead of silently doing nothing.
- Extend `selectTask(id, tab = 'products')` so cards can deep-link into either the product list or Hermes analysis tab after `refreshTask()` and `renderTaskDetail()`.
- Convert workflow steps into clickable buttons:
  - 登录 → `showLoginModal()`
  - 新建任务 → `showCreateModal()`
  - 采集/预筛 → `openHomeCard('fine')`
  - Hermes 分析 → `openHomeCard('recommend')`
- Style clickable cards with visible affordances:
  - `cursor: pointer`, hover translate, border/glow changes, focus-visible outline.
  - Include a small action line such as `查看分析结果 →` so the behavior is legible.

Verification checklist:

```bash
cd /Users/chick/.Hermes/workspace/research/xianyu-hunter
node --check public/app.js
git diff --check -- public/index.html public/style.css public/app.js
node tools/xianyu_ops.mjs status --port 3000
node --input-type=module <<'JS'
const base = 'http://127.0.0.1:3000';
for (const path of ['/', '/style.css?v=<CACHE_VERSION>', '/app.js?v=<CACHE_VERSION>']) {
  const res = await fetch(base + path);
  const text = await res.text();
  console.log(path, res.status, text.length);
  if (!res.ok) process.exitCode = 1;
}
JS
```

Pitfalls:

- If cards are changed from `div` to `button`, preserve visual reset (`font: inherit`, `text-align: left`, `color: var(--text)`, `width: 100%`) or they will inherit browser button styling.
- Bump both `style.css?v=N` and `app.js?v=N` in `public/index.html` after Web UI changes, otherwise BOSS may see stale assets.
- Do not make a dashboard card a dead click target; when there is no matching data, open the task creation modal as a useful fallback.