Track GRPC

.github/workflows/artifacts.yml

@@ -7,15 +7,16 @@ permissions: write-all
 
 jobs:
   build-artifacts:
+    name: Build
     strategy:
       fail-fast: false
       matrix:
         include:
-          - os: macos-12
+          - os: macos-latest
             target: aarch64-apple-darwin
           - os: macos-latest
             target: x86_64-apple-darwin
-          - os: windows-2022
+          - os: windows-latest
             target: x86_64-pc-windows-msvc
           - os: ubuntu-20.04
             target: x86_64-unknown-linux-gnu
@@ -37,7 +38,7 @@ jobs:
           key: ${{ runner.os }}-cargo-${{ hashFiles('src-tauri/Cargo.lock') }}
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'npm'
       - name: install dependencies (ubuntu only)
         if: matrix.os == 'ubuntu-20.04'
@@ -65,7 +66,7 @@ jobs:
         with:
           tagName: 'v__VERSION__'
           releaseName: 'Release __VERSION__'
-          releaseBody: '<!-- Release Notes -->'
+          releaseBody: 'https://yaak.app/changelog/__VERSION__'
           releaseDraft: true
           prerelease: false
           args: '--target ${{ matrix.target }}'

package.json

@@ -45,6 +45,8 @@
     "classnames": "^2.3.2",
     "cm6-graphql": "^0.0.9",
     "codemirror": "^6.0.1",
+    "codemirror-json-schema": "^0.6.1",
+    "date-fns": "^3.3.1",
     "focus-trap-react": "^10.1.1",
     "format-graphql": "^1.4.0",
     "framer-motion": "^9.0.4",
@@ -60,11 +62,12 @@
     "react-use": "^17.4.0",
     "slugify": "^1.6.6",
     "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "xml-formatter": "^3.6.2"
   },
   "devDependencies": {
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tauri-apps/cli": "^1.5.6",
+    "@tauri-apps/cli": "^1.5.10",
     "@types/node": "^18.7.10",
     "@types/papaparse": "^5.3.7",
     "@types/parse-color": "^1.0.1",
@@ -72,9 +75,9 @@
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
@@ -88,13 +91,13 @@
     "postcss": "^8.4.21",
     "postcss-nesting": "^11.2.1",
     "prettier": "^2.8.4",
-    "react-devtools": "^4.28.5",
+    "react-devtools": "^4.27.2",
     "tailwindcss": "^3.2.7",
-    "typescript": "^5.0.2",
-    "vite": "^4.0.0",
-    "vite-plugin-svgr": "^2.4.0",
-    "vite-plugin-top-level-await": "^1.2.4",
-    "vitest": "^0.29.2"
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vitest": "^1.3.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",

plugins/importer-insomnia/package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "importer-insomnia",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "importer-insomnia",
+      "version": "0.0.1"
+    }
+  }
+}

plugins/importer-postman/package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "importer-postman",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "importer-postman",
+      "version": "0.0.1"
+    }
+  }
+}

plugins/importer-postman/src/index.ts

@@ -1,4 +1,4 @@
-import { Environment, Folder, HttpRequest, Workspace } from '../../../../src-web/lib/models';
+import { Environment, Folder, HttpRequest, Workspace } from '../../../src-web/lib/models';
 
 const POSTMAN_2_1_0_SCHEMA = 'https://schema.getpostman.com/json/collection/v2.1.0/collection.json';
 const POSTMAN_2_0_0_SCHEMA = 'https://schema.getpostman.com/json/collection/v2.0.0/collection.json';

plugins/importer-yaak/package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "importer-yaak",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "importer-yaak",
+      "version": "0.0.1"
+    }
+  }
+}

plugins/importer-yaak/src/index.js

@@ -10,9 +10,21 @@ export function pluginHookImport(contents) {
     return undefined;
   }
 
-  if (parsed.yaakSchema !== 1) return undefined;
+  if (!('yaakSchema' in parsed)) {
+    return;
+  }
 
-  return { resources: parsed.resources }; // Should already be in the correct format
+  // Migrate v1 to v2 -- changes requests to httpRequests
+  if (parsed.yaakSchema === 1) {
+    parsed.resources.httpRequests = parsed.resources.requests;
+    parsed.yaakSchema = 2;
+  }
+
+  if (parsed.yaakSchema === 2) {
+    return { resources: parsed.resources }; // Should already be in the correct format
+  }
+
+  return undefined;
 }
 
 export function isJSObject(obj) {

src-tauri/.sqlx/query-02506ad41cc94cd937422ef1977a97174431f008a9fb4ce39667d587a858b876.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO folders (\n                id,\n                workspace_id,\n                folder_id,\n                name,\n                sort_priority\n            )\n            VALUES (?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               folder_id = excluded.folder_id,\n               sort_priority = excluded.sort_priority\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 5
-    },
-    "nullable": []
-  },
-  "hash": "02506ad41cc94cd937422ef1977a97174431f008a9fb4ce39667d587a858b876"
-}

src-tauri/.sqlx/query-11394af12419cca3be3a26dff9275514ea2a44504e3c7a568a9578c64b5713d1.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO http_requests (\n                id, workspace_id, folder_id, name, url, url_parameters, method, body, body_type,\n                authentication, authentication_type, headers, sort_priority\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               folder_id = excluded.folder_id,\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               url_parameters = excluded.url_parameters,\n               sort_priority = excluded.sort_priority\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 13
+    },
+    "nullable": []
+  },
+  "hash": "11394af12419cca3be3a26dff9275514ea2a44504e3c7a568a9578c64b5713d1"
+}

src-tauri/.sqlx/query-12b265491d1ebba19e1ce8a660e458ffbcd8c0850aef16ba1f70e358623ac66a.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO workspaces (\n                id, name, description, variables, setting_request_timeout,\n                setting_follow_redirects, setting_validate_certificates\n             )\n            VALUES (?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               description = excluded.description,\n               variables = excluded.variables,\n               setting_request_timeout = excluded.setting_request_timeout,\n               setting_follow_redirects = excluded.setting_follow_redirects,\n               setting_validate_certificates = excluded.setting_validate_certificates\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 7
+    },
+    "nullable": []
+  },
+  "hash": "12b265491d1ebba19e1ce8a660e458ffbcd8c0850aef16ba1f70e358623ac66a"
+}

src-tauri/.sqlx/query-13cb883199e81966174e6fda9c252bf7213fe01b5346266c0a89dc0ac89eda64.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO environments (\n                id, workspace_id, name, variables\n            )\n            VALUES (?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               variables = excluded.variables\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 4
+    },
+    "nullable": []
+  },
+  "hash": "13cb883199e81966174e6fda9c252bf7213fe01b5346266c0a89dc0ac89eda64"
+}

src-tauri/.sqlx/query-14930955e8a914e292dfbebfce2ea43cc41c1d517386ed816c16d436bf626bf3.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO grpc_events (\n                id, workspace_id, request_id, connection_id, content, event_type, metadata,\n                status, error\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n                updated_at = CURRENT_TIMESTAMP,\n                content = excluded.content,\n                event_type = excluded.event_type,\n                metadata = excluded.metadata,\n                status = excluded.status,\n                error = excluded.error\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 9
+    },
+    "nullable": []
+  },
+  "hash": "14930955e8a914e292dfbebfce2ea43cc41c1d517386ed816c16d436bf626bf3"
+}

src-tauri/.sqlx/query-1821c2f60b9fa4514d58eb73b23e25ad683b80b9bd0c2944063190a0d0a19ee5.json

@@ -0,0 +1,104 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, folder_id, created_at, updated_at, name, sort_priority,\n                url, service, method, message, authentication_type,\n                authentication AS \"authentication!: Json<HashMap<String, JsonValue>>\",\n                metadata AS \"metadata!: sqlx::types::Json<Vec<GrpcMetadataEntry>>\"\n            FROM grpc_requests\n            WHERE workspace_id = ?\n        ",
+  "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": "folder_id",
+        "ordinal": 3,
+        "type_info": "Text"
+      },
+      {
+        "name": "created_at",
+        "ordinal": 4,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "updated_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "name",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "sort_priority",
+        "ordinal": 7,
+        "type_info": "Float"
+      },
+      {
+        "name": "url",
+        "ordinal": 8,
+        "type_info": "Text"
+      },
+      {
+        "name": "service",
+        "ordinal": 9,
+        "type_info": "Text"
+      },
+      {
+        "name": "method",
+        "ordinal": 10,
+        "type_info": "Text"
+      },
+      {
+        "name": "message",
+        "ordinal": 11,
+        "type_info": "Text"
+      },
+      {
+        "name": "authentication_type",
+        "ordinal": 12,
+        "type_info": "Text"
+      },
+      {
+        "name": "authentication!: Json<HashMap<String, JsonValue>>",
+        "ordinal": 13,
+        "type_info": "Text"
+      },
+      {
+        "name": "metadata!: sqlx::types::Json<Vec<GrpcMetadataEntry>>",
+        "ordinal": 14,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      true,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "1821c2f60b9fa4514d58eb73b23e25ad683b80b9bd0c2944063190a0d0a19ee5"
+}

src-tauri/.sqlx/query-18ada3bb42c29f1940ab2e61961d79cdd69210f3dc2076aedcadeba8e34dcb6e.json

@@ -0,0 +1,80 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, request_id, connection_id, created_at, content, status, error,\n                event_type AS \"event_type!: GrpcEventType\",\n                metadata AS \"metadata!: sqlx::types::Json<HashMap<String, String>>\"\n            FROM grpc_events\n            WHERE connection_id = ?\n        ",
+  "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": "connection_id",
+        "ordinal": 4,
+        "type_info": "Text"
+      },
+      {
+        "name": "created_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "content",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "status",
+        "ordinal": 7,
+        "type_info": "Int64"
+      },
+      {
+        "name": "error",
+        "ordinal": 8,
+        "type_info": "Text"
+      },
+      {
+        "name": "event_type!: GrpcEventType",
+        "ordinal": 9,
+        "type_info": "Text"
+      },
+      {
+        "name": "metadata!: sqlx::types::Json<HashMap<String, String>>",
+        "ordinal": 10,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "18ada3bb42c29f1940ab2e61961d79cdd69210f3dc2076aedcadeba8e34dcb6e"
+}

src-tauri/.sqlx/query-2c9658a639c5e4994ae9c8ec30bd4e40a1945d640962991f879928619950ef62.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO http_responses (\n                id, request_id, workspace_id, elapsed, elapsed_headers, url, status, status_reason,\n                content_length, body_path, headers, version, remote_addr\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 13
+    },
+    "nullable": []
+  },
+  "hash": "2c9658a639c5e4994ae9c8ec30bd4e40a1945d640962991f879928619950ef62"
+}

src-tauri/.sqlx/query-3e8651cca7feecc208a676dfd24c7d8775040d5287c16890056dcb474674edfb.json

@@ -0,0 +1,92 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, request_id, created_at, updated_at, service,\n                method, elapsed, status, error, url,\n                trailers AS \"trailers!: sqlx::types::Json<HashMap<String, String>>\"\n            FROM grpc_connections\n            WHERE request_id = ?\n            ORDER BY created_at DESC\n        ",
+  "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": "created_at",
+        "ordinal": 4,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "updated_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "service",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "method",
+        "ordinal": 7,
+        "type_info": "Text"
+      },
+      {
+        "name": "elapsed",
+        "ordinal": 8,
+        "type_info": "Int64"
+      },
+      {
+        "name": "status",
+        "ordinal": 9,
+        "type_info": "Int64"
+      },
+      {
+        "name": "error",
+        "ordinal": 10,
+        "type_info": "Text"
+      },
+      {
+        "name": "url",
+        "ordinal": 11,
+        "type_info": "Text"
+      },
+      {
+        "name": "trailers!: sqlx::types::Json<HashMap<String, String>>",
+        "ordinal": 12,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "3e8651cca7feecc208a676dfd24c7d8775040d5287c16890056dcb474674edfb"
+}

src-tauri/.sqlx/query-42bc0ded60b44dab19daf6d8fc7df83d83af5d88ea0b84514fdc877a668c27cd.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            DELETE FROM grpc_connections\n            WHERE id = ?\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "42bc0ded60b44dab19daf6d8fc7df83d83af5d88ea0b84514fdc877a668c27cd"
+}

src-tauri/.sqlx/query-467b87ad1209a4653b1dc8462d79236a655240c5b402fa9fd75c12ebd9bb6b86.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO grpc_requests (\n                id, name, workspace_id, folder_id, sort_priority, url, service, method, message,\n                authentication_type, authentication, metadata\n             )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n                updated_at = CURRENT_TIMESTAMP,\n                name = excluded.name,\n                folder_id = excluded.folder_id,\n                sort_priority = excluded.sort_priority,\n                url = excluded.url,\n                service = excluded.service,\n                method = excluded.method,\n                message = excluded.message,\n                authentication_type = excluded.authentication_type,\n                authentication = excluded.authentication,\n                metadata = excluded.metadata\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 12
+    },
+    "nullable": []
+  },
+  "hash": "467b87ad1209a4653b1dc8462d79236a655240c5b402fa9fd75c12ebd9bb6b86"
+}

src-tauri/.sqlx/query-48ec5fdf20f34add763c540061caa25054545503704e19f149987f99b1a0e4f0.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            UPDATE settings SET (\n                theme, appearance, update_channel\n            ) = (?, ?, ?) WHERE id = 'default';\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 3
+    },
+    "nullable": []
+  },
+  "hash": "48ec5fdf20f34add763c540061caa25054545503704e19f149987f99b1a0e4f0"
+}

src-tauri/.sqlx/query-4a5fd6c81401ccafac64b05cb476da92cc30919d5bdb0a0226ea5e30d5b30c0f.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO http_requests (\n                id,\n                workspace_id,\n                folder_id,\n                name,\n                url,\n                url_parameters,\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               folder_id = excluded.folder_id,\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               url_parameters = excluded.url_parameters,\n               sort_priority = excluded.sort_priority\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 13
-    },
-    "nullable": []
-  },
-  "hash": "4a5fd6c81401ccafac64b05cb476da92cc30919d5bdb0a0226ea5e30d5b30c0f"
-}

src-tauri/.sqlx/query-558e72df3c6f2635c6b3d52a199f9a5f7a3d82b379ff9af36645dcfb92548fdd.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                created_at,\n                updated_at,\n                folder_id,\n                name,\n                sort_priority\n            FROM folders\n            WHERE id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, workspace_id, created_at, updated_at, folder_id, name, sort_priority\n            FROM folders\n            WHERE workspace_id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -58,5 +58,5 @@
       false
     ]
   },
-  "hash": "1428d25b6aa3d6ec55742a968571fa951da0406d7bb32408883c584eae7dd53c"
+  "hash": "558e72df3c6f2635c6b3d52a199f9a5f7a3d82b379ff9af36645dcfb92548fdd"
 }

src-tauri/.sqlx/query-573db23160de025e5c72efb90be7fff5e3ec4619b962d149fdd4d618fe02c680.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                folder_id,\n                created_at,\n                updated_at,\n                name,\n                url,\n                url_parameters AS \"url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>\",\n                method,\n                body AS \"body!: Json<HashMap<String, JsonValue>>\",\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        ",
+  "query": "\n            SELECT\n                id, model, workspace_id, folder_id, created_at, updated_at, name, url, method,\n                body_type, authentication_type, sort_priority,\n                url_parameters AS \"url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>\",\n                body AS \"body!: Json<HashMap<String, JsonValue>>\",\n                authentication AS \"authentication!: Json<HashMap<String, JsonValue>>\",\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpRequestHeader>>\"\n            FROM http_requests\n            WHERE id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -44,39 +44,39 @@
         "type_info": "Text"
       },
       {
-        "name": "url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>",
+        "name": "method",
         "ordinal": 8,
         "type_info": "Text"
       },
       {
-        "name": "method",
+        "name": "body_type",
         "ordinal": 9,
         "type_info": "Text"
       },
       {
-        "name": "body!: Json<HashMap<String, JsonValue>>",
+        "name": "authentication_type",
         "ordinal": 10,
         "type_info": "Text"
       },
       {
-        "name": "body_type",
+        "name": "sort_priority",
         "ordinal": 11,
-        "type_info": "Text"
+        "type_info": "Float"
       },
       {
-        "name": "authentication!: Json<HashMap<String, JsonValue>>",
+        "name": "url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>",
         "ordinal": 12,
         "type_info": "Text"
       },
       {
-        "name": "authentication_type",
+        "name": "body!: Json<HashMap<String, JsonValue>>",
         "ordinal": 13,
         "type_info": "Text"
       },
       {
-        "name": "sort_priority",
+        "name": "authentication!: Json<HashMap<String, JsonValue>>",
         "ordinal": 14,
-        "type_info": "Float"
+        "type_info": "Text"
       },
       {
         "name": "headers!: sqlx::types::Json<Vec<HttpRequestHeader>>",
@@ -97,14 +97,14 @@
       false,
       false,
       false,
-      false,
-      false,
+      true,
       true,
       false,
-      true,
+      false,
+      false,
       false,
       false
     ]
   },
-  "hash": "6483f3ffeb90e019e9078d98bb831b8e4fbedfb45751d6cd33bd42e518b634dd"
+  "hash": "573db23160de025e5c72efb90be7fff5e3ec4619b962d149fdd4d618fe02c680"
 }

src-tauri/.sqlx/query-5765e9565a8b89c5bc2d72197e0e4a1093739e9abba69f6fe5527d453fab4db8.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                created_at,\n                updated_at,\n                name,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM environments\n            WHERE id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, workspace_id, created_at, updated_at, name,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM environments\n            WHERE id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -52,5 +52,5 @@
       false
     ]
   },
-  "hash": "689bcc92b914f50c14921faa796c07a256deb84c832fc3d90200b393fb159417"
+  "hash": "5765e9565a8b89c5bc2d72197e0e4a1093739e9abba69f6fe5527d453fab4db8"
 }

src-tauri/.sqlx/query-587aedf827b00bb706c35457a75b811317e66fc84ac0906bf5513d938121a078.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            UPDATE http_responses SET (\n                elapsed,\n                elapsed_headers,\n                url,\n                status,\n                status_reason,\n                content_length,\n                body_path,\n                error,\n                headers,\n                version,\n                remote_addr,\n                updated_at\n            ) = (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 12
-    },
-    "nullable": []
-  },
-  "hash": "587aedf827b00bb706c35457a75b811317e66fc84ac0906bf5513d938121a078"
-}

src-tauri/.sqlx/query-612efa9ac45723dc604a88f5e7e288b4055fec4ba7d9102131bd255c037fa021.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                workspace_id,\n                name,\n                cookies AS \"cookies!: sqlx::types::Json<Vec<JsonValue>>\"\n            FROM cookie_jars WHERE id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, created_at, updated_at, workspace_id, name,\n                cookies AS \"cookies!: sqlx::types::Json<Vec<JsonValue>>\"\n            FROM cookie_jars WHERE workspace_id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -52,5 +52,5 @@
       false
     ]
   },
-  "hash": "f2ba4708d4a9ff9ce74c407a730040bd7883e9a5c0eb79ef0d8a6782a8eae299"
+  "hash": "612efa9ac45723dc604a88f5e7e288b4055fec4ba7d9102131bd255c037fa021"
 }

src-tauri/.sqlx/query-66deed028199c78ed15ea2f837907887c2a2cb564d1d076dd4ebf0ecbc82e098.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO grpc_connections (\n                id, workspace_id, request_id, service, method, elapsed,\n                status, error, trailers, url\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n                updated_at = CURRENT_TIMESTAMP,\n                service = excluded.service,\n                method = excluded.method,\n                elapsed = excluded.elapsed,\n                status = excluded.status,\n                error = excluded.error,\n                trailers = excluded.trailers,\n                url = excluded.url\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 10
+    },
+    "nullable": []
+  },
+  "hash": "66deed028199c78ed15ea2f837907887c2a2cb564d1d076dd4ebf0ecbc82e098"
+}

src-tauri/.sqlx/query-86a9d12d7b00217f3143671908c31c2c6a3c24774a505280dcba169eb5b6b0fb.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            UPDATE settings SET (\n                theme,\n                appearance,\n                update_channel\n            ) = (?, ?, ?) WHERE id = 'default';\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 3
-    },
-    "nullable": []
-  },
-  "hash": "86a9d12d7b00217f3143671908c31c2c6a3c24774a505280dcba169eb5b6b0fb"
-}

src-tauri/.sqlx/query-8dfbae65ddec905ea3734448cc9f7029b6c78de227c6fa3a85d75d0a7f21e0e9.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                name,\n                description,\n                setting_request_timeout,\n                setting_follow_redirects,\n                setting_validate_certificates,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM workspaces\n        ",
+  "query": "\n            SELECT\n                id, model, created_at, updated_at, name, description, setting_request_timeout,\n                setting_follow_redirects, setting_validate_certificates,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM workspaces\n        ",
   "describe": {
     "columns": [
       {
@@ -70,5 +70,5 @@
       false
     ]
   },
-  "hash": "20cf0f8b71e600bc40ee204b60a12b2f3728178f3b8788d2e5cc92821b74d470"
+  "hash": "8dfbae65ddec905ea3734448cc9f7029b6c78de227c6fa3a85d75d0a7f21e0e9"
 }

src-tauri/.sqlx/query-9238f94c688d91f42627e5b73c627c514bab4039ab5edadc79b77dfdfd63b208.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO folders (\n                id, workspace_id, folder_id, name, sort_priority\n            )\n            VALUES (?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               folder_id = excluded.folder_id,\n               sort_priority = excluded.sort_priority\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 5
+    },
+    "nullable": []
+  },
+  "hash": "9238f94c688d91f42627e5b73c627c514bab4039ab5edadc79b77dfdfd63b208"
+}

src-tauri/.sqlx/query-92d8f003a8f7df692345f2d2fd2504c9222645976e3433e32e190f4ee4bf100d.json

@@ -0,0 +1,80 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, request_id, connection_id, created_at, content, status, error,\n                event_type AS \"event_type!: GrpcEventType\",\n                metadata AS \"metadata!: sqlx::types::Json<HashMap<String, String>>\"\n            FROM grpc_events\n            WHERE id = ?\n        ",
+  "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": "connection_id",
+        "ordinal": 4,
+        "type_info": "Text"
+      },
+      {
+        "name": "created_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "content",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "status",
+        "ordinal": 7,
+        "type_info": "Int64"
+      },
+      {
+        "name": "error",
+        "ordinal": 8,
+        "type_info": "Text"
+      },
+      {
+        "name": "event_type!: GrpcEventType",
+        "ordinal": 9,
+        "type_info": "Text"
+      },
+      {
+        "name": "metadata!: sqlx::types::Json<HashMap<String, String>>",
+        "ordinal": 10,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "92d8f003a8f7df692345f2d2fd2504c9222645976e3433e32e190f4ee4bf100d"
+}

src-tauri/.sqlx/query-9ba3f783238b77637ffded4171b2fbb5e5ad0be952a0d832448d65cc5f0effc1.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                name,\n                description,\n                setting_request_timeout,\n                setting_follow_redirects,\n                setting_validate_certificates,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM workspaces WHERE id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, created_at, updated_at, name, description, setting_request_timeout,\n                setting_follow_redirects, setting_validate_certificates,\n                variables AS \"variables!: sqlx::types::Json<Vec<EnvironmentVariable>>\"\n            FROM workspaces WHERE id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -70,5 +70,5 @@
       false
     ]
   },
-  "hash": "e08fa4f9b2929f20a01d1dc43d6847a309d3e8c5b324df2d039d1c6e07e6eb2f"
+  "hash": "9ba3f783238b77637ffded4171b2fbb5e5ad0be952a0d832448d65cc5f0effc1"
 }

src-tauri/.sqlx/query-a1c9a862ca6a07476cb8e7d16d73bd109c070603396a890dc717e50020d006f5.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO http_responses (\n                id,\n                request_id,\n                workspace_id,\n                elapsed,\n                elapsed_headers,\n                url,\n                status,\n                status_reason,\n                content_length,\n                body_path,\n                headers,\n                version,\n                remote_addr\n            )\n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 13
-    },
-    "nullable": []
-  },
-  "hash": "a1c9a862ca6a07476cb8e7d16d73bd109c070603396a890dc717e50020d006f5"
-}

src-tauri/.sqlx/query-a690a04cd1ebe8c3dbfd0cd98ae4ef093a1696d7b7ecaf694d12e5fafd62b685.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            UPDATE grpc_connections\n            SET (elapsed) = (-1)\n            WHERE elapsed = 0;\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": []
+  },
+  "hash": "a690a04cd1ebe8c3dbfd0cd98ae4ef093a1696d7b7ecaf694d12e5fafd62b685"
+}

src-tauri/.sqlx/query-ae98a7b35a5cb80a4bcd04faa22545deac2a5e9bfb814b60191f16b98ed49796.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                created_at,\n                updated_at,\n                folder_id,\n                name,\n                sort_priority\n            FROM folders\n            WHERE workspace_id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, workspace_id, created_at, updated_at, folder_id, name, sort_priority\n            FROM folders\n            WHERE id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -58,5 +58,5 @@
       false
     ]
   },
-  "hash": "1517b0f86c841b5f1247bd40c3a9b38ab001d846a410b6e3cd36f9e844d50ddb"
+  "hash": "ae98a7b35a5cb80a4bcd04faa22545deac2a5e9bfb814b60191f16b98ed49796"
 }

src-tauri/.sqlx/query-b32994b09ae7a06eb0f031069d327e55127a5bce60cbb499b83d1701386a23cb.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                theme,\n                appearance,\n                update_channel\n            FROM settings\n            WHERE id = 'default'\n        ",
+  "query": "\n            SELECT\n                id, model, created_at, updated_at, theme, appearance, update_channel\n            FROM settings\n            WHERE id = 'default'\n        ",
   "describe": {
     "columns": [
       {
@@ -52,5 +52,5 @@
       false
     ]
   },
-  "hash": "3b3fb6271340c6ec21a10b4f1b20502c86c425e0b53ac07692f8a4ed0be09335"
+  "hash": "b32994b09ae7a06eb0f031069d327e55127a5bce60cbb499b83d1701386a23cb"
 }

src-tauri/.sqlx/query-b3fae40a793a6724dd2286a9ca4bc0a9c000a631ee0d751a9dc4f3e76de3d57c.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            INSERT INTO cookie_jars (\n                id, workspace_id, name, cookies\n             )\n            VALUES (?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               cookies = excluded.cookies\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 4
+    },
+    "nullable": []
+  },
+  "hash": "b3fae40a793a6724dd2286a9ca4bc0a9c000a631ee0d751a9dc4f3e76de3d57c"
+}

src-tauri/.sqlx/query-b5ed4dc77f8cf21de1a06f146e47821bdb51fcfe747170bea41e7a366d736bda.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO cookie_jars (\n                id,\n                workspace_id,\n                name,\n                cookies\n             )\n            VALUES (?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               cookies = excluded.cookies\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 4
-    },
-    "nullable": []
-  },
-  "hash": "b5ed4dc77f8cf21de1a06f146e47821bdb51fcfe747170bea41e7a366d736bda"
-}

src-tauri/.sqlx/query-cae4e905515ddea1ec2cd685020241f06b49719085a695b897ef8ad409d2cef2.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO workspaces (\n                id,\n                name,\n                description,\n                variables,\n                setting_request_timeout,\n                setting_follow_redirects,\n                setting_validate_certificates\n             )\n            VALUES (?, ?, ?, ?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               description = excluded.description,\n               variables = excluded.variables,\n               setting_request_timeout = excluded.setting_request_timeout,\n               setting_follow_redirects = excluded.setting_follow_redirects,\n               setting_validate_certificates = excluded.setting_validate_certificates\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 7
-    },
-    "nullable": []
-  },
-  "hash": "cae4e905515ddea1ec2cd685020241f06b49719085a695b897ef8ad409d2cef2"
-}

src-tauri/.sqlx/query-d4b64c466624eb75e0f5bd201ebfb6a73d25eb7c9e09cb9690afdb7fef5fca8b.json

@@ -0,0 +1,92 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, request_id, created_at, updated_at, service,\n                method, elapsed, status, error, url,\n                trailers AS \"trailers!: sqlx::types::Json<HashMap<String, String>>\"\n            FROM grpc_connections\n            WHERE id = ?\n        ",
+  "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": "created_at",
+        "ordinal": 4,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "updated_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "service",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "method",
+        "ordinal": 7,
+        "type_info": "Text"
+      },
+      {
+        "name": "elapsed",
+        "ordinal": 8,
+        "type_info": "Int64"
+      },
+      {
+        "name": "status",
+        "ordinal": 9,
+        "type_info": "Int64"
+      },
+      {
+        "name": "error",
+        "ordinal": 10,
+        "type_info": "Text"
+      },
+      {
+        "name": "url",
+        "ordinal": 11,
+        "type_info": "Text"
+      },
+      {
+        "name": "trailers!: sqlx::types::Json<HashMap<String, String>>",
+        "ordinal": 12,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "d4b64c466624eb75e0f5bd201ebfb6a73d25eb7c9e09cb9690afdb7fef5fca8b"
+}

src-tauri/.sqlx/query-dcc2f405f8e29d0599d86bcde509187e9cc5fc647067eaa5c738cb24e2f081e5.json

@@ -1,12 +0,0 @@
-{
-  "db_name": "SQLite",
-  "query": "\n            INSERT INTO environments (\n                id,\n                workspace_id,\n                name,\n                variables\n            )\n            VALUES (?, ?, ?, ?)\n            ON CONFLICT (id) DO UPDATE SET\n               updated_at = CURRENT_TIMESTAMP,\n               name = excluded.name,\n               variables = excluded.variables\n        ",
-  "describe": {
-    "columns": [],
-    "parameters": {
-      "Right": 4
-    },
-    "nullable": []
-  },
-  "hash": "dcc2f405f8e29d0599d86bcde509187e9cc5fc647067eaa5c738cb24e2f081e5"
-}

src-tauri/.sqlx/query-e1cdba43bd938772631263966a9bee263923c387f4864917f36a04043bec4857.json

@@ -0,0 +1,104 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            SELECT\n                id, model, workspace_id, folder_id, created_at, updated_at, name, sort_priority,\n                url, service, method, message, authentication_type,\n                authentication AS \"authentication!: Json<HashMap<String, JsonValue>>\",\n                metadata AS \"metadata!: sqlx::types::Json<Vec<GrpcMetadataEntry>>\"\n            FROM grpc_requests\n            WHERE id = ?\n        ",
+  "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": "folder_id",
+        "ordinal": 3,
+        "type_info": "Text"
+      },
+      {
+        "name": "created_at",
+        "ordinal": 4,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "updated_at",
+        "ordinal": 5,
+        "type_info": "Datetime"
+      },
+      {
+        "name": "name",
+        "ordinal": 6,
+        "type_info": "Text"
+      },
+      {
+        "name": "sort_priority",
+        "ordinal": 7,
+        "type_info": "Float"
+      },
+      {
+        "name": "url",
+        "ordinal": 8,
+        "type_info": "Text"
+      },
+      {
+        "name": "service",
+        "ordinal": 9,
+        "type_info": "Text"
+      },
+      {
+        "name": "method",
+        "ordinal": 10,
+        "type_info": "Text"
+      },
+      {
+        "name": "message",
+        "ordinal": 11,
+        "type_info": "Text"
+      },
+      {
+        "name": "authentication_type",
+        "ordinal": 12,
+        "type_info": "Text"
+      },
+      {
+        "name": "authentication!: Json<HashMap<String, JsonValue>>",
+        "ordinal": 13,
+        "type_info": "Text"
+      },
+      {
+        "name": "metadata!: sqlx::types::Json<Vec<GrpcMetadataEntry>>",
+        "ordinal": 14,
+        "type_info": "Text"
+      }
+    ],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": [
+      false,
+      false,
+      false,
+      true,
+      false,
+      false,
+      false,
+      false,
+      false,
+      true,
+      true,
+      false,
+      true,
+      false,
+      false
+    ]
+  },
+  "hash": "e1cdba43bd938772631263966a9bee263923c387f4864917f36a04043bec4857"
+}

src-tauri/.sqlx/query-e61c0dddb3e86d271cb9399faa4e4443342796cb72bdd43a821fae2994ae8e2f.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                workspace_id,\n                folder_id,\n                created_at,\n                updated_at,\n                name,\n                url,\n                url_parameters AS \"url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>\",\n                method,\n                body AS \"body!: Json<HashMap<String, JsonValue>>\",\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 workspace_id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, workspace_id, folder_id, created_at, updated_at, name, url,\n                url_parameters AS \"url_parameters!: sqlx::types::Json<Vec<HttpUrlParameter>>\",\n                method, body_type, authentication_type, sort_priority,\n                body AS \"body!: Json<HashMap<String, JsonValue>>\",\n                authentication AS \"authentication!: Json<HashMap<String, JsonValue>>\",\n                headers AS \"headers!: sqlx::types::Json<Vec<HttpRequestHeader>>\"\n            FROM http_requests\n            WHERE workspace_id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -54,29 +54,29 @@
         "type_info": "Text"
       },
       {
-        "name": "body!: Json<HashMap<String, JsonValue>>",
+        "name": "body_type",
         "ordinal": 10,
         "type_info": "Text"
       },
       {
-        "name": "body_type",
+        "name": "authentication_type",
         "ordinal": 11,
         "type_info": "Text"
       },
       {
-        "name": "authentication!: Json<HashMap<String, JsonValue>>",
+        "name": "sort_priority",
         "ordinal": 12,
-        "type_info": "Text"
+        "type_info": "Float"
       },
       {
-        "name": "authentication_type",
+        "name": "body!: Json<HashMap<String, JsonValue>>",
         "ordinal": 13,
         "type_info": "Text"
       },
       {
-        "name": "sort_priority",
+        "name": "authentication!: Json<HashMap<String, JsonValue>>",
         "ordinal": 14,
-        "type_info": "Float"
+        "type_info": "Text"
       },
       {
         "name": "headers!: sqlx::types::Json<Vec<HttpRequestHeader>>",
@@ -98,13 +98,13 @@
       false,
       false,
       false,
-      false,
+      true,
       true,
       false,
-      true,
+      false,
       false,
       false
     ]
   },
-  "hash": "7a7bc4df7e52ad3a987c97af8f43b46381e2cc16ba0c553713d0b6c64354eb39"
+  "hash": "e61c0dddb3e86d271cb9399faa4e4443342796cb72bdd43a821fae2994ae8e2f"
 }

src-tauri/.sqlx/query-e7124f5570076bfd65985744f48d8e12cf29d6d243fffdd62ade2ab70c7bddda.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            UPDATE http_responses SET (\n                elapsed, elapsed_headers, url, status, status_reason, content_length, body_path,\n                error, headers, version, remote_addr, updated_at\n            ) = (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP) WHERE id = ?;\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 12
+    },
+    "nullable": []
+  },
+  "hash": "e7124f5570076bfd65985744f48d8e12cf29d6d243fffdd62ade2ab70c7bddda"
+}

src-tauri/.sqlx/query-f5f20f3b37d932617499a0da50997edad59e4f5998b15c50ed6eae2e97064068.json

@@ -1,6 +1,6 @@
 {
   "db_name": "SQLite",
-  "query": "\n            SELECT\n                id,\n                model,\n                created_at,\n                updated_at,\n                workspace_id,\n                name,\n                cookies AS \"cookies!: sqlx::types::Json<Vec<JsonValue>>\"\n            FROM cookie_jars WHERE workspace_id = ?\n        ",
+  "query": "\n            SELECT\n                id, model, created_at, updated_at, workspace_id, name,\n                cookies AS \"cookies!: sqlx::types::Json<Vec<JsonValue>>\"\n            FROM cookie_jars WHERE id = ?\n        ",
   "describe": {
     "columns": [
       {
@@ -52,5 +52,5 @@
       false
     ]
   },
-  "hash": "cb939b45a715d91f7631dea6b2d1bdc59fb3dffbd44ff99bc15adb34ea7093f7"
+  "hash": "f5f20f3b37d932617499a0da50997edad59e4f5998b15c50ed6eae2e97064068"
 }

src-tauri/.sqlx/query-fe0652396bc30d926cf99083651c1cbd668bcf00ebe1a5f36616700c84972b39.json

@@ -0,0 +1,12 @@
+{
+  "db_name": "SQLite",
+  "query": "\n            DELETE FROM grpc_requests\n            WHERE id = ?\n        ",
+  "describe": {
+    "columns": [],
+    "parameters": {
+      "Right": 1
+    },
+    "nullable": []
+  },
+  "hash": "fe0652396bc30d926cf99083651c1cbd668bcf00ebe1a5f36616700c84972b39"
+}

src-tauri/Cargo.toml

@@ -1,3 +1,4 @@
+workspace = { members = ["grpc"] }
 [package]
 name = "yaak-app"
 version = "0.0.0"
@@ -11,7 +12,7 @@ edition = "2021"
 strip = true  # Automatically strip symbols from the binary.
 
 [build-dependencies]
-tauri-build = { version = "1.2", features = [] }
+tauri-build = { version = "1.5", features = [] }
 
 [target.'cfg(target_os = "macos")'.dependencies]
 objc = "0.2.7"
@@ -32,9 +33,10 @@ reqwest = { version = "0.11.23", features = ["multipart", "cookies", "gzip", "br
 cookie = { version = "0.18.0" }
 serde = { version = "1.0.195", features = ["derive"] }
 serde_json = { version = "1.0.111", features = ["raw_value"] }
-sqlx = { version = "0.7.2", features = ["sqlite", "runtime-tokio-rustls", "json", "chrono", "time"] }
-tauri = { version = "1.5.2", features = [
+sqlx = { version = "0.7.3", features = ["sqlite", "runtime-tokio-rustls", "json", "chrono", "time"] }
+tauri = { version = "1.5.4", features = [
     "config-toml",
+    "path-all",
     "devtools",
     "dialog-open",
     "dialog-save",
@@ -42,6 +44,7 @@ tauri = { version = "1.5.2", features = [
     "os-all",
     "protocol-asset",
     "shell-open",
+    "shell-sidecar",
     "updater",
     "window-close",
     "window-maximize",
@@ -59,6 +62,8 @@ log = "0.4.20"
 datetime = "0.5.2"
 window-shadows = "0.2.2"
 reqwest_cookie_store = "0.6.0"
+grpc = { path = "./grpc" }
+tokio-stream = "0.1.14"
 
 [features]
 # by default Tauri runs in production mode

src-tauri/grpc/Cargo.toml

@@ -0,0 +1,23 @@
+[package]
+name = "grpc"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+tonic = "0.10.2"
+prost = "0.12"
+tokio = { version = "1.0", features = ["macros", "rt-multi-thread", "fs"] }
+tonic-reflection = "0.10.2"
+tokio-stream = "0.1.14"
+prost-types = "0.12.3"
+serde = { version = "1.0.196", features = ["derive"] }
+serde_json = "1.0.113"
+prost-reflect = { version = "0.12.0", features = ["serde", "derive"] }
+log = "0.4.20"
+once_cell = { version = "1.19.0", features = [] }
+anyhow = "1.0.79"
+hyper = { version = "0.14" }
+hyper-rustls = { version = "0.24.0", features = ["http2"] }
+protoc-bin-vendored = "3.0.0"
+uuid = { version = "1.7.0", features = ["v4"] }
+tauri = { version = "1.5.4", features = ["process-command-api"]}

src-tauri/grpc/src/codec.rs

@@ -0,0 +1,52 @@
+use prost_reflect::prost::Message;
+use prost_reflect::{DynamicMessage, MethodDescriptor};
+use tonic::codec::{Codec, DecodeBuf, Decoder, EncodeBuf, Encoder};
+use tonic::Status;
+
+#[derive(Clone)]
+pub struct DynamicCodec(MethodDescriptor);
+
+impl DynamicCodec {
+    #[allow(dead_code)]
+    pub fn new(md: MethodDescriptor) -> Self {
+        Self(md)
+    }
+}
+
+impl Codec for DynamicCodec {
+    type Encode = DynamicMessage;
+    type Decode = DynamicMessage;
+    type Encoder = Self;
+    type Decoder = Self;
+
+    fn encoder(&mut self) -> Self::Encoder {
+        self.clone()
+    }
+
+    fn decoder(&mut self) -> Self::Decoder {
+        self.clone()
+    }
+}
+
+impl Encoder for DynamicCodec {
+    type Item = DynamicMessage;
+    type Error = Status;
+
+    fn encode(&mut self, item: Self::Item, dst: &mut EncodeBuf<'_>) -> Result<(), Self::Error> {
+        item.encode(dst)
+            .expect("buffer is too small to decode this message");
+        Ok(())
+    }
+}
+
+impl Decoder for DynamicCodec {
+    type Item = DynamicMessage;
+    type Error = Status;
+
+    fn decode(&mut self, src: &mut DecodeBuf<'_>) -> Result<Option<Self::Item>, Self::Error> {
+        let mut msg = DynamicMessage::new(self.0.output());
+        msg.merge(src)
+            .map_err(|err| Status::internal(err.to_string()))?;
+        Ok(Some(msg))
+    }
+}

src-tauri/grpc/src/json_schema.rs

@@ -0,0 +1,179 @@
+use prost_reflect::{DescriptorPool, MessageDescriptor};
+use prost_types::field_descriptor_proto;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+
+#[derive(Default, Serialize, Deserialize)]
+#[serde(default, rename_all = "camelCase")]
+pub struct JsonSchemaEntry {
+    #[serde(skip_serializing_if = "Option::is_none")]
+    title: Option<String>,
+
+    #[serde(rename = "type")]
+    type_: JsonType,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    description: Option<String>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    properties: Option<HashMap<String, JsonSchemaEntry>>,
+
+    #[serde(rename = "enum", skip_serializing_if = "Option::is_none")]
+    enum_: Option<Vec<String>>,
+
+    /// Don't allow any other properties in the object
+    additional_properties: bool,
+
+    /// Set all properties to required
+    #[serde(skip_serializing_if = "Option::is_none")]
+    required: Option<Vec<String>>,
+
+    #[serde(skip_serializing_if = "Option::is_none")]
+    items: Option<Box<JsonSchemaEntry>>,
+}
+
+enum JsonType {
+    String,
+    Number,
+    Object,
+    Array,
+    Boolean,
+    Null,
+    _UNKNOWN,
+}
+
+impl Default for JsonType {
+    fn default() -> Self {
+        JsonType::_UNKNOWN
+    }
+}
+
+impl serde::Serialize for JsonType {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        match self {
+            JsonType::String => serializer.serialize_str("string"),
+            JsonType::Number => serializer.serialize_str("number"),
+            JsonType::Object => serializer.serialize_str("object"),
+            JsonType::Array => serializer.serialize_str("array"),
+            JsonType::Boolean => serializer.serialize_str("boolean"),
+            JsonType::Null => serializer.serialize_str("null"),
+            JsonType::_UNKNOWN => serializer.serialize_str("unknown"),
+        }
+    }
+}
+
+impl<'de> serde::Deserialize<'de> for JsonType {
+    fn deserialize<D>(deserializer: D) -> Result<JsonType, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        let s = String::deserialize(deserializer)?;
+        match s.as_str() {
+            "string" => Ok(JsonType::String),
+            "number" => Ok(JsonType::Number),
+            "object" => Ok(JsonType::Object),
+            "array" => Ok(JsonType::Array),
+            "boolean" => Ok(JsonType::Boolean),
+            "null" => Ok(JsonType::Null),
+            _ => Ok(JsonType::_UNKNOWN),
+        }
+    }
+}
+
+pub fn message_to_json_schema(
+    pool: &DescriptorPool,
+    message: MessageDescriptor,
+) -> JsonSchemaEntry {
+    let mut schema = JsonSchemaEntry {
+        title: Some(message.name().to_string()),
+        type_: JsonType::Object, // Messages are objects
+        ..Default::default()
+    };
+
+    let mut properties = HashMap::new();
+    message.fields().for_each(|f| match f.kind() {
+        prost_reflect::Kind::Message(m) => {
+            properties.insert(f.name().to_string(), message_to_json_schema(pool, m));
+        }
+        prost_reflect::Kind::Enum(e) => {
+            properties.insert(
+                f.name().to_string(),
+                JsonSchemaEntry {
+                    type_: map_proto_type_to_json_type(f.field_descriptor_proto().r#type()),
+                    enum_: Some(e.values().map(|v| v.name().to_string()).collect::<Vec<_>>()),
+                    ..Default::default()
+                },
+            );
+        }
+        _ => {
+            // TODO: Handle repeated label
+            match f.field_descriptor_proto().label() {
+                field_descriptor_proto::Label::Repeated => {
+                    // TODO: Handle more complex repeated types. This just handles primitives for now
+                    properties.insert(
+                        f.name().to_string(),
+                        JsonSchemaEntry {
+                            type_: JsonType::Array,
+                            items: Some(Box::new(JsonSchemaEntry {
+                                type_: map_proto_type_to_json_type(
+                                    f.field_descriptor_proto().r#type(),
+                                ),
+                                ..Default::default()
+                            })),
+                            ..Default::default()
+                        },
+                    );
+                }
+                _ => {
+                    // Regular JSON field
+                    properties.insert(
+                        f.name().to_string(),
+                        JsonSchemaEntry {
+                            type_: map_proto_type_to_json_type(f.field_descriptor_proto().r#type()),
+                            ..Default::default()
+                        },
+                    );
+                }
+            };
+        }
+    });
+
+    schema.properties = Some(properties);
+
+    // All proto 3 fields are optional, so maybe we could
+    // make this a setting?
+    // schema.required = Some(
+    //     message
+    //         .fields()
+    //         .map(|f| f.name().to_string())
+    //         .collect::<Vec<_>>(),
+    // );
+
+    schema
+}
+
+fn map_proto_type_to_json_type(proto_type: field_descriptor_proto::Type) -> JsonType {
+    match proto_type {
+        field_descriptor_proto::Type::Double => JsonType::Number,
+        field_descriptor_proto::Type::Float => JsonType::Number,
+        field_descriptor_proto::Type::Int64 => JsonType::Number,
+        field_descriptor_proto::Type::Uint64 => JsonType::Number,
+        field_descriptor_proto::Type::Int32 => JsonType::Number,
+        field_descriptor_proto::Type::Fixed64 => JsonType::Number,
+        field_descriptor_proto::Type::Fixed32 => JsonType::Number,
+        field_descriptor_proto::Type::Bool => JsonType::Boolean,
+        field_descriptor_proto::Type::String => JsonType::String,
+        field_descriptor_proto::Type::Group => JsonType::_UNKNOWN,
+        field_descriptor_proto::Type::Message => JsonType::Object,
+        field_descriptor_proto::Type::Bytes => JsonType::String,
+        field_descriptor_proto::Type::Uint32 => JsonType::Number,
+        field_descriptor_proto::Type::Enum => JsonType::String,
+        field_descriptor_proto::Type::Sfixed32 => JsonType::Number,
+        field_descriptor_proto::Type::Sfixed64 => JsonType::Number,
+        field_descriptor_proto::Type::Sint32 => JsonType::Number,
+        field_descriptor_proto::Type::Sint64 => JsonType::Number,
+    }
+}

src-tauri/grpc/src/lib.rs

@@ -0,0 +1,52 @@
+use prost_reflect::{DynamicMessage, MethodDescriptor, SerializeOptions};
+use serde::{Deserialize, Serialize};
+use serde_json::Deserializer;
+
+mod codec;
+mod json_schema;
+pub mod manager;
+mod proto;
+
+pub use tonic::metadata::*;
+pub use tonic::Code;
+
+pub fn serialize_options() -> SerializeOptions {
+    SerializeOptions::new().skip_default_fields(false)
+}
+
+#[derive(Serialize, Deserialize, Debug, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct ServiceDefinition {
+    pub name: String,
+    pub methods: Vec<MethodDefinition>,
+}
+
+#[derive(Serialize, Deserialize, Debug, Default)]
+#[serde(default, rename_all = "camelCase")]
+pub struct MethodDefinition {
+    pub name: String,
+    pub schema: String,
+    pub client_streaming: bool,
+    pub server_streaming: bool,
+}
+
+static SERIALIZE_OPTIONS: &'static SerializeOptions = &SerializeOptions::new()
+    .skip_default_fields(false)
+    .stringify_64_bit_integers(false);
+
+pub fn serialize_message(msg: &DynamicMessage) -> Result<String, String> {
+    let mut buf = Vec::new();
+    let mut se = serde_json::Serializer::pretty(&mut buf);
+    msg.serialize_with_options(&mut se, SERIALIZE_OPTIONS)
+        .map_err(|e| e.to_string())?;
+    let s = String::from_utf8(buf).expect("serde_json to emit valid utf8");
+    Ok(s)
+}
+
+pub fn deserialize_message(msg: &str, method: MethodDescriptor) -> Result<DynamicMessage, String> {
+    let mut deserializer = Deserializer::from_str(&msg);
+    let req_message = DynamicMessage::deserialize(method.input(), &mut deserializer)
+        .map_err(|e| e.to_string())?;
+    deserializer.end().map_err(|e| e.to_string())?;
+    Ok(req_message)
+}

src-tauri/grpc/src/manager.rs

@@ -0,0 +1,261 @@
+use std::collections::HashMap;
+use std::path::PathBuf;
+use std::str::FromStr;
+
+use hyper::client::HttpConnector;
+use hyper::Client;
+use hyper_rustls::HttpsConnector;
+pub use prost_reflect::DynamicMessage;
+use prost_reflect::{DescriptorPool, MethodDescriptor, ServiceDescriptor};
+use serde_json::Deserializer;
+use tokio_stream::wrappers::ReceiverStream;
+use tonic::body::BoxBody;
+use tonic::metadata::{MetadataKey, MetadataValue};
+use tonic::transport::Uri;
+use tonic::{IntoRequest, IntoStreamingRequest, Request, Response, Status, Streaming};
+
+use crate::codec::DynamicCodec;
+use crate::proto::{fill_pool, fill_pool_from_files, get_transport, method_desc_to_path};
+use crate::{json_schema, MethodDefinition, ServiceDefinition};
+
+#[derive(Clone)]
+pub struct GrpcConnection {
+    pool: DescriptorPool,
+    conn: Client<HttpsConnector<HttpConnector>, BoxBody>,
+    pub uri: Uri,
+}
+
+#[derive(Default)]
+pub struct StreamError {
+    pub message: String,
+    pub status: Option<Status>,
+}
+
+impl From<String> for StreamError {
+    fn from(value: String) -> Self {
+        StreamError {
+            message: value.to_string(),
+            status: None,
+        }
+    }
+}
+
+impl From<Status> for StreamError {
+    fn from(s: Status) -> Self {
+        StreamError {
+            message: s.message().to_string(),
+            status: Some(s),
+        }
+    }
+}
+
+impl GrpcConnection {
+    pub fn service(&self, service: &str) -> Result<ServiceDescriptor, String> {
+        let service = self
+            .pool
+            .get_service_by_name(service)
+            .ok_or("Failed to find service")?;
+        Ok(service)
+    }
+
+    pub fn method(&self, service: &str, method: &str) -> Result<MethodDescriptor, String> {
+        let service = self.service(service)?;
+        let method = service
+            .methods()
+            .find(|m| m.name() == method)
+            .ok_or("Failed to find method")?;
+        Ok(method)
+    }
+
+    pub async fn unary(
+        &self,
+        service: &str,
+        method: &str,
+        message: &str,
+        metadata: HashMap<String, String>,
+    ) -> Result<Response<DynamicMessage>, StreamError> {
+        let method = &self.method(&service, &method)?;
+        let input_message = method.input();
+
+        let mut deserializer = Deserializer::from_str(message);
+        let req_message = DynamicMessage::deserialize(input_message, &mut deserializer)
+            .map_err(|e| e.to_string())?;
+        deserializer.end().unwrap();
+
+        let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
+
+        let mut req = req_message.into_request();
+        decorate_req(metadata, &mut req).map_err(|e| e.to_string())?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.unwrap();
+
+        Ok(client.unary(req, path, codec).await?)
+    }
+
+    pub async fn streaming(
+        &self,
+        service: &str,
+        method: &str,
+        stream: ReceiverStream<DynamicMessage>,
+        metadata: HashMap<String, String>,
+    ) -> Result<Response<Streaming<DynamicMessage>>, StreamError> {
+        let method = &self.method(&service, &method)?;
+        let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
+
+        let mut req = stream.into_streaming_request();
+
+        decorate_req(metadata, &mut req).map_err(|e| e.to_string())?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.map_err(|e| e.to_string())?;
+        Ok(client.streaming(req, path, codec).await?)
+    }
+
+    pub async fn client_streaming(
+        &self,
+        service: &str,
+        method: &str,
+        stream: ReceiverStream<DynamicMessage>,
+        metadata: HashMap<String, String>,
+    ) -> Result<Response<DynamicMessage>, StreamError> {
+        let method = &self.method(&service, &method)?;
+        let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
+        let mut req = stream.into_streaming_request();
+        decorate_req(metadata, &mut req).map_err(|e| e.to_string())?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.unwrap();
+        client
+            .client_streaming(req, path, codec)
+            .await
+            .map_err(|e| StreamError {
+                message: e.message().to_string(),
+                status: Some(e),
+            })
+    }
+
+    pub async fn server_streaming(
+        &self,
+        service: &str,
+        method: &str,
+        message: &str,
+        metadata: HashMap<String, String>,
+    ) -> Result<Response<Streaming<DynamicMessage>>, StreamError> {
+        let method = &self.method(&service, &method)?;
+        let input_message = method.input();
+
+        let mut deserializer = Deserializer::from_str(message);
+        let req_message = DynamicMessage::deserialize(input_message, &mut deserializer)
+            .map_err(|e| e.to_string())?;
+        deserializer.end().unwrap();
+
+        let mut client = tonic::client::Grpc::with_origin(self.conn.clone(), self.uri.clone());
+
+        let mut req = req_message.into_request();
+        decorate_req(metadata, &mut req).map_err(|e| e.to_string())?;
+
+        let path = method_desc_to_path(method);
+        let codec = DynamicCodec::new(method.clone());
+        client.ready().await.map_err(|e| e.to_string())?;
+        Ok(client.server_streaming(req, path, codec).await?)
+    }
+}
+
+pub struct GrpcHandle {
+    pools: HashMap<String, DescriptorPool>,
+}
+
+impl Default for GrpcHandle {
+    fn default() -> Self {
+        let pools = HashMap::new();
+        Self { pools }
+    }
+}
+
+impl GrpcHandle {
+    pub async fn services_from_files(
+        &mut self,
+        id: &str,
+        uri: &Uri,
+        paths: Vec<PathBuf>,
+    ) -> Result<Vec<ServiceDefinition>, String> {
+        let pool = fill_pool_from_files(paths).await?;
+        self.pools.insert(self.get_pool_key(id, uri), pool.clone());
+        Ok(self.services_from_pool(&pool))
+    }
+    pub async fn services_from_reflection(
+        &mut self,
+        id: &str,
+        uri: &Uri,
+    ) -> Result<Vec<ServiceDefinition>, String> {
+        let pool = fill_pool(uri).await?;
+        self.pools.insert(self.get_pool_key(id, uri), pool.clone());
+        Ok(self.services_from_pool(&pool))
+    }
+
+    fn get_pool_key(&self, id: &str, uri: &Uri) -> String {
+        format!("{}-{}", id, uri)
+    }
+
+    fn services_from_pool(&self, pool: &DescriptorPool) -> Vec<ServiceDefinition> {
+        pool.services()
+            .map(|s| {
+                let mut def = ServiceDefinition {
+                    name: s.full_name().to_string(),
+                    methods: vec![],
+                };
+                for method in s.methods() {
+                    let input_message = method.input();
+                    def.methods.push(MethodDefinition {
+                        name: method.name().to_string(),
+                        server_streaming: method.is_server_streaming(),
+                        client_streaming: method.is_client_streaming(),
+                        schema: serde_json::to_string_pretty(&json_schema::message_to_json_schema(
+                            &pool,
+                            input_message,
+                        ))
+                        .unwrap(),
+                    })
+                }
+                def
+            })
+            .collect::<Vec<_>>()
+    }
+
+    pub async fn connect(
+        &mut self,
+        id: &str,
+        uri: Uri,
+        proto_files: Vec<PathBuf>,
+    ) -> Result<GrpcConnection, String> {
+        let pool = match self.pools.get(id) {
+            Some(p) => p.clone(),
+            None => match proto_files.len() {
+                0 => fill_pool(&uri).await?,
+                _ => {
+                    let pool = fill_pool_from_files(proto_files).await?;
+                    self.pools.insert(id.to_string(), pool.clone());
+                    pool
+                }
+            },
+        };
+
+        let conn = get_transport();
+        let connection = GrpcConnection { pool, conn, uri };
+        Ok(connection)
+    }
+}
+
+fn decorate_req<T>(metadata: HashMap<String, String>, req: &mut Request<T>) -> Result<(), String> {
+    for (k, v) in metadata {
+        req.metadata_mut().insert(
+            MetadataKey::from_str(k.as_str()).map_err(|e| e.to_string())?,
+            MetadataValue::from_str(v.as_str()).map_err(|e| e.to_string())?,
+        );
+    }
+    Ok(())
+}

src-tauri/grpc/src/proto.rs

@@ -0,0 +1,257 @@
+use std::env::temp_dir;
+use std::ops::Deref;
+use std::path::PathBuf;
+use std::str::FromStr;
+
+use anyhow::anyhow;
+use hyper::Client;
+use hyper::client::HttpConnector;
+use hyper_rustls::{HttpsConnector, HttpsConnectorBuilder};
+use log::{debug, info, warn};
+use prost::Message;
+use prost_reflect::{DescriptorPool, MethodDescriptor};
+use prost_types::{FileDescriptorProto, FileDescriptorSet};
+use tauri::api::process::{Command, CommandEvent};
+use tokio::fs;
+use tokio_stream::StreamExt;
+use tonic::body::BoxBody;
+use tonic::codegen::http::uri::PathAndQuery;
+use tonic::Request;
+use tonic::transport::Uri;
+use tonic_reflection::pb::server_reflection_client::ServerReflectionClient;
+use tonic_reflection::pb::server_reflection_request::MessageRequest;
+use tonic_reflection::pb::server_reflection_response::MessageResponse;
+use tonic_reflection::pb::ServerReflectionRequest;
+
+pub async fn fill_pool_from_files(paths: Vec<PathBuf>) -> Result<DescriptorPool, String> {
+    let mut pool = DescriptorPool::new();
+    let random_file_name = format!("{}.desc", uuid::Uuid::new_v4());
+    let desc_path = temp_dir().join(random_file_name);
+
+    let mut args = vec![
+        "--include_imports".to_string(),
+        "--include_source_info".to_string(),
+        "-o".to_string(),
+        desc_path.to_string_lossy().to_string(),
+    ];
+
+    for p in paths {
+        if p.as_path().exists() {
+            args.push(p.to_string_lossy().to_string());
+        } else {
+            continue;
+        }
+
+        let parent = p.as_path().parent();
+        if let Some(parent_path) = parent {
+            args.push("-I".to_string());
+            args.push(parent_path.to_string_lossy().to_string());
+            args.push("-I".to_string());
+            args.push(parent_path.parent().unwrap().to_string_lossy().to_string());
+        } else {
+            debug!("ignoring {:?} since it does not exist.", parent)
+        }
+    }
+
+    let (mut rx, _child) = Command::new_sidecar("protoc")
+        .expect("protoc not found")
+        .args(args)
+        .spawn()
+        .expect("protoc failed to start");
+
+    while let Some(event) = rx.recv().await {
+        match event {
+            CommandEvent::Stdout(line) => {
+                info!("protoc stdout: {}", line);
+            }
+            CommandEvent::Stderr(line) => {
+                info!("protoc stderr: {}", line);
+            }
+            CommandEvent::Error(e) => {
+                return Err(e.to_string());
+            }
+            CommandEvent::Terminated(c) => {
+                match c.code {
+                    Some(0) => {
+                        // success
+                    }
+                    Some(code) => {
+                        return Err(format!(
+                            "protoc failed with exit code: {}",
+                            code,
+                        ));
+                    }
+                    None => {
+                        return Err("protoc failed with no exit code".to_string());
+                    }
+                }
+            }
+            _ => {}
+        };
+    }
+
+    let bytes = fs::read(desc_path.as_path())
+        .await
+        .map_err(|e| e.to_string())?;
+    let fdp = FileDescriptorSet::decode(bytes.deref()).map_err(|e| e.to_string())?;
+    pool.add_file_descriptor_set(fdp)
+        .map_err(|e| e.to_string())?;
+
+    fs::remove_file(desc_path.as_path())
+        .await
+        .map_err(|e| e.to_string())?;
+
+    Ok(pool)
+}
+
+pub async fn fill_pool(uri: &Uri) -> Result<DescriptorPool, String> {
+    let mut pool = DescriptorPool::new();
+    let mut client = ServerReflectionClient::with_origin(get_transport(), uri.clone());
+
+    for service in list_services(&mut client).await? {
+        if service == "grpc.reflection.v1alpha.ServerReflection" {
+            continue;
+        }
+        file_descriptor_set_from_service_name(&service, &mut pool, &mut client).await;
+    }
+
+    Ok(pool)
+}
+
+pub fn get_transport() -> Client<HttpsConnector<HttpConnector>, BoxBody> {
+    let connector = HttpsConnectorBuilder::new().with_native_roots();
+    let connector = connector.https_or_http().enable_http2().wrap_connector({
+        let mut http_connector = HttpConnector::new();
+        http_connector.enforce_http(false);
+        http_connector
+    });
+    Client::builder()
+        .pool_max_idle_per_host(0)
+        .http2_only(true)
+        .build(connector)
+}
+
+async fn list_services(
+    reflect_client: &mut ServerReflectionClient<Client<HttpsConnector<HttpConnector>, BoxBody>>,
+) -> Result<Vec<String>, String> {
+    let response =
+        send_reflection_request(reflect_client, MessageRequest::ListServices("".into())).await?;
+
+    let list_services_response = match response {
+        MessageResponse::ListServicesResponse(resp) => resp,
+        _ => panic!("Expected a ListServicesResponse variant"),
+    };
+
+    Ok(list_services_response
+        .service
+        .iter()
+        .map(|s| s.name.clone())
+        .collect::<Vec<_>>())
+}
+
+async fn file_descriptor_set_from_service_name(
+    service_name: &str,
+    pool: &mut DescriptorPool,
+    client: &mut ServerReflectionClient<Client<HttpsConnector<HttpConnector>, BoxBody>>,
+) {
+    let response = match send_reflection_request(
+        client,
+        MessageRequest::FileContainingSymbol(service_name.into()),
+    )
+    .await
+    {
+        Ok(resp) => resp,
+        Err(e) => {
+            warn!(
+                "Error fetching file descriptor for service {}: {}",
+                service_name, e
+            );
+            return;
+        }
+    };
+
+    let file_descriptor_response = match response {
+        MessageResponse::FileDescriptorResponse(resp) => resp,
+        _ => panic!("Expected a FileDescriptorResponse variant"),
+    };
+
+    for fd in file_descriptor_response.file_descriptor_proto {
+        let fdp = FileDescriptorProto::decode(fd.deref()).unwrap();
+
+        // Add deps first or else we'll get an error
+        for dep_name in fdp.clone().dependency {
+            file_descriptor_set_by_filename(&dep_name, pool, client).await;
+        }
+
+        pool.add_file_descriptor_proto(fdp)
+            .expect("add file descriptor proto");
+    }
+}
+
+async fn file_descriptor_set_by_filename(
+    filename: &str,
+    pool: &mut DescriptorPool,
+    client: &mut ServerReflectionClient<Client<HttpsConnector<HttpConnector>, BoxBody>>,
+) {
+    // We already fetched this file
+    if let Some(_) = pool.get_file_by_name(filename) {
+        return;
+    }
+
+    let response =
+        send_reflection_request(client, MessageRequest::FileByFilename(filename.into())).await;
+    let file_descriptor_response = match response {
+        Ok(MessageResponse::FileDescriptorResponse(resp)) => resp,
+        Ok(_) => {
+            panic!("Expected a FileDescriptorResponse variant")
+        }
+        Err(e) => {
+            warn!("Error fetching file descriptor for {}: {}", filename, e);
+            return;
+        }
+    };
+
+    for fd in file_descriptor_response.file_descriptor_proto {
+        let fdp = FileDescriptorProto::decode(fd.deref()).unwrap();
+        pool.add_file_descriptor_proto(fdp)
+            .expect("add file descriptor proto");
+    }
+}
+
+async fn send_reflection_request(
+    client: &mut ServerReflectionClient<Client<HttpsConnector<HttpConnector>, BoxBody>>,
+    message: MessageRequest,
+) -> Result<MessageResponse, String> {
+    let reflection_request = ServerReflectionRequest {
+        host: "".into(), // Doesn't matter
+        message_request: Some(message),
+    };
+
+    let request = Request::new(tokio_stream::once(reflection_request));
+
+    client
+        .server_reflection_info(request)
+        .await
+        .map_err(|e| match e.code() {
+            tonic::Code::Unavailable => "Failed to connect to endpoint".to_string(),
+            tonic::Code::Unauthenticated => "Authentication failed".to_string(),
+            tonic::Code::DeadlineExceeded => "Deadline exceeded".to_string(),
+            _ => e.to_string(),
+        })?
+        .into_inner()
+        .next()
+        .await
+        .expect("steamed response")
+        .map_err(|e| e.to_string())?
+        .message_response
+        .ok_or("No reflection response".to_string())
+}
+
+pub fn method_desc_to_path(md: &MethodDescriptor) -> PathAndQuery {
+    let full_name = md.full_name();
+    let (namespace, method_name) = full_name
+        .rsplit_once('.')
+        .ok_or_else(|| anyhow!("invalid method path"))
+        .expect("invalid method path");
+    PathAndQuery::from_str(&format!("/{}/{}", namespace, method_name)).expect("invalid method path")
+}

src-tauri/migrations/20240203164833_grpc.sql

@@ -0,0 +1,68 @@
+CREATE TABLE grpc_requests
+(
+    id                  TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model               TEXT     DEFAULT 'grpc_request'                         NOT NULL,
+    workspace_id        TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    folder_id           TEXT                                                    NULL
+        REFERENCES folders
+            ON DELETE CASCADE,
+    created_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at          DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    name                TEXT                                                    NOT NULL,
+    sort_priority       REAL                                                    NOT NULL,
+    url                 TEXT                                                    NOT NULL,
+    service             TEXT                                                    NULL,
+    method              TEXT                                                    NULL,
+    message             TEXT                                                    NOT NULL,
+    authentication      TEXT     DEFAULT '{}'                                   NOT NULL,
+    authentication_type TEXT                                                    NULL,
+    metadata            TEXT     DEFAULT '[]'                                   NOT NULL
+);
+
+CREATE TABLE grpc_connections
+(
+    id           TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model        TEXT     DEFAULT 'grpc_connection'                      NOT NULL,
+    workspace_id TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id   TEXT                                                    NOT NULL
+        REFERENCES grpc_requests
+            ON DELETE CASCADE,
+    created_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at   DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    url          TEXT                                                    NOT NULL,
+    service      TEXT                                                    NOT NULL,
+    method       TEXT                                                    NOT NULL,
+    status       INTEGER  DEFAULT -1                                     NOT NULL,
+    error        TEXT                                                    NULL,
+    elapsed      INTEGER  DEFAULT 0                                      NOT NULL,
+    trailers     TEXT     DEFAULT '{}'                                   NOT NULL
+);
+
+CREATE TABLE grpc_events
+(
+    id            TEXT                                                    NOT NULL
+        PRIMARY KEY,
+    model         TEXT     DEFAULT 'grpc_event'                           NOT NULL,
+    workspace_id  TEXT                                                    NOT NULL
+        REFERENCES workspaces
+            ON DELETE CASCADE,
+    request_id    TEXT                                                    NOT NULL
+        REFERENCES grpc_requests
+            ON DELETE CASCADE,
+    connection_id TEXT                                                    NOT NULL
+        REFERENCES grpc_connections
+            ON DELETE CASCADE,
+    created_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    updated_at    DATETIME DEFAULT (STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')) NOT NULL,
+    metadata      TEXT     DEFAULT '{}'                                   NOT NULL,
+    event_type    TEXT                                                    NOT NULL,
+    status        INTEGER                                                 NULL,
+    error         TEXT                                                    NULL,
+    content       TEXT                                                    NOT NULL
+);

src-tauri/plugins/filter-jsonpath/index.mjs

@@ -1781,7 +1781,7 @@ Expecting ` + se.join(", ") + ", got '" + (this.terminals_[w] || w) + "'" : ie =
               var a = this._nodes;
               return this.initialize(), a;
             }
-          }, E = function() {
+          }, E = /* @__PURE__ */ function() {
             var a = {
               EOF: 1,
               parseError: function(m, s) {

src-tauri/plugins/importer-yaak/index.mjs

@@ -5,7 +5,7 @@ function u(r) {
   } catch {
     return;
   }
-  if (t(e) && e.yaakSchema === 1)
+  if (t(e) && "yaakSchema" in e && (e.yaakSchema === 1 && (e.resources.httpRequests = e.resources.requests, e.yaakSchema = 2), e.yaakSchema === 2))
     return { resources: e.resources };
 }
 function t(r) {

src-tauri/src/analytics.rs

@@ -1,21 +1,26 @@
+use std::fmt::Display;
+
 use log::{debug, warn};
 use serde::{Deserialize, Serialize};
 use serde_json::json;
-use sqlx::{Pool, Sqlite};
 use sqlx::types::JsonValue;
-use tauri::{AppHandle, Manager, State};
-use tokio::sync::Mutex;
+use tauri::{AppHandle, Manager};
 
-use crate::{is_dev, models};
+use crate::is_dev;
+use crate::models::{generate_id, get_key_value_int, get_key_value_string, set_key_value_int, set_key_value_string};
 
 // serializable
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Debug)]
+#[serde(rename_all = "snake_case")]
 pub enum AnalyticsResource {
     App,
     CookieJar,
     Dialog,
     Environment,
     Folder,
+    GrpcConnection,
+    GrpcEvent,
+    GrpcRequest,
     HttpRequest,
     HttpResponse,
     KeyValue,
@@ -24,25 +29,26 @@ pub enum AnalyticsResource {
 }
 
 impl AnalyticsResource {
-    pub fn from_str(s: &str) -> Option<AnalyticsResource> {
-        match s {
-            "App" => Some(AnalyticsResource::App),
-            "Dialog" => Some(AnalyticsResource::Dialog),
-            "CookieJar" => Some(AnalyticsResource::CookieJar),
-            "Environment" => Some(AnalyticsResource::Environment),
-            "Folder" => Some(AnalyticsResource::Folder),
-            "HttpRequest" => Some(AnalyticsResource::HttpRequest),
-            "HttpResponse" => Some(AnalyticsResource::HttpResponse),
-            "KeyValue" => Some(AnalyticsResource::KeyValue),
-            "Sidebar" => Some(AnalyticsResource::Sidebar),
-            "Workspace" => Some(AnalyticsResource::Workspace),
-            _ => None,
-        }
+    pub fn from_str(s: &str) -> serde_json::Result<AnalyticsResource> {
+        return serde_json::from_str(format!("\"{s}\"").as_str());
     }
 }
 
-#[derive(Serialize, Deserialize)]
+impl Display for AnalyticsResource {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            serde_json::to_string(self).unwrap().replace("\"", "")
+        )
+    }
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+#[serde(rename_all = "snake_case")]
 pub enum AnalyticsAction {
+    Cancel,
+    Commit,
     Create,
     Delete,
     DeleteMany,
@@ -61,60 +67,18 @@ pub enum AnalyticsAction {
 }
 
 impl AnalyticsAction {
-    pub fn from_str(s: &str) -> Option<AnalyticsAction> {
-        match s {
-            "Create" => Some(AnalyticsAction::Create),
-            "Delete" => Some(AnalyticsAction::Delete),
-            "DeleteMany" => Some(AnalyticsAction::DeleteMany),
-            "Duplicate" => Some(AnalyticsAction::Duplicate),
-            "Export" => Some(AnalyticsAction::Export),
-            "Hide" => Some(AnalyticsAction::Hide),
-            "Import" => Some(AnalyticsAction::Import),
-            "Launch" => Some(AnalyticsAction::Launch),
-            "LaunchFirst" => Some(AnalyticsAction::LaunchFirst),
-            "LaunchUpdate" => Some(AnalyticsAction::LaunchUpdate),
-            "Send" => Some(AnalyticsAction::Send),
-            "Show" => Some(AnalyticsAction::Show),
-            "Toggle" => Some(AnalyticsAction::Toggle),
-            "Update" => Some(AnalyticsAction::Update),
-            "Upsert" => Some(AnalyticsAction::Upsert),
-            _ => None,
-        }
+    pub fn from_str(s: &str) -> serde_json::Result<AnalyticsAction> {
+        return serde_json::from_str(format!("\"{s}\"").as_str());
     }
 }
 
-fn resource_name(resource: AnalyticsResource) -> &'static str {
-    match resource {
-        AnalyticsResource::App => "app",
-        AnalyticsResource::CookieJar => "cookie_jar",
-        AnalyticsResource::Dialog => "dialog",
-        AnalyticsResource::Environment => "environment",
-        AnalyticsResource::Folder => "folder",
-        AnalyticsResource::HttpRequest => "http_request",
-        AnalyticsResource::HttpResponse => "http_response",
-        AnalyticsResource::KeyValue => "key_value",
-        AnalyticsResource::Sidebar => "sidebar",
-        AnalyticsResource::Workspace => "workspace",
-    }
-}
-
-fn action_name(action: AnalyticsAction) -> &'static str {
-    match action {
-        AnalyticsAction::Create => "create",
-        AnalyticsAction::Delete => "delete",
-        AnalyticsAction::DeleteMany => "delete_many",
-        AnalyticsAction::Duplicate => "duplicate",
-        AnalyticsAction::Export => "export",
-        AnalyticsAction::Hide => "hide",
-        AnalyticsAction::Import => "import",
-        AnalyticsAction::Launch => "launch",
-        AnalyticsAction::LaunchFirst => "launch_first",
-        AnalyticsAction::LaunchUpdate => "launch_update",
-        AnalyticsAction::Send => "send",
-        AnalyticsAction::Show => "show",
-        AnalyticsAction::Toggle => "toggle",
-        AnalyticsAction::Update => "update",
-        AnalyticsAction::Upsert => "upsert",
+impl Display for AnalyticsAction {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            f,
+            "{}",
+            serde_json::to_string(self).unwrap().replace("\"", "")
+        )
     }
 }
 
@@ -129,14 +93,12 @@ pub struct LaunchEventInfo {
 pub async fn track_launch_event(app_handle: &AppHandle) -> LaunchEventInfo {
     let namespace = "analytics";
     let last_tracked_version_key = "last_tracked_version";
-    let db_instance: State<'_, Mutex<Pool<Sqlite>>> = app_handle.state();
-    let pool = &*db_instance.lock().await;
 
     let mut info = LaunchEventInfo::default();
 
-    info.num_launches = models::get_key_value_int(namespace, "num_launches", 0, pool).await + 1;
+    info.num_launches = get_key_value_int(app_handle, namespace, "num_launches", 0).await + 1;
     info.previous_version =
-        models::get_key_value_string(namespace, last_tracked_version_key, "", pool).await;
+        get_key_value_string(app_handle, namespace, last_tracked_version_key, "").await;
     info.current_version = app_handle.package_info().version.to_string();
 
     if info.previous_version.is_empty() {
@@ -167,19 +129,18 @@ pub async fn track_launch_event(app_handle: &AppHandle) -> LaunchEventInfo {
         AnalyticsAction::Launch,
         Some(json!({ "num_launches": info.num_launches })),
     )
-        .await;
-
+    .await;
 
     // Update key values
 
-    models::set_key_value_string(
+    set_key_value_string(
+        app_handle,
         namespace,
         last_tracked_version_key,
         info.current_version.as_str(),
-        pool,
     )
     .await;
-    models::set_key_value_int(namespace, "num_launches", info.num_launches, pool).await;
+    set_key_value_int(app_handle, namespace, "num_launches", info.num_launches).await;
 
     info
 }
@@ -190,7 +151,8 @@ pub async fn track_event(
     action: AnalyticsAction,
     attributes: Option<JsonValue>,
 ) {
-    let event = format!("{}.{}", resource_name(resource), action_name(action));
+    let id = get_id(app_handle).await;
+    let event = format!("{}.{}", resource, action);
     let attributes_json = attributes.unwrap_or("{}".to_string().into()).to_string();
     let info = app_handle.package_info();
     let tz = datetime::sys_timezone().unwrap_or("unknown".to_string());
@@ -203,6 +165,7 @@ pub async fn track_event(
         false => "https://t.yaak.app",
     };
     let params = vec![
+        ("u", id),
         ("e", event.clone()),
         ("a", attributes_json.clone()),
         ("id", site.to_string()),
@@ -219,7 +182,7 @@ pub async fn track_event(
 
     // Disable analytics actual sending in dev
     if is_dev() {
-        debug!("track: {} {}", event, attributes_json);
+        debug!("track: {} {} {:?}", event, attributes_json, params);
         return;
     }
 
@@ -265,3 +228,14 @@ fn get_window_size(app_handle: &AppHandle) -> String {
         (height / 100.0).round() * 100.0
     )
 }
+
+async fn get_id(app_handle: &AppHandle) -> String {
+    let id = get_key_value_string(app_handle, "analytics", "id", "").await;
+    if id.is_empty() {
+        let new_id = generate_id(None);
+        set_key_value_string(app_handle, "analytics", "id", new_id.as_str()).await;
+        new_id
+    } else {
+        id
+    }
+}

src-tauri/src/grpc.rs

@@ -0,0 +1,16 @@
+use std::collections::HashMap;
+
+use KeyAndValueRef::{Ascii, Binary};
+
+use grpc::{KeyAndValueRef, MetadataMap};
+
+pub fn metadata_to_map(metadata: MetadataMap) -> HashMap<String, String> {
+    let mut entries = HashMap::new();
+    for r in metadata.iter() {
+        match r {
+            Ascii(k, v) => entries.insert(k.to_string(), v.to_str().unwrap().to_string()),
+            Binary(k, v) => entries.insert(k.to_string(), format!("{:?}", v)),
+        };
+    }
+    entries
+}

src-tauri/src/http.rs

@@ -1,5 +1,5 @@
-use std::fs::{create_dir_all, File};
 use std::fs;
+use std::fs::{create_dir_all, File};
 use std::io::Write;
 use std::path::PathBuf;
 use std::str::FromStr;
@@ -12,23 +12,24 @@ use http::header::{ACCEPT, USER_AGENT};
 use log::{error, info, warn};
 use reqwest::{multipart, Url};
 use reqwest::redirect::Policy;
-use sqlx::{Pool, Sqlite};
 use sqlx::types::{Json, JsonValue};
-use tauri::{AppHandle, Wry};
+use tauri::{Manager, Window};
+use tokio::sync::oneshot;
+use tokio::sync::watch::{Receiver};
 
-use crate::{emit_side_effect, models, render, response_err};
+use crate::{models, render, response_err};
 
 pub async fn send_http_request(
+    window: &Window,
     request: models::HttpRequest,
     response: &models::HttpResponse,
     environment: Option<models::Environment>,
     cookie_jar: Option<models::CookieJar>,
-    app_handle: &AppHandle<Wry>,
-    pool: &Pool<Sqlite>,
     download_path: Option<PathBuf>,
+    cancel_rx: &mut Receiver<bool>,
 ) -> Result<models::HttpResponse, String> {
     let environment_ref = environment.as_ref();
-    let workspace = models::get_workspace(&request.workspace_id, pool)
+    let workspace = models::get_workspace(window, &request.workspace_id)
         .await
         .expect("Failed to get Workspace");
 
@@ -82,19 +83,25 @@ pub async fn send_http_request(
         ));
     }
 
-    // .use_rustls_tls() // TODO: Make this configurable (maybe)
     let client = client_builder.build().expect("Failed to build client");
 
-    let url = match Url::from_str(url_string.as_str()) {
+    let uri = match http::Uri::from_str(url_string.as_str()) {
         Ok(u) => u,
         Err(e) => {
-            return response_err(response, e.to_string(), app_handle, pool).await;
+            return response_err(response, e.to_string(), window).await;
+        }
+    };
+    // Yes, we're parsing both URI and URL because they could return different errors
+    let url = match Url::from_str(uri.to_string().as_str()) {
+        Ok(u) => u,
+        Err(e) => {
+            return response_err(response, e.to_string(), window).await;
         }
     };
 
     let m = Method::from_bytes(request.method.to_uppercase().as_bytes())
         .expect("Failed to create method");
-    let mut request_builder = client.request(m, url.clone());
+    let mut request_builder = client.request(m, url);
 
     let mut headers = HeaderMap::new();
     headers.insert(USER_AGENT, HeaderValue::from_static("yaak"));
@@ -293,12 +300,24 @@ pub async fn send_http_request(
     let sendable_req = match request_builder.build() {
         Ok(r) => r,
         Err(e) => {
-            return response_err(response, e.to_string(), app_handle, pool).await;
+            return response_err(response, e.to_string(), window).await;
         }
     };
 
     let start = std::time::Instant::now();
-    let raw_response = client.execute(sendable_req).await;
+
+    let (resp_tx, resp_rx) = oneshot::channel();
+    
+    tokio::spawn(async move {
+        let _ = resp_tx.send(client.execute(sendable_req).await);
+    });
+    
+    let raw_response = tokio::select! {
+        Ok(r) = resp_rx => {r}
+        _ = cancel_rx.changed() => {
+            return response_err(response, "Request was cancelled".to_string(), window).await;
+        }
+    };
 
     match raw_response {
         Ok(v) => {
@@ -339,7 +358,7 @@ pub async fn send_http_request(
 
             {
                 // Write body to FS
-                let dir = app_handle.path_resolver().app_data_dir().unwrap();
+                let dir = window.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.is_empty() {
@@ -362,12 +381,9 @@ pub async fn send_http_request(
                 );
             }
 
-            response = models::update_response_if_id(&response, pool)
+            response = models::update_response_if_id(window, &response)
                 .await
                 .expect("Failed to update response");
-            if !request.id.is_empty() {
-                emit_side_effect(app_handle, "updated_model", &response);
-            }
 
             // Copy response to download path, if specified
             match (download_path, response.body_path.clone()) {
@@ -397,18 +413,13 @@ pub async fn send_http_request(
                         .collect::<Vec<_>>(),
                 );
                 cookie_jar.cookies = json_cookies;
-                match models::upsert_cookie_jar(pool, &cookie_jar).await {
-                    Ok(updated_jar) => {
-                        emit_side_effect(app_handle, "updated_model", &updated_jar);
-                    }
-                    Err(e) => {
-                        error!("Failed to update cookie jar: {}", e);
-                    }
+                if let Err(e) = models::upsert_cookie_jar(window, &cookie_jar).await {
+                    error!("Failed to update cookie jar: {}", e);
                 };
             }
 
             Ok(response)
         }
-        Err(e) => response_err(response, e.to_string(), app_handle, pool).await,
+        Err(e) => response_err(response, e.to_string(), window).await,
     }
 }

src-tauri/src/plugin.rs

@@ -12,7 +12,7 @@ use serde::{Deserialize, Serialize};
 use serde_json::json;
 use tauri::AppHandle;
 
-use crate::models::{Environment, Folder, HttpRequest, Workspace};
+use crate::models::{WorkspaceExportResources};
 
 #[derive(Default, Debug, Deserialize, Serialize)]
 pub struct FilterResult {
@@ -21,15 +21,7 @@ pub struct FilterResult {
 
 #[derive(Default, Debug, Deserialize, Serialize)]
 pub struct ImportResult {
-    pub resources: ImportResources,
-}
-
-#[derive(Default, Debug, Deserialize, Serialize)]
-pub struct ImportResources {
-    pub workspaces: Vec<Workspace>,
-    pub environments: Vec<Environment>,
-    pub folders: Vec<Folder>,
-    pub requests: Vec<HttpRequest>,
+    pub resources: WorkspaceExportResources,
 }
 
 pub async fn run_plugin_filter(

src-tauri/src/updates.rs

@@ -1,8 +1,8 @@
 use std::time::SystemTime;
 
 use log::info;
-use tauri::{AppHandle, updater, Window, Wry};
 use tauri::api::dialog;
+use tauri::{updater, AppHandle, Window};
 
 use crate::is_dev;
 
@@ -27,14 +27,17 @@ impl YaakUpdater {
     }
     pub async fn force_check(
         &mut self,
-        app_handle: &AppHandle<Wry>,
+        app_handle: &AppHandle,
         mode: UpdateMode,
     ) -> Result<bool, updater::Error> {
         self.last_update_check = SystemTime::now();
 
         let update_mode = get_update_mode_str(mode);
         let enabled = !is_dev();
-        info!("Checking for updates mode={} enabled={}", update_mode, enabled);
+        info!(
+            "Checking for updates mode={} enabled={}",
+            update_mode, enabled
+        );
 
         if !enabled {
             return Ok(false);
@@ -89,10 +92,11 @@ impl YaakUpdater {
     }
     pub async fn check(
         &mut self,
-        app_handle: &AppHandle<Wry>,
+        app_handle: &AppHandle,
         mode: UpdateMode,
     ) -> Result<bool, updater::Error> {
-        let ignore_check = self.last_update_check.elapsed().unwrap().as_secs() < MAX_UPDATE_CHECK_SECONDS;
+        let ignore_check =
+            self.last_update_check.elapsed().unwrap().as_secs() < MAX_UPDATE_CHECK_SECONDS;
         if ignore_check {
             return Ok(false);
         }

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Yaak",
-    "version": "2024.2.0"
+    "version": "2024.3.0"
   },
   "tauri": {
     "windows": [],
@@ -32,7 +32,13 @@
       },
       "shell": {
         "all": false,
-        "open": true
+        "open": true,
+        "sidecar": true,
+        "scope": [
+          { "name": "protoc", "sidecar": true,
+            "args": true
+          }
+        ]
       },
       "window": {
         "close": true,
@@ -47,13 +53,18 @@
         "all": false,
         "open": true,
         "save": true
+      },
+      "path": {
+        "all": true
       }
     },
     "bundle": {
       "active": true,
       "category": "DeveloperTool",
       "copyright": "",
-      "externalBin": [],
+      "externalBin": [
+        "protoc-vendored/protoc"
+      ],
       "icon": [
         "icons/release/32x32.png",
         "icons/release/128x128.png",

src-web/components/AppRouter.tsx

@@ -1,43 +1,42 @@
-import { createBrowserRouter, Navigate, Outlet, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
-import { useRecentRequests } from '../hooks/useRecentRequests';
-import { useRequests } from '../hooks/useRequests';
-import { GlobalHooks } from './GlobalHooks';
-import Workspace from './Workspace';
-import Workspaces from './Workspaces';
 import { DialogProvider } from './DialogContext';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
+import { GlobalHooks } from './GlobalHooks';
 import RouteError from './RouteError';
+import Workspace from './Workspace';
+import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 
 const router = createBrowserRouter([
   {
     path: '/',
     errorElement: <RouteError />,
-    element: <Layout />,
+    element: <DefaultLayout />,
     children: [
       {
         path: '/',
-        element: <Navigate to={routePaths.workspaces()} replace={true} />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspaces(),
-        element: <Workspaces />,
+        element: <RedirectToLatestWorkspace />,
       },
       {
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
-          environmentId: ':environmentId',
         }),
-        element: <WorkspaceOrRedirect />,
+        element: <Workspace />,
       },
       {
         path: routePaths.request({
           workspaceId: ':workspaceId',
-          environmentId: ':environmentId',
           requestId: ':requestId',
         }),
         element: <Workspace />,
       },
+      {
+        path: '/workspaces/:workspaceId/environments/:environmentId/requests/:requestId',
+        element: <RedirectLegacyEnvironmentURLs />,
+      },
     ],
   },
 ]);
@@ -46,32 +45,32 @@ export function AppRouter() {
   return <RouterProvider router={router} />;
 }
 
-function WorkspaceOrRedirect() {
-  const recentRequests = useRecentRequests();
-  const activeEnvironmentId = useActiveEnvironmentId();
-  const requests = useRequests();
-  const request = requests.find((r) => r.id === recentRequests[0]);
+function RedirectLegacyEnvironmentURLs() {
   const routes = useAppRoutes();
+  const {
+    requestId,
+    environmentId: rawEnvironmentId,
+    workspaceId,
+  } = useParams<{
+    requestId?: string;
+    workspaceId?: string;
+    environmentId?: string;
+  }>();
+  const environmentId = rawEnvironmentId === '__default__' ? undefined : rawEnvironmentId;
 
-  if (request === undefined) {
-    return <Workspace />;
+  let to = '/';
+  if (workspaceId != null && requestId != null) {
+    to = routes.paths.request({ workspaceId, environmentId, requestId });
+  } else if (workspaceId != null) {
+    to = routes.paths.workspace({ workspaceId, environmentId });
+  } else {
+    to = routes.paths.workspaces();
   }
 
-  const { id: requestId, workspaceId } = request;
-  const environmentId = activeEnvironmentId ?? undefined;
-
-  return (
-    <Navigate
-      to={routes.paths.request({
-        workspaceId,
-        environmentId,
-        requestId,
-      })}
-    />
-  );
+  return <Navigate to={to} />;
 }
 
-function Layout() {
+function DefaultLayout() {
   return (
     <DialogProvider>
       <Outlet />

src-web/components/BasicAuth.tsx

@@ -1,43 +1,64 @@
-import { useUpdateRequest } from '../hooks/useUpdateRequest';
-import type { HttpRequest } from '../lib/models';
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
+import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
+import type { GrpcRequest, HttpRequest } from '../lib/models';
 import { Input } from './core/Input';
 import { VStack } from './core/Stacks';
 
-interface Props {
-  requestId: string;
-  authentication: HttpRequest['authentication'];
+interface Props<T> {
+  request: T;
 }
 
-export function BasicAuth({ requestId, authentication }: Props) {
-  const updateRequest = useUpdateRequest(requestId);
+export function BasicAuth<T extends HttpRequest | GrpcRequest>({ request }: Props<T>) {
+  const updateHttpRequest = useUpdateHttpRequest(request.id);
+  const updateGrpcRequest = useUpdateGrpcRequest(request.id);
 
   return (
     <VStack className="my-2" space={2}>
       <Input
         useTemplating
+        autocompleteVariables
+        forceUpdateKey={request.id}
+        placeholder="username"
         label="Username"
         name="username"
         size="sm"
-        defaultValue={`${authentication.username}`}
+        defaultValue={`${request.authentication.username}`}
         onChange={(username: string) => {
-          updateRequest.mutate((r) => ({
-            ...r,
-            authentication: { password: r.authentication.password, username },
-          }));
+          if (request.model === 'http_request') {
+            updateHttpRequest.mutate((r) => ({
+              ...r,
+              authentication: { password: r.authentication.password, username },
+            }));
+          } else {
+            updateGrpcRequest.mutate((r) => ({
+              ...r,
+              authentication: { password: r.authentication.password, username },
+            }));
+          }
         }}
       />
       <Input
         useTemplating
+        autocompleteVariables
+        forceUpdateKey={request?.id}
+        placeholder="password"
         label="Password"
         name="password"
         size="sm"
         type="password"
-        defaultValue={`${authentication.password}`}
+        defaultValue={`${request.authentication.password}`}
         onChange={(password: string) => {
-          updateRequest.mutate((r) => ({
-            ...r,
-            authentication: { username: r.authentication.username, password },
-          }));
+          if (request.model === 'http_request') {
+            updateHttpRequest.mutate((r) => ({
+              ...r,
+              authentication: { username: r.authentication.username, password },
+            }));
+          } else {
+            updateGrpcRequest.mutate((r) => ({
+              ...r,
+              authentication: { username: r.authentication.username, password },
+            }));
+          }
         }}
       />
     </VStack>

src-web/components/BearerAuth.tsx

@@ -1,31 +1,40 @@
-import { useUpdateRequest } from '../hooks/useUpdateRequest';
-import type { HttpRequest } from '../lib/models';
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
+import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
+import type { GrpcRequest, HttpRequest } from '../lib/models';
 import { Input } from './core/Input';
 import { VStack } from './core/Stacks';
 
-interface Props {
-  requestId: string;
-  authentication: HttpRequest['authentication'];
+interface Props<T> {
+  request: T;
 }
 
-export function BearerAuth({ requestId, authentication }: Props) {
-  const updateRequest = useUpdateRequest(requestId);
+export function BearerAuth<T extends HttpRequest | GrpcRequest>({ request }: Props<T>) {
+  const updateHttpRequest = useUpdateHttpRequest(request?.id ?? null);
+  const updateGrpcRequest = useUpdateGrpcRequest(request?.id ?? null);
 
   return (
     <VStack className="my-2" space={2}>
       <Input
         useTemplating
         autocompleteVariables
+        placeholder="token"
         type="password"
         label="Token"
         name="token"
         size="sm"
-        defaultValue={`${authentication.token}`}
+        defaultValue={`${request.authentication.token}`}
         onChange={(token: string) => {
-          updateRequest.mutate((r) => ({
-            ...r,
-            authentication: { token },
-          }));
+          if (request.model === 'http_request') {
+            updateHttpRequest.mutate((r) => ({
+              ...r,
+              authentication: { token },
+            }));
+          } else {
+            updateGrpcRequest.mutate((r) => ({
+              ...r,
+              authentication: { token },
+            }));
+          }
         }}
       />
     </VStack>

src-web/components/CookieDropdown.tsx

@@ -61,6 +61,7 @@ export function CookieDropdown() {
                     ),
                     name: 'name',
                     label: 'Name',
+                    placeholder: 'New name',
                     defaultValue: activeCookieJar?.name,
                   });
                   updateCookieJar.mutate({ name });

src-web/components/CreateDropdown.tsx

@@ -0,0 +1,18 @@
+import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
+import type { DropdownProps } from './core/Dropdown';
+import { Dropdown } from './core/Dropdown';
+
+interface Props {
+  hideFolder?: boolean;
+  children: DropdownProps['children'];
+  openOnHotKeyAction?: DropdownProps['openOnHotKeyAction'];
+}
+
+export function CreateDropdown({ hideFolder, children, openOnHotKeyAction }: Props) {
+  const items = useCreateDropdownItems({ hideFolder, hideIcons: true });
+  return (
+    <Dropdown openOnHotKeyAction={openOnHotKeyAction} items={items}>
+      {children}
+    </Dropdown>
+  );
+}

src-web/components/DialogContext.tsx

@@ -6,7 +6,7 @@ import { Dialog } from './core/Dialog';
 type DialogEntry = {
   id: string;
   render: ({ hide }: { hide: () => void }) => React.ReactNode;
-} & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className' | 'size'>;
+} & Pick<DialogProps, 'title' | 'description' | 'hideX' | 'className' | 'size' | 'noPadding'>;
 
 interface State {
   dialogs: DialogEntry[];
@@ -20,14 +20,14 @@ interface Actions {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DialogContext = createContext<State>({} as any);
+const DialogContext = createContext<State>({} as State);
 
 export const DialogProvider = ({ children }: { children: React.ReactNode }) => {
   const [dialogs, setDialogs] = useState<State['dialogs']>([]);
   const actions = useMemo<Actions>(
     () => ({
       show({ id, ...props }: DialogEntry) {
-        trackEvent('Dialog', 'Show', { id });
+        trackEvent('dialog', 'show', { id });
         setDialogs((a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
       },
       toggle({ id, ...props }: DialogEntry) {

src-web/components/EmptyStateText.tsx

@@ -1,12 +1,19 @@
+import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
+  className?: string;
 }
 
-export function EmptyStateText({ children }: Props) {
+export function EmptyStateText({ children, className }: Props) {
   return (
-    <div className="rounded-lg border border-dashed border-highlight h-full text-gray-400 flex items-center justify-center">
+    <div
+      className={classNames(
+        className,
+        'rounded-lg border border-dashed border-highlight h-full py-2 text-gray-400 flex items-center justify-center',
+      )}
+    >
       {children}
     </div>
   );

src-web/components/EnvironmentActionsDropdown.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { memo, useCallback, useMemo } from 'react';
 import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useEnvironments } from '../hooks/useEnvironments';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
@@ -22,14 +21,15 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
 }: Props) {
   const environments = useEnvironments();
   const activeEnvironment = useActiveEnvironment();
-  const createEnvironment = useCreateEnvironment();
   const dialog = useDialog();
   const routes = useAppRoutes();
 
   const showEnvironmentDialog = useCallback(() => {
     dialog.toggle({
       id: 'environment-editor',
-      title: 'Manage Environments',
+      noPadding: true,
+      size: 'lg',
+      className: 'h-[80vh]',
       render: () => <EnvironmentEditDialog initialEnvironment={activeEnvironment} />,
     });
   }, [dialog, activeEnvironment]);
@@ -54,28 +54,15 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
       ...((environments.length > 0
         ? [{ type: 'separator', label: 'Environments' }]
         : []) as DropdownItem[]),
-      ...((environments.length > 0
-        ? [
-            {
-              key: 'edit',
-              label: 'Manage Environments',
-              hotKeyAction: 'environmentEditor.toggle',
-              leftSlot: <Icon icon="box" />,
-              onSelect: showEnvironmentDialog,
-            },
-          ]
-        : []) as DropdownItem[]),
       {
-        key: 'new',
-        label: 'New Environment',
-        leftSlot: <Icon icon="plus" />,
-        onSelect: async () => {
-          await createEnvironment.mutateAsync();
-          showEnvironmentDialog();
-        },
+        key: 'edit',
+        label: 'Manage Environments',
+        hotKeyAction: 'environmentEditor.toggle',
+        leftSlot: <Icon icon="box" />,
+        onSelect: showEnvironmentDialog,
       },
     ],
-    [activeEnvironment?.id, createEnvironment, environments, routes, showEnvironmentDialog],
+    [activeEnvironment?.id, environments, routes, showEnvironmentDialog],
   );
 
   return (
@@ -89,7 +76,7 @@ export const EnvironmentActionsDropdown = memo(function EnvironmentActionsDropdo
         )}
         {...buttonProps}
       >
-        {activeEnvironment?.name ?? 'No Environment'}
+        {activeEnvironment?.name ?? 'Environment'}
       </Button>
     </Dropdown>
   );

src-web/components/EnvironmentEditDialog.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { useCallback, useMemo, useState } from 'react';
-import { useWindowSize } from 'react-use';
+import type { ReactNode } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useCreateEnvironment } from '../hooks/useCreateEnvironment';
 import { useDeleteEnvironment } from '../hooks/useDeleteEnvironment';
@@ -10,17 +10,19 @@ import { useUpdateEnvironment } from '../hooks/useUpdateEnvironment';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import type { Environment, Workspace } from '../lib/models';
 import { Button } from './core/Button';
-import type { DropdownItem } from './core/Dropdown';
-import { Dropdown } from './core/Dropdown';
+import { ContextMenu } from './core/Dropdown';
 import type {
   GenericCompletionConfig,
   GenericCompletionOption,
 } from './core/Editor/genericCompletion';
+import { Heading } from './core/Heading';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import type { PairEditorProps } from './core/PairEditor';
 import { PairEditor } from './core/PairEditor';
+import { Separator } from './core/Separator';
+import { SplitLayout } from './core/SplitLayout';
 import { HStack, VStack } from './core/Stacks';
 
 interface Props {
@@ -35,9 +37,6 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
   const createEnvironment = useCreateEnvironment();
   const activeWorkspace = useActiveWorkspace();
 
-  const windowSize = useWindowSize();
-  const showSidebar = windowSize.width > 500;
-
   const selectedEnvironment = useMemo(
     () => environments.find((e) => e.id === selectedEnvironmentId) ?? null,
     [environments, selectedEnvironmentId],
@@ -49,58 +48,74 @@ export const EnvironmentEditDialog = function ({ initialEnvironment }: Props) {
   };
 
   return (
-    <div
-      className={classNames(
-        'h-full pt-1 grid gap-x-8 grid-rows-[minmax(0,1fr)]',
-        showSidebar ? 'grid-cols-[auto_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)]',
-      )}
-    >
-      {showSidebar && (
-        <aside className="grid grid-rows-[minmax(0,1fr)_auto] gap-y-0.5 h-full max-w-[250px] pr-3 border-r border-gray-100 -ml-2 pb-4">
-          <div className="min-w-0 h-full w-full overflow-y-scroll">
+    <SplitLayout
+      name="env_editor"
+      defaultRatio={0.75}
+      layout="horizontal"
+      className="gap-0"
+      firstSlot={() => (
+        <aside className="w-full min-w-0 pt-2">
+          <div className="min-w-0 h-full overflow-y-auto pt-1">
+            <SidebarButton
+              active={selectedEnvironment?.id == null}
+              onClick={() => setSelectedEnvironmentId(null)}
+              className="group"
+              environment={null}
+              rightSlot={
+                <IconButton
+                  size="sm"
+                  title="Add sub environment"
+                  icon="plusCircle"
+                  iconClassName="text-gray-500 group-hover:text-gray-700"
+                  onClick={handleCreateEnvironment}
+                />
+              }
+            >
+              Global Variables
+            </SidebarButton>
+            {environments.length > 0 && (
+              <div className="px-2">
+                <Separator className="my-3"></Separator>
+              </div>
+            )}
             {environments.map((e) => (
               <SidebarButton
                 key={e.id}
                 active={selectedEnvironment?.id === e.id}
+                environment={e}
                 onClick={() => setSelectedEnvironmentId(e.id)}
               >
                 {e.name}
               </SidebarButton>
             ))}
           </div>
-          <Button
-            size="sm"
-            className="w-full text-center"
-            color="gray"
-            justify="center"
-            onClick={handleCreateEnvironment}
-          >
-            New Environment
-          </Button>
         </aside>
       )}
-      {activeWorkspace != null ? (
-        <EnvironmentEditor environment={selectedEnvironment} workspace={activeWorkspace} />
-      ) : (
-        <div className="flex w-full h-full items-center justify-center text-gray-400 italic">
-          select an environment
-        </div>
-      )}
-    </div>
+      secondSlot={() =>
+        activeWorkspace != null && (
+          <EnvironmentEditor
+            className="pt-2 border-l border-highlight"
+            environment={selectedEnvironment}
+            workspace={activeWorkspace}
+          />
+        )
+      }
+    />
   );
 };
 
 const EnvironmentEditor = function ({
   environment,
   workspace,
+  className,
 }: {
   environment: Environment | null;
   workspace: Workspace;
+  className?: string;
 }) {
   const environments = useEnvironments();
-  const updateEnvironment = useUpdateEnvironment(environment?.id ?? 'n/a');
+  const updateEnvironment = useUpdateEnvironment(environment?.id ?? null);
   const updateWorkspace = useUpdateWorkspace(workspace.id);
-  const deleteEnvironment = useDeleteEnvironment(environment);
   const variables = environment == null ? workspace.variables : environment.variables;
   const handleChange = useCallback<PairEditorProps['onChange']>(
     (variables) => {
@@ -140,43 +155,6 @@ const EnvironmentEditor = function ({
     return { options };
   }, [environments, variables, workspace, environment]);
 
-  const prompt = usePrompt();
-  const items = useMemo<DropdownItem[] | null>(
-    () =>
-      environment == null
-        ? null
-        : [
-            {
-              key: 'rename',
-              label: 'Rename',
-              leftSlot: <Icon icon="pencil" size="sm" />,
-              onSelect: async () => {
-                const name = await prompt({
-                  id: 'rename-environment',
-                  title: 'Rename Environment',
-                  description: (
-                    <>
-                      Enter a new name for <InlineCode>{environment.name}</InlineCode>
-                    </>
-                  ),
-                  name: 'name',
-                  label: 'Name',
-                  defaultValue: environment.name,
-                });
-                updateEnvironment.mutate({ name });
-              },
-            },
-            {
-              key: 'delete',
-              variant: 'danger',
-              label: 'Delete',
-              leftSlot: <Icon icon="trash" size="sm" />,
-              onSelect: () => deleteEnvironment.mutate(),
-            },
-          ],
-    [deleteEnvironment, updateEnvironment, prompt, environment],
-  );
-
   const validateName = useCallback((name: string) => {
     // Empty just means the variable doesn't have a name yet, and is unusable
     if (name === '') return true;
@@ -184,19 +162,11 @@ const EnvironmentEditor = function ({
   }, []);
 
   return (
-    <VStack space={2}>
+    <VStack space={4} className={classNames(className, 'pl-4')}>
       <HStack space={2} className="justify-between">
-        <h1 className="text-xl">{environment?.name ?? 'Base Environment'}</h1>
-        {items != null && (
-          <Dropdown items={items}>
-            <IconButton
-              icon="moreVertical"
-              title="Environment Actions"
-              size="sm"
-              className="!h-auto w-8"
-            />
-          </Dropdown>
-        )}
+        <Heading className="w-full flex items-center">
+          <div>{environment?.name ?? 'Global Variables'}</div>
+        </Heading>
       </HStack>
       <PairEditor
         nameAutocomplete={nameAutocomplete}
@@ -217,24 +187,90 @@ function SidebarButton({
   className,
   active,
   onClick,
+  rightSlot,
+  environment,
 }: {
   className?: string;
-  children: string;
+  children: ReactNode;
   active: boolean;
   onClick: () => void;
+  rightSlot?: ReactNode;
+  environment: Environment | null;
 }) {
+  const prompt = usePrompt();
+  const updateEnvironment = useUpdateEnvironment(environment?.id ?? null);
+  const deleteEnvironment = useDeleteEnvironment(environment);
+  const [showContextMenu, setShowContextMenu] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setShowContextMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
   return (
-    <button
-      tabIndex={active ? 0 : -1}
-      onClick={onClick}
-      className={classNames(
-        className,
-        'flex items-center text-sm text-left w-full mb-1 h-xs rounded px-2',
-        'text-gray-600 hocus:text-gray-800 focus:bg-highlightSecondary outline-none',
-        active && '!text-gray-900',
+    <>
+      <div
+        className={classNames(
+          className,
+          'w-full grid grid-cols-[minmax(0,1fr)_auto] items-center',
+          'px-1', // Padding to show focus border
+        )}
+      >
+        <Button
+          color="custom"
+          size="xs"
+          className={classNames(
+            'w-full',
+            active ? 'text-gray-800' : 'text-gray-600 hover:text-gray-700',
+          )}
+          justify="start"
+          onClick={onClick}
+          onContextMenu={handleContextMenu}
+        >
+          {children}
+        </Button>
+        {rightSlot}
+      </div>
+      {environment != null && (
+        <ContextMenu
+          show={showContextMenu}
+          onClose={() => setShowContextMenu(null)}
+          items={[
+            {
+              key: 'rename',
+              label: 'Rename',
+              leftSlot: <Icon icon="pencil" size="sm" />,
+              onSelect: async () => {
+                const name = await prompt({
+                  id: 'rename-environment',
+                  title: 'Rename Environment',
+                  description: (
+                    <>
+                      Enter a new name for <InlineCode>{environment.name}</InlineCode>
+                    </>
+                  ),
+                  name: 'name',
+                  label: 'Name',
+                  placeholder: 'New Name',
+                  defaultValue: environment.name,
+                });
+                updateEnvironment.mutate({ name });
+              },
+            },
+            {
+              key: 'delete',
+              variant: 'danger',
+              label: 'Delete',
+              leftSlot: <Icon icon="trash" size="sm" />,
+              onSelect: () => deleteEnvironment.mutate(),
+            },
+          ]}
+        />
       )}
-    >
-      {children}
-    </button>
+    </>
   );
 }

src-web/components/GlobalHooks.tsx

@@ -3,20 +3,23 @@ import { appWindow } from '@tauri-apps/api/window';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
+import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
+import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
+import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
+import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
+import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
-import { requestsQueryKey } from '../hooks/useRequests';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { responsesQueryKey } from '../hooks/useResponses';
 import { settingsQueryKey } from '../hooks/useSettings';
-import { useSyncWindowTitle } from '../hooks/useSyncWindowTitle';
 import { useSyncAppearance } from '../hooks/useSyncAppearance';
+import { useSyncWindowTitle } from '../hooks/useSyncWindowTitle';
 import { workspacesQueryKey } from '../hooks/useWorkspaces';
 import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
-import type { HttpRequest, HttpResponse, Model, Workspace } from '../lib/models';
+import type { Model } from '../lib/models';
 import { modelsEq } from '../lib/models';
 import { setPathname } from '../lib/persistPathname';
 
@@ -42,43 +45,18 @@ export function GlobalHooks() {
     setPathname(location.pathname).catch(console.error);
   }, [location.pathname]);
 
-  useListenToTauriEvent<Model>('created_model', ({ payload, windowLabel }) => {
-    if (shouldIgnoreEvent(payload, windowLabel)) return;
-
+  useListenToTauriEvent<Model>('upserted_model', ({ payload, windowLabel }) => {
     const queryKey =
       payload.model === 'http_request'
-        ? requestsQueryKey(payload)
+        ? httpRequestsQueryKey(payload)
         : payload.model === 'http_response'
-        ? responsesQueryKey(payload)
-        : payload.model === 'workspace'
-        ? workspacesQueryKey(payload)
-        : payload.model === 'key_value'
-        ? keyValueQueryKey(payload)
-        : payload.model === 'settings'
-        ? settingsQueryKey()
-        : payload.model === 'cookie_jar'
-        ? cookieJarsQueryKey(payload)
-        : null;
-
-    if (queryKey === null) {
-      console.log('Unrecognized created model:', payload);
-      return;
-    }
-
-    if (!shouldIgnoreModel(payload)) {
-      // Order newest first
-      queryClient.setQueryData<Model[]>(queryKey, (values) => [payload, ...(values ?? [])]);
-    }
-  });
-
-  useListenToTauriEvent<Model>('updated_model', ({ payload, windowLabel }) => {
-    if (shouldIgnoreEvent(payload, windowLabel)) return;
-
-    const queryKey =
-      payload.model === 'http_request'
-        ? requestsQueryKey(payload)
-        : payload.model === 'http_response'
-        ? responsesQueryKey(payload)
+        ? httpResponsesQueryKey(payload)
+        : payload.model === 'grpc_connection'
+        ? grpcConnectionsQueryKey(payload)
+        : payload.model === 'grpc_event'
+        ? grpcEventsQueryKey(payload)
+        : payload.model === 'grpc_request'
+        ? grpcRequestsQueryKey(payload)
         : payload.model === 'workspace'
         ? workspacesQueryKey(payload)
         : payload.model === 'key_value'
@@ -94,30 +72,43 @@ export function GlobalHooks() {
       return;
     }
 
-    if (payload.model === 'http_request') {
+    if (payload.model === 'http_request' && windowLabel !== appWindow.label) {
       wasUpdatedExternally(payload.id);
     }
 
-    if (!shouldIgnoreModel(payload)) {
-      console.time('set query date');
-      queryClient.setQueryData<Model[]>(queryKey, (values) =>
-        values?.map((v) => (modelsEq(v, payload) ? payload : v)),
-      );
-      console.timeEnd('set query date');
-    }
-  });
-
-  useListenToTauriEvent<Model>('deleted_model', ({ payload, windowLabel }) => {
-    if (shouldIgnoreEvent(payload, windowLabel)) return;
+    const pushToFront = (['http_response', 'grpc_connection'] as Model['model'][]).includes(
+      payload.model,
+    );
 
     if (shouldIgnoreModel(payload)) return;
 
+    queryClient.setQueryData<Model[]>(queryKey, (values = []) => {
+      const index = values.findIndex((v) => modelsEq(v, payload)) ?? -1;
+      if (index >= 0) {
+        // console.log('UPDATED', payload);
+        return [...values.slice(0, index), payload, ...values.slice(index + 1)];
+      } else {
+        // console.log('CREATED', payload);
+        return pushToFront ? [payload, ...(values ?? [])] : [...(values ?? []), payload];
+      }
+    });
+  });
+
+  useListenToTauriEvent<Model>('deleted_model', ({ payload }) => {
+    if (shouldIgnoreModel(payload)) return;
+
     if (payload.model === 'workspace') {
-      queryClient.setQueryData<Workspace[]>(workspacesQueryKey(), removeById(payload));
+      queryClient.setQueryData(workspacesQueryKey(), removeById(payload));
     } else if (payload.model === 'http_request') {
-      queryClient.setQueryData<HttpRequest[]>(requestsQueryKey(payload), removeById(payload));
+      queryClient.setQueryData(httpRequestsQueryKey(payload), removeById(payload));
     } else if (payload.model === 'http_response') {
-      queryClient.setQueryData<HttpResponse[]>(responsesQueryKey(payload), removeById(payload));
+      queryClient.setQueryData(httpResponsesQueryKey(payload), removeById(payload));
+    } else if (payload.model === 'grpc_request') {
+      queryClient.setQueryData(grpcRequestsQueryKey(payload), removeById(payload));
+    } else if (payload.model === 'grpc_connection') {
+      queryClient.setQueryData(grpcConnectionsQueryKey(payload), removeById(payload));
+    } else if (payload.model === 'grpc_event') {
+      queryClient.setQueryData(grpcEventsQueryKey(payload), removeById(payload));
     } else if (payload.model === 'key_value') {
       queryClient.setQueryData(keyValueQueryKey(payload), undefined);
     } else if (payload.model === 'cookie_jar') {
@@ -149,9 +140,6 @@ function removeById<T extends { id: string }>(model: T) {
   return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id);
 }
 
-const shouldIgnoreEvent = (payload: Model, windowLabel: string) =>
-  windowLabel === appWindow.label && payload.model !== 'http_response';
-
 const shouldIgnoreModel = (payload: Model) => {
   if (payload.model === 'key_value') {
     return payload.namespace === NAMESPACE_NO_SYNC;

src-web/components/GraphQLEditor.tsx

@@ -38,7 +38,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
       const operationName = p.operationName;
       return { query, variables, operationName };
     } catch (err) {
-      return { query: 'failed to parse' };
+      return { query: '' };
     }
   }, [defaultValue]);
 
@@ -72,7 +72,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
   const dialog = useDialog();
 
   return (
-    <div className="pb-2 h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto]">
       <Editor
         contentType="application/graphql"
         defaultValue={query ?? ''}
@@ -124,19 +124,22 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         }
         {...extraEditorProps}
       />
-      <Separator variant="primary" />
-      <p className="pt-1 text-gray-500 text-sm">Variables</p>
-      <Editor
-        format={tryFormatJson}
-        contentType="application/json"
-        defaultValue={JSON.stringify(variables, null, 2)}
-        heightMode="auto"
-        onChange={handleChangeVariables}
-        placeholder="{}"
-        useTemplating
-        autocompleteVariables
-        {...extraEditorProps}
-      />
+      <div className="grid min-h-[5rem]">
+        <Separator variant="primary" className="pb-1">
+          Variables
+        </Separator>
+        <Editor
+          format={tryFormatJson}
+          contentType="application/json"
+          defaultValue={JSON.stringify(variables, null, 2)}
+          heightMode="auto"
+          onChange={handleChangeVariables}
+          placeholder="{}"
+          useTemplating
+          autocompleteVariables
+          {...extraEditorProps}
+        />
+      </div>
     </div>
   );
 }

src-web/components/GrpcConnectionLayout.tsx

@@ -0,0 +1,120 @@
+import classNames from 'classnames';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useGrpc } from '../hooks/useGrpc';
+import { useGrpcConnections } from '../hooks/useGrpcConnections';
+import { useGrpcEvents } from '../hooks/useGrpcEvents';
+import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
+import { Banner } from './core/Banner';
+import { HotKeyList } from './core/HotKeyList';
+import { SplitLayout } from './core/SplitLayout';
+import { GrpcConnectionMessagesPane } from './GrpcConnectionMessagesPane';
+import { GrpcConnectionSetupPane } from './GrpcConnectionSetupPane';
+
+interface Props {
+  style: CSSProperties;
+}
+
+export function GrpcConnectionLayout({ style }: Props) {
+  const activeRequest = useActiveRequest('grpc_request');
+  const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
+  const connections = useGrpcConnections(activeRequest?.id ?? null);
+  const activeConnection = connections[0] ?? null;
+  const messages = useGrpcEvents(activeConnection?.id ?? null);
+  const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);
+  const protoFiles = protoFilesKv.value ?? [];
+  const grpc = useGrpc(activeRequest, activeConnection, protoFiles);
+
+  const services = grpc.reflect.data ?? null;
+  useEffect(() => {
+    if (services == null || activeRequest == null) return;
+    const s = services.find((s) => s.name === activeRequest.service);
+    if (s == null) {
+      updateRequest.mutate({
+        service: services[0]?.name ?? null,
+        method: services[0]?.methods[0]?.name ?? null,
+      });
+      return;
+    }
+
+    const m = s.methods.find((m) => m.name === activeRequest.method);
+    if (m == null) {
+      updateRequest.mutate({ method: s.methods[0]?.name ?? null });
+      return;
+    }
+  }, [activeRequest, services, updateRequest]);
+
+  const activeMethod = useMemo(() => {
+    if (services == null || activeRequest == null) return null;
+
+    const s = services.find((s) => s.name === activeRequest.service);
+    if (s == null) return null;
+    return s.methods.find((m) => m.name === activeRequest.method);
+  }, [activeRequest, services]);
+
+  const methodType:
+    | 'unary'
+    | 'server_streaming'
+    | 'client_streaming'
+    | 'streaming'
+    | 'no-schema'
+    | 'no-method' = useMemo(() => {
+    if (services == null) return 'no-schema';
+    if (activeMethod == null) return 'no-method';
+    if (activeMethod.clientStreaming && activeMethod.serverStreaming) return 'streaming';
+    if (activeMethod.clientStreaming) return 'client_streaming';
+    if (activeMethod.serverStreaming) return 'server_streaming';
+    return 'unary';
+  }, [activeMethod, services]);
+
+  if (activeRequest == null) {
+    return null;
+  }
+
+  return (
+    <SplitLayout
+      name="grpc_layout"
+      className="p-3 gap-1.5"
+      style={style}
+      firstSlot={({ style }) => (
+        <GrpcConnectionSetupPane
+          style={style}
+          activeRequest={activeRequest}
+          protoFiles={protoFiles}
+          methodType={methodType}
+          onGo={grpc.go.mutate}
+          onCommit={grpc.commit.mutate}
+          onCancel={grpc.cancel.mutate}
+          onSend={grpc.send.mutate}
+          services={services ?? null}
+          reflectionError={grpc.reflect.error as string | undefined}
+          reflectionLoading={grpc.reflect.isFetching}
+        />
+      )}
+      secondSlot={({ style }) =>
+        !grpc.go.isLoading && (
+          <div
+            style={style}
+            className={classNames(
+              'max-h-full h-full grid grid-rows-[minmax(0,1fr)] grid-cols-1',
+              'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
+              'shadow shadow-gray-100 dark:shadow-gray-0 relative',
+            )}
+          >
+            {grpc.go.error ? (
+              <Banner color="danger" className="m-2">
+                {grpc.go.error}
+              </Banner>
+            ) : messages.length >= 0 ? (
+              <GrpcConnectionMessagesPane activeRequest={activeRequest} methodType={methodType} />
+            ) : (
+              <HotKeyList hotkeys={['grpc_request.send', 'sidebar.toggle', 'urlBar.focus']} />
+            )}
+          </div>
+        )
+      }
+    />
+  );
+}

src-web/components/GrpcConnectionMessagesPane.tsx

@@ -0,0 +1,212 @@
+import classNames from 'classnames';
+import { format } from 'date-fns';
+import type { CSSProperties } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useGrpcConnections } from '../hooks/useGrpcConnections';
+import { useGrpcEvents } from '../hooks/useGrpcEvents';
+import type { GrpcEvent, GrpcRequest } from '../lib/models';
+import { Icon } from './core/Icon';
+import { JsonAttributeTree } from './core/JsonAttributeTree';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
+import { Separator } from './core/Separator';
+import { SplitLayout } from './core/SplitLayout';
+import { HStack } from './core/Stacks';
+import { EmptyStateText } from './EmptyStateText';
+import { RecentConnectionsDropdown } from './RecentConnectionsDropdown';
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequest: GrpcRequest;
+  methodType:
+    | 'unary'
+    | 'client_streaming'
+    | 'server_streaming'
+    | 'streaming'
+    | 'no-schema'
+    | 'no-method';
+}
+
+export function GrpcConnectionMessagesPane({ style, methodType, activeRequest }: Props) {
+  const [activeEventId, setActiveEventId] = useState<string | null>(null);
+  const connections = useGrpcConnections(activeRequest.id ?? null);
+  const activeConnection = connections[0] ?? null;
+  const events = useGrpcEvents(activeConnection?.id ?? null);
+
+  const activeEvent = useMemo(
+    () => events.find((m) => m.id === activeEventId) ?? null,
+    [activeEventId, events],
+  );
+
+  // Set active message to the first message received if unary
+  useEffect(() => {
+    if (events.length === 0 || activeEvent != null || methodType !== 'unary') {
+      return;
+    }
+    setActiveEventId(events.find((m) => m.eventType === 'server_message')?.id ?? null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [events.length]);
+
+  return (
+    <SplitLayout
+      layout="vertical"
+      style={style}
+      name="grpc_events"
+      defaultRatio={0.4}
+      minHeightPx={20}
+      firstSlot={() =>
+        activeConnection && (
+          <div className="w-full grid grid-rows-[auto_minmax(0,1fr)] items-center">
+            <HStack className="pl-3 mb-1 font-mono" alignItems="center">
+              <HStack alignItems="center" space={2}>
+                <span>{events.length} messages</span>
+                {activeConnection.elapsed === 0 && (
+                  <Icon icon="refresh" size="sm" spin className="text-gray-600" />
+                )}
+              </HStack>
+              <RecentConnectionsDropdown
+                connections={connections}
+                activeConnection={activeConnection}
+                onPinned={() => {
+                  // todo
+                }}
+              />
+            </HStack>
+            <div className="overflow-y-auto h-full">
+              {...events.map((e) => (
+                <EventRow
+                  key={e.id}
+                  event={e}
+                  isActive={e.id === activeEventId}
+                  onClick={() => {
+                    if (e.id === activeEventId) setActiveEventId(null);
+                    else setActiveEventId(e.id);
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        )
+      }
+      secondSlot={
+        activeEvent &&
+        (() => (
+          <div className="grid grid-rows-[auto_minmax(0,1fr)]">
+            <div className="pb-3 px-2">
+              <Separator />
+            </div>
+            <div className="pl-2 overflow-y-auto">
+              {activeEvent.eventType === 'client_message' ||
+              activeEvent.eventType === 'server_message' ? (
+                <>
+                  <div className="mb-2 select-text cursor-text font-semibold">
+                    Message {activeEvent.eventType === 'client_message' ? 'Sent' : 'Received'}
+                  </div>
+                  <JsonAttributeTree attrValue={JSON.parse(activeEvent?.content ?? '{}')} />
+                </>
+              ) : (
+                <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="text-xs font-mono py-1 text-orange-700">
+                        {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={value} />
+                        ))}
+                      </KeyValueRows>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        ))
+      }
+    />
+  );
+}
+
+function EventRow({
+  onClick,
+  isActive,
+  event,
+}: {
+  onClick?: () => void;
+  isActive?: boolean;
+  event: GrpcEvent;
+}) {
+  const { eventType, status, createdAt, content, error } = event;
+  return (
+    <div className="px-1">
+      <button
+        onClick={onClick}
+        className={classNames(
+          'w-full grid grid-cols-[auto_minmax(0,3fr)_auto] gap-2 items-center text-left',
+          'px-1.5 py-1 font-mono cursor-default group focus:outline-none rounded',
+          isActive && '!bg-highlight text-gray-900',
+          'text-gray-800 hover:text-gray-900',
+        )}
+      >
+        <Icon
+          className={
+            eventType === 'server_message'
+              ? 'text-blue-600'
+              : eventType === 'client_message'
+              ? 'text-violet-600'
+              : eventType === 'error' || (status != null && status > 0)
+              ? 'text-orange-600'
+              : eventType === 'connection_end'
+              ? 'text-green-600'
+              : 'text-gray-700'
+          }
+          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'
+              ? 'arrowBigDownDash'
+              : eventType === 'client_message'
+              ? 'arrowBigUpDash'
+              : eventType === 'error' || (status != null && status > 0)
+              ? 'alert'
+              : eventType === 'connection_end'
+              ? 'check'
+              : 'info'
+          }
+        />
+        <div className={classNames('w-full truncate text-2xs')}>
+          {content}
+          {error && (
+            <>
+              <span className="text-orange-600"> ({error})</span>
+            </>
+          )}
+        </div>
+        <div className={classNames('opacity-50 text-2xs')}>
+          {format(createdAt + 'Z', 'HH:mm:ss.SSS')}
+        </div>
+      </button>
+    </div>
+  );
+}

src-web/components/GrpcConnectionSetupPane.tsx

@@ -0,0 +1,307 @@
+import useResizeObserver from '@react-hook/resize-observer';
+import classNames from 'classnames';
+import type { CSSProperties } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { createGlobalState } from 'react-use';
+import type { ReflectResponseService } from '../hooks/useGrpc';
+import { useGrpcConnections } from '../hooks/useGrpcConnections';
+import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
+import type { GrpcMetadataEntry, GrpcRequest } from '../lib/models';
+import { AUTH_TYPE_BASIC, AUTH_TYPE_BEARER, AUTH_TYPE_NONE } from '../lib/models';
+import { BasicAuth } from './BasicAuth';
+import { BearerAuth } from './BearerAuth';
+import { Button } from './core/Button';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { PairEditor } from './core/PairEditor';
+import { RadioDropdown } from './core/RadioDropdown';
+import { HStack, VStack } from './core/Stacks';
+import type { TabItem } from './core/Tabs/Tabs';
+import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { EmptyStateText } from './EmptyStateText';
+import { GrpcEditor } from './GrpcEditor';
+import { UrlBar } from './UrlBar';
+
+interface Props {
+  style?: CSSProperties;
+  className?: string;
+  activeRequest: GrpcRequest;
+  protoFiles: string[];
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  methodType:
+    | 'unary'
+    | 'client_streaming'
+    | 'server_streaming'
+    | 'streaming'
+    | 'no-schema'
+    | 'no-method';
+  onCommit: () => void;
+  onCancel: () => void;
+  onSend: (v: { message: string }) => void;
+  onGo: () => void;
+  services: ReflectResponseService[] | null;
+}
+
+const useActiveTab = createGlobalState<string>('message');
+
+export function GrpcConnectionSetupPane({
+  style,
+  services,
+  methodType,
+  activeRequest,
+  protoFiles,
+  reflectionError,
+  reflectionLoading,
+  onGo,
+  onCommit,
+  onCancel,
+  onSend,
+}: Props) {
+  const connections = useGrpcConnections(activeRequest.id ?? null);
+  const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
+  const activeConnection = connections[0] ?? null;
+  const isStreaming = activeConnection?.elapsed === 0;
+  const [activeTab, setActiveTab] = useActiveTab();
+  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
+
+  const [paneSize, setPaneSize] = useState(99999);
+  const urlContainerEl = useRef<HTMLDivElement>(null);
+  useResizeObserver<HTMLDivElement>(urlContainerEl.current, (entry) => {
+    setPaneSize(entry.contentRect.width);
+  });
+
+  const handleChangeUrl = useCallback(
+    (url: string) => updateRequest.mutateAsync({ url }),
+    [updateRequest],
+  );
+
+  const handleChangeMessage = useCallback(
+    (message: string) => updateRequest.mutateAsync({ message }),
+    [updateRequest],
+  );
+
+  const select = useMemo(() => {
+    const options =
+      services?.flatMap((s) =>
+        s.methods.map((m) => ({
+          label: `${s.name.split('.', 2).pop() ?? s.name}/${m.name}`,
+          value: `${s.name}/${m.name}`,
+        })),
+      ) ?? [];
+    const value = `${activeRequest?.service ?? ''}/${activeRequest?.method ?? ''}`;
+    return { value, options };
+  }, [activeRequest?.method, activeRequest?.service, services]);
+
+  const handleChangeService = useCallback(
+    async (v: string) => {
+      const [serviceName, methodName] = v.split('/', 2);
+      if (serviceName == null || methodName == null) throw new Error('Should never happen');
+      await updateRequest.mutateAsync({
+        service: serviceName,
+        method: methodName,
+      });
+    },
+    [updateRequest],
+  );
+
+  const handleConnect = useCallback(async () => {
+    if (activeRequest == null) return;
+
+    if (activeRequest.service == null || activeRequest.method == null) {
+      alert({
+        id: 'grpc-invalid-service-method',
+        title: 'Error',
+        body: 'Service or method not selected',
+      });
+    }
+    onGo();
+  }, [activeRequest, onGo]);
+
+  const handleSend = useCallback(async () => {
+    if (activeRequest == null) return;
+    onSend({ message: activeRequest.message });
+  }, [activeRequest, onGo]);
+
+  const tabs: TabItem[] = useMemo(
+    () => [
+      { value: 'message', label: 'Message' },
+      {
+        value: 'auth',
+        label: 'Auth',
+        options: {
+          value: activeRequest.authenticationType,
+          items: [
+            { label: 'Basic Auth', shortLabel: 'Basic', value: AUTH_TYPE_BASIC },
+            { label: 'Bearer Token', shortLabel: 'Bearer', value: AUTH_TYPE_BEARER },
+            { type: 'separator' },
+            { label: 'No Authentication', shortLabel: 'Auth', value: AUTH_TYPE_NONE },
+          ],
+          onChange: async (authenticationType) => {
+            let authentication: GrpcRequest['authentication'] = activeRequest.authentication;
+            if (authenticationType === AUTH_TYPE_BASIC) {
+              authentication = {
+                username: authentication.username ?? '',
+                password: authentication.password ?? '',
+              };
+            } else if (authenticationType === AUTH_TYPE_BEARER) {
+              authentication = {
+                token: authentication.token ?? '',
+              };
+            }
+            await updateRequest.mutateAsync({ authenticationType, authentication });
+          },
+        },
+      },
+      { value: 'metadata', label: 'Metadata' },
+    ],
+    [activeRequest.authentication, activeRequest.authenticationType, updateRequest],
+  );
+
+  const handleMetadataChange = useCallback(
+    (metadata: GrpcMetadataEntry[]) => updateRequest.mutate({ metadata }),
+    [updateRequest],
+  );
+
+  return (
+    <VStack style={style}>
+      <div
+        ref={urlContainerEl}
+        className={classNames(
+          'grid grid-cols-[minmax(0,1fr)_auto] gap-1.5',
+          paneSize < 400 && '!grid-cols-1',
+        )}
+      >
+        <UrlBar
+          url={activeRequest.url ?? ''}
+          method={null}
+          submitIcon={null}
+          forceUpdateKey={forceUpdateKey}
+          placeholder="localhost:50051"
+          onSend={handleConnect}
+          onUrlChange={handleChangeUrl}
+          onCancel={onCancel}
+          isLoading={isStreaming}
+        />
+        <HStack space={1.5}>
+          <RadioDropdown
+            value={select.value}
+            onChange={handleChangeService}
+            items={select.options.map((o) => ({
+              label: o.label,
+              value: o.value,
+              type: 'default',
+              shortLabel: o.label,
+            }))}
+            extraItems={[
+              { type: 'separator' },
+              {
+                label: 'Refresh',
+                type: 'default',
+                key: 'custom',
+                leftSlot: <Icon className="text-gray-600" size="sm" icon="refresh" />,
+              },
+            ]}
+          >
+            <Button
+              size="sm"
+              variant="border"
+              rightSlot={<Icon className="text-gray-600" size="sm" icon="chevronDown" />}
+              disabled={isStreaming || services == null}
+              className={classNames(
+                'font-mono text-xs min-w-[5rem] !ring-0',
+                paneSize < 400 && 'flex-1',
+              )}
+            >
+              {select.options.find((o) => o.value === select.value)?.label ?? 'No Schema'}
+            </Button>
+          </RadioDropdown>
+          {methodType === 'client_streaming' || methodType === 'streaming' ? (
+            <>
+              {isStreaming && (
+                <>
+                  <IconButton
+                    className="border border-highlight"
+                    size="sm"
+                    title="Cancel"
+                    onClick={onCancel}
+                    icon="x"
+                  />
+                  <IconButton
+                    className="border border-highlight"
+                    size="sm"
+                    title="Commit"
+                    onClick={onCommit}
+                    icon="check"
+                  />
+                </>
+              )}
+              <IconButton
+                className="border border-highlight"
+                size="sm"
+                title={isStreaming ? 'Connect' : 'Send'}
+                hotkeyAction="grpc_request.send"
+                onClick={isStreaming ? handleSend : handleConnect}
+                icon={isStreaming ? 'sendHorizontal' : 'arrowUpDown'}
+              />
+            </>
+          ) : (
+            <IconButton
+              className="border border-highlight"
+              size="sm"
+              title={methodType === 'unary' ? 'Send' : 'Connect'}
+              hotkeyAction="grpc_request.send"
+              onClick={isStreaming ? onCancel : handleConnect}
+              disabled={methodType === 'no-schema' || methodType === 'no-method'}
+              icon={
+                isStreaming
+                  ? 'x'
+                  : methodType.includes('streaming')
+                  ? 'arrowUpDown'
+                  : 'sendHorizontal'
+              }
+            />
+          )}
+        </HStack>
+      </div>
+      <Tabs
+        value={activeTab}
+        label="Request"
+        onChangeValue={setActiveTab}
+        tabs={tabs}
+        tabListClassName="mt-2 !mb-1.5"
+      >
+        <TabContent value="message">
+          <GrpcEditor
+            onChange={handleChangeMessage}
+            services={services}
+            className="bg-gray-50"
+            reflectionError={reflectionError}
+            reflectionLoading={reflectionLoading}
+            request={activeRequest}
+            protoFiles={protoFiles}
+          />
+        </TabContent>
+        <TabContent value="auth">
+          {activeRequest.authenticationType === AUTH_TYPE_BASIC ? (
+            <BasicAuth key={forceUpdateKey} request={activeRequest} />
+          ) : activeRequest.authenticationType === AUTH_TYPE_BEARER ? (
+            <BearerAuth key={forceUpdateKey} request={activeRequest} />
+          ) : (
+            <EmptyStateText>No Authentication {activeRequest.authenticationType}</EmptyStateText>
+          )}
+        </TabContent>
+        <TabContent value="metadata">
+          <PairEditor
+            valueAutocompleteVariables
+            nameAutocompleteVariables
+            pairs={activeRequest.metadata}
+            onChange={handleMetadataChange}
+            forceUpdateKey={forceUpdateKey}
+          />
+        </TabContent>
+      </Tabs>
+    </VStack>
+  );
+}

src-web/components/GrpcEditor.tsx

@@ -0,0 +1,202 @@
+import { jsonLanguage } from '@codemirror/lang-json';
+import { linter } from '@codemirror/lint';
+import classNames from 'classnames';
+import type { EditorView } from 'codemirror';
+import {
+  handleRefresh,
+  jsonCompletion,
+  jsonSchemaLinter,
+  stateExtensions,
+  updateSchema,
+} from 'codemirror-json-schema';
+import { useEffect, useMemo, useRef } from 'react';
+import { useAlert } from '../hooks/useAlert';
+import type { ReflectResponseService } from '../hooks/useGrpc';
+import { tryFormatJson } from '../lib/formatters';
+import type { GrpcRequest } from '../lib/models';
+import { count } from '../lib/pluralize';
+import { Button } from './core/Button';
+import type { EditorProps } from './core/Editor';
+import { Editor } from './core/Editor';
+import { FormattedError } from './core/FormattedError';
+import { InlineCode } from './core/InlineCode';
+import { VStack } from './core/Stacks';
+import { useDialog } from './DialogContext';
+import { GrpcProtoSelection } from './GrpcProtoSelection';
+
+type Props = Pick<EditorProps, 'heightMode' | 'onChange' | 'className'> & {
+  services: ReflectResponseService[] | null;
+  reflectionError?: string;
+  reflectionLoading?: boolean;
+  request: GrpcRequest;
+  protoFiles: string[];
+};
+
+export function GrpcEditor({
+  services,
+  reflectionError,
+  reflectionLoading,
+  request,
+  protoFiles,
+  ...extraEditorProps
+}: Props) {
+  const editorViewRef = useRef<EditorView>(null);
+  const alert = useAlert();
+  const dialog = useDialog();
+
+  // Find the schema for the selected service and method and update the editor
+  useEffect(() => {
+    if (
+      editorViewRef.current == null ||
+      services === null ||
+      request.service === null ||
+      request.method === null
+    ) {
+      return;
+    }
+
+    const s = services.find((s) => s.name === request.service);
+    if (s == null) {
+      console.log('Failed to find service', { service: request.service, services });
+      alert({
+        id: 'grpc-find-service-error',
+        title: "Couldn't Find Service",
+        body: (
+          <>
+            Failed to find service <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+      });
+      return;
+    }
+
+    const schema = s.methods.find((m) => m.name === request.method)?.schema;
+    if (request.method != null && schema == null) {
+      console.log('Failed to find method', { method: request.method, methods: s?.methods });
+      alert({
+        id: 'grpc-find-schema-error',
+        title: "Couldn't Find Method",
+        body: (
+          <>
+            Failed to find method <InlineCode>{request.method}</InlineCode> for{' '}
+            <InlineCode>{request.service}</InlineCode> in schema
+          </>
+        ),
+      });
+      return;
+    }
+
+    if (schema == null) {
+      return;
+    }
+
+    try {
+      updateSchema(editorViewRef.current, JSON.parse(schema));
+    } catch (err) {
+      alert({
+        id: 'grpc-parse-schema-error',
+        title: 'Failed to Parse Schema',
+        body: (
+          <VStack space={4}>
+            <p>
+              For service <InlineCode>{request.service}</InlineCode> and method{' '}
+              <InlineCode>{request.method}</InlineCode>
+            </p>
+            <FormattedError>{String(err)}</FormattedError>
+          </VStack>
+        ),
+      });
+    }
+  }, [alert, services, request.method, request.service]);
+
+  const extraExtensions = useMemo(
+    () => [
+      linter(jsonSchemaLinter(), {
+        delay: 200,
+        needsRefresh: handleRefresh,
+      }),
+      jsonLanguage.data.of({
+        autocomplete: jsonCompletion(),
+      }),
+      stateExtensions(/** Init with empty schema **/),
+    ],
+    [],
+  );
+
+  const reflectionUnavailable = reflectionError?.match(/unimplemented/i);
+  reflectionError = reflectionUnavailable ? undefined : reflectionError;
+
+  const actions = useMemo(
+    () => [
+      <div key="reflection" className={classNames(services == null && '!opacity-100')}>
+        <Button
+          size="xs"
+          color={
+            reflectionLoading
+              ? 'gray'
+              : reflectionUnavailable
+              ? 'secondary'
+              : reflectionError
+              ? 'danger'
+              : 'gray'
+          }
+          isLoading={reflectionLoading}
+          onClick={() => {
+            dialog.show({
+              title: 'Configure Schema',
+              size: 'md',
+              id: 'reflection-failed',
+              render: ({ hide }) => {
+                return (
+                  <VStack space={6} className="pb-5">
+                    <GrpcProtoSelection onDone={hide} requestId={request.id} />
+                  </VStack>
+                );
+              },
+            });
+          }}
+        >
+          {reflectionLoading
+            ? 'Inspecting Schema'
+            : reflectionUnavailable
+            ? 'Select Proto Files'
+            : reflectionError
+            ? 'Server Error'
+            : protoFiles.length > 0
+            ? count('File', protoFiles.length)
+            : services != null && protoFiles.length === 0
+            ? 'Schema Detected'
+            : 'Select Schema'}
+        </Button>
+      </div>,
+    ],
+    [
+      dialog,
+      protoFiles.length,
+      reflectionError,
+      reflectionLoading,
+      reflectionUnavailable,
+      request.id,
+      services,
+    ],
+  );
+
+  return (
+    <div className="h-full w-full grid grid-cols-1 grid-rows-[minmax(0,100%)_auto_auto_minmax(0,auto)]">
+      <Editor
+        contentType="application/json"
+        autocompleteVariables
+        useTemplating
+        forceUpdateKey={request.id}
+        defaultValue={request.message}
+        format={tryFormatJson}
+        heightMode="auto"
+        placeholder="..."
+        ref={editorViewRef}
+        extraExtensions={extraExtensions}
+        actions={actions}
+        {...extraEditorProps}
+      />
+    </div>
+  );
+}

src-web/components/GrpcProtoSelection.tsx

@@ -0,0 +1,147 @@
+import { open } from '@tauri-apps/api/dialog';
+import { useGrpc } from '../hooks/useGrpc';
+import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
+import { useGrpcRequest } from '../hooks/useGrpcRequest';
+import { count } from '../lib/pluralize';
+import { Banner } from './core/Banner';
+import { Button } from './core/Button';
+import { FormattedError } from './core/FormattedError';
+import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
+import { Link } from './core/Link';
+import { HStack, VStack } from './core/Stacks';
+
+interface Props {
+  requestId: string;
+  onDone: () => void;
+}
+
+export function GrpcProtoSelection({ requestId }: Props) {
+  const request = useGrpcRequest(requestId);
+  const protoFilesKv = useGrpcProtoFiles(requestId);
+  const protoFiles = protoFilesKv.value ?? [];
+  const grpc = useGrpc(request, null, protoFiles);
+  const services = grpc.reflect.data;
+  const serverReflection = protoFiles.length === 0 && services != null;
+  let reflectError = grpc.reflect.error ?? null;
+  const reflectionUnimplemented = `${reflectError}`.match(/unimplemented/i);
+
+  if (reflectionUnimplemented) {
+    reflectError = null;
+  }
+
+  if (request == null) {
+    return null;
+  }
+
+  return (
+    <VStack className="flex-col-reverse" space={3}>
+      {/* Buttons on top so they get focus first */}
+      <HStack space={2} justifyContent="start" className="flex-row-reverse">
+        <Button
+          color="primary"
+          size="sm"
+          onClick={async () => {
+            const files = await open({
+              title: 'Select Proto Files',
+              multiple: true,
+              filters: [{ name: 'Proto Files', extensions: ['proto'] }],
+            });
+            if (files == null || typeof files === 'string') return;
+            const newFiles = files.filter((f) => !protoFiles.includes(f));
+            await protoFilesKv.set([...protoFiles, ...newFiles]);
+            await grpc.reflect.refetch();
+          }}
+        >
+          Add File
+        </Button>
+        <Button
+          isLoading={grpc.reflect.isFetching}
+          disabled={grpc.reflect.isFetching}
+          color="gray"
+          size="sm"
+          onClick={() => grpc.reflect.refetch()}
+        >
+          Refresh Schema
+        </Button>
+      </HStack>
+      <VStack space={5}>
+        {!serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Found services
+              {services?.slice(0, 5).map((s, i) => {
+                return (
+                  <span key={i}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? '' : i === services.length - 2 ? ' and ' : ', '}
+                  </span>
+                );
+              })}
+              {services?.length > 5 && count('other', services?.length - 5)}
+            </p>
+          </Banner>
+        )}
+        {serverReflection && services != null && services.length > 0 && (
+          <Banner className="flex flex-col gap-2">
+            <p>
+              Server reflection found services
+              {services?.map((s, i) => {
+                return (
+                  <span key={i}>
+                    <InlineCode>{s.name}</InlineCode>
+                    {i === services.length - 1 ? '' : i === services.length - 2 ? ' and ' : ', '}
+                  </span>
+                );
+              })}
+              . You can override this schema by manually selecting <InlineCode>*.proto</InlineCode>{' '}
+              files.
+            </p>
+          </Banner>
+        )}
+
+        {protoFiles.length > 0 && (
+          <table className="w-full divide-y">
+            <thead>
+              <tr>
+                <th className="text-gray-600">
+                  <span className="font-mono text-sm">*.proto</span> Files
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {protoFiles.map((f, i) => (
+                <tr key={f + i} className="group">
+                  <td className="pl-1 text-sm font-mono">{f.split('/').pop()}</td>
+                  <td className="w-0 py-0.5">
+                    <IconButton
+                      title="Remove file"
+                      size="sm"
+                      icon="trash"
+                      className="ml-auto opacity-30 transition-opacity group-hover:opacity-100"
+                      onClick={async () => {
+                        await protoFilesKv.set(protoFiles.filter((p) => p !== f));
+                        grpc.reflect.remove();
+                      }}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+        {reflectError && <FormattedError>{reflectError}</FormattedError>}
+        {reflectionUnimplemented && protoFiles.length === 0 && (
+          <Banner>
+            <InlineCode>{request.url}</InlineCode> doesn&apos;t implement{' '}
+            <Link href="https://github.com/grpc/grpc/blob/9aa3c5835a4ed6afae9455b63ed45c761d695bca/doc/server-reflection.md">
+              Server Reflection
+            </Link>{' '}
+            . Please manually add the <InlineCode>.proto</InlineCode> file to get started.
+          </Banner>
+        )}
+      </VStack>
+    </VStack>
+  );
+}

src-web/components/HeadersEditor.tsx

@@ -53,11 +53,18 @@ const valueAutocomplete = (headerName: string): GenericCompletionConfig | undefi
 
 const nameAutocomplete: PairEditorProps['nameAutocomplete'] = {
   minMatch: MIN_MATCH,
-  options: headerNames.map((t) => ({
-    label: t,
-    type: 'constant',
-    boost: 1, // Put above other completions
-  })),
+  options: headerNames.map((t) =>
+    typeof t === 'string'
+      ? {
+          label: t,
+          type: 'constant',
+          boost: 1, // Put above other completions
+        }
+      : {
+          ...t,
+          boost: 1, // Put above other completions
+        },
+  ),
 };
 
 const validateHttpHeader = (v: string) => {

src-web/components/HttpRequestLayout.tsx

@@ -0,0 +1,29 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { HttpRequest } from '../lib/models';
+import { SplitLayout } from './core/SplitLayout';
+import { RequestPane } from './RequestPane';
+import { ResponsePane } from './ResponsePane';
+
+interface Props {
+  activeRequest: HttpRequest;
+  style: CSSProperties;
+}
+
+export function HttpRequestLayout({ activeRequest, style }: Props) {
+  return (
+    <SplitLayout
+      name="http_layout"
+      className="p-3 gap-1.5"
+      style={style}
+      firstSlot={({ orientation, style }) => (
+        <RequestPane
+          style={style}
+          activeRequest={activeRequest}
+          fullHeight={orientation === 'horizontal'}
+        />
+      )}
+      secondSlot={({ style }) => <ResponsePane activeRequest={activeRequest} style={style} />}
+    />
+  );
+}

src-web/components/RecentConnectionsDropdown.tsx

@@ -0,0 +1,60 @@
+import { formatDistanceToNowStrict } from 'date-fns';
+import { useDeleteGrpcConnection } from '../hooks/useDeleteGrpcConnection';
+import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
+import type { GrpcConnection } from '../lib/models';
+import { count } from '../lib/pluralize';
+import { Dropdown } from './core/Dropdown';
+import { Icon } from './core/Icon';
+import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
+
+interface Props {
+  connections: GrpcConnection[];
+  activeConnection: GrpcConnection;
+  onPinned: (r: GrpcConnection) => void;
+}
+
+export function RecentConnectionsDropdown({ activeConnection, connections, onPinned }: Props) {
+  const deleteConnection = useDeleteGrpcConnection(activeConnection?.id ?? null);
+  const deleteAllConnections = useDeleteGrpcConnections(activeConnection?.requestId);
+
+  return (
+    <Dropdown
+      items={[
+        {
+          key: 'clear-single',
+          label: 'Clear Connection',
+          onSelect: deleteConnection.mutate,
+          disabled: connections.length === 0,
+        },
+        {
+          key: 'clear-all',
+          label: `Clear ${count('Connection', connections.length)}`,
+          onSelect: deleteAllConnections.mutate,
+          hidden: connections.length <= 1,
+          disabled: connections.length === 0,
+        },
+        { type: 'separator', label: 'History' },
+        ...connections.slice(0, 20).map((c) => ({
+          key: c.id,
+          label: (
+            <HStack space={2} alignItems="center">
+              {formatDistanceToNowStrict(c.createdAt + 'Z')} ago &bull;{' '}
+              <span className="font-mono text-xs">{c.elapsed}ms</span>
+            </HStack>
+          ),
+          leftSlot: activeConnection?.id === c.id ? <Icon icon="check" /> : <Icon icon="empty" />,
+          onSelect: () => onPinned(c),
+        })),
+      ]}
+    >
+      <IconButton
+        title="Show connection history"
+        icon="chevronDown"
+        className="ml-auto"
+        size="sm"
+        iconSize="md"
+      />
+    </Dropdown>
+  );
+}

src-web/components/RecentRequestsDropdown.tsx

@@ -1,34 +1,38 @@
 import classNames from 'classnames';
 import { useMemo, useRef } from 'react';
 import { useKey, useKeyPressEvent } from 'react-use';
-import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
+import { useActiveEnvironment } from '../hooks/useActiveEnvironment';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
+import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
+import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useRecentRequests } from '../hooks/useRecentRequests';
-import { useRequests } from '../hooks/useRequests';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem, DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
+import { HttpMethodTag } from './core/HttpMethodTag';
 
 export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'className'>) {
   const dropdownRef = useRef<DropdownRef>(null);
   const activeRequest = useActiveRequest();
   const activeWorkspaceId = useActiveWorkspaceId();
-  const activeEnvironmentId = useActiveEnvironmentId();
-  const requests = useRequests();
+  const activeEnvironment = useActiveEnvironment();
+  const httpRequests = useHttpRequests();
+  const grpcRequests = useGrpcRequests();
   const routes = useAppRoutes();
   const allRecentRequestIds = useRecentRequests();
   const recentRequestIds = useMemo(() => allRecentRequestIds.slice(1), [allRecentRequestIds]);
+  const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
 
   // Toggle the menu on Cmd+k
   useKey('k', (e) => {
     if (e.metaKey) {
       e.preventDefault();
-      dropdownRef.current?.toggle(0);
+      dropdownRef.current?.toggle();
     }
   });
 
@@ -39,19 +43,19 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
   });
 
   useHotKey('requestSwitcher.prev', () => {
-    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open(1);
+    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
     dropdownRef.current?.next?.();
   });
 
   useHotKey('requestSwitcher.next', () => {
-    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open(-1);
+    if (!dropdownRef.current?.isOpen) dropdownRef.current?.open();
     dropdownRef.current?.prev?.();
   });
 
   const items = useMemo<DropdownItem[]>(() => {
     if (activeWorkspaceId === null) return [];
 
-    const recentRequestItems: DropdownItem[] = [{ type: 'separator', label: 'Recent Requests' }];
+    const recentRequestItems: DropdownItem[] = [];
     for (const id of recentRequestIds) {
       const request = requests.find((r) => r.id === id);
       if (request === undefined) continue;
@@ -60,10 +64,11 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
         key: request.id,
         label: fallbackRequestName(request),
         // leftSlot: <CountBadge className="!ml-0 px-0 w-5" count={recentRequestItems.length} />,
+        leftSlot: <HttpMethodTag request={request} />,
         onSelect: () => {
           routes.navigate('request', {
             requestId: request.id,
-            environmentId: activeEnvironmentId ?? undefined,
+            environmentId: activeEnvironment?.id,
             workspaceId: activeWorkspaceId,
           });
         },
@@ -74,14 +79,15 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
     if (recentRequestItems.length === 0) {
       return [
         {
+          key: 'no-recent-requests',
           label: 'No recent requests',
           disabled: true,
         },
-      ] as DropdownItem[];
+      ];
     }
 
     return recentRequestItems.slice(0, 20);
-  }, [activeWorkspaceId, activeEnvironmentId, recentRequestIds, requests, routes]);
+  }, [activeWorkspaceId, activeEnvironment?.id, recentRequestIds, requests, routes]);
 
   return (
     <Dropdown ref={dropdownRef} items={items}>

src-web/components/RecentResponsesDropdown.tsx

@@ -1,5 +1,5 @@
-import { useDeleteResponse } from '../hooks/useDeleteResponse';
-import { useDeleteResponses } from '../hooks/useDeleteResponses';
+import { useDeleteHttpResponse } from '../hooks/useDeleteHttpResponse';
+import { useDeleteHttpResponses } from '../hooks/useDeleteHttpResponses';
 import type { HttpResponse } from '../lib/models';
 import { Dropdown } from './core/Dropdown';
 import { pluralize } from '../lib/pluralize';
@@ -19,8 +19,8 @@ export const RecentResponsesDropdown = function ResponsePane({
   responses,
   onPinnedResponse,
 }: Props) {
-  const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
-  const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
+  const deleteResponse = useDeleteHttpResponse(activeResponse?.id ?? null);
+  const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
 
   return (
     <Dropdown

src-web/components/RedirectToLatestWorkspace.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+import { getRecentEnvironments } from '../hooks/useRecentEnvironments';
+import { getRecentRequests } from '../hooks/useRecentRequests';
+import { getRecentWorkspaces } from '../hooks/useRecentWorkspaces';
+import { useWorkspaces } from '../hooks/useWorkspaces';
+
+export function RedirectToLatestWorkspace() {
+  const navigate = useNavigate();
+  const routes = useAppRoutes();
+  const workspaces = useWorkspaces();
+
+  useEffect(() => {
+    (async function () {
+      const workspaceId = (await getRecentWorkspaces())[0] ?? workspaces[0]?.id ?? 'n/a';
+      const environmentId = (await getRecentEnvironments(workspaceId))[0];
+      const requestId = (await getRecentRequests(workspaceId))[0];
+
+      if (workspaceId != null && requestId != null) {
+        navigate(routes.paths.request({ workspaceId, environmentId, requestId }));
+      } else {
+        navigate(routes.paths.workspace({ workspaceId, environmentId }));
+      }
+    })();
+  }, [navigate, routes.paths, workspaces, workspaces.length]);
+
+  return <></>;
+}

src-web/components/RequestPane.tsx

@@ -2,12 +2,16 @@ import classNames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { createGlobalState } from 'react-use';
-import { useActiveRequest } from '../hooks/useActiveRequest';
+import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
+import { useIsResponseLoading } from '../hooks/useIsResponseLoading';
+import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { useSendRequest } from '../hooks/useSendRequest';
+import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpHeader, HttpRequest, HttpUrlParameter } from '../lib/models';
 import {
+  BODY_TYPE_OTHER,
   AUTH_TYPE_BASIC,
   AUTH_TYPE_BEARER,
   AUTH_TYPE_NONE,
@@ -33,131 +37,133 @@ import { UrlBar } from './UrlBar';
 import { UrlParametersEditor } from './UrlParameterEditor';
 
 interface Props {
-  style?: CSSProperties;
+  style: CSSProperties;
   fullHeight: boolean;
   className?: string;
+  activeRequest: HttpRequest;
 }
 
 const useActiveTab = createGlobalState<string>('body');
 
-export const RequestPane = memo(function RequestPane({ style, fullHeight, className }: Props) {
-  const activeRequest = useActiveRequest();
-  const activeRequestId = activeRequest?.id ?? null;
-  const updateRequest = useUpdateRequest(activeRequestId);
+export const RequestPane = memo(function RequestPane({
+  style,
+  fullHeight,
+  className,
+  activeRequest,
+}: Props) {
+  const activeRequestId = activeRequest.id;
+  const updateRequest = useUpdateHttpRequest(activeRequestId);
   const [activeTab, setActiveTab] = useActiveTab();
   const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
-  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest?.id ?? null);
+  const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
 
   const tabs: TabItem[] = useMemo(
-    () =>
-      activeRequest === null
-        ? []
-        : [
-            {
-              value: 'body',
-              options: {
-                value: activeRequest.bodyType,
-                items: [
-                  { type: 'separator', label: 'Form Data' },
-                  { label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
-                  { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
-                  { type: 'separator', label: 'Text Content' },
-                  { label: 'JSON', value: BODY_TYPE_JSON },
-                  { label: 'XML', value: BODY_TYPE_XML },
-                  { label: 'GraphQL', value: BODY_TYPE_GRAPHQL },
-                  { type: 'separator', label: 'Other' },
-                  { label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
-                ],
-                onChange: async (bodyType) => {
-                  const patch: Partial<HttpRequest> = { bodyType };
-                  if (bodyType === BODY_TYPE_NONE) {
-                    patch.headers = activeRequest?.headers.filter(
-                      (h) => h.name.toLowerCase() !== 'content-type',
-                    );
-                  } else if (
-                    bodyType === BODY_TYPE_FORM_URLENCODED ||
-                    bodyType === BODY_TYPE_FORM_MULTIPART ||
-                    bodyType === BODY_TYPE_JSON ||
-                    bodyType === BODY_TYPE_XML
-                  ) {
-                    patch.method = 'POST';
-                    patch.headers = [
-                      ...(activeRequest?.headers.filter(
-                        (h) => h.name.toLowerCase() !== 'content-type',
-                      ) ?? []),
-                      {
-                        name: 'Content-Type',
-                        value: bodyType,
-                        enabled: true,
-                      },
-                    ];
-                  } else if (bodyType == BODY_TYPE_GRAPHQL) {
-                    patch.method = 'POST';
-                    patch.headers = [
-                      ...(activeRequest?.headers.filter(
-                        (h) => h.name.toLowerCase() !== 'content-type',
-                      ) ?? []),
-                      {
-                        name: 'Content-Type',
-                        value: 'application/json',
-                        enabled: true,
-                      },
-                    ];
-                  }
-
-                  // Force update header editor so any changed headers are reflected
-                  setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
-
-                  updateRequest.mutate(patch);
-                },
-              },
-            },
-            {
-              value: 'params',
-              label: (
-                <div className="flex items-center">
-                  Params
-                  <CountBadge count={activeRequest.urlParameters.filter((p) => p.name).length} />
-                </div>
-              ),
-            },
-            {
-              value: 'headers',
-              label: (
-                <div className="flex items-center">
-                  Headers
-                  <CountBadge count={activeRequest.headers.filter((h) => h.name).length} />
-                </div>
-              ),
-            },
-            {
-              value: 'auth',
-              label: 'Auth',
-              options: {
-                value: activeRequest.authenticationType,
-                items: [
-                  { label: 'Basic Auth', shortLabel: 'Basic', value: AUTH_TYPE_BASIC },
-                  { label: 'Bearer Token', shortLabel: 'Bearer', value: AUTH_TYPE_BEARER },
-                  { type: 'separator' },
-                  { label: 'No Authentication', shortLabel: 'Auth', value: AUTH_TYPE_NONE },
-                ],
-                onChange: async (authenticationType) => {
-                  let authentication: HttpRequest['authentication'] = activeRequest?.authentication;
-                  if (authenticationType === AUTH_TYPE_BASIC) {
-                    authentication = {
-                      username: authentication.username ?? '',
-                      password: authentication.password ?? '',
-                    };
-                  } else if (authenticationType === AUTH_TYPE_BEARER) {
-                    authentication = {
-                      token: authentication.token ?? '',
-                    };
-                  }
-                  updateRequest.mutate({ authenticationType, authentication });
-                },
-              },
-            },
+    () => [
+      {
+        value: 'body',
+        options: {
+          value: activeRequest.bodyType,
+          items: [
+            { type: 'separator', label: 'Form Data' },
+            { label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
+            { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
+            { type: 'separator', label: 'Text Content' },
+            { label: 'JSON', value: BODY_TYPE_JSON },
+            { label: 'XML', value: BODY_TYPE_XML },
+            { label: 'GraphQL', value: BODY_TYPE_GRAPHQL },
+            { label: 'Other', value: BODY_TYPE_OTHER },
+            { type: 'separator', label: 'Other' },
+            { label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
           ],
+          onChange: async (bodyType) => {
+            const patch: Partial<HttpRequest> = { bodyType };
+            if (bodyType === BODY_TYPE_NONE) {
+              patch.headers = activeRequest.headers.filter(
+                (h) => h.name.toLowerCase() !== 'content-type',
+              );
+            } else if (
+              bodyType === BODY_TYPE_FORM_URLENCODED ||
+              bodyType === BODY_TYPE_FORM_MULTIPART ||
+              bodyType === BODY_TYPE_JSON ||
+              bodyType === BODY_TYPE_OTHER ||
+              bodyType === BODY_TYPE_XML
+            ) {
+              patch.method = 'POST';
+              patch.headers = [
+                ...(activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type') ??
+                  []),
+                {
+                  name: 'Content-Type',
+                  value: bodyType,
+                  enabled: true,
+                },
+              ];
+            } else if (bodyType == BODY_TYPE_GRAPHQL) {
+              patch.method = 'POST';
+              patch.headers = [
+                ...(activeRequest.headers.filter((h) => h.name.toLowerCase() !== 'content-type') ??
+                  []),
+                {
+                  name: 'Content-Type',
+                  value: 'application/json',
+                  enabled: true,
+                },
+              ];
+            }
+
+            // Force update header editor so any changed headers are reflected
+            setTimeout(() => setForceUpdateHeaderEditorKey((u) => u + 1), 100);
+
+            updateRequest.mutate(patch);
+          },
+        },
+      },
+      {
+        value: 'params',
+        label: (
+          <div className="flex items-center">
+            Params
+            <CountBadge count={activeRequest.urlParameters.filter((p) => p.name).length} />
+          </div>
+        ),
+      },
+      {
+        value: 'headers',
+        label: (
+          <div className="flex items-center">
+            Headers
+            <CountBadge count={activeRequest.headers.filter((h) => h.name).length} />
+          </div>
+        ),
+      },
+      {
+        value: 'auth',
+        label: 'Auth',
+        options: {
+          value: activeRequest.authenticationType,
+          items: [
+            { label: 'Basic Auth', shortLabel: 'Basic', value: AUTH_TYPE_BASIC },
+            { label: 'Bearer Token', shortLabel: 'Bearer', value: AUTH_TYPE_BEARER },
+            { type: 'separator' },
+            { label: 'No Authentication', shortLabel: 'Auth', value: AUTH_TYPE_NONE },
+          ],
+          onChange: async (authenticationType) => {
+            let authentication: HttpRequest['authentication'] = activeRequest.authentication;
+            if (authenticationType === AUTH_TYPE_BASIC) {
+              authentication = {
+                username: authentication.username ?? '',
+                password: authentication.password ?? '',
+              };
+            } else if (authenticationType === AUTH_TYPE_BEARER) {
+              authentication = {
+                token: authentication.token ?? '',
+              };
+            }
+            await updateRequest.mutateAsync({ authenticationType, authentication });
+          },
+        },
+      },
+    ],
     [activeRequest, updateRequest],
   );
 
@@ -178,6 +184,29 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     [updateRequest],
   );
 
+  const sendRequest = useSendRequest(activeRequest.id ?? null);
+  const { activeResponse } = usePinnedHttpResponse(activeRequest);
+  const cancelResponse = useCancelHttpResponse(activeResponse?.id ?? null);
+  const handleSend = useCallback(async () => {
+    await sendRequest.mutateAsync();
+  }, [sendRequest]);
+
+  const handleCancel = useCallback(async () => {
+    await cancelResponse.mutateAsync();
+  }, [cancelResponse]);
+
+  const handleMethodChange = useCallback(
+    (method: string) => updateRequest.mutate({ method }),
+    [updateRequest],
+  );
+  const handleUrlChange = useCallback(
+    (url: string) => updateRequest.mutate({ url }),
+    [updateRequest],
+  );
+
+  const isLoading = useIsResponseLoading(activeRequestId ?? null);
+  const { updateKey } = useRequestUpdateKey(activeRequestId ?? null);
+
   return (
     <div
       style={style}
@@ -186,10 +215,15 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
       {activeRequest && (
         <>
           <UrlBar
-            key={activeRequest.id} // Force-reset the url bar when the active request changes
-            id={activeRequest.id}
             url={activeRequest.url}
             method={activeRequest.method}
+            placeholder="https://example.com"
+            onSend={handleSend}
+            onCancel={handleCancel}
+            onMethodChange={handleMethodChange}
+            onUrlChange={handleUrlChange}
+            forceUpdateKey={updateKey}
+            isLoading={isLoading}
           />
           <Tabs
             value={activeTab}
@@ -200,17 +234,9 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
           >
             <TabContent value="auth">
               {activeRequest.authenticationType === AUTH_TYPE_BASIC ? (
-                <BasicAuth
-                  key={forceUpdateKey}
-                  requestId={activeRequest.id}
-                  authentication={activeRequest.authentication}
-                />
+                <BasicAuth key={forceUpdateKey} request={activeRequest} />
               ) : activeRequest.authenticationType === AUTH_TYPE_BEARER ? (
-                <BearerAuth
-                  key={forceUpdateKey}
-                  requestId={activeRequest.id}
-                  authentication={activeRequest.authentication}
-                />
+                <BearerAuth key={forceUpdateKey} request={activeRequest} />
               ) : (
                 <EmptyStateText>
                   No Authentication {activeRequest.authenticationType}
@@ -240,7 +266,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                   contentType="application/json"
                   onChange={handleBodyTextChange}
                   format={tryFormatJson}
@@ -253,16 +279,27 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                   contentType="text/xml"
                   onChange={handleBodyTextChange}
                 />
+              ) : activeRequest.bodyType === BODY_TYPE_OTHER ? (
+                <Editor
+                  forceUpdateKey={forceUpdateKey}
+                  useTemplating
+                  autocompleteVariables
+                  placeholder="..."
+                  className="!bg-gray-50"
+                  heightMode={fullHeight ? 'full' : 'auto'}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
+                  onChange={handleBodyTextChange}
+                />
               ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
                 <GraphQLEditor
                   forceUpdateKey={forceUpdateKey}
                   baseRequest={activeRequest}
                   className="!bg-gray-50"
-                  defaultValue={`${activeRequest?.body?.text ?? ''}`}
+                  defaultValue={`${activeRequest.body?.text ?? ''}`}
                   onChange={handleBodyTextChange}
                 />
               ) : activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ? (

src-web/components/RequestResponse.tsx

@@ -1,139 +0,0 @@
-import useResizeObserver from '@react-hook/resize-observer';
-import classNames from 'classnames';
-import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
-import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { useLocalStorage } from 'react-use';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
-import { clamp } from '../lib/clamp';
-import { HotKeyList } from './core/HotKeyList';
-import { RequestPane } from './RequestPane';
-import { ResizeHandle } from './ResizeHandle';
-import { ResponsePane } from './ResponsePane';
-
-interface Props {
-  style: CSSProperties;
-}
-
-const rqst = { gridArea: 'rqst' };
-const resp = { gridArea: 'resp' };
-const drag = { gridArea: 'drag' };
-
-const DEFAULT = 0.5;
-const MIN_WIDTH_PX = 10;
-const MIN_HEIGHT_PX = 30;
-const STACK_VERTICAL_WIDTH = 700;
-
-export const RequestResponse = memo(function RequestResponse({ style }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const activeRequest = useActiveRequest();
-  const [vertical, setVertical] = useState<boolean>(false);
-  const [widthRaw, setWidth] = useLocalStorage<number>(`body_width::${useActiveWorkspaceId()}`);
-  const [heightRaw, setHeight] = useLocalStorage<number>(`body_height::${useActiveWorkspaceId()}`);
-  const width = widthRaw ?? DEFAULT;
-  const height = heightRaw ?? DEFAULT;
-  const [isResizing, setIsResizing] = useState<boolean>(false);
-  const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
-    null,
-  );
-
-  useResizeObserver(containerRef.current, ({ contentRect }) => {
-    setVertical(contentRect.width < STACK_VERTICAL_WIDTH);
-  });
-
-  const styles = useMemo<CSSProperties>(
-    () => ({
-      ...style,
-      gridTemplate: vertical
-        ? `
-          ' ${rqst.gridArea}' minmax(0,${1 - height}fr)
-          ' ${drag.gridArea}' 0
-          ' ${resp.gridArea}' minmax(0,${height}fr)
-          / 1fr            
-        `
-        : `
-          ' ${rqst.gridArea} ${drag.gridArea} ${resp.gridArea}' minmax(0,1fr)
-          / ${1 - width}fr   0                ${width}fr           
-        `,
-    }),
-    [vertical, width, height, style],
-  );
-
-  const unsub = () => {
-    if (moveState.current !== null) {
-      document.documentElement.removeEventListener('mousemove', moveState.current.move);
-      document.documentElement.removeEventListener('mouseup', moveState.current.up);
-    }
-  };
-
-  const handleReset = useCallback(
-    () => (vertical ? setHeight(DEFAULT) : setWidth(DEFAULT)),
-    [setHeight, vertical, setWidth],
-  );
-
-  const handleResizeStart = useCallback(
-    (e: ReactMouseEvent<HTMLDivElement>) => {
-      if (containerRef.current === null) return;
-      unsub();
-
-      const containerRect = containerRef.current.getBoundingClientRect();
-
-      const mouseStartX = e.clientX;
-      const mouseStartY = e.clientY;
-      const startWidth = containerRect.width * width;
-      const startHeight = containerRect.height * height;
-
-      moveState.current = {
-        move: (e: MouseEvent) => {
-          e.preventDefault(); // Prevent text selection and things
-          if (vertical) {
-            const maxHeightPx = containerRect.height - MIN_HEIGHT_PX;
-            const newHeightPx = clamp(
-              startHeight - (e.clientY - mouseStartY),
-              MIN_HEIGHT_PX,
-              maxHeightPx,
-            );
-            setHeight(newHeightPx / containerRect.height);
-          } else {
-            const maxWidthPx = containerRect.width - MIN_WIDTH_PX;
-            const newWidthPx = clamp(
-              startWidth - (e.clientX - mouseStartX),
-              MIN_WIDTH_PX,
-              maxWidthPx,
-            );
-            setWidth(newWidthPx / containerRect.width);
-          }
-        },
-        up: (e: MouseEvent) => {
-          e.preventDefault();
-          unsub();
-          setIsResizing(false);
-        },
-      };
-      document.documentElement.addEventListener('mousemove', moveState.current.move);
-      document.documentElement.addEventListener('mouseup', moveState.current.up);
-      setIsResizing(true);
-    },
-    [width, height, vertical, setHeight, setWidth],
-  );
-
-  if (activeRequest === null) {
-    return <HotKeyList hotkeys={['request.create', 'sidebar.toggle']} />;
-  }
-
-  return (
-    <div ref={containerRef} className="grid gap-1.5 w-full h-full p-3" style={styles}>
-      <RequestPane style={rqst} fullHeight={!vertical} />
-      <ResizeHandle
-        style={drag}
-        isResizing={isResizing}
-        className={classNames(vertical ? 'translate-y-0.5' : 'translate-x-0.5')}
-        onResizeStart={handleResizeStart}
-        onReset={handleReset}
-        side={vertical ? 'top' : 'left'}
-        justify="center"
-      />
-      <ResponsePane style={resp} />
-    </div>
-  );
-});

src-web/components/ResizeHandle.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 interface ResizeBarProps {
   style?: CSSProperties;
   className?: string;
-  barClassName?: string;
   isResizing: boolean;
   onResizeStart: (e: ReactMouseEvent<HTMLDivElement>) => void;
   onReset?: () => void;
@@ -28,9 +27,12 @@ export function ResizeHandle({
       aria-hidden
       draggable
       style={style}
+      onDragStart={onResizeStart}
+      onDoubleClick={onReset}
       className={classNames(
         className,
         'group z-10 flex',
+        // 'bg-blue-100/10', // For debugging
         vertical ? 'w-full h-3 cursor-row-resize' : 'h-full w-3 cursor-col-resize',
         justify === 'center' && 'justify-center',
         justify === 'end' && 'justify-end',
@@ -39,8 +41,6 @@ export function ResizeHandle({
         side === 'left' && 'left-0',
         side === 'top' && 'top-0',
       )}
-      onDragStart={onResizeStart}
-      onDoubleClick={onReset}
     >
       {/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
       {isResizing && (

src-web/components/ResponseHeaders.tsx

@@ -1,10 +1,8 @@
 import { shell } from '@tauri-apps/api';
-import classNames from 'classnames';
-import type { ReactNode } from 'react';
 import type { HttpResponse } from '../lib/models';
 import { IconButton } from './core/IconButton';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
 import { Separator } from './core/Separator';
-import { HStack } from './core/Stacks';
 
 interface Props {
   response: HttpResponse;
@@ -13,16 +11,16 @@ interface Props {
 export function ResponseHeaders({ response }: Props) {
   return (
     <div className="overflow-auto h-full pb-4">
-      <dl className="text-xs w-full font-mono flex flex-col">
+      <KeyValueRows>
         {response.headers.map((h, i) => (
-          <Row key={i} label={h.name} value={h.value} labelClassName="!text-violet-600" />
+          <KeyValueRow key={i} label={h.name} value={h.value} labelClassName="!text-violet-600" />
         ))}
-      </dl>
+      </KeyValueRows>
       <Separator className="my-4">Other Info</Separator>
-      <dl className="text-xs w-full font-mono divide-highlightSecondary">
-        <Row label="Version" value={response.version} />
-        <Row label="Remote Address" value={response.remoteAddr} />
-        <Row
+      <KeyValueRows>
+        <KeyValueRow label="Version" value={response.version} />
+        <KeyValueRow label="Remote Address" value={response.remoteAddr} />
+        <KeyValueRow
           label={
             <div className="flex items-center">
               URL
@@ -41,26 +39,7 @@ export function ResponseHeaders({ response }: Props) {
             </div>
           }
         />
-      </dl>
+      </KeyValueRows>
     </div>
   );
 }
-
-function Row({
-  label,
-  value,
-  labelClassName,
-}: {
-  label: ReactNode;
-  value: ReactNode;
-  labelClassName?: string;
-}) {
-  return (
-    <HStack space={3} className="py-0.5">
-      <dd className={classNames(labelClassName, 'w-1/3 text-gray-700 select-text cursor-text')}>
-        {label}
-      </dd>
-      <dt className="w-2/3 select-text cursor-text break-all">{value}</dt>
-    </HStack>
-  );
-}

src-web/components/ResponsePane.tsx

@@ -1,18 +1,17 @@
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useMemo } from 'react';
 import { createGlobalState } from 'react-use';
-import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useLatestResponse } from '../hooks/useLatestResponse';
+import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseContentType } from '../hooks/useResponseContentType';
-import { useResponses } from '../hooks/useResponses';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
-import type { HttpResponse } from '../lib/models';
+import type { HttpRequest } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
 import { Banner } from './core/Banner';
 import { CountBadge } from './core/CountBadge';
 import { DurationTag } from './core/DurationTag';
 import { HotKeyList } from './core/HotKeyList';
+import { Icon } from './core/Icon';
 import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';
 import { StatusTag } from './core/StatusTag';
@@ -29,33 +28,17 @@ import { WebPageViewer } from './responseViewers/WebPageViewer';
 interface Props {
   style?: CSSProperties;
   className?: string;
+  activeRequest: HttpRequest;
 }
 
 const useActiveTab = createGlobalState<string>('body');
 
-export const ResponsePane = memo(function ResponsePane({ style, className }: Props) {
-  const [pinnedResponseId, setPinnedResponseId] = useState<string | null>(null);
-  const activeRequest = useActiveRequest();
-  const latestResponse = useLatestResponse(activeRequest?.id ?? null);
-  const responses = useResponses(activeRequest?.id ?? null);
-  const activeResponse: HttpResponse | null = pinnedResponseId
-    ? responses.find((r) => r.id === pinnedResponseId) ?? null
-    : latestResponse ?? null;
+export const ResponsePane = memo(function ResponsePane({ style, className, activeRequest }: Props) {
+  const { activeResponse, setPinnedResponse, responses } = usePinnedHttpResponse(activeRequest);
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
   const [activeTab, setActiveTab] = useActiveTab();
-
-  // Unset pinned response when a new one comes in
-  useEffect(() => setPinnedResponseId(null), [responses.length]);
-
   const contentType = useResponseContentType(activeResponse);
 
-  const handlePinnedResponse = useCallback(
-    (r: HttpResponse) => {
-      setPinnedResponseId(r.id);
-    },
-    [setPinnedResponseId],
-  );
-
   const tabs = useMemo<TabItem[]>(
     () => [
       {
@@ -85,35 +68,26 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
     [activeResponse?.headers, contentType, setViewMode, viewMode],
   );
 
-  if (activeRequest === null) {
-    return null;
-  }
-
   return (
     <div
       style={style}
       className={classNames(
         className,
-        'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1',
+        'max-h-full h-full',
         'bg-gray-50 dark:bg-gray-100 rounded-md border border-highlight',
         'shadow shadow-gray-100 dark:shadow-gray-0 relative',
       )}
     >
-      {activeResponse?.error && (
-        <Banner color="danger" className="m-2">
-          {activeResponse.error}
-        </Banner>
-      )}
-      {!activeResponse && (
-        <>
-          <span />
-          <HotKeyList
-            hotkeys={['request.send', 'request.create', 'sidebar.toggle', 'urlBar.focus']}
-          />
-        </>
-      )}
-      {activeResponse && !activeResponse.error && !isResponseLoading(activeResponse) && (
-        <>
+      {activeResponse == null ? (
+        <HotKeyList
+          hotkeys={['http_request.send', 'http_request.create', 'sidebar.toggle', 'urlBar.focus']}
+        />
+      ) : isResponseLoading(activeResponse) ? (
+        <div className="h-full w-full flex items-center justify-center">
+          <Icon size="lg" className="opacity-disabled" spin icon="refresh" />
+        </div>
+      ) : (
+        <div className="h-full w-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1">
           <HStack
             alignItems="center"
             className={classNames(
@@ -148,42 +122,48 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                 <RecentResponsesDropdown
                   responses={responses}
                   activeResponse={activeResponse}
-                  onPinnedResponse={handlePinnedResponse}
+                  onPinnedResponse={setPinnedResponse}
                 />
               </HStack>
             )}
           </HStack>
 
-          <Tabs
-            value={activeTab}
-            onChangeValue={setActiveTab}
-            label="Response"
-            tabs={tabs}
-            className="ml-3 mr-1"
-            tabListClassName="mt-1.5"
-          >
-            <TabContent value="headers">
-              <ResponseHeaders response={activeResponse} />
-            </TabContent>
-            <TabContent value="body">
-              {!activeResponse.contentLength ? (
-                <EmptyStateText>Empty Body</EmptyStateText>
-              ) : contentType?.startsWith('image') ? (
-                <ImageViewer className="pb-2" response={activeResponse} />
-              ) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
-                <div className="text-sm italic text-gray-500">
-                  Cannot preview text responses larger than 2MB
-                </div>
-              ) : viewMode === 'pretty' && contentType?.includes('html') ? (
-                <WebPageViewer response={activeResponse} />
-              ) : contentType?.match(/csv|tab-separated/) ? (
-                <CsvViewer className="pb-2" response={activeResponse} />
-              ) : (
-                <TextViewer response={activeResponse} pretty={viewMode === 'pretty'} />
-              )}
-            </TabContent>
-          </Tabs>
-        </>
+          {activeResponse?.error ? (
+            <Banner color="danger" className="m-2">
+              {activeResponse.error}
+            </Banner>
+          ) : (
+            <Tabs
+              value={activeTab}
+              onChangeValue={setActiveTab}
+              label="Response"
+              tabs={tabs}
+              className="ml-3 mr-1"
+              tabListClassName="mt-1.5"
+            >
+              <TabContent value="headers">
+                <ResponseHeaders response={activeResponse} />
+              </TabContent>
+              <TabContent value="body">
+                {!activeResponse.contentLength ? (
+                  <EmptyStateText>Empty Body</EmptyStateText>
+                ) : contentType?.startsWith('image') ? (
+                  <ImageViewer className="pb-2" response={activeResponse} />
+                ) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
+                  <div className="text-sm italic text-gray-500">
+                    Cannot preview text responses larger than 2MB
+                  </div>
+                ) : viewMode === 'pretty' && contentType?.includes('html') ? (
+                  <WebPageViewer response={activeResponse} />
+                ) : contentType?.match(/csv|tab-separated/) ? (
+                  <CsvViewer className="pb-2" response={activeResponse} />
+                ) : (
+                  <TextViewer response={activeResponse} pretty={viewMode === 'pretty'} />
+                )}
+              </TabContent>
+            </Tabs>
+          )}
+        </div>
       )}
     </div>
   );

src-web/components/SettingsDialog.tsx

@@ -1,10 +1,15 @@
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
+import { useAppInfo } from '../hooks/useAppInfo';
+import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
 import { useSettings } from '../hooks/useSettings';
 import { useUpdateSettings } from '../hooks/useUpdateSettings';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
+import { trackEvent } from '../lib/analytics';
 import { Checkbox } from './core/Checkbox';
 import { Heading } from './core/Heading';
+import { IconButton } from './core/IconButton';
 import { Input } from './core/Input';
+import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
 import { Select } from './core/Select';
 import { Separator } from './core/Separator';
 import { VStack } from './core/Stacks';
@@ -14,6 +19,8 @@ export const SettingsDialog = () => {
   const updateWorkspace = useUpdateWorkspace(workspace?.id ?? null);
   const settings = useSettings();
   const updateSettings = useUpdateSettings();
+  const appInfo = useAppInfo();
+  const checkForUpdates = useCheckForUpdates();
 
   if (settings == null || workspace == null) {
     return null;
@@ -25,30 +32,59 @@ export const SettingsDialog = () => {
         name="appearance"
         label="Appearance"
         labelPosition="left"
-        labelClassName="w-1/3"
         size="sm"
         value={settings.appearance}
-        onChange={(appearance) => updateSettings.mutateAsync({ ...settings, appearance })}
-        options={{
-          system: 'System',
-          light: 'Light',
-          dark: 'Dark',
+        onChange={async (appearance) => {
+          await updateSettings.mutateAsync({ ...settings, appearance });
+          trackEvent('setting', 'update', { appearance });
         }}
+        options={[
+          {
+            label: 'System',
+            value: 'system',
+          },
+          {
+            label: 'Light',
+            value: 'light',
+          },
+          {
+            label: 'Dark',
+            value: 'dark',
+          },
+        ]}
       />
 
-      <Select
-        name="updateChannel"
-        label="Update Channel"
-        labelPosition="left"
-        labelClassName="w-1/3"
-        size="sm"
-        value={settings.updateChannel}
-        onChange={(updateChannel) => updateSettings.mutateAsync({ ...settings, updateChannel })}
-        options={{
-          stable: 'Release',
-          beta: 'Early Bird (Beta)',
-        }}
-      />
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-1">
+        <Select
+          name="updateChannel"
+          label="Update Channel"
+          labelPosition="left"
+          size="sm"
+          value={settings.updateChannel}
+          onChange={async (updateChannel) => {
+            trackEvent('setting', 'update', { update_channel: updateChannel });
+            await updateSettings.mutateAsync({ ...settings, updateChannel });
+          }}
+          options={[
+            {
+              label: 'Release',
+              value: 'stable',
+            },
+            {
+              label: 'Early Bird (Beta)',
+              value: 'beta',
+            },
+          ]}
+        />
+        <IconButton
+          variant="border"
+          size="sm"
+          title="Check for updates"
+          icon="refresh"
+          spin={checkForUpdates.isLoading}
+          onClick={() => checkForUpdates.mutateAsync()}
+        />
+      </div>
 
       <Separator className="my-4" />
 
@@ -63,9 +99,8 @@ export const SettingsDialog = () => {
           size="sm"
           name="requestTimeout"
           label="Request Timeout (ms)"
+          placeholder="0"
           labelPosition="left"
-          labelClassName="w-1/3"
-          containerClassName="col-span-2"
           defaultValue={`${workspace.settingRequestTimeout}`}
           validate={(value) => parseInt(value) >= 0}
           onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
@@ -74,19 +109,33 @@ export const SettingsDialog = () => {
         <Checkbox
           checked={workspace.settingValidateCertificates}
           title="Validate TLS Certificates"
-          onChange={(settingValidateCertificates) =>
-            updateWorkspace.mutateAsync({ settingValidateCertificates })
-          }
+          onChange={async (settingValidateCertificates) => {
+            trackEvent('workspace', 'update', {
+              validate_certificates: JSON.stringify(settingValidateCertificates),
+            });
+            await updateWorkspace.mutateAsync({ settingValidateCertificates });
+          }}
         />
 
         <Checkbox
           checked={workspace.settingFollowRedirects}
           title="Follow Redirects"
-          onChange={(settingFollowRedirects) =>
-            updateWorkspace.mutateAsync({ settingFollowRedirects })
-          }
+          onChange={async (settingFollowRedirects) => {
+            trackEvent('workspace', 'update', {
+              follow_redirects: JSON.stringify(settingFollowRedirects),
+            });
+            await updateWorkspace.mutateAsync({ settingFollowRedirects });
+          }}
         />
       </VStack>
+
+      <Separator className="my-4" />
+
+      <Heading size={2}>App Info</Heading>
+      <KeyValueRows>
+        <KeyValueRow label="Version" value={appInfo.data?.version} />
+        <KeyValueRow label="Data Directory" value={appInfo.data?.appDataDir} />
+      </KeyValueRows>
     </VStack>
   );
 };

src-web/components/SettingsDropdown.tsx

@@ -1,16 +1,14 @@
-import { invoke, shell } from '@tauri-apps/api';
+import { shell } from '@tauri-apps/api';
 import { useRef, useState } from 'react';
-import { useAlert } from '../hooks/useAlert';
-import { useAppVersion } from '../hooks/useAppVersion';
+import { useAppInfo } from '../hooks/useAppInfo';
+import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
-import { Button } from './core/Button';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
-import { VStack } from './core/Stacks';
 import { useDialog } from './DialogContext';
 import { KeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 import { SettingsDialog } from './SettingsDialog';
@@ -18,10 +16,10 @@ import { SettingsDialog } from './SettingsDialog';
 export function SettingsDropdown() {
   const importData = useImportData();
   const exportData = useExportData();
-  const appVersion = useAppVersion();
+  const appInfo = useAppInfo();
   const dropdownRef = useRef<DropdownRef>(null);
   const dialog = useDialog();
-  const alert = useAlert();
+  const checkForUpdates = useCheckForUpdates();
   const [showChangelog, setShowChangelog] = useState<boolean>(false);
 
   useListenToTauriEvent('show_changelog', () => {
@@ -65,30 +63,7 @@ export function SettingsDropdown() {
           key: 'import-data',
           label: 'Import Data',
           leftSlot: <Icon icon="folderInput" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'import',
-              title: 'Import Data',
-              size: 'sm',
-              render: ({ hide }) => {
-                return (
-                  <VStack space={3} className="pb-4">
-                    <p>Insomnia or Postman Collection v2/v2.1 formats are supported</p>
-                    <Button
-                      size="sm"
-                      color="primary"
-                      onClick={async () => {
-                        await importData.mutateAsync();
-                        hide();
-                      }}
-                    >
-                      Select File
-                    </Button>
-                  </VStack>
-                );
-              },
-            });
-          },
+          onSelect: () => importData.mutate(),
         },
         {
           key: 'export-data',
@@ -96,22 +71,12 @@ export function SettingsDropdown() {
           leftSlot: <Icon icon="folderOutput" />,
           onSelect: () => exportData.mutate(),
         },
-        { type: 'separator', label: `Yaak v${appVersion.data}` },
+        { type: 'separator', label: `Yaak v${appInfo.data?.version}` },
         {
           key: 'update-check',
           label: 'Check for Updates',
           leftSlot: <Icon icon="update" />,
-          onSelect: async () => {
-            const hasUpdate: boolean = await invoke('check_for_updates');
-            if (!hasUpdate) {
-              alert({
-                id: 'no-updates',
-                title: 'No Updates',
-                body: 'You are currently up to date',
-              });
-            }
-            console.log('HAS UPDATE', hasUpdate);
-          },
+          onSelect: () => checkForUpdates.mutate(),
         },
         {
           key: 'feedback',
@@ -126,7 +91,7 @@ export function SettingsDropdown() {
           variant: showChangelog ? 'notify' : 'default',
           leftSlot: <Icon icon="cake" />,
           rightSlot: <Icon icon="externalLink" />,
-          onSelect: () => shell.open(`https://yaak.app/changelog/${appVersion.data}`),
+          onSelect: () => shell.open(`https://yaak.app/changelog/${appInfo.data?.version}`),
         },
       ]}
     >

src-web/components/Sidebar.tsx

@@ -1,38 +1,42 @@
 import classNames from 'classnames';
 import type { ForwardedRef, ReactNode } from 'react';
-import React, { forwardRef, Fragment, useCallback, useMemo, useRef, useState } from 'react';
+import React, { Fragment, forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
 import { useKey, useKeyPressEvent } from 'react-use';
 
 import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId';
 import { useActiveRequest } from '../hooks/useActiveRequest';
-import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { useCreateFolder } from '../hooks/useCreateFolder';
-import { useCreateRequest } from '../hooks/useCreateRequest';
-import { useDeleteAnyRequest } from '../hooks/useDeleteAnyRequest';
+import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
 import { useDeleteFolder } from '../hooks/useDeleteFolder';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
-import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
+import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest';
+import { useDuplicateHttpRequest } from '../hooks/useDuplicateHttpRequest';
 import { useFolders } from '../hooks/useFolders';
+import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
+import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useKeyValue } from '../hooks/useKeyValue';
-import { useLatestResponse } from '../hooks/useLatestResponse';
+import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
+import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
 import { usePrompt } from '../hooks/usePrompt';
-import { useRequests } from '../hooks/useRequests';
 import { useSendManyRequests } from '../hooks/useSendFolder';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
-import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
-import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
+import { useUpdateAnyHttpRequest } from '../hooks/useUpdateAnyHttpRequest';
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
+import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
-import type { Folder, HttpRequest, Workspace } from '../lib/models';
+import type { Folder, GrpcRequest, HttpRequest, Workspace } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
+import type { DropdownItem } from './core/Dropdown';
 import { ContextMenu } from './core/Dropdown';
+import { HttpMethodTag } from './core/HttpMethodTag';
 import { Icon } from './core/Icon';
 import { InlineCode } from './core/InlineCode';
 import { VStack } from './core/Stacks';
@@ -48,38 +52,50 @@ enum ItemTypes {
 }
 
 interface TreeNode {
-  item: Workspace | Folder | HttpRequest;
+  item: Workspace | Folder | HttpRequest | GrpcRequest;
   children: TreeNode[];
   depth: number;
 }
 
 export function Sidebar({ className }: Props) {
-  const { hidden } = useSidebarHidden();
+  const { hidden, show, hide } = useSidebarHidden();
   const sidebarRef = useRef<HTMLLIElement>(null);
-  const activeRequestId = useActiveRequestId();
+  const activeRequest = useActiveRequest();
   const activeEnvironmentId = useActiveEnvironmentId();
-  const requests = useRequests();
+  const httpRequests = useHttpRequests();
+  const grpcRequests = useGrpcRequests();
   const folders = useFolders();
-  const deleteAnyRequest = useDeleteAnyRequest();
   const activeWorkspace = useActiveWorkspace();
-  const duplicateRequest = useDuplicateRequest({ id: activeRequestId, navigateAfter: true });
+  const duplicateHttpRequest = useDuplicateHttpRequest({
+    id: activeRequest?.id ?? null,
+    navigateAfter: true,
+  });
+  const duplicateGrpcRequest = useDuplicateGrpcRequest({
+    id: activeRequest?.id ?? null,
+    navigateAfter: true,
+  });
   const routes = useAppRoutes();
   const [hasFocus, setHasFocus] = useState<boolean>(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [selectedTree, setSelectedTree] = useState<TreeNode | null>(null);
-  const updateAnyRequest = useUpdateAnyRequest();
+  const updateAnyHttpRequest = useUpdateAnyHttpRequest();
+  const updateAnyGrpcRequest = useUpdateAnyGrpcRequest();
   const updateAnyFolder = useUpdateAnyFolder();
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const [hoveredTree, setHoveredTree] = useState<TreeNode | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const collapsed = useKeyValue<Record<string, boolean>>({
     key: ['sidebar_collapsed', activeWorkspace?.id ?? 'n/a'],
-    defaultValue: {},
+    fallback: {},
     namespace: NAMESPACE_NO_SYNC,
   });
 
-  useHotKey('request.duplicate', () => {
-    duplicateRequest.mutate();
+  useHotKey('http_request.duplicate', async () => {
+    if (activeRequest?.model === 'http_request') {
+      await duplicateHttpRequest.mutateAsync();
+    } else {
+      await duplicateGrpcRequest.mutateAsync();
+    }
   });
 
   const isCollapsed = useCallback(
@@ -87,9 +103,10 @@ export function Sidebar({ className }: Props) {
     [collapsed.value],
   );
 
-  const { tree, treeParentMap, selectableRequests } = useMemo<{
+  const { tree, treeParentMap, selectableRequests, selectedRequest } = useMemo<{
     tree: TreeNode | null;
     treeParentMap: Record<string, TreeNode>;
+    selectedRequest: HttpRequest | GrpcRequest | null;
     selectableRequests: {
       id: string;
       index: number;
@@ -102,15 +119,24 @@ export function Sidebar({ className }: Props) {
       index: number;
       tree: TreeNode;
     }[] = [];
+
     if (activeWorkspace == null) {
-      return { tree: null, treeParentMap, selectableRequests };
+      return { tree: null, treeParentMap, selectableRequests, selectedRequest: null };
     }
 
+    let selectedRequest: HttpRequest | GrpcRequest | null = null;
     let selectableRequestIndex = 0;
 
     // Put requests and folders into a tree structure
     const next = (node: TreeNode): TreeNode => {
-      const childItems = [...requests, ...folders].filter((f) =>
+      if (
+        node.item.id === selectedId &&
+        (node.item.model === 'http_request' || node.item.model === 'grpc_request')
+      ) {
+        selectedRequest = node.item;
+      }
+
+      const childItems = [...httpRequests, ...grpcRequests, ...folders].filter((f) =>
         node.item.model === 'workspace' ? f.folderId == null : f.folderId === node.item.id,
       );
 
@@ -119,7 +145,7 @@ export function Sidebar({ className }: Props) {
       for (const item of childItems) {
         treeParentMap[item.id] = node;
         node.children.push(next({ item, children: [], depth }));
-        if (item.model === 'http_request') {
+        if (item.model !== 'folder') {
           selectableRequests.push({ id: item.id, index: selectableRequestIndex++, tree: node });
         }
       }
@@ -128,8 +154,10 @@ export function Sidebar({ className }: Props) {
 
     const tree = next({ item: activeWorkspace, children: [], depth: 0 });
 
-    return { tree, treeParentMap, selectableRequests };
-  }, [activeWorkspace, requests, folders]);
+    return { tree, treeParentMap, selectableRequests, selectedRequest };
+  }, [activeWorkspace, selectedId, httpRequests, grpcRequests, folders]);
+
+  const deleteSelectedRequest = useDeleteRequest(selectedRequest);
 
   const focusActiveRequest = useCallback(
     (
@@ -142,25 +170,27 @@ export function Sidebar({ className }: Props) {
       } = {},
     ) => {
       const { forced, noFocusSidebar } = args;
-      const tree = forced?.tree ?? treeParentMap[activeRequestId ?? 'n/a'] ?? null;
+      const tree = forced?.tree ?? treeParentMap[activeRequest?.id ?? 'n/a'] ?? null;
       const children = tree?.children ?? [];
-      const id = forced?.id ?? children.find((m) => m.item.id === activeRequestId)?.item.id ?? null;
+      const id =
+        forced?.id ?? children.find((m) => m.item.id === activeRequest?.id)?.item.id ?? null;
+
+      setHasFocus(true);
+      setSelectedId(id);
+      setSelectedTree(tree);
+
       if (id == null) {
         return;
       }
-
-      setSelectedId(id);
-      setSelectedTree(tree);
-      setHasFocus(true);
       if (!noFocusSidebar) {
         sidebarRef.current?.focus();
       }
     },
-    [activeRequestId, treeParentMap],
+    [activeRequest, treeParentMap],
   );
 
   const handleSelect = useCallback(
-    (id: string) => {
+    async (id: string) => {
       const tree = treeParentMap[id ?? 'n/a'] ?? null;
       const children = tree?.children ?? [];
       const node = children.find((m) => m.item.id === id) ?? null;
@@ -171,7 +201,7 @@ export function Sidebar({ className }: Props) {
       const { item } = node;
 
       if (item.model === 'folder') {
-        collapsed.set((c) => ({ ...c, [item.id]: !c[item.id] }));
+        await collapsed.set((c) => ({ ...c, [item.id]: !c[item.id] }));
       } else {
         routes.navigate('request', {
           requestId: id,
@@ -199,22 +229,33 @@ export function Sidebar({ className }: Props) {
   const handleBlur = useCallback(() => setHasFocus(false), []);
 
   const handleDeleteKey = useCallback(
-    (e: KeyboardEvent) => {
+    async (e: KeyboardEvent) => {
       if (!hasFocus) return;
       e.preventDefault();
 
       const selected = selectableRequests.find((r) => r.id === selectedId);
       if (selected == null) return;
-      deleteAnyRequest.mutate(selected.id);
+      await deleteSelectedRequest.mutateAsync();
     },
-    [deleteAnyRequest, hasFocus, selectableRequests, selectedId],
+    [hasFocus, selectableRequests, deleteSelectedRequest, selectedId],
   );
 
   useKeyPressEvent('Backspace', handleDeleteKey);
   useKeyPressEvent('Delete', handleDeleteKey);
 
-  useHotKey('sidebar.focus', () => {
-    if (hidden || hasFocus) return;
+  useHotKey('sidebar.focus', async () => {
+    console.log('sidebar.focus', { hidden, hasFocus });
+    // Hide the sidebar if it's already focused
+    if (!hidden && hasFocus) {
+      await hide();
+      return;
+    }
+
+    // Show the sidebar if it's hidden
+    if (hidden) {
+      await show();
+    }
+
     // Select 0 index on focus if none selected
     focusActiveRequest(
       selectedTree != null && selectedId != null
@@ -226,7 +267,7 @@ export function Sidebar({ className }: Props) {
   useKeyPressEvent('Enter', (e) => {
     if (!hasFocus) return;
     const selected = selectableRequests.find((r) => r.id === selectedId);
-    if (!selected || selected.id === activeRequestId || activeWorkspace == null) {
+    if (!selected || selected.id === activeRequest?.id || activeWorkspace == null) {
       return;
     }
 
@@ -306,6 +347,11 @@ export function Sidebar({ className }: Props) {
         return;
       }
 
+      // Block dragging folder into itself
+      if (hoveredTree.item.id === itemId) {
+        return;
+      }
+
       const parentTree = treeParentMap[itemId] ?? null;
       const index = parentTree?.children.findIndex((n) => n.item.id === itemId) ?? -1;
       const child = parentTree?.children[index ?? -1];
@@ -339,9 +385,12 @@ export function Sidebar({ className }: Props) {
             if (child.item.model === 'folder') {
               const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
               return updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
+            } else if (child.item.model === 'grpc_request') {
+              const updateRequest = (r: GrpcRequest) => ({ ...r, sortPriority, folderId });
+              return updateAnyGrpcRequest.mutateAsync({ id: child.item.id, update: updateRequest });
             } else if (child.item.model === 'http_request') {
               const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
-              return updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
+              return updateAnyHttpRequest.mutateAsync({ id: child.item.id, update: updateRequest });
             }
           }),
         );
@@ -350,20 +399,24 @@ export function Sidebar({ className }: Props) {
         if (child.item.model === 'folder') {
           const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
           await updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
+        } else if (child.item.model === 'grpc_request') {
+          const updateRequest = (r: GrpcRequest) => ({ ...r, sortPriority, folderId });
+          await updateAnyGrpcRequest.mutateAsync({ id: child.item.id, update: updateRequest });
         } else if (child.item.model === 'http_request') {
           const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
-          await updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
+          await updateAnyHttpRequest.mutateAsync({ id: child.item.id, update: updateRequest });
         }
       }
       setDraggingId(null);
     },
     [
-      hoveredIndex,
-      hoveredTree,
       handleClearSelected,
+      hoveredTree,
+      hoveredIndex,
       treeParentMap,
       updateAnyFolder,
-      updateAnyRequest,
+      updateAnyGrpcRequest,
+      updateAnyHttpRequest,
     ],
   );
 
@@ -450,13 +503,21 @@ function SidebarItems({
         <Fragment key={child.item.id}>
           {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && <DropMarker />}
           <DraggableSidebarItem
+            draggable
             selected={selectedId === child.item.id}
             itemId={child.item.id}
             itemName={child.item.name}
             itemFallbackName={
-              child.item.model === 'http_request' ? fallbackRequestName(child.item) : 'New Folder'
+              child.item.model === 'http_request' || child.item.model === 'grpc_request'
+                ? fallbackRequestName(child.item)
+                : 'New Folder'
             }
             itemModel={child.item.model}
+            itemPrefix={
+              (child.item.model === 'http_request' || child.item.model === 'grpc_request') && (
+                <HttpMethodTag request={child.item} />
+              )
+            }
             onMove={handleMove}
             onEnd={handleEnd}
             onSelect={onSelect}
@@ -500,6 +561,7 @@ type SidebarItemProps = {
   itemName: string;
   itemFallbackName: string;
   itemModel: string;
+  itemPrefix: ReactNode;
   useProminentStyles?: boolean;
   selected?: boolean;
   draggable?: boolean;
@@ -515,36 +577,44 @@ const SidebarItem = forwardRef(function SidebarItem(
     itemFallbackName,
     itemId,
     itemModel,
+    itemPrefix,
     useProminentStyles,
     selected,
     onSelect,
     isCollapsed,
     child,
+    draggable,
   }: SidebarItemProps,
   ref: ForwardedRef<HTMLLIElement>,
 ) {
   const activeRequest = useActiveRequest();
-  const createRequest = useCreateRequest();
-  const createFolder = useCreateFolder();
   const deleteFolder = useDeleteFolder(itemId);
-  const deleteRequest = useDeleteRequest(itemId);
-  const duplicateRequest = useDuplicateRequest({ id: itemId, navigateAfter: true });
+  const deleteRequest = useDeleteRequest(activeRequest ?? null);
+  const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true });
+  const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
   const sendRequest = useSendRequest(itemId);
-  const sendAndDownloadRequest = useSendRequest(itemId, { download: true });
   const sendManyRequests = useSendManyRequests();
-  const latestResponse = useLatestResponse(itemId);
-  const updateRequest = useUpdateRequest(itemId);
+  const latestHttpResponse = useLatestHttpResponse(itemId);
+  const latestGrpcConnection = useLatestGrpcConnection(itemId);
+  const updateHttpRequest = useUpdateHttpRequest(itemId);
+  const updateGrpcRequest = useUpdateGrpcRequest(itemId);
   const updateAnyFolder = useUpdateAnyFolder();
   const prompt = usePrompt();
   const [editing, setEditing] = useState<boolean>(false);
   const isActive = activeRequest?.id === itemId;
+  const createDropdownItems = useCreateDropdownItems({ folderId: itemId });
 
   const handleSubmitNameEdit = useCallback(
     (el: HTMLInputElement) => {
-      updateRequest.mutate((r) => ({ ...r, name: el.value }));
+      if (activeRequest == null) return;
+      if (activeRequest.model === 'http_request') {
+        updateHttpRequest.mutate((r) => ({ ...r, name: el.value }));
+      } else if (activeRequest.model === 'grpc_request') {
+        updateGrpcRequest.mutate((r) => ({ ...r, name: el.value }));
+      }
       setEditing(false);
     },
-    [updateRequest],
+    [activeRequest, updateGrpcRequest, updateHttpRequest],
   );
 
   const handleFocus = useCallback((el: HTMLInputElement | null) => {
@@ -570,7 +640,7 @@ const SidebarItem = forwardRef(function SidebarItem(
   );
 
   const handleStartEditing = useCallback(() => {
-    if (itemModel !== 'http_request') return;
+    if (itemModel !== 'http_request' && itemModel !== 'grpc_request') return;
     setEditing(true);
   }, [setEditing, itemModel]);
 
@@ -594,8 +664,8 @@ const SidebarItem = forwardRef(function SidebarItem(
   }, []);
 
   return (
-    <li ref={ref}>
-      <div className={classNames(className, 'block relative group/item px-2 pb-0.5')}>
+    <li ref={ref} draggable={draggable}>
+      <div className={classNames(className, 'block relative group/item px-1.5 pb-0.5')}>
         <ContextMenu
           show={showContextMenu}
           items={
@@ -622,6 +692,7 @@ const SidebarItem = forwardRef(function SidebarItem(
                         ),
                         name: 'name',
                         label: 'Name',
+                        placeholder: 'New Name',
                         defaultValue: itemName,
                       });
                       updateAnyFolder.mutate({ id: itemId, update: (f) => ({ ...f, name }) });
@@ -635,37 +706,32 @@ const SidebarItem = forwardRef(function SidebarItem(
                     onSelect: () => deleteFolder.mutate(),
                   },
                   { type: 'separator' },
-                  {
-                    key: 'createRequest',
-                    label: 'New Request',
-                    leftSlot: <Icon icon="plus" />,
-                    onSelect: () => createRequest.mutate({ folderId: itemId }),
-                  },
-                  {
-                    key: 'createFolder',
-                    label: 'New Folder',
-                    leftSlot: <Icon icon="plus" />,
-                    onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }),
-                  },
+                  ...createDropdownItems,
                 ]
               : [
-                  {
-                    key: 'sendRequest',
-                    label: 'Send',
-                    hotKeyAction: 'request.send',
-                    hotKeyLabelOnly: true, // Already bound in URL bar
-                    leftSlot: <Icon icon="sendHorizontal" />,
-                    onSelect: () => sendRequest.mutate(),
-                  },
-                  { type: 'separator' },
+                  ...((itemModel === 'http_request'
+                    ? [
+                        {
+                          key: 'sendRequest',
+                          label: 'Send',
+                          hotKeyAction: 'http_request.send',
+                          hotKeyLabelOnly: true, // Already bound in URL bar
+                          leftSlot: <Icon icon="sendHorizontal" />,
+                          onSelect: () => sendRequest.mutate(),
+                        },
+                        { type: 'separator' },
+                      ]
+                    : []) as DropdownItem[]),
                   {
                     key: 'duplicateRequest',
                     label: 'Duplicate',
-                    hotKeyAction: 'request.duplicate',
+                    hotKeyAction: 'http_request.duplicate',
                     hotKeyLabelOnly: true, // Would trigger for every request (bad)
                     leftSlot: <Icon icon="copy" />,
                     onSelect: () => {
-                      duplicateRequest.mutate();
+                      itemModel === 'http_request'
+                        ? duplicateHttpRequest.mutate()
+                        : duplicateGrpcRequest.mutate();
                     },
                   },
                   {
@@ -688,7 +754,7 @@ const SidebarItem = forwardRef(function SidebarItem(
           data-active={isActive}
           data-selected={selected}
           className={classNames(
-            'w-full flex items-center text-sm h-xs px-2 rounded-md transition-colors',
+            'w-full flex gap-2 items-center text-sm h-xs px-1.5 rounded-md transition-colors',
             editing && 'ring-1 focus-within:ring-focus',
             isActive && 'bg-highlightSecondary text-gray-800',
             !isActive &&
@@ -701,31 +767,40 @@ const SidebarItem = forwardRef(function SidebarItem(
               size="sm"
               icon="chevronRight"
               className={classNames(
-                '-ml-0.5 mr-2 transition-transform',
+                'transition-transform opacity-50',
                 !isCollapsed(itemId) && 'transform rotate-90',
               )}
             />
           )}
-          {editing ? (
-            <input
-              ref={handleFocus}
-              defaultValue={itemName}
-              className="bg-transparent outline-none w-full"
-              onBlur={handleBlur}
-              onKeyDown={handleInputKeyDown}
-            />
-          ) : (
-            <span className="truncate">{itemName || itemFallbackName}</span>
-          )}
-          {latestResponse && (
+          <div className="flex items-end gap-2 min-w-0">
+            {itemPrefix}
+            {editing ? (
+              <input
+                ref={handleFocus}
+                defaultValue={itemName}
+                className="bg-transparent outline-none w-full"
+                onBlur={handleBlur}
+                onKeyDown={handleInputKeyDown}
+              />
+            ) : (
+              <span className="truncate">{itemName || itemFallbackName}</span>
+            )}
+          </div>
+          {latestGrpcConnection ? (
             <div className="ml-auto">
-              {isResponseLoading(latestResponse) ? (
-                <Icon spin size="sm" icon="update" />
-              ) : (
-                <StatusTag className="text-2xs dark:opacity-80" response={latestResponse} />
+              {latestGrpcConnection.elapsed === 0 && (
+                <Icon spin size="sm" icon="update" className="text-gray-400" />
               )}
             </div>
-          )}
+          ) : latestHttpResponse ? (
+            <div className="ml-auto">
+              {isResponseLoading(latestHttpResponse) ? (
+                <Icon spin size="sm" icon="update" className="text-gray-400" />
+              ) : (
+                <StatusTag className="text-2xs dark:opacity-80" response={latestHttpResponse} />
+              )}
+            </div>
+          ) : null}
         </button>
       </div>
       {children}
@@ -798,7 +873,6 @@ function DraggableSidebarItem({
   return (
     <SidebarItem
       ref={ref}
-      draggable
       className={classNames(isDragging && 'opacity-20')}
       itemName={itemName}
       itemId={itemId}

src-web/components/SidebarActions.tsx

@@ -1,23 +1,23 @@
 import { memo } from 'react';
-import { useCreateFolder } from '../hooks/useCreateFolder';
-import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { trackEvent } from '../lib/analytics';
-import { Dropdown } from './core/Dropdown';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
+import { CreateDropdown } from './CreateDropdown';
 
 export const SidebarActions = memo(function SidebarActions() {
-  const createRequest = useCreateRequest();
-  const createFolder = useCreateFolder();
-  const { hidden, toggle } = useSidebarHidden();
+  const { hidden, show, hide } = useSidebarHidden();
 
   return (
-    <HStack>
+    <HStack className="h-full" alignItems="center">
       <IconButton
-        onClick={() => {
-          trackEvent('Sidebar', 'Toggle');
-          toggle();
+        onClick={async () => {
+          trackEvent('sidebar', 'toggle');
+
+          // NOTE: We're not using `toggle` because it may be out of sync
+          // from changes in other windows
+          if (hidden) await show();
+          else await hide();
         }}
         className="pointer-events-auto"
         size="sm"
@@ -25,23 +25,9 @@ export const SidebarActions = memo(function SidebarActions() {
         hotkeyAction="sidebar.toggle"
         icon={hidden ? 'leftPanelHidden' : 'leftPanelVisible'}
       />
-      <Dropdown
-        items={[
-          {
-            key: 'create-request',
-            label: 'New Request',
-            hotKeyAction: 'request.create',
-            onSelect: () => createRequest.mutate({}),
-          },
-          {
-            key: 'create-folder',
-            label: 'New Folder',
-            onSelect: () => createFolder.mutate({}),
-          },
-        ]}
-      >
+      <CreateDropdown openOnHotKeyAction="http_request.create">
         <IconButton size="sm" icon="plusCircle" title="Add Resource" />
-      </Dropdown>
+      </CreateDropdown>
     </HStack>
   );
 });