@crowandraven/evalkeeper 0.3.0 → 0.4.0

package/templates/components/evalkeeper/RefreshWhile.tsx

@@ -1,9 +1,15 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useTransition } from "react";
 
-/** Refreshes the page every few seconds while something runs. */
+/**
+ * Refreshes the page every few seconds while something runs, waiting for
+ * each refresh to land before scheduling the next. A refresh on a timer
+ * cancels one still in flight, so when the page takes longer to render
+ * than the interval (the board against a remote database), no refresh ever
+ * lands and the page never updates (#25).
+ */
 export function RefreshWhile({
   active,
   ms = 2000,
@@ -12,14 +18,17 @@ export function RefreshWhile({
   ms?: number;
 }) {
   const router = useRouter();
+  const [refreshing, startTransition] = useTransition();
   useEffect(() => {
-    if (!active) return;
-    const t = setInterval(() => {
-      router.refresh();
+    if (!active || refreshing) return;
+    const t = setTimeout(() => {
+      startTransition(() => {
+        router.refresh();
+      });
     }, ms);
     return () => {
-      clearInterval(t);
+      clearTimeout(t);
     };
-  }, [active, ms, router]);
+  }, [active, refreshing, ms, router]);
   return null;
 }

package/templates/components/evalkeeper/RollBack.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { rollBackSettings } from "@/lib/evalkeeper/actions";
+import { Submit } from "./Submit";
+import { Tip } from "./Tip";
+
+/**
+ * Rolls a feature back to an earlier version. The button stays off until
+ * there's a note saying why: the note is kept with the version, for
+ * whoever reads the history next.
+ */
+export function RollBack({
+  suite,
+  versionId,
+  number,
+}: {
+  suite: string;
+  versionId: string;
+  number: number;
+}) {
+  const [reason, setReason] = useState("");
+  const missing = reason.trim() === "";
+  const button = (
+    <Submit variant="quiet" disabled={missing}>
+      Roll back to v{number}
+    </Submit>
+  );
+  return (
+    <form
+      action={rollBackSettings}
+      className="flex flex-wrap items-center gap-2"
+    >
+      <input type="hidden" name="suite" value={suite} />
+      <input type="hidden" name="version" value={versionId} />
+      <label htmlFor={`why-${versionId}`} className="sr-only">
+        Why roll back to v{number}?
+      </label>
+      <input
+        id={`why-${versionId}`}
+        name="reason"
+        required
+        value={reason}
+        onChange={(e) => {
+          setReason(e.target.value);
+        }}
+        placeholder="Why roll back?"
+        className="rounded-md border border-line bg-card px-2 py-1 text-xs focus:border-accent focus:outline-none"
+      />
+      {missing ? (
+        <Tip
+          text="Say why you're rolling back first. The note is kept with the version, for whoever reads the history next."
+          id={`rollback-${versionId}`}
+        >
+          {button}
+        </Tip>
+      ) : (
+        button
+      )}
+    </form>
+  );
+}

package/templates/components/evalkeeper/SettingsHistory.tsx

@@ -5,8 +5,7 @@ import {
   type HistoryEntry,
   type Settings,
 } from "@crowandraven/evalkeeper";
-import { rollBackSettings } from "@/lib/evalkeeper/actions";
-import { Submit } from "./Submit";
+import { RollBack } from "./RollBack";
 import { InfoTip, Tip } from "./Tip";
 import { Chip } from "./ui";
 import { evalsPath } from "@/lib/evalkeeper/paths";
@@ -163,24 +162,11 @@ export function HistoryEntries({
                 </Link>
               )}
               {!isLive && (
-                <form
-                  action={rollBackSettings}
-                  className="flex flex-wrap items-center gap-2"
-                >
-                  <input type="hidden" name="suite" value={suite} />
-                  <input type="hidden" name="version" value={e.to.id} />
-                  <label htmlFor={`why-${e.id}`} className="sr-only">
-                    Why roll back to v{e.to.number}?
-                  </label>
-                  <input
-                    id={`why-${e.id}`}
-                    name="reason"
-                    required
-                    placeholder="Why roll back?"
-                    className="rounded-md border border-line bg-card px-2 py-1 text-xs focus:border-accent focus:outline-none"
-                  />
-                  <Submit variant="quiet">Roll back to v{e.to.number}</Submit>
-                </form>
+                <RollBack
+                  suite={suite}
+                  versionId={e.to.id}
+                  number={e.to.number}
+                />
               )}
             </div>
           </article>

package/templates/components/evalkeeper/Submit.tsx

@@ -3,23 +3,32 @@
 import { LoaderCircle } from "lucide-react";
 import { useFormStatus } from "react-dom";
 
+/**
+ * A button that isn't the page's main action: the app's accent as an
+ * outline, so it still reads as a button in the app's colors (set
+ * `--accent` in evalkeeper.css).
+ */
+export const QUIET_BUTTON =
+  "border border-accent/40 bg-card text-accent hover:bg-accent/10";
+
 /** A submit button that spins while its form's action runs. */
 export function Submit({
   children,
   variant = "primary",
+  disabled = false,
 }: {
   children: React.ReactNode;
   variant?: "primary" | "quiet";
+  /** Off until the form is ready; wrap it in a `<Tip>` saying why. */
+  disabled?: boolean;
 }) {
   const { pending } = useFormStatus();
   return (
     <button
       type="submit"
-      disabled={pending}
+      disabled={pending || disabled}
       className={`inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-1.5 text-sm disabled:opacity-60 ${
-        variant === "primary"
-          ? "bg-accent text-white"
-          : "border border-line bg-card text-ink hover:bg-tint"
+        variant === "primary" ? "bg-accent text-white" : QUIET_BUTTON
       }`}
     >
       {pending && <Spinner />}