feat: add "Load Demo Database" button for first-time desktop users

When no connections exist, the sidebar now shows a "Load Demo Database"
button that copies the pre-built bookstore SQLite database to the user
data directory, creates a connection, and auto-connects.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: matej21

electrobun.config.ts

@@ -13,6 +13,7 @@ export default {
 		copy: {
 			'dist/index.html': 'views/mainview/index.html',
 			'dist/assets': 'views/mainview/assets',
+			'scripts/seed/bookstore.db': 'resources/bookstore.db',
 		},
 		watchIgnore: ['dist/**'],
 		mac: {

src/backend-desktop/index.ts

@@ -5,7 +5,7 @@ import { AppDatabase, setDefaultDbPath } from '@dotaz/backend-shared/storage/app
 import type { DotazRPC } from '@dotaz/backend-types'
 import { BrowserView, BrowserWindow, Updater, Utils } from 'electrobun/bun'
 import { existsSync, mkdirSync } from 'node:fs'
-import { join } from 'node:path'
+import { join, resolve } from 'node:path'
 
 const DEV_SERVER_PORT = 6400
 const DEV_SERVER_URL = `http://localhost:${DEV_SERVER_PORT}`
@@ -46,8 +46,15 @@ const connectionManager = new ConnectionManager(appDb)
 
 // Create RPC handlers with deferred message emitter (set after window creation)
 let emitToFrontend: ((channel: string, payload: unknown) => void) | undefined
+const userDataDir = Utils.paths.userData
+// Demo DB: try dev-time path first, then bundled resource next to the executable
+const devDemoPath = resolve(import.meta.dir, '../../scripts/seed/bookstore.db')
+const bundledDemoPath = resolve(import.meta.dir, '../resources/bookstore.db')
+const demoDbSourcePath = existsSync(devDemoPath) ? devDemoPath : bundledDemoPath
 const { handlers, sessionManager } = createHandlers(connectionManager, undefined, appDb, Utils, {
 	emitMessage: (channel, payload) => emitToFrontend?.(channel, payload),
+	demoDbSourcePath,
+	demoDbTargetPath: join(userDataDir, 'bookstore-demo.db'),
 })
 const rpc = BrowserView.defineRPC<DotazRPC>({
 	maxRequestTime: 30000,
@@ -112,7 +119,6 @@ connectionManager.onStatusChanged((event) => {
 	}
 })
 
-
 // ── Auto-update ──────────────────────────────────────────
 const currentChannel = await Updater.localInfo.channel()
 if (currentChannel !== 'dev') {

src/backend-shared/rpc/adapter.ts

@@ -129,4 +129,7 @@ export interface RpcAdapter {
 	// ── Workspace persistence ─────────────────────────────
 	saveWorkspace(data: string): void
 	loadWorkspace(): string | null
+
+	// ── Demo ──────────────────────────────────────────────
+	initializeDemo?(): Promise<ConnectionInfo>
 }

src/backend-shared/rpc/backend-adapter.ts

@@ -39,6 +39,8 @@ export interface BackendAdapterOptions {
 	Utils?: typeof import('electrobun/bun').Utils
 	emitMessage?: EmitMessage
 	sessionManager?: SessionManager
+	demoDbSourcePath?: string
+	demoDbTargetPath?: string
 }
 
 export class BackendAdapter implements RpcAdapter {
@@ -47,6 +49,8 @@ export class BackendAdapter implements RpcAdapter {
 	private Utils?: typeof import('electrobun/bun').Utils
 	private emitMessage?: EmitMessage
 	private sessionManager?: SessionManager
+	private demoDbSourcePath?: string
+	private demoDbTargetPath?: string
 
 	constructor(
 		private cm: ConnectionManager,
@@ -59,6 +63,8 @@ export class BackendAdapter implements RpcAdapter {
 		this.Utils = opts?.Utils
 		this.emitMessage = opts?.emitMessage
 		this.sessionManager = opts?.sessionManager
+		this.demoDbSourcePath = opts?.demoDbSourcePath
+		this.demoDbTargetPath = opts?.demoDbTargetPath
 	}
 
 	// ── Connections ────────────────────────────────────────
@@ -591,6 +597,27 @@ export class BackendAdapter implements RpcAdapter {
 		return this.appDb.loadWorkspace()
 	}
 
+	// ── Demo ──────────────────────────────────────────────
+
+	async initializeDemo(): Promise<ConnectionInfo> {
+		if (!this.demoDbSourcePath || !this.demoDbTargetPath) {
+			throw new Error('Demo database paths not configured')
+		}
+
+		const srcFile = Bun.file(this.demoDbSourcePath)
+		if (!await srcFile.exists()) {
+			throw new Error('Demo database source not found. Run "bun run seed:sqlite" first.')
+		}
+
+		await Bun.write(this.demoDbTargetPath, srcFile)
+
+		const config = { type: 'sqlite' as const, path: this.demoDbTargetPath }
+		const conn = this.appDb.createConnection({ name: 'Bookstore (Demo)', config })
+
+		await this.cm.connect(conn.id)
+		return conn
+	}
+
 	// ── Session Manager access ────────────────────────────
 
 	getSessionManager(): SessionManager | undefined {

src/backend-shared/rpc/handlers.ts

@@ -313,5 +313,13 @@ export function createHandlers(adapter: RpcAdapter) {
 			}
 			return adapter.showSaveDialog(params)
 		},
+
+		// ── Demo ──────────────────────────────────────────────
+		'demo.initialize': async () => {
+			if (!adapter.initializeDemo) {
+				throw new Error('Demo initialization is not available')
+			}
+			return adapter.initializeDemo()
+		},
 	} as const
 }

src/backend-shared/rpc/rpc-handlers.ts

@@ -9,6 +9,8 @@ import { createHandlers as createSharedHandlers } from './handlers'
 export interface HandlerOptions {
 	encryption?: EncryptionService
 	emitMessage?: (channel: string, payload: unknown) => void
+	demoDbSourcePath?: string
+	demoDbTargetPath?: string
 }
 
 function requireAppDb(appDb: AppDatabase | undefined): AppDatabase {
@@ -31,6 +33,8 @@ export function createHandlers(
 		Utils,
 		emitMessage: opts?.emitMessage,
 		sessionManager,
+		demoDbSourcePath: opts?.demoDbSourcePath,
+		demoDbTargetPath: opts?.demoDbTargetPath,
 	})
 	return { handlers: createSharedHandlers(adapter), sessionManager, adapter }
 }

src/frontend-demo/demo-adapter.ts

@@ -551,6 +551,15 @@ export class DemoAdapter implements RpcAdapter {
 		return null
 	}
 
+	// ── Demo ──────────────────────────────────────────────
+
+	async initializeDemo(): Promise<ConnectionInfo> {
+		// Demo mode already has the bookstore connection
+		const connections = this.state.listConnections()
+		if (connections.length > 0) return connections[0]
+		throw new Error('Demo connection not found')
+	}
+
 	// ── Private ──────────────────────────────────────────
 
 	private logHistory(connectionId: string, sql: string, results: QueryResult[]): void {

src/frontend-shared/components/connection/ConnectionTree.css

@@ -102,6 +102,22 @@
 	background: var(--accent-hover);
 }
 
+.connection-tree__empty-demo {
+	background: transparent;
+	color: var(--ink-muted);
+	border: 1px solid var(--edge);
+	padding: var(--spacing-xs) var(--spacing-md);
+	border-radius: 3px;
+	cursor: pointer;
+	font-size: var(--font-size-xs);
+	font-family: var(--font-ui);
+}
+
+.connection-tree__empty-demo:hover {
+	color: var(--ink);
+	border-color: var(--ink-muted);
+}
+
 /* ── TreeItem ────────────────────────────────────────── */
 
 .tree-item {

src/frontend-shared/components/connection/ConnectionTree.tsx

@@ -735,6 +735,18 @@ export default function ConnectionTree(props: ConnectionTreeProps) {
 						<button class="connection-tree__empty-cta" onClick={props.onAddConnection}>
 							<Plus size={14} /> Add Connection
 						</button>
+						<button
+							class="connection-tree__empty-demo"
+							onClick={async () => {
+								try {
+									await connectionsStore.initializeDemo()
+								} catch (err) {
+									uiStore.addToast('error', err instanceof Error ? err.message : 'Failed to load demo')
+								}
+							}}
+						>
+							Load Demo Database
+						</button>
 					</div>
 				}
 			>

src/frontend-shared/stores/connections.ts

@@ -245,6 +245,13 @@ async function deleteConnection(id: string) {
 	}
 }
 
+async function initializeDemo(): Promise<ConnectionInfo> {
+	const conn = await rpc.demo.initialize()
+	setState('connections', (prev) => [...prev, conn])
+	// Connection status will be updated via the statusChanged event
+	return conn
+}
+
 async function connectTo(id: string, password?: string) {
 	// If adapter needs config on connect and password not remembered, prompt for it
 	if (storage.passConfigOnConnect && !password) {
@@ -444,6 +451,7 @@ export const connectionsStore = {
 	},
 	getRememberPassword,
 	loadConnections,
+	initializeDemo,
 	createConnection,
 	updateConnection,
 	setReadOnly,