feat(ui): reconcile backup UI changes with current routing and interaction features

ui/src/pages/Auth.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "@/lib/router";
 import { authApi } from "../api/auth";
 import { queryKeys } from "../lib/queryKeys";
 import { Button } from "@/components/ui/button";
+import { AsciiArtAnimation } from "@/components/AsciiArtAnimation";
+import { Sparkles } from "lucide-react";
 
 type AuthMode = "sign_in" | "sign_up";
 
@@ -59,83 +61,102 @@ export function AuthPage() {
     (mode === "sign_in" || name.trim().length > 0);
 
   if (isSessionLoading) {
-    return <div className="mx-auto max-w-md py-16 text-sm text-muted-foreground">Loading...</div>;
+    return (
+      <div className="fixed inset-0 flex items-center justify-center">
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      </div>
+    );
   }
 
   return (
-    <div className="mx-auto max-w-md py-10">
-      <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
-        <h1 className="text-xl font-semibold">
-          {mode === "sign_in" ? "Sign in to Paperclip" : "Create your Paperclip account"}
-        </h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          {mode === "sign_in"
-            ? "Use your email and password to access this instance."
-            : "Create an account for this instance. Email confirmation is not required in v1."}
-        </p>
+    <div className="fixed inset-0 flex bg-background">
+      {/* Left half — form */}
+      <div className="w-full md:w-1/2 flex flex-col overflow-y-auto">
+        <div className="w-full max-w-md mx-auto my-auto px-8 py-12">
+          <div className="flex items-center gap-2 mb-8">
+            <Sparkles className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Paperclip</span>
+          </div>
 
-        <form
-          className="mt-5 space-y-3"
-          onSubmit={(event) => {
-            event.preventDefault();
-            mutation.mutate();
-          }}
-        >
-          {mode === "sign_up" && (
-            <label className="block text-sm">
-              <span className="mb-1 block text-muted-foreground">Name</span>
-              <input
-                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-                value={name}
-                onChange={(event) => setName(event.target.value)}
-                autoComplete="name"
-              />
-            </label>
-          )}
-          <label className="block text-sm">
-            <span className="mb-1 block text-muted-foreground">Email</span>
-            <input
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-              type="email"
-              value={email}
-              onChange={(event) => setEmail(event.target.value)}
-              autoComplete="email"
-            />
-          </label>
-          <label className="block text-sm">
-            <span className="mb-1 block text-muted-foreground">Password</span>
-            <input
-              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-              type="password"
-              value={password}
-              onChange={(event) => setPassword(event.target.value)}
-              autoComplete={mode === "sign_in" ? "current-password" : "new-password"}
-            />
-          </label>
-          {error && <p className="text-sm text-destructive">{error}</p>}
-          <Button type="submit" disabled={!canSubmit || mutation.isPending} className="w-full">
-            {mutation.isPending
-              ? "Working..."
-              : mode === "sign_in"
-                ? "Sign In"
-                : "Create Account"}
-          </Button>
-        </form>
+          <h1 className="text-xl font-semibold">
+            {mode === "sign_in" ? "Sign in to Paperclip" : "Create your Paperclip account"}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {mode === "sign_in"
+              ? "Use your email and password to access this instance."
+              : "Create an account for this instance. Email confirmation is not required in v1."}
+          </p>
 
-        <div className="mt-4 text-sm text-muted-foreground">
-          {mode === "sign_in" ? "Need an account?" : "Already have an account?"}{" "}
-          <button
-            type="button"
-            className="font-medium text-foreground underline underline-offset-2"
-            onClick={() => {
-              setError(null);
-              setMode(mode === "sign_in" ? "sign_up" : "sign_in");
+          <form
+            className="mt-6 space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              mutation.mutate();
             }}
           >
-            {mode === "sign_in" ? "Create one" : "Sign in"}
-          </button>
+            {mode === "sign_up" && (
+              <div>
+                <label className="text-xs text-muted-foreground mb-1 block">Name</label>
+                <input
+                  className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                  autoComplete="name"
+                  autoFocus
+                />
+              </div>
+            )}
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">Email</label>
+              <input
+                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                autoComplete="email"
+                autoFocus={mode === "sign_in"}
+              />
+            </div>
+            <div>
+              <label className="text-xs text-muted-foreground mb-1 block">Password</label>
+              <input
+                className="w-full rounded-md border border-border bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                autoComplete={mode === "sign_in" ? "current-password" : "new-password"}
+              />
+            </div>
+            {error && <p className="text-xs text-destructive">{error}</p>}
+            <Button type="submit" disabled={!canSubmit || mutation.isPending} className="w-full">
+              {mutation.isPending
+                ? "Working…"
+                : mode === "sign_in"
+                  ? "Sign In"
+                  : "Create Account"}
+            </Button>
+          </form>
+
+          <div className="mt-5 text-sm text-muted-foreground">
+            {mode === "sign_in" ? "Need an account?" : "Already have an account?"}{" "}
+            <button
+              type="button"
+              className="font-medium text-foreground underline underline-offset-2"
+              onClick={() => {
+                setError(null);
+                setMode(mode === "sign_in" ? "sign_up" : "sign_in");
+              }}
+            >
+              {mode === "sign_in" ? "Create one" : "Sign in"}
+            </button>
+          </div>
         </div>
       </div>
+
+      {/* Right half — ASCII art animation (hidden on mobile) */}
+      <div className="hidden md:block w-1/2 overflow-hidden">
+        <AsciiArtAnimation />
+      </div>
     </div>
   );
 }