Add CYD browser flasher with Next.js, i18n, and Web Serial install.

Replace the starter app with a public/local flasher that discovers sibling firmwares, supports en/zh, and documents HTTPS deploy.

Co-authored-by: Cursor <cursoragent@cursor.com>

.env.example

@@ -0,0 +1,5 @@
+# Public site origin (canonical, Open Graph, sitemap)
+NEXT_PUBLIC_SITE_URL=https://your-domain.example
+
+# Optional: absolute path to firmware parent (sibling projects or a mirror folder)
+# CYD_FIRMWARE_ROOT=C:\Users\dsx2016\Desktop\codes\cyd

.gitignore

@@ -30,8 +30,14 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env*
+# env files
+.env
+.env.local
+.env.*.local
+!.env.example
+
+# mirrored firmwares (run npm run sync:firmware for public deploy)
+/firmware/
 
 # vercel
 .vercel

README.md

@@ -1,36 +1,98 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# CYD Flasher
 
-## Getting Started
+Browser flasher for **Cheap Yellow Display** (ESP32-2432S028).
 
-First, run the development server:
+Stack: **Next.js 15** · **Web Serial** · **esp-web-tools** · **next-intl** · **Tailwind / shadcn-style UI**
 
-```bash
+| | |
+|---|---|
+| Locales | English (default) `/en` · 中文 `/zh` |
+| SEO | `generateMetadata`, Open Graph, `/sitemap.xml`, `/robots.txt` |
+| Flash | `0x1000` bootloader · `0x8000` partitions · `0xe000` boot_app0 · `0x10000` firmware |
+
+## Quick start (local)
+
+```powershell
+cd c:\Users\dsx2016\Desktop\codes\cyd\cydweb
+npm install
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open **Chrome** or **Edge**: [http://localhost:3000](http://localhost:3000) (redirects to `/en`).
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+1. Connect CYD with a data USB cable  
+2. Select a firmware  
+3. Click **Connect & flash** and choose the serial port (CH340 / CP210x)
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Production locally:
 
-## Learn More
+```powershell
+npm run build
+npm start
+```
 
-To learn more about Next.js, take a look at the following resources:
+## Firmware discovery
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+By default the app scans sibling projects:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```text
+../<project>/firmware/<variant>/{bootloader,partitions,boot_app0,firmware}.bin
+```
 
-## Deploy on Vercel
+Examples currently picked up: `temperature`, `ld2420test`, `sgp30test`, `phtotest`, `tftest` (Pomodoro).
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Override search root:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+```env
+CYD_FIRMWARE_ROOT=C:\Users\dsx2016\Desktop\codes\cyd
+```
+
+After rebuilding a project, refresh its `firmware/` archive (each repo’s `firmware\export_from_build.ps1`), then click **Refresh** on the page.
+
+## Public deploy
+
+Web Serial requires **HTTPS** (or localhost).
+
+1. Mirror firmwares into this repo (no Desktop path dependency):
+
+```powershell
+npm run sync:firmware
+# or: .\scripts\sync-firmware.ps1
+```
+
+2. Copy `.env.example` → `.env` and set:
+
+```env
+NEXT_PUBLIC_SITE_URL=https://your-domain.example
+```
+
+3. Deploy with Node (`npm run build && npm start`) or any Next.js host.
+
+Mirrored binaries live under `firmware/` (gitignored). Run sync in CI before build if needed.
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Dev server (Turbopack) |
+| `npm run build` | Production build |
+| `npm start` | Serve production build |
+| `npm run sync:firmware` | Copy sibling `firmware/*` into `./firmware` |
+| `npm run lint` | ESLint |
+
+## Project layout
+
+```text
+app/[locale]/     # SSR pages (en / zh)
+app/api/firmware/ # list · manifest · .bin
+components/       # Flasher UI + shadcn-style primitives
+messages/         # en.json · zh.json
+lib/firmware.ts   # discovery + flash offsets
+scripts/          # sync-firmware.ps1
+```
+
+## 中文说明
+
+本机：`npm install` → `npm run dev` → Chrome/Edge 打开 http://localhost:3000 ，右上角可切中文。
+
+公网：先 `npm run sync:firmware`，配置 `NEXT_PUBLIC_SITE_URL`（必须 HTTPS），再部署。固件来自各 CYD 项目的 `firmware/` 预编译包，与 PlatformIO / esptool 刷写地址一致。

app/[locale]/layout.tsx

@@ -0,0 +1,113 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { NextIntlClientProvider, hasLocale } from "next-intl";
+import { getMessages, getTranslations, setRequestLocale } from "next-intl/server";
+import { DM_Sans, Syne } from "next/font/google";
+import { routing } from "@/i18n/routing";
+import { LanguageSwitcher } from "@/components/language-switcher";
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-body",
+  display: "swap",
+});
+
+const syne = Syne({
+  subsets: ["latin"],
+  variable: "--font-display",
+  weight: ["600", "700", "800"],
+  display: "swap",
+});
+
+type Props = {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+};
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "meta" });
+  const languages = Object.fromEntries(
+    routing.locales.map((l) => [l, `/${l}`])
+  );
+
+  return {
+    title: t("title"),
+    description: t("description"),
+    metadataBase: new URL(
+      process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"
+    ),
+    alternates: {
+      canonical: `/${locale}`,
+      languages,
+    },
+    openGraph: {
+      title: t("title"),
+      description: t("description"),
+      locale: locale === "zh" ? "zh_CN" : "en_US",
+      type: "website",
+      siteName: "CYD Flasher",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("title"),
+      description: t("description"),
+    },
+    robots: {
+      index: true,
+      follow: true,
+    },
+  };
+}
+
+export default async function LocaleLayout({ children, params }: Props) {
+  const { locale } = await params;
+  if (!hasLocale(routing.locales, locale)) notFound();
+
+  setRequestLocale(locale);
+  const messages = await getMessages();
+  const t = await getTranslations("brand");
+  const tf = await getTranslations("footer");
+
+  return (
+    <html lang={locale} className={`${dmSans.variable} ${syne.variable}`}>
+      <body className="antialiased">
+        <NextIntlClientProvider messages={messages}>
+          <div className="bg-grid" aria-hidden />
+          <div className="bg-glow" aria-hidden />
+
+          <header className="animate-rise relative z-10 mx-auto flex max-w-[920px] flex-wrap items-center justify-between gap-4 px-[clamp(1.25rem,4vw,3rem)] pt-6">
+            <div>
+              <div className="flex items-center gap-2.5">
+                <span
+                  className="size-[1.15rem] rounded-[3px] bg-[linear-gradient(145deg,var(--accent-hot),#c98900)] shadow-[0_0_0_3px_rgba(240,197,10,0.2)]"
+                  aria-hidden
+                />
+                <span className="font-[family-name:var(--font-display)] text-[clamp(1.6rem,4vw,2.1rem)] font-extrabold leading-none tracking-tight">
+                  {t("name")}
+                </span>
+              </div>
+              <p className="mt-1.5 text-[0.95rem] text-[var(--muted)]">
+                {t("tagline")}
+              </p>
+            </div>
+            <LanguageSwitcher />
+          </header>
+
+          <main className="relative z-10 mx-auto max-w-[920px] px-[clamp(1.25rem,4vw,3rem)] py-7 pb-12">
+            {children}
+          </main>
+
+          <footer className="relative z-10 mx-auto flex max-w-[920px] flex-wrap gap-x-6 gap-y-2 px-[clamp(1.25rem,4vw,3rem)] pb-10 text-xs text-[var(--muted)] opacity-85">
+            <span>{tf("offsets")}</span>
+            <span>{tf("stack")}</span>
+          </footer>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

app/[locale]/not-found.tsx

@@ -0,0 +1,10 @@
+export default function NotFound() {
+  return (
+    <div className="py-16 text-center">
+      <h1 className="font-[family-name:var(--font-display)] text-2xl font-bold">
+        404
+      </h1>
+      <p className="mt-2 text-[var(--muted)]">Page not found</p>
+    </div>
+  );
+}

app/[locale]/page.tsx

@@ -0,0 +1,23 @@
+import { getTranslations, setRequestLocale } from "next-intl/server";
+import { FlasherPanel } from "@/components/flasher-panel";
+
+type Props = { params: Promise<{ locale: string }> };
+
+export default async function HomePage({ params }: Props) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations("hero");
+
+  return (
+    <div className="flex flex-col gap-5">
+      <section className="animate-rise">
+        <h1 className="m-0 max-w-[18ch] font-[family-name:var(--font-display)] text-[clamp(1.45rem,3.5vw,1.85rem)] font-bold tracking-tight">
+          {t("title")}
+        </h1>
+        <p className="mt-2 max-w-[42rem] text-[var(--muted)]">{t("lede")}</p>
+      </section>
+
+      <FlasherPanel />
+    </div>
+  );
+}

app/api/firmware/[project]/[variant]/[file]/route.ts

@@ -0,0 +1,37 @@
+import fs from "fs";
+import path from "path";
+import { NextResponse } from "next/server";
+import { REQUIRED_BINS, resolveFirmwareDir } from "@/lib/firmware";
+
+export const dynamic = "force-dynamic";
+
+type Params = {
+  params: Promise<{ project: string; variant: string; file: string }>;
+};
+
+export async function GET(_req: Request, { params }: Params) {
+  const { project, variant, file } = await params;
+  if (!(REQUIRED_BINS as readonly string[]).includes(file)) {
+    return NextResponse.json({ error: "invalid file" }, { status: 400 });
+  }
+
+  const dir = resolveFirmwareDir(project, variant);
+  if (!dir) {
+    return NextResponse.json({ error: "not found" }, { status: 404 });
+  }
+
+  const abs = path.join(dir, file);
+  if (!fs.existsSync(abs)) {
+    return NextResponse.json({ error: "not found" }, { status: 404 });
+  }
+
+  const buf = fs.readFileSync(abs);
+  return new NextResponse(buf, {
+    headers: {
+      "Content-Type": "application/octet-stream",
+      "Content-Length": String(buf.length),
+      "Cache-Control": "no-store",
+      "Content-Disposition": `attachment; filename="${file}"`,
+    },
+  });
+}

app/api/firmware/[project]/[variant]/manifest.json/route.ts

@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+import {
+  FLASH_PARTS,
+  readFirmwareMeta,
+  resolveFirmwareDir,
+} from "@/lib/firmware";
+
+export const dynamic = "force-dynamic";
+
+type Params = { params: Promise<{ project: string; variant: string }> };
+
+export async function GET(_req: Request, { params }: Params) {
+  const { project, variant } = await params;
+  const dir = resolveFirmwareDir(project, variant);
+  if (!dir) {
+    return NextResponse.json({ error: "firmware not found" }, { status: 404 });
+  }
+
+  const meta = readFirmwareMeta(dir);
+  const name = meta.name || `${project} (${variant})`;
+  const version =
+    [meta.date, meta.git].filter(Boolean).join(" / ") || "local";
+
+  const base = `/api/firmware/${encodeURIComponent(project)}/${encodeURIComponent(variant)}`;
+  return NextResponse.json({
+    name,
+    version,
+    new_install_prompt_erase: true,
+    builds: [
+      {
+        chipFamily: "ESP32",
+        parts: FLASH_PARTS.map((p) => ({
+          path: `${base}/${p.file}`,
+          offset: p.offset,
+        })),
+      },
+    ],
+  });
+}

app/api/firmware/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import { discoverFirmware } from "@/lib/firmware";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const firmwares = discoverFirmware();
+  return NextResponse.json({
+    chipFamily: "ESP32",
+    count: firmwares.length,
+    firmwares,
+  });
+}

app/globals.css

@@ -1,26 +1,96 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --bg: #12100c;
+  --bg-elev: #1c1812;
+  --ink: #f4efe4;
+  --muted: #9a9080;
+  --line: rgba(244, 239, 228, 0.12);
+  --accent: #f0c50a;
+  --accent-hot: #ffd54a;
+  --accent-ink: #1a1408;
+  --warn: #e8a45a;
+  --background: var(--bg);
+  --foreground: var(--ink);
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-sans: var(--font-body);
+  --font-display: var(--font-display);
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body), "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
+    system-ui, sans-serif;
+  min-height: 100vh;
+}
+
+.bg-grid {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(240, 197, 10, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(240, 197, 10, 0.04) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
+}
+
+.bg-glow {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 50% 40% at 70% -10%, rgba(240, 197, 10, 0.22), transparent 55%),
+    radial-gradient(ellipse 40% 35% at 10% 80%, rgba(180, 90, 20, 0.12), transparent 50%);
+}
+
+.cta-btn {
+  appearance: none;
+  border: none;
+  font: inherit;
+  font-family: var(--font-display), system-ui, sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-size: 1.05rem;
+  padding: 0.85rem 1.5rem;
+  border-radius: 999px;
+  cursor: pointer;
+  color: var(--accent-ink);
+  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
+  box-shadow: 0 8px 24px rgba(240, 197, 10, 0.25);
+  transition: transform 0.15s, filter 0.15s, opacity 0.15s;
+}
+
+.cta-btn:hover:not(:disabled) {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+
+.cta-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-rise {
+  animation: rise 0.65s ease-out both;
 }

app/layout.tsx

@@ -1,34 +1,7 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import type { ReactNode } from "react";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
+/** Root layout — locale-specific html/lang lives under [locale]. */
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return children;
 }

app/page.tsx

@@ -1,103 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}

app/robots.ts

@@ -0,0 +1,12 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  const base = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: `${base}/sitemap.xml`,
+  };
+}

app/sitemap.ts

@@ -0,0 +1,17 @@
+import type { MetadataRoute } from "next";
+import { routing } from "@/i18n/routing";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const base = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
+  return routing.locales.map((locale) => ({
+    url: `${base}/${locale}`,
+    lastModified: new Date(),
+    changeFrequency: "weekly",
+    priority: 1,
+    alternates: {
+      languages: Object.fromEntries(
+        routing.locales.map((l) => [l, `${base}/${l}`])
+      ),
+    },
+  }));
+}

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/esp-web-install.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { createElement, useEffect } from "react";
+
+/**
+ * Loads esp-web-tools once; hosts the install button via slot.
+ */
+export function EspWebInstall({
+  manifest,
+  label,
+  disabled,
+}: {
+  manifest: string | null;
+  label: string;
+  disabled?: boolean;
+}) {
+  useEffect(() => {
+    if (document.querySelector('script[data-esp-web-tools="1"]')) return;
+
+    const script = document.createElement("script");
+    script.type = "module";
+    script.src =
+      "https://unpkg.com/esp-web-tools@10.1.0/dist/web/install-button.js?module";
+    script.dataset.espWebTools = "1";
+    document.head.appendChild(script);
+  }, []);
+
+  const activate = createElement(
+    "button",
+    {
+      slot: "activate",
+      type: "button",
+      className: "cta-btn",
+      disabled: Boolean(disabled || !manifest),
+    },
+    label
+  );
+
+  if (!manifest) {
+    return activate;
+  }
+
+  return createElement(
+    "esp-web-install-button",
+    { manifest },
+    activate
+  );
+}

components/flasher-panel.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { RefreshCw } from "lucide-react";
+import type { FirmwareInfo } from "@/lib/firmware";
+import { formatBytes, cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { EspWebInstall } from "@/components/esp-web-install";
+
+function supportsWebSerial() {
+  return typeof navigator !== "undefined" && "serial" in navigator;
+}
+
+export function FlasherPanel() {
+  const t = useTranslations();
+  const [firmwares, setFirmwares] = useState<FirmwareInfo[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [serialOk, setSerialOk] = useState(true);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/firmware", { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as { firmwares: FirmwareInfo[] };
+      const list = data.firmwares ?? [];
+      setFirmwares(list);
+      setSelectedId((prev) => {
+        if (prev && list.some((f) => f.id === prev)) return prev;
+        return list[0]?.id ?? null;
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setFirmwares([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    setSerialOk(supportsWebSerial());
+    void load();
+  }, [load]);
+
+  const selected = firmwares.find((f) => f.id === selectedId) ?? null;
+
+  return (
+    <div className="flex flex-col gap-5">
+      {!serialOk && (
+        <Card className="border-[rgba(232,164,90,0.35)] text-[var(--warn)]">
+          <p className="m-0 text-sm">{t("browser.unsupported")}</p>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("firmware.title")}</CardTitle>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => void load()}
+            disabled={loading}
+          >
+            <RefreshCw className={cn("size-3.5", loading && "animate-spin")} />
+            {t("firmware.refresh")}
+          </Button>
+        </CardHeader>
+
+        <div className="flex flex-col gap-2" role="listbox" aria-label={t("firmware.title")}>
+          {loading && !firmwares.length && (
+            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.scanning")}</p>
+          )}
+          {error && (
+            <p className="m-0 text-sm text-[var(--warn)]">
+              {t("firmware.error", { message: error })}
+            </p>
+          )}
+          {!loading && !error && !firmwares.length && (
+            <p className="m-0 text-sm text-[var(--muted)]">{t("firmware.empty")}</p>
+          )}
+          {firmwares.map((fw) => {
+            const active = fw.id === selectedId;
+            const meta = [fw.board, fw.date, fw.git ? `git ${fw.git}` : null]
+              .filter(Boolean)
+              .join(" · ");
+            return (
+              <button
+                key={fw.id}
+                type="button"
+                role="option"
+                aria-selected={active}
+                className={cn(
+                  "grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-4 gap-y-1 rounded-[10px] border px-4 py-3.5 text-left transition-colors",
+                  active
+                    ? "border-[var(--accent)] bg-[rgba(240,197,10,0.1)] shadow-[inset_0_0_0_1px_rgba(240,197,10,0.25)]"
+                    : "border-[var(--line)] bg-[rgba(0,0,0,0.2)] hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.05)]"
+                )}
+                onClick={() => setSelectedId(fw.id)}
+              >
+                <span
+                  className={cn(
+                    "size-4 shrink-0 rounded-full border-2",
+                    active
+                      ? "border-[var(--accent)] bg-[radial-gradient(circle_at_center,var(--accent)_40%,transparent_45%)]"
+                      : "border-[var(--muted)]"
+                  )}
+                  aria-hidden
+                />
+                <span className="min-w-0">
+                  <span className="block font-semibold leading-snug">{fw.name}</span>
+                  <span className="mt-0.5 block text-xs text-[var(--muted)]">
+                    {fw.project} / {fw.variant}
+                    {meta ? ` · ${meta}` : ""}
+                  </span>
+                </span>
+                <Badge variant="muted" className="justify-self-end tabular-nums">
+                  {formatBytes(fw.size)}
+                </Badge>
+              </button>
+            );
+          })}
+        </div>
+      </Card>
+
+      <Card>
+        <div className="mb-4 rounded-lg border border-dashed border-[var(--line)] bg-[rgba(0,0,0,0.25)] px-3.5 py-3 text-sm">
+          {selected ? (
+            <>
+              {t("firmware.selectedLabel")}{" "}
+              <strong className="font-semibold text-[var(--accent-hot)]">
+                {selected.name}
+              </strong>
+              <span className="text-[var(--muted)]"> ({selected.id})</span>
+            </>
+          ) : (
+            <span className="text-[var(--muted)]">{t("firmware.noneSelected")}</span>
+          )}
+        </div>
+
+        <EspWebInstall
+          manifest={selected?.manifestUrl ?? null}
+          label={t("install.cta")}
+          disabled={!serialOk || !selected}
+        />
+
+        <ol className="mt-5 list-decimal space-y-1.5 pl-5 text-sm text-[var(--muted)]">
+          <li>{t("install.steps.1")}</li>
+          <li>{t("install.steps.2")}</li>
+          <li>{t("install.steps.3")}</li>
+          <li>{t("install.steps.4")}</li>
+        </ol>
+      </Card>
+    </div>
+  );
+}

components/language-switcher.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { usePathname, useRouter } from "@/i18n/navigation";
+import { routing, type AppLocale } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+
+export function LanguageSwitcher() {
+  const t = useTranslations("lang");
+  const locale = useLocale() as AppLocale;
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <div
+      className="inline-flex items-center gap-1 rounded-lg border border-[var(--line)] p-0.5"
+      role="group"
+      aria-label={t("label")}
+    >
+      {routing.locales.map((loc) => (
+        <button
+          key={loc}
+          type="button"
+          className={cn(
+            "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+            loc === locale
+              ? "bg-[rgba(240,197,10,0.18)] text-[var(--accent-hot)]"
+              : "text-[var(--muted)] hover:text-[var(--ink)]"
+          )}
+          aria-pressed={loc === locale}
+          onClick={() => router.replace(pathname, { locale: loc })}
+        >
+          {t(loc)}
+        </button>
+      ))}
+    </div>
+  );
+}

components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "bg-[rgba(240,197,10,0.12)] text-[var(--accent-hot)]",
+        muted: "bg-[rgba(0,0,0,0.25)] text-[var(--muted)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

components/ui/button.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)] disabled:pointer-events-none disabled:opacity-45",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[linear-gradient(180deg,var(--accent-hot),var(--accent))] text-[var(--accent-ink)] shadow-[0_8px_24px_rgba(240,197,10,0.25)] hover:brightness-105",
+        ghost:
+          "rounded-lg border border-[var(--line)] bg-transparent text-[var(--muted)] hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.06)] hover:text-[var(--ink)]",
+        outline:
+          "rounded-lg border border-[var(--line)] bg-transparent text-[var(--ink)] hover:border-[rgba(240,197,10,0.35)]",
+      },
+      size: {
+        default: "h-11 px-6",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-12 px-8 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-[14px] border border-[var(--line)] bg-[color-mix(in_srgb,var(--bg-elev)_88%,transparent)] p-5 backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("mb-4 flex items-center justify-between gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      className={cn(
+        "font-[family-name:var(--font-display)] text-[1.05rem] font-bold tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}

i18n/navigation.ts

@@ -0,0 +1,5 @@
+import { createNavigation } from "next-intl/navigation";
+import { routing } from "./routing";
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

i18n/request.ts

@@ -0,0 +1,15 @@
+import { getRequestConfig } from "next-intl/server";
+import { hasLocale } from "next-intl";
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
+  const requested = await requestLocale;
+  const locale = hasLocale(routing.locales, requested)
+    ? requested
+    : routing.defaultLocale;
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

i18n/routing.ts

@@ -0,0 +1,9 @@
+import { defineRouting } from "next-intl/routing";
+
+export const routing = defineRouting({
+  locales: ["en", "zh"],
+  defaultLocale: "en",
+  localePrefix: "always",
+});
+
+export type AppLocale = (typeof routing.locales)[number];

lib/firmware.ts

@@ -0,0 +1,246 @@
+import fs from "fs";
+import path from "path";
+
+export const REQUIRED_BINS = [
+  "bootloader.bin",
+  "partitions.bin",
+  "boot_app0.bin",
+  "firmware.bin",
+] as const;
+
+export const FLASH_PARTS = [
+  { file: "bootloader.bin", offset: 0x1000 },
+  { file: "partitions.bin", offset: 0x8000 },
+  { file: "boot_app0.bin", offset: 0xe000 },
+  { file: "firmware.bin", offset: 0x10000 },
+] as const;
+
+export type FirmwareInfo = {
+  id: string;
+  project: string;
+  variant: string;
+  name: string;
+  git: string | null;
+  date: string | null;
+  board: string;
+  flash_size: string;
+  size: number;
+  extras: Record<string, string>;
+  manifestUrl: string;
+};
+
+function parseVersionTxt(text: string): Record<string, string> {
+  const meta: Record<string, string> = {};
+  for (const raw of text.split(/\r?\n/)) {
+    const line = raw.trim();
+    if (!line || line.startsWith(" ") || line.endsWith(":")) continue;
+    const idx = line.indexOf(":");
+    if (idx <= 0) continue;
+    const key = line.slice(0, idx).trim();
+    const val = line.slice(idx + 1).trim();
+    if (key === "offsets" || key === "sha256") continue;
+    meta[key] = val;
+  }
+  return meta;
+}
+
+/** Search roots: env override, bundled ./firmware, sibling projects (..). */
+export function getFirmwareSearchRoots(): string[] {
+  const roots: string[] = [];
+  if (process.env.CYD_FIRMWARE_ROOT) {
+    roots.push(path.resolve(process.env.CYD_FIRMWARE_ROOT));
+  }
+  roots.push(path.resolve(process.cwd(), "firmware"));
+  roots.push(path.resolve(process.cwd(), ".."));
+  return [...new Set(roots)];
+}
+
+function isSafeUnder(root: string, candidate: string): boolean {
+  const absRoot = path.resolve(root);
+  const abs = path.resolve(candidate);
+  return abs === absRoot || abs.startsWith(absRoot + path.sep);
+}
+
+function scanProjectFirmware(
+  projectRoot: string,
+  projectName: string,
+  seen: Set<string>
+): FirmwareInfo[] {
+  const items: FirmwareInfo[] = [];
+  const fwRoot = path.join(projectRoot, "firmware");
+  if (!fs.existsSync(fwRoot)) return items;
+
+  let variants: fs.Dirent[];
+  try {
+    variants = fs.readdirSync(fwRoot, { withFileTypes: true });
+  } catch {
+    return items;
+  }
+
+  for (const v of variants) {
+    if (!v.isDirectory()) continue;
+    const dir = path.join(fwRoot, v.name);
+    const missing = REQUIRED_BINS.filter((f) => !fs.existsSync(path.join(dir, f)));
+    if (missing.length) continue;
+
+    const id = `${projectName}/${v.name}`;
+    if (seen.has(id)) continue;
+    seen.add(id);
+
+    let meta: Record<string, string> = {};
+    const verPath = path.join(dir, "VERSION.txt");
+    if (fs.existsSync(verPath)) {
+      try {
+        meta = parseVersionTxt(fs.readFileSync(verPath, "utf8"));
+      } catch {
+        /* ignore */
+      }
+    }
+
+    const firmwareStat = fs.statSync(path.join(dir, "firmware.bin"));
+    const reserved = new Set(["name", "git", "date", "board", "flash_size"]);
+    items.push({
+      id,
+      project: projectName,
+      variant: v.name,
+      name: meta.name || `${projectName} (${v.name})`,
+      git: meta.git || null,
+      date: meta.date || null,
+      board: meta.board || "ESP32-2432S028R",
+      flash_size: meta.flash_size || "4MB",
+      size: firmwareStat.size,
+      extras: Object.fromEntries(
+        Object.entries(meta).filter(([k]) => !reserved.has(k))
+      ),
+      manifestUrl: `/api/firmware/${encodeURIComponent(projectName)}/${encodeURIComponent(v.name)}/manifest.json`,
+    });
+  }
+  return items;
+}
+
+/**
+ * Discover firmwares.
+ * - Bundled layout: `firmware/<project>/<variant>/*.bin`
+ * - Sibling layout: `../<project>/firmware/<variant>/*.bin`
+ */
+export function discoverFirmware(): FirmwareInfo[] {
+  const seen = new Set<string>();
+  const items: FirmwareInfo[] = [];
+
+  for (const root of getFirmwareSearchRoots()) {
+    if (!fs.existsSync(root)) continue;
+
+    // Bundled: root itself is the firmware mirror (contains project folders)
+    // or root is cyd parent with project folders that contain firmware/
+    let entries: fs.Dirent[];
+    try {
+      entries = fs.readdirSync(root, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+
+    for (const ent of entries) {
+      if (!ent.isDirectory()) continue;
+      if (ent.name === "cydweb" || ent.name === "node_modules" || ent.name.startsWith(".")) {
+        continue;
+      }
+
+      const projectPath = path.join(root, ent.name);
+
+      // Sibling project: ../temperature/firmware/...
+      items.push(...scanProjectFirmware(projectPath, ent.name, seen));
+
+      // Bundled mirror: firmware/temperature/cyd_28r/...
+      // Here `root` is ./firmware and `ent` is project name; variants are direct children.
+      const maybeVariantBins = REQUIRED_BINS.every((f) =>
+        fs.existsSync(path.join(projectPath, f))
+      );
+      if (maybeVariantBins) {
+        // Unusual: project folder IS the variant — treat parent name
+        continue;
+      }
+
+      // If root is ./firmware, children are projects whose children are variants
+      const nestedFw = path.join(projectPath, "firmware");
+      if (!fs.existsSync(nestedFw)) {
+        // Direct: firmware/<project>/<variant>
+        let variants: fs.Dirent[];
+        try {
+          variants = fs.readdirSync(projectPath, { withFileTypes: true });
+        } catch {
+          continue;
+        }
+        for (const v of variants) {
+          if (!v.isDirectory()) continue;
+          const dir = path.join(projectPath, v.name);
+          if (REQUIRED_BINS.some((f) => !fs.existsSync(path.join(dir, f)))) continue;
+          const id = `${ent.name}/${v.name}`;
+          if (seen.has(id)) continue;
+          seen.add(id);
+
+          let meta: Record<string, string> = {};
+          const verPath = path.join(dir, "VERSION.txt");
+          if (fs.existsSync(verPath)) {
+            try {
+              meta = parseVersionTxt(fs.readFileSync(verPath, "utf8"));
+            } catch {
+              /* ignore */
+            }
+          }
+          const firmwareStat = fs.statSync(path.join(dir, "firmware.bin"));
+          const reserved = new Set(["name", "git", "date", "board", "flash_size"]);
+          items.push({
+            id,
+            project: ent.name,
+            variant: v.name,
+            name: meta.name || `${ent.name} (${v.name})`,
+            git: meta.git || null,
+            date: meta.date || null,
+            board: meta.board || "ESP32-2432S028R",
+            flash_size: meta.flash_size || "4MB",
+            size: firmwareStat.size,
+            extras: Object.fromEntries(
+              Object.entries(meta).filter(([k]) => !reserved.has(k))
+            ),
+            manifestUrl: `/api/firmware/${encodeURIComponent(ent.name)}/${encodeURIComponent(v.name)}/manifest.json`,
+          });
+        }
+      }
+    }
+  }
+
+  items.sort((a, b) => a.name.localeCompare(b.name, "en"));
+  return items;
+}
+
+export function resolveFirmwareDir(
+  project: string,
+  variant: string
+): string | null {
+  for (const root of getFirmwareSearchRoots()) {
+    const candidates = [
+      path.join(root, project, "firmware", variant),
+      path.join(root, project, variant),
+    ];
+    for (const dir of candidates) {
+      if (!isSafeUnder(root, dir)) continue;
+      if (
+        fs.existsSync(dir) &&
+        REQUIRED_BINS.every((f) => fs.existsSync(path.join(dir, f)))
+      ) {
+        return dir;
+      }
+    }
+  }
+  return null;
+}
+
+export function readFirmwareMeta(dir: string): Record<string, string> {
+  const verPath = path.join(dir, "VERSION.txt");
+  if (!fs.existsSync(verPath)) return {};
+  try {
+    return parseVersionTxt(fs.readFileSync(verPath, "utf8"));
+  } catch {
+    return {};
+  }
+}

lib/utils.ts

@@ -0,0 +1,12 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}

messages/en.json

@@ -0,0 +1,44 @@
+{
+  "meta": {
+    "title": "CYD Flasher — Flash Cheap Yellow Display in the browser",
+    "description": "Web Serial installer for ESP32-2432S028 (CYD). Pick a firmware and flash over USB from Chrome or Edge."
+  },
+  "brand": {
+    "name": "CYD Flasher",
+    "tagline": "Browser serial flash · ESP32-2432S028"
+  },
+  "hero": {
+    "title": "Pick firmware, plug in USB, flash once",
+    "lede": "Scans local CYD project firmwares and writes them over Web Serial from your browser."
+  },
+  "browser": {
+    "unsupported": "Chrome or Edge with Web Serial is required. Open this site on HTTPS or http://localhost."
+  },
+  "firmware": {
+    "title": "Available firmware",
+    "refresh": "Refresh",
+    "scanning": "Scanning…",
+    "empty": "No firmware found. Ensure complete firmware/*/…bin packages exist, or set CYD_FIRMWARE_ROOT.",
+    "error": "Scan failed: {message}",
+    "noneSelected": "No firmware selected",
+    "selectedLabel": "Selected:"
+  },
+  "install": {
+    "cta": "Connect & flash",
+    "steps": {
+      "1": "Connect CYD with a data USB cable (not charge-only).",
+      "2": "Select a firmware above.",
+      "3": "Click Connect & flash, then choose the serial port (CH340 / CP210x).",
+      "4": "Wait for progress to finish — the board reboots automatically."
+    }
+  },
+  "lang": {
+    "label": "Language",
+    "en": "English",
+    "zh": "中文"
+  },
+  "footer": {
+    "offsets": "Flash @ 0x1000 / 0x8000 / 0xe000 / 0x10000",
+    "stack": "Powered by esp-web-tools · Web Serial flash for ESP32"
+  }
+}

messages/zh.json

@@ -0,0 +1,44 @@
+{
+  "meta": {
+    "title": "CYD Flasher — 浏览器刷写 Cheap Yellow Display",
+    "description": "面向 ESP32-2432S028（CYD）的 Web Serial 刷机站。在 Chrome / Edge 中选择固件并通过 USB 刷入。"
+  },
+  "brand": {
+    "name": "CYD Flasher",
+    "tagline": "浏览器串口刷机 · ESP32-2432S028"
+  },
+  "hero": {
+    "title": "选固件，插上 USB，一键刷入",
+    "lede": "自动扫描本机 CYD 项目预编译包，在浏览器里通过 Web Serial 写入固件。"
+  },
+  "browser": {
+    "unsupported": "需要支持 Web Serial 的 Chrome 或 Edge。请通过 HTTPS 或 http://localhost 打开本页。"
+  },
+  "firmware": {
+    "title": "可用固件",
+    "refresh": "刷新",
+    "scanning": "正在扫描…",
+    "empty": "未找到固件。请确认存在完整的 firmware/*/…bin，或设置 CYD_FIRMWARE_ROOT。",
+    "error": "扫描失败：{message}",
+    "noneSelected": "尚未选择固件",
+    "selectedLabel": "已选："
+  },
+  "install": {
+    "cta": "连接并刷写",
+    "steps": {
+      "1": "用 USB 线连接 CYD（数据口，非仅充电）。",
+      "2": "选择上方固件。",
+      "3": "点「连接并刷写」，在弹窗中选串口（常见 CH340 / CP210x）。",
+      "4": "等待进度完成，板子会自动重启。"
+    }
+  },
+  "lang": {
+    "label": "语言",
+    "en": "English",
+    "zh": "中文"
+  },
+  "footer": {
+    "offsets": "刷写地址 @ 0x1000 / 0x8000 / 0xe000 / 0x10000",
+    "stack": "基于 esp-web-tools · 浏览器串口刷写 ESP32"
+  }
+}

middleware.ts

@@ -0,0 +1,8 @@
+import createMiddleware from "next-intl/middleware";
+import { routing } from "./i18n/routing";
+
+export default createMiddleware(routing);
+
+export const config = {
+  matcher: ["/", "/(en|zh)/:path*", "/((?!api|_next|_vercel|.*\\..*).*)"],
+};

next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
 
-const nextConfig: NextConfig = {
-  /* config options here */
-};
+const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
 
-export default nextConfig;
+const nextConfig: NextConfig = {};
+
+export default withNextIntl(nextConfig);

package.json

@@ -1,27 +1,38 @@
 {
   "name": "cydweb",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
+  "description": "CYD web flasher — Next.js + esp-web-tools for Cheap Yellow Display",
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "next build --turbopack",
+    "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "sync:firmware": "powershell -ExecutionPolicy Bypass -File ./scripts/sync-firmware.ps1"
   },
   "dependencies": {
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-separator": "^1.2.0",
+    "@radix-ui/react-slot": "^1.5.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.59.0",
+    "next": "15.5.28",
+    "next-intl": "^4.14.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.5.28"
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.5.28",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

scripts/sync-firmware.ps1

@@ -0,0 +1,37 @@
+# Mirror sibling project firmware archives into cydweb/firmware for public deploy.
+# Usage (from cydweb):
+#   .\scripts\sync-firmware.ps1
+
+$ErrorActionPreference = "Stop"
+$root = Split-Path -Parent (Split-Path -Parent $MyInvocation.MyCommand.Path)
+$cydRoot = Split-Path -Parent $root
+$dstRoot = Join-Path $root "firmware"
+
+New-Item -ItemType Directory -Force -Path $dstRoot | Out-Null
+
+$required = @("bootloader.bin", "partitions.bin", "boot_app0.bin", "firmware.bin")
+$count = 0
+
+Get-ChildItem $cydRoot -Directory | Where-Object { $_.Name -ne "cydweb" } | ForEach-Object {
+  $proj = $_.Name
+  $fwRoot = Join-Path $_.FullName "firmware"
+  if (-not (Test-Path $fwRoot)) { return }
+
+  Get-ChildItem $fwRoot -Directory -ErrorAction SilentlyContinue | ForEach-Object {
+    $variant = $_.Name
+    $src = $_.FullName
+    $ok = $true
+    foreach ($f in $required) {
+      if (-not (Test-Path (Join-Path $src $f))) { $ok = $false; break }
+    }
+    if (-not $ok) { return }
+
+    $dst = Join-Path $dstRoot (Join-Path $proj $variant)
+    New-Item -ItemType Directory -Force -Path $dst | Out-Null
+    Copy-Item (Join-Path $src "*") $dst -Force -Recurse
+    Write-Host "Synced $proj/$variant"
+    $script:count++
+  }
+}
+
+Write-Host "Done. $count firmware package(s) -> $dstRoot"

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/**/*.d.ts"],
   "exclude": ["node_modules"]
 }