Merge main into the legacy cleanup

The shell contrast test added on main measured the sidebar trading status,
which this branch removes; it now measures the rows that remain.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u

apps/web/e2e/chat-contrast.spec.ts

@@ -1,15 +1,29 @@
 import { expect, type Locator, type Page, test } from "@playwright/test";
-import { captureScreenshot, completeOnboarding, rpc, signup, waitForChatComposer } from "./helpers";
+import {
+  captureScreenshot,
+  completeOnboarding,
+  createNamedBot,
+  openNewBot,
+  rpc,
+  signup,
+  waitForChatComposer,
+} from "./helpers";
 
 // WCAG AA for body text.
 const MIN_CONTRAST = 4.5;
 
 test.use({ viewport: { width: 1280, height: 1000 } });
 
-/** Contrast of an element's text against the surface it is painted on. */
+/**
-function textContrast(locator: Locator) {
+ * Texts in `locator` below WCAG AA against the surface they are painted on. With `inside`, every
-  return locator.evaluate((element) => {
+ * visible text and typed value within it counts, except in disabled controls, which WCAG exempts.
-    const context = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+ */
+function unreadableTexts(locator: Locator, inside: boolean) {
+  return locator.evaluate(
+    (root, { inside, min }) => {
+      const context = document
+        .createElement("canvas")
+        .getContext("2d", { willReadFrequently: true });
       if (!context) throw new Error("No 2D canvas context");
       // The canvas normalizes every CSS color syntax (oklab, color-mix, ...) to sRGB.
       const rgba = (color: string) => {
@@ -42,17 +56,57 @@ function textContrast(locator: Locator) {
         );
         return 0.2126 * r + 0.7152 * g + 0.0722 * b;
       };
+      const contrast = (element: Element) => {
         const text = luminance(paint(rgba(getComputedStyle(element).color), element));
         const surface = luminance(paint([0, 0, 0, 0], element));
         return (Math.max(text, surface) + 0.05) / (Math.min(text, surface) + 0.05);
+      };
+      // What the element itself shows: a typed value, or its own text nodes.
+      const ownText = (element: Element) => {
+        if (element instanceof HTMLTextAreaElement) return element.value;
+        if (element instanceof HTMLInputElement) {
+          return /^(text|search|url|email|tel|number|password)$/.test(element.type)
+            ? element.value
+            : "";
+        }
+        return Array.from(element.childNodes, (node) =>
+          node.nodeType === Node.TEXT_NODE ? node.textContent : "",
+        )
+          .join("")
+          .trim();
+      };
+      const shown = (element: Element) => {
+        const { width, height } = element.getBoundingClientRect();
+        return width > 1 && height > 1 && element.checkVisibility();
+      };
+      const elements = inside
+        ? [root, ...root.querySelectorAll("*")].filter(
+            (element) => ownText(element) && shown(element) && !element.closest(":disabled"),
+          )
+        : [root];
+      return elements.flatMap((element) => {
+        const ratio = contrast(element);
+        const text = ownText(element) || element.textContent?.trim() || "";
+        return ratio < min ? [`${ratio.toFixed(2)}:1 ${text.slice(0, 48)}`] : [];
       });
+    },
+    { inside, min: MIN_CONTRAST },
+  );
 }
 
-async function expectReadable(locator: Locator, what: string) {
+async function expectReadable(locator: Locator, what: string, { inside = false } = {}) {
   await expect(locator).toBeVisible();
   await expect
-    .poll(() => textContrast(locator), { message: `${what} is readable` })
+    .poll(() => unreadableTexts(locator, inside), { message: `${what} is readable` })
-    .toBeGreaterThanOrEqual(MIN_CONTRAST);
+    .toEqual([]);
+}
+
+async function inEachTheme(page: Page, check: (theme: "light" | "dark") => Promise<void>) {
+  for (const theme of ["light", "dark"] as const) {
+    await page.emulateMedia({ colorScheme: theme });
+    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
+    await check(theme);
+  }
 }
 
 function runStatus(page: Page, groupId: string) {
@@ -128,10 +182,7 @@ test("conversation text stays readable in light and dark themes", async ({ page
   const brief = task.locator(".rk-chat-markdown p");
   await expect(brief).toHaveText("collect three owl facts");
 
-  for (const theme of ["light", "dark"] as const) {
+  await inEachTheme(page, async (theme) => {
-    await page.emulateMedia({ colorScheme: theme });
-    await expect(page.locator("html")).toHaveAttribute("data-theme", theme);
-
     await firstMessage.scrollIntoViewIfNeeded();
     await captureScreenshot(page, testInfo, `chat-contrast-${theme}-reply`);
     await expectReadable(firstMessage, `${theme}: the user's own message`);
@@ -150,5 +201,59 @@ test("conversation text stays readable in light and dark themes", async ({ page
     await captureScreenshot(page, testInfo, `chat-contrast-${theme}-ask`);
     await expectReadable(question, `${theme}: the ask card question`);
     await expectReadable(lastMessage, `${theme}: the latest user message`);
-  }
+  });
+});
+
+test("shell surfaces stay readable in light and dark themes", async ({ page }, testInfo) => {
+  await page.emulateMedia({ colorScheme: "light" });
+  await signup(page, `shell-contrast-${Date.now()}@rakazo.test`, "password12", "Contrast QA");
+  await completeOnboarding(page);
+  await createNamedBot(page, "Researcher");
+  const composer = page.getByRole("combobox", { name: "Message" });
+  await composer.fill("Draft a note about owls");
+  const sidebar = page.getByTestId("bots-sidebar");
+  const sidePanel = page.getByTestId("side-panel");
+
+  await inEachTheme(page, async (theme) => {
+    await captureScreenshot(page, testInfo, `shell-contrast-${theme}`);
+    await expectReadable(composer, `${theme}: the composer draft`);
+    await expectReadable(page.getByTestId("composer-bar"), `${theme}: the composer`, {
+      inside: true,
+    });
+    await expectReadable(
+      sidebar.getByRole("button", { name: "Heute", exact: true }),
+      `${theme}: Heute`,
+      { inside: true },
+    );
+    await expectReadable(
+      sidebar.locator("[data-main-conversation]"),
+      `${theme}: the main conversation row`,
+      { inside: true },
+    );
+    await expectReadable(
+      sidebar.getByRole("button", { name: "Researcher, 1:1 conversation" }),
+      `${theme}: the selected bot row`,
+      { inside: true },
+    );
+    await expectReadable(page.getByTestId("user-menu-trigger"), `${theme}: the user menu`, {
+      inside: true,
+    });
+  });
+
+  await openNewBot(page);
+  await page.getByTestId("create-bot-form").locator("label:has-text('Name') input").fill("Owl");
+  await inEachTheme(page, async (theme) => {
+    await captureScreenshot(page, testInfo, `shell-contrast-${theme}-new-bot`);
+    await expectReadable(sidePanel, `${theme}: the new bot form`, { inside: true });
+  });
+
+  await page.getByRole("button", { name: "Cancel new bot" }).click();
+  await page.getByTestId("bot-settings-trigger").click();
+  const advanced = page.getByTestId("bot-settings-advanced");
+  await advanced.locator("summary").click();
+  await expect(advanced.getByText("Open work")).toBeVisible();
+  await inEachTheme(page, async (theme) => {
+    await captureScreenshot(page, testInfo, `shell-contrast-${theme}-settings`);
+    await expectReadable(sidePanel, `${theme}: the bot settings form`, { inside: true });
+  });
 });

apps/web/src/components/stage/OoStage.tsx

@@ -175,7 +175,7 @@ export function OoStage({
         {(hasMessages || phase !== "idle") && (
           <div className={`flex w-full justify-center ${hasMessages ? "mb-1" : "mb-3"}`}>
             <div
-              className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-2.5 py-0.5 text-ui-label font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur-sm"
+              className="inline-flex items-center gap-2 rounded-full border border-border bg-foreground/5 px-2.5 py-0.5 text-ui-label font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur-sm"
               style={
                 reducedMotion
                   ? undefined
@@ -280,7 +280,7 @@ function StageEnsemble({
         return (
           <li key={member.botId} className="flex flex-col items-center gap-1" title={member.name}>
             <div
-              className={`relative flex size-14 items-center justify-center rounded-full border border-white/12 bg-slate-950/40 backdrop-blur-md ${
+              className={`relative flex size-14 items-center justify-center rounded-full border border-border bg-muted/40 backdrop-blur-md ${
                 isWorking && !reducedMotion ? "animate-pulse" : ""
               }`}
             >
@@ -484,7 +484,7 @@ export function OoGroupStage({
         className={`relative z-10 mx-auto flex w-full max-w-3xl flex-col items-center px-4 md:px-8 ${hasMessages ? "py-2 md:py-3" : "py-5 md:py-6"}`}
       >
         <div className="mb-3 w-full min-w-0 text-center">
-          <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-2.5 py-0.5 text-ui-label font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur-sm">
+          <div className="inline-flex items-center gap-2 rounded-full border border-border bg-foreground/5 px-2.5 py-0.5 text-ui-label font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur-sm">
             <span
               className={`size-1.5 rounded-full ${
                 running ? "bg-violet-400" : "bg-emerald-400"

apps/web/src/components/stage/StageHero.tsx

@@ -55,7 +55,7 @@ export function StageHero({
       ) : null}
 
       <div
-        className={`relative flex ${orbSize} items-center justify-center rounded-full border border-white/14 bg-slate-950/45 shadow-[0_16px_48px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-xl`}
+        className={`relative flex ${orbSize} items-center justify-center rounded-full border border-border bg-muted/45 shadow-[0_16px_48px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-xl`}
         style={
           reducedMotion
             ? undefined

apps/web/src/components/stage/TextStageCanvas.tsx

@@ -35,7 +35,7 @@ export function TextStageCanvas({
 
   return (
     <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden">
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_100%_70%_at_50%_0%,rgba(12,16,24,0.55)_0%,transparent_68%)]" />
+      <div className="absolute inset-0 bg-radial-[ellipse_100%_70%_at_50%_0%] from-card/55 to-transparent to-68%" />
       <div
         className={`absolute left-1/2 top-0 h-[min(48vh,320px)] w-[min(72vw,480px)] -translate-x-1/2 rounded-full blur-[72px] ${reducedMotion ? "" : "voice-bloom-emerald"}`}
         style={{

apps/web/src/pages/ScratchpadSection.tsx

@@ -106,7 +106,7 @@ export function ScratchpadSection({ botId }: { botId: string }) {
         <Trans>Open work</Trans>
       </div>
       {items.length === 0 ? (
-        <div className="py-1 text-ui-body text-muted-foreground/80">
+        <div className="py-1 text-ui-body text-muted-foreground">
           <Trans>None yet</Trans>
         </div>
       ) : (

apps/web/src/pages/Shell.tsx

@@ -3349,7 +3349,7 @@ export function ShellPage() {
     <div
       data-testid="shell-root"
       data-ready={shellReady}
-      className="relative flex h-full min-w-0 overflow-hidden bg-black bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-zinc-900 via-black to-black text-foreground/90 p-0 md:p-3 gap-0 md:gap-3"
+      className="relative flex h-full min-w-0 overflow-hidden bg-background text-foreground/90 p-0 md:p-3 gap-0 md:gap-3"
       onTouchStartCapture={(event) => {
         if (
           mobileSidebarOpen ||
@@ -3423,7 +3423,7 @@ export function ShellPage() {
           width: mobileSidebarOpen ? undefined : botsSidebarCollapsed ? 0 : leftSidebarWidth,
           maxWidth: mobileSidebarOpen ? 316 : undefined,
         }}
-        className={`absolute inset-y-0 start-0 z-40 flex w-[calc(100%-48px)] shrink-0 flex-col md:rounded-2xl md:border md:border-white/10 md:bg-[#0A0A0C] md:shadow-2xl bg-sidebar md:static md:z-auto md:translate-x-0 ${
+        className={`absolute inset-y-0 start-0 z-40 flex w-[calc(100%-48px)] shrink-0 flex-col md:rounded-2xl md:border md:border-sidebar-border md:shadow-2xl bg-sidebar md:static md:z-auto md:translate-x-0 ${
           mobileSidebarOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full"
         } ${
           botsSidebarCollapsed
@@ -3560,13 +3560,9 @@ export function ShellPage() {
                     setActiveNavPillar("heute");
                     setMobileSidebarOpen(false);
                   }}
-                  className={`flex w-full items-center gap-3 rounded-2xl px-3 py-3 text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
+                  className={rosterRowClass(activeNavPillar === "heute")}
-                    activeNavPillar === "heute"
-                      ? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
-                      : "hover:bg-white/[0.04]"
-                  }`}
                 >
-                  <div className="relative grid size-control-lg shrink-0 place-items-center rounded-full bg-emerald-500/10 text-emerald-400">
+                  <div className="relative grid size-control-lg shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
                     <Calendar strokeWidth={2.2} className="size-icon-md" />
                     {heuteActionCount > 0 ? (
                       <span
@@ -3820,12 +3816,10 @@ export function ShellPage() {
                                   status={item.chat.status}
                                 />
                                 <span
-                                  className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-[#0b0c10] ${
+                                  className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-sidebar ${
-                                    rosterStatusDot(item.chat.status) === "needs-you"
+                                    rosterStatusDot(item.chat.status) === "idle"
-                                      ? "bg-warning animate-pulse"
+                                      ? "bg-success"
-                                      : rosterStatusDot(item.chat.status) === "working"
+                                      : "bg-warning animate-pulse"
-                                        ? "bg-amber-400 animate-pulse"
-                                        : "bg-emerald-400"
                                   }`}
                                 />
                               </div>
@@ -3846,7 +3840,7 @@ export function ShellPage() {
                                         {needsYouChipLabel(item.chat.status)}
                                       </span>
                                     ) : item.chat.title ? (
-                                      <span className="min-w-0 truncate rounded-full border border-emerald-500/25 bg-emerald-500/10 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
+                                      <span className="min-w-0 truncate rounded-full border border-border bg-muted px-2 py-0.5 text-ui-label font-medium text-muted-foreground">
                                         {item.chat.title}
                                       </span>
                                     ) : null}
@@ -3900,7 +3894,7 @@ export function ShellPage() {
                 })}
                 <div className="sidebar-projekte">
                   {/* PROJEKTE SECTION */}
-                  <div className="flex items-center justify-between pt-4 pb-1 mt-3 border-t border-white/5 px-2.5">
+                  <div className="flex items-center justify-between pt-4 pb-1 mt-3 border-t border-sidebar-border px-2.5">
                     <div>
                       <div className="rk-shell-section-label">{t`Projekte`}</div>
                       <p className="mt-0.5 px-0.5 text-ui-caption text-muted-foreground/70">
@@ -4087,15 +4081,11 @@ export function ShellPage() {
                                         position: { x: event.clientX, y: event.clientY },
                                       });
                                     }}
-                                    className={`flex w-full items-center gap-3 rounded-2xl px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
+                                    className={rosterRowClass(
-                                      item.kind === "bot" && !inGroup && active?.id === item.chat.id
+                                      item.kind === "bot"
-                                        ? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
+                                        ? !inGroup && active?.id === item.chat.id
-                                        : item.kind === "group" &&
+                                        : inGroup && activeGroup?.id === item.chat.id,
-                                            inGroup &&
+                                    )}
-                                            activeGroup?.id === item.chat.id
-                                          ? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
-                                          : "hover:bg-white/[0.05] border border-transparent"
-                                    }`}
                                   >
                                     {item.kind === "bot" ? (
                                       <BotAvatar
@@ -4112,34 +4102,30 @@ export function ShellPage() {
                                         <div className="flex min-w-0 items-center gap-2 overflow-hidden">
                                           <span
                                             dir="auto"
-                                            className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${
+                                            className={`shrink-0 max-w-[170px] truncate text-ui-body tracking-tight ${rosterNameClass(
-                                              item.chat.unread
+                                              item.chat.unread,
-                                                ? "font-bold text-white"
+                                            )}`}
-                                                : "font-semibold text-white/95"
-                                            }`}
                                           >
                                             {item.chat.name}
                                           </span>
                                         </div>
                                         <div className="flex shrink-0 items-center gap-1.5">
-                                          <span className="text-ui-body-sm text-zinc-400 tabular-nums font-medium">
+                                          <span className={rosterTimeClass}>
                                             {formatRosterTime(item.chat.updatedAt)}
                                           </span>
                                           {item.chat.unread ? (
                                             <span
                                               aria-hidden="true"
-                                              className="inline-block h-2 w-2 rounded-full bg-emerald-400"
+                                              className={rosterUnreadDotClass}
                                             />
                                           ) : null}
                                         </div>
                                       </div>
                                       <div
                                         dir="auto"
-                                        className={`mt-0.5 truncate text-ui-body leading-snug ${
+                                        className={`mt-0.5 truncate text-ui-body leading-snug ${rosterPreviewClass(
-                                          item.chat.unread
+                                          item.chat.unread,
-                                            ? "font-medium text-white"
+                                        )}`}
-                                            : "text-zinc-300"
-                                        }`}
                                       >
                                         {cleanRosterPreview(item.chat.preview)}
                                       </div>
@@ -4705,7 +4691,7 @@ export function ShellPage() {
               ? rightSidebarWidth
               : 0,
         }}
-        className={`absolute inset-y-0 end-0 z-20 flex min-h-0 shrink-0 flex-col overflow-hidden bg-background md:rounded-2xl md:border md:border-white/10 md:bg-[#0A0A0C] md:shadow-2xl md:relative ${
+        className={`absolute inset-y-0 end-0 z-20 flex min-h-0 shrink-0 flex-col overflow-hidden bg-background md:rounded-2xl md:border md:border-border md:shadow-2xl md:relative ${
           panel &&
           (
             active ||
@@ -4809,8 +4795,8 @@ export function ShellPage() {
                   />
                   {isDesktop ? (
                     devServerRunning ? (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
+                      <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-ui-label font-medium text-foreground">
-                        <span className="size-1.5 rounded-full bg-emerald-400" />
+                        <span className="size-1.5 rounded-full bg-success" />
                         <Trans>Dev</Trans>
                       </span>
                     ) : (
@@ -4985,11 +4971,11 @@ export function ShellPage() {
                 <div className="fixed inset-0 z-50 flex items-center justify-center">
                   <button
                     type="button"
-                    className="absolute inset-0 bg-black/60"
+                    className="absolute inset-0 bg-overlay"
                     aria-label={t`Close`}
                     onClick={() => setShowCreateBotModal(false)}
                   />
-                  <div className="relative z-10 max-h-[90vh] w-[480px] overflow-y-auto rounded-2xl border border-white/10 bg-[#0A0A0C] p-6 shadow-2xl">
+                  <div className="relative z-10 max-h-[90vh] w-[480px] overflow-y-auto rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-2xl">
                     <div className="mb-4 flex items-center justify-between">
                       <h2 className="text-lg font-semibold text-foreground">
                         <Trans>Create new Bot</Trans>
@@ -6812,7 +6798,7 @@ const Composer = memo(function Composer({
         ) : null}
         <div
           data-testid="composer-bar"
-          className="apple-island relative flex items-center gap-3.5 rounded-[30px] py-3 pe-3.5 ps-4 transition-all duration-200 focus-within:border-emerald-500/40 focus-within:shadow-[0_20px_50px_-10px_rgba(0,0,0,0.85),inset_0_1px_0_rgba(255,255,255,0.22),0_0_0_1px_rgba(16,185,129,0.35)] shadow-[0_16px_40px_-8px_rgba(0,0,0,0.7),inset_0_1px_0_rgba(255,255,255,0.14)]"
+          className="apple-island relative flex items-center gap-3.5 rounded-[30px] py-3 pe-3.5 ps-4 transition-all duration-200"
         >
           <input
             ref={fileInputRef}
@@ -6828,7 +6814,7 @@ const Composer = memo(function Composer({
             aria-label={t`Attach file`}
             disabled={disabled}
             onClick={() => fileInputRef.current?.click()}
-            className="tactile-press size-10 shrink-0 rounded-full border border-white/10 bg-white/[0.06] text-foreground/80 transition-all hover:bg-white/[0.12] hover:text-white flex items-center justify-center cursor-pointer"
+            className="tactile-press size-10 shrink-0 rounded-full border border-border bg-foreground/5 text-foreground/80 transition-all hover:bg-foreground/10 hover:text-foreground flex items-center justify-center cursor-pointer"
           >
             <Plus strokeWidth={2.2} className="size-icon-lg" />
           </Button>
@@ -6836,9 +6822,9 @@ const Composer = memo(function Composer({
             {selectedSkill ? (
               <span
                 data-testid="skill-chip"
-                className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
+                className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-foreground/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
               >
-                <Box strokeWidth={1.8} className="shrink-0 text-blue-400 size-icon-md" />
+                <Box strokeWidth={1.8} className="shrink-0 text-muted-foreground size-icon-md" />
                 <span dir="auto" className="truncate">
                   {selectedSkill.name}
                 </span>
@@ -6857,7 +6843,7 @@ const Composer = memo(function Composer({
                 key={mentionChipKey(mention)}
                 data-testid="mention-chip"
                 data-mention-kind={mention.kind}
-                className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
+                className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-foreground/[0.08] px-3 py-1 text-ui-body font-medium text-foreground backdrop-blur-md"
               >
                 <MentionChipIcon mention={mention} />
                 <span dir="auto" className="truncate">
@@ -6937,7 +6923,7 @@ const Composer = memo(function Composer({
               autoComplete="off"
               dir="auto"
               rows={1}
-              className="max-h-36 min-h-[28px] min-w-[8rem] flex-1 resize-none overflow-y-auto bg-transparent py-1 text-[16.5px] leading-[1.55] text-foreground outline-none placeholder:text-muted-foreground/75 disabled:opacity-40 font-normal selection:bg-emerald-500/30"
+              className="max-h-36 min-h-[28px] min-w-[8rem] flex-1 resize-none overflow-y-auto bg-transparent py-1 text-[16.5px] leading-[1.55] text-foreground outline-none placeholder:text-muted-foreground/75 disabled:opacity-40 font-normal"
             />
           </div>
           {onVoice ? (
@@ -6970,7 +6956,7 @@ const Composer = memo(function Composer({
                 aria-label={t`Send`}
                 disabled={!canSend || disabled}
                 onClick={send}
-                className="tactile-press size-10 rounded-full bg-emerald-400 text-slate-950 hover:bg-emerald-300 shadow-[0_0_16px_rgba(16,185,129,0.35)] transition-transform active:scale-90 flex items-center justify-center cursor-pointer"
+                className="tactile-press size-10 rounded-full transition-transform active:scale-90 flex items-center justify-center cursor-pointer"
               >
                 <ArrowUp strokeWidth={2.6} className="size-icon-lg" />
               </Button>
@@ -6980,7 +6966,7 @@ const Composer = memo(function Composer({
                 aria-label={t`Stop`}
                 disabled={sending}
                 onClick={() => void onStop()}
-                className="tactile-press size-10 rounded-full border border-white/15 bg-white/[0.08] text-foreground/90 shadow-sm transition-colors hover:bg-white/[0.15] hover:text-white flex items-center justify-center cursor-pointer"
+                className="tactile-press size-10 rounded-full border border-border bg-foreground/[0.08] text-foreground/90 shadow-sm transition-colors hover:bg-foreground/15 hover:text-foreground flex items-center justify-center cursor-pointer"
               >
                 <Square strokeWidth={0} fill="currentColor" className="size-icon-sm" />
               </Button>
@@ -6991,7 +6977,7 @@ const Composer = memo(function Composer({
               aria-label={t`Send`}
               disabled={!canSend || disabled}
               onClick={send}
-              className="tactile-press size-10 shrink-0 rounded-full bg-emerald-400 text-slate-950 hover:bg-emerald-300 shadow-[0_0_16px_rgba(16,185,129,0.35)] transition-all active:scale-90 disabled:bg-white/[0.08] disabled:text-white/20 disabled:shadow-none flex items-center justify-center cursor-pointer"
+              className="tactile-press size-10 shrink-0 rounded-full transition-all active:scale-90 disabled:bg-foreground/[0.08] disabled:text-foreground/20 flex items-center justify-center cursor-pointer"
             >
               <ArrowUp strokeWidth={2.6} className="size-icon-lg" />
             </Button>
@@ -7346,19 +7332,22 @@ const MessageView = memo(function MessageView({
       {effectiveSpeakerName && message.role === "bot" && !encounterMode ? (
         <div className="mb-2 flex items-center justify-between">
           <div className="flex items-center gap-2.5">
-            <div className="relative flex items-center justify-center size-7 rounded-xl bg-white/[0.08] border border-white/[0.12] shadow-xs">
+            <div className="relative flex items-center justify-center size-7 rounded-xl bg-foreground/[0.08] border border-border shadow-xs">
               <EvooMascot size={22} interactive={false} pose={isLive ? "working" : "idle"} />
             </div>
             <div className="flex items-center gap-2">
-              <span className="text-[14.5px] font-semibold text-white tracking-tight" dir="auto">
+              <span
+                className="text-[14.5px] font-semibold text-foreground tracking-tight"
+                dir="auto"
+              >
                 {effectiveSpeakerName}
               </span>
-              <span className="rounded-full bg-emerald-500/15 border border-emerald-500/25 px-2 py-0.5 text-ui-label font-medium text-emerald-400">
+              <span className="rounded-full border border-border bg-muted px-2 py-0.5 text-ui-label font-medium text-muted-foreground">
                 Oo
               </span>
             </div>
           </div>
-          <span className="text-ui-label font-mono text-zinc-400 tabular-nums">
+          <span className="text-ui-label font-mono text-muted-foreground tabular-nums">
             {new Date(message.createdAt).toLocaleTimeString([], {
               hour: "2-digit",
               minute: "2-digit",

apps/web/src/pages/shell/bot-panel.tsx

@@ -441,7 +441,7 @@ export function BotSettings({
           }}
         />
       </div>
-      <label htmlFor={`${ids}-name`} className="mt-4 block text-ui-body text-muted-foreground/80">
+      <label htmlFor={`${ids}-name`} className={fieldLabelClass}>
         <Trans>Name</Trans>
         <Input
           id={`${ids}-name`}
@@ -484,10 +484,7 @@ export function BotSettings({
           >
             <Trans>Notifications</Trans>
           </div>
-          <div
+          <div id={`${ids}-notify-finish-desc`} className="text-ui-body-sm text-muted-foreground">
-            id={`${ids}-notify-finish-desc`}
-            className="text-ui-body-sm text-muted-foreground/70"
-          >
             <Trans>Get notified when this Bot finishes or needs input</Trans>
           </div>
         </div>

apps/web/src/pages/shell/roster-row-style.ts

@@ -1,20 +1,22 @@
 /** One look for sidebar conversation rows: the main conversation entry and the bot roster. */
 export function rosterRowClass(selected: boolean): string {
-  return `flex w-full items-center gap-3 rounded-2xl px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
+  return `flex w-full items-center gap-3 rounded-2xl border px-3 py-3 mb-[2px] text-start transition-all duration-150 cursor-pointer min-h-[52px] ${
     selected
-      ? "bg-white/[0.09] shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)] border border-emerald-500/30"
+      ? "border-sidebar-border bg-sidebar-accent shadow-[inset_0_1px_0_rgba(255,255,255,0.14),0_4px_16px_rgba(0,0,0,0.4)]"
-      : "hover:bg-white/[0.05] border border-transparent"
+      : "border-transparent hover:bg-sidebar-accent/50"
   }`;
 }
 
 export function rosterNameClass(unread: boolean): string {
-  return unread ? "font-bold text-white" : "font-semibold text-white/95";
+  return unread ? "font-bold text-sidebar-foreground" : "font-semibold text-sidebar-foreground";
 }
 
-export const rosterTimeClass = "text-ui-body-sm text-zinc-400 tabular-nums font-medium";
+// Muted text measures about 4.4:1 on the light sidebar; a dimmed foreground stays above 4.5:1.
+export const rosterTimeClass =
+  "text-ui-body-sm text-sidebar-foreground/65 tabular-nums font-medium";
 
-export const rosterUnreadDotClass = "inline-block h-2 w-2 rounded-full bg-emerald-400";
+export const rosterUnreadDotClass = "inline-block h-2 w-2 rounded-full bg-sidebar-foreground";
 
 export function rosterPreviewClass(unread: boolean): string {
-  return unread ? "font-medium text-white" : "text-zinc-300";
+  return unread ? "font-medium text-sidebar-foreground" : "text-sidebar-foreground/85";
 }

apps/web/src/styles.css

@@ -11,13 +11,7 @@ body,
 #root {
   height: 100%;
   margin: 0;
-  background: #07090e;
+  background: var(--background);
-  background-image: radial-gradient(
-    circle at 50% 0%,
-    rgba(16, 185, 129, 0.07) 0%,
-    rgba(14, 165, 233, 0.04) 40%,
-    transparent 80%
-  );
   color: var(--foreground);
   font-family:
     "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist Variable",
@@ -41,8 +35,8 @@ body,
 .apple-island {
   backdrop-filter: blur(36px) saturate(210%);
   -webkit-backdrop-filter: blur(36px) saturate(210%);
-  background: rgba(12, 16, 24, 0.88);
+  background: color-mix(in srgb, var(--card) 88%, transparent);
-  border: 1px solid rgba(255, 255, 255, 0.13);
+  border: 1px solid color-mix(in srgb, var(--foreground) 13%, transparent);
   box-shadow:
     0 18px 44px -8px rgba(0, 0, 0, 0.75),
     inset 0 1px 0 rgba(255, 255, 255, 0.16);
@@ -224,11 +218,11 @@ body,
   background: transparent;
 }
 .rk-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
+  background: var(--scrollbar);
   border-radius: 3px;
 }
 .rk-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.28);
+  background: var(--scrollbar-hover);
 }
 
 .app-drag {

packages/ui-web/src/components/ui/tabs.tsx

@@ -49,7 +49,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-ui-body-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-icon-md",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-ui-body-sm font-medium whitespace-nowrap text-muted-foreground transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-icon-md",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",