feat: Slate & Ice Modern aesthetic redesign (#94)

* chore: update Google Fonts to Bricolage Grotesque, IBM Plex Sans, JetBrains Mono

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: update Tailwind config to Slate & Ice theme colors and fonts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: update CSS variables and glass-card utilities for Slate & Ice theme

- Replace all color variables with Slate & Ice palette
- Add glass system vars (--glass-bg, --glass-blur, --shadow-float)
- Replace legacy glass-card with new variable-driven glass classes
- Add breatheGlow, bellWobble, slideDown, fadeInRight keyframes
- Update font references to IBM Plex Sans and Bricolage Grotesque

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: recolor BrandLogo to cyan gradient, split BrandWordmark for gradient Flow text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: update TopBar with glassmorphism backdrop and cyan accent styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: update Sidebar with glassmorphism backdrop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add ambient atmosphere gradient orbs behind app shell

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: update QuickStats and SessionsPanel with glass-card styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add WeeklyCalendar, QuickActions, OpenSessions, RecentActivity dashboard components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: redesign dashboard layout with calendar, open sessions, and glass-card panels

New layout: greeting → calendar+actions → sessions+stats → activity
Replaces old QuickStats and SessionsPanel with new dashboard components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: replace remaining purple hex references with ice-cyan accent

Sweep of hardcoded purple hex values (#818cf8, #6366f1) replaced with
new cyan accent (#06b6d4) in QuickActions, RecentActivity, QuickLaunch,
and SVG brand assets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: update CLAUDE.md branding and design system for Slate & Ice Modern

Updated Last Updated date, branding section (fonts, colors, glass
utilities, atmosphere orbs), component styling rules, and Design System
section to reflect the new ice-cyan glassmorphism theme.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add Slate & Ice Modern design doc and implementation plan

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: redesign login page with Slate & Ice Modern design system

Apply glassmorphism styling, atmosphere orbs, branded wordmark, and
consistent design tokens to match the updated app shell aesthetic.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: raise TopBar z-index so profile dropdown renders above main content

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add AI assistant with in-session copilot and standalone chat with RAG

Implements three-phase AI assistant feature:
- Phase 0: RAG infrastructure with pgvector embeddings, Voyage AI integration,
  tree chunking service, and semantic search over team's flow library
- Phase 1: In-session copilot panel during flow navigation with contextual
  AI help, current step awareness, and suggested related flows
- Phase 2: Standalone AI chat page with persistent conversation history,
  pin/delete, and configurable retention policies (account-level)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add account management, email verification, AI fixes, and user guides

- 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>

* fix: prevent stale chunk errors after deployments

- Set Cache-Control no-cache on index.html in nginx so browsers always
  fetch fresh chunk references after a deploy
- Auto-reload on chunk load failures (stale deploy detection) with
  loop prevention via sessionStorage
- Show friendly "App Updated" message if auto-reload doesn't resolve it

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add email verification toggle to admin settings

Adds platform-level toggle to enable/disable email verification.
When disabled, the verification banner is hidden and the send
endpoint returns 403.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #94.
This commit is contained in:
chihlasm
2026-03-04 20:44:25 -05:00
committed by GitHub
parent 554ad84d9e
commit 4d2c4930fd
100 changed files with 8181 additions and 466 deletions

495
frontend/src/data/guides.ts Normal file
View File

@@ -0,0 +1,495 @@
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.' },
],
},
],
},
]