Skip to content

Commit 9cd7984

Browse files
benvinegarbenvinegar
authored
docs: add readme screenshot demo (#51)
1 parent e92c316 commit 9cd7984

9 files changed

Lines changed: 269 additions & 0 deletions

File tree

‎examples/6-readme-screenshot/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# 6-readme-screenshot
2+
3+
A screenshot-optimized demo for the main README: a multi-file UI refactor with inline agent rationale.
4+
5+
## Run
6+
7+
```bash
8+
hunk patch examples/6-readme-screenshot/change.patch \
9+
--agent-context examples/6-readme-screenshot/agent-context.json \
10+
--mode split \
11+
--theme midnight
12+
```
13+
14+
## Screenshot setup
15+
16+
- use a wide terminal so the sidebar and split diff are both visible
17+
- keep the first file selected: `src/components/ReviewSummaryCard.tsx`
18+
- make sure agent notes are visible
19+
- capture the first annotated hunk with the note popover open
20+
21+
## What it shows well
22+
23+
- inline agent rationale beside the changed code
24+
- a clear mix of removed and added lines in one hunk
25+
- a visible multi-file sidebar
26+
- TSX prop renames, copy edits, and helper extraction with strong syntax color

‎examples/6-readme-screenshot/after/src/components/ReviewSummaryCard.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { reviewButtonLabel, reviewTimestampLabel } from "../lib/reviewCopy";
2+
3+
type ReviewSummaryCardProps = {
4+
heading: string;
5+
supportingText: string;
6+
fileCount: number;
7+
lastUpdated: string;
8+
onReview: () => void;
9+
};
10+
11+
export function ReviewSummaryCard({
12+
heading,
13+
supportingText,
14+
fileCount,
15+
lastUpdated,
16+
onReview,
17+
}: ReviewSummaryCardProps) {
18+
return (
19+
<box
20+
style={{
21+
padding: 2,
22+
border: true,
23+
borderColor: "#334155",
24+
backgroundColor: "#0f172a",
25+
flexDirection: "column",
26+
gap: 1,
27+
}}
28+
>
29+
<box style={{ flexDirection: "column", gap: 1 }}>
30+
<text fg="#f8fafc">{heading}</text>
31+
<text fg="#94a3b8">{supportingText}</text>
32+
</box>
33+
34+
<box style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
35+
<text fg="#38bdf8">{fileCount} files ready for review</text>
36+
<text fg="#64748b">{reviewTimestampLabel(lastUpdated)}</text>
37+
</box>
38+
39+
<button label={reviewButtonLabel(fileCount)} onPress={onReview} />
40+
</box>
41+
);
42+
}

‎examples/6-readme-screenshot/after/src/lib/reviewCopy.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function reviewButtonLabel(fileCount: number) {
2+
return fileCount === 1 ? "Review 1 file" : `Review ${fileCount} files`;
3+
}
4+
5+
export function reviewTimestampLabel(lastUpdated: string) {
6+
return `Updated ${lastUpdated}`;
7+
}

‎examples/6-readme-screenshot/after/test/reviewSummaryCard.demo.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { expect, test } from "bun:test";
2+
import { ReviewSummaryCard } from "../src/components/ReviewSummaryCard";
3+
import { reviewButtonLabel, reviewTimestampLabel } from "../src/lib/reviewCopy";
4+
5+
test("switches the card copy to review-oriented labels", () => {
6+
expect(ReviewSummaryCard).toBeDefined();
7+
expect(reviewButtonLabel(3)).toBe("Review 3 files");
8+
expect(reviewTimestampLabel("2m ago")).toBe("Updated 2m ago");
9+
});

‎examples/6-readme-screenshot/agent-context.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"version": 1,
3+
"summary": "Reframes a small dashboard card around review language instead of sync language, while extracting the button and timestamp copy into a helper so the main component reads more like layout than string assembly.",
4+
"files": [
5+
{
6+
"path": "src/components/ReviewSummaryCard.tsx",
7+
"summary": "Renames the card props around review terminology and keeps the CTA and timestamp copy derived from helpers.",
8+
"annotations": [
9+
{
10+
"newRange": [1, 37],
11+
"summary": "Shift the component language from sync status to review intent.",
12+
"rationale": "The old names and labels sounded like a background sync card. Renaming the props and CTA makes the purpose feel like a review entrypoint, which reads better in the product and in the screenshot."
13+
}
14+
]
15+
},
16+
{
17+
"path": "src/lib/reviewCopy.ts",
18+
"summary": "Extracts the button and timestamp strings into a tiny helper module.",
19+
"annotations": [
20+
{
21+
"newRange": [1, 7],
22+
"summary": "Keep pluralization and timestamp phrasing out of the component body.",
23+
"rationale": "The main diff already has enough visual motion from the prop renames. Pulling the small copy helpers out keeps the UI file easier to scan while still leaving a second file in the review stream."
24+
}
25+
]
26+
},
27+
{
28+
"path": "test/reviewSummaryCard.demo.ts",
29+
"summary": "Updates the demo test to lock in the new review-oriented copy.",
30+
"annotations": [
31+
{
32+
"newRange": [1, 9],
33+
"summary": "The test now checks the new CTA and timestamp helpers directly.",
34+
"rationale": "That makes the behavioral intent explicit and gives the sidebar a small third file so the screenshot reads as a real multi-file review rather than a one-file toy edit."
35+
}
36+
]
37+
}
38+
]
39+
}

‎examples/6-readme-screenshot/before/src/components/ReviewSummaryCard.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
type ChangeSummaryCardProps = {
2+
title: string;
3+
note: string;
4+
changes: number;
5+
lastSynced: string;
6+
onOpen: () => void;
7+
};
8+
9+
export function ChangeSummaryCard({
10+
title,
11+
note,
12+
changes,
13+
lastSynced,
14+
onOpen,
15+
}: ChangeSummaryCardProps) {
16+
return (
17+
<box
18+
style={{
19+
padding: 2,
20+
border: true,
21+
borderColor: "#334155",
22+
backgroundColor: "#0f172a",
23+
flexDirection: "column",
24+
}}
25+
>
26+
<box style={{ flexDirection: "column", gap: 0 }}>
27+
<text fg="#f8fafc">{title}</text>
28+
<text fg="#94a3b8">{note}</text>
29+
</box>
30+
31+
<box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
32+
<text fg="#38bdf8">{changes} files changed</text>
33+
<text fg="#64748b">Synced {lastSynced}</text>
34+
</box>
35+
36+
<button label="Open diff" onPress={onOpen} />
37+
</box>
38+
);
39+
}

‎examples/6-readme-screenshot/before/test/reviewSummaryCard.demo.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { expect, test } from "bun:test";
2+
import { ChangeSummaryCard } from "../src/components/ReviewSummaryCard";
3+
4+
test("keeps the old sync-oriented labels", () => {
5+
expect(ChangeSummaryCard).toBeDefined();
6+
expect("Open diff").toContain("diff");
7+
expect("Synced 2m ago").toContain("Synced");
8+
});

‎examples/6-readme-screenshot/change.patch‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
diff --git a/src/components/ReviewSummaryCard.tsx b/src/components/ReviewSummaryCard.tsx
2+
index 73a5e7f..9136307 100644
3+
--- a/src/components/ReviewSummaryCard.tsx
4+
+++ b/src/components/ReviewSummaryCard.tsx
5+
@@ -1,18 +1,20 @@
6+
-type ChangeSummaryCardProps = {
7+
- title: string;
8+
- note: string;
9+
- changes: number;
10+
- lastSynced: string;
11+
- onOpen: () => void;
12+
+import { reviewButtonLabel, reviewTimestampLabel } from "../lib/reviewCopy";
13+
+
14+
+type ReviewSummaryCardProps = {
15+
+ heading: string;
16+
+ supportingText: string;
17+
+ fileCount: number;
18+
+ lastUpdated: string;
19+
+ onReview: () => void;
20+
};
21+
22+
-export function ChangeSummaryCard({
23+
- title,
24+
- note,
25+
- changes,
26+
- lastSynced,
27+
- onOpen,
28+
-}: ChangeSummaryCardProps) {
29+
+export function ReviewSummaryCard({
30+
+ heading,
31+
+ supportingText,
32+
+ fileCount,
33+
+ lastUpdated,
34+
+ onReview,
35+
+}: ReviewSummaryCardProps) {
36+
return (
37+
<box
38+
style={{
39+
@@ -21,19 +23,20 @@ export function ChangeSummaryCard({
40+
borderColor: "#334155",
41+
backgroundColor: "#0f172a",
42+
flexDirection: "column",
43+
+ gap: 1,
44+
}}
45+
>
46+
- <box style={{ flexDirection: "column", gap: 0 }}>
47+
- <text fg="#f8fafc">{title}</text>
48+
- <text fg="#94a3b8">{note}</text>
49+
+ <box style={{ flexDirection: "column", gap: 1 }}>
50+
+ <text fg="#f8fafc">{heading}</text>
51+
+ <text fg="#94a3b8">{supportingText}</text>
52+
</box>
53+
54+
- <box style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 1 }}>
55+
- <text fg="#38bdf8">{changes} files changed</text>
56+
- <text fg="#64748b">Synced {lastSynced}</text>
57+
+ <box style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
58+
+ <text fg="#38bdf8">{fileCount} files ready for review</text>
59+
+ <text fg="#64748b">{reviewTimestampLabel(lastUpdated)}</text>
60+
</box>
61+
62+
- <button label="Open diff" onPress={onOpen} />
63+
+ <button label={reviewButtonLabel(fileCount)} onPress={onReview} />
64+
</box>
65+
);
66+
}
67+
diff --git a/src/lib/reviewCopy.ts b/src/lib/reviewCopy.ts
68+
new file mode 100644
69+
index 0000000..d211039
70+
--- /dev/null
71+
+++ b/src/lib/reviewCopy.ts
72+
@@ -0,0 +1,7 @@
73+
+export function reviewButtonLabel(fileCount: number) {
74+
+ return fileCount === 1 ? "Review 1 file" : `Review ${fileCount} files`;
75+
+}
76+
+
77+
+export function reviewTimestampLabel(lastUpdated: string) {
78+
+ return `Updated ${lastUpdated}`;
79+
+}
80+
diff --git a/test/reviewSummaryCard.demo.ts b/test/reviewSummaryCard.demo.ts
81+
index 5acb770..03f9616 100644
82+
--- a/test/reviewSummaryCard.demo.ts
83+
+++ b/test/reviewSummaryCard.demo.ts
84+
@@ -1,8 +1,9 @@
85+
import { expect, test } from "bun:test";
86+
-import { ChangeSummaryCard } from "../src/components/ReviewSummaryCard";
87+
+import { ReviewSummaryCard } from "../src/components/ReviewSummaryCard";
88+
+import { reviewButtonLabel, reviewTimestampLabel } from "../src/lib/reviewCopy";
89+
90+
-test("keeps the old sync-oriented labels", () => {
91+
- expect(ChangeSummaryCard).toBeDefined();
92+
- expect("Open diff").toContain("diff");
93+
- expect("Synced 2m ago").toContain("Synced");
94+
+test("switches the card copy to review-oriented labels", () => {
95+
+ expect(ReviewSummaryCard).toBeDefined();
96+
+ expect(reviewButtonLabel(3)).toBe("Review 3 files");
97+
+ expect(reviewTimestampLabel("2m ago")).toBe("Updated 2m ago");
98+
});

‎examples/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Each folder tells a small review story and includes the exact command to run fro
1313
| `3-agent-review-demo` | inline agent rationale | `hunk patch examples/3-agent-review-demo/change.patch --agent-context examples/3-agent-review-demo/agent-context.json` |
1414
| `4-ui-polish` | screenshot-friendly TSX diff | `hunk diff examples/4-ui-polish/before.tsx examples/4-ui-polish/after.tsx` |
1515
| `5-pager-tour` | line scrolling, paging, and hunk jumps | `hunk diff --pager examples/5-pager-tour/before.ts examples/5-pager-tour/after.ts` |
16+
| `6-readme-screenshot` | README screenshot with agent notes | `hunk patch examples/6-readme-screenshot/change.patch --agent-context examples/6-readme-screenshot/agent-context.json --mode split --theme midnight` |
1617

1718
## Notes
1819

0 commit comments

Comments
 (0)