import type { LucideIcon } from 'lucide-react' import { Rocket, Box, GitBranch, ListChecks, Play, Clock, Share2, Sparkles, BotMessageSquare, Bookmark, Wrench, Settings, BarChart3, } from 'lucide-react' export interface GuideStep { instruction: string detail?: string tip?: string } export interface GuideSection { title: string steps: GuideStep[] } export interface Guide { slug: string title: string icon: LucideIcon summary: string sections: GuideSection[] } export const guides: Guide[] = [ { slug: 'getting-started', title: 'Getting Started', icon: Rocket, summary: 'Account setup, first login, and navigating the app.', sections: [ { title: 'Logging In', steps: [ { instruction: 'Go to the ResolutionFlow login page and enter your email and password.' }, { instruction: 'Click **Sign In** to access your dashboard.' }, { instruction: 'If you forgot your password, click **Forgot password?** on the login page and follow the email instructions.', tip: 'Check your spam folder if you don\'t receive the reset email within a few minutes.' }, ], }, { title: 'Navigating the App', steps: [ { instruction: 'The **sidebar** on the left contains all main navigation links: Dashboard, All Flows, Flow Editor, Sessions, Exports, and more.' }, { instruction: 'The **top bar** has a search bar (Ctrl+K / Cmd+K) to quickly find flows, sessions, and tags.' }, { instruction: 'Click the **Quick Launch** (lightning bolt icon) in the top bar to start a flow without navigating to it first.' }, { instruction: 'Your **user avatar** in the top-right opens a menu for Account settings, Admin Panel (if applicable), and Logout.' }, ], }, { title: 'Understanding the Dashboard', steps: [ { instruction: 'The Dashboard shows your active sessions, recent flows, and quick stats at a glance.' }, { instruction: 'Click any active session card to resume where you left off.' }, { instruction: 'Use the **Pinned Flows** section at the top of the sidebar for quick access to your most-used flows.' }, ], }, ], }, { slug: 'creating-flows', title: 'Creating Flows', icon: Box, summary: 'Create troubleshooting, procedural, and maintenance flows.', sections: [ { title: 'Creating a Troubleshooting Flow', steps: [ { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' }, { instruction: 'Select **Troubleshooting** as the flow type.' }, { instruction: 'Enter a name and optional description for your flow.' }, { instruction: 'Click **Create** to open the canvas editor where you can build your decision tree.', tip: 'Choose a descriptive name like "DNS Resolution Failure" so your team can find it easily.' }, ], }, { title: 'Creating a Procedural Flow (Project)', steps: [ { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' }, { instruction: 'Select **Procedural** as the flow type.' }, { instruction: 'Enter a name and description.' }, { instruction: 'Click **Create** to open the procedural editor where you can add steps, intake forms, and checklists.' }, ], }, { title: 'Creating a Maintenance Flow', steps: [ { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' }, { instruction: 'Select **Maintenance** as the flow type.' }, { instruction: 'Enter a name and description.' }, { instruction: 'Click **Create**. Maintenance flows use the same step-based editor as procedural flows but support batch launches across multiple targets.' }, ], }, { title: 'Managing Flow Properties', steps: [ { instruction: 'From the flow editor, click the flow name or settings area to update the name, description, category, and tags.' }, { instruction: 'Assign a **category** to organize flows by topic (e.g., "Networking", "Active Directory").' }, { instruction: 'Add **tags** for searchability (e.g., "DNS", "VPN", "Firewall").', tip: 'Tags are shared across your team. Use consistent naming so everyone can find relevant flows.' }, ], }, ], }, { slug: 'tree-editor', title: 'Tree Editor (Canvas)', icon: GitBranch, summary: 'Build decision trees with nodes, options, actions, and solutions.', sections: [ { title: 'Understanding the Canvas', steps: [ { instruction: 'The canvas editor displays your troubleshooting flow as a visual decision tree.' }, { instruction: 'Each **node** represents a question, action, or solution in your troubleshooting path.' }, { instruction: 'Nodes are connected by **options** — the answers or choices that lead to the next step.' }, { instruction: 'Use the toolbar at the top to zoom, fit to screen, and access additional options.' }, ], }, { title: 'Adding Nodes', steps: [ { instruction: 'Click the **+** button on any existing node to add a child node.' }, { instruction: 'Choose the node type: **Question** (asks the engineer something), **Action** (instructs them to do something), or **Solution** (the resolution).' }, { instruction: 'Type the node content — this is what the engineer will see during navigation.' }, { instruction: 'For Question nodes, add **options** (answers) that branch to different paths.', tip: 'Keep questions specific and actionable. "Is the DNS server responding to nslookup?" is better than "Check DNS".' }, ], }, { title: 'Editing Nodes', steps: [ { instruction: 'Click any node on the canvas to select it and open the edit panel.' }, { instruction: 'Update the node content, type, or options in the side panel.' }, { instruction: 'To delete a node, select it and click the **Delete** button or press the Delete key.' }, { instruction: 'Use **Undo** (Ctrl+Z) and **Redo** (Ctrl+Shift+Z) to revert changes.' }, ], }, { title: 'Solution Nodes', steps: [ { instruction: 'Solution nodes are endpoints — they represent the resolution to the troubleshooting path.' }, { instruction: 'Write clear, actionable solutions with specific commands or steps the engineer should follow.' }, { instruction: 'You can have multiple solution nodes for different resolution paths.' }, ], }, ], }, { slug: 'procedural-editor', title: 'Procedural Flow Editor', icon: ListChecks, summary: 'Build step-by-step procedures with intake forms and checklists.', sections: [ { title: 'Adding Steps', steps: [ { instruction: 'In the procedural editor, click **Add Step** to add a new step to your flow.' }, { instruction: 'Enter the step title and detailed instructions.' }, { instruction: 'Steps execute in order from top to bottom. Drag steps to reorder them.' }, { instruction: 'Use **Section Headers** to group related steps under labeled sections.', tip: 'Break long procedures into sections like "Preparation", "Execution", and "Verification".' }, ], }, { title: 'Intake Forms', steps: [ { instruction: 'Intake forms collect information before the procedure begins (e.g., client name, server IP).' }, { instruction: 'Click **Add Field** in the intake form section to add a form field.' }, { instruction: 'Choose the field type: **Text**, **Textarea**, **Select** (dropdown), **Number**, **URL**, or **Checkbox**.' }, { instruction: 'Mark fields as **Required** if they must be filled before proceeding.' }, { instruction: 'Field values become **variables** you can reference in step instructions using the variable name.', tip: 'Use descriptive variable names like "client_name" or "server_ip" so they\'re easy to reference in steps.' }, ], }, { title: 'Step Options', steps: [ { instruction: 'Expand **More Options** on any step to access additional settings.' }, { instruction: 'Add a **URL** field to link to relevant documentation or tools.' }, { instruction: 'Steps can include notes fields where engineers enter observations during execution.' }, ], }, ], }, { slug: 'running-flows', title: 'Running Flows', icon: Play, summary: 'Navigate troubleshooting flows and execute procedural procedures.', sections: [ { title: 'Running a Troubleshooting Flow', steps: [ { instruction: 'Go to **All Flows** in the sidebar and find the flow you want to run.' }, { instruction: 'Click the flow card, then click **Start** to begin a new session.' }, { instruction: 'Read each question and select the answer that matches your situation.' }, { instruction: 'Follow the path until you reach a **Solution** node with the resolution steps.' }, { instruction: 'Use the **Scratchpad** (notepad icon) to take notes during navigation.', tip: 'You can pin frequently-used flows in the sidebar for quick access.' }, ], }, { title: 'Running a Procedural Flow', steps: [ { instruction: 'Navigate to the procedural flow and click **Start**.' }, { instruction: 'Fill out the **Intake Form** with required information, then click **Begin**.' }, { instruction: 'Work through each step in order. Mark steps as complete using the checkbox.' }, { instruction: 'Add notes to individual steps as you work through them.' }, { instruction: 'The progress bar at the top shows your completion percentage.' }, ], }, { title: 'Using Flow Assist (AI Copilot)', steps: [ { instruction: 'While navigating any flow, click the **Flow Assist** button (sparkles icon) in the bottom-right corner.' }, { instruction: 'Ask questions about the current step, like "What else could cause this?" or "How do I check this?"' }, { instruction: 'The AI understands your current position in the flow and provides contextual answers.' }, { instruction: 'If the AI finds related flows in your team\'s library, they appear as **Suggested Flows** cards you can click to open.' }, ], }, ], }, { slug: 'sessions', title: 'Sessions', icon: Clock, summary: 'Session history, resuming, notes, and scratchpad.', sections: [ { title: 'Viewing Session History', steps: [ { instruction: 'Click **Sessions** in the sidebar to see all your past and active sessions.' }, { instruction: 'Sessions are listed newest first. Use the filters to show only active or completed sessions.' }, { instruction: 'Click any session to view its full details including the path taken and notes.' }, ], }, { title: 'Resuming a Session', steps: [ { instruction: 'Find the session in your session history or on the Dashboard.' }, { instruction: 'Click the session, then click **Resume** to continue where you left off.' }, { instruction: 'All previous decisions and notes are preserved.', tip: 'Active sessions also appear in the sidebar badge count for quick reference.' }, ], }, { title: 'Session Notes & Scratchpad', steps: [ { instruction: 'During flow navigation, click the **Scratchpad** icon to open the note-taking panel.' }, { instruction: 'Type free-form notes about your troubleshooting process.' }, { instruction: 'Notes are saved automatically and included in session exports.' }, ], }, ], }, { slug: 'sharing-exports', title: 'Sharing & Exports', icon: Share2, summary: 'Share sessions and export documentation.', sections: [ { title: 'Sharing a Session', steps: [ { instruction: 'Open a completed session from the session detail page.' }, { instruction: 'Click the **Share** button to open the sharing modal.' }, { instruction: 'A unique share link is generated. Click **Copy Link** to copy it to your clipboard.' }, { instruction: 'Share the link with team members or clients — they can view the session path and notes.' }, { instruction: 'Manage active share links from the **Exports** page in the sidebar.', tip: 'Share links respect your account\'s public sharing settings. Account owners can enable or disable public shares.' }, ], }, { title: 'Exporting Sessions', steps: [ { instruction: 'From a session detail page, click the **Export** button.' }, { instruction: 'Choose the detail level: **Summary** (high-level overview), **Standard** (key decisions), or **Detailed** (full path with all notes).' }, { instruction: 'Preview the export and edit it if needed before downloading.' }, { instruction: 'Enable **Sensitive Data Redaction** to automatically mask passwords, IPs, and credentials in the export.', tip: 'Use the summary export for client-facing documentation and the detailed export for internal records.' }, ], }, { title: 'Managing Shares', steps: [ { instruction: 'Click **Exports** in the sidebar to see all your shared sessions.' }, { instruction: 'View how many times each share link has been accessed.' }, { instruction: 'Revoke share links by clicking the delete icon next to any active share.' }, ], }, ], }, { slug: 'ai-assistant', title: 'AI Assistant', icon: BotMessageSquare, summary: 'Standalone AI chat for IT questions and flow recommendations.', sections: [ { title: 'Starting a Conversation', steps: [ { instruction: 'Click **AI Assistant** in the sidebar to open the chat page.' }, { instruction: 'Click **Start a Conversation** or the **+ New Chat** button in the left panel.' }, { instruction: 'Type your question in the message box and press Enter or click the send button.' }, { instruction: 'The AI responds as a Senior Systems & Network Engineer with MSP expertise.' }, ], }, { title: 'Managing Conversations', steps: [ { instruction: 'All conversations are listed in the left sidebar panel, newest first.' }, { instruction: 'Click any conversation to switch to it and see the full message history.' }, { instruction: '**Pin** important conversations by right-clicking or using the pin icon — pinned chats stay at the top.' }, { instruction: 'Delete conversations you no longer need by clicking the trash icon.' }, ], }, { title: 'Suggested Flows', steps: [ { instruction: 'When you ask a question, the AI searches your team\'s flow library for relevant matches.' }, { instruction: 'If related flows are found, they appear as **Suggested Flow** cards below the AI response.' }, { instruction: 'Click a suggested flow card to navigate directly to that flow.' }, ], }, ], }, { slug: 'ai-copilot', title: 'Flow Assist (AI Copilot)', icon: Sparkles, summary: 'In-session AI help while navigating flows.', sections: [ { title: 'Opening Flow Assist', steps: [ { instruction: 'While navigating any flow, look for the **Flow Assist** button (sparkles icon) in the bottom-right corner of the screen.' }, { instruction: 'Click it to open the AI assistant panel on the right side.' }, { instruction: 'The AI automatically knows which flow you\'re in and what step you\'re on.' }, ], }, { title: 'Asking Questions', steps: [ { instruction: 'Type your question in the message box at the bottom of the panel.' }, { instruction: 'Ask things like "What else could cause this?", "How do I run this command?", or "Explain this step in more detail."' }, { instruction: 'The AI provides contextual answers based on your current position in the flow.' }, { instruction: 'Your conversation persists throughout the session — you can refer back to earlier answers.', tip: 'Flow Assist is especially useful when you encounter an unfamiliar step or need additional troubleshooting guidance.' }, ], }, { title: 'Suggested Flows', steps: [ { instruction: 'If your question relates to other flows in your team\'s library, the AI shows **Related Flows** cards.' }, { instruction: 'Click a card to open that flow in a new tab.' }, ], }, ], }, { slug: 'step-library', title: 'Step Library', icon: Bookmark, summary: 'Reusable steps you can import into any procedural flow.', sections: [ { title: 'Browsing the Step Library', steps: [ { instruction: 'Click **Step Library** in the sidebar to view all saved reusable steps.' }, { instruction: 'Steps are organized by category and can be searched by name or tags.' }, { instruction: 'Click any step to view its full details and instructions.' }, ], }, { title: 'Saving Steps to the Library', steps: [ { instruction: 'In the procedural flow editor, click the **Save to Library** option on any step.' }, { instruction: 'Give the library step a name and optional category.' }, { instruction: 'The step is now available for reuse across all your procedural and maintenance flows.' }, ], }, { title: 'Importing Library Steps', steps: [ { instruction: 'In the procedural flow editor, click **Import from Library** when adding a new step.' }, { instruction: 'Browse or search the step library for the step you want.' }, { instruction: 'Click **Import** to add it to your flow. The imported step is a copy — editing it won\'t affect the library version.', tip: 'Use the step library for common procedures like "Verify backup status" or "Check DNS resolution" that appear across multiple flows.' }, ], }, ], }, { slug: 'maintenance', title: 'Maintenance Flows', icon: Wrench, summary: 'Batch launches, target lists, and scheduled maintenance.', sections: [ { title: 'Setting Up a Maintenance Flow', steps: [ { instruction: 'Create a new flow and select **Maintenance** as the type.' }, { instruction: 'Build your steps in the procedural editor — these are the maintenance tasks to perform on each target.' }, { instruction: 'The flow detail page shows maintenance-specific options including batch launches and scheduling.' }, ], }, { title: 'Target Lists', steps: [ { instruction: 'Go to **Account** > **Target Lists** to manage your saved target lists.' }, { instruction: 'Create a target list with the servers, workstations, or devices you maintain.' }, { instruction: 'Target lists can be reused across multiple maintenance flows and batch launches.', tip: 'Organize target lists by client or site for easy batch launches (e.g., "Acme Corp - Domain Controllers").' }, ], }, { title: 'Batch Launching', steps: [ { instruction: 'Open a maintenance flow and click **Launch Batch**.' }, { instruction: 'Select a saved **Target List** or manually enter targets.' }, { instruction: 'Click **Launch** to create a session for each target in the list.' }, { instruction: 'All sessions are created immediately. Click into any target to begin executing the maintenance steps.' }, { instruction: 'Track progress on the **Batch Status** page showing completion status across all targets.' }, ], }, { title: 'Scheduling', steps: [ { instruction: 'On the maintenance flow detail page, click **Schedule** to set up recurring execution.' }, { instruction: 'Choose a schedule (e.g., weekly, monthly) using the cron expression builder.' }, { instruction: 'Select the target list to use for each scheduled run.' }, { instruction: 'Scheduled batches are launched automatically at the configured time.' }, ], }, ], }, { slug: 'account-settings', title: 'Account Settings', icon: Settings, summary: 'Team management, categories, tags, and profile settings.', sections: [ { title: 'Profile Settings', steps: [ { instruction: 'Click your **avatar** in the top-right corner and select **Account**.' }, { instruction: 'Click **Profile Settings** to update your display name, email, and password.' }, { instruction: 'Changes take effect immediately after saving.' }, ], }, { title: 'Team Categories', steps: [ { instruction: 'Go to **Account** and click **Team Categories** (account owner only).' }, { instruction: 'Add categories to organize your team\'s flows (e.g., "Networking", "Security", "Cloud").' }, { instruction: 'Assign colors to categories for visual distinction in the flow library.' }, { instruction: 'Delete or rename categories as your team\'s needs evolve.' }, ], }, { title: 'Chat Retention', steps: [ { instruction: 'Go to **Account** and click **Chat Retention** (account owner only).' }, { instruction: 'Set the **retention period** (default: 90 days) — chats older than this are automatically deleted.' }, { instruction: 'Set the **maximum conversation count** (default: 100) — oldest chats are deleted when the limit is exceeded.' }, { instruction: 'Pinned chats are never automatically deleted.', tip: 'Pin important AI conversations to preserve them regardless of retention settings.' }, ], }, ], }, { slug: 'analytics', title: 'Analytics', icon: BarChart3, summary: 'Dashboard metrics, team usage, and personal stats.', sections: [ { title: 'Team Analytics', steps: [ { instruction: 'Click **Analytics** in the sidebar to view team-wide metrics.' }, { instruction: 'See total flows, active sessions, completion rates, and usage trends.' }, { instruction: 'Filter by date range to analyze specific periods.' }, ], }, { title: 'Personal Analytics', steps: [ { instruction: 'From the Analytics page, click **My Stats** to see your individual metrics.' }, { instruction: 'Track your session count, most-used flows, and average completion time.' }, { instruction: 'Use personal analytics to identify areas where you spend the most troubleshooting time.' }, ], }, ], }, ]