feat: replace vanilla JS dashboard with Preact + Vite + Tailwind SPA#43
Merged
pratyush618 merged 11 commits intomasterfrom Mar 22, 2026
Merged
feat: replace vanilla JS dashboard with Preact + Vite + Tailwind SPA#43pratyush618 merged 11 commits intomasterfrom
pratyush618 merged 11 commits intomasterfrom
Conversation
Set up the dashboard frontend build system with Preact, Vite, Tailwind CSS v4, and TypeScript. Includes API client, type definitions for all 30+ endpoints, data-fetching hooks with auto-refresh, theme/toast signals, and utility functions. Output is a single HTML file via vite-plugin-singlefile.
App shell with sidebar navigation (lucide icons, grouped sections, active indicator), header with gradient logo, theme toggle, and refresh control. Reusable UI components: stat cards with status icons, data tables with alternating rows, badges with status dots, buttons with hover/active states, toasts with slide-in animation, confirm dialogs with backdrop blur, loading spinners, skeleton screens, and empty states. Canvas-based charts: throughput sparkline with gradient fill, timeseries stacked bar chart, SVG dependency DAG viewer.
Overview (stats grid, throughput chart, recent jobs), Jobs (7-field filter panel, paginated table), Job Detail (status-colored accent, error history, task logs, replay history, DAG), Metrics (timeseries chart, latency color-coding, time range selector), Logs (task/level filters), Workers (status dot, heartbeat cards), Circuit Breakers, Dead Letters (retry/purge with confirm dialog). Three new pages: Resources (health, pool stats, dependencies), Queue Management (per-queue stats, pause/resume with icons), System Internals (proxy reconstruction + interception metrics).
Simplify dashboard.py to read a single pre-built HTML file instead of composing from 8 separate template files. Remove old vanilla JS sources (700 lines) now replaced by the Preact build. The built dashboard.html (128KB, 32KB gzipped) is a self-contained SPA with all CSS and JS inlined via vite-plugin-singlefile. Users still get zero-dependency install — Node.js is only needed by contributors modifying the dashboard source.
Rewrite dashboard.md to reflect the Preact + Tailwind rebuild: 11 pages documented, all 30+ REST API endpoints listed, new development section for contributors, updated feature list. Add dashboard rebuild entry to 0.10.0 changelog.
Add step-by-step tutorial walkthrough covering all 11 dashboard pages: overview, jobs, job detail, metrics, logs, workers, queues, resources, circuit breakers, dead letters, and system internals. Include build pipeline diagram, project structure reference, and programmatic API usage examples (pause/resume, bulk retry). Add dashboard section to quickstart guide.
Add Biome (Rust-based linter + formatter) for TypeScript/TSX code quality. Fix all lint errors: add type="button" to interactive buttons, add SVG title for accessibility, replace forEach with for-of where return values were discarded. New npm scripts: lint, lint:fix, format, format:check, ci. Pre-commit hooks: dashboard-lint (biome ci) and dashboard-typecheck (tsc --noEmit) trigger on dashboard/src/ changes. CI: new dashboard-lint job runs biome, typecheck, and build check.
Replace non-null assertion with type cast in main.tsx. Use template literals instead of string concatenation in sidebar, logs, and dead-letters pages. Zero warnings in CI annotations.
Search input in header navigates directly to job detail page by ID.
Auto-refresh indicator shows relative time since last data fetch
("just now", "3s ago") and highlights the refresh icon when active.
DataTable supports optional checkbox selection with select-all header toggle. Jobs page shows bulk action bar when items are selected: Cancel Selected (with confirm dialog), Replay Selected, and Clear Selection. Actions process jobs sequentially and show toast with success/failure counts.
Toggle between list view (flat, paginated) and grouped view that collapses dead letters by error message. Groups show occurrence count, expandable item list, and Retry All button. Groups sorted by count descending so the most common errors appear first.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
dashboard.pyreads one pre-built file viaimportlib.resourcesinstead of composing templates at serve timeChanges
Frontend (dashboard/)
vite-plugin-singlefileinlines all JS + CSS into one HTML; build script copies output topy_src/taskito/templates/dashboard.htmlbiome.jsonconfigPython (py_src/taskito/)
dashboard.py: replaced 8-template composition with_get_spa_html()— thread-safe lazy load of single pre-built HTMLCI (.github/workflows/ci.yml)
dashboard-lintjob:biome ci,tsc --noEmit,vite buildDocs (docs/)
docs/guide/dashboard.md: full 14-step tutorial, updated REST API reference (30+ endpoints), development guide, project structure, and build pipeline explanationdocs/changelog.md: 0.10.0 dashboard rebuild entryTest plan
cd dashboard && npx biome ci src/passescd dashboard && npx tsc --noEmitpassescd dashboard && npx vite buildproduces dashboard.html