add stable media support and sync skillhub UI

web/app/api/auth/login/route.ts

@@ -0,0 +1,77 @@
+import { NextResponse } from "next/server";
+import {
+  SESSION_COOKIE_NAME,
+  type LoginResponse,
+  popiartFetchEnvelope,
+} from "@/lib/popiart-api";
+
+export async function POST(request: Request) {
+  let body: { key?: string } = {};
+
+  try {
+    body = (await request.json()) as { key?: string };
+  } catch {
+    body = {};
+  }
+
+  const key = body.key?.trim();
+  if (!key) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: {
+          code: "VALIDATION_ERROR",
+          message: "key is required",
+        },
+      },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const { response, payload } = await popiartFetchEnvelope<LoginResponse>("/auth/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ key }),
+    });
+
+    const proxyResponse = NextResponse.json(
+      payload ?? {
+        ok: false,
+        error: {
+          code: "SERVER_ERROR",
+          message: "invalid response from popiartServer",
+        },
+      },
+      { status: response.status },
+    );
+
+    if (response.ok && payload?.ok && payload.data?.token) {
+      proxyResponse.cookies.set({
+        name: SESSION_COOKIE_NAME,
+        value: payload.data.token,
+        httpOnly: true,
+        sameSite: "lax",
+        secure: process.env.NODE_ENV === "production",
+        path: "/",
+        maxAge: 60 * 60 * 24 * 7,
+      });
+    }
+
+    return proxyResponse;
+  } catch (error) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: {
+          code: "SERVER_ERROR",
+          message: "failed to reach popiartServer",
+          details: error instanceof Error ? error.message : String(error),
+        },
+      },
+      { status: 502 },
+    );
+  }
+}

web/app/api/auth/logout/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+import {
+  SESSION_COOKIE_NAME,
+  popiartFetchEnvelope,
+} from "@/lib/popiart-api";
+
+export async function POST() {
+  const cookieStore = await cookies();
+  const token = cookieStore.get(SESSION_COOKIE_NAME)?.value;
+
+  try {
+    if (token) {
+      await popiartFetchEnvelope<{ logged_out: boolean }>("/auth/logout", {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+    }
+  } catch {
+    // Clear the local session even if the upstream logout call fails.
+  }
+
+  const response = NextResponse.json({
+    ok: true,
+    data: {
+      logged_out: true,
+    },
+  });
+
+  response.cookies.set({
+    name: SESSION_COOKIE_NAME,
+    value: "",
+    httpOnly: true,
+    sameSite: "lax",
+    secure: process.env.NODE_ENV === "production",
+    path: "/",
+    maxAge: 0,
+  });
+
+  return response;
+}