feat: introduce CourseEditorLayout and AppHeader, add organization domain migration, and update Docker configurations and auth scripts

.dockerignore

@@ -0,0 +1,13 @@
+target
+**/target
+node_modules
+**/node_modules
+.next
+**/.next
+.git
+**/.git
+.env
+**/.env
+**/.env.local
+**/.env.example
+*.log

clear_session.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+# Script para limpiar tokens antiguos y forzar re-login
+
+echo "=== Limpiando tokens antiguos de localStorage ==="
+echo ""
+echo "Por favor, ejecuta esto en la consola del navegador (F12 → Console):"
+echo ""
+echo "localStorage.removeItem('studio_token');"
+echo "localStorage.removeItem('studio_user');"
+echo "location.reload();"
+echo ""
+echo "Luego vuelve a hacer login con:"
+echo "  Email: juan.allende@gmail.com"
+echo "  Password: password123"

diagnose_auth.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+echo "=== DIAGNÓSTICO DE AUTENTICACIÓN ==="
+echo ""
+
+# 1. Verificar que el backend acepta login
+echo "1. Probando LOGIN directo al backend..."
+RESPONSE=$(curl -s -X POST http://localhost:3001/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"email":"juan.allende@gmail.com","password":"password123"}')
+
+TOKEN=$(echo $RESPONSE | grep -o '"token":"[^"]*"' | cut -d'"' -f4)
+
+if [ -z "$TOKEN" ]; then
+    echo "❌ ERROR: No se pudo obtener token del backend"
+    echo "Respuesta: $RESPONSE"
+    exit 1
+else
+    echo "✅ Token obtenido exitosamente"
+    echo "Token: ${TOKEN:0:50}..."
+fi
+
+echo ""
+echo "2. Probando acceso a /courses CON el token..."
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" \
+  -H "Authorization: Bearer $TOKEN" \
+  http://localhost:3001/courses)
+
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo "✅ Acceso a /courses exitoso (200)"
+else
+    echo "❌ Acceso a /courses falló con código: $HTTP_CODE"
+    # Mostrar respuesta completa
+    curl -s -H "Authorization: Bearer $TOKEN" http://localhost:3001/courses
+fi
+
+echo ""
+echo "3. Verificando JWT_SECRET en el contenedor..."
+JWT_SECRET=$(docker exec openccb-1-cms-service-1 env | grep JWT_SECRET | cut -d'=' -f2)
+echo "JWT_SECRET actual: $JWT_SECRET"
+
+echo ""
+echo "=== INSTRUCCIONES ==="
+echo "Si el test 2 fue exitoso, el problema está en el navegador."
+echo "Ejecuta en la consola del navegador (F12):"
+echo ""
+echo "  localStorage.clear();"
+echo "  location.reload();"
+echo ""
+echo "Luego vuelve a hacer login."

docker-compose.yml

@@ -16,10 +16,12 @@ services:
       dockerfile: services/cms-service/Dockerfile
     environment:
       DATABASE_URL: postgresql://user:password@db:5432/openccb_cms
+      JWT_SECRET: openccb_secret_key_2025_production
     ports:
       - "3001:3001"
     volumes:
       - uploads_data:/app/uploads
+    env_file: .env
     depends_on:
       - db
 
@@ -29,8 +31,10 @@ services:
       dockerfile: services/lms-service/Dockerfile
     environment:
       DATABASE_URL: postgresql://user:password@db:5432/openccb_lms
+      JWT_SECRET: openccb_secret_key_2025_production
     ports:
       - "3002:3002"
+    env_file: .env
     depends_on:
       - db
 
@@ -53,22 +57,24 @@ services:
       NEXT_PUBLIC_LMS_API_URL: http://localhost:3002
 
   whisper:
-    image: fedirz/faster-whisper-server:latest-cuda
+    image: fedirz/faster-whisper-server:latest-cpu
     ports:
       - "8000:8000"
     volumes:
       - whisper_cache:/root/.cache/huggingface
     environment:
-      - WHISPER_MODEL=medium
+      # - WHISPER_MODEL=medium
-      - DEVICE=cuda
+      # - DEVICE=cpu
+      # GPU support commented out for stability if drivers missing
+      - DEVICE=cpu
     # GPU support for RTX 2070 Super
-    deploy:
+    #    deploy:
-      resources:
+    #      resources:
-        reservations:
+    #        reservations:
-          devices:
+    #          devices:
-            - driver: nvidia
+    #            - driver: nvidia
-              count: 1
+    #              count: 1
-              capabilities: [ gpu ]
+    #              capabilities: [ gpu ]
 
   e2e:
     build:

services/cms-service/.dockerignore

@@ -0,0 +1,5 @@
+target
+**/*.rs.bk
+.env
+.env.*
+! .env.example

services/cms-service/migrations/20251230000002_add_organization_domain.sql

@@ -0,0 +1,2 @@
+-- Migration: Add domain to organizations
+ALTER TABLE organizations ADD COLUMN IF NOT EXISTS domain VARCHAR(255) UNIQUE;

services/cms-service/src/handlers.rs

@@ -1474,3 +1474,50 @@ pub async fn update_user(
 
     Ok(StatusCode::OK)
 }
+
+// Organizations Management (Plural/Admin)
+pub async fn get_organizations(
+    claims: common::auth::Claims,
+    State(pool): State<PgPool>,
+) -> Result<Json<Vec<Organization>>, StatusCode> {
+    if claims.role != "admin" {
+        return Err(StatusCode::FORBIDDEN);
+    }
+
+    let orgs = sqlx::query_as::<_, Organization>("SELECT * FROM organizations ORDER BY created_at DESC")
+        .fetch_all(&pool)
+        .await
+        .map_err(|e| {
+            tracing::error!("Failed to fetch organizations: {}", e);
+            StatusCode::INTERNAL_SERVER_ERROR
+        })?;
+
+    Ok(Json(orgs))
+}
+
+pub async fn create_organization(
+    claims: common::auth::Claims,
+    State(pool): State<PgPool>,
+    Json(payload): Json<serde_json::Value>,
+) -> Result<Json<Organization>, StatusCode> {
+    if claims.role != "admin" {
+        return Err(StatusCode::FORBIDDEN);
+    }
+
+    let name = payload.get("name").and_then(|v| v.as_str()).ok_or(StatusCode::BAD_REQUEST)?;
+    let domain = payload.get("domain").and_then(|v| v.as_str());
+
+    let org = sqlx::query_as::<_, Organization>(
+        "INSERT INTO organizations (name, domain) VALUES ($1, $2) RETURNING *"
+    )
+    .bind(name)
+    .bind(domain)
+    .fetch_one(&pool)
+    .await
+    .map_err(|e| {
+        tracing::error!("Failed to create organization: {}", e);
+        StatusCode::INTERNAL_SERVER_ERROR
+    })?;
+
+    Ok(Json(org))
+}

services/cms-service/src/main.rs

@@ -86,6 +86,7 @@ async fn main() {
         .route("/users/{id}", axum::routing::put(handlers::update_user))
         .route("/audit-logs", get(handlers::get_audit_logs))
         .route("/assets/upload", post(handlers::upload_asset))
+        .route("/organizations", get(handlers::get_organizations).post(handlers::create_organization))
         .route("/organization", get(handlers::get_organization))
         .route(
             "/organizations/{id}/logo",

services/lms-service/.dockerignore

@@ -0,0 +1,5 @@
+target
+**/*.rs.bk
+.env
+.env.*
+! .env.example

services/lms-service/src/handlers.rs

@@ -101,6 +101,7 @@ pub async fn register(
             email: user.email,
             full_name: user.full_name,
             role: user.role,
+            organization_id: user.organization_id,
         },
         token,
     }))
@@ -129,6 +130,7 @@ pub async fn login(
             email: user.email,
             full_name: user.full_name,
             role: user.role,
+            organization_id: user.organization_id,
         },
         token,
     }))

shared/common/src/auth.rs

@@ -24,5 +24,6 @@ pub fn create_jwt(user_id: Uuid, organization_id: Uuid, role: &str) -> Result<St
         role: role.to_string(),
     };
 
-    encode(&Header::default(), &claims, &EncodingKey::from_secret("secret".as_ref()))
+    let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+    encode(&Header::default(), &claims, &EncodingKey::from_secret(secret.as_ref()))
 }

shared/common/src/models.rs

@@ -138,6 +138,7 @@ pub struct UserResponse {
 pub struct Organization {
     pub id: Uuid,
     pub name: String,
+    pub domain: Option<String>,
     pub logo_url: Option<String>,
     pub primary_color: Option<String>,
     pub secondary_color: Option<String>,

validate_auth.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+# 1. Verify Juan Login
+echo "Testing Login for juan.allende@gmail.com..."
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" -X POST http://localhost:3001/auth/login \
+  -H "Content-Type: application/json" \
+  -d '{"email":"juan.allende@gmail.com","password":"password123"}')
+
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo "SUCCESS: Login worked for juan.allende@gmail.com with password123"
+else
+    echo "FAIL: Login failed with status $HTTP_CODE"
+    # Print body for debugging
+    curl -s -X POST http://localhost:3001/auth/login \
+      -H "Content-Type: application/json" \
+      -d '{"email":"juan.allende@gmail.com","password":"password123"}'
+    echo ""
+fi
+
+# 2. Verify New Registration
+echo "Testing Registration for newuser@test.com..."
+# Clear if exists
+docker exec openccb-1-db-1 psql -U user -d openccb_cms -c "DELETE FROM users WHERE email='newuser@test.com';" > /dev/null 2>&1
+
+HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" -X POST http://localhost:3001/auth/register \
+  -H "Content-Type: application/json" \
+  -d '{"email":"newuser@test.com","password":"password123","full_name":"New User","role":"instructor"}')
+
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo "SUCCESS: Registration worked for newuser@test.com"
+    # Cleanup
+    docker exec openccb-1-db-1 psql -U user -d openccb_cms -c "DELETE FROM users WHERE email='newuser@test.com';" > /dev/null 2>&1
+else
+    echo "FAIL: Registration failed with status $HTTP_CODE"
+    curl -s -X POST http://localhost:3001/auth/register \
+      -H "Content-Type: application/json" \
+      -d '{"email":"newuser@test.com","password":"password123","full_name":"New User","role":"instructor"}'
+    echo ""
+fi

web/experience/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+.next
+build
+dist
+.git
+.env
+.env.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

web/experience/package-lock.json

@@ -521,7 +521,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -578,7 +577,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
       "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.50.0",
         "@typescript-eslint/types": "8.50.0",
@@ -1053,7 +1051,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1454,7 +1451,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2060,7 +2056,6 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2223,7 +2218,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3520,7 +3514,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4233,7 +4226,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4424,7 +4416,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4436,7 +4427,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -5277,7 +5267,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5435,7 +5424,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

web/experience/src/app/layout.tsx

@@ -3,7 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Link from "next/link";
 import { AuthProvider } from "@/context/AuthContext";
-import { BrandingProvider, useBranding } from "@/context/BrandingContext";
+import { BrandingProvider } from "@/context/BrandingContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -12,35 +12,7 @@ export const metadata: Metadata = {
   description: "Consume high-fidelity educational content with OpenCCB",
 };
 
-function AppHeader() {
+import AppHeader from "@/components/AppHeader";
-  const { branding } = useBranding();
-
-  return (
-    <header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
-      <Link href="/" className="flex items-center gap-3 group">
-        <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative">
-          {branding?.logo_url ? (
-            <img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
-          )}
-        </div>
-        <div className="flex flex-col -gap-1">
-          <span className="font-black text-lg tracking-tighter text-white leading-none">
-            {branding?.name?.toUpperCase() || 'LEARN'}
-          </span>
-          {!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCE</span>}
-        </div>
-      </Link>
-
-      <nav className="hidden md:flex items-center gap-8">
-        <Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catalog</Link>
-        <Link href="#" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">My Learning</Link>
-        <div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
-      </nav>
-    </header>
-  );
-}
 
 export default function RootLayout({
   children,

web/experience/src/components/AppHeader.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Link from "next/link";
+import { useBranding } from "@/context/BrandingContext";
+
+export default function AppHeader() {
+    const { branding } = useBranding();
+
+    return (
+        <header className="h-16 glass sticky top-0 z-50 px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
+            <Link href="/" className="flex items-center gap-3 group">
+                <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative">
+                    {branding?.logo_url ? (
+                        <img src={branding.logo_url} alt={branding.name} className="w-full h-full object-contain" />
+                    ) : (
+                        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700">L</div>
+                    )}
+                </div>
+                <div className="flex flex-col -gap-1">
+                    <span className="font-black text-lg tracking-tighter text-white leading-none">
+                        {branding?.name?.toUpperCase() || 'LEARN'}
+                    </span>
+                    {!branding && <span className="text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCE</span>}
+                </div>
+            </Link>
+
+            <nav className="hidden md:flex items-center gap-8">
+                <Link href="/" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">Catalog</Link>
+                <Link href="#" className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 hover:text-white transition-colors">My Learning</Link>
+                <div className="w-8 h-8 rounded-full bg-white/5 border border-white/10" />
+            </nav>
+        </header>
+    );
+}

web/studio/next.config.mjs

@@ -1,6 +1,24 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'http',
+                hostname: 'localhost',
+                port: '3001',
+                pathname: '/uploads/**',
+            },
+        ],
+    },
+    async rewrites() {
+        return [
+            {
+                source: '/uploads/:path*',
+                destination: 'http://localhost:3001/uploads/:path*',
+            },
+        ];
+    },
 };
 
 export default nextConfig;

web/studio/package-lock.json

@@ -545,7 +545,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -607,7 +606,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
       "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.50.0",
         "@typescript-eslint/types": "8.50.0",
@@ -1082,7 +1080,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2003,7 +2000,6 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2166,7 +2162,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -3450,7 +3445,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4157,7 +4151,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4353,7 +4346,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4365,7 +4357,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -4426,8 +4417,7 @@
     "node_modules/redux": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
-      "peer": true
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -5239,7 +5229,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5397,7 +5386,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

web/studio/src/app/admin/organization/page.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { cmsApi, Organization } from "@/lib/api";
-import { Building2, Calendar, Hash } from "lucide-react";
-
-export default function OrganizationPage() {
-    const [org, setOrg] = useState<Organization | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        const fetchOrg = async () => {
-            try {
-                const data = await cmsApi.getOrganization();
-                setOrg(data);
-            } catch (err) {
-                setError(err instanceof Error ? err.message : "Failed to load organization");
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchOrg();
-    }, []);
-
-    if (loading) return <div className="p-8 text-center text-gray-500">Loading organization details...</div>;
-    if (error) return <div className="p-8 text-center text-red-500 font-bold">Error: {error}</div>;
-
-    return (
-        <div className="p-8 max-w-5xl mx-auto space-y-8">
-            <header>
-                <h1 className="text-3xl font-black tracking-tighter text-white mb-2">Organization Settings</h1>
-                <p className="text-gray-400">Manage your organization&apos;s profile and settings.</p>
-            </header>
-
-            {org && (
-                <div className="grid gap-6 md:grid-cols-2">
-                    <div className="glass-card p-6 space-y-4">
-                        <div className="flex items-center gap-3 text-blue-400 mb-2">
-                            <Building2 size={24} />
-                            <h2 className="text-xl font-bold text-white">Profile</h2>
-                        </div>
-
-                        <div className="space-y-1">
-                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization Name</label>
-                            <div className="text-lg font-medium text-white">{org.name}</div>
-                        </div>
-
-                        <div className="space-y-1">
-                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Organization ID</label>
-                            <div className="flex items-center gap-2 text-sm text-gray-400 font-mono bg-black/20 p-2 rounded border border-white/5">
-                                <Hash size={14} />
-                                {org.id}
-                            </div>
-                        </div>
-
-                        <div className="space-y-1">
-                            <label className="text-[10px] uppercase font-black tracking-widest text-gray-500">Created At</label>
-                            <div className="flex items-center gap-2 text-sm text-gray-400">
-                                <Calendar size={14} />
-                                {new Date(org.created_at).toLocaleDateString()}
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="glass-card p-6 flex items-center justify-center text-center text-gray-500">
-                        <div>
-                            <p className="mb-2 font-bold">More settings coming soon</p>
-                            <p className="text-xs">User management and billing features are under development.</p>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}

web/studio/src/app/admin/organizations/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { cmsApi, Organization } from '@/lib/api';
 import { useAuth } from '@/context/AuthContext';
+import Image from 'next/image';
 import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X } from 'lucide-react';
 
 export default function OrganizationsPage() {
@@ -141,9 +142,9 @@ export default function OrganizationsPage() {
                             </div>
 
                             <div className="flex items-start gap-4 mb-4">
-                                <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center">
+                                <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative">
                                     {org.logo_url ? (
-                                        <img src={org.logo_url} alt={org.name} className="w-full h-full object-contain" />
+                                        <Image src={org.logo_url} alt={org.name} fill className="object-contain" />
                                     ) : (
                                         <Building2 className="w-6 h-6" />
                                     )}
@@ -256,9 +257,9 @@ export default function OrganizationsPage() {
                                 <div>
                                     <label className="block text-sm font-medium text-gray-400 mb-3 text-brand">Organization Logo</label>
                                     <div className="flex items-center gap-4">
-                                        <div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden">
+                                        <div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden relative">
                                             {selectedOrg.logo_url ? (
-                                                <img src={selectedOrg.logo_url} alt="Preview" className="w-full h-full object-contain" />
+                                                <Image src={selectedOrg.logo_url} alt="Preview" fill className="object-contain" />
                                             ) : (
                                                 <Building2 className="w-8 h-8 text-gray-600" />
                                             )}
@@ -320,9 +321,9 @@ export default function OrganizationsPage() {
                                     {/* Mock Experience Header */}
                                     <div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
                                         <div className="flex items-center gap-2">
-                                            <div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden">
+                                            <div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
                                                 {selectedOrg.logo_url ? (
-                                                    <img src={selectedOrg.logo_url} alt="Logo" className="w-full h-full object-contain" />
+                                                    <Image src={selectedOrg.logo_url} alt="Logo" fill className="object-contain" />
                                                 ) : <div className="w-3 h-3 bg-white" />}
                                             </div>
                                             <div className="w-16 h-2 bg-white/30 rounded" />
@@ -366,7 +367,7 @@ export default function OrganizationsPage() {
                             <button
                                 onClick={handleBrandingSave}
                                 disabled={isSavingBranding}
-                                className="flex-2 px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
+                                className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
                             >
                                 {isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
                                 Save Branding

web/studio/src/app/auth/login/page.tsx

@@ -100,6 +100,7 @@ export default function StudioLoginPage() {
                                             onChange={(e) => setFullName(e.target.value)}
                                             className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                             placeholder="John Doe"
+                                            autoComplete="name"
                                             required
                                         />
                                     </div>
@@ -116,6 +117,7 @@ export default function StudioLoginPage() {
                                             onChange={(e) => setOrganizationName(e.target.value)}
                                             className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                             placeholder="Your School or Company"
+                                            autoComplete="organization"
                                         />
                                     </div>
                                     <p className="text-xs text-gray-500 mt-2 pl-1">
@@ -137,6 +139,7 @@ export default function StudioLoginPage() {
                                     onChange={(e) => setEmail(e.target.value)}
                                     className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                     placeholder="instructor@example.com"
+                                    autoComplete="email"
                                     required
                                 />
                             </div>
@@ -154,6 +157,7 @@ export default function StudioLoginPage() {
                                     onChange={(e) => setPassword(e.target.value)}
                                     className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                     placeholder="••••••••"
+                                    autoComplete="current-password"
                                     required
                                 />
                             </div>

web/studio/src/app/courses/[id]/analytics/page.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { useParams, useRouter } from "next/navigation";
+import Link from "next/link";
 import { cmsApi, Course, CourseAnalytics } from "@/lib/api";
 import { useAuth } from "@/context/AuthContext";
 import {
@@ -13,6 +14,7 @@ import {
     CheckCircle2,
     BookOpen
 } from "lucide-react";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 export default function AnalyticsPage() {
     const { id } = useParams() as { id: string };
@@ -97,7 +99,24 @@ export default function AnalyticsPage() {
                 </div>
             </header>
 
-            <main className="max-w-7xl mx-auto px-8 mt-12 space-y-12">
+            <main className="max-w-7xl mx-auto px-8 mt-12 space-y-8">
+                <div className="flex items-center gap-4 text-sm text-gray-400">
+                    <Link href="/" className="hover:text-white transition-colors">Courses</Link>
+                    <span>/</span>
+                    <span className="text-white">{course?.title}</span>
+                </div>
+
+                <div className="flex justify-between items-center">
+                    <div>
+                        <h2 className="text-3xl font-bold">{course?.title}</h2>
+                        <div className="flex items-center gap-3 mt-1">
+                            <span className="text-gray-400 text-sm">Performance Insights</span>
+                        </div>
+                    </div>
+                </div>
+
+                <CourseEditorLayout activeTab="analytics">
+                    <div className="p-8 space-y-12">
                         {/* Stats Grid */}
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                             <div className="bg-white/5 border border-white/10 rounded-3xl p-8 group hover:bg-white/[0.07] transition-all">
@@ -205,6 +224,8 @@ export default function AnalyticsPage() {
                                 </div>
                             </section>
                         </div>
+                    </div>
+                </CourseEditorLayout>
             </main>
         </div>
     );

web/studio/src/app/courses/[id]/calendar/page.tsx

@@ -7,14 +7,13 @@ import {
     Calendar as CalendarIcon,
     ChevronLeft,
     ChevronRight,
-    Plus,
     Layout,
     CheckCircle2,
     BarChart2,
     Settings,
-    Clock,
     AlertCircle
 } from "lucide-react";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 export default function CourseCalendarPage({ params }: { params: { id: string } }) {
     const [course, setCourse] = useState<Course | null>(null);
@@ -121,25 +120,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
                 </div>
             </div>
 
-            <div className="glass p-1">
+            <CourseEditorLayout activeTab="calendar">
-                <div className="flex border-b border-white/10">
-                    <Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <Layout className="w-4 h-4" /> Outline
-                    </Link>
-                    <Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <CheckCircle2 className="w-4 h-4" /> Grading
-                    </Link>
-                    <Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
-                        <CalendarIcon className="w-4 h-4" /> Calendar
-                    </Link>
-                    <Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <BarChart2 className="w-4 h-4" /> Analytics
-                    </Link>
-                    <Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <Settings className="w-4 h-4" /> Settings
-                    </Link>
-                </div>
-
                 <div className="p-8">
                     <div className="flex items-center justify-between mb-8">
                         <div className="flex items-center gap-6">
@@ -209,7 +190,7 @@ export default function CourseCalendarPage({ params }: { params: { id: string }
                         </div>
                     </div>
                 </div>
-            </div>
+            </CourseEditorLayout>
         </div>
     );
 }

web/studio/src/app/courses/[id]/grading/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useCallback } from "react";
 import { useParams, useRouter } from "next/navigation";
-import { cmsApi, GradingCategory, Course } from "@/lib/api";
+import { cmsApi, GradingCategory } from "@/lib/api";
 import {
     Plus,
     Trash2,
@@ -19,6 +19,7 @@ import {
 import Link from "next/link";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
@@ -113,26 +114,8 @@ export default function GradingPolicyPage() {
                     </div>
                 </div>
 
-                <div className="glass p-1 mb-12">
+                <CourseEditorLayout activeTab="grading">
-                    <div className="flex border-b border-white/10">
+                    <div className="p-8">
-                        <Link href={`/courses/${id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                            <Layout className="w-4 h-4" /> Outline
-                        </Link>
-                        <Link href={`/courses/${id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
-                            <CheckCircle2 className="w-4 h-4" /> Grading
-                        </Link>
-                        <Link href={`/courses/${id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                            <Calendar className="w-4 h-4" /> Calendar
-                        </Link>
-                        <Link href={`/courses/${id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                            <BarChart2 className="w-4 h-4" /> Analytics
-                        </Link>
-                        <Link href={`/courses/${id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                            <Settings className="w-4 h-4" /> Settings
-                        </Link>
-                    </div>
-                </div>
-
                         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                             {/* Categories List */}
                             <div className="lg:col-span-2 space-y-4">
@@ -234,6 +217,8 @@ export default function GradingPolicyPage() {
                             </div>
                         </div>
                     </div>
+                </CourseEditorLayout>
+            </div>
         </div>
     );
 }

web/studio/src/app/courses/[id]/page.tsx

@@ -20,6 +20,7 @@ import {
     GripVertical,
     Trash2
 } from "lucide-react";
+import CourseEditorLayout from "@/components/CourseEditorLayout";
 
 interface FullModule extends Module {
     lessons: Lesson[];
@@ -57,7 +58,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
     }, [params.id]);
 
     const handleAddModule = async () => {
-        const title = "New Module";
+        const title = "";
         try {
             const newMod = await cmsApi.createModule(params.id, title, modules.length + 1);
             const fullMod = { ...newMod, lessons: [] };
@@ -222,25 +223,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                 </div>
             </div>
 
-            <div className="glass p-1">
+            <CourseEditorLayout activeTab="outline">
-                <div className="flex border-b border-white/10">
-                    <Link href={`/courses/${params.id}`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium border-b-2 border-blue-500 bg-white/5">
-                        <Layout className="w-4 h-4" /> Outline
-                    </Link>
-                    <Link href={`/courses/${params.id}/grading`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <CheckCircle2 className="w-4 h-4" /> Grading
-                    </Link>
-                    <Link href={`/courses/${params.id}/calendar`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <Calendar className="w-4 h-4" /> Calendar
-                    </Link>
-                    <Link href={`/courses/${params.id}/analytics`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <BarChart2 className="w-4 h-4" /> Analytics
-                    </Link>
-                    <Link href={`/courses/${params.id}/settings`} className="flex items-center gap-2 px-6 py-4 text-sm font-medium text-gray-500 hover:text-white transition-colors">
-                        <Settings className="w-4 h-4" /> Settings
-                    </Link>
-                </div>
-
                 <div className="p-8 space-y-6">
                     {modules.map((module, mIndex) => (
                         <div key={module.id} className="glass rounded-xl overflow-hidden border-white/5">
@@ -286,7 +269,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                                                 onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
                                                 className="font-semibold text-lg text-blue-400 cursor-pointer hover:text-blue-300 transition-colors"
                                             >
-                                                Module {module.position}: {module.title}
+                                                {module.title || `Module ${module.position}`}
                                             </span>
                                             <button
                                                 onClick={() => { setEditingId(module.id); setEditValue(module.title); }}
@@ -404,7 +387,7 @@ export default function CourseEditor({ params }: { params: { id: string } }) {
                         <Plus className="w-6 h-6" /> Add New Module
                     </button>
                 </div>
-            </div>
+            </CourseEditorLayout>
         </div>
     );
 }

web/studio/src/components/AuthHeader.tsx

@@ -10,7 +10,7 @@ export default function AuthHeader() {
         <div className="flex items-center gap-4">
             {user?.role === 'admin' && (
                 <>
-                    <Link href="/admin/organization" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
+                    <Link href="/admin/organizations" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">
                         <Building2 size={16} /> Org
                     </Link>
                     <Link href="/admin/audit" className="text-xs font-bold uppercase tracking-widest text-gray-400 hover:text-white transition-colors flex items-center gap-2">

web/studio/src/components/CourseEditorLayout.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Layout, CheckCircle2, Calendar, BarChart2, Settings } from "lucide-react";
+
+interface CourseEditorLayoutProps {
+    children: React.ReactNode;
+    activeTab: "outline" | "grading" | "calendar" | "analytics" | "settings";
+}
+
+export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
+    const { id } = useParams() as { id: string };
+
+    const tabs = [
+        { key: "outline", label: "Outline", icon: Layout, href: `/courses/${id}` },
+        { key: "grading", label: "Grading", icon: CheckCircle2, href: `/courses/${id}/grading` },
+        { key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
+        { key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
+        { key: "settings", label: "Settings", icon: Settings, href: `/courses/${id}/settings` },
+    ];
+
+    return (
+        <div className="space-y-8">
+            {/* Tabs Navigation */}
+            <div className="glass p-1">
+                <div className="flex border-b border-white/10">
+                    {tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        const isActive = tab.key === activeTab;
+                        return (
+                            <Link
+                                key={tab.key}
+                                href={tab.href}
+                                className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors ${isActive
+                                        ? "border-b-2 border-blue-500 bg-white/5"
+                                        : "text-gray-500 hover:text-white"
+                                    }`}
+                            >
+                                <Icon className="w-4 h-4" />
+                                {tab.label}
+                            </Link>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="space-y-6">
+                {children}
+            </div>
+        </div>
+    );
+}

web/studio/src/lib/api.ts

@@ -156,9 +156,15 @@ const apiFetch = (url: string, options: RequestInit = {}) => {
         ...(token ? { 'Authorization': `Bearer ${token}` } : {})
     };
 
-    return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(res => {
+    return fetch(`${API_BASE_URL}${url}`, { ...options, headers }).then(async res => {
         if (!res.ok) {
-            return res.json().then(err => Promise.reject(err.message || 'An error occurred'));
+            const text = await res.text();
+            try {
+                const json = JSON.parse(text);
+                return Promise.reject(new Error(json.message || 'An error occurred'));
+            } catch {
+                return Promise.reject(new Error(text || res.statusText));
+            }
         }
         // Handle no-content responses
         if (res.status === 204) return;