fix(web): the sidebar chrome and the New page match the mockup pixel for pixel (CL-9679)

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;
@@ -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,

apps/web/src/pages/new-workbench-picker.tsx

@@ -107,10 +107,6 @@ export function NewWorkbenchPickerRoute() {
               voiceUnavailable="Voice starts inside a workbench"
               onSend={submit}
             />
-            <p className="new-hint">
-              No templates. Your co-worker asks what it needs, connects tools with you, and suggests
-              skills and workflows as you go.
-            </p>
           </>
         )}
       </div>

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);
-}

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 {

apps/web/src/shell/sidebar-footer.css

@@ -1,10 +1,11 @@
-/* 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;
 }
 
-/* The profile mark is a filled ink circle with a surface-colored initial. */
-.sb-profile [role="img"] {
-  background: var(--ink);
-  color: var(--surface);
+.sb-profile .wb-av {
+  width: 28px;
+  height: 28px;
+  font-size: 12.5px;
+  font-weight: 800;
 }