@harness-mix/cli 0.1.7 → 0.1.9

package/src/native-ui/renderer-extension/src/renderer-harness-handoff.ts

@@ -39,7 +39,7 @@ export function rendererHarnessHandoffMessages(locale: RendererSettingsLocale) {
         includeLabel: "将要交接",
         includeOptions: { conversation: "近期对话", plan: "当前计划", evidence: "测试与工具证据", files: "文件变更", unresolved: "未解决问题" },
         notePlaceholder: "例如：按上面的方案继续实现，先核对当前文件状态和未完成步骤",
-        context: "下一条消息会自动携带近期对话、最新方案、计划和变更文件。",
+        context: "确认后会先连接目标 Harness，失败将自动恢复。下一条消息会携带已选的近期对话、最新方案、计划和变更文件。",
         running: "若当前回合仍在运行，请先停止或等待完成。",
         cancel: "取消",
         confirm: "确认接力",
@@ -54,7 +54,7 @@ export function rendererHarnessHandoffMessages(locale: RendererSettingsLocale) {
         includeLabel: "Include",
         includeOptions: { conversation: "Recent conversation", plan: "Current plan", evidence: "Test and tool evidence", files: "File changes", unresolved: "Open issues" },
         notePlaceholder: "For example: implement the plan above; verify the working tree and remaining steps first",
-        context: "Your next message will include recent context, the latest solution, plan, and changed files.",
+        context: "The target Harness is connected before the switch commits; failures roll back automatically. Your next message carries the selected recent conversation, latest solution, plan, and changed files.",
         running: "If a turn is still running, stop it or wait for it to finish first.",
         cancel: "Cancel",
         confirm: "Hand off",

package/src/native-ui/renderer-extension/src/renderer-harness-mentions.ts

@@ -70,6 +70,7 @@ const AGENT_DESCRIPTIONS: Record<string, string> = {
   trae: 'Trae 原生协同',
   'kiro-cli': 'Kiro CLI 智能编程',
   'cursor-cli': 'Cursor CLI 原生协同',
+  cline: 'Cline 自主编程智能体',
 };
 
 const AGENT_COLORS: Record<string, string> = {
@@ -93,6 +94,7 @@ const AGENT_COLORS: Record<string, string> = {
   zcode: '#4f46e5',
   trae: '#0284c7',
   'cursor-cli': '#475569',
+  cline: '#be185d',
 };
 
 function getAgentColor(agentId: string): string {

package/src/native-ui/renderer-extension/src/renderer-settings-lifecycle.ts

@@ -20,6 +20,7 @@ import {
   installRendererSettingsHeaderTrigger,
   type RendererSettingsHeaderTriggerControl,
 } from "./settings/trigger.js";
+import { restoreRendererSkin } from "./settings/skin-runtime.js";
 
 const UPDATE_CHECK_TIMEOUT_MS = 5_000;
 const UPDATE_RETRY_DELAYS_MS = [1_000, 3_000, 10_000, 30_000] as const;
@@ -45,6 +46,7 @@ export function installRendererSettingsLifecycle(
   ownerWindow: Window = window,
   options: RendererSettingsLifecycleOptions = {},
 ): RendererSettingsLifecycleControl {
+  restoreRendererSkin(ownerWindow);
   const lifecycleController = new AbortController();
   let locale = resolveRendererSettingsLocale(ownerWindow.navigator.languages);
   let shell: RendererSettingsShell | null = null;

package/src/native-ui/renderer-extension/src/renderer-sidebar-agent-icons.ts

@@ -147,6 +147,7 @@ export function rendererAgentForThreadOwnership(
   if (ownership.harnessId === "zcode") return "zcode";
   if (ownership.harnessId === "trae") return "trae";
   if (ownership.harnessId === "cursor-cli") return "cursor-cli";
+  if (ownership.harnessId === "cline") return "cline";
   if (ownership.harnessId === 'codex-harness') return 'codex-harness';
   return null;
 }

package/src/native-ui/renderer-extension/src/settings/connections-page.ts

@@ -31,6 +31,7 @@ export const HARNESS_INSTALL_COMMANDS: Readonly<Partial<Record<ExternalRendererA
   antigravity: { command: "npm install -g @google/antigravity-cli" },
   openclaw: { command: "npm install -g openclaw" },
   hermes: { command: "pip install hermes-agent" },
+  cline: { command: "npm install -g cline" },
   "codex-harness": { command: "npm install -g @openai/codex" },
 });
 
@@ -50,6 +51,7 @@ const HARNESS_INSTALL_URLS: Readonly<Record<ExternalRendererAgent, string>> = Ob
   zcode: "https://zcode.z.ai/",
   trae: "https://www.trae.ai/",
   'cursor-cli': "https://cursor.com/docs/cli/installation",
+  cline: "https://docs.cline.bot/usage/cli-overview",
   'codex-harness': 'https://developers.openai.com/codex/',
 });
 

package/src/native-ui/renderer-extension/src/settings/icons.ts

@@ -33,6 +33,8 @@ import X from "lucide/dist/esm/icons/x.mjs";
 import Users from "lucide/dist/esm/icons/users.mjs";
 import Plus from "lucide/dist/esm/icons/plus.mjs";
 import Database from 'lucide/dist/esm/icons/database.mjs';
+import Palette from "lucide/dist/esm/icons/palette.mjs";
+import ShieldCheck from "lucide/dist/esm/icons/shield-check.mjs";
 import harnessMixLogoUrl from "../../../../assets/brand-harness-mix.png";
 
 export const RENDERER_SETTINGS_ICON_NAMES = [
@@ -69,6 +71,8 @@ export const RENDERER_SETTINGS_ICON_NAMES = [
   "terminal",
   "search",
   "help",
+  "palette",
+  "shield",
   "storage",
 ] as const;
 
@@ -108,6 +112,8 @@ const iconNodes = {
   terminal: Terminal,
   search: Search,
   help: CircleHelp,
+  palette: Palette,
+  shield: ShieldCheck,
   storage: Database,
 } satisfies Record<RendererSettingsIconName, IconNode>;
 

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

@@ -515,7 +515,8 @@ const ENGLISH_MESSAGES: RendererSettingsMessages = Object.freeze({
     skills: 'Skills',
     "session-import": "Session Import",
     storage: "Storage & verification",
-    updates: "Updates",
+    skins: "Skins",
+    updates: "Updates",
     about: "About",
   }),
 });
@@ -773,7 +774,8 @@ const CHINESE_MESSAGES: RendererSettingsMessages = Object.freeze({
     skills: 'Skills',
     "session-import": "会话导入",
     storage: "存储与验证",
-    updates: "更新",
+    skins: "皮肤",
+    updates: "更新",
     about: "关于",
   }),
 });

package/src/native-ui/renderer-extension/src/settings/pages.ts

@@ -31,6 +31,7 @@ import { createMcpSettingsPage, createSkillsSettingsPage } from './integrations-
 import type { RendererIntegrationsClient } from '../renderer-integrations-client.js';
 import { createAccountsSettingsPage, type RendererCodexAccountClient } from "./accounts-page.js";
 import { createStorageSettingsPage, type RendererStorageClient } from './storage-page.js';
+import { createSkinSettingsPage } from "./skin-market.js";
 
 export type {
   RendererConnectionAgentSnapshot,
@@ -79,7 +80,8 @@ export const DEFAULT_RENDERER_SETTINGS_PAGE_IDS = [
   "skills",
   "session-import",
   "storage",
-  "updates",
+  "skins",
+  "updates",
   "about",
 ] as const;
 
@@ -637,7 +639,8 @@ export function createDefaultRendererSettingsPages(
     createSkillsSettingsPage(messages, getIntegrationsClient),
     createSessionImportSettingsPage(messages, getSessionImportClient, openImportedThread),
     createStorageSettingsPage(messages, getStorageClient),
-    updatesPage(messages, getUpdateClient),
+    createSkinSettingsPage(messages),
+    updatesPage(messages, getUpdateClient),
     aboutPage(messages, getUpdateClient),
   ]);
 }

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

@@ -1,5 +1,6 @@
 import settingsCss from "./shell.css";
-import accountsCss from "./accounts.css";
+import accountsCss from "./accounts.css";
+import skinMarketCss from "./skin-market.css";
 import {
   RendererSettingsNavigationState,
   RendererSettingsPageScope,
@@ -68,7 +69,7 @@ export function mountRendererSettingsShell(
   root.style.colorScheme = RENDERER_SETTINGS_COLOR_SCHEME;
   const shadow = root.attachShadow({ mode: "open" });
   const style = ownerDocument.createElement("style");
-  style.textContent = `${settingsCss}\n${accountsCss}`;
+  style.textContent = `${settingsCss}\n${accountsCss}\n${skinMarketCss}`;
 
   const dialog = ownerDocument.createElement("dialog");
   dialog.className = "codexhost-settings-dialog";

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;
+    },
+  });
+}