feat: add beta syntax highlighing to terminal

src/ui/desktop/apps/terminal/Terminal.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/constants/terminal-themes";
 import type { TerminalConfig } from "@/types";
 import { useCommandTracker } from "@/ui/hooks/useCommandTracker";
+import { highlightTerminalOutput } from "@/lib/terminal-syntax-highlighter.ts";
 import { useCommandHistory as useCommandHistoryHook } from "@/ui/hooks/useCommandHistory";
 import { useCommandHistory } from "@/ui/desktop/apps/terminal/command-history/CommandHistoryContext.tsx";
 import { CommandAutocomplete } from "./command-history/CommandAutocomplete.tsx";
@@ -662,7 +663,15 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
           const msg = JSON.parse(event.data);
           if (msg.type === "data") {
             if (typeof msg.data === "string") {
-              terminal.write(msg.data);
+              // Apply syntax highlighting if enabled (BETA - defaults to false/off)
+              const syntaxHighlightingEnabled =
+                localStorage.getItem("terminalSyntaxHighlighting") === "true";
+
+              const outputData = syntaxHighlightingEnabled
+                ? highlightTerminalOutput(msg.data)
+                : msg.data;
+
+              terminal.write(outputData);
               // Sudo password prompt detection
               const sudoPasswordPattern =
                 /(?:\[sudo\] password for \S+:|sudo: a password is required)/;
@@ -699,7 +708,16 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
                 }, 15000);
               }
             } else {
-              terminal.write(String(msg.data));
+              // Apply syntax highlighting to non-string data as well (BETA - defaults to false/off)
+              const syntaxHighlightingEnabled =
+                localStorage.getItem("terminalSyntaxHighlighting") === "true";
+
+              const stringData = String(msg.data);
+              const outputData = syntaxHighlightingEnabled
+                ? highlightTerminalOutput(stringData)
+                : stringData;
+
+              terminal.write(outputData);
             }
           } else if (msg.type === "error") {
             const errorMessage = msg.message || t("terminal.unknownError");

src/ui/desktop/user/UserProfile.tsx

@@ -103,6 +103,10 @@ export function UserProfile({
   const [commandAutocomplete, setCommandAutocomplete] = useState<boolean>(
     localStorage.getItem("commandAutocomplete") === "true",
   );
+  const [terminalSyntaxHighlighting, setTerminalSyntaxHighlighting] =
+    useState<boolean>(
+      () => localStorage.getItem("terminalSyntaxHighlighting") === "true",
+    );
   const [defaultSnippetFoldersCollapsed, setDefaultSnippetFoldersCollapsed] =
     useState<boolean>(
       localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
@@ -174,6 +178,12 @@ export function UserProfile({
     localStorage.setItem("commandAutocomplete", enabled.toString());
   };
 
+  const handleTerminalSyntaxHighlightingToggle = (enabled: boolean) => {
+    setTerminalSyntaxHighlighting(enabled);
+    localStorage.setItem("terminalSyntaxHighlighting", enabled.toString());
+    window.dispatchEvent(new Event("terminalSyntaxHighlightingChanged"));
+  };
+
   const handleDefaultSnippetFoldersCollapsedToggle = (enabled: boolean) => {
     setDefaultSnippetFoldersCollapsed(enabled);
     localStorage.setItem("defaultSnippetFoldersCollapsed", enabled.toString());
@@ -485,6 +495,24 @@ export function UserProfile({
                         onCheckedChange={handleCommandAutocompleteToggle}
                       />
                     </div>
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label className="text-gray-300">
+                          Terminal Syntax Highlighting{" "}
+                          <span className="text-xs text-yellow-500 font-semibold">
+                            (BETA)
+                          </span>
+                        </Label>
+                        <p className="text-sm text-gray-400 mt-1">
+                          Automatically highlight commands, paths, IPs, and log
+                          levels in terminal output
+                        </p>
+                      </div>
+                      <Switch
+                        checked={terminalSyntaxHighlighting}
+                        onCheckedChange={handleTerminalSyntaxHighlightingToggle}
+                      />
+                    </div>
                   </div>
                 </div>