Release v0.8.0 (#80)

* Bump version to v0.8.0 and fix KaTeX/mermaid/Ollama issues

Version bump:
- 0.7.1 → 0.8.0 in package.json, tauri.conf.json, Cargo.toml

KaTeX block math fixes:
- Fix native DOM selection highlight bleed when navigating to or
  clicking block math nodes (ProseMirror plugin clears DOM selection)
- Add Enter/Space keyboard shortcut to open editor on selected block
- Move cursor after node on submit/cancel to avoid re-triggering highlight
- Add ProseMirror-selectednode outline style for visual feedback

Mermaid fixes:
- Start in edit mode when switching empty code block to mermaid
- Show "Empty mermaid diagram" placeholder instead of collapsing

Ollama error handling:
- Strip ANSI escape codes from CLI stdout/stderr
- Detect model-not-found errors and show actionable message

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* fix: align mermaid edit button with language dropdown

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* refactor: simplify CodeBlockView toolbar

Co-Authored-By: Claude Opus 4.6 <[email protected]>

* Codeblock dropdown styling adjustment.

* fix: don't trim stdout in AI CLI, narrow Ollama error matching

- Stop trimming stdout in execute_ai_cli (callers trim as needed,
  and trimming here could strip meaningful whitespace)
- Replace broad "not found" check with specific "model not found"
  and "model does not exist" patterns

Co-Authored-By: Claude Opus 4.6 <[email protected]>

---------

Co-authored-by: Claude Opus 4.6 <[email protected]>

Author: erictli

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tauri-app",
   "private": true,
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "Scratch"
-version = "0.7.1"
+version = "0.8.0"
 description = "An offline markdown-based notes app"
 authors = ["erictli"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -2347,17 +2347,22 @@ async fn execute_ai_cli(
             .map(|s| s.success())
             .unwrap_or(false);
 
+        // Strip ANSI escape sequences from output (e.g. Ollama progress spinners)
+        let ansi_re = regex::Regex::new(r"\x1b\[[0-9;?]*[A-Za-z]|\x1b\].*?\x07").unwrap();
+        let stdout_clean = ansi_re.replace_all(&stdout_str, "").to_string();
+        let stderr_clean = ansi_re.replace_all(&stderr_str, "").trim().to_string();
+
         if success {
             AiExecutionResult {
                 success: true,
-                output: stdout_str,
+                output: stdout_clean,
                 error: None,
             }
         } else {
             AiExecutionResult {
                 success: false,
-                output: stdout_str,
-                error: Some(stderr_str),
+                output: stdout_clean,
+                error: Some(stderr_clean),
             }
         }
     });
@@ -2559,7 +2564,7 @@ async fn ai_execute_ollama(
     let result = execute_ai_cli(
         "Ollama",
         "ollama".to_string(),
-        vec!["run".to_string(), model_name],
+        vec!["run".to_string(), model_name.clone()],
         stdin_input,
         "Ollama CLI not found. Please install it from https://ollama.com".to_string(),
     )
@@ -2568,6 +2573,21 @@ async fn ai_execute_ollama(
     // Improve error messages for common Ollama failures
     if !result.success {
         if let Some(ref err) = result.error {
+            let err_lower = err.to_lowercase();
+            if err_lower.contains("file does not exist")
+                || err_lower.contains("pull model manifest")
+                || err_lower.contains("model not found")
+                || err_lower.contains("model does not exist")
+            {
+                return Ok(AiExecutionResult {
+                    success: false,
+                    output: String::new(),
+                    error: Some(format!(
+                        "Model '{}' not found. Run `ollama pull {}` in your terminal to download it.",
+                        model_name, model_name
+                    )),
+                });
+            }
             if err.contains("401") || err.contains("Unauthorized") {
                 return Ok(AiExecutionResult {
                     success: false,

src-tauri/src/lib.rs

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Scratch",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "identifier": "com.scratch.app",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -251,7 +251,8 @@ html.dark {
 }
 
 @keyframes bounce-gentle {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
@@ -556,6 +557,13 @@ html.dark {
   max-width: 100%;
 }
 
+.prose
+  .tiptap-mathematics-render[data-type="block-math"].ProseMirror-selectednode {
+  outline: 2px solid var(--color-bg-emphasis);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
 .prose .tiptap-mathematics-render--editable {
   cursor: pointer;
 }

src/App.css

@@ -5,10 +5,13 @@ import { SUPPORTED_LANGUAGES } from "./lowlight";
 import { MermaidRenderer } from "./MermaidRenderer";
 import { ChevronDownIcon, PencilIcon, EyeIcon } from "../icons";
 
+const btnClass =
+  "code-block-mermaid-btn inline-flex items-center gap-1 text-xs h-6 px-1.5 text-text-muted rounded cursor-pointer transition-colors hover:text-text hover:bg-bg-emphasis";
+
 export function CodeBlockView({ node, updateAttributes }: ReactNodeViewProps) {
   const language: string = node.attrs.language || "";
   const isMermaid = language === "mermaid";
-  const [showSource, setShowSource] = useState(false);
+  const [showSource, setShowSource] = useState(!node.textContent.trim());
   const codeContent = node.textContent;
 
   const handleLanguageChange = useCallback(
@@ -18,46 +21,41 @@ export function CodeBlockView({ node, updateAttributes }: ReactNodeViewProps) {
     [updateAttributes],
   );
 
-  const mermaidButton = isMermaid ? (
-    showSource ? (
-      <button
-        contentEditable={false}
-        onClick={() => setShowSource(false)}
-        className="code-block-mermaid-btn inline-flex items-center gap-1 text-sm px-1.5 py-0.5 text-text-muted rounded cursor-pointer transition-colors hover:text-text hover:bg-bg-emphasis"
-        type="button"
-      >
-        <EyeIcon className="w-3.75 h-3.75 stroke-[1.7]" />
-        Preview
-      </button>
-    ) : (
-      <button
-        contentEditable={false}
-        onClick={() => setShowSource(true)}
-        className="code-block-mermaid-btn inline-flex items-center gap-1 text-sm px-1.5 py-0.5 text-text-muted rounded cursor-pointer transition-colors hover:text-text hover:bg-bg-emphasis"
-        type="button"
-      >
-        <PencilIcon className="w-3.75 h-3.75 stroke-[1.7]" />
-        Edit
-      </button>
-    )
-  ) : null;
-
   const toolbar = (
     <div className="code-block-language-selector" contentEditable={false}>
-      {mermaidButton}
-      <div className="relative">
+      {isMermaid && (
+        <button
+          contentEditable={false}
+          onClick={() => setShowSource(!showSource)}
+          className={btnClass}
+          type="button"
+        >
+          {showSource ? (
+            <>
+              <EyeIcon className="w-3.5 h-3.5 stroke-[1.7]" />
+              Preview
+            </>
+          ) : (
+            <>
+              <PencilIcon className="w-3.5 h-3.5 stroke-[1.7]" />
+              Edit
+            </>
+          )}
+        </button>
+      )}
+      <div className="relative flex items-center h-6">
         <select
           value={language}
           onChange={handleLanguageChange}
-          className="appearance-none bg-transparent text-text-muted text-sm cursor-pointer outline-none pr-4 pl-1.5 py-0.5 rounded hover:bg-bg-emphasis transition-colors"
+          className="appearance-none bg-transparent text-text-muted text-xs h-6 cursor-pointer outline-none pr-4 pl-1.5 rounded hover:bg-bg-emphasis transition-colors"
         >
           {SUPPORTED_LANGUAGES.map((lang) => (
             <option key={lang.value} value={lang.value}>
               {lang.label}
             </option>
           ))}
         </select>
-        <ChevronDownIcon className="w-3 h-3 absolute right-0.5 top-1/2 -translate-y-1/2 pointer-events-none text-text-muted" />
+        <ChevronDownIcon className="w-3.25 h-3.25 stroke-[1.7] absolute right-1.25 top-1/2 -translate-y-1/2 pointer-events-none text-text-muted" />
       </div>
     </div>
   );

src/components/editor/CodeBlockView.tsx

@@ -742,11 +742,18 @@ export function Editor({
               .chain()
               .focus()
               .updateBlockMath({ pos, latex: trimmed })
+              .setTextSelection(pos + node.nodeSize)
               .run();
             closeBlockMathPopup();
           },
           onCancel: () => {
-            currentEditor.commands.focus();
+            // Move cursor after the node instead of restoring the NodeSelection,
+            // which would re-trigger native DOM selection highlight bleed
+            currentEditor
+              .chain()
+              .focus()
+              .setTextSelection(pos + node.nodeSize)
+              .run();
             closeBlockMathPopup();
           },
         },

src/components/editor/Editor.tsx

@@ -1,5 +1,6 @@
 import { InputRule } from "@tiptap/core";
 import { BlockMath } from "@tiptap/extension-mathematics";
+import { Plugin, PluginKey, NodeSelection } from "@tiptap/pm/state";
 
 export function normalizeBlockMath(value: string): string {
   const trimmed = value.trim();
@@ -25,4 +26,46 @@ export const ScratchBlockMath = BlockMath.extend({
       }),
     ];
   },
+
+  addProseMirrorPlugins() {
+    const onClick = this.options.onClick;
+    return [
+      new Plugin({
+        key: new PluginKey("blockMathSelection"),
+        view() {
+          return {
+            // Clear native DOM selection when a blockMath node is selected.
+            // ProseMirror's NodeSelection sets a DOM selection that spans all
+            // content before the atom node, causing a visible highlight bleed.
+            update(view) {
+              const { selection } = view.state;
+              if (
+                selection instanceof NodeSelection &&
+                selection.node.type.name === "blockMath"
+              ) {
+                window.getSelection()?.removeAllRanges();
+              }
+            },
+          };
+        },
+        props: {
+          // Open editor on Enter or Space when a blockMath node is selected
+          handleKeyDown(view, event) {
+            if (event.key !== "Enter" && event.key !== " ") return false;
+            const { selection } = view.state;
+            if (
+              selection instanceof NodeSelection &&
+              selection.node.type.name === "blockMath" &&
+              onClick
+            ) {
+              event.preventDefault();
+              onClick(selection.node, selection.from);
+              return true;
+            }
+            return false;
+          },
+        },
+      }),
+    ];
+  },
 });

src/components/editor/MathExtensions.ts

@@ -29,13 +29,19 @@ export function MermaidRenderer({ code }: MermaidRendererProps) {
 
   if (error) {
     return (
-      <div className="text-xs text-[var(--color-text-muted)] italic px-2 py-1">
+      <div className="text-xs text-text-muted italic px-2 pt-6 pb-3 text-center">
         Mermaid syntax error
       </div>
     );
   }
 
-  if (!svg) return null;
+  if (!svg) {
+    return (
+      <div className="text-xs text-text-muted italic px-2 pt-6 pb-3 text-center">
+        Empty mermaid diagram
+      </div>
+    );
+  }
 
   return (
     <div