Skip to content

feat: professional UI redesign + first frontend tests + tutorial video (v1.1.0)#1

Merged
dimknaf merged 1 commit into
masterfrom
redesign/professional-ui-v1.1
May 5, 2026
Merged

feat: professional UI redesign + first frontend tests + tutorial video (v1.1.0)#1
dimknaf merged 1 commit into
masterfrom
redesign/professional-ui-v1.1

Conversation

@dimknaf
Copy link
Copy Markdown
Owner

@dimknaf dimknaf commented May 5, 2026

Summary

Frontend visual redesign to a Stripe Dashboard-inspired aesthetic, the
first round of frontend test infrastructure (Vitest + RTL, 40 tests
across 5 suites), a tutorial-video embed at the top of the README, and
the first lockstep version bump to v1.1.0.

Changes

Frontend visual (token-based)

  • frontend/app/globals.css — full token system (Stripe palette, layered
    duotone shadows, sharp radii), 15px html base, restored typography
    ladder, new utilities (.step-badge, .hero-backdrop, .eyebrow,
    status-dot helpers, .animate-status-pulse).
  • frontend/app/page.tsx — full-bleed hero header with Bot brand mark,
    bold wordmark, tagline, and live BackendStatusChip pill (model +
    backend + connection status pulled from /api/agent-status).
  • All frontend/components/* swept: dropped 9 bulky padded icon
    containers in favor of inline 16px icons, added numbered step badges
    (1–4) on workflow sections, restored confident heading sizes, denser
    column-tag chips, slimmer progress bar, eyebrow-style form labels.
  • KPI stat-card row (Total / Completed / In progress / Failed) above the
    results table.
  • FileUpload empty-state polish: 64px gradient icon zone, workflow
    step trail "1 Upload · 2 Configure · 3 Run" underneath.

Bug fix

  • FileUpload: full drop-zone is now clickable (was previously only the
    inline "Click to upload" link — the rest of the dashed box did
    nothing despite visually inviting clicks).

Tests

  • Vitest 4.1.5 + @testing-library/react 16.3.2 + jsdom 29.1.1 +
    @testing-library/jest-dom 6.9.1 + @testing-library/user-event 14.6.1
    — all pinned to actual latest stable.
  • Five suites, 40 tests total: profileUtils (incl. legacy profile
    migration — most load-bearing test per CLAUDE.md), csvParser,
    ColumnTags, OutputSchemaBuilder, ResultsTable.
  • .github/workflows/test.yml extended with a frontend job
    (lint + test) running in parallel to backend pytest.

Repo conventions (first-time additions)

  • CHANGELOG.md (Keep-a-Changelog)
  • CONTRIBUTING.md (Conventional Commits, branch naming, squash-merge,
    lockstep versioning)
  • SECURITY.md (private vulnerability reporting)
  • .github/PULL_REQUEST_TEMPLATE.md

Documentation

Version

  • frontend 1.0.01.1.0 (frontend/package.json)
  • backend 1.0.01.1.0 (backend/API/api.py version literal)
  • Lockstep — both sides bump together. Tag: v1.1.0.

Test plan

  • cd frontend && npm install && npm run lint && npm run test
    → 40 tests pass, 0 lint warnings
  • cd backend && pytest tests/ -v → existing suite still green
  • Manual smoke: upload a CSV, click column tags, build prompt,
    define output schema, run with concurrency 2, verify stat cards
    update live, export CSV
  • Local Docker stack (docker compose -f docker-compose.local.yml up --build) starts cleanly, frontend at :3000 healthy
  • Hero header renders edge-to-edge of viewport on wide screens

Versioning

  • Frontend bump (frontend/package.json) — new version: 1.1.0
  • Backend bump (backend/API/api.py) — new version: 1.1.0
  • CHANGELOG.md updated in this PR

Breaking changes

None. All HTTP API contracts, component props, profile JSON shape, and
runtime behavior are identical to v1.0.0. Pure visual + tooling
refresh.

Checklist

  • PR title follows Conventional Commits
  • Branch name follows <type>/<short-description>
  • Local lint + tests pass for the side(s) I changed

…o (v1.1.0)

Frontend visual redesign to a Stripe Dashboard-inspired aesthetic, the
first round of frontend test infrastructure (Vitest + RTL, 40 tests
across 5 suites), a tutorial-video embed at the top of the README, and
the first lockstep version bump to v1.1.0.

## Frontend visual (token-based)

- frontend/app/globals.css — full token system (Stripe palette, layered
  duotone shadows, sharp radii, 15px html base, restored typography
  ladder), and new utilities: .step-badge, .hero-backdrop, .eyebrow,
  status-dot helpers, .animate-status-pulse.
- frontend/app/page.tsx — full-bleed hero header with Bot brand mark,
  bold wordmark, tagline, and live BackendStatusChip pill (model +
  backend + connection status pulled from /api/agent-status).
- All frontend/components/* swept: dropped 9 bulky padded icon
  containers in favor of inline 16px icons; added numbered step badges
  (1-4) on workflow sections; restored confident heading sizes; denser
  column-tag chips; slimmer progress bar; eyebrow-style form labels.
- KPI stat-card row (Total / Completed / In progress / Failed) above the
  results table.
- FileUpload empty-state polish: 64px gradient icon zone, workflow step
  trail "1 Upload · 2 Configure · 3 Run" underneath.

## Bug fix

- FileUpload: full drop-zone is now clickable. Was previously only the
  inline "Click to upload" link; the rest of the dashed box did nothing
  despite visually inviting clicks. role=button + Enter/Space keyboard
  activation, full-area click handler.

## Tests

- Vitest 4.1.5 + @testing-library/react 16.3.2 + jsdom 29.1.1 +
  @testing-library/jest-dom 6.9.1 + @testing-library/user-event 14.6.1
  + @vitejs/plugin-react 6.0.1 — all pinned to actual latest stable.
- Five suites, 40 tests total: profileUtils (incl. legacy profile
  migration — most load-bearing test per CLAUDE.md), csvParser,
  ColumnTags, OutputSchemaBuilder, ResultsTable.
- .github/workflows/test.yml extended with a frontend job
  (lint + vitest) running in parallel to backend pytest.

## Repo conventions (first-time additions)

- CHANGELOG.md (Keep-a-Changelog)
- CONTRIBUTING.md (Conventional Commits, branch naming, squash-merge,
  lockstep versioning)
- SECURITY.md (private vulnerability reporting)
- .github/PULL_REQUEST_TEMPLATE.md

## Documentation

- README.md: tutorial video embed at top
  (https://youtu.be/wnuQufwRAXE).

## Version (lockstep)

- frontend 1.0.0 -> 1.1.0 (frontend/package.json)
- backend  1.0.0 -> 1.1.0 (backend/API/api.py 'version' literal)
- Both bump together. Tag: v1.1.0.

## Breaking changes

None. All HTTP API contracts, component props, profile JSON shape, and
runtime behavior are identical to v1.0.0. Pure visual + tooling
refresh.
@dimknaf dimknaf merged commit 2749041 into master May 5, 2026
2 checks passed
@dimknaf dimknaf deleted the redesign/professional-ui-v1.1 branch May 5, 2026 23:17
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