feat: Slate & Ice Modern aesthetic redesign (#94)

* chore: update Google Fonts to Bricolage Grotesque, IBM Plex Sans, JetBrains Mono Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * chore: update Tailwind config to Slate & Ice theme colors and fonts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update CSS variables and glass-card utilities for Slate & Ice theme - Replace all color variables with Slate & Ice palette - Add glass system vars (--glass-bg, --glass-blur, --shadow-float) - Replace legacy glass-card with new variable-driven glass classes - Add breatheGlow, bellWobble, slideDown, fadeInRight keyframes - Update font references to IBM Plex Sans and Bricolage Grotesque Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: recolor BrandLogo to cyan gradient, split BrandWordmark for gradient Flow text Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update TopBar with glassmorphism backdrop and cyan accent styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update Sidebar with glassmorphism backdrop Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add ambient atmosphere gradient orbs behind app shell Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: update QuickStats and SessionsPanel with glass-card styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add WeeklyCalendar, QuickActions, OpenSessions, RecentActivity dashboard components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: redesign dashboard layout with calendar, open sessions, and glass-card panels New layout: greeting → calendar+actions → sessions+stats → activity Replaces old QuickStats and SessionsPanel with new dashboard components Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: replace remaining purple hex references with ice-cyan accent Sweep of hardcoded purple hex values (#818cf8, #6366f1) replaced with new cyan accent (#06b6d4) in QuickActions, RecentActivity, QuickLaunch, and SVG brand assets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: update CLAUDE.md branding and design system for Slate & Ice Modern Updated Last Updated date, branding section (fonts, colors, glass utilities, atmosphere orbs), component styling rules, and Design System section to reflect the new ice-cyan glassmorphism theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add Slate & Ice Modern design doc and implementation plan Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: redesign login page with Slate & Ice Modern design system Apply glassmorphism styling, atmosphere orbs, branded wordmark, and consistent design tokens to match the updated app shell aesthetic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: raise TopBar z-index so profile dropdown renders above main content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add AI assistant with in-session copilot and standalone chat with RAG Implements three-phase AI assistant feature: - Phase 0: RAG infrastructure with pgvector embeddings, Voyage AI integration, tree chunking service, and semantic search over team's flow library - Phase 1: In-session copilot panel during flow navigation with contextual AI help, current step awareness, and suggested related flows - Phase 2: Standalone AI chat page with persistent conversation history, pin/delete, and configurable retention policies (account-level) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add account management, email verification, AI fixes, and user guides - Profile settings, account transfer, delete/leave account flows - Email verification with JWT tokens and Resend integration - AI assistant/copilot fixes: markdown rendering, shared RAG helpers, token tracking, input refocus, model_validate usage - User guides hub + detail pages with 13 topic guides - Sidebar and top bar navigation for guides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: prevent stale chunk errors after deployments - Set Cache-Control no-cache on index.html in nginx so browsers always fetch fresh chunk references after a deploy - Auto-reload on chunk load failures (stale deploy detection) with loop prevention via sessionStorage - Show friendly "App Updated" message if auto-reload doesn't resolve it Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add email verification toggle to admin settings Adds platform-level toggle to enable/disable email verification. When disabled, the verification banner is hidden and the send endpoint returns 403. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 20:44:25 -05:00
parent 554ad84d9e
commit 4d2c4930fd
100 changed files with 8181 additions and 466 deletions
--- a/frontend/src/components/common/BrandLogo.tsx
+++ b/frontend/src/components/common/BrandLogo.tsx
@@ -5,42 +5,37 @@ interface BrandLogoProps {
  className?: string
 }

-/**
- * ResolutionFlow brand logo icon — white monochrome.
- * sm (32x32) for header/navbar, lg (80x80) for login/register pages.
- */
 export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
  const sizeClasses = size === 'sm' ? 'h-8 w-8' : 'h-20 w-20'
-
  const strokeBase = size === 'sm' ? 1 : 2
  const strokeThick = size === 'sm' ? 1.25 : 2.5
  const dashArray = size === 'sm' ? '1 1.5' : '2 3'
  const nodeR = size === 'sm' ? { outer: 2.5, inner: 2.75 } : { outer: 5, inner: 5.5 }
  const hubR = size === 'sm' ? { glow: 5, solid: 3.5 } : { glow: 10, solid: 7 }
-
  const vb = size === 'sm' ? '0 0 40 40' : '0 0 80 80'
  const s = size === 'sm' ? 1 : 2
+  const gradId = size === 'sm' ? 'logoGradSm' : 'logoGradLg'
+  const gradEnd = String(40 * (size === 'sm' ? 1 : 2))

  return (
    <svg viewBox={vb} fill="none" className={cn(sizeClasses, className)}>
-      {/* Input nodes */}
-      <circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill="white" opacity="0.35" />
-      <circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill="white" opacity="0.5" />
-      <circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill="white" opacity="0.5" />
-      <circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill="white" opacity="0.35" />
-
-      {/* Connecting lines */}
-      <path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
-      <path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
-      <path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
-      <path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
-
-      {/* Central hub */}
-      <circle cx={18 * s} cy={20 * s} r={hubR.glow} fill="white" opacity="0.15" />
-      <circle cx={18 * s} cy={20 * s} r={hubR.solid} fill="white" />
-
-      {/* Output arrow */}
-      <path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke="white" strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
+      <defs>
+        <linearGradient id={gradId} x1="0" y1="0" x2={gradEnd} y2={gradEnd} gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#06b6d4" />
+          <stop offset="100%" stopColor="#22d3ee" />
+        </linearGradient>
+      </defs>
+      <circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill={`url(#${gradId})`} opacity="0.5" />
+      <circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill={`url(#${gradId})`} opacity="0.7" />
+      <circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill={`url(#${gradId})`} opacity="0.7" />
+      <circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill={`url(#${gradId})`} opacity="0.5" />
+      <path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.4" />
+      <path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" opacity="0.5" />
+      <path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" opacity="0.5" />
+      <path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.4" />
+      <circle cx={18 * s} cy={20 * s} r={hubR.glow} fill={`url(#${gradId})`} opacity="0.15" />
+      <circle cx={18 * s} cy={20 * s} r={hubR.solid} fill={`url(#${gradId})`} opacity="0.9" />
+      <path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
 }
--- a/frontend/src/components/common/BrandWordmark.tsx
+++ b/frontend/src/components/common/BrandWordmark.tsx
@@ -5,20 +5,17 @@ interface BrandWordmarkProps {
  className?: string
 }

-/**
- * ResolutionFlow wordmark — clean white text.
- * sm for header/navbar, lg for login/register pages.
- */
 export function BrandWordmark({ size = 'sm', className }: BrandWordmarkProps) {
  return (
    <span
      className={cn(
-        'font-semibold tracking-tight text-white',
+        'font-heading font-bold tracking-tight',
        size === 'sm' ? 'text-xl' : 'text-3xl',
        className
      )}
    >
-      ResolutionFlow
+      <span className="text-foreground">Resolution</span>
+      <span className="text-gradient-brand">Flow</span>
    </span>
  )
 }
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -1,14 +1,44 @@
+import { useEffect } from 'react'
 import { useRouteError, isRouteErrorResponse, useNavigate } from 'react-router-dom'
 import { cn } from '@/lib/utils'

+function isChunkLoadError(error: unknown): boolean {
+  if (!(error instanceof Error)) return false
+  const msg = error.message.toLowerCase()
+  return (
+    msg.includes('failed to fetch dynamically imported module') ||
+    msg.includes('importing a module script failed') ||
+    msg.includes('loading chunk') ||
+    msg.includes('loading css chunk')
+  )
+}
+
+const RELOAD_KEY = 'rf_chunk_reload'
+
 export function RouteError() {
  const error = useRouteError()
  const navigate = useNavigate()

+  // Auto-reload once on chunk load failures (stale deploy)
+  useEffect(() => {
+    if (isChunkLoadError(error)) {
+      const lastReload = sessionStorage.getItem(RELOAD_KEY)
+      const now = Date.now()
+      // Only auto-reload if we haven't reloaded in the last 10 seconds (prevent loops)
+      if (!lastReload || now - Number(lastReload) > 10_000) {
+        sessionStorage.setItem(RELOAD_KEY, String(now))
+        window.location.reload()
+      }
+    }
+  }, [error])
+
  let errorMessage = 'An unexpected error occurred'
  let errorDetails = ''

-  if (isRouteErrorResponse(error)) {
+  if (isChunkLoadError(error)) {
+    errorMessage = 'App Updated'
+    errorDetails = 'A new version was deployed. Please refresh the page.'
+  } else if (isRouteErrorResponse(error)) {
    errorMessage = error.status === 404 ? 'Page not found' : `Error ${error.status}`
    errorDetails = error.statusText || ''
  } else if (error instanceof Error) {