this is how the edit canva should look

src/app/admin/flows/[id]/page.tsx

@@ -1,144 +1,161 @@
 
 'use client';
 
-import { useEffect, useState, useActionState } from 'react';
-import { useFormStatus } from 'react-dom';
-import { getFlow, saveFlow, type Flow } from '@/lib/actions/flows';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
-import { useToast } from '@/hooks/use-toast';
-import Link from 'next/link';
-import { ChevronLeft } from 'lucide-react';
-import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
+import { 
+  Play, 
+  Share2, 
+  MessageSquare, 
+  Pencil, 
+  Settings, 
+  Bike, 
+  Footprints, 
+  MoreHorizontal,
+  Plus,
+  Minus,
+  Code2
+} from 'lucide-react';
+import { FlowNode, FlowNodeInput, FlowNodeOption, FlowNodeMessage } from '@/components/admin/flow-node';
 
-interface FlowFormPageProps {
-  params: { id: string };
-}
-
-function SubmitButton({ isNew }: { isNew: boolean }) {
-  const { pending } = useFormStatus();
+export default function FlowEditorPage() {
   return (
-    <Button type="submit" disabled={pending}>
-      {pending ? (isNew ? 'Creating...' : 'Saving...') : (isNew ? 'Create Flow' : 'Save Changes')}
-    </Button>
-  );
-}
+    <div className="flex flex-col h-[calc(100vh-4rem)] bg-muted/40">
+      {/* Header */}
+      <header className="flex items-center justify-between p-2 border-b bg-background">
+        <div className="flex items-center gap-4">
+          <h1 className="text-lg font-semibold">Quick Carb Calculator</h1>
+          <nav className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" className="bg-muted">Flow</Button>
+            <Button variant="ghost" size="sm">Theme</Button>
+            <Button variant="ghost" size="sm">Settings</Button>
+            <Button variant="ghost" size="sm">Share</Button>
+          </nav>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm">
+            <Share2 className="mr-2 h-4 w-4" />
+            Share
+          </Button>
+          <Button variant="outline" size="sm">
+            <Play className="mr-2 h-4 w-4" />
+            Test
+          </Button>
+          <Button size="sm">Publish</Button>
+        </div>
+      </header>
       
-export default function FlowFormPage({ params }: FlowFormPageProps) {
-  const [state, formAction] = useActionState(saveFlow, { success: false, message: '', errors: null });
-  const [flow, setFlow] = useState<Flow | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const { toast } = useToast();
+      {/* Main Content */}
+      <div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-2 p-2">
+        {/* Flow Canvas */}
+        <div className="lg:col-span-2 relative bg-dotted-pattern bg-background rounded-lg border overflow-hidden">
+            {/* This is a static representation. A real implementation would use a library like React Flow. */}
+            <div className="absolute top-10 left-10">
+                <FlowNode title="Start" icon={<Play />} />
+            </div>
 
-  const isNew = params.id === 'new';
-
-  useEffect(() => {
-    if (!isNew) {
-      const fetchFlow = async () => {
-        setIsLoading(true);
-        const existingFlow = await getFlow(Number(params.id));
-        setFlow(existingFlow);
-        setIsLoading(false);
-      };
-      fetchFlow();
-    } else {
-        setIsLoading(false);
-    }
-  }, [params.id, isNew]);
-  
-  useEffect(() => {
-    if (state.message && !state.success) {
-      toast({
-        title: 'Error',
-        description: state.message,
-        variant: 'destructive',
-      });
-    }
-  }, [state, toast]);
-
-  if (isLoading) {
-    return (
-        <div>
-            <Skeleton className="h-8 w-48 mb-8" />
-            <Card>
-                <CardHeader>
-                    <Skeleton className="h-7 w-1/3" />
-                    <Skeleton className="h-5 w-2/3" />
-                </CardHeader>
-                <CardContent className="space-y-6">
-                    <div className="space-y-2">
-                        <Skeleton className="h-5 w-24" />
-                        <Skeleton className="h-10 w-full" />
+            <div className="absolute top-10 left-64 w-80">
+                <FlowNode title="Sport">
+                    <FlowNodeMessage text="Welcome to the Quick Carb Calculator!" />
+                    <FlowNodeMessage text="I'll help you figure out how much fuel you'll need to perform at your best. Let's get started! ✨" />
+                    <FlowNodeMessage text="First, what are you fueling for?" />
+                    <FlowNodeOption icon={<Bike />} text="Ride" />
+                    <FlowNodeOption icon={<Footprints />} text="Run" />
+                    <FlowNodeOption icon={<MoreHorizontal />} text="Other" />
+                    <div className="p-2 border rounded-md mt-2">
+                        <p className="text-xs text-muted-foreground">Default</p>
+                        <Badge variant="secondary" className="mt-1">Set Sport</Badge>
                     </div>
-                     <div className="space-y-2">
-                        <Skeleton className="h-5 w-24" />
-                        <Skeleton className="h-10 w-full" />
-                    </div>
-                    <div className="space-y-2">
-                        <Skeleton className="h-5 w-24" />
-                        <Skeleton className="h-20 w-full" />
+                </FlowNode>
+            </div>
+            
+             <div className="absolute top-10 left-[48rem]">
+                 <FlowNode title="What sport?">
+                    <FlowNodeInput placeholder="Type your answer..." variable="Sport" />
+                 </FlowNode>
+            </div>
+
+            <div className="absolute top-64 left-[48rem]">
+                 <FlowNode title="Duration">
+                    <FlowNodeMessage text="Great! How long will you be doing this activity?" />
+                    <FlowNodeInput placeholder="Type your answer..." variable="Duration" />
+                 </FlowNode>
+            </div>
+            
+            <div className="absolute top-64 left-[72rem]">
+                 <FlowNode title="Intensity">
+                    <FlowNodeMessage text="Understood! Now, how hard will you be going?" />
+                    <FlowNodeInput placeholder="Type your answer..." variable="Intensity" />
+                 </FlowNode>
+            </div>
+
+            <div className="absolute top-[34rem] left-[72rem]">
+                 <FlowNode title="AI gen">
+                    <FlowNodeMessage text="Create ..." />
+                    <Badge variant="secondary" className="mt-1">Set Assistant</Badge>
+                 </FlowNode>
+            </div>
+
+
+            {/* Canvas Controls */}
+            <div className="absolute top-4 right-4 flex flex-col gap-2">
+                <Card className="p-1">
+                    <Button variant="ghost" size="icon"><Code2 className="h-4 w-4" /></Button>
+                    <Button variant="ghost" size="icon"><MoreHorizontal className="h-4 w-4" /></Button>
+                </Card>
+                 <Card className="p-1">
+                    <Button variant="ghost" size="icon"><Plus className="h-4 w-4" /></Button>
+                     <Button variant="ghost" size="icon"><Minus className="h-4 w-4" /></Button>
+                </Card>
+            </div>
+        </div>
+
+        {/* Phone Preview */}
+        <div className="lg:col-span-1 bg-background rounded-lg border flex justify-center items-center p-4">
+            <Card className="w-full max-w-sm h-full max-h-[800px] shadow-lg flex flex-col">
+                <CardContent className="p-2 flex-1 overflow-y-auto">
+                    <div className="flex flex-col gap-3 p-2">
+                        {/* Chat messages */}
+                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
+                           First, what are you fueling for?
+                        </div>
+                        <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
+                            <Bike className="h-4 w-4" /> Ride
+                        </div>
+                        <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
+                            <Footprints className="h-4 w-4" /> Run
+                        </div>
+                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs flex items-center gap-2">
+                            <MoreHorizontal className="h-4 w-4" /> Other
+                        </div>
+
+                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs flex items-center gap-2">
+                           Run <Footprints className="h-4 w-4" />
+                        </div>
+
+                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
+                           Great! How long will you be doing this activity?
+                        </div>
+                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs">
+                           I'll try 3h30
+                        </div>
+                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
+                            Understood! Now, how hard will you be going?
+                        </div>
+                        <div className="p-3 rounded-lg bg-green-200 text-green-900 self-end max-w-xs">
+                           I'd say a good 8 out of 10
+                        </div>
+                         <div className="p-3 rounded-lg bg-muted text-muted-foreground self-start max-w-xs">
+                           Total carbs: 90-120g
+                        </div>
+
                     </div>
                 </CardContent>
-                <CardFooter>
-                  <Skeleton className="h-10 w-32" />
-                </CardFooter>
             </Card>
         </div>
-    )
-  }
-
-  const getError = (field: string) => {
-    return state.errors?.find(e => e.path?.[0] === field)?.message;
-  }
-
-  return (
-    <div className="space-y-8">
-      <div className="flex items-center gap-4">
-        <Button variant="outline" size="icon" asChild>
-          <Link href="/admin/flows">
-            <ChevronLeft className="h-4 w-4" />
-            <span className="sr-only">Back</span>
-          </Link>
-        </Button>
-        <h1 className="text-3xl font-bold tracking-tight">
-          {isNew ? 'Create New Flow' : 'Edit Flow'}
-        </h1>
       </div>
-
-      <form action={formAction}>
-        <Card>
-          <CardHeader>
-            <CardTitle>Flow Details</CardTitle>
-            <CardDescription>
-              {isNew ? 'Fill in the details for your new flow.' : 'Update the details for this flow.'}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <input type="hidden" name="id" value={flow?.id} />
-            <div className="space-y-2">
-              <Label htmlFor="name">Flow Name</Label>
-              <Input id="name" name="name" defaultValue={flow?.name} required />
-              {getError('name') && <p className="text-sm text-destructive">{getError('name')}</p>}
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="path">Path</Label>
-              <Input id="path" name="path" defaultValue={flow?.path} placeholder="/my-cool-flow" required />
-              {getError('path') && <p className="text-sm text-destructive">{getError('path')}</p>}
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <Textarea id="description" name="description" defaultValue={flow?.description || ''} placeholder="A brief description of what this flow does." />
-              {getError('description') && <p className="text-sm text-destructive">{getError('description')}</p>}
-            </div>
-          </CardContent>
-          <CardFooter>
-            <SubmitButton isNew={isNew} />
-          </CardFooter>
-        </Card>
-      </form>
     </div>
   );
 }

src/app/globals.css

@@ -56,4 +56,9 @@
   body {
     @apply bg-background text-foreground;
   }
+  .bg-dotted-pattern {
+    background-color: hsl(var(--card));
+    background-image: radial-gradient(hsl(var(--border)) 1px, transparent 0);
+    background-size: 20px 20px;
+  }
 }

src/components/admin/flow-node.tsx

@@ -0,0 +1,86 @@
+
+'use client';
+
+import React from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { MessageSquare, Pencil, Type } from 'lucide-react';
+
+interface FlowNodeProps {
+  title: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function FlowNode({ title, icon, children, className }: FlowNodeProps) {
+  return (
+    <Card className={`w-72 bg-background shadow-lg ${className}`}>
+      <CardHeader className="flex flex-row items-center justify-between p-2 border-b">
+        <div className="flex items-center gap-2">
+            {icon}
+            <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-2 space-y-2">
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface FlowNodeElementProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+
+function FlowNodeElement({className, children}: FlowNodeElementProps) {
+    return (
+        <div className={`group relative p-2 text-sm rounded-md border bg-card hover:bg-muted/50 ${className}`}>
+           {children}
+            <Button variant="ghost" size="icon" className="absolute top-1 right-1 h-6 w-6 opacity-0 group-hover:opacity-100">
+                <Pencil className="h-3 w-3" />
+            </Button>
+        </div>
+    )
+}
+
+export function FlowNodeMessage({ text }: { text: string }) {
+  return (
+     <FlowNodeElement>
+        <div className="flex items-start gap-2">
+            <MessageSquare className="h-4 w-4 text-muted-foreground mt-0.5" />
+            <p className="flex-1">{text}</p>
+        </div>
+     </FlowNodeElement>
+  );
+}
+
+export function FlowNodeInput({ placeholder, variable }: { placeholder: string; variable: string }) {
+    return (
+        <FlowNodeElement>
+            <div className="flex items-start gap-2">
+                 <Type className="h-4 w-4 text-muted-foreground mt-0.5" />
+                 <div className='flex-1'>
+                    <Input disabled placeholder={placeholder} className="text-xs h-7 bg-transparent disabled:cursor-text disabled:opacity-100" />
+                    <div className="mt-2">
+                        <Badge variant="secondary">Set {variable}</Badge>
+                    </div>
+                 </div>
+            </div>
+        </FlowNodeElement>
+    )
+}
+
+export function FlowNodeOption({ text, icon }: { text: string; icon?: React.ReactNode }) {
+    return (
+        <FlowNodeElement>
+            <div className="flex items-center gap-2">
+                {icon}
+                <p>{text}</p>
+            </div>
+        </FlowNodeElement>
+    )
+}