From e950d5b4567f2d2b55d6b53c41d8b67d21a526fc Mon Sep 17 00:00:00 2001
From: liangfung <jueliang@tabbyml.com>
Date: Tue, 16 Jun 2026 10:52:12 +0800
Subject: [PATCH] feat(site): add back-to-tasks navigation and skeleton loading
 for tasks page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds back-to-tasks navigation on the run page using the canonical back-button design, and standardizes the back-button styling on the tasks page. Also introduces a layout-matching skeleton component for the tasks page Suspense fallback to improve loading UX.

🤖 Generated with [Pochi](https://getpochi.com) | [Task](https://app.getpochi.com/share/p-59a8a5bd98434f1a97c0fad1da19dfd9)

Co-Authored-By: Pochi <noreply@getpochi.com>
---
 .../run/components/trajectory-page.tsx        |  2 +-
 .../jobs/[jobName]/[trialName]/run/page.tsx   | 62 +++++++++-------
 .../tasks/components/tasks-page-client.tsx    |  9 ++-
 .../tasks/components/tasks-page-skeleton.tsx  | 70 +++++++++++++++++++
 site/app/tasks/page.tsx                       | 15 ++--
 5 files changed, 125 insertions(+), 33 deletions(-)
 create mode 100644 site/app/tasks/components/tasks-page-skeleton.tsx

diff --git a/site/app/jobs/[jobName]/[trialName]/run/components/trajectory-page.tsx b/site/app/jobs/[jobName]/[trialName]/run/components/trajectory-page.tsx
index 0fab8fc83c..c9fd06728b 100644
--- a/site/app/jobs/[jobName]/[trialName]/run/components/trajectory-page.tsx
+++ b/site/app/jobs/[jobName]/[trialName]/run/components/trajectory-page.tsx
@@ -192,7 +192,7 @@ export function TrajectoryPage({
 
   return (
     <div className="h-full w-full pb-4 pt-4 sm:pb-6 sm:pt-5">
-      <div className="mx-auto h-full w-full max-w-[1400px] px-4 sm:px-7 lg:px-10">
+      <div className="mx-auto h-full w-full max-w-screen-2xl px-4 sm:px-8 lg:px-12">
           <Tabs
             value={activeTab}
             onValueChange={handleTabChange}
diff --git a/site/app/jobs/[jobName]/[trialName]/run/page.tsx b/site/app/jobs/[jobName]/[trialName]/run/page.tsx
index 8d957d38f1..4213c66397 100644
--- a/site/app/jobs/[jobName]/[trialName]/run/page.tsx
+++ b/site/app/jobs/[jobName]/[trialName]/run/page.tsx
@@ -2,8 +2,9 @@ import tasksData from "@/zealt/tasks.json";
 import { TrajectoryPage, type TabConfig } from "./components/trajectory-page";
 import type { ArtifactNode, ArtifactNodeWithUrl } from "./components/artifacts-panel";
 import zealtConfig from "@/zealt/config.json";
+import Link from "next/link";
 import { redirect } from "next/navigation";
-import { AlertTriangle, Check, ExternalLink, HelpCircle, X as XIcon } from "lucide-react";
+import { AlertTriangle, ArrowLeft, Check, ExternalLink, HelpCircle, X as XIcon } from "lucide-react";
 import { Suspense } from "react";
 
 
@@ -347,30 +348,39 @@ export default async function TrajectoryRoutePage({
     <div className="flex h-screen w-full flex-col overflow-hidden bg-background text-foreground font-sans selection:bg-primary/20">
       <div className="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(#2a2a2a_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-20 dark:opacity-40"></div>
       <div className="z-40 shrink-0 bg-background/85 backdrop-blur-sm">
-        <div className="mx-auto w-full max-w-[1400px] px-4 py-6 sm:px-7 sm:py-8 lg:px-10">
-          <div className="flex flex-col gap-1">
-            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-start sm:gap-2">
-              <h1 className="min-w-0 truncate whitespace-nowrap font-bold text-2xl">
-                {headerTitle}
-              </h1>
-              <a
-                href={taskDirUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="group inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border/70 bg-background/40 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-secondary/45 hover:text-foreground sm:text-sm"
-              >
-                <ExternalLink className="h-4 w-4" />
-                <span>Task</span>
-              </a>
-            </div>
-            <div className="mt-2 text-xs sm:text-sm">
-              <div className="flex flex-col gap-1 sm:flex-row sm:gap-4">
-                <span className={`inline-flex shrink-0 items-center gap-0 font-medium`}>
-                  <StatusIcon className={`h-3.5 w-3.5 ${statusMeta.className}`} />
-                  <span className={`${statusMeta.className} ml-0.5`}>{statusMeta.label}</span>
-                  <span className="text-muted-foreground ml-0.5">@{startedAt}</span>
-                </span>
-                <span className="text-muted-foreground truncate">Duration: {executionDurationLabel}</span>
+        <div className="mx-auto w-full max-w-screen-2xl px-4 py-6 sm:px-8 sm:py-8 lg:px-12">
+          <div className="flex flex-col gap-3">
+            <Link
+              href="/tasks"
+              className="group inline-flex w-fit items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+              <span>Back to Tasks</span>
+            </Link>
+            <div className="flex flex-col gap-1">
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-start sm:gap-2">
+                <h1 className="min-w-0 truncate whitespace-nowrap font-bold text-2xl">
+                  {headerTitle}
+                </h1>
+                <a
+                  href={taskDirUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="group inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md border border-border/70 bg-background/40 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-secondary/45 hover:text-foreground sm:text-sm"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                  <span>Task</span>
+                </a>
+              </div>
+              <div className="mt-2 text-xs sm:text-sm">
+                <div className="flex flex-col gap-1 sm:flex-row sm:gap-4">
+                  <span className={`inline-flex shrink-0 items-center gap-0 font-medium`}>
+                    <StatusIcon className={`h-3.5 w-3.5 ${statusMeta.className}`} />
+                    <span className={`${statusMeta.className} ml-0.5`}>{statusMeta.label}</span>
+                    <span className="text-muted-foreground ml-0.5">@{startedAt}</span>
+                  </span>
+                  <span className="text-muted-foreground truncate">Duration: {executionDurationLabel}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -391,4 +401,4 @@ export default async function TrajectoryRoutePage({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/site/app/tasks/components/tasks-page-client.tsx b/site/app/tasks/components/tasks-page-client.tsx
index 64197f420a..9e45586758 100644
--- a/site/app/tasks/components/tasks-page-client.tsx
+++ b/site/app/tasks/components/tasks-page-client.tsx
@@ -9,6 +9,7 @@ import {
   ArrowUpDown,
   ArrowUp,
   ArrowDown,
+  ArrowLeft,
   Filter,
   X,
   ExternalLink,
@@ -440,8 +441,12 @@ export function TasksPageClient({ tasksData }: TasksPageClientProps) {
     <div className="container mx-auto px-4 sm:px-8 lg:px-12 py-8 max-w-screen-2xl h-[100dvh] flex flex-col overflow-hidden">
       <div className="mb-6 space-y-4 shrink-0">
         <div className="flex items-center gap-4">
-          <Link href="/" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-            &larr; Back to Leaderboard
+          <Link
+            href="/"
+            className="group inline-flex w-fit items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+            <span>Back to Leaderboard</span>
           </Link>
         </div>
         <div>
diff --git a/site/app/tasks/components/tasks-page-skeleton.tsx b/site/app/tasks/components/tasks-page-skeleton.tsx
new file mode 100644
index 0000000000..73b99895ee
--- /dev/null
+++ b/site/app/tasks/components/tasks-page-skeleton.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link";
+import { ArrowLeft, Filter, Search } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TasksPageSkeleton() {
+  return (
+    <div className="container mx-auto px-4 sm:px-8 lg:px-12 py-8 max-w-screen-2xl h-[100dvh] flex flex-col overflow-hidden">
+      <div className="mb-6 space-y-4 shrink-0">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/"
+            className="group inline-flex w-fit items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+            <span>Back to Leaderboard</span>
+          </Link>
+        </div>
+        <div>
+          <h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/50">
+            Task
+          </h1>
+          <p className="text-muted-foreground max-w-2xl leading-relaxed mt-2">
+            Detailed breakdown of individual task performance across different models.
+          </p>
+        </div>
+      </div>
+
+      {/* Filter bar skeleton */}
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 p-4 rounded-xl border border-border bg-card/50 backdrop-blur-sm shadow-sm shrink-0">
+        <div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
+          <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-secondary/50 text-muted-foreground shrink-0">
+            <Filter className="w-4 h-4" />
+          </div>
+          <div className="flex-1 grid grid-cols-2 sm:flex sm:flex-wrap gap-2 sm:gap-4">
+            <Skeleton className="h-9 w-full sm:w-[140px]" />
+            <Skeleton className="h-9 w-full sm:w-[180px]" />
+          </div>
+        </div>
+        <div className="relative w-full md:w-72">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Skeleton className="h-9 w-full" />
+        </div>
+      </div>
+
+      {/* Table skeleton */}
+      <div className="rounded-xl border border-border bg-card/50 backdrop-blur-sm shadow-sm overflow-hidden flex flex-col max-h-full">
+        <div className="border-b border-border bg-secondary/30 px-3 sm:px-6 py-3">
+          <Skeleton className="h-4 w-40" />
+        </div>
+        <div className="divide-y divide-border/30">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-4 px-3 sm:px-6 py-3 even:bg-secondary/5"
+            >
+              <Skeleton className="h-4 w-[180px] md:w-[260px] shrink-0" />
+              <div className="flex-1 flex items-center gap-2 overflow-hidden">
+                <Skeleton className="h-6 w-16 shrink-0" />
+                <Skeleton className="h-6 w-16 shrink-0" />
+                <Skeleton className="h-6 w-16 shrink-0" />
+                <Skeleton className="h-6 w-16 shrink-0 hidden sm:block" />
+                <Skeleton className="h-6 w-16 shrink-0 hidden md:block" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/site/app/tasks/page.tsx b/site/app/tasks/page.tsx
index 128a61840e..75b8a88c76 100644
--- a/site/app/tasks/page.tsx
+++ b/site/app/tasks/page.tsx
@@ -1,8 +1,11 @@
 import { Suspense } from "react";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 import tasksDataRaw from "@/zealt/tasks.json";
 import pendingTasksData from "@/zealt/pending-tasks.json";
 import PendingReviewCard from "@/components/pending-review-card";
 import { TasksPageClient, type CompactTask, type CompactTrial } from "./components/tasks-page-client";
+import { TasksPageSkeleton } from "./components/tasks-page-skeleton";
 
 type RawTaskTrial = {
   task_name?: string;
@@ -105,9 +108,13 @@ export default function TasksPage() {
         <div className="container mx-auto px-4 sm:px-8 lg:px-12 py-8 max-w-screen-2xl h-[100dvh] flex flex-col overflow-hidden">
           <div className="mb-6 space-y-4 shrink-0">
             <div className="flex items-center gap-4">
-              <a href="/" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
-                &larr; Back to Leaderboard
-              </a>
+              <Link
+                href="/"
+                className="group inline-flex w-fit items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+                <span>Back to Leaderboard</span>
+              </Link>
             </div>
             <div>
               <h1 className="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/50">
@@ -119,7 +126,7 @@ export default function TasksPage() {
           <PendingReviewCard pendingSampleCases={pendingSampleCases} />
         </div>
       ) : (
-        <Suspense fallback={<div className="container mx-auto py-8 text-center">Loading tasks...</div>}>
+        <Suspense fallback={<TasksPageSkeleton />}>
           <TasksPageClient tasksData={compactTasksData} />
         </Suspense>
       )}