feat(studio): add raw/md/json format toggle to span payloads

web/packages/studio/package.json

@@ -67,6 +67,7 @@
     "classnames": "catalog:",
     "handlebars": "catalog:",
     "hyparquet": "catalog:",
+    "jsonc-parser": "3.3.1",
     "lucide-react": "catalog:",
     "modern-tour": "^0.1.1",
     "oidc-client-ts": "catalog:",
@@ -114,7 +115,6 @@
     "@vitest/ui": "catalog:",
     "blob-polyfill": "^9.0.20240710",
     "globals": "^17.7.0",
-    "rolldown": "^1.1.4",
     "happy-dom": "catalog:",
     "js-yaml": "^4.3.0",
     "jsdom": "catalog:",
@@ -123,6 +123,7 @@
     "postcss-prefix-selector": "^2.1.1",
     "prettier": "^3.2.5",
     "qs": "catalog:",
+    "rolldown": "^1.1.4",
     "rollup-plugin-license": "^3.6.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "catalog:",

web/packages/studio/src/components/IntakeDetail/IntakeComponents/SpanPayloadFormatToggle.tsx

@@ -0,0 +1,72 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, Flex, Tooltip } from '@nvidia/foundations-react-core';
+import type {
+  SpanPayloadFormat,
+  SpanPayloadFormatState,
+} from '@studio/components/IntakeDetail/IntakeComponents/spanPayloadFormat';
+import { type FC, type MouseEvent } from 'react';
+
+const FORMAT_OPTIONS: readonly { format: SpanPayloadFormat; label: string; name: string }[] = [
+  { format: 'raw', label: 'raw', name: 'raw text' },
+  { format: 'md', label: 'md', name: 'markdown' },
+  { format: 'json', label: 'json', name: 'JSON' },
+];
+
+interface SpanPayloadFormatToggleProps {
+  state: SpanPayloadFormatState;
+  /** Names the payload in labels and tooltips, e.g. `input` → "View input as JSON". */
+  payloadLabel: string;
+}
+
+export const SpanPayloadFormatToggle: FC<SpanPayloadFormatToggleProps> = ({
+  state,
+  payloadLabel,
+}) => {
+  if (state.isEmpty) {
+    return null;
+  }
+
+  // The trigger row is a <summary>; keep clicks from toggling/collapsing it.
+  const withoutToggle = (handler: () => void) => (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handler();
+  };
+
+  return (
+    <Flex align="center" gap="density-xs" className="shrink-0">
+      {FORMAT_OPTIONS.map(({ format, label, name }) => {
+        const unavailable = format === 'json' && !state.isJson;
+        const active = state.format === format;
+        const button = (
+          <Button
+            type="button"
+            size="tiny"
+            kind="tertiary"
+            className="font-mono"
+            color={active ? 'brand' : 'neutral'}
+            aria-label={`View ${payloadLabel} as ${name}`}
+            aria-pressed={active}
+            disabled={unavailable}
+            onClick={withoutToggle(() => state.select(format))}
+          >
+            {label}
+          </Button>
+        );
+        return (
+          <Tooltip
+            key={format}
+            side="top"
+            slotContent={unavailable ? `This ${payloadLabel} is not valid JSON` : `View as ${name}`}
+          >
+            {/* A disabled button fires no hover or focus events, so its
+                tooltip needs a focusable wrapper. */}
+            {unavailable ? <span tabIndex={0}>{button}</span> : button}
+          </Tooltip>
+        );
+      })}
+    </Flex>
+  );
+};