docs: refresh the Codewhale product screenshot

README.es-419.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Un agente de código para tu terminal. Funciona con cualquier modelo; los

README.ja-JP.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 ターミナルで動くコーディングエージェント。あらゆるモデルで動作し、オープンモデルを最優先します。

README.ko-KR.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 터미널에서 쓰는 코딩 에이전트입니다. 어떤 모델과도 동작하며, 오픈 모델을

README.md

@@ -17,7 +17,7 @@ the same runtime and tools.
 [![crates.io](https://img.shields.io/crates/v/codewhale-cli?label=crates.io)](https://crates.io/crates/codewhale-cli)
 [![npm](https://img.shields.io/npm/v/codewhale?label=npm)](https://www.npmjs.com/package/codewhale)
 
-![Codewhale running in a terminal](assets/screenshot.png)
+![Codewhale TUI idle screen with GLM-5.2 selected through Z.ai](assets/screenshot.png)
 
 ## Install
 

README.pt-BR.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Um agente de código para o seu terminal. Funciona com qualquer modelo; modelos

README.vi.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 Một coding agent cho terminal của bạn. Hoạt động với mọi model; ưu tiên model mở.

README.zh-CN.md

@@ -1,4 +1,4 @@
-<!-- source: README.md sha256:ddc9cd7b5aea -->
+<!-- source: README.md sha256:ed346d675bdf -->
 # Codewhale
 
 一个运行在终端里的编程智能体。适配任意模型；开放模型优先。

web/app/[locale]/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { InstallCodeBlock } from "@/components/install-code-block";
 import { Whale } from "@/components/whale";
@@ -113,6 +114,17 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
             </Link>
           </aside>
         </div>
+
+        <figure className="portal-container portal-product-shot">
+          <Image
+            src="/codewhale-tui.png"
+            alt="Codewhale TUI idle screen with GLM-5.2 selected through Z.ai"
+            width={852}
+            height={453}
+            sizes="(max-width: 760px) calc(100vw - 2rem), (max-width: 852px) calc(100vw - 2.5rem), 852px"
+            priority
+          />
+        </figure>
       </section>
 
       <section className="portal-section">

web/app/globals.css

@@ -547,6 +547,22 @@ a.body-link:hover { background-size: 100% 6px; color: var(--ink); }
   padding-block: clamp(3.25rem, 6vw, 4.75rem);
 }
 
+.portal-product-shot {
+  position: relative;
+  width: min(100% - 2.5rem, 53.25rem);
+  margin-top: clamp(-1rem, -2vw, -0.5rem);
+  margin-bottom: clamp(2.5rem, 6vw, 4.75rem);
+}
+
+.portal-product-shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid rgba(209, 235, 244, 0.26);
+  border-radius: 8px;
+  box-shadow: 0 1.5rem 3.75rem rgba(5, 12, 24, 0.2);
+}
+
 .portal-hero-copy {
   max-width: 42rem;
 }

web/lib/public-copy.test.ts

@@ -8,6 +8,21 @@ function pageSource(path: string): string {
 }
 
 describe("public website copy contracts", () => {
+  it("keeps the README and website product screenshot synchronized and accessible", () => {
+    const home = pageSource("page.tsx");
+    const readme = readFileSync(new URL("../../README.md", import.meta.url), "utf8");
+    const readmeShot = readFileSync(new URL("../../assets/screenshot.png", import.meta.url));
+    const websiteShot = readFileSync(
+      new URL("../public/codewhale-tui.png", import.meta.url),
+    );
+    const alt = "Codewhale TUI idle screen with GLM-5.2 selected through Z.ai";
+
+    expect(readme).toContain(`![${alt}](assets/screenshot.png)`);
+    expect(home).toContain(`src="/codewhale-tui.png"`);
+    expect(home).toContain(`alt="${alt}"`);
+    expect(websiteShot.equals(readmeShot)).toBe(true);
+  });
+
   it("keeps the docs hub on the compact ocean portal instead of the old almanac treatment", () => {
     const layout = pageSource("docs/layout.tsx");
     const search = readFileSync(new URL("../components/docs-search.tsx", import.meta.url), "utf8");