From 78b4242a76cbb2a09f1e46e87f8cd79bb2d5cd36 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 14:22:58 -0500
Subject: [PATCH] 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>
---
 frontend/src/api/accounts.ts               |  2 +-
 frontend/src/api/client.ts                 | 14 ++++++------
 frontend/src/components/layout/Sidebar.tsx |  2 +-
 frontend/src/pages/StepLibraryPage.tsx     | 25 ++++++++++++++++++++++
 frontend/src/pages/TreeLibraryPage.tsx     |  4 ++--
 frontend/src/router.tsx                    |  9 ++++++++
 frontend/src/store/authStore.ts            |  6 ++++--
 7 files changed, 50 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/pages/StepLibraryPage.tsx

diff --git a/frontend/src/api/accounts.ts b/frontend/src/api/accounts.ts
index 943d4481..3e1e3b04 100644
--- a/frontend/src/api/accounts.ts
+++ b/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
   },
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index cf57d557..540d69dc 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -32,13 +32,15 @@ function handleGlobalError(error: AxiosError) {
     return
   }
 
-  // Client errors (4xx)
+  // Rate limit
+  if (status === 429) {
+    toast.error(data?.detail || 'Too many requests — please try again shortly')
+    return
+  }
+
+  // Client errors (4xx) — show backend detail if present
   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)
-    }
+    toast.error(data?.detail || 'Invalid request')
     return
   }
 
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index da359cb8..394d5e58 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -172,7 +172,7 @@ export function Sidebar() {
             <NavItem href="/my-trees" icon={PenLine} label="Flow Editor" />
             <NavItem href="/sessions" icon={Clock} label="Sessions" badge={activeSessionCount || undefined} />
             <NavItem href="/shares" icon={FileText} label="Exports" />
-            <NavItem href="/step-library" icon={Bookmark} label="Step Library" badge="dot" />
+            <NavItem href="/step-library" icon={Bookmark} label="Step Library" />
             <NavItem href="/analytics" icon={BarChart3} label="Analytics" />
           </div>
 
diff --git a/frontend/src/pages/StepLibraryPage.tsx b/frontend/src/pages/StepLibraryPage.tsx
new file mode 100644
index 00000000..5592c7d8
--- /dev/null
+++ b/frontend/src/pages/StepLibraryPage.tsx
@@ -0,0 +1,25 @@
+import { Bookmark } from 'lucide-react'
+
+export default function StepLibraryPage() {
+  return (
+    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+      <div className="mb-8">
+        <div className="flex items-center gap-3">
+          <span title="Step Library"><Bookmark className="h-8 w-8 text-muted-foreground" /></span>
+          <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Step Library</h1>
+        </div>
+        <p className="mt-2 text-muted-foreground">Reusable steps for your flows — coming soon.</p>
+      </div>
+
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <div className="rounded-full bg-primary/10 p-4 mb-4">
+          <Bookmark className="h-8 w-8 text-primary" />
+        </div>
+        <h2 className="text-lg font-semibold text-foreground mb-2">Coming Soon</h2>
+        <p className="max-w-md text-sm text-muted-foreground">
+          The Step Library will let you create, share, and reuse common troubleshooting steps across all your flows.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 3a2c1610..28f0635b 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -75,7 +75,7 @@ export function TreeLibraryPage() {
   const lastSessionData = (() => {
     const raw = safeGetItem('last-session')
     if (!raw) return null
-    try { return JSON.parse(raw) as { tree_id: string; tree_name: string; client_name: string; ticket_number: string } }
+    try { return JSON.parse(raw) as { tree_id: string; tree_name: string; client_name: string; ticket_number: string; tree_type?: string } }
     catch { return null }
   })()
 
@@ -450,7 +450,7 @@ export function TreeLibraryPage() {
           {lastSessionData && (
             <div className="mb-6">
               <button
-                onClick={() => navigate(`/trees/${lastSessionData.tree_id}/navigate`, {
+                onClick={() => navigate(getSessionResumePath(lastSessionData.tree_id, lastSessionData.tree_type), {
                   state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
                 })}
                 className={cn(
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 2a282460..18f99a8e 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -31,6 +31,7 @@ const MySharesPage = lazy(() => import('@/pages/MySharesPage'))
 const TeamAnalyticsPage = lazy(() => import('@/pages/TeamAnalyticsPage'))
 const MyAnalyticsPage = lazy(() => import('@/pages/MyAnalyticsPage'))
 const FeedbackPage = lazy(() => import('@/pages/FeedbackPage'))
+const StepLibraryPage = lazy(() => import('@/pages/StepLibraryPage'))
 const AccountSettingsPage = lazy(() => import('@/pages/AccountSettingsPage'))
 // Admin pages
 const AdminLayout = lazy(() => import('@/components/admin/AdminLayout'))
@@ -235,6 +236,14 @@ export const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'step-library',
+        element: (
+          <Suspense fallback={<PageLoader />}>
+            <StepLibraryPage />
+          </Suspense>
+        ),
+      },
       // Admin routes
       {
         path: 'admin',
diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
index f057abf8..5053fcbe 100644
--- a/frontend/src/store/authStore.ts
+++ b/frontend/src/store/authStore.ts
@@ -48,7 +48,8 @@ export const useAuthStore = create<AuthState>()(
           // Fetch user info
           await get().fetchUser()
         } catch (error: unknown) {
-          const message = error instanceof Error ? error.message : 'Login failed'
+          const axiosErr = error as { response?: { data?: { detail?: string } } }
+          const message = axiosErr.response?.data?.detail || (error instanceof Error ? error.message : 'Login failed')
           set({ error: message, isLoading: false })
           throw error
         }
@@ -61,7 +62,8 @@ export const useAuthStore = create<AuthState>()(
           // After registration, log the user in
           await get().login({ email: data.email, password: data.password })
         } catch (error: unknown) {
-          const message = error instanceof Error ? error.message : 'Registration failed'
+          const axiosErr = error as { response?: { data?: { detail?: string } } }
+          const message = axiosErr.response?.data?.detail || (error instanceof Error ? error.message : 'Registration failed')
           set({ error: message, isLoading: false })
           throw error
         }