commit	e08c7ffc8f1ec0cd3899d2fedad79f408b6dc2f9	[log] [tgz]
author	Philip Zeyliger <philip@bold.dev>	Fri Jun 06 13:22:12 2025 -0700
committer	Autoformatter <bot@sketch.dev>	Fri Jun 06 20:26:10 2025 +0000
tree	3e09e7b3a86faed4eaabb640eed0c4b148a9d8d6
parent	ba15aeb81e5fd3e98870eba91398dfb31d4cd6e9 [diff]

webui: add mobile interface with URL parameter switching

TL;DR: ?m and ?d should load mobile and desktop versions respectively.
It should auto-detect to the right onen and redirect. Server chooses
what to serve.

This took a few tries. Re-using the existing components didn't work,
despite repeated attempts. The prompt that eventually worked was:

	Sketch's webui uses lit and webcomponents. I want to create an alternate
	web ui, started with "/m" for mobile. Don't use the same components, but
	create a new mobile-shell component and a mobile-title, mobile-chat, and
	mobile-chat-input components. The design should be a title at the top, a
	simplified chat (that doesn't display tool cards or anything; just the
	messages, with user messages right-aligned and other messages left
	aligned), and an input for new messages. Do include an indicator for
	whether or not the agent is thinking. Again: this is a parallel
	implementation, intended for mobile screens. Use the "npm run dev"
	server to test it out and show me some screenshots. Use mobile browser
	sizes. Focus on simplicity in the CSS

It had some trouble with the data loading that took some iterations, and
it kept saying, "We're almost done" and giving up, but I coaxed it
through.

I'm not too sad right now about the duplication. We can see if there's
any traction.

~~~~

Add complete mobile-optimized interface for Sketch accessible via URL
parameters, providing seamless device-specific user experience.

Problem Analysis:
Sketch's existing web interface was designed for desktop use with complex
layouts, detailed toolbars, and mouse-focused interactions that don't
translate well to mobile devices. Mobile users needed a simplified,
touch-friendly interface optimized for smaller screens while maintaining
core functionality for coding assistance on mobile devices.

Implementation Changes:

1. Mobile-Specific Components:
   - Created mobile-shell as main container with mobile-optimized layout
   - Built mobile-title with connection status and clean header design
   - Implemented mobile-chat with simplified message bubbles and alignment
   - Developed mobile-chat-input with touch-friendly controls and auto-resize

2. URL Parameter-Based Interface Selection:
   - Added server-side parameter detection (?m for mobile, ?d for desktop)
   - Consolidated routing logic into main / handler with parameter checking
   - Eliminated separate URL paths in favor of clean parameter approach
   - Removed interface switching buttons for minimal UI approach

3. Intelligent Auto-Detection:
   - Implemented client-side device detection using screen size and touch capability
   - Automatic URL parameter addition for detected mobile devices
   - Graceful parameter-based overrides for user preference
   - Seamless redirection maintaining all URL context and query parameters

4. Mobile-Optimized Design:
   - iOS-style message bubbles with proper user/assistant alignment
   - Touch-friendly input controls with appropriate sizing
   - Responsive design scaling across mobile screen sizes
   - Animated thinking indicator with smooth dot animations
   - Clean, distraction-free interface focused on core chat functionality

5. Data Integration:
   - Reused existing DataManager and SSE infrastructure
   - Maintained real-time message updates via /stream endpoint
   - Implemented message aggregation using existing patterns
   - Preserved connection status and error handling functionality

Technical Details:
- Built using Lit web components for consistency with existing architecture
- Server parameter detection uses URL.Query().Has() for efficient checking
- Auto-detection preserves all existing query parameters during redirection
- Mobile components filter messages to show user, agent, and error types
- Responsive CSS with mobile-first design principles and touch optimization

Benefits:
- Seamless mobile experience with automatic device-appropriate interface
- Clean URL parameter approach (?m/?d) works with any route or session
- No UI clutter from interface switching buttons
- Maintains full real-time functionality on mobile devices
- Easy to bookmark and share mobile-specific URLs
- Preserves session context during interface switching

Testing:
- Verified auto-detection works across different mobile screen sizes
- Confirmed URL parameters function with complex session URLs
- Tested message sending, receiving, and real-time updates
- Validated thinking indicator and connection status display
- Ensured responsive design across portrait and landscape orientations

This implementation provides a complete mobile solution while maintaining
the full-featured desktop interface, enabling Sketch usage across all
device types with appropriate user experiences.

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

12 files changed

tree: 3e09e7b3a86faed4eaabb640eed0c4b148a9d8d6

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