Added some features :D, Codex limits are burned out by GPT 6 Astra D:

components/DraftEditor.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import { api } from "./StartGame";
 import type { DatasetManifest } from "@/shared/protocol";
@@ -7,6 +7,8 @@ import type { ProcessingJob } from "@/shared/processing-progress";
 import { ProcessingProgress } from "./ProcessingProgress";
 import { PanoramaPreview } from "./PanoramaPreview";
 import { OwnerContributions } from "./OwnerContributions";
+import Link from "next/link";
+import { MapRefresh } from "./MapRefresh";
 type Draft = {
   id: string;
   name: string;
@@ -25,6 +27,7 @@ type Draft = {
   update_state: string | null;
 };
 export function DraftEditor({ id }: { id: string }) {
+  const dirty = useRef(false);
   const [draft, setDraft] = useState<Draft | null>(null),
     [name, setName] = useState(""),
     [description, setDescription] = useState(""),
@@ -43,10 +46,15 @@ export function DraftEditor({ id }: { id: string }) {
           if (disposed) return;
           setError("");
           setDraft(d);
-          setName(d.name);
-          setDescription(d.description);
-          setSelected(d.manifest.viewpoints.map((p) => p.id));
-          if (["uploading", "processing"].includes(d.state))
+          if (!dirty.current) {
+            setName(d.name);
+            setDescription(d.description);
+            setSelected(d.manifest.viewpoints.map((p) => p.id));
+          }
+          if (
+            ["uploading", "processing"].includes(d.state) ||
+            ["queued", "running"].includes(d.upload_jobs?.state ?? "")
+          )
             timer = setTimeout(load, 5000);
         })
         .catch((e) => {
@@ -71,6 +79,7 @@ export function DraftEditor({ id }: { id: string }) {
         { name, description, selectedIds: selected },
         "PATCH",
       );
+      dirty.current = false;
       if (submit) {
         await api("datasets/" + id + "/submit", {});
         setVersion((v) => v + 1);
@@ -118,9 +127,17 @@ export function DraftEditor({ id }: { id: string }) {
     !["submitted", "accepted", "rejected"].includes(
       draft.contribution_status ?? "",
     );
+  const refreshing =
+    draft.upload_jobs?.kind === "map" &&
+    ["queued", "running"].includes(draft.upload_jobs.state);
   const minimum = draft.parent_dataset_id ? 1 : 5;
   return (
     <>
+      <div className="editor-navigation">
+        <Link href="/dashboard">← Your maps</Link>
+        <a href="#locations">Choose locations</a>
+        <a href="#map-tools">Map tools</a>
+      </div>
       <span className="badge">{draft.state}</span>
       {draft.update_state && (
         <span className="badge">Update: {draft.update_state}</span>
@@ -146,6 +163,19 @@ export function DraftEditor({ id }: { id: string }) {
         </p>
       )}
       <ProcessingProgress job={draft.upload_jobs} />
+      {draft.upload_jobs?.kind === "map" &&
+        draft.upload_jobs.state === "failed" && (
+          <p role="alert" className="error-message">
+            Map refresh failed: {draft.upload_jobs.error}. Your previous map is
+            still available. Try refreshing again below.
+          </p>
+        )}
+      {refreshing && (
+        <p role="status" className="success-message">
+          Refreshing your guessing map. This page updates automatically; the
+          published version stays playable.
+        </p>
+      )}
       {["uploading", "processing"].includes(draft.state) && (
         <p role="status" className="success-message">
           {draft.state === "uploading"
@@ -169,28 +199,38 @@ export function DraftEditor({ id }: { id: string }) {
             src={draft.map}
             width={1024}
             height={1024}
+            loading="eager"
             alt="Draft surface map"
             unoptimized
           />
         </div>
       )}
-      <label className="field">
-        Map name
-        <input
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          disabled={!editable}
-        />
-      </label>
-      <label className="field">
-        Description
-        <textarea
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          disabled={!editable}
-        />
-      </label>
-      <h2>Choose your locations.</h2>
+      <section className="editor-panel">
+        <h2>Map details</h2>
+        <label className="field">
+          Map name
+          <input
+            value={name}
+            onChange={(e) => {
+              dirty.current = true;
+              setName(e.target.value);
+            }}
+            disabled={!editable}
+          />
+        </label>
+        <label className="field">
+          Description
+          <textarea
+            value={description}
+            onChange={(e) => {
+              dirty.current = true;
+              setDescription(e.target.value);
+            }}
+            disabled={!editable}
+          />
+        </label>
+      </section>
+      <h2 id="locations">Choose your locations.</h2>
       <p className="muted">
         Keep at least {minimum} clear, useful panorama{minimum === 1 ? "" : "s"}
         . Selected: {selected.length} / 24
@@ -204,13 +244,14 @@ export function DraftEditor({ id }: { id: string }) {
                 checked={selected.includes(p.id)}
                 disabled={!editable || busy}
                 aria-label={`Keep ${p.label}`}
-                onChange={(e) =>
+                onChange={(e) => {
+                  dirty.current = true;
                   setSelected((s) =>
                     e.target.checked
                       ? [...s, p.id]
                       : s.filter((id) => id !== p.id),
-                  )
-                }
+                  );
+                }}
               />
               {p.image && (
                 <Image
@@ -242,14 +283,14 @@ export function DraftEditor({ id }: { id: string }) {
         <div className="inline-actions">
           <button
             className="button"
-            disabled={busy || selected.length < minimum}
+            disabled={busy || refreshing || selected.length < minimum}
             onClick={() => save()}
           >
             Save draft
           </button>
           <button
             className="button primary"
-            disabled={busy || selected.length < minimum}
+            disabled={busy || refreshing || selected.length < minimum}
             onClick={() => save(true)}
           >
             {draft.parent_dataset_id
@@ -258,12 +299,25 @@ export function DraftEditor({ id }: { id: string }) {
           </button>
         </div>
       )}
+      <div id="map-tools">
+        <MapRefresh
+          id={id}
+          disabled={busy || !editable || refreshing}
+          onQueued={() => {
+            setMessage(
+              "Map refresh queued. Keep this page open to follow progress.",
+            );
+            setVersion((v) => v + 1);
+          }}
+        />
+      </div>
       {!draft.parent_dataset_id && (
         <OwnerContributions
           id={id}
           allowed={draft.allow_contributions}
           serverAddress={draft.contribution_server_address}
           bounds={draft.manifest.bounds}
+          count={draft.previews.length}
           locked={draft.state === "review" || draft.update_state === "review"}
           onChange={() => setVersion((v) => v + 1)}
         />