wire profile components, login/register routes, spec-driven auth

- src/main.jsx: add /login, /register, /profile/* routes; wire
  profileComponents from react-auth; pass basePath to Admin
- src/Header.tsx: profile button nav to /profile/me; Login to /login
- src/openapi-config.ts: wire getToken and profileComponents
- react-auth local: sync ProfileCreate, ProfileEdit, ProfileView
- react-openapi local: sync all auth + x-profile changes
  (AppProvider, Admin, ProfileRoutes, SideMenu, types, hooks, etc.)

react-openapi/src/components/Admin.tsx

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Alert } from "@mui/material";
 import { useAppContext } from "../context/AppContext";
 import { Layout } from "./Layout";
 import { ResourceList } from "./ResourceList";
 import { ResourceForm } from "./ResourceForm";
 import { ResourceDetail } from "./ResourceDetail";
 import { ValidationAlert } from "./ValidationAlert";
+import { getApi } from "../hooks/useApi";
 
-interface AdminProps {
+export interface AdminProps {
   basePath: string;
 }
 
@@ -42,7 +43,8 @@ export function Admin({ basePath }: AdminProps) {
       {warnings.length > 0 && <ValidationAlert errors={[]} warnings={warnings} />}
       <Layout resources={topLevel} basePath={basePath}>
         <Routes>
-          <Route index element={<Navigate to={`${basePath}/${topLevel[0].name}`} replace />} />
+          <Route index element={<Navigate to={`${basePath}/${topLevel[0]?.name ?? "profile"}`} replace />} />
+
           {topLevel.map((r) => (
             <React.Fragment key={r.name}>
               <Route path={r.name} element={<ResourceList resource={r} basePath={basePath} />} />
@@ -60,3 +62,174 @@ export function Admin({ basePath }: AdminProps) {
     </>
   );
 }
+
+export interface ProfileRoute {
+  path: string;
+  method: string;
+  operationId: string;
+  summary?: string;
+}
+
+/** Derive a friendly profile route path from the operation's spec path.
+ *  e.g. "/users/me" → "me", "/users/me/" → "me" */
+function friendlyProfilePath(specPath: string): string {
+  return specPath.replace(/^\/[^/]+\/?/, "").replace(/\/+$/, "");
+}
+
+export function ProfileRoutes() {
+  const { profileOperations, profileComponents } = useAppContext();
+  const ops = profileOperations;
+  const getOp = ops.find((o) => o.method === "GET");
+
+  return (
+    <Routes>
+      <Route path=":username" element={<Navigate to="me" replace />} />
+      {ops.map((op) => {
+        const basePath = friendlyProfilePath(op.path);
+        let Component: React.ComponentType<any> | undefined;
+        let mode: "view" | "create" | "edit" | undefined;
+
+        if (op.method === "GET" && profileComponents.view) {
+          Component = profileComponents.view;
+          mode = "view";
+        } else if (op.method === "POST" && profileComponents.create) {
+          Component = profileComponents.create;
+          mode = "create";
+        } else if ((op.method === "PUT" || op.method === "PATCH") && profileComponents.edit) {
+          Component = profileComponents.edit;
+          mode = "edit";
+        }
+
+        if (!Component || !mode) return null;
+
+        const routePath = mode === "view" ? basePath : `${basePath}/edit`;
+
+        return (
+          <Route
+            key={op.operationId}
+            path={routePath}
+            element={
+              <ProfileComponentWrapper
+                Component={Component}
+                mode={mode}
+                operation={op}
+                getOperation={getOp}
+              />
+            }
+          />
+        );
+      })}
+    </Routes>
+  );
+}
+
+function ProfileComponentWrapper({
+  Component,
+  mode,
+  operation,
+  getOperation,
+}: {
+  Component: React.ComponentType<any>;
+  mode: "view" | "create" | "edit";
+  operation: { path: string; method: string };
+  getOperation?: { path: string };
+}) {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchPath = getOperation?.path ?? operation.path;
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await getApi().get(fetchPath);
+      setData(res.data);
+    } catch (e: any) {
+      setError(e.response?.data?.detail ?? e.message ?? "Failed to load profile");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (mode !== "create") {
+      fetchData();
+    }
+  }, [fetchPath, mode]);
+
+  const handleSubmit = async (formData: Record<string, any>) => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === "create") {
+        await getApi().post(operation.path, formData);
+      } else {
+        await getApi()({ method: operation.method.toLowerCase(), url: operation.path, data: formData });
+      }
+      // Navigate back to the base profile view path
+      const base = friendlyProfilePath(operation.path);
+      window.history.pushState(null, "", `/${base}`);
+      window.location.reload();
+    } catch (e: any) {
+      setError(e.response?.data?.detail ?? e.message ?? "Operation failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading && !data && mode !== "create") {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error && !data && mode !== "create") {
+    return (
+      <Box sx={{ maxWidth: 480, mx: "auto", mt: 4 }}>
+        <Alert severity="error">{error}</Alert>
+      </Box>
+    );
+  }
+
+  const props: Record<string, any> = {};
+
+  if (mode === "view") {
+    if (data) {
+      props.name = data.name;
+      props.username = data.username;
+      props.email = data.email;
+    }
+    props.onEdit = () => {
+      window.history.pushState(null, "", `/profile/me/edit`);
+      window.location.reload();
+    };
+    props.loading = loading;
+  }
+
+  if (mode === "create") {
+    props.defaultUsername = data?.username;
+    props.defaultEmail = data?.email;
+    props.onBack = () => window.history.back();
+    props.onSubmit = handleSubmit;
+    props.loading = loading;
+    props.error = error;
+  }
+
+  if (mode === "edit") {
+    if (data) {
+      props.name = data.name;
+      props.username = data.username;
+      props.email = data.email;
+    }
+    props.onBack = () => window.history.back();
+    props.onSubmit = handleSubmit;
+    props.loading = loading;
+    props.error = error;
+  }
+
+  return <Component {...props} />;
+}