style: unify Ralph panel info section

Merge Waiting for, Elapsed, and Tasks into one unified card:
- All labels aligned on left (60px width)
- Values aligned after labels
- Task cards flow to the right
- Cleaner, more compact layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/web/public/index.html

@@ -129,22 +129,21 @@
               <div class="ralph-ring-label">Complete</div>
             </div>
           </div>
-          <!-- Meta Info -->
-          <div class="ralph-meta-compact">
-            <div class="ralph-meta-item">
-              <span class="ralph-meta-label">Waiting for</span>
-              <code id="ralphPhrase">--</code>
-            </div>
-            <div class="ralph-meta-item">
-              <span class="ralph-meta-label">Elapsed</span>
-              <span id="ralphElapsed">0m</span>
-            </div>
-          </div>
-          <!-- Task Cards - inline -->
-          <div class="ralph-tasks-compact">
-            <div class="ralph-tasks-header">
-              <span>Tasks</span>
-              <span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
+          <!-- Meta Info + Tasks unified -->
+          <div class="ralph-info-unified">
+            <div class="ralph-info-labels">
+              <div class="ralph-info-row">
+                <span class="ralph-info-label">Waiting for</span>
+                <code id="ralphPhrase">--</code>
+              </div>
+              <div class="ralph-info-row">
+                <span class="ralph-info-label">Elapsed</span>
+                <span id="ralphElapsed">0m</span>
+              </div>
+              <div class="ralph-info-row">
+                <span class="ralph-info-label">Tasks</span>
+                <span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
+              </div>
             </div>
             <div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
           </div>

src/web/public/styles.css

@@ -642,35 +642,43 @@ body {
   font-size: 0.55rem;
 }
 
-/* Compact Meta Info */
-.ralph-meta-compact {
+/* Unified Info + Tasks Section */
+.ralph-info-unified {
+  flex: 1;
   display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  min-width: 110px;
+  align-items: flex-start;
+  gap: 0.75rem;
+  overflow: hidden;
+  min-width: 0;
   background: var(--bg-input);
-  padding: 0.4rem 0.5rem;
+  padding: 0.4rem 0.6rem;
   border-radius: 4px;
 }
 
-.ralph-meta-compact .ralph-meta-item {
+.ralph-info-labels {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.ralph-info-row {
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 0.5rem;
 }
 
-.ralph-meta-compact .ralph-meta-label {
+.ralph-info-label {
   font-size: 0.5rem;
   white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   color: var(--text-muted);
-  width: 55px;
+  width: 60px;
   flex-shrink: 0;
 }
 
-.ralph-meta-compact code {
+.ralph-info-unified code {
   font-size: 0.6rem;
   padding: 0.15rem 0.35rem;
   max-width: 160px;
@@ -681,45 +689,19 @@ body {
   border-radius: 3px;
 }
 
-.ralph-meta-compact span:not(.ralph-meta-label) {
+.ralph-info-unified span:not(.ralph-info-label) {
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--text);
 }
 
-/* Compact Tasks Section */
-.ralph-tasks-compact {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  overflow: hidden;
-  min-width: 0;
-}
-
-.ralph-tasks-compact .ralph-tasks-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0;
-  padding: 0.2rem 0;
-  font-size: 0.55rem;
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-
-.ralph-tasks-compact .ralph-tasks-header span:first-child {
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.ralph-tasks-compact .ralph-tasks-count {
+.ralph-info-unified .ralph-tasks-count {
   font-size: 0.7rem;
   font-weight: 500;
   color: var(--text);
 }
 
-.ralph-tasks-compact .ralph-tasks-grid {
+.ralph-info-unified .ralph-tasks-grid {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
@@ -727,6 +709,7 @@ body {
   padding: 0;
   max-height: 60px;
   overflow-y: auto;
+  align-content: flex-start;
 }
 
 .ralph-tasks-compact .ralph-task-card {
@@ -1036,12 +1019,13 @@ body {
   overflow: auto;
 }
 
-.ralph-panel.detached .ralph-tasks-compact {
-  max-height: none;
+.ralph-panel.detached .ralph-info-unified {
+  flex-direction: column;
   flex: 1;
+  overflow: auto;
 }
 
-.ralph-panel.detached .ralph-tasks-compact .ralph-tasks-grid {
+.ralph-panel.detached .ralph-info-unified .ralph-tasks-grid {
   max-height: none;
   flex: 1;
 }