From b24fb890203b0f24f0343d86ff0eb66a2ee4eabe Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Wed, 30 Sep 2026 14:14:28 -0700
Subject: [PATCH] fix(web): the New workbench prompt matches the mockup's
 title, raised composer and quiet focus (CL-9664)

---
 apps/web/src/pages/new-workbench-picker.tsx | 26 +++++++-
 apps/web/src/pages/new-workbench.css        | 68 +++++++++++++++------
 apps/web/src/shell/workbench-list.tsx       |  2 +-
 3 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx
index 223bbcb74..ac3c52f79 100644
--- a/apps/web/src/pages/new-workbench-picker.tsx
+++ b/apps/web/src/pages/new-workbench-picker.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { reportError } from "@corbits/error-sink";
 
+import { Microphone, Paperclip } from "@/lib/icons";
 import { useBench } from "../bench-context";
 import { workbenchKeys } from "../chat-path";
 import { NEW_WORKBENCH_TITLE, titleFromFirstMessage } from "@/auto-workbench-title";
@@ -81,7 +82,7 @@ export function NewWorkbenchPickerRoute() {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <StageTopBar crumbs={[{ label: "Workbenches" }, { label: "New" }]} />
+      <StageTopBar crumbs={[{ label: "Workbench" }, { label: "New" }]} />
       <div className="new-wrap">
         {create.isPending ? (
           // `delayMs={0}`: a genuine wait the instant the person sends.
@@ -102,7 +103,7 @@ export function NewWorkbenchPickerRoute() {
                 aria-label="What should we work on?"
                 placeholder="Describe the job — your co-worker sets up the rest"
                 value={prompt}
-                rows={3}
+                rows={1}
                 autoFocus
                 onChange={(event) => setPrompt(event.target.value)}
                 onKeyDown={(event) => {
@@ -113,6 +114,27 @@ export function NewWorkbenchPickerRoute() {
                 }}
               />
               <div className="new-composer-row">
+                {/* Attach: no stock attachment path exists on the new-workbench message. */}
+                <button
+                  type="button"
+                  className="new-icon-btn"
+                  aria-label="Attach"
+                  title="Attachments arrive once a workbench exists"
+                  disabled
+                >
+                  <Paperclip />
+                </button>
+                {/* Dictate: voice mode belongs to an open workbench, so it is unavailable here. */}
+                <button
+                  type="button"
+                  className="new-icon-btn"
+                  aria-label="Dictate"
+                  title="Voice starts inside a workbench"
+                  disabled
+                >
+                  <Microphone />
+                </button>
+                <span className="new-composer-spacer" />
                 <Button
                   type="submit"
                   aria-label="Start this workbench"
diff --git a/apps/web/src/pages/new-workbench.css b/apps/web/src/pages/new-workbench.css
index 9be24b543..bf1740575 100644
--- a/apps/web/src/pages/new-workbench.css
+++ b/apps/web/src/pages/new-workbench.css
@@ -1,51 +1,83 @@
 .new-wrap {
-  width: min(42rem, 100%);
-  margin: 0 auto;
-  padding: 18vh 1.5rem 3rem;
+  width: 100%;
+  max-width: 680px;
+  margin: 16vh auto 0;
+  padding: 0 24px;
 }
 
 .new-title {
-  margin: 0 0 1.5rem;
+  margin: 0 0 24px;
   text-align: center;
-  font-size: 1.75rem;
-  font-weight: 650;
+  font-size: 30px;
+  font-weight: 800;
   letter-spacing: -0.02em;
 }
 
 .new-composer {
-  border: 1px solid var(--border);
-  border-radius: 0.875rem;
-  background: var(--background);
-  box-shadow: 0 1px 2px rgb(43 38 39 / 5%);
+  padding: 16px 16px 10px 18px;
+  border-radius: 20px;
+  background: var(--surface);
+  box-shadow: var(--raised);
+  transition: box-shadow 150ms ease-out;
 }
 
 .new-composer:focus-within {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
+  box-shadow:
+    0 0 0 1px var(--line-strong),
+    0 6px 20px -6px rgb(0 0 0 / 18%);
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
 }
 
 .new-composer-input {
   display: block;
   width: 100%;
+  min-height: 32px;
   resize: none;
   border: 0;
   outline: none;
   background: transparent;
   font: inherit;
-  font-size: 1rem;
+  font-size: 15px;
   line-height: 1.5;
-  padding: 1rem 1.25rem 0.5rem;
+  padding: 5px 4px;
 }
 
 .new-composer-row {
   display: flex;
-  justify-content: flex-end;
-  padding: 0.5rem 0.75rem 0.75rem;
+  align-items: center;
+  gap: 4px;
+  padding-top: 14px;
+}
+
+.new-composer-spacer {
+  flex: 1;
+}
+
+.new-icon-btn {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--muted-foreground);
+}
+
+.new-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.new-icon-btn svg {
+  width: 18px;
+  height: 18px;
 }
 
 .new-hint {
-  margin: 1rem 0 0;
+  margin: 16px 0 0;
   text-align: center;
-  font-size: 0.8125rem;
+  font-size: 13px;
   color: var(--muted-foreground);
 }
diff --git a/apps/web/src/shell/workbench-list.tsx b/apps/web/src/shell/workbench-list.tsx
index 33fdb063a..11b1c5f85 100644
--- a/apps/web/src/shell/workbench-list.tsx
+++ b/apps/web/src/shell/workbench-list.tsx
@@ -139,10 +139,10 @@ function WorkerGroup({
   readonly onNavigate: (to: string) => void;
 }) {
   const { workers } = useBenchWorkers();
-  if (workers.length === 0) return null;
   return (
     <div className="panel-stack-group">
       <SectionLabel>Workers</SectionLabel>
+      {workers.length === 0 ? <p className="shell-panel-list-empty">No workers yet</p> : null}
       {workers.map((worker) => {
         const to = `/workers/${worker.agent.id}`;
         return (