Refine PsyFlow homepage and changelog

Author: zh1peng

website/content/en/tutorials/cli-and-runtime.md

@@ -35,7 +35,7 @@ psyflow init
 ## Run a task in human mode
 
 ```bash
-psyflow-run path/to/task
+psyflow-run task-path
 ```
 
 This resolves the task entry and forwards into the task-local `main.py`.
@@ -51,7 +51,7 @@ but the shortcut is better for consistent task-path handling.
 ## Run QA mode
 
 ```bash
-psyflow-qa path/to/task --config config/config_qa.yaml
+psyflow-qa task-path --config config/config_qa.yaml
 ```
 
 What QA mode does now:
@@ -64,7 +64,7 @@ What QA mode does now:
 Use `--set-maturity` if you want promotion behavior:
 
 ```bash
-psyflow-qa path/to/task --config config/config_qa.yaml --set-maturity smoke_tested
+psyflow-qa task-path --config config/config_qa.yaml --set-maturity smoke_tested
 ```
 
 Typical QA artifacts live under `outputs/qa/`:
@@ -78,21 +78,21 @@ Typical QA artifacts live under `outputs/qa/`:
 ## Run simulation mode
 
 ```bash
-psyflow-sim path/to/task --config config/config_scripted_sim.yaml
+psyflow-sim task-path --config config/config_scripted_sim.yaml
 ```
 
 For task-specific responders, switch to the sampler profile:
 
 ```bash
-psyflow-sim path/to/task --config config/config_sampler_sim.yaml
+psyflow-sim task-path --config config/config_sampler_sim.yaml
 ```
 
 The older docs used `config/config_sim.yaml`. That is no longer the current standard.
 
 ## Validate the task package
 
 ```bash
-psyflow-validate path/to/task
+psyflow-validate task-path
 ```
 
 Validation now covers more than folder existence. The current validator also checks:

website/content/en/tutorials/getting-started.md

@@ -66,10 +66,10 @@ PsyFlow still assumes a task-local `main.py`, but the runtime modes are now expl
 The framework ships shortcut commands so you do not have to remember mode-specific `python main.py ...` invocations:
 
 ```bash
-psyflow-run path/to/task
-psyflow-qa path/to/task
-psyflow-sim path/to/task --config config/config_scripted_sim.yaml
-psyflow-validate path/to/task
+psyflow-run task-path
+psyflow-qa task-path
+psyflow-sim task-path --config config/config_scripted_sim.yaml
+psyflow-validate task-path
 ```
 
 ## Load config the current way

website/content/en/tutorials/qa-and-validation.md

@@ -11,7 +11,7 @@ PsyFlow now expects more than “it runs once on my machine.” The maintained w
 Run QA mode with:
 
 ```bash
-psyflow-qa path/to/task --config config/config_qa.yaml
+psyflow-qa task-path --config config/config_qa.yaml
 ```
 
 On a passing run, PsyFlow can promote maturity in `taskbeacon.yaml` and refresh the README maturity badge.
@@ -33,7 +33,7 @@ Treat those as review artifacts, not incidental debug files.
 Use static validation even when you do not want to launch the task:
 
 ```bash
-psyflow-validate path/to/task
+psyflow-validate task-path
 ```
 
 The validator now covers much more than directory shape:
@@ -51,13 +51,13 @@ That last point matters. The framework now actively guards against hardcoded par
 Use simulation when you want deterministic or plugin-based responses without a real participant:
 
 ```bash
-psyflow-sim path/to/task --config config/config_scripted_sim.yaml
+psyflow-sim task-path --config config/config_scripted_sim.yaml
 ```
 
 If you need a task-specific sampler responder:
 
 ```bash
-psyflow-sim path/to/task --config config/config_sampler_sim.yaml
+psyflow-sim task-path --config config/config_sampler_sim.yaml
 ```
 
 ## Responder protocol

website/content/zh/tutorials/cli-and-runtime.md

@@ -29,15 +29,15 @@ psyflow init
 ## human 模式
 
 ```bash
-psyflow-run path/to/task
+psyflow-run task-path
 ```
 
 这会自动解析任务目录或 `main.py`，然后用 human 模式调用任务入口。
 
 ## QA 模式
 
 ```bash
-psyflow-qa path/to/task --config config/config_qa.yaml
+psyflow-qa task-path --config config/config_qa.yaml
 ```
 
 QA 模式现在不只是“跑一下看看”。
@@ -73,7 +73,7 @@ psyflow-sim . --config config/config_sampler_sim.yaml
 ## validate
 
 ```bash
-psyflow-validate path/to/task
+psyflow-validate task-path
 ```
 
 这个命令现在会检查：

website/content/zh/tutorials/qa-and-validation.md

@@ -11,7 +11,7 @@ PsyFlow 现在不再把 “能跑一次” 当成发布标准。当前维护中
 先用 QA 跑一遍任务：
 
 ```bash
-psyflow-qa path/to/task --config config/config_qa.yaml
+psyflow-qa task-path --config config/config_qa.yaml
 ```
 
 默认会在 `outputs/qa/` 下面留下结构化产物，例如：
@@ -29,7 +29,7 @@ psyflow-qa path/to/task --config config/config_qa.yaml
 如果你只想先检查任务包，不想真正启动 PsychoPy，可以直接运行：
 
 ```bash
-psyflow-validate path/to/task
+psyflow-validate task-path
 ```
 
 当前 validator 会覆盖：
@@ -47,13 +47,13 @@ psyflow-validate path/to/task
 如果你需要无被试的重复性测试，可以用 simulation：
 
 ```bash
-psyflow-sim path/to/task --config config/config_scripted_sim.yaml
+psyflow-sim task-path --config config/config_scripted_sim.yaml
 ```
 
 如果任务需要自己的 responder：
 
 ```bash
-psyflow-sim path/to/task --config config/config_sampler_sim.yaml
+psyflow-sim task-path --config config/config_sampler_sim.yaml
 ```
 
 ## 推荐顺序

website/public/images/branding/psyflow-logo-black.png

@@ -1,51 +1,40 @@
-import { changelog, siteData } from "@/lib/generated";
+import { changelog } from "@/lib/generated";
+
+const releaseBackgrounds = [
+  "bg-[#fffdf9]",
+  "bg-[#eef8ff]",
+  "bg-[#fff3ed]",
+  "bg-[#efffe9]",
+  "bg-[#f4f0ff]"
+] as const;
 
 export default function ChangelogPage() {
   return (
-    <div className="space-y-12 pb-8">
-      <section className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_320px] lg:items-end">
-        <div>
-          <div className="pf-badge">Changelog</div>
-          <h1 className="mt-5 max-w-4xl font-heading text-5xl font-bold leading-[0.94] text-[#25314d] sm:text-6xl">
-            Read releases as one clear update at a time.
-          </h1>
-          <p className="mt-5 max-w-3xl text-base leading-8 text-slate-700">
-            This page follows the current repository history instead of over-indexing on one stale package
-            version. Each release is shown as one readable block.
-          </p>
-        </div>
-
-        <div className="pf-frame bg-[#fffdf9] p-5">
-          <div className="space-y-3 text-sm leading-7 text-slate-700">
-            <div className="rounded-[18px] border-2 border-[#25314d] bg-[#eef8ff] px-4 py-3 shadow-[0_4px_0_#25314d]">
-              Latest changelog release: {siteData.latest_release?.version ?? "unknown"}
-            </div>
-            <div className="rounded-[18px] border-2 border-[#25314d] bg-[#fff3ed] px-4 py-3 shadow-[0_4px_0_#25314d]">
-              Package metadata version: {siteData.project.version ?? "unknown"}
-            </div>
-          </div>
-        </div>
+    <div className="space-y-8 pb-8">
+      <section>
+        <h1 className="font-heading text-4xl font-bold leading-[0.95] text-[#25314d] sm:text-5xl lg:text-6xl">
+          Changes
+        </h1>
       </section>
 
       <section className="space-y-5">
-        {changelog.map((release) => (
-          <article key={release.version} className="pf-frame bg-[#fffdf9] p-6 sm:p-7">
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-              <div>
-                <div className="pf-section-chip bg-[#ddd7f4]">Version {release.version}</div>
-                <h2 className="mt-4 font-heading text-3xl font-bold text-[#25314d]">{release.date}</h2>
+        {changelog.map((release, index) => (
+          <article
+            key={release.version}
+            className={`pf-frame p-5 sm:p-6 ${releaseBackgrounds[index % releaseBackgrounds.length]}`}
+          >
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between">
+              <div className="text-xs font-bold uppercase tracking-[0.16em] text-slate-500">
+                Version {release.version}
               </div>
+              <div className="text-sm font-medium text-slate-600">{release.date}</div>
             </div>
-            <ul className="mt-6 space-y-3 text-sm leading-7 text-slate-700">
+
+            <div className="mt-5 space-y-3 text-sm leading-7 text-slate-700">
               {release.summary.map((item) => (
-                <li
-                  key={`${release.version}:${item}`}
-                  className="rounded-[18px] border-2 border-[#25314d] bg-white px-4 py-3 shadow-[0_4px_0_#25314d]"
-                >
-                  {item}
-                </li>
+                <p key={`${release.version}:${item}`}>{item}</p>
               ))}
-            </ul>
+            </div>
           </article>
         ))}
       </section>

website/public/images/branding/psyflow-logo-white.png

@@ -26,6 +26,7 @@ body {
   @apply font-sans antialiased;
   color: var(--pf-ink);
   background: var(--pf-paper);
+  overflow-x: hidden;
 }
 
 .pf-grid-bg {
@@ -140,6 +141,23 @@ body {
   }
 }
 
+@media (max-width: 640px) {
+  .pf-frame {
+    border-radius: 24px;
+  }
+
+  .pf-frame-soft {
+    border-radius: 18px;
+  }
+
+  .pf-button-primary,
+  .pf-button-secondary,
+  .pf-button-ghost {
+    width: 100%;
+    padding: 0.85rem 1.05rem;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;

website/src/app/changelog/page.tsx

@@ -19,7 +19,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
       <body>
         <div className="pf-grid-bg min-h-screen">
           <SiteHeader />
-          <main className="mx-auto w-full max-w-7xl px-4 pb-12 pt-32 sm:px-6 lg:px-8">{children}</main>
+          <main className="mx-auto w-full max-w-7xl px-4 pb-12 pt-28 sm:px-6 sm:pt-32 lg:px-8">{children}</main>
           <SiteFooter />
         </div>
       </body>