feat: analytics dashboards & two-tier feedback system (#78)

* docs: add analytics & user feedback design document

Covers team analytics, personal analytics, flow analytics,
step-level thumbs up/down feedback, and flow CSAT ratings.

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

* docs: add analytics & feedback implementation plan

12-task TDD plan covering session ratings, step feedback,
team/personal/flow analytics endpoints, and frontend pages.

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

* feat: add session_ratings table and analytics indexes

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

* feat: add SessionRating model and analytics schemas

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

* feat: add session CSAT rating endpoint with tests

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

* feat: add step thumbs feedback and /ratings alias routes

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

* feat: add team, personal, and flow analytics endpoints

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

* feat: add recharts, analytics types, and API client

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

* feat: add inline step thumbs up/down feedback during sessions

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

* feat: add CSAT rating modal after session completion

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

* feat: add Team Analytics page with charts and leaderboards

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

* feat: add Flow Analytics panel with step dropoff and CSAT data

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

* feat: add My Analytics page with personal stats and charts

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 #78.
This commit is contained in:
chihlasm
2026-02-16 15:23:14 -05:00
committed by GitHub
parent 293ceaa9e9
commit bd12ced5ee
29 changed files with 4856 additions and 5 deletions

View File

@@ -1,7 +1,7 @@
import { useEffect, useState, useCallback } from 'react'
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } from 'lucide-react'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3 } from 'lucide-react'
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
import { treesApi } from '@/api/trees'
import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -13,6 +13,7 @@ import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
import { usePermissions } from '@/hooks/usePermissions'
import { cn, safeGetItem } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { FlowAnalyticsPanel } from '@/components/analytics/FlowAnalyticsPanel'
export function TreeEditorPage() {
const { id } = useParams<{ id: string }>()
@@ -46,6 +47,7 @@ export function TreeEditorPage() {
const [showDraftPrompt, setShowDraftPrompt] = useState(false)
const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
const [showAnalytics, setShowAnalytics] = useState(false)
// Mobile detection
const [isMobile, setIsMobile] = useState(false)
@@ -538,6 +540,23 @@ export function TreeEditorPage() {
<div className="mx-2 h-6 w-px bg-border" />
{/* Analytics toggle (only for existing trees) */}
{isEditMode && (
<button
onClick={() => setShowAnalytics(!showAnalytics)}
title="Toggle flow analytics panel"
className={cn(
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
showAnalytics
? 'bg-accent text-foreground'
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
)}
>
<BarChart3 className="h-4 w-4" />
Analytics
</button>
)}
{/* Validate */}
<button
onClick={handleManualValidate}
@@ -594,6 +613,13 @@ export function TreeEditorPage() {
{/* Main Editor */}
<TreeEditorLayout isMobile={isMobile} />
{/* Flow Analytics Panel (collapsible) */}
{showAnalytics && id && (
<div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
<FlowAnalyticsPanel treeId={id} />
</div>
)}
</div>
)
}