feat: US-007 - Chat widget — floating button component

Ralph/prd.json

@@ -128,7 +128,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 7,
-      "passes": false,
+      "passes": true,
       "notes": "Use framer-motion for the entrance animation to match the rest of the app's motion patterns. The button should use font-ui for any text. On mobile (<640px), button is 40px and positioned bottom: 16px, right: 16px. The VITE_GEMINI_API_KEY env var check can wait until the Gemini integration story — for now just render the button unconditionally."
     },
     {

Ralph/progress.txt

@@ -15,6 +15,8 @@
 - `src/lib/semantic-search.ts` exports `semanticSearch(queryEmbedding, embeddings, threshold?)` and `loadEmbeddings()` — embeddings are normalized so cosine similarity is dot(a,b)/(mag(a)*mag(b))
 - CommandPalette uses `semanticResults` state + debounced `useEffect` for async semantic search, falling back to Fuse.js when `isModelReady()` returns false or on any error
 - `loadEmbeddings()` and `paletteMap` (Map<id, PaletteItem>) are precomputed via `useMemo` — no re-computation on each search
+- ChatWidget is mounted in DashboardLayout alongside CommandPalette and DetailPanel — z-index 90 (below command palette z-1000)
+- `prefersReducedMotion` pattern: read `window.matchMedia` at module level, use in framer-motion variants to skip animation
 
 ---
 
@@ -114,3 +116,22 @@
   - The ONNX model takes several seconds to load in the browser (downloads ~23MB first time, then cached in IndexedDB), so initial searches will always use Fuse.js fallback
   - `loadEmbeddings()` is cheap (just returns the already-imported JSON) — safe to call in `useMemo` without performance concern
 ---
+
+## 2026-02-15 - US-007
+- Created `src/components/ChatWidget.tsx` — floating chat button with toggle state
+- 48px circular button (40px on mobile <640px), fixed bottom-right, teal accent background, white MessageCircle icon
+- Entrance animation: fade + translateY(8px→0), 1s delay after mount, via framer-motion variants
+- Respects `prefers-reduced-motion` — skips animation, shows immediately
+- Hover: shadow-md → shadow-lg + scale(1.05), 150ms transition
+- z-index 90 (below command palette z-1000)
+- onClick toggles `isOpen` state, swaps icon between MessageCircle and X
+- Mounted in `DashboardLayout.tsx` alongside CommandPalette and DetailPanel
+- Typecheck, lint (0 errors), and build all pass
+- Browser verified: button visible at bottom-right, toggle works (Open chat ↔ Close chat)
+- Files changed: `src/components/ChatWidget.tsx` (new), `src/components/DashboardLayout.tsx`
+- **Learnings for future iterations:**
+  - Responsive sizing via Tailwind classes (`h-10 w-10 sm:h-12 sm:w-12`) works well with inline style for non-Tailwind properties (boxShadow, border-radius)
+  - `AnimatePresence` is already imported and ready for the panel animation in US-008
+  - The `isOpen` state lives in ChatWidget — US-008 will add the panel UI inside the same component
+  - Hover effects use `onMouseEnter/Leave` with direct style mutation (same pattern as other dashboard components)
+---

src/components/ChatWidget.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { MessageCircle, X } from 'lucide-react'
+
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+const buttonVariants = {
+  hidden: prefersReducedMotion
+    ? { opacity: 1, y: 0 }
+    : { opacity: 0, y: 8 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: prefersReducedMotion
+      ? { duration: 0 }
+      : { duration: 0.3, ease: 'easeOut', delay: 1 },
+  },
+}
+
+export function ChatWidget() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      {/* Chat panel placeholder — wired in US-008 */}
+      <AnimatePresence>
+        {isOpen && null}
+      </AnimatePresence>
+
+      {/* Floating chat button */}
+      <motion.button
+        initial="hidden"
+        animate="visible"
+        variants={buttonVariants}
+        onClick={() => setIsOpen((prev) => !prev)}
+        aria-label={isOpen ? 'Close chat' : 'Open chat'}
+        className="fixed z-[90] cursor-pointer bottom-4 right-4 h-10 w-10 sm:bottom-6 sm:right-6 sm:h-12 sm:w-12"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: '50%',
+          border: 'none',
+          background: 'var(--accent)',
+          color: '#FFFFFF',
+          boxShadow: 'var(--shadow-md)',
+          transition: 'box-shadow 150ms ease-out, transform 150ms ease-out',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.boxShadow = 'var(--shadow-lg)'
+          e.currentTarget.style.transform = 'scale(1.05)'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+          e.currentTarget.style.transform = 'scale(1)'
+        }}
+      >
+        {isOpen ? <X size={20} strokeWidth={2} /> : <MessageCircle size={20} strokeWidth={2} />}
+      </motion.button>
+    </>
+  )
+}

src/components/DashboardLayout.tsx

@@ -14,6 +14,7 @@ import { ParentSection } from './ParentSection'
 import CareerConstellation from './CareerConstellation'
 import { WorkExperienceSubsection } from './WorkExperienceSubsection'
 import { RepeatMedicationsSubsection } from './RepeatMedicationsSubsection'
+import { ChatWidget } from './ChatWidget'
 import { useActiveSection } from '@/hooks/useActiveSection'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { consultations } from '@/data/consultations'
@@ -418,6 +419,9 @@ export function DashboardLayout() {
 
       {/* Detail panel */}
       <DetailPanel />
+
+      {/* Floating chat widget */}
+      <ChatWidget />
     </div>
   )
 }