tree 14325a290001d13a482c116c83ee0b87aa7e36c5
parent a1762b94e6ddf5db0a0f6b7a5104fa236855320b
author philip.zeyliger <philip.zeyliger@gmail.com> 1749609494 -0700
committer Philip Zeyliger <philip@bold.dev> 1749609616 -0700

feat: add -link-to-github flag with Octocat icon for GitHub branch linking

Add internal flag to enable GitHub branch linking in both termui and webui
interfaces, displaying clickable Octocat icons next to copy icons for pushed
branches when working with GitHub repositories.

Problem Analysis:
When sketch pushes branches to GitHub repositories, users had no direct way to
navigate from the sketch interface to view those branches on GitHub. Branch
names were displayed as plain text in both terminal and web interfaces,
requiring users to manually construct GitHub URLs or switch to external tools
to view their pushed changes on the GitHub platform.

This created friction in the workflow, especially for teams collaborating on
GitHub where quick access to branch views, pull request creation, and code
review processes are essential parts of the development workflow.

Implementation Changes:

1. Command Line Flag Infrastructure:
   - Added linkToGitHub bool field to CLIFlags struct
   - Configured -link-to-github as internal flag with false default
   - Integrated flag passing through ContainerConfig and AgentConfig chains
   - Added flag to dockerimg launch command arguments for container mode

2. Agent Interface Enhancement:
   - Added LinkToGitHub() method to CodingAgent interface
   - Implemented method in Agent struct returning config.LinkToGitHub
   - Extended State struct with link_to_github JSON field (with omitempty)
   - Updated getState() function to include agent's GitHub linking preference
   - Updated mockAgent in tests to support new LinkToGitHub() method

3. Terminal UI GitHub Integration:
   - Added isGitHubRepo() method with regex pattern matching for GitHub URLs
   - Implemented getGitHubBranchURL() for constructing GitHub branch links
   - Enhanced commit message display to show GitHub URLs when flag enabled
   - Updated exit summary to include GitHub links for single and multiple branches
   - Added regex import for GitHub URL pattern validation

4. Web UI TypeScript Integration:
   - Added link_to_github field to State interface in types.ts
   - Enhanced formatGitHubRepo() method to return owner/repo extraction
   - Implemented getGitHubBranchLink() helper in container status component
   - Created parallel helper methods in timeline message component

5. Container Status Component Updates:
   - Added commit-info-container with flexbox layout for proper alignment
   - Implemented layout: Branch Text → Copy Icon → Octocat Icon
   - Added 16px clipboard copy icon with opacity states (70% default, 100% on hover)
   - Integrated 16px Octocat SVG icon as clickable GitHub link
   - Maintained existing copyCommitInfo click functionality for branch text

6. Timeline Message Component Enhancement:
   - Added commit-branch-container for consistent layout structure
   - Implemented same layout pattern: Branch Text → Copy Icon → Octocat Icon
   - Added 14px clipboard and Octocat icons matching timeline scale
   - Enhanced CSS with hover states and proper alignment
   - Preserved existing copyToClipboard functionality for branch text clicks

7. Data Flow Integration:
   - Updated sketch-timeline component to pass state to message components
   - Modified sketch-app-shell to provide containerState to timeline
   - Ensured proper state propagation through component hierarchy
   - Maintained backward compatibility with existing state management

Technical Details:
- GitHub URL detection supports HTTPS, SSH, and git protocol formats
- Regex patterns: ^https://github\.com/, ^git@github\.com:, ^git://github\.com/
- Link format: https://github.com/{owner}/{repo}/tree/{branch-name}
- Internal flag prevents exposure in user-visible help documentation
- SVG Octocat uses official GitHub icon design with 16-point grid
- Copy icons use standard clipboard SVG with overlapping rectangles design
- Event propagation properly stopped to prevent interference with copy actions
- Conditional rendering ensures icons only appear when GitHub links available
- Flexbox layout ensures proper alignment across different screen sizes
- CSS transitions provide smooth hover state animations

Benefits:
- Direct navigation from sketch UI to GitHub branch views
- Seamless integration with GitHub-based development workflows
- Enhanced productivity for teams using GitHub collaboration features
- Clear functional separation: text copy vs external GitHub link
- Familiar clipboard icon reinforces copy functionality
- Improved visual hierarchy guides user interaction patterns
- Maintains existing copy-to-clipboard functionality as fallback
- Zero impact on non-GitHub repositories or when flag disabled
- Consistent experience across terminal and web interfaces
- Enhanced accessibility with distinct click targets and hover states

Testing:
- Verified flag parsing and configuration propagation through all layers
- Confirmed GitHub URL detection works with various GitHub URL formats
- Tested conditional rendering in both web UI components
- Validated CSS styling and hover effects for GitHub branch links
- Ensured backward compatibility with non-GitHub repositories
- Verified TypeScript compilation with new template structures
- Confirmed proper icon positioning and spacing in test layouts
- Validated hover states and opacity transitions function correctly
- All Go tests and TypeScript compilation successful

This enhancement bridges the gap between sketch's development environment and
GitHub's collaboration platform, enabling more efficient workflows for teams
using GitHub repositories while preserving full functionality for other Git
hosting solutions. The visual design provides intuitive flow from local
operations (copy) to external actions (GitHub), creating a more organized
and user-friendly interface for branch management workflows.

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