fix: UX deep dive — 28 fixes across authoring, navigation, consistency, and cleanup (#86)

* fix: tree editor authoring blockers - scroll trap, form density, branching hint

- Replace fixed viewport height with flex layout in NodeEditorPanel
- Make footer sticky so Save/Cancel always reachable
- Compact root node banner to single-line with InfoTip tooltip
- Reduce resolution note from callout box to inline text
- Add answer-first branching hint below options label

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

* fix: broken functionality - auth errors, toast logic, role update, routing, step library

- Extract backend error detail in auth store login/register
- Fix inverted 4xx toast logic and add 429 rate limit handling
- Send account_role field to match backend schema in role update
- Use type-aware routing for Repeat Last Session button
- Add step library placeholder page and route, remove dot badge

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

* fix: navigation correctness - back buttons, exit dialog, dedup nav, redirects

- Standardize all procedural back/exit paths to /trees (not /my-trees)
- Add exit button with ConfirmDialog to procedural session top bar
- Consolidate duplicate account links in sidebar and topbar
- Auto-redirect non-owners to personal analytics
- Add toast feedback before silent permission redirects in tree editor
- Delete orphaned AdminCategoriesPage

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

* refactor: shared components, ConfirmDialog migration, pinned flow fixes

- Create shared Spinner component with sm/md/lg sizes
- Migrate 13 page-level spinners to shared Spinner
- Promote EmptyState to shared component, adopt in MyShares and SessionHistory
- Replace window.confirm with ConfirmDialog in 3 files
- Fix PinnedFlow.tree_type to include maintenance, update emoji display
- Verify sidebar unpin handler already correct (no-op)

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

* fix: visual consistency - toasts, typography, focus rings, container padding

- Remove richColors from Sonner toasts, limit stacking to 3
- Add font-heading to all page H1s (7 files)
- Add font-label (Outfit) to TagBadges component
- Fix focus ring tokens on analytics pages
- Replace deprecated glass-stat with design system tokens
- Standardize container padding on analytics pages

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

* fix: backend alignment - remove drafts toggle, clean dead code, truncation indicator

- Remove non-functional drafts toggle and clean TreeFilters type
- Fix AccountInvite type to match backend schema
- Remove dead API methods: pinnedFlows.pin/reorder, trees.getSharedTree
- Remove unused types: SessionListResponse, RatingCreate.is_verified_use
- Add session list truncation indicator with size=51 lookahead

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

* fix: remove bg-black from PageLoader and RouteError, fix PageLoader height

PageLoader used h-screen inside a grid cell, causing it to overflow.
Changed to h-full so it fits within the main-content area. Removed
bg-black from both PageLoader and RouteError in favor of theme-aware
bg-background to prevent black flash during lazy loading.

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

* fix: guard against Pydantic validation error objects in toast/error messages

FastAPI returns `detail` as an array of objects for 422 validation errors,
not a string. Passing these objects to toast.error() or rendering them in
JSX crashes React with Error #31 ("Objects are not valid as a React child").
Now checks typeof detail === 'string' before using it.

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

* fix: toast styling, node editor first-click, action node placeholder pattern

1. Toast fixes: Add theme="dark" to Sonner, use !important CSS overrides
   instead of zero-specificity :where() selectors, suppress noisy 4xx
   global toasts (pages handle their own errors)

2. Node editor first-click: Add node.type to draft initialization
   useEffect deps so draft resets when answer stub converts to real type

3. Action node redesign: Remove NodePicker dropdown, auto-create answer
   placeholder on save (matching decision node pattern). Users click the
   placeholder on canvas to choose type and fill in details.

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

* fix: auto-seed test users when release command fails on PR envs

The background seeder now creates users directly via DB if login fails,
instead of silently aborting. This handles Railway PR environments where
the releaseCommand may not execute properly.

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

* fix: remove categories/tags from sidebar to prevent footer clipping

Categories and Tags sections were pushing Feedback, Account, and
Collapse off-screen when All Flows expanded its children. These
filters already exist on the TreeLibraryPage, so the sidebar
duplicates were removed.

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

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/api/accounts.ts

@@ -25,7 +25,7 @@ export const accountsApi = {
   async updateMemberRole(userId: string, role: string): Promise<AccountMember> {
     const response = await apiClient.patch<AccountMember>(
       `/accounts/me/members/${userId}/role`,
-      { role }
+      { account_role: role }
     )
     return response.data
   },

frontend/src/api/client.ts

@@ -25,20 +25,28 @@ function handleGlobalError(error: AxiosError) {
   }
 
   const status = error.response.status
-  const data = error.response.data as { detail?: string }
+  const data = error.response.data as { detail?: string | unknown[] }
+
+  // Extract a displayable error message from the response.
+  // FastAPI returns `detail` as a string for most errors, but 422 validation
+  // errors return an array of objects — we must not pass those to toast.
+  const detail = typeof data?.detail === 'string' ? data.detail : undefined
 
   // Don't show toast for 401 (handled by refresh interceptor)
   if (status === 401) {
     return
   }
 
-  // Client errors (4xx)
+  // Rate limit — always worth notifying
+  if (status === 429) {
+    toast.error(detail || 'Too many requests — please try again shortly')
+    return
+  }
+
+  // Client errors (4xx) — don't toast globally.
+  // Pages handle their own 4xx errors (permission checks, validation, not-found)
+  // and many are caught silently. Global toasts here cause noisy duplicates.
   if (status >= 400 && status < 500) {
-    const message = data?.detail || 'Invalid request'
-    // Only show generic messages - pages handle specific errors
-    if (!data?.detail) {
-      toast.error(message)
-    }
     return
   }
 

frontend/src/api/pinnedFlows.ts

@@ -4,7 +4,7 @@ export interface PinnedFlow {
   id: string
   tree_id: string
   tree_name: string
-  tree_type: 'troubleshooting' | 'procedural'
+  tree_type: 'troubleshooting' | 'procedural' | 'maintenance'
   category_emoji?: string
   category_name?: string
   pinned_at: string
@@ -22,19 +22,9 @@ export const pinnedFlowsApi = {
     return data
   },
 
-  pin: async (treeId: string): Promise<PinnedFlow> => {
-    const { data } = await apiClient.post(`/trees/${treeId}/pin`)
-    return data
-  },
-
   unpin: async (treeId: string): Promise<void> => {
     await apiClient.delete(`/trees/${treeId}/pin`)
   },
-
-  reorder: async (order: { tree_id: string; display_order: number }[]): Promise<PinnedFlowsResponse> => {
-    const { data } = await apiClient.patch('/trees/pinned/reorder', { order })
-    return data
-  },
 }
 
 export default pinnedFlowsApi

frontend/src/api/sessions.ts

@@ -15,14 +15,6 @@ export interface SessionListParams {
   completed_before?: string
 }
 
-export interface SessionListResponse {
-  items: Session[]
-  total: number
-  page: number
-  size: number
-  pages: number
-}
-
 export const sessionsApi = {
   async list(params?: SessionListParams): Promise<Session[]> {
     const response = await apiClient.get<Session[]>('/sessions', { params })

frontend/src/api/trees.ts

@@ -1,5 +1,5 @@
 import apiClient from './client'
-import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, SharedTree, TreeValidationResponse } from '@/types'
+import type { Tree, TreeListItem, TreeCreate, TreeUpdate, TreeFilters, TreeShareCreate, TreeShare, TreeVisibilityUpdate, TreeValidationResponse } from '@/types'
 
 export const treesApi = {
   async list(params?: TreeFilters): Promise<TreeListItem[]> {
@@ -60,11 +60,6 @@ export const treesApi = {
     return response.data
   },
 
-  async getSharedTree(shareToken: string): Promise<SharedTree> {
-    const response = await apiClient.get<SharedTree>(`/shared/${shareToken}`)
-    return response.data
-  },
-
   // Tree validation
   async canPublish(id: string): Promise<TreeValidationResponse> {
     const response = await apiClient.post<TreeValidationResponse>(`/trees/${id}/can-publish`)