Show generate icon for ungenerated segments

index.html

@@ -391,6 +391,14 @@ body {
 .ab-dl-one:hover { color: var(--text); border-color: var(--border-hover); }
 .ab-dl-one svg { width: 13px; height: 13px; }
 .ab-dl-one.busy { opacity: 0.5; pointer-events: none; }
+.ab-gen-one {
+  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--accent);
+  background: rgba(245,158,11,0.12); color: var(--accent); cursor: pointer; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+.ab-gen-one:hover { background: var(--accent); color: var(--btn-text); }
+.ab-gen-one svg { width: 14px; height: 14px; }
+.ab-gen-one.busy { opacity: 0.5; pointer-events: none; }
 .ab-join {
   position: absolute; left: 28px; bottom: -9px; z-index: 5;
   width: 20px; height: 18px; border-radius: 5px; border: 1px solid var(--border);
@@ -3794,24 +3802,7 @@ function renderAbRows() {
     para.addEventListener("keydown", (e) => abParaKeydown(e, i));
     para.addEventListener("paste", (e) => abParaPaste(e, i));
 
-    const side = document.createElement("div"); side.className = "ab-row-side";
-    const play = document.createElement("button");
-    play.type = "button"; play.className = "ab-play-one"; play.title = "Generate & play this line";
-    play.innerHTML = '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
-    play.onclick = () => abGenOne(i);
-    const dl = document.createElement("button");
-    dl.type = "button"; dl.className = "ab-dl-one"; dl.title = "Download this segment";
-    dl.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
-    dl.onclick = () => abDownloadOne(i);
-    const st = document.createElement("span");
-    st.className = "ab-row-status " + (s.status === "idle" ? "" : s.status);
-    st.textContent = s.status === "done" ? "✓" : s.status === "error" ? "✕" : s.status === "active" ? "…" : "";
-    const del = document.createElement("button");
-    del.type = "button"; del.className = "ab-row-del"; del.title = "Remove segment"; del.textContent = "✕";
-    del.onclick = () => abRemoveRow(i);
-    side.appendChild(play); side.appendChild(dl); side.appendChild(st); side.appendChild(del);
-
-    row.appendChild(chip); row.appendChild(para); row.appendChild(side);
+    row.appendChild(chip); row.appendChild(para); row.appendChild(buildRowSide(s, i));
     // "join with next" affordance between adjacent segments
     if (multi && i < abSegments.length - 1) {
       const join = document.createElement("button");
@@ -3826,12 +3817,42 @@ function renderAbRows() {
   abUpdateCounts();
 }
 
+const ICON_PLAY = '<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
+const ICON_DL = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>';
+const ICON_GEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 3l1.4 3.8L14.7 8l-3.8 1.2L9.5 13 8.1 9.2 4.3 8l3.8-1.2z"/><path d="M17.5 13l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4L14.2 16l2.4-.6z"/></svg>';
+
+function mkRowBtn(cls, title, html, onclick) {
+  const b = document.createElement("button");
+  b.type = "button"; b.className = cls; b.title = title; b.innerHTML = html;
+  b.onclick = onclick;
+  return b;
+}
+
+function buildRowSide(s, i) {
+  const side = document.createElement("div"); side.className = "ab-row-side";
+  if (s.status === "done" && s.url) {
+    side.appendChild(mkRowBtn("ab-play-one", "Play this segment", ICON_PLAY, () => abGenOne(i)));
+    side.appendChild(mkRowBtn("ab-dl-one", "Download this segment", ICON_DL, () => abDownloadOne(i)));
+  } else {
+    const gen = mkRowBtn("ab-gen-one", "Generate this segment", ICON_GEN, () => abGenOne(i));
+    if (s.status === "active") gen.classList.add("busy");
+    side.appendChild(gen);
+  }
+  const st = document.createElement("span");
+  st.className = "ab-row-status " + (s.status === "idle" ? "" : s.status);
+  st.textContent = s.status === "done" ? "✓" : s.status === "error" ? "✕" : s.status === "active" ? "…" : "";
+  side.appendChild(st);
+  side.appendChild(mkRowBtn("ab-row-del", "Remove segment", "", () => abRemoveRow(i)));
+  side.lastChild.textContent = "✕";
+  return side;
+}
+
 function abSetRowStatus(i, status) {
   const row = document.querySelector(`.ab-row[data-i="${i}"]`);
-  if (!row) return;
-  const st = row.querySelector(".ab-row-status");
-  st.className = "ab-row-status " + (status === "idle" ? "" : status);
-  st.textContent = status === "done" ? "✓" : status === "error" ? "✕" : status === "active" ? "…" : "";
+  if (!row || !abSegments[i]) return;
+  abSegments[i].status = status;
+  const oldSide = row.querySelector(".ab-row-side");
+  if (oldSide) row.replaceChild(buildRowSide(abSegments[i], i), oldSide);
 }
 
 function abParaKeydown(e, i) {
@@ -4000,7 +4021,7 @@ window.abGenOne = async function(i) {
   const s = abSegments[i];
   if (!s || !s.text.trim()) return;
   const row = document.querySelector(`.ab-row[data-i="${i}"]`);
-  const play = row?.querySelector(".ab-play-one");
+  const play = row?.querySelector(".ab-gen-one, .ab-play-one");
   play?.classList.add("busy");
   try {
     const url = await abEnsureGen(i);