Enable source maps for production builds

Adds sourcemap: true to Vite build configuration to generate external source map files (.map) alongside JavaScript bundles. This enables debugging of production builds with original source code while keeping source maps separate from the main bundle files.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.claude/commands/release/generate-release-notes.md

@@ -37,3 +37,11 @@ The skill generates markdown-formatted release notes following this structure:
 
 **IMPORTANT**: Always add a blank lines around the markdown code fence and output the markdown code block last
 **IMPORTANT**: PRs by `@gschier` should not mention the @username
+
+## After Generating Release Notes
+
+After outputting the release notes, ask the user if they would like to create a draft GitHub release with these notes. If they confirm, create the release using:
+
+```bash
+gh release create <tag> --draft --prerelease --title "<tag>" --notes '<release notes>'
+```

.github/workflows/release.yml

@@ -1,7 +1,7 @@
 name: Generate Artifacts
 on:
   push:
-    tags: [ v* ]
+    tags: [v*]
 
 jobs:
   build-artifacts:
@@ -13,37 +13,37 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - platform: 'macos-latest' # for Arm-based Macs (M1 and above).
-            args: '--target aarch64-apple-darwin'
-            yaak_arch: 'arm64'
-            os: 'macos'
-            targets: 'aarch64-apple-darwin'
-          - platform: 'macos-latest' # for Intel-based Macs.
-            args: '--target x86_64-apple-darwin'
-            yaak_arch: 'x64'
-            os: 'macos'
-            targets: 'x86_64-apple-darwin'
-          - platform: 'ubuntu-22.04'
-            args: ''
-            yaak_arch: 'x64'
-            os: 'ubuntu'
-            targets: ''
-          - platform: 'ubuntu-22.04-arm'
-            args: ''
-            yaak_arch: 'arm64'
-            os: 'ubuntu'
-            targets: ''
-          - platform: 'windows-latest'
-            args: ''
-            yaak_arch: 'x64'
-            os: 'windows'
-            targets: ''
+          - platform: "macos-latest" # for Arm-based Macs (M1 and above).
+            args: "--target aarch64-apple-darwin"
+            yaak_arch: "arm64"
+            os: "macos"
+            targets: "aarch64-apple-darwin"
+          - platform: "macos-latest" # for Intel-based Macs.
+            args: "--target x86_64-apple-darwin"
+            yaak_arch: "x64"
+            os: "macos"
+            targets: "x86_64-apple-darwin"
+          - platform: "ubuntu-22.04"
+            args: ""
+            yaak_arch: "x64"
+            os: "ubuntu"
+            targets: ""
+          - platform: "ubuntu-22.04-arm"
+            args: ""
+            yaak_arch: "arm64"
+            os: "ubuntu"
+            targets: ""
+          - platform: "windows-latest"
+            args: ""
+            yaak_arch: "x64"
+            os: "windows"
+            targets: ""
           # Windows ARM64
-          - platform: 'windows-latest'
-            args: '--target aarch64-pc-windows-msvc'
-            yaak_arch: 'arm64'
-            os: 'windows'
-            targets: 'aarch64-pc-windows-msvc'
+          - platform: "windows-latest"
+            args: "--target aarch64-pc-windows-msvc"
+            yaak_arch: "arm64"
+            os: "windows"
+            targets: "aarch64-pc-windows-msvc"
     runs-on: ${{ matrix.platform }}
     timeout-minutes: 40
     steps:
@@ -88,6 +88,7 @@ jobs:
           & $exe --version
 
       - run: npm ci
+      - run: npm run bootstrap
       - run: npm run lint
       - name: Run JS Tests
         run: npm test
@@ -99,6 +100,29 @@ jobs:
         env:
           YAAK_VERSION: ${{ github.ref_name }}
 
+      - name: Sign vendored binaries (macOS only)
+        if: matrix.os == 'macos'
+        env:
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          KEYCHAIN_PASSWORD: ${{ secrets.KEYCHAIN_PASSWORD }}
+        run: |
+          # Create keychain
+          KEYCHAIN_PATH=$RUNNER_TEMP/app-signing.keychain-db
+          security create-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+          security set-keychain-settings -lut 21600 $KEYCHAIN_PATH
+          security unlock-keychain -p "$KEYCHAIN_PASSWORD" $KEYCHAIN_PATH
+
+          # Import certificate
+          echo "$APPLE_CERTIFICATE" | base64 --decode > certificate.p12
+          security import certificate.p12 -P "$APPLE_CERTIFICATE_PASSWORD" -A -t cert -f pkcs12 -k $KEYCHAIN_PATH
+          security list-keychain -d user -s $KEYCHAIN_PATH
+
+          # Sign vendored binaries with hardened runtime and their specific entitlements
+          codesign --force --options runtime --entitlements crates-tauri/yaak-app/macos/entitlements.yaakprotoc.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app/vendored/protoc/yaakprotoc || true
+          codesign --force --options runtime --entitlements crates-tauri/yaak-app/macos/entitlements.yaaknode.plist --sign "$APPLE_SIGNING_IDENTITY" crates-tauri/yaak-app/vendored/node/yaaknode || true
+
       - uses: tauri-apps/tauri-action@v0
         env:
           YAAK_TARGET_ARCH: ${{ matrix.yaak_arch }}
@@ -121,9 +145,9 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ matrix.os == 'windows' && secrets.AZURE_CLIENT_SECRET }}
           AZURE_TENANT_ID: ${{ matrix.os == 'windows' && secrets.AZURE_TENANT_ID }}
         with:
-          tagName: 'v__VERSION__'
-          releaseName: 'Release __VERSION__'
-          releaseBody: '[Changelog __VERSION__](https://yaak.app/blog/__VERSION__)'
+          tagName: "v__VERSION__"
+          releaseName: "Release __VERSION__"
+          releaseBody: "[Changelog __VERSION__](https://yaak.app/blog/__VERSION__)"
           releaseDraft: true
           prerelease: true
-          args: '${{ matrix.args }} --config ./crates-tauri/yaak-app/tauri.release.conf.json'
+          args: "${{ matrix.args }} --config ./crates-tauri/yaak-app/tauri.release.conf.json"

Cargo.lock

@@ -8075,6 +8075,7 @@ name = "yaak-common"
 version = "0.1.0"
 dependencies = [
  "serde_json",
+ "tokio",
 ]
 
 [[package]]
@@ -8121,8 +8122,10 @@ dependencies = [
  "serde_json",
  "serde_yaml",
  "thiserror 2.0.17",
+ "tokio",
  "ts-rs",
  "url",
+ "yaak-common",
  "yaak-models",
  "yaak-sync",
 ]
@@ -8149,6 +8152,7 @@ dependencies = [
  "tonic",
  "tonic-reflection",
  "uuid",
+ "yaak-common",
  "yaak-tls",
 ]
 

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/JamesIves/github-sponsors-readme-action">
-    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/src-tauri/icons/icon.png">
+    <img width="200px" src="https://github.com/mountain-loop/yaak/raw/main/crates-tauri/yaak-app/icons/icon.png">
   </a>
 </p>
 
@@ -64,7 +64,7 @@ visit [`DEVELOPMENT.md`](DEVELOPMENT.md) for tips on setting up your environment
 ## Useful Resources
 
 - [Feedback and Bug Reports](https://feedback.yaak.app)
-- [Documentation](https://feedback.yaak.app/help)
+- [Documentation](https://yaak.app/docs)
 - [Yaak vs Postman](https://yaak.app/alternatives/postman)
 - [Yaak vs Bruno](https://yaak.app/alternatives/bruno)
 - [Yaak vs Insomnia](https://yaak.app/alternatives/insomnia)

crates-cli/yaak-cli/src/main.rs

@@ -15,7 +15,7 @@ use yaak_models::util::UpdateSource;
 use yaak_plugins::events::{PluginContext, RenderPurpose};
 use yaak_plugins::manager::PluginManager;
 use yaak_plugins::template_callback::PluginTemplateCallback;
-use yaak_templates::{parse_and_render, render_json_value_raw, RenderOptions};
+use yaak_templates::{RenderOptions, parse_and_render, render_json_value_raw};
 
 #[derive(Parser)]
 #[command(name = "yaakcli")]
@@ -149,14 +149,7 @@ async fn render_http_request(
     // Apply path placeholders (e.g., /users/:id -> /users/123)
     let (url, url_parameters) = apply_path_placeholders(&url, &url_parameters);
 
-    Ok(HttpRequest {
-        url,
-        url_parameters,
-        headers,
-        body,
-        authentication,
-        ..r.to_owned()
-    })
+    Ok(HttpRequest { url, url_parameters, headers, body, authentication, ..r.to_owned() })
 }
 
 #[tokio::main]
@@ -169,16 +162,10 @@ async fn main() {
     }
 
     // Use the same app_id for both data directory and keyring
-    let app_id = if cfg!(debug_assertions) {
-        "app.yaak.desktop.dev"
-    } else {
-        "app.yaak.desktop"
-    };
+    let app_id = if cfg!(debug_assertions) { "app.yaak.desktop.dev" } else { "app.yaak.desktop" };
 
     let data_dir = cli.data_dir.unwrap_or_else(|| {
-        dirs::data_dir()
-            .expect("Could not determine data directory")
-            .join(app_id)
+        dirs::data_dir().expect("Could not determine data directory").join(app_id)
     });
 
     let db_path = data_dir.join("db.sqlite");
@@ -191,9 +178,7 @@ async fn main() {
 
     // Initialize encryption manager for secure() template function
     // Use the same app_id as the Tauri app for keyring access
-    let encryption_manager = Arc::new(
-        EncryptionManager::new(query_manager.clone(), app_id),
-    );
+    let encryption_manager = Arc::new(EncryptionManager::new(query_manager.clone(), app_id));
 
     // Initialize plugin manager for template functions
     let vendored_plugin_dir = data_dir.join("vendored-plugins");
@@ -203,9 +188,8 @@ async fn main() {
     let node_bin_path = PathBuf::from("node");
 
     // Find the plugin runtime - check YAAK_PLUGIN_RUNTIME env var, then fallback to development path
-    let plugin_runtime_main = std::env::var("YAAK_PLUGIN_RUNTIME")
-        .map(PathBuf::from)
-        .unwrap_or_else(|_| {
+    let plugin_runtime_main =
+        std::env::var("YAAK_PLUGIN_RUNTIME").map(PathBuf::from).unwrap_or_else(|_| {
             // Development fallback: look relative to crate root
             PathBuf::from(env!("CARGO_MANIFEST_DIR"))
                 .join("../../crates-tauri/yaak-app/vendored/plugin-runtime/index.cjs")
@@ -226,14 +210,10 @@ async fn main() {
     // Initialize plugins from database
     let plugins = db.list_plugins().unwrap_or_default();
     if !plugins.is_empty() {
-        let errors = plugin_manager
-            .initialize_all_plugins(plugins, &PluginContext::new_empty())
-            .await;
+        let errors =
+            plugin_manager.initialize_all_plugins(plugins, &PluginContext::new_empty()).await;
         for (plugin_dir, error_msg) in errors {
-            eprintln!(
-                "Warning: Failed to initialize plugin '{}': {}",
-                plugin_dir, error_msg
-            );
+            eprintln!("Warning: Failed to initialize plugin '{}': {}", plugin_dir, error_msg);
         }
     }
 
@@ -249,9 +229,7 @@ async fn main() {
             }
         }
         Commands::Requests { workspace_id } => {
-            let requests = db
-                .list_http_requests(&workspace_id)
-                .expect("Failed to list requests");
+            let requests = db.list_http_requests(&workspace_id).expect("Failed to list requests");
             if requests.is_empty() {
                 println!("No requests found in workspace {}", workspace_id);
             } else {
@@ -261,9 +239,7 @@ async fn main() {
             }
         }
         Commands::Send { request_id } => {
-            let request = db
-                .get_http_request(&request_id)
-                .expect("Failed to get request");
+            let request = db.get_http_request(&request_id).expect("Failed to get request");
 
             // Resolve environment chain for variable substitution
             let environment_chain = db
@@ -318,18 +294,13 @@ async fn main() {
                 }))
             } else {
                 // Drain events silently
-                tokio::spawn(async move {
-                    while event_rx.recv().await.is_some() {}
-                });
+                tokio::spawn(async move { while event_rx.recv().await.is_some() {} });
                 None
             };
 
             // Send the request
             let sender = ReqwestSender::new().expect("Failed to create HTTP client");
-            let response = sender
-                .send(sendable, event_tx)
-                .await
-                .expect("Failed to send request");
+            let response = sender.send(sendable, event_tx).await.expect("Failed to send request");
 
             // Wait for event handler to finish
             if let Some(handle) = verbose_handle {
@@ -383,18 +354,13 @@ async fn main() {
                     }
                 }))
             } else {
-                tokio::spawn(async move {
-                    while event_rx.recv().await.is_some() {}
-                });
+                tokio::spawn(async move { while event_rx.recv().await.is_some() {} });
                 None
             };
 
             // Send the request
             let sender = ReqwestSender::new().expect("Failed to create HTTP client");
-            let response = sender
-                .send(sendable, event_tx)
-                .await
-                .expect("Failed to send request");
+            let response = sender.send(sendable, event_tx).await.expect("Failed to send request");
 
             if let Some(handle) = verbose_handle {
                 let _ = handle.await;
@@ -421,12 +387,7 @@ async fn main() {
             let (body, _stats) = response.text().await.expect("Failed to read response body");
             println!("{}", body);
         }
-        Commands::Create {
-            workspace_id,
-            name,
-            method,
-            url,
-        } => {
+        Commands::Create { workspace_id, name, method, url } => {
             let request = HttpRequest {
                 workspace_id,
                 name,

crates-tauri/yaak-app/macos/entitlements.plist

@@ -2,14 +2,6 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
     <dict>
-        <!-- Enable for NodeJS execution -->
-        <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
-        <true/>
-
-        <!-- Allow loading 1Password's dylib (signed with different Team ID) -->
-        <key>com.apple.security.cs.disable-library-validation</key>
-        <true/>
-
         <!--    Re-enable for sandboxing. Currently disabled because auto-updater doesn't work with sandboxing.-->
         <!--    <key>com.apple.security.app-sandbox</key> <true/>-->
         <!--    <key>com.apple.security.files.user-selected.read-write</key> <true/>-->

crates-tauri/yaak-app/macos/entitlements.yaaknode.plist

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+        <!-- Enable for NodeJS/V8 JIT compiler -->
+        <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+        <true/>
+
+        <!-- Allow loading plugins signed with different Team IDs (e.g., 1Password) -->
+        <key>com.apple.security.cs.disable-library-validation</key>
+        <true/>
+    </dict>
+</plist>

crates-tauri/yaak-app/macos/entitlements.yaakprotoc.plist

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <dict>
+    </dict>
+</plist>

crates-tauri/yaak-app/src/commands.rs

@@ -1,5 +1,5 @@
-use crate::error::Result;
 use crate::PluginContextExt;
+use crate::error::Result;
 use std::sync::Arc;
 use tauri::{AppHandle, Manager, Runtime, State, WebviewWindow, command};
 use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
@@ -54,7 +54,12 @@ pub(crate) async fn cmd_secure_template<R: Runtime>(
     let plugin_manager = Arc::new((*app_handle.state::<PluginManager>()).clone());
     let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
     let plugin_context = window.plugin_context();
-    Ok(encrypt_secure_template_function(plugin_manager, encryption_manager, &plugin_context, template)?)
+    Ok(encrypt_secure_template_function(
+        plugin_manager,
+        encryption_manager,
+        &plugin_context,
+        template,
+    )?)
 }
 
 #[command]

crates-tauri/yaak-app/src/git_ext.rs

@@ -6,11 +6,10 @@ use crate::error::Result;
 use std::path::{Path, PathBuf};
 use tauri::command;
 use yaak_git::{
-    GitCommit, GitRemote, GitStatusSummary, PullResult, PushResult,
-    git_add, git_add_credential, git_add_remote, git_checkout_branch, git_commit,
-    git_create_branch, git_delete_branch, git_fetch_all, git_init, git_log,
-    git_merge_branch, git_pull, git_push, git_remotes, git_rm_remote, git_status,
-    git_unstage,
+    GitCommit, GitRemote, GitStatusSummary, PullResult, PushResult, git_add, git_add_credential,
+    git_add_remote, git_checkout_branch, git_commit, git_create_branch, git_delete_branch,
+    git_fetch_all, git_init, git_log, git_merge_branch, git_pull, git_push, git_remotes,
+    git_rm_remote, git_status, git_unstage,
 };
 
 // NOTE: All of these commands are async to prevent blocking work from locking up the UI
@@ -52,22 +51,22 @@ pub async fn cmd_git_initialize(dir: &Path) -> Result<()> {
 
 #[command]
 pub async fn cmd_git_commit(dir: &Path, message: &str) -> Result<()> {
-    Ok(git_commit(dir, message)?)
+    Ok(git_commit(dir, message).await?)
 }
 
 #[command]
 pub async fn cmd_git_fetch_all(dir: &Path) -> Result<()> {
-    Ok(git_fetch_all(dir)?)
+    Ok(git_fetch_all(dir).await?)
 }
 
 #[command]
 pub async fn cmd_git_push(dir: &Path) -> Result<PushResult> {
-    Ok(git_push(dir)?)
+    Ok(git_push(dir).await?)
 }
 
 #[command]
 pub async fn cmd_git_pull(dir: &Path) -> Result<PullResult> {
-    Ok(git_pull(dir)?)
+    Ok(git_pull(dir).await?)
 }
 
 #[command]

crates-tauri/yaak-app/src/grpc.rs

@@ -1,12 +1,12 @@
 use std::collections::BTreeMap;
 
-use crate::error::Result;
 use crate::PluginContextExt;
+use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
 use KeyAndValueRef::{Ascii, Binary};
 use tauri::{Manager, Runtime, WebviewWindow};
 use yaak_grpc::{KeyAndValueRef, MetadataMap};
 use yaak_models::models::GrpcRequest;
-use crate::models_ext::QueryManagerExt;
 use yaak_plugins::events::{CallHttpAuthenticationRequest, HttpHeader};
 use yaak_plugins::manager::PluginManager;
 

crates-tauri/yaak-app/src/history.rs

@@ -1,8 +1,8 @@
+use crate::models_ext::QueryManagerExt;
 use chrono::{NaiveDateTime, Utc};
 use log::debug;
 use std::sync::OnceLock;
 use tauri::{AppHandle, Runtime};
-use crate::models_ext::QueryManagerExt;
 use yaak_models::util::UpdateSource;
 
 const NAMESPACE: &str = "analytics";

crates-tauri/yaak-app/src/http_request.rs

@@ -1,9 +1,13 @@
+use crate::PluginContextExt;
 use crate::error::Error::GenericError;
 use crate::error::Result;
+use crate::models_ext::BlobManagerExt;
+use crate::models_ext::QueryManagerExt;
 use crate::render::render_http_request;
 use log::{debug, warn};
 use std::pin::Pin;
 use std::sync::Arc;
+use std::sync::atomic::{AtomicI32, Ordering};
 use std::time::{Duration, Instant};
 use tauri::{AppHandle, Manager, Runtime, WebviewWindow};
 use tokio::fs::{File, create_dir_all};
@@ -15,22 +19,19 @@ use yaak_http::client::{
     HttpConnectionOptions, HttpConnectionProxySetting, HttpConnectionProxySettingAuth,
 };
 use yaak_http::cookies::CookieStore;
-use yaak_http::manager::HttpConnectionManager;
+use yaak_http::manager::{CachedClient, HttpConnectionManager};
 use yaak_http::sender::ReqwestSender;
 use yaak_http::tee_reader::TeeReader;
 use yaak_http::transaction::HttpTransaction;
 use yaak_http::types::{
     SendableBody, SendableHttpRequest, SendableHttpRequestOptions, append_query_params,
 };
-use crate::models_ext::BlobManagerExt;
 use yaak_models::blob_manager::BodyChunk;
 use yaak_models::models::{
     CookieJar, Environment, HttpRequest, HttpResponse, HttpResponseEvent, HttpResponseHeader,
     HttpResponseState, ProxySetting, ProxySettingAuth,
 };
-use crate::models_ext::QueryManagerExt;
 use yaak_models::util::UpdateSource;
-use crate::PluginContextExt;
 use yaak_plugins::events::{
     CallHttpAuthenticationRequest, HttpHeader, PluginContext, RenderPurpose,
 };
@@ -173,7 +174,12 @@ async fn send_http_request_inner<R: Runtime>(
     let environment_id = environment.map(|e| e.id);
     let workspace = window.db().get_workspace(workspace_id)?;
     let (resolved, auth_context_id) = resolve_http_request(window, unrendered_request)?;
-    let cb = PluginTemplateCallback::new(plugin_manager.clone(), encryption_manager.clone(), &plugin_context, RenderPurpose::Send);
+    let cb = PluginTemplateCallback::new(
+        plugin_manager.clone(),
+        encryption_manager.clone(),
+        &plugin_context,
+        RenderPurpose::Send,
+    );
     let env_chain =
         window.db().resolve_environments(&workspace.id, folder_id, environment_id.as_deref())?;
     let request = render_http_request(&resolved, env_chain, &cb, &RenderOptions::throw()).await?;
@@ -228,12 +234,13 @@ async fn send_http_request_inner<R: Runtime>(
         None => None,
     };
 
-    let client = connection_manager
+    let cached_client = connection_manager
         .get_client(&HttpConnectionOptions {
             id: plugin_context.id.clone(),
             validate_certificates: workspace.setting_validate_certificates,
             proxy: proxy_setting,
             client_certificate,
+            dns_overrides: workspace.setting_dns_overrides.clone(),
         })
         .await?;
 
@@ -250,7 +257,7 @@ async fn send_http_request_inner<R: Runtime>(
 
     let cookie_store = maybe_cookie_store.as_ref().map(|(cs, _)| cs.clone());
     let result = execute_transaction(
-        client,
+        cached_client,
         sendable_request,
         response_ctx,
         cancelled_rx.clone(),
@@ -310,7 +317,7 @@ pub fn resolve_http_request<R: Runtime>(
 }
 
 async fn execute_transaction<R: Runtime>(
-    client: reqwest::Client,
+    cached_client: CachedClient,
     mut sendable_request: SendableHttpRequest,
     response_ctx: &mut ResponseContext<R>,
     mut cancelled_rx: Receiver<bool>,
@@ -321,7 +328,10 @@ async fn execute_transaction<R: Runtime>(
     let workspace_id = response_ctx.response().workspace_id.clone();
     let is_persisted = response_ctx.is_persisted();
 
-    let sender = ReqwestSender::with_client(client);
+    // Keep a reference to the resolver for DNS timing events
+    let resolver = cached_client.resolver.clone();
+
+    let sender = ReqwestSender::with_client(cached_client.client);
     let transaction = match cookie_store {
         Some(cs) => HttpTransaction::with_cookie_store(sender, cs),
         None => HttpTransaction::new(sender),
@@ -346,21 +356,39 @@ async fn execute_transaction<R: Runtime>(
     let (event_tx, mut event_rx) =
         tokio::sync::mpsc::channel::<yaak_http::sender::HttpResponseEvent>(100);
 
+    // Set the event sender on the DNS resolver so it can emit DNS timing events
+    resolver.set_event_sender(Some(event_tx.clone())).await;
+
+    // Shared state to capture DNS timing from the event processing task
+    let dns_elapsed = Arc::new(AtomicI32::new(0));
+
     // Write events to DB in a task (only for persisted responses)
     if is_persisted {
         let response_id = response_id.clone();
         let app_handle = app_handle.clone();
         let update_source = response_ctx.update_source.clone();
         let workspace_id = workspace_id.clone();
+        let dns_elapsed = dns_elapsed.clone();
         tokio::spawn(async move {
             while let Some(event) = event_rx.recv().await {
+                // Capture DNS timing when we see a DNS event
+                if let yaak_http::sender::HttpResponseEvent::DnsResolved { duration, .. } = &event {
+                    dns_elapsed.store(*duration as i32, Ordering::SeqCst);
+                }
                 let db_event = HttpResponseEvent::new(&response_id, &workspace_id, event.into());
                 let _ = app_handle.db().upsert_http_response_event(&db_event, &update_source);
             }
         });
     } else {
-        // For ephemeral responses, just drain the events
-        tokio::spawn(async move { while event_rx.recv().await.is_some() {} });
+        // For ephemeral responses, just drain the events but still capture DNS timing
+        let dns_elapsed = dns_elapsed.clone();
+        tokio::spawn(async move {
+            while let Some(event) = event_rx.recv().await {
+                if let yaak_http::sender::HttpResponseEvent::DnsResolved { duration, .. } = &event {
+                    dns_elapsed.store(*duration as i32, Ordering::SeqCst);
+                }
+            }
+        });
     };
 
     // Capture request body as it's sent (only for persisted responses)
@@ -528,10 +556,14 @@ async fn execute_transaction<R: Runtime>(
     // Final update with closed state and accurate byte count
     response_ctx.update(|r| {
         r.elapsed = start.elapsed().as_millis() as i32;
+        r.elapsed_dns = dns_elapsed.load(Ordering::SeqCst);
         r.content_length = Some(written_bytes as i32);
         r.state = HttpResponseState::Closed;
     })?;
 
+    // Clear the event sender from the resolver since this request is done
+    resolver.set_event_sender(None).await;
+
     Ok((response_ctx.response().clone(), maybe_blob_write_handle))
 }
 

crates-tauri/yaak-app/src/import.rs

@@ -1,17 +1,17 @@
+use crate::PluginContextExt;
 use crate::error::Result;
 use crate::models_ext::QueryManagerExt;
-use crate::PluginContextExt;
 use log::info;
 use std::collections::BTreeMap;
 use std::fs::read_to_string;
 use tauri::{Manager, Runtime, WebviewWindow};
-use yaak_tauri_utils::window::WorkspaceWindowTrait;
 use yaak_core::WorkspaceContext;
 use yaak_models::models::{
     Environment, Folder, GrpcRequest, HttpRequest, WebsocketRequest, Workspace,
 };
 use yaak_models::util::{BatchUpsertResult, UpdateSource, maybe_gen_id, maybe_gen_id_opt};
 use yaak_plugins::manager::PluginManager;
+use yaak_tauri_utils::window::WorkspaceWindowTrait;
 
 pub(crate) async fn import_data<R: Runtime>(
     window: &WebviewWindow<R>,

crates-tauri/yaak-app/src/lib.rs

@@ -7,7 +7,7 @@ use crate::http_request::{resolve_http_request, send_http_request};
 use crate::import::import_data;
 use crate::models_ext::{BlobManagerExt, QueryManagerExt};
 use crate::notifications::YaakNotifier;
-use crate::render::{render_grpc_request, render_template};
+use crate::render::{render_grpc_request, render_json_value, render_template};
 use crate::updates::{UpdateMode, UpdateTrigger, YaakUpdater};
 use crate::uri_scheme::handle_deep_link;
 use error::Result as YaakResult;
@@ -189,7 +189,6 @@ async fn cmd_grpc_reflect<R: Runtime>(
     request_id: &str,
     environment_id: Option<&str>,
     proto_files: Vec<String>,
-    skip_cache: Option<bool>,
     window: WebviewWindow<R>,
     app_handle: AppHandle<R>,
     grpc_handle: State<'_, Mutex<GrpcHandle>>,
@@ -224,18 +223,21 @@ async fn cmd_grpc_reflect<R: Runtime>(
     let settings = window.db().get_settings();
     let client_certificate =
         find_client_certificate(req.url.as_str(), &settings.client_certificates);
+    let proto_files: Vec<PathBuf> =
+        proto_files.iter().map(|p| PathBuf::from_str(p).unwrap()).collect();
 
-    Ok(grpc_handle
-        .lock()
-        .await
+    // Always invalidate cached pool when this command is called, to force re-reflection
+    let mut handle = grpc_handle.lock().await;
+    handle.invalidate_pool(&req.id, &uri, &proto_files);
+
+    Ok(handle
         .services(
             &req.id,
             &uri,
-            &proto_files.iter().map(|p| PathBuf::from_str(p).unwrap()).collect(),
+            &proto_files,
             &metadata,
             workspace.setting_validate_certificates,
             client_certificate,
-            skip_cache.unwrap_or(false),
         )
         .await
         .map_err(|e| GenericError(e.to_string()))?)
@@ -360,10 +362,8 @@ async fn cmd_grpc_go<R: Runtime>(
 
     let cb = {
         let cancelled_rx = cancelled_rx.clone();
-        let app_handle = app_handle.clone();
         let environment_chain = environment_chain.clone();
         let window = window.clone();
-        let base_msg = base_msg.clone();
         let plugin_manager = plugin_manager.clone();
         let encryption_manager = encryption_manager.clone();
 
@@ -385,14 +385,12 @@ async fn cmd_grpc_go<R: Runtime>(
             match serde_json::from_str::<IncomingMsg>(ev.payload()) {
                 Ok(IncomingMsg::Message(msg)) => {
                     let window = window.clone();
-                    let app_handle = app_handle.clone();
-                    let base_msg = base_msg.clone();
                     let environment_chain = environment_chain.clone();
                     let plugin_manager = plugin_manager.clone();
                     let encryption_manager = encryption_manager.clone();
                     let msg = block_in_place(|| {
                         tauri::async_runtime::block_on(async {
-                            render_template(
+                            let result = render_template(
                                 msg.as_str(),
                                 environment_chain,
                                 &PluginTemplateCallback::new(
@@ -406,24 +404,11 @@ async fn cmd_grpc_go<R: Runtime>(
                                 ),
                                 &RenderOptions { error_behavior: RenderErrorBehavior::Throw },
                             )
-                            .await
-                            .expect("Failed to render template")
+                            .await;
+                            result.expect("Failed to render template")
                         })
                     });
                     in_msg_tx.try_send(msg.clone()).unwrap();
-                    tauri::async_runtime::spawn(async move {
-                        app_handle
-                            .db()
-                            .upsert_grpc_event(
-                                &GrpcEvent {
-                                    content: msg,
-                                    event_type: GrpcEventType::ClientMessage,
-                                    ..base_msg.clone()
-                                },
-                                &UpdateSource::from_window_label(window.label()),
-                            )
-                            .unwrap();
-                    });
                 }
                 Ok(IncomingMsg::Commit) => {
                     maybe_in_msg_tx.take();
@@ -470,12 +455,48 @@ async fn cmd_grpc_go<R: Runtime>(
         )?;
 
         async move {
+            // Create callback for streaming methods that handles both success and error
+            let on_message = {
+                let app_handle = app_handle.clone();
+                let base_event = base_event.clone();
+                let window_label = window.label().to_string();
+                move |result: std::result::Result<String, String>| match result {
+                    Ok(msg) => {
+                        let _ = app_handle.db().upsert_grpc_event(
+                            &GrpcEvent {
+                                content: msg,
+                                event_type: GrpcEventType::ClientMessage,
+                                ..base_event.clone()
+                            },
+                            &UpdateSource::from_window_label(&window_label),
+                        );
+                    }
+                    Err(error) => {
+                        let _ = app_handle.db().upsert_grpc_event(
+                            &GrpcEvent {
+                                content: format!("Failed to send message: {}", error),
+                                event_type: GrpcEventType::Error,
+                                ..base_event.clone()
+                            },
+                            &UpdateSource::from_window_label(&window_label),
+                        );
+                    }
+                }
+            };
+
             let (maybe_stream, maybe_msg) =
                 match (method_desc.is_client_streaming(), method_desc.is_server_streaming()) {
                     (true, true) => (
                         Some(
                             connection
-                                .streaming(&service, &method, in_msg_stream, &metadata, client_cert)
+                                .streaming(
+                                    &service,
+                                    &method,
+                                    in_msg_stream,
+                                    &metadata,
+                                    client_cert,
+                                    on_message.clone(),
+                                )
                                 .await,
                         ),
                         None,
@@ -490,6 +511,7 @@ async fn cmd_grpc_go<R: Runtime>(
                                     in_msg_stream,
                                     &metadata,
                                     client_cert,
+                                    on_message.clone(),
                                 )
                                 .await,
                         ),
@@ -1035,14 +1057,54 @@ async fn cmd_get_http_authentication_summaries<R: Runtime>(
 #[tauri::command]
 async fn cmd_get_http_authentication_config<R: Runtime>(
     window: WebviewWindow<R>,
+    app_handle: AppHandle<R>,
     plugin_manager: State<'_, PluginManager>,
+    encryption_manager: State<'_, EncryptionManager>,
     auth_name: &str,
     values: HashMap<String, JsonPrimitive>,
     model: AnyModel,
-    _environment_id: Option<&str>,
+    environment_id: Option<&str>,
 ) -> YaakResult<GetHttpAuthenticationConfigResponse> {
+    // Extract workspace_id and folder_id from the model to resolve the environment chain
+    let (workspace_id, folder_id) = match &model {
+        AnyModel::HttpRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::GrpcRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::WebsocketRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::Folder(f) => (f.workspace_id.clone(), f.folder_id.clone()),
+        AnyModel::Workspace(w) => (w.id.clone(), None),
+        _ => return Err(GenericError("Unsupported model type for authentication config".into())),
+    };
+
+    // Resolve environment chain and render the values for token lookup
+    let environment_chain = app_handle.db().resolve_environments(
+        &workspace_id,
+        folder_id.as_deref(),
+        environment_id,
+    )?;
+    let plugin_manager_arc = Arc::new((*plugin_manager).clone());
+    let encryption_manager_arc = Arc::new((*encryption_manager).clone());
+    let cb = PluginTemplateCallback::new(
+        plugin_manager_arc,
+        encryption_manager_arc,
+        &window.plugin_context(),
+        RenderPurpose::Preview,
+    );
+
+    // Convert HashMap<String, JsonPrimitive> to serde_json::Value for rendering
+    let values_json: serde_json::Value = serde_json::to_value(&values)?;
+    let rendered_json =
+        render_json_value(values_json, environment_chain, &cb, &RenderOptions::throw()).await?;
+
+    // Convert back to HashMap<String, JsonPrimitive>
+    let rendered_values: HashMap<String, JsonPrimitive> = serde_json::from_value(rendered_json)?;
+
     Ok(plugin_manager
-        .get_http_authentication_config(&window.plugin_context(), auth_name, values, model.id())
+        .get_http_authentication_config(
+            &window.plugin_context(),
+            auth_name,
+            rendered_values,
+            model.id(),
+        )
         .await?)
 }
 
@@ -1089,19 +1151,54 @@ async fn cmd_call_grpc_request_action<R: Runtime>(
 #[tauri::command]
 async fn cmd_call_http_authentication_action<R: Runtime>(
     window: WebviewWindow<R>,
+    app_handle: AppHandle<R>,
     plugin_manager: State<'_, PluginManager>,
+    encryption_manager: State<'_, EncryptionManager>,
     auth_name: &str,
     action_index: i32,
     values: HashMap<String, JsonPrimitive>,
     model: AnyModel,
-    _environment_id: Option<&str>,
+    environment_id: Option<&str>,
 ) -> YaakResult<()> {
+    // Extract workspace_id and folder_id from the model to resolve the environment chain
+    let (workspace_id, folder_id) = match &model {
+        AnyModel::HttpRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::GrpcRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::WebsocketRequest(r) => (r.workspace_id.clone(), r.folder_id.clone()),
+        AnyModel::Folder(f) => (f.workspace_id.clone(), f.folder_id.clone()),
+        AnyModel::Workspace(w) => (w.id.clone(), None),
+        _ => return Err(GenericError("Unsupported model type for authentication action".into())),
+    };
+
+    // Resolve environment chain and render the values
+    let environment_chain = app_handle.db().resolve_environments(
+        &workspace_id,
+        folder_id.as_deref(),
+        environment_id,
+    )?;
+    let plugin_manager_arc = Arc::new((*plugin_manager).clone());
+    let encryption_manager_arc = Arc::new((*encryption_manager).clone());
+    let cb = PluginTemplateCallback::new(
+        plugin_manager_arc,
+        encryption_manager_arc,
+        &window.plugin_context(),
+        RenderPurpose::Send,
+    );
+
+    // Convert HashMap<String, JsonPrimitive> to serde_json::Value for rendering
+    let values_json: serde_json::Value = serde_json::to_value(&values)?;
+    let rendered_json =
+        render_json_value(values_json, environment_chain, &cb, &RenderOptions::throw()).await?;
+
+    // Convert back to HashMap<String, JsonPrimitive>
+    let rendered_values: HashMap<String, JsonPrimitive> = serde_json::from_value(rendered_json)?;
+
     Ok(plugin_manager
         .call_http_authentication_action(
             &window.plugin_context(),
             auth_name,
             action_index,
-            values,
+            rendered_values,
             &model.id(),
         )
         .await?)
@@ -1664,6 +1761,13 @@ pub fn run() {
             git_ext::cmd_git_add_remote,
             git_ext::cmd_git_rm_remote,
             //
+            // Plugin commands
+            plugins_ext::cmd_plugins_search,
+            plugins_ext::cmd_plugins_install,
+            plugins_ext::cmd_plugins_uninstall,
+            plugins_ext::cmd_plugins_updates,
+            plugins_ext::cmd_plugins_update_all,
+            //
             // WebSocket commands
             ws_ext::cmd_ws_upsert_request,
             ws_ext::cmd_ws_duplicate_request,

crates-tauri/yaak-app/src/notifications.rs

@@ -1,5 +1,6 @@
 use crate::error::Result;
 use crate::history::get_or_upsert_launch_info;
+use crate::models_ext::QueryManagerExt;
 use chrono::{DateTime, Utc};
 use log::{debug, info};
 use reqwest::Method;
@@ -8,9 +9,8 @@ use std::time::Instant;
 use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewWindow};
 use ts_rs::TS;
 use yaak_common::platform::get_os_str;
-use yaak_tauri_utils::api_client::yaak_api_client;
-use crate::models_ext::QueryManagerExt;
 use yaak_models::util::UpdateSource;
+use yaak_tauri_utils::api_client::yaak_api_client;
 
 // Check for updates every hour
 const MAX_UPDATE_CHECK_SECONDS: u64 = 60 * 60;

crates-tauri/yaak-app/src/plugin_events.rs

@@ -1,5 +1,7 @@
 use crate::error::Result;
 use crate::http_request::send_http_request_with_context;
+use crate::models_ext::BlobManagerExt;
+use crate::models_ext::QueryManagerExt;
 use crate::render::{render_grpc_request, render_http_request, render_json_value};
 use crate::window::{CreateWindowConfig, create_window};
 use crate::{
@@ -14,11 +16,8 @@ use tauri::{AppHandle, Emitter, Manager, Runtime};
 use tauri_plugin_clipboard_manager::ClipboardExt;
 use tauri_plugin_opener::OpenerExt;
 use yaak_crypto::manager::EncryptionManager;
-use yaak_tauri_utils::window::WorkspaceWindowTrait;
-use crate::models_ext::BlobManagerExt;
 use yaak_models::models::{AnyModel, HttpResponse, Plugin};
 use yaak_models::queries::any_request::AnyRequest;
-use crate::models_ext::QueryManagerExt;
 use yaak_models::util::UpdateSource;
 use yaak_plugins::error::Error::PluginErr;
 use yaak_plugins::events::{
@@ -32,6 +31,7 @@ use yaak_plugins::events::{
 use yaak_plugins::manager::PluginManager;
 use yaak_plugins::plugin_handle::PluginHandle;
 use yaak_plugins::template_callback::PluginTemplateCallback;
+use yaak_tauri_utils::window::WorkspaceWindowTrait;
 use yaak_templates::{RenderErrorBehavior, RenderOptions};
 
 pub(crate) async fn handle_plugin_event<R: Runtime>(
@@ -57,6 +57,10 @@ pub(crate) async fn handle_plugin_event<R: Runtime>(
             let window = get_window_from_plugin_context(app_handle, &plugin_context)?;
             Ok(call_frontend(&window, event).await)
         }
+        InternalEventPayload::PromptFormRequest(_) => {
+            let window = get_window_from_plugin_context(app_handle, &plugin_context)?;
+            Ok(call_frontend(&window, event).await)
+        }
         InternalEventPayload::FindHttpResponsesRequest(req) => {
             let http_responses = app_handle
                 .db()
@@ -166,7 +170,12 @@ pub(crate) async fn handle_plugin_event<R: Runtime>(
             )?;
             let plugin_manager = Arc::new((*app_handle.state::<PluginManager>()).clone());
             let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
-            let cb = PluginTemplateCallback::new(plugin_manager, encryption_manager, &plugin_context, req.purpose);
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                &plugin_context,
+                req.purpose,
+            );
             let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
             let grpc_request =
                 render_grpc_request(&req.grpc_request, environment_chain, &cb, &opt).await?;
@@ -187,7 +196,12 @@ pub(crate) async fn handle_plugin_event<R: Runtime>(
             )?;
             let plugin_manager = Arc::new((*app_handle.state::<PluginManager>()).clone());
             let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
-            let cb = PluginTemplateCallback::new(plugin_manager, encryption_manager, &plugin_context, req.purpose);
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                &plugin_context,
+                req.purpose,
+            );
             let opt = &RenderOptions { error_behavior: RenderErrorBehavior::Throw };
             let http_request =
                 render_http_request(&req.http_request, environment_chain, &cb, &opt).await?;
@@ -218,7 +232,12 @@ pub(crate) async fn handle_plugin_event<R: Runtime>(
             )?;
             let plugin_manager = Arc::new((*app_handle.state::<PluginManager>()).clone());
             let encryption_manager = Arc::new((*app_handle.state::<EncryptionManager>()).clone());
-            let cb = PluginTemplateCallback::new(plugin_manager, encryption_manager, &plugin_context, req.purpose);
+            let cb = PluginTemplateCallback::new(
+                plugin_manager,
+                encryption_manager,
+                &plugin_context,
+                req.purpose,
+            );
             let opt = RenderOptions { error_behavior: RenderErrorBehavior::Throw };
             let data = render_json_value(req.data, environment_chain, &cb, &opt).await?;
             Ok(Some(InternalEventPayload::TemplateRenderResponse(TemplateRenderResponse { data })))

crates-tauri/yaak-app/src/plugins_ext.rs

@@ -17,7 +17,7 @@ use tauri::path::BaseDirectory;
 use tauri::plugin::{Builder, TauriPlugin};
 use tauri::{
     AppHandle, Emitter, Manager, RunEvent, Runtime, State, WebviewWindow, WindowEvent, command,
-    generate_handler, is_dev,
+    is_dev,
 };
 use tokio::sync::Mutex;
 use ts_rs::TS;
@@ -132,7 +132,7 @@ impl PluginUpdater {
 // ============================================================================
 
 #[command]
-pub(crate) async fn cmd_plugins_search<R: Runtime>(
+pub async fn cmd_plugins_search<R: Runtime>(
     app_handle: AppHandle<R>,
     query: &str,
 ) -> Result<PluginSearchResponse> {
@@ -141,7 +141,7 @@ pub(crate) async fn cmd_plugins_search<R: Runtime>(
 }
 
 #[command]
-pub(crate) async fn cmd_plugins_install<R: Runtime>(
+pub async fn cmd_plugins_install<R: Runtime>(
     window: WebviewWindow<R>,
     name: &str,
     version: Option<String>,
@@ -163,7 +163,7 @@ pub(crate) async fn cmd_plugins_install<R: Runtime>(
 }
 
 #[command]
-pub(crate) async fn cmd_plugins_uninstall<R: Runtime>(
+pub async fn cmd_plugins_uninstall<R: Runtime>(
     plugin_id: &str,
     window: WebviewWindow<R>,
 ) -> Result<Plugin> {
@@ -174,7 +174,7 @@ pub(crate) async fn cmd_plugins_uninstall<R: Runtime>(
 }
 
 #[command]
-pub(crate) async fn cmd_plugins_updates<R: Runtime>(
+pub async fn cmd_plugins_updates<R: Runtime>(
     app_handle: AppHandle<R>,
 ) -> Result<PluginUpdatesResponse> {
     let http_client = yaak_api_client(&app_handle)?;
@@ -183,7 +183,7 @@ pub(crate) async fn cmd_plugins_updates<R: Runtime>(
 }
 
 #[command]
-pub(crate) async fn cmd_plugins_update_all<R: Runtime>(
+pub async fn cmd_plugins_update_all<R: Runtime>(
     window: WebviewWindow<R>,
 ) -> Result<Vec<PluginNameVersion>> {
     let http_client = yaak_api_client(window.app_handle())?;
@@ -233,13 +233,6 @@ pub(crate) async fn cmd_plugins_update_all<R: Runtime>(
 
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
     Builder::new("yaak-plugins")
-        .invoke_handler(generate_handler![
-            cmd_plugins_search,
-            cmd_plugins_install,
-            cmd_plugins_uninstall,
-            cmd_plugins_updates,
-            cmd_plugins_update_all
-        ])
         .setup(|app_handle, _| {
             // Resolve paths for plugin manager
             let vendored_plugin_dir = app_handle

crates-tauri/yaak-app/src/updates.rs

@@ -3,6 +3,7 @@ use std::path::PathBuf;
 use std::time::{Duration, Instant};
 
 use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
 use log::{debug, error, info, warn};
 use serde::{Deserialize, Serialize};
 use tauri::{Emitter, Listener, Manager, Runtime, WebviewWindow};
@@ -11,7 +12,6 @@ use tauri_plugin_updater::{Update, UpdaterExt};
 use tokio::task::block_in_place;
 use tokio::time::sleep;
 use ts_rs::TS;
-use crate::models_ext::QueryManagerExt;
 use yaak_models::util::generate_id;
 use yaak_plugins::manager::PluginManager;
 

crates-tauri/yaak-app/src/uri_scheme.rs

@@ -1,18 +1,18 @@
+use crate::PluginContextExt;
 use crate::error::Result;
 use crate::import::import_data;
 use crate::models_ext::QueryManagerExt;
-use crate::PluginContextExt;
 use log::{info, warn};
 use std::collections::HashMap;
 use std::fs;
 use std::sync::Arc;
 use tauri::{AppHandle, Emitter, Manager, Runtime, Url};
 use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};
-use yaak_tauri_utils::api_client::yaak_api_client;
 use yaak_models::util::generate_id;
 use yaak_plugins::events::{Color, ShowToastRequest};
 use yaak_plugins::install::download_and_install;
 use yaak_plugins::manager::PluginManager;
+use yaak_tauri_utils::api_client::yaak_api_client;
 
 pub(crate) async fn handle_deep_link<R: Runtime>(
     app_handle: &AppHandle<R>,
@@ -55,7 +55,8 @@ pub(crate) async fn handle_deep_link<R: Runtime>(
                 &plugin_context,
                 name,
                 version,
-            ).await?;
+            )
+            .await?;
             app_handle.emit(
                 "show_toast",
                 ShowToastRequest {

crates-tauri/yaak-app/src/window.rs

@@ -1,4 +1,5 @@
 use crate::error::Result;
+use crate::models_ext::QueryManagerExt;
 use crate::window_menu::app_menu;
 use log::{info, warn};
 use rand::random;
@@ -8,7 +9,6 @@ use tauri::{
 };
 use tauri_plugin_opener::OpenerExt;
 use tokio::sync::mpsc;
-use crate::models_ext::QueryManagerExt;
 
 const DEFAULT_WINDOW_WIDTH: f64 = 1100.0;
 const DEFAULT_WINDOW_HEIGHT: f64 = 600.0;

crates-tauri/yaak-app/src/ws_ext.rs

@@ -1,9 +1,9 @@
 //! WebSocket Tauri command wrappers
 //! These wrap the core yaak-ws functionality for Tauri IPC.
 
+use crate::PluginContextExt;
 use crate::error::Result;
 use crate::models_ext::QueryManagerExt;
-use crate::PluginContextExt;
 use http::HeaderMap;
 use log::{debug, info, warn};
 use std::str::FromStr;
@@ -56,9 +56,10 @@ pub async fn cmd_ws_delete_request<R: Runtime>(
     app_handle: AppHandle<R>,
     window: WebviewWindow<R>,
 ) -> Result<WebsocketRequest> {
-    Ok(app_handle
-        .db()
-        .delete_websocket_request_by_id(request_id, &UpdateSource::from_window_label(window.label()))?)
+    Ok(app_handle.db().delete_websocket_request_by_id(
+        request_id,
+        &UpdateSource::from_window_label(window.label()),
+    )?)
 }
 
 #[command]
@@ -67,12 +68,10 @@ pub async fn cmd_ws_delete_connection<R: Runtime>(
     app_handle: AppHandle<R>,
     window: WebviewWindow<R>,
 ) -> Result<WebsocketConnection> {
-    Ok(app_handle
-        .db()
-        .delete_websocket_connection_by_id(
-            connection_id,
-            &UpdateSource::from_window_label(window.label()),
-        )?)
+    Ok(app_handle.db().delete_websocket_connection_by_id(
+        connection_id,
+        &UpdateSource::from_window_label(window.label()),
+    )?)
 }
 
 #[command]
@@ -296,8 +295,10 @@ pub async fn cmd_ws_connect<R: Runtime>(
                 )
                 .await?;
             for header in plugin_result.set_headers.unwrap_or_default() {
-                match (http::HeaderName::from_str(&header.name), HeaderValue::from_str(&header.value))
-                {
+                match (
+                    http::HeaderName::from_str(&header.name),
+                    HeaderValue::from_str(&header.value),
+                ) {
                     (Ok(name), Ok(value)) => {
                         headers.insert(name, value);
                     }

crates-tauri/yaak-app/tauri.conf.json

@@ -44,8 +44,8 @@
       "vendored/protoc/include",
       "vendored/plugins",
       "vendored/plugin-runtime",
-      "vendored/node/yaaknode",
-      "vendored/protoc/yaakprotoc"
+      "vendored/node/yaaknode*",
+      "vendored/protoc/yaakprotoc*"
     ]
   }
 }

crates-tauri/yaak-license/src/license.rs

@@ -8,10 +8,10 @@ use std::time::Duration;
 use tauri::{AppHandle, Emitter, Manager, Runtime, WebviewWindow, is_dev};
 use ts_rs::TS;
 use yaak_common::platform::get_os_str;
-use yaak_tauri_utils::api_client::yaak_api_client;
 use yaak_models::db_context::DbContext;
 use yaak_models::query_manager::QueryManager;
 use yaak_models::util::UpdateSource;
+use yaak_tauri_utils::api_client::yaak_api_client;
 
 /// Extension trait for accessing the QueryManager from Tauri Manager types.
 /// This is needed temporarily until all crates are refactored to not use Tauri.

crates/yaak-common/Cargo.toml

@@ -6,3 +6,4 @@ publish = false
 
 [dependencies]
 serde_json = { workspace = true }
+tokio = { workspace = true, features = ["process"] }

crates/yaak-common/src/command.rs

@@ -0,0 +1,16 @@
+use std::ffi::OsStr;
+
+#[cfg(target_os = "windows")]
+const CREATE_NO_WINDOW: u32 = 0x0800_0000;
+
+/// Creates a new `tokio::process::Command` that won't spawn a console window on Windows.
+pub fn new_xplatform_command<S: AsRef<OsStr>>(program: S) -> tokio::process::Command {
+    #[allow(unused_mut)]
+    let mut cmd = tokio::process::Command::new(program);
+    #[cfg(target_os = "windows")]
+    {
+        use std::os::windows::process::CommandExt;
+        cmd.creation_flags(CREATE_NO_WINDOW);
+    }
+    cmd
+}

crates/yaak-common/src/lib.rs

@@ -1,2 +1,3 @@
+pub mod command;
 pub mod platform;
 pub mod serde;

crates/yaak-git/Cargo.toml

@@ -12,7 +12,9 @@ serde = { workspace = true, features = ["derive"] }
 serde_json = { workspace = true }
 serde_yaml = "0.9.34"
 thiserror = { workspace = true }
+tokio = { workspace = true, features = ["io-util"] }
 ts-rs = { workspace = true, features = ["chrono-impl", "serde-json-impl"] }
 url = "2"
+yaak-common = { workspace = true }
 yaak-models = { workspace = true }
 yaak-sync = { workspace = true }

crates/yaak-git/bindings/gen_models.ts

@@ -1,5 +1,7 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
+export type DnsOverride = { hostname: string, ipv4: Array<string>, ipv6: Array<string>, enabled?: boolean, };
+
 export type Environment = { model: "environment", id: string, workspaceId: string, createdAt: string, updatedAt: string, name: string, public: boolean, parentModel: string, parentId: string | null, variables: Array<EnvironmentVariable>, color: string | null, sortPriority: number, };
 
 export type EnvironmentVariable = { enabled?: boolean, name: string, value: string, id?: string, };
@@ -18,4 +20,4 @@ export type SyncModel = { "type": "workspace" } & Workspace | { "type": "environ
 
 export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
 
-export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, };
+export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };

crates/yaak-git/src/binary.rs

@@ -1,38 +1,24 @@
+use crate::error::Error::GitNotFound;
 use crate::error::Result;
 use std::path::Path;
-use std::process::{Command, Stdio};
+use std::process::Stdio;
+use tokio::process::Command;
+use yaak_common::command::new_xplatform_command;
 
-use crate::error::Error::GitNotFound;
-#[cfg(target_os = "windows")]
-use std::os::windows::process::CommandExt;
-
-#[cfg(target_os = "windows")]
-const CREATE_NO_WINDOW: u32 = 0x0800_0000;
-
-pub(crate) fn new_binary_command(dir: &Path) -> Result<Command> {
+pub(crate) async fn new_binary_command(dir: &Path) -> Result<Command> {
     // 1. Probe that `git` exists and is runnable
-    let mut probe = Command::new("git");
+    let mut probe = new_xplatform_command("git");
     probe.arg("--version").stdin(Stdio::null()).stdout(Stdio::null()).stderr(Stdio::null());
 
-    #[cfg(target_os = "windows")]
-    {
-        probe.creation_flags(CREATE_NO_WINDOW);
-    }
-
-    let status = probe.status().map_err(|_| GitNotFound)?;
+    let status = probe.status().await.map_err(|_| GitNotFound)?;
 
     if !status.success() {
         return Err(GitNotFound);
     }
 
     // 2. Build the reusable git command
-    let mut cmd = Command::new("git");
+    let mut cmd = new_xplatform_command("git");
     cmd.arg("-C").arg(dir);
 
-    #[cfg(target_os = "windows")]
-    {
-        cmd.creation_flags(CREATE_NO_WINDOW);
-    }
-
     Ok(cmd)
 }

crates/yaak-git/src/commit.rs

@@ -3,8 +3,9 @@ use crate::error::Error::GenericError;
 use log::info;
 use std::path::Path;
 
-pub fn git_commit(dir: &Path, message: &str) -> crate::error::Result<()> {
-    let out = new_binary_command(dir)?.args(["commit", "--message", message]).output()?;
+pub async fn git_commit(dir: &Path, message: &str) -> crate::error::Result<()> {
+    let out =
+        new_binary_command(dir).await?.args(["commit", "--message", message]).output().await?;
 
     let stdout = String::from_utf8_lossy(&out.stdout);
     let stderr = String::from_utf8_lossy(&out.stderr);

crates/yaak-git/src/credential.rs

@@ -1,9 +1,9 @@
 use crate::binary::new_binary_command;
 use crate::error::Error::GenericError;
 use crate::error::Result;
-use std::io::Write;
 use std::path::Path;
 use std::process::Stdio;
+use tokio::io::AsyncWriteExt;
 use url::Url;
 
 pub async fn git_add_credential(
@@ -18,7 +18,8 @@ pub async fn git_add_credential(
     let host = url.host_str().unwrap();
     let path = Some(url.path());
 
-    let mut child = new_binary_command(dir)?
+    let mut child = new_binary_command(dir)
+        .await?
         .args(["credential", "approve"])
         .stdin(Stdio::piped())
         .stdout(Stdio::null())
@@ -26,19 +27,21 @@ pub async fn git_add_credential(
 
     {
         let stdin = child.stdin.as_mut().unwrap();
-        writeln!(stdin, "protocol={}", protocol)?;
-        writeln!(stdin, "host={}", host)?;
+        stdin.write_all(format!("protocol={}\n", protocol).as_bytes()).await?;
+        stdin.write_all(format!("host={}\n", host).as_bytes()).await?;
         if let Some(path) = path {
             if !path.is_empty() {
-                writeln!(stdin, "path={}", path.trim_start_matches('/'))?;
+                stdin
+                    .write_all(format!("path={}\n", path.trim_start_matches('/')).as_bytes())
+                    .await?;
             }
         }
-        writeln!(stdin, "username={}", username)?;
-        writeln!(stdin, "password={}", password)?;
-        writeln!(stdin)?; // blank line terminator
+        stdin.write_all(format!("username={}\n", username).as_bytes()).await?;
+        stdin.write_all(format!("password={}\n", password).as_bytes()).await?;
+        stdin.write_all(b"\n").await?; // blank line terminator
     }
 
-    let status = child.wait()?;
+    let status = child.wait().await?;
     if !status.success() {
         return Err(GenericError("Failed to approve git credential".to_string()));
     }

crates/yaak-git/src/fetch.rs

@@ -3,10 +3,12 @@ use crate::error::Error::GenericError;
 use crate::error::Result;
 use std::path::Path;
 
-pub fn git_fetch_all(dir: &Path) -> Result<()> {
-    let out = new_binary_command(dir)?
+pub async fn git_fetch_all(dir: &Path) -> Result<()> {
+    let out = new_binary_command(dir)
+        .await?
         .args(["fetch", "--all", "--prune", "--tags"])
         .output()
+        .await
         .map_err(|e| GenericError(format!("failed to run git pull: {e}")))?;
     let stdout = String::from_utf8_lossy(&out.stdout);
     let stderr = String::from_utf8_lossy(&out.stderr);

crates/yaak-git/src/pull.rs

@@ -17,17 +17,25 @@ pub enum PullResult {
     NeedsCredentials { url: String, error: Option<String> },
 }
 
-pub fn git_pull(dir: &Path) -> Result<PullResult> {
-    let repo = open_repo(dir)?;
-    let branch_name = get_current_branch_name(&repo)?;
-    let remote = get_default_remote_in_repo(&repo)?;
-    let remote_name = remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?;
-    let remote_url = remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?;
+pub async fn git_pull(dir: &Path) -> Result<PullResult> {
+    // Extract all git2 data before any await points (git2 types are not Send)
+    let (branch_name, remote_name, remote_url) = {
+        let repo = open_repo(dir)?;
+        let branch_name = get_current_branch_name(&repo)?;
+        let remote = get_default_remote_in_repo(&repo)?;
+        let remote_name =
+            remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?.to_string();
+        let remote_url =
+            remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?.to_string();
+        (branch_name, remote_name, remote_url)
+    };
 
-    let out = new_binary_command(dir)?
+    let out = new_binary_command(dir)
+        .await?
         .args(["pull", &remote_name, &branch_name])
         .env("GIT_TERMINAL_PROMPT", "0")
         .output()
+        .await
         .map_err(|e| GenericError(format!("failed to run git pull: {e}")))?;
 
     let stdout = String::from_utf8_lossy(&out.stdout);

crates/yaak-git/src/push.rs

@@ -17,17 +17,25 @@ pub enum PushResult {
     NeedsCredentials { url: String, error: Option<String> },
 }
 
-pub fn git_push(dir: &Path) -> Result<PushResult> {
-    let repo = open_repo(dir)?;
-    let branch_name = get_current_branch_name(&repo)?;
-    let remote = get_default_remote_for_push_in_repo(&repo)?;
-    let remote_name = remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?;
-    let remote_url = remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?;
+pub async fn git_push(dir: &Path) -> Result<PushResult> {
+    // Extract all git2 data before any await points (git2 types are not Send)
+    let (branch_name, remote_name, remote_url) = {
+        let repo = open_repo(dir)?;
+        let branch_name = get_current_branch_name(&repo)?;
+        let remote = get_default_remote_for_push_in_repo(&repo)?;
+        let remote_name =
+            remote.name().ok_or(GenericError("Failed to get remote name".to_string()))?.to_string();
+        let remote_url =
+            remote.url().ok_or(GenericError("Failed to get remote url".to_string()))?.to_string();
+        (branch_name, remote_name, remote_url)
+    };
 
-    let out = new_binary_command(dir)?
+    let out = new_binary_command(dir)
+        .await?
         .args(["push", &remote_name, &branch_name])
         .env("GIT_TERMINAL_PROMPT", "0")
         .output()
+        .await
         .map_err(|e| GenericError(format!("failed to run git push: {e}")))?;
 
     let stdout = String::from_utf8_lossy(&out.stdout);

crates/yaak-grpc/Cargo.toml

@@ -22,5 +22,6 @@ tokio-stream = "0.1.14"
 tonic = { version = "0.12.3", default-features = false, features = ["transport"] }
 tonic-reflection = "0.12.3"
 uuid = { version = "1.7.0", features = ["v4"] }
+yaak-common = { workspace = true }
 yaak-tls = { workspace = true }
 thiserror = "2.0.17"

crates/yaak-grpc/src/manager.rs

@@ -115,14 +115,18 @@ impl GrpcConnection {
         Ok(client.unary(req, path, codec).await?)
     }
 
-    pub async fn streaming(
+    pub async fn streaming<F>(
         &self,
         service: &str,
         method: &str,
         stream: ReceiverStream<String>,
         metadata: &BTreeMap<String, String>,
         client_cert: Option<ClientCertificateConfig>,
-    ) -> Result<Response<Streaming<DynamicMessage>>> {
+        on_message: F,
+    ) -> Result<Response<Streaming<DynamicMessage>>>
+    where
+        F: Fn(std::result::Result<String, String>) + Send + Sync + Clone + 'static,
+    {
         let method = &self.method(&service, &method).await?;
         let mapped_stream = {
             let input_message = method.input();
@@ -131,31 +135,39 @@ impl GrpcConnection {
             let md = metadata.clone();
             let use_reflection = self.use_reflection.clone();
             let client_cert = client_cert.clone();
-            stream.filter_map(move |json| {
-                let pool = pool.clone();
-                let uri = uri.clone();
-                let input_message = input_message.clone();
-                let md = md.clone();
-                let use_reflection = use_reflection.clone();
-                let client_cert = client_cert.clone();
-                tokio::runtime::Handle::current().block_on(async move {
-                    if use_reflection {
-                        if let Err(e) =
-                            reflect_types_for_message(pool, &uri, &json, &md, client_cert).await
-                        {
-                            warn!("Failed to resolve Any types: {e}");
+            stream
+                .then(move |json| {
+                    let pool = pool.clone();
+                    let uri = uri.clone();
+                    let input_message = input_message.clone();
+                    let md = md.clone();
+                    let use_reflection = use_reflection.clone();
+                    let client_cert = client_cert.clone();
+                    let on_message = on_message.clone();
+                    let json_clone = json.clone();
+                    async move {
+                        if use_reflection {
+                            if let Err(e) =
+                                reflect_types_for_message(pool, &uri, &json, &md, client_cert).await
+                            {
+                                warn!("Failed to resolve Any types: {e}");
+                            }
                         }
-                    }
-                    let mut de = Deserializer::from_str(&json);
-                    match DynamicMessage::deserialize(input_message, &mut de) {
-                        Ok(m) => Some(m),
-                        Err(e) => {
-                            warn!("Failed to deserialize message: {e}");
-                            None
+                        let mut de = Deserializer::from_str(&json);
+                        match DynamicMessage::deserialize(input_message, &mut de) {
+                            Ok(m) => {
+                                on_message(Ok(json_clone));
+                                Some(m)
+                            }
+                            Err(e) => {
+                                warn!("Failed to deserialize message: {e}");
+                                on_message(Err(e.to_string()));
+                                None
+                            }
                         }
                     }
                 })
-            })
+                .filter_map(|x| x)
         };
 
         let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
@@ -169,14 +181,18 @@ impl GrpcConnection {
         Ok(client.streaming(req, path, codec).await?)
     }
 
-    pub async fn client_streaming(
+    pub async fn client_streaming<F>(
         &self,
         service: &str,
         method: &str,
         stream: ReceiverStream<String>,
         metadata: &BTreeMap<String, String>,
         client_cert: Option<ClientCertificateConfig>,
-    ) -> Result<Response<DynamicMessage>> {
+        on_message: F,
+    ) -> Result<Response<DynamicMessage>>
+    where
+        F: Fn(std::result::Result<String, String>) + Send + Sync + Clone + 'static,
+    {
         let method = &self.method(&service, &method).await?;
         let mapped_stream = {
             let input_message = method.input();
@@ -185,31 +201,39 @@ impl GrpcConnection {
             let md = metadata.clone();
             let use_reflection = self.use_reflection.clone();
             let client_cert = client_cert.clone();
-            stream.filter_map(move |json| {
-                let pool = pool.clone();
-                let uri = uri.clone();
-                let input_message = input_message.clone();
-                let md = md.clone();
-                let use_reflection = use_reflection.clone();
-                let client_cert = client_cert.clone();
-                tokio::runtime::Handle::current().block_on(async move {
-                    if use_reflection {
-                        if let Err(e) =
-                            reflect_types_for_message(pool, &uri, &json, &md, client_cert).await
-                        {
-                            warn!("Failed to resolve Any types: {e}");
+            stream
+                .then(move |json| {
+                    let pool = pool.clone();
+                    let uri = uri.clone();
+                    let input_message = input_message.clone();
+                    let md = md.clone();
+                    let use_reflection = use_reflection.clone();
+                    let client_cert = client_cert.clone();
+                    let on_message = on_message.clone();
+                    let json_clone = json.clone();
+                    async move {
+                        if use_reflection {
+                            if let Err(e) =
+                                reflect_types_for_message(pool, &uri, &json, &md, client_cert).await
+                            {
+                                warn!("Failed to resolve Any types: {e}");
+                            }
                         }
-                    }
-                    let mut de = Deserializer::from_str(&json);
-                    match DynamicMessage::deserialize(input_message, &mut de) {
-                        Ok(m) => Some(m),
-                        Err(e) => {
-                            warn!("Failed to deserialize message: {e}");
-                            None
+                        let mut de = Deserializer::from_str(&json);
+                        match DynamicMessage::deserialize(input_message, &mut de) {
+                            Ok(m) => {
+                                on_message(Ok(json_clone));
+                                Some(m)
+                            }
+                            Err(e) => {
+                                warn!("Failed to deserialize message: {e}");
+                                on_message(Err(e.to_string()));
+                                None
+                            }
                         }
                     }
                 })
-            })
+                .filter_map(|x| x)
         };
 
         let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
@@ -316,10 +340,9 @@ impl GrpcHandle {
         metadata: &BTreeMap<String, String>,
         validate_certificates: bool,
         client_cert: Option<ClientCertificateConfig>,
-        skip_cache: bool,
     ) -> Result<Vec<ServiceDefinition>> {
         // Ensure we have a pool; reflect only if missing
-        if skip_cache || self.get_pool(id, uri, proto_files).is_none() {
+        if self.get_pool(id, uri, proto_files).is_none() {
             info!("Reflecting gRPC services for {} at {}", id, uri);
             self.reflect(id, uri, proto_files, metadata, validate_certificates, client_cert)
                 .await?;

crates/yaak-grpc/src/reflection.rs

@@ -16,12 +16,12 @@ use std::path::{Path, PathBuf};
 use std::str::FromStr;
 use std::sync::Arc;
 use tokio::fs;
-use tokio::process::Command;
 use tokio::sync::RwLock;
 use tonic::codegen::http::uri::PathAndQuery;
 use tonic::transport::Uri;
 use tonic_reflection::pb::v1::server_reflection_request::MessageRequest;
 use tonic_reflection::pb::v1::server_reflection_response::MessageResponse;
+use yaak_common::command::new_xplatform_command;
 use yaak_tls::ClientCertificateConfig;
 
 pub async fn fill_pool_from_files(
@@ -91,11 +91,11 @@ pub async fn fill_pool_from_files(
 
     info!("Invoking protoc with {}", args.join(" "));
 
-    let out = Command::new(&config.protoc_bin_path)
-        .args(&args)
-        .output()
-        .await
-        .map_err(|e| GenericError(format!("Failed to run protoc: {}", e)))?;
+    let mut cmd = new_xplatform_command(&config.protoc_bin_path);
+    cmd.args(&args);
+
+    let out =
+        cmd.output().await.map_err(|e| GenericError(format!("Failed to run protoc: {}", e)))?;
 
     if !out.status.success() {
         return Err(GenericError(format!(

crates/yaak-http/src/client.rs

@@ -2,6 +2,8 @@ use crate::dns::LocalhostResolver;
 use crate::error::Result;
 use log::{debug, info, warn};
 use reqwest::{Client, Proxy, redirect};
+use std::sync::Arc;
+use yaak_models::models::DnsOverride;
 use yaak_tls::{ClientCertificateConfig, get_tls_config};
 
 #[derive(Clone)]
@@ -28,10 +30,14 @@ pub struct HttpConnectionOptions {
     pub validate_certificates: bool,
     pub proxy: HttpConnectionProxySetting,
     pub client_certificate: Option<ClientCertificateConfig>,
+    pub dns_overrides: Vec<DnsOverride>,
 }
 
 impl HttpConnectionOptions {
-    pub(crate) fn build_client(&self) -> Result<Client> {
+    /// Build a reqwest Client and return it along with the DNS resolver.
+    /// The resolver is returned separately so it can be configured per-request
+    /// to emit DNS timing events to the appropriate channel.
+    pub(crate) fn build_client(&self) -> Result<(Client, Arc<LocalhostResolver>)> {
         let mut client = Client::builder()
             .connection_verbose(true)
             .redirect(redirect::Policy::none())
@@ -40,15 +46,19 @@ impl HttpConnectionOptions {
             .no_brotli()
             .no_deflate()
             .referer(false)
-            .tls_info(true);
+            .tls_info(true)
+            // Disable connection pooling to ensure DNS resolution happens on each request
+            // This is needed so we can emit DNS timing events for each request
+            .pool_max_idle_per_host(0);
 
         // Configure TLS with optional client certificate
         let config =
             get_tls_config(self.validate_certificates, true, self.client_certificate.clone())?;
         client = client.use_preconfigured_tls(config);
 
-        // Configure DNS resolver
-        client = client.dns_resolver(LocalhostResolver::new());
+        // Configure DNS resolver - keep a reference to configure per-request
+        let resolver = LocalhostResolver::new(self.dns_overrides.clone());
+        client = client.dns_resolver(resolver.clone());
 
         // Configure proxy
         match self.proxy.clone() {
@@ -69,7 +79,7 @@ impl HttpConnectionOptions {
             self.client_certificate.is_some()
         );
 
-        Ok(client.build()?)
+        Ok((client.build()?, resolver))
     }
 }
 

crates/yaak-http/src/dns.rs

@@ -1,53 +1,185 @@
+use crate::sender::HttpResponseEvent;
 use hyper_util::client::legacy::connect::dns::{
     GaiResolver as HyperGaiResolver, Name as HyperName,
 };
+use log::info;
 use reqwest::dns::{Addrs, Name, Resolve, Resolving};
+use std::collections::HashMap;
 use std::net::{IpAddr, Ipv4Addr, Ipv6Addr, SocketAddr};
 use std::str::FromStr;
 use std::sync::Arc;
+use std::time::Instant;
+use tokio::sync::{RwLock, mpsc};
 use tower_service::Service;
+use yaak_models::models::DnsOverride;
+
+/// Stores resolved addresses for a hostname override
+#[derive(Clone)]
+pub struct ResolvedOverride {
+    pub ipv4: Vec<Ipv4Addr>,
+    pub ipv6: Vec<Ipv6Addr>,
+}
 
 #[derive(Clone)]
 pub struct LocalhostResolver {
     fallback: HyperGaiResolver,
+    event_tx: Arc<RwLock<Option<mpsc::Sender<HttpResponseEvent>>>>,
+    overrides: Arc<HashMap<String, ResolvedOverride>>,
 }
 
 impl LocalhostResolver {
-    pub fn new() -> Arc<Self> {
+    pub fn new(dns_overrides: Vec<DnsOverride>) -> Arc<Self> {
         let resolver = HyperGaiResolver::new();
-        Arc::new(Self { fallback: resolver })
+
+        // Pre-parse DNS overrides into a lookup map
+        let mut overrides = HashMap::new();
+        for o in dns_overrides {
+            if !o.enabled {
+                continue;
+            }
+            let hostname = o.hostname.to_lowercase();
+
+            let ipv4: Vec<Ipv4Addr> =
+                o.ipv4.iter().filter_map(|s| s.parse::<Ipv4Addr>().ok()).collect();
+
+            let ipv6: Vec<Ipv6Addr> =
+                o.ipv6.iter().filter_map(|s| s.parse::<Ipv6Addr>().ok()).collect();
+
+            // Only add if at least one address is valid
+            if !ipv4.is_empty() || !ipv6.is_empty() {
+                overrides.insert(hostname, ResolvedOverride { ipv4, ipv6 });
+            }
+        }
+
+        Arc::new(Self {
+            fallback: resolver,
+            event_tx: Arc::new(RwLock::new(None)),
+            overrides: Arc::new(overrides),
+        })
+    }
+
+    /// Set the event sender for the current request.
+    /// This should be called before each request to direct DNS events
+    /// to the appropriate channel.
+    pub async fn set_event_sender(&self, tx: Option<mpsc::Sender<HttpResponseEvent>>) {
+        let mut guard = self.event_tx.write().await;
+        *guard = tx;
     }
 }
 
 impl Resolve for LocalhostResolver {
     fn resolve(&self, name: Name) -> Resolving {
         let host = name.as_str().to_lowercase();
+        let event_tx = self.event_tx.clone();
+        let overrides = self.overrides.clone();
 
+        info!("DNS resolve called for: {}", host);
+
+        // Check for DNS override first
+        if let Some(resolved) = overrides.get(&host) {
+            log::debug!("DNS override found for: {}", host);
+            let hostname = host.clone();
+            let mut addrs: Vec<SocketAddr> = Vec::new();
+
+            // Add IPv4 addresses
+            for ip in &resolved.ipv4 {
+                addrs.push(SocketAddr::new(IpAddr::V4(*ip), 0));
+            }
+
+            // Add IPv6 addresses
+            for ip in &resolved.ipv6 {
+                addrs.push(SocketAddr::new(IpAddr::V6(*ip), 0));
+            }
+
+            let addresses: Vec<String> = addrs.iter().map(|a| a.ip().to_string()).collect();
+
+            return Box::pin(async move {
+                // Emit DNS event for override
+                let guard = event_tx.read().await;
+                if let Some(tx) = guard.as_ref() {
+                    let _ = tx
+                        .send(HttpResponseEvent::DnsResolved {
+                            hostname,
+                            addresses,
+                            duration: 0,
+                            overridden: true,
+                        })
+                        .await;
+                }
+
+                Ok::<Addrs, Box<dyn std::error::Error + Send + Sync>>(Box::new(addrs.into_iter()))
+            });
+        }
+
+        // Check for .localhost suffix
         let is_localhost = host.ends_with(".localhost");
         if is_localhost {
+            let hostname = host.clone();
             // Port 0 is fine; reqwest replaces it with the URL's explicit
-            // port or the scheme’s default (80/443, etc.).
-            // (See docs note below.)
+            // port or the scheme's default (80/443, etc.).
             let addrs: Vec<SocketAddr> = vec![
                 SocketAddr::new(IpAddr::V4(Ipv4Addr::LOCALHOST), 0),
                 SocketAddr::new(IpAddr::V6(Ipv6Addr::LOCALHOST), 0),
             ];
 
+            let addresses: Vec<String> = addrs.iter().map(|a| a.ip().to_string()).collect();
+
             return Box::pin(async move {
+                // Emit DNS event for localhost resolution
+                let guard = event_tx.read().await;
+                if let Some(tx) = guard.as_ref() {
+                    let _ = tx
+                        .send(HttpResponseEvent::DnsResolved {
+                            hostname,
+                            addresses,
+                            duration: 0,
+                            overridden: false,
+                        })
+                        .await;
+                }
+
                 Ok::<Addrs, Box<dyn std::error::Error + Send + Sync>>(Box::new(addrs.into_iter()))
             });
         }
 
+        // Fall back to system DNS
         let mut fallback = self.fallback.clone();
         let name_str = name.as_str().to_string();
+        let hostname = host.clone();
+
         Box::pin(async move {
-            match HyperName::from_str(&name_str) {
-                Ok(n) => fallback
-                    .call(n)
-                    .await
-                    .map(|addrs| Box::new(addrs) as Addrs)
-                    .map_err(|err| Box::new(err) as Box<dyn std::error::Error + Send + Sync>),
-                Err(e) => Err(Box::new(e) as Box<dyn std::error::Error + Send + Sync>),
+            let start = Instant::now();
+
+            let result = match HyperName::from_str(&name_str) {
+                Ok(n) => fallback.call(n).await,
+                Err(e) => return Err(Box::new(e) as Box<dyn std::error::Error + Send + Sync>),
+            };
+
+            let duration = start.elapsed().as_millis() as u64;
+
+            match result {
+                Ok(addrs) => {
+                    // Collect addresses for event emission
+                    let addr_vec: Vec<SocketAddr> = addrs.collect();
+                    let addresses: Vec<String> =
+                        addr_vec.iter().map(|a| a.ip().to_string()).collect();
+
+                    // Emit DNS event
+                    let guard = event_tx.read().await;
+                    if let Some(tx) = guard.as_ref() {
+                        let _ = tx
+                            .send(HttpResponseEvent::DnsResolved {
+                                hostname,
+                                addresses,
+                                duration,
+                                overridden: false,
+                            })
+                            .await;
+                    }
+
+                    Ok(Box::new(addr_vec.into_iter()) as Addrs)
+                }
+                Err(err) => Err(Box::new(err) as Box<dyn std::error::Error + Send + Sync>),
             }
         })
     }

crates/yaak-http/src/manager.rs

@@ -1,4 +1,5 @@
 use crate::client::HttpConnectionOptions;
+use crate::dns::LocalhostResolver;
 use crate::error::Result;
 use log::info;
 use reqwest::Client;
@@ -7,8 +8,15 @@ use std::sync::Arc;
 use std::time::{Duration, Instant};
 use tokio::sync::RwLock;
 
+/// A cached HTTP client along with its DNS resolver.
+/// The resolver is needed to set the event sender per-request.
+pub struct CachedClient {
+    pub client: Client,
+    pub resolver: Arc<LocalhostResolver>,
+}
+
 pub struct HttpConnectionManager {
-    connections: Arc<RwLock<BTreeMap<String, (Client, Instant)>>>,
+    connections: Arc<RwLock<BTreeMap<String, (CachedClient, Instant)>>>,
     ttl: Duration,
 }
 
@@ -20,21 +28,26 @@ impl HttpConnectionManager {
         }
     }
 
-    pub async fn get_client(&self, opt: &HttpConnectionOptions) -> Result<Client> {
+    pub async fn get_client(&self, opt: &HttpConnectionOptions) -> Result<CachedClient> {
         let mut connections = self.connections.write().await;
         let id = opt.id.clone();
 
         // Clean old connections
         connections.retain(|_, (_, last_used)| last_used.elapsed() <= self.ttl);
 
-        if let Some((c, last_used)) = connections.get_mut(&id) {
+        if let Some((cached, last_used)) = connections.get_mut(&id) {
             info!("Re-using HTTP client {id}");
             *last_used = Instant::now();
-            return Ok(c.clone());
+            return Ok(CachedClient {
+                client: cached.client.clone(),
+                resolver: cached.resolver.clone(),
+            });
         }
 
-        let c = opt.build_client()?;
-        connections.insert(id.into(), (c.clone(), Instant::now()));
-        Ok(c)
+        let (client, resolver) = opt.build_client()?;
+        let cached = CachedClient { client: client.clone(), resolver: resolver.clone() };
+        connections.insert(id.into(), (cached, Instant::now()));
+
+        Ok(CachedClient { client, resolver })
     }
 }

crates/yaak-http/src/sender.rs

@@ -45,6 +45,12 @@ pub enum HttpResponseEvent {
     ChunkReceived {
         bytes: usize,
     },
+    DnsResolved {
+        hostname: String,
+        addresses: Vec<String>,
+        duration: u64,
+        overridden: bool,
+    },
 }
 
 impl Display for HttpResponseEvent {
@@ -67,6 +73,19 @@ impl Display for HttpResponseEvent {
             HttpResponseEvent::HeaderDown(name, value) => write!(f, "< {}: {}", name, value),
             HttpResponseEvent::ChunkSent { bytes } => write!(f, "> [{} bytes sent]", bytes),
             HttpResponseEvent::ChunkReceived { bytes } => write!(f, "< [{} bytes received]", bytes),
+            HttpResponseEvent::DnsResolved { hostname, addresses, duration, overridden } => {
+                if *overridden {
+                    write!(f, "* DNS override {} -> {}", hostname, addresses.join(", "))
+                } else {
+                    write!(
+                        f,
+                        "* DNS resolved {} to {} ({}ms)",
+                        hostname,
+                        addresses.join(", "),
+                        duration
+                    )
+                }
+            }
         }
     }
 }
@@ -93,6 +112,9 @@ impl From<HttpResponseEvent> for yaak_models::models::HttpResponseEventData {
             HttpResponseEvent::HeaderDown(name, value) => D::HeaderDown { name, value },
             HttpResponseEvent::ChunkSent { bytes } => D::ChunkSent { bytes },
             HttpResponseEvent::ChunkReceived { bytes } => D::ChunkReceived { bytes },
+            HttpResponseEvent::DnsResolved { hostname, addresses, duration, overridden } => {
+                D::DnsResolved { hostname, addresses, duration, overridden }
+            }
         }
     }
 }
@@ -354,6 +376,9 @@ impl HttpSender for ReqwestSender {
 
         // Add headers
         for header in request.headers {
+            if header.0.is_empty() {
+                continue;
+            }
             req_builder = req_builder.header(&header.0, &header.1);
         }
 

crates/yaak-http/src/transaction.rs

@@ -342,7 +342,8 @@ mod tests {
 
     #[tokio::test]
     async fn test_transaction_single_redirect() {
-        let redirect_headers = vec![("Location".to_string(), "https://example.com/new".to_string())];
+        let redirect_headers =
+            vec![("Location".to_string(), "https://example.com/new".to_string())];
 
         let responses = vec![
             MockResponse { status: 302, headers: redirect_headers, body: vec![] },
@@ -373,7 +374,8 @@ mod tests {
 
     #[tokio::test]
     async fn test_transaction_max_redirects_exceeded() {
-        let redirect_headers = vec![("Location".to_string(), "https://example.com/loop".to_string())];
+        let redirect_headers =
+            vec![("Location".to_string(), "https://example.com/loop".to_string())];
 
         // Create more redirects than allowed
         let responses: Vec<MockResponse> = (0..12)
@@ -525,7 +527,8 @@ mod tests {
                 _request: SendableHttpRequest,
                 _event_tx: mpsc::Sender<HttpResponseEvent>,
             ) -> Result<HttpResponse> {
-                let headers = vec![("set-cookie".to_string(), "session=xyz789; Path=/".to_string())];
+                let headers =
+                    vec![("set-cookie".to_string(), "session=xyz789; Path=/".to_string())];
 
                 let body_stream: Pin<Box<dyn AsyncRead + Send>> =
                     Box::pin(std::io::Cursor::new(vec![]));
@@ -584,7 +587,10 @@ mod tests {
                 let headers = vec![
                     ("set-cookie".to_string(), "session=abc123; Path=/".to_string()),
                     ("set-cookie".to_string(), "user_id=42; Path=/".to_string()),
-                    ("set-cookie".to_string(), "preferences=dark; Path=/; Max-Age=86400".to_string()),
+                    (
+                        "set-cookie".to_string(),
+                        "preferences=dark; Path=/; Max-Age=86400".to_string(),
+                    ),
                 ];
 
                 let body_stream: Pin<Box<dyn AsyncRead + Send>> =

crates/yaak-models/bindings/gen_models.ts

@@ -12,6 +12,8 @@ export type CookieExpires = { "AtUtc": string } | "SessionEnd";
 
 export type CookieJar = { model: "cookie_jar", id: string, createdAt: string, updatedAt: string, workspaceId: string, cookies: Array<Cookie>, name: string, };
 
+export type DnsOverride = { hostname: string, ipv4: Array<string>, ipv6: Array<string>, enabled?: boolean, };
+
 export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
 
 export type EncryptedKey = { encryptedKey: string, };
@@ -38,7 +40,7 @@ export type HttpRequest = { model: "http_request", id: string, createdAt: string
 
 export type HttpRequestHeader = { enabled?: boolean, name: string, value: string, id?: string, };
 
-export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
+export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, elapsedDns: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
 
 export type HttpResponseEvent = { model: "http_response_event", id: string, createdAt: string, updatedAt: string, workspaceId: string, responseId: string, event: HttpResponseEventData, };
 
@@ -47,7 +49,7 @@ export type HttpResponseEvent = { model: "http_response_event", id: string, crea
  * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
  * The `From` impl is in yaak-http to avoid circular dependencies.
  */
-export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, };
+export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, } | { "type": "dns_resolved", hostname: string, addresses: Array<string>, duration: bigint, overridden: boolean, };
 
 export type HttpResponseHeader = { name: string, value: string, };
 
@@ -91,6 +93,6 @@ export type WebsocketMessageType = "text" | "binary";
 
 export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
 
-export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, };
+export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };
 
 export type WorkspaceMeta = { model: "workspace_meta", id: string, workspaceId: string, createdAt: string, updatedAt: string, encryptionKey: EncryptedKey | null, settingSyncDir: string | null, };

crates/yaak-models/guest-js/store.ts

@@ -206,6 +206,34 @@ export function replaceModelsInStore<
   });
 }
 
+export function mergeModelsInStore<
+  M extends AnyModel['model'],
+  T extends Extract<AnyModel, { model: M }>,
+>(model: M, models: T[], filter?: (model: T) => boolean) {
+  mustStore().set(modelStoreDataAtom, (prev: ModelStoreData) => {
+    const existingModels = { ...prev[model] } as Record<string, T>;
+
+    // Merge in new models first
+    for (const m of models) {
+      existingModels[m.id] = m;
+    }
+
+    // Then filter out unwanted models
+    if (filter) {
+      for (const [id, m] of Object.entries(existingModels)) {
+        if (!filter(m)) {
+          delete existingModels[id];
+        }
+      }
+    }
+
+    return {
+      ...prev,
+      [model]: existingModels,
+    };
+  });
+}
+
 function shouldIgnoreModel({ model, updateSource }: ModelPayload) {
   // Never ignore updates from non-user sources
   if (updateSource.type !== 'window') {

crates/yaak-models/migrations/20260111000000_dns-timing.sql

@@ -0,0 +1,2 @@
+-- Add DNS resolution timing to http_responses
+ALTER TABLE http_responses ADD COLUMN elapsed_dns INTEGER DEFAULT 0 NOT NULL;

crates/yaak-models/migrations/20260112000000_dns-overrides.sql

@@ -0,0 +1,2 @@
+-- Add DNS overrides setting to workspaces
+ALTER TABLE workspaces ADD COLUMN setting_dns_overrides TEXT DEFAULT '[]' NOT NULL;

crates/yaak-models/src/models.rs

@@ -73,6 +73,20 @@ pub struct ClientCertificate {
     pub enabled: bool,
 }
 
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Default, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "gen_models.ts")]
+pub struct DnsOverride {
+    pub hostname: String,
+    #[serde(default)]
+    pub ipv4: Vec<String>,
+    #[serde(default)]
+    pub ipv6: Vec<String>,
+    #[serde(default = "default_true")]
+    #[ts(optional, as = "Option<bool>")]
+    pub enabled: bool,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, TS)]
 #[serde(rename_all = "snake_case")]
 #[ts(export, export_to = "gen_models.ts")]
@@ -303,6 +317,8 @@ pub struct Workspace {
     #[serde(default = "default_true")]
     pub setting_follow_redirects: bool,
     pub setting_request_timeout: i32,
+    #[serde(default)]
+    pub setting_dns_overrides: Vec<DnsOverride>,
 }
 
 impl UpsertModelInfo for Workspace {
@@ -343,6 +359,7 @@ impl UpsertModelInfo for Workspace {
             (SettingFollowRedirects, self.setting_follow_redirects.into()),
             (SettingRequestTimeout, self.setting_request_timeout.into()),
             (SettingValidateCertificates, self.setting_validate_certificates.into()),
+            (SettingDnsOverrides, serde_json::to_string(&self.setting_dns_overrides)?.into()),
         ])
     }
 
@@ -359,6 +376,7 @@ impl UpsertModelInfo for Workspace {
             WorkspaceIden::SettingFollowRedirects,
             WorkspaceIden::SettingRequestTimeout,
             WorkspaceIden::SettingValidateCertificates,
+            WorkspaceIden::SettingDnsOverrides,
         ]
     }
 
@@ -368,6 +386,7 @@ impl UpsertModelInfo for Workspace {
     {
         let headers: String = row.get("headers")?;
         let authentication: String = row.get("authentication")?;
+        let setting_dns_overrides: String = row.get("setting_dns_overrides")?;
         Ok(Self {
             id: row.get("id")?,
             model: row.get("model")?,
@@ -382,6 +401,7 @@ impl UpsertModelInfo for Workspace {
             setting_follow_redirects: row.get("setting_follow_redirects")?,
             setting_request_timeout: row.get("setting_request_timeout")?,
             setting_validate_certificates: row.get("setting_validate_certificates")?,
+            setting_dns_overrides: serde_json::from_str(&setting_dns_overrides).unwrap_or_default(),
         })
     }
 }
@@ -1333,6 +1353,7 @@ pub struct HttpResponse {
     pub content_length_compressed: Option<i32>,
     pub elapsed: i32,
     pub elapsed_headers: i32,
+    pub elapsed_dns: i32,
     pub error: Option<String>,
     pub headers: Vec<HttpResponseHeader>,
     pub remote_addr: Option<String>,
@@ -1381,6 +1402,7 @@ impl UpsertModelInfo for HttpResponse {
             (ContentLengthCompressed, self.content_length_compressed.into()),
             (Elapsed, self.elapsed.into()),
             (ElapsedHeaders, self.elapsed_headers.into()),
+            (ElapsedDns, self.elapsed_dns.into()),
             (Error, self.error.into()),
             (Headers, serde_json::to_string(&self.headers)?.into()),
             (RemoteAddr, self.remote_addr.into()),
@@ -1402,6 +1424,7 @@ impl UpsertModelInfo for HttpResponse {
             HttpResponseIden::ContentLengthCompressed,
             HttpResponseIden::Elapsed,
             HttpResponseIden::ElapsedHeaders,
+            HttpResponseIden::ElapsedDns,
             HttpResponseIden::Error,
             HttpResponseIden::Headers,
             HttpResponseIden::RemoteAddr,
@@ -1435,6 +1458,7 @@ impl UpsertModelInfo for HttpResponse {
             version: r.get("version")?,
             elapsed: r.get("elapsed")?,
             elapsed_headers: r.get("elapsed_headers")?,
+            elapsed_dns: r.get("elapsed_dns").unwrap_or_default(),
             remote_addr: r.get("remote_addr")?,
             status: r.get("status")?,
             status_reason: r.get("status_reason")?,
@@ -1491,6 +1515,12 @@ pub enum HttpResponseEventData {
     ChunkReceived {
         bytes: usize,
     },
+    DnsResolved {
+        hostname: String,
+        addresses: Vec<String>,
+        duration: u64,
+        overridden: bool,
+    },
 }
 
 impl Default for HttpResponseEventData {

crates/yaak-plugins/bindings/gen_models.ts

@@ -12,6 +12,8 @@ export type CookieExpires = { "AtUtc": string } | "SessionEnd";
 
 export type CookieJar = { model: "cookie_jar", id: string, createdAt: string, updatedAt: string, workspaceId: string, cookies: Array<Cookie>, name: string, };
 
+export type DnsOverride = { hostname: string, ipv4: Array<string>, ipv6: Array<string>, enabled?: boolean, };
+
 export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
 
 export type EncryptedKey = { encryptedKey: string, };
@@ -38,7 +40,7 @@ export type HttpRequest = { model: "http_request", id: string, createdAt: string
 
 export type HttpRequestHeader = { enabled?: boolean, name: string, value: string, id?: string, };
 
-export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
+export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, elapsedDns: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
 
 export type HttpResponseEvent = { model: "http_response_event", id: string, createdAt: string, updatedAt: string, workspaceId: string, responseId: string, event: HttpResponseEventData, };
 
@@ -47,7 +49,7 @@ export type HttpResponseEvent = { model: "http_response_event", id: string, crea
  * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
  * The `From` impl is in yaak-http to avoid circular dependencies.
  */
-export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, };
+export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, } | { "type": "dns_resolved", hostname: string, addresses: Array<string>, duration: bigint, overridden: boolean, };
 
 export type HttpResponseHeader = { name: string, value: string, };
 
@@ -77,6 +79,6 @@ export type WebsocketEventType = "binary" | "close" | "frame" | "open" | "ping"
 
 export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
 
-export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, };
+export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };
 
 export type WorkspaceMeta = { model: "workspace_meta", id: string, workspaceId: string, createdAt: string, updatedAt: string, encryptionKey: EncryptedKey | null, settingSyncDir: string | null, };

crates/yaak-plugins/src/api.rs

@@ -80,10 +80,7 @@ pub async fn check_plugin_updates(
 }
 
 /// Search for plugins in the registry.
-pub async fn search_plugins(
-    http_client: &Client,
-    query: &str,
-) -> Result<PluginSearchResponse> {
+pub async fn search_plugins(http_client: &Client, query: &str) -> Result<PluginSearchResponse> {
     let mut url = build_url("/search");
     {
         let mut query_pairs = url.query_pairs_mut();

crates/yaak-plugins/src/events.rs

@@ -157,6 +157,9 @@ pub enum InternalEventPayload {
     PromptTextRequest(PromptTextRequest),
     PromptTextResponse(PromptTextResponse),
 
+    PromptFormRequest(PromptFormRequest),
+    PromptFormResponse(PromptFormResponse),
+
     WindowInfoRequest(WindowInfoRequest),
     WindowInfoResponse(WindowInfoResponse),
 
@@ -571,6 +574,28 @@ pub struct PromptTextResponse {
     pub value: Option<String>,
 }
 
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptFormRequest {
+    pub id: String,
+    pub title: String,
+    #[ts(optional)]
+    pub description: Option<String>,
+    pub inputs: Vec<FormInput>,
+    #[ts(optional)]
+    pub confirm_text: Option<String>,
+    #[ts(optional)]
+    pub cancel_text: Option<String>,
+}
+
+#[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
+#[serde(default, rename_all = "camelCase")]
+#[ts(export, export_to = "gen_events.ts")]
+pub struct PromptFormResponse {
+    pub values: Option<HashMap<String, JsonPrimitive>>,
+}
+
 #[derive(Debug, Clone, Default, Serialize, Deserialize, TS)]
 #[serde(default, rename_all = "camelCase")]
 #[ts(export, export_to = "gen_events.ts")]

crates/yaak-plugins/src/manager.rs

@@ -378,7 +378,8 @@ impl PluginManager {
         plugins: Vec<PluginHandle>,
         timeout_duration: Duration,
     ) -> Result<Vec<InternalEvent>> {
-        let label = format!("wait[{}.{}]", plugins.len(), payload.type_name());
+        let event_type = payload.type_name();
+        let label = format!("wait[{}.{}]", plugins.len(), event_type);
         let (rx_id, mut rx) = self.subscribe(label.as_str()).await;
 
         // 1. Build the events with IDs and everything
@@ -412,10 +413,21 @@ impl PluginManager {
 
                 // Timeout to prevent hanging forever if plugin doesn't respond
                 if timeout(timeout_duration, collect_events).await.is_err() {
+                    let responded_ids: Vec<&String> =
+                        found_events.iter().filter_map(|e| e.reply_id.as_ref()).collect();
+                    let non_responding: Vec<&str> = events_to_send
+                        .iter()
+                        .filter(|e| !responded_ids.contains(&&e.id))
+                        .map(|e| e.plugin_name.as_str())
+                        .collect();
                     warn!(
-                        "Timeout waiting for plugin responses. Got {}/{} responses",
+                        "Timeout ({:?}) waiting for {} responses. Got {}/{} responses. \
+                        Non-responding plugins: [{}]",
+                        timeout_duration,
+                        event_type,
                         found_events.len(),
-                        events_to_send.len()
+                        events_to_send.len(),
+                        non_responding.join(", ")
                     );
                 }
 

crates/yaak-plugins/src/native_template_functions.rs

@@ -196,7 +196,11 @@ pub fn decrypt_secure_template_function(
                     }
                 }
                 new_tokens.push(Token::Raw {
-                    text: template_function_secure_run(encryption_manager, args_map, plugin_context)?,
+                    text: template_function_secure_run(
+                        encryption_manager,
+                        args_map,
+                        plugin_context,
+                    )?,
                 });
             }
             t => {
@@ -216,7 +220,8 @@ pub fn encrypt_secure_template_function(
     plugin_context: &PluginContext,
     template: &str,
 ) -> Result<String> {
-    let decrypted = decrypt_secure_template_function(&encryption_manager, plugin_context, template)?;
+    let decrypted =
+        decrypt_secure_template_function(&encryption_manager, plugin_context, template)?;
     let tokens = Tokens {
         tokens: vec![Token::Tag {
             val: Val::Fn {
@@ -231,7 +236,12 @@ pub fn encrypt_secure_template_function(
 
     Ok(transform_args(
         tokens,
-        &PluginTemplateCallback::new(plugin_manager, encryption_manager, plugin_context, RenderPurpose::Preview),
+        &PluginTemplateCallback::new(
+            plugin_manager,
+            encryption_manager,
+            plugin_context,
+            RenderPurpose::Preview,
+        ),
     )?
     .to_string())
 }

crates/yaak-plugins/src/nodejs.rs

@@ -4,8 +4,8 @@ use std::net::SocketAddr;
 use std::path::Path;
 use std::process::Stdio;
 use tokio::io::{AsyncBufReadExt, BufReader};
-use tokio::process::Command;
 use tokio::sync::watch::Receiver;
+use yaak_common::command::new_xplatform_command;
 
 /// Start the Node.js plugin runtime process.
 ///
@@ -30,13 +30,14 @@ pub async fn start_nodejs_plugin_runtime(
         plugin_runtime_main_str
     );
 
-    let mut child = Command::new(node_bin_path)
-        .env("HOST", addr.ip().to_string())
+    let mut cmd = new_xplatform_command(node_bin_path);
+    cmd.env("HOST", addr.ip().to_string())
         .env("PORT", addr.port().to_string())
         .arg(&plugin_runtime_main_str)
         .stdout(Stdio::piped())
-        .stderr(Stdio::piped())
-        .spawn()?;
+        .stderr(Stdio::piped());
+
+    let mut child = cmd.spawn()?;
 
     info!("Spawned plugin runtime");
 

crates/yaak-plugins/src/template_callback.rs

@@ -46,7 +46,11 @@ impl TemplateCallback for PluginTemplateCallback {
         let fn_name = if fn_name == "Response" { "response" } else { fn_name };
 
         if fn_name == "secure" {
-            return template_function_secure_run(&self.encryption_manager, args, &self.plugin_context);
+            return template_function_secure_run(
+                &self.encryption_manager,
+                args,
+                &self.plugin_context,
+            );
         } else if fn_name == "keychain" || fn_name == "keyring" {
             return template_function_keychain_run(args);
         }
@@ -56,7 +60,8 @@ impl TemplateCallback for PluginTemplateCallback {
             primitive_args.insert(key, JsonPrimitive::from(value));
         }
 
-        let resp = self.plugin_manager
+        let resp = self
+            .plugin_manager
             .call_template_function(
                 &self.plugin_context,
                 fn_name,

crates/yaak-sync/bindings/gen_models.ts

@@ -1,5 +1,7 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
+export type DnsOverride = { hostname: string, ipv4: Array<string>, ipv6: Array<string>, enabled?: boolean, };
+
 export type Environment = { model: "environment", id: string, workspaceId: string, createdAt: string, updatedAt: string, name: string, public: boolean, parentModel: string, parentId: string | null, variables: Array<EnvironmentVariable>, color: string | null, sortPriority: number, };
 
 export type EnvironmentVariable = { enabled?: boolean, name: string, value: string, id?: string, };
@@ -20,4 +22,4 @@ export type SyncState = { model: "sync_state", id: string, workspaceId: string,
 
 export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
 
-export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, };
+export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };

crates/yaak-sync/src/sync.rs

@@ -296,11 +296,7 @@ pub fn compute_sync_ops(
         .collect()
 }
 
-fn workspace_models(
-    db: &DbContext,
-    version: &str,
-    workspace_id: &str,
-) -> Result<Vec<SyncModel>> {
+fn workspace_models(db: &DbContext, version: &str, workspace_id: &str) -> Result<Vec<SyncModel>> {
     // We want to include private environments here so that we can take them into account during
     // the sync process. Otherwise, they would be treated as deleted.
     let include_private_environments = true;

crates/yaak-ws/src/manager.rs

@@ -2,6 +2,7 @@ use crate::connect::ws_connect;
 use crate::error::Result;
 use futures_util::stream::SplitSink;
 use futures_util::{SinkExt, StreamExt};
+use http::HeaderMap;
 use log::{debug, info, warn};
 use std::collections::HashMap;
 use std::sync::Arc;
@@ -10,7 +11,6 @@ use tokio::net::TcpStream;
 use tokio::sync::{Mutex, mpsc};
 use tokio_tungstenite::tungstenite::Message;
 use tokio_tungstenite::tungstenite::handshake::client::Response;
-use http::HeaderMap;
 use tokio_tungstenite::tungstenite::http::HeaderValue;
 use tokio_tungstenite::{MaybeTlsStream, WebSocketStream};
 use yaak_tls::ClientCertificateConfig;

package-lock.json

@@ -7811,9 +7811,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.3.tgz",
-      "integrity": "sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w==",
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.4.tgz",
+      "integrity": "sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -15743,7 +15743,7 @@
         "@hono/mcp": "^0.2.3",
         "@hono/node-server": "^1.19.7",
         "@modelcontextprotocol/sdk": "^1.25.2",
-        "hono": "^4.11.3",
+        "hono": "^4.11.4",
         "zod": "^3.25.76"
       },
       "devDependencies": {

packages/plugin-runtime-types/README.md

@@ -17,7 +17,7 @@ npx @yaakapp/cli generate
 ```
 
 For more details on creating plugins, check out
-the [Quick Start Guide](https://feedback.yaak.app/help/articles/6911763-plugins-quick-start)
+the [Quick Start Guide](https://yaak.app/docs/plugin-development/plugins-quick-start)
 
 ## Installation
 

packages/plugin-runtime-types/src/bindings/gen_models.ts

@@ -12,6 +12,8 @@ export type CookieExpires = { "AtUtc": string } | "SessionEnd";
 
 export type CookieJar = { model: "cookie_jar", id: string, createdAt: string, updatedAt: string, workspaceId: string, cookies: Array<Cookie>, name: string, };
 
+export type DnsOverride = { hostname: string, ipv4: Array<string>, ipv6: Array<string>, enabled?: boolean, };
+
 export type EditorKeymap = "default" | "vim" | "vscode" | "emacs";
 
 export type EncryptedKey = { encryptedKey: string, };
@@ -38,7 +40,7 @@ export type HttpRequest = { model: "http_request", id: string, createdAt: string
 
 export type HttpRequestHeader = { enabled?: boolean, name: string, value: string, id?: string, };
 
-export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
+export type HttpResponse = { model: "http_response", id: string, createdAt: string, updatedAt: string, workspaceId: string, requestId: string, bodyPath: string | null, contentLength: number | null, contentLengthCompressed: number | null, elapsed: number, elapsedHeaders: number, elapsedDns: number, error: string | null, headers: Array<HttpResponseHeader>, remoteAddr: string | null, requestContentLength: number | null, requestHeaders: Array<HttpResponseHeader>, status: number, statusReason: string | null, state: HttpResponseState, url: string, version: string | null, };
 
 export type HttpResponseEvent = { model: "http_response_event", id: string, createdAt: string, updatedAt: string, workspaceId: string, responseId: string, event: HttpResponseEventData, };
 
@@ -47,7 +49,7 @@ export type HttpResponseEvent = { model: "http_response_event", id: string, crea
  * This mirrors `yaak_http::sender::HttpResponseEvent` but with serde support.
  * The `From` impl is in yaak-http to avoid circular dependencies.
  */
-export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, };
+export type HttpResponseEventData = { "type": "setting", name: string, value: string, } | { "type": "info", message: string, } | { "type": "redirect", url: string, status: number, behavior: string, } | { "type": "send_url", method: string, path: string, } | { "type": "receive_url", version: string, status: string, } | { "type": "header_up", name: string, value: string, } | { "type": "header_down", name: string, value: string, } | { "type": "chunk_sent", bytes: number, } | { "type": "chunk_received", bytes: number, } | { "type": "dns_resolved", hostname: string, addresses: Array<string>, duration: bigint, overridden: boolean, };
 
 export type HttpResponseHeader = { name: string, value: string, };
 
@@ -77,6 +79,6 @@ export type WebsocketEventType = "binary" | "close" | "frame" | "open" | "ping"
 
 export type WebsocketRequest = { model: "websocket_request", id: string, createdAt: string, updatedAt: string, workspaceId: string, folderId: string | null, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, message: string, name: string, sortPriority: number, url: string, urlParameters: Array<HttpUrlParameter>, };
 
-export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, };
+export type Workspace = { model: "workspace", id: string, createdAt: string, updatedAt: string, authentication: Record<string, any>, authenticationType: string | null, description: string, headers: Array<HttpRequestHeader>, name: string, encryptionKeyChallenge: string | null, settingValidateCertificates: boolean, settingFollowRedirects: boolean, settingRequestTimeout: number, settingDnsOverrides: Array<DnsOverride>, };
 
 export type WorkspaceMeta = { model: "workspace_meta", id: string, workspaceId: string, createdAt: string, updatedAt: string, encryptionKey: EncryptedKey | null, settingSyncDir: string | null, };

packages/plugin-runtime-types/src/plugins/Context.ts

@@ -11,6 +11,8 @@ import type {
   ListHttpRequestsRequest,
   ListHttpRequestsResponse,
   OpenWindowRequest,
+  PromptFormRequest,
+  PromptFormResponse,
   PromptTextRequest,
   PromptTextResponse,
   RenderGrpcRequestRequest,
@@ -37,6 +39,7 @@ export interface Context {
   };
   prompt: {
     text(args: PromptTextRequest): Promise<PromptTextResponse['value']>;
+    form(args: PromptFormRequest): Promise<PromptFormResponse['values']>;
   };
   store: {
     set<T>(key: string, value: T): Promise<void>;

packages/plugin-runtime/src/PluginInstance.ts

@@ -28,6 +28,7 @@ import type {
   ListHttpRequestsResponse,
   ListWorkspacesResponse,
   PluginContext,
+  PromptFormResponse,
   PromptTextResponse,
   RenderGrpcRequestResponse,
   RenderHttpRequestResponse,
@@ -661,6 +662,13 @@ export class PluginInstance {
           });
           return reply.value;
         },
+        form: async (args) => {
+          const reply: PromptFormResponse = await this.#sendForReply(context, {
+            type: 'prompt_form_request',
+            ...args,
+          });
+          return reply.values;
+        },
       },
       httpResponse: {
         find: async (args) => {

plugins-external/mcp-server/package.json

@@ -18,7 +18,7 @@
     "@hono/mcp": "^0.2.3",
     "@hono/node-server": "^1.19.7",
     "@modelcontextprotocol/sdk": "^1.25.2",
-    "hono": "^4.11.3",
+    "hono": "^4.11.4",
     "zod": "^3.25.76"
   },
   "devDependencies": {

src-web/components/DnsOverridesEditor.tsx

@@ -0,0 +1,181 @@
+import type { DnsOverride, Workspace } from '@yaakapp-internal/models';
+import { patchModel } from '@yaakapp-internal/models';
+import { useCallback, useId, useMemo } from 'react';
+import { Button } from './core/Button';
+import { Checkbox } from './core/Checkbox';
+import { IconButton } from './core/IconButton';
+import { PlainInput } from './core/PlainInput';
+import { HStack, VStack } from './core/Stacks';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './core/Table';
+
+interface Props {
+  workspace: Workspace;
+}
+
+interface DnsOverrideWithId extends DnsOverride {
+  _id: string;
+}
+
+export function DnsOverridesEditor({ workspace }: Props) {
+  const reactId = useId();
+
+  // Ensure each override has an internal ID for React keys
+  const overridesWithIds = useMemo<DnsOverrideWithId[]>(() => {
+    return workspace.settingDnsOverrides.map((override, index) => ({
+      ...override,
+      _id: `${reactId}-${index}`,
+    }));
+  }, [workspace.settingDnsOverrides, reactId]);
+
+  const handleChange = useCallback(
+    (overrides: DnsOverride[]) => {
+      patchModel(workspace, { settingDnsOverrides: overrides });
+    },
+    [workspace],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newOverride: DnsOverride = {
+      hostname: '',
+      ipv4: [''],
+      ipv6: [],
+      enabled: true,
+    };
+    handleChange([...workspace.settingDnsOverrides, newOverride]);
+  }, [workspace.settingDnsOverrides, handleChange]);
+
+  const handleUpdate = useCallback(
+    (index: number, update: Partial<DnsOverride>) => {
+      const updated = workspace.settingDnsOverrides.map((o, i) =>
+        i === index ? { ...o, ...update } : o,
+      );
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  const handleDelete = useCallback(
+    (index: number) => {
+      const updated = workspace.settingDnsOverrides.filter((_, i) => i !== index);
+      handleChange(updated);
+    },
+    [workspace.settingDnsOverrides, handleChange],
+  );
+
+  return (
+    <VStack space={3} className="pb-3">
+      <div className="text-text-subtle text-sm">
+        Override DNS resolution for specific hostnames. This works like{' '}
+        <code className="text-text-subtlest bg-surface-highlight px-1 rounded">/etc/hosts</code>{' '}
+        but only for requests made from this workspace.
+      </div>
+
+      {overridesWithIds.length > 0 && (
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeaderCell className="w-8" />
+              <TableHeaderCell>Hostname</TableHeaderCell>
+              <TableHeaderCell>IPv4 Address</TableHeaderCell>
+              <TableHeaderCell>IPv6 Address</TableHeaderCell>
+              <TableHeaderCell className="w-10" />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {overridesWithIds.map((override, index) => (
+              <DnsOverrideRow
+                key={override._id}
+                override={override}
+                onUpdate={(update) => handleUpdate(index, update)}
+                onDelete={() => handleDelete(index)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <HStack>
+        <Button size="xs" color="secondary" variant="border" onClick={handleAdd}>
+          Add DNS Override
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}
+
+interface DnsOverrideRowProps {
+  override: DnsOverride;
+  onUpdate: (update: Partial<DnsOverride>) => void;
+  onDelete: () => void;
+}
+
+function DnsOverrideRow({ override, onUpdate, onDelete }: DnsOverrideRowProps) {
+  const ipv4Value = override.ipv4.join(', ');
+  const ipv6Value = override.ipv6.join(', ');
+
+  return (
+    <TableRow>
+      <TableCell>
+        <Checkbox
+          hideLabel
+          title={override.enabled ? 'Disable override' : 'Enable override'}
+          checked={override.enabled ?? true}
+          onChange={(enabled) => onUpdate({ enabled })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="Hostname"
+          placeholder="api.example.com"
+          defaultValue={override.hostname}
+          onChange={(hostname) => onUpdate({ hostname })}
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv4 addresses"
+          placeholder="127.0.0.1"
+          defaultValue={ipv4Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv4: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <PlainInput
+          size="sm"
+          hideLabel
+          label="IPv6 addresses"
+          placeholder="::1"
+          defaultValue={ipv6Value}
+          onChange={(value) =>
+            onUpdate({
+              ipv6: value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+        />
+      </TableCell>
+      <TableCell>
+        <IconButton
+          size="xs"
+          iconSize="sm"
+          icon="trash"
+          title="Delete override"
+          onClick={onDelete}
+        />
+      </TableCell>
+    </TableRow>
+  );
+}

src-web/components/FolderSettingsDialog.tsx

@@ -1,6 +1,6 @@
 import { createWorkspaceModel, foldersAtom, patchModel } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useAuthTab } from '../hooks/useAuthTab';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useHeadersTab } from '../hooks/useHeadersTab';
@@ -37,7 +37,6 @@ export type FolderSettingsTab =
 export function FolderSettingsDialog({ folderId, tab }: Props) {
   const folders = useAtomValue(foldersAtom);
   const folder = folders.find((f) => f.id === folderId) ?? null;
-  const [activeTab, setActiveTab] = useState<string>(tab ?? TAB_GENERAL);
   const authTab = useAuthTab(TAB_AUTH, folder);
   const headersTab = useHeadersTab(TAB_HEADERS, folder);
   const inheritedHeaders = useInheritedHeaders(folder);
@@ -69,8 +68,7 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
 
   return (
     <Tabs
-      value={activeTab}
-      onChangeValue={setActiveTab}
+      defaultValue={tab ?? TAB_GENERAL}
       label="Folder Settings"
       className="pt-2 pb-2 pl-3 pr-1"
       layout="horizontal"
@@ -113,7 +111,7 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
             <VStack alignItems="center" space={1.5}>
               <p>
                 Override{' '}
-                <Link href="https://feedback.yaak.app/help/articles/3284139-environments-and-variables">
+                <Link href="https://yaak.app/docs/using-yaak/environments-and-variables">
                   Variables
                 </Link>{' '}
                 for requests within this folder.

src-web/components/GrpcEditor.tsx

@@ -10,7 +10,7 @@ import {
   stateExtensions,
   updateSchema,
 } from 'codemirror-json-schema';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { showAlert } from '../lib/alert';
 import { showDialog } from '../lib/dialog';
@@ -39,15 +39,15 @@ export function GrpcEditor({
   protoFiles,
   ...extraEditorProps
 }: Props) {
-  const editorViewRef = useRef<EditorView>(null);
+  const [editorView, setEditorView] = useState<EditorView | null>(null);
   const handleInitEditorViewRef = useCallback((h: EditorView | null) => {
-    editorViewRef.current = h;
+    setEditorView(h);
   }, []);
 
   // Find the schema for the selected service and method and update the editor
   useEffect(() => {
     if (
-      editorViewRef.current == null ||
+      editorView == null ||
       services === null ||
       request.service === null ||
       request.method === null
@@ -91,7 +91,7 @@ export function GrpcEditor({
     }
 
     try {
-      updateSchema(editorViewRef.current, JSON.parse(schema));
+      updateSchema(editorView, JSON.parse(schema));
     } catch (err) {
       showAlert({
         id: 'grpc-parse-schema-error',
@@ -107,7 +107,7 @@ export function GrpcEditor({
         ),
       });
     }
-  }, [services, request.method, request.service]);
+  }, [editorView, services, request.method, request.service]);
 
   const extraExtensions = useMemo(
     () => [
@@ -118,7 +118,7 @@ export function GrpcEditor({
       jsonLanguage.data.of({
         autocomplete: jsonCompletion(),
       }),
-      stateExtensions(/** Init with empty schema **/),
+      stateExtensions({}),
     ],
     [],
   );

src-web/components/GrpcRequestPane.tsx

@@ -7,7 +7,6 @@ import { useContainerSize } from '../hooks/useContainerQuery';
 import type { ReflectResponseService } from '../hooks/useGrpc';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { Button } from './core/Button';
@@ -69,11 +68,6 @@ export function GrpcRequestPane({
   const authTab = useAuthTab(TAB_AUTH, activeRequest);
   const metadataTab = useHeadersTab(TAB_METADATA, activeRequest, 'Metadata');
   const inheritedHeaders = useInheritedHeaders(activeRequest);
-  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
-    namespace: 'no_sync',
-    key: 'grpcRequestActiveTabs',
-    fallback: {},
-  });
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
 
   const urlContainerEl = useRef<HTMLDivElement>(null);
@@ -145,14 +139,6 @@ export function GrpcRequestPane({
     [activeRequest.description, authTab, metadataTab],
   );
 
-  const activeTab = activeTabs?.[activeRequest.id];
-  const setActiveTab = useCallback(
-    async (tab: string) => {
-      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
-    },
-    [activeRequest.id, setActiveTabs],
-  );
-
   const handleMetadataChange = useCallback(
     (metadata: HttpRequestHeader[]) => patchModel(activeRequest, { metadata }),
     [activeRequest],
@@ -265,12 +251,11 @@ export function GrpcRequestPane({
         </HStack>
       </div>
       <Tabs
-        value={activeTab}
         label="Request"
-        onChangeValue={setActiveTab}
         tabs={tabs}
         tabListClassName="mt-1 !mb-1.5"
-        storageKey="grpc_request_tabs_order"
+        storageKey="grpc_request_tabs"
+        activeTabKey={activeRequest.id}
       >
         <TabContent value="message">
           <GrpcEditor

src-web/components/GrpcResponsePane.tsx

@@ -1,9 +1,7 @@
 import type { GrpcEvent, GrpcRequest } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { format } from 'date-fns';
 import { useAtomValue, useSetAtom } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   activeGrpcConnectionAtom,
   activeGrpcConnections,
@@ -11,18 +9,14 @@ import {
   useGrpcEvents,
 } from '../hooks/usePinnedGrpcConnection';
 import { useStateWithDeps } from '../hooks/useStateWithDeps';
-import { copyToClipboard } from '../lib/copy';
-import { AutoScroller } from './core/AutoScroller';
-import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { Editor } from './core/Editor/LazyEditor';
+import { EventDetailHeader, EventViewer } from './core/EventViewer';
+import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
-import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
+import { Icon, type IconProps } from './core/Icon';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
 import { LoadingIcon } from './core/LoadingIcon';
-import { Separator } from './core/Separator';
-import { SplitLayout } from './core/SplitLayout';
 import { HStack, VStack } from './core/Stacks';
 import { EmptyStateText } from './EmptyStateText';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -42,7 +36,7 @@ interface Props {
 }
 
 export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
-  const [activeEventId, setActiveEventId] = useState<string | null>(null);
+  const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
   const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
   const [showingLarge, setShowingLarge] = useState<boolean>(false);
   const connections = useAtomValue(activeGrpcConnections);
@@ -51,8 +45,8 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
   const setPinnedGrpcConnectionId = useSetAtom(pinnedGrpcConnectionIdAtom);
 
   const activeEvent = useMemo(
-    () => events.find((m) => m.id === activeEventId) ?? null,
-    [activeEventId, events],
+    () => (activeEventIndex != null ? events[activeEventIndex] : null),
+    [activeEventIndex, events],
   );
 
   // Set the active message to the first message received if unary
@@ -61,223 +55,188 @@ export function GrpcResponsePane({ style, methodType, activeRequest }: Props) {
     if (events.length === 0 || activeEvent != null || methodType !== 'unary') {
       return;
     }
-    setActiveEventId(events.find((m) => m.eventType === 'server_message')?.id ?? null);
+    const firstServerMessageIndex = events.findIndex((m) => m.eventType === 'server_message');
+    if (firstServerMessageIndex !== -1) {
+      setActiveEventIndex(firstServerMessageIndex);
+    }
   }, [events.length]);
 
+  if (activeConnection == null) {
+    return (
+      <HotkeyList hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']} />
+    );
+  }
+
+  const header = (
+    <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle overflow-x-auto hide-scrollbars">
+      <HStack space={2}>
+        <span className="whitespace-nowrap">{events.length} Messages</span>
+        {activeConnection.state !== 'closed' && (
+          <LoadingIcon size="sm" className="text-text-subtlest" />
+        )}
+      </HStack>
+      <div className="ml-auto">
+        <RecentGrpcConnectionsDropdown
+          connections={connections}
+          activeConnection={activeConnection}
+          onPinnedConnectionId={setPinnedGrpcConnectionId}
+        />
+      </div>
+    </HStack>
+  );
+
   return (
-    <SplitLayout
-      layout="vertical"
-      style={style}
-      name="grpc_events"
-      defaultRatio={0.4}
-      minHeightPx={20}
-      firstSlot={() =>
-        activeConnection == null ? (
-          <HotkeyList
-            hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']}
-          />
-        ) : (
-          <div className="w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 items-center">
-            <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle overflow-x-auto hide-scrollbars">
-              <HStack space={2}>
-                <span className="whitespace-nowrap">{events.length} Messages</span>
-                {activeConnection.state !== 'closed' && (
-                  <LoadingIcon size="sm" className="text-text-subtlest" />
-                )}
-              </HStack>
-              <div className="ml-auto">
-                <RecentGrpcConnectionsDropdown
-                  connections={connections}
-                  activeConnection={activeConnection}
-                  onPinnedConnectionId={setPinnedGrpcConnectionId}
-                />
-              </div>
-            </HStack>
-            <ErrorBoundary name="GRPC Events">
-              <AutoScroller
-                data={events}
-                header={
-                  activeConnection.error && (
-                    <Banner color="danger" className="m-3">
-                      {activeConnection.error}
-                    </Banner>
-                  )
-                }
-                render={(event) => (
-                  <EventRow
-                    key={event.id}
-                    event={event}
-                    isActive={event.id === activeEventId}
-                    onClick={() => {
-                      if (event.id === activeEventId) setActiveEventId(null);
-                      else setActiveEventId(event.id);
-                    }}
-                  />
-                )}
-              />
-            </ErrorBoundary>
-          </div>
-        )
-      }
-      secondSlot={
-        activeEvent != null && activeConnection != null
-          ? () => (
-              <div className="grid grid-rows-[auto_minmax(0,1fr)]">
-                <div className="pb-3 px-2">
-                  <Separator />
-                </div>
-                <div className="h-full pl-2 overflow-y-auto grid grid-rows-[auto_minmax(0,1fr)] ">
-                  {activeEvent.eventType === 'client_message' ||
-                  activeEvent.eventType === 'server_message' ? (
-                    <>
-                      <div className="mb-2 select-text cursor-text grid grid-cols-[minmax(0,1fr)_auto] items-center">
-                        <div className="font-semibold">
-                          Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'}
-                        </div>
-                        <IconButton
-                          title="Copy message"
-                          icon="copy"
-                          size="xs"
-                          onClick={() => copyToClipboard(activeEvent.content)}
-                        />
-                      </div>
-                      {!showLarge && activeEvent.content.length > 1000 * 1000 ? (
-                        <VStack space={2} className="italic text-text-subtlest">
-                          Message previews larger than 1MB are hidden
-                          <div>
-                            <Button
-                              onClick={() => {
-                                setShowingLarge(true);
-                                setTimeout(() => {
-                                  setShowLarge(true);
-                                  setShowingLarge(false);
-                                }, 500);
-                              }}
-                              isLoading={showingLarge}
-                              color="secondary"
-                              variant="border"
-                              size="xs"
-                            >
-                              Try Showing
-                            </Button>
-                          </div>
-                        </VStack>
-                      ) : (
-                        <Editor
-                          language="json"
-                          defaultValue={activeEvent.content ?? ''}
-                          wrapLines={false}
-                          readOnly={true}
-                          stateKey={null}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
-                      <div>
-                        <div className="select-text cursor-text font-semibold">
-                          {activeEvent.content}
-                        </div>
-                        {activeEvent.error && (
-                          <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
-                            {activeEvent.error}
-                          </div>
-                        )}
-                      </div>
-                      <div className="py-2 h-full">
-                        {Object.keys(activeEvent.metadata).length === 0 ? (
-                          <EmptyStateText>
-                            No{' '}
-                            {activeEvent.eventType === 'connection_end' ? 'trailers' : 'metadata'}
-                          </EmptyStateText>
-                        ) : (
-                          <KeyValueRows>
-                            {Object.entries(activeEvent.metadata).map(([key, value]) => (
-                              <KeyValueRow key={key} label={key}>
-                                {value}
-                              </KeyValueRow>
-                            ))}
-                          </KeyValueRows>
-                        )}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )
-          : null
+    <div style={style} className="h-full">
+      <ErrorBoundary name="GRPC Events">
+        <EventViewer
+          events={events}
+          getEventKey={(event) => event.id}
+          error={activeConnection.error}
+          header={header}
+          splitLayoutName="grpc_events"
+          defaultRatio={0.4}
+          renderRow={({ event, isActive, onClick }) => (
+            <GrpcEventRow event={event} isActive={isActive} onClick={onClick} />
+          )}
+          renderDetail={({ event }) => (
+            <GrpcEventDetail
+              event={event}
+              showLarge={showLarge}
+              showingLarge={showingLarge}
+              setShowLarge={setShowLarge}
+              setShowingLarge={setShowingLarge}
+            />
+          )}
+        />
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+function GrpcEventRow({
+  event,
+  isActive,
+  onClick,
+}: {
+  event: GrpcEvent;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  const { eventType, status, content, error } = event;
+  const display = getEventDisplay(eventType, status);
+
+  return (
+    <EventViewerRow
+      isActive={isActive}
+      onClick={onClick}
+      icon={<Icon color={display.color} title={display.title} icon={display.icon} />}
+      content={
+        <span className="text-xs">
+          {content.slice(0, 1000)}
+          {error && <span className="text-warning"> ({error})</span>}
+        </span>
       }
+      timestamp={event.createdAt}
     />
   );
 }
 
-function EventRow({
-  onClick,
-  isActive,
+function GrpcEventDetail({
   event,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
 }: {
-  onClick?: () => void;
-  isActive?: boolean;
   event: GrpcEvent;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
 }) {
-  const { eventType, status, createdAt, content, error } = event;
-  const ref = useRef<HTMLDivElement>(null);
+  if (event.eventType === 'client_message' || event.eventType === 'server_message') {
+    const title = `Message ${event.eventType === 'client_message' ? 'Sent' : 'Received'}`;
 
-  return (
-    <div className="px-1" ref={ref}>
-      <button
-        type="button"
-        onClick={onClick}
-        className={classNames(
-          'w-full grid grid-cols-[auto_minmax(0,3fr)_auto] gap-2 items-center text-left',
-          'px-1.5 h-xs font-mono cursor-default group focus:outline-none focus:text-text rounded',
-          isActive && '!bg-surface-active !text-text',
-          'text-text-subtle hover:text',
+    return (
+      <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+        <EventDetailHeader title={title} timestamp={event.createdAt} copyText={event.content} />
+        {!showLarge && event.content.length > 1000 * 1000 ? (
+          <VStack space={2} className="italic text-text-subtlest">
+            Message previews larger than 1MB are hidden
+            <div>
+              <Button
+                onClick={() => {
+                  setShowingLarge(true);
+                  setTimeout(() => {
+                    setShowLarge(true);
+                    setShowingLarge(false);
+                  }, 500);
+                }}
+                isLoading={showingLarge}
+                color="secondary"
+                variant="border"
+                size="xs"
+              >
+                Try Showing
+              </Button>
+            </div>
+          </VStack>
+        ) : (
+          <Editor
+            language="json"
+            defaultValue={event.content ?? ''}
+            wrapLines={false}
+            readOnly={true}
+            stateKey={null}
+          />
         )}
-      >
-        <Icon
-          color={
-            eventType === 'server_message'
-              ? 'info'
-              : eventType === 'client_message'
-                ? 'primary'
-                : eventType === 'error' || (status != null && status > 0)
-                  ? 'danger'
-                  : eventType === 'connection_end'
-                    ? 'success'
-                    : undefined
-          }
-          title={
-            eventType === 'server_message'
-              ? 'Server message'
-              : eventType === 'client_message'
-                ? 'Client message'
-                : eventType === 'error' || (status != null && status > 0)
-                  ? 'Error'
-                  : eventType === 'connection_end'
-                    ? 'Connection response'
-                    : undefined
-          }
-          icon={
-            eventType === 'server_message'
-              ? 'arrow_big_down_dash'
-              : eventType === 'client_message'
-                ? 'arrow_big_up_dash'
-                : eventType === 'error' || (status != null && status > 0)
-                  ? 'alert_triangle'
-                  : eventType === 'connection_end'
-                    ? 'check'
-                    : 'info'
-          }
-        />
-        <div className={classNames('w-full truncate text-xs')}>
-          {content.slice(0, 1000)}
-          {error && <span className="text-warning"> ({error})</span>}
+      </div>
+    );
+  }
+
+  // Error or connection_end - show metadata/trailers
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <EventDetailHeader title={event.content} timestamp={event.createdAt} />
+      {event.error && (
+        <div className="select-text cursor-text text-sm font-mono py-1 text-warning">
+          {event.error}
         </div>
-        <div className={classNames('opacity-50 text-xs')}>
-          {format(`${createdAt}Z`, 'HH:mm:ss.SSS')}
-        </div>
-      </button>
+      )}
+      <div className="py-2 h-full">
+        {Object.keys(event.metadata).length === 0 ? (
+          <EmptyStateText>
+            No {event.eventType === 'connection_end' ? 'trailers' : 'metadata'}
+          </EmptyStateText>
+        ) : (
+          <KeyValueRows>
+            {Object.entries(event.metadata).map(([key, value]) => (
+              <KeyValueRow key={key} label={key}>
+                {value}
+              </KeyValueRow>
+            ))}
+          </KeyValueRows>
+        )}
+      </div>
     </div>
   );
 }
+
+function getEventDisplay(
+  eventType: GrpcEvent['eventType'],
+  status: GrpcEvent['status'],
+): { icon: IconProps['icon']; color: IconProps['color']; title: string } {
+  if (eventType === 'server_message') {
+    return { icon: 'arrow_big_down_dash', color: 'info', title: 'Server message' };
+  }
+  if (eventType === 'client_message') {
+    return { icon: 'arrow_big_up_dash', color: 'primary', title: 'Client message' };
+  }
+  if (eventType === 'error' || (status != null && status > 0)) {
+    return { icon: 'alert_triangle', color: 'danger', title: 'Error' };
+  }
+  if (eventType === 'connection_end') {
+    return { icon: 'check', color: 'success', title: 'Connection response' };
+  }
+  return { icon: 'info', color: undefined, title: 'Event' };
+}

src-web/components/HeadersEditor.tsx

@@ -33,9 +33,16 @@ export function HeadersEditor({
 }: Props) {
   const validInheritedHeaders =
     inheritedHeaders?.filter((pair) => pair.enabled && (pair.name || pair.value)) ?? [];
+  const hasInheritedHeaders = validInheritedHeaders.length > 0;
   return (
-    <div className="@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-1.5">
-      {validInheritedHeaders.length > 0 ? (
+    <div
+      className={
+        hasInheritedHeaders
+          ? '@container w-full h-full grid grid-rows-[auto_minmax(0,1fr)] gap-y-1.5'
+          : '@container w-full h-full'
+      }
+    >
+      {hasInheritedHeaders && (
         <DetailsBanner
           color="secondary"
           className="text-sm"
@@ -63,8 +70,6 @@ export function HeadersEditor({
             ))}
           </div>
         </DetailsBanner>
-      ) : (
-        <span />
       )}
       <PairOrBulkEditor
         forceUpdateKey={forceUpdateKey}

src-web/components/HttpAuthenticationEditor.tsx

@@ -62,7 +62,7 @@ export function HttpAuthenticationEditor({ model }: Props) {
           <p>
             Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
           </p>
-          <Link href="https://feedback.yaak.app/help/articles/2112119-request-inheritance">
+          <Link href="https://yaak.app/docs/using-yaak/request-inheritance">
             Documentation
           </Link>
         </EmptyStateText>

src-web/components/HttpRequestPane.tsx

@@ -4,7 +4,7 @@ import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { atom, useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
-import { lazy, Suspense, useCallback, useMemo, useState } from 'react';
+import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react';
 import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
 import { allRequestsAtom } from '../hooks/useAllRequests';
 import { useAuthTab } from '../hooks/useAuthTab';
@@ -12,7 +12,6 @@ import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
@@ -42,8 +41,8 @@ import { Editor } from './core/Editor/LazyEditor';
 import { InlineCode } from './core/InlineCode';
 import type { Pair } from './core/PairEditor';
 import { PlainInput } from './core/PlainInput';
-import type { TabItem } from './core/Tabs/Tabs';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
+import type { TabItem, TabsRef } from './core/Tabs/Tabs';
+import { setActiveTab, TabContent, Tabs } from './core/Tabs/Tabs';
 import { EmptyStateText } from './EmptyStateText';
 import { FormMultipartEditor } from './FormMultipartEditor';
 import { FormUrlencodedEditor } from './FormUrlencodedEditor';
@@ -70,6 +69,7 @@ const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';
+const TABS_STORAGE_KEY = 'http_request_tabs';
 
 const nonActiveRequestUrlsAtom = atom((get) => {
   const activeRequestId = get(activeRequestIdAtom);
@@ -83,19 +83,20 @@ const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
 
 export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
   const activeRequestId = activeRequest.id;
-  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
-    namespace: 'no_sync',
-    key: 'httpRequestActiveTabs',
-    fallback: {},
-  });
+  const tabsRef = useRef<TabsRef>(null);
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id ?? null);
-  const [{ urlKey }, { focusParamsTab, forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  const [{ urlKey }, { forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
   const contentType = getContentTypeFromHeaders(activeRequest.headers);
   const authTab = useAuthTab(TAB_AUTH, activeRequest);
   const headersTab = useHeadersTab(TAB_HEADERS, activeRequest);
   const inheritedHeaders = useInheritedHeaders(activeRequest);
 
+  // Listen for event to focus the params tab (e.g., when clicking a :param in the URL)
+  useRequestEditorEvent('request_pane.focus_tab', () => {
+    tabsRef.current?.setActiveTab(TAB_PARAMS);
+  }, []);
+
   const handleContentTypeChange = useCallback(
     async (contentType: string | null, patch: Partial<Omit<HttpRequest, 'headers'>> = {}) => {
       if (activeRequest == null) {
@@ -260,18 +261,6 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
     [activeRequest],
   );
 
-  const activeTab = activeTabs?.[activeRequestId];
-  const setActiveTab = useCallback(
-    async (tab: string) => {
-      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
-    },
-    [activeRequest.id, setActiveTabs],
-  );
-
-  useRequestEditorEvent('request_pane.focus_tab', async () => {
-    await setActiveTab(TAB_PARAMS);
-  });
-
   const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
 
   const autocomplete: GenericCompletionConfig = useMemo(
@@ -298,7 +287,11 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
           e.preventDefault(); // Prevent input onChange
 
           await patchModel(activeRequest, patch);
-          focusParamsTab();
+          await setActiveTab({
+            storageKey: TABS_STORAGE_KEY,
+            activeTabKey: activeRequestId,
+            value: TAB_PARAMS,
+          });
 
           // Wait for request to update, then refresh the UI
           // TODO: Somehow make this deterministic
@@ -309,14 +302,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
         }
       }
     },
-    [
-      activeRequest,
-      activeRequestId,
-      focusParamsTab,
-      forceParamsRefresh,
-      forceUrlRefresh,
-      importCurl,
-    ],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh, importCurl],
   );
   const handleSend = useCallback(
     () => sendRequest(activeRequest.id ?? null),
@@ -354,12 +340,12 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
             isLoading={activeResponse != null && activeResponse.state !== 'closed'}
           />
           <Tabs
-            value={activeTab}
+            ref={tabsRef}
             label="Request"
-            onChangeValue={setActiveTab}
             tabs={tabs}
-            tabListClassName="mt-1 mb-1.5"
-            storageKey="http_request_tabs_order"
+            tabListClassName="mt-1 -mb-1.5"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
           >
             <TabContent value={TAB_AUTH}>
               <HttpAuthenticationEditor model={activeRequest} />

src-web/components/HttpResponsePane.tsx

@@ -1,15 +1,15 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import type { ComponentType, CSSProperties } from 'react';
-import { lazy, Suspense, useCallback, useMemo } from 'react';
-import { useLocalStorage } from 'react-use';
+import { lazy, Suspense, useMemo } from 'react';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useHttpResponseEvents } from '../hooks/useHttpResponseEvents';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseBodyBytes, useResponseBodyText } from '../hooks/useResponseBodyText';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
+import { useTimelineViewMode } from '../hooks/useTimelineViewMode';
 import { getMimeTypeFromContentType } from '../lib/contentType';
-import { getContentTypeFromHeaders } from '../lib/model_util';
+import { getContentTypeFromHeaders, getCookieCounts } from '../lib/model_util';
 import { ConfirmLargeResponse } from './ConfirmLargeResponse';
 import { ConfirmLargeResponseRequest } from './ConfirmLargeResponseRequest';
 import { Banner } from './core/Banner';
@@ -55,32 +55,18 @@ const TAB_HEADERS = 'headers';
 const TAB_COOKIES = 'cookies';
 const TAB_TIMELINE = 'timeline';
 
+export type TimelineViewMode = 'timeline' | 'text';
+
 export function HttpResponsePane({ style, className, activeRequestId }: Props) {
   const { activeResponse, setPinnedResponseId, responses } = usePinnedHttpResponse(activeRequestId);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
-  const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
-    'responsePaneActiveTabs',
-    {},
-  );
+  const [timelineViewMode, setTimelineViewMode] = useTimelineViewMode();
   const contentType = getContentTypeFromHeaders(activeResponse?.headers ?? null);
   const mimeType = contentType == null ? null : getMimeTypeFromContentType(contentType).essence;
 
   const responseEvents = useHttpResponseEvents(activeResponse);
 
-  const cookieCount = useMemo(() => {
-    if (!responseEvents.data) return 0;
-    let count = 0;
-    for (const event of responseEvents.data) {
-      const e = event.event;
-      if (
-        (e.type === 'header_up' && e.name.toLowerCase() === 'cookie') ||
-        (e.type === 'header_down' && e.name.toLowerCase() === 'set-cookie')
-      ) {
-        count++;
-      }
-    }
-    return count;
-  }, [responseEvents.data]);
+  const cookieCounts = useMemo(() => getCookieCounts(responseEvents.data), [responseEvents.data]);
 
   const tabs = useMemo<TabItem[]>(
     () => [
@@ -92,7 +78,9 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
           onChange: setViewMode,
           items: [
             { label: 'Response', value: 'pretty' },
-            ...(mimeType?.startsWith('image') ? [] : [{ label: 'Raw', value: 'raw' }]),
+            ...(mimeType?.startsWith('image')
+              ? []
+              : [{ label: 'Response (Raw)', shortLabel: 'Raw', value: 'raw' }]),
           ],
         },
       },
@@ -107,40 +95,47 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
         label: 'Headers',
         rightSlot: (
           <CountBadge
-            count2={activeResponse?.headers.length ?? 0}
             count={activeResponse?.requestHeaders.length ?? 0}
+            count2={activeResponse?.headers.length ?? 0}
+            showZero
           />
         ),
       },
       {
         value: TAB_COOKIES,
         label: 'Cookies',
-        rightSlot: cookieCount > 0 ? <CountBadge count={cookieCount} /> : null,
+        rightSlot:
+          cookieCounts.sent > 0 || cookieCounts.received > 0 ? (
+            <CountBadge count={cookieCounts.sent} count2={cookieCounts.received} showZero />
+          ) : null,
       },
       {
         value: TAB_TIMELINE,
-        label: 'Timeline',
         rightSlot: <CountBadge count={responseEvents.data?.length ?? 0} />,
+        options: {
+          value: timelineViewMode,
+          onChange: (v) => setTimelineViewMode((v as TimelineViewMode) ?? 'timeline'),
+          items: [
+            { label: 'Timeline', value: 'timeline' },
+            { label: 'Timeline (Text)', shortLabel: 'Timeline', value: 'text' },
+          ],
+        },
       },
     ],
     [
       activeResponse?.headers,
       activeResponse?.requestContentLength,
       activeResponse?.requestHeaders.length,
-      cookieCount,
+      cookieCounts.sent,
+      cookieCounts.received,
       mimeType,
       responseEvents.data?.length,
       setViewMode,
       viewMode,
+      timelineViewMode,
+      setTimelineViewMode,
     ],
   );
-  const activeTab = activeTabs?.[activeRequestId];
-  const setActiveTab = useCallback(
-    (tab: string) => {
-      setActiveTabs((r) => ({ ...r, [activeRequestId]: tab }));
-    },
-    [activeRequestId, setActiveTabs],
-  );
 
   const cancel = useCancelHttpResponse(activeResponse?.id ?? null);
 
@@ -204,14 +199,12 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
             )}
             {/* Show tabs if we have any data (headers, body, etc.) even if there's an error */}
             <Tabs
-              key={activeRequestId} // Freshen tabs on request change
-              value={activeTab}
-              onChangeValue={setActiveTab}
               tabs={tabs}
               label="Response"
               className="ml-3 mr-3 mb-3 min-h-0 flex-1"
-              tabListClassName="mt-0.5"
-              storageKey="http_response_tabs_order"
+              tabListClassName="mt-0.5 -mb-1.5"
+              storageKey="http_response_tabs"
+              activeTabKey={activeRequestId}
             >
               <TabContent value={TAB_BODY}>
                 <ErrorBoundary name="Http Response Viewer">
@@ -271,7 +264,7 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
                 <ResponseCookies response={activeResponse} />
               </TabContent>
               <TabContent value={TAB_TIMELINE}>
-                <HttpResponseTimeline response={activeResponse} />
+                <HttpResponseTimeline response={activeResponse} viewMode={timelineViewMode} />
               </TabContent>
             </Tabs>
           </div>

src-web/components/HttpResponseTimeline.tsx

@@ -3,186 +3,179 @@ import type {
   HttpResponseEvent,
   HttpResponseEventData,
 } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { format } from 'date-fns';
 import { type ReactNode, useMemo, useState } from 'react';
 import { useHttpResponseEvents } from '../hooks/useHttpResponseEvents';
-import { AutoScroller } from './core/AutoScroller';
-import { Banner } from './core/Banner';
+import { Editor } from './core/Editor/LazyEditor';
+import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
+import { EventViewerRow } from './core/EventViewerRow';
 import { HttpMethodTagRaw } from './core/HttpMethodTag';
 import { HttpStatusTagRaw } from './core/HttpStatusTag';
 import { Icon, type IconProps } from './core/Icon';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
-import { Separator } from './core/Separator';
-import { SplitLayout } from './core/SplitLayout';
+import type { TimelineViewMode } from './HttpResponsePane';
 
 interface Props {
   response: HttpResponse;
+  viewMode: TimelineViewMode;
 }
 
-export function HttpResponseTimeline({ response }: Props) {
-  return <Inner key={response.id} response={response} />;
+export function HttpResponseTimeline({ response, viewMode }: Props) {
+  return <Inner key={response.id} response={response} viewMode={viewMode} />;
 }
 
-function Inner({ response }: Props) {
-  const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
+function Inner({ response, viewMode }: Props) {
+  const [showRaw, setShowRaw] = useState(false);
   const { data: events, error, isLoading } = useHttpResponseEvents(response);
 
-  const activeEvent = useMemo(
-    () => (activeEventIndex == null ? null : events?.[activeEventIndex]),
-    [activeEventIndex, events],
-  );
+  // Generate plain text representation of all events (with prefixes for timeline view)
+  const plainText = useMemo(() => {
+    if (!events || events.length === 0) return '';
+    return events.map((event) => formatEventText(event.event, true)).join('\n');
+  }, [events]);
 
-  if (isLoading) {
-    return <div className="p-3 text-text-subtlest italic">Loading events...</div>;
-  }
-
-  if (error) {
-    return (
-      <Banner color="danger" className="m-3">
-        {String(error)}
-      </Banner>
-    );
-  }
-
-  if (!events || events.length === 0) {
-    return <div className="p-3 text-text-subtlest italic">No events recorded</div>;
+  // Plain text view - show all events as text in an editor
+  if (viewMode === 'text') {
+    if (isLoading) {
+      return <div className="p-4 text-text-subtlest">Loading events...</div>;
+    } else if (error) {
+      return <div className="p-4 text-danger">{String(error)}</div>;
+    } else if (!events || events.length === 0) {
+      return <div className="p-4 text-text-subtlest">No events recorded</div>;
+    } else {
+      return (
+        <Editor language="timeline" defaultValue={plainText} readOnly stateKey={null} hideGutter />
+      );
+    }
   }
 
   return (
-    <SplitLayout
-      layout="vertical"
-      name="http_response_events"
+    <EventViewer
+      events={events ?? []}
+      getEventKey={(event) => event.id}
+      error={error ? String(error) : null}
+      isLoading={isLoading}
+      loadingMessage="Loading events..."
+      emptyMessage="No events recorded"
+      splitLayoutName="http_response_events"
       defaultRatio={0.25}
-      minHeightPx={10}
-      firstSlot={() => (
-        <AutoScroller
-          data={events}
-          render={(event, i) => (
-            <EventRow
-              key={event.id}
-              event={event}
-              isActive={i === activeEventIndex}
-              onClick={() => {
-                if (i === activeEventIndex) setActiveEventIndex(null);
-                else setActiveEventIndex(i);
-              }}
-            />
-          )}
-        />
+      renderRow={({ event, isActive, onClick }) => {
+        const display = getEventDisplay(event.event);
+        return (
+          <EventViewerRow
+            isActive={isActive}
+            onClick={onClick}
+            icon={<Icon color={display.color} icon={display.icon} size="sm" />}
+            content={display.summary}
+            timestamp={event.createdAt}
+          />
+        );
+      }}
+      renderDetail={({ event, onClose }) => (
+        <EventDetails event={event} showRaw={showRaw} setShowRaw={setShowRaw} onClose={onClose} />
       )}
-      secondSlot={
-        activeEvent
-          ? () => (
-              <div className="grid grid-rows-[auto_minmax(0,1fr)]">
-                <div className="pb-3 px-2">
-                  <Separator />
-                </div>
-                <div className="mx-2 overflow-y-auto">
-                  <EventDetails event={activeEvent} />
-                </div>
-              </div>
-            )
-          : null
-      }
     />
   );
 }
 
-function EventRow({
-  onClick,
-  isActive,
-  event,
-}: {
-  onClick: () => void;
-  isActive: boolean;
-  event: HttpResponseEvent;
-}) {
-  const display = getEventDisplay(event.event);
-  const { icon, color, summary } = display;
-
-  return (
-    <div className="px-1">
-      <button
-        type="button"
-        onClick={onClick}
-        className={classNames(
-          'w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left',
-          'px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded',
-          isActive && '!bg-surface-active !text-text',
-          'text-text-subtle hover:text',
-        )}
-      >
-        <Icon color={color} icon={icon} size="sm" />
-        <div className="w-full truncate">{summary}</div>
-        <div className="opacity-50">{format(`${event.createdAt}Z`, 'HH:mm:ss.SSS')}</div>
-      </button>
-    </div>
-  );
-}
-
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-function EventDetails({ event }: { event: HttpResponseEvent }) {
+function EventDetails({
+  event,
+  showRaw,
+  setShowRaw,
+  onClose,
+}: {
+  event: HttpResponseEvent;
+  showRaw: boolean;
+  setShowRaw: (v: boolean) => void;
+  onClose: () => void;
+}) {
   const { label } = getEventDisplay(event.event);
-  const timestamp = format(new Date(`${event.createdAt}Z`), 'HH:mm:ss.SSS');
   const e = event.event;
 
-  // Headers - show name and value with Editor for JSON
-  if (e.type === 'header_up' || e.type === 'header_down') {
-    return (
-      <div className="flex flex-col gap-2 h-full">
-        <DetailHeader
-          title={e.type === 'header_down' ? 'Header Received' : 'Header Sent'}
-          timestamp={timestamp}
-        />
+  const actions: EventDetailAction[] = [
+    {
+      key: 'toggle-raw',
+      label: showRaw ? 'Formatted' : 'Text',
+      onClick: () => setShowRaw(!showRaw),
+    },
+  ];
+
+  // Determine the title based on event type
+  const title = (() => {
+    switch (e.type) {
+      case 'header_up':
+        return 'Header Sent';
+      case 'header_down':
+        return 'Header Received';
+      case 'send_url':
+        return 'Request';
+      case 'receive_url':
+        return 'Response';
+      case 'redirect':
+        return 'Redirect';
+      case 'setting':
+        return 'Apply Setting';
+      case 'chunk_sent':
+        return 'Data Sent';
+      case 'chunk_received':
+        return 'Data Received';
+      case 'dns_resolved':
+        return e.overridden ? 'DNS Override' : 'DNS Resolution';
+      default:
+        return label;
+    }
+  })();
+
+  // Render content based on view mode and event type
+  const renderContent = () => {
+    // Raw view - show plaintext representation (without prefix)
+    if (showRaw) {
+      const rawText = formatEventText(event.event, false);
+      return <Editor language="text" defaultValue={rawText} readOnly stateKey={null} hideGutter />;
+    }
+
+    // Headers - show name and value
+    if (e.type === 'header_up' || e.type === 'header_down') {
+      return (
         <KeyValueRows>
           <KeyValueRow label="Header">{e.name}</KeyValueRow>
           <KeyValueRow label="Value">{e.value}</KeyValueRow>
         </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }
 
-  // Request URL - show method and path separately
-  if (e.type === 'send_url') {
-    return (
-      <div className="flex flex-col gap-2">
-        <DetailHeader title="Request" timestamp={timestamp} />
+    // Request URL - show method and path separately
+    if (e.type === 'send_url') {
+      return (
         <KeyValueRows>
           <KeyValueRow label="Method">
             <HttpMethodTagRaw forceColor method={e.method} />
           </KeyValueRow>
           <KeyValueRow label="Path">{e.path}</KeyValueRow>
         </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }
 
-  // Response status - show version and status separately
-  if (e.type === 'receive_url') {
-    return (
-      <div className="flex flex-col gap-2">
-        <DetailHeader title="Response" timestamp={timestamp} />
+    // Response status - show version and status separately
+    if (e.type === 'receive_url') {
+      return (
         <KeyValueRows>
           <KeyValueRow label="HTTP Version">{e.version}</KeyValueRow>
           <KeyValueRow label="Status">
             <HttpStatusTagRaw status={e.status} />
           </KeyValueRow>
         </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }
 
-  // Redirect - show status, URL, and behavior
-  if (e.type === 'redirect') {
-    return (
-      <div className="flex flex-col gap-2">
-        <DetailHeader title="Redirect" timestamp={timestamp} />
+    // Redirect - show status, URL, and behavior
+    if (e.type === 'redirect') {
+      return (
         <KeyValueRows>
           <KeyValueRow label="Status">
             <HttpStatusTagRaw status={e.status} />
@@ -192,51 +185,98 @@ function EventDetails({ event }: { event: HttpResponseEvent }) {
             {e.behavior === 'drop_body' ? 'Drop body, change to GET' : 'Preserve method and body'}
           </KeyValueRow>
         </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }
 
-  // Settings - show as key/value
-  if (e.type === 'setting') {
-    return (
-      <div className="flex flex-col gap-2">
-        <DetailHeader title="Apply Setting" timestamp={timestamp} />
+    // Settings - show as key/value
+    if (e.type === 'setting') {
+      return (
         <KeyValueRows>
           <KeyValueRow label="Setting">{e.name}</KeyValueRow>
           <KeyValueRow label="Value">{e.value}</KeyValueRow>
         </KeyValueRows>
-      </div>
-    );
-  }
+      );
+    }
 
-  // Chunks - show formatted bytes
-  if (e.type === 'chunk_sent' || e.type === 'chunk_received') {
-    const direction = e.type === 'chunk_sent' ? 'Sent' : 'Received';
-    return (
-      <div className="flex flex-col gap-2">
-        <DetailHeader title={`Data ${direction}`} timestamp={timestamp} />
-        <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>
-      </div>
-    );
-  }
+    // Chunks - show formatted bytes
+    if (e.type === 'chunk_sent' || e.type === 'chunk_received') {
+      return <div className="font-mono text-editor">{formatBytes(e.bytes)}</div>;
+    }
 
-  // Default - use summary
-  const { summary } = getEventDisplay(event.event);
+    // DNS Resolution - show hostname, addresses, and timing
+    if (e.type === 'dns_resolved') {
+      return (
+        <KeyValueRows>
+          <KeyValueRow label="Hostname">{e.hostname}</KeyValueRow>
+          <KeyValueRow label="Addresses">{e.addresses.join(', ')}</KeyValueRow>
+          <KeyValueRow label="Duration">
+            {e.overridden ? (
+              <span className="text-text-subtlest">--</span>
+            ) : (
+              `${String(e.duration)}ms`
+            )}
+          </KeyValueRow>
+          {e.overridden ? <KeyValueRow label="Source">Workspace Override</KeyValueRow> : null}
+        </KeyValueRows>
+      );
+    }
+
+    // Default - use summary
+    const { summary } = getEventDisplay(event.event);
+    return <div className="font-mono text-editor">{summary}</div>;
+  };
   return (
-    <div className="flex flex-col gap-1">
-      <DetailHeader title={label} timestamp={timestamp} />
-      <div className="font-mono text-editor">{summary}</div>
+    <div className="flex flex-col gap-2 h-full">
+      <EventDetailHeader
+        title={title}
+        timestamp={event.createdAt}
+        actions={actions}
+        onClose={onClose}
+      />
+      {renderContent()}
     </div>
   );
 }
 
-function DetailHeader({ title, timestamp }: { title: string; timestamp: string }) {
-  return (
-    <div className="flex items-center justify-between gap-2">
-      <h3 className="font-semibold select-auto cursor-auto">{title}</h3>
-      <span className="text-text-subtlest font-mono text-editor">{timestamp}</span>
-    </div>
-  );
+type EventTextParts = { prefix: '>' | '<' | '*'; text: string };
+
+/** Get the prefix and text for an event */
+function getEventTextParts(event: HttpResponseEventData): EventTextParts {
+  switch (event.type) {
+    case 'send_url':
+      return { prefix: '>', text: `${event.method} ${event.path}` };
+    case 'receive_url':
+      return { prefix: '<', text: `${event.version} ${event.status}` };
+    case 'header_up':
+      return { prefix: '>', text: `${event.name}: ${event.value}` };
+    case 'header_down':
+      return { prefix: '<', text: `${event.name}: ${event.value}` };
+    case 'redirect': {
+      const behavior = event.behavior === 'drop_body' ? 'drop body' : 'preserve';
+      return { prefix: '*', text: `Redirect ${event.status} -> ${event.url} (${behavior})` };
+    }
+    case 'setting':
+      return { prefix: '*', text: `Setting ${event.name}=${event.value}` };
+    case 'info':
+      return { prefix: '*', text: event.message };
+    case 'chunk_sent':
+      return { prefix: '*', text: `[${formatBytes(event.bytes)} sent]` };
+    case 'chunk_received':
+      return { prefix: '*', text: `[${formatBytes(event.bytes)} received]` };
+    case 'dns_resolved':
+      if (event.overridden) {
+        return { prefix: '*', text: `DNS override ${event.hostname} -> ${event.addresses.join(', ')}` };
+      }
+      return { prefix: '*', text: `DNS resolved ${event.hostname} to ${event.addresses.join(', ')} (${event.duration}ms)` };
+    default:
+      return { prefix: '*', text: '[unknown event]' };
+  }
+}
+
+/** Format event as plaintext, optionally with curl-style prefix (> outgoing, < incoming, * info) */
+function formatEventText(event: HttpResponseEventData, includePrefix: boolean): string {
+  const { prefix, text } = getEventTextParts(event);
+  return includePrefix ? `${prefix} ${text}` : text;
 }
 
 type EventDisplay = {
@@ -265,7 +305,7 @@ function getEventDisplay(event: HttpResponseEventData): EventDisplay {
     case 'redirect':
       return {
         icon: 'arrow_big_right_dash',
-        color: 'warning',
+        color: 'success',
         label: 'Redirect',
         summary: `Redirecting ${event.status} ${event.url}${event.behavior === 'drop_body' ? ' (drop body)' : ''}`,
       };
@@ -312,6 +352,15 @@ function getEventDisplay(event: HttpResponseEventData): EventDisplay {
         label: 'Chunk',
         summary: `${formatBytes(event.bytes)} chunk received`,
       };
+    case 'dns_resolved':
+      return {
+        icon: 'globe',
+        color: event.overridden ? 'success' : 'secondary',
+        label: event.overridden ? 'DNS Override' : 'DNS',
+        summary: event.overridden
+          ? `${event.hostname} → ${event.addresses.join(', ')} (overridden)`
+          : `${event.hostname} → ${event.addresses.join(', ')} (${event.duration}ms)`,
+      };
     default:
       return {
         icon: 'info',

src-web/components/Settings/Settings.tsx

@@ -5,7 +5,6 @@ import { useLicense } from '@yaakapp-internal/license';
 import { pluginsAtom, settingsAtom } from '@yaakapp-internal/models';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
-import { useState } from 'react';
 import { useKeyPressEvent } from 'react-use';
 import { appInfo } from '../../lib/appInfo';
 import { capitalize } from '../../lib/capitalize';
@@ -51,7 +50,6 @@ export default function Settings({ hide }: Props) {
   const { tab: tabFromQuery } = useSearch({ from: '/workspaces/$workspaceId/settings' });
   // Parse tab and subtab (e.g., "plugins:installed")
   const [mainTab, subtab] = tabFromQuery?.split(':') ?? [];
-  const [tab, setTab] = useState<string | undefined>(mainTab || tabFromQuery);
   const settings = useAtomValue(settingsAtom);
   const plugins = useAtomValue(pluginsAtom);
   const licenseCheck = useLicense();
@@ -91,11 +89,10 @@ export default function Settings({ hide }: Props) {
       )}
       <Tabs
         layout="horizontal"
-        value={tab}
+        defaultValue={mainTab || tabFromQuery}
         addBorders
         tabListClassName="min-w-[10rem] bg-surface x-theme-sidebar border-r border-border pl-3"
         label="Settings"
-        onChangeValue={setTab}
         tabs={tabs.map(
           (value): TabItem => ({
             value,
@@ -145,7 +142,7 @@ export default function Settings({ hide }: Props) {
           <SettingsHotkeys />
         </TabContent>
         <TabContent value={TAB_PLUGINS} className="h-full grid grid-rows-1 px-6 !py-4">
-          <SettingsPlugins defaultSubtab={tab === TAB_PLUGINS ? subtab : undefined} />
+          <SettingsPlugins defaultSubtab={mainTab === TAB_PLUGINS ? subtab : undefined} />
         </TabContent>
         <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 !py-4">
           <SettingsProxy />

src-web/components/Settings/SettingsPlugins.tsx

@@ -54,13 +54,11 @@ export function SettingsPlugins({ defaultSubtab }: SettingsPluginsProps) {
   const installedPlugins = plugins.filter((p) => !isPluginBundled(p, appInfo.vendoredPluginDir));
   const createPlugin = useInstallPlugin();
   const refreshPlugins = useRefreshPlugins();
-  const [tab, setTab] = useState<string | undefined>(defaultSubtab);
   return (
     <div className="h-full">
       <Tabs
-        value={tab}
+        defaultValue={defaultSubtab}
         label="Plugins"
-        onChangeValue={setTab}
         addBorders
         tabs={[
           { label: 'Discover', value: 'search' },
@@ -117,7 +115,7 @@ export function SettingsPlugins({ defaultSubtab }: SettingsPluginsProps) {
                   icon="help"
                   title="View documentation"
                   onClick={() =>
-                    openUrl('https://feedback.yaak.app/help/articles/6911763-quick-start')
+                    openUrl('https://yaak.app/docs/plugin-development/plugins-quick-start')
                   }
                 />
               </HStack>

src-web/components/Settings/SettingsTheme.tsx

@@ -75,7 +75,7 @@ export function SettingsTheme() {
         <Heading>Theme</Heading>
         <p className="text-text-subtle">
           Make Yaak your own by selecting a theme, or{' '}
-          <Link href="https://feedback.yaak.app/help/articles/6911763-plugins-quick-start">
+          <Link href="https://yaak.app/docs/plugin-development/plugins-quick-start">
             Create Your Own
           </Link>
         </p>

src-web/components/WebsocketRequestPane.tsx

@@ -5,7 +5,7 @@ import { closeWebsocket, connectWebsocket, sendWebsocket } from '@yaakapp-intern
 import classNames from 'classnames';
 import { atom, useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { getActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { getActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
@@ -14,7 +14,6 @@ import { useAuthTab } from '../hooks/useAuthTab';
 import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
-import { useKeyValue } from '../hooks/useKeyValue';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { activeWebsocketConnectionAtom } from '../hooks/usePinnedWebsocketConnection';
 import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor';
@@ -30,8 +29,8 @@ import { Editor } from './core/Editor/LazyEditor';
 import { IconButton } from './core/IconButton';
 import type { Pair } from './core/PairEditor';
 import { PlainInput } from './core/PlainInput';
-import type { TabItem } from './core/Tabs/Tabs';
-import { TabContent, Tabs } from './core/Tabs/Tabs';
+import type { TabItem, TabsRef } from './core/Tabs/Tabs';
+import { setActiveTab, TabContent, Tabs } from './core/Tabs/Tabs';
 import { HeadersEditor } from './HeadersEditor';
 import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
 import { MarkdownEditor } from './MarkdownEditor';
@@ -50,6 +49,7 @@ const TAB_PARAMS = 'params';
 const TAB_HEADERS = 'headers';
 const TAB_AUTH = 'auth';
 const TAB_DESCRIPTION = 'description';
+const TABS_STORAGE_KEY = 'websocket_request_tabs';
 
 const nonActiveRequestUrlsAtom = atom((get) => {
   const activeRequestId = get(activeRequestIdAtom);
@@ -63,17 +63,18 @@ const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
 
 export function WebsocketRequestPane({ style, fullHeight, className, activeRequest }: Props) {
   const activeRequestId = activeRequest.id;
-  const { value: activeTabs, set: setActiveTabs } = useKeyValue<Record<string, string>>({
-    namespace: 'no_sync',
-    key: 'websocketRequestActiveTabs',
-    fallback: {},
-  });
+  const tabsRef = useRef<TabsRef>(null);
   const forceUpdateKey = useRequestUpdateKey(activeRequest.id);
-  const [{ urlKey }, { focusParamsTab, forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
+  const [{ urlKey }, { forceUrlRefresh, forceParamsRefresh }] = useRequestEditor();
   const authTab = useAuthTab(TAB_AUTH, activeRequest);
   const headersTab = useHeadersTab(TAB_HEADERS, activeRequest);
   const inheritedHeaders = useInheritedHeaders(activeRequest);
 
+  // Listen for event to focus the params tab (e.g., when clicking a :param in the URL)
+  useRequestEditorEvent('request_pane.focus_tab', () => {
+    tabsRef.current?.setActiveTab(TAB_PARAMS);
+  }, []);
+
   const { urlParameterPairs, urlParametersKey } = useMemo(() => {
     const placeholderNames = Array.from(activeRequest.url.matchAll(/\/(:[^/]+)/g)).map(
       (m) => m[1] ?? '',
@@ -115,18 +116,6 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
   const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
   const connection = useAtomValue(activeWebsocketConnectionAtom);
 
-  const activeTab = activeTabs?.[activeRequestId];
-  const setActiveTab = useCallback(
-    async (tab: string) => {
-      await setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
-    },
-    [activeRequest.id, setActiveTabs],
-  );
-
-  useRequestEditorEvent('request_pane.focus_tab', async () => {
-    await setActiveTab(TAB_PARAMS);
-  });
-
   const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
 
   const autocomplete: GenericCompletionConfig = useMemo(
@@ -176,7 +165,11 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
         e.preventDefault(); // Prevent input onChange
 
         await patchModel(activeRequest, patch);
-        focusParamsTab();
+        await setActiveTab({
+          storageKey: TABS_STORAGE_KEY,
+          activeTabKey: activeRequestId,
+          value: TAB_PARAMS,
+        });
 
         // Wait for request to update, then refresh the UI
         // TODO: Somehow make this deterministic
@@ -186,7 +179,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
         }, 100);
       }
     },
-    [activeRequest, focusParamsTab, forceParamsRefresh, forceUrlRefresh],
+    [activeRequest, activeRequestId, forceParamsRefresh, forceUrlRefresh],
   );
 
   const messageLanguage = languageFromContentType(null, activeRequest.message);
@@ -229,12 +222,12 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
             />
           </div>
           <Tabs
-            value={activeTab}
+            ref={tabsRef}
             label="Request"
-            onChangeValue={setActiveTab}
             tabs={tabs}
             tabListClassName="mt-1 !mb-1.5"
-            storageKey="websocket_request_tabs_order"
+            storageKey={TABS_STORAGE_KEY}
+            activeTabKey={activeRequestId}
           >
             <TabContent value={TAB_AUTH}>
               <HttpAuthenticationEditor model={activeRequest} />

src-web/components/WebsocketResponsePane.tsx

@@ -1,9 +1,7 @@
 import type { WebsocketEvent, WebsocketRequest } from '@yaakapp-internal/models';
-import classNames from 'classnames';
-import { format } from 'date-fns';
 import { hexy } from 'hexy';
 import { useAtomValue } from 'jotai';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useFormatText } from '../hooks/useFormatText';
 import {
   activeWebsocketConnectionAtom,
@@ -13,17 +11,13 @@ import {
 } from '../hooks/usePinnedWebsocketConnection';
 import { useStateWithDeps } from '../hooks/useStateWithDeps';
 import { languageFromContentType } from '../lib/contentType';
-import { copyToClipboard } from '../lib/copy';
-import { AutoScroller } from './core/AutoScroller';
-import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { Editor } from './core/Editor/LazyEditor';
+import { EventDetailHeader, EventViewer, type EventDetailAction } from './core/EventViewer';
+import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
 import { Icon } from './core/Icon';
-import { IconButton } from './core/IconButton';
 import { LoadingIcon } from './core/LoadingIcon';
-import { Separator } from './core/Separator';
-import { SplitLayout } from './core/SplitLayout';
 import { HStack, VStack } from './core/Stacks';
 import { WebsocketStatusTag } from './core/WebsocketStatusTag';
 import { EmptyStateText } from './EmptyStateText';
@@ -35,227 +29,199 @@ interface Props {
 }
 
 export function WebsocketResponsePane({ activeRequest }: Props) {
-  const [activeEventId, setActiveEventId] = useState<string | null>(null);
   const [showLarge, setShowLarge] = useStateWithDeps<boolean>(false, [activeRequest.id]);
   const [showingLarge, setShowingLarge] = useState<boolean>(false);
-  const [hexDumps, setHexDumps] = useState<Record<string, boolean>>({});
+  const [hexDumps, setHexDumps] = useState<Record<number, boolean>>({});
 
   const activeConnection = useAtomValue(activeWebsocketConnectionAtom);
   const connections = useAtomValue(activeWebsocketConnectionsAtom);
   const events = useWebsocketEvents(activeConnection?.id ?? null);
 
-  const activeEvent = useMemo(
-    () => events.find((m) => m.id === activeEventId) ?? null,
-    [activeEventId, events],
+  if (activeConnection == null) {
+    return (
+      <HotkeyList hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']} />
+    );
+  }
+
+  const header = (
+    <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle">
+      <HStack space={2}>
+        {activeConnection.state !== 'closed' && (
+          <LoadingIcon size="sm" className="text-text-subtlest" />
+        )}
+        <WebsocketStatusTag connection={activeConnection} />
+        <span>&bull;</span>
+        <span>{events.length} Messages</span>
+      </HStack>
+      <HStack space={0.5} className="ml-auto">
+        <RecentWebsocketConnectionsDropdown
+          connections={connections}
+          activeConnection={activeConnection}
+          onPinnedConnectionId={setPinnedWebsocketConnectionId}
+        />
+      </HStack>
+    </HStack>
   );
 
-  const hexDump = hexDumps[activeEventId ?? 'n/a'] ?? activeEvent?.messageType === 'binary';
-
-  const message = useMemo(() => {
-    if (hexDump) {
-      return activeEvent?.message ? hexy(activeEvent?.message) : '';
-    }
-    return activeEvent?.message
-      ? new TextDecoder('utf-8').decode(Uint8Array.from(activeEvent.message))
-      : '';
-  }, [activeEvent?.message, hexDump]);
-
-  const language = languageFromContentType(null, message);
-  const formattedMessage = useFormatText({ language, text: message, pretty: true });
-
   return (
-    <SplitLayout
-      layout="vertical"
-      name="grpc_events"
-      defaultRatio={0.4}
-      minHeightPx={20}
-      firstSlot={() =>
-        activeConnection == null ? (
-          <HotkeyList
-            hotkeys={['request.send', 'model.create', 'sidebar.focus', 'url_bar.focus']}
+    <ErrorBoundary name="Websocket Events">
+      <EventViewer
+        events={events}
+        getEventKey={(event) => event.id}
+        error={activeConnection.error}
+        header={header}
+        splitLayoutName="websocket_events"
+        defaultRatio={0.4}
+        renderRow={({ event, isActive, onClick }) => (
+          <WebsocketEventRow event={event} isActive={isActive} onClick={onClick} />
+        )}
+        renderDetail={({ event, index }) => (
+          <WebsocketEventDetail
+            event={event}
+            hexDump={hexDumps[index] ?? event.messageType === 'binary'}
+            setHexDump={(v) => setHexDumps({ ...hexDumps, [index]: v })}
+            showLarge={showLarge}
+            showingLarge={showingLarge}
+            setShowLarge={setShowLarge}
+            setShowingLarge={setShowingLarge}
           />
-        ) : (
-          <div className="w-full grid grid-rows-[auto_minmax(0,1fr)] items-center">
-            <HStack className="pl-3 mb-1 font-mono text-sm text-text-subtle">
-              <HStack space={2}>
-                {activeConnection.state !== 'closed' && (
-                  <LoadingIcon size="sm" className="text-text-subtlest" />
-                )}
-                <WebsocketStatusTag connection={activeConnection} />
-                <span>&bull;</span>
-                <span>{events.length} Messages</span>
-              </HStack>
-              <HStack space={0.5} className="ml-auto">
-                <RecentWebsocketConnectionsDropdown
-                  connections={connections}
-                  activeConnection={activeConnection}
-                  onPinnedConnectionId={setPinnedWebsocketConnectionId}
-                />
-              </HStack>
-            </HStack>
-            <ErrorBoundary name="Websocket Events">
-              <AutoScroller
-                data={events}
-                header={
-                  activeConnection.error && (
-                    <Banner color="danger" className="m-3">
-                      {activeConnection.error}
-                    </Banner>
-                  )
-                }
-                render={(event) => (
-                  <EventRow
-                    key={event.id}
-                    event={event}
-                    isActive={event.id === activeEventId}
-                    onClick={() => {
-                      if (event.id === activeEventId) setActiveEventId(null);
-                      else setActiveEventId(event.id);
-                    }}
-                  />
-                )}
-              />
-            </ErrorBoundary>
-          </div>
-        )
-      }
-      secondSlot={
-        activeEvent != null && activeConnection != null
-          ? () => (
-              <div className="grid grid-rows-[auto_minmax(0,1fr)]">
-                <div className="pb-3 px-2">
-                  <Separator />
-                </div>
-                <div className="mx-2 overflow-y-auto grid grid-rows-[auto_minmax(0,1fr)]">
-                  <div className="h-xs mb-2 grid grid-cols-[minmax(0,1fr)_auto] items-center">
-                    <div className="font-semibold">
-                      {activeEvent.messageType === 'close'
-                        ? 'Connection Closed'
-                        : activeEvent.messageType === 'open'
-                          ? 'Connection open'
-                          : `Message ${activeEvent.isServer ? 'Received' : 'Sent'}`}
-                    </div>
-                    {message !== '' && (
-                      <HStack space={1}>
-                        <Button
-                          variant="border"
-                          size="xs"
-                          onClick={() => {
-                            if (activeEventId == null) return;
-                            setHexDumps({ ...hexDumps, [activeEventId]: !hexDump });
-                          }}
-                        >
-                          {hexDump ? 'Show Message' : 'Show Hexdump'}
-                        </Button>
-                        <IconButton
-                          title="Copy message"
-                          icon="copy"
-                          size="xs"
-                          onClick={() => copyToClipboard(formattedMessage ?? '')}
-                        />
-                      </HStack>
-                    )}
-                  </div>
-                  {!showLarge && activeEvent.message.length > 1000 * 1000 ? (
-                    <VStack space={2} className="italic text-text-subtlest">
-                      Message previews larger than 1MB are hidden
-                      <div>
-                        <Button
-                          onClick={() => {
-                            setShowingLarge(true);
-                            setTimeout(() => {
-                              setShowLarge(true);
-                              setShowingLarge(false);
-                            }, 500);
-                          }}
-                          isLoading={showingLarge}
-                          color="secondary"
-                          variant="border"
-                          size="xs"
-                        >
-                          Try Showing
-                        </Button>
-                      </div>
-                    </VStack>
-                  ) : activeEvent.message.length === 0 ? (
-                    <EmptyStateText>No Content</EmptyStateText>
-                  ) : (
-                    <Editor
-                      language={language}
-                      defaultValue={formattedMessage ?? ''}
-                      wrapLines={false}
-                      readOnly={true}
-                      stateKey={null}
-                    />
-                  )}
-                </div>
-              </div>
-            )
-          : null
-      }
-    />
+        )}
+      />
+    </ErrorBoundary>
   );
 }
 
-function EventRow({
-  onClick,
-  isActive,
+function WebsocketEventRow({
   event,
+  isActive,
+  onClick,
 }: {
-  onClick?: () => void;
-  isActive?: boolean;
   event: WebsocketEvent;
+  isActive: boolean;
+  onClick: () => void;
 }) {
-  const { createdAt, message: messageBytes, isServer, messageType } = event;
-  const ref = useRef<HTMLDivElement>(null);
+  const { message: messageBytes, isServer, messageType } = event;
   const message = messageBytes
     ? new TextDecoder('utf-8').decode(Uint8Array.from(messageBytes))
     : '';
 
+  const iconColor =
+    messageType === 'close' || messageType === 'open' ? 'secondary' : isServer ? 'info' : 'primary';
+
+  const icon =
+    messageType === 'close' || messageType === 'open'
+      ? 'info'
+      : isServer
+        ? 'arrow_big_down_dash'
+        : 'arrow_big_up_dash';
+
+  const content =
+    messageType === 'close' ? (
+      'Disconnected from server'
+    ) : messageType === 'open' ? (
+      'Connected to server'
+    ) : message === '' ? (
+      <em className="italic text-text-subtlest">No content</em>
+    ) : (
+      <span className="text-xs">{message.slice(0, 1000)}</span>
+    );
+
   return (
-    <div className="px-1" ref={ref}>
-      <button
-        type="button"
-        onClick={onClick}
-        className={classNames(
-          'w-full grid grid-cols-[auto_minmax(0,3fr)_auto] gap-2 items-center text-left',
-          'px-1.5 h-xs font-mono cursor-default group focus:outline-none focus:text-text rounded',
-          isActive && '!bg-surface-active !text-text',
-          'text-text-subtle hover:text',
-        )}
-      >
-        <Icon
-          color={
-            messageType === 'close' || messageType === 'open'
-              ? 'secondary'
-              : isServer
-                ? 'info'
-                : 'primary'
-          }
-          icon={
-            messageType === 'close' || messageType === 'open'
-              ? 'info'
-              : isServer
-                ? 'arrow_big_down_dash'
-                : 'arrow_big_up_dash'
-          }
+    <EventViewerRow
+      isActive={isActive}
+      onClick={onClick}
+      icon={<Icon color={iconColor} icon={icon} />}
+      content={content}
+      timestamp={event.createdAt}
+    />
+  );
+}
+
+function WebsocketEventDetail({
+  event,
+  hexDump,
+  setHexDump,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+}: {
+  event: WebsocketEvent;
+  hexDump: boolean;
+  setHexDump: (v: boolean) => void;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+}) {
+  const message = useMemo(() => {
+    if (hexDump) {
+      return event.message ? hexy(event.message) : '';
+    }
+    return event.message ? new TextDecoder('utf-8').decode(Uint8Array.from(event.message)) : '';
+  }, [event.message, hexDump]);
+
+  const language = languageFromContentType(null, message);
+  const formattedMessage = useFormatText({ language, text: message, pretty: true });
+
+  const title =
+    event.messageType === 'close'
+      ? 'Connection Closed'
+      : event.messageType === 'open'
+        ? 'Connection Open'
+        : `Message ${event.isServer ? 'Received' : 'Sent'}`;
+
+  const actions: EventDetailAction[] =
+    message !== ''
+      ? [
+          {
+            key: 'toggle-hexdump',
+            label: hexDump ? 'Show Message' : 'Show Hexdump',
+            onClick: () => setHexDump(!hexDump),
+          },
+        ]
+      : [];
+
+  return (
+    <div className="h-full grid grid-rows-[auto_minmax(0,1fr)]">
+      <EventDetailHeader
+          title={title}
+          timestamp={event.createdAt}
+          actions={actions}
+          copyText={formattedMessage || undefined}
         />
-        <div className={classNames('w-full truncate text-xs')}>
-          {messageType === 'close' ? (
-            'Disconnected from server'
-          ) : messageType === 'open' ? (
-            'Connected to server'
-          ) : message === '' ? (
-            <em className="italic text-text-subtlest">No content</em>
-          ) : (
-            message.slice(0, 1000)
-          )}
-          {/*{error && <span className="text-warning"> ({error})</span>}*/}
-        </div>
-        <div className={classNames('opacity-50 text-xs')}>
-          {format(`${createdAt}Z`, 'HH:mm:ss.SSS')}
-        </div>
-      </button>
+      {!showLarge && event.message.length > 1000 * 1000 ? (
+        <VStack space={2} className="italic text-text-subtlest">
+          Message previews larger than 1MB are hidden
+          <div>
+            <Button
+              onClick={() => {
+                setShowingLarge(true);
+                setTimeout(() => {
+                  setShowLarge(true);
+                  setShowingLarge(false);
+                }, 500);
+              }}
+              isLoading={showingLarge}
+              color="secondary"
+              variant="border"
+              size="xs"
+            >
+              Try Showing
+            </Button>
+          </div>
+        </VStack>
+      ) : event.message.length === 0 ? (
+        <EmptyStateText>No Content</EmptyStateText>
+      ) : (
+        <Editor
+          language={language}
+          defaultValue={formattedMessage ?? ''}
+          wrapLines={false}
+          readOnly={true}
+          stateKey={null}
+        />
+      )}
     </div>
   );
 }

src-web/components/WorkspaceSettingsDialog.tsx

@@ -1,6 +1,5 @@
 import { patchModel, workspaceMetasAtom, workspacesAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { useState } from 'react';
 import { useAuthTab } from '../hooks/useAuthTab';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
@@ -9,10 +8,12 @@ import { router } from '../lib/router';
 import { CopyIconButton } from './CopyIconButton';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
+import { CountBadge } from './core/CountBadge';
 import { InlineCode } from './core/InlineCode';
 import { PlainInput } from './core/PlainInput';
 import { HStack, VStack } from './core/Stacks';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { DnsOverridesEditor } from './DnsOverridesEditor';
 import { HeadersEditor } from './HeadersEditor';
 import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
 import { MarkdownEditor } from './MarkdownEditor';
@@ -27,11 +28,13 @@ interface Props {
 
 const TAB_AUTH = 'auth';
 const TAB_DATA = 'data';
+const TAB_DNS = 'dns';
 const TAB_HEADERS = 'headers';
 const TAB_GENERAL = 'general';
 
 export type WorkspaceSettingsTab =
   | typeof TAB_AUTH
+  | typeof TAB_DNS
   | typeof TAB_HEADERS
   | typeof TAB_GENERAL
   | typeof TAB_DATA;
@@ -41,7 +44,6 @@ const DEFAULT_TAB: WorkspaceSettingsTab = TAB_GENERAL;
 export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
   const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
   const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
-  const [activeTab, setActiveTab] = useState<string>(tab ?? DEFAULT_TAB);
   const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
   const headersTab = useHeadersTab(TAB_HEADERS, workspace ?? null);
   const inheritedHeaders = useInheritedHeaders(workspace ?? null);
@@ -63,8 +65,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
 
   return (
     <Tabs
-      value={activeTab}
-      onChangeValue={setActiveTab}
+      defaultValue={tab ?? DEFAULT_TAB}
       label="Folder Settings"
       className="pt-4 pb-2 px-3"
       tabListClassName="pl-4"
@@ -77,7 +78,16 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
         },
         ...headersTab,
         ...authTab,
+        {
+          value: TAB_DNS,
+          label: 'DNS',
+          rightSlot:
+            workspace.settingDnsOverrides.length > 0 ? (
+              <CountBadge count={workspace.settingDnsOverrides.length} />
+            ) : null,
+        },
       ]}
+      storageKey="workspace_settings_tabs"
     >
       <TabContent value={TAB_AUTH} className="overflow-y-auto h-full px-4">
         <HttpAuthenticationEditor model={workspace} />
@@ -153,6 +163,9 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
           <WorkspaceEncryptionSetting size="xs" />
         </VStack>
       </TabContent>
+      <TabContent value={TAB_DNS} className="overflow-y-auto h-full px-4">
+        <DnsOverridesEditor workspace={workspace} />
+      </TabContent>
     </Tabs>
   );
 }

src-web/components/core/AutoScroller.tsx

@@ -1,4 +1,4 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 import type { ReactElement, ReactNode, UIEvent } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { IconButton } from './IconButton';
@@ -7,9 +7,19 @@ interface Props<T> {
   data: T[];
   render: (item: T, index: number) => ReactElement<HTMLElement>;
   header?: ReactNode;
+  /** Make container focusable for keyboard navigation */
+  focusable?: boolean;
+  /** Callback to expose the virtualizer for keyboard navigation */
+  onVirtualizerReady?: (virtualizer: Virtualizer<HTMLDivElement, Element>) => void;
 }
 
-export function AutoScroller<T>({ data, render, header }: Props<T>) {
+export function AutoScroller<T>({
+  data,
+  render,
+  header,
+  focusable = false,
+  onVirtualizerReady,
+}: Props<T>) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState<boolean>(true);
 
@@ -20,6 +30,11 @@ export function AutoScroller<T>({ data, render, header }: Props<T>) {
     estimateSize: () => 27, // react-virtual requires a height, so we'll give it one
   });
 
+  // Expose virtualizer to parent for keyboard navigation
+  useLayoutEffect(() => {
+    onVirtualizerReady?.(rowVirtualizer);
+  }, [rowVirtualizer, onVirtualizerReady]);
+
   // Scroll to new items
   const handleScroll = useCallback(
     (e: UIEvent<HTMLDivElement>) => {
@@ -48,7 +63,7 @@ export function AutoScroller<T>({ data, render, header }: Props<T>) {
   }, [autoScroll, data.length]);
 
   return (
-    <div className="h-full w-full relative grid grid-rows-[minmax(0,auto)_minmax(0,1fr)]">
+    <div className="h-full w-full relative grid grid-rows-[auto_minmax(0,1fr)]">
       {!autoScroll && (
         <div className="absolute bottom-0 right-0 m-2">
           <IconButton
@@ -63,7 +78,12 @@ export function AutoScroller<T>({ data, render, header }: Props<T>) {
         </div>
       )}
       {header ?? <span aria-hidden />}
-      <div ref={containerRef} className="h-full w-full overflow-y-auto" onScroll={handleScroll}>
+      <div
+        ref={containerRef}
+        className="h-full w-full overflow-y-auto focus:outline-none"
+        onScroll={handleScroll}
+        tabIndex={focusable ? 0 : undefined}
+      >
         <div
           style={{
             height: `${rowVirtualizer.getTotalSize()}px`,

src-web/components/core/Dropdown.tsx

@@ -766,8 +766,24 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       </m.div>
     );
 
+    // Hotkeys must be rendered even when menu is closed (so they work globally)
+    const hotKeyElements = items.map(
+      (item, i) =>
+        item.type !== 'separator' &&
+        item.type !== 'content' &&
+        !item.hotKeyLabelOnly &&
+        item.hotKeyAction && (
+          <MenuItemHotKey
+            key={`${item.hotKeyAction}::${i}`}
+            onSelect={handleSelect}
+            item={item}
+            action={item.hotKeyAction}
+          />
+        ),
+    );
+
     if (!isOpen) {
-      return null;
+      return <>{hotKeyElements}</>;
     }
 
     if (isSubmenu) {
@@ -776,20 +792,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
 
     return (
       <>
-        {items.map(
-          (item, i) =>
-            item.type !== 'separator' &&
-            item.type !== 'content' &&
-            !item.hotKeyLabelOnly &&
-            item.hotKeyAction && (
-              <MenuItemHotKey
-                key={`${item.hotKeyAction}::${i}`}
-                onSelect={handleSelect}
-                item={item}
-                action={item.hotKeyAction}
-              />
-            ),
-        )}
+        {hotKeyElements}
         <Overlay noBackdrop open={isOpen} portalName="dropdown-menu">
           {menuContent}
         </Overlay>

src-web/components/core/Editor/Editor.css

@@ -101,7 +101,7 @@
 
     .template-tag {
       /* Colors */
-      @apply bg-surface text-text border-border-subtle whitespace-nowrap;
+      @apply bg-surface text-text border-border-subtle whitespace-nowrap cursor-default;
       @apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;
 
       @apply inline border px-1 mx-[0.5px] rounded dark:shadow;

src-web/components/core/Editor/Editor.tsx

@@ -77,7 +77,7 @@ export interface EditorProps {
   heightMode?: 'auto' | 'full';
   hideGutter?: boolean;
   id?: string;
-  language?: EditorLanguage | 'pairs' | 'url' | null;
+  language?: EditorLanguage | 'pairs' | 'url' | 'timeline' | null;
   graphQLSchema?: GraphQLSchema | null;
   onBlur?: () => void;
   onChange?: (value: string) => void;

src-web/components/core/Editor/extensions.ts

@@ -48,6 +48,7 @@ import type { EditorProps } from './Editor';
 import { jsonParseLinter } from './json-lint';
 import { pairs } from './pairs/extension';
 import { text } from './text/extension';
+import { timeline } from './timeline/extension';
 import type { TwigCompletionOption } from './twig/completion';
 import { twig } from './twig/extension';
 import { pathParametersPlugin } from './twig/pathParameters';
@@ -95,6 +96,7 @@ const syntaxExtensions: Record<
   url: url,
   pairs: pairs,
   text: text,
+  timeline: timeline,
   markdown: markdown,
 };
 

src-web/components/core/Editor/timeline/extension.ts

@@ -0,0 +1,12 @@
+import { LanguageSupport, LRLanguage } from '@codemirror/language';
+import { parser } from './timeline';
+
+export const timelineLanguage = LRLanguage.define({
+  name: 'timeline',
+  parser,
+  languageData: {},
+});
+
+export function timeline() {
+  return new LanguageSupport(timelineLanguage);
+}

src-web/components/core/Editor/timeline/highlight.ts

@@ -0,0 +1,7 @@
+import { styleTags, tags as t } from '@lezer/highlight';
+
+export const highlight = styleTags({
+  OutgoingText: t.propertyName, // > lines - primary color (matches timeline icons)
+  IncomingText: t.tagName, // < lines - info color (matches timeline icons)
+  InfoText: t.comment, // * lines - subtle color (matches timeline icons)
+});

src-web/components/core/Editor/timeline/timeline.grammar

@@ -0,0 +1,21 @@
+@top Timeline { line* }
+
+line { OutgoingLine | IncomingLine | InfoLine | PlainLine }
+
+@skip {} {
+  OutgoingLine { OutgoingText Newline }
+  IncomingLine { IncomingText Newline }
+  InfoLine { InfoText Newline }
+  PlainLine { PlainText Newline }
+}
+
+@tokens {
+  OutgoingText { "> " ![\n]* }
+  IncomingText { "< " ![\n]* }
+  InfoText { "* " ![\n]* }
+  PlainText { ![\n]+ }
+  Newline { "\n" }
+  @precedence { OutgoingText, IncomingText, InfoText, PlainText }
+}
+
+@external propSource highlight from "./highlight"

src-web/components/core/Editor/timeline/timeline.terms.ts

@@ -0,0 +1,12 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const
+  Timeline = 1,
+  OutgoingLine = 2,
+  OutgoingText = 3,
+  Newline = 4,
+  IncomingLine = 5,
+  IncomingText = 6,
+  InfoLine = 7,
+  InfoText = 8,
+  PlainLine = 9,
+  PlainText = 10

src-web/components/core/Editor/timeline/timeline.ts

@@ -0,0 +1,18 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import {LRParser} from "@lezer/lr"
+import {highlight} from "./highlight"
+export const parser = LRParser.deserialize({
+  version: 14,
+  states: "!pQQOPOOO`OPO'#C^OeOPO'#CaOjOPO'#CcOoOPO'#CeOOOO'#Ci'#CiOOOO'#Cg'#CgQQOPOOOOOO,58x,58xOOOO,58{,58{OOOO,58},58}OOOO,59P,59POOOO-E6e-E6e",
+  stateData: "z~ORPOUQOWROYSO~OSWO~OSXO~OSYO~OSZO~ORUWYW~",
+  goto: "m^PP_PP_P_P_PcPiTTOVQVOR[VTUOV",
+  nodeNames: "⚠ Timeline OutgoingLine OutgoingText Newline IncomingLine IncomingText InfoLine InfoText PlainLine PlainText",
+  maxTerm: 13,
+  propSources: [highlight],
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: "%h~RZOYtYZ!]Zztz{!b{!^t!^!_#d!_!`t!`!a$f!a;'St;'S;=`!V<%lOt~ySY~OYtZ;'St;'S;=`!V<%lOt~!YP;=`<%lt~!bOS~~!gUY~OYtZptpq!yq;'St;'S;=`!V<%lOt~#QSW~Y~OY!yZ;'S!y;'S;=`#^<%lO!y~#aP;=`<%l!y~#iUY~OYtZptpq#{q;'St;'S;=`!V<%lOt~$SSU~Y~OY#{Z;'S#{;'S;=`$`<%lO#{~$cP;=`<%l#{~$kUY~OYtZptpq$}q;'St;'S;=`!V<%lOt~%USR~Y~OY$}Z;'S$};'S;=`%b<%lO$}~%eP;=`<%l$}",
+  tokenizers: [0],
+  topRules: {"Timeline":[0,1]},
+  tokenPrec: 36
+})

src-web/components/core/EventViewer.tsx

@@ -0,0 +1,258 @@
+import type { Virtualizer } from '@tanstack/react-virtual';
+import { format } from 'date-fns';
+import type { ReactNode } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useEventViewerKeyboard } from '../../hooks/useEventViewerKeyboard';
+import { CopyIconButton } from '../CopyIconButton';
+import { AutoScroller } from './AutoScroller';
+import { Banner } from './Banner';
+import { Button } from './Button';
+import { Separator } from './Separator';
+import { SplitLayout } from './SplitLayout';
+import { HStack } from './Stacks';
+import { IconButton } from './IconButton';
+import classNames from 'classnames';
+
+interface EventViewerProps<T> {
+  /** Array of events to display */
+  events: T[];
+
+  /** Get unique key for each event */
+  getEventKey: (event: T, index: number) => string;
+
+  /** Render the event row - receives event, index, isActive, and onClick */
+  renderRow: (props: {
+    event: T;
+    index: number;
+    isActive: boolean;
+    onClick: () => void;
+  }) => ReactNode;
+
+  /** Render the detail pane for the selected event */
+  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;
+
+  /** Optional header above the event list (e.g., connection status) */
+  header?: ReactNode;
+
+  /** Error message to display as a banner */
+  error?: string | null;
+
+  /** Name for SplitLayout state persistence */
+  splitLayoutName: string;
+
+  /** Default ratio for the split (0.0 - 1.0) */
+  defaultRatio?: number;
+
+  /** Enable keyboard navigation (arrow keys) */
+  enableKeyboardNav?: boolean;
+
+  /** Loading state */
+  isLoading?: boolean;
+
+  /** Message to show while loading */
+  loadingMessage?: string;
+
+  /** Message to show when no events */
+  emptyMessage?: string;
+
+  /** Callback when active index changes (for controlled state in parent) */
+  onActiveIndexChange?: (index: number | null) => void;
+}
+
+export function EventViewer<T>({
+  events,
+  getEventKey,
+  renderRow,
+  renderDetail,
+  header,
+  error,
+  splitLayoutName,
+  defaultRatio = 0.4,
+  enableKeyboardNav = true,
+  isLoading = false,
+  loadingMessage = 'Loading events...',
+  emptyMessage = 'No events recorded',
+  onActiveIndexChange,
+}: EventViewerProps<T>) {
+  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+
+  // Wrap setActiveIndex to notify parent
+  const setActiveIndex = useCallback(
+    (indexOrUpdater: number | null | ((prev: number | null) => number | null)) => {
+      setActiveIndexInternal((prev) => {
+        const newIndex =
+          typeof indexOrUpdater === 'function' ? indexOrUpdater(prev) : indexOrUpdater;
+        onActiveIndexChange?.(newIndex);
+        return newIndex;
+      });
+    },
+    [onActiveIndexChange],
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);
+
+  const activeEvent = useMemo(
+    () => (activeIndex != null ? events[activeIndex] : null),
+    [activeIndex, events],
+  );
+
+  // Check if the event list container is focused
+  const isContainerFocused = useCallback(() => {
+    return containerRef.current?.contains(document.activeElement) ?? false;
+  }, []);
+
+  // Keyboard navigation
+  useEventViewerKeyboard({
+    totalCount: events.length,
+    activeIndex,
+    setActiveIndex,
+    virtualizer: virtualizerRef.current,
+    isContainerFocused,
+    enabled: enableKeyboardNav,
+    closePanel: () => setIsPanelOpen(false),
+    openPanel: () => setIsPanelOpen(true),
+  });
+
+  // Handle virtualizer ready callback
+  const handleVirtualizerReady = useCallback(
+    (virtualizer: Virtualizer<HTMLDivElement, Element>) => {
+      virtualizerRef.current = virtualizer;
+    },
+    [],
+  );
+
+  // Handle row click - select and open panel, scroll into view
+  const handleRowClick = useCallback(
+    (index: number) => {
+      setActiveIndex(index);
+      setIsPanelOpen(true);
+      // Scroll to ensure selected item is visible after panel opens
+      requestAnimationFrame(() => {
+        virtualizerRef.current?.scrollToIndex(index, { align: 'auto' });
+      });
+    },
+    [setActiveIndex],
+  );
+
+  const handleClose = useCallback(() => {
+    setIsPanelOpen(false);
+  }, []);
+
+  if (isLoading) {
+    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
+  }
+
+  if (events.length === 0 && !error) {
+    return <div className="p-3 text-text-subtlest italic">{emptyMessage}</div>;
+  }
+
+  return (
+    <div ref={containerRef} className="h-full">
+      <SplitLayout
+        layout="vertical"
+        name={splitLayoutName}
+        defaultRatio={defaultRatio}
+        minHeightPx={10}
+        firstSlot={({ style }) => (
+          <div style={style} className="w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
+            {header ?? <span aria-hidden />}
+            <AutoScroller
+              data={events}
+              focusable={enableKeyboardNav}
+              onVirtualizerReady={handleVirtualizerReady}
+              header={
+                error && (
+                  <Banner color="danger" className="m-3">
+                    {error}
+                  </Banner>
+                )
+              }
+              render={(event, index) => (
+                <div key={getEventKey(event, index)}>
+                  {renderRow({
+                    event,
+                    index,
+                    isActive: index === activeIndex,
+                    onClick: () => handleRowClick(index),
+                  })}
+                </div>
+              )}
+            />
+          </div>
+        )}
+        secondSlot={
+          activeEvent != null && renderDetail && isPanelOpen
+            ? ({ style }) => (
+                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
+                  <div className="pb-3 px-2">
+                    <Separator />
+                  </div>
+                  <div className="mx-2 overflow-y-auto">
+                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0, onClose: handleClose })}
+                  </div>
+                </div>
+              )
+            : null
+        }
+      />
+    </div>
+  );
+}
+
+export interface EventDetailAction {
+  /** Unique key for React */
+  key: string;
+  /** Button label */
+  label: string;
+  /** Optional icon */
+  icon?: ReactNode;
+  /** Click handler */
+  onClick: () => void;
+}
+
+interface EventDetailHeaderProps {
+  title: string;
+  prefix?: ReactNode;
+  timestamp?: string;
+  actions?: EventDetailAction[];
+  copyText?: string;
+  onClose?: () => void;
+}
+
+export function EventDetailHeader({
+  title,
+  prefix,
+  timestamp,
+  actions,
+  copyText,
+  onClose,
+}: EventDetailHeaderProps) {
+  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), 'HH:mm:ss.SSS') : null;
+
+  return (
+    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
+      <HStack space={2} className="items-center min-w-0">
+        {prefix}
+        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
+      </HStack>
+      <HStack space={2} className="items-center">
+        {actions?.map((action) => (
+          <Button key={action.key} variant="border" size="xs" onClick={action.onClick}>
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+        {copyText != null && (
+          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
+        )}
+        {formattedTime && (
+          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
+        )}
+        <div className={classNames(copyText != null || formattedTime || (actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3")}>
+        <IconButton color="custom" className="text-text-subtle -mr-3" size="xs" icon="x" title="Close event panel" onClick={onClose} />
+        </div>
+      </HStack>
+    </div>
+  );
+}

src-web/components/core/EventViewerRow.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { format } from 'date-fns';
+import type { ReactNode } from 'react';
+
+interface EventViewerRowProps {
+  isActive: boolean;
+  onClick: () => void;
+  icon: ReactNode;
+  content: ReactNode;
+  timestamp?: string;
+}
+
+export function EventViewerRow({
+  isActive,
+  onClick,
+  icon,
+  content,
+  timestamp,
+}: EventViewerRowProps) {
+  return (
+    <div className="px-1">
+      <button
+        type="button"
+        onClick={onClick}
+        className={classNames(
+          'w-full grid grid-cols-[auto_minmax(0,1fr)_auto] gap-2 items-center text-left',
+          'px-1.5 h-xs font-mono text-editor cursor-default group focus:outline-none focus:text-text rounded',
+          isActive && 'bg-surface-active !text-text',
+          'text-text-subtle hover:text',
+        )}
+      >
+        {icon}
+        <div className="w-full truncate">{content}</div>
+        {timestamp && <div className="opacity-50">{format(`${timestamp}Z`, 'HH:mm:ss.SSS')}</div>}
+      </button>
+    </div>
+  );
+}

src-web/components/core/HttpResponseDurationTag.tsx

@@ -19,7 +19,8 @@ export function HttpResponseDurationTag({ response }: Props) {
     return () => clearInterval(timeout.current);
   }, [response.createdAt, response.state]);
 
-  const title = `HEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
+  const dnsValue = response.elapsedDns > 0 ? formatMillis(response.elapsedDns) : '--';
+  const title = `DNS: ${dnsValue}\nHEADER: ${formatMillis(response.elapsedHeaders)}\nTOTAL: ${formatMillis(response.elapsed)}`;
 
   const elapsed = response.state === 'closed' ? response.elapsed : fallbackElapsed;
 

src-web/components/core/Icon.tsx

@@ -78,6 +78,7 @@ import {
   GitCommitVerticalIcon,
   GitForkIcon,
   GitPullRequestIcon,
+  GlobeIcon,
   GripVerticalIcon,
   HandIcon,
   HardDriveDownloadIcon,
@@ -212,6 +213,7 @@ const icons = {
   git_commit_vertical: GitCommitVerticalIcon,
   git_fork: GitForkIcon,
   git_pull_request: GitPullRequestIcon,
+  globe: GlobeIcon,
   grip_vertical: GripVerticalIcon,
   circle_off: CircleOffIcon,
   hand: HandIcon,

src-web/components/core/KeyValueRow.tsx

@@ -4,15 +4,15 @@ import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 interface Props {
   children:
     | ReactElement<HTMLAttributes<HTMLTableColElement>>
-    | ReactElement<HTMLAttributes<HTMLTableColElement>>[];
+    | (ReactElement<HTMLAttributes<HTMLTableColElement>> | null)[];
 }
 
 export function KeyValueRows({ children }: Props) {
-  children = Array.isArray(children) ? children : [children];
+  const childArray = Array.isArray(children) ? children.filter(Boolean) : [children];
   return (
     <table className="text-editor font-mono min-w-0 w-full mb-auto">
       <tbody className="divide-y divide-surface-highlight">
-        {children.map((child, i) => (
+        {childArray.map((child, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: none
           <tr key={i}>{child}</tr>
         ))}

src-web/components/core/PairEditor.tsx

@@ -136,8 +136,8 @@ export function PairEditor({
       rowsRef.current[id] = n;
       const validHandles = Object.values(rowsRef.current).filter((v) => v != null);
 
-      // NOTE: Ignore the last placeholder pair
-      const ready = validHandles.length === pairs.length - 1;
+      // Use >= because more might be added if an ID of one changes (eg. editing placeholder in URL regenerates fresh pairs every keystroke)
+      const ready = validHandles.length >= pairs.length - 1;
       if (ready) {
         setRef?.(handle);
       }

src-web/components/core/Tabs/Tabs.tsx

@@ -10,8 +10,17 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import classNames from 'classnames';
-import type { ReactNode } from 'react';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode, Ref } from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useKeyValue } from '../../../hooks/useKeyValue';
 import { computeSideForDragMove } from '../../../lib/dnd';
 import { DropMarker } from '../../DropMarker';
@@ -37,41 +46,120 @@ export type TabItem =
       rightSlot?: ReactNode;
     };
 
+interface TabsStorage {
+  order: string[];
+  activeTabs: Record<string, string>;
+}
+
+export interface TabsRef {
+  /** Programmatically set the active tab */
+  setActiveTab: (value: string) => void;
+}
+
 interface Props {
   label: string;
-  value?: string;
-  onChangeValue: (value: string) => void;
+  /** Default tab value. If not provided, defaults to first tab. */
+  defaultValue?: string;
+  /** Called when active tab changes */
+  onChangeValue?: (value: string) => void;
   tabs: TabItem[];
   tabListClassName?: string;
   className?: string;
   children: ReactNode;
   addBorders?: boolean;
   layout?: 'horizontal' | 'vertical';
+  /** Storage key for persisting tab order and active tab. When provided, enables drag-to-reorder and active tab persistence. */
   storageKey?: string | string[];
+  /** Key to identify which context this tab belongs to (e.g., request ID). Used for per-context active tab persistence. */
+  activeTabKey?: string;
 }
 
-export function Tabs({
-  value,
-  onChangeValue,
-  label,
-  children,
-  tabs: originalTabs,
-  className,
-  tabListClassName,
-  addBorders,
-  layout = 'vertical',
-  storageKey,
-}: Props) {
+export const Tabs = forwardRef<TabsRef, Props>(function Tabs(
+  {
+    defaultValue,
+    onChangeValue: onChangeValueProp,
+    label,
+    children,
+    tabs: originalTabs,
+    className,
+    tabListClassName,
+    addBorders,
+    layout = 'vertical',
+    storageKey,
+    activeTabKey,
+  }: Props,
+  forwardedRef: Ref<TabsRef>,
+) {
   const ref = useRef<HTMLDivElement | null>(null);
   const reorderable = !!storageKey;
 
   // Use key-value storage for persistence if storageKey is provided
-  const { value: savedOrder, set: setSavedOrder } = useKeyValue<string[]>({
-    namespace: 'global',
-    key: storageKey ?? ['tabs_order', 'default'],
-    fallback: [],
+  // Handle migration from old format (string[]) to new format (TabsStorage)
+  const { value: rawStorage, set: setStorage } = useKeyValue<TabsStorage | string[]>({
+    namespace: 'no_sync',
+    key: storageKey ?? ['tabs', 'default'],
+    fallback: { order: [], activeTabs: {} },
   });
 
+  // Migrate old format (string[]) to new format (TabsStorage)
+  const storage: TabsStorage = Array.isArray(rawStorage)
+    ? { order: rawStorage, activeTabs: {} }
+    : (rawStorage ?? { order: [], activeTabs: {} });
+
+  const savedOrder = storage.order;
+
+  // Get the active tab value - prefer storage (if activeTabKey), then defaultValue, then first tab
+  const storedActiveTab = activeTabKey ? storage?.activeTabs?.[activeTabKey] : undefined;
+  const [internalValue, setInternalValue] = useState<string | undefined>(undefined);
+  const value = storedActiveTab ?? internalValue ?? defaultValue ?? originalTabs[0]?.value;
+
+  // Helper to normalize storage (handle migration from old format)
+  const normalizeStorage = useCallback(
+    (s: TabsStorage | string[]): TabsStorage =>
+      Array.isArray(s) ? { order: s, activeTabs: {} } : s,
+    [],
+  );
+
+  // Handle tab change - update internal state, storage if we have a key, and call prop callback
+  const onChangeValue = useCallback(
+    async (newValue: string) => {
+      setInternalValue(newValue);
+      if (storageKey && activeTabKey) {
+        await setStorage((s) => {
+          const normalized = normalizeStorage(s);
+          return {
+            ...normalized,
+            activeTabs: { ...normalized.activeTabs, [activeTabKey]: newValue },
+          };
+        });
+      }
+      onChangeValueProp?.(newValue);
+    },
+    [storageKey, activeTabKey, setStorage, onChangeValueProp, normalizeStorage],
+  );
+
+  // Expose imperative methods via ref
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      setActiveTab: (value: string) => {
+        onChangeValue(value);
+      },
+    }),
+    [onChangeValue],
+  );
+
+  // Helper to save order
+  const setSavedOrder = useCallback(
+    async (order: string[]) => {
+      await setStorage((s) => {
+        const normalized = normalizeStorage(s);
+        return { ...normalized, order };
+      });
+    },
+    [setStorage, normalizeStorage],
+  );
+
   // State for ordered tabs
   const [orderedTabs, setOrderedTabs] = useState<TabItem[]>(originalTabs);
   const [isDragging, setIsDragging] = useState<TabItem | null>(null);
@@ -112,8 +200,6 @@ export function Tabs({
 
   const tabs = storageKey ? orderedTabs : originalTabs;
 
-  value = value ?? tabs[0]?.value;
-
   // Update tabs when value changes
   useEffect(() => {
     const tabs = ref.current?.querySelectorAll<HTMLDivElement>('[data-tab]');
@@ -215,13 +301,10 @@ export function Tabs({
         items.push(
           <div
             key={`marker-${t.value}`}
-            className={classNames(
-              'relative',
-              layout === 'vertical' ? 'w-0' : 'h-0',
-            )}
+            className={classNames('relative', layout === 'vertical' ? 'w-0' : 'h-0')}
           >
             <DropMarker orientation={layout === 'vertical' ? 'vertical' : 'horizontal'} />
-          </div>
+          </div>,
         );
       }
 
@@ -235,7 +318,7 @@ export function Tabs({
           reorderable={reorderable}
           isDragging={isDragging?.value === t.value}
           onChangeValue={onChangeValue}
-        />
+        />,
       );
     });
     return items;
@@ -264,12 +347,7 @@ export function Tabs({
       >
         {tabButtons}
         {hoveredIndex === tabs.length && (
-          <div
-            className={classNames(
-              'relative',
-              layout === 'vertical' ? 'w-0' : 'h-0',
-            )}
-          >
+          <div className={classNames('relative', layout === 'vertical' ? 'w-0' : 'h-0')}>
             <DropMarker orientation={layout === 'vertical' ? 'vertical' : 'horizontal'} />
           </div>
         )}
@@ -320,7 +398,7 @@ export function Tabs({
       {children}
     </div>
   );
-}
+});
 
 interface TabButtonProps {
   tab: TabItem;
@@ -329,7 +407,7 @@ interface TabButtonProps {
   layout: 'horizontal' | 'vertical';
   reorderable: boolean;
   isDragging: boolean;
-  onChangeValue: (value: string) => void;
+  onChangeValue?: (value: string) => void;
   overlay?: boolean;
 }
 
@@ -350,6 +428,8 @@ function TabButton({
   } = useDraggable({
     id: tab.value,
     disabled: !reorderable,
+    // The button inside handles focus
+    attributes: { tabIndex: -1 },
   });
   const { setNodeRef: setDroppableRef } = useDroppable({
     id: tab.value,
@@ -369,7 +449,12 @@ function TabButton({
   const btnProps: Partial<ButtonProps> = {
     color: 'custom',
     justify: layout === 'horizontal' ? 'start' : 'center',
-    onClick: isActive ? undefined : () => onChangeValue(tab.value),
+    onClick: isActive
+      ? undefined
+      : (e: React.MouseEvent) => {
+          e.preventDefault(); // Prevent dropdown from opening on first click
+          onChangeValue?.(tab.value);
+        },
     className: classNames(
       'flex items-center rounded whitespace-nowrap',
       '!px-2 ml-[1px]',
@@ -426,11 +511,7 @@ function TabButton({
       );
     }
     return (
-      <Button
-        leftSlot={tab.leftSlot}
-        rightSlot={tab.rightSlot}
-        {...btnProps}
-      >
+      <Button leftSlot={tab.leftSlot} rightSlot={tab.rightSlot} {...btnProps}>
         {'label' in tab && tab.label ? tab.label : tab.value}
       </Button>
     );
@@ -473,3 +554,32 @@ export const TabContent = memo(function TabContent({
     </ErrorBoundary>
   );
 });
+
+/**
+ * Programmatically set the active tab for a Tabs component that uses storageKey + activeTabKey.
+ * This is useful when you need to change the tab from outside the component (e.g., in response to an event).
+ */
+export async function setActiveTab({
+  storageKey,
+  activeTabKey,
+  value,
+}: {
+  storageKey: string;
+  activeTabKey: string;
+  value: string;
+}): Promise<void> {
+  const { getKeyValue, setKeyValue } = await import('../../../lib/keyValueStore');
+  const current = getKeyValue<TabsStorage>({
+    namespace: 'no_sync',
+    key: storageKey,
+    fallback: { order: [], activeTabs: {} },
+  });
+  await setKeyValue({
+    namespace: 'no_sync',
+    key: storageKey,
+    value: {
+      ...current,
+      activeTabs: { ...current.activeTabs, [activeTabKey]: value },
+    },
+  });
+}

src-web/components/responseViewers/EventStreamViewer.tsx

@@ -5,15 +5,13 @@ import { Fragment, useMemo, useState } from 'react';
 import { useFormatText } from '../../hooks/useFormatText';
 import { useResponseBodyEventSource } from '../../hooks/useResponseBodyEventSource';
 import { isJSON } from '../../lib/contentType';
-import { AutoScroller } from '../core/AutoScroller';
-import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
 import type { EditorProps } from '../core/Editor/Editor';
 import { Editor } from '../core/Editor/LazyEditor';
+import { EventDetailHeader, EventViewer } from '../core/EventViewer';
+import { EventViewerRow } from '../core/EventViewerRow';
 import { Icon } from '../core/Icon';
 import { InlineCode } from '../core/InlineCode';
-import { Separator } from '../core/Separator';
-import { SplitLayout } from '../core/SplitLayout';
 import { HStack, VStack } from '../core/Stacks';
 
 interface Props {
@@ -33,134 +31,100 @@ export function EventStreamViewer({ response }: Props) {
 function ActualEventStreamViewer({ response }: Props) {
   const [showLarge, setShowLarge] = useState<boolean>(false);
   const [showingLarge, setShowingLarge] = useState<boolean>(false);
-  const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null);
   const events = useResponseBodyEventSource(response);
-  const activeEvent = useMemo(
-    () => (activeEventIndex == null ? null : events.data?.[activeEventIndex]),
-    [activeEventIndex, events],
-  );
-
-  const language = useMemo<'text' | 'json'>(() => {
-    if (!activeEvent?.data) return 'text';
-    return isJSON(activeEvent?.data) ? 'json' : 'text';
-  }, [activeEvent?.data]);
 
   return (
-    <SplitLayout
-      layout="vertical"
-      name="grpc_events"
+    <EventViewer
+      events={events.data ?? []}
+      getEventKey={(_, index) => String(index)}
+      error={events.error ? String(events.error) : null}
+      splitLayoutName="sse_events"
       defaultRatio={0.4}
-      minHeightPx={20}
-      firstSlot={() => (
-        <AutoScroller
-          data={events.data ?? []}
-          header={
-            events.error && (
-              <Banner color="danger" className="m-3">
-                {String(events.error)}
-              </Banner>
-            )
+      renderRow={({ event, index, isActive, onClick }) => (
+        <EventViewerRow
+          isActive={isActive}
+          onClick={onClick}
+          icon={<Icon color="info" title="Server Message" icon="arrow_big_down_dash" />}
+          content={
+            <HStack space={2} className="items-center">
+              <EventLabels event={event} index={index} isActive={isActive} />
+              <span className="truncate text-xs">{event.data.slice(0, 1000)}</span>
+            </HStack>
           }
-          render={(event, i) => (
-            <EventRow
-              event={event}
-              isActive={i === activeEventIndex}
-              index={i}
-              onClick={() => {
-                if (i === activeEventIndex) setActiveEventIndex(null);
-                else setActiveEventIndex(i);
-              }}
-            />
-          )}
+
+        />
+      )}
+      renderDetail={({ event, index }) => (
+        <EventDetail
+          event={event}
+          index={index}
+          showLarge={showLarge}
+          showingLarge={showingLarge}
+          setShowLarge={setShowLarge}
+          setShowingLarge={setShowingLarge}
         />
       )}
-      secondSlot={
-        activeEvent
-          ? () => (
-              <div className="grid grid-rows-[auto_minmax(0,1fr)]">
-                <div className="pb-3 px-2">
-                  <Separator />
-                </div>
-                <div className="flex flex-col pl-2">
-                  <HStack space={1.5} className="mb-2 font-semibold">
-                    <EventLabels
-                      className="text-sm"
-                      event={activeEvent}
-                      index={activeEventIndex ?? 0}
-                    />
-                    Message Received
-                  </HStack>
-                  {!showLarge && activeEvent.data.length > 1000 * 1000 ? (
-                    <VStack space={2} className="italic text-text-subtlest">
-                      Message previews larger than 1MB are hidden
-                      <div>
-                        <Button
-                          onClick={() => {
-                            setShowingLarge(true);
-                            setTimeout(() => {
-                              setShowLarge(true);
-                              setShowingLarge(false);
-                            }, 500);
-                          }}
-                          isLoading={showingLarge}
-                          color="secondary"
-                          variant="border"
-                          size="xs"
-                        >
-                          Try Showing
-                        </Button>
-                      </div>
-                    </VStack>
-                  ) : (
-                    <FormattedEditor language={language} text={activeEvent.data} />
-                  )}
-                </div>
-              </div>
-            )
-          : null
-      }
     />
   );
 }
 
+function EventDetail({
+  event,
+  index,
+  showLarge,
+  showingLarge,
+  setShowLarge,
+  setShowingLarge,
+}: {
+  event: ServerSentEvent;
+  index: number;
+  showLarge: boolean;
+  showingLarge: boolean;
+  setShowLarge: (v: boolean) => void;
+  setShowingLarge: (v: boolean) => void;
+}) {
+  const language = useMemo<'text' | 'json'>(() => {
+    if (!event?.data) return 'text';
+    return isJSON(event?.data) ? 'json' : 'text';
+  }, [event?.data]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <EventDetailHeader title="Message Received" prefix={<EventLabels event={event} index={index} />} />
+      {!showLarge && event.data.length > 1000 * 1000 ? (
+        <VStack space={2} className="italic text-text-subtlest">
+          Message previews larger than 1MB are hidden
+          <div>
+            <Button
+              onClick={() => {
+                setShowingLarge(true);
+                setTimeout(() => {
+                  setShowLarge(true);
+                  setShowingLarge(false);
+                }, 500);
+              }}
+              isLoading={showingLarge}
+              color="secondary"
+              variant="border"
+              size="xs"
+            >
+              Try Showing
+            </Button>
+          </div>
+        </VStack>
+      ) : (
+        <FormattedEditor language={language} text={event.data} />
+      )}
+    </div>
+  );
+}
+
 function FormattedEditor({ text, language }: { text: string; language: EditorProps['language'] }) {
   const formatted = useFormatText({ text, language, pretty: true });
   if (formatted == null) return null;
   return <Editor readOnly defaultValue={formatted} language={language} stateKey={null} />;
 }
 
-function EventRow({
-  onClick,
-  isActive,
-  event,
-  className,
-  index,
-}: {
-  onClick: () => void;
-  isActive: boolean;
-  event: ServerSentEvent;
-  className?: string;
-  index: number;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={classNames(
-        className,
-        'w-full grid grid-cols-[auto_auto_minmax(0,3fr)] gap-2 items-center text-left',
-        '-mx-1.5 px-1.5 h-xs font-mono group focus:outline-none focus:text-text rounded',
-        isActive && '!bg-surface-active !text-text',
-        'text-text-subtle hover:text',
-      )}
-    >
-      <Icon color="info" title="Server Message" icon="arrow_big_down_dash" />
-      <EventLabels className="text-sm" event={event} isActive={isActive} index={index} />
-      <div className={classNames('w-full truncate text-xs')}>{event.data.slice(0, 1000)}</div>
-    </button>
-  );
-}
-
 function EventLabels({
   className,
   event,
@@ -169,7 +133,7 @@ function EventLabels({
 }: {
   event: ServerSentEvent;
   index: number;
-  className: string;
+  className?: string;
   isActive?: boolean;
 }) {
   return (