@agent-native/core 0.69.0 → 0.70.1

package/corpus/templates/clips/desktop/src/lib/bubble-webrtc.ts

@@ -73,6 +73,101 @@ import { emit, listen, type UnlistenFn } from "@tauri-apps/api/event";
 
 const CONNECT_TIMEOUT_MS = 3000;
 
+// ---- bitrate tuning for the loopback preview ----------------------------
+//
+// This is a SAME-MACHINE loopback (popover → bubble, both on 127.0.0.1),
+// so there is effectively no bandwidth limit. Left untuned, WebKit's
+// congestion controller still starts the encoder at libwebrtc's cautious
+// ~300 kbps default and ramps up over several seconds, and with the
+// default `balanced` degradation preference it downscales the picture
+// while the bitrate is low. That produced the "bubble is blurry for the
+// first ~10s, then sharpens" regression after the bubble stopped owning a
+// direct local camera stream. We pin a high start/max bitrate and forbid
+// resolution downscaling so the bubble is crisp from the first frame.
+//
+// 720p webcam is comfortable at a few Mbps; these are generous, not silly.
+const BUBBLE_START_BITRATE_KBPS = 2500;
+const BUBBLE_MIN_BITRATE_KBPS = 1200;
+const BUBBLE_MAX_BITRATE_KBPS = 5000;
+
+/**
+ * Pin the sender to a high, fixed bitrate and forbid resolution
+ * downscaling. Called after `setLocalDescription` so `encodings` is
+ * populated on every WebKit build. Best-effort — older WebViews may not
+ * support every field, so we swallow failures.
+ */
+async function configureBubbleSender(
+  sender: RTCRtpSender | null,
+): Promise<void> {
+  if (!sender) return;
+  try {
+    const params = sender.getParameters();
+    if (!params.encodings || params.encodings.length === 0) {
+      // Some WebKit builds report empty encodings until the first
+      // negotiation — seed one so our settings have somewhere to land.
+      params.encodings = [{}];
+    }
+    params.encodings[0].maxBitrate = BUBBLE_MAX_BITRATE_KBPS * 1000;
+    params.encodings[0].maxFramerate = 30;
+    // `minBitrate` is non-standard but honored by libwebrtc-based stacks
+    // (WebKit, Chromium); harmless where unsupported.
+    (params.encodings[0] as { minBitrate?: number }).minBitrate =
+      BUBBLE_MIN_BITRATE_KBPS * 1000;
+    // Never trade resolution for framerate — a soft bubble looks broken;
+    // a marginally lower fps does not.
+    params.degradationPreference = "maintain-resolution";
+    await sender.setParameters(params);
+  } catch (err) {
+    console.warn("[clips-bubble-webrtc] setParameters failed", err);
+  }
+}
+
+/**
+ * Raise the encoder's START bitrate via SDP so it doesn't begin at
+ * libwebrtc's cautious default and slowly climb (the visible quality
+ * ramp). WebKit reads these codec params from our own local description
+ * and applies them to our encoder. Also stamps a high `b=AS`/`b=TIAS`
+ * ceiling on the video m-section.
+ */
+function boostBubbleVideoBitrate(sdp: string | undefined): string {
+  if (!sdp) return sdp ?? "";
+  const eol = sdp.includes("\r\n") ? "\r\n" : "\n";
+  const lines = sdp.split(/\r\n|\n/);
+  const out: string[] = [];
+  let inVideo = false;
+  for (const line of lines) {
+    if (line.startsWith("m=")) {
+      inVideo = line.startsWith("m=video");
+      out.push(line);
+      continue;
+    }
+    if (inVideo && line.startsWith("c=")) {
+      out.push(line);
+      // b=AS is kbps; b=TIAS is bps. Both must follow the c= line.
+      out.push(`b=AS:${BUBBLE_MAX_BITRATE_KBPS}`);
+      out.push(`b=TIAS:${BUBBLE_MAX_BITRATE_KBPS * 1000}`);
+      continue;
+    }
+    if (
+      inVideo &&
+      line.startsWith("a=fmtp:") &&
+      // Skip RTX/FEC payloads (their fmtp carries `apt=`); only primary
+      // codecs honor the x-google-* hints.
+      !line.includes("apt=") &&
+      !line.includes("x-google-start-bitrate")
+    ) {
+      out.push(
+        `${line};x-google-start-bitrate=${BUBBLE_START_BITRATE_KBPS}` +
+          `;x-google-min-bitrate=${BUBBLE_MIN_BITRATE_KBPS}` +
+          `;x-google-max-bitrate=${BUBBLE_MAX_BITRATE_KBPS}`,
+      );
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join(eol);
+}
+
 export interface BubbleWebrtcHandle {
   /** Tear down the peer connection and unsubscribe listeners. */
   stop(): void;
@@ -243,11 +338,23 @@ export function startBubbleWebrtc(
       }
     };
 
+    // Hint the encoder to PRESERVE RESOLUTION. A raw camera track defaults
+    // to "motion" semantics — under any bitrate pressure WebKit downscales
+    // the picture to protect the frame rate, which on this loopback shows
+    // up as a soft/blurry bubble. "detail" flips the default toward keeping
+    // pixels, complementing the explicit `maintain-resolution` set below.
+    try {
+      videoTrack.contentHint = "detail";
+    } catch {
+      // contentHint is a harmless no-op on older WebViews.
+    }
+
     // Add the camera video track. WebRTC will renegotiate if the track
     // id changes, but we only add once per handshake so this is a
-    // one-shot.
+    // one-shot. Capture the sender so we can pin its bitrate below.
+    let sender: RTCRtpSender | null = null;
     try {
-      localPc.addTrack(videoTrack, stream);
+      sender = localPc.addTrack(videoTrack, stream);
     } catch (err) {
       console.warn("[clips-bubble-webrtc] addTrack failed:", err);
       onFailure("add-track-failed");
@@ -258,6 +365,10 @@ export function startBubbleWebrtc(
     let offer: RTCSessionDescriptionInit;
     try {
       offer = await localPc.createOffer();
+      // Raise the encoder's start/max bitrate before we commit the local
+      // description so the bubble is sharp immediately instead of ramping
+      // up over ~10s. See `boostBubbleVideoBitrate`.
+      offer = { ...offer, sdp: boostBubbleVideoBitrate(offer.sdp) };
       await localPc.setLocalDescription(offer);
     } catch (err) {
       console.warn(
@@ -270,6 +381,12 @@ export function startBubbleWebrtc(
     }
     if (stopped || myId !== handshakeId) return;
 
+    // Now that the local description is set, `getParameters().encodings`
+    // is populated on every WebKit build — pin the bitrate floor/ceiling
+    // and forbid resolution downscaling.
+    await configureBubbleSender(sender);
+    if (stopped || myId !== handshakeId) return;
+
     try {
       await emit("clips:webrtc-offer", {
         handshakeId: myId,

package/corpus/templates/clips/desktop/src/lib/recorder.ts

@@ -1473,6 +1473,22 @@ async function showRegionGuidesForRecording(wantsScreen: boolean) {
   });
 }
 
+// Frame the chosen screen region with a live border so the user can see exactly
+// what's being captured throughout the countdown and recording. The overlay is
+// capture-excluded and draws its stroke outside the captured pixels, so it never
+// lands in the video. Torn down with the rest of the recording chrome on stop.
+async function showRegionRecordBorder(region: RegionCaptureRect | null) {
+  if (!region) return;
+  await invoke("show_region_record_border", {
+    x: region.x,
+    y: region.y,
+    width: region.width,
+    height: region.height,
+  }).catch((err) => {
+    console.warn("[clips-recorder] show_region_record_border failed:", err);
+  });
+}
+
 async function runRecordingCountdown(wantsScreen: boolean, audioCue: AudioCue) {
   const countdownEvent = waitForCountdownEvent(
     COUNTDOWN_EVENT_TIMEOUT_MS,
@@ -1566,6 +1582,10 @@ async function startNativeFullscreenRecording(
 
     if (params.source === "region") {
       captureRegion = await selectRegionForRecording();
+      // Frame the selected area now so it stays visible through the countdown
+      // and the whole recording. hide_recording_chrome / hide_overlays tear it
+      // down on stop, cancel, and the error paths below.
+      await showRegionRecordBorder(captureRegion);
     }
 
     if (localOnly && localRecordingMode === "separate" && wantsCamera) {

package/corpus/templates/clips/desktop/src/main.tsx

@@ -12,6 +12,7 @@ import { MeetingNub } from "./overlays/meeting-nub";
 import { FlowBar } from "./overlays/flow-bar";
 import { RecordingPill } from "./overlays/recording-pill";
 import { RegionGuideEditor, RegionGuides } from "./overlays/region-guides";
+import { RegionRecordBorder } from "./overlays/region-record-border";
 import "./styles.css";
 
 /**
@@ -55,6 +56,8 @@ function pickRoute(route: string): React.ReactElement {
       return <RegionGuideEditor />;
     case "region-capture-selector":
       return <RegionGuideEditor mode="capture" />;
+    case "region-record-border":
+      return <RegionRecordBorder />;
     default:
       return <App />;
   }

package/corpus/templates/clips/desktop/src/overlays/countdown.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { emit } from "@tauri-apps/api/event";
 import { getCurrentWindow } from "@tauri-apps/api/window";
+import { IconPlayerSkipForwardFilled, IconX } from "@tabler/icons-react";
 
 const COUNTDOWN_STEP_MS = 1000;
 
@@ -62,8 +63,26 @@ export function Countdown() {
 
   return (
     <div className="countdown-root">
-      <div className="countdown-number" key={n} aria-live="polite">
-        {n > 0 ? n : ""}
+      <div className="countdown-controls">
+        <button
+          type="button"
+          className="countdown-control countdown-control-cancel"
+          aria-label="Cancel recording"
+          onClick={() => closeWithEvent("clips:countdown-cancel")}
+        >
+          <IconX size={30} stroke={2.4} />
+        </button>
+        <div className="countdown-number" key={n} aria-live="polite">
+          {n > 0 ? n : ""}
+        </div>
+        <button
+          type="button"
+          className="countdown-control countdown-control-skip"
+          aria-label="Skip countdown and start recording now"
+          onClick={() => closeWithEvent("clips:countdown-done")}
+        >
+          <IconPlayerSkipForwardFilled size={28} />
+        </button>
       </div>
       <div className="countdown-hint" aria-label="Countdown shortcuts">
         <span>

package/corpus/templates/clips/desktop/src/overlays/region-record-border.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+interface BorderRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+function clamp01(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(1, Math.max(0, value));
+}
+
+/**
+ * The live recording region is handed to this overlay window as a normalized
+ * rect in the URL query (`?region=x,y,width,height`) so it never has to wait
+ * on a Tauri event (which could race the webview load). All four values are
+ * fractions [0,1] of the recording monitor — the same space the region-capture
+ * selector emitted them in.
+ */
+function parseRect(search: string): BorderRect | null {
+  const raw = new URLSearchParams(search).get("region");
+  if (!raw) return null;
+  const parts = raw.split(",").map((value) => Number.parseFloat(value));
+  if (parts.length !== 4 || parts.some((value) => !Number.isFinite(value))) {
+    return null;
+  }
+  const [x, y, width, height] = parts;
+  if (width <= 0 || height <= 0) return null;
+  return {
+    x: clamp01(x),
+    y: clamp01(y),
+    width: clamp01(width),
+    height: clamp01(height),
+  };
+}
+
+/**
+ * A thin frame painted around the screen region currently being recorded. The
+ * window itself is full-screen, click-through, and capture-excluded (see
+ * `show_region_record_border` on the Rust side). The frame is drawn entirely
+ * OUTWARD via an outset box-shadow with no fill, so its pixels sit just outside
+ * the captured rect and never leak into the recording even on the macOS 15.4+
+ * builds where `NSWindowSharingNone` is occasionally bypassed.
+ */
+export function RegionRecordBorder() {
+  const [rect] = useState<BorderRect | null>(() =>
+    typeof window === "undefined" ? null : parseRect(window.location.search),
+  );
+
+  useEffect(() => {
+    if (rect) return;
+    // No usable region — close the overlay so an empty window never lingers.
+    getCurrentWindow()
+      .close()
+      .catch(() => {});
+  }, [rect]);
+
+  if (!rect) return null;
+
+  return (
+    <div className="region-record-border-layer" aria-hidden>
+      <div
+        className="region-record-border-frame"
+        style={{
+          left: `${rect.x * 100}%`,
+          top: `${rect.y * 100}%`,
+          width: `${rect.width * 100}%`,
+          height: `${rect.height * 100}%`,
+        }}
+      />
+    </div>
+  );
+}

package/corpus/templates/clips/desktop/src/styles.css

@@ -2037,6 +2037,70 @@ body[data-clips-route="recording-pill"] #root {
   pointer-events: none;
 }
 
+/*
+ * Horizontal row of [cancel] [number] [skip]. The two circular buttons are
+ * absolutely centered at exactly ±200px (logical) from the row center so the
+ * native cursor-poll hit-rects in clips/mod.rs (CONTROL_OFFSET_X = 200.0,
+ * CONTROL_DIAMETER = 64.0) line up with the rendered controls. Keep these
+ * numbers in sync with that Rust code.
+ */
+.countdown-controls {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.countdown-control {
+  position: absolute;
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 50%;
+  background: rgba(10, 12, 16, 0.42);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
+  color: #ffffff;
+  cursor: pointer;
+  pointer-events: auto;
+  backdrop-filter: blur(8px);
+  transform: translateY(-50%);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.1s ease;
+}
+
+.countdown-control-cancel {
+  /* center at -200px from row center: -200 - (64 / 2) = -232px */
+  left: -232px;
+}
+
+.countdown-control-skip {
+  /* center at +200px from row center: 200 - (64 / 2) = 168px */
+  right: -232px;
+}
+
+.countdown-control:hover {
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(255, 255, 255, 0.95);
+  color: #0b0d12;
+}
+
+.countdown-control:active {
+  transform: translateY(-50%) scale(0.94);
+}
+
+.countdown-control:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.9);
+  outline-offset: 2px;
+}
+
 .countdown-number {
   font-size: 240px;
   font-weight: 800;
@@ -3749,6 +3813,55 @@ body[data-clips-route="recording-pill"] #root {
   backdrop-filter: blur(14px);
 }
 
+/* ------------------------------------------------------------------------- */
+/* Overlay: live recording-region border                                      */
+/* ------------------------------------------------------------------------- */
+
+.region-record-border-layer {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.region-record-border-frame {
+  position: absolute;
+  border-radius: 5px;
+  /* No fill, and the stroke is painted OUTWARD with an outset box-shadow so it
+     lands just outside the captured rect — never inside the recorded video. */
+  box-shadow:
+    0 0 0 2px rgba(239, 68, 68, 0.95),
+    0 0 0 4px rgba(239, 68, 68, 0.32),
+    0 0 26px 6px rgba(239, 68, 68, 0.26);
+  animation: region-record-border-pulse 1.8s ease-in-out infinite;
+}
+
+/* Gentle pulse that mirrors the live recording dot, signalling "recording
+   now". Honour reduced-motion by holding the frame steady. */
+@keyframes region-record-border-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 2px rgba(239, 68, 68, 0.9),
+      0 0 0 4px rgba(239, 68, 68, 0.28),
+      0 0 22px 5px rgba(239, 68, 68, 0.2);
+  }
+  50% {
+    box-shadow:
+      0 0 0 2px rgba(239, 68, 68, 1),
+      0 0 0 4px rgba(239, 68, 68, 0.44),
+      0 0 30px 8px rgba(239, 68, 68, 0.34);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .region-record-border-frame {
+    animation: none;
+  }
+}
+
 @keyframes flow-bar-in {
   from {
     opacity: 0;
@@ -3799,11 +3912,15 @@ body[data-clips-route="recording-pill"] #root {
 }
 
 /* Collapsed (not expanded). Shrinks to dot + waveform; controls revealed via
-   CSS :hover which works at the WebKit level even when the app is unfocused. */
+   CSS :hover which works at the WebKit level even when the app is unfocused.
+   Top-anchored (not centered) inside the headroom-sized window so the hover
+   reveal of the drag grip grows the capsule strictly DOWNWARD — centering it
+   would split the growth and raise the top edge, sliding buttons up under the
+   cursor and causing misclicks. */
 .pill-inner-compact {
   width: fit-content;
   height: fit-content;
-  align-self: center;
+  align-self: flex-start;
   border-radius: 18px;
 }
 

package/corpus/templates/clips/desktop/src-tauri/capabilities/default.json

@@ -15,7 +15,8 @@
     "flow-bar",
     "recording-pill",
     "region-guides",
-    "region-guide-editor"
+    "region-guide-editor",
+    "region-record-border"
   ],
   "permissions": [
     "core:default",

package/corpus/templates/clips/desktop/src-tauri/src/clips/mod.rs

@@ -4,6 +4,7 @@ use std::path::PathBuf;
 use std::process::Command;
 #[cfg(target_os = "macos")]
 use std::process::Stdio;
+use std::sync::atomic::{AtomicBool, Ordering};
 use std::thread;
 use std::time::Duration;
 use tauri::{
@@ -26,11 +27,23 @@ use crate::util::{
 /// React bundle with a hash route that `main.tsx` uses to pick the component.
 const COUNTDOWN_LABEL: &str = "countdown";
 const TOOLBAR_LABEL: &str = "toolbar";
+// Geometry of the two circular cancel/skip buttons that flank the countdown
+// number. These MUST stay in sync with the CSS in
+// `templates/clips/desktop/src/styles.css` (`.countdown-control` is 64px and
+// its center sits ±200px logical from the window center). A few px of slop is
+// added to each hit-rect so edge clicks register.
+const COUNTDOWN_CONTROL_OFFSET_X: f64 = 200.0;
+const COUNTDOWN_CONTROL_DIAMETER: f64 = 64.0;
+const COUNTDOWN_CONTROL_HIT_PAD: f64 = 8.0;
+// Guards the single cursor-poll loop that toggles click-through on the
+// countdown overlay so only the button zones are interactive.
+static COUNTDOWN_CONTROL_TRACKING: AtomicBool = AtomicBool::new(false);
 const BUBBLE_LABEL: &str = "bubble";
 const FINALIZING_LABEL: &str = "finalizing";
 const FLOW_BAR_LABEL: &str = "flow-bar";
 const REGION_GUIDES_LABEL: &str = "region-guides";
 const REGION_GUIDE_EDITOR_LABEL: &str = "region-guide-editor";
+const REGION_RECORD_BORDER_LABEL: &str = "region-record-border";
 
 /// Physical-pixel bubble sizes. Logical px on retina = physical / 2, so these
 /// map to ~96 (small) and ~180 (medium) logical px — matching Loom's camera
@@ -303,6 +316,7 @@ pub async fn show_countdown(app: AppHandle) -> Result<(), String> {
     dlog!("[clips-tray] show_countdown invoked");
     mark_popover_shown(&app);
     if let Some(existing) = app.get_webview_window(COUNTDOWN_LABEL) {
+        stop_countdown_control_tracking();
         let _ = app.emit("clips:countdown-shortcuts-active", false);
         let _ = existing.close();
     }
@@ -339,10 +353,68 @@ pub async fn show_countdown(app: AppHandle) -> Result<(), String> {
     configure_overlay_behavior(&win);
     let _ = win.show();
     let _ = app.emit("clips:countdown-shortcuts-active", true);
+    start_countdown_control_tracking(&app);
     dlog!("[clips-tray] countdown shown");
     Ok(())
 }
 
+/// True when the global cursor sits inside either circular cancel/skip button
+/// zone of the countdown overlay. The controls row is centered in the window;
+/// each button's center is `COUNTDOWN_CONTROL_OFFSET_X` logical px to the
+/// left/right of the window center, vertically at the window center. Cursor,
+/// window position, and window size all come from Tauri in physical px with a
+/// desktop top-left origin, so we convert the logical button geometry using the
+/// window's scale factor and do a plain point-in-rect test.
+fn cursor_over_countdown_control(window: &WebviewWindow) -> bool {
+    let (Ok(c), Ok(p), Ok(s), Ok(scale)) = (
+        window.cursor_position(),
+        window.outer_position(),
+        window.outer_size(),
+        window.scale_factor(),
+    ) else {
+        return false;
+    };
+    let center_x = p.x as f64 + s.width as f64 / 2.0;
+    let center_y = p.y as f64 + s.height as f64 / 2.0;
+    let half = (COUNTDOWN_CONTROL_DIAMETER / 2.0 + COUNTDOWN_CONTROL_HIT_PAD) * scale;
+    let offset = COUNTDOWN_CONTROL_OFFSET_X * scale;
+    let in_button = |bx: f64| -> bool {
+        c.x >= bx - half && c.x <= bx + half && c.y >= center_y - half && c.y <= center_y + half
+    };
+    in_button(center_x - offset) || in_button(center_x + offset)
+}
+
+/// Poll the cursor against the two button zones while the countdown overlay is
+/// alive, toggling `set_ignore_cursor_events` so the buttons are clickable only
+/// when the cursor is over them and the rest of the screen stays click-through.
+/// Idempotent; mirrors `start_pill_hover_tracking` in `recording_indicator.rs`.
+fn start_countdown_control_tracking(app: &AppHandle) {
+    if COUNTDOWN_CONTROL_TRACKING.swap(true, Ordering::SeqCst) {
+        return;
+    }
+    let app = app.clone();
+    tauri::async_runtime::spawn(async move {
+        let mut prev_interactive = false;
+        while COUNTDOWN_CONTROL_TRACKING.load(Ordering::Relaxed) {
+            let Some(win) = app.get_webview_window(COUNTDOWN_LABEL) else {
+                break;
+            };
+            let over = cursor_over_countdown_control(&win);
+            if over != prev_interactive {
+                prev_interactive = over;
+                // ignore_cursor_events(false) => clicks land on the buttons.
+                let _ = win.set_ignore_cursor_events(!over);
+            }
+            tokio::time::sleep(Duration::from_millis(70)).await;
+        }
+        COUNTDOWN_CONTROL_TRACKING.store(false, Ordering::SeqCst);
+    });
+}
+
+fn stop_countdown_control_tracking() {
+    COUNTDOWN_CONTROL_TRACKING.store(false, Ordering::SeqCst);
+}
+
 /// Full-screen transparent overlay that shows compact bottom-left progress
 /// while the recorder flushes its final chunks and awaits the server finalize.
 /// Rendered immediately after the user clicks Stop so they don't stare at a
@@ -448,6 +520,65 @@ pub async fn hide_region_guides(app: AppHandle) -> Result<(), String> {
     Ok(())
 }
 
+/// Live border framing the region currently being recorded. Like the region
+/// guides this is a full-screen, click-through, capture-excluded overlay — but
+/// the rect is ephemeral (it belongs to one recording, not the saved preset),
+/// so it's handed in via the URL query rather than read from config. The React
+/// view paints only an OUTWARD frame so the stroke stays out of the captured
+/// pixels. The recording flow owns this window; it's torn down by
+/// `hide_recording_chrome` / `hide_overlays` when capture stops.
+#[tauri::command]
+pub async fn show_region_record_border(
+    app: AppHandle,
+    x: f64,
+    y: f64,
+    width: f64,
+    height: f64,
+) -> Result<(), String> {
+    if !(width > 0.0 && height > 0.0) {
+        return Ok(());
+    }
+    if let Some(existing) = app.get_webview_window(REGION_RECORD_BORDER_LABEL) {
+        let _ = existing.close();
+    }
+
+    let (mx, my, mw, mh) = tray_monitor_physical_rect(&app);
+    let url = WebviewUrl::App(
+        format!("index.html?region={x:.6},{y:.6},{width:.6},{height:.6}#region-record-border")
+            .into(),
+    );
+    let win = WebviewWindowBuilder::new(&app, REGION_RECORD_BORDER_LABEL, url)
+        .title("Clips Recording Region")
+        .decorations(false)
+        .transparent(true)
+        .always_on_top(true)
+        .skip_taskbar(true)
+        .resizable(false)
+        .shadow(false)
+        .visible(false)
+        .focused(false)
+        .build()
+        .map_err(|e| {
+            eprintln!("[clips-tray] region record border build failed: {}", e);
+            e.to_string()
+        })?;
+    let _ = win.set_size(tauri::Size::Physical(PhysicalSize::new(mw, mh)));
+    let _ = win.set_position(PhysicalPosition::new(mx, my));
+    let _ = win.set_ignore_cursor_events(true);
+    set_capture_excluded_always(&win);
+    configure_overlay_behavior(&win);
+    crate::util::show_without_activation(&win);
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn hide_region_record_border(app: AppHandle) -> Result<(), String> {
+    if let Some(w) = app.get_webview_window(REGION_RECORD_BORDER_LABEL) {
+        let _ = w.close();
+    }
+    Ok(())
+}
+
 /// Reconcile the always-on region-guides overlay with the current config.
 /// Called from config saves and on startup so the guides window matches the
 /// `always_visible` toggle without needing a recording-flow round trip. When a
@@ -740,6 +871,7 @@ pub async fn set_bubble_capture_excluded(app: AppHandle, excluded: bool) -> Resu
 
 #[tauri::command]
 pub async fn hide_overlays(app: AppHandle) -> Result<(), String> {
+    stop_countdown_control_tracking();
     let _ = app.emit("clips:countdown-shortcuts-active", false);
     for label in [
         COUNTDOWN_LABEL,
@@ -748,6 +880,7 @@ pub async fn hide_overlays(app: AppHandle) -> Result<(), String> {
         FINALIZING_LABEL,
         FLOW_BAR_LABEL,
         REGION_GUIDES_LABEL,
+        REGION_RECORD_BORDER_LABEL,
     ] {
         if let Some(w) = app.get_webview_window(label) {
             let _ = w.close();
@@ -766,13 +899,16 @@ pub async fn hide_overlays(app: AppHandle) -> Result<(), String> {
 /// popover-close).
 #[tauri::command]
 pub async fn hide_recording_chrome(app: AppHandle) -> Result<(), String> {
+    stop_countdown_control_tracking();
     let _ = app.emit("clips:countdown-shortcuts-active", false);
     // The countdown + toolbar always tear down on recording stop. The region
     // guides only tear down when they aren't pinned on-screen via the always-on
     // toggle — otherwise we'd flicker close→reopen right after stop.
     let g = crate::config::feature_config(&app).region_guides;
     let keep_region_guides = g.always_visible && g.enabled && !g.rects.is_empty();
-    let mut labels: Vec<&str> = vec![COUNTDOWN_LABEL, TOOLBAR_LABEL];
+    // The recording-region border belongs to a single recording (never pinned),
+    // so it always tears down here alongside the countdown + toolbar.
+    let mut labels: Vec<&str> = vec![COUNTDOWN_LABEL, TOOLBAR_LABEL, REGION_RECORD_BORDER_LABEL];
     if !keep_region_guides {
         labels.push(REGION_GUIDES_LABEL);
     }
@@ -1438,6 +1574,9 @@ pub async fn reset_state(app: AppHandle) -> Result<(), String> {
     if let Some(w) = app.get_webview_window(REGION_GUIDES_LABEL) {
         let _ = w.close();
     }
+    if let Some(w) = app.get_webview_window(REGION_RECORD_BORDER_LABEL) {
+        let _ = w.close();
+    }
     if let Some(window) = app.get_webview_window("popover") {
         // Restore normal size in case the window was shrunk to a pinhole
         // during recording — otherwise it would reappear as a 2×2 dot.