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
diff --git a/webui/src/web-components/mobile-shell.ts b/webui/src/web-components/mobile-shell.ts
index 583549d..ea9c305 100644
--- a/webui/src/web-components/mobile-shell.ts
+++ b/webui/src/web-components/mobile-shell.ts
@@ -151,6 +151,7 @@
<mobile-title
.connectionStatus=${this.connectionStatus}
.isThinking=${isThinking}
+ .skabandAddr=${this.state?.skaband_addr}
></mobile-title>
<mobile-chat
diff --git a/webui/src/web-components/mobile-title.ts b/webui/src/web-components/mobile-title.ts
index 95198fa..d000a3f 100644
--- a/webui/src/web-components/mobile-title.ts
+++ b/webui/src/web-components/mobile-title.ts
@@ -10,6 +10,9 @@
@property({ type: Boolean })
isThinking = false;
+ @property({ type: String })
+ skabandAddr?: string;
+
static styles = css`
:host {
display: block;
@@ -31,6 +34,26 @@
margin: 0;
}
+ .title a {
+ color: inherit;
+ text-decoration: none;
+ transition: opacity 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .title a:hover {
+ opacity: 0.8;
+ text-decoration: underline;
+ }
+
+ .title img {
+ width: 18px;
+ height: 18px;
+ border-radius: 3px;
+ }
+
.status-indicator {
display: flex;
align-items: center;
@@ -127,7 +150,18 @@
render() {
return html`
<div class="title-container">
- <h1 class="title">Sketch</h1>
+ <h1 class="title">
+ ${this.skabandAddr
+ ? html`<a
+ href="${this.skabandAddr}"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img src="${this.skabandAddr}/sketch.dev.png" alt="sketch" />
+ Sketch
+ </a>`
+ : html`Sketch`}
+ </h1>
<div class="status-indicator">
${this.isThinking
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 89ebcd5..967f502 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -164,6 +164,57 @@
text-overflow: ellipsis;
}
+ .banner-title a {
+ color: inherit;
+ text-decoration: none;
+ transition: opacity 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .banner-title a:hover {
+ opacity: 0.8;
+ text-decoration: underline;
+ }
+
+ .banner-title img {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ }
+
+ /* Mobile-specific styles for banner link */
+ @media (max-width: 768px) {
+ .title-container {
+ max-width: 50%; /* Allow more space on mobile */
+ }
+
+ .banner-title {
+ font-size: 16px; /* Slightly smaller on mobile */
+ }
+
+ .banner-title img {
+ width: 18px;
+ height: 18px;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .title-container {
+ max-width: 60%; /* Even more space on very small screens */
+ }
+
+ .banner-title {
+ font-size: 14px;
+ }
+
+ .banner-title img {
+ width: 16px;
+ height: 16px;
+ }
+ }
+
.slug-title {
margin: 0;
padding: 0;
@@ -1160,7 +1211,21 @@
return html`
<div id="top-banner">
<div class="title-container">
- <h1 class="banner-title">sketch</h1>
+ <h1 class="banner-title">
+ ${this.containerState?.skaband_addr
+ ? html`<a
+ href="${this.containerState.skaband_addr}"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img
+ src="${this.containerState.skaband_addr}/sketch.dev.png"
+ alt="sketch"
+ />
+ sketch
+ </a>`
+ : html`sketch`}
+ </h1>
<h2 class="slug-title">${this.slug}</h2>
</div>