diff --git a/README.md b/README.md
index 0977469..5d5e6ea 100644
--- a/README.md
+++ b/README.md
@@ -514,6 +514,27 @@ npx tsx examples/research/competitor-analysis.ts \
 
 ---
 
+## Demo App
+
+An interactive Electron desktop application showcasing all SDK capabilities:
+
+- API key connection and agent model selection
+- Session create/list/delete
+- Real-time SSE event streaming via IPC
+- Live screenshot viewer (auto-refresh every 3s)
+- Pause/Resume/Cancel controls
+- Quick action cards for common tasks
+
+```bash
+cd demo && npm install
+cd .. && npm install
+AGI_API_KEY=your-key npx electron --require ts-node/register demo/main.ts
+```
+
+See [`demo/`](./demo) for the full source.
+
+---
+
 ## Documentation & Resources
 
 **Learn More**
diff --git a/demo/main.ts b/demo/main.ts
new file mode 100644
index 0000000..1bd0fb9
--- /dev/null
+++ b/demo/main.ts
@@ -0,0 +1,194 @@
+/**
+ * AGI Node.js SDK Demo - Electron Main Process
+ *
+ * Creates AGIClient, exposes operations via IPC handlers,
+ * and forwards SSE events to the renderer.
+ */
+
+import { app, BrowserWindow, ipcMain } from 'electron';
+import * as path from 'path';
+import { AGIClient } from '../src';
+import type {
+  SessionResponse,
+  SSEEvent,
+  ScreenshotResponse,
+} from '../src/types';
+
+let mainWindow: BrowserWindow | null = null;
+let client: AGIClient | null = null;
+let activeStreamAbort: AbortController | null = null;
+let screenshotInterval: ReturnType<typeof setInterval> | null = null;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    title: 'AGI SDK Demo',
+    backgroundColor: '#1a1a2e',
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+
+  mainWindow.loadFile(path.join(__dirname, 'renderer', 'index.html'));
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+app.whenReady().then(createWindow);
+
+app.on('window-all-closed', () => {
+  stopScreenshots();
+  stopStream();
+  if (client) {
+    client = null;
+  }
+  app.quit();
+});
+
+// --- IPC Handlers ---
+
+ipcMain.handle('connect', async (_event, apiKey: string) => {
+  try {
+    client = new AGIClient({ apiKey });
+    return { success: true };
+  } catch (err: any) {
+    return { success: false, error: err.message };
+  }
+});
+
+ipcMain.handle('list-models', async () => {
+  if (!client) return { models: [] };
+  try {
+    const result = await client.sessions.listModels('cdp');
+    return result;
+  } catch {
+    return { models: [] };
+  }
+});
+
+ipcMain.handle('create-session', async (_event, agentName: string) => {
+  if (!client) throw new Error('Not connected');
+  const session = await client.sessions.create(agentName);
+  return toPlain(session);
+});
+
+ipcMain.handle('list-sessions', async () => {
+  if (!client) return [];
+  const sessions = await client.sessions.list();
+  return sessions.map(toPlain);
+});
+
+ipcMain.handle('delete-session', async (_event, sessionId: string) => {
+  if (!client) throw new Error('Not connected');
+  return await client.sessions.delete(sessionId);
+});
+
+ipcMain.handle(
+  'send-message',
+  async (_event, sessionId: string, message: string) => {
+    if (!client) throw new Error('Not connected');
+    return await client.sessions.sendMessage(sessionId, message);
+  }
+);
+
+ipcMain.handle('pause-session', async (_event, sessionId: string) => {
+  if (!client) throw new Error('Not connected');
+  return await client.sessions.pause(sessionId);
+});
+
+ipcMain.handle('resume-session', async (_event, sessionId: string) => {
+  if (!client) throw new Error('Not connected');
+  return await client.sessions.resume(sessionId);
+});
+
+ipcMain.handle('cancel-session', async (_event, sessionId: string) => {
+  if (!client) throw new Error('Not connected');
+  return await client.sessions.cancel(sessionId);
+});
+
+ipcMain.handle('screenshot', async (_event, sessionId: string) => {
+  if (!client) throw new Error('Not connected');
+  const resp = await client.sessions.screenshot(sessionId);
+  return toPlain(resp);
+});
+
+// --- SSE Streaming ---
+
+ipcMain.on('start-stream', (_event, sessionId: string) => {
+  stopStream();
+  startStream(sessionId);
+});
+
+ipcMain.on('stop-stream', () => {
+  stopStream();
+});
+
+async function startStream(sessionId: string) {
+  if (!client || !mainWindow) return;
+
+  activeStreamAbort = new AbortController();
+
+  try {
+    for await (const event of client.sessions.streamEvents(sessionId, {
+      includeHistory: true,
+    })) {
+      if (activeStreamAbort.signal.aborted) break;
+      mainWindow?.webContents.send('sse-event', toPlain(event));
+      if (event.event === 'done' || event.event === 'error') break;
+    }
+  } catch (err: any) {
+    if (!activeStreamAbort.signal.aborted) {
+      mainWindow?.webContents.send('sse-error', err.message);
+    }
+  }
+
+  mainWindow?.webContents.send('sse-ended');
+}
+
+function stopStream() {
+  if (activeStreamAbort) {
+    activeStreamAbort.abort();
+    activeStreamAbort = null;
+  }
+}
+
+// --- Screenshot polling ---
+
+ipcMain.on('start-screenshots', (_event, sessionId: string) => {
+  stopScreenshots();
+  startScreenshots(sessionId);
+});
+
+ipcMain.on('stop-screenshots', () => {
+  stopScreenshots();
+});
+
+function startScreenshots(sessionId: string) {
+  if (!client || !mainWindow) return;
+
+  screenshotInterval = setInterval(async () => {
+    try {
+      if (!client || !mainWindow) return;
+      const resp = await client.sessions.screenshot(sessionId);
+      mainWindow?.webContents.send('screenshot-update', toPlain(resp));
+    } catch {
+      // Silently ignore screenshot errors
+    }
+  }, 3000);
+}
+
+function stopScreenshots() {
+  if (screenshotInterval) {
+    clearInterval(screenshotInterval);
+    screenshotInterval = null;
+  }
+}
+
+// Strip class instances to plain objects for IPC serialization
+function toPlain<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}
diff --git a/demo/package.json b/demo/package.json
new file mode 100644
index 0000000..f8db7b2
--- /dev/null
+++ b/demo/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "agi-sdk-demo",
+  "version": "1.0.0",
+  "description": "AGI Node.js SDK Demo - Electron GUI",
+  "main": "main.ts",
+  "scripts": {
+    "start": "electron --require ts-node/register main.ts",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "electron": "^33.0.0"
+  },
+  "devDependencies": {
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.0"
+  }
+}
diff --git a/demo/preload.ts b/demo/preload.ts
new file mode 100644
index 0000000..2d5c2ea
--- /dev/null
+++ b/demo/preload.ts
@@ -0,0 +1,59 @@
+/**
+ * Preload script - exposes typed API to renderer via contextBridge.
+ */
+
+import { contextBridge, ipcRenderer } from 'electron';
+
+export interface AgiAPI {
+  connect(apiKey: string): Promise<{ success: boolean; error?: string }>;
+  listModels(): Promise<{ models: any[] }>;
+  createSession(agentName: string): Promise<any>;
+  listSessions(): Promise<any[]>;
+  deleteSession(sessionId: string): Promise<any>;
+  sendMessage(sessionId: string, message: string): Promise<any>;
+  pauseSession(sessionId: string): Promise<any>;
+  resumeSession(sessionId: string): Promise<any>;
+  cancelSession(sessionId: string): Promise<any>;
+  screenshot(sessionId: string): Promise<any>;
+  startStream(sessionId: string): void;
+  stopStream(): void;
+  startScreenshots(sessionId: string): void;
+  stopScreenshots(): void;
+  onSSEEvent(callback: (event: any) => void): void;
+  onSSEError(callback: (error: string) => void): void;
+  onSSEEnded(callback: () => void): void;
+  onScreenshotUpdate(callback: (data: any) => void): void;
+}
+
+const api: AgiAPI = {
+  connect: (apiKey) => ipcRenderer.invoke('connect', apiKey),
+  listModels: () => ipcRenderer.invoke('list-models'),
+  createSession: (agentName) =>
+    ipcRenderer.invoke('create-session', agentName),
+  listSessions: () => ipcRenderer.invoke('list-sessions'),
+  deleteSession: (sessionId) =>
+    ipcRenderer.invoke('delete-session', sessionId),
+  sendMessage: (sessionId, message) =>
+    ipcRenderer.invoke('send-message', sessionId, message),
+  pauseSession: (sessionId) =>
+    ipcRenderer.invoke('pause-session', sessionId),
+  resumeSession: (sessionId) =>
+    ipcRenderer.invoke('resume-session', sessionId),
+  cancelSession: (sessionId) =>
+    ipcRenderer.invoke('cancel-session', sessionId),
+  screenshot: (sessionId) => ipcRenderer.invoke('screenshot', sessionId),
+  startStream: (sessionId) => ipcRenderer.send('start-stream', sessionId),
+  stopStream: () => ipcRenderer.send('stop-stream'),
+  startScreenshots: (sessionId) =>
+    ipcRenderer.send('start-screenshots', sessionId),
+  stopScreenshots: () => ipcRenderer.send('stop-screenshots'),
+  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)),
+};
+
+contextBridge.exposeInMainWorld('agi', api);
diff --git a/demo/renderer/app.js b/demo/renderer/app.js
new file mode 100644
index 0000000..2435cb5
--- /dev/null
+++ b/demo/renderer/app.js
@@ -0,0 +1,331 @@
+/**
+ * AGI SDK Demo - Renderer Process (compiled from app.ts)
+ * Vanilla JS, no framework dependencies.
+ */
+
+const agi = window.agi;
+
+// --- State ---
+let connected = false;
+let activeSessionId = null;
+const sessions = new Map();
+
+// --- DOM Elements ---
+const $ = (id) => document.getElementById(id);
+const apiKeyInput = $('apiKeyInput');
+const connectBtn = $('connectBtn');
+const agentSelect = $('agentSelect');
+const newSessionBtn = $('newSessionBtn');
+const sessionListEl = $('sessionList');
+const deleteBtn = $('deleteBtn');
+const screenshotImg = $('screenshotImg');
+const screenshotPlaceholder = $('screenshotPlaceholder');
+const pauseBtn = $('pauseBtn');
+const resumeBtn = $('resumeBtn');
+const cancelBtn = $('cancelBtn');
+const eventContainer = $('eventContainer');
+const taskInput = $('taskInput');
+const sendBtn = $('sendBtn');
+const connectionStatus = $('connectionStatus');
+const sessionStatus = $('sessionStatus');
+const runStatus = $('runStatus');
+
+// --- Event Icons ---
+const EVENT_ICONS = {
+  thought: '\u{1F4AD}',
+  step: '\u25B6',
+  question: '\u2753',
+  done: '\u2705',
+  error: '\u274C',
+  log: '\u{1F4CB}',
+  paused: '\u23F8',
+  resumed: '\u25B6',
+  user: '\u{1F464}',
+};
+
+// --- Connect ---
+connectBtn.addEventListener('click', async () => {
+  const key = apiKeyInput.value.trim();
+  if (!key) return;
+
+  connectBtn.disabled = true;
+  const result = await agi.connect(key);
+
+  if (result.success) {
+    connected = true;
+    connectBtn.textContent = 'Connected';
+    apiKeyInput.disabled = true;
+    newSessionBtn.disabled = false;
+    connectionStatus.innerHTML = '&#x1F7E2; Connected';
+    connectionStatus.style.color = '#2ecc71';
+
+    // Load models
+    try {
+      const modelsResp = await agi.listModels();
+      if (modelsResp.models && modelsResp.models.length) {
+        agentSelect.innerHTML = '';
+        for (const m of modelsResp.models) {
+          const name = m.name || m;
+          const opt = document.createElement('option');
+          opt.value = name;
+          opt.textContent = name;
+          agentSelect.appendChild(opt);
+        }
+      }
+    } catch (e) { /* ignore */ }
+
+    // Load existing sessions
+    try {
+      const existingSessions = await agi.listSessions();
+      for (const s of existingSessions) {
+        addSessionToList(s.sessionId, s.agentName, s.status);
+      }
+    } catch (e) { /* ignore */ }
+  } else {
+    connectBtn.disabled = false;
+    addEvent('error', 'Connection failed: ' + result.error);
+  }
+});
+
+// --- New Session ---
+newSessionBtn.addEventListener('click', async () => {
+  if (!connected) return;
+  const agentName = agentSelect.value;
+  addEvent('log', 'Creating session with ' + agentName + '...');
+
+  try {
+    const session = await agi.createSession(agentName);
+    addSessionToList(session.sessionId, session.agentName, session.status);
+    addEvent('log', 'Session created: ' + session.sessionId.slice(0, 8) + '...');
+  } catch (err) {
+    addEvent('error', 'Failed to create session: ' + err.message);
+  }
+});
+
+// --- Delete Session ---
+deleteBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  const id = activeSessionId;
+
+  try {
+    agi.stopStream();
+    agi.stopScreenshots();
+    await agi.deleteSession(id);
+    removeSessionFromList(id);
+    if (activeSessionId === id) {
+      activeSessionId = null;
+      sessionStatus.textContent = 'Session: --';
+      taskInput.disabled = true;
+      sendBtn.disabled = true;
+      deleteBtn.disabled = true;
+      setControlState('idle');
+      screenshotImg.style.display = 'none';
+      screenshotPlaceholder.style.display = '';
+    }
+    addEvent('log', 'Session deleted');
+  } catch (err) {
+    addEvent('error', 'Delete failed: ' + err.message);
+  }
+});
+
+// --- Session Selection ---
+function selectSession(sessionId) {
+  if (sessionId === activeSessionId) return;
+
+  agi.stopStream();
+  agi.stopScreenshots();
+
+  activeSessionId = sessionId;
+  sessionStatus.textContent = 'Session: ' + sessionId.slice(0, 8) + '...';
+  taskInput.disabled = false;
+  sendBtn.disabled = false;
+  deleteBtn.disabled = false;
+  eventContainer.innerHTML = '';
+  screenshotImg.style.display = 'none';
+  screenshotPlaceholder.style.display = '';
+
+  document.querySelectorAll('.session-item').forEach((el) => {
+    el.classList.toggle('selected', el.getAttribute('data-id') === sessionId);
+  });
+
+  addEvent('log', 'Selected session ' + sessionId.slice(0, 8) + '...');
+
+  agi.startStream(sessionId);
+  agi.startScreenshots(sessionId);
+}
+
+// --- Task Submit ---
+sendBtn.addEventListener('click', submitTask);
+taskInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') submitTask();
+});
+
+async function submitTask() {
+  const text = taskInput.value.trim();
+  if (!text || !activeSessionId) return;
+
+  addEvent('user', text);
+  taskInput.value = '';
+  setControlState('running');
+  setRunStatus('running');
+
+  try {
+    await agi.sendMessage(activeSessionId, text);
+    addEvent('log', 'Message sent to agent');
+  } catch (err) {
+    addEvent('error', 'Send failed: ' + err.message);
+  }
+}
+
+// --- Session Controls ---
+pauseBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.pauseSession(activeSessionId);
+    setControlState('paused');
+    setRunStatus('paused');
+    addEvent('log', 'Session paused');
+  } catch (err) {
+    addEvent('error', 'Pause failed: ' + err.message);
+  }
+});
+
+resumeBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.resumeSession(activeSessionId);
+    setControlState('running');
+    setRunStatus('running');
+    addEvent('log', 'Session resumed');
+  } catch (err) {
+    addEvent('error', 'Resume failed: ' + err.message);
+  }
+});
+
+cancelBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.cancelSession(activeSessionId);
+    setControlState('idle');
+    setRunStatus('ready');
+    addEvent('log', 'Session cancelled');
+  } catch (err) {
+    addEvent('error', 'Cancel failed: ' + err.message);
+  }
+});
+
+// --- Quick Cards ---
+document.querySelectorAll('.quick-card').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const task = btn.getAttribute('data-task');
+    if (task) {
+      taskInput.value = task;
+      taskInput.focus();
+    }
+  });
+});
+
+// --- SSE Event Handlers ---
+agi.onSSEEvent((event) => {
+  const eventType = event.event || 'unknown';
+  const data = event.data || {};
+  let content = data.content || data.message || data.text || JSON.stringify(data);
+  if (typeof content !== 'string') content = JSON.stringify(content);
+  if (content.length > 300) content = content.slice(0, 300) + '...';
+
+  addEvent(eventType, content);
+
+  if (eventType === 'done') {
+    setControlState('idle');
+    setRunStatus('finished');
+  } else if (eventType === 'error') {
+    setControlState('idle');
+    setRunStatus('error');
+  } else if (eventType === 'paused') {
+    setControlState('paused');
+    setRunStatus('paused');
+  } else if (eventType === 'resumed') {
+    setControlState('running');
+    setRunStatus('running');
+  }
+});
+
+agi.onSSEError((error) => {
+  addEvent('error', 'Stream error: ' + error);
+});
+
+agi.onSSEEnded(() => {
+  addEvent('log', 'Stream ended');
+});
+
+// --- Screenshot Handler ---
+agi.onScreenshotUpdate((data) => {
+  if (data.screenshot) {
+    let src = data.screenshot;
+    if (!src.startsWith('data:')) {
+      src = 'data:image/jpeg;base64,' + src;
+    }
+    screenshotImg.src = src;
+    screenshotImg.style.display = '';
+    screenshotPlaceholder.style.display = 'none';
+  }
+});
+
+// --- Helper Functions ---
+
+function addSessionToList(sessionId, agentName, status) {
+  sessions.set(sessionId, { agentName, status });
+
+  const item = document.createElement('div');
+  item.className = 'session-item';
+  item.setAttribute('data-id', sessionId);
+  item.innerHTML =
+    '<span class="session-agent">' + escapeHtml(agentName) + '</span> ' +
+    '<span class="session-status">(' + escapeHtml(status) + ')</span>';
+  item.addEventListener('click', () => selectSession(sessionId));
+  sessionListEl.appendChild(item);
+}
+
+function removeSessionFromList(sessionId) {
+  sessions.delete(sessionId);
+  const item = sessionListEl.querySelector('[data-id="' + sessionId + '"]');
+  if (item) item.remove();
+}
+
+function addEvent(type, content) {
+  const icon = EVENT_ICONS[type] || '\u2022';
+  const item = document.createElement('div');
+  item.className = 'event-item';
+  item.innerHTML =
+    '<span class="event-type ' + type + '">' + icon + ' [' + type + ']</span>' +
+    '<span class="event-content">' + escapeHtml(content) + '</span>';
+  eventContainer.appendChild(item);
+  eventContainer.scrollTop = eventContainer.scrollHeight;
+}
+
+function setControlState(state) {
+  const running = state === 'running';
+  const paused = state === 'paused';
+  pauseBtn.disabled = !running;
+  resumeBtn.disabled = !paused;
+  cancelBtn.disabled = !(running || paused);
+}
+
+function setRunStatus(status) {
+  const colors = {
+    running: '#2ecc71',
+    paused: '#f39c12',
+    error: '#e74c3c',
+    finished: '#3498db',
+    ready: '#95a5a6',
+  };
+  runStatus.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+  runStatus.style.color = colors[status] || '#888';
+  runStatus.style.fontWeight = 'bold';
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
diff --git a/demo/renderer/app.ts b/demo/renderer/app.ts
new file mode 100644
index 0000000..3d3da13
--- /dev/null
+++ b/demo/renderer/app.ts
@@ -0,0 +1,363 @@
+/**
+ * AGI SDK Demo - Renderer Process
+ * Vanilla TypeScript, no framework dependencies.
+ */
+
+declare global {
+  interface Window {
+    agi: typeof import('../preload').AgiAPI extends infer T ? T : never;
+  }
+}
+
+const agi = (window as any).agi;
+
+// --- State ---
+
+let connected = false;
+let activeSessionId: string | null = null;
+let sessions: Map<string, { agentName: string; status: string }> = new Map();
+
+// --- DOM Elements ---
+
+const $ = (id: string) => document.getElementById(id)!;
+const apiKeyInput = $('apiKeyInput') as HTMLInputElement;
+const connectBtn = $('connectBtn') as HTMLButtonElement;
+const agentSelect = $('agentSelect') as HTMLSelectElement;
+const newSessionBtn = $('newSessionBtn') as HTMLButtonElement;
+const sessionListEl = $('sessionList');
+const deleteBtn = $('deleteBtn') as HTMLButtonElement;
+const screenshotImg = $('screenshotImg') as HTMLImageElement;
+const screenshotPlaceholder = $('screenshotPlaceholder');
+const pauseBtn = $('pauseBtn') as HTMLButtonElement;
+const resumeBtn = $('resumeBtn') as HTMLButtonElement;
+const cancelBtn = $('cancelBtn') as HTMLButtonElement;
+const eventContainer = $('eventContainer');
+const taskInput = $('taskInput') as HTMLInputElement;
+const sendBtn = $('sendBtn') as HTMLButtonElement;
+const connectionStatus = $('connectionStatus');
+const sessionStatus = $('sessionStatus');
+const runStatus = $('runStatus');
+
+// Prefill API key from env if available
+const envKey = (window as any).__AGI_API_KEY__;
+if (envKey) apiKeyInput.value = envKey;
+
+// --- Event Icons ---
+
+const EVENT_ICONS: Record<string, string> = {
+  thought: '\u{1F4AD}',
+  step: '\u25B6',
+  question: '\u2753',
+  done: '\u2705',
+  error: '\u274C',
+  log: '\u{1F4CB}',
+  paused: '\u23F8',
+  resumed: '\u25B6',
+  user: '\u{1F464}',
+};
+
+// --- Connect ---
+
+connectBtn.addEventListener('click', async () => {
+  const key = apiKeyInput.value.trim();
+  if (!key) return;
+
+  connectBtn.disabled = true;
+  const result = await agi.connect(key);
+
+  if (result.success) {
+    connected = true;
+    connectBtn.textContent = 'Connected';
+    apiKeyInput.disabled = true;
+    newSessionBtn.disabled = false;
+    connectionStatus.innerHTML = '&#x1F7E2; Connected';
+    connectionStatus.style.color = '#2ecc71';
+
+    // Load models
+    try {
+      const modelsResp = await agi.listModels();
+      if (modelsResp.models?.length) {
+        agentSelect.innerHTML = '';
+        for (const m of modelsResp.models) {
+          const name = m.name || m;
+          const opt = document.createElement('option');
+          opt.value = name;
+          opt.textContent = name;
+          agentSelect.appendChild(opt);
+        }
+      }
+    } catch {}
+
+    // Load existing sessions
+    try {
+      const existingSessions = await agi.listSessions();
+      for (const s of existingSessions) {
+        addSessionToList(s.sessionId, s.agentName, s.status);
+      }
+    } catch {}
+  } else {
+    connectBtn.disabled = false;
+    addEvent('error', `Connection failed: ${result.error}`);
+  }
+});
+
+// --- New Session ---
+
+newSessionBtn.addEventListener('click', async () => {
+  if (!connected) return;
+  const agentName = agentSelect.value;
+  addEvent('log', `Creating session with ${agentName}...`);
+
+  try {
+    const session = await agi.createSession(agentName);
+    addSessionToList(session.sessionId, session.agentName, session.status);
+    addEvent('log', `Session created: ${session.sessionId.slice(0, 8)}...`);
+  } catch (err: any) {
+    addEvent('error', `Failed to create session: ${err.message}`);
+  }
+});
+
+// --- Delete Session ---
+
+deleteBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  const id = activeSessionId;
+
+  try {
+    agi.stopStream();
+    agi.stopScreenshots();
+    await agi.deleteSession(id);
+    removeSessionFromList(id);
+    if (activeSessionId === id) {
+      activeSessionId = null;
+      sessionStatus.textContent = 'Session: --';
+      taskInput.disabled = true;
+      sendBtn.disabled = true;
+      deleteBtn.disabled = true;
+      setControlState('idle');
+      screenshotImg.style.display = 'none';
+      screenshotPlaceholder.style.display = '';
+    }
+    addEvent('log', 'Session deleted');
+  } catch (err: any) {
+    addEvent('error', `Delete failed: ${err.message}`);
+  }
+});
+
+// --- Session Selection ---
+
+function selectSession(sessionId: string) {
+  if (sessionId === activeSessionId) return;
+
+  // Stop old streams
+  agi.stopStream();
+  agi.stopScreenshots();
+
+  activeSessionId = sessionId;
+  sessionStatus.textContent = `Session: ${sessionId.slice(0, 8)}...`;
+  taskInput.disabled = false;
+  sendBtn.disabled = false;
+  deleteBtn.disabled = false;
+  eventContainer.innerHTML = '';
+  screenshotImg.style.display = 'none';
+  screenshotPlaceholder.style.display = '';
+
+  // Highlight selected
+  document.querySelectorAll('.session-item').forEach((el) => {
+    el.classList.toggle('selected', el.getAttribute('data-id') === sessionId);
+  });
+
+  addEvent('log', `Selected session ${sessionId.slice(0, 8)}...`);
+
+  // Start streams
+  agi.startStream(sessionId);
+  agi.startScreenshots(sessionId);
+}
+
+// --- Task Submit ---
+
+sendBtn.addEventListener('click', submitTask);
+taskInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') submitTask();
+});
+
+async function submitTask() {
+  const text = taskInput.value.trim();
+  if (!text || !activeSessionId) return;
+
+  addEvent('user', text);
+  taskInput.value = '';
+  setControlState('running');
+  setRunStatus('running');
+
+  try {
+    await agi.sendMessage(activeSessionId, text);
+    addEvent('log', 'Message sent to agent');
+  } catch (err: any) {
+    addEvent('error', `Send failed: ${err.message}`);
+  }
+}
+
+// --- Session Controls ---
+
+pauseBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.pauseSession(activeSessionId);
+    setControlState('paused');
+    setRunStatus('paused');
+    addEvent('log', 'Session paused');
+  } catch (err: any) {
+    addEvent('error', `Pause failed: ${err.message}`);
+  }
+});
+
+resumeBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.resumeSession(activeSessionId);
+    setControlState('running');
+    setRunStatus('running');
+    addEvent('log', 'Session resumed');
+  } catch (err: any) {
+    addEvent('error', `Resume failed: ${err.message}`);
+  }
+});
+
+cancelBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  try {
+    await agi.cancelSession(activeSessionId);
+    setControlState('idle');
+    setRunStatus('ready');
+    addEvent('log', 'Session cancelled');
+  } catch (err: any) {
+    addEvent('error', `Cancel failed: ${err.message}`);
+  }
+});
+
+// --- Quick Cards ---
+
+document.querySelectorAll('.quick-card').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const task = btn.getAttribute('data-task');
+    if (task) {
+      taskInput.value = task;
+      taskInput.focus();
+    }
+  });
+});
+
+// --- SSE Event Handlers ---
+
+agi.onSSEEvent((event: any) => {
+  const eventType = event.event || 'unknown';
+  const data = event.data || {};
+  let content =
+    data.content || data.message || data.text || JSON.stringify(data);
+  if (typeof content !== 'string') content = JSON.stringify(content);
+  if (content.length > 300) content = content.slice(0, 300) + '...';
+
+  addEvent(eventType, content);
+
+  if (eventType === 'done') {
+    setControlState('idle');
+    setRunStatus('finished');
+  } else if (eventType === 'error') {
+    setControlState('idle');
+    setRunStatus('error');
+  } else if (eventType === 'paused') {
+    setControlState('paused');
+    setRunStatus('paused');
+  } else if (eventType === 'resumed') {
+    setControlState('running');
+    setRunStatus('running');
+  }
+});
+
+agi.onSSEError((error: string) => {
+  addEvent('error', `Stream error: ${error}`);
+});
+
+agi.onSSEEnded(() => {
+  addEvent('log', 'Stream ended');
+});
+
+// --- Screenshot Handler ---
+
+agi.onScreenshotUpdate((data: any) => {
+  if (data.screenshot) {
+    let src = data.screenshot;
+    if (!src.startsWith('data:')) {
+      src = `data:image/jpeg;base64,${src}`;
+    }
+    screenshotImg.src = src;
+    screenshotImg.style.display = '';
+    screenshotPlaceholder.style.display = 'none';
+  }
+});
+
+// --- Helper Functions ---
+
+function addSessionToList(
+  sessionId: string,
+  agentName: string,
+  status: string
+) {
+  sessions.set(sessionId, { agentName, status });
+
+  const item = document.createElement('div');
+  item.className = 'session-item';
+  item.setAttribute('data-id', sessionId);
+  item.innerHTML = `
+    <span class="session-agent">${agentName}</span>
+    <span class="session-status">(${status})</span>
+  `;
+  item.addEventListener('click', () => selectSession(sessionId));
+  sessionListEl.appendChild(item);
+}
+
+function removeSessionFromList(sessionId: string) {
+  sessions.delete(sessionId);
+  const item = sessionListEl.querySelector(`[data-id="${sessionId}"]`);
+  item?.remove();
+}
+
+function addEvent(type: string, content: string) {
+  const icon = EVENT_ICONS[type] || '\u2022';
+  const item = document.createElement('div');
+  item.className = 'event-item';
+  item.innerHTML = `
+    <span class="event-type ${type}">${icon} [${type}]</span>
+    <span class="event-content">${escapeHtml(content)}</span>
+  `;
+  eventContainer.appendChild(item);
+  eventContainer.scrollTop = eventContainer.scrollHeight;
+}
+
+function setControlState(state: string) {
+  const running = state === 'running';
+  const paused = state === 'paused';
+  pauseBtn.disabled = !running;
+  resumeBtn.disabled = !paused;
+  cancelBtn.disabled = !(running || paused);
+}
+
+function setRunStatus(status: string) {
+  const colors: Record<string, string> = {
+    running: '#2ecc71',
+    paused: '#f39c12',
+    error: '#e74c3c',
+    finished: '#3498db',
+    ready: '#95a5a6',
+  };
+  runStatus.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+  runStatus.style.color = colors[status] || '#888';
+  runStatus.style.fontWeight = 'bold';
+}
+
+function escapeHtml(str: string): string {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
diff --git a/demo/renderer/index.html b/demo/renderer/index.html
new file mode 100644
index 0000000..9668f35
--- /dev/null
+++ b/demo/renderer/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';" />
+  <title>AGI SDK Demo</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <div class="app-container">
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+      <h1 class="logo">AGI SDK Demo</h1>
+
+      <div class="section">
+        <label class="section-label">API KEY</label>
+        <input type="password" id="apiKeyInput" placeholder="Enter your AGI API key..." />
+        <button id="connectBtn" class="btn btn-primary">Connect</button>
+      </div>
+
+      <div class="section">
+        <label class="section-label">AGENT MODEL</label>
+        <select id="agentSelect">
+          <option value="agi-0">agi-0</option>
+          <option value="agi-1">agi-1</option>
+          <option value="agi-2-claude">agi-2-claude</option>
+          <option value="agi-2-gpt">agi-2-gpt</option>
+        </select>
+        <button id="newSessionBtn" class="btn btn-primary" disabled>+ New Session</button>
+      </div>
+
+      <div class="section flex-grow">
+        <label class="section-label">SESSIONS</label>
+        <div id="sessionList" class="session-list"></div>
+      </div>
+
+      <button id="deleteBtn" class="btn btn-danger" disabled>Delete Session</button>
+    </aside>
+
+    <!-- Main content -->
+    <main class="main-content">
+      <!-- Screenshot viewer -->
+      <div class="screenshot-viewer" id="screenshotViewer">
+        <img id="screenshotImg" alt="" style="display: none;" />
+        <span id="screenshotPlaceholder" class="placeholder">No screenshot available</span>
+      </div>
+
+      <!-- Session controls -->
+      <div class="controls-bar">
+        <button id="pauseBtn" class="btn btn-secondary" disabled>&#x23F8; Pause</button>
+        <button id="resumeBtn" class="btn btn-secondary" disabled>&#x25B6; Resume</button>
+        <button id="cancelBtn" class="btn btn-danger" disabled>&#x23F9; Cancel</button>
+      </div>
+
+      <!-- Event stream -->
+      <div class="event-stream" id="eventStream">
+        <div class="section-label" style="padding: 8px 12px;">Event Stream</div>
+        <div id="eventContainer" class="event-container"></div>
+      </div>
+
+      <!-- Command panel -->
+      <div class="command-panel">
+        <div class="input-row">
+          <input type="text" id="taskInput" placeholder="Enter a task for the agent..." disabled />
+          <button id="sendBtn" class="btn btn-primary" disabled>Send</button>
+        </div>
+        <div class="quick-cards">
+          <button class="quick-card" data-task="Find 3 nonstop SFO to JFK flights under $450 round trip">Flights</button>
+          <button class="quick-card" data-task="Open Uber and request a ride from downtown to the airport">Uber</button>
+          <button class="quick-card" data-task="Order 2 lbs of organic bananas and almond milk on Instacart">Instacart</button>
+          <button class="quick-card" data-task="Schedule a 30-min team standup for tomorrow at 10am on Google Calendar">Meeting</button>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Status bar -->
+  <footer class="status-bar">
+    <span id="connectionStatus">&#x26AA; Disconnected</span>
+    <span id="sessionStatus">Session: --</span>
+    <span id="runStatus" class="status-right">Idle</span>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/demo/renderer/styles.css b/demo/renderer/styles.css
new file mode 100644
index 0000000..a13f056
--- /dev/null
+++ b/demo/renderer/styles.css
@@ -0,0 +1,353 @@
+/* AGI SDK Demo - Dark Theme */
+
+:root {
+  --bg-primary: #1a1a2e;
+  --bg-secondary: #16213e;
+  --bg-input: #0f3460;
+  --bg-dark: #0a0a1a;
+  --border: #2a2a4a;
+  --text-primary: #e0e0e0;
+  --text-secondary: #888;
+  --accent: #e94560;
+  --accent-hover: #ff6b81;
+  --success: #2ecc71;
+  --warning: #f39c12;
+  --error: #e74c3c;
+  --info: #3498db;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 260px;
+  min-width: 260px;
+  background-color: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+
+.logo {
+  text-align: center;
+  font-size: 16px;
+  color: var(--accent);
+  margin-bottom: 8px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.section.flex-grow {
+  flex: 1;
+  min-height: 0;
+}
+
+.section-label {
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="password"],
+select {
+  background-color: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+  width: 100%;
+}
+
+input:focus, select:focus {
+  border-color: var(--accent);
+}
+
+input:disabled {
+  opacity: 0.5;
+}
+
+/* Buttons */
+.btn {
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: var(--accent);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--accent-hover);
+}
+
+.btn-secondary {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #1a4a7a;
+}
+
+.btn-danger {
+  background-color: transparent;
+  color: var(--error);
+  border: 1px solid var(--error);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: var(--error);
+  color: white;
+}
+
+/* Session list */
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.session-item {
+  background-color: var(--bg-input);
+  border-radius: 6px;
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  font-size: 12px;
+}
+
+.session-item:hover {
+  background-color: #1a4a7a;
+}
+
+.session-item.selected {
+  background-color: var(--accent);
+  color: white;
+}
+
+.session-item .session-agent {
+  font-weight: bold;
+}
+
+.session-item .session-status {
+  opacity: 0.7;
+  font-size: 11px;
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 8px;
+  overflow: hidden;
+}
+
+/* Screenshot viewer */
+.screenshot-viewer {
+  flex: 3;
+  background-color: var(--bg-dark);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 200px;
+}
+
+.screenshot-viewer img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.placeholder {
+  color: #555;
+  font-size: 14px;
+}
+
+/* Controls bar */
+.controls-bar {
+  display: flex;
+  gap: 8px;
+}
+
+/* Event stream */
+.event-stream {
+  flex: 2;
+  background-color: #0f0f23;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 150px;
+}
+
+.event-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 8px;
+}
+
+.event-item {
+  display: flex;
+  gap: 8px;
+  padding: 6px 8px;
+  margin: 2px 0;
+  background-color: var(--bg-secondary);
+  border-radius: 4px;
+  align-items: flex-start;
+}
+
+.event-type {
+  font-weight: bold;
+  font-size: 12px;
+  min-width: 100px;
+  flex-shrink: 0;
+}
+
+.event-content {
+  color: #ccc;
+  font-size: 12px;
+  word-break: break-word;
+}
+
+/* Event type colors */
+.event-type.thought { color: var(--info); }
+.event-type.step { color: var(--success); }
+.event-type.question { color: var(--warning); }
+.event-type.done { color: #27ae60; }
+.event-type.error { color: var(--error); }
+.event-type.log { color: #95a5a6; }
+.event-type.paused { color: var(--warning); }
+.event-type.resumed { color: var(--success); }
+.event-type.user { color: #9b59b6; }
+
+/* Command panel */
+.command-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input-row {
+  display: flex;
+  gap: 8px;
+}
+
+.input-row input {
+  flex: 1;
+}
+
+.input-row .btn {
+  width: 80px;
+}
+
+.quick-cards {
+  display: flex;
+  gap: 8px;
+}
+
+.quick-card {
+  flex: 1;
+  background-color: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: var(--text-primary);
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.quick-card:hover {
+  border-color: var(--accent);
+  background-color: #1a4a7a;
+}
+
+/* Status bar */
+.status-bar {
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: flex;
+  gap: 16px;
+  height: 32px;
+  align-items: center;
+}
+
+.status-right {
+  margin-left: auto;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3a5a;
+}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
new file mode 100644
index 0000000..258d607
--- /dev/null
+++ b/demo/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "commonjs",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": false,
+    "sourceMap": true,
+    "paths": {
+      "@agi_inc/agi-js": ["../src"]
+    }
+  },
+  "include": ["*.ts", "renderer/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}