Restyle workflow preview with transparent background and refined layout

Adds an optional transparent-background mode to the workflow preview
embed and redesigns the workflow detail page to place the CTA next to
the title, tags under the title, and the description below the preview.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/app/src/components/workflow/workflow-builder.tsx

@@ -89,6 +89,7 @@ export interface WorkflowBuilderProps {
     parameters?: Record<string, unknown>;
   }) => void;
   showSidebar?: boolean;
+  showBackground?: boolean;
   isEnabled?: boolean;
   isTogglingEnabled?: boolean;
   onToggleEnabled?: (checked: boolean) => void;
@@ -116,6 +117,7 @@ export function WorkflowBuilder({
   orgId,
   wsExecuteWorkflow,
   showSidebar,
+  showBackground = true,
   isEnabled,
   isTogglingEnabled,
   onToggleEnabled,
@@ -313,6 +315,7 @@ export function WorkflowBuilder({
               onPasteFromClipboard={readOnly ? undefined : pasteFromClipboard}
               hasClipboardData={hasClipboardData}
               showControls={interactive}
+              showBackground={showBackground}
             />
           </div>
 

apps/app/src/components/workflow/workflow-canvas.tsx

@@ -172,6 +172,7 @@ export interface WorkflowCanvasProps {
   onCutSelected?: () => void;
   onPasteFromClipboard?: () => void;
   hasClipboardData?: boolean;
+  showBackground?: boolean;
 }
 
 interface ActionButtonProps {
@@ -573,6 +574,7 @@ export function WorkflowCanvas({
   onCutSelected,
   onPasteFromClipboard,
   hasClipboardData = false,
+  showBackground = true,
 }: WorkflowCanvasProps) {
   // Get selected elements for button states
   const hasSelectedElements =
@@ -606,9 +608,10 @@ export function WorkflowCanvas({
         }}
         minZoom={0.05}
         maxZoom={4}
-        className={cn("bg-neutral-100/50", {
-          "cursor-default": disabled,
-        })}
+        className={cn(
+          showBackground && "bg-neutral-100/50",
+          disabled && "cursor-default"
+        )}
         nodesDraggable={!disabled && showControls}
         nodesConnectable={!disabled && showControls}
         elementsSelectable={showControls}
@@ -627,12 +630,14 @@ export function WorkflowCanvas({
             showFitView={false}
           />
         )}
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={12}
-          size={1}
-          className="stroke-foreground/5 opacity-50"
-        />
+        {showBackground && (
+          <Background
+            variant={BackgroundVariant.Dots}
+            gap={12}
+            size={1}
+            className="stroke-foreground/5 opacity-50"
+          />
+        )}
 
         {/* Status Bar - hidden in read-only mode */}
         {!disabled && (

apps/app/src/index.css

@@ -297,3 +297,38 @@ html.dark .cm-scroller {
 html.dark .cm-content {
   color: #e0e0e0;
 }
+
+/* React Flow attribution restyled as a small pill button */
+.react-flow__attribution {
+  margin: 6px !important;
+  padding: 2px 8px !important;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.85) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(4px);
+  font-size: 10px;
+  line-height: 1.4;
+  transition: background-color 0.15s ease;
+}
+
+.react-flow__attribution:hover {
+  background: rgba(255, 255, 255, 1) !important;
+}
+
+.react-flow__attribution a {
+  color: #666 !important;
+}
+
+html.dark .react-flow__attribution {
+  background: rgba(30, 30, 30, 0.7) !important;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+html.dark .react-flow__attribution:hover {
+  background: rgba(30, 30, 30, 0.9) !important;
+}
+
+html.dark .react-flow__attribution a {
+  color: #bbb !important;
+}

apps/app/src/pages/template-preview-page.tsx

@@ -35,6 +35,21 @@ export function TemplatePreviewPage() {
     }
   }, [templates, templateId]);
 
+  // When embedded without background, make html/body transparent so the
+  // host page's background shows through the iframe.
+  useEffect(() => {
+    if (showBackground) return;
+    const { documentElement, body } = document;
+    const prevHtml = documentElement.style.background;
+    const prevBody = body.style.background;
+    documentElement.style.background = "transparent";
+    body.style.background = "transparent";
+    return () => {
+      documentElement.style.background = prevHtml;
+      body.style.background = prevBody;
+    };
+  }, [showBackground]);
+
   // Convert template to React Flow nodes and edges
   const { nodes, edges } = useMemo(() => {
     if (!template || nodeTypes.length === 0) {
@@ -71,7 +86,14 @@ export function TemplatePreviewPage() {
   return (
     <div
       className="w-full h-screen"
-      style={{ background: showBackground ? undefined : "transparent" }}
+      style={
+        showBackground
+          ? undefined
+          : {
+              background: "transparent",
+              ["--xy-background-color" as string]: "transparent",
+            }
+      }
     >
       <ReactFlowProvider>
         <WorkflowBuilder
@@ -84,6 +106,7 @@ export function TemplatePreviewPage() {
           expandedOutputs={false}
           createObjectUrl={() => ""}
           orgId=""
+          showBackground={showBackground}
         />
       </ReactFlowProvider>
     </div>

apps/www/src/components/workflow-preview.tsx

@@ -21,7 +21,13 @@ export function WorkflowPreview({
   const embedUrl = `${APP_URL}/embed/templates/${templateId}${showBackground ? "" : "?bg=false"}`;
 
   return (
-    <div className={cn("rounded-xl overflow-hidden bg-neutral-50", className)}>
+    <div
+      className={cn(
+        "rounded-xl overflow-hidden",
+        showBackground && "bg-neutral-50",
+        className
+      )}
+    >
       <iframe
         src={embedUrl}
         title={`Workflow preview for ${templateId}`}

apps/www/src/routes/workflows/$workflowId.tsx

@@ -117,53 +117,50 @@ export default function WorkflowPage({
           ← All use cases
         </Link>
 
-        <div className="mb-12">
-          <div className="flex items-start gap-6 mb-6">
-            <div className="flex-shrink-0 w-16 h-16 bg-white rounded-xl shadow-sm flex items-center justify-center">
-              <IconComponent className="w-8 h-8 text-gray-600" />
+        <div className="mb-12 flex items-center justify-between gap-6">
+          <div className="flex items-center gap-6 min-w-0">
+            <div className="flex-shrink-0 w-24 h-24 bg-white rounded-2xl shadow-sm flex items-center justify-center">
+              <IconComponent className="w-12 h-12 text-gray-600" />
             </div>
-            <div>
+            <div className="min-w-0">
               <h1 className="text-6xl font-light text-gray-900">
                 {workflow.name}
               </h1>
+              <div className="flex flex-wrap items-center gap-2 mt-3">
+                {workflow.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
             </div>
           </div>
 
-          <p className="text-3xl text-gray-500 mb-6">{workflow.description}</p>
-
-          <div className="flex flex-wrap items-center gap-3 mb-8">
-            {workflow.tags.map((tag) => (
-              <span
-                key={tag}
-                className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-
           <a
             href={`${import.meta.env.VITE_APP_URL}/templates/${workflow.id}/try`}
-            className="inline-block text-lg bg-black text-white px-8 py-4 rounded-lg hover:bg-gray-800 transition-colors"
+            className="flex-shrink-0 inline-block text-lg bg-black text-white px-8 py-4 rounded-lg hover:bg-gray-800 transition-colors"
           >
             Try this workflow
           </a>
         </div>
 
         {/* Workflow Preview */}
         <section className="mb-12">
-          <h2 className="text-2xl font-light text-gray-900 mb-4">
-            Workflow Preview
-          </h2>
           <WorkflowPreview
             templateId={workflow.id}
-            className="h-[40rem] border border-gray-200"
+            className="h-[40rem]"
+            showBackground={false}
           />
         </section>
 
+        <p className="text-3xl text-gray-500 mb-12">{workflow.description}</p>
+
         {/* Other Workflows */}
         {otherWorkflows.length > 0 && (
-          <section className="mt-32 pt-8 border-t border-gray-200">
+          <section className="mt-32">
             <h2 className="text-2xl font-light text-gray-900 mb-6">
               Other Workflows
             </h2>