refactor(ui): align error_detail panel with design tokens

[JFK]

Closes #57

Summary

• Replace 4 design-token deviations in the failed-job error_detail panel (src/templates/partials/job_status.html) introduced by PR feat(observability): preserve raw API error in error_detail field (#54) #56.
• Pure design-system alignment — no behavior change. Adjusted 2 of the issue's proposed fixes (W2, I2) after CDO + DX Lead review to avoid introducing new patterns under the banner of "align with conventions".

Implementation notes

#	Action	Why this exact fix
W1	text-[11px] leading-relaxed → text-xs leading-relaxed	text-xs (12px) is used 4× in this same template. Removes the only off-scale text-[<n>px] value in src/templates/.
W2	bg-white/60 dark:bg-black/30 → bg-gray-100 dark:bg-gray-800	The issue body proposed bg-red-100/60 dark:bg-red-950/40, but bg-red-950 / bg-yellow-950 have zero usage in the codebase (red/yellow dark surfaces stop at -900/30). Used the cited monospace-block convention instead, which avoids introducing a new color stop.
I1	6× opacity-60 → text-gray-500 dark:text-gray-400	Single replace_all. The project's muted-text token has 65 cross-template occurrences across 7 files.
I2	<summary> gained rounded-sm hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500	The issue body proposed focus-visible:ring-2 focus-visible:ring-current/50, but focus-visible: has zero usage in src/templates/ (16 sites use plain focus:). Used the existing pattern from srt_editor.html:211 instead. The rounded-sm is required because the focus ring is implemented as box-shadow and follows the element's border-radius — verified empirically.

A separate follow-up issue should be filed for project-wide focus-visible adoption (16 sites, single PR, with proper visual regression). That's a coherent accessibility upgrade that deserves its own scope, not a smuggled exception inside a token-cleanup PR.

Verification

• ✅ ruff check src/ tests/ — All checks passed
• ✅ ruff format --check src/ tests/ — 56 files already formatted
• ✅ pytest -m "not e2e" — 228 passed, 6 deselected, 2.02s
• ✅ Manual visual check across 4 axes (light × dark × EN × JA) on a synthetic failed job + warning job, against an isolated DATA_DIR=/tmp/voicesrt-review/data instance (production DB untouched)
• ✅ Computed-style verification on every changed class:
  • bg-gray-100 → rgb(243,244,246) / bg-gray-800 → rgb(31,41,55)
  • text-gray-500 → rgb(107,114,128) / text-gray-400 → rgb(156,163,175)
  • Font size: 12px (text-xs, no longer the previous 11px arbitrary value)
• ✅ Focus ring measured programmatically: box-shadow: rgb(59,130,246) 0 0 0 1px + border-radius: 2px (the rounded-sm is load-bearing — without it the box-shadow ring would have sharp 0-radius corners)
• ✅ JA label 詳細を表示 renders correctly

Pre-PR review summary

• gate1: yellow via /claude-c-suite:ask → CDO (no escalation), confirmed by /claude-c-suite:dx-lead
• gate2: green
  • audit: n/a (/claude-c-suite:audit is a plugin-internal release gate for the C-Suite plugin's own command files; does not apply to this repo)
  • cso: green (zero security delta; no interpolation pattern, escape strategy, or data flow touched)
  • qa-lead: green (validation depth proportional to scope; no over-engineered tests required for an 8-line CSS swap)
  • cto: skipped (8-line class substitution has no architectural surface)

Full reviews are saved in the plugin cache:

• ~/.claude/cache/gh-issue-driven/57-feat-ui-history-align-error-detail-panel-with.gate1.md
• ~/.claude/cache/gh-issue-driven/57-feat-ui-history-align-error-detail-panel-with.gate2.md

🤖 Generated via /gh-issue-driven:ship

[Copilot]

Pull request overview

This PR aligns the History failed-job error_detail <details> panel styling with existing Tailwind design tokens and established template conventions, addressing the design-token drift introduced in PR #56 (issue #57).

Changes:

• Replace off-scale font size (text-[11px]) with tokenized text-xs.
• Swap ad-hoc translucent surface (bg-white/60 dark:bg-black/30) for the project’s common monospace surface (bg-gray-100 dark:bg-gray-800).
• Replace opacity-60 labels with the repo’s muted-text token (text-gray-500 dark:text-gray-400) and add an explicit focus ring to <summary>.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.