fix(studio): refactor GuardrailsTable to DataView

web/packages/studio/src/components/dataViews/GuardrailChecksDataView/ResultIndicator.tsx

@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Badge } from '@nvidia/foundations-react-core';
+import type { Verdict } from '@studio/api/guardrail-checks/types';
+import { ArrowRight, Clock, ShieldCheck } from 'lucide-react';
+import type { FC } from 'react';
+
+/** Solid status badge for a check's latest-run verdict (purple guarded / green allowed). */
+export const ResultIndicator: FC<{ status: Verdict | undefined }> = ({ status }) => {
+  if (status === 'blocked') {
+    return (
+      <Badge color="purple" kind="solid">
+        <ShieldCheck size={14} />
+        Guarded
+      </Badge>
+    );
+  }
+  if (status === 'success') {
+    return (
+      <Badge color="green" kind="solid">
+        <ArrowRight size={14} />
+        Allowed
+      </Badge>
+    );
+  }
+  return (
+    <Badge color="gray" kind="solid">
+      <Clock size={14} />
+      Not run
+    </Badge>
+  );
+};

web/packages/studio/src/components/dataViews/GuardrailChecksDataView/ResultSummary.tsx

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Flex, Panel, Stack, Text } from '@nvidia/foundations-react-core';
+import type { GuardrailCheckEntity } from '@studio/api/guardrail-checks/types';
+import { getLatestRunStatus } from '@studio/components/dataViews/GuardrailChecksDataView/checkStatus';
+import type { FC } from 'react';
+
+interface ResultSummaryProps {
+  checks: GuardrailCheckEntity[];
+}
+
+/** Segment/legend colors for the result summary: purple guarded, green allowed, gray not-run. */
+const GUARDED_BG = 'bg-[var(--color-purple-600)]';
+const ALLOWED_BG = 'bg-[var(--color-green-200)]';
+const NOTRUN_BG = 'bg-[var(--color-gray-200)]';
+
+/** Count of checks by their latest-run verdict: allowed, guarded, or never run. */
+const summarizeResults = (checks: GuardrailCheckEntity[]) => {
+  let allowed = 0;
+  let guarded = 0;
+  let notRun = 0;
+
+  for (const check of checks) {
+    const status = getLatestRunStatus(check);
+    if (status === 'success') {
+      allowed += 1;
+    } else if (status === 'blocked') {
+      guarded += 1;
+    } else {
+      notRun += 1;
+    }
+  }
+
+  return { allowed, guarded, notRun };
+};
+
+/** One proportional segment of the summary bar; renders nothing when its share is zero. */
+const BarSegment: FC<{ colorClassName: string; pct: number }> = ({ colorClassName, pct }) =>
+  pct > 0 ? (
+    <div
+      className={`h-full ${colorClassName}`}
+      // eslint-disable-next-line no-restricted-syntax -- width is a runtime proportion
+      style={{ width: `${pct}%` }}
+    />
+  ) : null;
+
+/** One legend entry: a colored dot + label on the left, the count on the right. */
+const LegendRow: FC<{ dotClassName: string; label: string; value: number }> = ({
+  dotClassName,
+  label,
+  value,
+}) => (
+  <Flex align="center" justify="between">
+    <Flex align="center" gap="density-sm">
+      <span className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${dotClassName}`} />
+      <Text kind="label/regular/sm">{label}</Text>
+    </Flex>
+    <Text kind="label/bold/sm">{value}</Text>
+  </Flex>
+);
+
+/** Proportional bar + legend breaking down a set of checks by their latest-run verdict. */
+export const ResultSummary: FC<ResultSummaryProps> = ({ checks }) => {
+  const { allowed, guarded, notRun } = summarizeResults(checks);
+
+  // Bar proportions span every check: guarded, then allowed, then not-run at the end.
+  const total = guarded + allowed + notRun;
+  const pct = (n: number) => (total > 0 ? (n / total) * 100 : 0);
+
+  return (
+    <Panel slotHeading="Result Summary">
+      <Stack gap="density-lg">
+        {/* Left → right: guarded (purple), allowed (green), not-run (gray) at the end. */}
+        <div
+          className="flex h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+          role="img"
+          aria-label={`${guarded} guarded, ${allowed} allowed, ${notRun} not run`}
+        >
+          <BarSegment colorClassName={GUARDED_BG} pct={pct(guarded)} />
+          <BarSegment colorClassName={ALLOWED_BG} pct={pct(allowed)} />
+          <BarSegment colorClassName={NOTRUN_BG} pct={pct(notRun)} />
+        </div>
+        <Stack gap="density-sm">
+          <LegendRow dotClassName={GUARDED_BG} label="Guarded" value={guarded} />
+          <LegendRow dotClassName={ALLOWED_BG} label="Allowed" value={allowed} />
+          <LegendRow dotClassName={NOTRUN_BG} label="Not run" value={notRun} />
+        </Stack>
+      </Stack>
+    </Panel>
+  );
+};

web/packages/studio/src/components/dataViews/GuardrailChecksDataView/checkStatus.ts

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { FilterItem } from '@nemo/common/src/components/DataView/internal';
 import type { GuardrailCheckEntity, Verdict } from '@studio/api/guardrail-checks/types';
 
 /**
@@ -11,3 +12,42 @@ export const getLatestRunStatus = (check: GuardrailCheckEntity): Verdict | undef
   const { runs } = check.data;
   return runs.length ? runs[runs.length - 1].status : undefined;
 };
+
+/** The three result buckets the UI presents, keyed by their filter value. */
+const RESULT_FILTER_VALUES = {
+  guarded: 'blocked',
+  allowed: 'success',
+  notRun: 'not-run',
+} as const;
+
+/** Options for the "Result" single-select column filter. */
+export const RESULT_FILTER_OPTIONS: FilterItem[] = [
+  { value: RESULT_FILTER_VALUES.guarded, label: 'Guarded' },
+  { value: RESULT_FILTER_VALUES.allowed, label: 'Allowed' },
+  { value: RESULT_FILTER_VALUES.notRun, label: 'Not run' },
+];
+
+/**
+ * Bucket a verdict for filtering. `StatusEnum` also carries `unknown`, which — like a check
+ * that has never run — is presented as "Not run" rather than as its own result.
+ */
+export const getResultFilterValue = (status: Verdict | undefined): string => {
+  if (status === RESULT_FILTER_VALUES.guarded) {
+    return RESULT_FILTER_VALUES.guarded;
+  }
+  if (status === RESULT_FILTER_VALUES.allowed) {
+    return RESULT_FILTER_VALUES.allowed;
+  }
+  return RESULT_FILTER_VALUES.notRun;
+};
+
+/** Ascending sort order for the Result column: guarded first, never-run last. */
+const RESULT_SORT_RANK: Record<string, number> = {
+  [RESULT_FILTER_VALUES.guarded]: 0,
+  [RESULT_FILTER_VALUES.allowed]: 1,
+  [RESULT_FILTER_VALUES.notRun]: 2,
+};
+
+/** Sort weight for a verdict, for the Result column's client-side sort. */
+export const getResultSortRank = (status: Verdict | undefined): number =>
+  RESULT_SORT_RANK[getResultFilterValue(status)];

web/packages/studio/src/components/dataViews/GuardrailChecksDataView/index.test.tsx

@@ -0,0 +1,190 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  GUARDRAIL_CHECKS_ENTITY_TYPE,
+  type GuardrailCheckEntity,
+  type Verdict,
+} from '@studio/api/guardrail-checks/types';
+import { GuardrailChecksDataView } from '@studio/components/dataViews/GuardrailChecksDataView';
+import { XL_SELECTOR_TIMEOUT } from '@studio/tests/util/constants';
+import { TestProviders } from '@studio/tests/util/TestProviders';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+
+const makeCheck = ({
+  id,
+  input,
+  output,
+  status,
+}: {
+  id: string;
+  input: string;
+  output?: string;
+  status?: Verdict;
+}): GuardrailCheckEntity => ({
+  entity_type: GUARDRAIL_CHECKS_ENTITY_TYPE,
+  id,
+  parent: 'cfg-1',
+  db_version: 1,
+  name: id,
+  workspace: 'default',
+  created_at: '2026-04-12T11:00:00.000Z',
+  created_by: 'user@example.com',
+  updated_at: '2026-04-12T11:00:00.000Z',
+  updated_by: 'user@example.com',
+  data: {
+    messages: [
+      { role: 'user', content: input },
+      ...(output ? [{ role: 'assistant' as const, content: output }] : []),
+    ],
+    runs: status
+      ? [{ run_at: '2026-04-12T11:05:00.000Z', status, rails_status: {}, config_version: 1 }]
+      : [],
+  },
+});
+
+const GUARDED = makeCheck({
+  id: 'chk-guarded',
+  input: 'My SSN is 123-45-6789',
+  output: 'I cannot help with that',
+  status: 'blocked',
+});
+const ALLOWED = makeCheck({
+  id: 'chk-allowed',
+  input: 'What is the weather today',
+  output: 'It is sunny',
+  status: 'success',
+});
+const NOT_RUN = makeCheck({ id: 'chk-not-run', input: 'Hello there' });
+
+const CHECKS = [GUARDED, ALLOWED, NOT_RUN];
+
+const renderComponent = (checks: GuardrailCheckEntity[] = CHECKS) => {
+  const router = createMemoryRouter([
+    { path: '/', element: <GuardrailChecksDataView checks={checks} /> },
+  ]);
+
+  return render(
+    <TestProviders>
+      <RouterProvider router={router} />
+    </TestProviders>
+  );
+};
+
+describe('GuardrailChecksDataView', () => {
+  it('renders a row per check with its input and output', async () => {
+    renderComponent();
+
+    expect(
+      await screen.findByText('My SSN is 123-45-6789', undefined, { timeout: XL_SELECTOR_TIMEOUT })
+    ).toBeInTheDocument();
+    expect(screen.getByText('I cannot help with that')).toBeInTheDocument();
+    expect(screen.getByText('What is the weather today')).toBeInTheDocument();
+    expect(screen.getByText('Hello there')).toBeInTheDocument();
+  });
+
+  it('renders the Input, Output, and Result columns', async () => {
+    renderComponent();
+
+    for (const header of ['Input', 'Output', 'Result']) {
+      expect(
+        await screen.findByRole('columnheader', { name: header }, { timeout: XL_SELECTOR_TIMEOUT })
+      ).toBeInTheDocument();
+    }
+  });
+
+  it('maps each latest-run verdict to its result badge', async () => {
+    renderComponent();
+
+    await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+
+    const rowFor = (input: string) => screen.getByRole('row', { name: new RegExp(input) });
+
+    expect(rowFor('My SSN is 123-45-6789')).toHaveTextContent('Guarded');
+    expect(rowFor('What is the weather today')).toHaveTextContent('Allowed');
+    // A check with no runs has never been evaluated — it must not read as a passing test.
+    expect(rowFor('Hello there')).toHaveTextContent('Not run');
+  });
+
+  it('falls back to a dash when a check has no assistant output', async () => {
+    renderComponent([NOT_RUN]);
+
+    expect(
+      await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT })
+    ).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+
+  it('narrows rows to those matching the search text', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+    await user.type(screen.getByPlaceholderText('Search tests...'), 'weather');
+
+    await waitFor(() => expect(screen.queryByText('Hello there')).not.toBeInTheDocument(), {
+      timeout: XL_SELECTOR_TIMEOUT,
+    });
+    expect(screen.getByText('What is the weather today')).toBeInTheDocument();
+  });
+
+  it('searches assistant output as well as user input', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+    await user.type(screen.getByPlaceholderText('Search tests...'), 'cannot help');
+
+    await waitFor(() => expect(screen.queryByText('Hello there')).not.toBeInTheDocument(), {
+      timeout: XL_SELECTOR_TIMEOUT,
+    });
+    expect(screen.getByText('My SSN is 123-45-6789')).toBeInTheDocument();
+  });
+
+  it('filters by result and restores every row when the filter is cleared', async () => {
+    renderComponent();
+
+    await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+
+    fireEvent.click(screen.getByTestId('open-filters-button'));
+    fireEvent.click(await screen.findByTestId('column-filter-status'));
+    fireEvent.click(await screen.findByRole('option', { name: 'Guarded' }));
+
+    await waitFor(() => expect(screen.queryByText('Hello there')).not.toBeInTheDocument(), {
+      timeout: XL_SELECTOR_TIMEOUT,
+    });
+    expect(screen.getByText('My SSN is 123-45-6789')).toBeInTheDocument();
+    expect(screen.queryByText('What is the weather today')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('clear-filters'));
+
+    expect(
+      await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT })
+    ).toBeInTheDocument();
+    expect(screen.getByText('What is the weather today')).toBeInTheDocument();
+  });
+
+  it('shows the no-tests empty state when there are no checks', async () => {
+    renderComponent([]);
+
+    expect(
+      await screen.findByText('No tests yet', undefined, { timeout: XL_SELECTOR_TIMEOUT })
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Clear Filters/i })).not.toBeInTheDocument();
+  });
+
+  it('offers a way out when a search matches nothing', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    await screen.findByText('Hello there', undefined, { timeout: XL_SELECTOR_TIMEOUT });
+    await user.type(screen.getByPlaceholderText('Search tests...'), 'no-such-test');
+
+    expect(
+      await screen.findByText('No Results Found', undefined, { timeout: XL_SELECTOR_TIMEOUT })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Clear Filters/i })).toBeInTheDocument();
+  });
+});