[79d686f0] Add page-scoped refresh button to the navbar (#351)

* [870467e6] Frontend: page-scoped refresh provider, hook, and navbar button (#347) * [55376b8a] Create page-scoped refresh provider and context (#327) * [55376b8a] feat(panel): add page-scoped refresh context and provider * [55376b8a] docs(frontend): add page-refresh-provider component documentation --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [a0c02d0f] Add public usePageRefresh hook (#332) * [a0c02d0f] test(hooks): assert usePageRefresh is exported from hooks barrel * [a0c02d0f] feat(hooks): add public usePageRefresh hook with provider and tests * [a0c02d0f] fix(panel): move hook test wrappers to components and rename providers.tsx to unshadow barrel * [a0c02d0f] docs(panel): document usePageRefresh hook and PageRefreshProvider API --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [5f28dd9b] Add navbar refresh button and remove inline dashboard refresh buttons (#336) * [5f28dd9b] Align PageRefreshProvider with active hook API and remove inline dashboard refresh buttons * [5f28dd9b] Remove unused scope-keyed PageRefreshProvider, context, and associated tests * [5f28dd9b] Address QA revision: add header refresh tests, page-scoped label, remove dead provider code and .venv symlink, revert formatting-only changes * [5f28dd9b] Remove remaining inline dashboard refresh buttons and committed .venv symlink * [5f28dd9b] docs(frontend): update page-refresh provider docs and panel README for navbar refresh button * [5f28dd9b] fix(panel): remove .venv symlink, ignore root .venv entries, and thin task-detail page data fetch into useTaskDetail hook * [5f28dd9b] Extract GitBrowser data fetching into useGitBrowser hook and add tests; verify .venv cleanup and task-detail thin hook usage * [5f28dd9b] fix(panel): remove root .venv symlink, restore .gitignore anchored rule, and revert lifecycle.json formatting noise * Delete .venv --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [b8e1de1b] Fix navbar refresh button disabled state when registry is empty (#356) (#358) * [b8e1de1b] fix(panel): derive navbar refresh disabled state from registry, not unused prop PageRefreshProvider now computes `disabled` from whether any refresh callback is currently registered (registry size > 0) instead of a static, never-passed `disabled` prop that left the button permanently enabled. header.tsx now destructures `disabled` from usePageRefresh() and disables the button on `disabled || loading`. Updated the tests that asserted the old always-enabled-by-default behavior and added a new header test asserting the button is disabled with zero registered callbacks. * [b8e1de1b] docs(panel): document PageRefreshProvider disabled state derived from registry Updated documentation to reflect the refactored PageRefreshProvider behavior: the `disabled` state is now derived from whether any refresh callbacks are currently registered (empty registry = disabled), rather than a static `disabled` prop. Clarified in both panel/README.md and the full component guide that the navbar refresh button disables when no callbacks are registered and when a refresh cycle is in progress. Updated API documentation to remove the now-removed `disabled` prop from PageRefreshProviderProps and updated code examples and test coverage descriptions to reflect the new callback-driven semantics. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * test(panel): mock usePageRefresh in tests predating the provider Merge-skew: the page-refresh feature makes CommandCenter and the agent detail page call usePageRefresh; three tests merged from master render them without the new provider. Mock the hook module, matching the files' stub-everything style. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com>
2026-08-03 07:23:24 +02:00 · 2026-07-09 05:27:14 +02:00
parent ec5323917e
commit 08c02e2251
56 changed files with 1996 additions and 608 deletions
@@ -57,6 +57,15 @@ vi.mock("../ceo-approval-queue", () => ({
 vi.mock("../pr-review-queue", () => ({
  PrReviewQueue: () => <div>PrReviewQueueStub</div>,
 }));
+vi.mock("@/hooks/use-page-refresh", () => ({
+  usePageRefresh: () => ({
+    register: vi.fn(),
+    unregister: vi.fn(),
+    refresh: vi.fn(),
+    loading: false,
+    disabled: false,
+  }),
+}));
 vi.mock("../release-proposal-card", () => ({
  ReleaseProposalCard: () => <div>ReleaseProposalCardStub</div>,
 }));
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
 import type { ReleaseProposal } from "@/lib/api/release";

 // Control useQuery per test; the mutation + queryClient hooks just need to exist.
@@ -30,6 +31,11 @@ vi.mock("@/lib/api", () => ({
 }));

 import { ReleaseProposalCard } from "../release-proposal-card";
+import { PageRefreshProvider } from "@/components/providers";
+
+function withPageRefresh(ui: ReactNode) {
+  return <PageRefreshProvider>{ui}</PageRefreshProvider>;
+}

 function buildProposal(): ReleaseProposal {
  return {
@@ -74,18 +80,16 @@ describe("ReleaseProposalCard — query-failure surfacing (F082)", () => {
      refetch: vi.fn(),
    });

-    render(<ReleaseProposalCard />);
+    render(withPageRefresh(<ReleaseProposalCard />));

    // The failure must be visible — not a silent hide. The error card surfaces
-    // the underlying message and a retry affordance.
+    // the underlying message. Refresh is now handled by the navbar refresh button.
    expect(
      screen.getByText(/couldn't load the release proposal/i),
    ).toBeInTheDocument();
    expect(
      screen.getByText(/release service unavailable/i),
    ).toBeInTheDocument();
-    // A retry affordance so the CEO can re-fetch without a full page reload.
-    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
  });

  it("still hides on the 404 no-open-proposal empty state (regression guard)", () => {
@@ -99,7 +103,7 @@ describe("ReleaseProposalCard — query-failure surfacing (F082)", () => {
      refetch: vi.fn(),
    });

-    const { container } = render(<ReleaseProposalCard />);
+    const { container } = render(withPageRefresh(<ReleaseProposalCard />));
    expect(container).toBeEmptyDOMElement();
  });

@@ -112,7 +116,7 @@ describe("ReleaseProposalCard — query-failure surfacing (F082)", () => {
      refetch: vi.fn(),
    });

-    render(<ReleaseProposalCard />);
+    render(withPageRefresh(<ReleaseProposalCard />));
    expect(screen.getByText(/Release Proposal/i)).toBeInTheDocument();
    expect(screen.getByText("v0.14.0")).toBeInTheDocument();
    expect(
@@ -80,7 +80,9 @@ describe("RoadmapReviewQueue", () => {

  it("renders the cycle goal and both item drafts", async () => {
    render(withQueryClient(<RoadmapReviewQueue />));
-    expect(await screen.findByText("Close onboarding friction")).toBeInTheDocument();
+    expect(
+      await screen.findByText("Close onboarding friction"),
+    ).toBeInTheDocument();
    expect(screen.getByText("Streamline signup")).toBeInTheDocument();
    expect(screen.getByText("Simplify pricing page")).toBeInTheDocument();
  });
@@ -124,7 +126,11 @@ describe("RoadmapReviewQueue", () => {
    fireEvent.click(screen.getByRole("button", { name: "Reject" }));

    await waitFor(() =>
-      expect(rejectItem).toHaveBeenCalledWith("cycle-1", "item-1", "not a priority"),
+      expect(rejectItem).toHaveBeenCalledWith(
+        "cycle-1",
+        "item-1",
+        "not a priority",
+      ),
    );
  });

@@ -1,11 +1,13 @@
 "use client";

+import { useEffect } from "react";
 import {
  useCeoOverview,
  useAuditorFlags,
  useRecentActivity,
 } from "@/hooks/use-dashboard";
 import { useTasks } from "@/hooks/use-tasks";
+import { usePageRefresh } from "@/hooks";
 import { TeamHealthCards } from "./team-health-cards";
 import { KeyMetricsPanel } from "./key-metrics-panel";
 import { AuditorAlertsPanel } from "./auditor-alerts-panel";
@@ -23,7 +25,7 @@ import type { Activity } from "./activity-item";
 import { Button } from "@/components/ui/button";
 import { UsageOverviewPanel } from "./usage-overview-panel";
 import { ScorecardOverviewPanel } from "./scorecard-overview-panel";
-import { RefreshCw, Settings, AlertCircle } from "lucide-react";
+import { Settings, AlertCircle } from "lucide-react";
 import Link from "next/link";

 export function CommandCenter() {
@@ -52,14 +54,37 @@ export function CommandCenter() {
    refetch: refetchActivity,
  } = useRecentActivity(24);

-  const hasError = errorOverview || errorFlags || errorTasks || errorActivity;
+  const { register, unregister } = usePageRefresh();

-  const handleRefresh = () => {
-    refetchOverview();
-    refetchFlags();
-    refetchTasks();
-    refetchActivity();
-  };
+  useEffect(() => {
+    const callbacks = [
+      () => {
+        void refetchOverview();
+      },
+      () => {
+        void refetchFlags();
+      },
+      () => {
+        void refetchTasks();
+      },
+      () => {
+        void refetchActivity();
+      },
+    ];
+    callbacks.forEach((cb) => register(cb));
+    return () => {
+      callbacks.forEach((cb) => unregister(cb));
+    };
+  }, [
+    register,
+    unregister,
+    refetchOverview,
+    refetchFlags,
+    refetchTasks,
+    refetchActivity,
+  ]);
+
+  const hasError = errorOverview || errorFlags || errorTasks || errorActivity;

  return (
    // flex-col + explicit `order` (reset via md:order-none): below md the CEO
@@ -78,10 +103,6 @@ export function CommandCenter() {
          </p>
        </div>
        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={handleRefresh}>
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Refresh
-          </Button>
          <Link href="/settings" prefetch={false}>
            <Button variant="ghost" size="icon">
              <Settings className="h-5 w-5" />
@@ -94,7 +115,7 @@ export function CommandCenter() {
      {hasError && (
        <div className="order-2 flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive md:order-none">
          <AlertCircle className="h-4 w-4 shrink-0" />
-          Some data failed to load. Click Refresh to try again.
+          Some data failed to load. Use the header refresh button to try again.
        </div>
      )}

@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { releaseApi } from "@/lib/api";
 import type { ReleaseExecuteResult } from "@/lib/api/release";
@@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { CheckCircle2, XCircle, Rocket, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
+import { usePageRefresh } from "@/hooks";

 const _MIN_REJECT_CHARS = 10;

@@ -56,6 +57,16 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
    refetchInterval: 30000,
  });

+  const { register, unregister } = usePageRefresh();
+
+  useEffect(() => {
+    const cb = () => {
+      void refetch();
+    };
+    register(cb);
+    return () => unregister(cb);
+  }, [register, unregister, refetch]);
+
  const approveMutation = useMutation({
    mutationFn: () => releaseApi.approve(),
    onSuccess: (result: ReleaseExecuteResult) => {
@@ -137,11 +148,6 @@ export function ReleaseProposalCard({ className }: { className?: string }) {
            {error instanceof Error ? `: ${error.message}` : ""}.
          </CardDescription>
        </CardHeader>
-        <CardContent>
-          <Button variant="outline" size="sm" onClick={() => refetch()}>
-            Retry
-          </Button>
-        </CardContent>
      </Card>
    );
  }
@@ -175,7 +175,10 @@ export function RoadmapReviewQueue({ className }: { className?: string }) {
      roadmapApi.approveItem(taskId, itemId),
    onSuccess: (result) => {
      invalidate();
-      if (result.status === "approved" || result.status === "already_approved") {
+      if (
+        result.status === "approved" ||
+        result.status === "already_approved"
+      ) {
        toast.success("Item approved — added to the backlog");
      } else {
        toast.warning(result.detail);
@@ -251,8 +254,8 @@ export function RoadmapReviewQueue({ className }: { className?: string }) {
          <DialogHeader>
            <DialogTitle>Reject roadmap item</DialogTitle>
            <DialogDescription>
-              This records your reason and feeds the next cycle&apos;s prompt
-              — it is not added to the backlog.
+              This records your reason and feeds the next cycle&apos;s prompt —
+              it is not added to the backlog.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">