From c6ee965764046c58811f24860da20dd1853c3b8f Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Nov 2026 12:01:24 +0000 Subject: [PATCH 1/2] Fit the cryptography visualizers on phones Quality item 10 from the visualizer audit: three Computational Mathematics visualizers were up to 260 px wider than a phone. - Secret-key flow: the five stations now sit 95 units apart in a 480-wide drawing (was 660, with a forced 520 px minimum), so it fits a phone with readable labels and looks much the same on desktop. - Stream cipher: bits are grouped by byte (one character), each group showing message, key and output, and groups wrap onto new lines on narrow screens instead of forming one long row. - Affine map: no forced 560 px minimum below the sm breakpoint, and its letters are drawn larger there so they stay readable after the drawing scales down. Desktop is unchanged. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp --- docs/autopilot.md | 1 + src/components/mdx/CipherVisualizers.tsx | 34 ++++++++++++++++-------- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/autopilot.md b/docs/autopilot.md index 508c4b0..901d116 100644 --- a/docs/autopilot.md +++ b/docs/autopilot.md @@ -75,6 +75,7 @@ Nothing yet. Newest first. One line per run: date and run, what was done, PR link, merged or open. +- 2026-11-07 14:50 (run C): quality item 10 (from #54), the three cryptography visualizers now fit 390 px: secret-key flow redrawn 480 units wide (was 660 with a 520 px minimum), stream-cipher bits grouped by byte and wrapping, affine map without its 560 px minimum on phones and with larger letters there. Noted: main's Computational Mathematics rounds changed the Polynomials quiz (8dcfbf2), one more quiz edit the exam stack must absorb at its next rebase. PR #71, open. - 2026-11-03 (owner request): new direction. Distributed Systems parked (#49 closed, branch kept; M2 had been added by run A that morning). Bun pinned (#51, open). Exam plan written in `docs/exams.md` and queued here (#52, open). Runs A and B switched from course work to exam work. - 2026-11-02 14:50 (run C): quality items 1-4 were already done on main (issue #42's checklist is stale), so took item 5: README course table (#38). PR #50, merged. - 2026-11-02 01:10 (setup): wrote this file. Baseline: 2,104 tests pass, lint 0 errors, CI green on `main` (82faa87). diff --git a/src/components/mdx/CipherVisualizers.tsx b/src/components/mdx/CipherVisualizers.tsx index 5783cd9..3adf3f8 100644 --- a/src/components/mdx/CipherVisualizers.tsx +++ b/src/components/mdx/CipherVisualizers.tsx @@ -6,7 +6,8 @@ import { gcd, inverseMod } from "@/lib/numberTheory"; /* ------------------------------ secret-key flow ----------------------------- */ -const FLOW_X = [60, 190, 330, 470, 600]; +// Stations sit 95 units apart in a 480-wide drawing, so it fits a phone without shrinking the text too far. +const FLOW_X = [50, 145, 240, 335, 430]; export function SecretKeyFlow({ text = "HELLO", k = 3 }: { text?: string; k?: number }) { const frames = useMemo(() => flowFrames(text, k), [text, k]); @@ -25,7 +26,7 @@ export function SecretKeyFlow({ text = "HELLO", k = 3 }: { text?: string; k?: nu { x: FLOW_X[3], label: "D" }, ]; return ( - + public channel @@ -60,7 +61,7 @@ function BitRow({ label, bits, at, tone, keyPrefix }: { label: string; bits: (nu {bits.map((b, i) => (
0 && i % 8 === 0 ? "ml-2" : ""}`} + className={`w-6 h-7 shrink-0 flex items-center justify-center text-[12px] rounded-[2px] border transition-[transform,background-color,border-color,opacity] duration-200 motion-reduce:transition-none ${i === at ? `${tone} scale-110` : "border-border bg-background/50"}`} style={{ opacity: b === null ? 0.25 : 1 }} > {b ?? "·"} @@ -92,11 +93,22 @@ export function XorStreamVisualizer() {
} render={(s) => ( -
- - -
- +
+ {/* One group per byte (character). Groups sit side by side and wrap onto new lines on a phone. */} +
+ {Array.from({ length: Math.ceil(s.input.length / 8) }, (_, g) => { + const part = (xs: (number | null)[]) => xs.slice(g * 8, g * 8 + 8); + const at = s.at !== null && s.at >= g * 8 && s.at < g * 8 + 8 ? s.at - g * 8 : null; + return ( +
+ + +
+ +
+ ); + })} +
{s.decrypt && s.output.every((x) => x !== null) ? <>reads: {bitsToText(s.output as number[])} : ""}
@@ -226,7 +238,7 @@ export function AffineMapVisualizer({ start = "SECURITY" }: { start?: string }) return (
- + {ALPHABET.split("").map((_, m) => { const x1 = m * STEP + 14; const x2 = (xs[m] ?? table[m]) * STEP + 14; @@ -234,8 +246,8 @@ export function AffineMapVisualizer({ start = "SECURITY" }: { start?: string }) })} {ALPHABET.split("").map((ch, i) => ( - {ch} - {ch} + {ch} + {ch} ))} From 27e66eba6a186c30e0c18cdcab3e45b61df0e4b0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 7 Nov 2026 12:01:34 +0000 Subject: [PATCH 2/2] Correct the PR number in the autopilot log Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01EC6Zzt5akQu7TEHdGquZzp --- docs/autopilot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/autopilot.md b/docs/autopilot.md index 901d116..8b84ebf 100644 --- a/docs/autopilot.md +++ b/docs/autopilot.md @@ -75,7 +75,7 @@ Nothing yet. Newest first. One line per run: date and run, what was done, PR link, merged or open. -- 2026-11-07 14:50 (run C): quality item 10 (from #54), the three cryptography visualizers now fit 390 px: secret-key flow redrawn 480 units wide (was 660 with a 520 px minimum), stream-cipher bits grouped by byte and wrapping, affine map without its 560 px minimum on phones and with larger letters there. Noted: main's Computational Mathematics rounds changed the Polynomials quiz (8dcfbf2), one more quiz edit the exam stack must absorb at its next rebase. PR #71, open. +- 2026-11-07 14:50 (run C): quality item 10 (from #54), the three cryptography visualizers now fit 390 px: secret-key flow redrawn 480 units wide (was 660 with a 520 px minimum), stream-cipher bits grouped by byte and wrapping, affine map without its 560 px minimum on phones and with larger letters there. Noted: main's Computational Mathematics rounds changed the Polynomials quiz (8dcfbf2), one more quiz edit the exam stack must absorb at its next rebase. PR #73, open. - 2026-11-03 (owner request): new direction. Distributed Systems parked (#49 closed, branch kept; M2 had been added by run A that morning). Bun pinned (#51, open). Exam plan written in `docs/exams.md` and queued here (#52, open). Runs A and B switched from course work to exam work. - 2026-11-02 14:50 (run C): quality items 1-4 were already done on main (issue #42's checklist is stale), so took item 5: README course table (#38). PR #50, merged. - 2026-11-02 01:10 (setup): wrote this file. Baseline: 2,104 tests pass, lint 0 errors, CI green on `main` (82faa87).