minecodex 2.0.1 → 2.0.3

package/features/unread-inbox/src/adapters/codex/renderer.mjs

@@ -0,0 +1,66 @@
+export function createThreadAdapter(codex) {
+function isUnread(row) {
+  let fiber = codex.currentFiber(row);
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    if (typeof fiber.memoizedProps?.isUnread === "boolean") return fiber.memoizedProps.isUnread;
+  }
+  return null;
+}
+function isWorking(row) {
+  let fiber = codex.currentFiber(row);
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    const status = fiber.memoizedProps?.statusState;
+    if (status?.type) return status.type === "loading";
+  }
+  return null;
+}
+function projectForRow(row) {
+  let fiber = codex.currentFiber(row);
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    const group = fiber.memoizedProps?.secondaryContent?.props?.projectGroup;
+    if (group?.projectId) return { id:group.projectId, name:group.label };
+  }
+  return null;
+}
+function attentionState(row) {
+  let fiber = codex.currentFiber(row);
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    const props = fiber.memoizedProps;
+    // 复用原生状态契约，不从摘要文案推断待确认状态。
+    if (props?.chips?.some(chip => chip.id === "awaiting-approval")) return "approval";
+    if (props?.statusPill?.label?.props?.id === "codex.localTaskRow.needsInput") return "input";
+  }
+  return null;
+}
+function threadDetails(row) {
+  let fiber = codex.currentFiber(row);
+  let summary, hostConfig;
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    summary ||= fiber.memoizedProps?.threadSummary;
+    hostConfig ||= fiber.memoizedProps?.hoverCardHostConfig;
+  }
+  const hostId = summary?.hostId || row.dataset.appActionSidebarThreadHostId || "local";
+  const nativeTime = summary?.recencyAt ?? summary?.updatedAt ?? null;
+  return {
+    title:row.dataset.appActionSidebarThreadTitle || row.querySelector("[data-thread-title]")?.textContent || "",
+    summary:row.querySelector("[data-thread-secondary-title]")?.textContent || "",
+    // 与原生 Thread hover card 相同，优先使用任务 recency 时间。
+    timestamp:nativeTime,
+    hostId, hostName:hostConfig?.display_name || hostId,
+    project:projectForRow(row),
+    working:isWorking(row),
+    attention:attentionState(row),
+  };
+}
+function threadRecord(row) {
+  codex.report("thread-status",Boolean(codex.currentFiber(row)),codex.currentFiber(row) ? null : "thread-props-unavailable");
+  let fiber = codex.currentFiber(row);
+  let activate = null;
+  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
+    const props = fiber.memoizedProps;
+    if (props?.statusState && typeof props.onClick === "function") { activate = props.onClick; break; }
+  }
+  return { ...threadDetails(row), key:row.dataset.appActionSidebarThreadId, unread:isUnread(row), activate, spinner:row.querySelector?.('[class~="motion-safe:animate-spin"]')?.outerHTML ?? "" };
+}
+  return {read:threadRecord};
+}

package/features/unread-inbox/src/injection-source.mjs

@@ -0,0 +1,6 @@
+import { readFile } from "node:fs/promises";
+import { createThreadAdapter } from "./adapters/codex/renderer.mjs";
+export async function createPageScriptSource() {
+  const source=await readFile(new URL("./unread-inbox.mjs",import.meta.url),"utf8");
+  return `const createThreadAdapter=${createThreadAdapter.toString()};\n${source}`;
+}

package/features/unread-inbox/src/unread-inbox.mjs

@@ -1,3 +1,11 @@
+const nativeThreads = createThreadAdapter(config.codex);
+function threadRecord(row) {
+  const item=nativeThreads.read(row), previous=messageUpdates.get(item.key);
+  if (item.working && (!previous || previous.message !== item.summary || !previous.working))
+    messageUpdates.set(item.key,{message:item.summary,working:true,time:Math.max(item.timestamp || 0,Date.now())});
+  else if (previous) previous.working=item.working;
+  return {...item,timestamp:Math.max(item.timestamp || 0,messageUpdates.get(item.key)?.time || 0) || null};
+}
 // 原生完整侧栏图标，取自当前 Codex 16px/20px 资源。
 const sidebarGlyphs = {"16": "<svg aria-hidden=\"true\" class=\"_Icon_uttcz_1\" focusable=\"false\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4.66699 4.80859C4.95683 4.80873 5.19238 5.04412 5.19238 5.33398V10.667C5.19238 10.9569 4.95683 11.1923 4.66699 11.1924C4.37704 11.1924 4.1416 10.9569 4.1416 10.667V5.33398C4.1416 5.04403 4.37704 4.80859 4.66699 4.80859Z\" fill=\"currentColor\"></path> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.5 2.30762C13.1707 2.30762 14.5254 3.66235 14.5254 5.33301V10.666C14.5254 12.3367 13.1707 13.6914 11.5 13.6914H4.5C2.82934 13.6914 1.47461 12.3367 1.47461 10.666V5.33301C1.47461 3.66235 2.82934 2.30762 4.5 2.30762H11.5ZM4.5 3.3584C3.40924 3.3584 2.52539 4.24225 2.52539 5.33301V10.666C2.52539 11.7568 3.40924 12.6416 4.5 12.6416H11.5C12.5908 12.6416 13.4746 11.7568 13.4746 10.666V5.33301C13.4746 4.24225 12.5908 3.3584 11.5 3.3584H4.5Z\" fill=\"currentColor\"></path></svg>", "20": "<svg aria-hidden=\"true\" class=\"_Icon_uttcz_1\" focusable=\"false\" height=\"20\" viewBox=\"0 0 20 20\" width=\"20\"><path d=\"M5.83301 6.00098C6.20028 6.00098 6.49805 6.29875 6.49805 6.66602V13.333C6.49787 13.7001 6.20017 13.998 5.83301 13.998C5.46596 13.9979 5.16814 13.7 5.16797 13.333V6.66602C5.16797 6.29883 5.46585 6.00111 5.83301 6.00098Z\" fill=\"currentColor\"></path> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.5 2.87695C16.5241 2.87695 18.165 4.51787 18.165 6.54199V13.459C18.1649 15.483 16.524 17.124 14.5 17.124H5.5C3.47598 17.124 1.83514 15.483 1.83496 13.459V6.54199C1.83496 4.51787 3.47588 2.87695 5.5 2.87695H14.5ZM5.5 4.20703C4.21042 4.20703 3.16504 5.25241 3.16504 6.54199V13.459C3.16521 14.7484 4.21052 15.7939 5.5 15.7939H14.5C15.7895 15.7939 16.8348 14.7484 16.835 13.459V6.54199C16.835 5.25241 15.7896 4.20703 14.5 4.20703H5.5Z\" fill=\"currentColor\"></path></svg>"};
 const taskGlyph = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M13.3336 11.4749C13.6234 11.475 13.858 11.7104 13.858 12.0002C13.8579 12.2899 13.6233 12.5255 13.3336 12.5256H6.66663C6.37678 12.5256 6.1414 12.2901 6.14124 12.0002C6.14124 11.7103 6.37668 11.4749 6.66663 11.4749H13.3336Z\" fill=\"currentColor\"/> <path d=\"M3.07874 10.9827C3.50002 10.9827 3.84226 11.3241 3.84241 11.7454C3.84241 12.1667 3.50011 12.509 3.07874 12.509C2.65748 12.5089 2.31604 12.1666 2.31604 11.7454C2.31619 11.3242 2.65758 10.9828 3.07874 10.9827Z\" fill=\"currentColor\"/> <path d=\"M13.3336 7.47485C13.6234 7.47503 13.858 7.7104 13.858 8.00024C13.8579 8.28995 13.6233 8.52546 13.3336 8.52563H6.66663C6.37678 8.52563 6.1414 8.29005 6.14124 8.00024C6.14124 7.71029 6.37668 7.47485 6.66663 7.47485H13.3336Z\" fill=\"currentColor\"/> <path d=\"M3.07874 6.98267C3.50002 6.98267 3.84226 7.32411 3.84241 7.74536C3.84241 8.16674 3.50011 8.50903 3.07874 8.50903C2.65748 8.50888 2.31604 8.16665 2.31604 7.74536C2.31619 7.3242 2.65758 6.98281 3.07874 6.98267Z\" fill=\"currentColor\"/> <path d=\"M13.3336 3.47485C13.6234 3.47503 13.858 3.7104 13.858 4.00024C13.8579 4.28995 13.6233 4.52546 13.3336 4.52563H6.66663C6.37678 4.52563 6.1414 4.29005 6.14124 4.00024C6.14124 3.71029 6.37668 3.47485 6.66663 3.47485H13.3336Z\" fill=\"currentColor\"/> <path d=\"M3.07874 2.98267C3.50002 2.98267 3.84226 3.32411 3.84241 3.74536C3.84241 4.16674 3.50011 4.50903 3.07874 4.50903C2.65748 4.50888 2.31604 4.16665 2.31604 3.74536C2.31619 3.3242 2.65758 2.98281 3.07874 2.98267Z\" fill=\"currentColor\"/></svg>";
@@ -8,40 +16,41 @@ const folderGlyph = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20
 const marker = "data-minecodex-unread";
 const style = document.createElement("style");
 style.textContent = `
-[data-minecodex-task-title] { pointer-events:auto; -webkit-app-region:no-drag; cursor:pointer; border-radius:var(--radius-lg); min-height:32px; padding-inline:6px; }
-[data-minecodex-task-title]:hover { background:var(--color-background-primary-ghost-hover); }
-[data-minecodex-task-title]:focus-visible { outline:2px solid var(--color-ring); outline-offset:-2px; }
-[data-minecodex-task-badge] { display:inline-flex; flex-shrink:0; align-items:center; gap:4px; color:var(--color-text-secondary); font-family:var(--font-sans-default); font-size:var(--text-xs); font-variant-numeric:tabular-nums; position:relative; }
-[data-minecodex-task-badge][data-notification]::after { content:""; position:absolute; width:6px; height:6px; right:-2px; top:-1px; border-radius:50%; background:var(--blue-400,#3A83F7); box-shadow:0 0 0 1.5px var(--color-token-dropdown-background); }
+[data-minecodex-task-title] { pointer-events:auto; -webkit-app-region:no-drag; cursor:pointer; border-radius:var(--mcx-radius-lg); min-height:32px; padding-inline:6px; }
+[data-minecodex-task-title]:hover { background:var(--mcx-color-background-primary-ghost-hover); }
+[data-minecodex-task-title]:focus-visible { outline:2px solid var(--mcx-color-ring); outline-offset:-2px; }
+[data-minecodex-task-badge] { display:inline-flex; flex-shrink:0; align-items:center; gap:4px; color:var(--mcx-color-text-secondary); font-family:var(--mcx-font-sans-default); font-size:var(--mcx-text-xs); font-variant-numeric:tabular-nums; position:relative; }
+[data-minecodex-task-badge][data-notification]::after { content:""; position:absolute; width:6px; height:6px; right:-2px; top:-1px; border-radius:50%; background:var(--blue-400,#3A83F7); box-shadow:0 0 0 1.5px var(--mcx-color-token-dropdown-background); }
 [data-minecodex-task-badge][data-notification=red]::after { background:#FF3B30; }
 [data-minecodex-sidebar-original] { display:none !important; }
 [data-minecodex-unread=trigger] { -webkit-app-region:no-drag; }
-[${marker}=panel] { position:fixed; z-index:2147483000; box-sizing:border-box; width:min(320px,calc(100vw - 16px)); max-height:min(440px,calc(100vh - 64px)); display:flex; flex-direction:column; overflow:hidden; padding:6px 0; border:1px solid var(--color-border); border-radius:16px; background:var(--color-token-dropdown-background); color:var(--color-text-primary); box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.12)); font-family:var(--font-sans-default); font-size:var(--text-sm); }
+[${marker}=panel] { position:fixed;  box-sizing:border-box; width:min(320px,calc(100vw - 16px)); max-height:min(440px,calc(100vh - 64px)); display:flex; flex-direction:column; overflow:hidden; padding:6px 0;  border-radius:16px;  color:var(--mcx-color-text-primary);  font-family:var(--mcx-font-sans-default); font-size:var(--mcx-text-sm); }
 [${marker}=panel][hidden] { display:none; }
-[${marker}=panel] .mcx-thread-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 6px; scrollbar-width:thin; scrollbar-color:var(--color-border) transparent; }
+[${marker}=panel] .mcx-thread-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 6px; scrollbar-width:thin; scrollbar-color:var(--mcx-color-border) transparent; }
 [${marker}=panel] .mcx-thread-list:hover, [${marker}=panel] .mcx-thread-list:active { scrollbar-color:var(--color-border-strong) transparent; }
-[${marker}=panel] h2 { flex-shrink:0; margin:8px 16px; font-size:var(--text-sm); font-weight:500; color:var(--color-text-tertiary); }
-[${marker}=panel] [data-unread-row] { display:flex; flex-direction:column; gap:4px; width:100%; padding:10px 12px; box-sizing:border-box; border:0; border-radius:10px; background:transparent; text-align:start; color:var(--color-text-primary); font:inherit; cursor:pointer; }
+[${marker}=panel] h2 { flex-shrink:0; margin:8px 16px; font-size:var(--mcx-text-sm); font-weight:500; color:var(--mcx-color-text-tertiary); }
+[${marker}=panel] [data-unread-row] { display:flex; flex-direction:column; gap:4px; width:100%; padding:10px 12px; box-sizing:border-box; border:0; border-radius:10px; background:transparent; text-align:start; color:var(--mcx-color-text-primary); font:inherit; cursor:pointer; }
 [${marker}=panel] [data-unread-row][aria-current=page] .mcx-thread-title::before { content:""; display:inline-block; width:5px; height:5px; margin-inline-end:6px; border-radius:50%; background:currentColor; vertical-align:middle; }
-[${marker}=panel] [data-unread-row]:hover { background:var(--color-background-primary-ghost-hover); }
-[${marker}=panel] [data-unread-row]:focus-visible { outline:2px solid var(--color-ring); outline-offset:-2px; }
+[${marker}=panel] [data-unread-row]:hover { background:var(--mcx-color-background-primary-ghost-hover); }
+[${marker}=panel] [data-unread-row]:focus-visible { outline:2px solid var(--mcx-color-ring); outline-offset:-2px; }
 [${marker}=panel] .mcx-thread-header { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
 [${marker}=panel] .mcx-thread-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:13px; line-height:18px; font-weight:500; }
-[${marker}=panel] .mcx-device { display:flex; flex-shrink:0; color:var(--color-text-tertiary); }
-[${marker}=panel] .mcx-loading { margin-inline-start:auto; flex-shrink:0; display:flex; align-items:center; color:var(--color-text-tertiary); }
-[${marker}=panel] time { margin-inline-start:auto; flex-shrink:0; font-size:var(--text-xs); color:var(--color-text-tertiary); }
-[${marker}=panel] .mcx-summary { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:16px; color:var(--color-text-tertiary); }
-[${marker}=panel] .mcx-project { display:flex; align-items:center; gap:6px; padding:0; min-width:0; font-size:11px; line-height:16px; color:var(--color-text-tertiary); font-weight:400; }
+[${marker}=panel] .mcx-device { display:flex; flex-shrink:0; color:var(--mcx-color-text-tertiary); }
+[${marker}=panel] .mcx-loading { margin-inline-start:auto; flex-shrink:0; display:flex; align-items:center; color:var(--mcx-color-text-tertiary); }
+[${marker}=panel] time { margin-inline-start:auto; flex-shrink:0; font-size:var(--mcx-text-xs); color:var(--mcx-color-text-tertiary); }
+[${marker}=panel] .mcx-summary { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:16px; color:var(--mcx-color-text-tertiary); }
+[${marker}=panel] .mcx-project { display:flex; align-items:center; gap:6px; padding:0; min-width:0; font-size:11px; line-height:16px; color:var(--mcx-color-text-tertiary); font-weight:400; }
 [${marker}=panel] .mcx-project > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 [${marker}=panel] .mcx-project svg, [${marker}=panel] .mcx-project-icon { width:12px; height:12px; flex:none; }
 [${marker}=panel] .mcx-project-icon > * { width:12px; height:12px; }
-[${marker}=panel] .mcx-attention { margin-inline-start:auto; flex:none; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:2px 10px 2px 8px; font-size:12px; line-height:16px; color:var(--color-chart-blue); background:color-mix(in srgb,var(--color-chart-blue) 15%,transparent); }
+[${marker}=panel] .mcx-attention { margin-inline-start:auto; flex:none; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:2px 10px 2px 8px; font-size:12px; line-height:16px; color:var(--mcx-color-chart-blue); background:color-mix(in srgb,var(--mcx-color-chart-blue) 15%,transparent); }
 [${marker}=panel] .mcx-attention[data-attention="approval"] { color:var(--color-chart-green); background:color-mix(in srgb,var(--color-chart-green) 20%,transparent); }
-[${marker}=panel] .mcx-empty { margin:20px 12px; color:var(--color-text-tertiary); }
+[${marker}=panel] .mcx-empty { margin:20px 12px; color:var(--mcx-color-text-tertiary); }
 `;
 document.head.append(style);
 const panel = document.createElement("div");
 panel.setAttribute(marker, "panel");
+config.ui.surface(panel, "popover");
 panel.id = "minecodex-unread-panel";
 panel.setAttribute("role", "dialog");
 panel.hidden = true;
@@ -71,31 +80,10 @@ let restoreActivity = false, signature = "", queued = false, disposed = false;
 function activityButton() {
   return [...document.querySelectorAll('#app-shell-sidebar button[aria-pressed]')].find(e => /activity|活动|动态/.test(e.getAttribute("aria-label") || ""));
 }
-function isUnread(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    if (typeof fiber.memoizedProps?.isUnread === "boolean") return fiber.memoizedProps.isUnread;
-  }
-  return false;
-}
-function isWorking(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    const status = fiber.memoizedProps?.statusState;
-    if (status?.type) return status.type === "loading";
-  }
-  return false;
-}
+
+
 // 缓存数据与原生导航动作，不保留会被 React 卸载的会话 DOM。
-function threadRecord(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  let activate = null;
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    const props = fiber.memoizedProps;
-    if (props?.statusState && typeof props.onClick === "function") { activate = props.onClick; break; }
-  }
-  return { ...threadDetails(row), key:row.dataset.appActionSidebarThreadId, unread:isUnread(row), activate, spinner:row.querySelector?.('[class~="motion-safe:animate-spin"]')?.outerHTML ?? "" };
-}
+
 function notificationColor(records) {
   return records.some(item => item.attention) ? "red" : records.some(item => item.unread) ? "blue" : null;
 }
@@ -107,7 +95,7 @@ function selectThreads(records, recent, now = Date.now(), currentKey = null) {
 }
 function captureCurrentRow() {
   const selected = document.querySelector('#app-shell-sidebar [data-app-action-sidebar-thread-selected="true"]');
-  const id = document.querySelector('[data-above-composer-conversation-id]')?.getAttribute('data-above-composer-conversation-id');
+  const id = config.codex.currentThreadId();
   selectedKey = selected?.dataset.appActionSidebarThreadId
     ?? [...recentRows.keys()].find(key => id && key.endsWith(":" + id)) ?? null;
   if (selected) recentRows.set(selectedKey, threadRecord(selected));
@@ -116,52 +104,9 @@ function captureCurrentRow() {
     openedAt.delete(key); recentRows.delete(key); messageUpdates.delete(key);
   }
 }
-function projectForRow(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    const group = fiber.memoizedProps?.secondaryContent?.props?.projectGroup;
-    if (group?.projectId) return { id:group.projectId, name:group.label };
-  }
-  return null;
-}
-function attentionState(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    const props = fiber.memoizedProps;
-    // 复用原生状态契约，不从摘要文案推断待确认状态。
-    if (props?.chips?.some(chip => chip.id === "awaiting-approval")) return "approval";
-    if (props?.statusPill?.label?.props?.id === "codex.localTaskRow.needsInput") return "input";
-  }
-  return null;
-}
-function threadDetails(row) {
-  let fiber = row[Object.keys(row).find(key => key.startsWith("__reactFiber"))];
-  let summary, hostConfig;
-  for (let depth = 0; fiber && depth < 35; depth++, fiber = fiber.return) {
-    summary ||= fiber.memoizedProps?.threadSummary;
-    hostConfig ||= fiber.memoizedProps?.hoverCardHostConfig;
-  }
-  const hostId = summary?.hostId || row.dataset.appActionSidebarThreadHostId || "local";
-  const key = row.dataset.appActionSidebarThreadId;
-  const working = isWorking(row);
-  const message = row.querySelector("[data-thread-secondary-title]")?.textContent || "";
-  const nativeTime = summary?.recencyAt ?? summary?.updatedAt ?? null;
-  const previous = messageUpdates.get(key);
-  // 原生流式摘要发生变化时推进时间，不因重绘或打开菜单重置消息时间。
-  if (working && (!previous || previous.message !== message || !previous.working)) {
-    messageUpdates.set(key, {message, working, time:Math.max(nativeTime || 0, Date.now())});
-  } else if (previous) previous.working = working;
-  return {
-    title:row.dataset.appActionSidebarThreadTitle || row.querySelector("[data-thread-title]")?.textContent || "",
-    summary:row.querySelector("[data-thread-secondary-title]")?.textContent || "",
-    // 与原生 Thread hover card 相同，优先使用任务 recency 时间。
-    timestamp:Math.max(nativeTime || 0, messageUpdates.get(key)?.time || 0) || null,
-    hostId, hostName:hostConfig?.display_name || hostId,
-    project:projectForRow(row),
-    working:isWorking(row),
-    attention:attentionState(row),
-  };
-}
+
+
+
 function relativeTime(timestamp, now = Date.now()) {
   if (!Number.isFinite(timestamp)) return "";
   const seconds = Math.max(0, Math.floor((now - timestamp) / 1000));
@@ -242,7 +187,7 @@ function renderRows(details = activityRecords()) {
     device.className = "mcx-device";
     const remote = item.hostId !== "local";
     device.innerHTML = deviceGlyphs[remote ? "remote" : "local"];
-    device.title = text("Remote", "远程");
+    device.setAttribute("data-minecodex-tooltip", text("Remote", "远程"));
     device.setAttribute("aria-label", device.title);
     header.append(title);
     if (remote) header.append(device);
@@ -265,7 +210,7 @@ function renderRows(details = activityRecords()) {
       const time = document.createElement("time");
       time.dateTime = new Date(item.timestamp).toISOString();
       time.textContent = elapsed;
-      time.title = new Date(item.timestamp).toLocaleString();
+      time.setAttribute("data-minecodex-tooltip", new Date(item.timestamp).toLocaleString());
       header.append(time);
     }
     card.append(header);

package/features/usage-meter/DESIGN.md

@@ -1,8 +1,10 @@
 # Usage Meter
 
+通用视觉、材质、按钮、Tooltip 与原生 sidebar 层级遵循根 [DESIGN.md](../../DESIGN.md)。本文件只记录功能特有组件、布局、数据语义与通用组件选型。
+
 ## 用户任务与范围
 
-在原生导航栏 Help 与 Account 之间查看当前账号剩余额度，点击直达 Settings → Usage。
+在原生导航栏 Avatar 上方查看当前账号剩余额度，点击直达 Settings → Usage。
 仅向 `nav[data-app-navigation-rail="true"]` 注入一个控件，不注册通用侧栏
 菜单项，不向 Settings 的分类列表插入内容。
 
@@ -24,22 +26,20 @@ primary/secondary 顺序或套餐字符串。剩余百分比为 clamp(100-used_p
 
 | 角色 | 权威 token / 值 | 用途 |
 | --- | --- | --- |
-| 点击区域 | 克隆 Help 的原生按钮 class 和 data 样式属性；当前 36×36px | 与导航项对齐 |
+| 点击区域 | 克隆 Avatar 的原生按钮 class 和布局样式属性；目标 36×36px | 与导航项对齐 |
 | 环图 | 24×24px；viewBox 32；圆心 16；周半径 43/3、五小时半径 10.5；描边 10/3 viewBox units（渲染 2.5px） | 自定义数据图，不是替代导航图标 |
-| 周环 | 继承 Help 按钮的 `currentColor`（原生 tertiary 中性灰） | 单圈或外圈 |
+| 周环 | `--color-text-tertiary`（原生中性灰） | 单圈或外圈 |
 | 五小时环 | `--color-text-secondary`（中性灰） | 双圈内圈 |
 | 轨道 | 对应环色 18% alpha | 剩余额度的底轨 |
-| 中央数字 | 继承 Help 的颜色；`--font-sans-default`；`--text-xs` × 2/3（8px），单双圈与三位数均一致；500、tabular-nums、line-height:1 | 优先五小时 |
-| Tooltip | `--color-background-tooltip` / `--color-text-tooltip` / `--color-border-tooltip` / `--shadow-tooltip` | 与原生 Help Tooltip 一致 |
-| Tooltip 几何 | `--radius-2xl`；5px 12px padding；`--text-sm` / 18px；两列 gap 16px | label 左、数字右对齐 |
-| Tooltip 字体 | `--tooltip-compact-font-weight` / `--tracking-tooltip` | 与原生紧凑提示一致 |
+| 中央数字 | 继承环的中性灰；`--font-sans-default`；`--text-xs` × 2/3（8px），单双圈与三位数均一致；500、tabular-nums、line-height:1 | 优先五小时 |
 
-环从顶部顺时针填充。Tooltip 在按钮右侧 2px，纵向居中并约束在窗口内；
+环从顶部顺时针填充。额度 Tooltip 的特殊内容是两列对齐，列间距16px；其通用材质和文字样式遵循根规范。Tooltip 在按钮右侧 2px，纵向居中并约束在窗口内；
 鼠标悬停延迟 350ms，键盘聚焦立即显示，Escape 隐藏。单圈一行 Weekly Limit；
 双圈依次为 5h Limit、Weekly Limit，数值带 %。没有额外标题或说明。
 
-原生 Help 图标为 20px，点击区域 36px。Account 头像可见直径为 24px；额度外环含描边的可见直径同为 24px，
+原生 Avatar 点击区域目标为 36px，头像可见直径为 24px；额度外环含描边的可见直径同为 24px，
 数字与环均以按钮几何中心对齐；中性灰取自原生 navbar，不使用彩色强调。
+注入点为头像整行在最近原生纵向容器中的前一项，复用该容器的 8px 间距；不向头像内部横向行插入按钮，不改动原生容器布局。
 单双圈使用同一实现，双圈验收图采用模拟值，不更改账号缓存。减少动画偏好不添加进度过渡。
 
 ## 跳转与生命周期

package/features/usage-meter/README.md

@@ -1,6 +1,7 @@
 # Usage Meter · 额度环
 
-在 Codex 原生 navbar 的 Help 与 Account 之间显示当前登录账号的**剩余额度**。
+在 Codex 原生 navbar 的 Avatar 上方显示当前登录账号的**剩余额度**。
+额度按钮与头像整行同属原生纵向容器，沿用其间距与居中对齐；不挤入头像内部横向行。
 
 - 只有周额度：单圈，中心为周剩余百分比整数。
 - 同时有周与五小时额度：外圈为周、内圈为五小时，中心显示五小时剩余数字。

package/features/usage-meter/codex-feature.json

@@ -4,10 +4,10 @@
   "version": "0.1.0",
   "label": { "en": "Usage Meter", "zh-CN": "额度环" },
   "description": {
-    "en": "Show remaining weekly and 5-hour limits between Help and Account and open Usage settings.",
-    "zh-CN": "在 Help 与 Account 之间显示周与五小时剩余额度，点击进入 Usage 设置。"
+    "en": "Show remaining weekly and 5-hour limits above Avatar and open Usage settings.",
+    "zh-CN": "在 Avatar 上方显示周与五小时剩余额度，点击进入 Usage 设置。"
   },
-  "entry": { "kind": "page-script", "script": "src/usage-meter.mjs" },
+  "entry": { "kind": "page-script", "script": "src/usage-meter.mjs", "sourceFactory": "src/injection-source.mjs" },
   "icon": { "viewBox": "0 0 24 24", "markup": "<circle cx=\"12\" cy=\"12\" r=\"9\"></circle><circle cx=\"12\" cy=\"12\" r=\"5\"></circle>" },
   "placement": { "order": 60 }
 }

package/features/usage-meter/src/adapters/codex/renderer.mjs

@@ -0,0 +1,61 @@
+export function createUsageAdapter(signal, codex, invalidate) {
+  let client=null,unsubscribe=null;
+function remainingWindows(data) {
+  const windows = [data?.rate_limit?.primary_window, data?.rate_limit?.secondary_window];
+  const remaining = seconds => {
+    const window = windows.find(window => window?.limit_window_seconds === seconds);
+    return typeof window?.used_percent === "number" && Number.isFinite(window.used_percent)
+      ? Math.round(Math.max(0, Math.min(100, 100 - window.used_percent))) : null;
+  };
+  const weekly = remaining(604800), fiveHour = remaining(18000);
+  return weekly == null ? null : { weekly, fiveHour, primary: fiveHour ?? weekly };
+}
+function nativeContext(rail) {
+  const result = { auth:null,client:null,router:null };
+  codex.props(rail, props => {
+    for (const value of [props.auth,props.value]) if (!result.auth && value && typeof value === "object" && "authMethod" in value && "userId" in value && "accountId" in value) result.auth=value;
+    for (const value of [props.queryClient,props.client,props.value]) if (!result.client && typeof value?.getQueryCache === "function" && typeof value?.getQueryData === "function") result.client=value;
+    const router=props.router ?? props.value?.router;
+    if (!result.router && typeof router?.navigate === "function") result.router=router;
+    return Boolean(result.auth && result.client && result.router);
+  });
+  return result;
+}
+function currentWindows(context) {
+  const { auth, client } = context;
+  if (auth?.isLoading || !auth?.userId || !auth?.accountId || !["chatgpt", "chatgptAuthTokens"].includes(auth.authMethod)) return null;
+  const data = client?.getQueryData(["rate-limit-status"]);
+  // 账号与缓存必须同时一致；旧账号的最后一次响应不能留在导航栏。
+  if (!data || data.user_id !== auth.userId || data.account_id !== auth.accountId) return null;
+  return remainingWindows(data);
+}
+function findAvatar(rail) {
+  const buttons = [...(rail?.querySelectorAll("button") ?? [])];
+  return buttons.find(button => /\b(account|profile|avatar|user)\b|账户|帐户|个人资料|头像/i.test(button.getAttribute("aria-label") ?? ""))
+    ?? buttons.find(button => button.matches('[data-sidebar-destination="builtin:account"]'))
+    ?? buttons.findLast(button => button.querySelector('img[alt], img[src], [data-avatar]'))
+    ?? null;
+}
+function avatarAnchor(avatar, rail) {
+  // 头像内部是横向行；在最近的原生纵向容器中插入独立一项。
+  let anchor = avatar;
+  while (anchor.parentElement !== rail && !anchor.parentElement.classList.contains("flex-col")) {
+    anchor = anchor.parentElement;
+  }
+  return anchor;
+}
+  function read() {
+    const rail=codex.rail(), context=rail ? nativeContext(rail) : {};
+    if (client !== context.client) {
+      unsubscribe?.(); client=context.client;
+      unsubscribe=client?.getQueryCache().subscribe(event=>{ if (event.query?.queryKey?.[0] === "rate-limit-status") invalidate(); });
+    }
+    const windows=currentWindows(context), avatar=findAvatar(rail);
+    const available=Boolean(avatar && context.router && windows);
+    codex.report("usage-meter",available,available ? null : "account-quota-or-anchor-unavailable");
+    return { rail,avatar,windows,available };
+  }
+  function open(rail) { const {router}=nativeContext(rail); return router?.navigate("/settings/usage?tab=overview",{state:router.state?.location?.state}); }
+  signal.addEventListener("abort",()=>unsubscribe?.(),{once:true});
+  return { read,open,anchor:avatarAnchor };
+}

package/features/usage-meter/src/injection-source.mjs

@@ -0,0 +1,6 @@
+import { readFile } from "node:fs/promises";
+import { createUsageAdapter } from "./adapters/codex/renderer.mjs";
+export async function createPageScriptSource() {
+  const source=await readFile(new URL("./usage-meter.mjs",import.meta.url),"utf8");
+  return `const createUsageAdapter=${createUsageAdapter.toString()};\n${source}`;
+}

package/features/usage-meter/src/usage-meter.mjs

@@ -3,60 +3,26 @@ const MARKER = "data-minecodex-usage-meter";
 const TIP_ID = "minecodex-usage-tooltip";
 const STYLE_ID = "minecodex-usage-style";
 let record = null;
-let client = null;
-let unsubscribe = null;
+
+
 let queued = false;
 let hoverTimer = null;
 
-function remainingWindows(data) {
-  const windows = [data?.rate_limit?.primary_window, data?.rate_limit?.secondary_window];
-  const remaining = seconds => {
-    const window = windows.find(window => window?.limit_window_seconds === seconds);
-    return typeof window?.used_percent === "number" && Number.isFinite(window.used_percent)
-      ? Math.round(Math.max(0, Math.min(100, 100 - window.used_percent))) : null;
-  };
-  const weekly = remaining(604800), fiveHour = remaining(18000);
-  return weekly == null ? null : { weekly, fiveHour, primary: fiveHour ?? weekly };
-}
 
-function nativeContext(rail) {
-  const key = Object.keys(rail).find(key => key.startsWith("__reactFiber$"));
-  let fiber = key ? rail[key] : null;
-  const result = { auth: null, client: null, router: null };
-  for (let depth = 0; fiber && depth < 200; depth++, fiber = fiber.return) {
-    const props = fiber.memoizedProps;
-    if (!props) continue;
-    for (const value of [props.auth, props.value]) {
-      if (!result.auth && value && typeof value === "object" && "authMethod" in value && "userId" in value && "accountId" in value) result.auth = value;
-    }
-    for (const value of [props.queryClient, props.client, props.value]) {
-      if (!result.client && typeof value?.getQueryCache === "function" && typeof value?.getQueryData === "function") result.client = value;
-    }
-    const router = props.router ?? props.value?.router;
-    if (!result.router && typeof router?.navigate === "function") result.router = router;
-    if (result.auth && result.client && result.router) break;
-  }
-  return result;
-}
 
-function currentWindows(context) {
-  const { auth, client } = context;
-  if (auth?.isLoading || !auth?.userId || !auth?.accountId || !["chatgpt", "chatgptAuthTokens"].includes(auth.authMethod)) return null;
-  const data = client?.getQueryData(["rate-limit-status"]);
-  // 账号与缓存必须同时一致；旧账号的最后一次响应不能留在导航栏。
-  if (!data || data.user_id !== auth.userId || data.account_id !== auth.accountId) return null;
-  return remainingWindows(data);
-}
+
+
+
 
 const style = document.createElement("style");
 style.id = STYLE_ID;
 style.textContent = `
-[${MARKER}] { position:relative; display:flex; align-items:center; justify-content:center; flex:none; -webkit-app-region:no-drag; }
+[${MARKER}] { position:relative; display:flex; align-items:center; justify-content:center; flex:none; color:var(--mcx-color-text-tertiary); -webkit-app-region:no-drag; }
 [${MARKER}] .mcx-usage-ring { display:block; width:24px; height:24px; overflow:visible; }
-[${MARKER}] .mcx-usage-number { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:inherit; font-family:var(--font-sans-default); font-size:calc(var(--text-xs) * 2 / 3); line-height:1; font-weight:500; letter-spacing:0; font-variant-numeric:tabular-nums; pointer-events:none; }
+[${MARKER}] .mcx-usage-number { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:inherit; font-family:var(--mcx-font-sans-default); font-size:calc(var(--mcx-text-xs) * 2 / 3); line-height:1; font-weight:var(--font-weight-medium,500); letter-spacing:0; font-variant-numeric:tabular-nums; pointer-events:none; }
 [${MARKER}] [data-window="weekly"] { color:inherit; }
-[${MARKER}] [data-window="fiveHour"] { color:var(--color-text-secondary); }
-#${TIP_ID} { position:fixed; z-index:2147483000; width:max-content; max-width:calc(100vw - 16px); pointer-events:none; user-select:none; padding:5px 12px; border:1px solid var(--color-border-tooltip); border-radius:var(--radius-2xl); background:var(--color-background-tooltip); color:var(--color-text-tooltip); box-shadow:var(--shadow-tooltip); font-family:var(--font-sans-default); font-size:var(--text-sm); line-height:18px; font-weight:var(--tooltip-compact-font-weight); letter-spacing:var(--tracking-tooltip); }
+[${MARKER}] [data-window="fiveHour"] { color:var(--mcx-color-text-secondary); }
+#${TIP_ID} { width:max-content; max-width:calc(100vw - 16px); }
 #${TIP_ID}[hidden] { display:none; }
 #${TIP_ID} dl { display:grid; grid-template-columns:auto auto; gap:2px 16px; margin:0; }
 #${TIP_ID} dt { text-align:left; }
@@ -132,21 +98,25 @@ function removeControl() {
   record = null;
 }
 
-function mount(help, rail) {
-  // 只克隆按钮的外观属性，不携带原生 Help 的菜单行为或 id。
-  const button = help.cloneNode(false);
+
+
+
+
+function mount(avatar, rail) {
+  // 克隆 Avatar 热区的外观，不携带原生账号菜单行为。
+  const button = avatar.cloneNode(false);
   for (const attribute of [...button.attributes]) {
-    if (attribute.name.startsWith("aria-") || attribute.name === "id" || attribute.name === "data-state") button.removeAttribute(attribute.name);
+    if (attribute.name.startsWith("aria-") || ["id", "title", "data-state", "data-sidebar-destination", "data-testid"].includes(attribute.name)) button.removeAttribute(attribute.name);
   }
   button.setAttribute(MARKER, "");
   const tooltip = document.createElement("div");
   tooltip.id = TIP_ID;
+  config.ui.tooltipSurface(tooltip);
   tooltip.setAttribute("role", "tooltip");
   tooltip.hidden = true;
-  const anchor = help.parentElement.classList.contains("contents") ? help.parentElement : help;
-  anchor.after(button);
+  nativeUsage.anchor(avatar, rail).before(button);
   document.body.append(tooltip);
-  record = { button, tooltip, rail, help, signature: null };
+  record = { button, tooltip, rail, avatar, signature: null };
   button.addEventListener("pointerenter", () => { hoverTimer = setTimeout(showTooltip, 350); });
   button.addEventListener("pointerleave", hideTooltip);
   button.addEventListener("focus", showTooltip);
@@ -154,27 +124,17 @@ function mount(help, rail) {
   button.addEventListener("keydown", event => { if (event.key === "Escape") { event.stopPropagation(); hideTooltip(); } });
   button.addEventListener("click", () => {
     hideTooltip();
-    const { router } = nativeContext(rail);
-    router?.navigate("/settings/usage?tab=overview", { state: router.state?.location?.state });
+    nativeUsage.open(rail);
   });
 }
 
 function sync() {
   queued = false;
   if (signal.aborted) return;
-  const rail = [...document.querySelectorAll('nav[data-app-navigation-rail="true"]')].find(rail => rail.getBoundingClientRect().width > 0);
-  const help = rail?.querySelector('button[aria-label="Help menu"],button[aria-label="帮助菜单"]');
-  const context = rail ? nativeContext(rail) : {};
-  if (client !== context.client) {
-    unsubscribe?.();
-    client = context.client;
-    unsubscribe = client?.getQueryCache().subscribe(event => {
-      if (event.query?.queryKey?.[0] === "rate-limit-status") schedule();
-    });
-  }
-  const windows = currentWindows(context);
-  if (!help || !context.router || !windows) { removeControl(); return; }
-  if (record?.help !== help || !record?.button.isConnected) { removeControl(); mount(help, rail); }
+  const { rail,avatar,windows,available } = nativeUsage.read();
+  if (!available) { removeControl(); return; }
+  if (record?.avatar !== avatar || !record?.button.isConnected) { removeControl(); mount(avatar, rail); }
+  else if (record.button.nextElementSibling !== nativeUsage.anchor(avatar, rail)) nativeUsage.anchor(avatar, rail).before(record.button);
   const signature = JSON.stringify(windows);
   if (record.signature !== signature) { record.signature = signature; draw(windows); }
 }
@@ -183,13 +143,14 @@ function schedule() {
   queued = true;
   queueMicrotask(sync);
 }
+const nativeUsage = createUsageAdapter(signal, config.codex, schedule);
 const observer = new MutationObserver(schedule);
 observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-label"] });
 window.addEventListener("resize", positionTooltip);
 window.addEventListener("focus", schedule);
 const cleanup = () => {
   observer.disconnect();
-  unsubscribe?.();
+
   window.removeEventListener("resize", positionTooltip);
   window.removeEventListener("focus", schedule);
   removeControl();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecodex",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Lightweight, local-first plugins for the Codex desktop app.",
   "license": "MIT",
   "type": "module",
@@ -18,12 +18,14 @@
     "packages/cli/src",
     "packages/cli/native/MineCodex.app",
     "packages/runtime-host/src",
+    "features/model-slider/src",
     "features/model-slider/assets",
     "features/model-slider/codex-feature.json",
     "features/model-slider/THIRD_PARTY_NOTICES.md",
     "features/model-slider/vendor",
     "features/notes/src",
     "features/notes/assets",
+    "features/notes/vendor/phosphor-LICENSE",
     "features/notes/codex-feature.json",
     "features/notes/DESIGN.md",
     "features/notes/README.md",
@@ -53,21 +55,32 @@
     "features/sidebar-focus/src",
     "features/sidebar-focus/codex-feature.json",
     "features/sidebar-focus/DESIGN.md",
-    "features/sidebar-focus/vendor/lucide-LICENSE"
+    "features/sidebar-focus/vendor/lucide-LICENSE",
+    "features/sites/src",
+    "features/sites/codex-feature.json",
+    "features/sites/DESIGN.md",
+    "features/sites/README.md",
+    "features/sites/vendor/lucide-LICENSE",
+    "packages/ui/src",
+    "packages/codex-adapter/src",
+    "packages/codex-adapter/package.json",
+    "packages/ui/package.json",
+    "DESIGN.md"
   ],
   "engines": {
     "node": ">=22.5.0"
   },
   "scripts": {
     "start": "node packages/cli/bin/mcx.mjs serve",
-    "test": "node --test packages/cli/test/*.test.mjs packages/runtime-host/test/*.test.mjs features/model-slider/test/*.test.mjs features/notes/test/*.test.mjs features/images/test/*.test.mjs features/hide-upsell-banner/test/*.test.mjs features/session-status/test/*.test.mjs features/usage-meter/test/*.test.mjs apps/dashboard/test/*.test.mjs features/unread-inbox/test/*.test.mjs features/sidebar-focus/test/*.test.mjs",
+    "test": "node --test packages/cli/test/*.test.mjs packages/runtime-host/test/*.test.mjs features/model-slider/test/*.test.mjs features/notes/test/*.test.mjs features/images/test/*.test.mjs features/hide-upsell-banner/test/*.test.mjs features/session-status/test/*.test.mjs features/usage-meter/test/*.test.mjs apps/dashboard/test/*.test.mjs features/unread-inbox/test/*.test.mjs features/sidebar-focus/test/*.test.mjs features/sites/test/*.test.mjs packages/ui/test/*.test.mjs packages/codex-adapter/test/*.test.mjs",
     "test:cli": "node --test packages/cli/test/*.test.mjs",
     "test:runtime": "node --test packages/runtime-host/test/*.test.mjs",
     "check": "node scripts/check-syntax.mjs",
     "build:service": "scripts/build-service-app.zsh",
     "pack:check": "npm pack --dry-run",
     "pack:audit": "node scripts/audit-package.mjs",
-    "prepublishOnly": "npm test && npm run check && npm run pack:audit"
+    "prepublishOnly": "npm test && npm run check && npm run pack:audit",
+    "test:ui": "node --test packages/ui/test/*.test.mjs"
   },
   "repository": {
     "type": "git",