+ {/* Problem Description Input */}
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {/* Validation Result */}
+ {validationResult && (
+
+
+
+ {validationResult.isValid ? (
+
+ ) : (
+
+ )}
+
+
+
+ {validationResult.message}
+
+
+ Score: {validationResult.score}
+
+
+
+
+ )}
+
+ {/* Interactive Testing Section */}
+
+
+
+
+ Testing
+
+
+
+
+ {/* Test String Inputs */}
+
+ {testStrings.slice(0, 3).map((testString, index) => (
+
+ {
+ const newTestStrings = [...testStrings]
+ newTestStrings[index] = e.target.value
+ setTestStrings(newTestStrings)
+ }}
+ placeholder="Test string"
+ className="flex-1 px-1.5 py-0.5 text-xs border border-border rounded bg-background text-foreground focus:ring-1 focus:ring-primary"
+ />
+
+
+ ))}
+ {testStrings.length < 5 && (
+
+ )}
+
+
+ {/* Test Results */}
+ {testResults.length > 0 && (
+
+
Results:
+
+ {testResults.slice(0, 4).map((result, index) => (
+
+
+ "{result.string || 'ε'}" → {result.accepted ? '✓' : '✗'}
+
+
+ {result.path.slice(0, 4).join('→')}
+ {result.path.length > 4 && '...'}
+
+
+ ))}
+ {testResults.length > 4 && (
+
+ +{testResults.length - 4} more results
+
+ )}
+
+
+ )}
+
+