commit	0113be559976cfb1ce0e78a9a69c19a6394b2c3d	[log] [tgz]
author	Philip Zeyliger <philip@bold.dev>	Sat Jun 07 23:53:41 2025 +0000
committer	Autoformatter <bot@sketch.dev>	Mon Jun 09 19:47:55 2025 +0000
tree	103ea687419bd792471f057727d2f174428b4215
parent	8ad17ba9f185be76a4e715d9f21868b0cf27b366 [diff]

webui: add skaband navigation link with image to desktop and mobile

Add conditional linking functionality to make the 'sketch' title in both desktop
and mobile web UI clickable when a skaband address is configured, displaying
the sketch.dev.png image alongside the text for enhanced branding and navigation
back to the skaband dashboard.

Problem Analysis:
When users access sketch through skaband (the hosted service), they lose easy
navigation back to their skaband dashboard since the sketch title in the header
was always static text. This created a disconnected experience between the
skaband interface and individual sketch sessions, and lacked visual branding
consistency with the hosted service. The feature needed to work in both
container mode and unsafe mode deployments.

Implementation Changes:

1. Backend Infrastructure:
   - Added SkabandAddr() method to CodingAgent interface for state management
   - Enhanced State struct with skaband_addr field (with omitempty for clean JSON)
   - Modified getState() function to include agent's skaband address in responses
   - Updated mockAgent in tests to support new SkabandAddr() method

2. SkabandClient Integration:
   - Added Addr() method to SkabandClient to expose stored skaband server address
   - Updated Agent.SkabandAddr() to get address from existing SkabandClient
   - Leverages existing skaband infrastructure used for session history tools
   - No duplicate storage or additional configuration required

3. TypeScript Type Updates:
   - Regenerated webui/src/types.ts to include skaband_addr field in State interface
   - Maintained backward compatibility with existing state structure
   - Auto-generated types ensure type safety across Go/TypeScript boundary

4. Desktop Web UI Enhancement:
   - Modified sketch-app-shell.ts to conditionally render sketch title as link
   - Added conditional logic: renders link with image when skaband_addr exists
   - Uses target='_blank' and rel='noopener noreferrer' for secure external linking
   - Displays skaband_addr/sketch.dev.png image alongside 'sketch' text
   - Maintains existing appearance and behavior when no skaband address configured

5. Mobile Web UI Implementation:
   - Added skabandAddr property to mobile-title component
   - Implemented conditional rendering matching desktop functionality
   - Mobile-optimized CSS with appropriate image sizing (18px vs 20px desktop)
   - Integrated with existing mobile-shell state management infrastructure

6. CSS Styling Integration:
   - Added .banner-title a styles for seamless link appearance with flexbox layout
   - Configured color: inherit to match existing title styling
   - Added hover effects with opacity transition and underline for user feedback
   - Image styling with rounded corners and appropriate dimensions
   - Mobile-responsive design with media queries for different screen sizes

7. Test Coverage:
   - Updated test infrastructure to support new SkabandAddr() method
   - Comprehensive testing of state endpoint with and without skaband address
   - Verified omitempty behavior for clean JSON responses
   - All existing tests continue passing without modification

Technical Details:
- Uses omitempty JSON tag to exclude empty skaband addresses from API responses
- Leverages existing containerState property in web components for state access
- Maintains full backward compatibility with non-skaband sketch deployments
- Clean separation between configuration, state management, and presentation layers
- Flexbox layout for proper image and text alignment in banner links

Security Considerations:
- External links use target='_blank' with rel='noopener noreferrer'
- No user input validation needed since skaband_addr comes from server configuration
- Link destination controlled by deployment configuration, not user input
- Image source follows same security model as main skaband address

Benefits:
- Seamless navigation between sketch sessions and skaband dashboard
- Enhanced visual branding with sketch.dev.png image display
- Improved user experience for hosted skaband users across all device types
- Mobile-optimized responsive design for touch interfaces
- Zero impact on standalone sketch deployments
- Uses existing, tested skaband infrastructure without additional complexity

Testing:
- Verified end-to-end functionality with real sketch.dev skaband server
- Confirmed web UI displays clickable sketch logo link in desktop and mobile views
- Tested state endpoint returns correct skaband_addr from SkabandClient
- Validated responsive design across different screen sizes
- All Go tests and TypeScript compilation successful

This enhancement provides intuitive navigation for skaband users while
maintaining the existing experience for standalone sketch deployments,
creating a more cohesive and visually branded interface across all deployment
modes and device types.

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

8 files changed

tree: 103ea687419bd792471f057727d2f174428b4215

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