fix(ui): align Timeline panel header with Application Log

Both panels now use the same card wrapper (logStyles.logCard), header
container (logStyles.logHeader, 12px 16px padding), and DS SectionHeader
for the title. Previously Timeline rendered a custom 13px span while
Application Log used SectionHeader's uppercase style, so the two panels
side-by-side looked inconsistent.

Removes the now-orphaned .eventCard/.eventCardHeader/.sectionTitle and
.timelineCard/.timelineHeader CSS rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/pages/AgentHealth/AgentHealth.module.css

@@ -65,13 +65,6 @@
   align-self: flex-end;
 }
 
-/* Section header */
-.sectionTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
 .sectionMeta {
   font-size: 12px;
   color: var(--text-muted);
@@ -249,22 +242,6 @@
   margin-top: 20px;
 }
 
-/* Event card (timeline panel) — card styling via sectionStyles.section */
-.eventCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  max-height: 420px;
-}
-
-.eventCardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
 /* Compact app card */
 .compactCard {
   background: color-mix(in srgb, var(--card-accent) 8%, var(--bg-raised));

ui/src/pages/AgentHealth/AgentHealth.tsx

@@ -975,9 +975,9 @@ export default function AgentHealth() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.eventCard}`}>
-          <div className={styles.eventCardHeader}>
-            <span className={styles.sectionTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.sectionMeta}>{eventStream.items.length} events</span>
               <Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>

ui/src/pages/AgentInstance/AgentInstance.module.css

@@ -84,17 +84,3 @@
   min-height: 300px;
 }
 
-/* Timeline card — card styling via sectionStyles.section */
-.timelineCard {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.timelineHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-}

ui/src/pages/AgentInstance/AgentInstance.tsx

@@ -481,9 +481,9 @@ export default function AgentInstance() {
           </InfiniteScrollArea>
         </div>
 
-        <div className={`${sectionStyles.section} ${styles.timelineCard}`}>
-          <div className={styles.timelineHeader}>
-            <span className={styles.chartTitle}>Timeline</span>
+        <div className={logStyles.logCard}>
+          <div className={logStyles.logHeader}>
+            <SectionHeader>Timeline</SectionHeader>
             <div className={logStyles.headerActions}>
               <span className={styles.chartMeta}>{eventStream.items.length} events</span>
               <button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>