5095b0d8df6ec443da1c5f5320dbf0ce2b03e150
* refactor: adopt shared Input/Textarea components across 15 files Replace 42 raw <input>/<textarea> elements with <Input>/<Textarea> from components/ui/. Consistent focus states, error handling, and styling across all form fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: replace hardcoded rgba/hex colors with Tailwind tokens - rgba(255,255,255,0.xx) → bg-white/[0.xx], border-white/[0.xx] - rgba(6,182,212,0.3) → border-primary/30 (focus states) - #0a0a0a → bg-background - Inline style hex colors → var(--color-primary), var(--color-brand-gradient-to) - 28 files updated, zero hardcoded rgba() patterns remaining Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add PageMeta to 16 pages for SEO and proper browser tab titles Public pages (Login, Register, Forgot/Reset Password, Verify Email, Survey Thank You) get descriptions for SEO. Authenticated pages (Dashboard, Flow Library, My Flows, Session History, AI Assistant, Account Settings, Step Library, My Shares, Feedback, Guides) get proper tab titles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add page transitions and staggered list animations - ViewTransitionOutlet: wraps Outlet with fade-in-up animation keyed to route path. Sidebar/topbar stay still, only content area animates. - StaggerList: reusable component that cascades children with incremental delay (50ms default). Pure CSS via @utility stagger-item. - Applied stagger to TreeGridView, MyTreesPage cards, SessionHistoryPage. - New stagger-fade-in keyframe in @theme block. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: ViewTransitionOutlet needs h-full for React Flow canvas The wrapper div broke the height chain needed by TreeEditorPage's h-full layout, causing React Flow canvas to collapse to zero height. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: main-content flex layout for tree editor + scrollable pages Main content area is now flex-col so the ViewTransitionOutlet wrapper gets an explicit computed height via flex-1 min-h-0. This makes h-full resolve correctly in the tree editor (React Flow canvas) while still allowing overflow-y-auto scrolling for normal pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: resolve ESLint errors in Button and Skeleton components - Button: suppress react-refresh/only-export-components for buttonVariants re-export - Skeleton: replace empty interface with type alias, replace Math.random() with static widths array Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add PageMeta, animation classes, and layout fixes to remaining pages Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
ResolutionFlow
Take the path MOST traveled.
ResolutionFlow is a SaaS platform for MSP professionals that provides guided troubleshooting flows, captures decisions and notes as you work, and generates professional ticket documentation with one click.
Production: resolutionflow.com
The Problem
MSP engineers face constant context switching between diverse technical issues — file shares, server outages, VPN failures, Active Directory problems. This creates:
- Cognitive overload — 15-25 minutes to regain focus after each context switch
- Inconsistent documentation — under pressure, notes are rushed or incomplete
- Lost tribal knowledge — best troubleshooting paths live only in senior engineers' heads
- Repeated work — same issues investigated from scratch each time
The Solution
An intelligent flow system that:
- Guides engineers through proven troubleshooting paths
- Captures decisions and notes automatically as you work
- Generates professional ticket documentation with one click
- Builds institutional knowledge that improves over time
- Reduces cognitive load during high-stress situations
Features
Flow Types
- Troubleshooting Flows — Decision trees with branching paths for diagnosing issues
- Procedural Flows (Projects) — Step-by-step checklists for structured processes (onboarding, migrations, deployments)
- Maintenance Flows — Scheduled recurring tasks with batch execution across multiple targets
Flow Editor
- Form-based node editor with live canvas preview (React Flow + dagre layout)
- Decision nodes (yes/no, multiple choice), action nodes, answer nodes
- Cross-reference / loop-back support — link any node to any other node for re-verification patterns
- Undo/redo, validation warnings, drag-to-reorder
- Markdown support in descriptions and help text
AI Flow Assist
- Conversational AI builder — describe what you need, get a complete flow generated
- Multi-phase interview (scope, structure, details) with progressive tree generation
- Live preview updates as the AI builds your flow
- Save directly to your flow library
Session Engine
- Step-by-step guided navigation with notes capture at each decision point
- Session timer, keyboard shortcuts, scratchpad overlay (Ctrl+/)
- Auto-recovery for interrupted sessions
- Session sharing via link (authenticated and public views)
- Export to Markdown, plain text, or HTML with configurable detail levels, editable preview, and sensitive data redaction
Organization & Management
- Categories, tags (autocomplete), user folders (3-level hierarchy)
- Full-text search across all flows
- Pinned flows for quick access
- Grid, list, and table views
Team & Admin
- Role-based access control (super_admin, team_admin, engineer, viewer)
- Admin panel — user management, invite codes, audit logs, feature flags, plan limits
- Team-scoped visibility and permissions
Step Library
- Shared library of reusable troubleshooting steps
- Search, ratings, reviews, verified-use badges
- Private, team, and public visibility levels
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, Vite, Tailwind CSS v3 |
| State | Zustand (immer + zundo for undo/redo) |
| Routing | React Router v7 |
| Canvas | @xyflow/react (React Flow) + dagre |
| Backend | Python FastAPI, async SQLAlchemy 2.0 + asyncpg |
| Database | PostgreSQL 16 |
| Migrations | Alembic |
| Auth | JWT (python-jose) + bcrypt, refresh token rotation |
| AI | Anthropic Claude API |
| Scheduling | APScheduler 3.x (async) |
| Hosting | Railway (auto-deploy on push to main) |
Project Structure
patherly/
├── backend/
│ ├── app/
│ │ ├── main.py # FastAPI entry point
│ │ ├── api/endpoints/ # Route handlers
│ │ ├── api/deps.py # Auth dependencies
│ │ ├── api/router.py # Route registration
│ │ ├── core/ # Config, database, permissions, security, AI services
│ │ ├── models/ # SQLAlchemy models
│ │ └── schemas/ # Pydantic schemas
│ ├── alembic/ # Database migrations
│ ├── scripts/ # Seed data scripts
│ └── tests/ # pytest integration tests (100+)
├── frontend/
│ ├── src/
│ │ ├── api/ # Axios client + endpoint modules
│ │ ├── components/ # UI components by domain
│ │ ├── hooks/ # Custom React hooks
│ │ ├── pages/ # Page components
│ │ ├── store/ # Zustand stores
│ │ └── types/ # TypeScript interfaces
│ └── tailwind.config.js
├── CLAUDE.md # AI assistant project context
├── CURRENT-STATE.md # Detailed feature status
├── 03-DEVELOPMENT-ROADMAP.md # Development roadmap
└── docs/plans/ # Design docs & implementation plans
Development Setup
Prerequisites
- Docker (for PostgreSQL)
- Python 3.11+
- Node.js 18+
Quick Start
# Start PostgreSQL
docker start patherly_postgres
# Backend
cd backend
python -m venv venv
source venv/bin/activate # or .\venv\Scripts\Activate on Windows
pip install -r requirements.txt
alembic upgrade head
uvicorn app.main:app --reload
# Frontend (separate terminal)
cd frontend
npm install
npm run dev
URLs
- Frontend: http://localhost:5173
- Backend API: http://localhost:8000
- API Docs: http://localhost:8000/api/docs
Running Tests
# Backend (from backend/)
pytest --override-ini="addopts="
# Frontend type check
cd frontend && npm run build
Roadmap
See 03-DEVELOPMENT-ROADMAP.md for the full roadmap.
Current focus:
- Step Library frontend UI
- Procedural flows lifecycle improvements
Next up:
- Quick Actions Dashboard (#70)
- Tree Effectiveness Dashboard (#61)
- PSA Integration — ConnectWise / Autotask (#63)
License
Proprietary. All rights reserved.
Description
Troubleshooting decision tree application for MSP engineers - automatically generates professional documentation from guided diagnostic workflows
Languages
Python
54.7%
TypeScript
43.5%
HTML
1.1%
CSS
0.6%