fix(projects): preview flakiness, logo on tabs, stable navbar

Three fixes to the project pages that surfaced from real usage:

- preview generation: poll window 120s → 300s (the "30-60s" promise was
  usually a lie under load), latest endpoint now filters to status=ready
  so we don't surface an in-flight row, and Generate stays on the
  dashboard + refreshes so the preview link reliably appears in the
  amber section instead of redirecting to a half-empty article page

- project header logo: scraped favicon/og-image now renders on every
  project tab via a new ProjectHeaderLogo (matches the dashboard tile)

- tabs nav stability: ProjectLayoutClient was missing the status /
  schedule / run-now action bar that ProjectShell renders, so switching
  e.g. scans → autoblog shifted the tabs up by a row. Layout now
  mirrors the shell so the nav stays put

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ralyodio

app/(app)/projects/[id]/autoblog/actions.tsx

@@ -14,18 +14,19 @@ async function call(path: string): Promise<{ ok: boolean; error?: string }> {
   }
 }
 
-// Wait up to ~90s for a new article to land in lx_article (created_at >
-// `since`). Returns the article id or null on timeout. The dashboard
-// generate button uses this to auto-redirect once the worker is done,
-// so users don't sit on a "queued" message wondering what to do.
-// Scoped to the current project's lx_site via projectId so users with
-// multiple projects don't poll the wrong site when the picker cookie
-// has drifted.
+// Poll lx_article for a new row in status='ready' created after `since`.
+// Returns the article id or null on timeout. Scoped to the current
+// project's lx_site via projectId so users with multiple projects don't
+// poll the wrong site when the picker cookie has drifted.
+//
+// Window is generous (5 min): the worker's "30-60s" ballpark is a best
+// case — LLM + sitemap + embeddings can push it past 2 min, and a short
+// window meant the dashboard would give up before the article landed.
 async function waitForNewArticle(
   projectId: string,
   since: Date,
   signal: AbortSignal,
-  maxMs = 120_000,
+  maxMs = 300_000,
 ): Promise<string | null> {
   const start = Date.now();
   while (Date.now() - start < maxMs) {
@@ -78,7 +79,7 @@ export function DashboardActions({
 
   async function generateArticleNow() {
     setBusy("article");
-    setNotice("Generating… this takes ~30–60s.");
+    setNotice("Generating… this can take 1–3 minutes.");
     setError(null);
     const since = new Date();
     const r = await call(
@@ -98,10 +99,16 @@ export function DashboardActions({
     );
     setBusy(null);
     if (articleId) {
-      router.push(`/projects/${projectId}/autoblog/articles/${articleId}`);
+      // Stay on the dashboard so the new preview link appears at the
+      // top with the rest of the queue. Redirecting away was confusing
+      // when users wanted to compare multiple previews; the link in the
+      // amber "Previews waiting on Publish" section goes to the same
+      // place when they're ready to review.
+      setNotice("Preview ready — see the section at the top.");
+      router.refresh();
     } else {
       setNotice(
-        "Still generating. Check the 'Previews waiting on Publish' section in a moment.",
+        "Still generating. Refresh this page in a minute to see the preview at the top.",
       );
       router.refresh();
     }

app/(app)/projects/[id]/layout-client.tsx

@@ -3,20 +3,35 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ProjectTabsNav } from "@/components/project-tabs-nav";
+import { ProjectStatusControls } from "@/components/project-status-controls";
+import { ScheduleToggle } from "@/components/schedule-toggle";
+import { RunNowButton } from "@/components/run-now-button";
+import { ProjectHeaderLogo } from "@/components/project-header-logo";
+import type { ProjectStatus } from "@/app/actions/projects";
+import type { Engine } from "@/lib/credits";
 
-// The light header (breadcrumb + name) only renders on the
-// autoblog/social tabs. The overview/performance/scans tabs still
-// render their own ProjectShell-based header until those pages are
-// refactored to lean on the layout.
+// On the autoblog/social tabs the layout owns the header chrome.
+// Mirrors ProjectShell exactly (logo + name + action bar + tabs) so the
+// tabs nav stays at the same Y across all project tabs — otherwise it
+// jumps when switching e.g. /scans → /autoblog because the action bar
+// height changes.
 export function ProjectLayoutClient({
   projectId,
   name,
   url,
+  logoUrl,
+  schedule,
+  status,
+  engines,
   children,
 }: {
   projectId: string;
   name: string;
   url: string;
+  logoUrl: string | null;
+  schedule: "off" | "daily" | "weekly" | "monthly";
+  status: ProjectStatus;
+  engines: Engine[];
   children: React.ReactNode;
 }) {
   const pathname = usePathname() ?? "";
@@ -30,9 +45,19 @@ export function ProjectLayoutClient({
             <Link href="/dashboard" className="text-sm text-[var(--color-muted)]">
               ← Dashboard
             </Link>
-            <h1 className="mt-3 text-3xl font-bold">{name}</h1>
+            <div className="mt-3 flex items-center gap-3">
+              <ProjectHeaderLogo url={logoUrl} name={name} />
+              <h1 className="text-3xl font-bold">{name}</h1>
+            </div>
             <p className="mt-1 break-all text-[var(--color-muted)]">{url}</p>
           </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <ProjectStatusControls projectId={projectId} status={status} />
+            <ScheduleToggle projectId={projectId} current={schedule} />
+            <RunNowButton projectId={projectId} url={url} engines={engines} />
+          </div>
+
           <ProjectTabsNav projectId={projectId} />
         </>
       )}

app/(app)/projects/[id]/layout.tsx

@@ -13,7 +13,7 @@ export default async function ProjectLayout({
   const supabase = await createClient();
   const { data: project } = await supabase
     .from("projects")
-    .select("id, name, url")
+    .select("id, name, url, logo_url, schedule, status, engines")
     .eq("id", id)
     .maybeSingle();
   if (!project) notFound();
@@ -23,6 +23,10 @@ export default async function ProjectLayout({
       projectId={project.id}
       name={project.name}
       url={project.url}
+      logoUrl={project.logo_url ?? null}
+      schedule={project.schedule}
+      status={project.status ?? "active"}
+      engines={project.engines ?? ["rule"]}
     >
       {children}
     </ProjectLayoutClient>

app/(app)/projects/[id]/page.tsx

@@ -64,6 +64,7 @@ export default async function ProjectOverviewPage({
         schedule: project.schedule,
         status: (project.status ?? "active") as ProjectStatus,
         engines: (project.engines ?? ["rule"]) as Engine[],
+        logo_url: (project as { logo_url?: string | null }).logo_url ?? null,
       }}
       currentTab="overview"
     >

app/(app)/projects/[id]/performance/page.tsx

@@ -133,6 +133,7 @@ export default async function ProjectPerformancePage({
         schedule: project.schedule,
         status: (project.status ?? "active") as ProjectStatus,
         engines: (project.engines ?? ["rule"]) as Engine[],
+        logo_url: (project as { logo_url?: string | null }).logo_url ?? null,
       }}
       currentTab="performance"
     >

app/(app)/projects/[id]/scans/page.tsx

@@ -95,6 +95,7 @@ export default async function ProjectScansPage({
         schedule: project.schedule,
         status: (project.status ?? "active") as ProjectStatus,
         engines: (project.engines ?? ["rule"]) as Engine[],
+        logo_url: (project as { logo_url?: string | null }).logo_url ?? null,
       }}
       currentTab="scans"
     >

app/api/lx/articles/latest/route.ts

@@ -45,11 +45,23 @@ export async function GET(req: NextRequest) {
     return NextResponse.json({ ok: false, error: "bad since" }, { status: 400 });
   }
 
-  const { data, error } = await supabase
+  // Default to status='ready' (i.e. an article the user can actually
+  // preview/publish). The dashboard polls for this after a manual
+  // Generate; without the filter we'd return an in-flight 'generating'
+  // row and the redirect would land on an empty article page. Callers
+  // that want any new row can pass ?status=any.
+  const statusFilter = req.nextUrl.searchParams.get("status") ?? "ready";
+
+  let query = supabase
     .from("lx_article")
     .select("id, status, title, created_at")
     .eq("site_id", lxSiteId)
-    .gt("created_at", since.toISOString())
+    .gt("created_at", since.toISOString());
+  if (statusFilter !== "any") {
+    query = query.eq("status", statusFilter);
+  }
+
+  const { data, error } = await query
     .order("created_at", { ascending: false })
     .limit(1)
     .maybeSingle();

components/project-header-logo.tsx

@@ -0,0 +1,33 @@
+// Square logo for the project header — scraped favicon/og-image with a
+// one-letter fallback. Mirrors the dashboard tile's ProjectLogo, sized
+// up for the page header.
+export function ProjectHeaderLogo({
+  url,
+  name,
+}: {
+  url: string | null;
+  name: string;
+}) {
+  const letter = (name || "?").trim().charAt(0).toUpperCase();
+  if (!url) {
+    return (
+      <div
+        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-[var(--color-card)] text-sm font-semibold text-[var(--color-muted)]"
+        aria-hidden
+      >
+        {letter}
+      </div>
+    );
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={url}
+      alt=""
+      width={40}
+      height={40}
+      loading="lazy"
+      className="h-10 w-10 shrink-0 rounded-md border border-[var(--color-border)] bg-white object-contain p-1"
+    />
+  );
+}

components/project-shell.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { ScheduleToggle } from "@/components/schedule-toggle";
 import { ProjectStatusControls } from "@/components/project-status-controls";
 import { RunNowButton } from "@/components/run-now-button";
+import { ProjectHeaderLogo } from "@/components/project-header-logo";
 import type { ProjectStatus } from "@/app/actions/projects";
 import type { Engine } from "@/lib/credits";
 
@@ -19,6 +20,7 @@ type ProjectLite = {
   schedule: "off" | "daily" | "weekly" | "monthly";
   status: ProjectStatus | null;
   engines: Engine[] | null;
+  logo_url?: string | null;
 };
 
 const TABS: { id: ProjectShellTab; label: string; href: (id: string) => string }[] = [
@@ -54,7 +56,10 @@ export function ProjectShell({
         <Link href="/dashboard" className="text-sm text-[var(--color-muted)]">
           ← Dashboard
         </Link>
-        <h1 className="mt-3 text-3xl font-bold">{project.name}</h1>
+        <div className="mt-3 flex items-center gap-3">
+          <ProjectHeaderLogo url={project.logo_url ?? null} name={project.name} />
+          <h1 className="text-3xl font-bold">{project.name}</h1>
+        </div>
         <p className="mt-1 break-all text-[var(--color-muted)]">{project.url}</p>
       </div>