From 4126460cd9cba701108779e15b09e68c39bbc2d8 Mon Sep 17 00:00:00 2001
From: Prakshitha Malla <prakshithamalla@gmail.com>
Date: Fri, 29 May 2026 01:31:34 +0530
Subject: [PATCH] feat: add floating quick-scroll terminal boundary navigation
 targets #116

---
 ui/app.js     | 29 +++++++++++++++++++++++++++++
 ui/index.html | 13 +++++++++++++
 ui/style.css  | 45 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+)

diff --git a/ui/app.js b/ui/app.js
index 5dd09d3..73e5f2a 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -1774,6 +1774,35 @@ function closeModal() {
 // ─── Event Bindings ────────────────────────────────────────
 
 function bindEvents() {
+    // ─── FLOATING QUICK-SCROLL NAVIGATION PANEL ENGINE (#116) ───
+    const terminalBodyElement = document.getElementById('terminal-body');
+    const btnScrollTop = document.getElementById('scroll-to-top');
+    const btnScrollBottom = document.getElementById('scroll-to-bottom');
+    const scrollActionsContainer = document.getElementById('terminal-scroll-actions');
+    const cliCommandInput = document.getElementById('cli-input');
+
+    // 1. Math modifier scroll event triggers
+    if (btnScrollTop && terminalBodyElement) {
+        btnScrollTop.addEventListener('click', () => {
+            terminalBodyElement.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
+    if (btnScrollBottom && terminalBodyElement) {
+        btnScrollBottom.addEventListener('click', () => {
+            terminalBodyElement.scrollTo({ top: terminalBodyElement.scrollHeight, behavior: 'smooth' });
+        });
+    }
+
+    // 2. Clear typing space visibility management (translucent on focus)
+    if (cliCommandInput && scrollActionsContainer) {
+        cliCommandInput.addEventListener('focus', () => {
+            scrollActionsContainer.classList.add('input-focused');
+        });
+        cliCommandInput.addEventListener('blur', () => {
+            scrollActionsContainer.classList.remove('input-focused');
+        });
+    }
     // Terminal Search
     const cliSearchInput = document.getElementById('cli-search-input');
     if (cliSearchInput) {
diff --git a/ui/index.html b/ui/index.html
index 5ade3af..09454f1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -197,6 +197,19 @@ <h2>Scripts</h2>
                         <span class="cli-prompt">$</span> <span class="cli-welcome-text">Welcome to DevShell. Select a
                             script to run, or type a command below.</span>
                     </div>
+                    <div class="floating-scroll-actions" id="terminal-scroll-actions">
+                        <button class="btn-scroll-target" id="scroll-to-top" title="Scroll to Top" aria-label="Scroll to top of terminal">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="18 15 12 9 6 15"></polyline>
+                            </svg>
+                        </button>
+                        <button class="btn-scroll-target" id="scroll-to-bottom" title="Scroll to Bottom" aria-label="Scroll to bottom of terminal">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="6 9 12 15 18 9"></polyline>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
                 </div>
                 <div class="cli-input-bar">
                     <span class="cli-prompt-input">$</span>
diff --git a/ui/style.css b/ui/style.css
index 030dcc3..57b2c91 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -2247,3 +2247,48 @@ body.debugger-open #app-main {
     color: var(--text-secondary);
     opacity: 0.8;
 }
+/* ─── FLOATING QUICK-SCROLL NAVIGATION COMPONENT (#116) ─── */
+#terminal-body {
+    position: relative; /* Contextually anchors absolute layouts */
+}
+
+#terminal-scroll-actions {
+    position: absolute;
+    bottom: 16px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    z-index: 10;
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+/* Make controllers translucent when typing to preserve viewport visibility */
+#terminal-scroll-actions.input-focused {
+    opacity: 0.25;
+}
+
+#terminal-scroll-actions:hover {
+    opacity: 1.0 !important;
+}
+
+.btn-scroll-target {
+    background-color: var(--bg-secondary, #161b22);
+    border: 1px solid var(--border-color, #30363d);
+    color: var(--text-muted, #8b949e);
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.btn-scroll-target:hover {
+    background-color: var(--border-color, #30363d);
+    color: var(--text-main, #c9d1d9);
+    border-color: var(--accent-blue, #58a6ff);
+}
\ No newline at end of file