diff --git a/src/web/public/index.html b/src/web/public/index.html
index 93c82e79..ccc22b4b 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -79,8 +79,14 @@
         <div class="ralph-summary-content" onclick="app.toggleInnerStatePanel()">
           <div class="ralph-ring-mini" id="ralphRingMini">
             <svg viewBox="0 0 36 36" class="ralph-ring-svg">
+              <defs>
+                <linearGradient id="ralphGradientMini" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#3b82f6" />
+                  <stop offset="100%" stop-color="#22c55e" />
+                </linearGradient>
+              </defs>
               <circle class="ralph-ring-bg" cx="18" cy="18" r="15.9" />
-              <circle class="ralph-ring-progress" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" />
+              <circle class="ralph-ring-progress-mini" cx="18" cy="18" r="15.9" id="ralphRingMiniProgress" />
             </svg>
             <span class="ralph-ring-text" id="ralphRingMiniText">0%</span>
           </div>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 2d8197a3..976e3874 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -503,6 +503,16 @@ body {
   transition: stroke-dashoffset 0.5s ease-out;
 }
 
+.ralph-ring-progress-mini {
+  fill: none;
+  stroke: url(#ralphGradientMini);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  transition: stroke-dashoffset 0.5s ease-out;
+}
+
 .ralph-ring-text {
   position: absolute;
   top: 50%;
@@ -640,21 +650,27 @@ body {
 
 .ralph-meta-compact .ralph-meta-item {
   display: flex;
-  flex-direction: column;
-  gap: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
 }
 
 .ralph-meta-compact .ralph-meta-label {
   font-size: 0.6rem;
+  white-space: nowrap;
 }
 
 .ralph-meta-compact code {
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
+  font-size: 0.55rem;
+  padding: 0.1rem 0.3rem;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ralph-meta-compact span:not(.ralph-meta-label) {
-  font-size: 0.8rem;
+  font-size: 0.6rem;
 }
 
 /* Compact Tasks Section */