huskies: merge 643_story_web_ui_consumer_for_the_unified_status_broadcaster

frontend/src/components/SettingsPage.tsx

@@ -64,7 +64,13 @@ interface TextFieldProps {
 	placeholder?: string;
 }
 
-function TextField({ label, description, value, onChange, placeholder }: TextFieldProps) {
+function TextField({
+	label,
+	description,
+	value,
+	onChange,
+	placeholder,
+}: TextFieldProps) {
 	return (
 		<div style={fieldStyle}>
 			<label style={labelStyle}>{label}</label>
@@ -90,7 +96,14 @@ interface NumberFieldProps {
 	placeholder?: string;
 }
 
-function NumberField({ label, description, value, onChange, min, placeholder }: NumberFieldProps) {
+function NumberField({
+	label,
+	description,
+	value,
+	onChange,
+	min,
+	placeholder,
+}: NumberFieldProps) {
 	return (
 		<div style={fieldStyle}>
 			<label style={labelStyle}>{label}</label>
@@ -122,7 +135,12 @@ interface CheckboxFieldProps {
 	onChange: (v: boolean) => void;
 }
 
-function CheckboxField({ label, description, checked, onChange }: CheckboxFieldProps) {
+function CheckboxField({
+	label,
+	description,
+	checked,
+	onChange,
+}: CheckboxFieldProps) {
 	return (
 		<div style={fieldStyle}>
 			{description && <span style={descStyle}>{description}</span>}
@@ -152,9 +170,13 @@ const QA_MODES = ["server", "agent", "human"] as const;
 /** Settings page — form-based editor for project.toml scalar settings. */
 export function SettingsPage({ onBack }: SettingsPageProps) {
 	const [settings, setSettings] = useState<ProjectSettings | null>(null);
-	const [status, setStatus] = useState<"idle" | "loading" | "saving" | "saved" | "error">("loading");
+	const [status, setStatus] = useState<
+		"idle" | "loading" | "saving" | "saved" | "error"
+	>("loading");
 	const [errorMsg, setErrorMsg] = useState<string | null>(null);
-	const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
+	const [validationErrors, setValidationErrors] = useState<
+		Record<string, string>
+	>({});
 
 	useEffect(() => {
 		settingsApi
@@ -251,7 +273,9 @@ export function SettingsPage({ onBack }: SettingsPageProps) {
 				>
 					← Back
 				</button>
-				<span style={{ fontWeight: 700, fontSize: "1em" }}>Project Settings</span>
+				<span style={{ fontWeight: 700, fontSize: "1em" }}>
+					Project Settings
+				</span>
 			</div>
 
 			{/* Body */}
@@ -284,8 +308,8 @@ export function SettingsPage({ onBack }: SettingsPageProps) {
 							<div style={fieldStyle}>
 								<label style={labelStyle}>Default QA Mode</label>
 								<span style={descStyle}>
-									How stories are QA-reviewed after the coder stage.
-									Default: server.
+									How stories are QA-reviewed after the coder stage. Default:
+									server.
 								</span>
 								<select
 									value={s.default_qa}
@@ -346,9 +370,7 @@ export function SettingsPage({ onBack }: SettingsPageProps) {
 								label="Base Branch"
 								description="Overrides auto-detection of the merge target branch (e.g. main, master, develop)."
 								value={s.base_branch ?? ""}
-								onChange={(v) =>
-									patch({ base_branch: v.trim() || null })
-								}
+								onChange={(v) => patch({ base_branch: v.trim() || null })}
 								placeholder="e.g. master"
 							/>
 						</div>
@@ -431,11 +453,9 @@ export function SettingsPage({ onBack }: SettingsPageProps) {
 									padding: "8px 24px",
 									borderRadius: "6px",
 									border: "none",
-									background:
-										status === "saved" ? "#1a5c2a" : "#2563eb",
+									background: status === "saved" ? "#1a5c2a" : "#2563eb",
 									color: "#fff",
-									cursor:
-										status === "saving" ? "not-allowed" : "pointer",
+									cursor: status === "saving" ? "not-allowed" : "pointer",
 									fontSize: "0.9em",
 									fontWeight: 600,
 									opacity: status === "saving" ? 0.7 : 1,