experimental-a2 0.16.1 → 0.17.0

package/examples/playground/app/globals.css

@@ -1,19 +1,49 @@
+/* Dark by default; light when the system asks for it. */
 :root {
-  --bg: #fbfaf8;
-  --surface: #ffffff;
-  --ink: #1a1917;
-  --muted: #6f6b64;
-  --line: #e6e2da;
-  --accent: #0d5c46;
-  --accent-ink: #ffffff;
-  --danger: #a3352b;
-  --code-bg: #f1efe9;
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    'Segoe UI',
-    sans-serif;
+  color-scheme: light dark;
+  --bg: #040404;
+  --surface: #040404;
+  --shade: #161616;
+  --shade-hover: #1b1b1b;
+  --line: #252525;
+  --faint: #7a7a7a;
+  --muted: #909090;
+  --ink: #dedede;
+  --bright: #fafafa;
+  --accent: #ff6c02;
+  --accent-ink: #040404;
+  --danger: #ff6568;
+  --success: #4fd18b;
+  --warning: #f2b54b;
+  --info: #6ea8fe;
+  --code-bg: #161616;
+  --dot: #404040;
+  --shadow: rgb(0 0 0 / 50%);
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+  font-size: 87.5%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #fafaf9;
+    --surface: #fafaf9;
+    --shade: #efefed;
+    --shade-hover: #e7e7e4;
+    --line: #e0e0dc;
+    --faint: #6e6e6c;
+    --muted: #52524f;
+    --ink: #1c1c1b;
+    --bright: #000000;
+    --accent: #c2410c;
+    --accent-ink: #ffffff;
+    --danger: #c81e1e;
+    --success: #15803d;
+    --warning: #9a5b05;
+    --info: #1d4ed8;
+    --code-bg: #efefed;
+    --dot: #d6d6d2;
+    --shadow: rgb(0 0 0 / 12%);
+  }
 }
 
 * {
@@ -29,20 +59,31 @@ body {
   width: 100%;
   min-width: 0;
   background: var(--bg);
-  color: var(--ink);
-  line-height: 1.55;
+  color: var(--muted);
+  line-height: 1.6;
+  letter-spacing: -0.02em;
+  -webkit-font-smoothing: antialiased;
+}
+
+input,
+textarea {
+  letter-spacing: normal;
+}
+
+::selection {
+  background: color-mix(in oklab, var(--accent) 20%, transparent);
 }
 
 code,
 pre,
 kbd {
-  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 0.9em;
+  font-family: inherit;
+  font-size: 0.92em;
 }
 
 code {
   background: var(--code-bg);
-  border-radius: 4px;
+  color: var(--ink);
   padding: 0.1em 0.35em;
 }
 
@@ -57,7 +98,7 @@ main {
 
 body:has(.chat-page) {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr);
   height: 100dvh;
   min-height: 0;
   overflow: hidden;
@@ -69,10 +110,6 @@ main:has(> .chat-page) {
   padding: 0;
 }
 
-body:has(.chat-page) .site-footer {
-  display: none;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -85,14 +122,22 @@ body:has(.chat-page) .site-footer {
   border: 0;
 }
 
+h1,
+h2,
+h3 {
+  color: var(--bright);
+  letter-spacing: -0.03em;
+}
+
 h1 {
-  font-size: 1.65rem;
-  letter-spacing: -0.015em;
+  font-size: 1.4rem;
+  font-weight: 600;
   margin: 0 0 0.5rem;
 }
 
 h2 {
-  font-size: 1.1rem;
+  font-size: 1rem;
+  font-weight: 600;
   margin: 2rem 0 0.5rem;
 }
 
@@ -102,99 +147,174 @@ p {
 
 .lede {
   color: var(--muted);
-  font-size: 1.05rem;
-  max-width: 38rem;
+  max-width: 40rem;
 }
 
 a {
   color: var(--accent);
+  text-underline-offset: 3px;
 }
 
-/* ── header / footer ─────────────────────────────────────────────── */
+strong {
+  color: var(--ink);
+}
+
+/* ── header ──────────────────────────────────────────────────────── */
 
 .site-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  height: 40px;
   min-width: 0;
-  overflow: hidden;
-  border-bottom: 1px solid var(--line);
-  background: var(--surface);
+  padding: 0 0.75rem;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
 }
 
-.site-header nav {
-  width: 100%;
-  min-width: 0;
-  max-width: 58rem;
-  margin: 0 auto;
-  padding: 0.75rem 1.25rem;
+.brand {
   display: flex;
-  gap: 1.25rem;
-  align-items: baseline;
-  overflow-x: auto;
-  white-space: nowrap;
-  scrollbar-width: none;
-}
-
-.site-header a {
+  align-items: center;
+  gap: 0.4rem;
   color: var(--ink);
   text-decoration: none;
 }
 
-.site-header a:hover {
+.brand svg {
+  color: var(--accent);
+}
+
+.brand:hover span {
+  color: var(--bright);
   text-decoration: underline;
 }
 
-.brand {
-  font-weight: 700;
-  margin-right: auto;
+.demo-menu {
+  position: relative;
 }
 
-.brand span {
+.demo-menu summary {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  color: var(--faint);
   font-weight: 400;
-  color: var(--muted);
+  cursor: pointer;
+  list-style: none;
 }
 
-.site-footer {
-  border-top: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 0.85rem;
+.demo-menu summary::-webkit-details-marker {
+  display: none;
 }
 
-.site-footer p {
-  max-width: 58rem;
-  margin: 0 auto;
-  padding: 1rem 1.25rem;
+.demo-menu summary:hover,
+.demo-menu[open] summary {
+  color: var(--bright);
 }
 
-/* ── cards ───────────────────────────────────────────────────────── */
+.demo-menu[open] summary svg {
+  transform: rotate(180deg);
+}
 
-.card-grid {
+.demo-menu nav {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  gap: 1rem;
-  margin: 1.5rem 0;
+  min-width: 11rem;
+  padding: 0.25rem 0;
+  background: var(--shade);
+  box-shadow: 0 10px 30px var(--shadow);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  text-transform: none;
 }
 
-.card {
-  display: block;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 1.1rem 1.25rem;
-  color: inherit;
+.demo-menu nav a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2rem;
+  padding: 0 0.75rem;
+  color: var(--ink);
   text-decoration: none;
-  transition: border-color 120ms ease;
 }
 
-.card:hover {
-  border-color: var(--accent);
+.demo-menu nav a:hover,
+.demo-menu nav a:focus-visible {
+  background: var(--shade-hover);
+  color: var(--bright);
 }
 
-.card h2 {
-  margin: 0 0 0.35rem;
+.demo-menu nav a svg {
+  color: var(--accent);
 }
 
-.card p {
-  color: var(--muted);
-  font-size: 0.92rem;
+/* The home page's demos, as app tiles. */
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
+  gap: 2rem 1rem;
+  margin: 3rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.app-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--ink);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.app-icon {
+  display: grid;
+  place-items: center;
+  width: 5.5rem;
+  height: 5.5rem;
+  border: 1px solid var(--line);
+  background: var(--shade);
+  color: var(--ink);
+  transition:
+    background 120ms,
+    border-color 120ms;
+}
+
+.app-icon svg {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.app-icon .accent {
+  stroke: var(--accent);
+}
+
+.app-icon .accent-fill {
+  fill: var(--accent);
+  stroke: none;
+}
+
+.app-icon .fill {
+  fill: currentColor;
+  stroke: none;
+}
+
+.app-tile:hover,
+.app-tile:focus-visible {
+  color: var(--bright);
+}
+
+.app-tile:hover .app-icon,
+.app-tile:focus-visible .app-icon {
+  border-color: var(--accent);
+  background: var(--shade-hover);
 }
 
 /* ── forms & buttons ─────────────────────────────────────────────── */
@@ -204,7 +324,6 @@ form {
   gap: 0.9rem;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 10px;
   padding: 1.25rem;
   margin: 1.25rem 0;
 }
@@ -212,8 +331,9 @@ form {
 label {
   display: grid;
   gap: 0.3rem;
+  color: var(--ink);
   font-size: 0.9rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 input,
@@ -222,24 +342,32 @@ textarea {
   font: inherit;
   padding: 0.5rem 0.65rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
+  border-radius: 0;
   background: var(--bg);
-  color: inherit;
+  color: var(--ink);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--faint);
+}
+
+:focus-visible {
+  outline: 2px dashed var(--accent);
+  outline-offset: 2px;
 }
 
 input:focus-visible,
 select:focus-visible,
-textarea:focus-visible,
-button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
+textarea:focus-visible {
+  outline-offset: -1px;
 }
 
 button {
   font: inherit;
-  font-weight: 600;
-  padding: 0.55rem 1.1rem;
-  border-radius: 7px;
+  font-weight: 500;
+  padding: 0.4rem 0.8rem;
+  border-radius: 0;
   border: 1px solid var(--accent);
   background: var(--accent);
   color: var(--accent-ink);
@@ -252,18 +380,28 @@ button:hover:not(:disabled) {
 }
 
 button:disabled {
-  opacity: 0.45;
+  opacity: 0.4;
   cursor: not-allowed;
 }
 
 button.secondary {
-  background: transparent;
+  border-color: transparent;
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
   color: var(--accent);
 }
 
+button.secondary:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--accent) 20%, transparent);
+}
+
 button.danger {
-  background: var(--danger);
-  border-color: var(--danger);
+  border-color: transparent;
+  background: color-mix(in oklab, var(--danger) 12%, transparent);
+  color: var(--danger);
+}
+
+button.danger:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--danger) 22%, transparent);
 }
 
 .inline-form {
@@ -284,7 +422,7 @@ button.danger {
 }
 
 .hint {
-  color: var(--muted);
+  color: var(--faint);
   font-size: 0.85rem;
 }
 
@@ -304,36 +442,38 @@ button.danger {
 
 .badge {
   display: inline-block;
-  padding: 0.15rem 0.6rem;
-  border-radius: 99px;
-  font-size: 0.8rem;
-  font-weight: 600;
+  padding: 0.1rem 0.45rem;
   border: 1px solid var(--line);
   background: var(--code-bg);
+  color: var(--ink);
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
 }
 
 .badge.live {
-  background: #e8f3ee;
-  border-color: #bcd9cc;
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
+  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
   color: var(--accent);
 }
 
 .badge.done {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: var(--accent-ink);
+  background: color-mix(in oklab, var(--success) 10%, transparent);
+  border-color: color-mix(in oklab, var(--success) 40%, transparent);
+  color: var(--success);
 }
 
 .badge.cut {
-  background: #f8e9e7;
-  border-color: #e4c1bc;
+  background: color-mix(in oklab, var(--danger) 10%, transparent);
+  border-color: color-mix(in oklab, var(--danger) 40%, transparent);
   color: var(--danger);
 }
 
 .badge.waiting {
-  background: #fff4d8;
-  border-color: #e5cb8d;
-  color: #805a08;
+  background: color-mix(in oklab, var(--warning) 10%, transparent);
+  border-color: color-mix(in oklab, var(--warning) 40%, transparent);
+  color: var(--warning);
 }
 
 /* ── journey timeline ──────────────────────────────────────────── */
@@ -423,7 +563,6 @@ button.danger {
   margin: 1.5rem 0 0.75rem;
   padding: 2rem;
   border: 1px solid var(--line);
-  border-radius: 10px;
   background: var(--surface);
 }
 
@@ -468,11 +607,11 @@ button.danger {
 }
 
 .conn.live::before {
-  background: #1a8a5f;
+  background: var(--success);
 }
 
 .conn.connecting::before {
-  background: #c98a1b;
+  background: var(--warning);
   animation: blink 1s steps(2, start) infinite;
 }
 
@@ -487,7 +626,6 @@ button.danger {
   margin: 0.75rem 0;
   padding: 0;
   border: 1px solid var(--line);
-  border-radius: 10px;
   background: var(--surface);
   overflow: hidden;
 }
@@ -537,9 +675,9 @@ button.danger {
 .activity-status {
   margin: -0.15rem 0 0.65rem;
   padding: 0.65rem 0.8rem;
-  border-left: 3px solid #d5a72f;
-  background: #fff9e8;
-  color: #6d5721;
+  border-left: 3px solid var(--warning);
+  background: color-mix(in oklab, var(--warning) 8%, transparent);
+  color: var(--warning);
   font-size: 0.88rem;
 }
 
@@ -548,9 +686,8 @@ button.danger {
 .timeout-callout {
   margin: 1.25rem 0;
   padding: 1rem 1.1rem;
-  border: 1px solid #e5cb8d;
-  border-radius: 10px;
-  background: #fff9e8;
+  border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent);
+  background: color-mix(in oklab, var(--warning) 8%, transparent);
 }
 
 .timeout-callout h2 {
@@ -560,7 +697,7 @@ button.danger {
 .proof {
   padding: 0.65rem 0.8rem;
   border-left: 3px solid var(--accent);
-  background: #e8f3ee;
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
   font-size: 0.9rem;
 }
 
@@ -677,7 +814,6 @@ button.danger {
   width: 100%;
   max-width: none;
   padding: 0.08rem 0.65rem;
-  border-radius: 6px;
 }
 
 .msg.group-start {
@@ -691,7 +827,7 @@ button.danger {
 
 .msg:hover,
 .msg:focus-within {
-  background: #f7f5f1;
+  background: var(--shade);
 }
 
 .msg-gutter {
@@ -706,16 +842,15 @@ button.danger {
   place-items: center;
   width: 2.25rem;
   height: 2.25rem;
-  border-radius: 0.55rem;
-  background: #e8f3ee;
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
   color: var(--accent);
   font-size: 0.86rem;
   font-weight: 800;
 }
 
 .msg.agent .msg-avatar {
-  background: #e8eef9;
-  color: #3874c8;
+  background: color-mix(in oklab, var(--info) 12%, transparent);
+  color: var(--info);
 }
 
 .msg-compact-time {
@@ -765,13 +900,12 @@ button.danger {
 }
 
 .msg.agent .msg-author {
-  color: #3874c8;
+  color: var(--info);
 }
 
 .mention {
-  background: #e8f3ee;
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
   color: var(--accent);
-  border-radius: 4px;
   padding: 0 0.15em;
   font-weight: 600;
 }
@@ -805,9 +939,8 @@ button.danger {
 .chat-agent-error {
   margin: 0 auto 0.65rem;
   padding: 0.65rem 0.75rem;
-  border: 1px solid #e4c1bc;
-  border-radius: 8px;
-  background: #fff5f3;
+  border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent);
+  background: color-mix(in oklab, var(--danger) 8%, transparent);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -856,22 +989,17 @@ button.danger {
   min-height: 7.5rem;
   padding: 0;
   overflow: visible;
-  border: 1px solid #a8a39a;
-  border-radius: 11px;
-  background: var(--surface);
+  border: 0;
+  outline: 2px dotted color-mix(in oklab, var(--muted) 50%, transparent);
+  outline-offset: -1px;
+  background: transparent;
   margin: 0;
-  box-shadow: 0 1px 2px rgb(26 25 23 / 5%);
   cursor: text;
-  transition:
-    border-color 120ms ease,
-    box-shadow 120ms ease;
 }
 
 .composer:focus-within {
-  border-color: var(--ink);
-  box-shadow:
-    0 0 0 1px var(--ink),
-    0 3px 10px rgb(26 25 23 / 7%);
+  outline-style: dashed;
+  outline-color: var(--muted);
 }
 
 .composer-input-surface {
@@ -893,9 +1021,9 @@ button.danger {
   border: 0;
   border-radius: 0;
   outline: 0;
-  background: var(--surface);
-  font-size: 1rem;
-  line-height: 1.45;
+  background: transparent;
+  color: var(--ink);
+  line-height: 1.5;
 }
 
 .composer textarea:focus-visible {
@@ -926,8 +1054,7 @@ button.danger {
   min-height: 2.15rem;
   padding: 0.28rem 0.58rem;
   border: 1px solid var(--line);
-  border-radius: 7px;
-  background: #f7f5f1;
+  background: var(--shade);
   color: var(--ink);
   cursor: pointer;
   font-size: 0.78rem;
@@ -937,8 +1064,8 @@ button.danger {
 }
 
 .composer-mode-selector:hover {
-  border-color: #bdb7ac;
-  background: var(--code-bg);
+  border-color: var(--muted);
+  background: var(--shade-hover);
 }
 
 .composer-mode-selector:has(input:focus-visible) {
@@ -1002,8 +1129,7 @@ button.danger {
   border-top: 1px solid var(--line);
   padding: 0.7rem clamp(0.75rem, 3vw, 2rem)
     calc(0.35rem + env(safe-area-inset-bottom));
-  background: var(--surface);
-  box-shadow: 0 -8px 22px rgb(56 48 35 / 5%);
+  background: var(--bg);
 }
 
 .chat-composer-dock > * {
@@ -1023,8 +1149,7 @@ button.danger {
   min-width: 12rem;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: 0 6px 20px rgb(26 25 23 / 0.08);
+  box-shadow: 0 6px 20px var(--shadow);
 }
 
 .mention-popover button {
@@ -1036,7 +1161,6 @@ button.danger {
   color: inherit;
   font-weight: 500;
   padding: 0.35rem 0.6rem;
-  border-radius: 6px;
 }
 
 .mention-popover button.active,
@@ -1053,7 +1177,7 @@ button.danger {
   border: 0;
   border-left: 1px solid var(--line);
   border-radius: 0;
-  background: #f7f5f1;
+  background: var(--bg);
 }
 
 .chat-sidebar-toggle {
@@ -1116,11 +1240,11 @@ button.danger {
   border-left: 1px solid var(--line);
   background: var(--surface);
   color: var(--ink);
-  box-shadow: -18px 0 45px rgb(26 25 23 / 14%);
+  box-shadow: -18px 0 45px var(--shadow);
 }
 
 .agent-stream-drawer::backdrop {
-  background: rgb(26 25 23 / 28%);
+  background: var(--shadow);
   backdrop-filter: blur(2px);
 }
 
@@ -1225,18 +1349,17 @@ button.danger {
   min-width: 0;
   padding: 0.7rem;
   border: 1px solid var(--line);
-  border-radius: 8px;
   background: var(--bg);
 }
 
 .agent-stream-part.reasoning {
-  border-color: #d8cbea;
-  background: #fbf8ff;
+  border-color: color-mix(in oklab, var(--info) 35%, transparent);
+  background: color-mix(in oklab, var(--info) 6%, transparent);
 }
 
 .agent-stream-part.tool {
-  border-color: #bcd9cc;
-  background: #f5fbf8;
+  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
+  background: color-mix(in oklab, var(--accent) 5%, transparent);
 }
 
 .agent-stream-part > header,
@@ -1284,7 +1407,6 @@ button.danger {
   margin: 0.4rem 0 0;
   padding: 0.55rem;
   overflow: auto;
-  border-radius: 6px;
   background: var(--code-bg);
   font-size: 0.68rem;
   white-space: pre-wrap;
@@ -1324,7 +1446,6 @@ button.danger {
 .agent-stream-empty {
   margin: 1rem 0;
   padding: 1rem;
-  border-radius: 8px;
   background: var(--code-bg);
   color: var(--muted);
   text-align: center;
@@ -1384,9 +1505,8 @@ button.danger {
     min-height: auto;
     overflow: visible;
     border: 1px solid var(--line);
-    border-radius: 8px;
     background: var(--surface);
-    box-shadow: 0 8px 26px rgb(26 25 23 / 12%);
+    box-shadow: 0 8px 26px var(--shadow);
   }
 
   .chat-sidebar-toggle {
@@ -1489,11 +1609,16 @@ button.danger {
 
 /* ── durable agent ──────────────────────────────────────────────── */
 
+.agent-trace {
+  display: inline-block;
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+}
+
 .agent-compaction {
   margin: 1rem 0;
   padding: 0.75rem 1rem;
   border: 1px solid var(--line);
-  border-radius: 12px;
   background: var(--surface);
 }
 
@@ -1624,7 +1749,6 @@ button.danger {
 .agent-compaction-event {
   padding: 0.65rem 0.85rem;
   border: 1px dashed var(--line);
-  border-radius: 9px;
   background: var(--code-bg);
 }
 
@@ -1648,7 +1772,6 @@ button.danger {
   overflow: hidden;
   margin: 1rem 0;
   border: 1px solid var(--line);
-  border-radius: 12px;
   background: var(--surface);
 }
 
@@ -1674,7 +1797,6 @@ button.danger {
 
 .agent-message.user > div {
   padding: 0.7rem 0.85rem;
-  border-radius: 9px;
   background: var(--code-bg);
 }
 
@@ -1731,14 +1853,13 @@ button.danger {
   padding: 0.75rem 0.85rem;
   border: 1px solid var(--line);
   border-left: 3px solid var(--accent);
-  border-radius: 8px;
   background: var(--bg);
 }
 
 .tool-card.approval-requested,
 .tool-card.approval-responded,
 .tool-card.output-denied {
-  border-left-color: #c98a1b;
+  border-left-color: var(--warning);
 }
 
 .tool-card > div {
@@ -1774,9 +1895,8 @@ button.danger {
   justify-content: space-between;
   margin: 0 1rem 1rem;
   padding: 1rem 1.1rem;
-  border: 1px solid #e5cb8d;
-  border-radius: 10px;
-  background: #fffaec;
+  border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent);
+  background: color-mix(in oklab, var(--warning) 8%, transparent);
 }
 
 .approval-card h2 {
@@ -1802,7 +1922,6 @@ button.danger {
 .agent-queue {
   margin: 0 1rem 0.85rem;
   border: 1px solid var(--line);
-  border-radius: 9px;
   background: var(--bg);
   overflow: hidden;
 }
@@ -1829,7 +1948,6 @@ button.danger {
 .agent-queue-header h3 span {
   min-width: 1.2rem;
   padding: 0 0.3rem;
-  border-radius: 4px;
   background: var(--line);
   text-align: center;
   font-size: 0.68rem;
@@ -1842,7 +1960,7 @@ button.danger {
 }
 
 .agent-queue-status.paused {
-  color: #885b12;
+  color: var(--warning);
 }
 
 .agent-queue-list {
@@ -1893,7 +2011,6 @@ button.danger {
   height: 1.9rem;
   padding: 0;
   border: 0;
-  border-radius: 5px;
   background: transparent;
   color: var(--muted);
 }
@@ -1914,7 +2031,7 @@ button.danger {
 }
 
 .agent-queue-actions .agent-queue-remove:hover:not(:disabled) {
-  background: #f8e8e5;
+  background: color-mix(in oklab, var(--danger) 12%, transparent);
   color: var(--danger);
 }
 
@@ -1987,8 +2104,106 @@ button.danger {
   background: var(--surface);
 }
 
-.agent-form textarea {
+.agent-message-field {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+}
+
+.agent-composer {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 8.5rem;
   resize: vertical;
+  overflow: hidden;
+  border: 0;
+  outline: 2px dotted color-mix(in oklab, var(--muted) 50%, transparent);
+  outline-offset: -1px;
+  background: transparent;
+}
+
+.agent-composer:focus-within {
+  outline-style: dashed;
+  outline-color: var(--muted);
+}
+
+.agent-composer textarea {
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.65rem;
+  resize: none;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.agent-composer textarea:focus-visible {
+  outline: 0;
+}
+
+.agent-composer-toolbar {
+  flex-shrink: 0;
+  padding: 0.25rem 0.35rem 0.4rem;
+}
+
+.agent-model-controls {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 0;
+  gap: 0.35rem;
+}
+
+.agent-model-choice {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 24rem;
+}
+
+.agent-model-controls input,
+.agent-model-controls select {
+  min-width: 0;
+  max-width: 100%;
+  height: 2.1rem;
+  padding: 0.3rem 0.45rem;
+  border-color: transparent;
+  background: transparent;
+  font-size: 0.85rem;
+}
+
+.agent-model-controls input {
+  field-sizing: content;
+  width: auto;
+  text-overflow: ellipsis;
+}
+
+.agent-model-controls input:hover,
+.agent-model-controls select:hover {
+  border-color: var(--line);
+  background: var(--surface);
+}
+
+.agent-fast-toggle {
+  display: grid;
+  flex: 0 0 2.1rem;
+  place-items: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--muted);
+}
+
+.agent-fast-toggle[aria-pressed='true'] {
+  color: var(--warning);
 }
 
 .agent-new .agent-transcript {
@@ -2107,9 +2322,8 @@ button.compact {
 .document-editor {
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 12px;
   background: var(--surface);
-  box-shadow: 0 12px 35px rgb(56 48 35 / 7%);
+  box-shadow: 0 12px 35px var(--shadow);
 }
 
 .document-title {
@@ -2139,7 +2353,7 @@ button.compact {
 
 .document-title::placeholder,
 .document-body .cm-placeholder {
-  color: #aaa59c;
+  color: var(--faint);
 }
 
 /* Out of flow: an in-flow placeholder makes a peer's caret at
@@ -2156,7 +2370,7 @@ button.compact {
 .document-body .cm-ySelectionInfo {
   opacity: 1;
   font-family: inherit;
-  border-radius: 3px 3px 3px 0;
+  color: #040404;
   padding: 0 4px;
 }
 
@@ -2182,23 +2396,26 @@ button.compact {
 
 .document-body .cm-content {
   padding: 1rem 0.75rem 1.5rem;
-  caret-color: var(--accent);
+}
+
+.document-body .cm-cursor {
+  border-left-color: var(--accent);
 }
 
 .document-body .cm-gutters {
   border-right: 1px solid var(--line);
-  color: #aaa59c;
+  color: var(--faint);
   background: var(--bg);
 }
 
 .document-body .cm-activeLine,
 .document-body .cm-activeLineGutter {
-  background: #f6f4ef;
+  background: var(--shade);
 }
 
 .document-body .cm-selectionBackground,
 .document-body .cm-content ::selection {
-  background: #cde2da !important;
+  background: color-mix(in oklab, var(--accent) 25%, transparent) !important;
 }
 
 .editor-status {
@@ -2232,7 +2449,7 @@ button.compact {
 }
 
 .sync-state.saving::before {
-  background: #c98a1b;
+  background: var(--warning);
   animation: blink 1s steps(2, start) infinite;
 }
 
@@ -2259,14 +2476,15 @@ button.compact {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--surface);
-  box-shadow: 0 12px 35px rgb(56 48 35 / 7%);
+  background-color: var(--surface);
+  background-image: radial-gradient(var(--dot) 1px, transparent 1.25px);
+  background-size: 16px 16px;
+  background-position: 4px 4px;
 }
 
 .canvas-stage.historical {
-  border-color: #e5cb8d;
-  background: #fffdf6;
+  border-color: color-mix(in oklab, var(--warning) 40%, transparent);
+  background-color: color-mix(in oklab, var(--warning) 4%, transparent);
 }
 
 .canvas-stage.historical .canvas-svg {
@@ -2334,9 +2552,9 @@ button.compact {
 }
 
 .canvas-status.replaying {
-  border-top-color: #e5cb8d;
-  background: #fff9e8;
-  color: #6d5721;
+  border-top-color: color-mix(in oklab, var(--warning) 40%, transparent);
+  background: color-mix(in oklab, var(--warning) 8%, transparent);
+  color: var(--warning);
 }
 
 .canvas-scrubber {
@@ -2367,11 +2585,6 @@ button.compact {
 }
 
 @media (max-width: 680px) {
-  .site-header nav {
-    gap: 0.7rem;
-    font-size: 0.9rem;
-  }
-
   .canvas-toolbar {
     align-items: stretch;
     flex-direction: column;