Complete Phase 2: Frontend implementation with React + TypeScript
Frontend Features: - React 18 + Vite + TypeScript + Tailwind CSS + Zustand - JWT authentication with automatic token refresh - Tree library with search and category filtering - Full tree navigation (decision/action/solution nodes) - Session management with notes and completion - Session history with export (Markdown/Text/HTML) - ErrorBoundary for graceful error handling Backend Fixes: - CORS: Added port 5174 to allowed origins - Sessions: Fixed JSONB datetime serialization (mode='json') Documentation: - Updated PROGRESS.md with Phase 2 completion - Updated 03-DEVELOPMENT-ROADMAP.md with checked items - Added PHASE-2.5-PERSONAL-BRANCHING.md spec Seed Data: - Added backend/scripts/seed_data.py with Password Reset tree Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -553,29 +553,198 @@ Contact remote engineer if issues: michael@msp.com
|
||||
|
||||
---
|
||||
|
||||
### 10. Personal Tree Branching (Phase 2.5)
|
||||
|
||||
**Description:** Allow users to insert custom steps during an active troubleshooting session without modifying the original tree, then optionally save their modified version as a personal tree.
|
||||
|
||||
**User Flow:**
|
||||
1. User navigates an official tree
|
||||
2. At any decision point, user clicks "+ Add Custom Step"
|
||||
3. User creates step manually OR selects from Step Library
|
||||
4. Custom step is inserted into their session only (original tree unchanged)
|
||||
5. Session continues with custom step included
|
||||
6. Export includes all custom steps with clear marking
|
||||
7. After session completion, user is prompted to save as personal tree (optional)
|
||||
|
||||
**UI Components:**
|
||||
- **Add Custom Step Button:** Appears at each decision node
|
||||
- **Step Creation Modal:**
|
||||
- Tab 1: "Type My Own" - free-form step creation
|
||||
- Tab 2: "Browse Library" - searchable step repository
|
||||
- **Custom Step Indicator:** Visual badge showing step is user-added (not from original tree)
|
||||
- **Save as Tree Prompt:** Post-session dialog offering to save modifications
|
||||
|
||||
**Step Types:**
|
||||
1. **Decision:** Yes/No or multiple choice question
|
||||
2. **Action:** Task to perform with optional commands/scripts
|
||||
3. **Resolution:** Terminal node indicating issue resolved
|
||||
|
||||
**Technical Requirements:**
|
||||
- Custom steps stored separately from original tree structure
|
||||
- Session tracks insertion points (after which node ID)
|
||||
- Export template renders custom steps with visual distinction
|
||||
- Tree fork creates deep copy with user as owner
|
||||
- Forked trees maintain reference to original (for analytics/updates)
|
||||
|
||||
**Edge Cases:**
|
||||
- Original tree updated after fork → Notify user, offer to view changes
|
||||
- User deletes custom step mid-session → Remove from session, continue normally
|
||||
- Circular reference from custom step → Validate and prevent before insertion
|
||||
- Custom step at terminal node → Allow, becomes new branch point
|
||||
|
||||
---
|
||||
|
||||
### 11. Step Library (Phase 2.5)
|
||||
|
||||
**Description:** A repository of reusable troubleshooting steps that users can pull into any session, organized by visibility, categories, tags, and user ratings.
|
||||
|
||||
**Library Hierarchy:**
|
||||
- **My Steps:** Private to individual user
|
||||
- **Team Steps:** Visible to all team members
|
||||
- **Admin Curated:** Organization-wide, managed by administrators
|
||||
- **Community/Public:** User-contributed, rated by users, visible to all
|
||||
|
||||
**Features:**
|
||||
- **Search & Filter:**
|
||||
- Full-text search across titles, descriptions, commands
|
||||
- Filter by step type (decision, action, resolution)
|
||||
- Filter by category (admin-managed)
|
||||
- Filter by tags (user-defined)
|
||||
- Filter by visibility level
|
||||
- Filter by minimum rating (e.g., 4+ stars)
|
||||
- Sort by: recent, popular, highest rated, most used
|
||||
- **Step Preview:**
|
||||
- View full step details before inserting
|
||||
- See usage count and rating breakdown
|
||||
- View author, creation date, and last updated
|
||||
- See category and tags
|
||||
- **Step Management:**
|
||||
- Create new steps (saved to "My Steps" by default)
|
||||
- Assign category and add tags during creation
|
||||
- Edit and delete own steps
|
||||
- Promote to Team visibility (if permitted)
|
||||
- Submit to Community (requires admin approval)
|
||||
|
||||
#### Categories (Admin-Managed)
|
||||
|
||||
Categories provide structured organization for steps. Admins define and manage categories.
|
||||
|
||||
**Default Categories:**
|
||||
| Category | Description |
|
||||
|----------|-------------|
|
||||
| Citrix / VDI | Virtual desktop, XenApp, XenDesktop, VDA issues |
|
||||
| Active Directory | AD, LDAP, Group Policy, authentication |
|
||||
| Microsoft 365 | Exchange Online, Teams, SharePoint, OneDrive |
|
||||
| Networking | DNS, DHCP, VPN, firewall, connectivity |
|
||||
| File Services | File shares, permissions, DFS, storage |
|
||||
| Printing | Print servers, drivers, spooler issues |
|
||||
| Backup & Recovery | Backup software, disaster recovery, restore |
|
||||
| Security | Antivirus, permissions, security incidents |
|
||||
| Hardware | Servers, workstations, peripherals |
|
||||
| Other | Miscellaneous steps |
|
||||
|
||||
#### Tags (User-Defined)
|
||||
|
||||
Tags provide flexible, user-driven organization:
|
||||
- Created by any user when adding/editing a step
|
||||
- Lowercase, alphanumeric with hyphens (e.g., `vda-registration`, `powershell`)
|
||||
- Auto-suggest existing tags while typing
|
||||
- Popular tags shown as quick-filters
|
||||
- Recommended: 3-5 tags per step
|
||||
|
||||
#### User Ratings & Reviews
|
||||
|
||||
Public and team steps can be rated by users to surface the most helpful content.
|
||||
|
||||
**Rating System:**
|
||||
- **Star Rating:** 1-5 stars (required when rating)
|
||||
- **Helpful Vote:** Quick "Was this helpful?" Yes/No after using a step
|
||||
- **Written Review:** Optional text feedback (max 500 chars)
|
||||
- **One rating per user per step** (can update later)
|
||||
|
||||
**Rating Rules:**
|
||||
- Only users who have actually used the step can rate it ("Verified Use" badge)
|
||||
- Step author cannot rate their own step
|
||||
- Ratings update the step's average in real-time
|
||||
- Steps with <5 ratings show "Not enough ratings" instead of average
|
||||
- Admin can remove abusive reviews
|
||||
|
||||
**Admin Controls:**
|
||||
- Approve/reject community step submissions
|
||||
- Curate "Admin Curated" collection
|
||||
- Manage categories (create, rename, archive)
|
||||
- Remove inappropriate content/reviews
|
||||
- Set default visibility for new steps
|
||||
|
||||
---
|
||||
|
||||
### 12. Personal Tree Management (Phase 2.5)
|
||||
|
||||
**Description:** Users can save, organize, and share their customized tree versions.
|
||||
|
||||
**Features:**
|
||||
- **My Trees Dashboard:**
|
||||
- List of user's forked/custom trees
|
||||
- Reference to original tree (if forked)
|
||||
- Last used date and usage count
|
||||
- Quick actions: start session, edit, share, delete
|
||||
- **Tree Forking:**
|
||||
- Fork from any tree user has access to
|
||||
- Fork from another user's shared tree (fork of fork)
|
||||
- Maintain lineage tracking for analytics
|
||||
- **Sharing Options:**
|
||||
- 🔒 Private - Only creator can access
|
||||
- 🔗 Link sharing - Anyone with link, no login required
|
||||
- 👥 Team - All team members can use
|
||||
- 🌍 Public - Submitted to community library
|
||||
- **Version Awareness:**
|
||||
- Notification when original tree is updated
|
||||
- Option to view changes (basic diff)
|
||||
- Manual merge in future phase
|
||||
|
||||
**Forking Behavior:**
|
||||
- Deep copy of entire tree structure
|
||||
- User becomes owner of the copy
|
||||
- Original tree reference preserved
|
||||
- Changes to original don't affect fork (until user chooses to merge)
|
||||
- Fork count tracked on original tree (analytics)
|
||||
|
||||
**Sharing Permissions:**
|
||||
- Owner can change visibility at any time
|
||||
- "Allow forking" toggle controls whether others can fork
|
||||
- "Show author" toggle controls name visibility
|
||||
- Revoking link sharing invalidates existing links
|
||||
|
||||
---
|
||||
|
||||
## Feature Priority Matrix
|
||||
|
||||
| Feature | MVP | Phase 2 | Phase 3 | Phase 4 |
|
||||
|---------|-----|---------|---------|---------|
|
||||
| Tree Navigation | ✓ | | | |
|
||||
| Basic Export | ✓ | | | |
|
||||
| User Auth | ✓ | | | |
|
||||
| 5 Starter Trees | ✓ | | | |
|
||||
| Team Management | | ✓ | | |
|
||||
| Tree Editor | | ✓ | | |
|
||||
| Mobile Responsive | | ✓ | | |
|
||||
| Custom Branches | | ✓ | | |
|
||||
| File Attachments | | | ✓ | |
|
||||
| Offline Mode | | | ✓ | |
|
||||
| Advanced Export (PDF) | | | ✓ | |
|
||||
| Client Context | | | ✓ | |
|
||||
| Send to Engineer | | | ✓ | |
|
||||
| Analytics Dashboard | | | ✓ | |
|
||||
| Documentation Links | ✓ | Enhanced | | |
|
||||
| API | | | | ✓ |
|
||||
| Automation Integration | | | | ✓ |
|
||||
| PSA Integrations | | | | ✓ |
|
||||
| Marketplace | | | | Later |
|
||||
| Feature | MVP | Phase 2 | Phase 2.5 | Phase 3 | Phase 4 |
|
||||
|---------|-----|---------|-----------|---------|---------|
|
||||
| Tree Navigation | ✓ | | | | |
|
||||
| Basic Export | ✓ | | | | |
|
||||
| User Auth | ✓ | | | | |
|
||||
| 5 Starter Trees | ✓ | | | | |
|
||||
| Team Management | | ✓ | | | |
|
||||
| Tree Editor | | ✓ | | | |
|
||||
| Mobile Responsive | | ✓ | | | |
|
||||
| Basic Custom Branches | | ✓ | | | |
|
||||
| **Step Library** | | | **✓** | | |
|
||||
| **Categories & Tags** | | | **✓** | | |
|
||||
| **Ratings & Reviews** | | | **✓** | | |
|
||||
| **Personal Tree Branching** | | | **✓** | | |
|
||||
| **Tree Forking & Sharing** | | | **✓** | | |
|
||||
| File Attachments | | | | ✓ | |
|
||||
| Offline Mode | | | | ✓ | |
|
||||
| Advanced Export (PDF) | | | | ✓ | |
|
||||
| Client Context | | | | ✓ | |
|
||||
| Send to Engineer | | | | ✓ | |
|
||||
| Analytics Dashboard | | | | ✓ | |
|
||||
| Documentation Links | ✓ | Enhanced | | | |
|
||||
| API | | | | | ✓ |
|
||||
| Automation Integration | | | | | ✓ |
|
||||
| PSA Integrations | | | | | ✓ |
|
||||
| Marketplace | | | | | Later |
|
||||
|
||||
---
|
||||
|
||||
@@ -604,3 +773,26 @@ Contact remote engineer if issues: michael@msp.com
|
||||
- "I want to ensure we're following consistent procedures"
|
||||
- "I need metrics on troubleshooting time and success rates"
|
||||
- "I want to identify training gaps based on common issues"
|
||||
|
||||
### Phase 2.5 User Story Additions
|
||||
|
||||
**Michael (Senior Engineer):**
|
||||
- "I want to add a client-specific step without changing the official tree"
|
||||
- "I want to save my modified tree so I can reuse it for this client"
|
||||
- "I want to share a troubleshooting approach with a colleague via link"
|
||||
- "I want to build a library of steps I commonly use across different trees"
|
||||
- "I want to rate steps that helped me so others can find them"
|
||||
|
||||
**Junior Engineer:**
|
||||
- "I want to see what custom steps senior engineers have created"
|
||||
- "I want to use proven steps from the team library instead of creating my own"
|
||||
- "I want to fork a senior engineer's tree and learn from their approach"
|
||||
- "I want to filter steps by rating to find the best ones"
|
||||
- "I want to see reviews from others who used a step"
|
||||
|
||||
**MSP Manager:**
|
||||
- "I want to curate a set of approved steps for my team"
|
||||
- "I want to see which custom steps are being used most"
|
||||
- "I want to approve steps before they're shared publicly"
|
||||
- "I want to manage categories to keep the step library organized"
|
||||
- "I want to moderate reviews for inappropriate content"
|
||||
|
||||
Reference in New Issue
Block a user