Labels: hard enhancement gssoc-2026
Build the actual desktop UI — an always-on-top, semi-transparent overlay that displays Execra's guidance in real time over the user's screen while they work.
What you'll code:
- Set up Electron.js app in
frontend/overlay/:
main.js — create the always-on-top, frameless, semi-transparent BrowserWindowpreload.js — expose WebSocket bridge to the renderer via contextBridgerenderer/index.html + renderer/app.js — the guidance UI
- UI must display:
- Current instruction text (animated fade-in on new instruction)
- Confidence bar (coloured: green ≥85%, orange 65–84%, red <65%)
- Step counter: "Step 4 of 9"
- Source tags:
LLM Rule Engine Trace (pill badges)
- Error alerts: red banner with severity icon
- Mode indicator pill:
PASSIVE / ACTIVE / MIXED
- Connect to
ws://localhost:8000/ws/guidance and handle all server event types
- Add minimize/expand toggle button
- Add Active Mode text input (shown only in
active or mixed mode)
- Style: dark glass-morphism —
background: rgba(10, 10, 20, 0.85) with blur
Skills needed: JavaScript · Electron.js · WebSocket · CSS (glass-morphism) · UI/UX
Labels:
hardenhancementgssoc-2026Build the actual desktop UI — an always-on-top, semi-transparent overlay that displays Execra's guidance in real time over the user's screen while they work.
What you'll code:
frontend/overlay/:main.js— create the always-on-top, frameless, semi-transparentBrowserWindowpreload.js— expose WebSocket bridge to the renderer viacontextBridgerenderer/index.html+renderer/app.js— the guidance UILLMRule EngineTrace(pill badges)PASSIVE/ACTIVE/MIXEDws://localhost:8000/ws/guidanceand handle all server event typesactiveormixedmode)background: rgba(10, 10, 20, 0.85)with blurSkills needed: JavaScript · Electron.js · WebSocket · CSS (glass-morphism) · UI/UX