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/PromptCard.tsx

@@ -7,17 +7,21 @@ interface PromptCardProps {
 }
 
 export function PromptCard({ prompt }: PromptCardProps) {
+  const date = formatDate(prompt.created_at_epoch);
+
   return (
     <div className="card prompt-card">
       <div className="card-header">
-        <span className="card-type">Prompt</span>
-        <span>{prompt.project}</span>
+        <div className="card-header-left">
+          <span className="card-type">Prompt</span>
+          <span className="card-project">{prompt.project}</span>
+        </div>
       </div>
       <div className="card-content">
         {prompt.prompt_text}
       </div>
       <div className="card-meta">
-        {formatDate(prompt.created_at_epoch)}
+        <span className="meta-date">#{prompt.id} • {date}</span>
       </div>
     </div>
   );