mgeeky-decode-spam-headers/Auto Run Docs/SpecKit-web-header-analyzer-Phase-03-Header-Input.md

Phase 03: US1 — Header Input & Submission

This phase implements the user-facing input layer: a multi-line textarea for pasting SMTP headers, a drag-and-drop zone for EML/TXT files, and an analyse button with keyboard shortcut. The dark hacker theme becomes visible. By the end of this phase, users can paste text, drop files to auto-populate, and trigger analysis (though the full analysis pipeline connects in Phase 5). TDD Red-Green: write failing component tests first, then implement components.

Spec Kit Context

• Feature: 1-web-header-analyzer
• Specification: .specify/specs/1-web-header-analyzer/spec.md (FR-01, FR-02, FR-05, FR-14, FR-15)
• Plan: .specify/specs/1-web-header-analyzer/plan.md
• Tasks: .specify/specs/1-web-header-analyzer/tasks.md
• User Story: US1 — Header Input & Submission (Scenarios 1, 2)
• Constitution: .specify/memory/constitution.md (TDD: P6, UX: P7)

Dependencies

• Requires Phase 01 completed (frontend project initialised, design tokens, types)
• Does NOT require Phase 02 (engine) — components are UI-only at this stage

Design Reference

• Background: #1e1e2e, Surface: #282a36, Text: #f8f8f2
• Monospace font for header text areas
• FontAwesome icons for actions (paste, upload, clear, analyse)
• Responsive from 320px to 2560px (NFR-04)
• All controls keyboard accessible (NFR-02)
• Input validation: empty input blocked, oversized >1MB rejected with user-friendly error (NFR-10)

Tasks

• T015 [US1] Write failing tests (TDD Red) in frontend/src/__tests__/HeaderInput.test.tsx (render, paste simulation, empty/oversized validation), frontend/src/__tests__/FileDropZone.test.tsx (render, drop event, file type filtering), and frontend/src/__tests__/AnalyseButton.test.tsx (render, disabled state, Ctrl+Enter shortcut)
• T016 [US1] Create main page layout in frontend/src/app/page.tsx with dark hacker theme (#1e1e2e background, monospace code areas, project title). Responsive from 320px to 2560px (NFR-04)
• T017 [P] [US1] Create frontend/src/components/HeaderInput.tsx — multi-line textarea for SMTP headers with placeholder, character count, clear button (FontAwesome icon), monospace styling, keyboard accessible (NFR-02), validation for empty and oversized >1MB input (NFR-10). Verify HeaderInput.test.tsx passes (TDD Green)
• T018 [P] [US1] Create frontend/src/components/FileDropZone.tsx — drag-and-drop zone accepting .eml and .txt files, reads client-side via File API (FR-02), populates HeaderInput on drop, shows drag-over highlight and rejection feedback, FontAwesome upload icon. Verify FileDropZone.test.tsx passes (TDD Green)
• T019 [US1] Create frontend/src/components/AnalyseButton.tsx — primary action button with FontAwesome analyse icon, Ctrl+Enter shortcut (FR-05), disabled when input empty, loading state during analysis (NFR-05), hacker accent colour. Verify AnalyseButton.test.tsx passes (TDD Green)

Note: npx vitest run src/__tests__/AnalyseButton.test.tsx passes; Vitest emits existing act() environment warnings.

Completion

• All vitest tests pass: npx vitest run src/__tests__/HeaderInput.test.tsx src/__tests__/FileDropZone.test.tsx src/__tests__/AnalyseButton.test.tsx
• User can paste text into the header input area
• User can drop an EML/TXT file and see it auto-populate the input
• Analyse button is disabled when input is empty
• Ctrl+Enter keyboard shortcut triggers the analyse action
• Dark hacker theme is visible with correct colour palette
• Validation shows user-friendly errors for empty and oversized input
• npx eslint src/ and npx prettier --check src/ pass with zero errors
• Run /speckit.analyze to verify consistency

Note: Wired FileDropZone into the main page to populate the header input state on drop.