harness-mix 0.1.2 → 0.1.3

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

package/src/native-ui/renderer-extension/src/renderer-credits-control.ts

@@ -114,13 +114,20 @@ function productLabel(product: string, locale: RendererSettingsLocale): string {
   if (product === "GrokImagine") return "Imagine";
   if (product === "GrokVoice") return "Voice";
   const messages = rendererCreditsMessages(locale);
-  if (product === "5-hour window") return messages.fiveHour;
-  if (product === "7-day window") return messages.sevenDay;
-  if (product.endsWith(" · 5-hour window")) {
-    return `${product.slice(0, -"5-hour window".length)}${messages.fiveHour}`;
+  if (product === "5-hour window" || product === "5h window") return messages.fiveHour;
+  if (product === "7-day window" || product === "7d window") return messages.sevenDay;
+  if (product === "Weekly window" || product === "weekly window") return messages.weekly;
+  if (product.endsWith(" · 5-hour window") || product.endsWith(" · 5h window")) {
+    const prefix = product.replace(/ · 5(-hour|h) window$/i, "");
+    return `${prefix} · ${messages.fiveHour}`;
   }
-  if (product.endsWith(" · 7-day window")) {
-    return `${product.slice(0, -"7-day window".length)}${messages.sevenDay}`;
+  if (product.endsWith(" · 7-day window") || product.endsWith(" · 7d window")) {
+    const prefix = product.replace(/ · 7(-day|d) window$/i, "");
+    return `${prefix} · ${messages.sevenDay}`;
+  }
+  if (product.endsWith(" · Weekly window") || product.endsWith(" · weekly window")) {
+    const prefix = product.replace(/ · (weekly|Weekly) window$/i, "");
+    return `${prefix} · ${messages.weekly}`;
   }
   return product;
 }
@@ -140,7 +147,7 @@ function renderCreditsBar(usagePercent: number, color: string): HTMLDivElement {
   track.dataset.codexhostCreditsBar = "";
   track.style.height = "6px";
   track.style.borderRadius = "9999px";
-  track.style.background = "color-mix(in srgb, currentColor 16%, transparent)";
+  track.style.background = "color-mix(in srgb, currentColor 12%, transparent)";
   track.style.overflow = "hidden";
   const fill = document.createElement("span");
   fill.style.display = "block";
@@ -148,6 +155,7 @@ function renderCreditsBar(usagePercent: number, color: string): HTMLDivElement {
   fill.style.borderRadius = "9999px";
   fill.style.width = `${Math.min(100, Math.max(0, usagePercent))}%`;
   fill.style.background = color;
+  fill.style.transition = "width 0.25s ease";
   track.append(fill);
   return track;
 }
@@ -167,21 +175,25 @@ function renderCreditsHeader(
   messages: RendererCreditsMessages,
 ): HTMLDivElement {
   const wrapper = document.createElement("div");
-  wrapper.style.marginBottom = "11px";
+  wrapper.style.marginBottom = "10px";
+  wrapper.style.padding = "8px 10px";
+  wrapper.style.borderRadius = "10px";
+  wrapper.style.background = "color-mix(in srgb, currentColor 5%, transparent)";
+  wrapper.style.border = "1px solid color-mix(in srgb, currentColor 7%, transparent)";
 
   const top = document.createElement("div");
   top.style.display = "flex";
   top.style.alignItems = "flex-start";
   top.style.justifyContent = "space-between";
   top.style.gap = "12px";
-  top.style.marginBottom = "5px";
+  top.style.marginBottom = "6px";
 
   // Same left-label / right-percent column order as each tile below, so the
   // reset line always lands under its own label instead of zig-zagging sides.
   const left = document.createElement("div");
   const label = document.createElement("div");
   label.textContent = creditsPeriodLabel(credits.periodType, locale);
-  label.style.fontSize = "12.5px";
+  label.style.fontSize = "13px";
   label.style.fontWeight = "600";
   left.append(label);
   if (credits.resetsAt) {
@@ -189,6 +201,7 @@ function renderCreditsHeader(
     reset.textContent = resetLabel(credits.resetsAt, locale, messages);
     reset.style.fontSize = "11px";
     reset.style.color = "color-mix(in srgb, currentColor 62%, transparent)";
+    reset.style.marginTop = "2px";
     left.append(reset);
   }
 
@@ -207,7 +220,7 @@ function renderCreditsHeader(
   remainingLabel.style.opacity = "0.8";
   const remainingValue = document.createElement("span");
   remainingValue.textContent = formatRendererCreditsPercent(remaining);
-  remainingValue.style.fontSize = "26px";
+  remainingValue.style.fontSize = "24px";
   remainingValue.style.fontWeight = "700";
   remainingValue.style.fontVariantNumeric = "tabular-nums";
   percent.append(remainingLabel, remainingValue);
@@ -229,7 +242,11 @@ function renderCreditsTile(
   const remaining = remainingPercent(usagePercent);
 
   const tile = document.createElement("div");
-  tile.style.marginBottom = "11px";
+  tile.style.marginBottom = "7px";
+  tile.style.padding = "7px 9px";
+  tile.style.borderRadius = "8px";
+  tile.style.background = "color-mix(in srgb, currentColor 4%, transparent)";
+  tile.style.border = "1px solid color-mix(in srgb, currentColor 6%, transparent)";
 
   const top = document.createElement("div");
   top.style.display = "flex";
@@ -242,18 +259,21 @@ function renderCreditsTile(
   const name = document.createElement("span");
   name.textContent = label;
   name.style.fontSize = "12px";
+  name.style.fontWeight = "500";
   left.append(name);
   if (resetsAt) {
     const reset = document.createElement("div");
     reset.textContent = resetLabel(resetsAt, locale, messages);
     reset.style.fontSize = "10.5px";
     reset.style.color = "color-mix(in srgb, currentColor 62%, transparent)";
+    reset.style.marginTop = "2px";
     left.append(reset);
   }
 
   const percent = document.createElement("span");
   percent.textContent = `${messages.remaining} ${formatRendererCreditsPercent(remaining)}`;
   percent.style.fontSize = "12px";
+  percent.style.fontWeight = "600";
   percent.style.fontVariantNumeric = "tabular-nums";
   percent.style.color = color;
   top.append(left, percent);

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

@@ -4,6 +4,13 @@ export interface CollaborationSession { id: string; title: string; harnessId: st
 export interface CollaborationMentionCatalog { agents: CollaborationAgent[]; sessions: CollaborationSession[]; canDelegate?: boolean }
 type MentionEntry = ({ kind: 'agent' } & CollaborationAgent) | ({ kind: 'session' } & CollaborationSession);
 
+const entryKey = (entry: MentionEntry): string => entry.kind === 'agent' ? `agent:${entry.id}` : `session:${entry.id}`;
+
+// Encode an entry as the @agent literal the Host expects in the submitted text.
+const entryLiteral = (entry: MentionEntry): string => entry.kind === 'agent'
+  ? `@${entry.id} `
+  : `@[${entry.title.replace(/[\[\]()\r\n]/g, '')}](harness-mix://session/${entry.id}) `;
+
 /** Adds native-Harness suggestions while preserving the original composer editor. */
 export function installHarnessMentions(load: (editor: Element, query: string) => Promise<CollaborationMentionCatalog>) {
   const menu = document.createElement('div');
@@ -26,68 +33,108 @@ export function installHarnessMentions(load: (editor: Element, query: string) =>
   let matches: MentionEntry[] = [], activeKind: 'agent' | 'session' = 'agent', canDelegate = true;
   const catalogs = new Map<HTMLElement, CollaborationMentionCatalog>();
   const badges = new Map<HTMLElement, HTMLElement>();
+
+  // Per-editor mention state, decoupled from editor text so the literal
+  // @agent handles never leak into the visible composer.
+  const selections = new Map<HTMLElement, Map<string, MentionEntry>>();
+  const selectionsFor = (target: HTMLElement): Map<string, MentionEntry> => {
+    let perEditor = selections.get(target);
+    if (!perEditor) {
+      perEditor = new Map();
+      selections.set(target, perEditor);
+    }
+    return perEditor;
+  };
+
+  const replaceSelectionWith = (target: HTMLElement, replacement: string): boolean => {
+    if (target instanceof HTMLTextAreaElement) {
+      target.setSelectionRange(start, end);
+      target.setRangeText(replacement, start, end, 'end');
+      target.dispatchEvent(new Event('input', { bubbles: true }));
+      return true;
+    }
+    // ProseMirror may replace text nodes while its own suggestions render.
+    // Rebuild the saved text offsets instead of reusing a live, stale Range.
+    const fresh = document.createRange();
+    const walker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+    let offset = 0, foundStart = false, foundEnd = false;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const length = node.textContent?.length ?? 0;
+      if (!foundStart && start <= offset + length) { fresh.setStart(node, start - offset); foundStart = true; }
+      if (foundStart && end <= offset + length) { fresh.setEnd(node, end - offset); foundEnd = true; break; }
+      offset += length;
+    }
+    if (!foundEnd) return false;
+    const selection = window.getSelection();
+    selection?.removeAllRanges(); selection?.addRange(fresh);
+    document.dispatchEvent(new Event('selectionchange'));
+    document.execCommand('insertText', false, replacement);
+    return true;
+  };
+
   const syncBadges = (target: HTMLElement) => {
     for (const [old, strip] of badges) if (!old.isConnected) { strip.remove(); badges.delete(old); catalogs.delete(old); }
-    const text = (target instanceof HTMLTextAreaElement ? target.value : target.textContent ?? '').replace(/```[\s\S]*?```|`[^`\n]*`/g, '');
-    const ids = new Set([...text.matchAll(/(?:^|[\s，。；：])@([\w-]+)(?=$|[\s，。；：])/g)].map(m => m[1]));
-    const catalog = catalogs.get(target) ?? { agents: [], sessions: [] };
-    const selectedAgents = catalog.agents.filter(a => ids.has(a.id));
-    const sessionIds = new Set([...text.matchAll(/\]\(harness-mix:\/\/session\/([A-Za-z0-9_-]+)\)/g)].map(match => match[1]));
-    const selectedSessions = catalog.sessions.filter(session => sessionIds.has(session.id));
+    const perEditor = selections.get(target);
+    const hasAny = !!perEditor && perEditor.size > 0;
     let strip = badges.get(target);
-    if (!strip && !selectedAgents.length && !selectedSessions.length) return;
+    if (!strip && !hasAny) return;
     if (!strip) {
       strip = document.createElement('div'); strip.dataset.harnessMixSelectedMentions = 'true';
       strip.setAttribute('aria-label', '已提及的协作者');
       strip.style.cssText = 'display:flex;gap:6px;flex-wrap:wrap;padding:6px 0';
       target.after(strip); badges.set(target, strip);
     }
-    strip.replaceChildren(); strip.style.display = selectedAgents.length || selectedSessions.length ? 'flex' : 'none';
-    for (const agent of selectedAgents) {
-      const badge = document.createElement('span');
-      badge.style.cssText = 'display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #8883;border-radius:8px;font:12px inherit;background:#8881';
-      badge.append(collaborationIcon(agent.id, agent.name, 16), document.createTextNode(agent.name));
-      badge.title = `@${agent.id}${agent.available ? '' : ' · 未就绪'}`; strip.append(badge);
-    }
-    for (const session of selectedSessions) {
+    strip.replaceChildren(); strip.style.display = hasAny ? 'flex' : 'none';
+    if (!perEditor) return;
+    for (const entry of perEditor.values()) {
       const badge = document.createElement('span');
+      badge.dataset.harnessMixMentionBadge = entry.kind === 'agent' ? `agent:${entry.id}` : `session:${entry.id}`;
       badge.style.cssText = 'display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #8883;border-radius:8px;font:12px inherit;background:#8881';
-      badge.append(collaborationIcon(session.harnessId, session.harnessId, 16), document.createTextNode(session.title));
-      badge.title = `历史会话 · ${session.cwd}`; strip.append(badge);
+      const iconWrap = document.createElement('span');
+      iconWrap.style.cssText = 'display:inline-flex;align-items:center;gap:6px';
+      iconWrap.append(
+        collaborationIcon(entry.kind === 'agent' ? entry.id : entry.harnessId, entry.kind === 'agent' ? entry.name : entry.title, 16),
+        document.createTextNode(entry.kind === 'agent' ? entry.name : entry.title),
+      );
+      const remove = document.createElement('button');
+      remove.type = 'button';
+      remove.dataset.harnessMixMentionRemove = entry.kind === 'agent' ? `agent:${entry.id}` : `session:${entry.id}`;
+      const removeLabel = entry.kind === 'agent' ? `移除 ${entry.name}` : `移除会话 ${entry.title}`;
+      remove.setAttribute('aria-label', removeLabel);
+      remove.title = removeLabel;
+      remove.textContent = '×';
+      remove.style.cssText = 'border:0;background:transparent;color:inherit;cursor:pointer;padding:0 0 0 2px;margin:0;font:600 14px/1 inherit;opacity:.55;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%';
+      remove.addEventListener('mouseenter', () => { remove.style.opacity = '1'; remove.style.background = '#8883'; });
+      remove.addEventListener('mouseleave', () => { remove.style.opacity = '.55'; remove.style.background = 'transparent'; });
+      remove.addEventListener('mousedown', event => { event.preventDefault(); event.stopPropagation(); });
+      remove.addEventListener('click', event => {
+        event.preventDefault();
+        event.stopPropagation();
+        const live = selections.get(target);
+        if (!live) return;
+        live.delete(entryKey(entry));
+        syncBadges(target);
+      });
+      badge.append(iconWrap, remove);
+      badge.title = entry.kind === 'agent' ? `@${entry.id}${entry.available ? '' : ' · 未就绪'}` : `历史会话 · ${entry.cwd}`;
+      strip.append(badge);
     }
   };
   const close = () => { generation++; menu.hidden = true; activeComposer?.removeAttribute('data-harness-mix-mention-active'); activeComposer = null; };
   const choose = (entry: MentionEntry) => {
     if (!editor || (entry.kind === 'agent' ? !entry.available || !canDelegate : entry.running === true)) return;
     const target = editor;
-    const inserted = entry.kind === 'agent' ? `@${entry.id} ` : `@[${entry.title.replace(/[\[\]()\r\n]/g, '')}](harness-mix://session/${entry.id}) `;
-    close(); target.focus();
-    if (target instanceof HTMLTextAreaElement) {
-      target.setSelectionRange(start, end);
-      if (!document.execCommand('insertText', false, inserted)) {
-        target.setRangeText(inserted, start, end, 'end');
-        target.dispatchEvent(new Event('input', { bubbles: true }));
-      }
-    } else if (range) {
-      // ProseMirror may replace text nodes while its own suggestions render.
-      // Rebuild the saved text offsets instead of reusing a live, stale Range.
-      const replacement = document.createRange();
-      const walker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
-      let offset = 0, foundStart = false, foundEnd = false;
-      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-        const length = node.textContent?.length ?? 0;
-        if (!foundStart && start <= offset + length) { replacement.setStart(node, start - offset); foundStart = true; }
-        if (foundStart && end <= offset + length) { replacement.setEnd(node, end - offset); foundEnd = true; break; }
-        offset += length;
-      }
-      if (!foundEnd) return;
-      const selection = window.getSelection();
-      selection?.removeAllRanges(); selection?.addRange(replacement);
-      document.dispatchEvent(new Event('selectionchange'));
-      document.execCommand('insertText', false, inserted);
-    }
-    // Dismiss the native search opened by the inserted literal @ mention.
-    target.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', bubbles: true, cancelable: true }));
+    close();
+    target.focus();
+    // Drop the @query trigger text the user typed to open the picker so the
+    // editor stays free of literal @agent handles. The chip below carries
+    // the same intent and is the only visible signal.
+    replaceSelectionWith(target, '');
+    // Toggle the entry in the per-editor selections; a second click removes it.
+    const perEditor = selectionsFor(target);
+    const key = entryKey(entry);
+    if (perEditor.has(key)) perEditor.delete(key);
+    else perEditor.set(key, entry);
     syncBadges(target);
   };
   const render = () => {
@@ -198,16 +245,62 @@ export function installHarnessMentions(load: (editor: Element, query: string) =>
     }
   };
   const outside = (event: Event) => { if (event.target instanceof Node && !menu.contains(event.target)) close(); };
+
+  // The Host detects mentions by parsing `@agent` literals out of the submitted
+  // text. The composer no longer carries those literals while the user is
+  // typing, so before the native form submit reads the editor we re-attach
+  // the mentions at the start of the value. The editor then clears itself
+  // after Codex Desktop finishes dispatching the turn, hiding the literal
+  // text again.
+  const findEditorIn = (root: Element | null): HTMLElement | null => {
+    if (!root) return null;
+    if (root.matches('textarea,[contenteditable="true"]')) return root as HTMLElement;
+    return root.querySelector<HTMLElement>('textarea,[contenteditable="true"]');
+  };
+  const injectMentionsInto = (target: HTMLElement): boolean => {
+    const perEditor = selections.get(target);
+    if (!perEditor || perEditor.size === 0) return false;
+    const text = [...perEditor.values()].map(entryLiteral).join('');
+    if (!text) return false;
+    target.focus();
+    if (target instanceof HTMLTextAreaElement) {
+      target.value = `${text}${target.value}`;
+      target.dispatchEvent(new Event('input', { bubbles: true }));
+      target.dispatchEvent(new Event('change', { bubbles: true }));
+      return true;
+    }
+    const selection = window.getSelection();
+    const fresh = document.createRange();
+    fresh.selectNodeContents(target);
+    fresh.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(fresh);
+    document.dispatchEvent(new Event('selectionchange'));
+    document.execCommand('insertText', false, text);
+    return true;
+  };
+  const onSubmitCapture = (event: Event) => {
+    const composerRoot = (event.target instanceof Element ? event.target : null)?.closest?.('[data-codex-composer-root]');
+    const candidate = composerRoot ?? (event.target instanceof Element ? event.target : null);
+    const editorEl = findEditorIn(candidate);
+    if (!editorEl) return;
+    if (!editorEl.closest('[data-codex-composer-root]')) return;
+    injectMentionsInto(editorEl);
+  };
+
   document.addEventListener('input', input, true);
   document.addEventListener('keydown', keydown, true);
   document.addEventListener('mousedown', outside);
+  document.addEventListener('submit', onSubmitCapture, true);
   window.addEventListener('blur', close);
   return { dispose() {
     disposed = true; close(); menu.remove(); style.remove();
     for (const strip of badges.values()) strip.remove(); badges.clear(); catalogs.clear();
+    for (const [target, perEditor] of selections) if (!target.isConnected) selections.delete(target);
     document.removeEventListener('input', input, true);
     document.removeEventListener('keydown', keydown, true);
     document.removeEventListener('mousedown', outside);
+    document.removeEventListener('submit', onSubmitCapture, true);
     window.removeEventListener('blur', close);
   } };
-}
+}

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

@@ -179,7 +179,8 @@ export interface RendererModelClient extends Partial<RendererSessionImportClient
   forkThread(input: ExternalThreadForkParams): Promise<ExternalThreadForkResult>;
   switchHarness(input: ThreadHarnessSwitchParams): Promise<ThreadHarnessSwitchResult>;
   inspectHarness(input: HarnessInspectParams): Promise<HarnessInspection>;
-  installHarness?(input: { harnessId: string }): Promise<{ success: boolean; command?: string; stdout?: string; stderr?: string; error?: string }>;
+  installHarness?(input: { harnessId: string; terminal?: boolean | undefined }): Promise<{ success: boolean; command?: string; stdout?: string; stderr?: string; error?: string }>;
+  loginHarnessAccount?(input: { harnessId: string }): Promise<{ success: boolean; command?: string; error?: string }>;
   openHarnessWebUi?(input: HarnessWebUiOpenParams): Promise<void>;
   inspectThread(input: ThreadInspectionParams): Promise<ThreadInspection>;
   inspectHarnessCommands(input: HarnessCommandsInspectParams): Promise<HarnessCommandCatalog>;
@@ -356,10 +357,14 @@ export function createRendererModelClient(
       return threadDelegationResultSchema.parse(result);
     },
     inspectHarness,
-    async installHarness(input: { harnessId: string }): Promise<{ success: boolean; command?: string; stdout?: string; stderr?: string; error?: string }> {
+    async installHarness(input: { harnessId: string; terminal?: boolean | undefined }): Promise<{ success: boolean; command?: string; stdout?: string; stderr?: string; error?: string }> {
       const result = await manager.sendRequest(HARNESS_INSTALL_METHOD, input);
       return result as { success: boolean; command?: string; stdout?: string; stderr?: string; error?: string };
     },
+    async loginHarnessAccount(input: { harnessId: string }): Promise<{ success: boolean; command?: string; error?: string }> {
+      const result = await manager.sendRequest("codexhost/harness/account/login", input);
+      return result as { success: boolean; command?: string; error?: string };
+    },
     async listHarnessPlugins(): Promise<HarnessPluginListResult> {
       return harnessPluginListResultSchema.parse(
         await manager.sendRequest(HARNESS_PLUGIN_LIST_METHOD, {}),

package/src/native-ui/renderer-extension/src/renderer-usage-control.ts

@@ -435,13 +435,19 @@ export function mountRendererUsageControl(
   trigger.style.fontVariantNumeric = "tabular-nums";
   trigger.style.letterSpacing = "0";
 
+  const ringSlot = document.createElement("span");
+  ringSlot.dataset.codexhostUsageRing = "";
+  ringSlot.style.display = "inline-flex";
+  ringSlot.style.flex = "0 0 auto";
+  ringSlot.style.alignItems = "center";
+
   const label = document.createElement("span");
   label.style.display = "inline-block";
   label.style.maxWidth = "100%";
   label.style.overflow = "hidden";
   label.style.textOverflow = "ellipsis";
   label.style.whiteSpace = "nowrap";
-  trigger.append(label);
+  trigger.append(ringSlot, label);
 
   const popover = document.createElement("div");
   popover.id = `${composerId}-usage-popover`;
@@ -561,7 +567,33 @@ export function renderRendererUsageControl(
     return false;
   }
 
+  const ringSlot = control.trigger.querySelector<HTMLElement>("[data-codexhost-usage-ring]");
+  const contextPercent =
+    usage?.contextUsagePercent !== undefined
+      ? usage.contextUsagePercent
+      : (hasContext && usage?.contextWindowTokens !== undefined && usage.contextWindowTokens > 0
+          ? Math.round((100 * (usage.contextUsedTokens ?? 0) / usage.contextWindowTokens) * 10) / 10
+          : undefined);
+
+  if (contextPercent !== undefined) {
+    const tone = contextPercent >= 90 ? "hot" : contextPercent >= 70 ? "warn" : "ok";
+    const color = tone === "hot" ? "#c45c4a" : tone === "warn" ? "#c9a227" : "#3d9a64";
+    if (ringSlot) {
+      ringSlot.replaceChildren(
+        createRendererUsageRing(contextPercent, {
+          size: 14,
+          strokeWidth: 2.4,
+          color,
+        }),
+      );
+    }
+  } else if (ringSlot) {
+    ringSlot.replaceChildren();
+  }
+
+  const percentLabel = contextPercent !== undefined ? `${decimal(contextPercent, 1)}%` : null;
   const summary = [
+    percentLabel,
     usage?.totalCredits !== undefined ? formatRendererCredits(usage.totalCredits) : null,
     cacheHitRatePercent !== undefined ? formatRendererCacheHitRate(cacheHitRatePercent) : null,
     outputTokensPerSecond !== undefined
@@ -569,8 +601,7 @@ export function renderRendererUsageControl(
       : null,
     totalCostUsd !== undefined ? formatRendererCost(totalCostUsd) : null,
   ].filter((value): value is string => value !== null);
-  const contextPercent = usage?.contextUsagePercent;
-  if (contextPercent !== undefined && summary.length === 0) summary.push(messages.usage);
+
   if (
     summary.length === 0 &&
     hasContext &&