.prettierignore

@@ -2,6 +2,7 @@ build/
 .svelte-kit/
 dist/
 src-tauri/target/
+src-tauri/gen/
 node_modules/
 .pnpm-store/
 pnpm-lock.yaml

package.json

@@ -25,11 +25,13 @@
   "dependencies": {
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2",
+    "@tauri-apps/plugin-notification": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-os": "^2",
     "@tauri-apps/plugin-shell": "^2.3.4",
     "@tauri-apps/plugin-store": "^2",
-    "@tauri-apps/plugin-notification": "^2",
-    "@tauri-apps/plugin-os": "^2"
+    "highlight.js": "^11.11.1",
+    "marked": "^17.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

pnpm-lock.yaml

@@ -29,6 +29,12 @@ importers:
       '@tauri-apps/plugin-store':
         specifier: ^2
         version: 2.4.2
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
     devDependencies:
       '@eslint/js':
         specifier: ^9.39.2
@@ -1185,6 +1191,10 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   html-encoding-sniffer@6.0.0:
     resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -1372,6 +1382,11 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -2780,6 +2795,8 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  highlight.js@11.11.1: {}
+
   html-encoding-sniffer@6.0.0:
     dependencies:
       '@exodus/bytes': 1.8.0
@@ -2949,6 +2966,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marked@17.0.1: {}
+
   mdn-data@2.12.2: {}
 
   min-indent@1.0.1: {}

src/app.css

@@ -6,6 +6,7 @@
   --bg-secondary: #16213e;
   --bg-terminal: #0f0f1a;
   --bg-hover: #2a2a4a;
+  --bg-code: #1e1e2e;
   --accent-primary: #e94560;
   --accent-secondary: #ff6b9d;
   --text-primary: #ffffff;
@@ -18,6 +19,16 @@
   --terminal-tool: #c084fc;
   --terminal-tool-name: #ddd6fe;
   --terminal-error: #f87171;
+
+  /* Syntax highlighting colors (dark) */
+  --hljs-keyword: #f472b6;
+  --hljs-string: #a3e635;
+  --hljs-number: #fbbf24;
+  --hljs-comment: #6b7280;
+  --hljs-function: #c084fc;
+  --hljs-type: #22d3ee;
+  --hljs-variable: #fb923c;
+  --hljs-meta: #94a3b8;
 }
 
 [data-theme="light"] {
@@ -25,6 +36,7 @@
   --bg-secondary: #ffffff;
   --bg-terminal: #f1f3f4;
   --bg-hover: #e8e8e8;
+  --bg-code: #f5f5f5;
   --accent-primary: #e94560;
   --accent-secondary: #ff6b9d;
   --text-primary: #1a1a2e;
@@ -37,6 +49,16 @@
   --terminal-tool: #7c3aed;
   --terminal-tool-name: #8b5cf6;
   --terminal-error: #dc2626;
+
+  /* Syntax highlighting colors (light) */
+  --hljs-keyword: #d946ef;
+  --hljs-string: #16a34a;
+  --hljs-number: #d97706;
+  --hljs-comment: #9ca3af;
+  --hljs-function: #7c3aed;
+  --hljs-type: #0891b2;
+  --hljs-variable: #ea580c;
+  --hljs-meta: #64748b;
 }
 
 html,

src/lib/components/Markdown.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+  import { marked } from "marked";
+  import hljs from "highlight.js";
+  import { onMount } from "svelte";
+
+  interface Props {
+    content: string;
+  }
+
+  let { content }: Props = $props();
+  let containerElement: HTMLDivElement;
+
+  const renderer = new marked.Renderer();
+
+  renderer.code = ({ text, lang }) => {
+    const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
+    const highlighted = hljs.highlight(text, { language }).value;
+    return `<pre class="hljs-code-block"><code class="hljs language-${language}">${highlighted}</code></pre>`;
+  };
+
+  renderer.codespan = ({ text }) => {
+    return `<code class="hljs-inline">${text}</code>`;
+  };
+
+  marked.setOptions({
+    renderer,
+    gfm: true,
+    breaks: true,
+  });
+
+  function processSpoilers(html: string): string {
+    const codeBlockPlaceholders: string[] = [];
+
+    // Temporarily replace code blocks and inline code with placeholders
+    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+      codeBlockPlaceholders.push(match);
+      return `__CODE_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+    });
+
+    // Apply spoiler transformation only to non-code content
+    processed = processed.replace(
+      /\|\|(.+?)\|\|/g,
+      '<span class="spoiler" role="button" tabindex="0">$1</span>'
+    );
+
+    // Restore code blocks
+    processed = processed.replace(/__CODE_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return codeBlockPlaceholders[parseInt(index)];
+    });
+
+    return processed;
+  }
+
+  function renderMarkdown(text: string): string {
+    try {
+      const html = marked.parse(text) as string;
+      return processSpoilers(html);
+    } catch {
+      return text;
+    }
+  }
+
+  function handleSpoilerClick(event: Event) {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains("spoiler")) {
+      target.classList.toggle("revealed");
+    }
+  }
+
+  function handleSpoilerKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    if (target.classList.contains("spoiler") && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      target.classList.toggle("revealed");
+    }
+  }
+
+  onMount(() => {
+    if (containerElement) {
+      containerElement.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
+        hljs.highlightElement(block as HTMLElement);
+      });
+    }
+  });
+</script>
+
+<div
+  bind:this={containerElement}
+  class="markdown-content"
+  onclick={handleSpoilerClick}
+  onkeydown={handleSpoilerKeydown}
+  role="presentation"
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown rendering requires @html; content is from Claude API -->
+  {@html renderMarkdown(content)}
+</div>
+
+<style>
+  .markdown-content {
+    line-height: 1.6;
+  }
+
+  .markdown-content :global(p) {
+    margin: 0.5em 0;
+  }
+
+  .markdown-content :global(p:first-child) {
+    margin-top: 0;
+  }
+
+  .markdown-content :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .markdown-content :global(.hljs-code-block) {
+    background: var(--bg-code, #1e1e2e);
+    border-radius: 6px;
+    padding: 1em;
+    margin: 0.75em 0;
+    overflow-x: auto;
+    border: 1px solid var(--border-color);
+  }
+
+  .markdown-content :global(.hljs-code-block code) {
+    background: transparent;
+    padding: 0;
+    font-size: 0.9em;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+  }
+
+  .markdown-content :global(.hljs-inline) {
+    background: var(--bg-code, #1e1e2e);
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-family: "JetBrains Mono", "Fira Code", monospace;
+  }
+
+  .markdown-content :global(ul),
+  .markdown-content :global(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+
+  .markdown-content :global(li) {
+    margin: 0.25em 0;
+  }
+
+  .markdown-content :global(blockquote) {
+    border-left: 3px solid var(--border-color);
+    margin: 0.75em 0;
+    padding-left: 1em;
+    color: var(--text-secondary);
+  }
+
+  .markdown-content :global(a) {
+    color: var(--accent-primary, #f472b6);
+    text-decoration: underline;
+  }
+
+  .markdown-content :global(a:hover) {
+    color: var(--accent-secondary, #e879f9);
+  }
+
+  .markdown-content :global(strong) {
+    font-weight: 600;
+  }
+
+  .markdown-content :global(h1),
+  .markdown-content :global(h2),
+  .markdown-content :global(h3),
+  .markdown-content :global(h4) {
+    margin: 1em 0 0.5em 0;
+    font-weight: 600;
+  }
+
+  .markdown-content :global(h1:first-child),
+  .markdown-content :global(h2:first-child),
+  .markdown-content :global(h3:first-child),
+  .markdown-content :global(h4:first-child) {
+    margin-top: 0;
+  }
+
+  .markdown-content :global(hr) {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 1em 0;
+  }
+
+  .markdown-content :global(table) {
+    border-collapse: collapse;
+    margin: 0.75em 0;
+    width: 100%;
+  }
+
+  .markdown-content :global(th),
+  .markdown-content :global(td) {
+    border: 1px solid var(--border-color);
+    padding: 0.5em;
+    text-align: left;
+  }
+
+  .markdown-content :global(th) {
+    background: var(--bg-secondary);
+    font-weight: 600;
+  }
+
+  /* Highlight.js theme colors - using CSS variables for light/dark mode support */
+  .markdown-content :global(.hljs) {
+    color: var(--text-primary);
+  }
+
+  .markdown-content :global(.hljs-keyword),
+  .markdown-content :global(.hljs-selector-tag),
+  .markdown-content :global(.hljs-built_in),
+  .markdown-content :global(.hljs-name) {
+    color: var(--hljs-keyword);
+  }
+
+  .markdown-content :global(.hljs-string),
+  .markdown-content :global(.hljs-attr),
+  .markdown-content :global(.hljs-symbol),
+  .markdown-content :global(.hljs-bullet) {
+    color: var(--hljs-string);
+  }
+
+  .markdown-content :global(.hljs-number),
+  .markdown-content :global(.hljs-literal) {
+    color: var(--hljs-number);
+  }
+
+  .markdown-content :global(.hljs-comment),
+  .markdown-content :global(.hljs-quote) {
+    color: var(--hljs-comment);
+    font-style: italic;
+  }
+
+  .markdown-content :global(.hljs-function),
+  .markdown-content :global(.hljs-title) {
+    color: var(--hljs-function);
+  }
+
+  .markdown-content :global(.hljs-type),
+  .markdown-content :global(.hljs-class) {
+    color: var(--hljs-type);
+  }
+
+  .markdown-content :global(.hljs-variable),
+  .markdown-content :global(.hljs-template-variable) {
+    color: var(--hljs-variable);
+  }
+
+  .markdown-content :global(.hljs-meta) {
+    color: var(--hljs-meta);
+  }
+
+  .markdown-content :global(.hljs-tag) {
+    color: var(--hljs-keyword);
+  }
+
+  .markdown-content :global(.hljs-attribute) {
+    color: var(--hljs-function);
+  }
+
+  .markdown-content :global(.hljs-params) {
+    color: var(--text-primary);
+  }
+
+  /* Spoiler tag styles */
+  .markdown-content :global(.spoiler) {
+    background: var(--text-primary);
+    color: transparent;
+    border-radius: 4px;
+    padding: 0 0.25em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+  }
+
+  .markdown-content :global(.spoiler:hover) {
+    opacity: 0.8;
+  }
+
+  .markdown-content :global(.spoiler:focus) {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+  }
+
+  .markdown-content :global(.spoiler.revealed) {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    user-select: text;
+  }
+</style>

src/lib/components/Terminal.svelte

@@ -2,6 +2,7 @@
   import { claudeStore, type TerminalLine } from "$lib/stores/claude";
   import { afterUpdate } from "svelte";
   import ConversationTabs from "./ConversationTabs.svelte";
+  import Markdown from "./Markdown.svelte";
 
   let terminalElement: HTMLDivElement;
   let shouldAutoScroll = true;
@@ -100,7 +101,11 @@
           {#if line.toolName}
             <span class="terminal-tool-name mr-2">[{line.toolName}]</span>
           {/if}
-          <span class="whitespace-pre-wrap">{line.content}</span>
+          {#if line.type === "assistant"}
+            <Markdown content={line.content} />
+          {:else}
+            <span class="whitespace-pre-wrap">{line.content}</span>
+          {/if}
         </div>
       {/each}
     {/if}