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:
Michael Chihlas
2026-01-27 22:42:22 -05:00
parent 7d96807fb1
commit cd10ecd42c
51 changed files with 9014 additions and 111 deletions

View File

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