@harness-mix/cli 0.1.8 → 0.1.9

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

@@ -0,0 +1,399 @@
+import dalaoDianyanHero from "../../../../assets/skins/heige/themes/dalao-dianyan/hero.webp";
+import deepspaceDawnHero from "../../../../assets/skins/heige/themes/deepspace-dawn/hero.webp";
+import deepspaceStarHero from "../../../../assets/skins/heige/themes/deepspace-star/hero.webp";
+import dragonballNimbusHero from "../../../../assets/skins/heige/themes/dragonball-nimbus/hero.webp";
+import dragonballSuperSaiyanHero from "../../../../assets/skins/heige/themes/dragonball-super-saiyan/hero.webp";
+import genshinDawnHero from "../../../../assets/skins/heige/themes/genshin-dawn/hero.webp";
+import genshinNightHero from "../../../../assets/skins/heige/themes/genshin-night/hero.webp";
+import mikuHero from "../../../../assets/skins/heige/themes/miku-488137/hero.webp";
+import mikuLogo from "../../../../assets/skins/heige/themes/miku-488137/logo.webp";
+import mikuPolaroid from "../../../../assets/skins/heige/themes/miku-488137/polaroid.webp";
+import narutoHokageHero from "../../../../assets/skins/heige/themes/naruto-hokage/hero.webp";
+import narutoSasukeHero from "../../../../assets/skins/heige/themes/naruto-sasuke/hero.webp";
+import wutheringEchoHero from "../../../../assets/skins/heige/themes/wuthering-echo/hero.webp";
+import wutheringTideHero from "../../../../assets/skins/heige/themes/wuthering-tide/hero.webp";
+import gildedGrandeurHero from "../../../../assets/skins/codex-styler/themes/gilded-grandeur/hero.webp";
+import merryBigTopHero from "../../../../assets/skins/codex-styler/themes/merry-big-top/hero.webp";
+import nocturneStudioHero from "../../../../assets/skins/codex-styler/themes/nocturne-studio/hero.webp";
+import quietGardenHero from "../../../../assets/skins/codex-styler/themes/quiet-garden/hero.webp";
+
+export const RENDERER_SKIN_STORAGE_KEY = "harness-mix.renderer-skin.v1";
+export const RENDERER_SKIN_STYLE_ID = "harness-mix-renderer-skin";
+export const RENDERER_SKIN_ATTRIBUTE = "data-harness-mix-skin";
+
+export const RENDERER_SKIN_IDS = [
+  "native", "miku-488137", "genshin-dawn", "genshin-night", "wuthering-echo",
+  "wuthering-tide", "naruto-hokage", "naruto-sasuke", "deepspace-dawn",
+  "deepspace-star", "dragonball-nimbus", "dragonball-super-saiyan", "dalao-dianyan",
+  "styler-gilded-grandeur", "styler-merry-big-top", "styler-nocturne-studio",
+  "styler-quiet-garden",
+] as const;
+
+export type RendererSkinId = (typeof RENDERER_SKIN_IDS)[number];
+
+export interface RendererSkinDefinition {
+  readonly id: RendererSkinId;
+  readonly name: string;
+  readonly sourceName: string;
+  readonly sourceUrl: string | null;
+  readonly heroUrl: string | null;
+  readonly logoUrl: string | null;
+  readonly polaroidUrl: string | null;
+  readonly palette: readonly [surface: string, secondary: string, accent: string, text: string];
+  readonly preview: string;
+  readonly focus: string;
+  readonly dark: boolean;
+}
+
+const HEIGE_SOURCE_URL = "https://github.com/HeiGeAi/heige-codex-skin-studio";
+const CODEX_STYLER_SOURCE_URL = "https://github.com/xuhuanstudio/codex-styler";
+
+function heigeSkin(
+  id: Exclude<RendererSkinId, "native">,
+  name: string,
+  heroUrl: string,
+  palette: RendererSkinDefinition["palette"],
+  focus: string,
+  dark: boolean,
+  decorations: Pick<RendererSkinDefinition, "logoUrl" | "polaroidUrl"> = {
+    logoUrl: null,
+    polaroidUrl: null,
+  },
+): RendererSkinDefinition {
+  return Object.freeze({
+    id, name, heroUrl, palette, focus, dark, ...decorations,
+    sourceName: "HeiGe Codex Skin Studio",
+    sourceUrl: HEIGE_SOURCE_URL,
+    preview: `linear-gradient(${dark ? "rgb(3 7 12 / 16%)" : "rgb(255 255 255 / 8%)"}, transparent)`,
+  });
+}
+
+function codexStylerSkin(
+  id: Exclude<RendererSkinId, "native">,
+  name: string,
+  heroUrl: string,
+  palette: RendererSkinDefinition["palette"],
+  focus: string,
+): RendererSkinDefinition {
+  return Object.freeze({
+    id, name, heroUrl, logoUrl: null, polaroidUrl: null, palette, focus, dark: true,
+    sourceName: "Codex Styler · CC BY 4.0",
+    sourceUrl: CODEX_STYLER_SOURCE_URL,
+    preview: "linear-gradient(rgb(3 7 12 / 16%), transparent)",
+  });
+}
+
+export const RENDERER_SKINS: readonly RendererSkinDefinition[] = Object.freeze([
+  Object.freeze({
+    id: "native", name: "Native Codex", sourceName: "OpenAI Codex", sourceUrl: null,
+    heroUrl: null, logoUrl: null, polaroidUrl: null,
+    palette: ["#f7f7f7", "#d7d7d7", "#171717", "#171717"] as const,
+    preview: "linear-gradient(145deg, #f8f8f8 0 58%, #ececec 58% 100%)",
+    focus: "50% 50%", dark: false,
+  }),
+  heigeSkin(
+    "miku-488137",
+    "Miku 488137",
+    mikuHero,
+    ["#f5f6fc", "#ed6ec1", "#19c9e5", "#122c60"],
+    "50% 33%",
+    false,
+    { logoUrl: mikuLogo, polaroidUrl: mikuPolaroid },
+  ),
+  heigeSkin("genshin-dawn", "原神 · 晨曦", genshinDawnHero, ["#f2f1fb", "#e0aa3e", "#5b7fd6", "#2c3a6b"], "50% 24%", false),
+  heigeSkin("genshin-night", "原神 · 星夜", genshinNightHero, ["#171a2e", "#7a86d8", "#e0b458", "#f0e6c8"], "50% 17%", true),
+  heigeSkin("wuthering-echo", "鸣潮 · 共鸣", wutheringEchoHero, ["#16121f", "#a98fe8", "#56e0d8", "#e4def2"], "50% 27%", true),
+  heigeSkin("wuthering-tide", "鸣潮 · 声骸", wutheringTideHero, ["#0d1418", "#9aa8b0", "#3fd6d0", "#d8eef0"], "50% 30%", true),
+  heigeSkin("naruto-hokage", "火影 · 鸣人", narutoHokageHero, ["#17110b", "#ffd166", "#f2801e", "#ffe3c2"], "50% 27%", true),
+  heigeSkin("naruto-sasuke", "火影 · 佐助", narutoSasukeHero, ["#171019", "#7fb3ff", "#d8443c", "#ffd9d2"], "50% 24%", true),
+  heigeSkin("deepspace-dawn", "恋与深空 · 晨曦", deepspaceDawnHero, ["#f6f2fb", "#f097c8", "#8f7fe8", "#4a4668"], "50% 8%", false),
+  heigeSkin("deepspace-star", "恋与深空 · 星辰", deepspaceStarHero, ["#201a40", "#f097c8", "#9d8bff", "#e8e2ff"], "50% 8%", true),
+  heigeSkin("dragonball-nimbus", "龙珠 · 筋斗云", dragonballNimbusHero, ["#f3f7ff", "#f6c445", "#4fc3f7", "#14213d"], "72% 24%", false),
+  heigeSkin("dragonball-super-saiyan", "龙珠 · 超级赛亚人", dragonballSuperSaiyanHero, ["#fff8e8", "#52c7f2", "#f5c451", "#282033"], "67% 3%", false),
+  heigeSkin("dalao-dianyan", "大佬 · 点烟", dalaoDianyanHero, ["#111111", "#9aa3b0", "#e09a52", "#f2e8da"], "50% 8%", true),
+  codexStylerSkin("styler-gilded-grandeur", "金辉盛境", gildedGrandeurHero, ["#090704", "#5b4721", "#e8bd55", "#fff2cd"], "54% 48%"),
+  codexStylerSkin("styler-merry-big-top", "欢乐大帐篷", merryBigTopHero, ["#100b14", "#5a3d4b", "#ff755e", "#fff2dc"], "55% 48%"),
+  codexStylerSkin("styler-nocturne-studio", "夜曲工作室", nocturneStudioHero, ["#090b0d", "#34383a", "#e9a066", "#f5efe6"], "58% 46%"),
+  codexStylerSkin("styler-quiet-garden", "静谧花园", quietGardenHero, ["#101612", "#364339", "#9fc29a", "#edf2e8"], "52% 50%"),
+]);
+
+interface RendererSkinStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+function documentSkinStorage(ownerDocument: Document): RendererSkinStorage | null {
+  try { return ownerDocument.defaultView?.localStorage ?? null; } catch { return null; }
+}
+
+function isRendererSkinId(value: string | null): value is RendererSkinId {
+  return (RENDERER_SKIN_IDS as readonly string[]).includes(value ?? "");
+}
+
+export function rendererSkinDefinition(id: RendererSkinId): RendererSkinDefinition {
+  return RENDERER_SKINS.find((skin) => skin.id === id) ?? RENDERER_SKINS[0]!;
+}
+
+export function readRendererSkin(storage?: RendererSkinStorage | null): RendererSkinId {
+  try {
+    const stored = storage?.getItem(RENDERER_SKIN_STORAGE_KEY) ?? null;
+    return isRendererSkinId(stored) ? stored : "native";
+  } catch { return "native"; }
+}
+
+export function readActiveRendererSkin(ownerDocument: Document = document): RendererSkinId {
+  const active = ownerDocument.documentElement.getAttribute(RENDERER_SKIN_ATTRIBUTE);
+  return isRendererSkinId(active) ? active : readRendererSkin(documentSkinStorage(ownerDocument));
+}
+
+function skinCss(skin: RendererSkinDefinition): string {
+  const [surface, secondary, accent, text] = skin.palette;
+  const image = skin.heroUrl ? `url("${skin.heroUrl}")` : skin.preview;
+  const sidebarVeil = skin.dark
+    ? `color-mix(in srgb, ${surface} 91%, transparent)`
+    : `color-mix(in srgb, ${surface} 88%, transparent)`;
+  const lowerVeil = skin.dark
+    ? `color-mix(in srgb, ${surface} 68%, transparent)`
+    : `color-mix(in srgb, ${surface} 72%, transparent)`;
+  const panelOpacity = skin.dark ? "84%" : "82%";
+  const secondaryText = `color-mix(in srgb, ${text} 72%, transparent)`;
+  const tertiaryText = `color-mix(in srgb, ${text} 54%, transparent)`;
+  const logoCss = skin.logoUrl ? `
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] .app-shell-left-panel button[aria-haspopup="menu"][aria-label*="ChatGPT"],
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] .app-shell-left-panel button[aria-haspopup="menu"][aria-label*="Codex"] {
+  width: min(214px, calc(100% - 12px)); height: 72px !important; margin: 4px 6px 0;
+  background: url("${skin.logoUrl}") left center / contain no-repeat !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] .app-shell-left-panel button[aria-haspopup="menu"][aria-label*="ChatGPT"] > :where(span, svg),
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] .app-shell-left-panel button[aria-haspopup="menu"][aria-label*="Codex"] > :where(span, svg) { visibility: hidden !important; }
+` : "";
+  const polaroidCss = skin.polaroidUrl ? `
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] body::after {
+  content: ""; position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(72px, 11vh, 108px);
+  width: clamp(108px, 11.5vw, 168px); aspect-ratio: 2 / 3;
+  background: url("${skin.polaroidUrl}") center / contain no-repeat;
+  filter: drop-shadow(0 12px 26px color-mix(in srgb, ${text} 24%, transparent));
+  pointer-events: none; z-index: 15;
+}
+@media (max-width: 760px) {
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] body::after { display: none; }
+}
+` : "";
+  return `
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] {
+  color-scheme: ${skin.dark ? "dark" : "light"};
+  --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};
+  --color-text-primary-soft-alt: ${text}; --color-text-primary-ghost: ${text};
+  --color-text-primary-ghost-hover: ${text}; --color-text-primary-outline: ${text};
+  --color-text-primary-outline-hover: ${text};
+  --color-text-secondary: ${secondaryText}; --color-token-text-secondary: ${secondaryText};
+  --color-text-secondary-soft: ${secondaryText}; --color-text-secondary-soft-alt: ${secondaryText};
+  --color-text-secondary-ghost: ${secondaryText}; --color-text-secondary-ghost-hover: ${text};
+  --color-text-secondary-outline: ${secondaryText}; --color-text-secondary-outline-hover: ${text};
+  --color-text-secondary-solid: ${secondaryText};
+  --color-text-tertiary: ${tertiaryText}; --color-token-text-tertiary: ${tertiaryText};
+  --color-token-description-foreground: ${tertiaryText};
+  --color-token-dropdown-foreground: ${text};
+  --app-color-text-foreground: ${text}; --app-color-text-foreground-secondary: ${secondaryText};
+  --app-color-text-foreground-tertiary: ${tertiaryText};
+  --app-color-foreground-application-menu: ${text};
+  --app-color-text-button-secondary: ${text}; --app-color-text-button-tertiary: ${tertiaryText};
+  --wb-text-primary: ${text}; --wb-text-secondary: ${secondaryText}; --wb-text-tertiary: ${tertiaryText};
+  --color-control-thumb-foreground: ${text};
+  --color-text-mode-toggle-inactive: ${secondaryText};
+  --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);
+  --color-surface-elevated: color-mix(in srgb, ${surface} 96%, transparent);
+  --color-surface-elevated-secondary: color-mix(in srgb, ${surface} 96%, transparent);
+  --color-background-surface: color-mix(in srgb, ${surface} 90%, transparent);
+  --color-background-panel: color-mix(in srgb, ${surface} 94%, transparent);
+  --color-background-callout-surface: color-mix(in srgb, ${surface} 94%, transparent);
+  --color-background-control-opaque: ${surface};
+  --color-background-page-search: color-mix(in srgb, ${surface} 92%, transparent);
+  --color-background-composer-action-bar: color-mix(in srgb, ${surface} 88%, transparent);
+  --color-background-execution-output: color-mix(in srgb, ${surface} 88%, transparent);
+  --color-background-primary-soft: color-mix(in srgb, ${surface} 92%, transparent);
+  --color-background-primary-soft-alpha: color-mix(in srgb, ${surface} 88%, transparent);
+  --color-background-primary-soft-hover: color-mix(in srgb, ${surface} 80%, ${accent});
+  --color-background-primary-soft-active: color-mix(in srgb, ${surface} 72%, ${accent});
+  --color-background-primary-ghost-hover: color-mix(in srgb, ${text} 8%, transparent);
+  --color-background-secondary-soft: color-mix(in srgb, ${text} 7%, transparent);
+  --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-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);
+  --color-border-strong: color-mix(in srgb, ${text} 20%, transparent);
+  --color-token-main-surface-primary: color-mix(in srgb, ${surface} 92%, transparent);
+  --color-token-dropdown-background: color-mix(in srgb, ${surface} 96%, transparent);
+  --color-token-list-hover-background: color-mix(in srgb, ${text} 8%, transparent);
+  --color-token-border: color-mix(in srgb, ${text} 16%, transparent);
+  --color-token-border-default: color-mix(in srgb, ${text} 16%, transparent);
+  --color-token-border-light: color-mix(in srgb, ${text} 9%, transparent);
+  --color-token-border-heavy: color-mix(in srgb, ${text} 22%, transparent);
+  --color-token-input-border: color-mix(in srgb, ${text} 20%, transparent);
+  --color-codex-diff-surface: color-mix(in srgb, ${surface} 94%, ${text});
+  --color-token-diff-surface: color-mix(in srgb, ${surface} 94%, ${text});
+  --color-codex-editor-inline-code-background: color-mix(in srgb, ${surface} 92%, transparent);
+  --color-codex-terminal-background: ${surface};
+  --codex-base-surface: ${surface};
+  --app-color-background-surface: color-mix(in srgb, ${surface} 92%, transparent);
+  --app-color-background-surface-under: color-mix(in srgb, ${surface} 88%, transparent);
+  --app-color-background-control: color-mix(in srgb, ${surface} 96%, transparent);
+  --app-color-background-elevated-primary: color-mix(in srgb, ${surface} 96%, transparent);
+  --app-color-background-elevated-primary-opaque: ${surface};
+  --app-color-background-elevated-secondary: color-mix(in srgb, ${surface} 96%, transparent);
+  --app-color-background-elevated-secondary-opaque: ${surface};
+  --app-color-background-editor-opaque: ${surface};
+  --app-color-background-application-menu: color-mix(in srgb, ${surface} 96%, transparent);
+  --app-color-background-button-secondary: color-mix(in srgb, ${text} 7%, transparent);
+  --app-color-background-button-secondary-hover: color-mix(in srgb, ${text} 11%, transparent);
+  --app-color-border: color-mix(in srgb, ${text} 16%, transparent);
+  --app-color-border-light: color-mix(in srgb, ${text} 9%, transparent);
+  --app-color-border-heavy: color-mix(in srgb, ${text} 22%, transparent);
+  --wb-surface-primary: color-mix(in srgb, ${surface} 92%, transparent);
+  --wb-surface-secondary: color-mix(in srgb, ${surface} 88%, transparent);
+  --wb-border: color-mix(in srgb, ${text} 16%, transparent);
+  --wb-border-hover: color-mix(in srgb, ${text} 22%, transparent);
+  --vscode-foreground: ${text}; --vscode-descriptionForeground: ${secondaryText};
+  --vscode-editor-foreground: ${text}; --vscode-input-foreground: ${text};
+  --vscode-editor-background: ${surface}; --vscode-editorPane-background: ${surface};
+  --vscode-input-background: color-mix(in srgb, ${surface} 96%, transparent);
+  --vscode-dropdown-background: color-mix(in srgb, ${surface} 96%, transparent);
+  --vscode-menu-background: color-mix(in srgb, ${surface} 96%, transparent);
+  --vscode-panel-background: color-mix(in srgb, ${surface} 96%, transparent);
+  --vscode-terminal-background: ${surface};
+  --vscode-list-hoverBackground: color-mix(in srgb, ${text} 8%, transparent);
+  --vscode-list-activeSelectionBackground: color-mix(in srgb, ${accent} 24%, transparent);
+  --vscode-list-activeSelectionForeground: ${text};
+  --vscode-list-inactiveSelectionBackground: color-mix(in srgb, ${accent} 16%, transparent);
+  --vscode-list-inactiveSelectionForeground: ${text};
+  --background: color-mix(in srgb, ${surface} ${panelOpacity}, transparent);
+  --foreground: ${text}; --card: color-mix(in srgb, ${surface} 88%, transparent);
+  --card-foreground: ${text}; --popover: color-mix(in srgb, ${surface} 94%, transparent);
+  --popover-foreground: ${text}; --primary: ${accent}; --primary-foreground: ${surface};
+  --secondary: color-mix(in srgb, ${surface} 82%, ${secondary}); --secondary-foreground: ${text};
+  --muted: color-mix(in srgb, ${surface} 88%, ${secondary});
+  --muted-foreground: color-mix(in srgb, ${text} 68%, ${surface});
+  --accent: color-mix(in srgb, ${surface} 74%, ${accent}); --accent-foreground: ${text};
+  --border: color-mix(in srgb, ${text} 16%, transparent); --input: color-mix(in srgb, ${text} 18%, transparent); --ring: ${accent};
+  --sidebar: color-mix(in srgb, ${surface} 88%, transparent); --sidebar-background: color-mix(in srgb, ${surface} 88%, transparent);
+  --sidebar-foreground: ${text}; --sidebar-primary: ${accent}; --sidebar-primary-foreground: ${surface};
+  --sidebar-accent: color-mix(in srgb, ${surface} 74%, ${accent}); --sidebar-accent-foreground: ${text};
+  --sidebar-border: color-mix(in srgb, ${text} 14%, transparent); --sidebar-ring: ${accent};
+  --main-surface-primary: color-mix(in srgb, ${surface} 84%, transparent);
+  --main-surface-secondary: color-mix(in srgb, ${surface} 72%, transparent);
+  --sidebar-surface-primary: color-mix(in srgb, ${surface} 88%, transparent);
+  --sidebar-surface-secondary: color-mix(in srgb, ${surface} 76%, transparent);
+  --message-surface: color-mix(in srgb, ${surface} 82%, transparent);
+  --composer-surface: color-mix(in srgb, ${surface} 88%, transparent);
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] body {
+  color: ${text}; background: ${surface} !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] body > #root {
+  min-height: 100vh; color: ${text} !important;
+  background-color: transparent !important;
+  background-image:
+    linear-gradient(90deg, ${sidebarVeil} 0 22%, transparent 46%),
+    linear-gradient(180deg, transparent 0 43%, ${lowerVeil} 100%),
+    ${image} !important;
+  background-position: left top, left top, ${skin.focus} !important;
+  background-repeat: no-repeat !important;
+  background-size: 100% 100%, 100% 100%, cover !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  .main-surface,
+  .browser-main-surface,
+  [data-app-shell-main-surface="default"],
+  main[class*="_MainContentSurface_"]
+) {
+  background: linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, ${surface} 70%, transparent) 100%) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] .app-shell-left-panel {
+  background: color-mix(in srgb, ${surface} 88%, transparent) !important;
+  border-right-color: color-mix(in srgb, ${accent} 32%, transparent) !important;
+  backdrop-filter: none !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(.bg-background, .bg-sidebar, .bg-card, .bg-token-main-surface-primary, .bg-token-sidebar-surface-primary) {
+  background: color-mix(in srgb, ${surface} ${panelOpacity}, transparent) !important;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(
+  [data-response-annotation-conversation],
+  [data-local-conversation-final-assistant]:not(:has([data-response-annotation-conversation]))
+) {
+  box-sizing: border-box;
+  color: ${text} !important;
+  background: color-mix(in srgb, ${surface} 90%, 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;
+}
+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;
+  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: none !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;
+}
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(.border-border, .border-sidebar-border) { border-color: color-mix(in srgb, ${text} 14%, transparent) !important; }
+html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] [data-codexhost-settings-shell] {
+  --settings-bg: color-mix(in srgb, ${surface} 90%, transparent);
+  --settings-sidebar: color-mix(in srgb, ${surface} 86%, ${secondary});
+  --settings-panel: color-mix(in srgb, ${surface} 90%, transparent);
+  --settings-surface: color-mix(in srgb, ${surface} 82%, ${secondary});
+  --settings-surface-hover: color-mix(in srgb, ${surface} 72%, ${accent});
+  --settings-inset: color-mix(in srgb, ${surface} 92%, ${secondary});
+  --settings-text: ${text}; --settings-muted: color-mix(in srgb, ${text} 68%, ${surface});
+  --settings-subtle: color-mix(in srgb, ${text} 52%, ${surface});
+  --settings-border: color-mix(in srgb, ${text} 14%, transparent); --settings-focus: ${accent};
+  --settings-primary: ${accent}; --settings-primary-hover: color-mix(in srgb, ${accent} 82%, white);
+  --settings-primary-text: ${surface};
+}
+${logoCss}${polaroidCss}
+@media (prefers-reduced-transparency: reduce) {
+  html[${RENDERER_SKIN_ATTRIBUTE}="${skin.id}"] :where(.app-shell-left-panel, [data-response-annotation-conversation], .composer-surface-chrome, [data-user-message-bubble], [data-codex-approval-surface]) {
+    background-color: ${surface} !important;
+  }
+}`;
+}
+
+export function applyRendererSkin(
+  id: RendererSkinId,
+  ownerDocument: Document = document,
+  storage?: RendererSkinStorage | null,
+): RendererSkinId {
+  const resolvedStorage = storage === undefined ? documentSkinStorage(ownerDocument) : storage;
+  const currentStyle = ownerDocument.getElementById(RENDERER_SKIN_STYLE_ID);
+  if (id === "native") {
+    currentStyle?.remove();
+    ownerDocument.documentElement.removeAttribute(RENDERER_SKIN_ATTRIBUTE);
+    try { resolvedStorage?.removeItem(RENDERER_SKIN_STORAGE_KEY); } catch { /* visual reset succeeded */ }
+    return id;
+  }
+  const skin = rendererSkinDefinition(id);
+  const style = currentStyle ?? ownerDocument.createElement("style");
+  style.id = RENDERER_SKIN_STYLE_ID;
+  style.textContent = skinCss(skin);
+  if (!currentStyle) ownerDocument.head.append(style);
+  ownerDocument.documentElement.setAttribute(RENDERER_SKIN_ATTRIBUTE, id);
+  try { resolvedStorage?.setItem(RENDERER_SKIN_STORAGE_KEY, id); } catch { /* session-only fallback */ }
+  return id;
+}
+
+export function restoreRendererSkin(ownerWindow: Window = window): RendererSkinId {
+  const storage = documentSkinStorage(ownerWindow.document);
+  const id = readRendererSkin(storage);
+  if (id === "native") return id;
+  return applyRendererSkin(id, ownerWindow.document, storage);
+}

package/src/native-ui/renderer-extension/src/versioned-renderer-adapter.ts

@@ -156,6 +156,7 @@ function transportModelIdForAgent(agent: RendererAgent): string | null {
   if (agent === "zcode") return encodeHarnessPluginRoute({ harnessId: harnessIdSchema.parse("zcode") });
   if (agent === "trae") return encodeHarnessPluginRoute({ harnessId: harnessIdSchema.parse("trae") });
   if (agent === "cursor-cli") return encodeHarnessPluginRoute({ harnessId: harnessIdSchema.parse("cursor-cli") });
+  if (agent === "cline") return encodeHarnessPluginRoute({ harnessId: harnessIdSchema.parse("cline") });
   if (agent === 'codex-harness') return encodeHarnessPluginRoute({ harnessId: harnessIdSchema.parse(agent) });
   return null;
 }
@@ -955,7 +956,7 @@ export function modelSelectionForAgent(
                         ...(thinkingOptionId ? { thinkingOptionId } : {}),
                         ...(permissionModeId ? { permissionModeId } : {}),
                       })
-                    : agent === "openclaw" || agent === "hermes" || agent === 'codex-harness' || agent === 'qoder' || agent === 'codebuddy' || agent === 'zcode' || agent === 'trae' || agent === 'cursor-cli'
+                    : agent === "openclaw" || agent === "hermes" || agent === 'codex-harness' || agent === 'qoder' || agent === 'codebuddy' || agent === 'zcode' || agent === 'trae' || agent === 'cursor-cli' || agent === 'cline'
                       ? encodeHarnessPluginRoute({
                           harnessId: harnessIdSchema.parse(agent),
                           ...(model ? { model } : {}),

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

@@ -75,6 +75,16 @@ describe("Renderer settings localization", () => {
       createDefaultRendererSettingsPages(rendererSettingsMessages("zh-CN")).map(
         ({ label }) => label,
       ),
-    ).toEqual(["连接", "账号", "MCP", "Skills", "会话导入", "存储与验证", "更新", "关于"]);
+    ).toEqual([
+      "连接",
+      "账号",
+      "MCP",
+      "Skills",
+      "会话导入",
+      "存储与验证",
+      "皮肤",
+      "更新",
+      "关于",
+    ]);
   });
 });

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

@@ -27,6 +27,7 @@ describe("Renderer settings foundation", () => {
       "Skills",
       "Session Import",
       "Storage & verification",
+      "Skins",
       "Updates",
       "About",
     ]);
@@ -37,6 +38,7 @@ describe("Renderer settings foundation", () => {
       "session-import",
       "session-import",
       "storage",
+      "palette",
       "updates",
       "about",
     ]);
@@ -73,6 +75,7 @@ describe("Renderer settings foundation", () => {
       "skills",
       "session-import",
       "storage",
+      "skins",
       "updates",
       "about",
     ]);

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

@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  RENDERER_SKIN_ATTRIBUTE,
+  RENDERER_SKIN_STORAGE_KEY,
+  RENDERER_SKIN_STYLE_ID,
+  RENDERER_SKINS,
+  applyRendererSkin,
+  readRendererSkin,
+} from "../../src/settings/skin-runtime.js";
+
+class MemoryStorage {
+  readonly values = new Map<string, string>();
+
+  getItem(key: string): string | null {
+    return this.values.get(key) ?? null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.values.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.values.delete(key);
+  }
+}
+
+function fakeDocument() {
+  const attributes = new Map<string, string>();
+  let style: { id: string; textContent: string; remove(): void } | null = null;
+  const document = {
+    documentElement: {
+      setAttribute(name: string, value: string) {
+        attributes.set(name, value);
+      },
+      removeAttribute(name: string) {
+        attributes.delete(name);
+      },
+    },
+    head: {
+      append(next: typeof style) {
+        style = next;
+      },
+    },
+    getElementById(id: string) {
+      return style?.id === id ? style : null;
+    },
+    createElement() {
+      const element = {
+        id: "",
+        textContent: "",
+        remove() {
+          style = null;
+        },
+      };
+      return element;
+    },
+  } as unknown as Document;
+  return { document, attributes, getStyle: () => style };
+}
+
+describe("renderer skin runtime", () => {
+  it("ships a native escape hatch and visual-only attributed references", () => {
+    expect(RENDERER_SKINS.map(({ id }) => id)).toEqual([
+      "native",
+      "miku-488137",
+      "genshin-dawn",
+      "genshin-night",
+      "wuthering-echo",
+      "wuthering-tide",
+      "naruto-hokage",
+      "naruto-sasuke",
+      "deepspace-dawn",
+      "deepspace-star",
+      "dragonball-nimbus",
+      "dragonball-super-saiyan",
+      "dalao-dianyan",
+      "styler-gilded-grandeur",
+      "styler-merry-big-top",
+      "styler-nocturne-studio",
+      "styler-quiet-garden",
+    ]);
+    expect(RENDERER_SKINS[0]?.sourceUrl).toBeNull();
+    expect(RENDERER_SKINS.slice(1).every(({ sourceUrl }) => sourceUrl?.startsWith("https://github.com/"))).toBe(true);
+    expect(RENDERER_SKINS.slice(1).every(({ heroUrl }) => Boolean(heroUrl))).toBe(true);
+    const miku = RENDERER_SKINS.find(({ id }) => id === "miku-488137");
+    expect(miku?.logoUrl).toContain("logo.webp");
+    expect(miku?.polaroidUrl).toContain("polaroid.webp");
+  });
+
+  it("applies, persists, and fully removes a skin override", () => {
+    const storage = new MemoryStorage();
+    const fixture = fakeDocument();
+
+    applyRendererSkin("miku-488137", fixture.document, storage);
+    expect(fixture.attributes.get(RENDERER_SKIN_ATTRIBUTE)).toBe("miku-488137");
+    expect(fixture.getStyle()?.id).toBe(RENDERER_SKIN_STYLE_ID);
+    expect(fixture.getStyle()?.textContent).toContain("--sidebar-background");
+    expect(fixture.getStyle()?.textContent).not.toContain("<script");
+    expect(fixture.getStyle()?.textContent).toContain("background-image");
+    expect(fixture.getStyle()?.textContent).toContain('main[class*="_MainContentSurface_"]');
+    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).not.toContain("background: transparent !important; border-color: transparent");
+    expect(fixture.getStyle()?.textContent).toContain("--color-text-primary");
+    expect(fixture.getStyle()?.textContent).toContain("--color-token-foreground");
+    expect(fixture.getStyle()?.textContent).toContain("--app-color-text-foreground");
+    expect(fixture.getStyle()?.textContent).toContain("--wb-text-primary");
+    expect(fixture.getStyle()?.textContent).toContain("--color-surface-elevated-secondary");
+    expect(fixture.getStyle()?.textContent).toContain("--color-background-primary-soft-alpha");
+    expect(fixture.getStyle()?.textContent).toContain("--app-color-background-elevated-secondary");
+    expect(fixture.getStyle()?.textContent).toContain("--color-codex-diff-surface");
+    expect(fixture.getStyle()?.textContent).toContain("--vscode-editor-background");
+    expect(fixture.getStyle()?.textContent).toContain("logo.webp");
+    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("hero.webp");
+    expect(storage.getItem(RENDERER_SKIN_STORAGE_KEY)).toBe("miku-488137");
+    expect(readRendererSkin(storage)).toBe("miku-488137");
+
+    applyRendererSkin("native", fixture.document, storage);
+    expect(fixture.attributes.has(RENDERER_SKIN_ATTRIBUTE)).toBe(false);
+    expect(fixture.getStyle()).toBeNull();
+    expect(storage.getItem(RENDERER_SKIN_STORAGE_KEY)).toBeNull();
+  });
+
+  it("falls back to native for stale persisted values", () => {
+    const storage = new MemoryStorage();
+    storage.setItem(RENDERER_SKIN_STORAGE_KEY, "removed-theme");
+    expect(readRendererSkin(storage)).toBe("native");
+  });
+});

package/src/native-ui/shared-contracts/dist/thread-harness-switch.d.ts

@@ -40,6 +40,13 @@ export type ThreadHarnessSwitchParams = z.infer<typeof threadHarnessSwitchParams
 export declare const threadHarnessSwitchResultSchema: z.ZodObject<{
     threadId: z.core.$ZodBranded<z.ZodString, "HostThreadId", "out">;
     checkpointId: z.ZodString;
+    phase: z.ZodOptional<z.ZodEnum<{
+        ready: "ready";
+        "rolled-back": "rolled-back";
+        cancelled: "cancelled";
+    }>>;
+    fromHarnessId: z.ZodOptional<z.ZodString>;
+    toHarnessId: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export type ThreadHarnessSwitchResult = z.infer<typeof threadHarnessSwitchResultSchema>;
 //# sourceMappingURL=thread-harness-switch.d.ts.map

package/src/native-ui/shared-contracts/dist/thread-harness-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thread-harness-switch.d.ts","sourceRoot":"","sources":["../src/thread-harness-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,0BAA0B;;;;;EAA8D,CAAC;AACtG,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAE9E,eAAO,MAAM,4BAA4B;;;;;;kBAQ9B,CAAC;AACZ,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAElF;;;GAGG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;kBAQjC,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,+BAA+B,CAAC,CAAC;AAExF,eAAO,MAAM,+BAA+B;;;kBAKjC,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,+BAA+B,CAAC,CAAC"}
+{"version":3,"file":"thread-harness-switch.d.ts","sourceRoot":"","sources":["../src/thread-harness-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,0BAA0B;;;;;EAA8D,CAAC;AACtG,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAE9E,eAAO,MAAM,4BAA4B;;;;;;kBAQ9B,CAAC;AACZ,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAElF;;;GAGG;AACH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;kBAQjC,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,+BAA+B,CAAC,CAAC;AAExF,eAAO,MAAM,+BAA+B;;;;;;;;;;kBAQjC,CAAC;AAEZ,MAAM,MAAM,yBAAyB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,+BAA+B,CAAC,CAAC"}

package/src/native-ui/shared-contracts/dist/thread-harness-switch.js

@@ -27,6 +27,9 @@ export const threadHarnessSwitchResultSchema = z
     .object({
     threadId: hostThreadIdSchema,
     checkpointId: z.string().min(1),
+    phase: z.enum(["ready", "rolled-back", "cancelled"]).optional(),
+    fromHarnessId: z.string().min(1).optional(),
+    toHarnessId: z.string().min(1).optional(),
 })
     .strict();
 //# sourceMappingURL=thread-harness-switch.js.map

package/src/native-ui/shared-contracts/dist/thread-harness-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"thread-harness-switch.js","sourceRoot":"","sources":["../src/thread-harness-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AAGtG,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC;KAC1C,MAAM,CAAC;IACN,YAAY,EAAE,CAAC,CAAC,OAAO,EAAE;IACzB,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE;IACjB,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE;IACrB,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE;IAClB,UAAU,EAAE,CAAC,CAAC,OAAO,EAAE;CACxB,CAAC;KACD,MAAM,EAAE,CAAC;AAGZ;;;GAGG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC;KAC7C,MAAM,CAAC;IACN,QAAQ,EAAE,kBAAkB;IAC5B,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;IACrC,MAAM,EAAE,0BAA0B,CAAC,QAAQ,EAAE;IAC7C,QAAQ,EAAE,4BAA4B,CAAC,QAAQ,EAAE;CAClD,CAAC;KACD,MAAM,EAAE,CAAC;AAIZ,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC;KAC7C,MAAM,CAAC;IACN,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;CAChC,CAAC;KACD,MAAM,EAAE,CAAC"}
+{"version":3,"file":"thread-harness-switch.js","sourceRoot":"","sources":["../src/thread-harness-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AAGtG,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC;KAC1C,MAAM,CAAC;IACN,YAAY,EAAE,CAAC,CAAC,OAAO,EAAE;IACzB,IAAI,EAAE,CAAC,CAAC,OAAO,EAAE;IACjB,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE;IACrB,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE;IAClB,UAAU,EAAE,CAAC,CAAC,OAAO,EAAE;CACxB,CAAC;KACD,MAAM,EAAE,CAAC;AAGZ;;;GAGG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC;KAC7C,MAAM,CAAC;IACN,QAAQ,EAAE,kBAAkB;IAC5B,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;IACrC,MAAM,EAAE,0BAA0B,CAAC,QAAQ,EAAE;IAC7C,QAAQ,EAAE,4BAA4B,CAAC,QAAQ,EAAE;CAClD,CAAC;KACD,MAAM,EAAE,CAAC;AAIZ,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC;KAC7C,MAAM,CAAC;IACN,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,EAAE;IAC/D,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;IAC3C,WAAW,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;CAC1C,CAAC;KACD,MAAM,EAAE,CAAC"}