Task 9: Build PatientSummary tile

Created PatientSummaryTile component displaying personal statement from profile.ts.
Full-width card with teal dot header, 13px body text, line-height 1.6.
Wired into DashboardLayout as first tile in grid.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/DashboardLayout.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { motion } from 'framer-motion'
 import { TopBar } from './TopBar'
 import Sidebar from './Sidebar'
+import { PatientSummaryTile } from './tiles/PatientSummaryTile'
 
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -93,8 +94,9 @@ export function DashboardLayout() {
             }}
             className="dashboard-grid"
           >
-            {/* Tiles will be added in Tasks 8-15 */}
             {/* PatientSummaryTile — full width */}
+            <PatientSummaryTile />
+
             {/* LatestResultsTile — half width (left) */}
             {/* CoreSkillsTile — half width (right) */}
             {/* LastConsultationTile — full width */}

src/components/tiles/PatientSummaryTile.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Card, CardHeader } from '../Card'
+import { personalStatement } from '@/data/profile'
+
+export function PatientSummaryTile() {
+  const bodyStyles: React.CSSProperties = {
+    fontSize: '13px',
+    lineHeight: '1.6',
+    color: 'var(--text-primary)',
+  }
+
+  return (
+    <Card full>
+      <CardHeader dotColor="teal" title="PATIENT SUMMARY" />
+      <div style={bodyStyles}>{personalStatement}</div>
+    </Card>
+  )
+}