diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index 6ade05a1..00000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(tasklist:*)", - "Bash(findstr:*)", - "Bash(powershell -Command:*)", - "Bash(timeout:*)", - "Bash(netstat:*)", - "mcp__postgres__query", - "Bash(curl:*)", - "Bash(TOKEN=\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI0MjdjMDI1Ni00N2VmLTRiODAtYjZjNS1iODE5MDAyMzdhMjkiLCJleHAiOjE3Njk1NjA4NTgsInR5cGUiOiJhY2Nlc3MifQ.7eBGz7awT6BOPbfNv303zm4ERQBeUOGHLRPgQMgwchM\")", - "Bash(git add:*)", - "Bash(git commit:*)", - "Bash(git push:*)", - "Bash(dir /b \"C:\\\\Dev\\\\Projects\\\\patherly\")", - "Bash(npm create:*)", - "Bash(npm install:*)", - "Bash(npx tailwindcss:*)", - "Bash(node node_modules/tailwindcss/lib/cli.js:*)", - "Bash(npm exec:*)", - "Bash(npm uninstall:*)", - "Bash(npm run build:*)", - "Bash(npx tsc:*)", - "Bash(npm run type-check:*)", - "Bash(dir /b frontendsrccomponentssession frontendsrchooks)" - ] - } -} diff --git a/.gitignore b/.gitignore index c7094fe6..19202d12 100644 --- a/.gitignore +++ b/.gitignore @@ -206,6 +206,9 @@ marimo/_static/ marimo/_lsp/ __marimo__/ +# Claude Code (local settings with permissions/tokens) +.claude/settings.local.json + # Railway CLI (local tooling) node_modules/ package.json diff --git a/REBRAND-IMPLEMENTATION-GUIDE.md b/REBRAND-IMPLEMENTATION-GUIDE.md new file mode 100644 index 00000000..1aea6159 --- /dev/null +++ b/REBRAND-IMPLEMENTATION-GUIDE.md @@ -0,0 +1,785 @@ +# 🎨 ResolutionFlow Brand Rebuild - Implementation Guide + +## 📋 Pre-Implementation Checklist + +**Before starting, complete these safety steps:** + +```powershell +cd C:\Dev\Projects\patherly +git add . +git commit -m "Pre-rebrand checkpoint - Patherly working state" +git checkout -b rebrand-to-resolutionflow +``` + +**Copy brand assets:** +- Place all 8 SVG files in: `C:\Dev\Projects\patherly\brand-assets\` + +--- + +## 🎯 Project Context + +**Current State:** +- React + TypeScript + Tailwind CSS project +- Location: `C:\Dev\Projects\patherly\frontend\` +- Using shadcn/ui components +- "Patherly" hardcoded in AppLayout.tsx and LoginPage.tsx +- Default shadcn color scheme (not branded) +- No custom logo/favicon + +**Target State:** +- Complete ResolutionFlow branding +- Purple gradient theme (#818cf8 → #a78bfa) +- Dark mode optimized +- Custom fonts (Plus Jakarta Sans, Inter, Outfit) +- Professional logo in header and favicon + +--- + +## 📦 PHASE 1: Asset Deployment + +### 1.1 Create Asset Directories + +```bash +mkdir -p frontend/public/icons +mkdir -p frontend/src/assets/brand +``` + +### 1.2 Copy Brand Assets + +Copy files from `C:\Dev\Projects\patherly\brand-assets\` to: + +| Source File | Destination | +|------------|-------------| +| `favicon.svg` | `frontend/public/icons/favicon.svg` | +| `icon.svg` | `frontend/public/icons/icon.svg` | +| `app-icon-gradient.svg` | `frontend/public/icons/app-icon-gradient.svg` | +| `logo-horizontal.svg` | `frontend/src/assets/brand/logo-horizontal.svg` | +| `logo-with-tagline.svg` | `frontend/src/assets/brand/logo-with-tagline.svg` | +| `icon.svg` | `frontend/src/assets/brand/icon.svg` | + +### 1.3 Update index.html + +**File:** `frontend/index.html` + +Replace the entire `` section with: + +```html + + + + + ResolutionFlow - Decision Tree Platform + + + + + + + + + + + + + +``` + +--- + +## 🎨 PHASE 2: Tailwind Theme Configuration + +### 2.1 Update Tailwind Config + +**File:** `frontend/tailwind.config.js` + +Replace the entire file with: + +```javascript +/** @type {import('tailwindcss').Config} */ +export default { + darkMode: ["class"], + content: [ + "./index.html", + "./src/**/*.{js,ts,jsx,tsx}", + ], + theme: { + extend: { + colors: { + // ResolutionFlow Brand Colors + brand: { + gradient: { + from: '#818cf8', + to: '#a78bfa', + }, + dark: { + DEFAULT: '#09090b', + card: '#18181b', + surface: '#12121c', + }, + text: { + primary: '#ffffff', + secondary: '#a1a1aa', + muted: '#52525b', + }, + border: '#27272a', + }, + // shadcn/ui color system + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + fontFamily: { + sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'], + heading: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'], + label: ['Outfit', 'system-ui', 'sans-serif'], + }, + backgroundImage: { + 'gradient-brand': 'linear-gradient(90deg, #818cf8 0%, #a78bfa 100%)', + 'gradient-brand-hover': 'linear-gradient(90deg, #6366f1 0%, #9333ea 100%)', + }, + }, + }, + plugins: [], +} +``` + +--- + +## 🎨 PHASE 3: Global Styles + +### 3.1 Update Global CSS + +**File:** `frontend/src/index.css` + +Replace the entire file with: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + /* Light mode (fallback) */ + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + --primary: 243 75% 59%; + --primary-foreground: 210 40% 98%; + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 243 75% 59%; + --radius: 0.75rem; + } + + .dark { + /* ResolutionFlow Dark Theme */ + --background: 240 10% 3.9%; + --foreground: 0 0% 100%; + --card: 240 10% 9.4%; + --card-foreground: 0 0% 100%; + --popover: 240 10% 9.4%; + --popover-foreground: 0 0% 100%; + --primary: 243 75% 59%; + --primary-foreground: 0 0% 100%; + --secondary: 240 5.9% 15%; + --secondary-foreground: 0 0% 100%; + --muted: 240 5.9% 15%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 5.9% 15%; + --accent-foreground: 0 0% 100%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 100%; + --border: 240 5.9% 15%; + --input: 240 5.9% 15%; + --ring: 243 75% 59%; + } +} + +@layer base { + * { + @apply border-border; + } + + body { + @apply bg-background text-foreground; + font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + } + + h1, h2, h3, h4, h5, h6 { + font-family: 'Plus Jakarta Sans', system-ui, sans-serif; + font-weight: 700; + letter-spacing: -0.02em; + } +} + +@layer utilities { + .text-gradient-brand { + @apply bg-gradient-brand bg-clip-text text-transparent; + } +} +``` + +--- + +## 🔧 PHASE 4: Component Updates + +### 4.1 Update AppLayout Component + +**File:** `frontend/src/components/layout/AppLayout.tsx` + +Replace the entire file with: + +```typescript +import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom' +import { useAuthStore } from '@/store/authStore' +import { ThemeToggle } from '@/components/common/ThemeToggle' +import { cn } from '@/lib/utils' + +export function AppLayout() { + const location = useLocation() + const navigate = useNavigate() + const { user, logout } = useAuthStore() + + const handleLogout = async () => { + await logout() + navigate('/login') + } + + const navItems = [ + { path: '/trees', label: 'Trees' }, + { path: '/sessions', label: 'Sessions' }, + { path: '/settings', label: 'Settings' }, + ] + + return ( +
+ {/* Header */} +
+
+
+ + {/* Logo */} + + + + + + + + + + + + + + + + + + + + + {/* Wordmark */} + + Resolution + Flow + + + + +
+ +
+ + {user?.name || user?.email} + + + +
+
+
+ + {/* Main Content */} +
+ +
+
+ ) +} + +export default AppLayout +``` + +### 4.2 Update LoginPage Component + +**File:** `frontend/src/pages/LoginPage.tsx` + +Replace the entire file with: + +```typescript +import { useState } from 'react' +import { Link, useNavigate, useLocation } from 'react-router-dom' +import { useAuthStore } from '@/store/authStore' +import { cn } from '@/lib/utils' + +export function LoginPage() { + const navigate = useNavigate() + const location = useLocation() + const { login, isLoading, error, clearError } = useAuthStore() + + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [localError, setLocalError] = useState('') + + const from = (location.state as { from?: { pathname: string } })?.from?.pathname || '/trees' + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setLocalError('') + clearError() + + if (!email || !password) { + setLocalError('Please enter both email and password') + return + } + + try { + await login({ email, password }) + navigate(from, { replace: true }) + } catch { + // Error is set in the store + } + } + + return ( +
+
+ {/* Header with Logo */} +
+
+ + + + + + + + + + + + + + + + + + + +
+ +

+ Resolution + Flow +

+

+ Decision Tree Platform +

+

+ Sign in to your account +

+
+ +
+
+ {(error || localError) && ( +
+ {localError || error} +
+ )} + +
+ + setEmail(e.target.value)} + className={cn( + 'block w-full rounded-md border border-input bg-background px-3 py-2', + 'text-foreground placeholder:text-muted-foreground', + 'focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20', + 'transition-colors' + )} + placeholder="you@example.com" + /> +
+ +
+ + setPassword(e.target.value)} + className={cn( + 'block w-full rounded-md border border-input bg-background px-3 py-2', + 'text-foreground placeholder:text-muted-foreground', + 'focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20', + 'transition-colors' + )} + placeholder="••••••••••" + /> +
+ + +
+ +

+ Don't have an account?{' '} + + Register + +

+
+
+
+ ) +} + +export default LoginPage +``` + +### 4.3 Update RegisterPage Component + +**File:** `frontend/src/pages/RegisterPage.tsx` + +**Changes needed:** +1. Add the logo SVG before the title (same as LoginPage) +2. Update title to match ResolutionFlow branding +3. Update submit button to use gradient styling + +**Find this section:** +```typescript +
+

Patherly

+

Create your account

+
+``` + +**Replace with:** +```typescript +
+
+ + + + + + + + + + + + + + + + + + + +
+ +

+ Resolution + Flow +

+

+ Decision Tree Platform +

+

+ Create your account +

+
+``` + +**Find the submit button:** +```typescript + +
or continue with
+
+ + +
+ + + + + + +
+ Dashboard +
+
+
+ + + +
+
resolutionflow.com/dashboard
+
+
+ + +
+ Michael +
M
+
+
+
+

Welcome back, Michael

+

Here's what's happening with your troubleshooting workflows

+ +
+
+

Sessions This Week

+

47

+

↑ 12% from last week

+
+
+

Docs Generated

+

43

+

↑ 8% from last week

+
+
+

Avg. Resolution Time

+

4.2m

+

↓ 15% faster

+
+
+ +

Recent Trees

+
+
+
+ + + + + +
+
+

Citrix VDI Troubleshooting

+

24 nodes • Last used 2h ago

+
+ → +
+
+
+ + + + +
+
+

Office 365 Email Issues

+

18 nodes • Last used yesterday

+
+ → +
+
+
+ + + + + +
+
+

Network Connectivity

+

31 nodes • Last used 3 days ago

+
+ → +
+
+
+ + + + + +
+
+

Active Directory Issues

+

22 nodes • Last used 5 days ago

+
+ → +
+
+
+
+
+ + + diff --git a/brand-assets/brand-guide.html b/brand-assets/brand-guide.html new file mode 100644 index 00000000..7b603c37 --- /dev/null +++ b/brand-assets/brand-guide.html @@ -0,0 +1,1081 @@ + + + + + + ResolutionFlow Brand Guide + + + + +
+ +
+ +

From issue to resolution, documented.

+

Brand Guidelines & Identity System

+
+ + +
+
+

01 — Logo

+

Primary Logo

+

The ResolutionFlow logo combines the icon mark with the wordmark. Use the horizontal lockup as the primary logo in most applications.

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + ResolutionFlow + + +
+
+

Primary — Dark Background

+

Use on dark backgrounds (#09090b to #18181b)

+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + ResolutionFlow + + +
+
+

Primary — Light Background

+

Use on light backgrounds (#fafafa to #ffffff)

+
+
+ +
+
+ + + + + + + + + + + + + + + + ResolutionFlow + + +
+
+

Reversed — Gradient Background

+

White version for gradient or colored backgrounds

+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + +
+
+

Icon Only

+

Use when space is limited or brand is established

+
+
+
+
+ + +
+
+

02 — Icon Anatomy

+

Understanding the Mark

+

Every element of the icon has meaning, representing the core value proposition of ResolutionFlow.

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + +
+
    +
  • + 1 +
    +

    Decision Points (Circles)

    +

    Four filled circles represent the choices and decisions made during troubleshooting. Varying opacity shows frequency of use.

    +
    +
    • +
  • + 2 +
    +

    Flow Lines

    +

    Solid lines represent common paths, dotted lines represent less frequent choices. Together they show the decision flow.

    +
    +
    • +
  • + 3 +
    +

    Convergence Node

    +

    The glowing center node represents where all decisions converge into a single resolution. The glow emphasizes this focal point.

    +
    +
    • +
  • + 4 +
    +

    Output Arrow

    +

    The bold arrow represents the final output — the automatically generated documentation that flows from the resolution.

    +
    +
    • +
+
+
+
+ + +
+
+

03 — Color

+

Color Palette

+

A focused palette built around the indigo-to-violet gradient, supported by neutral dark tones.

+
+ +
+
+
+
+

Primary Gradient

+
+ Start: #818cf8 + End: #a78bfa +
+
+
+
+
+
+

Indigo

+
+ HEX: #818cf8 + RGB: 129, 140, 248 +
+
+
+
+
+
+

Violet

+
+ HEX: #a78bfa + RGB: 167, 139, 250 +
+
+
+
+
+
+

Background Dark

+
+ HEX: #09090b + RGB: 9, 9, 11 +
+
+
+
+
+
+

Surface

+
+ HEX: #18181b + RGB: 24, 24, 27 +
+
+
+
+
+
+

White

+
+ HEX: #ffffff + RGB: 255, 255, 255 +
+
+
+
+
+ + +
+
+

04 — Typography

+

Type System

+

Plus Jakarta Sans for headings and brand elements, Inter for body text and UI.

+
+ +
+
+

Display / Logo

+

Plus Jakarta Sans Bold

+

Font-weight: 700 • Letter-spacing: -0.03em

+
+
+

Headings

+

Plus Jakarta Sans Semibold

+

Font-weight: 600 • Letter-spacing: -0.02em

+
+
+

Body Text

+

Inter Regular & Medium

+

The quick brown fox jumps over the lazy dog. ResolutionFlow transforms chaotic technical troubleshooting into guided workflows with automatic documentation generation.

+
+
+
+ + +
+
+

05 — App Icons

+

Application Icons

+

App icons at various sizes for different platforms and use cases.

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + 512×512 (App Store) +
+
+ + + + + + + + + + + + + + + + + + + + + + + Gradient Variant +
+
+ + + + + + + + + + + + + + Favicon (32×32) +
+
+ + + + + + + + + + + + 16×16 +
+
+
+
+ + +
+
+

06 — Usage

+

Do's and Don'ts

+

Guidelines for maintaining brand consistency across all applications.

+
+ +
+
+ Do +
+ + + + + + + + + + + + + + + + + + + + + + ResolutionFlow + + +
+

Use the logo with adequate clear space around it

+
+ +
+ Don't +
+ + + ResolutionFlow + + +
+

Don't change the logo colors

+
+ +
+ Do +
+ + + + + + + + + + + + + + + + + + + +
+

Use the icon alone when brand is established

+
+ +
+ Don't +
+ + + + + + + + + + + + + + + + + + + +
+

Don't rotate or distort the logo

+
+ +
+ Do +
+ + + + + + + + + + + + + +
+

Use white version on gradient backgrounds

+
+ +
+ Don't +
+ + + + + + + + + + + + + + + + + + + +
+

Don't reduce the logo opacity

+
+
+
+ + + +
+ + diff --git a/brand-assets/favicon.svg b/brand-assets/favicon.svg new file mode 100644 index 00000000..3cab7d5d --- /dev/null +++ b/brand-assets/favicon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/brand-assets/icon.svg b/brand-assets/icon.svg new file mode 100644 index 00000000..f0558e0b --- /dev/null +++ b/brand-assets/icon.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/brand-assets/logo-horizontal.svg b/brand-assets/logo-horizontal.svg new file mode 100644 index 00000000..394d1bf4 --- /dev/null +++ b/brand-assets/logo-horizontal.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ResolutionFlow + + diff --git a/brand-assets/logo-with-tagline.svg b/brand-assets/logo-with-tagline.svg new file mode 100644 index 00000000..28b5c811 --- /dev/null +++ b/brand-assets/logo-with-tagline.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ResolutionFlow + + + + + From issue to resolution, documented. + +