MAESTRO: add header input component

Auto Run Docs/SpecKit-web-header-analyzer-Phase-03-Header-Input.md

@@ -29,7 +29,7 @@ This phase implements the user-facing input layer: a multi-line textarea for pas
 
 - [x] 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)
 - [x] 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)
+- [x] 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)
 

frontend/src/components/HeaderInput.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { type FormEvent, useEffect, useId, useRef, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+
+const MAX_INPUT_BYTES = 1024 * 1024;
+
+type HeaderInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+const defaultPlaceholder =
+  "Paste SMTP headers here. Each line is parsed for sender, authentication, and delivery hops.";
+
+const formatCount = (count: number): string => count.toLocaleString("en-US");
+
+const validateValue = (value: string): string | null => {
+  if (value.length > MAX_INPUT_BYTES) {
+    return "Header input exceeds the 1 MB limit.";
+  }
+
+  if (value.trim().length === 0) {
+    return "Header input cannot be empty.";
+  }
+
+  return null;
+};
+
+export default function HeaderInput({
+  value,
+  onChange,
+  placeholder = defaultPlaceholder,
+}: HeaderInputProps) {
+  const inputId = useId();
+  const errorId = useId();
+  const [error, setError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    const node = textareaRef.current;
+    if (!node) {
+      return;
+    }
+
+    const handleNativeBlur = () => {
+      setError(validateValue(node.value));
+    };
+
+    node.addEventListener("blur", handleNativeBlur);
+
+    return () => {
+      node.removeEventListener("blur", handleNativeBlur);
+    };
+  }, []);
+
+  const handleInput = (event: FormEvent<HTMLTextAreaElement>) => {
+    const nextValue = event.currentTarget.value;
+    onChange(nextValue);
+    if (error) {
+      setError(validateValue(nextValue));
+    }
+  };
+
+  const handleClear = () => {
+    onChange("");
+    setError(null);
+  };
+
+  const hasError = Boolean(error);
+  const hintText = `${formatCount(value.length)} / 1MB`;
+
+  return (
+    <section className="rounded-2xl border border-info/10 bg-surface p-6 shadow-[0_0_40px_rgba(15,23,42,0.45)]">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.2em] text-info/90">
+        <label htmlFor={inputId}>Header Input</label>
+        <span className="font-mono text-[10px] text-text/50">{hintText}</span>
+      </div>
+      <div className="mt-4 flex flex-col gap-3">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
+          <textarea
+            id={inputId}
+            className="min-h-[180px] flex-1 resize-y rounded-xl border border-info/20 bg-background/60 p-4 font-mono text-sm text-text/80 shadow-inner focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info sm:text-base"
+            placeholder={placeholder}
+            spellCheck={false}
+            value={value}
+            onInput={handleInput}
+            aria-invalid={hasError ? "true" : undefined}
+            aria-describedby={hasError ? errorId : undefined}
+            ref={textareaRef}
+          />
+          <button
+            type="button"
+            className="inline-flex items-center justify-center gap-2 rounded-full border border-info/20 bg-background/40 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-text/70 transition hover:border-info/40 hover:text-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info disabled:cursor-not-allowed disabled:opacity-50"
+            onClick={handleClear}
+            aria-label="Clear header input"
+            disabled={value.length === 0}
+          >
+            <FontAwesomeIcon icon={faXmark} className="text-xs" />
+            Clear
+          </button>
+        </div>
+        {hasError ? (
+          <p role="alert" id={errorId} className="text-xs text-spam">
+            {error}
+          </p>
+        ) : null}
+      </div>
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-text/50">
+        <span>Tip:</span>
+        <span className="font-mono">Ctrl</span>
+        <span>+</span>
+        <span className="font-mono">Enter</span>
+        <span>to analyse.</span>
+      </div>
+    </section>
+  );
+}