From 241bea6eb98cf8b6ff04a0b9a3ddc3de154390ac Mon Sep 17 00:00:00 2001
From: Nathan Flurry <git@nathanflurry.com>
Date: Sun, 25 Jan 2026 04:21:12 -0800
Subject: [PATCH] refactor: events tab first, rename to Request Log, newest
 events first

---
 frontend/packages/web/src/App.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/packages/web/src/App.tsx b/frontend/packages/web/src/App.tsx
index 43f12b4..1fb193f 100644
--- a/frontend/packages/web/src/App.tsx
+++ b/frontend/packages/web/src/App.tsx
@@ -233,7 +233,7 @@ export default function App() {
   const logIdRef = useRef(1);
   const [copiedLogId, setCopiedLogId] = useState<number | null>(null);
 
-  const [debugTab, setDebugTab] = useState<DebugTab>("log");
+  const [debugTab, setDebugTab] = useState<DebugTab>("events");
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -1007,13 +1007,6 @@ export default function App() {
         {/* Debug Panel - Right */}
         <div className="debug-panel">
           <div className="debug-tabs">
-            <button
-              className={`debug-tab ${debugTab === "log" ? "active" : ""}`}
-              onClick={() => setDebugTab("log")}
-            >
-              <Terminal className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
-              Log
-            </button>
             <button
               className={`debug-tab ${debugTab === "events" ? "active" : ""}`}
               onClick={() => setDebugTab("events")}
@@ -1024,6 +1017,13 @@ export default function App() {
                 <span className="debug-tab-badge">{events.length}</span>
               )}
             </button>
+            <button
+              className={`debug-tab ${debugTab === "log" ? "active" : ""}`}
+              onClick={() => setDebugTab("log")}
+            >
+              <Terminal className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
+              Request Log
+            </button>
             <button
               className={`debug-tab ${debugTab === "approvals" ? "active" : ""}`}
               onClick={() => setDebugTab("approvals")}
@@ -1096,7 +1096,7 @@ export default function App() {
                   <div className="card-meta">No events yet. Start streaming to receive events.</div>
                 ) : (
                   <div className="event-list">
-                    {events.map((event) => {
+                    {[...events].reverse().map((event) => {
                       const type = getEventType(event);
                       return (
                         <div key={event.id} className="event-item">