@startsimpli/ui 0.4.51 → 0.4.53

package/src/components/document-editor/__tests__/sections.test.ts

@@ -0,0 +1,107 @@
+import {
+  sectionsFromRecord,
+  recordPatchFromSections,
+  readData,
+  toCamelKey,
+  type DocAttribute,
+} from '../sections';
+import type { DocSection } from '../types';
+
+const attrs: DocAttribute[] = [
+  { name: 'blog', dataType: 'longtext', label: 'Blog post' },
+  { name: 'linkedin', dataType: 'text' },
+  { name: 'seo', dataType: 'json' },
+  { name: 'sources', dataType: 'json' },
+  { name: 'status', dataType: 'enum' },
+  { name: 'stage', dataType: 'enum' },
+  { name: 'score', dataType: 'number' },
+  { name: 'created_at', dataType: 'date' },
+];
+
+describe('toCamelKey / readData', () => {
+  it('camelCases snake and kebab keys', () => {
+    expect(toCamelKey('meta_description')).toBe('metaDescription');
+    expect(toCamelKey('primary-keyword')).toBe('primaryKeyword');
+    expect(toCamelKey('blog')).toBe('blog');
+  });
+  it('reads camel form first, then raw', () => {
+    expect(readData({ metaDescription: 'camel' }, 'meta_description')).toBe('camel');
+    expect(readData({ meta_description: 'raw' }, 'meta_description')).toBe('raw');
+    expect(readData(undefined, 'x')).toBeUndefined();
+  });
+});
+
+describe('sectionsFromRecord', () => {
+  const data = {
+    blog: '# Hello\n\nBody',
+    linkedin: 'A short post',
+    seo: { meta_description: 'desc', primary_keyword: 'kw' },
+    sources: [{ url: 'https://a.com' }, 'https://b.com'],
+    status: 'draft',
+    score: 5,
+  };
+
+  it('routes data types to the right kinds and skips enum/system/unknown', () => {
+    const sections = sectionsFromRecord(attrs, data);
+    const byKey = Object.fromEntries(sections.map((s) => [s.key, s]));
+    expect(byKey.blog.kind).toBe('markdown');
+    expect(byKey.linkedin.kind).toBe('text');
+    expect(byKey.seo.kind).toBe('structured');
+    expect(byKey.sources.kind).toBe('list');
+    // enum (status, stage), number (score), date/system (created_at) are skipped
+    expect(sections.map((s) => s.key).sort()).toEqual(['blog', 'linkedin', 'seo', 'sources']);
+  });
+
+  it('coerces values into each kind shape', () => {
+    const { blog, seo, sources } = Object.fromEntries(
+      sectionsFromRecord(attrs, data).map((s) => [s.key, s]),
+    ) as Record<string, DocSection>;
+    expect(typeof blog.value).toBe('string');
+    expect(seo.value).toEqual({ meta_description: 'desc', primary_keyword: 'kw' });
+    // list: array of {url} objects + a bare string → url extracted from objects, strings kept
+    expect(sources.value).toEqual(['https://a.com', 'https://b.com']);
+  });
+
+  it('parses a newline-delimited string into a list', () => {
+    const s = sectionsFromRecord([{ name: 'sources', dataType: 'text' }], { sources: 'https://a.com\nhttps://b.com\n' });
+    expect(s[0].kind).toBe('list');
+    expect(s[0].value).toEqual(['https://a.com', 'https://b.com']);
+  });
+
+  it('honors label, camelCase reads, exclude, readOnlyKeys and includeKinds', () => {
+    const camelData = { blog: 'x', linkedIn: 'y' };
+    const a: DocAttribute[] = [
+      { name: 'blog', dataType: 'longtext', label: 'Blog post' },
+      { name: 'linked_in', dataType: 'text' },
+    ];
+    const sections = sectionsFromRecord(a, camelData, { readOnlyKeys: ['blog'] });
+    expect(sections.find((s) => s.key === 'blog')!.label).toBe('Blog post');
+    expect(sections.find((s) => s.key === 'blog')!.readOnly).toBe(true);
+    // linked_in humanized + camelCase-aware read of `linkedIn`
+    expect(sections.find((s) => s.key === 'linked_in')!.label).toBe('Linked in');
+    expect(sections.find((s) => s.key === 'linked_in')!.value).toBe('y');
+
+    expect(sectionsFromRecord(attrs, data, { exclude: ['seo'] }).some((s) => s.key === 'seo')).toBe(false);
+    expect(
+      sectionsFromRecord(attrs, data, { includeKinds: ['markdown'] }).map((s) => s.kind),
+    ).toEqual(['markdown']);
+  });
+});
+
+describe('recordPatchFromSections', () => {
+  it('produces a data patch keyed by section.key with normalized shapes', () => {
+    const sections: DocSection[] = [
+      { key: 'blog', label: 'Blog', kind: 'markdown', value: '# hi' },
+      { key: 'linkedin', label: 'LinkedIn', kind: 'text', value: 'post' },
+      { key: 'seo', label: 'SEO', kind: 'structured', value: { meta_description: 'd', primary_keyword: 'k' } },
+      { key: 'sources', label: 'Sources', kind: 'list', value: ['https://a.com', ''] },
+    ];
+    const patch = recordPatchFromSections(sections);
+    expect(patch).toEqual({
+      blog: '# hi',
+      linkedin: 'post',
+      seo: { meta_description: 'd', primary_keyword: 'k' },
+      sources: ['https://a.com'],
+    });
+  });
+});

package/src/components/document-editor/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @startsimpli/ui/document-editor — a generic, schema-driven, Google-Docs-like
+ * editor over typed document sub-sections (blog markdown + text + structured SEO
+ * + source lists). Presentational + controlled: bring your own persistence.
+ *
+ * Exposed as its own subpath (like ./blog and ./collection) because it pulls
+ * react-markdown for the markdown preview — kept out of the main components
+ * barrel so consumers that don't edit documents don't drag that dependency.
+ */
+export { DocumentEditor } from './DocumentEditor';
+export type { DocumentEditorProps, SaveStatus } from './DocumentEditor';
+export type { DocSection, DocSectionKind } from './types';
+export {
+  sectionsFromRecord,
+  recordPatchFromSections,
+  readData,
+  toCamelKey,
+  type DocAttribute,
+  type SectionsFromRecordOptions,
+} from './sections';

package/src/components/document-editor/sections.ts

@@ -0,0 +1,170 @@
+/**
+ * Schema-driven mappers between an entity record and DocumentEditor sections.
+ *
+ * These make the editor generic (not OGMC-specific): an app hands the editor an
+ * entity type's attributes + its `data` blob and gets back typed
+ * {@link DocSection}s; on save it turns the edited sections back into a `data`
+ * patch to PATCH. Pure + framework-free (no React) so they're cheap to unit-test
+ * and reuse in a Node route.
+ *
+ * Blob convention mirrors `collection/data.ts`: a tenant API client camelCases
+ * response keys, so a snake_case attr `meta_description` may land as
+ * `metaDescription` — reads try the camel form first, then the raw key.
+ */
+import type { DocSection, DocSectionKind } from './types';
+
+/**
+ * Minimal attribute shape the mapper needs — a structural subset of the entity
+ * schema `AttributeDef` (name + dataType, optional label/config), so callers can
+ * pass their existing attribute objects directly.
+ */
+export interface DocAttribute {
+  name: string;
+  /** Entity data type — `text` | `longtext` | `json` | `enum` | `number` | … */
+  dataType: string;
+  label?: string;
+  config?: Record<string, unknown> | null;
+}
+
+export interface SectionsFromRecordOptions {
+  /** Attribute names to skip outright (in addition to the built-in system/status skips). */
+  exclude?: string[];
+  /** Mark these section keys read-only. */
+  readOnlyKeys?: string[];
+  /** Restrict output to these kinds (e.g. only `markdown` + `text`). */
+  includeKinds?: DocSectionKind[];
+}
+
+/** snake_case / kebab → camelCase (matches collection/data.ts). */
+export function toCamelKey(name: string): string {
+  return name.replace(/[_-]+([a-z0-9])/g, (_m, c: string) => c.toUpperCase());
+}
+
+/** camelCase-aware read of a value out of a `data` blob. */
+export function readData(data: Record<string, unknown> | undefined | null, name: string): unknown {
+  if (!data) return undefined;
+  return data[toCamelKey(name)] ?? data[name];
+}
+
+/** Attribute names that are never editable document sections. */
+const SYSTEM_NAMES = new Set(['id', 'status', 'created_at', 'updated_at', 'createdat', 'updatedat', 'external_id']);
+
+function humanize(name: string): string {
+  const spaced = name.replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2').trim();
+  return spaced ? spaced.charAt(0).toUpperCase() + spaced.slice(1) : name;
+}
+
+/** A name like `sources`, `source_urls`, `references` → a list section. */
+function looksLikeList(name: string): boolean {
+  return /\bsources?\b/i.test(name) || /^sources?/i.test(name) || /_sources?$/i.test(name);
+}
+
+/** Decide the section kind for an attribute, or `null` to skip it. */
+function kindFor(attr: DocAttribute): DocSectionKind | null {
+  if (looksLikeList(attr.name)) return 'list';
+  switch (attr.dataType) {
+    case 'longtext':
+      return 'markdown';
+    case 'json':
+      return 'structured';
+    case 'text':
+      return 'text';
+    default:
+      // number/boolean/date/enum/etc. are not document-editable sections.
+      return null;
+  }
+}
+
+function toStr(v: unknown): string {
+  return v == null ? '' : String(v);
+}
+
+/** Coerce an arbitrary stored value into the shape a `kind` expects. */
+function coerceValue(kind: DocSectionKind, raw: unknown): unknown {
+  switch (kind) {
+    case 'markdown':
+    case 'text':
+      return toStr(raw);
+    case 'list':
+      if (Array.isArray(raw)) {
+        return raw
+          .map((el) => {
+            if (typeof el === 'string') return el.trim();
+            if (el && typeof el === 'object') {
+              const o = el as Record<string, unknown>;
+              return toStr(o.url ?? o.href ?? o.value ?? o.name).trim();
+            }
+            return toStr(el).trim();
+          })
+          .filter((s) => s.length > 0);
+      }
+      if (typeof raw === 'string') {
+        return raw
+          .split(/\r?\n/)
+          .map((s) => s.trim())
+          .filter((s) => s.length > 0);
+      }
+      return [];
+    case 'structured': {
+      if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+        const out: Record<string, string> = {};
+        for (const [k, v] of Object.entries(raw as Record<string, unknown>)) out[k] = toStr(v);
+        return out;
+      }
+      return {};
+    }
+  }
+}
+
+/**
+ * Map an entity type's attributes + its `data` blob → editable DocSections.
+ * Skips system/status/enum attributes; heuristically routes `longtext`→markdown,
+ * `json`→structured, `text`→text, and any `source(s)`-ish name→list.
+ */
+export function sectionsFromRecord(
+  attributes: DocAttribute[],
+  data: Record<string, unknown> | undefined | null,
+  opts: SectionsFromRecordOptions = {},
+): DocSection[] {
+  const exclude = new Set((opts.exclude ?? []).map((n) => n.toLowerCase()));
+  const readOnly = new Set(opts.readOnlyKeys ?? []);
+  const sections: DocSection[] = [];
+
+  for (const attr of attributes) {
+    const lname = attr.name.toLowerCase();
+    if (exclude.has(lname) || SYSTEM_NAMES.has(lname)) continue;
+    // Enums are status/vocabulary fields, not document prose.
+    if (attr.dataType === 'enum') continue;
+
+    const kind = kindFor(attr);
+    if (!kind) continue;
+    if (opts.includeKinds && !opts.includeKinds.includes(kind)) continue;
+
+    const placeholder = attr.config && typeof attr.config.placeholder === 'string'
+      ? (attr.config.placeholder as string)
+      : undefined;
+
+    sections.push({
+      key: attr.name,
+      label: attr.label || humanize(attr.name),
+      kind,
+      value: coerceValue(kind, readData(data, attr.name)),
+      placeholder,
+      readOnly: readOnly.has(attr.name) || undefined,
+    });
+  }
+
+  return sections;
+}
+
+/**
+ * Turn edited sections back into a `data` patch object (keyed by section.key) to
+ * merge and PATCH. Values are normalized to their kind's canonical shape.
+ */
+export function recordPatchFromSections(sections: DocSection[]): Record<string, unknown> {
+  const patch: Record<string, unknown> = {};
+  for (const s of sections) {
+    patch[s.key] = coerceValue(s.kind, s.value);
+  }
+  return patch;
+}

package/src/components/document-editor/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Section model for the generic DocumentEditor.
+ *
+ * A "document" here is a typed, multi-part content record — e.g. a marketing
+ * draft = blog markdown + LinkedIn text + SEO fields + sources. Each part is a
+ * {@link DocSection} with a `kind` that decides how it renders + edits. Kept
+ * framework-free so the pure mappers in `./sections` (and any Node/LLM caller)
+ * can import it without dragging React.
+ */
+
+/** How a section renders + edits. */
+export type DocSectionKind = 'markdown' | 'text' | 'structured' | 'list';
+
+/**
+ * One editable part of a document.
+ * `value` is typed by `kind`:
+ * - `markdown` / `text` → `string`
+ * - `structured`        → `Record<string, string>`
+ * - `list`              → `string[]`
+ */
+export interface DocSection {
+  /** Stable id — usually the source attribute name (`blog`, `linkedin`, `seo`, `sources`). */
+  key: string;
+  /** Human label shown above the section. */
+  label: string;
+  kind: DocSectionKind;
+  /** The section's current value (shape depends on `kind`). */
+  value: unknown;
+  placeholder?: string;
+  /** This one section is read-only even when the editor is editable. */
+  readOnly?: boolean;
+}

package/src/components/index.ts

@@ -168,3 +168,8 @@ export type {
 
 // Record detail read-view
 export * from './record-detail'
+
+// Content validation toolkit (768w.16.10.1) — ValidationChecklist + the pure
+// runContentChecks recompute util. Light (React + lucide only), so it ships on
+// the main barrel rather than a subpath.
+export * from './validation'

package/src/components/validation/ValidationChecklist.tsx

@@ -0,0 +1,270 @@
+import * as React from 'react';
+import {
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  ChevronDown,
+  ChevronRight,
+  ShieldCheck,
+  ShieldAlert,
+} from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { overallStatus, type CheckStatus, type ContentCheck } from './checks';
+
+/** Redundant (color + icon + label) tone per check status — never color alone. */
+const CHECK_TONE: Record<CheckStatus, { label: string; dot: string; text: string; softBg: string; Icon: typeof CheckCircle2 }> = {
+  pass: { label: 'Passing', dot: 'bg-emerald-500', text: 'text-emerald-700', softBg: 'bg-emerald-50', Icon: CheckCircle2 },
+  warn: { label: 'Warnings', dot: 'bg-amber-500', text: 'text-amber-700', softBg: 'bg-amber-50', Icon: AlertTriangle },
+  fail: { label: 'Failing', dot: 'bg-red-500', text: 'text-red-700', softBg: 'bg-red-50', Icon: XCircle },
+};
+
+/** One issue the AI judge raised against a guardrail. */
+export interface JudgeIssue {
+  guardrail?: string;
+  severity?: string;
+  problem?: string;
+  fix?: string;
+}
+
+/** The AI judge's output stored alongside the content record. */
+export interface JudgeVerdict {
+  /** Overall verdict word (e.g. "approve", "revise", "reject"). */
+  verdict?: string;
+  /** Per-dimension scores, keyed by dimension name. */
+  scores?: Record<string, unknown>;
+  /** Specific problems the judge flagged. */
+  issues?: JudgeIssue[];
+  /** One-line prose summary. */
+  summary?: string;
+}
+
+/** Reviewer's manual override of the automated checks. */
+export interface ValidationOverride {
+  overridden: boolean;
+  reason?: string;
+}
+
+export interface ValidationChecklistProps {
+  /** The (recomputed) deterministic checks to render. */
+  checks: ContentCheck[];
+  /** The AI judge output — renders a verdict badge, scores, and issues. */
+  judgeVerdict?: JudgeVerdict;
+  /** Current override state. When set, the overall pill reflects it. */
+  override?: ValidationOverride;
+  /** Provide to make the override affordance interactive. Omit → read-only. */
+  onOverride?: (next: ValidationOverride) => void;
+  title?: string;
+  className?: string;
+}
+
+/** A tone pill naming the roll-up state. */
+function StatusPill({ status, label }: { status: CheckStatus; label?: string }) {
+  const tone = CHECK_TONE[status];
+  const Icon = tone.Icon;
+  return (
+    <span className={cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium', tone.softBg, tone.text)}>
+      <Icon className="w-3.5 h-3.5" aria-hidden="true" />
+      {label ?? tone.label}
+    </span>
+  );
+}
+
+/** Colour a judge verdict word without needing to know the exact vocabulary. */
+function verdictStatus(verdict?: string): CheckStatus {
+  const v = (verdict ?? '').toLowerCase();
+  if (/pass|approve|accept|ok|good/.test(v)) return 'pass';
+  if (/fail|reject|block|deny|bad/.test(v)) return 'fail';
+  return 'warn';
+}
+
+/**
+ * Presentational, bring-your-own-data validation panel (768w.16.10.1).
+ *
+ * Surfaces the buried machine review of an AI-generated content record as a
+ * scannable pass/warn/fail checklist plus the AI judge's verdict — so a Foundry
+ * tenant can accept/reject in one glance. Stateless except for local UI toggles
+ * (expand issues, edit override reason); the app owns the data and persistence.
+ */
+export function ValidationChecklist({
+  checks,
+  judgeVerdict,
+  override,
+  onOverride,
+  title = 'Validation',
+  className,
+}: ValidationChecklistProps) {
+  const overall = overallStatus(checks);
+  const [issuesOpen, setIssuesOpen] = React.useState(false);
+  const [overrideOpen, setOverrideOpen] = React.useState(false);
+  const [reason, setReason] = React.useState(override?.reason ?? '');
+
+  const counts = React.useMemo(
+    () => ({
+      pass: checks.filter((c) => c.status === 'pass').length,
+      warn: checks.filter((c) => c.status === 'warn').length,
+      fail: checks.filter((c) => c.status === 'fail').length,
+    }),
+    [checks],
+  );
+
+  const issues = judgeVerdict?.issues ?? [];
+  const scoreEntries = judgeVerdict?.scores ? Object.entries(judgeVerdict.scores) : [];
+
+  return (
+    <div className={cn('rounded-xl border bg-card text-card-foreground shadow p-5 space-y-4', className)}>
+      {/* Header: title + overall pill */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0">
+          <ShieldCheck className="w-4 h-4 text-gray-400 flex-shrink-0" aria-hidden="true" />
+          <h3 className="text-sm font-semibold text-gray-900 truncate">{title}</h3>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {override?.overridden && (
+            <span className="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
+              <ShieldAlert className="w-3 h-3" aria-hidden="true" />
+              Overridden
+            </span>
+          )}
+          <StatusPill status={override?.overridden ? 'pass' : overall} label={`${counts.pass}/${checks.length} passing`} />
+        </div>
+      </div>
+
+      {/* Checks list */}
+      {checks.length === 0 ? (
+        <p className="text-sm text-gray-500 py-2 text-center">No checks to show.</p>
+      ) : (
+        <ul className="space-y-1.5">
+          {checks.map((check) => {
+            const tone = CHECK_TONE[check.status];
+            const Icon = tone.Icon;
+            return (
+              <li key={check.id} className="flex items-center gap-2.5 text-sm">
+                <span className={cn('inline-block w-2 h-2 rounded-full flex-shrink-0', tone.dot)} aria-hidden="true" />
+                <Icon className={cn('w-4 h-4 flex-shrink-0', tone.text)} aria-hidden="true" />
+                <span className="text-gray-900">{check.label}</span>
+                {check.detail && <span className="text-gray-500 truncate">— {check.detail}</span>}
+                <span className="sr-only">{tone.label}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/* AI judge section */}
+      {judgeVerdict && (
+        <div className="rounded-lg border bg-gray-50/60 p-3 space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-xs font-semibold uppercase tracking-wide text-gray-500">AI judge</span>
+            {judgeVerdict.verdict && <StatusPill status={verdictStatus(judgeVerdict.verdict)} label={judgeVerdict.verdict} />}
+          </div>
+
+          {judgeVerdict.summary && <p className="text-sm text-gray-700">{judgeVerdict.summary}</p>}
+
+          {scoreEntries.length > 0 && (
+            <dl className="flex flex-wrap gap-2">
+              {scoreEntries.map(([dim, val]) => (
+                <div key={dim} className="rounded-md bg-white border px-2 py-1 text-xs">
+                  <dt className="text-gray-500">{dim}</dt>
+                  <dd className="font-medium text-gray-900">{String(val)}</dd>
+                </div>
+              ))}
+            </dl>
+          )}
+
+          {issues.length > 0 && (
+            <div>
+              <button
+                type="button"
+                onClick={() => setIssuesOpen((o) => !o)}
+                className="flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900"
+                aria-expanded={issuesOpen}
+              >
+                {issuesOpen ? <ChevronDown className="w-3.5 h-3.5" aria-hidden="true" /> : <ChevronRight className="w-3.5 h-3.5" aria-hidden="true" />}
+                {issues.length} issue{issues.length === 1 ? '' : 's'}
+              </button>
+              {issuesOpen && (
+                <ul className="mt-2 space-y-2">
+                  {issues.map((issue, i) => (
+                    <li key={i} className="rounded-md border bg-white p-2 text-xs space-y-1">
+                      <div className="flex items-center gap-2">
+                        {issue.guardrail && <span className="font-medium text-gray-900">{issue.guardrail}</span>}
+                        {issue.severity && (
+                          <span className="rounded bg-gray-100 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-gray-600">{issue.severity}</span>
+                        )}
+                      </div>
+                      {issue.problem && <p className="text-gray-700">{issue.problem}</p>}
+                      {issue.fix && <p className="text-gray-500">Fix: {issue.fix}</p>}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Override affordance — interactive only when onOverride is provided */}
+      {onOverride && (
+        <div className="border-t pt-3">
+          {override?.overridden ? (
+            <div className="flex items-start justify-between gap-3 text-sm">
+              <div className="min-w-0">
+                <p className="font-medium text-gray-900">Checks overridden</p>
+                {override.reason && <p className="text-gray-500 break-words">{override.reason}</p>}
+              </div>
+              <button
+                type="button"
+                onClick={() => onOverride({ overridden: false })}
+                className="text-xs font-medium text-gray-500 hover:text-gray-900 flex-shrink-0"
+              >
+                Clear
+              </button>
+            </div>
+          ) : overrideOpen ? (
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-gray-600" htmlFor="validation-override-reason">
+                Reason for overriding checks
+              </label>
+              <textarea
+                id="validation-override-reason"
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                rows={2}
+                className="w-full rounded-md border px-2 py-1 text-sm"
+                placeholder="Why is this content acceptable despite the failing checks?"
+              />
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  disabled={reason.trim().length === 0}
+                  onClick={() => {
+                    onOverride({ overridden: true, reason: reason.trim() });
+                    setOverrideOpen(false);
+                  }}
+                  className="rounded-md bg-gray-900 px-2.5 py-1 text-xs font-medium text-white disabled:opacity-40"
+                >
+                  Override
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setOverrideOpen(false)}
+                  className="text-xs font-medium text-gray-500 hover:text-gray-900"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setOverrideOpen(true)}
+              className="text-xs font-medium text-gray-600 hover:text-gray-900"
+            >
+              Override checks (with reason)
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}