8d6accaf60
- Profile settings, account transfer, delete/leave account flows - Email verification with JWT tokens and Resend integration - AI assistant/copilot fixes: markdown rendering, shared RAG helpers, token tracking, input refocus, model_validate usage - User guides hub + detail pages with 13 topic guides - Sidebar and top bar navigation for guides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
496 lines
23 KiB
TypeScript
496 lines
23 KiB
TypeScript
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.' },
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]
|