harness-mix 0.1.0

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

@@ -0,0 +1,456 @@
+import {
+  THREAD_OWNERSHIP_LIST_MAX_LENGTH,
+  hostThreadIdSchema,
+  type ThreadOwnership,
+} from "@codexhost/shared-contracts";
+
+import type { RendererAgent } from "./agent-selection-state.js";
+import { createRendererAgentIcon, RENDERER_AGENT_LABELS } from "./renderer-agent-icon.js";
+import type { RendererModelClient } from "./renderer-model-client.js";
+import { RendererMethodUnavailableError } from "./renderer-request-sender.js";
+
+export const SIDEBAR_THREAD_ROW_ATTRIBUTE = "data-app-action-sidebar-thread-row";
+export const SIDEBAR_THREAD_ROW_SELECTOR = `[${SIDEBAR_THREAD_ROW_ATTRIBUTE}]`;
+export const SIDEBAR_THREAD_ID_ATTRIBUTE = "data-app-action-sidebar-thread-id";
+export const SIDEBAR_THREAD_HOST_ID_ATTRIBUTE = "data-app-action-sidebar-thread-host-id";
+export const SIDEBAR_AGENT_ICON_ATTRIBUTE = "data-codexhost-sidebar-agent-icon";
+
+export interface RendererSidebarContractInspection {
+  rowCount: number;
+  titleOwnerCount: number;
+  resolvedThreadCount: number;
+  ambiguousThreadCount: number;
+}
+
+const OWNERSHIP_RETRY_DELAYS_MS = [100, 300, 800, 1_500, 3_000] as const;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function sidebarThreadAttributes(element: HTMLElement): {
+  taskKey: string;
+  hostId: string;
+  rowMarker: string;
+} | null {
+  const taskKey = element.getAttribute(SIDEBAR_THREAD_ID_ATTRIBUTE);
+  const hostId = element.getAttribute(SIDEBAR_THREAD_HOST_ID_ATTRIBUTE);
+  const rowMarker = element.getAttribute(SIDEBAR_THREAD_ROW_ATTRIBUTE);
+  if (taskKey === null || hostId === null || rowMarker === null) return null;
+  return { taskKey, hostId, rowMarker };
+}
+
+export function draftIdFromSidebarRowElement(element: HTMLElement): string | null {
+  const attributes = sidebarThreadAttributes(element);
+  if (!attributes) return null;
+  const hostPrefix = `${attributes.hostId}:`;
+  const taskKey = attributes.taskKey.startsWith(hostPrefix)
+    ? attributes.taskKey.slice(hostPrefix.length)
+    : attributes.taskKey;
+  return taskKey.startsWith("client-new-thread:") ? taskKey : null;
+}
+
+export function threadIdFromSidebarRowElement(element: HTMLElement): string | null {
+  const attributes = sidebarThreadAttributes(element);
+  if (!attributes) return null;
+  const { taskKey, hostId, rowMarker } = attributes;
+
+  const fiberNames = Object.getOwnPropertyNames(element).filter((name) =>
+    name.startsWith("__reactFiber$"),
+  );
+  const fiberName = fiberNames[0];
+  if (fiberNames.length !== 1 || !fiberName) return null;
+  const firstFiber = Object.getOwnPropertyDescriptor(element, fiberName)?.value;
+  if (!isRecord(firstFiber)) return null;
+
+  const candidates = new Set<string>();
+  let fiber: Record<string, unknown> | null = firstFiber;
+  for (let depth = 0; fiber && depth < 12; depth += 1) {
+    const props = fiber.memoizedProps;
+    if (isRecord(props) && isRecord(props.dataAttributes)) {
+      const dataAttributes = props.dataAttributes;
+      const threadId = hostThreadIdSchema.safeParse(props.conversationId);
+      if (
+        threadId.success &&
+        dataAttributes[SIDEBAR_THREAD_ROW_ATTRIBUTE] === rowMarker &&
+        dataAttributes[SIDEBAR_THREAD_ID_ATTRIBUTE] === taskKey &&
+        dataAttributes[SIDEBAR_THREAD_HOST_ID_ATTRIBUTE] === hostId
+      ) {
+        candidates.add(threadId.data);
+      }
+    }
+    fiber = isRecord(fiber.return) ? fiber.return : null;
+  }
+  return candidates.size === 1 ? (candidates.values().next().value ?? null) : null;
+}
+
+export function inspectRendererSidebarContract(
+  root: ParentNode = document,
+): RendererSidebarContractInspection {
+  const rows = [...root.querySelectorAll<HTMLElement>(SIDEBAR_THREAD_ROW_SELECTOR)];
+  let titleOwnerCount = 0;
+  let resolvedThreadCount = 0;
+  let ambiguousThreadCount = 0;
+  for (const row of rows) {
+    const titleTrigger = row.querySelector<HTMLElement>("[data-thread-title-trigger]");
+    const title = titleTrigger?.querySelector<HTMLElement>("[data-thread-title]");
+    if (titleTrigger && title) titleOwnerCount += 1;
+    const attributes = sidebarThreadAttributes(row);
+    if (!attributes || attributes.taskKey.startsWith("client-new-thread:")) continue;
+    if (threadIdFromSidebarRowElement(row) === null) ambiguousThreadCount += 1;
+    else resolvedThreadCount += 1;
+  }
+  return {
+    rowCount: rows.length,
+    titleOwnerCount,
+    resolvedThreadCount,
+    ambiguousThreadCount,
+  };
+}
+
+export interface SidebarAgentIconRow {
+  isConnected(): boolean;
+  hostId(): string | null;
+  threadId(): string | null;
+  draftId(): string | null;
+  render(agent: RendererAgent): void;
+  clear(): void;
+}
+
+export interface SidebarAgentIconDom {
+  rows(): readonly SidebarAgentIconRow[];
+  observe(onChange: () => void): () => void;
+  clear(): void;
+}
+
+export interface RendererSidebarAgentIcons {
+  refresh(): void;
+  dispose(): void;
+}
+
+export function rendererAgentForThreadOwnership(
+  ownership: ThreadOwnership,
+): RendererAgent | null {
+  if (ownership.owner === "codex") return "codex";
+  if (ownership.harnessId === "pi") return "pi";
+  if (ownership.harnessId === "claude-code") return "claude-code";
+  if (ownership.harnessId === "deepseek-harness") return "deepseek-harness";
+  if (ownership.harnessId === "opencode") return "opencode";
+  if (ownership.harnessId === "grok") return "grok";
+  if (ownership.harnessId === "omp") return "omp";
+  if (ownership.harnessId === "antigravity") return "antigravity";
+  if (ownership.harnessId === "kiro-cli") return "kiro-cli";
+  if (ownership.harnessId === "openclaw") return "openclaw";
+  if (ownership.harnessId === "hermes") return "hermes";
+  if (ownership.harnessId === "qoder") return "qoder";
+  if (ownership.harnessId === "workbuddy") return "workbuddy";
+  if (ownership.harnessId === "zcode") return "zcode";
+  if (ownership.harnessId === "trae") return "trae";
+  if (ownership.harnessId === 'codex-harness') return 'codex-harness';
+  return null;
+}
+
+class BrowserSidebarAgentIconRow implements SidebarAgentIconRow {
+  constructor(private readonly element: HTMLElement) {}
+
+  isConnected(): boolean {
+    return this.element.isConnected;
+  }
+
+  hostId(): string | null {
+    return sidebarThreadAttributes(this.element)?.hostId ?? null;
+  }
+
+  threadId(): string | null {
+    return threadIdFromSidebarRowElement(this.element);
+  }
+
+  draftId(): string | null {
+    return draftIdFromSidebarRowElement(this.element);
+  }
+
+  render(agent: RendererAgent): void {
+    const titleTrigger = this.element.querySelector<HTMLElement>("[data-thread-title-trigger]");
+    const title = titleTrigger?.querySelector<HTMLElement>("[data-thread-title]");
+    if (!titleTrigger || !title) {
+      this.clear();
+      return;
+    }
+    const icons = [
+      ...this.element.querySelectorAll<HTMLElement>(`[${SIDEBAR_AGENT_ICON_ATTRIBUTE}]`),
+    ];
+    if (
+      icons.length === 1 &&
+      icons[0]?.parentElement === titleTrigger &&
+      icons[0].getAttribute(SIDEBAR_AGENT_ICON_ATTRIBUTE) === agent
+    ) {
+      return;
+    }
+    this.clear();
+
+    const label = `${RENDERER_AGENT_LABELS[agent]} Agent`;
+    const marker = this.element.ownerDocument.createElement("span");
+    marker.setAttribute(SIDEBAR_AGENT_ICON_ATTRIBUTE, agent);
+    marker.setAttribute("role", "img");
+    marker.setAttribute("aria-label", label);
+    marker.title = label;
+    marker.style.display = "inline-flex";
+    marker.style.alignItems = "center";
+    marker.style.justifyContent = "center";
+    marker.style.width = "14px";
+    marker.style.height = "14px";
+    marker.style.flex = "none";
+    marker.style.pointerEvents = "none";
+    marker.append(createRendererAgentIcon(agent, 14, this.element.ownerDocument));
+    titleTrigger.insertBefore(marker, title);
+  }
+
+  clear(): void {
+    for (const icon of this.element.querySelectorAll(`[${SIDEBAR_AGENT_ICON_ATTRIBUTE}]`)) {
+      icon.remove();
+    }
+  }
+}
+
+class BrowserSidebarAgentIconDom implements SidebarAgentIconDom {
+  readonly #rowsByElement = new WeakMap<HTMLElement, BrowserSidebarAgentIconRow>();
+  readonly #trackedRows = new Set<BrowserSidebarAgentIconRow>();
+
+  constructor(private readonly root: ParentNode & Node) {}
+
+  rows(): readonly SidebarAgentIconRow[] {
+    for (const row of this.#trackedRows) {
+      if (!row.isConnected()) this.#trackedRows.delete(row);
+    }
+    return [...this.root.querySelectorAll<HTMLElement>(SIDEBAR_THREAD_ROW_SELECTOR)].map(
+      (element) => {
+        let row = this.#rowsByElement.get(element);
+        if (!row) {
+          row = new BrowserSidebarAgentIconRow(element);
+          this.#rowsByElement.set(element, row);
+          this.#trackedRows.add(row);
+        }
+        return row;
+      },
+    );
+  }
+
+  observe(onChange: () => void): () => void {
+    const observer = new MutationObserver(onChange);
+    observer.observe(this.root, {
+      attributes: true,
+      attributeFilter: [SIDEBAR_THREAD_ID_ATTRIBUTE, SIDEBAR_THREAD_HOST_ID_ATTRIBUTE],
+      childList: true,
+      subtree: true,
+    });
+    return () => observer.disconnect();
+  }
+
+  clear(): void {
+    for (const row of this.#trackedRows) row.clear();
+    this.#trackedRows.clear();
+  }
+}
+
+export function installRendererSidebarAgentIcons(options: {
+  getClient(hostId: string): RendererModelClient | null;
+  getLocalAgent?(input: {
+    hostId: string;
+    threadId: string | null;
+    draftId: string | null;
+  }): RendererAgent | null;
+  dom?: SidebarAgentIconDom;
+}): RendererSidebarAgentIcons {
+  const dom = options.dom ?? new BrowserSidebarAgentIconDom(document);
+  const ownershipByThread = new Map<string, RendererAgent | null>();
+  const pending = new Set<string>();
+  const failed = new Set<string>();
+  const provisionalCodex = new Set<string>();
+  const stale = new Set<string>();
+  const ownershipRetryAttempts = new Map<string, number>();
+  const ownershipRetryTimers = new Map<string, ReturnType<typeof setTimeout>>();
+  let disposed = false;
+  let scanScheduled = false;
+
+  const ownershipKey = (hostId: string, threadId: string): string =>
+    JSON.stringify([hostId, threadId]);
+
+  const scheduleScan = (): void => {
+    if (disposed || scanScheduled) return;
+    scanScheduled = true;
+    queueMicrotask(scan);
+  };
+
+  const clearOwnershipRetry = (key: string): void => {
+    const timer = ownershipRetryTimers.get(key);
+    if (timer !== undefined) clearTimeout(timer);
+    ownershipRetryTimers.delete(key);
+    ownershipRetryAttempts.delete(key);
+    failed.delete(key);
+    provisionalCodex.delete(key);
+  };
+
+  const scheduleOwnershipRetry = (hostId: string, threadId: string): void => {
+    const key = ownershipKey(hostId, threadId);
+    if (
+      disposed ||
+      (!failed.has(key) && !provisionalCodex.has(key)) ||
+      pending.has(key) ||
+      ownershipRetryTimers.has(key)
+    ) {
+      return;
+    }
+    const attempt = ownershipRetryAttempts.get(key) ?? 0;
+    const delay = OWNERSHIP_RETRY_DELAYS_MS[attempt];
+    if (delay === undefined) return;
+    ownershipRetryAttempts.set(key, attempt + 1);
+    const timer = setTimeout(() => {
+      ownershipRetryTimers.delete(key);
+      if (disposed) return;
+      failed.delete(key);
+      stale.add(key);
+      scheduleScan();
+    }, delay);
+    ownershipRetryTimers.set(key, timer);
+  };
+
+  const requestOwnership = (
+    hostId: string,
+    threadIds: ReturnType<typeof hostThreadIdSchema.parse>[],
+    client: RendererModelClient,
+  ): void => {
+    for (const threadId of threadIds) {
+      const key = ownershipKey(hostId, threadId);
+      pending.add(key);
+      stale.delete(key);
+    }
+    let succeeded = false;
+    let retryable = true;
+    void Promise.resolve()
+      .then(() => client.listThreadOwnership({ threadIds }))
+      .then(({ threads }) => {
+        if (disposed) return;
+        for (const ownership of threads) {
+          const key = ownershipKey(hostId, ownership.threadId);
+          ownershipByThread.set(key, rendererAgentForThreadOwnership(ownership));
+          failed.delete(key);
+          if (ownership.owner === "codex") {
+            provisionalCodex.add(key);
+            scheduleOwnershipRetry(hostId, ownership.threadId);
+          } else {
+            clearOwnershipRetry(key);
+          }
+        }
+        succeeded = true;
+      })
+      .catch((error) => {
+        if (disposed) return;
+        retryable = !(error instanceof RendererMethodUnavailableError);
+        for (const threadId of threadIds) failed.add(ownershipKey(hostId, threadId));
+      })
+      .finally(() => {
+        for (const threadId of threadIds) pending.delete(ownershipKey(hostId, threadId));
+        if (retryable) {
+          for (const threadId of threadIds) scheduleOwnershipRetry(hostId, threadId);
+        }
+        if (succeeded) scheduleScan();
+      });
+  };
+
+  const scan = (): void => {
+    scanScheduled = false;
+    if (disposed) return;
+    const unresolvedByHost = new Map<string, Set<ReturnType<typeof hostThreadIdSchema.parse>>>();
+    for (const row of dom.rows()) {
+      if (!row.isConnected()) {
+        row.clear();
+        continue;
+      }
+      const hostId = row.hostId();
+      if (!hostId) {
+        row.clear();
+        continue;
+      }
+      const threadId = hostThreadIdSchema.safeParse(row.threadId());
+      const localAgent = options.getLocalAgent?.({
+        hostId,
+        threadId: threadId.success ? threadId.data : null,
+        draftId: row.draftId(),
+      });
+      if (localAgent !== null && localAgent !== undefined) {
+        if (threadId.success) {
+          const key = ownershipKey(hostId, threadId.data);
+          ownershipByThread.set(key, localAgent);
+          clearOwnershipRetry(key);
+        }
+        row.render(localAgent);
+        continue;
+      }
+      if (!threadId.success) {
+        row.clear();
+        continue;
+      }
+      const key = ownershipKey(hostId, threadId.data);
+      if (ownershipByThread.has(key)) {
+        const agent = ownershipByThread.get(key);
+        if (agent) row.render(agent);
+        else row.clear();
+        if (!stale.has(key)) continue;
+      }
+      if (!ownershipByThread.has(key)) row.clear();
+      if (!pending.has(key) && !failed.has(key)) {
+        let unresolved = unresolvedByHost.get(hostId);
+        if (!unresolved) {
+          unresolved = new Set();
+          unresolvedByHost.set(hostId, unresolved);
+        }
+        unresolved.add(threadId.data);
+      }
+    }
+    for (const [hostId, unresolved] of unresolvedByHost) {
+      const client = options.getClient(hostId);
+      if (!client) {
+        for (const threadId of unresolved) {
+          const key = ownershipKey(hostId, threadId);
+          failed.add(key);
+          scheduleOwnershipRetry(hostId, threadId);
+        }
+        continue;
+      }
+      const threadIds = [...unresolved];
+      for (let index = 0; index < threadIds.length; index += THREAD_OWNERSHIP_LIST_MAX_LENGTH) {
+        requestOwnership(
+          hostId,
+          threadIds.slice(index, index + THREAD_OWNERSHIP_LIST_MAX_LENGTH),
+          client,
+        );
+      }
+    }
+  };
+
+  const stopObserving = dom.observe(scheduleScan);
+  scan();
+
+  return {
+    refresh() {
+      failed.clear();
+      // Revalidate in the background without tearing down a known icon.
+      for (const key of provisionalCodex) stale.add(key);
+      scheduleScan();
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      stopObserving();
+      dom.clear();
+      ownershipByThread.clear();
+      pending.clear();
+      failed.clear();
+      provisionalCodex.clear();
+      stale.clear();
+      for (const timer of ownershipRetryTimers.values()) clearTimeout(timer);
+      ownershipRetryTimers.clear();
+      ownershipRetryAttempts.clear();
+    },
+  };
+}

package/src/native-ui/renderer-extension/src/renderer-transcript-dom.ts

@@ -0,0 +1,47 @@
+export const TRANSCRIPT_ITEM_SELECTOR = "[data-local-conversation-item-target-ids]";
+export const TRANSCRIPT_ITEM_IDS_ATTRIBUTE = "data-local-conversation-item-target-ids";
+export const TRANSCRIPT_TEXT_BODY_SELECTOR = '[data-testid="exec-shell-body"]';
+
+export interface RendererTranscriptContractInspection {
+  /** Rendered Turn containers, used to tell an empty Thread from a missing contract. */
+  turnCount: number;
+  /** Transcript nodes that publish the Host Item ids they render. */
+  itemNodeCount: number;
+  /** Host Item ids referenced by those nodes. */
+  identifiedItemCount: number;
+  /** Command Execution text bodies, the only transcript surface that retains text. */
+  textBodyCount: number;
+  /** Item nodes that own at least one text body. */
+  textBodyOwnerCount: number;
+}
+
+function itemIdCount(node: Element): number {
+  const value = node.getAttribute(TRANSCRIPT_ITEM_IDS_ATTRIBUTE);
+  if (!value) return 0;
+  return value.split(/\s+/).filter((entry) => entry.length > 0).length;
+}
+
+/**
+ * Codex renders transcript text for the Command Execution lane only, and it is
+ * the lane codexhost projects external Harness Reasoning through. This records
+ * bounded structural counts so a Desktop update that drops the lane, or stops
+ * publishing Item ids, is detected instead of silently hiding projected text.
+ */
+export function inspectRendererTranscriptContract(
+  root: ParentNode = document,
+): RendererTranscriptContractInspection {
+  const itemNodes = [...root.querySelectorAll(TRANSCRIPT_ITEM_SELECTOR)];
+  let identifiedItemCount = 0;
+  let textBodyOwnerCount = 0;
+  for (const node of itemNodes) {
+    identifiedItemCount += itemIdCount(node);
+    if (node.querySelector(TRANSCRIPT_TEXT_BODY_SELECTOR)) textBodyOwnerCount += 1;
+  }
+  return {
+    turnCount: root.querySelectorAll("[data-turn-key]").length,
+    itemNodeCount: itemNodes.length,
+    identifiedItemCount,
+    textBodyCount: root.querySelectorAll(TRANSCRIPT_TEXT_BODY_SELECTOR).length,
+    textBodyOwnerCount,
+  };
+}

package/src/native-ui/renderer-extension/src/renderer-trigger-chip-style.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared, host-independent "chip" chrome for the small trailing-cluster
+ * trigger buttons we own (Model, Permission mode, Credits, Usage).
+ *
+ * These used to borrow Codex's own generated Composer button class names
+ * (copied at runtime from a native button, or a hardcoded snapshot of them
+ * as a fallback) so they would visually blend in. Codex's private class
+ * names — and the design tokens they resolve to — are not a stable contract
+ * and can be renamed or removed between Desktop releases, which silently
+ * strips all chrome (background, padding, hover/disabled states) from these
+ * controls. Defining our own tiny stylesheet instead keeps their look
+ * stable across host updates: the base chip class supplies the pseudo-class
+ * behavior (`:hover`, `:disabled`, `[data-state="open"]`) that inline styles
+ * cannot express, while each control still sets its own inline
+ * height/padding/font-size to size itself.
+ */
+const STYLE_ATTRIBUTE = "data-codexhost-trigger-chip-style";
+export const TRIGGER_CHIP_CLASS = "codexhost-trigger-chip";
+
+export function ensureRendererTriggerChipStyle(ownerDocument: Document): void {
+  if (ownerDocument.querySelector(`style[${STYLE_ATTRIBUTE}]`)) return;
+  const style = ownerDocument.createElement("style");
+  style.setAttribute(STYLE_ATTRIBUTE, "true");
+  style.textContent = `
+    .${TRIGGER_CHIP_CLASS} {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: 0;
+      border-radius: 9999px;
+      background: transparent;
+      color: inherit;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+    .${TRIGGER_CHIP_CLASS}:hover:not(:disabled) {
+      background: rgba(127, 127, 127, 0.08);
+    }
+    .${TRIGGER_CHIP_CLASS}:active:not(:disabled) {
+      background: rgba(127, 127, 127, 0.16);
+    }
+    .${TRIGGER_CHIP_CLASS}[data-state="open"] {
+      background: rgba(127, 127, 127, 0.08);
+    }
+    .${TRIGGER_CHIP_CLASS}:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  `;
+  (ownerDocument.head ?? ownerDocument.documentElement).append(style);
+}