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>

frontend/src/pages/QuickStartPage.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { useAuthStore } from '@/store/authStore'
 import { StartSessionInput } from '@/components/dashboard/StartSessionInput'
@@ -8,31 +7,49 @@ import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
 import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
 import { TeamSummary } from '@/components/dashboard/TeamSummary'
 import { RecentFlowPilotSessions } from '@/components/dashboard/RecentFlowPilotSessions'
-import { ChevronDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { GreetingStatStrip } from '@/components/dashboard/GreetingStatStrip'
+
+function SectionLabel({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
+        {children}
+      </span>
+      <div className="flex-1 h-px bg-border" />
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  )
+}
 
 export function QuickStartPage() {
   const user = useAuthStore((s) => s.user)
-  const [dashboardExpanded, setDashboardExpanded] = useState(false)
 
-  const greeting = new Date().getHours() < 12
+  const now = new Date()
+  const greeting = now.getHours() < 12
     ? 'morning'
-    : new Date().getHours() < 18
+    : now.getHours() < 18
     ? 'afternoon'
     : 'evening'
+  const dayOfWeek = now.toLocaleDateString('en-US', { weekday: 'long' })
+  const formattedDate = now.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })
+  const firstName = user?.name?.split(' ')[0] || 'there'
 
   return (
     <div className="overflow-y-auto h-full">
       <PageMeta title="ResolutionFlow" />
-      <div className="max-w-3xl mx-auto px-6 pt-12 pb-8">
-        {/* Hero: Greeting + Input */}
-        <div className="text-center mb-6">
-          <h1 className="font-heading text-2xl font-extrabold tracking-tight text-foreground">
-            Good {greeting}, {user?.name?.split(' ')[0] || 'there'}
-          </h1>
-          <p className="mt-1 text-base text-muted-foreground">
-            What are you troubleshooting?
-          </p>
+      <div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
+        {/* Hero: Greeting + Stat Strip */}
+        <div className="flex items-end justify-between mb-8 animate-fade-in-up">
+          <div>
+            <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
+              {dayOfWeek}, {formattedDate}
+            </p>
+            <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-[#f0f2f5] leading-tight">
+              Good {greeting},<br className="hidden sm:block" />
+              {firstName}.
+            </h1>
+          </div>
+          <GreetingStatStrip />
         </div>
 
         {/* Chat-style input */}
@@ -44,39 +61,31 @@ export function QuickStartPage() {
         </div>
 
         {/* Active Sessions */}
-        <div className="mt-4">
-          <ActiveFlowPilotSessions />
+        <div className="mt-8">
+          <SectionLabel>Active Sessions</SectionLabel>
+          <div className="mt-3">
+            <ActiveFlowPilotSessions hideHeader />
+          </div>
         </div>
 
         {/* Recent Sessions */}
-        <div className="mt-4">
-          <RecentFlowPilotSessions />
+        <div className="mt-8">
+          <SectionLabel>Recent Sessions</SectionLabel>
+          <div className="mt-3">
+            <RecentFlowPilotSessions hideHeader />
+          </div>
         </div>
 
-        {/* Collapsible Dashboard section */}
-        <div className="mt-8">
-          <button
-            type="button"
-            onClick={() => setDashboardExpanded(!dashboardExpanded)}
-            className="flex items-center gap-2 text-xs font-sans uppercase tracking-wide text-muted-foreground hover:text-foreground transition-colors w-full"
-          >
-            <div className="flex-1 h-px bg-border" />
-            <span className="flex items-center gap-1.5 px-3">
-              Dashboard
-              <ChevronDown size={12} className={cn('transition-transform', dashboardExpanded && 'rotate-180')} />
-            </span>
-            <div className="flex-1 h-px bg-border" />
-          </button>
-
-          {dashboardExpanded && (
-            <div className="mt-4 space-y-4 animate-fade-in">
-              <PerformanceCards />
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <KnowledgeBaseCards />
-                <TeamSummary />
-              </div>
+        {/* Dashboard — always visible */}
+        <div className="mt-10">
+          <SectionLabel>Dashboard</SectionLabel>
+          <div className="mt-3 space-y-4 animate-fade-in">
+            <PerformanceCards />
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <KnowledgeBaseCards />
+              <TeamSummary />
             </div>
-          )}
+          </div>
         </div>
       </div>
     </div>