From 5ddf43e9684b14cc7a5005d9eabcb658054f7513 Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 16:46:54 -0700 Subject: [PATCH 1/3] fix(web): the sidebar chrome and the New page match the mockup pixel for pixel (CL-9679) --- apps/web/src/app.css | 2 +- apps/web/src/pages/new-workbench-picker.tsx | 4 --- apps/web/src/pages/new-workbench.css | 7 ----- apps/web/src/shell/chrome.css | 30 ++++++++++++++++----- apps/web/src/shell/sidebar-footer.css | 20 +++++++++++--- 5 files changed, 40 insertions(+), 23 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 1f8ff7c2b..5d13bdaee 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -2118,7 +2118,7 @@ a.drawer-li:hover, display: flex; align-items: center; gap: 8px; - padding: 8px 8px 0; + padding: 8px 0 0; margin-top: 6px; border-top: 1px solid var(--line); position: relative; diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx index e6e5ba2ee..2b1bc3a94 100644 --- a/apps/web/src/pages/new-workbench-picker.tsx +++ b/apps/web/src/pages/new-workbench-picker.tsx @@ -107,10 +107,6 @@ export function NewWorkbenchPickerRoute() { voiceUnavailable="Voice starts inside a workbench" onSend={submit} /> -

- No templates. Your co-worker asks what it needs, connects tools with you, and suggests - skills and workflows as you go. -

)} diff --git a/apps/web/src/pages/new-workbench.css b/apps/web/src/pages/new-workbench.css index 8f15aa8ec..88bac7ae4 100644 --- a/apps/web/src/pages/new-workbench.css +++ b/apps/web/src/pages/new-workbench.css @@ -18,10 +18,3 @@ outline: 2px solid var(--ring); outline-offset: 2px; } - -.new-hint { - margin: 16px 0 0; - text-align: center; - font-size: 13px; - color: var(--muted-foreground); -} diff --git a/apps/web/src/shell/chrome.css b/apps/web/src/shell/chrome.css index 2c172ee75..3a12ced5b 100644 --- a/apps/web/src/shell/chrome.css +++ b/apps/web/src/shell/chrome.css @@ -7,7 +7,7 @@ .shell-frame .shell-sidebar { background: transparent; border-right: 0; - padding: 10px 0 8px; + padding: 10px 8px 8px; } .shell-frame .shell-main { @@ -24,21 +24,34 @@ .shell-sidebar .shell-sidebar-brand-row { height: 40px; - padding: 0 10px 0 16px; + gap: 2px; + padding: 0 2px 0 8px; margin-bottom: 8px; } +.shell-sidebar .shell-sidebar-brand-row button { + width: 32px; + height: 32px; + padding: 0; +} + +.shell-sidebar .shell-sidebar-brand-row button svg { + width: 16px; + height: 16px; +} + .shell-sidebar .shell-sidebar-wordmark { padding-left: 0; } .shell-sidebar [data-slot="sidebar-panel-body"] { + margin: 0 -8px; padding: 0 8px; } .shell-sidebar .panel-stack { - gap: 14px; - padding: 4px 0; + gap: 18px; + padding: 0; } .shell-sidebar .panel-stack-group { @@ -47,6 +60,7 @@ .shell-sidebar .shell-panel-section-label { padding: 0 8px 4px; + margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0; @@ -109,9 +123,11 @@ color: var(--ink); } -.sb-bottom .sb-menu { - left: 8px; - right: 8px; +.shell-sidebar .shell-ch-row .wb-av { + width: 20px; + height: 20px; + font-size: 11px; + font-weight: 800; } .sb-menu-head > div b { diff --git a/apps/web/src/shell/sidebar-footer.css b/apps/web/src/shell/sidebar-footer.css index 501dbe613..6daa73a12 100644 --- a/apps/web/src/shell/sidebar-footer.css +++ b/apps/web/src/shell/sidebar-footer.css @@ -3,8 +3,20 @@ background: var(--surface-sunk); } -/* The profile mark is a filled ink circle with a surface-colored initial. */ -.sb-profile [role="img"] { - background: var(--ink); - color: var(--surface); +/* The mark is a 28px ink circle, off-center inside the 36px button like the mockup. */ +.sb-profile { + padding: 1px 6px; +} + +.sb-profile .wb-av { + width: 28px; + height: 28px; + font-size: 12.5px; + font-weight: 800; +} + +.sb-tools svg { + width: 16px; + height: 16px; + stroke-width: 2; } From ddb4bc22a7e63582696dd72bf62bcf4206ad268a Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 16:53:28 -0700 Subject: [PATCH 2/3] fix(web): the Tools button uses an 18px icon, 10px gap and 10px radius (CL-9679) --- apps/web/src/shell/sidebar-footer.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/web/src/shell/sidebar-footer.css b/apps/web/src/shell/sidebar-footer.css index 6daa73a12..b65bf4f1f 100644 --- a/apps/web/src/shell/sidebar-footer.css +++ b/apps/web/src/shell/sidebar-footer.css @@ -15,8 +15,15 @@ font-weight: 800; } +.sb-tools { + gap: 10px; + padding: 0 20px; + border-radius: 10px; + font-size: 14px; +} + .sb-tools svg { - width: 16px; - height: 16px; + width: 18px; + height: 18px; stroke-width: 2; } From 4e4f50f21d904307992a9cea960d2451c2401b23 Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 16:56:10 -0700 Subject: [PATCH 3/3] fix(web): the sidebar Tools button is a tonal pill, not an outlined card (CL-9679) --- apps/web/src/app.css | 24 +++++++++++++++--------- apps/web/src/shell/sidebar-footer.css | 18 ------------------ 2 files changed, 15 insertions(+), 27 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 5d13bdaee..37a6dd404 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -2138,34 +2138,40 @@ a.drawer-li:hover, .sb-profile:hover { background: var(--hover); } +/* A tonal pill one step off the canvas: no ring, no shadow, content leads. */ .sb-tools { flex: 1; height: 36px; + padding: 0 14px; border: 0; - border-radius: var(--r-md); - background: var(--surface); - box-shadow: var(--raised); + border-radius: 10px; + background: var(--hover); display: inline-flex; align-items: center; - justify-content: center; - gap: 8px; + justify-content: flex-start; + gap: 10px; font: inherit; - font-size: 13.5px; + font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; transition: - box-shadow 150ms ease-out, + background-color 120ms ease, transform 160ms var(--ease-out); } +.sb-tools svg { + width: 18px; + height: 18px; + stroke-width: 2; +} .sb-tools:hover { - box-shadow: var(--raised-hover); + background: color-mix(in srgb, var(--ink) 9%, transparent); } .sb-tools:active { transform: scale(0.97); } .sb-tools[data-active="true"] { - box-shadow: 0 0 0 1.5px var(--ink); + background: color-mix(in srgb, var(--ink) 12%, transparent); } .sb-profile:focus-visible, .sb-tools:focus-visible, diff --git a/apps/web/src/shell/sidebar-footer.css b/apps/web/src/shell/sidebar-footer.css index b65bf4f1f..1788bc30d 100644 --- a/apps/web/src/shell/sidebar-footer.css +++ b/apps/web/src/shell/sidebar-footer.css @@ -1,8 +1,3 @@ -/* Canvas surface is near-white; the Tools button sits on the sunk token. */ -[data-theme="canvas"] .sb-tools { - background: var(--surface-sunk); -} - /* The mark is a 28px ink circle, off-center inside the 36px button like the mockup. */ .sb-profile { padding: 1px 6px; @@ -14,16 +9,3 @@ font-size: 12.5px; font-weight: 800; } - -.sb-tools { - gap: 10px; - padding: 0 20px; - border-radius: 10px; - font-size: 14px; -} - -.sb-tools svg { - width: 18px; - height: 18px; - stroke-width: 2; -}