ui: three explicit construct paths + Save gating + visible AI drafts

PI test feedback (2026-08-07):
- Step 2 hint enumerates the three acquisition paths; two buttons next to
the picker ('+ Your own items', 'Draft with AI') replace the generic
'+ Custom construct'
- Save construct is disabled until name + items exist, with an inline
line saying what's missing (the silent dead-click read as broken - the
error banner sits at the top of the page, out of view)
- After drafting, scroll/focus the items box and say 'N items drafted -
they're in the box below' (drafts landed off-screen unnoticed)
- /guide and MANUAL_TESTING.md updated to the new button names

MANUAL_TESTING.md

@@ -72,14 +72,14 @@ with a "Sign in (top right)" message. Sign in and retry: accepted.
 
 ### Custom construct, typed
 
-1. "+ Custom construct" > name it, paste items one per line.
+1. "+ Your own items" > name it, paste items one per line ("Type or paste" tab).
 2. Append `(R)` to one line: the form shows "1 item(s) marked reverse-scored".
 3. Save: it appears in the picker under "My custom constructs"; run metadata
    will carry the reverse flag (check via Results > metadata download).
 
 ### Custom construct, from file (new)
 
-1. "+ Custom construct" > "Upload items from CSV/XLSX".
+1. "+ Your own items" > the "Upload CSV/XLSX" tab.
 2. Try a CSV with `item,reverse` columns (1/true/yes/R = reverse) or a
    single-column file with `(R)` markers.
 3. Expect: items fill the textarea ((R) appended where flagged), the filename
@@ -94,7 +94,7 @@ Needs a generation key on the instance (`GROQ_API_KEY` or `ANTHROPIC_API_KEY`);
 without one the "Draft with AI" tab is hidden entirely. Signed-in only, 20/day
 (tune locally with `CCR_USER_MAX_GENERATIONS_PER_DAY=2` to test the cap fast).
 
-1. Happy path: sign in > "+ Custom construct" > "Draft with AI" tab. Enter a
+1. Happy path: sign in > "✦ Draft with AI" (next to the picker). Enter a
    name + a 1-2 sentence description, press "Draft items". Expect ~10
    first-person, positively-worded items in the textarea (no (R) items - by
    design), a "N of 20 used today" counter, the amber "AI-generated · not
@@ -261,3 +261,13 @@ documented at /product.
 5. Verification: mark a scale Verified; its "unverified" flag disappears
    platform-wide. Statuses are applied back to the library YAML before
    production.
+
+### Step 2 layout + Save gating (PI feedback 2026-08-07)
+
+1. The Step 2 hint enumerates the three paths (library / own items / AI);
+   two buttons sit next to the picker: "+ Your own items" and "✦ Draft with
+   AI" (the AI one only when a generation key is configured).
+2. Save is DISABLED until the form has a name and at least one item; a line
+   under the button says what's missing. No more silent dead click.
+3. After "Draft items", the page scrolls to the items box, and the notice
+   reads "N items drafted - they're in the box below."

backend/app/guide.html

@@ -156,7 +156,7 @@ synthetic, written for this kit; no real participant data anywhere.</p>
       (IDs, conditions, demographics) are fine; they pass through untouched into the
       results file.</li>
   <li><b>Pick your construct(s)</b> - search the library (94 scales from the lab's
-      collection) or click "+ Custom construct" and paste or upload your own items.
+      collection), click "+ Your own items" to type or upload a scale, or "✦ Draft with AI" to generate items for a construct with no validated questionnaire.
       Pick several (up to 10) to score them together in a single run and see how
       they correlate in your texts.</li>
   <li><b>Run.</b> Read the warnings panel first (it tells you if something about your
@@ -284,7 +284,7 @@ are deleted after analysis. Upload
 
 <h3>Custom construct, typed</h3>
 <ol>
-  <li>"+ Custom construct" &gt; name it, paste items one per line.</li>
+  <li>"+ Your own items" &gt; name it, paste items one per line ("Type or paste" tab).</li>
   <li>Append <code>(R)</code> to one line: the form shows "1 item(s) marked reverse-scored".</li>
   <li>Save: it appears in the picker under "My custom constructs"; run metadata carries
       the reverse flag (check via Results &gt; metadata download).</li>
@@ -292,7 +292,7 @@ are deleted after analysis. Upload
 
 <h3>Custom construct, from file</h3>
 <ol>
-  <li>"+ Custom construct" &gt; the "Upload CSV/XLSX" tab.</li>
+  <li>"+ Your own items" &gt; the "Upload CSV/XLSX" tab.</li>
   <li>Try <a href="/samples/construct_items_demo.csv" download>construct_items_demo.csv</a>
       (<code>item,reverse</code> columns - 1/true/yes/R = reverse),
       <a href="/samples/construct_items_marker_demo.csv" download>construct_items_marker_demo.csv</a>
@@ -310,7 +310,7 @@ point, <b>not</b> a validated scale - you review, edit, and delete before saving
 everything the construct touches is labeled "AI-generated · not validated".
 Signed-in users only, 20 drafts/day.</p>
 <ol>
-  <li><b>Happy path:</b> sign in &gt; "+ Custom construct" &gt; the "Draft with AI"
+  <li><b>Happy path:</b> sign in &gt; "✦ Draft with AI" (next to the picker) &gt; the "Draft with AI"
       tab. Name: <code>Digital overwhelm</code>. Description: <i>"Feeling that
       screens, notifications, and online demands exceed one's capacity to keep
       up."</i> Press "Draft items". Expect in a few seconds: ~10 first-person,

backend/static/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/ccr-logo.svg" />
     <title>CCR Platform - Contextualized Construct Representations</title>
-    <script type="module" crossorigin src="/assets/index-BJ_J7JUi.js"></script>
+    <script type="module" crossorigin src="/assets/index-T4JgSqf6.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Ckv10U9Q.css">
   </head>
   <body>

frontend/src/Workspace.jsx

@@ -18,7 +18,10 @@ export default function Workspace({ project, auth, onAuthRefresh, onProjectChang
   const [uploading, setUploading] = useState(false);
   const [running, setRunning] = useState(false);
   const [error, setError] = useState("");
-  const [showNewConstruct, setShowNewConstruct] = useState(false);
+  // Custom-construct form: null = closed, else the item source it opens on
+  // ("type" | "upload" | "ai"). Lifted here so the Step 2 card can expose the
+  // three acquisition paths as explicit buttons (PI feedback 2026-08-07).
+  const [constructFormTab, setConstructFormTab] = useState(null);
   const [viewJobId, setViewJobId] = useState(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleteText, setDeleteText] = useState("");
@@ -303,10 +306,12 @@ export default function Workspace({ project, auth, onAuthRefresh, onProjectChang
           <span className="step-badge">2</span>Construct
         </h3>
         <p className="hint">
-          Pick one or more validated scales from the library, or define custom items. CCR
-          scores each text by its similarity to the items. Selecting several constructs
-          runs them together on one pass over your corpus and adds a score-correlation
-          view of how they interrelate in your texts (up to 10 per run).
+          Three ways to add a construct: <b>1)</b> pick validated scales from our
+          library of {constructs.filter((c) => c.is_seed).length || "90+"} questionnaires,{" "}
+          <b>2)</b> type or upload your own items, or <b>3)</b> draft items with AI from
+          a name and description (when no validated scale exists). CCR scores each text
+          by its similarity to the items; selecting several constructs runs them
+          together on one pass and adds a score-correlation view (up to 10 per run).
         </p>
         <div className="construct-row">
           <div className="grow">
@@ -316,9 +321,22 @@ export default function Workspace({ project, auth, onAuthRefresh, onProjectChang
               onToggle={toggleConstruct}
             />
           </div>
-          <button className="ghost" onClick={() => setShowNewConstruct((s) => !s)}>
-            {showNewConstruct ? "Close" : "+ Custom construct"}
+          <button
+            className={"ghost" + (constructFormTab && constructFormTab !== "ai" ? " seg-active" : "")}
+            onClick={() =>
+              setConstructFormTab((t) => (t && t !== "ai" ? null : "type"))
+            }
+          >
+            {constructFormTab && constructFormTab !== "ai" ? "Close" : "+ Your own items"}
           </button>
+          {auth?.generation_available && (
+            <button
+              className={"ghost" + (constructFormTab === "ai" ? " seg-active" : "")}
+              onClick={() => setConstructFormTab((t) => (t === "ai" ? null : "ai"))}
+            >
+              {constructFormTab === "ai" ? "Close" : "✦ Draft with AI"}
+            </button>
+          )}
         </div>
 
         {selectedConstructs.map((c) => (
@@ -373,15 +391,17 @@ export default function Workspace({ project, auth, onAuthRefresh, onProjectChang
           </details>
         ))}
 
-        {showNewConstruct && (
+        {constructFormTab && (
           <NewConstructForm
             auth={auth}
             constructs={constructs}
+            source={constructFormTab}
+            onSourceChange={setConstructFormTab}
             onCreated={async (created) => {
               const list = await api.listConstructs();
               setConstructs(list);
               toggleConstruct(created.id);
-              setShowNewConstruct(false);
+              setConstructFormTab(null);
             }}
             onError={setError}
           />
@@ -512,7 +532,7 @@ export default function Workspace({ project, auth, onAuthRefresh, onProjectChang
 
 const REVERSE_SUFFIX = /\s*\((r|rev|reversed)\)\s*$/i;
 
-function NewConstructForm({ auth, constructs, onCreated, onError }) {
+function NewConstructForm({ auth, constructs, source, onSourceChange, onCreated, onError }) {
   const [name, setName] = useState("");
   const [reference, setReference] = useState("");
   const [description, setDescription] = useState("");
@@ -520,9 +540,6 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
   const [saving, setSaving] = useState(false);
   const [parsing, setParsing] = useState(false);
   const [parseNotes, setParseNotes] = useState([]);
-  // Item source chooser: "type" | "upload" | "ai" - one source's controls
-  // visible at a time (the flat everything-stacked form read as clutter).
-  const [source, setSource] = useState("type");
   // AI drafting (ITEM_GENERATION.md): genInfo is the provenance stamp echoed
   // back on save; it survives manual edits (the seed was AI) but is cleared
   // when items come from a file upload instead.
@@ -532,6 +549,8 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
   const [genNotes, setGenNotes] = useState("");
   const [genUsage, setGenUsage] = useState(null);
   const itemFileRef = useRef(null);
+  const itemsRef = useRef(null);
+  const setSource = onSourceChange;
 
   // Simple library name-match (v1 guardrail, PI-approved): if a validated
   // scale with a similar name exists, say so before anyone generates.
@@ -563,12 +582,19 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
         n_items: nItems,
       });
       setItemsText(resp.items.join("\n"));
-      setGenInfo(resp.generation);
+      setGenInfo({ ...resp.generation, n: resp.items.length });
       setGenNotes(resp.notes || "");
       setGenUsage({
         used: resp.generations_used_today,
         max: resp.max_generations_per_day,
       });
+      // The drafted items land in the textarea below the controls - scroll
+      // there so it's obvious they arrived (PI feedback: "how can they see
+      // all 10 items generated under the hood?").
+      setTimeout(() => {
+        itemsRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+        itemsRef.current?.focus({ preventScroll: true });
+      }, 50);
     } catch (err) {
       onError(err.message);
     } finally {
@@ -628,7 +654,14 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
         description: description.trim(),
         items: parsed.map((i) => i.text),
         reverse_scored: parsed.map((i) => i.reverse),
-        generation: genInfo || undefined, // provenance stamp when AI-drafted
+        // provenance stamp when AI-drafted (schema fields only)
+        generation: genInfo
+          ? {
+              model: genInfo.model,
+              prompt_version: genInfo.prompt_version,
+              generated_at: genInfo.generated_at,
+            }
+          : undefined,
       });
       onCreated(created);
     } catch (err) {
@@ -759,9 +792,10 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
             </p>
           )}
           {genInfo && (
-            <p className="small muted">
-              ⚠ AI-generated · not validated - drafted by {genInfo.model}. Review and
-              edit below before saving; the construct will be labeled as AI-generated.
+            <p className="small">
+              ✓ <b>{genInfo.n} items drafted — they're in the box below.</b> Review and
+              edit each one, then Save. AI-generated · not validated (model:{" "}
+              {genInfo.model}); the saved construct will carry that label.
             </p>
           )}
           {genNotes && <p className="small muted">Model notes: {genNotes}</p>}
@@ -771,14 +805,37 @@ function NewConstructForm({ auth, constructs, onCreated, onError }) {
       <label className="field">
         Items - one per line{source === "type" ? " (or paste a whole scale)" : ""};
         append (R) to mark a reverse-scored item
-        <textarea rows={6} value={itemsText} onChange={(e) => setItemsText(e.target.value)} />
+        <textarea
+          ref={itemsRef}
+          rows={6}
+          value={itemsText}
+          onChange={(e) => setItemsText(e.target.value)}
+        />
       </label>
       {nReverse > 0 && (
         <p className="small muted">{nReverse} item(s) marked reverse-scored.</p>
       )}
-      <button className="primary" type="submit" disabled={saving || parsing}>
+      {/* Save stays disabled until it can actually succeed - a clickable
+          button that silently fails read as broken (PI feedback 2026-08-07;
+          the error banner sits at the top of the page, out of view here). */}
+      <button
+        className="primary"
+        type="submit"
+        disabled={saving || parsing || !name.trim() || parseLines().length === 0}
+      >
         {saving ? "Saving…" : "Save construct"}
       </button>
+      {(!name.trim() || parseLines().length === 0) && (
+        <p className="small muted">
+          To save, this construct still needs
+          {!name.trim() ? " a name" : ""}
+          {!name.trim() && parseLines().length === 0 ? " and" : ""}
+          {parseLines().length === 0
+            ? " at least one item - type items above, upload a file, or draft with AI"
+            : ""}
+          .
+        </p>
+      )}
     </form>
   );
 }