MAESTRO: enforce header input validation

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

@@ -43,9 +43,10 @@ Note: `npx vitest run src/__tests__/AnalyseButton.test.tsx` passes; Vitest emits
 - [x] Analyse button is disabled when input is empty
 - [x] Ctrl+Enter keyboard shortcut triggers the analyse action
 - [x] Dark hacker theme is visible with correct colour palette
-- [ ] Validation shows user-friendly errors for empty and oversized input
+- [x] 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.
 Note: Applied the dark hacker palette globally via `frontend/src/app/globals.css`.
+Note: Oversized input now disables Analyse and surfaces validation copy immediately.

frontend/src/app/page.tsx

@@ -5,11 +5,14 @@ import { useEffect, useRef, useState } from "react";
 import AnalyseButton from "../components/AnalyseButton";
 import FileDropZone from "../components/FileDropZone";
 import HeaderInput from "../components/HeaderInput";
+import { MAX_HEADER_INPUT_BYTES } from "../lib/header-validation";
 
 export default function Home() {
   const [headerInput, setHeaderInput] = useState("");
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const hasHeaderInput = headerInput.trim().length > 0;
+  const isOversized = headerInput.length > MAX_HEADER_INPUT_BYTES;
+  const canAnalyse = hasHeaderInput && !isOversized;
   const analyseTimeoutRef = useRef<number | null>(null);
 
   useEffect(() => {
@@ -21,7 +24,7 @@ export default function Home() {
   }, []);
 
   const handleAnalyse = () => {
-    if (!hasHeaderInput) {
+    if (!canAnalyse) {
       return;
     }
 
@@ -69,7 +72,7 @@ export default function Home() {
                 </p>
                 <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center">
                   <AnalyseButton
-                    hasInput={hasHeaderInput}
+                    hasInput={canAnalyse}
                     onAnalyse={handleAnalyse}
                     isLoading={isAnalyzing}
                   />

frontend/src/components/FileDropZone.tsx

@@ -4,7 +4,9 @@ import { type DragEventHandler, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUpFromBracket } from "@fortawesome/free-solid-svg-icons";
 
-const MAX_FILE_BYTES = 1024 * 1024;
+import { MAX_HEADER_INPUT_BYTES } from "../lib/header-validation";
+
+const MAX_FILE_BYTES = MAX_HEADER_INPUT_BYTES;
 const ACCEPTED_EXTENSIONS = new Set([".eml", ".txt"]);
 const ACCEPTED_MIME_TYPES = new Set(["message/rfc822", "text/plain"]);
 

frontend/src/components/HeaderInput.tsx

@@ -4,7 +4,10 @@ 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;
+import {
+  MAX_HEADER_INPUT_BYTES,
+  validateHeaderInput,
+} from "../lib/header-validation";
 
 type HeaderInputProps = {
   value: string;
@@ -17,18 +20,6 @@ const defaultPlaceholder =
 
 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,
@@ -36,7 +27,7 @@ export default function HeaderInput({
 }: HeaderInputProps) {
   const inputId = useId();
   const errorId = useId();
-  const [error, setError] = useState<string | null>(null);
+  const [touched, setTouched] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
@@ -46,7 +37,7 @@ export default function HeaderInput({
     }
 
     const handleNativeBlur = () => {
-      setError(validateValue(node.value));
+      setTouched(true);
     };
 
     node.addEventListener("blur", handleNativeBlur);
@@ -59,16 +50,16 @@ export default function HeaderInput({
   const handleInput = (event: FormEvent<HTMLTextAreaElement>) => {
     const nextValue = event.currentTarget.value;
     onChange(nextValue);
-    if (error) {
-      setError(validateValue(nextValue));
-    }
   };
 
   const handleClear = () => {
     onChange("");
-    setError(null);
+    setTouched(true);
   };
 
+  const isOversized = value.length > MAX_HEADER_INPUT_BYTES;
+  const shouldShowError = touched || isOversized;
+  const error = shouldShowError ? validateHeaderInput(value) : null;
   const hasError = Boolean(error);
   const hintText = `${formatCount(value.length)} / 1MB`;
 

frontend/src/lib/header-validation.ts

@@ -0,0 +1,13 @@
+export const MAX_HEADER_INPUT_BYTES = 1024 * 1024;
+
+export const validateHeaderInput = (value: string): string | null => {
+  if (value.length > MAX_HEADER_INPUT_BYTES) {
+    return "Header input exceeds the 1 MB limit.";
+  }
+
+  if (value.trim().length === 0) {
+    return "Header input cannot be empty.";
+  }
+
+  return null;
+};