commit	618bfb28892561a8ef2e3d6163de4fd6c990beda	[log] [tgz]
author	Sean McCullough <banksean@gmail.com>	Wed Jun 25 20:52:30 2025 +0000
committer	Autoformatter <bot@sketch.dev>	Wed Jun 25 22:24:00 2025 +0000
tree	c1ef367f8a4ecea00f237bc084f1ecbd15773764
parent	8b2bc8eacb6ca23c1dbfda31eb9f3651eb756820 [diff]

webui: implement modular demo system with TypeScript and shared fixtures

Replace hand-written HTML demo pages with TypeScript demo modules and
automated infrastructure to reduce maintenance overhead and improve
developer experience with type safety and shared code.

Problems Solved:

Demo Maintenance Overhead:
- Hand-written HTML demo pages contained extensive boilerplate duplication
- No type checking for demo setup code or component data
- Manual maintenance of demo/index.html with available demos
- Difficult to share common fake data between demo pages
- No hot module replacement for demo development

Code Quality and Consistency:
- Demo setup code written in plain JavaScript without type safety
- No validation that demo data matches component interfaces
- Inconsistent styling and structure across demo pages
- Duplicated fake data declarations in each demo file

Solution Architecture:

TypeScript Demo Module System:
- Created DemoModule interface for standardized demo structure
- Demo modules export title, description, imports, and setup functions
- Full TypeScript compilation with type checking for demo code
- Dynamic import system for on-demand demo loading with Vite integration

Shared Demo Infrastructure:
- demo-framework/ with types.ts and demo-runner.ts for core functionality
- DemoRunner class handles dynamic loading, cleanup, and error handling
- Single demo-runner.html page loads any demo module dynamically
- Supports URL hash routing for direct demo links

Centralized Fake Data:
- demo-fixtures/ directory with shared TypeScript data files
- sampleToolCalls, sampleTimelineMessages, and sampleContainerState
- Type-safe imports ensure demo data matches component interfaces
- demoUtils with helper functions for consistent demo UI creation

Auto-generated Index Page:
- generate-index.ts scans for *.demo.ts files and extracts metadata
- Creates index-generated.html with links to all available demos
- Automatically includes demo titles and descriptions
- Eliminates manual maintenance of demo listing

Implementation Details:

Demo Framework:
- DemoRunner.loadDemo() uses dynamic imports with Vite ignore comments
- Automatic component import based on demo module configuration
- Support for demo-specific CSS and cleanup functions
- Error handling with detailed error display for debugging

Demo Module Structure:
- sketch-chat-input.demo.ts: Interactive chat with message history
- sketch-container-status.demo.ts: Status variations with real-time updates
- sketch-tool-calls.demo.ts: Multiple tool call examples with progressive loading
- All use shared fixtures and utilities for consistent experience

Vite Integration:
- Hot Module Replacement works for demo modules and shared fixtures
- TypeScript compilation on-the-fly for immediate feedback
- Dynamic imports work seamlessly with Vite's module system
- @vite-ignore comments prevent import analysis warnings

Testing and Validation:
- Tested demo runner loads and displays available components
- Verified component discovery and dynamic import functionality
- Confirmed shared fixture imports work correctly
- Validated auto-generated index creation and content

Files Modified:
- demo-framework/types.ts: TypeScript interfaces for demo system
- demo-framework/demo-runner.ts: Core demo loading and execution logic
- demo-fixtures/: Shared fake data (tool-calls.ts, timeline-messages.ts, container-status.ts, index.ts)
- demo-runner.html: Interactive demo browser with sidebar navigation
- generate-index.ts: Auto-generation script for demo index
- sketch-chat-input.demo.ts: Converted chat input demo to TypeScript
- sketch-container-status.demo.ts: Container status demo with variations
- sketch-tool-calls.demo.ts: Tool calls demo with interactive examples
- readme.md: Comprehensive documentation for new demo system

Benefits:
- Developers get full TypeScript type checking for demo code
- Shared fake data ensures consistency and reduces duplication
- Hot module replacement provides instant feedback during development
- Auto-generated index eliminates manual maintenance
- Modular architecture makes it easy to add new demos
- Vite integration provides fast development iteration

The new system reduces demo maintenance overhead while providing
better developer experience through TypeScript, shared code, and
automated infrastructure.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3d91894eb7c4a79fk

18 files changed

tree: c1ef367f8a4ecea00f237bc084f1ecbd15773764

README.md

Sketch

Sketch is an agentic coding tool. It draws the 🦉

🚀 Overview

Sketch runs in your terminal, has a web UI, understands your code, and helps you get work done. To keep your environment pristine, sketch starts a docker container and outputs its work onto a branch in your host git repository.

Sketch helps with most programming environments, but Sketch has extra goodies for Go.

📋 Quick Start

go install sketch.dev/cmd/sketch@latest
sketch

🔧 Requirements

Currently, Sketch runs on MacOS and Linux. It uses Docker for containers.

Platform	Installation
MacOS	`brew install colima` (or Docker Desktop/Orbstack)
Linux	`apt install docker.io` (or equivalent for your distro)
WSL2	Install Docker Desktop for Windows (docker entirely inside WSL2 is tricky)

The sketch.dev service is used to provide access to an LLM service and give you a way to access the web UI from anywhere.

🤝 Community & Feedback

Discord: Join our community at https://discord.gg/6w9qNRUDzS
GitHub Issues: Submit feedback at https://github.com/boldsoftware/sketch/issues

📖 User Guide

Getting Started

Start Sketch by running sketch in a Git repository. It will open your browser to the Sketch chat interface, but you can also use the CLI interface. Use -open=false if you want to use just the CLI interface.

Ask Sketch about your codebase or ask it to implement a feature. It may take a little while for Sketch to do its work, so hit the bell (🔔) icon to enable browser notifications. We won't spam you or anything; it will notify you when the Sketch agent's turn is done, and there's something to look at.

How Sketch Works

When you start Sketch, it:

Creates a Dockerfile
Builds it
Copies your repository into it
Starts a Docker container with the "inside" Sketch running

This design lets you run multiple sketches in parallel since they each have their own sandbox. It also lets Sketch work without worry: it can trash its own container, but it can't trash your machine.

Sketch's agentic loop uses tool calls (mostly shell commands, but also a handful of other important tools) to allow the LLM to interact with your codebase.

Getting Your Git Changes Out

Sketch is trained to make Git commits. When those happen, they are automatically pushed to the git repository where you started sketch with branch names sketch/*.

Finding Sketch branches:

git branch -a --sort=creatordate | grep sketch/ | tail

The UI keeps track of the latest branch it pushed and displays it prominently. You can use standard Git workflows to pull those branches into your workspace:

git cherry-pick $(git merge-base origin/main sketch/foo)

or merge the branch

git merge sketch/foo

or reset to the branch

git reset --hard sketch/foo

Ie use the same workflows you would if you were pulling in a friend's Pull Request.

Advanced: You can ask Sketch to git fetch sketch-host and rebase onto another commit. This will also fetch where you started Sketch, and we do a bit of "git fetch refspec configuration" to make origin/main work as a git reference.

Don't be afraid of asking Sketch to help you rebase, merge/squash commits, rewrite commit messages, and so forth; it's good at it!

Reviewing Diffs

The diff view shows you changes since Sketch started. Leaving comments on lines adds them to the chat box, and, when you hit Send (at the bottom of the page), Sketch goes to work addressing your comments.

Connecting to Sketch's Container

You can interact directly with the container in three ways:

Web UI Terminal: Use the "Terminal" tab in the UI
SSH: Look at the startup logs or click the information icon to see a command like ssh sketch-ilik-eske-tcha-lott. We have automatically configured your SSH configuration to make these special hostnames work.
Visual Studio Code: Look for a command line or magic link behind the information icon, or when Sketch starts up. This starts a new VSCode session "remoted into" the container. You can edit the code, use the terminal, review diffs, and so forth.

Using SSH (and/or VSCode) allows you to forward ports from the container to your machine. For example, if you want to start your development webserver, you can do something like this:

# Forward container port 8888 to local port 8000
ssh -L8000:localhost:8888 sketch-ilik-epor-tfor-ward go run ./cmd/server

This makes http://localhost:8000/ on your machine point to localhost:8888 inside the container.

Using Browser Tools

You can ask Sketch to browse a web page and take screenshots. There are tools both for taking screenshots and "reading images", the latter of which sends the image to the LLM. This functionality is handy if you're working on a web page and want to see what the in-progress change looks like.

❓ FAQ

"No space left on device"

Docker images, containers, and so forth tend to pile up. Ask Docker to prune unused images and containers:

docker system prune -a

🛠️ Development

See CONTRIBUTING.md for development guidelines.

📄 Open Source

Sketch is open source. It is right here in this repository! Have a look around and mod away.

If you want to run Sketch entirely without the sketch.dev service, you can set the flag -skaband-addr="" and then provide an ANTHROPIC_API_KEY environment variable. (More LLM services coming soon!)