From 4127ae42fb4d2a5309ae03e39b9d69c967671e9a Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 10:43:31 +0700
Subject: [PATCH 01/10] fix: missing system dependencies install in gha

---
 .github/workflows/validate-yamls.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/validate-yamls.yml b/.github/workflows/validate-yamls.yml
index cde6d64b..9c6f634a 100644
--- a/.github/workflows/validate-yamls.yml
+++ b/.github/workflows/validate-yamls.yml
@@ -33,6 +33,11 @@ jobs:
         with:
           python-version: '3.12'
       
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libcairo2-dev pkg-config
+      
       - name: Install uv
         uses: astral-sh/setup-uv@v4
         with:

From e0890eec686bdae31b8807c7d00e6ca4667aa414 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 10:46:03 +0700
Subject: [PATCH 02/10] chores: refactor gha name

---
 .github/workflows/validate-yamls.yml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/validate-yamls.yml b/.github/workflows/validate-yamls.yml
index 9c6f634a..70141d4a 100644
--- a/.github/workflows/validate-yamls.yml
+++ b/.github/workflows/validate-yamls.yml
@@ -20,8 +20,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  validate:
-    name: Validate YAML Configuration Files
+  validate-yamls:
     runs-on: ubuntu-latest
     
     steps:

From e8e12f7b2c3524722e0b320b03c571a572cba971 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 10:53:59 +0700
Subject: [PATCH 03/10] feat: rich tooltip component

---
 frontend/src/components/RichTooltip.vue | 351 ++++++++++++++++++++++++
 1 file changed, 351 insertions(+)
 create mode 100644 frontend/src/components/RichTooltip.vue

diff --git a/frontend/src/components/RichTooltip.vue b/frontend/src/components/RichTooltip.vue
new file mode 100644
index 00000000..ead65efc
--- /dev/null
+++ b/frontend/src/components/RichTooltip.vue
@@ -0,0 +1,351 @@
+<template>
+  <div 
+    ref="wrapperRef"
+    class="tooltip-wrapper"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown.space.prevent="handleKeyboardActivate"
+    @keydown.enter.prevent="handleKeyboardActivate"
+    @keydown.escape="handleDismiss"
+  >
+    <slot></slot>
+    
+    <teleport to="body">
+      <transition name="tooltip-fade">
+        <div
+          v-if="isVisible"
+          ref="tooltipRef"
+          class="rich-tooltip"
+          :class="[`tooltip-${placement}`, { 'tooltip-keyboard-active': keyboardActive }]"
+          :style="tooltipStyle"
+          role="tooltip"
+          :aria-hidden="!isVisible"
+          @mouseenter="handleTooltipMouseEnter"
+          @mouseleave="handleTooltipMouseLeave"
+        >
+          <div class="tooltip-content">
+            <h4 v-if="content.title" class="tooltip-title">{{ content.title }}</h4>
+            <p class="tooltip-description">{{ content.description }}</p>
+            <ul v-if="content.examples && content.examples.length" class="tooltip-examples">
+              <li v-for="(example, index) in content.examples" :key="index">{{ example }}</li>
+            </ul>
+            <a
+              v-if="content.learnMoreUrl"
+              :href="content.learnMoreUrl"
+              target="_blank"
+              rel="noopener"
+              class="tooltip-learn-more"
+              @click="handleLearnMore"
+            >
+              Learn More →
+            </a>
+          </div>
+          <div class="tooltip-arrow" :data-placement="placement"></div>
+        </div>
+      </transition>
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return value && typeof value.description === 'string'
+    }
+  },
+  delay: {
+    type: Number,
+    default: 500
+  },
+  placement: {
+    type: String,
+    default: 'top',
+    validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value)
+  }
+})
+
+const isVisible = ref(false)
+const tooltipRef = ref(null)
+const wrapperRef = ref(null)
+const tooltipStyle = ref({})
+const hoverTimeout = ref(null)
+const mouseInTooltip = ref(false)
+const keyboardActive = ref(false)
+
+const handleMouseEnter = () => {
+  keyboardActive.value = false
+  clearTimeout(hoverTimeout.value)
+  hoverTimeout.value = setTimeout(() => {
+    showTooltip()
+  }, props.delay)
+}
+
+const handleMouseLeave = () => {
+  clearTimeout(hoverTimeout.value)
+  // Delay hiding to allow moving into tooltip
+  setTimeout(() => {
+    if (!mouseInTooltip.value) {
+      hideTooltip()
+    }
+  }, 100)
+}
+
+const handleFocus = () => {
+  // Don't auto-show on focus, wait for keyboard activation
+}
+
+const handleBlur = () => {
+  if (keyboardActive.value) {
+    hideTooltip()
+    keyboardActive.value = false
+  }
+}
+
+const handleKeyboardActivate = () => {
+  keyboardActive.value = true
+  showTooltip()
+}
+
+const handleDismiss = () => {
+  hideTooltip()
+  keyboardActive.value = false
+}
+
+const handleTooltipMouseEnter = () => {
+  mouseInTooltip.value = true
+}
+
+const handleTooltipMouseLeave = () => {
+  mouseInTooltip.value = false
+  hideTooltip()
+}
+
+const handleLearnMore = () => {
+  // Keep tooltip open when clicking learn more
+  // The link will open in new tab
+}
+
+const showTooltip = async () => {
+  isVisible.value = true
+  await nextTick()
+  calculatePosition()
+}
+
+const hideTooltip = () => {
+  isVisible.value = false
+  tooltipStyle.value = {}
+}
+
+const calculatePosition = () => {
+  if (!tooltipRef.value || !wrapperRef.value) return
+
+  const wrapper = wrapperRef.value.getBoundingClientRect()
+  const tooltip = tooltipRef.value.getBoundingClientRect()
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+
+  const offset = 12 // Distance from target element
+  let top = 0
+  let left = 0
+  let actualPlacement = props.placement
+
+  // Calculate initial position based on preferred placement
+  switch (props.placement) {
+    case 'top':
+      top = wrapper.top - tooltip.height - offset
+      left = wrapper.left + (wrapper.width / 2) - (tooltip.width / 2)
+      break
+    case 'bottom':
+      top = wrapper.bottom + offset
+      left = wrapper.left + (wrapper.width / 2) - (tooltip.width / 2)
+      break
+    case 'left':
+      top = wrapper.top + (wrapper.height / 2) - (tooltip.height / 2)
+      left = wrapper.left - tooltip.width - offset
+      break
+    case 'right':
+      top = wrapper.top + (wrapper.height / 2) - (tooltip.height / 2)
+      left = wrapper.right + offset
+      break
+  }
+
+  // Adjust if tooltip would go off-screen
+  if (left < 10) {
+    left = 10
+  } else if (left + tooltip.width > viewport.width - 10) {
+    left = viewport.width - tooltip.width - 10
+  }
+
+  if (top < 10) {
+    // If it would go above viewport, flip to bottom
+    if (props.placement === 'top') {
+      top = wrapper.bottom + offset
+      actualPlacement = 'bottom'
+    } else {
+      top = 10
+    }
+  } else if (top + tooltip.height > viewport.height - 10) {
+    // If it would go below viewport, flip to top
+    if (props.placement === 'bottom') {
+      top = wrapper.top - tooltip.height - offset
+      actualPlacement = 'top'
+    } else {
+      top = viewport.height - tooltip.height - 10
+    }
+  }
+
+  tooltipStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+}
+
+// Listen to scroll and zoom events to dismiss tooltip
+const handleScroll = () => {
+  if (isVisible.value && !keyboardActive.value) {
+    hideTooltip()
+  }
+}
+
+const handleResize = () => {
+  if (isVisible.value) {
+    calculatePosition()
+  }
+}
+
+onMounted(() => {
+  // wrapperRef is now set via template ref, no need to query for it
+  window.addEventListener('scroll', handleScroll, true)
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(hoverTimeout.value)
+  window.removeEventListener('scroll', handleScroll, true)
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.tooltip-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.rich-tooltip {
+  position: fixed;
+  z-index: 10000;
+  max-width: 320px;
+  background: rgba(26, 26, 26, 0.95);
+  color: #f2f2f2;
+  border-radius: 8px;
+  padding: 12px 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  font-size: 13px;
+  line-height: 1.5;
+  pointer-events: auto;
+}
+
+.tooltip-keyboard-active {
+  outline: 2px solid #60b7ff;
+  outline-offset: 2px;
+}
+
+.tooltip-content {
+  position: relative;
+}
+
+.tooltip-title {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.tooltip-description {
+  margin: 0 0 8px 0;
+  color: #e0e0e0;
+}
+
+.tooltip-examples {
+  margin: 8px 0;
+  padding-left: 20px;
+  color: #c0c0c0;
+  font-size: 12px;
+}
+
+.tooltip-examples li {
+  margin: 4px 0;
+}
+
+.tooltip-learn-more {
+  display: inline-block;
+  margin-top: 8px;
+  color: #60b7ff;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 12px;
+  transition: color 0.2s;
+}
+
+.tooltip-learn-more:hover {
+  color: #99ffeb;
+  text-decoration: underline;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  transform: rotate(45deg);
+}
+
+.tooltip-top .tooltip-arrow {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.tooltip-bottom .tooltip-arrow {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.tooltip-left .tooltip-arrow {
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.tooltip-right .tooltip-arrow {
+  left: -5px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.tooltip-fade-enter-active,
+.tooltip-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.tooltip-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.tooltip-fade-leave-to {
+  opacity: 0;
+}
+</style>

From b3b7376ef2300ea39fcd56e11eab0ebb726b1e7f Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 10:56:56 +0700
Subject: [PATCH 04/10] feat: add help content to tooltip

---
 frontend/src/utils/helpContent.js | 229 ++++++++++++++++++++++++++++++
 1 file changed, 229 insertions(+)
 create mode 100644 frontend/src/utils/helpContent.js

diff --git a/frontend/src/utils/helpContent.js b/frontend/src/utils/helpContent.js
new file mode 100644
index 00000000..85e1b403
--- /dev/null
+++ b/frontend/src/utils/helpContent.js
@@ -0,0 +1,229 @@
+export const helpContent = {
+  // Start Node Help
+  startNode: {
+    title: "Start Node",
+    description: "The entry point for your workflow. All nodes connected to the Start node will run in parallel when the workflow launches.",
+    examples: [
+      "Connect multiple nodes to start them simultaneously",
+      "The first nodes to execute receive your initial input"
+    ],
+    learnMoreUrl: "/tutorial#2-create-nodes"
+  },
+
+  // Workflow Node Types
+  workflowNode: {
+    agent: {
+      title: "Agent Node",
+      description: "An AI agent that can reason, generate content, and use tools. Agents receive messages and produce responses based on their configuration.",
+      examples: [
+        "Content generation (writing, coding, analysis)",
+        "Decision making and routing",
+        "Tool usage (search, file operations, API calls)"
+      ],
+      learnMoreUrl: "/tutorial#agent-node"
+    },
+    human: {
+      title: "Human Node",
+      description: "Pauses workflow execution and waits for human input. Use this to review content, make decisions, or provide feedback.",
+      examples: [
+        "Review and approve generated content",
+        "Provide additional instructions or corrections",
+        "Choose between workflow paths"
+      ],
+      learnMoreUrl: "/tutorial#human-node"
+    },
+    python: {
+      title: "Python Node",
+      description: "Executes Python code in a sandboxed environment. The code runs in the workspace directory and can access uploaded files.",
+      examples: [
+        "Data processing and analysis",
+        "Running generated code",
+        "File manipulation"
+      ],
+      learnMoreUrl: "/tutorial#python-node"
+    },
+    passthrough: {
+      title: "Passthrough Node",
+      description: "Passes messages to the next node without modification. Useful for workflow organization and filtering outputs in loops.",
+      examples: [
+        "Preserve initial context in loops",
+        "Filter redundant outputs",
+        "Organize workflow structure"
+      ],
+      learnMoreUrl: "/tutorial#passthrough-node"
+    },
+    literal: {
+      title: "Literal Node",
+      description: "Outputs fixed text, ignoring all input. Use this to inject instructions or context at specific points in the workflow.",
+      examples: [
+        "Add fixed instructions before a node",
+        "Inject context or constraints",
+        "Provide test data"
+      ],
+      learnMoreUrl: "/tutorial#literal-node"
+    },
+    loop_counter: {
+      title: "Loop Counter Node",
+      description: "Limits loop iterations. Only produces output when the maximum count is reached, helping control infinite loops.",
+      examples: [
+        "Prevent runaway loops",
+        "Set maximum revision cycles",
+        "Control iterative processes"
+      ],
+      learnMoreUrl: "/tutorial#loop-counter-node"
+    },
+    subgraph: {
+      title: "Subgraph Node",
+      description: "Embeds another workflow as a reusable module. Enables modular design and workflow composition.",
+      examples: [
+        "Reuse common patterns across workflows",
+        "Break complex workflows into manageable pieces",
+        "Share workflows between teams"
+      ],
+      learnMoreUrl: "/tutorial#subgraph-node"
+    },
+    unknown: {
+      title: "Workflow Node",
+      description: "A node in your workflow. Click to view and edit its configuration.",
+      learnMoreUrl: "/tutorial#2-create-nodes"
+    }
+  },
+
+  // Workflow Edge Help
+  edge: {
+    basic: {
+      title: "Connection",
+      description: "Connects two nodes to control information flow and execution order. The upstream node's output becomes the downstream node's input.",
+      examples: [
+        "Data flows from source to target",
+        "Target executes after source completes"
+      ],
+      learnMoreUrl: "/tutorial#what-is-an-edge"
+    },
+    trigger: {
+      enabled: {
+        description: "This connection triggers the downstream node to execute.",
+      },
+      disabled: {
+        description: "This connection passes data but does NOT trigger execution. The downstream node only runs if triggered by another edge.",
+      }
+    },
+    condition: {
+      hasCondition: {
+        description: "This connection has a condition. It only activates when the condition evaluates to true.",
+        learnMoreUrl: "/tutorial#edge-condition"
+      }
+    }
+  },
+
+  // Context Menu Actions
+  contextMenu: {
+    createNode: {
+      description: "Create a new node in your workflow. Choose from Agent, Human, Python, and other node types.",
+    },
+    copyNode: {
+      description: "Duplicate this node with all its settings. The copy will have a blank ID that you must fill in.",
+    },
+    deleteNode: {
+      description: "Remove this node and all its connections from the workflow.",
+    },
+    deleteEdge: {
+      description: "Remove this connection between nodes.",
+    },
+    createNodeButton: {
+      description: "Open the node creation form. You can also right-click the canvas to create a node at a specific position.",
+    },
+    configureGraph: {
+      description: "Configure workflow-level settings like name, description, and global variables.",
+    },
+    launch: {
+      description: "Run your workflow with a task prompt. The workflow will execute and show you the results.",
+    },
+    createEdge: {
+      description: "Create a connection between nodes. You can also drag from a node's handle to create connections visually.",
+    },
+    manageVariables: {
+      description: "Define global variables (like API keys) that all nodes can access using ${VARIABLE_NAME} syntax.",
+    },
+    manageMemories: {
+      description: "Configure memory modules for long-term information storage and retrieval across workflow runs.",
+    },
+    renameWorkflow: {
+      description: "Change the name of this workflow file.",
+    },
+    copyWorkflow: {
+      description: "Create a duplicate of this entire workflow with a new name.",
+    }
+  }
+}
+
+/**
+ * Get help content by key path
+ * @param {string} key - Dot-separated path to content (e.g., 'workflowNode.agent')
+ * @returns {Object} Help content object or fallback
+ */
+export function getHelpContent(key) {
+  const keys = key.split('.')
+  let content = helpContent
+
+  for (const k of keys) {
+    if (content && typeof content === 'object' && k in content) {
+      content = content[k]
+    } else {
+      console.warn(`[HelpContent] Missing content for key: ${key}`)
+      return {
+        description: "Help content coming soon. Check the tutorial for more information.",
+        learnMoreUrl: "/tutorial"
+      }
+    }
+  }
+
+  // Ensure we return an object with at least a description
+  if (typeof content === 'string') {
+    return { description: content }
+  }
+
+  return content || { description: "Help content coming soon." }
+}
+
+/**
+ * Get node-specific help content based on node type
+ * @param {string} nodeType - The type of node (agent, human, python, etc.)
+ * @returns {Object} Help content for that node type
+ */
+export function getNodeHelp(nodeType) {
+  const type = (nodeType || 'unknown').toLowerCase()
+  return getHelpContent(`workflowNode.${type}`)
+}
+
+/**
+ * Get edge help content based on edge properties
+ * @param {Object} edgeData - The edge data object
+ * @returns {Object} Combined help content for the edge
+ */
+export function getEdgeHelp(edgeData) {
+  const base = { ...helpContent.edge.basic }
+
+  // Add trigger information
+  const trigger = edgeData?.trigger !== undefined ? edgeData.trigger : true
+  if (!trigger) {
+    base.description += " " + helpContent.edge.trigger.disabled.description
+  }
+
+  // Add condition information
+  if (edgeData?.condition) {
+    base.description += " " + helpContent.edge.condition.hasCondition.description
+    if (!base.learnMoreUrl) {
+      base.learnMoreUrl = helpContent.edge.condition.hasCondition.learnMoreUrl
+    }
+  }
+
+  return base
+}
+
+export default {
+  helpContent,
+  getHelpContent,
+  getNodeHelp,
+  getEdgeHelp
+}

From 53870bd6f001d3e3af7dc377785dd8e1362b8cff Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 10:59:22 +0700
Subject: [PATCH 05/10] feat: wrapping nodes with tooltip content

---
 frontend/src/components/StartNode.vue    |  14 ++--
 frontend/src/components/WorkflowEdge.vue |  30 +++++++
 frontend/src/components/WorkflowNode.vue |  68 ++++++++-------
 frontend/src/pages/WorkflowView.vue      | 102 ++++++++++++++---------
 4 files changed, 140 insertions(+), 74 deletions(-)

diff --git a/frontend/src/components/StartNode.vue b/frontend/src/components/StartNode.vue
index 36308697..1aa0b20a 100755
--- a/frontend/src/components/StartNode.vue
+++ b/frontend/src/components/StartNode.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
+import RichTooltip from './RichTooltip.vue'
+import { helpContent } from '../utils/helpContent.js'
 
 const props = defineProps({
   id: {
@@ -15,11 +17,13 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="start-node" :style="{ opacity: data.opacity ?? 1 }">
-    <div class="start-node-bubble" title="Start Node"></div>
-    <!-- Provide source handle at right -->
-    <Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
-  </div>
+  <RichTooltip :content="helpContent.startNode" placement="right">
+    <div class="start-node" :style="{ opacity: data.opacity ?? 1 }">
+      <div class="start-node-bubble" title="Start Node"></div>
+      <!-- Provide source handle at right -->
+      <Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
+    </div>
+  </RichTooltip>
 </template>
 
 <style scoped>
diff --git a/frontend/src/components/WorkflowEdge.vue b/frontend/src/components/WorkflowEdge.vue
index 71324ff1..a04cdf7c 100755
--- a/frontend/src/components/WorkflowEdge.vue
+++ b/frontend/src/components/WorkflowEdge.vue
@@ -2,6 +2,8 @@
 import { computed, ref, nextTick, watch } from 'vue'
 import { BaseEdge, EdgeLabelRenderer, getBezierPath, getSmoothStepPath, MarkerType } from '@vue-flow/core'
 import { useVueFlow } from '@vue-flow/core'
+import RichTooltip from './RichTooltip.vue'
+import { getEdgeHelp } from '../utils/helpContent.js'
 
 const { findNode } = useVueFlow()
 
@@ -562,6 +564,8 @@ const labelStyle = computed(() => {
 
   return s
 })
+
+const edgeHelpContent = computed(() => getEdgeHelp(props.data))
 </script>
 
 <template>
@@ -614,6 +618,23 @@ const labelStyle = computed(() => {
     :animated="false"
     class="nodrag nopan"
   />
+  <!-- Tooltip-enabled hover area at edge midpoint -->
+  <EdgeLabelRenderer>
+    <RichTooltip :content="edgeHelpContent" placement="top">
+      <div
+        :style="{
+          position: 'absolute',
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          pointerEvents: 'all',
+          width: '20px',
+          height: '20px',
+          borderRadius: '50%',
+          cursor: 'pointer'
+        }"
+        class="edge-tooltip-trigger"
+      />
+    </RichTooltip>
+  </EdgeLabelRenderer>
   <EdgeLabelRenderer v-if="edgeLabel">
     <div
       :key="edgeLabelKey"
@@ -649,4 +670,13 @@ const labelStyle = computed(() => {
 .animated-label {
   animation: label-pulse var(--label-anim-duration) infinite linear;
 }
+
+.edge-tooltip-trigger {
+  background: transparent;
+  transition: background-color 0.2s;
+}
+
+.edge-tooltip-trigger:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 </style>
diff --git a/frontend/src/components/WorkflowNode.vue b/frontend/src/components/WorkflowNode.vue
index cfdc8dd9..d6c20584 100755
--- a/frontend/src/components/WorkflowNode.vue
+++ b/frontend/src/components/WorkflowNode.vue
@@ -3,6 +3,8 @@ import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import { getNodeStyles } from '../utils/colorUtils.js'
 import { spriteFetcher } from '../utils/spriteFetcher.js'
+import RichTooltip from './RichTooltip.vue'
+import { getNodeHelp } from '../utils/helpContent.js'
 
 const props = defineProps({
   id: {
@@ -37,6 +39,8 @@ const nodeDescription = computed(() => props.data?.description || '')
 const isActive = computed(() => props.isActive)
 const dynamicStyles = computed(() => getNodeStyles(nodeType.value))
 
+const nodeHelpContent = computed(() => getNodeHelp(nodeType.value))
+
 // Compute the current sprite path based on active state and walking frame
 const currentSprite = computed(() => {
   if (!props.sprite) return ''
@@ -83,40 +87,42 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="workflow-node-container">
-    <div v-if="props.sprite" class="workflow-node-sprite">
-      <img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
-    </div>
-    <div
-      class="workflow-node"
-      :class="{ 'workflow-node-active': isActive }"
-      :data-type="nodeType"
-      :style="dynamicStyles"
-      @mouseenter="$emit('hover', nodeId)"
-      @mouseleave="$emit('leave', nodeId)"
-    >
-      <div class="workflow-node-header">
-        <span class="workflow-node-type">{{ nodeType }}</span>
-        <span class="workflow-node-id">{{ nodeId }}</span>
-      </div>
-      <div v-if="nodeDescription" class="workflow-node-description">
-        {{ nodeDescription }}
+  <RichTooltip :content="nodeHelpContent" placement="top">
+    <div class="workflow-node-container">
+      <div v-if="props.sprite" class="workflow-node-sprite">
+        <img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
       </div>
+      <div
+        class="workflow-node"
+        :class="{ 'workflow-node-active': isActive }"
+        :data-type="nodeType"
+        :style="dynamicStyles"
+        @mouseenter="$emit('hover', nodeId)"
+        @mouseleave="$emit('leave', nodeId)"
+      >
+        <div class="workflow-node-header">
+          <span class="workflow-node-type">{{ nodeType }}</span>
+          <span class="workflow-node-id">{{ nodeId }}</span>
+        </div>
+        <div v-if="nodeDescription" class="workflow-node-description">
+          {{ nodeDescription }}
+        </div>
 
-      <Handle
-        id="source"
-        type="source"
-        :position="Position.Right"
-        class="workflow-node-handle"
-      />
-      <Handle
-        id="target"
-        type="target"
-        :position="Position.Left"
-        class="workflow-node-handle"
-      />
+        <Handle
+          id="source"
+          type="source"
+          :position="Position.Right"
+          class="workflow-node-handle"
+        />
+        <Handle
+          id="target"
+          type="target"
+          :position="Position.Left"
+          class="workflow-node-handle"
+        />
+      </div>
     </div>
-  </div>
+  </RichTooltip>
 </template>
 
 <style scoped>
diff --git a/frontend/src/pages/WorkflowView.vue b/frontend/src/pages/WorkflowView.vue
index c094f86c..21bac43a 100755
--- a/frontend/src/pages/WorkflowView.vue
+++ b/frontend/src/pages/WorkflowView.vue
@@ -87,38 +87,46 @@
           >
             <!-- Pane context menu -->
             <template v-if="contextMenuType === 'pane'">
-              <div
-                class="context-menu-item"
-                @click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
-              >
-                Create Node
-              </div>
+              <RichTooltip :content="helpContent.contextMenu.createNode" placement="right">
+                <div
+                  class="context-menu-item"
+                  @click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
+                >
+                  Create Node
+                </div>
+              </RichTooltip>
             </template>
 
             <!-- Node context menu -->
             <template v-else-if="contextMenuType === 'node'">
-              <div
-                class="context-menu-item"
-                @click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
-              >
-                Copy Node
-              </div>
-              <div
-                class="context-menu-item"
-                @click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
-              >
-                Delete Node
-              </div>
+              <RichTooltip :content="helpContent.contextMenu.copyNode" placement="right">
+                <div
+                  class="context-menu-item"
+                  @click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
+                >
+                  Copy Node
+                </div>
+              </RichTooltip>
+              <RichTooltip :content="helpContent.contextMenu.deleteNode" placement="right">
+                <div
+                  class="context-menu-item"
+                  @click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
+                >
+                  Delete Node
+                </div>
+              </RichTooltip>
             </template>
 
             <!-- Edge context menu -->
             <template v-else-if="contextMenuType === 'edge'">
-              <div
-                class="context-menu-item"
-                @click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
-              >
-                Delete Edge
-              </div>
+              <RichTooltip :content="helpContent.contextMenu.deleteEdge" placement="right">
+                <div
+                  class="context-menu-item"
+                  @click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
+                >
+                  Delete Edge
+                </div>
+              </RichTooltip>
             </template>
           </div>
         </transition>
@@ -141,15 +149,21 @@
         </button>
       </div>
       <div v-if="activeTab === 'graph'" class="editor-actions">
-        <button @click="openCreateNodeModal" class="glass-button">
-          <span>Create Node</span>
-        </button>
-        <button @click="openConfigureGraphModal" class="glass-button">
-          <span>Configure Graph</span>
-        </button>
-        <button @click="goToLaunch" class="launch-button-primary">
-          <span>Launch</span>
-        </button>
+        <RichTooltip :content="helpContent.contextMenu.createNodeButton" placement="bottom">
+          <button @click="openCreateNodeModal" class="glass-button">
+            <span>Create Node</span>
+          </button>
+        </RichTooltip>
+        <RichTooltip :content="helpContent.contextMenu.configureGraph" placement="bottom">
+          <button @click="openConfigureGraphModal" class="glass-button">
+            <span>Configure Graph</span>
+          </button>
+        </RichTooltip>
+        <RichTooltip :content="helpContent.contextMenu.launch" placement="bottom">
+          <button @click="goToLaunch" class="launch-button-primary">
+            <span>Launch</span>
+          </button>
+        </RichTooltip>
         
         <div
           class="menu-container"
@@ -166,11 +180,21 @@
           </div>
           <transition name="fade">
             <div v-if="showMenu" class="menu-dropdown">
-              <div @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
-              <div @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
-              <div @click="openManageVarsModal" class="menu-item">Manage Variables</div>
-              <div @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
-              <div @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
+              <RichTooltip :content="helpContent.contextMenu.renameWorkflow" placement="left">
+                <div @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
+              </RichTooltip>
+              <RichTooltip :content="helpContent.contextMenu.copyWorkflow" placement="left">
+                <div @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
+              </RichTooltip>
+              <RichTooltip :content="helpContent.contextMenu.manageVariables" placement="left">
+                <div @click="openManageVarsModal" class="menu-item">Manage Variables</div>
+              </RichTooltip>
+              <RichTooltip :content="helpContent.contextMenu.manageMemories" placement="left">
+                <div @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
+              </RichTooltip>
+              <RichTooltip :content="helpContent.contextMenu.createEdge" placement="left">
+                <div @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
+              </RichTooltip>
             </div>
           </transition>
         </div>
@@ -270,8 +294,10 @@ import WorkflowNode from '../components/WorkflowNode.vue'
 import WorkflowEdge from '../components/WorkflowEdge.vue'
 import StartNode from '../components/StartNode.vue'
 import FormGenerator from '../components/FormGenerator.vue'
+import RichTooltip from '../components/RichTooltip.vue'
 import yaml from 'js-yaml'
 import { fetchYaml, fetchVueGraph, postVuegraphs, updateYaml, postYamlNameChange, postYamlCopy } from '../utils/apiFunctions'
+import { helpContent } from '../utils/helpContent.js'
 
 const props = defineProps({
   workflowName: {

From 485e33f91f49776ac21a1d69f3efea5c793c3614 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 11:00:51 +0700
Subject: [PATCH 06/10] feat: scroll to content in tutorial view

---
 frontend/src/pages/TutorialView.vue | 39 +++++++++++++++++++++++++++++
 frontend/src/router/index.js        | 19 +++++++++++++-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/TutorialView.vue b/frontend/src/pages/TutorialView.vue
index ba3bc8ef..a8ece68c 100755
--- a/frontend/src/pages/TutorialView.vue
+++ b/frontend/src/pages/TutorialView.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { ref, onMounted, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
 import MarkdownIt from 'markdown-it'
 import markdownItAnchor from 'markdown-it-anchor'
 
+const route = useRoute()
+
 const renderedContent = ref('')
 const currentLang = ref('en') // 'zh' for Chinese, 'en' for English
 const markdownBody = ref(null)
@@ -28,6 +31,23 @@ md.use(markdownItAnchor, {
 
 const getTutorialFile = () => (currentLang.value === 'en' ? '/tutorial-en.md' : '/tutorial-zh.md')
 
+const scrollToHash = () => {
+  // Wait for DOM to update, then scroll to hash if present
+  nextTick(() => {
+    if (route.hash) {
+      // Remove the '#' from the hash
+      const targetId = route.hash.slice(1)
+      const targetElement = document.getElementById(targetId)
+      
+      if (targetElement) {
+        setTimeout(() => {
+          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        }, 100)
+      }
+    }
+  })
+}
+
 const addCopyButtons = () => {
   nextTick(() => {
     const container = markdownBody.value
@@ -71,6 +91,7 @@ const loadTutorial = async () => {
       
       renderedContent.value = md.render(text)
       addCopyButtons()
+      scrollToHash()
     } else {
       console.error('Failed to fetch tutorial markdown')
     }
@@ -117,6 +138,7 @@ onMounted(() => {
   box-shadow: 0 4px 32px 0 rgba(0, 255, 255, 0.08), 0 0 0 2px #00eaff33;
   border: 1.5px solid #00eaff33;
   transition: box-shadow 0.3s;
+  scroll-behavior: smooth;
 }
 
 .lang-switch {
@@ -175,6 +197,23 @@ onMounted(() => {
   color: #00eaff;
   text-shadow: 0 0 8px #00eaff44;
   letter-spacing: 0.02em;
+  scroll-margin-top: 20px; /* Offset for hash scroll target */
+  transition: background 0.3s ease;
+}
+
+/* Highlight targeted heading */
+:deep(.markdown-body h1:target),
+:deep(.markdown-body h2:target),
+:deep(.markdown-body h3:target),
+:deep(.markdown-body h4:target),
+:deep(.markdown-body h5:target),
+:deep(.markdown-body h6:target) {
+  background: rgba(0, 234, 255, 0.15);
+  padding: 8px 12px;
+  margin-left: -12px;
+  margin-right: -12px;
+  border-radius: 6px;
+  box-shadow: 0 0 16px rgba(0, 234, 255, 0.3);
 }
 
 :deep(.markdown-body h1) { font-size: 2.2em; border-bottom: 1px solid #00eaff33; padding-bottom: 0.3em; }
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index c3fc84bc..b31d66f7 100755
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -25,7 +25,24 @@ const routes = [
 
 const router = createRouter({
     history: createWebHistory(),
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition
+        }
+        
+        if (to.hash) {
+            return {
+                el: to.hash,
+                behavior: 'smooth',
+                // Add a small delay to ensure the element exists
+                top: 0
+            }
+        }
+        
+        // Otherwise scroll to top
+        return { top: 0 }
+    }
 })
 
 export default router
\ No newline at end of file

From 7445213329cddae9030cbe67d4364fbd461b7502 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 11:02:30 +0700
Subject: [PATCH 07/10] chores: refactor

---
 .github/workflows/validate-yamls.yml | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/validate-yamls.yml b/.github/workflows/validate-yamls.yml
index 70141d4a..5e856bed 100644
--- a/.github/workflows/validate-yamls.yml
+++ b/.github/workflows/validate-yamls.yml
@@ -20,7 +20,8 @@ on:
   workflow_dispatch:
 
 jobs:
-  validate-yamls:
+  validate:
+    name: Validate YAML Configuration Files
     runs-on: ubuntu-latest
     
     steps:
@@ -32,11 +33,6 @@ jobs:
         with:
           python-version: '3.12'
       
-      - name: Install system dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libcairo2-dev pkg-config
-      
       - name: Install uv
         uses: astral-sh/setup-uv@v4
         with:
@@ -66,4 +62,4 @@ jobs:
           else
             echo "YAML validation failed - check the logs above for details"
             exit 1
-          fi
+          fi
\ No newline at end of file

From eba9d89b668c785da673cfa2d89f59f556cfd8b3 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sun, 8 Feb 2026 11:10:57 +0700
Subject: [PATCH 08/10] chores: refactor

---
 .github/workflows/validate-yamls.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/validate-yamls.yml b/.github/workflows/validate-yamls.yml
index 5e856bed..cde6d64b 100644
--- a/.github/workflows/validate-yamls.yml
+++ b/.github/workflows/validate-yamls.yml
@@ -62,4 +62,4 @@ jobs:
           else
             echo "YAML validation failed - check the logs above for details"
             exit 1
-          fi
\ No newline at end of file
+          fi

From 8119391cd59f055c542d73cf61725441723d642e Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Tue, 10 Feb 2026 15:44:49 +0700
Subject: [PATCH 09/10] feat: no tooltip shown on custom node

---
 frontend/src/components/WorkflowNode.vue | 36 +++++++++++++++++++++++-
 frontend/src/utils/helpContent.js        | 27 ++++++++++--------
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/WorkflowNode.vue b/frontend/src/components/WorkflowNode.vue
index d6c20584..dccc9b97 100755
--- a/frontend/src/components/WorkflowNode.vue
+++ b/frontend/src/components/WorkflowNode.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <RichTooltip :content="nodeHelpContent" placement="top">
+  <RichTooltip v-if="nodeHelpContent" :content="nodeHelpContent" placement="top">
     <div class="workflow-node-container">
       <div v-if="props.sprite" class="workflow-node-sprite">
         <img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
@@ -123,6 +123,40 @@ onUnmounted(() => {
       </div>
     </div>
   </RichTooltip>
+  <div v-else class="workflow-node-container">
+    <div v-if="props.sprite" class="workflow-node-sprite">
+      <img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
+    </div>
+    <div
+      class="workflow-node"
+      :class="{ 'workflow-node-active': isActive }"
+      :data-type="nodeType"
+      :style="dynamicStyles"
+      @mouseenter="$emit('hover', nodeId)"
+      @mouseleave="$emit('leave', nodeId)"
+    >
+      <div class="workflow-node-header">
+        <span class="workflow-node-type">{{ nodeType }}</span>
+        <span class="workflow-node-id">{{ nodeId }}</span>
+      </div>
+      <div v-if="nodeDescription" class="workflow-node-description">
+        {{ nodeDescription }}
+      </div>
+
+      <Handle
+        id="source"
+        type="source"
+        :position="Position.Right"
+        class="workflow-node-handle"
+      />
+      <Handle
+        id="target"
+        type="target"
+        :position="Position.Left"
+        class="workflow-node-handle"
+      />
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/frontend/src/utils/helpContent.js b/frontend/src/utils/helpContent.js
index 85e1b403..abb532af 100644
--- a/frontend/src/utils/helpContent.js
+++ b/frontend/src/utils/helpContent.js
@@ -34,7 +34,7 @@ export const helpContent = {
     },
     python: {
       title: "Python Node",
-      description: "Executes Python code in a sandboxed environment. The code runs in the workspace directory and can access uploaded files.",
+      description: "Executes Python code on your local environment. The code runs in the workspace directory and can access uploaded files.",
       examples: [
         "Data processing and analysis",
         "Running generated code",
@@ -160,7 +160,7 @@ export const helpContent = {
 /**
  * Get help content by key path
  * @param {string} key - Dot-separated path to content (e.g., 'workflowNode.agent')
- * @returns {Object} Help content object or fallback
+ * @returns {Object|null} Help content object or null if not found
  */
 export function getHelpContent(key) {
   const keys = key.split('.')
@@ -170,11 +170,8 @@ export function getHelpContent(key) {
     if (content && typeof content === 'object' && k in content) {
       content = content[k]
     } else {
-      console.warn(`[HelpContent] Missing content for key: ${key}`)
-      return {
-        description: "Help content coming soon. Check the tutorial for more information.",
-        learnMoreUrl: "/tutorial"
-      }
+      // Return null for missing content instead of fallback
+      return null
     }
   }
 
@@ -183,17 +180,25 @@ export function getHelpContent(key) {
     return { description: content }
   }
 
-  return content || { description: "Help content coming soon." }
+  return content || null
 }
 
 /**
  * Get node-specific help content based on node type
  * @param {string} nodeType - The type of node (agent, human, python, etc.)
- * @returns {Object} Help content for that node type
+ * @returns {Object|null} Help content for that node type, or null for unknown types
  */
 export function getNodeHelp(nodeType) {
-  const type = (nodeType || 'unknown').toLowerCase()
-  return getHelpContent(`workflowNode.${type}`)
+  if (!nodeType) {
+    return null
+  }
+  
+  const type = nodeType.toLowerCase()
+  const content = getHelpContent(`workflowNode.${type}`)
+  
+  // Return null for unknown types (when content lookup fails)
+  // This prevents showing tooltips for custom/user-defined node types
+  return content
 }
 
 /**

From 5e2746600db230fed3cbbd435090206f9a3f15c4 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Tue, 10 Feb 2026 23:12:07 +0700
Subject: [PATCH 10/10] feat: move enable help tooltips default true to setting

---
 frontend/src/components/SettingsModal.vue | 10 +++-
 frontend/src/components/StartNode.vue     | 10 +++-
 frontend/src/components/WorkflowEdge.vue  | 41 ++++++++++++-
 frontend/src/components/WorkflowNode.vue  |  5 +-
 frontend/src/pages/WorkflowView.vue       | 71 ++++++++++++++++++-----
 frontend/src/utils/configStore.js         |  3 +-
 6 files changed, 121 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/SettingsModal.vue b/frontend/src/components/SettingsModal.vue
index 0fc4ce28..b3f3fde6 100755
--- a/frontend/src/components/SettingsModal.vue
+++ b/frontend/src/components/SettingsModal.vue
@@ -21,6 +21,13 @@
             </label>
             <p class="setting-desc">Automatically expand message content in the chat view.</p>
           </div>
+          <div class="settings-item">
+            <label class="checkbox-label">
+              <input type="checkbox" v-model="localConfig.ENABLE_HELP_TOOLTIPS">
+              Enable help tooltips
+            </label>
+            <p class="setting-desc">Show contextual help tooltips throughout the workflow interface.</p>
+          </div>
         </div>
         <div class="modal-footer">
           <button class="cancel-button" @click="close">Cancel</button>
@@ -44,7 +51,8 @@ const props = defineProps({
 
 const localConfig = reactive({
   AUTO_SHOW_ADVANCED: false,
-  AUTO_EXPAND_MESSAGES: false
+  AUTO_EXPAND_MESSAGES: false,
+  ENABLE_HELP_TOOLTIPS: true
 })
 
 watch(() => props.isVisible, (newVal) => {
diff --git a/frontend/src/components/StartNode.vue b/frontend/src/components/StartNode.vue
index 1aa0b20a..9c9ef011 100755
--- a/frontend/src/components/StartNode.vue
+++ b/frontend/src/components/StartNode.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { Handle, Position } from '@vue-flow/core'
 import RichTooltip from './RichTooltip.vue'
 import { helpContent } from '../utils/helpContent.js'
+import { configStore } from '../utils/configStore.js'
 
 const props = defineProps({
   id: {
@@ -14,16 +15,23 @@ const props = defineProps({
     default: () => ({})
   }
 })
+
+const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
 </script>
 
 <template>
-  <RichTooltip :content="helpContent.startNode" placement="right">
+  <RichTooltip v-if="shouldShowTooltip" :content="helpContent.startNode" placement="right">
     <div class="start-node" :style="{ opacity: data.opacity ?? 1 }">
       <div class="start-node-bubble" title="Start Node"></div>
       <!-- Provide source handle at right -->
       <Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
     </div>
   </RichTooltip>
+  <div v-else class="start-node" :style="{ opacity: data.opacity ?? 1 }">
+    <div class="start-node-bubble" title="Start Node"></div>
+    <!-- Provide source handle at right -->
+    <Handle id="source" type="source" :position="Position.Right" class="start-node-handle" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/frontend/src/components/WorkflowEdge.vue b/frontend/src/components/WorkflowEdge.vue
index a04cdf7c..3abb6c50 100755
--- a/frontend/src/components/WorkflowEdge.vue
+++ b/frontend/src/components/WorkflowEdge.vue
@@ -4,6 +4,7 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath, getSmoothStepPath, MarkerTy
 import { useVueFlow } from '@vue-flow/core'
 import RichTooltip from './RichTooltip.vue'
 import { getEdgeHelp } from '../utils/helpContent.js'
+import { configStore } from '../utils/configStore.js'
 
 const { findNode } = useVueFlow()
 
@@ -566,6 +567,42 @@ const labelStyle = computed(() => {
 })
 
 const edgeHelpContent = computed(() => getEdgeHelp(props.data))
+
+// Compute tooltip position (geometric midpoint of edge path)
+const tooltipX = computed(() => {
+  const sourceNode = findNode(props.source)
+  const targetNode = findNode(props.target)
+  const isSelfLoop = props.source === props.target
+  const isLeftwardEdge = props.targetX < props.sourceX
+  
+  // For self-loops and leftward edges with arc paths, use arc midpoint calculation
+  if (isSelfLoop || isLeftwardEdge) {
+    // Return labelX for arcs (already computed as arc midpoint)
+    return labelX.value
+  }
+  
+  // For bezier paths, compute midpoint at t=0.5
+  return (props.sourceX + props.targetX) / 2
+})
+
+const tooltipY = computed(() => {
+  const sourceNode = findNode(props.source)
+  const targetNode = findNode(props.target)
+  const isSelfLoop = props.source === props.target
+  const isLeftwardEdge = props.targetX < props.sourceX
+  
+  // For self-loops and leftward edges with arc paths, use arc midpoint calculation
+  if (isSelfLoop || isLeftwardEdge) {
+    // Return labelY for arcs (already computed as arc midpoint)
+    return labelY.value
+  }
+  
+  // For bezier paths, compute midpoint at t=0.5
+  return (props.sourceY + props.targetY) / 2
+})
+
+const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
+
 </script>
 
 <template>
@@ -619,12 +656,12 @@ const edgeHelpContent = computed(() => getEdgeHelp(props.data))
     class="nodrag nopan"
   />
   <!-- Tooltip-enabled hover area at edge midpoint -->
-  <EdgeLabelRenderer>
+  <EdgeLabelRenderer v-if="shouldShowTooltip">
     <RichTooltip :content="edgeHelpContent" placement="top">
       <div
         :style="{
           position: 'absolute',
-          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          transform: `translate(-50%, -50%) translate(${tooltipX}px, ${tooltipY}px)`,
           pointerEvents: 'all',
           width: '20px',
           height: '20px',
diff --git a/frontend/src/components/WorkflowNode.vue b/frontend/src/components/WorkflowNode.vue
index dccc9b97..a79cf954 100755
--- a/frontend/src/components/WorkflowNode.vue
+++ b/frontend/src/components/WorkflowNode.vue
@@ -5,6 +5,7 @@ import { getNodeStyles } from '../utils/colorUtils.js'
 import { spriteFetcher } from '../utils/spriteFetcher.js'
 import RichTooltip from './RichTooltip.vue'
 import { getNodeHelp } from '../utils/helpContent.js'
+import { configStore } from '../utils/configStore.js'
 
 const props = defineProps({
   id: {
@@ -41,6 +42,8 @@ const dynamicStyles = computed(() => getNodeStyles(nodeType.value))
 
 const nodeHelpContent = computed(() => getNodeHelp(nodeType.value))
 
+const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS && nodeHelpContent.value)
+
 // Compute the current sprite path based on active state and walking frame
 const currentSprite = computed(() => {
   if (!props.sprite) return ''
@@ -87,7 +90,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <RichTooltip v-if="nodeHelpContent" :content="nodeHelpContent" placement="top">
+  <RichTooltip v-if="shouldShowTooltip" :content="nodeHelpContent" placement="top">
     <div class="workflow-node-container">
       <div v-if="props.sprite" class="workflow-node-sprite">
         <img :src="currentSprite" :alt="`${nodeId} sprite`" class="node-sprite-image" />
diff --git a/frontend/src/pages/WorkflowView.vue b/frontend/src/pages/WorkflowView.vue
index 21bac43a..78ba5d72 100755
--- a/frontend/src/pages/WorkflowView.vue
+++ b/frontend/src/pages/WorkflowView.vue
@@ -87,7 +87,7 @@
           >
             <!-- Pane context menu -->
             <template v-if="contextMenuType === 'pane'">
-              <RichTooltip :content="helpContent.contextMenu.createNode" placement="right">
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createNode" placement="right">
                 <div
                   class="context-menu-item"
                   @click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
@@ -95,11 +95,18 @@
                   Create Node
                 </div>
               </RichTooltip>
+              <div
+                v-else
+                class="context-menu-item"
+                @click.stop="() => { hideContextMenu(); openCreateNodeModal(); }"
+              >
+                Create Node
+              </div>
             </template>
 
             <!-- Node context menu -->
             <template v-else-if="contextMenuType === 'node'">
-              <RichTooltip :content="helpContent.contextMenu.copyNode" placement="right">
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.copyNode" placement="right">
                 <div
                   class="context-menu-item"
                   @click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
@@ -107,7 +114,14 @@
                   Copy Node
                 </div>
               </RichTooltip>
-              <RichTooltip :content="helpContent.contextMenu.deleteNode" placement="right">
+              <div
+                v-else
+                class="context-menu-item"
+                @click.stop="() => { hideContextMenu(); onCopyNodeFromContext(); }"
+              >
+                Copy Node
+              </div>
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.deleteNode" placement="right">
                 <div
                   class="context-menu-item"
                   @click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
@@ -115,11 +129,18 @@
                   Delete Node
                 </div>
               </RichTooltip>
+              <div
+                v-else
+                class="context-menu-item"
+                @click.stop="() => { hideContextMenu(); onDeleteNodeFromContext(); }"
+              >
+                Delete Node
+              </div>
             </template>
 
             <!-- Edge context menu -->
             <template v-else-if="contextMenuType === 'edge'">
-              <RichTooltip :content="helpContent.contextMenu.deleteEdge" placement="right">
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.deleteEdge" placement="right">
                 <div
                   class="context-menu-item"
                   @click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
@@ -127,6 +148,13 @@
                   Delete Edge
                 </div>
               </RichTooltip>
+              <div
+                v-else
+                class="context-menu-item"
+                @click.stop="() => { hideContextMenu(); onDeleteEdgeFromContext(); }"
+              >
+                Delete Edge
+              </div>
             </template>
           </div>
         </transition>
@@ -149,21 +177,30 @@
         </button>
       </div>
       <div v-if="activeTab === 'graph'" class="editor-actions">
-        <RichTooltip :content="helpContent.contextMenu.createNodeButton" placement="bottom">
+        <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createNodeButton" placement="bottom">
           <button @click="openCreateNodeModal" class="glass-button">
             <span>Create Node</span>
           </button>
         </RichTooltip>
-        <RichTooltip :content="helpContent.contextMenu.configureGraph" placement="bottom">
+        <button v-else @click="openCreateNodeModal" class="glass-button">
+          <span>Create Node</span>
+        </button>
+        <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.configureGraph" placement="bottom">
           <button @click="openConfigureGraphModal" class="glass-button">
             <span>Configure Graph</span>
           </button>
         </RichTooltip>
-        <RichTooltip :content="helpContent.contextMenu.launch" placement="bottom">
+        <button v-else @click="openConfigureGraphModal" class="glass-button">
+          <span>Configure Graph</span>
+        </button>
+        <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.launch" placement="bottom">
           <button @click="goToLaunch" class="launch-button-primary">
             <span>Launch</span>
           </button>
         </RichTooltip>
+        <button v-else @click="goToLaunch" class="launch-button-primary">
+          <span>Launch</span>
+        </button>
         
         <div
           class="menu-container"
@@ -180,21 +217,26 @@
           </div>
           <transition name="fade">
             <div v-if="showMenu" class="menu-dropdown">
-              <RichTooltip :content="helpContent.contextMenu.renameWorkflow" placement="left">
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.renameWorkflow" placement="left">
                 <div @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
               </RichTooltip>
-              <RichTooltip :content="helpContent.contextMenu.copyWorkflow" placement="left">
+              <div v-else @click="openRenameWorkflowModal" class="menu-item">Rename Workflow</div>
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.copyWorkflow" placement="left">
                 <div @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
               </RichTooltip>
-              <RichTooltip :content="helpContent.contextMenu.manageVariables" placement="left">
+              <div v-else @click="openCopyWorkflowModal" class="menu-item">Copy Workflow</div>
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.manageVariables" placement="left">
                 <div @click="openManageVarsModal" class="menu-item">Manage Variables</div>
               </RichTooltip>
-              <RichTooltip :content="helpContent.contextMenu.manageMemories" placement="left">
+              <div v-else @click="openManageVarsModal" class="menu-item">Manage Variables</div>
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.manageMemories" placement="left">
                 <div @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
               </RichTooltip>
-              <RichTooltip :content="helpContent.contextMenu.createEdge" placement="left">
+              <div v-else @click="openManageMemoriesModal" class="menu-item">Manage Memories</div>
+              <RichTooltip v-if="shouldShowTooltip" :content="helpContent.contextMenu.createEdge" placement="left">
                 <div @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
               </RichTooltip>
+              <div v-else @click="openCreateEdgeModal" class="menu-item">Create Edge</div>
             </div>
           </transition>
         </div>
@@ -282,7 +324,7 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onMounted, onBeforeUnmount, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
@@ -298,6 +340,9 @@ import RichTooltip from '../components/RichTooltip.vue'
 import yaml from 'js-yaml'
 import { fetchYaml, fetchVueGraph, postVuegraphs, updateYaml, postYamlNameChange, postYamlCopy } from '../utils/apiFunctions'
 import { helpContent } from '../utils/helpContent.js'
+import { configStore } from '../utils/configStore.js'
+
+const shouldShowTooltip = computed(() => configStore.ENABLE_HELP_TOOLTIPS)
 
 const props = defineProps({
   workflowName: {
diff --git a/frontend/src/utils/configStore.js b/frontend/src/utils/configStore.js
index ce015601..ddd0c95f 100755
--- a/frontend/src/utils/configStore.js
+++ b/frontend/src/utils/configStore.js
@@ -4,7 +4,8 @@ const CONFIG_KEY = 'agent_config_settings'
 
 const defaultSettings = {
     AUTO_SHOW_ADVANCED: false,
-    AUTO_EXPAND_MESSAGES: false
+    AUTO_EXPAND_MESSAGES: false,
+    ENABLE_HELP_TOOLTIPS: true
 }
 
 // Initialize state from localStorage