Refactor card components for improved layout and functionality

- Updated card styles in viewer.html and viewer-template.html to enhance padding, margins, and overall layout.
- Introduced new header structure with left-aligned type and project name, and added view mode toggle buttons for facts and narrative.
- Simplified content rendering logic in ObservationCard, allowing for toggling between facts and narrative.
- Updated metadata display in ObservationCard, PromptCard, and SummaryCard to include formatted date and improved layout.
- Removed unnecessary verbose content sections and streamlined the presentation of facts and narrative.

src/ui/viewer/components/SummaryCard.tsx

@@ -12,8 +12,10 @@ export function SummaryCard({ summary }: SummaryCardProps) {
   return (
     <div className="card summary-card">
       <div className="card-header">
-        <span className="card-type">SUMMARY</span>
-        <span>{summary.project}</span>
+        <div className="card-header-left">
+          <span className="card-type">SUMMARY</span>
+          <span className="card-project">{summary.project}</span>
+        </div>
       </div>
       {summary.request && (
         <div className="card-title">Request: {summary.request}</div>
@@ -27,7 +29,9 @@ export function SummaryCard({ summary }: SummaryCardProps) {
       {summary.next_steps && (
         <div className="card-subtitle">Next: {summary.next_steps}</div>
       )}
-      <div className="card-meta">#{summary.id} • {date}</div>
+      <div className="card-meta">
+        <span className="meta-date">#{summary.id} • {date}</span>
+      </div>
     </div>
   );
 }