Add APPLE_TEAM_ID

.github/workflows/artifacts.yml

@@ -11,8 +11,12 @@ jobs:
         include:
           - os: macos-12
             target: aarch64-apple-darwin
-          - os: macos-12
+          - os: macos-latest
             target: x86_64-apple-darwin
+          - os: windows-2022
+            target: x86_64-pc-windows-msvc
+          - os: ubuntu-20.04
+            target: x86_64-unknown-linux-gnu
 
     runs-on: ${{ matrix.os }}
 
@@ -34,7 +38,7 @@ jobs:
           node-version: 18
           cache: 'npm'
       - name: install dependencies (ubuntu only)
-        if: matrix.os == 'ubuntu-latest'
+        if: matrix.os == 'ubuntu-20.04'
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.0-dev libappindicator3-dev librsvg2-dev patchelf
@@ -54,6 +58,7 @@ jobs:
           APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
         with:
           tagName: 'v__VERSION__'

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Yaak App</title>
-  <script src="http://localhost:8097"></script>
+<!--  <script src="http://localhost:8097"></script>-->
   <style>
       body {
           background-color: white;

package.json

@@ -33,14 +33,16 @@
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.28.0",
     "@tanstack/react-query-persist-client": "^4.28.0",
-    "@tauri-apps/api": "^1.2.0",
+    "@tauri-apps/api": "^1.5.1",
     "@vitejs/plugin-react": "^3.1.0",
+    "buffer": "^6.0.3",
     "classnames": "^2.3.2",
     "cm6-graphql": "^0.0.4-canary-b30a2325.0",
     "codemirror": "^6.0.1",
     "focus-trap-react": "^10.1.1",
     "format-graphql": "^1.4.0",
     "framer-motion": "^9.0.4",
+    "papaparse": "^5.4.1",
     "parse-color": "^1.0.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
@@ -53,8 +55,9 @@
   },
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tauri-apps/cli": "^1.2.2",
+    "@tauri-apps/cli": "^1.5.4",
     "@types/node": "^18.7.10",
+    "@types/papaparse": "^5.3.7",
     "@types/parse-color": "^1.0.1",
     "@types/parse-json": "^4.0.0",
     "@types/react": "^18.0.31",

src-tauri/Cargo.toml

@@ -15,18 +15,18 @@ tauri-build = { version = "1.2", features = [] }
 
 [target.'cfg(target_os = "macos")'.dependencies]
 objc = "0.2.7"
-cocoa = "0.24.1"
+cocoa = "0.25.0"
 
 [dependencies]
 serde_json = { version = "1.0", features = ["raw_value"] }
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["config-toml", "devtools", "shell-open", "system-tray", "updater", "window-start-dragging"] }
+tauri = { version = "1.3", features = ["config-toml", "devtools", "fs-read-file", "os-all", "protocol-asset", "shell-open", "system-tray", "updater", "window-start-dragging"] }
 http = "0.2.8"
 reqwest = { version = "0.11.14", features = ["json"] }
 tokio = { version = "1.25.0", features = ["sync"] }
 futures = "0.3.26"
-deno_core = "0.179.0"
-deno_ast = { version = "0.25.0", features = ["transpiling"] }
+deno_core = "0.222.0"
+deno_ast = { version = "0.29.5", features = ["transpiling"] }
 sqlx = { version = "0.6.2", features = ["sqlite", "runtime-tokio-rustls", "json", "chrono", "time", "offline"] }
 uuid = "1.3.0"
 rand = "0.8.5"

src-tauri/migrations/20230413232435_response-body-blob.sql

@@ -0,0 +1,5 @@
+DELETE FROM main.http_responses;
+ALTER TABLE http_responses DROP COLUMN body;
+ALTER TABLE http_responses ADD COLUMN body BLOB;
+ALTER TABLE http_responses ADD COLUMN body_path TEXT;
+ALTER TABLE http_responses ADD COLUMN content_length INTEGER;

src-tauri/sqlx-data.json

@@ -58,25 +58,107 @@
     },
     "query": "\n            DELETE FROM http_responses\n            WHERE id = ?\n        "
   },
-  "0fa36011553f7ca91113459a5cefd47f990f9b548a95e475ffd6e4b017059488": {
+  "26072725d536c3cfdffd9a681d17c0ee2f246ca98e0459630a2430236d3bbdd2": {
     "describe": {
-      "columns": [],
-      "nullable": [],
+      "columns": [
+        {
+          "name": "id",
+          "ordinal": 0,
+          "type_info": "Text"
+        },
+        {
+          "name": "model",
+          "ordinal": 1,
+          "type_info": "Text"
+        },
+        {
+          "name": "workspace_id",
+          "ordinal": 2,
+          "type_info": "Text"
+        },
+        {
+          "name": "request_id",
+          "ordinal": 3,
+          "type_info": "Text"
+        },
+        {
+          "name": "updated_at",
+          "ordinal": 4,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "created_at",
+          "ordinal": 5,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "url",
+          "ordinal": 6,
+          "type_info": "Text"
+        },
+        {
+          "name": "status",
+          "ordinal": 7,
+          "type_info": "Int64"
+        },
+        {
+          "name": "status_reason",
+          "ordinal": 8,
+          "type_info": "Text"
+        },
+        {
+          "name": "content_length",
+          "ordinal": 9,
+          "type_info": "Int64"
+        },
+        {
+          "name": "body",
+          "ordinal": 10,
+          "type_info": "Blob"
+        },
+        {
+          "name": "body_path",
+          "ordinal": 11,
+          "type_info": "Text"
+        },
+        {
+          "name": "elapsed",
+          "ordinal": 12,
+          "type_info": "Int64"
+        },
+        {
+          "name": "error",
+          "ordinal": 13,
+          "type_info": "Text"
+        },
+        {
+          "name": "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>",
+          "ordinal": 14,
+          "type_info": "Text"
+        }
+      ],
+      "nullable": [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        true,
+        true,
+        true,
+        false,
+        true,
+        false
+      ],
       "parameters": {
         "Right": 1
       }
     },
-    "query": "\n            DELETE FROM http_responses\n            WHERE request_id = ?\n        "
-  },
-  "318ed5a1126fe00719393cf4e6c788ee5a265af88b7253f61a475f78c6774ef6": {
-    "describe": {
-      "columns": [],
-      "nullable": [],
-      "parameters": {
-        "Right": 9
-      }
-    },
-    "query": "\n            INSERT INTO http_responses (\n                id,\n                request_id,\n                workspace_id,\n                elapsed,\n                url,\n                status,\n                status_reason,\n                body,\n                headers\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);\n        "
+    "query": "\n            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,\n                status, status_reason, content_length, body, body_path, elapsed, error,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpResponseHeader>>\"\n            FROM http_responses\n            WHERE workspace_id = ?\n            ORDER BY created_at DESC\n        "
   },
   "448a1d1f1866ab42c0f81fcf8eb2930bf21dfdd43ca4831bc1a198cf45ac3732": {
     "describe": {
@@ -88,6 +170,118 @@
     },
     "query": "\n            DELETE FROM http_requests\n            WHERE id = ?\n        "
   },
+  "5aa070e61995f8b1724efaa94c5f0cef5a4be6efda5d70354ad449d7d4b5aee4": {
+    "describe": {
+      "columns": [
+        {
+          "name": "id",
+          "ordinal": 0,
+          "type_info": "Text"
+        },
+        {
+          "name": "model",
+          "ordinal": 1,
+          "type_info": "Text"
+        },
+        {
+          "name": "workspace_id",
+          "ordinal": 2,
+          "type_info": "Text"
+        },
+        {
+          "name": "request_id",
+          "ordinal": 3,
+          "type_info": "Text"
+        },
+        {
+          "name": "updated_at",
+          "ordinal": 4,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "created_at",
+          "ordinal": 5,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "url",
+          "ordinal": 6,
+          "type_info": "Text"
+        },
+        {
+          "name": "status",
+          "ordinal": 7,
+          "type_info": "Int64"
+        },
+        {
+          "name": "status_reason",
+          "ordinal": 8,
+          "type_info": "Text"
+        },
+        {
+          "name": "content_length",
+          "ordinal": 9,
+          "type_info": "Int64"
+        },
+        {
+          "name": "body",
+          "ordinal": 10,
+          "type_info": "Blob"
+        },
+        {
+          "name": "body_path",
+          "ordinal": 11,
+          "type_info": "Text"
+        },
+        {
+          "name": "elapsed",
+          "ordinal": 12,
+          "type_info": "Int64"
+        },
+        {
+          "name": "error",
+          "ordinal": 13,
+          "type_info": "Text"
+        },
+        {
+          "name": "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>",
+          "ordinal": 14,
+          "type_info": "Text"
+        }
+      ],
+      "nullable": [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        true,
+        true,
+        true,
+        false,
+        true,
+        false
+      ],
+      "parameters": {
+        "Right": 1
+      }
+    },
+    "query": "\n            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,\n                status, status_reason, content_length, body, body_path, elapsed, error,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpResponseHeader>>\"\n            FROM http_responses\n            WHERE request_id = ?\n            ORDER BY created_at DESC\n        "
+  },
+  "62475fd9483fb5eda01c937949da2ef66ac7005b4be06b87aa6210d462348aca": {
+    "describe": {
+      "columns": [],
+      "nullable": [],
+      "parameters": {
+        "Right": 10
+      }
+    },
+    "query": "\n            UPDATE http_responses SET (\n                elapsed,\n                url,\n                status,\n                status_reason,\n                content_length,\n                body,\n                body_path,\n                error,\n                headers,\n                updated_at\n            ) = (?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;\n        "
+  },
   "6f0cb5a6d1e8dbc8cdfcc3c7e7944b2c83c22cb795b9d6b98fe067dabec9680b": {
     "describe": {
       "columns": [
@@ -194,15 +388,15 @@
     },
     "query": "\n            DELETE FROM workspaces\n            WHERE id = ?\n        "
   },
-  "a83698dcf9a815b881097133edb31a34ba25e7c6c114d463c495342a85371639": {
+  "8947a2a90478277c42fe9b06bc1fa98197642a4d281a3dbc101be2c9c1fec36c": {
     "describe": {
       "columns": [],
       "nullable": [],
       "parameters": {
-        "Right": 8
+        "Right": 11
       }
     },
-    "query": "\n            UPDATE http_responses SET (elapsed, url, status, status_reason, body, error, headers, updated_at) =\n            (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;\n        "
+    "query": "\n            INSERT INTO http_responses (\n                id,\n                request_id,\n                workspace_id,\n                elapsed,\n                url,\n                status,\n                status_reason,\n                content_length,\n                body,\n                body_path,\n                headers\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);\n        "
   },
   "b19c275180909a39342b13c3cdcf993781636913ae590967f5508c46a56dc961": {
     "describe": {
@@ -214,6 +408,108 @@
     },
     "query": "\n            INSERT INTO http_requests (\n                id,\n                workspace_id,\n                name,\n                url,\n                method,\n                body,\n                body_type,\n                authentication,\n                authentication_type,\n                headers,\n                sort_priority\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               method = excluded.method,\n               headers = excluded.headers,\n               body = excluded.body,\n               body_type = excluded.body_type,\n               authentication = excluded.authentication,\n               authentication_type = excluded.authentication_type,\n               url = excluded.url,\n               sort_priority = excluded.sort_priority\n        "
   },
+  "c23c61b05a4c9e04ab0c1fc2c579d6f2a82a37aeed8addf9861b4985f2a5422e": {
+    "describe": {
+      "columns": [
+        {
+          "name": "id",
+          "ordinal": 0,
+          "type_info": "Text"
+        },
+        {
+          "name": "model",
+          "ordinal": 1,
+          "type_info": "Text"
+        },
+        {
+          "name": "workspace_id",
+          "ordinal": 2,
+          "type_info": "Text"
+        },
+        {
+          "name": "request_id",
+          "ordinal": 3,
+          "type_info": "Text"
+        },
+        {
+          "name": "updated_at",
+          "ordinal": 4,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "created_at",
+          "ordinal": 5,
+          "type_info": "Datetime"
+        },
+        {
+          "name": "url",
+          "ordinal": 6,
+          "type_info": "Text"
+        },
+        {
+          "name": "status",
+          "ordinal": 7,
+          "type_info": "Int64"
+        },
+        {
+          "name": "status_reason",
+          "ordinal": 8,
+          "type_info": "Text"
+        },
+        {
+          "name": "content_length",
+          "ordinal": 9,
+          "type_info": "Int64"
+        },
+        {
+          "name": "body",
+          "ordinal": 10,
+          "type_info": "Blob"
+        },
+        {
+          "name": "body_path",
+          "ordinal": 11,
+          "type_info": "Text"
+        },
+        {
+          "name": "elapsed",
+          "ordinal": 12,
+          "type_info": "Int64"
+        },
+        {
+          "name": "error",
+          "ordinal": 13,
+          "type_info": "Text"
+        },
+        {
+          "name": "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>",
+          "ordinal": 14,
+          "type_info": "Text"
+        }
+      ],
+      "nullable": [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        true,
+        true,
+        true,
+        true,
+        false,
+        true,
+        false
+      ],
+      "parameters": {
+        "Right": 1
+      }
+    },
+    "query": "\n            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,\n                status, status_reason, content_length, body, body_path, elapsed, error,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpResponseHeader>>\"\n            FROM http_responses\n            WHERE id = ?\n        "
+  },
   "caf3f21bf291dfbd36446592066e96c1f83abe96f6ea9211a3e049eb9c58a8c8": {
     "describe": {
       "columns": [
@@ -406,96 +702,6 @@
     },
     "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                created_at,\n                updated_at,\n                name,\n                url,\n                method,\n                body,\n                body_type,\n                authentication AS \"authentication!: Json<HashMap<String, JsonValue>>\",\n                authentication_type,\n                sort_priority,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpRequestHeader>>\"\n            FROM http_requests\n            WHERE id = ?\n        "
   },
-  "d5ad6d5f82fe837fa9215bd4619ec18a7c95b3088d4fbf9825f2d1d28069d1ce": {
-    "describe": {
-      "columns": [
-        {
-          "name": "id",
-          "ordinal": 0,
-          "type_info": "Text"
-        },
-        {
-          "name": "model",
-          "ordinal": 1,
-          "type_info": "Text"
-        },
-        {
-          "name": "workspace_id",
-          "ordinal": 2,
-          "type_info": "Text"
-        },
-        {
-          "name": "request_id",
-          "ordinal": 3,
-          "type_info": "Text"
-        },
-        {
-          "name": "updated_at",
-          "ordinal": 4,
-          "type_info": "Datetime"
-        },
-        {
-          "name": "created_at",
-          "ordinal": 5,
-          "type_info": "Datetime"
-        },
-        {
-          "name": "status",
-          "ordinal": 6,
-          "type_info": "Int64"
-        },
-        {
-          "name": "status_reason",
-          "ordinal": 7,
-          "type_info": "Text"
-        },
-        {
-          "name": "body",
-          "ordinal": 8,
-          "type_info": "Text"
-        },
-        {
-          "name": "elapsed",
-          "ordinal": 9,
-          "type_info": "Int64"
-        },
-        {
-          "name": "url",
-          "ordinal": 10,
-          "type_info": "Text"
-        },
-        {
-          "name": "error",
-          "ordinal": 11,
-          "type_info": "Text"
-        },
-        {
-          "name": "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>",
-          "ordinal": 12,
-          "type_info": "Text"
-        }
-      ],
-      "nullable": [
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        true,
-        false,
-        false,
-        false,
-        true,
-        false
-      ],
-      "parameters": {
-        "Right": 1
-      }
-    },
-    "query": "\n            SELECT id, model, workspace_id, request_id, updated_at,\n                created_at, status, status_reason, body, elapsed, url, error,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpResponseHeader>>\"\n            FROM http_responses\n            WHERE request_id = ?\n            ORDER BY created_at ASC\n        "
-  },
   "d80c09497771e3641022e73ec6c6a87e73a551f88a948a5445d754922b82b50b": {
     "describe": {
       "columns": [],
@@ -516,96 +722,6 @@
     },
     "query": "\n            UPDATE workspaces SET (name, updated_at) =\n            (?, CURRENT_TIMESTAMP) WHERE id = ?;\n        "
   },
-  "e3ade0a69348d512e47e964bded9d7d890b92fdc1e01c6c22fa5e91f943639f2": {
-    "describe": {
-      "columns": [
-        {
-          "name": "id",
-          "ordinal": 0,
-          "type_info": "Text"
-        },
-        {
-          "name": "model",
-          "ordinal": 1,
-          "type_info": "Text"
-        },
-        {
-          "name": "workspace_id",
-          "ordinal": 2,
-          "type_info": "Text"
-        },
-        {
-          "name": "request_id",
-          "ordinal": 3,
-          "type_info": "Text"
-        },
-        {
-          "name": "updated_at",
-          "ordinal": 4,
-          "type_info": "Datetime"
-        },
-        {
-          "name": "created_at",
-          "ordinal": 5,
-          "type_info": "Datetime"
-        },
-        {
-          "name": "status",
-          "ordinal": 6,
-          "type_info": "Int64"
-        },
-        {
-          "name": "status_reason",
-          "ordinal": 7,
-          "type_info": "Text"
-        },
-        {
-          "name": "body",
-          "ordinal": 8,
-          "type_info": "Text"
-        },
-        {
-          "name": "elapsed",
-          "ordinal": 9,
-          "type_info": "Int64"
-        },
-        {
-          "name": "url",
-          "ordinal": 10,
-          "type_info": "Text"
-        },
-        {
-          "name": "error",
-          "ordinal": 11,
-          "type_info": "Text"
-        },
-        {
-          "name": "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>",
-          "ordinal": 12,
-          "type_info": "Text"
-        }
-      ],
-      "nullable": [
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        false,
-        true,
-        false,
-        false,
-        false,
-        true,
-        false
-      ],
-      "parameters": {
-        "Right": 1
-      }
-    },
-    "query": "\n            SELECT id, model, workspace_id, request_id, updated_at, created_at,\n                status, status_reason, body, elapsed, url, error,\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpResponseHeader>>\"\n            FROM http_responses\n            WHERE id = ?\n        "
-  },
   "f116d8cf9aad828135bb8c3a4c8b8e6b857ae13303989e9133a33b2d1cf20e96": {
     "describe": {
       "columns": [],

src-tauri/src/main.rs

@@ -9,11 +9,13 @@ extern crate objc;
 
 use std::collections::HashMap;
 use std::env::current_dir;
-use std::fs::create_dir_all;
+use std::fs::{create_dir_all, File};
+use std::io::Write;
 
 use base64::Engine;
 use http::header::{HeaderName, ACCEPT, USER_AGENT};
 use http::{HeaderMap, HeaderValue, Method};
+use rand::random;
 use reqwest::redirect::Policy;
 use serde::Serialize;
 use sqlx::migrate::Migrator;
@@ -21,14 +23,16 @@ use sqlx::sqlite::SqlitePoolOptions;
 use sqlx::types::Json;
 use sqlx::{Pool, Sqlite};
 use tauri::regex::Regex;
-use tauri::{
-    AppHandle, Menu, MenuItem, RunEvent, State, Submenu, TitleBarStyle, Window, WindowUrl, Wry,
-};
+#[cfg(target_os = "macos")]
+use tauri::TitleBarStyle;
+use tauri::{AppHandle, Menu, MenuItem, RunEvent, State, Submenu, Window, WindowUrl, Wry};
 use tauri::{CustomMenuItem, Manager, WindowEvent};
 use tokio::sync::Mutex;
 
 use window_ext::WindowExt;
 
+use crate::models::generate_id;
+
 mod models;
 mod runtime;
 mod window_ext;
@@ -221,9 +225,41 @@ async fn actually_send_ephemeral_request(
                     .collect(),
             );
             response.url = v.url().to_string();
-            response.body = v.text().await.expect("Failed to get body");
+            let body_bytes = v.bytes().await.expect("Failed to get body").to_vec();
+            response.content_length = Some(body_bytes.len() as i64);
+
+            {
+                // Write body to FS
+                let dir = app_handle.path_resolver().app_data_dir().unwrap();
+                let base_dir = dir.join("responses");
+                create_dir_all(base_dir.clone()).expect("Failed to create responses dir");
+                let body_path = match response.id == "" {
+                    false => base_dir.join(response.id.clone()),
+                    true => base_dir.join(uuid::Uuid::new_v4().to_string()),
+                };
+                let mut f = File::options()
+                    .create(true)
+                    .truncate(true)
+                    .write(true)
+                    .open(&body_path)
+                    .expect("Failed to open file");
+                f.write_all(body_bytes.as_slice())
+                    .expect("Failed to write to file");
+                response.body_path = Some(
+                    body_path
+                        .to_str()
+                        .expect("Failed to get body path")
+                        .to_string(),
+                );
+            }
+
+            // Also store body directly on the model, if small enough
+            if body_bytes.len() < 100_000 {
+                response.body = Some(body_bytes);
+            }
+
             response.elapsed = start.elapsed().as_millis() as i64;
-            response = models::update_response_if_id(response, pool)
+            response = models::update_response_if_id(&response, pool)
                 .await
                 .expect("Failed to update response");
             if request.id != "" {
@@ -247,7 +283,7 @@ async fn send_request(
         .await
         .expect("Failed to get request");
 
-    let response = models::create_response(&req.id, 0, "", 0, None, "", vec![], pool)
+    let response = models::create_response(&req.id, 0, "", 0, None, None, None, None, vec![], pool)
         .await
         .expect("Failed to create response");
 
@@ -271,7 +307,7 @@ async fn response_err(
 ) -> Result<models::HttpResponse, String> {
     let mut response = response.clone();
     response.error = Some(error.clone());
-    response = models::update_response_if_id(response, pool)
+    response = models::update_response_if_id(&response, pool)
         .await
         .expect("Failed to update response");
     emit_side_effect(app_handle, "updated_model", &response);
@@ -662,9 +698,9 @@ fn create_window(handle: &AppHandle<Wry>, url: Option<&str>) -> Window<Wry> {
     let submenu = Submenu::new("Test Menu", test_menu);
 
     let window_num = handle.windows().len();
-    let window_id = format!("wnd_{}", window_num);
+    let window_id = format!("wnd_{}_{}", window_num, generate_id(None));
     let menu = default_menu.add_submenu(submenu);
-    let win = tauri::WindowBuilder::new(
+    let mut win_builder = tauri::WindowBuilder::new(
         handle,
         window_id,
         WindowUrl::App(url.unwrap_or_default().into()),
@@ -673,14 +709,25 @@ fn create_window(handle: &AppHandle<Wry>, url: Option<&str>) -> Window<Wry> {
     .fullscreen(false)
     .resizable(true)
     .inner_size(1100.0, 600.0)
-    .hidden_title(true)
+    .position(
+        // Randomly offset so windows don't stack exactly
+        100.0 + random::<f64>() * 30.0,
+        100.0 + random::<f64>() * 30.0,
+    )
     .title(match is_dev() {
         true => "Yaak Dev",
         false => "Yaak",
-    })
-    .title_bar_style(TitleBarStyle::Overlay)
-    .build()
-    .expect("failed to build window");
+    });
+
+    // Add macOS-only things
+    #[cfg(target_os = "macos")]
+    {
+        win_builder = win_builder
+            .hidden_title(true)
+            .title_bar_style(TitleBarStyle::Overlay);
+    }
+
+    let win = win_builder.build().expect("failed to build window");
 
     let win2 = win.clone();
     let handle2 = handle.clone();
@@ -712,7 +759,6 @@ fn create_window(handle: &AppHandle<Wry>, url: Option<&str>) -> Window<Wry> {
     let win3 = win.clone();
     win.on_window_event(move |e| {
         let apply_offset = || {
-            #[cfg(target_os = "macos")]
             win3.position_traffic_lights();
         };
 
@@ -727,9 +773,7 @@ fn create_window(handle: &AppHandle<Wry>, url: Option<&str>) -> Window<Wry> {
         }
     });
 
-    #[cfg(target_os = "macos")]
     win.position_traffic_lights();
-
     win
 }
 

src-tauri/src/models.rs

@@ -1,4 +1,5 @@
 use std::collections::HashMap;
+use std::fs;
 
 use rand::distributions::{Alphanumeric, DistString};
 use serde::{Deserialize, Serialize};
@@ -63,10 +64,12 @@ pub struct HttpResponse {
     pub updated_at: NaiveDateTime,
     pub error: Option<String>,
     pub url: String,
+    pub content_length: Option<i64>,
     pub elapsed: i64,
     pub status: i64,
     pub status_reason: Option<String>,
-    pub body: String,
+    pub body: Option<Vec<u8>>,
+    pub body_path: Option<String>,
     pub headers: Json<Vec<HttpResponseHeader>>,
 }
 
@@ -151,9 +154,7 @@ pub async fn get_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace, s
 }
 
 pub async fn delete_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace, sqlx::Error> {
-    let workspace = get_workspace(id, pool)
-        .await
-        .expect("Failed to get request to delete");
+    let workspace = get_workspace(id, pool).await?;
     let _ = sqlx::query!(
         r#"
             DELETE FROM workspaces
@@ -163,6 +164,11 @@ pub async fn delete_workspace(id: &str, pool: &Pool<Sqlite>) -> Result<Workspace
     )
     .execute(pool)
     .await;
+
+    for r in find_responses_by_workspace_id(id, pool).await? {
+        delete_response(&r.id, pool).await?;
+    }
+
     Ok(workspace)
 }
 
@@ -171,7 +177,7 @@ pub async fn create_workspace(
     description: &str,
     pool: &Pool<Sqlite>,
 ) -> Result<Workspace, sqlx::Error> {
-    let id = generate_id("wk");
+    let id = generate_id(Some("wk"));
     sqlx::query!(
         r#"
             INSERT INTO workspaces (id, name, description)
@@ -182,16 +188,13 @@ pub async fn create_workspace(
         description,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new workspace");
+    .await?;
 
     get_workspace(&id, pool).await
 }
 
 pub async fn duplicate_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, sqlx::Error> {
-    let existing = get_request(id, pool)
-        .await
-        .expect("Failed to get request to duplicate");
+    let existing = get_request(id, pool).await?;
 
     // TODO: Figure out how to make this better
     let b2;
@@ -238,7 +241,7 @@ pub async fn upsert_request(
     let id = match id {
         Some(v) => v,
         None => {
-            generated_id = generate_id("rq");
+            generated_id = generate_id(Some("rq"));
             generated_id.as_str()
         }
     };
@@ -286,8 +289,7 @@ pub async fn upsert_request(
         sort_priority,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new request");
+    .await?;
     get_request(id, pool).await
 }
 
@@ -351,9 +353,7 @@ pub async fn get_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, s
 }
 
 pub async fn delete_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest, sqlx::Error> {
-    let req = get_request(id, pool)
-        .await
-        .expect("Failed to get request to delete");
+    let req = get_request(id, pool).await?;
     let _ = sqlx::query!(
         r#"
             DELETE FROM http_requests
@@ -364,6 +364,8 @@ pub async fn delete_request(id: &str, pool: &Pool<Sqlite>) -> Result<HttpRequest
     .execute(pool)
     .await;
 
+    delete_all_responses(id, pool).await?;
+
     Ok(req)
 }
 
@@ -373,14 +375,14 @@ pub async fn create_response(
     url: &str,
     status: i64,
     status_reason: Option<&str>,
-    body: &str,
+    content_length: Option<i64>,
+    body: Option<Vec<u8>>,
+    body_path: Option<&str>,
     headers: Vec<HttpResponseHeader>,
     pool: &Pool<Sqlite>,
 ) -> Result<HttpResponse, sqlx::Error> {
-    let req = get_request(request_id, pool)
-        .await
-        .expect("Failed to get request");
-    let id = generate_id("rp");
+    let req = get_request(request_id, pool).await?;
+    let id = generate_id(Some("rp"));
     let headers_json = Json(headers);
     sqlx::query!(
         r#"
@@ -392,10 +394,12 @@ pub async fn create_response(
                 url,
                 status,
                 status_reason,
+                content_length,
                 body,
+                body_path,
                 headers
             )
-            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
         "#,
         id,
         request_id,
@@ -404,22 +408,23 @@ pub async fn create_response(
         url,
         status,
         status_reason,
+        content_length,
         body,
+        body_path,
         headers_json,
     )
     .execute(pool)
-    .await
-    .expect("Failed to insert new response");
+    .await?;
 
     get_response(&id, pool).await
 }
 
 pub async fn update_response_if_id(
-    response: HttpResponse,
+    response: &HttpResponse,
     pool: &Pool<Sqlite>,
 ) -> Result<HttpResponse, sqlx::Error> {
     if response.id == "" {
-        return Ok(response);
+        return Ok(response.clone());
     }
     return update_response(response, pool).await;
 }
@@ -438,42 +443,53 @@ pub async fn update_workspace(
         workspace.id,
     )
     .execute(pool)
-    .await
-    .expect("Failed to update workspace");
+    .await?;
+
     get_workspace(&workspace.id, pool).await
 }
 
 pub async fn update_response(
-    response: HttpResponse,
+    response: &HttpResponse,
     pool: &Pool<Sqlite>,
 ) -> Result<HttpResponse, sqlx::Error> {
-    let headers_json = Json(response.headers);
+    let headers_json = Json(&response.headers);
     sqlx::query!(
         r#"
-            UPDATE http_responses SET (elapsed, url, status, status_reason, body, error, headers, updated_at) =
-            (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;
+            UPDATE http_responses SET (
+                elapsed,
+                url,
+                status,
+                status_reason,
+                content_length,
+                body,
+                body_path,
+                error,
+                headers,
+                updated_at
+            ) = (?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;
         "#,
         response.elapsed,
         response.url,
         response.status,
         response.status_reason,
+        response.content_length,
         response.body,
+        response.body_path,
         response.error,
         headers_json,
         response.id,
     )
     .execute(pool)
-    .await
-    .expect("Failed to update response");
+    .await?;
     get_response(&response.id, pool).await
 }
 
 pub async fn get_response(id: &str, pool: &Pool<Sqlite>) -> Result<HttpResponse, sqlx::Error> {
-    sqlx::query_as_unchecked!(
+    sqlx::query_as!(
         HttpResponse,
         r#"
-            SELECT id, model, workspace_id, request_id, updated_at, created_at,
-                status, status_reason, body, elapsed, url, error,
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
                 headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
             FROM http_responses
             WHERE id = ?
@@ -491,12 +507,12 @@ pub async fn find_responses(
     sqlx::query_as!(
         HttpResponse,
         r#"
-            SELECT id, model, workspace_id, request_id, updated_at,
-                created_at, status, status_reason, body, elapsed, url, error,
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
                 headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
             FROM http_responses
             WHERE request_id = ?
-            ORDER BY created_at ASC
+            ORDER BY created_at DESC
         "#,
         request_id,
     )
@@ -504,10 +520,35 @@ pub async fn find_responses(
     .await
 }
 
+pub async fn find_responses_by_workspace_id(
+    workspace_id: &str,
+    pool: &Pool<Sqlite>,
+) -> Result<Vec<HttpResponse>, sqlx::Error> {
+    sqlx::query_as!(
+        HttpResponse,
+        r#"
+            SELECT id, model, workspace_id, request_id, updated_at, created_at, url,
+                status, status_reason, content_length, body, body_path, elapsed, error,
+                headers AS "headers!: sqlx::types::Json<Vec<HttpResponseHeader>>"
+            FROM http_responses
+            WHERE workspace_id = ?
+            ORDER BY created_at DESC
+        "#,
+        workspace_id,
+    )
+    .fetch_all(pool)
+    .await
+}
+
 pub async fn delete_response(id: &str, pool: &Pool<Sqlite>) -> Result<HttpResponse, sqlx::Error> {
-    let resp = get_response(id, pool)
-        .await
-        .expect("Failed to get response to delete");
+    let resp = get_response(id, pool).await?;
+
+    // Delete the body file if it exists
+    if let Some(p) = resp.body_path.clone() {
+        if let Err(e) = fs::remove_file(p) {
+            println!("Failed to delete body file: {}", e);
+        };
+    }
 
     let _ = sqlx::query!(
         r#"
@@ -526,22 +567,16 @@ pub async fn delete_all_responses(
     request_id: &str,
     pool: &Pool<Sqlite>,
 ) -> Result<(), sqlx::Error> {
-    let _ = sqlx::query!(
-        r#"
-            DELETE FROM http_responses
-            WHERE request_id = ?
-        "#,
-        request_id,
-    )
-    .execute(pool)
-    .await;
-
+    for r in find_responses(request_id, pool).await? {
+        delete_response(&r.id, pool).await?;
+    }
     Ok(())
 }
 
-pub fn generate_id(prefix: &str) -> String {
-    format!(
-        "{prefix}_{}",
-        Alphanumeric.sample_string(&mut rand::thread_rng(), 10)
-    )
+pub fn generate_id(prefix: Option<&str>) -> String {
+    let id = Alphanumeric.sample_string(&mut rand::thread_rng(), 10);
+    return match prefix {
+        None => id,
+        Some(p) => format!("{p}_{id}"),
+    };
 }

src-tauri/src/runtime.rs

@@ -1,9 +1,16 @@
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::pin::Pin;
 use std::rc::Rc;
 
 use deno_ast::{MediaType, ParseParams, SourceTextInfo};
+use deno_core::anyhow::{anyhow, bail, Error};
 use deno_core::error::AnyError;
 use deno_core::futures::FutureExt;
-use deno_core::{op, Extension, JsRuntime, ModuleCode, ModuleSource, ModuleType, RuntimeOptions};
+use deno_core::{
+    resolve_import, Extension, JsRuntime, ModuleLoader, ModuleSource, ModuleSourceFuture,
+    ModuleSpecifier, ModuleType, ResolutionKind, RuntimeOptions, SourceMapGetter,
+};
 use futures::executor;
 
 pub fn run_plugin_sync(file_path: &str) -> Result<(), AnyError> {
@@ -11,19 +18,24 @@ pub fn run_plugin_sync(file_path: &str) -> Result<(), AnyError> {
 }
 
 pub async fn run_plugin(file_path: &str) -> Result<(), AnyError> {
-    let extension = Extension::builder("runtime")
-        .ops(vec![op_hello::decl()])
-        .build();
+    let extension = Extension {
+        name: "runtime",
+        // ops: std::borrow::Cow::Borrowed(&[op_hello::DECL]),
+        ..Default::default()
+    };
+    let source_map_store = SourceMapStore(Rc::new(RefCell::new(HashMap::new())));
 
     // Initialize a runtime instance
     let mut runtime = JsRuntime::new(RuntimeOptions {
-        module_loader: Some(Rc::new(TsModuleLoader)),
+        module_loader: Some(Rc::new(TypescriptModuleLoader {
+            source_maps: source_map_store.clone(),
+        })),
         extensions: vec![extension],
         ..Default::default()
     });
 
     runtime
-        .execute_script("<runtime>", include_str!("runtime.js"))
+        .execute_script_static("<runtime>", include_str!("runtime.js"))
         .expect("Failed to execute runtime.js");
 
     let current_dir = &std::env::current_dir().expect("Unable to get CWD");
@@ -41,41 +53,50 @@ pub async fn run_plugin(file_path: &str) -> Result<(), AnyError> {
     result.await?
 }
 
-#[op]
-async fn op_hello(name: String) -> Result<String, AnyError> {
-    let contents = format!("Hello {} from Rust!", name);
-    println!("{}", contents);
-    Ok(contents)
+#[derive(Clone)]
+struct SourceMapStore(Rc<RefCell<HashMap<String, Vec<u8>>>>);
+
+impl SourceMapGetter for SourceMapStore {
+    fn get_source_map(&self, specifier: &str) -> Option<Vec<u8>> {
+        self.0.borrow().get(specifier).cloned()
+    }
+
+    fn get_source_line(&self, _file_name: &str, _line_number: usize) -> Option<String> {
+        None
+    }
 }
 
-struct TsModuleLoader;
+struct TypescriptModuleLoader {
+    source_maps: SourceMapStore,
+}
 
-impl deno_core::ModuleLoader for TsModuleLoader {
+impl ModuleLoader for TypescriptModuleLoader {
     fn resolve(
         &self,
         specifier: &str,
         referrer: &str,
-        _kind: deno_core::ResolutionKind,
-    ) -> Result<deno_core::ModuleSpecifier, AnyError> {
-        deno_core::resolve_import(specifier, referrer).map_err(|e| e.into())
+        _kind: ResolutionKind,
+    ) -> Result<ModuleSpecifier, Error> {
+        Ok(resolve_import(specifier, referrer)?)
     }
 
     fn load(
         &self,
-        module_specifier: &deno_core::ModuleSpecifier,
-        _maybe_referrer: Option<deno_core::ModuleSpecifier>,
+        module_specifier: &ModuleSpecifier,
+        _maybe_referrer: Option<&ModuleSpecifier>,
         _is_dyn_import: bool,
-    ) -> std::pin::Pin<Box<deno_core::ModuleSourceFuture>> {
-        let module_specifier = module_specifier.clone();
-        async move {
+    ) -> Pin<Box<ModuleSourceFuture>> {
+        let source_maps = self.source_maps.clone();
+        fn load(
+            source_maps: SourceMapStore,
+            module_specifier: &ModuleSpecifier,
+        ) -> Result<ModuleSource, AnyError> {
             let path = module_specifier
                 .to_file_path()
-                .expect("Failed to convert to file path");
+                .map_err(|_| anyhow!("Only file:// URLs are supported."))?;
 
-            // Determine what the MediaType is (this is done based on the file
-            // extension) and whether transpiling is required.
             let media_type = MediaType::from_path(&path);
-            let (module_type, should_transpile) = match media_type {
+            let (module_type, should_transpile) = match MediaType::from_path(&path) {
                 MediaType::JavaScript | MediaType::Mjs | MediaType::Cjs => {
                     (ModuleType::JavaScript, false)
                 }
@@ -88,10 +109,9 @@ impl deno_core::ModuleLoader for TsModuleLoader {
                 | MediaType::Dcts
                 | MediaType::Tsx => (ModuleType::JavaScript, true),
                 MediaType::Json => (ModuleType::Json, false),
-                _ => panic!("Unknown extension {:?}", path.extension()),
+                _ => bail!("Unknown extension {:?}", path.extension()),
             };
 
-            // Read the file, transpile if necessary.
             let code = std::fs::read_to_string(&path)?;
             let code = if should_transpile {
                 let parsed = deno_ast::parse_module(ParseParams {
@@ -102,20 +122,28 @@ impl deno_core::ModuleLoader for TsModuleLoader {
                     scope_analysis: false,
                     maybe_syntax: None,
                 })?;
-                parsed.transpile(&Default::default())?.text
+                let res = parsed.transpile(&deno_ast::EmitOptions {
+                    inline_source_map: false,
+                    source_map: true,
+                    inline_sources: true,
+                    ..Default::default()
+                })?;
+                let source_map = res.source_map.unwrap();
+                source_maps
+                    .0
+                    .borrow_mut()
+                    .insert(module_specifier.to_string(), source_map.into_bytes());
+                res.text
             } else {
                 code
             };
-
-            // Load and return module.
-            let module = ModuleSource {
-                code: ModuleCode::from(code),
+            Ok(ModuleSource::new(
                 module_type,
-                module_url_specified: module_specifier.to_string(),
-                module_url_found: module_specifier.to_string(),
-            };
-            Ok(module)
+                code.into(),
+                module_specifier,
+            ))
         }
-        .boxed_local()
+
+        futures::future::ready(load(source_maps, module_specifier)).boxed_local()
     }
 }

src-tauri/src/window_ext.rs

@@ -1,6 +1,6 @@
 use tauri::{Runtime, Window};
 
-const TRAFFIC_LIGHT_OFFSET_X: f64 = 10.0;
+const TRAFFIC_LIGHT_OFFSET_X: f64 = 13.0;
 const TRAFFIC_LIGHT_OFFSET_Y: f64 = 18.0;
 
 pub trait WindowExt {
@@ -8,6 +8,11 @@ pub trait WindowExt {
 }
 
 impl<R: Runtime> WindowExt for Window<R> {
+    #[cfg(not(target_os = "macos"))]
+    fn position_traffic_lights(&self) {
+        // No-op
+    }
+
     #[cfg(target_os = "macos")]
     fn position_traffic_lights(&self) {
         use cocoa::appkit::{NSView, NSWindow, NSWindowButton};

src-tauri/tauri.conf.json

@@ -8,15 +8,24 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2023.0.15"
+    "version": "2023.0.19"
   },
   "tauri": {
     "windows": [],
     "allowlist": {
       "all": false,
+      "os": {
+        "all": true
+      },
+      "protocol": {
+        "assetScope": ["$APPDATA/responses/*"],
+        "asset":  true
+      },
       "fs": {
+        "readFile": true,
         "scope": [
-          "$RESOURCE/*"
+          "$RESOURCE/*",
+          "$APPDATA/responses/*"
         ]
       },
       "shell": {
@@ -40,13 +49,20 @@
         "icons/icon.ico"
       ],
       "identifier": "co.schier.yaak",
-      "longDescription": "",
+      "longDescription": "The best cross-platform visual API client",
       "resources": [
         "plugins/*",
         "migrations/*"
       ],
-      "shortDescription": "",
-      "targets": "all",
+      "shortDescription": "The best API client",
+      "targets": [
+        "deb",
+        "appimage",
+        "nsis",
+        "app",
+        "dmg",
+        "updater"
+      ],
       "deb": {
         "depends": []
       },
@@ -60,7 +76,8 @@
         "timestampUrl": ""
       }
     },
-    "security": {},
+    "security": {
+    },
     "systemTray": {
       "iconAsTemplate": true,
       "iconPath": "icons/icon.png"

src-web/components/GlobalHooks.tsx

@@ -35,7 +35,8 @@ export function GlobalHooks() {
     }
 
     if (!shouldIgnoreModel(payload)) {
-      queryClient.setQueryData<Model[]>(queryKey, (values) => [...(values ?? []), payload]);
+      // Order newest first
+      queryClient.setQueryData<Model[]>(queryKey, (values) => [payload, ...(values ?? [])]);
     }
   });
 

src-web/components/GraphQLEditor.tsx

@@ -6,6 +6,7 @@ import type { HttpRequest } from '../lib/models';
 import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor';
 import { Editor, formatGraphQL } from './core/Editor';
+import { FormattedError } from './core/FormattedError';
 import { Separator } from './core/Separator';
 import { useDialog } from './DialogContext';
 
@@ -24,8 +25,7 @@ interface GraphQLBody {
 
 export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEditorProps }: Props) {
   const editorViewRef = useRef<EditorView>(null);
-  const introspection = useIntrospectGraphQL(baseRequest);
-
+  const { schema, isLoading, error, refetch } = useIntrospectGraphQL(baseRequest);
   const { query, variables } = useMemo<GraphQLBody>(() => {
     if (defaultValue === undefined) {
       return { query: '', variables: {} };
@@ -65,8 +65,8 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
   // Refetch the schema when the URL changes
   useEffect(() => {
     if (editorViewRef.current === null) return;
-    updateSchema(editorViewRef.current, introspection.data);
-  }, [introspection.data]);
+    updateSchema(editorViewRef.current, schema);
+  }, [schema]);
 
   const dialog = useDialog();
 
@@ -81,22 +81,38 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         placeholder="..."
         ref={editorViewRef}
         actions={
-          (introspection.error || introspection.isLoading) && (
+          (error || isLoading) && (
             <Button
               size="xs"
-              color={introspection.error ? 'danger' : 'gray'}
-              isLoading={introspection.isLoading}
+              color={error ? 'danger' : 'gray'}
+              isLoading={isLoading}
               onClick={() => {
                 dialog.show({
                   title: 'Introspection Failed',
                   size: 'sm',
+                  id: 'introspection-failed',
                   render: () => (
-                    <div className="whitespace-pre-wrap">{introspection.error?.message}</div>
+                    <div className="whitespace-pre-wrap">
+                      <FormattedError>{error ?? 'unknown'}</FormattedError>
+                      <div className="w-full mt-3">
+                        <Button
+                          onClick={() => {
+                            dialog.hide('introspection-failed');
+                            refetch();
+                          }}
+                          className="ml-auto"
+                          color="secondary"
+                          size="sm"
+                        >
+                          Try Again
+                        </Button>
+                      </div>
+                    </div>
                   ),
                 });
               }}
             >
-              {introspection.error ? 'Introspection Failed' : 'Introspecting'}
+              {error ? 'Introspection Failed' : 'Introspecting'}
             </Button>
           )
         }

src-web/components/ImageView.tsx

@@ -1,9 +0,0 @@
-interface Props {
-  data: string;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function ImageView({ data }: Props) {
-  // const dataUri = `data:image/png;base64,${window.btoa(data)}`;
-  return <div>Image preview not supported until binary response support is added</div>;
-}

src-web/components/Overlay.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-import type { ReactNode } from 'react';
 import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
 import { Portal } from './Portal';
 
 interface Props {
@@ -33,7 +33,7 @@ export function Overlay({ zIndex = 30, open, onClose, portalName, children }: Pr
             <div
               aria-hidden
               onClick={onClose}
-              className="absolute inset-0 bg-gray-600/60 dark:bg-black/50"
+              className="absolute inset-0 bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm"
             />
             {/* Add region to still be able to drag the window */}
             <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />

src-web/components/ResponsePane.tsx

@@ -5,26 +5,30 @@ import { createGlobalState } from 'react-use';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useDeleteResponse } from '../hooks/useDeleteResponse';
 import { useDeleteResponses } from '../hooks/useDeleteResponses';
+import { useLatestResponse } from '../hooks/useLatestResponse';
+import { useResponseContentType } from '../hooks/useResponseContentType';
 import { useResponses } from '../hooks/useResponses';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
-import { tryFormatJson } from '../lib/formatters';
 import type { HttpResponse } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
 import { pluralize } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
 import { Dropdown } from './core/Dropdown';
-import { Editor } from './core/Editor';
+import { DurationTag } from './core/DurationTag';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
-import { Webview } from './core/Webview';
 import { EmptyStateText } from './EmptyStateText';
-import { ImageView } from './ImageView';
 import { ResponseHeaders } from './ResponseHeaders';
+import { CsvViewer } from './responseViewers/CsvViewer';
+import { ImageViewer } from './responseViewers/ImageViewer';
+import { TextViewer } from './responseViewers/TextViewer';
+import { WebPageViewer } from './responseViewers/WebPageViewer';
 
 interface Props {
   style?: CSSProperties;
@@ -36,10 +40,11 @@ const useActiveTab = createGlobalState<string>('body');
 export const ResponsePane = memo(function ResponsePane({ style, className }: Props) {
   const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null);
   const activeRequestId = useActiveRequestId();
+  const latestResponse = useLatestResponse(activeRequestId);
   const responses = useResponses(activeRequestId);
   const activeResponse: HttpResponse | null = pinnedResponseId
     ? responses.find((r) => r.id === pinnedResponseId) ?? null
-    : responses[responses.length - 1] ?? null;
+    : latestResponse ?? null;
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
   const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
   const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
@@ -48,12 +53,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
   // Unset pinned response when a new one comes in
   useEffect(() => setPinnedResponseId(null), [responses.length]);
 
-  const contentType = useMemo(
-    () =>
-      activeResponse?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ??
-      'text/plain',
-    [activeResponse],
-  );
+  const contentType = useResponseContentType(activeResponse);
 
   const tabs: TabItem[] = useMemo(
     () => [
@@ -84,9 +84,6 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
     [activeResponse?.headers, setViewMode, viewMode],
   );
 
-  // Don't render until we know the view mode
-  if (viewMode === undefined) return null;
-
   return (
     <div
       style={style}
@@ -116,13 +113,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     {activeResponse.elapsed > 0 && (
                       <>
                         <span>&bull;</span>
-                        <span>{activeResponse.elapsed}ms</span>
+                        <DurationTag millis={activeResponse.elapsed} />
                       </>
                     )}
-                    {activeResponse.body.length > 0 && (
+                    {!!activeResponse.contentLength && (
                       <>
                         <span>&bull;</span>
-                        <span>{(activeResponse.body.length / 1000).toFixed(1)} KB</span>
+                        <SizeTag contentLength={activeResponse.contentLength} />
                       </>
                     )}
                   </HStack>
@@ -144,7 +141,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                       disabled: responses.length === 0,
                     },
                     { type: 'separator', label: 'History' },
-                    ...responses.slice(0, 10).map((r) => ({
+                    ...responses.slice(0, 20).map((r) => ({
                       key: r.id,
                       label: (
                         <HStack space={2}>
@@ -152,7 +149,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                           <span>&bull;</span> <span>{r.elapsed}ms</span>
                         </HStack>
                       ),
-                      leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
+                      leftSlot:
+                        activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
                       onSelect: () => setPinnedResponseId(r.id),
                     })),
                   ]}
@@ -169,49 +167,31 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
             )}
           </HStack>
 
-          {
-            <Tabs
-              value={activeTab}
-              onChangeValue={setActiveTab}
-              label="Response"
-              tabs={tabs}
-              className="ml-3 mr-1"
-              tabListClassName="mt-1.5"
-            >
-              <TabContent value="headers">
-                <ResponseHeaders headers={activeResponse?.headers ?? []} />
-              </TabContent>
-              <TabContent value="body">
-                {!activeResponse.body ? (
-                  <EmptyStateText>Empty Body</EmptyStateText>
-                ) : viewMode === 'pretty' && contentType.includes('html') ? (
-                  <Webview
-                    body={activeResponse.body}
-                    contentType={contentType}
-                    url={activeResponse.url}
-                  />
-                ) : viewMode === 'pretty' && contentType.includes('json') ? (
-                  <Editor
-                    readOnly
-                    forceUpdateKey={`pretty::${activeResponse.updatedAt}`}
-                    className="bg-gray-50 dark:!bg-gray-100"
-                    defaultValue={tryFormatJson(activeResponse?.body)}
-                    contentType={contentType}
-                  />
-                ) : contentType.startsWith('image') ? (
-                  <ImageView data={activeResponse?.body} />
-                ) : activeResponse?.body ? (
-                  <Editor
-                    readOnly
-                    forceUpdateKey={activeResponse.updatedAt}
-                    className="bg-gray-50 dark:!bg-gray-100"
-                    defaultValue={activeResponse?.body}
-                    contentType={contentType}
-                  />
-                ) : null}
-              </TabContent>
-            </Tabs>
-          }
+          <Tabs
+            value={activeTab}
+            onChangeValue={setActiveTab}
+            label="Response"
+            tabs={tabs}
+            className="ml-3 mr-1"
+            tabListClassName="mt-1.5"
+          >
+            <TabContent value="headers">
+              <ResponseHeaders headers={activeResponse?.headers ?? []} />
+            </TabContent>
+            <TabContent value="body">
+              {!activeResponse.contentLength ? (
+                <EmptyStateText>Empty Body</EmptyStateText>
+              ) : viewMode === 'pretty' && contentType?.includes('html') ? (
+                <WebPageViewer response={activeResponse} />
+              ) : contentType?.startsWith('image') ? (
+                <ImageViewer className="pb-2" response={activeResponse} />
+              ) : contentType?.match(/csv|tab-separated/) ? (
+                <CsvViewer className="pb-2" response={activeResponse} />
+              ) : (
+                <TextViewer response={activeResponse} pretty={viewMode === 'pretty'} />
+              )}
+            </TabContent>
+          </Tabs>
         </>
       )}
     </div>

src-web/components/RouteError.tsx

@@ -1,5 +1,7 @@
 import { useRouteError } from 'react-router-dom';
+import { useAppRoutes } from '../hooks/useAppRoutes';
 import { Button } from './core/Button';
+import { FormattedError } from './core/FormattedError';
 import { Heading } from './core/Heading';
 import { VStack } from './core/Stacks';
 
@@ -8,15 +10,19 @@ export default function RouteError() {
   const stringified = JSON.stringify(error);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const message = (error as any).message ?? stringified;
+  const routes = useAppRoutes();
   return (
     <div className="flex items-center justify-center h-full">
       <VStack space={5} className="max-w-[30rem] !h-auto">
         <Heading>Route Error 🔥</Heading>
-        <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal">
-          {message}
-        </pre>
+        <FormattedError>{message}</FormattedError>
         <VStack space={2}>
-          <Button to="/" color="primary">
+          <Button
+            color="primary"
+            onClick={() => {
+              routes.navigate('workspaces');
+            }}
+          >
             Go Home
           </Button>
           <Button color="secondary" onClick={() => window.location.reload()}>

src-web/components/Sidebar.tsx

@@ -67,8 +67,8 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
 
   const handleFocus = useCallback(() => {
     if (hasFocus) return;
-    focusActiveRequest(selectedIndex ?? 0);
-  }, [focusActiveRequest, hasFocus, selectedIndex]);
+    focusActiveRequest();
+  }, [focusActiveRequest, hasFocus]);
 
   const handleBlur = useCallback(() => setHasFocus(false), []);
 
@@ -242,6 +242,7 @@ type SidebarItemProps = {
   useProminentStyles?: boolean;
   selected?: boolean;
   onSelect: (requestId: string) => void;
+  draggable?: boolean;
 };
 
 const _SidebarItem = forwardRef(function SidebarItem(
@@ -300,15 +301,13 @@ const _SidebarItem = forwardRef(function SidebarItem(
   return (
     <li ref={ref} className={classnames(className, 'block group/item px-2 pb-0.5')}>
       <button
-        tabIndex={-1}
-        color="custom"
+        // tabIndex={-1} // Will prevent drag-n-drop
         onClick={handleSelect}
-        draggable={false} // Item should drag, not the link
+        disabled={editing}
         onDoubleClick={handleStartEditing}
         data-active={isActive}
         data-selected={selected}
         className={classnames(
-          // 'outline-none',
           'w-full flex items-center text-sm h-xs px-2 rounded-md transition-colors',
           editing && 'ring-1 focus-within:ring-focus',
           isActive && 'bg-highlight text-gray-800',
@@ -395,6 +394,7 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
   return (
     <SidebarItem
       ref={ref}
+      draggable
       className={classnames(isDragging && 'opacity-20')}
       requestName={requestName}
       requestId={requestId}

src-web/components/UrlBar.tsx

@@ -75,7 +75,6 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa
             className="w-8 mr-0.5"
             icon={loading ? 'update' : 'paperPlane'}
             spin={loading}
-            disabled={loading}
           />
         }
       />

src-web/components/Workspace.tsx

@@ -8,6 +8,7 @@ import type {
 } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowSize } from 'react-use';
+import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useSidebarWidth } from '../hooks/useSidebarWidth';
 import { useTauriEvent } from '../hooks/useTauriEvent';
@@ -169,11 +170,13 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 function HeaderSize({ className, ...props }: HeaderSizeProps) {
+  const platform = useOsInfo();
   return (
     <div
       className={classnames(
         className,
         'h-md pt-[1px] flex items-center w-full pr-3 pl-20 border-b',
+        platform?.osType === 'Darwin' && 'pl-20',
       )}
       {...props}
     />

src-web/components/WorkspaceActionsDropdown.tsx

@@ -137,11 +137,11 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
     ];
   }, [
     workspaces,
+    activeWorkspace?.name,
     deleteWorkspace.mutate,
-    activeWorkspaceId,
+    dialog,
     routes,
     prompt,
-    activeWorkspace?.name,
     updateWorkspace,
     createWorkspace,
   ]);

src-web/components/core/Dialog.tsx

@@ -55,7 +55,7 @@ export function Dialog({
               className,
               'relative bg-gray-50 pointer-events-auto',
               'max-h-[80vh] p-5 rounded-lg overflow-auto',
-              'dark:border border-gray-200 shadow-md shadow-black/10',
+              'dark:border border-highlight shadow shadow-black/10',
               size === 'sm' && 'w-[25rem]',
               size === 'md' && 'w-[45rem]',
               size === 'full' && 'w-[80vw]',

src-web/components/core/DurationTag.tsx

@@ -0,0 +1,25 @@
+interface Props {
+  millis: number;
+}
+
+export function DurationTag({ millis }: Props) {
+  let num;
+  let unit;
+
+  if (millis > 1000 * 60) {
+    num = millis / 1000 / 60;
+    unit = 'min';
+  } else if (millis > 1000) {
+    num = millis / 1000;
+    unit = 's';
+  } else {
+    num = millis;
+    unit = 'ms';
+  }
+
+  return (
+    <span title={`${millis} milliseconds`}>
+      {Math.round(num * 10) / 10} {unit}
+    </span>
+  );
+}

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

@@ -156,10 +156,10 @@
 
 /* NOTE: Extra selector required to override default styles */
 .cm-tooltip.cm-tooltip {
-    @apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-200 z-50 pointer-events-auto text-sm;
+    @apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-200 z-50 pointer-events-auto text-[0.75rem];
 
     &.cm-completionInfo-right {
-        @apply ml-1;
+        @apply ml-1 -mt-0.5 text-sm;
     }
 
     &.cm-completionInfo-right-narrow {

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

@@ -24,10 +24,10 @@ export interface EditorProps {
   type?: 'text' | 'password';
   className?: string;
   heightMode?: 'auto' | 'full';
-  contentType?: string;
+  contentType?: string | null;
   forceUpdateKey?: string;
   autoFocus?: boolean;
-  defaultValue?: string;
+  defaultValue?: string | null;
   placeholder?: string;
   tooltipContainer?: HTMLElement;
   useTemplating?: boolean;
@@ -233,7 +233,9 @@ function getExtensions({
     keymap.of(singleLine ? defaultKeymap.filter((k) => k.key !== 'Enter') : defaultKeymap),
     ...(singleLine ? [singleLineExt()] : []),
     ...(!singleLine ? [multiLineExtensions] : []),
-    ...(readOnly ? [EditorState.readOnly.of(true)] : []),
+    ...(readOnly
+      ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ tabindex: '-1' })]
+      : []),
     ...(singleLine
       ? [
           EditorView.domEventHandlers({

src-web/components/core/FormattedError.tsx

@@ -0,0 +1,11 @@
+interface Props {
+  children: string;
+}
+
+export function FormattedError({ children }: Props) {
+  return (
+    <pre className="text-sm select-auto cursor-text bg-gray-100 p-3 rounded whitespace-normal border border-red-500 border-dashed">
+      {children}
+    </pre>
+  );
+}

src-web/components/core/IconButton.tsx

@@ -32,7 +32,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
 ) {
   const [confirmed, setConfirmed] = useTimedBoolean();
   const handleClick = useCallback(
-    (e: MouseEvent<HTMLElement>) => {
+    (e: MouseEvent<HTMLButtonElement>) => {
       if (showConfirm) setConfirmed();
       onClick?.(e);
     },

src-web/components/core/SizeTag.tsx

@@ -0,0 +1,28 @@
+interface Props {
+  contentLength: number;
+}
+
+export function SizeTag({ contentLength }: Props) {
+  let num;
+  let unit;
+
+  if (contentLength > 1000 * 1000 * 1000) {
+    num = contentLength / 1000 / 1000 / 1000;
+    unit = 'GB';
+  } else if (contentLength > 1000 * 1000) {
+    num = contentLength / 1000 / 1000;
+    unit = 'MB';
+  } else if (contentLength > 1000) {
+    num = contentLength / 1000;
+    unit = 'KB';
+  } else {
+    num = contentLength;
+    unit = 'B';
+  }
+
+  return (
+    <span title={`${contentLength} bytes`}>
+      {Math.round(num * 10) / 10} {unit}
+    </span>
+  );
+}

src-web/components/responseViewers/CsvViewer.tsx

@@ -0,0 +1,39 @@
+import classnames from 'classnames';
+import Papa from 'papaparse';
+import { useMemo } from 'react';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+}
+
+export function CsvViewer({ response, className }: Props) {
+  const body = useResponseBodyText(response);
+
+  const parsed = useMemo(() => {
+    if (body === null) return null;
+    return Papa.parse<string[]>(body);
+  }, [body]);
+
+  if (parsed === null) return null;
+
+  return (
+    <div className="overflow-auto h-full">
+      <table className={classnames(className, 'text-sm')}>
+        <tbody>
+          {parsed.data.map((row, i) => (
+            <tr key={i} className={classnames('border-l border-t', i > 0 && 'border-b')}>
+              {row.map((col, j) => (
+                <td key={j} className="border-r px-1.5">
+                  {col}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src-web/components/responseViewers/ImageViewer.tsx

@@ -0,0 +1,23 @@
+import { convertFileSrc } from '@tauri-apps/api/tauri';
+import classnames from 'classnames';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+}
+
+export function ImageViewer({ response, className }: Props) {
+  if (response.bodyPath === null) {
+    return <div>Empty response body</div>;
+  }
+
+  const src = convertFileSrc(response.bodyPath);
+  return (
+    <img
+      src={src}
+      alt="Response preview"
+      className={classnames(className, 'max-w-full max-h-full')}
+    />
+  );
+}

src-web/components/responseViewers/TextViewer.tsx

@@ -0,0 +1,26 @@
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import { useResponseContentType } from '../../hooks/useResponseContentType';
+import { tryFormatJson } from '../../lib/formatters';
+import type { HttpResponse } from '../../lib/models';
+import { Editor } from '../core/Editor';
+
+interface Props {
+  response: HttpResponse;
+  pretty: boolean;
+}
+
+export function TextViewer({ response, pretty }: Props) {
+  const contentType = useResponseContentType(response);
+  const rawBody = useResponseBodyText(response) ?? '';
+  const body = pretty && contentType?.includes('json') ? tryFormatJson(rawBody) : rawBody;
+
+  return (
+    <Editor
+      readOnly
+      forceUpdateKey={body}
+      className="bg-gray-50 dark:!bg-gray-100"
+      defaultValue={body}
+      contentType={contentType}
+    />
+  );
+}

src-web/components/responseViewers/WebPageViewer.tsx

@@ -1,19 +1,21 @@
 import { useMemo } from 'react';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import type { HttpResponse } from '../../lib/models';
 
 interface Props {
-  body: string;
-  contentType: string;
-  url: string;
+  response: HttpResponse;
 }
 
-export function Webview({ body, url, contentType }: Props) {
+export function WebPageViewer({ response }: Props) {
+  const { url } = response;
+  const body = useResponseBodyText(response) ?? '';
+
   const contentForIframe: string | undefined = useMemo(() => {
-    if (!contentType.includes('html')) return;
     if (body.includes('<head>')) {
       return body.replace(/<head>/gi, `<head><base href="${url}"/>`);
     }
     return body;
-  }, [url, body, contentType]);
+  }, [url, body]);
 
   return (
     <div className="h-full pb-3">

src-web/hooks/useIntrospectGraphQL.ts

@@ -1,8 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import type { GraphQLSchema } from 'graphql';
+import type { IntrospectionQuery } from 'graphql';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocalStorage } from 'react-use';
 import { buildClientSchema, getIntrospectionQuery } from '../components/core/Editor';
 import { minPromiseMillis } from '../lib/minPromiseMillis';
 import type { HttpRequest } from '../lib/models';
+import { getResponseBodyText } from '../lib/responseBody';
 import { sendEphemeralRequest } from '../lib/sendEphemeralRequest';
 import { useDebouncedValue } from './useDebouncedValue';
 
@@ -12,18 +14,24 @@ const introspectionRequestBody = JSON.stringify({
 });
 
 export function useIntrospectGraphQL(baseRequest: HttpRequest) {
-  // Debounce the URL because it can change rapidly, and we don't
-  // want to send so many requests.
+  // Debounce the request because it can change rapidly and we don't
+  // want to send so too many requests.
   const request = useDebouncedValue(baseRequest);
+  const [refetchKey, setRefetchKey] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>();
+  const [introspection, setIntrospection] = useLocalStorage<IntrospectionQuery>(
+    `introspection:${baseRequest.id}`,
+  );
 
-  return useQuery<GraphQLSchema, Error>({
-    queryKey: ['introspectGraphQL', { url: request.url, method: request.method }],
-    refetchInterval: 1000 * 60, // Refetch every minute
-    queryFn: async () => {
-      const response = await minPromiseMillis(
-        sendEphemeralRequest({ ...baseRequest, body: introspectionRequestBody }),
-        700,
-      );
+  const introspectionInterval = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const fetchIntrospection = async () => {
+      setIsLoading(true);
+      setError(undefined);
+      const args = { ...baseRequest, body: introspectionRequestBody };
+      const response = await minPromiseMillis(sendEphemeralRequest(args), 700);
 
       if (response.error) {
         return Promise.reject(new Error(response.error));
@@ -35,8 +43,37 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
         );
       }
 
-      const { data } = JSON.parse(response.body);
-      return buildClientSchema(data);
-    },
-  });
+      const body = await getResponseBodyText(response);
+      if (body === null) {
+        return Promise.reject(new Error('Empty body returned in response'));
+      }
+
+      const { data } = JSON.parse(body);
+      setIntrospection(data);
+    };
+
+    const runIntrospection = () => {
+      fetchIntrospection()
+        .catch((e) => setError(e.message))
+        .finally(() => setIsLoading(false));
+    };
+
+    // Do it again on an interval
+    clearInterval(introspectionInterval.current);
+    introspectionInterval.current = setInterval(runIntrospection, 1000 * 60);
+    runIntrospection(); // Run immediately
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [request.id, request.url, request.method, refetchKey]);
+
+  const refetch = useCallback(() => {
+    setRefetchKey((k) => k + 1);
+  }, []);
+
+  const schema = useMemo(
+    () => (introspection ? buildClientSchema(introspection) : undefined),
+    [introspection],
+  );
+
+  return { schema, isLoading, error, refetch };
 }

src-web/hooks/useLatestResponse.ts

@@ -3,5 +3,5 @@ import { useResponses } from './useResponses';
 
 export function useLatestResponse(requestId: string | null): HttpResponse | null {
   const responses = useResponses(requestId);
-  return responses[responses.length - 1] ?? null;
+  return responses[0] ?? null;
 }

src-web/hooks/useOsInfo.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import type { OsType } from '@tauri-apps/api/os';
+import { type } from '@tauri-apps/api/os';
+
+export function useOsInfo() {
+  return useQuery<{ osType: OsType }>({
+    queryKey: ['platform'],
+    queryFn: async () => {
+      return { osType: await type() };
+    },
+  }).data;
+}

src-web/hooks/useResponseBodyBlob.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import type { HttpResponse } from '../lib/models';
+import { getResponseBodyBlob } from '../lib/responseBody';
+
+export function useResponseBodyBlob(response: HttpResponse) {
+  return useQuery<Uint8Array | null>({
+    enabled: response != null,
+    queryKey: ['response-body-binary', response?.updatedAt],
+    initialData: null,
+    queryFn: () => getResponseBodyBlob(response),
+  }).data;
+}

src-web/hooks/useResponseBodyText.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import type { HttpResponse } from '../lib/models';
+import { getResponseBodyText } from '../lib/responseBody';
+
+export function useResponseBodyText(response: HttpResponse) {
+  return useQuery<string | null>({
+    queryKey: ['response-body-text', response?.updatedAt],
+    initialData: null,
+    queryFn: () => getResponseBodyText(response),
+  }).data;
+}

src-web/hooks/useResponseContentType.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import type { HttpResponse } from '../lib/models';
+
+export function useResponseContentType(response: HttpResponse | null): string | null {
+  return useMemo(
+    () => response?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? null,
+    [response],
+  );
+}

src-web/hooks/useResponseViewMode.ts

@@ -1,11 +1,8 @@
 import { useLocalStorage } from 'react-use';
 
-export function useResponseViewMode(
-  requestId?: string,
-): [string | undefined, (m: 'pretty' | 'raw') => void] {
-  const [value, setValue] = useLocalStorage<'pretty' | 'raw'>(
-    `response_view_mode::${requestId}`,
-    'pretty',
-  );
-  return [value, setValue];
+const DEFAULT_VIEW_MODE = 'pretty';
+
+export function useResponseViewMode(requestId?: string): [string, (m: 'pretty' | 'raw') => void] {
+  const [value, setValue] = useLocalStorage<'pretty' | 'raw'>(`response_view_mode::${requestId}`);
+  return [value ?? DEFAULT_VIEW_MODE, setValue];
 }

src-web/lib/models.ts

@@ -64,7 +64,9 @@ export interface HttpResponse extends BaseModel {
   readonly workspaceId: string;
   readonly model: 'http_response';
   readonly requestId: string;
-  readonly body: string;
+  readonly body: number[] | null;
+  readonly bodyPath: string | null;
+  readonly contentLength: number | null;
   readonly error: string;
   readonly status: number;
   readonly elapsed: number;

src-web/lib/responseBody.ts

@@ -0,0 +1,23 @@
+import { readBinaryFile, readTextFile } from '@tauri-apps/api/fs';
+import type { HttpResponse } from './models';
+
+export async function getResponseBodyText(response: HttpResponse): Promise<string | null> {
+  if (response.body) {
+    const uint8Array = Uint8Array.from(response.body);
+    return new TextDecoder().decode(uint8Array);
+  }
+  if (response.bodyPath) {
+    return await readTextFile(response.bodyPath);
+  }
+  return null;
+}
+
+export async function getResponseBodyBlob(response: HttpResponse): Promise<Uint8Array | null> {
+  if (response.body) {
+    return Uint8Array.from(response.body);
+  }
+  if (response.bodyPath) {
+    return readBinaryFile(response.bodyPath);
+  }
+  return null;
+}

src-web/lib/sendEphemeralRequest.ts

@@ -1,7 +1,7 @@
 import { invoke } from '@tauri-apps/api';
 import type { HttpRequest, HttpResponse } from './models';
 
-export function sendEphemeralRequest(request: HttpRequest): Promise<HttpResponse> {
+export async function sendEphemeralRequest(request: HttpRequest): Promise<HttpResponse> {
   // Remove some things that we don't want to associate
   const newRequest = { ...request, id: '', requestId: '', workspaceId: '' };
   return invoke('send_ephemeral_request', { request: newRequest });

tailwind.config.cjs

@@ -29,7 +29,21 @@ module.exports = {
     },
     fontFamily: {
       "mono": ["JetBrains Mono", "Menlo", "monospace"],
-      "sans": ["Inter", "sans-serif"]
+      "sans": [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Oxygen-Sans",
+        "Ubuntu",
+        "Cantarell",
+        "Helvetica Neue",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+      ],
     },
     fontSize: {
       '3xs': "0.6rem",