@harness-mix/cli 0.1.3 → 0.1.5

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

@@ -0,0 +1,330 @@
+import type { ExternalRendererAgent } from "./agent-selection-state.js";
+import type { HarnessHandoffIncludes, HarnessHandoffIntent } from "@codexhost/shared-contracts";
+import { createRendererAgentIcon, RENDERER_AGENT_LABELS } from "./renderer-agent-icon.js";
+import type { RendererSettingsLocale } from "./settings/localization.js";
+
+export const HARNESS_HANDOFF_NOTE_MAX_LENGTH = 2000;
+
+export interface RendererHarnessHandoffRequest {
+  from: ExternalRendererAgent;
+  to: ExternalRendererAgent;
+  note: string;
+  intent: HarnessHandoffIntent;
+  includes: HarnessHandoffIncludes;
+}
+
+export interface RendererHarnessHandoffControl {
+  dialog: HTMLDialogElement;
+  note: HTMLTextAreaElement;
+  intent: HTMLSelectElement;
+  includeInputs: Record<keyof HarnessHandoffIncludes, HTMLInputElement>;
+  confirm: HTMLButtonElement;
+  cancel: HTMLButtonElement;
+  error: HTMLElement;
+  open(from: ExternalRendererAgent, to: ExternalRendererAgent, locale: RendererSettingsLocale): void;
+  close(): void;
+  setSubmitting(submitting: boolean): void;
+  showError(message: string): void;
+  dispose(): void;
+}
+
+export function rendererHarnessHandoffMessages(locale: RendererSettingsLocale) {
+  return locale === "zh-CN"
+    ? {
+        title: "接力当前任务",
+        description: "保留此任务窗口、对话记录和文件现场，只更换继续执行的 Harness。",
+        noteLabel: "交接说明（可选）",
+        intentLabel: "接力方式",
+        intentOptions: { continue: "继续执行", "execute-plan": "执行上一方案", review: "独立审查", reanalyze: "重新分析" },
+        includeLabel: "将要交接",
+        includeOptions: { conversation: "近期对话", plan: "当前计划", evidence: "测试与工具证据", files: "文件变更", unresolved: "未解决问题" },
+        notePlaceholder: "例如：按上面的方案继续实现，先核对当前文件状态和未完成步骤",
+        context: "下一条消息会自动携带近期对话、最新方案、计划和变更文件。",
+        running: "若当前回合仍在运行，请先停止或等待完成。",
+        cancel: "取消",
+        confirm: "确认接力",
+        submitting: "正在切换…",
+      }
+    : {
+        title: "Hand off this task",
+        description: "Keep this task, transcript, and working tree; only change the Harness that continues it.",
+        noteLabel: "Handoff note (optional)",
+        intentLabel: "Handoff mode",
+        intentOptions: { continue: "Continue", "execute-plan": "Execute prior plan", review: "Independent review", reanalyze: "Reanalyze" },
+        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.",
+        running: "If a turn is still running, stop it or wait for it to finish first.",
+        cancel: "Cancel",
+        confirm: "Hand off",
+        submitting: "Switching…",
+      };
+}
+
+function setButtonChrome(button: HTMLButtonElement, primary = false): void {
+  button.style.height = "34px";
+  button.style.padding = "0 14px";
+  button.style.border = primary ? "1px solid color-mix(in srgb, #5b8cff 70%, CanvasText 30%)" : "1px solid color-mix(in srgb, CanvasText 18%, transparent)";
+  button.style.borderRadius = "7px";
+  button.style.background = primary ? "#4f7ff0" : "color-mix(in srgb, Canvas 94%, CanvasText 6%)";
+  button.style.color = primary ? "white" : "CanvasText";
+  button.style.font = "500 13px/1 system-ui, sans-serif";
+  button.style.cursor = "pointer";
+}
+
+export function mountRendererHarnessHandoff(
+  composerId: string,
+  onConfirm: (request: RendererHarnessHandoffRequest) => void,
+): RendererHarnessHandoffControl {
+  const dialog = document.createElement("dialog");
+  dialog.id = `${composerId}-harness-handoff`;
+  dialog.setAttribute("aria-modal", "true");
+  dialog.style.width = "min(440px, calc(100vw - 32px))";
+  dialog.style.boxSizing = "border-box";
+  dialog.style.padding = "0";
+  dialog.style.border = "1px solid color-mix(in srgb, CanvasText 18%, transparent)";
+  dialog.style.borderRadius = "14px";
+  dialog.style.background = "Canvas";
+  dialog.style.color = "CanvasText";
+  dialog.style.boxShadow = "0 24px 70px rgba(0, 0, 0, 0.42)";
+  dialog.style.font = "13px/1.45 system-ui, sans-serif";
+  dialog.style.zIndex = "2147483647";
+
+  const frame = document.createElement("div");
+  frame.style.display = "flex";
+  frame.style.flexDirection = "column";
+  frame.style.gap = "14px";
+  frame.style.padding = "20px";
+
+  const title = document.createElement("h2");
+  title.style.margin = "0";
+  title.style.font = "600 17px/1.25 system-ui, sans-serif";
+  const description = document.createElement("p");
+  description.style.margin = "-6px 0 0";
+  description.style.opacity = "0.72";
+
+  const route = document.createElement("div");
+  route.style.display = "grid";
+  route.style.gridTemplateColumns = "1fr auto 1fr";
+  route.style.alignItems = "center";
+  route.style.gap = "10px";
+  route.style.padding = "12px";
+  route.style.borderRadius = "10px";
+  route.style.background = "color-mix(in srgb, CanvasText 6%, transparent)";
+  const fromBox = document.createElement("div");
+  const toBox = document.createElement("div");
+  for (const box of [fromBox, toBox]) {
+    box.style.display = "flex";
+    box.style.alignItems = "center";
+    box.style.gap = "8px";
+    box.style.minWidth = "0";
+    box.style.fontWeight = "600";
+  }
+  const arrow = document.createElement("span");
+  arrow.textContent = "→";
+  arrow.setAttribute("aria-hidden", "true");
+  arrow.style.opacity = "0.55";
+  route.append(fromBox, arrow, toBox);
+
+  const intentLabel = document.createElement("label");
+  intentLabel.style.display = "flex";
+  intentLabel.style.flexDirection = "column";
+  intentLabel.style.gap = "7px";
+  const intentLabelText = document.createElement("span");
+  intentLabelText.style.fontWeight = "600";
+  const intent = document.createElement("select");
+  intent.style.height = "36px";
+  intent.style.padding = "0 10px";
+  intent.style.border = "1px solid color-mix(in srgb, CanvasText 20%, transparent)";
+  intent.style.borderRadius = "8px";
+  intent.style.background = "Canvas";
+  intent.style.color = "CanvasText";
+  intent.style.font = "13px/1 system-ui, sans-serif";
+  for (const value of ["continue", "execute-plan", "review", "reanalyze"] as const) {
+    const option = document.createElement("option");
+    option.value = value;
+    intent.append(option);
+  }
+  intentLabel.append(intentLabelText, intent);
+
+  const includeSection = document.createElement("fieldset");
+  includeSection.style.margin = "0";
+  includeSection.style.padding = "10px 11px";
+  includeSection.style.border = "1px solid color-mix(in srgb, CanvasText 14%, transparent)";
+  includeSection.style.borderRadius = "8px";
+  const includeLegend = document.createElement("legend");
+  includeLegend.style.padding = "0 5px";
+  includeLegend.style.fontWeight = "600";
+  includeSection.append(includeLegend);
+  const includeGrid = document.createElement("div");
+  includeGrid.style.display = "grid";
+  includeGrid.style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
+  includeGrid.style.gap = "8px 12px";
+  const includeInputs = {} as Record<keyof HarnessHandoffIncludes, HTMLInputElement>;
+  const includeLabels = {} as Record<keyof HarnessHandoffIncludes, Text>;
+  for (const key of ["conversation", "plan", "evidence", "files", "unresolved"] as const) {
+    const row = document.createElement("label");
+    row.style.display = "flex";
+    row.style.alignItems = "center";
+    row.style.gap = "7px";
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.checked = true;
+    const text = document.createTextNode("");
+    row.append(input, text);
+    includeGrid.append(row);
+    includeInputs[key] = input;
+    includeLabels[key] = text;
+  }
+  includeSection.append(includeGrid);
+
+  const label = document.createElement("label");
+  label.style.display = "flex";
+  label.style.flexDirection = "column";
+  label.style.gap = "7px";
+  const labelText = document.createElement("span");
+  labelText.style.fontWeight = "600";
+  const note = document.createElement("textarea");
+  note.rows = 3;
+  note.maxLength = HARNESS_HANDOFF_NOTE_MAX_LENGTH;
+  note.style.boxSizing = "border-box";
+  note.style.width = "100%";
+  note.style.minHeight = "76px";
+  note.style.resize = "vertical";
+  note.style.padding = "10px 11px";
+  note.style.border = "1px solid color-mix(in srgb, CanvasText 20%, transparent)";
+  note.style.borderRadius = "8px";
+  note.style.outline = "none";
+  note.style.background = "color-mix(in srgb, Canvas 96%, CanvasText 4%)";
+  note.style.color = "CanvasText";
+  note.style.font = "13px/1.45 system-ui, sans-serif";
+  label.append(labelText, note);
+
+  const context = document.createElement("p");
+  context.style.margin = "0";
+  context.style.padding = "9px 10px";
+  context.style.borderRadius = "8px";
+  context.style.background = "color-mix(in srgb, #5b8cff 10%, transparent)";
+  const running = document.createElement("p");
+  running.style.margin = "-8px 0 0";
+  running.style.opacity = "0.65";
+
+  const error = document.createElement("p");
+  error.setAttribute("role", "alert");
+  error.hidden = true;
+  error.style.margin = "-8px 0 0";
+  error.style.color = "#ef6666";
+
+  const actions = document.createElement("div");
+  actions.style.display = "flex";
+  actions.style.justifyContent = "flex-end";
+  actions.style.gap = "8px";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  setButtonChrome(cancel);
+  const confirm = document.createElement("button");
+  confirm.type = "button";
+  setButtonChrome(confirm, true);
+  actions.append(cancel, confirm);
+  frame.append(title, description, route, intentLabel, includeSection, label, context, running, error, actions);
+  dialog.append(frame);
+  document.body.append(dialog);
+
+  let from: ExternalRendererAgent = "pi";
+  let to: ExternalRendererAgent = "claude-code";
+  let locale: RendererSettingsLocale = "en";
+  let submitting = false;
+  const render = (): void => {
+    const messages = rendererHarnessHandoffMessages(locale);
+    title.textContent = messages.title;
+    description.textContent = messages.description;
+    labelText.textContent = messages.noteLabel;
+    intentLabelText.textContent = messages.intentLabel;
+    includeLegend.textContent = messages.includeLabel;
+    for (const [value, text] of Object.entries(messages.intentOptions)) {
+      const option = [...intent.options].find(candidate => candidate.value === value);
+      if (option) option.textContent = text;
+    }
+    for (const key of Object.keys(includeInputs) as Array<keyof HarnessHandoffIncludes>) includeLabels[key].data = messages.includeOptions[key];
+    note.placeholder = messages.notePlaceholder;
+    context.textContent = messages.context;
+    running.textContent = messages.running;
+    cancel.textContent = messages.cancel;
+    confirm.textContent = submitting ? messages.submitting : messages.confirm;
+    fromBox.replaceChildren(createRendererAgentIcon(from, 24), document.createTextNode(RENDERER_AGENT_LABELS[from]));
+    toBox.replaceChildren(createRendererAgentIcon(to, 24), document.createTextNode(RENDERER_AGENT_LABELS[to]));
+    note.disabled = submitting;
+    intent.disabled = submitting;
+    includeSection.disabled = submitting;
+    cancel.disabled = submitting;
+    confirm.disabled = submitting;
+    cancel.style.cursor = submitting ? "not-allowed" : "pointer";
+    confirm.style.cursor = submitting ? "wait" : "pointer";
+    confirm.setAttribute("aria-busy", String(submitting));
+  };
+  const close = (): void => {
+    if (submitting) return;
+    if (dialog.open) dialog.close();
+  };
+  cancel.addEventListener("click", close);
+  confirm.addEventListener("click", () => {
+    if (submitting) return;
+    onConfirm({
+      from,
+      to,
+      note: note.value.trim(),
+      intent: intent.value as HarnessHandoffIntent,
+      includes: Object.fromEntries(Object.entries(includeInputs).map(([key, input]) => [key, input.checked])) as unknown as HarnessHandoffIncludes,
+    });
+  });
+  note.addEventListener("keydown", (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter" && !submitting) {
+      event.preventDefault();
+      confirm.click();
+    }
+  });
+  dialog.addEventListener("cancel", (event) => {
+    if (submitting) event.preventDefault();
+  });
+
+  const control: RendererHarnessHandoffControl = {
+    dialog,
+    note,
+    intent,
+    includeInputs,
+    confirm,
+    cancel,
+    error,
+    open(nextFrom, nextTo, nextLocale) {
+      from = nextFrom;
+      to = nextTo;
+      locale = nextLocale;
+      submitting = false;
+      note.value = "";
+      intent.value = "continue";
+      for (const input of Object.values(includeInputs)) input.checked = true;
+      error.hidden = true;
+      error.textContent = "";
+      render();
+      if (!dialog.open) dialog.showModal();
+      queueMicrotask(() => note.focus());
+    },
+    close,
+    setSubmitting(nextSubmitting) {
+      submitting = nextSubmitting;
+      render();
+    },
+    showError(message) {
+      error.textContent = message;
+      error.hidden = false;
+    },
+    dispose() {
+      submitting = false;
+      if (dialog.open) dialog.close();
+      dialog.remove();
+    },
+  };
+  render();
+  return control;
+}

package/src/native-ui/renderer-extension/src/renderer-integrations-client.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+
+const serverSchema = z.object({ id: z.string(), name: z.string(), command: z.string(), args: z.array(z.string()), enabled: z.boolean(), scope: z.enum(['global', 'project']), editable: z.boolean(), effective: z.boolean(), appliedSessions: z.number() });
+const skillSchema = z.object({ name: z.string(), path: z.string(), root: z.string(), enabled: z.boolean(), writable: z.boolean(), scope: z.enum(['global', 'project']), status: z.string() });
+const snapshotSchema = z.object({ harnessId: z.string(), mcpSupported: z.boolean(), skillsSupported: z.boolean(), servers: z.array(serverSchema), native: z.array(z.object({ sessionId: z.string(), name: z.string(), status: z.string(), tools: z.array(z.string()) })), skills: z.array(skillSchema), note: z.string() });
+const catalogSchema = z.object({ harnesses: z.array(z.object({ id: z.string(), name: z.string(), available: z.boolean(), mcp: z.boolean(), skills: z.boolean() })) });
+export type IntegrationSnapshot = z.infer<typeof snapshotSchema>;
+export interface IntegrationScope { harnessId: string; scope: 'global' | 'project'; cwd?: string }
+export interface ManagedServer { name: string; command: string; args: string[]; enabled: boolean }
+export interface SkillChange { name: string; root?: string; source?: string; action: 'install' | 'enable' | 'disable' }
+export interface RendererIntegrationsClient {
+  integrationCatalog(): Promise<z.infer<typeof catalogSchema>>;
+  listIntegrations(input: IntegrationScope): Promise<IntegrationSnapshot>;
+  saveMcp(input: IntegrationScope & { server: ManagedServer }): Promise<unknown>;
+  removeMcp(input: IntegrationScope & { id: string }): Promise<unknown>;
+  changeSkill(input: IntegrationScope & SkillChange): Promise<unknown>;
+}
+export function createRendererIntegrationsClient(send: (method: string, params: unknown) => Promise<unknown>): RendererIntegrationsClient {
+  return {
+    integrationCatalog: async () => catalogSchema.parse(await send('codexhost/integrations/catalog', {})),
+    listIntegrations: async input => snapshotSchema.parse(await send('codexhost/integrations/list', input)),
+    saveMcp: input => send('codexhost/integrations/mcp/save', input),
+    removeMcp: input => send('codexhost/integrations/mcp/remove', input),
+    changeSkill: input => send('codexhost/integrations/skill/change', input),
+  };
+}

package/src/native-ui/renderer-extension/src/renderer-model-client.ts

@@ -1,3 +1,4 @@
+import { createRendererIntegrationsClient, type RendererIntegrationsClient } from './renderer-integrations-client.js';
 import {
   harnessAccountListResultSchema,
   type HarnessAccountListResult,
@@ -127,6 +128,7 @@ export const THREAD_TOKEN_USAGE_UPDATED_METHOD = "thread/tokenUsage/updated";
 export const UPDATE_CHECK_METHOD = "codexhost/update/check";
 export const UPDATE_START_METHOD = "codexhost/update/start";
 export const UPDATE_STATUS_METHOD = "codexhost/update/status";
+export const RUNTIME_VERSION_METHOD = "harness-mix/runtime/version";
 export const CODEX_ACCOUNT_LIST_METHOD = "codexhost/account/list";
 export const CODEX_ACCOUNT_REFRESH_METHOD = "codexhost/account/refresh";
 export const CODEX_ACCOUNT_CREATE_METHOD = "codexhost/account/create";
@@ -171,7 +173,7 @@ function notificationTarget(manager: RequestManagerCandidate): RequestManagerCan
   return nested && typeof nested.addNotificationCallback === "function" ? nested : null;
 }
 
-export interface RendererModelClient extends Partial<RendererSessionImportClient> {
+export interface RendererModelClient extends Partial<RendererSessionImportClient>, Partial<RendererIntegrationsClient> {
   listCollaborationAgents?(): Promise<Array<{ id: string; name: string; available: boolean; lead: boolean }>>;
   currentHostId?(): string | null;
   listHarnessPlugins?(): Promise<HarnessPluginListResult>;
@@ -197,6 +199,7 @@ export interface RendererModelClient extends Partial<RendererSessionImportClient
   checkUpdate(): Promise<UpdateCheckResult>;
   startUpdate(): Promise<UpdateStartResult>;
   readUpdateStatus(): Promise<UpdateStatusResult>;
+  readCurrentVersion?(): Promise<{ version: string }>;
   inspectCodexAccountUsage?(input: CodexAccountUsageParams): Promise<CodexAccountUsageResult>;
   consumeCodexAccountResetCredit?(
     input: CodexAccountResetCreditConsumeParams,
@@ -213,6 +216,7 @@ export interface RendererModelClient extends Partial<RendererSessionImportClient
   cancelCodexAccountLogin(
     input: CodexAccountLoginCancelParams,
   ): Promise<CodexAccountLoginCancelResult>;
+  logoutCodexAccount?(): Promise<CodexAccountMutationResult>;
   subscribeCodexAccountLogin(listener: (result: CodexAccountLoginCompleted) => void): () => void;
 }
 
@@ -331,6 +335,7 @@ export function createRendererModelClient(
       if (!Array.isArray(result) || !result.every(a => a && typeof a.id === 'string' && typeof a.name === 'string' && typeof a.available === 'boolean' && typeof a.lead === 'boolean')) throw new Error('Invalid collaboration catalog');
       return result;
     },
+    ...createRendererIntegrationsClient((method, params) => manager.sendRequest(method, params)),
     ...createRendererSessionImportClient(async (method, params) =>
       manager.sendRequest(method, params),
     ),
@@ -477,6 +482,13 @@ export function createRendererModelClient(
       );
       return updateStatusResultSchema.parse(result);
     },
+    async readCurrentVersion(): Promise<{ version: string }> {
+      const result = await manager.sendRequest(RUNTIME_VERSION_METHOD, {});
+      if (!isRecord(result) || typeof result.version !== "string" || !result.version.trim()) {
+        throw new Error("Invalid Harness Mix version response");
+      }
+      return { version: result.version.trim() };
+    },
     async inspectCodexAccountUsage(
       input: CodexAccountUsageParams,
     ): Promise<CodexAccountUsageResult> {
@@ -549,6 +561,10 @@ export function createRendererModelClient(
       );
       return codexAccountLoginCancelResultSchema.parse(result);
     },
+    async logoutCodexAccount(): Promise<CodexAccountMutationResult> {
+      const result = await manager.sendRequest("codexhost/account/logout", {});
+      return codexAccountMutationResultSchema.parse(result);
+    },
     subscribeCodexAccountLogin(listener: (result: CodexAccountLoginCompleted) => void): () => void {
       const notifications = notificationTarget(source);
       if (!notifications?.addNotificationCallback) {

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

@@ -24,6 +24,7 @@ const UPDATE_CHECK_TIMEOUT_MS = 5_000;
 const UPDATE_RETRY_DELAYS_MS = [1_000, 3_000, 10_000, 30_000] as const;
 
 export interface RendererSettingsLifecycleOptions {
+  getIntegrationsClient?(): import('./renderer-integrations-client.js').RendererIntegrationsClient | null;
   getUpdateClient?(): RendererUpdateClient | null;
   getConnectionDiagnostics?(): RendererConnectionDiagnostics | null;
   getAccountClient?(): RendererCodexAccountClient | null;
@@ -74,6 +75,7 @@ export function installRendererSettingsLifecycle(
         await options.openImportedThread(threadId, signal);
         if (!disposed && !signal.aborted) shell?.close();
       },
+      options.getIntegrationsClient,
     );
     const nextShell = installRendererSettingsShell(definitions, messages, ownerWindow.document);
     const nextTrigger = installRendererSettingsHeaderTrigger({

package/src/native-ui/renderer-extension/src/settings/accounts-list.ts

@@ -12,6 +12,10 @@ import type { RendererSettingsMessages } from "./localization.js";
 
 let resetDetailsSequence = 0;
 
+export function isCodexAccountAuthenticated(account: CodexAccountSummary): boolean {
+  return account.authenticated ?? Boolean(account.email);
+}
+
 function accountPlanLabel(planType: CodexAccountSummary["planType"]): string | null {
   if (!planType || planType === "unknown") return null;
   if (planType === "free") return "Free";
@@ -90,6 +94,7 @@ export function renderAccountRows(
     resetExpanded: boolean;
     onActivate: () => void;
     onSignIn: () => void;
+    onSignOut?: () => void;
     onDelete: () => void;
     onRetry: () => void;
     onUseReset?: () => void;
@@ -176,7 +181,7 @@ export function renderAccountRows(
     activate.addEventListener("click", input.onActivate);
     actions.append(activate);
   }
-  if (!account.email) {
+  if (!isCodexAccountAuthenticated(account)) {
     const signIn = document.createElement("button");
     signIn.type = "button";
     signIn.className = "settings-account-action";
@@ -186,6 +191,16 @@ export function renderAccountRows(
     signIn.addEventListener("click", input.onSignIn);
     actions.append(signIn);
   }
+  if (account.management === "native" && isCodexAccountAuthenticated(account) && input.onSignOut) {
+    const signOut = document.createElement("button");
+    signOut.type = "button";
+    signOut.className = "settings-account-action";
+    signOut.textContent = messages.accountSignOut;
+    signOut.dataset.accountFocus = `${account.accountId}:logout`;
+    signOut.disabled = input.actionsDisabled;
+    signOut.addEventListener("click", input.onSignOut);
+    actions.append(signOut);
+  }
   // isDefault protects the native Account home; active selects the Account for
   // new tasks. Preserve these distinct Host semantics when exposing deletion.
   if (!account.isDefault) {

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

@@ -20,6 +20,7 @@ import type {
 import {
   accountListFocusRestorer,
   createAccountsTable,
+  isCodexAccountAuthenticated,
   renderAccountRows,
 } from "./accounts-list.js";
 import { mountHarnessAccounts, type RendererHarnessAccountClient } from "./harness-accounts.js";
@@ -44,6 +45,7 @@ export interface RendererCodexAccountClient extends RendererHarnessAccountClient
   cancelCodexAccountLogin(
     input: CodexAccountLoginCancelParams,
   ): Promise<CodexAccountLoginCancelResult>;
+  logoutCodexAccount?(): Promise<CodexAccountMutationResult>;
   subscribeCodexAccountLogin?(listener: (result: CodexAccountLoginCompleted) => void): () => void;
 }
 
@@ -224,13 +226,13 @@ export function createAccountsSettingsPage(
         const restoreFocus = accountListFocusRestorer(list, search);
         body.replaceChildren();
         status.textContent = loginMessage ?? "";
-        connectedCount.textContent = String(accounts.filter((account) => account.email).length);
+        connectedCount.textContent = String(accounts.filter(isCodexAccountAuthenticated).length);
         search.disabled = login !== null || loginStartingAccountId !== null;
         for (const [display, button] of displayButtons) {
           button.setAttribute("aria-pressed", String(display === usageDisplay));
         }
         refreshUsage.disabled =
-          ((!getClient()?.inspectCodexAccountUsage || !accounts.some((account) => account.email)) &&
+          ((!getClient()?.inspectCodexAccountUsage || !accounts.some(isCodexAccountAuthenticated)) &&
             !getClient()?.listHarnessAccounts) ||
           harnessAccounts?.refreshing === true ||
           [...usageByAccountId.values()].some((usage) => usage.status === "loading") ||
@@ -249,6 +251,9 @@ export function createAccountsSettingsPage(
           emptyRow.append(emptyCell);
           body.append(emptyRow);
         }
+        // The stock Codex account remains protected, while additional Accounts
+        // are native Codex profiles isolated by CODEX_HOME.
+        add.hidden = false;
         add.disabled = accountBusy();
         for (const account of visibleAccounts) {
           body.append(
@@ -262,6 +267,9 @@ export function createAccountsSettingsPage(
               onActivate: () =>
                 mutate(() => client().activateCodexAccount({ accountId: account.accountId })),
               onSignIn: () => startLogin(account.accountId),
+              ...(account.management === "native" && getClient()?.logoutCodexAccount
+                ? { onSignOut: () => signOut() }
+                : {}),
               onDelete: () => deleteAccount(account.accountId),
               onRetry: () => {
                 usageByAccountId.delete(account.accountId);
@@ -341,7 +349,7 @@ export function createAccountsSettingsPage(
       };
       const loadUsage = (nextAccounts: readonly CodexAccountSummary[]): void => {
         const inspect = getClient()?.inspectCodexAccountUsage;
-        const signedIn = nextAccounts.filter((account) => account.email);
+        const signedIn = nextAccounts.filter(isCodexAccountAuthenticated);
         const keep = new Set(signedIn.map((account) => account.accountId));
         for (const accountId of [...usageByAccountId.keys()]) {
           if (!keep.has(accountId)) usageByAccountId.delete(accountId);
@@ -455,6 +463,27 @@ export function createAccountsSettingsPage(
           },
         });
       };
+      const signOut = (): void => {
+        const logout = getClient()?.logoutCodexAccount;
+        if (!logout || accountBusy()) return;
+        if (document.defaultView?.confirm?.(messages.accountSignOutConfirm) === false) return;
+        accountActivating = true;
+        loginMessage = messages.accountSigningOut;
+        render();
+        void context.runLatest(() => logout(), {
+          success(result) {
+            accountActivating = false;
+            loginMessage = messages.accountSignedOut;
+            usageByAccountId.clear();
+            setAccounts([result.account]);
+          },
+          failure(error) {
+            accountActivating = false;
+            loginMessage = errorMessage(error, messages.accountSignOutFailed);
+            render();
+          },
+        });
+      };
       const createAndLogin = (): void => {
         if (accountBusy()) return;
         accountCreating = true;