Notebook

Overview

The Thesis Notebook is a complete Jupyter notebook replacement built with Next.js and React. It provides a modern, responsive interface with real-time cell execution, streaming outputs, and AI agent integration.

The main notebook component is in apps/frontend/app/notebooks/[[...path]]/client.tsx (1270+ lines) and uses Zustand for state management via lib/stores/notebook-store.ts.

Interface Layout

The notebook uses a three-panel layout:

• Left panel - File browser for navigating your workspace
• Center panel - Notebook content with cells, toolbar, and menu bar
• Right panel - AI agent sidebar for chat and assistance

All panels are resizable and can be collapsed for a focused editing experience.

Cell Types

Thesis supports three cell types, each with its own specialized editor:

Code Cells

Implemented in components/notebook/code-cell.tsx. Features:

• Monaco editor with language detection from kernel
• Real-time autocomplete and signature help
• Execution status indicator with animation
• Streaming output rendering
• ANSI color code support for terminal output
• Configurable line numbers

Markdown Cells

Implemented in components/notebook/markdown-cell.tsx. Features:

• TipTap rich text editor with extensions
• GitHub Flavored Markdown (GFM) support
• Tables, task lists, and code blocks
• Preview/edit mode toggle
• HTML rendering with the marked library

Raw Cells

Implemented in components/notebook/raw-cell.tsx. Features:

• Monaco editor for raw text
• No execution capability
• Preserved during notebook export

Cell Execution

The notebook store manages cell execution with these operations:

Execution connects to the Jupyter kernel via WebSocket, collecting outputs from kernel messages and handling stream accumulation to prevent duplicate lines. Auto-save triggers after execution completes.

Output Rendering

The output renderer in components/notebook/output-renderer.tsx supports multiple MIME types with a priority order:

1. text/html - Rich HTML output
2. image/svg+xml - Vector graphics
3. image/png, image/jpeg - Images (base64)
4. application/json - JSON display
5. text/markdown - Markdown rendering
6. text/latex - LaTeX math
7. text/plain - Plain text fallback

Stream outputs (stdout/stderr) are rendered with ANSI color support via the anser library. Errors display with syntax highlighting and traceback formatting.

Toolbar

The toolbar (components/notebook/toolbar/notebook-toolbar.tsx) provides quick access to common operations:

• Save - Save notebook (disabled when clean)
• Insert cell - Dropdown for code/markdown/raw
• Copy/Paste - Cell clipboard operations
• Move up/down - Reorder cells
• Run - Execute cell options
• Interrupt - Stop kernel execution
• Restart - Reset kernel state
• Clear outputs - Remove all outputs
• Cell type - Change selected cell type

File Browser

The file browser (components/file-explorer/file-explorer.tsx) provides workspace navigation:

• Collapsible file tree with icons
• File type detection (notebooks, files, directories)
• Click to open notebooks
• Resizable sidebar width
• Refresh button to sync changes

Checkpoints

Thesis supports Jupyter-style checkpoints for version control:

• saveAndCheckpoint() - Save and create checkpoint
• loadCheckpoints() - List available checkpoints
• revertToCheckpoint(id) - Restore from checkpoint

Auto-checkpoint triggers when you blur a cell after making changes. The notebook also tracks the last 10 deleted cell groups for undo functionality.