@writepanda/mcp 1.251.0 → 1.262.0

package/bin/apps/clips.mjs

@@ -0,0 +1,401 @@
+// Clips picker view (ui://pandastudio/clips.html): a clip set from clips_make
+// / clips_get as a grid of cards (still, title, hook, score, length) with
+// Open, Export and Remove on each. Follows a set that is still being made.
+
+import { viewPage } from "./viewKit.mjs";
+
+export const CLIPS_URI = "ui://pandastudio/clips.html";
+
+const CSS = `
+.head { margin-bottom: 12px; }
+.status { margin-top: 8px; }
+.status .bar { margin-top: 6px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card, 168px), 1fr)); gap: 12px; }
+.card { border: 1px solid var(--line2); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg);
+	display: flex; flex-direction: column; min-width: 0; }
+.thumb { position: relative; background: #000; aspect-ratio: var(--ar, 9 / 16); overflow: hidden; }
+.thumb img, .thumb .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
+.thumb .badge { position: absolute; top: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
+	background: rgba(0, 0, 0, 0.62); color: #fff; font-variant-numeric: tabular-nums; }
+.thumb .score { left: 6px; }
+.thumb .score.hi { background: #16a34a; }
+.thumb .score.mid { background: #ca8a04; }
+.thumb .len { right: 6px; }
+.thumb .rank { position: absolute; left: 6px; bottom: 6px; font-size: 11px; color: #fff; opacity: 0.85; }
+.thumb .over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+	background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; text-align: center; padding: 10px; }
+.thumb .done { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px;
+	border-radius: 999px; background: rgba(22, 163, 74, 0.92); color: #fff; }
+.body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
+.hook { font-size: 12.5px; color: var(--fg2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+	overflow: hidden; }
+.acts { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
+.acts .btn { padding: 4px 8px; font-size: 12px; }
+.confirm { display: flex; gap: 4px; align-items: center; font-size: 12px; flex-wrap: wrap; }
+.empty { padding: 26px 8px; text-align: center; color: var(--fg2); }
+`;
+
+/** Runs in the view. Self-contained: serialized into the page. */
+function main(kit, ui) {
+	const { h, duration, actionButton, toast } = ui;
+	const app = document.getElementById("app");
+	const RUNNING = ["importing", "transcribing", "finding", "building"];
+	const view = {
+		setId: null,
+		set: null,
+		images: new Map(), // `${path}#${mediaVersion}` -> data URL | null
+		exporting: new Map(), // clipId -> "running" | "done" | error text
+		confirming: null, // clipId awaiting a Remove confirmation
+		pollTimer: 0,
+		pollStarted: 0,
+		loadError: null,
+	};
+
+	const imageKey = (c) => `${c.thumbPath}#${c.mediaVersion ?? 0}`;
+	const isRunning = (set) =>
+		RUNNING.includes(set?.status) ||
+		(set?.clips ?? []).some((c) => c.status === "building" || c.status === "pending");
+	const exported = (c) => (c.exports?.length ?? 0) > 0 || !!c.exportedPath;
+
+	async function refresh() {
+		if (!view.setId) return;
+		try {
+			const { data } = await kit.callTool("clips_get", { id: view.setId });
+			view.set = data;
+			view.loadError = null;
+		} catch (err) {
+			view.loadError = err?.message ?? String(err);
+		}
+		render();
+		await loadThumbs();
+		schedulePoll();
+	}
+
+	async function loadThumbs() {
+		const missing = (view.set?.clips ?? []).filter(
+			(c) => c.status === "ready" && c.thumbPath && !view.images.has(imageKey(c)),
+		);
+		if (!missing.length) return;
+		try {
+			const loaded = await kit.loadImages(missing.map((c) => c.thumbPath));
+			for (const c of missing) view.images.set(imageKey(c), loaded.get(c.thumbPath) ?? null);
+		} catch {
+			for (const c of missing) view.images.set(imageKey(c), null);
+		}
+		render();
+	}
+
+	function schedulePoll() {
+		clearTimeout(view.pollTimer);
+		if (!isRunning(view.set)) return;
+		if (!view.pollStarted) view.pollStarted = Date.now();
+		// Follow a running set for up to three hours, slower once it's long.
+		const age = Date.now() - view.pollStarted;
+		if (age > 3 * 3600_000) return;
+		view.pollTimer = setTimeout(
+			() => {
+				if (document.hidden) schedulePoll();
+				else refresh();
+			},
+			age > 10 * 60_000 ? 10_000 : 3_000,
+		);
+	}
+
+	async function waitForJob(jobId) {
+		for (let i = 0; i < 2400; i++) {
+			const { data } = await kit.callTool("job_get", { id: jobId });
+			const job = data?.job ?? data;
+			if (job?.status === "succeeded") return job.result;
+			if (job?.status === "failed" || job?.status === "canceled")
+				throw new Error(job.error ?? `Export ${job.status}`);
+			await new Promise((r) => setTimeout(r, 1500));
+		}
+		throw new Error("The export is still running; check My Exports in PandaStudio.");
+	}
+
+	async function exportClips(clipIds) {
+		for (const id of clipIds) view.exporting.set(id, "running");
+		render();
+		try {
+			const { data } = await kit.callTool("clips_export", { id: view.setId, clipIds });
+			await waitForJob(data.jobId);
+			for (const id of clipIds) view.exporting.set(id, "done");
+			const titles = clipIds
+				.map((id) => view.set?.clips?.find((c) => c.id === id)?.title)
+				.filter(Boolean);
+			toast(clipIds.length === 1 ? "Exported" : `Exported ${clipIds.length} clips`);
+			kit.updateModelContext(
+				`In the PandaStudio clips view the user exported ${titles.map((t) => `"${t}"`).join(", ")} from clip set ${view.setId} to ${data.outputDir}.`,
+			);
+		} catch (err) {
+			for (const id of clipIds) view.exporting.set(id, err?.message ?? String(err));
+			throw err;
+		} finally {
+			await refresh();
+		}
+	}
+
+	async function removeClip(clip) {
+		await kit.callTool("clips_remove_clip", { id: view.setId, clipId: clip.id });
+		view.confirming = null;
+		toast(`Removed "${clip.title}"`);
+		kit.updateModelContext(
+			`In the PandaStudio clips view the user removed the clip "${clip.title}" (${clip.id}) from clip set ${view.setId}; its project went to the Trash.`,
+		);
+		await refresh();
+	}
+
+	function statusBlock(set) {
+		if (set.status === "error" || set.status === "cancelled") {
+			return h(
+				"div",
+				{ class: "status" },
+				h(
+					"div",
+					{ class: "error small" },
+					set.error ?? (set.status === "cancelled" ? "Stopped." : "Clip making failed."),
+				),
+				h(
+					"div",
+					{ class: "row", style: { marginTop: "8px" } },
+					actionButton(
+						"Try again",
+						async () => {
+							await kit.callTool("clips_retry", { id: view.setId });
+							view.pollStarted = 0;
+							await refresh();
+						},
+						{ primary: true, busy: "Starting…" },
+					),
+				),
+			);
+		}
+		if (RUNNING.includes(set.status)) {
+			const pct = Math.max(2, Math.min(100, Math.round(set.stage?.percent ?? 0)));
+			const eta = set.transcription?.etaMs
+				? ` · about ${duration(set.transcription.etaMs)} left`
+				: "";
+			return h(
+				"div",
+				{ class: "status" },
+				h("div", { class: "small muted" }, `${set.stage?.message ?? set.status}${eta}`),
+				h("div", { class: "bar" }, h("div", { style: { width: `${pct}%` } })),
+			);
+		}
+		return null;
+	}
+
+	function card(c, rank) {
+		const src = view.images.get(imageKey(c));
+		const exp = view.exporting.get(c.id);
+		const ready = c.status === "ready";
+		const scoreClass = c.score >= 80 ? "score hi" : c.score >= 60 ? "score mid" : "score";
+		let over = null;
+		if (c.status === "building" || c.status === "pending")
+			over = h("div", { class: "over" }, c.status === "building" ? "Building…" : "Waiting…");
+		else if (c.status === "error")
+			over = h("div", { class: "over" }, c.error ?? "Couldn't build this clip");
+		else if (exp === "running") over = h("div", { class: "over" }, "Exporting…");
+
+		const acts =
+			view.confirming === c.id
+				? h(
+						"div",
+						{ class: "confirm" },
+						h("span", null, "Remove this clip?"),
+						actionButton("Remove", () => removeClip(c), { busy: "Removing…" }),
+						h(
+							"button",
+							{
+								class: "btn ghost",
+								type: "button",
+								onclick: () => {
+									view.confirming = null;
+									render();
+								},
+							},
+							"Cancel",
+						),
+					)
+				: h(
+						"div",
+						{ class: "acts" },
+						ready && c.projectPath
+							? actionButton(
+									"Open",
+									async () => {
+										await kit.callTool("preview_show", { path: c.projectPath });
+										toast("Opened in PandaStudio");
+									},
+									{ busy: "Opening…", title: "Open this clip in the PandaStudio editor" },
+								)
+							: null,
+						ready && exp !== "running"
+							? actionButton(exported(c) ? "Export again" : "Export", () => exportClips([c.id]), {
+									busy: "Exporting…",
+								})
+							: null,
+						h(
+							"button",
+							{
+								class: "btn ghost danger",
+								type: "button",
+								title: "Remove this clip from the set",
+								onclick: () => {
+									view.confirming = c.id;
+									render();
+								},
+							},
+							"Remove",
+						),
+					);
+
+		return h(
+			"div",
+			{ class: "card" },
+			h(
+				"div",
+				{ class: "thumb" },
+				src
+					? h("img", { src, alt: c.title })
+					: h("div", { class: ready && !view.images.has(imageKey(c)) ? "ph skeleton" : "ph" }),
+				typeof c.score === "number"
+					? h("span", { class: `badge ${scoreClass}`, title: "Hook score" }, c.score)
+					: null,
+				h("span", { class: "badge len" }, duration(c.endMs - c.startMs)),
+				h("span", { class: "rank" }, `#${rank}`),
+				exported(c) && exp !== "running" ? h("span", { class: "done" }, "Exported") : null,
+				over,
+			),
+			h(
+				"div",
+				{ class: "body" },
+				h("div", { class: "title" }, c.title || "Untitled clip"),
+				c.hook ? h("div", { class: "hook" }, `"${c.hook}"`) : null,
+				typeof exp === "string" && exp !== "running" && exp !== "done"
+					? h("div", { class: "small error" }, exp)
+					: null,
+				acts,
+			),
+		);
+	}
+
+	function render() {
+		const set = view.set;
+		if (!set) {
+			app.replaceChildren(
+				h("div", { class: "brand" }, h("i"), "PandaStudio clips"),
+				view.loadError
+					? h("p", { class: "error" }, view.loadError)
+					: h("p", { class: "muted" }, "Loading clips…"),
+			);
+			return;
+		}
+		const fmt = set.options?.format ?? "9:16";
+		const [w, hh] = fmt.split(":");
+		document.documentElement.style.setProperty("--ar", `${w} / ${hh}`);
+		document.documentElement.style.setProperty(
+			"--card",
+			fmt === "16:9" ? "240px" : fmt === "1:1" ? "190px" : "160px",
+		);
+		const clips = set.clips ?? [];
+		const readyIds = clips.filter((c) => c.status === "ready").map((c) => c.id);
+		const notExported = clips
+			.filter((c) => c.status === "ready" && !exported(c) && view.exporting.get(c.id) !== "running")
+			.map((c) => c.id);
+		const sub = [
+			`${readyIds.length} of ${clips.length} clip${clips.length === 1 ? "" : "s"} ready`,
+			fmt,
+			set.durationMs ? `from a ${duration(set.durationMs)} video` : null,
+			set.usedModel === false ? "picked from the transcript" : null,
+		].filter(Boolean);
+		app.replaceChildren(
+			h(
+				"div",
+				{ class: "head" },
+				h(
+					"div",
+					{ class: "row spread wrap" },
+					h("div", { class: "brand" }, h("i"), "PandaStudio clips"),
+					readyIds.length
+						? h(
+								"div",
+								{ class: "row" },
+								notExported.length
+									? actionButton(
+											notExported.length === readyIds.length
+												? `Export all ${readyIds.length}`
+												: `Export ${notExported.length} new`,
+											() => exportClips(notExported),
+											{ primary: true, busy: "Exporting…" },
+										)
+									: h("span", { class: "chip" }, "All exported"),
+								kit.canFullscreen()
+									? actionButton(
+											kit.state.hostContext.displayMode === "fullscreen"
+												? "Exit full screen"
+												: "Full screen",
+											() =>
+												kit.requestDisplayMode(
+													kit.state.hostContext.displayMode === "fullscreen"
+														? "inline"
+														: "fullscreen",
+												),
+										)
+									: null,
+							)
+						: null,
+				),
+				h("h1", { style: { marginTop: "4px" } }, set.title || set.name || "Clips"),
+				h("div", { class: "small muted" }, sub.join(" · ")),
+				statusBlock(set),
+				view.loadError ? h("div", { class: "small error" }, view.loadError) : null,
+			),
+			clips.length
+				? h(
+						"div",
+						{ class: "grid" },
+						clips.map((c, i) => card(c, i + 1)),
+					)
+				: h(
+						"div",
+						{ class: "empty" },
+						RUNNING.includes(set.status)
+							? "Clips appear here as they're found."
+							: "No clips in this set.",
+					),
+		);
+	}
+
+	render();
+	kit.on("input", (args) => {
+		if (!view.setId && typeof args?.id === "string") view.setId = args.id;
+	});
+	kit.on("result", (result) => {
+		const error = kit.resultError(result);
+		if (error) {
+			view.loadError = error;
+			render();
+			return;
+		}
+		const data = kit.resultData(result) ?? {};
+		view.setId = data.clipSetId ?? data.id ?? view.setId;
+		if (Array.isArray(data.clips)) {
+			view.set = data;
+			render();
+		}
+		// Always read it fresh: the set in the chat may be older than the app's.
+		refresh();
+	});
+	kit.on("context", () => render());
+	kit.on("teardown", () => clearTimeout(view.pollTimer));
+	kit.connect().catch((err) => {
+		view.loadError = `Couldn't connect to the chat: ${err?.message ?? err}`;
+		render();
+	});
+}
+
+export function clipsHtml(version) {
+	return viewPage({ title: "PandaStudio clips", version, css: CSS, main });
+}