"use client"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { Logo } from "@/components/Logo"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { useElectronAPI } from "@/hooks/use-platform"; type PermissionStatus = "authorized" | "denied" | "not determined" | "restricted" | "limited"; interface PermissionsStatus { accessibility: PermissionStatus; screenRecording: PermissionStatus; } const STEPS = [ { id: "screen-recording", title: "Screen Recording", description: "Lets SurfSense capture your screen to understand context and provide smart writing suggestions.", action: "requestScreenRecording", field: "screenRecording" as const, }, { id: "accessibility", title: "Accessibility", description: "Lets SurfSense insert suggestions seamlessly, right where you\u2019re typing.", action: "requestAccessibility", field: "accessibility" as const, }, ]; function StatusBadge({ status }: { status: PermissionStatus }) { if (status === "authorized") { return ( Granted ); } if (status === "denied") { return ( Denied ); } return ( Pending ); } export default function DesktopPermissionsPage() { const router = useRouter(); const api = useElectronAPI(); const [permissions, setPermissions] = useState(null); useEffect(() => { if (!api) return; let interval: ReturnType | null = null; const isResolved = (s: string) => s === "authorized" || s === "restricted"; const poll = async () => { const status = await api.getPermissionsStatus(); setPermissions(status); if (isResolved(status.accessibility) && isResolved(status.screenRecording)) { if (interval) clearInterval(interval); } }; poll(); interval = setInterval(poll, 2000); return () => { if (interval) clearInterval(interval); }; }, [api]); if (!api) { return (

This page is only available in the desktop app.

); } if (!permissions) { return (
); } const allGranted = permissions.accessibility === "authorized" && permissions.screenRecording === "authorized"; const handleRequest = async (action: string) => { if (action === "requestScreenRecording") { await api.requestScreenRecording(); } else if (action === "requestAccessibility") { await api.requestAccessibility(); } }; const handleContinue = () => { if (allGranted) { api.restartApp(); } }; const handleSkip = () => { router.push("/dashboard"); }; return (
{/* Header */}

System Permissions

SurfSense needs two macOS permissions to provide context-aware writing suggestions.

{/* Steps */}
{STEPS.map((step, index) => { const status = permissions[step.field]; const isGranted = status === "authorized"; return (
{isGranted ? "\u2713" : index + 1}

{step.title}

{step.description}

{!isGranted && (
{status === "denied" && (

Toggle SurfSense on in System Settings to continue.

)}

If SurfSense doesn't appear in the list, click + and select it from Applications.

)}
); })}
{/* Footer */}
{allGranted ? ( <>

A restart is needed for permissions to take effect.

) : ( <> )}
); }