Automate screenshot SVG generation (#6)

This spares us having to create manual screenshots. Textual has a
"pilot" driver and the ability to export screenshots to SVG or PNG.

Co-authored-by: Claude <noreply@anthropic.com>

Author: wesm

README.md

@@ -9,7 +9,7 @@
 
 A keyboard-driven terminal UI for managing personal finance transactions. Built for users who prefer efficiency and direct control over their financial data.
 
-![moneyflow main screen](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/home-screen.png)
+![moneyflow main screen](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/home-screen.svg)
 
 **Supported Platforms:**
 - ✅ **Monarch Money** - Full integration with editing and sync

docs/guide/editing.md

@@ -62,7 +62,7 @@ This workflow gives you precise control over merchant names while making it easy
 
 Select multiple transactions to edit them all at once:
 
-![Multi-select transactions with checkmarks](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-detail-multi-select.png)
+![Multi-select transactions with checkmarks](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-detail-multi-select.svg)
 
 1. Press ++space++ on each transaction you want to edit
    - A `✓` checkmark appears
@@ -86,7 +86,7 @@ Select multiple transactions to edit them all at once:
 
 From any aggregate view (Merchants, Categories, Groups, Accounts), press ++m++, ++c++, or ++h++ to edit ALL transactions in that group:
 
-![Bulk edit merchant modal](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-bulk-edit-merchant.png)
+![Bulk edit merchant modal](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-bulk-edit-merchant.svg)
 
 **Example: Rename a merchant (all transactions)**
 
@@ -96,7 +96,7 @@ From any aggregate view (Merchants, Categories, Groups, Accounts), press ++m++,
 4. Type "Amazon" and press ++enter++
 5. ALL transactions for that merchant are renamed
 
-![Edit category selection](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-edit-category.png)
+![Edit category selection](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-edit-category.svg)
 
 ### Multi-Select Groups (NEW!)
 

docs/guide/monarch.md

@@ -55,15 +55,15 @@ moneyflow
 
 On first run, you'll be prompted to select a backend:
 
-![Backend selection](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/backend-select.png)
+![Backend selection](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/backend-select.svg)
 
 Select **Monarch Money**.
 
 ### 2. Enter Monarch Money Credentials
 
 You'll see the credential setup screen:
 
-![Credential setup screen](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/monarch-credentials.png)
+![Credential setup screen](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/monarch-credentials.svg)
 
 Enter:
 

docs/guide/navigation.md

@@ -14,21 +14,21 @@ Press `g` to cycle through aggregate views. Aggregate views group your transacti
 <tr>
 <td width="50%">
 <strong>Merchant View</strong><br>
-<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-1-merchants.png" width="100%">
+<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-1-merchants.svg" width="100%">
 </td>
 <td width="50%">
 <strong>Category View</strong><br>
-<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-2-categories.png" width="100%">
+<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-2-categories.svg" width="100%">
 </td>
 </tr>
 <tr>
 <td width="50%">
 <strong>Group View</strong><br>
-<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-3-groups.png" width="100%">
+<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-3-groups.svg" width="100%">
 </td>
 <td width="50%">
 <strong>Account View</strong><br>
-<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-4-accounts.png" width="100%">
+<img src="https://raw.githubusercontent.com/wesm/moneyflow-assets/main/cycle-4-accounts.svg" width="100%">
 </td>
 </tr>
 </table>
@@ -86,13 +86,13 @@ Press `d` to view all transactions ungrouped in chronological order, or press `E
 - Multi-select for bulk operations
 - View full transaction details
 
-![Detail view with indicators](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/detail-view-flags.png)
+![Detail view with indicators](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/detail-view-flags.svg)
 
 ## Drill-Down
 
 From any aggregate view, press `Enter` on a row to drill into it and see the individual transactions that make up that aggregate.
 
-![Merchant view with Amazon highlighted](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-view.png)
+![Merchant view with Amazon highlighted](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-view.svg)
 
 **Example workflow:**
 
@@ -101,7 +101,7 @@ From any aggregate view, press `Enter` on a row to drill into it and see the ind
 3. **Press `Enter`** - Drill down to see transactions
 4. **View results** - All Amazon transactions displayed
 
-![Drilled down into Amazon - transaction detail view](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-detail.png)
+![Drilled down into Amazon - transaction detail view](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-detail.svg)
 
 The breadcrumb shows your current path: `Merchants > Amazon`
 
@@ -124,9 +124,9 @@ Once you've drilled down into a specific item, press `g` to sub-group the filter
 5. **Press `g` again** - Returns to detail view
    - Shows all Amazon transactions ungrouped
 
-![Drilled into Merchant, grouped by Category](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-drill-by-category.png)
+![Drilled into Merchant, grouped by Category](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-drill-by-category.svg)
 
-![Drilled into Amazon, grouped by Account](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-group-by-account.png)
+![Drilled into Amazon, grouped by Account](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-group-by-account.svg)
 
 Sub-grouping helps answer analytical questions like:
 - "How much did I spend on groceries from Amazon?"
@@ -147,7 +147,7 @@ You can drill down from sub-grouped views to add another level of filtering, cre
 4. **View results** - Breadcrumb shows: `Merchants > Amazon > Groceries`
    - Now viewing only Amazon grocery transactions
 
-![Multi-level drill-down breadcrumb](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-multi-level.png)
+![Multi-level drill-down breadcrumb](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/drill-down-multi-level.svg)
 
 This powerful feature lets you combine multiple filters to answer very specific questions about your spending.
 
@@ -213,7 +213,7 @@ moneyflow --month 2025-03  # Load March 2025 only
 
 Press `/` to search and filter transactions by text matching across merchant names, categories, and transaction notes.
 
-![Search modal](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/search-modal.png)
+![Search modal](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/search-modal.svg)
 
 **Using search:**
 
@@ -222,7 +222,7 @@ Press `/` to search and filter transactions by text matching across merchant nam
 3. **Press `Enter`** - Applies the search filter
 4. **Press `Escape`** - Clears search and returns to previous view
 
-![Search results for "coffee"](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-search.png)
+![Search results for "coffee"](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/merchants-search.svg)
 
 Search filters persist as you navigate between different views. The breadcrumb displays "Search: your query" to remind you that search is active. To clear a search, press `/` again and submit an empty search, or press `Escape` if search was your most recent action.
 

docs/index.md

@@ -7,7 +7,7 @@
 
 **Terminal UI for personal finance power users**
 
-![moneyflow terminal UI](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/home-screen.png)
+![moneyflow terminal UI](https://raw.githubusercontent.com/wesm/moneyflow-assets/main/home-screen.svg)
 
 ```bash
 # Install and run

docs/javascripts/lightbox.js

@@ -12,7 +12,7 @@
     overlay.id = 'lightbox-overlay';
     overlay.innerHTML = `
       <div class="lightbox-content">
-        <img id="lightbox-image" src="" alt="">
+        <div id="lightbox-image-container"></div>
         <button id="lightbox-close" aria-label="Close lightbox">&times;</button>
         <div class="lightbox-caption"></div>
       </div>
@@ -55,11 +55,33 @@
   // Open lightbox with image
   function openLightbox(imgSrc, altText) {
     const overlay = document.getElementById('lightbox-overlay') || createLightbox();
-    const lightboxImg = document.getElementById('lightbox-image');
+    const container = document.getElementById('lightbox-image-container');
     const caption = overlay.querySelector('.lightbox-caption');
 
-    lightboxImg.src = imgSrc;
-    lightboxImg.alt = altText;
+    // Clear previous content
+    container.innerHTML = '';
+
+    // Check if it's an SVG
+    if (imgSrc.endsWith('.svg')) {
+      // For SVG, create an img element with specific sizing
+      const img = document.createElement('img');
+      img.src = imgSrc;
+      img.alt = altText;
+      img.id = 'lightbox-image';
+      img.style.width = 'auto';
+      img.style.height = 'auto';
+      img.style.maxWidth = '100%';
+      img.style.maxHeight = '100%';
+      container.appendChild(img);
+    } else {
+      // For PNG/JPG, use regular img tag
+      const img = document.createElement('img');
+      img.src = imgSrc;
+      img.alt = altText;
+      img.id = 'lightbox-image';
+      container.appendChild(img);
+    }
+
     caption.textContent = altText;
 
     overlay.classList.add('active');

docs/stylesheets/extra.css

@@ -208,10 +208,21 @@
   align-items: center;
 }
 
+/* Lightbox image container */
+#lightbox-image-container {
+  max-width: 75vw;
+  max-height: 70vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Lightbox image */
 #lightbox-image {
   max-width: 100%;
-  max-height: 85vh;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
   border-radius: 4px;
   box-shadow: 0 8px 32px rgba(0,0,0,0.5);
@@ -255,8 +266,9 @@
     background-color: rgba(0, 0, 0, 0.98);
   }
 
-  #lightbox-image {
-    max-height: 90vh;
+  #lightbox-image-container {
+    max-width: 85vw;
+    max-height: 70vh;
   }
 
   #lightbox-close {