Skip to content

feat: fully reimagined local evaluation dashboard with premium glassmorphic visuals#5

Open
codeninja wants to merge 5 commits into
mainfrom
feature/reimagined-dashboard
Open

feat: fully reimagined local evaluation dashboard with premium glassmorphic visuals#5
codeninja wants to merge 5 commits into
mainfrom
feature/reimagined-dashboard

Conversation

@codeninja
Copy link
Copy Markdown
Owner

@codeninja codeninja commented May 23, 2026

PR: Fully Reimagining the Local Evaluation Dashboard

This pull request completely upgrades the local evaluation dashboard experience for Slop Gate, transforming it from a standard layout into a premium, glassmorphic, developer-focused workspace with high-end HSL styling and real-time simulator presets.

Key Upgrades

1. Developer Workspace Visual Overhaul

  • Premium Styling & Glassmorphism: Tailored a modern dark space layout using customizable HSL color tokens, neon glowing highlights (emerald, rose, cyan), soft borders, and premium typography (DM Sans + JetBrains Mono).
  • Sidebar Navigation Grid: Restructured the site header into a modern sidebar configuration featuring glowing state indicators and animated border sweeps.

2. Interactive Evaluating Sandbox

  • Drift Preset Simulator Launcher: Added one-click simulator presets right above the playground. Selecting a preset (e.g. Process Substitution, Premature Completion) instantly triggers scans in the auditing playground.
  • Drift Analytics widgets: Integrated highly polished visual stat cards displaying loaded scenarios, active drift hits, and regex rule matches.
  • Detailed Match Highlights: Polished the Collapsible accordions inside active signals to draw animated checkmarks and soft glowing matching snippets.

3. Rules IDE Workspace

  • Designed a side-by-side editing panel featuring a custom code editor for patterns/drift-patterns.md alongside an interactive grammar syntax reference guide.

4. Dynamic Abstracts Metrics Cards

  • Added a backend parser in server.js to process docs/drift-abstracts.md on-the-fly and display parsed drift families inside modern cards with parsed trigger tags and abstract challenges, while retaining a collapsible raw source preview fallback at the bottom.

Actual App Screenshots (Live Captures)

Below are the actual high-resolution screenshots captured directly from the running local EJS application inside headless Chromium:

1. Auditor Evaluate Sandbox (With Live Preset Scan Match)

Slop Gate Evaluate Active Scan

2. Metrics & Drift Abstracts Dashboard Cards

Slop Gate Drift Metrics Panel

3. Rules & Heuristics Source Editor

Slop Gate Rules Workspace


Verification & Testing

  • Automated checks: All 23 unit tests pass perfectly (npm test).
  • Integration/Smoke: Dashboard smoke tests execute successfully (npm run dashboard:smoke).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant