docs: add Supabase deployment screenshots and improve configuration instructions (#541)

# Add Supabase deployment documentation with screenshots

This PR enhances the Supabase deployment documentation by:

- Adding screenshots showing where to find the Project ID and service_role key in the Supabase dashboard
- Improving clarity in the configuration steps with more precise instructions
- Highlighting replaceable values in code blocks for better user guidance
- Removing the troubleshooting section from the configure-secrets page (will be moved to a dedicated troubleshooting guide)
- Reordering the deployment steps in the index page to put "Configure Secrets" before "Deploy First Flow"
- Making terminology consistent across documentation pages

These changes make the deployment process more visual and easier to follow for users setting up pgflow with Supabase.

Author: jumski

pkgs/website/src/assets/deploy/supabase/04-project-id.png

@@ -11,30 +11,22 @@ pgflow needs vault secrets to automatically manage workers in production.
 
 <Steps>
 
-1. ### Get your project ID
-
-   {/* SCREENSHOT PLACEHOLDER:
-        Supabase Dashboard -> Project Settings -> General
-        Highlight/arrow pointing to "Reference ID" field
-        Show the alphanumeric project ID value
-   */}
+1. ### Get your Project ID
 
    1. Open [Supabase Dashboard](https://supabase.com/dashboard)
    2. Select your project
    3. Go to **Project Settings** -> **General**
-   4. Copy the **Reference ID**
+   4. Copy the **Project ID**
+
+   ![Project Settings showing the Project ID field](../../../../assets/deploy/supabase/04-project-id.png)
 
 2. ### Get your service role key
 
-   {/* SCREENSHOT PLACEHOLDER:
-        Supabase Dashboard -> Project Settings -> API
-        Highlight/arrow pointing to service_role key (the secret one, not anon)
-        Maybe blur/redact the actual key value for security
-   */}
+   1. Go to **Project Settings** -> **API Keys**
+   2. Click the **Legacy anon, service_role API keys** tab
+   3. Find `service_role` (labeled "secret") and click **Copy**
 
-   1. Go to **Project Settings** -> **API**
-   2. Under **Project API keys**, find `service_role` (labeled "secret")
-   3. Click to reveal and copy the key
+   ![API Keys page showing the service_role key](../../../../assets/deploy/supabase/05-service-role-key.png)
 
    <Aside type="caution">
    Keep this key secret - it bypasses Row Level Security.
@@ -44,37 +36,11 @@ pgflow needs vault secrets to automatically manage workers in production.
 
    Run in the SQL Editor:
 
-   ```sql
+   ```sql "your-project-id" "your-service-role-key"
    SELECT vault.create_secret('your-project-id', 'supabase_project_id');
    SELECT vault.create_secret('your-service-role-key', 'supabase_service_role_key');
    ```
 
-   Replace with your actual values from steps 1 and 2.
+   Replace the highlighted values with your actual Project ID and service role key from steps 1 and 2.
 
 </Steps>
-
-## Troubleshooting
-
-### Workers not starting automatically?
-
-Verify vault secrets are configured:
-
-```sql
-SELECT name,
-       CASE WHEN decrypted_secret IS NOT NULL THEN 'SET' ELSE 'MISSING' END as status
-FROM vault.decrypted_secrets
-WHERE name IN ('supabase_service_role_key', 'supabase_project_id');
-```
-
-Both should show `SET`.
-
-### Test the cron manually
-
-```sql
-SELECT * FROM pgflow.ensure_workers();
-```
-
-Returns one row per worker function invoked. If empty but you have enabled workers:
-
-1. Check secrets (query above)
-2. Check registered workers: `SELECT * FROM pgflow.worker_functions WHERE enabled = true;`

pkgs/website/src/assets/deploy/supabase/05-service-role-key.png

@@ -23,19 +23,19 @@ This guide walks you through deploying your pgflow worker to Supabase.com produc
 
    Workers access the database through the `EDGE_WORKER_DB_URL` environment variable:
 
-   ```bash frame="none"
+   ```bash frame="none" "your-connection-string"
    npx supabase secrets set EDGE_WORKER_DB_URL="your-connection-string"
    ```
 
 2. ### Deploy your worker
 
    Deploy your Edge Function to Supabase:
 
-   ```bash frame="none"
+   ```bash frame="none" "your-worker-name"
    npx supabase functions deploy your-worker-name
    ```
 
-   Replace `your-worker-name` with your actual worker function name (e.g., `greet-user-worker`).
+   Replace the highlighted value with your actual worker function name (e.g., `greet-user-worker`).
 
    <Aside type="note">
    You only need to deploy your worker functions. The `pgflow` ControlPlane function is for local compilation only and is not needed in production.
@@ -45,7 +45,7 @@ This guide walks you through deploying your pgflow worker to Supabase.com produc
 
    Register your worker so pgflow can manage it automatically:
 
-   ```sql
+   ```sql "your-worker-name"
    SELECT pgflow.track_worker_function('your-worker-name');
    ```
 

pkgs/website/src/content/docs/deploy/supabase/configure-secrets.mdx

@@ -18,13 +18,13 @@ Before starting, ensure you have completed [Getting Started](/get-started/instal
 
    Retrieve the Transaction pooler connection string from your Supabase dashboard. Workers use this to connect to your hosted database securely.
 
-2. ### Deploy First Flow
+2. ### Configure Secrets
 
-   Store the connection string as a secret, deploy your worker Edge Function, and invoke it to start processing tasks.
+   Set up vault secrets so pgflow can automatically manage and restart your workers in production.
 
-3. ### Keep Workers Running
+3. ### Deploy First Flow
 
-   Configure pg_cron to periodically invoke your worker. This acts as a safety net - if a worker stops unexpectedly, pg_cron restarts it automatically.
+   Store the connection string as a secret, deploy your worker Edge Function, and register it with pgflow.
 
 </Steps>