Add new SVG icons for "learned" and "next steps" features (#109)

- Introduced icon-thin-learned.svg with detailed path definitions and color styling.
- Added icon-thin-next-steps.svg featuring a unique design and color scheme.

src/ui/viewer/components/SummaryCard.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Summary } from '../types';
-import { formatDate } from '../utils/formatters';
+import React from "react";
+import { Summary } from "../types";
+import { formatDate } from "../utils/formatters";
 
 interface SummaryCardProps {
   summary: Summary;
@@ -9,32 +9,54 @@ interface SummaryCardProps {
 export function SummaryCard({ summary }: SummaryCardProps) {
   const date = formatDate(summary.created_at_epoch);
 
+  const sections = [
+    { key: "investigated", label: "Investigated", content: summary.investigated, icon: "/icon-thick-investigated.svg" },
+    { key: "learned", label: "Learned", content: summary.learned, icon: "/icon-thick-learned.svg" },
+    { key: "completed", label: "Completed", content: summary.completed, icon: "/icon-thick-completed.svg" },
+    { key: "next_steps", label: "Next Steps", content: summary.next_steps, icon: "/icon-thick-next-steps.svg" },
+  ].filter((section) => section.content);
+
   return (
-    <div className="card summary-card">
-      <div className="card-header">
-        <div className="card-header-left">
-          <span className="card-type">SUMMARY</span>
-          <span className="card-project">{summary.project}</span>
+    <article className="card summary-card">
+      <header className="summary-card-header">
+        <div className="summary-badge-row">
+          <span className="card-type summary-badge">Session Summary</span>
+          <span className="summary-project-badge">{summary.project}</span>
         </div>
+        {summary.request && (
+          <h2 className="summary-title">{summary.request}</h2>
+        )}
+      </header>
+
+      <div className="summary-sections">
+        {sections.map((section, index) => (
+          <section
+            key={section.key}
+            className="summary-section"
+            style={{ animationDelay: `${index * 50}ms` }}
+          >
+            <div className="summary-section-header">
+              <img
+                src={section.icon}
+                alt={section.label}
+                className={`summary-section-icon summary-section-icon--${section.key}`}
+              />
+              <h3 className="summary-section-label">{section.label}</h3>
+            </div>
+            <div className="summary-section-content">
+              {section.content}
+            </div>
+          </section>
+        ))}
       </div>
-      {summary.request && (
-        <div className="card-title">Request: {summary.request}</div>
-      )}
-      {summary.investigated && (
-        <div className="card-subtitle">Investigated: {summary.investigated}</div>
-      )}
-      {summary.learned && (
-        <div className="card-subtitle">Learned: {summary.learned}</div>
-      )}
-      {summary.completed && (
-        <div className="card-subtitle">Completed: {summary.completed}</div>
-      )}
-      {summary.next_steps && (
-        <div className="card-subtitle">Next: {summary.next_steps}</div>
-      )}
-      <div className="card-meta">
-        <span className="meta-date">#{summary.id} • {date}</span>
-      </div>
-    </div>
+
+      <footer className="summary-card-footer">
+        <span className="summary-meta-id">Session #{summary.id}</span>
+        <span className="summary-meta-divider">•</span>
+        <time className="summary-meta-date" dateTime={new Date(summary.created_at_epoch).toISOString()}>
+          {date}
+        </time>
+      </footer>
+    </article>
   );
 }