feat(demo): add Electron GUI demo app

[JacobFV]

Summary

• Adds interactive Electron desktop demo app in demo/ directory
• Showcases all SDK capabilities: sessions, SSE streaming, screenshots, pause/resume/cancel
• Dark themed UI with sidebar, event stream, screenshot viewer, and quick action cards
• Main process handles AGIClient + IPC, renderer is vanilla TypeScript
• Adds demo section to README

Files

• demo/main.ts - Electron main process with IPC handlers
• demo/preload.ts - contextBridge typed API
• demo/renderer/index.html - Main layout
• demo/renderer/styles.css - Dark theme CSS
• demo/renderer/app.js - Renderer logic (compiled from app.ts)
• demo/renderer/app.ts - TypeScript source

How to run

cd demo && npm install && cd .. && npm install
AGI_API_KEY=xxx npx electron --require ts-node/register demo/main.ts

Test plan

• App launches with sidebar and main content area
• Enter API key and connect
• Create new session, appears in sidebar
• Send task, events stream in real-time
• Screenshot viewer shows live browser state
• Pause/Resume/Cancel buttons work
• Quick cards pre-fill the task input
• Delete session removes it from list

🤖 Generated with Claude Code

Greptile Overview

Greptile Summary

Adds a comprehensive Electron desktop demo application showcasing the full capabilities of the AGI SDK. The demo includes API key connection, session management (create/list/delete), real-time SSE event streaming via IPC, live screenshot polling every 3 seconds, and session controls (pause/resume/cancel).

Key additions:

• demo/main.ts implements the Electron main process with AGIClient integration and IPC handlers for all SDK operations
• demo/preload.ts exposes a secure contextBridge API with proper context isolation
• demo/renderer/ contains vanilla TypeScript UI logic with dark-themed interface
• Proper cleanup on window close and stream/screenshot polling management
• README updated with demo setup instructions

Minor style issue:

• Unused _e parameters in preload.ts event listeners (style preference per custom rules)

Confidence Score: 5/5

• This PR is safe to merge with no functional issues.
• The demo implementation is well-structured with proper error handling, context isolation, and cleanup. The only issue is a minor style preference about unused parameter naming convention. All core functionality follows best practices for Electron security (contextBridge, no nodeIntegration) and proper IPC communication patterns.
• No files require special attention

Important Files Changed

Filename	Overview
demo/main.ts	Main Electron process with AGIClient integration, IPC handlers, and SSE streaming. Implements proper cleanup and error handling.
demo/preload.ts	Secure contextBridge API exposing IPC operations to renderer. Properly isolates main/renderer processes.
demo/renderer/app.ts	Renderer logic implementing UI state management, event handling, and SSE event streaming. Clean vanilla TypeScript implementation.
demo/package.json	Demo dependencies and scripts. Electron 33.0.0 with TypeScript support via ts-node.

Sequence Diagram

sequenceDiagram
    participant User
    participant Renderer as Renderer Process
    participant Preload as Preload/IPC
    participant Main as Main Process
    participant AGI as AGIClient
    participant API as AGI API

    User->>Renderer: Enter API key & Connect
    Renderer->>Preload: agi.connect(apiKey)
    Preload->>Main: IPC: connect
    Main->>AGI: new AGIClient({apiKey})
    AGI-->>Main: client instance
    Main-->>Preload: {success: true}
    Preload-->>Renderer: connection result
    Renderer->>User: Connected status

    User->>Renderer: Create New Session
    Renderer->>Preload: agi.createSession(agentName)
    Preload->>Main: IPC: create-session
    Main->>AGI: client.sessions.create()
    AGI->>API: POST /v1/sessions
    API-->>AGI: session data
    AGI-->>Main: SessionResponse
    Main-->>Renderer: session object
    Renderer->>User: Session added to sidebar

    User->>Renderer: Select Session
    Renderer->>Preload: agi.startStream(sessionId)
    Preload->>Main: IPC: start-stream
    Main->>AGI: client.sessions.streamEvents()
    AGI->>API: GET /v1/sessions/{id}/events (SSE)
    
    loop SSE Events
        API-->>AGI: event stream
        AGI-->>Main: SSEEvent
        Main->>Renderer: IPC: sse-event
        Renderer->>User: Display event
    end

    Renderer->>Preload: agi.startScreenshots(sessionId)
    Preload->>Main: IPC: start-screenshots
    
    loop Every 3 seconds
        Main->>AGI: client.sessions.screenshot()
        AGI->>API: GET /v1/sessions/{id}/screenshot
        API-->>AGI: screenshot data
        AGI-->>Main: ScreenshotResponse
        Main->>Renderer: IPC: screenshot-update
        Renderer->>User: Update screenshot viewer
    end

    User->>Renderer: Send Task
    Renderer->>Preload: agi.sendMessage(sessionId, message)
    Preload->>Main: IPC: send-message
    Main->>AGI: client.sessions.sendMessage()
    AGI->>API: POST /v1/sessions/{id}/messages
    API-->>AGI: message response
    AGI-->>Main: MessageResponse
    Main-->>Renderer: result

    User->>Renderer: Pause/Resume/Cancel
    Renderer->>Preload: agi.pauseSession(sessionId)
    Preload->>Main: IPC: pause-session
    Main->>AGI: client.sessions.pause()
    AGI->>API: POST /v1/sessions/{id}/pause
    API-->>AGI: success
    AGI-->>Main: SuccessResponse
    Main-->>Renderer: result
    Renderer->>User: Updated status

Loading

_{Last reviewed commit: 470ae2e}

[greptile-apps]

_{9 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Unused _e parameter in event listeners.

Suggested change

	onSSEEvent: (callback) =>
	ipcRenderer.on('sse-event', (_e, event) => callback(event)),
	onSSEError: (callback) =>
	ipcRenderer.on('sse-error', (_e, error) => callback(error)),
	onSSEEnded: (callback) => ipcRenderer.on('sse-ended', () => callback()),
	onScreenshotUpdate: (callback) =>
	ipcRenderer.on('screenshot-update', (_e, data) => callback(data)),
	onSSEEvent: (callback) =>
	ipcRenderer.on('sse-event', (_, event) => callback(event)),
	onSSEError: (callback) =>
	ipcRenderer.on('sse-error', (_, error) => callback(error)),
	onSSEEnded: (callback) => ipcRenderer.on('sse-ended', () => callback()),
	onScreenshotUpdate: (callback) =>
	ipcRenderer.on('screenshot-update', (_, data) => callback(data)),

Context Used: Rule from dashboard - Remove unused parameters from function signatures to keep them clean and focused on only the require... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: demo/preload.ts
Line: 50:56

Comment:
Unused `_e` parameter in event listeners.

```suggestion
  onSSEEvent: (callback) =>
    ipcRenderer.on('sse-event', (_, event) => callback(event)),
  onSSEError: (callback) =>
    ipcRenderer.on('sse-error', (_, error) => callback(error)),
  onSSEEnded: (callback) => ipcRenderer.on('sse-ended', () => callback()),
  onScreenshotUpdate: (callback) =>
    ipcRenderer.on('screenshot-update', (_, data) => callback(data)),
```

**Context Used:** Rule from `dashboard` - Remove unused parameters from function signatures to keep them clean and focused on only the require... ([source](https://app.greptile.com/review/custom-context?memory=ddab3f1f-d2e3-4c54-a6e5-702d1aabe12c))

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.