feat: add custom language support with preset and grammar-based highlighting

Add a Languages tab to Settings for enabling syntax highlighting for
uncommon languages that Shiki doesn't support by default.

- Add CustomLanguageConfig type to editor types with support for two
  modes: alias (map extensions to an existing Shiki language) and
  custom grammar (paste a TextMate JSON for full proper highlighting)
- Add customLanguages[] to EditorSettingsManager (localStorage)
- Add CustomLanguageManager singleton service that reactively syncs
  settings changes into the Shiki detectLanguage registry, loads
  custom TextMate grammars into the Shiki highlighter on demand
- Simplify FileViewer ensureLanguageLoaded — remove hardcoded whitelist
  and instead try any language ID, falling back to text on error;
  this also enables all Shiki-bundled languages (terraform, nix, etc.)
- Add Languages settings tab with:
  - Preset grid: Terraform/HCL, Protocol Buffers, GraphQL, Nix,
    Solidity, Elixir, Dart, LookML — one-click enable for alias presets
  - Custom language list with edit/delete actions
  - Add/Edit form with mode toggle (alias vs TextMate grammar),
    scopeName input, and JSON textarea with guidance links

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: faiyaz26

frontend/src/App.tsx

@@ -17,6 +17,8 @@ import { terminalPool } from './services/TerminalPool';
 import { agentNotificationService } from './services/AgentNotificationService';
 import { agentStatusManager } from './services/AgentStatusManager';
 import { hookService } from './services/HookService';
+// Eagerly initialize so custom language detection is ready before any file opens
+import './services/CustomLanguageManager';
 
 import { useClipboardFix } from './hooks/useClipboardFix';
 import { useGlobalContextMenuFix } from './hooks/useGlobalContextMenuFix';

frontend/src/components/editor/FileViewer.tsx

@@ -7,6 +7,7 @@ import { getLanguageDisplayName, getShikiLanguage, isMarkdownFile } from './type
 import { themeManager, getShikiTheme, getAllShikiThemes } from '../../services/ThemeManager';
 import { keyboardShortcutManager } from '../../services/KeyboardShortcutManager';
 import { editorStateManager } from '../../services/EditorStateManager';
+import { customLanguageManager } from '../../services/CustomLanguageManager';
 
 // Lazy load MarkdownEditor to avoid circular dependency issues at startup
 const MarkdownEditor = lazy(() => import('./markdown').then(m => ({ default: m.MarkdownEditor })));
@@ -26,28 +27,26 @@ async function getHighlighter(): Promise<Highlighter> {
   return highlighterPromise;
 }
 
-// Ensure a language is loaded
+// Ensure a language is loaded into the Shiki highlighter.
+// Tries to load any language ID — handles built-in Shiki languages, custom TextMate grammars,
+// and falls back to 'text' if the language can't be loaded.
 async function ensureLanguageLoaded(highlighter: Highlighter, lang: string): Promise<string> {
-  const validLangs = [
-    'javascript', 'jsx', 'typescript', 'tsx', 'html', 'css', 'scss', 'sass', 'less',
-    'json', 'yaml', 'xml', 'toml', 'rust', 'python', 'go', 'java', 'c', 'cpp',
-    'csharp', 'ruby', 'php', 'swift', 'kotlin', 'scala', 'shellscript', 'markdown',
-    'sql', 'dockerfile', 'makefile', 'cmake', 'dotenv', 'text'
-  ];
+  // Load any pending custom TextMate grammars first
+  await customLanguageManager.loadGrammarsIntoHighlighter(highlighter);
 
-  const targetLang = validLangs.includes(lang) ? lang : 'text';
-
-  if (!loadedLanguages.has(targetLang) && targetLang !== 'text') {
-    try {
-      await highlighter.loadLanguage(targetLang as BundledLanguage);
-      loadedLanguages.add(targetLang);
-    } catch (e) {
-      console.warn(`Failed to load language: ${targetLang}, falling back to text`);
-      return 'text';
-    }
+  if (lang === 'text' || loadedLanguages.has(lang)) {
+    return lang;
   }
 
-  return targetLang;
+  try {
+    // Works for BundledLanguage IDs and any custom grammar registered via loadLanguage()
+    await highlighter.loadLanguage(lang as BundledLanguage);
+    loadedLanguages.add(lang);
+    return lang;
+  } catch {
+    console.warn(`[FileViewer] Language not available: ${lang}, falling back to text`);
+    return 'text';
+  }
 }
 
 // ============ FOLDING ============

frontend/src/components/editor/types.ts

@@ -1,5 +1,30 @@
 // Editor module types
 
+// User-defined custom language configuration for uncommon syntaxes.
+// Stored in EditorSettings.customLanguages (localStorage).
+export interface CustomLanguageConfig {
+  id: string;           // Stable key: preset IDs start with "preset-", user IDs are UUIDs
+  name: string;         // Display name, e.g. "LookML"
+  extensions: string[]; // File extensions without dot, e.g. ["lkml", "lookml"]
+  aliasFor?: string;    // Use an existing Shiki language (e.g. "terraform"). Mutually exclusive with grammar.
+  scopeName?: string;   // TextMate scope name, required when using grammar (e.g. "source.lookml")
+  grammar?: string;     // TextMate grammar JSON string, for languages Shiki doesn't bundle
+}
+
+// Convert a language display name to a stable Shiki-safe slug for grammar-mode languages
+export function customLangSlug(name: string): string {
+  return 'custom-' + name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+// Internal registry — updated by CustomLanguageManager when settings change.
+// Using a module-level variable avoids threading the list through every call site.
+let _customLangs: CustomLanguageConfig[] = [];
+
+/** Called by CustomLanguageManager whenever the custom language list changes. */
+export function _setCustomLanguages(langs: CustomLanguageConfig[]): void {
+  _customLangs = langs;
+}
+
 export interface OpenFile {
   id: string;
   path: string;
@@ -44,6 +69,13 @@ export interface EditorTab {
 export function detectLanguage(filename: string): string {
   const ext = filename.split('.').pop()?.toLowerCase() || '';
 
+  // Check user-defined custom languages before built-in mappings
+  for (const lang of _customLangs) {
+    if (lang.extensions.includes(ext)) {
+      return lang.aliasFor ?? customLangSlug(lang.name);
+    }
+  }
+
   const languageMap: Record<string, string> = {
     // JavaScript/TypeScript
     'js': 'javascript',
@@ -188,5 +220,5 @@ export function getShikiLanguage(language: string): string {
     'cmake': 'cmake',
   };
 
-  return shikiMap[language] || 'text';
+  return shikiMap[language] || language; // Unknown IDs pass through — Shiki handles them or falls back
 }