refactor: dashboard design critique fixes #122

Merged
chihlasm merged 13 commits from refactor/dashboard-design-critique into main 2026-03-30 04:39:37 +00:00

13 Commits

Author SHA1 Message Date
chihlasm
431a0893bf docs: add CHANGELOG entry and CLAUDE.md lessons 104-105
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 04:38:36 +00:00
chihlasm
56b3f877c1 fix: pre-landing and adversarial review fixes
- landing.css: hardcode --lp-btn to #60a5fa (lesson 104 — no var(--color-*) in landing.css)
- ScriptBuilderInput: suggestion chips now correctly disabled during generation
- ChatSidebar: wrapper onClick no longer fires onSelect while in confirming state
- SessionHistoryPage: fix loadMoreAiSessions race condition with generation counter;
  flow session tab auto-activates when URL params target flow session filters

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 04:38:33 +00:00
chihlasm
930a21b2b6 refactor: redesign landing page — break AI-template monotony, add FAQ, fix trust signals
Bold layout overhaul based on design critique:
- Left-aligned hero with two-column layout (text + app preview)
- Asymmetric problem section (headline left, cards right)
- Zigzag How It Works layout (alternating text/visual sides)
- FlowPilot highlight card + 3+2 feature grid
- New FAQ section (5 questions: ChatGPT comparison, data safety, PSA, sessions, AI accuracy)
- Founder quote replaces anonymous testimonial
- Removed ambient glow + grid pattern (design system violations)
- Self-contained color palette (--lp-* vars, no invisible text-secondary)
- 8px border radius aligned to design system
- Alternating section backgrounds replace divider lines
- Form: client-side validation, persistent errors, aria-live
- Skip-to-content link, semantic <main>, FAQ aria-expanded
- Pricing CTAs pass plan context (?plan=free|pro|team)
- Code elements in chat mock properly styled (JetBrains Mono)
- FAQ uses grid-template-rows for smooth height animation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 03:30:10 +00:00
chihlasm
841ce8d4ee fix: make landing page animations more dramatic and noticeable
- Slower chat stagger (1.2s between lines, not 0.6s) so each message
  is clearly individual and watchable
- Messages slide in from left (translateX -20px) not just fade up
- Typing indicator is bigger with blue tinted background, border,
  and "FlowPilot is thinking..." label
- Typing indicator holds for 3s before collapsing (was 1.8s)
- App preview has cinematic entrance (scale 0.95 → 1 + translateY)
- AI responses wait until typing indicator finishes, then cascade
- Doc confirmation has extra pause before appearing (9.6s total)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 02:20:42 +00:00
chihlasm
bc43f53633 feat: overdrive landing page — live chat animation + scroll-driven reveals
A) Live App Preview:
- Chat messages animate in with staggered timing (0.6s apart)
- Typing indicator with bouncing dots appears before AI response,
  then fades out as the response lines arrive
- Sidebar items stagger in during the entrance sequence
- Creates a "show don't tell" demo moment in the hero

B) Scroll-Driven Enhancements (@supports animation-timeline):
- Sections use CSS scroll-driven animations instead of JS IntersectionObserver
- Problem cards, feature cards, pricing cards, and step cards stagger
  within their parent as they enter the viewport
- Social proof bar has subtle parallax drift
- Falls back to existing JS-based reveal for Firefox/older browsers

Accessibility:
- prefers-reduced-motion removes all chat animations, shows content
  immediately, hides typing indicator entirely

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 02:13:41 +00:00
chihlasm
d67af71b4c fix: tag badges and buttons using bg-accent with unreadable text
bg-accent (#f97316 orange) with text-muted-foreground (#848b9b gray)
is nearly invisible. Replaced with bg-elevated + border pattern for
readable contrast across TagBadges, StepForm, StepDetailModal, and
StepLibraryBrowser. Also fixed emerald → success-dim token.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 02:04:16 +00:00
chihlasm
0484a1cb12 fix: restore removed icon imports in MyTreesPage, add default export to SessionHistoryPage
- FolderTree, Plus, ListOrdered, Wrench are still used in empty state
  and tree card rendering — restore the imports
- SessionHistoryPage needs default export for lazyWithRetry

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 01:54:48 +00:00
chihlasm
bf902a4f02 refactor: simplify Create Flow dropdown, remove maintenance flow from UI
- Simplify CreateFlowDropdown to 2 clean items: Troubleshooting Flow
  and Procedural Flow (removed 4 AI-assist entries + 1 orphaned duplicate)
- Rename "Troubleshooting Tree" → "Troubleshooting Flow" (per branding)
- Remove Maintenance Flow option from MyTreesPage (hidden for pilot)
- Replace MyTreesPage inline dropdown with shared CreateFlowDropdown
- Remove unused aiEnabled prop, useCachedQuota import, showCreateMenu state

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 01:51:30 +00:00
chihlasm
32d48146bf refactor: Script Library and Builder design critique fixes
Library:
- Clear CTA hierarchy: "Build New Script" primary, "Import Script" ghost,
  "Manage" demoted to text link
- "New from Script" → "Import Script" (clearer label)

Script Builder:
- Add suggestion chips for first-time users (4 common MSP tasks)
- Chips auto-hide after first message

Design system normalization:
- ScriptPreviewModal: bg-black/80 → bg-black/40, text-blue-400 → text-accent-text,
  emerald save button → primary, inline rgba → CSS variables
- ScriptCodeBlock: bg-[rgba(0,0,0,0.3)] → bg-code, text-blue-400 → text-accent-text,
  text-text-muted typo fixed, emerald button → ghost style
- TemplateCard: emerald/amber/rose badges → success-dim/warning-dim/danger-dim,
  ShieldAlert amber → warning token
- ParameterDetectorStepper: blue focus ring → orange, amber → warning token,
  "Candidate" → "Variable" in stepper progress

Jargon clarification:
- "Detect Parameters" → "Find Variables"
- "Detected Parameters" → "Configurable Variables"
- "Parameters (N)" → "Variables (N)"
- Detection summary copy reworded for clarity

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 01:26:35 +00:00
chihlasm
9ce4a8bc8e refactor: redesign Session History with tabs + Load More, improve Escalation Queue urgency
Session History:
- Split into AI Sessions / Flow Sessions tabs (AI default)
- Load More pagination (25 per page) instead of 50-item hard cap
- Dynamic problem domain filter from actual session data
- Fix all blue focus rings to ember orange
- Fix badge colors to use design system tokens

Escalation Queue:
- Add wait-time color coding (muted <1h, amber 1-4h, red >4h)
- Sort oldest-first for triage urgency
- Compact right-aligned pickup button
- Widen container, dynamic session count in subtitle
- Fix typos and non-system color tokens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 00:34:38 +00:00
Michael Chihlas
37179096b0 refactor: assistant page — TaskLane UX + ChatSidebar improvements
TaskLane:
- Simplify action buttons: merge "Paste Result"/"Type Answer" into single
  primary button, make "Skip" icon-only (reduces decision points from 3→1)
- Strengthen done state: solid left-border success green + checkmark icon
  instead of faint tint that nearly disappears
- Boost progress bar: 3px→5px, better contrast colors, inline count label
- Differentiate from ChatSidebar: use bg-page instead of bg-sidebar,
  add accent top-border to signal "active workspace"
- Make skipped tasks clickable to un-skip (matching done→reopen pattern)
- Fix slide-in animation: add slide-in-from-right keyframe
- Fix duplicate style props, stray quote from replace_all
- Consolidate 6 grip dot divs to Array.from loop

ChatSidebar:
- Add inline delete confirmation ("Delete? Yes / No") instead of
  immediate destructive action
- Fix text-xs text-[0.625rem] double class conflict on Pinned header

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 17:47:58 -04:00
Michael Chihlas
cc51d21300 fix: correct ternary closing brackets in KnowledgeBaseCards and TeamSummary
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 17:11:22 -04:00
Michael Chihlas
912075cd43 refactor: dashboard design critique — eliminate redundancy, differentiate sections
- Remove GreetingStatStrip (duplicated PerformanceCards data)
- Strip left-border accent from stat cards (AI slop pattern)
- Redesign KnowledgeBaseCards: icon grid → compact row list with icon badges
- Redesign TeamSummary: distinct inline-row layout, no longer identical twin
- Differentiate hover: stat cards use subtle border-hover, sessions keep springy lift
- Add loading skeletons to PerformanceCards, KnowledgeBaseCards, TeamSummary
- Add error state to PerformanceCards
- Extract timeAgo() to shared lib/timeAgo.ts (replaced 4 duplicates)
- Fix Skeleton bg-brand-border (undefined CSS var) → border-default
- Fix double text-xs text-[0.5625rem] class conflicts across dashboard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 17:06:30 -04:00