feat(ui): redesign error_detail panel as inline diagnostic console by JFK · Pull Request #60 · JFK/voicesrt

JFK · 2026-04-09T09:09:26Z

Closes #58.

Summary

Restructures the failed/warning job error_detail disclosure into a diagnostic-console surface: title bar with traffic-light dots and pseudo-path, <dl> metadata grid, and a console-style raw_message block prefixed with ▶. The summary line now peeks the exception class (e.g. Show details — NotFoundError) so users can triage without expanding.

This is the scoped-down version of #58 per a CDO design review. The original issue proposal introduced 5 brand-new design tokens that had zero prior usage in the repo:

Original #58 token	Status here
`focus-visible:`	dropped — kept existing `focus:ring-1 focus:ring-blue-500`
`backdrop-blur-sm`	dropped — decorative-only
`tracking-widest` + `uppercase`	dropped — doesn't translate to JA
`bg-{red,amber}-950/30`	dropped — replaced with `bg-gray-200 dark:bg-gray-900`
Dynamic `text-{{ ring }}-*` interpolation	dropped — would silently no-op under Tailwind CDN JIT

Every visual move in #58 is preserved using only tokens that already exist elsewhere in src/templates/:

bg-gray-{100,200} / dark:bg-gray-{800,900} for the surface bands
bg-{red,yellow,green}-100 / dark:bg-{...}-900/40 for the three traffic dots — reuses the exact alert pill colors from status_colors at the top of the same file
flex + w-20 + flex-1 row layout instead of arbitrary grid-cols-[max-content_1fr]
border-gray-300 dark:border-gray-700 for borders (82 prior occurrences)

The diagnostic panel is hardcoded to neutral grays regardless of is_warning — the parent alert already conveys severity, so the panel reads as a calm inspection chamber inside the colored alert band rather than repeating the signal.

Why scoped-down

The original issue proposal was written for a Next.js + CVA + component-library stack, not a Jinja + Tailwind-CDN stack. Forcing the dynamic-class-interpolation pattern through here would either silently no-op most styles (because the CDN JIT only sees literal source strings), or require building a parallel panel_colors precompute dict for one component. Neither outcome is worth the cost.

Token discipline matters: a polish PR that introduces new tokens has to earn them, and #57's review (4de4b89) already caught this exact smuggling pattern once. The 70% scoped version delivers the visual delight with zero new token cost.

Files changed

src/templates/partials/job_status.html (+38, -8) — the redesign
.gitignore (+2) — added .playwright-mcp/ so visual-verification screenshots stay out of the working tree

Test plan

ruff check src/ tests/ — All checks passed
ruff format --check src/ tests/ — 56 files already formatted
pytest -m "not e2e" — 228 passed, 6 deselected, 0 failures, 1.87s
Visual verification in light/dark × en/ja with synthetic failed + completed-warning jobs (isolated DATA_DIR, separate alembic.ini, never touched the docker bind-mount DB)
getComputedStyle checks on every key element (panel, title bar, traffic dots, dl labels, focus ring, console block) — Tailwind CDN sometimes silently no-ops on classes it doesn't see in source, so per-element computed-style verification is the only reliable test. Caught and fixed a flex-shrink bug on the traffic dots (5.72px instead of 8px) that snapshot tests would have missed.
Re-verified after /simplify collapsed a redundant wrapper div in the console block

Visual diff

Verification screenshots (4 modes × 2 job states + post-merge re-verify) live in .playwright-mcp/ which is now gitignored. They are not committed.

🤖 Generated with Claude Code

Restructures the failed/warning job error_detail disclosure into a "diagnostic console" surface: title bar with traffic-light dots and pseudo-path, dl-grid metadata, and a console-style raw_message block prefixed with ▶. The summary line now peeks the exception class (e.g. "Show details — NotFoundError") so users can triage without expanding. Scoped-down per CDO verdict on #58. The original issue proposal introduced 5 brand-new design tokens (focus-visible:, backdrop-blur-sm, tracking-widest, bg-{red,amber}-950, dynamic ring color) that had zero prior usage in the repo. This implementation keeps every visual move while using only tokens that already exist elsewhere in src/templates/: - bg-gray-{100,200} dark:bg-gray-{800,900} surface bands - bg-{red,yellow,green}-100 dark:bg-{...}-900/40 traffic dots (reuse the same alert pill colors used by status_colors at the top of this file) - existing focus:ring-1 focus:ring-blue-500 focus pattern - w-20 + flex-1 dl row layout instead of grid-cols-[max-content_1fr] The diagnostic panel is hardcoded to neutral grays — the parent alert already conveys severity, so the panel reads as a calm inspection chamber inside the colored alert band rather than repeating the signal. Visual verification: light/dark × en/ja with synthetic failed and completed-warning jobs in an isolated DATA_DIR. getComputedStyle checks caught and fixed a flex-shrink bug on the traffic dots before merge. Also gitignores .playwright-mcp/ to keep verification artifacts out of the working tree. Refs #57, #58 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Redesigns the job error_detail disclosure UI into an “inline diagnostic console” presentation, and keeps local visual verification artifacts out of git.

Changes:

Enhances the <details>/<summary> label to include a peek of the exception class when available.
Replaces the previous key/value list with a structured console panel: title bar (traffic dots + pseudo-path), <dl> metadata layout, and a raw-message console block.
Ignores .playwright-mcp/ artifacts via .gitignore.

Reviewed changes

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

File	Description
`src/templates/partials/job_status.html`	Rebuilds the error detail disclosure markup and styling into the diagnostic console layout.
`.gitignore`	Adds `.playwright-mcp/` to ignored paths.

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

Copilot · 2026-04-09T09:13:22Z

src/templates/partials/job_status.html

+                <span class="inline-block w-2 h-2 rounded-full flex-shrink-0 bg-red-100 dark:bg-red-900/40"></span>
+                <span class="inline-block w-2 h-2 rounded-full flex-shrink-0 bg-yellow-100 dark:bg-yellow-900/40"></span>
+                <span class="inline-block w-2 h-2 rounded-full flex-shrink-0 bg-green-100 dark:bg-green-900/40"></span>
+                <span class="ml-2 text-xs font-mono text-gray-500 dark:text-gray-400 truncate">~/jobs/{{ detail.stage or 'pipeline' }} — exception</span>


In this flex title-bar row, the truncate span is missing min-w-0 (and typically flex-1). Without it, long detail.stage values may refuse to shrink and truncation won’t apply, causing overflow. Consider adding flex-1 min-w-0 to this span (consistent with other uses like src/templates/settings.html:130).

Suggested change

~/jobs/{{ detail.stage or 'pipeline' }} — exception

~/jobs/{{ detail.stage or 'pipeline' }} — exception

Fixed in 05876d4. Added flex-1 min-w-0 to the pseudo-path span. Stress-tested with an 871-char path: scrollWidth=871px, displayed=130px with ellipsis. Pattern matches settings.html:130.

Copilot · 2026-04-09T09:13:23Z

src/templates/partials/job_status.html

+            {% if detail.raw_message %}
+            <div class="flex items-start gap-2 rounded-b-md border-t border-gray-300 dark:border-gray-700 px-3 py-2 bg-gray-200 dark:bg-gray-900 font-mono text-xs leading-relaxed text-gray-800 dark:text-gray-200">
+                <span class="text-gray-500 dark:text-gray-400 select-none flex-shrink-0">▶</span>
+                <span class="flex-1 whitespace-pre-wrap break-words">{{ detail.raw_message }}</span>


In this flex row, the raw message container uses flex-1 + wrapping, but without min-w-0 the flex item can still overflow horizontally (especially with long unbroken strings/stack traces). Add min-w-0 to the message span (and/or the parent) so wrapping can actually constrain within the panel.

Suggested change

{{ detail.raw_message }}

{{ detail.raw_message }}

Fixed in 05876d4. Added min-w-0 to the raw_message span. Stress-tested with a 380-char unbreakable string: wraps to 22 lines within parentWidth=204px, panel stays inside its 280px table cell.

…tail panel Two flex children inside the diagnostic console relied on truncate or whitespace-pre-wrap to constrain content width, but flex items default to min-width: auto and refuse to shrink below their content size — so long stage names or unbreakable raw_message strings would push the panel wider than its table cell. - Title bar pseudo-path: add `flex-1 min-w-0` so the truncate ellipsis actually engages on long detail.stage values - Raw message console: add `min-w-0` so unbreakable strings wrap within the panel instead of overflowing horizontally Pattern matches existing project usage at settings.html:104,117,130,151 and srt_editor.html:209. Stress-tested with synthetic 871-char pseudo-path and a 380-char unbreakable raw_message: title clipped with ellipsis at 130px, raw message wrapped to 22 lines, panel stayed inside its 280px table cell. Caught by Copilot review on PR #60. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 1 out of 2 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.

Copilot AI review requested due to automatic review settings April 9, 2026 09:09

Copilot started reviewing on behalf of JFK April 9, 2026 09:10 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

JFK requested a review from Copilot April 9, 2026 09:38

Copilot started reviewing on behalf of JFK April 9, 2026 09:38 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

JFK merged commit 61c6a0d into main Apr 9, 2026
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): redesign error_detail panel as inline diagnostic console#60

feat(ui): redesign error_detail panel as inline diagnostic console#60
JFK merged 2 commits intomainfrom
58-feat/ui-history-redesign-error-detail-panel-as

JFK commented Apr 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

JFK Apr 9, 2026

Uh oh!

Copilot AI Apr 9, 2026

Uh oh!

JFK Apr 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<span class="ml-2 text-xs font-mono text-gray-500 dark:text-gray-400 truncate">~/jobs/{{ detail.stage or 'pipeline' }} — exception</span>
	<span class="ml-2 flex-1 min-w-0 text-xs font-mono text-gray-500 dark:text-gray-400 truncate">~/jobs/{{ detail.stage or 'pipeline' }} — exception</span>

	<span class="flex-1 whitespace-pre-wrap break-words">{{ detail.raw_message }}</span>
	<span class="min-w-0 flex-1 whitespace-pre-wrap break-words">{{ detail.raw_message }}</span>

Conversation

JFK commented Apr 9, 2026

Summary

Why scoped-down

Files changed

Test plan

Visual diff

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

JFK Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

JFK Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants