diff --git a/packages/devtools/README.md b/packages/devtools/README.md
index 6a582ae94..28d23b669 100644
--- a/packages/devtools/README.md
+++ b/packages/devtools/README.md
@@ -21,7 +21,9 @@ The widget renders nothing in production builds (`NODE_ENV === "production"`) un
 
 `@openuidev/react-lang` ships with this package and auto-mounts the widget in development — no manual `<OpenUIDevtools />` needed. Mounting it manually still works (e.g. to customize props): only one instance ever renders, and a manually mounted instance takes precedence over the auto-mounted one.
 
-In development, `createLibrary()` registers the live library with the widget. The **OpenUI Paste** banner at the bottom of the drawer widens the drawer into an editor against that library (host CSS included), with Render / Validation / Tree / JSON / Stream panels and simulated stream playback. A stream event's **Debug** button opens its response the same way. Eject moves the view into a separate window. The first visit opens a short step-by-step guide (also on **Help**); dismissing it is remembered.
+**OpenUI Inspect** (the event drawer) and **OpenUI Debug** are independent tools on independent trays. Debug docks beside Inspect rather than growing out of it, and each closes on its own: dismissing Debug leaves the event list where it was, and vice versa.
+
+In development, `createLibrary()` registers the live library with the widget. The **OpenUI Debug** banner at the bottom of the Inspect tray opens an editor against that library (host CSS included), with Render / Validation / Tree / JSON / Stream panels and simulated stream playback. A stream event's **Debug** button opens its response the same way. Eject moves the view into a separate window. The first visit opens a short step-by-step guide (also on **Help**); dismissing it is remembered.
 
 Display filters ("auto-open on error", "errors only") and the theme live behind the gear in the drawer header. The theme is Light or Dark, chosen manually and remembered across reloads: nothing is auto-detected from the host page or the OS, and it styles the devtools chrome only — never your app. The floating Shiro toggle stays dark so the branded mark stays readable.
 
diff --git a/packages/devtools/src/IconButton.tsx b/packages/devtools/src/IconButton.tsx
new file mode 100644
index 000000000..5d542b90b
--- /dev/null
+++ b/packages/devtools/src/IconButton.tsx
@@ -0,0 +1,63 @@
+import { useState, type ButtonHTMLAttributes, type CSSProperties } from "react";
+
+/**
+ * The widget's square icon buttons — header actions, close crosses, the
+ * settings trigger. They sit on their tray with no chrome until pointed at,
+ * then take a fill; keeping that in one component means every one of them
+ * behaves the same without threading hover state through each call site.
+ */
+export function IconButton({
+  active = false,
+  outlined = false,
+  style,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  /** Held open, e.g. the settings trigger while its menu shows. */
+  active?: boolean;
+  /** Carries its own border, for buttons that sit on a busy surface. */
+  outlined?: boolean;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      {...props}
+      style={{
+        ...styles.button,
+        ...(outlined ? styles.outlined : null),
+        ...(hovered || active ? styles.filled : null),
+        ...style,
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    />
+  );
+}
+
+const styles = {
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    width: 26,
+    height: 26,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "transparent",
+    borderRadius: 8,
+    background: "transparent",
+    color: "var(--oui-dt-fg-muted)",
+    cursor: "pointer",
+    padding: 0,
+    transition: "background 150ms ease, color 150ms ease",
+  },
+  outlined: {
+    borderColor: "var(--oui-dt-control-border)",
+    background: "var(--oui-dt-control-bg)",
+    color: "var(--oui-dt-fg)",
+  },
+  filled: {
+    background: "var(--oui-dt-bg-subtle)",
+    color: "var(--oui-dt-fg)",
+  },
+} satisfies Record<string, CSSProperties>;
diff --git a/packages/devtools/src/LevelIcon.tsx b/packages/devtools/src/LevelIcon.tsx
index 9b754fd59..43252435a 100644
--- a/packages/devtools/src/LevelIcon.tsx
+++ b/packages/devtools/src/LevelIcon.tsx
@@ -1,30 +1,32 @@
 import { type ObservabilityEvent } from "@openuidev/observability";
-import { Info, TriangleAlert, X } from "lucide-react";
-import type { CSSProperties } from "react";
+import { X } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
 
+// The chip is already the container, so info is a bare letter rather than an
+// icon that draws its own circle around one.
 const BY_LEVEL = {
   info: {
-    Icon: Info,
+    glyph: "i",
     style: {
-      background: "var(--oui-dt-bg-subtle)",
+      background: "var(--oui-dt-level-neutral)",
       color: "var(--oui-dt-fg-muted)",
     },
   },
   warning: {
-    Icon: TriangleAlert,
+    glyph: <X size={11} strokeWidth={2.75} />,
     style: {
-      background: "var(--oui-dt-warning-bg)",
+      background: "var(--oui-dt-level-warning)",
       color: "var(--oui-dt-warning)",
     },
   },
   error: {
-    Icon: X,
+    glyph: <X size={11} strokeWidth={2.75} />,
     style: {
-      background: "var(--oui-dt-danger-bg)",
+      background: "var(--oui-dt-level-danger)",
       color: "var(--oui-dt-danger)",
     },
   },
-} satisfies Record<ObservabilityEvent["level"], { Icon: typeof Info; style: CSSProperties }>;
+} satisfies Record<ObservabilityEvent["level"], { glyph: ReactNode; style: CSSProperties }>;
 
 /**
  * Severity as a colored glyph instead of a word, so the row header has room for
@@ -32,10 +34,10 @@ const BY_LEVEL = {
  * name, which is also what tests and screen readers read.
  */
 export function LevelIcon({ level }: { level: ObservabilityEvent["level"] }) {
-  const { Icon, style } = BY_LEVEL[level];
+  const { glyph, style } = BY_LEVEL[level];
   return (
     <span style={{ ...styles.chip, ...style }} role="img" aria-label={level} title={level}>
-      <Icon size={11} strokeWidth={2.75} />
+      {glyph}
     </span>
   );
 }
@@ -46,8 +48,12 @@ const styles = {
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
+    boxSizing: "border-box",
     width: 18,
     height: 18,
-    borderRadius: 999,
+    borderRadius: 6,
+    fontSize: 11,
+    fontWeight: 700,
+    lineHeight: 1,
   },
 } satisfies Record<string, CSSProperties>;
diff --git a/packages/devtools/src/OpenUIDevtools.test.ts b/packages/devtools/src/OpenUIDevtools.test.ts
index 2ed456b57..ed6957823 100644
--- a/packages/devtools/src/OpenUIDevtools.test.ts
+++ b/packages/devtools/src/OpenUIDevtools.test.ts
@@ -90,7 +90,7 @@ function render(props: OpenUIDevtoolsProps): void {
 /** The floating toggle button. */
 function toggle(): HTMLButtonElement {
   const button = container.querySelector<HTMLButtonElement>(
-    'button[aria-label="Open OpenUI devtools"]',
+    'button[aria-label="Open OpenUI Inspect"]',
   );
   if (!button) throw new Error("toggle button not found");
   return button;
@@ -105,11 +105,62 @@ function buttonByText(text: string): HTMLButtonElement | undefined {
     HTMLButtonElement | undefined;
 }
 
-function openPasteButton(): HTMLButtonElement | undefined {
-  return (
-    container.querySelector<HTMLButtonElement>('button[aria-label="Open OpenUI Paste"]') ??
-    undefined
+/** Emits a settled stream event and expands its row, exposing the Debug button. */
+function seedStream(response: string): void {
+  act(() =>
+    observability.info({
+      kind: "react-lang:stream",
+      id: "stream-debug-entry",
+      phase: "settled",
+      response,
+      parser: { statementCount: response.trim() ? 1 : 0, orphaned: [] },
+      errors: [],
+    }),
   );
+  const row = container.querySelector<HTMLButtonElement>(
+    'button[aria-label="Toggle OpenUI Lang stream details"]',
+  );
+  if (!row) throw new Error("stream row not found");
+  click(row);
+}
+
+function streamDebugButton(): HTMLButtonElement | undefined {
+  return container.querySelector<HTMLButtonElement>('button[aria-label="Debug"]') ?? undefined;
+}
+
+/**
+ * Debug has no banner of its own — a stream event's Debug button is the way in.
+ * The default response is blank so the editor opens effectively empty (the
+ * button is disabled on a truly empty response).
+ */
+function openDebugTray(response = " "): void {
+  seedStream(response);
+  const debug = streamDebugButton();
+  if (!debug) throw new Error("stream Debug button not found");
+  click(debug);
+}
+
+/**
+ * The stream row's overview stats, each read back as "2 statements" — the count
+ * lives in its own badge, so textContent alone would say "2statements".
+ */
+function overviewStats(): string[] {
+  const row = container.querySelector<HTMLElement>(
+    'button[aria-label="Toggle OpenUI Lang stream details"] > div:last-child',
+  );
+  return [...(row?.children ?? [])].map((stat) => {
+    const count = stat.firstElementChild?.textContent ?? "";
+    return `${count} ${(stat.textContent ?? "").slice(count.length)}`;
+  });
+}
+
+/**
+ * Both trays stay mounted so they can transition; a retracted one carries
+ * `inert`. "Showing" therefore means present and not inert.
+ */
+function trayShown(label: "OpenUI Inspect" | "OpenUI Debug"): boolean {
+  const tray = container.querySelector<HTMLElement>(`aside[aria-label="${label}"]`);
+  return !!tray && !tray.hasAttribute("inert");
 }
 
 /** The display filters live behind the header settings button. */
@@ -192,12 +243,12 @@ describe("OpenUIDevtools", () => {
   it("restores the errors-only filter from a previous session", () => {
     render({ enabled: true, errorsOnly: false });
     openSettings();
-    act(() => checkboxLabeled("Errors only").click());
-    expect(checkboxLabeled("Errors only").checked).toBe(true);
+    act(() => checkboxLabeled("Show errors only").click());
+    expect(checkboxLabeled("Show errors only").checked).toBe(true);
 
     remount({ enabled: true, errorsOnly: false });
     openSettings();
-    expect(checkboxLabeled("Errors only").checked).toBe(true);
+    expect(checkboxLabeled("Show errors only").checked).toBe(true);
 
     act(() => observability.info({ kind: "just-info" }));
     act(() => observability.error({ kind: "real-error" }));
@@ -277,8 +328,8 @@ describe("OpenUIDevtools", () => {
     expect(container.textContent?.match(/OpenUI Lang stream/g)).toHaveLength(1);
     expect(container.querySelector('[aria-label="info"]')).not.toBeNull();
     expect(container.textContent).toContain("Streaming");
-    expect(container.textContent).toContain("2 statements");
-    expect(container.textContent).toContain("1 orphaned statement");
+    expect(overviewStats()).toContain("2 statements");
+    expect(overviewStats()).toContain("1 orphaned statement");
     expect(container.textContent).not.toContain("stream-1");
     expect(container.textContent).not.toContain('root = Card("done")');
 
@@ -328,8 +379,8 @@ describe("OpenUIDevtools", () => {
     expect(container.textContent?.match(/OpenUI Lang stream/g)).toHaveLength(1);
     expect(container.textContent).not.toContain("settled");
     expect(container.textContent).not.toContain("Streaming");
-    expect(container.textContent).toContain("1 statement");
-    expect(container.textContent).toContain("1 error");
+    expect(overviewStats()).toContain("1 statement");
+    expect(overviewStats()).toContain("1 error");
     expect(container.textContent).not.toContain("Unknown component Ghost");
 
     const expand = container.querySelector<HTMLButtonElement>(
@@ -345,7 +396,7 @@ describe("OpenUIDevtools", () => {
     expect(toggle().textContent).toContain("1");
   });
 
-  it("debugs a stream response in OpenUI Paste", () => {
+  it("debugs a stream response in OpenUI Debug", () => {
     seedLibrary();
     render({ enabled: true, errorsOnly: false });
     act(() =>
@@ -369,7 +420,7 @@ describe("OpenUIDevtools", () => {
     const editor = container.querySelector<HTMLTextAreaElement>(
       'textarea[aria-label="OpenUI Lang"]',
     );
-    expect(container.querySelector('[aria-label="OpenUI Paste"]')).not.toBeNull();
+    expect(trayShown("OpenUI Debug")).toBe(true);
     expect(editor?.value).toBe('root = Card("from stream")');
   });
 
@@ -440,7 +491,7 @@ describe("OpenUIDevtools", () => {
     render({ enabled: true });
     act(() => secondRoot.render(createElement(OpenUIDevtools, { enabled: true })));
 
-    expect(document.querySelectorAll('button[aria-label="Open OpenUI devtools"]')).toHaveLength(1);
+    expect(document.querySelectorAll('button[aria-label="Open OpenUI Inspect"]')).toHaveLength(1);
 
     act(() => secondRoot.unmount());
     second.remove();
@@ -449,7 +500,7 @@ describe("OpenUIDevtools", () => {
   it("lets a manual instance win over an auto-mounted one", () => {
     // Auto-mounted instance first (as react-lang's bootstrap would do) …
     render({ enabled: true, __autoMounted: true });
-    expect(container.querySelector('button[aria-label="Open OpenUI devtools"]')).not.toBeNull();
+    expect(container.querySelector('button[aria-label="Open OpenUI Inspect"]')).not.toBeNull();
 
     // … then a manual instance mounts and takes over.
     const manual = document.createElement("div");
@@ -457,13 +508,13 @@ describe("OpenUIDevtools", () => {
     const manualRoot = createRoot(manual);
     act(() => manualRoot.render(createElement(OpenUIDevtools, { enabled: true })));
 
-    expect(container.querySelector('button[aria-label="Open OpenUI devtools"]')).toBeNull();
-    expect(manual.querySelector('button[aria-label="Open OpenUI devtools"]')).not.toBeNull();
+    expect(container.querySelector('button[aria-label="Open OpenUI Inspect"]')).toBeNull();
+    expect(manual.querySelector('button[aria-label="Open OpenUI Inspect"]')).not.toBeNull();
 
     // When the manual instance unmounts, the auto instance takes back over.
     act(() => manualRoot.unmount());
     manual.remove();
-    expect(container.querySelector('button[aria-label="Open OpenUI devtools"]')).not.toBeNull();
+    expect(container.querySelector('button[aria-label="Open OpenUI Inspect"]')).not.toBeNull();
   });
 
   it("removes a resolved stream from the errors-only view", () => {
@@ -492,25 +543,27 @@ describe("OpenUIDevtools", () => {
     expect(container.textContent).toContain("No events captured yet.");
   });
 
-  it("disables OpenUI Paste until a library is registered", () => {
+  it("disables OpenUI Debug until a library is registered", () => {
     render({ enabled: true });
-    expect(openPasteButton()?.disabled).toBe(true);
+    seedStream('root = Card("x")');
+    expect(streamDebugButton()?.disabled).toBe(true);
   });
 
-  it("opens OpenUI Paste from a late-mounted registry entry", () => {
+  it("opens OpenUI Debug from a late-mounted registry entry", () => {
     seedLibrary();
     render({ enabled: true });
-    const paste = openPasteButton();
-    expect(paste?.disabled).toBe(false);
-    click(paste!);
-    expect(container.querySelector('[aria-label="OpenUI Paste"]')).not.toBeNull();
+    seedStream('root = Card("x")');
+    const debug = streamDebugButton();
+    expect(debug?.disabled).toBe(false);
+    click(debug!);
+    expect(trayShown("OpenUI Debug")).toBe(true);
     expect(container.querySelector('textarea[aria-label="OpenUI Lang"]')).not.toBeNull();
   });
 
   it("shows paste panels and stream controls", () => {
     seedLibrary();
     render({ enabled: true });
-    click(openPasteButton()!);
+    openDebugTray();
     expect(container.querySelector('[aria-label="Playback controls"]')).not.toBeNull();
     expect(container.querySelector('button[aria-label="Stream"]')).not.toBeNull();
     const tabs = container.querySelector('[role="tablist"]')?.textContent ?? "";
@@ -521,10 +574,10 @@ describe("OpenUIDevtools", () => {
     expect(tabs).toContain("Stream");
   });
 
-  it("shows the installed lang-core version in OpenUI Paste", async () => {
+  it("shows the installed lang-core version in OpenUI Debug", async () => {
     seedLibrary();
     render({ enabled: true });
-    click(openPasteButton()!);
+    openDebugTray();
     await act(async () => {
       await Promise.resolve();
     });
@@ -534,7 +587,7 @@ describe("OpenUIDevtools", () => {
   it("switches to the validation panel", async () => {
     seedLibrary();
     render({ enabled: true });
-    click(openPasteButton()!);
+    openDebugTray();
     await act(async () => {
       await Promise.resolve();
     });
@@ -560,7 +613,42 @@ describe("OpenUIDevtools", () => {
     expect(container.textContent).toContain("No events captured yet.");
   });
 
-  it("ejects OpenUI Paste into a separate window", () => {
+  it("opens OpenUI Debug on its own tray beside Inspect", () => {
+    seedLibrary();
+    render({ enabled: true });
+    click(toggle());
+    openDebugTray();
+
+    expect(trayShown("OpenUI Inspect")).toBe(true);
+    expect(trayShown("OpenUI Debug")).toBe(true);
+  });
+
+  it("closes only the Debug tray, leaving Inspect open", () => {
+    seedLibrary();
+    render({ enabled: true });
+    click(toggle());
+    openDebugTray();
+
+    click(container.querySelector('button[aria-label="Close OpenUI Debug"]')!);
+
+    expect(trayShown("OpenUI Debug")).toBe(false);
+    expect(trayShown("OpenUI Inspect")).toBe(true);
+    expect(toggle().getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("closes only the Inspect tray, leaving Debug open", () => {
+    seedLibrary();
+    render({ enabled: true });
+    click(toggle());
+    openDebugTray();
+
+    click(container.querySelector('button[aria-label="Close OpenUI Inspect"]')!);
+
+    expect(trayShown("OpenUI Inspect")).toBe(false);
+    expect(trayShown("OpenUI Debug")).toBe(true);
+  });
+
+  it("ejects OpenUI Debug into a separate window", () => {
     seedLibrary();
     const popupDoc = document.implementation.createHTMLDocument("paste");
     const popup = {
@@ -574,17 +662,17 @@ describe("OpenUIDevtools", () => {
     const open = vi.spyOn(window, "open").mockReturnValue(popup as unknown as Window);
 
     render({ enabled: true });
-    click(openPasteButton()!);
-    click(container.querySelector('button[aria-label="Open OpenUI Paste in a new window"]')!);
+    openDebugTray();
+    click(container.querySelector('button[aria-label="Open OpenUI Debug in a new window"]')!);
 
     expect(open).toHaveBeenCalled();
-    expect(container.querySelector('[aria-label="OpenUI Paste"]')).toBeNull();
+    expect(trayShown("OpenUI Debug")).toBe(false);
     expect(popupDoc.getElementById("openui-paste-root")).not.toBeNull();
-    expect(popupDoc.body.textContent).toContain("OpenUI Paste");
+    expect(popupDoc.body.textContent).toContain("OpenUI Debug");
     open.mockRestore();
   });
 
-  it("focuses the ejected window when OpenUI Paste is clicked again", () => {
+  it("focuses the ejected window when OpenUI Debug is clicked again", () => {
     seedLibrary();
     const popupDoc = document.implementation.createHTMLDocument("paste");
     const popup = {
@@ -598,14 +686,40 @@ describe("OpenUIDevtools", () => {
     const open = vi.spyOn(window, "open").mockReturnValue(popup as unknown as Window);
 
     render({ enabled: true });
-    click(openPasteButton()!);
-    click(container.querySelector('button[aria-label="Open OpenUI Paste in a new window"]')!);
+    openDebugTray();
+    click(container.querySelector('button[aria-label="Open OpenUI Debug in a new window"]')!);
     popup.focus.mockClear();
 
-    click(openPasteButton()!);
+    // Same entry point again, with the row still expanded from the first open.
+    click(streamDebugButton()!);
 
     expect(popup.focus).toHaveBeenCalled();
-    expect(container.querySelector('[aria-label="OpenUI Paste"]')).toBeNull();
+    expect(trayShown("OpenUI Debug")).toBe(false);
+    open.mockRestore();
+  });
+
+  it("returns an ejected window to the tray", () => {
+    seedLibrary();
+    const popupDoc = document.implementation.createHTMLDocument("paste");
+    const popup = {
+      document: popupDoc,
+      focus: vi.fn(),
+      close: vi.fn(),
+      closed: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+    const open = vi.spyOn(window, "open").mockReturnValue(popup as unknown as Window);
+
+    render({ enabled: true });
+    openDebugTray();
+    click(container.querySelector('button[aria-label="Open OpenUI Debug in a new window"]')!);
+    expect(trayShown("OpenUI Debug")).toBe(false);
+
+    click(popupDoc.querySelector('button[aria-label="Return OpenUI Debug to the tray"]')!);
+
+    expect(popup.close).toHaveBeenCalled();
+    expect(trayShown("OpenUI Debug")).toBe(true);
     open.mockRestore();
   });
 
@@ -614,10 +728,10 @@ describe("OpenUIDevtools", () => {
     const open = vi.spyOn(window, "open").mockReturnValue(null);
 
     render({ enabled: true });
-    click(openPasteButton()!);
-    click(container.querySelector('button[aria-label="Open OpenUI Paste in a new window"]')!);
+    openDebugTray();
+    click(container.querySelector('button[aria-label="Open OpenUI Debug in a new window"]')!);
 
-    expect(container.querySelector('[aria-label="OpenUI Paste"]')).not.toBeNull();
+    expect(trayShown("OpenUI Debug")).toBe(true);
     expect(container.textContent).toContain("Allow popups for this origin");
     open.mockRestore();
   });
diff --git a/packages/devtools/src/OpenUIDevtools.tsx b/packages/devtools/src/OpenUIDevtools.tsx
index 1af0c25a1..24c21dd92 100644
--- a/packages/devtools/src/OpenUIDevtools.tsx
+++ b/packages/devtools/src/OpenUIDevtools.tsx
@@ -5,21 +5,11 @@ import {
   type ObservabilityErrorInfo,
   type ObservabilityEvent,
 } from "@openuidev/observability";
-import {
-  ArrowLeft,
-  Check,
-  ChevronRight,
-  Copy,
-  Moon,
-  Settings,
-  Sun,
-  Trash2,
-  WrapText,
-  X,
-} from "lucide-react";
+import { ArrowLeft, Check, Copy, Inbox, RotateCcw, Settings, WrapText, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { addOrReplaceEvent } from "./eventBuffer";
+import { IconButton } from "./IconButton";
 import { LevelIcon } from "./LevelIcon";
 import { isLibraryEvent, useRegisteredLibraries } from "./libraryRegistry";
 import { openPasteWindow, pasteMountNode, PasteUI } from "./paste";
@@ -28,8 +18,27 @@ import { getReactLangStreamDetail, ReactLangStreamEventRow } from "./ReactLangSt
 import { ShiroLogo } from "./ShiroLogo";
 import { useDevtoolsSingleton } from "./singleton";
 import { DEFAULT_COLOR_SCHEME, DevtoolsSchemeProvider, themeVars, type ColorScheme } from "./theme";
+import { ThemeSegmented } from "./ThemeToggle";
 import { useDevtoolsConfig, type DevtoolsConfig } from "./useDevtoolsConfig";
 
+const RELIABILITY_DOCS_URL = "https://www.openui.com/docs/openui-lang/reliability";
+
+/** Uniform row height for the settings menu, set by its tallest control. */
+const MENU_ROW_HEIGHT = 28;
+
+/**
+ * Tray geometry. The two trays together fill a block anchored to the bottom
+ * right — 85% of the viewport, capped so it stops growing on very large
+ * displays. Inspect keeps a fixed width and Debug takes whatever is left,
+ * overlapping Inspect rather than collapsing once it hits its floor.
+ */
+const TRAY_EDGE = 12;
+const TRAY_GAP = 12;
+const INSPECT_WIDTH = 480;
+const DEBUG_MIN_WIDTH = 360;
+const BLOCK_W = `min(85vw, 3456px)`;
+const BLOCK_H = `min(85vh, 2234px)`;
+
 export type DevtoolsPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 export interface OpenUIDevtoolsProps {
@@ -60,9 +69,11 @@ export interface OpenUIDevtoolsProps {
  * dev-only widget that surfaces events captured by `@openuidev/observability` —
  * a Shiro-logo button (which turns red with the error count) that opens a side
  * drawer listing every captured event; selecting one drills into its stack
- * trace, and the footer banner widens the drawer into OpenUI Paste. Display
- * filters and the theme live in the header settings menu. Renders nothing in
- * production unless `enabled` is set explicitly.
+ * trace. OpenUI Inspect and OpenUI Debug are independent tools on independent
+ * trays: the footer banner opens Debug in its own tray beside Inspect, and
+ * either closes without disturbing the other. Display filters and the theme
+ * live in the header settings menu. Renders nothing in production unless
+ * `enabled` is set explicitly.
  */
 export function OpenUIDevtools({
   enabled,
@@ -86,6 +97,8 @@ export function OpenUIDevtools({
   const [pasteOpen, setPasteOpen] = useState(false);
   const [popup, setPopup] = useState<Window | null>(null);
   const [popupBlocked, setPopupBlocked] = useState(false);
+  const [toggleHovered, setToggleHovered] = useState(false);
+  const [bannerHovered, setBannerHovered] = useState(false);
   const [code, setCode] = useState("");
   const libraries = useRegisteredLibraries();
   const { config, setConfig, configRef } = useDevtoolsConfig({
@@ -108,10 +121,11 @@ export function OpenUIDevtools({
     });
   }, [isEnabled, maxEvents, configRef]);
 
-  // Escape steps back: paste → stack → list → closed. The settings menu handles
-  // its own Escape first (capture phase), so it never falls through to here.
+  // Escape dismisses the top tray first: Debug → stack → list → closed. The
+  // settings menu handles its own Escape first (capture phase), so it never
+  // falls through to here.
   useEffect(() => {
-    if (!open) return;
+    if (!open && !pasteOpen) return;
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
       if (pasteOpen) setPasteOpen(false);
@@ -166,10 +180,14 @@ export function OpenUIDevtools({
     setPopupBlocked(false);
   };
 
-  // Dismissing the widget always collapses paste, so it never reopens wide.
-  const closeDrawer = () => {
-    setPasteOpen(false);
+  // Inspect and Debug are independent trays — closing one leaves the other be.
+  const closeDrawer = () => setOpen(false);
+
+  // The scrim is shared, so dismissing it retracts both trays. An ejected Debug
+  // window is its own surface and is left alone.
+  const dismissTrays = () => {
     setOpen(false);
+    setPasteOpen(false);
   };
 
   const ejectPaste = () => {
@@ -183,6 +201,16 @@ export function OpenUIDevtools({
     setPasteOpen(false);
   };
 
+  // Ejected -> back into the tray, without losing the editor's contents.
+  const minimizePaste = () => {
+    if (popup) {
+      popup.close();
+      setPopup(null);
+    }
+    setPopupBlocked(false);
+    setPasteOpen(true);
+  };
+
   const openPaste = () => {
     setPopupBlocked(false);
     if (popup && !popup.closed) {
@@ -200,28 +228,60 @@ export function OpenUIDevtools({
       onCodeChange={setCode}
       ejected={Boolean(popup)}
       onEject={ejectPaste}
-      // In the drawer the cross dismisses the widget and the back arrow returns
-      // to the list; an ejected window only has its own close.
-      onClose={popup ? closePaste : closeDrawer}
-      onBack={popup ? undefined : closePaste}
+      onMinimize={minimizePaste}
+      // Debug owns its own tray, so its cross closes only Debug — in the drawer
+      // and in an ejected window alike. There is no list to step back to.
+      onClose={closePaste}
+      theme={scheme}
+      onThemeChange={(theme) => setConfig({ theme })}
       helpSeen={config.helpSeen}
       onHelpSeen={markHelpSeen}
       popupBlocked={popupBlocked}
     />
   );
   const popupRoot = popup ? pasteMountNode(popup) : null;
-  const headerTitle = selected ? `${selected.level} — stack trace` : "OpenUI Devtools";
+  const headerTitle = selected ? `${selected.level} — stack trace` : "OpenUI Inspect";
+
+  // Inspect is pinned to the right edge; Debug fills the rest of the block and
+  // slides over to reclaim Inspect's slot whenever Inspect is out.
+  const inspectSlot = open ? INSPECT_WIDTH + TRAY_GAP : 0;
+  const inspectTray: CSSProperties = {
+    right: TRAY_EDGE,
+    bottom: TRAY_EDGE,
+    height: BLOCK_H,
+    width: `min(${INSPECT_WIDTH}px, calc(100vw - ${TRAY_EDGE * 2}px))`,
+    transform: open ? "translateX(0)" : `translateX(calc(100% + ${TRAY_EDGE}px))`,
+  };
+  // Debug is a workspace rather than a peek at the app behind it: it fills
+  // everything Inspect leaves (left/right edges rather than a width, so the
+  // inset matches top and bottom) and cuts straight in instead of sliding.
+  // Overrides the shared chrome, so it is spread last.
+  const debugTray: CSSProperties = {
+    right: TRAY_EDGE + inspectSlot,
+    bottom: TRAY_EDGE,
+    height: BLOCK_H,
+    width: `max(${DEBUG_MIN_WIDTH}px, calc(${BLOCK_W} - ${inspectSlot}px))`,
+    transform: "none",
+    transition: "none",
+    visibility: pasteOpen ? "visible" : "hidden",
+  };
 
   return (
     <DevtoolsSchemeProvider scheme={scheme}>
       <div style={{ ...styles.toggleWrap, ...themeVars(scheme), ...positionStyles[position] }}>
         <button
-          style={{ ...styles.toggle, ...(errorCount > 0 ? styles.toggleError : null) }}
+          style={{
+            ...styles.toggle,
+            ...(errorCount > 0 ? styles.toggleError : null),
+            ...(toggleHovered ? styles.toggleHover : null),
+          }}
           onClick={openDrawer}
-          aria-label="Open OpenUI devtools"
+          onMouseEnter={() => setToggleHovered(true)}
+          onMouseLeave={() => setToggleHovered(false)}
+          aria-label="Open OpenUI Inspect"
           aria-expanded={open}
           title={
-            errorCount > 0 ? `${errorCount} error${errorCount === 1 ? "" : "s"}` : "OpenUI devtools"
+            errorCount > 0 ? `${errorCount} error${errorCount === 1 ? "" : "s"}` : "OpenUI Inspect"
           }
         >
           {errorCount > 0 ? (
@@ -237,198 +297,205 @@ export function OpenUIDevtools({
         style={{
           ...styles.backdrop,
           ...themeVars(scheme),
-          ...(open ? styles.backdropOpen : null),
+          ...(open || pasteOpen ? styles.backdropOpen : null),
         }}
-        onClick={closeDrawer}
+        onClick={dismissTrays}
       >
         <aside
           style={{
             ...styles.drawer,
-            ...(pasteOpen ? styles.drawerWide : null),
+            ...inspectTray,
             ...(open ? styles.drawerOpen : null),
           }}
           role="dialog"
-          aria-modal="true"
-          aria-label={pasteOpen ? "OpenUI Paste" : "OpenUI devtools"}
+          aria-modal={!pasteOpen}
+          aria-label="OpenUI Inspect"
+          inert={!open}
           onClick={(event) => event.stopPropagation()}
         >
-          {pasteOpen ? (
-            <div style={styles.pasteHost}>{paste}</div>
-          ) : (
-            <>
-              <div style={styles.header}>
-                <div style={styles.headerLeft}>
-                  {selected ? (
+          <>
+            <div style={styles.header}>
+              <div style={styles.headerLeft}>
+                {selected ? (
+                  <IconButton
+                    outlined
+                    onClick={() => setSelected(null)}
+                    aria-label="Back to event list"
+                  >
+                    <ArrowLeft size={14} />
+                  </IconButton>
+                ) : null}
+                <span style={styles.title}>{headerTitle}</span>
+              </div>
+              <div style={styles.headerActions}>
+                {selected ? (
+                  <>
                     <button
-                      style={{ ...styles.iconButton, ...styles.iconButtonOutlined }}
-                      onClick={() => setSelected(null)}
-                      aria-label="Back to event list"
+                      style={{
+                        ...styles.textButton,
+                        ...(wrapStack ? styles.textButtonActive : null),
+                      }}
+                      onClick={() => setWrapStack((prev) => !prev)}
+                      aria-pressed={wrapStack}
                     >
-                      <ArrowLeft size={14} />
+                      <WrapText size={12} />
+                      Wrap
                     </button>
-                  ) : (
-                    <span style={styles.headerLogo}>
-                      <ShiroLogo size={18} />
+                    <button style={styles.textButton} onClick={copyStack}>
+                      {copied ? <Check size={12} /> : <Copy size={12} />}
+                      {copied ? "Copied" : "Copy"}
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <IconButton
+                      onClick={() => setEvents([])}
+                      aria-label="Reset events"
+                      title="Reset events"
+                    >
+                      <RotateCcw size={14} />
+                    </IconButton>
+                    <SettingsMenu config={config} onChange={setConfig} />
+                  </>
+                )}
+                <IconButton onClick={closeDrawer} aria-label="Close OpenUI Inspect">
+                  <X size={15} />
+                </IconButton>
+              </div>
+            </div>
+
+            {selected ? (
+              <div style={styles.stackBody}>
+                {selectedStack.split("\n").map((line, index) => (
+                  <div key={index} style={styles.stackLine}>
+                    <span style={styles.lineNumber}>{index + 1}</span>
+                    <span
+                      style={{ ...styles.lineText, ...(wrapStack ? styles.lineTextWrap : null) }}
+                    >
+                      {line || " "}
                     </span>
-                  )}
-                  <span style={styles.title}>{headerTitle}</span>
-                </div>
-                <div style={styles.headerActions}>
-                  {selected ? (
-                    <>
-                      <button
-                        style={{
-                          ...styles.textButton,
-                          ...(wrapStack ? styles.textButtonActive : null),
-                        }}
-                        onClick={() => setWrapStack((prev) => !prev)}
-                        aria-pressed={wrapStack}
-                      >
-                        <WrapText size={12} />
-                        Wrap
-                      </button>
-                      <button style={styles.textButton} onClick={copyStack}>
-                        {copied ? <Check size={12} /> : <Copy size={12} />}
-                        {copied ? "Copied" : "Copy"}
-                      </button>
-                    </>
-                  ) : (
-                    <>
-                      <button
-                        style={styles.iconButton}
-                        onClick={() => setEvents([])}
-                        aria-label="Clear events"
-                        title="Clear events"
-                      >
-                        <Trash2 size={14} />
-                      </button>
-                      <SettingsMenu config={config} onChange={setConfig} />
-                    </>
-                  )}
-                  <button
-                    style={styles.iconButton}
-                    onClick={closeDrawer}
-                    aria-label="Close OpenUI devtools"
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <>
+                <div style={styles.bannerGroup}>
+                  <span style={styles.bannerFade} aria-hidden />
+                  <a
+                    style={styles.pasteBanner}
+                    href={RELIABILITY_DOCS_URL}
+                    target="_blank"
+                    rel="noreferrer"
+                    title="Learn how to track and fix errors in production"
+                    onMouseEnter={() => setBannerHovered(true)}
+                    onMouseLeave={() => setBannerHovered(false)}
                   >
-                    <X size={15} />
-                  </button>
+                    <span style={styles.pasteBannerText}>
+                      <span style={styles.pasteBannerTitle}>
+                        Want to track and fix errors in production?
+                      </span>
+                    </span>
+                    <span
+                      style={{
+                        ...styles.pasteBannerAction,
+                        ...(bannerHovered ? styles.pasteBannerActionHover : null),
+                      }}
+                    >
+                      Learn more
+                    </span>
+                  </a>
                 </div>
-              </div>
-
-              {selected ? (
-                <div style={styles.stackBody}>
-                  {selectedStack.split("\n").map((line, index) => (
-                    <div key={index} style={styles.stackLine}>
-                      <span style={styles.lineNumber}>{index + 1}</span>
-                      <span
-                        style={{ ...styles.lineText, ...(wrapStack ? styles.lineTextWrap : null) }}
-                      >
-                        {line || " "}
+                <div style={styles.list}>
+                  {visibleEvents.length === 0 ? (
+                    <div style={styles.empty}>
+                      <span style={styles.emptyIcon}>
+                        <Inbox size={20} />
                       </span>
+                      No events captured yet.
                     </div>
-                  ))}
-                </div>
-              ) : (
-                <>
-                  <div style={styles.list}>
-                    {visibleEvents.length === 0 ? (
-                      <div style={styles.empty}>No events captured yet.</div>
-                    ) : (
-                      visibleEvents.map((event, index) => {
-                        const key =
-                          typeof event.detail["id"] === "string"
-                            ? event.detail["id"]
-                            : `${event.timestamp}-${index}`;
-                        const quotaError = getQuotaError(event);
-                        if (quotaError) return <QuotaErrorRow key={key} info={quotaError} />;
-                        const stream = getReactLangStreamDetail(event);
-                        if (stream) {
-                          return (
-                            <ReactLangStreamEventRow
-                              key={key}
-                              event={event}
-                              stream={stream}
-                              canOpenInPaste={libraries.length > 0}
-                              onOpenInPaste={(response) => {
-                                setCode(response);
-                                openPaste();
-                              }}
-                            />
-                          );
-                        }
-
-                        const error = getErrorInfo(event);
-                        const detail = asRecord(event.detail);
-                        const kind = asString(detail["kind"]);
-                        const status =
-                          typeof detail["status"] === "number"
-                            ? String(detail["status"])
-                            : undefined;
-                        const message = error?.message ?? asString(detail["message"]);
+                  ) : (
+                    visibleEvents.map((event, index) => {
+                      const key =
+                        typeof event.detail["id"] === "string"
+                          ? event.detail["id"]
+                          : `${event.timestamp}-${index}`;
+                      const quotaError = getQuotaError(event);
+                      if (quotaError) return <QuotaErrorRow key={key} info={quotaError} />;
+                      const stream = getReactLangStreamDetail(event);
+                      if (stream) {
                         return (
-                          <div key={key} style={styles.row}>
-                            <div style={styles.rowHeader}>
-                              <div style={styles.badgeGroup}>
-                                <LevelIcon level={event.level} />
-                                {kind ? <span style={styles.kind}>{kind}</span> : null}
-                                {status ? (
-                                  <span style={{ ...styles.badge, ...styles.badgeNeutral }}>
-                                    {status}
-                                  </span>
-                                ) : null}
-                              </div>
-                              <div style={styles.rowHeaderRight}>
-                                <span style={styles.time}>
-                                  {new Date(event.timestamp).toLocaleTimeString()}
+                          <ReactLangStreamEventRow
+                            key={key}
+                            event={event}
+                            stream={stream}
+                            canOpenInPaste={libraries.length > 0}
+                            onOpenInPaste={(response) => {
+                              setCode(response);
+                              openPaste();
+                            }}
+                          />
+                        );
+                      }
+
+                      const error = getErrorInfo(event);
+                      const detail = asRecord(event.detail);
+                      const kind = asString(detail["kind"]);
+                      const status =
+                        typeof detail["status"] === "number" ? String(detail["status"]) : undefined;
+                      const message = error?.message ?? asString(detail["message"]);
+                      return (
+                        <div key={key} style={styles.row}>
+                          <div style={styles.rowHeader}>
+                            <div style={styles.badgeGroup}>
+                              <LevelIcon level={event.level} />
+                              {kind ? <span style={styles.kind}>{kind}</span> : null}
+                              {status ? (
+                                <span style={{ ...styles.badge, ...styles.badgeNeutral }}>
+                                  {status}
                                 </span>
-                                <span style={styles.chevronSlot} aria-hidden />
-                              </div>
+                              ) : null}
+                            </div>
+                            <div style={styles.rowHeaderRight}>
+                              <span style={styles.time}>
+                                {new Date(event.timestamp).toLocaleTimeString()}
+                              </span>
+                              <span style={styles.chevronSlot} aria-hidden />
                             </div>
-                            {message ? (
-                              <div style={styles.summary}>{message}</div>
-                            ) : kind ? null : (
-                              <div style={styles.summary}>{summarize(event)}</div>
-                            )}
-                            {error?.stack ? (
-                              <button style={styles.stackButton} onClick={() => showStack(event)}>
-                                Stack Trace
-                              </button>
-                            ) : null}
                           </div>
-                        );
-                      })
-                    )}
-                  </div>
-                  <button
-                    style={{
-                      ...styles.pasteBanner,
-                      ...(libraries.length === 0 ? styles.pasteBannerDisabled : null),
-                    }}
-                    disabled={libraries.length === 0}
-                    title={
-                      libraries.length === 0
-                        ? "No createLibrary() call detected"
-                        : popup && !popup.closed
-                          ? "Switch to OpenUI Paste window"
-                          : "Open OpenUI Paste"
-                    }
-                    aria-label="Open OpenUI Paste"
-                    onClick={openPaste}
-                  >
-                    <span style={styles.pasteBannerText}>
-                      <span style={styles.pasteBannerTitle}>OpenUI Paste</span>
-                      <span style={styles.pasteBannerHint}>
-                        Replay OpenUI Lang against your components
-                      </span>
-                    </span>
-                    <span style={styles.pasteBannerChevron}>
-                      <ChevronRight size={15} />
-                    </span>
-                  </button>
-                </>
-              )}
-            </>
-          )}
+                          {message ? (
+                            <div style={styles.summary}>{message}</div>
+                          ) : kind ? null : (
+                            <div style={styles.summary}>{summarize(event)}</div>
+                          )}
+                          {error?.stack ? (
+                            <button style={styles.stackButton} onClick={() => showStack(event)}>
+                              Stack Trace
+                            </button>
+                          ) : null}
+                        </div>
+                      );
+                    })
+                  )}
+                </div>
+              </>
+            )}
+            <span style={styles.trayFade} aria-hidden />
+          </>
+        </aside>
+
+        <aside
+          style={{
+            ...styles.drawer,
+            ...(pasteOpen ? styles.drawerOpen : null),
+            ...debugTray,
+          }}
+          role="dialog"
+          aria-modal={pasteOpen}
+          aria-label="OpenUI Debug"
+          inert={!pasteOpen}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div style={styles.pasteHost}>{paste}</div>
         </aside>
       </div>
       {popupRoot ? createPortal(paste, popupRoot) : null}
@@ -436,6 +503,36 @@ export function OpenUIDevtools({
   );
 }
 
+/**
+ * A real checkbox painted as a switch — the input stays in the tree (hidden but
+ * clickable and focusable) so keyboard, form semantics, and screen readers get
+ * the native control rather than a div pretending to be one.
+ */
+function SettingSwitch({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label style={styles.menuCheckbox}>
+      <span style={styles.menuLabel}>{label}</span>
+      <span style={{ ...styles.switchTrack, ...(checked ? styles.switchTrackOn : null) }}>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(event) => onChange(event.target.checked)}
+          style={styles.switchInput}
+        />
+        <span style={{ ...styles.switchKnob, ...(checked ? styles.switchKnobOn : null) }} />
+      </span>
+    </label>
+  );
+}
+
 /**
  * Header dropdown for the display filters and the widget theme, so the list is
  * all list. Escape is handled in the capture phase so closing the menu doesn't
@@ -471,8 +568,8 @@ function SettingsMenu({
 
   return (
     <div ref={wrap} style={styles.menuWrap}>
-      <button
-        style={{ ...styles.iconButton, ...(open ? styles.iconButtonActive : null) }}
+      <IconButton
+        active={open}
         onClick={() => setOpen((current) => !current)}
         aria-label="Devtools settings"
         aria-haspopup="true"
@@ -480,29 +577,26 @@ function SettingsMenu({
         title="Settings"
       >
         <Settings size={14} />
-      </button>
+      </IconButton>
       {open ? (
         <div style={styles.menu} role="group" aria-label="Devtools settings">
-          <label style={styles.menuCheckbox}>
-            <input
-              type="checkbox"
-              checked={config.autoOpen}
-              onChange={(event) => onChange({ autoOpen: event.target.checked })}
-            />
-            Auto-open on error
-          </label>
-          <label style={styles.menuCheckbox}>
-            <input
-              type="checkbox"
-              checked={config.onlyErrors}
-              onChange={(event) => onChange({ onlyErrors: event.target.checked })}
-            />
-            Errors only
-          </label>
+          {/* Every row reads the same way: name on the left, control on the
+              right, hairline between. */}
+          <SettingSwitch
+            label="Auto-open on error"
+            checked={config.autoOpen}
+            onChange={(autoOpen) => onChange({ autoOpen })}
+          />
+          <div style={styles.menuDivider} />
+          <SettingSwitch
+            label="Show errors only"
+            checked={config.onlyErrors}
+            onChange={(onlyErrors) => onChange({ onlyErrors })}
+          />
           <div style={styles.menuDivider} />
           <div style={styles.menuRow}>
-            <div style={styles.menuLabel}>Theme</div>
-            <ThemeToggle value={config.theme} onChange={(theme) => onChange({ theme })} />
+            <span style={styles.menuLabel}>Theme</span>
+            <ThemeSegmented value={config.theme} onChange={(theme) => onChange({ theme })} />
           </div>
         </div>
       ) : null}
@@ -510,51 +604,6 @@ function SettingsMenu({
   );
 }
 
-const THEME_OPTIONS: {
-  id: ColorScheme;
-  label: string;
-  icon: typeof Sun;
-}[] = [
-  { id: "light", label: "Light", icon: Sun },
-  { id: "dark", label: "Dark", icon: Moon },
-];
-
-function ThemeToggle({
-  value,
-  onChange,
-}: {
-  value: ColorScheme;
-  onChange: (value: ColorScheme) => void;
-}) {
-  return (
-    <div style={styles.themeToggle} role="radiogroup" aria-label="Theme">
-      {THEME_OPTIONS.map((option, index) => {
-        const active = value === option.id;
-        const Icon = option.icon;
-        return (
-          <button
-            key={option.id}
-            type="button"
-            role="radio"
-            aria-checked={active}
-            style={{
-              ...styles.themeOption,
-              ...(active ? styles.themeOptionActive : null),
-              ...(index === 0 ? styles.themeOptionFirst : null),
-              ...(index === THEME_OPTIONS.length - 1 ? styles.themeOptionLast : null),
-            }}
-            onClick={() => onChange(option.id)}
-            aria-label={option.label}
-            title={option.label}
-          >
-            <Icon size={14} />
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 function asRecord(detail: unknown): Record<string, unknown> {
   return typeof detail === "object" && detail !== null ? (detail as Record<string, unknown>) : {};
 }
@@ -633,17 +682,29 @@ const styles = {
     boxShadow: "var(--oui-dt-toggle-shadow)",
     fontFamily: FONT,
     padding: 0,
-    transition: "background 150ms ease, box-shadow 150ms ease",
+    transition: "background 150ms ease, box-shadow 150ms ease, transform 150ms ease",
   },
-  // Errors turn the whole button red and the count replaces the mark, rather
-  // than hiding the number in a corner badge.
+  toggleHover: {
+    transform: "scale(1.08)",
+  },
+  // Errors swap the mark for a count on a red disc, held inside a light puck so
+  // the number reads as a badge rather than flooding the whole button red.
   toggleError: {
-    background: "var(--oui-dt-toggle-error)",
-    borderColor: "var(--oui-dt-toggle-error)",
-    color: "#fff",
+    background: "var(--oui-dt-toggle-error-surface)",
+    borderColor: "var(--oui-dt-toggle-error-ring)",
   },
   toggleCount: {
-    fontSize: 15,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    minWidth: 24,
+    height: 24,
+    padding: "0 6px",
+    borderRadius: 999,
+    background: "var(--oui-dt-toggle-error)",
+    color: "#fff",
+    fontSize: 13,
     fontWeight: 700,
     lineHeight: 1,
   },
@@ -664,33 +725,31 @@ const styles = {
     pointerEvents: "auto",
     transition: "opacity 200ms ease, visibility 0s",
   },
+  // Geometry (right/width/transform) is per-tray and set inline; this is the
+  // shared chrome. Each tray hides itself when closed so the other can be open
+  // over the same scrim without a retracted tray staying focusable.
   drawer: {
     position: "fixed",
-    top: 12,
-    right: 12,
-    bottom: 12,
     boxSizing: "border-box",
-    width: "min(420px, calc(100vw - 24px))",
     display: "flex",
     flexDirection: "column",
-    border: "1px solid var(--oui-dt-border)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "var(--oui-dt-tray-ring)",
     borderRadius: 16,
     background: "var(--oui-dt-bg)",
     color: "var(--oui-dt-fg)",
     fontFamily: FONT,
     fontSize: 13,
-    boxShadow: "var(--oui-dt-shadow)",
-    transform: "translateX(calc(100% + 12px))",
+    visibility: "hidden",
     transition:
-      "transform 220ms cubic-bezier(0.32, 0.72, 0, 1), width 260ms cubic-bezier(0.32, 0.72, 0, 1)",
+      "transform 220ms cubic-bezier(0.32, 0.72, 0, 1), right 260ms cubic-bezier(0.32, 0.72, 0, 1), width 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 220ms",
     overflow: "hidden",
   },
   drawerOpen: {
-    transform: "translateX(0)",
-  },
-  // Paste isn't a separate dialog: the same drawer grows into it.
-  drawerWide: {
-    width: "min(1180px, calc(100vw - 24px))",
+    visibility: "visible",
+    transition:
+      "transform 220ms cubic-bezier(0.32, 0.72, 0, 1), right 260ms cubic-bezier(0.32, 0.72, 0, 1), width 260ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s",
   },
   pasteHost: {
     flex: 1,
@@ -711,11 +770,6 @@ const styles = {
     gap: 6,
     minWidth: 0,
   },
-  headerLogo: {
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0,
-  },
   title: {
     overflow: "hidden",
     textOverflow: "ellipsis",
@@ -731,10 +785,10 @@ const styles = {
     display: "inline-flex",
     alignItems: "center",
     gap: 4,
-    border: "1px solid var(--oui-dt-border)",
+    border: "1px solid var(--oui-dt-control-border)",
     borderRadius: 8,
-    background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-tertiary)",
+    background: "var(--oui-dt-control-bg)",
+    color: "var(--oui-dt-fg)",
     cursor: "pointer",
     fontFamily: FONT,
     fontSize: 12,
@@ -746,28 +800,6 @@ const styles = {
     borderColor: "var(--oui-dt-inverted)",
     color: "var(--oui-dt-inverted-fg)",
   },
-  iconButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 26,
-    height: 26,
-    border: "none",
-    borderRadius: 8,
-    background: "transparent",
-    color: "var(--oui-dt-fg-muted)",
-    cursor: "pointer",
-    padding: 0,
-  },
-  iconButtonActive: {
-    background: "var(--oui-dt-bg-subtle)",
-    color: "var(--oui-dt-fg)",
-  },
-  iconButtonOutlined: {
-    boxSizing: "border-box",
-    border: "1px solid var(--oui-dt-border)",
-    background: "var(--oui-dt-bg)",
-  },
   menuWrap: {
     position: "relative",
     display: "inline-flex",
@@ -776,7 +808,8 @@ const styles = {
     position: "absolute",
     top: "calc(100% + 6px)",
     right: 0,
-    zIndex: 1,
+    // Above the banner group, which lifts itself over the list for its fade.
+    zIndex: 2,
     boxSizing: "border-box",
     width: 236,
     display: "flex",
@@ -789,14 +822,54 @@ const styles = {
     padding: 12,
     fontWeight: 400,
   },
+  // Every row is the height of the tallest control (the theme toggle), so the
+  // dividers land on an even rhythm no matter what each row holds.
   menuCheckbox: {
     display: "flex",
     alignItems: "center",
-    gap: 8,
-    color: "var(--oui-dt-fg-secondary)",
-    fontSize: 12,
+    justifyContent: "space-between",
+    gap: 12,
+    minHeight: MENU_ROW_HEIGHT,
+    cursor: "pointer",
+  },
+  switchTrack: {
+    position: "relative",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    width: 30,
+    height: 18,
+    borderRadius: 999,
+    background: "var(--oui-dt-border)",
+    transition: "background 150ms ease",
+  },
+  switchTrackOn: {
+    background: "var(--oui-dt-inverted)",
+  },
+  // Covers the whole track so the hit area and focus ring stay on the input.
+  switchInput: {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    margin: 0,
+    borderRadius: 999,
+    opacity: 0,
     cursor: "pointer",
-    accentColor: "var(--oui-dt-fg)",
+  },
+  switchKnob: {
+    position: "absolute",
+    top: 2,
+    left: 2,
+    width: 14,
+    height: 14,
+    borderRadius: "50%",
+    background: "var(--oui-dt-bg)",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
+    transition: "transform 150ms ease",
+    pointerEvents: "none",
+  },
+  switchKnobOn: {
+    transform: "translateX(12px)",
   },
   menuDivider: {
     height: 1,
@@ -807,69 +880,71 @@ const styles = {
     alignItems: "center",
     justifyContent: "space-between",
     gap: 12,
+    minHeight: MENU_ROW_HEIGHT,
   },
   menuLabel: {
     fontSize: 12,
-    fontWeight: 600,
+    fontWeight: 500,
     color: "var(--oui-dt-fg)",
   },
-  themeToggle: {
-    display: "inline-flex",
-    alignItems: "stretch",
+  // One border on the track, none on the segments — collapsing per-segment
+  // borders with a negative margin made whichever one was active paint a pixel
+  // wider than its neighbour.
+  // Whole card is the button; the chevron only signals where it leads.
+  // Inset from the drawer edges, matching the list's own 12px gutter. The top
+  // margin keeps a clear gap even when the list scrolls right up to the banners.
+  // Padding, not margin, so the tray background travels with the banner and
+  // rows scrolling underneath are hidden rather than peeking through the gap.
+  bannerGroup: {
+    position: "relative",
+    zIndex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
     flexShrink: 0,
-  },
-  themeOption: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxSizing: "border-box",
-    width: 34,
-    height: 28,
-    border: "1px solid var(--oui-dt-border)",
     background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-tertiary)",
-    cursor: "pointer",
-    padding: 0,
-    marginLeft: -1,
-  },
-  themeOptionFirst: {
-    marginLeft: 0,
-    borderTopLeftRadius: 8,
-    borderBottomLeftRadius: 8,
+    padding: "12px 12px 18px",
   },
-  themeOptionLast: {
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
+  // Mirrors bannerFade at the tray's bottom edge, so rows dissolve into the
+  // drawer instead of meeting the border mid-row. Pinned to the tray rather
+  // than the list, so it covers the stack-trace view too.
+  trayFade: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 28,
+    background: "linear-gradient(to top, var(--oui-dt-bg), transparent)",
+    pointerEvents: "none",
   },
-  themeOptionActive: {
-    background: "var(--oui-dt-inverted)",
-    borderColor: "var(--oui-dt-inverted)",
-    color: "var(--oui-dt-inverted-fg)",
-    zIndex: 1,
+  // Hangs below the banner, spanning the tray's full width, so list rows
+  // dissolve as they scroll up under it rather than being clipped mid-row.
+  // Sized to the list's own top padding so it dissolves the gap without
+  // washing over the first card.
+  bannerFade: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: "100%",
+    height: 12,
+    background: "linear-gradient(to bottom, var(--oui-dt-bg), transparent)",
+    pointerEvents: "none",
   },
-  // Whole card is the button; the chevron only signals where it leads.
   pasteBanner: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: 12,
     flexShrink: 0,
-    // Inset from the drawer edges, matching the list's own 12px gutter. The top
-    // margin keeps a clear gap even when the list scrolls right up to the banner.
-    margin: 12,
-    border: "1px solid var(--oui-dt-border)",
+    textDecoration: "none",
     borderRadius: 12,
-    background: "var(--oui-dt-bg-muted)",
+    background: "var(--oui-dt-promo-bg)",
     color: "var(--oui-dt-fg)",
     cursor: "pointer",
     fontFamily: FONT,
     textAlign: "left",
     padding: "12px 14px",
   },
-  pasteBannerDisabled: {
-    opacity: 0.5,
-    cursor: "not-allowed",
-  },
   pasteBannerText: {
     display: "flex",
     flexDirection: "column",
@@ -878,26 +953,26 @@ const styles = {
   },
   pasteBannerTitle: {
     fontSize: 12,
-    fontWeight: 600,
-  },
-  pasteBannerHint: {
-    color: "var(--oui-dt-fg-muted)",
-    fontSize: 11,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
+    fontWeight: 500,
   },
-  pasteBannerChevron: {
+  // The whole banner is the hit target; this just reads as the button on it, so
+  // it stays a span rather than nesting a control inside a control.
+  pasteBannerAction: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    width: 26,
-    height: 26,
-    border: "1px solid var(--oui-dt-border)",
+    border: "1px solid var(--oui-dt-control-border)",
     borderRadius: 8,
-    background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-muted)",
+    background: "var(--oui-dt-control-bg)",
+    color: "var(--oui-dt-fg)",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
+    fontSize: 11,
+    padding: "5px 12px",
+    transition: "transform 150ms ease",
+  },
+  pasteBannerActionHover: {
+    transform: "scale(0.96)",
   },
   list: {
     flex: 1,
@@ -908,11 +983,24 @@ const styles = {
     flexDirection: "column",
     gap: 10,
   },
+  // Fills the list so the message sits in the middle of the tray, not pinned
+  // under the header.
   empty: {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
     color: "var(--oui-dt-fg-faint)",
-    padding: "32px 0",
     textAlign: "center",
   },
+  emptyIcon: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
   row: {
     border: "1px solid var(--oui-dt-border)",
     borderRadius: 12,
@@ -920,7 +1008,7 @@ const styles = {
     display: "flex",
     flexDirection: "column",
     gap: 6,
-    background: "var(--oui-dt-bg)",
+    background: "var(--oui-dt-card)",
   },
   badgeCredits: {
     background: "var(--oui-dt-credits-bg)",
@@ -955,7 +1043,7 @@ const styles = {
   kind: {
     color: "var(--oui-dt-fg)",
     fontSize: 12,
-    fontWeight: 700,
+    fontWeight: 600,
     wordBreak: "break-word",
   },
   badgeNeutral: {
diff --git a/packages/devtools/src/QuotaErrorRow.tsx b/packages/devtools/src/QuotaErrorRow.tsx
index 8a74cf55d..78343e072 100644
--- a/packages/devtools/src/QuotaErrorRow.tsx
+++ b/packages/devtools/src/QuotaErrorRow.tsx
@@ -1,6 +1,7 @@
 import { type ObservabilityEvent } from "@openuidev/observability";
 import { CreditCard, KeyRound } from "lucide-react";
-import type { CSSProperties } from "react";
+import { useState, type CSSProperties } from "react";
+import { LevelIcon } from "./LevelIcon";
 
 export interface QuotaErrorInfo {
   title: string;
@@ -35,40 +36,56 @@ export function getQuotaError(event: ObservabilityEvent): QuotaErrorInfo | undef
 
 /** Billing/rate-limit list entry — the highlighted card a known 429 code renders as. */
 export function QuotaErrorRow({ info }: { info: QuotaErrorInfo }) {
+  const [hoveredCta, setHoveredCta] = useState<string | null>(null);
+
   return (
-    <div style={{ ...styles.row, ...styles.rowCredits }}>
+    <div style={styles.row}>
       <div style={styles.creditsNote}>
-        <div style={styles.creditsTitle}>{info.title}</div>
+        <div style={styles.creditsHeader}>
+          <LevelIcon level="warning" />
+          <div style={styles.creditsTitle}>{info.title}</div>
+        </div>
         <p style={styles.creditsMessage}>{info.message}</p>
-        {info.showPurchaseCta || info.showByokCta ? (
-          <div style={styles.actions}>
-            {info.showPurchaseCta ? (
-              <button
-                type="button"
-                style={styles.action}
-                onClick={() =>
-                  window.open("https://console.thesys.dev/billing", "_blank", "noopener,noreferrer")
-                }
-              >
-                <CreditCard size={13} />
-                Purchase Credits
-              </button>
-            ) : null}
-            {info.showByokCta ? (
-              <button
-                type="button"
-                style={{ ...styles.action, ...styles.actionSecondary }}
-                onClick={() =>
-                  window.open("https://console.thesys.dev/byok", "_blank", "noopener,noreferrer")
-                }
-              >
-                <KeyRound size={13} />
-                Add your own key
-              </button>
-            ) : null}
-          </div>
-        ) : null}
       </div>
+      {info.showPurchaseCta || info.showByokCta ? (
+        <div style={styles.actions}>
+          {info.showPurchaseCta ? (
+            <button
+              type="button"
+              style={{
+                ...styles.action,
+                ...(hoveredCta === "purchase" ? styles.actionHover : null),
+              }}
+              onMouseEnter={() => setHoveredCta("purchase")}
+              onMouseLeave={() => setHoveredCta(null)}
+              onClick={() =>
+                window.open("https://console.thesys.dev/billing", "_blank", "noopener,noreferrer")
+              }
+            >
+              <CreditCard size={13} />
+              Purchase Credits
+            </button>
+          ) : null}
+          {info.showByokCta ? (
+            <button
+              type="button"
+              style={{
+                ...styles.action,
+                ...styles.actionSecondary,
+                ...(hoveredCta === "byok" ? styles.actionHover : null),
+              }}
+              onMouseEnter={() => setHoveredCta("byok")}
+              onMouseLeave={() => setHoveredCta(null)}
+              onClick={() =>
+                window.open("https://console.thesys.dev/byok", "_blank", "noopener,noreferrer")
+              }
+            >
+              <KeyRound size={13} />
+              Add your own key
+            </button>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -91,19 +108,25 @@ const styles = {
     display: "flex",
     flexDirection: "column",
     gap: 6,
-    background: "var(--oui-dt-bg)",
-  },
-  rowCredits: {
-    border: "1px solid var(--oui-dt-credits-border)",
-    background: "var(--oui-dt-credits-gradient)",
+    background: "var(--oui-dt-card)",
   },
+  // The card matches every other row; the chip and title colour carry the
+  // billing/rate-limit signal.
   creditsNote: {
     display: "flex",
     flexDirection: "column",
+    gap: 12,
+  },
+  creditsHeader: {
+    display: "flex",
+    alignItems: "center",
     gap: 6,
+    minWidth: 0,
   },
+  // Identical to the `kind` title on every other row; the chip alone carries
+  // the billing/rate-limit signal.
   creditsTitle: {
-    fontSize: 13,
+    fontSize: 12,
     fontWeight: 600,
     color: "var(--oui-dt-fg)",
   },
@@ -116,7 +139,7 @@ const styles = {
   actions: {
     display: "flex",
     gap: 8,
-    marginTop: 2,
+    marginTop: 10,
   },
   action: {
     display: "inline-flex",
@@ -131,10 +154,15 @@ const styles = {
     fontSize: 12,
     fontWeight: 500,
     cursor: "pointer",
+    transition: "transform 150ms ease",
+  },
+  actionHover: {
+    transform: "scale(0.96)",
   },
   actionSecondary: {
-    background: "var(--oui-dt-bg)",
+    background: "var(--oui-dt-control-bg)",
     color: "var(--oui-dt-fg)",
-    border: "1px solid var(--oui-dt-border)",
+    border: "1px solid var(--oui-dt-control-border)",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
   },
 } satisfies Record<string, CSSProperties>;
diff --git a/packages/devtools/src/ReactLangStreamEventRow.tsx b/packages/devtools/src/ReactLangStreamEventRow.tsx
index 9eca44ff2..2715b21b2 100644
--- a/packages/devtools/src/ReactLangStreamEventRow.tsx
+++ b/packages/devtools/src/ReactLangStreamEventRow.tsx
@@ -1,6 +1,6 @@
 import { type ObservabilityEvent } from "@openuidev/observability";
 import { Bug, Check, ChevronDown, ChevronRight, Copy } from "lucide-react";
-import { useMemo, useState, type CSSProperties } from "react";
+import { useMemo, useState, type CSSProperties, type ReactNode } from "react";
 import { LevelIcon } from "./LevelIcon";
 import { TOKEN_COLOR, tokenizeLang } from "./paste/highlight";
 
@@ -60,6 +60,8 @@ export function ReactLangStreamEventRow({
   canOpenInPaste?: boolean;
 }) {
   const [expanded, setExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [hoveredAction, setHoveredAction] = useState<string | null>(null);
   const [responseCopied, setResponseCopied] = useState(false);
   // Collapsed rows skip tokenizing: a live stream re-renders this on every chunk.
   const responseTokens = useMemo(
@@ -92,7 +94,11 @@ export function ReactLangStreamEventRow({
   const openInPasteDisabled = isStreaming || !stream.response || !canOpenInPaste;
 
   return (
-    <div style={styles.row}>
+    <div
+      style={{ ...styles.row, ...(hovered ? styles.rowHover : null) }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <button
         type="button"
         style={styles.streamToggle}
@@ -110,35 +116,82 @@ export function ReactLangStreamEventRow({
           </div>
           <div style={styles.rowHeaderRight}>
             <span style={styles.time}>{new Date(event.timestamp).toLocaleTimeString()}</span>
-            <span style={styles.chevron}>
+            <span style={{ ...styles.chevron, ...(hovered ? styles.chevronHover : null) }}>
               {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
             </span>
           </div>
         </div>
         <div style={styles.streamOverview}>
+          {visibleErrors.length > 0 ? (
+            <Tally count={visibleErrors.length} danger>
+              error{visibleErrors.length === 1 ? "" : "s"}
+            </Tally>
+          ) : null}
           {statementCount !== undefined ? (
-            <span>
-              {statementCount} statement{statementCount === 1 ? "" : "s"}
-            </span>
+            <Tally count={statementCount}>statement{statementCount === 1 ? "" : "s"}</Tally>
           ) : null}
           {orphaned.length > 0 ? (
-            <span>
-              {orphaned.length} orphaned statement{orphaned.length === 1 ? "" : "s"}
-            </span>
-          ) : null}
-          {visibleErrors.length > 0 ? (
-            <span style={styles.errorSummary}>
-              {visibleErrors.length} error{visibleErrors.length === 1 ? "" : "s"}
-            </span>
+            <Tally count={orphaned.length}>
+              orphaned statement{orphaned.length === 1 ? "" : "s"}
+            </Tally>
           ) : null}
         </div>
       </button>
 
       {expanded ? (
         <div style={styles.streamExpanded}>
+          <section style={styles.responseActions}>
+            <span style={styles.responseActionsLabel}>Actions</span>
+            <div style={styles.responseActionsButtons}>
+              <button
+                type="button"
+                style={{
+                  ...styles.responseButton,
+                  ...(openInPasteDisabled ? styles.responseButtonDisabled : null),
+                  ...(hoveredAction === "debug" ? styles.responseButtonHover : null),
+                }}
+                onMouseEnter={() => setHoveredAction("debug")}
+                onMouseLeave={() => setHoveredAction(null)}
+                onClick={() => {
+                  if (isStreaming || !stream.response || !onOpenInPaste) return;
+                  onOpenInPaste(stream.response);
+                }}
+                disabled={openInPasteDisabled}
+                title={
+                  isStreaming
+                    ? "Wait until the stream finishes"
+                    : !stream.response
+                      ? "Empty response"
+                      : !canOpenInPaste
+                        ? "No createLibrary() call detected"
+                        : "Open this response in OpenUI Debug"
+                }
+                aria-label="Debug"
+              >
+                <Bug size={12} />
+                Debug
+              </button>
+              <button
+                type="button"
+                style={{
+                  ...styles.responseButton,
+                  ...(hoveredAction === "copy" ? styles.responseButtonHover : null),
+                }}
+                onMouseEnter={() => setHoveredAction("copy")}
+                onMouseLeave={() => setHoveredAction(null)}
+                onClick={copyResponse}
+              >
+                {responseCopied ? <Check size={12} /> : <Copy size={12} />}
+                {responseCopied ? "Copied" : "Copy"}
+              </button>
+            </div>
+          </section>
+
           {visibleErrors.length > 0 ? (
             <section style={styles.streamSection}>
-              <div style={styles.streamSectionTitle}>Errors ({visibleErrors.length})</div>
+              <div style={styles.streamSectionTitle}>
+                Errors <span style={styles.streamSectionCount}>{visibleErrors.length}</span>
+              </div>
               <div style={styles.diagnosticList}>
                 {visibleErrors.map((error, index) => (
                   <Diagnostic
@@ -167,37 +220,6 @@ export function ReactLangStreamEventRow({
                   ))
                 : "(empty response)"}
             </pre>
-            <div style={styles.responseActions}>
-              <button
-                type="button"
-                style={{
-                  ...styles.responseButton,
-                  ...(openInPasteDisabled ? styles.responseButtonDisabled : null),
-                }}
-                onClick={() => {
-                  if (isStreaming || !stream.response || !onOpenInPaste) return;
-                  onOpenInPaste(stream.response);
-                }}
-                disabled={openInPasteDisabled}
-                title={
-                  isStreaming
-                    ? "Wait until the stream finishes"
-                    : !stream.response
-                      ? "Empty response"
-                      : !canOpenInPaste
-                        ? "No createLibrary() call detected"
-                        : "Debug this response in OpenUI Paste"
-                }
-                aria-label="Debug"
-              >
-                <Bug size={12} />
-                Debug
-              </button>
-              <button type="button" style={styles.responseButton} onClick={copyResponse}>
-                {responseCopied ? <Check size={12} /> : <Copy size={12} />}
-                {responseCopied ? "Copied" : "Copy"}
-              </button>
-            </div>
           </section>
         </div>
       ) : null}
@@ -205,6 +227,29 @@ export function ReactLangStreamEventRow({
   );
 }
 
+/**
+ * One overview stat: the number in a circle, then what it counts. Errors get
+ * the danger tint so severity still reads at a glance.
+ */
+function Tally({
+  count,
+  danger = false,
+  children,
+}: {
+  count: number;
+  danger?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <span style={styles.tally}>
+      <span style={{ ...styles.tallyCount, ...(danger ? styles.tallyCountDanger : null) }}>
+        {count}
+      </span>
+      {children}
+    </span>
+  );
+}
+
 function Diagnostic({ error }: { error: Record<string, unknown> }) {
   const source = asString(error["source"]);
   const code = asString(error["code"]);
@@ -242,14 +287,24 @@ const FONT = '"Inter", system-ui, sans-serif';
 const MONO = "ui-monospace, SFMono-Regular, Menlo, monospace";
 
 const styles = {
+  // Longhands, not the `border` shorthand: rowHover overrides borderColor, and
+  // React blanks a shorthand's longhands when a later style touches one of them.
   row: {
-    border: "1px solid var(--oui-dt-border)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "var(--oui-dt-border)",
     borderRadius: 12,
     padding: 12,
     display: "flex",
     flexDirection: "column",
     gap: 6,
-    background: "var(--oui-dt-bg)",
+    background: "var(--oui-dt-card)",
+    transition: "border-color 150ms ease, box-shadow 150ms ease",
+  },
+  // Only this row expands, so hover is the affordance that says so.
+  rowHover: {
+    borderColor: "var(--oui-dt-border-strong)",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
   },
   rowHeader: {
     display: "flex",
@@ -264,11 +319,23 @@ const styles = {
     flexShrink: 0,
   },
   // Width is fixed to match the empty slot plain rows reserve, so timestamps align.
+  // Sized like an icon button so it can take the same fill; the card's own
+  // hover drives it, since the whole card is the toggle.
   chevron: {
     display: "inline-flex",
-    width: 14,
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    width: 22,
+    height: 22,
     flexShrink: 0,
+    borderRadius: 6,
     color: "var(--oui-dt-fg-muted)",
+    transition: "background 150ms ease, color 150ms ease",
+  },
+  chevronHover: {
+    background: "var(--oui-dt-bg-subtle)",
+    color: "var(--oui-dt-fg)",
   },
   badgeGroup: {
     display: "flex",
@@ -292,7 +359,7 @@ const styles = {
   kind: {
     color: "var(--oui-dt-fg)",
     fontSize: 12,
-    fontWeight: 700,
+    fontWeight: 600,
   },
   badgeStreaming: {
     background: "var(--oui-dt-success-bg)",
@@ -322,15 +389,33 @@ const styles = {
     marginTop: 7,
     paddingLeft: 24,
   },
-  errorSummary: {
+  tally: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+  },
+  tallyCount: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    minWidth: 14,
+    height: 14,
+    padding: "0 3px",
+    borderRadius: 999,
+    background: "var(--oui-dt-bg-subtle)",
+    color: "var(--oui-dt-fg-secondary)",
+    fontSize: 10,
+    lineHeight: 1,
+  },
+  tallyCountDanger: {
+    background: "var(--oui-dt-danger-bg)",
     color: "var(--oui-dt-danger)",
-    fontWeight: 600,
   },
   streamExpanded: {
     display: "flex",
     flexDirection: "column",
     gap: 14,
-    borderTop: "1px solid var(--oui-dt-border-subtle)",
     marginTop: 4,
     paddingTop: 12,
   },
@@ -340,31 +425,62 @@ const styles = {
     gap: 6,
   },
   streamSectionTitle: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
     color: "var(--oui-dt-fg-secondary)",
     fontSize: 11,
-    fontWeight: 600,
-    textTransform: "uppercase",
-    letterSpacing: "0.04em",
   },
+  streamSectionCount: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 16,
+    height: 16,
+    borderRadius: 999,
+    padding: "0 5px",
+    boxSizing: "border-box",
+    background: "var(--oui-dt-bg-subtle)",
+    color: "var(--oui-dt-fg-muted)",
+    fontSize: 10,
+    lineHeight: 1,
+  },
+  // Label and buttons share one unstroked panel: label left, buttons right.
   responseActions: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 10,
+    borderRadius: 8,
+    background: "var(--oui-dt-bg-muted)",
+    padding: "8px 8px 8px 14px",
+  },
+  responseActionsLabel: {
+    color: "var(--oui-dt-fg-secondary)",
+    fontSize: 11,
+  },
+  responseActionsButtons: {
     display: "flex",
     alignItems: "center",
     gap: 6,
-    marginTop: 2,
   },
   responseButton: {
     display: "inline-flex",
     alignItems: "center",
     gap: 4,
-    border: "1px solid var(--oui-dt-border)",
+    border: "1px solid var(--oui-dt-control-border)",
     borderRadius: 8,
-    background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-secondary)",
+    background: "var(--oui-dt-control-bg)",
+    color: "var(--oui-dt-fg)",
     cursor: "pointer",
     fontFamily: FONT,
     fontSize: 11,
-    fontWeight: 500,
     padding: "4px 9px",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
+    transition: "transform 150ms ease",
+  },
+  responseButtonHover: {
+    transform: "scale(0.96)",
   },
   responseButtonDisabled: {
     opacity: 0.45,
@@ -374,7 +490,6 @@ const styles = {
     maxHeight: 260,
     overflow: "auto",
     margin: 0,
-    border: "1px solid var(--oui-dt-border)",
     borderRadius: 8,
     background: "var(--oui-dt-bg-muted)",
     color: "var(--oui-dt-fg-tertiary)",
diff --git a/packages/devtools/src/ThemeToggle.tsx b/packages/devtools/src/ThemeToggle.tsx
new file mode 100644
index 000000000..3e74198ad
--- /dev/null
+++ b/packages/devtools/src/ThemeToggle.tsx
@@ -0,0 +1,82 @@
+import { Moon, Sun } from "lucide-react";
+import type { CSSProperties } from "react";
+import { IconButton } from "./IconButton";
+import type { ColorScheme } from "./theme";
+
+const OPTIONS: { id: ColorScheme; label: string; icon: typeof Sun }[] = [
+  { id: "light", label: "Light", icon: Sun },
+  { id: "dark", label: "Dark", icon: Moon },
+];
+
+/**
+ * Two icon buttons for the Inspect settings menu, where the row has a label
+ * and room to show both choices. The selected one is filled; the other is
+ * chrome-less until pointed at.
+ */
+export function ThemeSegmented({
+  value,
+  onChange,
+}: {
+  value: ColorScheme;
+  onChange: (value: ColorScheme) => void;
+}) {
+  return (
+    <div style={styles.segmented} role="radiogroup" aria-label="Theme">
+      {OPTIONS.map((option) => {
+        const active = value === option.id;
+        const Icon = option.icon;
+        return (
+          <IconButton
+            key={option.id}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            style={active ? styles.selected : undefined}
+            onClick={() => onChange(option.id)}
+            aria-label={option.label}
+            title={option.label}
+          >
+            <Icon size={14} />
+          </IconButton>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Single-button flip for the Debug header, which is a row of icon buttons with
+ * no room for a labelled pair. It shows the theme you would get, not the one
+ * you are in — the icon is the outcome of pressing it.
+ */
+export function ThemeToggle({
+  value,
+  onChange,
+}: {
+  value: ColorScheme;
+  onChange: (value: ColorScheme) => void;
+}) {
+  const next: ColorScheme = value === "dark" ? "light" : "dark";
+  const label = next === "dark" ? "Switch to dark theme" : "Switch to light theme";
+  const Icon = next === "dark" ? Moon : Sun;
+
+  return (
+    <IconButton onClick={() => onChange(next)} aria-label={label} title={label}>
+      <Icon size={14} />
+    </IconButton>
+  );
+}
+
+const styles = {
+  segmented: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 2,
+    flexShrink: 0,
+  },
+  selected: {
+    background: "var(--oui-dt-inverted)",
+    color: "var(--oui-dt-inverted-fg)",
+    borderColor: "var(--oui-dt-inverted)",
+  },
+} satisfies Record<string, CSSProperties>;
diff --git a/packages/devtools/src/paste/HelpDialog.tsx b/packages/devtools/src/paste/HelpDialog.tsx
index ac9371575..f6dbc6d38 100644
--- a/packages/devtools/src/paste/HelpDialog.tsx
+++ b/packages/devtools/src/paste/HelpDialog.tsx
@@ -1,25 +1,25 @@
-import { ArrowDown, ClipboardPaste, ListChecks, MonitorPlay, Play, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useEffect, useState, type CSSProperties } from "react";
+import { IconButton } from "../IconButton";
 import { pasteStyles as s } from "./styles";
 
-const STEPS: { icon: typeof Play; title: string; text: string }[] = [
+const SUMMARY =
+  "OpenUI Debug is a scratchpad for OpenUI Lang: paste a model response and see how it parses, validates, and renders against this app's own components.";
+
+const STEPS: { title: string; text: string }[] = [
   {
-    icon: ClipboardPaste,
     title: "Paste OpenUI Lang",
     text: "Drop in a model response, or write Lang by hand, in the editor on the left.",
   },
   {
-    icon: MonitorPlay,
     title: "Watch it render",
     text: "Render uses the host app's real createLibrary() components and CSS. Query() and Mutation() resolve with mocked data.",
   },
   {
-    icon: ListChecks,
     title: "Read the diagnostics",
     text: "Validation groups parse errors by code and lists unresolved refs; Tree and JSON show the parsed result.",
   },
   {
-    icon: Play,
     title: "Replay it as a stream",
     text: "Stream re-emits the editor chunk by chunk with LLM-like jitter. Pause, step, or fix the Seed to reproduce a run.",
   },
@@ -60,7 +60,7 @@ export function HelpDialog({
         style={styles.trigger}
         onClick={() => setOpen(true)}
         aria-haspopup="dialog"
-        aria-label="How to use OpenUI Paste"
+        aria-label="How to use OpenUI Debug"
       >
         Help
       </button>
@@ -70,37 +70,35 @@ export function HelpDialog({
             style={s.helpDialog}
             role="dialog"
             aria-modal="true"
-            aria-label="How to use OpenUI Paste"
+            aria-label="How to use OpenUI Debug"
             onClick={(event) => event.stopPropagation()}
           >
             <div style={s.helpHeader}>
-              <span>How to use OpenUI Paste</span>
-              <button style={styles.closeButton} onClick={close} aria-label="Close help">
-                <X size={14} />
-              </button>
+              <span>How to use OpenUI Debug</span>
+              <IconButton onClick={close} aria-label="Close help">
+                <X size={15} />
+              </IconButton>
             </div>
             <div style={s.helpBody}>
-              {STEPS.map((step, index) => {
-                const Icon = step.icon;
-                return (
-                  <div key={step.title}>
-                    <div style={styles.step}>
-                      <span style={styles.tile}>
-                        <Icon size={17} />
-                      </span>
-                      <div>
-                        <div style={styles.stepTitle}>{step.title}</div>
-                        <p style={styles.stepText}>{step.text}</p>
-                      </div>
+              <p style={styles.summary}>{SUMMARY}</p>
+              <ol style={styles.steps}>
+                {STEPS.map((step, index) => (
+                  <li key={step.title} style={styles.step}>
+                    <span style={styles.badge} aria-hidden>
+                      {index + 1}
+                    </span>
+                    <div style={styles.stepBody}>
+                      <div style={styles.stepTitle}>{step.title}</div>
+                      <p style={styles.stepText}>{step.text}</p>
                     </div>
-                    {index < STEPS.length - 1 ? (
-                      <div style={styles.arrow} aria-hidden>
-                        <ArrowDown size={14} />
-                      </div>
-                    ) : null}
-                  </div>
-                );
-              })}
+                  </li>
+                ))}
+              </ol>
+            </div>
+            <div style={styles.footer}>
+              <button style={styles.dismiss} onClick={close}>
+                Close
+              </button>
             </div>
           </div>
         </div>
@@ -109,73 +107,96 @@ export function HelpDialog({
   );
 }
 
-const TILE = 38;
+const BADGE = 18;
 
 const styles = {
+  // Matches the Inspect header's text buttons (Wrap / Copy).
   trigger: {
     display: "inline-flex",
     alignItems: "center",
-    height: 26,
-    border: "1px solid var(--oui-dt-border)",
+    gap: 4,
+    border: "1px solid var(--oui-dt-control-border)",
     borderRadius: 8,
-    background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-tertiary)",
+    background: "var(--oui-dt-control-bg)",
+    color: "var(--oui-dt-fg)",
     cursor: "pointer",
     fontFamily: "inherit",
     fontSize: 12,
     fontWeight: 500,
-    padding: "0 10px",
+    padding: "4px 10px",
   },
-  closeButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 26,
-    height: 26,
-    border: "1px solid var(--oui-dt-border)",
-    borderRadius: 8,
-    background: "var(--oui-dt-bg)",
-    color: "var(--oui-dt-fg-muted)",
-    cursor: "pointer",
+  // What the tool is, before the how.
+  summary: {
+    margin: "0 0 16px",
+    maxWidth: "62ch",
+    fontSize: 12,
+    fontWeight: 400,
+    lineHeight: 1.55,
+    color: "var(--oui-dt-fg-secondary)",
+  },
+  steps: {
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: 20,
+    margin: 0,
     padding: 0,
   },
   step: {
     display: "flex",
     alignItems: "flex-start",
-    gap: 12,
+    gap: 10,
   },
-  tile: {
+  // Same chip proportions as LevelIcon, so the dialog matches the event rows.
+  badge: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
     boxSizing: "border-box",
-    width: TILE,
-    height: TILE,
-    border: "1px solid var(--oui-dt-border)",
-    borderRadius: 10,
+    width: BADGE,
+    height: BADGE,
+    borderRadius: 6,
     background: "var(--oui-dt-bg-subtle)",
     color: "var(--oui-dt-fg-secondary)",
+    fontSize: 11,
+    fontWeight: 500,
+    lineHeight: 1,
+  },
+  stepBody: {
+    minWidth: 0,
   },
+  // Medium title over regular body.
   stepTitle: {
     color: "var(--oui-dt-fg)",
-    fontSize: 13,
-    fontWeight: 700,
-    // Optically centers the title against the tile's first line.
-    paddingTop: 2,
+    fontSize: 12,
+    fontWeight: 500,
   },
   stepText: {
-    margin: "2px 0 0",
+    margin: "3px 0 0",
+    maxWidth: "52ch",
     fontSize: 12,
-    lineHeight: 1.5,
+    fontWeight: 400,
+    lineHeight: 1.55,
     color: "var(--oui-dt-fg-muted)",
   },
-  // Sits under the tile column so the tiles read as one flow.
-  arrow: {
+  // Second way out, for anyone who reads to the end rather than reaching for
+  // the cross.
+  footer: {
     display: "flex",
-    justifyContent: "center",
-    width: TILE,
-    padding: "6px 0",
-    color: "var(--oui-dt-fg-faint)",
+    justifyContent: "flex-end",
+    padding: "0 20px 16px",
+  },
+  dismiss: {
+    border: "1px solid var(--oui-dt-border)",
+    borderRadius: 8,
+    background: "var(--oui-dt-bg)",
+    color: "var(--oui-dt-fg-secondary)",
+    boxShadow: "var(--oui-dt-shadow-subtle)",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    fontSize: 12,
+    fontWeight: 500,
+    padding: "6px 14px",
   },
 } satisfies Record<string, CSSProperties>;
diff --git a/packages/devtools/src/paste/LangEditor.tsx b/packages/devtools/src/paste/LangEditor.tsx
index 30b480871..7c0ee5e39 100644
--- a/packages/devtools/src/paste/LangEditor.tsx
+++ b/packages/devtools/src/paste/LangEditor.tsx
@@ -110,7 +110,6 @@ const styles = {
     minHeight: 0,
     height: "100%",
     background: "var(--oui-dt-bg-muted)",
-    borderRight: "1px solid var(--oui-dt-border-subtle)",
   },
   highlight: {
     ...shared,
diff --git a/packages/devtools/src/paste/PasteUI.tsx b/packages/devtools/src/paste/PasteUI.tsx
index cf56a499e..dbc8c43db 100644
--- a/packages/devtools/src/paste/PasteUI.tsx
+++ b/packages/devtools/src/paste/PasteUI.tsx
@@ -1,7 +1,9 @@
-import { ArrowLeft, Maximize2, X } from "lucide-react";
-import { Component, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { Maximize2, Minimize2, X } from "lucide-react";
+import { Component, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { IconButton } from "../IconButton";
 import { type RegisteredLibrary } from "../libraryRegistry";
-import { themeVars, useDevtoolsScheme } from "../theme";
+import { themeVars, useDevtoolsScheme, type ColorScheme } from "../theme";
+import { ThemeToggle } from "../ThemeToggle";
 import type { ChunkStrategy } from "./chunker";
 import { HelpDialog } from "./HelpDialog";
 import { LangEditor } from "./LangEditor";
@@ -19,6 +21,12 @@ import { useValidation } from "./useValidation";
 
 const CHAR_STRATEGY_LIMIT = 50 * 1024;
 
+/** Editor's share of the split, as a percentage. The panels get the rest. */
+const DEFAULT_EDITOR_PCT = 25;
+const MIN_EDITOR_PCT = 12;
+const MAX_EDITOR_PCT = 75;
+const SPLITTER = 14;
+
 type Tab = "render" | "validation" | "tree" | "json" | "stream";
 
 const TABS: { id: Tab; label: string }[] = [
@@ -59,10 +67,12 @@ export interface PasteUIProps {
   onCodeChange: (code: string) => void;
   ejected?: boolean;
   onEject?: () => void;
+  /** Returns an ejected window to the tray. */
+  onMinimize?: () => void;
   /** Dismisses the whole widget (or the ejected window). */
   onClose: () => void;
-  /** Narrows the drawer back to the event list. Omitted when ejected. */
-  onBack?: () => void;
+  theme: ColorScheme;
+  onThemeChange: (theme: ColorScheme) => void;
   /** False on the first ever visit, which opens the help guide unprompted. */
   helpSeen?: boolean;
   onHelpSeen?: () => void;
@@ -84,8 +94,10 @@ export function PasteUI({
   onCodeChange,
   ejected = false,
   onEject,
+  onMinimize,
   onClose,
-  onBack,
+  theme,
+  onThemeChange,
   helpSeen = true,
   onHelpSeen,
   popupBlocked = false,
@@ -97,6 +109,10 @@ export function PasteUI({
   const outcome = useValidation(code, lang, schema, rootName);
   const playback = usePlayback(code, lang, schema, rootName);
   const [tab, setTab] = useState<Tab>("render");
+  const [editorPct, setEditorPct] = useState(DEFAULT_EDITOR_PCT);
+  const [resizing, setResizing] = useState(false);
+  const [splitHover, setSplitHover] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
   const [strategy, setStrategy] = useState<ChunkStrategy>("llm");
   const [seed, setSeed] = useState(42);
   const scheme = useDevtoolsScheme();
@@ -116,6 +132,36 @@ export function PasteUI({
   const renderedCode = playbackActive ? playback.state.prefix : code;
   const streamDisabled = !lang || !code.trim() || schema == null;
 
+  const clampPct = (pct: number) => Math.min(MAX_EDITOR_PCT, Math.max(MIN_EDITOR_PCT, pct));
+
+  // Listeners go on the captured handle, not on `window` — when Debug is
+  // ejected the tray is portaled into the popup's document, and the
+  // module-scope window never sees those pointer events. Pointer capture also
+  // keeps the drag alive once the cursor leaves the handle.
+  const startResize = (event: React.PointerEvent<HTMLDivElement>) => {
+    const body = bodyRef.current;
+    if (!body) return;
+    const handle = event.currentTarget;
+    handle.setPointerCapture(event.pointerId);
+    setResizing(true);
+
+    const onMove = (move: PointerEvent) => {
+      const bounds = body.getBoundingClientRect();
+      if (bounds.width === 0) return;
+      setEditorPct(clampPct(((move.clientX - bounds.left) / bounds.width) * 100));
+    };
+    const onEnd = () => {
+      setResizing(false);
+      handle.removeEventListener("pointermove", onMove);
+      handle.removeEventListener("pointerup", onEnd);
+      handle.removeEventListener("pointercancel", onEnd);
+    };
+
+    handle.addEventListener("pointermove", onMove);
+    handle.addEventListener("pointerup", onEnd);
+    handle.addEventListener("pointercancel", onEnd);
+  };
+
   const changeCode = (next: string) => {
     if (playback.state.status !== "idle") playback.reset();
     onCodeChange(next);
@@ -125,16 +171,7 @@ export function PasteUI({
     <div style={{ ...styles.shell, ...themeVars(scheme) }}>
       <div style={styles.header}>
         <div style={styles.headerLeft}>
-          {onBack ? (
-            <button
-              style={{ ...styles.iconButton, ...styles.iconButtonOutlined }}
-              onClick={onBack}
-              aria-label="Back to event list"
-            >
-              <ArrowLeft size={14} />
-            </button>
-          ) : null}
-          <span style={styles.title}>OpenUI Paste</span>
+          <span style={styles.title}>OpenUI Debug</span>
           {lang?.langCoreVersion ? (
             <span style={styles.version} title="Installed @openuidev/lang-core">
               lang-core {lang.langCoreVersion}
@@ -143,26 +180,27 @@ export function PasteUI({
         </div>
         <div style={styles.headerActions}>
           <HelpDialog defaultOpen={!helpSeen} onSeen={onHelpSeen} />
+          <ThemeToggle value={theme} onChange={onThemeChange} />
           {!ejected && onEject ? (
-            <button
-              style={styles.iconButton}
-              onClick={onEject}
-              aria-label="Open OpenUI Paste in a new window"
-            >
+            <IconButton onClick={onEject} aria-label="Open OpenUI Debug in a new window">
               <Maximize2 size={14} />
-            </button>
+            </IconButton>
           ) : null}
-          <button
-            style={styles.iconButton}
+          {ejected && onMinimize ? (
+            <IconButton onClick={onMinimize} aria-label="Return OpenUI Debug to the tray">
+              <Minimize2 size={14} />
+            </IconButton>
+          ) : null}
+          <IconButton
             onClick={onClose}
-            aria-label={ejected ? "Close OpenUI Paste window" : "Close OpenUI devtools"}
+            aria-label={ejected ? "Close OpenUI Debug window" : "Close OpenUI Debug"}
           >
             <X size={15} />
-          </button>
+          </IconButton>
         </div>
       </div>
       {popupBlocked ? (
-        <div style={styles.banner}>Allow popups for this origin to eject OpenUI Paste.</div>
+        <div style={styles.banner}>Allow popups for this origin to eject OpenUI Debug.</div>
       ) : null}
       <StreamToolbar
         playback={playback}
@@ -170,11 +208,53 @@ export function PasteUI({
         bigInput={code.length > CHAR_STRATEGY_LIMIT}
         disabled={streamDisabled}
       />
-      <div style={styles.body}>
+      <div
+        ref={bodyRef}
+        style={{
+          ...styles.body,
+          gridTemplateColumns: `${editorPct}% ${SPLITTER}px minmax(0, 1fr)`,
+        }}
+      >
         <div style={styles.editorWrap}>
           <LangEditor value={code} onChange={changeCode} readOnly={playbackActive} />
           {playbackActive ? <span style={paste.editorLock}>Streaming…</span> : null}
         </div>
+        <div
+          style={styles.splitter}
+          onPointerDown={startResize}
+          onMouseEnter={() => setSplitHover(true)}
+          onMouseLeave={() => setSplitHover(false)}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowLeft") setEditorPct((pct) => clampPct(pct - 2));
+            if (event.key === "ArrowRight") setEditorPct((pct) => clampPct(pct + 2));
+          }}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize editor"
+          aria-valuenow={Math.round(editorPct)}
+          aria-valuemin={MIN_EDITOR_PCT}
+          aria-valuemax={MAX_EDITOR_PCT}
+          tabIndex={0}
+        >
+          <span
+            style={{
+              ...styles.splitterLine,
+              ...(splitHover || resizing ? styles.splitterLineOn : null),
+            }}
+            aria-hidden
+          />
+          <span
+            style={{
+              ...styles.splitterGrip,
+              ...(splitHover || resizing ? styles.splitterGripOn : null),
+            }}
+            aria-hidden
+          >
+            <span style={styles.splitterDot} />
+            <span style={styles.splitterDot} />
+            <span style={styles.splitterDot} />
+          </span>
+        </div>
         <div style={styles.output}>
           <div style={paste.tabStrip} role="tablist" aria-label="Paste panels">
             {TABS.map((item) => {
@@ -201,7 +281,7 @@ export function PasteUI({
               <div style={styles.missing}>Loading renderer…</div>
             ) : lang === null ? (
               <div style={styles.missing}>
-                Install <code>@openuidev/react-lang</code> to use OpenUI Paste.
+                Install <code>@openuidev/react-lang</code> to use OpenUI Debug.
               </div>
             ) : selected ? (
               <>
@@ -278,24 +358,6 @@ const styles = {
     gap: 6,
     flexShrink: 0,
   },
-  iconButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 26,
-    height: 26,
-    border: "none",
-    borderRadius: 8,
-    background: "transparent",
-    color: "var(--oui-dt-fg-muted)",
-    cursor: "pointer",
-    padding: 0,
-  },
-  iconButtonOutlined: {
-    boxSizing: "border-box",
-    border: "1px solid var(--oui-dt-border)",
-    background: "var(--oui-dt-bg)",
-  },
   banner: {
     padding: "8px 16px",
     background: "var(--oui-dt-warning-bg)",
@@ -303,16 +365,69 @@ const styles = {
     fontSize: 12,
     borderBottom: "1px solid var(--oui-dt-warning-border)",
   },
+  // Columns are set inline so the drag can move them.
   body: {
     flex: 1,
     minHeight: 0,
     display: "grid",
-    gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
+  },
+  // A hairline that reads as a divider, inside a wider transparent strip so
+  // it is still easy to grab. The handle only shows once you are on it.
+  splitter: {
+    position: "relative",
+    cursor: "col-resize",
+    background: "transparent",
+    touchAction: "none",
+  },
+  splitterLine: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 1,
+    background: "var(--oui-dt-border-subtle)",
+    transition: "width 150ms ease, background 150ms ease",
+    pointerEvents: "none",
+  },
+  splitterLineOn: {
+    width: 3,
+    background: "var(--oui-dt-border-strong)",
+  },
+  // Thin rounded chip with three stacked dots, centred on the divider.
+  splitterGrip: {
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    transform: "translate(-50%, -50%)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    boxSizing: "border-box",
+    width: 11,
+    height: 30,
+    borderRadius: 999,
+    border: "1px solid var(--oui-dt-control-border)",
+    background: "var(--oui-dt-control-bg)",
+    opacity: 0,
+    transition: "opacity 150ms ease",
+    pointerEvents: "none",
+  },
+  splitterGripOn: {
+    opacity: 1,
+  },
+  splitterDot: {
+    width: 2,
+    height: 2,
+    borderRadius: "50%",
+    background: "var(--oui-dt-fg)",
   },
   editorWrap: {
     position: "relative",
     minWidth: 0,
     minHeight: 0,
+    overflow: "hidden",
   },
   output: {
     display: "flex",
diff --git a/packages/devtools/src/paste/StreamToolbar.tsx b/packages/devtools/src/paste/StreamToolbar.tsx
index 18a500080..2c72e491d 100644
--- a/packages/devtools/src/paste/StreamToolbar.tsx
+++ b/packages/devtools/src/paste/StreamToolbar.tsx
@@ -5,6 +5,7 @@ import { pasteStyles as s } from "./styles";
 import type { PlaybackControls } from "./usePlayback";
 
 const SPEEDS = ["0.25", "0.5", "1", "2", "4", "8"];
+// Every control in the toolbar draws its icon at one size and one stroke.
 const ICON = { size: 14 };
 
 export interface StreamSettings {
@@ -14,15 +15,9 @@ export interface StreamSettings {
   onSeedChange: (n: number) => void;
 }
 
-function groupStyle(
-  primary: boolean,
-  disabled: boolean,
-  first: boolean,
-  last: boolean,
-): CSSProperties {
+function groupStyle(disabled: boolean, first: boolean, last: boolean): CSSProperties {
   return {
     ...s.groupButton,
-    ...(primary ? s.groupButtonPrimary : null),
     ...(disabled ? s.groupButtonDisabled : null),
     borderTopLeftRadius: first ? 8 : 0,
     borderBottomLeftRadius: first ? 8 : 0,
@@ -53,7 +48,7 @@ export function StreamToolbar({
       <div style={s.btnGroup} role="group" aria-label="Playback controls">
         {state.status === "playing" ? (
           <button
-            style={groupStyle(true, !!disabled, true, false)}
+            style={groupStyle(!!disabled, true, false)}
             onClick={pause}
             disabled={disabled}
             aria-label="Pause"
@@ -63,7 +58,7 @@ export function StreamToolbar({
           </button>
         ) : state.status === "paused" ? (
           <button
-            style={groupStyle(true, !!disabled, true, false)}
+            style={groupStyle(!!disabled, true, false)}
             onClick={resume}
             disabled={disabled}
             aria-label="Resume"
@@ -73,7 +68,7 @@ export function StreamToolbar({
           </button>
         ) : (
           <button
-            style={groupStyle(true, !!disabled, true, false)}
+            style={groupStyle(!!disabled, true, false)}
             onClick={() => start({ strategy, seed })}
             disabled={disabled}
             aria-label="Stream"
@@ -83,7 +78,7 @@ export function StreamToolbar({
           </button>
         )}
         <button
-          style={groupStyle(false, !!disabled || state.status !== "paused", false, false)}
+          style={groupStyle(!!disabled || state.status !== "paused", false, false)}
           onClick={step}
           disabled={disabled || state.status !== "paused"}
           aria-label="Step one chunk"
@@ -92,7 +87,7 @@ export function StreamToolbar({
           <StepForward {...ICON} />
         </button>
         <button
-          style={groupStyle(false, !!disabled || state.status === "idle", false, true)}
+          style={groupStyle(!!disabled || state.status === "idle", false, true)}
           onClick={reset}
           disabled={disabled || state.status === "idle"}
           aria-label="Reset playback"
diff --git a/packages/devtools/src/paste/eject.ts b/packages/devtools/src/paste/eject.ts
index ba16d7345..00075d013 100644
--- a/packages/devtools/src/paste/eject.ts
+++ b/packages/devtools/src/paste/eject.ts
@@ -23,7 +23,7 @@ export function openPasteWindow(): Window | null {
 function preparePasteDocument(from: Document, to: Document): void {
   if (to.documentElement.dataset["openuiPaste"] === "true") return;
   to.documentElement.dataset["openuiPaste"] = "true";
-  to.title = "OpenUI Paste";
+  to.title = "OpenUI Debug";
   // Mirror the host's root classes/attrs/color-scheme so the rendered preview
   // resolves the same CSS it would in the app. Devtools chrome is unaffected —
   // it uses the scheme chosen in Settings.
diff --git a/packages/devtools/src/paste/mockTools.ts b/packages/devtools/src/paste/mockTools.ts
index 44bbfc8ac..b7f5cb879 100644
--- a/packages/devtools/src/paste/mockTools.ts
+++ b/packages/devtools/src/paste/mockTools.ts
@@ -1,6 +1,6 @@
 const CANNED_RESULT = {
   status: "ok",
-  note: "Mock response from OpenUI Paste — tools are not connected.",
+  note: "Mock response from OpenUI Debug — tools are not connected.",
   items: [
     { id: 1, label: "Alpha", value: 42 },
     { id: 2, label: "Beta", value: 17 },
diff --git a/packages/devtools/src/paste/styles.ts b/packages/devtools/src/paste/styles.ts
index 12133cacb..40f6c1c14 100644
--- a/packages/devtools/src/paste/styles.ts
+++ b/packages/devtools/src/paste/styles.ts
@@ -30,7 +30,9 @@ export const pasteStyles = {
     color: "var(--oui-dt-fg)",
     fontFamily: FONT,
     fontSize: 12,
-    padding: "4px 8px",
+    // The native chevron sits flush against the label otherwise, so the inline
+    // end gets its own gutter; the start is padded to balance it.
+    padding: "4px 24px 4px 12px",
   },
   seedInput: {
     width: 64,
@@ -58,11 +60,6 @@ export const pasteStyles = {
     cursor: "pointer",
     padding: 0,
   },
-  groupButtonPrimary: {
-    background: "var(--oui-dt-inverted)",
-    borderColor: "var(--oui-dt-inverted)",
-    color: "var(--oui-dt-inverted-fg)",
-  },
   groupButtonDisabled: {
     opacity: 0.45,
     cursor: "not-allowed",
@@ -361,27 +358,29 @@ export const pasteStyles = {
     border: "1px solid var(--oui-dt-border)",
     borderRadius: 12,
     boxShadow: "var(--oui-dt-shadow)",
-    maxWidth: 560,
+    maxWidth: 440,
     width: "100%",
     maxHeight: "80%",
     display: "flex",
     flexDirection: "column",
     overflow: "hidden",
   },
+  // Same treatment as the Inspect tray header, with the dialog's wider gutter.
   helpHeader: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    padding: "12px 16px",
-    borderBottom: "1px solid var(--oui-dt-border-subtle)",
-    fontWeight: 700,
+    gap: 8,
+    padding: "14px 20px 0",
+    fontWeight: 600,
     fontSize: 14,
   },
   helpBody: {
-    padding: 16,
+    padding: "20px 20px 24px",
     overflowY: "auto",
     fontSize: 13,
     lineHeight: 1.55,
+    fontWeight: 400,
     color: "var(--oui-dt-fg-tertiary)",
   },
   editorLock: {
diff --git a/packages/devtools/src/theme.ts b/packages/devtools/src/theme.ts
index 1a34677ef..a989de106 100644
--- a/packages/devtools/src/theme.ts
+++ b/packages/devtools/src/theme.ts
@@ -21,32 +21,56 @@ export const DEFAULT_COLOR_SCHEME: ColorScheme = "light";
  */
 const LIGHT = {
   bg: "#ffffff",
-  "bg-muted": "#fafafa",
+  // Event cards. Level with the tray in light; lifted off it in dark, where a
+  // border alone is too faint to separate them.
+  card: "#ffffff",
+  // Small outlined controls. They sit on recessed panels, so in dark they need
+  // to be lighter than the tray to read as raised.
+  "control-bg": "#ffffff",
+  "control-border": "#e4e4e7",
+  // Inset fills are alpha, not fixed hex, so they read the same shade deeper
+  // wherever they land — on the tray, on a card, or inside another panel.
+  "promo-bg": "rgba(24, 24, 27, 0.035)",
+  "bg-muted": "rgba(24, 24, 27, 0.035)",
   "bg-subtle": "#f4f4f5",
   fg: "#18181b",
   "fg-muted": "#71717a",
-  "fg-faint": "#a1a1aa",
+  "fg-faint": "#8a8a94",
   "fg-secondary": "#52525b",
   "fg-tertiary": "#3f3f46",
   border: "#e4e4e7",
+  "border-strong": "#cfcfd4",
+  // LevelIcon chip fills: a step tinted past the surface, softer than the
+  // matching -border tokens they sit next to.
+  "level-neutral": "#ececee",
+  "level-warning": "#ffedd5",
+  "level-danger": "#fee2e2",
   "border-subtle": "#f4f4f5",
   overlay: "rgba(24, 24, 27, 0.4)",
   shadow: "0 16px 48px rgba(24, 24, 27, 0.18)",
+  "shadow-subtle": "0 1px 2px rgba(24, 24, 27, 0.07)",
   "toggle-bg": "#18181b",
   "toggle-fg": "#ffffff",
+  // Rim on the trays: a hairline of the opposite tone, so the panel edge
+  // reads without the weight of a solid border.
+  "tray-ring": "rgba(24, 24, 27, 0.10)",
   "toggle-border": "rgba(0, 0, 0, 0.08)",
-  "toggle-shadow": "0 2px 8px rgba(0, 0, 0, 0.16)",
-  "toggle-error": "#dc2626",
+  "toggle-shadow": "0 1px 4px rgba(0, 0, 0, 0.10)",
+  "toggle-error": "#e05252",
+  // The error toggle is a light puck in both themes, so the red count disc
+  // inside it keeps the same contrast wherever the widget is mounted.
+  "toggle-error-surface": "#ffffff",
+  "toggle-error-ring": "rgba(0, 0, 0, 0.14)",
   inverted: "#18181b",
   "inverted-fg": "#ffffff",
   danger: "#b91c1c",
   "danger-bg": "#fef2f2",
   "danger-border": "#fecaca",
   "danger-strong": "#991b1b",
-  warning: "#b45309",
-  "warning-bg": "#fffbeb",
-  "warning-border": "#fde68a",
-  "warning-strong": "#92400e",
+  warning: "#c2410c",
+  "warning-bg": "#fff7ed",
+  "warning-border": "#fed7aa",
+  "warning-strong": "#9a3412",
   info: "#1d4ed8",
   "info-bg": "#eff6ff",
   "info-border": "#bfdbfe",
@@ -71,54 +95,74 @@ const LIGHT = {
 } as const;
 
 const DARK = {
-  bg: "#18181b",
-  "bg-muted": "#09090b",
-  "bg-subtle": "#27272a",
-  fg: "#fafafa",
-  "fg-muted": "#a1a1aa",
-  "fg-faint": "#71717a",
-  "fg-secondary": "#a1a1aa",
-  "fg-tertiary": "#d4d4d8",
-  border: "#3f3f46",
-  "border-subtle": "#27272a",
+  // Lightness is the depth cue: raised surfaces step up from the tray, inset
+  // ones step down. One neutral hue throughout, so nothing reads muddy.
+  //   inset (alpha) < tray #17171a < card #1f1f23 < chips #2e2e34
+  bg: "#17171a",
+  card: "#1f1f23",
+  // Fill sits just above the card; the stroke a step above the fill, so the
+  // control catches light on its edge the way a raised surface does.
+  "control-bg": "#26262b",
+  "control-border": "#33333a",
+  "bg-muted": "rgba(0, 0, 0, 0.20)",
+  "promo-bg": "rgba(0, 0, 0, 0.20)",
+  "bg-subtle": "#2e2e34",
+  // Five distinct steps. `fg` stops short of pure white to avoid halation.
+  fg: "#ededf0",
+  "fg-tertiary": "#d0d0d6",
+  "fg-secondary": "#b0b0b8",
+  "fg-muted": "#9494a0",
+  "fg-faint": "#74747f",
+  border: "#262629",
+  "border-strong": "#3f3f47",
+  "border-subtle": "#26262b",
+  "level-neutral": "#2e2e34",
+  "level-warning": "#3b2a13",
+  "level-danger": "#3b1f23",
   overlay: "rgba(0, 0, 0, 0.6)",
   shadow: "0 16px 48px rgba(0, 0, 0, 0.5)",
-  "toggle-bg": "#18181b",
+  "shadow-subtle": "0 1px 2px rgba(0, 0, 0, 0.4)",
+  "toggle-bg": "#17171a",
   "toggle-fg": "#ffffff",
+  "tray-ring": "rgba(255, 255, 255, 0.09)",
   "toggle-border": "rgba(255, 255, 255, 0.18)",
-  "toggle-shadow": "0 2px 8px rgba(0, 0, 0, 0.45)",
-  "toggle-error": "#dc2626",
-  inverted: "#fafafa",
-  "inverted-fg": "#18181b",
-  danger: "#fca5a5",
-  "danger-bg": "#450a0a",
-  "danger-border": "#7f1d1d",
-  "danger-strong": "#fecaca",
-  warning: "#fbbf24",
-  "warning-bg": "#451a03",
-  "warning-border": "#854d0e",
-  "warning-strong": "#fde68a",
-  info: "#93c5fd",
-  "info-bg": "#1e3a5f",
-  "info-border": "#1e40af",
-  success: "#6ee7b7",
-  "success-bg": "#064e3b",
-  "success-border": "#065f46",
-  "credits-bg": "#451a03",
-  "credits-fg": "#fde68a",
-  "credits-border": "#854d0e",
-  "credits-gradient": "linear-gradient(135deg, #451a03 0%, #431407 100%)",
-  selection: "#1e3a5f",
-  "syntax-string": "#4ade80",
-  "syntax-state": "#e879f9",
-  "syntax-number": "#fb923c",
-  "syntax-atom": "#c4b5fd",
-  "syntax-type": "#93c5fd",
-  "syntax-ident": "#d4d4d8",
-  "syntax-keyword": "#2dd4bf",
-  "syntax-operator": "#a1a1aa",
-  "syntax-punct": "#71717a",
-  "syntax-text": "#fafafa",
+  "toggle-shadow": "0 1px 4px rgba(0, 0, 0, 0.28)",
+  "toggle-error": "#e05252",
+  "toggle-error-surface": "#ffffff",
+  "toggle-error-ring": "rgba(0, 0, 0, 0.14)",
+  inverted: "#ededf0",
+  "inverted-fg": "#17171a",
+  // Accent surfaces are the base neutral nudged toward the hue (~10% sat), not
+  // the hue itself darkened — that reads as a solid block on a dark tray.
+  danger: "#f78b8b",
+  "danger-bg": "#331a1e",
+  "danger-border": "#5c2a31",
+  "danger-strong": "#fcbcbc",
+  warning: "#f5a04a",
+  "warning-bg": "#332110",
+  "warning-border": "#5c3d1e",
+  "warning-strong": "#f9c893",
+  info: "#86b3fa",
+  "info-bg": "#17253d",
+  "info-border": "#2b4778",
+  success: "#5fd6a4",
+  "success-bg": "#122e23",
+  "success-border": "#1f5240",
+  "credits-bg": "#332110",
+  "credits-fg": "#f9c893",
+  "credits-border": "#5c3d1e",
+  "credits-gradient": "linear-gradient(135deg, #332110 0%, #331a18 100%)",
+  selection: "#2b4778",
+  "syntax-string": "#5fd97f",
+  "syntax-state": "#dd8bf0",
+  "syntax-number": "#f5a04a",
+  "syntax-atom": "#b9a6fb",
+  "syntax-type": "#86b3fa",
+  "syntax-ident": "#d0d0d6",
+  "syntax-keyword": "#4dd3c0",
+  "syntax-operator": "#9494a0",
+  "syntax-punct": "#74747f",
+  "syntax-text": "#ededf0",
 } as const;
 
 /** CSS custom properties to set on each widget root (toggle, drawer, paste). */
diff --git a/packages/react-lang/src/devtoolsBootstrap.ts b/packages/react-lang/src/devtoolsBootstrap.ts
index 3b732ed44..4654e036c 100644
--- a/packages/react-lang/src/devtoolsBootstrap.ts
+++ b/packages/react-lang/src/devtoolsBootstrap.ts
@@ -1,5 +1,5 @@
 /**
- * Auto-mounts the OpenUI devtools widget in development.
+ * Auto-mounts the OpenUI Inspect widget in development.
  *
  * This module runs as a top-level side effect when the web entry is loaded in
  * a browser. In production builds the whole block is dead-code-eliminated by
diff --git a/packages/react-lang/src/index.ts b/packages/react-lang/src/index.ts
index 0a56ff8f8..d34526f1f 100644
--- a/packages/react-lang/src/index.ts
+++ b/packages/react-lang/src/index.ts
@@ -1,4 +1,4 @@
-// Web entry ("." default export). Auto-mounts the OpenUI devtools widget in
+// Web entry ("." default export). Auto-mounts the OpenUI Inspect widget in
 // development via the side-effect import below. React Native resolves the
 // "react-native" condition / legacy root field to index.native.ts instead,
 // which omits the bootstrap (react-dom is not resolvable under Metro).