From 8d67304482967c4d656b22dce2e4fb9b0e87f364 Mon Sep 17 00:00:00 2001
From: slate20 <matt@slatecapit.com>
Date: Sun, 19 Oct 2025 02:34:29 -0500
Subject: [PATCH 1/2] Fix Monaco editor syntax highlighting in Preview block

The Preview block's CodeEditPreview component was not passing file information to Monaco editor, preventing automatic language detection from file extensions.

Changes:
- Add fileName prop to CodeEditor component
- Pass actual file path to Monaco instead of random UUID
- Monaco now auto-detects language from file extension (.js, .py, .ts, etc.)

Fixes syntax highlighting for all text files opened in Preview blocks while maintaining backward compatibility with existing CodeEditor usage.
---
 frontend/app/view/codeeditor/codeeditor.tsx | 5 +++--
 frontend/app/view/preview/preview-edit.tsx  | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/app/view/codeeditor/codeeditor.tsx b/frontend/app/view/codeeditor/codeeditor.tsx
index 3f278a6825..971fb4db4f 100644
--- a/frontend/app/view/codeeditor/codeeditor.tsx
+++ b/frontend/app/view/codeeditor/codeeditor.tsx
@@ -108,11 +108,12 @@ interface CodeEditorProps {
     text: string;
     readonly: boolean;
     language?: string;
+    fileName?: string;
     onChange?: (text: string) => void;
     onMount?: (monacoPtr: MonacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => () => void;
 }
 
-export function CodeEditor({ blockId, text, language, readonly, onChange, onMount }: CodeEditorProps) {
+export function CodeEditor({ blockId, text, language, fileName, readonly, onChange, onMount }: CodeEditorProps) {
     const divRef = useRef<HTMLDivElement>(null);
     const unmountRef = useRef<() => void>(null);
     const minimapEnabled = useOverrideConfigAtom(blockId, "editor:minimapenabled") ?? false;
@@ -120,7 +121,7 @@ export function CodeEditor({ blockId, text, language, readonly, onChange, onMoun
     const wordWrap = useOverrideConfigAtom(blockId, "editor:wordwrap") ?? false;
     const fontSize = boundNumber(useOverrideConfigAtom(blockId, "editor:fontsize"), 6, 64);
     const theme = "wave-theme-dark";
-    const editorPath = useRef(crypto.randomUUID()).current;
+    const editorPath = useRef(fileName ?? crypto.randomUUID()).current;
 
     React.useEffect(() => {
         return () => {
diff --git a/frontend/app/view/preview/preview-edit.tsx b/frontend/app/view/preview/preview-edit.tsx
index f249f7ee7f..10a55d604c 100644
--- a/frontend/app/view/preview/preview-edit.tsx
+++ b/frontend/app/view/preview/preview-edit.tsx
@@ -16,6 +16,7 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
     const fileContent = useAtomValue(model.fileContent);
     const setNewFileContent = useSetAtom(model.newFileContent);
     const fileInfo = useAtomValue(model.statFile);
+    const fileName = fileInfo?.path || fileInfo?.name;
 
     function codeEditKeyDownHandler(e: WaveKeyboardEvent): boolean {
         if (checkKeyPressed(e, "Cmd:e")) {
@@ -65,6 +66,7 @@ function CodeEditPreview({ model }: SpecializedViewProps) {
         <CodeEditor
             blockId={model.blockId}
             text={fileContent}
+            fileName={fileName}
             readonly={fileInfo.readonly}
             onChange={(text) => setNewFileContent(text)}
             onMount={onMount}

From 92184fa8d8fbfb74646ba8aed8416d7b542402a1 Mon Sep 17 00:00:00 2001
From: slate20 <matt@slatecapit.com>
Date: Mon, 20 Oct 2025 11:04:37 -0500
Subject: [PATCH 2/2] Fix terminal background color detection for applications
 like Neovim

Terminal applications like Neovim query the terminal's background colorto determine which color scheme to use for syntax highlighting.

Previously, the background color in the XTerm.js theme was being set to transparent (#00000000), which caused these applications to fail to detect the actual background color.

This fix preserves the actual background color in the XTerm.js theme while maintaining the transparency feature, which is applied via the applyTransparencyToColor() function.

Fixes syntax highlighting in Neovim and other terminal applications that rely on background color detection.
---
 frontend/app/view/term/termutil.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/app/view/term/termutil.ts b/frontend/app/view/term/termutil.ts
index 4874d7903b..785bc8876b 100644
--- a/frontend/app/view/term/termutil.ts
+++ b/frontend/app/view/term/termutil.ts
@@ -29,7 +29,8 @@ function computeTheme(
         }
     }
     let bgcolor = themeCopy.background;
-    themeCopy.background = "#00000000";
+    // Keep the actual background color in the theme so terminal applications
+    // like Neovim can properly detect the background color for syntax highlighting
     return [themeCopy, bgcolor];
 }