@hyperframes/studio 0.7.106 → 0.7.108

package/src/player/lib/automationStoreSync.ts

@@ -0,0 +1,56 @@
+/**
+ * Keeping the player store's automation attributes true.
+ *
+ * The store is what a lane draws from, and it is populated by element discovery — a
+ * message from the preview runtime, which only arrives on load. Anything that edits
+ * an envelope afterwards writes to the preview document and the source file, and the
+ * store would go on holding the value it was born with until a reload.
+ *
+ * One reader, called from the two places a change lands: the resync every dom-edit
+ * attribute commit already runs, and the soft restore an undo or redo applies. It
+ * reads the preview rather than being told, because those callers know a file
+ * changed, not which attribute — and because three separate writers shipped without
+ * remembering to sync, which is what a single sink prevents.
+ */
+
+import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
+import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+
+/** The preview node an element stands for, by dom id and then by `data-hf-id`. */
+function previewNodeFor(doc: Document, element: TimelineElement): Element | null {
+  const domId = element.domId ?? element.id;
+  const byId = domId ? doc.getElementById(domId) : null;
+  if (byId) return byId;
+  return element.hfId ? doc.querySelector(`[data-hf-id="${element.hfId}"]`) : null;
+}
+
+/**
+ * Re-read every element's automation and FX-chain attributes from the preview
+ * document, for a change that reached the DOM without going through this store.
+ *
+ * That is undo and redo. A soft restore patches the reverted attributes onto the
+ * live preview and re-runs the timeline — deliberately, so the frame does not blank
+ * — but the store it does not touch is the one the lanes read, so an undone delete
+ * stayed invisible until a reload. A full restore already clears the store and waits
+ * for discovery, so it needs nothing from here.
+ *
+ * Reads rather than being told: an undo restores whole files, so the attribute it
+ * reverted is only known by looking.
+ */
+export function syncStoredAutomationFromPreview(doc: Document | null | undefined): void {
+  if (!doc) return;
+  usePlayerStore.setState((state) => {
+    let changed = false;
+    const elements = state.elements.map((element) => {
+      const node = previewNodeFor(doc, element);
+      if (!node) return element;
+      const automation = node.getAttribute(HF_AUDIO_AUTOMATION_ATTR) ?? undefined;
+      const fxChain = node.getAttribute(HF_AUDIO_FX_ATTR) ?? undefined;
+      if (automation === element.automation && fxChain === element.fxChain) return element;
+      changed = true;
+      return { ...element, automation, fxChain };
+    });
+    return changed ? { elements } : {};
+  });
+}

package/src/player/lib/playbackShortcuts.ts

@@ -6,15 +6,13 @@
  * is active and the user is navigating caption segments).
  */
 
+import { isTypingTarget } from "../../utils/typingTarget";
+
 const PLAYBACK_FRAME_STEP_CODES = new Set(["ArrowLeft", "ArrowRight"]);
 
 const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
-  "input",
-  "textarea",
-  "select",
   "button",
   "a[href]",
-  "[contenteditable='true']",
   "[role='button']",
   "[role='checkbox']",
   "[role='combobox']",
@@ -27,6 +25,9 @@ const PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
 ].join(",");
 
 export function shouldIgnorePlaybackShortcutTarget(target: EventTarget | null): boolean {
+  // Anything the user is typing into owns its keys outright, editable elements
+  // included: a letter claimed here never reaches the text.
+  if (isTypingTarget(target)) return true;
   if (!target || typeof target !== "object") return false;
   const candidate = target as { closest?: unknown };
   if (typeof candidate.closest !== "function") return false;

package/src/player/lib/timelineDOM.test.ts

@@ -296,3 +296,36 @@ describe("mergeTimelineElementsPreservingDowngrades — genuine removal vs trans
     ).toEqual(["a", "c"]);
   });
 });
+
+describe("audio FX attributes on parsed elements", () => {
+  const CHAIN = '{"version":1,"nodes":[{"type":"lowpass","id":"n1","params":{}}]}';
+  const LANE = '{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1}]}]}';
+
+  it("carries data-fx-chain and data-automation off the element", () => {
+    // The timeline row is what reserves automation height and draws the lanes;
+    // parsed straight from the DOM it used to arrive without either attribute,
+    // so the panel showed a chain the timeline could not.
+    const doc = new DOMParser().parseFromString(
+      `<div data-composition-id="main" data-start="0" data-duration="10">
+         <audio id="bgm" data-start="0" data-duration="10" data-fx-chain='${CHAIN}'
+           data-automation='${LANE}'></audio>
+       </div>`,
+      "text/html",
+    );
+    const [bgm] = parseTimelineFromDOM(doc, 10).filter((e) => e.domId === "bgm");
+    expect(bgm?.fxChain).toBe(CHAIN);
+    expect(bgm?.automation).toBe(LANE);
+  });
+
+  it("leaves them unset on a track that carries neither", () => {
+    const doc = new DOMParser().parseFromString(
+      `<div data-composition-id="main" data-start="0" data-duration="10">
+         <audio id="bgm" data-start="0" data-duration="10"></audio>
+       </div>`,
+      "text/html",
+    );
+    const [bgm] = parseTimelineFromDOM(doc, 10).filter((e) => e.domId === "bgm");
+    expect(bgm?.fxChain).toBeUndefined();
+    expect(bgm?.automation).toBeUndefined();
+  });
+});

package/src/player/lib/timelineDOM.ts

@@ -138,6 +138,10 @@ export function createTimelineElementFromManifestClip(params: {
     if (hostEl.hasAttribute("data-hidden")) entry.hidden = true;
     const timelineRole = hostEl.getAttribute("data-timeline-role");
     if (timelineRole) entry.timelineRole = timelineRole;
+    const fxChain = hostEl.getAttribute("data-fx-chain");
+    if (fxChain) entry.fxChain = fxChain;
+    const automation = hostEl.getAttribute("data-automation");
+    if (automation) entry.automation = automation;
     entry.zIndex = readTimelineElementZIndex(hostEl);
   }
   if (clip.assetUrl) entry.src = clip.assetUrl;
@@ -334,6 +338,14 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
       if (resolvedSrc) entry.src = resolvedSrc;
     }
 
+    // Read from the element, like the manifest path does: without these an audio
+    // clip parsed straight from the DOM reserved no automation height and drew no
+    // lanes, while the property panel still showed its chain.
+    const domFxChain = el.getAttribute("data-fx-chain");
+    if (domFxChain) entry.fxChain = domFxChain;
+    const domAutomation = el.getAttribute("data-automation");
+    if (domAutomation) entry.automation = domAutomation;
+
     if (el.hasAttribute("data-timeline-locked")) {
       entry.timelineLocked = true;
     }

package/src/player/store/automationSelectionSlice.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { usePlayerStore } from "./playerStore";
+
+describe("automationSelectionSlice", () => {
+  it("stores one ordered selection box and clears it", () => {
+    const store = usePlayerStore.getState();
+    // Dragged up and to the left: both axes arrive backwards.
+    store.setAutomationSelection({
+      elementKey: "bgm",
+      target: "volume",
+      t0: 2,
+      t1: 1,
+      v0: 0.8,
+      v1: 0.3,
+    });
+    const sel = usePlayerStore.getState().automationSelection;
+    // Ordered on write, so every consumer can assume t0 <= t1 and v0 <= v1 —
+    // which is what lets a point test be two range checks rather than four.
+    expect(sel).toEqual({
+      elementKey: "bgm",
+      target: "volume",
+      t0: 1,
+      t1: 2,
+      v0: 0.3,
+      v1: 0.8,
+    });
+    usePlayerStore.getState().clearAutomationSelection();
+    expect(usePlayerStore.getState().automationSelection).toBeNull();
+  });
+});

package/src/player/store/automationSelectionSlice.ts

@@ -0,0 +1,54 @@
+/**
+ * The active selection box on one automation lane.
+ *
+ * A store slice, not lane-local state, for the same reason keyframe selection
+ * is one: Delete/copy/paste handlers and the shape menu live outside the lane
+ * component and need to read it. Ephemeral by construction — nothing
+ * serializes store state, and the selection must never survive into a render.
+ */
+import type { StoreApi } from "zustand";
+
+export interface AutomationSelection {
+  /** TimelineElement key (key ?? id) of the clip that owns the lane. */
+  elementKey: string;
+  /** Lane target: "volume" or "fx.<nodeId>.<param>". */
+  target: string;
+  /** Clip-local seconds; always t0 <= t1 (ordered on write). */
+  t0: number;
+  t1: number;
+  /**
+   * The box's value bounds, in the parameter's own units; always v0 <= v1.
+   *
+   * What makes the selection a box rather than a time span: a point is caught
+   * only if it falls inside both axes. Span operations — copy, paste, shape
+   * insert, simplify — still read t0/t1 alone, because they act on the envelope
+   * over a stretch of time rather than on a set of breakpoints.
+   */
+  v0: number;
+  v1: number;
+}
+
+export interface AutomationSelectionSlice {
+  automationSelection: AutomationSelection | null;
+  setAutomationSelection: (sel: AutomationSelection) => void;
+  clearAutomationSelection: () => void;
+}
+
+export function createAutomationSelectionSlice(
+  set: StoreApi<AutomationSelectionSlice>["setState"],
+): AutomationSelectionSlice {
+  return {
+    automationSelection: null,
+    setAutomationSelection: (sel) =>
+      set({
+        automationSelection: {
+          ...sel,
+          t0: Math.min(sel.t0, sel.t1),
+          t1: Math.max(sel.t0, sel.t1),
+          v0: Math.min(sel.v0, sel.v1),
+          v1: Math.max(sel.v0, sel.v1),
+        },
+      }),
+    clearAutomationSelection: () => set({ automationSelection: null }),
+  };
+}

package/src/player/store/playerStore.test.ts

@@ -557,6 +557,21 @@ describe("usePlayerStore", () => {
       expectResettableDefaults(usePlayerStore.getState());
     });
 
+    it("drops an automation time selection on reset and on a project switch", () => {
+      const sel = { elementKey: "bgm", target: "volume", t0: 1, t1: 2 };
+
+      usePlayerStore.getState().setAutomationSelection(sel);
+      usePlayerStore.getState().reset();
+      expect(usePlayerStore.getState().automationSelection).toBeNull();
+
+      // The switch matters more than reset(): a stale elementKey can match a
+      // same-keyed clip in the new project and redirect a paste to its old t0.
+      usePlayerStore.getState().beginTimelineSession("project-a");
+      usePlayerStore.getState().setAutomationSelection(sel);
+      usePlayerStore.getState().beginTimelineSession("project-b");
+      expect(usePlayerStore.getState().automationSelection).toBeNull();
+    });
+
     it("does not reset playbackRate, audioMuted, loopEnabled, zoomMode, or manualZoomPercent", () => {
       const store = usePlayerStore.getState();
       store.setPlaybackRate(2);

package/src/player/store/playerStore.ts

@@ -10,76 +10,19 @@ import {
 } from "../../utils/studioUiPreferences";
 import { clampTimelineZoomPercent, computePinnedZoomPercent } from "../components/timelineZoom";
 import { createKeyframeSlice, type KeyframeCacheEntry, type KeyframeSlice } from "./keyframeSlice";
+import {
+  createAutomationSelectionSlice,
+  type AutomationSelectionSlice,
+} from "./automationSelectionSlice";
 import { createTimelineFocusRequest, type TimelineFocusRequest } from "./timelineFocusState";
 import { createThumbnailSlice, type ThumbnailSlice } from "./thumbnailSlice";
 
 export type { KeyframeCacheEntry } from "./keyframeSlice";
 export { liveTime } from "./liveTime";
 
-export interface TimelineElement {
-  id: string;
-  label?: string;
-  key?: string;
-  kind?: ClipManifestClip["kind"];
-  tag: string;
-  start: number;
-  duration: number;
-  track: number;
-  /**
-   * The data-track-index as written in the source file. Set at the manifest
-   * translation boundary (createTimelineElementFromManifestClip) from the
-   * runtime clip's verbatim track, and preserved through display-lane remaps
-   * (normalizeToZones packs sparse authored tracks onto contiguous display
-   * lanes; expanded sub-comp children get synthetic display rows). Lane edits
-   * must persist THIS space — writing a display-lane number into a sparse file
-   * re-targets the wrong track. For an expanded child the value is in its OWN
-   * source file's coordinate space, not the host timeline's.
-   */
-  authoredTrack?: number;
-  /** Resolved z-index for stacking-aware timeline ordering. */
-  zIndex?: number;
-  /** True when the effective z-index was authored inline or through CSS, not auto. */
-  hasExplicitZIndex?: boolean;
-  /** Canonical CSS stacking context this element's z-index participates in. */
-  stackingContextId?: string | null;
-  /** Nearest parent composition context, matching RuntimeTimelineClip. */
-  parentCompositionId?: string | null;
-  /** Composition ancestry from root to nearest parent, matching RuntimeTimelineClip. */
-  compositionAncestors?: string[];
-  domId?: string;
-  /** Stable `data-hf-id` attribute value — used as primary patch target when present */
-  hfId?: string;
-  /** Best-effort selector used when patching source HTML back from timeline edits */
-  selector?: string;
-  /** Zero-based occurrence index for non-unique selectors */
-  selectorIndex?: number;
-  /** Source composition file that owns this element, when known */
-  sourceFile?: string;
-  src?: string;
-  playbackStart?: number;
-  playbackStartAttr?: "media-start" | "playback-start";
-  playbackRate?: number;
-  sourceDuration?: number;
-  volume?: number;
-  /** Path from data-composition-src — identifies sub-composition elements */
-  compositionSrc?: string;
-  /** Whether this row came from authored clip timing or Studio's full-duration layer fallback. */
-  timingSource?: "authored" | "implicit";
-  /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
-  timelineLocked?: boolean;
-  /** Set by data-hidden on the host element — hides the clip in preview and render. */
-  hidden?: boolean;
-  /** Value of data-timeline-role attribute — used to identify music vs. voiceover. */
-  timelineRole?: string;
-  /**
-   * Set by useExpandedTimelineElements on an inline-expanded sub-composition
-   * child: the absolute master-timeline start of the sub-comp host the child
-   * lives in. Presence marks the element as expanded; edits subtract it to get
-   * the child's local (sourceFile-relative) time. Works at any nesting depth.
-   */
-  expandedParentStart?: number;
-  expandedHostKey?: string;
-}
+import type { TimelineElement } from "./timelineElement";
+
+export type { TimelineElement };
 export type ZoomMode = "fit" | "manual";
 type TimelineTool = "select" | "razor";
 
@@ -104,7 +47,7 @@ function resolveElementSelection(
   };
 }
 
-interface PlayerState extends KeyframeSlice, ThumbnailSlice {
+interface PlayerState extends KeyframeSlice, AutomationSelectionSlice, ThumbnailSlice {
   isPlaying: boolean;
   currentTime: number;
   duration: number;
@@ -223,6 +166,32 @@ interface PlayerState extends KeyframeSlice, ThumbnailSlice {
   requestSeek: (time: number) => void;
   clearSeekRequest: () => void;
 
+  /**
+   * Request the transport start or stop from outside the player loop.
+   *
+   * The FX rack auditions a preset by writing it to the running graph, which is
+   * silent while the transport is paused — so hovering one has to start
+   * playback, and leaving has to put the playhead back where it was. Hovering is
+   * not an edit and must not cost the author their place.
+   *
+   * A nonce rather than a bare boolean: two hovers in a row both want play, and
+   * without it the second request is indistinguishable from the first having
+   * already been served.
+   */
+  playbackRequest: { playing: boolean; returnTo: number | null; nonce: number } | null;
+  requestPlayback: (playing: boolean, returnTo?: number | null) => void;
+  clearPlaybackRequest: () => void;
+
+  /**
+   * Request the timeline to scroll a clip into view (e.g. clicking an
+   * already-added asset card in the sidebar). Consumed and cleared by
+   * useTimelineRevealClip. The nonce makes repeat requests for the same
+   * clip observable so a second click re-reveals after the user scrolls away.
+   */
+  clipRevealRequest: { elementId: string; nonce: number } | null;
+  requestClipReveal: (elementId: string) => void;
+  clearClipRevealRequest: () => void;
+
   timelineFocus: TimelineFocusRequest | null;
   timelineFocusNonce: number;
   requestTimelineFocus: (id: string) => void;
@@ -294,6 +263,10 @@ export function createTimelineResetState() {
     motionPathArmed: false,
     motionPathCreateAvailable: false,
     selectedKeyframes: new Set<string>(),
+    // Ephemeral like every other selection here. A range surviving a project
+    // switch can match a same-keyed clip in the new project and redirect a
+    // paste through `sel.elementKey === paste.elementKey` to a stale t0.
+    automationSelection: null,
     expandedClipIds: new Set<string>(),
     focusedEaseSegment: null,
     selectedElementIds: new Set<string>(),
@@ -343,6 +316,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   })),
   ...createThumbnailSlice(set),
 
+  ...createAutomationSelectionSlice(set),
+
   activeKeyframePct: null,
   setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
   motionPathArmed: false,
@@ -373,6 +348,20 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   requestSeek: (time) => set({ requestedSeekTime: time }),
   clearSeekRequest: () => set({ requestedSeekTime: null }),
 
+  playbackRequest: null,
+  requestPlayback: (playing, returnTo = null) =>
+    set((s) => ({
+      playbackRequest: { playing, returnTo, nonce: (s.playbackRequest?.nonce ?? 0) + 1 },
+    })),
+  clearPlaybackRequest: () => set({ playbackRequest: null }),
+
+  clipRevealRequest: null,
+  requestClipReveal: (elementId) =>
+    set((s) => ({
+      clipRevealRequest: { elementId, nonce: (s.clipRevealRequest?.nonce ?? 0) + 1 },
+    })),
+  clearClipRevealRequest: () => set({ clipRevealRequest: null }),
+
   timelineFocus: null,
   timelineFocusNonce: 0,
   requestTimelineFocus: (id) =>

package/src/player/store/timelineElement.ts

@@ -0,0 +1,78 @@
+/**
+ * One row in the timeline: a clip as Studio needs it, translated from the
+ * runtime's manifest at createTimelineElementFromManifestClip.
+ *
+ * Split out of playerStore, which had reached the 600-line studio ceiling and
+ * could not carry another field. Re-exported from there, so every existing
+ * importer is unaffected.
+ */
+
+import type { ClipManifestClip } from "../lib/playbackTypes";
+
+export interface TimelineElement {
+  id: string;
+  label?: string;
+  key?: string;
+  kind?: ClipManifestClip["kind"];
+  tag: string;
+  start: number;
+  duration: number;
+  track: number;
+  /**
+   * The data-track-index as written in the source file. Set at the manifest
+   * translation boundary (createTimelineElementFromManifestClip) from the
+   * runtime clip's verbatim track, and preserved through display-lane remaps
+   * (normalizeToZones packs sparse authored tracks onto contiguous display
+   * lanes; expanded sub-comp children get synthetic display rows). Lane edits
+   * must persist THIS space — writing a display-lane number into a sparse file
+   * re-targets the wrong track. For an expanded child the value is in its OWN
+   * source file's coordinate space, not the host timeline's.
+   */
+  authoredTrack?: number;
+  /** Resolved z-index for stacking-aware timeline ordering. */
+  zIndex?: number;
+  /** True when the effective z-index was authored inline or through CSS, not auto. */
+  hasExplicitZIndex?: boolean;
+  /** Canonical CSS stacking context this element's z-index participates in. */
+  stackingContextId?: string | null;
+  /** Nearest parent composition context, matching RuntimeTimelineClip. */
+  parentCompositionId?: string | null;
+  /** Composition ancestry from root to nearest parent, matching RuntimeTimelineClip. */
+  compositionAncestors?: string[];
+  domId?: string;
+  /** Stable `data-hf-id` attribute value — used as primary patch target when present */
+  hfId?: string;
+  /** Best-effort selector used when patching source HTML back from timeline edits */
+  selector?: string;
+  /** Zero-based occurrence index for non-unique selectors */
+  selectorIndex?: number;
+  /** Source composition file that owns this element, when known */
+  sourceFile?: string;
+  src?: string;
+  playbackStart?: number;
+  playbackStartAttr?: "media-start" | "playback-start";
+  playbackRate?: number;
+  sourceDuration?: number;
+  volume?: number;
+  /** Verbatim `data-fx-chain` / `data-automation`; see automationLaneData. */
+  fxChain?: string;
+  automation?: string;
+  /** Path from data-composition-src — identifies sub-composition elements */
+  compositionSrc?: string;
+  /** Whether this row came from authored clip timing or Studio's full-duration layer fallback. */
+  timingSource?: "authored" | "implicit";
+  /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
+  timelineLocked?: boolean;
+  /** Set by data-hidden on the host element — hides the clip in preview and render. */
+  hidden?: boolean;
+  /** Value of data-timeline-role attribute — used to identify music vs. voiceover. */
+  timelineRole?: string;
+  /**
+   * Set by useExpandedTimelineElements on an inline-expanded sub-composition
+   * child: the absolute master-timeline start of the sub-comp host the child
+   * lives in. Presence marks the element as expanded; edits subtract it to get
+   * the child's local (sourceFile-relative) time. Works at any nesting depth.
+   */
+  expandedParentStart?: number;
+  expandedHostKey?: string;
+}

package/src/styles/studio.css

@@ -469,3 +469,92 @@ body {
     animation: none;
   }
 }
+
+/* Preset shelf: the hovered row, and the wave that says it is being heard.
+ *
+ * Hovering a preset auditions it on the running audio, which is invisible — the
+ * panel looks identical whether the audition is playing or the pointer just
+ * happens to be resting there. The bars are that feedback: they run only while a
+ * preset is actually sounding, so they are a readout of the audio rather than a
+ * hover decoration. */
+.hf-fx-preset-item {
+  position: relative;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hf-fx-preset-item {
+    transition:
+      background-color 120ms ease,
+      color 120ms ease;
+  }
+}
+
+.hf-fx-preset-item:hover,
+.hf-fx-preset-item:focus-visible {
+  /* The accent at low alpha rather than a grey: the row is lit by the thing that
+     is playing, and it should read as the same event as the bars. */
+  background-color: rgba(60, 230, 172, 0.12);
+}
+
+.hf-fx-preset-wave {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 0.75rem;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 120ms ease;
+  pointer-events: none;
+}
+
+.hf-fx-preset-item:hover .hf-fx-preset-wave,
+.hf-fx-preset-item:focus-visible .hf-fx-preset-wave {
+  opacity: 1;
+}
+
+.hf-fx-preset-wave span {
+  width: 2px;
+  height: 100%;
+  border-radius: 1px;
+  background: #3ce6ac;
+  transform: scaleY(0.25);
+  transform-origin: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hf-fx-preset-wave span {
+    animation: hf-fx-preset-wave 900ms ease-in-out infinite;
+  }
+  /* Staggered so it reads as a waveform travelling rather than four bars
+     pumping in unison, which reads as a loading spinner. */
+  .hf-fx-preset-wave span:nth-child(2) {
+    animation-delay: 150ms;
+  }
+  .hf-fx-preset-wave span:nth-child(3) {
+    animation-delay: 300ms;
+  }
+  .hf-fx-preset-wave span:nth-child(4) {
+    animation-delay: 450ms;
+  }
+}
+
+/* Still visible without motion — it is telling the author something is
+   playing, and that fact does not go away because the bars hold still. */
+@media (prefers-reduced-motion: reduce) {
+  .hf-fx-preset-wave span {
+    transform: scaleY(0.7);
+  }
+}
+
+@keyframes hf-fx-preset-wave {
+  0%,
+  100% {
+    transform: scaleY(0.25);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}

package/src/telemetry/agentRuntime.test.ts

@@ -0,0 +1,45 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  agentRuntimeProperty,
+  resetAgentRuntimeForTests,
+  resolveAgentRuntime,
+} from "./agentRuntime";
+
+afterEach(() => {
+  resetAgentRuntimeForTests();
+  delete window.__HF_CLI_AGENT_RUNTIME;
+});
+
+describe("the agent driving this studio", () => {
+  it("reads what the CLI published", () => {
+    window.__HF_CLI_AGENT_RUNTIME = "claude_code";
+    expect(resolveAgentRuntime()).toBe("claude_code");
+    expect(agentRuntimeProperty()).toBe("claude_code");
+  });
+
+  it("is null when nothing published one — a studio opened by hand", () => {
+    expect(resolveAgentRuntime()).toBeNull();
+  });
+
+  it("treats an empty string as nothing, not as a value", () => {
+    // Two encodings of the same fact is what turns a breakdown into a phantom
+    // gap; "" and absent must not be separate rows.
+    window.__HF_CLI_AGENT_RUNTIME = "";
+    expect(resolveAgentRuntime()).toBeNull();
+  });
+
+  it("reports 'none' rather than nothing as a property", () => {
+    // Most sessions are people, and that is a finding. An omitted property
+    // could not tell it apart from an event that predates the property.
+    expect(agentRuntimeProperty()).toBe("none");
+  });
+
+  it("memoizes, so a later overwrite cannot split one session in two", () => {
+    window.__HF_CLI_AGENT_RUNTIME = "codex";
+    expect(resolveAgentRuntime()).toBe("codex");
+    window.__HF_CLI_AGENT_RUNTIME = "cursor";
+    expect(resolveAgentRuntime()).toBe("codex");
+  });
+});