feat: implement user profile management and oauth/traefik integration

User Profile (US-004):
- Add authenticated profile endpoints (GET/PUT /users/me)
- Add avatar upload with file validation (PNG/JPEG, max 2MB)
- Create frontend profile page with edit form and avatar upload
- Update app shell to link to profile page

OAuth/Traefik Integration:
- Externalize all Authentik URLs to environment variables
- Add domain configuration (API_DOMAIN, WEB_DOMAIN, AUTHENTIK_DOMAIN)
- Create docker-compose.traefik.yml for reverse proxy deployment
- Update OAuth redirect/callback URLs to use configured domains
- Add VITE_APP_URL for frontend public URL configuration

Quality gates: pytest (50 passed), ruff, mypy, npm test (12 passed), typecheck, lint, build

apps/web/src/api/profile.ts

@@ -0,0 +1,30 @@
+import { apiClient } from "./client";
+import type { SessionUser } from "../types";
+
+export type UserProfile = SessionUser;
+
+export type ProfileUpdatePayload = {
+  name?: string;
+  email?: string;
+};
+
+export const getProfile = async (): Promise<UserProfile> => {
+  const response = await apiClient.get<UserProfile>("/users/me");
+  return response.data;
+};
+
+export const updateProfile = async (payload: ProfileUpdatePayload): Promise<UserProfile> => {
+  const response = await apiClient.put<UserProfile>("/users/me", payload);
+  return response.data;
+};
+
+export const uploadAvatar = async (file: File): Promise<UserProfile> => {
+  const formData = new FormData();
+  formData.append("file", file);
+  const response = await apiClient.post<UserProfile>("/users/me/avatar", formData, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return response.data;
+};

apps/web/src/components/app-shell.tsx

@@ -20,7 +20,9 @@ export const AppShell = () => {
           Headquarter
         </Link>
         <div className="header-actions">
-          <div className="user-chip">{user?.name ?? "User"}</div>
+          <Link className="user-chip" to="/profile">
+            {user?.name ?? "User"}
+          </Link>
           <button
             className="ghost-button"
             onClick={() => {

apps/web/src/pages/profile.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { getProfile, updateProfile, uploadAvatar } from "../api/profile";
+import { useAuth } from "../state/auth";
+import type { UserProfile } from "../api/profile";
+
+type ProfileStatus = "loading" | "ready" | "error" | "saving";
+
+export const ProfilePage = () => {
+  const { refreshSession } = useAuth();
+  const [status, setStatus] = useState<ProfileStatus>("loading");
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const loadProfile = useCallback(async () => {
+    setStatus("loading");
+    setError(null);
+    try {
+      const data = await getProfile();
+      setProfile(data);
+      setName(data.name);
+      setEmail(data.email);
+      setStatus("ready");
+    } catch {
+      setProfile(null);
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProfile();
+  }, [loadProfile]);
+
+  const handleSave = useCallback(async () => {
+    if (!name.trim()) {
+      setError("Name cannot be empty");
+      return;
+    }
+    if (!email.includes("@")) {
+      setError("Please enter a valid email");
+      return;
+    }
+
+    setStatus("saving");
+    setError(null);
+    try {
+      const updated = await updateProfile({ name: name.trim(), email: email.trim() });
+      setProfile(updated);
+      await refreshSession();
+      setStatus("ready");
+    } catch {
+      setError("Failed to update profile");
+      setStatus("ready");
+    }
+  }, [name, email, refreshSession]);
+
+  const handleAvatarChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      if (!file.type.startsWith("image/")) {
+        setError("Please upload an image file (PNG or JPEG)");
+        return;
+      }
+
+      if (file.size > 2 * 1024 * 1024) {
+        setError("File too large. Maximum size is 2MB.");
+        return;
+      }
+
+      setStatus("saving");
+      setError(null);
+      try {
+        const updated = await uploadAvatar(file);
+        setProfile(updated);
+        await refreshSession();
+        setStatus("ready");
+      } catch {
+        setError("Failed to upload avatar");
+        setStatus("ready");
+      }
+    },
+    [refreshSession]
+  );
+
+  const avatarUrl = profile?.avatar_url ?? null;
+
+  return (
+    <section className="stack">
+      <h1>Profile</h1>
+
+      {status === "loading" && <p className="muted">Loading profile...</p>}
+
+      {status === "error" && (
+        <div className="card stack">
+          <p>Failed to load profile</p>
+          <button className="secondary-button" onClick={() => void loadProfile()} type="button">
+            Retry
+          </button>
+        </div>
+      )}
+
+      {(status === "ready" || status === "saving") && profile && (
+        <div className="card stack">
+          <div className="profile-avatar-section">
+            <div className="avatar-preview">
+              {avatarUrl ? (
+                <img alt="Avatar" className="avatar-image" src={avatarUrl} />
+              ) : (
+                <div className="avatar-placeholder">{profile.name.charAt(0).toUpperCase()}</div>
+              )}
+            </div>
+            <button
+              className="secondary-button"
+              disabled={status === "saving"}
+              onClick={() => fileInputRef.current?.click()}
+              type="button"
+            >
+              {status === "saving" ? "Uploading..." : "Change Avatar"}
+            </button>
+            <input
+              accept="image/png,image/jpeg"
+              onChange={handleAvatarChange}
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              type="file"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="profile-name">Name</label>
+            <input
+              disabled={status === "saving"}
+              id="profile-name"
+              onChange={(e) => setName(e.target.value)}
+              type="text"
+              value={name}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="profile-email">Email</label>
+            <input
+              disabled={status === "saving"}
+              id="profile-email"
+              onChange={(e) => setEmail(e.target.value)}
+              type="email"
+              value={email}
+            />
+          </div>
+
+          {error && <p className="error-message">{error}</p>}
+
+          <div className="form-actions">
+            <button
+              className="primary-button"
+              disabled={status === "saving"}
+              onClick={() => void handleSave()}
+              type="button"
+            >
+              {status === "saving" ? "Saving..." : "Save Changes"}
+            </button>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};

apps/web/src/router.tsx

@@ -4,6 +4,7 @@ import { AppShell } from "./components/app-shell";
 import { ProtectedRoute } from "./components/protected-route";
 import { DashboardPage } from "./pages/dashboard";
 import { LoginRedirectPage, NotFoundPage, PlaceholderPage } from "./pages/placeholder";
+import { ProfilePage } from "./pages/profile";
 import { ProjectsPage } from "./pages/projects";
 
 export const AppRouter = () => {
@@ -22,6 +23,7 @@ export const AppRouter = () => {
         <Route path="projects" element={<ProjectsPage />} />
         <Route path="repositories" element={<PlaceholderPage title="Repositories" />} />
         <Route path="ssh-keys" element={<PlaceholderPage title="SSH Keys" />} />
+        <Route path="profile" element={<ProfilePage />} />
         <Route path="settings" element={<PlaceholderPage title="Settings" />} />
       </Route>
       <Route path="/404" element={<NotFoundPage />} />

apps/web/src/types.ts

@@ -2,6 +2,7 @@ export type SessionUser = {
   id: string;
   email: string;
   name: string;
+  avatar_url: string | null;
 };
 
 export type SessionPayload = {