How pickle-glass Works: Architecture, System Design & Code Deep Dive

Project Overview

Glass by Pickle is an Electron-based desktop application designed as a 'Digital Mind Extension' for professional developers and knowledge workers. It operates silently on the desktop, capturing and processing real-time audio (and potentially visual context) to convert ephemeral moments into structured knowledge. The application features a secure Electron main process managing core logic, an embedded Next.js frontend for user interaction, and a local Express.js backend for data persistence and API services, all integrated to provide a fast, light, and open-source personal AI assistant experience.

Category

application

Difficulty

advanced

Tech Stack

electron, NextJS, Express, SQLite

Tags

application, wearables

How pickle-glass Works

Glass by Pickle is an Electron-based desktop application designed as a 'Digital Mind Extension' for professional developers and knowledge workers. It operates silently on the desktop, capturing and processing real-time audio (and potentially visual context) to convert ephemeral moments into structured knowledge. The application features a secure Electron main process managing core logic, an embedded Next.js frontend for user interaction, and a local Express.js backend for data persistence and API services, all integrated to provide a fast, light, and open-source personal AI assistant experience.

Data Flow

Data flows primarily through two channels: Inter-Process Communication (IPC) and local HTTP requests. The Next.js frontend (renderer process) sends IPC messages to the Electron main process, mediated by `src/preload.js` and routed by `src/bridge/featureBridge.js` or `src/bridge/windowBridge.js`. These messages trigger logic within various main process services (e.g., `settingsService`, `listenService`, `windowManager`). These services often interact with `src/features/common/services/sqliteClient.js` for persistent data storage. Simultaneously, the frontend communicates with a local Express.js server (`pickleglass_web/backend_node/index.js`) via HTTP requests (e.g., for authentication or specific data endpoints), which also may use SQLite for data. Real-time audio data is captured by `src/ui/listen/audioCore/listenCapture.js`, processed (WASM-accelerated AEC/VAD), and then sent to `src/features/listen/listenService.js` for STT processing, potentially involving external APIs or local AI models. Processed insights are then made available to the frontend.

Key Modules & Components

• Application Lifecycle Management: Manages the application's startup, updates, packaging, and overall lifecycle, ensuring a consistent and reliable user experience across different platforms. This includes handling initial configurations and managing external dependencies.
  Key files: src/index.js, package.json, electron-builder.yml
• Secure Inter-Process Communication (IPC) Bridge: Provides a secure and controlled communication channel between the Electron main process (Node.js environment) and the renderer process (web application), enabling the frontend to access backend functionalities and data without compromising security. This includes feature-specific APIs and window management controls.
  Key files: src/preload.js, src/bridge/featureBridge.js, src/bridge/windowBridge.js
• Window and UI Management: Handles the creation, configuration, and manipulation of application windows, including settings for size, position, visibility, and special UI effects like 'Liquid Glass'. It also manages global shortcuts and window-related events, ensuring a seamless user experience.
  Key files: src/window/windowManager.js
• User Experience (UX) Presentation Layer: Defines the structure, layout, and routing for the Next.js-based frontend application, responsible for rendering the user interface and handling initial user personalization flows. It ensures a consistent look and feel across different pages and components.
  Key files: pickleglass_web/app/layout.tsx, pickleglass_web/app/page.tsx, pickleglass_web/next.config.js
• Local Backend API and Data Persistence: Provides a local Express.js server to handle backend API requests from the frontend, including user authentication, data management, and other application-specific services. It also integrates with a local SQLite database for persistent storage of application data.
  Key files: pickleglass_web/backend_node/index.js, src/features/common/services/sqliteClient.js, pickleglass_web/backend_node/routes/auth.js
• Application Configuration Management: Provides a centralized mechanism for managing application settings, including default configurations, environment variable overrides, and user-specific preferences. This ensures consistent behavior across different environments and allows for easy customization.
  Key files: src/features/common/config/config.js