diff --git a/.gitignore b/.gitignore
index 881e1a2..5dbd1a1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ frontend/dist/*
 *.swp
 .idea/
 .vscode/
+.nexum-data/
diff --git a/.golangci.yml b/.golangci.yml
index a1ebeb2..ef5a40c 100644
--- a/.golangci.yml
+++ b/.golangci.yml
@@ -18,6 +18,10 @@ issues:
     # Deferred Close() failures are not actionable here.
     - linters: [errcheck]
       source: "defer .*\\.Close\\(\\)"
+    # grpcurl's reflection API returns jhump/protoreflect/desc types; we can't
+    # migrate off the deprecated package without leaving grpcurl.
+    - linters: [staticcheck]
+      text: "SA1019: .*protoreflect/desc"
   # The nested scaffold under frontend/hypr is a separate module artifact.
   exclude-dirs:
     - frontend
diff --git a/README.md b/README.md
index ad1039d..d4c5e26 100644
--- a/README.md
+++ b/README.md
@@ -14,12 +14,17 @@ Build, send, and inspect HTTP requests from a native desktop app powered by a Go
 
 <img src="examples/hypr.png" alt="Hypr screenshot" width="820">
 
+<br>
+
+<img src="docs/images/ws.png" alt="Hypr WebSocket panel" width="820">
+
 </div>
 
 ## Features
 
 - ⚡ **Native & fast** — a single self-contained binary; the HTTP engine runs in Go, not a bundled browser runtime.
 - 🗂️ **Tabbed requests** — work on multiple requests side by side.
+- 🔌 **WebSocket & gRPC** — open live WebSocket streams or invoke gRPC methods (via server reflection); connections and output persist alongside your saved requests.
 - 🧩 **Header editor** — manage request headers as simple key/value pairs.
 - 📥 **Import from cURL** — paste a `curl` command and it's parsed, populated, and run instantly.
 - 🎨 **Syntax-highlighted responses** — pretty-printed JSON bodies and response headers.
diff --git a/app.go b/app.go
index f22c587..30dd556 100644
--- a/app.go
+++ b/app.go
@@ -8,14 +8,19 @@ import (
 	"io"
 	"net/http"
 	"strings"
+	"sync"
 	"time"
+
+	"github.com/gorilla/websocket"
 )
 
 // App struct
 type App struct {
-	ctx    context.Context
-	client *http.Client
-	store  *Store
+	ctx     context.Context
+	client  *http.Client
+	store   *Store
+	wsMu    sync.Mutex
+	wsConns map[string]*websocket.Conn
 }
 
 // NewApp creates a new App application struct
@@ -35,6 +40,7 @@ func (a *App) startup(ctx context.Context) {
 		Transport: tr,
 	}
 	a.ctx = ctx
+	a.wsConns = make(map[string]*websocket.Conn)
 
 	var err error
 	a.store, err = newStore()
diff --git a/docs/images/ws.png b/docs/images/ws.png
new file mode 100644
index 0000000..e2f808e
Binary files /dev/null and b/docs/images/ws.png differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 257945d..01efb75 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -14,6 +14,11 @@ import {
   ClearHistory,
   LoadSession,
   SaveSession,
+  ListEnvironments,
+  GetActiveEnvironment,
+  SetActiveEnvironment,
+  SaveEnvironment,
+  DeleteEnvironment,
 } from '../wailsjs/go/main/App'
 import {main} from '../wailsjs/go/models'
 import {
@@ -38,6 +43,11 @@ import {
   PanelLeftOpen,
   Layers,
   Check,
+  MoreHorizontal,
+  Columns3,
+  PlayCircle,
+  Globe,
+  Trash2,
 } from 'lucide-react'
 import {KVRow} from './components/kv-row'
 import {AuthForm} from './components/auth-form'
@@ -72,9 +82,16 @@ import {applyAuth, emptyAuth, type AuthState} from './lib/auth'
 import {defaultSettings, type ReqSettings} from './lib/settings'
 import {encodeFormBody, parseUrlParams, rebuildUrlWithParams} from './lib/url-sync'
 import {buildCurl} from './lib/curl-builder'
+import {buildFetch, buildGo, buildPython} from './lib/code-gen'
+import {substituteVars, envVars} from './lib/env'
+import {WsPanel} from './components/ws-panel'
+import {GrpcPanel} from './components/grpc-panel'
+import {NewRequestMenu, kindMeta} from './components/new-request-menu'
+import {PayloadDiff} from './components/payload-diff'
 import {formatDuration, formatSize, statusChipClass} from './lib/formatters'
 import {readDraft, writeDraft} from './lib/autosave'
 import {
+  emptyConn,
   emptyPayload,
   emptyRequest,
   emptyResult,
@@ -82,8 +99,11 @@ import {
   toStoredPayload,
   updatePayload,
   updateRequest,
+  type ConnConfig,
   type Payload,
+  type RequestKind,
   type RequestTab,
+  type WsLine,
 } from './lib/model'
 
 const METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'] as const
@@ -137,7 +157,13 @@ function App() {
   const [search, setSearch] = useState('')
   const [curlOpen, setCurlOpen] = useState(false)
   const [curlBody, setCurlBody] = useState('')
+  const [codeMenuOpen, setCodeMenuOpen] = useState(false)
   const [saveOpen, setSaveOpen] = useState(false)
+  const [environments, setEnvironments] = useState<main.Environment[]>([])
+  const [activeEnvId, setActiveEnvId] = useState('')
+  const [envOpen, setEnvOpen] = useState(false)
+  const [editEnv, setEditEnv] = useState<main.Environment | null>(null)
+  const [showDiff, setShowDiff] = useState(false)
 
   // Persistence state
   const [collections, setCollections] = useState<main.Collection[]>([])
@@ -160,17 +186,29 @@ function App() {
   const hasResponse = Boolean(
     result.Body || result.Error || result.HeadersStr || result.Status
   )
+  const activeEnv = environments.find((e) => e.id === activeEnvId)
+
+  function refreshEnvironments() {
+    ListEnvironments()
+      .then((e) => setEnvironments((e as main.Environment[]) ?? []))
+      .catch(() => {})
+    GetActiveEnvironment()
+      .then((e: any) => setActiveEnvId(e?.id ?? ''))
+      .catch(() => {})
+  }
 
   // ── Session persistence ───────────────────────────────────────
   function buildRequestState(r: RequestTab) {
     return {
       savedId: r.savedId ?? '',
+      kind: r.kind,
       method: r.method,
       url: r.url,
       auth: r.auth,
       settings: r.settings,
       payloads: r.payloads.map(toStoredPayload),
       activePayload: r.activePayload,
+      conn: r.conn,
     }
   }
 
@@ -210,6 +248,8 @@ function App() {
       jsonBody: p?.jsonBody || '',
       rawBody: p?.rawBody || '',
       formRows: p?.formRows?.length ? p.formRows : [emptyKV()],
+      gqlQuery: p?.gqlQuery || '',
+      gqlVars: p?.gqlVars || '',
       response: p?.response ? main.RequestResult.createFrom(p.response) : emptyResult(),
     }
   }
@@ -220,12 +260,14 @@ function App() {
       : [emptyPayload()]
     return {
       savedId: t?.savedId || undefined,
+      kind: (t?.kind as RequestKind) || 'rest',
       method: t?.method || 'GET',
       url: t?.url || '',
       auth: (t?.auth as AuthState) || emptyAuth(),
       settings: (t?.settings as ReqSettings) || defaultSettings(),
       payloads,
       activePayload: Math.min(t?.activePayload || 0, payloads.length - 1),
+      conn: {...emptyConn(), ...(t?.conn as Partial<ConnConfig>)},
     }
   }
 
@@ -261,15 +303,34 @@ function App() {
     ListHistory(50)
       .then((h) => setHistory((h as main.HistoryEntry[]) ?? []))
       .catch(() => {})
+
+    refreshEnvironments()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // ── Request-level tab plumbing ────────────────────────────────
-  const addRequest = () => {
-    setRequests((prev) => [...prev, emptyRequest()])
+  const addRequest = (kind: RequestKind = 'rest') => {
+    setRequests((prev) => [...prev, emptyRequest(kind)])
     setActiveRequest(requests.length)
   }
 
+  // Patch the active request's ws/grpc connection config.
+  const setConn = (patch: Partial<ConnConfig>) =>
+    setRequests((prev) => updateRequest(prev, activeRequest, {conn: {...prev[activeRequest].conn, ...patch}}))
+
+  // Append/clear the active ws tab's persisted stream log. Functional updates
+  // read the live conn so concurrent messages don't clobber each other.
+  const appendWsLine = (line: WsLine) =>
+    setRequests((prev) =>
+      updateRequest(prev, activeRequest, {
+        conn: {...prev[activeRequest].conn, wsLog: [...prev[activeRequest].conn.wsLog, line]},
+      })
+    )
+  const clearWsLog = () =>
+    setRequests((prev) =>
+      updateRequest(prev, activeRequest, {conn: {...prev[activeRequest].conn, wsLog: []}})
+    )
+
   const closeRequest = (e: React.MouseEvent, index: number) => {
     e.stopPropagation()
     if (requests.length === 1) return
@@ -366,14 +427,22 @@ function App() {
     setRequests((prev) => updatePayload(prev, activeRequest, pIdx, {rawBody: s}))
   const setFormRowsForPayload = (rows: KV[]) =>
     setRequests((prev) => updatePayload(prev, activeRequest, pIdx, {formRows: rows}))
+  const setGqlQuery = (s: string) =>
+    setRequests((prev) => updatePayload(prev, activeRequest, pIdx, {gqlQuery: s}))
+  const setGqlVars = (s: string) =>
+    setRequests((prev) => updatePayload(prev, activeRequest, pIdx, {gqlVars: s}))
 
   // ── Build the final RequestSpec for the active payload ────────
-  function buildSpec(): main.RequestSpec {
-    const userHeaders = kvToRecord(payload.headers)
+  // Build the RequestSpec for an arbitrary payload index of the active request.
+  // {{var}} tokens from the active environment are substituted into the final
+  // url, header values, and body at the very end.
+  function buildSpecFor(pi: number): main.RequestSpec {
+    const pl = req.payloads[pi] ?? emptyPayload()
+    const userHeaders = kvToRecord(pl.headers)
     const auth = applyAuth(req.auth)
     const mergedHeaders: Record<string, string> = {...userHeaders, ...auth.headers}
 
-    let finalUrl = rebuildUrlWithParams(req.url, payload.params)
+    let finalUrl = rebuildUrlWithParams(req.url, pl.params)
     if (auth.query.length) {
       try {
         const u = new URL(finalUrl)
@@ -388,25 +457,51 @@ function App() {
     }
 
     let body: main.BodySpec = main.BodySpec.createFrom({type: 'none', raw: ''})
-    if (payload.bodyType === 'json') {
-      const raw = payload.jsonBody
+    let methodOverride = req.method
+    if (pl.bodyType === 'graphql') {
+      let variables: unknown = {}
+      if (pl.gqlVars.trim()) {
+        try {
+          variables = JSON.parse(pl.gqlVars)
+        } catch {
+          variables = {}
+        }
+      }
+      const raw = JSON.stringify({query: pl.gqlQuery, variables})
+      if (!mergedHeaders['Content-Type']) {
+        mergedHeaders['Content-Type'] = 'application/json'
+      }
+      body = main.BodySpec.createFrom({type: 'raw', raw})
+      methodOverride = 'POST'
+    } else if (pl.bodyType === 'json') {
+      const raw = pl.jsonBody
       if (raw && !mergedHeaders['Content-Type']) {
         mergedHeaders['Content-Type'] = 'application/json'
       }
       body = main.BodySpec.createFrom({type: 'json', raw})
-    } else if (payload.bodyType === 'form') {
-      const raw = encodeFormBody(payload.formRows)
+    } else if (pl.bodyType === 'form') {
+      const raw = encodeFormBody(pl.formRows)
       if (raw && !mergedHeaders['Content-Type']) {
         mergedHeaders['Content-Type'] = 'application/x-www-form-urlencoded'
       }
       body = main.BodySpec.createFrom({type: 'form', raw})
-    } else if (payload.bodyType === 'raw') {
-      body = main.BodySpec.createFrom({type: 'raw', raw: payload.rawBody})
+    } else if (pl.bodyType === 'raw') {
+      body = main.BodySpec.createFrom({type: 'raw', raw: pl.rawBody})
+    }
+
+    // Environment {{var}} substitution.
+    const vars = envVars(activeEnv)
+    if (Object.keys(vars).length) {
+      finalUrl = substituteVars(finalUrl, vars)
+      for (const k of Object.keys(mergedHeaders)) {
+        mergedHeaders[k] = substituteVars(mergedHeaders[k], vars)
+      }
+      body = main.BodySpec.createFrom({type: body.type, raw: substituteVars(body.raw, vars)})
     }
 
     const s = req.settings
     return main.RequestSpec.createFrom({
-      method: req.method,
+      method: methodOverride,
       url: finalUrl,
       headers: mergedHeaders,
       body,
@@ -414,6 +509,64 @@ function App() {
     })
   }
 
+  const buildSpec = (): main.RequestSpec => buildSpecFor(pIdx)
+
+  // Fire every payload of the active request and store each response.
+  async function runAllPayloads() {
+    setLoading(true)
+    try {
+      for (let i = 0; i < req.payloads.length; i++) {
+        const spec = buildSpecFor(i)
+        try {
+          const r = await SendBinding(spec)
+          setRequests((prev) =>
+            updatePayload(prev, activeRequest, i, {response: r, lastRunAt: new Date().toISOString()})
+          )
+        } catch {
+          // continue with remaining payloads
+        }
+      }
+      setShowDiff(true)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // ── Environment editor ────────────────────────────────────────
+  const newEnvDraft = (): main.Environment =>
+    main.Environment.createFrom({id: genId(), name: 'New Env', vars: [emptyKV()]})
+
+  function openEnvEditor() {
+    const base = activeEnv ?? environments[0]
+    setEditEnv(base ? main.Environment.createFrom({...base, vars: [...(base.vars ?? [])]}) : newEnvDraft())
+    setEnvOpen(true)
+  }
+
+  function selectActiveEnv(id: string) {
+    setActiveEnvId(id)
+    SetActiveEnvironment(id).catch(() => {})
+  }
+
+  function patchEditEnv(patch: Partial<main.Environment>) {
+    setEditEnv((prev) => (prev ? main.Environment.createFrom({...prev, ...patch}) : prev))
+  }
+
+  async function saveEnvEditor() {
+    if (!editEnv) return
+    await SaveEnvironment(editEnv as any).catch(() => {})
+    selectActiveEnv(editEnv.id)
+    setEnvOpen(false)
+    refreshEnvironments()
+  }
+
+  async function deleteEditEnv() {
+    if (!editEnv) return
+    await DeleteEnvironment(editEnv.id).catch(() => {})
+    if (activeEnvId === editEnv.id) setActiveEnvId('')
+    setEnvOpen(false)
+    refreshEnvironments()
+  }
+
   const storeResponse = (r: main.RequestResult) => {
     setRequests((prev) => updatePayload(prev, activeRequest, pIdx, {response: r}))
     setResponseTab(r.Body ? 'body' : r.HeadersStr ? 'headers' : 'body')
@@ -503,6 +656,25 @@ function App() {
       bodyFlag: payload.bodyType === 'json' ? '--data-raw' : '-d',
     })
     navigator.clipboard.writeText(cmd)
+    setCodeMenuOpen(false)
+  }
+
+  function copyAsCode(lang: 'fetch' | 'go' | 'python') {
+    const spec = buildSpec()
+    const input = {
+      method: spec.method,
+      url: spec.url,
+      headers: spec.headers,
+      body: spec.body.raw || undefined,
+    }
+    const code =
+      lang === 'fetch'
+        ? buildFetch(input)
+        : lang === 'go'
+          ? buildGo(input)
+          : buildPython(input)
+    navigator.clipboard.writeText(code)
+    setCodeMenuOpen(false)
   }
 
   function copyBody() {
@@ -550,6 +722,25 @@ function App() {
     setCollections((updated as main.Collection[]) ?? [])
   }
 
+  // "+" on a collection: create a blank request of the chosen kind in it, then open it.
+  async function handleAddRequestToCollection(collectionId: string, kind: RequestKind) {
+    const id = genId()
+    const base = emptyRequest(kind)
+    const name = kind === 'ws' ? 'New WebSocket' : kind === 'grpc' ? 'New gRPC' : 'New request'
+    await SaveRequestBinding(collectionId, {
+      ...buildRequestState(base),
+      id,
+      name,
+      createdAt: '',
+      updatedAt: '',
+    } as any)
+    const updated = await ListCollections()
+    setCollections((updated as main.Collection[]) ?? [])
+    setFocusCollectionId(collectionId)
+    setRequests((prev) => [...prev, {...base, savedId: id}])
+    setActiveRequest(requests.length)
+  }
+
   async function handleClearHistory() {
     await ClearHistory()
     setHistory([])
@@ -586,8 +777,8 @@ function App() {
           focusCollectionId={focusCollectionId}
           onLoadRequest={loadRequestToTab}
           onLoadHistory={loadHistoryToTab}
-          onSaveRequest={() => setSaveOpen(true)}
           onNewTab={addRequest}
+          onAddRequestToCollection={handleAddRequestToCollection}
           onNewCollection={handleNewCollection}
           onDeleteCollection={handleDeleteCollection}
           onDeleteRequest={handleDeleteRequest}
@@ -627,28 +818,103 @@ function App() {
               </div>
             </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             {lastSaved && (
               <span
-                className="mr-1 flex items-center gap-1.5 text-[0.7rem] font-medium text-muted-foreground"
+                className="flex items-center gap-1 whitespace-nowrap text-[0.7rem] font-medium text-muted-foreground"
                 title={`Autosaved at ${formatClock(lastSaved)}`}
               >
                 <Check className="h-3.5 w-3.5 text-primary" />
-                Autosaved {formatClock(lastSaved)}
+                {formatClock(lastSaved)}
               </span>
             )}
-            <Button variant="outline" size="sm" onClick={() => setCurlOpen(true)}>
-              <Code2 />
-              Import cURL
-            </Button>
-            <Button variant="ghost" size="sm" onClick={copyAsCurl}>
-              <Copy />
-              Copy as cURL
+
+            <span className="mx-1 h-5 w-px bg-border/60" />
+
+            {/* Environment */}
+            <select
+              value={activeEnvId}
+              onChange={(e) => selectActiveEnv(e.target.value)}
+              className="h-8 rounded-md border border-border/70 bg-card/40 px-2 text-xs text-foreground"
+              title="Active environment"
+            >
+              <option value="">No env</option>
+              {environments.map((e) => (
+                <option key={e.id} value={e.id}>
+                  {e.name}
+                </option>
+              ))}
+            </select>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={openEnvEditor}
+              title="Manage environments"
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <Globe className="h-4 w-4" />
             </Button>
-            <Button variant="ghost" size="sm" onClick={handleExport}>
-              <Download />
-              Export
+
+            <span className="mx-1 h-5 w-px bg-border/60" />
+
+            {/* Request actions */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurlOpen(true)}
+              className="h-8 gap-1.5 px-2.5 text-xs"
+            >
+              <Code2 className="h-3.5 w-3.5" />
+              Import cURL
             </Button>
+            <div className="relative">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => setCodeMenuOpen((p) => !p)}
+                title="Copy as / Export"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+              {codeMenuOpen && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setCodeMenuOpen(false)}
+                  />
+                  <div className="absolute right-0 z-20 mt-1 w-44 overflow-hidden rounded-md border border-border/70 bg-popover p-1 shadow-md">
+                    <div className="px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground/70">
+                      Copy as
+                    </div>
+                    {(['cURL', 'fetch', 'Go', 'Python'] as const).map((label) => (
+                      <button
+                        key={label}
+                        onClick={() =>
+                          label === 'cURL'
+                            ? copyAsCurl()
+                            : copyAsCode(label.toLowerCase() as 'fetch' | 'go' | 'python')
+                        }
+                        className="block w-full rounded-sm px-2.5 py-1.5 text-left text-sm text-foreground hover:bg-primary/15 hover:text-primary"
+                      >
+                        {label}
+                      </button>
+                    ))}
+                    <div className="my-1 h-px bg-border/60" />
+                    <button
+                      onClick={() => {
+                        handleExport()
+                        setCodeMenuOpen(false)
+                      }}
+                      className="flex w-full items-center gap-2 rounded-sm px-2.5 py-1.5 text-left text-sm text-foreground hover:bg-primary/15 hover:text-primary"
+                    >
+                      <Download className="h-3.5 w-3.5" />
+                      Export…
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
           </div>
         </header>
 
@@ -657,8 +923,9 @@ function App() {
         {/* ── Request tabs (top level) ────────────────────────── */}
         <div className="mb-3 flex items-center gap-2">
           <div className="flex flex-1 items-center gap-1.5 overflow-x-auto pb-1">
-            {requests.map((_, index) => {
+            {requests.map((r, index) => {
               const active = index === activeRequest
+              const KindIcon = kindMeta(r.kind).icon
               return (
                 <button
                   key={index}
@@ -670,13 +937,19 @@ function App() {
                       : 'border-border/70 bg-card/40 text-muted-foreground hover:border-border hover:text-foreground',
                   ].join(' ')}
                 >
-                  <span
-                    className={[
-                      'h-1.5 w-1.5 rounded-full',
-                      active ? 'bg-primary' : 'bg-muted-foreground/40',
-                    ].join(' ')}
-                  />
-                  REQ {String(index + 1).padStart(2, '0')}
+                  {r.kind === 'rest' ? (
+                    <span
+                      className={[
+                        'h-1.5 w-1.5 rounded-full',
+                        active ? 'bg-primary' : 'bg-muted-foreground/40',
+                      ].join(' ')}
+                    />
+                  ) : (
+                    <KindIcon className="h-3.5 w-3.5" />
+                  )}
+                  {r.kind === 'rest'
+                    ? `REQ ${String(index + 1).padStart(2, '0')}`
+                    : `${kindMeta(r.kind).label} ${String(index + 1).padStart(2, '0')}`}
                   {requests.length > 1 && (
                     <span
                       role="button"
@@ -692,16 +965,28 @@ function App() {
             })}
           </div>
           <Button
-            variant="outline"
-            size="icon"
-            onClick={addRequest}
-            className="h-10 w-10 shrink-0 border-primary/30 text-primary hover:bg-primary/15 hover:text-primary"
-            aria-label="New request"
+            variant="ghost"
+            size="sm"
+            onClick={() => setSaveOpen(true)}
+            className="h-10 shrink-0 gap-1.5 border border-border/70 bg-card/40 px-3 text-muted-foreground hover:border-primary/30 hover:bg-primary/10 hover:text-primary"
           >
-            <Plus />
+            <Save className="h-3.5 w-3.5" />
+            Save
           </Button>
+          <NewRequestMenu onPick={addRequest}>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 shrink-0 border-primary/30 text-primary hover:bg-primary/15 hover:text-primary"
+              aria-label="New request"
+            >
+              <Plus />
+            </Button>
+          </NewRequestMenu>
         </div>
 
+        {req.kind === 'rest' ? (
+        <>
         {/* ── Request bar (shared URL + method) ───────────────── */}
         <div className="flex flex-col gap-2.5 rounded-xl border border-border/80 bg-card/60 p-2.5 backdrop-blur-sm sm:flex-row sm:items-center">
           <Select value={method} onValueChange={setMethod}>
@@ -750,8 +1035,9 @@ function App() {
             Payloads
           </div>
           <div className="flex flex-1 items-center gap-1.5 overflow-x-auto pb-1">
-            {req.payloads.map((_, index) => {
+            {req.payloads.map((p, index) => {
               const active = index === pIdx
+              const pr = p.response
               return (
                 <button
                   key={index}
@@ -764,6 +1050,12 @@ function App() {
                   ].join(' ')}
                 >
                   P{index + 1}
+                  {pr?.DurationMs > 0 && (
+                    <span className="font-mono text-[0.65rem] font-normal text-muted-foreground/70">
+                      {formatDuration(pr.DurationMs)}
+                      {pr.SizeBytes > 0 && ` · ${formatSize(pr.SizeBytes)}`}
+                    </span>
+                  )}
                   {req.payloads.length > 1 && (
                     <span
                       role="button"
@@ -778,6 +1070,29 @@ function App() {
               )
             })}
           </div>
+          {req.payloads.length > 1 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={runAllPayloads}
+              disabled={loading || !url}
+              className="h-7 shrink-0 gap-1.5 text-muted-foreground hover:text-primary"
+            >
+              <PlayCircle className="h-3.5 w-3.5" />
+              Run all
+            </Button>
+          )}
+          {req.payloads.length > 1 && (
+            <Button
+              variant={showDiff ? 'secondary' : 'ghost'}
+              size="sm"
+              onClick={() => setShowDiff((p) => !p)}
+              className="h-7 shrink-0 gap-1.5 text-muted-foreground hover:text-primary"
+            >
+              <Columns3 className="h-3.5 w-3.5" />
+              Diff
+            </Button>
+          )}
           <Button
             variant="outline"
             size="icon-sm"
@@ -788,6 +1103,11 @@ function App() {
             <Plus className="h-3.5 w-3.5" />
           </Button>
         </div>
+        {showDiff && req.payloads.length > 1 && (
+          <section className="mt-3 rounded-xl border border-border/80 bg-card/50 p-3 backdrop-blur-sm">
+            <PayloadDiff payloads={req.payloads} />
+          </section>
+        )}
 
         {/* ── Request editor (Headers / Params / Body / Auth / Settings) ── */}
         <section className="mt-3 rounded-xl border border-border/80 bg-card/50 p-4 backdrop-blur-sm">
@@ -893,6 +1213,10 @@ function App() {
                 onRawChange={setRawBody}
                 formRows={payload.formRows}
                 onFormRowsChange={setFormRowsForPayload}
+                gqlQuery={payload.gqlQuery}
+                onGqlQueryChange={setGqlQuery}
+                gqlVars={payload.gqlVars}
+                onGqlVarsChange={setGqlVars}
               />
             </TabsContent>
 
@@ -1077,6 +1401,35 @@ function App() {
             </div>
           )}
         </div>
+        </>
+        ) : req.kind === 'ws' ? (
+          <div className="mt-4 flex min-h-0 flex-1 flex-col">
+            <WsPanel
+              key={`ws-${activeRequest}`}
+              url={req.conn.wsUrl}
+              onUrlChange={(s) => setConn({wsUrl: s})}
+              lines={req.conn.wsLog}
+              onAppend={appendWsLine}
+              onClear={clearWsLog}
+            />
+          </div>
+        ) : (
+          <div className="mt-4 flex min-h-0 flex-1 flex-col">
+            <GrpcPanel
+              key={`grpc-${activeRequest}`}
+              target={req.conn.grpcTarget}
+              onTargetChange={(s) => setConn({grpcTarget: s})}
+              plaintext={req.conn.grpcPlaintext}
+              onPlaintextChange={(b) => setConn({grpcPlaintext: b})}
+              method={req.conn.grpcMethod}
+              onMethodChange={(s) => setConn({grpcMethod: s})}
+              body={req.conn.grpcBody}
+              onBodyChange={(s) => setConn({grpcBody: s})}
+              response={req.conn.grpcResponse}
+              onResponseChange={(s) => setConn({grpcResponse: s})}
+            />
+          </div>
+        )}
       </main>
 
       {/* ── cURL import dialog ──────────────────────────────── */}
@@ -1113,12 +1466,112 @@ function App() {
         </DialogContent>
       </Dialog>
 
+      {/* ── Environment editor dialog ───────────────────────── */}
+      <Dialog open={envOpen} onOpenChange={setEnvOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Globe className="h-4 w-4 text-primary" />
+              Environments
+            </DialogTitle>
+            <DialogDescription>
+              Variables here are substituted into url, headers, and body as{' '}
+              <code>{'{{name}}'}</code> at send time.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3 p-5">
+            <div className="flex items-center gap-2">
+              <select
+                value={editEnv?.id ?? ''}
+                onChange={(e) => {
+                  const found = environments.find((x) => x.id === e.target.value)
+                  setEditEnv(
+                    found
+                      ? main.Environment.createFrom({...found, vars: [...(found.vars ?? [])]})
+                      : newEnvDraft()
+                  )
+                }}
+                className="h-9 flex-1 rounded-md border border-border/70 bg-card/40 px-2 text-sm"
+              >
+                {environments.every((e) => e.id !== editEnv?.id) && editEnv && (
+                  <option value={editEnv.id}>{editEnv.name} (new)</option>
+                )}
+                {environments.map((e) => (
+                  <option key={e.id} value={e.id}>
+                    {e.name}
+                  </option>
+                ))}
+              </select>
+              <Button variant="outline" size="sm" onClick={() => setEditEnv(newEnvDraft())}>
+                <Plus className="h-3.5 w-3.5" />
+                New
+              </Button>
+            </div>
+            {editEnv && (
+              <>
+                <Input
+                  value={editEnv.name}
+                  onChange={(e) => patchEditEnv({name: e.target.value})}
+                  placeholder="Environment name"
+                  className="h-9 text-sm"
+                />
+                <div className="flex flex-col gap-2">
+                  {editEnv.vars.map((row, idx) => (
+                    <KVRow
+                      key={idx}
+                      row={row}
+                      index={idx}
+                      total={editEnv.vars.length}
+                      keyPlaceholder="VAR_NAME"
+                      onChange={(i, field, value) =>
+                        patchEditEnv({vars: setRow(editEnv.vars as any, i, field, value) as any})
+                      }
+                      onRemove={(i) => patchEditEnv({vars: dropRow(editEnv.vars as any, i) as any})}
+                    />
+                  ))}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => patchEditEnv({vars: appendRow(editEnv.vars as any) as any})}
+                    className="self-start text-muted-foreground"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    Add variable
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+          <DialogFooter>
+            {editEnv && environments.some((e) => e.id === editEnv.id) && (
+              <Button variant="outline" onClick={deleteEditEnv} className="mr-auto text-destructive">
+                <Trash2 className="h-3.5 w-3.5" />
+                Delete
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => setEnvOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={saveEnvEditor} disabled={!editEnv}>
+              <Save />
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* ── Save request dialog ─────────────────────────────── */}
       <SaveRequestDialog
         open={saveOpen}
         onOpenChange={setSaveOpen}
         collections={collections}
-        defaultName={`${method} ${url || 'request'}`}
+        defaultName={
+          req.kind === 'ws'
+            ? req.conn.wsUrl || 'WebSocket request'
+            : req.kind === 'grpc'
+              ? req.conn.grpcMethod || req.conn.grpcTarget || 'gRPC request'
+              : `${method} ${url || 'request'}`
+        }
         onSave={handleSaveRequest}
         onCreateCollection={handleNewCollection}
       />
diff --git a/frontend/src/components/body-editor.tsx b/frontend/src/components/body-editor.tsx
index aeb2aae..22ac857 100644
--- a/frontend/src/components/body-editor.tsx
+++ b/frontend/src/components/body-editor.tsx
@@ -5,7 +5,7 @@ import {Tabs, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import {KVRow} from '@/components/kv-row'
 import type {KV} from '@/lib/kv'
 
-export type BodyType = 'none' | 'json' | 'form' | 'raw'
+export type BodyType = 'none' | 'json' | 'form' | 'raw' | 'graphql'
 
 interface BodyEditorProps {
   bodyType: BodyType
@@ -16,6 +16,10 @@ interface BodyEditorProps {
   onRawChange: (s: string) => void
   formRows: KV[]
   onFormRowsChange: (rows: KV[]) => void
+  gqlQuery: string
+  onGqlQueryChange: (s: string) => void
+  gqlVars: string
+  onGqlVarsChange: (s: string) => void
 }
 
 export function BodyEditor(props: BodyEditorProps) {
@@ -71,6 +75,12 @@ export function BodyEditor(props: BodyEditorProps) {
             >
               Raw
             </TabsTrigger>
+            <TabsTrigger
+              value="graphql"
+              className="rounded-sm px-2.5 text-xs data-[state=active]:bg-primary/15 data-[state=active]:text-primary"
+            >
+              GraphQL
+            </TabsTrigger>
           </TabsList>
         </Tabs>
 
@@ -137,6 +147,35 @@ export function BodyEditor(props: BodyEditorProps) {
           className="min-h-[260px] resize-none font-mono text-[0.8125rem] leading-relaxed"
         />
       )}
+
+      {props.bodyType === 'graphql' && (
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+              Query
+            </span>
+            <Textarea
+              value={props.gqlQuery}
+              onChange={(e) => props.onGqlQueryChange(e.target.value)}
+              placeholder="query { ... }"
+              spellCheck={false}
+              className="min-h-[160px] resize-none font-mono text-[0.8125rem] leading-relaxed"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+              Variables
+            </span>
+            <Textarea
+              value={props.gqlVars}
+              onChange={(e) => props.onGqlVarsChange(e.target.value)}
+              placeholder='{"key": "value"}'
+              spellCheck={false}
+              className="min-h-[100px] resize-none font-mono text-[0.8125rem] leading-relaxed"
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/components/grpc-panel.tsx b/frontend/src/components/grpc-panel.tsx
new file mode 100644
index 0000000..d809d79
--- /dev/null
+++ b/frontend/src/components/grpc-panel.tsx
@@ -0,0 +1,188 @@
+import {useRef, useState} from 'react'
+import {GRPCListServices, GRPCInvoke, GRPCMethodTemplate} from '../../wailsjs/go/main/App'
+import {Button} from '@/components/ui/button'
+import {Input} from '@/components/ui/input'
+import {Textarea} from '@/components/ui/textarea'
+import {JsonView} from '@/components/json-view'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {Loader2, List as ListIcon, Play, Braces, AlertTriangle} from 'lucide-react'
+
+interface GrpcPanelProps {
+  target: string
+  onTargetChange: (s: string) => void
+  plaintext: boolean
+  onPlaintextChange: (b: boolean) => void
+  method: string
+  onMethodChange: (s: string) => void
+  body: string
+  onBodyChange: (s: string) => void
+  // Last invoke response is lifted into the persisted tab state (like a REST
+  // response); the method list / busy flags stay local and transient.
+  response: string
+  onResponseChange: (s: string) => void
+}
+
+export function GrpcPanel({
+  target,
+  onTargetChange,
+  plaintext,
+  onPlaintextChange,
+  method,
+  onMethodChange,
+  body,
+  onBodyChange,
+  response,
+  onResponseChange,
+}: GrpcPanelProps) {
+  const [methods, setMethods] = useState<string[]>([])
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  // Latest method a fill was requested for, so a slow fetch can't overwrite a
+  // newer selection.
+  const pending = useRef('')
+
+  async function list() {
+    setError('')
+    setBusy(true)
+    try {
+      const m = await GRPCListServices(target, plaintext)
+      setMethods(m)
+      if (m.length && !m.includes(method)) pickMethod(m[0])
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Selecting a method loads that method's request template into the body.
+  async function pickMethod(m: string) {
+    onMethodChange(m)
+    pending.current = m
+    try {
+      const tmpl = await GRPCMethodTemplate(target, m, plaintext)
+      if (pending.current !== m) return // superseded by a newer selection
+      onBodyChange(tmpl)
+    } catch {
+      // leave the body as-is if the template can't be fetched
+    }
+  }
+
+  async function invoke() {
+    setError('')
+    onResponseChange('')
+    setBusy(true)
+    try {
+      const out = await GRPCInvoke(target, method, body, {}, plaintext)
+      onResponseChange(out)
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-3">
+      {/* Target bar */}
+      <div className="flex items-center gap-2 rounded-xl border border-border/80 bg-card/60 p-2 backdrop-blur-sm">
+        <Input
+          value={target}
+          onChange={(e) => onTargetChange(e.target.value)}
+          placeholder="host:port"
+          className="h-9 flex-1 border-0 bg-transparent font-mono text-sm focus-visible:ring-0"
+        />
+        <button
+          type="button"
+          onClick={() => onPlaintextChange(!plaintext)}
+          className={[
+            'h-8 shrink-0 rounded-md border px-2.5 font-mono text-xs font-semibold transition-colors',
+            plaintext
+              ? 'border-primary/40 bg-primary/15 text-primary'
+              : 'border-border/70 bg-card/40 text-muted-foreground hover:text-foreground',
+          ].join(' ')}
+          title="Toggle plaintext (no TLS)"
+        >
+          plaintext
+        </button>
+        <Button size="sm" variant="secondary" onClick={list} disabled={busy || !target}>
+          {busy ? (
+            <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+          ) : (
+            <ListIcon className="mr-1 h-4 w-4" />
+          )}
+          List
+        </Button>
+      </div>
+
+      {/* Method + request */}
+      <div className="flex min-h-0 flex-1 flex-col gap-3 rounded-xl border border-border/80 bg-card/40 p-3 backdrop-blur-sm">
+        <div className="flex items-center gap-2">
+          <span className="flex items-center gap-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <Braces className="h-3.5 w-3.5" />
+            Method
+          </span>
+          {methods.length > 0 ? (
+            <Select value={method} onValueChange={pickMethod}>
+              <SelectTrigger className="h-9 flex-1 font-mono text-sm">
+                <SelectValue placeholder="Select a method" />
+              </SelectTrigger>
+              <SelectContent>
+                {methods.map((m) => (
+                  <SelectItem key={m} value={m} className="font-mono text-sm">
+                    {m}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <span className="text-xs text-muted-foreground/60">
+              List services to choose a method.
+            </span>
+          )}
+        </div>
+
+        <Textarea
+          value={body}
+          onChange={(e) => onBodyChange(e.target.value)}
+          placeholder="request JSON"
+          spellCheck={false}
+          className="min-h-24 flex-1 resize-none font-mono text-[0.8125rem] leading-relaxed"
+        />
+
+        <Button size="sm" onClick={invoke} disabled={busy || !method} className="self-start">
+          {busy ? (
+            <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+          ) : (
+            <Play className="mr-1 h-4 w-4" />
+          )}
+          Invoke
+        </Button>
+      </div>
+
+      {error && (
+        <div className="flex items-start gap-2 rounded-xl border border-destructive/25 bg-destructive/10 p-3 text-[0.8125rem] text-destructive">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
+          <pre className="whitespace-pre-wrap break-words font-mono">{error}</pre>
+        </div>
+      )}
+
+      {response && (
+        <div className="overflow-hidden rounded-xl border border-border/80 bg-card/40 backdrop-blur-sm">
+          <div className="border-b border-border/60 px-3 py-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            Response
+          </div>
+          <div className="max-h-64 overflow-auto bg-background/40 p-3">
+            <JsonView data={response} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/new-request-menu.tsx b/frontend/src/components/new-request-menu.tsx
new file mode 100644
index 0000000..23752e5
--- /dev/null
+++ b/frontend/src/components/new-request-menu.tsx
@@ -0,0 +1,57 @@
+import {useState, type ReactNode} from 'react'
+import {Globe, Radio, Network} from 'lucide-react'
+import {cn} from '@/lib/utils'
+import type {RequestKind} from '@/lib/model'
+
+// Shared metadata for the three request kinds — label/icon reused by the menu,
+// request tabs, and sidebar badges.
+export const KINDS: {kind: RequestKind; label: string; icon: typeof Globe}[] = [
+  {kind: 'rest', label: 'REST', icon: Globe},
+  {kind: 'ws', label: 'WebSocket', icon: Radio},
+  {kind: 'grpc', label: 'gRPC', icon: Network},
+]
+
+export const kindMeta = (k: RequestKind) => KINDS.find((x) => x.kind === k) ?? KINDS[0]
+
+interface NewRequestMenuProps {
+  onPick: (kind: RequestKind) => void
+  children: ReactNode
+  align?: 'left' | 'right'
+}
+
+export function NewRequestMenu({onPick, children, align = 'right'}: NewRequestMenuProps) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className="relative">
+      <div onClick={() => setOpen((p) => !p)}>{children}</div>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div
+            className={cn(
+              'absolute z-20 mt-1 w-44 overflow-hidden rounded-md border border-border/70 bg-popover p-1 shadow-md',
+              align === 'right' ? 'right-0' : 'left-0'
+            )}
+          >
+            <div className="px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground/70">
+              New request
+            </div>
+            {KINDS.map(({kind, label, icon: Icon}) => (
+              <button
+                key={kind}
+                onClick={() => {
+                  onPick(kind)
+                  setOpen(false)
+                }}
+                className="flex w-full items-center gap-2 rounded-sm px-2.5 py-1.5 text-left text-sm text-foreground hover:bg-primary/15 hover:text-primary"
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/payload-diff.tsx b/frontend/src/components/payload-diff.tsx
new file mode 100644
index 0000000..1a73407
--- /dev/null
+++ b/frontend/src/components/payload-diff.tsx
@@ -0,0 +1,51 @@
+import {type Payload} from '@/lib/model'
+import {formatDuration, formatSize, statusChipClass} from '@/lib/formatters'
+
+// Line-level diff vs the first payload's body: a line present in the baseline
+// set is "same", otherwise "added". ponytail: set-based, not positional LCS —
+// enough to eyeball which payloads diverge. Upgrade to a real diff if ordering
+// matters.
+function diffLines(baseline: string, body: string) {
+  const baseSet = new Set(baseline.split('\n'))
+  return body.split('\n').map((line) => ({line, same: baseSet.has(line)}))
+}
+
+export function PayloadDiff({payloads}: {payloads: Payload[]}) {
+  const baseline = payloads[0]?.response?.Body ?? ''
+  return (
+    <div className="flex gap-3 overflow-auto">
+      {payloads.map((p, i) => {
+        const r = p.response
+        const lines = diffLines(baseline, r?.Body ?? '')
+        return (
+          <div key={i} className="min-w-[16rem] flex-1 rounded-md border">
+            <div className="flex items-center gap-2 border-b px-2 py-1.5 text-xs">
+              <span className="font-medium">P{i + 1}</span>
+              {r?.Status ? (
+                <span className={statusChipClass(r.Status)}>{r.Status}</span>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              )}
+              {r?.DurationMs ? (
+                <span className="text-muted-foreground">{formatDuration(r.DurationMs)}</span>
+              ) : null}
+              {r?.SizeBytes ? (
+                <span className="text-muted-foreground">{formatSize(r.SizeBytes)}</span>
+              ) : null}
+            </div>
+            <pre className="max-h-80 overflow-auto p-2 font-mono text-xs leading-relaxed">
+              {lines.map((l, j) => (
+                <div
+                  key={j}
+                  className={l.same ? '' : 'bg-amber-500/15 text-amber-600 dark:text-amber-400'}
+                >
+                  {l.line || ' '}
+                </div>
+              ))}
+            </pre>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index e7c0bbf..c5b4fe1 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@@ -7,7 +7,6 @@ import {
   Clock,
   Plus,
   Trash2,
-  BookMarked,
   FileText,
 } from 'lucide-react'
 import {Button} from '@/components/ui/button'
@@ -15,6 +14,8 @@ import {Separator} from '@/components/ui/separator'
 import {cn} from '@/lib/utils'
 import {main} from '../../wailsjs/go/models'
 import {formatDuration, statusChipClass} from '@/lib/formatters'
+import {NewRequestMenu} from '@/components/new-request-menu'
+import type {RequestKind} from '@/lib/model'
 
 interface SidebarProps {
   collections: main.Collection[]
@@ -26,8 +27,23 @@ interface SidebarProps {
   onDeleteCollection: (id: string) => void
   onDeleteRequest: (collectionId: string, reqId: string) => void
   onClearHistory: () => void
-  onSaveRequest: () => void
-  onNewTab: () => void
+  onNewTab: (kind: RequestKind) => void
+  onAddRequestToCollection: (collectionId: string, kind: RequestKind) => void
+}
+
+const KIND_LABEL: Record<string, string> = {ws: 'WS', grpc: 'gRPC'}
+
+// Saved requests show their protocol: a short kind tag for ws/grpc, the HTTP method otherwise.
+function RequestBadge({req}: {req: main.SavedRequest}) {
+  const kind = (req as unknown as {kind?: string}).kind
+  if (kind && KIND_LABEL[kind]) {
+    return (
+      <span className="shrink-0 font-mono text-[0.65rem] font-bold text-primary/80">
+        {KIND_LABEL[kind]}
+      </span>
+    )
+  }
+  return <MethodBadge method={req.method} />
 }
 
 const METHOD_COLOR: Record<string, string> = {
@@ -58,8 +74,8 @@ export function Sidebar({
   onDeleteCollection,
   onDeleteRequest,
   onClearHistory,
-  onSaveRequest,
   onNewTab,
+  onAddRequestToCollection,
 }: SidebarProps) {
   const [collectionsOpen, setCollectionsOpen] = useState(true)
   const [historyOpen, setHistoryOpen] = useState(true)
@@ -95,24 +111,13 @@ export function Sidebar({
   return (
     <aside className="flex w-[240px] shrink-0 flex-col border-r border-border/60 bg-card/30">
       {/* Action buttons */}
-      <div className="flex flex-col gap-2 p-3">
-        <Button
-          size="sm"
-          className="w-full gap-1.5"
-          onClick={onNewTab}
-        >
-          <Plus className="h-3.5 w-3.5" />
-          New Request
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          className="w-full gap-1.5 border-primary/30 text-primary hover:bg-primary/15 hover:text-primary"
-          onClick={onSaveRequest}
-        >
-          <BookMarked className="h-3.5 w-3.5" />
-          Save Request
-        </Button>
+      <div className="p-3">
+        <NewRequestMenu onPick={onNewTab} align="left">
+          <Button size="sm" className="w-full gap-1.5">
+            <Plus className="h-3.5 w-3.5" />
+            New Request
+          </Button>
+        </NewRequestMenu>
       </div>
 
       <Separator className="bg-border/50" />
@@ -164,6 +169,18 @@ export function Sidebar({
                           {col.requests.length}
                         </span>
                       </button>
+                      <NewRequestMenu
+                        onPick={(k) => onAddRequestToCollection(col.id, k)}
+                        align="right"
+                      >
+                        <button
+                          className="hidden h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/50 hover:bg-primary/15 hover:text-primary group-hover:flex"
+                          aria-label="Add request to collection"
+                          title="Add request"
+                        >
+                          <Plus className="h-3 w-3" />
+                        </button>
+                      </NewRequestMenu>
                       <button
                         onClick={() => onDeleteCollection(col.id)}
                         className="hidden h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground/50 hover:bg-destructive/20 hover:text-destructive group-hover:flex"
@@ -186,7 +203,7 @@ export function Sidebar({
                               onClick={() => onLoadRequest(req)}
                               className="flex flex-1 items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-primary/10"
                             >
-                              <MethodBadge method={req.method} />
+                              <RequestBadge req={req} />
                               <span className="truncate text-[0.7rem] text-foreground/70">
                                 {req.name}
                               </span>
diff --git a/frontend/src/components/ws-panel.tsx b/frontend/src/components/ws-panel.tsx
new file mode 100644
index 0000000..9ae6c20
--- /dev/null
+++ b/frontend/src/components/ws-panel.tsx
@@ -0,0 +1,189 @@
+import {useEffect, useRef, useState} from 'react'
+import {WSConnect, WSSend, WSClose} from '../../wailsjs/go/main/App'
+import {EventsOn} from '../../wailsjs/runtime/runtime'
+import {Button} from '@/components/ui/button'
+import {Input} from '@/components/ui/input'
+import {Plug, PlugZap, Send as SendIcon, Radio, Trash2} from 'lucide-react'
+import type {WsLine} from '@/lib/model'
+
+const clock = (ms: number) =>
+  new Date(ms).toLocaleTimeString([], {hour12: false})
+
+interface WsPanelProps {
+  url: string
+  onUrlChange: (url: string) => void
+  // Stream log is lifted into the persisted tab state so it survives tab
+  // switches and app restarts (like a REST response). The live socket handle
+  // (connId) stays local — a dead connection shouldn't persist.
+  lines: WsLine[]
+  onAppend: (line: WsLine) => void
+  onClear: () => void
+}
+
+export function WsPanel({url, onUrlChange, lines, onAppend, onClear}: WsPanelProps) {
+  const [connId, setConnId] = useState<string>('')
+  const [msg, setMsg] = useState('')
+  const [error, setError] = useState('')
+  const offs = useRef<Array<() => void>>([])
+  const logRef = useRef<HTMLDivElement>(null)
+
+  const add = (dir: WsLine['dir'], text: string) =>
+    onAppend({dir, text, at: Date.now()})
+
+  // Clean up listeners on unmount.
+  useEffect(() => () => offs.current.forEach((off) => off()), [])
+
+  // Keep the stream scrolled to the latest line.
+  useEffect(() => {
+    logRef.current?.scrollTo({top: logRef.current.scrollHeight})
+  }, [lines])
+
+  const connected = connId !== ''
+
+  async function connect() {
+    setError('')
+    try {
+      const id = await WSConnect(url, {})
+      setConnId(id)
+      add('sys', `connected to ${url}`)
+      const offMsg = EventsOn(`ws:message:${id}`, (m: string) => add('recv', m))
+      const offClose = EventsOn(`ws:close:${id}`, (reason: string) => {
+        add('sys', `closed: ${reason}`)
+        setConnId('')
+      })
+      offs.current = [offMsg, offClose]
+    } catch (e) {
+      setError(String(e))
+    }
+  }
+
+  async function disconnect() {
+    if (connId) await WSClose(connId).catch(() => {})
+    offs.current.forEach((off) => off())
+    offs.current = []
+    setConnId('')
+  }
+
+  async function send() {
+    if (!connId || !msg) return
+    try {
+      await WSSend(connId, msg)
+      add('sent', msg)
+      setMsg('')
+    } catch (e) {
+      setError(String(e))
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-3">
+      {/* Connection bar */}
+      <div className="flex items-center gap-2 rounded-xl border border-border/80 bg-card/60 p-2 backdrop-blur-sm">
+        <span
+          className={[
+            'ml-1 h-2 w-2 shrink-0 rounded-full transition-colors',
+            connected
+              ? 'bg-primary shadow-[0_0_8px_hsl(var(--primary))]'
+              : 'bg-muted-foreground/40',
+          ].join(' ')}
+          title={connected ? 'Connected' : 'Disconnected'}
+        />
+        <Input
+          value={url}
+          onChange={(e) => onUrlChange(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && !connected && connect()}
+          placeholder="ws:// or wss:// URL"
+          disabled={connected}
+          className="h-9 flex-1 border-0 bg-transparent font-mono text-sm focus-visible:ring-0"
+        />
+        {connected ? (
+          <Button variant="destructive" size="sm" onClick={disconnect}>
+            <PlugZap className="mr-1 h-4 w-4" /> Disconnect
+          </Button>
+        ) : (
+          <Button size="sm" onClick={connect} disabled={!url}>
+            <Plug className="mr-1 h-4 w-4" /> Connect
+          </Button>
+        )}
+      </div>
+
+      {error && <div className="text-sm text-destructive">{error}</div>}
+
+      {/* Stream */}
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border/80 bg-card/40 backdrop-blur-sm">
+        <div className="flex items-center justify-between border-b border-border/60 px-3 py-1.5">
+          <span className="flex items-center gap-1.5 text-[0.7rem] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <Radio className="h-3.5 w-3.5" />
+            Stream
+          </span>
+          {lines.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-[0.65rem] text-muted-foreground/70">
+                {lines.length} msg
+              </span>
+              <button
+                type="button"
+                onClick={onClear}
+                title="Clear stream"
+                className="text-muted-foreground/50 hover:text-destructive"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          )}
+        </div>
+        <div ref={logRef} className="flex-1 overflow-auto p-3 font-mono text-xs">
+          {lines.length === 0 ? (
+            <div className="grid h-full place-items-center text-muted-foreground/60">
+              No messages yet.
+            </div>
+          ) : (
+            lines.map((l, i) => (
+              <div key={i} className="flex gap-2 py-0.5">
+                <span className="shrink-0 text-[0.65rem] tabular-nums text-muted-foreground/40">
+                  {clock(l.at)}
+                </span>
+                <span
+                  className={[
+                    'shrink-0 select-none',
+                    l.dir === 'sent'
+                      ? 'text-blue-400'
+                      : l.dir === 'recv'
+                        ? 'text-emerald-400'
+                        : 'text-muted-foreground/50',
+                  ].join(' ')}
+                >
+                  {l.dir === 'sent' ? '→' : l.dir === 'recv' ? '←' : '•'}
+                </span>
+                <span
+                  className={
+                    l.dir === 'sys'
+                      ? 'break-all text-muted-foreground'
+                      : 'break-all text-foreground'
+                  }
+                >
+                  {l.text}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Send bar */}
+      <div className="flex items-center gap-2 rounded-xl border border-border/80 bg-card/60 p-2 backdrop-blur-sm">
+        <Input
+          value={msg}
+          onChange={(e) => setMsg(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && send()}
+          placeholder={connected ? 'Type a message and press Enter' : 'Connect to send messages'}
+          disabled={!connected}
+          className="h-9 flex-1 border-0 bg-transparent font-mono text-sm focus-visible:ring-0"
+        />
+        <Button size="sm" onClick={send} disabled={!connected || !msg}>
+          <SendIcon className="mr-1 h-4 w-4" /> Send
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/lib/code-gen.ts b/frontend/src/lib/code-gen.ts
new file mode 100644
index 0000000..b7afbc2
--- /dev/null
+++ b/frontend/src/lib/code-gen.ts
@@ -0,0 +1,121 @@
+// Multi-language code generators for the current request.
+// Each function returns a runnable snippet string for the given language.
+
+export interface CodeGenInput {
+  method: string
+  url: string
+  headers: Record<string, string>
+  body?: string
+}
+
+// JavaScript fetch
+export function buildFetch(input: CodeGenInput): string {
+  const opts: string[] = [`  method: ${JSON.stringify(input.method)}`]
+
+  const headerEntries = Object.entries(input.headers)
+  if (headerEntries.length) {
+    const lines = headerEntries
+      .map(([k, v]) => `    ${JSON.stringify(k)}: ${JSON.stringify(v)}`)
+      .join(',\n')
+    opts.push(`  headers: {\n${lines}\n  }`)
+  }
+
+  if (input.body) {
+    opts.push(`  body: ${JSON.stringify(input.body)}`)
+  }
+
+  return (
+    `fetch(${JSON.stringify(input.url)}, {\n` +
+    `${opts.join(',\n')}\n` +
+    `})\n` +
+    `  .then((res) => res.text())\n` +
+    `  .then(console.log)\n` +
+    `  .catch(console.error)`
+  )
+}
+
+// Go net/http
+export function buildGo(input: CodeGenInput): string {
+  const lines: string[] = []
+  lines.push('package main')
+  lines.push('')
+  lines.push('import (')
+  lines.push('\t"fmt"')
+  lines.push('\t"io"')
+  lines.push('\t"net/http"')
+  if (input.body) lines.push('\t"strings"')
+  lines.push(')')
+  lines.push('')
+  lines.push('func main() {')
+
+  if (input.body) {
+    lines.push(`\tbody := strings.NewReader(${goString(input.body)})`)
+    lines.push(
+      `\treq, err := http.NewRequest(${goString(input.method)}, ${goString(input.url)}, body)`
+    )
+  } else {
+    lines.push(
+      `\treq, err := http.NewRequest(${goString(input.method)}, ${goString(input.url)}, nil)`
+    )
+  }
+  lines.push('\tif err != nil {')
+  lines.push('\t\tpanic(err)')
+  lines.push('\t}')
+
+  for (const [k, v] of Object.entries(input.headers)) {
+    lines.push(`\treq.Header.Set(${goString(k)}, ${goString(v)})`)
+  }
+
+  lines.push('')
+  lines.push('\tres, err := http.DefaultClient.Do(req)')
+  lines.push('\tif err != nil {')
+  lines.push('\t\tpanic(err)')
+  lines.push('\t}')
+  lines.push('\tdefer res.Body.Close()')
+  lines.push('')
+  lines.push('\tout, _ := io.ReadAll(res.Body)')
+  lines.push('\tfmt.Println(string(out))')
+  lines.push('}')
+
+  return lines.join('\n')
+}
+
+// Python requests
+export function buildPython(input: CodeGenInput): string {
+  const lines: string[] = []
+  lines.push('import requests')
+  lines.push('')
+  lines.push(`url = ${JSON.stringify(input.url)}`)
+
+  const headerEntries = Object.entries(input.headers)
+  if (headerEntries.length) {
+    const inner = headerEntries
+      .map(([k, v]) => `    ${JSON.stringify(k)}: ${JSON.stringify(v)}`)
+      .join(',\n')
+    lines.push(`headers = {\n${inner},\n}`)
+  } else {
+    lines.push('headers = {}')
+  }
+
+  if (input.body) {
+    lines.push(`data = ${JSON.stringify(input.body)}`)
+    lines.push('')
+    lines.push(
+      `response = requests.request(${JSON.stringify(input.method)}, url, headers=headers, data=data)`
+    )
+  } else {
+    lines.push('')
+    lines.push(
+      `response = requests.request(${JSON.stringify(input.method)}, url, headers=headers)`
+    )
+  }
+
+  lines.push('print(response.text)')
+
+  return lines.join('\n')
+}
+
+// Quote a string as a Go double-quoted literal.
+function goString(s: string): string {
+  return JSON.stringify(s)
+}
diff --git a/frontend/src/lib/env.ts b/frontend/src/lib/env.ts
new file mode 100644
index 0000000..9026fa5
--- /dev/null
+++ b/frontend/src/lib/env.ts
@@ -0,0 +1,23 @@
+// Substitute {{var}} tokens with values from the active environment.
+// Unknown tokens are left untouched.
+// substituteVars('{{base}}/x', {base:'http://h'}) === 'http://h/x'
+// substituteVars('{{missing}}', {}) === '{{missing}}'
+
+import type {main} from '../../wailsjs/go/models'
+
+export function substituteVars(input: string, vars: Record<string, string>): string {
+  if (!input) return input
+  return input.replace(/\{\{\s*([\w.-]+)\s*\}\}/g, (whole, name) =>
+    Object.prototype.hasOwnProperty.call(vars, name) ? vars[name] : whole
+  )
+}
+
+// Flatten an Environment's {Key,Value} pairs into a plain lookup map.
+export function envVars(env: main.Environment | undefined): Record<string, string> {
+  const out: Record<string, string> = {}
+  if (!env?.vars) return out
+  for (const kv of env.vars) {
+    if (kv.Key) out[kv.Key] = kv.Value ?? ''
+  }
+  return out
+}
diff --git a/frontend/src/lib/model.ts b/frontend/src/lib/model.ts
index 5f4697f..bacbae0 100644
--- a/frontend/src/lib/model.ts
+++ b/frontend/src/lib/model.ts
@@ -13,19 +13,58 @@ export interface Payload {
   jsonBody: string
   rawBody: string
   formRows: KV[]
+  gqlQuery: string
+  gqlVars: string
   response: main.RequestResult
+  lastRunAt?: string
 }
 
+// The protocol a request speaks. 'rest' is the classic HTTP editor; 'ws' and
+// 'grpc' swap the editor for their respective panels.
+export type RequestKind = 'rest' | 'ws' | 'grpc'
+
+// One entry in a persisted WebSocket stream log.
+export interface WsLine {
+  dir: 'sent' | 'recv' | 'sys'
+  text: string
+  at: number
+}
+
+// Connection config for non-REST kinds. Persisted alongside the tab.
+// wsLog / grpcResponse hold the last run's output — the ws/grpc analog of a
+// REST payload's persisted response.
+export interface ConnConfig {
+  wsUrl: string
+  wsLog: WsLine[]
+  grpcTarget: string
+  grpcPlaintext: boolean
+  grpcMethod: string
+  grpcBody: string
+  grpcResponse: string
+}
+
+export const emptyConn = (): ConnConfig => ({
+  wsUrl: '',
+  wsLog: [],
+  grpcTarget: 'localhost:50051',
+  grpcPlaintext: true,
+  grpcMethod: '',
+  grpcBody: '{}',
+  grpcResponse: '',
+})
+
 // A RequestTab is a top-level request: method/url/auth/settings are SHARED across
 // all of its payloads. savedId links it to a SavedRequest (empty = unsaved scratch).
 export interface RequestTab {
   savedId?: string
+  kind: RequestKind
   method: string
   url: string
   auth: AuthState
   settings: ReqSettings
   payloads: Payload[]
   activePayload: number
+  conn: ConnConfig
 }
 
 export const emptyResult = () => new main.RequestResult()
@@ -39,17 +78,22 @@ export const emptyPayload = (): Payload => ({
   jsonBody: '',
   rawBody: '',
   formRows: [emptyKV()],
+  gqlQuery: '',
+  gqlVars: '',
   response: emptyResult(),
+  lastRunAt: undefined,
 })
 
-export const emptyRequest = (): RequestTab => ({
+export const emptyRequest = (kind: RequestKind = 'rest'): RequestTab => ({
   savedId: undefined,
+  kind,
   method: 'GET',
   url: '',
   auth: emptyAuth(),
   settings: defaultSettings(),
   payloads: [emptyPayload()],
   activePayload: 0,
+  conn: emptyConn(),
 })
 
 // Immutable nested updaters.
@@ -89,6 +133,9 @@ export function toStoredPayload(p: Payload) {
     jsonBody: p.jsonBody,
     rawBody: p.rawBody,
     formRows: p.formRows,
+    gqlQuery: p.gqlQuery,
+    gqlVars: p.gqlVars,
     response: hasResponse ? p.response : undefined,
+    lastRunAt: p.lastRunAt,
   }
 }
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
index dca467b..fce7417 100755
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/frontend/wailsjs/go/main/App.d.ts
@@ -8,12 +8,24 @@ export function ClearHistory():Promise<void>;
 
 export function DeleteCollection(arg1:string):Promise<void>;
 
+export function DeleteEnvironment(arg1:string):Promise<void>;
+
 export function DeleteRequest(arg1:string,arg2:string):Promise<void>;
 
 export function Export(arg1:main.Request,arg2:Array<any>,arg3:Array<string>,arg4:main.RequestResult):Promise<void>;
 
+export function GRPCInvoke(arg1:string,arg2:string,arg3:string,arg4:Record<string, string>,arg5:boolean):Promise<string>;
+
+export function GRPCListServices(arg1:string,arg2:boolean):Promise<Array<string>>;
+
+export function GRPCMethodTemplate(arg1:string,arg2:string,arg3:boolean):Promise<string>;
+
+export function GetActiveEnvironment():Promise<main.Environment>;
+
 export function ListCollections():Promise<Array<main.Collection>>;
 
+export function ListEnvironments():Promise<Array<main.Environment>>;
+
 export function ListHistory(arg1:number):Promise<Array<main.HistoryEntry>>;
 
 export function LoadSession():Promise<main.Session>;
@@ -24,6 +36,8 @@ export function RunCurl(arg1:string):Promise<main.RequestResult>;
 
 export function SaveCollection(arg1:main.Collection):Promise<void>;
 
+export function SaveEnvironment(arg1:main.Environment):Promise<void>;
+
 export function SaveRequest(arg1:string,arg2:main.SavedRequest):Promise<void>;
 
 export function SaveSession(arg1:main.Session):Promise<void>;
@@ -31,3 +45,11 @@ export function SaveSession(arg1:main.Session):Promise<void>;
 export function SaveTextFile(arg1:string,arg2:string):Promise<void>;
 
 export function Send(arg1:main.RequestSpec):Promise<main.RequestResult>;
+
+export function SetActiveEnvironment(arg1:string):Promise<void>;
+
+export function WSClose(arg1:string):Promise<void>;
+
+export function WSConnect(arg1:string,arg2:Record<string, string>):Promise<string>;
+
+export function WSSend(arg1:string,arg2:string):Promise<void>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
index fe73bdf..3a69341 100755
--- a/frontend/wailsjs/go/main/App.js
+++ b/frontend/wailsjs/go/main/App.js
@@ -14,6 +14,10 @@ export function DeleteCollection(arg1) {
   return window['go']['main']['App']['DeleteCollection'](arg1);
 }
 
+export function DeleteEnvironment(arg1) {
+  return window['go']['main']['App']['DeleteEnvironment'](arg1);
+}
+
 export function DeleteRequest(arg1, arg2) {
   return window['go']['main']['App']['DeleteRequest'](arg1, arg2);
 }
@@ -22,10 +26,30 @@ export function Export(arg1, arg2, arg3, arg4) {
   return window['go']['main']['App']['Export'](arg1, arg2, arg3, arg4);
 }
 
+export function GRPCInvoke(arg1, arg2, arg3, arg4, arg5) {
+  return window['go']['main']['App']['GRPCInvoke'](arg1, arg2, arg3, arg4, arg5);
+}
+
+export function GRPCListServices(arg1, arg2) {
+  return window['go']['main']['App']['GRPCListServices'](arg1, arg2);
+}
+
+export function GRPCMethodTemplate(arg1, arg2, arg3) {
+  return window['go']['main']['App']['GRPCMethodTemplate'](arg1, arg2, arg3);
+}
+
+export function GetActiveEnvironment() {
+  return window['go']['main']['App']['GetActiveEnvironment']();
+}
+
 export function ListCollections() {
   return window['go']['main']['App']['ListCollections']();
 }
 
+export function ListEnvironments() {
+  return window['go']['main']['App']['ListEnvironments']();
+}
+
 export function ListHistory(arg1) {
   return window['go']['main']['App']['ListHistory'](arg1);
 }
@@ -46,6 +70,10 @@ export function SaveCollection(arg1) {
   return window['go']['main']['App']['SaveCollection'](arg1);
 }
 
+export function SaveEnvironment(arg1) {
+  return window['go']['main']['App']['SaveEnvironment'](arg1);
+}
+
 export function SaveRequest(arg1, arg2) {
   return window['go']['main']['App']['SaveRequest'](arg1, arg2);
 }
@@ -61,3 +89,19 @@ export function SaveTextFile(arg1, arg2) {
 export function Send(arg1) {
   return window['go']['main']['App']['Send'](arg1);
 }
+
+export function SetActiveEnvironment(arg1) {
+  return window['go']['main']['App']['SetActiveEnvironment'](arg1);
+}
+
+export function WSClose(arg1) {
+  return window['go']['main']['App']['WSClose'](arg1);
+}
+
+export function WSConnect(arg1, arg2) {
+  return window['go']['main']['App']['WSConnect'](arg1, arg2);
+}
+
+export function WSSend(arg1, arg2) {
+  return window['go']['main']['App']['WSSend'](arg1, arg2);
+}
diff --git a/frontend/wailsjs/go/models.ts b/frontend/wailsjs/go/models.ts
index 6dc29d8..37a7843 100755
--- a/frontend/wailsjs/go/models.ts
+++ b/frontend/wailsjs/go/models.ts
@@ -14,6 +14,64 @@ export namespace main {
 	        this.raw = source["raw"];
 	    }
 	}
+	export class WSLine {
+	    dir: string;
+	    text: string;
+	    at: number;
+	
+	    static createFrom(source: any = {}) {
+	        return new WSLine(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.dir = source["dir"];
+	        this.text = source["text"];
+	        this.at = source["at"];
+	    }
+	}
+	export class ConnConfig {
+	    wsUrl?: string;
+	    wsLog?: WSLine[];
+	    grpcTarget?: string;
+	    grpcPlaintext?: boolean;
+	    grpcMethod?: string;
+	    grpcBody?: string;
+	    grpcResponse?: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new ConnConfig(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.wsUrl = source["wsUrl"];
+	        this.wsLog = this.convertValues(source["wsLog"], WSLine);
+	        this.grpcTarget = source["grpcTarget"];
+	        this.grpcPlaintext = source["grpcPlaintext"];
+	        this.grpcMethod = source["grpcMethod"];
+	        this.grpcBody = source["grpcBody"];
+	        this.grpcResponse = source["grpcResponse"];
+	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
+	}
 	export class RequestResult {
 	    Method: string;
 	    URL: string;
@@ -68,6 +126,7 @@ export namespace main {
 	    rawBody: string;
 	    formRows: KVPair[];
 	    response?: RequestResult;
+	    lastRunAt?: string;
 	
 	    static createFrom(source: any = {}) {
 	        return new Payload(source);
@@ -82,6 +141,7 @@ export namespace main {
 	        this.rawBody = source["rawBody"];
 	        this.formRows = this.convertValues(source["formRows"], KVPair);
 	        this.response = this.convertValues(source["response"], RequestResult);
+	        this.lastRunAt = source["lastRunAt"];
 	    }
 	
 		convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -145,12 +205,14 @@ export namespace main {
 	export class SavedRequest {
 	    id: string;
 	    name: string;
+	    kind?: string;
 	    method: string;
 	    url: string;
 	    auth: StoredAuth;
 	    settings: RequestSettings;
 	    payloads: Payload[];
 	    activePayload: number;
+	    conn?: ConnConfig;
 	    createdAt: string;
 	    updatedAt: string;
 	
@@ -162,12 +224,14 @@ export namespace main {
 	        if ('string' === typeof source) source = JSON.parse(source);
 	        this.id = source["id"];
 	        this.name = source["name"];
+	        this.kind = source["kind"];
 	        this.method = source["method"];
 	        this.url = source["url"];
 	        this.auth = this.convertValues(source["auth"], StoredAuth);
 	        this.settings = this.convertValues(source["settings"], RequestSettings);
 	        this.payloads = this.convertValues(source["payloads"], Payload);
 	        this.activePayload = source["activePayload"];
+	        this.conn = this.convertValues(source["conn"], ConnConfig);
 	        this.createdAt = source["createdAt"];
 	        this.updatedAt = source["updatedAt"];
 	    }
@@ -224,6 +288,41 @@ export namespace main {
 		    return a;
 		}
 	}
+	
+	export class Environment {
+	    id: string;
+	    name: string;
+	    vars: KVPair[];
+	
+	    static createFrom(source: any = {}) {
+	        return new Environment(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.id = source["id"];
+	        this.name = source["name"];
+	        this.vars = this.convertValues(source["vars"], KVPair);
+	    }
+	
+		convertValues(a: any, classs: any, asMap: boolean = false): any {
+		    if (!a) {
+		        return a;
+		    }
+		    if (a.slice && a.map) {
+		        return (a as any[]).map(elem => this.convertValues(elem, classs));
+		    } else if ("object" === typeof a) {
+		        if (asMap) {
+		            for (const key of Object.keys(a)) {
+		                a[key] = new classs(a[key]);
+		            }
+		            return a;
+		        }
+		        return new classs(a);
+		    }
+		    return a;
+		}
+	}
 	export class HistoryEntry {
 	    id: string;
 	    method: string;
@@ -311,12 +410,14 @@ export namespace main {
 	
 	export class TabState {
 	    savedId: string;
+	    kind?: string;
 	    method: string;
 	    url: string;
 	    auth: StoredAuth;
 	    settings: RequestSettings;
 	    payloads: Payload[];
 	    activePayload: number;
+	    conn?: ConnConfig;
 	
 	    static createFrom(source: any = {}) {
 	        return new TabState(source);
@@ -325,12 +426,14 @@ export namespace main {
 	    constructor(source: any = {}) {
 	        if ('string' === typeof source) source = JSON.parse(source);
 	        this.savedId = source["savedId"];
+	        this.kind = source["kind"];
 	        this.method = source["method"];
 	        this.url = source["url"];
 	        this.auth = this.convertValues(source["auth"], StoredAuth);
 	        this.settings = this.convertValues(source["settings"], RequestSettings);
 	        this.payloads = this.convertValues(source["payloads"], Payload);
 	        this.activePayload = source["activePayload"];
+	        this.conn = this.convertValues(source["conn"], ConnConfig);
 	    }
 	
 		convertValues(a: any, classs: any, asMap: boolean = false): any {
@@ -384,6 +487,7 @@ export namespace main {
 		}
 	}
 	
+	
 
 }
 
diff --git a/go.mod b/go.mod
index fd1062f..49cd0f7 100644
--- a/go.mod
+++ b/go.mod
@@ -3,17 +3,25 @@ module changeme
 go 1.22.0
 
 require (
+	github.com/fullstorydev/grpcurl v1.9.3
+	github.com/gorilla/websocket v1.5.3
+	github.com/jhump/protoreflect v1.17.0
 	github.com/mattn/go-shellwords v1.0.12
 	github.com/wailsapp/wails/v2 v2.12.0
+	google.golang.org/grpc v1.61.0
 )
 
 require (
 	git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3 // indirect
 	github.com/bep/debounce v1.2.1 // indirect
+	github.com/bufbuild/protocompile v0.14.1 // indirect
+	github.com/cncf/xds/go v0.0.0-20231109132714-523115ebc101 // indirect
+	github.com/envoyproxy/go-control-plane v0.11.1 // indirect
+	github.com/envoyproxy/protoc-gen-validate v1.0.2 // indirect
 	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/godbus/dbus/v5 v5.1.0 // indirect
+	github.com/golang/protobuf v1.5.4 // indirect
 	github.com/google/uuid v1.6.0 // indirect
-	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
 	github.com/labstack/echo/v4 v4.13.3 // indirect
 	github.com/labstack/gommon v0.4.2 // indirect
@@ -34,8 +42,11 @@ require (
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	golang.org/x/crypto v0.33.0 // indirect
 	golang.org/x/net v0.35.0 // indirect
+	golang.org/x/sync v0.11.0 // indirect
 	golang.org/x/sys v0.30.0 // indirect
 	golang.org/x/text v0.22.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17 // indirect
+	google.golang.org/protobuf v1.36.5 // indirect
 )
 
 // replace github.com/wailsapp/wails/v2 v2.5.1 => /home/rahul/go/pkg/mod
diff --git a/go.sum b/go.sum
index 739ae51..8156ebb 100644
--- a/go.sum
+++ b/go.sum
@@ -1,19 +1,46 @@
+cloud.google.com/go v0.26.0/go.mod h1:aQUYkXzVsufM+DwF1aE+0xfcU+56JwCaLick0ClmMTw=
 git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3 h1:N3IGoHHp9pb6mj1cbXbuaSXV/UMKwmbKLf53nQmtqMA=
 git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3/go.mod h1:QtOLZGz8olr4qH2vWK0QH0w0O4T9fEIjMuWpKUsH7nc=
+github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
 github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
+github.com/bufbuild/protocompile v0.14.1 h1:iA73zAf/fyljNjQKwYzUHD6AD4R8KMasmwa/FBatYVw=
+github.com/bufbuild/protocompile v0.14.1/go.mod h1:ppVdAIhbr2H8asPk6k4pY7t9zB1OU5DoEw9xY/FUi1c=
+github.com/census-instrumentation/opencensus-proto v0.2.1/go.mod h1:f6KPmirojxKA12rnyqOA5BBL4O983OfeGPqjHWSTneU=
+github.com/client9/misspell v0.3.4/go.mod h1:qj6jICC3Q7zFZvVWo7KLAzC3yx5G7kyvSDkc90ppPyw=
+github.com/cncf/xds/go v0.0.0-20231109132714-523115ebc101 h1:7To3pQ+pZo0i3dsWEbinPNFs5gPSBOsJtx3wTT94VBY=
+github.com/cncf/xds/go v0.0.0-20231109132714-523115ebc101/go.mod h1:eXthEFrGJvWHgFFCl3hGmgk+/aYT6PnTQLykKQRLhEs=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/envoyproxy/go-control-plane v0.9.0/go.mod h1:YTl/9mNaCwkRvm6d1a2C3ymFceY/DCBVvsKhRF0iEA4=
+github.com/envoyproxy/go-control-plane v0.11.1 h1:wSUXTlLfiAQRWs2F+p+EKOY9rUyis1MyGqJ2DIk5HpM=
+github.com/envoyproxy/go-control-plane v0.11.1/go.mod h1:uhMcXKCQMEJHiAb0w+YGefQLaTEw+YhGluxZkrTmD0g=
+github.com/envoyproxy/protoc-gen-validate v0.1.0/go.mod h1:iSmxcyjqTsJpI2R4NaDN7+kN2VEUnK/pcBlmesArF7c=
+github.com/envoyproxy/protoc-gen-validate v1.0.2 h1:QkIBuU5k+x7/QXPvPPnWXWlCdaBFApVqftFV6k087DA=
+github.com/envoyproxy/protoc-gen-validate v1.0.2/go.mod h1:GpiZQP3dDbg4JouG/NNS7QWXpgx6x8QiMKdmN72jogE=
+github.com/fullstorydev/grpcurl v1.9.3 h1:PC1Xi3w+JAvEE2Tg2Gf2RfVgPbf9+tbuQr1ZkyVU3jk=
+github.com/fullstorydev/grpcurl v1.9.3/go.mod h1:/b4Wxe8bG6ndAjlfSUjwseQReUDUvBJiFEB7UllOlUE=
 github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
 github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
 github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
 github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
+github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
+github.com/golang/mock v1.1.1/go.mod h1:oTYuIxOrZwtPieC+H1uAHpcLFnEyAGVDL/k47Jfbm0A=
+github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
+github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
+github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
+github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
+github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
+github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
 github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
+github.com/jhump/protoreflect v1.17.0 h1:qOEr613fac2lOuTgWN4tPAtLL7fUSbuJL5X5XumQh94=
+github.com/jhump/protoreflect v1.17.0/go.mod h1:h9+vUUL38jiBzck8ck+6G/aeMX8Z4QUY/NiJPwPNi+8=
 github.com/labstack/echo/v4 v4.13.3 h1:pwhpCPrTl5qry5HRdM5FwdXnhXSLSY+WE+YQSeCaafY=
 github.com/labstack/echo/v4 v4.13.3/go.mod h1:o90YNEeQWjDozo584l7AwhJMHN0bOC4tAfg+Xox9q5g=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
@@ -44,6 +71,7 @@ github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/prometheus/client_model v0.0.0-20190812154241-14fe0d1b01d4/go.mod h1:xMI15A0UPsDsEKsMN9yxemIoYk6Tm2C1GtYGdfGttqA=
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
 github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
@@ -63,11 +91,28 @@ github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhw
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
 github.com/wailsapp/wails/v2 v2.12.0 h1:BHO/kLNWFHYjCzucxbzAYZWUjub1Tvb4cSguQozHn5c=
 github.com/wailsapp/wails/v2 v2.12.0/go.mod h1:mo1bzK1DEJrobt7YrBjgxvb5Sihb1mhAY09hppbibQg=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.33.0 h1:IOBPskki6Lysi0lo9qQvbxiQ+FvsCC/YWOecCHAixus=
 golang.org/x/crypto v0.33.0/go.mod h1:bVdXmD7IV/4GdElGPozy6U7lWdRXA4qyRVGJV57uQ5M=
+golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
+golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE=
+golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU=
+golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
+golang.org/x/net v0.0.0-20180724234803-3673e40ba225/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20180826012351-8a410e7b638d/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190213061140-3a22650c66bd/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.35.0 h1:T5GQRQb2y08kTAByq9L4/bz8cipCdA8FbRTXewonqY8=
 golang.org/x/net v0.35.0/go.mod h1:EglIi67kWsHKlRzzVMUD93VMSWGFOMSZgxFjparz1Qk=
+golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
+golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20181108010431-42b317875d0f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.11.0 h1:GGz8+XQP4FvTTrjZPzNKTMFtSXH80RAzG+5ghFPgK9w=
+golang.org/x/sync v0.11.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sys v0.0.0-20180830151530-49385e6e1522/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -77,9 +122,29 @@ golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.30.0 h1:QjkSwP/36a20jFYWkSue1YwXzLmsV5Gfq7Eiy72C1uc=
 golang.org/x/sys v0.30.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.22.0 h1:bofq7m3/HAFvbF51jz3Q9wLg3jkvSPuiZu/pD1XwgtM=
 golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20190114222345-bf090417da8b/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20190226205152-f727befe758c/go.mod h1:9Yl7xja0Znq3iFh3HoIrodX9oNMXvdceNzlUR8zjMvY=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+golang.org/x/tools v0.0.0-20190524140312-2c0ae7006135/go.mod h1:RgjU9mgBXZiqYHBnxXauZ1Gv1EHHAz9KjViQ78xBX0Q=
+google.golang.org/appengine v1.1.0/go.mod h1:EbEs0AVv82hx2wNQdGPgUI5lhzA/G0D9YwlJXL52JkM=
+google.golang.org/appengine v1.4.0/go.mod h1:xpcJRLb0r/rnEns0DIKYYv+WjYCduHsrkT7/EB5XEv4=
+google.golang.org/genproto v0.0.0-20180817151627-c66870c02cf8/go.mod h1:JiN7NxoALGmiZfu7CAH4rXhgtRTLTxftemlI0sWmxmc=
+google.golang.org/genproto v0.0.0-20190819201941-24fa4b261c55/go.mod h1:DMBHOl98Agz4BDEuKkezgsaosCRResVns1a3J2ZsMNc=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17 h1:Jyp0Hsi0bmHXG6k9eATXoYtjd6e2UzZ1SCn/wIupY14=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20231106174013-bbf56f31fb17/go.mod h1:oQ5rr10WTTMvP4A36n8JpR1OrO1BEiV4f78CneXZxkA=
+google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
+google.golang.org/grpc v1.23.0/go.mod h1:Y5yQAOtifL1yxbo5wqy6BxZv8vAUGQwXBOALyacEbxg=
+google.golang.org/grpc v1.25.1/go.mod h1:c3i+UQWmh7LiEpx4sFZnkU36qjEYZ0imhYfXVyQciAY=
+google.golang.org/grpc v1.61.0 h1:TOvOcuXn30kRao+gfcvsebNEa5iZIiLkisYEkf7R7o0=
+google.golang.org/grpc v1.61.0/go.mod h1:VUbo7IFqmF1QtCAstipjG0GIoq49KvMe9+h1jFLBNJs=
+google.golang.org/protobuf v1.36.5 h1:tPhr+woSbjfYvY6/GPufUoYizxw1cF/yFoxJ2fmpwlM=
+google.golang.org/protobuf v1.36.5/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+honnef.co/go/tools v0.0.0-20190102054323-c2f93a96b099/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
+honnef.co/go/tools v0.0.0-20190523083050-ea95bdfd59fc/go.mod h1:rf3lG4BRIbNafJWhAfAdb/ePZxsR/4RtNHQocxwk9r4=
diff --git a/grpc.go b/grpc.go
new file mode 100644
index 0000000..d2a14af
--- /dev/null
+++ b/grpc.go
@@ -0,0 +1,148 @@
+package main
+
+import (
+	"bytes"
+	"context"
+	"crypto/tls"
+	"fmt"
+	"strings"
+	"time"
+
+	"github.com/fullstorydev/grpcurl"
+	"github.com/jhump/protoreflect/desc"
+	"github.com/jhump/protoreflect/grpcreflect"
+	"google.golang.org/grpc"
+	"google.golang.org/grpc/codes"
+	"google.golang.org/grpc/credentials"
+	"google.golang.org/grpc/credentials/insecure"
+)
+
+// gRPC support via server reflection (no .proto upload). Unary calls only.
+// ponytail: reflection + unary is the v1 ceiling; add proto-file import and
+// streaming only if asked.
+
+func grpcDial(ctx context.Context, target string, plaintext bool) (*grpc.ClientConn, error) {
+	var creds credentials.TransportCredentials
+	if plaintext {
+		creds = insecure.NewCredentials()
+	} else {
+		creds = credentials.NewTLS(&tls.Config{}) //nolint:gosec
+	}
+	return grpc.DialContext(ctx, target,
+		grpc.WithTransportCredentials(creds),
+		grpc.WithBlock(),
+	)
+}
+
+// GRPCListServices dials target, uses server reflection, and returns every
+// unary-callable method as "package.Service/Method".
+func (a *App) GRPCListServices(target string, plaintext bool) ([]string, error) {
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+
+	cc, err := grpcDial(ctx, target, plaintext)
+	if err != nil {
+		return nil, err
+	}
+	defer cc.Close()
+
+	refClient := grpcreflect.NewClientAuto(ctx, cc)
+	defer refClient.Reset()
+	descSource := grpcurl.DescriptorSourceFromServer(ctx, refClient)
+
+	svcs, err := descSource.ListServices()
+	if err != nil {
+		return nil, err
+	}
+
+	out := []string{}
+	for _, svc := range svcs {
+		d, err := descSource.FindSymbol(svc)
+		if err != nil {
+			continue
+		}
+		sd, ok := d.(*desc.ServiceDescriptor)
+		if !ok {
+			continue
+		}
+		for _, m := range sd.GetMethods() {
+			out = append(out, svc+"/"+m.GetName())
+		}
+	}
+	return out, nil
+}
+
+// GRPCMethodTemplate returns a JSON template for a method's request message —
+// every field of the input type emitted with its zero value, so the body editor
+// can be prefilled when a method is selected.
+func (a *App) GRPCMethodTemplate(target, method string, plaintext bool) (string, error) {
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+
+	cc, err := grpcDial(ctx, target, plaintext)
+	if err != nil {
+		return "", err
+	}
+	defer cc.Close()
+
+	refClient := grpcreflect.NewClientAuto(ctx, cc)
+	defer refClient.Reset()
+	descSource := grpcurl.DescriptorSourceFromServer(ctx, refClient)
+
+	// FindSymbol uses dotted names; method comes in as "package.Service/Method".
+	d, err := descSource.FindSymbol(strings.ReplaceAll(method, "/", "."))
+	if err != nil {
+		return "", err
+	}
+	md, ok := d.(*desc.MethodDescriptor)
+	if !ok {
+		return "", fmt.Errorf("%s is not a method", method)
+	}
+
+	tmpl := grpcurl.MakeTemplate(md.GetInputType())
+	formatter := grpcurl.NewJSONFormatter(true, grpcurl.AnyResolverFromDescriptorSource(descSource))
+	return formatter(tmpl)
+}
+
+// GRPCInvoke calls a unary method ("package.Service/Method") with a JSON request
+// body, returning the response formatted as JSON.
+func (a *App) GRPCInvoke(
+	target, method, jsonBody string,
+	headers map[string]string,
+	plaintext bool,
+) (string, error) {
+	ctx, cancel := context.WithTimeout(context.Background(), 30*time.Second)
+	defer cancel()
+
+	cc, err := grpcDial(ctx, target, plaintext)
+	if err != nil {
+		return "", err
+	}
+	defer cc.Close()
+
+	refClient := grpcreflect.NewClientAuto(ctx, cc)
+	defer refClient.Reset()
+	descSource := grpcurl.DescriptorSourceFromServer(ctx, refClient)
+
+	hdrs := []string{}
+	for k, v := range headers {
+		hdrs = append(hdrs, k+": "+v)
+	}
+
+	in := strings.NewReader(jsonBody)
+	opts := grpcurl.FormatOptions{EmitJSONDefaultFields: true, AllowUnknownFields: true}
+	rf, formatter, err := grpcurl.RequestParserAndFormatter(grpcurl.FormatJSON, descSource, in, opts)
+	if err != nil {
+		return "", err
+	}
+
+	var out bytes.Buffer
+	h := &grpcurl.DefaultEventHandler{Out: &out, Formatter: formatter}
+	if invErr := grpcurl.InvokeRPC(ctx, descSource, cc, method, hdrs, h, rf.Next); invErr != nil {
+		return "", invErr
+	}
+	if h.Status != nil && h.Status.Code() != codes.OK {
+		return out.String(), fmt.Errorf("grpc %s: %s", h.Status.Code(), h.Status.Message())
+	}
+	return out.String(), nil
+}
diff --git a/store.go b/store.go
index 2c8d600..578c951 100644
--- a/store.go
+++ b/store.go
@@ -38,13 +38,14 @@ type StoredAuth struct {
 // Payload is one variation tested against the parent request's URL/method/auth/settings.
 // Each payload has its own headers, params, body, and last response.
 type Payload struct {
-	Headers  []KVPair       `json:"headers"`
-	Params   []KVPair       `json:"params"`
-	BodyType string         `json:"bodyType"`
-	JSONBody string         `json:"jsonBody"`
-	RawBody  string         `json:"rawBody"`
-	FormRows []KVPair       `json:"formRows"`
-	Response *RequestResult `json:"response,omitempty"`
+	Headers   []KVPair       `json:"headers"`
+	Params    []KVPair       `json:"params"`
+	BodyType  string         `json:"bodyType"`
+	JSONBody  string         `json:"jsonBody"`
+	RawBody   string         `json:"rawBody"`
+	FormRows  []KVPair       `json:"formRows"`
+	Response  *RequestResult `json:"response,omitempty"`
+	LastRunAt string         `json:"lastRunAt,omitempty"` // RFC3339
 }
 
 // TabState captures a request tab: method/url/auth/settings are shared across all
@@ -52,26 +53,57 @@ type Payload struct {
 // from (empty for unsaved scratch tabs), used to de-dupe "open" vs "switch".
 type TabState struct {
 	SavedID       string          `json:"savedId"`
+	Kind          string          `json:"kind,omitempty"` // "rest" (default) | "ws" | "grpc"
 	Method        string          `json:"method"`
 	URL           string          `json:"url"`
 	Auth          StoredAuth      `json:"auth"`
 	Settings      RequestSettings `json:"settings"`
 	Payloads      []Payload       `json:"payloads"`
 	ActivePayload int             `json:"activePayload"`
+	Conn          ConnConfig      `json:"conn,omitempty"` // ws/grpc connection config
+}
+
+// ConnConfig holds the connection settings for non-REST request kinds (ws/grpc).
+// It also carries the last run's output (ws stream log, grpc response) so it
+// persists alongside the request — the ws/grpc analog of a REST payload's response.
+type ConnConfig struct {
+	WSURL         string   `json:"wsUrl,omitempty"`
+	WSLog         []WSLine `json:"wsLog,omitempty"`
+	GRPCTarget    string   `json:"grpcTarget,omitempty"`
+	GRPCPlaintext bool     `json:"grpcPlaintext,omitempty"`
+	GRPCMethod    string   `json:"grpcMethod,omitempty"`
+	GRPCBody      string   `json:"grpcBody,omitempty"`
+	GRPCResponse  string   `json:"grpcResponse,omitempty"`
+}
+
+// WSLine is one entry in a persisted WebSocket stream log.
+type WSLine struct {
+	Dir  string `json:"dir"` // "sent" | "recv" | "sys"
+	Text string `json:"text"`
+	At   int64  `json:"at"` // unix ms
 }
 
 // SavedRequest is a named request (with all its payloads) stored in a Collection.
 type SavedRequest struct {
 	ID            string          `json:"id"`
 	Name          string          `json:"name"`
+	Kind          string          `json:"kind,omitempty"` // "rest" (default) | "ws" | "grpc"
 	Method        string          `json:"method"`
 	URL           string          `json:"url"`
 	Auth          StoredAuth      `json:"auth"`
 	Settings      RequestSettings `json:"settings"`
 	Payloads      []Payload       `json:"payloads"`
 	ActivePayload int             `json:"activePayload"`
-	CreatedAt     string          `json:"createdAt"` // RFC3339
-	UpdatedAt     string          `json:"updatedAt"` // RFC3339
+	Conn          ConnConfig      `json:"conn,omitempty"` // ws/grpc connection config
+	CreatedAt     string          `json:"createdAt"`      // RFC3339
+	UpdatedAt     string          `json:"updatedAt"`      // RFC3339
+}
+
+// Environment is a named set of variables substituted into requests as {{var}} at send time.
+type Environment struct {
+	ID   string   `json:"id"`
+	Name string   `json:"name"`
+	Vars []KVPair `json:"vars"`
 }
 
 // Collection is a named group of SavedRequests.
@@ -101,9 +133,11 @@ type Session struct {
 
 // storeData is the root JSON document.
 type storeData struct {
-	Collections []Collection   `json:"collections"`
-	History     []HistoryEntry `json:"history"`
-	Session     Session        `json:"session"`
+	Collections  []Collection   `json:"collections"`
+	Environments []Environment  `json:"environments"`
+	ActiveEnvID  string         `json:"activeEnvId"`
+	History      []HistoryEntry `json:"history"`
+	Session      Session        `json:"session"`
 }
 
 const maxHistoryEntries = 200
@@ -191,6 +225,67 @@ func (a *App) DeleteCollection(id string) error {
 	return nil
 }
 
+// ── Environments ──────────────────────────────────────────────────────────
+
+func (a *App) ListEnvironments() []Environment {
+	a.store.mu.Lock()
+	defer a.store.mu.Unlock()
+	if a.store.data.Environments == nil {
+		return []Environment{}
+	}
+	return a.store.data.Environments
+}
+
+func (a *App) SaveEnvironment(e Environment) error {
+	a.store.mu.Lock()
+	defer a.store.mu.Unlock()
+	for i, existing := range a.store.data.Environments {
+		if existing.ID == e.ID {
+			a.store.data.Environments[i] = e
+			return a.store.save()
+		}
+	}
+	if e.ID == "" {
+		e.ID = newID()
+	}
+	a.store.data.Environments = append(a.store.data.Environments, e)
+	return a.store.save()
+}
+
+func (a *App) DeleteEnvironment(id string) error {
+	a.store.mu.Lock()
+	defer a.store.mu.Unlock()
+	for i, e := range a.store.data.Environments {
+		if e.ID == id {
+			envs := a.store.data.Environments
+			a.store.data.Environments = append(envs[:i], envs[i+1:]...)
+			if a.store.data.ActiveEnvID == id {
+				a.store.data.ActiveEnvID = ""
+			}
+			return a.store.save()
+		}
+	}
+	return nil
+}
+
+func (a *App) SetActiveEnvironment(id string) error {
+	a.store.mu.Lock()
+	defer a.store.mu.Unlock()
+	a.store.data.ActiveEnvID = id
+	return a.store.save()
+}
+
+func (a *App) GetActiveEnvironment() Environment {
+	a.store.mu.Lock()
+	defer a.store.mu.Unlock()
+	for _, e := range a.store.data.Environments {
+		if e.ID == a.store.data.ActiveEnvID {
+			return e
+		}
+	}
+	return Environment{}
+}
+
 // ── Requests ──────────────────────────────────────────────────────────────
 
 func (a *App) SaveRequest(collectionID string, req SavedRequest) error {
diff --git a/store_test.go b/store_test.go
index 2eb9cde..e44d02d 100644
--- a/store_test.go
+++ b/store_test.go
@@ -159,6 +159,46 @@ func TestStore_Session(t *testing.T) {
 	}
 }
 
+func TestStore_WSGRPCConnRoundTrip(t *testing.T) {
+	app, cleanup := tempStore(t)
+	defer cleanup()
+
+	// ws/grpc runtime output lives in ConnConfig; it must survive a save/load
+	// through the store — Go drops JSON fields absent from the struct, which was
+	// the original "output not persisted" bug.
+	session := Session{
+		OpenRequests: []TabState{{
+			Kind: "ws",
+			Conn: ConnConfig{
+				WSURL: "wss://example.com",
+				WSLog: []WSLine{{Dir: "sent", Text: "hi", At: 1}, {Dir: "recv", Text: "yo", At: 2}},
+			},
+		}, {
+			Kind: "grpc",
+			Conn: ConnConfig{GRPCTarget: "localhost:50051", GRPCResponse: `{"ok":true}`},
+		}},
+	}
+	if err := app.SaveSession(session); err != nil {
+		t.Fatalf("SaveSession: %v", err)
+	}
+	// Force a real reload from disk, not the in-memory copy.
+	app.store.data = storeData{}
+	if err := app.store.load(); err != nil {
+		t.Fatalf("reload: %v", err)
+	}
+
+	got := app.LoadSession().OpenRequests
+	if len(got) != 2 {
+		t.Fatalf("expected 2 tabs, got %d", len(got))
+	}
+	if len(got[0].Conn.WSLog) != 2 || got[0].Conn.WSLog[1].Dir != "recv" {
+		t.Fatalf("wsLog not preserved: %+v", got[0].Conn.WSLog)
+	}
+	if got[1].Conn.GRPCResponse != `{"ok":true}` {
+		t.Fatalf("grpcResponse not preserved: %q", got[1].Conn.GRPCResponse)
+	}
+}
+
 func TestStore_HistoryMaxCap(t *testing.T) {
 	app, cleanup := tempStore(t)
 	defer cleanup()
diff --git a/websocket.go b/websocket.go
new file mode 100644
index 0000000..f802591
--- /dev/null
+++ b/websocket.go
@@ -0,0 +1,77 @@
+package main
+
+import (
+	"net/http"
+	"time"
+
+	"github.com/gorilla/websocket"
+	runtime "github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+// WebSocket support: a per-App registry of live connections. Each connection
+// streams incoming text messages to the frontend via Wails runtime events
+// "ws:message:<id>", and signals close via "ws:close:<id>".
+
+// WSConnect dials a ws:// or wss:// URL and starts reading. It returns a
+// connection id used to send/close and to scope the emitted events.
+func (a *App) WSConnect(url string, headers map[string]string) (string, error) {
+	hdr := http.Header{}
+	for k, v := range headers {
+		hdr.Set(k, v)
+	}
+
+	dialer := websocket.Dialer{HandshakeTimeout: 15 * time.Second}
+	conn, _, err := dialer.Dial(url, hdr)
+	if err != nil {
+		return "", err
+	}
+
+	id := newID()
+	a.wsMu.Lock()
+	if a.wsConns == nil {
+		a.wsConns = make(map[string]*websocket.Conn)
+	}
+	a.wsConns[id] = conn
+	a.wsMu.Unlock()
+
+	go a.wsRead(id, conn)
+	return id, nil
+}
+
+func (a *App) wsRead(id string, conn *websocket.Conn) {
+	for {
+		_, msg, err := conn.ReadMessage()
+		if err != nil {
+			runtime.EventsEmit(a.ctx, "ws:close:"+id, err.Error())
+			a.wsMu.Lock()
+			delete(a.wsConns, id)
+			a.wsMu.Unlock()
+			_ = conn.Close()
+			return
+		}
+		runtime.EventsEmit(a.ctx, "ws:message:"+id, string(msg))
+	}
+}
+
+// WSSend writes a text message to the connection with the given id.
+func (a *App) WSSend(id, msg string) error {
+	a.wsMu.Lock()
+	conn := a.wsConns[id]
+	a.wsMu.Unlock()
+	if conn == nil {
+		return websocket.ErrCloseSent
+	}
+	return conn.WriteMessage(websocket.TextMessage, []byte(msg))
+}
+
+// WSClose closes the connection with the given id.
+func (a *App) WSClose(id string) error {
+	a.wsMu.Lock()
+	conn := a.wsConns[id]
+	delete(a.wsConns, id)
+	a.wsMu.Unlock()
+	if conn == nil {
+		return nil
+	}
+	return conn.Close()
+}