feat: add application icon with gradient weave design

[saadiq]

Summary

• Add custom Tapestry application icon with gradient weave pattern
• Generate platform-specific icon formats (.icns, .ico, .png)
• Configure Electron Forge to use icons in packaged builds

Changes

• New Assets: Added assets/icons/ directory with:
  • icon.svg - Source SVG with purple-to-blue gradient and weave pattern
  • icon.icns - macOS icon with retina sizes (16-1024px)
  • icon.ico - Windows icon with multiple sizes (16-256px)
  • icon.png - Linux icon (512x512)
  • Individual PNG files for all standard sizes
• Configuration: Updated forge.config.ts:
  • Added icon path to packagerConfig for macOS/Windows
  • Configured MakerDeb and MakerRpm with Linux icon path

Icon Design

The icon features a woven tapestry pattern with:

• Purple-to-blue gradient background representing AI/technology
• Interwoven horizontal and vertical threads (weave pattern)
• Centered golden accent representing the "spark" of context engineering

Technical Details

• Icons generated using rsvg-convert for high-quality SVG rendering
• Properly renders gradients and transparency
• Includes all required sizes for each platform
• Automatically applied during bun package and bun make

Test Plan

• Generate icon files from SVG using rsvg-convert
• Verify PNG quality (gradients, transparency)
• Configure Electron Forge with icon paths
• Test packaged macOS app shows correct icon in dock
• Test Windows build shows correct icon in taskbar
• Test Linux build shows correct icon in application menu

[claude]

Code Review

✅ Strengths

1. Excellent SVG Design & Implementation

• Clean, well-structured SVG with proper namespaces and viewBox
• Gradient definitions are reusable and semantically named (grad1, grad1-light)
• Visual metaphor (weave pattern) aligns perfectly with "Tapestry" branding
• Commented sections make the SVG easy to understand and modify

2. Proper Platform Support

• Comprehensive icon size coverage (16px to 1024px) for all platforms
• Correct format usage:
  • .icns for macOS with retina support
  • .ico for Windows with multiple embedded sizes
  • .png for Linux and individual sizes
• Configuration correctly targets platform-specific makers

3. Configuration Best Practices

• Uses Electron Forge's standard icon path convention (assets/icons/icon without extension)
• Properly configured for all three maker types (Deb, RPM, ZIP)
• Maintains separation of concerns (packager vs. maker configs)

---

🐛 Potential Issues

1. Missing Windows Icon Configuration
The MakerSquirrel (Windows installer) does not have an icon configured:

// Current
new MakerSquirrel({}),

// Should be
new MakerSquirrel({
  iconUrl: 'https://raw.githubusercontent.com/saadiq/tapestry/main/assets/icons/icon.ico',
  setupIcon: 'assets/icons/icon.ico',
}),

Explanation: MakerSquirrel requires:

• setupIcon: Icon for the installer executable
• iconUrl: URL to icon file for application updates (optional but recommended)

Without this, Windows users will see a default Electron icon during installation.

2. SVG Accessibility
The SVG lacks accessibility attributes:

<svg width="128" height="128" viewBox="0 0 128 128" 
     fill="none" xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Tapestry application icon">
  <title>Tapestry Icon</title>
  <!-- ... -->
</svg>

While not critical for application icons, this is a best practice for web contexts.

3. Icon Path Resolution Risk
The path assets/icons/icon is relative. During packaging, Electron Forge should resolve this correctly, but consider using an absolute path or verifying the path exists in the build output:

import path from 'path';

packagerConfig: {
  // ...
  icon: path.resolve(__dirname, 'assets/icons/icon'),
},

This prevents build failures if working directories change.

---

🎯 Recommendations

Priority: High

1. Add Windows installer icon to MakerSquirrel configuration
2. Verify icon paths after running bun package - check that icons are copied to the build directory

Priority: Medium
3. Add icon verification script to catch missing icons before packaging:

# Example pre-build check
test -f assets/icons/icon.icns && test -f assets/icons/icon.ico && test -f assets/icons/icon.png

4. Document icon regeneration in README or CONTRIBUTING.md:
   • How to regenerate icons from SVG
   • Required tools (rsvg-convert)
   • Commands used

Priority: Low
5. Add accessibility attributes to SVG
6. Consider adding app icon to BrowserWindow configuration in main process for window icon on Linux

---

🔒 Security

✅ No security concerns. SVG is clean with no:

• External resource references
• Script tags or event handlers
• Data URIs embedding untrusted content

---

📊 Performance

✅ Icon file sizes are reasonable:

• SVG: 2KB (excellent for source)
• PNG (512x512): 54KB (acceptable)
• ICNS: 554KB (normal for multi-resolution macOS icons)
• ICO: 122KB (normal for multi-resolution Windows icons)

No optimization needed.

---

🧪 Test Coverage

The PR description mentions incomplete test plan:

• ✅ Icon generation verified
• ❌ macOS dock icon not tested
• ❌ Windows taskbar icon not tested
• ❌ Linux application menu not tested

Recommendation: Add a checklist to test after merging:

1. Build for each platform (bun make)
2. Install and verify icons appear correctly
3. Screenshot and document in PR or issue for future reference

---

📝 Code Quality

forge.config.ts (forge.config.ts:19, forge.config.ts:40, forge.config.ts:45):

• ✅ Clean, readable configuration
• ✅ Proper TypeScript typing
• ⚠️ Missing Windows Squirrel icon config (see Issues feat: Implement TipTap WYSIWYG Editor (Track A - Phase 2) #1 above)

---

Summary

This is a high-quality PR that adds professional branding to the application. The icon design is thoughtful and the implementation is mostly correct.

Before merging: Address the Windows installer icon configuration (critical for Windows users).

After merging: Complete the testing checklist with actual packaged builds.

Great work on the visual design! The gradient weave pattern is distinctive and memorable. 🎨

[claude]

Pull Request Review: Application Icon Implementation

Summary

This PR adds a custom application icon with platform-specific formats and build tooling. The implementation is well-structured and thorough, with good automation and documentation. However, there are several areas that could be improved for robustness and security.

✅ Strengths

1. Excellent Documentation

• Comprehensive README updates with clear prerequisites and workflow
• Well-commented scripts with helpful error messages
• Good PR description explaining design decisions

2. Platform Coverage

• Proper icon formats for all platforms (macOS .icns, Windows .ico, Linux .png)
• Correct size variants for retina displays and multiple resolutions
• Clean SVG source with gradient design

3. Developer Experience

• Convenient npm scripts (verify-icons, regenerate-icons)
• Helpful error messages with installation instructions
• Automated verification in build pipeline

⚠️ Issues & Recommendations

1. Security: Hardcoded GitHub URL in Windows Installer

Location: forge.config.ts:52

The iconUrl in MakerSquirrel points to main branch, which could reference a different version than the one being packaged.

Recommendation: Remove iconUrl or use a versioned URL instead of pointing to the main branch.

2. Build Safety: Path Traversal in Icon Verification

Location: forge.config.ts:28-39

The packageAfterCopy hook verifies icons using fs.existsSync() with relative paths. This could fail if run from a different directory.

Recommendation: Use absolute paths with path.join(process.cwd(), ...) or verify files in the buildPath directory.

3. Cross-Platform Compatibility: ImageMagick Command

Location: scripts/regenerate-icons.sh:71

The script uses magick command (ImageMagick v7+), but older systems may have convert instead.

Recommendation: Check for both magick and convert commands with fallback logic.

4. Script Robustness: Missing Error Handling

Location: scripts/regenerate-icons.sh:94

The final ls command has fallback logic but doesn't verify which files were actually created successfully.

5. Performance: Redundant Icon Files

The script generates icon_512.png and then copies it to icon.png (both 54 KB). Consider if both files are needed.

6. Missing Test Coverage

No tests for the icon verification logic in forge.config.ts.

🎯 Nitpicks

1. Consider adding .icns and .ico files to .gitattributes with binary flag
2. The Icon Development section could mention that scripts are idempotent
3. Consider testing 16px and 32px versions - the weave pattern might be hard to distinguish at small sizes

🔒 Security Assessment

✅ No malicious code detected

• SVG content is benign (no embedded scripts or external references)
• Shell scripts use safe patterns (no eval, properly quoted variables)
• No credential exposure or sensitive data

⚠️ Minor concerns:

• The hardcoded GitHub URL could theoretically be used to inject a different icon if the repository is compromised (low risk)

📊 Test Plan Completion

Based on the PR description, 3/5 test items are complete. The remaining platform-specific tests (macOS dock, Windows taskbar, Linux application menu) should be completed before merge or documented as post-merge verification.

📝 Recommended Changes Before Merge

High Priority:

1. Fix the iconUrl GitHub URL issue (security/versioning)
2. Fix icon verification to use absolute paths
3. Add ImageMagick command fallback for cross-platform compatibility

Medium Priority:
4. Add error handling verification to regenerate script
5. Complete platform-specific icon testing

Low Priority:
6. Add test coverage for icon verification
7. Consider optimizing duplicate icon file storage

✅ Approval Recommendation

Approve with minor changes. The implementation is solid and well-documented. The issues identified are mostly edge cases and robustness improvements rather than blocking bugs. Once the high-priority items are addressed, this is ready to merge.

Great work on the comprehensive approach to icon management! 🎉