feat(site): implement tab persistence and loading state for trajectory page (#48)

* feat(site): implement tab persistence and loading state for trajectory page

- Added tab persistence using URL search parameters (`?tab=...`)
- Dynamic tabs rendering based on `tabsConfig` prop
- Added `Suspense` support and `TrajectoryPageFallback` for better loading state
- Updated `.zealt/tasks.json` with a detailed instruction for the task

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

Co-Authored-By: Pochi <noreply@getpochi.com>

* update

* update

---------

Co-authored-by: Pochi <noreply@getpochi.com>

Author: liangfung

.zealt/tasks.json

@@ -1086,7 +1086,7 @@
     ]
   },
   "template_author_metadata": {
-    "instruction": "",
+    "instruction": "You are a repo maintainer enforcing a metadata policy for your team's monorepo. You need to extract a custom-formatted log of the recent commits in the repository located at `/home/user/repo`.\n\nYour task is to:\n1. Navigate to `/home/user/repo`.\n2. Configure a repository-specific alias named `mylog` that runs `log` with a custom template. The template must output each commit's short ID (exactly 8 characters), author name, and the first line of the commit description, separated by a pipe character `|`, followed by a newline.\n3. Run your new `jj mylog` alias and redirect the output to a file named `/home/user/repo/formatted_log.txt`.\n\nNote: Do not use `sudo` or modify system-level configurations. Ensure the alias is saved in the repository's `.jj/repo/config.toml`.\n",
     "trials": [
       {
         "job_name": "2026-03-19__17-16-51",

site/app/tasks/[name]/[jobId]/trajectory/components/trajectory-page.tsx

@@ -3,17 +3,24 @@
 import { useEffect, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
 import { HttpError } from "@/lib/http-error";
 
+export type TabConfig = {
+  value: string;
+  label: React.ReactNode;
+};
+
 type TrajectoryPageProps = {
   trajectoryUrl: string;
   fallbackUrl: string;
   stderrLogUrl: string | null;
   verifierLogUrl: string | null;
+  tabsConfig: TabConfig[];
 };
 
 async function fetchLogText(url: string): Promise<string> {
@@ -36,11 +43,24 @@ export function TrajectoryPage({
   fallbackUrl,
   stderrLogUrl,
   verifierLogUrl,
+  tabsConfig,
 }: TrajectoryPageProps) {
   const { resolvedTheme } = useTheme();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const [mounted, setMounted] = useState(false);
   const [iframeLoading, setIframeLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState("trajectory");
+
+  const validTabs = tabsConfig.map((t) => t.value);
+  const queryTab = searchParams.get("tab");
+  const activeTab = queryTab && validTabs.includes(queryTab) ? queryTab : validTabs[0];
+
+  const handleTabChange = (value: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", value);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
 
   const iframeTheme = mounted && resolvedTheme === "light" ? "light" : "dark";
 
@@ -55,7 +75,7 @@ export function TrajectoryPage({
   }, []);
 
   useEffect(() => {
-    if (!mounted) {
+    if (!mounted || !iframeUrl) {
       return;
     }
 
@@ -126,29 +146,20 @@ export function TrajectoryPage({
       <div className="mx-auto h-full w-full max-w-[1400px] px-4 sm:px-7 lg:px-10">
           <Tabs
             value={activeTab}
-            onValueChange={setActiveTab}
+            onValueChange={handleTabChange}
             className="flex h-full min-h-0 flex-col gap-0 overflow-hidden rounded-xl border border-border bg-background/70 backdrop-blur-sm shadow-sm"
           >
             <div className="border-b border-border bg-background/40 px-3 py-3 sm:px-4">
               <TabsList className="grid h-11 w-[300px] max-w-full grid-cols-3 items-stretch gap-1 rounded-xl bg-muted/55 p-1">
-                <TabsTrigger
-                  value="trajectory"
-                  className="h-full w-full cursor-pointer rounded-lg border-0 py-0 leading-none text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground data-[state=active]:bg-primary/18 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-                >
-                  Trajectory
-                </TabsTrigger>
-                <TabsTrigger
-                  value="log"
-                  className="h-full w-full cursor-pointer rounded-lg border-0 py-0 leading-none text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground data-[state=active]:bg-primary/18 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-                >
-                  Log
-                </TabsTrigger>
-                <TabsTrigger
-                  value="test"
-                  className="h-full w-full cursor-pointer rounded-lg border-0 py-0 leading-none text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground data-[state=active]:bg-primary/18 data-[state=active]:text-foreground data-[state=active]:shadow-none"
-                >
-                  Test
-                </TabsTrigger>
+                {tabsConfig.map((tab) => (
+                  <TabsTrigger
+                    key={tab.value}
+                    value={tab.value}
+                    className="h-full w-full cursor-pointer rounded-lg border-0 py-0 leading-none text-muted-foreground transition-colors hover:bg-primary/10 hover:text-foreground data-[state=active]:bg-primary/18 data-[state=active]:text-foreground data-[state=active]:shadow-none"
+                  >
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
               </TabsList>
             </div>
 

site/app/tasks/[name]/[jobId]/trajectory/page.tsx

@@ -1,8 +1,9 @@
 import tasksData from "@/zealt/tasks.json";
-import { TrajectoryPage } from "./components/trajectory-page";
+import { TrajectoryPage, type TabConfig } from "./components/trajectory-page";
 import zealtConfig from "@/zealt/config.json";
 import { redirect } from "next/navigation";
 import { AlertTriangle, Check, ExternalLink, HelpCircle, X as XIcon } from "lucide-react";
+import { Suspense } from "react";
 
 
 type RouteParams = {
@@ -251,6 +252,21 @@ export default async function TrajectoryRoutePage({
 }) {
   const resolvedParams = await params;
 
+  const tabsConfig: TabConfig[] = [
+    {
+      value: "trajectory",
+      label: "Trajectory",
+    },
+    {
+      value: "log",
+      label: "Log",
+    },
+    {
+      value: "test",
+      label: "Test",
+    },
+  ];
+
   const trialEntry = findTrialEntry(resolvedParams.name, resolvedParams.jobId);
   const fallbackUrl = trialEntry
     ? buildFallbackUrl(trialEntry.job_name, trialEntry.trial_name)
@@ -313,12 +329,15 @@ export default async function TrajectoryRoutePage({
         </div>
       </div>
       <div className="min-h-0 flex-1">
-        <TrajectoryPage
-          trajectoryUrl={trajectoryUrl}
-          fallbackUrl={fallbackUrl ?? ''}
-          stderrLogUrl={stderrLogUrl}
-          verifierLogUrl={verifierLogUrl}
-        />
+        <Suspense fallback={null}>
+          <TrajectoryPage
+            trajectoryUrl={trajectoryUrl}
+            fallbackUrl={fallbackUrl ?? ''}
+            stderrLogUrl={stderrLogUrl}
+            verifierLogUrl={verifierLogUrl}
+            tabsConfig={tabsConfig}
+          />
+        </Suspense>
       </div>
     </div>
   );