meta_workflows 0.9.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d50e1943ccd15113eba9afb7c8cbdc01d438c6d3d49a88ceeff0c99585f6a35
-  data.tar.gz: 903ed9aabed86d16a846caf25a96497ebd31ea3c6f1872a4c1ce4a55dbdfaeb8
+  metadata.gz: 50ae604291373e74675fbac7838bb9cbbdcef8beb635a07ac40f06c89f784a75
+  data.tar.gz: cefff5fe7d2a949941dee57e2a642e7eb54d2eaec220a489e252799fb8888f1c
 SHA512:
-  metadata.gz: 5641f236a0e35b67e90a4a557015d6135f2c03c8061ea5bfd2c4adc5c5ce20b9e90e3a357e5764479f71f3db3aaf81acba5093c6aae4102a7d49881584b0bce7
-  data.tar.gz: f591fffcd47a4f0ae49746a3d0aaa2d4c495eb39c6a171bedc049906617deba5493bf2e984ce1b1b4c50c6ad73d4811a774eb51a8b1894295e5a0c6278271ff7
+  metadata.gz: ec4974b30bfe8c3c17fbd779228e2bdf469ba86fd808fcfdfa792b4bad5419591e919d23570a42c70aedc06c68021321174a33d91faaf1b935eced1aa5504072
+  data.tar.gz: 940604b1494c067ead7d9dbf6da6be88b10538e59bba4551e90a575ac070ff6fe882134a170e0f1d4f2045d2a9cffb75a3116fc010d3591361bbd74666e4efb5

data/README.md

@@ -518,13 +518,44 @@ For development contributions:
 
 For detailed information about the MetaWorkflows system:
 - [Setup Guide](https://strongmind.atlassian.net/wiki/spaces/MW/pages/3929833507) - Configuration and workflow setup
-- [File Structure Guide](https://strongmind.atlassian.net/wiki/spaces/MW/pages/3930521627) - Complete file organization reference
-- [Dummy App Guide](https://strongmind.atlassian.net/wiki/spaces/MW/pages/3941072927) - Test application documentation
 
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
+## Styling Setup
+
+To apply or customize the styles for the `meta_workflows` engine, follow these steps:
+
+### 1. Where to Add Your Styles
+
+- All styles should be placed in this file:  
+  `app/assets/stylesheets/meta_workflows/application.css`
+
+### 2. How to Copy the Stylesheet
+
+- To bring the stylesheet into your app (host app or dummy app), run this command from your terminal:
+
+  ```bash
+  rails meta_workflows:install:assets
+  ```
+
+### 3.  Location in Dummy App
+
+- If you're using the dummy app (located at `spec/dummy`), the stylesheet will be copied to:
+`spec/dummy/app/assets/stylesheets/meta_workflows/application.css`.
+
+### 4. ⚠️ Important Note
+
+- Do not edit the copied stylesheet in the dummy app (spec/dummy/...) directly.
+- Changes made there will not carry over to the host app and will be overwritten if you re-run the install:assets task.
+
+### 5. Avoid Using Tailwind's Custom Properties
+
+- **Do not use Tailwind’s custom properties (CSS variables)** in your styles.
+- These properties **won’t be compiled** because the layout files are accessed directly from the engine.
+- As a result, the host app doesn’t recognize that it needs to compile them, and the styles will not work as expected.
+
 ## Tray System (Sidebar, Bottom, and Main Content Trays)
 
 MetaWorkflows provides a flexible tray system for building modern, multi-pane layouts. The tray system supports left (Beta), right (Gamma), and bottom (Delta) trays, as well as a main content area (Alpha). Each tray can be shown, hidden, or made collapsible on a per-controller or per-page basis.

data/app/assets/stylesheets/meta_workflows/application.css

@@ -1,165 +1,200 @@
-/* AI Generated Content */
+/* Meta Workflows Styles Installed in Main App */
 .meta-workflows.chat {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  color: var(--slate-800);
+  font-size: 1.125rem;
+  line-height: 1.75;
+
+  h1 {
+    color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 1.875rem;
+    line-height: 1.25;
+  }
+
+  h2 {
     color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+    line-height: 1.25;
+  }
+
+  h3 {
+    color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 1.25rem;
+    line-height: 1.25;
+  }
+
+  h4 {
+    color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
     font-size: 1.125rem;
-    line-height: 1.75;
-  
-    h1 {
-      color: var(--slate-800);
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      font-size: 1.875rem;
-      line-height: 1.25;
-    }
-  
-    h2 {
-      color: var(--slate-800);
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      font-size: 1.5rem;
-      line-height: 1.25;
-    }
-  
-    h3 {
-      color: var(--slate-800);
-      font-weight: 600;
-      margin-bottom: 0.5rem;
+    line-height: 1.25;
+  }
+
+  h5 {
+    color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  h6 {
+    color: var(--slate-800);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+
+  /* combined list styles */
+  ul,
+  ol {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    padding-left: 0;
+    list-style-type: none;
+
+    li {
+      display: flex;
+      padding: 1rem 1.375rem;
+      border: 1px solid var(--slate-300);
+      border-radius: 0.875rem;
+      background-color: white;
       font-size: 1.25rem;
-      line-height: 1.25;
-    }
-  
-    h4 {
-      color: var(--slate-800);
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      font-size: 1.125rem;
-      line-height: 1.25;
-    }
-  
-    h5 {
-      color: var(--slate-800);
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      font-size: 1rem;
-      line-height: 1.25;
-    }
-  
-    h6 {
-      color: var(--slate-800);
       font-weight: 600;
-      margin-bottom: 0.5rem;
-      font-size: 0.875rem;
-      line-height: 1.25;
-    }
-  
-    /* Combined list styles */
-    ul,
-    ol {
-      display: flex;
-      flex-direction: column;
-      gap: .5rem;
-      padding-left: 0;
-      list-style-type: none;
-  
-      li {
-        display: flex;
-        padding: 1rem 1.375rem;
-        border: 1px solid var(--slate-300);
-        border-radius: 0.875rem;
-        background-color: white;
-        font-size: 1.25rem;
-        font-weight: 600;
-        line-height: 1.375;
-  
-        &::before {
-          display: none;
-        }
-      }
-    }
-  
-    /* Ordered list specific styles */
-    ol {
-      counter-reset: list-counter;
-  
-      li::before {
-        content: counter(list-counter) ".";
-        counter-increment: list-counter;
-        display: inline-block;
-        width: 1.5em;
-        margin-right: 0.5em;
-        color: var(--slate-400);
-      }
-    }
-  
-    a {
-      color: #2563eb;
-      text-decoration: underline;
-  
-      &:hover {
-        color: #1d4ed8;
+      line-height: 1.375;
+
+      &::before {
+        display: none;
       }
     }
-  
-    pre {
-      background-color: #f9fafb;
-      padding: 1rem;
-      border-radius: 0.5rem;
-      overflow-x: auto;
-      margin: 1rem 0;
-    }
-  
-    code {
-      background-color: #f9fafb;
-      padding: 0.125rem 0.375rem;
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-      font-family: ui-monospace, monospace;
-    }
-  
-    blockquote {
-      border-left: 4px solid #e5e7eb;
-      padding-left: 1rem;
-      font-style: italic;
-      color: #374151;
-      margin: 1rem 0;
-    }
-  
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 1rem 0;
-    }
-  
-    th,
-    td {
-      border: 1px solid #e5e7eb;
-      padding: 0.5rem;
-      text-align: left;
-    }
-  
-    th {
-      background-color: #f9fafb;
-      font-weight: 600;
-    }
-  
-    img {
-      border-radius: 0.5rem;
-      margin: 1rem 0;
-    }
-  
-    strong {
-      font-weight: 600;
-      color: var(--slate-800);
+  }
+
+  /* ordered list specific styles */
+  ol {
+    counter-reset: list-counter;
+
+    li::before {
+      content: counter(list-counter) ".";
+      counter-increment: list-counter;
+      display: inline-block;
+      width: 1.5em;
+      margin-right: 0.5em;
+      color: var(--slate-400);
     }
-  
-    em {
-      font-style: italic;
+  }
+
+  a {
+    color: #2563eb;
+    text-decoration: underline;
+
+    &:hover {
+      color: #1d4ed8;
     }
   }
 
+  pre {
+    background-color: #f9fafb;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1rem 0;
+  }
+
+  code {
+    background-color: #f9fafb;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-family: ui-monospace, monospace;
+  }
+
+  blockquote {
+    border-left: 4px solid #e5e7eb;
+    padding-left: 1rem;
+    font-style: italic;
+    color: #374151;
+    margin: 1rem 0;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+  }
+
+  th,
+  td {
+    border: 1px solid #e5e7eb;
+    padding: 0.5rem;
+    text-align: left;
+  }
+
+  th {
+    background-color: #f9fafb;
+    font-weight: 600;
+  }
+
+  img {
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+  }
+
+  strong {
+    font-weight: 600;
+    color: var(--slate-800);
+  }
+
+  em {
+    font-style: italic;
+  }
+}
+
+
+/* Lexi Chat Component Heights */
+.lexi-chat-container {
+  height: 95vh;
+}
+
+.lexi-chat-container-full {
+  height: 100vh;
+}
+
+.lexi-avatar-large {
+  height: 375px;
+}
+
+.lexi-avatar-medium {
+  height: 300px;
+}
+
+.lexi-input-container {
+  height: 335px;
+}
+
+/* Lexi Chat Component Constraints */
+.lexi-input-max-height {
+  max-height: 200px;
+}
+
+.lexi-textarea-min-height {
+  min-height: 35px;
+}
+
+.lexi-message-max-width {
+  max-width: 80%;
+}
+
 /* Tray Animations */
 .tray-container {
   transition: all 500ms ease-in-out;
@@ -212,7 +247,58 @@
 
 /* Common content transitions */
 .tray-content {
-  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
+  transition: opacity 300ms ease-in-out, transform 500ms ease-in-out;
   opacity: 1;
   transform: translate(0);
-}
+}
+
+/* Lexi Tray Overrides */
+.gamma-tray.lexi-tray.collapsed {
+  width: 0px; /* Completely hide the tray */
+  border: none; /* Remove border when collapsed */
+  overflow: visible; /* Allow avatar to show outside tray bounds */
+}
+
+.gamma-tray.lexi-tray.collapsed .tray-content {
+  opacity: 0;
+  transform: translateX(-1rem);
+  pointer-events: none;
+}
+
+/* Fast fade out when collapsing */
+.gamma-tray.lexi-tray.collapsed .tray-content {
+  transition: opacity 200ms ease-in-out, transform 500ms ease-in-out;
+}
+
+/* Delayed fade in when expanding - wait for width animation to mostly complete */
+.gamma-tray.lexi-tray:not(.collapsed) .tray-content {
+  transition: opacity 200ms ease-in-out 300ms, transform 500ms ease-in-out;
+}
+
+/* Hide standard collapse button when Lexi tray is collapsed */
+.gamma-tray.lexi-tray.collapsed > button[data-action="click->tray#toggle"]:not(.lexi-floating-avatar) {
+  display: none;
+}
+
+/* Show floating Lexi avatar button when collapsed - with delay to avoid overlap */
+.gamma-tray.lexi-tray.collapsed .lexi-floating-avatar {
+  display: block !important;
+  opacity: 0;
+  animation: lexi-avatar-appear 200ms ease-in-out 400ms forwards;
+}
+
+@keyframes lexi-avatar-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Hide floating avatar when tray is expanded */
+.gamma-tray.lexi-tray:not(.collapsed) .lexi-floating-avatar {
+  display: none !important;
+}

data/app/controllers/meta_workflows/base_debug_controller.rb

@@ -4,7 +4,7 @@ module MetaWorkflows
   class BaseDebugController < MetaWorkflows::ApplicationController
     include MetaWorkflows::DebugHelper
 
-    layout 'meta_workflows/debug'
+    layout 'meta_workflows/application'
 
     # Apply authentication only in production environment
     before_action :authenticate_with_basic_auth, if: :production_environment?

data/app/views/layouts/meta_workflows/application.html.erb

@@ -1,16 +1,70 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Meta Workflows</title>
+    <title>MetaWorkflows Debug Tool</title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag    "meta_workflows/application", media: "all" %>
-    <%= javascript_include_tag "meta_workflows/application" %>
+    <%= yield :head %>
+
+    <!-- Tailwind CSS -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- JSON Viewer Web Component -->
+    <script src="https://unpkg.com/@alenaksu/json-viewer@2.1.0/dist/json-viewer.bundle.js"></script>
   </head>
 
-  <body>
-    <%= render 'layouts/meta_workflows/flash' %>
-    <%= yield %>
+  <body class="bg-gray-50 min-h-screen">
+    <!-- Flash Messages -->
+    <% flash.each do |type, message| %>
+      <% icon, color_classes = case type.to_sym
+        when :notice
+          ["fa-circle-check", "bg-green-50 border-green-200 text-green-800"]
+        when :alert
+          ["fa-triangle-exclamation", "bg-red-50 border-red-200 text-red-800"]
+        else
+          ["fa-info-circle", "bg-blue-50 border-blue-200 text-blue-800"]
+        end %>
+      <div class="flex items-center gap-3 border-l-4 p-4 mb-4 shadow-sm rounded-md <%= color_classes %>" role="alert">
+        <i class="fa-solid <%= icon %> text-xl"></i>
+        <div class="flex-1">
+          <%= message %>
+        </div>
+        <button type="button" class="ml-4 text-gray-400 hover:text-gray-600 focus:outline-none" onclick="this.parentElement.style.display='none'" aria-label="Dismiss">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+    <% end %>
+
+    <!-- Header Navigation -->
+    <nav class="bg-white shadow-sm border-b border-gray-200">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between items-center h-16">
+          <!-- Logo/Title -->
+          <div class="flex items-center">
+            <h1 class="text-xl font-semibold text-gray-900">
+              MetaWorkflows Debug Tool
+            </h1>
+          </div>
+
+          <!-- Navigation Links -->
+          <div class="flex space-x-8">
+            <%= link_to "Workflows", workflows_path, 
+                class: "#{current_page?(workflows_path) || params[:action] == 'workflows' || params[:action] == 'show_workflow' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'} px-3 py-2 text-sm font-medium" %>
+            <%= link_to "Executions", executions_path, 
+                class: "#{current_page?(executions_path) || params[:action] == 'executions' || params[:action] == 'show_execution' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'} px-3 py-2 text-sm font-medium" %>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+      <%= yield %>
+    </main>
+
+    <!-- Optional JavaScript -->
+    <%= yield :javascripts %>
   </body>
 </html>

data/app/views/meta_workflows/_lexi_chat_alpha_tray.html.erb

@@ -1,5 +1,5 @@
 <%# Lexi Chat Alpha Tray (Center Display) %>
-<div class="relative flex flex-col h-[95vh] bg-white px-4">
+<div class="relative flex flex-col lexi-chat-container bg-white px-4">
   <%# Header with Lexi logo and action icons - spans full width %>
   <div class="flex-shrink-0 flex items-center justify-between pb-2 border-b border-gray-200">
     <div class="flex items-center space-x-2">
@@ -19,7 +19,7 @@
   <div class="flex-1 flex min-h-0">
     <!-- Lexi auto-width side column -->
     <div class="flex-shrink-0 flex flex-col justify-end pb-4">
-      <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "h-[375px] w-auto") %>
+      <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "lexi-avatar-large w-auto") %>
     </div>
     
     <!-- Main content area (chat + input) -->

data/app/views/meta_workflows/_lexi_chat_right_tray.html.erb

@@ -1,5 +1,5 @@
 <%# Lexi Chat Tray %>
-<div class="relative flex flex-col h-[100vh] bg-white px-4">
+<div class="relative flex flex-col lexi-chat-container-full bg-white px-4">
   <%# Header with Lexi logo and action icons %>
   <div class="flex-shrink-0 flex items-center justify-between pb-2 border-b border-gray-200">
     <div class="flex items-center space-x-2">
@@ -21,7 +21,7 @@
   </div>
 
   <%# Lexi avatar and input area pinned to bottom %>
-      <div class="relative bg-white h-[335px]">
+      <div class="relative bg-white lexi-input-container">
              <!-- Bottom section with recording notice and input area -->
        <div class="absolute bottom-15 left-0 right-0 flex flex-col space-y-2 z-10">
          <!-- Recording notice -->
@@ -35,6 +35,6 @@
        </div>
     
     <!-- Lexi image positioned absolutely to the left -->
-    <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "absolute bottom-10 left-0 h-[300px] w-auto pointer-events-none") %>
+    <%= image_tag("lexi-expanded.png", alt: "Lexi Avatar", class: "absolute bottom-10 left-0 lexi-avatar-medium w-auto pointer-events-none") %>
   </div>
 </div> 

data/app/views/meta_workflows/_response_form_lexi.html.erb

@@ -5,10 +5,10 @@
                 <fieldset>
           <div class="flex flex-col gap-1">
             <!-- Input Container -->
-            <div class="flex flex-col max-h-[200px] border border-gray-300 rounded-lg bg-white/80 p-2">
+            <div class="flex flex-col lexi-input-max-height border border-gray-300 rounded-lg bg-white/80 p-2">
                  <!-- Input area with icons -->
                 <div class="flex-1 relative">
-                    <%= form.text_area :message, rows: 1, placeholder: random_chat_placeholder, disabled: local_assigns[:responding] || !local_assigns[:response_enabled], class: "w-full min-h-[35px] border-0 resize-none focus:outline-none focus:ring-0 bg-transparent text-base overflow-y-auto" %>
+                    <%= form.text_area :message, rows: 1, placeholder: random_chat_placeholder, disabled: local_assigns[:responding] || !local_assigns[:response_enabled], class: "w-full lexi-textarea-min-height border-0 resize-none focus:outline-none focus:ring-0 bg-transparent text-base overflow-y-auto" %>
                 </div>
                
                <div class="flex justify-between">

data/app/views/meta_workflows/_response_lexi.html.erb

@@ -11,7 +11,7 @@
       <% if message.role == 'user' %>
         <!-- User message bubble (right-aligned, amber background) -->
         <div class="flex justify-end">
-          <div class="max-w-[80%] bg-amber-100 rounded-xl px-6 py-3">
+          <div class="lexi-message-max-width bg-amber-100 rounded-xl px-6 py-3">
             <div class="text-sm">
               <%= simple_format(message.content) %>
             </div>
@@ -22,7 +22,7 @@
         <!-- Lexi message bubble (left-aligned) -->
         <div class="flex justify-start">
           <!-- Message Bubble -->
-          <div class="max-w-[80%] bg-slate-100 rounded-xl px-6 py-3">
+          <div class="lexi-message-max-width bg-slate-100 rounded-xl px-6 py-3">
             <div class="prose prose-sm max-w-none">
               <%= markdown(message.content) %>
             </div>
@@ -35,7 +35,7 @@
     <% if is_streaming %>
       <div class="flex justify-start">
         <!-- Streaming Message Bubble -->
-        <div class="max-w-[80%] bg-slate-100 rounded-xl px-6 py-3">
+        <div class="lexi-message-max-width bg-slate-100 rounded-xl px-6 py-3">
           <div class="prose prose-sm max-w-none">
             <%= markdown(full_response) %>
           </div>

data/lib/meta_workflows/version.rb

@@ -3,7 +3,7 @@
 module MetaWorkflows
   MAJOR = 0
   MINOR = 9
-  PATCH = 0 # this is automatically incremented by the build process
+  PATCH = 1 # this is automatically incremented by the build process
 
   VERSION = "#{MetaWorkflows::MAJOR}.#{MetaWorkflows::MINOR}.#{MetaWorkflows::PATCH}".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: meta_workflows
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.9.1
 platform: ruby
 authors:
 - Leonid Medovyy
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-30 00:00:00.000000000 Z
+date: 2025-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -157,7 +157,6 @@ files:
 - app/services/meta_workflows/workflow_import_service.rb
 - app/sidekiq/meta_workflows/tools/meta_workflow_tool.rb
 - app/views/layouts/meta_workflows/application.html.erb
-- app/views/layouts/meta_workflows/debug.html.erb
 - app/views/meta_workflows/_lexi_chat_alpha_tray.html.erb
 - app/views/meta_workflows/_lexi_chat_right_tray.html.erb
 - app/views/meta_workflows/_loader.html.erb

data/app/views/layouts/meta_workflows/debug.html.erb

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>MetaWorkflows Debug Tool</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= yield :head %>
-
-  <%= stylesheet_link_tag "meta_workflows/application", media: "all" %>
-  
-  <!-- Tailwind CSS -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://cdn.tailwindcss.com"></script>
-  
-  <!-- JSON Viewer Web Component -->
-  <script src="https://unpkg.com/@alenaksu/json-viewer@2.1.0/dist/json-viewer.bundle.js"></script>
-</head>
-<body class="bg-gray-50 min-h-screen">
-  <!-- Header Navigation -->
-  <nav class="bg-white shadow-sm border-b border-gray-200">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex justify-between items-center h-16">
-        <!-- Logo/Title -->
-        <div class="flex items-center">
-          <h1 class="text-xl font-semibold text-gray-900">
-            MetaWorkflows Debug Tool
-          </h1>
-        </div>
-
-        <!-- Navigation Links -->
-        <div class="flex space-x-8">
-          <%= link_to "Workflows", workflows_path, 
-              class: "#{current_page?(workflows_path) || params[:action] == 'workflows' || params[:action] == 'show_workflow' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'} px-3 py-2 text-sm font-medium" %>
-          <%= link_to "Executions", executions_path, 
-              class: "#{current_page?(executions_path) || params[:action] == 'executions' || params[:action] == 'show_execution' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'} px-3 py-2 text-sm font-medium" %>
-        </div>
-      </div>
-    </div>
-  </nav>
-
-  <!-- Main Content -->
-  <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-    <%= yield %>
-  </main>
-
-  <!-- Optional JavaScript -->
-  <%= yield :javascripts %>
-</body>
-</html>