markupr 2.1.8

package/electron-builder.yml

@@ -0,0 +1,140 @@
+# electron-builder.yml
+# macOS Distribution Configuration for markupr
+# Version: 0.4.0
+
+appId: com.eddiesanjuan.markupr
+productName: markupr
+executableName: markupr
+copyright: Copyright 2026 Eddie San Juan
+
+directories:
+  output: release
+  buildResources: build
+
+# Rebuild native modules for Electron's Node.js version
+npmRebuild: true
+
+files:
+  - dist/**/*
+  - package.json
+
+extraResources:
+  - from: assets
+    to: assets
+    filter:
+      - "**/*"
+  # Windows taskbar icons (overlay and thumbnail toolbar)
+  - from: build
+    to: build
+    filter:
+      - "overlay-*.png"
+      - "toolbar-*.png"
+
+# =============================================================================
+# macOS Configuration
+# =============================================================================
+mac:
+  category: public.app-category.productivity
+  icon: build/icon.icns
+  hardenedRuntime: true
+  gatekeeperAssess: false
+  entitlements: build/entitlements.mac.plist
+  entitlementsInherit: build/entitlements.mac.inherit.plist
+  # Hide from dock and Cmd+Tab - pure menu bar app
+  extendInfo:
+    LSUIElement: true
+  target:
+    - target: dmg
+      arch:
+        - x64
+        - arm64
+    - target: zip
+      arch:
+        - x64
+        - arm64
+
+# =============================================================================
+# DMG Installer Configuration
+# =============================================================================
+dmg:
+  background: build/dmg-background.png
+  iconSize: 100
+  iconTextSize: 12
+  window:
+    width: 660
+    height: 400
+  contents:
+    - x: 180
+      y: 170
+      type: file
+    - x: 480
+      y: 170
+      type: link
+      path: /Applications
+  title: "Install markupr"
+  artifactName: "markupr-${version}-${arch}.dmg"
+
+# =============================================================================
+# Windows Configuration
+# =============================================================================
+win:
+  icon: build/icon.ico
+  target:
+    - target: nsis
+      arch: [x64]
+    - target: portable
+      arch: [x64]
+  publisherName: "markupr"
+  verifyUpdateCodeSignature: false
+  # File associations
+  fileAssociations:
+    - ext: markupr
+      name: markupr Session
+      description: markupr feedback session file
+      icon: build/icon.ico
+      role: Editor
+
+nsis:
+  oneClick: false
+  perMachine: true
+  allowElevation: true
+  allowToChangeInstallationDirectory: true
+  installerIcon: build/icon.ico
+  uninstallerIcon: build/icon.ico
+  installerHeader: build/installer-header.bmp
+  installerSidebar: build/installer-sidebar.bmp
+  license: LICENSE
+  createDesktopShortcut: true
+  createStartMenuShortcut: true
+  shortcutName: "markupr"
+  artifactName: "markupr-Setup-${version}.exe"
+  include: build/installer.nsh
+  deleteAppDataOnUninstall: false
+
+# =============================================================================
+# Linux Configuration (for future use)
+# =============================================================================
+linux:
+  target:
+    - target: AppImage
+      arch:
+        - x64
+    - target: deb
+      arch:
+        - x64
+  category: Development
+  icon: build/icons
+
+# =============================================================================
+# Code Signing & Notarization
+# =============================================================================
+afterSign: scripts/notarize.cjs
+
+# =============================================================================
+# Publishing Configuration
+# =============================================================================
+publish:
+  provider: github
+  owner: eddiesanjuan
+  repo: markupr
+  releaseType: release

package/electron.vite.config.ts

@@ -0,0 +1,63 @@
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  main: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      outDir: 'dist/main',
+      lib: {
+        entry: resolve(__dirname, 'src/main/index.ts'),
+        formats: ['es']
+      },
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/main/index.ts')
+        },
+        output: {
+          format: 'es',
+          entryFileNames: '[name].mjs'
+        }
+      }
+    }
+  },
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      outDir: 'dist/preload',
+      lib: {
+        entry: resolve(__dirname, 'src/preload/index.ts'),
+        formats: ['es']
+      },
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/preload/index.ts')
+        },
+        output: {
+          format: 'es',
+          entryFileNames: '[name].mjs'
+        }
+      }
+    }
+  },
+  renderer: {
+    root: 'src/renderer',
+    build: {
+      outDir: 'dist/renderer',
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'src/renderer/index.html')
+        }
+      }
+    },
+    plugins: [react()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@renderer': resolve(__dirname, 'src/renderer'),
+        '@shared': resolve(__dirname, 'src/shared')
+      }
+    }
+  }
+})

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "markupr",
+  "version": "2.1.8",
+  "description": "AI-ready developer feedback capture tool with voice narration and intelligent screenshots",
+  "type": "module",
+  "main": "dist/main/index.mjs",
+  "author": "Eddie San Juan",
+  "license": "MIT",
+  "homepage": "https://markupr.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eddiesanjuan/markupr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eddiesanjuan/markupr/issues"
+  },
+  "keywords": [
+    "markupr",
+    "feedback",
+    "voice",
+    "transcription",
+    "screenshot",
+    "electron",
+    "ai",
+    "developer-tools",
+    "menu-bar",
+    "macos",
+    "windows",
+    "whisper"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "postinstall": "node scripts/postinstall.mjs",
+    "rebuild": "electron-rebuild",
+    "dev": "electron-vite dev",
+    "build": "node scripts/build.mjs",
+    "start": "node site/server.js",
+    "build:desktop": "electron-vite build",
+    "preview": "electron-vite preview",
+    "package": "electron-builder --config electron-builder.yml",
+    "package:mac": "electron-builder --mac --config electron-builder.yml",
+    "package:mac:unsigned": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --mac --config electron-builder.yml",
+    "package:win": "electron-builder --win --config electron-builder.yml",
+    "dist:mac": "npm run build && electron-builder --mac --config electron-builder.yml",
+    "dist:mac:universal": "npm run build && electron-builder --mac --universal --config electron-builder.yml",
+    "dist:mac:x64": "npm run build && electron-builder --mac --x64 --config electron-builder.yml",
+    "dist:mac:arm64": "npm run build && electron-builder --mac --arm64 --config electron-builder.yml",
+    "dist:win": "electron-builder --win",
+    "dist:win:portable": "electron-builder --win portable",
+    "dist:win:nsis": "electron-builder --win nsis",
+    "package:linux": "electron-builder --linux --config electron-builder.yml",
+    "release": "electron-builder --publish always --config electron-builder.yml",
+    "test": "vitest",
+    "test:unit": "vitest tests/unit",
+    "test:integration": "vitest tests/integration",
+    "test:e2e": "vitest tests/e2e",
+    "test:ci": "vitest run --coverage",
+    "test:coverage": "vitest --coverage",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "audit": "npm audit --omit=dev --audit-level=high",
+    "setup:markupr": "bash ./scripts/setup-markupr.sh",
+    "typecheck": "tsc --noEmit",
+    "generate:icons": "node scripts/generate-icons.mjs",
+    "generate:tray-icons": "node scripts/generate-tray-icons.mjs",
+    "generate:installer-images": "node scripts/generate-installer-images.cjs",
+    "prebuild:win": "npm run generate:installer-images"
+  },
+  "devDependencies": {
+    "@electron/notarize": "^2.2.0",
+    "@electron/rebuild": "^4.0.3",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/coverage-v8": "^1.6.1",
+    "electron": "^28.0.0",
+    "electron-builder": "^24.0.0",
+    "electron-vite": "^2.0.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "png2icons": "^2.0.1",
+    "sharp": "^0.34.5",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.73.0",
+    "electron-log": "^5.4.3",
+    "electron-store": "^11.0.2",
+    "electron-updater": "^6.7.3",
+    "keytar": "^7.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "whisper-node": "^1.1.1"
+  },
+  "build": {
+    "extends": null
+  }
+}

package/railway.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://railway.com/railway.schema.json",
+  "build": {
+    "builder": "NIXPACKS"
+  },
+  "deploy": {
+    "startCommand": "node site/server.js",
+    "healthcheckPath": "/",
+    "restartPolicyType": "ON_FAILURE",
+    "restartPolicyMaxRetries": 3
+  }
+}

package/scripts/build.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+import { spawnSync } from 'node:child_process';
+import { cpSync, existsSync, mkdirSync, rmSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = join(__dirname, '..');
+const siteDir = join(repoRoot, 'site');
+const distDir = join(repoRoot, 'dist');
+
+function isRailwayEnvironment() {
+  return Object.keys(process.env).some((key) => key.startsWith('RAILWAY_'));
+}
+
+function run(command, args) {
+  const result = spawnSync(command, args, {
+    stdio: 'inherit',
+    env: process.env,
+    cwd: repoRoot,
+    shell: true,
+  });
+  if (result.status !== 0) {
+    process.exit(result.status ?? 1);
+  }
+}
+
+if (!isRailwayEnvironment()) {
+  run('npx', ['electron-vite', 'build']);
+  process.exit(0);
+}
+
+console.log('[build] Railway environment detected. Building landing page artifact from /site.');
+rmSync(distDir, { recursive: true, force: true });
+mkdirSync(distDir, { recursive: true });
+
+const sourceIndex = join(siteDir, 'index.html');
+if (!existsSync(sourceIndex)) {
+  console.error('[build] Missing site/index.html; cannot produce landing artifact.');
+  process.exit(1);
+}
+
+cpSync(sourceIndex, join(distDir, 'index.html'));
+
+const optionalAssetsDir = join(siteDir, 'assets');
+if (existsSync(optionalAssetsDir)) {
+  cpSync(optionalAssetsDir, join(distDir, 'assets'), { recursive: true });
+}
+
+console.log('[build] Landing page artifact ready at /dist/index.html');

package/scripts/generate-icons.mjs

@@ -0,0 +1,314 @@
+#!/usr/bin/env node
+/**
+ * markupr Icon Generation Script
+ *
+ * Generates all app icons and brand assets from SVG sources using sharp.
+ *
+ * Usage: node scripts/generate-icons.mjs
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import sharp from 'sharp';
+
+// Get __dirname equivalent in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Paths
+const PROJECT_ROOT = path.join(__dirname, '..');
+const SVG_SOURCE_DIR = path.join(PROJECT_ROOT, 'assets', 'svg-source');
+const BUILD_DIR = path.join(PROJECT_ROOT, 'build');
+const ASSETS_DIR = path.join(PROJECT_ROOT, 'assets');
+const RENDERER_ASSETS_DIR = path.join(PROJECT_ROOT, 'src', 'renderer', 'assets');
+
+// Ensure directories exist
+[BUILD_DIR, ASSETS_DIR, RENDERER_ASSETS_DIR, SVG_SOURCE_DIR].forEach((dir) => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+});
+
+// Tray icon sizes
+const TRAY_SIZES = { normal: 22, retina: 44 };
+
+/**
+ * Convert SVG to PNG at specified size using sharp
+ */
+async function svgToPng(svgPath, outputPath, width, height = width) {
+  const svgBuffer = fs.readFileSync(svgPath);
+
+  await sharp(svgBuffer)
+    .resize(width, height, {
+      fit: 'contain',
+      background: { r: 0, g: 0, b: 0, alpha: 0 },
+    })
+    .png()
+    .toFile(outputPath);
+
+  console.log(`  Generated: ${path.basename(outputPath)} (${width}x${height})`);
+}
+
+/**
+ * Generate main app icon in all sizes
+ */
+async function generateAppIcon() {
+  console.log('\n=== Generating App Icon ===');
+
+  const svgPath = path.join(SVG_SOURCE_DIR, 'icon.svg');
+
+  if (!fs.existsSync(svgPath)) {
+    console.error('Error: icon.svg not found in assets/svg-source/');
+    return false;
+  }
+
+  // Generate master 1024x1024 PNG
+  const masterPath = path.join(BUILD_DIR, 'icon.png');
+  await svgToPng(svgPath, masterPath, 1024);
+
+  // Generate individual sizes for iconset
+  const iconsetDir = path.join(BUILD_DIR, 'icon.iconset');
+  if (fs.existsSync(iconsetDir)) {
+    fs.rmSync(iconsetDir, { recursive: true });
+  }
+  fs.mkdirSync(iconsetDir, { recursive: true });
+
+  // macOS iconset naming convention
+  const macOsSizes = [
+    { size: 16, suffix: '16x16' },
+    { size: 32, suffix: '16x16@2x' },
+    { size: 32, suffix: '32x32' },
+    { size: 64, suffix: '32x32@2x' },
+    { size: 128, suffix: '128x128' },
+    { size: 256, suffix: '128x128@2x' },
+    { size: 256, suffix: '256x256' },
+    { size: 512, suffix: '256x256@2x' },
+    { size: 512, suffix: '512x512' },
+    { size: 1024, suffix: '512x512@2x' },
+  ];
+
+  for (const { size, suffix } of macOsSizes) {
+    const outputPath = path.join(iconsetDir, `icon_${suffix}.png`);
+    await svgToPng(svgPath, outputPath, size);
+  }
+
+  // Generate .icns using iconutil (macOS only)
+  const icnsPath = path.join(BUILD_DIR, 'icon.icns');
+  if (process.platform === 'darwin') {
+    try {
+      execSync(`iconutil -c icns "${iconsetDir}" -o "${icnsPath}"`);
+      console.log(`  Generated: icon.icns`);
+    } catch (error) {
+      console.error('  Warning: Could not generate .icns (iconutil failed)');
+    }
+  } else {
+    console.log('  Skipping .icns generation (not on macOS)');
+  }
+
+  // Generate Windows .ico
+  await generateWindowsIcon(svgPath);
+
+  return true;
+}
+
+/**
+ * Generate Windows .ico file by creating a multi-size PNG fallback
+ */
+async function generateWindowsIcon(svgPath) {
+  console.log('\n=== Generating Windows Icon Assets ===');
+
+  const sizes = [16, 24, 32, 48, 64, 128, 256];
+
+  for (const size of sizes) {
+    const outputPath = path.join(BUILD_DIR, `icon-${size}.png`);
+    await svgToPng(svgPath, outputPath, size);
+  }
+
+  // Try to use png2icons if available
+  try {
+    const png2icons = await import('png2icons');
+    const input = fs.readFileSync(path.join(BUILD_DIR, 'icon.png'));
+    const output = png2icons.default.createICO(input, png2icons.default.BICUBIC2, 0, true, true);
+    fs.writeFileSync(path.join(BUILD_DIR, 'icon.ico'), output);
+    console.log(`  Generated: icon.ico`);
+  } catch {
+    console.log('  Note: png2icons not installed. Windows icon sizes generated as PNGs.');
+    console.log('  Run: npm install --save-dev png2icons');
+  }
+}
+
+/**
+ * Generate tray icons for all states
+ */
+async function generateTrayIcons() {
+  console.log('\n=== Generating Tray Icons ===');
+
+  const states = ['tray-icon', 'tray-icon-recording', 'tray-icon-processing'];
+
+  for (const state of states) {
+    const svgPath = path.join(SVG_SOURCE_DIR, `${state}.svg`);
+
+    if (!fs.existsSync(svgPath)) {
+      console.log(`  Skipping ${state}.svg (not found)`);
+      continue;
+    }
+
+    // Generate normal size (22x22)
+    const normalPath = path.join(ASSETS_DIR, `${state}.png`);
+    await svgToPng(svgPath, normalPath, TRAY_SIZES.normal);
+
+    // Generate Template version (for macOS auto-tinting)
+    const templatePath = path.join(ASSETS_DIR, `${state}Template.png`);
+    await svgToPng(svgPath, templatePath, TRAY_SIZES.normal);
+
+    // Generate @2x retina versions
+    const retina2xPath = path.join(ASSETS_DIR, `${state}@2x.png`);
+    await svgToPng(svgPath, retina2xPath, TRAY_SIZES.retina);
+
+    const template2xPath = path.join(ASSETS_DIR, `${state}Template@2x.png`);
+    await svgToPng(svgPath, template2xPath, TRAY_SIZES.retina);
+  }
+
+  // Generate processing animation frames
+  await generateProcessingFrames();
+}
+
+/**
+ * Generate processing animation frames
+ */
+async function generateProcessingFrames() {
+  console.log('\n=== Generating Processing Animation Frames ===');
+
+  const baseSvgPath = path.join(SVG_SOURCE_DIR, 'tray-icon-processing.svg');
+
+  if (!fs.existsSync(baseSvgPath)) {
+    console.log('  Skipping processing frames (SVG not found)');
+    return;
+  }
+
+  const baseSvg = fs.readFileSync(baseSvgPath, 'utf8');
+
+  // Generate 4 frames with rotated spinner
+  for (let frame = 0; frame < 4; frame++) {
+    const rotation = frame * 90;
+
+    // Modify SVG to rotate the spinner
+    const frameSvg = baseSvg.replace(
+      'stroke-dasharray="10 6"',
+      `stroke-dasharray="10 6" transform="rotate(${rotation}, 16, 5)"`
+    );
+
+    const tempSvgPath = path.join(SVG_SOURCE_DIR, `tray-processing-frame-${frame}.svg`);
+    fs.writeFileSync(tempSvgPath, frameSvg);
+
+    // Generate PNGs
+    const normalPath = path.join(ASSETS_DIR, `tray-processing-${frame}.png`);
+    const templatePath = path.join(ASSETS_DIR, `tray-processing-${frame}Template.png`);
+    const retina2xPath = path.join(ASSETS_DIR, `tray-processing-${frame}@2x.png`);
+    const template2xPath = path.join(ASSETS_DIR, `tray-processing-${frame}Template@2x.png`);
+
+    await svgToPng(tempSvgPath, normalPath, TRAY_SIZES.normal);
+    await svgToPng(tempSvgPath, templatePath, TRAY_SIZES.normal);
+    await svgToPng(tempSvgPath, retina2xPath, TRAY_SIZES.retina);
+    await svgToPng(tempSvgPath, template2xPath, TRAY_SIZES.retina);
+
+    // Cleanup temp SVG
+    fs.unlinkSync(tempSvgPath);
+  }
+}
+
+/**
+ * Generate DMG background images
+ */
+async function generateDmgBackground() {
+  console.log('\n=== Generating DMG Background ===');
+
+  const svgPath = path.join(SVG_SOURCE_DIR, 'dmg-background.svg');
+
+  if (!fs.existsSync(svgPath)) {
+    console.log('  Skipping DMG background (SVG not found)');
+    return;
+  }
+
+  // Standard resolution (660x400)
+  const normalPath = path.join(BUILD_DIR, 'dmg-background.png');
+  await svgToPng(svgPath, normalPath, 660, 400);
+
+  // Retina resolution (1320x800)
+  const retinaPath = path.join(BUILD_DIR, 'dmg-background@2x.png');
+  await svgToPng(svgPath, retinaPath, 1320, 800);
+}
+
+/**
+ * Check logo SVGs exist
+ */
+async function checkLogos() {
+  console.log('\n=== Checking Logo SVGs ===');
+
+  const logos = ['logo.svg', 'logo-dark.svg'];
+
+  for (const logo of logos) {
+    const srcPath = path.join(RENDERER_ASSETS_DIR, logo);
+    if (fs.existsSync(srcPath)) {
+      console.log(`  Found: ${logo}`);
+    } else {
+      console.log(`  Missing: ${logo}`);
+    }
+  }
+}
+
+/**
+ * Generate favicons for web use
+ */
+async function generateFavicons() {
+  console.log('\n=== Generating Favicons ===');
+
+  const svgPath = path.join(SVG_SOURCE_DIR, 'icon.svg');
+
+  if (!fs.existsSync(svgPath)) {
+    return;
+  }
+
+  const sizes = [16, 32, 48, 64, 180, 192, 512];
+
+  for (const size of sizes) {
+    const outputPath = path.join(BUILD_DIR, `favicon-${size}.png`);
+    await svgToPng(svgPath, outputPath, size);
+  }
+}
+
+/**
+ * Main execution
+ */
+async function main() {
+  console.log('=========================================');
+  console.log('  markupr Icon Generator (sharp)');
+  console.log('=========================================');
+
+  try {
+    await generateAppIcon();
+    await generateTrayIcons();
+    await generateDmgBackground();
+    await checkLogos();
+    await generateFavicons();
+
+    console.log('\n=========================================');
+    console.log('  Icon generation complete!');
+    console.log('=========================================\n');
+
+    console.log('Generated files:');
+    console.log('  build/icon.png           - Master app icon (1024x1024)');
+    console.log('  build/icon.icns          - macOS icon bundle');
+    console.log('  build/icon-*.png         - Windows icon sizes');
+    console.log('  build/dmg-background.png - DMG installer background');
+    console.log('  assets/tray-*.png        - Menu bar tray icons');
+    console.log('  src/renderer/assets/     - In-app logo SVGs');
+  } catch (error) {
+    console.error('\nError during icon generation:', error);
+    process.exit(1);
+  }
+}
+
+main();