@layrs_ai/dsa-tutor-sdk 0.1.0

package/README.md

@@ -0,0 +1,97 @@
+# @layrs/dsa-tutor-sdk
+
+Shared React SDK for opening the Layrs DSA voice tutor from another product.
+
+The SDK owns:
+
+- LiveKit room connection and microphone publishing.
+- Agent audio playback.
+- `app.control` data-channel publishing and receiving.
+- Tutor transcript state.
+- A reusable `DsaTutorLauncher` room UI.
+
+The host app owns:
+
+- Authentication.
+- Entitlement checks.
+- Token minting.
+- Problem lookup.
+- Code execution, submissions, history, and app-level theme state through
+  optional `DsaTutorLauncher` callbacks.
+
+## Usage
+
+```tsx
+import {
+  DsaTutorLauncher,
+  type DsaTutorTokenProvider,
+} from "@layrs/dsa-tutor-sdk";
+
+const tokenProvider: DsaTutorTokenProvider = async ({ problem, sheetId }) => {
+  const session = await api.voiceTutor.createDsaSession.mutate({
+    questionId: problem.id,
+    sheetId: Number(sheetId),
+  });
+
+  return {
+    token: session.token,
+    livekitUrl: session.livekitUrl,
+    roomName: session.roomName,
+    identity: session.identity,
+    problemSlug: session.problemSlug,
+    problemId: session.problemId,
+  };
+};
+
+<DsaTutorLauncher
+  problem={{
+    id: question.id,
+    title: question.title,
+    difficulty: question.difficulty,
+    problemLink: question.problemLink,
+  }}
+  sheetId={sheetId}
+  tokenProvider={tokenProvider}
+  onRun={async ({ code, language, problem }) => {
+    await runCode({ code, language, problemId: problem.id });
+  }}
+  onSubmit={async ({ code, language, problem }) => {
+    await submitCode({ code, language, problemId: problem.id });
+  }}
+/>;
+```
+
+Without `onRun` / `onSubmit`, those buttons remain visible but show a host-not-wired
+notice instead of silently doing nothing.
+
+## Token Provider Contract
+
+`tokenProvider` must return a LiveKit participant token that dispatches the
+existing voice-agent worker with metadata including:
+
+- `agentType: "dsa_practice_coach"`
+- `problemSlug` / `problem_slug`
+- `problemId` / `problem_id`
+- `userId` / `user_id`
+
+In LearnYard, the browser calls the LearnYard API. LearnYard API calls Tryst.
+Tryst mints the LiveKit token and injects the agent metadata.
+
+## Publishing
+
+This package is configured for a private npm publish under the `@layrs` scope.
+
+```bash
+cd /Users/sameer/Documents/voice-agent/dsa-tutor-sdk
+pnpm run clean
+pnpm run check-types
+pnpm run build
+npm login
+npm publish --access restricted
+```
+
+Consumers can then install it as:
+
+```json
+"@layrs/dsa-tutor-sdk": "^0.1.0"
+```

package/dist/DsaTutorLauncher.d.ts

@@ -0,0 +1,34 @@
+import type { DsaTutorControlMessage, DsaTutorLanguage, DsaTutorMode, DsaTutorProblem, DsaTutorRunResponse, DsaTutorTokenProvider } from "./types";
+export interface DsaTutorLauncherProps {
+    problem: DsaTutorProblem;
+    tokenProvider: DsaTutorTokenProvider;
+    sheetId?: string | number;
+    buttonLabel?: string;
+    buttonClassName?: string;
+    codeTemplate?: string;
+    testcaseText?: string;
+    autoStart?: boolean;
+    initialMode?: DsaTutorMode;
+    onModeChange?: (mode: DsaTutorMode) => void;
+    onRun?: (context: {
+        code: string;
+        language: DsaTutorLanguage;
+        problem: DsaTutorProblem;
+    }) => DsaTutorRunResponse | void | Promise<DsaTutorRunResponse | void>;
+    onSubmit?: (context: {
+        code: string;
+        language: DsaTutorLanguage;
+        problem: DsaTutorProblem;
+    }) => DsaTutorRunResponse | void | Promise<DsaTutorRunResponse | void>;
+    onHistory?: () => void | Promise<void>;
+    onReset?: (context: {
+        problem: DsaTutorProblem;
+    }) => string | void | Promise<string | void>;
+    onThemeChange?: (theme: "light" | "dark") => void;
+    onCodeChange?: (code: string) => void;
+    onLanguageChange?: (language: string) => void;
+    onAgentMessage?: (message: DsaTutorControlMessage) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare function DsaTutorLauncher({ problem, tokenProvider, sheetId, buttonLabel, buttonClassName, codeTemplate, testcaseText, autoStart, initialMode, onModeChange, onRun, onSubmit, onHistory, onReset, onThemeChange, onCodeChange, onLanguageChange, onAgentMessage, onOpenChange, }: DsaTutorLauncherProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DsaTutorLauncher.d.ts.map

package/dist/DsaTutorLauncher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DsaTutorLauncher.d.ts","sourceRoot":"","sources":["../src/DsaTutorLauncher.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAajB,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,eAAe,CAAC;IACzB,aAAa,EAAE,qBAAqB,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,gBAAgB,CAAC;QAAC,OAAO,EAAE,eAAe,CAAA;KAAE,KAAK,mBAAmB,GAAG,IAAI,GAAG,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IAC9J,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,gBAAgB,CAAC;QAAC,OAAO,EAAE,eAAe,CAAA;KAAE,KAAK,mBAAmB,GAAG,IAAI,GAAG,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACjK,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,OAAO,EAAE,eAAe,CAAA;KAAE,KAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAcD,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,aAAa,EACb,OAAO,EACP,WAAkB,EAClB,eAAe,EACf,YAAkC,EAClC,YAAmB,EACnB,SAAiB,EACjB,WAAqB,EACrB,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,YAAY,GACb,EAAE,qBAAqB,2CA66BvB"}

package/dist/DsaTutorLauncher.js

@@ -0,0 +1,493 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Editor } from "@monaco-editor/react";
+import { ArrowLeft, Bug, CheckCircle2, Clock3, Footprints, Loader2, Mic, MicOff, Moon, PhoneOff, Play, RotateCcw, Send, Sparkles, Sun, X, } from "lucide-react";
+import { buildStudentRunResult } from "./dsaTutorRedaction";
+import { useDsaTutorLiveKit, } from "./useDsaTutorLiveKit";
+import { EditProposalPopover, applyLineReplacement, } from "./EditProposalPopover";
+import { WidgetStack } from "./WidgetStack";
+const defaultCodeTemplate = `class Solution {
+public:
+    int solve() {
+        // Your code here
+        return 0;
+    }
+};`;
+function getStarterCode(problem, language, fallback) {
+    return problem.starterCode?.[language] || fallback;
+}
+export function DsaTutorLauncher({ problem, tokenProvider, sheetId, buttonLabel = "AI", buttonClassName, codeTemplate = defaultCodeTemplate, testcaseText = "[]", autoStart = false, initialMode = "coach", onModeChange, onRun, onSubmit, onHistory, onReset, onThemeChange, onCodeChange, onLanguageChange, onAgentMessage, onOpenChange, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isStarting, setIsStarting] = useState(false);
+    const [localError, setLocalError] = useState(null);
+    const [actionNotice, setActionNotice] = useState(null);
+    const [text, setText] = useState("");
+    const [code, setCode] = useState(() => getStarterCode(problem, "cpp", codeTemplate));
+    const [language, setLanguage] = useState("cpp");
+    const [activeMode, setActiveMode] = useState(initialMode);
+    const [theme, setTheme] = useState("light");
+    const [lastRunResult, setLastRunResult] = useState(null);
+    const [activeBottomTab, setActiveBottomTab] = useState("testcase");
+    const [selectedCase, setSelectedCase] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [editProposals, setEditProposals] = useState([]);
+    const [widgets, setWidgets] = useState(() => new Map());
+    const [studyNote, setStudyNote] = useState(null);
+    const [highlightNotice, setHighlightNotice] = useState(null);
+    const [proposalTopOffset, setProposalTopOffset] = useState(24);
+    const tutorRef = useRef(null);
+    const autoStartedRef = useRef(false);
+    const runActionRef = useRef(null);
+    const codeRef = useRef(code);
+    const languageRef = useRef(language);
+    const editorRef = useRef(null);
+    const monacoRef = useRef(null);
+    const highlightDecorationsRef = useRef([]);
+    const highlightTimerRef = useRef(null);
+    const clearEditorHighlight = useCallback(() => {
+        const editor = editorRef.current;
+        if (editor && highlightDecorationsRef.current.length > 0) {
+            highlightDecorationsRef.current = editor.deltaDecorations(highlightDecorationsRef.current, []);
+        }
+        setHighlightNotice(null);
+    }, []);
+    const highlightEditorLines = useCallback((startLine, endLine = startLine) => {
+        const safeStart = Math.max(1, Math.floor(startLine || 1));
+        const safeEnd = Math.max(safeStart, Math.floor(endLine || safeStart));
+        setHighlightNotice(safeStart === safeEnd
+            ? `Tutor highlighted line ${safeStart}.`
+            : `Tutor highlighted lines ${safeStart}-${safeEnd}.`);
+        const editor = editorRef.current;
+        const monaco = monacoRef.current;
+        if (editor && monaco) {
+            highlightDecorationsRef.current = editor.deltaDecorations(highlightDecorationsRef.current, [
+                {
+                    range: new monaco.Range(safeStart, 1, safeEnd, 1),
+                    options: {
+                        isWholeLine: true,
+                        className: "layrs-dsa-monaco-highlight-line",
+                    },
+                },
+            ]);
+            editor.revealLineInCenterIfOutsideViewport(safeStart);
+        }
+        if (highlightTimerRef.current) {
+            clearTimeout(highlightTimerRef.current);
+        }
+        highlightTimerRef.current = setTimeout(clearEditorHighlight, 9000);
+    }, [clearEditorHighlight]);
+    const focusProposalLine = useCallback((startLine) => {
+        const editor = editorRef.current;
+        if (!editor) {
+            setProposalTopOffset(24);
+            return;
+        }
+        const safeStart = Math.max(1, Math.floor(startLine || 1));
+        editor.revealLineInCenterIfOutsideViewport(safeStart);
+        requestAnimationFrame(() => {
+            const top = editor.getTopForLineNumber(safeStart) - editor.getScrollTop();
+            setProposalTopOffset(Number.isFinite(top) ? top : 24);
+        });
+    }, []);
+    const tutor = useDsaTutorLiveKit({
+        onAgentMessage: (message) => {
+            if (message.type === "agent.request_code") {
+                tutorRef.current?.publishControlMessage({
+                    type: "student.code_update",
+                    code: codeRef.current,
+                    language: languageRef.current,
+                    timestamp: Date.now(),
+                    source: "dsa_tutor_sdk",
+                });
+            }
+            if (message.type === "agent.request_run") {
+                void runActionRef.current?.("run");
+            }
+            if (message.type === "agent.request_submit") {
+                void runActionRef.current?.("submit");
+            }
+            if (message.type === "monaco_init") {
+                const nextLanguage = String(message.language || "").toLowerCase();
+                if (nextLanguage === "cpp" || nextLanguage === "java") {
+                    setLanguage(nextLanguage);
+                }
+            }
+            if (message.type === "monaco_file") {
+                const content = message.content;
+                if (typeof content === "string" &&
+                    (message.action === "create" || message.action === "update")) {
+                    codeRef.current = content;
+                    if (editorRef.current?.getValue() !== content) {
+                        editorRef.current?.setValue(content);
+                    }
+                    setCode(content);
+                    setActionNotice("Tutor updated the editor.");
+                }
+            }
+            if (message.type === "monaco_highlight") {
+                const startLine = Number(message.startLine || message.start_line || 1);
+                const endLine = Number(message.endLine || message.end_line || startLine);
+                highlightEditorLines(startLine, endLine);
+            }
+            if (message.type === "agent.propose_code_edit") {
+                const proposal = message;
+                if (typeof proposal.proposal_id === "string" &&
+                    typeof proposal.replacement === "string") {
+                    focusProposalLine(Number(proposal.start_line || 1));
+                    setEditProposals((current) => current.some((item) => item.proposal_id === proposal.proposal_id)
+                        ? current
+                        : [...current, proposal].slice(-5));
+                }
+            }
+            if (message.type === "agent.mode_ack") {
+                const mode = String(message.mode || "");
+                if (mode === "coach" || mode === "debug" || mode === "walkthrough") {
+                    setActiveMode(mode);
+                }
+            }
+            if (message.type === "agent.show_widget") {
+                const widget = message;
+                if (typeof widget.widget_id === "string") {
+                    setWidgets((current) => {
+                        const next = new Map(current);
+                        next.set(widget.widget_id, widget);
+                        return next;
+                    });
+                }
+            }
+            if (message.type === "agent.clear_widget") {
+                const widgetId = String(message.widget_id || "");
+                setWidgets((current) => {
+                    if (!current.has(widgetId))
+                        return current;
+                    const next = new Map(current);
+                    next.delete(widgetId);
+                    return next;
+                });
+            }
+            if (message.type === "agent.study_note") {
+                setStudyNote(String(message.body_md || ""));
+            }
+            if (message.type === "agent.session_end") {
+                void tutorRef.current?.disconnect();
+            }
+            onAgentMessage?.(message);
+        },
+    });
+    useEffect(() => {
+        codeRef.current = code;
+    }, [code]);
+    useEffect(() => {
+        languageRef.current = language;
+    }, [language]);
+    useEffect(() => {
+        return () => {
+            if (highlightTimerRef.current) {
+                clearTimeout(highlightTimerRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        setCode(getStarterCode(problem, language, codeTemplate));
+        setLastRunResult(null);
+        setActiveBottomTab("testcase");
+    }, [
+        codeTemplate,
+        language,
+        problem.id,
+        problem.slug,
+        problem.starterCode?.cpp,
+        problem.starterCode?.java,
+    ]);
+    useEffect(() => {
+        tutorRef.current = tutor;
+    }, [tutor]);
+    const setOpen = useCallback((nextOpen) => {
+        setIsOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange]);
+    const start = useCallback(async () => {
+        if (isStarting || tutor.isBusy)
+            return;
+        setOpen(true);
+        setLocalError(null);
+        setIsStarting(true);
+        try {
+            const session = await tokenProvider({ problem, sheetId });
+            await tutor.connect(session);
+        }
+        catch (error) {
+            setLocalError(error?.message || "Could not start the AI tutor.");
+        }
+        finally {
+            setIsStarting(false);
+        }
+    }, [isStarting, problem, setOpen, sheetId, tokenProvider, tutor]);
+    useEffect(() => {
+        if (!autoStart || autoStartedRef.current)
+            return;
+        autoStartedRef.current = true;
+        start();
+    }, [autoStart, start]);
+    const close = useCallback(async () => {
+        await tutor.disconnect();
+        setOpen(false);
+    }, [setOpen, tutor]);
+    const sendText = useCallback(() => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        tutor.sendText(trimmed);
+        setText("");
+    }, [text, tutor]);
+    const updateCode = useCallback((nextCode) => {
+        setCode(nextCode);
+        onCodeChange?.(nextCode);
+        tutor.publishControlMessage({
+            type: "student.code_update",
+            code: nextCode,
+            language,
+            timestamp: Date.now(),
+            source: "dsa_tutor_sdk",
+        });
+    }, [language, onCodeChange, tutor]);
+    const changeLanguage = useCallback((nextLanguage) => {
+        setLanguage(nextLanguage);
+        onLanguageChange?.(nextLanguage);
+        const nextCode = getStarterCode(problem, nextLanguage, codeTemplate);
+        setCode(nextCode);
+        setLastRunResult(null);
+        setActiveBottomTab("testcase");
+        tutor.publishControlMessage({
+            type: "student.code_update",
+            code: nextCode,
+            language: nextLanguage,
+            timestamp: Date.now(),
+            source: "dsa_tutor_sdk",
+        });
+    }, [codeTemplate, onLanguageChange, problem, tutor]);
+    const changeMode = useCallback((mode) => {
+        if (mode === activeMode)
+            return;
+        setActiveMode(mode);
+        setActionNotice(null);
+        onModeChange?.(mode);
+        tutor.publishControlMessage({
+            type: "student.mode_change",
+            mode,
+            timestamp: Date.now(),
+        });
+    }, [activeMode, onModeChange, tutor]);
+    const toggleTheme = useCallback(() => {
+        const nextTheme = theme === "light" ? "dark" : "light";
+        setTheme(nextTheme);
+        onThemeChange?.(nextTheme);
+    }, [onThemeChange, theme]);
+    const runHostAction = useCallback(async () => {
+        setLocalError(null);
+        if (!onHistory) {
+            setActionNotice("History is not wired in this host yet.");
+            return;
+        }
+        setActionNotice(null);
+        try {
+            await onHistory();
+        }
+        catch (error) {
+            setLocalError(error?.message || "History failed.");
+        }
+    }, [onHistory]);
+    const executeCodeAction = useCallback(async (kind) => {
+        const action = kind === "run" ? onRun : onSubmit;
+        const label = kind === "run" ? "Run" : "Submit";
+        setLocalError(null);
+        if (!code.trim()) {
+            setLocalError("Editor is empty.");
+            return;
+        }
+        if (!action) {
+            setActionNotice(`${label} is not wired in this host yet.`);
+            return;
+        }
+        setActionNotice(null);
+        setActiveBottomTab("result");
+        if (kind === "run")
+            setIsRunning(true);
+        else
+            setIsSubmitting(true);
+        try {
+            const result = await action({ code, language, problem });
+            if (result) {
+                setLastRunResult(result);
+                tutor.publishControlMessage(buildStudentRunResult(result, kind));
+            }
+        }
+        catch (error) {
+            setLocalError(error?.message || `${label} failed.`);
+        }
+        finally {
+            if (kind === "run")
+                setIsRunning(false);
+            else
+                setIsSubmitting(false);
+        }
+    }, [code, language, onRun, onSubmit, problem, tutor]);
+    useEffect(() => {
+        runActionRef.current = executeCodeAction;
+    }, [executeCodeAction]);
+    const resetCode = useCallback(async () => {
+        setLocalError(null);
+        try {
+            const replacement = await onReset?.({ problem });
+            const nextCode = typeof replacement === "string"
+                ? replacement
+                : getStarterCode(problem, language, codeTemplate);
+            setCode(nextCode);
+            setLastRunResult(null);
+            setActiveBottomTab("testcase");
+            onCodeChange?.(nextCode);
+            setActionNotice("Code reset.");
+            tutor.publishControlMessage({
+                type: "student.code_update",
+                code: nextCode,
+                language,
+                timestamp: Date.now(),
+                source: "dsa_tutor_sdk",
+            });
+        }
+        catch (error) {
+            setLocalError(error?.message || "Reset failed.");
+        }
+    }, [codeTemplate, language, onCodeChange, onReset, problem, tutor]);
+    const endSession = useCallback(async () => {
+        tutor.publishControlMessage({
+            type: "student.complete",
+            timestamp: Date.now(),
+        });
+        await tutor.disconnect();
+    }, [tutor]);
+    const activeProposal = editProposals[0] || null;
+    const acceptProposal = useCallback(() => {
+        if (!activeProposal)
+            return;
+        const nextCode = applyLineReplacement(codeRef.current, activeProposal);
+        codeRef.current = nextCode;
+        setCode(nextCode);
+        onCodeChange?.(nextCode);
+        setEditProposals((current) => current.slice(1));
+        setActionNotice("Tutor edit applied.");
+        tutor.publishControlMessage({
+            type: "student.edit_decision",
+            proposal_id: activeProposal.proposal_id,
+            decision: "accepted",
+            timestamp: Date.now(),
+        });
+        tutor.publishControlMessage({
+            type: "student.code_update",
+            code: nextCode,
+            language: languageRef.current,
+            timestamp: Date.now(),
+            source: "dsa_tutor_sdk",
+        });
+    }, [activeProposal, onCodeChange, tutor]);
+    const rejectProposal = useCallback(() => {
+        if (!activeProposal)
+            return;
+        setEditProposals((current) => current.slice(1));
+        tutor.publishControlMessage({
+            type: "student.edit_decision",
+            proposal_id: activeProposal.proposal_id,
+            decision: "rejected",
+            timestamp: Date.now(),
+        });
+    }, [activeProposal, tutor]);
+    const isBusy = isStarting || tutor.isBusy;
+    const isConnected = tutor.isConnected;
+    const statusLabel = tutor.state === "speaking"
+        ? "Tutor is speaking"
+        : tutor.state === "muted"
+            ? "Mic muted"
+            : isConnected
+                ? "Tutor is listening"
+                : isBusy
+                    ? "Starting tutor"
+                    : "Ready";
+    const visibleError = localError || tutor.lastError;
+    const isDark = theme === "dark";
+    const monacoTheme = isDark ? "vs-dark" : "vs";
+    const monacoLanguage = language === "cpp" ? "cpp" : "java";
+    const shellClass = isDark ? "bg-[#0d1020] text-slate-100" : "bg-[#fbfaf8] text-slate-950";
+    const surfaceClass = isDark ? "border-slate-800 bg-[#12172a]" : "border-[#e7e2d9] bg-white";
+    const panelClass = isDark ? "border-slate-800 bg-[#111827]" : "border-[#e7e2d9] bg-white";
+    const subtlePanelClass = isDark ? "border-slate-800 bg-[#0f172a]" : "border-[#e7e2d9] bg-[#fffdf9]";
+    const mutedTextClass = isDark ? "text-slate-300" : "text-slate-700";
+    const secondaryTextClass = isDark ? "text-slate-400" : "text-slate-500";
+    const hoverClass = isDark ? "hover:bg-slate-800" : "hover:bg-slate-100";
+    const inactiveChipClass = isDark
+        ? "border border-slate-700 bg-[#111827] text-slate-100 hover:bg-slate-800"
+        : "border border-[#e7e2d9] bg-white text-slate-900 hover:bg-slate-50";
+    const activeChipClass = "bg-[#4b74f2] text-white";
+    const modeButtons = [
+        { mode: "coach", label: "Coach", icon: Sparkles },
+        { mode: "debug", label: "Debug", icon: Bug },
+        { mode: "walkthrough", label: "Walkthrough", icon: Footprints },
+    ];
+    const visibleTestCases = problem.visibleTestCases || [];
+    const currentCase = visibleTestCases[selectedCase] || visibleTestCases[0];
+    const currentCaseText = currentCase?.input?.join("\n") || testcaseText || "[]";
+    const widgetList = Array.from(widgets.values());
+    const resultColor = lastRunResult?.verdict === "accepted"
+        ? "text-emerald-600"
+        : lastRunResult
+            ? "text-red-600"
+            : secondaryTextClass;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+          .layrs-dsa-monaco-highlight-line {
+            background-color: rgba(255, 213, 79, 0.18);
+            border-left: 2px solid #4b74f2;
+          }
+        ` }), _jsxs("button", { type: "button", className: buttonClassName ||
+                    "ml-2 inline-flex h-7 items-center gap-1 rounded-md border border-[#6D4AFF]/30 bg-[#6D4AFF]/10 px-2 text-xs font-semibold text-[#5B3FE8] transition hover:bg-[#6D4AFF]/15 disabled:cursor-not-allowed disabled:opacity-60", disabled: isBusy, title: "Practice this problem with AI", onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    start();
+                }, children: [isBusy ? _jsx(Loader2, { size: 14, className: "animate-spin" }) : _jsx(Sparkles, { size: 14 }), buttonLabel] }), isOpen ? (_jsx("div", { className: `fixed inset-0 z-[1000] ${shellClass}`, onClick: (event) => event.stopPropagation(), children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("header", { className: `flex h-[70px] shrink-0 items-center justify-between border-b px-5 ${surfaceClass}`, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsxs("button", { type: "button", className: `inline-flex h-10 items-center gap-2 rounded-md px-2 text-sm font-semibold ${hoverClass}`, onClick: close, children: [_jsx(ArrowLeft, { size: 18 }), "Back"] }), _jsx("div", { className: `h-8 w-px ${isDark ? "bg-slate-800" : "bg-[#e7e2d9]"}` }), _jsx("h1", { className: "truncate text-xl font-bold", children: problem.title }), problem.difficulty ? (_jsx("span", { className: "rounded-md bg-amber-50 px-2.5 py-1 text-sm font-semibold capitalize text-amber-700", children: problem.difficulty })) : null, _jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-600", children: [_jsx(CheckCircle2, { size: 18 }), "Tutor"] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", className: `inline-flex h-11 items-center gap-2 rounded-md border px-3 text-sm font-semibold ${inactiveChipClass}`, onClick: runHostAction, children: [_jsx(Clock3, { size: 18 }), "History"] }), _jsxs("button", { type: "button", className: `inline-flex h-11 items-center gap-2 rounded-md border px-4 text-sm font-semibold ${inactiveChipClass}`, disabled: isRunning || isSubmitting, onClick: () => executeCodeAction("run"), children: [isRunning ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(Play, { size: 18 }), "Run"] }), _jsxs("button", { type: "button", className: "inline-flex h-11 items-center gap-2 rounded-md bg-[#4b74f2] px-4 text-sm font-semibold text-white", disabled: isRunning || isSubmitting, onClick: () => executeCodeAction("submit"), children: [isSubmitting ? _jsx(Loader2, { size: 18, className: "animate-spin" }) : _jsx(CheckCircle2, { size: 18 }), "Submit"] }), _jsx("button", { type: "button", className: `grid h-11 w-11 place-items-center rounded-full border ${inactiveChipClass}`, title: "Theme", onClick: toggleTheme, children: isDark ? _jsx(Sun, { size: 18 }) : _jsx(Moon, { size: 18 }) }), _jsx("button", { type: "button", className: `grid h-11 w-11 place-items-center rounded-md ${secondaryTextClass} ${hoverClass}`, title: "Close", onClick: close, children: _jsx(X, { size: 18 }) })] })] }), _jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[28%_1fr_400px] overflow-hidden", children: [_jsxs("aside", { className: `min-h-0 overflow-y-auto border-r ${panelClass}`, children: [_jsxs("div", { className: `flex h-[62px] items-center gap-3 border-b px-4 ${isDark ? "border-slate-800" : "border-[#ece7df]"}`, children: [_jsx("button", { className: `rounded-md px-3 py-2 text-sm font-bold shadow-sm ${isDark ? "bg-slate-800" : "bg-white"}`, children: "Description" }), _jsx("button", { className: `px-2 py-2 text-sm font-bold ${mutedTextClass}`, children: "Submissions" }), _jsx("button", { className: `px-2 py-2 text-sm font-bold ${mutedTextClass}`, children: "Notes" })] }), _jsxs("div", { className: `space-y-6 px-5 py-6 text-[15px] leading-7 ${mutedTextClass}`, children: [_jsx("span", { className: "inline-flex rounded-md bg-blue-50 px-3 py-1 text-sm font-medium text-blue-500", children: problem.tag || "dsa-practice" }), _jsx("h2", { className: "text-2xl font-bold", children: problem.title }), problem.statement ? (_jsx("div", { className: "whitespace-pre-wrap", children: problem.statement })) : (_jsx("p", { children: "Work through this problem with the AI tutor. Use the center workspace for notes or code while the tutor coaches you on approach, edge cases, and complexity." })), problem.problemLink && problem.problemLink !== "NA" ? (_jsx("a", { href: problem.problemLink, target: "_blank", rel: "noreferrer", className: `inline-flex rounded-md border px-3 py-2 text-sm font-semibold ${inactiveChipClass}`, children: "Open original problem" })) : null, _jsxs("div", { children: [_jsx("h3", { className: "mb-3 text-lg font-bold", children: "Scratch Examples" }), _jsxs("div", { className: "rounded-md bg-slate-900 p-4 font-mono text-sm text-slate-100", children: [_jsx("div", { children: "Input:" }), _jsx("pre", { className: "whitespace-pre-wrap", children: currentCaseText })] })] })] })] }), _jsxs("main", { className: `grid min-h-0 grid-rows-[70px_1fr_220px] ${panelClass}`, children: [_jsxs("div", { className: `flex items-center justify-between border-b px-5 ${isDark ? "border-slate-800" : "border-[#ece7df]"}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("select", { className: `h-10 rounded-md border px-3 text-sm font-semibold ${inactiveChipClass}`, value: language, onChange: (event) => changeLanguage(event.target.value), children: [_jsx("option", { value: "cpp", children: "C++" }), _jsx("option", { value: "java", children: "Java" })] }), _jsx("span", { className: `text-sm ${secondaryTextClass}`, children: "Saved" })] }), _jsxs("button", { type: "button", className: `inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-semibold ${inactiveChipClass}`, onClick: resetCode, children: [_jsx(RotateCcw, { size: 18 }), "Reset"] })] }), _jsxs("div", { className: `relative min-h-0 ${isDark ? "bg-[#0b1120]" : "bg-white"}`, children: [_jsx(Editor, { height: "100%", language: monacoLanguage, theme: monacoTheme, value: code, onChange: (value) => updateCode(value ?? ""), onMount: (editor, monaco) => {
+                                                        editorRef.current = editor;
+                                                        monacoRef.current = monaco;
+                                                    }, options: {
+                                                        minimap: { enabled: false },
+                                                        fontSize: 15,
+                                                        lineHeight: 26,
+                                                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                                                        scrollBeyondLastLine: false,
+                                                        automaticLayout: true,
+                                                        wordWrap: "on",
+                                                        padding: { top: 28, bottom: 28 },
+                                                        renderLineHighlight: "line",
+                                                        overviewRulerBorder: false,
+                                                    } }), activeProposal ? (_jsx(EditProposalPopover, { proposal: activeProposal, currentCode: code, language: language, monacoTheme: monacoTheme, topOffsetPx: proposalTopOffset, queueDepth: Math.max(0, editProposals.length - 1), isDark: isDark, onAccept: acceptProposal, onReject: rejectProposal })) : null] }), _jsxs("div", { className: `border-t ${panelClass}`, children: [_jsxs("div", { className: "flex h-14 items-center gap-3 px-5", children: [_jsx("button", { type: "button", className: `rounded-md px-3 py-2 text-base font-bold ${activeBottomTab === "testcase"
+                                                                ? `${isDark ? "bg-slate-800" : "bg-white"} shadow-sm`
+                                                                : mutedTextClass}`, onClick: () => setActiveBottomTab("testcase"), children: "Testcase" }), _jsx("button", { type: "button", className: `rounded-md px-3 py-2 text-base font-bold ${activeBottomTab === "result"
+                                                                ? `${isDark ? "bg-slate-800" : "bg-white"} shadow-sm`
+                                                                : mutedTextClass}`, onClick: () => setActiveBottomTab("result"), children: "Test Result" })] }), _jsx("div", { className: "px-5 pb-5", children: activeBottomTab === "testcase" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-3 flex gap-2", children: (visibleTestCases.length > 0
+                                                                    ? visibleTestCases
+                                                                    : [{ idx: 0, input: [testcaseText] }]).map((testCase, index) => (_jsxs("button", { type: "button", className: `rounded-md px-3 py-2 text-sm font-semibold ${selectedCase === index
+                                                                        ? "bg-[#4b74f2] text-white"
+                                                                        : inactiveChipClass}`, onClick: () => setSelectedCase(index), children: ["Case ", index + 1] }, `${testCase.idx}-${index}`))) }), _jsx("div", { className: `rounded-md border px-4 py-3 font-mono text-sm ${subtlePanelClass}`, children: _jsx("pre", { className: "whitespace-pre-wrap", children: currentCaseText }) })] })) : lastRunResult ? (_jsxs("div", { className: `rounded-md border px-4 py-3 text-sm ${subtlePanelClass}`, children: [_jsx("div", { className: `mb-2 text-base font-bold ${resultColor}`, children: lastRunResult.verdict_label }), _jsxs("div", { className: secondaryTextClass, children: [lastRunResult.tests_passed, " / ", lastRunResult.tests_total, " cases passed", lastRunResult.is_submit && lastRunResult.hidden_tests_total > 0
+                                                                        ? `, including ${lastRunResult.hidden_tests_total} hidden`
+                                                                        : ""] }), lastRunResult.runtime_ms != null ? (_jsxs("div", { className: secondaryTextClass, children: ["Runtime: ", lastRunResult.runtime_ms, "ms"] })) : null, lastRunResult.memory_kb != null ? (_jsxs("div", { className: secondaryTextClass, children: ["Memory: ", (lastRunResult.memory_kb / 1024).toFixed(2), "MB"] })) : null, lastRunResult.compile_error ? (_jsx("pre", { className: "mt-3 max-h-24 overflow-auto whitespace-pre-wrap rounded-md bg-red-50 p-3 font-mono text-xs text-red-700", children: lastRunResult.compile_error.message })) : null, lastRunResult.first_failure ? (_jsxs("div", { className: "mt-3 space-y-2", children: [_jsxs("div", { className: "font-semibold", children: ["Failed case #", lastRunResult.first_failure.case_idx + 1, lastRunResult.first_failure.is_hidden ? " (hidden)" : ""] }), lastRunResult.first_failure.expected != null ? (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("pre", { className: `whitespace-pre-wrap rounded-md border p-2 font-mono text-xs ${subtlePanelClass}`, children: ["Expected: ", lastRunResult.first_failure.expected] }), _jsxs("pre", { className: `whitespace-pre-wrap rounded-md border p-2 font-mono text-xs ${subtlePanelClass}`, children: ["Actual: ", lastRunResult.first_failure.actual] })] })) : null] })) : null] })) : (_jsx("div", { className: `rounded-md border px-4 py-3 text-sm ${subtlePanelClass}`, children: "Run your code to see results here." })) })] })] }), _jsxs("aside", { className: `grid min-h-0 grid-rows-[70px_auto_1fr_auto] border-l ${panelClass}`, children: [_jsxs("div", { className: `flex items-center gap-2 border-b px-5 ${isDark ? "border-slate-800" : "border-[#ece7df]"}`, children: [_jsx(Sparkles, { size: 20, className: "text-[#4b74f2]" }), _jsx("h2", { className: "text-xl font-bold", children: "Tutor" })] }), _jsx("div", { className: `flex gap-2 overflow-x-auto border-b px-5 py-4 ${isDark ? "border-slate-800" : "border-[#f1ede6]"}`, children: modeButtons.map(({ mode, label, icon: Icon }) => (_jsxs("button", { type: "button", className: `inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold ${activeMode === mode ? activeChipClass : inactiveChipClass}`, onClick: () => changeMode(mode), children: [_jsx(Icon, { size: 16 }), label] }, mode))) }), _jsxs("div", { className: "min-h-0 overflow-y-auto px-5 py-5", children: [_jsx("div", { className: "mb-4 text-xs font-bold uppercase tracking-wide text-slate-400", children: statusLabel }), actionNotice ? (_jsx("div", { className: `mb-3 rounded-md border px-3 py-2 text-sm ${isDark ? "border-blue-900 bg-blue-950/40 text-blue-100" : "border-blue-200 bg-blue-50 text-blue-700"}`, children: actionNotice })) : null, highlightNotice ? (_jsx("div", { className: `mb-3 rounded-md border px-3 py-2 text-sm ${isDark ? "border-amber-900 bg-amber-950/40 text-amber-100" : "border-amber-200 bg-amber-50 text-amber-700"}`, children: highlightNotice })) : null, visibleError ? (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: visibleError })) : null, _jsx(WidgetStack, { widgets: widgetList, isDark: isDark, onLineClick: (line) => highlightEditorLines(line), onClose: (widgetId) => setWidgets((current) => {
+                                                        const next = new Map(current);
+                                                        next.delete(widgetId);
+                                                        return next;
+                                                    }) }), studyNote ? (_jsxs("details", { className: `mb-4 rounded-md border p-3 text-sm ${subtlePanelClass}`, children: [_jsx("summary", { className: "cursor-pointer font-bold", children: "Study note" }), _jsx("pre", { className: "mt-2 max-h-44 overflow-auto whitespace-pre-wrap font-sans text-sm", children: studyNote })] })) : null, tutor.transcript.length === 0 ? (_jsxs("div", { className: "flex h-full min-h-[260px] flex-col items-center justify-center text-center text-sm text-slate-500", children: [isBusy ? (_jsx(Loader2, { className: "mb-3 animate-spin text-[#4b74f2]" })) : (_jsx(Mic, { className: "mb-3 text-[#4b74f2]" })), statusLabel] })) : (_jsx("div", { className: "space-y-4", children: tutor.transcript.map((turn) => (_jsxs("div", { className: `max-w-[92%] rounded-md px-3 py-2 text-sm leading-6 ${turn.speaker === "agent"
+                                                            ? isDark
+                                                                ? "bg-slate-800 text-slate-100"
+                                                                : "bg-slate-50 text-slate-800"
+                                                            : "ml-auto bg-[#4b74f2] text-white"}`, children: [_jsx("div", { className: "mb-1 text-[11px] font-bold uppercase opacity-60", children: turn.speaker === "agent" ? "Tutor" : "You" }), turn.text] }, turn.id))) }))] }), _jsxs("div", { className: `border-t p-4 ${isDark ? "border-slate-800" : "border-[#f1ede6]"}`, children: [_jsxs("div", { className: `flex min-h-[72px] items-center gap-3 rounded-3xl border px-4 py-3 shadow-sm ${subtlePanelClass}`, children: [_jsxs("button", { type: "button", className: `inline-flex h-11 shrink-0 items-center gap-2 rounded-full border px-3 text-sm font-semibold disabled:opacity-50 ${inactiveChipClass}`, disabled: !isConnected, onClick: tutor.toggleMute, title: tutor.state === "muted" ? "Unmute" : "Mute", children: [tutor.state === "muted" ? _jsx(Mic, { size: 18 }) : _jsx(MicOff, { size: 18 }), tutor.state === "muted" ? "Unmute" : "Mute"] }), _jsx("input", { className: "min-w-0 flex-1 bg-transparent text-sm outline-none", value: text, placeholder: "Speak or type a message...", onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+                                                                if (event.key === "Enter")
+                                                                    sendText();
+                                                            }, disabled: !isConnected }), _jsx("button", { type: "button", className: "grid h-12 w-12 shrink-0 place-items-center rounded-full bg-[#bcd0ff] text-white disabled:cursor-not-allowed disabled:opacity-50", title: "Send message", disabled: !isConnected || !text.trim(), onClick: sendText, children: _jsx(Send, { size: 18 }) })] }), _jsxs("button", { type: "button", className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-red-600 px-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50", disabled: !isConnected && !isBusy, onClick: endSession, children: [_jsx(PhoneOff, { size: 16 }), "End Session"] })] })] })] })] }) })) : null] }));
+}
+//# sourceMappingURL=DsaTutorLauncher.js.map