From ec165518b507a361c2fecfcb692d87bf258e079d Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Tue, 29 Sep 2026 22:57:01 -0700
Subject: [PATCH] fix(web): new workbench, onboarding, worker page, and theme
 polish match the mockups (CL-9589)

---
 .env.example                                  |  3 +
 apps/web/src/onboarding/onboarding-layout.tsx |  4 +-
 .../src/onboarding/provider-connect-step.tsx  | 32 ++++++---
 apps/web/src/onboarding/provider-rows.css     | 34 +++++++++
 apps/web/src/pages/new-workbench-picker.tsx   | 29 +++-----
 apps/web/src/pages/new-workbench.css          | 24 ++-----
 apps/web/src/pages/onboarding-page.tsx        | 23 +++++-
 apps/web/src/pages/worker-page.tsx            | 72 ++++++++++++++-----
 apps/web/src/settings/account-section.tsx     | 21 +-----
 apps/web/src/settings/styles.css              | 18 +++++
 apps/web/src/theme-tokens.css                 |  4 +-
 apps/web/src/voice/voice-overlay.css          |  5 ++
 apps/web/src/voice/voice-overlay.tsx          |  1 +
 docs/local-dev.md                             |  6 ++
 14 files changed, 188 insertions(+), 88 deletions(-)
 create mode 100644 apps/web/src/onboarding/provider-rows.css
 create mode 100644 apps/web/src/voice/voice-overlay.css

diff --git a/.env.example b/.env.example
index 81f55dde1..3f6ac84bb 100644
--- a/.env.example
+++ b/.env.example
@@ -10,6 +10,9 @@ DATABASE_URL=postgres://localhost:5432/workbench
 # Hub origin the web dev server proxies /api to.
 BASE_URL=http://localhost:3000
 # PORT=3000
+# Origin sign-in trusts. Set it to the hub origin whenever the hub is not on
+# :3000, or sign-up fails with "Invalid origin".
+# BETTER_AUTH_BASE_URL=http://localhost:3000
 
 # Durable hub state (git repos and assets). The default sits inside this
 # work tree, which needs the opt-in below. Tests never use this path.
diff --git a/apps/web/src/onboarding/onboarding-layout.tsx b/apps/web/src/onboarding/onboarding-layout.tsx
index 40f036ffc..212593b9f 100644
--- a/apps/web/src/onboarding/onboarding-layout.tsx
+++ b/apps/web/src/onboarding/onboarding-layout.tsx
@@ -5,13 +5,13 @@ const STEP_LABELS = ["Workspace", "Model", "Myra"] as const;
 
 /**
  * Single centered column with a step progress bar, matching the onboarding
- * mockup. `step` is the index of the current step (0-2).
+ * mockup. `step` is the index of the current step (0-2; 3 = all done).
  */
 export function OnboardingLayout({
   step,
   children,
 }: {
-  readonly step: 0 | 1 | 2;
+  readonly step: 0 | 1 | 2 | 3;
   readonly children: ReactNode;
 }) {
   return (
diff --git a/apps/web/src/onboarding/provider-connect-step.tsx b/apps/web/src/onboarding/provider-connect-step.tsx
index cb34a2484..f91afe014 100644
--- a/apps/web/src/onboarding/provider-connect-step.tsx
+++ b/apps/web/src/onboarding/provider-connect-step.tsx
@@ -2,6 +2,7 @@
 // derives the single offering it mints; a tenant that already resolves an
 // offering skips this step (see `resolveExistingOffering`).
 import { Button, Input, RadioGroup, RadioOption, Select } from "@corbits/react-ui";
+import { Cpu, Key, LinkSimple } from "@/lib/icons";
 import {
   cancelProviderLogin,
   credentialNameFor,
@@ -19,6 +20,7 @@ import type { FormEvent } from "react";
 import type { ModelProviderPlugin } from "@intx/types";
 
 import { fetchOllamaTags } from "./ollama-tags";
+import "./provider-rows.css";
 
 export type ProviderOption = {
   /** Stable option id: two OAuth providers share one plugin, so the plugin
@@ -346,14 +348,28 @@ export function ProviderConnectStep({
         value={selected ?? ""}
         onValueChange={selectOption}
       >
-        {PROVIDER_OPTIONS.map((candidate) => (
-          <RadioOption
-            key={candidate.id}
-            value={candidate.id}
-            label={candidate.label}
-            description={candidate.description}
-          />
-        ))}
+        {PROVIDER_OPTIONS.map((candidate) => {
+          const rowId = `provider-${candidate.id}`;
+          const RowIcon = candidate.local
+            ? Cpu
+            : candidate.oauthProvider !== undefined
+              ? LinkSimple
+              : Key;
+          return (
+            <div key={candidate.id} className="onboarding-provider-row">
+              <RadioOption value={candidate.id} id={rowId} describedBy={`${rowId}-desc`} />
+              <span className="onboarding-provider-icon" aria-hidden="true">
+                <RowIcon size={16} />
+              </span>
+              <label htmlFor={rowId} className="onboarding-provider-text">
+                <span className="onboarding-provider-name">{candidate.label}</span>
+                <span id={`${rowId}-desc`} className="onboarding-provider-desc">
+                  {candidate.description}
+                </span>
+              </label>
+            </div>
+          );
+        })}
       </RadioGroup>
       {option === undefined ? null : oauthProvider !== undefined ? (
         <p>
diff --git a/apps/web/src/onboarding/provider-rows.css b/apps/web/src/onboarding/provider-rows.css
new file mode 100644
index 000000000..75c3c691f
--- /dev/null
+++ b/apps/web/src/onboarding/provider-rows.css
@@ -0,0 +1,34 @@
+.onboarding-provider-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0;
+}
+
+.onboarding-provider-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.onboarding-provider-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  cursor: pointer;
+}
+
+.onboarding-provider-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.onboarding-provider-desc {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx
index 303bc085d..73f4150ab 100644
--- a/apps/web/src/pages/new-workbench-picker.tsx
+++ b/apps/web/src/pages/new-workbench-picker.tsx
@@ -2,8 +2,7 @@
 // posts the message so the worker starts.
 
 import { Button, toast } from "@corbits/react-ui";
-import { PaperPlaneRight } from "@/lib/icons";
-import { CHAT_STRINGS, WorkbenchLoadingState } from "@/chat";
+import { WorkbenchLoadingState } from "@/chat";
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { reportError } from "@corbits/error-sink";
@@ -30,12 +29,6 @@ export function describeWorkbenchCreateFailure(cause: unknown, refId?: string):
   return refId === undefined ? message : `${message} Reference: ${refId}`;
 }
 
-const SUGGESTIONS = [
-  "Review every pull request on a repository",
-  "Vet a vendor before we sign",
-  "Summarize what shipped each Friday",
-];
-
 /** A workbench's name is its opening ask, trimmed. */
 function workbenchName(prompt: string): string {
   const trimmed = prompt.trim();
@@ -92,7 +85,7 @@ export function NewWorkbenchPickerRoute() {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <StageTopBar crumbs={[{ label: CHAT_STRINGS.newWorkbenchAction }]} />
+      <StageTopBar crumbs={[{ label: "Workbenches" }, { label: "New" }]} />
       <div className="new-wrap">
         {create.isPending ? (
           // `delayMs={0}`: a genuine wait the instant the person sends.
@@ -100,7 +93,7 @@ export function NewWorkbenchPickerRoute() {
         ) : (
           <>
             <ProviderSkipBanner />
-            <h1 className="new-title">What should this workbench do?</h1>
+            <h1 className="new-title">What should we work on?</h1>
             <form
               className="new-composer"
               onSubmit={(event) => {
@@ -110,8 +103,8 @@ export function NewWorkbenchPickerRoute() {
             >
               <textarea
                 className="new-composer-input"
-                aria-label="What should this workbench do?"
-                placeholder="Describe the job. Your co-worker sets up the rest."
+                aria-label="What should we work on?"
+                placeholder="Describe the job — your co-worker sets up the rest"
                 value={prompt}
                 rows={3}
                 autoFocus
@@ -130,17 +123,13 @@ export function NewWorkbenchPickerRoute() {
                   disabled={prompt.trim() === "" || selectedTenantId === null}
                 >
                   Start
-                  <PaperPlaneRight size={16} strokeWidth={1.8} />
                 </Button>
               </div>
             </form>
-            <div className="new-suggestions" aria-label="Quick start">
-              {SUGGESTIONS.map((suggestion) => (
-                <button key={suggestion} type="button" onClick={() => setPrompt(suggestion)}>
-                  {suggestion}
-                </button>
-              ))}
-            </div>
+            <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>
diff --git a/apps/web/src/pages/new-workbench.css b/apps/web/src/pages/new-workbench.css
index 0faa4387a..9be24b543 100644
--- a/apps/web/src/pages/new-workbench.css
+++ b/apps/web/src/pages/new-workbench.css
@@ -43,25 +43,9 @@
   padding: 0.5rem 0.75rem 0.75rem;
 }
 
-.new-suggestions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-
-.new-suggestions button {
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background: var(--muted);
-  color: var(--foreground);
-  font: inherit;
+.new-hint {
+  margin: 1rem 0 0;
+  text-align: center;
   font-size: 0.8125rem;
-  padding: 0.375rem 0.75rem;
-  cursor: pointer;
-}
-
-.new-suggestions button:hover {
-  border-color: var(--border-strong, var(--border));
+  color: var(--muted-foreground);
 }
diff --git a/apps/web/src/pages/onboarding-page.tsx b/apps/web/src/pages/onboarding-page.tsx
index 3513fd241..0983fe39d 100644
--- a/apps/web/src/pages/onboarding-page.tsx
+++ b/apps/web/src/pages/onboarding-page.tsx
@@ -27,6 +27,7 @@ type GateState =
   | { readonly phase: "provider-setup"; readonly tenantId: string }
   | { readonly phase: "publishing-myra" }
   | { readonly phase: "installing"; readonly myraDeploy: WorkflowDeployInput }
+  | { readonly phase: "ready" }
   | {
       readonly phase: "setup-pending";
       readonly message: string;
@@ -170,7 +171,7 @@ export function OnboardingPage({ user }: { readonly user: SessionUser }) {
       (result) => {
         if (cancelled) return;
         if (result.kind === "ready") {
-          navigate("/");
+          setState({ phase: "ready" });
         } else if (result.code === "stock-capability-missing") {
           setState({ phase: "setup-pending", message: result.gap });
         } else {
@@ -258,6 +259,26 @@ export function OnboardingPage({ user }: { readonly user: SessionUser }) {
     );
   }
 
+  if (state.phase === "ready") {
+    return (
+      <OnboardingLayout step={3}>
+        <div className="onboarding-phase" key="ready">
+          <h1 className="onboarding-title">Myra is ready</h1>
+          <p className="onboarding-subtitle">
+            Describe the job and your co-worker sets up the rest.
+          </p>
+          <div className="onboarding-content">
+            <div className="onboarding-actions">
+              <Button variant="primary" onClick={() => navigate("/")}>
+                Start your first workbench
+              </Button>
+            </div>
+          </div>
+        </div>
+      </OnboardingLayout>
+    );
+  }
+
   if (state.phase === "setup-pending") {
     return (
       <OnboardingLayout step={2}>
diff --git a/apps/web/src/pages/worker-page.tsx b/apps/web/src/pages/worker-page.tsx
index 1a59a7a42..4f49cde55 100644
--- a/apps/web/src/pages/worker-page.tsx
+++ b/apps/web/src/pages/worker-page.tsx
@@ -9,6 +9,7 @@ import type { GrantEffect } from "@intx/types";
 
 import { WorkbenchAvatar } from "@/chat/avatar";
 import { isMyraAgent, listChatAgents, type ChatAgent } from "@/chat/threads-api";
+import { listWorkbenches } from "@/chat/workbench-tenants";
 import { ChatCircle } from "@/lib/icons";
 import { QueryView, describeApiError } from "@/lib/api-query";
 import { listTopLevelRuns } from "../agents-api";
@@ -269,27 +270,52 @@ function DetailsCard({
     queryFn: () => readAgentSource(tenantId, agent.id, agent.assetName),
   });
   const first = source.data?.declaredSources[0];
+  const runs = useQuery({
+    queryKey: [...tenantKeys.agents(tenantId), "runs", agent.id],
+    queryFn: () => listTopLevelRuns(tenantId),
+  });
+  const own = (runs.data ?? []).filter((run) => agent.addresses.includes(run.address));
+  const created = own.map((run) => Date.parse(run.createdAt)).sort((a, b) => a - b)[0];
   return (
     <Card className="p-5">
       <CardTitle className="text-[14px]">Details</CardTitle>
       <dl className="mt-3 grid grid-cols-[90px_1fr] gap-y-2 text-[13.5px]">
         <dt className="text-(--ink-3)">Model</dt>
         <dd>{first === undefined ? "…" : `${first.provider} · ${first.model}`}</dd>
+        {created === undefined ? null : (
+          <>
+            <dt className="text-(--ink-3)">Created</dt>
+            <dd>
+              {new Date(created).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+            </dd>
+          </>
+        )}
+        {runs.data === undefined ? null : (
+          <>
+            <dt className="text-(--ink-3)">Runs</dt>
+            <dd className="tabular-nums">{own.length}</dd>
+          </>
+        )}
       </dl>
     </Card>
   );
 }
 
 export function WorkerRoute({ agentId }: { readonly agentId: string }) {
-  const { selectedTenantId, benchMemberships } = useBench();
+  const { selectedTenantId } = useBench();
   const agentsQuery = useTenantQuery(
     tenantKeys.agents(selectedTenantId ?? "none"),
     selectedTenantId !== null,
     () => listChatAgents(selectedTenantId as string),
   );
-  const benchName =
-    benchMemberships.find((member) => member.tenantId === selectedTenantId)?.tenantName ??
-    "workbench";
+  // The workspace is not a bench; the worker's workbench is one of its child
+  // tenants, the same rows the sidebar lists.
+  const benches = useQuery({
+    queryKey: tenantKeys.workbenches(selectedTenantId ?? "none"),
+    enabled: selectedTenantId !== null,
+    queryFn: () => listWorkbenches(selectedTenantId as string),
+  });
+  const bench = benches.data?.[0];
 
   return (
     <div className="flex h-full min-h-0 flex-col">
@@ -326,18 +352,23 @@ export function WorkerRoute({ agentId }: { readonly agentId: string }) {
                       />
                       <div className="min-w-0 flex-1">
                         <h1 className="text-[24px] font-extrabold">{agent.name}</h1>
+                        {isMyraAgent(agent) ? (
+                          <p className="mt-0.5 text-[14px] text-(--ink-2)">Your assistant</p>
+                        ) : null}
                         <p className="mt-1 flex items-center gap-2 text-[14px] text-(--ink-2)">
                           <StatusPill tone={status.tone} />
                           {status.text}
                         </p>
                       </div>
-                      <Link
-                        to={workbenchPath(selectedTenantId)}
-                        className="inline-flex h-9 items-center gap-2 rounded-(--r-md) bg-(--primary) px-4 text-[14px] font-bold text-(--primary-foreground)"
-                      >
-                        <ChatCircle />
-                        Open {benchName}
-                      </Link>
+                      {bench === undefined ? null : (
+                        <Link
+                          to={workbenchPath(bench.id)}
+                          className="inline-flex h-9 items-center gap-2 rounded-(--r-md) bg-(--primary) px-4 text-[14px] font-bold text-(--primary-foreground)"
+                        >
+                          <ChatCircle />
+                          Open {bench.title}
+                        </Link>
+                      )}
                     </div>
                     <div className="grid items-start gap-6 md:grid-cols-[minmax(0,1fr)_300px]">
                       <div>
@@ -348,12 +379,19 @@ export function WorkerRoute({ agentId }: { readonly agentId: string }) {
                         <DetailsCard tenantId={selectedTenantId} agent={agent} />
                         <Card className="p-5">
                           <CardTitle className="text-[14px]">Workbench</CardTitle>
-                          <Link
-                            to={workbenchPath(selectedTenantId)}
-                            className="mt-2 block text-[13.5px] font-semibold underline-offset-2 hover:underline"
-                          >
-                            {benchName}
-                          </Link>
+                          {benches.data === undefined || benches.data.length === 0 ? (
+                            <p className="mt-2 text-[13.5px] text-(--ink-3)">No workbenches yet.</p>
+                          ) : (
+                            benches.data.map((item) => (
+                              <Link
+                                key={item.id}
+                                to={workbenchPath(item.id)}
+                                className="mt-2 block text-[13.5px] font-semibold underline-offset-2 hover:underline"
+                              >
+                                {item.title}
+                              </Link>
+                            ))
+                          )}
                         </Card>
                       </aside>
                     </div>
diff --git a/apps/web/src/settings/account-section.tsx b/apps/web/src/settings/account-section.tsx
index 953df803e..71a33be3c 100644
--- a/apps/web/src/settings/account-section.tsx
+++ b/apps/web/src/settings/account-section.tsx
@@ -2,12 +2,13 @@
 // The Agent card was removed — nothing there could change until a hub
 // preference store exists to write it to.
 
-import { Avatar, Badge, Button, toast } from "@corbits/react-ui";
+import { Badge, Button, toast } from "@corbits/react-ui";
 import { ChatCircleDots, Copy, SignOut } from "@/lib/icons";
 import { useQuery } from "@tanstack/react-query";
 
 import { QueryView, toAPIQuery } from "@/lib/api-query";
 import { resolveAvatarFill } from "@/chat";
+import { IdentityAvatar } from "@/chat/avatar";
 import webPackage from "../../package.json";
 import { getAccount, type Account } from "./api";
 import { Segmented, SettingsGroup, SettingsRow } from "./rows";
@@ -42,17 +43,6 @@ export function AccountSection({ onSignOut }: { readonly onSignOut?: () => void
   );
 }
 
-/** First and (if present) second-word initials, upper-cased. Falls back to
- * "?" for an empty name rather than rendering a blank avatar. */
-function initialsOf(name: string): string {
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length === 0) return "?";
-  const first = words[0]?.charAt(0) ?? "";
-  const second = words.length > 1 ? (words[1]?.charAt(0) ?? "") : "";
-  const initials = `${first}${second}`.toUpperCase();
-  return initials.length > 0 ? initials : "?";
-}
-
 async function copyEmail(email: string): Promise<void> {
   try {
     await navigator.clipboard.writeText(email);
@@ -94,12 +84,7 @@ export function AccountSectionView({
                 height={40}
               />
             ) : (
-              <Avatar
-                initials={initialsOf(name)}
-                label={name}
-                size="lg"
-                className={fill.className}
-              />
+              <IdentityAvatar kind="person" name={name} principalId={id} />
             )}
             {name}
           </span>
diff --git a/apps/web/src/settings/styles.css b/apps/web/src/settings/styles.css
index 28f2018aa..05eebf457 100644
--- a/apps/web/src/settings/styles.css
+++ b/apps/web/src/settings/styles.css
@@ -729,3 +729,21 @@
   width: auto;
   min-width: 10rem;
 }
+
+/* Active settings row: ink on a hover wash; orange is accent-only. */
+.settings-nav [data-slot="sidebar-item-row"] > div:has(button[aria-current="true"]) {
+  background: var(--hover);
+}
+
+.settings-nav [data-slot="sidebar-item-row"] > div:has(button[aria-current="true"]) > button {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.settings-nav .settings-nav-advanced > summary {
+  margin: 0 0 0.2rem;
+  padding: 0.25rem 0.42rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ink-2);
+}
diff --git a/apps/web/src/theme-tokens.css b/apps/web/src/theme-tokens.css
index e2ac458d8..26d253878 100644
--- a/apps/web/src/theme-tokens.css
+++ b/apps/web/src/theme-tokens.css
@@ -120,8 +120,8 @@
 /* Canvas: the warm Corbits cream. */
 [data-theme="canvas"] {
   --canvas: var(--cream);
-  --surface: #fff;
-  --surface-sunk: color-mix(in srgb, var(--cream) 38%, #fff);
+  --surface: color-mix(in srgb, var(--cream) 30%, #fff);
+  --surface-sunk: color-mix(in srgb, var(--cream) 55%, #fff);
   --ink-2: var(--charcoal-soft);
   --ink-3: color-mix(in srgb, var(--charcoal) 68%, #fff);
   --hover: rgb(43 38 39 / 5%);
diff --git a/apps/web/src/voice/voice-overlay.css b/apps/web/src/voice/voice-overlay.css
new file mode 100644
index 000000000..9915f9386
--- /dev/null
+++ b/apps/web/src/voice/voice-overlay.css
@@ -0,0 +1,5 @@
+/* Opaque themed backdrop: the thread must not ghost through the voice view. */
+.voice[role="dialog"] {
+  background: var(--canvas);
+  backdrop-filter: none;
+}
diff --git a/apps/web/src/voice/voice-overlay.tsx b/apps/web/src/voice/voice-overlay.tsx
index 80fd29c5a..b97cee8eb 100644
--- a/apps/web/src/voice/voice-overlay.tsx
+++ b/apps/web/src/voice/voice-overlay.tsx
@@ -1,5 +1,6 @@
 // Voice mode: covers the thread, sends each final utterance as an ordinary
 // message, and speaks the worker's replies. Browser speech only.
+import "./voice-overlay.css";
 import { useEffect, useRef, useState, type CSSProperties } from "react";
 
 import { CorbitAvatar, avatarColorForPrincipal } from "@/chat/avatar";
diff --git a/docs/local-dev.md b/docs/local-dev.md
index 64155bc70..8f60950de 100644
--- a/docs/local-dev.md
+++ b/docs/local-dev.md
@@ -13,6 +13,12 @@ Tool-heavy turns (several tool calls in one turn) take noticeably longer
 on small local models. That is a model-capability limit, not a platform
 bug.
 
+## Hub on another port
+
+Sign-in trusts one origin, `BETTER_AUTH_BASE_URL` (default
+`http://localhost:3000`). If the hub listens elsewhere, set it to the hub
+origin in `.env`, or sign-up fails with "Invalid origin".
+
 ## Migrations after pulling
 
 `bun run dev` applies both the platform's own migrations and every