From fa29b90af19a0396371ea6d7afee072531b2bcb2 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sun, 30 Nov 2025 22:00:47 +1100
Subject: [PATCH] Use ace editor (readonly) to render current and historical
 shared environments

---
 static/js/mithril/sharedEnvironments.js | 50 +++++++++++++++++++++----
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/static/js/mithril/sharedEnvironments.js b/static/js/mithril/sharedEnvironments.js
index 2aec2ed..7e602f8 100644
--- a/static/js/mithril/sharedEnvironments.js
+++ b/static/js/mithril/sharedEnvironments.js
@@ -339,9 +339,27 @@ const SharedEnvironments = {
                 m("div.flex-1", [
                     m("h3.text-xl.font-semibold.text-gray-900.dark:text-white.mb-1", env.name),
                     env.description ? m("p.text-gray-600.dark:text-gray-400.text-sm.mb-3", env.description) : null,
-                    m("div.bg-gray-50.dark:bg-gray-900.rounded.p-3.font-mono.text-sm.overflow-x-auto",
-                        m("pre.text-gray-800.dark:text-gray-200", JSON.stringify(env.environment, null, 2))
-                    ),
+                    m("div.border.border-gray-300.dark:border-gray-600.rounded.overflow-hidden", {
+                        oncreate: function(vnode) {
+                            const editorId = `env-display-${env.id}`;
+                            const editorDiv = document.createElement('div');
+                            editorDiv.id = editorId;
+                            editorDiv.style.height = '200px';
+                            vnode.dom.appendChild(editorDiv);
+                            
+                            const editor = ace.edit(editorId);
+                            editor.setTheme("ace/theme/github_dark");
+                            editor.session.setMode("ace/mode/json");
+                            editor.setValue(JSON.stringify(env.environment, null, 2), -1);
+                            editor.setReadOnly(true);
+                            editor.setOptions({
+                                fontSize: "13px",
+                                showPrintMargin: false,
+                                highlightActiveLine: false,
+                                highlightGutterLine: false
+                            });
+                        }
+                    }),
                     m("div.mt-3.text-xs.text-gray-500.dark:text-gray-400", [
                         `Created: ${new Date(env.created_at).toLocaleString()}`,
                         env.updated_at && env.updated_at !== env.created_at 
@@ -625,11 +643,27 @@ const SharedEnvironments = {
                                         "Restore"
                                     )
                                 ]),
-                                m("div.bg-gray-100.dark:bg-gray-900.rounded.p-3.font-mono.text-xs.overflow-x-auto",
-                                    m("pre.text-gray-800.dark:text-gray-200", 
-                                        JSON.stringify(version.environment, null, 2)
-                                    )
-                                )
+                                m("div.border.border-gray-300.dark:border-gray-600.rounded.overflow-hidden", {
+                                    oncreate: function(vnode) {
+                                        const editorId = `version-${version.version_number}-${SharedEnvironments.historyModal.envId}`;
+                                        const editorDiv = document.createElement('div');
+                                        editorDiv.id = editorId;
+                                        editorDiv.style.height = '150px';
+                                        vnode.dom.appendChild(editorDiv);
+                                        
+                                        const editor = ace.edit(editorId);
+                                        editor.setTheme("ace/theme/github_dark");
+                                        editor.session.setMode("ace/mode/json");
+                                        editor.setValue(JSON.stringify(version.environment, null, 2), -1);
+                                        editor.setReadOnly(true);
+                                        editor.setOptions({
+                                            fontSize: "12px",
+                                            showPrintMargin: false,
+                                            highlightActiveLine: false,
+                                            highlightGutterLine: false
+                                        });
+                                    }
+                                })
                             ])
                         )
                     )