Request a recording UX improvements PRD

NeetoRecord — Request Recording Feature: Engineering Action Items

🖥️ Admin Side Changes

1. Text / Label Updates

  • Change "Request recording" button label to "Request a recording" (add the article "a")

  • Change "Copy recording link" button to "Copy request link"

2. Side Pane Revamp The side pane currently only shows a title and a copy link button. Replace it with:

  • Title field — make it optional (remove the asterisk / mandatory validation). If a title is provided, it gets saved; if not, AI will auto-generate one when the recording comes in.

  • Recording Instructions field — add a rich text editor (D2/editor component) for the requester to type instructions for the recorder.

  • Private Note field — add a second rich text editor (D2/editor component) styled in yellow to visually distinguish it. Display helper text: "Add a private note for yourself. This note will only be visible to you and will appear alongside the recording once it's received.."

  • Allow copying the request link even when none of the fields are filled (remove all blocking validations on this button).

3. Post-Copy Link Flow

  • Currently, clicking "Copy request link" closes the side pane immediately and shows a toaster — this is too easy to miss. Replace with:

    • Keep the side pane open after clicking.

    • Show a "Request link copied! Share it to receive a recording." confirmation section within the side pane.

    • Display the copied link visibly so the user can see it.


📱 Client Side Changes

4. Landing / Entry Screen Revamp

  • Remove the current info icon and the "NeetoRecord does not have access to your screen" message (shown unconditionally even when access is already granted).

  • Replace with a two-step onboarding-style UI (reuse existing onboarding step component already in the PR):

    • Step 1: Record Screen

    • Step 2: Review & Send

  • Page title should read: "[Requester Name] is requesting a recording" (e.g., "Oliver Smith is requesting a recording").

  • Show a "Record Screen" button as the primary CTA. Clicking it will natively prompt the browser for screen access if not yet granted — no need for a separate permission screen.

5. Review & Send Screen

  • Reduce the size of the video preview (currently too large, pushing buttons below the fold).

  • Move "Send Recording" and "Record Again" buttons to the top of the screen (above the preview).

  • Add a warning banner with alert styling (warning color, border, background) that reads: "Your recording is not yet sent" — this is critical to prevent users from thinking the job is done when they're still on the review screen.

6. Sending / Upload State

  • Replace the "Uploading" status text with "Sending recording" (clients don't need to know about the upload concept).

7. Post-Send Confirmation Screen

  • After sending, do not redirect to the watch/recording page.

  • Redirect to a new success screen with:

    • A large checkmark icon.

    • Heading: "Recording sent to [Requester Name]" (e.g., "Sent the recording to Oliver Smith").

    • Subtext: "You can copy the link and share it in your conversation."

    • A "Copy recording link" button with a copy icon.

    • Remove the "View recording" button — it's not needed in this flow.


📋 Recording Log / Admin View

8. Private Note Indicator

  • If a private note was added to a recording request, display a note icon next to the recording title in the recordings list.

  • Clicking the note icon should show a tooltip/popover with:

    • The note content.

    • Text clarifying: "This note is private to you and will not be visible to your viewers."

  • Note: Ignore the "new" tag added in that PR — it is not part of this feature and should not be included.