@ksp-gonogo/kerbcast-react 1.11.1 → 1.12.0-rc.2

package/src/CommandBrackets.test.tsx

@@ -1,4 +1,4 @@
-import { effectiveCommandTrack, type CommandTrackState } from "@ksp-gonogo/kerbcast";
+import { effectiveCommandTrack, type CommandTrackState, type FrameAnchor } from "@ksp-gonogo/kerbcast";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import {
@@ -33,7 +33,7 @@ function track(overrides: Partial<CommandTrackState> = {}): CommandTrackState {
   };
 }
 
-const AUTHORITY = { owner: "gonogo" };
+const AUTHORITY = { owner: "mission-control" };
 
 describe("containedContentRect", () => {
   it("letterboxes wide media in a tall box", () => {
@@ -154,6 +154,19 @@ describe("CommandBrackets", () => {
     expect(container.querySelector("svg")).toBeNull();
     expect(screen.getByText("NO FIX")).toBeTruthy();
   });
+
+  it("leaves NO FIX out while the feed says it is waiting for a target", () => {
+    render(
+      <CommandBrackets
+        state={{ ...effectiveCommandTrack(track({ hasFix: false, rangeM: undefined }), 1000), waitingForTarget: true }}
+        displayUt={1000}
+        utSource="override"
+        video={null}
+        fallbackSize={{ width: 1024, height: 576 }}
+      />,
+    );
+    expect(screen.queryByText("NO FIX")).toBeNull();
+  });
 });
 
 describe("CommandBrackets overlay", () => {
@@ -249,11 +262,198 @@ describe("CommandBrackets overlay", () => {
   });
 });
 
+/** A video element with a laid-out box and a decoded size, as a browser reports them. */
+function sizedVideo(boxW: number, boxH: number, mediaW = boxW, mediaH = boxH): HTMLVideoElement {
+  const v = document.createElement("video");
+  Object.defineProperty(v, "clientWidth", { value: boxW });
+  Object.defineProperty(v, "clientHeight", { value: boxH });
+  Object.defineProperty(v, "videoWidth", { value: mediaW });
+  Object.defineProperty(v, "videoHeight", { value: mediaH });
+  return v;
+}
+
+function subjectAnchor(overrides: Partial<FrameAnchor> = {}): FrameAnchor {
+  return {
+    id: "subject",
+    owner: "kerbcast",
+    x: 256,
+    y: 144,
+    inFrame: true,
+    behind: false,
+    distanceM: 4200,
+    apparentRadiusPx: 40,
+    angleOffAxis: 12,
+    occluded: false,
+    ...overrides,
+  };
+}
+
+describe("CommandBrackets on the subject anchor", () => {
+  function renderOnSubject(
+    subject: FrameAnchor | null,
+    t: CommandTrackState = track(),
+    overlay?: CommandBracketOverlay,
+    frame = { width: 1024, height: 576 },
+  ) {
+    return render(
+      <CommandBrackets
+        state={effectiveCommandTrack(t, 1000)}
+        displayUt={1000}
+        utSource="exact"
+        video={sizedVideo(1024, 576)}
+        overlay={overlay}
+        subject={subject}
+        subjectFrameSize={frame}
+      />,
+    );
+  }
+
+  function seenWith(subject: FrameAnchor | null, t: CommandTrackState = track()) {
+    let seen: CommandBracketContext | null = null;
+    const view = renderOnSubject(subject, t, { render: (ctx) => ((seen = ctx), null) });
+    return { ctx: seen as unknown as CommandBracketContext, view };
+  }
+
+  /* An observed result out of frame or occluded: no coordinates at all. */
+  const unseen = (o: Partial<FrameAnchor>): FrameAnchor => ({
+    id: "subject",
+    owner: "kerbcast",
+    observed: true,
+    inFrame: true,
+    ...o,
+  });
+
+  it("brackets the subject where it really is, not the frame centre", () => {
+    const { ctx, view } = seenWith(subjectAnchor());
+    expect([ctx.geometry.cx, ctx.geometry.cy, ctx.geometry.half]).toEqual([256, 144, 40]);
+    expect(ctx.subject?.id).toBe("subject");
+    expect(view.container.querySelector("svg")!.getAttribute("data-subject")).toBe("placed");
+    expect(corner(view.container, "topLeft")!.getAttribute("stroke-dasharray")).toBeNull();
+  });
+
+  it("maps a capture frame larger than the decoded video by the frame's own size", () => {
+    let seen: CommandBracketContext | null = null;
+    renderOnSubject(
+      subjectAnchor({ x: 512, y: 288, apparentRadiusPx: 80 }),
+      track(),
+      { render: (ctx) => ((seen = ctx), null) },
+      { width: 2048, height: 1152 },
+    );
+    const g = (seen as CommandBracketContext | null)!.geometry;
+    expect([g.cx, g.cy, g.half]).toEqual([256, 144, 40]);
+  });
+
+  it("falls back to the 1.11 box when the subject is occluded: centred, aimed range, aim-line colour", () => {
+    const t = track({ occluded: true, occluder: "Mun" });
+    const { ctx, view } = seenWith(unseen({ occluded: true }), t);
+    expect([ctx.geometry.cx, ctx.geometry.cy]).toEqual([512, 288]);
+    expect(ctx.geometry).toEqual(bracketGeometry({ x: 0, y: 0, width: 1024, height: 576 }, 20, 576));
+    expect(corner(view.container, "topLeft")!.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(view.container.querySelector("svg")!.getAttribute("data-subject")).toBe("centred");
+    expect(ctx.subject?.occluded).toBe(true);
+  });
+
+  it("falls back to the 1.11 box, corners drawn, when the subject is out of frame", () => {
+    const { ctx, view } = seenWith(unseen({ inFrame: false, occluded: false }));
+    expect([ctx.geometry.cx, ctx.geometry.cy]).toEqual([512, 288]);
+    expect(view.container.querySelectorAll("path")).toHaveLength(2);
+    expect(screen.getByText("IN VIEW · 4.2 km")).toBeTruthy();
+  });
+
+  it("keeps the 1.11 box under the command lock even with the subject in view", () => {
+    /* The authority aims somewhere else; the box is its aim, the anchor a second mark for the consumer. */
+    const locked = track({ authority: AUTHORITY, occluded: true, occluder: "Mun", bracketHalfPx: 30 });
+    const { ctx, view } = seenWith(subjectAnchor(), locked);
+    expect(ctx.geometry).toEqual(bracketGeometry({ x: 0, y: 0, width: 1024, height: 576 }, 30, 576));
+    expect(corner(view.container, "topLeft")!.getAttribute("stroke-dasharray")).toBe("3 2");
+    expect(ctx.subject).toMatchObject({ id: "subject", x: 256, y: 144 });
+    expect(screen.getByText("OCCLUDED MUN · 4.2 km")).toBeTruthy();
+  });
+
+  it("puts the aimed box on the aim anchor while the view turns onto a moved aim", () => {
+    const locked = track({ authority: AUTHORITY, bracketHalfPx: 30 });
+    let seen: CommandBracketContext | null = null;
+    render(
+      <CommandBrackets
+        state={effectiveCommandTrack(locked, 1000)}
+        displayUt={1000}
+        utSource="exact"
+        video={sizedVideo(1024, 576)}
+        overlay={{ render: (ctx) => ((seen = ctx), null) }}
+        subject={subjectAnchor()}
+        subjectFrameSize={{ width: 1024, height: 576 }}
+        aim={{ id: "aim", owner: "kerbcast", observed: true, inFrame: true, x: 700, y: 200 }}
+      />,
+    );
+    const g = (seen as CommandBracketContext | null)!.geometry;
+    expect([g.cx, g.cy]).toEqual([700, 200]);
+    expect(g).toEqual(bracketGeometry({ x: 0, y: 0, width: 1024, height: 576 }, 30, 576, { x: 700, y: 200 }));
+  });
+
+  it("keeps the aimed box on the edge nearest an aim off the frame, with a cue toward it", () => {
+    const locked = track({ authority: AUTHORITY, bracketHalfPx: 30 });
+    let seen: CommandBracketContext | null = null;
+    const view = render(
+      <CommandBrackets
+        state={effectiveCommandTrack(locked, 1000)}
+        displayUt={1000}
+        utSource="exact"
+        video={sizedVideo(1024, 576)}
+        overlay={{ render: (ctx) => ((seen = ctx), null) }}
+        subjectFrameSize={{ width: 1024, height: 576 }}
+        aim={{ id: "aim", owner: "kerbcast", inFrame: false, behind: false, x: 1500, y: 200, observed: false }}
+      />,
+    );
+    const ctx = seen as CommandBracketContext | null;
+    expect(ctx!.aimOffscreen).toBe(true);
+    expect(ctx!.geometry.bottomRight.x).toBeLessThanOrEqual(1024);
+    expect(ctx!.geometry.cy).toBe(200);
+    expect(view.container.querySelector("path[data-aim-cue]")).toBeTruthy();
+  });
+
+  function renderAimed(aimAt: { x: number; y: number }, t: CommandTrackState) {
+    let seen: CommandBracketContext | null = null;
+    const view = render(
+      <CommandBrackets
+        state={effectiveCommandTrack(t, 1000)}
+        displayUt={1000}
+        utSource="exact"
+        video={sizedVideo(1024, 576)}
+        overlay={{ render: (ctx) => ((seen = ctx), null) }}
+        subject={subjectAnchor()}
+        subjectFrameSize={{ width: 1024, height: 576 }}
+        aim={{ id: "aim", owner: "kerbcast", observed: false, inFrame: true, behind: false, ...aimAt }}
+      />,
+    );
+    return { ctx: seen as unknown as CommandBracketContext, view };
+  }
+
+  it("draws the aimed box when it holds the subject, so a craft and its parachute are framed whole", () => {
+    /* The view aims between a capsule and the canopy above it; the subject anchor stays on the centre of mass. */
+    const { ctx, view } = renderAimed({ x: 256, y: 100 }, track({ bracketHalfPx: 60 }));
+    expect(ctx.geometry).toEqual(bracketGeometry({ x: 0, y: 0, width: 1024, height: 576 }, 60, 576, { x: 256, y: 100 }));
+    expect(ctx.subject).toMatchObject({ id: "subject", x: 256, y: 144 });
+    expect(view.container.querySelector("svg")!.getAttribute("data-subject")).toBe("placed");
+  });
+
+  it("keeps the box on the subject when the aimed box does not hold it", () => {
+    const { ctx } = renderAimed({ x: 700, y: 400 }, track({ bracketHalfPx: 60 }));
+    expect([ctx.geometry.cx, ctx.geometry.cy, ctx.geometry.half]).toEqual([256, 144, 40]);
+    expect(ctx.aimOffscreen).toBe(false);
+  });
+
+  it("centres on the frame as before without a subject anchor", () => {
+    const { ctx } = seenWith(null);
+    expect([ctx.geometry.cx, ctx.geometry.cy]).toEqual([512, 288]);
+    expect(ctx.subject).toBeNull();
+  });
+});
+
 describe("CommandBlank", () => {
   it("labels the blank with its reason", () => {
-    render(<CommandBlank reason="Waiting for gonogo" />);
+    render(<CommandBlank reason="Waiting for mission control" />);
     expect(screen.getByRole("status", { name: "Feed blanked" }).textContent).toBe(
-      "Waiting for gonogo",
+      "Waiting for mission control",
     );
   });
 });

package/src/CommandBrackets.tsx

@@ -1,10 +1,19 @@
 import {
+  COMMAND_AIM_ANCHOR_ID,
+  COMMAND_SUBJECT_ANCHOR_ID,
+  KERBCAST_ANCHOR_OWNER,
+  anchorPoint,
   commandReadout,
+  findAnchor,
+  frameToScreen,
   type EffectiveCommandTrack,
+  type FrameAnchor,
   type FrameUtSource,
 } from "@ksp-gonogo/kerbcast";
-import { useEffect, useState, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import styled from "styled-components";
+import { useDisplayedFrame } from "./AnchorMarkers";
+import { useVideoBox } from "./videoBox";
 
 const BRACKET_STROKE_PX = 2;
 const BRACKET_MIN_HALF_PX = 14;
@@ -51,7 +60,10 @@ export interface BracketPoint {
 
 /** The bracket box, in the pixel space of the bracket SVG (the video element's box). */
 export interface BracketGeometry {
-  /** Box centre, which is the aim point. */
+  /**
+   * Box centre: where the subject is in the displayed frame, or the frame
+   * centre (the aim point) while that is not known.
+   */
   cx: number;
   cy: number;
   /** Half the box side in display px. */
@@ -65,20 +77,22 @@ export interface BracketGeometry {
 }
 
 /**
- * The bracket box centred on the displayed frame. `bracketHalfPx` is in
- * capture px of a `frameHeightPx`-tall frame, so it scales by the displayed
- * height; a missing half-size draws the minimum box.
+ * The bracket box, centred on the displayed frame or on `centre` (in the
+ * same pixel space as `rect`). `bracketHalfPx` is in capture px of a
+ * `frameHeightPx`-tall frame, so it scales by the displayed height; a
+ * missing half-size draws the minimum box.
  */
 export function bracketGeometry(
   rect: ContentRect,
   bracketHalfPx: number | null,
   frameHeightPx: number,
+  centre?: BracketPoint | null,
 ): BracketGeometry {
   const scale = frameHeightPx > 0 ? rect.height / frameHeightPx : 1;
   const half = Math.max(BRACKET_MIN_HALF_PX, (bracketHalfPx ?? 0) * scale);
   const arm = Math.max(BRACKET_MIN_ARM_PX, BRACKET_ARM_FRACTION * half * 2);
-  const cx = rect.x + rect.width / 2;
-  const cy = rect.y + rect.height / 2;
+  const cx = centre ? centre.x : rect.x + rect.width / 2;
+  const cy = centre ? centre.y : rect.y + rect.height / 2;
   return {
     cx,
     cy,
@@ -118,6 +132,54 @@ export interface CommandBracketContext {
   displayUt: number;
   utSource: FrameUtSource | "override" | null;
   state: EffectiveCommandTrack;
+  /**
+   * The subject's anchor in the displayed frame: where the game projected
+   * the craft, whether it is in frame and whether something hides it.
+   * `null` without one (an older sidecar or plugin, or before the first
+   * stamped frame), when the box is centred on the frame instead.
+   */
+  subject?: FrameAnchor | null;
+  /**
+   * True while the aim lies off the frame (the view is still turning onto
+   * it): the box then sits on the frame's edge nearest the aim, with a
+   * chevron pointing on toward it.
+   */
+  aimOffscreen?: boolean;
+}
+
+/** Whether `p` lies inside the box `g`. */
+function holds(g: BracketGeometry, p: BracketPoint): boolean {
+  return p.x >= g.topLeft.x && p.x <= g.bottomRight.x && p.y >= g.topLeft.y && p.y <= g.bottomRight.y;
+}
+
+/** `g` moved so the whole box lies inside `rect`. */
+function clampToRect(g: BracketGeometry, rect: ContentRect): BracketGeometry {
+  const clamp = (v: number, lo: number, hi: number) => (lo > hi ? (lo + hi) / 2 : Math.min(hi, Math.max(lo, v)));
+  const cx = clamp(g.cx, rect.x + g.half, rect.x + rect.width - g.half);
+  const cy = clamp(g.cy, rect.y + g.half, rect.y + rect.height - g.half);
+  return {
+    ...g,
+    cx,
+    cy,
+    topLeft: { x: cx - g.half, y: cy - g.half },
+    bottomRight: { x: cx + g.half, y: cy + g.half },
+  };
+}
+
+/** A chevron just outside the box, pointing from its centre toward `toward`. */
+function edgeCue(g: BracketGeometry, toward: BracketPoint): string | null {
+  const dx = toward.x - g.cx;
+  const dy = toward.y - g.cy;
+  const len = Math.hypot(dx, dy);
+  if (!(len > 0)) return null;
+  const ux = dx / len;
+  const uy = dy / len;
+  const tipX = g.cx + ux * (g.half + g.arm);
+  const tipY = g.cy + uy * (g.half + g.arm);
+  const backX = tipX - ux * g.arm;
+  const backY = tipY - uy * g.arm;
+  const w = g.arm * 0.6;
+  return `M${backX - uy * w} ${backY + ux * w}L${tipX} ${tipY}L${backX + uy * w} ${backY - ux * w}`;
 }
 
 /**
@@ -143,8 +205,8 @@ export interface CommandBracketOverlay {
   readout?: (defaultText: string, ctx: CommandBracketContext) => string | null;
 }
 
-function cameraCornerStyle(state: EffectiveCommandTrack): CommandBracketCornerStyle {
-  return state.occluded
+function cameraCornerStyle(occluded: boolean): CommandBracketCornerStyle {
+  return occluded
     ? { colour: COMMAND_BRACKET_COLOURS.occluded, dashed: true }
     : { colour: COMMAND_BRACKET_COLOURS.clear, dashed: false };
 }
@@ -160,41 +222,6 @@ function applyCorner(
   };
 }
 
-/** Tracks the rendered box and intrinsic size of a video element. */
-function useVideoBox(video: HTMLVideoElement | null) {
-  const [box, setBox] = useState({ boxW: 0, boxH: 0, mediaW: 0, mediaH: 0 });
-  useEffect(() => {
-    if (!video) return;
-    const measure = () => {
-      const next = {
-        boxW: video.clientWidth,
-        boxH: video.clientHeight,
-        mediaW: video.videoWidth,
-        mediaH: video.videoHeight,
-      };
-      setBox((prev) =>
-        prev.boxW === next.boxW &&
-        prev.boxH === next.boxH &&
-        prev.mediaW === next.mediaW &&
-        prev.mediaH === next.mediaH
-          ? prev
-          : next,
-      );
-    };
-    measure();
-    const observer = new ResizeObserver(measure);
-    observer.observe(video);
-    video.addEventListener("loadedmetadata", measure);
-    video.addEventListener("resize", measure);
-    return () => {
-      observer.disconnect();
-      video.removeEventListener("loadedmetadata", measure);
-      video.removeEventListener("resize", measure);
-    };
-  }, [video]);
-  return box;
-}
-
 export interface CommandBracketsProps {
   state: EffectiveCommandTrack;
   displayUt: number;
@@ -204,14 +231,35 @@ export interface CommandBracketsProps {
   /** Frame aspect to assume until the video reports its own size. */
   fallbackSize?: { width: number; height: number } | null;
   overlay?: CommandBracketOverlay | null;
+  /**
+   * The subject's anchor in the displayed frame. While it is visible and no
+   * command lock is held the box sits on it and takes its size from it.
+   */
+  subject?: FrameAnchor | null;
+  /** The capture frame size `subject` is in (the stamp's width and height). */
+  subjectFrameSize?: { width: number; height: number } | null;
+  /**
+   * The aim anchor in the displayed frame. The aimed box sits on it rather
+   * than on the frame centre, so it stays on the aim while the view turns
+   * onto a moved one.
+   */
+  aim?: FrameAnchor | null;
 }
 
 /**
- * Target brackets for a command camera feed: the aim point sits at frame
- * centre, so the box is always centred on the displayed video. Both corners
- * show the camera axis by default; an overlay can restyle either and draw
- * its own marks. Without a fix, or over a blanked feed, the default corners
- * are left out but the overlay and readout still run.
+ * Target brackets for a command camera feed. With no command lock held and
+ * the subject's anchor visible in the displayed frame, the box sits on the
+ * craft where the game saw it, so it stays on the craft when an aim points
+ * elsewhere; while the aimed box is in frame and holds the craft it is drawn
+ * instead, since it frames the craft's whole extent as the view does. Otherwise (the anchor out of frame or occluded, which then
+ * carries no position, no anchor at all, or a command authority holding the
+ * lock) the box is the 1.11 one: on the aim (the frame centre, or the aim
+ * anchor while the view turns onto a moved aim), sized from the aimed range,
+ * red and dashed when the aim line is occluded. `ctx.subject` always
+ * carries the anchor, so a consumer can draw it as a second mark. An overlay
+ * can restyle either corner and draw its own marks. Without a fix, or over a
+ * blanked feed, the default corners are left out but the overlay and readout
+ * still run.
  */
 export function CommandBrackets({
   state,
@@ -220,6 +268,9 @@ export function CommandBrackets({
   video,
   fallbackSize,
   overlay,
+  subject,
+  subjectFrameSize,
+  aim,
 }: CommandBracketsProps) {
   const { boxW, boxH, mediaW, mediaH } = useVideoBox(video);
   const rect = containedContentRect(
@@ -228,7 +279,36 @@ export function CommandBrackets({
     mediaW || fallbackSize?.width || 0,
     mediaH || fallbackSize?.height || 0,
   );
-  const g = bracketGeometry(rect, state.bracketHalfPx, state.frameHeightPx || mediaH);
+  const frameW = subjectFrameSize?.width || mediaW || fallbackSize?.width || 0;
+  const frameH = subjectFrameSize?.height || mediaH || fallbackSize?.height || 0;
+  /* Under the lock the box is the authority's aim, as in 1.11. */
+  const point =
+    subject && !state.authority && frameW > 0 && frameH > 0 ? anchorPoint(subject) : null;
+  const placed = point !== null;
+  const aimPoint = aim && frameW > 0 && frameH > 0 ? anchorPoint(aim) : null;
+  const aimScreen = aimPoint ? frameToScreen(aimPoint, frameW, frameH, { ...rect, scale: 1 }) : null;
+  const aimOffscreen = !point && !!aimScreen && (!aim?.inFrame || !!aim?.behind);
+  const aimed = bracketGeometry(rect, state.bracketHalfPx, state.frameHeightPx || mediaH, aimScreen);
+  const subjectScreen = point ? frameToScreen(point, frameW, frameH, { ...rect, scale: 1 }) : null;
+  /*
+   * The aimed box, when it is in frame and holds the subject, frames the
+   * craft as the view does: around a craft and its open parachute rather
+   * than a sphere about its centre of mass.
+   */
+  const framed =
+    !!subjectScreen &&
+    !!aimScreen &&
+    !!aim?.inFrame &&
+    !aim?.behind &&
+    state.bracketHalfPx != null &&
+    holds(aimed, subjectScreen);
+  const unclamped =
+    subjectScreen && !framed
+      ? bracketGeometry(rect, subject?.apparentRadiusPx ?? null, frameH, subjectScreen)
+      : aimed;
+  /* An aim off the frame (mid-slew) keeps the box on the edge nearest it, with a cue pointing on. */
+  const g = aimOffscreen ? clampToRect(unclamped, rect) : unclamped;
+  const cue = aimOffscreen && aimScreen ? edgeCue(g, aimScreen) : null;
   const ctx: CommandBracketContext = {
     geometry: g,
     width: boxW,
@@ -236,23 +316,32 @@ export function CommandBrackets({
     displayUt,
     utSource: utSource ?? null,
     state,
+    subject: subject ?? null,
+    aimOffscreen,
   };
   const overrides =
     typeof overlay?.corners === "function" ? overlay.corners(ctx) : overlay?.corners;
-  const camera = cameraCornerStyle(state);
+  const camera = cameraCornerStyle(placed ? !!subject?.occluded : state.occluded);
   const topLeft = applyCorner(camera, overrides?.topLeft);
   const bottomRight = applyCorner(camera, overrides?.bottomRight);
   const { x: left, y: top } = g.topLeft;
   const { x: right, y: bottom } = g.bottomRight;
   const blanked = !!state.blank;
   const drawCorners = state.hasFix && !blanked;
-  const defaultReadout = blanked ? "" : commandReadout(state);
+  /* A feed waiting for its target says so itself; NO FIX would only repeat it. */
+  const defaultReadout = blanked || state.waitingForTarget ? "" : commandReadout(state);
   const readout = overlay?.readout ? overlay.readout(defaultReadout, ctx) : defaultReadout;
 
   return (
     <>
       {(drawCorners || overlay?.render) && (
-        <BracketSvg aria-hidden="true" data-camera-axis={state.camera} width={boxW} height={boxH}>
+        <BracketSvg
+          aria-hidden="true"
+          data-camera-axis={state.camera}
+          data-subject={subject ? (placed ? "placed" : "centred") : undefined}
+          width={boxW}
+          height={boxH}
+        >
           {drawCorners && !topLeft.hidden && (
             <path
               data-corner="topLeft"
@@ -273,6 +362,15 @@ export function CommandBrackets({
               style={{ stroke: bottomRight.colour }}
             />
           )}
+          {drawCorners && cue && (
+            <path
+              data-aim-cue=""
+              d={cue}
+              fill="none"
+              strokeWidth={g.stroke}
+              style={{ stroke: camera.colour }}
+            />
+          )}
           {overlay?.render && <g data-bracket-overlay="">{overlay.render(ctx)}</g>}
         </BracketSvg>
       )}
@@ -288,6 +386,25 @@ export function CommandBrackets({
   );
 }
 
+/**
+ * CommandBrackets fed with the subject's and the aim's anchors from each frame of
+ * `flightId` that `video` presents. Re-renders at the frame rate, which is
+ * why it is its own component.
+ */
+export function LiveCommandBrackets({
+  flightId,
+  ...props
+}: CommandBracketsProps & { flightId: number | null }) {
+  const frame = useDisplayedFrame(true, flightId, props.video);
+  const subject = findAnchor(frame?.anchors, COMMAND_SUBJECT_ANCHOR_ID, KERBCAST_ANCHOR_OWNER);
+  const aim = findAnchor(frame?.anchors, COMMAND_AIM_ANCHOR_ID, KERBCAST_ANCHOR_OWNER);
+  const size =
+    frame?.frameWidth && frame.frameHeight
+      ? { width: frame.frameWidth, height: frame.frameHeight }
+      : null;
+  return <CommandBrackets {...props} subject={subject} subjectFrameSize={size} aim={aim} />;
+}
+
 /** Reason a command feed is blanked, centred on black over the feed. */
 export function CommandBlank({ reason }: { reason: string }) {
   return (

package/src/FeedActionBar.test.ts

@@ -13,6 +13,7 @@ import { partitionActionBarEntries } from "./FeedActionBar";
 interface Entry {
   id: string;
   stateful?: boolean;
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
 }
@@ -41,6 +42,27 @@ describe("partitionActionBarEntries", () => {
     expect(ids(overflow)).toEqual(["quality", "pip", "fullscreen"]);
   });
 
+  it("keeps an inline entry out of overflow without changing the split", () => {
+    const base: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "quality" },
+      { id: "pip" },
+      { id: "fullscreen" },
+    ];
+    const pinned = base.map((e) => (e.id === "fullscreen" ? { ...e, inline: true } : e));
+    const { primary, overflow } = partitionActionBarEntries(pinned);
+    expect(ids(primary)).toEqual(["tracking", "fullscreen"]);
+    expect(ids(overflow)).toEqual(["quality", "pip"]);
+
+    const twoNonStateful: Entry[] = [
+      { id: "tracking", stateful: true },
+      { id: "rec", stateful: true },
+      { id: "pip" },
+      { id: "fullscreen", inline: true },
+    ];
+    expect(ids(partitionActionBarEntries(twoNonStateful).overflow)).toEqual(["pip"]);
+  });
+
   it("never collapses a single non-stateful item, even with total >= 4", () => {
     const entries: Entry[] = [
       { id: "tracking", stateful: true },

package/src/FeedActionBar.tsx

@@ -29,7 +29,7 @@
 import { Fragment, useId } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { usePortalMenu } from "./menuPositioning";
+import { menuPortalRoot, usePortalMenu } from "./menuPositioning";
 
 /**
  * A consumer-supplied action rendered into a feed's action bar. Lets a host
@@ -82,6 +82,7 @@ const OVERFLOW_MIN_NON_STATEFUL = 2;
 
 interface Partitionable {
   stateful?: boolean;
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
 }
@@ -113,8 +114,8 @@ export function partitionActionBarEntries<T extends Partitionable>(
     return { primary: overflowable, overflow: [], pinnedTrailing };
   }
   return {
-    primary: overflowable.filter((e) => e.stateful),
-    overflow: nonStateful,
+    primary: overflowable.filter((e) => e.stateful || e.inline),
+    overflow: nonStateful.filter((e) => !e.inline),
     pinnedTrailing,
   };
 }
@@ -133,6 +134,12 @@ export interface FeedActionBarEntry {
   id: string;
   label: string;
   stateful?: boolean;
+  /**
+   * Keeps a non-stateful entry out of the ⋮ menu without changing the split:
+   * it still counts as non-stateful toward the overflow threshold, so the
+   * rest of the bar lays out exactly as it would without the flag.
+   */
+  inline?: boolean;
   order?: number;
   pinnedTrailing?: boolean;
   render: () => React.ReactNode;
@@ -244,7 +251,7 @@ export function FeedActionBar({ leading, entries, className }: FeedActionBarProp
               </OverflowMenuItem>
             ))}
           </OverflowMenu>,
-          document.body,
+          menuPortalRoot(),
         )}
       {pinnedTrailing.map((e) => (
         <Fragment key={e.id}>{e.render()}</Fragment>

package/src/KerbalFaceFeed.tsx

@@ -3,7 +3,7 @@
  *
  * Renders ONE kerbal's face-camera stream in a fixed SQUARE frame. It is the
  * reusable building block a crew bar (kerbcast web) or a mission-control
- * surface (gonogo) composes: identity-keyed by `flightId`, it binds the live
+ * surface composes: identity-keyed by `flightId`, it binds the live
  * `MediaStream` to a persistent `<video>` and NEVER remounts that element on
  * re-layout (the "never remount a live feed" rule — the same srcObject-via-ref
  * technique `CameraFeed` uses).

package/src/RecordingsTray.test.tsx

@@ -153,6 +153,21 @@ describe("RecordingsTray - single clips", () => {
     expect(screen.getByText(/unsaved clips/i)).toBeTruthy();
   });
 
+  it("says why a clip stopped on its own, and nothing for one a person stopped", () => {
+    fakeStoreSeed.recordings = [
+      makeRecording({ recordingId: "rec-1", endedBy: "camera-gone" }),
+      makeRecording({ recordingId: "rec-2", endedBy: "disconnected" }),
+      makeRecording({ recordingId: "rec-3", endedBy: "feed-closed" }),
+      makeRecording({ recordingId: "rec-4", endedBy: "user" }),
+    ];
+    render(<RecordingsTray />);
+    expect(screen.getAllByText(/stopped:/i).map((el) => el.textContent)).toEqual([
+      "Stopped: the camera went away",
+      "Stopped: the connection was lost",
+      "Stopped: its feed was closed",
+    ]);
+  });
+
   it("falls back to 'Camera <flightId>' when no cameraLabel prop is given", () => {
     fakeStoreSeed.recordings = [makeRecording({ recordingId: "rec-1", flightId: 7 })];
     render(<RecordingsTray />);