From 91c79bf4131bb6240bcee3a0ea4a9ab80d9b8b28 Mon Sep 17 00:00:00 2001
From: Hoshino <luogu_dnj@outlook.com>
Date: Tue, 11 Aug 2026 11:37:40 +0800
Subject: [PATCH 1/5] refactor(webview): refactor webview

---
 packages/webview/src/ContestApp.tsx           | 525 ++++----------
 packages/webview/src/SidebarApp.tsx           | 159 ++---
 packages/webview/src/SubmissionDetailApp.tsx  |  76 +-
 packages/webview/src/WebviewApp.tsx           | 647 +++++-------------
 .../src/components/CookieSettingsPanel.tsx    |  96 +++
 .../webview/src/components/ProblemView.tsx    | 103 +++
 packages/webview/src/components/SampleBox.tsx |  73 ++
 .../webview/src/components/StatusBadge.tsx    |  15 +
 .../src/components/SubmissionHistory.tsx      |  87 +++
 .../webview/src/components/SubmitPanel.tsx    | 148 ++++
 packages/webview/src/components/TaskList.tsx  |  43 ++
 packages/webview/src/hooks/useTranslation.ts  |  64 ++
 .../webview/src/hooks/useWebviewMessage.ts    |  19 +
 packages/webview/src/utils/format.ts          |   8 +
 packages/webview/src/utils/status.ts          |  21 +
 15 files changed, 1049 insertions(+), 1035 deletions(-)
 create mode 100644 packages/webview/src/components/CookieSettingsPanel.tsx
 create mode 100644 packages/webview/src/components/ProblemView.tsx
 create mode 100644 packages/webview/src/components/SampleBox.tsx
 create mode 100644 packages/webview/src/components/StatusBadge.tsx
 create mode 100644 packages/webview/src/components/SubmissionHistory.tsx
 create mode 100644 packages/webview/src/components/SubmitPanel.tsx
 create mode 100644 packages/webview/src/components/TaskList.tsx
 create mode 100644 packages/webview/src/hooks/useTranslation.ts
 create mode 100644 packages/webview/src/hooks/useWebviewMessage.ts
 create mode 100644 packages/webview/src/utils/format.ts
 create mode 100644 packages/webview/src/utils/status.ts

diff --git a/packages/webview/src/ContestApp.tsx b/packages/webview/src/ContestApp.tsx
index 294891b..418259a 100644
--- a/packages/webview/src/ContestApp.tsx
+++ b/packages/webview/src/ContestApp.tsx
@@ -2,8 +2,14 @@ import React from "react";
 import { Button, Card, Spinner } from "@template/ui";
 import { useVSCode } from "./VSCodeProvider";
 import { useI18n } from "./i18n";
-import type { ContestProblem, SampleCase, Standing, SubmissionRecord, WebviewMessage } from "./types";
-import { HtmlContent, TranslatedBlock } from "./components/HtmlContent";
+import { ProblemView } from "./components/ProblemView";
+import { SubmitPanel } from "./components/SubmitPanel";
+import { SubmissionList } from "./components/SubmissionHistory";
+import { TaskList } from "./components/TaskList";
+import { HtmlContent } from "./components/HtmlContent";
+import { useWebviewMessage } from "./hooks/useWebviewMessage";
+import { useTranslation } from "./hooks/useTranslation";
+import type { ContestProblem, Standing, SubmissionRecord } from "./types";
 
 type Tab = "info" | "task" | "submit" | "rating";
 
@@ -35,30 +41,6 @@ const TABS: Array<{ key: Tab; label: string }> = [
     { key: "rating", label: "ui.tabRating" },
 ];
 
-const statusColor = (status: string): string => {
-    switch (status) {
-        case "AC":
-            return "text-green-500 bg-green-500/10";
-        case "WA":
-            return "text-red-500 bg-red-500/10";
-        case "TLE":
-            return "text-cyan-500 bg-cyan-500/10";
-        case "MLE":
-            return "text-yellow-500 bg-yellow-500/10";
-        case "RE":
-            return "text-purple-500 bg-purple-500/10";
-        case "CE":
-            return "text-gray-400 bg-gray-400/10";
-        default:
-            return "text-gray-400 bg-gray-400/10";
-    }
-};
-
-const formatSubmitTime = (time: string): string => {
-    const m = time.match(/(\d{2})-(\d{2}) (\d{2}:\d{2})/);
-    return m ? `${m[1]}-${m[2]} ${m[3]}` : time;
-};
-
 const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
     const vscode = useVSCode();
     const { t } = useI18n();
@@ -90,22 +72,18 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
     const [loadingStandings, setLoadingStandings] = React.useState(false);
     const standingsCache = React.useRef<Record<string, Standing[]>>({});
 
-    const [translatedCache, setTranslatedCache] = React.useState<Record<string, Record<string, string>>>({});
-    const [translated, setTranslated] = React.useState<Record<string, string> | null>(null);
-    const [translating, setTranslating] = React.useState(false);
-    const [translationMode, setTranslationMode] = React.useState<"api" | "free">("free");
-
     const [isLoading, setIsLoading] = React.useState(false);
     const [status, setStatus] = React.useState("");
     const [submissions, setSubmissions] = React.useState<SubmissionRecord[]>([]);
     const [loadingHistory, setLoadingHistory] = React.useState(false);
     const selectedTaskRef = React.useRef(selectedTask);
     selectedTaskRef.current = selectedTask;
+    const translation = useTranslation(selectedTaskRef, setStatus);
 
     const loadProblem = (task: string) => {
         setIsLoading(true);
         setStatus(t("status.fetchingProblem", { contest, task }));
-        setTranslated(translatedCache[task] ?? null);
+        translation.setTranslatedForTask(task);
         vscode.postMessage({ command: "loadProblem", contest, task });
     };
 
@@ -116,15 +94,7 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
     };
 
     const doTranslate = () => {
-        if (!problem) return;
-        setTranslating(true);
-        setStatus(t("status.translating"));
-        const texts: Record<string, string> = {};
-        if (problem.statement) texts[t("text.problemStatement")] = problem.statement;
-        if (problem.constraints) texts[t("text.constraints")] = problem.constraints;
-        if (problem.inputFormat) texts[t("text.inputFormat")] = problem.inputFormat;
-        if (problem.outputFormat) texts[t("text.outputFormat")] = problem.outputFormat;
-        vscode.postMessage({ command: "translate", payload: texts, targetLang: "ZH", translationMode });
+        translation.translate(problem);
     };
 
     const doCopyMarkdown = () => {
@@ -177,10 +147,6 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
         }
     };
 
-    const copySampleText = (key: string, text: string) => {
-        navigator.clipboard.writeText(text);
-    };
-
     React.useEffect(() => {
         setIsLoading(true);
         setStatus(t("status.loadingContest", { contest }));
@@ -188,105 +154,93 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
         vscode.postMessage({ command: "getCookie" });
     }, []);
 
-    React.useEffect(() => {
-        const handleMessage = (event: MessageEvent) => {
-            const message = event.data as WebviewMessage;
-            if (message.type === "tasks") {
-                setTasks(message.tasks ?? []);
-                setSelectedTask("");
-                setProblem(null);
-                setStatus(t("status.tasksLoaded", { count: (message.tasks ?? []).length }));
-                setIsLoading(false);
-            }
-            if (message.type === "contestInfo") {
-                setRated(message.Rated ?? false);
-                setContestTitle(message.title ?? "");
-                setAnnouncement(message.announcement ?? "");
-            }
-            if (message.type === "cf_challenge") {
-                setCfUrl(message.url ?? null);
-                setIsLoading(false);
-                setStatus(t("status.cfChallenge"));
-            }
-            if (message.type === "loginRequired") {
-                setIsLoading(false);
-                setStatus(t("status.loginRequiredSidebar"));
-            }
-            if (message.type === "problem") {
-                setProblem(message.problem ?? null);
-                setStatus(t("status.problemLoaded", { title: message.problem?.title ?? "" }));
-                setIsLoading(false);
-            }
-            if (message.type === "loading" || message.type === "update") {
-                setStatus(message.text ?? t("status.loading"));
-            }
-            if (message.type === "error") {
-                setStatus(message.text ?? t("err.operationFailed"));
-                setIsLoading(false);
-                setTranslating(false);
-                setLoadingStandings(false);
-                setLoadingHistory(false);
-            }
-            if (message.type === "cookieStatus") {
-                setHasCookie(message.hasCookie ?? false);
-                if (message.statusMessage) setStatus(message.statusMessage);
-            }
-            if (message.type === "registrationStatus") {
-                setSigned(message.signed ?? false);
-                setRegistrationMessage(message.registrationMessage ?? null);
-                setStatus(message.registrationMessage ?? (message.signed ? t("status.registrationSuccess") : t("status.registrationFail")));
-                setIsLoading(false);
-            }
-            if (message.type === "translation") {
-                const key = selectedTaskRef.current;
-                setTranslatedCache((prev) => ({ ...prev, [key]: message.translated ?? {} }));
-                setTranslated(message.translated ?? null);
-                setTranslating(false);
-                setStatus(t("status.translationDone"));
-            }
-            if (message.type === "submitPage") {
-                setSubmitPageError(null);
-                setSubmitTasks(message.submitTasks ?? []);
-                setSubmitLanguages(message.languages ?? []);
-                if (message.submitTasks && message.submitTasks.length > 0) {
-                    setSelectedSubmitTask(message.submitTasks[0].value);
-                }
-                if (message.languages && message.languages.length > 0) {
-                    setSelectedSubmitLanguage(message.languages[0].id);
-                }
-                setStatus(t("status.submitPageReady"));
-                setIsLoading(false);
-            }
-            if (message.type === "submitPageError") {
-                setSubmitPageError({ message: message.message ?? t("err.submitPageUnavailable"), url: message.url });
-                setStatus(message.message ?? t("err.submitPageUnavailable"));
-                setIsLoading(false);
-            }
-            if (message.type === "submitResult") {
-                setSubmitResult(message.submitResult ?? null);
-                setIsLoading(false);
-                setStatus(message.submitResult?.success ? t("status.submitSuccess") : (message.submitResult?.message ?? t("status.submitFailed")));
-            }
-            if (message.type === "statusUpdate") {
-                const statuses = message.statuses ?? {};
-                setTasks((prev) => prev.map((task) => ({ ...task, status: statuses[task.value] })));
+    useWebviewMessage({
+        tasks: (message) => {
+            setTasks(message.tasks ?? []);
+            setSelectedTask("");
+            setProblem(null);
+            setStatus(t("status.tasksLoaded", { count: (message.tasks ?? []).length }));
+            setIsLoading(false);
+        },
+        contestInfo: (message) => {
+            setRated(message.Rated ?? false);
+            setContestTitle(message.title ?? "");
+            setAnnouncement(message.announcement ?? "");
+        },
+        cf_challenge: (message) => {
+            setCfUrl(message.url ?? null);
+            setIsLoading(false);
+            setStatus(t("status.cfChallenge"));
+        },
+        loginRequired: () => {
+            setIsLoading(false);
+            setStatus(t("status.loginRequiredSidebar"));
+        },
+        problem: (message) => {
+            setProblem(message.problem ?? null);
+            setStatus(t("status.problemLoaded", { title: message.problem?.title ?? "" }));
+            setIsLoading(false);
+        },
+        loading: (message) => setStatus(message.text ?? t("status.loading")),
+        update: (message) => setStatus(message.text ?? t("status.loading")),
+        error: (message) => {
+            setStatus(message.text ?? t("err.operationFailed"));
+            setIsLoading(false);
+            translation.setTranslating(false);
+            setLoadingStandings(false);
+            setLoadingHistory(false);
+        },
+        cookieStatus: (message) => {
+            setHasCookie(message.hasCookie ?? false);
+            if (message.statusMessage) setStatus(message.statusMessage);
+        },
+        registrationStatus: (message) => {
+            setSigned(message.signed ?? false);
+            setRegistrationMessage(message.registrationMessage ?? null);
+            setStatus(message.registrationMessage ?? (message.signed ? t("status.registrationSuccess") : t("status.registrationFail")));
+            setIsLoading(false);
+        },
+        translation: (message) => translation.applyTranslation(message),
+        submitPage: (message) => {
+            setSubmitPageError(null);
+            setSubmitTasks(message.submitTasks ?? []);
+            setSubmitLanguages(message.languages ?? []);
+            if (message.submitTasks && message.submitTasks.length > 0) {
+                setSelectedSubmitTask(message.submitTasks[0].value);
             }
-            if (message.type === "submissionHistory") {
-                setSubmissions(message.submissions ?? []);
-                setLoadingHistory(false);
-                setStatus(t("status.historyLoaded", { count: (message.submissions ?? []).length }));
+            if (message.languages && message.languages.length > 0) {
+                setSelectedSubmitLanguage(message.languages[0].id);
             }
-            if (message.type === "standings") {
-                const list = message.standings ?? [];
-                standingsCache.current[contest] = list;
-                setStandings(list);
-                setLoadingStandings(false);
-                setStatus(t("status.standingsLoaded", { count: list.length }));
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => window.removeEventListener("message", handleMessage);
-    }, []);
+            setStatus(t("status.submitPageReady"));
+            setIsLoading(false);
+        },
+        submitPageError: (message) => {
+            setSubmitPageError({ message: message.message ?? t("err.submitPageUnavailable"), url: message.url });
+            setStatus(message.message ?? t("err.submitPageUnavailable"));
+            setIsLoading(false);
+        },
+        submitResult: (message) => {
+            setSubmitResult(message.submitResult ?? null);
+            setIsLoading(false);
+            setStatus(message.submitResult?.success ? t("status.submitSuccess") : (message.submitResult?.message ?? t("status.submitFailed")));
+        },
+        statusUpdate: (message) => {
+            const statuses = message.statuses ?? {};
+            setTasks((prev) => prev.map((task) => ({ ...task, status: statuses[task.value] })));
+        },
+        submissionHistory: (message) => {
+            setSubmissions(message.submissions ?? []);
+            setLoadingHistory(false);
+            setStatus(t("status.historyLoaded", { count: (message.submissions ?? []).length }));
+        },
+        standings: (message) => {
+            const list = message.standings ?? [];
+            standingsCache.current[contest] = list;
+            setStandings(list);
+            setLoadingStandings(false);
+            setStatus(t("status.standingsLoaded", { count: list.length }));
+        },
+    });
 
     const renderInfoTab = () => (
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
@@ -338,150 +292,27 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
     const renderTaskTab = () => (
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
             {tasks.length > 0 && (
-                <Card className="p-3 space-y-2">
-                    <div className="text-[13px] font-semibold">{t("ui.taskList")}</div>
-                    <div className="flex flex-wrap gap-2">
-                        {tasks.map((task) => (
-                            <Button
-                                key={task.value}
-                                variant={selectedTask === task.value ? "primary" : "secondary"}
-                                size="sm"
-                                onClick={() => {
-                                    setSelectedTask(task.value);
-                                    loadProblem(task.value);
-                                }}
-                                className="flex items-center gap-1"
-                            >
-                                {task.status && (
-                                    <span className={`text-[10px] px-1 rounded font-bold ${statusColor(task.status)}`}>
-                                        {task.status}
-                                    </span>
-                                )}
-                                {task.label}
-                            </Button>
-                        ))}
-                    </div>
-                </Card>
+                <TaskList
+                    tasks={tasks}
+                    selectedTask={selectedTask}
+                    onSelect={(value) => {
+                        setSelectedTask(value);
+                        loadProblem(value);
+                    }}
+                />
             )}
 
             {problem && (
-                <Card className="p-3 space-y-3">
-                    <div className="flex items-center justify-between flex-wrap gap-2">
-                        <div className="space-y-1">
-                            <div className="text-[13px] font-semibold">{problem.title}</div>
-                            <div className="text-[12px] opacity-60">{problem.url}</div>
-                        </div>
-                        <div className="flex flex-wrap gap-2 items-center">
-                            <Button onClick={doTranslate} disabled={translating} size="sm" className="h-[26px] text-[11px]">
-                                {translating ? t("ui.translating") : t("ui.translate")}
-                            </Button>
-                            <select
-                                value={translationMode}
-                                onChange={(e) => setTranslationMode(e.target.value as "api" | "free")}
-                                className="h-[26px] text-[11px] px-1 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none"
-                                title={t("ui.translationMode")}
-                            >
-                                <option value="free">{t("ui.free")}</option>
-                                <option value="api">{t("ui.api")}</option>
-                            </select>
-                            <Button onClick={doCopyMarkdown} size="sm" variant="secondary" className="h-[26px] text-[11px]">
-                                {t("ui.copyMarkdown")}
-                            </Button>
-                            <Button
-                                onClick={doExportToCph}
-                                size="sm"
-                                variant="secondary"
-                                className="h-[26px] text-[11px]"
-                                title={t("ui.exportCphTitle")}
-                            >
-                                {t("ui.exportCph")}
-                            </Button>
-                        </div>
-                    </div>
-
-                    {problem.statement && (
-                        <div className="space-y-1">
-                            <div className="text-[12px] font-semibold">{t("ui.statement")}</div>
-                            <HtmlContent html={problem.statement} />
-                            {translated?.[t("text.problemStatement")] && (
-                                <TranslatedBlock original={problem.statement} translation={translated[t("text.problemStatement")]} />
-                            )}
-                        </div>
-                    )}
-
-                    {problem.constraints && (
-                        <div className="space-y-1">
-                            <div className="text-[12px] font-semibold">{t("text.constraints")}</div>
-                            <HtmlContent html={problem.constraints} />
-                            {translated?.[t("text.constraints")] && (
-                                <TranslatedBlock original={problem.constraints} translation={translated[t("text.constraints")]} />
-                            )}
-                        </div>
-                    )}
-
-                    {problem.inputFormat && (
-                        <div className="space-y-1">
-                            <div className="text-[12px] font-semibold">{t("text.inputFormat")}</div>
-                            <HtmlContent html={problem.inputFormat} />
-                            {translated?.[t("text.inputFormat")] && (
-                                <TranslatedBlock original={problem.inputFormat} translation={translated[t("text.inputFormat")]} />
-                            )}
-                        </div>
-                    )}
-
-                    {problem.outputFormat && (
-                        <div className="space-y-1">
-                            <div className="text-[12px] font-semibold">{t("text.outputFormat")}</div>
-                            <HtmlContent html={problem.outputFormat} />
-                            {translated?.[t("text.outputFormat")] && (
-                                <TranslatedBlock original={problem.outputFormat} translation={translated[t("text.outputFormat")]} />
-                            )}
-                        </div>
-                    )}
-
-                    {problem.samples?.length > 0 ? (
-                        problem.samples.map((sample: SampleCase) => (
-                            <div key={sample.index} className="space-y-2">
-                                <div className="text-[12px] font-semibold">{t("ui.sampleLabel", { index: sample.index })}</div>
-                                <div className="rounded bg-[var(--vscode-input-background)] p-2 relative group">
-                                    <div className="text-[11px] opacity-60 mb-1">Input</div>
-                                    <pre className="text-[12px] whitespace-pre-wrap break-words">{sample.input}</pre>
-                                    <button
-                                        onClick={() => copySampleText(`${sample.index}-in`, sample.input)}
-                                        className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
-                                        title={t("ui.copyInput")}
-                                    >
-                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                                    </button>
-                                </div>
-                                <div className="rounded bg-[var(--vscode-input-background)] p-2 relative group">
-                                    <div className="text-[11px] opacity-60 mb-1">Output</div>
-                                    <pre className="text-[12px] whitespace-pre-wrap break-words">{sample.output}</pre>
-                                    <button
-                                        onClick={() => copySampleText(`${sample.index}-out`, sample.output)}
-                                        className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
-                                        title={t("ui.copyOutput")}
-                                    >
-                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                                    </button>
-                                </div>
-                            </div>
-                        ))
-                    ) : problem.sampleUrl ? (
-                        <div className="flex flex-col items-start gap-2">
-                            <div className="text-[12px] opacity-60">{t("ui.sampleExternal")}</div>
-                            <Button
-                                onClick={() => vscode.postMessage({ command: "openBrowser", url: problem.sampleUrl! })}
-                                size="sm"
-                                className="h-[26px] text-[11px]"
-                            >
-                                {t("ui.viewSamples")}
-                            </Button>
-                        </div>
-                    ) : (
-                        <div className="text-[12px] opacity-60">{t("ui.noSamples")}</div>
-                    )}
-                </Card>
+                <ProblemView
+                    problem={problem}
+                    translated={translation.translated}
+                    translating={translation.translating}
+                    translationMode={translation.translationMode}
+                    onTranslate={doTranslate}
+                    onTranslationModeChange={translation.setTranslationMode}
+                    onCopyMarkdown={doCopyMarkdown}
+                    onExportCph={doExportToCph}
+                />
             )}
 
             {!isLoading && tasks.length === 0 && (
@@ -520,86 +351,22 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
                     </div>
                 </div>
 
-                {submitPageError ? (
-                    <div className="space-y-2">
-                        <div className="text-[12px] p-2 rounded bg-red-500/10 text-red-500">{submitPageError.message}</div>
-                        <Button
-                            onClick={() => vscode.postMessage({ command: "openBrowser", url: submitPageError.url ?? `https://atcoder.jp/contests/${contest}/submit` })}
-                            size="sm"
-                            className="h-[26px] text-[11px]"
-                        >
-                            {t("ui.openSubmitPage")}
-                        </Button>
-                    </div>
-                ) : submitTasks.length === 0 && submitLanguages.length === 0 ? (
-                    <div className="text-[12px] opacity-60">{t("ui.clickToStart")}</div>
-                ) : (
-                    <div className="space-y-3">
-                        <div className="space-y-1">
-                            <div className="text-[11px] font-semibold">{t("ui.task")}</div>
-                            <select
-                                value={selectedSubmitTask}
-                                onChange={(e) => setSelectedSubmitTask(e.target.value)}
-                                className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
-                            >
-                                {submitTasks.map((t) => (
-                                    <option key={t.value} value={t.value}>{t.label}</option>
-                                ))}
-                            </select>
-                        </div>
-
-                        <div className="space-y-1">
-                            <div className="text-[11px] font-semibold">{t("ui.language")}</div>
-                            <select
-                                value={selectedSubmitLanguage}
-                                onChange={(e) => setSelectedSubmitLanguage(e.target.value)}
-                                className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
-                            >
-                                {submitLanguages.map((l) => (
-                                    <option key={l.id} value={l.id}>{l.label}</option>
-                                ))}
-                            </select>
-                        </div>
-
-                        <div className="space-y-1">
-                            <div className="text-[11px] font-semibold">{t("ui.sourceCode")}</div>
-                            <textarea
-                                value={sourceCode}
-                                onChange={(e) => setSourceCode(e.target.value)}
-                                placeholder={t("ui.codePlaceholder")}
-                                rows={10}
-                                className="w-full text-[12px] p-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)] resize-vertical font-mono"
-                            />
-                        </div>
-
-                        <Button
-                            onClick={handleSubmitCode}
-                            disabled={isLoading || !selectedSubmitTask || !selectedSubmitLanguage || !sourceCode.trim()}
-                            size="sm"
-                            className="h-[28px] text-[12px]"
-                        >
-                            {isLoading ? t("ui.submitting") : t("ui.submit")}
-                        </Button>
-
-                        {submitResult && (
-                            <div className={`text-[12px] p-2 rounded ${submitResult.success ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
-                                <div className="font-semibold mb-1">{submitResult.success ? t("ui.submitSuccessTitle") : t("ui.submitFailedTitle")}</div>
-                                <div>{submitResult.message}</div>
-                                {submitResult.url && (
-                                    <div className="mt-1">
-                                        <a
-                                            href="#"
-                                            onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: submitResult.url }); }}
-                                            className="underline"
-                                        >
-                                            {t("ui.viewSubmissionHistory")}
-                                        </a>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-                    </div>
-                )}
+                <SubmitPanel
+                    contest={contest}
+                    submitTasks={submitTasks}
+                    submitLanguages={submitLanguages}
+                    selectedTask={selectedSubmitTask}
+                    selectedLanguage={selectedSubmitLanguage}
+                    sourceCode={sourceCode}
+                    isLoading={isLoading}
+                    submitResult={submitResult}
+                    error={submitPageError}
+                    onTaskChange={setSelectedSubmitTask}
+                    onLanguageChange={setSelectedSubmitLanguage}
+                    onSourceCodeChange={setSourceCode}
+                    onSubmit={handleSubmitCode}
+                    onFetchPage={handleFetchSubmitPage}
+                />
             </Card>
 
             <Card className="p-3 space-y-2">
@@ -609,35 +376,9 @@ const ContestApp: React.FC<ContestAppProps> = ({ initContest = "" }) => {
                         {loadingHistory ? t("ui.refreshing") : t("ui.refresh")}
                     </Button>
                 </div>
-                {submissions.length === 0 ? (
-                    <div className="text-[12px] opacity-60">
-                        {loadingHistory ? t("ui.loadingHistory") : t("ui.noHistory")}
-                    </div>
-                ) : (
-                    <div className="space-y-1 max-h-[300px] overflow-y-auto">
-                        {submissions.map((s) => (
-                            <div key={s.id} className="flex items-center gap-2 px-2 py-1.5 text-[12px] border border-[var(--vscode-panel-border)] rounded hover:bg-[var(--vscode-list-hoverBackground)]">
-                                <span className="flex-1 truncate font-medium" title={`${s.task} · ${s.taskScreenName}`}>{s.task}</span>
-                                <span className="text-[10px] opacity-50 flex-shrink-0">{formatSubmitTime(s.time)}</span>
-                                <span className={`text-[10px] px-1 rounded font-bold ${statusColor(s.status)}`}>{s.status}</span>
-                                <span className="text-[11px] opacity-60 w-[50px] text-right">{s.score}</span>
-                                <button
-                                    onClick={() => vscode.postMessage({ command: "openSubmission", contest, id: s.id })}
-                                    className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
-                                >
-                                    {t("ui.details")}
-                                </button>
-                                <a
-                                    href="#"
-                                    onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: `https://atcoder.jp/contests/${contest}/submissions/${s.id}` }); }}
-                                    className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
-                                >
-                                    {t("ui.view")}
-                                </a>
-                            </div>
-                        ))}
-                    </div>
-                )}
+                <div className="max-h-[300px] overflow-y-auto">
+                    <SubmissionList contest={contest} records={submissions} loading={loadingHistory} />
+                </div>
             </Card>
         </div>
     );
diff --git a/packages/webview/src/SidebarApp.tsx b/packages/webview/src/SidebarApp.tsx
index 11033fa..0e61b7a 100644
--- a/packages/webview/src/SidebarApp.tsx
+++ b/packages/webview/src/SidebarApp.tsx
@@ -2,7 +2,10 @@ import React from "react";
 import { Button, Spinner } from "@template/ui";
 import { useVSCode } from "./VSCodeProvider";
 import { useI18n } from "./i18n";
-import type { HomepageContest, SubmissionRecord, WebviewMessage } from "./types";
+import { SubmissionList } from "./components/SubmissionHistory";
+import { useWebviewMessage } from "./hooks/useWebviewMessage";
+import { formatStart } from "./utils/format";
+import type { HomepageContest, SubmissionRecord } from "./types";
 
 const CATEGORY_GROUPS: Array<{ key: HomepageContest["category"] }> = [
     { key: "active" },
@@ -11,32 +14,6 @@ const CATEGORY_GROUPS: Array<{ key: HomepageContest["category"] }> = [
     { key: "daily" },
 ];
 
-const statusColor = (status: string): string => {
-    switch (status) {
-        case "AC":
-            return "text-green-500 bg-green-500/10";
-        case "WA":
-            return "text-red-500 bg-red-500/10";
-        case "TLE":
-            return "text-cyan-500 bg-cyan-500/10";
-        case "MLE":
-            return "text-yellow-500 bg-yellow-500/10";
-        case "RE":
-            return "text-purple-500 bg-purple-500/10";
-        case "CE":
-            return "text-gray-400 bg-gray-400/10";
-        default:
-            return "text-gray-400 bg-gray-400/10";
-    }
-};
-
-const formatStart = (start: string): string => (start.length >= 16 ? start.slice(5, 16) : start);
-
-const formatSubmitTime = (time: string): string => {
-    const m = time.match(/(\d{2})-(\d{2}) (\d{2}:\d{2})/);
-    return m ? `${m[1]}-${m[2]} ${m[3]}` : time;
-};
-
 const SidebarApp: React.FC = () => {
     const vscode = useVSCode();
     const { t, nodes } = useI18n();
@@ -92,58 +69,52 @@ const SidebarApp: React.FC = () => {
         vscode.postMessage({ command: "getCookie" });
     }, []);
 
-    React.useEffect(() => {
-        const handleMessage = (event: MessageEvent) => {
-            const message = event.data as WebviewMessage;
-            if (message.type === "contestList") {
-                setContests(message.contests ?? []);
-                setLoadingList(false);
-                setStatus(t("status.homepageLoaded", { count: (message.contests ?? []).length }));
-            }
-            if (message.type === "submissionHistory") {
-                setSubmissions(message.submissions ?? []);
-                setLoadingHistory(false);
-                setStatus(t("status.historyLoaded", { count: (message.submissions ?? []).length }));
-            }
-            if (message.type === "loading" || message.type === "update") {
-                setStatus(message.text ?? "");
-            }
-            if (message.type === "cookieChanged") {
-                if (typeof message.hasCookie === "boolean") {
-                    setHasCookie(message.hasCookie);
-                    if (message.hasCookie) {
-                        setShowLogin(false);
-                        setCookieInput("");
-                    }
-                }
-                setStatus(t("cookie.updated"));
-                fetchContests();
-                if (currentContestRef.current) {
-                    fetchHistory(currentContestRef.current);
-                }
-            }
-            if (message.type === "cookieStatus") {
-                const next = message.hasCookie ?? false;
-                setHasCookie(next);
-                if (next) {
+    useWebviewMessage({
+        contestList: (message) => {
+            setContests(message.contests ?? []);
+            setLoadingList(false);
+            setStatus(t("status.homepageLoaded", { count: (message.contests ?? []).length }));
+        },
+        submissionHistory: (message) => {
+            setSubmissions(message.submissions ?? []);
+            setLoadingHistory(false);
+            setStatus(t("status.historyLoaded", { count: (message.submissions ?? []).length }));
+        },
+        loading: (message) => setStatus(message.text ?? ""),
+        update: (message) => setStatus(message.text ?? ""),
+        cookieChanged: (message) => {
+            if (typeof message.hasCookie === "boolean") {
+                setHasCookie(message.hasCookie);
+                if (message.hasCookie) {
                     setShowLogin(false);
                     setCookieInput("");
                 }
-                if (message.statusMessage) setStatus(message.statusMessage);
             }
-            if (message.type === "loginRequired") {
-                setShowLogin(true);
-                setStatus(t("cookie.loginRequired"));
+            setStatus(t("cookie.updated"));
+            fetchContests();
+            if (currentContestRef.current) {
+                fetchHistory(currentContestRef.current);
             }
-            if (message.type === "error") {
-                setStatus(message.text ?? t("err.operationFailed"));
-                setLoadingList(false);
-                setLoadingHistory(false);
+        },
+        cookieStatus: (message) => {
+            const next = message.hasCookie ?? false;
+            setHasCookie(next);
+            if (next) {
+                setShowLogin(false);
+                setCookieInput("");
             }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => window.removeEventListener("message", handleMessage);
-    }, []);
+            if (message.statusMessage) setStatus(message.statusMessage);
+        },
+        loginRequired: () => {
+            setShowLogin(true);
+            setStatus(t("cookie.loginRequired"));
+        },
+        error: (message) => {
+            setStatus(message.text ?? t("err.operationFailed"));
+            setLoadingList(false);
+            setLoadingHistory(false);
+        },
+    });
 
     const renderContestRow = (contest: HomepageContest) => (
         <div
@@ -243,47 +214,9 @@ const SidebarApp: React.FC = () => {
                 <div className="flex-1 overflow-y-auto">
                     {!currentContest ? (
                         <div className="p-3 text-[12px] opacity-60">{t("ui.clickContestForHistory")}</div>
-                    ) : loadingHistory && submissions.length === 0 ? (
-                        <div className="p-3 flex items-center gap-2 text-[12px] opacity-70">
-                            <Spinner size="sm" />
-                            <span>{t("ui.loadingHistory")}</span>
-                        </div>
-                    ) : submissions.length === 0 ? (
-                        <div className="p-3 text-[12px] opacity-60">{t("ui.noHistory")}</div>
                     ) : (
-                        <div className="space-y-1 p-1">
-                            {submissions.map((s) => (
-                                <div
-                                    key={s.id}
-                                    className="flex items-center gap-2 px-2 py-1 text-[12px] border border-[var(--vscode-panel-border)] rounded hover:bg-[var(--vscode-list-hoverBackground)]"
-                                >
-                                    <span className="flex-1 truncate font-medium" title={`${s.task} · ${s.taskScreenName}`}>{s.task}</span>
-                                    <span className="text-[10px] opacity-50 flex-shrink-0">{formatSubmitTime(s.time)}</span>
-                                    <span className={`text-[10px] px-1 rounded font-bold ${statusColor(s.status)}`}>
-                                        {s.status}
-                                    </span>
-                                    <span className="text-[11px] opacity-60 w-[40px] text-right">{s.score}</span>
-                                    <button
-                                        onClick={() => vscode.postMessage({ command: "openSubmission", contest: currentContest, id: s.id })}
-                                        className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
-                                    >
-                                        {t("ui.details")}
-                                    </button>
-                                    <a
-                                        href="#"
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            vscode.postMessage({
-                                                command: "openBrowser",
-                                                url: `https://atcoder.jp/contests/${currentContest}/submissions/${s.id}`,
-                                            });
-                                        }}
-                                        className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
-                                    >
-                                        {t("ui.view")}
-                                    </a>
-                                </div>
-                            ))}
+                        <div className="p-1">
+                            <SubmissionList contest={currentContest} records={submissions} loading={loadingHistory} />
                         </div>
                     )}
                 </div>
diff --git a/packages/webview/src/SubmissionDetailApp.tsx b/packages/webview/src/SubmissionDetailApp.tsx
index 5d8fe57..ccb311a 100644
--- a/packages/webview/src/SubmissionDetailApp.tsx
+++ b/packages/webview/src/SubmissionDetailApp.tsx
@@ -2,32 +2,16 @@ import React from "react";
 import { Button, Card, Spinner } from "@template/ui";
 import { useVSCode } from "./VSCodeProvider";
 import { useI18n } from "./i18n";
-import type { SubmissionDetail, WebviewMessage } from "./types";
+import { StatusBadge } from "./components/StatusBadge";
+import { statusColor } from "./utils/status";
+import { useWebviewMessage } from "./hooks/useWebviewMessage";
+import type { SubmissionDetail } from "./types";
 
 interface SubmissionDetailAppProps {
     initContest?: string;
     initSubmissionId?: string;
 }
 
-const statusColor = (status: string): string => {
-    switch (status) {
-        case "AC":
-            return "text-green-500 bg-green-500/10";
-        case "WA":
-            return "text-red-500 bg-red-500/10";
-        case "TLE":
-            return "text-cyan-500 bg-cyan-500/10";
-        case "MLE":
-            return "text-yellow-500 bg-yellow-500/10";
-        case "RE":
-            return "text-purple-500 bg-purple-500/10";
-        case "CE":
-            return "text-gray-400 bg-gray-400/10";
-        default:
-            return "text-gray-400 bg-gray-400/10";
-    }
-};
-
 const SubmissionDetailApp: React.FC<SubmissionDetailAppProps> = ({ initContest = "", initSubmissionId = "" }) => {
     const vscode = useVSCode();
     const { t } = useI18n();
@@ -58,33 +42,27 @@ const SubmissionDetailApp: React.FC<SubmissionDetailAppProps> = ({ initContest =
         fetchDetail();
     }, []);
 
-    React.useEffect(() => {
-        const handleMessage = (event: MessageEvent) => {
-            const message = event.data as WebviewMessage;
-            if (message.type === "submissionDetail") {
-                setDetail(message.submissionDetail ?? null);
-                setIsLoading(false);
-                setStatus(t("status.detailLoaded", { id: message.submissionDetail?.id ?? "" }));
-            }
-            if (message.type === "loading" || message.type === "update") {
-                setStatus(message.text ?? "");
-            }
-            if (message.type === "error") {
-                setStatus(message.text ?? t("err.detail"));
-                setIsLoading(false);
-            }
-            if (message.type === "cf_challenge") {
-                setStatus(t("status.cfOpenBrowser"));
-                setIsLoading(false);
-            }
-            if (message.type === "loginRequired") {
-                setStatus(t("status.loginRequiredSidebar"));
-                setIsLoading(false);
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        return () => window.removeEventListener("message", handleMessage);
-    }, []);
+    useWebviewMessage({
+        submissionDetail: (message) => {
+            setDetail(message.submissionDetail ?? null);
+            setIsLoading(false);
+            setStatus(t("status.detailLoaded", { id: message.submissionDetail?.id ?? "" }));
+        },
+        loading: (message) => setStatus(message.text ?? ""),
+        update: (message) => setStatus(message.text ?? ""),
+        error: (message) => {
+            setStatus(message.text ?? t("err.detail"));
+            setIsLoading(false);
+        },
+        cf_challenge: () => {
+            setStatus(t("status.cfOpenBrowser"));
+            setIsLoading(false);
+        },
+        loginRequired: () => {
+            setStatus(t("status.loginRequiredSidebar"));
+            setIsLoading(false);
+        },
+    });
 
     const renderMeta = (label: string, value: string | undefined): React.ReactNode => (
         <div className="flex items-center gap-2 text-[12px]">
@@ -130,9 +108,7 @@ const SubmissionDetailApp: React.FC<SubmissionDetailAppProps> = ({ initContest =
                         <Card className="p-3 space-y-2">
                             <div className="flex items-center justify-between flex-wrap gap-1">
                                 <div className="text-[13px] font-semibold">{detail.task}</div>
-                                <span className={`text-[11px] px-2 py-0.5 rounded font-bold ${statusColor(detail.status)}`}>
-                                    {detail.status}
-                                </span>
+                                <StatusBadge status={detail.status} className="text-[11px] px-2 py-0.5" />
                             </div>
                             <div className="grid grid-cols-2 gap-x-4 gap-y-1">
                                 {renderMeta(t("ui.submitTime"), detail.time)}
diff --git a/packages/webview/src/WebviewApp.tsx b/packages/webview/src/WebviewApp.tsx
index c248055..51cdd5a 100644
--- a/packages/webview/src/WebviewApp.tsx
+++ b/packages/webview/src/WebviewApp.tsx
@@ -1,11 +1,17 @@
 import React from "react";
-import { Button, Card, Input, Spinner } from "@template/ui";
+import { Button, Input, Spinner } from "@template/ui";
 import "./styles.css";
 
 import { useVSCode } from "./VSCodeProvider";
 import { useI18n } from "./i18n";
-import type { WebviewMessage, ContestProblem, SampleCase, SubmitResult } from "./types";
-import { HtmlContent, TranslatedBlock } from "./components/HtmlContent";
+import { useWebviewMessage } from "./hooks/useWebviewMessage";
+import { useTranslation } from "./hooks/useTranslation";
+import type { WebviewMessage, ContestProblem, SubmitResult } from "./types";
+import { ProblemView } from "./components/ProblemView";
+import { SubmitPanel } from "./components/SubmitPanel";
+import { SubmissionList } from "./components/SubmissionHistory";
+import { TaskList } from "./components/TaskList";
+import { CookieSettingsPanel } from "./components/CookieSettingsPanel";
 
 export interface WebviewAppProps {
   title?: string;
@@ -15,7 +21,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
   title = "VSCode Extension",
 }) => {
   const vscode = useVSCode();
-  const { t, nodes } = useI18n();
+  const { t } = useI18n();
   const [contest, setContest] = React.useState("");
   const [tasks, setTasks] = React.useState<Array<{ label: string; value: string; url: string; status?: string }>>([]);
   const [selectedTask, setSelectedTask] = React.useState<string>("");
@@ -23,11 +29,8 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
   const [status, setStatus] = React.useState(t("ui.enterContestHint"));
   const [isLoading, setIsLoading] = React.useState(false);
   const [cfUrl, setCfUrl] = React.useState<string | null>(null);
-  const [translated, setTranslated] = React.useState<Record<string, string> | null>(null);
-  const [translatedCache, setTranslatedCache] = React.useState<Record<string, Record<string, string>>>({});
-  const [translating, setTranslating] = React.useState(false);
-  const [translationMode, setTranslationMode] = React.useState<"api" | "free">("free");
   const selectedTaskRef = React.useRef(selectedTask);
+  const translation = useTranslation(selectedTaskRef, setStatus);
   const [cookieInput, setCookieInput] = React.useState("");
   const [hasCookie, setHasCookie] = React.useState(false);
   const [showSettings, setShowSettings] = React.useState(false);
@@ -43,7 +46,6 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
   const [selectedSubmitLanguage, setSelectedSubmitLanguage] = React.useState("");
   const [sourceCode, setSourceCode] = React.useState("");
   const [submitResult, setSubmitResult] = React.useState<SubmitResult | null>(null);
-  const [copiedSample, setCopiedSample] = React.useState<Record<string, boolean>>({});
   const [showSubmissionHistory, setShowSubmissionHistory] = React.useState(false);
   const [submissionHistory, setSubmissionHistory] = React.useState<Array<{ id: string; time: string; task: string; taskScreenName: string; language: string; score: string; status: string }>>([]);
   const [loadingHistory, setLoadingHistory] = React.useState(false);
@@ -57,7 +59,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
   const loadProblem = async (nextContest: string, task: string) => {
     setIsLoading(true);
     setStatus(t("status.fetchingProblem", { contest: nextContest, task }));
-    setTranslated(translatedCache[task] ?? null);
+    translation.setTranslatedForTask(task);
     vscode.postMessage({ command: "loadProblem", contest: nextContest, task });
   };
 
@@ -67,6 +69,25 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
     vscode.postMessage({ command: "registerContest", contest, rated: isRated });
   };
 
+  const handleSaveCookie = (raw: string) => {
+    const val = raw.trim();
+    if (!val) {
+      setStatus(t("cookie.pasteFirst"));
+      return;
+    }
+    const finalVal = val.startsWith("REVEL_SESSION=") ? val : `REVEL_SESSION=${val}`;
+    setCookieInput("");
+    setHasCookie(true);
+    setStatus(t("cookie.saved"));
+    vscode.postMessage({ command: "setCookie", text: finalVal });
+  };
+
+  const handleClearCookie = () => {
+    vscode.postMessage({ command: "setCookie", text: "" });
+    setHasCookie(false);
+    setStatus(t("cookie.cleared"));
+  };
+
   const doCopyMarkdown = () => {
     if (!problem) return;
     vscode.postMessage({ command: "copyMarkdown", problem });
@@ -74,15 +95,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
   };
 
   const doTranslate = () => {
-    if (!problem) return;
-    setTranslating(true);
-    setStatus(t("status.translating"));
-    const texts: Record<string, string> = {};
-    if (problem.statement) texts[t("text.problemStatement")] = problem.statement;
-    if (problem.constraints) texts[t("text.constraints")] = problem.constraints;
-    if (problem.inputFormat) texts[t("text.inputFormat")] = problem.inputFormat;
-    if (problem.outputFormat) texts[t("text.outputFormat")] = problem.outputFormat;
-    vscode.postMessage({ command: "translate", payload: texts, targetLang: "ZH", translationMode } as WebviewMessage);
+    translation.translate(problem);
   };
 
   const doExportToCph = () => {
@@ -100,12 +113,6 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
     vscode.postMessage({ command: "fetchSubmitPage", contest });
   };
 
-  const copySampleText = (key: string, text: string) => {
-    navigator.clipboard.writeText(text);
-    setCopiedSample(prev => ({ ...prev, [key]: true }));
-    setTimeout(() => setCopiedSample(prev => ({ ...prev, [key]: false })), 1500);
-  };
-
   const handleFetchSubmissionHistory = () => {
     setLoadingHistory(true);
     setStatus(t("status.fetchingHistory"));
@@ -137,115 +144,103 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
     selectedTaskRef.current = selectedTask;
   }, [selectedTask]);
 
-  React.useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      const message = event.data as WebviewMessage;
-      if (message.type === "tasks") {
-        const nextTasks = message.tasks ?? [];
-        setTasks(nextTasks);
-        setSelectedTask("");
-        setProblem(null);
-        setRated(true);
-        setStatus(t("status.tasksLoaded", { count: nextTasks.length }));
-        setIsLoading(false);
-      }
-      if (message.type === "contestInfo") {
-        setRated(message.Rated ?? false);
+  useWebviewMessage({
+    tasks: (message) => {
+      const nextTasks = message.tasks ?? [];
+      setTasks(nextTasks);
+      setSelectedTask("");
+      setProblem(null);
+      setRated(true);
+      setStatus(t("status.tasksLoaded", { count: nextTasks.length }));
+      setIsLoading(false);
+    },
+    contestInfo: (message) => {
+      setRated(message.Rated ?? false);
+    },
+    problem: (message) => {
+      setProblem(message.problem ?? null);
+      setStatus(t("status.problemLoaded", { title: message.problem?.title ?? "" }));
+      setIsLoading(false);
+    },
+    loading: (message) => setStatus(message.text ?? t("status.loading")),
+    update: (message) => setStatus(message.text ?? t("status.loading")),
+    error: (message) => {
+      setStatus(message.text ?? t("err.operationFailed"));
+      setIsLoading(false);
+      translation.setTranslating(false);
+    },
+    cphExportResult: (message) => {
+      const ok = message.success === true;
+      setStatus(ok ? (message.message ?? t("status.sentToCph")) : (message.message ?? t("status.cphExportFailed")));
+      setIsLoading(false);
+    },
+    cf_challenge: (message) => {
+      setCfUrl(message.url ?? null);
+      setIsLoading(false);
+      setStatus(t("status.cfChallenge"));
+    },
+    loginRequired: () => {
+      setIsLoading(false);
+      setShowSettings(true);
+      setStatus(t("status.loginRequired"));
+    },
+    translation: (message) => translation.applyTranslation(message),
+    cookieStatus: (message) => {
+      setHasCookie(message.hasCookie ?? false);
+      setCookieInput("");
+      if (message.statusMessage) {
+        setStatus(message.statusMessage);
       }
-      if (message.type === "problem") {
-        setProblem(message.problem ?? null);
-        setStatus(t("status.problemLoaded", { title: message.problem?.title ?? "" }));
-        setIsLoading(false);
+      if (message.hasCookie) {
+        setCfUrl(null);
+        setShowSettings(false);
       }
-      if (message.type === "loading" || message.type === "update") {
-        setStatus(message.text ?? t("status.loading"));
+    },
+    registrationStatus: (message) => {
+      setSigned(message.signed ?? false);
+      setRegistrationMessage(message.registrationMessage ?? null);
+      setStatus(message.registrationMessage ?? (message.signed ? t("status.registrationSuccess") : t("status.registrationFail")));
+      setIsLoading(false);
+    },
+    submitPage: (message) => {
+      setSubmitTasks(message.submitTasks ?? []);
+      setSubmitLanguages(message.languages ?? []);
+      if (message.submitTasks && message.submitTasks.length > 0) {
+        setSelectedSubmitTask(message.submitTasks[0].value);
       }
-      if (message.type === "error") {
-        setStatus(message.text ?? t("err.operationFailed"));
-        setIsLoading(false);
-        setTranslating(false);
+      if (message.languages && message.languages.length > 0) {
+        setSelectedSubmitLanguage(message.languages[0].id);
       }
-      if (message.type === "cphExportResult") {
-        const ok = message.success === true;
-        setStatus(ok ? (message.message ?? t("status.sentToCph")) : (message.message ?? t("status.cphExportFailed")));
-        setIsLoading(false);
+      setShowSubmitPanel(true);
+      setStatus(t("status.submitPageReady"));
+      setIsLoading(false);
+    },
+    submitResult: (message) => {
+      setSubmitResult(message.submitResult ?? null);
+      setIsLoading(false);
+      if (message.submitResult?.success) {
+        setStatus(t("status.submitSuccess"));
+      } else {
+        setStatus(message.submitResult?.message ?? t("status.submitFailed"));
       }
-      if (message.type === "cf_challenge") {
-        setCfUrl(message.url ?? null);
-        setIsLoading(false);
-        setStatus(t("status.cfChallenge"));
+    },
+    statusUpdate: (message) => {
+      const statuses = message.statuses ?? {};
+      setTasks(prev => prev.map(t => ({ ...t, status: statuses[t.value] })));
+    },
+    submissionHistory: (message) => {
+      const records = message.submissions ?? [];
+      setSubmissionHistory(records);
+      const latest: Record<string, string> = {};
+      for (const s of records) {
+        if (!(s.taskScreenName in latest)) latest[s.taskScreenName] = s.status;
       }
-      if (message.type === "loginRequired") {
-        setIsLoading(false);
-        setShowSettings(true);
-        setStatus(t("status.loginRequired"));
-      }
-      if (message.type === "translation") {
-        setTranslatedCache(prev => ({ ...prev, [selectedTaskRef.current]: message.translated ?? {} }));
-        setTranslated(message.translated ?? null);
-        setTranslating(false);
-        setStatus(t("status.translationDone"));
-      }
-      if (message.type === "cookieStatus") {
-        setHasCookie(message.hasCookie ?? false);
-        setCookieInput("");
-        if (message.statusMessage) {
-          setStatus(message.statusMessage);
-        }
-        if (message.hasCookie) {
-          setCfUrl(null);
-          setShowSettings(false);
-        }
-      }
-      if (message.type === "registrationStatus") {
-        setSigned(message.signed ?? false);
-        setRegistrationMessage(message.registrationMessage ?? null);
-        setStatus(message.registrationMessage ?? (message.signed ? t("status.registrationSuccess") : t("status.registrationFail")));
-        setIsLoading(false);
-      }
-      if (message.type === "submitPage") {
-        setSubmitTasks(message.submitTasks ?? []);
-        setSubmitLanguages(message.languages ?? []);
-        if (message.submitTasks && message.submitTasks.length > 0) {
-          setSelectedSubmitTask(message.submitTasks[0].value);
-        }
-        if (message.languages && message.languages.length > 0) {
-          setSelectedSubmitLanguage(message.languages[0].id);
-        }
-        setShowSubmitPanel(true);
-        setStatus(t("status.submitPageReady"));
-        setIsLoading(false);
-      }
-      if (message.type === "submitResult") {
-        setSubmitResult(message.submitResult ?? null);
-        setIsLoading(false);
-        if (message.submitResult?.success) {
-          setStatus(t("status.submitSuccess"));
-        } else {
-          setStatus(message.submitResult?.message ?? t("status.submitFailed"));
-        }
-      }
-      if (message.type === "statusUpdate") {
-        const statuses = message.statuses ?? {};
-        setTasks(prev => prev.map(t => ({ ...t, status: statuses[t.value] })));
-      }
-      if (message.type === "submissionHistory") {
-        const m = message as any;
-        setSubmissionHistory(m.submissions ?? []);
-        const latest: Record<string, string> = {};
-        for (const s of (m.submissions ?? [])) {
-          if (!(s.taskScreenName in latest)) latest[s.taskScreenName] = s.status;
-        }
-        setTasks(prev => prev.map(t => ({ ...t, status: latest[t.value] })));
-        setLoadingHistory(false);
-        setStatus(t("status.historyLoaded", { count: (m.submissions ?? []).length }));
-        setShowSubmissionHistory(true);
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, []);
+      setTasks(prev => prev.map(t => ({ ...t, status: latest[t.value] })));
+      setLoadingHistory(false);
+      setStatus(t("status.historyLoaded", { count: records.length }));
+      setShowSubmissionHistory(true);
+    },
+  });
 
   function getStatusColor() {
     if (isLoading) return "bg-yellow-500";
@@ -279,94 +274,13 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
       {/* 主内容 */}
       <div className="flex-1 flex flex-col bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]">
         {showSettings && (
-          <div className="p-3 border-b border-[var(--vscode-panel-border)] space-y-2 bg-[var(--vscode-textBlockQuote-background)]">
-            <div className="text-[12px] font-semibold">{t("cookie.title")}</div>
-            <div className="space-y-1 text-[11px] opacity-70 leading-relaxed">
-              <div>
-                {nodes(t("cookie.onlyNeedRevel"), {
-                  code: <code className="bg-[var(--vscode-textBlockQuote-background)] px-1 rounded">REVEL_SESSION</code>,
-                })}
-              </div>
-              <div className="font-medium mt-1">{t("cookie.steps")}</div>
-              <ol className="list-decimal pl-4 space-y-0.5">
-                <li>
-                  {nodes(t("cookie.step1"), {
-                    link: (
-                      <span className="underline cursor-pointer" onClick={() => vscode.postMessage({ command: "openBrowser", url: "https://atcoder.jp/login" })}>
-                        https://atcoder.jp/login
-                      </span>
-                    ),
-                  })}
-                </li>
-                <li>
-                  {nodes(t("cookie.step2"), {
-                    key: <kbd className="px-1 rounded border border-[var(--vscode-input-border,#6e7681)]">F12</kbd>,
-                  })}
-                </li>
-                <li>
-                  {nodes(t("cookie.step3"), {
-                    application: <b>{t("cookie.chromeApp")}</b>,
-                    storage: <b>{t("cookie.edgeStorage")}</b>,
-                  })}
-                </li>
-                <li>
-                  {nodes(t("cookie.step4"), {
-                    cookies: <b>Cookies</b>,
-                    site: <b>https://atcoder.jp</b>,
-                  })}
-                </li>
-                <li>
-                  {nodes(t("cookie.step5"), {
-                    code: <code className="bg-[var(--vscode-textBlockQuote-background)] px-1 rounded">REVEL_SESSION</code>,
-                    value: <b>Value</b>,
-                  })}
-                </li>
-                <li>{t("cookie.step6")}</li>
-              </ol>
-            </div>
-            <div className="flex items-center gap-2">
-              <input
-                type="password"
-                value={cookieInput}
-                onChange={(e) => setCookieInput(e.target.value)}
-                placeholder={hasCookie ? t("cookie.placeholderHas") : t("cookie.placeholderEmpty")}
-                className="flex-1 h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
-              />
-              <Button
-                onClick={() => {
-                  const val = cookieInput.trim();
-                  if (!val) {
-                    setStatus(t("cookie.pasteFirst"));
-                    return;
-                  }
-                  const finalVal = val.startsWith("REVEL_SESSION=") ? val : `REVEL_SESSION=${val}`;
-                  setCookieInput("");
-                  setHasCookie(true);
-                  setStatus(t("cookie.saved"));
-                  vscode.postMessage({ command: "setCookie", text: finalVal });
-                }}
-                size="sm"
-                className="h-[28px] text-[11px]"
-                disabled={!cookieInput.trim()}
-              >
-                {t("ui.save")}
-              </Button>
-              {hasCookie && (
-                  <Button
-                    onClick={() => {
-                      vscode.postMessage({ command: "setCookie", text: "" });
-                      setHasCookie(false);
-                      setStatus(t("cookie.cleared"));
-                    }}
-                    size="sm"
-                    variant="secondary"
-                    className="h-[28px] text-[11px]"
-                  >
-                    {t("ui.clear")}
-                  </Button>
-              )}
-            </div>
-          </div>
+          <CookieSettingsPanel
+            hasCookie={hasCookie}
+            cookieInput={cookieInput}
+            onCookieInputChange={setCookieInput}
+            onSave={handleSaveCookie}
+            onClear={handleClearCookie}
+          />
         )}
         <div className="p-3 border-b border-[var(--vscode-panel-border)] space-y-2">
           <div className="flex flex-wrap items-center gap-2">
@@ -376,7 +290,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
               onChange={(e) => setContest(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && void loadContest(contest)}
               placeholder={t("ui.contestPlaceholder")}
-              className="flex-1 h-[28px] text-[12px] bg-white! text-[#000000]! placeholder:text-[#000000]! placeholder:opacity-100! shadow-none!"
+              className="flex-1 h-[28px] text-[12px]"
               disabled={isLoading}
             />
             <Button onClick={() => void loadContest(contest)} disabled={isLoading} className="h-[28px] text-[12px]">
@@ -459,88 +373,21 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
                 </Button>
               </div>
 
-              {submitTasks.length === 0 ? (
-                <Button onClick={handleFetchSubmitPage} disabled={isLoading} size="sm" className="h-[28px] text-[12px]">
-                  {isLoading ? t("ui.fetching") : t("ui.fetchSubmitPage")}
-                </Button>
-              ) : (
-                <div className="space-y-3">
-                  <div className="space-y-1">
-                    <div className="text-[11px] font-semibold">{t("ui.task")}</div>
-                    <select
-                      value={selectedSubmitTask}
-                      onChange={(e) => setSelectedSubmitTask(e.target.value)}
-                      className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
-                    >
-                      {submitTasks.map((t) => (
-                        <option key={t.value} value={t.value}>{t.label}</option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div className="space-y-1">
-                    <div className="text-[11px] font-semibold">{t("ui.language")}</div>
-                    <select
-                      value={selectedSubmitLanguage}
-                      onChange={(e) => setSelectedSubmitLanguage(e.target.value)}
-                      className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
-                    >
-                      {submitLanguages.map((l) => (
-                        <option key={l.id} value={l.id}>{l.label}</option>
-                      ))}
-                    </select>
-                  </div>
-
-                  <div className="space-y-1">
-                    <div className="text-[11px] font-semibold">{t("ui.sourceCode")}</div>
-                    <textarea
-                      value={sourceCode}
-                      onChange={(e) => setSourceCode(e.target.value)}
-                      placeholder={t("ui.codePlaceholder")}
-                      rows={8}
-                      className="w-full text-[12px] p-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)] resize-vertical font-mono"
-                    />
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <Button
-                      onClick={handleSubmitCode}
-                      disabled={isLoading || !selectedSubmitTask || !selectedSubmitLanguage || !sourceCode.trim()}
-                      size="sm"
-                      className="h-[28px] text-[12px]"
-                    >
-                      {isLoading ? t("ui.submitting") : t("ui.submit")}
-                    </Button>
-                    <Button
-                      onClick={handleFetchSubmitPage}
-                      disabled={isLoading}
-                      size="sm"
-                      variant="secondary"
-                      className="h-[28px] text-[12px]"
-                    >
-                      {t("ui.refresh")}
-                    </Button>
-                  </div>
-
-                  {submitResult && (
-                    <div className={`text-[12px] p-2 rounded ${submitResult.success ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
-                      <div className="font-semibold mb-1">{submitResult.success ? t("ui.submitSuccessTitle") : t("ui.submitFailedTitle")}</div>
-                      <div>{submitResult.message}</div>
-                      {submitResult.url && (
-                        <div className="mt-1">
-                          <a
-                            href="#"
-                            onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: submitResult.url }); }}
-                            className="underline"
-                          >
-                            {t("ui.viewSubmissionHistory")}
-                          </a>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
+              <SubmitPanel
+                contest={contest}
+                submitTasks={submitTasks}
+                submitLanguages={submitLanguages}
+                selectedTask={selectedSubmitTask}
+                selectedLanguage={selectedSubmitLanguage}
+                sourceCode={sourceCode}
+                isLoading={isLoading}
+                submitResult={submitResult}
+                onTaskChange={setSelectedSubmitTask}
+                onLanguageChange={setSelectedSubmitLanguage}
+                onSourceCodeChange={setSourceCode}
+                onSubmit={handleSubmitCode}
+                onFetchPage={handleFetchSubmitPage}
+              />
             </div>
           </div>
         )}
@@ -570,196 +417,36 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
                 </div>
               </div>
 
-              {submissionHistory.length === 0 ? (
-                <div className="text-[12px] opacity-60">
-                  {loadingHistory ? t("ui.loadingHistory") : t("ui.noHistory")}
-                </div>
-              ) : (
-                <div className="space-y-1 max-h-[300px] overflow-y-auto">
-                  {submissionHistory.map((s) => (
-                    <div key={s.id} className="flex items-center gap-2 px-2 py-1.5 text-[12px] border border-[var(--vscode-panel-border)] rounded hover:bg-[var(--vscode-list-hoverBackground)]">
-                      <span className="text-[11px] opacity-60 w-[120px] flex-shrink-0">{s.time}</span>
-                      <span className="flex-1 truncate">{s.task}</span>
-                      <span className={`text-[10px] px-1 rounded font-bold ${
-                        s.status === "AC" ? "text-green-500 bg-green-500/10" :
-                        s.status === "WA" ? "text-red-500 bg-red-500/10" :
-                        s.status === "TLE" ? "text-cyan-500 bg-cyan-500/10" :
-                        s.status === "MLE" ? "text-yellow-500 bg-yellow-500/10" :
-                        s.status === "RE" ? "text-purple-500 bg-purple-500/10" :
-                        s.status === "CE" ? "text-gray-400 bg-gray-400/10" :
-                        "text-gray-400 bg-gray-400/10"
-                      }`}>{s.status}</span>
-                      <span className="text-[11px] opacity-60 w-[50px] text-right">{s.score}</span>
-                      <a
-                        href="#"
-                        onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: `https://atcoder.jp/contests/${contest}/submissions/${s.id}` }); }}
-                        className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
-                      >
-                        {t("ui.view")}
-                      </a>
-                    </div>
-                  ))}
-                </div>
-              )}
+              <div className="max-h-[300px] overflow-y-auto">
+                <SubmissionList contest={contest} records={submissionHistory} loading={loadingHistory} timeFirst />
+              </div>
             </div>
           </div>
         )}
 
         <div className="flex-1 overflow-y-auto p-3 space-y-3">
           {tasks.length > 0 && (
-            <Card className="p-3 space-y-2">
-              <div className="text-[13px] font-semibold">{t("ui.taskList")}</div>
-              <div className="flex flex-wrap gap-2">
-                {tasks.map((task) => (
-                  <Button
-                    key={task.value}
-                    variant={selectedTask === task.value ? "primary" : "secondary"}
-                    size="sm"
-                    onClick={() => {
-                      setSelectedTask(task.value);
-                      void loadProblem(contest, task.value);
-                    }}
-                    className="flex items-center gap-1"
-                  >
-                    {task.status && (
-                      <span className={`text-[10px] px-1 rounded font-bold ${
-                        task.status === "AC" ? "text-green-500 bg-green-500/10" :
-                        task.status === "WA" ? "text-red-500 bg-red-500/10" :
-                        task.status === "TLE" ? "text-cyan-500 bg-cyan-500/10" :
-                        task.status === "MLE" ? "text-yellow-500 bg-yellow-500/10" :
-                        task.status === "RE" ? "text-purple-500 bg-purple-500/10" :
-                        task.status === "CE" ? "text-gray-400 bg-gray-400/10" :
-                        task.status === "WJ" || task.status === "WR" ? "text-yellow-500 bg-yellow-500/10" :
-                        "text-gray-400 bg-gray-400/10"
-                      }`}>{task.status}</span>
-                    )}
-                    {task.label}
-                  </Button>
-                ))}
-              </div>
-            </Card>
+            <TaskList
+              tasks={tasks}
+              selectedTask={selectedTask}
+              onSelect={(value) => {
+                setSelectedTask(value);
+                void loadProblem(contest, value);
+              }}
+            />
           )}
 
           {problem && (
-            <Card className="p-3 space-y-3">
-              <div className="flex items-center justify-between">
-                <div className="space-y-1">
-                  <div className="text-[13px] font-semibold">{problem.title}</div>
-                  <div className="text-[12px] opacity-60">{problem.url}</div>
-                </div>
-                <div className="flex flex-wrap gap-2 items-center">
-                  <Button onClick={doTranslate} disabled={translating} size="sm" className="h-[26px] text-[11px]">
-                    {translating ? t("ui.translating") : t("ui.translate")}
-                  </Button>
-                  <select
-                    value={translationMode}
-                    onChange={(e) => setTranslationMode(e.target.value as "api" | "free")}
-                    className="h-[26px] text-[11px] px-1 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none"
-                    title={t("ui.translationMode")}
-                  >
-                    <option value="free">{t("ui.free")}</option>
-                    <option value="api">{t("ui.api")}</option>
-                  </select>
-                  <Button onClick={doCopyMarkdown} size="sm" variant="secondary" className="h-[26px] text-[11px]">
-                    {t("ui.copyMarkdown")}
-                  </Button>
-                  <Button onClick={doExportToCph} size="sm" variant="secondary" className="h-[26px] text-[11px]" title={t("ui.exportCphTitle")}>
-                    {t("ui.exportCph")}
-                  </Button>
-                </div>
-              </div>
-
-              {problem.statement && (
-                <div className="space-y-1">
-                  <div className="text-[12px] font-semibold">{t("ui.statement")}</div>
-                  <HtmlContent html={problem.statement} />
-                  {translated?.[t("text.problemStatement")] && (
-                    <TranslatedBlock original={problem.statement} translation={translated[t("text.problemStatement")]} />
-                  )}
-                </div>
-              )}
-
-              {problem.constraints && (
-                <div className="space-y-1">
-                  <div className="text-[12px] font-semibold">{t("text.constraints")}</div>
-                  <HtmlContent html={problem.constraints} />
-                  {translated?.[t("text.constraints")] && (
-                    <TranslatedBlock original={problem.constraints} translation={translated[t("text.constraints")]} />
-                  )}
-                </div>
-              )}
-
-              {problem.inputFormat && (
-                <div className="space-y-1">
-                  <div className="text-[12px] font-semibold">{t("text.inputFormat")}</div>
-                  <HtmlContent html={problem.inputFormat} />
-                  {translated?.[t("text.inputFormat")] && (
-                    <TranslatedBlock original={problem.inputFormat} translation={translated[t("text.inputFormat")]} />
-                  )}
-                </div>
-              )}
-
-              {problem.outputFormat && (
-                <div className="space-y-1">
-                  <div className="text-[12px] font-semibold">{t("text.outputFormat")}</div>
-                  <HtmlContent html={problem.outputFormat} />
-                  {translated?.[t("text.outputFormat")] && (
-                    <TranslatedBlock original={problem.outputFormat} translation={translated[t("text.outputFormat")]} />
-                  )}
-                </div>
-              )}
-
-              {problem.samples?.length > 0 ? (
-                problem.samples.map((sample: SampleCase) => (
-                  <div key={sample.index} className="space-y-2">
-                    <div className="text-[12px] font-semibold">{t("ui.sampleLabel", { index: sample.index })}</div>
-                    <div className="rounded bg-[var(--vscode-input-background)] p-2 relative group">
-                      <div className="text-[11px] opacity-60 mb-1">Input</div>
-                      <pre className="text-[12px] whitespace-pre-wrap break-words">{sample.input}</pre>
-                      <button
-                        onClick={() => copySampleText(`${sample.index}-in`, sample.input)}
-                        className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
-                        title={t("ui.copyInput")}
-                      >
-                        {copiedSample[`${sample.index}-in`] ? (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-                        ) : (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                        )}
-                      </button>
-                    </div>
-                    <div className="rounded bg-[var(--vscode-input-background)] p-2 relative group">
-                      <div className="text-[11px] opacity-60 mb-1">Output</div>
-                      <pre className="text-[12px] whitespace-pre-wrap break-words">{sample.output}</pre>
-                      <button
-                        onClick={() => copySampleText(`${sample.index}-out`, sample.output)}
-                        className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
-                        title={t("ui.copyOutput")}
-                      >
-                        {copiedSample[`${sample.index}-out`] ? (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-                        ) : (
-                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--vscode-editor-foreground)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                ))
-              ) : problem.sampleUrl ? (
-                <div className="flex flex-col items-start gap-2">
-                  <div className="text-[12px] opacity-60">{t("ui.sampleExternal")}</div>
-                  <Button
-                    onClick={() => vscode.postMessage({ command: "openBrowser", url: problem.sampleUrl! })}
-                    size="sm"
-                    className="h-[26px] text-[11px]"
-                  >
-                    {t("ui.viewSamples")}
-                  </Button>
-                </div>
-              ) : (
-                <div className="text-[12px] opacity-60">{t("ui.noSamples")}</div>
-              )}
-            </Card>
+            <ProblemView
+              problem={problem}
+              translated={translation.translated}
+              translating={translation.translating}
+              translationMode={translation.translationMode}
+              onTranslate={doTranslate}
+              onTranslationModeChange={translation.setTranslationMode}
+              onCopyMarkdown={doCopyMarkdown}
+              onExportCph={doExportToCph}
+            />
           )}
 
           {!isLoading && tasks.length === 0 && !problem && !cfUrl && (
diff --git a/packages/webview/src/components/CookieSettingsPanel.tsx b/packages/webview/src/components/CookieSettingsPanel.tsx
new file mode 100644
index 0000000..71c362e
--- /dev/null
+++ b/packages/webview/src/components/CookieSettingsPanel.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { Button } from "@template/ui";
+import { useI18n } from "../i18n";
+import { useVSCode } from "../VSCodeProvider";
+
+interface CookieSettingsPanelProps {
+    hasCookie: boolean;
+    cookieInput: string;
+    onCookieInputChange: (value: string) => void;
+    onSave: (raw: string) => void;
+    onClear: () => void;
+}
+
+const CookieSettingsPanel: React.FC<CookieSettingsPanelProps> = ({
+    hasCookie,
+    cookieInput,
+    onCookieInputChange,
+    onSave,
+    onClear,
+}) => {
+    const { t, nodes } = useI18n();
+    const vscode = useVSCode();
+
+    return (
+        <div className="p-3 border-b border-[var(--vscode-panel-border)] space-y-2 bg-[var(--vscode-textBlockQuote-background)]">
+            <div className="text-[12px] font-semibold">{t("cookie.title")}</div>
+            <div className="space-y-1 text-[11px] opacity-70 leading-relaxed">
+                <div>
+                    {nodes(t("cookie.onlyNeedRevel"), {
+                        code: <code className="bg-[var(--vscode-textBlockQuote-background)] px-1 rounded">REVEL_SESSION</code>,
+                    })}
+                </div>
+                <div className="font-medium mt-1">{t("cookie.steps")}</div>
+                <ol className="list-decimal pl-4 space-y-0.5">
+                    <li>
+                        {nodes(t("cookie.step1"), {
+                            link: (
+                                <span className="underline cursor-pointer" onClick={() => vscode.postMessage({ command: "openBrowser", url: "https://atcoder.jp/login" })}>
+                                    https://atcoder.jp/login
+                                </span>
+                            ),
+                        })}
+                    </li>
+                    <li>
+                        {nodes(t("cookie.step2"), {
+                            key: <kbd className="px-1 rounded border border-[var(--vscode-input-border,#6e7681)]">F12</kbd>,
+                        })}
+                    </li>
+                    <li>
+                        {nodes(t("cookie.step3"), {
+                            application: <b>{t("cookie.chromeApp")}</b>,
+                            storage: <b>{t("cookie.edgeStorage")}</b>,
+                        })}
+                    </li>
+                    <li>
+                        {nodes(t("cookie.step4"), {
+                            cookies: <b>Cookies</b>,
+                            site: <b>https://atcoder.jp</b>,
+                        })}
+                    </li>
+                    <li>
+                        {nodes(t("cookie.step5"), {
+                            code: <code className="bg-[var(--vscode-textBlockQuote-background)] px-1 rounded">REVEL_SESSION</code>,
+                            value: <b>Value</b>,
+                        })}
+                    </li>
+                    <li>{t("cookie.step6")}</li>
+                </ol>
+            </div>
+            <div className="flex items-center gap-2">
+                <input
+                    type="password"
+                    value={cookieInput}
+                    onChange={(e) => onCookieInputChange(e.target.value)}
+                    placeholder={hasCookie ? t("cookie.placeholderHas") : t("cookie.placeholderEmpty")}
+                    className="flex-1 h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
+                />
+                <Button
+                    onClick={() => onSave(cookieInput)}
+                    size="sm"
+                    className="h-[28px] text-[11px]"
+                    disabled={!cookieInput.trim()}
+                >
+                    {t("ui.save")}
+                </Button>
+                {hasCookie && (
+                    <Button onClick={onClear} size="sm" variant="secondary" className="h-[28px] text-[11px]">
+                        {t("ui.clear")}
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export { CookieSettingsPanel };
diff --git a/packages/webview/src/components/ProblemView.tsx b/packages/webview/src/components/ProblemView.tsx
new file mode 100644
index 0000000..54f0802
--- /dev/null
+++ b/packages/webview/src/components/ProblemView.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { Button, Card } from "@template/ui";
+import { useI18n } from "../i18n";
+import { useVSCode } from "../VSCodeProvider";
+import { HtmlContent, TranslatedBlock } from "./HtmlContent";
+import { SampleBox } from "./SampleBox";
+import type { ContestProblem } from "../types";
+
+interface ProblemViewProps {
+    problem: ContestProblem;
+    translated: Record<string, string> | null;
+    translating: boolean;
+    translationMode: "api" | "free";
+    onTranslate: () => void;
+    onTranslationModeChange: (mode: "api" | "free") => void;
+    onCopyMarkdown: () => void;
+    onExportCph: () => void;
+}
+
+const ProblemView: React.FC<ProblemViewProps> = ({
+    problem,
+    translated,
+    translating,
+    translationMode,
+    onTranslate,
+    onTranslationModeChange,
+    onCopyMarkdown,
+    onExportCph,
+}) => {
+    const { t } = useI18n();
+    const vscode = useVSCode();
+
+    const renderSection = (labelKey: string, html: string, transKey: string) => (
+        <div className="space-y-1">
+            <div className="text-[12px] font-semibold">{t(labelKey)}</div>
+            <HtmlContent html={html} />
+            {translated?.[t(transKey)] && (
+                <TranslatedBlock original={html} translation={translated[t(transKey)]} />
+            )}
+        </div>
+    );
+
+    return (
+        <Card className="p-3 space-y-3">
+            <div className="flex items-center justify-between flex-wrap gap-2">
+                <div className="space-y-1">
+                    <div className="text-[13px] font-semibold">{problem.title}</div>
+                    <div className="text-[12px] opacity-60">{problem.url}</div>
+                </div>
+                <div className="flex flex-wrap gap-2 items-center">
+                    <Button onClick={onTranslate} disabled={translating} size="sm" className="h-[26px] text-[11px]">
+                        {translating ? t("ui.translating") : t("ui.translate")}
+                    </Button>
+                    <select
+                        value={translationMode}
+                        onChange={(e) => onTranslationModeChange(e.target.value as "api" | "free")}
+                        className="h-[26px] text-[11px] px-1 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none"
+                        title={t("ui.translationMode")}
+                    >
+                        <option value="free">{t("ui.free")}</option>
+                        <option value="api">{t("ui.api")}</option>
+                    </select>
+                    <Button onClick={onCopyMarkdown} size="sm" variant="secondary" className="h-[26px] text-[11px]">
+                        {t("ui.copyMarkdown")}
+                    </Button>
+                    <Button
+                        onClick={onExportCph}
+                        size="sm"
+                        variant="secondary"
+                        className="h-[26px] text-[11px]"
+                        title={t("ui.exportCphTitle")}
+                    >
+                        {t("ui.exportCph")}
+                    </Button>
+                </div>
+            </div>
+
+            {problem.statement && renderSection("ui.statement", problem.statement, "text.problemStatement")}
+            {problem.constraints && renderSection("text.constraints", problem.constraints, "text.constraints")}
+            {problem.inputFormat && renderSection("text.inputFormat", problem.inputFormat, "text.inputFormat")}
+            {problem.outputFormat && renderSection("text.outputFormat", problem.outputFormat, "text.outputFormat")}
+
+            {problem.samples && problem.samples.length > 0 ? (
+                problem.samples.map((sample) => <SampleBox key={sample.index} sample={sample} />)
+            ) : problem.sampleUrl ? (
+                <div className="flex flex-col items-start gap-2">
+                    <div className="text-[12px] opacity-60">{t("ui.sampleExternal")}</div>
+                    <Button
+                        onClick={() => vscode.postMessage({ command: "openBrowser", url: problem.sampleUrl! })}
+                        size="sm"
+                        className="h-[26px] text-[11px]"
+                    >
+                        {t("ui.viewSamples")}
+                    </Button>
+                </div>
+            ) : (
+                <div className="text-[12px] opacity-60">{t("ui.noSamples")}</div>
+            )}
+        </Card>
+    );
+};
+
+export { ProblemView };
diff --git a/packages/webview/src/components/SampleBox.tsx b/packages/webview/src/components/SampleBox.tsx
new file mode 100644
index 0000000..2de063c
--- /dev/null
+++ b/packages/webview/src/components/SampleBox.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { useI18n } from "../i18n";
+import type { SampleCase } from "../types";
+
+const CopyIcon: React.FC = () => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="var(--vscode-editor-foreground)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+);
+
+const CheckIcon: React.FC = () => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="var(--vscode-editor-foreground)"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <polyline points="20 6 9 17 4 12" />
+    </svg>
+);
+
+interface SampleBoxProps {
+    sample: SampleCase;
+}
+
+const SampleBox: React.FC<SampleBoxProps> = ({ sample }) => {
+    const { t } = useI18n();
+    const [copied, setCopied] = React.useState<"in" | "out" | null>(null);
+
+    const copy = (type: "in" | "out", text: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(type);
+        setTimeout(() => setCopied(null), 1500);
+    };
+
+    const renderBlock = (type: "in" | "out", label: string, content: string) => (
+        <div className="rounded bg-[var(--vscode-input-background)] p-2 relative group">
+            <div className="text-[11px] opacity-60 mb-1">{label}</div>
+            <pre className="text-[12px] whitespace-pre-wrap break-words">{content}</pre>
+            <button
+                onClick={() => copy(type, content)}
+                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
+                title={type === "in" ? t("ui.copyInput") : t("ui.copyOutput")}
+            >
+                {copied === type ? <CheckIcon /> : <CopyIcon />}
+            </button>
+        </div>
+    );
+
+    return (
+        <div className="space-y-2">
+            <div className="text-[12px] font-semibold">{t("ui.sampleLabel", { index: sample.index })}</div>
+            {renderBlock("in", "Input", sample.input)}
+            {renderBlock("out", "Output", sample.output)}
+        </div>
+    );
+};
+
+export { SampleBox };
diff --git a/packages/webview/src/components/StatusBadge.tsx b/packages/webview/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..34f767a
--- /dev/null
+++ b/packages/webview/src/components/StatusBadge.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { statusColor } from "../utils/status";
+
+interface StatusBadgeProps {
+    status: string;
+    className?: string;
+}
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className = "" }) => (
+    <span className={`text-[10px] px-1 rounded font-bold ${statusColor(status)} ${className}`}>
+        {status}
+    </span>
+);
+
+export { StatusBadge };
diff --git a/packages/webview/src/components/SubmissionHistory.tsx b/packages/webview/src/components/SubmissionHistory.tsx
new file mode 100644
index 0000000..6a7eeb4
--- /dev/null
+++ b/packages/webview/src/components/SubmissionHistory.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { useI18n } from "../i18n";
+import { useVSCode } from "../VSCodeProvider";
+import { StatusBadge } from "./StatusBadge";
+import { formatSubmitTime } from "../utils/format";
+import type { SubmissionRecord } from "../types";
+
+interface SubmissionRowProps {
+    record: SubmissionRecord;
+    contest: string;
+    timeFirst?: boolean;
+}
+
+const SubmissionRow: React.FC<SubmissionRowProps> = ({ record, contest, timeFirst = false }) => {
+    const { t } = useI18n();
+    const vscode = useVSCode();
+    const { id, time, task, taskScreenName, status, score } = record;
+
+    return (
+        <div className={`flex items-center gap-2 ${timeFirst ? "px-2 py-1.5" : "px-2 py-1"} text-[12px] border border-[var(--vscode-panel-border)] rounded hover:bg-[var(--vscode-list-hoverBackground)]`}>
+            {timeFirst && (
+                <span className="text-[11px] opacity-60 w-[120px] flex-shrink-0">{formatSubmitTime(time)}</span>
+            )}
+            <span className="flex-1 truncate font-medium" title={`${task} · ${taskScreenName}`}>{task}</span>
+            {!timeFirst && (
+                <span className="text-[10px] opacity-50 flex-shrink-0">{formatSubmitTime(time)}</span>
+            )}
+            <StatusBadge status={status} />
+            <span className="text-[11px] opacity-60 w-[50px] text-right">{score}</span>
+            <button
+                onClick={() => vscode.postMessage({ command: "openSubmission", contest, id })}
+                className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
+            >
+                {t("ui.details")}
+            </button>
+            <a
+                href="#"
+                onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: `https://atcoder.jp/contests/${contest}/submissions/${id}` }); }}
+                className="text-[11px] underline opacity-60 hover:opacity-100 flex-shrink-0"
+            >
+                {t("ui.view")}
+            </a>
+        </div>
+    );
+};
+
+interface SubmissionListProps {
+    contest: string;
+    records: SubmissionRecord[];
+    loading?: boolean;
+    timeFirst?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+}
+
+const SubmissionList: React.FC<SubmissionListProps> = ({
+    contest,
+    records,
+    loading = false,
+    timeFirst = false,
+    loadingText,
+    emptyText,
+}) => {
+    const { t } = useI18n();
+
+    if (loading && records.length === 0) {
+        return (
+            <div className="text-[12px] opacity-60">
+                {loadingText ?? t("ui.loadingHistory")}
+            </div>
+        );
+    }
+
+    if (records.length === 0) {
+        return <div className="text-[12px] opacity-60">{emptyText ?? t("ui.noHistory")}</div>;
+    }
+
+    return (
+        <div className="space-y-1">
+            {records.map((record) => (
+                <SubmissionRow key={record.id} record={record} contest={contest} timeFirst={timeFirst} />
+            ))}
+        </div>
+    );
+};
+
+export { SubmissionList, SubmissionRow };
diff --git a/packages/webview/src/components/SubmitPanel.tsx b/packages/webview/src/components/SubmitPanel.tsx
new file mode 100644
index 0000000..507260e
--- /dev/null
+++ b/packages/webview/src/components/SubmitPanel.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import { Button } from "@template/ui";
+import { useI18n } from "../i18n";
+import { useVSCode } from "../VSCodeProvider";
+import type { SubmitResult } from "../types";
+
+interface SubmitTaskOption {
+    value: string;
+    label: string;
+}
+
+interface SubmitLanguageOption {
+    id: string;
+    label: string;
+}
+
+interface SubmitPanelProps {
+    contest: string;
+    submitTasks: SubmitTaskOption[];
+    submitLanguages: SubmitLanguageOption[];
+    selectedTask: string;
+    selectedLanguage: string;
+    sourceCode: string;
+    isLoading: boolean;
+    submitResult: SubmitResult | null;
+    error?: { message: string; url?: string } | null;
+    onTaskChange: (value: string) => void;
+    onLanguageChange: (value: string) => void;
+    onSourceCodeChange: (value: string) => void;
+    onSubmit: () => void;
+    onFetchPage: () => void;
+}
+
+const selectClass =
+    "w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]";
+
+const SubmitPanel: React.FC<SubmitPanelProps> = ({
+    contest,
+    submitTasks,
+    submitLanguages,
+    selectedTask,
+    selectedLanguage,
+    sourceCode,
+    isLoading,
+    submitResult,
+    error,
+    onTaskChange,
+    onLanguageChange,
+    onSourceCodeChange,
+    onSubmit,
+    onFetchPage,
+}) => {
+    const { t } = useI18n();
+    const vscode = useVSCode();
+
+    if (error) {
+        return (
+            <div className="space-y-2">
+                <div className="text-[12px] p-2 rounded bg-red-500/10 text-red-500">{error.message}</div>
+                <Button
+                    onClick={() => vscode.postMessage({ command: "openBrowser", url: error.url ?? `https://atcoder.jp/contests/${contest}/submit` })}
+                    size="sm"
+                    className="h-[26px] text-[11px]"
+                >
+                    {t("ui.openSubmitPage")}
+                </Button>
+            </div>
+        );
+    }
+
+    if (submitTasks.length === 0 && submitLanguages.length === 0) {
+        return (
+            <div className="space-y-3">
+                <div className="text-[12px] opacity-60">{t("ui.clickToStart")}</div>
+                <Button onClick={onFetchPage} disabled={isLoading} size="sm" className="h-[28px] text-[12px]">
+                    {isLoading ? t("ui.fetching") : t("ui.fetchSubmitPage")}
+                </Button>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            <div className="space-y-1">
+                <div className="text-[11px] font-semibold">{t("ui.task")}</div>
+                <select value={selectedTask} onChange={(e) => onTaskChange(e.target.value)} className={selectClass}>
+                    {submitTasks.map((item) => (
+                        <option key={item.value} value={item.value}>{item.label}</option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="space-y-1">
+                <div className="text-[11px] font-semibold">{t("ui.language")}</div>
+                <select value={selectedLanguage} onChange={(e) => onLanguageChange(e.target.value)} className={selectClass}>
+                    {submitLanguages.map((item) => (
+                        <option key={item.id} value={item.id}>{item.label}</option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="space-y-1">
+                <div className="text-[11px] font-semibold">{t("ui.sourceCode")}</div>
+                <textarea
+                    value={sourceCode}
+                    onChange={(e) => onSourceCodeChange(e.target.value)}
+                    placeholder={t("ui.codePlaceholder")}
+                    rows={10}
+                    className="w-full text-[12px] p-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)] resize-vertical font-mono"
+                />
+            </div>
+
+            <div className="flex items-center gap-2">
+                <Button
+                    onClick={onSubmit}
+                    disabled={isLoading || !selectedTask || !selectedLanguage || !sourceCode.trim()}
+                    size="sm"
+                    className="h-[28px] text-[12px]"
+                >
+                    {isLoading ? t("ui.submitting") : t("ui.submit")}
+                </Button>
+                <Button onClick={onFetchPage} disabled={isLoading} size="sm" variant="secondary" className="h-[28px] text-[12px]">
+                    {t("ui.refresh")}
+                </Button>
+            </div>
+
+            {submitResult && (
+                <div className={`text-[12px] p-2 rounded ${submitResult.success ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"}`}>
+                    <div className="font-semibold mb-1">{submitResult.success ? t("ui.submitSuccessTitle") : t("ui.submitFailedTitle")}</div>
+                    <div>{submitResult.message}</div>
+                    {submitResult.url && (
+                        <div className="mt-1">
+                            <a
+                                href="#"
+                                onClick={(e) => { e.preventDefault(); vscode.postMessage({ command: "openBrowser", url: submitResult.url }); }}
+                                className="underline"
+                            >
+                                {t("ui.viewSubmissionHistory")}
+                            </a>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export { SubmitPanel };
diff --git a/packages/webview/src/components/TaskList.tsx b/packages/webview/src/components/TaskList.tsx
new file mode 100644
index 0000000..d8e7a79
--- /dev/null
+++ b/packages/webview/src/components/TaskList.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Button, Card } from "@template/ui";
+import { useI18n } from "../i18n";
+import { StatusBadge } from "./StatusBadge";
+
+interface TaskItem {
+    label: string;
+    value: string;
+    url: string;
+    status?: string;
+}
+
+interface TaskListProps {
+    tasks: TaskItem[];
+    selectedTask: string;
+    onSelect: (value: string) => void;
+}
+
+const TaskList: React.FC<TaskListProps> = ({ tasks, selectedTask, onSelect }) => {
+    const { t } = useI18n();
+
+    return (
+        <Card className="p-3 space-y-2">
+            <div className="text-[13px] font-semibold">{t("ui.taskList")}</div>
+            <div className="flex flex-wrap gap-2">
+                {tasks.map((task) => (
+                    <Button
+                        key={task.value}
+                        variant={selectedTask === task.value ? "primary" : "secondary"}
+                        size="sm"
+                        onClick={() => onSelect(task.value)}
+                        className="flex items-center gap-1"
+                    >
+                        {task.status && <StatusBadge status={task.status} />}
+                        {task.label}
+                    </Button>
+                ))}
+            </div>
+        </Card>
+    );
+};
+
+export { TaskList };
diff --git a/packages/webview/src/hooks/useTranslation.ts b/packages/webview/src/hooks/useTranslation.ts
new file mode 100644
index 0000000..6eff8f1
--- /dev/null
+++ b/packages/webview/src/hooks/useTranslation.ts
@@ -0,0 +1,64 @@
+import React from "react";
+import { useVSCode } from "../VSCodeProvider";
+import { useI18n } from "../i18n";
+import type { ContestProblem, WebviewMessage } from "../types";
+
+interface UseTranslationReturn {
+    translatedCache: Record<string, Record<string, string>>;
+    translated: Record<string, string> | null;
+    translating: boolean;
+    translationMode: "api" | "free";
+    setTranslationMode: React.Dispatch<React.SetStateAction<"api" | "free">>;
+    setTranslating: React.Dispatch<React.SetStateAction<boolean>>;
+    translate: (problem: ContestProblem | null) => void;
+    applyTranslation: (message: WebviewMessage) => void;
+    setTranslatedForTask: (task: string) => void;
+}
+
+export function useTranslation(
+    taskKeyRef: React.MutableRefObject<string>,
+    setStatus: (text: string) => void,
+): UseTranslationReturn {
+    const vscode = useVSCode();
+    const { t } = useI18n();
+    const [translatedCache, setTranslatedCache] = React.useState<Record<string, Record<string, string>>>({});
+    const [translated, setTranslated] = React.useState<Record<string, string> | null>(null);
+    const [translating, setTranslating] = React.useState(false);
+    const [translationMode, setTranslationMode] = React.useState<"api" | "free">("free");
+
+    const translate = (problem: ContestProblem | null) => {
+        if (!problem) return;
+        setTranslating(true);
+        setStatus(t("status.translating"));
+        const texts: Record<string, string> = {};
+        if (problem.statement) texts[t("text.problemStatement")] = problem.statement;
+        if (problem.constraints) texts[t("text.constraints")] = problem.constraints;
+        if (problem.inputFormat) texts[t("text.inputFormat")] = problem.inputFormat;
+        if (problem.outputFormat) texts[t("text.outputFormat")] = problem.outputFormat;
+        vscode.postMessage({ command: "translate", payload: texts, targetLang: "ZH", translationMode });
+    };
+
+    const applyTranslation = (message: WebviewMessage) => {
+        const key = taskKeyRef.current;
+        setTranslatedCache((prev) => ({ ...prev, [key]: message.translated ?? {} }));
+        setTranslated(message.translated ?? null);
+        setTranslating(false);
+        setStatus(t("status.translationDone"));
+    };
+
+    const setTranslatedForTask = (task: string) => {
+        setTranslated(translatedCache[task] ?? null);
+    };
+
+    return {
+        translatedCache,
+        translated,
+        translating,
+        translationMode,
+        setTranslationMode,
+        setTranslating,
+        translate,
+        applyTranslation,
+        setTranslatedForTask,
+    };
+}
diff --git a/packages/webview/src/hooks/useWebviewMessage.ts b/packages/webview/src/hooks/useWebviewMessage.ts
new file mode 100644
index 0000000..8933312
--- /dev/null
+++ b/packages/webview/src/hooks/useWebviewMessage.ts
@@ -0,0 +1,19 @@
+import React from "react";
+import type { WebviewMessage } from "../types";
+
+type MessageHandlers = Record<string, (message: WebviewMessage) => void>;
+
+export function useWebviewMessage(handlers: MessageHandlers): void {
+    const handlersRef = React.useRef<MessageHandlers>(handlers);
+    handlersRef.current = handlers;
+
+    React.useEffect(() => {
+        const onMessage = (event: MessageEvent) => {
+            const message = event.data as WebviewMessage;
+            if (!message?.type) return;
+            handlersRef.current[message.type]?.(message);
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, []);
+}
diff --git a/packages/webview/src/utils/format.ts b/packages/webview/src/utils/format.ts
new file mode 100644
index 0000000..4189b7b
--- /dev/null
+++ b/packages/webview/src/utils/format.ts
@@ -0,0 +1,8 @@
+export function formatSubmitTime(time: string): string {
+    const m = time.match(/(\d{2})-(\d{2}) (\d{2}:\d{2})/);
+    return m ? `${m[1]}-${m[2]} ${m[3]}` : time;
+}
+
+export function formatStart(start: string): string {
+    return start.length >= 16 ? start.slice(5, 16) : start;
+}
diff --git a/packages/webview/src/utils/status.ts b/packages/webview/src/utils/status.ts
new file mode 100644
index 0000000..9eb707f
--- /dev/null
+++ b/packages/webview/src/utils/status.ts
@@ -0,0 +1,21 @@
+export function statusColor(status: string): string {
+    switch (status) {
+        case "AC":
+            return "text-green-500 bg-green-500/10";
+        case "WA":
+            return "text-red-500 bg-red-500/10";
+        case "TLE":
+            return "text-cyan-500 bg-cyan-500/10";
+        case "MLE":
+            return "text-yellow-500 bg-yellow-500/10";
+        case "RE":
+            return "text-purple-500 bg-purple-500/10";
+        case "CE":
+            return "text-gray-400 bg-gray-400/10";
+        case "WJ":
+        case "WR":
+            return "text-yellow-500 bg-yellow-500/10";
+        default:
+            return "text-gray-400 bg-gray-400/10";
+    }
+}

From 57ad579c53b6393b0d82b749003dfcd85e8e6203 Mon Sep 17 00:00:00 2001
From: Hoshino <luogu_dnj@outlook.com>
Date: Tue, 11 Aug 2026 16:18:52 +0800
Subject: [PATCH 2/5] chore(ci.docs): update docs and ci

---
 .claude/CLAUDE.md               |   4 +-
 .github/workflows/pr-review.yml |   6 +-
 README.md                       | 103 +++++++++++++++++++-------------
 docs/Standard.md                |   4 +-
 4 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 4079ae4..73fb462 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -55,7 +55,7 @@ Entry: `packages/webview/src/index.tsx` → `WebviewApp.tsx`. Uses Tailwind CSS
 
 - 4-space indent, no `export default`, prefer `interface` over `type`
 - No `any` — use `unknown` instead
-- Functions max 120 lines (CI enforces 130 hard limit)
+- Functions max 80 lines (CI enforces 80 hard limit)
 - Import order: external deps → `@template/*` packages → relative paths
 - Component files: PascalCase. Tool/utility files: camelCase
 - Error handling: use `CfError`/`ProxyError`/`LoginRequiredError`, never bare `throw new Error()`
@@ -64,7 +64,7 @@ Entry: `packages/webview/src/index.tsx` → `WebviewApp.tsx`. Uses Tailwind CSS
 
 ## CI
 
-PR to `main` triggers: lint → build → test → function length check (>130 lines fails). Results posted as PR comment.
+PR to `main` triggers: lint → build → test → function length check (>80 lines fails). Results posted as PR comment.
 
 ## Git Branch Rules (Claude MUST follow)
 
diff --git a/.github/workflows/pr-review.yml b/.github/workflows/pr-review.yml
index e9e2802..5d16866 100644
--- a/.github/workflows/pr-review.yml
+++ b/.github/workflows/pr-review.yml
@@ -60,7 +60,7 @@ jobs:
                   if(m){
                     if(start>=0){
                       var cnt=i-start;
-                      if(cnt>130)console.log(name+' in $file ('+cnt+' lines, line '+(start+1)+')');
+                      if(cnt>80)console.log(name+' in $file ('+cnt+' lines, line '+(start+1)+')');
                     }
                     start=i;name=m[3];
                   }
@@ -90,7 +90,7 @@ jobs:
           if [ "$BUILD" = "success" ]; then echo "| \`pnpm build\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm build\` | :x: |" >> comment.md; fi
           if [ "$LINT" = "success" ]; then echo "| \`pnpm lint\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm lint\` | :x: |" >> comment.md; fi
           if [ "$TEST" = "success" ]; then echo "| \`pnpm test\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm test\` | :x: |" >> comment.md; fi
-          if [ "$LL" = "true" ]; then echo "| 函数 <= 130 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 <= 130 行 | :x: |" >> comment.md; fi
+          if [ "$LL" = "true" ]; then echo "| 函数 <= 80 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 <= 80 行 | :x: |" >> comment.md; fi
 
           echo "" >> comment.md
           echo "### 未通过的检查" >> comment.md
@@ -100,7 +100,7 @@ jobs:
           if [ "$BUILD" != "success" ]; then echo "- [ ] \`pnpm build\`" >> comment.md; any_fail=true; fi
           if [ "$LINT" != "success" ]; then echo "- [ ] \`pnpm lint\`" >> comment.md; any_fail=true; fi
           if [ "$TEST" != "success" ]; then echo "- [ ] \`pnpm test\`" >> comment.md; any_fail=true; fi
-          if [ "$LL" != "true" ]; then echo "- [ ] 函数长度不超过 130 行" >> comment.md; any_fail=true; fi
+          if [ "$LL" != "true" ]; then echo "- [ ] 函数长度不超过 80 行" >> comment.md; any_fail=true; fi
 
           if [ "$any_fail" = false ]; then echo "全部通过，无需修改。" >> comment.md; fi
 
diff --git a/README.md b/README.md
index d2d69fe..c18f8cf 100644
--- a/README.md
+++ b/README.md
@@ -14,18 +14,23 @@
 
 <!-- toc -->
 
-[特性](#特性) • [项目结构](#项目结构) • [快速开始](#快速开始) • [开发指南](#开发指南) • [常见问题](#常见问题) • [许可证](#许可证)
+[特性](#特性) • [项目结构](#项目结构) • [快速开始](#快速开始) • [开发指南](#开发指南) • [发布](#发布) • [常见问题](#常见问题) • [许可证](#许可证)
 
 <!-- tocstop -->
 
-VS Code 插件，支持浏览 AtCoder 竞赛题目、LaTeX 数学公式渲染、DeepL 翻译、评级/非评级报名。
+VS Code 插件，支持浏览 AtCoder 竞赛题目、LaTeX 数学公式渲染、DeepL 翻译、提交代码与判题跟踪、评级/非评级报名、榜单与提交详情查看。
 
 ## 特性
 
-- 📋 **题目浏览** — 输入比赛代号，一键加载所有题目列表
+- 📋 **题目浏览** — 输入比赛代号，一键加载所有题目列表与题面
 - 📐 **LaTeX 渲染** — 服务端 KaTeX 预渲染，WebView 直接展示
-- 🌐 **DeepL 翻译** — 选中题面段落，自动翻译为中文
-- 📝 **报名比赛** — 支持评级（Rated）/ 非评级报名
+- 🌐 **DeepL 翻译** — 题面段落自动翻译为中文（免费接口 / 官方 API 双模式）
+- 📝 **报名比赛** — 支持评级（Rated）/ 非评级报名，自动处理 CSRF 与多步骤表单
+- 📤 **提交代码** — 内置提交面板，提交后自动轮询判题状态
+- 🧾 **提交历史 & 详情** — 查看个人提交列表、代码、逐测试点判定（Judge Result）
+- 🏆 **实时榜单** — 读取 Standings JSON，查看排名与得分
+- 🏠 **首页比赛列表** — 侧边栏展示进行中 / 即将开始 / 最近 / 每日比赛
+- 🔗 **CPH 导出** — 一键导入 Competitive Programming Helper
 - 🔑 **Cookie 登录** — 安全存储 REVEL_SESSION，自动注入请求
 - 🎨 **主题适配** — WebView 自动跟随 VS Code 主题
 
@@ -34,39 +39,50 @@ VS Code 插件，支持浏览 AtCoder 竞赛题目、LaTeX 数学公式渲染、
 ```
 .
 ├── apps/
-│   └── vscode-extension/         # 插件主程序
+│   └── vscode-extension/         # 插件主程序（webpack 打包）
 │       ├── src/
-│       │   ├── extension.ts            # 插件入口，消息路由，handler
+│       │   ├── extension.ts            # 插件入口，激活 & 面板创建
+│       │   ├── viewProvider.ts         # 侧边栏 WebviewView Provider
 │       │   ├── atcoder.ts              # AtCoder 爬虫 & 题面解析
-│       │   ├── tools/
-│       │   │   ├── fetch.ts            # HTTP 客户端，CF/Proxy/Login 错误类
-│       │   │   ├── submit.ts           # 提交代码（fetchSubmitPage / submitCode）
-│       │   │   ├── command.ts          # 消息分发路由
-│       │   │   ├── types.ts            # IncomingMessage / SubStatus
-│       │   │   ├── deepl.ts            # DeepL 翻译
-│       │   │   ├── copy.ts             # Markdown 复制
-│       │   │   └── SignUpContest.ts    # 报名逻辑
-│       │   ├── atcoder.test.ts         # 单元测试
-│       ├── webpack.config.js           # Webpack 构建
-│       ├── package.json                # 扩展清单
-│       ├── img.png                     # 扩展图标
-│       └── LICENSE.txt                 # MIT 许可证
+│       │   ├── atcoder.test.ts         # 单元测试（mocha）
+│       │   └── tools/
+│       │       ├── command.ts          # 消息分发路由
+│       │       ├── handle.ts           # 各命令 handler
+│       │       ├── fetch.ts            # HTTP 客户端（代理绕过 / CF 挑战 / 登录检测）
+│       │       ├── webview.ts          # WebView HTML 模板与全局变量注入
+│       │       ├── submit.ts           # 提交代码（fetchSubmitPage / submitCode）
+│       │       ├── submission.ts       # 提交详情 & Judge Result 解析
+│       │       ├── SignUpContest.ts    # 报名逻辑（Rated / 非 Rated）
+│       │       ├── standings.ts        # 榜单 JSON 拉取
+│       │       ├── homepage.ts         # 首页比赛列表解析
+│       │       ├── deepl.ts            # DeepL 翻译（免费 / API）
+│       │       ├── cph.ts              # CPH 问题构建与导出
+│       │       ├── copy.ts             # Markdown 复制
+│       │       ├── types.ts            # IncomingMessage / 提交记录类型
+│       │       └── i18n/               # zh / en 文案
+│       ├── webpack.config.js           # 构建 extension.js 与 webview.js
+│       ├── package.json                # 扩展清单（atc-helper v1.1.2）
+│       └── img.png                     # 扩展图标
 │
 ├── packages/
-│   ├── core/                   # @template/core — 核心工具
-│   ├── ui/                     # @template/ui — React 组件库
-│   └── webview/                # @template/webview — WebView 前端
+│   ├── core/                   # @template/core — MessageBus / StateManager
+│   ├── ui/                     # @template/ui — React 组件库（Button/Card/Input/Spinner）
+│   └── webview/                # @template/webview — WebView 前端（React + Tailwind + KaTeX）
 │       └── src/
-│           ├── WebviewApp.tsx          # 主应用（题目/提交/状态/复制）
+│           ├── index.tsx               # 入口，按 mode 分发四种应用
+│           ├── WebviewApp.tsx          # 编辑器主视图
+│           ├── SidebarApp.tsx          # 侧边栏（比赛列表 / 提交历史 / 登录）
+│           ├── ContestApp.tsx          # 单场比赛面板（Info/Task/Submit/Rating）
+│           ├── SubmissionDetailApp.tsx # 提交详情页
 │           ├── VSCodeProvider.tsx      # VS Code API 上下文
-│           ├── types.ts                # WebviewMessage / SubmitResult
-│           ├── components/
-│           │   └── HtmlContent.tsx     # HTML 渲染 & 翻译块
+│           ├── types.ts                # WebviewMessage / SubmissionDetail
+│           ├── hooks/                  # useWebviewMessage / useTranslation
+│           ├── components/             # ProblemView / HtmlContent / SubmitPanel 等
+│           ├── utils/                  # format / status 工具
+│           ├── i18n/                   # zh / en
 │           └── styles.css              # Tailwind + KaTeX
 │
 ├── docs/
-│   ├── images/
-│   │   └── img.png              # 扩展图标源文件
 │   └── Standard.md              # 编码规范
 │
 ├── .github/workflows/
@@ -83,8 +99,8 @@ VS Code 插件，支持浏览 AtCoder 竞赛题目、LaTeX 数学公式渲染、
 
 | 目录 | 职责 |
 |------|------|
-| `apps/vscode-extension` | 扩展入口、消息路由、AtCoder 通信、提交、报名 |
-| `packages/core` | 核心业务逻辑 |
+| `apps/vscode-extension` | 插件入口、消息路由、AtCoder 爬虫、HTTP 工具、提交与报名 |
+| `packages/core` | 核心业务逻辑（MessageBus, StateManager） |
 | `packages/ui` | React 组件库（Button, Card, Input, Spinner） |
 | `packages/webview` | WebView 前端应用（React + Tailwind + KaTeX） |
 | `docs/Standard.md` | 编码规范 |
@@ -100,15 +116,15 @@ pnpm install
 ### 开发
 
 ```bash
-# 启动监听模式（自动编译）
+# 启动监听模式（自动编译扩展与 WebView）
 pnpm dev
 ```
 
 ### 调试
 
 1. VS Code 中按 `F5`（已预配置 launch.json）
-2. 新窗口中 `Ctrl+Shift+P` → `Show WebView`
-3. 输入比赛代号（如 `abc345`）→ 加载题目 → 浏览/翻译/报名
+2. 侧边栏点击 AtCoder Helper 图标打开比赛列表，或 `Ctrl+Shift+P` → `AtCoder Helper (Editor)`
+3. 输入比赛代号（如 `abc345`）→ 加载题目 → 浏览 / 翻译 / 报名 / 提交
 
 ### 设置 Cookie（用于报名 & 登录后题目）
 
@@ -116,20 +132,20 @@ pnpm dev
 2. F12 → Application → Cookies → 复制 `REVEL_SESSION` 的 Value
 3. VS Code 中 `Ctrl+Shift+P` → `Set AtCoder Login Cookie`（或在侧边栏底部登录区域粘贴保存）
 
-### 设置 DeepL API Key（用于翻译）
+### 设置 DeepL API Key（用于官方 API 翻译模式）
 
-`Ctrl+Shift+P` → `Set DeepL API Key`
+`Ctrl+Shift+P` → `Set DeepL API Key`（免费模式无需配置）
 
 ## 开发指南
 
 ### 脚本
 
 ```bash
-pnpm build          # 编译所有包
-pnpm dev            # 开发监听模式
-pnpm lint           # ESLint 检查
+pnpm build          # 编译所有包（turbo build）
+pnpm dev            # 开发监听模式（turbo dev）
+pnpm lint           # ESLint 检查（turbo lint）
 pnpm format         # Prettier 格式化
-pnpm test:unit      # 运行单元测试（apps/vscode-extension）
+pnpm test           # 运行单元测试（turbo test，apps/vscode-extension）
 pnpm clean          # 清理构建产物
 ```
 
@@ -154,9 +170,9 @@ pnpm package
 
 **WebView 不显示？**
 - 确保已运行 `pnpm build`
-- 检查 `dist/webview.js` 是否存在
+- 检查 `dist/extension.js` 与 `dist/webview.js` 是否存在
 
-**报名失败？**
+**报名 / 提交失败？**
 - 确认已设置 AtCoder Cookie
 - Cookie 可能过期，重新登录获取
 
@@ -164,6 +180,9 @@ pnpm package
 - KaTeX 在扩展端预渲染，WebView 只需 CSS
 - 检查控制台是否有字体加载错误
 
+**Cloudflare 挑战？**
+- 扩展会提示在浏览器中打开对应页面完成人机验证后重试
+
 ## 许可证
 
 MIT
diff --git a/docs/Standard.md b/docs/Standard.md
index d303294..2f54938 100644
--- a/docs/Standard.md
+++ b/docs/Standard.md
@@ -35,7 +35,7 @@ vscode-boilerplate/
 
 ### 函数
 
-- **一个函数最多 120 行**，超过需拆分（可适当超出 10-20 行）
+- **一个函数最多 80 行**，超过需拆分
 - 每个函数只做一件事
 - 超过 40 行时应考虑是否需要拆分
 
@@ -91,6 +91,6 @@ PR 合并到 `main` 前需满足：
 - [ ] `pnpm lint` 通过
 - [ ] `pnpm test` 通过
 - [ ] 无新引入的 `any` 类型
-- [ ] 所有函数 ≤ 120 行
+- [ ] 所有函数 ≤ 80 行
 - [ ] 文件名符合命名规范
 - [ ] 新增消息类型已同步更新 `types.ts` 和 `extension.ts`

From f4386bd814fc6e9b2a0106f5f7be1b31346a37c1 Mon Sep 17 00:00:00 2001
From: Hoshino <luogu_dnj@outlook.com>
Date: Tue, 11 Aug 2026 16:31:17 +0800
Subject: [PATCH 3/5] fix(ci): fix ci

---
 .github/workflows/pr-review.yml          | 105 ++++++++++++++++++-----
 .gitignore                               |   1 +
 apps/vscode-extension/package.json       |   1 +
 apps/vscode-extension/tsconfig.test.json |  15 ++++
 4 files changed, 102 insertions(+), 20 deletions(-)
 create mode 100644 apps/vscode-extension/tsconfig.test.json

diff --git a/.github/workflows/pr-review.yml b/.github/workflows/pr-review.yml
index 5d16866..83d7da9 100644
--- a/.github/workflows/pr-review.yml
+++ b/.github/workflows/pr-review.yml
@@ -8,10 +8,11 @@ on:
 permissions:
   contents: read
   pull-requests: write
+  actions: write
 
 jobs:
-  review:
-    name: Code Review
+  check:
+    name: Code Checks
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
@@ -72,14 +73,51 @@ jobs:
           echo "$overages" | tee linelength_output.txt
           if [ -z "$overages" ]; then echo "passed=true" >> $GITHUB_OUTPUT; else echo "passed=false" >> $GITHUB_OUTPUT; fi
 
-      - env:
-          GH_TOKEN: ${{ github.token }}
-          BUILD: ${{ steps.build.outcome }}
-          LINT: ${{ steps.lint.outcome }}
-          TEST: ${{ steps.test.outcome }}
-          LL: ${{ steps.linelength.outputs.passed }}
+      - name: Collect results & logs
         shell: bash
         run: |
+          mkdir -p artifact/logs
+          {
+            echo "lint=${{ steps.lint.outcome }}"
+            echo "build=${{ steps.build.outcome }}"
+            echo "test=${{ steps.test.outcome }}"
+            echo "ll=${{ steps.linelength.outputs.passed }}"
+          } > artifact/results.txt
+          for f in lint build test linelength; do
+            if [ -f "${f}_output.txt" ]; then tail -n 40 "${f}_output.txt" > "artifact/logs/${f}_output.txt"; fi
+          done
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: check-results
+          path: artifact/
+          retention-days: 1
+
+      - name: Fail if any check failed
+        if: >-
+          steps.lint.outcome == 'failure' ||
+          steps.build.outcome == 'failure' ||
+          steps.test.outcome == 'failure' ||
+          steps.linelength.outputs.passed != 'true'
+        run: exit 1
+
+  report:
+    name: Post PR Report
+    needs: check
+    if: always()
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: check-results
+          path: ./results
+
+      - name: Build report
+        shell: bash
+        run: |
+          . ./results/results.txt
+
           echo "## PR 审查报告" > comment.md
           echo "" >> comment.md
           echo "### 检查结果" >> comment.md
@@ -87,28 +125,55 @@ jobs:
           echo "| 检查项 | 状态 |" >> comment.md
           echo "|--------|------|" >> comment.md
 
-          if [ "$BUILD" = "success" ]; then echo "| \`pnpm build\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm build\` | :x: |" >> comment.md; fi
-          if [ "$LINT" = "success" ]; then echo "| \`pnpm lint\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm lint\` | :x: |" >> comment.md; fi
-          if [ "$TEST" = "success" ]; then echo "| \`pnpm test\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm test\` | :x: |" >> comment.md; fi
-          if [ "$LL" = "true" ]; then echo "| 函数 <= 80 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 <= 80 行 | :x: |" >> comment.md; fi
+          if [ "$lint" = "success" ]; then echo "| \`pnpm lint\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm lint\` | :x: |" >> comment.md; fi
+          if [ "$build" = "success" ]; then echo "| \`pnpm build\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm build\` | :x: |" >> comment.md; fi
+          if [ "$test" = "success" ]; then echo "| \`pnpm test:unit\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm test:unit\` | :x: |" >> comment.md; fi
+          if [ "$ll" = "true" ]; then echo "| 函数 <= 80 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 <= 80 行 | :x: |" >> comment.md; fi
 
           echo "" >> comment.md
           echo "### 未通过的检查" >> comment.md
           echo "" >> comment.md
 
           any_fail=false
-          if [ "$BUILD" != "success" ]; then echo "- [ ] \`pnpm build\`" >> comment.md; any_fail=true; fi
-          if [ "$LINT" != "success" ]; then echo "- [ ] \`pnpm lint\`" >> comment.md; any_fail=true; fi
-          if [ "$TEST" != "success" ]; then echo "- [ ] \`pnpm test\`" >> comment.md; any_fail=true; fi
-          if [ "$LL" != "true" ]; then echo "- [ ] 函数长度不超过 80 行" >> comment.md; any_fail=true; fi
-
-          if [ "$any_fail" = false ]; then echo "全部通过，无需修改。" >> comment.md; fi
+          if [ "$lint" != "success" ]; then echo "- [ ] \`pnpm lint\`" >> comment.md; any_fail=true; fi
+          if [ "$build" != "success" ]; then echo "- [ ] \`pnpm build\`" >> comment.md; any_fail=true; fi
+          if [ "$test" != "success" ]; then echo "- [ ] \`pnpm test:unit\`" >> comment.md; any_fail=true; fi
+          if [ "$ll" != "true" ]; then echo "- [ ] 函数长度不超过 80 行" >> comment.md; any_fail=true; fi
+
+          if [ "$any_fail" = false ]; then
+            echo "全部通过，无需修改。" >> comment.md
+          else
+            echo "" >> comment.md
+            echo "### 失败详情" >> comment.md
+            echo "" >> comment.md
+
+            append_log() {
+              local label="$1" logfile="$2"
+              if [ -f "$logfile" ] && [ -s "$logfile" ]; then
+                echo "<details><summary>$label（最后 40 行）</summary>" >> comment.md
+                echo "" >> comment.md
+                echo '```' >> comment.md
+                cat "$logfile" >> comment.md
+                echo '```' >> comment.md
+                echo "</details>" >> comment.md
+                echo "" >> comment.md
+              fi
+            }
+
+            [ "$lint" != "success" ] && append_log "\`pnpm lint\`" "results/logs/lint_output.txt"
+            [ "$build" != "success" ] && append_log "\`pnpm build\`" "results/logs/build_output.txt"
+            [ "$test" != "success" ] && append_log "\`pnpm test:unit\`" "results/logs/test_output.txt"
+            [ "$ll" != "true" ] && append_log "函数长度 <= 80 行" "results/logs/linelength_output.txt"
+          fi
 
           echo "" >> comment.md
           echo "---" >> comment.md
           echo "" >> comment.md
           echo "*自动生成 by PR Review workflow*" >> comment.md
 
+      - name: Post comment
+        env:
+          GH_TOKEN: ${{ github.token }}
+        shell: bash
+        run: |
           gh pr comment ${{ github.event.pull_request.number }} --body "$(cat comment.md)"
-
-          if [ "$any_fail" = true ]; then exit 1; fi
diff --git a/.gitignore b/.gitignore
index f0b5554..a164e56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .turbo/
 temp/
 out/
+out-test/
 src-tauri/target
 **/.env
 **/.pnpm-store
diff --git a/apps/vscode-extension/package.json b/apps/vscode-extension/package.json
index cb51b0d..b2323b3 100644
--- a/apps/vscode-extension/package.json
+++ b/apps/vscode-extension/package.json
@@ -60,6 +60,7 @@
     "watch": "webpack --mode development --watch --progress",
     "dev": "webpack --mode development --watch --progress",
     "test": "node ./out/test/runTest.js",
+    "test:unit": "tsc -p tsconfig.test.json && node out-test/atcoder.test.js",
     "lint": "eslint src --ext ts",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf out",
     "package": "vsce package --no-dependencies --allow-missing-repository --out ../../release/extension.vsix"
diff --git a/apps/vscode-extension/tsconfig.test.json b/apps/vscode-extension/tsconfig.test.json
new file mode 100644
index 0000000..aba0717
--- /dev/null
+++ b/apps/vscode-extension/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2020",
+    "outDir": "out-test",
+    "rootDir": "src",
+    "lib": ["ES2020"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.test.ts"]
+}

From 521ae04561e4d8e1653320cf685681f0f60dbeda Mon Sep 17 00:00:00 2001
From: Hoshino <luogu_dnj@outlook.com>
Date: Tue, 11 Aug 2026 16:34:02 +0800
Subject: [PATCH 4/5] fix(ci): fix ci error

---
 .github/workflows/pr-review.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pr-review.yml b/.github/workflows/pr-review.yml
index 83d7da9..bc1d33a 100644
--- a/.github/workflows/pr-review.yml
+++ b/.github/workflows/pr-review.yml
@@ -174,6 +174,7 @@ jobs:
       - name: Post comment
         env:
           GH_TOKEN: ${{ github.token }}
+          GH_REPO: ${{ github.repository }}
         shell: bash
         run: |
           gh pr comment ${{ github.event.pull_request.number }} --body "$(cat comment.md)"

From 41f8dc168beae5d39bcc906e9c0208f0a286f6e4 Mon Sep 17 00:00:00 2001
From: Hoshino <luogu_dnj@outlook.com>
Date: Tue, 11 Aug 2026 17:29:45 +0800
Subject: [PATCH 5/5] fix{ci,core}: fix ci and fetch

---
 .github/workflows/pr-review.yml          |  48 ++---
 README.md                                |   7 +-
 apps/vscode-extension/README.md          |   2 +-
 apps/vscode-extension/src/tools/fetch.ts | 214 ++++++++++++++---------
 scripts/check-functions.mjs              | 100 +++++++++++
 5 files changed, 249 insertions(+), 122 deletions(-)
 create mode 100644 scripts/check-functions.mjs

diff --git a/.github/workflows/pr-review.yml b/.github/workflows/pr-review.yml
index bc1d33a..bb44e0e 100644
--- a/.github/workflows/pr-review.yml
+++ b/.github/workflows/pr-review.yml
@@ -49,29 +49,10 @@ jobs:
         continue-on-error: true
         shell: bash
         run: |
-          overages=""
-          while IFS= read -r file; do
-            if [ -f "$file" ]; then
-              results=$(node -e "
-                var fs=require('fs');
-                var lines=fs.readFileSync('$file','utf-8').split('\n');
-                var start=-1,name='';
-                for(var i=0;i<lines.length;i++){
-                  var m=lines[i].match(/^\s*(export\s+)?(async\s+)?function\s+(\w+)/);
-                  if(m){
-                    if(start>=0){
-                      var cnt=i-start;
-                      if(cnt>80)console.log(name+' in $file ('+cnt+' lines, line '+(start+1)+')');
-                    }
-                    start=i;name=m[3];
-                  }
-                }
-              ")
-              if [ -n "$results" ]; then overages="$overages"$'\n'"$results"; fi
-            fi
-          done < <(find apps packages -name "*.ts" -o -name "*.tsx")
-          echo "$overages" | tee linelength_output.txt
-          if [ -z "$overages" ]; then echo "passed=true" >> $GITHUB_OUTPUT; else echo "passed=false" >> $GITHUB_OUTPUT; fi
+          set -o pipefail
+          node scripts/check-functions.mjs 2>&1 | tee linelength_output.txt
+          status=$?
+          if [ "$status" -eq 0 ]; then echo "passed=true" >> $GITHUB_OUTPUT; else echo "passed=false" >> $GITHUB_OUTPUT; fi
 
       - name: Collect results & logs
         shell: bash
@@ -83,9 +64,10 @@ jobs:
             echo "test=${{ steps.test.outcome }}"
             echo "ll=${{ steps.linelength.outputs.passed }}"
           } > artifact/results.txt
-          for f in lint build test linelength; do
+          for f in lint build test; do
             if [ -f "${f}_output.txt" ]; then tail -n 40 "${f}_output.txt" > "artifact/logs/${f}_output.txt"; fi
           done
+          if [ -f linelength_output.txt ]; then cp linelength_output.txt artifact/logs/linelength_output.txt; fi
 
       - uses: actions/upload-artifact@v4
         with:
@@ -128,7 +110,7 @@ jobs:
           if [ "$lint" = "success" ]; then echo "| \`pnpm lint\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm lint\` | :x: |" >> comment.md; fi
           if [ "$build" = "success" ]; then echo "| \`pnpm build\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm build\` | :x: |" >> comment.md; fi
           if [ "$test" = "success" ]; then echo "| \`pnpm test:unit\` | :white_check_mark: |" >> comment.md; else echo "| \`pnpm test:unit\` | :x: |" >> comment.md; fi
-          if [ "$ll" = "true" ]; then echo "| 函数 <= 80 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 <= 80 行 | :x: |" >> comment.md; fi
+          if [ "$ll" = "true" ]; then echo "| 函数 ≤ 80 行 / tsx ≤ 600 行 | :white_check_mark: |" >> comment.md; else echo "| 函数 ≤ 80 行 / tsx ≤ 600 行 | :x: |" >> comment.md; fi
 
           echo "" >> comment.md
           echo "### 未通过的检查" >> comment.md
@@ -138,7 +120,7 @@ jobs:
           if [ "$lint" != "success" ]; then echo "- [ ] \`pnpm lint\`" >> comment.md; any_fail=true; fi
           if [ "$build" != "success" ]; then echo "- [ ] \`pnpm build\`" >> comment.md; any_fail=true; fi
           if [ "$test" != "success" ]; then echo "- [ ] \`pnpm test:unit\`" >> comment.md; any_fail=true; fi
-          if [ "$ll" != "true" ]; then echo "- [ ] 函数长度不超过 80 行" >> comment.md; any_fail=true; fi
+          if [ "$ll" != "true" ]; then echo "- [ ] 函数 > 80 行 或 tsx 文件 > 600 行" >> comment.md; any_fail=true; fi
 
           if [ "$any_fail" = false ]; then
             echo "全部通过，无需修改。" >> comment.md
@@ -148,22 +130,22 @@ jobs:
             echo "" >> comment.md
 
             append_log() {
-              local label="$1" logfile="$2"
+              local label="$1" logfile="$2" full="$3"
               if [ -f "$logfile" ] && [ -s "$logfile" ]; then
-                echo "<details><summary>$label（最后 40 行）</summary>" >> comment.md
+                echo "<details><summary>$label</summary>" >> comment.md
                 echo "" >> comment.md
                 echo '```' >> comment.md
-                cat "$logfile" >> comment.md
+                if [ "$full" = "true" ]; then cat "$logfile" >> comment.md; else tail -n 40 "$logfile" >> comment.md; fi
                 echo '```' >> comment.md
                 echo "</details>" >> comment.md
                 echo "" >> comment.md
               fi
             }
 
-            [ "$lint" != "success" ] && append_log "\`pnpm lint\`" "results/logs/lint_output.txt"
-            [ "$build" != "success" ] && append_log "\`pnpm build\`" "results/logs/build_output.txt"
-            [ "$test" != "success" ] && append_log "\`pnpm test:unit\`" "results/logs/test_output.txt"
-            [ "$ll" != "true" ] && append_log "函数长度 <= 80 行" "results/logs/linelength_output.txt"
+            [ "$lint" != "success" ] && append_log "\`pnpm lint\`" "results/logs/lint_output.txt" "false"
+            [ "$build" != "success" ] && append_log "\`pnpm build\`" "results/logs/build_output.txt" "false"
+            [ "$test" != "success" ] && append_log "\`pnpm test:unit\`" "results/logs/test_output.txt" "false"
+            [ "$ll" != "true" ] && append_log "行数限制（超限清单）" "results/logs/linelength_output.txt" "true"
           fi
 
           echo "" >> comment.md
diff --git a/README.md b/README.md
index c18f8cf..2b07b62 100644
--- a/README.md
+++ b/README.md
@@ -85,8 +85,11 @@ VS Code 插件，支持浏览 AtCoder 竞赛题目、LaTeX 数学公式渲染、
 ├── docs/
 │   └── Standard.md              # 编码规范
 │
+├── scripts/
+│   └── check-functions.mjs      # 行数检查（ts 函数 ≤80 行 / tsx 文件 ≤600 行）
+│
 ├── .github/workflows/
-│   └── pr-review.yml            # PR CI：lint + build + test
+│   └── pr-review.yml            # PR CI：lint + build + test + 行数检查
 │
 ├── release/
 │   └── extension.vsix           # 打包输出
@@ -155,7 +158,7 @@ pnpm clean          # 清理构建产物
 
 - 文件名：组件 PascalCase，工具 camelCase
 - TypeScript：优先 `interface`，避免 `any`
-- 函数不超过 **120 行**（可适当放宽至 130）
+- ts 函数不超过 **80 行**；tsx 文件不超过 **600 行**（CI 用 `scripts/check-functions.mjs` 检查）
 - 导入顺序：外部 → 内部包 → 相对路径
 
 ## 发布
diff --git a/apps/vscode-extension/README.md b/apps/vscode-extension/README.md
index 1f6c355..062ac41 100644
--- a/apps/vscode-extension/README.md
+++ b/apps/vscode-extension/README.md
@@ -122,7 +122,7 @@ pnpm clean          # 清理构建产物
 
 - 文件名：组件 PascalCase，工具 camelCase
 - TypeScript：优先 `interface`，避免 `any`
-- 函数不超过 **120 行**（可适当放宽至 130）
+- ts 函数不超过 **80 行**；tsx 文件不超过 **600 行**
 - 导入顺序：外部 → 内部包 → 相对路径
 
 ## 发布
diff --git a/apps/vscode-extension/src/tools/fetch.ts b/apps/vscode-extension/src/tools/fetch.ts
index db9a9df..7b76310 100644
--- a/apps/vscode-extension/src/tools/fetch.ts
+++ b/apps/vscode-extension/src/tools/fetch.ts
@@ -209,109 +209,151 @@ function isContestStarted(contest: string): Promise<boolean | null> {
 		.catch(() => null);
 }
 
-function handleResponse(
+function handleRedirect(
 	url: string,
 	res: http.IncomingMessage,
 	restoreSaved: Record<string, string | undefined>,
 	resolve: (value: string | PromiseLike<string>) => void,
 	reject: (reason: unknown) => void,
 	redirectFetcher: (url: string) => Promise<string>,
-	logPrefix: string = "[fetchText]",
-) {
-	console.log(`${logPrefix} 收到响应:`, url, `status=${res.statusCode}`);
-
-	if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-		const redirectUrl = new URL(res.headers.location, url).href;
-		console.log(`${logPrefix} 重定向:`, res.statusCode, `->`, redirectUrl);
-		restoreProxyEnv(restoreSaved);
-		if (redirectUrl.includes("/login")) {
-			console.log(`${logPrefix} 检测到登录重定向`);
-			reject(new LoginRequiredError(redirectUrl));
-			return;
-		}
+	logPrefix: string,
+): boolean {
+	if (!res.statusCode || res.statusCode < 300 || res.statusCode >= 400 || !res.headers.location) {
+		return false;
+	}
+	const redirectUrl = new URL(res.headers.location, url).href;
+	console.log(`${logPrefix} 重定向:`, res.statusCode, `->`, redirectUrl);
+	restoreProxyEnv(restoreSaved);
+	if (redirectUrl.includes("/login")) {
+		console.log(`${logPrefix} 检测到登录重定向`);
+		reject(new LoginRequiredError(redirectUrl));
+	} else {
 		resolve(redirectFetcher(redirectUrl));
-		return;
 	}
+	return true;
+}
 
+function pipeDecompress(res: http.IncomingMessage): stream.Readable {
 	const encoding = res.headers["content-encoding"] || "";
-	let readableStream: stream.Readable = res;
-	if (encoding.includes("br")) {
-		readableStream = res.pipe(zlib.createBrotliDecompress());
-	} else if (encoding.includes("gzip")) {
-		readableStream = res.pipe(zlib.createGunzip());
-	} else if (encoding.includes("deflate")) {
-		readableStream = res.pipe(zlib.createInflate());
-	}
+	if (encoding.includes("br")) return res.pipe(zlib.createBrotliDecompress());
+	if (encoding.includes("gzip")) return res.pipe(zlib.createGunzip());
+	if (encoding.includes("deflate")) return res.pipe(zlib.createInflate());
+	return res;
+}
 
-	const chunks: Buffer[] = [];
-	readableStream.on("data", (chunk: Buffer) => {
-		chunks.push(chunk);
+function readBody(readable: stream.Readable): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const chunks: Buffer[] = [];
+		readable.on("data", (chunk: Buffer) => {
+			chunks.push(chunk);
+		});
+		readable.on("end", () => {
+			resolve(Buffer.concat(chunks).toString("utf8"));
+		});
+		readable.on("error", reject);
 	});
-	readableStream.on("end", () => {
-		const body = Buffer.concat(chunks).toString("utf8");
-		console.log(`${logPrefix} 响应体:`, url, `status=${res.statusCode}`, `body.length=${body.length}`);
+}
 
-		restoreProxyEnv(restoreSaved);
+function handleNon200(
+	url: string,
+	statusCode: number | undefined,
+	reject: (reason: unknown) => void,
+	logPrefix: string,
+): void {
+	if (statusCode !== 404) {
+		console.log(`${logPrefix} 非 200 状态码:`, statusCode);
+		reject(new Error(t("err.httpStatus", { status: statusCode })));
+		return;
+	}
+	if (!sessionCookie) {
+		console.log(`${logPrefix} 404 且无 Cookie，需要登录`);
+		reject(new Error(t("err.http404NoCookie")));
+		return;
+	}
+	const rejectCookieInvalid = () => {
+		console.log(`${logPrefix} 404 但有 Cookie，可能 Cookie 无效`);
+		reject(new Error(t("err.http404BadCookie")));
+	};
+	const contest = extractContestFromUrl(url);
+	if (!contest) {
+		rejectCookieInvalid();
+		return;
+	}
+	void isContestStarted(contest).then((started) => {
+		if (started === false) {
+			console.log(`${logPrefix} 404 且比赛未开始，题目未公开: ${url}`);
+			reject(new Error(t("err.http404NotStarted", { contest })));
+		} else {
+			rejectCookieInvalid();
+		}
+	});
+}
 
-		if (isCfChallenge(body)) {
-			console.log(`${logPrefix} 检测到 Cloudflare 挑战`);
+function handleBody(
+	url: string,
+	res: http.IncomingMessage,
+	body: string,
+	resolve: (value: string | PromiseLike<string>) => void,
+	reject: (reason: unknown) => void,
+	logPrefix: string,
+): void {
+	if (isCfChallenge(body)) {
+		console.log(`${logPrefix} 检测到 Cloudflare 挑战`);
+		reject(new CfError(url));
+		return;
+	}
+	if (res.statusCode === 403) {
+		const broad = ["Cloudflare", "challenge", "attention required"].some((p) => body.toLowerCase().includes(p));
+		if (broad) {
+			console.log(`${logPrefix} 403 + 泛化 CF 特征，判定为 Cloudflare 挑战`);
 			reject(new CfError(url));
-			return;
-		}
-		if (res.statusCode === 403) {
-			const broad = ["Cloudflare", "challenge", "attention required"].some((p) => body.toLowerCase().includes(p));
-			if (broad) {
-				console.log(`${logPrefix} 403 + 泛化 CF 特征，判定为 Cloudflare 挑战`);
-				reject(new CfError(url));
-			} else {
-				console.log(`${logPrefix} 403 但非 CF，可能 Cookie 无效`);
-				reject(new Error(t("err.http403")));
-			}
-			return;
-		}
-		if (isLoginPage(body)) {
-			console.log(`${logPrefix} 检测到登录页面`);
-			reject(new LoginRequiredError(url));
-			return;
-		}
-		if (res.statusCode !== 200) {
-			if (res.statusCode === 404) {
-				if (!sessionCookie) {
-					console.log(`${logPrefix} 404 且无 Cookie，需要登录`);
-					reject(new Error(t("err.http404NoCookie")));
-					return;
-				}
-				const rejectCookieInvalid = () => {
-					console.log(`${logPrefix} 404 但有 Cookie，可能 Cookie 无效`);
-					reject(new Error(t("err.http404BadCookie")));
-				};
-				const contest = extractContestFromUrl(url);
-				if (!contest) {
-					rejectCookieInvalid();
-					return;
-				}
-				void isContestStarted(contest).then((started) => {
-					if (started === false) {
-						console.log(`${logPrefix} 404 且比赛未开始，题目未公开: ${url}`);
-						reject(new Error(t("err.http404NotStarted", { contest })));
-					} else {
-						rejectCookieInvalid();
-					}
-				});
-				return;
-			}
-			console.log(`${logPrefix} 非 200 状态码:`, res.statusCode);
-			reject(new Error(t("err.httpStatus", { status: res.statusCode })));
-			return;
+		} else {
+			console.log(`${logPrefix} 403 但非 CF，可能 Cookie 无效`);
+			reject(new Error(t("err.http403")));
 		}
+		return;
+	}
+	if (isLoginPage(body)) {
+		console.log(`${logPrefix} 检测到登录页面`);
+		reject(new LoginRequiredError(url));
+		return;
+	}
+	if (res.statusCode !== 200) {
+		handleNon200(url, res.statusCode, reject, logPrefix);
+		return;
+	}
+	console.log(`${logPrefix} 请求成功:`, url, `body.length=${body.length}`);
+	resolve(body);
+}
 
-		console.log(`${logPrefix} 请求成功:`, url, `body.length=${body.length}`);
-		resolve(body);
-	});
-	readableStream.on("error", (err: Error) => {
-		restoreProxyEnv(restoreSaved);
-		reject(err);
-	});
+function handleResponse(
+	url: string,
+	res: http.IncomingMessage,
+	restoreSaved: Record<string, string | undefined>,
+	resolve: (value: string | PromiseLike<string>) => void,
+	reject: (reason: unknown) => void,
+	redirectFetcher: (url: string) => Promise<string>,
+	logPrefix: string = "[fetchText]",
+) {
+	console.log(`${logPrefix} 收到响应:`, url, `status=${res.statusCode}`);
+
+	if (handleRedirect(url, res, restoreSaved, resolve, reject, redirectFetcher, logPrefix)) {
+		return;
+	}
+
+	const readable = pipeDecompress(res);
+
+	void readBody(readable).then(
+		(body) => {
+			restoreProxyEnv(restoreSaved);
+			console.log(`${logPrefix} 响应体:`, url, `status=${res.statusCode}`, `body.length=${body.length}`);
+			handleBody(url, res, body, resolve, reject, logPrefix);
+		},
+		(err) => {
+			restoreProxyEnv(restoreSaved);
+			reject(err);
+		}
+	);
 }
 
 export function fetchText(url: string, opts?: { withCookie?: boolean }): Promise<string> {
diff --git a/scripts/check-functions.mjs b/scripts/check-functions.mjs
new file mode 100644
index 0000000..251d0c7
--- /dev/null
+++ b/scripts/check-functions.mjs
@@ -0,0 +1,100 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import ts from "typescript";
+
+const FUNC_LIMIT = Number(process.env.FUNCTION_LINE_LIMIT ?? 80);
+const TSX_FILE_LIMIT = Number(process.env.TSX_FILE_LINE_LIMIT ?? 600);
+const ROOT = process.cwd();
+const DIRS = ["apps", "packages"];
+const IGNORE = new Set(["node_modules", "dist", "out-test", "out", ".turbo", "release"]);
+
+function walk(dir, out = []) {
+  let entries;
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return out;
+  }
+  for (const e of entries) {
+    if (IGNORE.has(e)) continue;
+    const p = join(dir, e);
+    const st = statSync(p);
+    if (st.isDirectory()) walk(p, out);
+    else if (/\.(ts|tsx)$/.test(e)) out.push(p);
+  }
+  return out;
+}
+
+const FunctionKinds = new Set([
+  ts.SyntaxKind.FunctionDeclaration,
+  ts.SyntaxKind.FunctionExpression,
+  ts.SyntaxKind.ArrowFunction,
+  ts.SyntaxKind.MethodDeclaration,
+  ts.SyntaxKind.GetAccessor,
+  ts.SyntaxKind.SetAccessor,
+  ts.SyntaxKind.Constructor,
+]);
+
+function funcName(node) {
+  const n = node.name;
+  if (n && (ts.isIdentifier(n) || ts.isStringLiteral(n))) return n.text;
+  return "<anonymous>";
+}
+
+function scanTs(file) {
+  const src = readFileSync(file, "utf-8");
+  const sf = ts.createSourceFile(file, src, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+  const out = [];
+  const visit = (node) => {
+    if (FunctionKinds.has(node.kind)) {
+      const start = sf.getLineAndCharacterOfPosition(node.getStart(sf)).line;
+      const end = sf.getLineAndCharacterOfPosition(node.getEnd()).line;
+      const len = end - start + 1;
+      if (len > FUNC_LIMIT) {
+        out.push({ name: funcName(node), line: start + 1, len });
+      }
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(sf);
+  return out;
+}
+
+function countLines(file) {
+  return readFileSync(file, "utf-8").split("\n").length;
+}
+
+const files = DIRS.flatMap((d) => walk(join(ROOT, d)));
+const violations = [];
+
+for (const f of files) {
+  const rel = relative(ROOT, f);
+  if (/\.tsx$/.test(f)) {
+    const total = countLines(f);
+    if (total > TSX_FILE_LIMIT) {
+      violations.push({ file: rel, line: 1, name: "<file>", len: total, kind: "tsx-file" });
+    }
+  } else {
+    for (const o of scanTs(f)) {
+      violations.push({ file: rel, ...o, kind: "ts-func" });
+    }
+  }
+}
+
+violations.sort((a, b) => b.len - a.len);
+
+if (violations.length > 0) {
+  console.log(`tsx 文件超过 ${TSX_FILE_LIMIT} 行 / ts 函数超过 ${FUNC_LIMIT} 行:`);
+  console.log("");
+  for (const v of violations) {
+    console.log(
+      `${v.file}${v.kind === "tsx-file" ? "" : `:${v.line}`}  ${v.name}  (${v.len} ${v.kind === "tsx-file" ? "file lines" : "lines"})`
+    );
+  }
+  console.log("");
+  console.log(`Total: ${violations.length} violation(s) in ${files.length} file(s)`);
+} else {
+  console.log(`All checks passed (tsx <= ${TSX_FILE_LIMIT} lines, ts functions <= ${FUNC_LIMIT} lines, ${files.length} files scanned).`);
+}
+
+process.exit(violations.length ? 1 : 0);