rivet-dev · jog1t · Jul 29, 2026
diff --git a/examples/inspector-tabs/inspector-tabs/counter/index.html b/examples/inspector-tabs/inspector-tabs/counter/index.html
diff --git a/examples/inspector-tabs/inspector-tabs/info/index.html b/examples/inspector-tabs/inspector-tabs/info/index.html
diff --git a/frontend/scripts/generate-inspector-tab-css.mjs b/frontend/scripts/generate-inspector-tab-css.mjs
@@ -49,11 +49,20 @@ const HEADER = `/*!
  *
  *   <link rel="stylesheet" href="../../tab.css">
  *
- * Theme switching: tokens follow the dashboard's mechanism — \`:root\`
+ * Theme switching: tokens follow the dashboard's mechanism. \`:root\`
  * carries the light defaults and \`:root[class~="dark"]\` overrides with
  * dark values. The dashboard passes the active theme via the \`v1Init\`
  * postMessage (\`theme: "light" | "dark"\`); apply it by toggling the
- * \`dark\` class on \`<html>\` inside the tab.
+ * \`dark\` class on \`<html>\` inside the tab. \`v1Init\` also carries
+ * \`tokens\` (resolved CSS colors) and \`surface\` (which token names the
+ * panel the tab is mounted on); pinning those as inline
+ * \`--rivet-*\` properties makes the tab track the dashboard exactly even
+ * if this stylesheet is older than the shell.
+ *
+ * Surface: the tab is mounted on the dashboard's \`--card\` panel, so
+ * \`--rivet-surface\` (defaulting to \`--rivet-card\`) is what \`html\` and
+ * \`body\` paint. Do not use \`--rivet-background\` for the tab's own
+ * backdrop; it is the color of the dashboard shell around the panel.
  */`;
 
 function main() {

diff --git a/frontend/scripts/inspector-tab-aliases.css b/frontend/scripts/inspector-tab-aliases.css
@@ -60,6 +60,15 @@
 	--rivet-input: hsl(var(--input));
 	--rivet-ring: hsl(var(--ring));
 
+	/* The surface the tab iframe is mounted on. The dashboard hosts custom
+	 * tabs on a `--card` panel, so a tab painting itself with this token
+	 * composites flush against its host instead of showing a seam. The
+	 * dashboard also sends the resolved value as `init.tokens[init.surface]`;
+	 * applying that overrides this default if the host ever moves the tab
+	 * onto a different surface. */
+	--rivet-surface: var(--rivet-card);
+	--rivet-surface-foreground: var(--rivet-card-foreground);
+
 	--rivet-radius: var(--radius);
 	--rivet-radius-sm: calc(var(--rivet-radius) - 4px);
 	--rivet-radius-md: calc(var(--rivet-radius) - 2px);
@@ -95,8 +104,8 @@
 html, body {
 	margin: 0;
 	padding: 0;
-	background: var(--rivet-background);
-	color: var(--rivet-foreground);
+	background: var(--rivet-surface);
+	color: var(--rivet-surface-foreground);
 	font-family: var(--rivet-font-sans);
 	font-size: 14px;
 	line-height: 1.5;

diff --git a/frontend/src/components/actors/actor-details-iframe.tsx b/frontend/src/components/actors/actor-details-iframe.tsx
diff --git a/frontend/src/components/actors/inspector-tab-tokens.ts b/frontend/src/components/actors/inspector-tab-tokens.ts