diff --git a/src/Client/CanvasPane.fs b/src/Client/CanvasPane.fs index 9eabe0f..6717bbe 100644 --- a/src/Client/CanvasPane.fs +++ b/src/Client/CanvasPane.fs @@ -51,6 +51,18 @@ let private shareIcon = ] ] +/// The Start-session glyph (a filled play triangle), styled like `shareIcon` (`btn-icon`, 24×24, +/// `currentColor`) so the icon-only launch button matches the Share and Archive buttons. +let private playIcon = + Svg.svg [ + svg.className "btn-icon" + svg.viewBox (0, 0, 24, 24) + svg.fill "currentColor" + svg.children [ + Svg.path [ svg.d "M8 5v14l11-7z" ] + ] + ] + /// Render the liveness dot only for AgentDocs. A SystemView (e.g. the beads dashboard) is /// server-generated and has no owner session, so liveness is meaningless and the dot is omitted. let private livenessDotFor (bridgeLiveness: Map) (doc: CanvasDoc) = @@ -296,7 +308,7 @@ let view (state: CanvasPaneState) (focusedDoc: (WorktreeStatus * CanvasDoc) opti prop.className "canvas-launch-btn" prop.onClick (fun _ -> launchSession ()) prop.title "Start a session to work on the selected canvas doc" - prop.text "▶ Start session" + prop.children [ playIcon ] ] match activeDoc with | Some d when d.Kind = AgentDoc -> diff --git a/src/Client/index.html b/src/Client/index.html index 9cc9757..4bfd41a 100644 --- a/src/Client/index.html +++ b/src/Client/index.html @@ -591,7 +591,7 @@ .canvas-tab-bar { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; padding: 4px 8px; background: #181825; border-bottom: 1px solid #313244; @@ -600,7 +600,7 @@ .canvas-tab-group { display: flex; gap: 2px; - overflow-x: auto; + flex-wrap: wrap; flex: 1; min-width: 0; } @@ -640,10 +640,11 @@ flex-shrink: 0; background: none; border: 1px solid #45475a; border-radius: 4px; color: #a6adc8; cursor: pointer; - padding: 2px 8px; font-size: 0.75em; font-family: inherit; + padding: 2px 6px; display: flex; align-items: center; transition: color 0.15s, border-color 0.15s, opacity 0.15s; opacity: 0.6; } + .canvas-launch-btn .btn-icon { width: 14px; height: 14px; } .canvas-launch-btn:hover { color: #a6e3a1; border-color: #a6e3a1; opacity: 1; } .canvas-pos-btn, .canvas-size-btn { background: #313244; border: 1px solid #45475a; border-radius: 4px; diff --git a/src/Tests/CanvasPhase4Tests.fs b/src/Tests/CanvasPhase4Tests.fs index b53089e..2ecf8e6 100644 --- a/src/Tests/CanvasPhase4Tests.fs +++ b/src/Tests/CanvasPhase4Tests.fs @@ -180,8 +180,8 @@ type CanvasPhase4Tests() = let! count = launchBtn.CountAsync() Assert.That(count, Is.EqualTo(1), "Start session button should be visible when no bridge is alive") - let! text = launchBtn.TextContentAsync() - Assert.That(text, Does.Contain("Start session"), "Button should say 'Start session'") + let! title = launchBtn.GetAttributeAsync("title") + Assert.That(title, Does.Contain("Start a session"), "Button tooltip should describe starting a session") } []