history button and labels fixes

Author: shivam96anand

src/main/modules/__tests__/store-manager.test.ts

@@ -181,7 +181,7 @@ describe('store-manager.ts', () => {
       expect(state.openTabs[0].response!.body.length).toBe(5_000_000);
     });
 
-    it('sanitizes history responses: strips body to empty string', async () => {
+    it('sanitizes history responses: preserves body up to 1 MB', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
       vi.mocked(writeFile).mockResolvedValue(undefined);
 
@@ -212,6 +212,42 @@ describe('store-manager.ts', () => {
         ],
       });
 
+      const state = storeManager.getState();
+      expect(state.history[0].response.body).toBe('some response body');
+    });
+
+    it('sanitizes history responses: strips body exceeding 1 MB', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(writeFile).mockResolvedValue(undefined);
+
+      await storeManager.initialize();
+
+      const largeBody = 'x'.repeat(1_000_001);
+      storeManager.setState({
+        history: [
+          {
+            id: 'h2',
+            request: {
+              id: 'r2',
+              name: 'R2',
+              method: 'GET',
+              url: '/',
+              headers: [],
+            },
+            response: {
+              status: 200,
+              statusText: 'OK',
+              headers: {},
+              body: largeBody,
+              time: 50,
+              size: largeBody.length,
+              timestamp: Date.now(),
+            },
+            timestamp: new Date(),
+          },
+        ],
+      });
+
       const state = storeManager.getState();
       expect(state.history[0].response.body).toBe('');
     });

src/main/modules/store-manager.ts

@@ -243,13 +243,16 @@ class StoreManager {
     };
   }
 
-  // For history entries: strip body to keep the store lean
+  // For history entries: keep body up to 1 MB so "Compare with previous
+  // response" works across app restarts; strip anything larger.
   private sanitizeResponse(response?: ApiResponse): ApiResponse | undefined {
     if (!response) return undefined;
 
+    const MAX_HISTORY_BODY_CHARS = 1_000_000; // ~1 MB
+    const body = response.body || '';
     return {
       ...response,
-      body: '',
+      body: body.length <= MAX_HISTORY_BODY_CHARS ? body : '',
     };
   }
 

src/renderer/components/response-manager.ts

@@ -148,6 +148,17 @@ export class ResponseManager {
       }
     });
 
+    // View a previous response in the response viewer without adding it to
+    // history or overwriting the tab's stored response.
+    document.addEventListener('display-previous-response', async (e: Event) => {
+      const customEvent = e as CustomEvent;
+      const response = customEvent.detail?.response;
+      if (response) {
+        this.hideLoadingState();
+        await this.displayResponse(response, this.activeTabRequestMode);
+      }
+    });
+
     document.addEventListener('request-cancelled', (e: Event) => {
       const customEvent = e as CustomEvent;
       const requestId = customEvent.detail.requestId;

src/renderer/components/response-viewer/PreviousResponsesDropdown.ts

@@ -95,6 +95,17 @@ export class PreviousResponsesDropdown {
     this.menu = menu;
     this.position();
 
+    menu
+      .querySelectorAll<HTMLButtonElement>('.response-history-row__open')
+      .forEach((btn) => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const idx = Number(btn.dataset.idx);
+          const item = previous[idx];
+          if (item) this.openPrevious(item);
+        });
+      });
+
     menu
       .querySelectorAll<HTMLButtonElement>('.response-history-row__compare')
       .forEach((btn) => {
@@ -124,7 +135,7 @@ export class PreviousResponsesDropdown {
   private position(): void {
     if (!this.menu || !this.button) return;
     const rect = this.button.getBoundingClientRect();
-    const menuWidth = 320;
+    const menuWidth = 420;
     const left = Math.min(
       window.innerWidth - menuWidth - 8,
       Math.max(8, rect.right - menuWidth)
@@ -154,13 +165,38 @@ export class PreviousResponsesDropdown {
         <div class="response-history-row__meta">
           <span class="response-history-row__status ${statusClass}">${status}</span>
           <span class="response-history-row__time">${time}</span>
-          <span class="response-history-row__ts">${ts.toLocaleString()}</span>
+          <span class="response-history-row__ts">${ts.toLocaleString(undefined, { hour12: true })}</span>
         </div>
+        <button type="button" class="response-history-row__open" data-idx="${idx}">Open</button>
         <button type="button" class="response-history-row__compare" data-idx="${idx}">Compare</button>
       </div>
     `;
   }
 
+  private openPrevious(previous: HistoryItem): void {
+    const body = previous.response?.body || '';
+    if (!body.trim()) {
+      document.dispatchEvent(
+        new CustomEvent('show-toast', {
+          detail: {
+            type: 'info',
+            message:
+              'This previous response has no body. Re-send the request to capture a fresh snapshot.',
+          },
+        })
+      );
+      this.close();
+      return;
+    }
+
+    document.dispatchEvent(
+      new CustomEvent('display-previous-response', {
+        detail: { response: previous.response },
+      })
+    );
+    this.close();
+  }
+
   private openCompare(previous: HistoryItem): void {
     const left = this.currentResponse?.body || '';
     const right = previous.response?.body || '';

src/renderer/components/response-viewer/ResponseViewer.ts

@@ -891,9 +891,9 @@ export class ResponseViewer {
   private formatResponseTime(timeMs: number): string {
     if (timeMs >= 1000) {
       const timeInSeconds = timeMs / 1000;
-      return `${timeInSeconds.toFixed(2)}s`;
+      return `${timeInSeconds.toFixed(2)} s`;
     }
-    return `${timeMs}ms`;
+    return `${timeMs} ms`;
   }
 
   private updateResponseTimestamp(timestamp: number): void {

src/renderer/components/speed-test-manager.ts

@@ -240,7 +240,7 @@ export class SpeedTestManager {
         this.popup
           ?.querySelector('[data-stat="upload"]')
           ?.classList.add('is-done');
-        this.setStatus(qualify(result.downloadMbps, result.uploadMbps), 'ok');
+        this.setStatus('', 'ok');
       }
     } catch (e) {
       const message = e instanceof Error ? e.message : 'unknown error';
@@ -310,11 +310,3 @@ function formatMbps(mbps: number): string {
   if (mbps < 100) return mbps.toFixed(1);
   return Math.round(mbps).toString();
 }
-
-function qualify(down: number, up: number): string {
-  const min = Math.min(down, up);
-  if (min >= 100) return 'Excellent connection';
-  if (min >= 25) return 'Great for HD streaming & video calls';
-  if (min >= 5) return 'Good for general browsing';
-  return 'Connection appears slow';
-}

src/renderer/index.html

@@ -213,14 +213,6 @@
                       />
                     </div>
                     <button id="send-request" class="send-btn" title="Send request (⌘↵ / Ctrl+↵)">Send</button>
-                    <button
-                      id="cancel-request"
-                      class="cancel-btn"
-                      style="display: none"
-                      title="Cancel request (Esc)"
-                    >
-                      Cancel
-                    </button>
                   </div>
 
                   <div class="request-details">

src/renderer/styles/_json-viewer-monaco.scss

@@ -157,3 +157,26 @@
     border-radius: 2px;
   }
 }
+
+// Pin Monaco's bracket-pair colorization classes to a single bracket color.
+// MonacoJsonEditor disables bracketPairColorization and maps every
+// `delimiter.*.json` token in its theme, but Monaco can still emit the
+// `bracket-highlighting-N` decoration classes during the first paint /
+// background tokenization pass — which produced the rainbow flash that
+// "fixed itself" after a tab switch (re-tokenize with theme). This rule is
+// the defensive root-cause fix: regardless of when Monaco gets around to
+// applying our theme, brackets stay magenta from the very first frame.
+.monaco-editor {
+  .bracket-highlighting-0,
+  .bracket-highlighting-1,
+  .bracket-highlighting-2,
+  .bracket-highlighting-3,
+  .bracket-highlighting-4,
+  .bracket-highlighting-5,
+  .bracket-highlighting-6,
+  .bracket-highlighting-7,
+  .bracket-highlighting-8,
+  .bracket-highlighting-9 {
+    color: var(--json-bracket) !important;
+  }
+}

src/renderer/styles/_panels.scss

@@ -8,7 +8,7 @@
 }
 
 .collections-panel {
-  width: 23%;
+  width: 22%;
   min-width: 200px;
   flex: 0 0 auto;
   border-right: 1px solid var(--border-color);

src/renderer/styles/_response-history-dropdown.scss

@@ -3,28 +3,35 @@
 .response-toolbar__timestamp-wrap {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
+  padding-right: 10px;
 }
 
 .response-history-dropdown-btn {
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--text-secondary);
-  font-size: 11px;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-size: 10px;
+  font-weight: 600;
   line-height: 1;
-  padding: 2px 5px;
-  border-radius: 4px;
+  padding: 4px 8px;
+  border-radius: 16px;
   cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    border-color 0.12s ease,
-    color 0.12s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.15px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
   &:hover,
   &[aria-expanded='true'] {
-    color: var(--text-primary);
-    background: rgba(var(--primary-color-rgb), 0.12);
-    border-color: rgba(var(--primary-color-rgb), 0.3);
+    background: linear-gradient(
+      135deg,
+      var(--primary-color) 0%,
+      var(--primary-dark) 100%
+    );
+    border-color: var(--primary-light);
+    color: white;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3);
   }
 }
 
@@ -102,6 +109,7 @@
     white-space: nowrap;
   }
 
+  &__open,
   &__compare {
     background: transparent;
     border: 1px solid var(--border-color);