@hyperframes/studio 0.7.105 → 0.7.107

package/src/components/editor/useInlineTextEditing.tsx

@@ -0,0 +1,119 @@
+import { useRef, type ReactNode, type RefObject } from "react";
+import { InlineTextToolbar } from "./InlineTextToolbar";
+import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
+import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
+import {
+  canEditElementTextInline,
+  canEditTextInline,
+  isDoublePress,
+  type PressMark,
+} from "./domEditInlineText";
+import type { DomEditSelection } from "./domEditingTypes";
+
+/**
+ * The canvas' side of editing text where it sits.
+ *
+ * Holds the session, decides which presses open one, and knows the two things
+ * the canvas has to do differently while one is open: stand aside so the caret
+ * underneath can be reached, and stop taking focus back.
+ *
+ * The actions context is read here rather than threaded through the overlay's
+ * props, the same way the agent surfaces in that overlay read it, and it is
+ * absent in standalone player mounts, which have no project to edit.
+ */
+export function useInlineTextEditing(selectionRef: RefObject<DomEditSelection | null>): {
+  editing: boolean;
+  /** Open an edit when this press pairs with the last one. */
+  startFromPress: (event: { clientX: number; clientY: number }) => boolean;
+  /** Handle a key on the canvas. Returns true when it opened an edit. */
+  handleKeyDown: (event: {
+    key: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+  }) => boolean;
+  /**
+   * The styling controls for the current selection, for the caller to render.
+   *
+   * Handed back rather than mounted somewhere central because it belongs to the
+   * session this hook owns, and appears and disappears with it.
+   */
+  toolbar: ReactNode;
+} {
+  const actions = useDomEditActionsContextOptional();
+  const inlineText = useInlineTextEdit({
+    onCommit: (commit) => void actions?.handleDomRichTextCommit(commit),
+    onPause: () => usePlayerStore.getState().setIsPlaying(false),
+  });
+  const lastPressRef = useRef<PressMark | null>(null);
+
+  /**
+   * The element under this press, hit-tested now rather than read from state.
+   *
+   * Every cached answer in the overlay is React state that has not caught up
+   * with the press happening now: the hover is documented as an async cache,
+   * and the selection from the first press has not re-rendered. Reading either
+   * meant the first double press on any element opened nothing, which is every
+   * double press that matters.
+   */
+  const elementUnderPress = (event: { clientX: number; clientY: number }) => {
+    const iframe = actions?.previewIframeRef?.current;
+    if (!iframe) return null;
+    // Studio suppresses pointer events inside the composition so the canvas
+    // overlay can own input, which means a plain elementFromPoint only ever
+    // finds wrappers. This helper lifts that for the length of the hit test,
+    // and is the same one the canvas uses to decide what was clicked.
+    return getPreviewTargetFromPointer(
+      iframe,
+      event.clientX,
+      event.clientY,
+      selectionRef.current?.compositionPath ?? null,
+    );
+  };
+
+  /** A point on Studio's canvas, in the scaled composition's coordinates. */
+  const compositionPoint = (event: { clientX: number; clientY: number }) => {
+    const iframe = actions?.previewIframeRef?.current;
+    const view = iframe?.contentWindow;
+    if (!iframe || !view?.innerWidth) return undefined;
+    const box = iframe.getBoundingClientRect();
+    const scale = box.width / view.innerWidth || 1;
+    return { x: (event.clientX - box.left) / scale, y: (event.clientY - box.top) / scale };
+  };
+
+  return {
+    editing: inlineText.session !== null,
+    toolbar: (
+      <InlineTextToolbar
+        session={inlineText.session}
+        iframe={actions?.previewIframeRef?.current ?? null}
+      />
+    ),
+    // Enter opens the selected element's text, the way every design tool does,
+    // and is the dependable way in: a double press has to survive the canvas'
+    // gesture machinery, while this is one key on a selection that has settled.
+    handleKeyDown: (event) => {
+      if (event.key !== "Enter" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)
+        return false;
+      const target = selectionRef.current;
+      if (inlineText.session || !target || !canEditTextInline(target)) return false;
+      return inlineText.start(target.element);
+    },
+    startFromPress: (event) => {
+      if (inlineText.session) return false;
+      const element = elementUnderPress(event);
+      const press = { x: event.clientX, y: event.clientY, at: Date.now(), element };
+      const paired = isDoublePress(lastPressRef.current, press);
+      lastPressRef.current = press;
+
+      if (!paired) return false;
+      if (!element || !canEditElementTextInline(element)) return false;
+      // The caret opens where the press landed, which means mapping the point
+      // out of Studio's coordinates and into the composition's own.
+      return inlineText.start(element, compositionPoint(event));
+    },
+  };
+}

package/src/components/feedback/CrashFeedbackPrompt.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { StudioFeedbackCard } from "./StudioFeedbackCard";
+import { requestStudioFeedback } from "./feedbackTrigger";
+
+/**
+ * The feedback prompt for the crash screen.
+ *
+ * A crash unmounts the whole editor, and with it the card that normally lives
+ * in the overlay stack, so the request cannot come from there. The error
+ * boundary's fallback renders this instead: the card mounts and subscribes
+ * first (child effects run before the parent's), then the effect below asks.
+ *
+ * The crash screen is the one place a user is guaranteed to have an opinion
+ * and nothing else to do with it. Everything else about the ask is unchanged —
+ * same eligibility, same cooldowns — so a crash cannot be used to talk to
+ * someone who already said their piece this session.
+ */
+export function CrashFeedbackPrompt() {
+  useEffect(() => {
+    // No `detail`: the crash screen already prints the error message directly
+    // above this card, and the crash event already carries it. Passing it here
+    // would quote the same sentence back to the user twice.
+    requestStudioFeedback({ reason: "crash" });
+  }, []);
+
+  return <StudioFeedbackCard />;
+}

package/src/components/feedback/StudioFeedbackCard.tsx

@@ -0,0 +1,373 @@
+import { memo, useState, useCallback, useRef, useEffect } from "react";
+import {
+  trackStudioFeedback,
+  trackStudioFeedbackShown,
+  trackStudioFeedbackDismissed,
+  trackStudioFeedbackInterviewClick,
+} from "../../telemetry/events";
+import {
+  subscribeToFeedbackRequests,
+  markFeedbackAnswered,
+  markFeedbackDismissed,
+  followUpFor,
+  isProblemReason,
+  type FeedbackRequest,
+  type FollowUpQuestion,
+} from "./feedbackTrigger";
+import { projectProvenance } from "./projectProvenance";
+
+/** A failed render is its own question; nothing is rotated in front of it. */
+const FAILURE_FOLLOW_UP: FollowUpQuestion = {
+  id: "failure",
+  prompt: "That export failed.",
+  placeholder: "What were you exporting?",
+  presets: [
+    { label: "Happens every time", hint: "Every export of this project fails this way" },
+    { label: "First time", hint: "Exports normally work for me" },
+    { label: "Long composition", hint: "Over a minute, or a lot of scenes" },
+    { label: "Big media files", hint: "Large video or image assets in the project" },
+    { label: "Has audio", hint: "The composition includes voiceover, music or sound" },
+    { label: "Embedded video", hint: "One or more video clips inside the composition" },
+  ],
+};
+
+/**
+ * The crash screen ask. "What were you doing" beats "what went wrong": the
+ * user cannot see the stack trace, but they know exactly what they touched,
+ * and that is the half the crash report is missing.
+ */
+const CRASH_FOLLOW_UP: FollowUpQuestion = {
+  id: "crash",
+  prompt: "Studio crashed. What were you doing?",
+  placeholder: "The last thing you touched",
+  presets: [
+    { label: "Editing the timeline", hint: "Dragging, trimming or splitting clips" },
+    { label: "Playing the preview", hint: "Scrubbing or playing back the composition" },
+    { label: "Adding media", hint: "Importing video, images or audio" },
+    { label: "Editing properties", hint: "Changing styles, transforms or keyframes" },
+    { label: "Exporting", hint: "Starting or watching a render" },
+    { label: "Just opened it", hint: "It broke before I did anything" },
+  ],
+};
+
+/** Long enough to read the render result first; short enough to stay polite. */
+const AUTO_DISMISS_MS = 30_000;
+/** Matches the .hf-toast-exit animation so the node leaves as it finishes. */
+const EXIT_MS = 160;
+/**
+ * The thanks state carries the interview link, so it has to outlast a glance.
+ * A 1.4s confirmation would flash a booking link nobody could reach.
+ */
+const THANKS_MS = 10_000;
+
+/**
+ * Someone who just answered is the likeliest person in the product to say yes
+ * to a call, and this is the only moment we have their attention with goodwill.
+ */
+const INTERVIEW_URL = "https://calendar.app.google/yRHT7oPsHWcqFfFv5";
+
+const RATINGS = Array.from({ length: 11 }, (_, n) => n);
+
+type Step = "rating" | "comment" | "thanks";
+
+/**
+ * The Studio feedback prompt. Shown by `feedbackTrigger` after a render
+ * finishes or fails — never on a timer, so the user always knows what they are
+ * being asked about.
+ *
+ * A failed render skips the 0-10 scale: scoring an export you never got is a
+ * question with no useful answer, and the free-text reply is the whole point.
+ */
+// fallow-ignore-next-line complexity
+export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
+  const [request, setRequest] = useState<FeedbackRequest | null>(null);
+  const [step, setStep] = useState<Step>("rating");
+  const [rating, setRating] = useState<number | null>(null);
+  const [followUp, setFollowUp] = useState<FollowUpQuestion>(FAILURE_FOLLOW_UP);
+  const [comment, setComment] = useState("");
+  /** Explanation of the chip under the pointer, shown on the reserved line. */
+  const [hint, setHint] = useState<string | null>(null);
+  const [exiting, setExiting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Read inside close(), which must not re-subscribe every keystroke.
+  const stateRef = useRef({ request, rating, step });
+  stateRef.current = { request, rating, step };
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const close = useCallback(
+    (via: "close" | "escape" | "timeout" | "sent") => {
+      const { request: req, rating: picked, step: at } = stateRef.current;
+      if (!req) return;
+      clearTimer();
+      if (via === "sent") {
+        markFeedbackAnswered();
+      } else {
+        markFeedbackDismissed();
+        trackStudioFeedbackDismissed({
+          reason: req.reason,
+          render_id: req.renderId,
+          via,
+          had_rating: picked !== null || at === "comment",
+        });
+      }
+      setExiting(true);
+      setTimeout(() => {
+        setRequest(null);
+        setExiting(false);
+        setRating(null);
+        setComment("");
+        setStep("rating");
+      }, EXIT_MS);
+    },
+    [clearTimer],
+  );
+
+  useEffect(
+    () =>
+      subscribeToFeedbackRequests((next) => {
+        setRequest(next);
+        setRating(null);
+        setComment("");
+        setHint(null);
+        setFollowUp(next.reason === "crash" ? CRASH_FOLLOW_UP : FAILURE_FOLLOW_UP);
+        // A crash or a failed render has nothing to score, so those open
+        // straight at the ask instead of demanding a number first.
+        setStep(isProblemReason(next.reason) ? "comment" : "rating");
+        trackStudioFeedbackShown({ reason: next.reason, render_id: next.renderId });
+      }),
+    [],
+  );
+
+  // Auto-dismiss only while the prompt is still untouched — once the user
+  // starts typing or picks a score, the card is theirs until they close it.
+  useEffect(() => {
+    if (!request || step === "thanks" || rating !== null || comment !== "") return;
+    timerRef.current = setTimeout(() => close("timeout"), AUTO_DISMISS_MS);
+    return clearTimer;
+  }, [request, step, rating, comment, close, clearTimer]);
+
+  useEffect(() => {
+    if (step === "comment") inputRef.current?.focus();
+  }, [step]);
+
+  /** `preset` is the tapped chip's text; absent means the field was typed in. */
+  const submit = useCallback(
+    (preset?: string) => {
+      const req = stateRef.current.request;
+      if (!req) return;
+      const text = (preset ?? comment).trim();
+      // Nothing to send yet: a failure prompt with no words is just a dismiss.
+      if (rating === null && text === "") return close("close");
+      trackStudioFeedback({
+        reason: req.reason,
+        render_id: req.renderId,
+        // Which follow-up this comment answers. Without it, "nothing" against
+        // "what would you cut?" and "nothing" against "what should we fix?" are
+        // the same row, and neither means anything.
+        question: followUp.id,
+        // Tapped chips cluster into countable buckets; typed answers do not.
+        // Mixing them would make a chip's popularity look like a written theme.
+        answer_kind: preset === undefined ? "typed" : "preset",
+        // Provenance first so a producer's own context wins on a key clash.
+        context: { ...projectProvenance(), ...req.context },
+        ...(rating === null ? {} : { rating }),
+        ...(text ? { comment: text } : {}),
+      });
+      clearTimer();
+      setStep("thanks");
+      setTimeout(() => close("sent"), THANKS_MS);
+    },
+    [rating, comment, followUp.id, close, clearTimer],
+  );
+
+  const pickRating = useCallback((n: number) => {
+    setRating(n);
+    setFollowUp(followUpFor(n));
+    setStep("comment");
+  }, []);
+
+  if (!request) return null;
+
+  const failed = isProblemReason(request.reason);
+  // Deliberately the CLI's question, word for word. Studio and CLI ratings only
+  // sit on one axis if they asked the same thing; what makes them comparable is
+  // `reason`, which records the moment, not a reworded prompt.
+  const title =
+    step === "rating" ? "How likely are you to recommend HyperFrames?" : followUp.prompt;
+
+  return (
+    <div
+      role="dialog"
+      aria-label="Send feedback to the HyperFrames team"
+      className={`motion-reduce:animate-none ${exiting ? "hf-toast-exit" : "hf-toast-enter"}`}
+      onKeyDown={(e) => {
+        if (e.key === "Escape") close("escape");
+      }}
+    >
+      <div
+        className="flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3"
+        style={{
+          background: failed
+            ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))"
+            : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
+          backdropFilter: "blur(16px) saturate(1.6)",
+          WebkitBackdropFilter: "blur(16px) saturate(1.6)",
+          border: `1px solid ${failed ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
+          boxShadow: [
+            "0 8px 32px rgba(0,0,0,0.35)",
+            `inset 0 1px 0 ${failed ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
+            "inset 0 -1px 0 rgba(0,0,0,0.15)",
+          ].join(", "),
+        }}
+      >
+        <div className="flex items-start gap-3">
+          <p
+            className={`min-w-0 flex-1 text-[12px] leading-5 ${failed ? "text-red-100" : "text-neutral-100"}`}
+          >
+            {step === "thanks" ? "Thanks, that helps." : title}
+          </p>
+          {step === "thanks" && (
+            <a
+              href={INTERVIEW_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => {
+                const req = stateRef.current.request;
+                if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
+                close("sent");
+              }}
+              className="h-6 flex-shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/[0.08] px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+            >
+              Talk to us, 30 min
+            </a>
+          )}
+          <button
+            type="button"
+            onClick={() => close("close")}
+            className="-mr-1 -mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
+            aria-label="Dismiss"
+          >
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            >
+              <path d="M2 2l6 6M8 2l-6 6" />
+            </svg>
+          </button>
+        </div>
+
+        {/* The failure text the user already saw, quoted back so the report
+            carries it without asking them to retype the error. */}
+        {failed && request.detail && step !== "thanks" && (
+          <p className="line-clamp-2 text-[11px] leading-4 text-red-200/70">{request.detail}</p>
+        )}
+
+        {step === "rating" && (
+          <>
+            {/* Native radios: free arrow-key navigation, grouping and labels. */}
+            <fieldset className="grid grid-cols-11 gap-[3px]">
+              <legend className="sr-only">Rate this export from 0 to 10</legend>
+              {RATINGS.map((n) => (
+                <label
+                  key={n}
+                  // A resting fill, so the row reads as eleven controls rather
+                  // than as a line of text that happens to be clickable.
+                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/[0.04] text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-[:checked]:bg-white/90 has-[:checked]:text-neutral-900 has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-white/50 motion-reduce:transition-none"
+                >
+                  <input
+                    type="radio"
+                    name="hf-studio-feedback-rating"
+                    value={n}
+                    checked={rating === n}
+                    onChange={() => pickRating(n)}
+                    className="sr-only"
+                  />
+                  {n}
+                </label>
+              ))}
+            </fieldset>
+            <div className="flex justify-between text-[10px] leading-none text-neutral-500">
+              <span>Not likely</span>
+              <span>Extremely likely</span>
+            </div>
+          </>
+        )}
+
+        {step === "comment" && (
+          <>
+            {/* One tap is the whole answer. Sends immediately: making someone
+                tap a chip and then hunt for Send throws away the reason chips
+                exist. The field below stays for anything the chips miss. */}
+            <div className="flex flex-wrap gap-1.5">
+              {followUp.presets.map((preset) => (
+                <button
+                  key={preset.label}
+                  type="button"
+                  onClick={() => submit(preset.label)}
+                  onPointerEnter={() => setHint(preset.hint)}
+                  onPointerLeave={() => setHint(null)}
+                  onFocus={() => setHint(preset.hint)}
+                  onBlur={() => setHint(null)}
+                  // The hint reaches a screen reader through the label, since
+                  // it never gets the hover that reveals it visually.
+                  aria-label={`${preset.label}. ${preset.hint}`}
+                  // Hover has to be unmistakable, not a shade brighter: the
+                  // chip under the pointer is the one the hint line is talking
+                  // about, so if you cannot tell which is hovered, the hint is
+                  // attached to nothing.
+                  className={`h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
+                    failed
+                      ? "border-red-300/20 bg-red-100/[0.06] text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
+                      : "border-white/10 bg-white/[0.04] text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
+                  }`}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+            {/* Inline, not a floating tooltip. The card is 340px in a corner,
+                so a bubble above the chips lands on top of the question and a
+                bubble below lands on the input. One reserved line occludes
+                nothing and needs no hover delay to be readable. */}
+            <p className="h-3.5 truncate text-[10.5px] leading-[14px] text-neutral-500">
+              {hint ?? "Tap one, or write your own."}
+            </p>
+            <div className="flex items-center gap-2">
+              <input
+                ref={inputRef}
+                type="text"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") submit();
+                }}
+                placeholder={followUp.placeholder}
+                aria-label={followUp.prompt}
+                maxLength={500}
+                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-none transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+              />
+              <button
+                type="button"
+                onClick={() => submit()}
+                className="h-7 flex-shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+              >
+                Send
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/feedback/feedbackTrigger.test.ts

@@ -0,0 +1,168 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+// The policy module decides whether this profile may be measured at all; the
+// trigger refuses to ask anyone it cannot hear, so every test here has to say
+// which of those two worlds it is in.
+vi.mock("../../telemetry/policy", () => ({
+  browserTelemetryAllowed: () => telemetryAllowed,
+}));
+
+let telemetryAllowed = true;
+
+const {
+  requestStudioFeedback,
+  subscribeToFeedbackRequests,
+  markFeedbackAnswered,
+  markFeedbackDismissed,
+  followUpFor,
+  isProblemReason,
+} = await import("./feedbackTrigger");
+
+const DAY_MS = 86_400_000;
+
+function collect() {
+  const seen: unknown[] = [];
+  const unsubscribe = subscribeToFeedbackRequests((r) => seen.push(r));
+  return { seen, unsubscribe };
+}
+
+beforeEach(() => {
+  telemetryAllowed = true;
+  localStorage.clear();
+  sessionStorage.clear();
+  vi.useRealTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("requestStudioFeedback eligibility", () => {
+  it("asks on the first eligible request", () => {
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "render_complete", renderId: "r1" });
+    expect(seen).toEqual([{ reason: "render_complete", renderId: "r1" }]);
+    unsubscribe();
+  });
+
+  it("asks only once per tab session, however many renders finish", () => {
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "render_complete", renderId: "r1" });
+    requestStudioFeedback({ reason: "render_complete", renderId: "r2" });
+    requestStudioFeedback({ reason: "render_failed", renderId: "r3" });
+    expect(seen).toHaveLength(1);
+    unsubscribe();
+  });
+
+  it("stays silent for 30 days after an answer", () => {
+    markFeedbackAnswered();
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    expect(seen).toHaveLength(0);
+    unsubscribe();
+  });
+
+  it("asks again once the 30 day answer cooldown has passed", () => {
+    localStorage.setItem("hyperframes-studio:feedbackAnsweredAt", String(Date.now() - 31 * DAY_MS));
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    expect(seen).toHaveLength(1);
+    unsubscribe();
+  });
+
+  it("stays silent for 7 days after a dismissal, then asks again", () => {
+    markFeedbackDismissed();
+    const first = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    expect(first.seen).toHaveLength(0);
+    first.unsubscribe();
+
+    sessionStorage.clear();
+    localStorage.setItem("hyperframes-studio:feedbackDismissedAt", String(Date.now() - 8 * DAY_MS));
+    const second = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    expect(second.seen).toHaveLength(1);
+    second.unsubscribe();
+  });
+
+  it("never asks a profile that opted out of telemetry", () => {
+    telemetryAllowed = false;
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "crash" });
+    expect(seen).toHaveLength(0);
+    unsubscribe();
+  });
+
+  it("does not burn the session slot on an ineligible request", () => {
+    telemetryAllowed = false;
+    const blocked = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    blocked.unsubscribe();
+
+    // Opting back in mid-session must not find the one ask already spent.
+    telemetryAllowed = true;
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "render_complete" });
+    expect(seen).toHaveLength(1);
+    unsubscribe();
+  });
+
+  it("drops the request when nothing is listening", () => {
+    expect(() => requestStudioFeedback({ reason: "crash" })).not.toThrow();
+    // The ask was not spent, so the next real subscriber still gets asked.
+    const { seen, unsubscribe } = collect();
+    requestStudioFeedback({ reason: "crash" });
+    expect(seen).toHaveLength(1);
+    unsubscribe();
+  });
+});
+
+describe("follow-up selection", () => {
+  it("gives every detractor the complaint question, never a rotated one", () => {
+    for (let rating = 0; rating <= 6; rating++) {
+      expect(followUpFor(rating).id).toBe("detractor");
+    }
+  });
+
+  it("rotates among the three research questions above 6", () => {
+    const ids = new Set<string>();
+    for (let i = 0; i < 200; i++) ids.add(followUpFor(9).id);
+    expect([...ids].sort()).toEqual(["fix", "remove", "workaround"]);
+  });
+
+  it("gives every question scannable, distinct one-tap answers with explanations", () => {
+    for (const rating of [0, 7, 8, 9, 10]) {
+      const q = followUpFor(rating);
+      // Four is the floor for a useful spread; past seven the chips stop being
+      // scannable in a 340px card and start being a form.
+      expect(q.presets.length).toBeGreaterThanOrEqual(4);
+      expect(q.presets.length).toBeLessThanOrEqual(7);
+      expect(new Set(q.presets.map((p) => p.label)).size).toBe(q.presets.length);
+      for (const p of q.presets) {
+        expect(p.hint.length).toBeGreaterThan(0);
+        // A label that wraps to two lines in a chip row is not scannable.
+        expect(p.label.length).toBeLessThanOrEqual(24);
+      }
+    }
+  });
+
+  it("offers no brand names, which are a popularity vote and not an instruction", () => {
+    const brands = /capcut|premiere|resolve|after effects|final cut|remotion|canva|descript/i;
+    for (const rating of [0, 7, 8, 9, 10]) {
+      for (const p of followUpFor(rating).presets) {
+        expect(p.label).not.toMatch(brands);
+        expect(p.hint).not.toMatch(brands);
+      }
+    }
+  });
+});
+
+describe("isProblemReason", () => {
+  it("treats everything except a finished render as a problem report", () => {
+    expect(isProblemReason("render_complete")).toBe(false);
+    expect(isProblemReason("render_failed")).toBe(true);
+    expect(isProblemReason("crash")).toBe(true);
+  });
+});