feat:interview

.env.example

@@ -1 +1,2 @@
-VITE_API_BASE_URL=
+VITE_AGENTIC_API_BASE_URL=
+VITE_ORCHESTRATION_API_BASE_URL=

.gitignore

@@ -37,6 +37,9 @@ Thumbs.db
 vite.config.ts.timestamp-*
 
 API_CONTRACT.md
+API_CONTRACT_INTERVIEW.md
+API_CONTRACT_AGENT_ACTIVE.md
+API_CONTRACT_ORCHESTRATION.md
 
 # Database logos (served via CDN)
 public/databases/

package.json

@@ -90,6 +90,7 @@
   "pnpm": {
     "overrides": {
       "vite": "6.3.5"
-    }
+    },
+    "onlyBuiltDependencies": ["@tailwindcss/oxide", "esbuild"]
   }
 }

server.js

@@ -6,7 +6,7 @@ const url = require("url");
 
 const PORT = 7860;
 const DIST_DIR = path.join(__dirname, "dist");
-const BACKEND_URL = process.env.VITE_API_BASE_URL || "";
+const BACKEND_URL = process.env.VITE_AGENTIC_API_BASE_URL || "";
 
 const MIME = {
   ".html": "text/html",

src/app/components/Main.tsx

@@ -19,6 +19,12 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import type { Components } from "react-markdown";
 import KnowledgeManagement from "./KnowledgeManagement";
+import PhaseToggle, { type Phase } from "./interview/PhaseToggle";
+import InterviewPanel from "./interview/InterviewPanel";
+import InterviewResultView from "./interview/InterviewResultView";
+import NewChatOnboarding from "./NewChatOnboarding";
+import type { InterviewResult } from "../../services/interviewApi";
+import { getInterviewResult } from "../../services/interviewApi";
 import {
   getRooms,
   getRoom,
@@ -222,6 +228,9 @@ export default function Main() {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [user, setUser] = useState<StoredUser | null>(null);
   const [knowledgeOpen, setKnowledgeOpen] = useState(false);
+  const [currentPhase, setCurrentPhase] = useState<Phase>("interview");
+  const [interviewResult, setInterviewResult] = useState<InterviewResult | null>(null);
+  const [resultModalOpen, setResultModalOpen] = useState(false);
   const abortControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
@@ -243,9 +252,72 @@ export default function Main() {
     if (chat && !chat.messagesLoaded) {
       loadRoomMessages(currentChatId);
     }
+    // Restore phase for this room
+    const savedPhase = localStorage.getItem(`phase_${currentChatId}`);
+    if (savedPhase === "analytics" || savedPhase === "interview") {
+      setCurrentPhase(savedPhase);
+    } else {
+      const interviewRaw = localStorage.getItem(`interview_${currentChatId}`);
+      if (interviewRaw) {
+        try {
+          const iv = JSON.parse(interviewRaw) as { status?: string };
+          setCurrentPhase(iv.status === "completed" ? "analytics" : "interview");
+        } catch {
+          setCurrentPhase("interview");
+        }
+      } else {
+        setCurrentPhase("interview");
+      }
+    }
+    // Load persisted interview result — localStorage first, fallback ke API
+    const interviewRaw2 = localStorage.getItem(`interview_${currentChatId}`);
+    let localResult: InterviewResult | null = null;
+    if (interviewRaw2) {
+      try {
+        const iv = JSON.parse(interviewRaw2) as { result?: InterviewResult };
+        localResult = iv.result ?? null;
+      } catch {
+        localResult = null;
+      }
+    }
+    if (localResult) {
+      setInterviewResult(localResult);
+    } else {
+      // Coba ambil dari backend (sesi sudah selesai sebelumnya)
+      getInterviewResult(currentChatId)
+        .then(setInterviewResult)
+        .catch(() => setInterviewResult(null));
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentChatId]);
 
+  const handlePhaseChange = (phase: Phase) => {
+    setCurrentPhase(phase);
+    if (currentChatId) localStorage.setItem(`phase_${currentChatId}`, phase);
+  };
+
+  const handleInterviewComplete = () => {
+    setCurrentPhase("analytics");
+    if (currentChatId) localStorage.setItem(`phase_${currentChatId}`, "analytics");
+  };
+
+  const handleOnboardingStart = async () => {
+    if (!user) return;
+    const res = await createRoom(user.user_id, "New Session");
+    const newRoom: ChatRoom = {
+      id: res.data.id,
+      title: res.data.title,
+      messages: [],
+      createdAt: res.data.created_at,
+      updatedAt: res.data.updated_at,
+      messagesLoaded: true,
+    };
+    setChats((prev) => [newRoom, ...prev]);
+    setCurrentChatId(newRoom.id);
+    setCurrentPhase("interview");
+    localStorage.setItem(`phase_${newRoom.id}`, "interview");
+  };
+
   const loadRooms = async (userId: string) => {
     setRoomsLoading(true);
     setRoomsError(null);
@@ -565,9 +637,9 @@ export default function Main() {
                     e.stopPropagation();
                     deleteChat(chat.id);
                   }}
-                  className="opacity-0 group-hover:opacity-100 transition"
+                  className="opacity-0 group-hover:opacity-100 transition p-1 rounded hover:bg-white/20 cursor-pointer text-red-200 hover:text-white"
                 >
-                  <Trash2 className="w-3.5 h-3.5 text-red-100 hover:text-white" />
+                  <Trash2 className="w-3.5 h-3.5" />
                 </button>
               </div>
             ))
@@ -690,7 +762,7 @@ export default function Main() {
               <Menu className="w-5 h-5" />
             )}
           </button>
-          <h1 className="text-base text-slate-900 flex-1 truncate">
+          <h1 className="text-base text-slate-900 flex-1 truncate min-w-0">
             {currentChat?.title || "Chatbot"}
           </h1>
           <button
@@ -702,8 +774,46 @@ export default function Main() {
           </button>
         </div>
 
-        {/* Messages */}
-        <div className="relative z-10 flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Phase Toggle + Hasil Interview button — scoped per chat */}
+        {currentChatId && (
+          <div className="relative z-10 px-4 pt-3 pb-2 flex items-center gap-3">
+            <PhaseToggle
+              phase={currentPhase}
+              onChange={handlePhaseChange}
+            />
+            {interviewResult && (
+              <button
+                onClick={() => setResultModalOpen(true)}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-emerald-50 hover:bg-emerald-100 border border-emerald-200 text-emerald-700 rounded-full transition"
+              >
+                <span>📋</span>
+                Hasil Interview
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Interview Panel */}
+        {currentChatId && currentPhase === "interview" && (
+          <div className="relative z-10 flex-1 flex flex-col min-h-0">
+            <InterviewPanel
+              roomId={currentChatId}
+              userId={user?.user_id ?? ""}
+              onComplete={handleInterviewComplete}
+              onResultReady={setInterviewResult}
+            />
+          </div>
+        )}
+
+        {/* New Chat Onboarding — muncul saat tidak ada room dipilih */}
+        {!currentChatId && (
+          <div className="relative z-10 flex-1 flex flex-col min-h-0">
+            <NewChatOnboarding onStart={handleOnboardingStart} />
+          </div>
+        )}
+
+        {/* Analytics Messages */}
+        <div className={`relative z-10 flex-1 overflow-y-auto p-4 space-y-4 ${!currentChatId || (currentChatId && currentPhase === "interview") ? "hidden" : ""}`}>
           {currentChat?.messages.length === 0 && (
             <div className="flex items-center justify-center h-full">
               <div className="text-center">
@@ -791,25 +901,12 @@ export default function Main() {
             </div>
           ))}
 
-          {!currentChat && chats.length === 0 && !roomsLoading && (
-            <div className="flex items-center justify-center h-full">
-              <div className="text-center">
-                <MessageSquare className="w-12 h-12 text-slate-300 mx-auto mb-3" />
-                <h2 className="text-base text-slate-600 mb-1">
-                  Welcome to Chatbot
-                </h2>
-                <p className="text-sm text-slate-400">
-                  Create a new chat to get started
-                </p>
-              </div>
-            </div>
-          )}
 
           <div ref={messagesEndRef} />
         </div>
 
-        {/* Input Area */}
-        <div className="relative z-10 bg-white border-t border-slate-200 p-3 shadow-[0_-2px_10px_rgba(0,0,0,0.06)]">
+        {/* Input Area — hidden when interview phase active or no room selected */}
+        <div className={`relative z-10 bg-white border-t border-slate-200 p-3 shadow-[0_-2px_10px_rgba(0,0,0,0.06)] ${!currentChatId || (currentChatId && currentPhase === "interview") ? "hidden" : ""}`}>
           <div className="max-w-4xl mx-auto">
             <div className="flex gap-2 items-end">
               <textarea
@@ -842,6 +939,32 @@ export default function Main() {
         open={knowledgeOpen}
         onClose={() => setKnowledgeOpen(false)}
       />
+
+      {/* Interview Result Modal */}
+      {resultModalOpen && interviewResult && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
+          onClick={() => setResultModalOpen(false)}
+        >
+          <div
+            className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-slate-200">
+              <h2 className="text-base font-semibold text-slate-800">Hasil Interview</h2>
+              <button
+                onClick={() => setResultModalOpen(false)}
+                className="text-slate-400 hover:text-slate-600 transition p-1 rounded-lg hover:bg-slate-100"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="overflow-y-auto flex-1">
+              <InterviewResultView result={interviewResult} />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/app/components/NewChatOnboarding.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { BrainCircuit, BarChart2, ArrowRight, Mic, FileText, Loader2, ChevronRight } from "lucide-react";
+
+interface NewChatOnboardingProps {
+  onStart: () => Promise<void>;
+}
+
+export default function NewChatOnboarding({ onStart }: NewChatOnboardingProps) {
+  const [isStarting, setIsStarting] = useState(false);
+
+  const handleStart = async () => {
+    setIsStarting(true);
+    try {
+      await onStart();
+    } finally {
+      setIsStarting(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center px-6 py-10 overflow-y-auto">
+      <div className="w-full max-w-2xl flex flex-col items-center gap-8">
+
+        {/* Header */}
+        <div className="text-center">
+          <p className="text-xs font-semibold uppercase tracking-widest text-emerald-600 mb-2">
+            AI Data Agent
+          </p>
+          <h2 className="text-2xl font-semibold text-slate-800 mb-2">
+            Selamat datang di Data Eyond
+          </h2>
+          <p className="text-sm text-slate-500 max-w-md">
+            Ikuti alur dua fase berikut untuk mendapatkan hasil analisis data yang akurat dan terstruktur
+          </p>
+        </div>
+
+        {/* Flow cards */}
+        <div className="w-full flex flex-col sm:flex-row items-stretch gap-3">
+
+          {/* Card 1 — Interview */}
+          <div className="flex-1 bg-white border border-emerald-100 rounded-2xl p-5 shadow-sm flex flex-col gap-3 relative">
+            {/* Step badge */}
+            <span className="absolute -top-2.5 left-4 bg-emerald-600 text-white text-[10px] font-semibold px-2.5 py-0.5 rounded-full">
+              Fase 1
+            </span>
+            <div className="flex items-center gap-2.5 mt-1">
+              <div className="w-9 h-9 rounded-xl bg-emerald-50 flex items-center justify-center flex-shrink-0">
+                <BrainCircuit className="w-5 h-5 text-emerald-600" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-slate-800">Interview</h3>
+                <p className="text-xs text-emerald-600">Business Understanding</p>
+              </div>
+            </div>
+            <p className="text-xs text-slate-500 leading-relaxed">
+              AI agent akan menggali pemahaman tentang konteks bisnis, problem statement, dan success metrics sebelum memulai analisis.
+            </p>
+            <ul className="space-y-1.5">
+              {[
+                { icon: <BrainCircuit className="w-3 h-3" />, text: "Framework CRISP-DM" },
+                { icon: <FileText className="w-3 h-3" />, text: "Mode teks" },
+                { icon: <Mic className="w-3 h-3" />, text: "Mode audio (voice)" },
+              ].map((item, i) => (
+                <li key={i} className="flex items-center gap-2 text-xs text-slate-500">
+                  <span className="text-emerald-500">{item.icon}</span>
+                  {item.text}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Arrow */}
+          <div className="flex items-center justify-center flex-shrink-0 text-slate-300 rotate-90 sm:rotate-0">
+            <ArrowRight className="w-5 h-5" />
+          </div>
+
+          {/* Card 2 — Analytics */}
+          <div className="flex-1 bg-white border border-blue-100 rounded-2xl p-5 shadow-sm flex flex-col gap-3 relative">
+            <span className="absolute -top-2.5 left-4 bg-blue-600 text-white text-[10px] font-semibold px-2.5 py-0.5 rounded-full">
+              Fase 2
+            </span>
+            <div className="flex items-center gap-2.5 mt-1">
+              <div className="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center flex-shrink-0">
+                <BarChart2 className="w-5 h-5 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="text-sm font-semibold text-slate-800">Analytics</h3>
+                <p className="text-xs text-blue-600">Deep Research & Report</p>
+              </div>
+            </div>
+            <p className="text-xs text-slate-500 leading-relaxed">
+              Tanya jawab interaktif dengan AI agent. Secara paralel, agent menyusun draft report analisis yang dapat diekspor sebagai PDF.
+            </p>
+            <ul className="space-y-1.5">
+              {[
+                { text: "Tanya jawab berbasis konteks interview" },
+                { text: "Agent menyusun report secara paralel" },
+                { text: "Export report sebagai PDF" },
+              ].map((item, i) => (
+                <li key={i} className="flex items-center gap-2 text-xs text-slate-500">
+                  <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
+                  {item.text}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* CTA */}
+        <div className="flex flex-col items-center gap-2">
+          <button
+            onClick={handleStart}
+            disabled={isStarting}
+            className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white px-6 py-3 rounded-xl font-medium text-sm transition-all duration-200 hover:scale-105 disabled:scale-100 shadow-md shadow-emerald-200"
+          >
+            {isStarting ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Memulai sesi…
+              </>
+            ) : (
+              <>
+                Mulai Sesi Baru
+                <ChevronRight className="w-4 h-4" />
+              </>
+            )}
+          </button>
+          <p className="text-[11px] text-slate-400">
+            Anda bisa melewati fase interview kapan saja lewat toggle di atas
+          </p>
+        </div>
+
+      </div>
+    </div>
+  );
+}

src/app/components/interview/AudioRecorder.tsx

@@ -0,0 +1,144 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Mic, MicOff, AlertCircle } from "lucide-react";
+
+export interface AudioRecorderProps {
+  onChunk: (chunk: ArrayBuffer) => void;
+  onEndUtterance: () => void;
+  disabled?: boolean;
+}
+
+type RecorderState = "idle" | "recording" | "unsupported";
+
+const PREFERRED_MIME = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/ogg;codecs=opus",
+  "audio/mp4",
+];
+
+function getSupportedMimeType(): string | null {
+  if (typeof MediaRecorder === "undefined") return null;
+  for (const mime of PREFERRED_MIME) {
+    if (MediaRecorder.isTypeSupported(mime)) return mime;
+  }
+  return null;
+}
+
+export default function AudioRecorder({ onChunk, onEndUtterance, disabled }: AudioRecorderProps) {
+  const [state, setState] = useState<RecorderState>("idle");
+  const [permissionDenied, setPermissionDenied] = useState(false);
+
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const mimeType = useRef<string | null>(null);
+
+  // Check support on mount
+  useEffect(() => {
+    if (
+      typeof navigator.mediaDevices?.getUserMedia === "undefined" ||
+      getSupportedMimeType() === null
+    ) {
+      setState("unsupported");
+    }
+    mimeType.current = getSupportedMimeType();
+  }, []);
+
+  const startRecording = useCallback(async () => {
+    if (state !== "idle" || disabled) return;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+
+      const recorder = new MediaRecorder(stream, {
+        mimeType: mimeType.current ?? undefined,
+        audioBitsPerSecond: 16000,
+      });
+
+      recorder.ondataavailable = async (e) => {
+        if (e.data.size > 0) {
+          const buf = await e.data.arrayBuffer();
+          onChunk(buf);
+        }
+      };
+
+      recorder.start(100); // 100ms chunks
+      mediaRecorderRef.current = recorder;
+      setState("recording");
+    } catch (err: unknown) {
+      if (err instanceof DOMException && err.name === "NotAllowedError") {
+        setPermissionDenied(true);
+      }
+    }
+  }, [state, disabled, onChunk]);
+
+  const stopRecording = useCallback(() => {
+    if (state !== "recording") return;
+
+    const recorder = mediaRecorderRef.current;
+    if (recorder && recorder.state !== "inactive") {
+      recorder.onstop = () => {
+        onEndUtterance();
+      };
+      recorder.stop();
+    }
+
+    streamRef.current?.getTracks().forEach((t) => t.stop());
+    streamRef.current = null;
+    mediaRecorderRef.current = null;
+    setState("idle");
+  }, [state, onEndUtterance]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+    };
+  }, []);
+
+  if (state === "unsupported") {
+    return (
+      <div className="flex items-center gap-1.5 text-slate-400 text-xs px-2">
+        <AlertCircle className="w-3.5 h-3.5" />
+        <span>Audio tidak didukung browser ini</span>
+      </div>
+    );
+  }
+
+  if (permissionDenied) {
+    return (
+      <div className="flex items-center gap-1.5 text-amber-500 text-xs px-2">
+        <MicOff className="w-3.5 h-3.5" />
+        <span>Izin mikrofon ditolak</span>
+      </div>
+    );
+  }
+
+  const isRecording = state === "recording";
+
+  return (
+    <button
+      onPointerDown={startRecording}
+      onPointerUp={stopRecording}
+      onPointerLeave={stopRecording}
+      disabled={disabled}
+      title={isRecording ? "Lepas untuk kirim" : "Tahan untuk merekam"}
+      className={`relative flex items-center justify-center w-9 h-9 rounded-full transition-all duration-200 flex-shrink-0 ${
+        isRecording
+          ? "bg-red-500 text-white scale-110 shadow-lg shadow-red-200"
+          : disabled
+          ? "bg-slate-100 text-slate-300 cursor-not-allowed"
+          : "bg-emerald-50 text-emerald-600 hover:bg-emerald-100 hover:scale-105"
+      }`}
+    >
+      {isRecording ? (
+        <>
+          {/* Pulse ring */}
+          <span className="absolute inset-0 rounded-full bg-red-400 animate-ping opacity-50" />
+          <Mic className="w-4 h-4 relative z-10" />
+        </>
+      ) : (
+        <Mic className="w-4 h-4" />
+      )}
+    </button>
+  );
+}

src/app/components/interview/InterviewPanel.tsx

@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Bot, User, Send, Loader2, Mic, MicOff, CheckCircle2, RotateCcw, AlertTriangle, RefreshCw, ArrowRight } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Components } from "react-markdown";
+import AudioRecorder from "./AudioRecorder";
+import { getInterviewResult, type InterviewResult } from "../../../services/interviewApi";
+import {
+  useInterviewSession,
+  type InterviewMessage,
+  type InterviewMode,
+} from "../../../hooks/useInterviewSession";
+
+const markdownComponents: Components = {
+  p: ({ children }) => (
+    <p className="text-sm mb-1.5 last:mb-0 leading-relaxed">{children}</p>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc pl-4 mb-1.5 space-y-0.5 text-sm">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal pl-4 mb-1.5 space-y-0.5 text-sm">{children}</ol>
+  ),
+  li: ({ children }) => <li>{children}</li>,
+  strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+  em: ({ children }) => <em className="italic">{children}</em>,
+};
+
+interface InterviewPanelProps {
+  roomId: string;
+  userId: string;
+  onComplete: () => void;
+  onResultReady?: (result: InterviewResult) => void;
+}
+
+export default function InterviewPanel({ roomId, userId, onComplete, onResultReady }: InterviewPanelProps) {
+  const {
+    status,
+    messages,
+    isSending,
+    isStarting,
+    startError,
+    interviewResult,
+    isLoaded,
+    startSession,
+    sendTextMessage,
+    connectAudio,
+    disconnectAudio,
+    sendAudioChunk,
+    sendEndUtterance,
+    switchMode,
+    resetSession,
+  } = useInterviewSession(roomId, userId);
+
+  const [input, setInput] = useState("");
+  const [audioMode, setAudioMode] = useState<InterviewMode>("text");
+  const [audioStreamingText, setAudioStreamingText] = useState("");
+  const [isAudioConnected, setIsAudioConnected] = useState(false);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, audioStreamingText]);
+
+  // Auto-start hanya setelah localStorage selesai dimuat dan status benar-benar idle
+  useEffect(() => {
+    if (isLoaded && status === "idle") {
+      startSession("text");
+    }
+  }, [isLoaded, status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Notify parent when result is ready (from hook or re-fetched)
+  useEffect(() => {
+    if (status === "completed" && interviewResult) {
+      onResultReady?.(interviewResult);
+    } else if (status === "completed" && !interviewResult) {
+      getInterviewResult(roomId)
+        .then((r) => onResultReady?.(r))
+        .catch(() => {});
+    }
+  }, [status, interviewResult]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Setup audio WebSocket when audio mode is active
+  useEffect(() => {
+    if (audioMode !== "audio" || status !== "active") return;
+    if (isAudioConnected) return;
+
+    setIsAudioConnected(true);
+    connectAudio(
+      (token) => setAudioStreamingText((prev) => prev + token),
+      (fullText) => {
+        setAudioStreamingText("");
+        // The hook handles adding the message internally, but for audio we add it here
+        // since audio messages arrive differently
+        void fullText; // handled via useInterviewSession internal state if needed
+      },
+      async (audioBuf) => {
+        // Play TTS audio
+        try {
+          if (!audioContextRef.current || audioContextRef.current.state === "closed") {
+            audioContextRef.current = new AudioContext();
+          }
+          const ctx = audioContextRef.current;
+          const decoded = await ctx.decodeAudioData(audioBuf.slice(0));
+          const source = ctx.createBufferSource();
+          source.buffer = decoded;
+          source.connect(ctx.destination);
+          source.start();
+        } catch {
+          // ignore playback errors
+        }
+      },
+      () => {
+        setIsAudioConnected(false);
+        onComplete();
+      }
+    );
+
+    return () => {
+      disconnectAudio();
+      setIsAudioConnected(false);
+    };
+  }, [audioMode, status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSendText = useCallback(async () => {
+    const text = input.trim();
+    if (!text || isSending || status !== "active") return;
+    setInput("");
+    await sendTextMessage(text);
+    inputRef.current?.focus();
+  }, [input, isSending, status, sendTextMessage]);
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendText();
+    }
+  };
+
+  const handleModeToggle = () => {
+    const next: InterviewMode = audioMode === "text" ? "audio" : "text";
+    setAudioMode(next);
+    switchMode(next);
+    setIsAudioConnected(false);
+    setAudioStreamingText("");
+  };
+
+  const handleRestart = () => {
+    setAudioMode("text");
+    setIsAudioConnected(false);
+    setAudioStreamingText("");
+    resetSession();
+    startSession("text");
+  };
+
+  // Loading state saat memanggil API untuk membuat sesi
+  if (isStarting) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-3 text-slate-500">
+        <Loader2 className="w-6 h-6 animate-spin text-emerald-600" />
+        <p className="text-sm">Memulai sesi interview…</p>
+      </div>
+    );
+  }
+
+  // Error state — backend tidak bisa dijangkau
+  if (startError && status === "idle") {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 px-6">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <AlertTriangle className="w-8 h-8 text-amber-400" />
+          <p className="text-sm font-medium text-slate-700">Tidak dapat terhubung ke server interview</p>
+          <p className="text-xs text-slate-400 max-w-xs">
+            Pastikan backend interview berjalan di <code className="bg-slate-100 px-1 py-0.5 rounded text-xs">localhost:8080</code>
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => startSession("text")}
+            className="flex items-center gap-1.5 px-3 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs rounded-lg transition"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+            Coba Lagi
+          </button>
+          <button
+            onClick={onComplete}
+            className="flex items-center gap-1.5 px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-600 text-xs rounded-lg transition"
+          >
+            Lanjut ke Analytics
+            <ArrowRight className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Mode toggle bar */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-slate-100 bg-white/60 backdrop-blur-sm">
+        <p className="text-xs text-slate-500">
+          {status === "completed"
+            ? "Interview selesai — lihat hasil di bawah"
+            : "Jawab pertanyaan untuk membantu analisis data Anda"}
+        </p>
+        <div className="flex items-center gap-2">
+          {status === "completed" && (
+            <button
+              onClick={handleRestart}
+              className="flex items-center gap-1 text-xs text-slate-400 hover:text-slate-600 transition"
+            >
+              <RotateCcw className="w-3 h-3" />
+              Mulai ulang
+            </button>
+          )}
+          {status === "active" && (
+            <button
+              onClick={handleModeToggle}
+              title={audioMode === "text" ? "Beralih ke mode audio" : "Beralih ke mode teks"}
+              className={`flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border transition-all duration-200 ${
+                audioMode === "audio"
+                  ? "bg-emerald-50 border-emerald-200 text-emerald-700"
+                  : "bg-slate-50 border-slate-200 text-slate-500 hover:border-slate-300"
+              }`}
+            >
+              {audioMode === "audio" ? (
+                <Mic className="w-3 h-3" />
+              ) : (
+                <MicOff className="w-3 h-3" />
+              )}
+              <span>{audioMode === "audio" ? "Audio" : "Teks"}</span>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+        {messages.map((msg) => (
+          <MessageBubble key={msg.id} message={msg} />
+        ))}
+
+        {/* Live audio streaming text */}
+        {audioStreamingText && (
+          <div className="flex gap-2.5 max-w-[85%]">
+            <div className="w-7 h-7 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+              <Bot className="w-4 h-4 text-emerald-600" />
+            </div>
+            <div className="bg-white border border-slate-200 rounded-2xl rounded-tl-sm px-3.5 py-2.5 shadow-sm">
+              <p className="text-sm text-slate-700 leading-relaxed">
+                {audioStreamingText}
+                <span className="inline-block w-1 h-3.5 bg-emerald-500 ml-0.5 animate-pulse rounded-sm" />
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Completed state */}
+        {status === "completed" && (
+          <div className="flex justify-center py-4">
+            <div className="flex items-center gap-2 text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-full px-4 py-2 text-sm">
+              <CheckCircle2 className="w-4 h-4" />
+              <span>Interview selesai!</span>
+            </div>
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* CTA setelah interview selesai */}
+      {status === "completed" && (
+        <div className="border-t border-slate-100 px-4 py-3 flex justify-end">
+          <button
+            onClick={onComplete}
+            className="flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm rounded-xl transition"
+          >
+            Lanjut ke Analytics
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Input area */}
+      {status === "active" && (
+        <div className="border-t border-slate-200 bg-white/80 backdrop-blur-sm p-3">
+          {audioMode === "audio" ? (
+            <div className="flex items-center justify-center gap-3 py-2">
+              <p className="text-sm text-slate-500">
+                Tahan tombol mikrofon lalu bicara
+              </p>
+              <AudioRecorder
+                onChunk={sendAudioChunk}
+                onEndUtterance={sendEndUtterance}
+                disabled={isSending}
+              />
+            </div>
+          ) : (
+            <div className="flex items-end gap-2">
+              <textarea
+                ref={inputRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyPress}
+                placeholder="Ketik jawaban Anda…"
+                rows={1}
+                disabled={isSending}
+                className="flex-1 resize-none bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:border-transparent transition max-h-32 disabled:opacity-60"
+                style={{ minHeight: "42px" }}
+                onInput={(e) => {
+                  const el = e.currentTarget;
+                  el.style.height = "auto";
+                  el.style.height = `${Math.min(el.scrollHeight, 128)}px`;
+                }}
+              />
+              <button
+                onClick={handleSendText}
+                disabled={!input.trim() || isSending}
+                className="w-9 h-9 rounded-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 disabled:cursor-not-allowed text-white flex items-center justify-center flex-shrink-0 transition-all duration-200 hover:scale-105 disabled:scale-100"
+              >
+                {isSending ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <Send className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MessageBubble({ message }: { message: InterviewMessage }) {
+  const isUser = message.role === "user";
+
+  if (isUser) {
+    return (
+      <div className="flex gap-2.5 max-w-[85%] ml-auto flex-row-reverse">
+        <div className="w-7 h-7 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0 mt-0.5">
+          <User className="w-4 h-4 text-white" />
+        </div>
+        <div className="bg-blue-600 text-white rounded-2xl rounded-tr-sm px-3.5 py-2.5 shadow-sm">
+          <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2.5 max-w-[85%]">
+      <div className="w-7 h-7 rounded-full bg-emerald-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+        <Bot className="w-4 h-4 text-emerald-600" />
+      </div>
+      <div className="bg-white border border-slate-200 rounded-2xl rounded-tl-sm px-3.5 py-2.5 shadow-sm">
+        {message.isStreaming && !message.content ? (
+          <div className="flex gap-1 py-1">
+            <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce [animation-delay:0ms]" />
+            <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce [animation-delay:150ms]" />
+            <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce [animation-delay:300ms]" />
+          </div>
+        ) : (
+          <div className="text-slate-700">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={markdownComponents}
+            >
+              {message.content}
+            </ReactMarkdown>
+            {message.isStreaming && (
+              <span className="inline-block w-1 h-3.5 bg-emerald-500 ml-0.5 animate-pulse rounded-sm" />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/components/interview/InterviewResultView.tsx

@@ -0,0 +1,131 @@
+import { useState } from "react";
+import { CheckCircle2, ChevronDown, ChevronRight } from "lucide-react";
+import type { InterviewResult, QAPair } from "../../../services/interviewApi";
+
+interface Props {
+  result: InterviewResult;
+}
+
+export default function InterviewResultView({ result }: Props) {
+  const [openSections, setOpenSections] = useState<Set<number>>(new Set([0]));
+
+  const toggleSection = (i: number) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(i)) next.delete(i);
+      else next.add(i);
+      return next;
+    });
+  };
+
+  return (
+    <div className="mx-4 my-4 rounded-2xl border border-emerald-200 bg-emerald-50/60 overflow-hidden text-sm">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-4 py-3 bg-emerald-100/80 border-b border-emerald-200">
+        <CheckCircle2 className="w-4 h-4 text-emerald-600 flex-shrink-0" />
+        <span className="font-semibold text-emerald-800">Hasil Interview</span>
+      </div>
+
+      <div className="px-4 py-4 space-y-5">
+        {/* Summary */}
+        {result.summary && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Ringkasan</p>
+            <p className="text-slate-700 leading-relaxed">{result.summary}</p>
+          </div>
+        )}
+
+        {/* Goals */}
+        {result.goals?.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Tujuan</p>
+            <ul className="space-y-1">
+              {result.goals.map((g, i) => (
+                <li key={i} className="flex gap-2 text-slate-700">
+                  <span className="text-emerald-500 flex-shrink-0 mt-0.5">•</span>
+                  <span>{g}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Section Results */}
+        {result.section_results?.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Sesi Pertanyaan</p>
+            <div className="space-y-2">
+              {result.section_results.map((section, i) => (
+                <div key={i} className="rounded-xl border border-slate-200 bg-white overflow-hidden">
+                  <button
+                    onClick={() => toggleSection(i)}
+                    className="w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-slate-50 transition"
+                  >
+                    <span className="font-medium text-slate-700">{section.section_title}</span>
+                    {openSections.has(i) ? (
+                      <ChevronDown className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                    ) : (
+                      <ChevronRight className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                    )}
+                  </button>
+                  {openSections.has(i) && (
+                    <div className="px-3 pb-3 space-y-3 border-t border-slate-100 pt-2">
+                      {section.section_summary && (
+                        <p className="text-xs text-slate-500 italic">{section.section_summary}</p>
+                      )}
+                      {section.qa_pairs?.map((qa, j) => (
+                        <QAItem key={j} qa={qa} depth={0} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Key Insights */}
+        {result.key_insights?.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Key Insights</p>
+            <ul className="space-y-1">
+              {result.key_insights.map((insight, i) => (
+                <li key={i} className="flex gap-2 text-slate-700">
+                  <span className="text-blue-400 flex-shrink-0 mt-0.5">•</span>
+                  <span>{insight}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Unresolved Items */}
+        {result.unresolved_items?.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Belum Terjawab</p>
+            <ul className="space-y-1">
+              {result.unresolved_items.map((item, i) => (
+                <li key={i} className="flex gap-2 text-amber-700">
+                  <span className="text-amber-400 flex-shrink-0 mt-0.5">•</span>
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function QAItem({ qa, depth }: { qa: QAPair; depth: number }) {
+  return (
+    <div className={depth > 0 ? "ml-4 pl-3 border-l-2 border-slate-100" : ""}>
+      <p className="text-xs text-slate-500 mb-0.5">T: {qa.question_text}</p>
+      <p className="text-slate-700">J: {qa.answer_cleaned}</p>
+      {qa.follow_ups?.map((f, i) => (
+        <QAItem key={i} qa={f} depth={depth + 1} />
+      ))}
+    </div>
+  );
+}

src/app/components/interview/PhaseToggle.tsx

@@ -0,0 +1,41 @@
+import { BrainCircuit, BarChart2 } from "lucide-react";
+
+export type Phase = "interview" | "analytics";
+
+interface PhaseToggleProps {
+  phase: Phase;
+  onChange: (phase: Phase) => void;
+  disabled?: boolean;
+}
+
+export default function PhaseToggle({ phase, onChange, disabled }: PhaseToggleProps) {
+  return (
+    <div
+      className="flex items-center bg-slate-100 rounded-full p-0.5 text-xs select-none"
+      title={disabled ? "Interview sedang berlangsung" : undefined}
+    >
+      <button
+        onClick={() => !disabled && onChange("interview")}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all duration-200 ${
+          phase === "interview"
+            ? "bg-white text-emerald-700 shadow-sm font-medium"
+            : "text-slate-500 hover:text-slate-700"
+        } ${disabled && phase !== "interview" ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`}
+      >
+        <BrainCircuit className="w-3.5 h-3.5" />
+        <span>Interview</span>
+      </button>
+      <button
+        onClick={() => !disabled && onChange("analytics")}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full transition-all duration-200 ${
+          phase === "analytics"
+            ? "bg-white text-blue-700 shadow-sm font-medium"
+            : "text-slate-500 hover:text-slate-700"
+        } ${disabled && phase !== "analytics" ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`}
+      >
+        <BarChart2 className="w-3.5 h-3.5" />
+        <span>Analytics</span>
+      </button>
+    </div>
+  );
+}

src/hooks/useInterviewSession.ts

@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  createSession,
+  finishSession,
+  openAudioSession,
+  streamMessage,
+  type AudioSessionHandle,
+  type InterviewResult,
+  type StreamMetadata,
+} from "../services/interviewApi";
+
+export type InterviewMode = "text" | "audio";
+export type InterviewStatus = "idle" | "active" | "completed";
+
+export interface InterviewMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  isStreaming?: boolean;
+}
+
+interface PersistedState {
+  sessionId: string | null;
+  status: InterviewStatus;
+  mode: InterviewMode;
+  messages: InterviewMessage[];
+  result?: InterviewResult | null;
+}
+
+const FRAMEWORK_ID = "discovery_problem_v2";
+const STORAGE_KEY = (roomId: string) => `interview_${roomId}`;
+
+function loadState(roomId: string): PersistedState {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY(roomId));
+    if (raw) return JSON.parse(raw) as PersistedState;
+  } catch {
+    // ignore
+  }
+  return { sessionId: null, status: "idle", mode: "text", messages: [], result: null };
+}
+
+function saveState(roomId: string, state: PersistedState) {
+  localStorage.setItem(STORAGE_KEY(roomId), JSON.stringify(state));
+}
+
+export function useInterviewSession(roomId: string | null, userId: string | null) {
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [status, setStatus] = useState<InterviewStatus>("idle");
+  const [mode, setMode] = useState<InterviewMode>("text");
+  const [messages, setMessages] = useState<InterviewMessage[]>([]);
+  const [isSending, setIsSending] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [startError, setStartError] = useState<string | null>(null);
+  const [interviewResult, setInterviewResult] = useState<InterviewResult | null>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const audioHandle = useRef<AudioSessionHandle | null>(null);
+
+  // Load persisted state when roomId changes
+  useEffect(() => {
+    if (!roomId) return;
+    setIsLoaded(false);
+    const saved = loadState(roomId);
+    setSessionId(saved.sessionId);
+    setStatus(saved.status);
+    setMode(saved.mode);
+    setMessages(saved.messages);
+    setInterviewResult(saved.result ?? null);
+    setIsLoaded(true);
+  }, [roomId]);
+
+  // Persist state changes
+  const persist = useCallback(
+    (patch: Partial<PersistedState>) => {
+      if (!roomId) return;
+      const current = loadState(roomId);
+      const next = { ...current, ...patch };
+      saveState(roomId, next);
+    },
+    [roomId]
+  );
+
+  const addMessage = useCallback(
+    (msg: InterviewMessage) => {
+      setMessages((prev) => {
+        const next = [...prev, msg];
+        if (roomId) persist({ messages: next });
+        return next;
+      });
+    },
+    [roomId, persist]
+  );
+
+  const updateLastAssistantMessage = useCallback(
+    (content: string, done = false) => {
+      setMessages((prev) => {
+        const next = prev.map((m, i) =>
+          i === prev.length - 1 && m.role === "assistant"
+            ? { ...m, content, isStreaming: !done }
+            : m
+        );
+        if (done && roomId) persist({ messages: next });
+        return next;
+      });
+    },
+    [roomId, persist]
+  );
+
+  const startSession = useCallback(
+    async (interviewMode: InterviewMode = "text") => {
+      if (!roomId || !userId || status === "active" || isStarting) return;
+      setIsStarting(true);
+      setStartError(null);
+      try {
+        const res = await createSession(FRAMEWORK_ID, userId, roomId, interviewMode);
+        const openingId = crypto.randomUUID();
+        const questionId = crypto.randomUUID();
+        const initialMessages: InterviewMessage[] = [
+          { id: openingId, role: "assistant", content: res.opening_message },
+          { id: questionId, role: "assistant", content: res.first_question },
+        ];
+        setSessionId(res.session_id);
+        setStatus("active");
+        setMode(interviewMode);
+        setMessages(initialMessages);
+        persist({
+          sessionId: res.session_id,
+          status: "active",
+          mode: interviewMode,
+          messages: initialMessages,
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "Gagal memulai sesi interview";
+        setStartError(msg);
+      } finally {
+        setIsStarting(false);
+      }
+    },
+    [roomId, userId, status, isStarting, persist]
+  );
+
+  const sendTextMessage = useCallback(
+    async (text: string) => {
+      if (!sessionId || isSending) return;
+      setIsSending(true);
+
+      const userMsg: InterviewMessage = {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: text,
+      };
+      addMessage(userMsg);
+
+      const placeholderId = crypto.randomUUID();
+      const placeholder: InterviewMessage = {
+        id: placeholderId,
+        role: "assistant",
+        content: "",
+        isStreaming: true,
+      };
+      setMessages((prev) => [...prev, placeholder]);
+
+      try {
+        const res = await streamMessage(sessionId, text);
+        if (!res.body) throw new Error("No response body");
+
+        // /finish command returns plain JSON, not SSE stream
+        const contentType = res.headers.get("Content-Type") ?? "";
+        if (contentType.includes("application/json")) {
+          const finishRes = await res.json() as import("../services/interviewApi").FinishSessionResponse;
+          updateLastAssistantMessage("", true);
+          setStatus("completed");
+          persist({ status: "completed", result: finishRes.result });
+          setInterviewResult(finishRes.result);
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let accumulated = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const lines = decoder.decode(value).split("\n");
+          for (const line of lines) {
+            if (!line.startsWith("data: ")) continue;
+            const payload = line.slice(6);
+            try {
+              const meta = JSON.parse(payload) as StreamMetadata;
+              updateLastAssistantMessage(accumulated, true);
+              if (meta.finished) {
+                setStatus("completed");
+                persist({ status: "completed" });
+                const finishRes = await finishSession(sessionId);
+                setInterviewResult(finishRes.result);
+                persist({ result: finishRes.result });
+              }
+            } catch {
+              accumulated += payload;
+              updateLastAssistantMessage(accumulated);
+            }
+          }
+        }
+      } catch (err) {
+        console.error("Stream error", err);
+        updateLastAssistantMessage("Maaf, terjadi kesalahan. Coba lagi.", true);
+      } finally {
+        setIsSending(false);
+      }
+    },
+    [sessionId, isSending, addMessage, updateLastAssistantMessage, persist]
+  );
+
+  const connectAudio = useCallback(
+    (
+      onTokenChunk: (token: string) => void,
+      onAssistantReply: (text: string) => void,
+      onAudio: (buf: ArrayBuffer) => void,
+      onSessionDone: () => void
+    ) => {
+      if (!sessionId) return;
+      audioHandle.current?.close();
+      audioHandle.current = openAudioSession(
+        sessionId,
+        (event) => {
+          if (event.type === "token_chunk") onTokenChunk(event.payload);
+          else if (event.type === "assistant_reply") onAssistantReply(event.payload);
+          else if (event.type === "session_done") {
+            setStatus("completed");
+            persist({ status: "completed" });
+            finishSession(sessionId)
+              .then((res) => {
+                setInterviewResult(res.result);
+                persist({ result: res.result });
+              })
+              .catch(console.error);
+            onSessionDone();
+          }
+        },
+        onAudio,
+        () => {}
+      );
+    },
+    [sessionId, persist]
+  );
+
+  const disconnectAudio = useCallback(() => {
+    audioHandle.current?.close();
+    audioHandle.current = null;
+  }, []);
+
+  const sendAudioChunk = useCallback((chunk: ArrayBuffer) => {
+    audioHandle.current?.sendAudioChunk(chunk);
+  }, []);
+
+  const sendEndUtterance = useCallback(() => {
+    audioHandle.current?.sendEndUtterance();
+  }, []);
+
+  const switchMode = useCallback(
+    (newMode: InterviewMode) => {
+      disconnectAudio();
+      setMode(newMode);
+      persist({ mode: newMode });
+    },
+    [disconnectAudio, persist]
+  );
+
+  const resetSession = useCallback(() => {
+    disconnectAudio();
+    if (roomId) localStorage.removeItem(STORAGE_KEY(roomId));
+    setSessionId(null);
+    setStatus("idle");
+    setMode("text");
+    setMessages([]);
+    setInterviewResult(null);
+  }, [roomId, disconnectAudio]);
+
+  return {
+    sessionId,
+    status,
+    mode,
+    messages,
+    isSending,
+    isStarting,
+    startError,
+    interviewResult,
+    isLoaded,
+    startSession,
+    sendTextMessage,
+    connectAudio,
+    disconnectAudio,
+    sendAudioChunk,
+    sendEndUtterance,
+    switchMode,
+    resetSession,
+  };
+}

src/services/api.ts

@@ -20,6 +20,8 @@ export interface LoginResponse {
 export interface Room {
   id: string;
   title: string;
+  user_id?: string;
+  status?: string;
   created_at: string;
   updated_at: string | null;
 }
@@ -31,9 +33,12 @@ export interface CreateRoomResponse {
 }
 
 export interface ChatSource {
+  id?: string;
+  message_id?: string;
   document_id: string;
   filename: string;
   page_label: string | null;
+  created_at?: string;
 }
 
 export interface RoomMessage {
@@ -48,7 +53,7 @@ export interface RoomDetail extends Room {
   messages: RoomMessage[];
 }
 
-export type DocumentStatus = "pending" | "processing" | "completed" | "failed";
+export type DocumentStatus = "uploaded" | "processing" | "completed" | "failed";
 
 export interface ApiDocument {
   id: string;
@@ -72,12 +77,32 @@ export interface DocTypeInfo {
   message: string | null;
 }
 
-// ─── Base Client ──────────────────────────────────────────────────────────────
+export interface DataCatalogSource {
+  source_id: string;
+  source_type: "schema" | "tabular" | "unstructured";
+  name: string;
+  location_ref: string;
+}
+
+export interface DataCatalog {
+  user_id: string;
+  schema_version: string;
+  generated_at: string;
+  sources: DataCatalogSource[];
+}
+
+// ─── Base Clients ─────────────────────────────────────────────────────────────
 
-const BASE_URL = ((import.meta as unknown as { env: Record<string, string> }).env.VITE_API_BASE_URL) ?? "";
+const ORCHESTRATION_BASE_URL =
+  ((import.meta as unknown as { env: Record<string, string> }).env
+    .VITE_ORCHESTRATION_API_BASE_URL) ?? "";
 
-async function request<T>(path: string, options?: RequestInit): Promise<T> {
-  const res = await fetch(`${BASE_URL}${path}`, {
+const AGENTIC_BASE_URL =
+  ((import.meta as unknown as { env: Record<string, string> }).env
+    .VITE_AGENTIC_API_BASE_URL) ?? "";
+
+async function request<T>(baseUrl: string, path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${baseUrl}${path}`, {
     headers: { "Content-Type": "application/json", ...options?.headers },
     ...options,
   });
@@ -93,44 +118,49 @@ async function request<T>(path: string, options?: RequestInit): Promise<T> {
 // ─── Auth ─────────────────────────────────────────────────────────────────────
 
 export const login = (email: string, password: string) =>
-  request<LoginResponse>("/api/login", {
+  request<LoginResponse>(ORCHESTRATION_BASE_URL, "/api/login", {
     method: "POST",
     body: JSON.stringify({ email, password }),
   });
 
 // ─── Rooms ────────────────────────────────────────────────────────────────────
 
-export const getRooms = (userId: string) =>
-  request<Room[]>(`/api/v1/rooms/${userId}`);
+export const getRooms = (userId: string): Promise<Room[]> =>
+  request<{ status: string; message: string; data: Room[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/rooms/${userId}`)
+    .then(res => res.data ?? []);
 
-export const getRoom = (roomId: string) =>
-  request<RoomDetail>(`/api/v1/room/${roomId}`);
+export const getRoom = (roomId: string): Promise<RoomDetail> =>
+  request<{ status: string; message: string; data: RoomDetail }>(ORCHESTRATION_BASE_URL, `/api/v1/room/${roomId}`)
+    .then(res => res.data);
 
 export const deleteRoom = (roomId: string, userId: string) =>
   request<{ status: string; message: string }>(
+    ORCHESTRATION_BASE_URL,
     `/api/v1/room/${roomId}?user_id=${userId}`,
     { method: "DELETE" }
   );
 
 export const createRoom = (userId: string, title?: string) =>
-  request<CreateRoomResponse>("/api/v1/room/create", {
+  request<CreateRoomResponse>(ORCHESTRATION_BASE_URL, "/api/v1/room/create", {
     method: "POST",
     body: JSON.stringify({ user_id: userId, title }),
   });
 
 // ─── Documents ────────────────────────────────────────────────────────────────
 
-export const getDocuments = (userId: string) =>
-  request<ApiDocument[]>(`/api/v1/documents/${userId}`);
+export const getDocuments = (userId: string): Promise<ApiDocument[]> =>
+  request<{ status: string; message: string; data: ApiDocument[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/documents/${userId}`)
+    .then(res => res.data ?? []);
 
 export const uploadDocument = async (
   userId: string,
   file: File
 ): Promise<UploadDocumentResponse> => {
   const form = new FormData();
+  form.append("user_id", userId);
   form.append("file", file);
   const res = await fetch(
-    `${BASE_URL}/api/v1/document/upload?user_id=${userId}`,
+    `${ORCHESTRATION_BASE_URL}/api/v1/document/upload`,
     { method: "POST", body: form }
   );
   if (!res.ok) {
@@ -142,24 +172,22 @@ export const uploadDocument = async (
   return res.json() as Promise<UploadDocumentResponse>;
 };
 
-export const processDocument = (userId: string, documentId: string) =>
-  request<{
-    status: string;
-    message: string;
-    data: { document_id: string; chunks_processed: number };
-  }>(
-    `/api/v1/document/process?document_id=${documentId}&user_id=${userId}`,
-    { method: "POST" }
+export const processDocument = (_userId: string, documentId: string) =>
+  request<{ status: string; message: string }>(
+    ORCHESTRATION_BASE_URL,
+    `/api/v1/document/process`,
+    { method: "POST", body: JSON.stringify({ document_id: documentId }) }
   );
 
-export const deleteDocument = (userId: string, documentId: string) =>
+export const deleteDocument = (_userId: string, documentId: string) =>
   request<{ status: string; message: string }>(
-    `/api/v1/document/delete?document_id=${documentId}&user_id=${userId}`,
-    { method: "DELETE" }
+    ORCHESTRATION_BASE_URL,
+    `/api/v1/document/delete`,
+    { method: "DELETE", body: JSON.stringify({ document_id: documentId }) }
   );
 
 export const getDocumentTypes = (): Promise<DocTypeInfo[]> =>
-  request<{ status: string; data: DocTypeInfo[] }>("/api/v1/documents/doctypes").then(
+  request<{ status: string; data: DocTypeInfo[] }>(ORCHESTRATION_BASE_URL, "/api/v1/documents/doctypes").then(
     (res) => res.data
   );
 
@@ -203,7 +231,8 @@ export interface IngestResponse {
 }
 
 export const getDatabaseClientTypes = (): Promise<DbTypeInfo[]> =>
-  request<DbTypeInfo[]>("/api/v1/database-clients/dbtypes");
+  request<{ status: string; message: string; data: DbTypeInfo[] | null }>(ORCHESTRATION_BASE_URL, "/api/v1/database-clients/dbtypes")
+    .then(res => res.data ?? []);
 
 export const connectDatabase = (
   userId: string,
@@ -211,25 +240,43 @@ export const connectDatabase = (
   name: string,
   credentials: Record<string, string | number | boolean>
 ): Promise<DatabaseClient> =>
-  request<DatabaseClient>(`/api/v1/database-clients?user_id=${userId}`, {
+  request<{ status: string; message: string; data: DatabaseClient }>(ORCHESTRATION_BASE_URL, `/api/v1/database-clients`, {
     method: "POST",
-    body: JSON.stringify({ name, db_type: dbType, credentials }),
-  });
+    body: JSON.stringify({ user_id: userId, name, db_type: dbType, credentials }),
+  }).then(res => res.data);
 
 export const getDatabaseClients = (userId: string): Promise<DatabaseClient[]> =>
-  request<DatabaseClient[]>(`/api/v1/database-clients/${userId}`);
+  request<{ status: string; message: string; data: DatabaseClient[] | null }>(ORCHESTRATION_BASE_URL, `/api/v1/database-clients/${userId}`)
+    .then(res => res.data ?? []);
 
 export const deleteDatabaseClient = (clientId: string, userId: string) =>
   request<{ status: string; message: string }>(
+    ORCHESTRATION_BASE_URL,
     `/api/v1/database-clients/${clientId}?user_id=${userId}`,
     { method: "DELETE" }
   );
 
-export const ingestDatabaseClient = (clientId: string, userId: string): Promise<IngestResponse> =>
-  request<IngestResponse>(
-    `/api/v1/database-clients/${clientId}/ingest?user_id=${userId}`,
+export const ingestDatabaseClient = (clientId: string, _userId: string): Promise<IngestResponse> =>
+  request<{ status: string; message: string; data: IngestResponse }>(
+    ORCHESTRATION_BASE_URL,
+    `/api/v1/database-clients/${clientId}/ingest`,
     { method: "POST" }
-  );
+  ).then(res => res.data);
+
+// ─── Data Catalog ─────────────────────────────────────────────────────────────
+
+export const getDataCatalog = (userId: string): Promise<DataCatalog> =>
+  request<{ status: string; message: string; data: DataCatalog }>(
+    ORCHESTRATION_BASE_URL,
+    `/api/v1/data-catalog/${userId}`
+  ).then((res) => res.data);
+
+export const rebuildDataCatalog = (userId: string): Promise<DataCatalog> =>
+  request<{ status: string; message: string; data: DataCatalog }>(
+    ORCHESTRATION_BASE_URL,
+    "/api/v1/data-catalog/rebuild",
+    { method: "POST", body: JSON.stringify({ user_id: userId }) }
+  ).then((res) => res.data);
 
 // ─── Chat ─────────────────────────────────────────────────────────────────────
 
@@ -238,7 +285,7 @@ export const streamChat = (
   roomId: string,
   message: string
 ): Promise<Response> =>
-  fetch(`${BASE_URL}/api/v1/chat/stream`, {
+  fetch(`${AGENTIC_BASE_URL}/api/v1/chat/stream`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ user_id: userId, room_id: roomId, message }),

src/services/interviewApi.ts

@@ -0,0 +1,175 @@
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface InterviewFramework {
+  id: string;
+  name: string;
+}
+
+export interface CreateSessionResponse {
+  session_id: string;
+  framework_id: string;
+  room_id: string;
+  status: string;
+  opening_message: string;
+  first_question: string;
+}
+
+export interface MessageResponse {
+  reply: string;
+  stage: "in_progress" | "next_question" | "follow_up" | "closing";
+  finished: boolean;
+}
+
+export interface QAPair {
+  question_text: string;
+  answer_cleaned: string;
+  follow_ups?: QAPair[];
+}
+
+export interface SectionResult {
+  section_title: string;
+  objective: string[];
+  qa_pairs: QAPair[];
+  section_summary: string;
+}
+
+export interface InterviewResult {
+  framework_name: string;
+  mode: string;
+  language: string;
+  started_at: string;
+  ended_at: string;
+  summary: string;
+  goals: string[];
+  section_results: SectionResult[];
+  key_insights: string[];
+  unresolved_items: string[];
+}
+
+export interface FinishSessionResponse {
+  session_id: string;
+  room_id: string;
+  status: string;
+  result: InterviewResult;
+}
+
+export interface StreamMetadata {
+  finished: boolean;
+  stage: "next_question" | "follow_up" | "closing";
+}
+
+export type AudioServerEvent =
+  | { type: "token_chunk"; payload: string }
+  | { type: "assistant_reply"; payload: string }
+  | { type: "session_done" }
+  | { type: "error"; payload: string };
+
+// ─── Base Client ──────────────────────────────────────────────────────────────
+
+const INTERVIEW_BASE_URL =
+  ((import.meta as unknown as { env: Record<string, string> }).env
+    .VITE_ORCHESTRATION_API_BASE_URL) ?? "http://localhost:8080";
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${INTERVIEW_BASE_URL}${path}`, {
+    headers: { "Content-Type": "application/json", ...options?.headers },
+    ...options,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+    throw new Error(err.error ?? `HTTP ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+// ─── Endpoints ────────────────────────────────────────────────────────────────
+
+export const getFrameworks = (): Promise<InterviewFramework[]> =>
+  request<InterviewFramework[]>("/frameworks");
+
+export const createSession = (
+  frameworkId: string,
+  userId: string,
+  roomId: string,
+  mode: "text" | "audio" = "text",
+  language = "id-ID"
+): Promise<CreateSessionResponse> =>
+  request<CreateSessionResponse>("/sessions", {
+    method: "POST",
+    body: JSON.stringify({ framework_id: frameworkId, user_id: userId, room_id: roomId, mode, language }),
+  });
+
+export const sendMessage = (
+  sessionId: string,
+  message: string
+): Promise<MessageResponse> =>
+  request<MessageResponse>(`/sessions/${sessionId}/message`, {
+    method: "POST",
+    body: JSON.stringify({ message }),
+  });
+
+export const finishSession = (
+  sessionId: string
+): Promise<FinishSessionResponse> =>
+  request<FinishSessionResponse>(`/sessions/${sessionId}/finish`, {
+    method: "POST",
+  });
+
+export const getInterviewResult = (roomId: string): Promise<InterviewResult> =>
+  request<InterviewResult>(`/rooms/${roomId}/result`);
+
+// SSE streaming — returns raw Response so caller can read the stream
+export const streamMessage = (
+  sessionId: string,
+  message: string
+): Promise<Response> =>
+  fetch(`${INTERVIEW_BASE_URL}/sessions/${sessionId}/stream-message`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ message }),
+  });
+
+// ─── Audio WebSocket ──────────────────────────────────────────────────────────
+
+export interface AudioSessionHandle {
+  sendAudioChunk: (chunk: ArrayBuffer) => void;
+  sendEndUtterance: () => void;
+  close: () => void;
+}
+
+export function openAudioSession(
+  sessionId: string,
+  onEvent: (event: AudioServerEvent) => void,
+  onAudio: (audioBuffer: ArrayBuffer) => void,
+  onClose: () => void
+): AudioSessionHandle {
+  const wsBase = INTERVIEW_BASE_URL.replace(/^http/, "ws");
+  const ws = new WebSocket(`${wsBase}/ws/audio?session_id=${sessionId}`);
+  ws.binaryType = "arraybuffer";
+
+  ws.onmessage = (e) => {
+    if (e.data instanceof ArrayBuffer) {
+      onAudio(e.data);
+    } else {
+      try {
+        const parsed = JSON.parse(e.data) as AudioServerEvent;
+        onEvent(parsed);
+      } catch {
+        // ignore malformed messages
+      }
+    }
+  };
+
+  ws.onclose = onClose;
+
+  return {
+    sendAudioChunk: (chunk) => {
+      if (ws.readyState === WebSocket.OPEN) ws.send(chunk);
+    },
+    sendEndUtterance: () => {
+      if (ws.readyState === WebSocket.OPEN)
+        ws.send(JSON.stringify({ type: "end_utterance" }));
+    },
+    close: () => ws.close(),
+  };
+}