feat: display article summary in header

- Add summary field to ReadableContent interface
- Pass summary through ContentPanel to ReaderHeader
- Display summary below title in both overlay and standard layouts
- Style summary with reading font for consistency
- Summary appears in white with shadow in image overlays
- Summary appears in gray (#aaa) in standard headers
- Enhances article preview and reading experience

src/components/ContentPanel.tsx

@@ -19,6 +19,7 @@ interface ContentPanelProps {
   markdown?: string
   selectedUrl?: string
   image?: string
+  summary?: string
   highlights?: Highlight[]
   showHighlights?: boolean
   highlightStyle?: 'marker' | 'underline'
@@ -40,6 +41,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
   markdown, 
   selectedUrl,
   image,
+  summary,
   highlights = [],
   showHighlights = true,
   highlightStyle = 'marker',
@@ -117,6 +119,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
       <ReaderHeader 
         title={title}
         image={image}
+        summary={summary}
         readingTimeText={readingStats ? readingStats.text : null}
         hasHighlights={hasHighlights}
         highlightCount={relevantHighlights.length}

src/components/ReaderHeader.tsx

@@ -5,6 +5,7 @@ import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
 interface ReaderHeaderProps {
   title?: string
   image?: string
+  summary?: string
   readingTimeText?: string | null
   hasHighlights: boolean
   highlightCount: number
@@ -13,6 +14,7 @@ interface ReaderHeaderProps {
 const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   title,
   image,
+  summary,
   readingTimeText,
   hasHighlights,
   highlightCount
@@ -24,6 +26,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
         {title && (
           <div className="reader-header-overlay">
             <h2 className="reader-title">{title}</h2>
+            {summary && <p className="reader-summary">{summary}</p>}
             <div className="reader-meta">
               {readingTimeText && (
                 <div className="reading-time">
@@ -49,6 +52,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
       {title && (
         <div className="reader-header">
           <h2 className="reader-title">{title}</h2>
+          {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
             {readingTimeText && (
               <div className="reading-time">

src/components/ThreePaneLayout.tsx

@@ -105,6 +105,7 @@ const ThreePaneLayout: React.FC<ThreePaneLayoutProps> = (props) => {
               html={props.readerContent?.html}
               markdown={props.readerContent?.markdown}
               image={props.readerContent?.image}
+              summary={props.readerContent?.summary}
               selectedUrl={props.selectedUrl}
               highlights={props.classifiedHighlights}
               showHighlights={props.showHighlights}

src/index.css

@@ -501,17 +501,19 @@ body {
 }
 
 .reader-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
+  margin-bottom: 2rem;
 }
 
 .reader-title {
-  margin: 0;
-  flex: 1;
+  margin: 0 0 0.75rem 0;
+  font-family: var(--reading-font);
+}
+
+.reader-summary {
+  color: #aaa;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
   font-family: var(--reading-font);
 }
 
@@ -1098,6 +1100,15 @@ body {
   margin-bottom: 0.75rem;
 }
 
+.reader-header-overlay .reader-summary {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.1rem;
+  line-height: 1.5;
+  margin: 0 0 1rem 0;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  font-family: var(--reading-font);
+}
+
 .reader-header-overlay .reader-meta {
   display: flex;
   align-items: center;

src/services/readerService.ts

@@ -7,6 +7,7 @@ export interface ReadableContent {
   html?: string
   markdown?: string
   image?: string
+  summary?: string
 }
 
 interface CachedContent {