You are an expert SaaS UX designer and frontend architect specializing in automation tools like Zapier, n8n, and Make.com.

I am building a modern, scalable Workflow Automation platform (Zapier/n8n clone) using either Vue 3 or Next.js with Tailwind CSS and shadcn/ui. The app is for technical users who want to build automation visually.

Design the full Workflow Editor Page, including a highly interactive node-based canvas, configuration panels, dynamic node properties, and execution visualizations. Keep UX intuitive, modular, and enterprise-ready.

---

🎯 Main Objective:

Create a fully functional Workflow Builder UI that allows users to drag-and-drop nodes, connect them, configure each node, run/test workflows, and inspect results — like n8n or Zapier.

---

🧱 Page Structure:

1. Top Navigation Bar:

   • Workflow Name (inline editable)

   • Breadcrumbs: Workflows / [Workflow Name]

   • Save status badge (Saved, Saving…, Unsaved)

   • Buttons: Run Once, Deploy, Share, Settings

   • Auto-saving indicator with debounce

2. Left Sidebar (Node Palette):

   • Search bar with fuzzy search

   • Categories:

     • Triggers (HTTP Webhook, Cron)

     • Apps (Slack, Google Sheets, Discord, etc.)

     • Tools (IF, Delay, Merge, Function)

     • Data (JSON, CSV, HTTP)

   • Drag-and-drop nodes from this panel

3. Main Workflow Canvas:

   • Built using Vue Flow or React Flow

   • Features:

     • Zoom, Pan, Fit to View

     • Snap to Grid

     • Context menu on canvas and nodes

     • Mini-map view

     • Auto Layout

   • Nodes show:

     • Icon, Label

     • State badge: ✅ Configured, ⚠ Missing Input

     • Inputs/Outputs as connector ports

4. Right Inspector Panel (Node Configuration):

   • Appears when a node is selected

   • Tabs:

     • 📄 Settings: Label, Description, Timeout, Enabled toggle

     • 🧪 Inputs: Dynamic fields, input types (text, select, code)

     • 🔐 Credentials: OAuth2 / API key connector

     • 📤 Outputs: Response preview, test button

     • 📜 Logs: Execution result (input/output/error)

5. Bottom Toolbar:

   • Zoom controls (Zoom In, Out, Fit)

   • Undo / Redo

   • Auto Layout

   • Toggle JSON View

   • Import / Export Workflow JSON

   • Execution History button

6. Execution Drawer (optional slide-up panel):

   • Node-by-node logs

   • Show real-time input/output

   • Filter: All / Success / Error

   • Rerun single node

7. Modals:

   • Share Workflow

   • Test Result Viewer

   • Confirm Delete Node / Workflow

   • Add New Credential (OAuth2 / API Key)

   • Version History

---

📦 UI/UX Requirements:

• Use shadcn/ui components with Tailwind

• Responsive layout (mobile fallback = read-only)

• Animate transitions with Framer Motion (or Vue Motion)

• Nodes are color-coded by type (trigger, app, logic)

• Dragging lines (edges) should auto-snap to ports

• Tooltips, error hints, and accessibility labels everywhere

• Configurable right-click actions on nodes and edges

---

🧠 Smart Features:

• Auto detect missing fields or credentials and show inline error badges

• Test individual nodes with sample input

• Visual debugger mode: shows values flowing node-by-node

• Show webhook URL preview for trigger nodes

• JSON diff viewer for version history

• AI-based "Suggest next node" button (placeholder)

• Real-time sync for multi-user collaboration (future-proofed layout)

---

⚙️ Output Requirements:

• Use full Tailwind + shadcn/ui layout (no external UI kits)

• Include placeholder/mock data for:

  • Node list

  • Workflow JSON

  • Execution logs

• Make code modular: break into components like NodePanel, NodeInspector, Canvas, ExecutionDrawer, etc.

• Suggest proper folder structure (e.g., components/, hooks/, types/, lib/)

• Provide sample dummy data for nodes & edges