fix: show codeblock langtag args, improve demo conversation

src/components/ChatMessage.tsx

@@ -108,17 +108,22 @@ export const ChatMessage: FC<Props> = ({ message }) => {
         // Handle wrapped fenced code blocks
         processedContent = handleWrappedFencedCodeBlocks(processedContent);
 
+        // Find start fences for codeblocks (hljs doesn't include paths like "```save PATH")
+        const fences = [...processedContent.matchAll(/(~~~|```)[^\n]+/g)].map((s: RegExpExecArray) => s[0].replace(/(~~~|```)/g, ""));
+
         let parsedResult = await marked.parse(processedContent, {
           async: true,
         });
 
+        // TODO: correctly parse file extensions for highlighting, e.g. "```save script.py" will not highlight as python
         parsedResult = parsedResult.replace(
           /<pre><code(?:\s+class="([^"]+)")?>([^]*?)<\/code><\/pre>/g,
           (_, classes = "", code) => {
             const langtag = ((classes || "").split(" ")[1] || "Code").replace(
               "language-",
               ""
             );
+            const args = fences?.shift() || "";
             function isPath(langtag: string) {
               return (langtag.includes("/") || langtag.includes("\\") || langtag.includes(".")) && langtag.split(" ").length === 1;
             }
@@ -137,7 +142,7 @@ export const ChatMessage: FC<Props> = ({ message }) => {
             const emoji = isPath(langtag) ? "📄" : isTool(langtag) ? "🛠️" : isOutput(langtag) ? "📤" : isWrite(langtag) ? "📝" : "💻";
             return `
             <details>
-              <summary>${emoji} ${langtag}</summary>
+              <summary>${emoji} ${args || langtag}</summary>
               <pre><code class="${classes}">${code}</code></pre>
             </details>
           `;

src/democonversations.ts

@@ -26,22 +26,72 @@ export const demoConversations: DemoConversation[] = [
       },
       {
         role: "assistant",
-        content: "<thinking>\nI'll demonstrate:\n1. Creating a Python file\n2. Running Python code\n3. Making changes with patches\n4. Using the shell\n</thinking>\n\nFirst, let's create a simple Python script:\n\n```save hello.py\ndef greet(name: str) -> str:\n    return f\"Hello, {name}!\"\n\nif __name__ == \"__main__\":\n    print(greet(\"World\"))\n```\n\nNow let's run it:\n\n```shell\npython hello.py\n```\n\nLet's improve the script by adding some documentation:\n\n```patch hello.py\n<<<<<<< ORIGINAL\ndef greet(name: str) -> str:\n=======\ndef greet(name: str) -> str:\n    \"\"\"Greet someone by name.\n    \n    Args:\n        name: The name of the person to greet\n    Returns:\n        A friendly greeting\n    \"\"\"\n>>>>>>> UPDATED\n```\n\nWe can also use Python interactively:\n\n```ipython\nimport numpy as np\nx = np.array([1, 2, 3])\nprint(f\"Mean: {x.mean()}\")\n```",
+        content: "<thinking>\nI'll demonstrate:\n1. Creating a Python file\n2. Running Python code\n3. Making changes with patches\n4. Using the shell\n</thinking>\n\nFirst, let's create a simple Python script:\n\n```save hello.py\ndef greet(name: str) -> str:\n    return f\"Hello, {name}!\"\n\nif __name__ == \"__main__\":\n    print(greet(\"World\"))\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "system",
+        content: "Saved to hello.py",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "assistant",
+        content: "Now let's run it:\n\n```shell\npython hello.py\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "system",
+        content: "```stdout\nHello, World!\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "assistant",
+        content: "Let's improve the script by adding some documentation:\n\n```patch hello.py\n<<<<<<< ORIGINAL\ndef greet(name: str) -> str:\n=======\ndef greet(name: str) -> str:\n    \"\"\"Greet someone by name.\n    \n    Args:\n        name: The name of the person to greet\n    Returns:\n        A friendly greeting\n    \"\"\"\n>>>>>>> UPDATED\n```",
         timestamp: now.toISOString(),
       },
       {
         role: "system",
         content: "Patch successfully applied to hello.py",
         timestamp: now.toISOString(),
       },
+      {
+        role: "assistant",
+        content: "We can also use Python interactively:\n\n```ipython\nimport numpy as np\nx = np.array([1, 2, 3])\nprint(f\"Mean: {x.mean()}\")\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "system",
+        content: "```stdout\nMean: 2.0\n```",
+        timestamp: now.toISOString(),
+      },
       {
         role: "user",
         content: "What tools do you have available?",
         timestamp: now.toISOString(),
       },
       {
         role: "assistant",
-        content: "I have several tools at my disposal:\n\n1. **File Operations**:\n   - `save`: Create or overwrite files\n   - `append`: Append to files\n   - `patch`: Make targeted changes to files\n   - `read`: Read file contents\n\n2. **Code Execution**:\n   - `shell`: Run shell commands\n   - `ipython`: Execute Python code\n   - `tmux`: Run long-lived processes\n\n3. **Web & Research**:\n   - `browser`: Browse websites and take screenshots\n   - `youtube`: Fetch and summarize video transcripts\n   - `rag`: Search through project documentation\n\n4. **Other**:\n   - `screenshot`: Take screenshots\n   - `gh`: Interact with GitHub\n   - `chats`: Search conversation history\n\nLet me demonstrate the browser tool:\n\n```ipython\nsearch(\"gptme github repository\")\n```\n\nAnd show you how to use git:\n\n```shell\ngit status\n```\n\nI can also help with more complex tasks like setting up CI/CD, managing dependencies, or debugging issues. Just let me know what you need help with!",
+        content: "I have several tools at my disposal:\n\n1. **File Operations**:\n   - `save`: Create or overwrite files\n   - `append`: Append to files\n   - `patch`: Make targeted changes to files\n   - `read`: Read file contents\n\n2. **Code Execution**:\n   - `shell`: Run shell commands\n   - `ipython`: Execute Python code\n   - `tmux`: Run long-lived processes\n\n3. **Web & Research**:\n   - `browser`: Browse websites and take screenshots\n   - `youtube`: Fetch and summarize video transcripts\n   - `rag`: Search through project documentation\n\n4. **Other**:\n   - `screenshot`: Take screenshots\n   - `gh`: Interact with GitHub\n   - `chats`: Search conversation history\n\nLet me demonstrate the browser tool:\n\n```ipython\nsearch(\"gptme github repository\")\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "system",
+        content: "```result\n1. [GitHub - ErikBjare/gptme: A CLI tool for interacting with LLMs](https://github.com/ErikBjare/gptme)\n...\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "assistant",
+        content: "And show you how to use git:\n\n```shell\ngit status\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "system",
+        content: "```stdout\nOn branch main\nYour branch is up to date with 'origin/main'\n\nnothing to commit, working tree clean\n```",
+        timestamp: now.toISOString(),
+      },
+      {
+        role: "assistant",
+        content: "I can also help with more complex tasks like setting up CI/CD, managing dependencies, or debugging issues. Just let me know what you need help with!",
         timestamp: now.toISOString(),
       },
       {

tsconfig.test.json

@@ -3,6 +3,8 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "esModuleInterop": true,
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "types": ["jest", "@testing-library/jest-dom"]
   },
   "include": [