fix: 2FA login blocker, OpenAPI complete, webhook delivery UI, runtime panel generalized

1. TwoFactorChallenge page (login blocker fixed)
   - Full-screen /2fa-challenge route — outside Layout, no sidebar
   - TOTP code entry (6-digit, numeric keyboard) + backup code toggle
   - Lockout state with clear messaging (10 min, too-many-attempts)
   - Attempt counter shown after first wrong code
   - Back to sign in + switch account links
   - Calls POST /api/auth/2fa/complete, redirects to ?next= on success
   - Registered in App.tsx OUTSIDE the Layout Switch (correct for auth flows)

2. OpenAPI spec — full coverage (was 2833 lines / ~50% routes, now 3663 lines / ~100%)
   - 27 missing path definitions added:
     tokens/{id} DELETE, auth/2fa/* (status/disable/backup/complete),
     nlpl/* (runtime-info, start/stop/status/logs), admin/processes,
     builds/{buildId} GET/DELETE, redirects/{ruleId} DELETE,
     headers/{headerId} DELETE, forms export/patch/delete,
     invitations/{token} GET + revoke DELETE,
     analytics/referrers, stats/hourly, nodes/{id}/update-capacity,
     env/{key} DELETE, transfer/accept, webhooks/config + test,
     .well-known/acme-challenge/{token}, storage/* paths, sites/serve/*
   - 4 new tags added: nlpl, builds, forms, tls, storage
   - Wildcard paths fixed to OpenAPI 3.1 syntax ({path*})

3. Webhook delivery history UI (WebhooksPage.tsx)
   - DeliveryRow component: expandable row showing status, event, HTTP code,
     duration, retry badge, relative timestamp
   - Expanded state: request payload (JSON) + response body (truncated at 2000 chars)
   - Empty state with hint when hook selected but no deliveries yet
   - Refresh button to re-poll deliveries
   - formatDistanceToNow timestamps replacing raw toLocaleTimeString
   - RotateCcw icon on retry badges

4. Runtime panel generalized (NlplPanel.tsx + DeploySite.tsx)
   - RUNTIME_META table maps nlpl/dynamic/node/python → label, entry default, icon
   - Entry file defaults: server.nlpl / server.js / server.py per runtime
   - DeploySite condition extended to [nlpl, dynamic, node, python]
   - Toast message uses meta.label (NLPL / Node.js / Python)

5. SiteForm type selector
   - Static (HTML/CSS/JS), NLPL Application, Node.js Application
     replacing the vague Static/Dynamic App labels

Author: The No Hands Company

artifacts/federated-hosting/src/App.tsx

@@ -27,6 +27,7 @@ const ApiDocs        = lazy(() => import("@/pages/ApiDocs"));
 const SiteSettings   = lazy(() => import("@/pages/SiteSettings"));
 const UsageDashboard      = lazy(() => import("@/pages/UsageDashboard"));
 const TwoFactorSettings   = lazy(() => import("@/pages/TwoFactorSettings"));
+const TwoFactorChallenge  = lazy(() => import("@/pages/TwoFactorChallenge"));
 const AcceptInvitation    = lazy(() => import("@/pages/AcceptInvitation"));
 const AccountSettings     = lazy(() => import("@/pages/AccountSettings"));
 const FormInbox           = lazy(() => import("@/pages/FormInbox"));
@@ -62,10 +63,16 @@ const queryClient = new QueryClient({
 
 function Router() {
   return (
-    <Layout>
-      <ErrorBoundary>
-        <Suspense fallback={<LoadingState />}>
-          <Switch>
+    <Switch>
+      {/* Full-screen auth flows — no sidebar/nav */}
+      <Route path="/2fa-challenge" component={TwoFactorChallenge} />
+
+      {/* All other pages inside the shell layout */}
+      <Route>
+        <Layout>
+          <ErrorBoundary>
+            <Suspense fallback={<LoadingState />}>
+              <Switch>
             <Route path="/" component={Dashboard} />
             <Route path="/nodes" component={NodeList} />
             <Route path="/nodes/:id" component={NodeDetail} />
@@ -89,10 +96,12 @@ function Router() {
             <Route path="/sites/:id/builds" component={BuildHistory} />
             <Route path="/sites/:id/webhooks" component={WebhooksPage} />
             <Route component={NotFound} />
-          </Switch>
-        </Suspense>
-      </ErrorBoundary>
-    </Layout>
+            </Switch>
+          </Suspense>
+        </ErrorBoundary>
+      </Layout>
+      </Route>
+    </Switch>
   );
 }
 

artifacts/federated-hosting/src/components/NlplPanel.tsx

@@ -37,7 +37,12 @@ interface RuntimeInfo {
   installInstructions: string | null;
 }
 
-interface NlplPanelProps {
+const RUNTIME_META: Record<string, { label: string; entryDefault: string; description: string; icon: string }> = {
+  nlpl:    { label: "NLPL",    entryDefault: "server.nlpl", description: "NLPL interpreted application", icon: "⚡" },
+  dynamic: { label: "Node.js", entryDefault: "server.js",   description: "Node.js HTTP server",          icon: "🟢" },
+  node:    { label: "Node.js", entryDefault: "server.js",   description: "Node.js HTTP server",          icon: "🟢" },
+  python:  { label: "Python",  entryDefault: "server.py",   description: "Python HTTP server",           icon: "🐍" },
+};
   siteId: number;
   siteDomain: string;
   siteType: string;
@@ -83,7 +88,7 @@ export function NlplPanel({ siteId, siteDomain, siteType }: NlplPanelProps) {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [logsOpen, setLogsOpen] = useState(false);
-  const [entryFile, setEntryFile] = useState("server.nlpl");
+  const [entryFile, setEntryFile] = useState(meta.entryDefault);
   const logEndRef = useRef<HTMLDivElement>(null);
 
   // ── Status polling ─────────────────────────────────────────────────────────
@@ -134,7 +139,7 @@ export function NlplPanel({ siteId, siteDomain, siteType }: NlplPanelProps) {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["nlpl-status", siteId] });
-      toast({ title: "Process started", description: `${siteType.toUpperCase()} server is starting up.` });
+      toast({ title: "Process started", description: `${meta.label} server is starting up.` });
     },
     onError: (err: Error) => {
       toast({ title: "Failed to start", description: err.message, variant: "destructive" });
@@ -163,6 +168,7 @@ export function NlplPanel({ siteId, siteDomain, siteType }: NlplPanelProps) {
   });
 
   const cfg = STATUS_CONFIG[status?.status ?? "stopped"];
+  const meta = RUNTIME_META[siteType] ?? RUNTIME_META.nlpl;
 
   return (
     <Card className="border-white/8">
@@ -174,9 +180,9 @@ export function NlplPanel({ siteId, siteDomain, siteType }: NlplPanelProps) {
             </div>
             <div>
               <CardTitle className="text-white text-sm">
-                {siteType === "nlpl" ? "NLPL" : siteType === "node" ? "Node.js" : "Python"} Server
+                {meta.icon} {meta.label} Server
               </CardTitle>
-              <CardDescription className="text-xs">Persistent process — handles HTTP requests</CardDescription>
+              <CardDescription className="text-xs">{meta.description} — handles HTTP requests</CardDescription>
             </div>
           </div>
 

artifacts/federated-hosting/src/components/forms/SiteForm.tsx

@@ -151,8 +151,9 @@ export function SiteForm({ onSuccess, initialData }: SiteFormProps) {
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
-                    <SelectItem value="static">Static</SelectItem>
-                    <SelectItem value="dynamic">Dynamic App</SelectItem>
+                    <SelectItem value="static">Static (HTML/CSS/JS)</SelectItem>
+                    <SelectItem value="nlpl">NLPL Application</SelectItem>
+                    <SelectItem value="dynamic">Node.js Application</SelectItem>
                     <SelectItem value="blog">Blog</SelectItem>
                     <SelectItem value="portfolio">Portfolio</SelectItem>
                     <SelectItem value="other">Other</SelectItem>

artifacts/federated-hosting/src/pages/DeploySite.tsx

@@ -391,7 +391,7 @@ export default function DeploySite() {
 
         <div className="space-y-4">
           {/* NLPL / dynamic site process management panel */}
-          {(site.siteType === "nlpl" || site.siteType === "dynamic") && (
+          {(["nlpl", "dynamic", "node", "python"] as const).includes(site.siteType as any) && (
             <NlplPanel siteId={siteId} siteDomain={site.domain} siteType={site.siteType} />
           )}
 

artifacts/federated-hosting/src/pages/TwoFactorChallenge.tsx

@@ -0,0 +1,210 @@
+import { useState, useRef, useEffect } from "react";
+import { useLocation } from "wouter";
+import { motion } from "framer-motion";
+import { Shield, KeyRound, AlertTriangle, Loader2, ArrowLeft, HelpCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, "");
+
+type Step = "code" | "backup" | "locked";
+
+export default function TwoFactorChallenge() {
+  const [, setLocation] = useLocation();
+  const [step, setStep] = useState<Step>("code");
+  const [code, setCode] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [attemptsLeft, setAttemptsLeft] = useState<number | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Parse the ?next= redirect target, default to /
+  const nextUrl = (() => {
+    try {
+      const p = new URLSearchParams(window.location.search);
+      const n = p.get("next") ?? "/";
+      // Only allow relative URLs for security
+      return n.startsWith("/") ? n : "/";
+    } catch {
+      return "/";
+    }
+  })();
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [step]);
+
+  async function submit() {
+    const trimmed = code.replace(/\s/g, "");
+    if (!trimmed || trimmed.length < 6) {
+      setError("Enter a 6-digit code from your authenticator app.");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`${BASE}/api/auth/2fa/complete`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code: trimmed }),
+      });
+
+      const body = await res.json() as {
+        authenticated?: boolean;
+        method?: string;
+        message?: string;
+        code?: string;
+        remaining?: number;
+      };
+
+      if (res.ok && body.authenticated) {
+        // Full session established — redirect to intended destination
+        setLocation(nextUrl);
+        return;
+      }
+
+      if (body.code === "TOTP_LOCKED") {
+        setStep("locked");
+        return;
+      }
+
+      if (typeof body.remaining === "number") {
+        setAttemptsLeft(body.remaining);
+      }
+
+      setError(body.message ?? "Invalid code. Please try again.");
+      setCode("");
+      inputRef.current?.focus();
+    } catch {
+      setError("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleKey(e: React.KeyboardEvent) {
+    if (e.key === "Enter") submit();
+  }
+
+  // Format code input: insert space after digit 3 for readability (123 456)
+  function handleCodeChange(val: string) {
+    const digits = val.replace(/\D/g, "").slice(0, step === "backup" ? 16 : 6);
+    setCode(digits);
+    setError(null);
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="w-full max-w-sm"
+      >
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex w-14 h-14 rounded-2xl bg-primary/10 border border-primary/20 items-center justify-center mb-4">
+            {step === "locked"
+              ? <AlertTriangle className="w-7 h-7 text-red-400" />
+              : <Shield className="w-7 h-7 text-primary" />}
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight">
+            {step === "code" && "Two-factor authentication"}
+            {step === "backup" && "Use a backup code"}
+            {step === "locked" && "Account temporarily locked"}
+          </h1>
+          <p className="text-muted-foreground text-sm mt-2">
+            {step === "code" && "Enter the 6-digit code from your authenticator app."}
+            {step === "backup" && "Enter one of the backup codes you saved when setting up 2FA."}
+            {step === "locked" && "Too many failed attempts. Try again in 10 minutes."}
+          </p>
+        </div>
+
+        {step === "locked" ? (
+          <div className="space-y-4">
+            <div className="bg-red-400/10 border border-red-400/20 rounded-2xl p-4 text-center">
+              <p className="text-red-400 text-sm">
+                Your account has been temporarily locked due to repeated failed attempts.
+                This protects against brute-force attacks.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              className="w-full border-white/10 text-muted-foreground hover:text-white"
+              onClick={() => window.location.href = "/api/auth/logout"}
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Back to sign in
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {/* Code input */}
+            <div>
+              <input
+                ref={inputRef}
+                type={step === "backup" ? "text" : "number"}
+                inputMode="numeric"
+                autoComplete={step === "backup" ? "off" : "one-time-code"}
+                value={code}
+                onChange={(e) => handleCodeChange(e.target.value)}
+                onKeyDown={handleKey}
+                placeholder={step === "backup" ? "BACKUP-CODE" : "000000"}
+                className={cn(
+                  "w-full bg-muted/20 border rounded-2xl px-5 py-4 text-white text-2xl font-mono tracking-[0.4em] text-center placeholder:text-muted-foreground/40 placeholder:tracking-normal focus:outline-none transition-colors",
+                  error
+                    ? "border-red-400/50 focus:border-red-400"
+                    : "border-white/10 focus:border-primary/50",
+                )}
+              />
+              {error && (
+                <motion.p
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="text-red-400 text-xs mt-2 text-center flex items-center justify-center gap-1.5"
+                >
+                  <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+                  {error}
+                </motion.p>
+              )}
+              {attemptsLeft !== null && !error && (
+                <p className="text-amber-400 text-xs mt-2 text-center">
+                  {attemptsLeft} attempt{attemptsLeft !== 1 ? "s" : ""} remaining before lockout.
+                </p>
+              )}
+            </div>
+
+            {/* Submit */}
+            <Button
+              className="w-full bg-primary text-black hover:bg-primary/90 font-semibold h-12 text-base"
+              onClick={submit}
+              disabled={loading || code.length < 6}
+            >
+              {loading
+                ? <><Loader2 className="w-4 h-4 mr-2 animate-spin" />Verifying…</>
+                : <><KeyRound className="w-4 h-4 mr-2" />Verify</>}
+            </Button>
+
+            {/* Switch between TOTP and backup */}
+            <button
+              className="w-full text-sm text-muted-foreground hover:text-white transition-colors flex items-center justify-center gap-1.5 py-1"
+              onClick={() => { setStep(step === "code" ? "backup" : "code"); setCode(""); setError(null); }}
+            >
+              <HelpCircle className="w-3.5 h-3.5" />
+              {step === "code" ? "Use a backup code instead" : "Use authenticator app instead"}
+            </button>
+
+            <button
+              className="w-full text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors"
+              onClick={() => window.location.href = "/api/auth/logout"}
+            >
+              Sign in with a different account
+            </button>
+          </div>
+        )}
+      </motion.div>
+    </div>
+  );
+}