@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/sessrumnir/src/renderer/src/components/chat-project-picker.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clsx } from 'clsx'
+import { Check, ChevronDown, FolderOpen, Layers } from 'lucide-react'
+import { useAppStore } from '../store'
+import type { Workspace } from '../../../shared/ipc-contracts'
+import { workspaceNameFromFolderPath } from '../../../shared/folder-drop'
+import { pathsEqual } from '../../../shared/path-compare'
+
+/**
+ * Compact project picker for the empty-chat center prompt.
+ * Defaults to the active workspace; supports No project → home directory.
+ */
+export function ChatProjectPicker(): React.JSX.Element {
+  const { t } = useTranslation()
+  const workspaces = useAppStore((s) => s.workspaces)
+  const activeWorkspace = useAppStore((s) => s.activeWorkspace)
+  const activateWorkspace = useAppStore((s) => s.activateWorkspace)
+  const createWorkspace = useAppStore((s) => s.createWorkspace)
+  const startPi = useAppStore((s) => s.startPi)
+
+  const sorted = useMemo(
+    () => [...workspaces].sort((a, b) => b.lastActiveAt - a.lastActiveAt),
+    [workspaces]
+  )
+
+  // null = no project (home dir); string = workspace id
+  const [selectedId, setSelectedId] = useState<string | null>(
+    () => activeWorkspace?.id ?? sorted[0]?.id ?? null
+  )
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [homePath, setHomePath] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    void window.piDesktop.system.getPath('home').then((p) => {
+      if (!cancelled) setHomePath(p)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (selectedId === null) return
+    if (workspaces.some((w) => w.id === selectedId)) return
+    setSelectedId(activeWorkspace?.id ?? sorted[0]?.id ?? null)
+  }, [activeWorkspace?.id, selectedId, sorted, workspaces])
+
+  useEffect(() => {
+    if (!pickerOpen) return
+    const onDoc = (e: MouseEvent): void => {
+      if (pickerRef.current && !pickerRef.current.contains(e.target as Node)) {
+        setPickerOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', onDoc)
+    return () => document.removeEventListener('mousedown', onDoc)
+  }, [pickerOpen])
+
+  const selected: Workspace | null =
+    selectedId === null ? null : (workspaces.find((w) => w.id === selectedId) ?? null)
+
+  const ensureHomeWorkspace = async (): Promise<Workspace | null> => {
+    const home = homePath ?? (await window.piDesktop.system.getPath('home'))
+    if (!homePath) setHomePath(home)
+    const existing = useAppStore.getState().workspaces.find((w) => pathsEqual(w.path, home))
+    if (existing) return existing
+    await createWorkspace('Home', home)
+    return useAppStore.getState().workspaces.find((w) => pathsEqual(w.path, home)) ?? null
+  }
+
+  const applySelection = async (id: string | null): Promise<void> => {
+    const previousId = selectedId
+    setSelectedId(id)
+    setPickerOpen(false)
+    setBusy(true)
+    try {
+      if (id) {
+        if (!(await activateWorkspace(id))) {
+          setSelectedId(previousId)
+        }
+      } else {
+        const homeWs = await ensureHomeWorkspace()
+        if (homeWs) {
+          if (!(await activateWorkspace(homeWs.id))) {
+            setSelectedId(previousId)
+          }
+        } else {
+          await startPi()
+        }
+      }
+    } catch {
+      setSelectedId(previousId)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const openFolder = async (): Promise<void> => {
+    const path = await window.piDesktop.system.openDialog({ title: t('dialogs.openFolder.title') })
+    if (!path) return
+    setBusy(true)
+    try {
+      let ws = useAppStore.getState().workspaces.find((w) => pathsEqual(w.path, path))
+      if (!ws) {
+        await createWorkspace(workspaceNameFromFolderPath(path), path)
+        ws = useAppStore.getState().workspaces.find((w) => pathsEqual(w.path, path))
+      }
+      if (ws) await applySelection(ws.id)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div
+      ref={pickerRef}
+      className={clsx('relative mt-1.5 flex justify-start px-1.5', busy && 'pointer-events-none opacity-60')}
+    >
+      <button
+        type="button"
+        onClick={() => setPickerOpen((o) => !o)}
+        disabled={busy}
+        className="flex max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-secondary hover:bg-highlight-strong transition-colors disabled:opacity-50"
+        title={selected?.path ?? homePath ?? t('chat.projectPicker.noProjectHomeDirectory')}
+      >
+        {selected ? (
+          <Layers size={14} className="shrink-0" style={{ color: selected.color }} />
+        ) : (
+          <Layers size={14} className="shrink-0 text-faint" />
+        )}
+        <span className={clsx('min-w-0 truncate font-medium', selected ? 'text-primary' : 'text-dim')}>
+          {selected?.name ?? t('chat.projectPicker.noProject')}
+        </span>
+        <ChevronDown
+          size={12}
+          className={clsx('shrink-0 text-dim transition-transform', pickerOpen && 'rotate-180')}
+        />
+      </button>
+
+      {pickerOpen && (
+        <div className="absolute left-1.5 top-full z-30 mt-1 max-h-64 w-72 overflow-y-auto rounded-lg border border-border-strong bg-surface py-1 shadow-xl shadow-black/40">
+          <button
+            type="button"
+            onClick={() => void applySelection(null)}
+            className={clsx(
+              'flex w-full items-center gap-2 px-3 py-2 text-left text-xs hover:bg-surface-hover transition-colors',
+              selectedId === null && 'bg-card'
+            )}
+          >
+            <Layers size={13} className="shrink-0 text-faint" />
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-sm text-primary">{t('chat.projectPicker.noProject')}</div>
+              <div className="truncate text-[11px] text-faint">{homePath ?? t('chat.projectPicker.yourHomeDirectory')}</div>
+            </div>
+            {selectedId === null && <Check size={12} className="shrink-0 text-success" />}
+          </button>
+          {sorted.length > 0 && <div className="my-1 border-t border-border" />}
+          {sorted.map((ws) => (
+            <button
+              key={ws.id}
+              type="button"
+              onClick={() => void applySelection(ws.id)}
+              className={clsx(
+                'flex w-full items-center gap-2 px-3 py-2 text-left text-xs hover:bg-surface-hover transition-colors',
+                ws.id === selected?.id && 'bg-card'
+              )}
+            >
+              <Layers size={13} className="shrink-0" style={{ color: ws.color }} />
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm text-primary">{ws.name}</div>
+                <div className="truncate text-[11px] text-faint">{ws.path}</div>
+              </div>
+              {ws.id === selected?.id && <Check size={12} className="shrink-0 text-success" />}
+            </button>
+          ))}
+          <div className="my-1 border-t border-border" />
+          <button
+            type="button"
+            onClick={() => void openFolder()}
+            className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-secondary hover:bg-surface-hover transition-colors"
+          >
+            <FolderOpen size={13} className="shrink-0 text-muted" />
+            {t('chat.projectPicker.openFolder')}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/chat-search.tsx

@@ -0,0 +1,251 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppStore } from '../store'
+import { ChevronUp, ChevronDown, X } from 'lucide-react'
+
+// Named CSS custom highlights, styled via the ::highlight() rules injected by
+// ensureHighlightStyles() below.
+const HIGHLIGHT_ALL = 'pi-search'
+const HIGHLIGHT_CURRENT = 'pi-search-current'
+
+// These rules are injected at runtime via a plain <style> element rather than
+// living in index.css: Tailwind's Lightning CSS transformer doesn't recognize
+// the ::highlight() pseudo-element and — depending on lightningcss version —
+// drops the rule at build time (it warns, and newer versions strip it), which
+// would leave search matches with no visible highlight in the built app.
+// Injecting the <style> bypasses that pipeline entirely.
+const HIGHLIGHT_STYLE_ID = 'pi-search-highlight-styles'
+const HIGHLIGHT_CSS = `
+::highlight(${HIGHLIGHT_ALL}) {
+  background-color: rgba(250, 204, 21, 0.28);
+}
+::highlight(${HIGHLIGHT_CURRENT}) {
+  background-color: rgba(250, 204, 21, 0.85);
+  color: #1a1a1a;
+}
+`
+
+// Idempotently add the highlight rules to <head> (keyed by id).
+function ensureHighlightStyles(): void {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(HIGHLIGHT_STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = HIGHLIGHT_STYLE_ID
+  style.textContent = HIGHLIGHT_CSS
+  document.head.appendChild(style)
+}
+
+// Feature-detect the CSS Custom Highlight API (Chromium 105+, always present in
+// our Electron; guarded so a missing API degrades to "no highlight" rather than
+// throwing).
+function highlightsSupported(): boolean {
+  return typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined'
+}
+
+/**
+ * In-conversation find bar. Highlights every case-insensitive match of the query
+ * across the chat transcript using the CSS Custom Highlight API (no DOM mutation,
+ * so it works over rendered markdown) and lets the user step through matches.
+ *
+ * `containerRef` is the scrollable messages element to search within.
+ */
+export function ChatSearch({
+  containerRef,
+  focusNonce,
+  onClose,
+}: {
+  containerRef: React.RefObject<HTMLDivElement | null>
+  focusNonce: number
+  onClose: () => void
+}): React.JSX.Element {
+  const { t } = useTranslation()
+  const [query, setQuery] = useState('')
+  const [count, setCount] = useState(0)
+  const [current, setCurrent] = useState(0) // 0-based; displayed as current + 1
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const rangesRef = useRef<Range[]>([])
+  const currentRef = useRef(0)
+  const prevQuery = useRef('')
+
+  // Recompute when the transcript changes while the bar is open.
+  const messages = useAppStore((state) => state.messages)
+
+  const clearHighlights = useCallback(() => {
+    if (!highlightsSupported()) return
+    CSS.highlights.delete(HIGHLIGHT_ALL)
+    CSS.highlights.delete(HIGHLIGHT_CURRENT)
+  }, [])
+
+  // Build ranges for all matches within the container's text nodes. Matches are
+  // confined to a single text node (won't span inline element boundaries) — fine
+  // for reading-position search.
+  const computeRanges = useCallback(
+    (q: string): Range[] => {
+      const root = containerRef.current
+      if (!root || !q) return []
+      const needle = q.toLowerCase()
+      const ranges: Range[] = []
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode: (node) =>
+          node.nodeValue && node.nodeValue.trim()
+            ? NodeFilter.FILTER_ACCEPT
+            : NodeFilter.FILTER_REJECT,
+      })
+      let node = walker.nextNode()
+      while (node) {
+        const hay = (node.nodeValue ?? '').toLowerCase()
+        let idx = hay.indexOf(needle)
+        while (idx !== -1) {
+          const range = document.createRange()
+          range.setStart(node, idx)
+          range.setEnd(node, idx + needle.length)
+          ranges.push(range)
+          idx = hay.indexOf(needle, idx + needle.length)
+        }
+        node = walker.nextNode()
+      }
+      return ranges
+    },
+    [containerRef]
+  )
+
+  const applyHighlights = useCallback(
+    (ranges: Range[], index: number) => {
+      if (!highlightsSupported()) return
+      if (ranges.length === 0) {
+        clearHighlights()
+        return
+      }
+      CSS.highlights.set(HIGHLIGHT_ALL, new Highlight(...ranges))
+      const cur = ranges[index]
+      if (cur) CSS.highlights.set(HIGHLIGHT_CURRENT, new Highlight(cur))
+      else CSS.highlights.delete(HIGHLIGHT_CURRENT)
+    },
+    [clearHighlights]
+  )
+
+  const scrollIntoView = useCallback(
+    (ranges: Range[], index: number) => {
+      const root = containerRef.current
+      const range = ranges[index]
+      if (!root || !range) return
+      const r = range.getBoundingClientRect()
+      const c = root.getBoundingClientRect()
+      // Only scroll if the match is outside the visible band; then center it.
+      if (r.top < c.top || r.bottom > c.bottom) {
+        root.scrollTop += r.top - c.top - root.clientHeight / 2 + r.height / 2
+      }
+    },
+    [containerRef]
+  )
+
+  // Recompute matches when the query or the transcript changes. Scroll to the
+  // first match only when the query itself changed — a transcript update (e.g. a
+  // new streamed message) refreshes highlights without yanking the view.
+  useEffect(() => {
+    const queryChanged = prevQuery.current !== query
+    prevQuery.current = query
+
+    const ranges = computeRanges(query)
+    rangesRef.current = ranges
+    const idx =
+      ranges.length === 0 ? 0 : queryChanged ? 0 : Math.min(currentRef.current, ranges.length - 1)
+    currentRef.current = idx
+    setCount(ranges.length)
+    setCurrent(idx)
+    applyHighlights(ranges, idx)
+    if (queryChanged && ranges.length > 0) scrollIntoView(ranges, idx)
+  }, [query, messages, computeRanges, applyHighlights, scrollIntoView])
+
+  // Inject the ::highlight() rules once (see note by HIGHLIGHT_CSS).
+  useEffect(() => {
+    ensureHighlightStyles()
+  }, [])
+
+  // Focus (and select) on open and whenever Ctrl+F is pressed again.
+  useEffect(() => {
+    inputRef.current?.focus()
+    inputRef.current?.select()
+  }, [focusNonce])
+
+  // Drop highlights when the bar unmounts.
+  useEffect(() => clearHighlights, [clearHighlights])
+
+  const go = useCallback(
+    (delta: number) => {
+      const ranges = rangesRef.current
+      if (ranges.length === 0) return
+      const next = (currentRef.current + delta + ranges.length) % ranges.length
+      currentRef.current = next
+      setCurrent(next)
+      applyHighlights(ranges, next)
+      scrollIntoView(ranges, next)
+    },
+    [applyHighlights, scrollIntoView]
+  )
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      onClose()
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      go(e.shiftKey ? -1 : 1)
+    }
+  }
+
+  return (
+    <div className="absolute right-4 top-3 z-20 flex items-center gap-1 rounded-lg border border-border bg-surface px-2 py-2 shadow-lg shadow-black/30">
+      <input
+        ref={inputRef}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={t('chat.search.placeholder')}
+        className="w-48 bg-transparent px-1 py-0.5 text-base text-primary outline-none placeholder:text-faint"
+      />
+      <span className="min-w-[3rem] shrink-0 text-center text-xs tabular-nums text-dim">
+        {query === '' ? '' : `${count === 0 ? 0 : current + 1}/${count}`}
+      </span>
+      <SearchIconButton
+        icon={<ChevronUp size={14} />}
+        onClick={() => go(-1)}
+        title={t('chat.search.previousMatch')}
+        disabled={count === 0}
+      />
+      <SearchIconButton
+        icon={<ChevronDown size={14} />}
+        onClick={() => go(1)}
+        title={t('chat.search.nextMatch')}
+        disabled={count === 0}
+      />
+      <SearchIconButton icon={<X size={14} />} onClick={onClose} title={t('chat.search.closeWithShortcut')} />
+    </div>
+  )
+}
+
+function SearchIconButton({
+  icon,
+  onClick,
+  title,
+  disabled,
+}: {
+  icon: React.ReactNode
+  onClick: () => void
+  title: string
+  disabled?: boolean
+}): React.JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      disabled={disabled}
+      className="rounded p-1 text-muted transition-colors hover:bg-surface-hover hover:text-primary disabled:cursor-default disabled:opacity-30 disabled:hover:bg-transparent"
+    >
+      {icon}
+    </button>
+  )
+}

package/apps/sessrumnir/src/renderer/src/components/code-editor-highlight.ts

@@ -0,0 +1,85 @@
+import { HighlightStyle } from '@codemirror/language'
+import { tags as t } from '@lezer/highlight'
+
+/**
+ * Comprehensive HighlightStyle whose token colors are CSS variables.
+ * Each app theme (Dark, Light, Nord, Gruvbox) defines these variables in
+ * index.css so the editor automatically restyles when the theme changes.
+ */
+export const themedHighlightStyle = HighlightStyle.define([
+  // Keywords, modifiers, atoms
+  { tag: t.keyword, color: 'var(--cm-keyword)' },
+  { tag: [t.modifier, t.operatorKeyword, t.controlKeyword, t.definitionKeyword], color: 'var(--cm-keyword)' },
+  { tag: [t.atom, t.bool, t.null], color: 'var(--cm-constant)' },
+
+  // Strings and string-like
+  { tag: [t.string, t.special(t.string), t.docString], color: 'var(--cm-string)' },
+  { tag: [t.regexp, t.escape], color: 'var(--cm-string)' },
+  { tag: t.character, color: 'var(--cm-string)' },
+
+  // Comments
+  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: 'var(--cm-comment)', fontStyle: 'italic' },
+
+  // Names: functions, types, classes, properties, variables
+  { tag: [t.function(t.variableName), t.function(t.propertyName), t.labelName], color: 'var(--cm-function)' },
+  { tag: [t.typeName, t.className], color: 'var(--cm-type)' },
+  { tag: [t.propertyName, t.attributeName], color: 'var(--cm-property)' },
+  { tag: [t.variableName, t.definition(t.variableName)], color: 'var(--cm-variable)' },
+  { tag: [t.macroName, t.special(t.variableName)], color: 'var(--cm-keyword)' },
+  { tag: [t.namespace, t.self], color: 'var(--cm-type)' },
+
+  // Numbers, units, colors
+  { tag: [t.number, t.integer, t.float], color: 'var(--cm-number)' },
+  { tag: [t.color, t.unit], color: 'var(--cm-number)' },
+
+  // Operators and punctuation
+  { tag: [t.operator, t.derefOperator, t.arithmeticOperator, t.logicOperator, t.bitwiseOperator, t.compareOperator, t.updateOperator], color: 'var(--cm-operator)' },
+  { tag: [t.punctuation, t.separator, t.bracket, t.brace, t.paren, t.squareBracket, t.angleBracket], color: 'var(--cm-operator)' },
+
+  // Tags and markup
+  { tag: t.tagName, color: 'var(--cm-tag)' },
+  { tag: t.attributeValue, color: 'var(--cm-string)' },
+
+  // Constants and definitions
+  { tag: [t.constant(t.name), t.standard(t.name)], color: 'var(--cm-constant)' },
+  { tag: t.definition(t.name), color: 'var(--cm-function)' },
+
+  // Markdown
+  { tag: t.heading, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading1, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading2, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading3, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading4, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading5, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.heading6, color: 'var(--cm-heading)', fontWeight: 'bold' },
+  { tag: t.list, color: 'var(--cm-list)' },
+  { tag: t.quote, color: 'var(--cm-quote)', fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strikethrough, textDecoration: 'line-through' },
+  { tag: t.link, color: 'var(--cm-link)', textDecoration: 'underline' },
+  { tag: t.url, color: 'var(--cm-link)', textDecoration: 'underline' },
+  { tag: t.monospace, color: 'var(--cm-property)' },
+
+  // Diff / change tracking
+  { tag: t.inserted, color: 'var(--cm-string)' },
+  { tag: t.deleted, color: 'var(--cm-invalid)' },
+  { tag: t.changed, color: 'var(--cm-number)' },
+
+  // Meta and invalid
+  { tag: [t.meta, t.annotation], color: 'var(--cm-meta)' },
+  { tag: t.invalid, color: 'var(--cm-invalid)' },
+
+  // Markdown structural marks (`#`, `-`, `*`, link/emphasis delimiters).
+  // Lang-markdown emits these as t.processingInstruction. Use the heading
+  // color so `##` matches the heading text it precedes (visually unified,
+  // like VS Code's Markdown rendering) and list/emphasis marks pop instead
+  // of blending into the background.
+  { tag: t.processingInstruction, color: 'var(--cm-mark)' },
+
+  // Markdown thematic break (`---`, `***`, `___`) — tagged as
+  // t.contentSeparator. Use the same mark color so horizontal rules are
+  // clearly visible (default would render them in a dark fallback color
+  // that barely shows up against any of our themed backgrounds).
+  { tag: t.contentSeparator, color: 'var(--cm-mark)' },
+])

package/apps/sessrumnir/src/renderer/src/components/code-editor-language.test.ts

@@ -0,0 +1,19 @@
+import assert from 'node:assert/strict'
+import { getCodeEditorLanguageName } from './code-editor-language'
+
+assert.equal(getCodeEditorLanguageName('src/app.tsx'), 'typescript')
+assert.equal(getCodeEditorLanguageName('src/app.jsx'), 'javascript')
+assert.equal(getCodeEditorLanguageName('package.json'), 'json')
+assert.equal(getCodeEditorLanguageName('README.md'), 'markdown')
+assert.equal(getCodeEditorLanguageName('index.html'), 'html')
+assert.equal(getCodeEditorLanguageName('styles.scss'), 'css')
+assert.equal(getCodeEditorLanguageName('script.py'), 'python')
+assert.equal(getCodeEditorLanguageName('main.rs'), 'rust')
+assert.equal(getCodeEditorLanguageName('server.go'), 'go')
+assert.equal(getCodeEditorLanguageName('Main.java'), 'java')
+assert.equal(getCodeEditorLanguageName('index.php'), 'php')
+assert.equal(getCodeEditorLanguageName('layout.xml'), 'xml')
+assert.equal(getCodeEditorLanguageName('query.sql'), 'sql')
+assert.equal(getCodeEditorLanguageName('compose.yaml'), 'yaml')
+assert.equal(getCodeEditorLanguageName('native.cpp'), 'cpp')
+assert.equal(getCodeEditorLanguageName('unknown.xyz'), 'plain text')

package/apps/sessrumnir/src/renderer/src/components/code-editor-language.ts

@@ -0,0 +1,88 @@
+import { cpp } from '@codemirror/lang-cpp'
+import { css } from '@codemirror/lang-css'
+import { go } from '@codemirror/lang-go'
+import { html } from '@codemirror/lang-html'
+import { java } from '@codemirror/lang-java'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
+import { php } from '@codemirror/lang-php'
+import { python } from '@codemirror/lang-python'
+import { rust } from '@codemirror/lang-rust'
+import { sql } from '@codemirror/lang-sql'
+import { xml } from '@codemirror/lang-xml'
+import { yaml } from '@codemirror/lang-yaml'
+import type { Extension } from '@codemirror/state'
+
+export function getCodeEditorLanguageName(filePath: string): string {
+  const ext = getExtension(filePath)
+
+  if (ext === '.ts' || ext === '.tsx') return 'typescript'
+  if (ext === '.js' || ext === '.jsx' || ext === '.mjs' || ext === '.cjs') return 'javascript'
+  if (ext === '.json') return 'json'
+  if (ext === '.md' || ext === '.mdx') return 'markdown'
+  if (ext === '.html' || ext === '.htm') return 'html'
+  if (ext === '.css' || ext === '.scss' || ext === '.less') return 'css'
+  if (ext === '.py') return 'python'
+  if (ext === '.rs') return 'rust'
+  if (ext === '.go') return 'go'
+  if (ext === '.java') return 'java'
+  if (ext === '.php') return 'php'
+  if (ext === '.xml' || ext === '.svg') return 'xml'
+  if (ext === '.sql') return 'sql'
+  if (ext === '.yaml' || ext === '.yml') return 'yaml'
+  if (ext === '.c' || ext === '.cc' || ext === '.cpp' || ext === '.cxx' || ext === '.h' || ext === '.hpp' || ext === '.cs') return 'cpp'
+
+  return 'plain text'
+}
+
+export function getCodeEditorLanguageExtensions(filePath: string): Extension[] {
+  const language = getCodeEditorLanguageName(filePath)
+
+  switch (language) {
+    case 'typescript':
+      return [javascript({ typescript: true, jsx: filePath.toLowerCase().endsWith('.tsx') })]
+    case 'javascript':
+      return [javascript({ jsx: filePath.toLowerCase().endsWith('.jsx') })]
+    case 'json':
+      return [json()]
+    case 'markdown':
+      // markdownLanguage = GitHub-flavored Markdown: enables tables,
+      // strikethrough, task lists, and autolinks so they get tokenized
+      // and colored. The default markdown() is plain CommonMark which
+      // leaves table syntax as undecorated plain text.
+      return [markdown({ base: markdownLanguage })]
+    case 'html':
+      return [html()]
+    case 'css':
+      return [css()]
+    case 'python':
+      return [python()]
+    case 'rust':
+      return [rust()]
+    case 'go':
+      return [go()]
+    case 'java':
+      return [java()]
+    case 'php':
+      return [php()]
+    case 'xml':
+      return [xml()]
+    case 'sql':
+      return [sql()]
+    case 'yaml':
+      return [yaml()]
+    case 'cpp':
+      return [cpp()]
+    default:
+      return []
+  }
+}
+
+function getExtension(filePath: string): string {
+  const cleanPath = filePath.split(/[?#]/, 1)[0].toLowerCase()
+  const slashIndex = cleanPath.lastIndexOf('/')
+  const fileName = slashIndex >= 0 ? cleanPath.slice(slashIndex + 1) : cleanPath
+  const dotIndex = fileName.lastIndexOf('.')
+  return dotIndex >= 0 ? fileName.slice(dotIndex) : ''
+}