feat: bold dashboard redesign with inline stats, section labels, and chip icons

Restructure QuickStartPage for a more professional, informative layout:
- Left-aligned hero greeting (text-4xl) with date context and inline stat strip
- GreetingStatStrip shows resolved/active/MTTR at a glance
- Remove collapsible toggle — dashboard stats always visible
- Section labels with trailing border lines for visual hierarchy
- Suggestion chips with category icons, card-style hover, press feedback
- Fix cyan focus ring and icon color to ember orange design system
- Session cards: line-clamp-2 descriptions, font-medium text, problem_domain metadata
- Widen container max-w-3xl → max-w-4xl for breathing room
- Add .impeccable.md and .github/copilot-instructions.md design context
- CLAUDE.md audit: fix stale references, remove duplication, update counts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-27 05:04:20 +00:00
parent 3c0a29115c
commit dbe66a0568
9 changed files with 284 additions and 144 deletions

32
.github/copilot-instructions.md vendored Normal file
View File

@@ -0,0 +1,32 @@
# Copilot Instructions — ResolutionFlow
## Design Context
### Users
MSP engineers — IT professionals at Managed Service Providers who troubleshoot infrastructure and support issues for multiple client companies. They work under ticket pressure, need to resolve issues fast, and produce clean documentation automatically.
### Brand Personality
**Three words:** Professional, Modern, SaaS
**Voice:** Direct, competent, no fluff. Built by MSP engineers, for MSP engineers.
**Emotional goals:** Confidence, competence, clarity, focus.
### Aesthetic Direction
- Flat, high-contrast dark theme (Sentry/PostHog-inspired). Premium and clean.
- **References:** Notion (clarity), Stripe (polish), Figma (functional density)
- **Anti-references:** Microsoft Teams (clutter), Kaseya VSA 9 (dated patterns)
- Accent: ember orange (#f97316), max 5% of UI. No glassmorphism, no gradient surfaces, no ambient effects.
- See `DESIGN-SYSTEM.md` for full token and component specs.
### Accessibility
- WCAG 2.2 AA baseline
- Enhanced focus appearance on all interactive elements
- 7:1 contrast ratio for data visualization colors
- `prefers-reduced-motion` fully supported
- Never rely on color alone for status — pair with icons or text
### Design Principles
1. **Clarity over decoration.** Every pixel should communicate. No ornamental effects.
2. **Density without clutter.** Use typography hierarchy and spacing to create structure, not chrome.
3. **Confidence through consistency.** Same patterns, same tokens, same behavior everywhere.
4. **Speed is a feature.** Minimize clicks. Copilot-first — primary interaction is typing.
5. **Accessible by default.** WCAG 2.2, enhanced focus, high-contrast data viz, motion sensitivity.