@harness-mix/cli 0.1.3

package/src/native-ui/renderer-extension/src/renderer-codex-account-options.ts

@@ -0,0 +1,281 @@
+import type { CodexAccountSummary } from "@codexhost/shared-contracts";
+
+import { createRendererAgentIcon } from "./renderer-agent-icon.js";
+
+export interface RendererCodexAccountOptionControl {
+  readonly row: HTMLElement;
+  readonly button: HTMLButtonElement;
+  readonly check: HTMLElement;
+  readonly action: null;
+}
+
+export interface RendererCodexAccountGroupControl {
+  readonly root: HTMLElement;
+  readonly badge: HTMLElement;
+  readonly options: Map<string, RendererCodexAccountOptionControl>;
+  accounts: readonly CodexAccountSummary[];
+  render(input: {
+    readonly accounts: readonly CodexAccountSummary[];
+    readonly selectedAccountId: string | null;
+    readonly disabled: boolean;
+    readonly showBadge: boolean;
+  }): void;
+}
+
+export interface CodexAccountDisplayName {
+  readonly local: string;
+  readonly domain: string | null;
+  readonly full: string;
+}
+
+const ACCOUNT_COLORS = ["#5b38c9", "#239b88", "#ce6724", "#2878c7", "#b34778", "#65752a"] as const;
+
+export function codexAccountDisplayName(account: CodexAccountSummary): CodexAccountDisplayName {
+  const full = account.email ?? account.label;
+  const separator = account.email?.lastIndexOf("@") ?? -1;
+  if (!account.email || separator <= 0 || separator === account.email.length - 1) {
+    return { local: full, domain: null, full };
+  }
+  return {
+    local: account.email.slice(0, separator),
+    domain: account.email.slice(separator + 1),
+    full,
+  };
+}
+
+export function codexAccountPresentationSignature(
+  accounts: readonly CodexAccountSummary[],
+): string {
+  return accounts
+    .map(({ accountId, label, email }) => `${accountId}\u0000${label}\u0000${email ?? ""}`)
+    .join("\u0001");
+}
+
+function accountColor(accountId: string): string {
+  let hash = 0;
+  for (const character of accountId) hash = (hash * 31 + character.charCodeAt(0)) >>> 0;
+  return ACCOUNT_COLORS[hash % ACCOUNT_COLORS.length] ?? ACCOUNT_COLORS[0];
+}
+
+function accountInitial(account: CodexAccountSummary): string {
+  const display = codexAccountDisplayName(account).local.trim();
+  return display.match(/[\p{L}\p{N}]/u)?.[0]?.toUpperCase() ?? "?";
+}
+
+function setInteractiveHighlight(button: HTMLButtonElement): void {
+  const update = (hovered: boolean): void => {
+    const selected = button.getAttribute("aria-checked") === "true";
+    button.style.background =
+      selected || (hovered && !button.disabled)
+        ? `rgba(127, 127, 127, ${selected ? "0.16" : "0.1"})`
+        : "transparent";
+  };
+  button.addEventListener("pointerenter", () => update(true));
+  button.addEventListener("pointerleave", () => update(false));
+  button.addEventListener("focus", () => update(true));
+  button.addEventListener("blur", () => update(false));
+}
+
+export function createRendererCodexAccountGroup(input: {
+  readonly ownerDocument: Document;
+  readonly accountsLabel: string;
+  readonly manageAccountsLabel: string;
+  readonly onSelect: (accountId: string) => void;
+  readonly onManage: () => void;
+}): RendererCodexAccountGroupControl {
+  const { ownerDocument: document } = input;
+  const root = document.createElement("div");
+  root.dataset.codexAccountOptions = "true";
+  root.hidden = true;
+
+  const accountSection = document.createElement("div");
+  accountSection.setAttribute("role", "group");
+  accountSection.setAttribute("aria-label", input.accountsLabel);
+  accountSection.style.position = "relative";
+
+  const header = document.createElement("div");
+  header.style.display = "flex";
+  header.style.alignItems = "center";
+  header.style.gap = "7px";
+  header.style.height = "30px";
+  header.style.padding = "0 34px 0 8px";
+  header.style.color = "inherit";
+  header.style.font = "600 12px/1 system-ui, sans-serif";
+  header.style.opacity = "0.72";
+  header.append(createRendererAgentIcon("codex", 16, document), input.accountsLabel);
+
+  const list = document.createElement("div");
+  list.style.display = "flex";
+  list.style.flexDirection = "column";
+  list.style.gap = "2px";
+  list.style.maxHeight = "132px";
+  list.style.marginBottom = "4px";
+  list.style.paddingLeft = "14px";
+  list.style.overflowY = "auto";
+  list.style.scrollbarWidth = "thin";
+
+  const manage = document.createElement("button");
+  manage.type = "button";
+  manage.setAttribute("role", "menuitem");
+  manage.setAttribute("aria-label", input.manageAccountsLabel);
+  manage.title = input.manageAccountsLabel;
+  manage.textContent = "…";
+  manage.style.position = "absolute";
+  manage.style.top = "3px";
+  manage.style.right = "4px";
+  manage.style.display = "inline-flex";
+  manage.style.alignItems = "center";
+  manage.style.justifyContent = "center";
+  manage.style.width = "24px";
+  manage.style.height = "24px";
+  manage.style.padding = "0";
+  manage.style.color = "inherit";
+  manage.style.background = "transparent";
+  manage.style.border = "0";
+  manage.style.borderRadius = "5px";
+  manage.style.font = "600 16px/1 system-ui, sans-serif";
+  manage.style.opacity = "0.56";
+  manage.style.cursor = "pointer";
+  manage.addEventListener("pointerenter", () => {
+    manage.style.background = "rgba(127, 127, 127, 0.1)";
+    manage.style.opacity = "1";
+  });
+  manage.addEventListener("pointerleave", () => {
+    manage.style.background = "transparent";
+    manage.style.opacity = "0.56";
+  });
+  manage.addEventListener("click", input.onManage);
+
+  accountSection.append(header, list, manage);
+  root.append(accountSection);
+
+  const badge = document.createElement("span");
+  badge.setAttribute("aria-hidden", "true");
+  badge.style.display = "none";
+  badge.style.position = "absolute";
+  badge.style.right = "1px";
+  badge.style.bottom = "0";
+  badge.style.width = "9px";
+  badge.style.height = "9px";
+  badge.style.border = "1.5px solid Canvas";
+  badge.style.borderRadius = "50%";
+  badge.style.pointerEvents = "none";
+
+  const options = new Map<string, RendererCodexAccountOptionControl>();
+  let accounts: readonly CodexAccountSummary[] = [];
+  let presentationSignature = "";
+
+  const rebuild = (nextAccounts: readonly CodexAccountSummary[]): void => {
+    list.replaceChildren();
+    options.clear();
+    for (const account of nextAccounts) {
+      const row = document.createElement("div");
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.codexAccountId = account.accountId;
+      button.setAttribute("role", "menuitemradio");
+      button.style.display = "grid";
+      button.style.gridTemplateColumns = "20px minmax(0, 1fr) 16px";
+      button.style.alignItems = "center";
+      button.style.gap = "7px";
+      button.style.width = "100%";
+      button.style.height = "32px";
+      button.style.padding = "0 7px";
+      button.style.color = "inherit";
+      button.style.background = "transparent";
+      button.style.border = "0";
+      button.style.borderRadius = "5px";
+      button.style.textAlign = "left";
+      button.style.cursor = "pointer";
+      setInteractiveHighlight(button);
+
+      const avatar = document.createElement("span");
+      avatar.textContent = accountInitial(account);
+      avatar.style.display = "inline-flex";
+      avatar.style.alignItems = "center";
+      avatar.style.justifyContent = "center";
+      avatar.style.width = "20px";
+      avatar.style.height = "20px";
+      avatar.style.color = "#fff";
+      avatar.style.background = accountColor(account.accountId);
+      avatar.style.borderRadius = "50%";
+      avatar.style.font = "700 10px/1 system-ui, sans-serif";
+
+      const displayName = codexAccountDisplayName(account);
+      const name = document.createElement("span");
+      name.style.display = "flex";
+      name.style.alignItems = "baseline";
+      name.style.minWidth = "0";
+      name.style.gap = "4px";
+      const local = document.createElement("strong");
+      local.textContent = displayName.local;
+      local.style.minWidth = "0";
+      local.style.overflow = "hidden";
+      local.style.font = "600 13px/1 system-ui, sans-serif";
+      local.style.textOverflow = "ellipsis";
+      local.style.whiteSpace = "nowrap";
+      name.append(local);
+      if (displayName.domain) {
+        const domain = document.createElement("span");
+        domain.textContent = displayName.domain;
+        domain.style.maxWidth = "48%";
+        domain.style.overflow = "hidden";
+        domain.style.flex = "none";
+        domain.style.font = "400 11px/1 system-ui, sans-serif";
+        domain.style.opacity = "0.58";
+        domain.style.textOverflow = "ellipsis";
+        domain.style.whiteSpace = "nowrap";
+        name.append(domain);
+      }
+
+      const check = document.createElement("span");
+      check.textContent = "✓";
+      check.setAttribute("aria-hidden", "true");
+      check.style.width = "16px";
+      check.style.textAlign = "center";
+      check.style.font = "600 14px/1 system-ui, sans-serif";
+      check.style.visibility = "hidden";
+
+      button.title = displayName.full;
+      button.setAttribute("aria-label", `${input.accountsLabel}: ${displayName.full}`);
+      button.append(avatar, name, check);
+      button.addEventListener("click", () => input.onSelect(account.accountId));
+      row.append(button);
+      list.append(row);
+      options.set(account.accountId, { row, button, check, action: null });
+    }
+    presentationSignature = codexAccountPresentationSignature(nextAccounts);
+  };
+
+  const control: RendererCodexAccountGroupControl = {
+    root,
+    badge,
+    options,
+    accounts,
+    render({ accounts: nextAccounts, selectedAccountId, disabled, showBadge }) {
+      const nextSignature = codexAccountPresentationSignature(nextAccounts);
+      if (nextSignature !== presentationSignature) rebuild(nextAccounts);
+      accounts = [...nextAccounts];
+      control.accounts = accounts;
+      root.hidden = accounts.length === 0;
+
+      const selectedAccount = accounts.find(({ accountId }) => accountId === selectedAccountId);
+      badge.style.display = showBadge && selectedAccount ? "block" : "none";
+      if (selectedAccount) badge.style.background = accountColor(selectedAccount.accountId);
+
+      for (const account of accounts) {
+        const option = options.get(account.accountId);
+        if (!option) continue;
+        const selected = account.accountId === selectedAccountId;
+        option.button.disabled = disabled;
+        option.button.setAttribute("aria-checked", String(selected));
+        option.button.setAttribute("aria-pressed", String(selected));
+        option.button.style.background = selected ? "rgba(127, 127, 127, 0.16)" : "transparent";
+        option.button.style.cursor = disabled ? "not-allowed" : "pointer";
+        option.button.style.opacity = disabled && !selected ? "0.5" : "1";
+        option.check.style.visibility = selected ? "visible" : "hidden";
+      }
+    },
+  };
+  return control;
+}

package/src/native-ui/renderer-extension/src/renderer-codex-account-state.ts

@@ -0,0 +1,53 @@
+import type { CodexAccountSummary } from "@codexhost/shared-contracts";
+import type { RendererModelClient } from "./renderer-model-client.js";
+
+export function resolveCodexAccountSelection(
+  accounts: readonly CodexAccountSummary[],
+  overrideAccountId: string | null,
+): {
+  activeAccountId: string | null;
+  overrideAccountId: string | null;
+  selectedAccountId: string | null;
+} {
+  const activeAccountId = accounts.find((account) => account.active)?.accountId ?? null;
+  const validOverrideAccountId = accounts.some((account) => account.accountId === overrideAccountId)
+    ? overrideAccountId
+    : null;
+  return {
+    activeAccountId,
+    overrideAccountId: validOverrideAccountId,
+    selectedAccountId: validOverrideAccountId ?? activeAccountId,
+  };
+}
+
+/** Owned by one Host and one concrete request client, never the active-route facade. */
+export class RendererCodexAccountState {
+  accounts: readonly CodexAccountSummary[] = [];
+  overrideAccountId: string | null = null;
+  switching = false;
+  #request: Promise<void> | null = null;
+
+  constructor(readonly client: RendererModelClient) {}
+
+  get selection(): ReturnType<typeof resolveCodexAccountSelection> {
+    return resolveCodexAccountSelection(this.accounts, this.overrideAccountId);
+  }
+
+  refresh(): Promise<void> {
+    if (this.#request) return this.#request;
+    this.#request = Promise.resolve()
+      .then(() => this.client.listCodexAccounts())
+      .then((result) => {
+        this.accounts = result.accounts;
+        this.overrideAccountId = this.selection.overrideAccountId;
+      })
+      .catch(() => {
+        // Keep only this Host's last known data on transient failures. A Host
+        // without the Account API starts empty and keeps the plain Codex option.
+      })
+      .finally(() => {
+        this.#request = null;
+      });
+    return this.#request;
+  }
+}

package/src/native-ui/renderer-extension/src/renderer-collab-cards.ts

@@ -0,0 +1,198 @@
+import { type HostThreadId, hostThreadIdSchema } from '@codexhost/shared-contracts';
+import { openRendererThread } from './renderer-fork-control.js';
+import { collaborationIcon } from './collaboration-icon.js';
+
+export interface CollabCardPayload {
+  task_id?: string;
+  parent_thread_id?: string;
+  child_thread_id?: string;
+  agent_type?: string;
+  status?: string;
+  display_status?: string;
+  task?: string;
+  result?: string;
+  diff?: string;
+  digest?: string;
+  branch?: string;
+  workspace?: { mode: string; cwd?: string; branch?: string };
+  applied?: boolean;
+}
+
+export interface CollabCardOptions {
+  openThread?: (threadId: HostThreadId) => Promise<void>;
+  reviewWorkspace?: (threadId: string) => Promise<{ patch: string; digest: string; hasConflict?: boolean; conflictingFiles?: string[] }>;
+  applyWorkspace?: (threadId: string, digest?: string) => Promise<{ patch: string; digest: string }>;
+}
+
+export function parseCollabPayload(text: string): CollabCardPayload | null {
+  if (!text || (!text.includes('child_thread_id') && !text.includes('task_id') && !text.includes('Agent 协作'))) {
+    return null;
+  }
+  const match = /\{[\s\S]*?"task_id"[\s\S]*?\}/.exec(text);
+  if (!match) return null;
+  try {
+    const parsed = JSON.parse(match[0]);
+    if (parsed && (parsed.task_id || parsed.child_thread_id)) return parsed as CollabCardPayload;
+  } catch {}
+  return null;
+}
+
+export function formatDiffHtml(diff: string): string {
+  if (!diff) return '<div style="padding:8px;color:#888;font-size:12px">暂无文件改动</div>';
+  const lines = diff.split(/\r?\n/);
+  const rows = lines.map(line => {
+    let bg = 'transparent';
+    let color = 'inherit';
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      bg = '#22c55e1a';
+      color = '#16a34a';
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      bg = '#ef44441a';
+      color = '#dc2626';
+    } else if (line.startsWith('@@')) {
+      bg = '#8888881a';
+      color = '#64748b';
+    }
+    const escaped = line.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return `<div style="background:${bg};color:${color};padding:1px 8px;font-family:ui-monospace,monospace;white-space:pre">${escaped || ' '}</div>`;
+  });
+  return `<div style="font-size:12px;line-height:1.45;max-height:360px;overflow:auto;border-radius:6px;border:1px solid #8883;background:#0001;margin-top:6px">${rows.join('')}</div>`;
+}
+
+export function installCollabCards(options: CollabCardOptions = {}) {
+  if (typeof document === 'undefined') {
+    return { scan: () => {}, dispose: () => {} };
+  }
+  let disposed = false;
+  const enhancedElements = new WeakSet<Element>();
+  const openFn = options.openThread ?? ((threadId: HostThreadId) => openRendererThread(threadId));
+
+  const enhanceElement = (card: HTMLElement, payload: CollabCardPayload) => {
+    if (enhancedElements.has(card)) return;
+    enhancedElements.add(card);
+
+    const strip = document.createElement('div');
+    strip.className = 'harness-mix-collab-actions';
+    strip.style.cssText = 'display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #8882;font:13px system-ui';
+
+    const agent = payload.agent_type || 'agent';
+    const icon = collaborationIcon(agent, agent, 18);
+    strip.append(icon);
+
+    if (payload.child_thread_id) {
+      const childId = payload.child_thread_id;
+      const jumpBtn = document.createElement('button');
+      jumpBtn.type = 'button';
+      jumpBtn.className = 'harness-mix-collab-jump';
+      jumpBtn.style.cssText = 'display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid #8884;background:#8881;color:inherit;font:inherit;cursor:pointer;font-size:12px';
+      jumpBtn.innerHTML = `↗ 查看 <b>@${agent}</b> 会话`;
+      jumpBtn.title = `切换定位至子任务会话 (${childId})`;
+      jumpBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const parsed = hostThreadIdSchema.safeParse(childId);
+        if (parsed.success) {
+          try {
+            await openFn(parsed.data);
+          } catch (err) {
+            console.warn('[CollabCard] Jump to thread failed:', err);
+          }
+        }
+      });
+      strip.append(jumpBtn);
+    }
+
+    if (payload.diff || payload.workspace?.mode === 'worktree') {
+      const diffContainer = document.createElement('div');
+      diffContainer.className = 'harness-mix-collab-diff-wrap';
+      diffContainer.style.cssText = 'width:100%;display:none;margin-top:6px';
+      if (payload.diff) {
+        diffContainer.innerHTML = formatDiffHtml(payload.diff);
+      }
+
+      const toggleDiffBtn = document.createElement('button');
+      toggleDiffBtn.type = 'button';
+      toggleDiffBtn.className = 'harness-mix-collab-diff-toggle';
+      toggleDiffBtn.style.cssText = 'display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid #8884;background:#8881;color:inherit;font:inherit;cursor:pointer;font-size:12px';
+      toggleDiffBtn.textContent = '🔍 查看产物 Diff';
+      toggleDiffBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isHidden = diffContainer.style.display === 'none';
+        if (isHidden && !diffContainer.innerHTML.trim() && payload.child_thread_id && options.reviewWorkspace) {
+          toggleDiffBtn.textContent = '加载 Diff 中…';
+          try {
+            const review = await options.reviewWorkspace(payload.child_thread_id);
+            diffContainer.innerHTML = formatDiffHtml(review.patch);
+          } catch (err: any) {
+            diffContainer.innerHTML = `<div style="padding:8px;color:#ef4444;font-size:12px">加载 Diff 失败: ${err?.message || err}</div>`;
+          }
+        }
+        diffContainer.style.display = isHidden ? 'block' : 'none';
+        toggleDiffBtn.textContent = isHidden ? '收起产物 Diff' : '🔍 查看产物 Diff';
+      });
+      strip.append(toggleDiffBtn);
+      strip.append(diffContainer);
+
+      if (payload.workspace?.mode === 'worktree' && !payload.applied && options.applyWorkspace && payload.child_thread_id) {
+        const applyBtn = document.createElement('button');
+        applyBtn.type = 'button';
+        applyBtn.className = 'harness-mix-collab-apply';
+        applyBtn.style.cssText = 'display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid #16a34a88;background:#16a34a1a;color:#16a34a;font:inherit;cursor:pointer;font-size:12px;font-weight:500';
+        applyBtn.textContent = '✓ 合并改动到主项目';
+        applyBtn.title = '将该子任务的独立隔离分支改动应用到主工作区';
+        applyBtn.addEventListener('click', async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          applyBtn.disabled = true;
+          applyBtn.textContent = '合并中…';
+          try {
+            await options.applyWorkspace!(payload.child_thread_id!, payload.digest);
+            applyBtn.textContent = '✓ 已应用';
+            applyBtn.style.border = '1px solid #8884';
+            applyBtn.style.color = '#888';
+            payload.applied = true;
+          } catch (err: any) {
+            applyBtn.disabled = false;
+            applyBtn.textContent = '合并失败（重试）';
+            alert(`合并失败：${err?.message || err}`);
+          }
+        });
+        strip.append(applyBtn);
+      }
+    }
+
+    card.append(strip);
+  };
+
+  const scan = () => {
+    if (disposed) return;
+    const candidates = document.querySelectorAll<HTMLElement>(
+      '[data-local-conversation-item-target-ids], [data-turn-key], [data-testid*="tool"], .prose, pre'
+    );
+    for (const el of candidates) {
+      if (enhancedElements.has(el)) continue;
+      const text = el.textContent || '';
+      const payload = parseCollabPayload(text);
+      if (payload) {
+        enhanceElement(el, payload);
+      }
+    }
+  };
+
+  const observer = new MutationObserver(() => scan());
+  observer.observe(document.body || document.documentElement, {
+    childList: true,
+    subtree: true,
+  });
+  scan();
+
+  return {
+    scan,
+    dispose() {
+      disposed = true;
+      observer.disconnect();
+      document.querySelectorAll('.harness-mix-collab-actions').forEach(el => el.remove());
+    },
+  };
+}