GlassNote - Transparent Overlay Notes Application

GlassNote is a sophisticated desktop application built with Electron that provides transparent overlay notes and interactive content display capabilities. The application runs as a system tray application with full-screen transparent windows for displaying HTML, SVG, images, and interactive forms.

Features

Core Functionality

• Transparent Overlay Display: Full-screen transparent windows that overlay on top of other applications
• Multi-format Content Support: HTML, SVG, images, and interactive forms
• Position Management: Configurable display positions with grid-based layout system
• Interactive Forms: Support for form submissions with validation and response handling
• Configuration Menu: System tray accessible configuration interface

Technical Architecture

• Electron Main Process: Manages window creation, system tray, auto-start, and IPC communication
• Vue.js Renderer: Modern frontend built with Vue 3 and TypeScript
• Service Architecture: Modular service system for sound, user data, WebSocket management, and window visibility
• Auto-update System: Both main application and renderer can be updated independently
• Local WebSocket Server: Built-in server for communication with external systems

Security Features

• Context Isolation: Secure IPC communication with whitelisted channels
• Code Signing: Windows CodeSign with eSigner and Apple Developer signing
• Auto-start Management: Secure startup configuration
• Log Management: Comprehensive logging with automatic cleanup
• User Data Encryption: Secure storage of user preferences and configuration

Project Structure

glassnote-electron/
├── main.js                    # Electron main process
├── preload.js                 # Secure IPC bridge
├── package.json              # Main application configuration
├── glassnote-renderer/       # Frontend application
│   ├── src/
│   │   ├── App.vue           # Main Vue component
│   │   ├── systems/          # Core systems (glass, config, etc.)
│   │   ├── services/         # Service layer
│   │   └── utils/            # Utility functions
│   └── vite.config.ts        # Build configuration
├── images/                   # Application icons and assets
├── installer/               # Built installers
├── cert/                    # Code signing certificates
└── scripts/                 # Build and deployment scripts

Installation

The supported way to install the client is npm/npx (see INSTALACION.md for the full story, in Spanish):

npx @glassnote/client            # run it once, nothing gets installed
npx @glassnote/client install    # real install under ~/.glassnote, no root, no signing

The package is @glassnote/client; the installed command is glassnote — npm names the executable after bin, and npx runs that single bin even when the names differ.

Native installers (signed NSIS, notarized DMG, app stores) are deprecated as of 2026-09-05. The certificates and store validations cost more than they were worth for a client shipped to known customers. electron-builder, build-with-esigner.ps1 and buildOSX*.sh are kept for legacy builds only and are no longer the release path.

Development Setup

1. Clone this repository
2. Install dependencies — this pulls @glassnote/renderer, the baseline renderer:

   npm install

3. Only if you work on the renderer, clone it into this directory. A local clone takes precedence over the published dependency, so npm run watch-renderer keeps working as before:

   git clone git@intermarkec:intermarkec/glassnote-renderer.git
   cd glassnote-renderer && npm install

4. Run in development mode:

   npm run dev

Publishing a release (npm)

npm version patch    # or minor / major
npm publish          # prepublishOnly builds the renderer and runs scripts/check-publish.js

Production Build (deprecated — legacy native installers)

1. Build the renderer:

   npm run build-renderer

2. Build the Electron application:

   npm run build

3. For signed Windows builds:

   .\build-with-esigner.ps1

Configuration

Application Settings

• Renderer origin: the production S3 bucket, always. Override it for local testing with GLASSNOTE_S3_BASE_URL.
• Logging: Enable/disable renderer logging via logRenderer flag
• Auto-start: Configured automatically on first run
• Update Channels: production only — there is no develop environment

Build Configuration

• Windows: NSIS installer with code signing
• macOS: DMG package with hardened runtime
• Cross-platform: Electron Builder configuration supports multiple platforms

Usage

Basic Operation

1. Application starts minimized to system tray
2. Right-click tray icon for configuration menu
3. Content is displayed via WebSocket connections or local server
4. Interactive elements support form submissions and confirmation buttons

Content Display

• HTML Content: Full HTML rendering with CSS and JavaScript support
• SVG Graphics: Vector graphics with transparency support
• Images: PNG, JPG, and other image formats
• Forms: Interactive forms with submission handling

Position Management

Content can be positioned using a grid system:

• Horizontal positions: 1-3 (left, center, right)
• Vertical positions: 1-3 (top, middle, bottom)

Development

Code Standards

• TypeScript: Strict typing throughout the codebase
• Vue 3 Composition API: Modern Vue patterns
• Service Pattern: Modular, testable service architecture
• Error Handling: Comprehensive error logging and recovery

Key Systems

1. Glass System: Manages transparent overlay display
2. Config Menu: System tray configuration interface
3. User Data Manager: Persistent storage management
4. WebSocket Manager: External communication handling

Testing

• Development mode with hot reload
• Comprehensive logging for debugging
• Auto-update testing in development environment

Deployment

Build Process

1. Renderer Build: Vite-based TypeScript compilation
2. Main Build: Electron Builder packaging
3. Code Signing: Digital signature application
4. Installer Creation: NSIS (Windows) or DMG (macOS)

Update System

• Main Updates (npm install): checks the npm registry every 3 hours and updates with npm install -g, then relaunches. npm is never run while the app is up: on Windows the running electron.exe is locked and could not be replaced.
• Main Updates (legacy native): S3 installer download + execute (autoupdate.js), only used by the deprecated native builds.
• Renderer Updates: Independent update system for frontend (unchanged, S3 zip)
• Version Management: Semantic versioning with hash verification

Distribution

• npm registry: @glassnote/client — npx @glassnote/client install, no root, no code signing. The installed command is still glassnote.
• Bootstrap without Node: install.sh / install.ps1 fetch Node into ~/.glassnote and hand off to the package CLI
• S3 Storage (legacy): native installers, deprecated
• Publishing guard: publishing to npmjs needs GLASSNOTE_PUBLISH=PRODUCTION; any other registry (the local one) does not

Security Considerations

Application Security

• Context Isolation: Prevents renderer access to Node.js APIs
• IPC Whitelisting: Only approved channels can communicate
• Code Signing: Verifies application integrity
• Auto-start Security: Secure startup configuration

Data Security

• User Data Encryption: Secure storage of preferences
• Log Protection: Automatic cleanup of sensitive data
• Network Security: Secure WebSocket connections

Platform Security

• macOS: with the npm install there is no notarization step — npm downloads the electron binary, so nothing is quarantined by the browser and Gatekeeper does not block it. Hardened runtime / Apple signing only applied to the deprecated DMG.
• Windows: no installer to run means no SmartScreen prompt. eSigner code signing only applied to the deprecated NSIS build.
• Linux sandbox: a rootless install cannot make chrome-sandbox setuid root, so the launcher picks the best available option (setuid → user namespaces → --no-sandbox) and says so. glassnote fix-sandbox restores the full sandbox with one sudo.
• Sandboxing: Limited renderer process capabilities

Troubleshooting

Common Issues

1. Transparency Issues: Ensure graphics drivers are updated
2. Sound Not Playing: Check system audio settings
3. Auto-start Failure: Verify user permissions
4. Update Problems: Check network connectivity and S3 access

Logs

• Application logs stored in %APPDATA%/glassnote/logs/ (Windows)
• Automatic cleanup of logs older than 30 days
• Detailed renderer logging available in development mode

License

Proprietary software - All rights reserved.

Support

For technical support and documentation, contact the development team.