data-peek/docs/demo-script-notebooks.md
Rohith Gilla c9f8e4297d
feat: SQL Notebooks for team runbooks (#157)
* feat(notebooks): add shared types for notebooks and cells

* feat(notebooks): add SQLite storage layer with full CRUD

Implements NotebookStorage class backed by better-sqlite3 with WAL mode,
foreign-key cascading deletes, and full CRUD for notebooks and cells.

* feat(notebooks): add IPC handlers for notebook CRUD

* feat(notebooks): add preload bridge for notebook IPC

* feat(notebooks): add NotebookTab type and createNotebookTab action

Adds 'notebook' to TabType union, NotebookTab interface, notebookId to
PersistedTab, createNotebookTab action with deduplication, persistence
handling, and notebook type guards in tab-query-editor.tsx.

* feat(notebooks): add Zustand store for notebook state management

* feat(notebooks): add NotebookEditor component and wire into TabContainer

* feat(notebooks): add sidebar section for browsing and creating notebooks

* feat(notebooks): add export functions for .dpnb and Markdown formats

* feat(notebooks): add NotebookCell component and dependencies

Add react-markdown and remark-gfm for markdown cell rendering.
NotebookCell handles SQL execution, markdown rendering, result
pinning, and keyboard shortcuts.

* fix: address review feedback for SQL notebooks

- Wrap JSON.parse in try/catch for corrupt pinned_result data
- Fix IPC type mismatches: update/duplicate/updateCell return actual data
- Remove non-functional Run All button from notebook editor
- Replace confirm() dialog with immediate delete + toast notification
- Remove dead notebook placeholder branch in tab-query-editor
- Remove duplicate react-markdown/remark-gfm from root package.json

* chore: lock files

* docs(notebooks): add feature docs, demo runbook, and nav entry

- SQL Notebooks feature documentation page for docs site
- Demo runbook .dpnb file for ACME SaaS health checks
- Add sql-notebooks to features navigation

* content(notebooks): add release notes, social posts, and 3 blog posts

- Release notes for v0.20.0 (SQL Notebooks)
- Social media posts (Twitter, Reddit, Dev.to)
- Blog 11: Feature announcement
- Blog 12: Storage architecture deep dive
- Blog 13: Lazy-loading Monaco in notebook cells

* content(notebooks): add Threads posts and posting strategy

4 Threads posts: launch carousel thread, technical behind-the-scenes,
runbook showcase, and conversation starter. Includes posting cadence
and format tips.

* docs(notebooks): add demo recording script

* feat(video): add release video and demo video for SQL Notebooks

- ReleaseVideo020: 24s release announcement (4 feature scenes)
- NotebookDemo: 45s feature walkthrough with animated notebook mockup
  showing cells typing in, queries executing, results sliding in,
  keyboard navigation, and export formats

* feat(video): add new background music for notebook videos

Screen Saver by Kevin MacLeod (CC BY 4.0) as primary track,
Equatorial Complex as alternative. Both compositions updated
to use the new track.

* fix: apply CodeRabbit auto-fixes

Fixed 5 file(s) based on 5 unresolved review comments.

Co-authored-by: CodeRabbit <noreply@coderabbit.ai>

---------

Co-authored-by: pullfrog[bot] <226033991+pullfrog[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: CodeRabbit <noreply@coderabbit.ai>
2026-04-14 19:07:13 +05:30

3.4 KiB

SQL Notebooks — Demo Script

Recording guide for the SQL Notebooks feature demo video.

Setup

  • Database: localhost:5433 / acme_saas / demo / demo (Docker container datapeek-demo)
  • Start container: docker start datapeek-demo
  • Seed file: seeds/acme_saas_seed.sql
  • Demo runbook: seeds/demo-runbook.dpnb (import this or recreate live)

Demo Flow (3-4 minutes)

Scene 1: Create a Notebook (30s)

  1. Open data-peek, connect to the ACME SaaS database
  2. In the sidebar, show the Notebooks section
  3. Click + to create a new notebook
  4. Title it "ACME SaaS Health Check"
  5. Show it opens as a new tab

Scene 2: Add Markdown + SQL Cells (60s)

  1. The notebook starts empty — click + Markdown cell
  2. Type: # Platform Overview and a short description
  3. Click away — show it renders as formatted markdown
  4. Click + SQL cell
  5. Type the platform overview query:
    SELECT o.plan, COUNT(DISTINCT o.id) AS orgs,
      COUNT(DISTINCT m.user_id) AS users
    FROM organizations o
    LEFT JOIN memberships m ON m.organization_id = o.id
    GROUP BY o.plan ORDER BY orgs DESC
    
  6. Press Shift+Enter — results appear inline, focus moves to next position
  7. Add another markdown cell: "## Revenue Health" with explanation
  8. Add another SQL cell with the subscription query
  9. Shift+Enter through it — show the run-and-advance flow

Scene 3: Pin Results (30s)

  1. On the platform overview cell, click the ... menu
  2. Click Pin result
  3. Show the "Pinned — ran [date]" header appears
  4. Close the notebook tab
  5. Reopen from sidebar — pinned result is still there

Scene 4: Keyboard Navigation (30s)

  1. Press Cmd+J / Cmd+K — show focus moving between cells
  2. Press Enter on a SQL cell — enters edit mode
  3. Press Escape — exits back to cell navigation
  4. Press Cmd+Shift+D — deletes a cell
  5. Show the bottom shortcut bar

Scene 5: Import the Full Runbook (30s)

  1. Delete the notebook you just made (or create a new one)
  2. Import seeds/demo-runbook.dpnb (File → Import or drag to sidebar)
  3. Show the full 7-step health check runbook loads
  4. Cmd+Shift+Enter (Run All) — watch the execution wave flow through each cell
  5. Show results appearing one by one

Scene 6: Export & Share (30s)

  1. From the toolbar ... menu, click Export as Markdown
  2. Open the exported .md file — show it's readable with SQL blocks and result tables
  3. Mention: "Send this to a teammate, they can read it without data-peek"
  4. Show Export as .dpnb — "Or send this, and they can import it and run it themselves"

Scene 7: Duplicate to Connection (15s)

  1. Right-click the notebook in the sidebar
  2. Click Duplicate to connection...
  3. Pick a different connection (e.g. staging)
  4. Show the copy appears with "(copy)" suffix

Key Moments to Highlight

  • Shift+Enter flow — the Jupyter muscle memory, run-and-advance
  • Pinned results persisting — close and reopen, data is still there
  • The runbook use case — "your Notion doc + SQL client, collapsed into one"
  • Export as Markdown — readable anywhere, no vendor lock-in

Recording Tips

  • Use dark mode (primary design target)
  • Keep the sidebar open to show the Notebooks section
  • Zoom to ~125% so cell content is readable in the video
  • No narration needed if adding captions — keep it tight
  • Target 1080p, 60fps for smooth scroll/transitions