diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index ce876aae5..1ba6ca163 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -1820,182 +1820,6 @@ tr.insights-row-clickable:hover {
   color: var(--muted-foreground);
 }
 
-/* A workbench transcript above, composer below. */
-.chat-thread-messages {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-bottom: 1rem;
-}
-.chat-thread-message {
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-}
-.chat-thread-body {
-  min-width: 0;
-  /* 16px minimum: keeps the transcript readable and matches the composer
-     below, and avoids mobile Safari's zoom-on-focus threshold. */
-  font-size: max(var(--text-base), 16px);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.55;
-}
-.chat-thread-message[data-author="me"] {
-  justify-content: flex-end;
-}
-.chat-thread-message[data-author="me"] .chat-thread-body {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  max-width: min(76ch, 78%);
-}
-.chat-thread-own-bubble {
-  background: var(--surface-sunk);
-  box-shadow: inset 0 0 0 1px var(--border);
-  padding: 0.625rem 0.875rem;
-  border-radius: 1rem 1rem 0.25rem 1rem;
-  overflow-wrap: anywhere;
-}
-.chat-thread-head {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  margin-bottom: 0.125rem;
-}
-.chat-thread-head b {
-  font-size: 0.875rem;
-  font-weight: 800;
-}
-.chat-thread-head time {
-  font-size: 0.75rem;
-  color: var(--muted-foreground);
-  font-variant-numeric: tabular-nums;
-}
-.chat-system-line {
-  margin: 0 0 0.5rem 2.75rem;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: var(--muted-foreground);
-}
-.chat-system-line b {
-  font-weight: 700;
-}
-.chat-thread-error {
-  margin: 0.5rem 0;
-  font-size: 0.82rem;
-  color: var(--destructive);
-}
-
-/* Shared composer: one lean full-width row (+, text, voice, send). */
-.chat-composer-box {
-  display: flex;
-  align-items: flex-end;
-  gap: 4px;
-  padding: 6px;
-  background: var(--surface);
-  border-radius: 22px;
-  box-shadow: var(--floating);
-  transition: box-shadow 150ms ease-out;
-}
-.chat-composer-box:focus-within {
-  box-shadow:
-    0 0 0 1px var(--line-strong),
-    0 6px 20px -6px rgb(0 0 0 / 18%);
-}
-.chat-composer-input {
-  flex: 1;
-  min-width: 0;
-  min-height: 32px;
-  max-height: 180px;
-  display: block;
-  resize: none;
-  border: 0;
-  background: transparent;
-  padding: 5px 4px;
-  font: inherit;
-  font-size: 15px;
-  line-height: 1.5;
-  color: var(--ink);
-}
-.chat-composer-input:focus {
-  outline: none;
-}
-.chat-composer-input::placeholder {
-  color: var(--ink-3);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.chat-composer-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.chat-composer-btn,
-.chat-composer-send {
-  display: grid;
-  place-items: center;
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  cursor: pointer;
-}
-.chat-composer-btn {
-  background: transparent;
-  color: var(--ink-2);
-}
-.chat-composer-voice {
-  background: var(--hover);
-  color: var(--ink);
-}
-.chat-composer-btn:hover:not(:disabled) {
-  background: var(--press);
-}
-.chat-composer-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-.chat-composer-send {
-  background: var(--ink);
-  color: var(--action);
-  transition:
-    transform 160ms var(--ease-out),
-    opacity 150ms ease;
-}
-.chat-composer-send:disabled {
-  cursor: default;
-  opacity: 0.2;
-}
-.chat-composer-send:not(:disabled):active {
-  transform: scale(0.92);
-}
-.chat-composer-send-spinner {
-  animation: chat-composer-spin 0.8s linear infinite;
-}
-@keyframes chat-composer-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .chat-composer-send-spinner {
-    animation-duration: 1e-6ms;
-  }
-}
-
-/* A workbench workbench: a left info column (activity, artifacts, approvals,
-   participants), the running chat in the main column, and an optional
-   sub-thread panel on the right. */
-.workbench-layout {
-  display: flex;
-  min-height: 0;
-  flex: 1;
-}
 .wb {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 0px;
@@ -2011,46 +1835,6 @@ tr.insights-row-clickable:hover {
   position: relative;
   min-width: 0;
 }
-.bench-pill {
-  position: absolute;
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 20;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 36px;
-  max-width: min(440px, calc(100% - 120px));
-  padding: 0 10px 0 6px;
-  border: 0;
-  border-radius: var(--r-full);
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  backdrop-filter: blur(12px);
-  box-shadow: var(--floating);
-  font-size: 13.5px;
-  color: var(--ink);
-  cursor: pointer;
-  transition:
-    box-shadow 150ms ease-out,
-    transform 160ms var(--ease-out);
-}
-.bench-pill:hover {
-  box-shadow: var(--overlay);
-}
-.bench-pill:active {
-  transform: translateX(-50%) scale(0.97);
-}
-.bench-pill b {
-  font-weight: 800;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.bench-pill-status {
-  color: var(--ink-3);
-  white-space: nowrap;
-}
 .drawer-cell {
   min-width: 0;
   overflow: hidden;
@@ -2266,34 +2050,12 @@ a.drawer-li:hover,
     pointer-events: auto;
   }
 }
-@media (max-width: 640px) {
-  .bench-pill-status {
-    display: none;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .wb,
   .drawer {
     transition: opacity 150ms ease-out;
   }
 }
-.workbench-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-.workbench-main-scroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding-top: 72px;
-}
-.workbench-main-composer {
-  flex-shrink: 0;
-  padding: 0.75rem 1rem;
-}
 .workbench-participants {
   display: flex;
   flex-wrap: wrap;
@@ -2309,25 +2071,6 @@ a.drawer-li:hover,
   align-items: center;
   gap: 0.35rem;
 }
-.workbench-replies-link {
-  display: block;
-  margin-top: 0.35rem;
-  padding: 0;
-  border: 0;
-  background: none;
-  font-size: 0.78rem;
-  color: var(--muted-foreground);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 120ms ease-out;
-}
-.chat-thread-message:hover .workbench-replies-link,
-.workbench-replies-link:focus-visible {
-  opacity: 1;
-}
-.workbench-replies-link:hover {
-  color: var(--foreground);
-}
 .workbench-subthread {
   display: flex;
   flex-direction: column;
diff --git a/apps/web/src/bench/bench-pill.css b/apps/web/src/bench/bench-pill.css
new file mode 100644
index 000000000..1370206b6
--- /dev/null
+++ b/apps/web/src/bench/bench-pill.css
@@ -0,0 +1,87 @@
+.bench-pill {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  max-width: min(440px, calc(100% - 120px));
+  padding: 0 10px 0 6px;
+  border: 0;
+  border-radius: var(--r-full);
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--floating);
+  font-size: 13.5px;
+  color: var(--ink);
+  cursor: pointer;
+  transition:
+    box-shadow 150ms ease-out,
+    transform 160ms var(--ease-out);
+}
+.bench-pill:hover {
+  box-shadow: var(--overlay);
+}
+.bench-pill:active {
+  transform: translateX(-50%) scale(0.97);
+}
+.bench-pill b {
+  font-weight: 800;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bench-pill-status {
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+@media (max-width: 640px) {
+  .bench-pill-status {
+    display: none;
+  }
+}
+
+.bench-pill .pulse {
+  position: relative;
+  flex: 0 0 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--action);
+}
+.bench-pill .pulse::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  border: 1.5px solid var(--action);
+  opacity: 0;
+  animation: bench-pill-pulse 1.8s var(--ease-out) infinite;
+}
+@keyframes bench-pill-pulse {
+  from {
+    transform: scale(0.6);
+    opacity: 0.8;
+  }
+  to {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bench-pill .pulse::after {
+    animation: none;
+  }
+}
+
+.bench-pill-worker {
+  font-size: 12.5px;
+  color: var(--ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
diff --git a/apps/web/src/bench/bench-pill.tsx b/apps/web/src/bench/bench-pill.tsx
index def8001f0..1983bcc50 100644
--- a/apps/web/src/bench/bench-pill.tsx
+++ b/apps/web/src/bench/bench-pill.tsx
@@ -2,17 +2,10 @@ import { CaretDown } from "@/lib/icons";
 import { IdentityAvatar } from "@/chat/avatar";
 import { Skeleton } from "@corbits/react-ui";
 import type { WorkerStatus } from "../worker-status";
+import "./bench-pill.css";
 
-function statusLine(status: WorkerStatus, workerName: string | undefined): string {
-  if (status.text === "Working…") {
-    return workerName === undefined ? "Working…" : `${workerName} is working…`;
-  }
-  const text = status.text === "Live" ? "Idle" : status.text;
-  return workerName === undefined ? text : `${workerName} · ${text}`;
-}
-
-/** Frosted pill centered over the thread: the bench's worker, its name and
- * live status. Toggles the bench drawer. */
+/** Frosted pill centered over the thread: the bench's worker and name, plus
+ * what the worker is doing while a turn is open. Toggles the bench drawer. */
 export function BenchPill({
   benchName,
   worker,
@@ -29,6 +22,7 @@ export function BenchPill({
   readonly open: boolean;
   readonly onToggle: () => void;
 }) {
+  const working = status.tone === "working";
   return (
     <button
       type="button"
@@ -45,7 +39,16 @@ export function BenchPill({
         <IdentityAvatar kind="agent" name={worker.name} principalId={worker.id} />
       )}
       <b>{benchName}</b>
-      <span className="bench-pill-status">{statusLine(status, worker?.name)}</span>
+      {working ? (
+        <>
+          <span className="pulse" aria-hidden="true" />
+          <span className="bench-pill-status">
+            {worker === undefined ? "Working …" : `${worker.name} is working …`}
+          </span>
+        </>
+      ) : worker === undefined ? null : (
+        <span className="bench-pill-worker">· {worker.name}</span>
+      )}
       <CaretDown size={14} aria-hidden="true" />
     </button>
   );
diff --git a/apps/web/src/chat/composer.css b/apps/web/src/chat/composer.css
new file mode 100644
index 000000000..ace34ac02
--- /dev/null
+++ b/apps/web/src/chat/composer.css
@@ -0,0 +1,151 @@
+/* Shared composer: one lean full-width row (+, text, voice, send). */
+.chat-composer-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  padding: 6px;
+  background: var(--surface);
+  border-radius: 22px;
+  box-shadow: var(--floating);
+  transition: box-shadow 150ms ease-out;
+}
+.chat-composer-box:focus-within {
+  box-shadow:
+    0 0 0 1px var(--line-strong),
+    0 6px 20px -6px rgb(0 0 0 / 18%);
+}
+.chat-composer-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 32px;
+  max-height: 180px;
+  display: block;
+  resize: none;
+  border: 0;
+  background: transparent;
+  padding: 5px 4px;
+  font: inherit;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--ink);
+}
+.chat-composer-input:focus {
+  outline: none;
+}
+.chat-composer-input::placeholder {
+  color: var(--ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-composer-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.chat-composer-btn,
+.chat-composer-send {
+  display: grid;
+  place-items: center;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.chat-composer-btn {
+  background: transparent;
+  color: var(--ink-2);
+}
+.chat-composer-voice {
+  background: var(--hover);
+  color: var(--ink);
+}
+.chat-composer-btn:hover:not(:disabled) {
+  background: var(--press);
+}
+.chat-composer-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.chat-composer-send {
+  background: var(--ink);
+  color: var(--action);
+  transition:
+    transform 160ms var(--ease-out),
+    opacity 150ms ease;
+}
+.chat-composer-send:disabled {
+  cursor: default;
+  opacity: 0.2;
+}
+.chat-composer-send:not(:disabled):active {
+  transform: scale(0.92);
+}
+.chat-composer-send-spinner {
+  animation: chat-composer-spin 0.8s linear infinite;
+}
+@keyframes chat-composer-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-composer-send-spinner {
+    animation-duration: 1e-6ms;
+  }
+}
+
+.chat-composer-plus {
+  position: relative;
+  flex: 0 0 32px;
+}
+.chat-composer-menu {
+  position: absolute;
+  left: 0;
+  bottom: calc(100% + 8px);
+  z-index: 40;
+  min-width: 220px;
+  padding: 4px;
+  background: var(--surface);
+  border-radius: var(--r-lg);
+  box-shadow: var(--floating);
+  transform-origin: bottom left;
+  animation: chat-composer-menu-in 160ms var(--ease-out);
+}
+.chat-composer-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  height: 34px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--r-md);
+  background: transparent;
+  font: inherit;
+  font-size: 13.5px;
+  text-align: left;
+  color: var(--ink);
+  cursor: pointer;
+}
+.chat-composer-menu-item svg {
+  color: var(--ink-3);
+}
+.chat-composer-menu-item:hover:not(:disabled) {
+  background: var(--hover);
+}
+.chat-composer-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+@keyframes chat-composer-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
diff --git a/apps/web/src/chat/composer.tsx b/apps/web/src/chat/composer.tsx
index 081731d49..caf182fe6 100644
--- a/apps/web/src/chat/composer.tsx
+++ b/apps/web/src/chat/composer.tsx
@@ -1,9 +1,10 @@
 // No Stop action: neither `threads-api.ts` nor the hub API expose a way to
 // cancel a running turn yet.
 import { useCommandPaletteNavigation } from "@corbits/react-ui";
-import { ArrowUp, AudioLines, CircleNotch, Plus } from "@/lib/icons";
-import { useLayoutEffect, useRef, useState } from "react";
+import { ArrowUp, AtSign, AudioLines, CircleNotch, FlowArrow, Paperclip, Plus } from "@/lib/icons";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
+import "./composer.css";
 import { activeMention, applyMention, matchMentionQuery, type ActiveMention } from "./mentions";
 
 export type ComposerMention = {
@@ -19,7 +20,8 @@ export function Composer({
   disabled,
   mentionables = [],
   onSend,
-  onAdd,
+  onAttach,
+  onRunWorkflow,
   onVoice,
 }: {
   readonly placeholder: string;
@@ -28,12 +30,14 @@ export function Composer({
   /** Agents an `@` token can address; empty disables the popover. */
   readonly mentionables?: readonly ComposerMention[];
   readonly onSend: (text: string) => void;
-  /** Opens the attach / add actions; the `+` is hidden without it. */
-  readonly onAdd?: () => void;
+  /** The `+` menu's actions; one with no handler stays disabled. */
+  readonly onAttach?: () => void;
+  readonly onRunWorkflow?: () => void;
   /** Starts voice mode; the mic is hidden without it. */
   readonly onVoice?: () => void;
 }) {
   const [text, setText] = useState("");
+  const [menuOpen, setMenuOpen] = useState(false);
   const [mention, setMention] = useState<ActiveMention | null>(null);
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const canSend = text.trim() !== "" && !busy && !disabled;
@@ -48,6 +52,21 @@ export function Composer({
     input.style.height = `${input.scrollHeight}px`;
   }, [text]);
 
+  // Closes on any press outside the menu.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const close = (event: MouseEvent) => {
+      if (
+        !(event.target instanceof Element) ||
+        event.target.closest(".chat-composer-plus") === null
+      ) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [menuOpen]);
+
   const send = () => {
     const trimmed = text.trim();
     if (trimmed === "" || busy || disabled) return;
@@ -77,6 +96,18 @@ export function Composer({
     onClose: () => setMention(null),
   });
 
+  const insertMentionTrigger = () => {
+    const input = inputRef.current;
+    const next = text === "" || text.endsWith(" ") ? `${text}@` : `${text} @`;
+    setText(next);
+    requestAnimationFrame(() => {
+      if (input === null) return;
+      input.focus();
+      input.setSelectionRange(next.length, next.length);
+      syncMention(input);
+    });
+  };
+
   const syncMention = (input: HTMLTextAreaElement) => {
     if (mentionables.length === 0) return;
     setMention(activeMention(input.value, input.selectionStart) ?? null);
@@ -110,18 +141,76 @@ export function Composer({
         </ul>
       ) : null}
       <div className="chat-composer-box">
-        {onAdd === undefined ? null : (
+        <div className="chat-composer-plus">
           <button
             type="button"
             className="chat-composer-btn"
             aria-label="Add"
             title="Add"
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
             disabled={disabled}
-            onClick={onAdd}
+            onClick={() => setMenuOpen((value) => !value)}
           >
             <Plus aria-hidden="true" />
           </button>
-        )}
+          {menuOpen ? (
+            <div
+              className="chat-composer-menu"
+              role="menu"
+              onKeyDown={(event) => {
+                if (event.key === "Escape") setMenuOpen(false);
+              }}
+            >
+              <button
+                type="button"
+                role="menuitem"
+                className="chat-composer-menu-item"
+                disabled={onAttach === undefined}
+                title={onAttach === undefined ? "Attachments are not available yet" : undefined}
+                onClick={() => {
+                  setMenuOpen(false);
+                  onAttach?.();
+                }}
+              >
+                <Paperclip aria-hidden="true" />
+                Attach a file
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                className="chat-composer-menu-item"
+                disabled={mentionables.length === 0}
+                title={mentionables.length === 0 ? "No worker is live to mention" : undefined}
+                onClick={() => {
+                  setMenuOpen(false);
+                  insertMentionTrigger();
+                }}
+              >
+                <AtSign aria-hidden="true" />
+                Mention a worker
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                className="chat-composer-menu-item"
+                disabled={onRunWorkflow === undefined}
+                title={
+                  onRunWorkflow === undefined
+                    ? "Running a workflow here is not available yet"
+                    : undefined
+                }
+                onClick={() => {
+                  setMenuOpen(false);
+                  onRunWorkflow?.();
+                }}
+              >
+                <FlowArrow aria-hidden="true" />
+                Run a workflow
+              </button>
+            </div>
+          ) : null}
+        </div>
         <textarea
           className="chat-composer-input"
           ref={inputRef}
diff --git a/apps/web/src/chat/day-divider.tsx b/apps/web/src/chat/day-divider.tsx
new file mode 100644
index 000000000..800e01a61
--- /dev/null
+++ b/apps/web/src/chat/day-divider.tsx
@@ -0,0 +1,19 @@
+function sameDay(a: Date, b: Date): boolean {
+  return a.toDateString() === b.toDateString();
+}
+
+export function dayLabel(date: Date, now: Date = new Date()): string {
+  if (sameDay(date, now)) return "Today";
+  const yesterday = new Date(now);
+  yesterday.setDate(now.getDate() - 1);
+  if (sameDay(date, yesterday)) return "Yesterday";
+  return date.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return sameDay(a, b);
+}
+
+export function DayDivider({ date }: { readonly date: Date }) {
+  return <div className="chat-day">{dayLabel(date)}</div>;
+}
diff --git a/apps/web/src/chat/styles.css b/apps/web/src/chat/styles.css
index 91ba46931..cfc5481fb 100644
--- a/apps/web/src/chat/styles.css
+++ b/apps/web/src/chat/styles.css
@@ -162,10 +162,12 @@
 }
 
 .chat-md-inline-code {
-  background: var(--muted, color-mix(in srgb, var(--foreground) 8%, transparent));
-  border-radius: var(--ui-radius-sm, 0.25rem);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
+  background: var(--hover);
+  color: var(--ink);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
   /* An unbroken token (a long path, hash, URL) wraps inside the message
      column instead of pushing it wider. */
   overflow-wrap: anywhere;
diff --git a/apps/web/src/chat/thread.css b/apps/web/src/chat/thread.css
new file mode 100644
index 000000000..b9deb5ee9
--- /dev/null
+++ b/apps/web/src/chat/thread.css
@@ -0,0 +1,181 @@
+/* The bench conversation: a left-aligned timeline above the composer. */
+.workbench-layout {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+}
+.workbench-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.workbench-main-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 72px 24px 16px;
+}
+.timeline-inner {
+  max-width: 1200px;
+  padding: 0 8px;
+}
+.workbench-main-composer {
+  flex-shrink: 0;
+  padding: 0 16px 16px;
+}
+
+.wb-corner {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 21;
+}
+.wb-corner-toggle {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--r-md);
+  background: transparent;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+.wb-corner-toggle:hover {
+  background: var(--hover);
+  color: var(--ink);
+}
+
+.chat-thread-messages {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 1rem;
+}
+.chat-thread-message {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 6px 0;
+  margin-bottom: 14px;
+}
+.chat-thread-avatar {
+  display: block;
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+}
+.chat-thread-avatar .wb-av {
+  width: 32px;
+  height: 32px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+.chat-thread-body {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.6;
+  max-width: 76ch;
+}
+.chat-thread-body .chat-attachment-list,
+.chat-thread-body .chat-deploy-card {
+  max-width: 640px;
+}
+.chat-thread-message[data-author="me"] {
+  justify-content: flex-end;
+}
+.chat-thread-message[data-author="me"] .chat-thread-body {
+  flex: 0 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  max-width: min(76ch, 78%);
+}
+.chat-thread-own-bubble {
+  background: var(--surface-sunk);
+  box-shadow: inset 0 0 0 1px var(--line);
+  padding: 10px 14px;
+  border-radius: 16px 16px 4px 16px;
+  overflow-wrap: anywhere;
+}
+.chat-thread-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+.chat-thread-head b {
+  font-size: 14px;
+  font-weight: 800;
+}
+.chat-thread-role {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ink-3);
+}
+.chat-thread-head time {
+  font-size: 12px;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
+}
+.chat-day {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 8px 0 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--ink-3);
+}
+.chat-day::before,
+.chat-day::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--line);
+}
+.chat-system-line {
+  margin: 0 0 20px 44px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ink-3);
+}
+.chat-system-line b {
+  font-weight: 700;
+  color: var(--ink-2);
+}
+.chat-thread-error {
+  margin: 0.5rem 0;
+  font-size: 0.82rem;
+  color: var(--destructive);
+}
+
+.workbench-replies-link {
+  display: block;
+  margin-top: 0.35rem;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 0.78rem;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+.chat-thread-message:hover .workbench-replies-link,
+.workbench-replies-link:focus-visible {
+  opacity: 1;
+}
+.workbench-replies-link:hover {
+  color: var(--foreground);
+}
+
+@media (max-width: 860px) {
+  .wb-corner {
+    display: none;
+  }
+}
diff --git a/apps/web/src/lib/icons/index.tsx b/apps/web/src/lib/icons/index.tsx
index 195406f7f..18fc374c0 100644
--- a/apps/web/src/lib/icons/index.tsx
+++ b/apps/web/src/lib/icons/index.tsx
@@ -9,6 +9,7 @@ export type IconProps = LucideProps;
 
 export {
   Archive,
+  AtSign,
   ArrowDown,
   ArrowLeft,
   ArrowRight,
diff --git a/apps/web/src/pages/workbench-page.tsx b/apps/web/src/pages/workbench-page.tsx
index d54082498..6b392981f 100644
--- a/apps/web/src/pages/workbench-page.tsx
+++ b/apps/web/src/pages/workbench-page.tsx
@@ -3,24 +3,29 @@
 
 import { Button, EmptyState, PageShell, Skeleton } from "@corbits/react-ui";
 import { toast } from "@corbits/react-ui/ui/toast";
-import { WarningCircle } from "@/lib/icons";
+import { PanelLeft, WarningCircle } from "@/lib/icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import { IdentityAvatar } from "@/chat/avatar";
 import { Composer } from "@/chat/composer";
+import { DayDivider, isSameDay } from "@/chat/day-divider";
+import { SystemLine } from "@/chat/system-line";
+import "@/chat/thread.css";
 import { Markdown } from "@/chat/markdown";
 import { MessageAttachments } from "@/chat/message-attachments";
 import { resolveMessagePackage } from "@/chat/deployable-package";
 import { stripRoster } from "@/chat/workbench-roster";
 import {
   ancestorChain,
+  listChatAgents,
   listWorkbenchParticipants,
   readWorkbench,
   resolveAvatarName,
   sameAddress,
   sendToWorkbench,
   subscribeToInbox,
+  type ChatAgent,
   type WorkbenchMessage,
   type WorkbenchParticipant,
 } from "@/chat/threads-api";
@@ -40,6 +45,8 @@ import { MembersTab } from "../bench/members-tab";
 import { ToolsTab } from "../bench/tools-tab";
 import { WorkflowsTab } from "../bench/workflows-tab";
 import { useBench } from "../bench-context";
+import { SidebarToggleContext } from "../shell/sidebar-toggle";
+import { useWorkerRole } from "../worker-role-query";
 import { createFetchStockHub } from "../needs-converge";
 import { workbenchKeys } from "../chat-path";
 import { tenantKeys } from "../query-client";
@@ -50,21 +57,30 @@ import { isClassifiedInferenceFailureText } from "@/chat/inference-failure";
 import { redeployWorkbenchAgent } from "../workbench-create";
 import { workbenchIdFromPath } from "../workbench-path";
 
-// A textarea placeholder can't ellipsize, so a long bench name is dropped.
-const PLACEHOLDER_NAME_MAX = 18;
 function messagePlaceholder(name: string | undefined): string {
-  return name !== undefined && name.length <= PLACEHOLDER_NAME_MAX ? `Message ${name}` : "Message";
+  return name === undefined ? "Message" : `Message ${name}`;
 }
 
 function errorText(cause: unknown): string {
   return cause instanceof Error ? cause.message : String(cause);
 }
 
+function WorkerRoleText({
+  tenantId,
+  agent,
+}: {
+  readonly tenantId: string;
+  readonly agent: ChatAgent;
+}) {
+  return <span className="chat-thread-role">{useWorkerRole(tenantId, agent)}</span>;
+}
+
 function WorkbenchMessageRow({
   message,
   participants,
   workbenchTenantId,
   rosterReady,
+  chatAgents,
   onReply,
 }: {
   readonly message: WorkbenchMessage;
@@ -72,6 +88,7 @@ function WorkbenchMessageRow({
   readonly workbenchTenantId: string;
   /** False until the roster resolves, so a raw run id never shows as sender. */
   readonly rosterReady: boolean;
+  readonly chatAgents: readonly ChatAgent[];
   /** Undefined in the sub-thread panel, where a row is read-only context. */
   readonly onReply?: (message: WorkbenchMessage) => void;
 }) {
@@ -101,6 +118,8 @@ function WorkbenchMessageRow({
         : message.body;
   const { pkg, renderedBody } = resolveMessagePackage(message.attachments, body);
   const own = message.author === "me";
+  const chatAgent =
+    resolved?.kind === "agent" ? chatAgents.find((agent) => agent.id === resolved.id) : undefined;
   const time = new Date(message.at);
   const navigate = useNavigate();
   // The wire carries no error kind, so the existing preamble classifier decides.
@@ -138,7 +157,7 @@ function WorkbenchMessageRow({
   }
   return (
     <div className="chat-thread-message" data-author={message.author}>
-      <span className="shell-ch-avatar">
+      <span className="chat-thread-avatar">
         {rosterReady ? (
           <IdentityAvatar
             kind={kind}
@@ -152,6 +171,9 @@ function WorkbenchMessageRow({
       <div className="chat-thread-body">
         <div className="chat-thread-head">
           {rosterReady ? <b>{avatarName}</b> : <Skeleton className="h-4 w-20" />}
+          {chatAgent === undefined ? null : (
+            <WorkerRoleText tenantId={workbenchTenantId} agent={chatAgent} />
+          )}
           {Number.isNaN(time.getTime()) ? null : (
             <time dateTime={message.at}>
               {time.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}
@@ -219,6 +241,12 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
     refetchInterval: (query) =>
       (query.state.data ?? []).some((p) => p.kind === "agent" && p.address === "") ? 3000 : false,
   });
+  const chatAgentsQuery = useQuery({
+    queryKey: tenantKeys.agents(workbenchTenantId),
+    queryFn: () => listChatAgents(workbenchTenantId),
+  });
+  const chatAgents = chatAgentsQuery.data ?? [];
+  const sidebar = useContext(SidebarToggleContext);
   const timeline = useQuery({
     queryKey: workbenchKeys.timeline(workbenchTenantId),
     queryFn: () => readWorkbench(workbenchTenantId),
@@ -294,6 +322,13 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
     onError: () => queryClient.setQueryData(workbenchKeys.pendingTurn(workbenchTenantId), null),
   });
 
+  const creator = roster.find((participant) => participant.kind === "person");
+  const createdLine =
+    agents[0] !== undefined && creator !== undefined ? (
+      <SystemLine>
+        <b>{agents[0].name}</b> joined · <b>{creator.name}</b> created this workbench
+      </SystemLine>
+    ) : null;
   const openedChain = openThread === null ? [] : ancestorChain(messages, openThread);
   const opened = openedChain.at(-1);
   const failure: unknown = timeline.error ?? participants.error;
@@ -321,6 +356,18 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
       ))}
       <div className="wb" data-drawer={drawerOpen ? "open" : "closed"}>
         <div className="wb-thread workbench-layout">
+          <div className="wb-corner">
+            <button
+              type="button"
+              className="wb-corner-toggle"
+              aria-label="Toggle sidebar"
+              aria-expanded={sidebar?.expanded ?? true}
+              title="Toggle sidebar (Ctrl+B)"
+              onClick={sidebar?.toggle}
+            >
+              <PanelLeft aria-hidden="true" />
+            </button>
+          </div>
           <BenchPill
             benchName={tenant.data?.name ?? "Workbench"}
             worker={agents[0]}
@@ -331,18 +378,33 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
           />
           <div className="workbench-main">
             <div className="workbench-main-scroll">
-              <PageShell width="prose" className="page-fill">
+              <div className="timeline-inner">
                 <div className="chat-thread-messages">
-                  {messages.map((message) => (
-                    <WorkbenchMessageRow
-                      key={message.id}
-                      message={message}
-                      participants={roster}
-                      workbenchTenantId={workbenchTenantId}
-                      rosterReady={participants.data !== undefined}
-                      onReply={(target) => setOpenThread(target.messageId)}
-                    />
-                  ))}
+                  {messages.map((message, index) => {
+                    const at = new Date(message.at);
+                    const previous = messages[index - 1];
+                    const previousAt = previous === undefined ? undefined : new Date(previous.at);
+                    const validAt = !Number.isNaN(at.getTime());
+                    const newDay =
+                      validAt &&
+                      (previousAt === undefined ||
+                        Number.isNaN(previousAt.getTime()) ||
+                        !isSameDay(at, previousAt));
+                    return (
+                      <Fragment key={message.id}>
+                        {newDay ? <DayDivider date={at} /> : null}
+                        {index === 0 && createdLine !== null ? createdLine : null}
+                        <WorkbenchMessageRow
+                          message={message}
+                          participants={roster}
+                          workbenchTenantId={workbenchTenantId}
+                          rosterReady={participants.data !== undefined}
+                          chatAgents={chatAgents}
+                          onReply={(target) => setOpenThread(target.messageId)}
+                        />
+                      </Fragment>
+                    );
+                  })}
                   <PendingOpeningMessage
                     workbenchTenantId={workbenchTenantId}
                     participants={roster}
@@ -352,10 +414,10 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
                 {send.error === null ? null : (
                   <p className="chat-thread-error">{errorText(send.error)}</p>
                 )}
-              </PageShell>
+              </div>
             </div>
             <div className="workbench-main-composer">
-              <PageShell width="full" className="page-fill">
+              <div>
                 <ProviderSkipBanner />
                 <Composer
                   placeholder={
@@ -372,7 +434,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
                     setVoiceOpen(true);
                   }}
                 />
-              </PageShell>
+              </div>
             </div>
           </div>
           {opened === undefined ? null : (
@@ -391,6 +453,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
                     participants={roster}
                     workbenchTenantId={workbenchTenantId}
                     rosterReady={participants.data !== undefined}
+                    chatAgents={chatAgents}
                   />
                 ))}
               </div>
diff --git a/apps/web/src/shell/app-shell.tsx b/apps/web/src/shell/app-shell.tsx
index 40362a19d..5fc21104c 100644
--- a/apps/web/src/shell/app-shell.tsx
+++ b/apps/web/src/shell/app-shell.tsx
@@ -14,7 +14,6 @@ import { useNavigate } from "../navigation";
 import { saveArtifactContent } from "./library-artifacts";
 import { APP_ROUTES, matchesRoute } from "../routes";
 import type { SessionUser } from "../session";
-import { isWorkbenchPath } from "../workbench-path";
 import { StageTopBar } from "./stage-top-bar";
 import {
   useCanvasColumnArtifact,
@@ -128,16 +127,26 @@ export function AppShell({
   // Keyed by path so any navigation closes the phone-width sidebar.
   const [sidebarOpenFor, setSidebarOpenFor] = useState<string | null>(null);
   const sidebarOpen = sidebarOpenFor === path;
-  // Desktop collapse. The chat and home screens carry no `StageTopBar`, so
-  // they always show the sidebar rather than leave no way back.
+  // Desktop collapse; Cmd/Ctrl+B and each page's toggle button flip it.
   const [collapsed, setCollapsed] = useState(false);
   const narrow = useIsNarrow();
-  const collapsible = path !== "/" && !isWorkbenchPath(path);
-  const sidebarCollapsed = collapsed && collapsible;
+  const sidebarCollapsed = collapsed;
   const toggleSidebar = () => {
     if (isNarrow()) setSidebarOpenFor(sidebarOpen ? null : path);
     else setCollapsed(!collapsed);
   };
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.key.toLowerCase() !== "b") {
+        return;
+      }
+      event.preventDefault();
+      if (isNarrow()) setSidebarOpenFor((current) => (current === path ? null : path));
+      else setCollapsed((current) => !current);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [path]);
   useEffect(() => {
     if (!sidebarOpen) return;
     const onKey = (event: KeyboardEvent) => {
diff --git a/e2e/browser/reply.test.ts b/e2e/browser/reply.test.ts
index 0633905df..0cdffb4b6 100644
--- a/e2e/browser/reply.test.ts
+++ b/e2e/browser/reply.test.ts
@@ -79,14 +79,14 @@ describeBrowser("worker reply", () => {
       await page.type("input[aria-label='Worker name']", "Bea");
       await clickText(page, "button", "Rename");
       await page.waitForFunction(
-        `document.querySelector(".bench-pill")?.innerText.includes("Bea ·")`,
+        `document.querySelector(".bench-pill")?.innerText.includes("Bea")`,
         {
           timeout: STEP_TIMEOUT,
         },
       );
       await page.reload({ waitUntil: "networkidle0" });
       await page.waitForFunction(
-        `document.querySelector(".bench-pill")?.innerText.includes("Bea ·")`,
+        `document.querySelector(".bench-pill")?.innerText.includes("Bea")`,
         {
           timeout: STEP_TIMEOUT,
         },