Skip to content

Commit 5ff63d6

Browse files
adam0whiteadam0white
committed
Add Frontend Structure and Tailwind CSS Integration
- Introduced a new React frontend structure with components for the GameEval QA Pipeline, including `App`, `CardGalleryView`, and `AgentFocusView`. - Implemented Tailwind CSS for styling, including a custom configuration for theming and typography. - Added essential components such as `QuickSubmitInput`, `TestCard`, and `ScreenshotGallery` to enhance user interaction and display test results. - Established routing with React Router for seamless navigation between views. - Updated package dependencies to include React, Vite, and Tailwind CSS, ensuring a modern development environment. This commit lays the foundation for the new frontend architecture, improving user experience and visual consistency.
1 parent f74a413 commit 5ff63d6

33 files changed

+4230
-121
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@ Thumbs.db
2828
*.swo
2929
*~
3030

31+
dist/

‎docs/backlog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ Routing guidance:
1717
| 2025-11-05 | 3.3 | 3 | Feature | Medium | TBD | Open | Add abort button for running tests (requires workflow API changes) |
1818
| 2025-11-05 | 2.7 | 2 | Enhancement | Medium | TBD | Open | Update test status to "Aborted" when tests are killed/interrupted |
1919
| 2025-11-05 | 2.6 | 2 | Enhancement | Medium | TBD | Open | Run Phase 4 evaluation with partial data when earlier phases fail |
20+
| 2025-11-05 | 3.7 | 3 | Bug | High | TBD | Open | Fix Vite build output so ASSETS serves SPA root (`vite.config.ts`, Worker fallback, deployment docs) |
21+
| 2025-11-05 | 3.7 | 3 | Bug | High | TBD | Open | Implement Card/Table toggle with scroll persistence and localStorage preference (`src/frontend/App.tsx`) |
22+
| 2025-11-05 | 3.7 | 3 | Bug | High | TBD | Open | Extend Agent Focus metrics to include confidence per UX spec (`src/frontend/components/AgentStatusHeader.tsx`) |
23+
| 2025-11-05 | 3.7 | 3 | Bug | High | TBD | Open | Remove dangling import and stabilize ScreenshotGallery lightbox (`src/frontend/components/ScreenshotGallery.tsx`) |
24+
| 2025-11-05 | 3.7 | 3 | TechDebt | High | TBD | Open | Resolve architecture mismatch between React bundle and ADR-001 (`docs/epic-3-tech-context.md`) |
25+
| 2025-11-05 | 3.7 | 3 | TechDebt | Medium | TBD | Open | Configure Tailwind typography scale to match design system (`tailwind.config.js`, `src/frontend/index.css`) |
2026

2127
Adam's human notes:
2228
- We can deploy our own small games and test them with the system.

‎docs/epic-3-tech-context.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -745,6 +745,12 @@ Monitor: Production logs for first 24 hours
745745
- **Q4**: Should dashboard support user authentication? (Currently no auth, public access)
746746
- **Q5**: Should dashboard support custom themes or branding? (Currently follows Cloudflare design patterns)
747747

748+
## Post-Review Follow-ups
749+
750+
- Decide whether to retain inline Worker delivery or formally adopt the React + Vite pipeline and update ADR-001 accordingly.
751+
- Adjust build tooling so Cloudflare ASSETS serves `/index.html` from `dist/frontend/index.html` rather than falling back to legacy inline HTML.
752+
- Track completion of the Card/Table toggle, Agent Focus confidence metric, and typography scale updates that the review identified as gaps.
753+
748754
## Test Strategy Summary
749755

750756
### Unit Testing

‎docs/sprint-status.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ development_status:
6161
3-4-detailed-test-report-view: done
6262
3-5-example-game-testing-and-validation: in-progress
6363
3-6-production-deployment-and-documentation: ready-for-dev
64-
3-7-ux-phase-1-three-view-architecture-agent-orange: ready-for-dev
64+
3-7-ux-phase-1-three-view-architecture-agent-orange: done
6565
epic-3-retrospective: optional
6666

6767
epic-4: backlog

‎docs/stories/3-7-ux-phase-1-three-view-architecture-agent-orange.md‎

Lines changed: 295 additions & 59 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GameEval QA Pipeline</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/main.tsx"></script>
11+
</body>
12+
</html>
13+

‎main.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
border-color: var(--color-border);
10+
}
11+
12+
body {
13+
background-color: var(--color-background);
14+
color: white;
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
16+
}
17+
18+
/* Pulsing animation for running tests */
19+
@keyframes pulse {
20+
0%, 100% {
21+
opacity: 1;
22+
}
23+
50% {
24+
opacity: 0.5;
25+
}
26+
}
27+
28+
.animate-pulse {
29+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
30+
}
31+

‎main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import App from './src/frontend/App';
4+
import './main.css';
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
);
11+

0 commit comments

Comments
 (0)