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
diff --git a/webui/src/types.ts b/webui/src/types.ts
index 2ecd412..f79e35d 100644
--- a/webui/src/types.ts
+++ b/webui/src/types.ts
@@ -89,6 +89,7 @@
inside_working_dir?: string;
todo_content?: string;
skaband_addr?: string;
+ link_to_github?: boolean;
}
export interface TodoItem {
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 967f502..29e12ba 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1352,6 +1352,7 @@
.toolCalls=${this.containerState?.outstanding_tool_calls || []}
.firstMessageIndex=${this.containerState?.first_message_index ||
0}
+ .state=${this.containerState}
></sketch-timeline>
</div>
</div>
diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
index 0e93604..dd37d1f 100644
--- a/webui/src/web-components/sketch-container-status.test.ts
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -44,7 +44,7 @@
);
// Show details to access the popup elements
- component.locator(".info-toggle").click();
+ await component.locator(".info-toggle").click();
await expect(component.locator("#initialCommit")).toContainText(
mockCompleteState.initial_commit.substring(0, 8),
@@ -99,7 +99,7 @@
await expect(component.locator("#hostname")).toContainText("partial-host");
// Show details to access the popup elements
- component.locator(".info-toggle").click();
+ await component.locator(".info-toggle").click();
await expect(component.locator("#messageCount")).toContainText("10");
const expectedTotalInputTokens =
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index 2199342..560044a 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -336,6 +336,43 @@
.github-link:hover {
text-decoration: underline;
}
+
+ .commit-info-container {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .commit-info-container .copy-icon {
+ opacity: 0.7;
+ display: flex;
+ align-items: center;
+ }
+
+ .commit-info-container .copy-icon svg {
+ vertical-align: middle;
+ }
+
+ .commit-info-container:hover .copy-icon {
+ opacity: 1;
+ }
+
+ .octocat-link {
+ color: #586069;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ transition: color 0.2s ease;
+ }
+
+ .octocat-link:hover {
+ color: #0366d6;
+ }
+
+ .octocat-icon {
+ width: 16px;
+ height: 16px;
+ }
`;
constructor() {
@@ -533,6 +570,8 @@
return {
formatted: `${match[1]}/${match[2]}`,
url: `https://github.com/${match[1]}/${match[2]}`,
+ owner: match[1],
+ repo: match[2],
};
}
}
@@ -540,6 +579,20 @@
return null;
}
+ // Generate GitHub branch URL if linking is enabled
+ getGitHubBranchLink(branchName) {
+ if (!this.state?.link_to_github || !branchName) {
+ return null;
+ }
+
+ const github = this.formatGitHubRepo(this.state?.git_origin);
+ if (!github) {
+ return null;
+ }
+
+ return `https://github.com/${github.owner}/${github.repo}/tree/${branchName}`;
+ }
+
renderSSHSection() {
// Only show SSH section if we're in a Docker container and have session ID
if (!this.state?.session_id) {
@@ -665,52 +718,88 @@
>
${this.lastCommit
? this.lastCommit.pushedBranch
- ? html`<span class="commit-branch-indicator main-grid-commit"
- >${this.lastCommit.pushedBranch}</span
- >`
+ ? (() => {
+ const githubLink = this.getGitHubBranchLink(
+ this.lastCommit.pushedBranch,
+ );
+ return html`
+ <div class="commit-info-container">
+ <span
+ class="commit-branch-indicator main-grid-commit"
+ title="Click to copy: ${this.lastCommit
+ .pushedBranch}"
+ @click=${(e) => this.copyCommitInfo(e)}
+ >${this.lastCommit.pushedBranch}</span
+ >
+ <span class="copy-icon">
+ ${this.lastCommitCopied
+ ? html`<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <path d="M20 6L9 17l-5-5"></path>
+ </svg>`
+ : html`<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ x="9"
+ y="9"
+ width="13"
+ height="13"
+ rx="2"
+ ry="2"
+ ></rect>
+ <path
+ d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+ ></path>
+ </svg>`}
+ </span>
+ ${githubLink
+ ? html`<a
+ href="${githubLink}"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="octocat-link"
+ title="Open ${this.lastCommit
+ .pushedBranch} on GitHub"
+ @click=${(e) => e.stopPropagation()}
+ >
+ <svg
+ class="octocat-icon"
+ viewBox="0 0 16 16"
+ width="16"
+ height="16"
+ >
+ <path
+ fill="currentColor"
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+ />
+ </svg>
+ </a>`
+ : ""}
+ </div>
+ `;
+ })()
: html`<span class="commit-hash-indicator main-grid-commit"
>${this.lastCommit.hash.substring(0, 8)}</span
>`
: html`<span class="no-commit-indicator">N/A</span>`}
- <span class="copy-icon">
- ${this.lastCommitCopied
- ? html`<svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <path d="M20 6L9 17l-5-5"></path>
- </svg>`
- : html`<svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <rect
- x="9"
- y="9"
- width="13"
- height="13"
- rx="2"
- ry="2"
- ></rect>
- <path
- d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
- ></path>
- </svg>`}
- </span>
</div>
</div>
</div>
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 3fe519f..9ea1ced 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -1,7 +1,7 @@
import { css, html, LitElement, render } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { customElement, property, state } from "lit/decorators.js";
-import { AgentMessage } from "../types";
+import { AgentMessage, State } from "../types";
import { marked, MarkedOptions, Renderer, Tokens } from "marked";
import mermaid from "mermaid";
import DOMPurify from "dompurify";
@@ -12,6 +12,9 @@
message: AgentMessage;
@property()
+ state: State;
+
+ @property()
previousMessage: AgentMessage;
@property()
@@ -501,6 +504,43 @@
background-color: rgba(40, 167, 69, 0.15);
}
+ .commit-branch-container {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .commit-branch-container .copy-icon {
+ opacity: 0.7;
+ display: flex;
+ align-items: center;
+ }
+
+ .commit-branch-container .copy-icon svg {
+ vertical-align: middle;
+ }
+
+ .commit-branch-container:hover .copy-icon {
+ opacity: 1;
+ }
+
+ .octocat-link {
+ color: #586069;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ transition: color 0.2s ease;
+ }
+
+ .octocat-link:hover {
+ color: #0366d6;
+ }
+
+ .octocat-icon {
+ width: 14px;
+ height: 14px;
+ }
+
.commit-subject {
font-size: 13px;
color: #333;
@@ -1064,6 +1104,49 @@
}, 1500);
}
+ // Format GitHub repository URL to org/repo format
+ formatGitHubRepo(url) {
+ if (!url) return null;
+
+ // Common GitHub URL patterns
+ const patterns = [
+ // HTTPS URLs
+ /https:\/\/github\.com\/([^/]+)\/([^/\s.]+)(?:\.git)?/,
+ // SSH URLs
+ /git@github\.com:([^/]+)\/([^/\s.]+)(?:\.git)?/,
+ // Git protocol
+ /git:\/\/github\.com\/([^/]+)\/([^/\s.]+)(?:\.git)?/,
+ ];
+
+ for (const pattern of patterns) {
+ const match = url.match(pattern);
+ if (match) {
+ return {
+ formatted: `${match[1]}/${match[2]}`,
+ url: `https://github.com/${match[1]}/${match[2]}`,
+ owner: match[1],
+ repo: match[2],
+ };
+ }
+ }
+
+ return null;
+ }
+
+ // Generate GitHub branch URL if linking is enabled
+ getGitHubBranchLink(branchName) {
+ if (!this.state?.link_to_github || !branchName) {
+ return null;
+ }
+
+ const github = this.formatGitHubRepo(this.state?.git_origin);
+ if (!github) {
+ return null;
+ }
+
+ return `https://github.com/${github.owner}/${github.repo}/tree/${branchName}`;
+ }
+
render() {
// Calculate if this is an end of turn message with no parent conversation ID
const isEndOfTurn =
@@ -1265,18 +1348,75 @@
${commit.hash.substring(0, 8)}
</span>
${commit.pushed_branch
- ? html`
- <span
- class="commit-branch pushed-branch"
- title="Click to copy: ${commit.pushed_branch}"
- @click=${(e) =>
- this.copyToClipboard(
- commit.pushed_branch,
- e,
- )}
- >${commit.pushed_branch}</span
- >
- `
+ ? (() => {
+ const githubLink = this.getGitHubBranchLink(
+ commit.pushed_branch,
+ );
+ return html`
+ <div class="commit-branch-container">
+ <span
+ class="commit-branch pushed-branch"
+ title="Click to copy: ${commit.pushed_branch}"
+ @click=${(e) =>
+ this.copyToClipboard(
+ commit.pushed_branch,
+ e,
+ )}
+ >${commit.pushed_branch}</span
+ >
+ <span class="copy-icon">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="14"
+ height="14"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <rect
+ x="9"
+ y="9"
+ width="13"
+ height="13"
+ rx="2"
+ ry="2"
+ ></rect>
+ <path
+ d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+ ></path>
+ </svg>
+ </span>
+ ${githubLink
+ ? html`
+ <a
+ href="${githubLink}"
+ target="_blank"
+ rel="noopener noreferrer"
+ class="octocat-link"
+ title="Open ${commit.pushed_branch} on GitHub"
+ @click=${(e) =>
+ e.stopPropagation()}
+ >
+ <svg
+ class="octocat-icon"
+ viewBox="0 0 16 16"
+ width="14"
+ height="14"
+ >
+ <path
+ fill="currentColor"
+ d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+ />
+ </svg>
+ </a>
+ `
+ : ""}
+ </div>
+ `;
+ })()
: ``}
<span class="commit-subject"
>${commit.subject}</span
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 3dd17a2..c450330 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -2,7 +2,7 @@
import { PropertyValues } from "lit";
import { repeat } from "lit/directives/repeat.js";
import { customElement, property, state } from "lit/decorators.js";
-import { AgentMessage } from "../types";
+import { AgentMessage, State } from "../types";
import "./sketch-timeline-message";
import { Ref } from "lit/directives/ref";
@@ -31,6 +31,9 @@
@property({ attribute: false })
firstMessageIndex: number = 0;
+ @property({ attribute: false })
+ state: State | null = null;
+
static styles = css`
/* Hide views initially to prevent flash of content */
.timeline-container .timeline,
@@ -402,6 +405,7 @@
.previousMessage=${previousMessage}
.open=${false}
.firstMessageIndex=${this.firstMessageIndex}
+ .state=${this.state}
></sketch-timeline-message>`;
},
)}