feat: branded login screen in front of Basic Auth

The browser's native Basic Auth prompt can't be restyled — it's chrome UI,
not part of the page. Replace it with Aurum's own login screen: nginx keeps
auth_basic on /api/* (the actual protection, unchanged), but drops it from
the SPA shell (just HTML/JS/CSS, no data) so the app can render its own
branded form instead. On submit the app validates the credentials against a
real protected endpoint, then attaches the resulting Authorization header to
every request itself — sessionStorage-backed, so closing the tab signs out.
Instances with Basic Auth left off (the default) never see this screen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01855PiW5Wd8n4aRW4n9kByY

frontend/src/components/auth/LoginScreen.tsx

@@ -0,0 +1,80 @@
+import { type FormEvent, useState } from "react";
+import { Logo } from "@/components/layout/Logo";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent } from "@/components/ui/Card";
+import { Input, Label } from "@/components/ui/Input";
+import { buildBasicAuthHeader, checkCredentials, setCredentials } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+
+type Status = "idle" | "submitting" | "invalid" | "unreachable";
+
+/** Shown by LoginGate when this instance requires Basic Auth and no valid
+ * credentials are stored yet. Doesn't implement auth itself — it just
+ * collects a username/password, checks them against a real protected
+ * endpoint, and on success hands them to lib/auth.ts's setCredentials(),
+ * which is what every subsequent request actually authenticates with. */
+export function LoginScreen() {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<Status>("idle");
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setStatus("submitting");
+    const result = await checkCredentials(buildBasicAuthHeader(username, password));
+    if (result === "ok") {
+      setCredentials(username, password);
+      return;
+    }
+    setStatus(result === "unauthorized" ? "invalid" : "unreachable");
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-surface-0 px-4">
+      <Card className="w-full max-w-sm">
+        <CardContent className="flex flex-col items-center gap-6 p-6 pt-8 sm:p-8">
+          <div className="flex flex-col items-center gap-1.5">
+            <Logo size={40} />
+            <span className="text-lg font-semibold tracking-tight text-text-primary">Aurum</span>
+            <span className="text-xs text-text-muted">{t("auth.subtitle")}</span>
+          </div>
+
+          <form onSubmit={handleSubmit} className="flex w-full flex-col gap-4">
+            <div>
+              <Label htmlFor="auth-username">{t("auth.usernameLabel")}</Label>
+              <Input
+                id="auth-username"
+                name="username"
+                autoComplete="username"
+                autoFocus
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="auth-password">{t("auth.passwordLabel")}</Label>
+              <Input
+                id="auth-password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                required
+              />
+            </div>
+
+            {status === "invalid" && <p className="text-sm text-danger">{t("auth.errorInvalidCredentials")}</p>}
+            {status === "unreachable" && <p className="text-sm text-danger">{t("auth.errorUnreachable")}</p>}
+
+            <Button type="submit" className="w-full" disabled={status === "submitting"}>
+              {status === "submitting" ? t("auth.submitting") : t("auth.submitButton")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}