@sampleapp.ai/sdk 1.0.28 → 1.0.30

package/dist/components/guardian/right-view/right-top-down-view.js

@@ -0,0 +1,289 @@
+"use client";
+import React from "react";
+import Browser from "../ide/browser";
+import { Component as AiLoader } from "../ui/ai-loader";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import SimplifiedEditor from "./simplified-editor";
+import PillFileSelector from "./pill-file-selector";
+import { useGuardianContext } from "../context/guardian-context";
+import { useEffect, useMemo, useState } from "react";
+import { zipPathToFileTree } from "../zip-to-filetree";
+import { zipPathToCodebase } from "../zip-to-codebase";
+import { DownloadIcon, Globe, Code2 } from "lucide-react";
+import { useFrameParams } from "../hooks/use-frame-params";
+import { cn } from "../../../lib/utils";
+export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, themeColor, completeCodeZipFile, hasPreview, isPreviewMinimized = false, isGuardian = false, isBrowserMaximized = false, }) {
+    const { setFileTree, setGeneratedCode } = useGuardianContext();
+    const frameParams = useFrameParams();
+    const [activeTab, setActiveTab] = useState("code");
+    const [networkRequests, setNetworkRequests] = useState([]);
+    // Use frame param override for theme if in frame mode
+    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
+    const normalizedZipDownloadPath = useMemo(() => {
+        let normalizedPath = completeCodeZipFile;
+        if (normalizedPath.startsWith("/public/")) {
+            normalizedPath = normalizedPath.slice("/public".length);
+        }
+        if (!normalizedPath.startsWith("/")) {
+            normalizedPath = "/" + normalizedPath;
+        }
+        return normalizedPath;
+    }, [completeCodeZipFile]);
+    // Extract only the nested children (actual API calls to external services)
+    const childrenRequests = useMemo(() => {
+        const children = [];
+        for (const request of networkRequests) {
+            if (request.children && request.children.length > 0) {
+                children.push(...request.children);
+            }
+        }
+        return children;
+    }, [networkRequests]);
+    useEffect(() => {
+        let isMounted = true;
+        zipPathToFileTree(completeCodeZipFile)
+            .then((fileTree) => {
+            if (isMounted) {
+                setFileTree(fileTree);
+            }
+        })
+            .catch((error) => {
+            console.error("Failed to load zip file:", error);
+        });
+        zipPathToCodebase(codeZipFile)
+            .then((codebase) => {
+            if (isMounted) {
+                setGeneratedCode(codebase);
+            }
+        })
+            .catch((error) => {
+            console.error("Failed to load codebase:", error);
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [codeZipFile, completeCodeZipFile, setFileTree, setGeneratedCode]);
+    // Listen for network requests from iframe
+    useEffect(() => {
+        const handleMessage = (event) => {
+            if (event.origin.endsWith("sampleapp.love")) {
+                // Handle network requests
+                if (event.data.type === "NETWORK_REQUEST") {
+                    const request = event.data.request;
+                    setNetworkRequests((prev) => [...prev, request]);
+                }
+                // Handle runtime errors
+                if (event.data.type === "CONTAINER_APP_ERROR") {
+                    console.error("Container app error:", event.data);
+                }
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+    // When browser is maximized, render only the browser at full size
+    if (isBrowserMaximized) {
+        return (React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+            React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+            overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
+                React.createElement("div", { className: "text-center" },
+                    React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
+                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
+            overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
+                React.createElement("div", { className: "text-center" },
+                    React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
+                    React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
+                    React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
+                        React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" })))))))))));
+    }
+    return (React.createElement("div", { className: "h-full w-full flex flex-col" },
+        React.createElement(PanelGroup, { direction: "vertical", className: "relative h-full" },
+            hasPreview && !isPreviewMinimized && (React.createElement(React.Fragment, null,
+                React.createElement(Panel, { defaultSize: 58, minSize: 20, maxSize: 80, order: 1 },
+                    React.createElement("div", { className: "h-full w-full" }, !browserUrl ? (React.createElement("div", { className: "h-full w-full relative overflow-hidden" },
+                        React.createElement(AiLoader, { text: "Booting up...", fullScreen: false }))) : (React.createElement(Browser, { previewUrl: browserUrl, setPreviewUrl: () => { }, containerEndpoint: browserUrl, outerContainerClassName: "h-full w-full border-none", reloadSignal: reloadCounter, useVm: useVm, isGuardian: isGuardian }, overlayStage !== "hidden" && (React.createElement("div", { className: "absolute inset-0 z-20 flex items-center justify-center" },
+                        overlayStage === "error" && (React.createElement("div", { className: "w-full h-full bg-red-950 text-red-200 flex items-center justify-center" },
+                            React.createElement("div", { className: "text-center" },
+                                React.createElement("div", { className: "text-2xl font-semibold" }, "Service Unavailable"),
+                                React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Elevated error rates detected. Initiating rollback...")))),
+                        overlayStage === "rebuilding" && (React.createElement("div", { className: "w-full h-full bg-amber-900 text-amber-100 flex items-center justify-center" },
+                            React.createElement("div", { className: "text-center" },
+                                React.createElement("div", { className: "text-2xl font-semibold" }, "Rebuilding preview\u2026"),
+                                React.createElement("div", { className: "text-sm mt-2 opacity-80" }, "Applying safe configuration"),
+                                React.createElement("div", { className: "mt-4 inline-flex items-center gap-2" },
+                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse" }),
+                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:150ms]" }),
+                                    React.createElement("span", { className: "h-2 w-2 rounded-full bg-amber-300 animate-pulse [animation-delay:300ms]" }))))))))))),
+                React.createElement(PanelResizeHandle, { className: "h-2 relative group flex-shrink-0" },
+                    React.createElement("div", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 transition-colors flex justify-center items-center bg-transparent" },
+                        React.createElement("div", { className: "absolute inset-x-0 top-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
+                        React.createElement("div", { className: "absolute inset-x-0 bottom-0 h-1/2 group-hover:bg-blue-400/20 transition-colors" }),
+                        React.createElement("div", { className: "h-full w-px bg-border group-hover:bg-blue-400 transition-colors relative z-10" }))))),
+            React.createElement(Panel, { defaultSize: 42, minSize: 20, maxSize: 80, order: 2 },
+                React.createElement("div", { className: "h-full w-full flex flex-col" },
+                    React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950 flex-shrink-0" },
+                        React.createElement("div", { className: "flex" },
+                            React.createElement("button", { type: "button", onClick: () => setActiveTab("code"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "code"
+                                    ? "border-current text-white"
+                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "code"
+                                    ? {
+                                        borderColor: effectiveThemeColor,
+                                        color: effectiveThemeColor,
+                                    }
+                                    : undefined },
+                                React.createElement(Code2, { className: "w-3.5 h-3.5" }),
+                                "Code"),
+                            React.createElement("button", { type: "button", onClick: () => setActiveTab("network"), className: cn("flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors border-b-2", activeTab === "network"
+                                    ? "border-current text-white"
+                                    : "border-transparent text-zinc-500 hover:text-zinc-300"), style: activeTab === "network"
+                                    ? {
+                                        borderColor: effectiveThemeColor,
+                                        color: effectiveThemeColor,
+                                    }
+                                    : undefined },
+                                React.createElement(Globe, { className: "w-3.5 h-3.5" }),
+                                "Network",
+                                childrenRequests.length > 0 && (React.createElement("span", { className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-zinc-700 text-zinc-300" }, childrenRequests.length)))),
+                        activeTab === "network" && childrenRequests.length > 0 && (React.createElement("button", { type: "button", className: "px-2 text-[10px] font-medium text-zinc-500 hover:text-zinc-300 transition-colors", onClick: () => setNetworkRequests([]) }, "Clear"))),
+                    React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" }, activeTab === "code" ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
+                            React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
+                            React.createElement("div", { className: "px-2 flex-shrink-0" },
+                                React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: () => {
+                                        window.open(normalizedZipDownloadPath, "_blank");
+                                    } },
+                                    React.createElement(DownloadIcon, { className: "w-4 h-4" }),
+                                    "Download Code"))),
+                        React.createElement("div", { className: "flex-1 min-h-0" },
+                            React.createElement(SimplifiedEditor, { themeColor: effectiveThemeColor })))) : (React.createElement(NetworkRequestsView, { requests: childrenRequests, themeColor: effectiveThemeColor }))))))));
+}
+// Simple Network Requests View Component
+function NetworkRequestsView({ requests, themeColor, }) {
+    var _a, _b, _c, _d;
+    const [selectedRequest, setSelectedRequest] = useState(null);
+    const getMethodColor = (method) => {
+        switch (method.toUpperCase()) {
+            case "GET":
+                return "text-emerald-400";
+            case "POST":
+                return "text-blue-400";
+            case "PUT":
+                return "text-amber-400";
+            case "PATCH":
+                return "text-orange-400";
+            case "DELETE":
+                return "text-red-400";
+            default:
+                return "text-zinc-400";
+        }
+    };
+    const getStatusColor = (status) => {
+        if (!status)
+            return "text-zinc-500";
+        if (status >= 200 && status < 300)
+            return "text-emerald-400";
+        if (status >= 300 && status < 400)
+            return "text-blue-400";
+        if (status >= 400 && status < 500)
+            return "text-amber-400";
+        return "text-red-400";
+    };
+    const formatDuration = (duration) => {
+        if (!duration)
+            return "—";
+        if (duration < 1000)
+            return `${duration}ms`;
+        return `${(duration / 1000).toFixed(2)}s`;
+    };
+    const formatUrl = (url) => {
+        try {
+            const urlObj = new URL(url);
+            return urlObj.pathname + urlObj.search;
+        }
+        catch (_a) {
+            return url;
+        }
+    };
+    const formatBody = (body) => {
+        // Handle string bodies (common from server-side tracking)
+        if (typeof body === "string") {
+            // Handle potentially double-encoded JSON strings
+            let current = body;
+            let iterations = 0;
+            const maxIterations = 3; // Prevent infinite loops
+            while (typeof current === "string" && iterations < maxIterations) {
+                try {
+                    const parsed = JSON.parse(current);
+                    current = parsed;
+                    iterations++;
+                }
+                catch (_a) {
+                    // Not valid JSON, break out
+                    break;
+                }
+            }
+            // If we successfully parsed to a non-string, format it
+            if (typeof current !== "string") {
+                try {
+                    return JSON.stringify(current, null, 2);
+                }
+                catch (_b) {
+                    return String(current);
+                }
+            }
+            // Return the string as-is
+            return current;
+        }
+        // Handle object/array bodies
+        if (body !== null && body !== undefined) {
+            try {
+                return JSON.stringify(body, null, 2);
+            }
+            catch (_c) {
+                return String(body);
+            }
+        }
+        return String(body);
+    };
+    if (requests.length === 0) {
+        return (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-950" },
+            React.createElement("div", { className: "text-center text-zinc-500" },
+                React.createElement(Globe, { className: "w-8 h-8 mx-auto mb-2 opacity-50" }),
+                React.createElement("p", { className: "text-sm" }, "No network requests yet"),
+                React.createElement("p", { className: "text-xs mt-1 opacity-70" }, "Requests will appear here as they happen"))));
+    }
+    return (React.createElement("div", { className: "h-full w-full flex bg-zinc-950" },
+        React.createElement("div", { className: cn("flex-1 overflow-auto border-r border-zinc-800", selectedRequest ? "w-1/2" : "w-full") },
+            React.createElement("div", { className: "divide-y divide-zinc-800/50" }, requests.map((request, index) => {
+                var _a, _b, _c, _d;
+                return (React.createElement("button", { key: request.id || index, type: "button", onClick: () => setSelectedRequest((selectedRequest === null || selectedRequest === void 0 ? void 0 : selectedRequest.id) === request.id ? null : request), className: cn("w-full text-left px-3 py-2 hover:bg-zinc-900 transition-colors", (selectedRequest === null || selectedRequest === void 0 ? void 0 : selectedRequest.id) === request.id && "bg-zinc-900") },
+                    React.createElement("div", { className: "flex items-center gap-2 text-xs" },
+                        React.createElement("span", { className: cn("font-mono font-semibold w-12", getMethodColor(request.method)) }, request.method),
+                        React.createElement("span", { className: cn("font-mono w-10 text-center", getStatusColor((_a = request.responseStatus) !== null && _a !== void 0 ? _a : request.status)) }, (_c = (_b = request.responseStatus) !== null && _b !== void 0 ? _b : request.status) !== null && _c !== void 0 ? _c : "..."),
+                        React.createElement("span", { className: "flex-1 font-mono text-zinc-300 truncate" }, formatUrl(request.url)),
+                        React.createElement("span", { className: "text-zinc-500 font-mono text-[10px]" }, formatDuration((_d = request.duration) !== null && _d !== void 0 ? _d : request.ms)))));
+            }))),
+        selectedRequest && (React.createElement("div", { className: "w-1/2 overflow-auto" },
+            React.createElement("div", { className: "p-3 space-y-3" },
+                React.createElement("div", null,
+                    React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide mb-1", style: { color: themeColor } }, "Request"),
+                    React.createElement("div", { className: "bg-zinc-900 rounded p-2 text-xs font-mono" },
+                        React.createElement("div", { className: "flex items-center gap-2 mb-2" },
+                            React.createElement("span", { className: getMethodColor(selectedRequest.method) }, selectedRequest.method),
+                            React.createElement("span", { className: "text-zinc-300 break-all" }, selectedRequest.url)),
+                        selectedRequest.requestBody !== undefined &&
+                            selectedRequest.requestBody !== null && (React.createElement("pre", { className: "text-[10px] text-zinc-400 overflow-x-auto overflow-y-auto max-h-32 mt-2 pt-2 border-t border-zinc-800 whitespace-pre-wrap break-words" }, formatBody(selectedRequest.requestBody))))),
+                React.createElement("div", null,
+                    React.createElement("div", { className: "text-[10px] font-semibold uppercase tracking-wide mb-1", style: { color: themeColor } }, "Response"),
+                    React.createElement("div", { className: "bg-zinc-900 rounded p-2 text-xs font-mono" },
+                        React.createElement("div", { className: "flex items-center gap-3 mb-2" },
+                            React.createElement("span", { className: getStatusColor((_a = selectedRequest.responseStatus) !== null && _a !== void 0 ? _a : selectedRequest.status) }, (_c = (_b = selectedRequest.responseStatus) !== null && _b !== void 0 ? _b : selectedRequest.status) !== null && _c !== void 0 ? _c : "Pending"),
+                            React.createElement("span", { className: "text-zinc-500" }, formatDuration((_d = selectedRequest.duration) !== null && _d !== void 0 ? _d : selectedRequest.ms))),
+                        selectedRequest.responseBody !== undefined &&
+                            selectedRequest.responseBody !== null && (React.createElement("pre", { className: "text-[10px] text-zinc-400 overflow-x-auto overflow-y-auto max-h-48 mt-2 pt-2 border-t border-zinc-800 whitespace-pre-wrap break-words" }, formatBody(selectedRequest.responseBody))),
+                        selectedRequest.error && (React.createElement("div", { className: "text-red-400 mt-2 pt-2 border-t border-zinc-800" }, selectedRequest.error)))))))));
+}

package/dist/components/guardian/right-view/right-view.js

@@ -0,0 +1,28 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import RightPanelView from "./right-panel-view";
+import RightTopDownView from "./right-top-down-view";
+import PreviewControlBar from "./preview-control-bar";
+export default function RightView({ reloadCounter, overlayStage, browserUrl, useVm, codeZipFile, completeCodeZipFile, variant = "top-down", themeColor, hasPreview, isGuardian = false, isBrowserMaximized = false, }) {
+    const [isPreviewMinimized, setIsPreviewMinimized] = useState(false);
+    const [reloadCounterState, setReloadCounterState] = useState(reloadCounter);
+    // Sync with external reloadCounter changes
+    useEffect(() => {
+        setReloadCounterState(reloadCounter);
+    }, [reloadCounter]);
+    const handleRefresh = () => {
+        setReloadCounterState((c) => c + 1);
+    };
+    if (variant === "panel") {
+        return (React.createElement(RightPanelView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile }));
+    }
+    else if (variant === "top-down") {
+        return (React.createElement("div", { className: "h-full w-full flex flex-col" },
+            hasPreview && (React.createElement(PreviewControlBar, { isMinimized: isPreviewMinimized, onToggle: () => setIsPreviewMinimized(!isPreviewMinimized), onRefresh: handleRefresh, themeColor: themeColor, externalUrl: browserUrl })),
+            React.createElement("div", { className: "flex-1 min-h-0" },
+                React.createElement(RightTopDownView, { reloadCounter: reloadCounterState, overlayStage: overlayStage, browserUrl: browserUrl, useVm: useVm, codeZipFile: codeZipFile, themeColor: themeColor, completeCodeZipFile: completeCodeZipFile, hasPreview: hasPreview, isPreviewMinimized: isPreviewMinimized, isGuardian: isGuardian, isBrowserMaximized: isBrowserMaximized }))));
+    }
+    else {
+        return null;
+    }
+}

package/dist/components/guardian/right-view/simplified-editor.js

@@ -0,0 +1,234 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import MonacoEditor from "@monaco-editor/react";
+import { useGuardianContext } from "../context/guardian-context";
+import { CodeLanguage } from "../types/ide-types";
+// import {useTheme} from "next-themes"; // Removed - not available in SDK
+import { useFrameParams } from "../hooks/use-frame-params";
+// Convert a hex color (e.g. "#3b82f6") to an rgba string with the given alpha.
+const hexToRgba = (hex, alpha) => {
+    const normalized = hex.replace("#", "");
+    const bigint = parseInt(normalized.length === 3
+        ? normalized
+            .split("")
+            .map((c) => c + c)
+            .join("")
+        : normalized, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+export default function SimplifiedEditor({ themeColor }) {
+    const { code, language, activeFileName: fileName, isGeneratingCode: isGenerating, activeLineNumber: contextActiveLineNumber, setActiveLineNumber, activeLineRange: contextActiveLineRange, } = useGuardianContext();
+    // Use dark theme by default (next-themes not available in SDK)
+    const theme = "dark";
+    // Read frame params - these override context when isFrame=true
+    const frameParams = useFrameParams();
+    // Use frame param overrides when in frame mode
+    const effectiveThemeColor = frameParams.isFrame && frameParams.theme ? frameParams.theme : themeColor;
+    // Override line range if frame params specify them
+    const activeLineNumber = frameParams.isFrame && frameParams.linesStart
+        ? frameParams.linesStart
+        : contextActiveLineNumber;
+    const activeLineRange = frameParams.isFrame && frameParams.linesStart && frameParams.linesEnd
+        ? { start: frameParams.linesStart, end: frameParams.linesEnd }
+        : frameParams.isFrame && frameParams.linesStart
+            ? { start: frameParams.linesStart, end: frameParams.linesStart }
+            : contextActiveLineRange;
+    // Add ref for the editor
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const editorRef = useRef(null);
+    // Store current decorations to clear them
+    const currentDecorationsRef = useRef([]);
+    // Define editor themes based on current system theme
+    const editorTheme = theme === "dark" ? "vs-dark" : "vs-light";
+    // Shared theme configuration
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const configureEditorTheme = (monaco) => {
+        monaco.editor.defineTheme("custom-dark", {
+            base: "vs-dark",
+            inherit: true,
+            rules: [
+                // Custom syntax highlighting rules for dark mode
+                { token: "comment", foreground: "6A9955", fontStyle: "italic" },
+                { token: "keyword", foreground: "C586C0", fontStyle: "bold" },
+                { token: "string", foreground: "CE9178" },
+                { token: "number", foreground: "B5CEA8" },
+            ],
+            colors: {
+                // Custom UI colors for dark mode
+                "editor.background": "#000000",
+                "editor.foreground": "#D4D4D4",
+                "editorCursor.foreground": "#AEAFAD",
+                "editor.lineHighlightBackground": "#18181b",
+                "editorLineNumber.foreground": "#858585",
+                "editor.selectionBackground": "#264F78",
+                "editor.inactiveSelectionBackground": "#3A3D41",
+            },
+        });
+        // Apply the theme
+        monaco.editor.setTheme(theme === "dark" ? "custom-dark" : "vs-light");
+    };
+    // Configure Monaco editor on mount
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleEditorDidMount = (editor, monaco) => {
+        editorRef.current = editor;
+        configureEditorTheme(monaco);
+    };
+    // Helper function to clear all decorations
+    const clearAllDecorations = () => {
+        if (currentDecorationsRef.current.length > 0) {
+            if (editorRef.current) {
+                editorRef.current.deltaDecorations(currentDecorationsRef.current, []);
+            }
+            currentDecorationsRef.current = [];
+        }
+    };
+    // Effect to handle line navigation when activeLineNumber or activeLineRange changes
+    useEffect(() => {
+        // Always clear all existing decorations first
+        clearAllDecorations();
+        // Determine which line(s) to highlight
+        let startLine;
+        let endLine;
+        if (activeLineRange) {
+            startLine = activeLineRange.start;
+            endLine = activeLineRange.end;
+        }
+        else if (activeLineNumber) {
+            startLine = activeLineNumber;
+            endLine = activeLineNumber;
+        }
+        // Only add new decorations if we have a line to highlight
+        if (!startLine || !editorRef.current)
+            return;
+        const model = editorRef.current.getModel();
+        if (!model)
+            return;
+        const totalLines = model.getLineCount();
+        // Validate line numbers
+        if (startLine < 1 || startLine > totalLines) {
+            console.warn(`Invalid start line number ${startLine}. File has ${totalLines} lines.`);
+            setActiveLineNumber === null || setActiveLineNumber === void 0 ? void 0 : setActiveLineNumber(undefined);
+            return;
+        }
+        // If endLine is not provided, use startLine (single line)
+        // If endLine is provided, validate it
+        if (endLine === undefined) {
+            endLine = startLine;
+        }
+        else if (endLine < 1 || endLine > totalLines) {
+            // If endLine is invalid, default to startLine
+            endLine = startLine;
+        }
+        // Ensure startLine <= endLine
+        if (startLine > endLine) {
+            [startLine, endLine] = [endLine, startLine];
+        }
+        // Center the entire highlighted range in the editor viewport
+        editorRef.current.revealRangeInCenter({
+            startLineNumber: startLine,
+            startColumn: 1,
+            endLineNumber: endLine,
+            endColumn: model.getLineMaxColumn(endLine),
+        });
+        editorRef.current.setPosition({
+            lineNumber: startLine,
+            column: 1,
+        });
+        // Create decorations for all lines: highlight active range, mute others
+        const decorations = [];
+        for (let line = 1; line <= totalLines; line++) {
+            const maxColumn = model.getLineMaxColumn(line);
+            const isInHighlightRange = line >= startLine && line <= endLine;
+            if (isInHighlightRange) {
+                // Active lines: blue background highlight
+                decorations.push({
+                    range: {
+                        startLineNumber: line,
+                        startColumn: 1,
+                        endLineNumber: line,
+                        endColumn: maxColumn,
+                    },
+                    options: {
+                        isWholeLine: true,
+                        className: "search-highlight-line",
+                        glyphMarginClassName: "search-highlight-glyph",
+                    },
+                });
+            }
+            else {
+                // All other lines: muted text
+                decorations.push({
+                    range: {
+                        startLineNumber: line,
+                        startColumn: 1,
+                        endLineNumber: line,
+                        endColumn: maxColumn,
+                    },
+                    options: {
+                        inlineClassName: "muted-code-text",
+                    },
+                });
+            }
+        }
+        // Add new decorations
+        const newDecorations = editorRef.current.deltaDecorations([], decorations);
+        // Store the new decorations
+        currentDecorationsRef.current = newDecorations;
+    }, [activeLineNumber, activeLineRange, setActiveLineNumber]);
+    // Update the theme when it changes
+    useEffect(() => {
+        const monaco = window.monaco;
+        if (monaco) {
+            monaco.editor.setTheme(theme === "dark" ? "custom-dark" : "vs-light");
+        }
+    }, [theme]);
+    const highlightBackground = hexToRgba(effectiveThemeColor, 0.2);
+    const glyphBackground = hexToRgba(effectiveThemeColor, 0.3);
+    return (React.createElement("div", { className: "flex-1 flex flex-col min-h-0 h-full" },
+        React.createElement("div", { className: "flex-1 min-h-0 relative" },
+            React.createElement(MonacoEditor, { height: "100%", language: language
+                    ? language === CodeLanguage.TYPESCRIPT ||
+                        language === "tsx"
+                        ? "javascript"
+                        : language
+                    : CodeLanguage.TEXT, value: code, path: fileName, theme: editorTheme, onMount: handleEditorDidMount, options: Object.assign(Object.assign({ minimap: { enabled: false }, fontSize: 13, lineNumbers: "on", formatOnPaste: true, formatOnType: true, stickyScroll: {
+                        enabled: false,
+                    }, scrollBeyondLastLine: false, wordWrap: "on", wordWrapColumn: 120, wrappingIndent: "indent", wrappingStrategy: "advanced", automaticLayout: true, scrollbar: {
+                        vertical: "auto",
+                        horizontal: "hidden",
+                        verticalScrollbarSize: 8,
+                        horizontalScrollbarSize: 0,
+                    }, lineNumbersMinChars: 4, padding: { top: 6 } }, (theme === "dark" && {
+                    renderLineHighlight: "all",
+                    renderIndentGuides: true,
+                    colorDecorators: true,
+                })), { domReadOnly: isGenerating, readOnly: isGenerating }) })),
+        React.createElement("style", null, `
+        :global(.search-highlight-line) {
+          background-color: ${highlightBackground} !important;
+        }
+        :global(.search-highlight-glyph) {
+          background-color: ${glyphBackground};
+        }
+        :global(.muted-code-text) {
+          opacity: 0.5;
+          filter: grayscale(0.4);
+        }
+        /* Remove blue focus outline from Monaco Editor */
+        :global(.monaco-editor .inputarea.ime-input) {
+          outline: none !important;
+        }
+        :global(.monaco-editor) {
+          outline: none !important;
+        }
+        :global(.monaco-editor .monaco-editor-background) {
+          outline: none !important;
+        }
+        :global(.monaco-editor .view-overlays) {
+          outline: none !important;
+        }
+      `)));
+}