\n
\n {title}\n {formatNumber(total)}\n
\n
\n {entries.length === 0 ?
无记录
: entries.map(([provider, count]) => (\n
\n
\n {provider}\n {formatNumber(count)}\n
\n
\n \n
\n
\n ))}\n
\n
请确认 Codex 已完全关闭关闭 Codex CLI、Codex App、app-server 及相关终端，避免 SQLite 或 rollout 被占用。
\n - Codex Home
- {status?.codexHome}
\n - SQLite Home
- {status?.sqliteHome} ({status?.sqliteHomeSource})
\n - 当前 Provider
- {status?.currentProvider}
\n - 目标 Provider
- {selectedProvider}
\n - 配置变更
- {plan.mode === \"switch\" ? \"更新 config.toml 根级 model_provider\" : \"不修改 config.toml\"}
\n - Model 策略
- {plan.mode !== \"switch\" ? \"跟随当前根级 model\" : plan.modelMode === \"auto\" ? \"跟随目标 Provider 配置\" : plan.modelMode === \"keep\" ? \"保留当前根级 model\" : `设置为 ${plan.model}`}
\n - 备份策略
- 修改前创建备份，保留最近 {plan.keepCount} 份
\n
\n \n );\n}\n\nfunction RestoreModal({ backup, status, onCancel, onConfirm }) {\n const [restoreConfig, setRestoreConfig] = useState(false);\n const [restoreDatabase, setRestoreDatabase] = useState(true);\n const [restoreSessions, setRestoreSessions] = useState(true);\n const targetSqliteHome = getTargetSqliteHome(status);\n const relocates = restoreDatabase && backup.metadata.version >= 2 && backup.metadata.sqliteHome && !pathsEqual(backup.metadata.sqliteHome, targetSqliteHome);\n const relocationBlocked = relocates && restoreConfig;\n return (\n onConfirm({ restoreConfig, restoreDatabase, restoreSessions, allowSqliteHomeRelocation: Boolean(relocates) })}\n >\n {formatDate(backup.metadata.createdAt)} · {backup.metadata.targetProvider}{backup.path}
SQLite Home 与备份来源不同来源：{backup.metadata.sqliteHome}
目标：{targetSqliteHome}
{relocationBlocked ? \"迁移数据库时不能同时恢复旧 config.toml。\" : \"确认后数据库将恢复到当前目标位置。\"}
恢复前请关闭 Codex该操作将覆盖所选的当前元数据；请确认 Codex CLI、App 和 app-server 已关闭。
被删除的备份无法直接恢复只处理当前 Codex Home 下由本工具管理的备份目录。
- 当前备份
- {backups.backups.length} 份
- 保留
- 最近 {keepCount} 份
- 将删除
- {deleteCount} 份
\n \n );\n}\n\nfunction ProfileModal({ onCancel, onConfirm }) {\n const [profileId, setProfileId] = useState(\"\");\n const [name, setName] = useState(\"\");\n const [codexHome, setCodexHome] = useState(\"\");\n const [sqliteHome, setSqliteHome] = useState(\"\");\n const valid = /^[A-Za-z0-9_.-]{1,80}$/.test(profileId) && name.trim() && codexHome.trim();\n return (\n onConfirm({ profileId, name, codexHome, sqliteHome })}>\n \n \n \n \n \n
\n \n );\n}\n\nfunction Toast({ toast, onClose }) {\n useEffect(() => {\n if (!toast) return undefined;\n const timer = window.setTimeout(onClose, 6000);\n return () => window.clearTimeout(timer);\n }, [toast, onClose]);\n if (!toast) return null;\n return {toast.tone === \"success\" ?
:
}
{toast.title}{toast.message ? {toast.message} : null}{accessState === \"checking\" ? \"正在完成安全配对\" : \"需要重新配对\"}
{accessState === \"checking\" ? \"请稍候…\" : accessMessage || \"请重新运行 codex-provider web。\"}
{accessState !== \"checking\" ?
codex-provider web : null}
\n
refresh()} />\n \n \n setModal({ type: \"profile\" })} onDeleteProfile={deleteProfile} onRefresh={() => refresh()} loading={loading} />\n {view === \"overview\" ? setModal({ type: \"execute\", plan })} onRestore={(backup) => setModal({ type: \"restore\", backup })} setView={setView} busy={busy} loading={loading} /> : null}\n {view === \"history\" ? : null}\n {view === \"backups\" ? setModal({ type: \"restore\", backup })} onPrune={(keepCount) => setModal({ type: \"prune\", keepCount })} /> : null}\n {view === \"activity\" ? : null}\n \n {modal?.type === \"execute\" ? setModal(null)} onConfirm={execute} /> : null}\n {modal?.type === \"restore\" ? setModal(null)} onConfirm={restore} /> : null}\n {modal?.type === \"prune\" ? setModal(null)} onConfirm={prune} /> : null}\n {modal?.type === \"profile\" ? setModal(null)} onConfirm={saveProfile} /> : null}\n \n {part.slice(1, -1)};
+ if (part.startsWith("**") && part.endsWith("**")) return {part.slice(2, -2)};
+ if (part.startsWith("*") && part.endsWith("*")) return {part.slice(1, -1)};
+ return {part};
+ });
+}
+
+function SafeMarkdown({ text }) {
+ const blocks = String(text ?? "").split(/(```[^\n]*\n[\s\S]*?```)/g);
+ return blocks.map((block, index) => {
+ if (block.startsWith("```") && block.endsWith("```")) {
+ const lines = block.slice(3, -3).replace(/^\w*\n/, "");
+ return {lines}
;
+ }
+ return block.split("\n").map((line, lineIndex, lines) => {renderInlineMarkdown(line, `${index}-${lineIndex}`)}{lineIndex < lines.length - 1 ?
: null});
+ });
+}
+
+function storagePayload(profileId) {
+ return { profileId: profileId || "default" };
+}
+
+function getTargetSqliteHome(status) {
+ const databasePath = status?.stateDbLocation?.path;
+ if (!databasePath) return status?.sqliteHome ?? "";
+ const separator = databasePath.includes("\\") ? "\\" : "/";
+ const parts = databasePath.split(separator);
+ parts.pop();
+ return parts.join(separator) || separator;
+}
+
+function pathsEqual(left, right) {
+ if (!left || !right) return false;
+ const normalize = (value) => value.replace(/[\\/]+$/, "").replaceAll("\\", "/").toLowerCase();
+ return normalize(left) === normalize(right);
+}
+
+function providersFromStatus(status) {
+ if (!status) return [];
+ const sources = new Map();
+ const add = (values, source) => {
+ for (const value of values ?? []) {
+ if (!value || value === "(missing)") continue;
+ const bucket = sources.get(value) ?? new Set();
+ bucket.add(source);
+ sources.set(value, bucket);
+ }
+ };
+ add(status.configuredProviders, "config");
+ add(Object.keys(status.rolloutCounts?.sessions ?? {}), "rollout");
+ add(Object.keys(status.rolloutCounts?.archived_sessions ?? {}), "rollout");
+ add(Object.keys(status.sqliteCounts?.sessions ?? {}), "sqlite");
+ add(Object.keys(status.sqliteCounts?.archived_sessions ?? {}), "sqlite");
+ add([status.currentProvider], "config");
+ return [...sources.entries()]
+ .map(([id, providerSources]) => ({
+ id,
+ sources: [...providerSources],
+ configured: status.configuredProviders?.includes(id),
+ current: id === status.currentProvider
+ }))
+ .sort((left, right) => Number(right.current) - Number(left.current) || left.id.localeCompare(right.id));
+}
+
+function StatusDot({ tone = "neutral" }) {
+ return ;
+}
+
+function AppHeader({ status, busy, onRefresh }) {
+ const healthy = status?.sqliteAccess?.supported !== false && !status?.sqliteCounts?.unreadable;
+ return (
+
+ );
+}
+
+function Sidebar({ view, setView, status, onForgetBrowser }) {
+ return (
+
+ );
+}
+
+function StorageBar({ profiles, profileId, setProfileId, status, onAddProfile, onDeleteProfile, onRefresh, loading }) {
+ return (
+
+ );
+}
+
+function ProviderBars({ title, counts, currentProvider }) {
+ const entries = Object.entries(counts ?? {}).sort((left, right) => right[1] - left[1]);
+ const total = entries.reduce((sum, [, count]) => sum + count, 0);
+ return (
+
+
+ {title}
+ {formatNumber(total)}
+
+
+ {entries.length === 0 ?
无记录
: entries.map(([provider, count]) => (
+
+
+ {provider}
+ {formatNumber(count)}
+
+
+
+
+
+ ))}
+
+
+
+
状态总览
+
比较 rollout 文件、SQLite 线程索引和当前 Provider。
+
+
+ {loading ?
: aligned ?
:
}
+
{loading ? "正在检查" : aligned ? "元数据已对齐" : "发现不一致"}
+
+
+
+ 当前 Provider
+ {status?.currentProvider ?? "—"}
+ {status?.currentProviderImplicit ? "隐式默认" : "config.toml 根级配置"}
+
+
+ Rollout 文件
+ {formatNumber(rolloutTotal)}
+ sessions + archived
+
+
+ SQLite threads
+ {status?.sqliteCounts?.unreadable ? "不可读" : formatNumber(sqliteTotal)}
+ {status?.stateDbLocation?.source ?? "未定位数据库"}
+
+
+ 托管备份
+ {formatNumber(status?.backupSummary?.count)}
+ {formatBytes(status?.backupSummary?.totalBytes)}
+
+
+
+
{item.title}{item.detail}
+
+
项目可见性
检查 Desktop 项目路径、全局排序和首屏 50 条命中。
+
+
+ | 项目根目录 | 交互会话 | 首屏 | Ranks | CWD 精确匹配 | Provider |
|---|
+
+ {projects.length === 0 ? (
+ | 没有可显示的项目诊断。 |
+ ) : projects.map((project) => (
+
+ | {project.root} |
+ {project.interactiveThreads} |
+ {project.firstPageThreads}/50 |
+ {project.rankPreview || "—"} |
+ {project.exactCwdMatches}/{project.interactiveThreads} |
+ {Object.entries(project.providerCounts ?? {}).map(([provider, count]) => `${provider} ${count}`).join(" · ") || "—"} |
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+function ExecutionPanel({ status, providers, selectedProvider, setSelectedProvider, onAddManualProvider, onRemoveManualProvider, onRequestExecute, busy }) {
+ const [mode, setMode] = usePersistentState("cps.web.mode", "sync");
+ const [modelMode, setModelMode] = usePersistentState("cps.web.modelMode", "auto");
+ const [customModel, setCustomModel] = usePersistentState("cps.web.customModel", "");
+ const [keepCount, setKeepCount] = usePersistentState("cps.web.keepCount", 5);
+ const [manualProvider, setManualProvider] = useState("");
+ const selectedOption = providers.find((provider) => provider.id === selectedProvider);
+ const switchAllowed = selectedOption?.configured;
+ const validManualProvider = /^[A-Za-z0-9_.-]+$/.test(manualProvider.trim());
+ const executeDisabled = busy || !selectedProvider || status?.sqliteAccess?.supported === false || status?.sqliteCounts?.unreadable;
+
+ return (
+
+ );
+}
+
+function RecentBackups({ backups, onViewAll, onRestore }) {
+ return (
+
+
+
最近备份
{backups.backupRoot || "同步后将在 Codex Home 下创建备份"}
+
+
+ {backups.backups.length === 0 ?
尚无由本工具创建的备份。
: backups.backups.slice(0, 3).map((backup) => (
+
+
+
{formatDate(backup.metadata.createdAt)}{backup.metadata.targetProvider} · {backup.metadata.changedSessionFiles ?? 0} 个 rollout
+
{formatBytes(backup.sizeBytes)}
+
+
+ ))}
+
+
+
+
+
+
+
setView("backups")} onRestore={onRestore} />
+
+
+
+
+
+
+ {backups.backupRoot || status?.backupRoot || "—"}{backups.backups.length} 份 · {formatBytes(backups.backups.reduce((sum, backup) => sum + backup.sizeBytes, 0))}
+
+ {backups.backups.length === 0 ?
还没有备份执行一次同步或切换后，备份会显示在这里。
: backups.backups.map((backup) => (
+
+ {formatDate(backup.metadata.createdAt)}{backup.id}
+ Provider {backup.metadata.targetProvider}Rollout {backup.metadata.changedSessionFiles ?? 0}SQLite {backup.metadata.sqliteDbFiles?.length ? "已包含" : "未包含"}
+ SQLite Home{backup.metadata.sqliteHome ?? "旧版 metadata 未记录"}
+ {formatBytes(backup.sizeBytes)}
+
+ ))}
+
+
+
活动日志
当前 Web UI 会话中的状态刷新、同步阶段和操作结果。
{activeOperation.kind}
: null}
+
+ Activity log{activity.length} entries
+
+ {activity.length === 0 ?
等待操作…
: activity.map((entry) => (
+
+
+ {entry.level}
+ {entry.message}
+ {typeof entry.detail === "string" ? {entry.detail} : null}
+
+ ))}
+
+
+
聊天记录
从 rollout 文件读取历史会话，只读查看，不修改本地数据。
+
+ {error ?
: null}
+
+
+
{history.total} 个会话第 {history.page} 页
+
+ {loading && !history.sessions.length ?
读取中…
: null}
+ {!loading && !history.sessions.length ?
没有匹配的会话
: null}
+ {history.sessions.map((session) =>
)}
+
+
{page}
+
+ {detailLoading ?
正在读取会话
: !detail ?
选择一个会话聊天内容将在这里显示。
: <>
{detail.session.title}
{detail.session.cwd || "未知项目"} · {detail.session.provider} · {detail.session.messageCount} 条消息
{detail.truncated ?
仅显示最近 {detail.returnedMessageCount} 条消息。
: null}
{detail.messages.map((message) =>
{message.role === "user" ? "你" : "Codex"}
)}
}
+
+
event.target === event.currentTarget && onCancel()}>
+
+ {title}
+ {children}
+
+
+
请确认 Codex 已完全关闭关闭 Codex CLI、Codex App、app-server 及相关终端，避免 SQLite 或 rollout 被占用。
+ - Codex Home
- {status?.codexHome}
+ - SQLite Home
- {status?.sqliteHome} ({status?.sqliteHomeSource})
+ - 当前 Provider
- {status?.currentProvider}
+ - 目标 Provider
- {selectedProvider}
+ - 配置变更
- {plan.mode === "switch" ? "更新 config.toml 根级 model_provider" : "不修改 config.toml"}
+ - Model 策略
- {plan.mode !== "switch" ? "跟随当前根级 model" : plan.modelMode === "auto" ? "跟随目标 Provider 配置" : plan.modelMode === "keep" ? "保留当前根级 model" : `设置为 ${plan.model}`}
+ - 备份策略
- 修改前创建备份，保留最近 {plan.keepCount} 份
+
+
+ );
+}
+
+function RestoreModal({ backup, status, onCancel, onConfirm }) {
+ const [restoreConfig, setRestoreConfig] = useState(false);
+ const [restoreDatabase, setRestoreDatabase] = useState(true);
+ const [restoreSessions, setRestoreSessions] = useState(true);
+ const targetSqliteHome = getTargetSqliteHome(status);
+ const relocates = restoreDatabase && backup.metadata.version >= 2 && backup.metadata.sqliteHome && !pathsEqual(backup.metadata.sqliteHome, targetSqliteHome);
+ const relocationBlocked = relocates && restoreConfig;
+ return (
+ onConfirm({ restoreConfig, restoreDatabase, restoreSessions, allowSqliteHomeRelocation: Boolean(relocates) })}
+ >
+ {formatDate(backup.metadata.createdAt)} · {backup.metadata.targetProvider}{backup.path}
SQLite Home 与备份来源不同来源：{backup.metadata.sqliteHome}
目标：{targetSqliteHome}
{relocationBlocked ? "迁移数据库时不能同时恢复旧 config.toml。" : "确认后数据库将恢复到当前目标位置。"}
恢复前请关闭 Codex该操作将覆盖所选的当前元数据；请确认 Codex CLI、App 和 app-server 已关闭。
被删除的备份无法直接恢复只处理当前 Codex Home 下由本工具管理的备份目录。
- 当前备份
- {backups.backups.length} 份
- 保留
- 最近 {keepCount} 份
- 将删除
- {deleteCount} 份
+
+ );
+}
+
+function ProfileModal({ onCancel, onConfirm }) {
+ const [profileId, setProfileId] = useState("");
+ const [name, setName] = useState("");
+ const [codexHome, setCodexHome] = useState("");
+ const [sqliteHome, setSqliteHome] = useState("");
+ const valid = /^[A-Za-z0-9_.-]{1,80}$/.test(profileId) && name.trim() && codexHome.trim();
+ return (
+ onConfirm({ profileId, name, codexHome, sqliteHome })}>
+
+
+
+
+
+
+
+ );
+}
+
+function Toast({ toast, onClose }) {
+ useEffect(() => {
+ if (!toast) return undefined;
+ const timer = window.setTimeout(onClose, 6000);
+ return () => window.clearTimeout(timer);
+ }, [toast, onClose]);
+ if (!toast) return null;
+ return {toast.tone === "success" ?
:
}
{toast.title}{toast.message ? {toast.message} : null}{accessState === "checking" ? "正在完成安全配对" : "需要重新配对"}
{accessState === "checking" ? "请稍候…" : accessMessage || "请重新运行 codex-provider web。"}
{accessState !== "checking" ?
codex-provider web : null}
+
refresh()} />
+
+
+ setModal({ type: "profile" })} onDeleteProfile={deleteProfile} onRefresh={() => refresh()} loading={loading} />
+ {view === "overview" ? setModal({ type: "execute", plan })} onRestore={(backup) => setModal({ type: "restore", backup })} setView={setView} busy={busy} loading={loading} /> : null}
+ {view === "history" ? : null}
+ {view === "backups" ? setModal({ type: "restore", backup })} onPrune={(keepCount) => setModal({ type: "prune", keepCount })} /> : null}
+ {view === "activity" ? : null}
+
+ {modal?.type === "execute" ? setModal(null)} onConfirm={execute} /> : null}
+ {modal?.type === "restore" ? setModal(null)} onConfirm={restore} /> : null}
+ {modal?.type === "prune" ? setModal(null)} onConfirm={prune} /> : null}
+ {modal?.type === "profile" ? setModal(null)} onConfirm={saveProfile} /> : null}
+
+