Show generated-with prompt on timeline clips, not toolbar

Move the previous-prompt hint from the rating toolbar onto rendered
clips that have a prompt mismatch. Clips get an amber border and a
Generated with line under the current scene text.
This commit is contained in:
digital-garbage
2026-06-10 18:01:50 +03:00
parent 323ad76c0f
commit fef748afe7
2 changed files with 28 additions and 13 deletions
+15 -7
View File
@@ -503,13 +503,6 @@ input[type=number] { font-family: var(--font-mono); }
.tl-zlabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.tl-keys { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; color: var(--faint); margin-right: 10px; opacity: .8; }
.tl-rating { font-size: 12px; padding: 3px 6px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; color: var(--amber-2); max-width: 200px; }
.tl-render-prompt {
font-family: var(--font-mono); font-size: 10px; color: var(--amber-2); opacity: .9;
max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); border-radius: 6px; padding: 3px 7px;
background: color-mix(in srgb, var(--amber-soft) 35%, var(--ink-2));
}
.render-prompt-warn {
border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
background: color-mix(in srgb, var(--amber-soft) 25%, var(--ink-1));
@@ -629,6 +622,21 @@ body.tl-reordering { cursor: grabbing; user-select: none; }
.clip-rated { font-size: 10px; font-family: var(--font-mono); color: var(--amber-2); line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.clip.has-media .clip-rated { position: relative; z-index: 1; }
.clip-gen-prompt {
font-size: 10px; line-height: 1.25; flex-shrink: 0; min-height: 0;
border-top: 1px solid color-mix(in srgb, var(--amber) 25%, var(--line));
padding-top: 3px; margin-top: 1px;
}
.clip-gen-prompt-label {
display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .4px;
text-transform: uppercase; color: var(--faint); margin-bottom: 1px;
}
.clip-gen-prompt-text {
color: var(--amber-2); overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.clip.has-media .clip-gen-prompt { position: relative; z-index: 1; }
.clip.prompt-mismatch { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.clip-actions { position: absolute; top: 5px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.clip:hover .clip-actions { opacity: 1; }
.ic-btn { width: 18px; height: 18px; padding: 0; font-size: 11px; line-height: 1; border: 1px solid var(--line);
+13 -6
View File
@@ -277,6 +277,18 @@
clip.append(rated);
}
if (hasRender(st, scene.id) && S.renderPromptMismatch) {
const mismatch = S.renderPromptMismatch(scene.id);
if (mismatch) {
clip.classList.add("prompt-mismatch");
const gen = el("div", "clip-gen-prompt");
gen.title = "Timeline prompt was edited after generation — rate against this text";
gen.append(el("span", "clip-gen-prompt-label", "Generated with"));
gen.append(el("span", "clip-gen-prompt-text", mismatch.rendered || "(empty)"));
clip.append(gen);
}
}
const actions = el("div", "clip-actions");
const mk = (label, title, cls, fn) => { const b = el("button", "ic-btn" + (cls ? " " + cls : ""), label); b.title = title; b.onclick = (e) => { e.stopPropagation(); fn(); }; return b; };
actions.append(mk("⟈", "Split clip at playhead", "", () => {
@@ -553,17 +565,12 @@
const rlabel = el("span", "tl-keys", `★ Scene ${sceneNo}`);
const rsel = el("select", "tl-rating");
rsel.title = mismatch
? `Rate against the generated prompt — timeline text was edited after this render`
? `Rate against the generated prompt on the clip — timeline text was edited after this render`
: "Rate this scene's render — FunPack Studio refines from it next generation";
rsel.append(new Option("— rate —", ""));
(st.ratingLabels || []).forEach((l) => { const o = new Option(l, l); if (l === (sc.rating || "")) o.selected = true; rsel.append(o); });
rsel.onchange = () => S.setSceneRating(sc.id, rsel.value);
bar.append(rlabel); bar.append(rsel);
if (mismatch) {
const hint = el("span", "tl-render-prompt", mismatch.rendered);
hint.title = "Generated with this prompt — use it when rating (timeline text differs)";
bar.append(hint);
}
}
const spacer = el("div", "tl-spacer"); bar.append(spacer);