diff --git a/packages/web/src/components/request-workspace/index.ts b/packages/web/src/components/request-workspace/index.ts
index bd0b569..dc90461 100644
--- a/packages/web/src/components/request-workspace/index.ts
+++ b/packages/web/src/components/request-workspace/index.ts
@@ -1,9 +1,30 @@
+// Model exports
 export {
   DEFAULT_REQUEST_WORKSPACE_TAB,
   isRequestWorkspaceTabId,
   REQUEST_WORKSPACE_TABS,
   type RequestWorkspaceTabId
 } from './model';
+
+// Panel component exports
+export { BodyPanel } from './panels/body';
+export { HeadersPanel } from './panels/headers';
+export { ParamsPanel } from './panels/params';
+
+// Shared panel component exports
+export {
+  DraftHeader,
+  ErrorBanner,
+  KeyValueTable
+} from './panels/shared';
+
+// Legacy panel component exports (re-exported from new locations)
+export {
+  RequestWorkspaceBodyPanel,
+  RequestWorkspaceHeadersPanel,
+  RequestWorkspaceParamsPanel
+} from './request-workspace-tab-panels';
+// Legacy exports (keep for backward compatibility)
 export { RequestWorkspaceTabs } from './request-workspace-tabs';
 export { useRequestBodyDraftController } from './use-request-body-draft-controller';
 export { useRequestHeaderDraftController } from './use-request-header-draft-controller';
diff --git a/packages/web/src/components/request-workspace/panels/body/file-editor.tsx b/packages/web/src/components/request-workspace/panels/body/file-editor.tsx
new file mode 100644
index 0000000..2b94eb3
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/body/file-editor.tsx
@@ -0,0 +1,59 @@
+import { Show } from 'solid-js';
+import type { FileBodyEditorProps } from './types';
+
+export function FileBodyEditor(props: FileBodyEditorProps) {
+  return (
+    <div class="space-y-2">
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs font-mono"
+          onClick={props.onBodyCopy}
+          disabled={!props.hasRequest}
+        >
+          Copy
+        </button>
+
+        <div class="flex items-center gap-2">
+          <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
+            <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
+          </Show>
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs font-mono"
+            onClick={props.onDiscardBody}
+            disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+          >
+            Discard
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary btn-xs font-mono"
+            onClick={props.onSaveBody}
+            disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+          >
+            {props.bodyDraftSaving ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      </div>
+
+      <div class="rounded-box border border-base-300 bg-base-100/80 p-2">
+        <label
+          for="request-workspace-body-file-path"
+          class="mb-1 block font-mono text-[11px] uppercase tracking-[0.06em] text-base-content/70"
+        >
+          File Path
+        </label>
+        <input
+          id="request-workspace-body-file-path"
+          type="text"
+          class="input input-sm w-full border-base-300 bg-base-100 font-mono text-xs"
+          value={props.requestBodyFilePathDraft}
+          onInput={(event) => props.onBodyFilePathChange(event.currentTarget.value)}
+          disabled={!props.hasRequest || props.bodyDraftSaving}
+          placeholder="./payload.json"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/body/form-data-editor.tsx b/packages/web/src/components/request-workspace/panels/body/form-data-editor.tsx
new file mode 100644
index 0000000..3e6cc94
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/body/form-data-editor.tsx
@@ -0,0 +1,135 @@
+import { Index, Show } from 'solid-js';
+import type { FormDataEditorProps } from './types';
+
+export function FormDataEditor(props: FormDataEditorProps) {
+  return (
+    <div class="space-y-2">
+      <div class="flex flex-wrap items-center justify-between gap-2">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs font-mono"
+          onClick={props.onBodyFormDataAddField}
+          disabled={!props.hasRequest || props.bodyDraftSaving}
+        >
+          Add Field
+        </button>
+
+        <div class="flex items-center gap-2">
+          <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
+            <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
+          </Show>
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs font-mono"
+            onClick={props.onDiscardBody}
+            disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+          >
+            Discard
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary btn-xs font-mono"
+            onClick={props.onSaveBody}
+            disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+          >
+            {props.bodyDraftSaving ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      </div>
+
+      <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
+        <table class="table table-xs">
+          <thead>
+            <tr>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Type</th>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Filename</th>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px] text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <Show
+              when={props.requestBodyFormDataDraft.length > 0}
+              fallback={
+                <tr>
+                  <td colSpan={5} class="font-mono text-xs text-base-content/70 text-center py-3">
+                    No form-data fields configured.
+                  </td>
+                </tr>
+              }
+            >
+              <Index each={props.requestBodyFormDataDraft}>
+                {(field, index) => (
+                  <tr>
+                    <td>
+                      <input
+                        type="text"
+                        class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+                        value={field().name}
+                        onInput={(event) =>
+                          props.onBodyFormDataNameChange(index, event.currentTarget.value)
+                        }
+                        disabled={!props.hasRequest || props.bodyDraftSaving}
+                      />
+                    </td>
+                    <td>
+                      <select
+                        class="select select-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+                        value={field().isFile ? 'file' : 'text'}
+                        onChange={(event) =>
+                          props.onBodyFormDataTypeChange(
+                            index,
+                            event.currentTarget.value === 'file'
+                          )
+                        }
+                        disabled={!props.hasRequest || props.bodyDraftSaving}
+                      >
+                        <option value="text">text</option>
+                        <option value="file">file</option>
+                      </select>
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+                        value={field().isFile ? (field().path ?? '') : field().value}
+                        onInput={(event) =>
+                          props.onBodyFormDataValueChange(index, event.currentTarget.value)
+                        }
+                        placeholder={field().isFile ? './path/to/file' : 'value'}
+                        disabled={!props.hasRequest || props.bodyDraftSaving}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        type="text"
+                        class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+                        value={field().filename ?? ''}
+                        onInput={(event) =>
+                          props.onBodyFormDataFilenameChange(index, event.currentTarget.value)
+                        }
+                        placeholder="optional"
+                        disabled={!props.hasRequest || props.bodyDraftSaving || !field().isFile}
+                      />
+                    </td>
+                    <td class="text-right">
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-xs text-error"
+                        onClick={() => props.onBodyFormDataRemoveField(index)}
+                        disabled={!props.hasRequest || props.bodyDraftSaving}
+                      >
+                        Remove
+                      </button>
+                    </td>
+                  </tr>
+                )}
+              </Index>
+            </Show>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/body/index.tsx b/packages/web/src/components/request-workspace/panels/body/index.tsx
new file mode 100644
index 0000000..11bd653
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/body/index.tsx
@@ -0,0 +1,86 @@
+import { Match, Show, Switch } from 'solid-js';
+import { ErrorBanner } from '../shared';
+import { FileBodyEditor } from './file-editor';
+import { FormDataEditor } from './form-data-editor';
+import { InlineBodyEditor } from './inline-editor';
+import type { BodyPanelProps } from './types';
+
+export function BodyPanel(props: BodyPanelProps) {
+  const shouldShowDescription = () =>
+    props.requestBodySummary.description !== 'Request includes an inline body payload.';
+
+  return (
+    <div class="space-y-2">
+      <ErrorBanner message={props.bodyDraftSaveError} />
+
+      <Show when={shouldShowDescription()}>
+        <p>{props.requestBodySummary.description}</p>
+      </Show>
+
+      <Switch
+        fallback={
+          <p class="font-mono text-xs text-base-content/70">
+            Unsupported body kind: {props.requestBodySummary.kind}
+          </p>
+        }
+      >
+        <Match when={props.requestBodySummary.kind === 'inline'}>
+          <InlineBodyEditor
+            hasRequest={props.hasRequest}
+            requestBodyDraft={props.requestBodyDraft}
+            requestBodySummary={props.requestBodySummary}
+            bodyDraftDirty={props.bodyDraftDirty}
+            bodyDraftSaving={props.bodyDraftSaving}
+            bodyDraftValidationError={props.bodyDraftValidationError}
+            bodyDraftIsJsonEditable={props.bodyDraftIsJsonEditable}
+            bodyDraftTemplateWarnings={props.bodyDraftTemplateWarnings}
+            onBodyChange={props.onBodyChange}
+            onBodyPrettify={props.onBodyPrettify}
+            onBodyMinify={props.onBodyMinify}
+            onBodyCopy={props.onBodyCopy}
+            onSaveBody={props.onSaveBody}
+            onDiscardBody={props.onDiscardBody}
+          />
+        </Match>
+
+        <Match when={props.requestBodySummary.kind === 'form-data'}>
+          <FormDataEditor
+            hasRequest={props.hasRequest}
+            requestBodyFormDataDraft={props.requestBodyFormDataDraft}
+            bodyDraftDirty={props.bodyDraftDirty}
+            bodyDraftSaving={props.bodyDraftSaving}
+            onBodyFormDataNameChange={props.onBodyFormDataNameChange}
+            onBodyFormDataTypeChange={props.onBodyFormDataTypeChange}
+            onBodyFormDataValueChange={props.onBodyFormDataValueChange}
+            onBodyFormDataFilenameChange={props.onBodyFormDataFilenameChange}
+            onBodyFormDataAddField={props.onBodyFormDataAddField}
+            onBodyFormDataRemoveField={props.onBodyFormDataRemoveField}
+            onSaveBody={props.onSaveBody}
+            onDiscardBody={props.onDiscardBody}
+          />
+        </Match>
+
+        <Match when={props.requestBodySummary.kind === 'file'}>
+          <FileBodyEditor
+            hasRequest={props.hasRequest}
+            requestBodyFilePathDraft={props.requestBodyFilePathDraft}
+            bodyDraftDirty={props.bodyDraftDirty}
+            bodyDraftSaving={props.bodyDraftSaving}
+            onBodyFilePathChange={props.onBodyFilePathChange}
+            onBodyCopy={props.onBodyCopy}
+            onSaveBody={props.onSaveBody}
+            onDiscardBody={props.onDiscardBody}
+          />
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+// Re-export types for backward compatibility
+export type {
+  BodyPanelProps,
+  FileBodyEditorProps,
+  FormDataEditorProps,
+  InlineBodyEditorProps
+} from './types';
diff --git a/packages/web/src/components/request-workspace/panels/body/inline-editor.tsx b/packages/web/src/components/request-workspace/panels/body/inline-editor.tsx
new file mode 100644
index 0000000..9ee78da
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/body/inline-editor.tsx
@@ -0,0 +1,108 @@
+import { For, Show } from 'solid-js';
+import type { InlineBodyEditorProps } from './types';
+
+export function InlineBodyEditor(props: InlineBodyEditorProps) {
+  return (
+    <Show
+      when={props.bodyDraftIsJsonEditable}
+      fallback={
+        <div class="space-y-2">
+          <p>Inline non-JSON body editing is not supported yet.</p>
+          <Show
+            when={props.requestBodySummary.text !== undefined}
+            fallback={<p>No inline body content was parsed.</p>}
+          >
+            <pre class="max-h-52 overflow-auto rounded-box border border-base-300 bg-base-100/80 p-2 font-mono text-xs text-base-content">
+              {props.requestBodySummary.text}
+            </pre>
+          </Show>
+        </div>
+      }
+    >
+      <div class="space-y-2">
+        <Show when={props.bodyDraftTemplateWarnings.length > 0}>
+          <div class="rounded-box border border-warning/35 bg-warning/12 px-2 py-1.5 text-xs text-base-content">
+            <For each={props.bodyDraftTemplateWarnings}>{(warning) => <p>{warning}</p>}</For>
+          </div>
+        </Show>
+
+        <Show when={props.bodyDraftValidationError}>
+          {(message) => (
+            <div
+              class="rounded-box border border-warning/35 bg-warning/12 px-2 py-1.5 text-xs text-base-content"
+              role="alert"
+            >
+              {message()}
+            </div>
+          )}
+        </Show>
+
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs font-mono"
+              onClick={props.onBodyPrettify}
+              disabled={
+                !props.hasRequest ||
+                props.bodyDraftSaving ||
+                Boolean(props.bodyDraftValidationError)
+              }
+            >
+              Prettify
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs font-mono"
+              onClick={props.onBodyMinify}
+              disabled={
+                !props.hasRequest ||
+                props.bodyDraftSaving ||
+                Boolean(props.bodyDraftValidationError)
+              }
+            >
+              Minify
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs font-mono"
+              onClick={props.onBodyCopy}
+              disabled={!props.hasRequest}
+            >
+              Copy
+            </button>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
+              <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
+            </Show>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs font-mono"
+              onClick={props.onDiscardBody}
+              disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+            >
+              Discard
+            </button>
+            <button
+              type="button"
+              class="btn btn-primary btn-xs font-mono"
+              onClick={props.onSaveBody}
+              disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
+            >
+              {props.bodyDraftSaving ? 'Saving…' : 'Save'}
+            </button>
+          </div>
+        </div>
+
+        <textarea
+          class="textarea textarea-sm min-h-48 w-full border-base-300 bg-base-100/80 font-mono text-xs text-base-content"
+          value={props.requestBodyDraft}
+          onInput={(event) => props.onBodyChange(event.currentTarget.value)}
+          disabled={!props.hasRequest || props.bodyDraftSaving}
+        />
+      </div>
+    </Show>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/body/types.ts b/packages/web/src/components/request-workspace/panels/body/types.ts
new file mode 100644
index 0000000..2a54558
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/body/types.ts
@@ -0,0 +1,71 @@
+import type { RequestBodyField, RequestBodySummary } from '../../../../utils/request-details';
+
+export interface BodyPanelProps {
+  hasRequest: boolean;
+  requestBodySummary: RequestBodySummary;
+  requestBodyDraft: string;
+  requestBodyFormDataDraft: RequestBodyField[];
+  requestBodyFilePathDraft: string;
+  bodyDraftDirty: boolean;
+  bodyDraftSaving: boolean;
+  bodyDraftSaveError?: string;
+  bodyDraftValidationError?: string;
+  bodyDraftIsJsonEditable: boolean;
+  bodyDraftTemplateWarnings: string[];
+  onBodyChange: (value: string) => void;
+  onBodyFilePathChange: (value: string) => void;
+  onBodyFormDataNameChange: (index: number, value: string) => void;
+  onBodyFormDataTypeChange: (index: number, isFile: boolean) => void;
+  onBodyFormDataValueChange: (index: number, value: string) => void;
+  onBodyFormDataFilenameChange: (index: number, value: string) => void;
+  onBodyFormDataAddField: () => void;
+  onBodyFormDataRemoveField: (index: number) => void;
+  onBodyPrettify: () => void;
+  onBodyMinify: () => void;
+  onBodyCopy: () => void;
+  onSaveBody: () => void;
+  onDiscardBody: () => void;
+}
+
+export interface InlineBodyEditorProps {
+  hasRequest: boolean;
+  requestBodyDraft: string;
+  requestBodySummary: RequestBodySummary;
+  bodyDraftDirty: boolean;
+  bodyDraftSaving: boolean;
+  bodyDraftValidationError?: string;
+  bodyDraftIsJsonEditable: boolean;
+  bodyDraftTemplateWarnings: string[];
+  onBodyChange: (value: string) => void;
+  onBodyPrettify: () => void;
+  onBodyMinify: () => void;
+  onBodyCopy: () => void;
+  onSaveBody: () => void;
+  onDiscardBody: () => void;
+}
+
+export interface FormDataEditorProps {
+  hasRequest: boolean;
+  requestBodyFormDataDraft: RequestBodyField[];
+  bodyDraftDirty: boolean;
+  bodyDraftSaving: boolean;
+  onBodyFormDataNameChange: (index: number, value: string) => void;
+  onBodyFormDataTypeChange: (index: number, isFile: boolean) => void;
+  onBodyFormDataValueChange: (index: number, value: string) => void;
+  onBodyFormDataFilenameChange: (index: number, value: string) => void;
+  onBodyFormDataAddField: () => void;
+  onBodyFormDataRemoveField: (index: number) => void;
+  onSaveBody: () => void;
+  onDiscardBody: () => void;
+}
+
+export interface FileBodyEditorProps {
+  hasRequest: boolean;
+  requestBodyFilePathDraft: string;
+  bodyDraftDirty: boolean;
+  bodyDraftSaving: boolean;
+  onBodyFilePathChange: (value: string) => void;
+  onBodyCopy: () => void;
+  onSaveBody: () => void;
+  onDiscardBody: () => void;
+}
diff --git a/packages/web/src/components/request-workspace/panels/headers/index.tsx b/packages/web/src/components/request-workspace/panels/headers/index.tsx
new file mode 100644
index 0000000..d551749
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/headers/index.tsx
@@ -0,0 +1,42 @@
+import type { RequestDetailsRow } from '../../../../utils/request-details';
+import { DraftHeader, ErrorBanner, KeyValueTable } from '../shared';
+
+interface HeadersPanelProps {
+  hasRequest: boolean;
+  requestHeaders: RequestDetailsRow[];
+  headerDraftDirty: boolean;
+  headerDraftSaving: boolean;
+  headerDraftSaveError?: string;
+  onHeaderChange: (index: number, field: 'key' | 'value', value: string) => void;
+  onAddHeader: () => void;
+  onRemoveHeader: (index: number) => void;
+  onSaveHeaders: () => void;
+  onDiscardHeaders: () => void;
+}
+
+export function HeadersPanel(props: HeadersPanelProps) {
+  return (
+    <div class="space-y-2">
+      <ErrorBanner message={props.headerDraftSaveError} />
+
+      <DraftHeader
+        itemLabel="Header"
+        hasRequest={props.hasRequest}
+        draftDirty={props.headerDraftDirty}
+        draftSaving={props.headerDraftSaving}
+        onAdd={props.onAddHeader}
+        onSave={props.onSaveHeaders}
+        onDiscard={props.onDiscardHeaders}
+      />
+
+      <KeyValueTable
+        items={props.requestHeaders}
+        hasRequest={props.hasRequest}
+        isSaving={props.headerDraftSaving}
+        emptyMessage="No headers configured for this request."
+        onChange={props.onHeaderChange}
+        onRemove={props.onRemoveHeader}
+      />
+    </div>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/params/index.tsx b/packages/web/src/components/request-workspace/panels/params/index.tsx
new file mode 100644
index 0000000..d458610
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/params/index.tsx
@@ -0,0 +1,37 @@
+import { For, Show } from 'solid-js';
+import type { RequestDetailsRow } from '../../../../utils/request-details';
+
+interface ParamsPanelProps {
+  requestMethod: string;
+  requestParams: RequestDetailsRow[];
+}
+
+export function ParamsPanel(props: ParamsPanelProps) {
+  return (
+    <Show
+      when={props.requestParams.length > 0}
+      fallback={<p>No query params in URL for {props.requestMethod.toUpperCase()} requests.</p>}
+    >
+      <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
+        <table class="table table-xs">
+          <thead>
+            <tr>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
+              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={props.requestParams}>
+              {(param) => (
+                <tr>
+                  <td class="font-mono text-xs text-base-content">{param.key}</td>
+                  <td class="font-mono text-xs text-base-content/80">{param.value}</td>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </Show>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/shared/draft-header.tsx b/packages/web/src/components/request-workspace/panels/shared/draft-header.tsx
new file mode 100644
index 0000000..2b48d66
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/shared/draft-header.tsx
@@ -0,0 +1,48 @@
+import { Show } from 'solid-js';
+
+interface DraftHeaderProps {
+  itemLabel: string;
+  hasRequest: boolean;
+  draftDirty: boolean;
+  draftSaving: boolean;
+  onAdd: () => void;
+  onSave: () => void;
+  onDiscard: () => void;
+}
+
+export function DraftHeader(props: DraftHeaderProps) {
+  return (
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <button
+        type="button"
+        class="btn btn-ghost btn-xs font-mono"
+        onClick={props.onAdd}
+        disabled={!props.hasRequest || props.draftSaving}
+      >
+        Add {props.itemLabel}
+      </button>
+
+      <div class="flex items-center gap-2">
+        <Show when={props.draftDirty && !props.draftSaving}>
+          <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
+        </Show>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs font-mono"
+          onClick={props.onDiscard}
+          disabled={!props.hasRequest || !props.draftDirty || props.draftSaving}
+        >
+          Discard
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary btn-xs font-mono"
+          onClick={props.onSave}
+          disabled={!props.hasRequest || !props.draftDirty || props.draftSaving}
+        >
+          {props.draftSaving ? 'Saving…' : 'Save'}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/shared/error-banner.tsx b/packages/web/src/components/request-workspace/panels/shared/error-banner.tsx
new file mode 100644
index 0000000..9657734
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/shared/error-banner.tsx
@@ -0,0 +1,20 @@
+import { Show } from 'solid-js';
+
+interface ErrorBannerProps {
+  message?: string;
+}
+
+export function ErrorBanner(props: ErrorBannerProps) {
+  return (
+    <Show when={props.message}>
+      {(message) => (
+        <div
+          role="alert"
+          class="rounded-box border border-error/35 bg-error/10 px-2 py-1.5 text-xs text-base-content"
+        >
+          {message()}
+        </div>
+      )}
+    </Show>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/panels/shared/index.ts b/packages/web/src/components/request-workspace/panels/shared/index.ts
new file mode 100644
index 0000000..e7da69b
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/shared/index.ts
@@ -0,0 +1,3 @@
+export { DraftHeader } from './draft-header';
+export { ErrorBanner } from './error-banner';
+export { KeyValueTable } from './key-value-table';
diff --git a/packages/web/src/components/request-workspace/panels/shared/key-value-table.tsx b/packages/web/src/components/request-workspace/panels/shared/key-value-table.tsx
new file mode 100644
index 0000000..6b0970f
--- /dev/null
+++ b/packages/web/src/components/request-workspace/panels/shared/key-value-table.tsx
@@ -0,0 +1,96 @@
+import { Index, Show } from 'solid-js';
+import type { RequestDetailsRow } from '../../../../utils/request-details';
+
+interface KeyValueRowProps {
+  item: RequestDetailsRow;
+  index: number;
+  hasRequest: boolean;
+  isSaving: boolean;
+  onChange: (index: number, field: 'key' | 'value', value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+function KeyValueRow(props: KeyValueRowProps) {
+  return (
+    <tr>
+      <td>
+        <input
+          type="text"
+          class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+          value={props.item.key}
+          onInput={(event) => props.onChange(props.index, 'key', event.currentTarget.value)}
+          disabled={!props.hasRequest || props.isSaving}
+        />
+      </td>
+      <td>
+        <input
+          type="text"
+          class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
+          value={props.item.value}
+          onInput={(event) => props.onChange(props.index, 'value', event.currentTarget.value)}
+          disabled={!props.hasRequest || props.isSaving}
+        />
+      </td>
+      <td class="text-right">
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs text-error"
+          onClick={() => props.onRemove(props.index)}
+          disabled={!props.hasRequest || props.isSaving}
+        >
+          Remove
+        </button>
+      </td>
+    </tr>
+  );
+}
+
+interface KeyValueTableProps {
+  items: RequestDetailsRow[];
+  hasRequest: boolean;
+  isSaving: boolean;
+  emptyMessage: string;
+  onChange: (index: number, field: 'key' | 'value', value: string) => void;
+  onRemove: (index: number) => void;
+}
+
+export function KeyValueTable(props: KeyValueTableProps) {
+  return (
+    <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
+      <table class="table table-xs">
+        <thead>
+          <tr>
+            <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
+            <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
+            <th class="font-mono uppercase tracking-[0.06em] text-[11px] text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <Show
+            when={props.items.length > 0}
+            fallback={
+              <tr>
+                <td colSpan={3} class="font-mono text-xs text-base-content/70 text-center py-3">
+                  {props.emptyMessage}
+                </td>
+              </tr>
+            }
+          >
+            <Index each={props.items}>
+              {(item, index) => (
+                <KeyValueRow
+                  item={item()}
+                  index={index}
+                  hasRequest={props.hasRequest}
+                  isSaving={props.isSaving}
+                  onChange={props.onChange}
+                  onRemove={props.onRemove}
+                />
+              )}
+            </Index>
+          </Show>
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/packages/web/src/components/request-workspace/request-workspace-tab-panels.tsx b/packages/web/src/components/request-workspace/request-workspace-tab-panels.tsx
index 1ea0891..d473f95 100644
--- a/packages/web/src/components/request-workspace/request-workspace-tab-panels.tsx
+++ b/packages/web/src/components/request-workspace/request-workspace-tab-panels.tsx
@@ -1,511 +1,4 @@
-import { For, Index, Match, Show, Switch } from 'solid-js';
-import type {
-  RequestBodyField,
-  RequestBodySummary,
-  RequestDetailsRow
-} from '../../utils/request-details';
-
-interface RequestWorkspaceParamsPanelProps {
-  requestMethod: string;
-  requestParams: RequestDetailsRow[];
-}
-
-interface RequestWorkspaceHeadersPanelProps {
-  hasRequest: boolean;
-  requestHeaders: RequestDetailsRow[];
-  headerDraftDirty: boolean;
-  headerDraftSaving: boolean;
-  headerDraftSaveError?: string;
-  onHeaderChange: (index: number, field: 'key' | 'value', value: string) => void;
-  onAddHeader: () => void;
-  onRemoveHeader: (index: number) => void;
-  onSaveHeaders: () => void;
-  onDiscardHeaders: () => void;
-}
-
-interface RequestWorkspaceBodyPanelProps {
-  hasRequest: boolean;
-  requestBodySummary: RequestBodySummary;
-  requestBodyDraft: string;
-  requestBodyFormDataDraft: RequestBodyField[];
-  requestBodyFilePathDraft: string;
-  bodyDraftDirty: boolean;
-  bodyDraftSaving: boolean;
-  bodyDraftSaveError?: string;
-  bodyDraftValidationError?: string;
-  bodyDraftIsJsonEditable: boolean;
-  bodyDraftTemplateWarnings: string[];
-  onBodyChange: (value: string) => void;
-  onBodyFilePathChange: (value: string) => void;
-  onBodyFormDataNameChange: (index: number, value: string) => void;
-  onBodyFormDataTypeChange: (index: number, isFile: boolean) => void;
-  onBodyFormDataValueChange: (index: number, value: string) => void;
-  onBodyFormDataFilenameChange: (index: number, value: string) => void;
-  onBodyFormDataAddField: () => void;
-  onBodyFormDataRemoveField: (index: number) => void;
-  onBodyPrettify: () => void;
-  onBodyMinify: () => void;
-  onBodyCopy: () => void;
-  onSaveBody: () => void;
-  onDiscardBody: () => void;
-}
-
-export function RequestWorkspaceParamsPanel(props: RequestWorkspaceParamsPanelProps) {
-  return (
-    <Show
-      when={props.requestParams.length > 0}
-      fallback={<p>No query params in URL for {props.requestMethod.toUpperCase()} requests.</p>}
-    >
-      <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
-        <table class="table table-xs">
-          <thead>
-            <tr>
-              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
-              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={props.requestParams}>
-              {(param) => (
-                <tr>
-                  <td class="font-mono text-xs text-base-content">{param.key}</td>
-                  <td class="font-mono text-xs text-base-content/80">{param.value}</td>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </Show>
-  );
-}
-
-export function RequestWorkspaceHeadersPanel(props: RequestWorkspaceHeadersPanelProps) {
-  return (
-    <div class="space-y-2">
-      <Show when={props.headerDraftSaveError}>
-        {(message) => (
-          <div class="rounded-box border border-error/35 bg-error/10 px-2 py-1.5 text-xs text-base-content">
-            {message()}
-          </div>
-        )}
-      </Show>
-
-      <div class="flex flex-wrap items-center justify-between gap-2">
-        <button
-          type="button"
-          class="btn btn-ghost btn-xs font-mono"
-          onClick={props.onAddHeader}
-          disabled={!props.hasRequest || props.headerDraftSaving}
-        >
-          Add Header
-        </button>
-
-        <div class="flex items-center gap-2">
-          <Show when={props.headerDraftDirty && !props.headerDraftSaving}>
-            <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
-          </Show>
-          <button
-            type="button"
-            class="btn btn-ghost btn-xs font-mono"
-            onClick={props.onDiscardHeaders}
-            disabled={!props.hasRequest || !props.headerDraftDirty || props.headerDraftSaving}
-          >
-            Discard
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary btn-xs font-mono"
-            onClick={props.onSaveHeaders}
-            disabled={!props.hasRequest || !props.headerDraftDirty || props.headerDraftSaving}
-          >
-            {props.headerDraftSaving ? 'Saving…' : 'Save'}
-          </button>
-        </div>
-      </div>
-
-      <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
-        <table class="table table-xs">
-          <thead>
-            <tr>
-              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
-              <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
-              <th class="font-mono uppercase tracking-[0.06em] text-[11px] text-right">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <Show
-              when={props.requestHeaders.length > 0}
-              fallback={
-                <tr>
-                  <td colSpan={3} class="font-mono text-xs text-base-content/70 text-center py-3">
-                    No headers configured for this request.
-                  </td>
-                </tr>
-              }
-            >
-              <Index each={props.requestHeaders}>
-                {(header, index) => (
-                  <tr>
-                    <td>
-                      <input
-                        type="text"
-                        class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                        value={header().key}
-                        onInput={(event) =>
-                          props.onHeaderChange(index, 'key', event.currentTarget.value)
-                        }
-                        disabled={!props.hasRequest || props.headerDraftSaving}
-                      />
-                    </td>
-                    <td>
-                      <input
-                        type="text"
-                        class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                        value={header().value}
-                        onInput={(event) =>
-                          props.onHeaderChange(index, 'value', event.currentTarget.value)
-                        }
-                        disabled={!props.hasRequest || props.headerDraftSaving}
-                      />
-                    </td>
-                    <td class="text-right">
-                      <button
-                        type="button"
-                        class="btn btn-ghost btn-xs text-error"
-                        onClick={() => props.onRemoveHeader(index)}
-                        disabled={!props.hasRequest || props.headerDraftSaving}
-                      >
-                        Remove
-                      </button>
-                    </td>
-                  </tr>
-                )}
-              </Index>
-            </Show>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
-
-export function RequestWorkspaceBodyPanel(props: RequestWorkspaceBodyPanelProps) {
-  const shouldShowDescription =
-    props.requestBodySummary.description !== 'Request includes an inline body payload.';
-
-  return (
-    <div class="space-y-2">
-      <Show when={props.bodyDraftSaveError}>
-        {(message) => (
-          <div class="rounded-box border border-error/35 bg-error/10 px-2 py-1.5 text-xs text-base-content">
-            {message()}
-          </div>
-        )}
-      </Show>
-
-      <Show when={shouldShowDescription}>
-        <p>{props.requestBodySummary.description}</p>
-      </Show>
-
-      <Switch>
-        <Match when={props.requestBodySummary.kind === 'inline'}>
-          <Show
-            when={props.bodyDraftIsJsonEditable}
-            fallback={
-              <div class="space-y-2">
-                <p>Inline non-JSON body editing is not supported yet.</p>
-                <Show
-                  when={props.requestBodySummary.text !== undefined}
-                  fallback={<p>No inline body content was parsed.</p>}
-                >
-                  <pre class="max-h-52 overflow-auto rounded-box border border-base-300 bg-base-100/80 p-2 font-mono text-xs text-base-content">
-                    {props.requestBodySummary.text}
-                  </pre>
-                </Show>
-              </div>
-            }
-          >
-            <div class="space-y-2">
-              <Show when={props.bodyDraftTemplateWarnings.length > 0}>
-                <div class="rounded-box border border-warning/35 bg-warning/12 px-2 py-1.5 text-xs text-base-content">
-                  <For each={props.bodyDraftTemplateWarnings}>{(warning) => <p>{warning}</p>}</For>
-                </div>
-              </Show>
-
-              <Show when={props.bodyDraftValidationError}>
-                {(message) => (
-                  <div
-                    class="rounded-box border border-warning/35 bg-warning/12 px-2 py-1.5 text-xs text-base-content"
-                    role="alert"
-                  >
-                    {message()}
-                  </div>
-                )}
-              </Show>
-
-              <div class="flex flex-wrap items-center justify-between gap-2">
-                <div class="flex items-center gap-2">
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs font-mono"
-                    onClick={props.onBodyPrettify}
-                    disabled={
-                      !props.hasRequest ||
-                      props.bodyDraftSaving ||
-                      Boolean(props.bodyDraftValidationError)
-                    }
-                  >
-                    Prettify
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs font-mono"
-                    onClick={props.onBodyMinify}
-                    disabled={
-                      !props.hasRequest ||
-                      props.bodyDraftSaving ||
-                      Boolean(props.bodyDraftValidationError)
-                    }
-                  >
-                    Minify
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs font-mono"
-                    onClick={props.onBodyCopy}
-                    disabled={!props.hasRequest}
-                  >
-                    Copy
-                  </button>
-                </div>
-
-                <div class="flex items-center gap-2">
-                  <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
-                    <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
-                  </Show>
-                  <button
-                    type="button"
-                    class="btn btn-ghost btn-xs font-mono"
-                    onClick={props.onDiscardBody}
-                    disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                  >
-                    Discard
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-primary btn-xs font-mono"
-                    onClick={props.onSaveBody}
-                    disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                  >
-                    {props.bodyDraftSaving ? 'Saving…' : 'Save'}
-                  </button>
-                </div>
-              </div>
-
-              <textarea
-                class="textarea textarea-sm min-h-48 w-full border-base-300 bg-base-100/80 font-mono text-xs text-base-content"
-                value={props.requestBodyDraft}
-                onInput={(event) => props.onBodyChange(event.currentTarget.value)}
-                disabled={!props.hasRequest || props.bodyDraftSaving}
-              />
-            </div>
-          </Show>
-        </Match>
-
-        <Match when={props.requestBodySummary.kind === 'form-data'}>
-          <div class="space-y-2">
-            <div class="flex flex-wrap items-center justify-between gap-2">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs font-mono"
-                onClick={props.onBodyFormDataAddField}
-                disabled={!props.hasRequest || props.bodyDraftSaving}
-              >
-                Add Field
-              </button>
-
-              <div class="flex items-center gap-2">
-                <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
-                  <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
-                </Show>
-                <button
-                  type="button"
-                  class="btn btn-ghost btn-xs font-mono"
-                  onClick={props.onDiscardBody}
-                  disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                >
-                  Discard
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-primary btn-xs font-mono"
-                  onClick={props.onSaveBody}
-                  disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                >
-                  {props.bodyDraftSaving ? 'Saving…' : 'Save'}
-                </button>
-              </div>
-            </div>
-
-            <div class="overflow-auto rounded-box border border-base-300 bg-base-100/80">
-              <table class="table table-xs">
-                <thead>
-                  <tr>
-                    <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Name</th>
-                    <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Type</th>
-                    <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Value</th>
-                    <th class="font-mono uppercase tracking-[0.06em] text-[11px]">Filename</th>
-                    <th class="font-mono uppercase tracking-[0.06em] text-[11px] text-right">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show
-                    when={props.requestBodyFormDataDraft.length > 0}
-                    fallback={
-                      <tr>
-                        <td
-                          colSpan={5}
-                          class="font-mono text-xs text-base-content/70 text-center py-3"
-                        >
-                          No form-data fields configured.
-                        </td>
-                      </tr>
-                    }
-                  >
-                    <Index each={props.requestBodyFormDataDraft}>
-                      {(field, index) => (
-                        <tr>
-                          <td>
-                            <input
-                              type="text"
-                              class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                              value={field().name}
-                              onInput={(event) =>
-                                props.onBodyFormDataNameChange(index, event.currentTarget.value)
-                              }
-                              disabled={!props.hasRequest || props.bodyDraftSaving}
-                            />
-                          </td>
-                          <td>
-                            <select
-                              class="select select-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                              value={field().isFile ? 'file' : 'text'}
-                              onChange={(event) =>
-                                props.onBodyFormDataTypeChange(
-                                  index,
-                                  event.currentTarget.value === 'file'
-                                )
-                              }
-                              disabled={!props.hasRequest || props.bodyDraftSaving}
-                            >
-                              <option value="text">text</option>
-                              <option value="file">file</option>
-                            </select>
-                          </td>
-                          <td>
-                            <input
-                              type="text"
-                              class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                              value={field().isFile ? (field().path ?? '') : field().value}
-                              onInput={(event) =>
-                                props.onBodyFormDataValueChange(index, event.currentTarget.value)
-                              }
-                              placeholder={field().isFile ? './path/to/file' : 'value'}
-                              disabled={!props.hasRequest || props.bodyDraftSaving}
-                            />
-                          </td>
-                          <td>
-                            <input
-                              type="text"
-                              class="input input-xs w-full border-base-300 bg-base-100 font-mono text-xs"
-                              value={field().filename ?? ''}
-                              onInput={(event) =>
-                                props.onBodyFormDataFilenameChange(index, event.currentTarget.value)
-                              }
-                              placeholder="optional"
-                              disabled={
-                                !props.hasRequest || props.bodyDraftSaving || !field().isFile
-                              }
-                            />
-                          </td>
-                          <td class="text-right">
-                            <button
-                              type="button"
-                              class="btn btn-ghost btn-xs text-error"
-                              onClick={() => props.onBodyFormDataRemoveField(index)}
-                              disabled={!props.hasRequest || props.bodyDraftSaving}
-                            >
-                              Remove
-                            </button>
-                          </td>
-                        </tr>
-                      )}
-                    </Index>
-                  </Show>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </Match>
-
-        <Match when={props.requestBodySummary.kind === 'file'}>
-          <div class="space-y-2">
-            <div class="flex flex-wrap items-center justify-between gap-2">
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs font-mono"
-                onClick={props.onBodyCopy}
-                disabled={!props.hasRequest}
-              >
-                Copy
-              </button>
-
-              <div class="flex items-center gap-2">
-                <Show when={props.bodyDraftDirty && !props.bodyDraftSaving}>
-                  <span class="badge badge-sm badge-warning font-mono">Unsaved</span>
-                </Show>
-                <button
-                  type="button"
-                  class="btn btn-ghost btn-xs font-mono"
-                  onClick={props.onDiscardBody}
-                  disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                >
-                  Discard
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-primary btn-xs font-mono"
-                  onClick={props.onSaveBody}
-                  disabled={!props.hasRequest || !props.bodyDraftDirty || props.bodyDraftSaving}
-                >
-                  {props.bodyDraftSaving ? 'Saving…' : 'Save'}
-                </button>
-              </div>
-            </div>
-
-            <div class="rounded-box border border-base-300 bg-base-100/80 p-2">
-              <label
-                for="request-workspace-body-file-path"
-                class="mb-1 block font-mono text-[11px] uppercase tracking-[0.06em] text-base-content/70"
-              >
-                File Path
-              </label>
-              <input
-                id="request-workspace-body-file-path"
-                type="text"
-                class="input input-sm w-full border-base-300 bg-base-100 font-mono text-xs"
-                value={props.requestBodyFilePathDraft}
-                onInput={(event) => props.onBodyFilePathChange(event.currentTarget.value)}
-                disabled={!props.hasRequest || props.bodyDraftSaving}
-                placeholder="./payload.json"
-              />
-            </div>
-          </div>
-        </Match>
-      </Switch>
-    </div>
-  );
-}
+// Re-export panel components from their new locations
+export { BodyPanel as RequestWorkspaceBodyPanel } from './panels/body';
+export { HeadersPanel as RequestWorkspaceHeadersPanel } from './panels/headers';
+export { ParamsPanel as RequestWorkspaceParamsPanel } from './panels/params';