diff --git a/.gitignore b/.gitignore
index bdc6661..7dccda2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,7 @@ dist/
# Environment
.env.local
.env.*.local
+.pnpm-store/
+
+# Local recording output
+/trace/
\ No newline at end of file
diff --git a/apps/extension/src/content/RecordOverlay.tsx b/apps/extension/src/content/RecordOverlay.tsx
index 6cd2578..c033aeb 100644
--- a/apps/extension/src/content/RecordOverlay.tsx
+++ b/apps/extension/src/content/RecordOverlay.tsx
@@ -1,4 +1,5 @@
import { useTranslation } from "@browser-skill/i18n/react";
+import type { FrameCaptureFailure, FrameCaptureStatus } from "@/transport/types";
import {
type PointerEvent as ReactPointerEvent,
useCallback,
@@ -21,6 +22,8 @@ export interface RecordRequestData {
type Props = {
request: RecordRequestData | null;
+ captureStatus?: FrameCaptureStatus;
+ captureFailures?: FrameCaptureFailure[];
};
const VIEWPORT_MARGIN = 16;
@@ -52,7 +55,11 @@ function clampDragPos(
};
}
-export function RecordOverlay({ request }: Props) {
+export function RecordOverlay({
+ request,
+ captureStatus = "complete",
+ captureFailures = [],
+}: Props) {
const { t } = useTranslation("extension");
const [show, setShow] = useState(false);
const [elapsedSeconds, setElapsedSeconds] = useState(0);
@@ -154,6 +161,7 @@ export function RecordOverlay({ request }: Props) {
const introVisible = elapsedSeconds * 1_000 < INTRO_DURATION_MS;
const positioned = dragPos !== null;
+ const partialCapture = captureStatus === "partial" || captureFailures.length > 0;
const defaultTransform = show
? "translateX(-50%) translateY(0)"
: "translateX(-50%) translateY(8px)";
@@ -208,8 +216,9 @@ export function RecordOverlay({ request }: Props) {
data-slot="record-overlay-status"
style={{
display: "flex",
- alignItems: "center",
- gap: 8,
+ flexDirection: "column",
+ alignItems: "flex-start",
+ gap: 2,
minWidth: 0,
flex: 1,
borderRadius: 9999,
@@ -218,41 +227,57 @@ export function RecordOverlay({ request }: Props) {
paddingRight: 4,
}}
>
-
-
- {introVisible ? t("recordOverlay.recording") : formatElapsed(elapsedSeconds)}
-
+
+
+
+ {introVisible ? t("recordOverlay.recording") : formatElapsed(elapsedSeconds)}
+
+
+ {partialCapture ? (
+
+ {t("recordOverlay.partialCapture")}
+
+ ) : null}