bmad-elsabro 1.0.0

package/renderer/data/tutorials.json

@@ -0,0 +1,546 @@
+{
+  "tutorials": [
+    {
+      "id": "welcome-tour",
+      "name": "Welcome to BMAD Studio",
+      "description": "A quick tour of the main features and interface",
+      "category": "getting-started",
+      "estimatedMinutes": 3,
+      "steps": [
+        {
+          "id": "step-1",
+          "title": "Welcome to BMAD Studio!",
+          "description": "BMAD Studio is a professional desktop application for AI-driven development. Let's take a quick tour of the main features!",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "This tour will take about 3 minutes. You can skip it anytime by clicking the 'Skip Tour' button.",
+          "actions": [
+            {
+              "label": "Start Tour",
+              "type": "next"
+            },
+            {
+              "label": "Skip Tour",
+              "type": "skip"
+            }
+          ]
+        },
+        {
+          "id": "step-2",
+          "title": "Sidebar Navigation",
+          "description": "The sidebar on the left is your main navigation hub. It contains all the key features you'll use.",
+          "targetElement": "[data-tutorial='sidebar']",
+          "highlightType": "element",
+          "position": "right",
+          "content": "Click on different sections to explore workflows, agents, settings, and more. You can collapse it using the toggle button at the top.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-3",
+          "title": "Chat Panel",
+          "description": "Interact with AI agents directly through the chat panel.",
+          "targetElement": "[data-tutorial='chat-panel']",
+          "highlightType": "element",
+          "position": "left",
+          "content": "Type your questions or commands here. The AI will respond with streaming text, just like ChatGPT. You can switch between different AI agents for specialized tasks.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-4",
+          "title": "Token Monitor",
+          "description": "Track your AI token usage in real-time with the Token Monitor.",
+          "targetElement": "[data-tutorial='token-monitor']",
+          "highlightType": "element",
+          "position": "bottom",
+          "content": "This shows how many tokens you're using. Switch between Ultra-Save, Balanced, and Power modes to optimize your usage. Ultra-Save mode can reduce token consumption by up to 40%!",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-5",
+          "title": "Workflow Editor",
+          "description": "Create and edit workflows with our visual drag-and-drop editor.",
+          "targetElement": "[data-tutorial='workflow-editor']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "Workflows are sequences of steps that automate your development process. Drag steps around, connect them, and visualize the entire flow in an interactive graph.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-6",
+          "title": "Terminal",
+          "description": "Integrated terminal for running commands without leaving the app.",
+          "targetElement": "[data-tutorial='terminal']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "Run git commands, npm scripts, or any terminal commands directly from BMAD Studio. All output is captured and displayed here.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-7",
+          "title": "You're All Set!",
+          "description": "That's it! You're ready to start using BMAD Studio.",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "You can always restart this tutorial from the Help menu. Check out other tutorials to learn about specific features in depth!",
+          "actions": [
+            {
+              "label": "Finish",
+              "type": "complete"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "workflow-basics",
+      "name": "Workflow Basics",
+      "description": "Learn how to create and manage workflows",
+      "category": "workflows",
+      "estimatedMinutes": 5,
+      "steps": [
+        {
+          "id": "step-1",
+          "title": "What are Workflows?",
+          "description": "Workflows are sequences of steps that automate your development process.",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "Think of workflows as recipes - each step is an ingredient or action that leads to the final result. BMAD Studio comes with 28+ pre-built workflows for common tasks!",
+          "actions": [
+            {
+              "label": "Start Learning",
+              "type": "next"
+            }
+          ]
+        },
+        {
+          "id": "step-2",
+          "title": "Opening the Workflow Editor",
+          "description": "Click on 'Workflows' in the sidebar to access the workflow editor.",
+          "targetElement": "[data-tutorial='workflows-nav']",
+          "highlightType": "element",
+          "position": "right",
+          "content": "This will open the workflow editor where you can see all available workflows and create new ones.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-3",
+          "title": "Workflow List",
+          "description": "Browse through pre-built workflows or create your own.",
+          "targetElement": "[data-tutorial='workflow-list']",
+          "highlightType": "element",
+          "position": "left",
+          "content": "Each workflow shows its name, description, and number of steps. Click on any workflow to view its details or click 'New Workflow' to create a custom one.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-4",
+          "title": "Drag and Drop Steps",
+          "description": "Reorder workflow steps by dragging them.",
+          "targetElement": "[data-tutorial='workflow-canvas']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "Simply click and drag any step to reorder the workflow. The graph visualization will update automatically to show the new sequence.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-5",
+          "title": "Executing Workflows",
+          "description": "Run workflows with a single click.",
+          "targetElement": "[data-tutorial='execute-workflow']",
+          "highlightType": "element",
+          "position": "bottom",
+          "content": "Click the 'Execute' button to run the workflow. You'll see real-time progress as each step completes. If any step fails, the workflow will pause and show you the error.",
+          "actions": [
+            {
+              "label": "Finish",
+              "type": "complete"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "token-economy",
+      "name": "Token Economy System",
+      "description": "Master token tracking and optimization",
+      "category": "advanced",
+      "estimatedMinutes": 4,
+      "steps": [
+        {
+          "id": "step-1",
+          "title": "Understanding Tokens",
+          "description": "Tokens are units of text that AI models process.",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "Every time you chat with an AI or run a workflow, tokens are consumed. Think of tokens like cell phone minutes - you want to use them wisely! BMAD Studio helps you track and optimize your token usage.",
+          "actions": [
+            {
+              "label": "Learn More",
+              "type": "next"
+            }
+          ]
+        },
+        {
+          "id": "step-2",
+          "title": "Real-time Token Monitor",
+          "description": "See your token usage in real-time.",
+          "targetElement": "[data-tutorial='token-monitor']",
+          "highlightType": "element",
+          "position": "bottom",
+          "content": "The token monitor shows your current usage, budget, and remaining tokens. It updates in real-time as you interact with AI agents.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-3",
+          "title": "Efficiency Modes",
+          "description": "Choose between Ultra-Save, Balanced, and Power modes.",
+          "targetElement": "[data-tutorial='efficiency-mode']",
+          "highlightType": "element",
+          "position": "bottom",
+          "content": "Ultra-Save minimizes token usage (40% reduction!), Balanced is the default, and Power mode prioritizes response quality over token efficiency. Switch modes based on your needs!",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-4",
+          "title": "Token Analytics",
+          "description": "View historical token usage and trends.",
+          "targetElement": "[data-tutorial='token-analytics']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "The analytics dashboard shows your token usage over time, helping you identify patterns and optimize your workflows. You can see which agents and workflows consume the most tokens.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-5",
+          "title": "Budget Alerts",
+          "description": "Set budgets and receive alerts when approaching limits.",
+          "targetElement": "[data-tutorial='budget-settings']",
+          "highlightType": "element",
+          "position": "left",
+          "content": "Configure daily, weekly, or monthly token budgets. BMAD Studio will notify you when you're approaching your limit, helping you stay within budget.",
+          "actions": [
+            {
+              "label": "Finish",
+              "type": "complete"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "testing-basics",
+      "name": "Test Center Basics",
+      "description": "Learn how to create and run tests",
+      "category": "testing",
+      "estimatedMinutes": 6,
+      "steps": [
+        {
+          "id": "step-1",
+          "title": "Why Testing Matters",
+          "description": "Tests help ensure your code works correctly.",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "Testing is like proofreading your essay before turning it in. It catches mistakes early and gives you confidence that your code works as expected. BMAD Studio makes testing easy, even if you've never written a test before!",
+          "actions": [
+            {
+              "label": "Start Learning",
+              "type": "next"
+            }
+          ]
+        },
+        {
+          "id": "step-2",
+          "title": "Opening Test Center",
+          "description": "Navigate to the Test Center from the sidebar.",
+          "targetElement": "[data-tutorial='test-center-nav']",
+          "highlightType": "element",
+          "position": "right",
+          "content": "The Test Center is your one-stop shop for creating, running, and analyzing tests. It includes an AI Test Generator and a Visual Test Builder for non-programmers!",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-3",
+          "title": "AI Test Generator",
+          "description": "Let AI create tests for you automatically.",
+          "targetElement": "[data-tutorial='ai-test-generator']",
+          "highlightType": "element",
+          "position": "left",
+          "content": "Simply select a file or function, and the AI will generate comprehensive tests for you. It's like having a testing expert write your tests automatically!",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-4",
+          "title": "Visual Test Builder",
+          "description": "Build tests without writing code.",
+          "targetElement": "[data-tutorial='visual-test-builder']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "Use the Visual Test Builder to create tests by filling out forms and clicking buttons. No coding required! It includes 'Explain like I'm 5' guidance to help you understand testing concepts.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-5",
+          "title": "Running Tests",
+          "description": "Execute your test suite with a single click.",
+          "targetElement": "[data-tutorial='run-tests']",
+          "highlightType": "element",
+          "position": "bottom",
+          "content": "Click 'Run Tests' to execute all tests. You'll see real-time results showing which tests passed (green) and which failed (red). BMAD Studio uses Jest under the hood for fast, reliable testing.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-6",
+          "title": "Coverage Dashboard",
+          "description": "See how much of your code is tested.",
+          "targetElement": "[data-tutorial='coverage-dashboard']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "The coverage dashboard shows what percentage of your code is covered by tests. Aim for at least 80% coverage for production code. Green lines are tested, red lines need tests!",
+          "actions": [
+            {
+              "label": "Finish",
+              "type": "complete"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "party-mode",
+      "name": "Party Mode Collaboration",
+      "description": "Coordinate multiple AI agents working together",
+      "category": "advanced",
+      "estimatedMinutes": 4,
+      "steps": [
+        {
+          "id": "step-1",
+          "title": "What is Party Mode?",
+          "description": "Party Mode lets multiple AI agents work on different tasks simultaneously.",
+          "targetElement": null,
+          "highlightType": "none",
+          "position": "center",
+          "content": "Imagine having a team of specialists all working together - one agent handles frontend, another handles backend, and a third writes tests. That's Party Mode! They coordinate automatically to avoid conflicts.",
+          "actions": [
+            {
+              "label": "Learn More",
+              "type": "next"
+            }
+          ]
+        },
+        {
+          "id": "step-2",
+          "title": "Enabling Party Mode",
+          "description": "Toggle Party Mode from the workflow settings.",
+          "targetElement": "[data-tutorial='party-mode-toggle']",
+          "highlightType": "element",
+          "position": "right",
+          "content": "Click this toggle to enable Party Mode for the current workflow. You'll see a coordinator interface that shows all active agents and their current tasks.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-3",
+          "title": "Agent Coordination View",
+          "description": "Monitor all agents in real-time.",
+          "targetElement": "[data-tutorial='agent-coordinator']",
+          "highlightType": "element",
+          "position": "left",
+          "content": "This view shows which agents are active, what they're working on, and their progress. Agents communicate with each other to avoid conflicts and share information.",
+          "actions": [
+            {
+              "label": "Next",
+              "type": "next"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        },
+        {
+          "id": "step-4",
+          "title": "Task Distribution",
+          "description": "Assign tasks to specific agents.",
+          "targetElement": "[data-tutorial='task-assignment']",
+          "highlightType": "element",
+          "position": "top",
+          "content": "You can manually assign tasks to agents or let the system distribute them automatically based on agent capabilities. Each agent specializes in different areas!",
+          "actions": [
+            {
+              "label": "Finish",
+              "type": "complete"
+            },
+            {
+              "label": "Back",
+              "type": "back"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}