@harness-mix/cli 0.1.9 → 0.1.11

package/src/native-ui/renderer-extension/src/settings/skin-runtime.ts

@@ -183,6 +183,8 @@ html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] body::after {
   return `
 html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] {
   color-scheme: ${skin.dark ? "dark" : "light"};
+  --codex-titlebar-tint: transparent !important;
+  --header-tint: transparent !important;
   --color-text: ${text}; --color-text-primary: ${text}; --color-token-text-primary: ${text};
   --color-token-foreground: ${text}; --color-text-prose: ${text}; --color-text-emphasis: ${text};
   --color-text-primary-surface: ${text}; --color-text-primary-soft: ${text};
@@ -204,6 +206,7 @@ html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] {
   --wb-text-primary: ${text}; --wb-text-secondary: ${secondaryText}; --wb-text-tertiary: ${tertiaryText};
   --color-control-thumb-foreground: ${text};
   --color-text-mode-toggle-inactive: ${secondaryText};
+  --color-text-user-message: ${text} !important;
   --color-surface: color-mix(in srgb, ${surface} 92%, transparent);
   --color-surface-secondary: color-mix(in srgb, ${surface} 88%, transparent);
   --color-surface-tertiary: color-mix(in srgb, ${surface} 94%, transparent);
@@ -225,6 +228,7 @@ html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] {
   --color-background-secondary-soft-alpha: color-mix(in srgb, ${text} 7%, transparent);
   --color-background-secondary-soft-hover: color-mix(in srgb, ${text} 11%, transparent);
   --color-background-other-user-message: color-mix(in srgb, ${surface} 76%, transparent);
+  --color-background-user-message: color-mix(in srgb, ${surface} 92%, transparent) !important;
   --color-background-user-message-compact: color-mix(in srgb, ${surface} 88%, transparent);
   --color-border: color-mix(in srgb, ${text} 16%, transparent);
   --color-border-subtle: color-mix(in srgb, ${text} 8%, transparent);
@@ -329,19 +333,246 @@ html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
 ) {
   box-sizing: border-box;
   color: ${text} !important;
-  background: color-mix(in srgb, ${surface} 90%, transparent) !important;
+  background: color-mix(in srgb, ${surface} 96%, transparent) !important;
   border: 1px solid color-mix(in srgb, ${accent} 16%, transparent) !important;
   border-radius: 18px;
   padding: 14px 16px 12px;
   box-shadow: 0 8px 24px color-mix(in srgb, ${text} 8%, transparent) !important;
-  backdrop-filter: none !important;
+  backdrop-filter: blur(16px) saturate(120%) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  table,
+  [data-markdown-table],
+  [data-markdown-table] > div,
+  .main-surface table,
+  main table,
+  article table,
+  [data-response-annotation-conversation] table
+) {
+  background-color: color-mix(in srgb, ${surface} 95%, transparent) !important;
+  backdrop-filter: blur(16px) saturate(120%) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  [data-markdown-table],
+  .main-surface table,
+  main table,
+  article table,
+  table
+) {
+  border: 1px solid color-mix(in srgb, ${accent} 24%, transparent) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 20px color-mix(in srgb, ${text} 8%, transparent) !important;
+  overflow: hidden !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  table th,
+  [data-markdown-table] th,
+  [data-response-annotation-conversation] th
+) {
+  background-color: color-mix(in srgb, ${surface} 98%, transparent) !important;
+  border-bottom: 2px solid color-mix(in srgb, ${accent} 28%, transparent) !important;
+  color: ${text} !important;
+  font-weight: 600 !important;
+  padding: 8px 14px !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  table td,
+  [data-markdown-table] td,
+  [data-response-annotation-conversation] td,
+  [data-response-annotation-conversation] :where(th, td)
+) {
+  border-bottom: 1px solid color-mix(in srgb, ${text} 12%, transparent) !important;
+  border-right: 1px solid color-mix(in srgb, ${text} 6%, transparent) !important;
+  color: ${text} !important;
+  padding: 8px 14px !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  table tr:last-child td,
+  [data-markdown-table] tr:last-child td
+) {
+  border-bottom: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  table tr:hover td,
+  [data-markdown-table] tr:hover td
+) {
+  background-color: color-mix(in srgb, ${accent} 10%, transparent) !important;
 }
 html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(.composer-surface-chrome, [data-user-message-bubble], [data-codex-approval-surface]) {
   color: ${text} !important;
-  background: color-mix(in srgb, ${surface} 82%, transparent) !important;
+  background: color-mix(in srgb, ${surface} 92%, transparent) !important;
   border-color: color-mix(in srgb, ${accent} 24%, transparent) !important;
   box-shadow: 0 8px 24px color-mix(in srgb, ${accent} 12%, transparent) !important;
+  backdrop-filter: blur(16px) saturate(120%) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-user-message-bubble],
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-user-message-bubble] :where(
+  [data-markdown-text-tone="user-message"],
+  [data-markdown-han-text],
+  p,
+  span,
+  a,
+  code
+) {
+  color: ${text} !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  header,
+  header > div,
+  [data-pip-obstacle="app-shell-header"],
+  [data-pip-obstacle="app-shell-header"] > div,
+  [class*="_ApplicationMenuTopBar_"],
+  [class*="_FloatingHeader_"],
+  [class*="_TitleBar_"],
+  [data-testid="app-shell-header-context-menu-surface"],
+  [data-app-shell-header-toolbar],
+  [data-app-shell-tab-row],
+  [data-app-shell-application-menu-bar]
+) {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] header :where(.bg-surface, .bg-surface-secondary, .bg-surface-elevated):not([data-tab-id], [data-tab-id] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-pip-obstacle="app-shell-header"] :where(.bg-surface, .bg-surface-secondary, .bg-surface-elevated):not([data-tab-id], [data-tab-id] *) {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-main-content-top-fade] {
+  background: none !important;
+  background-image: none !important;
+  opacity: 0 !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > div:first-child {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
   backdrop-filter: none !important;
+  color: color-mix(in srgb, ${text} 82%, ${accent}) !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  text-shadow: 0 1px 2px color-mix(in srgb, ${surface} 72%, transparent) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > div:first-child > div {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > div:first-child button {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] header button:not([data-codexhost-settings-trigger] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-pip-obstacle="app-shell-header"] button:not([data-codexhost-settings-trigger] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-obstacle] button:not([data-codexhost-settings-trigger] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-testid="app-shell-header-context-menu-surface"] button:not([data-codexhost-settings-trigger] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-toolbar] button:not([data-codexhost-settings-trigger] *),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] header [role="button"]:not([data-codexhost-settings-trigger] *) {
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > button[aria-haspopup="menu"] {
+  color: color-mix(in srgb, ${text} 62%, transparent) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  filter: none !important;
+  outline: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] header button:not([data-codexhost-settings-trigger] *):hover,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-pip-obstacle="app-shell-header"] button:not([data-codexhost-settings-trigger] *):hover,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-obstacle] button:not([data-codexhost-settings-trigger] *):hover,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-testid="app-shell-header-context-menu-surface"] button:not([data-codexhost-settings-trigger] *):hover,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-toolbar] button:not([data-codexhost-settings-trigger] *):hover {
+  background: color-mix(in srgb, ${text} 12%, transparent) !important;
+  background-color: color-mix(in srgb, ${text} 12%, transparent) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > button[aria-haspopup="menu"]:hover,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > button[aria-haspopup="menu"]:focus-visible {
+  color: ${text} !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  filter: none !important;
+  outline: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] header button:not([data-codexhost-settings-trigger] *):active,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-pip-obstacle="app-shell-header"] button:not([data-codexhost-settings-trigger] *):active,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-obstacle] button:not([data-codexhost-settings-trigger] *):active,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-testid="app-shell-header-context-menu-surface"] button:not([data-codexhost-settings-trigger] *):active,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-header-toolbar] button:not([data-codexhost-settings-trigger] *):active {
+  background: color-mix(in srgb, ${text} 18%, transparent) !important;
+  background-color: color-mix(in srgb, ${text} 18%, transparent) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > button[aria-haspopup="menu"]:active,
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-shell-page-header] > [data-app-shell-header-toolbar] > button[aria-haspopup="menu"][data-state="open"] {
+  color: ${text} !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  filter: none !important;
+  outline: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  [data-app-shell-tab-controller],
+  [data-app-shell-tab-controller] [data-tab-id],
+  .\@container\/app-shell-tab,
+  [data-tab-id].group\/tab,
+  .group\/tab[data-tab-id],
+  [data-tab-id],
+  [data-app-shell-tab-capture]
+) {
+  max-width: min(680px, 55vw) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-tab-id] :where([class*="max-w-"], [class*="min-w-0"]) {
+  max-width: none !important;
+}
+@media (min-width: 100rem) {
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] {
+    --thread-content-max-width: min(72rem, calc(100vw - 22rem));
+  }
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [class*="thread-content-max-width"] {
+    --thread-content-max-width: min(72rem, calc(100vw - 22rem)) !important;
+  }
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-local-conversation-final-assistant] {
+    max-width: min(72rem, calc(100vw - 22rem)) !important;
+  }
+}
+@container home-main-content (inline-size <= 52rem) {
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] div[role="main"]:has([data-composer-placement="home"]) [class*="_Hero_"] {
+    min-block-size: clamp(8.5rem, 28cqh, 12.5rem) !important;
+    flex-basis: auto !important;
+    padding-block: 0.75rem 1rem !important;
+  }
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] div[role="main"]:has([data-composer-placement="home"]) [data-feature="game-source"] {
+    padding-inline: 1rem;
+    font-size: clamp(1.35rem, 4cqw, 1.75rem) !important;
+    line-height: 1.22 !important;
+  }
+}
+@media (max-width: 68.75rem), (max-height: 47.5rem) {
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] div[role="main"]:has([data-composer-placement="home"]) [class*="_Hero_"] {
+    min-block-size: clamp(8.5rem, 28vh, 12.5rem) !important;
+    flex-basis: auto !important;
+    padding-block: 0.75rem 1rem !important;
+  }
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] div[role="main"]:has([data-composer-placement="home"]) [data-feature="game-source"] {
+    padding-inline: 1rem;
+    font-size: clamp(1.35rem, 3.2vw, 1.75rem) !important;
+    line-height: 1.22 !important;
+  }
 }
 html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-app-action-sidebar-thread-active="true"] {
   background: linear-gradient(90deg, color-mix(in srgb, ${accent} 22%, transparent), color-mix(in srgb, ${secondary} 16%, transparent)) !important;

package/src/native-ui/renderer-extension/test/agent-selection-state.test.ts

@@ -385,6 +385,64 @@ describe("Renderer draft Agent controller", () => {
     });
   });
 
+  it("restores an unsubmitted new-Thread draft after visiting another conversation", async () => {
+    const composer = {};
+    const agents = controller();
+    const draftTarget = ["default", "client-new-thread:draft-a"] as const;
+    const conversationTarget = ["conversation", "existing-thread", "local"] as const;
+    const model = harnessModelRefSchema.parse({ id: "gpt-5.6-sol" });
+    const thinkingOptionId = harnessThinkingOptionIdSchema.parse("high");
+    const permissionModeId = harnessPermissionModeIdSchema.parse("full-access");
+
+    agents.mount(composer, draftTarget);
+    await agents.switchAgent(composer, "pi", {
+      applyAgent: () => true,
+      clearPrewarm: async () => undefined,
+    });
+    agents.setExternalModel(composer, "pi", model);
+    agents.setExternalThinkingOption(composer, "pi", thinkingOptionId);
+    agents.setExternalPermissionMode(composer, "pi", permissionModeId);
+    const draftState = agents.get(composer);
+
+    expect(agents.rebindTarget(composer, conversationTarget)).toMatchObject({
+      agent: "codex",
+      phase: "draft",
+    });
+    agents.restore(composer, "codex");
+
+    expect(agents.rebindTarget(composer, draftTarget)).toBe(draftState);
+    expect(agents.get(composer)).toMatchObject({
+      agent: "pi",
+      phase: "draft",
+      piModel: model,
+      piThinkingOptionId: thinkingOptionId,
+      permissionModeByAgent: { pi: permissionModeId },
+    });
+  });
+
+  it("does not revive a submitted draft after it becomes a conversation", async () => {
+    const composer = {};
+    const agents = controller();
+    const draftTarget = ["default", "client-new-thread:submitted"] as const;
+    const conversationTarget = ["conversation", "created-thread", "local"] as const;
+
+    agents.mount(composer, draftTarget);
+    await agents.switchAgent(composer, "pi", {
+      applyAgent: () => true,
+      clearPrewarm: async () => undefined,
+    });
+    agents.markSubmissionPending(composer);
+    agents.recordSubmission(composer);
+    expect(agents.transfer(composer, composer, conversationTarget)).toBe(true);
+    expect(agents.get(composer)).toMatchObject({ agent: "pi", phase: "locked" });
+
+    expect(agents.rebindTarget(composer, draftTarget)).toMatchObject({
+      agent: "pi",
+      phase: "draft",
+    });
+    expect(agents.get(composer).composerId).not.toBe("composer-1");
+  });
+
   it("restores a newly mounted Fork owner and ignores stale ownership generations", () => {
     const forkComposer = {};
     const replacement = {};

package/src/native-ui/renderer-extension/test/renderer-binding-probe.test.ts

@@ -19,6 +19,7 @@ import {
   lockedPermissionMode,
   permissionModeSelectionLocked,
   lateConversationTargetResolution,
+  composerTargetResolution,
   harnessAvailabilityDuringInspect,
   passiveHarnessAvailabilityAgents,
   refreshConnectionHosts,
@@ -1240,6 +1241,17 @@ describe("Renderer Composer DOM behavior", () => {
     expect(lateConversationTargetResolution(null, conversationTarget, "draft")).toBe("inspect");
   });
 
+  it("restores the exact draft target when navigation returns from a conversation", () => {
+    const draftTarget = ["default", "client-new-thread:draft-a"];
+    const conversationTarget = ["conversation", "opaque-1"];
+
+    expect(composerTargetResolution(conversationTarget, draftTarget, "locked")).toBe(
+      "restore-draft",
+    );
+    expect(composerTargetResolution(draftTarget, conversationTarget, "draft")).toBe("inspect");
+    expect(composerTargetResolution(draftTarget, draftTarget, "draft")).toBe("none");
+  });
+
   it("does not transfer an unsubmitted default draft when an existing conversation opens", () => {
     const defaultTarget = ["default"];
     const firstConversationTarget = ["conversation", "opaque-1"];

package/src/native-ui/renderer-extension/test/renderer-model-client.test.ts

@@ -315,6 +315,7 @@ describe("Renderer fixed Model request client", () => {
       "messageThread",
       "openHarnessWebUi",
       "optimizeStorage",
+      "petsClient",
       "readCurrentVersion",
       "readUpdateStatus",
       "refreshCodexAccounts",

package/src/native-ui/renderer-extension/test/settings/localization.test.ts

@@ -83,6 +83,7 @@ describe("Renderer settings localization", () => {
       "会话导入",
       "存储与验证",
       "皮肤",
+      "桌宠",
       "更新",
       "关于",
     ]);

package/src/native-ui/renderer-extension/test/settings/shell.test.ts

@@ -28,6 +28,7 @@ describe("Renderer settings foundation", () => {
       "Session Import",
       "Storage & verification",
       "Skins",
+      "Pets",
       "Updates",
       "About",
     ]);
@@ -39,6 +40,7 @@ describe("Renderer settings foundation", () => {
       "session-import",
       "storage",
       "palette",
+      "pets",
       "updates",
       "about",
     ]);
@@ -76,6 +78,7 @@ describe("Renderer settings foundation", () => {
       "session-import",
       "storage",
       "skins",
+      "pets",
       "updates",
       "about",
     ]);

package/src/native-ui/renderer-extension/test/settings/skin-runtime.test.ts

@@ -102,7 +102,8 @@ describe("renderer skin runtime", () => {
     expect(fixture.getStyle()?.textContent).toContain('.main-surface');
     expect(fixture.getStyle()?.textContent).toContain('[data-app-shell-main-surface="default"]');
     expect(fixture.getStyle()?.textContent).toContain("[data-response-annotation-conversation]");
-    expect(fixture.getStyle()?.textContent).toContain("90%, transparent");
+    expect(fixture.getStyle()?.textContent).toContain("96%, transparent");
+    expect(fixture.getStyle()?.textContent).toContain("backdrop-filter: blur");
     expect(fixture.getStyle()?.textContent).not.toContain("background: transparent !important; border-color: transparent");
     expect(fixture.getStyle()?.textContent).toContain("--color-text-primary");
     expect(fixture.getStyle()?.textContent).toContain("--color-token-foreground");
@@ -117,7 +118,15 @@ describe("renderer skin runtime", () => {
     expect(fixture.getStyle()?.textContent).toContain("polaroid.webp");
     expect(fixture.getStyle()?.textContent).toContain("body::after");
     expect(fixture.getStyle()?.textContent).not.toContain("background-attachment: fixed");
-    expect(fixture.getStyle()?.textContent).not.toContain("backdrop-filter: blur");
+    expect(fixture.getStyle()?.textContent).toContain("--codex-titlebar-tint: transparent");
+    expect(fixture.getStyle()?.textContent).toContain("[data-tab-id]");
+    expect(fixture.getStyle()?.textContent).toContain("[data-app-shell-header-obstacle] button");
+    expect(fixture.getStyle()?.textContent).toContain("[data-app-shell-main-content-top-fade]");
+    expect(fixture.getStyle()?.textContent).toContain("[data-app-shell-page-header] > [data-app-shell-header-toolbar] > div:first-child");
+    expect(fixture.getStyle()?.textContent).toContain('button[aria-haspopup="menu"]:hover');
+    expect(fixture.getStyle()?.textContent).toContain("@container home-main-content");
+    expect(fixture.getStyle()?.textContent).toContain('[data-composer-placement="home"]');
+    expect(fixture.getStyle()?.textContent).toContain("--thread-content-max-width: min(72rem");
     expect(fixture.getStyle()?.textContent).toContain("hero.webp");
     expect(storage.getItem(RENDERER_SKIN_STORAGE_KEY)).toBe("miku-488137");
     expect(readRendererSkin(storage)).toBe("miku-488137");
@@ -133,4 +142,21 @@ describe("renderer skin runtime", () => {
     storage.setItem(RENDERER_SKIN_STORAGE_KEY, "removed-theme");
     expect(readRendererSkin(storage)).toBe("native");
   });
+
+  it("applies shared transparent header chrome and readable user messages to every custom skin", () => {
+    const storage = new MemoryStorage();
+    const fixture = fakeDocument();
+
+    for (const skin of RENDERER_SKINS.slice(1)) {
+      applyRendererSkin(skin.id, fixture.document, storage);
+      const css = fixture.getStyle()?.textContent ?? "";
+      expect(fixture.attributes.get(RENDERER_SKIN_ATTRIBUTE)).toBe(skin.id);
+      expect(css).toContain("--color-text-user-message:");
+      expect(css).toContain('[data-user-message-bubble] :where(');
+      expect(css).toContain('[data-markdown-text-tone="user-message"]');
+      expect(css).toContain('[data-app-shell-header-toolbar] > div:first-child {');
+      expect(css).toContain('> button[aria-haspopup="menu"][data-state="open"]');
+      expect(css).toContain("background: transparent !important;");
+    }
+  });
 });