Refactor ObservationCard to improve facts toggle logic and metadata display

- Introduced hasFactsContent to determine if facts, concepts, or files are present.
- Updated view-mode toggles to conditionally render based on hasFactsContent.
- Modified content rendering to show subtitle only when facts and narrative are off.
- Enhanced metadata footer to display concepts and files only when facts toggle is active, with improved styling for concepts.

src/ui/viewer/components/ObservationCard.tsx

@@ -41,8 +41,8 @@ export function ObservationCard({ observation }: ObservationCardProps) {
   const filesRead = observation.files_read ? JSON.parse(observation.files_read).map(stripProjectRoot) : [];
   const filesModified = observation.files_modified ? JSON.parse(observation.files_modified).map(stripProjectRoot) : [];
 
-  // Show summary when both are off
+  // Show facts toggle if there are facts, concepts, or files
-  const showSummary = !showFacts && !showNarrative;
+  const hasFactsContent = facts.length > 0 || concepts.length > 0 || filesRead.length > 0 || filesModified.length > 0;
 
   return (
     <div className="card">
@@ -55,7 +55,7 @@ export function ObservationCard({ observation }: ObservationCardProps) {
           <span className="card-project">{observation.project}</span>
         </div>
         <div className="view-mode-toggles">
-          {facts.length > 0 && (
+          {hasFactsContent && (
             <button
               className={`view-mode-toggle ${showFacts ? 'active' : ''}`}
               onClick={() => {
@@ -95,7 +95,7 @@ export function ObservationCard({ observation }: ObservationCardProps) {
 
       {/* Content based on toggle state */}
       <div className="view-mode-content">
-        {showSummary && observation.subtitle && (
+        {!showFacts && !showNarrative && observation.subtitle && (
           <div className="card-subtitle">{observation.subtitle}</div>
         )}
         {showFacts && facts.length > 0 && (
@@ -112,25 +112,36 @@ export function ObservationCard({ observation }: ObservationCardProps) {
         )}
       </div>
 
-      {/* Metadata with concepts and files inline */}
+      {/* Metadata footer - id, date, and conditionally concepts/files when facts toggle is on */}
       <div className="card-meta">
         <span className="meta-date">#{observation.id} • {date}</span>
-        {concepts.length > 0 && (
+        {showFacts && (concepts.length > 0 || filesRead.length > 0 || filesModified.length > 0) && (
-          <span className="meta-concepts">
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' }}>
-            • {concepts.join(', ')}
+            {concepts.map((concept: string, i: number) => (
+              <span key={i} style={{
+                padding: '2px 8px',
+                background: 'var(--color-type-badge-bg)',
+                color: 'var(--color-type-badge-text)',
+                borderRadius: '3px',
+                fontWeight: '500',
+                fontSize: '10px'
+              }}>
+                {concept}
               </span>
-        )}
+            ))}
             {filesRead.length > 0 && (
               <span className="meta-files">
-            • <span className="file-label">read:</span> {filesRead.join(', ')}
+                <span className="file-label">read:</span> {filesRead.join(', ')}
               </span>
             )}
             {filesModified.length > 0 && (
               <span className="meta-files">
-            • <span className="file-label">modified:</span> {filesModified.join(', ')}
+                <span className="file-label">modified:</span> {filesModified.join(', ')}
               </span>
             )}
           </div>
+        )}
+      </div>
     </div>
   );
 }