feat(api): add completion request cancellation and mermaid rendering

Add support for cancelling in-progress LLM completion requests via new /v1/completions/cancel endpoint with task tracking. Implement mermaid diagram rendering in the Milkdown editor with a new mermaidPlugin. Update copilotPlugin to properly abort requests with descriptive reasons. Refactor settings panel to handle system theme changes reactively. Add camera capture support for image uploads.

src/plugins/mermaidPlugin.ts

@@ -0,0 +1,67 @@
+import { codeBlockConfig } from '@milkdown/kit/component/code-block'
+import mermaid from 'mermaid'
+
+// ── Mermaid init ────────────────────────────────────────────────────────────
+let mermaidReady = false
+let diagramCounter = 0
+
+function ensureMermaid() {
+    if (mermaidReady) return
+    const dark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    mermaid.initialize({
+        startOnLoad: false,
+        theme: dark ? 'dark' : 'default',
+        securityLevel: 'loose',
+        fontFamily: 'inherit',
+    })
+    mermaidReady = true
+}
+
+// ── renderPreview ───────────────────────────────────────────────────────────
+// Pass this function to codeBlockConfig.renderPreview via crepe.editor.config().
+// For non-mermaid languages, return null to use the default preview renderer.
+
+export async function mermaidRenderPreview(
+    language: string,
+    content: string,
+    applyPreview: (value: null | string | HTMLElement) => void,
+): Promise<void> {
+    if (language !== 'mermaid') {
+        applyPreview(null)
+        return
+    }
+
+    ensureMermaid()
+
+    // Show a placeholder immediately
+    const wrapper = document.createElement('div')
+    wrapper.className = 'mermaid-block'
+    const inner = document.createElement('div')
+    inner.className = 'mermaid-inner'
+    inner.innerHTML = '<div class="mermaid-loading">···</div>'
+    wrapper.appendChild(inner)
+    applyPreview(wrapper)
+
+    const id = `mermaid-render-${++diagramCounter}`
+    const code = content.trim() || 'graph TD\nA-->B'
+
+    try {
+        const { svg } = await mermaid.render(id, code)
+        inner.innerHTML = svg
+        applyPreview(wrapper)
+    } catch (err) {
+        const pre = document.createElement('pre')
+        pre.className = 'mermaid-error'
+        pre.textContent = `Mermaid error:\n${err instanceof Error ? err.message : String(err)}`
+        inner.innerHTML = ''
+        inner.appendChild(pre)
+        applyPreview(wrapper)
+    }
+}
+
+// ── Milkdown plugin helper ─────────────────────────────────────────────────
+// Call this inside a crepe.editor.config() callback:
+//   ctx.update(codeBlockConfig.key, (prev) => ({ ...prev, renderPreview: mermaidRenderPreview }))
+//
+// Re-export the config key so callers don't need to import @milkdown/components directly.
+export { codeBlockConfig }