Run the SPA without a backend (local mode)

The app can now operate backend-agnostically: a production build still
asks on first start, but /setup also offers 'Continue without a backend'
(stored as the sentinel 'none'), and the shell adapts:

- Local mode shows only the e621-facing pages: Online (search, post view,
  favorites, blacklist editor, direct downloads) and Pools. Library,
  uploads, duplicates, stats, users, follows and similarity are hidden
  from the nav and palette and render a 'backend needed' state when
  reached directly; /detail/<e621 id> still works while /detail/J-x asks
  for a backend.
- e621 credentials are stored in this browser (j621.e621) and the
  Account page becomes a credentials-only screen; the store reads/writes
  locally instead of /api/auth/e621/.
- The header replaces the status pill and login/user area with an e621
  credentials button and a 'Setup Backend' button; the footer shows
  'Local mode — e621 features only' with the same entry point.
- In-library lookups (badges/browse markers) are skipped without a
  backend; 'Download to client' links straight to the e621 file instead
  of the backend proxy; follow buttons and palette follow toggles are
  hidden; api() fails fast with a clear message if something slips
  through.

Mode logic lives in lib/backend.ts (URL / '' same-origin / 'none') with
its matrix verified in Node; tsc, oxlint and the build are clean.

frontend/src/components/AppShell.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { LogOut, Menu } from "lucide-react";
+import { Cable, KeyRound, LogOut, Menu } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import {
   Link,
@@ -16,6 +16,7 @@ import { StatusFooter } from "@/components/StatusFooter";
 import { StatusPill } from "@/components/StatusPill";
 import { Toasts } from "@/components/Toasts";
 import { api } from "@/lib/api";
+import { hasBackend } from "@/lib/backend";
 import { cn } from "@/lib/cn";
 import type { SystemStatus } from "@/lib/types";
 import { useAuth } from "@/store/auth";
@@ -31,6 +32,7 @@ export function AppShell() {
   const navigate = useNavigate();
   const [paletteOpen, setPaletteOpen] = useState(false);
   const landingApplied = useRef(false);
+  const backend = hasBackend();
 
   useEffect(() => {
     void loadE621();
@@ -50,6 +52,7 @@ export function AppShell() {
     queryFn: () => api<SystemStatus>("/api/status/"),
     refetchInterval: 5_000,
     staleTime: 4_000,
+    enabled: backend,
   });
   const status = statusQuery.data;
 
@@ -78,19 +81,19 @@ export function AppShell() {
     location.pathname === "/" || location.pathname === "/online";
 
   const navItems = [
-    { to: "/", label: "Library" },
+    ...(backend ? [{ to: "/", label: "Library" }] : []),
     { to: "/online", label: "Online" },
     { to: "/pools", label: "Pools" },
-    ...(user ? [{ to: "/followed", label: "Followed" }] : []),
-    ...(user ? [{ to: "/similar", label: "Similar" }] : []),
-    ...(user?.can_upload
+    ...(backend && user ? [{ to: "/followed", label: "Followed" }] : []),
+    ...(backend && user ? [{ to: "/similar", label: "Similar" }] : []),
+    ...(backend && user?.can_upload
       ? [
           { to: "/upload", label: "Upload" },
           { to: "/duplicates", label: "Duplicates" },
           { to: "/delete", label: "Delete" },
         ]
       : []),
-    ...(user && (user.is_staff || user.is_superuser || user.role === "staff")
+    ...(backend && user && (user.is_staff || user.is_superuser || user.role === "staff")
       ? [
           { to: "/stats", label: "Stats" },
           { to: "/users", label: "Users" },
@@ -147,45 +150,66 @@ export function AppShell() {
           </nav>
 
           <div className="ml-auto flex items-center gap-3">
-            <StatusPill status={status} />
-            {user ? (
+            {backend ? (
+              <>
+                <StatusPill status={status} />
+                {user ? (
+                  <>
+                    <Link
+                      to="/account"
+                      title="Account settings"
+                      className="flex items-center gap-2 transition hover:opacity-80"
+                    >
+                      {user.avatar_url ? (
+                        <img
+                          src={user.avatar_url}
+                          alt={user.username}
+                          className="h-7 w-7 rounded-full border border-ctp-surface1 object-cover"
+                        />
+                      ) : (
+                        <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
+                          {user.username.slice(0, 1).toUpperCase()}
+                        </span>
+                      )}
+                      <span className="hidden text-sm text-ctp-subtext1 sm:block">
+                        {user.username}
+                      </span>
+                    </Link>
+                    <button
+                      type="button"
+                      onClick={() => void logout()}
+                      title="Log out"
+                      className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+                    >
+                      <LogOut className="h-4 w-4" />
+                    </button>
+                  </>
+                ) : (
+                  <Link
+                    to="/login"
+                    className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
+                  >
+                    Log in
+                  </Link>
+                )}
+              </>
+            ) : (
               <>
                 <Link
                   to="/account"
-                  title="Account settings"
-                  className="flex items-center gap-2 transition hover:opacity-80"
-                >
-                  {user.avatar_url ? (
-                    <img
-                      src={user.avatar_url}
-                      alt={user.username}
-                      className="h-7 w-7 rounded-full border border-ctp-surface1 object-cover"
-                    />
-                  ) : (
-                    <span className="flex h-7 w-7 items-center justify-center rounded-full bg-ctp-surface1 font-mono text-xs font-semibold text-ctp-lavender">
-                      {user.username.slice(0, 1).toUpperCase()}
-                    </span>
-                  )}
-                  <span className="hidden text-sm text-ctp-subtext1 sm:block">
-                    {user.username}
-                  </span>
-                </Link>
-                <button
-                  type="button"
-                  onClick={() => void logout()}
-                  title="Log out"
+                  title="e621 credentials (stored in this browser)"
                   className="rounded-md p-1.5 text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
                 >
-                  <LogOut className="h-4 w-4" />
-                </button>
+                  <KeyRound className="h-4 w-4" />
+                </Link>
+                <Link
+                  to="/setup"
+                  className="inline-flex items-center gap-1.5 rounded-md border border-ctp-surface1 bg-ctp-surface0 px-3 py-1.5 text-sm font-medium text-ctp-text transition hover:bg-ctp-surface1"
+                >
+                  <Cable className="h-3.5 w-3.5" />
+                  Setup Backend
+                </Link>
               </>
-            ) : (
-              <Link
-                to="/login"
-                className="rounded-md px-3 py-1.5 text-sm font-medium text-ctp-subtext0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
-              >
-                Log in
-              </Link>
             )}
           </div>
         </div>
@@ -196,9 +220,12 @@ export function AppShell() {
       </main>
 
       <StatusFooter
+        backend={backend}
         status={status}
         staff={Boolean(
-          user && (user.is_staff || user.is_superuser || user.role === "staff"),
+          backend &&
+            user &&
+            (user.is_staff || user.is_superuser || user.role === "staff"),
         )}
       />
       <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />