diff --git a/docs/open-collection-gap-analysis/AGENT_PROGRESS.md b/docs/open-collection-gap-analysis/AGENT_PROGRESS.md
index c07cc79..8641365 100644
--- a/docs/open-collection-gap-analysis/AGENT_PROGRESS.md
+++ b/docs/open-collection-gap-analysis/AGENT_PROGRESS.md
@@ -70,7 +70,8 @@ Use full branch names for stacking existing branches with `but move <child-branc
 | OC-100 | Request type UX | Done | Codex | feature/oc-100-request-type-ux (g0 after restack), stacked on supervisor/add-request-type-ux-task; implementation commit `5cb05a3` | Satisfied by `test/requestTypeUx.test.ts`: schema-valid HTTP/GraphQL/WebSocket/gRPC starter templates, actual `missio.newRequest` protocol picker/write/open flow, YAML and editor-model round-trip safety, no stale protocol roots, gRPC same-protocol editor guard, and read-only protocol chip shell. Shared regressions cover HTTP/GraphQL/WebSocket/gRPC editor, validation, command/tool, and protocol behavior. Switcher/conversion helpers are intentionally out of scope because the benchmarked tools emphasize protocol choice at creation and Postman locks saved request protocols. | `npx vitest run test/requestTypeUx.test.ts test/schemaRoundTrip.test.ts test/openCollectionFoundation.test.ts test/validationService.test.ts` passed 4 files/25 tests; targeted protocol suite passed 8 files/68 tests; `npm run compile` passed; `npm test` passed 21 files/405 tests; `node scripts/validate-collection.js examples/demo-api` passed 42/42 files; `npm run build` passed. | 2026-06-15 00:15 NZT | OC-100 complete; no saved-request switcher was added by product decision and benchmark alignment. Remaining unassigned changes are parallel OC-050/OC-090 work, not OC-100. |
 | OC-110 | Runtime authoring UX | Done | Codex | feature/oc-110-runtime-authoring-ux (g0), stacked on supervisor/add-runtime-authoring-ux-task; implementation commit `fe0ad14`; supervisor follow-up commit `1e6db05`; supervisor acceptance recorded | Satisfied by `test/runtimeAuthoringUx.test.ts`, `test/runtimeExecutionService.test.ts`, `test/validationService.test.ts`, and shared schema/protocol regressions: visual editor can author supported runtime scripts/tests/assertions/actions, no longer offers non-executing `hooks` scripts or unsupported persisted scopes for new rows, preserves schema-valid existing `hooks`/persisted-scope YAML with diagnostics, and runtime actions diagnose unsupported scopes instead of silently writing runtime variables. | `npm run compile` passed; focused `npx vitest run test/runtimeAuthoringUx.test.ts test/runtimeExecutionService.test.ts test/validationService.test.ts test/schemaRoundTrip.test.ts test/requestTypeUx.test.ts test/webSocketSupport.test.ts test/grpcSupport.test.ts` passed 7 files/69 tests; `node scripts\validate-collection.js examples\demo-api` passed 44/44 files; `npm test` passed 23 files/437 tests; `npm run build` passed. | 2026-06-15 09:51 NZT | Supervisor review accepted OC-110 rework; no remaining blocking findings. |
 | OC-120 | Preview media zoom and rotate controls | Done | Codex | `feature/oc-120-preview-media-controls` (ia), currently stacked under OC-130/OC-140; commits `cf8d2e3`, `7d3f766`, `18dc78c`, `e31c2cd`, `fc3e164`, and `c5296ea`; no PR yet | Satisfied by `test/previewMediaControls.test.ts`: pure transform helpers, compact toolbar markup/labels/icons, rotate controls using rotate-like codicons, Ctrl+wheel and toolbar zoom handling, image/PDF controls, stale PDF render and loading-task cancellation, large PDF canvas pixel/render-scale budgeting while preserving visual zoom dimensions, packaged PDF.js asset eligibility, and generated request panel CSP checks. | `npx vitest run test/previewMediaControls.test.ts` passed 10 tests; `npm run compile` passed; targeted `npx vitest run test/previewMediaControls.test.ts test/requestTypeUx.test.ts test/responseProvider.test.ts` passed 3 files/22 tests; `npm run build` passed; `npx @vscode/vsce package --out $env:TEMP\missio-0.8.0-oc120-pdf-zoom-stability.vsix` passed; direct VSIX zip inspection found `extension/media/pdf.worker.min.mjs` and `extension/media/pdf.min.mjs`. | 2026-06-15 13:40 NZT | OC-120 user follow-up fixed. Preserve unrelated unassigned PDF.js media churn IDs `qp`/`ko`. |
-| OC-130 | Protocol-native request editor first paint | Unclaimed | TBD | TBD | Add automated coverage for startup state, neutral/protocol-aware first paint, no HTTP-default flash for GraphQL/WebSocket/gRPC, invalid YAML fallback, layout stability, and shared request editor/protocol regressions. | Not started. | 2026-06-15 11:25 NZT | Claim with `missio-agent-coordination`; read `tasks/13-protocol-layout-stability.md`; create a focused branch before editing request panel code. |
+| OC-130 | Protocol-native request editor first paint | Done | Codex | `feature/oc-130-protocol-layout-stability` (g0), stacked on `feature/oc-120-preview-media-controls`; implementation commit `a3d3251` | Satisfied by `test/protocolLayoutStability.test.ts` plus shared request editor/protocol regressions: neutral first-paint shell, host invalid-YAML fallback message, direct HTTP/GraphQL/WebSocket/gRPC hydration, no visible HTTP default or stale non-HTTP controls during hydration, layout-stability CSS assertions, no-op round-trip and protocol-aware validation coverage, and request type UX startup regression. | `npx vitest run test/protocolLayoutStability.test.ts` passed 9 tests; `npm run compile` passed; focused `npx vitest run test/protocolLayoutStability.test.ts test/requestTypeUx.test.ts test/runtimeAuthoringUx.test.ts test/schemaRoundTrip.test.ts test/validationService.test.ts` passed 5 files/34 tests; targeted protocol/editor matrix passed 9 files/89 tests; `node scripts\validate-collection.js examples\demo-api` passed 44/44 files; `npm test` passed 25 files/454 tests; `npm run build` passed. | 2026-06-15 12:03 NZT | OC-130 complete. Preserve parallel/unrelated unassigned OC-140 docs IDs `wp`/`tks`/`tkt`/`uxu` and PDF.js media churn IDs `qp`/`ko`; do not commit them to OC-130. |
+| OC-140 | First-class WebSocket lifecycle UX | Unclaimed | TBD | TBD | Add automated coverage for WebSocket session manager state transitions, local fixture client lifecycle, separate editor connect/disconnect/send controls, message history, VS Code status bar commands, command palette/tree actions, CodeLens, Copilot lifecycle tools, cleanup/deactivation, failure diagnostics, round-trip/validation, and shared WebSocket regressions. | Not started. | 2026-06-15 12:05 NZT | Claim with `missio-agent-coordination`; read `tasks/14-websocket-lifecycle-ux.md`; coordinate with OC-130 before editing shared request editor startup/layout or WebSocket editor files. |
 
 ## Dependency Map
 
@@ -125,6 +126,22 @@ Record cross-cutting decisions here so parallel agents do not rediscover them.
   Verified: `rg -n "OC-130|13-protocol-layout-stability|Protocol Layout Stability" docs\open-collection-gap-analysis` confirmed task references and goal prompt; implementation tests not required for docs-only task creation.
   Next: launch OC-130 after or alongside OC-120 only if the agent coordinates shared `requestPanel` CSS and webview startup surfaces.
 
+- 2026-06-15 12:05 NZT - Codex Supervisor: Added OC-140 as a focused follow-up task for first-class WebSocket lifecycle management.
+  GitButler: planning update is on `supervisor/add-websocket-lifecycle-task`; existing uncommitted OC-120/OC-130 progress and WebSocket/media implementation changes were preserved and not overwritten.
+  Coverage: documentation-only planning change; the task requires future automated session-manager, local fixture lifecycle, editor UI, status bar, command, CodeLens, Copilot tool, cleanup/deactivation, failure-path, round-trip, validation, and shared WebSocket regression tests.
+  Changed: `docs/open-collection-gap-analysis/README.md`, `AGENT_GOAL_PROMPTS.md`, `AGENT_PROGRESS.md`, and `tasks/14-websocket-lifecycle-ux.md`.
+  Verified: task references and goal prompt added; implementation tests not required for docs-only task creation.
+  Next: launch OC-140 after OC-130 settles request editor startup changes, or in parallel only with explicit coordination around shared request editor, WebSocket client, CodeLens, and Copilot surfaces.
+
+### OC-130 Protocol-Native Request Editor First Paint
+
+- 2026-06-15 12:03 NZT - Codex: Completed OC-130 with a neutral first-paint shell and protocol-native hydration for HTTP, GraphQL, WebSocket, and gRPC request editors.
+  GitButler: `feature/oc-130-protocol-layout-stability` (g0), stacked on `feature/oc-120-preview-media-controls`; implementation/test commit `a3d3251` (`Add OC-130 protocol first paint stability`). Earlier `but commit --changes ...` failed with `Unexpected hunk with neither newlines or oldlines being 0`, so the owned files were staged by path to g0 and committed with `--only`.
+  Coverage: implemented `test/protocolLayoutStability.test.ts` for neutral startup markup, hidden pending/invalid controls with stable dimensions, direct protocol hydration for HTTP/GraphQL/WebSocket/gRPC, invalid-YAML fallback, host parse-failure messaging, and no-op round-trip/validation; updated request type UX startup assertions so static HTML is protocol-pending instead of HTTP.
+  Changed: `src/panels/requestPanel.ts`, `src/webview/requestPanel.ts`, `src/webview/requestPanel.css`, `test/protocolLayoutStability.test.ts`, `test/requestTypeUx.test.ts`, and this ledger.
+  Verified: `npx vitest run test/protocolLayoutStability.test.ts` passed 9 tests; `npm run compile` passed; focused `npx vitest run test/protocolLayoutStability.test.ts test/requestTypeUx.test.ts test/runtimeAuthoringUx.test.ts test/schemaRoundTrip.test.ts test/validationService.test.ts` passed 5 files/34 tests; targeted `npx vitest run test/protocolLayoutStability.test.ts test/requestTypeUx.test.ts test/runtimeAuthoringUx.test.ts test/graphqlSupport.test.ts test/webSocketSupport.test.ts test/grpcSupport.test.ts test/openCollectionFoundation.test.ts test/schemaRoundTrip.test.ts test/validationService.test.ts` passed 9 files/89 tests; `node scripts\validate-collection.js examples\demo-api` passed 44/44 files; `npm test` passed 25 files/454 tests; `npm run build` passed.
+  Next: OC-130 is complete. Remaining unassigned changes are parallel/unrelated OC-140 planning IDs `wp`/`tks`/`tkt`/`uxu` and PDF.js media churn IDs `qp`/`ko`.
+
 - 2026-06-15 00:57 NZT - Codex: Added OC-110 as a separate runtime authoring UX task after confirming snippet export belongs to OC-070 and non-HTTP runtime execution belongs to OC-080.
   GitButler: planning update is on `supervisor/add-runtime-authoring-ux-task`, stacked on `supervisor/oc-050-090-100-audit`; active OC-070 implementation changes in `zz` were not edited or committed.
   Coverage: documentation-only planning change; no runtime behavior changed.
diff --git a/src/panels/basePanel.ts b/src/panels/basePanel.ts
index bc29ee3..848d8f9 100644
--- a/src/panels/basePanel.ts
+++ b/src/panels/basePanel.ts
@@ -423,6 +423,7 @@ export abstract class BaseEditorProvider implements vscode.CustomTextEditorProvi
 .codicon-plug::before { content: '\\eb2d'; }
 .codicon-radio-tower::before { content: '\\eb34'; }
 .codicon-type-hierarchy::before { content: '\\ebb9'; }
+.codicon-symbol-interface::before { content: '\\eb61'; }
 .codicon-add::before { content: '\\ea60'; }
 .codicon-desktop-download::before { content: '\\ec74'; }
 .codicon-trash::before { content: '\\ea81'; }
diff --git a/src/panels/requestPanel.ts b/src/panels/requestPanel.ts
index 0116dac..1e94328 100644
--- a/src/panels/requestPanel.ts
+++ b/src/panels/requestPanel.ts
@@ -105,7 +105,13 @@ export class RequestEditorProvider extends BaseEditorProvider {
       const request = parseYaml(document.getText()) as OpenCollectionRequest;
       migrateRequest(request);
       webview.postMessage({ type: 'requestLoaded', request, filePath: document.uri.fsPath });
-    } catch { /* Invalid YAML, don't update webview */ }
+    } catch (error) {
+      webview.postMessage({
+        type: 'requestLoadError',
+        filePath: document.uri.fsPath,
+        message: error instanceof Error ? error.message : 'Unable to parse request YAML.',
+      });
+    }
   }
 
   private _readDocumentRequest(document: vscode.TextDocument): OpenCollectionRequest | undefined {
@@ -823,6 +829,16 @@ window.missioPdfJsReady = import('${pdfJsUri}')
 
   protected _getBodyHtml(_webview: vscode.Webview): string {
     return `
+  <div class="request-editor-shell is-hydrating" id="requestEditorShell" data-hydration-state="pending" data-protocol="pending" aria-busy="true">
+  <div class="request-startup-shell" id="requestStartupShell" role="status" aria-live="polite">
+    <div class="request-startup-card">
+      <span class="codicon codicon-symbol-interface request-startup-icon" aria-hidden="true"></span>
+      <div>
+        <div class="request-startup-title" id="requestStartupTitle">Loading request</div>
+        <div class="request-startup-detail" id="requestStartupDetail">Preparing editor...</div>
+      </div>
+    </div>
+  </div>
   <!-- URL Bar -->
   <div class="url-bar">
     <div class="method-picker" id="methodPicker">
@@ -837,8 +853,8 @@ window.missioPdfJsReady = import('${pdfJsUri}')
       </select>
     </div>
     <div class="url-wrap" id="urlWrap">
-      <span class="codicon codicon-globe protocol-icon protocol-icon-http" id="protocolIcon" role="img" aria-label="HTTP request type" title="HTTP request type"></span>
-      <div class="url-input" id="url" contenteditable="true" spellcheck="false" data-placeholder="{{baseUrl}}/api/endpoint"></div>
+      <span class="codicon codicon-symbol-interface protocol-icon protocol-icon-pending" id="protocolIcon" role="img" aria-label="Request type loading" title="Request type loading"></span>
+      <div class="url-input" id="url" contenteditable="true" spellcheck="false" data-placeholder="Loading request..."></div>
     </div>
     <button class="btn btn-toggle" id="varToggleBtn" title="Toggle resolved variables">{{}}</button>
     <button class="btn btn-primary" id="sendBtn">Send</button>
@@ -1083,6 +1099,7 @@ window.missioPdfJsReady = import('${pdfJsUri}')
         </div>
       </div>
     </div>
+  </div>
   </div>`;
   }
 }
diff --git a/src/webview/requestPanel.css b/src/webview/requestPanel.css
index a2bd49d..1acc07a 100644
--- a/src/webview/requestPanel.css
+++ b/src/webview/requestPanel.css
@@ -62,6 +62,75 @@ body {
   overflow: hidden;
 }
 
+.request-editor-shell {
+  position: relative;
+  height: 100vh;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.request-editor-shell.is-hydrating .url-bar,
+.request-editor-shell.is-hydrating .main-content,
+.request-editor-shell.is-invalid-yaml .url-bar,
+.request-editor-shell.is-invalid-yaml .main-content {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.request-startup-shell {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12px 16px;
+  background: var(--bg);
+}
+
+.request-editor-shell.is-ready .request-startup-shell {
+  display: none;
+}
+
+.request-startup-card {
+  width: min(100%, 520px);
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--input-bg);
+  color: var(--fg);
+}
+
+.request-startup-icon {
+  color: var(--m-fg-muted);
+  font-size: 16px;
+  flex: 0 0 auto;
+}
+
+.request-startup-title {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.request-startup-detail {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--m-fg-muted);
+  overflow-wrap: anywhere;
+}
+
+.request-editor-shell.is-invalid-yaml .request-startup-icon {
+  color: var(--badge-warn);
+}
+
 /* ── URL Bar ─────────────────────────────── */
 .url-bar {
   display: flex;
@@ -222,6 +291,7 @@ body {
 .protocol-icon-graphql { color: var(--m-protocol-graphql); }
 .protocol-icon-websocket { color: var(--m-protocol-websocket); }
 .protocol-icon-grpc { color: var(--m-protocol-grpc); }
+.protocol-icon-pending { color: var(--m-fg-muted); }
 .url-input {
   width: 100%;
   height: 100%;
diff --git a/src/webview/requestPanel.ts b/src/webview/requestPanel.ts
index 82f137a..2872058 100644
--- a/src/webview/requestPanel.ts
+++ b/src/webview/requestPanel.ts
@@ -93,6 +93,40 @@ let _selectedFileVariantIndex: number | undefined;
 type PanelProtocol = 'http' | 'graphql' | 'websocket' | 'grpc';
 let _currentProtocol: PanelProtocol = 'http';
 
+function detectPanelProtocol(req: any): PanelProtocol {
+  const detectedProtocol = detectRequestProtocol(req);
+  return detectedProtocol === 'graphql' || detectedProtocol === 'websocket' || detectedProtocol === 'grpc'
+    ? detectedProtocol
+    : 'http';
+}
+
+function setEditorHydrationState(
+  state: 'pending' | 'ready' | 'invalid',
+  protocol: PanelProtocol | 'pending' = 'pending',
+  message?: string,
+): void {
+  const shell = $('requestEditorShell');
+  const startup = $('requestStartupShell');
+  const title = $('requestStartupTitle');
+  const detail = $('requestStartupDetail');
+
+  shell.classList.toggle('is-hydrating', state === 'pending');
+  shell.classList.toggle('is-ready', state === 'ready');
+  shell.classList.toggle('is-invalid-yaml', state === 'invalid');
+  shell.dataset.hydrationState = state;
+  shell.dataset.protocol = protocol;
+  shell.setAttribute('aria-busy', state === 'pending' ? 'true' : 'false');
+
+  startup.style.display = state === 'ready' ? 'none' : 'flex';
+  if (state === 'invalid') {
+    title.textContent = 'Request YAML could not be loaded';
+    detail.textContent = message || 'Fix the YAML source and the editor will reload.';
+  } else {
+    title.textContent = 'Loading request';
+    detail.textContent = protocol === 'pending' ? 'Preparing editor...' : 'Preparing ' + protocol + ' editor...';
+  }
+}
+
 function scheduleDocumentUpdate(): void {
   if (updateDocumentTimer) clearTimeout(updateDocumentTimer);
   setUpdateDocumentTimer(setTimeout(() => {
@@ -1425,6 +1459,7 @@ function setSendingState(sending: boolean): void {
 
 // ── Save ────────────────────────────────────────
 function saveRequest(): void {
+  if ($('requestEditorShell').dataset.hydrationState !== 'ready') return;
   if (updateDocumentTimer) {
     clearTimeout(updateDocumentTimer);
     setUpdateDocumentTimer(null);
@@ -1435,14 +1470,10 @@ function saveRequest(): void {
 }
 
 // ── Load request into UI ────────────────────────
-function loadRequest(req: any): void {
+function loadRequest(req: any): PanelProtocol {
   setCurrentRequest(req);
   $('exampleIndicator').style.display = 'none';
-  const detectedProtocol = detectRequestProtocol(req);
-  const protocol: PanelProtocol =
-    detectedProtocol === 'graphql' || detectedProtocol === 'websocket' || detectedProtocol === 'grpc'
-      ? detectedProtocol
-      : 'http';
+  const protocol = detectPanelProtocol(req);
   setProtocolUi(protocol);
   const details = protocol === 'websocket'
     ? (req.websocket || {})
@@ -1574,6 +1605,7 @@ function loadRequest(req: any): void {
   $input('settingMaxRedirects').value = settings.maxRedirects !== undefined && settings.maxRedirects !== 'inherit' ? settings.maxRedirects : '5';
 
   updateBadges();
+  return protocol;
 }
 
 // ── CLI Approval Modal ───────────────────────────
@@ -1765,9 +1797,18 @@ window.addEventListener('message', (event: MessageEvent) => {
     case 'requestLoaded':
       if (ignoreNextLoad) {
         setIgnoreNextLoad(false);
-        break;
+        if ($('requestEditorShell').dataset.hydrationState === 'ready') break;
       }
-      loadRequest(msg.request);
+      try {
+        const protocol = loadRequest(msg.request);
+        setEditorHydrationState('ready', protocol);
+      } catch (error) {
+        console.error('Failed to render request editor state', error);
+        setEditorHydrationState('invalid', 'pending', 'Unable to render this request.');
+      }
+      break;
+    case 'requestLoadError':
+      setEditorHydrationState('invalid', 'pending', msg.message);
       break;
     case 'response':
       $('exampleIndicator').style.display = 'none';
diff --git a/test/protocolLayoutStability.test.ts b/test/protocolLayoutStability.test.ts
new file mode 100644
index 0000000..e4f8573
--- /dev/null
+++ b/test/protocolLayoutStability.test.ts
@@ -0,0 +1,349 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import Ajv from 'ajv';
+import { parse as parseYaml, stringify as stringifyYaml } from 'yaml';
+import { JSDOM } from 'jsdom';
+import {
+  applyRequestEditorModel,
+  createRequestEditorModelFromRequest,
+} from '../src/models/schemaRoundTrip';
+import type { RequestProtocol } from '../src/models/types';
+import { RequestEditorProvider } from '../src/panels/requestPanel';
+
+const schema = require('../schema/opencollectionschema.json');
+const protocolRoots: RequestProtocol[] = ['http', 'graphql', 'websocket', 'grpc'];
+const schemaByProtocol: Record<RequestProtocol, string> = {
+  http: 'HttpRequest',
+  graphql: 'GraphQLRequest',
+  websocket: 'WebSocketRequest',
+  grpc: 'GrpcRequest',
+};
+
+function makeProvider(): RequestEditorProvider {
+  return new RequestEditorProvider(
+    { extensionUri: { fsPath: process.cwd() } } as any,
+    {} as any,
+    {} as any,
+    {} as any,
+    {} as any,
+    {} as any,
+  );
+}
+
+function requestForProtocol(protocol: RequestProtocol): any {
+  if (protocol === 'graphql') {
+    return {
+      info: { name: 'GraphQL health', type: 'graphql' },
+      graphql: {
+        method: 'POST',
+        url: '{{baseUrl}}/graphql',
+        headers: [{ name: 'X-Trace', value: '{{traceId}}' }],
+        body: { query: 'query Health { health { status } }', variables: '{"trace":"{{traceId}}"}' },
+      },
+      runtime: { scripts: [{ type: 'tests', code: 'test("ok", () => assert(true));' }] },
+      settings: { timeout: 5000 },
+    };
+  }
+
+  if (protocol === 'websocket') {
+    return {
+      info: { name: 'Socket echo', type: 'websocket' },
+      websocket: {
+        url: '{{wsBaseUrl}}/ws/echo',
+        headers: [{ name: 'X-Trace', value: '{{traceId}}' }],
+        message: { type: 'json', data: '{"ping":true}' },
+      },
+      runtime: { scripts: [{ type: 'after-response', code: 'console.log("socket");' }] },
+    };
+  }
+
+  if (protocol === 'grpc') {
+    return {
+      info: { name: 'gRPC echo', type: 'grpc' },
+      grpc: {
+        url: '{{grpcBaseUrl}}',
+        method: 'missio.demo.DemoService/EchoUnary',
+        methodType: 'unary',
+        protoFilePath: 'proto/services/missio_demo.proto',
+        metadata: [{ name: 'x-trace-id', value: '{{traceId}}' }],
+        message: '{"name":"Ada","trace":{"requestId":"{{traceId}}"}}',
+      },
+      runtime: { scripts: [{ type: 'before-request', code: 'console.log("grpc");' }] },
+    };
+  }
+
+  return {
+    info: { name: 'HTTP health', type: 'http' },
+    http: {
+      method: 'GET',
+      url: '{{baseUrl}}/health',
+      headers: [{ name: 'Accept', value: 'application/json' }],
+    },
+    runtime: { scripts: [{ type: 'before-request', code: 'console.log("http");' }] },
+    settings: { timeout: 5000 },
+  };
+}
+
+function validateSubschema(protocol: RequestProtocol, data: unknown): void {
+  const ajv = new Ajv({ allErrors: true, strict: false });
+  const defName = schemaByProtocol[protocol];
+  const validate = ajv.compile({
+    $schema: schema.$schema,
+    $id: `${schema.$id}#test-oc130-${defName}`,
+    $ref: `${schema.$id}#/$defs/${defName}`,
+    $defs: schema.$defs,
+  });
+  expect(validate(data), JSON.stringify(validate.errors, null, 2)).toBe(true);
+}
+
+function mountRequestPanelDom(): { dom: JSDOM; messages: unknown[] } {
+  const body = (makeProvider() as any)._getBodyHtml({} as any) as string;
+  const dom = new JSDOM(`<!doctype html><html><body>${body}</body></html>`, { url: 'https://missio.test' });
+  const messages: unknown[] = [];
+  const win = dom.window as any;
+
+  (globalThis as any).window = win;
+  (globalThis as any).document = win.document;
+  (globalThis as any).Node = win.Node;
+  (globalThis as any).NodeFilter = win.NodeFilter;
+  (globalThis as any).HTMLElement = win.HTMLElement;
+  (globalThis as any).HTMLInputElement = win.HTMLInputElement;
+  (globalThis as any).HTMLTextAreaElement = win.HTMLTextAreaElement;
+  (globalThis as any).HTMLSelectElement = win.HTMLSelectElement;
+  (globalThis as any).HTMLButtonElement = win.HTMLButtonElement;
+  (globalThis as any).HTMLPreElement = win.HTMLPreElement;
+  (globalThis as any).HTMLImageElement = win.HTMLImageElement;
+  (globalThis as any).HTMLCanvasElement = win.HTMLCanvasElement;
+  (globalThis as any).Event = win.Event;
+  (globalThis as any).KeyboardEvent = win.KeyboardEvent;
+  (globalThis as any).MouseEvent = win.MouseEvent;
+  (globalThis as any).WheelEvent = win.WheelEvent;
+  (globalThis as any).ClipboardEvent = win.ClipboardEvent;
+  (globalThis as any).DOMParser = win.DOMParser;
+  (globalThis as any).Image = win.Image;
+  (globalThis as any).requestAnimationFrame = (callback: FrameRequestCallback) => setTimeout(() => callback(0), 0);
+  (globalThis as any).cancelAnimationFrame = (handle: ReturnType<typeof setTimeout>) => clearTimeout(handle);
+  (globalThis as any).acquireVsCodeApi = () => ({
+    postMessage: (message: unknown) => messages.push(message),
+    getState: vi.fn(),
+    setState: vi.fn(),
+  });
+  Object.defineProperty(win.HTMLCanvasElement.prototype, 'getContext', { value: vi.fn(() => ({})), configurable: true });
+  return { dom, messages };
+}
+
+async function loadRequestPanel(): Promise<{ dom: JSDOM; messages: unknown[] }> {
+  vi.resetModules();
+  const mounted = mountRequestPanelDom();
+  await import('../src/webview/requestPanel');
+  return mounted;
+}
+
+function dispatchPanelMessage(dom: JSDOM, data: unknown): void {
+  dom.window.dispatchEvent(new dom.window.MessageEvent('message', { data }));
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  vi.resetModules();
+  for (const key of [
+    'window',
+    'document',
+    'Node',
+    'NodeFilter',
+    'HTMLElement',
+    'HTMLInputElement',
+    'HTMLTextAreaElement',
+    'HTMLSelectElement',
+    'HTMLButtonElement',
+    'HTMLPreElement',
+    'HTMLImageElement',
+    'HTMLCanvasElement',
+    'Event',
+    'KeyboardEvent',
+    'MouseEvent',
+    'WheelEvent',
+    'ClipboardEvent',
+    'DOMParser',
+    'Image',
+    'requestAnimationFrame',
+    'cancelAnimationFrame',
+    'acquireVsCodeApi',
+  ]) {
+    delete (globalThis as any)[key];
+  }
+});
+
+describe('OC-130 request editor first paint', () => {
+  it('renders a neutral startup shell instead of a visible HTTP default', () => {
+    const html = (makeProvider() as any)._getBodyHtml({} as any) as string;
+
+    expect(html).toContain('id="requestEditorShell"');
+    expect(html).toContain('class="request-editor-shell is-hydrating"');
+    expect(html).toContain('data-hydration-state="pending"');
+    expect(html).toContain('data-protocol="pending"');
+    expect(html).toContain('id="requestStartupShell"');
+    expect(html).toContain('protocol-icon-pending');
+    expect(html).toContain('aria-label="Request type loading"');
+    expect(html).not.toContain('aria-label="HTTP request type"');
+  });
+
+  it('hides request controls during pending and invalid states while preserving layout dimensions', () => {
+    const css = fs.readFileSync(path.join(process.cwd(), 'src', 'webview', 'requestPanel.css'), 'utf8');
+    const panelSource = fs.readFileSync(path.join(process.cwd(), 'src', 'panels', 'basePanel.ts'), 'utf8');
+
+    expect(css).toMatch(/\.request-editor-shell\s*\{[\s\S]*height:\s*100vh;[\s\S]*display:\s*flex;[\s\S]*flex-direction:\s*column;/);
+    expect(css).toMatch(/\.request-editor-shell\.is-hydrating \.url-bar,[\s\S]*\.request-editor-shell\.is-invalid-yaml \.main-content\s*\{[\s\S]*visibility:\s*hidden;[\s\S]*pointer-events:\s*none;/);
+    expect(css).toMatch(/\.request-startup-shell\s*\{[\s\S]*position:\s*absolute;[\s\S]*inset:\s*0;[\s\S]*display:\s*flex;/);
+    expect(css).toMatch(/\.request-startup-card\s*\{[\s\S]*min-height:\s*44px;/);
+    expect(css).toContain('.protocol-icon-pending');
+    expect(panelSource).toContain(".codicon-symbol-interface::before { content: '\\\\eb61'; }");
+  });
+
+  it.each(protocolRoots)('hydrates directly to the %s request layout', async (protocol) => {
+    const { dom, messages } = await loadRequestPanel();
+    const request = requestForProtocol(protocol);
+
+    expect(document.getElementById('requestEditorShell')?.dataset.hydrationState).toBe('pending');
+    expect(document.getElementById('protocolIcon')?.className).toContain('protocol-icon-pending');
+    expect(messages).toContainEqual({ type: 'ready' });
+
+    dispatchPanelMessage(dom, { type: 'requestLoaded', request, filePath: `${protocol}.yml` });
+
+    const shell = document.getElementById('requestEditorShell') as HTMLElement;
+    const methodPicker = document.getElementById('methodPicker') as HTMLElement;
+    const protocolIcon = document.getElementById('protocolIcon') as HTMLElement;
+    const bodyTab = document.querySelector<HTMLElement>('#reqTabs [data-tab="body"]');
+
+    expect(shell.dataset.hydrationState).toBe('ready');
+    expect(shell.dataset.protocol).toBe(protocol);
+    expect(shell.classList.contains('is-hydrating')).toBe(false);
+    expect((document.getElementById('requestStartupShell') as HTMLElement).style.display).toBe('none');
+    expect(protocolIcon.dataset.protocol).toBe(protocol);
+    expect(protocolIcon.className).toContain(`protocol-icon-${protocol}`);
+    expect(protocolIcon.className).not.toContain('protocol-icon-pending');
+
+    if (protocol === 'websocket' || protocol === 'grpc') {
+      expect(methodPicker.style.display).toBe('none');
+      expect(bodyTab?.textContent).toBe('Message');
+      expect((document.querySelector('#reqTabs [data-tab="params"]') as HTMLElement).style.display).toBe('none');
+      expect((document.querySelector('#reqTabs [data-tab="settings"]') as HTMLElement).style.display).toBe('none');
+      expect((document.querySelector('#reqTabs [data-tab="export"]') as HTMLElement).style.display).toBe('none');
+      expect(document.getElementById('sendBtn')?.textContent).toBe(protocol === 'grpc' ? 'Invoke' : 'Connect + Send');
+    } else {
+      expect(methodPicker.style.display).toBe('');
+      expect(bodyTab?.textContent).toBe('Body');
+      expect((document.querySelector('#reqTabs [data-tab="params"]') as HTMLElement).style.display).toBe('');
+    }
+
+    if (protocol === 'graphql') {
+      expect((document.getElementById('bodyTypePills') as HTMLElement).style.display).toBe('none');
+      expect((document.getElementById('graphqlVariablesEditor') as HTMLElement).style.display).toBe('flex');
+      expect((document.getElementById('method') as HTMLSelectElement).value).toBe('POST');
+    }
+  });
+
+  it('keeps invalid YAML in a neutral fallback instead of revealing HTTP controls', async () => {
+    const { dom } = await loadRequestPanel();
+
+    dispatchPanelMessage(dom, {
+      type: 'requestLoadError',
+      filePath: 'bad.yml',
+      message: 'Nested mappings are not allowed in compact mappings',
+    });
+
+    const shell = document.getElementById('requestEditorShell') as HTMLElement;
+    expect(shell.dataset.hydrationState).toBe('invalid');
+    expect(shell.dataset.protocol).toBe('pending');
+    expect(shell.classList.contains('is-invalid-yaml')).toBe(true);
+    expect((document.getElementById('requestStartupShell') as HTMLElement).style.display).toBe('flex');
+    expect(document.getElementById('requestStartupTitle')?.textContent).toBe('Request YAML could not be loaded');
+    expect(document.getElementById('requestStartupDetail')?.textContent).toContain('Nested mappings');
+    expect(document.getElementById('protocolIcon')?.className).toContain('protocol-icon-pending');
+  });
+
+  it('blocks Ctrl+S until request hydration is ready', async () => {
+    const { dom, messages } = await loadRequestPanel();
+    const save = () => document.dispatchEvent(new dom.window.KeyboardEvent('keydown', {
+      key: 's',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    }));
+    const savedMessages = () => messages.filter((message: any) => message.type === 'saveDocument');
+
+    save();
+    expect(savedMessages()).toHaveLength(0);
+
+    dispatchPanelMessage(dom, {
+      type: 'requestLoadError',
+      filePath: 'bad.yml',
+      message: 'Nested mappings are not allowed in compact mappings',
+    });
+    save();
+    expect(savedMessages()).toHaveLength(0);
+
+    dispatchPanelMessage(dom, { type: 'requestLoaded', request: requestForProtocol('graphql'), filePath: 'graphql.yml' });
+    save();
+
+    expect(savedMessages()).toHaveLength(1);
+    expect((savedMessages()[0] as any).request.info.type).toBe('graphql');
+  });
+
+  it('recovers from invalid YAML when a previous document update is awaiting its load echo', async () => {
+    const { dom } = await loadRequestPanel();
+    const { setIgnoreNextLoad } = await import('../src/webview/state');
+
+    setIgnoreNextLoad(true);
+    dispatchPanelMessage(dom, {
+      type: 'requestLoadError',
+      filePath: 'bad.yml',
+      message: 'Nested mappings are not allowed in compact mappings',
+    });
+    dispatchPanelMessage(dom, { type: 'requestLoaded', request: requestForProtocol('grpc'), filePath: 'grpc.yml' });
+
+    const shell = document.getElementById('requestEditorShell') as HTMLElement;
+    expect(shell.dataset.hydrationState).toBe('ready');
+    expect(shell.dataset.protocol).toBe('grpc');
+    expect(shell.classList.contains('is-invalid-yaml')).toBe(false);
+    expect((document.getElementById('requestStartupShell') as HTMLElement).style.display).toBe('none');
+  });
+
+  it('sends an explicit invalid-YAML fallback message from the extension host', () => {
+    const messages: any[] = [];
+
+    (makeProvider() as any)._sendDocumentToWebview(
+      { postMessage: (message: unknown) => messages.push(message) },
+      {
+        uri: { fsPath: path.join(process.cwd(), 'bad.yml') },
+        getText: () => 'info: { name: Bad, type: websocket\nwebsocket: { url: "wss://example.com" }',
+      },
+    );
+
+    expect(messages).toHaveLength(1);
+    expect(messages[0]).toMatchObject({
+      type: 'requestLoadError',
+      filePath: path.join(process.cwd(), 'bad.yml'),
+    });
+    expect(messages[0].message).toEqual(expect.any(String));
+  });
+
+  it('preserves protocol round trips and validation for request editor no-op saves', () => {
+    for (const protocol of protocolRoots) {
+      const request = requestForProtocol(protocol);
+      const model = createRequestEditorModelFromRequest(request);
+      const updated = applyRequestEditorModel(request, model);
+      const roots = protocolRoots.filter(root => Object.prototype.hasOwnProperty.call(updated as object, root));
+
+      expect(updated).toEqual(request);
+      expect(parseYaml(stringifyYaml(updated, { lineWidth: 120 }))).toEqual(updated);
+      expect(roots).toEqual([protocol]);
+      if (protocol !== 'http') {
+        expect((updated as any).http).toBeUndefined();
+      }
+      validateSubschema(protocol, updated);
+    }
+  });
+});
diff --git a/test/requestTypeUx.test.ts b/test/requestTypeUx.test.ts
index 45728a3..2bdfb70 100644
--- a/test/requestTypeUx.test.ts
+++ b/test/requestTypeUx.test.ts
@@ -177,7 +177,8 @@ describe('request editor protocol identity guard', () => {
     expect(html).toMatch(/<div class="url-wrap" id="urlWrap">[\s\S]*id="protocolIcon"[\s\S]*id="url"/);
     expect(html).toContain('id="protocolIcon"');
     expect(html).toContain('role="img"');
-    expect(html).toContain('aria-label="HTTP request type"');
+    expect(html).toContain('aria-label="Request type loading"');
+    expect(html).toContain('protocol-icon-pending');
     expect(html).not.toContain('protocol-chip');
     expect(html).not.toContain('id="protocolChip"');
     expect(html).not.toContain('id="requestTypeSwitcher"');