interactive-review

Interactive Review Artifact System

Overview

Every Confirmation Point (CP1–CP5), the Sensitivity methodology selection, and the Assessor Profile collection render inline interactive React artifacts directly in the Cowork conversation. Each artifact is dynamically generated from the actual pipeline data at that stage — no static templates. The assessor reviews and adjusts within the artifact, then submits changes back to the workflow.

Data Flow

Pipeline JSON output
  → Claude generates self-contained React artifact with data embedded
  → Assessor interacts (sliders, toggles, dropdowns, inline edits, notes)
  → Collapsed footer: "N changes made" · [Copy to Clipboard]
  → Assessor clicks Copy → pastes compact delta JSON into chat
  → Claude validates, applies delta to workspace JSON, continues pipeline

Technology Stack

All artifacts use only libraries available in the Cowork artifact sandbox:

• React 18 — useState, useCallback, useMemo, useRef
• Tailwind CSS — utility classes for all styling
• Shadcn UI — Accordion, Badge, Button, Card, Slider, Switch, Select, Tabs, Table, Tooltip, Dialog
• Recharts — RadarChart, BarChart, PieChart, ResponsiveContainer
• Lucide React — icons (Check, X, AlertTriangle, ChevronDown, Copy, Lock, Flag, Edit3, Info, ArrowRight)

No external API calls. No localStorage. All state in React hooks.

---

Shared Design System

All colors, typography, spacing, component proportions, chart palettes, and quality standards are defined in the centralized design system: skills/design-system/SKILL.md.

Read and follow that file for all visual specifications. The key implementation notes for CP artifacts (dark theme context):

Dark Theme Surface Mapping

CP artifacts render inside Cowork's dark conversation pane. Use the dark theme surface tokens from the design system:

Token	Hex	Tailwind
Background	#0f172a	slate-900
Surface	#1e293b	slate-800
Elevated	#334155	slate-700
Border	#475569	slate-600
Text primary	#f8fafc	slate-50
Text secondary	#94a3b8	slate-400
Accent	#6366f1	indigo-500

Determination Color Mapping (Tailwind)

Determination	Tailwind text/bg classes
GO	text-green-500 bg-green-500/10 border-green-500/30
CONDITIONAL GO	text-blue-500 bg-blue-500/10 border-blue-500/30
CONDITIONAL HOLD	text-amber-500 bg-amber-500/10 border-amber-500/30
NO-GO	text-red-500 bg-red-500/10 border-red-500/30

Typography

• Font family: Inter, system-ui, -apple-system, sans-serif
• Monospace: JetBrains Mono, monospace for scores, IDs, JSON
• See design system for full type scale

Layout Pattern

Every CP artifact follows this structure:

<div className="min-h-screen bg-slate-900 text-slate-50 p-6">
  {/* HEADER */}
  <header className="mb-8">
    <div className="flex items-center justify-between">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{companyName}</h1>
        <p className="text-slate-400 text-sm">{phaseLabel} · {cpLabel}</p>
      </div>
      <DeterminationBadge value={determination} />  {/* if applicable */}
    </div>
  </header>

  {/* MAIN CONTENT — tab-based or section-based, varies per CP */}
  <main className="space-y-6">
    {/* CP-specific content */}
  </main>

  {/* STICKY FOOTER — changes tracker */}
  <footer className="fixed bottom-0 left-0 right-0 bg-slate-800 border-t border-slate-700 px-6 py-3">
    <ChangesFooter changes={changes} />
  </footer>
</div>

Changes Footer Component

Present in every CP artifact. Collapsed by default.

function ChangesFooter({ changes }) {
  const [expanded, setExpanded] = useState(false);
  const count = changes.length;

  const copyToClipboard = () => {
    const delta = JSON.stringify(changes, null, 2);
    navigator.clipboard.writeText(delta);
  };

  return (
    <div>
      <div className="flex items-center justify-between">
        <button
          onClick={() => setExpanded(!expanded)}
          className="text-sm text-slate-400 hover:text-slate-200 flex items-center gap-2"
        >
          {count === 0 ? (
            <span className="text-slate-500">No changes</span>
          ) : (
            <>
              <span className="text-indigo-400 font-medium">{count} change{count !== 1 ? 's' : ''} made</span>
              <ChevronDown className={`w-4 h-4 transition ${expanded ? 'rotate-180' : ''}`} />
            </>
          )}
        </button>
        <button
          onClick={copyToClipboard}
          className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm font-medium transition"
        >
          <Copy className="w-4 h-4" />
          Copy to Clipboard
        </button>
      </div>
      {expanded && count > 0 && (
        <pre className="mt-3 p-3 bg-slate-900 rounded-lg text-xs text-slate-300 max-h-48 overflow-auto font-mono">
          {JSON.stringify(changes, null, 2)}
        </pre>
      )}
    </div>
  );
}

Changes Tracking Pattern

Every artifact maintains changes state:

const [changes, setChanges] = useState([]);

const recordChange = useCallback((field, from, to, context = '') => {
  setChanges(prev => {
    const timestamp = new Date().toISOString();
    // Update existing change for this field, or add new
    const existing = prev.findIndex(c => c.field === field);
    if (existing >= 0) {
      // If reverted to original, remove the change
      if (JSON.stringify(to) === JSON.stringify(prev[existing].original)) {
        return prev.filter((_, i) => i !== existing);
      }
      const updated = [...prev];
      updated[existing] = { ...updated[existing], to, timestamp };
      return updated;
    }
    return [...prev, { field, original: from, to, context, timestamp }];
  });
}, []);

The delta JSON format:

[
  { "field": "funding_stage", "original": "seed", "to": "series-a", "context": "context-profile", "timestamp": "2026-03-15T14:32:07Z" },
  { "field": "domain_3_weight", "original": 0.12, "to": 0.15, "context": "framework", "timestamp": "2026-03-15T14:33:12Z" },
  { "field": "M4.2_criticality", "original": "optional", "to": "important", "context": "framework", "timestamp": "2026-03-15T14:34:01Z" }
]

Timestamp requirement (SOC 2 / ISAE 3402 compliance): Every change delta must include an ISO 8601 timestamp field recording when the change was made. The recordChange function automatically captures new Date().toISOString() at the moment of change. This ensures the audit trail has per-change temporal granularity for governance and regulatory purposes.

Shared UI Components

DeterminationBadge:

function DeterminationBadge({ value, size = 'lg' }) {
  const colors = {
    'GO': 'bg-green-500/20 text-green-400 border-green-500/30',
    'CONDITIONAL-GO': 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    'CONDITIONAL-HOLD': 'bg-amber-500/20 text-amber-400 border-amber-500/30',
    'NO-GO': 'bg-red-500/20 text-red-400 border-red-500/30',
  };
  const sizeClasses = size === 'lg' ? 'text-lg px-4 py-2' : 'text-xs px-2 py-1';
  return (
    <span className={`${colors[value]} ${sizeClasses} font-bold rounded-lg border`}>
      {value}
    </span>
  );
}

ScoreBar:

function ScoreBar({ score, max = 100, label }) {
  const pct = (score / max) * 100;
  const color = pct >= 75 ? 'bg-green-500' : pct >= 55 ? 'bg-amber-500' : pct >= 35 ? 'bg-orange-500' : 'bg-red-500';
  return (
    <div className="flex items-center gap-3">
      {label && <span className="text-xs text-slate-400 w-16">{label}</span>}
      <div className="flex-1 h-2 bg-slate-700 rounded-full overflow-hidden">
        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
      </div>
      <span className="text-sm font-mono font-medium w-12 text-right">{Math.round(pct)}%</span>
    </div>
  );
}

SeverityBadge:

function SeverityBadge({ severity }) {
  const colors = {
    critical: 'bg-red-500/20 text-red-400',
    significant: 'bg-orange-500/20 text-orange-400',
    moderate: 'bg-amber-500/20 text-amber-400',
    minor: 'bg-slate-500/20 text-slate-400',
  };
  return <span className={`${colors[severity]} text-xs px-2 py-0.5 rounded-full font-medium`}>{severity}</span>;
}

LockedField (for non-editable display):

function LockedField({ label, value }) {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Lock className="w-3 h-3 text-slate-500" />
      <span className="text-slate-400">{label}:</span>
      <span className="text-slate-200 font-medium">{value}</span>
    </div>
  );
}

EditableField (for inline editing with change tracking):

function EditableField({ label, value, onChange, type = 'text', options = [] }) {
  if (type === 'select') {
    return (
      <div className="flex items-center gap-2 text-sm">
        <Edit3 className="w-3 h-3 text-indigo-400" />
        <span className="text-slate-400">{label}:</span>
        <select
          value={value}
          onChange={e => onChange(e.target.value)}
          className="bg-slate-700 border border-slate-600 rounded px-2 py-1 text-slate-200 text-sm"
        >
          {options.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      </div>
    );
  }
  return (
    <div className="flex items-center gap-2 text-sm">
      <Edit3 className="w-3 h-3 text-indigo-400" />
      <span className="text-slate-400">{label}:</span>
      <input
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        className="bg-slate-700 border border-slate-600 rounded px-2 py-1 text-slate-200 text-sm"
      />
    </div>
  );
}

---

Constraint Enforcement

All business rules from the assessment workflow are enforced directly in the artifact UI:

Rule	Enforcement
Mandatory domains cannot be deactivated	Toggle disabled + Lock icon
Mandatory modules cannot be deactivated	Checkbox disabled + Lock icon
Criticality can only escalate	Dropdown only shows current level and above
Domain weights must sum to 100%	Auto-redistribute on change
Module weights must sum to 1.0 per domain	Auto-redistribute on change
Hard blockers are non-editable	Display only with red lock icon
Scores locked at CP3/CP5	No score edit controls; display only
Assessment modes escalate only (CP4)	Dropdown only shows current mode and above

---

Generation Instructions

When generating a CP artifact, follow this procedure:

1. Read the relevant JSON files from the workspace for this CP
2. Embed the data directly into the React component as a const at the top of the artifact
3. Use the shared design system — colors, typography, layout, components from this skill
4. Load the CP-specific reference from references/cp{N}-artifact.md for the detailed layout
5. Include the ChangesFooter in every artifact
6. Include all shared components (DeterminationBadge, ScoreBar, SeverityBadge, etc.) inline
7. Enforce all constraints from the table above in the UI logic
8. Keep the artifact self-contained — single React component, all code inline, no external imports beyond the allowed stack

After Artifact Interaction

After the assessor interacts with the artifact and pastes the delta JSON:

1. Parse the delta JSON — validate it's a proper array of change objects
2. Validate each change against business rules (e.g., criticality escalation only)
3. Apply valid changes to the relevant workspace JSON file(s)
4. Log all changes in the session audit trail with timestamps
5. Report back what was applied, what was rejected (if any), and why
6. Proceed to the next pipeline step

---

CP Reference Index

Detailed artifact specifications for each CP are in the references/ directory:

File	CP	Data Sources
references/cp1-artifact.md	CP1: Context & Assessor Profile	context-profile.json, assessor-profile.json
references/cp2-artifact.md	CP2: Assessment Framework	framework.json
references/cp3-artifact.md	CP3: Scored Findings	readiness-register.json, fit-to-purpose-register.json, gap-register.json, dependency-map.json, go-nogo-determination.json
references/cp4-artifact.md	CP4: Assessment Scope	assessment-scope-plan.json
references/cp5-artifact.md	CP5: Reconciled Findings	integrated-findings-register.json, domain-findings-*.json, updated-go-nogo-determination.json
references/sensitivity-selector.md	Sensitivity Methodology	updated-go-nogo-determination.json, integrated-findings-register.json
references/assessor-profile-collector.md	Assessor Profile Collection	Raw assessor inputs for criteria-resolver