From 385ebceb014245d111788d9da61f376ff7571365 Mon Sep 17 00:00:00 2001
From: A69SHUBHAM <spacekrai0@gmail.com>
Date: Fri, 5 Jun 2026 10:25:39 +0530
Subject: [PATCH] feat: add YAML syntax highlighting

Signed-off-by: A69SHUBHAM <spacekrai0@gmail.com>
---
 apps/web/package.json                           |  4 +++-
 .../(dashboard)/jobs/jobs-management.tsx        |  5 ++---
 .../podgroups/podgroup-management.tsx           |  5 ++---
 .../(dashboard)/pods/pod-management.tsx         |  5 ++---
 .../(dashboard)/queues/queue-management.tsx     |  5 ++---
 apps/web/src/components/ui/yaml-viewer.tsx      | 17 +++++++++++++++++
 6 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 apps/web/src/components/ui/yaml-viewer.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 53116336..e27183de 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -28,6 +28,7 @@
     "next": "14.2.18",
     "react": "^18",
     "react-dom": "^18",
+    "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss-animate": "^1.0.7"
@@ -40,6 +41,7 @@
     "eslint-config-next": "14.2.18",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@types/react-syntax-highlighter": "^15.5.13"
   }
 }
diff --git a/apps/web/src/components/(dashboard)/jobs/jobs-management.tsx b/apps/web/src/components/(dashboard)/jobs/jobs-management.tsx
index 57c3911b..64c9f715 100644
--- a/apps/web/src/components/(dashboard)/jobs/jobs-management.tsx
+++ b/apps/web/src/components/(dashboard)/jobs/jobs-management.tsx
@@ -19,6 +19,7 @@ import { DataTable } from "../data-table"
 import { createColumns } from "./columns"
 import { CreateJobDialog } from "./create-job-dialog"
 import { JobEditDialog } from "./job-edit-dialog"
+import { YamlViewer } from "@/components/ui/yaml-viewer"
 
 export type JobStatus = {
   name: string;
@@ -354,9 +355,7 @@ export default function JobsManagement() {
               {/* YAML Configuration */}
               <div>
                 <h3 className="font-semibold mb-2">YAML Configuration</h3>
-                <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm">
-                  <code>{selectedJob.yaml}</code>
-                </pre>
+                <YamlViewer yaml={selectedJob.yaml} />
               </div>
             </div>
           )}
diff --git a/apps/web/src/components/(dashboard)/podgroups/podgroup-management.tsx b/apps/web/src/components/(dashboard)/podgroups/podgroup-management.tsx
index ee1f15c9..ab6417fa 100644
--- a/apps/web/src/components/(dashboard)/podgroups/podgroup-management.tsx
+++ b/apps/web/src/components/(dashboard)/podgroups/podgroup-management.tsx
@@ -27,6 +27,7 @@ import { usePaginationClamp } from "@/hooks/use-pagination-clamp"
 import { ListPagination } from "../list-pagination"
 import { DataTable } from "../data-table"
 import { createColumns } from "./columns"
+import { YamlViewer } from "@/components/ui/yaml-viewer"
 
 export type PodGroupStatus = {
     name: string;
@@ -347,9 +348,7 @@ export default function PodGroupManagement() {
 
                             <div>
                                 <h3 className="font-semibold mb-2">YAML Configuration</h3>
-                                <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm">
-                                    <code>{selectedPodGroup.yaml}</code>
-                                </pre>
+                                <YamlViewer yaml={selectedPodGroup.yaml} />
                             </div>
                         </div>
                     )}
diff --git a/apps/web/src/components/(dashboard)/pods/pod-management.tsx b/apps/web/src/components/(dashboard)/pods/pod-management.tsx
index a8f19ee0..667969bf 100644
--- a/apps/web/src/components/(dashboard)/pods/pod-management.tsx
+++ b/apps/web/src/components/(dashboard)/pods/pod-management.tsx
@@ -21,6 +21,7 @@ import { DataTable } from "../data-table"
 import { createColumns } from "./columns"
 import { CreatePodDialog } from "./pod-create-dialog"
 import { PodEditDialog } from "./pod-edit-dialog"
+import { YamlViewer } from "@/components/ui/yaml-viewer"
 
 
 
@@ -349,9 +350,7 @@ export default function PodManagement() {
 
                             <div>
                                 <h3 className="font-semibold mb-2">YAML Configuration</h3>
-                                <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm">
-                                    <code>{selectedPod.yaml}</code>
-                                </pre>
+                                <YamlViewer yaml={selectedPod.yaml} />
                             </div>
                         </div>
                     )}
diff --git a/apps/web/src/components/(dashboard)/queues/queue-management.tsx b/apps/web/src/components/(dashboard)/queues/queue-management.tsx
index 42c48aab..73c6eecd 100644
--- a/apps/web/src/components/(dashboard)/queues/queue-management.tsx
+++ b/apps/web/src/components/(dashboard)/queues/queue-management.tsx
@@ -21,6 +21,7 @@ import { createColumns } from "./columns"
 import { isProtectedQueue, protectedQueueDeleteMessage } from "@/lib/queue-constants"
 import { CreateQueueDialog } from "./create-queue-dialog"
 import { QueueEditDialog } from "./queue-edit-dialog"
+import { YamlViewer } from "@/components/ui/yaml-viewer"
 
 export type QueueStatus = {
     name: string;
@@ -337,9 +338,7 @@ export default function QueueManagement() {
 
                             <div>
                                 <h3 className="font-semibold mb-2">YAML Configuration</h3>
-                                <pre className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-sm">
-                                    <code>{selectedQueue.yaml}</code>
-                                </pre>
+                                <YamlViewer yaml={selectedQueue.yaml} />
                             </div>
                         </div>
                     )}
diff --git a/apps/web/src/components/ui/yaml-viewer.tsx b/apps/web/src/components/ui/yaml-viewer.tsx
new file mode 100644
index 00000000..d15e6dab
--- /dev/null
+++ b/apps/web/src/components/ui/yaml-viewer.tsx
@@ -0,0 +1,17 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import yamlLang from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+import { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+SyntaxHighlighter.registerLanguage('yaml', yamlLang);
+
+export function YamlViewer({ yaml }: { yaml: string | undefined }) {
+    if (!yaml) return null;
+    
+    return (
+        <div className="rounded-lg overflow-hidden text-sm border border-gray-800">
+            <SyntaxHighlighter language="yaml" style={vs2015} customStyle={{ margin: 0, padding: '1rem', backgroundColor: '#111827' }}>
+                {yaml}
+            </SyntaxHighlighter>
+        </div>
+    );
+}