chore: small fixes to playground

Squashed commit of the following:

commit 5ab0f54
Author: Wojtek Majewski <wojciech.majewski@pm.me>
Date:   Sun May 4 10:45:33 2025 +0200

    refactor(website-analysis-ui): remove duplicate collapse buttons and streamline UI controls

    - Eliminated redundant collapse button at the bottom of expanded details
    - Simplified toggle logic for analysis details and results sections
    - Improved component readability by removing unnecessary code and markup

commit 490e407
Author: Wojtek Majewski <wojciech.majewski@pm.me>
Date:   Sun May 4 10:43:15 2025 +0200

    feat: update UI to include description for website analysis trigger

    - Added explanatory span to the "Analyze Website" header when analysis is completed or failed
    - Clarifies that triggering analysis uses a multi-step workflow with pgflow

commit b5b6957
Author: Wojtek Majewski <wojciech.majewski@pm.me>
Date:   Sun May 4 10:42:23 2025 +0200

    refactor: remove inline CSS and dynamic style injection for breathing animation

    - Removed CSS keyframes and breathing class from CSS files
    - Eliminated useEffect hook that dynamically injected styles in component
    - Simplifies styling approach by removing runtime style manipulation and inline styles

Author: jumski

examples/playground/app/globals.css

@@ -63,7 +63,28 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
+
+/********** CUSTOM OVERRIDES **********/
+
+@keyframes breathe {
+  0% {
+    opacity: 0.4;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
+
+.breathing {
+  animation: breathe 2s infinite ease-in-out;
+}

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

@@ -10,18 +10,6 @@ import {
 import JSONHighlighter from '@/components/json-highlighter';
 import { FormMessage } from '@/components/form-message';
 
-// Add CSS for breathing animation
-const breathingAnimation = `
-@keyframes breathe {
-  0% { opacity: 0.4; }
-  50% { opacity: 1; }
-  100% { opacity: 0.4; }
-}
-.breathing {
-  animation: breathe 2s infinite ease-in-out;
-}
-`;
-
 // Format time difference in a concise way (e.g., "5s", "3m 45s", "2h 15m")
 function formatTimeDifference(
   startDate: string | null,
@@ -107,19 +95,6 @@ export default function FlowRunDetails({
   error,
   currentTime,
 }: FlowRunDetailsProps) {
-  // Add the breathing animation to the head
-  useEffect(() => {
-    // Add the style element to the head
-    const styleElement = document.createElement('style');
-    styleElement.innerHTML = breathingAnimation;
-    document.head.appendChild(styleElement);
-
-    // Clean up when component unmounts
-    return () => {
-      document.head.removeChild(styleElement);
-    };
-  }, []);
-
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[30vh]">

examples/playground/components/website-analysis-ui.tsx

@@ -211,7 +211,12 @@ export default function WebsiteAnalysisUI({
       {/* Top bar with analyze form when analysis is completed */}
       {(isCompleted || isFailed) && (
         <div className="mb-6">
-          <h3 className="text-base font-medium mb-2">Analyze Website</h3>
+          <h3 className="text-base font-medium mb-2">
+            Analyze Website
+            <span className="ml-2 text-xs text-muted-foreground">
+              Triggers a multi-step workflow using <strong>pgflow</strong>
+            </span>
+          </h3>
           <form
             onSubmit={handleSubmit}
             className="flex flex-col sm:flex-row gap-2"
@@ -538,17 +543,6 @@ export default function WebsiteAnalysisUI({
                       </div>
                     </motion.div>
                   ))}
-
-                  {/* Duplicate collapse button at the bottom of expanded details */}
-                  {!isRunning && !isFailed && (
-                    <div
-                      onClick={() => setAnalysisExpanded(false)}
-                      className="flex items-center justify-between p-2 rounded-md cursor-pointer hover:bg-muted/50 border border-muted-foreground/20 mt-4"
-                    >
-                      <span className="text-sm font-medium">Hide Details</span>
-                      <ChevronUp className="h-4 w-4 text-muted-foreground" />
-                    </div>
-                  )}
                 </motion.div>
               )}
             </AnimatePresence>
@@ -566,30 +560,6 @@ export default function WebsiteAnalysisUI({
             <div className="mb-4">
               <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
                 <h3 className="text-xl font-medium">Analysis Results</h3>
-                {!isRunning && (
-                  <div
-                    onClick={() => setAnalysisExpanded(!analysisExpanded)}
-                    className="flex items-center gap-2 px-3 py-1 rounded-md cursor-pointer hover:bg-muted/50 border border-muted-foreground/20 mt-2 sm:mt-0 self-start"
-                  >
-                    <span className="text-sm font-medium">Details</span>
-                    <span
-                      className={`inline-flex items-center text-xs px-2 py-1 rounded-full ${
-                        runData?.status === 'completed'
-                          ? 'bg-green-100 text-green-800'
-                          : runData?.status === 'failed'
-                            ? 'bg-red-100 text-red-800'
-                            : 'bg-blue-100 text-blue-800'
-                      }`}
-                    >
-                      {runData?.status === 'completed' ? 'OK' : runData?.status}
-                    </span>
-                    {analysisExpanded ? (
-                      <ChevronUp className="h-4 w-4 text-muted-foreground" />
-                    ) : (
-                      <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                    )}
-                  </div>
-                )}
               </div>
               <span className="text-sm font-medium text-muted-foreground">
                 Website: