commit	e59a2e151da777fba13a0978c00c16a1ee3b6122	[log] [tgz]
author	banksean <banksean@gmail.com>	Sat Jun 28 01:38:19 2025 +0000
committer	Autoformatter <bot@sketch.dev>	Sat Jun 28 05:29:10 2025 +0000
tree	015082d0323ad7bd97f6c7e2fc5cca48e9e10f1b
parent	4337aa70a436963ed0e1d563215dc9eb1f176085 [diff]

webui: convert SketchTimeline to use TailwindElement and Tailwind CSS classes

Convert SketchTimeline component from Lit CSS-in-JS styles to TailwindElement
inheritance with Tailwind utility classes, replacing shadow DOM styling with
global Tailwind CSS classes.

Problems Solved:

CSS Inconsistency:
- SketchTimeline used shadow DOM with CSS-in-JS styles while other components use TailwindElement
- Component styling was isolated from global design system
- Difficult to maintain consistent visual appearance across components
- No access to global Tailwind utility classes within shadow DOM

Test Brittleness:
- Tests relied on CSS class selectors that were implementation details
- Complex CSS class selectors made tests fragile to styling changes
- No standardized approach for testing UI elements across components

Missing Demo Infrastructure:
- SketchTimeline had no TypeScript demo module for component development
- Component not included in demo runner system for iterative development
- Only had static HTML demo without interactive controls

Solution Implementation:

TailwindElement Conversion:
- Changed inheritance from LitElement to SketchTailwindElement to disable shadow DOM
- Replaced all CSS-in-JS styles with equivalent Tailwind utility classes
- Added custom CSS for complex animations (thinking dots, loading spinner) that can't be easily replicated with Tailwind
- Maintained all existing visual styling and behavior while using Tailwind classes

CSS Class Mapping:
- .timeline-container → w-full relative max-w-full mx-auto px-[15px] box-border overflow-x-hidden flex-1 min-h-[100px]
- .welcome-box → my-8 mx-auto max-w-[90%] w-[90%] p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center
- .thinking-indicator → pl-[85px] mt-1.5 mb-4 flex
- .loading-indicator → flex items-center justify-center p-5 text-gray-600 text-sm gap-2.5 opacity-100
- Added print: utility variants for print styling support

Test Infrastructure Updates:
- Replaced CSS class selectors with data-testid attributes for reliable element targeting
- Updated all test selectors to use [data-testid='element-name'] pattern
- Added test IDs to welcome-box, timeline-container, thinking-indicator, loading-indicator, thinking-bubble, thinking-dots, and thinking-dot elements
- Maintained all existing test functionality while improving test reliability

Demo Module Creation:
- Created sketch-timeline.demo.ts with comprehensive interactive demo
- Implemented basic timeline, loading states, thinking states, and interactive controls
- Added mock message generation with various message types and tool calls
- Included controls for adding messages, toggling thinking state, compact padding, and reset functionality
- Added SketchTimeline to knownComponents list in demo-runner.ts

Custom Styling Architecture:
- Added addCustomStyles() method to inject necessary CSS that can't be replicated with Tailwind
- Created thinking-pulse keyframe animation for thinking dots
- Added loading-spin animation for spinner elements
- Implemented compact-padding responsive styling
- Used document.head.appendChild for global style injection with duplicate prevention

Implementation Details:

Component Structure:
- Maintained all existing properties, methods, and component lifecycle
- Preserved scroll handling, viewport management, and loading operations
- Added data-testid attributes without affecting visual presentation
- Kept all existing functionality while changing only the styling approach

Styling Consistency:
- All colors, spacing, borders, and animations maintained visual parity
- Print styles converted to Tailwind print: variants
- Hover and active states preserved with Tailwind state variants
- Responsive design maintained with existing breakpoint behavior

Test Reliability:
- Test selectors now target semantic element roles rather than implementation details
- More robust element identification reduces test flakiness
- Consistent testing pattern across all timeline-related components
- Better separation between styling and testing concerns

Demo Development:
- Interactive demo supports real-time component behavior testing
- Mock data factory functions for consistent test data generation
- Multiple demo scenarios covering empty state, populated timeline, and various loading states
- Control buttons for testing user interactions and state changes

Files Modified:
- sketch/webui/src/web-components/sketch-timeline.ts: TailwindElement inheritance and Tailwind class conversion
- sketch/webui/src/web-components/sketch-timeline.test.ts: Updated test selectors to use data-testid attributes
- sketch/webui/src/web-components/demo/sketch-timeline.demo.ts: New interactive demo module
- sketch/webui/src/web-components/demo/demo-framework/demo-runner.ts: Added sketch-timeline to knownComponents

The conversion maintains complete visual and functional parity while enabling
consistent styling across the component library and improving test reliability
through semantic element targeting.

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

7 files changed

tree: 015082d0323ad7bd97f6c7e2fc5cca48e9e10f1b

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!)