diff --git a/web/packages/studio/src/constants/routes.ts b/web/packages/studio/src/constants/routes.ts
index 530be044c8..1e7bd2a2e9 100644
--- a/web/packages/studio/src/constants/routes.ts
+++ b/web/packages/studio/src/constants/routes.ts
@@ -111,6 +111,7 @@ export const ROUTES = {
     secrets: `/workspaces/:${P.workspace}/secrets`,
     guardrails: `/workspaces/:${P.workspace}/guardrails`,
     guardrailDetail: `/workspaces/:${P.workspace}/guardrails/:${P.guardrailConfigName}`,
+    guardrailConfig: `/workspaces/:${P.workspace}/guardrails/:${P.guardrailConfigName}/config`,
     settings: `/workspaces/:${P.workspace}/settings`,
     /** Workspace members and role-based access (Entities role bindings) */
     members: `/workspaces/:${P.workspace}/members`,
diff --git a/web/packages/studio/src/mocks/handlers/guardrails.ts b/web/packages/studio/src/mocks/handlers/guardrails.ts
index 4e98f09706..c1ffe47607 100644
--- a/web/packages/studio/src/mocks/handlers/guardrails.ts
+++ b/web/packages/studio/src/mocks/handlers/guardrails.ts
@@ -70,6 +70,16 @@ export const guardrailsHandlers = [
       return HttpResponse.json(config);
     }
   ),
+  http.patch(
+    `${PLATFORM_BASE_URL}/apis/guardrails/v2/workspaces/:workspace/configs/:name`,
+    async ({ params, request }) => {
+      const config = mockGuardrailConfigs.find((c) => c.name === params.name);
+      if (!config) return new HttpResponse(null, { status: 404 });
+      const body = (await request.json()) as Partial<GuardrailConfig>;
+      Object.assign(config, body);
+      return HttpResponse.json(config);
+    }
+  ),
   http.delete(
     `${PLATFORM_BASE_URL}/apis/guardrails/v2/workspaces/:workspace/configs/:name`,
     () => new HttpResponse(null, { status: 200 })
diff --git a/web/packages/studio/src/routes/groups/guardrailsRoutes.tsx b/web/packages/studio/src/routes/groups/guardrailsRoutes.tsx
index fc9f89d772..9825f7217d 100644
--- a/web/packages/studio/src/routes/groups/guardrailsRoutes.tsx
+++ b/web/packages/studio/src/routes/groups/guardrailsRoutes.tsx
@@ -5,7 +5,7 @@ import { ErrorPanel } from '@studio/components/ErrorPanel';
 import { ROUTES } from '@studio/constants/routes';
 import { gateGuardrailsRoutes } from '@studio/routes/utils';
 import { lazy } from 'react';
-import type { RouteObject } from 'react-router-dom';
+import { Navigate, type RouteObject } from 'react-router-dom';
 
 const GuardrailsRoute = lazy(() =>
   import('@studio/routes/guardrails/GuardrailsRoute').then((m) => ({
@@ -19,6 +19,12 @@ const GuardrailDetailRoute = lazy(() =>
   }))
 );
 
+const GuardrailConfigTab = lazy(() =>
+  import('@studio/routes/guardrails/GuardrailConfigTab').then((m) => ({
+    default: m.GuardrailConfigTab,
+  }))
+);
+
 export const guardrailsRoutes: RouteObject[] = gateGuardrailsRoutes([
   {
     path: ROUTES.workspace.guardrails,
@@ -29,5 +35,15 @@ export const guardrailsRoutes: RouteObject[] = gateGuardrailsRoutes([
     path: ROUTES.workspace.guardrailDetail,
     element: <GuardrailDetailRoute />,
     errorElement: <ErrorPanel title="Guardrails" />,
+    children: [
+      {
+        index: true,
+        element: <Navigate to="config" replace />,
+      },
+      {
+        path: ROUTES.workspace.guardrailConfig,
+        element: <GuardrailConfigTab />,
+      },
+    ],
   },
 ]);
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/BehaviorSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/BehaviorSection.tsx
new file mode 100644
index 0000000000..8f28a6804e
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/BehaviorSection.tsx
@@ -0,0 +1,80 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput } from '@nemo/sdk/generated/platform/schema';
+import { Badge, Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import { FieldList } from '@studio/routes/guardrails/GuardrailConfigTab/configPrimitives';
+import type { Field } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+import { SlidersHorizontal } from 'lucide-react';
+import type { FC } from 'react';
+
+const behaviorFields = (data: RailsConfigOutput | undefined): Field[] => {
+  const fields: Field[] = [];
+  if (data?.passthrough != null) {
+    fields.push({ label: 'Passthrough', value: data.passthrough ? 'On' : 'Off' });
+  }
+  if (data?.enable_rails_exceptions != null) {
+    fields.push({
+      label: 'Rails exceptions',
+      value: data.enable_rails_exceptions ? 'Raised' : 'Return messages',
+    });
+  }
+  if (data?.colang_version) fields.push({ label: 'Colang version', value: data.colang_version });
+  if (data?.actions_server_url) {
+    fields.push({ label: 'Actions server', value: data.actions_server_url });
+  }
+  return fields;
+};
+
+const tracingFields = (data: RailsConfigOutput | undefined): Field[] => {
+  const tracing = data?.tracing;
+  if (!tracing) return [];
+  const fields: Field[] = [];
+  if (tracing.enabled != null) {
+    fields.push({ label: 'Tracing', value: tracing.enabled ? 'Enabled' : 'Disabled' });
+  }
+  if (tracing.span_format) fields.push({ label: 'Span format', value: tracing.span_format });
+  if (tracing.adapters?.length) {
+    fields.push({
+      label: 'Adapters',
+      value: tracing.adapters.map((adapter) => adapter.name ?? 'unnamed').join(', '),
+    });
+  }
+  return fields;
+};
+
+const captureIsEnabled = (data: RailsConfigOutput | undefined): boolean =>
+  data?.tracing?.enable_content_capture === true;
+
+const hasBehaviorContent = (data: RailsConfigOutput | undefined): boolean =>
+  behaviorFields(data).length > 0 || tracingFields(data).length > 0 || captureIsEnabled(data);
+
+export const BehaviorSection: FC<{ data: RailsConfigOutput | undefined }> = ({ data }) => {
+  if (!hasBehaviorContent(data)) return null;
+
+  const captureEnabled = captureIsEnabled(data);
+
+  return (
+    <Panel
+      slotHeading="Behavior &amp; operations"
+      slotIcon={<SlidersHorizontal />}
+      elevation="high"
+      density="compact"
+    >
+      <Stack gap="density-md">
+        <FieldList fields={behaviorFields(data)} />
+        <FieldList fields={tracingFields(data)} />
+        {captureEnabled ? (
+          <Flex align="center" gap="density-sm">
+            <Badge color="yellow" kind="solid">
+              Content capture on
+            </Badge>
+            <Text kind="body/regular/xs" className="text-text-secondary">
+              Prompts and responses are recorded in traces and may include PII.
+            </Text>
+          </Flex>
+        ) : null}
+      </Stack>
+    </Panel>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/DetectorsSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/DetectorsSection.tsx
new file mode 100644
index 0000000000..974a8b3ee6
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/DetectorsSection.tsx
@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigDataOutput, RailsOutput } from '@nemo/sdk/generated/platform/schema';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Badge,
+  Flex,
+  Panel,
+  Text,
+} from '@nvidia/foundations-react-core';
+import {
+  EmptyText,
+  FieldList,
+  ScopeBadges,
+} from '@studio/routes/guardrails/GuardrailConfigTab/configPrimitives';
+import {
+  detectorMeta,
+  deriveScopes,
+  listConfiguredDetectors,
+  summarizeDetector,
+} from '@studio/routes/guardrails/GuardrailConfigTab/detectors';
+import type { DetectorKey } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+import { ScanSearch } from 'lucide-react';
+import type { FC } from 'react';
+
+export const DetectorsSection: FC<{ rails: RailsOutput | undefined }> = ({ rails }) => {
+  const detectors = listConfiguredDetectors(rails);
+  const config: RailsConfigDataOutput = rails?.config ?? {};
+
+  return (
+    <Panel slotHeading="Detectors" slotIcon={<ScanSearch />} elevation="high" density="compact">
+      {detectors.length === 0 ? (
+        <EmptyText>No detectors configured.</EmptyText>
+      ) : (
+        <AccordionRoot multiple>
+          {detectors.map((key) => {
+            const meta = detectorMeta(key);
+            const scopes = deriveScopes(rails, key);
+            const fields = summarizeDetector(config[key as DetectorKey]);
+            return (
+              <AccordionItem key={key} value={key}>
+                <AccordionTrigger>
+                  <Flex align="center" justify="between" gap="density-md" className="w-full">
+                    <Flex align="center" gap="density-sm" wrap="wrap">
+                      <Text kind="label/bold/md">{meta.label}</Text>
+                      <Badge color={meta.firstParty ? 'green' : 'gray'} kind="outline">
+                        {meta.firstParty ? 'NVIDIA' : 'Third-party'}
+                      </Badge>
+                    </Flex>
+                    <ScopeBadges scopes={scopes} />
+                  </Flex>
+                </AccordionTrigger>
+                <AccordionContent>
+                  {fields.length ? (
+                    <FieldList fields={fields} />
+                  ) : (
+                    <EmptyText>Enabled with default settings.</EmptyText>
+                  )}
+                </AccordionContent>
+              </AccordionItem>
+            );
+          })}
+        </AccordionRoot>
+      )}
+    </Panel>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/GeneralSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/GeneralSection.tsx
new file mode 100644
index 0000000000..faa88b4229
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/GeneralSection.tsx
@@ -0,0 +1,80 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Divider, FormField, Panel, Stack, TextArea } from '@nvidia/foundations-react-core';
+import type { GuardrailFormValues } from '@studio/routes/guardrails/GuardrailForm/formModel';
+import { MessageSquareText } from 'lucide-react';
+import { type FC, Fragment } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+interface GeneralField {
+  name: keyof GuardrailFormValues;
+  label: string;
+  description: string;
+  placeholder: string;
+}
+
+const FIELDS: GeneralField[] = [
+  {
+    name: 'generalInstruction',
+    label: 'General instruction',
+    description:
+      'Plain-language guidance the assistant follows. Injected into the guardrail prompts as the base instruction.',
+    placeholder:
+      'e.g. The assistant is a helpful support agent for NVIDIA products. It is polite and never discusses competitors.',
+  },
+  {
+    name: 'sampleConversation',
+    label: 'Sample conversation',
+    description:
+      'An example dialogue included in the guardrail prompts to demonstrate the desired tone and format.',
+    placeholder: 'user: Hi!\nassistant: Hello! How can I help you today?',
+  },
+];
+
+/**
+ * The "General" panel: free-text fields that shape the guardrail prompts, bound
+ * to the RHF form model. Their mapping to/from the config schema (e.g. the
+ * instruction ↔ first `general` entry in `instructions[]`) lives in formModel.
+ */
+export const GeneralSection: FC = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<GuardrailFormValues>();
+
+  return (
+    <Panel
+      slotHeading="General"
+      slotIcon={<MessageSquareText />}
+      elevation="high"
+      density="compact"
+    >
+      <Stack gap="density-lg">
+        {FIELDS.map((field, index) => (
+          <Fragment key={field.name}>
+            {index > 0 ? <Divider /> : null}
+            <FormField
+              slotLabel={field.label}
+              slotHelp={field.description}
+              status={errors[field.name] ? 'error' : undefined}
+              slotError={errors[field.name]?.message}
+            >
+              {/*
+                No `rows`: it fights `field-sizing: content` (from resizeable="auto"),
+                which clips the top and offsets the scrollbar on long values. The base
+                style's `min-height: 3lh` provides the floor; --max-auto-height the cap.
+              */}
+              <TextArea
+                resizeable="auto"
+                className="w-full"
+                placeholder={field.placeholder}
+                {...register(field.name)}
+              />
+            </FormField>
+          </Fragment>
+        ))}
+      </Stack>
+    </Panel>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/LlmSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/LlmSection.tsx
new file mode 100644
index 0000000000..9f837d46f5
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/LlmSection.tsx
@@ -0,0 +1,138 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput } from '@nemo/sdk/generated/platform/schema';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Divider,
+  Panel,
+  Stack,
+  Text,
+} from '@nvidia/foundations-react-core';
+import {
+  EmptyText,
+  FieldList,
+} from '@studio/routes/guardrails/GuardrailConfigTab/configPrimitives';
+import { GENERAL_INSTRUCTION_TYPE } from '@studio/routes/guardrails/GuardrailConfigTab/instructions';
+import type { Field } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+import { Bot } from 'lucide-react';
+import { Fragment, type FC } from 'react';
+
+/** The general instruction has its own editable field; exclude it here. */
+const nonGeneralInstructions = (data: RailsConfigOutput | undefined) =>
+  (data?.instructions ?? []).filter((instruction) => instruction.type !== GENERAL_INSTRUCTION_TYPE);
+
+/** A read-only multi-line text block (instructions). */
+const TextBlock: FC<{ label: string; content: string }> = ({ label, content }) => (
+  <Stack gap="density-xs">
+    <Text kind="label/bold/sm">{label}</Text>
+    <Text
+      kind="body/regular/sm"
+      className="whitespace-pre-wrap rounded bg-surface-raised p-density-md"
+    >
+      {content}
+    </Text>
+  </Stack>
+);
+
+const hasLlmContent = (data: RailsConfigOutput | undefined): boolean =>
+  Boolean(
+    data?.models?.length ||
+    nonGeneralInstructions(data).length ||
+    data?.prompts?.length ||
+    data?.prompting_mode ||
+    data?.lowest_temperature != null ||
+    data?.enable_multi_step_generation != null
+  );
+
+export const LlmSection: FC<{ data: RailsConfigOutput | undefined }> = ({ data }) => {
+  if (!hasLlmContent(data)) return null;
+
+  const models = data?.models ?? [];
+  const instructions = nonGeneralInstructions(data);
+  const prompts = data?.prompts ?? [];
+
+  const settings: Field[] = [];
+  if (data?.prompting_mode) settings.push({ label: 'Prompting mode', value: data.prompting_mode });
+  if (data?.lowest_temperature != null) {
+    settings.push({ label: 'Lowest temperature', value: String(data.lowest_temperature) });
+  }
+  if (data?.enable_multi_step_generation != null) {
+    settings.push({
+      label: 'Multi-step generation',
+      value: data.enable_multi_step_generation ? 'Enabled' : 'Disabled',
+    });
+  }
+
+  return (
+    <Panel
+      slotHeading="Models &amp; prompting"
+      slotIcon={<Bot />}
+      elevation="high"
+      density="compact"
+    >
+      <Stack gap="density-md">
+        {models.length ? (
+          <Stack gap="density-sm">
+            <Text kind="label/bold/sm">Models ({models.length})</Text>
+            {models.map((model, index) => (
+              <Fragment key={`${model.type}-${model.model ?? index}`}>
+                {index > 0 ? <Divider /> : null}
+                <FieldList
+                  fields={[
+                    { label: 'Type', value: model.type },
+                    { label: 'Engine', value: model.engine },
+                    ...(model.model ? [{ label: 'Model', value: model.model }] : []),
+                    ...(model.mode ? [{ label: 'Mode', value: model.mode }] : []),
+                  ]}
+                />
+              </Fragment>
+            ))}
+          </Stack>
+        ) : null}
+
+        {instructions.map((instruction, index) => (
+          <TextBlock
+            key={`${instruction.type}-${index}`}
+            label={`Instructions (${instruction.type})`}
+            content={instruction.content}
+          />
+        ))}
+
+        <FieldList fields={settings} />
+
+        {prompts.length ? (
+          <Stack gap="density-sm">
+            <Text kind="label/bold/sm">Prompt overrides ({prompts.length})</Text>
+            <AccordionRoot multiple>
+              {prompts.map((prompt, index) => (
+                <AccordionItem key={`${prompt.task}-${index}`} value={`${prompt.task}-${index}`}>
+                  <AccordionTrigger>
+                    <Text kind="body/regular/sm">{prompt.task}</Text>
+                  </AccordionTrigger>
+                  <AccordionContent>
+                    {prompt.content ? (
+                      <Text
+                        kind="body/regular/sm"
+                        className="whitespace-pre-wrap rounded bg-surface-raised p-density-md"
+                      >
+                        {prompt.content}
+                      </Text>
+                    ) : (
+                      <EmptyText>
+                        This prompt uses a message-template format (see raw config).
+                      </EmptyText>
+                    )}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </AccordionRoot>
+          </Stack>
+        ) : null}
+      </Stack>
+    </Panel>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/PipelineSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/PipelineSection.tsx
new file mode 100644
index 0000000000..ae8a20b666
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/PipelineSection.tsx
@@ -0,0 +1,238 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsOutput } from '@nemo/sdk/generated/platform/schema';
+import { Badge, Divider, Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import {
+  EmptyText,
+  FieldList,
+} from '@studio/routes/guardrails/GuardrailConfigTab/configPrimitives';
+import { detectorMeta } from '@studio/routes/guardrails/GuardrailConfigTab/detectors';
+import { recognizeFlow } from '@studio/routes/guardrails/GuardrailConfigTab/flowRegistry';
+import type { Field, StageKey } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+import { Waypoints } from 'lucide-react';
+import { Fragment, type FC, type ReactNode } from 'react';
+
+interface StageDescriptor {
+  key: StageKey;
+  title: string;
+  caption: string;
+  /** Core stages are always shown, even when empty, so gaps are visible. */
+  core: boolean;
+}
+
+const STAGES: StageDescriptor[] = [
+  {
+    key: 'input',
+    title: 'Input rails',
+    caption: 'Applied to the user message before the LLM.',
+    core: true,
+  },
+  {
+    key: 'dialog',
+    title: 'Dialog rails',
+    caption: 'Topical control over the conversation flow.',
+    core: false,
+  },
+  {
+    key: 'retrieval',
+    title: 'Retrieval rails',
+    caption: 'Applied to retrieved knowledge-base chunks (RAG).',
+    core: true,
+  },
+  {
+    key: 'output',
+    title: 'Output rails',
+    caption: 'Applied to the LLM response before it reaches the user.',
+    core: true,
+  },
+  { key: 'tool_input', title: 'Tool-input rails', caption: 'Validate tool inputs.', core: false },
+  {
+    key: 'tool_output',
+    title: 'Tool-output rails',
+    caption: 'Validate tool outputs.',
+    core: false,
+  },
+  {
+    key: 'actions',
+    title: 'Action rails',
+    caption: 'Actions that resolve instantly.',
+    core: false,
+  },
+];
+
+const stageFlows = (rails: RailsOutput | undefined, key: StageKey): string[] => {
+  switch (key) {
+    case 'input':
+      return rails?.input?.flows ?? [];
+    case 'output':
+      return rails?.output?.flows ?? [];
+    case 'retrieval':
+      return rails?.retrieval?.flows ?? [];
+    case 'tool_input':
+      return rails?.tool_input?.flows ?? [];
+    case 'tool_output':
+      return rails?.tool_output?.flows ?? [];
+    default:
+      return [];
+  }
+};
+
+const isParallel = (rails: RailsOutput | undefined, key: StageKey): boolean => {
+  switch (key) {
+    case 'input':
+      return rails?.input?.parallel ?? false;
+    case 'output':
+      return rails?.output?.parallel ?? false;
+    case 'tool_input':
+      return rails?.tool_input?.parallel ?? false;
+    case 'tool_output':
+      return rails?.tool_output?.parallel ?? false;
+    default:
+      return false;
+  }
+};
+
+/** Stage-specific extra config rendered below the flow list. */
+const stageExtras = (rails: RailsOutput | undefined, key: StageKey): Field[] => {
+  if (key === 'output') {
+    const streaming = rails?.output?.streaming;
+    const fields: Field[] = [];
+    if (streaming?.enabled != null) {
+      fields.push({ label: 'Streaming', value: streaming.enabled ? 'Enabled' : 'Disabled' });
+    }
+    if (streaming?.chunk_size != null) {
+      fields.push({ label: 'Chunk size', value: String(streaming.chunk_size) });
+    }
+    if (rails?.output?.apply_to_reasoning_traces != null) {
+      fields.push({
+        label: 'Apply to reasoning traces',
+        value: rails.output.apply_to_reasoning_traces ? 'Yes' : 'No',
+      });
+    }
+    return fields;
+  }
+  if (key === 'dialog') {
+    const dialog = rails?.dialog;
+    const fields: Field[] = [];
+    if (dialog?.single_call?.enabled != null) {
+      fields.push({
+        label: 'Single call',
+        value: dialog.single_call.enabled ? 'Enabled' : 'Disabled',
+      });
+    }
+    if (dialog?.user_messages?.embeddings_only != null) {
+      fields.push({
+        label: 'Embeddings-only intents',
+        value: dialog.user_messages.embeddings_only ? 'Yes' : 'No',
+      });
+    }
+    return fields;
+  }
+  if (key === 'actions') {
+    const actions = rails?.actions?.instant_actions ?? [];
+    return actions.length ? [{ label: 'Instant actions', value: actions.join(', ') }] : [];
+  }
+  return [];
+};
+
+const FlowRow: FC<{ flow: string; isFirst: boolean }> = ({ flow, isFirst }) => {
+  const recognized = recognizeFlow(flow);
+  const showRaw = recognized.recognized && recognized.raw !== recognized.label;
+  return (
+    <Flex
+      role="listitem"
+      align="center"
+      justify="between"
+      gap="density-md"
+      className={isFirst ? 'py-density-xs' : 'py-density-xs border-t border-border-subtle'}
+    >
+      <Stack gap="0" className="min-w-0">
+        <Text kind="body/regular/sm" className="truncate" title={recognized.raw}>
+          {recognized.label}
+        </Text>
+        {showRaw ? (
+          <Text
+            kind="body/regular/xs"
+            className="truncate text-text-secondary"
+            title={recognized.raw}
+          >
+            {recognized.raw}
+          </Text>
+        ) : null}
+      </Stack>
+      {recognized.detectorKey ? (
+        <Badge color="gray" kind="outline">
+          {detectorMeta(recognized.detectorKey).label}
+        </Badge>
+      ) : null}
+    </Flex>
+  );
+};
+
+const StageCard: FC<{ stage: StageDescriptor; rails: RailsOutput | undefined }> = ({
+  stage,
+  rails,
+}) => {
+  const flows = stageFlows(rails, stage.key);
+  const extras = stageExtras(rails, stage.key);
+  const parallel = isParallel(rails, stage.key);
+  const badges: ReactNode[] = [];
+  if (parallel) {
+    badges.push(
+      <Badge key="parallel" color="blue" kind="outline">
+        Parallel
+      </Badge>
+    );
+  }
+
+  return (
+    <Stack gap="density-sm">
+      <Flex align="start" justify="between" gap="density-md">
+        <Stack gap="0" className="min-w-0">
+          <Text kind="label/bold/md">{stage.title}</Text>
+          <Text kind="body/regular/xs" className="text-text-secondary">
+            {stage.caption}
+          </Text>
+        </Stack>
+        {badges.length ? (
+          <Flex align="center" gap="density-xs" wrap="wrap">
+            {badges}
+          </Flex>
+        ) : null}
+      </Flex>
+
+      {flows.length ? (
+        <Stack gap="0" role="list">
+          {flows.map((flow, index) => (
+            <FlowRow key={`${flow}-${index}`} flow={flow} isFirst={index === 0} />
+          ))}
+        </Stack>
+      ) : (
+        <EmptyText>No rails configured.</EmptyText>
+      )}
+
+      <FieldList fields={extras} />
+    </Stack>
+  );
+};
+
+/** True when a non-core stage has any content worth rendering. */
+const stageHasContent = (rails: RailsOutput | undefined, key: StageKey): boolean =>
+  stageFlows(rails, key).length > 0 || stageExtras(rails, key).length > 0;
+
+export const PipelineSection: FC<{ rails: RailsOutput | undefined }> = ({ rails }) => {
+  const stages = STAGES.filter((stage) => stage.core || stageHasContent(rails, stage.key));
+  return (
+    <Panel slotHeading="Pipeline" slotIcon={<Waypoints />} elevation="high" density="compact">
+      <Stack gap="density-lg">
+        {stages.map((stage, index) => (
+          <Fragment key={stage.key}>
+            {index > 0 ? <Divider /> : null}
+            <StageCard stage={stage} rails={rails} />
+          </Fragment>
+        ))}
+      </Stack>
+    </Panel>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/RawConfigSection.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/RawConfigSection.tsx
new file mode 100644
index 0000000000..3c0c517e67
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/RawConfigSection.tsx
@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput } from '@nemo/sdk/generated/platform/schema';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+  Panel,
+  Text,
+} from '@nvidia/foundations-react-core';
+import { Braces } from 'lucide-react';
+import type { FC } from 'react';
+
+/**
+ * Collapsed raw-JSON escape hatch. Guarantees zero information loss and covers
+ * any config field the structured view does not yet render.
+ */
+export const RawConfigSection: FC<{ data: RailsConfigOutput }> = ({ data }) => (
+  <Panel slotHeading="Raw configuration" slotIcon={<Braces />} elevation="high" density="compact">
+    <AccordionRoot>
+      <AccordionItem value="raw-config">
+        <AccordionTrigger>
+          <Text kind="label/bold/sm">Show configuration JSON</Text>
+        </AccordionTrigger>
+        <AccordionContent>
+          <pre className="overflow-auto rounded bg-surface-raised p-density-md text-xs leading-relaxed">
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+  </Panel>
+);
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/configPrimitives.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/configPrimitives.tsx
new file mode 100644
index 0000000000..77e27257bb
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/configPrimitives.tsx
@@ -0,0 +1,63 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { KVPair } from '@nemo/common/src/components/KVPair';
+import { Badge, Flex, Stack, Text } from '@nvidia/foundations-react-core';
+import type { Field, Scope } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+import type { FC, PropsWithChildren } from 'react';
+
+/** Muted placeholder text for empty/unconfigured regions. */
+export const EmptyText: FC<PropsWithChildren> = ({ children }) => (
+  <Text kind="body/regular/sm" className="text-text-secondary">
+    {children}
+  </Text>
+);
+
+const SCOPE_LABELS: Record<Scope, string> = {
+  input: 'Input',
+  output: 'Output',
+  retrieval: 'Retrieval',
+  tool_input: 'Tool input',
+  tool_output: 'Tool output',
+};
+
+const SCOPE_COLORS: Record<Scope, 'blue' | 'purple' | 'teal' | 'gray'> = {
+  input: 'blue',
+  output: 'purple',
+  retrieval: 'teal',
+  tool_input: 'gray',
+  tool_output: 'gray',
+};
+
+/** A row of stage-scope badges (Input / Output / Retrieval / Tool …). */
+export const ScopeBadges: FC<{ scopes: Scope[] }> = ({ scopes }) => {
+  if (scopes.length === 0) return null;
+  return (
+    <Flex align="center" gap="density-xs" wrap="wrap">
+      {scopes.map((scope) => (
+        <Badge key={scope} color={SCOPE_COLORS[scope]} kind="outline">
+          {SCOPE_LABELS[scope]}
+        </Badge>
+      ))}
+    </Flex>
+  );
+};
+
+/** A vertical definition list of label/value rows. Renders nothing when empty. */
+export const FieldList: FC<{ fields: Field[] }> = ({ fields }) => {
+  if (fields.length === 0) return null;
+  return (
+    <Stack gap="density-xs">
+      {fields.map((field) => (
+        <KVPair
+          key={field.label}
+          label={field.label}
+          value={field.value}
+          orientation="horizontal"
+          size="medium"
+          truncate={false}
+        />
+      ))}
+    </Stack>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.test.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.test.ts
new file mode 100644
index 0000000000..9a221e0090
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.test.ts
@@ -0,0 +1,112 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsOutput } from '@nemo/sdk/generated/platform/schema';
+import {
+  deriveScopes,
+  detectorMeta,
+  listConfiguredDetectors,
+  summarizeDetector,
+} from '@studio/routes/guardrails/GuardrailConfigTab/detectors';
+
+describe('listConfiguredDetectors', () => {
+  it('returns configured detectors in canonical (first-party first) order', () => {
+    const rails: RailsOutput = {
+      config: {
+        clavata: { server_endpoint: 'https://example.com' },
+        content_safety: { reasoning: { enabled: true } },
+        jailbreak_detection: { nim_base_url: 'http://localhost:8000/v1' },
+      },
+    };
+    expect(listConfiguredDetectors(rails)).toEqual([
+      'content_safety',
+      'jailbreak_detection',
+      'clavata',
+    ]);
+  });
+
+  it('appends unknown detector keys so nothing is dropped', () => {
+    const rails = { config: { future_detector: { foo: 'bar' } } } as unknown as RailsOutput;
+    expect(listConfiguredDetectors(rails)).toEqual(['future_detector']);
+  });
+
+  it('returns an empty list when no config is present', () => {
+    expect(listConfiguredDetectors(undefined)).toEqual([]);
+    expect(listConfiguredDetectors({})).toEqual([]);
+  });
+});
+
+describe('deriveScopes', () => {
+  it('derives scope from the detector own input/output sub-config', () => {
+    const rails: RailsOutput = {
+      config: { gliner: { input: { entities: ['email'] }, output: { entities: ['ssn'] } } },
+    };
+    expect(deriveScopes(rails, 'gliner')).toEqual(['input', 'output']);
+  });
+
+  it('derives scope from flows that reference the detector', () => {
+    const rails: RailsOutput = {
+      config: { content_safety: { reasoning: { enabled: true } } },
+      input: { flows: ['content safety check input $model=content_safety'] },
+      output: { flows: ['content safety check output $model=content_safety'] },
+    };
+    expect(deriveScopes(rails, 'content_safety')).toEqual(['input', 'output']);
+  });
+
+  it('unions both signals and orders scopes canonically', () => {
+    const rails: RailsOutput = {
+      config: { sensitive_data_detection: { output: { entities: ['PERSON'] } } },
+      input: { flows: ['mask sensitive data on input'] },
+    };
+    expect(deriveScopes(rails, 'sensitive_data_detection')).toEqual(['input', 'output']);
+  });
+});
+
+describe('detectorMeta', () => {
+  it('returns known metadata and humanizes unknown keys', () => {
+    expect(detectorMeta('content_safety')).toEqual({ label: 'Content Safety', firstParty: true });
+    expect(detectorMeta('some_new_thing')).toEqual({ label: 'Some New Thing', firstParty: false });
+  });
+});
+
+describe('summarizeDetector', () => {
+  it('summarizes scalars, scoped entities, toggles, and masks secrets', () => {
+    const fields = summarizeDetector({
+      nim_base_url: 'http://localhost:8000/v1',
+      api_key: 'super-secret',
+      reasoning: { enabled: false },
+      input: { entities: ['EMAIL', 'PHONE'] },
+    });
+    expect(fields).toContainEqual({ label: 'Nim Base Url', value: 'http://localhost:8000/v1' });
+    expect(fields).toContainEqual({ label: 'Api Key', value: '••••••••' });
+    expect(fields).toContainEqual({ label: 'Reasoning', value: 'Disabled' });
+    expect(fields).toContainEqual({ label: 'Input entities', value: 'EMAIL, PHONE' });
+  });
+
+  it('masks prefixed and suffixed secret keys', () => {
+    const fields = summarizeDetector({
+      nim_api_key: 'nvapi-xxx',
+      hf_token: 'hf_xxx',
+      access_token: 'tok-xxx',
+      private_key: 'pk-xxx',
+    });
+    expect(fields).toContainEqual({ label: 'Nim Api Key', value: '••••••••' });
+    expect(fields).toContainEqual({ label: 'Hf Token', value: '••••••••' });
+    expect(fields).toContainEqual({ label: 'Access Token', value: '••••••••' });
+    expect(fields).toContainEqual({ label: 'Private Key', value: '••••••••' });
+  });
+
+  it('does not mask non-secret keys that merely contain a secret word', () => {
+    const fields = summarizeDetector({
+      max_tokens: 512,
+      nim_base_url: 'http://localhost:8000/v1',
+    });
+    expect(fields).toContainEqual({ label: 'Max Tokens', value: '512' });
+    expect(fields).toContainEqual({ label: 'Nim Base Url', value: 'http://localhost:8000/v1' });
+  });
+
+  it('returns no fields for non-object input', () => {
+    expect(summarizeDetector(undefined)).toEqual([]);
+    expect(summarizeDetector('nope')).toEqual([]);
+  });
+});
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.ts
new file mode 100644
index 0000000000..2207cdbdd7
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/detectors.ts
@@ -0,0 +1,171 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsOutput } from '@nemo/sdk/generated/platform/schema';
+import { recognizeFlow } from '@studio/routes/guardrails/GuardrailConfigTab/flowRegistry';
+import type { DetectorKey, Field, Scope } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+
+export interface DetectorMeta {
+  label: string;
+  /** True for NVIDIA / first-party detectors, false for third-party integrations. */
+  firstParty: boolean;
+}
+
+/**
+ * Display metadata and canonical ordering for the known `rails.config.*`
+ * providers. Detectors are listed first-party first, then third-party.
+ */
+export const DETECTOR_META: Record<string, DetectorMeta> = {
+  content_safety: { label: 'Content Safety', firstParty: true },
+  jailbreak_detection: { label: 'Jailbreak Detection', firstParty: true },
+  sensitive_data_detection: { label: 'Sensitive Data (Presidio)', firstParty: true },
+  gliner: { label: 'PII — GLiNER', firstParty: true },
+  privateai: { label: 'PII — Private AI', firstParty: true },
+  polygraf: { label: 'PII — Polygraf', firstParty: true },
+  regex_detection: { label: 'Regex Detection', firstParty: true },
+  injection_detection: { label: 'Injection Detection', firstParty: true },
+  context_bloat_detection: { label: 'Context Bloat Detection', firstParty: true },
+  fact_checking: { label: 'Fact Checking', firstParty: true },
+  hf_classifier: { label: 'HuggingFace Classifiers', firstParty: true },
+  autoalign: { label: 'AutoAlign', firstParty: false },
+  patronus: { label: 'Patronus', firstParty: false },
+  clavata: { label: 'Clavata', firstParty: false },
+  pangea: { label: 'Pangea AI Guard', firstParty: false },
+  fiddler: { label: 'Fiddler Guardrails', firstParty: false },
+  crowdstrike_aidr: { label: 'CrowdStrike AIDR', firstParty: false },
+  trend_micro: { label: 'Trend Micro AI Guard', firstParty: false },
+  ai_defense: { label: 'Cisco AI Defense', firstParty: false },
+  guardrails_ai: { label: 'Guardrails AI', firstParty: false },
+};
+
+const DETECTOR_ORDER = Object.keys(DETECTOR_META);
+
+/** Turn a snake_case key into a human-readable Title Case label. */
+export const humanize = (key: string): string =>
+  key
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+    .trim();
+
+/** Resolve display metadata for a detector key, falling back for unknown keys. */
+export const detectorMeta = (key: string): DetectorMeta =>
+  DETECTOR_META[key] ?? { label: humanize(key), firstParty: false };
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+/**
+ * Enumerate the detectors actually present in a `rails.config` object, in
+ * canonical order, with any unknown keys appended so nothing is dropped.
+ */
+export const listConfiguredDetectors = (rails: RailsOutput | undefined): string[] => {
+  const config = rails?.config;
+  if (!config) return [];
+  const present = Object.entries(config)
+    .filter(([, value]) => value != null)
+    .map(([key]) => key);
+  const known = DETECTOR_ORDER.filter((key) => present.includes(key));
+  const unknown = present.filter((key) => !DETECTOR_ORDER.includes(key));
+  return [...known, ...unknown];
+};
+
+const stageFlows = (rails: RailsOutput | undefined, scope: Scope): string[] => {
+  switch (scope) {
+    case 'input':
+      return rails?.input?.flows ?? [];
+    case 'output':
+      return rails?.output?.flows ?? [];
+    case 'retrieval':
+      return rails?.retrieval?.flows ?? [];
+    case 'tool_input':
+      return rails?.tool_input?.flows ?? [];
+    case 'tool_output':
+      return rails?.tool_output?.flows ?? [];
+  }
+};
+
+const SCOPE_ORDER: Scope[] = ['input', 'output', 'retrieval', 'tool_input', 'tool_output'];
+
+/**
+ * Derive the stages a detector runs at, from two signals unioned together:
+ *  1. the detector's own `input`/`output`/`retrieval` sub-config (structural), and
+ *  2. flows that reference it, matched via the flow recognition registry.
+ */
+export const deriveScopes = (rails: RailsOutput | undefined, key: string): Scope[] => {
+  const scopes = new Set<Scope>();
+
+  const detector = rails?.config?.[key as DetectorKey];
+  if (isObject(detector)) {
+    for (const scope of ['input', 'output', 'retrieval'] as const) {
+      if (detector[scope] != null) scopes.add(scope);
+    }
+  }
+
+  for (const scope of SCOPE_ORDER) {
+    for (const flow of stageFlows(rails, scope)) {
+      if (recognizeFlow(flow).detectorKey === key) {
+        scopes.add(scope);
+        break;
+      }
+    }
+  }
+
+  return SCOPE_ORDER.filter((scope) => scopes.has(scope));
+};
+
+// Match secret-bearing keys as whole words or snake_case segments, so prefixed
+// keys like `nim_api_key`, `hf_token`, and `access_token` are masked too. The
+// trailing `(?:_|$)` keeps non-secrets like `max_tokens` unmasked.
+const SECRET_KEY =
+  /(?:^|_)(?:api_?key|secret|token|password|passwd|credential|private_?key)(?:_|$)/i;
+
+const formatScalar = (key: string, value: string | number | boolean): string => {
+  if (SECRET_KEY.test(key)) return '••••••••';
+  return String(value);
+};
+
+/**
+ * Produce a faithful, shallow label/value summary of a detector's config. Scalar
+ * fields render directly; scoped option objects (`{ entities }`, `{ patterns }`)
+ * and simple `{ enabled }` toggles are summarized; secrets are masked. The full
+ * object is always available via the raw-config section.
+ */
+export const summarizeDetector = (value: unknown): Field[] => {
+  if (!isObject(value)) return [];
+  const fields: Field[] = [];
+
+  for (const [key, raw] of Object.entries(value)) {
+    if (raw == null) continue;
+    const label = humanize(key);
+
+    if (Array.isArray(raw)) {
+      const items = raw.map((item) => (isObject(item) ? JSON.stringify(item) : String(item)));
+      fields.push({ label, value: items.length ? items.join(', ') : '—' });
+      continue;
+    }
+
+    if (isObject(raw)) {
+      if (Array.isArray(raw.entities)) {
+        fields.push({
+          label: `${label} entities`,
+          value: (raw.entities as string[]).join(', ') || '—',
+        });
+      } else if (Array.isArray(raw.patterns)) {
+        fields.push({
+          label: `${label} patterns`,
+          value: `${(raw.patterns as string[]).length} pattern(s)`,
+        });
+      } else if (typeof raw.enabled === 'boolean') {
+        fields.push({ label, value: raw.enabled ? 'Enabled' : 'Disabled' });
+      } else {
+        const keys = Object.keys(raw);
+        fields.push({ label, value: keys.length ? keys.map(humanize).join(', ') : '—' });
+      }
+      continue;
+    }
+
+    fields.push({ label, value: formatScalar(key, raw as string | number | boolean) });
+  }
+
+  return fields;
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.test.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.test.ts
new file mode 100644
index 0000000000..23950e46ad
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.test.ts
@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  normalizeFlowName,
+  recognizeFlow,
+} from '@studio/routes/guardrails/GuardrailConfigTab/flowRegistry';
+
+describe('normalizeFlowName', () => {
+  it('lowercases, strips $param modifiers, and collapses whitespace', () => {
+    expect(normalizeFlowName('Content Safety Check Input $model=content_safety')).toBe(
+      'content safety check input'
+    );
+    expect(normalizeFlowName('  jailbreak   detection  ')).toBe('jailbreak detection');
+  });
+});
+
+describe('recognizeFlow', () => {
+  it('maps built-in content safety flows to the content_safety detector', () => {
+    const result = recognizeFlow('content safety check input $model=content_safety');
+    expect(result.recognized).toBe(true);
+    expect(result.label).toBe('Content Safety');
+    expect(result.detectorKey).toBe('content_safety');
+    expect(result.raw).toBe('content safety check input $model=content_safety');
+  });
+
+  it('maps jailbreak and sensitive-data flows to their detectors', () => {
+    expect(recognizeFlow('jailbreak detection').detectorKey).toBe('jailbreak_detection');
+    expect(recognizeFlow('mask sensitive data on input').detectorKey).toBe(
+      'sensitive_data_detection'
+    );
+  });
+
+  it('recognizes prompt-based self checks without a backing detector', () => {
+    const result = recognizeFlow('self check input');
+    expect(result.recognized).toBe(true);
+    expect(result.label).toBe('Self-check input');
+    expect(result.detectorKey).toBeUndefined();
+  });
+
+  it('falls back to the raw name for unknown custom flows', () => {
+    const result = recognizeFlow('my custom guardrail');
+    expect(result.recognized).toBe(false);
+    expect(result.label).toBe('my custom guardrail');
+    expect(result.detectorKey).toBeUndefined();
+    expect(result.raw).toBe('my custom guardrail');
+  });
+});
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.ts
new file mode 100644
index 0000000000..3dfc5b6279
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/flowRegistry.ts
@@ -0,0 +1,99 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DetectorKey } from '@studio/routes/guardrails/GuardrailConfigTab/types';
+
+/**
+ * The result of matching a configured flow name against the known built-in
+ * NeMo Guardrails flows. Unrecognized (custom) flows fall back to their raw
+ * name so nothing is ever hidden.
+ */
+export interface RecognizedFlow {
+  /** Friendly label for a recognized flow, else the raw flow name. */
+  label: string;
+  /** The `rails.config.*` provider this flow drives, when known. */
+  detectorKey?: DetectorKey;
+  /** Whether the flow matched a known built-in pattern. */
+  recognized: boolean;
+  /** The original flow name, verbatim. */
+  raw: string;
+}
+
+interface FlowPattern {
+  test: RegExp;
+  label: string;
+  detectorKey?: DetectorKey;
+}
+
+/**
+ * Recognition table for the built-in flows shipped with NeMo Guardrails.
+ * Matched against the normalized flow name; first match wins, so more specific
+ * patterns are listed before more general ones.
+ */
+const FLOW_PATTERNS: FlowPattern[] = [
+  { test: /^self check facts/, label: 'Self-check facts' },
+  { test: /^self check hallucination/, label: 'Self-check hallucination' },
+  { test: /^self check input/, label: 'Self-check input' },
+  { test: /^self check output/, label: 'Self-check output' },
+  { test: /content safety (check )?input/, label: 'Content Safety', detectorKey: 'content_safety' },
+  {
+    test: /content safety (check )?output/,
+    label: 'Content Safety',
+    detectorKey: 'content_safety',
+  },
+  {
+    test: /(llama guard|shieldgemma).*input/,
+    label: 'Content Safety',
+    detectorKey: 'content_safety',
+  },
+  {
+    test: /(llama guard|shieldgemma).*output/,
+    label: 'Content Safety',
+    detectorKey: 'content_safety',
+  },
+  { test: /topic (safety|control)/, label: 'Topic Control' },
+  { test: /jailbreak detection/, label: 'Jailbreak Detection', detectorKey: 'jailbreak_detection' },
+  {
+    test: /(mask|detect|check) sensitive data/,
+    label: 'Sensitive Data',
+    detectorKey: 'sensitive_data_detection',
+  },
+  { test: /gliner/, label: 'PII — GLiNER', detectorKey: 'gliner' },
+  { test: /privateai|private ai/, label: 'PII — Private AI', detectorKey: 'privateai' },
+  { test: /polygraf/, label: 'PII — Polygraf', detectorKey: 'polygraf' },
+  { test: /injection detection/, label: 'Injection Detection', detectorKey: 'injection_detection' },
+  {
+    test: /context bloat|context manipulation/,
+    label: 'Context Bloat Detection',
+    detectorKey: 'context_bloat_detection',
+  },
+  { test: /fact check/, label: 'Fact Checking', detectorKey: 'fact_checking' },
+  { test: /autoalign/, label: 'AutoAlign', detectorKey: 'autoalign' },
+  { test: /patronus/, label: 'Patronus', detectorKey: 'patronus' },
+  { test: /clavata/, label: 'Clavata', detectorKey: 'clavata' },
+  { test: /pangea/, label: 'Pangea', detectorKey: 'pangea' },
+  { test: /check blocked terms/, label: 'Blocked Terms' },
+];
+
+/**
+ * Normalize a flow name for matching: lowercase, drop `$param=value` modifiers
+ * (e.g. `$model=content_safety`), and collapse whitespace.
+ */
+export const normalizeFlowName = (flow: string): string =>
+  flow.toLowerCase().replace(/\$\S+/g, ' ').replace(/\s+/g, ' ').trim();
+
+/** Resolve a configured flow name to its friendly label and backing detector. */
+export const recognizeFlow = (flow: string): RecognizedFlow => {
+  const normalized = normalizeFlowName(flow);
+  for (const pattern of FLOW_PATTERNS) {
+    if (pattern.test.test(normalized)) {
+      return {
+        label: pattern.label,
+        detectorKey: pattern.detectorKey,
+        recognized: true,
+        raw: flow,
+      };
+    }
+  }
+  return { label: flow, recognized: false, raw: flow };
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/index.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/index.tsx
new file mode 100644
index 0000000000..5578908e08
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/index.tsx
@@ -0,0 +1,110 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { KVPair } from '@nemo/common/src/components/KVPair';
+import { RelativeTime } from '@nemo/common/src/components/RelativeTime';
+import { Badge, Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import { countRails } from '@studio/components/dataViews/GuardrailsDataView/guardrailUtils';
+import { BehaviorSection } from '@studio/routes/guardrails/GuardrailConfigTab/BehaviorSection';
+import { listConfiguredDetectors } from '@studio/routes/guardrails/GuardrailConfigTab/detectors';
+import { DetectorsSection } from '@studio/routes/guardrails/GuardrailConfigTab/DetectorsSection';
+import { GeneralSection } from '@studio/routes/guardrails/GuardrailConfigTab/GeneralSection';
+import { LlmSection } from '@studio/routes/guardrails/GuardrailConfigTab/LlmSection';
+import { PipelineSection } from '@studio/routes/guardrails/GuardrailConfigTab/PipelineSection';
+import { RawConfigSection } from '@studio/routes/guardrails/GuardrailConfigTab/RawConfigSection';
+import {
+  applyFormToConfig,
+  type GuardrailFormValues,
+} from '@studio/routes/guardrails/GuardrailForm/formModel';
+import { useGuardrailForm } from '@studio/routes/guardrails/GuardrailForm/useGuardrailForm';
+import { Shield } from 'lucide-react';
+import type { FC } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+export const GuardrailConfigTab: FC = () => {
+  const { config } = useGuardrailForm();
+  const { control } = useFormContext<GuardrailFormValues>();
+  // Fields all have string defaults, so watched values are never undefined at runtime.
+  const values = useWatch({ control }) as GuardrailFormValues;
+
+  // Read-only sections reflect live edits: server data with the form applied.
+  const data = applyFormToConfig(config.data, values);
+  const rails = data.rails;
+  const modelCount = data.models?.length ?? 0;
+  const railCount = countRails(data);
+  const detectorCount = listConfiguredDetectors(rails).length;
+  const passthrough = data.passthrough === true;
+
+  return (
+    <Stack className="gap-density-2xl">
+      <GeneralSection />
+
+      <Panel slotHeading="Overview" slotIcon={<Shield />} elevation="high" density="compact">
+        <Stack className="gap-density-md">
+          {config.description ? (
+            <KVPair
+              label="Description"
+              orientation="horizontal"
+              size="medium"
+              truncate={false}
+              value={config.description}
+            />
+          ) : null}
+          <KVPair
+            label="Models"
+            orientation="horizontal"
+            size="medium"
+            value={String(modelCount)}
+          />
+          <KVPair label="Rails" orientation="horizontal" size="medium" value={String(railCount)} />
+          <KVPair
+            label="Detectors"
+            orientation="horizontal"
+            size="medium"
+            value={String(detectorCount)}
+          />
+          <KVPair
+            label="Created"
+            orientation="horizontal"
+            size="medium"
+            value={
+              config.created_at ? (
+                <RelativeTime datetime={config.created_at} focusableForTooltip={false} />
+              ) : (
+                '—'
+              )
+            }
+          />
+          <KVPair
+            label="Updated"
+            orientation="horizontal"
+            size="medium"
+            value={
+              config.updated_at ? (
+                <RelativeTime datetime={config.updated_at} focusableForTooltip={false} />
+              ) : (
+                '—'
+              )
+            }
+          />
+          {passthrough ? (
+            <Flex align="center" gap="density-sm">
+              <Badge color="yellow" kind="solid">
+                Passthrough
+              </Badge>
+              <Text kind="body/regular/xs" className="text-text-secondary">
+                The prompt passes through unaltered; rails observe but do not modify it.
+              </Text>
+            </Flex>
+          ) : null}
+        </Stack>
+      </Panel>
+
+      <PipelineSection rails={rails} />
+      <DetectorsSection rails={rails} />
+      <LlmSection data={data} />
+      <BehaviorSection data={data} />
+      <RawConfigSection data={data} />
+    </Stack>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.test.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.test.ts
new file mode 100644
index 0000000000..10308e6ac6
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.test.ts
@@ -0,0 +1,85 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Instruction } from '@nemo/sdk/generated/platform/schema';
+import {
+  getGeneralInstruction,
+  setGeneralInstruction,
+} from '@studio/routes/guardrails/GuardrailConfigTab/instructions';
+
+describe('getGeneralInstruction', () => {
+  it('returns the first general instruction content', () => {
+    const instructions: Instruction[] = [
+      { type: 'other', content: 'x' },
+      { type: 'general', content: 'be helpful' },
+    ];
+    expect(getGeneralInstruction(instructions)).toBe('be helpful');
+  });
+
+  it('returns empty string when there is no general instruction', () => {
+    expect(getGeneralInstruction([{ type: 'other', content: 'x' }])).toBe('');
+    expect(getGeneralInstruction(undefined)).toBe('');
+  });
+});
+
+describe('setGeneralInstruction', () => {
+  it('appends a general instruction when none exists', () => {
+    const result = setGeneralInstruction([{ type: 'other', content: 'x' }], 'be kind');
+    expect(result).toEqual([
+      { type: 'other', content: 'x' },
+      { type: 'general', content: 'be kind' },
+    ]);
+  });
+
+  it('creates the array when instructions are undefined', () => {
+    expect(setGeneralInstruction(undefined, 'be kind')).toEqual([
+      { type: 'general', content: 'be kind' },
+    ]);
+  });
+
+  it('updates the first general instruction in place, preserving order', () => {
+    const result = setGeneralInstruction(
+      [
+        { type: 'other', content: 'x' },
+        { type: 'general', content: 'old' },
+        { type: 'other', content: 'y' },
+      ],
+      'new'
+    );
+    expect(result).toEqual([
+      { type: 'other', content: 'x' },
+      { type: 'general', content: 'new' },
+      { type: 'other', content: 'y' },
+    ]);
+  });
+
+  it('only touches the first general instruction when there are several', () => {
+    const result = setGeneralInstruction(
+      [
+        { type: 'general', content: 'first' },
+        { type: 'general', content: 'second' },
+      ],
+      'updated'
+    );
+    expect(result).toEqual([
+      { type: 'general', content: 'updated' },
+      { type: 'general', content: 'second' },
+    ]);
+  });
+
+  it('removes the first general instruction when content is blank', () => {
+    const result = setGeneralInstruction(
+      [
+        { type: 'other', content: 'x' },
+        { type: 'general', content: 'drop me' },
+      ],
+      '   '
+    );
+    expect(result).toEqual([{ type: 'other', content: 'x' }]);
+  });
+
+  it('is a no-op on blank content when there is no general instruction', () => {
+    const instructions: Instruction[] = [{ type: 'other', content: 'x' }];
+    expect(setGeneralInstruction(instructions, '')).toEqual(instructions);
+  });
+});
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.ts
new file mode 100644
index 0000000000..e21a0d7209
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/instructions.ts
@@ -0,0 +1,39 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Instruction } from '@nemo/sdk/generated/platform/schema';
+
+/**
+ * The instruction type the core guardrails engine reads. Only the first
+ * `general` instruction is rendered into the guardrail prompts; other types are
+ * ignored by the core engine (though some third-party rails read them all).
+ */
+export const GENERAL_INSTRUCTION_TYPE = 'general';
+
+/** Content of the first `general` instruction, or '' when there isn't one. */
+export const getGeneralInstruction = (instructions: Instruction[] | undefined): string =>
+  instructions?.find((instruction) => instruction.type === GENERAL_INSTRUCTION_TYPE)?.content ?? '';
+
+/**
+ * Return a new instructions array with the first `general` instruction's content
+ * set to `content`, preserving every other instruction and the original order.
+ *
+ * - No general instruction yet + non-empty `content` → one is appended.
+ * - `content` is blank → the first general instruction (if any) is removed, so we
+ *   never persist an empty one. Non-general instructions are left untouched.
+ */
+export const setGeneralInstruction = (
+  instructions: Instruction[] | undefined,
+  content: string
+): Instruction[] => {
+  const list = instructions ?? [];
+  const index = list.findIndex((instruction) => instruction.type === GENERAL_INSTRUCTION_TYPE);
+
+  if (content.trim() === '') {
+    return index === -1 ? list : list.filter((_, i) => i !== index);
+  }
+  if (index === -1) {
+    return [...list, { type: GENERAL_INSTRUCTION_TYPE, content }];
+  }
+  return list.map((instruction, i) => (i === index ? { ...instruction, content } : instruction));
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/sections.test.tsx b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/sections.test.tsx
new file mode 100644
index 0000000000..a309a1a2bb
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/sections.test.tsx
@@ -0,0 +1,97 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput, RailsOutput } from '@nemo/sdk/generated/platform/schema';
+import { BehaviorSection } from '@studio/routes/guardrails/GuardrailConfigTab/BehaviorSection';
+import { DetectorsSection } from '@studio/routes/guardrails/GuardrailConfigTab/DetectorsSection';
+import { PipelineSection } from '@studio/routes/guardrails/GuardrailConfigTab/PipelineSection';
+import { TestProviders } from '@studio/tests/util/TestProviders';
+import { render, screen } from '@testing-library/react';
+
+const rails: RailsOutput = {
+  config: {
+    content_safety: { reasoning: { enabled: true } },
+    gliner: { input: { entities: ['email'] }, output: { entities: ['ssn'] } },
+    clavata: { server_endpoint: 'https://example.com' },
+  },
+  input: {
+    parallel: true,
+    flows: ['content safety check input $model=content_safety', 'my custom rail'],
+  },
+  output: { flows: ['content safety check output $model=content_safety'] },
+};
+
+describe('PipelineSection', () => {
+  it('renders core stages, friendly + raw flow names, and empty states', () => {
+    render(
+      <TestProviders>
+        <PipelineSection rails={rails} />
+      </TestProviders>
+    );
+
+    // Core stages are always present.
+    expect(screen.getByText('Input rails')).toBeInTheDocument();
+    expect(screen.getByText('Retrieval rails')).toBeInTheDocument();
+    expect(screen.getByText('Output rails')).toBeInTheDocument();
+
+    // Recognized flow gets a friendly label; the raw string is still shown.
+    expect(screen.getAllByText('Content Safety').length).toBeGreaterThan(0);
+    expect(
+      screen.getByText('content safety check input $model=content_safety')
+    ).toBeInTheDocument();
+
+    // Custom/unrecognized flow renders verbatim.
+    expect(screen.getByText('my custom rail')).toBeInTheDocument();
+
+    // Empty core stage advertises the gap.
+    expect(screen.getAllByText('No rails configured.').length).toBeGreaterThan(0);
+  });
+});
+
+describe('DetectorsSection', () => {
+  it('lists configured detectors with provenance and scope', () => {
+    render(
+      <TestProviders>
+        <DetectorsSection rails={rails} />
+      </TestProviders>
+    );
+
+    expect(screen.getByText('Content Safety')).toBeInTheDocument();
+    expect(screen.getByText('PII — GLiNER')).toBeInTheDocument();
+    expect(screen.getByText('Clavata')).toBeInTheDocument();
+    // First-party vs third-party provenance badges.
+    expect(screen.getAllByText('NVIDIA').length).toBeGreaterThan(0);
+    expect(screen.getByText('Third-party')).toBeInTheDocument();
+  });
+});
+
+describe('BehaviorSection', () => {
+  it('renders nothing when tracing is an empty object with no behavior fields', () => {
+    render(
+      <TestProviders>
+        <BehaviorSection data={{ tracing: {} } as RailsConfigOutput} />
+      </TestProviders>
+    );
+    expect(screen.queryByText('Behavior & operations')).not.toBeInTheDocument();
+  });
+
+  it('renders nothing when content capture is disabled and no other content exists', () => {
+    render(
+      <TestProviders>
+        <BehaviorSection
+          data={{ tracing: { enable_content_capture: false } } as RailsConfigOutput}
+        />
+      </TestProviders>
+    );
+    expect(screen.queryByText('Behavior & operations')).not.toBeInTheDocument();
+  });
+
+  it('renders when there is meaningful tracing content', () => {
+    render(
+      <TestProviders>
+        <BehaviorSection data={{ tracing: { enabled: true } } as RailsConfigOutput} />
+      </TestProviders>
+    );
+    expect(screen.getByText('Tracing')).toBeInTheDocument();
+  });
+});
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/types.ts b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/types.ts
new file mode 100644
index 0000000000..9bae69b9ab
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailConfigTab/types.ts
@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigDataOutput } from '@nemo/sdk/generated/platform/schema';
+
+/** A provider key under `rails.config.*` (e.g. `content_safety`, `gliner`). */
+export type DetectorKey = keyof RailsConfigDataOutput;
+
+/** A lifecycle stage in the guardrail pipeline, in execution order. */
+export type StageKey =
+  | 'input'
+  | 'dialog'
+  | 'retrieval'
+  | 'output'
+  | 'tool_input'
+  | 'tool_output'
+  | 'actions';
+
+/** A stage a detector can run at (the flow-bearing subset of {@link StageKey}). */
+export type Scope = 'input' | 'output' | 'retrieval' | 'tool_input' | 'tool_output';
+
+/** A single label/value row rendered in a definition list. */
+export interface Field {
+  label: string;
+  value: string;
+}
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.test.tsx b/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.test.tsx
index 5e7fc2b93a..715013c893 100644
--- a/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.test.tsx
+++ b/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.test.tsx
@@ -5,20 +5,29 @@ import { PLATFORM_BASE_URL } from '@studio/constants/environment';
 import { ROUTES } from '@studio/constants/routes';
 import { mockGuardrailConfigs } from '@studio/mocks/handlers/guardrails';
 import { server } from '@studio/mocks/node';
+import { GuardrailConfigTab } from '@studio/routes/guardrails/GuardrailConfigTab';
 import { GuardrailDetailRoute } from '@studio/routes/guardrails/GuardrailDetailRoute';
 import { getGuardrailDetailRoute } from '@studio/routes/utils';
 import { XL_SELECTOR_TIMEOUT } from '@studio/tests/util/constants';
-import { renderRoute, screen } from '@studio/tests/util/render';
-import { within } from '@testing-library/react';
+import { renderRoute, screen, waitFor } from '@studio/tests/util/render';
 import userEvent from '@testing-library/user-event';
 import { delay, http, HttpResponse } from 'msw';
+import { Navigate } from 'react-router-dom';
 
 const WORKSPACE = 'default';
 
+beforeEach(() => {
+  localStorage.clear();
+});
+
 const routes = [
   {
     path: ROUTES.workspace.guardrailDetail,
     element: <GuardrailDetailRoute />,
+    children: [
+      { index: true, element: <Navigate to="config" replace /> },
+      { path: ROUTES.workspace.guardrailConfig, element: <GuardrailConfigTab /> },
+    ],
   },
   {
     path: ROUTES.workspace.guardrails,
@@ -33,7 +42,7 @@ const renderDetail = (name: string) =>
   });
 
 describe('GuardrailDetailRoute', () => {
-  it('renders the config details from the detail endpoint', async () => {
+  it('renders the Configuration tab from the detail endpoint', async () => {
     renderDetail('pii-filter');
 
     expect(
@@ -43,14 +52,31 @@ describe('GuardrailDetailRoute', () => {
     // pii-filter has 2 models and 4 rail flows (2 input + 2 output).
     expect(screen.getAllByText('2').length).toBeGreaterThanOrEqual(1);
     expect(screen.getAllByText('4').length).toBeGreaterThanOrEqual(1);
-    // Raw config block.
-    expect(screen.getByText('Config')).toBeInTheDocument();
+    // Structured config viewer renders the pipeline section.
+    expect(screen.getByText('Pipeline')).toBeInTheDocument();
   });
 
-  it('shows the Edit button disabled', async () => {
+  it('hides the draft actions until there are edits', async () => {
+    renderDetail('pii-filter');
+    await screen.findByText('pii-filter', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+    expect(screen.queryByRole('button', { name: 'Save Guardrail' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Reset' })).not.toBeInTheDocument();
+  });
+
+  it('reveals Reset and Save Guardrail after editing, and Reset discards them', async () => {
+    const user = userEvent.setup();
     renderDetail('pii-filter');
     await screen.findByText('pii-filter', undefined, { timeout: XL_SELECTOR_TIMEOUT });
-    expect(screen.getByRole('button', { name: 'Edit' })).toBeDisabled();
+
+    await user.type(screen.getByRole('textbox', { name: 'General instruction' }), 'Be concise.');
+
+    expect(await screen.findByRole('button', { name: 'Save Guardrail' })).toBeInTheDocument();
+    const reset = screen.getByRole('button', { name: 'Reset' });
+
+    await user.click(reset);
+
+    expect(screen.queryByRole('button', { name: 'Save Guardrail' })).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'General instruction' })).toHaveValue('');
   });
 
   it('shows a loading state while fetching', async () => {
@@ -76,17 +102,16 @@ describe('GuardrailDetailRoute', () => {
     ).toBeInTheDocument();
   });
 
-  it('deletes the config and navigates back to the list', async () => {
+  it('saves the draft and clears the draft actions', async () => {
     const user = userEvent.setup();
     renderDetail('pii-filter');
     await screen.findByText('pii-filter', undefined, { timeout: XL_SELECTOR_TIMEOUT });
 
-    await user.click(screen.getByRole('button', { name: 'Delete' }));
-    const dialog = await screen.findByRole('dialog');
-    await user.click(within(dialog).getByRole('button', { name: 'Delete' }));
+    await user.type(screen.getByRole('textbox', { name: 'General instruction' }), 'Be concise.');
+    await user.click(await screen.findByRole('button', { name: 'Save Guardrail' }));
 
-    expect(
-      await screen.findByTestId('guardrails-list', undefined, { timeout: XL_SELECTOR_TIMEOUT })
-    ).toBeInTheDocument();
+    await waitFor(() =>
+      expect(screen.queryByRole('button', { name: 'Save Guardrail' })).not.toBeInTheDocument()
+    );
   });
 });
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.tsx b/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.tsx
index 6178cbf2d3..6b284a9a6c 100644
--- a/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.tsx
+++ b/web/packages/studio/src/routes/guardrails/GuardrailDetailRoute/index.tsx
@@ -3,33 +3,32 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { KVPair } from '@nemo/common/src/components/KVPair';
-import { RelativeTime } from '@nemo/common/src/components/RelativeTime';
-import {
-  useGuardrailsDeleteConfig,
-  useGuardrailsGetGuardrailConfig,
-} from '@nemo/sdk/generated/platform/api';
-import { Button, Flex, PageHeader, Stack, Text } from '@nvidia/foundations-react-core';
+import { useGuardrailsGetGuardrailConfig } from '@nemo/sdk/generated/platform/api';
+import { Flex, PageHeader, Stack, Tabs, Text } from '@nvidia/foundations-react-core';
 import { AccessibleTitle } from '@studio/components/AccessibleTitle';
-import { countRails } from '@studio/components/dataViews/GuardrailsDataView/guardrailUtils';
-import { DeleteConfirmationModal } from '@studio/components/DeleteConfirmationModal';
 import { Loading } from '@studio/components/Layouts/Loading';
-import { ROUTE_PARAMS } from '@studio/constants/routes';
+import { ROUTE_PARAMS, ROUTES } from '@studio/constants/routes';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { useBreadcrumbs } from '@studio/providers/breadcrumbs/useBreadcrumbs';
-import { getGuardrailsRoute } from '@studio/routes/utils';
+import { GuardrailFormProvider } from '@studio/routes/guardrails/GuardrailForm/GuardrailFormProvider';
+import { GuardrailHeaderActions } from '@studio/routes/guardrails/GuardrailForm/GuardrailHeaderActions';
+import { getGuardrailConfigRoute, getGuardrailsRoute } from '@studio/routes/utils';
 import { useRequiredPathParams } from '@studio/util/hooks/useRequiredPathParams';
-import { useQueryClient } from '@tanstack/react-query';
-import { type FC, useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { type FC, Suspense } from 'react';
+import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
 
 export const GuardrailDetailRoute: FC = () => {
   const workspace = useWorkspaceFromPath();
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
   const { guardrailConfigName } = useRequiredPathParams([ROUTE_PARAMS.guardrailConfigName]);
 
-  const [showDelete, setShowDelete] = useState(false);
+  const location = useLocation();
+  const match = matchPath(
+    { path: `${ROUTES.workspace.guardrailDetail}/:selectedTab`, end: false },
+    location.pathname
+  );
+  const {
+    params: { selectedTab },
+  } = match ?? { params: { selectedTab: 'config' } };
 
   useBreadcrumbs({
     items: [
@@ -47,22 +46,6 @@ export const GuardrailDetailRoute: FC = () => {
     query: { enabled: queryEnabled },
   });
 
-  const { mutateAsync: deleteConfig } = useGuardrailsDeleteConfig();
-
-  const handleDelete = useCallback(async (): Promise<boolean> => {
-    try {
-      await deleteConfig({ workspace, name: guardrailConfigName });
-      // Invalidate by URL prefix — matches all pages/sorts for this workspace.
-      await queryClient.invalidateQueries({
-        queryKey: [`/apis/guardrails/v2/workspaces/${workspace}/configs`],
-      });
-      navigate(getGuardrailsRoute(workspace));
-      return true;
-    } catch {
-      return false;
-    }
-  }, [deleteConfig, guardrailConfigName, navigate, queryClient, workspace]);
-
   if (isPending) {
     return <Loading description="Loading guardrail config..." />;
   }
@@ -78,101 +61,40 @@ export const GuardrailDetailRoute: FC = () => {
     );
   }
 
-  const modelCount = config.data?.models?.length ?? 0;
-  const railCount = countRails(config.data);
-
   return (
     <AccessibleTitle title={`Guardrail config ${guardrailConfigName}`}>
-      <Stack className="w-full min-h-full p-density-2xl" gap="density-xl">
-        <PageHeader
-          slotHeading={
-            <Flex gap="density-sm" align="center" justify="between">
-              <span className="min-w-0 truncate" title={config.name}>
-                {config.name}
-              </span>
-              <Flex gap="density-sm">
-                <Button kind="secondary" disabled title="Edit — coming soon">
-                  Edit
-                </Button>
-                <Button kind="secondary" color="danger" onClick={() => setShowDelete(true)}>
-                  Delete
-                </Button>
+      <GuardrailFormProvider config={config}>
+        <Stack className="w-full min-h-full p-density-2xl" gap="density-xl">
+          <PageHeader
+            slotHeading={
+              <Flex gap="density-sm" align="center" justify="between">
+                <span className="min-w-0 truncate" title={config.name}>
+                  {config.name}
+                </span>
+                <GuardrailHeaderActions />
               </Flex>
-            </Flex>
-          }
-        />
+            }
+          />
 
-        <Stack className="gap-density-lg">
-          <Stack className="gap-density-md">
-            {config.description ? (
-              <KVPair
-                label="Description"
-                orientation="horizontal"
-                size="medium"
-                truncate={false}
-                value={config.description}
-              />
-            ) : null}
-            <KVPair
-              label="Models"
-              orientation="horizontal"
-              size="medium"
-              value={String(modelCount)}
-            />
-            <KVPair
-              label="Rails"
-              orientation="horizontal"
-              size="medium"
-              value={String(railCount)}
-            />
-            <KVPair
-              label="Created"
-              orientation="horizontal"
-              size="medium"
-              value={
-                config.created_at ? (
-                  <RelativeTime datetime={config.created_at} focusableForTooltip={false} />
-                ) : (
-                  '—'
-                )
-              }
-            />
-            <KVPair
-              label="Updated"
-              orientation="horizontal"
-              size="medium"
-              value={
-                config.updated_at ? (
-                  <RelativeTime datetime={config.updated_at} focusableForTooltip={false} />
-                ) : (
-                  '—'
-                )
-              }
-            />
-          </Stack>
+          <Tabs
+            // Tabs used purely for navigation (renderLink); override KUI's default overflow:hidden.
+            className="overflow-visible"
+            value={selectedTab}
+            items={[
+              {
+                value: 'config',
+                children: 'Configuration',
+                href: getGuardrailConfigRoute(workspace, guardrailConfigName),
+              },
+            ]}
+            renderLink={(item) => <Link to={item.href!}>{item.children}</Link>}
+          />
 
-          {config.data ? (
-            <Stack gap="density-sm">
-              <Text kind="label/bold/sm">Config</Text>
-              <pre className="overflow-auto rounded bg-surface-raised p-density-md text-xs leading-relaxed">
-                {JSON.stringify(config.data, null, 2)}
-              </pre>
-            </Stack>
-          ) : null}
+          <Suspense fallback={<Loading description="Loading..." />}>
+            <Outlet />
+          </Suspense>
         </Stack>
-      </Stack>
-
-      {showDelete ? (
-        <DeleteConfirmationModal
-          open
-          simpleConfirm
-          title={`Delete guardrail config: ${config.name}`}
-          successText="Guardrail config deleted successfully."
-          errorText="Failed to delete the guardrail config. Please try again."
-          onDelete={handleDelete}
-          onClose={() => setShowDelete(false)}
-        />
-      ) : null}
+      </GuardrailFormProvider>
     </AccessibleTitle>
   );
 };
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailFormProvider.tsx b/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailFormProvider.tsx
new file mode 100644
index 0000000000..4429cac26c
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailFormProvider.tsx
@@ -0,0 +1,125 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@nemo/common/src/providers/toast/useToast';
+import {
+  getGuardrailsGetGuardrailConfigQueryKey,
+  useGuardrailsUpdateConfig,
+} from '@nemo/sdk/generated/platform/api';
+import type { GuardrailConfig } from '@nemo/sdk/generated/platform/schema';
+import {
+  GuardrailFormContext,
+  type GuardrailFormContextValue,
+} from '@studio/routes/guardrails/GuardrailForm/context';
+import {
+  applyFormToConfig,
+  type GuardrailFormValues,
+  guardrailDraftKey,
+  guardrailFormSchema,
+  mapConfigToForm,
+  type StoredDraft,
+} from '@studio/routes/guardrails/GuardrailForm/formModel';
+import { useLocalStorage } from '@studio/util/hooks/useLocalStorage';
+import { useQueryClient } from '@tanstack/react-query';
+import { type FC, type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+
+export const GuardrailFormProvider: FC<{ config: GuardrailConfig; children: ReactNode }> = ({
+  config,
+  children,
+}) => {
+  const workspace = config.workspace;
+  const name = config.name ?? '';
+  const baseVersion = config.updated_at ?? '';
+
+  const serverValues = useMemo(() => mapConfigToForm(config.data), [config.data]);
+
+  const form = useForm<GuardrailFormValues>({
+    resolver: zodResolver(guardrailFormSchema),
+    defaultValues: serverValues,
+  });
+
+  const [stored, setStored, clearStored] = useLocalStorage<StoredDraft>(
+    guardrailDraftKey(workspace, name)
+  );
+
+  // Hydrate a persisted, non-stale draft once. defaultValues stay the server
+  // values, so `shouldDirty` makes isDirty reflect draft-vs-server correctly.
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    if (hydratedRef.current) {
+      return;
+    }
+    hydratedRef.current = true;
+    if (!stored) {
+      return;
+    }
+    if (stored.baseVersion !== baseVersion) {
+      clearStored(); // branched from an older server version — discard.
+      return;
+    }
+    for (const key of Object.keys(stored.values) as (keyof GuardrailFormValues)[]) {
+      form.setValue(key, stored.values[key], { shouldDirty: true });
+    }
+  }, [stored, baseVersion, clearStored, form]);
+
+  // Persist edits (keyed off RHF's dirty state so a saved form never re-persists).
+  const values = useWatch({ control: form.control });
+  const { isDirty } = form.formState;
+  useEffect(() => {
+    if (isDirty) {
+      setStored({ baseVersion, values: form.getValues() });
+    } else {
+      clearStored();
+    }
+  }, [isDirty, values, baseVersion, form, setStored, clearStored]);
+
+  const queryClient = useQueryClient();
+  const toast = useToast();
+  const { mutateAsync: updateConfig, isPending: isSaving } = useGuardrailsUpdateConfig();
+
+  const save = useMemo(
+    () =>
+      form.handleSubmit(async (submitted) => {
+        const data = applyFormToConfig(config.data, submitted);
+        try {
+          await updateConfig({ workspace, name, data: { data: { ...data } } });
+        } catch {
+          toast.error('Failed to save the guardrail. Please try again.');
+          return;
+        }
+        // The PATCH landed — the save is complete. Commit the local state and
+        // report success regardless of what the cache refresh below does.
+        clearStored();
+        form.reset(submitted); // new baseline = saved values → isDirty false.
+        toast.success('Guardrail saved.');
+        // Refresh the cached config; a refetch failure doesn't undo the save,
+        // and the cache resyncs on the next fetch, so it stays silent.
+        try {
+          await queryClient.invalidateQueries({
+            queryKey: getGuardrailsGetGuardrailConfigQueryKey(workspace, name),
+          });
+        } catch {
+          // ignore — save already succeeded
+        }
+      }),
+    [form, config.data, updateConfig, workspace, name, queryClient, clearStored, toast]
+  );
+
+  const resetToServer = useCallback(() => {
+    clearStored();
+    form.reset(serverValues);
+  }, [clearStored, form, serverValues]);
+
+  const value = useMemo<GuardrailFormContextValue>(
+    () => ({ config, save, isSaving, resetToServer }),
+    [config, save, isSaving, resetToServer]
+  );
+
+  return (
+    <GuardrailFormContext.Provider value={value}>
+      <FormProvider {...form}>{children}</FormProvider>
+    </GuardrailFormContext.Provider>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailHeaderActions.tsx b/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailHeaderActions.tsx
new file mode 100644
index 0000000000..0f75bd728a
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/GuardrailHeaderActions.tsx
@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { LoadingButton } from '@nemo/common/src/components/LoadingButton';
+import { Button, Flex } from '@nvidia/foundations-react-core';
+import type { GuardrailFormValues } from '@studio/routes/guardrails/GuardrailForm/formModel';
+import { useGuardrailForm } from '@studio/routes/guardrails/GuardrailForm/useGuardrailForm';
+import type { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+/**
+ * Detail-header actions: Reset (discard) and Save. When the form is pristine the
+ * buttons stay mounted but hidden (`visibility: hidden` + `aria-hidden`) so the
+ * header row always reserves their height and content below it never shifts.
+ */
+export const GuardrailHeaderActions: FC = () => {
+  const {
+    formState: { isDirty },
+  } = useFormContext<GuardrailFormValues>();
+  const { save, isSaving, resetToServer } = useGuardrailForm();
+
+  return (
+    <Flex
+      gap="density-sm"
+      className={isDirty ? undefined : 'invisible pointer-events-none'}
+      aria-hidden={!isDirty}
+    >
+      <Button kind="secondary" color="neutral" onClick={resetToServer} disabled={isSaving}>
+        Reset
+      </Button>
+      <LoadingButton color="brand" onClick={() => save()} loading={isSaving} disabled={isSaving}>
+        Save Guardrail
+      </LoadingButton>
+    </Flex>
+  );
+};
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/context.ts b/web/packages/studio/src/routes/guardrails/GuardrailForm/context.ts
new file mode 100644
index 0000000000..fa954406cd
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/context.ts
@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { GuardrailConfig } from '@nemo/sdk/generated/platform/schema';
+import { createContext } from 'react';
+
+/**
+ * Guardrail-editing actions that live alongside the RHF form (which is provided
+ * separately via `FormProvider`). Field state comes from `useFormContext`; this
+ * carries the pieces RHF doesn't own — the server config and save/reset wiring.
+ */
+export interface GuardrailFormContextValue {
+  /** The persisted server config the form is based on. */
+  config: GuardrailConfig;
+  /** Validate and PATCH the working copy back to the server. */
+  save: () => void;
+  /** Whether a save (PATCH) is in flight. */
+  isSaving: boolean;
+  /** Discard local edits and return the form to the server config. */
+  resetToServer: () => void;
+}
+
+export const GuardrailFormContext = createContext<GuardrailFormContextValue | null>(null);
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.test.ts b/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.test.ts
new file mode 100644
index 0000000000..bc8cb9db86
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.test.ts
@@ -0,0 +1,44 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput } from '@nemo/sdk/generated/platform/schema';
+import { applyFormToConfig } from '@studio/routes/guardrails/GuardrailForm/formModel';
+
+describe('applyFormToConfig', () => {
+  it('persists removal of the sole general instruction as an empty list', () => {
+    const data: RailsConfigOutput = {
+      instructions: [{ type: 'general', content: 'Be helpful.' }],
+    };
+    const result = applyFormToConfig(data, { generalInstruction: '', sampleConversation: '' });
+    expect(result.instructions).toEqual([]);
+  });
+
+  it('keeps other instructions when the general one is cleared', () => {
+    const data: RailsConfigOutput = {
+      instructions: [
+        { type: 'general', content: 'Be helpful.' },
+        { type: 'sample_conversation', content: 'user: hi' },
+      ],
+    };
+    const result = applyFormToConfig(data, { generalInstruction: '', sampleConversation: '' });
+    expect(result.instructions).toEqual([{ type: 'sample_conversation', content: 'user: hi' }]);
+  });
+
+  it('updates the general instruction while preserving unexposed config fields', () => {
+    const data = {
+      instructions: [{ type: 'general', content: 'Old.' }],
+      models: [{ type: 'main', engine: 'openai', model: 'gpt-4' }],
+    } as RailsConfigOutput;
+    const result = applyFormToConfig(data, { generalInstruction: 'New.', sampleConversation: '' });
+    expect(result.instructions).toEqual([{ type: 'general', content: 'New.' }]);
+    expect(result.models).toEqual(data.models);
+  });
+
+  it('omits an empty sample conversation', () => {
+    const result = applyFormToConfig(undefined, {
+      generalInstruction: 'Hi.',
+      sampleConversation: '',
+    });
+    expect(result.sample_conversation).toBeUndefined();
+  });
+});
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.ts b/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.ts
new file mode 100644
index 0000000000..45b66e8a85
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/formModel.ts
@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RailsConfigOutput } from '@nemo/sdk/generated/platform/schema';
+import {
+  getGeneralInstruction,
+  setGeneralInstruction,
+} from '@studio/routes/guardrails/GuardrailConfigTab/instructions';
+import { z } from 'zod';
+
+/**
+ * The editable form model — a curated, flat subset of the guardrail config.
+ * Fields are added here as they become editable; everything else in the config
+ * rides along untouched (see {@link applyFormToConfig}).
+ */
+export const guardrailFormSchema = z.object({
+  generalInstruction: z.string(),
+  sampleConversation: z.string(),
+});
+
+export type GuardrailFormValues = z.infer<typeof guardrailFormSchema>;
+
+/** A locally-persisted draft, tagged with the server version it was branched from. */
+export interface StoredDraft {
+  /** The config's `updated_at` when the draft was taken, for stale detection. */
+  baseVersion: string;
+  values: GuardrailFormValues;
+}
+
+/** Extract the form model from the API config. */
+export const mapConfigToForm = (data: RailsConfigOutput | undefined): GuardrailFormValues => ({
+  generalInstruction: getGeneralInstruction(data?.instructions),
+  sampleConversation: data?.sample_conversation ?? '',
+});
+
+/**
+ * Merge form values back onto the original server `data`, preserving every field
+ * we don't expose (models, detectors, custom_data, …). This is the inverse of
+ * {@link mapConfigToForm} and the single place each editable field is written back.
+ */
+export const applyFormToConfig = (
+  data: RailsConfigOutput | undefined,
+  values: GuardrailFormValues
+): RailsConfigOutput => {
+  const base = data ?? {};
+  return {
+    ...base,
+    // Use the computed list directly: an empty result means the user cleared the
+    // sole general instruction, so we must persist the removal rather than fall
+    // back to the (still-populated) base instructions.
+    instructions: setGeneralInstruction(base.instructions, values.generalInstruction),
+    sample_conversation: values.sampleConversation === '' ? undefined : values.sampleConversation,
+  };
+};
+
+/** Local-storage key for a config's draft, scoped by workspace and name. */
+export const guardrailDraftKey = (workspace: string, name: string): string =>
+  `guardrail-draft:${workspace}:${name}`;
diff --git a/web/packages/studio/src/routes/guardrails/GuardrailForm/useGuardrailForm.ts b/web/packages/studio/src/routes/guardrails/GuardrailForm/useGuardrailForm.ts
new file mode 100644
index 0000000000..b3c4189009
--- /dev/null
+++ b/web/packages/studio/src/routes/guardrails/GuardrailForm/useGuardrailForm.ts
@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { GuardrailFormContext } from '@studio/routes/guardrails/GuardrailForm/context';
+import { useContext } from 'react';
+
+export const useGuardrailForm = () => {
+  const context = useContext(GuardrailFormContext);
+  if (!context) {
+    throw new Error('useGuardrailForm must be used within a GuardrailFormProvider');
+  }
+  return context;
+};
diff --git a/web/packages/studio/src/routes/utils.ts b/web/packages/studio/src/routes/utils.ts
index a734049c64..f5a7b5e106 100644
--- a/web/packages/studio/src/routes/utils.ts
+++ b/web/packages/studio/src/routes/utils.ts
@@ -374,6 +374,13 @@ export const getGuardrailDetailRoute = (workspace: string, guardrailConfigName:
   });
 };
 
+export const getGuardrailConfigRoute = (workspace: string, guardrailConfigName: string) => {
+  return generatePath(ROUTES.workspace.guardrailConfig, {
+    workspace,
+    guardrailConfigName,
+  });
+};
+
 export const getWorkspaceSettingsRoute = (workspace: string) => {
   return generatePath(ROUTES.workspace.settings, { workspace });
 };