Skip to content

Commit 57aece4

Browse files
jumskijumski
authored
pgflow landing page and Docs (#95)
* feat: Add documentation and example flow for pgflow setup, creation, and execution - Updated website navigation links and social links for better clarity - Added new comprehensive 'Create your first flow' MDX guide with step-by-step instructions - Included detailed 'Install pgflow' setup guide with commands and prerequisites - Added 'Trigger and monitor flows' guide for setting up workers, triggering flows, and monitoring execution - Improved project documentation to facilitate onboarding and usage of pgflow features * chore: update Astro config, dependencies, and documentation references for consistency and improvements - Added URL and path imports in astro.config.mjs for alias resolution - Updated starlight-sidebar-topics dependency to version 0.6.0 - Changed import paths in MDX files to use alias @ for components - Modified installation and verification instructions for pgflow and schema checks - Adjusted links in documentation to ensure correct navigation paths - Improved code style and consistency across configuration and content files * chore(docs): update installation and verification steps for pgflow setup Refactor documentation to include enhanced setup instructions, new UI components, and verification procedures for pgflow installation. Removed outdated verification steps and added detailed guidance on running the installer, applying migrations, and understanding installed components. Improved clarity and structure for a smoother onboarding experience. * docs: update installation instructions and clarify setup process for pgflow - Simplify import statements and fix component import paths - Remove deprecated or unnecessary content, such as initial setup cards and tips - Add detailed steps for running the installer, applying configuration, and verifying installation - Clarify manual installation options and environment setup - Improve readability and structure of the documentation for better user guidance * fix(website): update component to reflect current project status and correct content * docs: update getting started page with new features, architecture diagram, and API notes - Added new import components for enhanced UI - Updated project description to emphasize Postgres-native orchestration and Supabase integration - Replaced core concepts with a new feature overview using Card components - Clarified workflow architecture with diagrams and detailed steps - Expanded "Who is pgflow for" section with new cards highlighting use cases - Enhanced "What can you build" section with additional examples and icons - Updated status note to reflect alpha stage and API stability considerations - Improved navigation links for installation, creation, and monitoring guides - Overall formatting and structure improvements for clarity and consistency * chore: update navigation links, reorder installation step, and enhance documentation content - Changed the 'Getting Started' menu link from '/getting-started/what-is-pgflow/' to '/' - Reordered 'install-pgflow' step to appear first in the tutorial flow - Updated 'create-first-flow' page order for better flow - Expanded main documentation page with detailed workflow engine overview, TypeScript API examples, and end-to-end orchestration info - Added new sections highlighting core features, usage steps, and demo links for improved clarity and guidance * refactor: update analysis flow to include only summary and tags, remove sentiment handling, and adjust UI rendering - Removed sentiment step from flow definition and related code - Simplified analysis summary to exclude sentiment - Updated UI to no longer display sentiment - Changed parallel steps to include only summary and tags - Adjusted styling for step container layout - Corrected code style issues and cleaned up redundant code * refactor: update models and variable references across analysis, extraction, and summarization functions - Remove redundant 'aiSummary' assignment in analyze_website.ts - Change model from 'llama-3.1-8b-instant' to 'meta-llama/llama-4-scout-17b-16e-instruct' in extractTags.ts - Update model from 'meta-llama/llama-4-maverick-17b-128e-instruct' to 'meta-llama/llama-4-scout-17b-16e-instruct' in summarizeWithAI.ts - Simplify return statement in summarizeWithAI.ts for better readability * feat: integrate global loading state management across layout, components, and providers - Added LoadingStateProvider to manage loading state globally - Updated components (example-links, flow-run-provider, header-auth) to use shared loading context - Introduced Spinner and SpinnerWrapper components for consistent loading indicators - Enhanced user experience by synchronizing loading states during analysis and navigation - Refactored related code to ensure proper loading state toggling during async operations * feat: add example workflow and update documentation for parallel execution - Included a comprehensive example workflow demonstrating parallel steps and dependencies - Updated documentation to reflect new workflow structure and correct link paths - Enhanced clarity on creating complex workflows with parallel processing and dependencies * feat: add mobile links component and enhance header navigation - Introduced MobileLinks component for responsive access to external links - Updated layout to include social and resource links with icons - Improved header navigation with additional links and styling adjustments * feat: add pathname-based reset for loading state in LoadingStateProvider - Import useEffect to handle side effects - Reset loading state to false whenever the pathname changes to ensure correct UI behavior * fix(docs): update installation instructions by removing verification steps and correcting migration command - Removed outdated steps for verifying schema existence via SQL editor - Changed migration command from 'npx supabase db push' to 'npx supabase migrations up' for accuracy - Clarified the installation process for pgflow and related setup instructions * feat: add website analysis workflow with task implementations and flow definition - Updated documentation to specify core workflow concepts and prerequisites - Created task implementations for scraping, summarizing, extracting tags, and saving data - Defined a strongly typed flow connecting tasks with dependencies and parallel execution - Included utility functions for error simulation and delays - Provided instructions to compile and apply the flow to the database - Demonstrated flow structure, features, and best practices for building workflows * chore(docs): update tutorial with demo app links and code snippets - Added a tip section with links to the complete demo app and source code - Updated code snippets for task functions to include mock implementations - Included placeholder content for website scraping, AI summarization, tag extraction, and saving - Enhanced utility functions with sleep and failure simulation for testing - Overall, improved documentation clarity and provided comprehensive example code for workflow setup * docs: remove example workflow code from installation documentation This update deletes the commented-out example workflow code from the installation page, streamlining the documentation and focusing on the installation instructions. * chore(docs): update flow creation and compilation instructions, remove redundant steps, and clarify versioning and migration guidance * chore: add "How To" section to documentation and include update-flow-options guide - Updated astro.config.mjs to include a new "How To" section for better navigation - Added a comprehensive guide on updating flow options safely in a new MDX file - Removed outdated instructions on non-breaking configuration updates from existing docs - Created a dedicated "update-flow-options" how-to guide to assist users in making safe changes - Overall improvements to documentation structure and clarity for flow configuration management * feat: add explanations section and new Flow DSL documentation - Updated website configuration to include 'Explanations' in navigation - Added comprehensive documentation file explaining pgflow's Flow DSL principles, type safety, data flow, task best practices, and execution model - Enhanced understanding of input handling, dependency management, and type system - Improved guidance on defining, connecting, and executing workflows with type safety - Provided detailed examples illustrating use of input.run and data passing * chore: update documentation and configuration for pgflow and Edge Worker installation - Revised installation instructions for both automatic and manual setup methods - Updated migration file handling and environment variable setup guidance - Clarified configuration steps for connection pooling and runtime policies - Added verification queries to confirm successful installation - Improved clarity and consistency across related documentation pages * refactor: replace inline EdgeWorker implementation with imported flow module - Updated the trigger script to import and start the analyze_website flow - Removed the inline switch-case handling of steps - Simplified the code for better maintainability and clarity - Minor formatting adjustments in documentation sections for consistency * refactor: remove duplicate 'pgflow' sidebar entry from configuration - Deleted the repeated 'pgflow' section in the sidebar configuration to prevent duplication - Ensured only a single, consolidated 'pgflow' entry remains for clarity and maintainability * feat: add Discord invite URL and integrate it into website navigation - Introduced DISCORD_INVITE_URL constant with the Discord invite link - Added a new Discord link to the navigation components for easier access - Updated astro.config.mjs to include the new Discord link in the site configuration * chore: update package-lock.json with dependency version changes * refactor: update documentation titles and content for clarity and consistency - Rephrased main titles to emphasize native Supabase workflow automation - Clarified core features: SQL state management, type-safe workflows, reliable task processing - Improved step-by-step instructions for defining and deploying workflows - Enhanced code snippets for readability and correctness - Minor formatting adjustments for better presentation and understanding * chore: add quickstart setup section and update theme CSS variables - Introduced a quickstart section with installation command and caption - Enhanced CSS with additional theme color variables for light and dark modes - Added hover effects and responsive styles for quickstart UI elements - Minor formatting adjustments in global CSS for consistency and visual clarity * style: update global CSS for improved hover effects and spacing - Adjusted margin for .quickstart-section for better layout - Added transition and scale transform on hover for interactive feedback - Modified font sizes in pre and code elements for consistency - Updated padding and font size in caption for better readability * chore: add documentation links to compile, install, and index commands - Append helpful URLs in compile command for success and error cases - Include next steps and documentation links in install command, even if no changes - Remove unnecessary banner line in index file for cleaner output * chore: add spinners for progress indication in install and configuration commands Enhance user experience by integrating spinners during migration copying, config updates, and environment variable modifications. Also, organize installation steps with grouping and handle cancellations gracefully. These improvements provide clearer feedback during long-running operations and streamline the setup process. * refactor: improve Supabase path detection and installation flow Simplify path handling by removing automatic detection logic, add explicit prompt for path, and reorganize installation steps with clearer structure. Enhance user cancellation handling and update success messaging and documentation links for better user guidance. * refactor: remove spinners and update logging for install and config commands Simplify user feedback by replacing spinner usage with direct log messages across multiple scripts. Standardize log levels for status updates, warnings, and errors. Enhance readability and consistency in output during migration copying, configuration updates, and environment variable modifications. * docs: Add comprehensive documentation for CLI prompts and command design patterns - Introduced new markdown files CLACK_API.md and CLAUDE.md - CLACK_API.md details usage of @clack/prompts components and utilities - CLAUDE.md provides guidance on CLI command design, output philosophy, and best practices - Enhances documentation coverage for user interaction, logging, and task management patterns - Supports consistent CLI implementation and user experience across the project * refactor: improve CLI command logging and add task log formatting - Renamed analyze-website.ts for consistency - Removed unused imports and simplified prompts - Added createTaskLog function to display command outputs - Replaced spinner with info logs for compilation steps - Updated documentation links in success and error messages - Enhanced runDenoCompilation to log command and output details - Changed some log messages from info to success for clarity * refactor(compile): improve flow name extraction for migration filename generation Extracts flow name from SQL output using regex and falls back to filename if extraction fails, ensuring consistent migration naming. * fix: improve output handling and flow filename extraction in pgflow * docs: add new landing page and documentation for pgflow * docs: update installation and configuration instructions for pgflow setup Refactor the documentation to clarify the installation process using the recommended installer, including details on manual installation options. Improve instructions for applying configuration changes and migrations, and specify the creation of database objects. No code changes included. * style: improve code formatting and update configuration values - Corrected import statement formatting for lucide-react icons - Added missing JSX line breaks for better readability - Updated external links with new URLs and added target and rel attributes - Changed project_id in config.toml from 'pgflow-playground' to 'pgflow-demo' for environment consistency * docs: fix typo in quickstart caption and update casing for pgflow references - Corrected "Sets up PGFlow" to "Sets up pgflow" for consistency - Changed "One-command setup: quickly deploy PGFlow" to "pgflow" for proper casing - Updated documentation content for clarity and consistency in branding and instructions * chore: remove deprecated raw content files and documentation pages Deleted multiple raw TypeScript and MDX files related to flow ideas, examples, and old landing pages to clean up deprecated or outdated documentation content. * fix: improve code consistency and default parameter handling - Corrected default parameter assignment in flow-run-details component for better readability - Updated loading-state-provider to include a functional default setLoading implementation - Minor formatting adjustments for clarity and maintainability * style: fix commented out variable declaration for color consistency - Uncommented the color variable declaration to maintain code clarity and consistency - No functional changes; only formatting and comment adjustments * feat: add React integration and testimonial carousel component - Imported @astrojs/react and added react() to Astro config - Updated package.json with React and related dependencies - Created TestimonialCarousel.jsx component with auto-scrolling testimonials - Enhanced global CSS with styles for testimonial section and responsiveness - Modified docs page to include the testimonial carousel and styling adjustments - Updated tsconfig to support React JSX syntax These changes introduce React support, a new testimonial carousel feature, and styling updates for better UI/UX. * feat(components): enhance TestimonialCarousel with navigation, auto-scroll, and source info - Added source labels to testimonials for better attribution - Implemented manual navigation buttons with auto-scroll reset - Changed auto-scroll interval from 7 to 10 seconds - Adjusted styling for navigation buttons and testimonial layout - Included current page indicator for improved UX * feat(components): add goTo method to carousel for improved navigation - Extend useSnapCarousel hook to include goTo for direct slide control - Update auto-scroll logic to handle boundary conditions with goTo - Remove unused position indicator for cleaner UI * style: adjust spacing and sizing in testimonial carousel and global styles - Reduced padding and margin in TestimonialCarousel component for better layout - Slightly decreased minHeight and font margin for improved visual balance - Updated global CSS to modify margin around carousel wrapper for consistency * fix: update testimonial carousel auto-scroll timing and hide navigation arrows on mobile - Changed auto-scroll interval from 10 to 6 seconds in TestimonialCarousel component - Reset auto-scroll timer after manual navigation actions - Hide carousel navigation arrows on screens narrower than 480px in global styles - Minor style adjustments for improved mobile experience * docs: update documentation titles, descriptions, and content for clarity and accuracy - Changed main title and tagline to emphasize AI workflows and background jobs in Supabase - Updated demo app link and icon for better call-to-action - Renamed "Declarative Definitions" card to "Simple Flow Definitions" for clarity - Improved description of AI workflows to include chaining LLMs, scraping, reasoning, and failure recovery - Minor formatting and wording adjustments for consistency and readability * feat: integrate next-plausible for analytics and update layout structure - Added PlausibleProvider wrapper around the main layout for analytics - Updated next.config.ts to include withPlausibleProxy for server-side tracking - Included next-plausible in package dependencies and lockfile - Refactored layout to embed PlausibleProvider and maintain existing UI - Minor adjustments to footer and navigation for consistency - Updated dependencies to support new analytics integration * style: improve layout and styling of run output section in flow run details - Adjusted container classes for better responsiveness and appearance - Added overflow handling and max height for output display - Enhanced scrollability and visual separation of output content * refactor: disable starlightLlmsTxt import and update link validator configuration - Comment out the import of starlightLlmsTxt - Disable starlightLlmsTxt plugin with exclude option - Add react() integration to the configuration - Minor formatting adjustments for consistency * fix: improve carousel auto-scroll logic and update dependencies - Prevents looping back to the first slide when at the last slide - Adds activePageIndex and pages.length to dependency array for correct effect re-execution - Ensures consistent auto-scroll behavior and cleanup on unmount * chore: update website package.json, add Mermaid diagram, and enhance documentation - Added 'gen-diagram' script to generate Mermaid flowchart SVG - Included new analyze_website.svg diagram file - Created Mermaid source file for website analysis graph - Improved import statements in documentation MDX - Updated code snippets with correct import components - Expanded task implementation files with placeholder logic - Enhanced comments and structure for website content processing tasks - Minor formatting and consistency fixes across documentation and code snippets * fix: update status options and add ESLint dependencies in dev environment - Expanded status type to include 'error' and 'cancelled' in db.ts - Added ESLint and related packages to package-lock.json for development tooling - Included new dependencies for improved linting and code quality in dev setup * feat: update documentation and code to include user_id parameter in flow and disable JWT verification in edge worker - Added user_id input parameter to create-first-flow.md and related code - Removed user_id from flow input type and step data - Updated create-first-flow.md to reflect user_id inclusion - Included instructions to disable JWT verification in edge worker configuration - Added steps to start and monitor flow execution with sample SQL queries - Enhanced documentation for step status and run monitoring - Minor formatting and clarity improvements across docs and code snippets * chore: update dependencies and add @nx/eslint-plugin to package lock - Added @nx/eslint-plugin as a dev dependency - Updated various Babel-related packages to version 7.27.1 - Refined dependency versions and resolved paths for consistency - Improved license and engine specifications for multiple packages - Enhanced dev environment setup with updated peer dependencies and tools * fix: update status background colors and labels for error and cancelled states - Changed conditional styling to treat 'error' and 'cancelled' statuses with red background - Updated step status display to show 'error' or 'cancelled' explicitly - Refined retry message to correctly display retry attempts - Improved readability and consistency in status indicators across the component * docs: add JSON serialization guidelines to flow DSL documentation - Updated flow-dsl.md to include detailed JSON serialization requirements for step inputs and outputs - Clarified serialization guidelines, including handling of dates, complex objects, and non-serializable types - Enhanced create-first-flow.md with a reminder about JSON serialization and a link to detailed guidelines - Ensured documentation emphasizes the importance of serializable data for database storage and flow execution * fix: update commands and prompts for consistent Supabase path handling - Corrected command arguments to use consistent naming conventions - Enhanced supabasePathPrompt to validate provided paths and avoid unnecessary prompts - Adjusted prompt logic to always detect and suggest existing Supabase directories - Improved user experience by validating input before prompting and logging relevant info - Minor code formatting and variable initializations for clarity and consistency
1 parent c12abf0 commit 57aece4

File tree

68 files changed

+11329
-2649
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+11329
-2649
lines changed

‎.changeset/floppy-lies-find.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'pgflow': patch
3+
---
4+
5+
Sort out outputs and flow filename extraction

‎.changeset/silent-rooms-mate.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@pgflow/website': patch
3+
---
4+
5+
Add pgflow landing page and docs

‎examples/playground/app/layout.tsx

Lines changed: 115 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
import { EnvVarWarning } from '@/components/env-var-warning';
22
import HeaderAuth from '@/components/header-auth';
3+
import { LoadingStateProvider } from '@/components/loading-state-provider';
4+
import { MobileLinks } from '@/components/mobile-links';
35
import { ThemeSwitcher } from '@/components/theme-switcher';
46
import { hasEnvVars } from '@/utils/supabase/check-env-vars';
57
import { Geist } from 'next/font/google';
68
import { ThemeProvider } from 'next-themes';
79
import Link from 'next/link';
10+
import {
11+
BookOpen,
12+
Github,
13+
AlertCircle,
14+
Twitter,
15+
MessagesSquare,
16+
} from 'lucide-react';
817
import './globals.css';
18+
import PlausibleProvider from 'next-plausible';
919

1020
const defaultUrl = process.env.VERCEL_URL
1121
? `https://${process.env.VERCEL_URL}`
@@ -30,52 +40,113 @@ export default function RootLayout({
3040
return (
3141
<html lang="en" className={geistSans.className} suppressHydrationWarning>
3242
<body className="bg-background text-foreground">
33-
<ThemeProvider
34-
attribute="class"
35-
defaultTheme="system"
36-
enableSystem
37-
disableTransitionOnChange
38-
>
39-
<main className="min-h-screen flex flex-col items-center">
40-
<div className="flex-1 w-full flex flex-col items-center">
41-
<nav className="w-full flex justify-center border-b border-b-foreground/10 h-12">
42-
<div className="w-full max-w-5xl flex justify-between items-center p-1 px-5 text-sm">
43-
<div className="flex gap-5 items-center font-semibold">
44-
<Link href={'/'}>{metadata.title}</Link>
43+
<PlausibleProvider domain="pgflow-demo.netlify.app">
44+
<ThemeProvider
45+
attribute="class"
46+
defaultTheme="system"
47+
enableSystem
48+
disableTransitionOnChange
49+
>
50+
<LoadingStateProvider>
51+
<main className="min-h-screen flex flex-col items-center">
52+
<div className="flex-1 w-full flex flex-col items-center">
53+
<nav className="w-full flex justify-center border-b border-b-foreground/10 h-14">
54+
<div className="w-full max-w-5xl flex justify-between items-center p-1 px-5 text-sm">
55+
<div className="flex gap-5 items-center">
56+
<Link href={'/'} className="font-semibold">
57+
{metadata.title}
58+
</Link>
59+
<div className="hidden sm:flex items-center gap-4 text-xs">
60+
<div className="flex items-center gap-4">
61+
<a
62+
href="https://pgflow.dev"
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
66+
>
67+
<BookOpen className="h-3 w-3" />
68+
Docs
69+
</a>
70+
<a
71+
href="https://github.com/pgflow-dev/pgflow/tree/main/examples/playground/supabase/functions"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
75+
>
76+
<Github className="h-3 w-3" />
77+
Source
78+
</a>
79+
<a
80+
href="https://github.com/pgflow-dev/pgflow/issues/new"
81+
target="_blank"
82+
rel="noopener noreferrer"
83+
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
84+
>
85+
<AlertCircle className="h-3 w-3" />
86+
Report Bug
87+
</a>
88+
</div>
89+
<div className="h-3 w-[1px] bg-border"></div>
90+
<div className="flex items-center gap-4">
91+
<a
92+
href="https://x.com/pgflow_dev"
93+
target="_blank"
94+
rel="noopener noreferrer"
95+
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
96+
>
97+
<Twitter className="h-3 w-3" />
98+
Twitter
99+
</a>
100+
<a
101+
href="https://discord.gg/NpffdEyb"
102+
target="_blank"
103+
rel="noopener noreferrer"
104+
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
105+
>
106+
<MessagesSquare className="h-3 w-3" />
107+
Discord
108+
</a>
109+
</div>
110+
</div>
111+
<MobileLinks />
112+
</div>
113+
<div className="flex items-center space-x-2">
114+
{!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
115+
</div>
116+
</div>
117+
</nav>
118+
<div className="flex flex-col max-w-5xl p-3 pt-0 w-full">
119+
{children}
45120
</div>
46-
{!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
47-
</div>
48-
</nav>
49-
<div className="flex flex-col max-w-5xl p-3 pt-0 w-full">
50-
{children}
51-
</div>
52121

53-
<footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
54-
<p>
55-
Powered by{' '}
56-
<a
57-
href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
58-
target="_blank"
59-
className="font-bold hover:underline"
60-
rel="noreferrer"
61-
>
62-
Supabase
63-
</a>{' '}
64-
and{' '}
65-
<a
66-
href="https://pgflow.dev/?utm_source=pgflow-playground"
67-
target="_blank"
68-
className="font-bold hover:underline"
69-
rel="noreferrer"
70-
>
71-
pgflow
72-
</a>
73-
</p>
74-
<ThemeSwitcher />
75-
</footer>
76-
</div>
77-
</main>
78-
</ThemeProvider>
122+
<footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16">
123+
<p>
124+
Powered by{' '}
125+
<a
126+
href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
127+
target="_blank"
128+
className="font-bold hover:underline"
129+
rel="noreferrer"
130+
>
131+
Supabase
132+
</a>{' '}
133+
and{' '}
134+
<a
135+
href="https://pgflow.dev/?utm_source=pgflow-demo"
136+
target="_blank"
137+
className="font-bold hover:underline"
138+
rel="noreferrer"
139+
>
140+
pgflow
141+
</a>
142+
</p>
143+
<ThemeSwitcher />
144+
</footer>
145+
</div>
146+
</main>
147+
</LoadingStateProvider>
148+
</ThemeProvider>
149+
</PlausibleProvider>
79150
</body>
80151
</html>
81152
);

‎examples/playground/app/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default async function Home() {
2020
<h2 className="text-2xl font-medium mb-4">How it works</h2>
2121
<p className="text-foreground/80">
2222
Enter a URL in the form to analyze a website. Our tool will scrape
23-
it then use AI to summarize it and extract tags and sentiment.
23+
it then use AI to summarize it and extract tags.
2424
</p>
2525
{!isLoggedIn && (
2626
<div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">

‎examples/playground/components/example-links.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { useRouter } from 'next/navigation';
44
import { useTransition } from 'react';
55
import { createClient } from '@/utils/supabase/client';
66
import { exampleLinks } from '@/lib/example-links';
7+
import { useLoadingState } from './loading-state-provider';
78

89
export default function ExampleLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
910
const [isPending, startTransition] = useTransition();
1011
const router = useRouter();
1112
const supabase = createClient();
13+
const { setLoading } = useLoadingState();
1214

1315
// Function to handle example link clicks
1416
const handleExampleClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
@@ -29,6 +31,9 @@ export default function ExampleLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
2931

3032
console.log('Starting analysis for example URL:', url);
3133

34+
// Set global loading state to true
35+
setLoading(true);
36+
3237
startTransition(async () => {
3338
try {
3439
const { data, error } = await supabase.rpc('start_analyze_website_flow', {
@@ -37,6 +42,7 @@ export default function ExampleLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
3742

3843
if (error) {
3944
console.error('Error starting analysis:', error);
45+
setLoading(false);
4046
return;
4147
}
4248

@@ -48,9 +54,11 @@ export default function ExampleLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
4854
router.push(`/websites/runs/${data.run_id}`);
4955
} else {
5056
console.error('No run_id returned from analysis');
57+
setLoading(false);
5158
}
5259
} catch (error) {
5360
console.error('Exception during analysis:', error);
61+
setLoading(false);
5462
}
5563
});
5664
};

‎examples/playground/components/flow-run-details.tsx

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -130,9 +130,9 @@ export default function FlowRunDetails({
130130
? 'bg-yellow-500 breathing'
131131
: runData.status === 'failed'
132132
? 'bg-red-500'
133-
: runData.status === 'created'
134-
? 'bg-blue-500'
135-
: 'bg-gray-500'
133+
: runData.status === 'error' || runData.status === 'cancelled'
134+
? 'bg-red-500'
135+
: 'bg-blue-500'
136136
}`}
137137
></span>
138138
<span className="capitalize text-sm">
@@ -202,8 +202,8 @@ export default function FlowRunDetails({
202202
);
203203

204204
// Group parallel steps based on flow definition
205-
// We're specifically looking for summary, sentiment, and tags steps that run in parallel
206-
const parallelStepSlugs = ['summary', 'sentiment', 'tags'];
205+
// We're specifically looking for summary and tags steps that run in parallel
206+
const parallelStepSlugs = ['summary', 'tags'];
207207
const parallelSteps = sortedStepStates.filter((step) =>
208208
parallelStepSlugs.includes(step.step_slug),
209209
);
@@ -217,7 +217,7 @@ export default function FlowRunDetails({
217217
const renderStep = (
218218
step: any,
219219
index: number,
220-
isParallel: boolean = false,
220+
isParallel = false,
221221
) => {
222222
// Find the corresponding step tasks for this step
223223
const stepTasks = runData.step_tasks
@@ -320,18 +320,20 @@ export default function FlowRunDetails({
320320
? 'bg-yellow-500 breathing'
321321
: step.status === 'failed'
322322
? 'bg-red-500'
323-
: step.status === 'created'
324-
? 'bg-blue-500'
325-
: 'bg-gray-500'
323+
: step.status === 'error' || step.status === 'cancelled'
324+
? 'bg-red-500'
325+
: 'bg-blue-500'
326326
}`}
327327
></span>
328328
{!isParallel && (
329329
<span className="capitalize text-xs">
330330
{isRetrying
331331
? `retrying (retry ${latestTask.attempts_count - 1})`
332-
: step.status === 'created'
333-
? 'waiting'
334-
: step.status}
332+
: step.status === 'error' || step.status === 'cancelled'
333+
? step.status
334+
: step.status === 'started'
335+
? 'running'
336+
: step.status}
335337
</span>
336338
)}
337339
</div>
@@ -420,7 +422,7 @@ export default function FlowRunDetails({
420422
Parallel Processing
421423
</span>
422424
</div>
423-
<div className="grid grid-cols-3 gap-2 relative step-container">
425+
<div className="grid grid-cols-2 gap-2 relative step-container">
424426
{parallelSteps.map((step, index) =>
425427
renderStep(step, index, true),
426428
)}
@@ -432,7 +434,7 @@ export default function FlowRunDetails({
432434
.step-container > :global(*) {
433435
height: 41px; /* Match the height of regular steps (label + padding) */
434436
}
435-
.step-container > :global(*[data-state="open"]) {
437+
.step-container > :global(*[data-state='open']) {
436438
height: auto;
437439
}
438440
`}</style>
@@ -460,12 +462,14 @@ export default function FlowRunDetails({
460462
</div>
461463
</div>
462464

463-
<div>
465+
<div className="w-full">
464466
<h3 className="text-base font-medium mb-1">Run Output</h3>
465467
{runData.status === 'completed' ? (
466-
<div className="max-h-36 overflow-hidden border border-gray-500/30 rounded-md">
467-
<div className="overflow-auto max-h-36">
468-
<JSONHighlighter data={runData.output} />
468+
<div className="border border-gray-500/30 rounded-md">
469+
<div className="overflow-auto max-h-[calc(100vh-400px)] w-full">
470+
<div className="w-full overflow-x-auto">
471+
<JSONHighlighter data={runData.output} />
472+
</div>
469473
</div>
470474
</div>
471475
) : (

0 commit comments

Comments
 (0)