chihlasm 357f8e2d08 feat: sidebar redesign — activity feed, grouped nav, AI split (#107)
* docs: add 5 sidebar icon color concepts for UX review

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(ui): add semantic icon colors and updated icons to sidebar nav

Swap generic icons for more descriptive alternatives (Network, Wrench,
FileOutput, Library, Code2, Lightbulb) and assign each nav item a unique
semantic color for instant visual landmarks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(ui): default Sessions page to Active tab, reorder tabs

Active sessions are what engineers care about most. Tab order is now
Active, Prepared, Completed, All.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: add sidebar grouping and AI naming concept mockups

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: add sidebar redesign context and decision summary

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: add sidebar redesign spec and implementation plan

Design spec covers: activity zone with daily stats + session feed,
nav grouping (Resolve/Build/Insights), AI split (FlowPilot + Flow Assist),
pinned flows removal. Implementation plan has 5 chunks, 12 tasks, 39 steps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add sidebar stats Pydantic schemas

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* test: add failing tests for sidebar stats endpoint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add sidebar stats endpoint with daily stats and activity feed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add sidebar API client, stats bar, activity feed components

New components: SidebarStatsBar, SidebarActivityFeed, ActivityItem.
New API client for sidebar stats endpoint. Pulse-dot CSS animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: restructure sidebar with stats bar, activity feed, and grouped nav

Dashboard-first layout with Resolve/Build/Insights groups.
AI split: FlowPilot (Resolve) + Flow Assist (Build).
Stats bar: Resolved/Active/In Session daily counters.
Activity feed: active sessions with CW ticket #, recent completions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* refactor: remove pinned flows frontend (PinnedFlowsSection, store, API, pin buttons)

Removed: PinnedFlowsSection component, pinnedFlowsStore, pinnedFlows API client.
Cleaned: pin buttons from TreeGridView, TreeListView, TreeTableView.
Cleaned: favorites section from QuickStartPage, pin props from TreeLibraryPage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add FlowAssistPage placeholder and /flow-assist route

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: real-time sidebar stats via session-changed events

Sidebar now refreshes stats when sessions are created or completed,
not just on page navigation. Uses window event bus pattern (same as
folder-changed events in codebase).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: live-ticking In Session timer using active session start times

SidebarStatsBar now computes active session elapsed time client-side
from started_at timestamps, ticking every 60s. Backend only returns
completed session minutes to avoid double-counting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: sidebar In Session timer ticks every second and shows seconds

Timer now uses 1s interval (not 60s) and displays seconds when under
a minute so it matches the session timer in the flow UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: trigger PR environment redeploy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* debug: add console.log to SidebarStatsBar for timer investigation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: parse sidebar timestamps as UTC (append Z suffix)

Backend returns naive UTC timestamps without timezone indicator.
JS Date() treats bare ISO strings as local time, causing the timer
to compute negative elapsed time (future timestamps). Appending 'Z'
forces UTC parsing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: rename 'In Session' to 'Total Time' for clarity

Makes it clear the timer is an aggregate of all sessions today,
not just the current one.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-16 01:35:16 -04:00

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

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
Readme 16 MiB
Languages
Python 54.7%
TypeScript 43.5%
HTML 1.1%
CSS 0.6%