Fix demo slowness (#133)

* chore: add static and runtime configurations, implement skeleton loading, and update auth handling

- Set dynamic to 'force-static' for specific pages to optimize static rendering
- Set runtime to 'edge' for sign-in and sign-up pages for edge functions
- Introduce SkeletonTable and Skeleton components for improved loading states
- Update header-auth and website-analyzer-form to manage user state with useEffect
- Enhance example links component to fetch login status asynchronously
- Minor UI adjustments for sign-in, sign-up, and homepage components to handle loading and
auth states

* refactor: move data loading logic outside useEffect to prevent race conditions

- Extracted the data fetching and initialization code from the initial useEffect
- Ensured data is loaded after subscription setup to avoid race conditions
- Maintained existing state updates and loading state management
- Improved code clarity and separation of concerns in the component

* chore: update environment variables and configure GitHub OAuth provider

- Added GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET to environment example
- Enabled GitHub external auth in the configuration with environment variable references
- Updated redirect URI for OAuth callback to localhost
- Minor formatting adjustments in environment and config files

* chore: add scripts for managing local Supabase instance in playground package

- Introduced start-supabase, stop-supabase, and restart-supabase scripts for easier local
development
- Updated package.json with commands to start, stop, and restart Supabase
- Included a script to serve functions and generate TypeScript types for database schema

* chore: update script references and commands in package.json and add a new helper script

Refactored package.json to replace npx commands with local script invocations for better
consistency and control.
Added a new executable script for managing Supabase environment variables and commands, improving
developer experience and script maintainability.

* feat: enhance auth pages with loading states, improve user feedback, and add logging

- Added isLoading state to sign-in and sign-up forms for better UX during async actions
- Disabled inputs and buttons during loading to prevent duplicate submissions
- Updated GithubButton to support external loading state and show spinner
- Implemented useEffect in sign-up page to process searchParams and display messages
- Added console logs in auth callback route for debugging code exchange process
- Enhanced header-auth component with auth state change logging for better monitoring
- Updated supabase config with explicit redirect URL and additional redirect URLs for OAuth
- Refactored submit-button to show spinner during pending state
- Overall improvements for user feedback, debugging, and code consistency

* fix: prevent default form submission and handle loading state in auth components

- Added e.preventDefault() to form onSubmit handler in sign-in page
- Updated GithubButton to reset loading state on error handling
- Ensures consistent loading state management across authentication UI components

* style: improve layout and UI consistency across components

- Add relative positioning to main container for layout stability
- Extend footer to be fixed at bottom with background and backdrop blur
- Adjust sidebar styling with consistent border and opacity states
- Enhance border and overflow styles in flow run details component
- Update analysis UI container with background and margin for better spacing

* chore: update pgflow to 0.2.4

Author: jumski

examples/playground/components/example-links.tsx

@@ -1,13 +1,23 @@
 'use client';
 
 import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
+import { useEffect, useState } from 'react';
+import { createClient } from '@/utils/supabase/client';
 import { exampleLinks } from '@/lib/example-links';
 import { useLoadingState } from './loading-state-provider';
 
 export default function ExampleLinks() {
   const { start, isPending, error: startError } = useStartAnalysis();
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
+  const supabase = createClient();
   const { setLoading } = useLoadingState();
 
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data }) => {
+      setIsLoggedIn(!!data.user);
+    });
+  }, []);
+
   // Function to handle example link clicks
   const handleExampleClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
     e.preventDefault();

examples/playground/components/flow-run-provider.tsx

@@ -112,6 +112,7 @@ export function FlowRunProvider({ runId, children }: FlowRunProviderProps) {
 
 
 
+
   useEffect(() => {
     if (!runId) return;
 

examples/playground/components/website-analyzer-form.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { useStartAnalysis } from '@/lib/hooks/use-start-analysis';
+import { useEffect, useState } from 'react';
+import { createClient } from '@/utils/supabase/client';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { FormMessage } from '@/components/form-message';
@@ -9,8 +11,16 @@ import { useLoadingState } from './loading-state-provider';
 
 export default function WebsiteAnalyzerForm() {
   const { start: startAnalysis, isPending, error: formError } = useStartAnalysis();
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
+  const supabase = createClient();
   const { setLoading } = useLoadingState();
 
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data }) => {
+      setIsLoggedIn(!!data.user);
+    });
+  }, []);
+
   async function handleAnalyzeWebsite(formData: FormData) {
     const url = formData.get('url') as string;
 
@@ -49,6 +59,14 @@ export default function WebsiteAnalyzerForm() {
         </SubmitButton>
         {formError && <FormMessage message={{ error: formError }} />}
       </form>
+      {isLoggedIn === false && (
+        <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
+          <p className="text-yellow-800">
+            You'll need to sign in to analyze websites. When you click the
+            button, you'll be redirected to the sign-in page.
+          </p>
+        </div>
+      )}
     </div>
   );
 }

examples/playground/supabase/functions/deno.json

@@ -1,7 +1,7 @@
 {
   "imports": {
-    "@pgflow/dsl": "npm:@pgflow/dsl@0.1.22",
-    "@pgflow/edge-worker": "jsr:@pgflow/edge-worker@0.1.22",
+    "@pgflow/dsl": "npm:@pgflow/dsl@0.2.4",
+    "@pgflow/edge-worker": "jsr:@pgflow/edge-worker@0.2.4",
     "@supabase/supabase-js": "jsr:@supabase/supabase-js@^2.49.4",
     "groq-sdk": "npm:groq-sdk@^0.20.1",
     "sanitize-html": "npm:sanitize-html@^2.16.0",

examples/playground/supabase/functions/deno.lock

@@ -0,0 +1,101 @@
+-- Modify "poll_for_tasks" function
+CREATE OR REPLACE FUNCTION "pgflow"."poll_for_tasks" ("queue_name" text, "vt" integer, "qty" integer, "max_poll_seconds" integer DEFAULT 5, "poll_interval_ms" integer DEFAULT 100) RETURNS SETOF "pgflow"."step_task_record" LANGUAGE plpgsql SET "search_path" = '' AS $$
+declare
+  msg_ids bigint[];
+begin
+  -- First statement: Read messages and capture their IDs
+  -- This gets its own snapshot and can see newly committed messages
+  select array_agg(msg_id)
+  into msg_ids
+  from pgflow.read_with_poll(
+    queue_name,
+    vt,
+    qty,
+    max_poll_seconds,
+    poll_interval_ms
+  );
+
+  -- If no messages were read, return empty set
+  if msg_ids is null or array_length(msg_ids, 1) is null then
+    return;
+  end if;
+
+  -- Second statement: Process tasks with fresh snapshot
+  -- This can now see step_tasks that were committed during the poll
+  return query
+  with tasks as (
+    select
+      task.flow_slug,
+      task.run_id,
+      task.step_slug,
+      task.task_index,
+      task.message_id
+    from pgflow.step_tasks as task
+    where task.message_id = any(msg_ids)
+      and task.status = 'queued'
+  ),
+  increment_attempts as (
+    update pgflow.step_tasks
+    set attempts_count = attempts_count + 1
+    from tasks
+    where step_tasks.message_id = tasks.message_id
+    and status = 'queued'
+  ),
+  runs as (
+    select
+      r.run_id,
+      r.input
+    from pgflow.runs r
+    where r.run_id in (select run_id from tasks)
+  ),
+  deps as (
+    select
+      st.run_id,
+      st.step_slug,
+      dep.dep_slug,
+      dep_task.output as dep_output
+    from tasks st
+    join pgflow.deps dep on dep.flow_slug = st.flow_slug and dep.step_slug = st.step_slug
+    join pgflow.step_tasks dep_task on
+      dep_task.run_id = st.run_id and
+      dep_task.step_slug = dep.dep_slug and
+      dep_task.status = 'completed'
+  ),
+  deps_outputs as (
+    select
+      d.run_id,
+      d.step_slug,
+      jsonb_object_agg(d.dep_slug, d.dep_output) as deps_output
+    from deps d
+    group by d.run_id, d.step_slug
+  ),
+  timeouts as (
+    select
+      task.message_id,
+      coalesce(step.opt_timeout, flow.opt_timeout) + 2 as vt_delay
+    from tasks task
+    join pgflow.flows flow on flow.flow_slug = task.flow_slug
+    join pgflow.steps step on step.flow_slug = task.flow_slug and step.step_slug = task.step_slug
+  )
+  select
+    st.flow_slug,
+    st.run_id,
+    st.step_slug,
+    jsonb_build_object('run', r.input) ||
+    coalesce(dep_out.deps_output, '{}'::jsonb) as input,
+    st.message_id as msg_id
+  from tasks st
+  join runs r on st.run_id = r.run_id
+  left join deps_outputs dep_out on
+    dep_out.run_id = st.run_id and
+    dep_out.step_slug = st.step_slug
+  cross join lateral (
+    -- TODO: this is slow because it calls set_vt for each row, and set_vt
+    --       builds dynamic query from string every time it is called
+    --       implement set_vt_batch(msgs_ids bigint[], vt_delays int[])
+    select pgmq.set_vt(queue_name, st.message_id,
+      (select t.vt_delay from timeouts t where t.message_id = st.message_id)
+    )
+  ) set_vt;
+end;
+$$;