commit	5450584a3e83904406aef4f1f8cfaa6b7de66268	[log] [tgz]
author	banksean <banksean@gmail.com>	Thu Jul 03 00:18:44 2025 +0000
committer	Sean McCullough <banksean@gmail.com>	Wed Jul 02 17:24:38 2025 -0700
tree	9eb466e6188a6b3279eadd1a924cad9069ee803c
parent	9556fcf116434d39a351e5bebe4e7f772ea440d8 [diff]

webui: convert sketch diff components to inherit from SketchTailwindElement

Convert SketchDiffEmptyView and SketchDiff2View components from LitElement
to SketchTailwindElement inheritance pattern to enable proper Tailwind CSS
integration across the diff view system.

Components Converted:
- sketch-diff-empty-view: Simple empty state component with help text
- sketch-diff2-view: Complex Monaco editor-based diff viewer with file management

SketchDiffEmptyView Changes:
- Updated imports: removed css, LitElement; added SketchTailwindElement
- Changed class inheritance from LitElement to SketchTailwindElement
- Removed static styles CSS block entirely
- Converted custom CSS to Tailwind classes:
  - Container: flex flex-col items-center justify-center h-full w-full box-border
  - Content box: m-8 mx-auto max-w-4xl w-11/12 p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center
  - Typography: text-2xl font-semibold mb-6 text-center text-gray-800
  - Body text: text-gray-600 leading-relaxed text-base text-left mb-4
  - Strong emphasis: font-semibold text-gray-800

SketchDiff2View Changes:
- Updated imports: removed css, LitElement; added SketchTailwindElement
- Changed class inheritance from LitElement to SketchTailwindElement
- Removed extensive static styles CSS block (280+ lines)
- Preserved Monaco editor integration, scrollbar hiding, and dynamic height handling
- Maintained all complex diff view functionality and state management

CSS-to-Tailwind Mapping for SketchDiff2View:
- Host container: flex h-full flex-1 flex-col min-h-0 overflow-hidden relative
- Controls section: px-4 py-2 border-b border-gray-300 bg-gray-100 flex-shrink-0
- File selector: min-w-[200px] px-3 py-2 border border-gray-400 rounded bg-white
- Diff container: flex-1 overflow-auto flex flex-col min-h-0 relative h-full
- File sections: flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0
- File headers: bg-gray-100 border-b border-gray-300 px-4 py-2 sticky top-0 z-10
- Monaco editors: flex flex-col w-full min-h-[200px] flex-1

File Status Badge System:
- Added: bg-green-100 text-green-800 (green status badge)
- Modified: bg-yellow-100 text-yellow-800 (yellow status badge)
- Deleted: bg-red-100 text-red-800 (red status badge)
- Renamed: bg-cyan-100 text-cyan-800 (cyan status badge)
- Copied: bg-indigo-100 text-indigo-800 (indigo status badge)
- Status badges: inline-block px-1.5 py-0.5 rounded text-xs font-bold mr-2

Interactive Elements:
- Expand/collapse buttons: bg-transparent border border-gray-300 rounded px-2 py-1
- Button hover states: hover:bg-gray-200 with transition-colors duration-200
- File paths: font-mono font-normal text-gray-600 for monospace display
- Loading states: flex items-center justify-center h-full for centered display
- Error states: text-red-600 p-4 for consistent error styling

Methods Updated in SketchDiff2View:
- render(): Main component layout with Tailwind flexbox containers
- renderFileSelector(): File dropdown with focus states and disabled styling
- renderDiffContent(): Content routing with loading/error/empty state styling
- renderFileDiff(): Individual file diff sections with proper Monaco integration
- renderFileHeader(): File header with status badges and expand/collapse controls
- renderSingleFileExpandButton(): Header expand button with consistent styling
- renderSingleFileView(): Full-screen single file view with proper layout
- getFileStatusTailwindClasses(): New method mapping file status to Tailwind classes

Preserved Complex Functionality:
- Monaco editor height change handling and dynamic container sizing
- Comment forwarding from Monaco editor to chat input system
- File save operations with proper success/error notification
- File expansion state management for show/hide unchanged regions
- Range picker integration with commit selection and diff reloading
- Single/multi file view mode switching with proper layout adaptation
- Custom Monaco scrollbar hiding through global style injection
- All git service integration for diff data loading and file content retrieval
- Sticky file headers with proper z-index stacking for navigation
- Dynamic Monaco editor height adjustment with container synchronization
- Responsive file selector and range picker layout with flexible spacing

Both components now integrate properly with the project's Tailwind CSS
styling system by disabling shadow DOM while maintaining complete visual
and functional parity with their original LitElement implementations.

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

2 files changed

tree: 9eb466e6188a6b3279eadd1a924cad9069ee803c

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