From 612274743f38de5ba08120b5907260937df217b6 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Tue, 20 Jan 2026 18:56:55 +0100
Subject: [PATCH] fix: Ralph panel toggle icon no longer changes erratically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The toggle icon was confusing because CSS rotation (90deg when expanded)
combined with JS icon swapping caused left arrow → right arrow transitions.

Changes:
- Remove CSS rotation transform from .ralph-toggle
- Use consistent down/up arrows matching Monitor panel convention
- Collapsed: ▼ (down) - click to expand
- Expanded: ▲ (up) - click to collapse

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 4 ++--
 src/web/public/index.html | 2 +-
 src/web/public/styles.css | 5 -----
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index 372c2e2e..4fa0900b 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -2168,10 +2168,10 @@ class ClaudemanApp {
     // Handle collapsed/expanded state
     if (this.innerStatePanelCollapsed) {
       panel.classList.add('collapsed');
-      if (toggle) toggle.innerHTML = '&#x25C0;'; // Left arrow when collapsed
+      if (toggle) toggle.innerHTML = '&#x25BC;'; // Down arrow when collapsed (click to expand)
     } else {
       panel.classList.remove('collapsed');
-      if (toggle) toggle.innerHTML = '&#x25B2;'; // Up arrow when expanded
+      if (toggle) toggle.innerHTML = '&#x25B2;'; // Up arrow when expanded (click to collapse)
 
       // Update expanded view content
       this.updateRalphExpandedView(state);
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 961cba9a..93c82e79 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -95,7 +95,7 @@
             <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">&#x2713;</span><span id="ralphStatTasks">0/0</span></span>
           </div>
-          <span class="ralph-toggle" id="ralphToggle">&#x25C0;</span>
+          <span class="ralph-toggle" id="ralphToggle">&#x25BC;</span>
         </div>
         <div class="ralph-controls">
           <button class="btn-icon-sm" onclick="event.stopPropagation(); app.toggleRalphDetach()" title="Detach/Attach panel" id="ralphDetachBtn">&#x29C9;</button>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index f168b04d..2d8197a3 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -592,14 +592,9 @@ body {
 .ralph-toggle {
   color: var(--text-dim);
   font-size: 0.6rem;
-  transition: transform 0.2s;
   flex-shrink: 0;
 }
 
-.ralph-panel:not(.collapsed) .ralph-toggle {
-  transform: rotate(90deg);
-}
-
 /* Hide detail when collapsed */
 .ralph-panel.collapsed .ralph-detail {
   display: none;