. */
function inlineCode(str){
return String(str).split(/(`[^`]+`)/).map((s, i) => (s.length > 1 && s.startsWith("`") && s.endsWith("`"))
? {s.slice(1, -1)}
: s);
}
function resolveCapture(v, version){
return {
version,
model: v.model, http_status: v.http_status, result: "ok", regime: v.regime || "js", aux: v.aux,
max_tokens: v.max_tokens, betas: v.betas || [],
temperature: v.temperature, stream: v.stream,
context_management: v.context_management || null, usage: v.usage || null,
system: (v.blocks || []).map(id => ({ text: DATA.BLOCKS[id] })),
tools: (v.tools || []).map(id => DATA.TOOLDEFS[id]),
messages: v.messagesId != null ? (DATA.MESSAGES[v.messagesId] || []) : [],
msg_shape: v.msg_shape || null,
mcp_connecting: v.mcp_connecting || false,
captured_at: v.captured_at || null,
reply: v.reply != null ? v.reply : null,
stop_reason: v.stop_reason || null,
effort: v.effort || null,
diagnostics: v.diagnostics || null,
metadata: v.metadata || null,
header_summary: v.headers || {},
fallbacks: v.fallbacks || null,
thinking: v.thinking || null,
response_model: v.response_model || null,
};
}
function getDetail(version){
const at = version.indexOf("@");
if (at > 0) {
const baseV = version.slice(0, at), vid = version.slice(at + 1);
const base = DATA.VERSIONS[baseV];
const va = base && base.variants ? base.variants.find(x => x.id === vid) : null;
if (!va) return null;
const d = resolveCapture(va.detail, version);
d.displayVersion = `${baseV} ⎇ ${shortModel(va.model_in_request)}`;
d.variantAxis = va.axis || null;
d.variants = [];
return d;
}
const v = DATA.VERSIONS[version];
if (!v) {
const idx = DATA.INDEX.find(x=>x.version===version);
if (idx && idx.result === "fail") return { version, result:"fail", error:"timeout-no-request" };
return null;
}
if (v.result === "fail") return { version, result:"fail", error: v.error || "timeout-no-request" };
const d = resolveCapture(v, version);
d.variants = (v.variants || []).map(va => ({ id: va.id, pinned_model: va.pinned_model, model_in_request: va.model_in_request, axis: va.axis || null, detail: resolveCapture(va.detail, version) }));
return d;
}
function prevOf(version){ const k=semverKey(version); const ok=DATA.INDEX.filter(x=>x.result==="ok"); const sorted=[...ok].sort((a,b)=>semverKey(a.version)semverKey(x.version)>=k); return i>0?sorted[i-1].version:null; }
function neighbors(version){ const sorted=[...DATA.INDEX].sort((a,b)=>semverKey(a.version)x.version===version); return { prev:i>0?sorted[i-1].version:null, next:i x.result==="ok" && !x.aux && x.delta && Object.keys(x.delta).length>0);
if(hit){ const from = prevOf(hit.version); if(from) return { from, to: hit.version }; }
// fallback: newest two ok versions (degenerate corpora self-pair — no hardcoded versions)
const ok = DATA.INDEX.filter(x=>x.result==="ok" && !x.aux);
const to = ok[0] ? ok[0].version : (DATA.INDEX[0] ? DATA.INDEX[0].version : "");
const from = ok[1] ? ok[1].version : to;
return { from, to };
}
/* ---------- Timeline ---------- */
function TimelineView({ t, go }) {
const shown = DATA.INDEX.filter(r => r.result !== "fail" && !r.aux);
// count hidden (fail/aux) versions between each shown row and the next-older shown row
const idxPos = new Map(DATA.INDEX.map((r,i)=>[r.version,i]));
const rows = shown.map((row,i)=>{
let gap = 0, gapFrom = null, gapTo = null;
if(i < shown.length-1){
const a = idxPos.get(row.version), b = idxPos.get(shown[i+1].version);
if(a!=null && b!=null && b-a>1){
gap = b-a-1;
gapFrom = DATA.INDEX[b-1].version; // older end (just above next shown)
gapTo = DATA.INDEX[a+1].version; // newer end (just below this shown)
}
}
return { row, gap, gapFrom, gapTo };
});
return (
{t.tagline}
{t.intro}
{inlineCode(t.captureBanner)}
{t.timeline}
{t.whatChanged} →
{rows.map(({row,gap,gapFrom,gapTo}, i) => (
))}
);
}
function TimelineGap({ count, from, to, t }) {
return (
);
}
function TimelineRow({ row, t, go, last }) {
const fail = row.result === "fail";
const [hover, setHover] = React.useState(false);
return (
);
}
/* ---------- What changed (explorer, unified) ---------- */
function deltaHasChange(d){
if(!d) return false;
const arr=["tools_added","tools_removed","tools_modified","betas_added","betas_removed","reminders_added","reminders_removed","body_keys_added","body_keys_removed"];
if(arr.some(k=>(d[k]||[]).length)) return true;
if(d.probe_changed||d.model_changed||d.max_tokens_changed||d.effort_changed||d.fallbacks_changed||d.thinking_changed||d.regime_changed||d.temperature_changed||d.stream_changed||d.context_management_changed||d.diagnostics_changed) return true;
if(d.system_chars_delta||d.system_blocks_changed) return true;
if(d.context_body_changed) return true;
return false;
}
function WhatChanged({ delta, t, version, go, pair }) {
if (!delta) return {t.delta.first};
const fromV = pair ? pair.from : prevOf(version);
const toKey = pair ? pair.to : version;
const mkJump = (focus) => fromV ? () => go({ view:"compare", from:fromV, to:toKey, focus }) : null;
const jump = mkJump();
const rn = (k) => (t.delta.reminderNames && t.delta.reminderNames[k]) || k;
const tones = {
add: { fg:"var(--add-text)", edge:"var(--add-edge)", surf:"var(--add-surface)" },
del: { fg:"var(--del-text)", edge:"var(--del-edge)", surf:"var(--del-surface)" },
mod: { fg:"var(--mod-text)", edge:"var(--mod-edge)", surf:"var(--mod-surface)" },
brand: { fg:"var(--brand-press)", edge:"var(--brand-tint)", surf:"var(--surface-tint)" },
};
const groups = [
{ label:t.added, tone:"add", strike:false, items:delta.tools_added, focus:"tools" },
{ label:t.modifiedLabel,tone:"mod", strike:false, items:delta.tools_modified, focus:"tools" },
{ label:t.removed, tone:"del", strike:true, items:delta.tools_removed, focus:"tools" },
{ label:`${t.added} · ${t.delta.context}`, tone:"add", strike:false, items:(delta.reminders_added||[]).map(rn), focus:"context" },
{ label:`${t.removed} · ${t.delta.context}`, tone:"del", strike:true, items:(delta.reminders_removed||[]).map(rn), focus:"context" },
{ label:`${t.added} · beta`, tone:"brand", strike:false, items:delta.betas_added, focus:"beta" },
{ label:`${t.removed} · beta`, tone:"del", strike:true, items:delta.betas_removed, focus:"beta" },
].filter(g => g.items && g.items.length);
// scalar (non-named) changes → muted meta line
const meta = [];
if (delta.system_chars_delta) meta.push(`${t.systemPrompt} ${delta.system_chars_delta>0?"+":""}${delta.system_chars_delta.toLocaleString("en-US")} ${t.delta.chars}`);
if (delta.system_blocks_changed) meta.push(`${t.delta.systemBlocks} ${delta.system_blocks_changed.from} → ${delta.system_blocks_changed.to}`);
if ((delta.body_keys_added||[]).length) meta.push(`body +${delta.body_keys_added.join(" +")}`);
if ((delta.body_keys_removed||[]).length) meta.push(`body −${delta.body_keys_removed.join(" −")}`);
if (delta.model_changed) meta.push(`${t.model} ${shortModel(delta.model_changed.from)} → ${shortModel(delta.model_changed.to)}`);
if (delta.fallbacks_changed) meta.push(`fallbacks ${delta.fallbacks_changed.to ? JSON.stringify(delta.fallbacks_changed.to) : t.absent}`);
if (delta.max_tokens_changed) meta.push(`max_tokens ${(delta.max_tokens_changed.to!=null?delta.max_tokens_changed.to:0).toLocaleString("en-US")}`);
if (delta.effort_changed) meta.push(`effort ${delta.effort_changed.to!=null?delta.effort_changed.to:"—"}`);
if (delta.thinking_changed) meta.push(`thinking ${delta.thinking_changed.from!=null?delta.thinking_changed.from:"—"} → ${delta.thinking_changed.to!=null?delta.thinking_changed.to:"—"}`);
if (delta.regime_changed) meta.push(`regime ${delta.regime_changed.from} → ${delta.regime_changed.to}`);
if (delta.temperature_changed) meta.push(`temperature ${delta.temperature_changed.from!=null?delta.temperature_changed.from:"—"} → ${delta.temperature_changed.to!=null?delta.temperature_changed.to:"—"}`);
if (delta.stream_changed) meta.push(`stream ${delta.stream_changed.from!=null?delta.stream_changed.from:"—"} → ${delta.stream_changed.to!=null?delta.stream_changed.to:"—"}`);
// Uncounted (boolean) changes use modifiedLabel — t.delta.modified carries the
// zh measure word ("个修改") and reads broken without a number in front.
if (delta.context_management_changed) meta.push(`context_management ${delta.context_management_changed.from?"~":"— →"} ${delta.context_management_changed.to?(delta.context_management_changed.from?t.modifiedLabel:"set"):"—"}`);
if (delta.diagnostics_changed) meta.push(`diagnostics ${delta.diagnostics_changed.from!=null?t.modifiedLabel:"— → set"}`);
if (delta.probe_changed) meta.push(`${t.probe} ${delta.probe_changed.from} → ${delta.probe_changed.to}`);
if (delta.context_body_changed && !(delta.reminders_added||[]).length && !(delta.reminders_removed||[]).length) meta.push(`${t.injectedContext} ~ ${t.modifiedLabel}`);
if (!groups.length && !meta.length) return {t.delta.noChange};
return (
{groups.map((g, gi) => {
const c = tones[g.tone];
const gJump = mkJump(g.focus);
return (
{g.label}
{g.items.length}
{g.items.map((name,i) => (
))}
);
})}
{meta.length>0 && (
{meta.map((s,i) => ({i>0 && ·}{s} ))}
)}
{jump && (
)}
);
}
/* ---------- Explorer ---------- */
function ExplorerView({ t, locale, version, capture, go, backRoute }) {
const detail = getDetail(version);
const [tab, setTab] = React.useState("system");
const variantIdx = (capture && detail && detail.variants) ? detail.variants.findIndex(v=>v.id===capture) : -1;
const setVariantIdx = (i)=>{ const va = (i>=0 && detail && detail.variants) ? detail.variants[i] : null;
go(va ? { view:"explorer", version, capture: va.id } : { view:"explorer", version }); };
const idx = DATA.INDEX.find(x=>x.version===version);
const { prev, next } = neighbors(version);
const clEntry = CHANGELOG.entries[version] || null;
if (!detail || detail.result === "fail") {
return (
{version}
{t.noCapture}
{t.noCaptureBody}
{clEntry && (
{t.changelog}
{version}
{shortModel(active.model)}
{detail.aux && {t.auxiliary} }
{active.tools.length} {t.toolsCount}
{activeChars.toLocaleString("en-US")} {t.systemChars}
{active.mcp_connecting && {t.mcpNotConnected.label} {t.captures}
setVariantIdx(Number(v))}
options={[
{ value:"-1", label:`${shortModel(detail.model)} · ${t.defaultCapture}` },
...detail.variants.map((va,i)=>({ value:String(i), label: shortModel(va.model_in_request) })),
]} />
)}
{activeVariant && {t.whatChanged}
600} collapsedHeight={260} labels={t.code}>{b.text}
))}
)}
{tab === "tools" && (
{active.tools.map((tool) => (
{t.changelog}
{base(from)} → {base(to)}
{hasZh && (
)}
{L.source}{" "}
{CHANGELOG.source + " · " + CHANGELOG.file}
{shown.map((v) => {
const e = CHANGELOG.entries[v];
const zhArr = useZh ? (CL_ZH[v] || null) : null;
const bullets = zhArr && zhArr.length === e.b.length ? e.b.map((b, i) => zhArr[i] || b) : e.b;
return (
go({ view:"explorer", version:v })} />} />
);
})}
{vers.length > CAP && !showAll && (
)}
{note && {note}
}
);
}
/* ---------- Changelog panel ----------
Official release notes for one version, quoted verbatim. The zh build
artifact (changelog-zh.js) carries reviewed translations as arrays
parallel to entry.b with null for untranslated bullets — those fall
back to the English original per bullet. No runtime translation. */
function ChangelogPanel({ t, locale, version, entry }) {
const L = t.changelogLabels;
const zhArr = locale === "zh" && entry ? (CL_ZH[version] || null) : null;
const hasZh = !!(zhArr && zhArr.length === entry.b.length && zhArr.some(x=>x));
const [mode, setMode] = React.useState("zh"); // "zh" | "en" (zh locale only)
React.useEffect(()=>{ setMode("zh"); }, [version, locale]);
const useZh = hasZh && mode === "zh";
const bullets = entry ? (useZh ? entry.b.map((b,i)=>zhArr[i] || b) : entry.b) : null;
const partial = useZh && zhArr.some(x=>!x);
const note = !entry ? null : useZh ? (partial ? L.mtPartial : L.mtNote) : L.verbatimNote;
return (
setMode(mode==="zh"?"en":"zh")} title={mode==="zh"?L.mtOriginal:L.mtTab} aria-pressed={mode==="zh"}
style={{ display:"inline-flex", alignItems:"center", justifyContent:"center", width:24, height:24, border:"none", background:"none",
cursor:"pointer", borderRadius:"var(--radius-1)", color: mode==="zh" ? "var(--brand)" : "var(--text-faint)", transition:"var(--transition-ui)" }}
onMouseEnter={(e)=>{ e.currentTarget.style.color="var(--text-strong)"; }}
onMouseLeave={(e)=>{ e.currentTarget.style.color = mode==="zh" ? "var(--brand)" : "var(--text-faint)"; }}>
{t.modelAxis}
go({ view:"explorer", version:prev })} />}
{next && go({ view:"explorer", version:next })} />}
);
}
/* ---------- small key/value table ---------- */
function KVTable({ rows, keyWidth = "180px", style }) {
return (
{rows.map(([k,v],i)=>(
{k}
{typeof v === "number" ? v.toLocaleString("en-US") : v}
))}
);
}
/* ---------- Request panel ---------- */
function RequestPanel({ t, detail }) {
const betas = detail.betas || [];
const cm = detail.context_management;
const rows = [
[t.model, detail.model],
["max_tokens", detail.max_tokens != null ? detail.max_tokens.toLocaleString("en-US") : "—"],
["temperature", detail.temperature != null ? String(detail.temperature) : "—"],
["stream", detail.stream != null ? String(detail.stream) : "—"],
["output_config.effort", detail.effort != null ? detail.effort : "—"],
["thinking", detail.thinking ? JSON.stringify(detail.thinking) : "—"],
...(detail.fallbacks ? [["fallbacks", JSON.stringify(detail.fallbacks)]] : []),
["diagnostics", detail.diagnostics ? JSON.stringify(detail.diagnostics) : "—"],
];
return (
{t.betaFeatures} {betas.length ? · {betas.length} : null}
{betas.length ? (
{betas.map(b => {b} )}
) : {t.noBetas}
}
{cm ? (
{t.contextManagement}
{JSON.stringify(cm, null, 2)}
) : null}
{detail.metadata ? (
{t.metadataLabel} · {t.masked}
{JSON.stringify(detail.metadata, null, 2)}
) : null}
{t.headers} · {Object.keys(detail.header_summary).length}
`${k}: ${v}`).join("\n")} labels={t.code}>{Object.entries(detail.header_summary).map(([k,v])=>`${k}: ${v}`).join("\n")}
);
}
/* ---------- Response panel ---------- */
function ResponsePanel({ t, detail }) {
const usage = detail.usage;
const usageRows = usage ? Object.keys(usage).map(k => [k, usage[k]]).filter(([,v]) => v != null) : [];
return (
{t.reply}
{detail.reply != null ? (
assistant
{detail.stop_reason && stop_reason: {detail.stop_reason} }
{detail.reply}
) : {t.noReply}
}
{t.responseUsage}
{usageRows.length > 0
? {t.noUsage}
}
);
}
/* ---------- Messages panel ---------- */
function MessagesPanel({ t, detail }) {
const messages = detail.messages || [];
return (
{t.msgStructure}
{t.messages} {messages.length ? · {messages.length} : null}
{messages.map((m, mi) => (
{(m.content || []).map((c, ci) => (
600} collapsedHeight={200} labels={t.code} style={{ marginBottom: ci < m.content.length-1 ? 8 : 0 }}>{c.text}
))}
))}
);
}
/* ---------- Message structure strip (injected-context signature) ---------- */
function MessageStructure({ shape, t, style }) {
if (!shape) return {t.noInjected}
;
const rn = (k) => (t.delta.reminderNames && t.delta.reminderNames[k]) || k;
const kinds = shape.reminder_kinds || [];
const chip = { display:"inline-flex", alignItems:"center", gap:6, height:24, padding:"0 10px", borderRadius:"var(--radius-pill)", fontFamily:"var(--font-ui)", fontSize:"var(--t-caption)", fontWeight:"var(--w-medium)" };
const stat = (label, val) => (
{val}
{label}
);
return (
{stat(t.blocks, shape.block_count)}
{stat(t.probe, shape.probe)}
{stat(t.cacheBreaks, shape.cache_breaks)}
{kinds.length > 0 && (
{t.reminderKinds}
{kinds.map(k => (
{rn(k)}
))}
)}
);
}
/* ---------- diff engine (kit demo only) ----------
In production these rows are PRECOMPUTED at build time and the UI
just renders them. Here we compute on the fly so the picker works
for any pair in the sample. */
function systemTextOf(detail){ return (detail.system||[]).map(b=>b.text).join("\n\n"); }
function messagesTextOf(detail){ return (detail.messages||[]).map(m=>(m.content||[]).map(c=>c.text).join("\n")).join("\n\n"); }
/* Split a system prompt into `# Heading` sections (h1 boundaries).
Text before the first heading becomes the "(preamble)" section. */
function splitSections(text){
const lines = (text||"").split("\n");
const out = []; let cur = { title:"(preamble)", lines:[] };
for(const ln of lines){
const m = ln.match(/^#\s+(.+?)\s*$/);
if(m){ out.push(cur); cur = { title:m[1], lines:[ln] }; }
else cur.lines.push(ln);
}
out.push(cur);
return out.filter((s,i)=> !(i===0 && s.title==="(preamble)" && s.lines.join("").trim()===""));
}
/* Section-level diff: classify each section added/removed/modified/unchanged,
in B's order with removed sections appended. */
function sectionDiff(aText, bText){
const A=splitSections(aText), B=splitSections(bText);
const aMap=new Map(), bMap=new Map();
A.forEach(s=>{ if(!aMap.has(s.title)) aMap.set(s.title,s); });
B.forEach(s=>{ if(!bMap.has(s.title)) bMap.set(s.title,s); });
const out=[];
B.forEach(s=>{
const a=aMap.get(s.title);
if(!a){ out.push({ title:s.title, status:"added", bLines:s.lines }); return; }
const ab=a.lines.join("\n"), bb=s.lines.join("\n");
if(ab===bb) out.push({ title:s.title, status:"unchanged" });
else out.push({ title:s.title, status:"modified", aLines:a.lines, bLines:s.lines });
});
A.forEach(s=>{ if(!bMap.has(s.title)) out.push({ title:s.title, status:"removed", aLines:s.lines }); });
return out;
}
function lineDiff(aLines, bLines){
const n=aLines.length, m=bLines.length;
const dp=Array.from({length:n+1},()=>new Int32Array(m+1));
for(let i=n-1;i>=0;i--) for(let j=m-1;j>=0;j--)
dp[i][j]= aLines[i]===bLines[j] ? dp[i+1][j+1]+1 : Math.max(dp[i+1][j], dp[i][j+1]);
const rows=[]; let i=0,j=0,oldNo=1,newNo=1;
while(i= dp[i][j+1]){ rows.push({kind:"del",oldNo:oldNo++,text:aLines[i]}); i++; }
else { rows.push({kind:"add",newNo:newNo++,text:bLines[j]}); j++; }
}
while(i{ if(r.kind!=="context"){ for(let k=Math.max(0,idx-ctx);k<=Math.min(rows.length-1,idx+ctx);k++) keep[k]=true; } });
const out=[]; let gap=0;
rows.forEach((r,idx)=>{ if(keep[idx]){ if(gap){ out.push({kind:"gap",count:gap}); gap=0; } out.push(r); } else gap++; });
if(gap) out.push({kind:"gap",count:gap});
return out;
}
/* Word-level intra-line highlight for adjacent 1:1 del→add "modified" pairs.
Only triggers when the two lines are similar enough (shared-token ratio),
so true add/remove lines stay whole. Attaches .segs to both rows. */
function tokenizeLine(s){ return String(s).match(/\s+|[^\s]+/g) || []; }
function wordLCS(a,b){
const n=a.length,m=b.length;
const dp=Array.from({length:n+1},()=>new Int32Array(m+1));
for(let i=n-1;i>=0;i--)for(let j=m-1;j>=0;j--) dp[i][j]= a[i]===b[j]?dp[i+1][j+1]+1:Math.max(dp[i+1][j],dp[i][j+1]);
const aMark=new Array(n).fill(true), bMark=new Array(m).fill(true);
let i=0,j=0;
while(i=dp[i][j+1]) i++; else j++; }
return { aMark, bMark, common: dp[0][0] };
}
function segsFrom(tokens, marks){
const segs=[]; for(let i=0;i=rows.length || rows[i+2].kind!=="add") && (i===0 || rows[i-1].kind!=="del")){
const at=tokenizeLine(a.text), bt=tokenizeLine(b.text);
const { aMark, bMark, common }=wordLCS(at,bt);
const ratio = common / Math.max(1, Math.min(at.filter(t=>t.trim()).length, bt.filter(t=>t.trim()).length));
if(ratio >= 0.34){ a.segs=segsFrom(at,aMark); b.segs=segsFrom(bt,bMark); }
i++;
}
}
return rows;
}
function toolDiff(aTools, bTools){
const aMap=new Map((aTools||[]).map(x=>[x.name,x])), bMap=new Map((bTools||[]).map(x=>[x.name,x]));
const added=[], modified=[], removed=[];
(bTools||[]).forEach(x=>{ if(!aMap.has(x.name)) added.push({...x,change:"added"});
else { const o=aMap.get(x.name);
const descChanged=o.description!==x.description, schemaChanged=JSON.stringify(o.schema)!==JSON.stringify(x.schema);
if(descChanged||schemaChanged) modified.push({...x, change:"modified",
mods:[descChanged?"description":null, schemaChanged?"input_schema":null].filter(Boolean),
prevDescription:o.description, prevSchema:o.schema, descChanged, schemaChanged }); } });
(aTools||[]).forEach(x=>{ if(!bMap.has(x.name)) removed.push({...x,change:"removed"}); });
return { added, removed, modified, all:[...added, ...modified, ...removed] };
}
/* Modified-tool card: shows an inline before→after line diff of the
description and/or input_schema (reuses the line-diff engine). */
function ModifiedToolCard({ tool, t, defaultOpen=false }){
const [open, setOpen] = React.useState(defaultOpen);
const descRows = tool.descChanged ? hunk(lineDiff(String(tool.prevDescription||"").split("\n"), String(tool.description||"").split("\n"))) : null;
const schemaRows = tool.schemaChanged ? hunk(lineDiff(JSON.stringify(tool.prevSchema, null, 2).split("\n"), JSON.stringify(tool.schema, null, 2).split("\n"))) : null;
const well = { border:"1px solid var(--line-hairline)", borderRadius:"var(--radius-2)", overflow:"hidden", background:"var(--surface-card)" };
const renderRows = (rows) => markPairs(rows).map((l,i)=> l.kind==="gap"
? {l.text || " "} );
return (
{open && (
{descRows && (
description
{renderRows(descRows)}
)}
{schemaRows && (
input_schema
{renderRows(schemaRows)}
)}
)}
);
}
/* ---------- System-prompt diff (section-aware + unified) ---------- */
function SystemDiff({ sections, rows, t }) {
const [mode, setMode] = React.useState("section");
const counts = React.useMemo(()=>{
const c={ added:0, removed:0, modified:0, unchanged:0 };
sections.forEach(s=>{ c[s.status]++; });
return c;
}, [sections]);
return (
{counts.added>0 && +{counts.added} {t.added} }
{counts.removed>0 && −{counts.removed} {t.removed} }
{counts.modified>0 && ~{counts.modified} {t.modifiedLabel} }
{counts.unchanged>0 && {counts.unchanged} {t.unchangedLabel} }
{t.sections}
{l.text || " "}
)}
) : (
{(function(){ const fc=sections.findIndex(s=>s.status!=="unchanged"); return sections.map((s, i) => {l.text || " "}
)}
)}
);
}
/* ---------- Compare ---------- */
function CompareView({ t, locale, from, to, go, focus }) {
const okVersions = React.useMemo(()=>{
const out = [];
DATA.INDEX.filter(x=>x.result==="ok").forEach(x=>{
out.push({ value: x.version, label: x.version });
(x.variants||[]).forEach(vid=>{
const va = ((DATA.VERSIONS[x.version]||{}).variants||[]).find(z=>z.id===vid);
out.push({ value: `${x.version}@${vid}`, label: `${x.version} ⎇ ${shortModel(va ? va.model_in_request : vid)}` });
});
});
return out;
}, []);
const a = getDetail(from), b = getDetail(to);
const valid = a && b && a.result!=="fail" && b.result!=="fail";
React.useEffect(()=>{
if(!focus) return;
const id = focus==="beta" ? "cmp-context" : "cmp-"+focus;
let tries = 0, timer;
const tryScroll = ()=>{
const el = document.getElementById(id);
if(el){ const y = el.getBoundingClientRect().top + window.scrollY - 76; window.scrollTo(0, y); document.documentElement.scrollTop = y; return; }
if(tries++ < 20){ timer = setTimeout(tryScroll, 100); }
};
timer = setTimeout(tryScroll, 150);
return ()=>clearTimeout(timer);
}, [focus, from, to]);
const { rows, sections, adds, dels, tools, betaAdded, betaRemoved, maxChange, modelChange, fbChange, thinkingChange, effortChange, tempChange, streamChange, cmChange, diagChange, ctx } = React.useMemo(()=>{
if(!valid) return { rows:[], sections:[], adds:0, dels:0, tools:[], betaAdded:[], betaRemoved:[], maxChange:null, modelChange:null, fbChange:null, thinkingChange:null, effortChange:null, tempChange:null, streamChange:null, cmChange:null, diagChange:null, ctx:null };
const raw = lineDiff(systemTextOf(a).split("\n"), systemTextOf(b).split("\n"));
const pB=new Set(a.betas||[]), cB=new Set(b.betas||[]);
const sa=a.msg_shape, sb=b.msg_shape;
const pR=new Set((sa&&sa.reminder_kinds)||[]), cR=new Set((sb&&sb.reminder_kinds)||[]);
const ctx = (sa&&sb) ? {
added:(sb.reminder_kinds||[]).filter(x=>!pR.has(x)),
removed:(sa.reminder_kinds||[]).filter(x=>!cR.has(x)),
from:sa, to:sb,
probeChanged: sa.probe!==sb.probe ? { from:sa.probe, to:sb.probe } : null,
blockChanged: sa.block_count!==sb.block_count ? { from:sa.block_count, to:sb.block_count } : null,
textRows: (function(){ const at=messagesTextOf(a), bt=messagesTextOf(b); if(at===bt) return null; const raw=lineDiff(at.split("\n"), bt.split("\n")); return { rows:hunk(raw), adds:raw.filter(r=>r.kind==="add").length, dels:raw.filter(r=>r.kind==="del").length }; })(),
} : null;
return {
rows: hunk(raw),
sections: sectionDiff(systemTextOf(a), systemTextOf(b)),
adds: raw.filter(r=>r.kind==="add").length,
dels: raw.filter(r=>r.kind==="del").length,
tools: toolDiff(a.tools, b.tools),
betaAdded: (b.betas||[]).filter(x=>!pB.has(x)),
betaRemoved: (a.betas||[]).filter(x=>!cB.has(x)),
maxChange: a.max_tokens!==b.max_tokens ? { from:a.max_tokens, to:b.max_tokens } : null,
modelChange: a.model!==b.model ? { from:a.model, to:b.model } : null,
fbChange: JSON.stringify(a.fallbacks||null)!==JSON.stringify(b.fallbacks||null) ? { from:a.fallbacks||null, to:b.fallbacks||null } : null,
thinkingChange: JSON.stringify(a.thinking||null)!==JSON.stringify(b.thinking||null) ? { from:a.thinking||null, to:b.thinking||null } : null,
effortChange: (a.effort||null)!==(b.effort||null) ? { from:a.effort||null, to:b.effort||null } : null,
tempChange: JSON.stringify(a.temperature??null)!==JSON.stringify(b.temperature??null) ? { from:a.temperature??null, to:b.temperature??null } : null,
streamChange: JSON.stringify(a.stream??null)!==JSON.stringify(b.stream??null) ? { from:a.stream??null, to:b.stream??null } : null,
cmChange: JSON.stringify(a.context_management||null)!==JSON.stringify(b.context_management||null) ? { from:a.context_management||null, to:b.context_management||null } : null,
diagChange: JSON.stringify(a.diagnostics||null)!==JSON.stringify(b.diagnostics||null) ? { from:a.diagnostics||null, to:b.diagnostics||null } : null,
ctx,
};
}, [from, to]);
const noSystemChange = valid && adds===0 && dels===0;
const noToolChange = valid && tools.all.length===0;
const noBetaChange = valid && !(betaAdded.length || betaRemoved.length || maxChange || modelChange || fbChange || thinkingChange || effortChange || tempChange || streamChange || cmChange || diagChange);
const noCtxChange = valid && !(ctx && (ctx.added.length || ctx.removed.length || ctx.probeChanged || ctx.blockChanged || ctx.textRows));
const outline = React.useMemo(()=>{
if(!valid) return [];
const out = [];
if(!noSystemChange){
const items = sections.map((s,i)=>({ s, i })).filter(({s})=>s.status!=="unchanged")
.map(({s,i})=>({ id:`sec-${i}`, name: s.title==="(preamble)"?t.preamble:s.title, status:s.status }));
out.push({ id:"cmp-system", label:t.systemDiff, counts:{ add:adds, del:dels }, items });
}
if(!noToolChange){
out.push({ id:"cmp-tools", label:t.toolChanges, counts:{ add:tools.added.length, mod:tools.modified.length, del:tools.removed.length },
items: tools.all.map(x=>({ id:`tool-${x.name}`, name:x.name, status:x.change })) });
}
if(!noBetaChange) out.push({ id:"cmp-beta", label:t.betaChanges, counts:{ add:betaAdded.length, del:betaRemoved.length }, items:[] });
if(!noCtxChange){ const ba=ctx.textRows?ctx.textRows.adds:0, bd=ctx.textRows?ctx.textRows.dels:0; const cmod=(ctx.probeChanged?1:0)+(ctx.blockChanged?1:0); out.push({ id:"cmp-context", label:t.injectedChanges, counts:{ add:ctx.added.length+ba, del:ctx.removed.length+bd, mod:cmod }, items:[] }); }
if(changelogRangeVersions(from, to).length) out.push({ id:"cmp-changelog", label:t.changelog, counts:{}, items:[] });
return out;
}, [valid, from, to]);
const [activeId, setActiveId] = React.useState(null);
React.useEffect(()=>{
if(!valid || !outline.length) return;
const ids = outline.map(o=>o.id);
const onScroll = ()=>{
if(window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 4){ setActiveId(ids[ids.length-1]); return; }
const target = 110;
let best = ids[0], bestDist = Infinity;
for(const id of ids){ const el=document.getElementById(id); if(!el) continue; const d=Math.abs(el.getBoundingClientRect().top - target); if(dwindow.removeEventListener("scroll", onScroll);
}, [outline, from, to]);
const scrollTo = (id)=>{ const el=document.getElementById(id); if(el){ const y=el.getBoundingClientRect().top+window.scrollY-76; window.scrollTo(0,y); document.documentElement.scrollTop=y; } };
const [railOpen, setRailOpen] = React.useState(true);
return (
{t.compareVersions}
go({ view:"compare", from:v, to })} />
go({ view:"compare", from, to:v })} />
{valid && (
+{adds} −{dels}
{tools.all.length} {t.toolsCount}
{(betaAdded.length+betaRemoved.length)>0 && {betaAdded.length+betaRemoved.length} {t.delta.betas} }
{(a.mcp_connecting || b.mcp_connecting) && {t.mcpNotConnected.label} {t.cantCompare}
) : (
{railOpen
? setRailOpen(false)} t={t} />
: }
{(noSystemChange && noToolChange && noBetaChange && noCtxChange) && (
{t.noDiffChange}
)}
{!noSystemChange && (
{t.systemDiff}
{t.toolChanges}
{tools.added.length>0 && +{tools.added.length} {t.added} }
{tools.removed.length>0 && −{tools.removed.length} {t.removed} }
{tools.modified.length>0 && ~{tools.modified.length} {t.modifiedLabel} }
{["added","modified","removed"].map(group => tools[group].length>0 ? (
{tools[group].map(tool => (
{tool.change==="modified"
? {t.betaChanges}
{modelChange && (
model
{modelChange.from || "—"}
fallbacks
{fbChange.from ? JSON.stringify(fbChange.from) : t.absent}
thinking
{thinkingChange.from ? JSON.stringify(thinkingChange.from) : t.absent}
{label}
{ch.from!=null ? JSON.stringify(ch.from) : t.absent}
{t.maxTokens}
{maxChange.from!=null?maxChange.from.toLocaleString("en-US"):"—"}
+ {x} )}
{betaRemoved.map(x=>− {x} )}
) : null}
)}
{!noCtxChange && (
{t.injectedChanges}
{(ctx.added.length || ctx.removed.length) ? (
{ctx.added.map(k=>+ {(t.delta.reminderNames&&t.delta.reminderNames[k])||k} )}
{ctx.removed.map(k=>− {(t.delta.reminderNames&&t.delta.reminderNames[k])||k} )}
) : null}
{ctx.probeChanged && (
{t.probe}
{ctx.probeChanged.from}
{t.blocks}
{ctx.blockChanged.from}
)}
);
}
function CompareOutline({ outline, activeId, onJump, onCollapse, t }){
if(!outline.length) return ;
return (
);
}
function InjectedContentDiff({ data, t }){
const [open, setOpen] = React.useState(false);
return (
{open && (
{markPairs(data.rows).map((l,i)=> l.kind==="gap"
? {l.text || " "}
)}
)}
);
}
function GapRow({ count, t }){
return (
⋯
{t.unchanged(count)}
);
}
function EmptyNote({ children, subtle }){
return {children};
}
function Picker({ label, value, options, onChange }) {
const norm = options.map(o => typeof o === "string" ? { value: o, label: o } : o);
const cur = norm.find(o => o.value === value);
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
const listRef = React.useRef(null);
React.useEffect(()=>{
if(!open) return;
const onDoc = (e)=>{ if(ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onKey = (e)=>{ if(e.key==="Escape") setOpen(false); };
document.addEventListener("mousedown", onDoc);
document.addEventListener("keydown", onKey);
const list = listRef.current;
const sel = list && list.querySelector("[data-on='1']");
if(list && sel){
const lr = list.getBoundingClientRect(), sr = sel.getBoundingClientRect();
list.scrollTop += (sr.top - lr.top) - (lr.height - sr.height) / 2;
}
return ()=>{ document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
}, [open]);
return (
{label}
{open && (
{norm.map(o=>{ const on=o.value===value; return (
); })}
)}
);
}
/* ---------- Search overlay ---------- */
function SearchOverlay({ t, onClose, go }) {
const [q, setQ] = React.useState("");
const inputRef = React.useRef(null);
React.useEffect(()=>{ inputRef.current && inputRef.current.focus(); }, []);
// Reverse index over UNIQUE blocks/tools → newest version using each (built once)
const usage = React.useMemo(()=>{
const blockUsers = {}, toolUsers = {};
DATA.INDEX.forEach(r => {
if (r.result !== "ok") return;
const v = DATA.VERSIONS[r.version];
(v.blocks || []).forEach(id => { (blockUsers[id] = blockUsers[id] || []).push(r.version); });
(v.tools || []).forEach(id => { (toolUsers[id] = toolUsers[id] || []).push(r.version); });
});
return { blockUsers, toolUsers }; // INDEX is newest-first, so [0] is newest
}, []);
const results = React.useMemo(()=>{
const query = q.trim().toLowerCase();
if (query.length < 2) return [];
const out = [];
for (const [id, text] of Object.entries(DATA.BLOCKS)) {
const i = text.toLowerCase().indexOf(query);
if (i >= 0) { const vers = usage.blockUsers[id] || []; if (vers.length) out.push({ version: vers[0], count: vers.length, where: t.inSystem, snippet: snip(text, i, query.length) }); }
}
for (const [id, tool] of Object.entries(DATA.TOOLDEFS)) {
const inName = tool.name.toLowerCase().includes(query);
const di = (tool.description || "").toLowerCase().indexOf(query);
if (inName || di >= 0) { const vers = usage.toolUsers[id] || []; if (vers.length) out.push({ version: vers[0], count: vers.length, where: t.inTools, snippet: di >= 0 ? snip(tool.description, di, query.length) : tool.name }); }
}
return out.slice(0, 16);
}, [q, usage]);
return (
e.stopPropagation()} style={{ width:"100%", maxWidth:680, background:"var(--surface-card)", border:"1px solid var(--line-hairline)",
borderRadius:"var(--radius-4)", boxShadow:"var(--shadow-pop)", overflow:"hidden" }}>
{children};
}
function Footer({ t }) {
return (
);
}
/* ---------- Anatomy (editorial, one-time) ---------- */
function AnatomyView({ t }) {
const A = t.anatomy;
const skeleton =
`POST /v1/messages?beta=true
{
"model": "claude-opus-4-8",
"max_tokens": 64000,
"stream": true,
"output_config": { "effort": "xhigh" },
"context_management": { "edits": [ … ] },
"diagnostics": { "previous_message_id": null },
"system": [ { "text": "You are a Claude agent…", "cache_control": {…} }, … ],
"messages": [ { "role": "user", "content": [ { "text": "# claudeMd…" },
{ "text": "Reply with the single word: ping" } ] },
{ "role": "system", "content": "…available skills · deferred tools · hooks…" } ],
"tools": [ { "name": "Bash", "description": "…", "input_schema": {…} }, … ]
}`;
return (
{A.nav}
{A.title}
{A.lead}
{A.skeletonNote}
{skeleton}
{A.parts.map((p) => (
-
{p.name}
{p.where}
{p.what}
))}
{inlineCode(A.captureNote)}
);
}
/* ---------- App ---------- */
/* Hash routing — mirrors the production static paths:
#/en · #/en/v/2.1.170 · #/en/diff/2.1.169/2.1.170?focus=tools · #/zh/anatomy
Locale-prefixed, deep-linkable; locale switch preserves the route. */
const VALID_LOCALES = ["en", "zh"];
function routeToHash(route, locale){
const p = ["", locale];
if (route.view === "explorer") { p.push("v", encodeURIComponent(route.version)); if (route.capture) p.push(encodeURIComponent(route.capture)); }
else if (route.view === "compare") p.push("diff", encodeURIComponent(route.from), encodeURIComponent(route.to));
else if (route.view === "anatomy") p.push("anatomy");
let h = p.join("/");
if (route.view === "compare" && route.focus) h += "?focus=" + encodeURIComponent(route.focus);
return "#" + h;
}
function parseHash(){
const raw = (window.location.hash || "").replace(/^#/, "");
const [path, query] = raw.split("?");
const seg = (path || "").split("/").filter(Boolean).map(decodeURIComponent);
const locale = VALID_LOCALES.includes(seg[0]) ? seg.shift() : null;
let route = { view: "timeline" };
if (seg[0] === "v" && seg[1]) route = { view: "explorer", version: seg[1], ...(seg[2] ? { capture: seg[2] } : {}) };
else if (seg[0] === "diff" && seg[1] && seg[2]) route = { view: "compare", from: seg[1], to: seg[2] };
else if (seg[0] === "anatomy") route = { view: "anatomy" };
if (query && route.view === "compare") { const m = query.match(/focus=([^&]+)/); if (m) route.focus = decodeURIComponent(m[1]); }
return { locale, route };
}
function App() {
const init = React.useMemo(parseHash, []);
const [route, setRoute] = React.useState(init.route);
// In-session referrer (render-time snapshot: every navigation produces a new
// route object, so identity change == navigation). Lets the explorer's back
// bar return to the compare the visitor came from instead of the timeline.
const navRef = React.useRef({ prev: null, cur: init.route });
if (navRef.current.cur !== route) navRef.current = { prev: navRef.current.cur, cur: route };
const cameFromCompare = navRef.current.prev && navRef.current.prev.view === "compare" ? navRef.current.prev : null;
// localStorage access can throw (e.g. Chromium "block all cookies", some
// file:// configurations) — reads must be as guarded as the writes below.
const lsGet = (k) => { try { return localStorage.getItem(k); } catch (e) { return null; } };
const [locale, setLocale] = React.useState(init.locale || lsGet("lineage-locale") || "en");
const [theme, setTheme] = React.useState(lsGet("lineage-theme") || "light");
const [search, setSearch] = React.useState(false);
const t = L10N[locale];
React.useEffect(()=>{ document.documentElement.setAttribute("data-theme", theme); try{ localStorage.setItem("lineage-theme", theme); }catch(e){} }, [theme]);
React.useEffect(()=>{ document.documentElement.setAttribute("lang", locale === "zh" ? "zh-CN" : "en"); try{ localStorage.setItem("lineage-locale", locale); }catch(e){} }, [locale]);
// route+locale → hash (creates history entries; skip when already in sync)
React.useEffect(()=>{
const h = routeToHash(route, locale);
if (window.location.hash !== h) window.location.hash = h;
}, [route, locale]);
// hash → state (back/forward, hand-edited or shared links)
React.useEffect(()=>{
const on = ()=>{ const { locale: l, route: r } = parseHash(); setRoute(prev => JSON.stringify(prev)===JSON.stringify(r) ? prev : r); if (l) setLocale(l); };
window.addEventListener("hashchange", on);
return ()=>window.removeEventListener("hashchange", on);
}, []);
React.useEffect(()=>{
const h = (e)=>{ if(e.key==="/" && !search && !/input|select|textarea/i.test(e.target.tagName)){ e.preventDefault(); setSearch(true);} if(e.key==="Escape") setSearch(false); };
window.addEventListener("keydown", h); return ()=>window.removeEventListener("keydown", h);
}, [search]);
const go = (r)=>{ setRoute(r); window.scrollTo({ top:0 }); };
return (
setSearch(true)} />
{route.view==="timeline" &&
{search && setSearch(false)} go={go} />}
);
}
ReactDOM.createRoot(document.getElementById("root")).render(