add: iframe added

.env.example

@@ -33,6 +33,10 @@ SESSION_LIFETIME=120
 SESSION_ENCRYPT=false
 SESSION_PATH=/
 SESSION_DOMAIN=null
+# Required when /embed is served inside a cross-site HTTPS iframe.
+# SESSION_SECURE_COOKIE=true
+# SESSION_SAME_SITE=none
+# SESSION_PARTITIONED_COOKIE=true
 
 BROADCAST_CONNECTION=log
 FILESYSTEM_DISK=local

app/Http/Controllers/AdminController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+use Inertia\Response;
+
+class AdminController extends Controller
+{
+    public function index(): Response
+    {
+        return Inertia::render('admin');
+    }
+
+    public function settings(): Response
+    {
+        return Inertia::render('admin/pengaturan');
+    }
+}

app/Http/Controllers/AuthController.php

@@ -6,6 +6,8 @@
 use App\Services\RagApiClient;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
 use Symfony\Component\HttpFoundation\Cookie;
 
 class AuthController extends Controller
@@ -14,7 +16,24 @@ class AuthController extends Controller
 
     private const AUTH_USER_COOKIE = 'sevima_raghub_auth_user';
 
+    public function showAdminLogin(Request $request): Response
+    {
+        return Inertia::render('auth/admin-login', [
+            'status' => $request->session()->get('status'),
+        ]);
+    }
+
     public function login(Request $request, RagApiClient $rag): RedirectResponse
+    {
+        return $this->attemptLogin($request, $rag);
+    }
+
+    public function adminLogin(Request $request, RagApiClient $rag): RedirectResponse
+    {
+        return $this->attemptLogin($request, $rag, 'admin');
+    }
+
+    private function attemptLogin(Request $request, RagApiClient $rag, ?string $requiredRole = null): RedirectResponse
     {
         /** @var array{email: string, password: string, remember?: bool} $payload */
         $payload = $request->validate([
@@ -36,8 +55,15 @@ public function login(Request $request, RagApiClient $rag): RedirectResponse
 
         $remember = (bool) ($payload['remember'] ?? false);
         $user = $response['user'];
+        $role = $user['role'] ?? null;
+
+        if ($requiredRole !== null && $role !== $requiredRole) {
+            return back()
+                ->withErrors(['auth' => 'Akun ini tidak memiliki akses admin.'])
+                ->withInput($request->except('password'));
+        }
 
-        return redirect($this->dashboardPath($user['role'] ?? null))
+        return redirect($this->dashboardPath($role))
             ->withCookie($this->authCookie($request, self::AUTH_TOKEN_COOKIE, $response['token'], $remember))
             ->withCookie($this->authCookie($request, self::AUTH_USER_COOKIE, json_encode($user, JSON_THROW_ON_ERROR), $remember));
     }
@@ -61,12 +87,13 @@ public function register(Request $request, RagApiClient $rag): RedirectResponse
                 ->withInput($request->except('password'));
         }
 
-        return back()->with('status', $response['message']);
+        return to_route('login')->with('status', $response['message']);
     }
 
     private function dashboardPath(mixed $role): string
     {
         return match ($role) {
+            'admin' => route('admin.dashboard', absolute: false),
             'student' => route('mahasiswa', absolute: false),
             'lecturer' => route('dosen', absolute: false),
             default => route('dashboard', absolute: false),

app/Http/Controllers/DosenController.php

@@ -21,7 +21,7 @@ public function index(Request $request, RagApiClient $rag): Response
         $token = $this->authToken($request);
 
         try {
-            $courses = $rag->listCourses(limit: 100)['data'];
+            $courses = $rag->listCourses(limit: 100, token: $token)['data'];
 
             foreach ($courses as $course) {
                 $documents = [];

app/Http/Controllers/EmbedController.php

@@ -0,0 +1,438 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Exceptions\RagApiException;
+use App\Services\RagApiClient;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Inertia\Inertia;
+use Inertia\Response;
+use Symfony\Component\HttpFoundation\Cookie;
+
+class EmbedController extends Controller
+{
+    private const EMBED_TOKEN_COOKIE = 'sevima_raghub_embed_token';
+
+    private const EMBED_USER_COOKIE = 'sevima_raghub_embed_user';
+
+    private const DIRECT_MESSAGES_SESSION_PREFIX = 'sevima_raghub_embed_direct_messages';
+
+    private const PENDING_INITIAL_CHAT_SESSION_PREFIX = 'sevima_raghub_embed_pending_initial_chat';
+
+    /**
+     * @var array<int, string>
+     */
+    private const EMBED_QUERY_KEYS = [
+        'background',
+        'border',
+        'course_id',
+        'courseId',
+        'danger',
+        'muted',
+        'primary',
+        'primary_soft',
+        'radius',
+        'subtitle',
+        'surface',
+        'text',
+        'title',
+        'user_name',
+    ];
+
+    public function index(Request $request, RagApiClient $rag): Response|RedirectResponse
+    {
+        if ($request->filled('api_key')) {
+            return $this->bootstrapTokenFromApiKey($request, $rag);
+        }
+
+        if ($request->filled('token')) {
+            return $this->bootstrapTokenFromQuery($request);
+        }
+
+        $config = $this->embedConfig($request);
+        $token = $this->embedToken($request);
+
+        if ($token === null) {
+            return Inertia::render('embed', [
+                ...$this->emptyPayload($config),
+                'backendMessage' => 'Token iframe tidak tersedia.',
+                'isAuthorized' => false,
+            ]);
+        }
+
+        $backendMessage = null;
+        $chatSessions = [];
+        $courses = [];
+        $currentSession = null;
+        $messages = [];
+        $selectedCourseId = $config['courseId'];
+        $sessionId = $this->stringQuery($request, 'session_id');
+
+        try {
+            $courses = $rag->listCourses(limit: 100, token: $token)['data'];
+            $selectedCourseId = $this->selectedCourseId($selectedCourseId, $courses);
+            $chatSessions = $rag->listChatSessions(limit: 50, token: $token, courseId: $selectedCourseId)['data'];
+
+            if ($sessionId !== null) {
+                $currentSession = $rag->getChatSession($sessionId, $token);
+                $messages = $rag->getChatHistory($sessionId, $token)['data'];
+
+                if ($rag->isDirectChatMode()) {
+                    $messages = [
+                        ...$messages,
+                        ...$this->directChatMessages($request, $sessionId),
+                    ];
+                }
+
+                if (is_string($currentSession['course_id'] ?? null)) {
+                    $selectedCourseId = $currentSession['course_id'];
+                }
+            }
+        } catch (RagApiException $exception) {
+            $backendMessage = $exception->getMessage() ?: null;
+        }
+
+        return Inertia::render('embed', [
+            'backendMessage' => $backendMessage,
+            'chatSessions' => $chatSessions,
+            'config' => [
+                ...$config,
+                'courseId' => $selectedCourseId,
+            ],
+            'courses' => $courses,
+            'currentSession' => $currentSession,
+            'isAuthorized' => $backendMessage === null,
+            'isDirectChatMode' => $rag->isDirectChatMode(),
+            'messages' => $messages,
+            'pendingInitialChat' => $sessionId === null
+                ? null
+                : $request->session()->pull($this->pendingInitialChatKey($sessionId)),
+            'selectedCourseId' => $selectedCourseId,
+            'sessionId' => $sessionId,
+        ]);
+    }
+
+    public function storeSession(Request $request, RagApiClient $rag): RedirectResponse
+    {
+        /** @var array{course_id: string, title: string} $payload */
+        $payload = $request->validate([
+            'course_id' => ['required', 'string'],
+            'title' => ['required', 'string'],
+        ]);
+
+        try {
+            $session = $rag->createChatSession($payload, $this->requireEmbedToken($request));
+        } catch (RagApiException $exception) {
+            return back()
+                ->withErrors(['chat' => $exception->getMessage()])
+                ->withInput();
+        }
+
+        $sessionId = (string) ($session['uuid_id'] ?? '');
+
+        $request->session()->flash($this->pendingInitialChatKey($sessionId), [
+            'content' => $payload['title'],
+            'courseId' => $payload['course_id'],
+        ]);
+
+        return redirect($this->embedRoute($request, ['session_id' => $sessionId]));
+    }
+
+    public function storeMessage(Request $request, RagApiClient $rag, string $sessionId): RedirectResponse
+    {
+        /** @var array{content: string, course_id: string} $payload */
+        $payload = $request->validate([
+            'content' => ['required', 'string'],
+            'course_id' => ['required', 'string'],
+        ]);
+        $userMessage = $this->localUserMessage($payload['content']);
+
+        try {
+            $assistantMessage = $rag->sendConfiguredChatMessage(
+                $sessionId,
+                $payload['course_id'],
+                $payload['content'],
+                $this->requireEmbedToken($request),
+            );
+        } catch (RagApiException $exception) {
+            return back()
+                ->withErrors(['message' => $exception->getMessage()])
+                ->withInput();
+        }
+
+        if ($rag->isDirectChatMode()) {
+            $this->appendDirectChatMessages($request, $sessionId, [
+                $userMessage,
+                $assistantMessage,
+            ]);
+        }
+
+        return redirect($this->embedRoute($request, ['session_id' => $sessionId]));
+    }
+
+    public function destroySession(Request $request, RagApiClient $rag, string $sessionId): RedirectResponse
+    {
+        try {
+            $rag->deleteChatSession($sessionId, $this->requireEmbedToken($request));
+        } catch (RagApiException $exception) {
+            return back()->withErrors(['session' => $exception->getMessage()]);
+        }
+
+        $this->clearDirectChatMessages($request, $sessionId);
+
+        return redirect($this->embedRoute($request, ['session_id' => null]));
+    }
+
+    private function bootstrapTokenFromApiKey(Request $request, RagApiClient $rag): Response|RedirectResponse
+    {
+        $apiKey = $this->stringQuery($request, 'api_key');
+
+        if ($apiKey === null) {
+            return redirect($this->embedRoute($request));
+        }
+
+        try {
+            $response = $rag->loginWithApiKey(['api_key' => $apiKey]);
+        } catch (RagApiException $exception) {
+            return Inertia::render('embed', [
+                ...$this->emptyPayload($this->embedConfig($request)),
+                'backendMessage' => $exception->getMessage(),
+                'isAuthorized' => false,
+            ]);
+        }
+
+        return redirect($this->embedRoute($request))
+            ->withCookie($this->embedCookie($request, self::EMBED_TOKEN_COOKIE, $response['token']))
+            ->withCookie($this->embedCookie($request, self::EMBED_USER_COOKIE, json_encode($response['user'], JSON_THROW_ON_ERROR)));
+    }
+
+    private function bootstrapTokenFromQuery(Request $request): RedirectResponse
+    {
+        $token = $this->stringQuery($request, 'token');
+
+        if ($token === null) {
+            return redirect($this->embedRoute($request));
+        }
+
+        return redirect($this->embedRoute($request))
+            ->withCookie($this->embedCookie($request, self::EMBED_TOKEN_COOKIE, $token));
+    }
+
+    /**
+     * @param  array<string, mixed>  $config
+     * @return array<string, mixed>
+     */
+    private function emptyPayload(array $config): array
+    {
+        return [
+            'chatSessions' => [],
+            'config' => $config,
+            'courses' => [],
+            'currentSession' => null,
+            'isDirectChatMode' => false,
+            'messages' => [],
+            'pendingInitialChat' => null,
+            'selectedCourseId' => $config['courseId'],
+            'sessionId' => null,
+        ];
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function embedConfig(Request $request): array
+    {
+        return [
+            'background' => $this->colorQuery($request, 'background', '#ffffff'),
+            'border' => $this->colorQuery($request, 'border', '#739af1'),
+            'courseId' => $this->stringQuery($request, 'course_id') ?? $this->stringQuery($request, 'courseId'),
+            'danger' => $this->colorQuery($request, 'danger', '#ef4444'),
+            'muted' => $this->colorQuery($request, 'muted', '#737373'),
+            'primary' => $this->colorQuery($request, 'primary', '#2764eb'),
+            'primarySoft' => $this->colorQuery($request, 'primary_soft', '#ccdcff'),
+            'radius' => $this->radiusQuery($request),
+            'subtitle' => $this->stringQuery($request, 'subtitle') ?? 'Pilih mata kuliah, lalu kirim pertanyaan pertama untuk membuat sesi baru',
+            'surface' => $this->colorQuery($request, 'surface', '#ffffff'),
+            'text' => $this->colorQuery($request, 'text', '#0a0a0a'),
+            'title' => $this->stringQuery($request, 'title') ?? 'RAG Hub',
+            'userName' => $this->stringQuery($request, 'user_name') ?? $this->embedUserName($request),
+        ];
+    }
+
+    private function embedToken(Request $request): ?string
+    {
+        $token = $request->cookie(self::EMBED_TOKEN_COOKIE);
+
+        return is_string($token) && trim($token) !== '' ? $token : null;
+    }
+
+    private function requireEmbedToken(Request $request): string
+    {
+        $token = $this->embedToken($request);
+
+        if ($token === null) {
+            abort(401, 'Token iframe tidak tersedia.');
+        }
+
+        return $token;
+    }
+
+    private function embedUserName(Request $request): string
+    {
+        $rawUser = $request->cookie(self::EMBED_USER_COOKIE);
+
+        if (! is_string($rawUser) || $rawUser === '') {
+            return 'User';
+        }
+
+        $user = json_decode($rawUser, true);
+
+        return is_array($user) && is_string($user['name'] ?? null)
+            ? $user['name']
+            : 'User';
+    }
+
+    private function embedCookie(Request $request, string $name, string $value): Cookie
+    {
+        return cookie(
+            name: $name,
+            value: $value,
+            minutes: 60 * 24,
+            path: '/',
+            domain: null,
+            secure: $request->isSecure(),
+            httpOnly: true,
+            raw: false,
+            sameSite: $request->isSecure() ? 'none' : 'lax',
+        );
+    }
+
+    /**
+     * @param  array<int, array<string, mixed>>  $courses
+     */
+    private function selectedCourseId(?string $configuredCourseId, array $courses): ?string
+    {
+        if ($configuredCourseId !== null && $configuredCourseId !== '') {
+            return $configuredCourseId;
+        }
+
+        $courseId = $courses[0]['id'] ?? null;
+
+        return $courseId === null ? null : (string) $courseId;
+    }
+
+    /**
+     * @param  array<string, string|null>  $merge
+     */
+    private function embedRoute(Request $request, array $merge = []): string
+    {
+        $query = [];
+
+        foreach (self::EMBED_QUERY_KEYS as $key) {
+            $value = $request->query($key);
+
+            if (is_string($value) && $value !== '') {
+                $query[$key] = $value;
+            }
+        }
+
+        foreach ($merge as $key => $value) {
+            if ($value === null || $value === '') {
+                unset($query[$key]);
+
+                continue;
+            }
+
+            $query[$key] = $value;
+        }
+
+        return route('embed', $query, false);
+    }
+
+    private function stringQuery(Request $request, string $key): ?string
+    {
+        $value = $request->query($key);
+
+        return is_string($value) && trim($value) !== '' ? trim($value) : null;
+    }
+
+    private function colorQuery(Request $request, string $key, string $fallback): string
+    {
+        $value = $this->stringQuery($request, $key);
+
+        if ($value === null) {
+            return $fallback;
+        }
+
+        $normalizedValue = str_starts_with($value, '#') ? $value : '#'.$value;
+
+        return preg_match('/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/', $normalizedValue) === 1
+            ? $normalizedValue
+            : $fallback;
+    }
+
+    private function radiusQuery(Request $request): string
+    {
+        $value = $this->stringQuery($request, 'radius');
+
+        if ($value === null) {
+            return '20px';
+        }
+
+        return preg_match('/^\d{1,2}(?:px|rem)$/', $value) === 1
+            ? $value
+            : '20px';
+    }
+
+    /**
+     * @return array{uuid_id: string, role: string, content: string, sources: array<int, mixed>, created_at: string}
+     */
+    private function localUserMessage(string $content): array
+    {
+        return [
+            'content' => $content,
+            'created_at' => now()->toISOString(),
+            'role' => 'user',
+            'sources' => [],
+            'uuid_id' => 'local-'.Str::uuid(),
+        ];
+    }
+
+    /**
+     * @return array<int, array<string, mixed>>
+     */
+    private function directChatMessages(Request $request, string $sessionId): array
+    {
+        $messages = $request->session()->get($this->directMessagesKey($sessionId), []);
+
+        return is_array($messages) ? $messages : [];
+    }
+
+    /**
+     * @param  array<int, array<string, mixed>>  $messages
+     */
+    private function appendDirectChatMessages(Request $request, string $sessionId, array $messages): void
+    {
+        $request->session()->put($this->directMessagesKey($sessionId), [
+            ...$this->directChatMessages($request, $sessionId),
+            ...$messages,
+        ]);
+    }
+
+    private function clearDirectChatMessages(Request $request, string $sessionId): void
+    {
+        $request->session()->forget($this->directMessagesKey($sessionId));
+    }
+
+    private function directMessagesKey(string $sessionId): string
+    {
+        return self::DIRECT_MESSAGES_SESSION_PREFIX.'.'.$sessionId;
+    }
+
+    private function pendingInitialChatKey(string $sessionId): string
+    {
+        return self::PENDING_INITIAL_CHAT_SESSION_PREFIX.'.'.$sessionId;
+    }
+}

app/Http/Controllers/MahasiswaController.php

@@ -85,6 +85,7 @@ public function show(Request $request, RagApiClient $rag, string $sessionId): Re
             ...$payload,
             'backendMessage' => $backendMessage,
             'currentSession' => $currentSession,
+            'isDirectChatMode' => $rag->isDirectChatMode(),
             'messages' => $messages,
             'pendingInitialChat' => $request->session()->pull($this->pendingInitialChatKey($sessionId)),
             'selectedCourseId' => is_string($currentSession['course_id'] ?? null)
@@ -154,7 +155,7 @@ private function studentDashboardPayload(Request $request, RagApiClient $rag): a
         $token = $this->authToken($request);
 
         try {
-            $courses = $rag->listCourses(limit: 100)['data'];
+            $courses = $rag->listCourses(limit: 100, token: $token)['data'];
         } catch (RagApiException $exception) {
             $backendMessage = $exception->getMessage() ?: null;
         }

app/Http/Middleware/EnsureRagAuthenticated.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class EnsureRagAuthenticated
+{
+    private const AUTH_TOKEN_COOKIE = 'sevima_raghub_auth_token';
+
+    private const AUTH_USER_COOKIE = 'sevima_raghub_auth_user';
+
+    /**
+     * Handle an incoming request.
+     *
+     * @param  Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next, string ...$roles): Response
+    {
+        $token = $request->cookie(self::AUTH_TOKEN_COOKIE);
+
+        if (! is_string($token) || trim($token) === '') {
+            return $this->redirectToLogin($roles);
+        }
+
+        if ($roles !== []) {
+            $user = $this->userFromCookie($request);
+            $role = $user['role'] ?? null;
+
+            if (! is_string($role) || ! in_array($role, $roles, true)) {
+                return is_string($role)
+                    ? redirect($this->dashboardPath($role))
+                        ->with('status', 'Akses tidak sesuai role akun.')
+                    : $this->redirectToLogin($roles);
+            }
+        }
+
+        return $next($request);
+    }
+
+    /**
+     * @param  array<int, string>  $roles
+     */
+    private function redirectToLogin(array $roles = []): RedirectResponse
+    {
+        $route = in_array('admin', $roles, true) ? 'admin.login' : 'login';
+
+        return redirect()->route($route)
+            ->with('status', 'Silakan login terlebih dahulu.');
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function userFromCookie(Request $request): array
+    {
+        $rawUser = $request->cookie(self::AUTH_USER_COOKIE);
+
+        if (! is_string($rawUser) || $rawUser === '') {
+            return [];
+        }
+
+        $user = json_decode($rawUser, true);
+
+        return is_array($user) ? $user : [];
+    }
+
+    private function dashboardPath(string $role): string
+    {
+        return match ($role) {
+            'admin' => route('admin.dashboard', absolute: false),
+            'student' => route('mahasiswa', absolute: false),
+            'lecturer' => route('dosen', absolute: false),
+            default => route('dashboard', absolute: false),
+        };
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -43,6 +43,7 @@ public function share(Request $request): array
             ],
             'flash' => [
                 'status' => $request->session()->get('status'),
+                'toast' => $request->session()->get('toast'),
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
         ];

app/Services/RagApiClient.php

@@ -26,6 +26,22 @@ public function login(array $payload): array
         return $response->json();
     }
 
+    /**
+     * @param  array{api_key: string}  $payload
+     * @return array{token: string, user: array<string, mixed>}
+     */
+    public function loginWithApiKey(array $payload): array
+    {
+        $response = $this->request()->post('/auth/login/api-key', $payload);
+
+        if ($response->failed()) {
+            throw RagApiException::fromResponse($response);
+        }
+
+        /** @var array{token: string, user: array<string, mixed>} */
+        return $response->json();
+    }
+
     /**
      * @param  array{email: string, password: string, name: string, role: string, identity_number: string}  $payload
      * @return array{message: string, user: array<string, mixed>}
@@ -45,9 +61,9 @@ public function register(array $payload): array
     /**
      * @return array{data: array<int, array{id: int|string, title: string, description?: string|null}>, total?: int, page?: int, limit?: int}
      */
-    public function listCourses(int $page = 1, int $limit = 100): array
+    public function listCourses(int $page = 1, int $limit = 100, ?string $token = null): array
     {
-        $response = $this->request()->get('/courses', [
+        $response = $this->request($token)->get('/courses', [
             'limit' => $limit,
             'page' => $page,
         ]);

bootstrap/app.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Middleware\EnsureRagAuthenticated;
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
 use Illuminate\Foundation\Application;
@@ -16,10 +17,16 @@
     ->withMiddleware(function (Middleware $middleware): void {
         $middleware->trustProxies(at: '*');
 
+        $middleware->alias([
+            'rag.auth' => EnsureRagAuthenticated::class,
+        ]);
+
         $middleware->encryptCookies(except: [
             'appearance',
             'sevima_raghub_auth_token',
             'sevima_raghub_auth_user',
+            'sevima_raghub_embed_token',
+            'sevima_raghub_embed_user',
             'sidebar_state',
         ]);
 

resources/css/app.css

@@ -109,7 +109,7 @@ :root {
     --app-primary-soft: #ccdcff;
     --app-primary-foreground: #ffffff;
     --app-danger: #ef4444;
-    --app-success: #16a34a;
+    --app-success: var(--app-primary);
     --app-placeholder: rgba(115, 115, 115, 0.42);
     --app-toggle-bg: rgba(255, 255, 255, 0.9);
     --app-shadow: 1px 1px 4.5px rgba(39, 100, 235, 0.36);
@@ -158,6 +158,7 @@ :root {
     --student-primary-soft: var(--app-primary-soft);
     --student-primary-foreground: var(--app-primary-foreground);
     --student-danger: var(--app-danger);
+    --student-success: var(--app-success);
     --student-placeholder: var(--app-placeholder);
     --student-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
     --student-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
@@ -228,7 +229,7 @@ .dark {
     --app-primary-soft: #c8d7ff;
     --app-primary-foreground: #ffffff;
     --app-danger: #ff4545;
-    --app-success: #22c55e;
+    --app-success: var(--app-primary);
     --app-placeholder: rgba(244, 244, 245, 0.42);
     --app-toggle-bg: #171717;
     --app-shadow: 0 0 20px rgba(52, 120, 255, 0.34);
@@ -273,6 +274,7 @@ .dark {
     --student-primary-soft: var(--app-primary-soft);
     --student-primary-foreground: var(--app-primary-foreground);
     --student-danger: var(--app-danger);
+    --student-success: var(--app-success);
     --student-placeholder: var(--app-placeholder);
     --student-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
     --student-sidebar-shadow: 1px 0 0 var(--app-border);
@@ -622,7 +624,7 @@ @layer components {
 
     .login-status {
         @apply mt-4 text-center text-sm font-medium;
-        color: var(--welcome-accent);
+        color: var(--app-success);
     }
 
     .login-error {
@@ -738,7 +740,7 @@ @layer components {
         color: var(--student-muted);
         height: auto !important;
         min-height: 42px !important;
-        padding: 8px 4px !important;
+        padding: 8px 34px 8px 4px !important;
         align-items: flex-start !important;
     }
 
@@ -1022,6 +1024,10 @@ @layer components {
         color: var(--student-danger);
     }
 
+    .student-status--success {
+        color: var(--student-success);
+    }
+
     .student-course-row {
         @apply flex flex-wrap items-center gap-2 text-[11px] font-medium;
         color: var(--student-text);
@@ -1136,6 +1142,11 @@ @layer components {
         @apply leading-relaxed whitespace-pre-wrap;
     }
 
+    .student-message-caret {
+        @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px];
+        background-color: currentColor;
+    }
+
     .student-message-time {
         @apply mt-2 block text-[10px];
         color: color-mix(in oklab, currentColor 72%, transparent);
@@ -1192,6 +1203,277 @@ @layer components {
         color: var(--student-muted);
     }
 
+    .embed-shell {
+        @apply relative flex min-h-svh flex-col overflow-hidden px-6 py-5;
+        background-color: var(--embed-bg);
+        color: var(--embed-text);
+    }
+
+    .embed-toolbar {
+        @apply relative z-20 flex shrink-0 items-start justify-between gap-4;
+    }
+
+    .embed-tabs {
+        @apply flex h-8 items-center gap-1 rounded-full p-1 shadow-sm;
+        background-color: color-mix(
+            in oklab,
+            var(--embed-muted) 20%,
+            transparent
+        );
+    }
+
+    .embed-tabs button {
+        @apply h-6 rounded-full px-6 text-xs font-medium transition;
+        color: var(--embed-text);
+    }
+
+    .embed-tabs button[aria-selected='true'] {
+        @apply shadow-sm;
+        background-color: var(--embed-surface);
+    }
+
+    .embed-actions {
+        @apply flex items-center gap-5;
+    }
+
+    .embed-icon-button {
+        @apply flex size-8 items-center justify-center rounded-[5px] transition;
+        color: var(--embed-text);
+    }
+
+    .embed-icon-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--embed-muted) 14%,
+            transparent
+        );
+    }
+
+    .embed-icon-button--primary {
+        background-color: var(--embed-primary);
+        color: #ffffff;
+    }
+
+    .embed-icon-button--primary:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--embed-primary) 88%,
+            #ffffff
+        );
+    }
+
+    .embed-chat {
+        @apply relative flex min-h-0 flex-1 flex-col items-center justify-center;
+    }
+
+    .embed-chat--session {
+        @apply items-stretch justify-start;
+    }
+
+    .embed-empty-state {
+        @apply mx-auto flex w-full max-w-[620px] -translate-y-5 flex-col items-center text-center;
+    }
+
+    .embed-empty-icon {
+        @apply mb-5 flex size-[52px] items-center justify-center rounded-[14px];
+        background-color: var(--embed-primary-soft);
+        color: var(--embed-primary);
+    }
+
+    .embed-empty-state h1 {
+        @apply text-2xl leading-tight font-bold tracking-[-0.02em];
+        color: var(--embed-text);
+    }
+
+    .embed-empty-state p {
+        @apply mt-2 text-xs;
+        color: var(--embed-muted);
+    }
+
+    .embed-status {
+        @apply mt-4 text-center text-xs font-medium;
+        color: var(--embed-danger);
+    }
+
+    .embed-thread {
+        @apply min-h-0 flex-1 space-y-5 overflow-y-auto px-0 pt-10;
+        padding-bottom: 11rem;
+    }
+
+    .embed-message {
+        @apply flex w-full items-start gap-3;
+    }
+
+    .embed-message--assistant {
+        @apply justify-start;
+    }
+
+    .embed-message--user {
+        @apply justify-end;
+    }
+
+    .embed-message-avatar {
+        @apply flex size-8 shrink-0 items-center justify-center rounded-[9px];
+    }
+
+    .embed-message-avatar--assistant {
+        background-color: var(--embed-primary);
+        color: #ffffff;
+    }
+
+    .embed-message-avatar--user {
+        background-color: var(--embed-primary-soft);
+        color: var(--embed-primary);
+    }
+
+    .embed-message-bubble {
+        @apply max-w-[min(290px,75%)] rounded-[10px] border px-4 py-3 text-xs shadow-none;
+        background-color: var(--embed-surface);
+        border-color: var(--embed-border);
+        color: var(--embed-text);
+    }
+
+    .embed-message--assistant .embed-message-bubble {
+        color: var(--embed-text);
+    }
+
+    .embed-message--user .embed-message-bubble {
+        background-color: var(--embed-primary);
+        border-color: var(--embed-primary);
+        color: #ffffff;
+    }
+
+    .embed-message-content {
+        @apply leading-relaxed whitespace-pre-wrap;
+    }
+
+    .embed-message-time {
+        @apply mt-2 block text-[10px];
+        color: color-mix(in oklab, currentColor 68%, transparent);
+    }
+
+    .embed-message-caret {
+        @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px];
+        background-color: currentColor;
+    }
+
+    .embed-message-bubble--typing {
+        color: var(--embed-muted);
+    }
+
+    .embed-composer-dock {
+        @apply absolute right-0 bottom-0 left-0 z-10;
+    }
+
+    .embed-composer {
+        @apply relative w-full rounded-[var(--embed-radius)] border px-4 py-3;
+        -webkit-backdrop-filter: blur(16px) saturate(1.25);
+        backdrop-filter: blur(16px) saturate(1.25);
+        background-color: color-mix(
+            in oklab,
+            var(--embed-surface) 82%,
+            transparent
+        );
+        border-color: var(--embed-border);
+        box-shadow: 0 18px 40px color-mix(in oklab, var(--embed-primary) 24%, transparent);
+    }
+
+    .embed-course-row {
+        @apply flex flex-wrap items-center gap-2 text-[11px] font-bold;
+        color: var(--embed-text);
+    }
+
+    .embed-course-row svg,
+    .embed-question-row svg {
+        color: var(--embed-primary);
+    }
+
+    .embed-course-row select {
+        @apply h-6 max-w-[210px] rounded-[5px] border px-2 text-[10px] outline-none;
+        background-color: var(--embed-surface);
+        border-color: var(--embed-border);
+        color: var(--embed-text);
+    }
+
+    .embed-course-row select:disabled {
+        @apply opacity-70;
+    }
+
+    .embed-composer-divider {
+        @apply my-3 h-px w-full;
+        background-color: color-mix(
+            in oklab,
+            var(--embed-muted) 24%,
+            transparent
+        );
+    }
+
+    .embed-question-row {
+        @apply flex items-start gap-3;
+    }
+
+    .embed-question-row textarea {
+        @apply min-h-[72px] flex-1 resize-none bg-transparent text-xs outline-none;
+        color: var(--embed-text);
+    }
+
+    .embed-question-row textarea::placeholder {
+        color: color-mix(in oklab, var(--embed-muted) 48%, transparent);
+    }
+
+    .embed-send-button {
+        @apply absolute right-4 bottom-3 flex size-8 items-center justify-center rounded-[8px] transition disabled:opacity-55;
+        background-color: var(--embed-primary);
+        color: #ffffff;
+    }
+
+    .embed-updated-at {
+        @apply mt-2 text-center text-[10px];
+        color: var(--embed-muted);
+    }
+
+    .embed-history {
+        @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pt-7;
+    }
+
+    .embed-history-item {
+        @apply flex w-full items-center justify-between gap-4 rounded-[7px] px-6 py-3 text-left transition;
+        color: var(--embed-text);
+    }
+
+    .embed-history-item[data-active='true'],
+    .embed-history-item:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--embed-muted) 18%,
+            transparent
+        );
+    }
+
+    .embed-history-item strong {
+        @apply block text-base font-semibold;
+    }
+
+    .embed-history-item small {
+        @apply mt-1 block text-xs;
+        color: var(--embed-text);
+    }
+
+    .embed-history-delete {
+        @apply shrink-0 opacity-30 transition;
+        color: var(--embed-danger);
+    }
+
+    .embed-history-item[data-active='true'] .embed-history-delete,
+    .embed-history-item:hover .embed-history-delete {
+        @apply opacity-100;
+    }
+
+    .embed-empty-copy {
+        @apply mt-16 text-center text-sm;
+        color: var(--embed-muted);
+    }
+
     .lecturer-dashboard-shell {
         @apply min-h-svh;
         background-color: var(--lecturer-bg);
@@ -1329,6 +1611,32 @@ @layer components {
         color: var(--lecturer-danger);
     }
 
+    .lecturer-confirm-dialog {
+        @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px];
+        background-color: var(--lecturer-surface);
+        border-color: var(--lecturer-border);
+        box-shadow: var(--lecturer-shadow);
+        color: var(--lecturer-text);
+    }
+
+    .lecturer-confirm-dialog-footer {
+        @apply gap-3 pt-1;
+    }
+
+    .lecturer-danger-button {
+        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
+        background-color: var(--lecturer-danger) !important;
+        color: var(--lecturer-primary-foreground) !important;
+    }
+
+    .lecturer-danger-button:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-danger) 86%,
+            #000
+        ) !important;
+    }
+
     .group[data-collapsible='icon'] .lecturer-sidebar-header {
         justify-content: center !important;
         padding: 0 !important;
@@ -1604,6 +1912,20 @@ @layer components {
         color: var(--lecturer-danger);
     }
 
+    .lecturer-status--success {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-success) 8%,
+            var(--lecturer-surface)
+        );
+        border-color: color-mix(
+            in oklab,
+            var(--lecturer-success) 24%,
+            transparent
+        );
+        color: var(--lecturer-success);
+    }
+
     .lecturer-table-wrap {
         @apply w-full overflow-x-auto;
     }

resources/js/app.tsx

@@ -9,10 +9,12 @@ import SettingsLayout from '@/layouts/settings/layout';
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 const fullScreenPages = new Set([
     'welcome',
+    'auth/admin-login',
     'auth/login',
     'auth/register-choice',
     'auth/register-dosen',
     'auth/register-mahasiswa',
+    'embed',
 ]);
 
 createInertiaApp({

resources/js/components/admin/admin-shell.tsx

@@ -0,0 +1,250 @@
+import { router } from '@inertiajs/react';
+import { LayoutDashboard, LogOut, MessageSquare, Settings } from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useState, useSyncExternalStore } from 'react';
+
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarHeader,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarRail,
+    SidebarTrigger,
+    useSidebar,
+} from '@/components/ui/sidebar';
+import { clearAuthSession, getStoredAuthUser } from '@/lib/auth';
+import {
+    dashboard as adminDashboard,
+    login as adminLogin,
+    pengaturan as adminPengaturan,
+} from '@/routes/admin';
+
+type AdminMenu = 'dashboard' | 'settings';
+
+const adminSidebarStyle = {
+    '--sidebar-width': '212px',
+    '--sidebar-width-icon': '64px',
+} as CSSProperties;
+
+function getStoredAdminName(): string {
+    return getStoredAuthUser()?.name ?? 'Admin';
+}
+
+function subscribeToAuthStorage(onStoreChange: () => void): () => void {
+    if (typeof window === 'undefined') {
+        return () => {};
+    }
+
+    window.addEventListener('storage', onStoreChange);
+
+    return () => window.removeEventListener('storage', onStoreChange);
+}
+
+function useStoredAdminName(): string {
+    return useSyncExternalStore(
+        subscribeToAuthStorage,
+        getStoredAdminName,
+        () => 'Admin',
+    );
+}
+
+function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join('');
+}
+
+function confirmLogout(): void {
+    clearAuthSession();
+    router.visit(adminLogin());
+}
+
+function AdminSidebarBrand() {
+    const { state, toggleSidebar } = useSidebar();
+
+    const handleBrandClick = (): void => {
+        if (state === 'collapsed') {
+            toggleSidebar();
+        }
+    };
+
+    return (
+        <button
+            aria-label="Buka sidebar"
+            className="lecturer-brand"
+            onClick={handleBrandClick}
+            type="button"
+        >
+            <span className="lecturer-brand-mark">
+                <MessageSquare className="size-4" />
+            </span>
+            <span className="lecturer-brand-copy">RAG Hub</span>
+        </button>
+    );
+}
+
+function AdminSidebar({ activeMenu }: { activeMenu: AdminMenu }) {
+    const adminName = useStoredAdminName();
+    const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
+
+    return (
+        <>
+            <Sidebar className="lecturer-sidebar" collapsible="icon">
+                <SidebarHeader className="lecturer-sidebar-header">
+                    <AdminSidebarBrand />
+
+                    <SidebarTrigger className="lecturer-sidebar-trigger" />
+                </SidebarHeader>
+
+                <SidebarContent className="lecturer-sidebar-content">
+                    <SidebarGroup className="lecturer-nav-group">
+                        <SidebarGroupContent>
+                            <SidebarMenu className="lecturer-nav-list">
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton
+                                        className="lecturer-nav-button"
+                                        isActive={activeMenu === 'dashboard'}
+                                        onClick={() =>
+                                            router.visit(adminDashboard())
+                                        }
+                                        tooltip="Dashboard Admin"
+                                    >
+                                        <LayoutDashboard className="size-4" />
+                                        <span>Dashboard Admin</span>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton
+                                        className="lecturer-nav-button"
+                                        isActive={activeMenu === 'settings'}
+                                        onClick={() =>
+                                            router.visit(adminPengaturan())
+                                        }
+                                        tooltip="Pengaturan"
+                                    >
+                                        <Settings className="size-4" />
+                                        <span>Pengaturan</span>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                    </SidebarGroup>
+                </SidebarContent>
+
+                <SidebarFooter className="lecturer-sidebar-footer">
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="lecturer-user-button"
+                                tooltip={adminName}
+                            >
+                                <Avatar className="lecturer-user-avatar">
+                                    <AvatarFallback>
+                                        {getInitials(adminName) || 'AD'}
+                                    </AvatarFallback>
+                                </Avatar>
+                                <span className="lecturer-user-copy">
+                                    <span className="lecturer-user-name">
+                                        {adminName}
+                                    </span>
+                                    <span className="lecturer-user-role">
+                                        Admin
+                                    </span>
+                                </span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="lecturer-logout-button"
+                                onClick={() => setIsLogoutDialogOpen(true)}
+                                tooltip="Logout"
+                            >
+                                <LogOut className="size-4" />
+                                <span>Logout</span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarFooter>
+
+                <SidebarRail />
+            </Sidebar>
+
+            <Dialog
+                onOpenChange={setIsLogoutDialogOpen}
+                open={isLogoutDialogOpen}
+            >
+                <DialogContent className="lecturer-confirm-dialog">
+                    <DialogHeader>
+                        <DialogTitle>Keluar dari akun admin?</DialogTitle>
+                        <DialogDescription>
+                            Anda perlu login kembali untuk mengakses dashboard
+                            admin.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <DialogFooter className="lecturer-confirm-dialog-footer">
+                        <Button
+                            className="lecturer-cancel-button"
+                            onClick={() => setIsLogoutDialogOpen(false)}
+                            type="button"
+                            variant="outline"
+                        >
+                            Batal
+                        </Button>
+                        <Button
+                            className="lecturer-danger-button"
+                            onClick={confirmLogout}
+                            type="button"
+                        >
+                            Logout
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}
+
+export function AdminShell({
+    activeMenu = 'dashboard',
+    children,
+}: {
+    activeMenu?: AdminMenu;
+    children: ReactNode;
+}) {
+    return (
+        <SidebarProvider
+            className="lecturer-dashboard-shell"
+            defaultOpen
+            style={adminSidebarStyle}
+        >
+            <AdminSidebar activeMenu={activeMenu} />
+
+            <SidebarInset className="lecturer-workspace">
+                {children}
+            </SidebarInset>
+        </SidebarProvider>
+    );
+}

resources/js/components/dosen/dosen-shell.tsx

@@ -1,9 +1,18 @@
 import { router } from '@inertiajs/react';
 import { LayoutDashboard, LogOut, MessageSquare, Settings } from 'lucide-react';
 import type { CSSProperties, ReactNode } from 'react';
-import { useSyncExternalStore } from 'react';
+import { useState, useSyncExternalStore } from 'react';
 
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
 import {
     Sidebar,
     SidebarContent,
@@ -62,7 +71,7 @@ function getInitials(name: string): string {
         .join('');
 }
 
-function handleLogout(): void {
+function confirmLogout(): void {
     clearAuthSession();
     router.visit(login());
 }
@@ -93,87 +102,123 @@ function DosenSidebarBrand() {
 
 function DosenSidebar({ activeMenu }: { activeMenu: DosenMenu }) {
     const lecturerName = useStoredLecturerName();
+    const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
 
     return (
-        <Sidebar className="lecturer-sidebar" collapsible="icon">
-            <SidebarHeader className="lecturer-sidebar-header">
-                <DosenSidebarBrand />
-
-                <SidebarTrigger className="lecturer-sidebar-trigger" />
-            </SidebarHeader>
-
-            <SidebarContent className="lecturer-sidebar-content">
-                <SidebarGroup className="lecturer-nav-group">
-                    <SidebarGroupContent>
-                        <SidebarMenu className="lecturer-nav-list">
-                            <SidebarMenuItem>
-                                <SidebarMenuButton
-                                    className="lecturer-nav-button"
-                                    isActive={activeMenu === 'dashboard'}
-                                    onClick={() => router.visit(dosen())}
-                                    tooltip="Dashboard KB"
-                                >
-                                    <LayoutDashboard className="size-4" />
-                                    <span>Dashboard KB</span>
-                                </SidebarMenuButton>
-                            </SidebarMenuItem>
-
-                            <SidebarMenuItem>
-                                <SidebarMenuButton
-                                    className="lecturer-nav-button"
-                                    isActive={activeMenu === 'settings'}
-                                    onClick={() =>
-                                        router.visit(dosenPengaturan())
-                                    }
-                                    tooltip="Pengaturan"
-                                >
-                                    <Settings className="size-4" />
-                                    <span>Pengaturan</span>
-                                </SidebarMenuButton>
-                            </SidebarMenuItem>
-                        </SidebarMenu>
-                    </SidebarGroupContent>
-                </SidebarGroup>
-            </SidebarContent>
-
-            <SidebarFooter className="lecturer-sidebar-footer">
-                <SidebarMenu>
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="lecturer-user-button"
-                            tooltip={lecturerName}
-                        >
-                            <Avatar className="lecturer-user-avatar">
-                                <AvatarFallback>
-                                    {getInitials(lecturerName) || 'DS'}
-                                </AvatarFallback>
-                            </Avatar>
-                            <span className="lecturer-user-copy">
-                                <span className="lecturer-user-name">
-                                    {lecturerName}
+        <>
+            <Sidebar className="lecturer-sidebar" collapsible="icon">
+                <SidebarHeader className="lecturer-sidebar-header">
+                    <DosenSidebarBrand />
+
+                    <SidebarTrigger className="lecturer-sidebar-trigger" />
+                </SidebarHeader>
+
+                <SidebarContent className="lecturer-sidebar-content">
+                    <SidebarGroup className="lecturer-nav-group">
+                        <SidebarGroupContent>
+                            <SidebarMenu className="lecturer-nav-list">
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton
+                                        className="lecturer-nav-button"
+                                        isActive={activeMenu === 'dashboard'}
+                                        onClick={() => router.visit(dosen())}
+                                        tooltip="Dashboard KB"
+                                    >
+                                        <LayoutDashboard className="size-4" />
+                                        <span>Dashboard KB</span>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton
+                                        className="lecturer-nav-button"
+                                        isActive={activeMenu === 'settings'}
+                                        onClick={() =>
+                                            router.visit(dosenPengaturan())
+                                        }
+                                        tooltip="Pengaturan"
+                                    >
+                                        <Settings className="size-4" />
+                                        <span>Pengaturan</span>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                    </SidebarGroup>
+                </SidebarContent>
+
+                <SidebarFooter className="lecturer-sidebar-footer">
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="lecturer-user-button"
+                                tooltip={lecturerName}
+                            >
+                                <Avatar className="lecturer-user-avatar">
+                                    <AvatarFallback>
+                                        {getInitials(lecturerName) || 'DS'}
+                                    </AvatarFallback>
+                                </Avatar>
+                                <span className="lecturer-user-copy">
+                                    <span className="lecturer-user-name">
+                                        {lecturerName}
+                                    </span>
+                                    <span className="lecturer-user-role">
+                                        Dosen
+                                    </span>
                                 </span>
-                                <span className="lecturer-user-role">
-                                    Dosen
-                                </span>
-                            </span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="lecturer-logout-button"
-                            onClick={handleLogout}
-                            tooltip="Logout"
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                className="lecturer-logout-button"
+                                onClick={() => setIsLogoutDialogOpen(true)}
+                                tooltip="Logout"
+                            >
+                                <LogOut className="size-4" />
+                                <span>Logout</span>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarFooter>
+
+                <SidebarRail />
+            </Sidebar>
+
+            <Dialog
+                onOpenChange={setIsLogoutDialogOpen}
+                open={isLogoutDialogOpen}
+            >
+                <DialogContent className="lecturer-confirm-dialog">
+                    <DialogHeader>
+                        <DialogTitle>Keluar dari akun?</DialogTitle>
+                        <DialogDescription>
+                            Anda perlu login kembali untuk mengakses dashboard
+                            dosen.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <DialogFooter className="lecturer-confirm-dialog-footer">
+                        <Button
+                            className="lecturer-cancel-button"
+                            onClick={() => setIsLogoutDialogOpen(false)}
+                            type="button"
+                            variant="outline"
+                        >
+                            Batal
+                        </Button>
+                        <Button
+                            className="lecturer-danger-button"
+                            onClick={confirmLogout}
+                            type="button"
                         >
-                            <LogOut className="size-4" />
-                            <span>Logout</span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-                </SidebarMenu>
-            </SidebarFooter>
-
-            <SidebarRail />
-        </Sidebar>
+                            Logout
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </>
     );
 }
 

resources/js/components/student/student-shell.tsx

@@ -107,7 +107,7 @@ function getInitials(name: string): string {
         .join('');
 }
 
-function handleLogout(): void {
+function confirmLogout(): void {
     clearAuthSession();
     router.visit(login());
 }
@@ -153,6 +153,7 @@ function StudentSidebar({
     const [isHistoryOpen, setIsHistoryOpen] = useState(true);
     const [deleteDialogMessage, setDeleteDialogMessage] = useState<string>();
     const [isDeletingSession, setIsDeletingSession] = useState(false);
+    const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
     const [sessionToDelete, setSessionToDelete] =
         useState<ChatSessionResponse>();
     const { state } = useSidebar();
@@ -366,7 +367,7 @@ function StudentSidebar({
                         <SidebarMenuItem>
                             <SidebarMenuButton
                                 className="student-logout-button"
-                                onClick={handleLogout}
+                                onClick={() => setIsLogoutDialogOpen(true)}
                                 tooltip="Logout"
                             >
                                 <LogOut className="size-4" />
@@ -437,6 +438,38 @@ function StudentSidebar({
                     </DialogFooter>
                 </DialogContent>
             </Dialog>
+
+            <Dialog
+                onOpenChange={setIsLogoutDialogOpen}
+                open={isLogoutDialogOpen}
+            >
+                <DialogContent className="student-delete-dialog">
+                    <DialogHeader>
+                        <DialogTitle>Keluar dari akun?</DialogTitle>
+                        <DialogDescription>
+                            Anda perlu login kembali untuk mengakses sesi chat.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <DialogFooter className="student-delete-dialog-footer">
+                        <Button
+                            className="student-delete-cancel"
+                            onClick={() => setIsLogoutDialogOpen(false)}
+                            type="button"
+                            variant="outline"
+                        >
+                            Batal
+                        </Button>
+                        <Button
+                            className="student-delete-confirm"
+                            onClick={confirmLogout}
+                            type="button"
+                        >
+                            Logout
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
         </>
     );
 }

resources/js/components/ui/sonner.tsx

@@ -17,6 +17,9 @@ function Toaster({ ...props }: ToasterProps) {
                     '--normal-bg': 'var(--popover)',
                     '--normal-text': 'var(--popover-foreground)',
                     '--normal-border': 'var(--border)',
+                    '--success-bg': 'var(--app-primary-soft)',
+                    '--success-border': 'var(--app-border-strong)',
+                    '--success-text': 'var(--app-primary)',
                 } as React.CSSProperties
             }
             {...props}

resources/js/hooks/use-flash-toast.ts

@@ -1,19 +1,42 @@
 import { router } from '@inertiajs/react';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import type { FlashToast } from '@/types/ui';
 
 export function useFlashToast(): void {
+    const lastToastRef = useRef<
+        { signature: string; timestamp: number } | undefined
+    >(undefined);
+
+    const showFlashToast = useCallback((data?: FlashToast | null): void => {
+        if (!data) {
+            return;
+        }
+
+        const signature = `${data.type}:${data.message}`;
+        const timestamp = Date.now();
+        const lastToast = lastToastRef.current;
+
+        if (
+            lastToast?.signature === signature &&
+            timestamp - lastToast.timestamp < 1000
+        ) {
+            return;
+        }
+
+        lastToastRef.current = { signature, timestamp };
+        toast[data.type](data.message);
+    }, []);
+
     useEffect(() => {
         return router.on('flash', (event) => {
-            const flash = (event as CustomEvent).detail?.flash;
-            const data = flash?.toast as FlashToast | undefined;
+            const flash = (
+                event as CustomEvent<{
+                    flash?: { toast?: FlashToast | null };
+                }>
+            ).detail?.flash;
 
-            if (!data) {
-                return;
-            }
-
-            toast[data.type](data.message);
+            showFlashToast(flash?.toast);
         });
-    }, []);
+    }, [showFlashToast]);
 }

resources/js/pages/admin.tsx

@@ -0,0 +1,27 @@
+import { Head } from '@inertiajs/react';
+
+import { AdminShell } from '@/components/admin/admin-shell';
+import AppearanceToggle from '@/components/appearance-toggle';
+
+export default function AdminDashboard() {
+    return (
+        <>
+            <Head title="Dashboard Admin" />
+
+            <AdminShell>
+                <main className="lecturer-page">
+                    <section className="lecturer-page-header">
+                        <div>
+                            <h1>Dashboard Admin</h1>
+                            <p>Halaman ini masih kosong.</p>
+                        </div>
+
+                        <div className="lecturer-header-actions">
+                            <AppearanceToggle className="lecturer-theme-toggle" />
+                        </div>
+                    </section>
+                </main>
+            </AdminShell>
+        </>
+    );
+}

resources/js/pages/admin/pengaturan.tsx

@@ -0,0 +1,22 @@
+import { Head } from '@inertiajs/react';
+
+import { AdminShell } from '@/components/admin/admin-shell';
+
+export default function PengaturanAdmin() {
+    return (
+        <>
+            <Head title="Pengaturan Admin" />
+
+            <AdminShell activeMenu="settings">
+                <main className="lecturer-page">
+                    <section className="lecturer-page-header">
+                        <div>
+                            <h1>Pengaturan</h1>
+                            <p>Halaman ini masih kosong.</p>
+                        </div>
+                    </section>
+                </main>
+            </AdminShell>
+        </>
+    );
+}

resources/js/pages/auth/admin-login.tsx

@@ -0,0 +1,173 @@
+import { Head, Link, useForm, usePage } from '@inertiajs/react';
+import type { FormEvent } from 'react';
+import { toast } from 'sonner';
+
+import AppearanceToggle from '@/components/appearance-toggle';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
+import { home } from '@/routes';
+import { store as adminLoginStore } from '@/routes/admin/login';
+import type { FlashToast } from '@/types/ui';
+
+type AdminLoginProps = {
+    status?: string;
+};
+
+type AdminLoginPageProps = {
+    flash?: {
+        status?: string | null;
+        toast?: FlashToast | null;
+    };
+};
+
+type AdminLoginForm = {
+    email: string;
+    password: string;
+    remember: boolean;
+};
+
+export default function AdminLogin({ status }: AdminLoginProps) {
+    const { flash } = usePage<AdminLoginPageProps>().props;
+    const { data, errors, post, processing, setData } =
+        useForm<AdminLoginForm>({
+            email: '',
+            password: '',
+            remember: true,
+        });
+    const formErrors = errors as Partial<
+        Record<keyof AdminLoginForm | 'auth', string>
+    >;
+    const backendError =
+        formErrors.auth ?? formErrors.email ?? formErrors.password;
+    const statusMessage = status ?? flash?.status;
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+        event.preventDefault();
+
+        post(adminLoginStore.url(), {
+            onSuccess: () => toast.success('Login admin berhasil.'),
+            preserveScroll: true,
+        });
+    };
+
+    return (
+        <>
+            <Head title="Admin Login" />
+
+            <main className="register-shell">
+                <AppearanceToggle />
+
+                <Card className="register-card login-card">
+                    <CardContent className="login-card-content">
+                        <Link href={home()} className="register-back-link">
+                            &larr; Kembali
+                        </Link>
+
+                        <h1 className="register-heading login-heading">
+                            Admin Login
+                        </h1>
+
+                        <form className="login-form" onSubmit={handleSubmit}>
+                            <div className="register-field">
+                                <Label
+                                    htmlFor="admin-email"
+                                    className="register-label"
+                                >
+                                    Email
+                                </Label>
+                                <Input
+                                    id="admin-email"
+                                    name="email"
+                                    type="email"
+                                    autoComplete="email"
+                                    autoFocus
+                                    onChange={(event) =>
+                                        setData('email', event.target.value)
+                                    }
+                                    placeholder="Masukkan email admin"
+                                    tabIndex={1}
+                                    value={data.email}
+                                    className="register-input"
+                                />
+                            </div>
+
+                            <div className="register-field">
+                                <Label
+                                    htmlFor="admin-password"
+                                    className="register-label"
+                                >
+                                    Password
+                                </Label>
+                                <Input
+                                    id="admin-password"
+                                    name="password"
+                                    type="password"
+                                    autoComplete="current-password"
+                                    onChange={(event) =>
+                                        setData('password', event.target.value)
+                                    }
+                                    placeholder="********"
+                                    tabIndex={2}
+                                    value={data.password}
+                                    className="register-input"
+                                />
+                            </div>
+
+                            <div className="login-remember">
+                                <Checkbox
+                                    id="admin-remember"
+                                    name="remember"
+                                    checked={data.remember}
+                                    onCheckedChange={(checked) => {
+                                        setData('remember', checked === true);
+                                    }}
+                                    tabIndex={3}
+                                />
+                                <Label
+                                    htmlFor="admin-remember"
+                                    className="login-remember-label"
+                                >
+                                    Remember me
+                                </Label>
+                            </div>
+
+                            <Button
+                                type="submit"
+                                className="register-submit login-submit"
+                                tabIndex={4}
+                                disabled={processing}
+                                data-test="admin-login-button"
+                            >
+                                {processing ? (
+                                    <LoadingIndicator
+                                        label="Masuk"
+                                        spinnerClassName="size-3.5"
+                                    />
+                                ) : (
+                                    'Sign In'
+                                )}
+                            </Button>
+                        </form>
+
+                        {(backendError ?? statusMessage) && (
+                            <p
+                                className={
+                                    backendError
+                                        ? 'login-status login-error'
+                                        : 'login-status'
+                                }
+                                role={backendError ? 'alert' : undefined}
+                            >
+                                {backendError ?? statusMessage}
+                            </p>
+                        )}
+                    </CardContent>
+                </Card>
+            </main>
+        </>
+    );
+}

resources/js/pages/auth/forgot-password.tsx

@@ -15,7 +15,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
             <Head title="Forgot password" />
 
             {status && (
-                <div className="mb-4 text-center text-sm font-medium text-green-600">
+                <div className="mb-4 text-center text-sm font-medium text-primary">
                     {status}
                 </div>
             )}

resources/js/pages/auth/login.tsx

@@ -1,5 +1,7 @@
-import { Head, Link, useForm } from '@inertiajs/react';
+import { Head, Link, useForm, usePage } from '@inertiajs/react';
 import type { FormEvent } from 'react';
+import { toast } from 'sonner';
+
 import AppearanceToggle from '@/components/appearance-toggle';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
@@ -9,12 +11,20 @@ import { Label } from '@/components/ui/label';
 import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import { home, register } from '@/routes';
 import { store as loginStore } from '@/routes/auth/login';
+import type { FlashToast } from '@/types/ui';
 
 type LoginProps = {
     canRegister?: boolean;
     status?: string;
 };
 
+type LoginPageProps = {
+    flash?: {
+        status?: string | null;
+        toast?: FlashToast | null;
+    };
+};
+
 type LoginForm = {
     email: string;
     password: string;
@@ -22,19 +32,24 @@ type LoginForm = {
 };
 
 export default function Login({ canRegister = true, status }: LoginProps) {
+    const { flash } = usePage<LoginPageProps>().props;
     const { data, errors, post, processing, setData } = useForm<LoginForm>({
         email: '',
         password: '',
         remember: true,
     });
-    const formErrors = errors as Partial<Record<keyof LoginForm | 'auth', string>>;
+    const formErrors = errors as Partial<
+        Record<keyof LoginForm | 'auth', string>
+    >;
     const backendError =
         formErrors.auth ?? formErrors.email ?? formErrors.password;
+    const statusMessage = status ?? flash?.status;
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
         event.preventDefault();
 
         post(loginStore.url(), {
+            onSuccess: () => toast.success('Login berhasil.'),
             preserveScroll: true,
         });
     };
@@ -138,7 +153,7 @@ export default function Login({ canRegister = true, status }: LoginProps) {
                             </Button>
                         </form>
 
-                        {(backendError ?? status) && (
+                        {(backendError ?? statusMessage) && (
                             <p
                                 className={
                                     backendError
@@ -147,7 +162,7 @@ export default function Login({ canRegister = true, status }: LoginProps) {
                                 }
                                 role={backendError ? 'alert' : undefined}
                             >
-                                {backendError ?? status}
+                                {backendError ?? statusMessage}
                             </p>
                         )}
 

resources/js/pages/auth/verify-email.tsx

@@ -12,7 +12,7 @@ export default function VerifyEmail({ status }: { status?: string }) {
             <Head title="Email verification" />
 
             {status === 'verification-link-sent' && (
-                <div className="mb-4 text-center text-sm font-medium text-green-600">
+                <div className="mb-4 text-center text-sm font-medium text-primary">
                     A new verification link has been sent to the email address
                     you provided during registration.
                 </div>

resources/js/pages/dosen-detail.tsx

@@ -10,7 +10,7 @@ import {
     Upload,
 } from 'lucide-react';
 import type { ChangeEvent, DragEvent, FormEvent } from 'react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { DosenShell } from '@/components/dosen/dosen-shell';
 import { Button } from '@/components/ui/button';
@@ -211,6 +211,23 @@ export default function DosenDetail({
     const deleteCourseMessage = deleteErrors.course;
     const isUpdatingCourse = editForm.processing;
     const isDeletingCourse = deleteForm.processing;
+    const hasProcessingDocuments = documents.some(
+        (document) => document.status === 'processing',
+    );
+
+    useEffect(() => {
+        if (!hasProcessingDocuments) {
+            return;
+        }
+
+        const intervalId = window.setInterval(() => {
+            router.reload({
+                only: ['backendMessage', 'documents'],
+            });
+        }, 7000);
+
+        return () => window.clearInterval(intervalId);
+    }, [hasProcessingDocuments]);
 
     function handleUploadDocument(file: File): void {
         setUploadMessage(undefined);

resources/js/pages/embed.tsx

@@ -0,0 +1,721 @@
+import { Head, router } from '@inertiajs/react';
+import { BookOpen, Bot, MessageSquare, Plus, Send, Sparkles, Trash2, UserRound, X } from 'lucide-react';
+import type { CSSProperties, FormEvent, KeyboardEvent } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
+import { Spinner } from '@/components/ui/spinner';
+import type {
+    ChatMessageResponse,
+    ChatSessionResponse,
+    CourseResponse,
+} from '@/lib/rag';
+import { createLocalUserMessage } from '@/lib/rag';
+import { embed as embedRoute } from '@/routes';
+import { destroy as destroyEmbedSession } from '@/routes/embed';
+import { store as storeEmbedMessage } from '@/routes/embed/messages';
+import { store as storeEmbedSession } from '@/routes/embed/sessions';
+
+type EmbedConfig = {
+    background: string;
+    border: string;
+    courseId?: string | null;
+    danger: string;
+    muted: string;
+    primary: string;
+    primarySoft: string;
+    radius: string;
+    subtitle: string;
+    surface: string;
+    text: string;
+    title: string;
+    userName: string;
+};
+
+type PendingInitialChat = {
+    content: string;
+    courseId: string;
+};
+
+type EmbedProps = {
+    backendMessage?: string | null;
+    chatSessions: ChatSessionResponse[];
+    config: EmbedConfig;
+    courses: CourseResponse[];
+    currentSession?: ChatSessionResponse | null;
+    isAuthorized: boolean;
+    isDirectChatMode?: boolean;
+    messages: ChatMessageResponse[];
+    pendingInitialChat?: PendingInitialChat | null;
+    selectedCourseId?: string | null;
+    sessionId?: string | null;
+};
+
+function isUserMessage(role: string): boolean {
+    return ['human', 'student', 'user'].includes(role.toLowerCase());
+}
+
+function firstError(
+    errors: Record<string, string | string[]>,
+): string | undefined {
+    const [message] = Object.values(errors);
+
+    return Array.isArray(message) ? message[0] : message;
+}
+
+function formatMessageTime(value?: string): string {
+    if (!value) {
+        return '';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(date);
+}
+
+function configuredUrl(
+    baseUrl: string,
+    overrides: Record<string, string | null> = {},
+): string {
+    if (typeof window === 'undefined') {
+        return baseUrl;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    params.delete('api_key');
+    params.delete('token');
+
+    for (const [key, value] of Object.entries(overrides)) {
+        if (value === null || value === '') {
+            params.delete(key);
+
+            continue;
+        }
+
+        params.set(key, value);
+    }
+
+    const query = params.toString();
+
+    return query ? `${baseUrl}?${query}` : baseUrl;
+}
+
+function appendUniqueMessages(
+    currentMessages: ChatMessageResponse[],
+    nextMessages: ChatMessageResponse[],
+): ChatMessageResponse[] {
+    const existingIds = new Set(
+        currentMessages.map((message) => message.uuid_id),
+    );
+
+    return [
+        ...currentMessages,
+        ...nextMessages.filter((message) => !existingIds.has(message.uuid_id)),
+    ];
+}
+
+function TypingText({ text }: { text: string }) {
+    const [visibleLength, setVisibleLength] = useState(0);
+
+    useEffect(() => {
+        const intervalId = window.setInterval(() => {
+            setVisibleLength((currentLength) => {
+                if (currentLength >= text.length) {
+                    window.clearInterval(intervalId);
+
+                    return currentLength;
+                }
+
+                return currentLength + 1;
+            });
+        }, 14);
+
+        return () => window.clearInterval(intervalId);
+    }, [text]);
+
+    return (
+        <>
+            {text.slice(0, visibleLength)}
+            {visibleLength < text.length && (
+                <span className="embed-message-caret" aria-hidden />
+            )}
+        </>
+    );
+}
+
+function EmbedMessage({
+    message,
+    shouldAnimateTyping,
+}: {
+    message: ChatMessageResponse;
+    shouldAnimateTyping?: boolean;
+}) {
+    const isUser = isUserMessage(message.role);
+
+    return (
+        <article
+            className={
+                isUser
+                    ? 'embed-message embed-message--user'
+                    : 'embed-message embed-message--assistant'
+            }
+        >
+            {!isUser && (
+                <span className="embed-message-avatar embed-message-avatar--assistant">
+                    <Bot className="size-4" />
+                </span>
+            )}
+
+            <div className="embed-message-bubble">
+                <p className="embed-message-content">
+                    {!isUser && shouldAnimateTyping ? (
+                        <TypingText key={message.uuid_id} text={message.content} />
+                    ) : (
+                        message.content
+                    )}
+                </p>
+                <span className="embed-message-time">
+                    {formatMessageTime(message.created_at)}
+                </span>
+            </div>
+
+            {isUser && (
+                <span className="embed-message-avatar embed-message-avatar--user">
+                    <UserRound className="size-4" />
+                </span>
+            )}
+        </article>
+    );
+}
+
+function EmbedComposer({
+    courses,
+    isProcessing,
+    onCourseChange,
+    onQuestionChange,
+    onSubmit,
+    question,
+    selectedCourseId,
+}: {
+    courses: CourseResponse[];
+    isProcessing: boolean;
+    onCourseChange: (courseId: string) => void;
+    onQuestionChange: (question: string) => void;
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    question: string;
+    selectedCourseId: string;
+}) {
+    const canSubmit =
+        !isProcessing &&
+        selectedCourseId.length > 0 &&
+        question.trim().length > 0;
+
+    function handleQuestionKeyDown(
+        event: KeyboardEvent<HTMLTextAreaElement>,
+    ): void {
+        if (
+            event.key !== 'Enter' ||
+            event.shiftKey ||
+            event.nativeEvent.isComposing
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+
+        if (canSubmit) {
+            event.currentTarget.form?.requestSubmit();
+        }
+    }
+
+    return (
+        <form className="embed-composer" onSubmit={onSubmit}>
+            <div className="embed-course-row">
+                <BookOpen className="size-4" />
+                <span>Mata Kuliah:</span>
+                <select
+                    aria-label="Mata kuliah"
+                    disabled={courses.length === 0}
+                    onChange={(event) => onCourseChange(event.target.value)}
+                    value={selectedCourseId}
+                >
+                    <option value="" disabled>
+                        Pilih mata kuliah
+                    </option>
+                    {courses.map((course) => (
+                        <option key={course.id} value={String(course.id)}>
+                            {course.title}
+                        </option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="embed-composer-divider" />
+
+            <div className="embed-question-row">
+                <Sparkles className="size-4" />
+                <textarea
+                    aria-label="Pertanyaan"
+                    onChange={(event) => onQuestionChange(event.target.value)}
+                    onKeyDown={handleQuestionKeyDown}
+                    placeholder="Tulis pertanyaanmu disini..."
+                    value={question}
+                />
+            </div>
+
+            <button
+                aria-label="Kirim pertanyaan"
+                className="embed-send-button"
+                disabled={!canSubmit}
+                type="submit"
+            >
+                {isProcessing ? (
+                    <Spinner className="size-4" />
+                ) : (
+                    <Send className="size-4" />
+                )}
+            </button>
+        </form>
+    );
+}
+
+function EmbedHistory({
+    activeSessionId,
+    chatSessions,
+    isProcessing,
+    onDeleteSession,
+    onOpenSession,
+}: {
+    activeSessionId?: string | null;
+    chatSessions: ChatSessionResponse[];
+    isProcessing: boolean;
+    onDeleteSession: (sessionId: string) => void;
+    onOpenSession: (sessionId: string) => void;
+}) {
+    return (
+        <section className="embed-history">
+            {chatSessions.length === 0 ? (
+                <p className="embed-empty-copy">Belum ada riwayat chat.</p>
+            ) : (
+                chatSessions.map((session) => (
+                    <button
+                        className="embed-history-item"
+                        data-active={session.uuid_id === activeSessionId}
+                        key={session.uuid_id}
+                        onClick={() => onOpenSession(session.uuid_id)}
+                        type="button"
+                    >
+                        <span>
+                            <strong>{session.title}</strong>
+                            <small>
+                                {formatMessageTime(
+                                    session.last_message_at ??
+                                        session.updated_at ??
+                                        session.created_at,
+                                )}
+                            </small>
+                        </span>
+
+                        <span
+                            aria-disabled={isProcessing}
+                            aria-label="Hapus sesi"
+                            className="embed-history-delete"
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onDeleteSession(session.uuid_id);
+                            }}
+                            role="button"
+                            tabIndex={0}
+                        >
+                            <Trash2 className="size-4" />
+                        </span>
+                    </button>
+                ))
+            )}
+        </section>
+    );
+}
+
+export default function Embed({
+    backendMessage: initialBackendMessage,
+    chatSessions,
+    config,
+    courses,
+    currentSession,
+    isAuthorized,
+    isDirectChatMode = false,
+    messages: initialMessages,
+    pendingInitialChat,
+    selectedCourseId: initialSelectedCourseId,
+    sessionId,
+}: EmbedProps) {
+    const pendingInitialChatRef = useRef(pendingInitialChat ?? undefined);
+    const hasStartedPendingInitialChatRef = useRef(false);
+    const isWaitingForDirectAssistantRef = useRef(false);
+    const knownMessageIdsRef = useRef(
+        new Set(initialMessages.map((message) => message.uuid_id)),
+    );
+    const [pendingUserMessage] = useState<ChatMessageResponse | undefined>(
+        pendingInitialChat
+            ? createLocalUserMessage(pendingInitialChat.content)
+            : undefined,
+    );
+    const pendingUserMessageRef = useRef(pendingUserMessage);
+    const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
+    const [animatedAssistantMessageId, setAnimatedAssistantMessageId] =
+        useState<string>();
+    const [isProcessing, setIsProcessing] = useState(
+        Boolean(pendingInitialChat),
+    );
+    const [localBackendMessage, setLocalBackendMessage] = useState<string>();
+    const [optimisticMessages, setOptimisticMessages] = useState<
+        ChatMessageResponse[]
+    >(() => (pendingUserMessage ? [pendingUserMessage] : []));
+    const [question, setQuestion] = useState('');
+    const [selectedCourseId, setSelectedCourseId] = useState(
+        initialSelectedCourseId ??
+            config.courseId ??
+            (courses[0]?.id === undefined ? '' : String(courses[0].id)),
+    );
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const backendMessage = localBackendMessage ?? initialBackendMessage;
+    const messages = useMemo(
+        () => appendUniqueMessages(initialMessages, optimisticMessages),
+        [initialMessages, optimisticMessages],
+    );
+    const rootStyle = {
+        '--embed-bg': config.background,
+        '--embed-border': config.border,
+        '--embed-danger': config.danger,
+        '--embed-muted': config.muted,
+        '--embed-primary': config.primary,
+        '--embed-primary-soft': config.primarySoft,
+        '--embed-radius': config.radius,
+        '--embed-surface': config.surface,
+        '--embed-text': config.text,
+    } as CSSProperties;
+
+    const sendMessage = useCallback(
+        (
+            content: string,
+            courseId: string,
+            optimisticUserMessage?: ChatMessageResponse,
+        ): void => {
+            if (!sessionId) {
+                return;
+            }
+
+            setLocalBackendMessage(undefined);
+
+            router.post(
+                configuredUrl(storeEmbedMessage.url(sessionId)),
+                {
+                    content,
+                    course_id: courseId,
+                },
+                {
+                    onError: (errors) => {
+                        isWaitingForDirectAssistantRef.current = false;
+
+                        if (optimisticUserMessage) {
+                            setOptimisticMessages((currentMessages) =>
+                                currentMessages.filter(
+                                    (message) =>
+                                        message.uuid_id !==
+                                        optimisticUserMessage.uuid_id,
+                                ),
+                            );
+                        }
+
+                        pendingInitialChatRef.current = undefined;
+                        setQuestion(content);
+                        setLocalBackendMessage(firstError(errors));
+                    },
+                    onFinish: () => setIsProcessing(false),
+                    onStart: () => {
+                        isWaitingForDirectAssistantRef.current =
+                            isDirectChatMode;
+                        setIsProcessing(true);
+                    },
+                    onSuccess: () => {
+                        pendingInitialChatRef.current = undefined;
+                        setOptimisticMessages([]);
+                        setQuestion('');
+                    },
+                    preserveScroll: true,
+                },
+            );
+        },
+        [isDirectChatMode, sessionId],
+    );
+
+    useEffect(() => {
+        if (isDirectChatMode && isWaitingForDirectAssistantRef.current) {
+            const newAssistantMessage = messages.find(
+                (message) =>
+                    !knownMessageIdsRef.current.has(message.uuid_id) &&
+                    !isUserMessage(message.role),
+            );
+
+            if (newAssistantMessage) {
+                setAnimatedAssistantMessageId(newAssistantMessage.uuid_id);
+                isWaitingForDirectAssistantRef.current = false;
+            }
+        }
+
+        for (const message of messages) {
+            knownMessageIdsRef.current.add(message.uuid_id);
+        }
+    }, [isDirectChatMode, messages]);
+
+    useEffect(() => {
+        const scrollFrame = window.requestAnimationFrame(() => {
+            messagesEndRef.current?.scrollIntoView({ block: 'end' });
+        });
+
+        return () => window.cancelAnimationFrame(scrollFrame);
+    }, [messages, isProcessing]);
+
+    useEffect(() => {
+        const pendingInitialChat = pendingInitialChatRef.current;
+
+        if (!pendingInitialChat || hasStartedPendingInitialChatRef.current) {
+            return;
+        }
+
+        hasStartedPendingInitialChatRef.current = true;
+        const pendingMessage = pendingUserMessageRef.current;
+        const timeoutId = window.setTimeout(() => {
+            sendMessage(
+                pendingInitialChat.content,
+                pendingInitialChat.courseId,
+                pendingMessage,
+            );
+        }, 0);
+
+        return () => window.clearTimeout(timeoutId);
+    }, [sendMessage]);
+
+    function handleQuestionSubmit(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault();
+
+        const trimmedQuestion = question.trim();
+
+        if (!selectedCourseId || !trimmedQuestion) {
+            return;
+        }
+
+        if (!sessionId) {
+            setLocalBackendMessage(undefined);
+            router.post(
+                configuredUrl(storeEmbedSession.url()),
+                {
+                    course_id: selectedCourseId,
+                    title: trimmedQuestion,
+                },
+                {
+                    onError: (errors) => {
+                        setLocalBackendMessage(firstError(errors));
+                    },
+                    onFinish: () => setIsProcessing(false),
+                    onStart: () => setIsProcessing(true),
+                    preserveScroll: true,
+                },
+            );
+
+            return;
+        }
+
+        const userMessage = createLocalUserMessage(trimmedQuestion);
+        setQuestion('');
+        setOptimisticMessages((currentMessages) => [
+            ...currentMessages,
+            userMessage,
+        ]);
+        sendMessage(trimmedQuestion, selectedCourseId, userMessage);
+    }
+
+    function handleNewSession(): void {
+        setActiveTab('chat');
+        setOptimisticMessages([]);
+        setQuestion('');
+        router.visit(configuredUrl(embedRoute.url(), { session_id: null }));
+    }
+
+    function handleOpenSession(targetSessionId: string): void {
+        setActiveTab('chat');
+        router.visit(
+            configuredUrl(embedRoute.url(), { session_id: targetSessionId }),
+        );
+    }
+
+    function handleDeleteSession(targetSessionId: string): void {
+        if (!window.confirm('Hapus riwayat chat ini?')) {
+            return;
+        }
+
+        router.delete(configuredUrl(destroyEmbedSession.url(targetSessionId)), {
+            onError: (errors) => {
+                setLocalBackendMessage(firstError(errors));
+            },
+            preserveScroll: true,
+        });
+    }
+
+    function handleClose(): void {
+        window.parent?.postMessage({ type: 'sevima-raghub:close' }, '*');
+    }
+
+    return (
+        <>
+            <Head title={config.title} />
+
+            <main className="embed-shell" style={rootStyle}>
+                <header className="embed-toolbar">
+                    <div className="embed-tabs" role="tablist">
+                        <button
+                            aria-selected={activeTab === 'chat'}
+                            onClick={() => setActiveTab('chat')}
+                            role="tab"
+                            type="button"
+                        >
+                            Chat
+                        </button>
+                        <button
+                            aria-selected={activeTab === 'history'}
+                            onClick={() => setActiveTab('history')}
+                            role="tab"
+                            type="button"
+                        >
+                            Riwayat
+                        </button>
+                    </div>
+
+                    <div className="embed-actions">
+                        <button
+                            aria-label="Sesi baru"
+                            className="embed-icon-button embed-icon-button--primary"
+                            onClick={handleNewSession}
+                            type="button"
+                        >
+                            <Plus className="size-6" />
+                        </button>
+                        <button
+                            aria-label="Tutup iframe"
+                            className="embed-icon-button"
+                            onClick={handleClose}
+                            type="button"
+                        >
+                            <X className="size-6" />
+                        </button>
+                    </div>
+                </header>
+
+                {activeTab === 'history' ? (
+                    <EmbedHistory
+                        activeSessionId={sessionId}
+                        chatSessions={chatSessions}
+                        isProcessing={isProcessing}
+                        onDeleteSession={handleDeleteSession}
+                        onOpenSession={handleOpenSession}
+                    />
+                ) : (
+                    <section
+                        className={
+                            sessionId
+                                ? 'embed-chat embed-chat--session'
+                                : 'embed-chat'
+                        }
+                    >
+                        {!isAuthorized ? (
+                            <div className="embed-empty-state">
+                                <span className="embed-empty-icon">
+                                    <MessageSquare className="size-7" />
+                                </span>
+                                <h1>{config.title}</h1>
+                                <p>{backendMessage}</p>
+                            </div>
+                        ) : sessionId ? (
+                            <div className="embed-thread">
+                                {backendMessage && (
+                                    <p className="embed-status">
+                                        {backendMessage}
+                                    </p>
+                                )}
+
+                                {messages.map((message) => (
+                                    <EmbedMessage
+                                        key={message.uuid_id}
+                                        message={message}
+                                        shouldAnimateTyping={
+                                            message.uuid_id ===
+                                            animatedAssistantMessageId
+                                        }
+                                    />
+                                ))}
+
+                                {isProcessing && (
+                                    <article className="embed-message embed-message--assistant">
+                                        <span className="embed-message-avatar embed-message-avatar--assistant">
+                                            <Bot className="size-4" />
+                                        </span>
+                                        <div className="embed-message-bubble embed-message-bubble--typing">
+                                            <LoadingIndicator
+                                                label="Thinking"
+                                                showSpinner={false}
+                                            />
+                                        </div>
+                                    </article>
+                                )}
+
+                                <div ref={messagesEndRef} />
+                            </div>
+                        ) : (
+                            <div className="embed-empty-state">
+                                <span className="embed-empty-icon">
+                                    <MessageSquare className="size-7" />
+                                </span>
+                                <h1>Good Morning, {config.userName}</h1>
+                                <p>{config.subtitle}</p>
+                                {backendMessage && (
+                                    <p className="embed-status">
+                                        {backendMessage}
+                                    </p>
+                                )}
+                            </div>
+                        )}
+
+                        {isAuthorized && (
+                            <div className="embed-composer-dock">
+                                <EmbedComposer
+                                    courses={courses}
+                                    isProcessing={isProcessing}
+                                    onCourseChange={setSelectedCourseId}
+                                    onQuestionChange={setQuestion}
+                                    onSubmit={handleQuestionSubmit}
+                                    question={question}
+                                    selectedCourseId={selectedCourseId}
+                                />
+                                {currentSession?.last_message_at && (
+                                    <p className="embed-updated-at">
+                                        Terakhir diperbarui{' '}
+                                        {formatMessageTime(
+                                            currentSession.last_message_at,
+                                        )}
+                                    </p>
+                                )}
+                            </div>
+                        )}
+                    </section>
+                )}
+            </main>
+        </>
+    );
+}

resources/js/pages/mahasiswa-chat.tsx

@@ -30,6 +30,7 @@ type MahasiswaChatProps = {
     chatSessions: ChatSessionResponse[];
     courses: CourseResponse[];
     currentSession?: ChatSessionResponse | null;
+    isDirectChatMode?: boolean;
     messages: ChatMessageResponse[];
     pendingInitialChat?: PendingInitialChat | null;
     selectedCourseId?: string | null;
@@ -61,7 +62,42 @@ function formatMessageTime(value: string): string {
     }).format(date);
 }
 
-function ChatMessage({ message }: { message: ChatMessageResponse }) {
+function TypingText({ text }: { text: string }) {
+    const [visibleLength, setVisibleLength] = useState(0);
+
+    useEffect(() => {
+        const intervalId = window.setInterval(() => {
+            setVisibleLength((currentLength) => {
+                if (currentLength >= text.length) {
+                    window.clearInterval(intervalId);
+
+                    return currentLength;
+                }
+
+                return currentLength + 1;
+            });
+        }, 16);
+
+        return () => window.clearInterval(intervalId);
+    }, [text]);
+
+    return (
+        <>
+            {text.slice(0, visibleLength)}
+            {visibleLength < text.length && (
+                <span className="student-message-caret" aria-hidden />
+            )}
+        </>
+    );
+}
+
+function ChatMessage({
+    message,
+    shouldAnimateTyping = false,
+}: {
+    message: ChatMessageResponse;
+    shouldAnimateTyping?: boolean;
+}) {
     const isUser = isUserMessage(message.role);
 
     return (
@@ -79,7 +115,13 @@ function ChatMessage({ message }: { message: ChatMessageResponse }) {
             )}
 
             <div className="student-message-bubble">
-                <p className="student-message-content">{message.content}</p>
+                <p className="student-message-content">
+                    {!isUser && shouldAnimateTyping ? (
+                        <TypingText key={message.uuid_id} text={message.content} />
+                    ) : (
+                        message.content
+                    )}
+                </p>
                 <span className="student-message-time">
                     {formatMessageTime(message.created_at)}
                 </span>
@@ -126,13 +168,18 @@ export default function MahasiswaChat({
     chatSessions,
     courses,
     currentSession,
+    isDirectChatMode = false,
     messages: initialMessages,
     pendingInitialChat,
     selectedCourseId: initialSelectedCourseId,
     sessionId,
 }: MahasiswaChatProps) {
     const pendingInitialChatRef = useRef(pendingInitialChat ?? undefined);
+    const isWaitingForDirectAssistantRef = useRef(false);
     const hasStartedPendingInitialChatRef = useRef(false);
+    const knownMessageIdsRef = useRef(
+        new Set(initialMessages.map((message) => message.uuid_id)),
+    );
     const [pendingUserMessage] = useState<ChatMessageResponse | undefined>(
         pendingInitialChat
             ? createLocalUserMessage(pendingInitialChat.content)
@@ -140,6 +187,8 @@ export default function MahasiswaChat({
     );
     const pendingUserMessageRef = useRef(pendingUserMessage);
     const [localBackendMessage, setLocalBackendMessage] = useState<string>();
+    const [animatedAssistantMessageId, setAnimatedAssistantMessageId] =
+        useState<string>();
     const [isProcessing, setIsProcessing] = useState(
         Boolean(pendingInitialChat),
     );
@@ -179,6 +228,25 @@ export default function MahasiswaChat({
         ];
     }, [courses, currentSession, selectedCourseId]);
 
+    useEffect(() => {
+        if (isDirectChatMode && isWaitingForDirectAssistantRef.current) {
+            const newAssistantMessage = messages.find(
+                (message) =>
+                    !knownMessageIdsRef.current.has(message.uuid_id) &&
+                    !isUserMessage(message.role),
+            );
+
+            if (newAssistantMessage) {
+                setAnimatedAssistantMessageId(newAssistantMessage.uuid_id);
+                isWaitingForDirectAssistantRef.current = false;
+            }
+        }
+
+        for (const message of messages) {
+            knownMessageIdsRef.current.add(message.uuid_id);
+        }
+    }, [isDirectChatMode, messages]);
+
     useEffect(() => {
         const scrollFrame = window.requestAnimationFrame(() => {
             messagesEndRef.current?.scrollIntoView({
@@ -205,6 +273,8 @@ export default function MahasiswaChat({
                 },
                 {
                     onError: (errors) => {
+                        isWaitingForDirectAssistantRef.current = false;
+
                         if (optimisticUserMessage) {
                             setOptimisticMessages((currentMessages) =>
                                 currentMessages.filter(
@@ -220,7 +290,11 @@ export default function MahasiswaChat({
                         setLocalBackendMessage(firstError(errors));
                     },
                     onFinish: () => setIsProcessing(false),
-                    onStart: () => setIsProcessing(true),
+                    onStart: () => {
+                        isWaitingForDirectAssistantRef.current =
+                            isDirectChatMode;
+                        setIsProcessing(true);
+                    },
                     onSuccess: () => {
                         pendingInitialChatRef.current = undefined;
                         setOptimisticMessages([]);
@@ -230,7 +304,7 @@ export default function MahasiswaChat({
                 },
             );
         },
-        [sessionId],
+        [isDirectChatMode, sessionId],
     );
 
     useEffect(() => {
@@ -312,6 +386,10 @@ export default function MahasiswaChat({
                                 <ChatMessage
                                     key={message.uuid_id}
                                     message={message}
+                                    shouldAnimateTyping={
+                                        message.uuid_id ===
+                                        animatedAssistantMessageId
+                                    }
                                 />
                             ))}
 

resources/js/pages/settings/profile.tsx

@@ -96,7 +96,7 @@ export default function Profile({
 
                                         {status ===
                                             'verification-link-sent' && (
-                                            <div className="mt-2 text-sm font-medium text-green-600">
+                                            <div className="mt-2 text-sm font-medium text-primary">
                                                 A new verification link has been
                                                 sent to your email address.
                                             </div>

routes/web.php

@@ -1,7 +1,9 @@
 <?php
 
+use App\Http\Controllers\AdminController;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\DosenController;
+use App\Http\Controllers\EmbedController;
 use App\Http\Controllers\MahasiswaController;
 use Illuminate\Support\Facades\Route;
 use Laravel\Fortify\Features;
@@ -20,28 +22,50 @@
 
 Route::post('auth/register', [AuthController::class, 'register'])->name('auth.register.store');
 
-Route::get('mahasiswa', [MahasiswaController::class, 'index'])->name('mahasiswa');
+Route::get('embed', [EmbedController::class, 'index'])->name('embed');
 
-Route::post('mahasiswa/sessions', [MahasiswaController::class, 'storeSession'])->name('mahasiswa.sessions.store');
+Route::post('embed/sessions', [EmbedController::class, 'storeSession'])->name('embed.sessions.store');
 
-Route::get('mahasiswa/{sessionId}', [MahasiswaController::class, 'show'])->name('mahasiswa.show');
+Route::post('embed/{sessionId}/messages', [EmbedController::class, 'storeMessage'])->name('embed.messages.store');
 
-Route::post('mahasiswa/{sessionId}/messages', [MahasiswaController::class, 'storeMessage'])->name('mahasiswa.messages.store');
+Route::delete('embed/{sessionId}', [EmbedController::class, 'destroySession'])->name('embed.destroy');
 
-Route::delete('mahasiswa/{sessionId}', [MahasiswaController::class, 'destroySession'])->name('mahasiswa.destroy');
+Route::get('admin/login', [AuthController::class, 'showAdminLogin'])->name('admin.login');
 
-Route::get('dosen', [DosenController::class, 'index'])->name('dosen');
+Route::post('admin/login', [AuthController::class, 'adminLogin'])->name('admin.login.store');
 
-Route::post('dosen/courses', [DosenController::class, 'storeCourse'])->name('dosen.courses.store');
+Route::middleware('rag.auth:admin')->prefix('admin')->name('admin.')->group(function (): void {
+    Route::get('/', [AdminController::class, 'index'])->name('dashboard');
 
-Route::inertia('dosen/pengaturan', 'dosen/pengaturan')->name('dosen.pengaturan');
+    Route::get('pengaturan', [AdminController::class, 'settings'])->name('pengaturan');
+});
 
-Route::post('dosen/{courseId}/documents', [DosenController::class, 'uploadDocument'])->name('dosen.documents.store');
+Route::middleware('rag.auth:student')->group(function (): void {
+    Route::get('mahasiswa', [MahasiswaController::class, 'index'])->name('mahasiswa');
 
-Route::get('dosen/{courseId}', [DosenController::class, 'show'])->name('dosen.show');
+    Route::post('mahasiswa/sessions', [MahasiswaController::class, 'storeSession'])->name('mahasiswa.sessions.store');
 
-Route::put('dosen/{courseId}', [DosenController::class, 'updateCourse'])->name('dosen.update');
+    Route::get('mahasiswa/{sessionId}', [MahasiswaController::class, 'show'])->name('mahasiswa.show');
 
-Route::delete('dosen/{courseId}', [DosenController::class, 'destroyCourse'])->name('dosen.destroy');
+    Route::post('mahasiswa/{sessionId}/messages', [MahasiswaController::class, 'storeMessage'])->name('mahasiswa.messages.store');
+
+    Route::delete('mahasiswa/{sessionId}', [MahasiswaController::class, 'destroySession'])->name('mahasiswa.destroy');
+});
+
+Route::middleware('rag.auth:lecturer')->group(function (): void {
+    Route::get('dosen', [DosenController::class, 'index'])->name('dosen');
+
+    Route::post('dosen/courses', [DosenController::class, 'storeCourse'])->name('dosen.courses.store');
+
+    Route::inertia('dosen/pengaturan', 'dosen/pengaturan')->name('dosen.pengaturan');
+
+    Route::post('dosen/{courseId}/documents', [DosenController::class, 'uploadDocument'])->name('dosen.documents.store');
+
+    Route::get('dosen/{courseId}', [DosenController::class, 'show'])->name('dosen.show');
+
+    Route::put('dosen/{courseId}', [DosenController::class, 'updateCourse'])->name('dosen.update');
+
+    Route::delete('dosen/{courseId}', [DosenController::class, 'destroyCourse'])->name('dosen.destroy');
+});
 
 require __DIR__.'/settings.php';

tests/Feature/AuthProxyTest.php

@@ -31,6 +31,7 @@
         ->assertRedirect(route('mahasiswa', absolute: false))
         ->assertCookie('sevima_raghub_auth_token')
         ->assertCookie('sevima_raghub_auth_user')
+        ->assertSessionHas('status', 'Login berhasil.')
         ->assertSessionHasNoErrors();
 
     Http::assertSent(fn (HttpRequest $request): bool => $request->method() === 'POST'
@@ -84,7 +85,7 @@
             'password' => 'secret123',
             'role' => 'student',
         ])
-        ->assertRedirect(route('register.mahasiswa'))
+        ->assertRedirect(route('login'))
         ->assertSessionHas('status', 'Registration successful.')
         ->assertSessionHasNoErrors();
 

tests/Feature/DosenDashboardTest.php

@@ -5,6 +5,23 @@
 use Illuminate\Support\Facades\Http;
 use Inertia\Testing\AssertableInertia as Assert;
 
+function lecturerAuthUserCookie(): string
+{
+    return json_encode([
+        'email' => 'lecturer@example.com',
+        'id' => 10,
+        'identity_number' => 'D12345',
+        'name' => 'Dosen',
+        'role' => 'lecturer',
+        'status' => 'active',
+    ], JSON_THROW_ON_ERROR);
+}
+
+test('dosen routes redirect guests to login', function () {
+    $this->get(route('dosen'))
+        ->assertRedirect(route('login'));
+});
+
 test('dosen dashboard page can be rendered', function () {
     config(['services.rag.base_url' => 'https://rag.test/api/v1']);
 
@@ -39,6 +56,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->get(route('dosen'))
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
@@ -50,10 +68,16 @@
             ->where('knowledgeBases.0.documentCount', 1)
             ->where('knowledgeBases.0.failedDocumentCount', 0)
             ->where('knowledgeBases.0.updatedAt', '2026-05-02'));
+
+    Http::assertSent(fn (HttpRequest $request): bool => $request->method() === 'GET'
+        && str_starts_with($request->url(), 'https://rag.test/api/v1/courses?')
+        && $request->hasHeader('Authorization', 'Bearer token'));
 });
 
 test('dosen settings page can be rendered', function () {
-    $this->get(route('dosen.pengaturan'))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
+        ->get(route('dosen.pengaturan'))
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page->component('dosen/pengaturan'));
 });
@@ -85,6 +109,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->get(route('dosen.show', ['courseId' => '101']))
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
@@ -118,6 +143,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->from(route('dosen'))
         ->post(route('dosen.courses.store'), [
             'description' => 'Materi dasar algoritma',
@@ -142,7 +168,9 @@
         ], 422),
     ]);
 
-    $this->from(route('dosen'))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
+        ->from(route('dosen'))
         ->post(route('dosen.courses.store'), [
             'title' => 'Algoritma & Pemrograman',
         ])
@@ -162,6 +190,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->from(route('dosen.show', ['courseId' => '101']))
         ->put(route('dosen.update', ['courseId' => '101']), [
             'description' => 'Materi semester awal',
@@ -186,7 +215,9 @@
         ], 422),
     ]);
 
-    $this->from(route('dosen.show', ['courseId' => '101']))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
+        ->from(route('dosen.show', ['courseId' => '101']))
         ->put(route('dosen.update', ['courseId' => '101']), [
             'title' => 'Algoritma Lanjut',
         ])
@@ -202,6 +233,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->from(route('dosen.show', ['courseId' => '101']))
         ->delete(route('dosen.destroy', ['courseId' => '101']))
         ->assertRedirect(route('dosen'))
@@ -221,7 +253,9 @@
         ], 422),
     ]);
 
-    $this->from(route('dosen.show', ['courseId' => '101']))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
+        ->from(route('dosen.show', ['courseId' => '101']))
         ->delete(route('dosen.destroy', ['courseId' => '101']))
         ->assertRedirect(route('dosen.show', ['courseId' => '101']))
         ->assertSessionHasErrors(['course' => 'Course still has active documents.']);
@@ -242,6 +276,7 @@
     $file = UploadedFile::fake()->create('materi.pdf', 100, 'application/pdf');
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
         ->from(route('dosen.show', ['courseId' => '101']))
         ->post(route('dosen.documents.store', ['courseId' => '101']), [
             'file' => $file,
@@ -273,7 +308,9 @@
 
     $file = UploadedFile::fake()->create('materi.pdf', 100, 'application/pdf');
 
-    $this->from(route('dosen.show', ['courseId' => '101']))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', lecturerAuthUserCookie())
+        ->from(route('dosen.show', ['courseId' => '101']))
         ->post(route('dosen.documents.store', ['courseId' => '101']), [
             'file' => $file,
         ])

tests/Feature/MahasiswaDashboardTest.php

@@ -4,6 +4,23 @@
 use Illuminate\Support\Facades\Http;
 use Inertia\Testing\AssertableInertia as Assert;
 
+function studentAuthUserCookie(): string
+{
+    return json_encode([
+        'email' => 'student@example.com',
+        'id' => 11,
+        'identity_number' => '123456',
+        'name' => 'Alma',
+        'role' => 'student',
+        'status' => 'active',
+    ], JSON_THROW_ON_ERROR);
+}
+
+test('mahasiswa routes redirect guests to login', function () {
+    $this->get(route('mahasiswa'))
+        ->assertRedirect(route('login'));
+});
+
 test('mahasiswa dashboard page can be rendered through laravel proxy', function () {
     config(['services.rag.base_url' => 'https://rag.test/api/v1']);
 
@@ -42,6 +59,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->get(route('mahasiswa'))
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
@@ -76,6 +94,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->from(route('mahasiswa'))
         ->post(route('mahasiswa.sessions.store'), [
             'course_id' => '101',
@@ -134,6 +153,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->withSession([
             'sevima_raghub_direct_messages.session-1' => [
                 [
@@ -174,6 +194,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->from(route('mahasiswa.show', ['sessionId' => 'session-1']))
         ->post(route('mahasiswa.messages.store', ['sessionId' => 'session-1']), [
             'content' => 'Apa itu stack?',
@@ -212,6 +233,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->from(route('mahasiswa.show', ['sessionId' => 'session-1']))
         ->post(route('mahasiswa.messages.store', ['sessionId' => 'session-1']), [
             'content' => 'Apa itu stack?',
@@ -238,7 +260,9 @@
         ], 422),
     ]);
 
-    $this->from(route('mahasiswa.show', ['sessionId' => 'session-1']))
+    $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
+        ->from(route('mahasiswa.show', ['sessionId' => 'session-1']))
         ->post(route('mahasiswa.messages.store', ['sessionId' => 'session-1']), [
             'content' => 'Apa itu stack?',
             'course_id' => '101',
@@ -255,6 +279,7 @@
     ]);
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
+        ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
         ->withSession([
             'sevima_raghub_direct_messages.session-1' => [
                 [