feat(devtools): rainbow trigger, persist strip fold, and pane gutters

Use the rainbow palm as the default trigger mark and default triggerMode to floating.
Keep the folded plugin strip across reloads.
Lay plugin panes in rounded cards with even gutters, theme panel scrollbars, and keep resize handles on the live layout so they stay in the gap after a pane opens or a drag.

Author: AlemTuzlak

.changeset/persist-subheader-fold.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Persist the folded plugin strip across reloads so it does not steal height back on refresh.

.changeset/rainbow-trigger-mark.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Use the rainbow palm favicon as the default trigger mark, default the trigger to floating, and make pane gutters follow the pointer instead of compounding each drag move.

.changeset/tab-gutters-scrollbars.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools': patch
+'@tanstack/devtools-ui': patch
+---
+
+Give plugin tabs a small inset in a rounded card, keep pane gutters visible at rest, and theme the panel scrollbars.

docs/architecture.md

@@ -146,26 +146,26 @@ The devtools shell is a Solid.js application that renders the entire devtools UI
 - **`setConfig(config)`** -- Updates configuration and plugins at runtime. Plugins are reactive: adding or removing them updates the tab bar immediately.
 
 The shell renders:
-- A **trigger button** (the floating devtools toggle, customizable or replaceable)
+- A **trigger button** (the floating rainbow palm mark, customizable or replaceable)
 - A **resizable Workbench panel** (docked to the top or bottom of the viewport, resizable via pointer or keyboard)
 - A compact **36px TanStack Devtools header** with Plugins, Marketplace, SEO, and Settings destinations. The palm emblem is inline SVG, so it stays sharp and takes its colour from the theme.
 - A fixed-height **44px secondary strip** for plugin and SEO navigation. It scrolls horizontally when space is limited, and a pull tab on its bottom edge folds it away behind the header. Folding changes nothing else — the panel keeps its height and the destination content keeps running — so the tab is rendered only on the destinations that have a strip.
 - A separate **Marketplace** header tab that does not disturb mounted plugin panes
 - A **settings panel** for theme, hotkeys, position, and other preferences
 - Up to three simultaneous **plugin mount frames**, divided into equal widths by static separators
 
-Settings and UI state (panel size, position, active tab, theme) are persisted in `localStorage` so they survive page reloads.
+Settings and UI state (panel size, position, active tab, theme, and whether the secondary strip is folded) are persisted in `localStorage` so they survive page reloads.
 
 The core shell owns the Workbench header, navigation, mount-frame geometry, separators, and surrounding light/dark surfaces. Each external plugin owns everything inside its mount target; core styling deliberately does not reach into plugin descendants. Detaching the Workbench uses a fixed `100vh` Picture-in-Picture layout and restores the stored docked height when reattached.
 
 #### Workbench surfaces and gutters
 
 Two rules keep the shell reading as one surface:
 
-- **Chrome versus canvas.** The header and every secondary strip paint the brand surface (cream in light mode, near-black in dark mode) and close with a translucent ink hairline. Destination content and plugin mount frames paint the workspace surface. A plugin pane can paint any colour it likes, so the separator between panes uses a mid-tone border that stays visible against both.
+- **Chrome versus canvas.** The header and every secondary strip paint the brand surface (cream in light mode, near-black in dark mode) and close with a translucent ink hairline. Destination content and plugin mount frames paint the workspace surface. A plugin pane can paint any colour it likes. The resize gutter between panes is invisible at rest and paints a line on hover or keyboard focus.
 - **One gutter.** `WORKBENCH_GUTTER` (16px, or `WORKBENCH_GUTTER_NARROW` at 12px below 430px) is the single inline gutter. The header, the strips, and each destination's content all start there, so the left edge is one column instead of three. `MainPanel withPadding` uses the same value.
 
-Colour comes from the semantic theme only. Raw hex values in core-owned source are rejected by `tests/semantic-color-usage.test.ts` unless they carry a narrow, path-scoped `semantic-color-exempt` marker — currently only third-party network marks and the source-inspector highlight alpha. Status colours (success, warning, error, info) mark real state; identity accents do not compete with them, so a card that is both featured and active keeps the neutral outline and lets its badge say which it is.
+Colour comes from the semantic theme only. Raw hex values in core-owned source are rejected by `tests/semantic-color-usage.test.ts` unless they carry a narrow, path-scoped `semantic-color-exempt` marker. The current exemptions are third-party network marks, the source-inspector highlight alpha, and the trigger rainbow mark. Status colours (success, warning, error, info) mark real state; identity accents do not compete with them, so a card that is both featured and active keeps the neutral outline and lets its badge say which it is.
 
 ### @tanstack/devtools-ui -- Component Library
 

docs/configuration.md

@@ -35,7 +35,7 @@ The `config` object is mainly focused around user interaction with the devtools
 { position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }
 ```
 
-- `triggerMode` - How the trigger is placed. `'fixed'` anchors it to `position`; `'floating'` lets you drag the trigger anywhere on screen (and throw it — it glides with momentum and springs back off the edges). The floating spot is persisted in local storage.
+- `triggerMode` - How the trigger is placed. `'floating'` (the default) lets you drag the trigger anywhere on screen, and throw it: it glides with momentum and springs back off the edges. `'fixed'` anchors it to `position`. The floating spot is persisted in local storage.
 
 ```ts
 { triggerMode: 'fixed' | 'floating' }

docs/plugin-workspace.md

@@ -18,7 +18,8 @@ close it, so there is only ever one control for it.
   same zones as below. Dropping onto an empty workspace gives it the whole area.
 
 The strip folds itself away when everything is open, and comes back on its own the
-moment a plugin closes and returns to it.
+moment a plugin closes and returns to it. A fold you make with the pull tab is
+kept across reloads.
 
 ## Arranging panes
 
@@ -50,8 +51,9 @@ or bottom edge stack instead. Drag the panel taller first if you want rows.
 
 ## Resizing
 
-Drag the gutter between two panes. One pane grows by exactly what the other loses,
-and neither can shrink past a readable minimum.
+Each pane sits in a rounded card with a small gutter from the workspace edge.
+Drag between cards to resize: the resize line appears on hover. One pane grows
+by exactly what the other loses, and neither can shrink past a readable minimum.
 
 ## Keyboard
 

e2e/apps/react-vite/tests/plugin-workspace.spec.ts

@@ -80,9 +80,13 @@ test('dragging the gutter moves width from one pane to the other', async ({
 
   const afterDemo = (await dt.pane(DEMO).boundingBox())!.width
   const afterProbe = (await dt.pane(PROBE).boundingBox())!.width
-  expect(afterDemo).toBeGreaterThan(beforeDemo + 50)
+  const moved = afterDemo - beforeDemo
+  // The gutter must follow the pointer (~120px), not compound each move into
+  // a spring that flings the pane across the workspace.
+  expect(moved).toBeGreaterThan(80)
+  expect(moved).toBeLessThan(160)
   // One grows by exactly what the other loses.
-  expect(afterDemo - beforeDemo).toBeCloseTo(beforeProbe - afterProbe, 0)
+  expect(moved).toBeCloseTo(beforeProbe - afterProbe, 0)
   expect(afterDemo + afterProbe).toBeCloseTo(beforeDemo + beforeProbe, 0)
 })
 

packages/devtools-ui/src/styles/use-styles.ts

@@ -683,6 +683,27 @@ const stylesFactory = (theme: TanStackDevtoolsTheme) => {
         /* Keep a scroll gesture inside the devtools instead of chaining it on
            to the host page once this panel hits its end. */
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${semantic.color.border.control} transparent;
+        &::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: ${semantic.color.border.control};
+          border-radius: 999px;
+          border: 2px solid transparent;
+          background-clip: padding-box;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: ${semantic.color.text.muted};
+        }
+        &::-webkit-scrollbar-corner {
+          background: transparent;
+        }
         height: 100%;
         &::selection,
         & *::selection {

packages/devtools/skills/devtools-app-setup/SKILL.md

@@ -159,7 +159,7 @@ Pass a `config` prop to `TanStackDevtools` to set initial shell behavior. These
 Storage keys used internally:
 
 - `tanstack_devtools_settings` -- persisted settings
-- `tanstack_devtools_state` -- persisted UI state (active tab, panel height, active plugins, persistOpen)
+- `tanstack_devtools_state` -- persisted UI state (active tab, panel height, layout, persistOpen, subheaderCollapsed)
 
 All config properties are optional. Defaults shown below:
 
@@ -168,7 +168,8 @@ All config properties are optional. Defaults shown below:
   config={{
     defaultOpen: false, // open panel on mount
     hideUntilHover: false, // hide trigger until mouse hover
-    position: 'bottom-right', // trigger position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'
+    position: 'bottom-right', // used when triggerMode is 'fixed': 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right'
+    triggerMode: 'floating', // 'floating' (default, draggable) | 'fixed'
     panelLocation: 'bottom', // panel position: 'top' | 'bottom'
     openHotkey: ['Control', '~'],
     inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],