From ef885f481e20af2c211471e144134cf6d0e3a939 Mon Sep 17 00:00:00 2001
From: s0lray <s0lray@users.noreply.github.com>
Date: Thu, 26 Mar 2026 10:49:47 -0400
Subject: [PATCH] Restructure tool details panel layout (THE-114)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move Open Tool button to top (below breadcrumb), add HR dividers,
split Input→Output into its own section separate from Usage Context,
and rename Rating label to Community Rating.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 public/css/panel.css | 26 +++++++++++++++++++++++---
 public/index.html    | 21 ++++++++++++++++-----
 public/js/arf.js     | 33 +++++++++++++++++----------------
 3 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/public/css/panel.css b/public/css/panel.css
index a2e2d0a..731ec06 100644
--- a/public/css/panel.css
+++ b/public/css/panel.css
@@ -146,6 +146,22 @@
   line-height: 1.5;
 }
 
+/* Input → Output */
+#panel-io-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+#panel-io-section.empty {
+  display: none;
+}
+
+#panel-io {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
 /* OPSEC notes */
 #panel-opsec-section {
   display: flex;
@@ -179,11 +195,15 @@
   color: var(--color-text-primary);
 }
 
+/* Dividers */
+.panel-divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 0;
+}
+
 /* CTA button */
 #panel-cta-section {
-  margin-top: auto;
-  padding-top: var(--space-4);
-  border-top: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
diff --git a/public/index.html b/public/index.html
index e24858a..bdbf4ee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -45,6 +45,14 @@
       <div id="panel-body">
         <div id="panel-breadcrumb" class="empty"></div>
 
+        <hr class="panel-divider">
+
+        <div id="panel-cta-section" class="empty">
+          <a id="panel-open-tool" href="#" target="_blank" rel="noopener noreferrer">Open Tool &rarr;</a>
+        </div>
+
+        <hr class="panel-divider">
+
         <div id="panel-badges" class="empty"></div>
 
         <div id="panel-description-section" class="empty">
@@ -57,23 +65,26 @@
           <span id="panel-usage"></span>
         </div>
 
+        <div id="panel-io-section" class="empty">
+          <span class="panel-section-label">Input &rarr; Output</span>
+          <span id="panel-io"></span>
+        </div>
+
+        <hr class="panel-divider">
+
         <div id="panel-opsec-section" class="empty">
           <span class="panel-section-label">OPSEC Notes</span>
           <span id="panel-opsec"></span>
         </div>
 
         <div id="panel-rating-section" class="empty">
-          <span class="panel-section-label">Rating</span>
+          <span class="panel-section-label">Community Rating</span>
           <span id="panel-rating"></span>
         </div>
 
         <div id="panel-report-section">
           <a id="panel-report-link" href="https://github.com/lockfale/OSINT-Framework/issues/new?template=tool-feedback.md" target="_blank" rel="noopener noreferrer">Report an issue with this tool</a>
         </div>
-
-        <div id="panel-cta-section" class="empty">
-          <a id="panel-open-tool" href="#" target="_blank" rel="noopener noreferrer">Open Tool &rarr;</a>
-        </div>
       </div>
     </div>
 
diff --git a/public/js/arf.js b/public/js/arf.js
index ba4822b..95ce16f 100644
--- a/public/js/arf.js
+++ b/public/js/arf.js
@@ -469,31 +469,32 @@ function openPanel(d) {
     descSection.classList.remove("empty");
   }
 
-  // Usage context: bestFor + input → output (hidden when all empty)
+  // Usage context: bestFor only (hidden when empty)
   var usageSection = document.getElementById("panel-usage-section");
   var usageEl = document.getElementById("panel-usage");
   if (usageSection && usageEl) {
-    var hasUsage = d.data.bestFor || d.data.input || d.data.output;
-    if (hasUsage) {
-      var usageHtml = "";
-      if (d.data.bestFor) {
-        usageHtml += '<div class="usage-best-for"><strong>Best for:</strong> ' + escapeHtml(d.data.bestFor) + '</div>';
-      }
-      if (d.data.input || d.data.output) {
-        usageHtml += '<div class="usage-io">' +
-          (d.data.input ? escapeHtml(d.data.input) : "") +
-          ' &rarr; ' +
-          (d.data.output ? escapeHtml(d.data.output) : "") +
-          '</div>';
-      }
-      usageEl.innerHTML = usageHtml;
+    if (d.data.bestFor) {
+      usageEl.textContent = d.data.bestFor;
       usageSection.classList.remove("empty");
     } else {
-      usageEl.innerHTML = "";
+      usageEl.textContent = "";
       usageSection.classList.add("empty");
     }
   }
 
+  // Input → Output (separate section, hidden when both empty)
+  var ioSection = document.getElementById("panel-io-section");
+  var ioEl = document.getElementById("panel-io");
+  if (ioSection && ioEl) {
+    if (d.data.input || d.data.output) {
+      ioEl.textContent = (d.data.input || "") + " \u2192 " + (d.data.output || "");
+      ioSection.classList.remove("empty");
+    } else {
+      ioEl.textContent = "";
+      ioSection.classList.add("empty");
+    }
+  }
+
   // OPSEC: colored badge + optional note (always shown)
   var opsecSection = document.getElementById("panel-opsec-section");
   var opsecEl = document.getElementById("panel-opsec");