feat(ui): enhance dashboard GUI with dark mode and glassmorphism

Author: mackeh

.pipelinex/benchmark-registry.json

@@ -0,0 +1,22 @@
+[
+  {
+    "id": "94212360-0c64-4e06-a1fb-4079d49509a7",
+    "schema_version": 1,
+    "submitted_at": "2026-02-10T17:04:57.558Z",
+    "source": "dashboard-live",
+    "provider": "github-actions",
+    "job_bucket": "1-5",
+    "step_bucket": "1-20",
+    "job_count": 5,
+    "step_count": 20,
+    "max_parallelism": 4,
+    "finding_count": 18,
+    "critical_count": 3,
+    "high_count": 4,
+    "medium_count": 7,
+    "total_duration_secs": 719,
+    "optimized_duration_secs": 143.8,
+    "improvement_pct": 80,
+    "health_score": 49.7
+  }
+]

README.md

@@ -112,6 +112,14 @@ An intelligent CI/CD analysis platform that watches your pipelines, identifies e
 
 ![PipelineX Dashboard](assets/dashboard-preview.png)
 
+### Interactive Visualization
+
+![DAG Explorer](assets/dag-explorer.png)
+
+### Deep Cost Analysis
+
+![Trends and Cost Center](assets/trends-cost.png)
+
 ---
 
 ### Basic Usage
@@ -575,23 +583,23 @@ $ pipelinex simulate .github/workflows/ci.yml --runs 1000
 
 ## 📋 Commands
 
-| Command        | Description                                | Example                                                          |
-| -------------- | ------------------------------------------ | ---------------------------------------------------------------- |
-| `analyze`      | Analyze pipelines for bottlenecks          | `pipelinex analyze .github/workflows/ci.yml`                     |
-| `optimize`     | Generate optimized config                  | `pipelinex optimize ci.yml -o ci-opt.yml`                        |
-| `diff`         | Show changes between current and optimized | `pipelinex diff ci.yml`                                          |
-| `apply`        | Apply optimization & create PR (one-click) | `pipelinex apply .github/workflows/ci.yml --repo owner/repo`     |
-| `cost`         | Estimate CI/CD costs and savings           | `pipelinex cost .github/workflows/ --team-size 10`               |
-| `graph`        | Visualize pipeline DAG                     | `pipelinex graph ci.yml --format mermaid`                        |
-| `simulate`     | Monte Carlo simulation                     | `pipelinex simulate ci.yml --runs 1000`                          |
-| `docker`       | Analyze Dockerfiles                        | `pipelinex docker Dockerfile --optimize`                         |
-| `select-tests` | Smart test selection                       | `pipelinex select-tests HEAD~1 HEAD`                             |
-| `flaky`        | Detect flaky tests                         | `pipelinex flaky test-results/*.xml`                             |
-| `history`      | Analyze workflow run history               | `pipelinex history --repo org/repo --workflow ci.yml --runs 100` |
+| Command        | Description                                | Example                                                                       |
+| -------------- | ------------------------------------------ | ----------------------------------------------------------------------------- |
+| `analyze`      | Analyze pipelines for bottlenecks          | `pipelinex analyze .github/workflows/ci.yml`                                  |
+| `optimize`     | Generate optimized config                  | `pipelinex optimize ci.yml -o ci-opt.yml`                                     |
+| `diff`         | Show changes between current and optimized | `pipelinex diff ci.yml`                                                       |
+| `apply`        | Apply optimization & create PR (one-click) | `pipelinex apply .github/workflows/ci.yml --repo owner/repo`                  |
+| `cost`         | Estimate CI/CD costs and savings           | `pipelinex cost .github/workflows/ --team-size 10`                            |
+| `graph`        | Visualize pipeline DAG                     | `pipelinex graph ci.yml --format mermaid`                                     |
+| `simulate`     | Monte Carlo simulation                     | `pipelinex simulate ci.yml --runs 1000`                                       |
+| `docker`       | Analyze Dockerfiles                        | `pipelinex docker Dockerfile --optimize`                                      |
+| `select-tests` | Smart test selection                       | `pipelinex select-tests HEAD~1 HEAD`                                          |
+| `flaky`        | Detect flaky tests                         | `pipelinex flaky test-results/*.xml`                                          |
+| `history`      | Analyze workflow run history               | `pipelinex history --repo org/repo --workflow ci.yml --runs 100`              |
 | `migrate`      | Migrate CI provider config                 | `pipelinex migrate .github/workflows/ci.yml --to gitlab-ci -o .gitlab-ci.yml` |
-| `multi-repo`   | Analyze cross-repo orchestration patterns  | `pipelinex multi-repo /path/to/repos --format json`              |
-| `right-size`   | Recommend right-sized CI runners           | `pipelinex right-size .github/workflows/ --format json`          |
-| `plugins`      | Plugin scaffold/list                       | `pipelinex plugins scaffold .pipelinex/plugins.json`             |
+| `multi-repo`   | Analyze cross-repo orchestration patterns  | `pipelinex multi-repo /path/to/repos --format json`                           |
+| `right-size`   | Recommend right-sized CI runners           | `pipelinex right-size .github/workflows/ --format json`                       |
+| `plugins`      | Plugin scaffold/list                       | `pipelinex plugins scaffold .pipelinex/plugins.json`                          |
 
 ### Output Formats
 

assets/dag-explorer.png

@@ -1,11 +1,20 @@
 @import "tailwindcss";
 
 :root {
-  --bg-deep: #07090f;
-  --bg-mid: #0d111d;
-  --ink: #ececf0;
-  --muted: #8d95a7;
-  --accent: #22d3ee;
+  /* Richer, deeper dark mode palette */
+  --bg-deep: #050505; /* Almost black for depth */
+  --bg-mid: #0a0a0b; /* Slightly lighter for cards */
+  --bg-surface: #121214; /* Elevated surfaces */
+
+  --ink-primary: #f4f4f5; /* Zinc-100 */
+  --ink-secondary: #a1a1aa; /* Zinc-400 */
+  --ink-tertiary: #52525b; /* Zinc-600 */
+
+  --accent-primary: #06b6d4; /* Cyan-500 */
+  --accent-glow: rgba(6, 182, 212, 0.15);
+
+  --border-subtle: #27272a; /* Zinc-800 */
+  --border-highlight: #3f3f46; /* Zinc-700 */
 }
 
 @theme inline {
@@ -15,19 +24,51 @@
 
 body {
   min-height: 100vh;
-  color: var(--ink);
-  background:
-    radial-gradient(1200px 700px at 20% -20%, rgba(34, 211, 238, 0.14), transparent 65%),
-    radial-gradient(900px 560px at 110% 0%, rgba(244, 114, 182, 0.12), transparent 65%),
-    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 70%);
+  color: var(--ink-primary);
+  background-color: var(--bg-deep);
+  /* More subtle, professional gradient mesh */
+  background-image:
+    radial-gradient(
+      circle at 15% 0%,
+      rgba(6, 182, 212, 0.08) 0%,
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at 85% 100%,
+      rgba(168, 85, 247, 0.05) 0%,
+      transparent 40%
+    );
   font-family: var(--font-space-grotesk), sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-* {
-  border-color: #27272a;
+/* Scrollbar styling for a cleaner look */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-deep);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-subtle);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-highlight);
 }
 
+/* Global utility enhancements */
 code,
 pre {
   font-family: var(--font-ibm-plex-mono), monospace;
 }
+
+/* Glassmorphism utility */
+.glass-panel {
+  background: rgba(18, 18, 20, 0.6);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}