latex-stickies 1.1.0 → 1.3.0

package/README.md

@@ -1,9 +1,9 @@
 # LaTeX Stickies
 
-Sticky notes for your desktop that render LaTeX and Markdown.
+Sticky notes for your desktop that render LaTeX and Markdown as you type.
 
-Write `$e^{i\pi} + 1 = 0$` in a note and it renders as soon as you click away.
-Notes stay where you put them, in the color you chose, across restarts.
+Write `$e^{i\pi} + 1 = 0$` and it becomes the equation. Click into it and the
+source comes back. There is no edit mode and no preview mode.
 
 ```
 npx latex-stickies
@@ -16,41 +16,63 @@ npm install -g latex-stickies
 latex-stickies
 ```
 
-Requires Node 22.12 or newer. The first run downloads the Electron runtime (~230 MB), so
-give it a minute; later launches are instant.
+Requires Node 22.12 or newer. The first run downloads the Electron runtime
+(~230 MB), so give it a minute; later launches are instant. On a Mac you can
+download a `.dmg` from [Releases](https://github.com/kev-nj/latex-stickies/releases)
+instead and skip Node entirely.
 
 ## Writing in a note
 
-Everything renders as you type. Click into a line to see the markdown behind
-it; move away and it renders again.
+Everything renders while you write. Put the caret in an element to see the
+markdown behind it; move away and it renders again.
 
-**Math** — `$…$` inline, `$$…$$` on its own line. Delimiters have to hug their
-content, so ordinary prose like `costs $5 and $6` stays text rather than turning
-into a formula. Broken TeX shows the source underlined in red with the parse
-error on hover, instead of blanking the note.
+**Maths** — `$…$` inline, `$$…$$` on its own line. Delimiters have to hug their
+content, so prose like `costs $5 and $6` stays text rather than turning into a
+formula. Broken TeX shows the source underlined in red with the parse error on
+hover, instead of blanking the note.
 
-**Markdown** — headings, `**bold**`, `*italic*`, `~~strikethrough~~`, lists,
-task lists, tables, blockquotes, and links (which open in your browser).
+**Markdown** — headings, `**bold**`, `*italic*`, `` `code` ``, `~~struck~~`,
+quotes, lists, and links that open in your browser. Tables render as tables,
+and their cells render maths. Task list checkboxes are clickable: tick one and
+`[ ]` becomes `[x]` in the file.
 
-**Code** — fenced blocks are highlighted in 20 languages, with the language
-labelled and a copy button on hover:
+**Code** — fenced blocks are highlighted across eleven languages, labelled with
+the language, and each has a copy button.
 
-````
-```python
-def gaussian(x, mu, sigma):
-    return exp(-((x - mu) ** 2) / (2 * sigma ** 2))
+Inside a fence the editor behaves like a code editor: Enter keeps your
+indentation and adds a level after `:` or `{`, Tab and Shift+Tab indent and
+dedent, and brackets and quotes auto-close. Outside one it behaves like a notes
+field — lists continue on Enter, and quotes are left alone so `don't` types
+normally.
+
+**Images of your maths** — right-click a rendered equation for *Copy as Image*
+or *Copy LaTeX*. `Cmd+Shift+C` copies the whole note as an image, however long
+it is. Both go straight to the clipboard, ready to paste into Slack or an email.
+
+## Autocomplete (optional, local)
+
+A grey suggestion appears after a pause in typing; **Tab** accepts it, **Esc**
+dismisses it. It runs entirely on your machine through
+[Ollama](https://ollama.com) — nothing is sent anywhere — and is **off by
+default**. Turn it on under **Note → Autocomplete**.
+
+Pull a small model. This fires on every pause, so speed matters far more than
+size:
+
+```
+ollama pull qwen2.5-coder:1.5b
 ```
-````
 
-Aliases work as you would expect: `sh`, `shell` and `zsh` all mean bash, `py`
-means python, and `tex` means latex. A fence with no language stays plain --
-guessing on a two-line snippet is wrong often enough to be worse than nothing.
+Measured on a MacBook: **0.06–0.5s** with that model, against 0.4–3.5s for a
+14B — and the small one wrote better prose. Choose yours under **Note →
+Autocomplete Model**; installed models are listed with their sizes.
 
-Inside a fence the editor behaves like a code editor: Enter keeps your
-indentation and adds a level after `:` or `{`, Tab and Shift+Tab indent and
-dedent (including a whole selection), and brackets and quotes auto-close.
-Outside a fence it behaves like a notes field instead -- lists continue on
-Enter, and quotes are left alone so `don't` types normally.
+It knows what this app is for. `$$\int_0^1 x^2 dx = ` suggests `\frac{1}{3}$$`,
+and `The derivative of $x^2$ is ` suggests `$2x$.`
+
+**`Cmd+Shift+M`** turns a description into LaTeX: select *"integral of e to the
+minus x squared from 0 to infinity"* and it becomes
+`$\int_{0}^{\infty} e^{-x^2}\,dx$`.
 
 ## Keyboard
 
@@ -59,58 +81,81 @@ Use `Ctrl` in place of `Cmd` on Windows and Linux.
 | | |
 |---|---|
 | `Cmd+N` | New note |
-| `Cmd+W` | Close note |
-| `Cmd+Backspace` | Delete note |
-| `Cmd+E` | Toggle edit / preview |
-| `Cmd+T` | Keep on top |
-| `Cmd+±` | Text size |
+| `Cmd+W` | Close note (it reopens next launch) |
+| `Cmd+Shift+Backspace` | Delete note, permanently |
 | `Cmd+B` / `Cmd+I` / `Cmd+E` | Bold / italic / code |
 | `Cmd+K` | Link |
-| `Cmd+Shift+C` | Copy note as image |
-| `Esc` | Leave edit mode |
+| `Cmd+F` | Find in note |
+| `Cmd+Shift+M` | Maths from a description |
+| `Cmd+Shift+C` | Copy note as an image |
+| `Cmd+Shift+O` | Open the notes folder |
+| `Cmd+T` | Keep on top |
+| `Cmd+±` | Text size |
+
+On Windows and Linux the note windows have no menu bar, so the **☰** button
+in a note's toolbar opens the same menu. Every command is there.
+
+The **All Notes** menu lists every note you have. A tick means it is on screen;
+click to open a note, or click a ticked one to close it. So a note you closed
+is one click away rather than lost until the next launch.
 
 ## Where notes live
 
-| | |
-|---|---|
-| macOS | `~/Library/Application Support/latex-stickies/notes.json` |
-| Windows | `%APPDATA%\latex-stickies\notes.json` |
-| Linux | `~/.config/latex-stickies/notes.json` |
+One Markdown file per note, in a folder you can open:
+
+```
+~/Documents/LaTeX Stickies/
+  shopping-list.md
+  lecture-3.md
+  .stickies.json      # colours, positions, pinned state
+```
+
+They are ordinary files: grep them, keep the folder in git, sync it through
+Dropbox, or edit a note in another editor — the open note follows the change.
+`Cmd+Shift+O` opens the folder.
 
-Saves are atomic -- written to a temp file, flushed, then renamed over the
-target -- so a crash, a force quit, or pulling the power leaves the previous
-good file intact rather than a truncated one. Only one instance runs at a time,
-because two copies would hold divergent notes in memory and the last to quit
-would silently overwrite the other.
+Files are named from the note's first line, and renamed if you retitle it. A
+file you rename yourself keeps its name. Dropping a `.tex` or `.txt` file into
+the folder makes it a note too, and it keeps that extension.
+
+Metadata lives in the sidecar index rather than in frontmatter, so the note
+files stay clean — a `.tex` file with YAML at the top would not compile.
+
+Saves are atomic: written to a temp file, flushed, then renamed over the
+target, so a crash or force quit leaves the previous file intact rather than a
+truncated one. Only one instance runs at a time, because two copies would hold
+divergent notes and the last to quit would overwrite the other.
+
+An existing `notes.json` from an older version is migrated the first time and
+then left in place.
 
 ## Development
 
 ```
 npm install
 npm start        # run from source
-npm test         # 4 suites, 62 assertions
-npm run vendor   # regenerate the bundled Prism
+npm test         # unit suites
+npm run vendor   # rebuild the bundled libraries
 npm run icon     # rebuild the app icon from assets/icon-master.png
+npm run dist     # build a macOS .app and .dmg
 ```
 
-Artwork lives in `assets/`: `logo.jpeg` is the original, and `icon-master.png`
-is the prepared 1024px master the icon is generated from -- transparent ground,
-art filling 824 of the canvas, which is the macOS convention that keeps an icon
-at the same visual weight as the rest of the Dock.
-
-The renderer loads over `file://` under a strict content-security policy, so
-KaTeX, marked, DOMPurify and Prism are vendored into `src/renderer/vendor/`
-rather than pulled from a CDN. Note text is sanitized before it reaches the
-page, and the renderer talks to disk only through a six-function preload bridge.
-
-To build a macOS `.app` and `.dmg`:
+Beyond the unit tests, several checks drive the real app and run in CI on
+macOS, Windows and Linux:
 
 ```
-npm run dist
+node scripts/smoke.js             # boots, and stays up
+node scripts/smoke.js --lifecycle # closing every note behaves per platform
+node scripts/render-check.js      # the first-run note renders correctly
+node scripts/ghost-check.js       # autocomplete suggests, and Tab accepts
+node scripts/snapshot-check.js    # a long note is captured whole
 ```
 
-The build is unsigned, so macOS will warn on other machines unless you sign it
-with an Apple Developer ID.
+The renderer loads over `file://` under a strict content-security policy, so
+CodeMirror and KaTeX are bundled into `src/renderer/vendor/` rather than pulled
+from a CDN. Note text is never parsed as HTML, and the renderer reaches the
+filesystem and the network only through a narrow preload bridge — Ollama is
+called from the main process, so the page keeps `default-src 'none'`.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-stickies",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Sticky notes for your desktop that render LaTeX and Markdown.",
   "main": "src/main.js",
   "scripts": {
@@ -10,7 +10,9 @@
     "icon": "node scripts/make-icon.js",
     "dist": "node scripts/build-dmg.js",
     "install-app": "npm run dist && rm -rf \"/Applications/LaTeX Stickies.app\" && cp -R \"dist/mac-arm64/LaTeX Stickies.app\" /Applications/ && xattr -dr com.apple.quarantine \"/Applications/LaTeX Stickies.app\"",
-    "prepublishOnly": "npm test"
+    "prepublishOnly": "npm test",
+    "postinstall": "node scripts/brand-electron.js",
+    "brand": "node scripts/brand-electron.js"
   },
   "build": {
     "appId": "com.kevinjusak.latexsticky",
@@ -43,6 +45,7 @@
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/language": "^6.12.4",
+    "@codemirror/search": "^6.7.2",
     "@codemirror/state": "^6.7.2",
     "@codemirror/view": "^6.43.10",
     "@lezer/highlight": "^1.2.3",
@@ -74,6 +77,7 @@
   "files": [
     "src/",
     "bin/",
+    "scripts/brand-electron.js",
     "build/icon.icns",
     "build/icon.png"
   ],

package/scripts/brand-electron.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * Gives the Electron shell this app's name and icon, on macOS.
+ *
+ * Run from source or from npm there is no .app bundle of our own, so macOS
+ * takes the Dock name and icon from the shell being launched -- which is called
+ * "Electron" and wears the atom logo. app.setName() cannot change that: the
+ * Dock reads it from the bundle before any of our code runs.
+ *
+ * Editing Info.plist invalidates the bundle's ad-hoc signature, so it is
+ * re-signed afterwards. That matters: an unsigned bundle will not launch on
+ * Apple Silicon at all, which is a far worse outcome than a wrong name. If
+ * anything here fails, the original Info.plist goes back and the install
+ * continues quietly -- a cosmetic nicety must never break someone's install.
+ */
+const { execFileSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const NAME = 'LaTeX Stickies';
+
+function main() {
+  if (process.platform !== 'darwin') return; // only macOS names apps this way
+
+  let appPath;
+  try {
+    const binary = require(require.resolve('electron', { paths: [path.join(__dirname, '..')] }));
+    // .../Electron.app/Contents/MacOS/Electron -> .../Electron.app
+    appPath = path.resolve(path.dirname(binary), '..', '..');
+  } catch (_) {
+    return; // no runtime installed; nothing to brand
+  }
+
+  const plist = path.join(appPath, 'Contents', 'Info.plist');
+  if (!fs.existsSync(plist)) return;
+
+  const read = (key) => {
+    try {
+      return execFileSync('plutil', ['-extract', key, 'raw', plist]).toString().trim();
+    } catch (_) {
+      return '';
+    }
+  };
+
+  if (read('CFBundleName') === NAME) return; // already done
+
+  const backup = fs.readFileSync(plist);
+  try {
+    for (const key of ['CFBundleName', 'CFBundleDisplayName']) {
+      try {
+        execFileSync('plutil', ['-replace', key, '-string', NAME, plist]);
+      } catch (_) {
+        execFileSync('plutil', ['-insert', key, '-string', NAME, plist]);
+      }
+    }
+
+    // The bundle icon is what shows before the app can set its own.
+    const icon = path.join(__dirname, '..', 'build', 'icon.icns');
+    const target = path.join(appPath, 'Contents', 'Resources', 'electron.icns');
+    if (fs.existsSync(icon) && fs.existsSync(target)) fs.copyFileSync(icon, target);
+
+    // Required: the edits above invalidate the ad-hoc signature, and macOS
+    // refuses to launch a bundle whose signature does not match its contents.
+    execFileSync('codesign', ['--force', '--deep', '--sign', '-', appPath], {
+      stdio: 'ignore',
+    });
+    execFileSync('codesign', ['--verify', appPath], { stdio: 'ignore' });
+
+    console.log(`named the Electron shell "${NAME}"`);
+  } catch (err) {
+    fs.writeFileSync(plist, backup);
+    try {
+      execFileSync('codesign', ['--force', '--deep', '--sign', '-', appPath], {
+        stdio: 'ignore',
+      });
+    } catch (_) { /* leave it as found */ }
+    console.log(`could not rename the Electron shell (${err.message.split('\n')[0]})`);
+  }
+}
+
+try {
+  main();
+} catch (err) {
+  // Never fail an install over the name in the Dock.
+  console.log('skipped naming the Electron shell:', err.message.split('\n')[0]);
+}

package/src/ai.js

@@ -0,0 +1,217 @@
+/**
+ * Talks to Ollama, if it happens to be running.
+ *
+ * Requests are made from the main process rather than the renderer. The note
+ * page runs under `default-src 'none'` with no connect-src, so it cannot reach
+ * the network at all -- and that is worth keeping. Widening the policy so a
+ * page full of untrusted note text can open connections would trade a real
+ * guarantee for a convenience.
+ *
+ * Everything here fails quietly. Ollama is optional: if it is not installed,
+ * not running, or slow to answer, the feature simply does not appear.
+ */
+const HOST = process.env.OLLAMA_HOST || 'http://127.0.0.1:11434';
+
+const STATUS_TIMEOUT_MS = 1500;
+const COMPLETE_TIMEOUT_MS = 8000;
+
+/** In-flight completion, so a new keystroke can cancel the last request. */
+let pending = null;
+
+async function withTimeout(url, options, ms) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), ms);
+  try {
+    return await fetch(url, { ...options, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/** Is Ollama reachable, and what has it got? */
+async function status() {
+  try {
+    const res = await withTimeout(`${HOST}/api/tags`, {}, STATUS_TIMEOUT_MS);
+    if (!res.ok) return { available: false, models: [] };
+    const data = await res.json();
+    const models = (data.models || [])
+      // Embedding models cannot generate text; offering one would just fail.
+      .filter((m) => !/embed/i.test(m.name))
+      .map((m) => ({ name: m.name, size: m.size || 0 }))
+      .sort((a, b) => a.size - b.size);
+    return { available: true, models, host: HOST };
+  } catch (_) {
+    return { available: false, models: [] };
+  }
+}
+
+/**
+ * Which model to suggest when none has been chosen.
+ *
+ * Size matters more than quality here: this runs on every pause in typing, and
+ * a 27B model answering in four seconds is worse than a small one answering in
+ * two hundred milliseconds. Prefer a code-completion model, then the smallest.
+ */
+function pickDefault(models) {
+  if (!models.length) return '';
+  const coder = models.find((m) => /coder|code/i.test(m.name));
+  if (coder) return coder.name;
+  // Sort here rather than trusting the caller: relying on the list arriving
+  // in size order is the kind of assumption that quietly stops being true.
+  return [...models].sort((a, b) => (a.size || 0) - (b.size || 0))[0].name;
+}
+
+/**
+ * Drops any part of the answer that repeats what is already typed.
+ *
+ * Asked to continue "- milk\n- eggs\n- ", a model will often reply "- bread",
+ * which would insert the bullet twice. Trim the longest overlap between the end
+ * of the prefix and the start of the completion.
+ */
+function trimOverlap(prefix, completion) {
+  const tail = prefix.slice(-40);
+  for (let k = Math.min(tail.length, completion.length); k > 0; k -= 1) {
+    if (completion.slice(0, k) === tail.slice(-k)) return completion.slice(k);
+  }
+  return completion;
+}
+
+/**
+ * Models trained to fill a gap, which is exactly what autocomplete is.
+ *
+ * Asked with an ordinary instruction, an instruct-tuned model answers as an
+ * assistant: given "hello my name is " it replied "Qwen." -- its own name.
+ * The fill-in-the-middle format asks it to complete the text rather than
+ * respond to it.
+ */
+const FIM = /coder|starcoder|codellama|codegemma|codestral/i;
+
+function buildRequest({ prefix, suffix, model }) {
+  if (FIM.test(model)) {
+    return {
+      prompt: `<|fim_prefix|>${prefix}<|fim_suffix|>${suffix || ''}<|fim_middle|>`,
+      stop: ['\n', '<|fim_pad|>', '<|endoftext|>', '<|file_sep|>'],
+    };
+  }
+  // No FIM support: raw mode at least skips the chat template, so the model
+  // continues the text instead of replying to it.
+  return { prompt: prefix, stop: ['\n'] };
+}
+
+/**
+ * Tidies a raw completion into something worth showing.
+ *
+ * Cuts to one line, ends at the first sentence rather than trailing off, and
+ * drops a half-finished word when the model simply ran out of budget.
+ */
+function tidy(text, prefix, truncated) {
+  let out = String(text || '').replace(/^[\r\n]+/, '').split('\n')[0];
+  out = trimOverlap(prefix, out);
+
+  // End at the first sentence. The terminator must be followed by a space or
+  // the end, so "3.14" is not mistaken for the end of a sentence.
+  const sentence = /^[\s\S]*?[.!?](?=\s|$)/.exec(out);
+  if (sentence) out = sentence[0];
+
+  // Nothing to cut at: cap the length, and drop a half-finished word -- but
+  // only when the model actually ran out of budget, which it tells us. Judging
+  // that from the text alone throws away perfectly complete last words.
+  if (out.length > 90) out = out.slice(0, 90).replace(/\s+\S*$/, '');
+  else if (truncated && !/[\s.!?,;:)\]}]$/.test(out)) {
+    out = out.replace(/\s+\S*$/, '');
+  }
+  return out.trimEnd();
+}
+
+/**
+ * Asks for a continuation of `prefix`.
+ *
+ * Cancels whatever was already in flight: the caller types faster than the
+ * model answers, and a stale suggestion is worse than none.
+ */
+async function complete({ prefix, suffix, model }) {
+  if (!prefix || !prefix.trim()) return '';
+
+  if (pending) pending.abort();
+  const controller = new AbortController();
+  pending = controller;
+
+  const timer = setTimeout(() => controller.abort(), COMPLETE_TIMEOUT_MS);
+  try {
+    const { prompt, stop } = buildRequest({ prefix, suffix, model });
+    const res = await fetch(`${HOST}/api/generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      signal: controller.signal,
+      body: JSON.stringify({
+        model,
+        prompt,
+        // Skips the chat template, so the model continues rather than replies.
+        raw: true,
+        stream: false,
+        options: {
+          // Short and fairly literal: this is a completion, not an essay.
+          num_predict: 24,
+          temperature: 0.15,
+          stop,
+        },
+      }),
+    });
+    if (!res.ok) return '';
+    const data = await res.json();
+    return tidy(data.response, prefix, data.done_reason === 'length');
+  } catch (_) {
+    return ''; // aborted, unreachable, or malformed -- all mean "no suggestion"
+  } finally {
+    clearTimeout(timer);
+    if (pending === controller) pending = null;
+  }
+}
+
+/**
+ * Turns a description of some maths into LaTeX.
+ *
+ * Unlike autocomplete this is a real instruction, so it goes through the chat
+ * template rather than fill-in-the-middle -- the model is being asked a
+ * question, not continuing a sentence.
+ */
+async function toLatex({ text, model }) {
+  if (!text || !text.trim()) return '';
+
+  const prompt = 'Write the LaTeX for the following, and reply with the LaTeX '
+    + 'only -- no explanation, no dollar signs, no code fences.\n\n'
+    + `${text.trim()}\n`;
+
+  try {
+    const res = await withTimeout(`${HOST}/api/generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model,
+        prompt,
+        stream: false,
+        options: { num_predict: 120, temperature: 0.1 },
+      }),
+    }, 20000);
+    if (!res.ok) return '';
+    const data = await res.json();
+
+    // Models wrap the answer in fences, dollars or \[ \] however firmly you
+    // ask them not to. The caller supplies its own delimiters.
+    return String(data.response || '')
+      .replace(/```[a-z]*\n?/gi, '')
+      .replace(/```/g, '')
+      .trim()
+      .replace(/^\\\[|\\\]$/g, '')
+      .replace(/^\\\(|\\\)$/g, '')
+      .trim()
+      .replace(/^\$+|\$+$/g, '')
+      .trim();
+  } catch (_) {
+    return '';
+  }
+}
+
+module.exports = {
+  status, complete, toLatex, pickDefault, trimOverlap, tidy, HOST,
+};

package/src/editor/entry.js

@@ -10,7 +10,7 @@
  * @codemirror/language-data, which loads grammars with dynamic import -- that
  * would leave the bundle with chunks it cannot fetch over file://.
  */
-import { EditorState, StateField, RangeSetBuilder, Prec } from '@codemirror/state';
+import { EditorState, StateField, StateEffect, RangeSetBuilder, Prec } from '@codemirror/state';
 import {
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
 } from '@codemirror/view';
@@ -23,6 +23,9 @@ import {
   LanguageDescription,
 } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
+import {
+  search, searchKeymap, highlightSelectionMatches, openSearchPanel,
+} from '@codemirror/search';
 
 import { python } from '@codemirror/lang-python';
 import { javascript } from '@codemirror/lang-javascript';
@@ -60,10 +63,11 @@ const codeLanguages = [
 ];
 
 window.CM = {
-  EditorState, StateField, RangeSetBuilder, Prec,
+  EditorState, StateField, StateEffect, RangeSetBuilder, Prec,
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
   defaultKeymap, history, historyKeymap, indentWithTab,
   markdown, markdownLanguage,
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
   tags, codeLanguages,
+  search, searchKeymap, highlightSelectionMatches, openSearchPanel,
 };