From bef38234fafee6b0e5ae17d58afc7a11d44bd549 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Tue, 20 Jan 2026 17:59:34 +0100
Subject: [PATCH] refactor: make Ralph Wiggum panel more compact

- Horizontal layout: ring | meta | tasks in one row
- Smaller progress ring (60px)
- Tasks displayed inline with wrap
- Removed Iterations counter from summary and detail
- Reduced overall panel height

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/index.html | 37 +++++++--------
 src/web/public/styles.css | 94 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 107 insertions(+), 24 deletions(-)

diff --git a/src/web/public/index.html b/src/web/public/index.html
index daf0dd23..961cba9a 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -93,7 +93,6 @@
           </div>
           <div class="ralph-summary-stats">
             <span class="ralph-stat"><span class="ralph-stat-icon">&#x23F1;</span><span id="ralphStatTime">0m</span></span>
-            <span class="ralph-stat"><span class="ralph-stat-icon">&#x21BB;</span><span id="ralphStatCycles">0</span></span>
             <span class="ralph-stat"><span class="ralph-stat-icon">&#x2713;</span><span id="ralphStatTasks">0/0</span></span>
           </div>
           <span class="ralph-toggle" id="ralphToggle">&#x25C0;</span>
@@ -104,11 +103,11 @@
         </div>
       </div>
 
-      <!-- Expanded Detail View -->
+      <!-- Expanded Detail View - Compact horizontal layout -->
       <div class="ralph-detail" id="ralphDetail">
-        <div class="ralph-progress-section">
-          <!-- Large Progress Ring -->
-          <div class="ralph-ring">
+        <div class="ralph-detail-row">
+          <!-- Progress Ring -->
+          <div class="ralph-ring-compact">
             <svg viewBox="0 0 100 100" class="ralph-ring-svg-large">
               <defs>
                 <linearGradient id="ralphGradient" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -125,30 +124,24 @@
             </div>
           </div>
           <!-- Meta Info -->
-          <div class="ralph-meta">
+          <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-row">
-              <div class="ralph-meta-item">
-                <span class="ralph-meta-label">Elapsed</span>
-                <span id="ralphElapsed">0m</span>
-              </div>
-              <div class="ralph-meta-item">
-                <span class="ralph-meta-label">Iterations</span>
-                <span id="ralphIterations">0</span>
-              </div>
+            <div class="ralph-meta-item">
+              <span class="ralph-meta-label">Elapsed</span>
+              <span id="ralphElapsed">0m</span>
             </div>
           </div>
-        </div>
-        <!-- Task Cards -->
-        <div class="ralph-tasks-section">
-          <div class="ralph-tasks-header">
-            <span>Tasks</span>
-            <span class="ralph-tasks-count" id="ralphTasksCount">0/0</span>
+          <!-- 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>
+            </div>
+            <div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
           </div>
-          <div class="ralph-tasks-grid" id="ralphTasksGrid"></div>
         </div>
       </div>
 
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 451d91af..084cef83 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -594,13 +594,103 @@ body {
   display: none;
 }
 
-/* Expanded Detail View */
+/* Expanded Detail View - Compact horizontal layout */
 .ralph-detail {
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   border-top: 1px solid var(--border);
   background: var(--bg-dark);
 }
 
+.ralph-detail-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* Compact Progress Ring */
+.ralph-ring-compact {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+}
+
+.ralph-ring-compact .ralph-ring-percent {
+  font-size: 0.9rem;
+}
+
+.ralph-ring-compact .ralph-ring-label {
+  font-size: 0.5rem;
+}
+
+/* Compact Meta Info */
+.ralph-meta-compact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 120px;
+}
+
+.ralph-meta-compact .ralph-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.ralph-meta-compact .ralph-meta-label {
+  font-size: 0.6rem;
+}
+
+.ralph-meta-compact code {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+}
+
+.ralph-meta-compact span:not(.ralph-meta-label) {
+  font-size: 0.8rem;
+}
+
+/* Compact Tasks Section */
+.ralph-tasks-compact {
+  flex: 1;
+  background: var(--bg-card);
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 80px;
+}
+
+.ralph-tasks-compact .ralph-tasks-header {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.7rem;
+}
+
+.ralph-tasks-compact .ralph-tasks-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  max-height: 50px;
+  overflow-y: auto;
+}
+
+.ralph-tasks-compact .ralph-task-card {
+  padding: 0.2rem 0.4rem;
+  font-size: 0.65rem;
+  border-left-width: 2px;
+}
+
+.ralph-tasks-compact .ralph-task-icon {
+  font-size: 0.7rem;
+}
+
+.ralph-tasks-compact .ralph-task-content {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Legacy classes for backward compatibility */
 .ralph-progress-section {
   display: flex;
   align-items: flex-start;