feat: demo rename slugs

Author: jumski

apps/demo/src/lib/components/CodePanel.svelte

@@ -27,7 +27,7 @@
 	let isMobile = $state(false);
 
 	// Section order for mobile rendering
-	const SECTION_ORDER = ['flow_config', 'fetch_article', 'summarize', 'extract_keywords', 'publish'];
+	const SECTION_ORDER = ['flow_config', 'fetchArticle', 'summarize', 'extractKeywords', 'publish'];
 
 	// Calculate step blocks (groups of lines) for status icon positioning
 	const stepBlocks = $derived.by(() => {

apps/demo/src/lib/components/DAGVisualization.svelte

@@ -92,11 +92,11 @@
 	// Shifted up by 30px to center better in viewport
 	let nodes = $derived([
 		{
-			id: 'fetch_article',
+			id: 'fetchArticle',
 			type: 'default',
 			position: { x: 150, y: -30 },
-			data: { label: 'fetch_article' },
-			class: getNodeClass('fetch_article'),
+			data: { label: 'fetchArticle' },
+			class: getNodeClass('fetchArticle'),
 			draggable: false
 		},
 		{
@@ -108,11 +108,11 @@
 			draggable: false
 		},
 		{
-			id: 'extract_keywords',
+			id: 'extractKeywords',
 			type: 'default',
 			position: { x: 250, y: 51 },
-			data: { label: 'extract_keywords' },
-			class: getNodeClass('extract_keywords'),
+			data: { label: 'extractKeywords' },
+			class: getNodeClass('extractKeywords'),
 			draggable: false
 		},
 		{
@@ -128,17 +128,17 @@
 	let edges = $derived.by(() => [
 		{
 			id: 'e1',
-			source: 'fetch_article',
+			source: 'fetchArticle',
 			target: 'summarize',
-			animated: isEdgeActive('fetch_article', 'summarize'),
-			class: getEdgeClass('fetch_article', 'summarize')
+			animated: isEdgeActive('fetchArticle', 'summarize'),
+			class: getEdgeClass('fetchArticle', 'summarize')
 		},
 		{
 			id: 'e2',
-			source: 'fetch_article',
-			target: 'extract_keywords',
-			animated: isEdgeActive('fetch_article', 'extract_keywords'),
-			class: getEdgeClass('fetch_article', 'extract_keywords')
+			source: 'fetchArticle',
+			target: 'extractKeywords',
+			animated: isEdgeActive('fetchArticle', 'extractKeywords'),
+			class: getEdgeClass('fetchArticle', 'extractKeywords')
 		},
 		{
 			id: 'e3',
@@ -149,10 +149,10 @@
 		},
 		{
 			id: 'e4',
-			source: 'extract_keywords',
+			source: 'extractKeywords',
 			target: 'publish',
-			animated: isEdgeActive('extract_keywords', 'publish'),
-			class: getEdgeClass('extract_keywords', 'publish')
+			animated: isEdgeActive('extractKeywords', 'publish'),
+			class: getEdgeClass('extractKeywords', 'publish')
 		}
 	]);
 

apps/demo/src/lib/components/ExplanationPanel.svelte

@@ -51,31 +51,31 @@
 		inputType: `{
   url: string
 }`,
-		steps: ['fetch_article', 'summarize', 'extract_keywords', 'publish']
+		steps: ['fetchArticle', 'summarize', 'extractKeywords', 'publish']
 	};
 
 	// Step-level concept explanations (how pgflow works internally)
 	const stepConcepts: Record<string, string> = {
-		fetch_article:
+		fetchArticle:
 			"This is a root step with no dependencies. When start_flow() is called, SQL Core immediately " +
 			"pushes a message to the queue. The Worker polls, gets the message, executes the handler, " +
 			"and calls complete_task() with the return value. SQL Core acknowledges completion, saves the output, " +
 			"and checks which dependent steps now have all their dependencies satisfied.",
 
 		summarize:
-			"Depends on fetch_article. After fetch_article completes, SQL Core checks if this step's " +
-			"dependencies are met. Since fetch_article is the only dependency, this step becomes ready " +
-			"immediately. SQL Core pushes a message with the input payload (fetch_article's output). " +
+			"Depends on fetchArticle. After fetchArticle completes, SQL Core checks if this step's " +
+			"dependencies are met. Since fetchArticle is the only dependency, this step becomes ready " +
+			"immediately. SQL Core pushes a message with the input payload (fetchArticle's output). " +
 			"Worker polls, executes the handler, calls complete_task(). SQL Core acknowledges completion and saves output.",
 
-		extract_keywords:
-			"Also depends only on fetch_article, so it becomes ready at the same time as summarize. " +
+		extractKeywords:
+			"Also depends only on fetchArticle, so it becomes ready at the same time as summarize. " +
 			"Both messages hit the queue simultaneously - whichever Worker polls first starts execution. " +
 			"This is how pgflow achieves parallel execution: SQL Core identifies ready steps and pushes messages, " +
 			"Workers execute independently.",
 
 		publish:
-			"Depends on both summarize AND extract_keywords. This step remains blocked until both " +
+			"Depends on both summarize AND extractKeywords. This step remains blocked until both " +
 			"dependencies complete. After the second one finishes, complete_task() acknowledges completion, " +
 			"saves output, checks dependencies, and finds publish is now ready. SQL Core pushes the message " +
 			"with both outputs as input. After publish completes, no dependent steps remain - the run is marked completed."
@@ -94,13 +94,13 @@
 			returns: string;
 		}
 	> = {
-		fetch_article: {
-			name: 'fetch_article',
+		fetchArticle: {
+			name: 'fetchArticle',
 			displayName: 'Fetch Article',
 			whatItDoes:
 				'Fetches article content from the provided URL using r.jina.ai. Returns both the article text and title for downstream processing.',
 			dependsOn: [],
-			dependents: ['summarize', 'extract_keywords'],
+			dependents: ['summarize', 'extractKeywords'],
 			inputType: `{
   run: {
     url: string
@@ -116,25 +116,25 @@
 			displayName: 'Summarize',
 			whatItDoes:
 				'Uses an LLM (Groq) to generate a concise summary of the article content. Runs in parallel with keyword extraction for efficiency.',
-			dependsOn: ['fetch_article'],
+			dependsOn: ['fetchArticle'],
 			dependents: ['publish'],
 			inputType: `{
-  fetch_article: {
+  fetchArticle: {
     content: string
     title: string
   }
 }`,
 			returns: 'string'
 		},
-		extract_keywords: {
-			name: 'extract_keywords',
+		extractKeywords: {
+			name: 'extractKeywords',
 			displayName: 'Extract Keywords',
 			whatItDoes:
 				'Uses an LLM (Groq) to extract key terms and topics from the article. Runs in parallel with summarization for efficiency.',
-			dependsOn: ['fetch_article'],
+			dependsOn: ['fetchArticle'],
 			dependents: ['publish'],
 			inputType: `{
-  fetch_article: {
+  fetchArticle: {
     content: string
   }
 }`,
@@ -145,11 +145,11 @@
 			displayName: 'Publish',
 			whatItDoes:
 				'Combines the summary and keywords and publishes the processed article. In this demo, generates a mock article ID—in production, this would save to a database.',
-			dependsOn: ['summarize', 'extract_keywords'],
+			dependsOn: ['summarize', 'extractKeywords'],
 			dependents: [],
 			inputType: `{
   summarize: string
-  extract_keywords: string[]
+  extractKeywords: string[]
 }`,
 			returns: 'string'
 		}

apps/demo/src/lib/components/MiniDAG.svelte

@@ -16,18 +16,18 @@
 
 	// Define nodes positions (x,y = center of node) - vertical layout
 	const nodes = [
-		{ id: 'fetch_article', x: 60, y: 20, label: 'fetch' },
+		{ id: 'fetchArticle', x: 60, y: 20, label: 'fetch' },
 		{ id: 'summarize', x: 25, y: 60, label: 'summ' },
-		{ id: 'extract_keywords', x: 95, y: 60, label: 'kwrds' },
+		{ id: 'extractKeywords', x: 95, y: 60, label: 'kwrds' },
 		{ id: 'publish', x: 60, y: 100, label: 'pub' }
 	];
 
 	// Define edges
 	const edges = [
-		{ from: 'fetch_article', to: 'summarize' },
-		{ from: 'fetch_article', to: 'extract_keywords' },
+		{ from: 'fetchArticle', to: 'summarize' },
+		{ from: 'fetchArticle', to: 'extractKeywords' },
 		{ from: 'summarize', to: 'publish' },
-		{ from: 'extract_keywords', to: 'publish' }
+		{ from: 'extractKeywords', to: 'publish' }
 	];
 
 	// Helper function to create smooth curved paths for vertical layout

apps/demo/src/lib/components/WelcomeModal.svelte

@@ -47,7 +47,7 @@
 					<!-- First-time welcome -->
 					<div class="space-y-4">
 						<p class="text-sm text-muted-foreground">
-							This demo is a 4-step DAG workflow: fetch → (summarize + extract_keywords in parallel) → publish.
+							This demo is a 4-step DAG workflow: fetch → (summarize + extractKeywords in parallel) → publish.
 							Watch how pgflow orchestrates execution across three layers.
 						</p>
 
@@ -100,7 +100,7 @@
 									<span class="font-mono text-foreground">start_flow()</span> created state rows for each step
 								</div>
 								<div>
-									SQL Core pushed <span class="font-mono text-foreground">fetch_article</span> message to queue
+									SQL Core pushed <span class="font-mono text-foreground">fetchArticle</span> message to queue
 								</div>
 								<div>
 									Worker polled queue, executed handler, called <span class="font-mono text-foreground">complete_task()</span>

apps/demo/src/lib/data/flow-code.ts

@@ -22,65 +22,65 @@ export const FLOW_SECTIONS: Record<string, CodeSection> = {
   maxAttempts: 3
 })`
 	},
-	fetch_article: {
+	fetchArticle: {
 		code: `  .step(
-    { slug: 'fetch_article' },
+    { slug: 'fetchArticle' },
     (input) => scrapeUrl(input.run.url)
   )`,
 		mobileCode: `  .step(
-    { slug: 'fetch_article' },
+    { slug: 'fetchArticle' },
     (input) => scrapeUrl(
       input.run.url
     )
   )`
 	},
 	summarize: {
 		code: `  .step(
-    { slug: 'summarize', dependsOn: ['fetch_article'] },
-    (input) => summarize(schema, input.fetch_article.content)
+    { slug: 'summarize', dependsOn: ['fetchArticle'] },
+    (input) => summarize(schema, input.fetchArticle.content)
   )`,
 		mobileCode: `  .step(
     {
       slug: 'summarize',
-      dependsOn: ['fetch_article']
+      dependsOn: ['fetchArticle']
     },
     (input) => summarize(
       schema,
-      input.fetch_article.content
+      input.fetchArticle.content
     )
   )`
 	},
-	extract_keywords: {
+	extractKeywords: {
 		code: `  .step(
-    { slug: 'extract_keywords', dependsOn: ['fetch_article'] },
-    (input) => extractKeywords(input.fetch_article.content)
+    { slug: 'extractKeywords', dependsOn: ['fetchArticle'] },
+    (input) => extractKeywords(input.fetchArticle.content)
   )`,
 		mobileCode: `  .step(
     {
-      slug: 'extract_keywords',
-      dependsOn: ['fetch_article']
+      slug: 'extractKeywords',
+      dependsOn: ['fetchArticle']
     },
     (input) => extractKeywords(
-      input.fetch_article.content
+      input.fetchArticle.content
     )
   )`
 	},
 	publish: {
 		code: `  .step(
-    { slug: 'publish', dependsOn: ['summarize', 'extract_keywords'] },
-    (input) => publishArticle(input.summarize, input.extract_keywords)
+    { slug: 'publish', dependsOn: ['summarize', 'extractKeywords'] },
+    (input) => publishArticle(input.summarize, input.extractKeywords)
   );`,
 		mobileCode: `  .step(
     {
       slug: 'publish',
       dependsOn: [
         'summarize',
-        'extract_keywords'
+        'extractKeywords'
       ]
     },
     (input) => publishArticle(
       input.summarize,
-      input.extract_keywords
+      input.extractKeywords
     )
   );`
 	}
@@ -91,7 +91,7 @@ export const FLOW_SECTIONS: Record<string, CodeSection> = {
  */
 function calculateLineRanges() {
 	let currentLine = 1;
-	const orderedSlugs = ['flow_config', 'fetch_article', 'summarize', 'extract_keywords', 'publish'];
+	const orderedSlugs = ['flow_config', 'fetchArticle', 'summarize', 'extractKeywords', 'publish'];
 
 	for (const slug of orderedSlugs) {
 		const section = FLOW_SECTIONS[slug];

apps/demo/src/lib/stores/MIGRATION_GUIDE.md

@@ -20,7 +20,7 @@ The improved pattern fixes these key issues:
 const pgflowState = createPgflowState<typeof ArticleFlow>(
 	pgflow,
 	'article_flow',
-	['fetch_article', 'summarize', 'extract_keywords', 'publish'] // ❌ Manual list
+	['fetchArticle', 'summarize', 'extractKeywords', 'publish'] // ❌ Manual list
 );
 ```
 
@@ -107,9 +107,9 @@ This enables monitoring flows started by:
 	import type ArticleFlow from './article_flow';
 
 	const pgflowState = createPgflowState<typeof ArticleFlow>(pgflow, 'article_flow', [
-		'fetch_article',
+		'fetchArticle',
 		'summarize',
-		'extract_keywords',
+		'extractKeywords',
 		'publish'
 	]);
 

apps/demo/src/lib/stores/pgflow-state-improved.svelte.ts

@@ -259,7 +259,7 @@ export function createFlowState<TFlow extends AnyFlow>(
  *   const flowState = createFlowState<typeof ArticleFlow>(
  *     pgflow,
  *     'article_flow',
- *     ['fetch_article', 'summarize', 'extract_keywords', 'publish']
+ *     ['fetchArticle', 'summarize', 'extractKeywords', 'publish']
  *   );
  *
  *   async function start() {

apps/demo/src/lib/stores/pgflow-state.svelte.ts

@@ -161,7 +161,7 @@ class PgflowState<TFlow extends AnyFlow = AnyFlow> {
  * const articleFlowState = createPgflowState<typeof ArticleFlow>(
  *   pgflowClient,
  *   'article_flow',
- *   ['fetch_article', 'summarize', 'extract_keywords', 'publish']
+ *   ['fetchArticle', 'summarize', 'extractKeywords', 'publish']
  * );
  *
  * // Start the flow

apps/demo/src/routes/+page.svelte

@@ -14,9 +14,9 @@
 	import type ArticleFlow from '../../supabase/functions/article_flow_worker/article_flow';
 
 	const flowState = createFlowState<typeof ArticleFlow>(pgflow, 'article_flow', [
-		'fetch_article',
+		'fetchArticle',
 		'summarize',
-		'extract_keywords',
+		'extractKeywords',
 		'publish'
 	]);