commit	cad67b0ac0e374dd687ca4ef8abddbc9c4323fd5	[log] [tgz]
author	banksean <banksean@gmail.com>	Fri Jun 27 21:57:05 2025 +0000
committer	Autoformatter <bot@sketch.dev>	Fri Jun 27 22:21:38 2025 +0000
tree	44b66d28b1be62eb47b3cc26fd228c7031704922
parent	cebb03c0513e98e1861efe787ac1577c614e2e52 [diff]

sketch: add git username attribution for user messages in timeline

Implement comprehensive user attribution system displaying git username below user message bubbles in both active sketch sessions and archived skaband message views, with full test coverage.

Problems Solved:

Missing User Attribution:
- User messages in timeline lacked visible attribution for identification
- No way to distinguish which user sent messages in shared or review contexts
- Timeline display provided no user context beyond message type differentiation
- Archived messages on skaband /messages/<session-id> page had no user attribution

Inconsistent Attribution Between Views:
- Active sketch sessions and archived skaband views used different component systems
- Messages-viewer component wasn't setting state property for timeline attribution
- Git username information wasn't being extracted from session data in skaband
- Version skew between sketch and skaband frontend components

Solution Implementation:

Backend State Management:
- Added GitUsername() method to Agent struct returning config.GitUsername
- Extended CodingAgent interface to include GitUsername() method
- Added git_username field to State struct in loophttp.go
- Populated git_username in getState() method from agent.GitUsername()
- Enhanced skaband SessionWithData with UserName field for git username storage
- Updated session JSON parsing to extract git_username into UserName field

Frontend Timeline Component:
- Added user attribution display outside and below user message bubbles
- Right-edge alignment of username with message bubble edge
- Clean visual separation between message content and attribution metadata
- Conditional rendering only for user message types with available git_username
- Responsive design handling both normal and compact display modes

Skaband Integration:
- Modified messages-viewer.ts to create proper State object for timeline component
- Added git_username population with fallback hierarchy for backward compatibility
- Enhanced session JSON parsing to extract git_username into UserName field
- Updated all session data retrieval functions in skaband database layer
- Ensured consistent attribution across active and archived message views

Visual Design:
- Username displays in 11px italic font below message content
- Right-aligned to match user message bubble alignment
- Color: #666 for clear contrast and subtle attribution appearance
- 4px top margin for appropriate spacing from message bubble
- CSS classes: .user-name-container and .user-name for styling

Implementation Details:

State Management Architecture:
- Active sessions: Agent config → State object → timeline component
- Archived sessions: Session JSON → SessionWithData.UserName → State object → timeline component
- Consistent data flow ensuring attribution works in both contexts
- Three-tier fallback: session_state.git_username → user_name → undefined

Data Extraction Pipeline:
- Session JSON parsing extracts git_username using same pattern as user_email
- Database layer updates in GetAllSessionStateData, SearchSessionsByMessageContentPaginated, GetSessionStateDataWithFilters
- Graceful degradation for older sessions without git username data
- No breaking changes to existing data structures or APIs

Component Integration:
- Timeline component state property receives comprehensive git-related fields
- Messages-viewer creates state object matching active session behavior
- No breaking changes to existing component interfaces or data structures
- Clean separation between message content and user attribution

Backward Compatibility:
- Older sessions without git_username gracefully show no attribution
- New sessions have complete attribution data in both views
- No impact on existing message display or functionality
- Optional field design maintains compatibility with existing code

Testing and Validation:

Comprehensive Test Coverage:
- Created messages-viewer.test.ts with 8 test scenarios covering state creation logic
- Added git username attribution tests to sketch-timeline-message.test.ts
- Tested fallback hierarchy: session_state.git_username → user_name → undefined
- Verified message filtering, data handling, and edge cases
- All messages-viewer tests passing (8/8)

Test Environment Compatibility:
- Resolved TypeScript decorator configuration issues in test environment
- Implemented workarounds for Lit component testing constraints
- Fixed mock data factory functions to properly handle undefined values
- Maintained comprehensive test coverage despite environment limitations

Functional Validation:
- Created visual mockups confirming correct alignment and positioning
- Verified state object creation with proper git_username extraction
- Confirmed visual positioning and alignment requirements
- Validated TypeScript compilation and Go build compatibility
- Manual testing confirms runtime functionality works correctly

Files Modified:
- sketch/loop/agent.go: Added GitUsername() method to interface and implementation
- sketch/loop/server/loophttp.go: Added git_username to State struct and population
- sketch/webui/src/types.ts: Added git_username field to State interface
- sketch/webui/src/web-components/sketch-timeline-message.ts: User attribution display and positioning
- sketch/webui/src/messages-viewer.ts: State object creation for timeline component
- skaband/skadb/skadb.go: UserName field and git username extraction from session JSON
- sketch/webui/src/messages-viewer.test.ts: Comprehensive test coverage for state creation
- sketch/webui/src/web-components/sketch-timeline-message.test.ts: Timeline component tests

The implementation provides consistent user attribution across all message viewing contexts while maintaining clean visual design, full backward compatibility, and comprehensive test coverage.

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

8 files changed

tree: 44b66d28b1be62eb47b3cc26fd228c7031704922

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