Add logs tab with real-time server output and consolidate syntax highlighting

- Implement dedicated Logs tab showing stdout/stderr from OpenCode server
- Add log level parsing (INFO, ERROR, WARN, DEBUG) with color coding
- Stream logs from main process to renderer via IPC events
- Persist scroll position and auto-scroll state per instance
- Synchronize instance IDs between renderer and main process
- Consolidate syntax highlighting to single shared highlighter instance
- Optimize markdown rendering with global highlighter initialization
- Fix code block copy button to always appear on right side
- Enable debug logging with --print-logs --log-level DEBUG flags

src/components/code-block-inline.tsx

@@ -1,67 +1,42 @@
-import { createSignal, onMount, Show } from "solid-js"
-import { getHighlighter, type Highlighter } from "shiki"
+import { createSignal, onMount, Show, createEffect } from "solid-js"
+import type { Highlighter } from "shiki"
 import { useTheme } from "../lib/theme"
+import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
 
 interface CodeBlockInlineProps {
   code: string
   language?: string
 }
 
-let highlighter: Highlighter | null = null
-
-async function getOrCreateHighlighter() {
-  if (!highlighter) {
-    highlighter = await getHighlighter({
-      themes: ["github-light", "github-dark"],
-      langs: [
-        "typescript",
-        "javascript",
-        "python",
-        "bash",
-        "json",
-        "html",
-        "css",
-        "markdown",
-        "yaml",
-        "sql",
-        "rust",
-        "go",
-        "cpp",
-        "c",
-        "java",
-        "csharp",
-        "php",
-        "ruby",
-        "swift",
-        "kotlin",
-        "diff",
-        "shell",
-      ],
-    })
-  }
-  return highlighter
-}
-
 export function CodeBlockInline(props: CodeBlockInlineProps) {
   const { isDark } = useTheme()
   const [html, setHtml] = createSignal("")
   const [copied, setCopied] = createSignal(false)
   const [ready, setReady] = createSignal(false)
+  let highlighter: Highlighter | null = null
 
   onMount(async () => {
-    const hl = await getOrCreateHighlighter()
+    highlighter = await getSharedHighlighter()
     setReady(true)
-    updateHighlight(hl)
+    updateHighlight()
   })
 
-  const updateHighlight = async (hl: Highlighter) => {
+  createEffect(() => {
+    if (ready()) {
+      updateHighlight()
+    }
+  })
+
+  const updateHighlight = () => {
+    if (!highlighter) return
+
     if (!props.language) {
       setHtml(`<pre><code>${escapeHtml(props.code)}</code></pre>`)
       return
     }
 
     try {
-      const highlighted = hl.codeToHtml(props.code, {
+      const highlighted = highlighter.codeToHtml(props.code, {
         lang: props.language,
         theme: isDark() ? "github-dark" : "github-light",
       })
@@ -116,14 +91,3 @@ export function CodeBlockInline(props: CodeBlockInlineProps) {
     </Show>
   )
 }
-
-function escapeHtml(text: string): string {
-  const map: Record<string, string> = {
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#039;",
-  }
-  return text.replace(/[&<>"']/g, (m) => map[m])
-}