request section enhancements

Author: shivam96anand

package.json

@@ -1,6 +1,6 @@
 {
   "name": "restbro",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A modern API testing tool similar to Postman and Insomnia",
   "main": "dist/main/main/index.js",
   "scripts": {

src/renderer/components/environments/environment-manager.ts

@@ -2,6 +2,7 @@ import { Environment } from '../../../shared/types';
 import { EnvironmentDialogs } from './environment-dialogs';
 
 import { iconHtml } from '../../utils/icons';
+import { attachThemedSelect } from '../../utils/themed-select';
 
 export class EnvironmentManager {
   private environments: Environment[] = [];
@@ -146,6 +147,9 @@ export class EnvironmentManager {
     container.appendChild(select);
     container.appendChild(manageBtn);
 
+    // Replace the native (OS-themed) option popup with a themed dropdown.
+    attachThemedSelect(select);
+
     // Append to header-left section
     headerLeft.appendChild(container);
 

src/renderer/components/history-panel.ts

@@ -156,7 +156,7 @@ export class HistoryPanel {
           <span class="history-row__method method-${item.request.method.toLowerCase()}">${item.request.method}</span>
           <span class="history-row__url" title="${this.escapeAttr(item.request.url)}">${this.escapeText(item.request.url || '\u2013')}</span>
           <span class="history-row__status ${statusClass}">${status}</span>
-          <span class="history-row__time">${ts.toLocaleTimeString()}</span>
+          <span class="history-row__time">${ts.toLocaleTimeString(undefined, { hourCycle: 'h12' })}</span>
         </div>
       `;
       })

src/renderer/components/loadtest/LoadTestForm.ts

@@ -234,25 +234,6 @@ export class LoadTestForm {
                   </div>
                   <small class="form-help">1 second to 24 hours maximum</small>
                 </div>
-              </div>
-            </div>
-
-            <div class="form-section compact compact-advanced">
-              <h3>Advanced Options</h3>
-              <div class="form-grid two-column">
-                <div class="form-field">
-                  <label class="checkbox-label">
-                    <input type="checkbox" id="follow-redirects" checked>
-                    <span class="checkbox-text">Follow Redirects</span>
-                  </label>
-                </div>
-
-                <div class="form-field">
-                  <label class="checkbox-label">
-                    <input type="checkbox" id="insecure-tls">
-                    <span class="checkbox-text">Allow Insecure TLS</span>
-                  </label>
-                </div>
 
                 <div class="form-field">
                   <label for="timeout-input">Request Timeout (ms)</label>
@@ -265,7 +246,10 @@ export class LoadTestForm {
 
           <div class="form-column">
             <div class="form-section compact">
-              <h3>Target Request</h3>
+              <div class="section-header">
+                <h3>Target Request</h3>
+                <button id="start-test-btn" class="btn btn-primary section-header-action" type="button">Start Load Test</button>
+              </div>
               <div class="target-selector">
                 <div class="radio-group">
                   <label class="radio-label">
@@ -300,10 +284,6 @@ export class LoadTestForm {
                 </div>
               </div>
             </div>
-
-            <div class="form-actions form-actions-inline">
-              <button id="start-test-btn" class="btn btn-primary" type="button">Start Load Test</button>
-            </div>
           </div>
         </div>
 
@@ -584,12 +564,6 @@ export class LoadTestForm {
     const targetType = this.container.querySelector(
       'input[name="target-type"]:checked'
     ) as HTMLInputElement;
-    const followRedirects = this.container.querySelector(
-      '#follow-redirects'
-    ) as HTMLInputElement;
-    const insecureTLS = this.container.querySelector(
-      '#insecure-tls'
-    ) as HTMLInputElement;
     const timeout = this.container.querySelector(
       '#timeout-input'
     ) as HTMLInputElement;
@@ -620,8 +594,8 @@ export class LoadTestForm {
       durationSec,
       target,
       environmentId,
-      followRedirects: followRedirects.checked,
-      insecureTLS: insecureTLS.checked,
+      followRedirects: true,
+      insecureTLS: false,
       requestTimeoutMs: parseInt(timeout.value),
     };
   }
@@ -715,12 +689,6 @@ export class LoadTestForm {
     const durationUnit = this.container.querySelector(
       '#duration-unit'
     ) as HTMLSelectElement;
-    const followRedirects = this.container.querySelector(
-      '#follow-redirects'
-    ) as HTMLInputElement;
-    const insecureTLS = this.container.querySelector(
-      '#insecure-tls'
-    ) as HTMLInputElement;
     const timeout = this.container.querySelector(
       '#timeout-input'
     ) as HTMLInputElement;
@@ -735,8 +703,6 @@ export class LoadTestForm {
       durationUnit.value = 'seconds';
     }
 
-    followRedirects.checked = config.followRedirects !== false;
-    insecureTLS.checked = config.insecureTLS === true;
     timeout.value = (config.requestTimeoutMs || 30000).toString();
 
     if (config.target.kind === 'collection') {

src/renderer/components/request/MonacoJsonEditor.ts

@@ -4,6 +4,7 @@
  */
 
 import * as monaco from 'monaco-editor';
+import { forceInitialViewportTokenization } from './monaco-tokenization';
 
 export interface MonacoJsonEditorOptions {
   container: HTMLElement;
@@ -135,6 +136,7 @@ export class MonacoJsonEditor {
       theme: 'restbro-json',
       automaticLayout: true,
       minimap: { enabled: false },
+      overviewRulerBorder: false,
       scrollBeyondLastLine: false,
       fontSize: 12,
       lineNumbers: 'on',
@@ -146,9 +148,9 @@ export class MonacoJsonEditor {
       fontFamily:
         "'SF Mono', 'Cascadia Code', Monaco, Menlo, Consolas, 'Courier New', monospace",
       letterSpacing: -0.3,
-      glyphMargin: true,
+      glyphMargin: false,
       lineDecorationsWidth: 0,
-      lineNumbersMinChars: 3,
+      lineNumbersMinChars: 1,
       wordWrap: 'on',
       tabSize: 2,
       insertSpaces: true,
@@ -162,6 +164,10 @@ export class MonacoJsonEditor {
       },
     });
 
+    // Tokenize the initial viewport synchronously so the first paint is already
+    // themed (avoids Monaco's white-then-colored syntax-highlight flash).
+    forceInitialViewportTokenization(this.editor);
+
     // Listen to content changes
     this.editor.onDidChangeModelContent(() => {
       const newValue = this.editor?.getValue() || '';
@@ -325,6 +331,29 @@ export class MonacoJsonEditor {
     this.editor.getAction('actions.find')?.run();
   }
 
+  /**
+   * Toggle Monaco's built-in find widget: open + focus it when hidden, close
+   * it when it's already showing. Reads the find controller's live state so it
+   * stays in sync no matter how the widget was opened (icon, Cmd/Ctrl+F, Esc).
+   */
+  public toggleFind(): void {
+    if (!this.editor) return;
+    const findController = this.editor.getContribution(
+      'editor.contrib.findController'
+    ) as unknown as {
+      getState?: () => { isRevealed?: boolean } | undefined;
+      closeFindWidget?: () => void;
+    } | null;
+
+    if (findController?.getState?.()?.isRevealed) {
+      findController.closeFindWidget?.();
+      return;
+    }
+
+    this.editor.focus();
+    this.editor.getAction('actions.find')?.run();
+  }
+
   /** Find matches in the model (for external search bars) */
   public findMatches(query: string): monaco.editor.FindMatch[] {
     if (!this.editor || !query) return [];

src/renderer/components/request/MonacoXmlEditor.ts

@@ -4,6 +4,7 @@
  */
 
 import * as monaco from 'monaco-editor';
+import { forceInitialViewportTokenization } from './monaco-tokenization';
 
 export interface MonacoXmlEditorOptions {
   container: HTMLElement;
@@ -48,6 +49,7 @@ export class MonacoXmlEditor {
       theme: 'restbro-json',
       automaticLayout: true,
       minimap: { enabled: false },
+      overviewRulerBorder: false,
       scrollBeyondLastLine: false,
       fontSize: 12,
       lineNumbers: 'on',
@@ -60,7 +62,7 @@ export class MonacoXmlEditor {
       letterSpacing: -0.3,
       glyphMargin: false,
       lineDecorationsWidth: 0,
-      lineNumbersMinChars: 3,
+      lineNumbersMinChars: 1,
       wordWrap: 'on',
       tabSize: 2,
       insertSpaces: true,
@@ -69,6 +71,10 @@ export class MonacoXmlEditor {
       padding: { top: 12, bottom: 12 },
     });
 
+    // Tokenize the initial viewport synchronously so the first paint is already
+    // themed (avoids Monaco's white-then-colored syntax-highlight flash).
+    forceInitialViewportTokenization(this.editor);
+
     this.editor.onDidChangeModelContent(() => {
       this.onChange(this.editor?.getValue() || '');
     });

src/renderer/components/request/RequestBodyEditor.ts

@@ -310,6 +310,16 @@ export class RequestBodyEditor {
       this.monacoEditor = null;
     }
 
+    // Dispose any lingering Monaco XML editor too. Switching SOAP (XML) -> REST
+    // (JSON) lands here; without this the old XML editor would stay mounted in
+    // the same container and stack on top of the new JSON editor, breaking
+    // layout and syntax colouring. Symmetric with switchToMonacoXmlEditor /
+    // switchToTextareaEditor, which already dispose both.
+    if (this.monacoXmlEditor) {
+      this.monacoXmlEditor.dispose();
+      this.monacoXmlEditor = null;
+    }
+
     // Get current value from textarea if no initial value provided
     const valueToSet = initialValue || textarea?.value || '';
 

src/renderer/components/request/monaco-tokenization.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared helper to eliminate Monaco's "white then colored" syntax-highlight flash.
+ *
+ * Monaco defers syntactic tokenization to a background scheduler, so a freshly
+ * created editor paints its text with the default (white) foreground until that
+ * async pass runs. Under main-thread contention (e.g. switching requests, or a
+ * large response arriving) that pass can be queued behind other work and lag by
+ * up to ~1s, producing a visible flash where JSON/XML keys start white and only
+ * later pick up the theme color.
+ *
+ * Forcing tokenization of the initial viewport synchronously — in the same task
+ * as editor creation, before the browser paints — makes the first paint already
+ * colored. It is bounded so very large documents don't block the UI thread; the
+ * remaining lines tokenize lazily in the background as the user scrolls.
+ */
+
+import type * as monaco from 'monaco-editor';
+
+/**
+ * `forceTokenization` lives on Monaco's runtime model (ITokenizationTextModelPart)
+ * but is intentionally omitted from the public `monaco.d.ts`. Narrow the shape so
+ * we stay type-safe (and feature-detect it) at this boundary instead of `any`.
+ */
+type TokenizableModel = monaco.editor.ITextModel & {
+  tokenization?: {
+    forceTokenization?: (lineNumber: number) => void;
+  };
+};
+
+/**
+ * Upper bound on lines tokenized synchronously. A viewport is only tens of lines;
+ * a few hundred covers the initial view plus scroll headroom without freezing the
+ * UI thread on very large payloads.
+ */
+const MAX_SYNC_TOKENIZE_LINES = 500;
+
+/**
+ * Synchronously tokenize the initial viewport of a just-created editor so its
+ * first paint is already themed. Safe no-op if the runtime API is unavailable.
+ */
+export function forceInitialViewportTokenization(
+  editor: monaco.editor.IStandaloneCodeEditor | null
+): void {
+  const model = editor?.getModel() as TokenizableModel | null | undefined;
+  if (!model?.tokenization?.forceTokenization) return;
+
+  const lines = Math.min(model.getLineCount(), MAX_SYNC_TOKENIZE_LINES);
+  model.tokenization.forceTokenization(lines);
+}

src/renderer/components/request/request-form-handler.ts

@@ -7,6 +7,7 @@ import {
 import { setupAutocomplete } from './variable-autocomplete';
 import { VariableContextHandler } from './variable-context-handler';
 import { FormUIHandler } from './form-ui-handler';
+import { attachThemedSelect } from '../../utils/themed-select';
 
 /**
  * Main handler for the request form - coordinates between variable context,
@@ -33,6 +34,9 @@ export class RequestFormHandler {
       // Apply initial method color class
       this.uiHandler.updateMethodSelectColor(methodSelect);
 
+      // Replace the native (OS-themed) option popup with a themed dropdown.
+      attachThemedSelect(methodSelect);
+
       methodSelect.addEventListener('change', () => {
         this.onRequestUpdate({
           method: methodSelect.value as HttpMethod,