diff --git a/web-client/src/components/SrParmsFormatTabs.vue b/web-client/src/components/SrParmsFormatTabs.vue
new file mode 100644
index 00000000..7e62cdfd
--- /dev/null
+++ b/web-client/src/components/SrParmsFormatTabs.vue
@@ -0,0 +1,623 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import Button from 'primevue/button'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
+import TabPanel from 'primevue/tabpanel'
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+import python from 'highlight.js/lib/languages/python'
+import lua from 'highlight.js/lib/languages/lua'
+import 'highlight.js/styles/atom-one-dark.css'
+import { createLogger } from '@/utils/logger'
+import {
+  jsonToPythonDict,
+  generatePythonClientCode,
+  jsonToLuaTable,
+  downloadAsFile
+} from '@/utils/reqParmsConverters'
+
+const logger = createLogger('SrParmsFormatTabs')
+
+// Register all languages
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('lua', lua)
+
+const props = withDefaults(
+  defineProps<{
+    rcvdParms: object | string | null
+    sentParms?: object | string | null
+    endpoint?: string
+    mode?: 'received' | 'sending'
+  }>(),
+  {
+    mode: 'received'
+  }
+)
+
+// Tooltip text based on mode
+const tooltipPrefix = computed(() =>
+  props.mode === 'sending'
+    ? 'Request parameters that will be sent to server formatted in'
+    : 'Request parameters used by the server to create this record formatted in'
+)
+
+const activeTab = ref('0')
+
+// Parse rcvdParms to object (this is the primary data source - always present)
+const parsedData = computed(() => {
+  try {
+    if (
+      !props.rcvdParms ||
+      (typeof props.rcvdParms === 'string' && props.rcvdParms.trim() === '')
+    ) {
+      return null
+    }
+    if (typeof props.rcvdParms === 'object' && Object.keys(props.rcvdParms).length === 0) {
+      return null
+    }
+    return typeof props.rcvdParms === 'string' ? JSON.parse(props.rcvdParms) : props.rcvdParms
+  } catch (error) {
+    logger.warn('Failed to parse rcvdParms data', {
+      error: error instanceof Error ? error.message : String(error)
+    })
+    return null
+  }
+})
+
+// Parse sentParms to object
+const parsedSentParms = computed(() => {
+  try {
+    if (
+      !props.sentParms ||
+      (typeof props.sentParms === 'string' && props.sentParms.trim() === '')
+    ) {
+      return null
+    }
+    if (typeof props.sentParms === 'object' && Object.keys(props.sentParms).length === 0) {
+      return null
+    }
+    const parsed =
+      typeof props.sentParms === 'string' ? JSON.parse(props.sentParms) : props.sentParms
+    // Extract inner parms if wrapped
+    if (parsed?.parms && typeof parsed.parms === 'object') {
+      return parsed.parms
+    }
+    return parsed
+  } catch (error) {
+    logger.warn('Failed to parse sentParms data', {
+      error: error instanceof Error ? error.message : String(error)
+    })
+    return null
+  }
+})
+
+// Extract inner data (remove 'parms' wrapper if present) for JSON/Python Snippet/Lua tabs
+const innerData = computed(() => {
+  if (!parsedData.value) return null
+  // If the data has a 'parms' key, extract just that level
+  if (parsedData.value.parms && typeof parsedData.value.parms === 'object') {
+    return parsedData.value.parms
+  }
+  return parsedData.value
+})
+
+// JSON format (uses innerData - without parms wrapper)
+const prettyJson = computed(() => {
+  if (!innerData.value) return 'No data available'
+  try {
+    return JSON.stringify(innerData.value, null, 2)
+  } catch {
+    return 'Invalid JSON format'
+  }
+})
+
+const highlightedJson = computed(() => {
+  try {
+    return hljs.highlight(prettyJson.value, { language: 'json' }).value
+  } catch {
+    return prettyJson.value
+  }
+})
+
+// Sent params JSON format (for the Sent tab)
+const prettySentJson = computed(() => {
+  if (!parsedSentParms.value) return 'No data available'
+  try {
+    return JSON.stringify(parsedSentParms.value, null, 2)
+  } catch {
+    return 'Invalid JSON format'
+  }
+})
+
+const highlightedSentJson = computed(() => {
+  try {
+    return hljs.highlight(prettySentJson.value, { language: 'json' }).value
+  } catch {
+    return prettySentJson.value
+  }
+})
+
+// Python snippet (dict literal only - uses innerData without parms wrapper)
+const pythonSnippet = computed(() => {
+  if (!innerData.value) return '# No data available'
+  try {
+    return jsonToPythonDict(innerData.value)
+  } catch {
+    return '# Error converting to Python'
+  }
+})
+
+const highlightedPythonSnippet = computed(() => {
+  try {
+    return hljs.highlight(pythonSnippet.value, { language: 'python' }).value
+  } catch {
+    return pythonSnippet.value
+  }
+})
+
+// Python complete example (uses innerData - without parms wrapper)
+const pythonExample = computed(() => {
+  if (!innerData.value) return '# No data available'
+  try {
+    return generatePythonClientCode(innerData.value, props.endpoint || 'atl06p')
+  } catch {
+    return '# Error generating Python code'
+  }
+})
+
+const highlightedPythonExample = computed(() => {
+  try {
+    return hljs.highlight(pythonExample.value, { language: 'python' }).value
+  } catch {
+    return pythonExample.value
+  }
+})
+
+// Lua format (uses innerData - without parms wrapper)
+const luaCode = computed(() => {
+  if (!innerData.value) return '-- No data available'
+  try {
+    return jsonToLuaTable(innerData.value)
+  } catch {
+    return '-- Error converting to Lua'
+  }
+})
+
+const highlightedLua = computed(() => {
+  try {
+    return hljs.highlight(luaCode.value, { language: 'lua' }).value
+  } catch {
+    return luaCode.value
+  }
+})
+
+// Copy functions
+const copyJsonToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(prettyJson.value)
+    logger.debug('Copied JSON to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy JSON', { error: err instanceof Error ? err.message : String(err) })
+  }
+}
+
+const copySentJsonToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(prettySentJson.value)
+    logger.debug('Copied sent JSON to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy sent JSON', {
+      error: err instanceof Error ? err.message : String(err)
+    })
+  }
+}
+
+const copyPythonSnippetToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(pythonSnippet.value)
+    logger.debug('Copied Python snippet to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy Python snippet', {
+      error: err instanceof Error ? err.message : String(err)
+    })
+  }
+}
+
+const copyPythonExampleToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(pythonExample.value)
+    logger.debug('Copied Python example to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy Python example', {
+      error: err instanceof Error ? err.message : String(err)
+    })
+  }
+}
+
+const copyLuaToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(luaCode.value)
+    logger.debug('Copied Lua to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy Lua', { error: err instanceof Error ? err.message : String(err) })
+  }
+}
+
+// Export Python example as file
+const exportPythonExample = () => {
+  const endpoint = props.endpoint || 'sliderule'
+  const filename = `${endpoint.replace(/[^a-zA-Z0-9]/g, '_')}_request.py`
+  downloadAsFile(pythonExample.value, filename)
+  logger.debug('Exported Python example', { filename })
+}
+
+// Logical diff between sent and received params
+type DiffEntry = {
+  path: string
+  type: 'added' | 'removed' | 'changed'
+  oldValue?: any
+  newValue?: any
+}
+
+function deepEqual(a: any, b: any): boolean {
+  if (a === b) return true
+  if (a === null || b === null) return false
+  if (typeof a !== typeof b) return false
+
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    // Sort arrays for comparison if they contain primitives
+    const sortedA = [...a].sort()
+    const sortedB = [...b].sort()
+    return sortedA.every((val, i) => deepEqual(val, sortedB[i]))
+  }
+
+  if (typeof a === 'object' && typeof b === 'object') {
+    const keysA = Object.keys(a)
+    const keysB = Object.keys(b)
+    if (keysA.length !== keysB.length) return false
+    return keysA.every((key) => deepEqual(a[key], b[key]))
+  }
+
+  return false
+}
+
+function computeDiff(sent: any, received: any, path: string = ''): DiffEntry[] {
+  const diffs: DiffEntry[] = []
+
+  if (sent === null || sent === undefined) {
+    if (received !== null && received !== undefined) {
+      if (typeof received === 'object' && !Array.isArray(received)) {
+        // Recurse into received object to show all added keys
+        for (const key of Object.keys(received)) {
+          const newPath = path ? `${path}.${key}` : key
+          diffs.push({ path: newPath, type: 'added', newValue: received[key] })
+        }
+      } else {
+        diffs.push({ path: path || '(root)', type: 'added', newValue: received })
+      }
+    }
+    return diffs
+  }
+
+  if (received === null || received === undefined) {
+    if (typeof sent === 'object' && !Array.isArray(sent)) {
+      for (const key of Object.keys(sent)) {
+        const newPath = path ? `${path}.${key}` : key
+        diffs.push({ path: newPath, type: 'removed', oldValue: sent[key] })
+      }
+    } else {
+      diffs.push({ path: path || '(root)', type: 'removed', oldValue: sent })
+    }
+    return diffs
+  }
+
+  // Both are objects
+  if (
+    typeof sent === 'object' &&
+    typeof received === 'object' &&
+    !Array.isArray(sent) &&
+    !Array.isArray(received)
+  ) {
+    const allKeys = new Set([...Object.keys(sent), ...Object.keys(received)])
+
+    for (const key of allKeys) {
+      const newPath = path ? `${path}.${key}` : key
+      const sentHas = key in sent
+      const receivedHas = key in received
+
+      if (sentHas && !receivedHas) {
+        diffs.push({ path: newPath, type: 'removed', oldValue: sent[key] })
+      } else if (!sentHas && receivedHas) {
+        diffs.push({ path: newPath, type: 'added', newValue: received[key] })
+      } else {
+        // Both have the key - recurse or compare
+        diffs.push(...computeDiff(sent[key], received[key], newPath))
+      }
+    }
+  } else if (!deepEqual(sent, received)) {
+    // Primitive or array changed
+    diffs.push({ path: path || '(root)', type: 'changed', oldValue: sent, newValue: received })
+  }
+
+  return diffs
+}
+
+const hasDiff = computed(() => {
+  return parsedSentParms.value !== null && innerData.value !== null
+})
+
+const diffEntries = computed((): DiffEntry[] => {
+  if (!parsedSentParms.value || !innerData.value) return []
+  return computeDiff(parsedSentParms.value, innerData.value)
+})
+
+function formatValue(val: any): string {
+  if (val === null) return 'null'
+  if (val === undefined) return 'undefined'
+  if (typeof val === 'object') {
+    return JSON.stringify(val)
+  }
+  return String(val)
+}
+
+const copyDiffToClipboard = async () => {
+  try {
+    const text = diffEntries.value
+      .map((d) => {
+        if (d.type === 'added') return `+ ${d.path}: ${formatValue(d.newValue)}`
+        if (d.type === 'removed') return `- ${d.path}: ${formatValue(d.oldValue)}`
+        return `~ ${d.path}: ${formatValue(d.oldValue)} -> ${formatValue(d.newValue)}`
+      })
+      .join('\n')
+    await navigator.clipboard.writeText(text || 'No differences')
+    logger.debug('Copied diff to clipboard')
+  } catch (err) {
+    logger.error('Failed to copy diff', { error: err instanceof Error ? err.message : String(err) })
+  }
+}
+
+// Re-highlight when data changes
+watch(parsedData, () => {
+  void nextTick()
+})
+</script>
+
+<template>
+  <Tabs v-model:value="activeTab">
+    <TabList>
+      <Tab value="0" :title="`${tooltipPrefix} JSON`">JSON</Tab>
+      <Tab value="1" :title="`${tooltipPrefix} Python`">Python</Tab>
+      <Tab value="2" :title="`${tooltipPrefix} Lua`">Lua</Tab>
+      <Tab value="3" title="Request parameters used in a python code example">Python Code</Tab>
+      <Tab v-if="hasDiff" value="4" title="The exact parameters sent by this web client">Sent</Tab>
+      <Tab
+        v-if="hasDiff"
+        value="5"
+        title="The difference between the parameters sent by this web client and those used by the server"
+        >Diff</Tab
+      >
+    </TabList>
+
+    <TabPanels>
+      <!-- JSON Tab -->
+      <TabPanel value="0">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button label="Copy JSON" size="small" icon="pi pi-copy" @click="copyJsonToClipboard" />
+          </div>
+          <pre v-html="highlightedJson"></pre>
+        </div>
+      </TabPanel>
+
+      <!-- Python Tab -->
+      <TabPanel value="1">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button
+              label="Copy Python"
+              size="small"
+              icon="pi pi-copy"
+              @click="copyPythonSnippetToClipboard"
+            />
+          </div>
+          <pre v-html="highlightedPythonSnippet"></pre>
+        </div>
+      </TabPanel>
+
+      <!-- Lua Tab -->
+      <TabPanel value="2">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button label="Copy Lua" size="small" icon="pi pi-copy" @click="copyLuaToClipboard" />
+          </div>
+          <pre v-html="highlightedLua"></pre>
+        </div>
+      </TabPanel>
+
+      <!-- Python Example Tab -->
+      <TabPanel value="3">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button
+              label="Copy Code"
+              size="small"
+              icon="pi pi-copy"
+              @click="copyPythonExampleToClipboard"
+            />
+            <Button
+              label="Export as .py"
+              size="small"
+              icon="pi pi-download"
+              @click="exportPythonExample"
+              severity="secondary"
+            />
+          </div>
+          <pre v-html="highlightedPythonExample"></pre>
+        </div>
+      </TabPanel>
+
+      <!-- Sent Tab (original sent parameters) -->
+      <TabPanel v-if="hasDiff" value="4">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button
+              label="Copy JSON"
+              size="small"
+              icon="pi pi-copy"
+              @click="copySentJsonToClipboard"
+            />
+          </div>
+          <pre v-html="highlightedSentJson"></pre>
+        </div>
+      </TabPanel>
+
+      <!-- Diff Tab -->
+      <TabPanel v-if="hasDiff" value="5">
+        <div class="tab-content">
+          <div class="button-row">
+            <Button label="Copy Diff" size="small" icon="pi pi-copy" @click="copyDiffToClipboard" />
+          </div>
+          <div class="diff-container">
+            <div v-if="diffEntries.length === 0" class="no-diff">
+              No differences between sent and received parameters
+            </div>
+            <div v-else class="diff-list">
+              <div
+                v-for="(entry, index) in diffEntries"
+                :key="index"
+                :class="['diff-entry', `diff-${entry.type}`]"
+              >
+                <span class="diff-icon">
+                  {{ entry.type === 'added' ? '+' : entry.type === 'removed' ? '-' : '~' }}
+                </span>
+                <span class="diff-path">{{ entry.path }}</span>
+                <span class="diff-value">
+                  <template v-if="entry.type === 'added'">
+                    {{ formatValue(entry.newValue) }}
+                  </template>
+                  <template v-else-if="entry.type === 'removed'">
+                    {{ formatValue(entry.oldValue) }}
+                  </template>
+                  <template v-else>
+                    <span class="old-value">{{ formatValue(entry.oldValue) }}</span>
+                    <span class="arrow"> -> </span>
+                    <span class="new-value">{{ formatValue(entry.newValue) }}</span>
+                  </template>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+</template>
+
+<style scoped>
+pre {
+  background-color: #1e1e1e;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.9rem;
+  max-height: 50vh;
+  overflow-y: auto;
+  margin: 0;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}
+
+.button-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.diff-container {
+  background-color: #1e1e1e;
+  padding: 1rem;
+  border-radius: 8px;
+  max-height: 50vh;
+  overflow-y: auto;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.no-diff {
+  color: #888;
+  text-align: center;
+  padding: 2rem;
+}
+
+.diff-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.diff-entry {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.diff-added {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+.diff-removed {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+.diff-changed {
+  background-color: rgba(234, 179, 8, 0.15);
+  color: #fbbf24;
+}
+
+.diff-icon {
+  font-weight: bold;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
+.diff-path {
+  color: #93c5fd;
+  flex-shrink: 0;
+}
+
+.diff-path::after {
+  content: ':';
+  margin-right: 0.5rem;
+}
+
+.diff-value {
+  word-break: break-all;
+}
+
+.old-value {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+.arrow {
+  color: #888;
+}
+
+.new-value {
+  color: #4ade80;
+}
+</style>
diff --git a/web-client/src/components/SrRecIdReqDisplay.vue b/web-client/src/components/SrRecIdReqDisplay.vue
index b97427e8..ef83c1df 100644
--- a/web-client/src/components/SrRecIdReqDisplay.vue
+++ b/web-client/src/components/SrRecIdReqDisplay.vue
@@ -14,7 +14,7 @@
     <SrCustomTooltip ref="tooltipRef" id="recIdDisplayTooltip" />
     <SrReqParmsDisplayDlg
       v-model:visible="showParmsDialog"
-      :json-data="reqParms"
+      :rcvd-parms="reqParms"
       :title="`endpoint = ${curAPI}`"
       :endpoint="curAPI"
       width="80vw"
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import Button from 'primevue/button'
 import { db } from '@/db/SlideRuleDb'
 import SrReqParmsDisplayDlg from './SrReqParmsDisplayDlg.vue'
@@ -55,15 +55,31 @@ const reqParms = ref<string>('')
 const curAPI = ref<string>('')
 const tooltipRef = ref()
 
-onMounted(async () => {
-  if (props.reqId) {
-    curAPI.value = await db.getFunc(props.reqId)
-    const p = await db.getReqParams(props.reqId)
+async function loadReqParams(reqId: number) {
+  if (reqId) {
+    curAPI.value = await db.getFunc(reqId)
+    // Get the full request record to access rcvd_parms
+    const request = await db.table('requests').get(reqId)
+    // Use rcvd_parms (what server used) if available, fall back to parameters (what was sent)
+    const p = request?.rcvd_parms || request?.parameters || {}
     reqParms.value = JSON.stringify(p, null, 2)
   } else {
-    logger.debug('onMounted: no reqId')
+    logger.debug('loadReqParams: no reqId')
+    reqParms.value = ''
+    curAPI.value = ''
   }
+}
+
+onMounted(() => {
+  void loadReqParams(props.reqId)
 })
+
+watch(
+  () => props.reqId,
+  (newReqId) => {
+    void loadReqParams(newReqId)
+  }
+)
 // Open the Parms dialog
 function openParmsDialog(params: string | object) {
   if (typeof params === 'object') {
diff --git a/web-client/src/components/SrRecTree.vue b/web-client/src/components/SrRecTree.vue
index 03d0888c..4d92776c 100644
--- a/web-client/src/components/SrRecTree.vue
+++ b/web-client/src/components/SrRecTree.vue
@@ -6,11 +6,6 @@ import type { TreeNode } from 'primevue/treenode'
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
 import router from '@/router/index.js'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
 import Dialog from 'primevue/dialog'
 
 import { useRequestsStore } from '@/stores/requestsStore'
@@ -27,6 +22,7 @@ import SrJsonDisplayDialog from './SrJsonDisplayDialog.vue'
 import SrImportParquetFile from './SrImportParquetFile.vue'
 import ToggleButton from 'primevue/togglebutton'
 import SrExportDialog from '@/components/SrExportDialog.vue'
+import SrParmsFormatTabs from '@/components/SrParmsFormatTabs.vue'
 import { updateElevationMap } from '@/utils/SrMapUtils'
 import { createLogger } from '@/utils/logger'
 
@@ -45,11 +41,10 @@ const currentSvrParms = ref('')
 
 // -- Dialog state for combined parameters view with tabs
 const showCombinedParmsDialog = ref(false)
-const currentReqParms = ref('')
-const currentRcvdReqParms = ref('')
-const hasReqParms = ref(false)
-const hasRcvdParms = ref(false)
-const defaultTab = ref('0')
+const currentRcvdParmsObj = ref<object | null>(null)
+const currentSentParmsObj = ref<object | null>(null)
+const currentFunc = ref('')
+const currentReqId = ref<number | null>(null)
 
 // -- Dialog state for "geo_metadata"
 const showGeoMetadataDialog = ref(false)
@@ -98,85 +93,16 @@ function openGeoMetadataDialog(metadata: string | object) {
   showGeoMetadataDialog.value = true
 }
 
-// Open the Combined Parameters dialog with tabs
-function openCombinedParmsDialog(reqParms: any, rcvdParms: any) {
-  // Check if parameters have actual content (not null, not empty string, not empty object)
-  const hasReqContent =
-    reqParms &&
-    (typeof reqParms === 'string' ? reqParms.trim() !== '' : Object.keys(reqParms).length > 0)
-  const hasRcvdContent =
-    rcvdParms &&
-    (typeof rcvdParms === 'string' ? rcvdParms.trim() !== '' : Object.keys(rcvdParms).length > 0)
-
-  hasReqParms.value = hasReqContent
-  hasRcvdParms.value = hasRcvdContent
-
-  if (hasReqParms.value) {
-    // Extract inner data (remove 'parms' wrapper if present) for consistency with Request View
-    const innerReqParms =
-      reqParms?.parms && typeof reqParms.parms === 'object' ? reqParms.parms : reqParms
-    currentReqParms.value =
-      typeof innerReqParms === 'object' ? JSON.stringify(innerReqParms, null, 2) : innerReqParms
-  }
-
-  if (hasRcvdParms.value) {
-    currentRcvdReqParms.value =
-      typeof rcvdParms === 'object' ? JSON.stringify(rcvdParms, null, 2) : rcvdParms
-  }
-
-  // Set default tab to the one with content, prefer "Sent to Server" if both have content
-  defaultTab.value = hasReqContent ? '0' : '1'
-
+// Open the Combined Parameters dialog
+function openCombinedParmsDialog(rcvdParms: any, sentParms: any, func: string, reqId: number) {
+  // Store rcvdParms for SrParmsFormatTabs (it handles parms wrapper stripping internally)
+  currentRcvdParmsObj.value = rcvdParms
+  currentSentParmsObj.value = sentParms
+  currentFunc.value = func || ''
+  currentReqId.value = reqId
   showCombinedParmsDialog.value = true
 }
 
-// Copy to clipboard functions
-const copyReqParmsToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(currentReqParms.value)
-    logger.debug('Request parameters copied to clipboard')
-    toast.add({
-      severity: 'success',
-      summary: 'Copied',
-      detail: 'Request parameters copied to clipboard',
-      life: srToastStore.getLife()
-    })
-  } catch (err) {
-    logger.error('Failed to copy request parameters', {
-      error: err instanceof Error ? err.message : String(err)
-    })
-    toast.add({
-      severity: 'error',
-      summary: 'Copy Failed',
-      detail: 'Failed to copy to clipboard',
-      life: srToastStore.getLife()
-    })
-  }
-}
-
-const copyRcvdParmsToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(currentRcvdReqParms.value)
-    logger.debug('Received parameters copied to clipboard')
-    toast.add({
-      severity: 'success',
-      summary: 'Copied',
-      detail: 'Received parameters copied to clipboard',
-      life: srToastStore.getLife()
-    })
-  } catch (err) {
-    logger.error('Failed to copy received parameters', {
-      error: err instanceof Error ? err.message : String(err)
-    })
-    toast.add({
-      severity: 'error',
-      summary: 'Copy Failed',
-      detail: 'Failed to copy to clipboard',
-      life: srToastStore.getLife()
-    })
-  }
-}
-
 const analyze = async (id: number) => {
   try {
     if (recTreeStore.findAndSelectNode(id)) {
@@ -421,7 +347,12 @@ onUnmounted(() => {
           label="Parms"
           class="sr-glow-button"
           @click="
-            openCombinedParmsDialog(slotProps.node.data.parameters, slotProps.node.data.rcvd_parms)
+            openCombinedParmsDialog(
+              slotProps.node.data.rcvd_parms,
+              slotProps.node.data.parameters,
+              slotProps.node.data.func,
+              slotProps.node.data.reqId
+            )
           "
           @mouseover="
             tooltipRef?.showTooltip($event, 'View request parameters (sent and received)')
@@ -660,66 +591,20 @@ onUnmounted(() => {
     </Column>
   </TreeTable>
 
-  <!-- Combined Request Parameters Dialog with Tabs -->
+  <!-- Combined Request Parameters Dialog -->
   <Dialog
     v-model:visible="showCombinedParmsDialog"
-    header="Request Parameters"
-    :style="{ width: '60vw' }"
+    :header="`Record ${currentReqId} Request Parameters`"
+    :style="{ width: '80vw' }"
     :modal="true"
     :dismissableMask="true"
   >
-    <Tabs v-if="hasReqParms || hasRcvdParms" :value="defaultTab">
-      <TabList>
-        <Tab
-          v-if="hasReqParms"
-          value="0"
-          :pt="{
-            root: {
-              title: 'Parameters sent to the server in the original request'
-            }
-          }"
-        >
-          Sent to Server
-        </Tab>
-        <Tab
-          v-if="hasRcvdParms"
-          value="1"
-          :pt="{
-            root: {
-              title: 'Parameters used by the server, returned in its response'
-            }
-          }"
-        >
-          Used by Server
-        </Tab>
-      </TabList>
-      <TabPanels>
-        <TabPanel v-if="hasReqParms" value="0">
-          <div class="tab-content">
-            <Button
-              label="Copy to clipboard"
-              size="small"
-              icon="pi pi-copy"
-              @click="copyReqParmsToClipboard"
-              class="copy-btn"
-            />
-            <pre class="json-content">{{ currentReqParms }}</pre>
-          </div>
-        </TabPanel>
-        <TabPanel v-if="hasRcvdParms" value="1">
-          <div class="tab-content">
-            <Button
-              label="Copy to clipboard"
-              size="small"
-              icon="pi pi-copy"
-              @click="copyRcvdParmsToClipboard"
-              class="copy-btn"
-            />
-            <pre class="json-content">{{ currentRcvdReqParms }}</pre>
-          </div>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+    <SrParmsFormatTabs
+      v-if="currentRcvdParmsObj"
+      :rcvdParms="currentRcvdParmsObj"
+      :sentParms="currentSentParmsObj"
+      :endpoint="currentFunc"
+    />
     <div v-else style="padding: 1rem; text-align: center; color: #999">No parameters available</div>
   </Dialog>
   <!-- Server Parameters Dialog -->
diff --git a/web-client/src/components/SrReqDisplay.vue b/web-client/src/components/SrReqDisplay.vue
index 5db63459..bd4cc98f 100644
--- a/web-client/src/components/SrReqDisplay.vue
+++ b/web-client/src/components/SrReqDisplay.vue
@@ -14,10 +14,11 @@
     ></Button>
     <SrReqParmsDisplayDlg
       v-model:visible="showParmsDialog"
-      :json-data="reqParms"
+      :rcvd-parms="reqParms"
       :title="`endpoint = ${curAPI}`"
       :endpoint="curAPI"
       width="80vw"
+      mode="sending"
     />
   </div>
 </template>
diff --git a/web-client/src/components/SrReqParmsDisplayDlg.vue b/web-client/src/components/SrReqParmsDisplayDlg.vue
index f17603d3..1de7e179 100644
--- a/web-client/src/components/SrReqParmsDisplayDlg.vue
+++ b/web-client/src/components/SrReqParmsDisplayDlg.vue
@@ -1,197 +1,21 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
 import Dialog from 'primevue/dialog'
-import Button from 'primevue/button'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import Tab from 'primevue/tab'
-import TabPanels from 'primevue/tabpanels'
-import TabPanel from 'primevue/tabpanel'
-import hljs from 'highlight.js/lib/core'
-import json from 'highlight.js/lib/languages/json'
-import python from 'highlight.js/lib/languages/python'
-import lua from 'highlight.js/lib/languages/lua'
-import 'highlight.js/styles/atom-one-dark.css'
-import { createLogger } from '@/utils/logger'
-import {
-  jsonToPythonDict,
-  generatePythonClientCode,
-  jsonToLuaTable,
-  downloadAsFile
-} from '@/utils/reqParmsConverters'
+import SrParmsFormatTabs from './SrParmsFormatTabs.vue'
 
-const logger = createLogger('SrReqParmsDisplayDlg')
-
-// Register all languages
-hljs.registerLanguage('json', json)
-hljs.registerLanguage('python', python)
-hljs.registerLanguage('lua', lua)
-
-const props = defineProps<{
-  jsonData: object | string | null
-  width?: string
-  title?: string
-  endpoint?: string
-}>()
-
-const modelValue = defineModel<boolean>({ default: false })
-const activeTab = ref('0')
-
-// Parse JSON data to object
-const parsedData = computed(() => {
-  try {
-    if (!props.jsonData || (typeof props.jsonData === 'string' && props.jsonData.trim() === '')) {
-      return null
-    }
-    if (typeof props.jsonData === 'object' && Object.keys(props.jsonData).length === 0) {
-      return null
-    }
-    return typeof props.jsonData === 'string' ? JSON.parse(props.jsonData) : props.jsonData
-  } catch (error) {
-    logger.warn('Failed to parse JSON data', {
-      error: error instanceof Error ? error.message : String(error)
-    })
-    return null
-  }
-})
-
-// Extract inner data (remove 'parms' wrapper if present) for JSON/Python Snippet/Lua tabs
-const innerData = computed(() => {
-  if (!parsedData.value) return null
-  // If the data has a 'parms' key, extract just that level
-  if (parsedData.value.parms && typeof parsedData.value.parms === 'object') {
-    return parsedData.value.parms
-  }
-  return parsedData.value
-})
-
-// JSON format (uses innerData - without parms wrapper)
-const prettyJson = computed(() => {
-  if (!innerData.value) return 'No data available'
-  try {
-    return JSON.stringify(innerData.value, null, 2)
-  } catch {
-    return 'Invalid JSON format'
-  }
-})
-
-const highlightedJson = computed(() => {
-  try {
-    return hljs.highlight(prettyJson.value, { language: 'json' }).value
-  } catch {
-    return prettyJson.value
-  }
-})
-
-// Python snippet (dict literal only - uses innerData without parms wrapper)
-const pythonSnippet = computed(() => {
-  if (!innerData.value) return '# No data available'
-  try {
-    return jsonToPythonDict(innerData.value)
-  } catch {
-    return '# Error converting to Python'
+const props = withDefaults(
+  defineProps<{
+    rcvdParms: object | string | null
+    width?: string
+    title?: string
+    endpoint?: string
+    mode?: 'received' | 'sending'
+  }>(),
+  {
+    mode: 'received'
   }
-})
-
-const highlightedPythonSnippet = computed(() => {
-  try {
-    return hljs.highlight(pythonSnippet.value, { language: 'python' }).value
-  } catch {
-    return pythonSnippet.value
-  }
-})
-
-// Python complete example (uses innerData - without parms wrapper)
-const pythonExample = computed(() => {
-  if (!innerData.value) return '# No data available'
-  try {
-    return generatePythonClientCode(innerData.value, props.endpoint || 'atl06p')
-  } catch {
-    return '# Error generating Python code'
-  }
-})
-
-const highlightedPythonExample = computed(() => {
-  try {
-    return hljs.highlight(pythonExample.value, { language: 'python' }).value
-  } catch {
-    return pythonExample.value
-  }
-})
-
-// Lua format (uses innerData - without parms wrapper)
-const luaCode = computed(() => {
-  if (!innerData.value) return '-- No data available'
-  try {
-    return jsonToLuaTable(innerData.value)
-  } catch {
-    return '-- Error converting to Lua'
-  }
-})
-
-const highlightedLua = computed(() => {
-  try {
-    return hljs.highlight(luaCode.value, { language: 'lua' }).value
-  } catch {
-    return luaCode.value
-  }
-})
-
-// Copy functions
-const copyJsonToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(prettyJson.value)
-    logger.debug('Copied JSON to clipboard')
-  } catch (err) {
-    logger.error('Failed to copy JSON', { error: err instanceof Error ? err.message : String(err) })
-  }
-}
+)
 
-const copyPythonSnippetToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(pythonSnippet.value)
-    logger.debug('Copied Python snippet to clipboard')
-  } catch (err) {
-    logger.error('Failed to copy Python snippet', {
-      error: err instanceof Error ? err.message : String(err)
-    })
-  }
-}
-
-const copyPythonExampleToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(pythonExample.value)
-    logger.debug('Copied Python example to clipboard')
-  } catch (err) {
-    logger.error('Failed to copy Python example', {
-      error: err instanceof Error ? err.message : String(err)
-    })
-  }
-}
-
-const copyLuaToClipboard = async () => {
-  try {
-    await navigator.clipboard.writeText(luaCode.value)
-    logger.debug('Copied Lua to clipboard')
-  } catch (err) {
-    logger.error('Failed to copy Lua', { error: err instanceof Error ? err.message : String(err) })
-  }
-}
-
-// Export Python example as file
-const exportPythonExample = () => {
-  const endpoint = props.endpoint || 'sliderule'
-  const filename = `${endpoint.replace(/[^a-zA-Z0-9]/g, '_')}_request.py`
-  downloadAsFile(pythonExample.value, filename)
-  logger.debug('Exported Python example', { filename })
-}
-
-// Re-highlight when dialog opens
-watch([modelValue, parsedData], () => {
-  if (modelValue.value) {
-    void nextTick()
-  }
-})
+const modelValue = defineModel<boolean>({ default: false })
 </script>
 
 <template>
@@ -199,7 +23,7 @@ watch([modelValue, parsedData], () => {
     v-model:visible="modelValue"
     :modal="true"
     :closable="true"
-    :style="{ width: width || '80vw' }"
+    :style="{ width: props.width || '80vw' }"
   >
     <template #header>
       <div class="dialog-header">
@@ -207,93 +31,11 @@ watch([modelValue, parsedData], () => {
       </div>
     </template>
 
-    <Tabs v-model:value="activeTab">
-      <TabList>
-        <Tab value="0">JSON</Tab>
-        <Tab value="1">Python</Tab>
-        <Tab value="2">Lua</Tab>
-        <Tab value="3">Python Code</Tab>
-      </TabList>
-
-      <TabPanels>
-        <!-- JSON Tab -->
-        <TabPanel value="0">
-          <div class="tab-content">
-            <div class="button-row">
-              <Button
-                label="Copy JSON"
-                size="small"
-                icon="pi pi-copy"
-                @click="copyJsonToClipboard"
-              />
-            </div>
-            <pre v-html="highlightedJson"></pre>
-          </div>
-        </TabPanel>
-
-        <!-- Python Tab -->
-        <TabPanel value="1">
-          <div class="tab-content">
-            <div class="button-row">
-              <Button
-                label="Copy"
-                size="small"
-                icon="pi pi-copy"
-                @click="copyPythonSnippetToClipboard"
-              />
-            </div>
-            <pre v-html="highlightedPythonSnippet"></pre>
-          </div>
-        </TabPanel>
-
-        <!-- Lua Tab -->
-        <TabPanel value="2">
-          <div class="tab-content">
-            <div class="button-row">
-              <Button label="Copy Lua" size="small" icon="pi pi-copy" @click="copyLuaToClipboard" />
-            </div>
-            <pre v-html="highlightedLua"></pre>
-          </div>
-        </TabPanel>
-
-        <!-- Python Example Tab -->
-        <TabPanel value="3">
-          <div class="tab-content">
-            <div class="button-row">
-              <Button
-                label="Copy Code"
-                size="small"
-                icon="pi pi-copy"
-                @click="copyPythonExampleToClipboard"
-              />
-              <Button
-                label="Export as .py"
-                size="small"
-                icon="pi pi-download"
-                @click="exportPythonExample"
-                severity="secondary"
-              />
-            </div>
-            <pre v-html="highlightedPythonExample"></pre>
-          </div>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+    <SrParmsFormatTabs :rcvdParms="props.rcvdParms" :endpoint="props.endpoint" :mode="props.mode" />
   </Dialog>
 </template>
 
 <style scoped>
-pre {
-  background-color: #1e1e1e;
-  padding: 1rem;
-  border-radius: 8px;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  max-height: 60vh;
-  overflow-y: auto;
-  margin: 0;
-}
-
 .dialog-header {
   display: flex;
   align-items: center;
@@ -306,17 +48,4 @@ pre {
   font-size: 1.2rem;
   font-weight: bold;
 }
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding-top: 0.5rem;
-}
-
-.button-row {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
 </style>