Skip to content

feat: Complete UI redesign with DaisyUI, responsive layout, and modern sidebar#3

Merged
altras merged 2 commits into
mainfrom
feature/ui-improvements
Feb 13, 2026
Merged

feat: Complete UI redesign with DaisyUI, responsive layout, and modern sidebar#3
altras merged 2 commits into
mainfrom
feature/ui-improvements

Conversation

@altras
Copy link
Copy Markdown
Member

@altras altras commented Feb 13, 2026

https://trello.com/c/L2Xh7vCV/56-improve-ui-for-responsiveness-and-dark-mode

🎨 Complete UI Redesign

This PR introduces a comprehensive UI overhaul with DaisyUI components, modern responsive design, and improved UX across all pages.

image

✨ Key Features

Design System

  • DaisyUI v5.5.18 - Complete migration to component library (79% fewer tokens)
  • Custom Themes - Digital Archive aesthetic with warm colors
  • Typography - JetBrains Mono (all UI) + Space Grotesk (logo only)
  • Color Palette - Amber (#f59e0b), Indigo (#6366f1), Teal (#14b8a6)
  • Warm Backgrounds - Subtle gradients, no stark white/black

Layout Improvements

  • DaisyUI Drawer - Proper mobile sidebar overlay with backdrop
  • Collapsible Sidebar - 96px collapsed, 288px expanded
  • Clean Profile Section - Moved to sidebar bottom with Gravatar (no unnecessary labels)
  • Streamlined Navigation - Logo + Workspace + Theme toggle
  • Responsive Design - Mobile-first with proper breakpoints

New Components

  • KnowledgePlanesChart - Real-time growth visualization
    • 30-day timeline with intersecting area charts
    • Live updates every 30 seconds via tRPC polling
    • Professional empty states with SVG
    • Responsive heights: h-48 (mobile) → h-64 (tablet) → h-[280px] (desktop)
  • Modern Sidebar - Ubuntu-style navigation with collapse/expand
  • Theme Toggle - Light/dark mode with localStorage persistence

Mobile Experience

  • ✅ Sidebar as overlay with backdrop
  • ✅ Hamburger menu navigation
  • ✅ Responsive text sizing (text-xl sm:text-2xl lg:text-3xl)
  • ✅ Responsive spacing (p-4 sm:p-6 lg:p-8)
  • ✅ Touch-friendly buttons and controls
  • ✅ Optimized for 320px+ screens

📊 Statistics

  • 23 files changed
  • 2,933 insertions, 1,829 deletions
  • 4 new components (AppLayout, Sidebar, SidebarContext, KnowledgePlanesChart)

🎯 Pages Updated

  • Dashboard - Compact layout with prominent growth chart
  • Chat - DaisyUI message styling
  • Editor - Improved forms and inputs with proper validation
  • Upload - Better loading states and progress indicators
  • Workspaces - Responsive grid layout with cards
  • Worker Logs - Enhanced table display with pagination
  • Data Sources - Professional forms with clear hierarchy
  • Profile - Better responsive layout with Gravatar

🧪 Testing Checklist

  • Mobile responsive (320px - 768px)
  • Tablet layout (768px - 1024px)
  • Desktop layout (1024px+)
  • Sidebar collapse/expand (desktop only)
  • Sidebar drawer overlay (mobile)
  • Theme toggle light/dark
  • Workspace selector in navbar
  • Chart real-time updates (30s polling)
  • Profile section in sidebar bottom
  • All pages render correctly
  • Accessibility (WCAG AA, focus states, ARIA labels)

🎨 Design Philosophy

"Digital Archive" - Warm scholarly interface avoiding generic "AI slop" patterns:

  • Distinctive fonts - JetBrains Mono (not Inter/Roboto)
  • Warm palette - Amber/Indigo/Teal (not pure white/black)
  • Subtle effects - Low-opacity gradients (not glassmorphism)
  • Consistent motion - 300ms ease-in-out (not spring/bounce)
  • DaisyUI customized - All colors, fonts, spacing overridden

🚀 Latest Changes

Sidebar Cleanup (Latest)

  • Removed unnecessary "Digital Archive" label from profile section
  • Cleaner, more focused UI following minimalist principles

🚀 Ready for Review

This PR is ready for review and testing. All pages migrated to DaisyUI with improved responsive design, modern UX patterns, and a distinctive aesthetic.


🤖 Generated with Claude Code

altras and others added 2 commits February 13, 2026 12:53
…n sidebar

## Major Changes

### Design System Migration
- Migrated entire frontend to DaisyUI v5.5.18 components
- Implemented custom light/dark themes with Digital Archive aesthetic
- Color palette: Amber (#f59e0b) primary, Indigo (#6366f1) secondary, Teal (#14b8a6) accent
- Typography: JetBrains Mono for all text, Space Grotesk for brand/logo
- Warm off-white backgrounds with subtle gradients

### Layout & Navigation
- Implemented DaisyUI drawer system for proper mobile/desktop sidebar behavior
- Collapsible sidebar (96px collapsed, 288px expanded)
- Profile section moved to sidebar bottom with avatar, settings, and logout
- Workspace selector in top navbar for better visibility
- Clean top nav: Logo + Workspace selector + Theme toggle
- Responsive padding and spacing (p-4 sm:p-6 lg:p-8)

### Mobile Responsiveness
- Sidebar as overlay on mobile with backdrop and click-to-close
- Hamburger menu button for mobile navigation
- Responsive text sizing and component scaling
- Hidden elements on small screens for cleaner mobile UX
- Stats cards stack vertically on mobile

### New Features
- **KnowledgePlanesChart**: Real-time knowledge growth visualization
  - 30-day timeline with facts, cards, and relations
  - Intersecting area charts with gradients
  - Live updates every 30 seconds via polling
  - Responsive chart heights (h-48 sm:h-64 lg:h-[280px])
  - Professional empty states
- Gravatar integration for user avatars with MD5 hashing
- Theme toggle (light/dark) with localStorage persistence
- Ubuntu-style sidebar with large spacious buttons

### Component Updates
- All pages migrated to DaisyUI: dashboard, chat, editor, upload, workspaces, worker-logs, data-sources, profile
- Improved loading states with DaisyUI skeletons and spinners
- Better empty states with helpful CTAs
- Enhanced form styling and input components
- Professional card layouts with proper shadows and borders

### Code Quality
- Removed unused imports and variables
- Clean component structure with proper TypeScript types
- Added .env.local and .claude-flow to .gitignore
- Proper state management with React Context (SidebarContext)

### Dependencies
- Added recharts for data visualization
- Added md5 for Gravatar hashing
- Updated to Tailwind CSS v4.1.16 with CSS-based config

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Cleaned up sidebar profile section by removing the decorative divider
and "Digital Archive" text, which was redundant with the overall design
philosophy.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@altras altras merged commit 6a02ef4 into main Feb 13, 2026
@altras altras deleted the feature/ui-improvements branch February 13, 2026 12:51
altras added a commit that referenced this pull request Feb 18, 2026
…iscovery

Gap #2: Sliding window batching (50% overlap)
- Changed batch processing from non-overlapping to sliding window
- Batches now: 0-19, 10-29, 20-39... ensuring boundary facts get paired
- Catches cross-batch relations that were previously missed

Gap #3: Hybrid retrieval with embedding pre-filtering
- Added findSimilarPairs() to compute pairwise cosine similarities
- Pre-filters to pairs with >= 30% similarity before LLM call
- AI prompt now includes top 10 similar pairs as hints
- Focuses model attention on likely related facts

Results (n=10 clusters, 30 facts):
- Baseline: F1=30.8%, Precision=25%, Recall=40%
- After fixes: F1=57.6%, Precision=43.6%, Recall=85%
- Total improvement: +26.8 percentage points in F1

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
altras added a commit that referenced this pull request Feb 24, 2026
altras added a commit that referenced this pull request Mar 30, 2026
…dress blog critique

## Major Additions

### 1. MS MARCO Passage Ranking Benchmark
- bench_msmarco.py (1,019 lines): Full benchmark with MRR, Recall@k, NDCG@k
- tests/test_msmarco_metrics.py (537 lines): 34 comprehensive unit tests
- demos/demo_msmarco.py (324 lines): Interactive demo
- docs/MSMARCO_USAGE.md + MSMARCO_QUICKREF.md: Complete documentation
- examples/example_msmarco_usage.sh: 8 usage examples

### 2. Statistical Analysis Framework
- statistical_analysis.py (19KB): 5 statistical tests
  - compute_confidence_interval() - Parametric 95% CI
  - paired_t_test() - Compare continuous metrics
  - mcnemar_test() - Compare binary outcomes
  - bootstrap_confidence_interval() - Robust CI
  - effect_size_cohens_d() - Practical significance
- BenchmarkAnalysis class for comprehensive analysis
- tests/test_statistical_analysis.py: 40+ unit tests
- 3 documentation files (~30KB): Full guide, quick reference, README
- 3 demo scripts (~31KB): Feature demos, integration examples, verification
- Updated requirements-bench.txt with scipy>=1.11.0

### 3. HotpotQA Scale-Up to 500+ Questions
- Enhanced bench_hotpotqa.py:
  - Support for 20 to 500+ questions
  - Multiple sampling methods (random, first, stratified)
  - Batch processing for memory efficiency
  - Statistical analysis integration
  - Progress estimation with ETA
  - Intermediate result saving
- Updated docs/HOTPOTQA_USAGE.md with performance estimates
- docs/STATISTICAL_ANALYSIS_GUIDE.md: Statistical interpretation
- QUICK_REFERENCE.md: One-page command reference
- test_enhancements.py: Verification script
- examples/: run_statistical_benchmark.sh, cross_validation.sh

## Blog Post Critique Response

### 4. Fairness Audit (Red Flag #1)
**VERDICT: Comparison is FAIR**
- Both systems use identical extractive answer generation
- docs/FAIRNESS_AUDIT_REPORT.md (11.4 KB): Detailed analysis
- docs/FAIRNESS_FIX_PROPOSAL.md (20.6 KB): Architectural improvements
- docs/FAIRNESS_AUDIT_SUMMARY.md (4.4 KB): TL;DR

### 5. Revised Blog Post (Red Flags #2-10)
- docs/BLOG_POST_REVISED.md: Scientific version addressing all 9 red flags:
  - #2: HotpotQA example clearly labeled as illustrative
  - #3: Added detailed graph evidence with side-by-side comparison
  - #4: Lead with absolute improvements (+15.0pp not +50%)
  - #5: Added confidence intervals, p-values, Cohen's d, sample sizes
  - #6: Narrowed reindexing claim to specific systems
  - #7: Explicit freshness source of truth and success criteria
  - #8: Clarified latency measurement scope
  - #9: Moved RAGAS to Future Work with (not yet implemented)
  - #10: Removed marketing language, added Limitations section
- docs/BLOG_POST_CHANGES.md: Side-by-side audit trail

### 6. Comprehensive Methodology Documentation
- docs/METHODOLOGY.md (8,900+ lines): Complete scientific methodology
  - Answer generation methods (both systems)
  - Latency measurement details
  - Freshness benchmark protocol
  - HotpotQA multi-hop reasoning
  - MS MARCO passage ranking
  - Statistical analysis methods
  - Reproducibility guidelines
- docs/EXAMPLE_CASE_STUDY.md (1,200+ lines): Worked example
- docs/LIMITATIONS.md (1,600+ lines): Honest limitations, threats to validity
- docs/FAQ.md (1,500+ lines): 20+ questions with detailed answers
- docs/README.md: Documentation index

## Summary

- ~3,000 lines: MS MARCO benchmark (3rd dataset)
- ~95KB: Statistical analysis framework
- ~13,200 lines: Methodology documentation
- Enhanced HotpotQA to support 500+ questions
- All 10 blog post red flags addressed
- Production-ready, scientifically rigorous benchmark suite

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@altras altras restored the feature/ui-improvements branch March 30, 2026 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant