@harness-mix/cli 0.1.8 → 0.1.10

package/src/native-ui/renderer-extension/src/settings/skin-market.css

@@ -0,0 +1,213 @@
+.skin-market__intro {
+  max-width: 680px;
+  margin: -8px 0 18px;
+  color: var(--settings-muted);
+  font-size: 13px;
+}
+
+.skin-safety-note {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  margin: 0 0 22px;
+  padding: 12px 14px;
+  color: var(--settings-muted);
+  background: var(--settings-inset);
+  border: 1px solid var(--settings-border);
+  border-radius: 10px;
+}
+
+.skin-safety-note > span,
+.skin-safety-note strong {
+  display: block;
+}
+
+.skin-safety-note strong {
+  margin-bottom: 2px;
+  color: var(--settings-text);
+  font-weight: 600;
+}
+
+.skin-market-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 13px;
+}
+
+.skin-card {
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+  background: var(--settings-panel);
+  border: 1px solid var(--settings-border);
+  border-radius: 12px;
+}
+
+.skin-card[data-selected] {
+  border-color: color-mix(in srgb, var(--settings-focus) 62%, var(--settings-border));
+  box-shadow: inset 3px 0 0 var(--settings-focus);
+}
+
+.skin-preview {
+  position: relative;
+  height: 128px;
+  overflow: hidden;
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
+}
+
+.skin-preview::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 36%);
+  pointer-events: none;
+}
+
+.skin-preview__dots {
+  position: absolute;
+  top: 11px;
+  left: 12px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 70%);
+  box-shadow: 9px 0 rgb(255 255 255 / 42%), 18px 0 rgb(255 255 255 / 24%);
+}
+
+.skin-preview__sidebar,
+.skin-preview__conversation,
+.skin-preview__composer {
+  position: absolute;
+  background: rgb(5 10 16 / 48%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  backdrop-filter: blur(8px);
+}
+
+.skin-preview__sidebar {
+  inset: 27px auto 10px 10px;
+  width: 26%;
+  border-radius: 6px;
+}
+
+.skin-preview__conversation {
+  inset: 27px 10px 42px 31%;
+  border-radius: 7px;
+}
+
+.skin-preview__conversation::before,
+.skin-preview__conversation::after {
+  content: "";
+  position: absolute;
+  left: 12px;
+  height: 5px;
+  border-radius: 3px;
+  background: rgb(255 255 255 / 48%);
+}
+
+.skin-preview__conversation::before {
+  top: 14px;
+  width: 56%;
+}
+
+.skin-preview__conversation::after {
+  top: 27px;
+  width: 38%;
+  opacity: 0.55;
+}
+
+.skin-preview__composer {
+  right: 10px;
+  bottom: 10px;
+  left: 31%;
+  height: 24px;
+  border-radius: 8px;
+}
+
+.skin-card__body {
+  padding: 14px;
+}
+
+.skin-card__title-row,
+.skin-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.skin-card__title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.skin-card__current {
+  margin-left: auto;
+  color: var(--settings-success);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.skin-card__description {
+  min-height: 38px;
+  margin: 7px 0 13px;
+  color: var(--settings-muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.skin-card__description a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--settings-border);
+  text-underline-offset: 3px;
+}
+
+.skin-card__description a:hover {
+  color: var(--settings-text);
+}
+
+.skin-card__palette {
+  display: flex;
+  align-items: center;
+}
+
+.skin-card__palette i {
+  width: 18px;
+  height: 18px;
+  margin-left: -4px;
+  border: 2px solid var(--settings-panel);
+  border-radius: 50%;
+}
+
+.skin-card__palette i:first-child {
+  margin-left: 0;
+}
+
+.skin-card__apply {
+  margin-left: auto;
+}
+
+.skin-card__apply:disabled {
+  color: var(--settings-muted);
+  background: var(--settings-surface);
+  cursor: default;
+}
+
+@media (max-width: 900px) {
+  .skin-market-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 620px) {
+  .skin-market-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skin-card,
+  .skin-card * {
+    transition: none !important;
+  }
+}

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

@@ -0,0 +1,174 @@
+import type { RendererSettingsMessages } from "./localization.js";
+import type {
+  RendererSettingsPageDefinition,
+  RendererSettingsPageMountContext,
+} from "./core.js";
+import { createRendererSettingsIcon } from "./icons.js";
+import {
+  RENDERER_SKINS,
+  applyRendererSkin,
+  readActiveRendererSkin,
+  type RendererSkinDefinition,
+  type RendererSkinId,
+} from "./skin-runtime.js";
+
+const COPY = {
+  en: {
+    title: "Skins",
+    intro: "Change the atmosphere, not the app. Every skin keeps Codex controls and native Harness behavior intact.",
+    safe: "Visual layer only",
+    safeDetail: "No replacement controls, scripts, credentials, model routes, tools, or permission changes.",
+    selected: "Current skin",
+    apply: "Apply skin",
+    applied: "Applied",
+    native: "The untouched Codex appearance. Select it anytime to remove every Harness Mix skin override.",
+    included: "Bundled theme from",
+    light: "Light",
+    dark: "Dark",
+    attribution: "Open source reference",
+  },
+  "zh-CN": {
+    title: "皮肤",
+    intro: "只换氛围，不换内核。所有皮肤都保留 Codex 原生控件与各 Harness 的真实行为。",
+    safe: "仅视觉层",
+    safeDetail: "不替换控件，不运行主题脚本，不改变凭据、模型路由、工具或权限。",
+    selected: "当前皮肤",
+    apply: "应用皮肤",
+    applied: "已应用",
+    native: "未经修改的 Codex 外观。随时选择它，即可移除 Harness Mix 的全部皮肤覆盖。",
+    included: "内置主题来自",
+    light: "浅色",
+    dark: "深色",
+    attribution: "开源参考项目",
+  },
+} as const;
+
+function previewChrome(document: Document, skin: RendererSkinDefinition): HTMLElement {
+  const preview = document.createElement("div");
+  preview.className = "skin-preview";
+  preview.style.backgroundImage = skin.heroUrl
+    ? `${skin.preview}, url("${skin.heroUrl}")`
+    : skin.preview;
+  preview.style.backgroundPosition = `center, ${skin.focus}`;
+  preview.style.backgroundSize = "cover";
+  preview.setAttribute("aria-hidden", "true");
+  const dots = document.createElement("span");
+  dots.className = "skin-preview__dots";
+  const sidebar = document.createElement("span");
+  sidebar.className = "skin-preview__sidebar";
+  const conversation = document.createElement("span");
+  conversation.className = "skin-preview__conversation";
+  const composer = document.createElement("span");
+  composer.className = "skin-preview__composer";
+  preview.append(dots, sidebar, conversation, composer);
+  return preview;
+}
+
+export function createSkinSettingsPage(
+  messages: RendererSettingsMessages,
+): RendererSettingsPageDefinition {
+  const copy = COPY[messages.locale];
+  return Object.freeze({
+    id: "skins",
+    label: messages.pageLabels.skins,
+    icon: "palette",
+    mount(context: RendererSettingsPageMountContext) {
+      const document = context.content.ownerDocument;
+      const heading = document.createElement("div");
+      heading.className = "settings-section-label";
+      heading.textContent = copy.title;
+      const introduction = document.createElement("p");
+      introduction.className = "skin-market__intro";
+      introduction.textContent = copy.intro;
+      const safety = document.createElement("aside");
+      safety.className = "skin-safety-note";
+      safety.append(createRendererSettingsIcon("shield", 17));
+      const safetyCopy = document.createElement("span");
+      const safetyTitle = document.createElement("strong");
+      safetyTitle.textContent = copy.safe;
+      const safetyDetail = document.createElement("span");
+      safetyDetail.textContent = copy.safeDetail;
+      safetyCopy.append(safetyTitle, safetyDetail);
+      safety.append(safetyCopy);
+
+      const grid = document.createElement("div");
+      grid.className = "skin-market-grid";
+      let selected = readActiveRendererSkin(document);
+      const cards = new Map<RendererSkinId, HTMLElement>();
+
+      const renderSelection = (): void => {
+        for (const [id, card] of cards) {
+          const active = id === selected;
+          card.toggleAttribute("data-selected", active);
+          const button = card.querySelector<HTMLButtonElement>("button[data-skin-action]");
+          if (button) {
+            button.disabled = active;
+            button.textContent = active ? copy.applied : copy.apply;
+          }
+          const badge = card.querySelector<HTMLElement>("[data-skin-current]");
+          if (badge) badge.hidden = !active;
+        }
+      };
+
+      for (const skin of RENDERER_SKINS) {
+        const card = document.createElement("article");
+        card.className = "skin-card";
+        card.dataset.skinId = skin.id;
+        card.append(previewChrome(document, skin));
+        const body = document.createElement("div");
+        body.className = "skin-card__body";
+        const titleRow = document.createElement("div");
+        titleRow.className = "skin-card__title-row";
+        const title = document.createElement("strong");
+        title.className = "skin-card__title";
+        title.textContent = skin.name;
+        const current = document.createElement("span");
+        current.className = "skin-card__current";
+        current.dataset.skinCurrent = "true";
+        current.textContent = copy.selected;
+        titleRow.append(title, current);
+        const description = document.createElement("p");
+        description.className = "skin-card__description";
+        if (skin.sourceUrl) {
+          description.append(`${copy.included} `);
+          const source = document.createElement("a");
+          source.href = skin.sourceUrl;
+          source.target = "_blank";
+          source.rel = "noopener noreferrer";
+          source.textContent = skin.sourceName;
+          source.title = copy.attribution;
+          description.append(source);
+          description.append(` · ${skin.dark ? copy.dark : copy.light}`);
+        } else {
+          description.textContent = copy.native;
+        }
+        const footer = document.createElement("div");
+        footer.className = "skin-card__footer";
+        const palette = document.createElement("span");
+        palette.className = "skin-card__palette";
+        palette.setAttribute("aria-hidden", "true");
+        for (const color of skin.palette) {
+          const swatch = document.createElement("i");
+          swatch.style.backgroundColor = color;
+          palette.append(swatch);
+        }
+        const apply = document.createElement("button");
+        apply.type = "button";
+        apply.className = "settings-command-button skin-card__apply";
+        apply.dataset.skinAction = skin.id;
+        apply.addEventListener("click", () => {
+          selected = applyRendererSkin(skin.id, document);
+          renderSelection();
+        });
+        footer.append(palette, apply);
+        body.append(titleRow, description, footer);
+        card.append(body);
+        cards.set(skin.id, card);
+        grid.append(card);
+      }
+      renderSelection();
+      context.content.append(heading, introduction, safety, grid);
+      return undefined;
+    },
+  });
+}