| 1 | /** |
| 2 | * "See how it decides" — a terminal-styled pane that surfaces REAL reasoning |
| 3 | * traces from a Codewhale session, paired with the decision each produced. |
| 4 | * |
| 5 | * The point is "show, don't tell": every agent claims to be aligned/trustworthy; |
| 6 | * Codewhale can prove it, because the Constitution is observable in the model's |
| 7 | * reasoning (it cites "Article II", "Article V", etc. as it decides). No other |
| 8 | * agent can show this because none have a hierarchy the model reasons against. |
| 9 | * |
| 10 | * The traces below are faithful excerpts from an actual session — not invented |
| 11 | * marketing copy. Keep them honest if you edit them (see AGENTS.md Article II). |
| 12 | */ |
| 13 | |
| 14 | export type Scene = { |
| 15 | /** Short tab label for players that show one scene at a time. */ |
| 16 | tab: { en: string; zh: string }; |
| 17 | context: { en: string; zh: string }; |
| 18 | trace: string; |
| 19 | cites: string[]; |
| 20 | decision: { en: string; zh: string }; |
| 21 | }; |
| 22 | |
| 23 | export const SCENES: Scene[] = [ |
| 24 | { |
| 25 | tab: { en: "Stale handoff", zh: "过期交接" }, |
| 26 | context: { |
| 27 | en: "When the prior session's summary didn't match the repo…", |
| 28 | zh: "当上一会话的总结与仓库真实状态不符时……", |
| 29 | }, |
| 30 | trace: |
| 31 | "Per Article II (truth) and V (verification), I report what's actually in the tree — not what the previous agent claimed.", |
| 32 | cites: ["Article II · Truth", "Article V · Verification"], |
| 33 | decision: { |
| 34 | en: "Reported the uncommitted work the summary left out, instead of repeating the claim.", |
| 35 | zh: "如实报告了总结遗漏的未提交改动，而不是照搬旧说法。", |
| 36 | }, |
| 37 | }, |
| 38 | { |
| 39 | tab: { en: "Conflicting orders", zh: "指令冲突" }, |
| 40 | context: { |
| 41 | en: "When a “pause” signal conflicted with the user's request to continue…", |
| 42 | zh: "当「暂停」信号与用户要求继续相冲突时……", |
| 43 | }, |
| 44 | trace: |
| 45 | "The user's current request outranks the runtime statute — so I keep executing the task, not stopping on a technicality.", |
| 46 | cites: ["Article III · User agency", "Article VII · Hierarchy"], |
| 47 | decision: { |
| 48 | en: "Finished the work the user actually asked for.", |
| 49 | zh: "完成了用户真正要求的工作。", |
| 50 | }, |
| 51 | }, |
| 52 | { |
| 53 | tab: { en: "Community credit", zh: "社区署名" }, |
| 54 | context: { |
| 55 | en: "When trimming the README, tempted to drop the contributor wall…", |
| 56 | zh: "精简 README 时，本可删掉贡献者名单……", |
| 57 | }, |
| 58 | trace: |
| 59 | "Deleting community credit would break the project's own ethos. Relocate it instead — zero names lost.", |
| 60 | cites: ["Community ethos"], |
| 61 | decision: { |
| 62 | en: "Moved 200 lines of credits to docs/CONTRIBUTORS.md and linked from the README.", |
| 63 | zh: "把 200 行贡献记录迁到 docs/CONTRIBUTORS.md，并在 README 中给出链接。", |
| 64 | }, |
| 65 | }, |
| 66 | ]; |
| 67 | |
| 68 | export function ThinkingTrace({ locale = "en" }: { locale?: string }) { |
| 69 | const isZh = locale === "zh"; |
| 70 | return ( |
| 71 | <div className="grid gap-6 md:grid-cols-3"> |
| 72 | {SCENES.map((s, i) => ( |
| 73 | <div |
| 74 | key={i} |
| 75 | className="hairline-t hairline-b hairline-l hairline-r bg-paper flex flex-col overflow-hidden" |
| 76 | > |
| 77 | {/* terminal title bar */} |
| 78 | <div className="bg-ink text-paper px-4 py-2.5 flex items-center justify-between"> |
| 79 | <div className="flex items-center gap-1.5"> |
| 80 | <span className="w-2.5 h-2.5 rounded-full bg-jade inline-block" /> |
| 81 | <span className="w-2.5 h-2.5 rounded-full bg-ochre inline-block" /> |
| 82 | <span className="w-2.5 h-2.5 rounded-full bg-indigo inline-block" /> |
| 83 | <span className="ml-2.5 font-mono text-[0.66rem] uppercase tracking-widest text-paper-deep"> |
| 84 | codewhale — thinking |
| 85 | </span> |
| 86 | </div> |
| 87 | <span className="font-cjk text-[0.6rem] text-paper-deep/70"> |
| 88 | {isZh ? "推理痕迹" : "reasoning trace"} |
| 89 | </span> |
| 90 | </div> |
| 91 | |
| 92 | {/* context */} |
| 93 | <div className="px-4 pt-4 text-[0.66rem] font-mono uppercase tracking-wider text-ink-mute"> |
| 94 | {isZh ? s.context.zh : s.context.en} |
| 95 | </div> |
| 96 | |
| 97 | {/* the trace */} |
| 98 | <pre className="px-4 py-3 font-mono text-[0.82rem] text-ink leading-relaxed whitespace-pre-wrap flex-1"> |
| 99 | <span className="text-indigo">›</span>{" "} |
| 100 | <span className="text-ink-soft">{s.trace}</span> |
| 101 | </pre> |
| 102 | |
| 103 | {/* cited authority */} |
| 104 | <div className="px-4 pb-3 flex flex-wrap gap-1.5"> |
| 105 | {s.cites.map((c) => ( |
| 106 | <span key={c} className="pill text-[0.58rem] tracking-wider"> |
| 107 | {c} |
| 108 | </span> |
| 109 | ))} |
| 110 | </div> |
| 111 | |
| 112 | {/* the decision it produced */} |
| 113 | <div className="bg-indigo-pale px-4 py-3 hairline-t text-[0.8rem] leading-relaxed text-ink-soft"> |
| 114 | <span className="font-display text-indigo font-semibold mr-1">→</span> |
| 115 | {isZh ? s.decision.zh : s.decision.en} |
| 116 | </div> |
| 117 | </div> |
| 118 | ))} |
| 119 | </div> |
| 120 | ); |
| 121 | } |