From 0f10a9638371a12b721e9f4855abb18a04616bed Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Thu, 7 Aug 2025 19:51:47 +0545
Subject: [PATCH] feat(nextjs): Html Editor & Ui Improved in custom layout

---
 servers/fastapi/chroma/chroma.sqlite3         | Bin 4329472 -> 4329472 bytes
 .../components/EachSlide/HtmlEditor.tsx       |  67 +++++------
 .../EachSlide/SlideContentDisplay.tsx         |   6 +-
 .../custom-layout/hooks/useLayoutSaving.ts    |  80 +++++++++----
 .../custom-layout/hooks/useSlideEdit.ts       |  15 +--
 .../custom-layout/hooks/useSlideProcessing.ts |   3 +-
 .../custom-layout/page.tsx                    |   3 +-
 .../outline/components/OutlineContent.tsx     |   2 +-
 servers/nextjs/app/globals.css                |  93 +++++++++++++++
 servers/nextjs/package-lock.json              | 109 +++++++++++-------
 servers/nextjs/package.json                   |   3 +
 servers/nextjs/tsconfig.json                  |   2 +-
 12 files changed, 263 insertions(+), 120 deletions(-)

diff --git a/servers/fastapi/chroma/chroma.sqlite3 b/servers/fastapi/chroma/chroma.sqlite3
index c17e9fed3143bafaeff9a8f9da60f891d30e0f90..caf17128c88c5d5fa27c48669d37bb255ee1261c 100644
GIT binary patch
delta 316
zcmWm9J5s`66oAo$2mu7Ie*lq(K|}!`5R``^VsP9DOUVocmbe27H{ejP1X?zb872*l
zjg5^BAH`X~@#Y^P53_=<K8x?V`W}BdmMOj_|MDll@*`Ub#9ye*O2UR|Xt7D)P6Jm*
z2nG%iMg%6Jh#`(cB#^`r1jkUYkU|<6oFI!+<d8=JMV!G#3Fj!|0u@~13RTol$2D$n
li#s&Xgo76D@qjiu=%R;5JfV+g4Df;>Ua`NAmVx_buXlX7h&liO

delta 308
zcmWm9IdVa99KdnU9udDMu@e$Yh}if2F}aANyctE5as!167=>FHM=<|JlSZRS<E!`_
z;A5_rRuikZrvE0sHGMnZRCT8)i~P$~F7hX5Q9J+XAPZ&uC_{r4HrU~S6E3*%01qDF
z#S?rG=<wqiF9;xr5W<KciWuTZ;1x-v@P>D!kwF$Yd?1ekK2gLMN+_d(Dr%^sfhJmL
Yqk}Gb=wpB(Mi^s)`+d4s#w>Zf0qMnuIsgCw

diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
index 7ee780cb..6b04f1a1 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/HtmlEditor.tsx
@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Save, X, Eye, Code } from "lucide-react";
+import { Save, X, Code } from "lucide-react";
 import { ProcessedSlide } from "../../types";
+import Editor from 'react-simple-code-editor';
+import { highlight, languages } from 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-jsx';
 
 interface HtmlEditorProps {
   slide: ProcessedSlide;
@@ -19,7 +24,6 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
   onCancel,
 }) => {
   const [htmlContent, setHtmlContent] = useState(slide.html || "");
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
 
   useEffect(() => {
     setHtmlContent(slide.html || "");
@@ -45,15 +49,7 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
             <span className="text-purple-800">HTML Editor</span>
           </div>
           <div className="flex gap-2">
-            <Button
-              variant={isPreviewMode ? "default" : "outline"}
-              size="sm"
-              onClick={() => setIsPreviewMode(!isPreviewMode)}
-              className="flex items-center gap-1"
-            >
-              <Eye size={14} />
-              {isPreviewMode ? "Code" : "Preview"}
-            </Button>
+        
             <Button
               variant="outline"
               size="sm"
@@ -73,30 +69,29 @@ export const HtmlEditor: React.FC<HtmlEditorProps> = ({
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
-        {isPreviewMode ? (
-          <div className="border rounded-lg p-4 bg-white">
-            <div
-              className="prose max-w-none"
-              dangerouslySetInnerHTML={{ __html: htmlContent }}
-            />
-          </div>
-        ) : (
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700">
-              Edit HTML Content:
-            </label>
-            <Textarea
-              defaultValue={htmlContent}
-              onBlur={(e) => setHtmlContent(e.target.value)}
-              className="font-mono text-sm h-96 resize-none"
-              placeholder="Enter HTML content here..."
-            />
-            <div className="text-xs text-gray-500">
-              Tip: You can edit the HTML directly. Make sure to maintain proper HTML structure.
-            </div>
-          </div>
-        )}
+      <CardContent className="space-y-4 ">
+          <div
+      dangerouslySetInnerHTML={{
+        __html: htmlContent,
+      }}
+    />
+    <p className="text-base text-gray-800">Edit the HTML code to customize the slide layout.</p>
+         {/* Render code editor */}
+         <div className="container__content_area">
+
+          <Editor
+      value={htmlContent}
+      onValueChange={htmlContent => setHtmlContent(htmlContent)}
+      highlight={htmlContent => highlight(htmlContent, languages.jsx!,'jsx')}
+      padding={10}
+      id="html-editor"
+      name="html-editor"
+      
+      className="container__editor"
+      />
+      </div>
+     
+    
       </CardContent>
     </Card>
   );
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
index 12e04fdb..b934058c 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/components/EachSlide/SlideContentDisplay.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import SlideContent from "../SlideContent";
 import { SlideContentDisplayProps } from "../../types";
+import { Repeat2 } from "lucide-react";
 
 export const SlideContentDisplay: React.FC<SlideContentDisplayProps> = ({
   slide,
@@ -103,7 +104,10 @@ export const SlideContentDisplay: React.FC<SlideContentDisplayProps> = ({
             slide.error
           )}
         </div>
-        <button onClick={() => retrySlide(slide.slide_number)}>Retry</button>
+        <div className="flex justify-center">
+
+        <button className="bg-red-50 flex gap-2  items-center  rounded border border-red-200 px-4 py-2 " onClick={() => retrySlide(slide.slide_number)}><Repeat2 className="w-4 h-4" />Retry</button>
+        </div>
       </div>
     );
   }
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useLayoutSaving.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useLayoutSaving.ts
index 4b53554c..c58528e8 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useLayoutSaving.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useLayoutSaving.ts
@@ -20,6 +20,56 @@ export const useLayoutSaving = (
     setIsModalOpen(false);
   }, []);
 
+  const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+  const convertSlideToReact = async (slide: ProcessedSlide, presentationId: string, FontUrls: string[]) => {
+    const maxRetries = 3;
+    let retryCount = 0;
+
+    while (retryCount < maxRetries) {
+      try {
+        const response = await fetch("/api/v1/ppt/html-to-react/", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            html: slide.html,
+          }),
+        });
+
+        const data = await ApiResponseHandler.handleResponse(
+          response,
+          `Failed to convert slide ${slide.slide_number} to React`
+        );
+
+        return {
+          presentation_id: presentationId,
+          layout_id: `${slide.slide_number}`,
+          layout_name: `Slide${slide.slide_number}`,
+          layout_code: data.react_component || data.component_code,
+          fonts: FontUrls,
+        };
+      } catch (error) {
+        retryCount++;
+        console.error(`Error converting slide ${slide.slide_number} (attempt ${retryCount}):`, error);
+        
+        if (retryCount < maxRetries) {
+          toast.error(`Failed to convert slide ${slide.slide_number}. Retrying in 2 minutes...`, {
+            description: `Attempt ${retryCount}/${maxRetries}. Error: ${error instanceof Error ? error.message : "An unexpected error occurred"}`,
+          });
+          
+          // Wait for 2 minutes before retrying
+          await delay(2 * 60 * 1000);
+          
+          toast.info(`Retrying conversion for slide ${slide.slide_number}...`);
+        } else {
+          throw new Error(`Failed to convert slide ${slide.slide_number} after ${maxRetries} attempts: ${error instanceof Error ? error.message : "An unexpected error occurred"}`);
+        }
+      }
+    }
+  };
+
   const saveLayout = useCallback(async (layoutName: string, description: string) => {
     if (!slides.length) {
       toast.error("No slides to save");
@@ -46,41 +96,23 @@ export const useLayoutSaving = (
         }
 
         try {
-          const response = await fetch("/api/v1/ppt/html-to-react/", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              html: slide.html,
-            }),
-          });
-
-          const data = await ApiResponseHandler.handleResponse(
-            response,
-            `Failed to convert slide ${slide.slide_number} to React`
-          );
-
-          reactComponents.push({
-            presentation_id: presentationId,
-            layout_id: `${slide.slide_number}`,
-            layout_name: `Slide${slide.slide_number}`,
-            layout_code: data.react_component || data.component_code,
-            fonts: FontUrls,
-          });
+          const reactComponent = await convertSlideToReact(slide, presentationId, FontUrls);
+          reactComponents.push(reactComponent);
 
           // Update progress
-          toast.info(
+          toast.success(
             `Converted slide ${slide.slide_number} to React component`
           );
         } catch (error) {
           console.error(`Error converting slide ${slide.slide_number}:`, error);
-          toast.error(`Failed to convert slide ${slide.slide_number}`, {
+          toast.error(`Failed to convert slide ${slide.slide_number} after all retries`, {
             description:
               error instanceof Error
                 ? error.message
                 : "An unexpected error occurred",
           });
+          // Continue with other slides even if one fails
+          continue;
         }
       }
 
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
index 54c38b97..8465f38a 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideEdit.ts
@@ -173,20 +173,7 @@ export const useSlideEdit = (
         processing: false,
         error: undefined,
       };
-      // download screenshot
-      const screenshot = slideOnly.toDataURL("image/png");
-      const link = document.createElement("a");
-      link.href = screenshot;
-      link.download = `slide-${slide.slide_number}-current.png`;
-      link.click();
-      // second screenshot
-      if (sketchImageBlob && slideWithCanvas) {
-        const screenshot2 = slideWithCanvas.toDataURL("image/png");
-        const link2 = document.createElement("a");
-        link2.href = screenshot2;
-        link2.download = `slide-${slide.slide_number}-sketch.png`;
-        link2.click();
-      }
+     
 
       if (onSlideUpdate) {
         onSlideUpdate(updatedSlideData);
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
index e40a5e59..4a677a68 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/hooks/useSlideProcessing.ts
@@ -7,7 +7,7 @@ export const useSlideProcessing = (
   selectedFile: File | null,
   slides: ProcessedSlide[],
   setSlides: React.Dispatch<React.SetStateAction<ProcessedSlide[]>>,
-  fontsData: FontData | null,
+  
   setFontsData: React.Dispatch<React.SetStateAction<FontData | null>>
 ) => {
   const [isProcessingPptx, setIsProcessingPptx] = useState(false);
@@ -44,7 +44,6 @@ export const useSlideProcessing = (
         );
 
         console.log(`Successfully processed slide ${slide.slide_number}`);
-
         // Update slide with success
         setSlides((prev) => {
           const newSlides = prev.map((s, i) =>
diff --git a/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx b/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
index 14ba84f7..377175dc 100644
--- a/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
+++ b/servers/nextjs/app/(presentation-generator)/custom-layout/page.tsx
@@ -17,6 +17,7 @@ import { SaveLayoutButton } from "./components/SaveLayoutButton";
 import { SaveLayoutModal } from "./components/SaveLayoutModal";
 import EachSlide from "./components/EachSlide/NewEachSlide";
 
+
 const CustomLayoutPage = () => {
   const { refetch } = useLayout();
   
@@ -29,7 +30,6 @@ const CustomLayoutPage = () => {
     selectedFile,
     slides,
     setSlides,
-    fontsData,
     setFontsData
   );
   const { isSavingLayout, isModalOpen, openSaveModal, closeSaveModal, saveLayout } = useLayoutSaving(
@@ -81,6 +81,7 @@ const CustomLayoutPage = () => {
             interactive HTML layouts
           </p>
         </div>
+       
 
         {/* File Upload Section */}
         <FileUploadSection
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
index 0748a6a3..a305da91 100644
--- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineContent.tsx
@@ -110,7 +110,7 @@ const OutlineContent: React.FC<OutlineContentProps> = ({
             )}
 
             {/* Empty state */}
-            {!isLoading && outlines && outlines.length === 0 && (
+            {!isStreaming && !isLoading && outlines && outlines.length === 0 && (
                 <div className="text-center py-12 bg-white rounded-lg border-2 border-dashed border-gray-200">
                     <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                     <p className="text-gray-600 mb-4">No outlines available</p>
diff --git a/servers/nextjs/app/globals.css b/servers/nextjs/app/globals.css
index 74878978..4f8e4ba1 100644
--- a/servers/nextjs/app/globals.css
+++ b/servers/nextjs/app/globals.css
@@ -424,4 +424,97 @@ thead {
   float: left;
   height: 0;
   pointer-events: none;
+}
+
+/* code editor */
+.container_editor_area {
+  tab-size: 4ch;
+  max-height: 400px;
+  overflow: auto;
+  margin: 1.67em 0;
+}
+
+.container__content {
+  width: 440px;
+  max-width: 100%;
+  padding: 10px;
+  text-align: center;
+}
+
+.container__content_area {
+  tab-size: 4ch;
+  max-height: 400px;
+  overflow: auto;
+  margin: 1.67em 0;
+}
+
+.container__editor {
+ 
+  font-variant-ligatures: common-ligatures;
+  background-color: #fafafa;
+  border-radius: 3px;
+}
+
+.container__editor textarea {
+  outline: 0;
+}
+/* Syntax highlighting */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #90a4ae;
+}
+.token.punctuation {
+  color: #9e9e9e;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #e91e63;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #4caf50;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #795548;
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #3f51b5;
+}
+.token.function {
+  color: #f44336;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #ff9800;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
 }
\ No newline at end of file
diff --git a/servers/nextjs/package-lock.json b/servers/nextjs/package-lock.json
index 654ff521..a4cfdac8 100644
--- a/servers/nextjs/package-lock.json
+++ b/servers/nextjs/package-lock.json
@@ -45,12 +45,14 @@
         "lucide-react": "^0.447.0",
         "marked": "^15.0.11",
         "mermaid": "^11.9.0",
-        "next": "15.4.3",
+        "next": "15.4.5",
         "next-themes": "^0.4.6",
+        "prismjs": "^1.30.0",
         "puppeteer": "^24.13.0",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-redux": "^9.1.2",
+        "react-simple-code-editor": "^0.14.1",
         "recharts": "^2.15.4",
         "sharp": "^0.34.3",
         "sonner": "^2.0.6",
@@ -63,6 +65,7 @@
       "devDependencies": {
         "@types/babel__standalone": "^7.1.9",
         "@types/node": "^20",
+        "@types/prismjs": "^1.26.5",
         "@types/puppeteer": "^5.4.7",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1422,15 +1425,15 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.3.tgz",
-      "integrity": "sha512-lKJ9KJAvaWzqurIsz6NWdQOLj96mdhuDMusLSYHw9HBe2On7BjUwU1WeRvq19x7NrEK3iOgMeSBV5qEhVH1cMw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.5.tgz",
+      "integrity": "sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ==",
       "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.4.3.tgz",
-      "integrity": "sha512-YAhZWKeEYY7LHQJiQ8fe3Y6ymfcDcTn7rDC8PDu/pdeIl1Z2LHD4uyPNuQUGCEQT//MSNv6oZCeQzZfTCKZv+A==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.4.5.tgz",
+      "integrity": "sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA==",
       "cpu": [
         "arm64"
       ],
@@ -1444,9 +1447,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.4.3.tgz",
-      "integrity": "sha512-ZPHRdd51xaxCMpT4viQ6h8TgYM1zPW1JIeksPY9wKlyvBVUQqrWqw8kEh1sa7/x0Ied+U7pYHkAkutrUwxbMcg==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.4.5.tgz",
+      "integrity": "sha512-CL6mfGsKuFSyQjx36p2ftwMNSb8PQog8y0HO/ONLdQqDql7x3aJb/wB+LA651r4we2pp/Ck+qoRVUeZZEvSurA==",
       "cpu": [
         "x64"
       ],
@@ -1460,9 +1463,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.4.3.tgz",
-      "integrity": "sha512-QUdqftCXC5vw5cowucqi9FeOPQ0vdMxoOHLY0J5jPdercwSJFjdi9CkEO4Xkq1eG4t1TB/BG81n6rmTsWoILnw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.4.5.tgz",
+      "integrity": "sha512-1hTVd9n6jpM/thnDc5kYHD1OjjWYpUJrJxY4DlEacT7L5SEOXIifIdTye6SQNNn8JDZrcN+n8AWOmeJ8u3KlvQ==",
       "cpu": [
         "arm64"
       ],
@@ -1476,9 +1479,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.4.3.tgz",
-      "integrity": "sha512-HTL31NsmoafX+r5g91Yj3+q34nrn1xKmCWVuNA+fUWO4X0pr+n83uGzLyEOn0kUqbMZ40KmWx+4wsbMoUChkiQ==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.4.5.tgz",
+      "integrity": "sha512-4W+D/nw3RpIwGrqpFi7greZ0hjrCaioGErI7XHgkcTeWdZd146NNu1s4HnaHonLeNTguKnL2Urqvj28UJj6Gqw==",
       "cpu": [
         "arm64"
       ],
@@ -1492,9 +1495,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.4.3.tgz",
-      "integrity": "sha512-HRQLWoeFkKXd2YCEEy9GhfwOijRm37x4w5r0MMVHxBKSA6ms3JoPUXvGhfHT6srnGRcEUWNrQ2vzkHir5ZWTSw==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.4.5.tgz",
+      "integrity": "sha512-N6Mgdxe/Cn2K1yMHge6pclffkxzbSGOydXVKYOjYqQXZYjLCfN/CuFkaYDeDHY2VBwSHyM2fUjYBiQCIlxIKDA==",
       "cpu": [
         "x64"
       ],
@@ -1508,9 +1511,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.4.3.tgz",
-      "integrity": "sha512-NyXUx6G7AayaRGUsVPenuwhyAoyxjQuQPaK50AXoaAHPwRuif4WmSrXUs8/Y0HJIZh8E/YXRm9H7uuGfiacpuQ==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.4.5.tgz",
+      "integrity": "sha512-YZ3bNDrS8v5KiqgWE0xZQgtXgCTUacgFtnEgI4ccotAASwSvcMPDLua7BWLuTfucoRv6mPidXkITJLd8IdJplQ==",
       "cpu": [
         "x64"
       ],
@@ -1524,9 +1527,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.4.3.tgz",
-      "integrity": "sha512-2CUTmpzN/7cL1a7GjdLkDFlfH3nwMwW8a6JiaAUsL9MtKmNNO3fnXqnY0Zk30fii3hVEl4dr7ztrpYt0t2CcGQ==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.4.5.tgz",
+      "integrity": "sha512-9Wr4t9GkZmMNcTVvSloFtjzbH4vtT4a8+UHqDoVnxA5QyfWe6c5flTH1BIWPGNWSUlofc8dVJAE7j84FQgskvQ==",
       "cpu": [
         "arm64"
       ],
@@ -1540,9 +1543,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.4.3.tgz",
-      "integrity": "sha512-i54YgUhvrUQxQD84SjAbkfWhYkOdm/DNRAVekCHLWxVg3aUbyC6NFQn9TwgCkX5QAS2pXCJo3kFboSFvrsd7dA==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.4.5.tgz",
+      "integrity": "sha512-voWk7XtGvlsP+w8VBz7lqp8Y+dYw/MTI4KeS0gTVtfdhdJ5QwhXLmNrndFOin/MDoCvUaLWMkYKATaCoUkt2/A==",
       "cpu": [
         "x64"
       ],
@@ -3599,6 +3602,13 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/puppeteer": {
       "version": "5.4.7",
       "resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.7.tgz",
@@ -7133,12 +7143,12 @@
       }
     },
     "node_modules/next": {
-      "version": "15.4.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.4.3.tgz",
-      "integrity": "sha512-uW7Qe6poVasNIE1X382nI29oxSdFJzjQzTgJFLD43MxyPfGKKxCMySllhBpvqr48f58Om+tLMivzRwBpXEytvA==",
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.4.5.tgz",
+      "integrity": "sha512-nJ4v+IO9CPmbmcvsPebIoX3Q+S7f6Fu08/dEWu0Ttfa+wVwQRh9epcmsyCPjmL2b8MxC+CkBR97jgDhUUztI3g==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.4.3",
+        "@next/env": "15.4.5",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -7151,14 +7161,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.4.3",
-        "@next/swc-darwin-x64": "15.4.3",
-        "@next/swc-linux-arm64-gnu": "15.4.3",
-        "@next/swc-linux-arm64-musl": "15.4.3",
-        "@next/swc-linux-x64-gnu": "15.4.3",
-        "@next/swc-linux-x64-musl": "15.4.3",
-        "@next/swc-win32-arm64-msvc": "15.4.3",
-        "@next/swc-win32-x64-msvc": "15.4.3",
+        "@next/swc-darwin-arm64": "15.4.5",
+        "@next/swc-darwin-x64": "15.4.5",
+        "@next/swc-linux-arm64-gnu": "15.4.5",
+        "@next/swc-linux-arm64-musl": "15.4.5",
+        "@next/swc-linux-x64-gnu": "15.4.5",
+        "@next/swc-linux-x64-musl": "15.4.5",
+        "@next/swc-win32-arm64-msvc": "15.4.5",
+        "@next/swc-win32-x64-msvc": "15.4.5",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {
@@ -7634,6 +7644,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8115,6 +8134,16 @@
         }
       }
     },
+    "node_modules/react-simple-code-editor": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz",
+      "integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-smooth": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
diff --git a/servers/nextjs/package.json b/servers/nextjs/package.json
index ee11580c..7db96e39 100644
--- a/servers/nextjs/package.json
+++ b/servers/nextjs/package.json
@@ -49,10 +49,12 @@
     "mermaid": "^11.9.0",
     "next": "15.4.5",
     "next-themes": "^0.4.6",
+    "prismjs": "^1.30.0",
     "puppeteer": "^24.13.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-redux": "^9.1.2",
+    "react-simple-code-editor": "^0.14.1",
     "recharts": "^2.15.4",
     "sharp": "^0.34.3",
     "sonner": "^2.0.6",
@@ -65,6 +67,7 @@
   "devDependencies": {
     "@types/babel__standalone": "^7.1.9",
     "@types/node": "^20",
+    "@types/prismjs": "^1.26.5",
     "@types/puppeteer": "^5.4.7",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/servers/nextjs/tsconfig.json b/servers/nextjs/tsconfig.json
index 3869efd6..a78d442e 100644
--- a/servers/nextjs/tsconfig.json
+++ b/servers/nextjs/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-   "target": "ES2017",
+   "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,