Redesign app logo and add custom NSIS installer branding

New minimal dark squircle icon with refined Sn monogram, inset
depth, dual-corner border lighting, and letter shadows. Add
branded installer sidebar, header, and custom NSIS include with
welcome/finish page text.

Author: Snowy7

build/icon-512.png

@@ -0,0 +1,28 @@
+; SnCode — Custom NSIS installer configuration
+; Included by electron-builder via the "include" option in package.json
+
+!macro customHeader
+  ; ── Welcome page ──
+  !ifndef MUI_WELCOMEPAGE_TITLE
+    !define MUI_WELCOMEPAGE_TITLE "Welcome to SnCode"
+  !endif
+  !ifndef MUI_WELCOMEPAGE_TEXT
+    !define MUI_WELCOMEPAGE_TEXT "SnCode is your AI-powered desktop coding agent.$\r$\n$\r$\nThis wizard will guide you through the installation.$\r$\nClick Next to continue."
+  !endif
+
+  ; ── Finish page ──
+  !ifndef MUI_FINISHPAGE_TITLE
+    !define MUI_FINISHPAGE_TITLE "SnCode is Ready"
+  !endif
+  !ifndef MUI_FINISHPAGE_TEXT
+    !define MUI_FINISHPAGE_TEXT "SnCode has been installed successfully.$\r$\n$\r$\nClick Finish to close the wizard and start coding."
+  !endif
+
+  ; ── Abort warning ──
+  !ifndef MUI_ABORTWARNING
+    !define MUI_ABORTWARNING
+  !endif
+  !ifndef MUI_ABORTWARNING_TEXT
+    !define MUI_ABORTWARNING_TEXT "Are you sure you want to cancel the SnCode installation?"
+  !endif
+!macroend

build/icon.ico

@@ -100,7 +100,13 @@
       "perMachine": false,
       "allowToChangeInstallationDirectory": true,
       "deleteAppDataOnUninstall": false,
-      "shortcutName": "SnCode"
+      "shortcutName": "SnCode",
+      "installerIcon": "build/icon.ico",
+      "uninstallerIcon": "build/icon.ico",
+      "installerSidebar": "build/installerSidebar.bmp",
+      "uninstallerSidebar": "build/installerSidebar.bmp",
+      "installerHeader": "build/installerHeader.bmp",
+      "include": "build/installer.nsh"
     },
     "mac": {
       "target": [

build/icon.png

@@ -1,117 +1,237 @@
 #!/usr/bin/env node
 /**
- * Generate SnCode app icons for all platforms.
- * Creates build/icon.png (1024x1024), build/icon.ico, build/icon.icns
+ * Generate SnCode app icons + Windows installer assets.
  *
- * Design: Dark rounded-rectangle with a stylized "Sn" monogram + terminal cursor.
- * Matches the app's dark neutral palette (#141414 base).
+ * Output (all in build/):
+ *   icon.png               1024x1024  All platforms
+ *   icon-512.png            512x512   Linux
+ *   icon.ico                multi-res Windows
+ *   installerSidebar.bmp    164x314   NSIS sidebar
+ *   installerHeader.bmp     150x57    NSIS header
+ *
+ * Design: Inset dark squircle, "Sn" monogram with depth. Monochromatic.
  */
 
 import sharp from "sharp";
 import pngToIco from "png-to-ico";
-import { writeFileSync, mkdirSync } from "fs";
+import { writeFileSync, mkdirSync, unlinkSync } from "fs";
 import { join, dirname } from "path";
 import { fileURLToPath } from "url";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const buildDir = join(__dirname, "..", "build");
 mkdirSync(buildDir, { recursive: true });
 
+/* ─────────────────────────── SVGs ─────────────────────────── */
+
 const SIZE = 1024;
 
-// SVG icon: dark rounded square with "Sn" text and a blinking cursor accent
-const svg = `
+const logoSvg = `
 <svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">
   <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#1e1e1e"/>
-      <stop offset="100%" stop-color="#111111"/>
-    </linearGradient>
-    <linearGradient id="accent" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#e0e0e0"/>
-      <stop offset="100%" stop-color="#a0a0a0"/>
+    <linearGradient id="bg" x1="0" y1="0" x2="0.8" y2="1">
+      <stop offset="0%" stop-color="#1c1c20"/>
+      <stop offset="100%" stop-color="#0e0e11"/>
     </linearGradient>
-    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="4" stdDeviation="12" flood-color="#000" flood-opacity="0.5"/>
+
+    <!-- Border stroke glow at corners -->
+    <radialGradient id="borderTR" cx="0.88" cy="0.12" r="0.4">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+      <stop offset="30%" stop-color="#ffffff" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="borderBL" cx="0.12" cy="0.88" r="0.4">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
+      <stop offset="30%" stop-color="#ffffff" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Edge vignette for inset depth -->
+    <radialGradient id="vignette" cx="0.5" cy="0.48" r="0.52">
+      <stop offset="0%" stop-color="#000000" stop-opacity="0"/>
+      <stop offset="75%" stop-color="#000000" stop-opacity="0"/>
+      <stop offset="100%" stop-color="#000000" stop-opacity="0.3"/>
+    </radialGradient>
+
+    <!-- Subtle top-center light for dimension -->
+    <radialGradient id="topLight" cx="0.5" cy="0.25" r="0.45">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.03"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+
+    <!-- Text depth: shadow beneath letters -->
+    <filter id="td" x="-5%" y="-5%" width="110%" height="120%">
+      <feDropShadow dx="0" dy="5" stdDeviation="5" flood-color="#000" flood-opacity="0.7"/>
     </filter>
   </defs>
 
-  <!-- Background rounded square -->
-  <rect x="64" y="64" width="896" height="896" rx="180" ry="180"
-        fill="url(#bg)" filter="url(#shadow)" stroke="#2a2a2a" stroke-width="3"/>
-
-  <!-- Subtle inner border glow -->
-  <rect x="80" y="80" width="864" height="864" rx="168" ry="168"
-        fill="none" stroke="#ffffff08" stroke-width="2"/>
-
-  <!-- Terminal angle bracket ">" on the left -->
-  <polyline points="220,340 360,512 220,684"
-            fill="none" stroke="#555555" stroke-width="48"
-            stroke-linecap="round" stroke-linejoin="round"/>
-
-  <!-- "Sn" text - the brand -->
-  <text x="520" y="590" font-family="'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
-        font-size="320" font-weight="700" letter-spacing="-8">
-    <tspan fill="#ffffff">S</tspan><tspan fill="#555555">n</tspan>
-  </text>
+  <!-- Background squircle (inset — no outer shadow) -->
+  <rect x="64" y="64" width="896" height="896" rx="212" ry="212" fill="url(#bg)"/>
+
+  <!-- Vignette darkening at edges -->
+  <rect x="64" y="64" width="896" height="896" rx="212" ry="212" fill="url(#vignette)"/>
+
+  <!-- Subtle top light -->
+  <rect x="64" y="64" width="896" height="896" rx="212" ry="212" fill="url(#topLight)"/>
+
+  <!-- Border: top-right corner glow -->
+  <rect x="62" y="62" width="900" height="900" rx="214" ry="214"
+        fill="none" stroke="url(#borderTR)" stroke-width="8"/>
+  <!-- Border: bottom-left corner glow -->
+  <rect x="62" y="62" width="900" height="900" rx="214" ry="214"
+        fill="none" stroke="url(#borderBL)" stroke-width="8"/>
+
+  <!-- "S" — bold, white, with depth -->
+  <text x="240" y="695"
+        font-family="Bahnschrift,'SF Pro Display','Segoe UI',sans-serif"
+        font-size="540" font-weight="700" fill="#ffffff"
+        filter="url(#td)" letter-spacing="-10">S</text>
+
+  <!-- "n" — visible gray, with depth -->
+  <text x="565" y="695"
+        font-family="Bahnschrift,'SF Pro Display','Segoe UI',sans-serif"
+        font-size="380" font-weight="600" fill="#b4b4bc"
+        filter="url(#td)" letter-spacing="-4">n</text>
+</svg>`;
+
+// NSIS sidebar: 164x314 — centered branding
+const sidebarSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="164" height="314" viewBox="0 0 164 314">
+  <defs>
+    <linearGradient id="sbg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#1a1a1e"/>
+      <stop offset="100%" stop-color="#0e0e11"/>
+    </linearGradient>
+  </defs>
+  <rect width="164" height="314" fill="url(#sbg)"/>
+
+  <!-- Right-edge separator -->
+  <rect x="162" y="0" width="2" height="314" fill="rgba(255,255,255,0.08)"/>
+
+  <!-- Large "Sn" mark, centered -->
+  <text x="82" y="125" text-anchor="middle"
+        font-family="Bahnschrift,'Segoe UI',sans-serif"
+        font-size="80" font-weight="700" fill="#ffffff">S<tspan font-size="55" font-weight="600" fill="#b4b4bc">n</tspan></text>
+
+  <!-- Separator -->
+  <rect x="56" y="142" width="52" height="1" rx="0.5" fill="rgba(255,255,255,0.1)"/>
+
+  <!-- App name, centered -->
+  <text x="82" y="170" text-anchor="middle"
+        font-family="Bahnschrift,'Segoe UI',sans-serif"
+        font-size="18" font-weight="600" fill="#d4d4d8" letter-spacing="2">SnCode</text>
+
+  <!-- Tagline, centered -->
+  <text x="82" y="192" text-anchor="middle"
+        font-family="Bahnschrift,'Segoe UI',sans-serif"
+        font-size="11" fill="#71717a" letter-spacing="0.5">AI Coding Agent</text>
+
+  <!-- Version, bottom center -->
+  <text x="82" y="296" text-anchor="middle"
+        font-family="Bahnschrift,'Segoe UI',sans-serif"
+        font-size="10" fill="#52525b">v0.2.0</text>
+</svg>`;
+
+// NSIS header: 150x57 — clean centered bar
+const headerSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="57" viewBox="0 0 150 57">
+  <defs>
+    <linearGradient id="hbg" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#1a1a1e"/>
+      <stop offset="100%" stop-color="#131316"/>
+    </linearGradient>
+  </defs>
+  <rect width="150" height="57" fill="url(#hbg)"/>
+
+  <!-- Bottom separator -->
+  <rect x="0" y="55" width="150" height="2" fill="rgba(255,255,255,0.08)"/>
+
+  <!-- "SnCode" centered -->
+  <text x="75" y="36" text-anchor="middle"
+        font-family="Bahnschrift,'Segoe UI',sans-serif"
+        font-size="22" font-weight="600" fill="#e4e4e7" letter-spacing="1.5">SnCode</text>
+</svg>`;
+
+/* ─────────── BMP conversion (24-bit, no alpha) ─────────── */
+
+function rawToBmp24(rgba, w, h, bgR = 0x0e, bgG = 0x0e, bgB = 0x11) {
+  const rowBytes = w * 3;
+  const pad = (4 - (rowBytes % 4)) % 4;
+  const stride = rowBytes + pad;
+  const dataSize = stride * h;
+  const buf = Buffer.alloc(14 + 40 + dataSize);
+
+  buf.write("BM", 0);
+  buf.writeUInt32LE(buf.length, 2);
+  buf.writeUInt32LE(0, 6);
+  buf.writeUInt32LE(54, 10);
+
+  buf.writeUInt32LE(40, 14);
+  buf.writeInt32LE(w, 18);
+  buf.writeInt32LE(h, 22);
+  buf.writeUInt16LE(1, 26);
+  buf.writeUInt16LE(24, 28);
+  buf.writeUInt32LE(0, 30);
+  buf.writeUInt32LE(dataSize, 34);
+  buf.writeInt32LE(2835, 38);
+  buf.writeInt32LE(2835, 42);
+
+  for (let y = 0; y < h; y++) {
+    const srcY = (h - 1 - y) * w * 4;
+    const dstY = 54 + y * stride;
+    for (let x = 0; x < w; x++) {
+      const si = srcY + x * 4;
+      const di = dstY + x * 3;
+      const a = rgba[si + 3] / 255;
+      buf[di + 0] = Math.round(rgba[si + 2] * a + bgB * (1 - a));
+      buf[di + 1] = Math.round(rgba[si + 1] * a + bgG * (1 - a));
+      buf[di + 2] = Math.round(rgba[si + 0] * a + bgR * (1 - a));
+    }
+  }
+  return buf;
+}
 
-  <!-- Cursor line (blinking accent) -->
-  <rect x="808" y="380" width="6" height="260" rx="3"
-        fill="#666666"/>
-</svg>
-`;
+/* ──────────────────── Generation ──────────────────── */
 
 async function generate() {
-  console.log("Generating SnCode icons...");
+  console.log("Generating SnCode icons + installer assets…\n");
 
-  // Generate 1024x1024 PNG
-  const png1024 = await sharp(Buffer.from(svg))
-    .resize(1024, 1024)
-    .png()
-    .toBuffer();
+  const png1024 = await sharp(Buffer.from(logoSvg))
+    .resize(1024, 1024).png().toBuffer();
   writeFileSync(join(buildDir, "icon.png"), png1024);
-  console.log("  -> build/icon.png (1024x1024)");
+  console.log("  icon.png             1024x1024");
 
-  // Generate 512x512 PNG (for Linux)
-  const png512 = await sharp(Buffer.from(svg))
-    .resize(512, 512)
-    .png()
-    .toBuffer();
+  const png512 = await sharp(Buffer.from(logoSvg))
+    .resize(512, 512).png().toBuffer();
   writeFileSync(join(buildDir, "icon-512.png"), png512);
-  console.log("  -> build/icon-512.png (512x512)");
-
-  // Generate multiple sizes for ICO
-  const sizes = [16, 24, 32, 48, 64, 128, 256];
-  const pngBuffers = await Promise.all(
-    sizes.map((s) =>
-      sharp(Buffer.from(svg)).resize(s, s).png().toBuffer()
-    )
-  );
-
-  // Write temp PNGs for ico generation, then create ICO
-  const tempPngPaths = [];
-  for (let i = 0; i < sizes.length; i++) {
-    const p = join(buildDir, `_temp_${sizes[i]}.png`);
-    writeFileSync(p, pngBuffers[i]);
-    tempPngPaths.push(p);
+  console.log("  icon-512.png          512x512");
+
+  const icoSizes = [16, 24, 32, 48, 64, 128, 256];
+  const tempPaths = [];
+  for (const s of icoSizes) {
+    const p = join(buildDir, `_tmp_${s}.png`);
+    const b = await sharp(Buffer.from(logoSvg)).resize(s, s).png().toBuffer();
+    writeFileSync(p, b);
+    tempPaths.push(p);
   }
-
-  const icoBuffer = await pngToIco(tempPngPaths);
-  writeFileSync(join(buildDir, "icon.ico"), icoBuffer);
-  console.log("  -> build/icon.ico (multi-size)");
-
-  // Clean up temp files
-  const { unlinkSync } = await import("fs");
-  for (const p of tempPngPaths) {
-    try { unlinkSync(p); } catch { /* ignore */ }
-  }
-
-  // Note: .icns generation requires platform-specific tools.
-  // electron-builder can generate .icns from .png on macOS during packaging.
-  // For CI, having icon.png is sufficient — electron-builder handles conversion.
-  console.log("  -> build/icon.icns: skipped (electron-builder auto-generates from icon.png on macOS)");
-
-  console.log("\nDone! Icons are in the build/ directory.");
+  writeFileSync(join(buildDir, "icon.ico"), await pngToIco(tempPaths));
+  for (const p of tempPaths) { try { unlinkSync(p); } catch { /* ignore */ } }
+  console.log("  icon.ico              multi-res");
+  console.log("  icon.icns             (auto via electron-builder on macOS)");
+
+  const sW = 164, sH = 314;
+  const sidebarRaw = await sharp(Buffer.from(sidebarSvg))
+    .resize(sW, sH).ensureAlpha().raw().toBuffer();
+  writeFileSync(join(buildDir, "installerSidebar.bmp"), rawToBmp24(sidebarRaw, sW, sH));
+  console.log("  installerSidebar.bmp  164x314");
+
+  const hW = 150, hH = 57;
+  const headerRaw = await sharp(Buffer.from(headerSvg))
+    .resize(hW, hH).ensureAlpha().raw().toBuffer();
+  writeFileSync(join(buildDir, "installerHeader.bmp"), rawToBmp24(headerRaw, hW, hH));
+  console.log("  installerHeader.bmp   150x57");
+
+  console.log("\nDone! All assets in build/");
 }
 
 generate().catch((err) => {